oh-my-opencode-dashboard 0.0.5 → 0.1.1

package/src/App.tsx

@@ -63,6 +63,266 @@ type TimeSeries = {
   series: TimeSeriesSeries[];
 };
 
+function toNonNegativeFinite(value: unknown): number {
+  if (typeof value !== "number") return 0;
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, value);
+}
+
+export function computeOtherMainAgentsCount(params: {
+  overall: unknown;
+  background: unknown;
+  sisyphus: unknown;
+  prometheus: unknown;
+  atlas: unknown;
+}): number {
+  const overall = toNonNegativeFinite(params.overall);
+  const background = toNonNegativeFinite(params.background);
+  const sisyphus = toNonNegativeFinite(params.sisyphus);
+  const prometheus = toNonNegativeFinite(params.prometheus);
+  const atlas = toNonNegativeFinite(params.atlas);
+
+  const mainTotal = Math.max(0, overall - background);
+  return Math.max(0, mainTotal - sisyphus - prometheus - atlas);
+}
+
+export function computeMainAgentsScaleMax(params: {
+  buckets: number;
+  overallValues: unknown[];
+  backgroundValues: unknown[];
+  sisyphusValues: unknown[];
+  prometheusValues: unknown[];
+  atlasValues: unknown[];
+}): number {
+  const buckets = Math.max(0, Math.floor(params.buckets));
+  let sumMax = 0;
+
+  for (let i = 0; i < buckets; i++) {
+    const sis = toNonNegativeFinite(params.sisyphusValues[i]);
+    const pro = toNonNegativeFinite(params.prometheusValues[i]);
+    const atl = toNonNegativeFinite(params.atlasValues[i]);
+    const other = computeOtherMainAgentsCount({
+      overall: params.overallValues[i],
+      background: params.backgroundValues[i],
+      sisyphus: sis,
+      prometheus: pro,
+      atlas: atl,
+    });
+    const s = sis + pro + atl + other;
+    if (s > sumMax) sumMax = s;
+  }
+
+  return Math.max(1, sumMax || 1);
+}
+
+export function TimeSeriesActivitySection(props: { timeSeries: TimeSeries }) {
+  const timeSeriesById = new Map<TimeSeriesSeriesId, TimeSeriesSeries>();
+  for (const s of props.timeSeries.series) {
+    if (s && typeof s.id === "string") {
+      timeSeriesById.set(s.id, s);
+    }
+  }
+
+  const buckets = Math.max(1, props.timeSeries.buckets);
+  const bucketMs = Math.max(1, props.timeSeries.bucketMs);
+  const viewBox = `0 0 ${buckets} 28`;
+  const minuteStep = Math.max(1, Math.round(60_000 / bucketMs));
+  const bucketStartMs = props.timeSeries.anchorMs - (buckets - 1) * bucketMs;
+
+  const overallValues = timeSeriesById.get("overall-main")?.values ?? [];
+
+  return (
+    <section className="timeSeries">
+      <div className="timeSeriesHeader">
+        <h2 className="timeSeriesTitle">Time-series activity</h2>
+        <p className="timeSeriesSub">Last 5 minutes</p>
+      </div>
+
+      <div className="timeSeriesRows">
+        {(
+          [
+            {
+              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,
+              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;
+
+          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 ?? [];
+            const backgroundValues = timeSeriesById.get("background-total")?.values ?? [];
+
+            const scaleMax = computeMainAgentsScaleMax({
+              buckets,
+              overallValues,
+              backgroundValues,
+              sisyphusValues,
+              prometheusValues,
+              atlasValues,
+            });
+
+            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 sis = toNonNegativeFinite(sisyphusValues[i]);
+                      const pro = toNonNegativeFinite(prometheusValues[i]);
+                      const atl = toNonNegativeFinite(atlasValues[i]);
+                      const other = computeOtherMainAgentsCount({
+                        overall: overallValues[i],
+                        background: backgroundValues[i],
+                        sisyphus: sis,
+                        prometheus: pro,
+                        atlas: atl,
+                      });
+
+                      const segments = computeStackedSegments(
+                        {
+                          sisyphus: sis,
+                          prometheus: pro,
+                          atlas: atl,
+                          other,
+                        },
+                        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);
+          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-${bucketStartMs + x * bucketMs}`}
+                        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;
+                        const bucketMsAt = bucketStartMs + i * bucketMs;
+                        return (
+                          <rect
+                            key={`b-${bucketMsAt}`}
+                            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;
+                    const bucketMsAt = bucketStartMs + i * bucketMs;
+                    return (
+                      <rect
+                        key={`${row.overlayId}-${bucketMsAt}`}
+                        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>
+  );
+}
+
 type DashboardPayload = {
   mainSession: {
     agent: string;
@@ -70,6 +330,7 @@ type DashboardPayload = {
     currentModel: string;
     lastUpdatedLabel: string;
     session: string;
+    sessionId: string | null;
     statusPill: string;
   };
   planProgress: {
@@ -81,6 +342,7 @@ type DashboardPayload = {
     steps?: Array<{ checked: boolean; text: string }>;
   };
   backgroundTasks: BackgroundTask[];
+  mainSessionTasks: BackgroundTask[];
   timeSeries: TimeSeries;
   raw: unknown;
 };
@@ -200,6 +462,7 @@ const FALLBACK_DATA: DashboardPayload = {
     currentModel: "anthropic/claude-opus-4-5",
     lastUpdatedLabel: "just now",
     session: "qa-session",
+    sessionId: null,
     statusPill: "busy",
   },
   planProgress: {
@@ -223,6 +486,7 @@ const FALLBACK_DATA: DashboardPayload = {
       timeline: "2026-01-01T00:00:00Z: 2m",
     },
   ],
+  mainSessionTasks: [],
   timeSeries: makeZeroTimeSeries({
     windowMs: TIME_SERIES_DEFAULT_WINDOW_MS,
     bucketMs: TIME_SERIES_DEFAULT_BUCKET_MS,
@@ -419,6 +683,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   const main = (anyJson.mainSession ?? anyJson.main_session ?? {}) as Record<string, unknown>;
   const plan = (anyJson.planProgress ?? anyJson.plan_progress ?? {}) as Record<string, unknown>;
   const tasks = (anyJson.backgroundTasks ?? anyJson.background_tasks ?? []) as unknown;
+  const mainTasks = (anyJson.mainSessionTasks ?? anyJson.main_session_tasks ?? []) as unknown;
 
   function parsePlanSteps(stepsInput: unknown): Array<{ checked: boolean; text: string }> {
     if (!Array.isArray(stepsInput)) return [];
@@ -459,6 +724,29 @@ function toDashboardPayload(json: unknown): DashboardPayload {
       })
     : FALLBACK_DATA.backgroundTasks;
 
+  const mainSessionTasks: BackgroundTask[] = Array.isArray(mainTasks)
+    ? mainTasks.map((t, idx) => {
+        const rec = (t ?? {}) as Record<string, unknown>;
+        return {
+          id: String(rec.id ?? rec.taskId ?? rec.task_id ?? `main-task-${idx + 1}`),
+          description: String(rec.description ?? rec.name ?? "(no description)"),
+          subline:
+            typeof rec.subline === "string"
+              ? rec.subline
+              : typeof rec.taskId === "string"
+                ? rec.taskId
+                : undefined,
+          agent: String(rec.agent ?? rec.worker ?? "unknown"),
+          lastModel: toNonEmptyString(rec.lastModel ?? rec.last_model) ?? "-",
+          sessionId: toNonEmptyString(rec.sessionId ?? rec.session_id),
+          status: String(rec.status ?? "queued"),
+          toolCalls: Number(rec.toolCalls ?? rec.tool_calls ?? 0) || 0,
+          lastTool: String(rec.lastTool ?? rec.last_tool ?? "-") || "-",
+          timeline: String(rec.timeline ?? "") || "",
+        };
+      })
+    : [];
+
   const completed = Number(plan.completed ?? plan.done ?? 0) || 0;
   const total = Number(plan.total ?? plan.count ?? 0) || 0;
   const steps = parsePlanSteps(plan.steps);
@@ -472,6 +760,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
       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),
+      sessionId: toNonEmptyString(main.sessionId ?? main.session_id),
       statusPill: String(main.statusPill ?? main.status ?? FALLBACK_DATA.mainSession.statusPill),
     },
     planProgress: {
@@ -483,6 +772,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
       steps,
     },
     backgroundTasks,
+    mainSessionTasks,
     timeSeries,
     raw: json,
   };
@@ -500,9 +790,11 @@ export default function App() {
   const [errorHint, setErrorHint] = React.useState<string | null>(null);
 
   const [expandedBgTaskIds, setExpandedBgTaskIds] = React.useState<Set<string>>(() => new Set());
+  const [expandedMainTaskIds, setExpandedMainTaskIds] = React.useState<Set<string>>(() => new Set());
   const [toolCallsBySession, setToolCallsBySession] = React.useState<
     Map<string, { state: "idle" | "loading" | "ok" | "error"; data: ToolCallsResponse | null; lastFetchedAtMs: number | null }>
   >(() => new Map());
+  const toolCallsBySessionRef = React.useRef(toolCallsBySession);
   const toolCallsSeqRef = React.useRef<Map<string, number>>(new Map());
 
   const timerRef = React.useRef<number | null>(null);
@@ -527,6 +819,10 @@ export default function App() {
     soundEnabledRef.current = soundEnabled;
   }, [soundEnabled]);
 
+  React.useEffect(() => {
+    toolCallsBySessionRef.current = toolCallsBySession;
+  }, [toolCallsBySession]);
+
   React.useEffect(() => {
     try {
       const raw = window.localStorage.getItem("omoDashboardSoundEnabled");
@@ -696,18 +992,9 @@ 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]);
 
-  async function fetchToolCalls(sessionId: string, opts: { force: boolean }) {
-    const existing = toolCallsBySession.get(sessionId);
+  const fetchToolCalls = React.useCallback(async (sessionId: string, opts: { force: boolean }) => {
+    const existing = toolCallsBySessionRef.current.get(sessionId);
     if (!opts.force && existing?.data?.ok) return;
 
     const seq = (toolCallsSeqRef.current.get(sessionId) ?? 0) + 1;
@@ -747,7 +1034,7 @@ export default function App() {
         return next;
       });
     }
-  }
+  }, []);
 
   function toggleBackgroundTaskExpanded(t: BackgroundTask) {
     const nextExpanded = !expandedBgTaskIds.has(t.id);
@@ -764,7 +1051,7 @@ export default function App() {
     if (!sessionId) return;
 
     const isRunning = String(t.status ?? "").toLowerCase().trim() === "running";
-    const cached = toolCallsBySession.get(sessionId);
+    const cached = toolCallsBySessionRef.current.get(sessionId);
     if (isRunning) {
       void fetchToolCalls(sessionId, { force: true });
       return;
@@ -775,13 +1062,65 @@ export default function App() {
     void fetchToolCalls(sessionId, { force: false });
   }
 
-  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 bucketStartMs = data.timeSeries.anchorMs - (buckets - 1) * bucketMs;
+  function toggleMainTaskExpanded(t: BackgroundTask) {
+    const nextExpanded = !expandedMainTaskIds.has(t.id);
+    setExpandedMainTaskIds((prev) => {
+      const next = new Set(prev);
+      if (nextExpanded) next.add(t.id);
+      else next.delete(t.id);
+      return next;
+    });
 
-  const overallValues = timeSeriesById.get("overall-main")?.values ?? [];
+    if (!nextExpanded) return;
+
+    const sessionId = toNonEmptyString(t.sessionId);
+    if (!sessionId) return;
+
+    const isRunning = String(t.status ?? "").toLowerCase().trim() === "running";
+    const cached = toolCallsBySessionRef.current.get(sessionId);
+    if (isRunning) {
+      void fetchToolCalls(sessionId, { force: true });
+      return;
+    }
+
+    if (cached?.data?.ok) return;
+    if (cached?.state === "loading") return;
+    void fetchToolCalls(sessionId, { force: false });
+  }
+
+  React.useEffect(() => {
+    if (!connected) return;
+
+    for (const t of data.backgroundTasks) {
+      const sessionId = toNonEmptyString(t.sessionId);
+      const cached = sessionId ? toolCallsBySessionRef.current.get(sessionId) : null;
+      const plan = computeToolCallsFetchPlan({
+        sessionId,
+        status: t.status,
+        cachedState: cached?.state ?? null,
+        cachedDataOk: Boolean(cached?.data?.ok),
+        isExpanded: expandedBgTaskIds.has(t.id),
+      });
+      if (plan.shouldFetch && sessionId) {
+        void fetchToolCalls(sessionId, { force: plan.force });
+      }
+    }
+
+    for (const t of data.mainSessionTasks) {
+      const sessionId = toNonEmptyString(t.sessionId);
+      const cached = sessionId ? toolCallsBySessionRef.current.get(sessionId) : null;
+      const plan = computeToolCallsFetchPlan({
+        sessionId,
+        status: t.status,
+        cachedState: cached?.state ?? null,
+        cachedDataOk: Boolean(cached?.data?.ok),
+        isExpanded: expandedMainTaskIds.has(t.id),
+      });
+      if (plan.shouldFetch && sessionId) {
+        void fetchToolCalls(sessionId, { force: plan.force });
+      }
+    }
+  }, [connected, data.backgroundTasks, data.mainSessionTasks, expandedBgTaskIds, expandedMainTaskIds, fetchToolCalls]);
 
   return (
     <div className="page">
@@ -827,201 +1166,7 @@ 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">
-              {(
-                [
-                  {
-                    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,
-                    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;
-
-                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);
-                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-${bucketStartMs + x * bucketMs}`}
-                              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;
-                              const bucketMsAt = bucketStartMs + i * bucketMs;
-                              return (
-                                <rect
-                                  key={`b-${bucketMsAt}`}
-                                  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;
-                          const bucketMsAt = bucketStartMs + i * bucketMs;
-                          return (
-                            <rect
-                              key={`${row.overlayId}-${bucketMsAt}`}
-                              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>
+          <TimeSeriesActivitySection timeSeries={data.timeSeries} />
 
           <section className="grid2">
             <article className="card">
@@ -1105,6 +1250,126 @@ export default function App() {
             </article>
           </section>
 
+          <section className="card">
+            <div className="cardHeader">
+              <h2>Main session tasks</h2>
+              <span className="badge">{data.mainSessionTasks.length}</span>
+            </div>
+
+            <div className="tableWrap">
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>DESCRIPTION</th>
+                    <th>AGENT</th>
+                    <th>LAST MODEL</th>
+                    <th>STATUS</th>
+                    <th>TOOL CALLS</th>
+                    <th>LAST TOOL</th>
+                    <th>TIMELINE</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.mainSessionTasks.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="muted" style={{ padding: 16 }}>
+                        No main session tasks detected yet.
+                      </td>
+                    </tr>
+                  ) : null}
+                  {data.mainSessionTasks.map((t) => {
+                    const expanded = expandedMainTaskIds.has(t.id);
+                    const sessionId = toNonEmptyString(t.sessionId);
+                    const detailId = `main-toolcalls-${t.id}`;
+                    const entry = sessionId ? toolCallsBySession.get(sessionId) : null;
+                    const toolCalls = entry?.data?.ok ? entry.data.toolCalls : [];
+                    const showCapped = Boolean(entry?.data?.truncated);
+                    const caps = entry?.data?.caps;
+                    const showLoading = entry?.state === "loading";
+                    const showError = entry?.state === "error" && !entry?.data?.ok;
+                    const empty = sessionId ? toolCalls.length === 0 && !showLoading && !showError : true;
+
+                    return (
+                      <React.Fragment key={t.id}>
+                        <tr>
+                          <td>
+                            <div className="bgTaskRowTitleWrap">
+                              <button
+                                type="button"
+                                className="bgTaskToggle"
+                                onClick={() => toggleMainTaskExpanded(t)}
+                                aria-expanded={expanded}
+                                aria-controls={detailId}
+                                title={expanded ? "Collapse" : "Expand"}
+                                aria-label={expanded ? "Collapse tool calls" : "Expand tool calls"}
+                              />
+                              <div className="bgTaskRowTitleText">
+                                <div className="taskTitle">{t.description}</div>
+                                {t.subline ? <div className="taskSub mono">{t.subline}</div> : null}
+                              </div>
+                            </div>
+                          </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">{formatBackgroundTaskTimelineCell(t.status, t.timeline)}</td>
+                        </tr>
+
+                        {expanded ? (
+                          <tr>
+                            <td colSpan={7} className="bgTaskDetailCell">
+                              <section id={detailId} aria-label="Tool calls" className="bgTaskDetail">
+                                <div className="mono muted bgTaskDetailHeader">
+                                  Tool calls (metadata only){showLoading && toolCalls.length > 0 ? " - refreshing" : ""}
+                                  {showCapped
+                                    ? ` - capped${caps ? ` (max ${caps.maxMessages} messages / ${caps.maxToolCalls} tool calls)` : ""}`
+                                    : ""}
+                                </div>
+
+                                {!sessionId ? (
+                                  <div className="muted bgTaskDetailEmpty">No session id available for this task.</div>
+                                ) : showError ? (
+                                  <div className="muted bgTaskDetailEmpty">Tool calls unavailable.</div>
+                                ) : showLoading && toolCalls.length === 0 ? (
+                                  <div className="muted bgTaskDetailEmpty">Loading tool calls...</div>
+                                ) : empty ? (
+                                  <div className="muted bgTaskDetailEmpty">No tool calls recorded.</div>
+                                ) : (
+                                  <div className="bgTaskToolCallsGrid">
+                                    {toolCalls.map((c) => (
+                                      <div key={c.callId} className="bgTaskToolCall">
+                                        <div className="bgTaskToolCallRow">
+                                          <div className="mono bgTaskToolCallTool" title={c.tool}>
+                                            {c.tool}
+                                          </div>
+                                          <div className="mono muted bgTaskToolCallStatus" title={c.status}>
+                                            {c.status}
+                                          </div>
+                                        </div>
+                                        <div className="mono muted bgTaskToolCallTime">{formatTime(c.createdAtMs)}</div>
+                                        <div className="mono muted bgTaskToolCallId" title={c.callId}>
+                                          {c.callId}
+                                        </div>
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+                              </section>
+                            </td>
+                          </tr>
+                        ) : null}
+                      </React.Fragment>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
           <section className="card">
             <div className="cardHeader">
               <h2>Background tasks</h2>
@@ -1126,6 +1391,13 @@ export default function App() {
                   </tr>
                 </thead>
                 <tbody>
+                  {data.backgroundTasks.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="muted" style={{ padding: 16 }}>
+                        No background tasks detected yet. When you run background agents, they will appear here.
+                      </td>
+                    </tr>
+                  ) : null}
                   {data.backgroundTasks.map((t) => {
                     const expanded = expandedBgTaskIds.has(t.id);
                     const sessionId = toNonEmptyString(t.sessionId);