taskchef 7.26.0 → 7.27.0

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

@@ -31,7 +31,10 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
             <Stack gap={7}>
               <Box className="taskchef-turn-heading">
                 <StatusBadge status={presentation.status} />
-                <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+                <Box className="taskchef-turn-timing">
+                  <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+                  <TurnReportedWork turn={turn} />
+                </Box>
               </Box>
               {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
               <Box>
@@ -63,7 +66,6 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                   title={usage.title}
                   value={usage.cost.value}
                 />
-                <TurnReportedWorkMetric turn={turn} />
               </Box>
               {usage.note && <Text c="dimmed" size="xs">{usage.note}</Text>}
               <Text c="dimmed" className="taskchef-mono" size="xs">Turn ref: {identity ?? "—"}</Text>
@@ -75,16 +77,20 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
   );
 }
 
-function TurnReportedWorkMetric({ turn }: { turn: TaskTurn }) {
+function TurnReportedWork({ turn }: { turn: TaskTurn }) {
   const now = useLiveNow(turn.result === null);
   const elapsed = turnReportedWorkView(turn, now);
   return (
-    <TurnMetric
-      accessibleLabel={elapsed.accessibleLabel}
-      label={elapsed.label}
+    <Text
+      aria-label={elapsed.accessibleLabel}
+      c="dimmed"
+      className="taskchef-turn-duration"
+      size="xs"
       title={elapsed.title}
-      value={elapsed.value}
-    />
+    >
+      <span className="taskchef-field-label">{elapsed.label}</span>
+      <span>{elapsed.value}</span>
+    </Text>
   );
 }
 

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

@@ -1,6 +1,7 @@
 import { Box, Group, 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";
@@ -19,6 +20,7 @@ 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">
@@ -52,7 +54,18 @@ export function TaskCard({
 
           <GitHubLinks task={task} />
           <Group className="taskchef-card-footer" gap="md" justify="space-between">
-            <RelativeTime label={`Updated time for ${task.title}`} value={task.meaningfulUpdatedAt ?? task.updatedAt} />
+            <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>
       </Stack>

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

@@ -70,11 +70,15 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     <MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>,
   );
   const metrics = container.querySelector(".taskchef-turn-metrics") as HTMLElement;
+  const timing = container.querySelector(".taskchef-turn-timing") as HTMLElement;
   expect(metrics).not.toBeNull();
+  expect(timing).not.toBeNull();
   expect(within(metrics).getByText("Tokens").nextSibling).toHaveTextContent("330");
   expect(within(metrics).getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
-  expect(within(metrics).getByText("Elapsed").nextSibling).toHaveTextContent("18m 32s");
-  expect(within(metrics).getByLabelText(/completed turn reported wall-clock elapsed time/i)).toBeVisible();
+  expect(within(metrics).queryByText("Elapsed")).not.toBeInTheDocument();
+  expect(within(timing).getByLabelText(/^Turn update time:/i)).toBeVisible();
+  expect(within(timing).getByLabelText(/completed turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed18m 32s");
   cleanup();
   }
 
@@ -89,7 +93,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   vi.spyOn(window, "clearInterval").mockImplementation(() => undefined);
   const task = fixtureTask();
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
-  expect(screen.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 32s");
+  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed so far18m 32s");
   expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("Pending");
   expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("Pending");
 
@@ -98,7 +103,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     tick?.();
   });
 
-  expect(screen.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 34s");
+  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed so far18m 34s");
   cleanup();
   vi.restoreAllMocks();
   }
@@ -126,8 +132,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     },
   });
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
-  expect(screen.getByText("Elapsed").nextSibling).toHaveTextContent("Unavailable");
-  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i)).toBeVisible();
+  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i))
+    .toHaveTextContent("Elapsedn/a");
   expect(screen.getByText("Manual dashboard turns do not have usage boundaries.")).toBeVisible();
   expect(screen.getByLabelText(/tokens unavailable: manual dashboard turns/i)).toBeVisible();
   }

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

@@ -36,7 +36,7 @@ describe("task list usage summary", () => {
       status: "completed",
       usage: { status: "available", task: { totalTokens: 1_324_567, estimatedCostUsd: null } },
     }));
-    expect(screen.getByText("1.32M tokens · cost unavailable")).toHaveAccessibleName(
+    expect(screen.getByText("1.32M tokens · cost n/a")).toHaveAccessibleName(
       /1,324,567 tokens; estimated cost unavailable/i,
     );
   });
