taskchef 8.5.3 → 8.6.1

package/src/mcp-app/react/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>TaskChef</title></head><body><div id="root"></div><script type="module" src="./main.tsx"></script></body></html>

package/src/mcp-app/react/main.test.tsx

@@ -0,0 +1,185 @@
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import { act, fireEvent, render, screen, waitFor, within, cleanup } from "@testing-library/react";
+import { useState } from "react";
+import type { Task } from "../../dashboard/react/types";
+
+const server = vi.hoisted(() => ({ call: vi.fn() }));
+vi.mock("@mantine/core", async () => {
+  const React = await import("react");
+  const wrap = (tag: string) => ({ children, component, ...props }: Record<string, unknown>) => React.createElement(component as string || tag, { "aria-label": props["aria-label"], role: props.role, id: props.id }, children as React.ReactNode);
+  return {
+    ActionIcon: ({ children, onClick, ...props }: Record<string, unknown>) => React.createElement("button", { "aria-label": props["aria-label"], onClick }, children as React.ReactNode),
+    Alert: wrap("div"), Box: wrap("div"), Button: wrap("button"), Group: wrap("div"),
+    MantineProvider: ({ children }: { children: React.ReactNode }) => children,
+    Paper: wrap("div"), Stack: wrap("div"), Text: wrap("p"), Title: wrap("h2"),
+    SegmentedControl: ({ data, onChange, value, ...props }: { data: Array<{ label: string; value: string }>; onChange: (value: string) => void; value: string; "aria-label": string }) => React.createElement("div", { role: "radiogroup", "aria-label": props["aria-label"] }, data.map((item) => React.createElement("button", { key: item.value, role: "radio", "aria-checked": item.value === value, onClick: () => onChange(item.value) }, item.label))),
+    Select: ({ data, onChange, value, ...props }: { data: Array<{ label: string; value: string }>; onChange: (value: string) => void; value: string; "aria-label": string }) => React.createElement("select", { "aria-label": props["aria-label"], value, onChange: (event: React.ChangeEvent<HTMLSelectElement>) => onChange(event.target.value) }, data.map((item) => React.createElement("option", { key: item.value, value: item.value }, item.label))),
+  };
+});
+vi.mock("@modelcontextprotocol/ext-apps", () => ({
+  App: class {
+    connect() { return Promise.resolve(); }
+    callServerTool(input: { name: string; arguments: Record<string, unknown> }) { return server.call(input); }
+  },
+}));
+vi.mock("../../dashboard/react/components/TaskCard", () => ({
+  TaskCard: ({ task, onOpenCodex, onOpenDetail }: { task: Task; onOpenCodex: (task: Task) => void; onOpenDetail: (task: Task) => void }) => <article><button onClick={() => onOpenDetail(task)}>{task.title}</button><button onClick={() => onOpenCodex(task)}>Open chat for {task.title}</button></article>,
+}));
+vi.mock("../../dashboard/react/components/TaskBoard", () => ({
+  TaskBoard: ({ tasks, onOpenDetail }: { tasks: Task[]; onOpenDetail: (task: Task) => void }) => <section aria-label="Task board">{tasks.map((task) => <button key={task.id} onClick={() => onOpenDetail(task)}>{task.title}</button>)}</section>,
+}));
+vi.mock("../../dashboard/react/components/TaskDetail", () => ({
+  TaskDetail: ({ task, opened, onClose, onTransition }: {
+    task: Task | null; opened: boolean; onClose: () => void;
+    onTransition: (status: "completed" | "failed", actionId: string) => Promise<unknown>;
+  }) => {
+    const [confirm, setConfirm] = useState(false);
+    return opened && task ? <section aria-label="Task detail"><h2>{task.title}</h2><p>{task.status}</p><button onClick={onClose}>Close</button><button onClick={() => setConfirm(true)}>Mark completed</button>{confirm && <button onClick={() => { void onTransition("completed", crypto.randomUUID()); setConfirm(false); }}>Confirm</button>}</section> : null;
+  },
+}));
+
+import { TaskChefApp } from "./main";
+
+const task = (id: string, status: Task["status"] = "working", updatedAt = "2026-10-01T00:00:00Z", project = "Example"): Task => ({
+  id, title: `Task ${id}`, instruction: "Do the work", status, updatedAt, createdAt: updatedAt,
+  project: { name: project, path: `/${project}`, githubRepos: [] }, summary: "Initial summary",
+  threadId: null, turnRef: null, turnId: null, lastResult: null, latestTurn: null,
+});
+
+let tasks: Task[];
+let details: Map<string, Task>;
+let transition: () => Promise<unknown>;
+let detailFailure: string | null;
+beforeEach(() => {
+  window.localStorage.clear();
+  tasks = [task("one")];
+  details = new Map(tasks.map((item) => [item.id, item]));
+  transition = async () => ({ structuredContent: { task: task("one", "completed") } });
+  detailFailure = null;
+  server.call.mockImplementation(({ name, arguments: args }) => {
+    if (name === "taskchef_app_snapshot") return Promise.resolve({ structuredContent: { snapshot: { tasks, healthy: true } } });
+    if (name === "taskchef_app_task" && detailFailure) return Promise.resolve({ isError: true, content: [{ type: "text", text: detailFailure }] });
+    if (name === "taskchef_app_task") return Promise.resolve({ structuredContent: { task: details.get(args.taskId as string) } });
+    if (name === "taskchef_app_transition") return transition();
+    if (name === "taskchef_app_open_chat") return Promise.resolve({ isError: true, content: [{ type: "text", text: "Codex could not be opened." }] });
+    throw new Error(`Unexpected tool: ${name}`);
+  });
+});
+afterEach(() => { cleanup(); server.call.mockReset(); });
+function mount() { render(<TaskChefApp />); }
+
+test("switches list and board and filters by project, date, and status with contextual counts", async () => {
+  tasks = [task("one", "working", new Date().toISOString(), "Alpha"), task("two", "completed", "2026-01-01T00:00:00Z", "Alpha"), task("three", "failed", new Date().toISOString(), "Beta")];
+  details = new Map(tasks.map((item) => [item.id, item]));
+  mount();
+  expect(await screen.findByRole("button", { name: "Task one" })).toBeVisible();
+  expect(screen.getByText("Tasks: 3 of 3")).toBeVisible();
+  fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "Alpha" } });
+  expect(screen.getByText("Tasks: 2 of 3")).toBeVisible();
+  expect(screen.getByRole("radio", { name: "All 2" })).toBeVisible();
+  fireEvent.change(screen.getByRole("combobox", { name: "Updated" }), { target: { value: "24h" } });
+  expect(screen.getByText("Tasks: 1 of 3")).toBeVisible();
+  fireEvent.change(screen.getByRole("combobox", { name: "Updated" }), { target: { value: "all" } });
+  fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "" } });
+  fireEvent.click(screen.getByRole("radio", { name: /Failed/ }));
+  expect(screen.getByText("Tasks: 1 of 3")).toBeVisible();
+  expect(screen.queryByRole("button", { name: "Task one" })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(within(screen.getByRole("region", { name: "Task board" })).getAllByRole("button")).toHaveLength(3);
+  expect(screen.queryByRole("radiogroup", { name: "Status" })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  expect(screen.getByRole("button", { name: "Task three" })).toBeVisible();
+  expect(screen.queryByRole("button", { name: "Task two" })).not.toBeInTheDocument();
+});
+
+test("refresh updates detail and removes a disappeared selection", async () => {
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Task one" }));
+  await screen.findByRole("region", { name: "Task detail" });
+  details.set("one", task("one", "needs_input", "2026-10-02T00:00:00Z"));
+  fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("needs_input"));
+  tasks = [];
+  fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await waitFor(() => expect(screen.queryByRole("region", { name: "Task detail" })).not.toBeInTheDocument());
+});
+
+test("refresh sends the last revision and keeps selection detail current on unchanged snapshots", async () => {
+  let revision = 1;
+  server.call.mockImplementation(({ name, arguments: args }) => {
+    if (name === "taskchef_app_snapshot") return Promise.resolve({ structuredContent: args.revision === revision
+      ? { unchanged: true, revision }
+      : { snapshot: { tasks, healthy: true, revision } } });
+    if (name === "taskchef_app_task") return Promise.resolve({ structuredContent: { task: details.get(args.taskId as string) } });
+    throw new Error(`Unexpected tool: ${name}`);
+  });
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Task one" }));
+  details.set("one", task("one", "needs_input"));
+  fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("needs_input"));
+  expect(server.call).toHaveBeenCalledWith({ name: "taskchef_app_snapshot", arguments: { revision: 1 } });
+  tasks = [task("two")];
+  revision = 2;
+  fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await waitFor(() => expect(screen.queryByRole("region", { name: "Task detail" })).not.toBeInTheDocument());
+  expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
+});
+
+test("an older selection detail cannot replace a newer refresh detail", async () => {
+  let releaseFirst!: (value: unknown) => void;
+  const first = new Promise((resolve) => { releaseFirst = resolve; });
+  let detailCalls = 0;
+  server.call.mockImplementation(({ name }) => {
+    if (name === "taskchef_app_snapshot") return Promise.resolve({ structuredContent: { snapshot: { tasks, healthy: true } } });
+    if (name === "taskchef_app_task") return ++detailCalls === 1
+      ? first
+      : Promise.resolve({ structuredContent: { task: task("one", "needs_input") } });
+    throw new Error(`Unexpected tool: ${name}`);
+  });
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Task one" }));
+  await waitFor(() => expect(detailCalls).toBe(1));
+  fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("needs_input"));
+  await act(async () => { releaseFirst({ structuredContent: { task: task("one", "working") } }); await first; });
+  expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("needs_input");
+});
+
+test("shows a card Open chat failure without opening detail", async () => {
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Open chat for Task one" }));
+  expect(await screen.findByRole("alert")).toHaveTextContent("Codex could not be opened.");
+  expect(screen.queryByRole("region", { name: "Task detail" })).not.toBeInTheDocument();
+});
+
+test("transition conflict refreshes the current task", async () => {
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Task one" }));
+  await screen.findByRole("region", { name: "Task detail" });
+  transition = async () => {
+    details.set("one", task("one", "failed", "2026-10-02T00:00:00Z"));
+    throw new Error("Task changed concurrently.");
+  };
+  fireEvent.click(screen.getByRole("button", { name: "Mark completed" }));
+  fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("failed"));
+});
+
+test("an older selection response cannot replace the current task", async () => {
+  tasks = [task("one"), task("two")];
+  let release!: (value: unknown) => void;
+  const first = new Promise((resolve) => { release = resolve; });
+  server.call.mockImplementation(({ name, arguments: args }) => {
+    if (name === "taskchef_app_snapshot") return Promise.resolve({ structuredContent: { snapshot: { tasks, healthy: true } } });
+    if (name === "taskchef_app_task") return args.taskId === "one" ? first : Promise.resolve({ structuredContent: { task: task("two") } });
+    throw new Error(`Unexpected tool: ${name}`);
+  });
+  mount();
+  fireEvent.click(await screen.findByRole("button", { name: "Task one" }));
+  fireEvent.click(screen.getByRole("button", { name: "Task two" }));
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("Task two"));
+  release({ structuredContent: { task: task("one") } });
+  await waitFor(() => expect(screen.getByRole("region", { name: "Task detail" })).toHaveTextContent("Task two"));
+});

