taskchef 7.23.3 → 7.24.0

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

@@ -0,0 +1,71 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import type { NotificationSnapshot } from "../types";
+import { NotificationCenter } from "./NotificationCenter";
+
+const notification: NotificationSnapshot = {
+  id: "task-completed",
+  taskId: "11111111-1111-4111-8111-111111111111",
+  title: "Review checkout reconciliation",
+  status: "completed",
+  event: "completed",
+  turnRef: "turn-one",
+  turnId: null,
+  timestamp: "2026-08-30T08:10:00.000Z",
+  summary: "Review completed.",
+};
+
+afterEach(cleanup);
+
+test("notification portal stays non-modal until the operator chooses an action", () => {
+  const onOpen = vi.fn();
+  const onDismiss = vi.fn();
+  render(
+    <MantineProvider>
+      <button autoFocus type="button">Detail action</button>
+      <NotificationCenter
+        notifications={[notification]}
+        onClear={() => {}}
+        onDismiss={onDismiss}
+        onOpen={onOpen}
+        tasks={[fixtureTask()]}
+      />
+    </MantineProvider>,
+  );
+  expect(screen.getByRole("button", { name: "Detail action" })).toHaveFocus();
+  const panel = screen.getByRole("region", { name: "Task notifications" });
+  expect(panel).toBeVisible();
+  expect(panel.querySelector(".taskchef-notification-list")).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /Open current task details/ })).toHaveAccessibleDescription(
+    /Review completed\. \d+ hours ago/,
+  );
+  expect(panel.nextElementSibling).toHaveTextContent(
+    /Task completed\. Review checkout reconciliation\. Review completed\. Turn ref turn-one\. \d+ hours ago\./,
+  );
+  fireEvent.click(screen.getByRole("button", { name: /Open current task details/ }));
+  expect(onOpen).toHaveBeenCalledWith(notification);
+  fireEvent.click(screen.getByRole("button", { name: /Dismiss Task completed notification/ }));
+  expect(onDismiss).toHaveBeenCalledWith(notification);
+});
+
+test("can render inside a focus-trapped task detail", () => {
+  render(
+    <MantineProvider>
+      <div data-testid="detail-dialog">
+        <NotificationCenter
+          notifications={[notification]}
+          onClear={() => {}}
+          onDismiss={() => {}}
+          onOpen={() => {}}
+          tasks={[fixtureTask()]}
+          withinPortal={false}
+        />
+      </div>
+    </MantineProvider>,
+  );
+  expect(screen.getByTestId("detail-dialog")).toContainElement(
+    screen.getByRole("region", { name: "Task notifications" }),
+  );
+});

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

