taskchef 7.23.3 → 7.24.0

package/src/dashboard/react/fixtures.ts

@@ -0,0 +1,52 @@
+import type { Task } from "./types";
+
+export function fixtureTask(overrides: Partial<Task> = {}): Task {
+  const timestamp = "2026-08-30T08:00:00.000Z";
+  const id = overrides.id ?? "11111111-1111-4111-8111-111111111111";
+  return {
+    id,
+    schemaVersion: 10,
+    title: "Review checkout reconciliation",
+    instruction: "Verify the isolated dashboard fixture without using live TaskChef data.",
+    project: {
+      name: "TaskChef Preview",
+      path: "/tmp/taskchef-preview-project",
+      githubRepos: ["https://github.com/example/taskchef-preview"],
+    },
+    createdAt: timestamp,
+    updatedAt: timestamp,
+    meaningfulUpdatedAt: timestamp,
+    updatedBy: "mcp",
+    status: "working",
+    summary: null,
+    threadId: "019ffb69-57a6-7801-8b7a-8ff4c32a398c",
+    turnRef: "turn-one",
+    turnId: null,
+    lastResult: null,
+    latestTurn: {
+      requestSummary: "Review the operator-facing task state.",
+      result: null,
+      startedAt: timestamp,
+      turnRef: "turn-one",
+      turnId: null,
+    },
+    turns: [{
+      requestSummary: "Review the operator-facing task state.",
+      result: null,
+      startedAt: timestamp,
+      turnRef: "turn-one",
+      turnId: null,
+    }],
+    results: [],
+    usage: { generationTurnRef: "turn-one", status: "pending" },
+    relatedGitHubLinks: [{
+      label: "example/taskchef-preview#24",
+      owner: "example",
+      repository: "taskchef-preview",
+      number: "24",
+      type: "pull",
+      url: "https://github.com/example/taskchef-preview/pull/24",
+    }],
+    ...overrides,
+  };
+}

package/src/dashboard/react/index.html

@@ -0,0 +1,15 @@
+<!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

@@ -0,0 +1,12 @@
+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>,
+);

package/src/dashboard/react/overlay-state.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from "vitest";
+import type { NotificationSnapshot } from "./types";
+import {
+  clearNotificationHistory,
+  notificationAppeared,
+  notificationClicked,
+  type OverlayState,
+} from "./overlay-state";
+
+const taskUpdate: NotificationSnapshot = {
+  id: "task-one-completed",
+  taskId: "task-one",
+  title: "Review reconciliation",
+  status: "completed",
+  event: "completed",
+  turnRef: "turn-two",
+  turnId: null,
+  timestamp: "2026-08-30T08:10:00.000Z",
+  summary: "Review completed.",
+};
+const unrelated: NotificationSnapshot = {
+  ...taskUpdate,
+  id: "task-two-failed",
+  taskId: "task-two",
+  title: "Validate fixture",
+  status: "failed",
+  event: "failed",
+  turnRef: "turn-three",
+};
+
+function state(overrides: Partial<OverlayState> = {}): OverlayState {
+  return {
+    detailTaskId: null,
+    detailOpened: false,
+    highlightTurnRef: null,
+    notifications: [],
+    refreshGeneration: 0,
+    ...overrides,
+  };
+}
+
+describe("overlay coordination", () => {
+  test("a later notification changes visibility without changing the open detail", () => {
+    const open = state({ detailTaskId: "task-one", detailOpened: true });
+    expect(notificationAppeared(open, [taskUpdate])).toEqual({
+      ...open,
+      notifications: [taskUpdate],
+    });
+  });
+
+  test("clicking a notification dismisses only it and opens its detail above prior content", () => {
+    const next = notificationClicked(state({ notifications: [taskUpdate, unrelated] }), taskUpdate, true);
+    expect(next.detailOpened).toBe(true);
+    expect(next.detailTaskId).toBe("task-one");
+    expect(next.highlightTurnRef).toBe("turn-two");
+    expect(next.notifications).toEqual([unrelated]);
+    expect(next.refreshGeneration).toBe(1);
+  });
+
+  test("clicking an update for the already-open task refreshes and highlights without closing unrelated messages", () => {
+    const current = state({
+      detailTaskId: "task-one",
+      detailOpened: true,
+      notifications: [taskUpdate, unrelated],
+      refreshGeneration: 4,
+    });
+    const next = notificationClicked(current, taskUpdate, true);
+    expect(next.detailTaskId).toBe(current.detailTaskId);
+    expect(next.detailOpened).toBe(true);
+    expect(next.highlightTurnRef).toBe("turn-two");
+    expect(next.refreshGeneration).toBe(5);
+    expect(next.notifications).toEqual([unrelated]);
+  });
+
+  test("clearing notification history leaves detail state untouched", () => {
+    const current = state({ detailTaskId: "task-one", detailOpened: true, notifications: [taskUpdate] });
+    expect(clearNotificationHistory(current)).toEqual({ ...current, notifications: [] });
+  });
+});

