state-hub/dashboard/src/wsjf-triage.md

title
Daily WSJF Triage

import {POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp} from "./components/doc-overlay.js";
import {
  ACTION_META,
  actionMeta,
  buildCandidateIndex,
  buildPatternRows,
  isWithinDays,
  normalizeTriageReports,
  resolveCandidate,
  topAction,
  truncateSummary,
} from "./components/wsjf-triage.js";

const triageState = (async function*() {
  let failures = 0;
  while (true) {
    let events = [], workplanIndex = {workplans: {}}, ok = false;
    try {
      const [reportsResp, indexResp] = await Promise.all([
        apiFetch("/progress/?event_type=daily_triage&limit=14"),
        apiFetch("/workplans/index"),
      ]);
      ok = reportsResp.ok && indexResp.ok;
      events = reportsResp.ok ? await reportsResp.json() : [];
      workplanIndex = indexResp.ok ? await indexResp.json() : {workplans: {}};
    } catch {}
    failures = ok ? 0 : failures + 1;
    yield {events, workplanIndex, ok, ts: new Date()};
    await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
  }
})();

const reports = normalizeTriageReports(triageState.events ?? []);
const candidateIndex = buildCandidateIndex(triageState.workplanIndex ?? {workplans: {}});
const _ok = triageState.ok ?? false;
const _ts = triageState.ts;
const latestReport = reports[0] ?? null;

Daily WSJF Triage

function fmtDateTime(iso) {
  if (!iso) return "-";
  const d = new Date(iso);
  return Number.isNaN(d.getTime()) ? String(iso) : d.toLocaleString();
}

function fmtDate(iso) {
  if (!iso) return "-";
  const d = new Date(iso);
  return Number.isNaN(d.getTime()) ? String(iso).slice(0, 10) : d.toLocaleDateString(undefined, {year: "numeric", month: "short", day: "numeric"});
}

function candidateNode(candidate, index) {
  const resolved = resolveCandidate(candidate, index);
  return resolved
    ? html`<a href="/workstreams/${resolved.id}" title=${resolved.filename ?? resolved.id}>${candidate}</a>`
    : html`<span>${candidate || "-"}</span>`;
}

function actionBadge(action, extraText = "") {
  const meta = actionMeta(action);
  return html`<span class="triage-action triage-action-${meta.tone}" title=${meta.description}>${meta.label}${extraText}</span>`;
}

function recommendationTable(report, index) {
  const recommendations = report.recommendations ?? [];
  if (recommendations.length === 0) {
    return html`<p class="triage-muted">No recommendations were recorded for this report.</p>`;
  }
  return html`<div>
    <table class="triage-table triage-recommendations">
      <thead><tr><th>#</th><th>Candidate</th><th>Action</th><th>Confidence</th><th>Why</th></tr></thead>
      <tbody>${recommendations.map(rec => html`<tr>
        <td>${rec.rank}</td>
        <td>${candidateNode(rec.candidate, index)}</td>
        <td>${actionBadge(rec.action)}</td>
        <td><span class="triage-confidence">${rec.confidence}</span></td>
        <td>${rec.why || "-"}</td>
      </tr>`)}</tbody>
    </table>
    <div class="triage-legend">
      ${Object.values(ACTION_META).map(meta => html`<span>${actionBadge(meta.label)} ${meta.description}</span>`)}
    </div>
  </div>`;
}

function reportMetadata(report) {
  return html`<div class="triage-metadata">
    <div><span>Scheduled for</span><strong>${fmtDateTime(report.scheduled_for)}</strong></div>
    <div><span>Created</span><strong>${fmtDateTime(report.created_at)}</strong></div>
    <div><span>Instruction</span><strong>${report.instruction_id ?? "-"}</strong></div>
    <div><span>Activity run</span><strong>${report.activity_core_run_id ?? "-"}</strong></div>
    <div><span>Activity</span><strong>${report.activity_id ?? "-"}</strong></div>
    <div><span>Memory note</span><strong>${report.memory_path ?? "-"}</strong></div>
  </div>`;
}

function renderReportDetail(report, index) {
  return html`<div>
    <div class="triage-section-heading">
      <h2>Report Detail</h2>
      <span>${fmtDate(report.scheduled_for ?? report.created_at)}</span>
    </div>
    <section class="triage-detail-block">
      <h3>Summary</h3>
      <p>${report.summary || "-"}</p>
    </section>
    <section class="triage-detail-block">
      <h3>Recommendations</h3>
      ${recommendationTable(report, index)}
    </section>
    <section class="triage-detail-block">
      <h3>Run Metadata</h3>
      ${reportMetadata(report)}
    </section>
  </div>`;
}

