omp-conductor 0.15.11 → 0.15.13

package/src/dashboard/server.ts

@@ -28,8 +28,12 @@ import { chmodSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync }
 import { join } from "node:path";
 import { loadConfig, stateDir } from "../config.ts";
 import { healthCheck, livingDaemon, type DaemonRecord } from "../lifecycle.ts";
-import { classifyDaemonProjectHealth } from "../fleet.ts";
+import { classifyDaemonProjectHealth, fleetLayers, type FleetLayers } from "../fleet.ts";
+import { statusSnapshot, type StatusSnapshot } from "../daemon.ts";
+import { boardJson, boardSnapshotOnce } from "../board.ts";
+import { dbPath, openStore } from "../store.ts";
 import type { ProjectConfig } from "../types.ts";
+import type { BaseHealth, DigestBacklog, HeldNotice, ReportRecord, RunRecord, TurnOverride, VerbLedgerEntry } from "../types.ts";
 
 /** The dashboard's default bind address — loopback, like the daemon port. */
 export const DASHBOARD_HOST = "127.0.0.1";
@@ -162,11 +166,154 @@ export async function dashboardProjects(): Promise<DashboardProjectView[]> {
   return Promise.all(cfg.projects.map((project) => probeProject(project, record)));
 }
 
+/**
+ * One project on the fleet-overview row (epic #292, slice 2/5). Every field is
+ * the existing producer's own number — `statusSnapshot` for workers, spend and
+ * base health, `fleetLayers` for the dispatch verdict — so a row can never
+ * disagree with `omp-conductor status` read at the same moment.
+ */
+export interface FleetOverviewRow {
+  name: string;
+  repo: string;
+  /** The same shared daemon-health verdict `/api/projects` reports (#379). */
+  daemon: DashboardProjectView["daemon"];
+  /** The dispatch layer: `stopped` | `paused` | `running`. */
+  dispatch: FleetLayers["dispatch"];
+  liveWorkers: number;
+  spendTodayUsd: number;
+  baseHealth: BaseHealth[];
+  /**
+   * True when the daemon this project is pinned to is unreachable or serves
+   * another project. The UI renders DEGRADED instead of a fabricated healthy
+   * empty row — never zeros that read as a working fleet.
+   */
+  degraded: boolean;
+}
+
+/**
+ * Every configured project as a fleet-overview row. Reuses `dashboardProjects`
+ * for the membership verdict (one pidfile + one `/healthz` read serves the
+ * whole call), then `statusSnapshot` and `fleetLayers` per project for the
+ * numbers the `status` CLI renders from the very same producers.
+ */
+export async function fleetOverview(): Promise<FleetOverviewRow[]> {
+  const views = await dashboardProjects();
+  return views.map((view) => {
+    const snap = statusSnapshot(view.name);
+    const layers = fleetLayers(view.name);
+    return {
+      name: view.name,
+      repo: view.repo,
+      daemon: view.daemon,
+      dispatch: layers.dispatch,
+      liveWorkers: snap.liveWorkers,
+      spendTodayUsd: snap.spendTodayUsd,
+      baseHealth: snap.baseHealth,
+      degraded: view.daemon.state === "unreachable" || view.daemon.state === "other-project",
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// The read-only monitoring surface (epic #292, slice 2/5). Each handler hands
+// the existing CLI producer its arguments and returns what it already computes
+// verbatim — nothing here re-derives a lane, a spend figure or a hold.
+// ---------------------------------------------------------------------------
+
+/** `/api/projects/:name/board` — the exact lanes `omp-conductor board --json`
+ *  prints for the same project at the same moment, parsed so the UI consumes
+ *  them as an object. */
+async function boardProducer(name: string): Promise<unknown> {
+  const snapshot = await boardSnapshotOnce(name);
+  return JSON.parse(boardJson(snapshot)) as unknown;
+}
+
+/** `/api/projects/:name/status` — the `StatusSnapshot` plus the `fleetLayers`
+ *  verdict, structured (not the rendered text). */
+async function statusProducer(name: string): Promise<{ status: StatusSnapshot; fleetLayers: FleetLayers }> {
+  return { status: statusSnapshot(name), fleetLayers: fleetLayers(name) };
+}
+
+/** `/api/projects/:name/ledger` — the verb ledger + turn-override ledger, with
+ *  the CLI's own defaults (limit 50) so the two cannot disagree. */
+async function ledgerProducer(
+  name: string,
+  opts: { issue?: number; limit: number },
+): Promise<{ verb: VerbLedgerEntry[]; turnOverrides: TurnOverride[] }> {
+  const store = openStore(dbPath());
+  try {
+    return {
+      verb: store.verbLedger(name, opts),
+      turnOverrides: store.turnOverrideLedger(name, opts),
+    };
+  } finally {
+    store.close();
+  }
+}
+
+/** `/api/projects/:name/reports` — the store readers `status` already uses:
+ *  open reports, the digest backlog, and the held notices awaiting a digest. */
+async function reportsProducer(
+  name: string,
+): Promise<{ openReports: ReportRecord[]; digestBacklog: DigestBacklog; heldNotices: HeldNotice[] }> {
+  const store = openStore(dbPath());
+  try {
+    return {
+      openReports: store.openReports(name),
+      digestBacklog: store.digestBacklog(name),
+      heldNotices: store.undigestedNotices(name),
+    };
+  } finally {
+    store.close();
+  }
+}
+
+/** `/api/projects/:name/runs/:issue` — every run row for the issue: attempts,
+ *  states, spend, failure classes, PR URLs. */
+async function runsProducer(name: string, issue: number): Promise<{ runs: RunRecord[] }> {
+  const store = openStore(dbPath());
+  try {
+    return { runs: store.runsForIssue(name, issue) };
+  } finally {
+    store.close();
+  }
+}
+
+/**
+ * The deps a live dashboard is wired with. Every endpoint defaults to the real
+ * producer above; a test overrides only the slice it exercises.
+ */
 export interface DashboardHttpDeps {
   /** The bearer token every `/api/*` request must carry. */
   token: string;
   /** The `/api/projects` payload. */
   projects(): Promise<DashboardProjectView[]>;
+  /** The `/api/overview` fleet rows. */
+  overview(): Promise<FleetOverviewRow[]>;
+  board(name: string): Promise<unknown>;
+  status(name: string): Promise<{ status: StatusSnapshot; fleetLayers: FleetLayers }>;
+  ledger(
+    name: string,
+    opts: { issue?: number; limit: number },
+  ): Promise<{ verb: VerbLedgerEntry[]; turnOverrides: TurnOverride[] }>;
+  reports(
+    name: string,
+  ): Promise<{ openReports: ReportRecord[]; digestBacklog: DigestBacklog; heldNotices: HeldNotice[] }>;
+  runs(name: string, issue: number): Promise<{ runs: RunRecord[] }>;
+}
+
+/** The deps bound to the real producers — what `startDashboard` serves with. */
+export function defaultDashboardDeps(token: string): DashboardHttpDeps {
+  return {
+    token,
+    projects: dashboardProjects,
+    overview: fleetOverview,
+    board: boardProducer,
+    status: statusProducer,
+    ledger: ledgerProducer,
+    reports: reportsProducer,
+    runs: runsProducer,
+  };
 }
 
 const STATIC_FILES: Record<string, string> = {
@@ -190,22 +337,89 @@ function bearerToken(req: Request): string | undefined {
   return header.startsWith(prefix) ? header.slice(prefix.length).trim() : undefined;
 }
 
+/**
+ * The ledger's query params. `limit` defaults to 50 — the CLI's own default —
+ * so the endpoint and `omp-conductor ledger` cannot disagree. An explicit
+ * non-positive or non-integral limit or issue is a client error (400), never a
+ * silent fallback that hides a typo'd URL.
+ */
+function parseLedgerParams(url: URL): { issue?: number; limit: number } | null {
+  const issueParam = url.searchParams.get("issue");
+  const limitParam = url.searchParams.get("limit");
+  // `Number`, not `parseInt`: `1.5` and `-1` must be rejected, never truncated
+  // down to a valid-seeming value.
+  const issueNumber = issueParam === null ? undefined : Number(issueParam);
+  const issue = issueNumber !== undefined && Number.isInteger(issueNumber) ? issueNumber : undefined;
+  const limitParamValue = limitParam === null ? 50 : Number(limitParam);
+  const limit = Number.isInteger(limitParamValue) ? limitParamValue : Number.NaN;
+  if (issueParam !== null && (issue === undefined || issue < 1)) return null;
+  if (!Number.isSafeInteger(limit) || limit < 1) return null;
+  return { ...(issue === undefined ? {} : { issue }), limit };
+}
+
 /**
  * The dashboard's whole HTTP surface, separated from the socket exactly like
  * `daemonHttpResponse` so a test can drive it without binding a port. The UI
  * ships on disk and is served without auth; `/api/*` is bearer-authenticated.
  */
 export async function dashboardResponse(req: Request, d: DashboardHttpDeps): Promise<Response> {
-  const path = new URL(req.url).pathname;
+  const url = new URL(req.url);
+  const path = url.pathname;
   if (path.startsWith("/api/")) {
     const presented = bearerToken(req);
     if (presented === undefined || !verifyDashboardToken(presented, d.token)) {
       // Bare 401: no body, no scheme hint — nothing about the token leaks.
       return new Response("", { status: 401 });
     }
-    if (req.method === "GET" && path === "/api/projects") {
-      return Response.json(await d.projects());
+    // Read-only surface: every /api route is a GET. Everything else stays
+    // 404 (after the auth check, so the surface cannot be probed).
+    if (req.method !== "GET") return new Response("", { status: 404 });
+
+    if (path === "/api/projects") return Response.json(await d.projects());
+    if (path === "/api/overview") return Response.json(await d.overview());
+
+    // `/api/projects/:name/{board,status,ledger,reports}` and
+    // `/api/projects/:name/runs/:issue`. Project names are matched against the
+    // configured set so an unknown name is a 404, never the producer's throw.
+    const name = (m: RegExpExecArray): string | undefined => {
+      try {
+        return decodeURIComponent(m[1]!);
+      } catch {
+        return undefined;
+      }
+    };
+    const known = (project: string | undefined): project is string =>
+      project !== undefined && loadConfig().projects.some((p) => p.name === project);
+
+    const proj = /^\/api\/projects\/([^/]+)\/(board|status|ledger|reports)$/.exec(path);
+    if (proj !== null) {
+      const project = name(proj);
+      if (!known(project)) return new Response("", { status: 404 });
+      switch (proj[2]) {
+        case "board":
+          return Response.json(await d.board(project!));
+        case "status":
+          return Response.json(await d.status(project!));
+        case "ledger": {
+          const opts = parseLedgerParams(url);
+          if (opts === null) return new Response("", { status: 400 });
+          return Response.json(await d.ledger(project!, opts));
+        }
+        case "reports":
+          return Response.json(await d.reports(project!));
+      }
     }
+
+    const runs = /^\/api\/projects\/([^/]+)\/runs\/(\d+)$/.exec(path);
+    if (runs !== null) {
+      const project = name(runs);
+      const issue = Number.parseInt(runs[2]!, 10);
+      if (!known(project) || !Number.isSafeInteger(issue)) {
+        return new Response("", { status: 404 });
+      }
+      return Response.json(await d.runs(project!, issue));
+    }
+
     return new Response("", { status: 404 });
   }
   // Everything outside /api is static UI, unauthenticated by contract.
@@ -243,7 +457,7 @@ export async function startDashboard(opts: DashboardStartOpts = {}): Promise<voi
   const server = Bun.serve({
     hostname: host,
     port: opts.port ?? DASHBOARD_PORT,
-    fetch: (req) => dashboardResponse(req, { token, projects: dashboardProjects }),
+    fetch: (req) => dashboardResponse(req, defaultDashboardDeps(token)),
   });
   // An IPv6 literal needs brackets to be a clickable URL.
   const displayHost = host.includes(":") ? `[${host}]` : host;

package/src/dashboard/style.css

@@ -35,7 +35,7 @@ h1 {
 
 main {
   padding: 0 1.5rem 2rem;
-  max-width: 56rem;
+  max-width: 76rem;
 }
 
 code {
@@ -167,6 +167,174 @@ button {
   font-weight: 600;
 }
 
+/* Monitoring surface (#294) */
+.is-clickable {
+  cursor: pointer;
+}
+
+.is-clickable:hover {
+  border-color: var(--muted);
+}
+
+.back {
+  font-size: 0.9rem;
+}
+
+a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.state-degraded {
+  color: var(--down);
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.state-muted,
+.state-red {
+  color: var(--down);
+}
+
+.state-green {
+  color: var(--up);
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.base {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0.25rem 0 1rem;
+}
+
+.holds {
+  margin: 0.25rem 0 0;
+  padding-left: 1.25rem;
+  color: var(--warn);
+  font-size: 0.85rem;
+}
+
+.tabs {
+  display: flex;
+  gap: 0.4rem;
+  margin: 1rem 0;
+  flex-wrap: wrap;
+}
+
+.tabs button {
+  background: transparent;
+  color: var(--ink);
+  border: 1px solid var(--line);
+}
+
+.tabs button.active {
+  background: var(--ink);
+  color: var(--bg);
+  border-color: var(--ink);
+}
+
+.lanes {
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  align-items: flex-start;
+}
+
+.lane {
+  flex: 0 0 13rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.6rem;
+}
+
+.lane-title {
+  font-weight: 700;
+  font-size: 0.8rem;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  margin-bottom: 0.5rem;
+}
+
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.1rem;
+  text-align: left;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  cursor: pointer;
+}
+
+.card:hover {
+  border-color: var(--muted);
+}
+
+.card-state {
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.empty {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+table.ledger,
+table.runs {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  margin-bottom: 1.25rem;
+}
+
+table.ledger th,
+table.ledger td,
+table.runs th,
+table.runs td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.mono {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.82rem;
+}
+
+ul.reports,
+#run-attempts .empty {
+  list-style: none;
+  margin: 0 0 1rem;
+  padding: 0;
+  color: var(--ink);
+}
+
+ul.reports li {
+  padding: 0.15rem 0;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: #17171a;