package/src/dashboard/react/overlay-state.ts

@@ -0,0 +1,38 @@
+import type { NotificationSnapshot } from "./types";
+
+export interface OverlayState {
+  detailTaskId: string | null;
+  detailOpened: boolean;
+  highlightTurnRef: string | null;
+  notifications: NotificationSnapshot[];
+  refreshGeneration: number;
+}
+
+export function notificationAppeared(
+  state: OverlayState,
+  notifications: NotificationSnapshot[],
+): OverlayState {
+  // Visibility changes only; focus remains where the operator left it.
+  return { ...state, notifications };
+}
+
+export function notificationClicked(
+  state: OverlayState,
+  notification: NotificationSnapshot,
+  taskAvailable: boolean,
+): OverlayState {
+  const notifications = state.notifications.filter(({ id }) => id !== notification.id);
+  if (!taskAvailable) return { ...state, notifications };
+  return {
+    ...state,
+    detailTaskId: notification.taskId,
+    detailOpened: true,
+    highlightTurnRef: notification.turnRef ?? notification.turnId,
+    notifications,
+    refreshGeneration: state.refreshGeneration + 1,
+  };
+}
+
+export function clearNotificationHistory(state: OverlayState): OverlayState {
+  return { ...state, notifications: [] };
+}

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

