taskchef 7.23.4 → 7.24.1

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

@@ -0,0 +1,241 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { fixtureTask } from "./fixtures";
+import {
+  formatCompactTokens,
+  formatEstimatedCost,
+  turnUsageView,
+  usageStillCalculating,
+  usageView,
+} from "./presentation";
+import { ShimmerText } from "./components/ShimmerText";
+import { GitHubLinks } from "./components/GitHubLinks";
+import { LinkedText } from "./components/LinkedText";
+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.35K tokens · Estimated cost $0.12");
+    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.35K tokens · Estimated cost $0.12 · 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.12");
+    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.12");
+    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");
+  });
+
+  test("formats compact token boundaries without scientific notation", () => {
+    expect([
+      0,
+      999,
+      1_000,
+      1_100,
+      12_345,
+      999_999,
+      1_320_000,
+      1_000_000_000,
+    ].map((value) => formatCompactTokens(value, "en-US"))).toEqual([
+      "0",
+      "999",
+      "1K",
+      "1.1K",
+      "12.35K",
+      "1M",
+      "1.32M",
+      "1B",
+    ]);
+  });
+
+  test("formats estimates to two decimals across zero, sub-cent, missing, and large values", () => {
+    expect(formatEstimatedCost(0, "en-US")).toBe("$0.00");
+    expect(formatEstimatedCost(0.0049, "en-US")).toBe("$0.00");
+    expect(formatEstimatedCost(12.344, "en-US")).toBe("$12.34");
+    expect(formatEstimatedCost(12.345, "en-US")).toBe("$12.35");
+    expect(formatEstimatedCost(null, "en-US")).toBe("—");
+    expect(formatEstimatedCost(Number.NaN, "en-US")).toBe("—");
+    expect(formatEstimatedCost(1_234_567_890.125, "en-US")).toBe("$1,234,567,890.13");
+  });
+
+  test("exposes full token precision and the unrounded estimate on ready metric cards", () => {
+    render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          status: "completed",
+          usage: {
+            status: "available",
+            task: { totalTokens: 1_324_567, estimatedCostUsd: 12.3449 },
+          },
+        })} />
+      </MantineProvider>,
+    );
+    expect(screen.getByLabelText("1,324,567 tokens")).toHaveTextContent("1.32M");
+    expect(screen.getByLabelText("1,324,567 tokens")).toHaveAttribute("title", "1,324,567 tokens");
+    expect(screen.getByLabelText("Estimated cost $12.34")).toHaveTextContent("$12.34");
+    expect(screen.getByLabelText("Estimated cost $12.34")).toHaveAttribute(
+      "title",
+      "Unrounded estimate: $12.3449",
+    );
+  });
+
+  test("groups, deduplicates, and naturally sorts compact related links by repository", () => {
+    const task = fixtureTask({
+      relatedGitHubLinks: [
+        ["taskchef", "83", "pull"],
+        ["guzuoshou-workspace", "124", "issue"],
+        ["taskchef", "79", "issue"],
+        ["guzuoshou-workspace", "108", "issue"],
+        ["taskchef", "80", "issue"],
+        ["guzuoshou-workspace", "109", "pull"],
+        ["taskchef", "79", "pull"],
+      ].map(([repository, number, type]) => ({
+        label: `favoyang/${repository}#${number}`,
+        number,
+        owner: "favoyang",
+        repository,
+        type: type as "issue" | "pull",
+        url: `https://github.com/favoyang/${repository}/${type === "pull" ? "pull" : "issues"}/${number}`,
+      })),
+    });
+    const { container } = render(<MantineProvider><GitHubLinks task={task} /></MantineProvider>);
+    const groups = container.querySelectorAll(".taskchef-github-group");
+    expect(groups).toHaveLength(2);
+    expect(within(groups[0] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
+      .toEqual(["taskchef #79", "#80", "#83"]);
+    expect(within(groups[1] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
+      .toEqual(["guzuoshou-workspace #108", "#109", "#124"]);
+    const first = screen.getByRole("link", { name: /favoyang\/taskchef Issue #79/ });
+    expect(first).toHaveAttribute("href", "https://github.com/favoyang/taskchef/issues/79");
+    expect(first).toHaveAttribute("target", "_blank");
+    expect(first).toHaveAttribute("rel", "noopener noreferrer");
+    expect(screen.queryByText(/PR #|Issue #/)).not.toBeInTheDocument();
+  });
+
+  test("keeps established inline request and result link labels", () => {
+    const task = fixtureTask({
+      project: {
+        name: "TaskChef Preview",
+        path: "/tmp/taskchef-preview-project",
+        githubRepos: ["https://github.com/favoyang/taskchef"],
+      },
+      relatedGitHubRepository: "favoyang/taskchef",
+    });
+    const { container } = render(
+      <MantineProvider>
+        <div>
+          <LinkedText task={task} text="Review https://github.com/favoyang/taskchef/pull/83." />
+        </div>
+      </MantineProvider>,
+    );
+    expect(within(container).getByRole("link", { name: /favoyang\/taskchef PR #83/ }))
+      .toHaveTextContent("taskchef PR #83");
+  });
+});

package/src/dashboard/react/presentation.ts

@@ -0,0 +1,102 @@
+import type { Task, UsageNumbers, UsageProjection } from "./types";
+
+export function formatCompactTokens(value: number, locales?: Intl.LocalesArgument) {
+  return new Intl.NumberFormat(locales, {
+    maximumFractionDigits: 2,
+    notation: "compact",
+  }).format(value);
+}
+
+export function formatFullTokens(value: number, locales?: Intl.LocalesArgument) {
+  return new Intl.NumberFormat(locales, { maximumFractionDigits: 2 }).format(value);
+}
+
+export function formatEstimatedCost(value: number | null | undefined, locales?: Intl.LocalesArgument) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  return new Intl.NumberFormat(locales, {
+    currency: "USD",
+    currencyDisplay: "narrowSymbol",
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+    style: "currency",
+  }).format(value);
+}
+
+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 = formatCompactTokens(usage.totalTokens);
+  const cost = usage.estimatedCostUsd == null
+    ? "Estimated cost unavailable"
+    : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
+  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 = formatFullTokens(usage.totalTokens);
+    const cost = usage.estimatedCostUsd == null
+      ? "Estimated cost unavailable"
+      : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
+    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,128 @@
+: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-github-link:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; border-radius: 2px; }
+.taskchef-github-groups { display: grid; min-width: 0; gap: 3px; }
+.taskchef-github-group { min-width: 0; }
+.taskchef-github-reference-ambiguous { border-bottom: 2px dotted var(--mantine-color-yellow-7); cursor: help; }
+.taskchef-github-reference-ambiguous:focus-visible { outline: 2px solid var(--mantine-color-yellow-7); outline-offset: 2px; }
+.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;
+}