---
title: UI Feedback
---

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

```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",
  addressed:  "Addressed",
  resolved:   "Resolved",
  wont_fix:   "Won't Fix",
};
const STEP_COLOR = {
  submitted:  "#94a3b8",
  analyse:    "#3b82f6",
  plan:       "#8b5cf6",
  implement:  "#f59e0b",
  test:       "#06b6d4",
  review:     "#6366f1",
  finished:   "#16a34a",
  addressed:  "#16a34a",
  resolved:   "#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.",
  addressed:  "Implemented before the current workflow labels existed.",
  resolved:   "Resolved before the current workflow labels existed.",
  wont_fix:   "Decided not to implement.",
};
const CLOSED_STATUSES = new Set(["finished", "addressed", "resolved", "wont_fix"]);
function nextStep(current) {
  const i = STEPS.indexOf(current);
  return i >= 0 && i < STEPS.length - 1 ? STEPS[i + 1] : null;
}
```

```js
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, addressed:7, resolved:8, wont_fix:9, open:10, in_progress:11};
            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}));
  }
})();
```

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

# UI Feedback

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

const _active   = data.filter(t => !CLOSED_STATUSES.has(t.status));
const _finished = data.filter(t => ["finished", "addressed", "resolved"].includes(t.status));
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

```js
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

```js
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>`);
}
```

<style>
.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }
.kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; border-top: 1px solid var(--theme-foreground-faint, #eee); }
.kpi-row:first-of-type { border-top: none; }
.kpi-row-label { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); }
.kpi-row-right { text-align: right; }
.kpi-row-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.fb-list { display: flex; flex-direction: column; gap: 1rem; }
.fb-list-closed { opacity: 0.72; }
.fb-card { border-left: 3px solid #6366f1; border-radius: 0 8px 8px 0; background: var(--theme-background-alt); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.fb-card-closed { gap: 0.4rem; }
.fb-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.fb-location { font-size: 0.72rem; color: var(--theme-foreground-faint); font-style: italic; flex: 1; }
.fb-title { font-weight: 700; font-size: 1rem; }
.fb-suggestion { font-size: 0.85rem; color: var(--theme-foreground-muted); line-height: 1.5; white-space: pre-wrap; }
.fb-step-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.td-ref { font-family: monospace; font-size: 0.72rem; color: var(--theme-foreground-muted); background: var(--theme-background); border: 1px solid var(--theme-foreground-faint, #ddd); border-radius: 4px; padding: 0.05rem 0.35rem; }

/* ── Stepper ────────────────────────────────────────────────────────── */
.fb-stepper { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 0.5rem 0; gap: 0; }
.fb-step { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 54px; }
.fb-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--theme-foreground-faint, #ccc); background: var(--theme-background); }
.fb-step-done .fb-step-dot { background: #16a34a; border-color: #16a34a; }
.fb-step-current .fb-step-dot { width: 12px; height: 12px; }
.fb-step-label { font-size: 0.62rem; color: var(--theme-foreground-faint); margin-top: 0.25rem; text-align: center; white-space: nowrap; }
.fb-step-done .fb-step-label { color: #16a34a; }
.fb-step-current .fb-step-label { font-weight: 700; color: var(--theme-foreground); }
.fb-step-line { flex: 1; height: 2px; background: var(--theme-foreground-faint, #ddd); min-width: 12px; margin-bottom: 18px; }
.fb-step-line-done { background: #16a34a; }

/* ── Notes ──────────────────────────────────────────────────────────── */
.fb-notes-section { margin-top: 0.1rem; }
.fb-notes-toggle { cursor: pointer; font-size: 0.75rem; color: var(--theme-foreground-muted); user-select: none; padding: 0.15rem 0; }
.fb-notes { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.5rem; }
.fb-notes-compact { margin-top: 0.3rem; }
.fb-no-notes { font-size: 0.75rem; color: var(--theme-foreground-faint); font-style: italic; margin: 0.2rem 0 0.4rem; }
.fb-note { background: var(--theme-background); border-radius: 5px; padding: 0.4rem 0.6rem; font-size: 0.82rem; line-height: 1.45; }
.fb-note-step { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 8px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; margin-right: 0.35rem; }
.fb-note-author { font-size: 0.7rem; color: var(--theme-foreground-muted); margin-right: 0.35rem; }
.fb-note-time { font-size: 0.68rem; color: var(--theme-foreground-faint); }
.fb-note-content { margin-top: 0.2rem; white-space: pre-wrap; }
.fb-note-form { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.25rem; }
.fb-note-ta { flex: 1; font-size: 0.82rem; font-family: inherit; border: 1px solid var(--theme-foreground-faint, #ccc); border-radius: 5px; padding: 0.35rem 0.5rem; background: var(--theme-background); resize: vertical; line-height: 1.45; color: inherit; }

/* ── Actions ────────────────────────────────────────────────────────── */
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.1rem; }
.fb-review-hint { font-size: 0.75rem; color: #6366f1; font-style: italic; flex: 1; }
.fb-btn { padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.78rem; font-family: inherit; cursor: pointer; font-weight: 600; border: 1px solid transparent; transition: opacity 0.1s; background: var(--theme-background); }
.fb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fb-btn-advance { border-width: 1.5px; }
.fb-btn-advance:hover:not(:disabled) { opacity: 0.75; }
.fb-btn-note { border-color: var(--theme-foreground-faint, #ccc); color: var(--theme-foreground-muted); }
.fb-btn-note:hover:not(:disabled) { background: var(--theme-background-alt); }
.fb-btn-wontfix { color: #9ca3af; border-color: #e5e7eb; }
.fb-btn-wontfix:hover:not(:disabled) { background: #f3f4f6; }

.dim { color: gray; font-style: italic; }
</style>
