Files

tegwick 41ce4ede2c feat(dashboard): poll optimisation — T4, T5, T6

T4: workstreams.md and dependencies.md now call /state/deps instead of the
    full /state/summary — removes 2 heavy 10-table queries per 60 s cycle.

T5: index.md's 4 independent polling loops (summaryState, sbomSnapState,
    regsState, wsChartState) consolidated into a single pageState generator
    with one Promise.all batch and a shared backoff counter.

T6: config.js gains waitForVisible(ms) — pauses polling entirely while the
    tab is hidden and fires immediately on visibilitychange.  pollDelay()
    simplified (hidden-tab POLL_HIDDEN logic removed).  All 16 polling pages
    migrated from await sleep(pollDelay(...)) to await waitForVisible(pollDelay(...)).

CUST-WP-0039 complete — all 6 tasks done.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-05-11 17:58:18 +02:00

15 KiB

Raw Blame History

title

title
UI Feedback

import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";

// Ordered workflow steps for dashboard-improvement suggestions
const STEPS = ["submitted", "analyse", "plan", "implement", "test", "review", "finished"];
const STEP_LABEL = {
  submitted:  "Submitted",
  analyse:    "Analyse",
  plan:       "Plan",
  implement:  "Implement",
  test:       "Test",
  review:     "Review",
  finished:   "Finished",
  wont_fix:   "Won't Fix",
};
const STEP_COLOR = {
  submitted:  "#94a3b8",
  analyse:    "#3b82f6",
  plan:       "#8b5cf6",
  implement:  "#f59e0b",
  test:       "#06b6d4",
  review:     "#6366f1",
  finished:   "#16a34a",
  wont_fix:   "#9ca3af",
};
const STEP_HINT = {
  submitted:  "New suggestion — not yet triaged.",
  analyse:    "Investigating the issue and its scope.",
  plan:       "Designing the solution approach.",
  implement:  "Building the change.",
  test:       "Verifying the implementation works correctly.",
  review:     "Awaiting review by the original suggester.",
  finished:   "Shipped and confirmed.",
  wont_fix:   "Decided not to implement.",
};
function nextStep(current) {
  const i = STEPS.indexOf(current);
  return i >= 0 && i < STEPS.length - 1 ? STEPS[i + 1] : null;
}

const feedbackState = (async function*() {
  let failures = 0;
  while (true) {
    let data = [], ok = false;
    try {
      const r = await apiFetch("/technical-debt/?debt_type=dashboard-improvement");
      ok = r.ok;
      if (ok) {
        const items = await r.json();
        data = items
          .filter(t => t.debt_type === "dashboard-improvement")
          .sort((a, b) => {
            const st = {submitted:0, analyse:1, plan:2, implement:3, test:4, review:5, finished:6, wont_fix:7, open:8, in_progress:9, resolved:10};
            return (st[a.status] ?? 99) - (st[b.status] ?? 99);
          });
      }
    } catch {}
    failures = ok ? 0 : failures + 1;
    yield {data, ok, ts: new Date()};
    await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
  }
})();

const data = feedbackState.data ?? [];
const _ok  = feedbackState.ok   ?? false;
const _ts  = feedbackState.ts;

UI Feedback

import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp}  from "./components/doc-overlay.js";

const _active   = data.filter(t => t.status !== "finished" && t.status !== "wont_fix");
const _finished = data.filter(t => t.status === "finished");
const _wontfix  = data.filter(t => t.status === "wont_fix");

const _kpiBox = html`<div class="kpi-infobox">
  <div class="kpi-infobox-title">UI Feedback</div>
  <div class="kpi-row">
    <span class="kpi-row-label">active</span>
    <div class="kpi-row-right"><div class="kpi-row-value" style="color:${_active.length > 0 ? '#6366f1' : 'inherit'}">${_active.length}</div></div>
  </div>
  <div class="kpi-row">
    <span class="kpi-row-label">finished</span>
    <div class="kpi-row-right"><div class="kpi-row-value">${_finished.length}</div></div>
  </div>
  <div class="kpi-row">
    <span class="kpi-row-label">won't fix</span>
    <div class="kpi-row-right"><div class="kpi-row-value">${_wontfix.length}</div></div>
  </div>
</div>`;

const _liveEl = html`<div class="live-indicator">
  <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
  ${_ok
    ? `Live · updated ${_ts?.toLocaleTimeString()}`
    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
</div>`;

injectTocTop("fb-kpi-box", _kpiBox);
injectTocTop("live-indicator", _liveEl);

Shift+click any widget on any dashboard page to submit a suggestion. Each suggestion moves through the workflow below; the Review step is for the original suggester to confirm the implementation is correct.

Active

async function _advance(td, newStatus) {
  return fetch(`${API}/technical-debt/${td.id}`, {
    method: "PATCH",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({status: newStatus}),
  });
}

async function _addNote(td_id, step, content) {
  return fetch(`${API}/technical-debt/${td_id}/notes/`, {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({step, content, author: "custodian"}),
  });
}