package/src/mcp-app/react/main.tsx

@@ -0,0 +1,213 @@
+import { App } from "@modelcontextprotocol/ext-apps";
+import { ActionIcon, Alert, Box, Button, Group, MantineProvider, Paper, SegmentedControl, Select, Stack, Text, Title } from "@mantine/core";
+import { IconRefresh } from "@tabler/icons-react";
+import { createRoot } from "react-dom/client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { DashboardSnapshot, Task } from "../../dashboard/react/types";
+import { filterTasks, manualTransitionExpectedState, statusFilterCounts, STATUS_FILTERS, taskMatchesManualTransitionExpected } from "../../dashboard/state.js";
+import { TaskBoard } from "../../dashboard/react/components/TaskBoard";
+import { TaskCard } from "../../dashboard/react/components/TaskCard";
+import { TaskDetail } from "../../dashboard/react/components/TaskDetail";
+import { RelativeTimeProvider } from "../../dashboard/react/components/RelativeTime";
+import brandIcon from "../../../assets/taskchef-dark.svg";
+import "@mantine/core/styles.css";
+import "../../dashboard/react/styles.css";
+import "./styles.css";
+
+const bridge = new App({ name: "TaskChef board", version: "1.0.0" });
+const connected = bridge.connect();
+
+async function call<T>(name: string, args: Record<string, unknown> = {}): Promise<T> {
+  await connected;
+  const result = await bridge.callServerTool({ name, arguments: args });
+  if (result.isError) throw new Error(result.content?.find((item) => item.type === "text")?.text ?? "TaskChef request failed.");
+  return result.structuredContent as T;
+}
+
+const VIEW_KEY = "taskchef.app.view";
+function initialView(): "board" | "list" {
+  try { return window.localStorage.getItem(VIEW_KEY) === "board" ? "board" : "list"; }
+  catch { return "list"; }
+}
+
+export function TaskChefApp() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [selected, setSelected] = useState<Task | null>(null);
+  const [opened, setOpened] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [project, setProject] = useState("");
+  const [date, setDate] = useState("all");
+  const [status, setStatus] = useState("");
+  const [view, setView] = useState(initialView);
+  const [completedLimit, setCompletedLimit] = useState(5);
+  const [now, setNow] = useState(() => Date.now());
+  const selectedRef = useRef<Task | null>(null);
+  const selectionVersion = useRef(0);
+  const detailRequestVersion = useRef(0);
+  const refreshVersion = useRef(0);
+  const revisionRef = useRef<number | null>(null);
+  const refresh = useCallback(async () => {
+    const version = ++refreshVersion.current;
+    const initialSelection = selectionVersion.current;
+    const data = await call<{ snapshot: DashboardSnapshot & { revision: number }; unchanged?: never } | { unchanged: true; revision: number; snapshot?: never }>(
+      "taskchef_app_snapshot", revisionRef.current === null ? {} : { revision: revisionRef.current },
+    );
+    if (version !== refreshVersion.current) return;
+    if (data.snapshot) {
+      revisionRef.current = data.snapshot.revision;
+      setTasks(data.snapshot.tasks);
+      setError(data.snapshot.healthy === false ? "Task log is temporarily unavailable. Showing the last valid snapshot." : null);
+    } else setError(null);
+    setNow(Date.now());
+    const selectedTask = selectedRef.current;
+    if (!selectedTask || initialSelection !== selectionVersion.current) return;
+    const selection = selectionVersion.current;
+    const clearRemovedTask = () => {
+      selectionVersion.current += 1;
+      selectedRef.current = null;
+      setSelected(null);
+      setOpened(false);
+      setDetailError(null);
+    };
+    if (data.snapshot && data.snapshot.healthy !== false && !data.snapshot.tasks.some((task) => task.id === selectedTask.id)) {
+      clearRemovedTask();
+      return;
+    }
+    const detailRequest = ++detailRequestVersion.current;
+    try {
+      const detail = await call<{ task: Task }>("taskchef_app_task", { taskId: selectedTask.id });
+      if (version !== refreshVersion.current || selection !== selectionVersion.current || detailRequest !== detailRequestVersion.current || selectedRef.current?.id !== detail.task.id) return;
+      selectedRef.current = detail.task;
+      setSelected(detail.task);
+      setDetailError(null);
+    } catch (cause) {
+      if (version !== refreshVersion.current || selection !== selectionVersion.current || detailRequest !== detailRequestVersion.current) return;
+      if (cause instanceof Error && cause.message === "Task not found.") clearRemovedTask();
+      else setDetailError(String(cause));
+    }
+  }, []);
+  useEffect(() => {
+    void refresh().catch((cause) => setError(String(cause)));
+    const timer = window.setInterval(() => { void refresh().catch((cause) => setError(String(cause))); }, 5000);
+    return () => window.clearInterval(timer);
+  }, [refresh]);
+  const projects = useMemo(() => [
+    { label: "All projects", value: "" },
+    ...[...new Set(tasks.map((task) => task.project.name))].sort().map((value) => ({ label: value, value })),
+  ], [tasks]);
+  const visible: Task[] = useMemo(() => filterTasks(tasks, { project, date, status, now }), [tasks, project, date, status, now]);
+  const boardTasks: Task[] = useMemo(() => filterTasks(tasks, { project, date, now }), [tasks, project, date, now]);
+  const counts = useMemo(() => statusFilterCounts(tasks, { project, date, now }), [tasks, project, date, now]);
+  const statusOptions = STATUS_FILTERS.map(({ label, value }: { label: string; value: string }) => ({
+    label: counts[value] > 0 ? `${label} ${counts[value]}` : label,
+    value,
+  }));
+
+  function changeView(value: string) {
+    if (value !== "board" && value !== "list") return;
+    setView(value);
+    try { window.localStorage.setItem(VIEW_KEY, value); } catch { /* Keep the selection in memory. */ }
+  }
+  async function select(task: Task) {
+    const selection = ++selectionVersion.current;
+    const detailRequest = ++detailRequestVersion.current;
+    selectedRef.current = task;
+    setSelected(task);
+    setOpened(true);
+    setDetailError(null);
+    setNotice(null);
+    try {
+      const result = await call<{ task: Task }>("taskchef_app_task", { taskId: task.id });
+      if (selection !== selectionVersion.current || detailRequest !== detailRequestVersion.current) return;
+      selectedRef.current = result.task;
+      setSelected(result.task);
+    } catch (cause) {
+      if (selection === selectionVersion.current && detailRequest === detailRequestVersion.current) setDetailError(String(cause));
+    }
+  }
+  async function openChat(task: Task) {
+    setBusy(true);
+    try {
+      const result = await call<{ message: string }>("taskchef_app_open_chat", { taskId: task.id });
+      setNotice(result.message);
+    } catch (cause) {
+      if (selectedRef.current?.id === task.id) setDetailError(String(cause));
+      else setError(String(cause));
+    }
+    finally { setBusy(false); }
+  }
+  async function transition(targetStatus: "completed" | "failed", actionId: string) {
+    const requestTask = selectedRef.current;
+    if (!requestTask) return { ok: false };
+    const selection = selectionVersion.current;
+    const expected = manualTransitionExpectedState(requestTask);
+    setBusy(true);
+    setDetailError(null);
+    try {
+      const result = await call<{ task: Task }>("taskchef_app_transition", {
+        taskId: requestTask.id, actionId,
+        expected, targetStatus,
+      });
+      if (selection === selectionVersion.current && taskMatchesManualTransitionExpected(selectedRef.current, expected)) {
+        selectedRef.current = result.task;
+        setSelected(result.task);
+      }
+      setTasks((current) => current.map((task) => task.id === result.task.id && taskMatchesManualTransitionExpected(task, expected) ? { ...task, ...result.task } : task));
+      setNotice(`Marked ${result.task.status?.replace("_", " ")}.`);
+      void refresh().catch((cause) => setError(String(cause)));
+      return { ok: true };
+    } catch (cause) {
+      await refresh().catch(() => {});
+      setDetailError(`${String(cause)} The task has been refreshed; review its current state before trying again.`);
+      return { ok: false, rotateActionId: true };
+    } finally { setBusy(false); }
+  }
+  function closeDetail() {
+    if (busy) return;
+    selectionVersion.current += 1;
+    selectedRef.current = null;
+    setOpened(false);
+    setSelected(null);
+    setDetailError(null);
+  }
+  return <MantineProvider forceColorScheme="dark">
+    <RelativeTimeProvider now={now}>
+      <Box className="taskchef-app-shell">
+        <header className="taskchef-app-header">
+          <Group gap="xs" wrap="nowrap"><img alt="" aria-hidden className="taskchef-app-mark" src={brandIcon} /><Title order={1}>TaskChef <span>Dashboard</span></Title></Group>
+          <ActionIcon aria-label="Refresh" onClick={() => void refresh().catch((cause) => setError(String(cause)))} variant="subtle"><IconRefresh size={17} /></ActionIcon>
+        </header>
+        <main className={`taskchef-app-main${view === "list" ? " taskchef-app-main-list" : ""}`}>
+          <Paper className="taskchef-toolbar" radius={0}>
+            <Stack gap="sm">
+              <SegmentedControl aria-label="View" className="taskchef-app-view" data={[{ label: "Board", value: "board" }, { label: "List", value: "list" }]} onChange={changeView} size="xs" value={view} withItemsBorders={false} />
+              <Group className="taskchef-app-filters" gap="xs" wrap="nowrap">
+                <Select aria-label="Project" data={projects} onChange={(value) => { setProject(value ?? ""); setCompletedLimit(5); }} value={project} size="xs" />
+                <Select aria-label="Updated" data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]} onChange={(value) => { setDate(value ?? "all"); setCompletedLimit(5); }} value={date} size="xs" />
+              </Group>
+              {view === "list" && <Box className="taskchef-app-status"><SegmentedControl aria-label="Status" data={statusOptions} onChange={setStatus} size="xs" value={status} withItemsBorders={false} /></Box>}
+            </Stack>
+          </Paper>
+          {view === "list" && <Text aria-live="polite" className="taskchef-results-summary" id="task-results-summary">Tasks: {visible.length} of {tasks.length}</Text>}
+          {error && <Alert color="yellow" role="alert" mt="sm">{error}</Alert>}
+          {notice && !opened && <Alert color="teal" role="status" mt="sm">{notice}</Alert>}
+          {view === "board" ? <TaskBoard completedLimit={completedLimit} onMoreCompleted={() => setCompletedLimit((limit) => limit + 5)} onOpenCodex={(task) => void openChat(task)} onOpenDetail={(task) => void select(task)} tasks={boardTasks} />
+            : <Stack aria-describedby="task-results-summary" aria-label="Tasks" className="taskchef-list" component="section" gap="sm" mt="xs">
+              {visible.map((task) => <TaskCard key={task.id} onOpenCodex={(item) => void openChat(item)} onOpenDetail={(item) => void select(item)} task={task} />)}
+              {visible.length === 0 && <Paper className="taskchef-empty" p="lg" ta="center" withBorder><Title order={2} size="h5">No tasks match these filters</Title><Text c="dimmed" size="sm">Choose a different project, update window, or status.</Text></Paper>}
+            </Stack>}
+        </main>
+      </Box>
+      <TaskDetail busy={busy} error={detailError} highlightTurnRef={null} onClose={closeDetail} onCopy={() => {
+        if (!selected) return;
+        void navigator.clipboard.writeText(selected.id).then(() => setNotice("Task ID copied."), () => setNotice("Clipboard unavailable. Copy the ID from metadata."));
+      }} onOpenCodex={() => selected && void openChat(selected)} onTransition={transition} opened={opened} task={selected} notice={notice} />
+    </RelativeTimeProvider>
+  </MantineProvider>;
+}
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<TaskChefApp />);

