taskchef 8.6.2 → 8.7.1

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

@@ -0,0 +1,50 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { AppearancePicker } from "./AppearancePicker";
+
+beforeEach(() => vi.stubGlobal("PointerEvent", class extends MouseEvent {
+  pointerType: string;
+  constructor(type: string, init: PointerEventInit = {}) { super(type, init); this.pointerType = init.pointerType ?? "mouse"; }
+}));
+afterEach(() => { cleanup(); vi.useRealTimers(); vi.unstubAllGlobals(); });
+test("hover stays open while crossing into the panel and closes after leaving", () => {
+  vi.useFakeTimers();
+  render(<MantineProvider><AppearancePicker value="dark" onChange={vi.fn()} /></MantineProvider>);
+  const button = screen.getByRole("button", { name: "Appearance" });
+  fireEvent.pointerEnter(button, { pointerType: "mouse" });
+  const panel = screen.getByRole("region", { name: "Appearance settings" });
+  fireEvent.pointerLeave(button, { pointerType: "mouse" });
+  fireEvent.pointerEnter(panel, { pointerType: "mouse" });
+  act(() => vi.advanceTimersByTime(250));
+  expect(panel).toBeVisible();
+  fireEvent.pointerLeave(panel, { pointerType: "mouse" });
+  act(() => vi.advanceTimersByTime(250));
+  expect(screen.queryByRole("region", { name: "Appearance settings" })).not.toBeInTheDocument();
+});
+test("tap opens, appearance changes, and Escape restores focus", () => {
+  const onChange = vi.fn();
+  render(<MantineProvider><AppearancePicker value="dark" onChange={onChange} /></MantineProvider>);
+  const button = screen.getByRole("button", { name: "Appearance" });
+  fireEvent.pointerEnter(button, { pointerType: "touch" });
+  expect(screen.queryByRole("region", { name: "Appearance settings" })).not.toBeInTheDocument();
+  fireEvent.click(button);
+  fireEvent.click(screen.getByRole("radio", { name: "DAY" }));
+  expect(onChange).toHaveBeenCalledWith("light");
+  fireEvent.keyDown(document, { key: "Escape" });
+  expect(screen.queryByRole("region", { name: "Appearance settings" })).not.toBeInTheDocument();
+  expect(button).toHaveFocus();
+});
+test("theme rows use native variants and keyboard selection", () => {
+  const onVisualThemeChange = vi.fn();
+  render(<MantineProvider><AppearancePicker value="light" appearance="light" visualThemeId="chatgpt" onChange={vi.fn()} onVisualThemeChange={onVisualThemeChange} /></MantineProvider>);
+  fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
+  expect(screen.queryByRole("radio", { name: "Dracula" })).not.toBeInTheDocument();
+  expect(screen.getByRole("radio", { name: "Proof" })).toBeVisible();
+  const selected = screen.getByRole("radio", { name: "ChatGPT" });
+  selected.focus();
+  fireEvent.keyDown(selected, { key: "ArrowDown" });
+  expect(screen.queryByRole("radio", { name: "Ayu" })).not.toBeInTheDocument();
+  expect(onVisualThemeChange).toHaveBeenCalledWith("absolutely");
+  expect(screen.getByRole("radio", { name: "Absolutely" })).toHaveFocus();
+});

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

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+import { SegmentedControl } from "@mantine/core";
+import { IconCheck, IconPalette } from "@tabler/icons-react";
+
+import { VISUAL_THEMES, themeVariables, type Appearance } from "./themes";
+export function AppearancePicker({ value, onChange, visualThemeId = "chatgpt", appearance = "dark", onVisualThemeChange }: { value: "light" | "dark" | "system"; onChange: (value: string) => void; visualThemeId?: string; appearance?: Appearance; onVisualThemeChange?: (id: string) => void }) {
+  const [opened, setOpened] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelClose = () => { if (timer.current !== null) clearTimeout(timer.current); timer.current = null; };
+  const close = () => { cancelClose(); setOpened(false); };
+  const open = () => { cancelClose(); setOpened(true); };
+  const enter = (event: React.PointerEvent) => { if (event.pointerType !== "touch") open(); };
+  const leave = (event: React.PointerEvent) => {
+    if (event.pointerType === "touch") return;
+    cancelClose();
+    timer.current = setTimeout(close, 200);
+  };
+  useEffect(() => cancelClose, []);
+  useEffect(() => {
+    if (!opened) return;
+    const outside = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) close(); };
+    const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { close(); button.current?.focus(); } };
+    document.addEventListener("pointerdown", outside);
+    document.addEventListener("keydown", escape);
+    return () => { document.removeEventListener("pointerdown", outside); document.removeEventListener("keydown", escape); };
+  }, [opened]);
+  return <div className="next-appearance" ref={root}>
+    <button ref={button} className="next-icon-button" aria-label="Appearance" title="Appearance" aria-expanded={opened} aria-controls="next-appearance-panel" onPointerEnter={enter} onPointerLeave={leave} onClick={open}><IconPalette size={18} /></button>
+    {opened && <section id="next-appearance-panel" className="next-appearance-panel" aria-label="Appearance settings" onPointerEnter={enter} onPointerLeave={leave}>
+      <h2>Appearance</h2>
+      <SegmentedControl fullWidth aria-label="Light and dark appearance" value={value} onChange={onChange} data={[{ value: "light", label: "DAY" }, { value: "dark", label: "NIGHT" }, { value: "system", label: "SYSTEM" }]} size="xs" />
+      <h3>Theme</h3>
+      <div className="next-theme-list" role="radiogroup" aria-label="Theme" onKeyDown={event => {
+        if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+        const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('button[role="radio"]'));
+        const current = buttons.indexOf(event.target as HTMLButtonElement);
+        if (current < 0) return;
+        event.preventDefault();
+        const index = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+        buttons[index].focus(); buttons[index].click();
+      }}>
+        {VISUAL_THEMES.filter(item => item.variants[appearance]).sort((a, b) => a.id === "chatgpt" ? -1 : b.id === "chatgpt" ? 1 : a.label.localeCompare(b.label)).map((item, index) => {
+          const colors = themeVariables(item, appearance);
+          return <div key={item.id}>
+            {index === 1 && <div className="next-theme-group">Codex themes</div>}
+            <button role="radio" tabIndex={visualThemeId === item.id ? 0 : -1} aria-checked={visualThemeId === item.id} className="next-appearance-theme" onClick={() => onVisualThemeChange?.(item.id)}>
+              <span className="next-appearance-preview" style={{ background: colors["--taskchef-surface"], color: colors["--taskchef-link"], borderColor: colors["--taskchef-border-heavy"], fontFamily: colors["--taskchef-font"] }} aria-hidden="true">Aa</span><span>{item.label}</span>{visualThemeId === item.id && <IconCheck size={16} aria-hidden="true" />}
+            </button>
+          </div>;
+        })}
+      </div>
+    </section>}
+  </div>;
+}

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

