oh-my-opencode-dashboard 0.0.3 → 0.0.5

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,12 +13,31 @@ type BackgroundTask = {
   description: string;
   subline?: string;
   agent: string;
+  lastModel: string;
+  sessionId?: string | null;
   status: "queued" | "running" | "done" | "error" | "cancelled" | string;
   toolCalls: number;
   lastTool: string;
   timeline: string;
 };
 
+type ToolCallSummary = {
+  sessionId?: string;
+  messageId: string;
+  callId: string;
+  tool: string;
+  status: string;
+  createdAtMs: number | null;
+};
+
+type ToolCallsResponse = {
+  ok: boolean;
+  sessionId: string;
+  toolCalls: ToolCallSummary[];
+  caps?: { maxMessages: number; maxToolCalls: number };
+  truncated?: boolean;
+};
+
 type TimeSeriesTone = "muted" | "teal" | "red" | "green";
 
 type TimeSeriesSeriesId =
@@ -47,6 +67,7 @@ type DashboardPayload = {
   mainSession: {
     agent: string;
     currentTool: string;
+    currentModel: string;
     lastUpdatedLabel: string;
     session: string;
     statusPill: string;
@@ -176,6 +197,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 +215,8 @@ const FALLBACK_DATA: DashboardPayload = {
       description: "Explore: find HTTP/SSE patterns",
       subline: "task-1",
       agent: "explore",
+      lastModel: "opencode/gpt-5-nano",
+      sessionId: null,
       status: "running",
       toolCalls: 3,
       lastTool: "grep",
@@ -271,6 +295,120 @@ 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;
+}
+
+function toToolCallSummary(value: unknown): ToolCallSummary | null {
+  if (!value || typeof value !== "object") return null;
+  const rec = value as Record<string, unknown>;
+
+  const messageId = toNonEmptyString(rec.messageId ?? rec.message_id);
+  const callId = toNonEmptyString(rec.callId ?? rec.call_id);
+  const tool = toNonEmptyString(rec.tool);
+  const status = toNonEmptyString(rec.status) ?? "unknown";
+  const createdAtRaw = toFiniteNumber(rec.createdAtMs ?? rec.created_at_ms ?? rec.createdAt ?? rec.created_at);
+
+  if (!messageId || !callId || !tool) return null;
+
+  return {
+    sessionId: toNonEmptyString(rec.sessionId ?? rec.session_id) ?? undefined,
+    messageId,
+    callId,
+    tool,
+    status,
+    createdAtMs: typeof createdAtRaw === "number" ? Math.floor(createdAtRaw) : null,
+  };
+}
+
+function toToolCallsResponse(value: unknown): ToolCallsResponse | null {
+  if (!value || typeof value !== "object") return null;
+  const rec = value as Record<string, unknown>;
+
+  const ok = typeof rec.ok === "boolean" ? rec.ok : false;
+  const sessionId = toNonEmptyString(rec.sessionId ?? rec.session_id);
+  const toolCallsRaw = rec.toolCalls ?? rec.tool_calls;
+
+  if (!sessionId || !Array.isArray(toolCallsRaw)) return null;
+
+  const toolCalls: ToolCallSummary[] = toolCallsRaw
+    .map(toToolCallSummary)
+    .filter((t): t is ToolCallSummary => t !== null);
+
+  const capsRaw = rec.caps;
+  const capsObj = capsRaw && typeof capsRaw === "object" ? (capsRaw as Record<string, unknown>) : null;
+  const maxMessagesRaw = capsObj ? toFiniteNumber(capsObj.maxMessages ?? capsObj.max_messages) : null;
+  const maxToolCallsRaw = capsObj ? toFiniteNumber(capsObj.maxToolCalls ?? capsObj.max_tool_calls) : null;
+  const caps =
+    typeof maxMessagesRaw === "number" && typeof maxToolCallsRaw === "number"
+      ? { maxMessages: Math.max(0, Math.floor(maxMessagesRaw)), maxToolCalls: Math.max(0, Math.floor(maxToolCallsRaw)) }
+      : undefined;
+
+  const truncated = typeof rec.truncated === "boolean" ? rec.truncated : undefined;
+
+  return {
+    ok,
+    sessionId,
+    toolCalls,
+    caps,
+    truncated,
+  };
+}
+
+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) ?? "-";
+}
+
+export function computeToolCallsFetchPlan(params: {
+  sessionId: string | null;
+  status: string;
+  cachedState: "idle" | "loading" | "ok" | "error" | null;
+  cachedDataOk: boolean;
+  isExpanded: boolean;
+}): { shouldFetch: boolean; force: boolean } {
+  const { sessionId, status, cachedState, cachedDataOk, isExpanded } = params;
+  
+  if (!sessionId) {
+    return { shouldFetch: false, force: false };
+  }
+  
+  if (!isExpanded) {
+    return { shouldFetch: false, force: false };
+  }
+  
+  const isRunning = String(status ?? "").toLowerCase().trim() === "running";
+  
+  if (isRunning) {
+    return { shouldFetch: true, force: true };
+  }
+  
+  if (cachedDataOk) {
+    return { shouldFetch: false, force: false };
+  }
+  
+  if (cachedState === "loading") {
+    return { shouldFetch: false, force: false };
+  }
+  
+  return { shouldFetch: true, force: false };
+}
+
+export function toggleIdInSet(id: string, currentSet: Set<string>): Set<string> {
+  const next = new Set(currentSet);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  return next;
+}
+
 function toDashboardPayload(json: unknown): DashboardPayload {
   if (!json || typeof json !== "object") {
     return { ...FALLBACK_DATA, raw: json };
@@ -282,6 +420,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 +449,8 @@ function toDashboardPayload(json: unknown): DashboardPayload {
                 ? 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 ?? "-") || "-",
@@ -305,6 +461,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 +469,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 +480,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 +488,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);
@@ -339,6 +499,12 @@ export default function App() {
   const [planOpen, setPlanOpen] = React.useState(false);
   const [errorHint, setErrorHint] = React.useState<string | null>(null);
 
+  const [expandedBgTaskIds, setExpandedBgTaskIds] = 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 toolCallsSeqRef = React.useRef<Map<string, number>>(new Map());
+
   const timerRef = React.useRef<number | null>(null);
   const hadSuccessRef = React.useRef(false);
   const soundEnabledRef = React.useRef(false);
@@ -394,15 +560,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 +619,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 +635,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 +678,7 @@ export default function App() {
       alive = false;
       if (timerRef.current) window.clearTimeout(timerRef.current);
     };
-  }, []);
+  }, [maybePlayDings]);
 
   async function onCopyRawJson() {
     setCopyState("idle");
@@ -540,10 +706,80 @@ export default function App() {
     return map;
   }, [data.timeSeries.series]);
 
