taskchef 8.1.1 → 8.2.0

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 }) {
@@ -29,13 +36,7 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
             withBorder
           >
             <Stack gap={7}>
-              <Box className="taskchef-turn-heading">
-                <StatusBadge status={presentation.status} />
-                <Box className="taskchef-turn-timing">
-                  <RelativeTime label="Turn update time" value={presentation.updatedAt} />
-                  <TurnReportedWork turn={turn} />
-                </Box>
-              </Box>
+              <StatusBadge status={presentation.status} />
               {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
               <Box>
                 <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
@@ -51,22 +52,36 @@ 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>
@@ -81,39 +96,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,7 +79,7 @@ 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", () => {
@@ -92,7 +93,7 @@ describe("task card stats", () => {
       },
     }));
     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(/estimated cost \$12\.34; updating/i)).toHaveTextContent("12.34 · Updating…");
   });
 
   test("places Open chat beneath the status badge and keeps callbacks working", () => {

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

@@ -1,66 +1,36 @@
-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}
@@ -71,8 +41,8 @@ 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}
@@ -80,7 +50,7 @@ export function TaskCardStats({ task }: { task: Task }) {
           title={usage.cost.title}
           value={usage.cost.value}
         />
-      </Box>
-    </Box>
+      </StatCell>
+    </StatsGrid>
   );
 }

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

@@ -69,16 +69,20 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   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();
+  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("330 tokens")).toHaveTextContent("330");
+  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 +98,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 +108,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 +137,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.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" }
@@ -194,13 +201,14 @@ export function turnUsageMetricsView(task: Task, turn: NonNullable<Task["turns"]
     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 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,
@@ -276,7 +284,7 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
       cost: {
         accessibleLabel: `Estimated cost unavailable${reason}`,
         title: view.label,
-        value: "est. n/a",
+        value: NOT_AVAILABLE,
       },
       kind: "unavailable",
       tokens: {
@@ -288,9 +296,10 @@ 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 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 qualifier = view.knownSoFar ? " · Updating…" : "";
   const accessibleQualifier = view.knownSoFar ? "; updating" : "";
   const freshness = view.usage.sourceUpdatedAt ?? view.usage.sampledAt ?? task.usage?.updatedAt ?? null;
@@ -304,7 +313,7 @@ export function listUsageMetricsView(task: Task): ListUsageMetricsView {
       title: `${formattedCost === null
         ? "Estimated cost unavailable"
         : `Unrounded estimate: $${view.usage.estimatedCostUsd}`}${qualifier}.${freshnessLabel}`,
-      value: `${formattedCost === null ? "est. n/a" : `est. ${formattedCost}`}${qualifier}`,
+      value: `${formattedCostAmount ?? NOT_AVAILABLE}${qualifier}`,
     },
     kind: "ready",
     tokens: {

package/src/dashboard/react/styles.css

@@ -56,15 +56,15 @@ 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, .taskchef-card-stat-content { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 3px 4px; 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, .taskchef-stat-content { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 3px 4px; 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, .taskchef-card-stat-content bdi { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
-.taskchef-card-stat-content:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
-.taskchef-card-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2px; }
-.taskchef-card-stat { display: flex; align-items: center; min-width: 0; padding: 4px 10px; }
-.taskchef-card-stat:first-child { padding-inline-start: 0; }
-.taskchef-card-stat + .taskchef-card-stat { border-inline-start: 1px solid var(--taskchef-border); }
+.taskchef-time-label, .taskchef-stat-content bdi { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
+.taskchef-stat-content:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
+.taskchef-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2px; }
+.taskchef-stat { display: flex; align-items: center; min-width: 0; padding: 4px 10px; }
+.taskchef-stat:first-child { padding-inline-start: 0; }
+.taskchef-stat + .taskchef-stat { border-inline-start: 1px solid var(--taskchef-border); }
 .taskchef-empty { border-style: dashed; background: transparent; }
 
 .taskchef-notifications {
@@ -84,13 +84,8 @@ body {
 .taskchef-metric { min-width: 0; background: transparent; }
 .taskchef-metric-value { overflow-wrap: anywhere; }
 .taskchef-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--mantine-spacing-xs); }
-.taskchef-turn { background: var(--taskchef-surface-muted); }
+.taskchef-turn { container-type: inline-size; 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-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; }
 .taskchef-metadata { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); margin: 0; font-size: var(--mantine-font-size-sm); }
@@ -130,9 +125,6 @@ body {
   .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-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; }
 }
 
@@ -142,10 +134,10 @@ body {
 }
 
 @container (max-width: 27.5rem) {
-  .taskchef-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .taskchef-card-stat { padding-block: 8px; }
-  .taskchef-card-stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
-  .taskchef-card-stat:nth-child(n + 3) { border-top: 1px solid var(--taskchef-border); }
+  .taskchef-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .taskchef-stat { padding-block: 8px; }
+  .taskchef-stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
+  .taskchef-stat:nth-child(n + 3) { border-top: 1px solid var(--taskchef-border); }
 }
 
 .taskchef-refresh-spinning {