taskchef 7.25.2 → 7.26.1

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

@@ -1,4 +1,5 @@
 import { act, cleanup, render, screen } from "@testing-library/react";
+import type { ElementType, ReactNode } from "react";
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { DashboardApp } from "./App";
 import { fixtureTask } from "./fixtures";
@@ -16,6 +17,117 @@ vi.mock("./api", () => apiMocks);
 vi.mock("./components/NotificationCenter", () => ({ NotificationCenter: () => null }));
 vi.mock("./components/TaskCard", () => ({ TaskCard: () => null }));
 vi.mock("./components/TaskDetail", () => ({ TaskDetail: () => null }));
+vi.mock("@tabler/icons-react", async () => {
+  const { createElement } = await vi.importActual<typeof import("react")>("react");
+  const Icon = (props: Record<string, unknown>) => createElement("svg", props);
+  return {
+    IconAlertTriangle: Icon,
+    IconCircleFilled: Icon,
+    IconMoon: Icon,
+    IconSun: Icon,
+  };
+});
+vi.mock("@mantine/core", async () => {
+  const { createElement } = await vi.importActual<typeof import("react")>("react");
+  const primitive = (tag: string) => ({
+    align: _align,
+    c: _color,
+    children,
+    component,
+    fw: _fontWeight,
+    gap: _gap,
+    justify: _justify,
+    mb: _marginBottom,
+    mt: _marginTop,
+    p: _padding,
+    pb: _paddingBottom,
+    radius: _radius,
+    size: _size,
+    ta: _textAlign,
+    tt: _textTransform,
+    withBorder: _withBorder,
+    wrap: _wrap,
+    ...props
+  }: Record<string, unknown> & { children?: ReactNode; component?: ElementType }) => (
+    createElement(component ?? tag, props, children)
+  );
+  const AppShell = Object.assign(primitive("div"), { Main: primitive("main") });
+  const Select = ({
+    "aria-label": ariaLabel,
+    data,
+    label,
+    onChange,
+    value,
+  }: {
+    "aria-label": string;
+    data: Array<string | { label: string; value: string }>;
+    label: string;
+    onChange: (value: string | null) => void;
+    value: string;
+  }) => {
+    const options = data.map((item) => typeof item === "string"
+      ? { label: item, value: item }
+      : item);
+    const selected = options.find((item) => item.value === value)?.label ?? value;
+    return createElement("label", null, label, createElement(
+      "select",
+      {
+        "aria-label": ariaLabel,
+        onChange: (event: { currentTarget: { value: string } }) => {
+          const next = options.find((item) => item.label === event.currentTarget.value);
+          onChange(next?.value ?? null);
+        },
+        value: selected,
+      },
+      options.map((item) => createElement("option", { key: item.value, value: item.label }, item.label)),
+    ));
+  };
+  const SegmentedControl = ({
+    "aria-label": ariaLabel,
+    data,
+    onChange,
+    value,
+  }: {
+    "aria-label": string;
+    data: Array<{ label: string; value: string }>;
+    onChange: (value: string) => void;
+    value: string;
+  }) => createElement(
+    "div",
+    { "aria-label": ariaLabel, role: "radiogroup" },
+    data.map((item) => createElement(
+      "label",
+      { key: item.value },
+      createElement("input", {
+        checked: item.value === value,
+        name: ariaLabel,
+        onChange: () => onChange(item.value),
+        type: "radio",
+      }),
+      item.label,
+    )),
+  );
+  return {
+    ActionIcon: primitive("button"),
+    Alert: primitive("div"),
+    AppShell,
+    Box: primitive("div"),
+    CloseButton: primitive("button"),
+    Container: primitive("div"),
+    Group: primitive("div"),
+    MantineProvider: ({ children }: { children?: ReactNode }) => createElement("div", null, children),
+    Paper: primitive("div"),
+    SegmentedControl,
+    Select,
+    Stack: primitive("div"),
+    Text: primitive("p"),
+    Title: primitive("h1"),
+    Tooltip: primitive("div"),
+    createTheme: (theme: unknown) => theme,
+    useComputedColorScheme: () => "light",
+    useMantineColorScheme: () => ({ setColorScheme: vi.fn() }),
+  };
+});
 
 afterEach(cleanup);
 beforeEach(() => {

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

@@ -1,7 +1,8 @@
 import { Box, Paper, Stack, Text } from "@mantine/core";
 import { mergeProjectedTurns, turnPresentation } from "../../state.js";
-import { turnUsageView } from "../presentation";
-import type { Task } from "../types";
+import { turnReportedWorkView, turnUsageMetricsView } from "../presentation";
+import type { Task, TaskTurn } from "../types";
+import { useEffect, useState } from "react";
 import { RelativeTime } from "./RelativeTime";
 import { LinkedText } from "./LinkedText";
 import { ShimmerText } from "./ShimmerText";
@@ -16,7 +17,7 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
         const presentation = turnPresentation(turn);
         const identity = turn.turnRef ?? turn.turnId ?? `turn-${index}`;
         const highlighted = identity === highlightTurnRef;
-        const usage = turnUsageView(task, turn);
+        const usage = turnUsageMetricsView(task, turn);
         return (
           <Paper
             className={`taskchef-turn${highlighted ? " taskchef-turn-highlighted" : ""}`}
@@ -30,7 +31,10 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
             <Stack gap={7}>
               <Box className="taskchef-turn-heading">
                 <StatusBadge status={presentation.status} />
-                <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+                <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>
@@ -47,15 +51,23 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                     : <LinkedText task={task} text={presentation.summary} />}
                 </Text>
               </Box>
-              <Text
-                c="dimmed"
-                className={usage.kind === "calculating" || usage.kind === "pending" ? "taskchef-turn-usage" : undefined}
-                size="xs"
-              >
-                {usage.kind === "calculating" || usage.kind === "pending"
-                  ? <ShimmerText>{usage.label}</ShimmerText>
-                  : usage.label}
-              </Text>
+              <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>
+              {usage.note && <Text c="dimmed" size="xs">{usage.note}</Text>}
               <Text c="dimmed" className="taskchef-mono" size="xs">Turn ref: {identity ?? "—"}</Text>
             </Stack>
           </Paper>
@@ -64,3 +76,54 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
     </Stack>
   );
 }
