taskchef 8.2.0 → 8.2.1

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

@@ -36,8 +36,10 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
             withBorder
           >
             <Stack gap={7}>
-              <StatusBadge status={presentation.status} />
-              {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
+              <Box className="taskchef-turn-heading">
+                <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>
+                <StatusBadge status={presentation.status} />
+              </Box>
               <Box>
                 <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
                 <Text className="taskchef-preserve-lines" size="sm">
@@ -83,7 +85,6 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                 </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>
         );

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

@@ -83,7 +83,7 @@ describe("task card stats", () => {
   });
 
   test("retains known totals and marks both usage values as updating", () => {
-    renderStats(fixtureTask({
+    const { container } = renderStats(fixtureTask({
       status: "working",
       turnRef: "turn-two",
       usage: {
@@ -92,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("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

@@ -33,7 +33,7 @@ export function TaskCardStats({ task }: { task: Task }) {
       <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}
@@ -45,7 +45,7 @@ export function TaskCardStats({ task }: { task: Task }) {
       <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}

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

@@ -63,7 +63,7 @@ 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(
@@ -71,6 +71,9 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   );
   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();
@@ -78,7 +81,7 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   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("330 tokens")).toHaveTextContent("330");
+  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("$");

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

@@ -151,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) {
@@ -200,7 +201,8 @@ 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 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;
@@ -214,7 +216,7 @@ export function turnUsageMetricsView(task: Task, turn: NonNullable<Task["turns"]
       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"
@@ -247,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;
@@ -263,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,
       },
@@ -280,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: NOT_AVAILABLE,
       },
       kind: "unavailable",
       tokens: {
         accessibleLabel: `Token usage unavailable${reason}`,
+        animated: false,
         title: view.label,
         value: `${NOT_AVAILABLE} tokens`,
       },
@@ -300,26 +304,29 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
   const hasCost = typeof estimatedCost === "number" && Number.isFinite(estimatedCost);
   const formattedCost = hasCost ? formatEstimatedCost(estimatedCost) : null;
   const formattedCostAmount = hasCost ? formatEstimatedCostAmount(estimatedCost) : null;
-  const qualifier = view.knownSoFar ? " · Updating…" : "";
+  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: `${formattedCostAmount ?? NOT_AVAILABLE}${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`,
     },
   };
 }

package/src/dashboard/react/styles.css

@@ -34,7 +34,8 @@ body {
 .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-heading,
+.taskchef-turn-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, 45cqw); }
 .taskchef-status-badge { flex: none; font-size: var(--mantine-font-size-xs); }
 .taskchef-title-button {

package/src/dashboard/time.js

@@ -28,12 +28,10 @@ export function formatExactTime(value, { locale, timeZone } = {}) {
 
 function hourPhrase(milliseconds, direction) {
   const hours = Math.floor(milliseconds / HOUR_MS);
-  const minutes = Math.floor((milliseconds % HOUR_MS) / MINUTE_MS);
   const hourText = hours === 1 ? "1 hour" : `${hours} hours`;
-  const detail = hours < 6 && minutes > 0 ? ` ${minutes} minutes` : "";
   return direction === "future"
-    ? `in ${hourText}${detail}`
-    : `${hourText}${detail} ago`;
+    ? `in ${hourText}`
+    : `${hourText} ago`;
 }
 
 export function formatRelativeTime(value, {
@@ -63,10 +61,11 @@ export function formatRelativeTime(value, {
       : Math.floor(elapsed / DAY_MS);
     return future ? `in ${days} days` : `${days} days ago`;
   }
-  return new Intl.DateTimeFormat(locale, {
-    dateStyle: "medium",
-    timeZone,
-  }).format(parsed.date);
+  const months = future
+    ? Math.ceil(elapsed / (RELATIVE_DATE_LIMIT_DAYS * DAY_MS))
+    : Math.floor(elapsed / (RELATIVE_DATE_LIMIT_DAYS * DAY_MS));
+  const monthText = months === 1 ? "1 month" : `${months} months`;
+  return future ? `in ${monthText}` : `${monthText} ago`;
 }
 
 export function timestampPresentation(value, {