taskchef 8.2.1 → 8.2.2

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

@@ -59,6 +59,7 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                   <RelativeTime
                     icon={<IconHistory aria-hidden size={14} />}
                     label="Turn update time"
+                    tooltipLabel="Updated at"
                     value={presentation.updatedAt}
                   />
                 </StatCell>
@@ -70,7 +71,7 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                     accessibleLabel={usage.tokens.accessibleLabel}
                     animated={usage.animated}
                     icon={<IconStack2 aria-hidden size={14} />}
-                    title={usage.title}
+                    title="Tokens"
                     value={usage.tokens.value}
                   />
                 </StatCell>
@@ -79,7 +80,7 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                     accessibleLabel={usage.cost.accessibleLabel}
                     animated={usage.animated}
                     icon={<IconCurrencyDollar aria-hidden size={14} />}
-                    title={usage.title}
+                    title="Estimated cost"
                     value={usage.cost.value}
                   />
                 </StatCell>
@@ -100,7 +101,7 @@ function TurnReportedWork({ turn }: { turn: TaskTurn }) {
     <StaticStat
       accessibleLabel={elapsed.accessibleLabel}
       icon={<IconHourglass aria-hidden size={14} />}
-      title={elapsed.title}
+      title="Duration"
       value={elapsed.value}
     />
   );

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

