oh-my-opencode-dashboard 0.0.3 → 0.0.4

package/src/App.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { computeWaitingDing } from "./ding-policy";
 import { playDing, unlockAudio } from "./sound";
+import { computeStackedSegments } from "./timeseries-stacked";
 
 const APP_VERSION =
   typeof __APP_VERSION__ === "string" && __APP_VERSION__.trim().length > 0 ? __APP_VERSION__ : "0.0.0";
@@ -12,6 +13,7 @@ type BackgroundTask = {
   description: string;
   subline?: string;
   agent: string;
+  lastModel: string;
   status: "queued" | "running" | "done" | "error" | "cancelled" | string;
   toolCalls: number;
   lastTool: string;
@@ -47,6 +49,7 @@ type DashboardPayload = {
   mainSession: {
     agent: string;
     currentTool: string;
+    currentModel: string;
     lastUpdatedLabel: string;
     session: string;
     statusPill: string;
@@ -176,6 +179,7 @@ const FALLBACK_DATA: DashboardPayload = {
   mainSession: {
     agent: "sisyphus",
     currentTool: "dashboard_start",
+    currentModel: "anthropic/claude-opus-4-5",
     lastUpdatedLabel: "just now",
     session: "qa-session",
     statusPill: "busy",
@@ -193,6 +197,7 @@ const FALLBACK_DATA: DashboardPayload = {
       description: "Explore: find HTTP/SSE patterns",
       subline: "task-1",
       agent: "explore",
+      lastModel: "opencode/gpt-5-nano",
       status: "running",
       toolCalls: 3,
       lastTool: "grep",
@@ -271,6 +276,20 @@ async function safeFetchJson(url: string): Promise<unknown> {
   }
 }
 
+function toNonEmptyString(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+export function formatBackgroundTaskTimelineCell(status: unknown, timeline: unknown): string {
+  const s = typeof status === "string" ? status.trim().toLowerCase() : "";
+  if (s === "unknown") return "";
+  if (s === "queued") return "-";
+
+  return toNonEmptyString(timeline) ?? "-";
+}
+
 function toDashboardPayload(json: unknown): DashboardPayload {
   if (!json || typeof json !== "object") {
     return { ...FALLBACK_DATA, raw: json };
@@ -282,6 +301,22 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   const plan = (anyJson.planProgress ?? anyJson.plan_progress ?? {}) as Record<string, unknown>;
   const tasks = (anyJson.backgroundTasks ?? anyJson.background_tasks ?? []) as unknown;
 
+  function parsePlanSteps(stepsInput: unknown): Array<{ checked: boolean; text: string }> {
+    if (!Array.isArray(stepsInput)) return [];
+    
+    return stepsInput
+      .map((step): { checked: boolean; text: string } | null => {
+        if (!step || typeof step !== "object") return null;
+        
+        const stepObj = step as Record<string, unknown>;
+        const checked = typeof stepObj.checked === "boolean" ? stepObj.checked : false;
+        const text = typeof stepObj.text === "string" ? stepObj.text : "";
+        
+        return text.trim().length > 0 ? { checked, text } : null;
+      })
+      .filter((step): step is { checked: boolean; text: string } => step !== null);
+  }
+
   const backgroundTasks: BackgroundTask[] = Array.isArray(tasks)
     ? tasks.map((t, idx) => {
         const rec = (t ?? {}) as Record<string, unknown>;
@@ -295,6 +330,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
                 ? rec.taskId
                 : undefined,
           agent: String(rec.agent ?? rec.worker ?? "unknown"),
+          lastModel: toNonEmptyString(rec.lastModel ?? rec.last_model) ?? "-",
           status: String(rec.status ?? "queued"),
           toolCalls: Number(rec.toolCalls ?? rec.tool_calls ?? 0) || 0,
           lastTool: String(rec.lastTool ?? rec.last_tool ?? "-") || "-",
@@ -305,6 +341,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
 
   const completed = Number(plan.completed ?? plan.done ?? 0) || 0;
   const total = Number(plan.total ?? plan.count ?? 0) || 0;
+  const steps = parsePlanSteps(plan.steps);
 
   const timeSeries = normalizeTimeSeries(anyJson.timeSeries, Date.now());
 
@@ -312,6 +349,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
     mainSession: {
       agent: String(main.agent ?? FALLBACK_DATA.mainSession.agent),
       currentTool: String(main.currentTool ?? main.current_tool ?? FALLBACK_DATA.mainSession.currentTool),
+      currentModel: toNonEmptyString(main.currentModel ?? main.current_model) ?? "-",
       lastUpdatedLabel: String(main.lastUpdatedLabel ?? main.last_updated ?? "just now"),
       session: String(main.session ?? main.session_id ?? FALLBACK_DATA.mainSession.session),
       statusPill: String(main.statusPill ?? main.status ?? FALLBACK_DATA.mainSession.statusPill),
@@ -322,6 +360,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
       total,
       path: String(plan.path ?? FALLBACK_DATA.planProgress.path),
       statusPill: String(plan.statusPill ?? plan.status ?? FALLBACK_DATA.planProgress.statusPill),
+      steps,
     },
     backgroundTasks,
     timeSeries,
@@ -329,6 +368,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   };
 }
 
+export { toDashboardPayload };
 export default function App() {
   const [connected, setConnected] = React.useState(false);
   const [data, setData] = React.useState<DashboardPayload>(FALLBACK_DATA);
@@ -394,15 +434,15 @@ export default function App() {
     }
   }
 
-  function isWaitingForUser(payload: DashboardPayload): boolean {
+  const isWaitingForUser = React.useCallback((payload: DashboardPayload): boolean => {
     const status = payload.mainSession.statusPill.toLowerCase();
     const hasSession = payload.mainSession.session !== "(no session)" && payload.mainSession.session !== "";
     const idle = status.includes("idle");
     const noTool = payload.mainSession.currentTool === "-" || payload.mainSession.currentTool === "";
     return hasSession && idle && noTool;
-  }
+  }, []);
 
-  function maybePlayDings(prev: DashboardPayload | null, next: DashboardPayload) {
+  const maybePlayDings = React.useCallback((prev: DashboardPayload | null, next: DashboardPayload) => {
     if (!soundEnabledRef.current) return;
     if (!hadSuccessRef.current) return;
 
@@ -453,7 +493,7 @@ export default function App() {
     lastLeftWaitingAtRef.current = waitingDecision.next.lastLeftWaitingAtMs;
     prevPlanCompletedRef.current = completed;
     prevPlanTotalRef.current = total;
-  }
+  }, [isWaitingForUser]);
 
   const planPercent = React.useMemo(() => {
     if (!data.planProgress.total) return 0;
@@ -469,23 +509,23 @@ export default function App() {
 
     async function tick() {
       let nextConnected = false;
-      try {
-        const json = await safeFetchJson("/api/dashboard");
-        if (!alive) return;
-        nextConnected = true;
-        hadSuccessRef.current = true;
-        setConnected(true);
-        setErrorHint(null);
-         const next = toDashboardPayload(json);
-         setData((prev) => {
-           maybePlayDings(prev, next);
-           return next;
-         });
-         setLastUpdate(Date.now());
-      } catch (err) {
-        if (!alive) return;
-        nextConnected = false;
-        setConnected(false);
+        try {
+          const json = await safeFetchJson("/api/dashboard");
+          if (!alive) return;
+          nextConnected = true;
+          hadSuccessRef.current = true;
+          setConnected(true);
+          setErrorHint(null);
+          const next = toDashboardPayload(json);
+          setData((prev) => {
+            maybePlayDings(prev, next);
+            return next;
+          });
+          setLastUpdate(Date.now());
+        } catch (err) {
+          if (!alive) return;
+          nextConnected = false;
+          setConnected(false);
         const msg = err instanceof Error ? err.message : "disconnected";
         setErrorHint(msg);
         setData((prev) => {
@@ -512,7 +552,7 @@ export default function App() {
       alive = false;
       if (timerRef.current) window.clearTimeout(timerRef.current);
     };
-  }, []);
+  }, [maybePlayDings]);
 
   async function onCopyRawJson() {
     setCopyState("idle");
@@ -544,6 +584,7 @@ export default function App() {
   const bucketMs = Math.max(1, data.timeSeries.bucketMs);
   const viewBox = `0 0 ${buckets} 28`;
   const minuteStep = Math.max(1, Math.round(60_000 / bucketMs));
+  const bucketStartMs = data.timeSeries.anchorMs - (buckets - 1) * bucketMs;
 
   const overallValues = timeSeriesById.get("overall-main")?.values ?? [];
 
@@ -611,24 +652,11 @@ export default function App() {
               {(
                 [
                   {
-                    label: "Sisyphus",
-                    tone: "teal" as const,
-                    overlayId: "agent:sisyphus" as const,
-                    baseline: false,
-                  },
-                  {
-                    label: "Prometheus",
-                    tone: "red" as const,
-                    overlayId: "agent:prometheus" as const,
-                    baseline: false,
-                  },
-                  {
-                    label: "Atlas",
-                    tone: "green" as const,
-                    overlayId: "agent:atlas" as const,
-                    baseline: false,
+                    kind: "main-agents" as const,
+                    label: "Main agents" as const,
                   },
                   {
+                    kind: "single" as const,
                     label: "background tasks (total)",
                     tone: "muted" as const,
                     overlayId: "background-total" as const,
@@ -644,6 +672,82 @@ export default function App() {
                 const barW = 0.85;
                 const barInset = (1 - barW) / 2;
 
+                if (row.kind === "main-agents") {
+                  const sisyphusValues = timeSeriesById.get("agent:sisyphus")?.values ?? [];
+                  const prometheusValues = timeSeriesById.get("agent:prometheus")?.values ?? [];
+                  const atlasValues = timeSeriesById.get("agent:atlas")?.values ?? [];
+
+                  let sumMax = 0;
+                  for (let i = 0; i < buckets; i++) {
+                    const rawSis = sisyphusValues[i];
+                    const rawPro = prometheusValues[i];
+                    const rawAtl = atlasValues[i];
+                    const sis = typeof rawSis === "number" && Number.isFinite(rawSis) ? Math.max(0, rawSis) : 0;
+                    const pro = typeof rawPro === "number" && Number.isFinite(rawPro) ? Math.max(0, rawPro) : 0;
+                    const atl = typeof rawAtl === "number" && Number.isFinite(rawAtl) ? Math.max(0, rawAtl) : 0;
+                    const s = sis + pro + atl;
+                    if (s > sumMax) sumMax = s;
+                  }
+
+                  const scaleMax = Math.max(1, sumMax || 1);
+
+                  return (
+                    <div key="main-agents" className="timeSeriesRow">
+                      <div className="timeSeriesRowLabel">{row.label}</div>
+                      <div className="timeSeriesSvgWrap">
+                        <svg className="timeSeriesSvg" viewBox={viewBox} preserveAspectRatio="none" aria-hidden="true">
+                          {Array.from({ length: Math.floor(buckets / minuteStep) + 1 }, (_, idx) => {
+                            const x = idx * minuteStep;
+                            if (x < 0 || x > buckets) return null;
+                            return (
+                              <line
+                                key={`g-${bucketStartMs + x * bucketMs}`}
+                                className="timeSeriesGridline"
+                                x1={x}
+                                x2={x}
+                                y1={0}
+                                y2={H}
+                              />
+                            );
+                          })}
+
+                          {Array.from({ length: buckets }, (_, i) => {
+                            const bucketMsAt = bucketStartMs + i * bucketMs;
+                            const barX = i + barInset;
+                            const rawSis = sisyphusValues[i];
+                            const rawPro = prometheusValues[i];
+                            const rawAtl = atlasValues[i];
+                            const sis = typeof rawSis === "number" && Number.isFinite(rawSis) ? Math.max(0, rawSis) : 0;
+                            const pro = typeof rawPro === "number" && Number.isFinite(rawPro) ? Math.max(0, rawPro) : 0;
+                            const atl = typeof rawAtl === "number" && Number.isFinite(rawAtl) ? Math.max(0, rawAtl) : 0;
+                            const segments = computeStackedSegments(
+                              {
+                                sisyphus: sis,
+                                prometheus: pro,
+                                atlas: atl,
+                              },
+                              scaleMax,
+                              chartHeight
+                            );
+
+                            if (segments.length === 0) return null;
+                            return segments.map((seg) => (
+                              <rect
+                                key={`main-agents-${bucketMsAt}-${seg.tone}`}
+                                className={`timeSeriesBar timeSeriesBar--${seg.tone}`}
+                                x={barX}
+                                y={padTop + seg.y}
+                                width={barW}
+                                height={seg.height}
+                              />
+                            ));
+                          })}
+                        </svg>
+                      </div>
+                    </div>
+                  );
+                }
+
                 const overlayValues = timeSeriesById.get(row.overlayId)?.values ?? [];
                 const baselineMax = row.baseline ? maxCount(overallValues) : 0;
                 const overlayMax = maxCount(overlayValues);
@@ -659,7 +763,7 @@ export default function App() {
                           if (x < 0 || x > buckets) return null;
                           return (
                             <line
-                              key={`g-${idx}`}
+                              key={`g-${bucketStartMs + x * bucketMs}`}
                               className="timeSeriesGridline"
                               x1={x}
                               x2={x}
@@ -674,9 +778,10 @@ export default function App() {
                               const h = barHeight(v ?? 0, scaleMax, chartHeight);
                               if (!h) return null;
                               const barX = i + barInset;
+                              const bucketMsAt = bucketStartMs + i * bucketMs;
                               return (
                                 <rect
-                                  key={`b-${i}`}
+                                  key={`b-${bucketMsAt}`}
                                   className="timeSeriesBarBaseline"
                                   x={barX}
                                   y={baselineY - h}
@@ -691,9 +796,10 @@ export default function App() {
                           const h = barHeight(v ?? 0, scaleMax, chartHeight);
                           if (!h) return null;
                           const barX = i + barInset;
+                          const bucketMsAt = bucketStartMs + i * bucketMs;
                           return (
                             <rect
-                              key={`o-${i}`}
+                              key={`${row.overlayId}-${bucketMsAt}`}
                               className="timeSeriesBar"
                               x={barX}
                               y={baselineY - h}
@@ -737,6 +843,10 @@ export default function App() {
                   <div className="kvKey">CURRENT TOOL</div>
                   <div className="kvVal mono">{data.mainSession.currentTool}</div>
                 </div>
+                <div className="kvRow">
+                  <div className="kvKey">CURRENT MODEL</div>
+                  <div className="kvVal mono">{data.mainSession.currentModel}</div>
+                </div>
                 <div className="kvRow">
                   <div className="kvKey">LAST UPDATED</div>
                   <div className="kvVal">{data.mainSession.lastUpdatedLabel}</div>
@@ -813,6 +923,7 @@ export default function App() {
                   <tr>
                     <th>DESCRIPTION</th>
                     <th>AGENT</th>
+                    <th>LAST MODEL</th>
                     <th>STATUS</th>
                     <th>TOOL CALLS</th>
                     <th>LAST TOOL</th>
@@ -827,12 +938,13 @@ export default function App() {
                         {t.subline ? <div className="taskSub mono">{t.subline}</div> : null}
                       </td>
                       <td className="mono">{t.agent}</td>
+                      <td className="mono">{t.lastModel}</td>
                       <td>
                         <span className={`pill pill-${statusTone(t.status)}`}>{t.status}</span>
                       </td>
                       <td className="mono">{t.toolCalls}</td>
                       <td className="mono">{t.lastTool}</td>
-                      <td className="mono muted">{t.status.toLowerCase() === "queued" ? "-" : t.timeline || "-"}</td>
+                      <td className="mono muted">{formatBackgroundTaskTimelineCell(t.status, t.timeline)}</td>
                     </tr>
                   ))}
                 </tbody>

package/src/app-payload.test.ts

@@ -0,0 +1,158 @@
+import { describe, it, expect } from "vitest"
+import { toDashboardPayload } from "./App"
+
+describe('toDashboardPayload', () => {
+  it('should preserve planProgress.steps from server JSON', () => {
+    // #given: server JSON with planProgress.steps
+    const serverJson = {
+      mainSession: {
+        agent: "sisyphus",
+        currentTool: "dashboard_start",
+        currentModel: "anthropic/claude-opus-4-5",
+        lastUpdatedLabel: "just now",
+        session: "test-session",
+        statusPill: "busy",
+      },
+      planProgress: {
+        name: "test-plan",
+        completed: 2,
+        total: 4,
+        path: "/tmp/test-plan.md",
+        statusPill: "in progress",
+        steps: [
+          { checked: true, text: "First completed task" },
+          { checked: true, text: "Second completed task" },
+          { checked: false, text: "Third pending task" },
+          { checked: false, text: "Fourth pending task" },
+        ],
+      },
+      backgroundTasks: [],
+      timeSeries: {
+        windowMs: 300000,
+        buckets: 150,
+        bucketMs: 2000,
+        anchorMs: 1640995200000,
+        serverNowMs: 1640995500000,
+        series: [
+          {
+            id: "overall-main",
+            label: "Overall",
+            tone: "muted",
+            values: new Array(150).fill(0),
+          },
+        ],
+      },
+    }
+
+    // #when: converting to dashboard payload
+    const payload = toDashboardPayload(serverJson)
+
+    // #then: planProgress.steps should be preserved with correct structure
+    expect(payload.planProgress.steps).toBeDefined()
+    expect(payload.planProgress.steps).toEqual([
+      { checked: true, text: "First completed task" },
+      { checked: true, text: "Second completed task" },
+      { checked: false, text: "Third pending task" },
+      { checked: false, text: "Fourth pending task" },
+    ])
+  })
+
+  it('should handle missing or malformed planProgress.steps defensively', () => {
+    // #given: server JSON with malformed planProgress.steps
+    const serverJson = {
+      mainSession: {
+        agent: "sisyphus",
+        currentTool: "dashboard_start",
+        currentModel: "anthropic/claude-opus-4-5",
+        lastUpdatedLabel: "just now",
+        session: "test-session",
+        statusPill: "busy",
+      },
+      planProgress: {
+        name: "test-plan",
+        completed: 0,
+        total: 0,
+        path: "/tmp/test-plan.md",
+        statusPill: "not started",
+        steps: [
+          { checked: true, text: "Valid step" },
+          { checked: false }, // missing text
+          { text: "Missing checked" }, // missing checked
+          "invalid string", // wrong type
+          null, // null value
+          { checked: "not-boolean", text: "Invalid checked type" }, // wrong checked type
+        ],
+      },
+      backgroundTasks: [],
+      timeSeries: {
+        windowMs: 300000,
+        buckets: 150,
+        bucketMs: 2000,
+        anchorMs: 1640995200000,
+        serverNowMs: 1640995500000,
+        series: [
+          {
+            id: "overall-main",
+            label: "Overall",
+            tone: "muted",
+            values: new Array(150).fill(0),
+          },
+        ],
+      },
+    }
+
+    // #when: converting to dashboard payload
+    const payload = toDashboardPayload(serverJson)
+
+    // #then: should only include valid steps, ignore malformed ones
+    expect(payload.planProgress.steps).toEqual([
+      { checked: true, text: "Valid step" },
+      { checked: false, text: "Missing checked" }, // default checked to false
+      { checked: false, text: "Invalid checked type" }, // default checked to false for invalid boolean
+    ])
+  })
+
+  it('should handle non-array planProgress.steps', () => {
+    // #given: server JSON with non-array planProgress.steps
+    const serverJson = {
+      mainSession: {
+        agent: "sisyphus",
+        currentTool: "dashboard_start",
+        currentModel: "anthropic/claude-opus-4-5",
+        lastUpdatedLabel: "just now",
+        session: "test-session",
+        statusPill: "busy",
+      },
+      planProgress: {
+        name: "test-plan",
+        completed: 0,
+        total: 0,
+        path: "/tmp/test-plan.md",
+        statusPill: "not started",
+        steps: "not an array",
+      },
+      backgroundTasks: [],
+      timeSeries: {
+        windowMs: 300000,
+        buckets: 150,
+        bucketMs: 2000,
+        anchorMs: 1640995200000,
+        serverNowMs: 1640995500000,
+        series: [
+          {
+            id: "overall-main",
+            label: "Overall",
+            tone: "muted",
+            values: new Array(150).fill(0),
+          },
+        ],
+      },
+    }
+
+    // #when: converting to dashboard payload
+    const payload = toDashboardPayload(serverJson)
+
+    // #then: should handle non-array steps gracefully
+    expect(payload.planProgress.steps).toEqual([])
+  })
+})

package/src/background-task-timeline.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest"
+import { formatBackgroundTaskTimelineCell } from "./App"
+
+describe('formatBackgroundTaskTimelineCell', () => {
+  it('should render "-" for queued regardless of timeline', () => {
+    // #given: queued status
+    const status = "queued"
+
+    // #when/#then
+    expect(formatBackgroundTaskTimelineCell(status, "")).toBe("-")
+    expect(formatBackgroundTaskTimelineCell(status, "2026-01-01T00:00:00Z: 2m")).toBe("-")
+  })
+
+  it('should render blank for unknown regardless of timeline', () => {
+    // #given: unknown status
+    const status = "unknown"
+
+    // #when/#then
+    expect(formatBackgroundTaskTimelineCell(status, "")).toBe("")
+    expect(formatBackgroundTaskTimelineCell(status, "2026-01-01T00:00:00Z: 2m")).toBe("")
+  })
+
+  it('should render timeline when present, otherwise "-" for other statuses', () => {
+    // #given: a non-queued, non-unknown status
+    const status = "running"
+
+    // #when/#then
+    expect(formatBackgroundTaskTimelineCell(status, "2026-01-01T00:00:00Z: 2m")).toBe("2026-01-01T00:00:00Z: 2m")
+    expect(formatBackgroundTaskTimelineCell(status, "")).toBe("-")
+    expect(formatBackgroundTaskTimelineCell(status, "   ")).toBe("-")
+  })
+})