@@ -0,0 +1,128 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { fixtureTask } from "./fixtures";
+import { turnUsageView, usageStillCalculating, usageView } from "./presentation";
+import { ShimmerText } from "./components/ShimmerText";
+import { GitHubLinks } from "./components/GitHubLinks";
+import { UsagePanel } from "./components/UsagePanel";
+
+describe("token and working presentation", () => {
+  test("keeps pending, calculating, ready cost, and unavailable wording distinct", () => {
+    expect(usageView(fixtureTask()).label).toBe("Token usage pending");
+    expect(usageView(fixtureTask({
+      status: "completed",
+      usage: { generationTurnRef: "turn-one", status: "calculating" },
+    })).label).toBe("Calculating token usage");
+    expect(usageView(fixtureTask({
+      status: "completed",
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "available",
+        task: { totalTokens: 12345, estimatedCostUsd: 0.1234 },
+      },
+    })).label).toBe("12,345 tokens · Estimated cost $0.1234");
+    expect(usageView(fixtureTask({ status: "completed", usage: { status: "unavailable" } })).label)
+      .toBe("Token usage unavailable");
+    expect(usageView(fixtureTask({
+      status: "completed",
+      usage: { status: "unavailable", reason: "This task has no linked Codex thread." },
+    })).label).toBe("This task has no linked Codex thread.");
+    expect(usageView(fixtureTask({ status: "completed", usage: undefined })).label)
+      .toBe("Calculating token usage");
+  });
+
+  test("keeps cumulative usage visible as known so far during a newer working turn", () => {
+    const view = usageView(fixtureTask({
+      status: "working",
+      turnRef: "turn-two",
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "calculating",
+        task: { totalTokens: 12345, estimatedCostUsd: 0.1234 },
+      },
+    }));
+    expect(view.kind).toBe("ready");
+    expect(view.label).toBe("12,345 tokens · Estimated cost $0.1234 · known so far");
+    if (view.kind === "ready") expect(view.knownSoFar).toBe(true);
+  });
+
+  test("distinguishes available, pending, calculating, and unavailable per-turn usage", () => {
+    const task = fixtureTask({
+      usage: {
+        status: "available",
+        turns: {
+          "turn-one": { status: "available", totalTokens: 330, estimatedCostUsd: 0.12 },
+        },
+      },
+    });
+    const completedTurn = {
+      ...task.turns![0],
+      result: {
+        status: "completed" as const,
+        summary: "Done.",
+        updatedAt: task.updatedAt,
+      },
+    };
+    expect(turnUsageView(task, completedTurn).label).toBe("330 tokens · Estimated cost $0.1200");
+    expect(turnUsageView(task, { ...completedTurn, result: null }).label).toBe("Turn usage pending");
+    expect(turnUsageView({
+      ...task,
+      usage: { status: "calculating", turns: { "turn-one": { status: "calculating" } } },
+    }, completedTurn).label).toBe("Calculating turn usage");
+    expect(turnUsageView({ ...task, usage: { status: "unavailable", turns: {} } }, completedTurn).label)
+      .toBe("Turn usage unavailable");
+  });
+
+  test("polling is reserved for terminal usage that is actually calculating", () => {
+    expect(usageStillCalculating(fixtureTask())).toBe(false);
+    expect(usageStillCalculating(fixtureTask({
+      status: "completed",
+      usage: { generationTurnRef: "turn-one", status: "calculating" },
+    }))).toBe(true);
+    expect(usageStillCalculating(fixtureTask({
+      status: "completed",
+      usage: { status: "unavailable", turns: { old: { status: "calculating" } } },
+    }))).toBe(true);
+  });
+
+  test("marks working text with the approved text shimmer state", () => {
+    render(<ShimmerText>In progress</ShimmerText>);
+    expect(screen.getByText("In progress")).toHaveClass("taskchef-shimmer");
+    expect(screen.getByText("In progress")).toHaveAttribute("data-animation", "text-shimmer");
+  });
+
+  test("summarizes ready usage as four operator-facing cards", () => {
+    render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          status: "completed",
+          usage: {
+            generationTurnRef: "turn-one",
+            status: "available",
+            task: {
+              inputTokens: 100,
+              cachedInputTokens: 200,
+              outputTokens: 30,
+              reasoningOutputTokens: 10,
+              totalTokens: 330,
+              estimatedCostUsd: 0.12,
+              models: { "gpt-5.6-sol": {}, "gpt-5.6-luna": {} },
+            },
+          },
+        })} />
+      </MantineProvider>,
+    );
+
+    expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("330");
+    expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.1200");
+    expect(screen.getByText("Model").nextSibling).toHaveTextContent("gpt-5.6-sol, gpt-5.6-luna");
+    expect(screen.getByText("Cache ratio").nextSibling).toHaveTextContent("67%");
+    expect(screen.queryByText(/API-equivalent/i)).not.toBeInTheDocument();
+  });
+
+  test("uses the same borderless link treatment wherever links are rendered", () => {
+    render(<MantineProvider><GitHubLinks task={fixtureTask()} /></MantineProvider>);
+    expect(screen.getByRole("link")).toHaveClass("taskchef-github-link");
+  });
+});

package/src/dashboard/react/presentation.ts

