taskchef 8.7.1 → 9.0.0

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

@@ -1,255 +0,0 @@
-import { MantineProvider } from "@mantine/core";
-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, TaskDetail, type TerminalStatus } from "./TaskDetail";
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-test("shows only metadata available from a DB-backed observed task", () => {
-  renderObservedDetail({
-    archive: false,
-    lastTurnEvent: "inProgress",
-    lastTurnEventAt: null,
-    recentFileActivity: true,
-  });
-
-  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
-  expect(within(metadata).getByText("Archive status")).toBeVisible();
-  expect(within(metadata).getByText("Active")).toBeVisible();
-  expect(within(metadata).queryByText("Location")).not.toBeInTheDocument();
-  expect(within(metadata).getByText("inProgress")).toBeVisible();
-  expect(within(metadata).queryByText("Observed messages")).not.toBeInTheDocument();
-  expect(within(metadata).queryByText("Log bytes sampled")).not.toBeInTheDocument();
-  expect(within(metadata).getByText("Queue reason")).toBeVisible();
-  expect(metadata).not.toHaveTextContent("undefined");
-});
-
-test("shows archived database chat status without claiming a file location", () => {
-  renderObservedDetail({
-    archive: true,
-    lastTurnEvent: "completed",
-    lastTurnEventAt: null,
-    recentFileActivity: false,
-  });
-
-  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
-  expect(within(metadata).getByText("Archive status")).toBeVisible();
-  expect(within(metadata).getByText("Archived")).toBeVisible();
-  expect(within(metadata).queryByText("Location")).not.toBeInTheDocument();
-});
-
-test("keeps log message and byte counts in observed task metadata", () => {
-  renderObservedDetail({
-    archive: true,
-    lastTurnEvent: "completed",
-    lastTurnEventAt: null,
-    recentFileActivity: false,
-    userMessages: 2,
-    assistantMessages: 3,
-    sampledBytes: 1024,
-    fileBytes: 4096,
-  }, "Local Codex log");
-
-  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
-  expect(within(metadata).getByText("Location")).toBeVisible();
-  expect(within(metadata).getByText("Archived sessions")).toBeVisible();
-  expect(within(metadata).getByText("Observed messages")).toBeVisible();
-  expect(within(metadata).getByText("2 user, 3 assistant")).toBeVisible();
-  expect(within(metadata).getByText("Log bytes sampled")).toBeVisible();
-  expect(within(metadata).getByText("1024 of 4096")).toBeVisible();
-});
-
-function renderObservedDetail(observed: NonNullable<ReturnType<typeof fixtureTask>["observed"]>, updatedBy = "Local Codex database") {
-  render(
-    <MantineProvider>
-      <TaskDetail
-        busy={false}
-        error={null}
-        highlightTurnRef={null}
-        onClose={() => {}}
-        onCopy={() => {}}
-        onOpenCodex={() => {}}
-        onTransition={async () => ({ ok: true })}
-        opened
-        readOnly
-        task={fixtureTask({ observed, updatedBy })}
-      />
-    </MantineProvider>,
-  );
-}
-
-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);
-});
-
-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: 1_324_567, estimatedCostUsd: 0.12 } },
-    },
-  });
-  const { container } = render(
-    <MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>,
-  );
-  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();
-  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("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("$");
-  expect(cells[3].querySelector(".tabler-icon-currency-dollar")).not.toBeNull();
-  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("18m 32s");
-  expect(screen.getByLabelText("Tokens pending")).toHaveTextContent("Pending");
-  expect(screen.getByLabelText("Estimated cost pending")).toHaveTextContent("Pending");
-
-  act(() => {
-    now += 2_000;
-    tick?.();
-  });
-
-  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
-    .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.getByLabelText(/elapsed unavailable.*reported wall-clock/i))
-    .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();
-  }
-});
-
-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>
-  );
-}
-
-
-test("read-only Details allows copying an ID without exposing manual status actions", () => {
-  const onCopy = vi.fn();
-  render(<MantineProvider><TaskDetail busy={false} error={null} highlightTurnRef={null} onClose={vi.fn()} onCopy={onCopy} onOpenCodex={vi.fn()} onTransition={vi.fn()} opened readOnly task={fixtureTask()} /></MantineProvider>);
-  expect(screen.queryByRole("button", {name:"More task actions"})).not.toBeInTheDocument();
-  fireEvent.click(screen.getByRole("button", {name:"Copy Task ID"}));
-  expect(onCopy).toHaveBeenCalledOnce();
-});
-
-test("observed web details show the full same-turn request and response", () => {
-  const task=fixtureTask({promptExcerpt:'Short request',promptText:'Full recorded request',replyExcerpt:'Short response',replyText:'Full recorded response',
-    observed:{archive:false,lastTurnEvent:'completed',lastTurnEventAt:null,recentFileActivity:false}});
-  render(<MantineProvider><TaskDetail task={task} opened readOnly busy={false} error={null} highlightTurnRef={null} onClose={()=>{}} onCopy={()=>{}} onOpenCodex={()=>{}} onTransition={async()=>({ok:true})} /></MantineProvider>);
-  expect(screen.getByLabelText('Latest turn request')).toHaveTextContent('Full recorded request');
-  expect(screen.getByLabelText('Latest turn response')).toHaveTextContent('Full recorded response');
-  expect(screen.queryByText('Latest saved reply (excerpt)')).toBeNull();
-});

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