+
+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"
+      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>
+  );
+}
+
+function useLiveNow(active: boolean) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!active) return undefined;
+    setNow(Date.now());
+    const interval = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(interval);
+  }, [active]);
+  return now;
+}

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

@@ -1,10 +1,15 @@
 import { MantineProvider } from "@mantine/core";
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { useState } from "react";
 import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { ActivityTimeline } from "./ActivityTimeline";
 import { ManualTransitionConfirmation, type TerminalStatus } from "./TaskDetail";
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
 
 test("clears a manual-transition confirmation only after success", async () => {
   const onTransition = vi.fn().mockResolvedValue({ ok: true });
@@ -44,6 +49,96 @@ test("reuses an action ID for retryable failures and rotates it after a stale ta
   expect(onTransition.mock.calls[2][1]).not.toBe(firstActionId);
 });
 
+test("covers terminal, active, and unavailable timeline metrics", () => {
+  {
+  const task = fixtureTask({
+    status: "completed",
+    turns: [{
+      ...fixtureTask().turns![0],
+      result: {
+        status: "completed",
+        summary: "Done.",
+        updatedAt: "2026-08-30T08:18:32.000Z",
+      },
+    }],
+    usage: {
+      status: "available",
+      turns: { "turn-one": { status: "available", totalTokens: 330, 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");
+  cleanup();
+  }
+
+  {
+  let now = Date.parse("2026-08-30T08:18:32.000Z");
+  let tick: (() => void) | undefined;
+  vi.spyOn(Date, "now").mockImplementation(() => now);
+  vi.spyOn(window, "setInterval").mockImplementation(((handler: TimerHandler) => {
+    tick = handler as () => void;
+    return 1;
+  }) as typeof window.setInterval);
+  vi.spyOn(window, "clearInterval").mockImplementation(() => undefined);
+  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");
+
+  act(() => {
+    now += 2_000;
+    tick?.();
+  });
+
+  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed so far18m 34s");
+  cleanup();
+  vi.restoreAllMocks();
+  }
+
+  {
+  const task = fixtureTask({
+    status: "completed",
+    turns: [{
+      ...fixtureTask().turns![0],
+      startedAt: "2026-08-30T08:18:33.000Z",
+      result: {
+        status: "completed",
+        summary: "Done.",
+        updatedAt: "2026-08-30T08:18:32.000Z",
+      },
+    }],
+    usage: {
+      status: "unavailable",
+      turns: {
+        "turn-one": {
+          status: "unavailable",
+          reason: "Manual dashboard turns do not have usage boundaries.",
+        },
+      },
+    },
+  });
+  render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
+  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i))
+    .toHaveTextContent("ElapsedUnavailable");
+  expect(screen.getByText("Manual dashboard turns do not have usage boundaries.")).toBeVisible();
+  expect(screen.getByLabelText(/tokens unavailable: manual dashboard turns/i)).toBeVisible();
+  }
+});
+
 function ConfirmationHarness({ onTransition }: { onTransition: (status: TerminalStatus, actionId: string) => Promise<{ ok: boolean; rotateActionId?: boolean }> }) {
   const [opened, setOpened] = useState(true);
   return (

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

@@ -1,73 +1,91 @@
-import { Box, Group, Paper, Text } from "@mantine/core";
-import { IconCoins } from "@tabler/icons-react";
+import { Box, Paper, Text } from "@mantine/core";
 import type { Task } from "../types";
 import {
   formatCompactTokens,
   formatEstimatedCost,
   formatFullTokens,
+  taskReportedWorkView,
   usageView,
 } from "../presentation";
 import { ShimmerText } from "./ShimmerText";
 
 export function UsagePanel({ task }: { task: Task }) {
   const usage = usageView(task);
-  if (usage.kind === "pending" || usage.kind === "calculating") {
-    return (
-      <Paper aria-live="polite" className="taskchef-subtle-panel" p="sm" radius="md">
-        <Group gap="xs">
-          <IconCoins aria-hidden size={16} />
-          <Text size="sm"><ShimmerText>{usage.label}</ShimmerText></Text>
-        </Group>
-      </Paper>
-    );
-  }
-  if (usage.kind === "unavailable") {
-    return <Text aria-live="polite" c="dimmed" size="sm">{usage.label}</Text>;
-  }
-  const cached = usage.usage.cachedInputTokens ?? 0;
-  const input = usage.usage.inputTokens ?? 0;
-  const cacheRatio = input + cached > 0 ? `${Math.round((cached / (input + cached)) * 100)}%` : "—";
+  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)}%`
+    : "—";
+  const stateValue = usage.kind === "pending"
+    ? "Pending"
+    : usage.kind === "calculating"
+      ? "Calculating"
+      : "Unavailable";
   const values: Array<{
     accessibleValue?: string;
+    animated?: boolean;
     label: string;
     title?: string;
     value: string;
   }> = [
     {
-      accessibleValue: `${formatFullTokens(usage.usage.totalTokens)} tokens`,
-      label: usage.knownSoFar ? "Tokens · known so far" : "Tokens",
-      title: `${formatFullTokens(usage.usage.totalTokens)} tokens`,
-      value: formatCompactTokens(usage.usage.totalTokens),
+      accessibleValue: ready
+        ? `${formatFullTokens(ready.usage.totalTokens)} tokens`
+        : usage.label,
+      animated: usage.kind === "pending" || usage.kind === "calculating",
+      label: ready?.knownSoFar ? "Tokens · known so far" : "Tokens",
+      title: ready ? `${formatFullTokens(ready.usage.totalTokens)} tokens` : usage.label,
+      value: ready ? formatCompactTokens(ready.usage.totalTokens) : stateValue,
     },
     {
-      accessibleValue: usage.usage.estimatedCostUsd == null
-        ? "Estimated cost unavailable"
-        : `Estimated cost ${formatEstimatedCost(usage.usage.estimatedCostUsd)}`,
+      accessibleValue: ready
+        ? ready.usage.estimatedCostUsd == null
+          ? "Estimated cost unavailable"
+          : `Estimated cost ${formatEstimatedCost(ready.usage.estimatedCostUsd)}`
+        : `Estimated cost ${stateValue.toLowerCase()}${
+          usage.kind === "unavailable" ? `: ${usage.label}` : ""
+        }`,
+      animated: usage.kind === "pending" || usage.kind === "calculating",
       label: "Estimated cost",
-      title: usage.usage.estimatedCostUsd == null
-        ? undefined
-        : `Unrounded estimate: $${usage.usage.estimatedCostUsd}`,
-      value: formatEstimatedCost(usage.usage.estimatedCostUsd),
+      title: ready?.usage.estimatedCostUsd == null
+        ? usage.label
+        : `Unrounded estimate: $${ready.usage.estimatedCostUsd}`,
+      value: ready ? formatEstimatedCost(ready.usage.estimatedCostUsd) : stateValue,
     },
-    { label: "Model", value: Object.keys(usage.usage.models ?? {}).join(", ") || "—" },
-    { label: "Cache ratio", value: cacheRatio },
+    {
+      accessibleValue: reportedWork.accessibleLabel,
+      label: "Total reported work",
+      title: reportedWork.title,
+      value: reportedWork.value,
+    },
+    ...(ready ? [
+      { label: "Model", value: Object.keys(ready.usage.models ?? {}).join(", ") || "—" },
+      { label: "Cache ratio", value: cacheRatio },
+    ] : []),
   ];
   return (
-    <Box aria-live="polite" className="taskchef-metrics">
-      {values.map(({ accessibleValue, label, title, value }) => (
-        <Paper className="taskchef-metric" key={label} p="sm" radius="md" withBorder>
-          <Text c="dimmed" size="xs">{label}</Text>
-          <Text
-            aria-label={accessibleValue}
-            className="taskchef-metric-value"
-            fw={650}
-            size="sm"
-            title={title}
-          >
-            {value}
-          </Text>
-        </Paper>
-      ))}
+    <Box aria-live="polite">
+      <Box className="taskchef-metrics">
+        {values.map(({ accessibleValue, animated, label, title, value }) => (
+          <Paper className="taskchef-metric" key={label} p="sm" radius="md" withBorder>
+            <Text c="dimmed" size="xs">{label}</Text>
+            <Text
+              aria-label={accessibleValue}
+              className="taskchef-metric-value"
+              fw={650}
+              size="sm"
+              title={title}
+            >
+              {animated ? <ShimmerText>{value}</ShimmerText> : value}
+            </Text>
+          </Paper>
+        ))}
+      </Box>
+      {usage.kind === "unavailable" && (
+        <Text c="dimmed" mt="xs" size="xs">{usage.label}</Text>
+      )}
     </Box>
   );
 }