taskchef 7.25.1 → 7.26.0

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

@@ -0,0 +1,202 @@
+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";
+import type { DashboardSnapshot } from "./types";
+
+const apiMocks = vi.hoisted(() => ({
+  connectDashboard: vi.fn(),
+  dashboardVersion: vi.fn(),
+  manualTransition: vi.fn(),
+  openInCodex: vi.fn(),
+  taskDetail: vi.fn(),
+}));
+
+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(() => {
+  vi.clearAllMocks();
+  apiMocks.dashboardVersion.mockResolvedValue("7.25.1");
+});
+
+test("places the filtered task count below the toolbar and updates it from live snapshots", () => {
+  const recent = new Date().toISOString();
+  const tasks = [
+    fixtureTask({
+      id: "11111111-1111-4111-8111-111111111111",
+      project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+      status: "completed",
+      meaningfulUpdatedAt: recent,
+      updatedAt: recent,
+    }),
+    fixtureTask({
+      id: "22222222-2222-4222-8222-222222222222",
+      project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+      meaningfulUpdatedAt: recent,
+      updatedAt: recent,
+    }),
+    fixtureTask({
+      id: "33333333-3333-4333-8333-333333333333",
+      status: "completed",
+    }),
+  ];
+  let onSnapshot: ((snapshot: DashboardSnapshot) => void) | undefined;
+  apiMocks.connectDashboard.mockImplementation((handlers) => {
+    onSnapshot = handlers.onSnapshot;
+    return { close: vi.fn() };
+  });
+
+  render(
+    <DashboardApp
+      initialFilters={{ date: "24h", project: "Another project", status: "completed" }}
+      initialTasks={tasks}
+    />,
+  );
+  const projectFilter = screen.getByRole("combobox", { name: "Project" });
+  const dateFilter = screen.getByRole("combobox", { name: "Updated" });
+  const toolbar = document.querySelector<HTMLElement>(".taskchef-toolbar");
+  const summary = document.querySelector<HTMLElement>(".taskchef-results-summary");
+  const taskList = screen.getByRole("region", { name: "Tasks" });
+
+  expect(projectFilter).toHaveValue("Another project");
+  expect(dateFilter).toHaveValue("Latest 24 hours");
+  expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
+  expect(summary).toHaveTextContent("Tasks: 1 of 3");
+  expect(toolbar).not.toContainElement(summary);
+  expect(toolbar?.nextElementSibling).toBe(summary);
+  expect(taskList).toHaveAttribute("aria-describedby", summary?.id);
+
+  act(() => {
+    onSnapshot?.({
+      tasks: [
+        tasks[0],
+        fixtureTask({
+          id: "44444444-4444-4444-8444-444444444444",
+          project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+          status: "completed",
+          meaningfulUpdatedAt: recent,
+          updatedAt: recent,
+        }),
+      ],
+    });
+  });
+
+  expect(summary).toHaveTextContent("Tasks: 2 of 2");
+  expect(summary).toHaveAttribute("aria-live", "polite");
+}, 60_000);

package/src/dashboard/react/App.tsx

@@ -77,20 +77,36 @@ interface NotificationState {
   signatures: Map<string, string>;
 }
 