@@ -0,0 +1,80 @@
+import type { Task, UsageNumbers, UsageProjection } from "./types";
+
+export type UsageView =
+  | { kind: "pending"; label: "Token usage pending" }
+  | { kind: "calculating"; label: "Calculating token usage" }
+  | { kind: "ready"; knownSoFar: boolean; label: string; usage: UsageNumbers }
+  | { kind: "unavailable"; label: string };
+
+export function usageView(task: Task): UsageView {
+  const usage: UsageProjection | null | undefined = task.usage;
+  const currentTurnRef = task.turnRef ?? task.latestTurn?.turnRef ?? null;
+  const priorGeneration = usage?.generationTurnRef != null
+    && currentTurnRef != null
+    && usage.generationTurnRef !== currentTurnRef;
+  if (task.status === "working") {
+    if (usage?.task) return readyUsageView(usage.task, true);
+    return { kind: "pending", label: "Token usage pending" };
+  }
+  if (usage?.status === "calculating" || priorGeneration) {
+    return { kind: "calculating", label: "Calculating token usage" };
+  }
+  if (usage?.status === "available" && usage.task) {
+    return readyUsageView(usage.task, false);
+  }
+  if (!usage && task.threadId && ["completed", "failed", "needs_input"].includes(task.status ?? "")) {
+    return { kind: "calculating", label: "Calculating token usage" };
+  }
+  return { kind: "unavailable", label: usage?.reason ?? "Token usage unavailable" };
+}
+
+function readyUsageView(usage: UsageNumbers, knownSoFar: boolean): UsageView {
+  const tokens = new Intl.NumberFormat().format(usage.totalTokens);
+  const cost = usage.estimatedCostUsd == null
+    ? "Estimated cost unavailable"
+    : `Estimated cost $${usage.estimatedCostUsd.toFixed(4)}`;
+  return {
+    kind: "ready",
+    knownSoFar,
+    label: `${tokens} tokens · ${cost}${knownSoFar ? " · known so far" : ""}`,
+    usage,
+  };
+}
+
+export function turnUsageView(task: Task, turn: NonNullable<Task["turns"]>[number]) {
+  if (turn.result === null) return { kind: "pending" as const, label: "Turn usage pending" };
+  const identity = turn.turnRef ?? turn.turnId;
+  const usage = identity ? task.usage?.turns?.[identity] : null;
+  if (usage?.status === "calculating") {
+    return { kind: "calculating" as const, label: "Calculating turn usage" };
+  }
+  if (usage?.status === "available" && typeof usage.totalTokens === "number") {
+    const tokens = new Intl.NumberFormat().format(usage.totalTokens);
+    const cost = usage.estimatedCostUsd == null
+      ? "Estimated cost unavailable"
+      : `Estimated cost $${usage.estimatedCostUsd.toFixed(4)}`;
+    return { kind: "ready" as const, label: `${tokens} tokens · ${cost}` };
+  }
+  return {
+    kind: "unavailable" as const,
+    label: usage?.reason ?? "Turn usage unavailable",
+  };
+}
+
+export function usageStillCalculating(task: Task) {
+  return task.status !== "working"
+    && (task.usage?.status === "calculating"
+      || Object.values(task.usage?.turns ?? {}).some((turn) => turn.status === "calculating"));
+}
+
+export function statusColor(status: Task["status"] | "interrupted") {
+  if (status === "completed") return "teal";
+  if (status === "needs_input") return "yellow";
+  if (status === "failed") return "red";
+  if (status === "working") return "blue";
+  return "gray";
+}
+
+export function statusLabel(status: Task["status"] | "interrupted") {
+  return status === null ? "Unresolved" : status.replaceAll("_", " ");
+}

package/src/dashboard/react/styles.css