@@ -0,0 +1,111 @@
+import { ActionIcon, Box, Button, Group, Paper, Portal, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
+import { IconBell, IconX } from "@tabler/icons-react";
+import { notificationDismissLabel, notificationOpenLabel, notificationTitle } from "../../state.js";
+import { formatRelativeTime } from "../../time.js";
+import type { NotificationSnapshot, Task } from "../types";
+import { StatusBadge } from "./StatusBadge";
+
+export function NotificationCenter({
+  notifications,
+  announcements = notifications,
+  onClear,
+  onDismiss,
+  onOpen,
+  tasks,
+  withinPortal = true,
+}: {
+  announcements?: NotificationSnapshot[];
+  notifications: NotificationSnapshot[];
+  onClear: () => void;
+  onDismiss: (notification: NotificationSnapshot) => void;
+  onOpen: (notification: NotificationSnapshot) => void;
+  tasks: Task[];
+  withinPortal?: boolean;
+}) {
+  if (notifications.length === 0) return null;
+  const content = (
+    <>
+      <Paper
+        aria-label="Task notifications"
+        className="taskchef-notifications"
+        p="sm"
+        radius="md"
+        role="region"
+        shadow="xl"
+        withBorder
+      >
+        <Group justify="space-between" mb="xs">
+          <Group gap={6}>
+            <IconBell aria-hidden size={16} />
+            <Text fw={700} size="sm">Updates</Text>
+          </Group>
+          <Button onClick={onClear} size="compact-xs" variant="subtle">Clear all</Button>
+        </Group>
+        <ScrollArea.Autosize className="taskchef-notification-scroll" mah="min(55vh, 520px)" type="auto">
+          <Stack className="taskchef-notification-list" gap={6}>
+            {notifications.map((notification) => {
+              const available = tasks.some((task) => task.id === notification.taskId);
+              const descriptionId = `notification-${Math.abs(hash(notification.id))}`;
+              const summaryId = `${descriptionId}-summary`;
+              const metadataId = `${descriptionId}-metadata`;
+              return (
+                <Paper className="taskchef-notification" key={notification.id} p="xs" radius="sm">
+                  <Group align="flex-start" gap="xs" wrap="nowrap">
+                    <button
+                      aria-describedby={[notification.summary ? summaryId : null, metadataId].filter(Boolean).join(" ")}
+                      aria-label={notificationOpenLabel(notification, available)}
+                      className="taskchef-notification-open"
+                      onClick={() => onOpen(notification)}
+                      type="button"
+                    >
+                      <Group gap="xs" justify="space-between" wrap="nowrap">
+                        <Text fw={700} size="sm">{notificationTitle(notification)}</Text>
+                        <StatusBadge status={notification.status} />
+                      </Group>
+                      <Text lineClamp={1} size="sm">{notification.title}</Text>
+                      {notification.summary && <Text className="taskchef-preserve-lines" id={summaryId} lineClamp={3} size="xs">{notification.summary}</Text>}
+                      <Text c="dimmed" id={metadataId} size="xs">
+                        {formatRelativeTime(notification.timestamp)}{available ? "" : " · Task no longer available"}
+                      </Text>
+                    </button>
+                    <Tooltip label="Dismiss notification">
+                      <ActionIcon
+                        aria-label={notificationDismissLabel(notification)}
+                        color="gray"
+                        onClick={() => onDismiss(notification)}
+                        size="compact-sm"
+                        variant="subtle"
+                      >
+                        <IconX aria-hidden size={14} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Group>
+                </Paper>
+              );
+            })}
+          </Stack>
+        </ScrollArea.Autosize>
+      </Paper>
+      <Box aria-atomic="true" aria-live="polite" className="taskchef-visually-hidden" role="status">
+        {announcements.map(notificationAnnouncement).join(" ")}
+      </Box>
+    </>
+  );
+  return withinPortal ? <Portal>{content}</Portal> : content;
+}
+
+function notificationAnnouncement(notification: NotificationSnapshot) {
+  return [
+    notificationTitle(notification),
+    notification.title,
+    notification.summary,
+    notification.turnRef ? `Turn ref ${notification.turnRef}` : null,
+    formatRelativeTime(notification.timestamp),
+  ].filter(Boolean).map((part) => String(part).replace(/[.\s]+$/, "")).join(". ") + ".";
+}
+
+function hash(value: string) {
+  let result = 0;
+  for (const character of value) result = ((result << 5) - result + character.charCodeAt(0)) | 0;
+  return result;
+}

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

@@ -0,0 +1,28 @@
+import { Tooltip, UnstyledButton } from "@mantine/core";
+import { IconClock } from "@tabler/icons-react";
+import { createContext, useContext, useState, type ReactNode } from "react";
+import { formatExactTime, formatRelativeTime } from "../../time.js";
+
+const RelativeTimeClock = createContext<number | null>(null);
+
+export function RelativeTimeProvider({ children, now }: { children: ReactNode; now: number }) {
+  return <RelativeTimeClock value={now}>{children}</RelativeTimeClock>;
+}
+
+export function RelativeTime({ label, value }: { label: string; value: string | null | undefined }) {
+  const [exact, setExact] = useState(false);
+  useContext(RelativeTimeClock);
+  const text = exact ? formatExactTime(value) : formatRelativeTime(value);
+  return (
+    <Tooltip label={exact ? "Show relative time" : "Show exact time"}>
+      <UnstyledButton
+        aria-label={`${label}: ${text}. ${exact ? "Show relative time" : "Show exact time"}`}
+        className="taskchef-time"
+        onClick={() => setExact((value) => !value)}
+      >
+        <IconClock aria-hidden size={12} />
+        <span className="taskchef-time-label">{text}</span>
+      </UnstyledButton>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export function ShimmerText({ children, className = "", ...props }: ComponentPropsWithoutRef<"span">) {
+  return (
+    <span className={`taskchef-shimmer ${className}`.trim()} data-animation="text-shimmer" {...props}>
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { Badge } from "@mantine/core";
+import { statusColor, statusLabel } from "../presentation";
+import type { Task } from "../types";
+
+export function StatusBadge({ status }: { status: Task["status"] | "interrupted" }) {
+  return <Badge className="taskchef-status-badge" color={statusColor(status)} size="sm" variant="light">{statusLabel(status)}</Badge>;
+}

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

@@ -0,0 +1,62 @@
+import { Box, Button, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+import { latestTurnPresentation } from "../../state.js";
+import type { Task } from "../types";
+import { GitHubLinks } from "./GitHubLinks";
+import { RelativeTime } from "./RelativeTime";
+import { ShimmerText } from "./ShimmerText";
+import { StatusBadge } from "./StatusBadge";
+
+export function TaskCard({
+  onOpenCodex,
+  onOpenDetail,
+  task,
+}: {
+  onOpenCodex: (task: Task) => void;
+  onOpenDetail: (task: Task) => void;
+  task: Task;
+}) {
+  const latest = latestTurnPresentation(task);
+  return (
+    <Paper className="taskchef-task-row" component="article" p="md" radius="md" withBorder>
+      <Stack className="taskchef-task-main" gap="sm">
+          <Box>
+            <Group align="flex-start" gap="sm" justify="space-between" wrap="nowrap">
+              <Title order={3} size="h5">
+                <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">
+                  {task.title}
+                </button>
+              </Title>
+              <StatusBadge status={task.status} />
+            </Group>
+            <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
+          </Box>
+
+          <Box className="taskchef-summary-grid">
+            <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
+            <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">{latest.requestSummary}</Text>
+            <Text c="dimmed" className="taskchef-field-label" size="xs">Result</Text>
+            <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">
+              {latest.resultStatus === "working"
+                ? <ShimmerText>{latest.resultSummary}</ShimmerText>
+                : latest.resultSummary}
+            </Text>
+          </Box>
+
+          <GitHubLinks task={task} />
+          <Group 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>
+          </Group>
+      </Stack>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, expect, test, vi } from "vitest";
+import { ManualTransitionConfirmation, type TerminalStatus } from "./TaskDetail";
+
+afterEach(cleanup);
+
+test("clears a manual-transition confirmation only after success", async () => {
+  const onTransition = vi.fn().mockResolvedValue({ ok: true });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  expect(screen.getByRole("alert")).toHaveTextContent("Mark task completed?");
+  fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+  await waitFor(() => expect(onTransition).toHaveBeenCalledWith("completed", expect.any(String)));
+  await waitFor(() => expect(screen.queryByRole("alert")).not.toBeInTheDocument());
+  await waitFor(() => expect(screen.getByRole("heading", { name: "Task title" })).toHaveFocus());
+});
+
+test("retains a manual-transition confirmation after failure", async () => {
+  const onTransition = vi.fn().mockResolvedValue({ ok: false });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+  await waitFor(() => expect(onTransition).toHaveBeenCalledWith("completed", expect.any(String)));
+  expect(screen.getByRole("alert")).toHaveTextContent("Mark task completed?");
+});
+
+test("reuses an action ID for retryable failures and rotates it after a stale task", async () => {
+  const onTransition = vi.fn()
+    .mockResolvedValueOnce({ ok: false })
+    .mockResolvedValueOnce({ ok: false, rotateActionId: true })
+    .mockResolvedValueOnce({ ok: false });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  const confirm = screen.getByRole("button", { name: "Confirm" });
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(1));
+  const firstActionId = onTransition.mock.calls[0][1];
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(2));
+  expect(onTransition.mock.calls[1][1]).toBe(firstActionId);
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(3));
+  expect(onTransition.mock.calls[2][1]).not.toBe(firstActionId);
+});
+
+function ConfirmationHarness({ onTransition }: { onTransition: (status: TerminalStatus, actionId: string) => Promise<{ ok: boolean; rotateActionId?: boolean }> }) {
+  const [opened, setOpened] = useState(true);
+  return (
+    <MantineProvider>
+      <h2 id="task-detail-title" tabIndex={-1}>Task title</h2>
+      {opened && (
+        <ManualTransitionConfirmation
+          busy={false}
+          onCancel={() => setOpened(false)}
+          onTransition={onTransition}
+          status="completed"
+        />
+      )}
+    </MantineProvider>
+  );
+}

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

@@ -0,0 +1,251 @@
+import {
+  ActionIcon,
+  Alert,
+  Box,
+  Button,
+  Divider,
+  Drawer,
+  Group,
+  Menu,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+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 { RelativeTime } from "./RelativeTime";
+import { StatusBadge } from "./StatusBadge";
+import { UsagePanel } from "./UsagePanel";
+
+export type TerminalStatus = "completed" | "failed";
+export interface ManualTransitionResult {
+  ok: boolean;
+  rotateActionId?: boolean;
+}
+
+export function TaskDetail({
+  busy,
+  error,
+  highlightTurnRef,
+  onClose,
+  onCopy,
+  onOpenCodex,
+  onTransition,
+  opened,
+  task,
+  notifications,
+  notice,
+}: {
+  busy: boolean;
+  error: string | null;
+  highlightTurnRef: string | null;
+  onClose: () => void;
+  onCopy: () => void;
+  onOpenCodex: () => void;
+  onTransition: (status: TerminalStatus, actionId: string) => Promise<ManualTransitionResult>;
+  opened: boolean;
+  task: Task | null;
+  notifications?: ReactNode;
+  notice?: string | null;
+}) {
+  const mobile = useMediaQuery("(max-width: 48em)");
+  const [confirmStatus, setConfirmStatus] = useState<TerminalStatus | null>(null);
+  useEffect(() => {
+    if (!opened) setConfirmStatus(null);
+  }, [opened]);
+  useEffect(() => {
+    if (opened && highlightTurnRef) {
+      requestAnimationFrame(() => {
+        document.querySelector<HTMLElement>(`[data-turn-ref="${CSS.escape(highlightTurnRef)}"]`)?.focus();
+      });
+    }
+  }, [highlightTurnRef, opened, task?.turns?.length, task?.updatedAt]);
+  useEffect(() => {
+    if (confirmStatus && (!task || !manualTransitionTargets(task).includes(confirmStatus))) {
+      setConfirmStatus(null);
+    }
+  }, [confirmStatus, task?.status]);
+
+  if (!task) return null;
+  const transitionTargets = manualTransitionTargets(task);
+  const content = (
+    <Stack gap="lg">
+      {notifications}
+      <Box>
+        <Group align="flex-start" gap="sm" justify="space-between" wrap="nowrap">
+          <Box>
+            <Text c="teal" fw={700} size="xs" tt="uppercase">{task.project.name}</Text>
+            <Title id="task-detail-title" order={2} size="h3" tabIndex={-1}>{task.title}</Title>
+          </Box>
+          <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>
+          <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
+            <Menu.Target>
+              <Tooltip label="More task actions">
+                <ActionIcon aria-label="More task actions" disabled={busy} variant="default">
+                  <IconDots aria-hidden size={17} />
+                </ActionIcon>
+              </Tooltip>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item leftSection={<IconClipboard size={14} />} onClick={onCopy}>Copy Task ID</Menu.Item>
+              {transitionTargets.includes("completed") && (
+                <Menu.Item leftSection={<IconCheck size={14} />} onClick={() => setConfirmStatus("completed")}>Mark completed</Menu.Item>
+              )}
+              {transitionTargets.includes("failed") && (
+                <Menu.Item color="red" leftSection={<IconX size={14} />} onClick={() => setConfirmStatus("failed")}>Mark failed</Menu.Item>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        </Group>
+        <Box mt="sm">
+          <GitHubLinks task={task} />
+        </Box>
+      </Box>
+
+      {confirmStatus && (
+        <ManualTransitionConfirmation
+          key={confirmStatus}
+          busy={busy}
+          onCancel={() => setConfirmStatus(null)}
+          onTransition={onTransition}
+          status={confirmStatus}
+        />
+      )}
+      {notice && <Alert color="teal" role="status">{notice}</Alert>}
+      {error && <Alert color="red" role="alert">{error}</Alert>}
+
+      <section aria-labelledby="usage-heading">
+        <Title id="usage-heading" mb="xs" order={3} size="h5">Usage</Title>
+        <UsagePanel task={task} />
+      </section>
+      <Divider />
+      <section aria-labelledby="activity-heading">
+        <Title id="activity-heading" mb="sm" order={3} size="h5">Activity timeline</Title>
+        <ActivityTimeline highlightTurnRef={highlightTurnRef} task={task} />
+      </section>
+      <section aria-labelledby="instruction-heading">
+        <Title id="instruction-heading" mb="xs" order={3} size="h5">Original instruction</Title>
+        <Box className="taskchef-code-panel" component="pre">{task.instruction}</Box>
+      </section>
+      <section aria-labelledby="metadata-heading">
+        <Title id="metadata-heading" mb="xs" order={3} size="h5">Metadata</Title>
+        <dl className="taskchef-metadata">
+          <dt>Task ID</dt><dd>{task.id}</dd>
+          <dt>Thread ID</dt><dd>{task.threadId ?? "—"}</dd>
+          <dt>Current turn ref</dt><dd>{task.turnRef ?? "—"}</dd>
+          <dt>Project path</dt><dd>{task.project.path}</dd>
+          <dt>Created</dt><dd><RelativeTime label="Created time" value={task.createdAt} /></dd>
+          <dt>Updated</dt><dd><RelativeTime label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} /></dd>
+          <dt>Updated by</dt><dd>{task.updatedBy ?? "—"}</dd>
+        </dl>
+      </section>
+    </Stack>
+  );
+
+  if (mobile) {
+    return (
+      <Drawer
+        closeOnClickOutside={!busy}
+        closeOnEscape={!busy}
+        onClose={onClose}
+        opened={opened}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 2 }}
+        position="bottom"
+        scrollAreaComponent={ScrollArea.Autosize}
+        size="92%"
+        title={<span className="taskchef-visually-hidden">Task details</span>}
+        trapFocus
+        zIndex={300}
+      >
+        {content}
+      </Drawer>
+    );
+  }
+  return (
+    <Modal
+      aria-labelledby="task-detail-title"
+      closeOnClickOutside={!busy}
+      closeOnEscape={!busy}
+      onClose={onClose}
+      opened={opened}
+      overlayProps={{ backgroundOpacity: 0.55, blur: 2 }}
+      scrollAreaComponent={ScrollArea.Autosize}
+      size="min(820px, calc(100vw - 32px))"
+      title={<span className="taskchef-visually-hidden">Task details</span>}
+      trapFocus
+      zIndex={300}
+    >
+      {content}
+    </Modal>
+  );
+}
+
+function manualTransitionTargets(task: Task): TerminalStatus[] {
+  return task.status === "completed"
+    ? ["failed"]
+    : task.status === "failed"
+      ? ["completed"]
+      : task.status === "working" || task.status === "needs_input"
+        ? ["completed", "failed"]
+        : [];
+}
+
+export function ManualTransitionConfirmation({
+  busy,
+  onCancel,
+  onTransition,
+  status,
+}: {
+  busy: boolean;
+  onCancel: () => void;
+  onTransition: (status: TerminalStatus, actionId: string) => Promise<ManualTransitionResult>;
+  status: TerminalStatus;
+}) {
+  const actionId = useRef(crypto.randomUUID());
+  return (
+    <Alert color={status === "failed" ? "red" : "teal"} role="alert" title={`Mark task ${status}?`}>
+      <Text mb="sm" size="sm">This interrupts active work and appends an audited manual dashboard turn.</Text>
+      <Group gap="xs">
+        <Button
+          color={status === "failed" ? "red" : "teal"}
+          loading={busy}
+          onClick={async () => {
+            const result = await onTransition(status, actionId.current);
+            if (result.ok) {
+              onCancel();
+              requestAnimationFrame(() => document.getElementById("task-detail-title")?.focus());
+            }
+            else if (result.rotateActionId) actionId.current = crypto.randomUUID();
+          }}
+          size="compact-sm"
+        >
+          Confirm
+        </Button>
+        <Button disabled={busy} onClick={onCancel} size="compact-sm" variant="default">Cancel</Button>
+      </Group>
+    </Alert>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { Box, Group, Paper, Text } from "@mantine/core";
+import { IconCoins } from "@tabler/icons-react";
+import type { Task } from "../types";
+import { 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 values = [
+    [usage.knownSoFar ? "Tokens · known so far" : "Tokens", new Intl.NumberFormat().format(usage.usage.totalTokens)],
+    ["Estimated cost", usage.usage.estimatedCostUsd == null ? "—" : `$${usage.usage.estimatedCostUsd.toFixed(4)}`],
+    ["Model", Object.keys(usage.usage.models ?? {}).join(", ") || "—"],
+    ["Cache ratio", cacheRatio],
+  ] as const;
+  return (
+    <Box aria-live="polite" className="taskchef-metrics">
+      {values.map(([label, value]) => (
+        <Paper className="taskchef-metric" key={label} p="sm" radius="md" withBorder>
+          <Text c="dimmed" size="xs">{label}</Text>
+          <Text className="taskchef-metric-value" fw={650} size="sm">{value}</Text>
+        </Paper>
+      ))}
+    </Box>
+  );
+}