taskchef 8.1.1 → 8.2.1

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

@@ -1,4 +1,10 @@
 import { Box, Paper, Stack, Text } from "@mantine/core";
+import {
+  IconCurrencyDollar,
+  IconHistory,
+  IconHourglass,
+  IconStack2,
+} from "@tabler/icons-react";
 import { mergeProjectedTurns, turnPresentation } from "../../state.js";
 import { turnReportedWorkView, turnUsageMetricsView } from "../presentation";
 import type { Task, TaskTurn } from "../types";
@@ -6,6 +12,7 @@ import { useEffect, useState } from "react";
 import { RelativeTime } from "./RelativeTime";
 import { LinkedText } from "./LinkedText";
 import { ShimmerText } from "./ShimmerText";
+import { StatCell, StaticStat, StatsGrid } from "./StatsGrid";
 import { StatusBadge } from "./StatusBadge";
 
 export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef: string | null; task: Task }) {
@@ -30,13 +37,9 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
           >
             <Stack gap={7}>
               <Box className="taskchef-turn-heading">
+                <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>
                 <StatusBadge status={presentation.status} />
-                <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>
                 <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
                 <Text className="taskchef-preserve-lines" size="sm">
@@ -51,24 +54,37 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                     : <LinkedText task={task} text={presentation.summary} />}
                 </Text>
               </Box>
-              <Box className="taskchef-turn-metrics">
-                <TurnMetric
-                  accessibleLabel={usage.tokens.accessibleLabel}
-                  animated={usage.animated}
-                  label="Tokens"
-                  title={usage.title}
-                  value={usage.tokens.value}
-                />
-                <TurnMetric
-                  accessibleLabel={usage.cost.accessibleLabel}
-                  animated={usage.animated}
-                  label="Estimated cost"
-                  title={usage.title}
-                  value={usage.cost.value}
-                />
-              </Box>
+              <StatsGrid variant="turn">
+                <StatCell>
+                  <RelativeTime
+                    icon={<IconHistory aria-hidden size={14} />}
+                    label="Turn update time"
+                    value={presentation.updatedAt}
+                  />
+                </StatCell>
+                <StatCell>
+                  <TurnReportedWork turn={turn} />
+                </StatCell>
+                <StatCell usageState={usage.kind}>
+                  <StaticStat
+                    accessibleLabel={usage.tokens.accessibleLabel}
+                    animated={usage.animated}
+                    icon={<IconStack2 aria-hidden size={14} />}
+                    title={usage.title}
+                    value={usage.tokens.value}
+                  />
+                </StatCell>
+                <StatCell usageState={usage.kind}>
+                  <StaticStat
+                    accessibleLabel={usage.cost.accessibleLabel}
+                    animated={usage.animated}
+                    icon={<IconCurrencyDollar aria-hidden size={14} />}
+                    title={usage.title}
+                    value={usage.cost.value}
+                  />
+                </StatCell>
+              </StatsGrid>
               {usage.note && <Text c="dimmed" size="xs">{usage.note}</Text>}
-              <Text c="dimmed" className="taskchef-mono" size="xs">Turn ref: {identity ?? "—"}</Text>
             </Stack>
           </Paper>
         );
@@ -81,39 +97,12 @@ function TurnReportedWork({ turn }: { turn: TaskTurn }) {
   const now = useLiveNow(turn.result === null);
   const elapsed = turnReportedWorkView(turn, now);
   return (
-    <Text
-      aria-label={elapsed.accessibleLabel}
-      c="dimmed"
-      className="taskchef-turn-duration"
-      size="xs"
+    <StaticStat
+      accessibleLabel={elapsed.accessibleLabel}
+      icon={<IconHourglass aria-hidden size={14} />}
       title={elapsed.title}
-    >
-      <span className="taskchef-field-label">{elapsed.label}</span>
-      <span>{elapsed.value}</span>
-    </Text>
-  );
-}
-
-function TurnMetric({
-  accessibleLabel,
-  animated = false,
-  label,
-  title,
-  value,
-}: {
-  accessibleLabel?: string;
-  animated?: boolean;
-  label: string;
-  title?: string;
-  value: string;
-}) {
-  return (
-    <Box className="taskchef-turn-metric" title={title}>
-      <Text c="dimmed" className="taskchef-field-label" size="xs">{label}</Text>
-      <Text aria-label={accessibleLabel} c="dimmed" size="xs">
-        {animated ? <ShimmerText>{value}</ShimmerText> : value}
-      </Text>
-    </Box>
+      value={elapsed.value}
+    />
   );
 }
 

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

