oh-my-opencode-dashboard 0.0.1 → 0.0.2

package/src/App.tsx

@@ -2,6 +2,11 @@ import * as React from "react";
 import { computeWaitingDing } from "./ding-policy";
 import { playDing, unlockAudio } from "./sound";
 
+const APP_VERSION =
+  typeof __APP_VERSION__ === "string" && __APP_VERSION__.trim().length > 0 ? __APP_VERSION__ : "0.0.0";
+
+const APP_TITLE = `Agent Dashboard (v${APP_VERSION})`;
+
 type BackgroundTask = {
   id: string;
   description: string;
@@ -13,6 +18,31 @@ type BackgroundTask = {
   timeline: string;
 };
 
+type TimeSeriesTone = "muted" | "teal" | "red" | "green";
+
+type TimeSeriesSeriesId =
+  | "overall-main"
+  | "agent:sisyphus"
+  | "agent:prometheus"
+  | "agent:atlas"
+  | "background-total";
+
+type TimeSeriesSeries = {
+  id: TimeSeriesSeriesId;
+  label: string;
+  tone: TimeSeriesTone;
+  values: number[];
+};
+
+type TimeSeries = {
+  windowMs: number;
+  buckets: number;
+  bucketMs: number;
+  anchorMs: number;
+  serverNowMs: number;
+  series: TimeSeriesSeries[];
+};
+
 type DashboardPayload = {
   mainSession: {
     agent: string;
@@ -27,11 +57,121 @@ type DashboardPayload = {
     total: number;
     path: string;
     statusPill: string;
+    steps?: Array<{ checked: boolean; text: string }>;
   };
   backgroundTasks: BackgroundTask[];
+  timeSeries: TimeSeries;
   raw: unknown;
 };
 
+const TIME_SERIES_DEFAULT_WINDOW_MS = 300_000;
+const TIME_SERIES_DEFAULT_BUCKET_MS = 2_000;
+const TIME_SERIES_DEFAULT_BUCKETS = Math.floor(TIME_SERIES_DEFAULT_WINDOW_MS / TIME_SERIES_DEFAULT_BUCKET_MS);
+
+const TIME_SERIES_SERIES_DEFS: Array<Pick<TimeSeriesSeries, "id" | "label" | "tone">> = [
+  { id: "overall-main", label: "Overall", tone: "muted" },
+  { id: "agent:sisyphus", label: "Sisyphus", tone: "teal" },
+  { id: "agent:prometheus", label: "Prometheus", tone: "red" },
+  { id: "agent:atlas", label: "Atlas", tone: "green" },
+  { id: "background-total", label: "Background tasks (total)", tone: "muted" },
+];
+
+function toFiniteNumber(value: unknown): number | null {
+  if (typeof value !== "number") return null;
+  if (!Number.isFinite(value)) return null;
+  return value;
+}
+
+function toNonNegativeCount(value: unknown): number {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.floor(n));
+}
+
+function makeZeroTimeSeries(opts: {
+  windowMs?: number;
+  buckets?: number;
+  bucketMs?: number;
+  anchorMs?: number;
+  serverNowMs?: number;
+}): TimeSeries {
+  const windowMs = Math.max(1, Math.floor(opts.windowMs ?? TIME_SERIES_DEFAULT_WINDOW_MS));
+  const bucketMs = Math.max(1, Math.floor(opts.bucketMs ?? TIME_SERIES_DEFAULT_BUCKET_MS));
+  const derivedBuckets = Math.floor(windowMs / bucketMs);
+  const buckets = Math.max(
+    1,
+    Math.floor(opts.buckets ?? (derivedBuckets > 0 ? derivedBuckets : TIME_SERIES_DEFAULT_BUCKETS))
+  );
+  const serverNowMs = Math.floor(opts.serverNowMs ?? 0);
+  const anchorMs = Math.floor(opts.anchorMs ?? 0);
+
+  const values = new Array<number>(buckets).fill(0);
+  return {
+    windowMs,
+    buckets,
+    bucketMs,
+    anchorMs,
+    serverNowMs,
+    series: TIME_SERIES_SERIES_DEFS.map((def) => ({ ...def, values: values.slice() })),
+  };
+}
+
+function normalizeTimeSeries(input: unknown, nowMsFallback: number): TimeSeries {
+  if (!input || typeof input !== "object") {
+    const bucketMs = TIME_SERIES_DEFAULT_BUCKET_MS;
+    const serverNowMs = nowMsFallback;
+    const anchorMs = Math.floor(serverNowMs / bucketMs) * bucketMs;
+    return makeZeroTimeSeries({
+      windowMs: TIME_SERIES_DEFAULT_WINDOW_MS,
+      bucketMs,
+      buckets: TIME_SERIES_DEFAULT_BUCKETS,
+      anchorMs,
+      serverNowMs,
+    });
+  }
+
+  const rec = input as Record<string, unknown>;
+
+  const windowMsRaw = toFiniteNumber(rec.windowMs ?? rec.window_ms);
+  const bucketsRaw = toFiniteNumber(rec.buckets);
+  const bucketMsRaw = toFiniteNumber(rec.bucketMs ?? rec.bucket_ms);
+  const bucketMs = Math.max(1, Math.floor(bucketMsRaw ?? TIME_SERIES_DEFAULT_BUCKET_MS));
+
+  const bucketsFromWindow = windowMsRaw && bucketMs ? Math.floor(windowMsRaw / bucketMs) : null;
+  const buckets = Math.max(1, Math.floor(bucketsRaw ?? bucketsFromWindow ?? TIME_SERIES_DEFAULT_BUCKETS));
+
+  const windowMs = Math.max(1, Math.floor(windowMsRaw ?? buckets * bucketMs));
+
+  const serverNowRaw = toFiniteNumber(rec.serverNowMs ?? rec.server_now_ms);
+  const serverNowMs = Math.floor(serverNowRaw ?? nowMsFallback);
+
+  const anchorRaw = toFiniteNumber(rec.anchorMs ?? rec.anchor_ms);
+  const anchorMs = Math.floor(anchorRaw ?? Math.floor(serverNowMs / bucketMs) * bucketMs);
+
+  const seriesInput = rec.series;
+  const byId = new Map<string, unknown>();
+  if (Array.isArray(seriesInput)) {
+    for (const s of seriesInput) {
+      if (!s || typeof s !== "object") continue;
+      const srec = s as Record<string, unknown>;
+      const id = typeof srec.id === "string" ? srec.id : typeof srec.key === "string" ? srec.key : null;
+      if (!id) continue;
+      if (!byId.has(id)) byId.set(id, srec);
+    }
+  }
+
+  const series: TimeSeriesSeries[] = TIME_SERIES_SERIES_DEFS.map((def) => {
+    const found = byId.get(def.id);
+    const valuesRaw = found && typeof found === "object" ? (found as Record<string, unknown>).values : null;
+    const parsed = Array.isArray(valuesRaw) ? valuesRaw.map(toNonNegativeCount) : [];
+    const trimmed = parsed.length > buckets ? parsed.slice(parsed.length - buckets) : parsed;
+    const padded = trimmed.length < buckets ? trimmed.concat(new Array<number>(buckets - trimmed.length).fill(0)) : trimmed;
+    return { ...def, values: padded };
+  });
+
+  return { windowMs, buckets, bucketMs, anchorMs, serverNowMs, series };
+}
+
 const FALLBACK_DATA: DashboardPayload = {
   mainSession: {
     agent: "sisyphus",
@@ -59,6 +199,13 @@ const FALLBACK_DATA: DashboardPayload = {
       timeline: "2026-01-01T00:00:00Z: 2m",
     },
   ],
+  timeSeries: makeZeroTimeSeries({
+    windowMs: TIME_SERIES_DEFAULT_WINDOW_MS,
+    bucketMs: TIME_SERIES_DEFAULT_BUCKET_MS,
+    buckets: TIME_SERIES_DEFAULT_BUCKETS,
+    anchorMs: 0,
+    serverNowMs: 0,
+  }),
   raw: {
     ok: false,
     hint: "API not reachable yet. Using placeholder data.",
@@ -93,6 +240,21 @@ function statusTone(status: string): "teal" | "sand" | "red" {
   return "sand";
 }
 
+function maxCount(values: number[]): number {
+  let max = 0;
+  for (const v of values) {
+    if (typeof v !== "number") continue;
+    if (!Number.isFinite(v)) continue;
+    if (v > max) max = v;
+  }
+  return max;
+}
+
+function barHeight(value: number, max: number, chartHeight: number): number {
+  if (!max || value <= 0) return 0;
+  return Math.max(1, Math.round((value / max) * chartHeight));
+}
+
 async function safeFetchJson(url: string): Promise<unknown> {
   const controller = new AbortController();
   const t = window.setTimeout(() => controller.abort(), 1600);
@@ -144,6 +306,8 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   const completed = Number(plan.completed ?? plan.done ?? 0) || 0;
   const total = Number(plan.total ?? plan.count ?? 0) || 0;
 
+  const timeSeries = normalizeTimeSeries(anyJson.timeSeries, Date.now());
+
   return {
     mainSession: {
       agent: String(main.agent ?? FALLBACK_DATA.mainSession.agent),
@@ -160,6 +324,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
       statusPill: String(plan.statusPill ?? plan.status ?? FALLBACK_DATA.planProgress.statusPill),
     },
     backgroundTasks,
+    timeSeries,
     raw: json,
   };
 }
@@ -171,6 +336,7 @@ export default function App() {
   const [copyState, setCopyState] = React.useState<"idle" | "ok" | "err">("idle");
   const [soundEnabled, setSoundEnabled] = React.useState(false);
   const [soundUnlocked, setSoundUnlocked] = React.useState(false);
+  const [planOpen, setPlanOpen] = React.useState(false);
   const [errorHint, setErrorHint] = React.useState<string | null>(null);
 
   const timerRef = React.useRef<number | null>(null);
@@ -186,6 +352,11 @@ export default function App() {
     return window.location.origin;
   }, []);
 
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.title = APP_TITLE;
+  }, []);
+
   React.useEffect(() => {
     soundEnabledRef.current = soundEnabled;
   }, [soundEnabled]);
@@ -231,7 +402,7 @@ export default function App() {
     return hasSession && idle && noTool;
   }
 
-  function maybePlayDings(next: DashboardPayload) {
+  function maybePlayDings(prev: DashboardPayload | null, next: DashboardPayload) {
     if (!soundEnabledRef.current) return;
     if (!hadSuccessRef.current) return;
 
@@ -258,6 +429,12 @@ export default function App() {
       }
     }
 
+    const tool = String(next.mainSession.currentTool ?? "").trim().toLowerCase();
+    const prevTool = String(prev?.mainSession.currentTool ?? "").trim().toLowerCase();
+    if (tool === "question" && prevTool !== "question") {
+      void playDing("question");
+    }
+
     const waitingDecision = computeWaitingDing({
       prev: {
         prevWaiting,
@@ -299,10 +476,12 @@ export default function App() {
         hadSuccessRef.current = true;
         setConnected(true);
         setErrorHint(null);
-        const next = toDashboardPayload(json);
-        maybePlayDings(next);
-        setData(next);
-        setLastUpdate(Date.now());
+         const next = toDashboardPayload(json);
+         setData((prev) => {
+           maybePlayDings(prev, next);
+           return next;
+         });
+         setLastUpdate(Date.now());
       } catch (err) {
         if (!alive) return;
         nextConnected = false;
@@ -351,6 +530,23 @@ export default function App() {
   const liveLabel = connected ? "Live" : "Disconnected";
   const liveTone = connected ? "teal" : "sand";
 
+  const timeSeriesById = React.useMemo(() => {
+    const map = new Map<TimeSeriesSeriesId, TimeSeriesSeries>();
+    for (const s of data.timeSeries.series) {
+      if (s && typeof s.id === "string") {
+        map.set(s.id, s);
+      }
+    }
+    return map;
+  }, [data.timeSeries.series]);
+
+  const buckets = Math.max(1, data.timeSeries.buckets);
+  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 overallValues = timeSeriesById.get("overall-main")?.values ?? [];
+
   return (
     <div className="page">
       <div className="container">
@@ -358,7 +554,7 @@ export default function App() {
           <div className="brand">
             <div className="brandMark" aria-hidden="true" />
             <div className="brandText">
-              <h1>Agent Dashboard</h1>
+              <h1>{APP_TITLE}</h1>
               <p>
                 Live view (no prompts or tool arguments rendered).
                 {!connected && errorHint ? <span className="hint"> - {errorHint}</span> : null}
@@ -395,6 +591,137 @@ export default function App() {
         </header>
 
         <main className="stack">
+          <section className="timeSeries">
+            <div className="timeSeriesHeader">
+              <h2 className="timeSeriesTitle">Time-series activity</h2>
+              <p className="timeSeriesSub">Last 5 minutes</p>
+            </div>
+
+            <div className="timeSeriesAxisTop" aria-hidden="true">
+              <div />
+              <div className="timeSeriesAxisTopLabels">
+                <span className="timeSeriesAxisTopLabel">-5m</span>
+                <span className="timeSeriesAxisTopLabel">-4m</span>
+                <span className="timeSeriesAxisTopLabel">-3m</span>
+                <span className="timeSeriesAxisTopLabel">-1m</span>
+              </div>
+            </div>
+
+            <div className="timeSeriesRows">
+              {(
+                [
+                  {
+                    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,
+                  },
+                  {
+                    label: "background tasks (total)",
+                    tone: "muted" as const,
+                    overlayId: "background-total" as const,
+                    baseline: false,
+                  },
+                ] as const
+              ).map((row) => {
+                const H = 28;
+                const padTop = 2;
+                const padBottom = 2;
+                const chartHeight = H - padTop - padBottom;
+                const baselineY = H - padBottom;
+                const barW = 0.85;
+                const barInset = (1 - barW) / 2;
+
+                const overlayValues = timeSeriesById.get(row.overlayId)?.values ?? [];
+                const baselineMax = row.baseline ? maxCount(overallValues) : 0;
+                const overlayMax = maxCount(overlayValues);
+                const scaleMax = Math.max(1, row.baseline ? Math.max(baselineMax, overlayMax) : overlayMax || 1);
+
+                return (
+                  <div key={row.overlayId} className="timeSeriesRow" data-tone={row.tone}>
+                    <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-${idx}`}
+                              className="timeSeriesGridline"
+                              x1={x}
+                              x2={x}
+                              y1={0}
+                              y2={H}
+                            />
+                          );
+                        })}
+
+                        {row.baseline
+                          ? overallValues.slice(0, buckets).map((v, i) => {
+                              const h = barHeight(v ?? 0, scaleMax, chartHeight);
+                              if (!h) return null;
+                              const barX = i + barInset;
+                              return (
+                                <rect
+                                  key={`b-${i}`}
+                                  className="timeSeriesBarBaseline"
+                                  x={barX}
+                                  y={baselineY - h}
+                                  width={barW}
+                                  height={h}
+                                />
+                              );
+                            })
+                          : null}
+
+                        {overlayValues.slice(0, buckets).map((v, i) => {
+                          const h = barHeight(v ?? 0, scaleMax, chartHeight);
+                          if (!h) return null;
+                          const barX = i + barInset;
+                          return (
+                            <rect
+                              key={`o-${i}`}
+                              className="timeSeriesBar"
+                              x={barX}
+                              y={baselineY - h}
+                              width={barW}
+                              height={h}
+                            />
+                          );
+                        })}
+                      </svg>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="timeSeriesAxisBottom" aria-hidden="true">
+              <div />
+              <div className="timeSeriesAxisBottomLabels">
+                <span className="timeSeriesAxisBottomLabel">-5m</span>
+                <span className="timeSeriesAxisBottomLabel">-4m</span>
+                <span className="timeSeriesAxisBottomLabel">-3m</span>
+                <span className="timeSeriesAxisBottomLabel">-2m</span>
+                <span className="timeSeriesAxisBottomLabel">-1m</span>
+                <span className="timeSeriesAxisBottomLabel">Now</span>
+              </div>
+            </div>
+          </section>
+
           <section className="grid2">
             <article className="card">
               <div className="cardHeader">
@@ -427,6 +754,16 @@ export default function App() {
                 <h2>Plan progress</h2>
                 <span className={`pill pill-${statusTone(data.planProgress.statusPill)}`}>{data.planProgress.statusPill}</span>
               </div>
+              <div className="cardHeader" style={{ marginTop: 8 }}>
+                <button
+                  className="button"
+                  type="button"
+                  onClick={() => setPlanOpen((v) => !v)}
+                  aria-expanded={planOpen}
+                >
+                  {planOpen ? "Hide steps" : "Show steps"}
+                </button>
+              </div>
               <div className="kv">
                 <div className="kvRow">
                   <div className="kvKey">NAME</div>
@@ -442,7 +779,19 @@ export default function App() {
                   </div>
                 </div>
               </div>
-              <div className="progressWrap" aria-label="progress">
+              {planOpen ? (
+                <div className="divider" />
+              ) : null}
+              {planOpen ? (
+                <div className="mono" style={{ fontSize: 12, lineHeight: 1.5 }}>
+                  {(data.planProgress.steps ?? []).length > 0
+                    ? (data.planProgress.steps ?? []).map((s, idx) => (
+                        <div key={`${idx}-${s.checked ? "x" : "_"}-${s.text}`}>[{s.checked ? "x" : " "}] {s.text || "(empty)"}</div>
+                      ))
+                    : "(no steps detected)"}
+                </div>
+              ) : null}
+              <div className="progressWrap">
                 <div className="progressTrack">
                   <div className="progressFill" style={{ width: `${planPercent}%` }} />
                 </div>
@@ -454,7 +803,7 @@ export default function App() {
           <section className="card">
             <div className="cardHeader">
               <h2>Background tasks</h2>
-              <span className="badge" aria-label="count">
+              <span className="badge">
                 {data.backgroundTasks.length}
               </span>
             </div>
@@ -483,7 +832,7 @@ export default function App() {
                       </td>
                       <td className="mono">{t.toolCalls}</td>
                       <td className="mono">{t.lastTool}</td>
-                      <td className="mono muted">{t.timeline || "-"}</td>
+                      <td className="mono muted">{t.status.toLowerCase() === "queued" ? "-" : t.timeline || "-"}</td>
                     </tr>
                   ))}
                 </tbody>

package/src/app-version.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string;

package/src/ingest/boulder.ts

@@ -16,6 +16,11 @@ export type PlanProgress = {
   missing: boolean
 }
 
+export type PlanStep = {
+  checked: boolean
+  text: string
+}
+
 export function readBoulderState(projectRoot: string): BoulderState | null {
   const filePath = assertAllowedPath({
     candidatePath: path.join(projectRoot, ".sisyphus", "boulder.json"),
@@ -46,6 +51,22 @@ export function getPlanProgressFromMarkdown(content: string): Omit<PlanProgress,
   }
 }
 
+export function getPlanStepsFromMarkdown(content: string): PlanStep[] {
+  const lines = content.split(/\r?\n/)
+  const steps: PlanStep[] = []
+
+  for (const raw of lines) {
+    const line = raw.trim()
+    const m = line.match(/^[-*]\s*\[(\s|x|X)\]\s*(.*)$/)
+    if (!m) continue
+    const checked = m[1] === "x" || m[1] === "X"
+    const text = (m[2] ?? "").trim()
+    steps.push({ checked, text })
+  }
+
+  return steps
+}
+
 export function readPlanProgress(projectRoot: string, planPath: string): PlanProgress {
   let planReal: string
   try {
@@ -69,3 +90,26 @@ export function readPlanProgress(projectRoot: string, planPath: string): PlanPro
     return { total: 0, completed: 0, isComplete: false, missing: true }
   }
 }
+
+export function readPlanSteps(projectRoot: string, planPath: string): { missing: boolean; steps: PlanStep[] } {
+  let planReal: string
+  try {
+    planReal = assertAllowedPath({
+      candidatePath: planPath,
+      allowedRoots: [projectRoot],
+    })
+  } catch {
+    return { missing: true, steps: [] }
+  }
+
+  if (!fs.existsSync(planReal)) {
+    return { missing: true, steps: [] }
+  }
+
+  try {
+    const content = fs.readFileSync(planReal, "utf8")
+    return { missing: false, steps: getPlanStepsFromMarkdown(content) }
+  } catch {
+    return { missing: true, steps: [] }
+  }
+}