function renderPatterns(reports, index) {
  const windowReports = reports.filter(report => isWithinDays(report.created_at, 14));
  const rows = buildPatternRows(windowReports);
  return html`<section class="triage-section">
    <div class="triage-section-heading">
      <h2>Patterns</h2>
      <span>Last 14 days</span>
    </div>
    ${rows.length === 0
      ? html`<p class="triage-muted">No repeated recommendations are visible in the loaded 14-day window.</p>`
      : html`<table class="triage-table">
        <thead><tr><th>Workplan</th><th>Times Recommended</th><th>Most Frequent Action</th></tr></thead>
        <tbody>${rows.map(row => html`<tr>
          <td>${candidateNode(row.candidate, index)}</td>
          <td>${row.count} / ${Math.max(1, windowReports.length)} reports</td>
          <td>${actionBadge(row.action, ` x${row.actionCount}`)}</td>
        </tr>`)}</tbody>
      </table>`}
  </section>`;
}

function renderExplorer(reports, index) {
  const root = html`<div class="triage-explorer"></div>`;
  const detail = html`<section id="triage-report-detail" class="triage-section"></section>`;
  const tableBody = html`<tbody></tbody>`;
  const rows = [];
  let selectedId = reports[0]?.id;

  function selectReport(report, {scroll = true} = {}) {
    selectedId = report.id;
    for (const row of rows) {
      row.classList.toggle("is-selected", row.dataset.reportId === selectedId);
      row.setAttribute("aria-selected", row.dataset.reportId === selectedId ? "true" : "false");
    }
    detail.replaceChildren(renderReportDetail(report, index));
    if (scroll) detail.scrollIntoView({behavior: "smooth", block: "start"});
  }

  for (const report of reports) {
    const top = topAction(report.recommendations);
    const row = html`<tr class="triage-report-row" tabindex="0" role="button" data-report-id=${report.id} aria-selected="false">
      <td>${fmtDate(report.scheduled_for ?? report.created_at)}</td>
      <td>${truncateSummary(report.summary)}</td>
      <td>${report.recommendations.length}</td>
      <td>${top ? actionBadge(top.action, ` x${top.count}`) : "-"}</td>
    </tr>`;
    row.addEventListener("click", () => selectReport(report));
    row.addEventListener("keydown", event => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        selectReport(report);
      }
    });
    rows.push(row);
  }
  tableBody.append(...rows);

  root.append(
    html`<section class="triage-section">
      <div class="triage-section-heading">
        <h2>Recent Reports</h2>
        <span>${reports.length} loaded</span>
      </div>
      <table class="triage-table triage-reports">
        <thead><tr><th>Date</th><th>Summary</th><th># Recs</th><th>Top Action</th></tr></thead>
        ${tableBody}
      </table>
    </section>`,
    detail,
    renderPatterns(reports, index),
  );

  if (reports[0]) selectReport(reports[0], {scroll: false});
  return root;
}

const _liveEl = html`<div class="live-indicator">
  <span class="live-dot" style="background:${_ok ? "var(--theme-foreground-focus)" : "red"}"></span>
  ${_ok
    ? `Live - updated ${_ts?.toLocaleTimeString()} - ${reports.length} triage reports`
    : html`<span style="color:red">Offline - run: <code>make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/live-data");
injectTocTop("live-indicator", _liveEl);

const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/wsjf-triage"); }

display(html`<p class="triage-subtitle">Daily State Hub triage from activity-core. Recommendations are advisory; the operator and workplan owners decide what to act on. Ranked <a href="/suggestions">suggestion backlog</a> feeds the digest.</p>`);
display(html`<div class="triage-latest">
  <span>Last updated</span>
  <strong>${latestReport ? fmtDateTime(latestReport.created_at) : "No daily_triage events yet"}</strong>
</div>`);

if (reports.length === 0) {
  const empty = html`<div class="triage-empty">
    <h2>No daily triage reports yet.</h2>
    <p>The next run is scheduled for 07:20 Europe/Berlin (activity-core <code>daily-statehub-wsjf-triage</code>).</p>
  </div>`;
  withDocHelp(empty, "/docs/wsjf-triage");
  display(empty);
} else {
  display(renderExplorer(reports, candidateIndex));
}