omp-conductor 0.15.11 → 0.15.13

package/src/dashboard/app.js

@@ -1,18 +1,34 @@
-// The dashboard UI (conductor #293): ask for the bearer token once, keep it in
-// localStorage, and render `/api/projects` with every daemon state explicit —
-// a stopped, unreachable or foreign daemon renders as down, never as an empty
-// healthy fleet.
+// The dashboard UI (conductor #293 + #294): ask for the bearer token once,
+// keep it in localStorage, and render the fleet monitoring surface — the fleet
+// overview, per-project board/ledger/reports and run detail — from the
+// read-only `/api/*` producers. Every row points at the same producer the CLI
+// renders, and a degraded or unreachable daemon renders DEGRADED rather than a
+// fabricated healthy empty row.
 //
 // Plain browser JS, no runtime deps: the page is served unauthenticated and
-// the token lives only in the browser's localStorage, never in a URL.
+// the token lives only in the browser's localStorage, never in a URL. Data
+// refreshes by polling every 8s — no websockets in this slice.
 
 const TOKEN_KEY = "omp-conductor-dashboard-token";
+const POLL_MS = 8000;
+
 const tokenPanel = document.getElementById("token-panel");
 const tokenForm = document.getElementById("token-form");
 const tokenInput = document.getElementById("token-input");
 const tokenError = document.getElementById("token-error");
 const fleet = document.getElementById("fleet");
 const projects = document.getElementById("projects");