@@ -12,10 +12,12 @@ export function RelativeTimeProvider({ children, now }: { children: ReactNode; n
 export function RelativeTime({
   icon,
   label,
+  tooltipLabel,
   value,
 }: {
   icon?: ReactNode;
   label: string;
+  tooltipLabel?: string;
   value: string | null | undefined;
 }) {
   const [exact, setExact] = useState(false);
@@ -29,7 +31,7 @@ export function RelativeTime({
       ? "Show relative time"
       : `Exact time: ${exactText}. Show exact time`;
   return (
-    <Tooltip label={tooltip}>
+    <Tooltip events={{ focus: true, hover: true, touch: false }} label={tooltipLabel ?? tooltip}>
       <UnstyledButton
         aria-label={unavailable
           ? `${label}: unavailable.`

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

@@ -48,7 +48,7 @@ describe("task card stats", () => {
     expect(screen.getByLabelText(/estimated cost unavailable/i)).toHaveTextContent("n/a");
   });
 
-  test("shows metric details to keyboard users on focus", () => {
+  test("shows the requested estimated-cost label to keyboard users", () => {
     vi.useFakeTimers();
     renderStats(fixtureTask({
       status: "completed",
@@ -57,7 +57,7 @@ describe("task card stats", () => {
     const cost = screen.getByLabelText(/estimated cost \$12\.34/i);
     fireEvent.focus(cost);
     vi.advanceTimersByTime(150);
-    expect(screen.getByRole("tooltip")).toHaveTextContent("Unrounded estimate: $12.3449");
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Estimated cost");
     vi.useRealTimers();
   });
 

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

@@ -19,6 +19,7 @@ export function TaskCardStats({ task }: { task: Task }) {
         <RelativeTime
           icon={<IconHistory aria-hidden size={14} />}
           label={`Updated time for ${task.title}`}
+          tooltipLabel="Updated at"
           value={task.meaningfulUpdatedAt ?? task.updatedAt}
         />
       </StatCell>
@@ -26,7 +27,7 @@ export function TaskCardStats({ task }: { task: Task }) {
         <StaticStat
           accessibleLabel={reportedWork.accessibleLabel}
           icon={<IconHourglass aria-hidden size={14} />}
-          title={reportedWork.title}
+          title="Duration"
           value={reportedWork.value}
         />
       </StatCell>
@@ -35,7 +36,7 @@ export function TaskCardStats({ task }: { task: Task }) {
           accessibleLabel={usage.tokens.accessibleLabel}
           animated={usage.tokens.animated}
           icon={<IconStack2 aria-hidden size={14} />}
-          title={usage.tokens.title}
+          title="Tokens"
           value={usage.tokens.value}
         />
         <Text className="taskchef-visually-hidden" component="span" role="status">
@@ -47,7 +48,7 @@ export function TaskCardStats({ task }: { task: Task }) {
           accessibleLabel={usage.cost.accessibleLabel}
           animated={usage.cost.animated}
           icon={<IconCurrencyDollar aria-hidden size={14} />}
-          title={usage.cost.title}
+          title="Estimated cost"
           value={usage.cost.value}
         />
       </StatCell>

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

@@ -13,12 +13,9 @@ export function UsagePanel({ task }: { task: Task }) {
   const usage = usageView(task);
   const reportedWork = taskReportedWorkView(task);
   const ready = usage.kind === "ready" ? usage : null;
-  const cached = ready?.usage.cachedInputTokens ?? 0;
-  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 estimatedCost = ready?.usage.estimatedCostUsd;
+  const hasEstimatedCost = typeof estimatedCost === "number" && Number.isFinite(estimatedCost);
   const stateValue = usage.kind === "pending"
     ? "Pending"
     : usage.kind === "calculating"
@@ -36,8 +33,8 @@ export function UsagePanel({ task }: { task: Task }) {
       accessibleValue: ready
         ? `${formatFullTokens(ready.usage.totalTokens)} tokens`
         : usage.label,
-      animated: usage.kind === "pending" || usage.kind === "calculating",
-      label: ready?.knownSoFar ? "Tokens · known so far" : "Tokens",
+      animated: usage.kind === "pending" || usage.kind === "calculating" || ready?.knownSoFar,
+      label: "Tokens",
       title: ready ? `${formatFullTokens(ready.usage.totalTokens)} tokens` : usage.label,
       value: ready ? formatCompactTokens(ready.usage.totalTokens) : stateValue,
     },
@@ -49,7 +46,9 @@ export function UsagePanel({ task }: { task: Task }) {
         : `Estimated cost ${accessibleState}${
           usage.kind === "unavailable" ? `: ${usage.label}` : ""
         }`,
-      animated: usage.kind === "pending" || usage.kind === "calculating",
+      animated: usage.kind === "pending"
+        || usage.kind === "calculating"
+        || (ready?.knownSoFar && hasEstimatedCost),
       label: "Estimated cost",
       title: ready?.usage.estimatedCostUsd == null
         ? "Estimated cost unavailable"
@@ -60,24 +59,16 @@ export function UsagePanel({ task }: { task: Task }) {
     },
     {
       accessibleValue: reportedWork.accessibleLabel,
-      label: "Reported work",
+      label: "Duration",
       title: reportedWork.title,
       value: reportedWork.value,
     },
-    ...(ready ? [
-      {
-        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,
-      },
-    ] : []),
+    {
+      accessibleValue: models || "Models unavailable",
+      label: "Models",
+      title: models || "Models unavailable",
+      value: models || "n/a",
+    },
   ];
   return (
     <Box aria-live="polite">

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

@@ -154,10 +154,11 @@ describe("token and working presentation", () => {
 
     expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("330");
     expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
-    expect(screen.getByText("Reported work").nextSibling).toHaveTextContent("18m 32s");
+    expect(screen.getByText("Duration").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.getByText("Models").nextSibling).toHaveTextContent("gpt-5.6-sol, gpt-5.6-luna");
+    expect(screen.queryByText("Cache ratio")).not.toBeInTheDocument();
+    expect(screen.getByText("Tokens").closest(".taskchef-metrics")?.children).toHaveLength(4);
     expect(screen.queryByText(/API-equivalent/i)).not.toBeInTheDocument();
   });
 
@@ -176,10 +177,38 @@ describe("token and working presentation", () => {
 
     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();
+    expect(screen.getByText("Models").nextSibling).toHaveTextContent("n/a");
+    expect(screen.getByLabelText("Models unavailable")).toBeVisible();
+    expect(screen.queryByText("Cache ratio")).not.toBeInTheDocument();
+  });
+
+  test("shimmers known usage values during a running turn without changing card titles", () => {
+    const { container, rerender } = render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          usage: {
+            status: "available",
+            task: { totalTokens: 330, estimatedCostUsd: 0.12 },
+          },
+        })} />
+      </MantineProvider>,
+    );
+
+    expect(screen.getByText("Tokens")).toBeVisible();
+    expect(screen.queryByText(/known so far/i)).not.toBeInTheDocument();
+    expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(2);
+
+    rerender(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          usage: {
+            status: "available",
+            task: { totalTokens: 330, estimatedCostUsd: null },
+          },
+        })} />
+      </MantineProvider>,
+    );
+    expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(1);
   });
 
   test("keeps reported work visible across pending, calculating, and unavailable usage", () => {
@@ -200,7 +229,9 @@ 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("Reported work").nextSibling).toHaveTextContent("n/a");
+      expect(screen.getByText("Duration").nextSibling).toHaveTextContent("n/a");
+      expect(screen.getByText("Models").nextSibling).toHaveTextContent("n/a");
+      expect(screen.getByText("Tokens").closest(".taskchef-metrics")?.children).toHaveLength(4);
       cleanup();
     }
   });
@@ -458,7 +489,7 @@ describe("reported wall-clock work presentation", () => {
       reportedWork: { terminalTurns: 1, validTurns: 1, totalMilliseconds: 1_112_000 },
     })).toMatchObject({ kind: "available", value: "18m 32s" });
     render(<MantineProvider><UsagePanel task={compactTerminal} /></MantineProvider>);
-    expect(screen.getByText("Reported work").nextSibling).toHaveTextContent("n/a");
+    expect(screen.getByText("Duration").nextSibling).toHaveTextContent("n/a");
     cleanup();
     }
 

package/src/dashboard/react/styles.css

@@ -125,7 +125,7 @@ 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(3, minmax(0, 1fr)); }
+  .taskchef-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .taskchef-metadata dt { padding-bottom: 0; border-bottom: 0; }
 }