@@ -0,0 +1,60 @@
+import { Box, Text, Tooltip } from "@mantine/core";
+import type { ReactNode } from "react";
+import { ShimmerText } from "./ShimmerText";
+
+export function StatsGrid({
+  children,
+  variant,
+}: {
+  children: ReactNode;
+  variant: "card" | "turn";
+}) {
+  return (
+    <Box className={`taskchef-stats taskchef-${variant}-stats`} component="div">
+      {children}
+    </Box>
+  );
+}
+
+export function StatCell({
+  children,
+  usageState,
+}: {
+  children: ReactNode;
+  usageState?: string;
+}) {
+  return (
+    <Box className="taskchef-stat" data-usage-state={usageState}>
+      {children}
+    </Box>
+  );
+}
+
+export 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-stat-content"
+        component="span"
+        size="xs"
+        tabIndex={0}
+      >
+        {icon}
+        <bdi>{animated ? <ShimmerText>{value}</ShimmerText> : value}</bdi>
+      </Text>
+    </Tooltip>
+  );
+}

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

@@ -34,7 +34,8 @@ describe("task card stats", () => {
     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[3]).getByLabelText(/estimated cost \$12\.34/i)).toHaveTextContent("12.34");
+    expect(within(cells[3]).getByLabelText(/estimated cost \$12\.34/i)).not.toHaveTextContent("$");
     expect(within(cells[2]).getByRole("status")).toHaveTextContent(/1,324,567 tokens.*estimated cost \$12\.34/i);
   });
 
