taskchef 8.0.0 → 8.1.0

package/src/dashboard/github-links.js

@@ -78,7 +78,15 @@ export function groupRelatedGitHubLinks(links) {
     group.push(link);
     groups.set(repository, group);
   }
-  return [...groups.values()].map((group) => [...group].sort(compareReferenceNumbers));
+  const collisions = collidingRepositoryBasenames(links ?? []);
+  return [...groups.values()]
+    .map((group) => [...group].sort(compareReferenceNumbers))
+    .sort((left, right) => {
+      const leftLabel = visibleRepositoryLabel(left[0], collisions);
+      const rightLabel = visibleRepositoryLabel(right[0], collisions);
+      return leftLabel.localeCompare(rightLabel, undefined, { sensitivity: "base" })
+        || repositoryIdentity(left[0]).localeCompare(repositoryIdentity(right[0]));
+    });
 }
 
 export function githubReferenceAccessibleLabel(link) {

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

@@ -9,19 +9,37 @@ export function RelativeTimeProvider({ children, now }: { children: ReactNode; n
   return <RelativeTimeClock value={now}>{children}</RelativeTimeClock>;
 }
 
-export function RelativeTime({ label, value }: { label: string; value: string | null | undefined }) {
+export function RelativeTime({
+  icon,
+  label,
+  value,
+}: {
+  icon?: ReactNode;
+  label: string;
+  value: string | null | undefined;
+}) {
   const [exact, setExact] = useState(false);
   useContext(RelativeTimeClock);
   const text = exact ? formatExactTime(value) : formatRelativeTime(value);
+  const exactText = formatExactTime(value);
+  const unavailable = exactText === "—";
+  const tooltip = exactText === "—"
+    ? "Updated time unavailable"
+    : exact
+      ? "Show relative time"
+      : `Exact time: ${exactText}. Show exact time`;
   return (
-    <Tooltip label={exact ? "Show relative time" : "Show exact time"}>
+    <Tooltip label={tooltip}>
       <UnstyledButton
-        aria-label={`${label}: ${text}. ${exact ? "Show relative time" : "Show exact time"}`}
+        aria-label={unavailable
+          ? `${label}: unavailable.`
+          : `${label}: ${text}. ${exact ? "Show relative time" : "Show exact time"}`}
         className="taskchef-time"
+        disabled={unavailable}
         onClick={() => setExact((value) => !value)}
       >
-        <IconClock aria-hidden size={12} />
-        <span className="taskchef-time-label">{text}</span>
+        {icon ?? <IconClock aria-hidden size={12} />}
+        <bdi className="taskchef-time-label">{text}</bdi>
       </UnstyledButton>
     </Tooltip>
   );

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

@@ -1,14 +1,12 @@
-import { Box, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Box, Paper, Stack, Text, Title } from "@mantine/core";
 import { latestTurnPresentation } from "../../state.js";
 import type { Task } from "../types";
-import { taskReportedWorkView } from "../presentation";
 import { GitHubLinks } from "./GitHubLinks";
 import { LinkedText } from "./LinkedText";
 import { OpenChatButton } from "./OpenChatButton";
-import { RelativeTime } from "./RelativeTime";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
-import { TaskUsageSummary } from "./TaskUsageSummary";
+import { TaskCardStats } from "./TaskCardStats";
 
 export function TaskCard({
   onOpenCodex,
@@ -20,7 +18,6 @@ export function TaskCard({
   task: Task;
 }) {
   const latest = latestTurnPresentation(task);
-  const reportedWork = taskReportedWorkView(task);
   return (
     <Paper className="taskchef-task-row" component="article" p="md" radius="md" withBorder>
       <Stack className="taskchef-task-main" gap="sm">
@@ -33,7 +30,7 @@ export function TaskCard({
               </Title>
               <Stack align="flex-end" className="taskchef-card-metadata" gap={4}>
                 <StatusBadge status={task.status} />
-                <TaskUsageSummary task={task} />
+                <OpenChatButton onClick={() => onOpenCodex(task)} taskTitle={task.title} />
               </Stack>
             </Box>
             <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
@@ -53,21 +50,7 @@ export function TaskCard({
           </Box>
 
           <GitHubLinks task={task} />
-          <Group className="taskchef-card-footer" gap="md" justify="space-between">
-            <Group className="taskchef-card-timing" gap="sm">
-              <RelativeTime label={`Updated time for ${task.title}`} value={task.meaningfulUpdatedAt ?? task.updatedAt} />
-              <Text
-                aria-label={reportedWork.accessibleLabel}
-                className="taskchef-card-duration"
-                size="xs"
-                title={reportedWork.title}
-              >
-                <span>Reported work</span>
-                <span>{reportedWork.value}</span>
-              </Text>
-            </Group>
-            <OpenChatButton onClick={() => onOpenCodex(task)} taskTitle={task.title} />
-          </Group>
+          <TaskCardStats task={task} />
       </Stack>
     </Paper>
   );

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

@@ -0,0 +1,122 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { TaskCard } from "./TaskCard";
+import { TaskCardStats } from "./TaskCardStats";
+
+afterEach(cleanup);
+
+function renderStats(task = fixtureTask()) {
+  return render(<MantineProvider><TaskCardStats task={task} /></MantineProvider>);
+}
+
+describe("task card stats", () => {
+  test("renders the four metrics in order with compact values and full accessibility", () => {
+    const { container } = renderStats(fixtureTask({
+      status: "completed",
+      turns: undefined,
+      reportedWork: { terminalTurns: 1, validTurns: 1, totalMilliseconds: 1_112_000 },
+      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 stats = container.querySelector(".taskchef-card-stats") as HTMLElement;
+    expect(stats).not.toBeNull();
+    const cells = [...stats.children] as HTMLElement[];
+    expect(cells).toHaveLength(4);
+    expect(within(cells[0]).getByLabelText(/updated time/i)).toBeVisible();
+    expect(within(cells[1]).getByLabelText(/reported work 18m 32s/i)).toBeVisible();
+    expect(within(cells[2]).getByLabelText(/1,324,567 tokens/i)).toHaveTextContent("1.32M tokens");
+    expect(within(cells[3]).getByLabelText(/estimated cost \$12\.34/i)).toHaveTextContent("est. $12.34");
+    expect(within(cells[2]).getByRole("status")).toHaveTextContent(/1,324,567 tokens.*estimated cost \$12\.34/i);
+  });
+
+  test("keeps known tokens when cost is missing and never substitutes zero", () => {
+    renderStats(fixtureTask({
+      status: "completed",
+      usage: { status: "available", task: { totalTokens: 1_324_567, estimatedCostUsd: null } },
+    }));
+    expect(screen.getByLabelText(/1,324,567 tokens/i)).toHaveTextContent("1.32M tokens");
+    expect(screen.getByLabelText(/estimated cost unavailable/i)).toHaveTextContent("est. n/a");
+  });
+
+  test("shows metric details to keyboard users on focus", () => {
+    vi.useFakeTimers();
+    renderStats(fixtureTask({
+      status: "completed",
+      usage: { status: "available", task: { totalTokens: 1_324_567, estimatedCostUsd: 12.3449 } },
+    }));
+    const cost = screen.getByLabelText(/estimated cost \$12\.34/i);
+    fireEvent.focus(cost);
+    vi.advanceTimersByTime(150);
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Unrounded estimate: $12.3449");
+    vi.useRealTimers();
+  });
+
+  test("shows pending, calculating, and unavailable states in both usage cells", () => {
+    const { rerender } = renderStats();
+    expect(screen.getByLabelText("Tokens pending")).toHaveTextContent("Pending");
+    expect(screen.getByLabelText("Estimated cost pending")).toHaveTextContent("Pending");
+    expect(screen.getAllByText("Pending").every((node) => node.classList.contains("taskchef-shimmer"))).toBe(true);
+
+    rerender(<MantineProvider><TaskCardStats task={fixtureTask({
+      status: "completed",
+      usage: { generationTurnRef: "turn-one", status: "calculating" },
+    })} /></MantineProvider>);
+    expect(screen.getByLabelText("Tokens calculating")).toHaveTextContent("Calculating");
+    expect(screen.getByLabelText("Estimated cost calculating")).toHaveTextContent("Calculating");
+
+    rerender(<MantineProvider><TaskCardStats task={fixtureTask({
+      status: "completed",
+      usage: { status: "unavailable", reason: "No matching cached boundary." },
+    })} /></MantineProvider>);
+    expect(screen.getByLabelText(/token usage unavailable: no matching/i)).toHaveTextContent("n/a tokens");
+    expect(screen.getByLabelText(/estimated cost unavailable: no matching/i)).toHaveTextContent("est. n/a");
+  });
+
+  test("retains known totals and marks both usage values as updating", () => {
+    renderStats(fixtureTask({
+      status: "working",
+      turnRef: "turn-two",
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "calculating",
+        task: { totalTokens: 1_324_567, estimatedCostUsd: 12.3449 },
+      },
+    }));
+    expect(screen.getByLabelText(/1,324,567 tokens; updating/i)).toHaveTextContent("1.32M tokens · Updating…");
+    expect(screen.getByLabelText(/estimated cost \$12\.34; updating/i)).toHaveTextContent("est. $12.34 · Updating…");
+  });
+
+  test("places Open chat beneath the status badge and keeps callbacks working", () => {
+    const openChat = vi.fn();
+    const openDetail = vi.fn();
+    const { container } = render(<MantineProvider><TaskCard
+      onOpenCodex={openChat}
+      onOpenDetail={openDetail}
+      task={fixtureTask()}
+    /></MantineProvider>);
+    const metadata = container.querySelector(".taskchef-card-metadata") as HTMLElement;
+    expect(metadata.children[0]).toHaveClass("taskchef-status-badge");
+    expect(within(metadata).getByRole("button", { name: /open chat/i })).toBe(metadata.children[1]);
+    fireEvent.click(within(metadata).getByRole("button", { name: /open chat/i }));
+    fireEvent.click(screen.getByRole("button", { name: /^review checkout reconciliation$/i }));
+    expect(openChat).toHaveBeenCalledOnce();
+    expect(openDetail).toHaveBeenCalledOnce();
+  });
+
+  test("toggles the updated time while keeping the selected History icon", () => {
+    const { container } = renderStats(fixtureTask({ meaningfulUpdatedAt: "2026-08-30T08:00:00.000Z" }));
+    const time = screen.getByLabelText(/updated time for review checkout reconciliation/i);
+    expect(container.querySelector(".tabler-icon-history")).not.toBeNull();
+    fireEvent.click(time);
+    expect(time).toHaveAccessibleName(/show relative time/i);
+  });
+});

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

@@ -0,0 +1,86 @@
+import { Box, Text, Tooltip } from "@mantine/core";
+import {
+  IconCurrencyDollar,
+  IconHistory,
+  IconHourglass,
+  IconStack2,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import type { Task } from "../types";
+import { listUsageMetricsView, taskReportedWorkView } from "../presentation";
+import { RelativeTime } from "./RelativeTime";
+import { ShimmerText } from "./ShimmerText";
+
+function StaticStat({
+  accessibleLabel,
+  animated = false,
+  icon,
+  title,
+  value,
+}: {
+  accessibleLabel: string;
+  animated?: boolean;
+  icon: ReactNode;
+  title: string;
+  value: string;
+}) {
+  return (
+    <Tooltip events={{ focus: true, hover: true, touch: false }} label={title} multiline>
+      <Text
+        aria-label={accessibleLabel}
+        className="taskchef-card-stat-content"
+        component="span"
+        size="xs"
+        tabIndex={0}
+      >
+        {icon}
+        <bdi>{animated ? <ShimmerText>{value}</ShimmerText> : value}</bdi>
+      </Text>
+    </Tooltip>
+  );
+}
+
+export function TaskCardStats({ task }: { task: Task }) {
+  const reportedWork = taskReportedWorkView(task);
+  const usage = listUsageMetricsView(task);
+  return (
+    <Box className="taskchef-card-stats" component="div">
+      <Box className="taskchef-card-stat">
+        <RelativeTime
+          icon={<IconHistory aria-hidden size={14} />}
+          label={`Updated time for ${task.title}`}
+          value={task.meaningfulUpdatedAt ?? task.updatedAt}
+        />
+      </Box>
+      <Box className="taskchef-card-stat">
+        <StaticStat
+          accessibleLabel={reportedWork.accessibleLabel}
+          icon={<IconHourglass aria-hidden size={14} />}
+          title={reportedWork.title}
+          value={reportedWork.value}
+        />
+      </Box>
+      <Box className="taskchef-card-stat" data-usage-state={usage.kind}>
+        <StaticStat
+          accessibleLabel={usage.tokens.accessibleLabel}
+          animated={usage.animated}
+          icon={<IconStack2 aria-hidden size={14} />}
+          title={usage.tokens.title}
+          value={usage.tokens.value}
+        />
+        <Text className="taskchef-visually-hidden" component="span" role="status">
+          {usage.tokens.accessibleLabel}; {usage.cost.accessibleLabel}
+        </Text>
+      </Box>
+      <Box className="taskchef-card-stat" data-usage-state={usage.kind}>
+        <StaticStat
+          accessibleLabel={usage.cost.accessibleLabel}
+          animated={usage.animated}
+          icon={<IconCurrencyDollar aria-hidden size={14} />}
+          title={usage.cost.title}
+          value={usage.cost.value}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/dashboard/react/presentation.test.tsx

@@ -271,9 +271,9 @@ describe("token and working presentation", () => {
     const groups = container.querySelectorAll(".taskchef-github-group");
     expect(groups).toHaveLength(2);
     expect(within(groups[0] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
-      .toEqual(["taskchef #79", "#80", "#83"]);
-    expect(within(groups[1] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
       .toEqual(["guzuoshou-workspace #108", "#109", "#124"]);
+    expect(within(groups[1] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
+      .toEqual(["taskchef #79", "#80", "#83"]);
     const first = screen.getByRole("link", { name: /favoyang\/taskchef Issue #79/ });
     expect(first).toHaveAttribute("href", "https://github.com/favoyang/taskchef/issues/79");
     expect(first).toHaveAttribute("target", "_blank");

package/src/dashboard/react/presentation.ts

@@ -237,36 +237,60 @@ export function usageStillCalculating(task: Task) {
       || Object.values(task.usage?.turns ?? {}).some((turn) => turn.status === "calculating"));
 }
 
-export type ListUsageView = {
+export type ListUsageMetric = {
   accessibleLabel: string;
-  kind: "pending" | "calculating" | "ready" | "unavailable";
-  label: string;
   title: string;
+  value: string;
+};
+
+export type ListUsageMetricsView = {
+  animated: boolean;
+  cost: ListUsageMetric;
+  kind: "pending" | "calculating" | "ready" | "unavailable";
+  tokens: ListUsageMetric;
 };
 
-export function listUsageView(task: Task): ListUsageView {
+export function listUsageMetricsView(task: Task): ListUsageMetricsView {
   const view = usageView(task);
   if (view.kind === "pending" || view.kind === "calculating") {
+    const value = view.kind === "pending" ? "Pending" : "Calculating";
     return {
-      accessibleLabel: view.label,
+      animated: true,
+      cost: {
+        accessibleLabel: `Estimated cost ${value.toLowerCase()}`,
+        title: view.label,
+        value,
+      },
       kind: view.kind,
-      label: view.label,
-      title: view.label,
+      tokens: {
+        accessibleLabel: `Tokens ${value.toLowerCase()}`,
+        title: view.label,
+        value,
+      },
     };
   }
   if (view.kind === "unavailable") {
+    const reason = view.label === "Token usage unavailable" ? "" : `: ${view.label}`;
     return {
-      accessibleLabel: `Token usage unavailable${view.label === "Token usage unavailable" ? "" : `: ${view.label}`}`,
+      animated: false,
+      cost: {
+        accessibleLabel: `Estimated cost unavailable${reason}`,
+        title: view.label,
+        value: "est. n/a",
+      },
       kind: "unavailable",
-      label: `${NOT_AVAILABLE} tokens`,
-      title: view.label,
+      tokens: {
+        accessibleLabel: `Token usage unavailable${reason}`,
+        title: view.label,
+        value: `${NOT_AVAILABLE} tokens`,
+      },
     };
   }
   const compactTokens = formatCompactTokens(view.usage.totalTokens);
   const fullTokens = formatFullTokens(view.usage.totalTokens);
-  const cost = view.usage.estimatedCostUsd == null
-    ? "cost n/a"
-    : `est. ${formatEstimatedCost(view.usage.estimatedCostUsd)}`;
+  const hasCost = typeof view.usage.estimatedCostUsd === "number"
+    && Number.isFinite(view.usage.estimatedCostUsd);
+  const formattedCost = hasCost ? formatEstimatedCost(view.usage.estimatedCostUsd) : null;
   const qualifier = view.knownSoFar ? " · Updating…" : "";
   const accessibleQualifier = view.knownSoFar ? "; updating" : "";
   const freshness = view.usage.sourceUpdatedAt ?? view.usage.sampledAt ?? task.usage?.updatedAt ?? null;
@@ -274,14 +298,20 @@ export function listUsageView(task: Task): ListUsageView {
     ? ` Cached usage updated ${new Date(freshness).toLocaleString()}.`
     : "";
   return {
-    accessibleLabel: `${fullTokens} tokens; ${view.usage.estimatedCostUsd == null
-      ? "estimated cost unavailable"
-      : `estimated cost ${formatEstimatedCost(view.usage.estimatedCostUsd)}`}${accessibleQualifier}.${freshnessLabel}`,
+    animated: false,
+    cost: {
+      accessibleLabel: `Estimated cost ${formattedCost ?? "unavailable"}${accessibleQualifier}.${freshnessLabel}`,
+      title: `${formattedCost === null
+        ? "Estimated cost unavailable"
+        : `Unrounded estimate: $${view.usage.estimatedCostUsd}`}${qualifier}.${freshnessLabel}`,
+      value: `${formattedCost === null ? "est. n/a" : `est. ${formattedCost}`}${qualifier}`,
+    },
     kind: "ready",
-    label: `${compactTokens} tokens · ${cost}${qualifier}`,
-    title: `${fullTokens} tokens · ${view.usage.estimatedCostUsd == null
-      ? "estimated cost unavailable"
-      : `unrounded estimate $${view.usage.estimatedCostUsd}`}${qualifier}.${freshnessLabel}`,
+    tokens: {
+      accessibleLabel: `${fullTokens} tokens${accessibleQualifier}.${freshnessLabel}`,
+      title: `${fullTokens} tokens${qualifier}.${freshnessLabel}`,
+      value: `${compactTokens} tokens${qualifier}`,
+    },
   };
 }
 

package/src/dashboard/react/styles.css

@@ -31,13 +31,12 @@ body {
 .taskchef-toolbar .mantine-InputWrapper-label, .taskchef-filter-label { font-size: var(--mantine-font-size-sm); font-weight: 600; line-height: var(--mantine-line-height-sm); }
 .taskchef-toolbar .mantine-SegmentedControl-root { max-width: 650px; }
 .taskchef-results-summary { margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
-.taskchef-task-row { background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
+.taskchef-task-row { container-type: inline-size; 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-card-metadata { width: max-content; min-width: 0; max-width: min(25rem, 45cqw); }
 .taskchef-status-badge { flex: none; font-size: var(--mantine-font-size-xs); }
-.taskchef-task-usage { max-width: 100%; text-align: right; overflow-wrap: anywhere; }
 .taskchef-title-button {
   all: unset;
   border-radius: 3px;
@@ -57,12 +56,15 @@ body {
 .taskchef-github-group { min-width: 0; }
 .taskchef-github-reference-ambiguous { border-bottom: 2px dotted var(--mantine-color-yellow-7); cursor: help; }
 .taskchef-github-reference-ambiguous:focus-visible { outline: 2px solid var(--mantine-color-yellow-7); outline-offset: 2px; }
-.taskchef-time, .taskchef-card-duration { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 3px; border-radius: 4px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); font-weight: 400; letter-spacing: normal; line-height: var(--mantine-line-height-xs); text-transform: none; }
+.taskchef-time, .taskchef-card-stat-content { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 3px 4px; border-radius: 4px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); font-weight: 400; letter-spacing: normal; line-height: var(--mantine-line-height-xs); text-transform: none; }
 .taskchef-time:hover { color: var(--taskchef-text); background: var(--taskchef-surface-muted); }
 .taskchef-time:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
-.taskchef-time-label { white-space: nowrap; }
-.taskchef-card-timing { min-width: 0; flex-wrap: wrap; }
-.taskchef-card-duration { min-width: 0; white-space: nowrap; }
+.taskchef-time-label, .taskchef-card-stat-content bdi { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
+.taskchef-card-stat-content:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
+.taskchef-card-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2px; }
+.taskchef-card-stat { display: flex; align-items: center; min-width: 0; padding: 4px 10px; }
+.taskchef-card-stat:first-child { padding-inline-start: 0; }
+.taskchef-card-stat + .taskchef-card-stat { border-inline-start: 1px solid var(--taskchef-border); }
 .taskchef-empty { border-style: dashed; background: transparent; }
 
 .taskchef-notifications {
@@ -137,10 +139,13 @@ 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; }
+}
+
+@container (max-width: 27.5rem) {
+  .taskchef-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .taskchef-card-stat { padding-block: 8px; }
+  .taskchef-card-stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
+  .taskchef-card-stat:nth-child(n + 3) { border-top: 1px solid var(--taskchef-border); }
 }
 
 .taskchef-refresh-spinning {

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

@@ -1,122 +0,0 @@
-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 n/a")).toHaveAccessibleName(
-      /1,324,567 tokens; estimated cost unavailable/i,
-    );
-  });
-
-  test("keeps the known task total visible while an active turn updates usage", () => {
-    renderUsage(fixtureTask({
-      status: "working",
-      turnRef: "turn-two",
-      usage: {
-        generationTurnRef: "turn-one",
-        status: "unavailable",
-        reason: "Token usage calculation was interrupted.",
-        task: { totalTokens: 1_324_567, estimatedCostUsd: 12.3449 },
-      },
-    }));
-    const summary = screen.getByText("1.32M tokens · est. $12.34 · Updating…");
-    expect(summary).toHaveAttribute("data-usage-state", "ready");
-    expect(summary).toHaveAccessibleName(/1,324,567 tokens; estimated cost \$12\.34; updating/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("n/a tokens");
-    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();
-  });
-
-  test("places reported work beside the updated time with matching typography", () => {
-    const { container } = render(
-      <MantineProvider>
-        <TaskCard
-          onOpenCodex={vi.fn()}
-          onOpenDetail={vi.fn()}
-          task={fixtureTask({
-            turns: undefined,
-            reportedWork: { terminalTurns: 1, validTurns: 1, totalMilliseconds: 1_112_000 },
-          })}
-        />
-      </MantineProvider>,
-    );
-    const timing = container.querySelector(".taskchef-card-timing");
-    expect(timing).not.toBeNull();
-    expect(timing?.children[0]).toHaveClass("taskchef-time");
-    expect(timing?.children[1]).toHaveClass("taskchef-card-duration");
-    expect(screen.getByText("Reported work")).not.toHaveClass("taskchef-field-label");
-    expect(timing?.children[1]?.lastChild).toHaveTextContent("18m 32s");
-  });
-});

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

@@ -1,24 +0,0 @@
-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>
-  );
-}