taskchef 7.24.1 → 7.25.0

package/src/dashboard/react/App.tsx

@@ -30,7 +30,12 @@ import {
   STATUS_FILTERS,
 } from "../state.js";
 import { connectDashboard, dashboardVersion, manualTransition, openInCodex, taskDetail } from "./api";
-import { clearNotificationHistory, notificationClicked } from "./overlay-state";
+import {
+  clearNotificationHistory,
+  listUsageSignature,
+  mergeListTaskIntoDetail,
+  notificationClicked,
+} from "./overlay-state";
 import { usageStillCalculating } from "./presentation";
 import type { DashboardSnapshot, NotificationSnapshot, Task } from "./types";
 import { NotificationCenter } from "./components/NotificationCenter";
@@ -105,6 +110,7 @@ export function DashboardApp({
   selectedIdRef.current = selectedId;
   const detailGeneration = useRef(0);
   const detailListUpdatedAt = useRef<string | null>(null);
+  const detailListUsageSignature = useRef(listUsageSignature(null));
 
   const applySnapshot = useCallback((snapshot: DashboardSnapshot) => {
     setTasks(snapshot.tasks);
@@ -124,7 +130,9 @@ export function DashboardApp({
     const currentSelectedId = selectedIdRef.current;
     if (currentSelectedId) {
       const updated = snapshot.tasks.find((task) => task.id === currentSelectedId);
-      if (updated) setSelectedTask((current) => current ? { ...current, ...updated } : updated);
+      if (updated) {
+        setSelectedTask((current) => current ? mergeListTaskIntoDetail(current, updated) : updated);
+      }
     }
   }, []);
 
@@ -147,7 +155,10 @@ export function DashboardApp({
   const loadDetail = useCallback(async (task: Task, focusTurnRef: string | null = null) => {
     const generation = ++detailGeneration.current;
     detailListUpdatedAt.current = task.updatedAt;
-    setSelectedTask((current) => current?.id === task.id ? { ...current, ...task } : task);
+    detailListUsageSignature.current = listUsageSignature(task);
+    setSelectedTask((current) => current?.id === task.id
+      ? mergeListTaskIntoDetail(current, task)
+      : task);
     setDetailOpened(true);
     setHighlightTurnRef(focusTurnRef);
     setDetailError(null);
@@ -157,6 +168,8 @@ export function DashboardApp({
         if (generation !== detailGeneration.current) return;
         const detail = await taskDetail(task.id);
         if (generation !== detailGeneration.current) return;
+        detailListUpdatedAt.current = detail.updatedAt;
+        detailListUsageSignature.current = listUsageSignature(detail);
         setSelectedTask(detail);
         if (!usageStillCalculating(detail) || attempt === 40) return;
         await new Promise((resolve) => window.setTimeout(resolve, 1_500));
@@ -168,14 +181,20 @@ export function DashboardApp({
     }
   }, []);
 
+  const selectedListTask = tasks.find((task) => task.id === selectedId) ?? null;
+  const selectedListUsageSignature = listUsageSignature(selectedListTask);
+
   useEffect(() => {
     if (!detailOpened || !selectedId || !connect) return;
-    const listTask = tasks.find((task) => task.id === selectedId);
-    if (!listTask || listTask.updatedAt === detailListUpdatedAt.current) return;
-    void loadDetail(listTask, highlightTurnRef);
-    // A task signature update while detail is open refreshes the full projection.
+    if (!selectedListTask) return;
+    if (
+      selectedListTask.updatedAt === detailListUpdatedAt.current
+      && selectedListUsageSignature === detailListUsageSignature.current
+    ) return;
+    void loadDetail(selectedListTask, highlightTurnRef);
+    // Task or cached usage changes while detail is open refresh the full projection.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tasks.find((task) => task.id === selectedId)?.updatedAt]);
+  }, [selectedListTask?.updatedAt, selectedListUsageSignature]);
 
   const projects = useMemo(() => [
     { label: "All projects", value: "" },

package/src/dashboard/react/components/NotificationCenter.test.tsx

@@ -17,9 +17,14 @@ const notification: NotificationSnapshot = {
   summary: "Review completed.",
 };
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
 
 test("notification portal stays non-modal until the operator chooses an action", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-08-30T12:10:00.000Z"));
   const onOpen = vi.fn();
   const onDismiss = vi.fn();
   render(

package/src/dashboard/react/components/TaskCard.tsx

@@ -7,6 +7,7 @@ import { LinkedText } from "./LinkedText";
 import { RelativeTime } from "./RelativeTime";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
+import { TaskUsageSummary } from "./TaskUsageSummary";
 
 export function TaskCard({
   onOpenCodex,
@@ -22,14 +23,17 @@ export function TaskCard({
     <Paper className="taskchef-task-row" component="article" p="md" radius="md" withBorder>
       <Stack className="taskchef-task-main" gap="sm">
           <Box>
-            <Group align="flex-start" gap="sm" justify="space-between" wrap="nowrap">
+            <Box className="taskchef-card-heading">
               <Title order={3} size="h5">
                 <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">
                   {task.title}
                 </button>
               </Title>
-              <StatusBadge status={task.status} />
-            </Group>
+              <Stack align="flex-end" className="taskchef-card-metadata" gap={4}>
+                <StatusBadge status={task.status} />
+                <TaskUsageSummary task={task} />
+              </Stack>
+            </Box>
             <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
           </Box>
 
@@ -47,7 +51,7 @@ export function TaskCard({
           </Box>
 
           <GitHubLinks task={task} />
-          <Group gap="md" justify="space-between">
+          <Group className="taskchef-card-footer" gap="md" justify="space-between">
             <RelativeTime label={`Updated time for ${task.title}`} value={task.meaningfulUpdatedAt ?? task.updatedAt} />
             <Button
               aria-label={`Open chat for ${task.title}`}

package/src/dashboard/react/components/TaskUsageSummary.test.tsx

@@ -0,0 +1,85 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { TaskCard } from "./TaskCard";
+import { TaskUsageSummary } from "./TaskUsageSummary";
+
+afterEach(cleanup);
+
+function renderUsage(task = fixtureTask()) {
+  return render(<MantineProvider><TaskUsageSummary task={task} /></MantineProvider>);
+}
+
+describe("task list usage summary", () => {
+  test("uses shared compact token and currency formatting with full-value accessibility", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: {
+        status: "available",
+        updatedAt: "2026-08-30T09:00:00.000Z",
+        task: {
+          totalTokens: 1_324_567,
+          estimatedCostUsd: 12.3449,
+          sourceUpdatedAt: "2026-08-30T09:00:00.000Z",
+        },
+      },
+    }));
+    const summary = screen.getByText("1.32M tokens · est. $12.34");
+    expect(summary).toHaveAttribute("data-usage-state", "ready");
+    expect(summary).toHaveAccessibleName(/1,324,567 tokens; estimated cost \$12\.34/i);
+    expect(summary).toHaveAttribute("title", expect.stringContaining("unrounded estimate $12.3449"));
+  });
+
+  test("states cost unavailability without replacing a known token total with zero", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: { status: "available", task: { totalTokens: 1_324_567, estimatedCostUsd: null } },
+    }));
+    expect(screen.getByText("1.32M tokens · cost unavailable")).toHaveAccessibleName(
+      /1,324,567 tokens; estimated cost unavailable/i,
+    );
+  });
+
+  test("keeps pending and calculating wording distinct and uses the restrained shimmer", () => {
+    const { rerender } = renderUsage();
+    expect(screen.getByText("Token usage pending")).toHaveClass("taskchef-shimmer");
+    rerender(
+      <MantineProvider>
+        <TaskUsageSummary task={fixtureTask({
+          status: "completed",
+          usage: { generationTurnRef: "turn-one", status: "calculating" },
+        })} />
+      </MantineProvider>,
+    );
+    expect(screen.getByText("Calculating token usage")).toHaveClass("taskchef-shimmer");
+  });
+
+  test("shows a quiet explicit unavailable state with the cache reason in its tooltip", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: { status: "unavailable", reason: "No matching cached boundary." },
+    }));
+    const summary = screen.getByText("Token usage unavailable");
+    expect(summary).toHaveAttribute("data-usage-state", "unavailable");
+    expect(summary).toHaveAttribute("title", "No matching cached boundary.");
+  });
+
+  test("places usage directly beneath the primary status badge in a responsive metadata block", () => {
+    const { container } = render(
+      <MantineProvider>
+        <TaskCard
+          onOpenCodex={vi.fn()}
+          onOpenDetail={vi.fn()}
+          task={fixtureTask()}
+        />
+      </MantineProvider>,
+    );
+    const metadata = container.querySelector(".taskchef-card-metadata");
+    expect(metadata).not.toBeNull();
+    expect(metadata?.children[0]).toHaveClass("taskchef-status-badge");
+    expect(metadata?.children[1]).toHaveClass("taskchef-task-usage");
+    expect(screen.getByRole("button", { name: /^review checkout reconciliation$/i })).toBeVisible();
+    expect(screen.getByRole("button", { name: /open chat/i })).toBeVisible();
+  });
+});

package/src/dashboard/react/components/TaskUsageSummary.tsx

@@ -0,0 +1,24 @@
+import { Text } from "@mantine/core";
+import type { Task } from "../types";
+import { listUsageView } from "../presentation";
+import { ShimmerText } from "./ShimmerText";
+
+export function TaskUsageSummary({ task }: { task: Task }) {
+  const usage = listUsageView(task);
+  const content = usage.kind === "pending" || usage.kind === "calculating"
+    ? <ShimmerText>{usage.label}</ShimmerText>
+    : usage.label;
+  return (
+    <Text
+      aria-label={usage.accessibleLabel}
+      aria-live="polite"
+      c="dimmed"
+      className="taskchef-task-usage"
+      data-usage-state={usage.kind}
+      size="xs"
+      title={usage.title}
+    >
+      {content}
+    </Text>
+  );
+}

package/src/dashboard/react/overlay-state.test.ts

@@ -1,7 +1,10 @@
 import { describe, expect, test } from "vitest";
+import { fixtureTask } from "./fixtures";
 import type { NotificationSnapshot } from "./types";
 import {
   clearNotificationHistory,
+  listUsageSignature,
+  mergeListTaskIntoDetail,
   notificationAppeared,
   notificationClicked,
   type OverlayState,
@@ -76,4 +79,32 @@ describe("overlay coordination", () => {
     const current = state({ detailTaskId: "task-one", detailOpened: true, notifications: [taskUpdate] });
     expect(clearNotificationHistory(current)).toEqual({ ...current, notifications: [] });
   });
+
+  test("a cache-only list update preserves rich detail usage and requests a refresh", () => {
+    const detail = fixtureTask({
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "available",
+        task: { totalTokens: 1200, estimatedCostUsd: 0.24, models: { "gpt-5": {} } },
+        turns: { "turn-one": { status: "available", totalTokens: 1200 } },
+        updatedAt: "2026-08-30T08:00:00.000Z",
+      },
+    });
+    const list = fixtureTask({
+      turns: undefined,
+      results: undefined,
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "available",
+        task: { totalTokens: 1800, estimatedCostUsd: 0.36 },
+        updatedAt: "2026-08-30T08:01:00.000Z",
+      },
+    });
+
+    const merged = mergeListTaskIntoDetail(detail, list);
+    expect(merged.usage).toBe(detail.usage);
+    expect(merged.turns).toBe(detail.turns);
+    expect(merged.results).toBe(detail.results);
+    expect(listUsageSignature(list)).not.toBe(listUsageSignature(detail));
+  });
 });

package/src/dashboard/react/overlay-state.ts

@@ -1,4 +1,4 @@
-import type { NotificationSnapshot } from "./types";
+import type { NotificationSnapshot, Task } from "./types";
 
 export interface OverlayState {
   detailTaskId: string | null;
@@ -36,3 +36,25 @@ export function notificationClicked(
 export function clearNotificationHistory(state: OverlayState): OverlayState {
   return { ...state, notifications: [] };
 }
+
+export function mergeListTaskIntoDetail(current: Task, updated: Task): Task {
+  const currentIsDetail = Array.isArray(current.turns) && Array.isArray(current.results);
+  const updatedIsList = !Array.isArray(updated.turns) && !Array.isArray(updated.results);
+  return {
+    ...current,
+    ...updated,
+    ...(currentIsDetail && updatedIsList
+      ? { results: current.results, turns: current.turns, usage: current.usage }
+      : {}),
+  };
+}
+
+export function listUsageSignature(task: Task | null | undefined): string {
+  return JSON.stringify([
+    task?.usage?.generationTurnRef ?? null,
+    task?.usage?.status ?? null,
+    task?.usage?.updatedAt ?? null,
+    task?.usage?.task?.totalTokens ?? null,
+    task?.usage?.task?.estimatedCostUsd ?? null,
+  ]);
+}

package/src/dashboard/react/presentation.ts

@@ -89,6 +89,53 @@ export function usageStillCalculating(task: Task) {
       || Object.values(task.usage?.turns ?? {}).some((turn) => turn.status === "calculating"));
 }
 
+export type ListUsageView = {
+  accessibleLabel: string;
+  kind: "pending" | "calculating" | "ready" | "unavailable";
+  label: string;
+  title: string;
+};
+
+export function listUsageView(task: Task): ListUsageView {
+  const view = usageView(task);
+  if (view.kind === "pending" || view.kind === "calculating") {
+    return {
+      accessibleLabel: view.label,
+      kind: view.kind,
+      label: view.label,
+      title: view.label,
+    };
+  }
+  if (view.kind === "unavailable") {
+    return {
+      accessibleLabel: `Token usage unavailable${view.label === "Token usage unavailable" ? "" : `: ${view.label}`}`,
+      kind: "unavailable",
+      label: "Token usage unavailable",
+      title: view.label,
+    };
+  }
+  const compactTokens = formatCompactTokens(view.usage.totalTokens);
+  const fullTokens = formatFullTokens(view.usage.totalTokens);
+  const cost = view.usage.estimatedCostUsd == null
+    ? "cost unavailable"
+    : `est. ${formatEstimatedCost(view.usage.estimatedCostUsd)}`;
+  const qualifier = view.knownSoFar ? " · known so far" : "";
+  const freshness = view.usage.sourceUpdatedAt ?? view.usage.sampledAt ?? task.usage?.updatedAt ?? null;
+  const freshnessLabel = freshness && !Number.isNaN(Date.parse(freshness))
+    ? ` Cached usage updated ${new Date(freshness).toLocaleString()}.`
+    : "";
+  return {
+    accessibleLabel: `${fullTokens} tokens; ${view.usage.estimatedCostUsd == null
+      ? "estimated cost unavailable"
+      : `estimated cost ${formatEstimatedCost(view.usage.estimatedCostUsd)}`}${view.knownSoFar ? "; known so far" : ""}.${freshnessLabel}`,
+    kind: "ready",
+    label: `${compactTokens} tokens · ${cost}${qualifier}`,
+    title: `${fullTokens} tokens · ${view.usage.estimatedCostUsd == null
+      ? "estimated cost unavailable"
+      : `unrounded estimate $${view.usage.estimatedCostUsd}`}${view.knownSoFar ? " · known so far" : ""}.${freshnessLabel}`,
+  };
+}
+
 export function statusColor(status: Task["status"] | "interrupted") {
   if (status === "completed") return "teal";
   if (status === "needs_input") return "yellow";

package/src/dashboard/react/styles.css

@@ -33,7 +33,10 @@ body {
 .taskchef-task-row { background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
 .taskchef-task-row:hover { border-color: light-dark(var(--mantine-color-teal-4), var(--mantine-color-teal-8)); }
 .taskchef-task-main { min-width: 0; flex: 1; }
+.taskchef-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--mantine-spacing-sm); }
+.taskchef-card-metadata { width: max-content; min-width: 0; max-width: min(25rem, 45vw); }
 .taskchef-status-badge { flex: none; }
+.taskchef-task-usage { max-width: 100%; text-align: right; line-height: 1.25; overflow-wrap: anywhere; }
 .taskchef-title-button {
   all: unset;
   border-radius: 3px;
@@ -125,4 +128,8 @@ body {
 @media (max-width: 34em) {
   .taskchef-header { padding-top: 22px; padding-bottom: 18px; }
   .taskchef-brand-icon, .taskchef-brand-icon img { width: 36px; height: 36px; }
+  .taskchef-card-heading { grid-template-columns: minmax(0, 1fr); }
+  .taskchef-card-metadata { align-items: flex-start; width: 100%; max-width: 100%; }
+  .taskchef-task-usage { text-align: left; }
+  .taskchef-card-footer { align-items: flex-start; flex-direction: column; }
 }

package/src/dashboard/react/types.ts

@@ -41,6 +41,8 @@ export interface UsageNumbers {
   reasoningOutputTokens?: number;
   totalTokens: number;
   estimatedCostUsd?: number | null;
+  sampledAt?: string | null;
+  sourceUpdatedAt?: string | null;
   models?: Record<string, unknown>;
 }
 
@@ -54,6 +56,7 @@ export interface UsageProjection {
   }>;
   reason?: string;
   message?: string;
+  updatedAt?: string | null;
 }
 
 export interface Task {