+export function TaskResultsSummary({
+  totalCount,
+  visibleCount,
+}: {
+  totalCount: number;
+  visibleCount: number;
+}) {
+  return (
+    <Text aria-live="polite" className="taskchef-results-summary" id="task-results-summary">
+      Tasks: {visibleCount} of {totalCount}
+    </Text>
+  );
+}
+
 export function DashboardApp({
   connect = true,
+  initialFilters = {},
   initialTasks = [],
 }: {
   connect?: boolean;
+  initialFilters?: { date?: string; project?: string; status?: string };
   initialTasks?: Task[];
 }) {
   const [tasks, setTasks] = useState<Task[]>(initialTasks);
   const [connected, setConnected] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
   const [version, setVersion] = useState<string | null>(null);
-  const [project, setProject] = useState("");
-  const [status, setStatus] = useState("");
-  const [date, setDate] = useState("all");
+  const [project, setProject] = useState(initialFilters.project ?? "");
+  const [status, setStatus] = useState(initialFilters.status ?? "");
+  const [date, setDate] = useState(initialFilters.date ?? "all");
   const [now, setNow] = useState(() => Date.now());
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [detailOpened, setDetailOpened] = useState(false);
@@ -310,10 +326,6 @@ export function DashboardApp({
                     size="sm"
                     value={date}
                   />
-                  <Box className="taskchef-task-count-field">
-                    <Text className="taskchef-filter-label" mb={3}>Tasks</Text>
-                    <Text className="taskchef-count-value" size="sm">{visible.length} of {tasks.length}</Text>
-                  </Box>
                 </Group>
                 <Box>
                   <Text className="taskchef-filter-label" mb={5}>Status</Text>
@@ -322,6 +334,8 @@ export function DashboardApp({
               </Stack>
             </Paper>
 
+            <TaskResultsSummary totalCount={tasks.length} visibleCount={visible.length} />
+
             {message && (
               <Alert color="yellow" icon={<IconAlertTriangle aria-hidden size={17} />} mt="md" role="status">
                 <Group gap="sm" justify="space-between" wrap="nowrap">
@@ -331,7 +345,7 @@ export function DashboardApp({
               </Alert>
             )}
 
-            <Stack aria-label="Tasks" component="section" gap="sm" mt="md">
+            <Stack aria-describedby="task-results-summary" aria-label="Tasks" component="section" gap="sm" mt="xs">
               {visible.map((task: Task) => (
                 <TaskCard key={task.id} onOpenCodex={handleOpenCodex} onOpenDetail={(value) => void loadDetail(value)} task={task} />
               ))}

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" : ""}`}
@@ -47,15 +48,24 @@ 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}
+                />
+                <TurnReportedWorkMetric turn={turn} />
+              </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 +74,50 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
     </Stack>
   );
 }
+
+function TurnReportedWorkMetric({ turn }: { turn: TaskTurn }) {
+  const now = useLiveNow(turn.result === null);
+  const elapsed = turnReportedWorkView(turn, now);
+  return (
+    <TurnMetric
+      accessibleLabel={elapsed.accessibleLabel}
+      label={elapsed.label}
+      title={elapsed.title}
+      value={elapsed.value}
+    />
+  );
+}
+
+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/OpenChatButton.test.tsx

@@ -0,0 +1,22 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { OpenChatButton } from "./OpenChatButton";
+
+afterEach(cleanup);
+
+test("uses the shared open-chat presentation and accessible task label", () => {
+  const onClick = vi.fn();
+  render(
+    <MantineProvider>
+      <OpenChatButton onClick={onClick} taskTitle="Review checkout reconciliation" />
+    </MantineProvider>,
+  );
+
+  const button = screen.getByRole("button", { name: "Open chat for Review checkout reconciliation" });
+  expect(button).toHaveTextContent("Open chat");
+  expect(button).toHaveAttribute("data-variant", "default");
+  expect(button.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+  fireEvent.click(button);
+  expect(onClick).toHaveBeenCalledOnce();
+});

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

@@ -0,0 +1,25 @@
+import { Button } from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+
+export function OpenChatButton({
+  loading,
+  onClick,
+  taskTitle,
+}: {
+  loading?: boolean;
+  onClick: () => void;
+  taskTitle: string;
+}) {
+  return (
+    <Button
+      aria-label={`Open chat for ${taskTitle}`}
+      leftSection={<IconExternalLink aria-hidden size={15} />}
+      loading={loading}
+      onClick={onClick}
+      size="compact-sm"
+      variant="default"
+    >
+      Open chat
+    </Button>
+  );
+}

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

@@ -1,9 +1,9 @@
-import { Box, Button, Group, Paper, Stack, Text, Title } from "@mantine/core";
-import { IconExternalLink } from "@tabler/icons-react";
+import { Box, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import { latestTurnPresentation } from "../../state.js";
 import type { Task } from "../types";
 import { GitHubLinks } from "./GitHubLinks";
 import { LinkedText } from "./LinkedText";
+import { OpenChatButton } from "./OpenChatButton";
 import { RelativeTime } from "./RelativeTime";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
@@ -53,15 +53,7 @@ export function TaskCard({
           <GitHubLinks task={task} />
           <Group className="taskchef-card-footer" gap="md" justify="space-between">
             <RelativeTime label={`Updated time for ${task.title}`} value={task.meaningfulUpdatedAt ?? task.updatedAt} />
-            <Button
-              aria-label={`Open chat for ${task.title}`}
-              leftSection={<IconExternalLink aria-hidden size={15} />}
-              onClick={() => onOpenCodex(task)}
-              size="compact-sm"
-              variant="default"
-            >
-              Open chat
-            </Button>
+            <OpenChatButton onClick={() => onOpenCodex(task)} taskTitle={task.title} />
           </Group>
       </Stack>
     </Paper>

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,90 @@ 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;
+  expect(metrics).not.toBeNull();
+  expect(within(metrics).getByText("Tokens").nextSibling).toHaveTextContent("330");
+  expect(within(metrics).getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
+  expect(within(metrics).getByText("Elapsed").nextSibling).toHaveTextContent("18m 32s");
+  expect(within(metrics).getByLabelText(/completed turn reported wall-clock elapsed time/i)).toBeVisible();
+  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.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 32s");
+  expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("Pending");
+  expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("Pending");
+
+  act(() => {
+    now += 2_000;
+    tick?.();
+  });
+
+  expect(screen.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 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.getByText("Elapsed").nextSibling).toHaveTextContent("Unavailable");
+  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i)).toBeVisible();
+  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/TaskDetail.tsx

@@ -19,13 +19,13 @@ import {
   IconCheck,
   IconClipboard,
   IconDots,
-  IconExternalLink,
   IconX,
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { Task } from "../types";
 import { ActivityTimeline } from "./ActivityTimeline";
 import { GitHubLinks } from "./GitHubLinks";
+import { OpenChatButton } from "./OpenChatButton";
 import { RelativeTime } from "./RelativeTime";
 import { StatusBadge } from "./StatusBadge";
 import { UsagePanel } from "./UsagePanel";
@@ -93,14 +93,7 @@ export function TaskDetail({
           <StatusBadge status={task.status} />
         </Group>
         <Group gap="xs" mt="md">
-          <Button
-            leftSection={<IconExternalLink aria-hidden size={15} />}
-            loading={busy}
-            onClick={onOpenCodex}
-            size="compact-sm"
-          >
-            Open chat
-          </Button>
+          <OpenChatButton loading={busy} onClick={onOpenCodex} taskTitle={task.title} />
           <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
             <Menu.Target>
               <Tooltip label="More task actions">