@@ -44,7 +45,7 @@ describe("task card stats", () => {
       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");
+    expect(screen.getByLabelText(/estimated cost unavailable/i)).toHaveTextContent("n/a");
   });
 
   test("shows metric details to keyboard users on focus", () => {
@@ -78,11 +79,11 @@ describe("task card stats", () => {
       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");
+    expect(screen.getByLabelText(/estimated cost unavailable: no matching/i)).toHaveTextContent("n/a");
   });
 
   test("retains known totals and marks both usage values as updating", () => {
-    renderStats(fixtureTask({
+    const { container } = renderStats(fixtureTask({
       status: "working",
       turnRef: "turn-two",
       usage: {
@@ -91,8 +92,40 @@ describe("task card stats", () => {
         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…");
+    expect(screen.getByLabelText(/1,324,567 tokens; updating/i)).toHaveTextContent("1.32M tokens");
+    expect(screen.getByLabelText(/estimated cost \$12\.34; updating/i)).toHaveTextContent("12.34");
+    expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(2);
+  });
+
+  test("retains terminal totals while a newer usage generation is calculating", () => {
+    const { container } = renderStats(fixtureTask({
+      status: "completed",
+      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");
+    expect(screen.getByLabelText(/estimated cost \$12\.34; updating/i)).toHaveTextContent("12.34");
+    expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(2);
+  });
+
+  test("keeps unavailable cost static while retained tokens update", () => {
+    const { container } = renderStats(fixtureTask({
+      status: "working",
+      turnRef: "turn-two",
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "calculating",
+        task: { totalTokens: 1_324_567, estimatedCostUsd: null },
+      },
+    }));
+    expect(screen.getByLabelText(/1,324,567 tokens; updating/i)).toHaveTextContent("1.32M tokens");
+    expect(screen.getByLabelText(/estimated cost unavailable/i)).toHaveTextContent("n/a");
+    expect(screen.getByLabelText(/estimated cost unavailable/i)).not.toHaveAccessibleName(/updating/i);
+    expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(1);
   });
 
   test("places Open chat beneath the status badge and keeps callbacks working", () => {

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

@@ -1,69 +1,39 @@
-import { Box, Text, Tooltip } from "@mantine/core";
+import { Text } 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>
-  );
-}
+import { StatCell, StaticStat, StatsGrid } from "./StatsGrid";
 
 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">
+    <StatsGrid variant="card">
+      <StatCell>
         <RelativeTime
           icon={<IconHistory aria-hidden size={14} />}
           label={`Updated time for ${task.title}`}
           value={task.meaningfulUpdatedAt ?? task.updatedAt}
         />
-      </Box>
-      <Box className="taskchef-card-stat">
+      </StatCell>
+      <StatCell>
         <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}>
+      </StatCell>
+      <StatCell usageState={usage.kind}>
         <StaticStat
           accessibleLabel={usage.tokens.accessibleLabel}
-          animated={usage.animated}
+          animated={usage.tokens.animated}
           icon={<IconStack2 aria-hidden size={14} />}
           title={usage.tokens.title}
           value={usage.tokens.value}
@@ -71,16 +41,16 @@ export function TaskCardStats({ task }: { task: Task }) {
         <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}>
+      </StatCell>
+      <StatCell usageState={usage.kind}>
         <StaticStat
           accessibleLabel={usage.cost.accessibleLabel}
-          animated={usage.animated}
+          animated={usage.cost.animated}
           icon={<IconCurrencyDollar aria-hidden size={14} />}
           title={usage.cost.title}
           value={usage.cost.value}
         />
-      </Box>
-    </Box>
+      </StatCell>
+    </StatsGrid>
   );
 }

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

@@ -63,22 +63,29 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     }],
     usage: {
       status: "available",
-      turns: { "turn-one": { status: "available", totalTokens: 330, estimatedCostUsd: 0.12 } },
+      turns: { "turn-one": { status: "available", totalTokens: 1_324_567, estimatedCostUsd: 0.12 } },
     },
   });
   const { container } = render(
     <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).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");
+  const stats = container.querySelector(".taskchef-turn-stats") as HTMLElement;
+  expect(stats).not.toBeNull();
+  expect(container.querySelector(".taskchef-turn-heading .taskchef-status-badge"))
+    .toHaveTextContent("completed");
+  expect(screen.queryByText(/^Turn ref:/)).not.toBeInTheDocument();
+  const cells = [...stats.children] as HTMLElement[];
+  expect(cells).toHaveLength(4);
+  expect(within(cells[0]).getByLabelText(/^Turn update time:/i)).toBeVisible();
+  expect(cells[0].querySelector(".tabler-icon-history")).not.toBeNull();
+  expect(within(cells[1]).getByLabelText(/completed turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("18m 32s");
+  expect(cells[1].querySelector(".tabler-icon-hourglass")).not.toBeNull();
+  expect(within(cells[2]).getByLabelText("1,324,567 tokens")).toHaveTextContent("1.32M");
+  expect(cells[2].querySelector(".tabler-icon-stack-2")).not.toBeNull();
+  expect(within(cells[3]).getByLabelText("Estimated cost $0.12")).toHaveTextContent("0.12");
+  expect(within(cells[3]).getByLabelText("Estimated cost $0.12")).not.toHaveTextContent("$");
+  expect(cells[3].querySelector(".tabler-icon-currency-dollar")).not.toBeNull();
   cleanup();
   }
 
@@ -94,9 +101,9 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   const task = fixtureTask();
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
   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");
+    .toHaveTextContent("18m 32s");
+  expect(screen.getByLabelText("Tokens pending")).toHaveTextContent("Pending");
+  expect(screen.getByLabelText("Estimated cost pending")).toHaveTextContent("Pending");
 
   act(() => {
     now += 2_000;
@@ -104,7 +111,7 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   });
 
   expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
-    .toHaveTextContent("Elapsed so far18m 34s");
+    .toHaveTextContent("18m 34s");
   cleanup();
   vi.restoreAllMocks();
   }
@@ -133,7 +140,7 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   });
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
   expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i))
-    .toHaveTextContent("Elapsedn/a");
+    .toHaveTextContent("n/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/presentation.test.tsx

@@ -61,6 +61,21 @@ describe("token and working presentation", () => {
     if (view.kind === "ready") expect(view.knownSoFar).toBe(true);
   });
 
+  test("keeps cumulative usage visible while a newer terminal generation is calculating", () => {
+    const view = usageView(fixtureTask({
+      status: "completed",
+      turnRef: "turn-two",
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "calculating",
+        task: { totalTokens: 12345, estimatedCostUsd: 0.1234 },
+      },
+    }));
+    expect(view.kind).toBe("ready");
+    expect(view.label).toBe("12.35K tokens · Estimated cost $0.12 · known so far");
+    if (view.kind === "ready") expect(view.knownSoFar).toBe(true);
+  });
+
   test("distinguishes available, pending, calculating, and unavailable per-turn usage", () => {
     const task = fixtureTask({
       usage: {

package/src/dashboard/react/presentation.ts

@@ -127,6 +127,13 @@ export function formatEstimatedCost(value: number | null | undefined, locales?:
   }).format(value);
 }
 
+function formatEstimatedCostAmount(value: number, locales?: Intl.LocalesArgument) {
+  return new Intl.NumberFormat(locales, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+  }).format(value);
+}
+
 export type UsageView =
   | { kind: "pending"; label: "Token usage pending" }
   | { kind: "calculating"; label: "Calculating token usage" }
@@ -144,6 +151,7 @@ export function usageView(task: Task): UsageView {
     return { kind: "pending", label: "Token usage pending" };
   }
   if (usage?.status === "calculating" || priorGeneration) {
+    if (usage.task) return readyUsageView(usage.task, true);
     return { kind: "calculating", label: "Calculating token usage" };
   }
   if (usage?.status === "available" && usage.task) {
@@ -193,20 +201,22 @@ 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) : NOT_AVAILABLE;
-    const cost = usage?.estimatedCostUsd == null
-      ? NOT_AVAILABLE
-      : formatEstimatedCost(usage.estimatedCostUsd);
+    const fullTokens = typeof usage?.totalTokens === "number" ? formatFullTokens(usage.totalTokens) : NOT_AVAILABLE;
+    const compactTokens = typeof usage?.totalTokens === "number" ? formatCompactTokens(usage.totalTokens) : NOT_AVAILABLE;
+    const estimatedCost = usage?.estimatedCostUsd;
+    const hasCost = typeof estimatedCost === "number" && Number.isFinite(estimatedCost);
+    const cost = hasCost ? formatEstimatedCostAmount(estimatedCost) : NOT_AVAILABLE;
+    const accessibleCost = hasCost ? formatEstimatedCost(estimatedCost).toLowerCase() : "unavailable";
     return {
       animated: false,
       cost: {
-        accessibleLabel: `Estimated cost ${usage?.estimatedCostUsd == null ? "unavailable" : cost.toLowerCase()}`,
+        accessibleLabel: `Estimated cost ${accessibleCost}`,
         value: cost,
       },
       kind: view.kind,
       note: null,
       title: view.label,
-      tokens: { accessibleLabel: `${tokens} tokens`, value: tokens },
+      tokens: { accessibleLabel: `${fullTokens} tokens`, value: compactTokens },
     };
   }
   const value = view.kind === "pending"
@@ -239,12 +249,12 @@ export function usageStillCalculating(task: Task) {
 
 export type ListUsageMetric = {
   accessibleLabel: string;
+  animated: boolean;
   title: string;
   value: string;
 };
 
 export type ListUsageMetricsView = {
-  animated: boolean;
   cost: ListUsageMetric;
   kind: "pending" | "calculating" | "ready" | "unavailable";
   tokens: ListUsageMetric;
@@ -255,15 +265,16 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
   if (view.kind === "pending" || view.kind === "calculating") {
     const value = view.kind === "pending" ? "Pending" : "Calculating";
     return {
-      animated: true,
       cost: {
         accessibleLabel: `Estimated cost ${value.toLowerCase()}`,
+        animated: true,
         title: view.label,
         value,
       },
       kind: view.kind,
       tokens: {
         accessibleLabel: `Tokens ${value.toLowerCase()}`,
+        animated: true,
         title: view.label,
         value,
       },
@@ -272,15 +283,16 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
   if (view.kind === "unavailable") {
     const reason = view.label === "Token usage unavailable" ? "" : `: ${view.label}`;
     return {
-      animated: false,
       cost: {
         accessibleLabel: `Estimated cost unavailable${reason}`,
+        animated: false,
         title: view.label,
-        value: "est. n/a",
+        value: NOT_AVAILABLE,
       },
       kind: "unavailable",
       tokens: {
         accessibleLabel: `Token usage unavailable${reason}`,
+        animated: false,
         title: view.label,
         value: `${NOT_AVAILABLE} tokens`,
       },
@@ -288,29 +300,33 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
   }
   const compactTokens = formatCompactTokens(view.usage.totalTokens);
   const fullTokens = formatFullTokens(view.usage.totalTokens);
-  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 estimatedCost = view.usage.estimatedCostUsd;
+  const hasCost = typeof estimatedCost === "number" && Number.isFinite(estimatedCost);
+  const formattedCost = hasCost ? formatEstimatedCost(estimatedCost) : null;
+  const formattedCostAmount = hasCost ? formatEstimatedCostAmount(estimatedCost) : null;
+  const tooltipQualifier = view.knownSoFar ? " · Updating…" : "";
   const accessibleQualifier = view.knownSoFar ? "; updating" : "";
+  const costTooltipQualifier = hasCost ? tooltipQualifier : "";
+  const costAccessibleQualifier = hasCost ? accessibleQualifier : "";
   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 {
-    animated: false,
     cost: {
-      accessibleLabel: `Estimated cost ${formattedCost ?? "unavailable"}${accessibleQualifier}.${freshnessLabel}`,
+      accessibleLabel: `Estimated cost ${formattedCost ?? "unavailable"}${costAccessibleQualifier}.${freshnessLabel}`,
+      animated: view.knownSoFar && hasCost,
       title: `${formattedCost === null
         ? "Estimated cost unavailable"
-        : `Unrounded estimate: $${view.usage.estimatedCostUsd}`}${qualifier}.${freshnessLabel}`,
-      value: `${formattedCost === null ? "est. n/a" : `est. ${formattedCost}`}${qualifier}`,
+        : `Unrounded estimate: $${view.usage.estimatedCostUsd}`}${costTooltipQualifier}.${freshnessLabel}`,
+      value: formattedCostAmount ?? NOT_AVAILABLE,
     },
     kind: "ready",
     tokens: {
       accessibleLabel: `${fullTokens} tokens${accessibleQualifier}.${freshnessLabel}`,
-      title: `${fullTokens} tokens${qualifier}.${freshnessLabel}`,
-      value: `${compactTokens} tokens${qualifier}`,
+      animated: view.knownSoFar,
+      title: `${fullTokens} tokens${tooltipQualifier}.${freshnessLabel}`,
+      value: `${compactTokens} tokens`,
     },
   };
 }