taskchef 8.2.0 → 8.2.2

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">
@@ -57,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>
@@ -68,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>
@@ -77,13 +80,12 @@ 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>
               </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>
         );
@@ -99,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();
   });
 
@@ -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

@@ -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,16 +27,16 @@ 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>
       <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}
+          title="Tokens"
           value={usage.tokens.value}
         />
         <Text className="taskchef-visually-hidden" component="span" role="status">
@@ -45,9 +46,9 @@ 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}
+          title="Estimated cost"
           value={usage.cost.value}
         />
       </StatCell>

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/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

@@ -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: {
@@ -139,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();
   });
 
@@ -161,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", () => {
@@ -185,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();
     }
   });
@@ -443,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/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 {
@@ -124,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; }
 }
 

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, {