package/src/mcp-app/react/styles.css

@@ -0,0 +1,35 @@
+:root { color-scheme: dark; --taskchef-page-gutter: 12px; }
+html, body, #root { min-width: 0; min-height: 100%; }
+body { background: var(--taskchef-page); }
+.taskchef-app-shell { min-height: 100vh; background: var(--taskchef-page); }
+.taskchef-app-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--taskchef-border); }
+.taskchef-app-header h1 { color: var(--taskchef-accent); font-size: 13px; font-weight: 750; letter-spacing: .025em; line-height: 1.1; text-transform: uppercase; }
+.taskchef-app-header h1 span { color: var(--taskchef-muted); font-weight: 600; }
+.taskchef-app-mark { display: block; flex: none; width: 25px; height: 25px; }
+.taskchef-app-main { min-width: 0; padding: 6px 12px 28px; }
+.taskchef-app-main-list { max-width: 624px; margin-inline: auto; }
+.taskchef-app-main .taskchef-toolbar { margin-bottom: 8px; padding-bottom: 10px; }
+.taskchef-app-main .mantine-SegmentedControl-root { max-width: 100%; }
+.taskchef-app-view { width: max-content; }
+.taskchef-app-filters { min-width: 0; width: min(100%, 488px); }
+.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 0; width: 0; min-width: 0; max-width: 240px; }
+.taskchef-app-status { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
+.taskchef-app-status .mantine-SegmentedControl-root { width: max-content; min-width: max-content; }
+.taskchef-app-status .mantine-SegmentedControl-label { padding-inline: 9px; font-size: 11px; white-space: nowrap; }
+.taskchef-app-main .taskchef-results-summary { margin: 4px 0 12px; }
+.taskchef-app-main .taskchef-board { grid-auto-columns: min(300px, calc(100% - 24px)); gap: 12px; min-height: 400px; padding-bottom: 12px; }
+.taskchef-app-main .taskchef-board-lane-heading { padding-inline: 4px; }
+.taskchef-app-main .taskchef-task-row { padding-inline: 10px; }
+.taskchef-app-main .taskchef-card-heading { gap: 5px; }
+.taskchef-app-main .taskchef-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.taskchef-app-main .taskchef-stat { padding: 6px 3px; }
+.taskchef-app-main .taskchef-stat:nth-child(3) { border-inline-start: 0; }
+.taskchef-app-main .taskchef-stat:nth-child(n + 3) { border-top: 1px solid var(--taskchef-border); }
+.taskchef-app-main .taskchef-list-card-footer { align-items: center; }
+.taskchef-app-main .taskchef-board-card { min-height: 140px; }
+@media (max-width: 360px) {
+  .taskchef-app-main { padding-inline: 8px; }
+  .taskchef-app-filters { flex-wrap: wrap; }
+  .taskchef-app-filters .mantine-InputWrapper-root { flex-basis: 100%; max-width: none; }
+  .taskchef-app-main .taskchef-board { grid-auto-columns: min(300px, calc(100% - 18px)); }
+}

package/src/mcp-app.js

@@ -0,0 +1,156 @@
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { z } from "zod";
+import { DashboardMonitor, UsageSummaryMonitor } from "./dashboard.js";
+import { taskGitHubProjection } from "./dashboard/github-links.js";
+import { createUsageTracker } from "./usage-tracker.js";
+import { isCodexThreadDeepLinkId, openThreadInCodex, openWorkspaceInCodex } from "./codex-app.js";
+import { canonicalDirectory, canonicalGitRoot, manuallyTransitionTask, readConfig } from "./workspace.js";
+
+export const TASKCHEF_APP_URI = "ui://taskchef/task-board/v2";
+const RESOURCE_MIME_TYPE = "text/html;profile=mcp-app";
+const htmlPath = fileURLToPath(new URL("./mcp-app/dist/index.html", import.meta.url));
+const taskIdSchema = z.string().regex(/^[a-zA-Z0-9._-]+$/).max(512);
+const expectedSchema = z.object({
+  status: z.enum(["working", "needs_input", "completed", "failed"]),
+  turnRef: z.string().nullable(),
+  threadId: z.string().nullable(),
+  updatedAt: z.string().min(1),
+}).strict();
+
+export function registerTaskChefApp(server, {
+  workspace,
+  createMonitor = (root) => new DashboardMonitor(root),
+  createUsageSummaryMonitor = (root) => new UsageSummaryMonitor(root),
+  createTaskUsageTracker = (root) => createUsageTracker({ workspace: root }),
+  transition = manuallyTransitionTask,
+  openThread = openThreadInCodex,
+  openProject = openWorkspaceInCodex,
+  readConfiguration = readConfig,
+} = {}) {
+  let monitor;
+  let usageSummaryMonitor;
+  let usageTracker;
+  let starting;
+  let appRevision = 0;
+  async function currentMonitor() {
+    if (!monitor) {
+      starting ??= (async () => {
+        const candidate = createMonitor(workspace);
+        try {
+          await candidate.start();
+          const summary = createUsageSummaryMonitor(candidate.workspace);
+          try { await summary.start(); }
+          catch (error) { summary.close(); throw error; }
+          usageSummaryMonitor = summary;
+          usageTracker = createTaskUsageTracker(candidate.workspace);
+          appRevision = 1;
+          candidate.on?.("snapshot", () => { appRevision += 1; });
+          summary.on?.("change", () => { appRevision += 1; });
+          monitor = candidate;
+          return candidate;
+        } catch (error) {
+          candidate.close();
+          usageSummaryMonitor?.close();
+          usageTracker?.close?.();
+          throw error;
+        }
+      })().finally(() => { starting = null; });
+      return starting;
+    }
+    await monitor.refresh();
+    return monitor;
+  }
+  const originalClose = server.close.bind(server);
+  server.close = async () => {
+    monitor?.close();
+    usageSummaryMonitor?.close();
+    usageTracker?.close?.();
+    await originalClose();
+  };
+  const appOnly = { ui: { resourceUri: TASKCHEF_APP_URI, visibility: ["app"] } };
+  function appSnapshot() {
+    const snapshot = monitor.snapshot();
+    return { ...snapshot, revision: appRevision, tasks: snapshot.tasks.map((task) => ({
+      ...task,
+      usage: usageSummaryMonitor.project(task),
+    })) };
+  }
+  server.registerResource("TaskChef task board", TASKCHEF_APP_URI, {
+    description: "TaskChef sidebar task board",
+    mimeType: RESOURCE_MIME_TYPE,
+  }, async () => ({ contents: [{
+    uri: TASKCHEF_APP_URI,
+    mimeType: RESOURCE_MIME_TYPE,
+    text: await readFile(htmlPath, "utf8"),
+  }] }));
+  server.registerTool("open_taskchef_board", {
+    title: process.env.TASKCHEF_PREVIEW === "1" ? "TaskChef Preview" : "TaskChef",
+    description: "Show the local TaskChef task board in the Codex sidebar.",
+    inputSchema: {},
+    _meta: { ui: { resourceUri: TASKCHEF_APP_URI }, "openai/ui": { entrypoints: [{ type: "global" }] } },
+    annotations: { readOnlyHint: true, openWorldHint: false },
+  }, async () => {
+    await currentMonitor();
+    const snapshot = appSnapshot();
+    return { structuredContent: { taskCount: snapshot.tasks.length }, content: [{ type: "text", text: `TaskChef board: ${snapshot.tasks.length} tasks.` }] };
+  });
+  server.registerTool("taskchef_app_snapshot", {
+    title: "Refresh TaskChef board", description: "Read the local task board.",
+    inputSchema: { revision: z.number().int().nonnegative().optional() }, _meta: appOnly,
+    annotations: { readOnlyHint: true, openWorldHint: false },
+  }, async ({ revision }) => {
+    await currentMonitor();
+    void Promise.resolve(usageTracker.preload?.(monitor.tasks)).catch(() => {});
+    if (revision !== undefined && revision === appRevision && monitor.unhealthy === false) {
+      return { structuredContent: { unchanged: true, revision: appRevision }, content: [] };
+    }
+    return { structuredContent: { snapshot: appSnapshot() }, content: [] };
+  });
+  server.registerTool("taskchef_app_task", {
+    title: "Read TaskChef task", description: "Read one task's details.",
+    inputSchema: { taskId: taskIdSchema }, _meta: appOnly,
+    annotations: { readOnlyHint: true, openWorldHint: false },
+  }, async ({ taskId }) => {
+    const task = (await currentMonitor()).tasks.find((candidate) => candidate.id === taskId);
+    if (!task) throw new Error("Task not found.");
+    const usage = await usageTracker.get(task).catch(() => ({
+      status: "unavailable", reason: "Task usage is temporarily unavailable.", task: null, turns: {},
+    }));
+    return { structuredContent: { task: { ...task, ...taskGitHubProjection(task), usage } }, content: [] };
+  });
+  server.registerTool("taskchef_app_transition", {
+    title: "Mark TaskChef task", description: "Apply a confirmed manual status transition.",
+    inputSchema: {
+      taskId: taskIdSchema,
+      actionId: z.string().uuid(),
+      expected: expectedSchema,
+      targetStatus: z.enum(["completed", "failed"]),
+    }, _meta: appOnly,
+    annotations: { readOnlyHint: false, destructiveHint: true, openWorldHint: false },
+  }, async ({ taskId, actionId, expected, targetStatus }) => {
+    const result = await transition(workspace, taskId, { actionId, expected, targetStatus });
+    await (await currentMonitor()).refresh({ force: true });
+    return { structuredContent: { task: { ...result.task, ...taskGitHubProjection(result.task) }, idempotent: result.idempotent }, content: [] };
+  });
+  server.registerTool("taskchef_app_open_chat", {
+    title: "Open TaskChef chat", description: "Open the task's Codex chat or configured project.",
+    inputSchema: { taskId: taskIdSchema }, _meta: appOnly,
+    annotations: { readOnlyHint: false, openWorldHint: false },
+  }, async ({ taskId }) => {
+    const task = (await currentMonitor()).tasks.find((candidate) => candidate.id === taskId);
+    if (!task) throw new Error("Task not found.");
+    if (isCodexThreadDeepLinkId(task.threadId)) {
+      await openThread(task.threadId);
+      return { structuredContent: { message: "Opened chat in Codex." }, content: [] };
+    }
+    const trusted = (await readConfiguration(workspace, { checkPaths: false })).projects
+      .find((project) => project.path === task.project.path);
+    if (!trusted) throw new Error("This historical task no longer matches a configured project.");
+    const canonicalPath = trusted.isGitRepository
+      ? await canonicalGitRoot(trusted.path) : await canonicalDirectory(trusted.path);
+    if (canonicalPath !== trusted.path) throw new Error("This configured project has moved.");
+    await openProject(canonicalPath);
+    return { structuredContent: { message: "Opened project in Codex. Select the recorded thread there." }, content: [] };
+  });
+}

package/src/mcp.js

@@ -18,6 +18,7 @@ import { createDashboardManager } from "./dashboard-manager.js";
 import { resolveWorkspacePath } from "./workspace-path.js";
 import { DASHBOARD_SERVER_VERSION, TASKCHEF_VERSION } from "./version.js";
 import { createUsageTracker } from "./usage-tracker.js";
+import { registerTaskChefApp } from "./mcp-app.js";
 
 const projectSchema = z.object({
   name: z.string(),
@@ -518,6 +519,8 @@ export function createTaskChefMcpServer({
     },
   );
 
+  registerTaskChefApp(server, { workspace });
+
   const originalConnect = server.connect.bind(server);
   const autostartDashboard = createDashboardAutostart({
     workspace,