+  async function fetchToolCalls(sessionId: string, opts: { force: boolean }) {
+    const existing = toolCallsBySession.get(sessionId);
+    if (!opts.force && existing?.data?.ok) return;
+
+    const seq = (toolCallsSeqRef.current.get(sessionId) ?? 0) + 1;
+    toolCallsSeqRef.current.set(sessionId, seq);
+
+    setToolCallsBySession((prev) => {
+      const next = new Map(prev);
+      const prior = next.get(sessionId);
+      next.set(sessionId, {
+        state: "loading",
+        data: prior?.data ?? null,
+        lastFetchedAtMs: prior?.lastFetchedAtMs ?? null,
+      });
+      return next;
+    });
+
+    try {
+      const raw = await safeFetchJson(`/api/tool-calls/${encodeURIComponent(sessionId)}`);
+      const parsed = toToolCallsResponse(raw);
+      if (!parsed?.ok) throw new Error("tool calls not ok");
+      if (toolCallsSeqRef.current.get(sessionId) !== seq) return;
+      setToolCallsBySession((prev) => {
+        const next = new Map(prev);
+        next.set(sessionId, { state: "ok", data: parsed, lastFetchedAtMs: Date.now() });
+        return next;
+      });
+    } catch {
+      if (toolCallsSeqRef.current.get(sessionId) !== seq) return;
+      setToolCallsBySession((prev) => {
+        const next = new Map(prev);
+        const prior = next.get(sessionId);
+        next.set(sessionId, {
+          state: "error",
+          data: prior?.data ?? null,
+          lastFetchedAtMs: prior?.lastFetchedAtMs ?? null,
+        });
+        return next;
+      });
+    }
+  }
+
+  function toggleBackgroundTaskExpanded(t: BackgroundTask) {
+    const nextExpanded = !expandedBgTaskIds.has(t.id);
+    setExpandedBgTaskIds((prev) => {
+      const next = new Set(prev);
+      if (nextExpanded) next.add(t.id);
+      else next.delete(t.id);
+      return next;
+    });
+
+    if (!nextExpanded) return;
+
+    const sessionId = toNonEmptyString(t.sessionId);
+    if (!sessionId) return;
+
+    const isRunning = String(t.status ?? "").toLowerCase().trim() === "running";
+    const cached = toolCallsBySession.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 });
+  }
+
   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;
 
   const overallValues = timeSeriesById.get("overall-main")?.values ?? [];
 
@@ -611,24 +847,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 +867,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 +958,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 +973,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 +991,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 +1038,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 +1118,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>
@@ -820,21 +1126,102 @@ export default function App() {
                   </tr>
                 </thead>
                 <tbody>
-                  {data.backgroundTasks.map((t) => (
-                    <tr key={t.id}>
-                      <td>
-                        <div className="taskTitle">{t.description}</div>
-                        {t.subline ? <div className="taskSub mono">{t.subline}</div> : null}
-                      </td>
-                      <td className="mono">{t.agent}</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>
-                    </tr>
-                  ))}
+                  {data.backgroundTasks.map((t) => {
+                    const expanded = expandedBgTaskIds.has(t.id);
+                    const sessionId = toNonEmptyString(t.sessionId);
+                    const detailId = `bg-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={() => toggleBackgroundTaskExpanded(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>