function renderSuggestionCard(t) {
  const isWorkflow = STEPS.includes(t.status);
  const next = nextStep(t.status);
  const color = STEP_COLOR[t.status] ?? "#94a3b8";
  const stepIdx = STEPS.indexOf(t.status);

  // ── Stepper ─────────────────────────────────────────────────────────
  const stepperEl = html`<div class="fb-stepper">
    ${STEPS.map((s, i) => {
      const done    = i < stepIdx;
      const current = i === stepIdx;
      return html`<div class="fb-step ${done ? 'fb-step-done' : ''} ${current ? 'fb-step-current' : ''}">
        <div class="fb-step-dot" style="${current ? `background:${color};border-color:${color}` : done ? 'background:#16a34a;border-color:#16a34a' : ''}"></div>
        <div class="fb-step-label">${STEP_LABEL[s]}</div>
      </div>
      ${i < STEPS.length - 1 ? html`<div class="fb-step-line ${done || current && i < stepIdx ? 'fb-step-line-done' : ''}"></div>` : ""}`;
    })}
  </div>`;

  // ── Notes ────────────────────────────────────────────────────────────
  const notesEl = html`<div class="fb-notes">
    ${(t.notes ?? []).length === 0
      ? html`<p class="fb-no-notes">No notes yet for this step.</p>`
      : (t.notes ?? []).map(n => html`<div class="fb-note">
          <span class="fb-note-step" style="background:${STEP_COLOR[n.step] ?? '#94a3b8'}20;color:${STEP_COLOR[n.step] ?? '#64748b'}">${STEP_LABEL[n.step] ?? n.step}</span>
          <span class="fb-note-author">${n.author ?? "anon"}</span>
          <span class="fb-note-time">${new Date(n.created_at).toLocaleString()}</span>
          <div class="fb-note-content">${n.content}</div>
        </div>`)}
  </div>`;

  // ── Add note form ────────────────────────────────────────────────────
  const noteTA  = html`<textarea class="fb-note-ta" rows="2" placeholder="Add a note for this step…"></textarea>`;
  const noteBtn = html`<button class="fb-btn fb-btn-note">+ note</button>`;
  noteBtn.addEventListener("click", async () => {
    const txt = noteTA.value.trim();
    if (!txt) return;
    noteBtn.disabled = true;
    const r = await _addNote(t.id, t.status, txt);
    if (r.ok) {
      noteTA.value = "";
      // Refresh: remove and re-fetch by reloading feedbackState on next poll
    }
    noteBtn.disabled = false;
  });
  const noteForm = html`<div class="fb-note-form">${noteTA}${noteBtn}</div>`;

  // ── Actions ──────────────────────────────────────────────────────────
  const actionsEl = html`<div class="fb-actions">
    ${t.status === "review"
      ? html`<span class="fb-review-hint">⬆ Awaiting confirmation from the original suggester</span>`
      : ""}
    ${next ? html`<button class="fb-btn fb-btn-advance" style="border-color:${STEP_COLOR[next]};color:${STEP_COLOR[next]}"
        onclick=${async (e) => { e.currentTarget.disabled = true; await _advance(t, next); }}>
        → ${STEP_LABEL[next]}
      </button>` : ""}
    <button class="fb-btn fb-btn-wontfix"
        onclick=${async (e) => { e.currentTarget.disabled = true; await _advance(t, "wont_fix"); }}>
      ✕ won't fix
    </button>
  </div>`;

  return html`<div class="fb-card" style="border-left-color:${color}">
    <div class="fb-card-header">
      ${t.td_id ? html`<span class="td-ref">${t.td_id}</span>` : ""}
      <span class="fb-step-badge" style="background:${color}20;color:${color}">${STEP_LABEL[t.status] ?? t.status}</span>
      <span class="fb-location">${t.location ?? ""}</span>
    </div>
    <div class="fb-title">${t.title.replace(/^UI:\s*/, "")}</div>
    <div class="fb-suggestion">${t.description ?? ""}</div>
    ${stepperEl}
    <details class="fb-notes-section" open>
      <summary class="fb-notes-toggle">Notes (${(t.notes ?? []).length})</summary>
      ${notesEl}
      ${noteForm}
    </details>
    ${actionsEl}
  </div>`;
}

if (_active.length === 0) {
  display(html`<p class="dim">No active suggestions. Shift+click any dashboard widget to submit one.</p>`);
} else {
  display(html`<div class="fb-list">${_active.map(renderSuggestionCard)}</div>`);
}

Finished & Won't Fix

const _closed = [..._finished, ..._wontfix];
if (_closed.length === 0) {
  display(html`<p class="dim">Nothing closed yet.</p>`);
} else {
  display(html`<div class="fb-list fb-list-closed">${_closed.map(t => {
    const color = STEP_COLOR[t.status] ?? "#94a3b8";
    return html`<div class="fb-card fb-card-closed" style="border-left-color:${color}">
      <div class="fb-card-header">
        ${t.td_id ? html`<span class="td-ref">${t.td_id}</span>` : ""}
        <span class="fb-step-badge" style="background:${color}20;color:${color}">${STEP_LABEL[t.status] ?? t.status}</span>
        <span class="fb-location">${t.location ?? ""}</span>
      </div>
      <div class="fb-title">${t.title.replace(/^UI:\s*/, "")}</div>
      <div class="fb-suggestion">${t.description ?? ""}</div>
      ${(t.notes ?? []).length > 0 ? html`<div class="fb-notes fb-notes-compact">
        ${t.notes.slice(-2).map(n => html`<div class="fb-note">
          <span class="fb-note-step" style="background:${STEP_COLOR[n.step] ?? '#94a3b8'}20;color:${STEP_COLOR[n.step] ?? '#64748b'}">${STEP_LABEL[n.step] ?? n.step}</span>
          <div class="fb-note-content">${n.content}</div>
        </div>`)}
      </div>` : ""}
    </div>`;
  })}</div>`);
}

15 KiB Raw Blame History

UI Feedback

Active

Finished & Won't Fix

15 KiB

Raw Blame History