@@ -76,7 +76,7 @@ describe("task list usage summary", () => {
       status: "completed",
       usage: { status: "unavailable", reason: "No matching cached boundary." },
     }));
-    const summary = screen.getByText("Token usage unavailable");
+    const summary = screen.getByText("n/a tokens");
     expect(summary).toHaveAttribute("data-usage-state", "unavailable");
     expect(summary).toHaveAttribute("title", "No matching cached boundary.");
   });
@@ -98,4 +98,25 @@ describe("task list usage summary", () => {
     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/UsagePanel.tsx

@@ -17,12 +17,14 @@ export function UsagePanel({ task }: { task: Task }) {
   const input = ready?.usage.inputTokens ?? 0;
   const cacheRatio = ready && input + cached > 0
     ? `${Math.round((cached / (input + cached)) * 100)}%`
-    : "—";
+    : "n/a";
+  const models = Object.keys(ready?.usage.models ?? {}).join(", ");
   const stateValue = usage.kind === "pending"
     ? "Pending"
     : usage.kind === "calculating"
       ? "Calculating"
-      : "Unavailable";
+      : "n/a";
+  const accessibleState = usage.kind === "unavailable" ? "unavailable" : stateValue.toLowerCase();
   const values: Array<{
     accessibleValue?: string;
     animated?: boolean;
@@ -44,25 +46,37 @@ export function UsagePanel({ task }: { task: Task }) {
         ? ready.usage.estimatedCostUsd == null
           ? "Estimated cost unavailable"
           : `Estimated cost ${formatEstimatedCost(ready.usage.estimatedCostUsd)}`
-        : `Estimated cost ${stateValue.toLowerCase()}${
+        : `Estimated cost ${accessibleState}${
           usage.kind === "unavailable" ? `: ${usage.label}` : ""
         }`,
       animated: usage.kind === "pending" || usage.kind === "calculating",
       label: "Estimated cost",
       title: ready?.usage.estimatedCostUsd == null
-        ? usage.label
+        ? "Estimated cost unavailable"
         : `Unrounded estimate: $${ready.usage.estimatedCostUsd}`,
-      value: ready ? formatEstimatedCost(ready.usage.estimatedCostUsd) : stateValue,
+      value: ready
+        ? ready.usage.estimatedCostUsd == null ? "n/a" : formatEstimatedCost(ready.usage.estimatedCostUsd)
+        : stateValue,
     },
     {
       accessibleValue: reportedWork.accessibleLabel,
-      label: "Total reported work",
+      label: "Reported work",
       title: reportedWork.title,
       value: reportedWork.value,
     },
     ...(ready ? [
-      { label: "Model", value: Object.keys(ready.usage.models ?? {}).join(", ") || "—" },
-      { label: "Cache ratio", value: cacheRatio },
+      {
+        accessibleValue: models || "Model unavailable",
+        label: "Model",
+        title: models || "Model unavailable",
+        value: models || "n/a",
+      },
+      {
+        accessibleValue: cacheRatio === "n/a" ? "Cache ratio unavailable" : `Cache ratio ${cacheRatio}`,
+        label: "Cache ratio",
+        title: cacheRatio === "n/a" ? "Cache ratio unavailable because no input-token total is available." : undefined,
+        value: cacheRatio,
+      },
     ] : []),
   ];
   return (
@@ -83,7 +97,7 @@ export function UsagePanel({ task }: { task: Task }) {
           </Paper>
         ))}
       </Box>
-      {usage.kind === "unavailable" && (
+      {usage.kind === "unavailable" && usage.label !== "Token usage unavailable" && (
         <Text c="dimmed" mt="xs" size="xs">{usage.label}</Text>
       )}
     </Box>

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

@@ -139,13 +139,34 @@ describe("token and working presentation", () => {
 
     expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("330");
     expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
-    expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("18m 32s");
-    expect(screen.getByLabelText(/total reported work 18m 32s.*wall-clock/i)).toBeVisible();
+    expect(screen.getByText("Reported work").nextSibling).toHaveTextContent("18m 32s");
+    expect(screen.getByLabelText(/reported work 18m 32s.*wall-clock/i)).toBeVisible();
     expect(screen.getByText("Model").nextSibling).toHaveTextContent("gpt-5.6-sol, gpt-5.6-luna");
     expect(screen.getByText("Cache ratio").nextSibling).toHaveTextContent("67%");
     expect(screen.queryByText(/API-equivalent/i)).not.toBeInTheDocument();
   });
 
+  test("uses n/a for missing ready usage metrics with explanatory accessibility", () => {
+    render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          status: "completed",
+          usage: {
+            status: "available",
+            task: { totalTokens: 330, estimatedCostUsd: null },
+          },
+        })} />
+      </MantineProvider>,
+    );
+
+    expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("n/a");
+    expect(screen.getByLabelText("Estimated cost unavailable")).toBeVisible();
+    expect(screen.getByText("Model").nextSibling).toHaveTextContent("n/a");
+    expect(screen.getByLabelText("Model unavailable")).toBeVisible();
+    expect(screen.getByText("Cache ratio").nextSibling).toHaveTextContent("n/a");
+    expect(screen.getByLabelText("Cache ratio unavailable")).toBeVisible();
+  });
+
   test("keeps reported work visible across pending, calculating, and unavailable usage", () => {
     for (const [task, expected, accessibleCost] of [
       [fixtureTask(), "Pending", "Estimated cost pending"],
@@ -156,7 +177,7 @@ describe("token and working presentation", () => {
       ],
       [
         fixtureTask({ status: "completed", usage: { status: "unavailable" } }),
-        "Unavailable",
+        "n/a",
         "Estimated cost unavailable: Token usage unavailable",
       ],
     ] as const) {
@@ -164,7 +185,7 @@ describe("token and working presentation", () => {
       expect(screen.getByText("Tokens").nextSibling).toHaveTextContent(expected);
       expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent(expected);
       expect(screen.getByLabelText(accessibleCost)).toBeVisible();
-      expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("Not yet reported");
+      expect(screen.getByText("Reported work").nextSibling).toHaveTextContent("n/a");
       cleanup();
     }
   });
@@ -343,14 +364,14 @@ describe("reported wall-clock work presentation", () => {
         result: { status: "completed", summary: "Done", updatedAt: "2026-08-30T08:00:00.000Z" },
       }],
     });
-    expect(taskReportedWorkView(invalid)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    expect(taskReportedWorkView(invalid)).toMatchObject({ kind: "unavailable", value: "n/a" });
     expect(durationBetween("2026-08-30T08:01:00.000Z", "2026-08-30T08:00:00.000Z")).toBeNull();
     expect(durationBetween("2026-02-30T08:00:00.000Z", "2026-03-02T08:01:00.000Z")).toBeNull();
     expect(durationBetween("March 2, 2026 08:00:00 UTC", "2026-03-02T08:01:00.000Z")).toBeNull();
     expect(turnReportedWorkView(invalid.turns![0])).toMatchObject({
       kind: "unavailable",
       label: "Elapsed",
-      value: "Unavailable",
+      value: "n/a",
     });
     }
 
@@ -374,9 +395,9 @@ describe("reported wall-clock work presentation", () => {
       provenance: { kind: "mcp" },
     };
     for (const turn of [legacyTurn, terminalOnlyTurn]) {
-      expect(turnReportedWorkView(turn)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+      expect(turnReportedWorkView(turn)).toMatchObject({ kind: "unavailable", value: "n/a" });
       expect(taskReportedWorkView(fixtureTask({ status: "completed", turns: [turn] })))
-        .toMatchObject({ kind: "unavailable", value: "Unavailable" });
+        .toMatchObject({ kind: "unavailable", value: "n/a" });
     }
     }
 
@@ -393,7 +414,7 @@ describe("reported wall-clock work presentation", () => {
         updatedAt: "2026-08-30T08:00:00.000Z",
       },
     };
-    expect(turnReportedWorkView(observed)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    expect(turnReportedWorkView(observed)).toMatchObject({ kind: "unavailable", value: "n/a" });
     expect(turnReportedWorkView({
       ...observed,
       result: { ...observed.result, updatedAt: "2026-08-30T08:00:00.500Z" },
@@ -415,10 +436,14 @@ describe("reported wall-clock work presentation", () => {
     });
     expect(taskReportedWorkView(compactTerminal)).toMatchObject({
       kind: "unavailable",
-      value: "Unavailable",
+      value: "n/a",
     });
+    expect(taskReportedWorkView({
+      ...compactTerminal,
+      reportedWork: { terminalTurns: 1, validTurns: 1, totalMilliseconds: 1_112_000 },
+    })).toMatchObject({ kind: "available", value: "18m 32s" });
     render(<MantineProvider><UsagePanel task={compactTerminal} /></MantineProvider>);
-    expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("Unavailable");
+    expect(screen.getByText("Reported work").nextSibling).toHaveTextContent("n/a");
     cleanup();
     }
 
@@ -436,7 +461,7 @@ describe("reported wall-clock work presentation", () => {
       turns: undefined,
       lastResult: priorResult,
       results: undefined,
-    }))).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    }))).toMatchObject({ kind: "unavailable", value: "n/a" });
     }
 
     {

package/src/dashboard/react/presentation.ts

@@ -1,49 +1,17 @@
 import type { Task, TaskTurn, UsageNumbers, UsageProjection } from "./types";
+import {
+  durationBetween,
+  reportedWorkSummary,
+  terminalTurnDuration,
+} from "../../reported-work.js";
+
+export { durationBetween };
 
 const SECOND_MS = 1_000;
 const MINUTE_MS = 60 * SECOND_MS;
 const HOUR_MS = 60 * MINUTE_MS;
 const DAY_MS = 24 * HOUR_MS;
-
-export function durationBetween(startedAt: unknown, endedAt: unknown) {
-  const start = parseLifecycleTimestamp(startedAt);
-  const end = parseLifecycleTimestamp(endedAt);
-  if (start === null || end === null) return null;
-  const duration = end - start;
-  return duration >= 0 ? duration : null;
-}
-
-function parseLifecycleTimestamp(value: unknown) {
-  if (typeof value !== "string") return null;
-  const match = value.match(
-    /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?(Z|[+-]\d{2}:\d{2})$/,
-  );
-  if (!match) return null;
-  const [, yearText, monthText, dayText, hourText, minuteText, secondText, , zone] = match;
-  const year = Number(yearText);
-  const month = Number(monthText);
-  const day = Number(dayText);
-  const hour = Number(hourText);
-  const minute = Number(minuteText);
-  const second = Number(secondText);
-  const zoneHour = zone === "Z" ? 0 : Number(zone.slice(1, 3));
-  const zoneMinute = zone === "Z" ? 0 : Number(zone.slice(4, 6));
-  const leapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
-  const daysInMonth = [31, leapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-  if (
-    month < 1
-    || month > 12
-    || day < 1
-    || day > daysInMonth[month - 1]
-    || hour > 23
-    || minute > 59
-    || second > 59
-    || zoneHour > 23
-    || zoneMinute > 59
-  ) return null;
-  const parsed = Date.parse(value);
-  return Number.isFinite(parsed) ? parsed : null;
-}
+const NOT_AVAILABLE = "n/a";
 
 export function formatReportedDuration(milliseconds: number) {
   if (!Number.isFinite(milliseconds) || milliseconds < 0) return null;
@@ -69,49 +37,50 @@ export type ReportedWorkView = {
 };
 
 export function taskReportedWorkView(task: Task): ReportedWorkView {
-  if (task.turns === undefined) {
+  const summary = task.turns === undefined
+    ? task.reportedWork
+    : reportedWorkSummary(task.turns ?? []);
+  if (summary === undefined) {
     return {
-      accessibleLabel: "Total reported work unavailable because terminal turn history is not available.",
+      accessibleLabel: "Reported work unavailable because terminal turn history is not available.",
       kind: "unavailable",
       title: "Reported wall-clock elapsed time requires the terminal turn history from the task detail projection.",
-      value: "Unavailable",
+      value: NOT_AVAILABLE,
     };
   }
-  const terminalTurns = (task.turns ?? []).filter((turn) => turn.result !== null);
-  if (terminalTurns.length === 0) {
+  if (summary.terminalTurns === 0) {
     return {
-      accessibleLabel: "Total reported work not yet reported. Unfinished turns are excluded.",
+      accessibleLabel: "Reported work not yet reported. Unfinished turns are excluded.",
       kind: "not-reported",
       title: "Reported wall-clock elapsed time is added only after a turn reaches a terminal state.",
-      value: "Not yet reported",
+      value: NOT_AVAILABLE,
     };
   }
-  const durations = terminalTurns.map(terminalTurnDuration);
-  const validDurations = durations.filter((duration): duration is number => duration !== null);
-  if (validDurations.length === 0) {
+  if (summary.validTurns === 0) {
     return {
-      accessibleLabel: "Total reported work unavailable because completed turn timestamps are missing or invalid.",
+      accessibleLabel: "Reported work unavailable because completed turn timestamps are missing or invalid.",
       kind: "unavailable",
       title: "Reported wall-clock elapsed time is unavailable because no terminal turn has a valid start and end timestamp.",
-      value: "Unavailable",
+      value: NOT_AVAILABLE,
     };
   }
-  const total = validDurations.reduce((sum, duration) => sum + duration, 0);
-  const value = Number.isSafeInteger(total) ? formatReportedDuration(total) : null;
+  const value = summary.totalMilliseconds === null
+    ? null
+    : formatReportedDuration(summary.totalMilliseconds);
   if (value === null) {
     return {
-      accessibleLabel: "Total reported work unavailable because the duration total is outside the supported range.",
+      accessibleLabel: "Reported work unavailable because the duration total is outside the supported range.",
       kind: "unavailable",
       title: "Reported wall-clock elapsed time is unavailable because the duration total is outside the supported range.",
-      value: "Unavailable",
+      value: NOT_AVAILABLE,
     };
   }
-  const excluded = terminalTurns.length - validDurations.length;
+  const excluded = summary.terminalTurns - summary.validTurns;
   const exclusion = excluded > 0
     ? ` ${excluded} terminal ${excluded === 1 ? "turn was" : "turns were"} unavailable and excluded.`
     : "";
   return {
-    accessibleLabel: `Total reported work ${value}. This is reported wall-clock elapsed time.${exclusion}`,
+    accessibleLabel: `Reported work ${value}. This is reported wall-clock elapsed time.${exclusion}`,
     kind: "available",
     title: `Sum of valid terminal-turn wall-clock elapsed times; unfinished turns and idle gaps are excluded.${exclusion}`,
     value,
@@ -124,9 +93,9 @@ export function turnReportedWorkView(turn: TaskTurn, now = Date.now()) {
     ? durationBetween(turn.startedAt, new Date(now).toISOString())
     : terminalTurnDuration(turn);
   const label = active ? "Elapsed so far" : "Elapsed";
-  const value = duration === null ? "Unavailable" : formatReportedDuration(duration) ?? "Unavailable";
+  const value = duration === null ? NOT_AVAILABLE : formatReportedDuration(duration) ?? NOT_AVAILABLE;
   return {
-    accessibleLabel: `${label} ${value}. ${active ? "Current" : "Completed"} turn reported wall-clock elapsed time.`,
+    accessibleLabel: `${label} ${duration === null ? "unavailable" : value}. ${active ? "Current" : "Completed"} turn reported wall-clock elapsed time.`,
     kind: duration === null ? "unavailable" as const : "available" as const,
     label,
     title: duration === null
@@ -136,11 +105,6 @@ export function turnReportedWorkView(turn: TaskTurn, now = Date.now()) {
   };
 }
 
-function terminalTurnDuration(turn: TaskTurn) {
-  const duration = durationBetween(turn.startedAt, turn.result?.updatedAt);
-  return duration === 0 ? null : duration;
-}
-
 export function formatCompactTokens(value: number, locales?: Intl.LocalesArgument) {
   return new Intl.NumberFormat(locales, {
     maximumFractionDigits: 2,
@@ -194,7 +158,7 @@ export function usageView(task: Task): UsageView {
 function readyUsageView(usage: UsageNumbers, knownSoFar: boolean): UsageView {
   const tokens = formatCompactTokens(usage.totalTokens);
   const cost = usage.estimatedCostUsd == null
-    ? "Estimated cost unavailable"
+    ? "Estimated cost n/a"
     : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
   return {
     kind: "ready",
@@ -214,7 +178,7 @@ export function turnUsageView(task: Task, turn: NonNullable<Task["turns"]>[numbe
   if (usage?.status === "available" && typeof usage.totalTokens === "number") {
     const tokens = formatFullTokens(usage.totalTokens);
     const cost = usage.estimatedCostUsd == null
-      ? "Estimated cost unavailable"
+      ? "Estimated cost n/a"
       : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
     return { kind: "ready" as const, label: `${tokens} tokens · ${cost}` };
   }
@@ -229,13 +193,16 @@ export function turnUsageMetricsView(task: Task, turn: NonNullable<Task["turns"]
   if (view.kind === "ready") {
     const identity = turn.turnRef ?? turn.turnId;
     const usage = identity ? task.usage?.turns?.[identity] : null;
-    const tokens = typeof usage?.totalTokens === "number" ? formatFullTokens(usage.totalTokens) : "Unavailable";
+    const tokens = typeof usage?.totalTokens === "number" ? formatFullTokens(usage.totalTokens) : NOT_AVAILABLE;
     const cost = usage?.estimatedCostUsd == null
-      ? "Unavailable"
+      ? NOT_AVAILABLE
       : formatEstimatedCost(usage.estimatedCostUsd);
     return {
       animated: false,
-      cost: { accessibleLabel: `Estimated cost ${cost.toLowerCase()}`, value: cost },
+      cost: {
+        accessibleLabel: `Estimated cost ${usage?.estimatedCostUsd == null ? "unavailable" : cost.toLowerCase()}`,
+        value: cost,
+      },
       kind: view.kind,
       note: null,
       title: view.label,
@@ -246,18 +213,19 @@ export function turnUsageMetricsView(task: Task, turn: NonNullable<Task["turns"]
     ? "Pending"
     : view.kind === "calculating"
       ? "Calculating"
-      : "Unavailable";
+      : NOT_AVAILABLE;
+  const accessibleValue = view.kind === "unavailable" ? "unavailable" : value.toLowerCase();
   return {
     animated: view.kind === "pending" || view.kind === "calculating",
     cost: {
-      accessibleLabel: `Estimated cost ${value.toLowerCase()}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
+      accessibleLabel: `Estimated cost ${accessibleValue}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
       value,
     },
     kind: view.kind,
-    note: view.kind === "unavailable" ? view.label : null,
+    note: view.kind === "unavailable" && view.label !== "Turn usage unavailable" ? view.label : null,
     title: view.label,
     tokens: {
-      accessibleLabel: `Tokens ${value.toLowerCase()}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
+      accessibleLabel: `Tokens ${accessibleValue}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
       value,
     },
   };
@@ -290,14 +258,14 @@ export function listUsageView(task: Task): ListUsageView {
     return {
       accessibleLabel: `Token usage unavailable${view.label === "Token usage unavailable" ? "" : `: ${view.label}`}`,
       kind: "unavailable",
-      label: "Token usage unavailable",
+      label: `${NOT_AVAILABLE} tokens`,
       title: view.label,
     };
   }
   const compactTokens = formatCompactTokens(view.usage.totalTokens);
   const fullTokens = formatFullTokens(view.usage.totalTokens);
   const cost = view.usage.estimatedCostUsd == null
-    ? "cost unavailable"
+    ? "cost n/a"
     : `est. ${formatEstimatedCost(view.usage.estimatedCostUsd)}`;
   const qualifier = view.knownSoFar ? " · Updating…" : "";
   const accessibleQualifier = view.knownSoFar ? "; updating" : "";

package/src/dashboard/react/styles.css

@@ -34,8 +34,8 @@ body {
 .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-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;
@@ -55,10 +55,12 @@ 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 { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 3px; border-radius: 4px; color: var(--taskchef-muted); font-size: 0.7rem; line-height: 1.2; }
+.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: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-empty { border-style: dashed; background: transparent; }
 
 .taskchef-notifications {
@@ -81,7 +83,9 @@ body {
 .taskchef-turn { background: var(--taskchef-surface-muted); }
 .taskchef-turn-highlighted { border-color: var(--mantine-color-teal-6); box-shadow: inset 3px 0 var(--mantine-color-teal-6); outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 22%, transparent); }
 .taskchef-turn-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.taskchef-turn-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
+.taskchef-turn-timing { display: flex; align-items: center; justify-content: flex-end; gap: var(--mantine-spacing-sm); min-width: 0; }
+.taskchef-turn-duration { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
+.taskchef-turn-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
 .taskchef-turn-metric { min-width: 0; overflow-wrap: anywhere; }
 .taskchef-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
 .taskchef-code-panel { max-height: 280px; margin: 0; padding: 12px; overflow: auto; border-radius: var(--mantine-radius-md); background: var(--taskchef-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@@ -121,8 +125,10 @@ body {
   .taskchef-toolbar .mantine-SegmentedControl-root { overflow-x: auto; }
   .taskchef-notifications { right: 16px; bottom: 16px; width: min(330px, calc(100vw - 32px)); }
   .taskchef-metadata { grid-template-columns: 1fr; }
-  .taskchef-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .taskchef-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .taskchef-turn-metrics { grid-template-columns: 1fr; }
+  .taskchef-turn-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .taskchef-turn-timing { flex-wrap: wrap; justify-content: flex-start; }
   .taskchef-metadata dt { padding-bottom: 0; border-bottom: 0; }
 }