+const projectView = document.getElementById("project");
+const projectTitle = document.getElementById("project-title");
+const projectDaemon = document.getElementById("project-daemon");
+const projectSummary = document.getElementById("project-summary");
+const tabsNav = document.getElementById("tabs");
+const panelBoard = document.getElementById("panel-board");
+const panelLedger = document.getElementById("panel-ledger");
+const panelReports = document.getElementById("panel-reports");
+const runDetail = document.getElementById("run-detail");
+const runTitle = document.getElementById("run-title");
+const runAttempts = document.getElementById("run-attempts");
 
 /** Human verdict per daemon state — "down" spelled out by design. */
 const STATE_TEXT = {
@@ -22,22 +38,45 @@ const STATE_TEXT = {
   "other-project": "daemon down — serves another project",
 };
 
-async function apiProjects(token) {
-  const res = await fetch("/api/projects", {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  if (res.status === 401) return null;
-  if (!res.ok) throw new Error(`/api/projects answered ${res.status}`);
-  return res.json();
+/** The board's lane titles, fixed by `COLUMN_DEFS` in board.ts. */
+const LANE_TITLES = {
+  queue: "QUEUE",
+  claimed: "CLAIMED",
+  running: "RUNNING",
+  green: "GREEN",
+  blocked: "BLOCKED",
+  failed: "FAILED",
+  orphaned: "ORPHANED",
+  merged: "MERGED",
+  settled: "SETTLED",
+  parked: "PARKED",
+};
+
+let token = localStorage.getItem(TOKEN_KEY);
+let currentProject = null;
+let currentTab = "board";
+let pollTimer = null;
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className !== undefined && className !== null && className !== "") node.className = className;
+  if (text !== undefined && text !== null) node.textContent = String(text);
+  return node;
 }
 
-function showTokenPrompt() {
-  localStorage.removeItem(TOKEN_KEY);
-  tokenInput.value = "";
-  tokenError.hidden = true;
-  tokenPanel.hidden = false;
-  fleet.hidden = true;
-  tokenInput.focus();
+function clear(node) {
+  node.replaceChildren();
+  return node;
+}
+
+async function api(path) {
+  const res = await fetch(path, { headers: { Authorization: `Bearer ${token}` } });
+  if (res.status === 401) {
+    showTokenPrompt();
+    throw new Error("token refused");
+  }
+  if (!res.ok) throw new Error(`${path} answered ${res.status}`);
+  return res.json();
 }
 
 function daemonLine(view) {
@@ -48,73 +87,373 @@ function daemonLine(view) {
       : STATE_TEXT[daemon.state];
   const parts = [text];
   if (daemon.port !== null && daemon.port !== undefined) parts.push(`port ${daemon.port}`);
-  if (daemon.state === "ok") parts.push("healthz answering");
   return parts.join(" · ");
 }
 
-function showProject(view) {
-  const li = document.createElement("li");
-  li.className = "project";
-  const dot = document.createElement("span");
-  dot.className = `dot dot-${view.daemon.state}`;
-  dot.setAttribute("aria-hidden", "true");
-  const body = document.createElement("div");
-  body.className = "body";
-  const name = document.createElement("span");
-  name.className = "name";
-  name.textContent = view.name;
-  const repo = document.createElement("span");
-  repo.className = "repo";
-  repo.textContent = view.repo;
-  const state = document.createElement("span");
-  state.className = `state state-${view.daemon.state}`;
-  state.textContent = daemonLine(view);
-  body.append(name, repo, state);
-  li.append(dot, body);
-  projects.appendChild(li);
+function usd(value) {
+  return `$${value.toFixed(2)}`;
 }
 
+function baseHealthSummary(baseHealth) {
+  if (baseHealth.length === 0) return "base: —";
+  return baseHealth
+    .map((b) => `${b.repo}@${b.branch ?? "?"}: ${b.verdict}`)
+    .join(", ");
+}
+
+function showTokenPrompt() {
+  localStorage.removeItem(TOKEN_KEY);
+  stopPolling();
+  token = null;
+  tokenInput.value = "";
+  tokenError.hidden = true;
+  tokenPanel.hidden = false;
+  fleet.hidden = true;
+  projectView.hidden = true;
+  tokenInput.focus();
+}
+
+function stopPolling() {
+  if (pollTimer !== null) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+}
+
+function startPolling() {
+  stopPolling();
+  pollTimer = setInterval(() => {
+    if (token === null) return;
+    if (currentProject === null) {
+      refreshOverview().catch((err) => renderFleetError(err));
+    } else if (!runDetail.hidden) {
+      // The run detail is a snapshot; the board behind it keeps polling.
+      refreshBoard().catch(() => undefined);
+    } else {
+      refreshProject(currentTab).catch((err) => renderProjectError(err));
+    }
+  }, POLL_MS);
+}
+
+// ---------------------------------------------------------------------------
+// fleet overview
+// ---------------------------------------------------------------------------
+
 function showFleet(list) {
-  projects.replaceChildren();
+  tokenPanel.hidden = true;
+  fleet.hidden = false;
+  const out = clear(projects);
   if (list.length === 0) {
-    const li = document.createElement("li");
-    li.className = "project";
-    li.textContent = "No projects configured.";
-    projects.appendChild(li);
-  } else {
-    for (const view of list) showProject(view);
+    out.appendChild(el("li", "project", "No projects configured."));
+    return;
   }
-  tokenPanel.hidden = true;
+  for (const row of list) {
+    const li = el("li", "project is-clickable");
+    const dot = el("span", `dot dot-${row.daemon.state}`);
+    dot.setAttribute("aria-hidden", "true");
+    const body = el("div", "body");
+    body.appendChild(el("span", "name", row.name));
+    body.appendChild(el("span", "repo", row.repo));
+    if (row.degraded) {
+      const degraded = el("span", "state state-degraded", "DEGRADED");
+      body.appendChild(degraded);
+    }
+    body.appendChild(el("span", "state state-muted", daemonLine(row)));
+    body.appendChild(
+      el(
+        "span",
+        "meta",
+        `dispatch ${row.dispatch} · ${row.liveWorkers} worker(s) · ` +
+          `${usd(row.spendTodayUsd)} today`,
+      ),
+    );
+    const base = el("span", "meta base", baseHealthSummary(row.baseHealth));
+    body.appendChild(base);
+    li.append(dot, body);
+    li.addEventListener("click", () => openProject(row.name));
+    out.appendChild(li);
+  }
+}
+
+function renderFleetError(err) {
+  const out = clear(projects);
+  const li = el("li", "project error", `Could not load the fleet: ${err.message}`);
+  out.appendChild(li);
+}
+
+async function refreshOverview() {
+  const list = await api("/api/overview");
+  showFleet(list);
+}
+
+function showFleetView() {
+  currentProject = null;
+  runDetail.hidden = true;
+  projectView.hidden = true;
   fleet.hidden = false;
+  tokenPanel.hidden = true;
+  refreshOverview().catch(renderFleetError);
+  startPolling();
 }
 
-async function start(token) {
-  tokenError.hidden = true;
-  const list = await apiProjects(token);
-  if (list === null) {
-    showTokenPrompt();
+// ---------------------------------------------------------------------------
+// project view (board / ledger / reports) and run detail
+// ---------------------------------------------------------------------------
+
+function setTab(tab) {
+  currentTab = tab;
+  for (const button of tabsNav.querySelectorAll("button")) {
+    button.classList.toggle("active", button.dataset.tab === tab);
+  }
+  panelBoard.hidden = tab !== "board";
+  panelLedger.hidden = tab !== "ledger";
+  panelReports.hidden = tab !== "reports";
+  runDetail.hidden = true;
+}
+
+async function refreshProject(tab) {
+  if (tab === "ledger") return refreshLedger();
+  if (tab === "reports") return refreshReports();
+  return refreshBoard();
+}
+
+function renderProjectError(err) {
+  const target = currentTab === "ledger" ? panelLedger : currentTab === "reports" ? panelReports : panelBoard;
+  clear(target).appendChild(el("p", "error", `Could not load: ${err.message}`));
+}
+
+async function openProject(name) {
+  currentProject = name;
+  projectTitle.textContent = name;
+  fleet.hidden = true;
+  projectView.hidden = false;
+  runDetail.hidden = true;
+  setTab("board");
+  // The shared daemon verdict (`/api/projects`), shown under the project title
+  // — DEGRADED when the daemon is unreachable or serves another project.
+  const rows = await api("/api/projects");
+  const row = rows.find((r) => r.name === name);
+  if (row === undefined) {
+    projectDaemon.textContent = "";
+  } else {
+    projectDaemon.textContent = daemonLine(row);
+    projectDaemon.classList.toggle(
+      "state-degraded",
+      row.daemon.state === "unreachable" || row.daemon.state === "other-project",
+    );
+  }
+  await refreshProject("board");
+  startPolling();
+}
+
+async function refreshBoard() {
+  refreshStatusSummary().catch(() => undefined);
+  const path = `/api/projects/${encodeURIComponent(currentProject)}/board`;
+  const data = await api(path);
+  const board = clear(panelBoard);
+  const lanes = data.lanes ?? {};
+  const row = el("div", "lanes");
+  for (const key of Object.keys(LANE_TITLES)) {
+    const col = el("div", "lane");
+    const header = el("div", "lane-title", `${LANE_TITLES[key]} (${(lanes[key] ?? []).length})`);
+    col.appendChild(header);
+    const cards = el("div", "cards");
+    for (const entry of lanes[key] ?? []) {
+      const card = el("button", "card", `#${entry.issue}`);
+      card.type = "button";
+      const sub = el("span", "card-state", entry.state);
+      if (entry.attempt !== undefined) sub.append(` · attempt ${entry.attempt}`);
+      card.appendChild(sub);
+      card.addEventListener("click", () => showRunDetail(entry.issue));
+      cards.appendChild(card);
+    }
+    if (cards.childNodes.length === 0) cards.appendChild(el("div", "empty", "—"));
+    col.appendChild(cards);
+    row.appendChild(col);
+  }
+  board.appendChild(row);
+}
+
+function showRunDetail(issue) {
+  runTitle.textContent = `${currentProject} #${issue}`;
+  clear(runAttempts);
+  runDetail.hidden = false;
+  refreshRuns(issue);
+}
+
+async function refreshRuns(issue) {
+  const { runs } = await api(`/api/projects/${encodeURIComponent(currentProject)}/runs/${issue}`);
+  const tbody = clear(runAttempts);
+  if (runs.length === 0) {
+    tbody.appendChild(el("tr", undefined)).appendChild(el("td", undefined, "no runs recorded"));
     return;
   }
-  localStorage.setItem(TOKEN_KEY, token);
-  showFleet(list);
+  for (const run of runs) {
+    const tr = el("tr");
+    tr.appendChild(el("td", undefined, `#${run.attempt}`));
+    tr.appendChild(el("td", `state-${stateClass(run.state)}`, run.state));
+    tr.appendChild(el("td", undefined, usd(run.spendUsd)));
+    tr.appendChild(el("td", "mono", run.failureClass ?? "—"));
+    tr.appendChild(el("td", "mono", run.prUrl ?? "—"));
+    tr.appendChild(el("td", "mono", new Date(run.startedAt).toLocaleString()));
+    tbody.appendChild(tr);
+  }
+}
+
+function stateClass(state) {
+  if (state === "merged" || state === "settled") return "green";
+  if (state === "failed" || state === "killed") return "red";
+  return "muted";
 }
 
+// --- board ---
+
+// --- status summary + holds on the project page ---
+
+async function refreshStatusSummary() {
+  const path = `/api/projects/${encodeURIComponent(currentProject)}/status`;
+  const { status, fleetLayers } = await api(path);
+  const out = clear(projectSummary);
+  const dispatch = status.dispatch;
+  const parts = [`dispatch ${fleetLayers.dispatch}`];
+  if (status.paused) parts.push("PAUSED");
+  if (dispatch !== undefined && dispatch.degraded) parts.push("DEGRADED");
+  out.appendChild(el("span", "meta", parts.join(" · ")));
+  if (dispatch !== undefined && dispatch.holds.length > 0) {
+    const holds = el("ul", "holds");
+    for (const hold of dispatch.holds) {
+      const sample = hold.issues.length > 0 ? ` (#${hold.issues.join(", #")})` : "";
+      holds.appendChild(el("li", undefined, `${hold.reason}  ${hold.count}${sample}`));
+    }
+    out.appendChild(holds);
+  }
+  const base = el("span", "meta base", baseHealthSummary(status.baseHealth));
+  out.appendChild(base);
+  out.appendChild(el("span", "meta", `${status.liveWorkers} live worker(s) · ${usd(status.spendTodayUsd)} today`));
+}
+
+// --- ledger ---
+
+async function refreshLedger() {
+  const path = `/api/projects/${encodeURIComponent(currentProject)}/ledger`;
+  const { verb, turnOverrides } = await api(path);
+  const out = clear(panelLedger);
+  out.appendChild(el("h3", undefined, `Verb ledger (${verb.length})`));
+  const table = el("table", "ledger");
+  const thead = el("thead");
+  const headRow = el("tr");
+  for (const h of ["At", "Verb", "Role", "Decision", "Detail"]) headRow.appendChild(el("th", undefined, h));
+  thead.appendChild(headRow);
+  const tbody = el("tbody");
+  for (const entry of verb) {
+    const tr = el("tr");
+    tr.appendChild(el("td", "mono", new Date(entry.at).toLocaleString()));
+    tr.appendChild(el("td", undefined, entry.verb));
+    tr.appendChild(el("td", undefined, entry.role));
+    tr.appendChild(el("td", entry.decision === "refused" ? "state-red" : "state-green", entry.decision));
+    tr.appendChild(el("td", undefined, entry.detail));
+    tbody.appendChild(tr);
+  }
+  table.append(thead, tbody);
+  out.appendChild(table);
+
+  if (turnOverrides.length > 0) {
+    out.appendChild(el("h3", undefined, `Turn overrides (${turnOverrides.length})`));
+    const ot = el("table", "ledger");
+    const othead = el("thead");
+    const ohr = el("tr");
+    for (const h of ["Issue", "Max turns", "Set at"]) othead.appendChild(el("th", undefined, h));
+    const otbody = el("tbody");
+    for (const o of turnOverrides) {
+      const tr = el("tr");
+      tr.appendChild(el("td", undefined, `#${o.issue}`));
+      tr.appendChild(el("td", undefined, String(o.maxTurns)));
+      tr.appendChild(el("td", "mono", new Date(o.setAt).toLocaleString()));
+      otbody.appendChild(tr);
+    }
+    ot.append(othead, otbody);
+    out.appendChild(ot);
+  }
+}
+
+// --- reports ---
+
+async function refreshReports() {
+  const path = `/api/projects/${encodeURIComponent(currentProject)}/reports`;
+  const { openReports, digestBacklog, heldNotices } = await api(path);
+  const out = clear(panelReports);
+  out.appendChild(el("h3", undefined, `Open reports (${openReports.length})`));
+  const ul = el("ul", "reports");
+  if (openReports.length === 0) ul.appendChild(el("li", "empty", "no open reports"));
+  for (const report of openReports) {
+    const li = el("li");
+    li.appendChild(el("span", "state-muted", `${report.kind} · ${new Date(report.createdAt).toLocaleString()}`));
+    li.appendChild(el("span", undefined, ` ${report.state}`));
+    ul.appendChild(li);
+  }
+  out.appendChild(ul);
+
+  out.appendChild(el("h3", undefined, "Digest backlog"));
+  const backlog = el("ul", "reports");
+  backlog.appendChild(el("li", undefined, `${digestBacklog.materialCount} material event(s) not yet in an accepted digest`));
+  if (digestBacklog.heldNoticeCount !== undefined) {
+    backlog.appendChild(el("li", undefined, `${digestBacklog.heldNoticeCount} held notice(s) awaiting digest`));
+  }
+  out.appendChild(backlog);
+
+  out.appendChild(el("h3", undefined, `Held notices (${heldNotices.length})`));
+  const held = el("ul", "reports");
+  if (heldNotices.length === 0) held.appendChild(el("li", "empty", "none held"));
+  for (const notice of heldNotices) {
+    held.appendChild(el("li", undefined, `[${notice.category}] ${notice.summary}`));
+  }
+  out.appendChild(held);
+}
+
+// ---------------------------------------------------------------------------
+// wiring
+// ---------------------------------------------------------------------------
+
+document.getElementById("back-to-fleet").addEventListener("click", (event) => {
+  event.preventDefault();
+  showFleetView();
+});
+
+document.getElementById("back-to-board").addEventListener("click", (event) => {
+  event.preventDefault();
+  runDetail.hidden = true;
+  refreshBoard().catch((err) => renderProjectError(err));
+});
+
+tabsNav.addEventListener("click", (event) => {
+  const button = event.target.closest("button");
+  if (button === null) return;
+  setTab(button.dataset.tab);
+  refreshProject(button.dataset.tab).catch((err) => renderProjectError(err));
+});
+
 tokenForm.addEventListener("submit", (event) => {
   event.preventDefault();
-  start(tokenInput.value.trim()).catch((err) => {
+  token = tokenInput.value.trim();
+  localStorage.setItem(TOKEN_KEY, token);
+  tokenPanel.hidden = true;
+  fleet.hidden = false;
+  refreshOverview().catch((err) => {
     tokenError.textContent = `Could not load the fleet: ${err.message}`;
     tokenError.hidden = false;
   });
+  startPolling();
 });
 
 // A stored token skips the prompt, but a 401 still clears it and asks again —
 // the server, not the storage, is the source of truth.
-const stored = localStorage.getItem(TOKEN_KEY);
-if (stored === null) {
+if (token === null || token === "") {
   showTokenPrompt();
 } else {
-  start(stored).catch((err) => {
+  tokenPanel.hidden = true;
+  refreshOverview().catch((err) => {
     tokenError.textContent = `Could not load the fleet: ${err.message}`;
     showTokenPrompt();
   });
+  startPolling();
 }

package/src/dashboard/index.html

@@ -25,9 +25,36 @@
       <p id="token-error" class="error" hidden>That token was refused.</p>
     </form>
   </section>
+
   <section id="fleet" hidden>
     <ul id="projects" class="projects"></ul>
   </section>
+
+  <section id="project" hidden>
+    <p class="back"><a href="#" id="back-to-fleet">← fleet</a></p>
+    <h2 id="project-title"></h2>
+    <p id="project-daemon" class="state"></p>
+    <div id="project-summary" class="summary"></div>
+    <nav class="tabs" id="tabs">
+      <button data-tab="board" type="button">Board</button>
+      <button data-tab="ledger" type="button">Ledger</button>
+      <button data-tab="reports" type="button">Reports</button>
+    </nav>
+    <section id="panel-board"></section>
+    <section id="panel-ledger" hidden></section>
+    <section id="panel-reports" hidden></section>
+
+    <div id="run-detail" hidden>
+      <p class="back"><a href="#" id="back-to-board">← board</a></p>
+      <h3 id="run-title"></h3>
+      <table class="runs">
+        <thead>
+          <tr><th>Attempt</th><th>State</th><th>Spend</th><th>Failure class</th><th>PR</th><th>Started</th></tr>
+        </thead>
+        <tbody id="run-attempts"></tbody>
+      </table>
+    </div>
+  </section>
 </main>
 <script src="/app.js"></script>
 </body>