@@ -1,271 +0,0 @@
-import { PullRequestBadges } from "./PullRequestBadges";
-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,
-  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 { TurnContent } from "./TurnContent";
-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,
-  readOnly = false,
-  extraActions,
-}: {
-  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;
-  readOnly?: boolean;
-  extraActions?: React.ReactNode;
-}) {
-  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} label={task.statusLabel} />
-        </Group>
-        <Group gap="xs" mt="md">
-          <OpenChatButton loading={busy} onClick={onOpenCodex} taskTitle={task.title} />
-          {extraActions}
-          {readOnly && <Button leftSection={<IconClipboard size={14} />} onClick={onCopy} variant="default">Copy Task ID</Button>}
-          {!readOnly && <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
-            <Menu.Target>
-              <Tooltip label="More task actions">
-                <ActionIcon aria-label="More task actions" className="taskchef-detail-more" 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">
-          <PullRequestBadges pullRequests={task.pullRequests} />
-          <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>}
-
-      {!readOnly && <section aria-labelledby="usage-heading">
-        <Title id="usage-heading" mb="xs" order={3} size="h5">Usage</Title>
-        <UsagePanel task={task} />
-      </section>}
-      {!readOnly && <Divider />}
-      {!readOnly && <section aria-labelledby="activity-heading">
-        <Title id="activity-heading" mb="sm" order={3} size="h5">Activity timeline</Title>
-        <ActivityTimeline highlightTurnRef={highlightTurnRef} task={task} />
-      </section>}
-      {!readOnly && <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>}
-      {task.observed && <section aria-label="Latest turn"><TurnContent task={task} /></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>
-          {task.observed?.directChildCount !== undefined && <><dt>Direct subagent chats (all history)</dt><dd>{task.observed.directChildCount}</dd></>}
-          {task.observed && <>
-            <dt>Queue reason</dt><dd>{task.summary}</dd>
-            {task.updatedBy === "Local Codex database" ? <>
-              <dt>Archive status</dt><dd>{task.observed.archive ? "Archived" : "Active"}</dd>
-            </> : <>
-              <dt>Location</dt><dd>{task.observed.archive ? "Archived sessions" : "Active sessions"}</dd>
-            </>}
-            {task.statusLabel && <><dt>Schedule</dt><dd>{task.scheduled ? "Active" : "None active"}</dd><dt>Latest input</dt><dd>{task.inputSource}</dd><dt>Done reason</dt><dd>{task.observed.archive ? "Archived" : task.manualDone ? "Manual mark" : "Not marked"}</dd></>}
-            <dt>Latest turn event</dt><dd>{task.observed.lastTurnEvent ?? "Unknown"}</dd>
-            {task.observed.userMessages !== undefined && task.observed.assistantMessages !== undefined && <>
-              <dt>Observed messages</dt><dd>{task.observed.userMessages} user, {task.observed.assistantMessages} assistant</dd>
-            </>}
-            {task.observed.sampledBytes !== undefined && task.observed.fileBytes !== undefined && <>
-              <dt>Log bytes sampled</dt><dd>{task.observed.sampledBytes} of {task.observed.fileBytes}</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(600px, 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

@@ -1,96 +0,0 @@
-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);
-  const reportedWork = taskReportedWorkView(task);
-  const ready = usage.kind === "ready" ? usage : null;
-  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"
-      ? "Calculating"
-      : "n/a";
-  const accessibleState = usage.kind === "unavailable" ? "unavailable" : stateValue.toLowerCase();
-  const values: Array<{
-    accessibleValue?: string;
-    animated?: boolean;
-    label: string;
-    title?: string;
-    value: string;
-  }> = [
-    {
-      accessibleValue: ready
-        ? `${formatFullTokens(ready.usage.totalTokens)} tokens`
-        : usage.label,
-      animated: usage.kind === "pending" || usage.kind === "calculating" || ready?.knownSoFar,
-      label: "Tokens",
-      title: ready ? `${formatFullTokens(ready.usage.totalTokens)} tokens` : usage.label,
-      value: ready ? `${ready.usage.partial ? "≥" : ""}${formatCompactTokens(ready.usage.totalTokens)}` : stateValue,
-    },
-    {
-      accessibleValue: ready
-        ? ready.usage.estimatedCostUsd == null
-          ? "Estimated cost unavailable"
-          : `Estimated cost ${formatEstimatedCost(ready.usage.estimatedCostUsd)}`
-        : `Estimated cost ${accessibleState}${
-          usage.kind === "unavailable" ? `: ${usage.label}` : ""
-        }`,
-      animated: usage.kind === "pending"
-        || usage.kind === "calculating"
-        || (ready?.knownSoFar && hasEstimatedCost),
-      label: "Estimated cost",
-      title: ready?.usage.estimatedCostUsd == null
-        ? "Estimated cost unavailable"
-        : `Unrounded estimate: $${ready.usage.estimatedCostUsd}`,
-      value: ready
-        ? ready.usage.estimatedCostUsd == null ? "n/a" : `${ready.usage.costPartial ? "≥" : ""}${formatEstimatedCost(ready.usage.estimatedCostUsd)}`
-        : stateValue,
-    },
-    {
-      accessibleValue: reportedWork.accessibleLabel,
-      label: "Duration",
-      title: reportedWork.title,
-      value: reportedWork.value,
-    },
-    {
-      accessibleValue: models || "Models unavailable",
-      label: "Models",
-      title: models || "Models unavailable",
-      value: models || "n/a",
-    },
-  ];
-  return (
-    <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" && usage.label !== "Token usage unavailable" && (
-        <Text c="dimmed" mt="xs" size="xs">{usage.label}</Text>
-      )}
-    </Box>
-  );
-}

package/src/dashboard/react/index.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="light dark" />
-    <meta name="theme-color" content="#f3f5f2" />
-    <meta name="taskchef-style-nonce" content="__TASKCHEF_STYLE_NONCE__" />
-    <title>TaskChef Dashboard</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
-  </body>
-</html>

package/src/dashboard/react/main.tsx

@@ -1,12 +0,0 @@
-import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import DashboardApp from "./App";
-import "./styles.css";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <DashboardApp />
-  </StrictMode>,
-);