@@ -0,0 +1,78 @@
+import { MantineProvider } from "@mantine/core";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { GitHubConnection } from "./GitHubConnection";
+
+afterEach(() => { cleanup(); vi.useRealTimers(); vi.restoreAllMocks(); });
+const auth = { configured: true, connected: false, login: null };
+function setup(props: Partial<Parameters<typeof GitHubConnection>[0]> = {}) {
+  const request = vi.fn().mockResolvedValue({ ...auth, pending: { userCode: "ABCD-EFGH", verificationUrl: "https://github.com/login/device", expiresAt: Date.now() + 900_000 } });
+  const openLink = vi.fn().mockResolvedValue({});
+  const refresh = vi.fn().mockResolvedValue({});
+  const openSettings = vi.fn().mockResolvedValue({});
+  render(<MantineProvider><GitHubConnection auth={auth} request={request} openLink={openLink} refresh={refresh} openSettings={openSettings} {...props} /></MantineProvider>);
+  fireEvent.click(screen.getByRole("button", { name: "GitHub connection" }));
+  return { request, openLink, refresh, openSettings };
+}
+test("unconfigured connection directs users to native plugin settings", async () => {
+  const c = setup({ auth: { ...auth, configured: false } });
+  fireEvent.click(await screen.findByRole("button", { name: "Open plugin settings" }));
+  await waitFor(() => expect(c.openSettings).toHaveBeenCalledOnce());
+});
+test("sign-in displays only the user code and opens GitHub's verification page", async () => {
+  const c = setup();
+  expect(await screen.findByText(/read PR and CI status for your selected repositories/)).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Repository access" })).toHaveAttribute("data-variant", "default");
+  fireEvent.click(await screen.findByRole("button", { name: "Sign in with GitHub" }));
+  expect(await screen.findByText("ABCD-EFGH")).toBeInTheDocument();
+  expect(c.request).toHaveBeenCalledWith("start");
+  fireEvent.click(screen.getByRole("button", { name: "Open GitHub" }));
+  await waitFor(() => expect(c.openLink).toHaveBeenCalledWith("https://github.com/login/device"));
+});
+test("connected account can remove its local sign-in and refresh the board", async () => {
+  const request = vi.fn().mockResolvedValue(auth);
+  const c = setup({ auth: { ...auth, connected: true, login: "tester" }, request });
+  expect(await screen.findByText(/Install TaskChef in each organization/)).toBeInTheDocument();
+  expect(screen.queryByText(/cached for one minute/)).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Manage repository access" })).toHaveAttribute("data-variant", "default");
+  expect(await screen.findByText("tester")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Disconnect this computer" }));
+  await waitFor(() => expect(request).toHaveBeenCalledWith("disconnect"));
+  await waitFor(() => expect(c.refresh).toHaveBeenCalledOnce());
+  expect(await screen.findByRole("button", { name: "Sign in with GitHub" })).toBeInTheDocument();
+});
+
+test("five-second board snapshots do not reset the pending sign-in timer", async () => {
+  vi.useFakeTimers();
+  const pending = { userCode: "ABCD-EFGH", verificationUrl: "https://github.com/login/device", expiresAt: Date.now() + 900_000 };
+  const request = vi.fn().mockResolvedValue({ ...auth, pending });
+  const refresh = vi.fn().mockResolvedValue({});
+  const props = { request, refresh, openSettings: vi.fn(), openLink: vi.fn() };
+  const { rerender } = render(<MantineProvider><GitHubConnection {...props} auth={{ ...auth, pending }} /></MantineProvider>);
+  fireEvent.click(screen.getByRole("button", { name: "GitHub connection" }));
+  await act(async () => { vi.advanceTimersByTime(4000); });
+  rerender(<MantineProvider><GitHubConnection {...props} auth={{ ...auth, pending: { ...pending } }} /></MantineProvider>);
+  await act(async () => { vi.advanceTimersByTime(1000); });
+  expect(request).toHaveBeenCalledWith("poll");
+});
+
+
+test("pending sign-in mounted hidden resumes polling after the panel becomes visible", async () => {
+  vi.useFakeTimers();
+  let visibility: DocumentVisibilityState = "hidden";
+  vi.spyOn(document, "visibilityState", "get").mockImplementation(() => visibility);
+  const pending = {userCode:"ABCD-EFGH",verificationUrl:"https://github.com/login/device",expiresAt:Date.now()+900000};
+  const request = vi.fn().mockResolvedValue({...auth,connected:true,login:"tester"});
+  const refresh = vi.fn().mockResolvedValue({});
+  render(<MantineProvider><GitHubConnection inline auth={{...auth,pending}} request={request} refresh={refresh} openSettings={vi.fn()} openLink={vi.fn()} /></MantineProvider>);
+  await act(async () => { vi.advanceTimersByTime(10000); });
+  expect(request).not.toHaveBeenCalled();
+  visibility = "visible";
+  fireEvent(document,new Event("visibilitychange"));
+  await act(async () => { vi.advanceTimersByTime(5000); });
+  expect(request).toHaveBeenCalledWith("poll");
+  expect(refresh).toHaveBeenCalledOnce();
+  visibility = "hidden";
+  await act(async () => { vi.advanceTimersByTime(10000); });
+  expect(request).toHaveBeenCalledTimes(1);
+});

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

@@ -0,0 +1,78 @@
+import { ActionIcon, Alert, Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { IconBrandGithub } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+export interface GitHubAuth {
+  configured: boolean;
+  connected: boolean;
+  login: string | null;
+  error?: string;
+  pending?: { userCode: string; verificationUrl: string; expiresAt: number };
+}
+export function GitHubConnection({ auth, request, openLink, refresh, openSettings, openSignal = 0, inline = false, hideTrigger = false }: {
+  openSignal?: number;
+  inline?: boolean;
+  hideTrigger?: boolean;
+  auth: GitHubAuth;
+  request: (action: "status" | "start" | "poll" | "disconnect") => Promise<GitHubAuth>;
+  openLink: (url: string) => Promise<unknown>;
+  refresh: () => Promise<unknown>;
+  openSettings: () => Promise<unknown>;
+}) {
+  const [opened, setOpened] = useState(inline);
+  const [current, setCurrent] = useState(auth);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => { setCurrent(auth); }, [auth]);
+  useEffect(() => { if (openSignal > 0) { setError(null); setOpened(true); } }, [openSignal]);
+  useEffect(() => {
+    if (!opened || !current.pending) return;
+    let cancelled = false;
+    let polling = false;
+    const timer = window.setInterval(async () => {
+      if (polling || document.visibilityState === "hidden") return;
+      polling = true;
+      try {
+        const next = await request("poll");
+        if (cancelled) return;
+        setCurrent(next);
+        if (next.connected) await refresh();
+      } catch (cause) { if (!cancelled) { setError(String(cause)); setCurrent((value) => ({ ...value, pending: undefined })); } }
+      finally { polling = false; }
+    }, 5000);
+    return () => { cancelled = true; window.clearInterval(timer); };
+  // Snapshot polling supplies a new pending object; the code itself stays stable.
+  }, [opened, current.pending?.userCode, request, refresh]);
+  async function action(operation: () => Promise<unknown>) {
+    setBusy(true); setError(null);
+    try { await operation(); } catch (cause) { setError(String(cause)); }
+    finally { setBusy(false); }
+  }
+  const controls = <Stack gap="sm">
+        {(error || current.error) && <Alert color="red" role="alert">{error || current.error}</Alert>}
+        {!current.configured ? <>
+          <Text size="sm">GitHub connection is not ready. Open plugin settings and try again.</Text>
+          <Button onClick={() => void action(openSettings)}>Open plugin settings</Button>
+        </> : current.connected ? <>
+          <Text size="sm">Connected as <strong>{current.login}</strong>.</Text>
+          <Text size="sm">Install TaskChef in each organization you want to use, and select the repositories it can access. An organization owner may need to approve the installation.</Text>
+          <Button variant="default" onClick={() => void action(() => openLink("https://github.com/settings/installations"))}>Manage repository access</Button>
+          <Button disabled={busy} variant="default" onClick={() => void action(async () => { setCurrent(await request("disconnect")); await refresh(); })}>Disconnect this computer</Button>
+          <Text c="dimmed" size="xs">You can reconnect at any time.</Text>
+        </> : current.pending ? <>
+          <Text size="sm">Enter this code on GitHub:</Text>
+          <Text fw={700} size="xl" style={{ letterSpacing: "0.1em" }}>{current.pending.userCode}</Text>
+          <Button disabled={busy} onClick={() => void action(() => openLink(current.pending!.verificationUrl))}>Open GitHub</Button>
+          <Text c="dimmed" size="xs">Waiting for your approval. Keep this dialog open. The code expires in 15 minutes.</Text>
+        </> : <>
+          <Text size="sm">Let TaskChef read PR and CI status for your selected repositories and update the board automatically.</Text>
+          <Group><Button disabled={busy} onClick={() => void action(async () => setCurrent(await request("start")))}>Sign in with GitHub</Button>
+            <Button variant="default" onClick={() => void action(() => openLink("https://github.com/settings/installations"))}>Repository access</Button></Group>
+        </>}
+  </Stack>;
+  if (inline) return controls;
+  return <>
+    {!hideTrigger && <ActionIcon aria-label="GitHub connection" title={auth.connected ? `GitHub: ${auth.login}` : "Connect GitHub"} variant="subtle" onClick={() => { setError(null); setOpened(true); }}><IconBrandGithub size={17} /></ActionIcon>}
+    <Modal opened={opened} onClose={() => setOpened(false)} title="GitHub PR status" centered>{controls}</Modal>
+  </>;
+}

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

@@ -0,0 +1,121 @@
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { NextNotificationCenter, type NextNotification } from "./NextNotificationCenter";
+
+afterEach(cleanup);
+const notice = (id: string, extra: Partial<NextNotification> = {}): NextNotification => ({
+  id, taskId: "chat", title: "Fix login is ready for input or review", detail: "", kind: "ready", read: false,
+  timestamp: "2026-10-09T07:00:00Z", ...extra,
+});
+
+test("existing repeated chat messages keep the latest timestamp and read state", () => {
+  const onAction = vi.fn().mockResolvedValue(undefined);
+  const onOpen = vi.fn();
+  const latest = notice("latest", { timestamp: "2026-10-09T08:00:00Z", read: true });
+  render(<NextNotificationCenter state={{ revision: 1, items: [latest, notice("old"), notice("older")] }} toasts={[]} onAction={onAction} onOpen={onOpen} onDismiss={vi.fn()} />);
+  expect(screen.getByRole("button", { name: "Notifications" })).toBeVisible();
+  fireEvent.click(screen.getByRole("button", { name: "Notifications" }));
+  const center = screen.getByRole("region", { name: "Notification center" });
+  expect(within(center).getAllByRole("article")).toHaveLength(1);
+  expect(center.querySelector("time")).toHaveAttribute("datetime", latest.timestamp);
+  fireEvent.click(within(center).getByRole("button", { name: "Unread" }));
+  expect(within(center).getByText("No unread notifications")).toBeVisible();
+  fireEvent.click(within(center).getByRole("button", { name: "All" }));
+  fireEvent.click(within(center).getByRole("button", { name: /Fix login is ready/ }));
+  expect(onAction).toHaveBeenCalledWith("read", "latest");
+  expect(onOpen).toHaveBeenCalledWith(latest);
+});
+
+test("new repeats replace the visible entry while other chats and messages stay separate", () => {
+  const props = { toasts: [], onAction: vi.fn().mockResolvedValue(undefined), onOpen: vi.fn(), onDismiss: vi.fn() };
+  const original = notice("old");
+  const separate = [notice("other-chat", { taskId: "another" }), notice("interrupted", { kind: "interrupted", title: "Fix login was interrupted" }), notice("detail", { detail: "Different details" }), notice("global-one", { taskId: null }), notice("global-two", { taskId: null })];
+  const { rerender } = render(<NextNotificationCenter {...props} state={{ revision: 1, items: [original, ...separate] }} />);
+  fireEvent.click(screen.getByRole("button", { name: "Notifications, unread" }));
+  const latest = notice("latest", { timestamp: "2026-10-09T08:00:00Z" });
+  rerender(<NextNotificationCenter {...props} state={{ revision: 2, items: [latest, original, ...separate] }} />);
+  const center = screen.getByRole("region", { name: "Notification center" });
+  const entries = within(center).getAllByRole("article");
+  expect(entries).toHaveLength(6);
+  expect(entries[0].querySelector("time")).toHaveAttribute("datetime", latest.timestamp);
+  expect(within(center).getByRole("button", { name: "Unread (6)" })).toBeVisible();
+});
+
+
+test("opening and scrolling marks only notifications observed in the panel read", async () => {
+  const observers: Array<{ callback: IntersectionObserverCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }> = [];
+  vi.stubGlobal("IntersectionObserver", class {
+    observe = vi.fn(); disconnect = vi.fn();
+    constructor(callback: IntersectionObserverCallback, options: IntersectionObserverInit) { expect(options.threshold).toBe(0.01); observers.push({ callback, observe: this.observe, disconnect: this.disconnect }); }
+  });
+  try {
+    const onAction = vi.fn().mockResolvedValue(undefined);
+    const props = { toasts: [], onAction, onOpen: vi.fn(), onDismiss: vi.fn() };
+    render(<NextNotificationCenter {...props} state={{ revision: 1, items: [notice("visible"), notice("offscreen", { taskId: "other" })] }} />);
+    expect(onAction).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Notifications, unread" }));
+    const entries = screen.getAllByRole("article");
+    await act(async () => observers[0].callback([{ target: entries[0], isIntersecting: true }, { target: entries[1], isIntersecting: false }] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onAction).toHaveBeenCalledExactlyOnceWith("read", "visible");
+    await act(async () => observers[0].callback([{ target: entries[0], isIntersecting: true }, { target: entries[1], isIntersecting: true }] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onAction).toHaveBeenCalledTimes(2);
+    expect(onAction).toHaveBeenLastCalledWith("read", "offscreen");
+    fireEvent.click(screen.getByRole("button", { name: "Close notifications" }));
+    expect(observers[0].disconnect).toHaveBeenCalled();
+  } finally { vi.unstubAllGlobals(); }
+});
+
+
+test("failed auto-read requests retry when the panel opens again", async () => {
+  const observers: IntersectionObserverCallback[] = [];
+  vi.stubGlobal("IntersectionObserver", class {
+    observe = vi.fn(); disconnect = vi.fn();
+    constructor(callback: IntersectionObserverCallback) { observers.push(callback); }
+  });
+  try {
+    const onAction = vi.fn().mockRejectedValueOnce(new Error("Temporary failure")).mockResolvedValue(undefined);
+    render(<NextNotificationCenter state={{revision: 1, items: [notice("retry")]}} toasts={[]} onAction={onAction} onOpen={vi.fn()} onDismiss={vi.fn()} />);
+    fireEvent.click(screen.getByRole("button", {name: "Notifications, unread"}));
+    await act(async () => observers[0]([{target: screen.getByRole("article"), isIntersecting: true}] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    fireEvent.click(screen.getByRole("button", {name: "Close notifications"}));
+    fireEvent.click(screen.getByRole("button", {name: "Notifications, unread"}));
+    await act(async () => observers[1]([{target: screen.getByRole("article"), isIntersecting: true}] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onAction).toHaveBeenCalledTimes(2);
+  } finally {vi.unstubAllGlobals();}
+});
+
+
+test("hover opens the center, crossing to the panel keeps it open, and leaving closes it", () => {
+  vi.useFakeTimers();
+  try {
+    render(<NextNotificationCenter state={{revision: 1, items: []}} toasts={[]} onAction={vi.fn()} onOpen={vi.fn()} onDismiss={vi.fn()} />);
+    const bell = screen.getByRole("button", {name: "Notifications"});
+    fireEvent.pointerEnter(bell, {pointerType: "mouse"});
+    const panel = screen.getByRole("region", {name: "Notification center"});
+    fireEvent.pointerLeave(bell, {pointerType: "mouse"});
+    fireEvent.pointerEnter(panel, {pointerType: "mouse"});
+    act(() => vi.advanceTimersByTime(250));
+    expect(panel).toBeVisible();
+    fireEvent.click(bell);
+    expect(panel).toBeVisible();
+    fireEvent.pointerLeave(panel, {pointerType: "mouse"});
+    act(() => vi.advanceTimersByTime(250));
+    expect(screen.queryByRole("region", {name: "Notification center"})).not.toBeInTheDocument();
+  } finally {vi.useRealTimers();}
+});
+
+
+test("Escape cancels a pending hover close before keyboard reopening", () => {
+  vi.useFakeTimers();
+  try {
+    render(<NextNotificationCenter state={{revision: 1, items: []}} toasts={[]} onAction={vi.fn()} onOpen={vi.fn()} onDismiss={vi.fn()} />);
+    const bell = screen.getByRole("button", {name: "Notifications"});
+    fireEvent.pointerEnter(bell, {pointerType: "mouse"});
+    fireEvent.pointerLeave(screen.getByRole("region", {name: "Notification center"}), {pointerType: "mouse"});
+    fireEvent.keyDown(document, {key: "Escape"});
+    expect(screen.queryByRole("region", {name: "Notification center"})).not.toBeInTheDocument();
+    fireEvent.click(bell);
+    act(() => vi.advanceTimersByTime(250));
+    expect(screen.getByRole("region", {name: "Notification center"})).toBeVisible();
+  } finally {vi.useRealTimers();}
+});

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

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from "react";
+import { IconBell, IconX } from "@tabler/icons-react";
+
+export interface NextNotification { id: string; taskId: string | null; title: string; detail: string; kind: "ready" | "interrupted" | "confirmation" | "error"; read: boolean; timestamp: string; }
+export interface NextNotificationState { revision: number; items: NextNotification[]; }
+
+// Saved notifications arrive newest first. Keep the latest copy of each chat message.
+function latestChatMessages(items: NextNotification[]) {
+  const seen = new Set<string>();
+  return items.filter((item) => {
+    if (!item.taskId) return true;
+    const key = JSON.stringify([item.taskId, item.kind, item.title, item.detail]);
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+export function NextNotificationCenter({ state, toasts, onAction, onOpen, onDismiss }: {
+  state: NextNotificationState; toasts: NextNotification[];
+  onAction: (action: "read" | "read_all" | "clear", id?: string) => Promise<void>;
+  onOpen: (item: NextNotification) => void; onDismiss: (id: string) => void;
+}) {
+  const [opened, setOpened] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelClose = () => { if (closeTimer.current !== null) clearTimeout(closeTimer.current); closeTimer.current = null; };
+  const closeCenter = () => { cancelClose(); setOpened(false); };
+  const openOnHover = (event: React.PointerEvent) => { if (event.pointerType === "touch") return; cancelClose(); setOpened(true); };
+  const closeAfterHover = (event: React.PointerEvent) => { if (event.pointerType === "touch") return; cancelClose(); closeTimer.current = setTimeout(() => { setOpened(false); closeTimer.current = null; }, 200); };
+  useEffect(() => () => cancelClose(), []);
+  const [filter, setFilter] = useState<"all" | "unread">("all");
+  const [busy, setBusy] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const bell = useRef<HTMLButtonElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const reading = useRef(new Set<string>());
+  const actionRef = useRef(onAction);
+  actionRef.current = onAction;
+  const latest = latestChatMessages(state.items);
+  const unread = latest.filter((item) => !item.read).length;
+  const items = latest.filter((item) => filter === "all" || !item.read);
+  useEffect(() => {
+    if (!opened) return;
+    const close = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) closeCenter(); };
+    const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { closeCenter(); bell.current?.focus(); } };
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", escape);
+    return () => { document.removeEventListener("pointerdown", close); document.removeEventListener("keydown", escape); };
+  }, [opened]);
+  const unreadKey = JSON.stringify(items.filter(item => !item.read).map(item => item.id));
+  useEffect(() => {
+    if (!opened || !list.current || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        const id = (entry.target as HTMLElement).dataset.notificationId;
+        if (!entry.isIntersecting || !id || reading.current.has(id)) continue;
+        reading.current.add(id);
+        void actionRef.current("read", id).catch(() => reading.current.delete(id));
+      }
+    }, { root: list.current, threshold: 0.01 });
+    for (const item of list.current.querySelectorAll("[data-notification-id][data-unread=true]")) observer.observe(item);
+    return () => observer.disconnect();
+  }, [opened, unreadKey]);
+  async function mutate(action: "read" | "read_all" | "clear", id?: string) {
+    setBusy(true);
+    try { await onAction(action, id); } catch { /* The caller displays the error. */ } finally { setBusy(false); }
+  }
+  return <div className="next-notifications" ref={root}>
+    <button ref={bell} className="next-icon-button" aria-label={unread > 0 ? "Notifications, unread" : "Notifications"} aria-expanded={opened} aria-controls="next-notification-panel" onPointerEnter={openOnHover} onPointerLeave={closeAfterHover} onClick={() => { cancelClose(); setOpened(true); }} title={unread ? "Unread notifications" : "Notifications"}>
+      <IconBell size={18} />{unread > 0 && <span className="next-unread-dot" aria-hidden="true" />}
+    </button>
+    {opened && <section onPointerEnter={openOnHover} onPointerLeave={closeAfterHover} id="next-notification-panel" className="next-notification-panel" aria-label="Notification center">
+      <div className="next-notification-heading"><strong>Notifications</strong><button className="next-icon-button" aria-label="Close notifications" onClick={() => { closeCenter(); bell.current?.focus(); }}><IconX size={16} /></button></div>
+      <div className="next-notification-controls">
+        <div role="group" aria-label="Notification filter"><button aria-pressed={filter === "all"} onClick={() => setFilter("all")}>All</button><button aria-pressed={filter === "unread"} onClick={() => setFilter("unread")}>Unread{unread > 0 ? ` (${unread})` : ""}</button></div>
+        <button disabled={busy || unread === 0} onClick={() => void mutate("read_all")}>Mark all read</button>
+        <button disabled={busy || state.items.length === 0} onClick={() => void mutate("clear")}>Clear all</button>
+      </div>
+      <div className="next-notification-list" ref={list}>
+        {items.length === 0 && <p className="next-notification-empty">{filter === "unread" ? "No unread notifications" : "No notifications yet"}</p>}
+        {items.map((item) => <article key={item.id} data-notification-id={item.id} data-unread={!item.read} className={`next-notification-item${item.read ? "" : " next-notification-unread"}`}>
+          <button className="next-notification-message" disabled={busy} onClick={() => { void mutate("read", item.id); if (item.taskId) { closeCenter(); onOpen(item); } }}>
+            <strong>{item.title}</strong>{item.detail && <span>{item.detail}</span>}<time dateTime={item.timestamp}>{new Date(item.timestamp).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })}</time>
+          </button>
+        </article>)}
+      </div>
+    </section>}
+    <div className="next-toast-stack" aria-live="polite" aria-atomic="false">
+      {toasts.map((item) => <article key={item.id} className={`next-toast next-toast-${item.kind}`}>
+        <button className="next-toast-message" onClick={() => { if (item.taskId) onOpen(item); void mutate("read", item.id); onDismiss(item.id); }}><strong>{item.title}</strong>{item.detail && <span>{item.detail}</span>}</button>
+        <button className="next-icon-button" aria-label={`Dismiss ${item.title}`} onClick={() => onDismiss(item.id)}><IconX size={16} /></button>
+      </article>)}
+    </div>
+  </div>;
+}

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

@@ -0,0 +1,124 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../../dashboard/react/fixtures";
+import { NextTaskDetail } from "./NextTaskDetail";
+
+afterEach(cleanup);
+test("details show ordered PRs, one access alert per repo, and useful collapsed fields", () => {
+  const task = { ...fixtureTask(), replyExcerpt: "The **update** is ready.", relatedGitHubLinks: [], inputSource: "ordinary" as const,
+    observed: { archive: false, source: "vscode", lastTurnEvent: "completed", lastTurnEventAt: null, recentFileActivity: false, latestTurnDurationMs: 480000, recordedChatDurationMs: 1200000, directChildCount: 155 },
+    detailPullRequests: [
+      { url: "https://github.com/example/repo/pull/3", title: "Latest change", state: "open" as const, checks: "passed" as const },
+      { url: "https://github.com/example/repo/pull/2", title: "Older change", state: "unknown" as const, checks: "unknown" as const, accessIssue: "denied" as const },
+      { url: "https://github.com/example/other/pull/1", title: "Other repo", state: "unknown" as const, checks: "unknown" as const, accessIssue: "denied" as const },
+    ] };
+  render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={() => {}} onOpenCodex={() => {}} /></MantineProvider>);
+  const prs = screen.getByRole("region", { name: "Pull requests" });
+  expect(within(prs).getAllByRole("link").map(link => link.textContent)).toEqual(["#3 Latest change", "Grant access", "#2 Older change", "#1 Other repo", "Grant access"]);
+  expect(screen.getByRole("region", { name: "Activity" }).compareDocumentPosition(prs) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(screen.getByText("Latest turn worked for 8m")).toBeVisible();
+  expect(screen.getByText("Total chat worked for 20m")).toBeVisible();
+  expect(within(prs).queryByText("CI passed")).toBeNull();
+  expect(screen.getByRole("dialog", { name: task.title })).toBeVisible();
+  expect(screen.getAllByText(task.title)).toHaveLength(1);
+  expect(screen.getByText("155 subagents")).toBeVisible();
+  expect(screen.queryByText("Latest saved reply (excerpt)")).toBeNull();
+  const details = screen.getByText("Technical details").closest("details")!;
+  expect(details.open).toBe(false);
+  fireEvent.click(screen.getByText("Technical details"));
+  expect(within(details).getByText("Desktop")).toBeVisible();
+  expect(within(details).getByText("Human")).toBeVisible();
+  expect(screen.queryByRole("button", {name: "Chat actions"})).toBeNull();
+  expect(screen.queryByRole("button", {name: "Copy Chat ID"})).toBeNull();
+});
+
+
+test("a missing older PR keeps its warning after that PR rather than the accessible latest PR", () => {
+  const task = { ...fixtureTask(), relatedGitHubLinks: [], detailPullRequests: [
+    { url: "https://github.com/example/repo/pull/3", title: "Accessible latest", state: "open" as const, checks: "passed" as const },
+    { url: "https://github.com/example/repo/pull/2", title: "Missing older", state: "unknown" as const, checks: "unknown" as const, accessIssue: "not_found" as const },
+  ] };
+  render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={() => {}} onOpenCodex={() => {}} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Pull requests" })).getAllByRole("link").map(link => link.textContent)).toEqual(["#3 Accessible latest", "#2 Missing older", "Check access"]);
+});
+
+
+test("running details use Worked for rather than the finished-turn label", () => {
+  const task = { ...fixtureTask(), observed: { archive: false, lastTurnEvent: "inProgress", lastTurnEventAt: new Date(Date.now()-120000).toISOString(), recentFileActivity: true, recordedChatDurationMs: 180000 } };
+  render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={()=>{}} /></MantineProvider>);
+  expect(screen.getByText("Worked for 2m")).toBeVisible();
+  expect(screen.getByText("Total chat worked for 5m")).toBeVisible();
+  expect(screen.queryByText(/Latest turn worked for/)).toBeNull();
+});
+
+test("usage keeps later-turn tokens visible when historical cost is partial", () => {
+  const latest = {tokens: {input_tokens: 100, cached_input_tokens: 20, cache_write_input_tokens: 0, output_tokens: 10, reasoning_output_tokens: 5, total_tokens: 110}, costUsd: 0.2, samples: 1, partial: false, costPartial: false};
+  const task = {...fixtureTask(), status: "needs_input" as const, sessionUsage: {latest, total: {...latest,tokens: {...latest.tokens,total_tokens: 10000},costUsd: 3.2, partial: true,costPartial: true}, subagents: 3, pricingDate: "2026-10-10"}};
+  render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={()=>{}} /></MantineProvider>);
+  const usage=screen.getByRole("region",{name:"Usage"});
+  expect(within(usage).getByText("Total chat")).toBeVisible();
+  expect(within(usage).getByRole("link", {name: "OpenAI API pricing"})).toHaveAttribute("href", "https://developers.openai.com/api/docs/pricing");
+  expect(within(usage).queryByText(/Includes 3 subagents/)).toBeNull();
+  expect(within(usage).getByText("110")).toBeVisible();
+  expect(within(usage).getByText("≥10.00K")).toBeVisible();
+  expect(within(usage).getByRole("columnheader", {name:"Tokens 2"})).toBeVisible();
+  expect(within(usage).getByRole("columnheader", {name:"API-equivalent cost 1,2"})).toBeVisible();
+  expect(within(usage).getByText("$0.20")).toBeVisible();
+  expect(within(usage).getByText("≥$3.20")).toBeVisible();
+  expect(within(usage).getByText(/Incomplete estimate:/)).toBeVisible();
+});
+
+test("detail header keeps Open chat and Done without the old action menu", () => {
+  const open=vi.fn();
+  render(<MantineProvider><NextTaskDetail task={fixtureTask()} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={open} extraActions={<button>Mark Done</button>} /></MantineProvider>);
+  fireEvent.click(screen.getByRole("button", {name: /^Open chat for/}));
+  expect(open).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("button", {name: "Mark Done"})).toBeVisible();
+  expect(screen.queryByRole("button", {name: "Chat actions"})).toBeNull();
+});
+
+test("unpriced usage marks the cost label with the incomplete footnote", () => {
+  const value={tokens:{input_tokens:10,cached_input_tokens:0,cache_write_input_tokens:0,output_tokens:1,reasoning_output_tokens:0,total_tokens:11},samples:1,costUsd:0,costPartial:true,partial:false};
+  const task={...fixtureTask(),sessionUsage:{latest:value,total:value,subagents:0,pricingDate:"2026-10-10"}};
+  render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={()=>{}} /></MantineProvider>);
+  expect(within(screen.getByRole("region",{name:"Usage"})).getAllByText("—")).toHaveLength(2);
+});
+
+
+test("Usage stays visible while loading and when data is unavailable", () => {
+ const props={task:fixtureTask(),opened:true,busy:false,error:null,onClose:()=>{},onOpenCodex:()=>{}};
+ const view=render(<MantineProvider><NextTaskDetail {...props} usageLoading /></MantineProvider>);
+ const section=screen.getByRole("region",{name:"Usage"});
+ expect(within(section).getByRole("heading",{name:"Usage"})).toBeVisible();
+ expect(within(section).getByRole("status")).toHaveTextContent("Loading…");
+ view.rerender(<MantineProvider><NextTaskDetail {...props} usageLoading={false} /></MantineProvider>);
+ expect(screen.getByRole("region",{name:"Usage"})).toBe(section);
+ expect(within(section).getByRole("status")).toHaveTextContent("Usage unavailable.");
+ const value={tokens:{input_tokens:100,cached_input_tokens:0,cache_write_input_tokens:0,output_tokens:10,reasoning_output_tokens:0,total_tokens:110},samples:1,costUsd:0.1,costPartial:false,partial:false};
+ view.rerender(<MantineProvider><NextTaskDetail {...props} task={{...props.task,sessionUsage:{latest:value,total:value,subagents:0,pricingDate:"2026-10-10"}}} /></MantineProvider>);
+ expect(screen.getByRole("region",{name:"Usage"})).toBe(section);
+ expect(within(section).getByRole("table")).toBeVisible();
+ expect(within(section).queryByRole("status")).toBeNull();
+});
+
+
+test("a resolved usage read with zero samples is unavailable", () => {
+ const empty={tokens:{input_tokens:0,cached_input_tokens:0,cache_write_input_tokens:0,output_tokens:0,reasoning_output_tokens:0,total_tokens:0},samples:0,costUsd:0,costPartial:true,partial:true};
+ render(<MantineProvider><NextTaskDetail task={{...fixtureTask(),sessionUsage:{latest:empty,total:empty,subagents:0,pricingDate:"2026-10-10"}}} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={()=>{}} /></MantineProvider>);
+ const usage=screen.getByRole("region",{name:"Usage"});expect(within(usage).getByRole("status")).toHaveTextContent("Usage unavailable.");expect(within(usage).queryByRole("table")).toBeNull();
+});
+
+test('Needs answer adds an open-chat action without replacing the saved prompt or response', () => {
+ const open=vi.fn();
+ const task={...fixtureTask(),needsAnswer:true,pendingQuestions:[{id:'question',title:'May I retry the scan?',options:['Retry once','Stop']}],promptText:'Run the scan.',replyText:'The connection failed. Approval requested.'};
+ render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={open}/></MantineProvider>);
+ expect(screen.getByText('Needs answer')).toBeInTheDocument();
+ const questions=screen.getByRole('region',{name:'Pending questions'});
+ expect(within(questions).getByText('May I retry the scan?')).toBeVisible();
+ expect(within(questions).getAllByRole('listitem').map(item=>item.textContent)).toEqual(['1Retry once','2Stop']);
+ expect(within(questions).getByRole('button',{name:'Open chat to answer'})).toBeVisible();
+ expect(screen.getByText('Run the scan.')).toBeInTheDocument();
+ expect(screen.getByText('The connection failed. Approval requested.')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button',{name:'Open chat to answer'}));expect(open).toHaveBeenCalledTimes(1);
+});