@@ -0,0 +1,123 @@
+:root {
+  --taskchef-page: light-dark(#f3f5f2, #171a18);
+  --taskchef-surface-muted: light-dark(#f6f7f5, #252a27);
+  --taskchef-border: light-dark(#dfe3de, #363c38);
+  --taskchef-text: light-dark(#202521, #edf1ee);
+  --taskchef-muted: light-dark(#657068, #aab4ad);
+  --taskchef-accent: light-dark(#087f5b, #38d9a9);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--taskchef-page);
+  color: var(--taskchef-text);
+}
+
+.taskchef-shell { min-height: 100vh; background: var(--taskchef-page); }
+.taskchef-shell header { border-bottom: 1px solid var(--taskchef-border); }
+.taskchef-header { padding-top: 28px; padding-bottom: 22px; }
+.taskchef-header-copy { min-width: 0; }
+.taskchef-header-actions { align-self: stretch; flex: none; }
+.taskchef-connection { align-self: flex-end; }
+.taskchef-version { margin-inline-start: 0.45rem; color: var(--taskchef-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
+.taskchef-brand-icon, .taskchef-brand-icon img { display: block; width: 42px; height: 42px; }
+.taskchef-main { padding-top: var(--mantine-spacing-md); }
+.taskchef-toolbar { padding-top: var(--mantine-spacing-md); background: light-dark(rgb(255 255 255 / 86%), rgb(34 39 36 / 88%)); }
+.taskchef-toolbar .mantine-InputWrapper-root { flex: 1 1 190px; max-width: 240px; }
+.taskchef-toolbar .mantine-InputWrapper-label, .taskchef-filter-label { font-size: var(--mantine-font-size-sm); font-weight: 600; line-height: var(--mantine-line-height-sm); }
+.taskchef-toolbar .mantine-SegmentedControl-root { max-width: 650px; }
+.taskchef-task-count-field { align-self: flex-end; min-width: 90px; }
+.taskchef-count-value { display: flex; align-items: center; height: 36px; white-space: nowrap; }
+.taskchef-task-row { background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
+.taskchef-task-row:hover { border-color: light-dark(var(--mantine-color-teal-4), var(--mantine-color-teal-8)); }
+.taskchef-task-main { min-width: 0; flex: 1; }
+.taskchef-status-badge { flex: none; }
+.taskchef-title-button {
+  all: unset;
+  border-radius: 3px;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.taskchef-title-button:hover { color: var(--taskchef-accent); text-decoration: underline; text-underline-offset: 3px; }
+.taskchef-title-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 35%, transparent); outline-offset: 3px; }
+.taskchef-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; max-width: 84ch; }
+.taskchef-summary-grid .taskchef-field-label:not(:first-child) { margin-top: 7px; }
+.taskchef-field-label { font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; }
+.taskchef-preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
+.taskchef-github-link { color: var(--taskchef-accent); text-decoration: none; }
+.taskchef-github-link:hover { text-decoration: underline; text-underline-offset: 3px; }
+.taskchef-time { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 3px; border-radius: 4px; color: var(--taskchef-muted); font-size: 0.7rem; line-height: 1.2; }
+.taskchef-time:hover { color: var(--taskchef-text); background: var(--taskchef-surface-muted); }
+.taskchef-time:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
+.taskchef-time-label { white-space: nowrap; }
+.taskchef-empty { border-style: dashed; background: transparent; }
+
+.taskchef-notifications {
+  position: fixed;
+  z-index: 400;
+  right: 18px;
+  bottom: 18px;
+  width: min(360px, calc(100vw - 48px));
+  background: light-dark(#fff, #202421);
+}
+.taskchef-notification { background: var(--taskchef-surface-muted); }
+.taskchef-notification-list { padding-inline-end: 10px; }
+.taskchef-notification-open { all: unset; display: block; min-width: 0; flex: 1; border-radius: var(--mantine-radius-sm); cursor: pointer; }
+.taskchef-notification-open:focus-visible { outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 35%, transparent); outline-offset: 2px; }
+
+.taskchef-subtle-panel { background: var(--taskchef-surface-muted); }
+.taskchef-metric { min-width: 0; background: transparent; }
+.taskchef-metric-value { overflow-wrap: anywhere; }
+.taskchef-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
+.taskchef-turn { background: var(--taskchef-surface-muted); }
+.taskchef-turn-highlighted { border-color: var(--mantine-color-teal-6); box-shadow: inset 3px 0 var(--mantine-color-teal-6); outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 22%, transparent); }
+.taskchef-turn-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.taskchef-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
+.taskchef-code-panel { max-height: 280px; margin: 0; padding: 12px; overflow: auto; border-radius: var(--mantine-radius-md); background: var(--taskchef-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.taskchef-metadata { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); margin: 0; font-size: var(--mantine-font-size-sm); }
+.taskchef-metadata dt, .taskchef-metadata dd { padding: 8px 0; border-bottom: 1px solid var(--taskchef-border); overflow-wrap: anywhere; }
+.taskchef-metadata dt { color: var(--taskchef-muted); }
+.taskchef-metadata dd { margin: 0; }
+
+.taskchef-shimmer {
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+  color: var(--taskchef-muted);
+  background: linear-gradient(100deg, var(--taskchef-muted) 48%, var(--taskchef-text) 50%, var(--taskchef-muted) 52%);
+  background-size: 250% 100%;
+  background-position: 100% 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: taskchef-text-shimmer 6.4s linear infinite;
+}
+
+@keyframes taskchef-text-shimmer {
+  0% { background-position: 100% 0; }
+  72%, 100% { background-position: -100% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .taskchef-shimmer { background: none; animation: none; -webkit-text-fill-color: currentcolor; }
+}
+
+.taskchef-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (max-width: 48em) {
+  .taskchef-toolbar .mantine-InputWrapper-root { max-width: none; }
+  .taskchef-toolbar .mantine-Group-root { align-items: stretch; }
+  .taskchef-task-count-field { min-width: 76px; }
+  .taskchef-toolbar .mantine-SegmentedControl-root { overflow-x: auto; }
+  .taskchef-notifications { right: 16px; bottom: 16px; width: min(330px, calc(100vw - 32px)); }
+  .taskchef-metadata { grid-template-columns: 1fr; }
+  .taskchef-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .taskchef-metadata dt { padding-bottom: 0; border-bottom: 0; }
+}
+
+@media (max-width: 34em) {
+  .taskchef-header { padding-top: 22px; padding-bottom: 18px; }
+  .taskchef-brand-icon, .taskchef-brand-icon img { width: 36px; height: 36px; }
+}

package/src/dashboard/react/test-setup.ts

@@ -0,0 +1,36 @@
+import "@testing-library/jest-dom/vitest";
+
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+Object.defineProperty(globalThis, "ResizeObserver", {
+  configurable: true,
+  value: ResizeObserverStub,
+});
+
+Object.defineProperty(globalThis, "matchMedia", {
+  configurable: true,
+  value: (query: string) => ({
+    matches: query.includes("prefers-reduced-motion") ? false : false,
+    media: query,
+    onchange: null,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+    dispatchEvent: () => false,
+  }),
+});
+
+Object.defineProperty(globalThis.HTMLElement.prototype, "scrollIntoView", {
+  configurable: true,
+  value() {},
+});
+
+Object.defineProperty(globalThis.CSS, "escape", {
+  configurable: true,
+  value: (value: string) => value.replaceAll('"', '\\"'),
+});

package/src/dashboard/react/types.ts

@@ -0,0 +1,106 @@
+export type TaskStatus = "working" | "needs_input" | "completed" | "failed" | null;
+
+export interface Project {
+  name: string;
+  path: string;
+  description?: string;
+  githubRepos: string[];
+}
+
+export interface TaskResult {
+  status: "needs_input" | "completed" | "failed" | "interrupted";
+  summary: string;
+  updatedAt: string;
+  turnRef?: string | null;
+  turnId?: string | null;
+  provenance?: { kind: string } | null;
+}
+
+export interface TaskTurn {
+  requestSummary: string | null;
+  result: TaskResult | null;
+  startedAt: string;
+  turnRef: string | null;
+  turnId: string | null;
+  provenance?: { kind: string } | null;
+}
+
+export interface GitHubLink {
+  label: string;
+  url: string;
+  type?: "issue" | "pull" | "generic";
+  owner?: string;
+  repository?: string;
+  number?: string;
+}
+
+export interface UsageNumbers {
+  inputTokens?: number;
+  cachedInputTokens?: number;
+  outputTokens?: number;
+  reasoningOutputTokens?: number;
+  totalTokens: number;
+  estimatedCostUsd?: number | null;
+  models?: Record<string, unknown>;
+}
+
+export interface UsageProjection {
+  generationTurnRef?: string | null;
+  status: "available" | "calculating" | "pending" | "unavailable";
+  task?: UsageNumbers | null;
+  turns?: Record<string, Partial<UsageNumbers> & {
+    status?: "available" | "calculating" | "pending" | "unavailable";
+    reason?: string;
+  }>;
+  reason?: string;
+  message?: string;
+}
+
+export interface Task {
+  schemaVersion?: number;
+  id: string;
+  title: string;
+  instruction: string;
+  project: Project;
+  createdAt: string;
+  updatedAt: string;
+  meaningfulUpdatedAt?: string;
+  updatedBy?: string;
+  status: TaskStatus;
+  summary: string | null;
+  threadId: string | null;
+  turnRef: string | null;
+  turnId: string | null;
+  lastResult: TaskResult | null;
+  latestTurn: TaskTurn | null;
+  turns?: TaskTurn[];
+  results?: TaskResult[];
+  usage?: UsageProjection | null;
+  relatedGitHubLinks?: GitHubLink[];
+  relatedGitHubLinksTruncated?: boolean;
+  relatedGitHubRepository?: string | null;
+}
+
+export interface NotificationSnapshot {
+  id: string;
+  taskId: string;
+  title: string;
+  status: TaskStatus;
+  event: string;
+  turnRef: string | null;
+  turnId: string | null;
+  timestamp: string | null;
+  summary: string | null;
+}
+
+export interface DashboardSnapshot {
+  healthy?: boolean;
+  tasks: Task[];
+}
+
+export interface ManualTransitionResponse {
+  ok: boolean;
+  code?: string;
+  message?: string;
+  task?: Task | null;
+}