taskchef 9.0.4 → 9.2.0

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

@@ -136,3 +136,16 @@ test("interrupted details show the recorded error after the response and clear i
   rerender(<MantineProvider><NextTaskDetail {...props} task={{ ...task, status: "working" }} /></MantineProvider>);
   expect(screen.queryByLabelText("Latest turn error")).toBeNull();
 });
+
+test("approval panel shows the live request and opens chat without answering it", () => {
+ const open=vi.fn();
+ const task={...fixtureTask(), status:'needs_input' as const, needsApproval:true, pendingApprovals:[{id:'16',turnId:'turn',title:'Browser use',message:'Allow upload to Gmail filters?',origin:'https://mail.google.com'}]};
+ const {rerender}=render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={open}/></MantineProvider>);
+ const panel=screen.getByRole('region',{name:'Pending approvals'});
+ expect(within(panel).getByText('Allow upload to Gmail filters?')).toBeVisible();
+ expect(within(panel).getByText('Origin: https://mail.google.com')).toBeVisible();
+ fireEvent.click(within(panel).getByRole('button',{name:'Open chat to approve'}));
+ expect(open).toHaveBeenCalledTimes(1);
+ rerender(<MantineProvider><NextTaskDetail task={{...task,needsApproval:false,pendingApprovals:[]}} opened busy={false} error={null} onClose={()=>{}} onOpenCodex={open}/></MantineProvider>);
+ expect(screen.queryByRole('region',{name:'Pending approvals'})).not.toBeInTheDocument();
+});

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

@@ -4,6 +4,7 @@ import { IconArrowUpRight, IconClock, IconFolder, IconHelpCircle, IconHourglass,
 import { useCallback, useEffect, useState, type ReactNode } from "react";
 import type { Task, SavedUsage } from "../../ui/types";
 import { PullRequestInfo, nextRunLabel } from "../../ui/components/CardStatusIcons";
+import { ApprovalPanel } from "../../ui/components/ApprovalNotice";
 import { OpenChatButton } from "../../ui/components/OpenChatButton";
 import { QueuedPrompts } from "../../ui/components/QueuedPrompts";
 import { TurnContent } from "../../ui/components/TurnContent";
@@ -48,14 +49,14 @@ export function NextTaskDetail({ task, opened, busy, usageLoading = false, error
   const count = task.observed?.directChildCount;
   const source = task.observed?.source === "vscode" ? "Desktop" : task.observed?.source === "cli" ? "CLI" : task.observed?.source === "exec" ? "Exec" : null;
   const input = task.inputSource === "ordinary" ? "Human" : task.inputSource === "scheduled" ? "Scheduled" : task.inputSource === "unverified" ? "Unknown" : null;
-  const label = task.status === "needs_input" || task.status === "interrupted" ? "Waiting for review" : task.status === "working" ? "Running" : task.status === "completed" ? "Done" : task.statusLabel;
+  const label = task.needsApproval ? "Needs approval" : task.status === "needs_input" || task.status === "interrupted" ? "Waiting for review" : task.status === "working" ? "Running" : task.status === "completed" ? "Done" : task.statusLabel;
   const tokenIncomplete = !!task.sessionUsage && [task.sessionUsage.latest, task.sessionUsage.total].some(value => value.partial);
   const costIncomplete = !!task.sessionUsage && [task.sessionUsage.latest, task.sessionUsage.total].some(value => value.costPartial);
   const content = <Stack gap="md">
     <Group justify="space-between" align="flex-start" wrap="nowrap" gap="xs" pr={8}>
       <Group gap="xs" mt={0} className="taskchef-detail-meta">
         <Tooltip label={task.project?.path || "No project"}><Text size="sm" c="dimmed" className="taskchef-detail-project"><IconFolder size={14} /><span>{task.project?.name || "No project"}</span></Text></Tooltip>
-        {label && <Badge variant="light" color="gray">{label}</Badge>}
+        {label && <Badge variant="light" color={task.needsApproval ? "orange" : "gray"}>{label}</Badge>}
         {task.needsAnswer && <Badge variant="light" color="blue">Needs answer</Badge>}
         {task.status === "interrupted" && <Badge variant="light" color="orange">Interrupted</Badge>}
       </Group>
@@ -65,8 +66,10 @@ export function NextTaskDetail({ task, opened, busy, usageLoading = false, error
       </Group>
     </Group>
     {error && <Alert color="red">{error}</Alert>}
+    {mobile && task.needsApproval && <ApprovalPanel task={task} busy={busy} onOpen={onOpenCodex} />}
     <Box className="taskchef-detail-layout">
       <Box className="taskchef-detail-reply">
+        {!mobile && task.needsApproval && <ApprovalPanel task={task} busy={busy} onOpen={onOpenCodex} />}
         <TurnContent task={task} loadImage={loadImage} workedDurationMs={duration} onLightboxChange={setLightboxOpen} onAnnotationChange={annotationChange} />
         {task.needsAnswer && <section aria-label="Pending questions" className="taskchef-pending-questions">
           <div className="taskchef-question-header"><IconHelpCircle size={14} aria-hidden /><span>{task.pendingQuestions?.length === 1 ? "Question" : "Questions"}</span></div>

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

@@ -13,7 +13,7 @@ vi.mock("@mantine/core", async () => {
     createTheme: (theme: unknown) => theme,
     ActionIcon: ({ children, onClick, ...props }: Record<string, unknown>) => React.createElement("button", { "aria-label": props["aria-label"], onClick }, children as React.ReactNode),
     Modal: ({ opened, children }: { opened: boolean; children: React.ReactNode }) => opened ? <div role="dialog">{children}</div> : null,
-    Alert: wrap("div"), Box: wrap("div"), Button: ({ children, onClick, disabled }: {children: React.ReactNode; onClick?: () => void; disabled?: boolean}) => <button onClick={onClick} disabled={disabled}>{children}</button>, Group: wrap("div"),
+    Alert: wrap("div"), Box: wrap("div"), Button: ({ children, onClick, disabled, ...props }: {children: React.ReactNode; onClick?: () => void; disabled?: boolean; "aria-pressed"?: boolean; title?: string}) => <button onClick={onClick} disabled={disabled} aria-pressed={props["aria-pressed"]} title={props.title}>{children}</button>, Group: wrap("div"),
     MantineProvider: ({ children }: { children: React.ReactNode }) => children,
     TextInput: ({ value, onChange, ...props }: { value: string; onChange: React.ChangeEventHandler<HTMLInputElement>; "aria-label": string }) => <input aria-label={props["aria-label"]} value={value} onChange={onChange} />,
     Paper: wrap("div"), Stack: wrap("div"), Text: wrap("p"), Title: wrap("h2"),
@@ -633,3 +633,37 @@ test("native card usage setting defaults on and changes without hiding detail us
   fireEvent.click(screen.getByRole("button", {name:"Task one"}));
   expect(await screen.findByRole("region", {name:"Usage"})).toBeInTheDocument();
 });
+
+
+test("Pinned toggle combines with filters and updates after pin changes on refresh", async () => {
+  tasks = [task("one", "working", new Date().toISOString(), "Alpha"), task("two", "needs_input", new Date().toISOString(), "Beta"), task("old", "completed", "2026-01-01T00:00:00Z", "Alpha"), task("unknown")];
+  tasks.slice(0, 3).forEach((item, index) => { item.observed = { pinned: index !== 1, archive: false, lastTurnEvent: null, lastTurnEventAt: null, recentFileActivity: false }; });
+  mount();
+  await screen.findByRole("button", { name: "Task one" });
+  const toggle = screen.getByRole("button", { name: "Pinned" });
+  expect(toggle).toHaveAttribute("aria-pressed", "false");
+  expect(toggle).toHaveAttribute("title", "Show only pinned chats");
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-pressed", "true");
+  expect(screen.queryByRole("button", { name: "Task two" })).not.toBeInTheDocument();
+  expect(screen.queryByRole("button", { name: "Task unknown" })).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Task old" })).toBeVisible();
+  fireEvent.change(screen.getByRole("combobox", { name: "Updated" }), { target: { value: "24h" } });
+  expect(screen.queryByRole("button", { name: "Task old" })).not.toBeInTheDocument();
+  fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "/Beta" } });
+  expect(screen.queryByRole("button", { name: "Task one" })).not.toBeInTheDocument();
+  expect(within(screen.getByRole("region", { name: "Task board" })).queryAllByRole("article")).toHaveLength(0);
+  tasks = tasks.map(item => item.id === "two" ? { ...item, observed: { ...item.observed!, pinned: true } } : item);
+  await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Refresh" })); });
+  expect(toggle).toHaveAttribute("aria-pressed", "true");
+  expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
+  fireEvent.change(screen.getByLabelText("Search Chats"), { target: { value: "missing" } });
+  expect(screen.queryByRole("button", { name: "Task two" })).not.toBeInTheDocument();
+  fireEvent.change(screen.getByLabelText("Search Chats"), { target: { value: "" } });
+  tasks = tasks.map(item => item.observed ? { ...item, observed: { ...item.observed, pinned: false } } : item);
+  await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Refresh" })); });
+  expect(within(screen.getByRole("region", { name: "Task board" })).queryAllByRole("article")).toHaveLength(0);
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-pressed", "false");
+  expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
+});

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

@@ -1,7 +1,7 @@
 import { cachedImageLoader } from "../../ui/image-cache";
 import { App } from "@modelcontextprotocol/ext-apps";
 import { ActionIcon, Alert, Box, Button, Group, MantineProvider, Modal, createTheme, Paper, SegmentedControl, Select, Stack, Text, TextInput, Title } from "@mantine/core";
-import { IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
+import { IconPin, IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DashboardSnapshot, Task, Project } from "../../ui/types";
@@ -113,6 +113,7 @@ export function TaskChefApp() {
   const [scan, setScan] = useState<ScanStats | null>(null);
   const [selected, setSelected] = useState<Task | null>(null);
   const [opened, setOpened] = useState(false);
+  const [pinnedOnly, setPinnedOnly] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -330,6 +331,7 @@ export function TaskChefApp() {
   const boardTasks: Task[] = useMemo(() => {
     const terms = search.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
     return filterTasks(projectTasks, { date, now }).filter((task: Task) => {
+      if (pinnedOnly && !task.observed?.pinned) return false;
       const content = [
         task.title, task.promptExcerpt ?? "", task.replyExcerpt ?? "", task.project.name,
         ...(task.project.githubRepos ?? []),
@@ -337,7 +339,7 @@ export function TaskChefApp() {
       ].join("\n").toLocaleLowerCase();
       return terms.every((term) => content.includes(term));
     });
-  }, [projectTasks, date, now, search]);
+  }, [projectTasks, date, now, search, pinnedOnly]);
   const visible = useMemo(() => boardTasks.filter((task) => !status || (task.status ?? "unverified") === status), [boardTasks, status]);
   const statusOptions = [{ label: `All ${boardTasks.length}`, value: "" }, ...lanes.map(({ label, status: value }) => ({
     label: `${label} ${boardTasks.filter((task) => task.status === value).length}`, value: value ?? "unverified",
@@ -418,10 +420,11 @@ export function TaskChefApp() {
       <Box className={`taskchef-app-shell${displayMode === "inline" ? " taskchef-app-inline" : ""}`}>
         <header className="taskchef-app-header">
           <Group className="taskchef-app-brand" gap="xs" wrap="nowrap"><img alt="" aria-hidden className="taskchef-app-mark" src={brandIcon} /><Title order={1}>TaskChef</Title></Group>
-          {displayMode !== "inline" && <Group className="taskchef-app-filters" gap="xs" wrap="nowrap">
+          {displayMode !== "inline" && <Group className="taskchef-app-filters" gap="xs" wrap="wrap">
             <ProjectPicker data={projects} onChange={(value) => { setProject(value); setCompletedLimit(5); }} value={project} />
             <Select className="taskchef-app-date" 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" />
             <TextInput className="taskchef-app-search" aria-label="Search Chats" placeholder="Search Chats" type="search" leftSection={<IconSearch size={14} aria-hidden />} value={search} onChange={(event) => { setSearch(event.currentTarget.value); setCompletedLimit(5); setArchivedLimit(5); }} size="xs" />
+            <Button className="taskchef-app-pinned" aria-pressed={pinnedOnly} title="Show only pinned chats" size="xs" variant={pinnedOnly ? "filled" : "outline"} leftSection={<IconPin size={14} aria-hidden />} onClick={() => { setPinnedOnly(value => !value); setCompletedLimit(5); setArchivedLimit(5); }}>Pinned</Button>
           </Group>}
           <Group className="taskchef-app-actions" gap="xs" wrap="nowrap">
           <GitHubConnection hideTrigger openSignal={githubOpenSignal} auth={githubAuth} request={githubRequest} openLink={githubOpenLink} refresh={githubRefresh} openSettings={githubOpenSettings} />

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

@@ -27,8 +27,9 @@ body { background: var(--taskchef-page); }
 .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 { grid-area: filters; min-width: 0; width: min(100%, 560px); }
-.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 0; min-width: 0; }
+.taskchef-app-filters { grid-area: filters; min-width: 0; width: min(100%, 680px); }
+.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 100px; min-width: 100px; }
+.taskchef-app-pinned { flex: 0 0 auto; white-space: nowrap; }
 .taskchef-app-filters .taskchef-app-date { flex: 0 0 132px; }
 @media (max-width: 650px) {
   .taskchef-app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "filters filters"; gap: 8px; }
@@ -189,6 +190,9 @@ body { background: var(--taskchef-page); }
 .next-appearance-panel { background: var(--taskchef-elevated); }
 
 :root[data-taskchef-palette] .mantine-Button-root[data-variant="filled"] { color: var(--taskchef-surface); }
+:root[data-taskchef-palette] .taskchef-app-pinned { background: transparent; color: var(--taskchef-text); border-color: var(--taskchef-border); }
+:root[data-taskchef-palette] .taskchef-app-pinned:hover { background: var(--taskchef-hover); }
+:root[data-taskchef-palette] .taskchef-app-pinned[aria-pressed="true"] { background: var(--taskchef-accent); color: var(--taskchef-surface); border-color: var(--taskchef-accent); }
 :root[data-taskchef-palette] .taskchef-board-card:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
 
 :root[data-taskchef-palette] body { font-family: var(--taskchef-font); }

package/src/mcp-app.js

@@ -7,6 +7,7 @@ import { fileURLToPath } from "node:url";
 import { parse as parseToml } from "smol-toml";
 import { z } from "zod";
 import { NextGitHub } from "./next-github.js";
+import { CodexLiveState } from "./codex-live-state.js";
 import { NextNotifications } from "./next-notifications.js";
 import { CodexSessionScanner } from "./codex-session-scanner.js";
 import { isCodexThreadDeepLinkId, openThreadInCodex, openPluginSettingsInCodex } from "./codex-app.js";
@@ -55,6 +56,7 @@ export async function pluginSettingsUrl({ pluginRoot = fileURLToPath(new URL("..
 
 export function registerTaskChefApp(server, {
   createScanner = () => new CodexSessionScanner(),
+  createLiveState = () => new CodexLiveState(),
   openThread = openThreadInCodex,
   getSettingsUrl = pluginSettingsUrl,
   openSettings = openPluginSettingsInCodex,
@@ -63,15 +65,23 @@ export function registerTaskChefApp(server, {
   createGitHub = (options) => new NextGitHub(options),
 } = {}) {
   const scanner = createScanner();
+  const liveState = createLiveState();
   const notificationStore = new NextNotifications(notificationsPath);
   const github = createGitHub({ stateDir: dirname(settingsPath) });
   let boardRevision = 0;
   let boardSignature;
   let githubAuth;
+  let ipcErrorReported = false;
   const turnUsageCache = new Map();
   const usagePending = new Map();
   async function boardSnapshot(settings, force = false, scope = { date: "all", taskIds: [] }) {
-    const snapshot = await scanner.refresh({ force });
+    const databaseSnapshot = await scanner.refresh({ force });
+    await liveState.refresh(databaseSnapshot.healthy === false ? [] : databaseSnapshot.tasks);
+    if (liveState.error && !ipcErrorReported) {
+      ipcErrorReported = true;
+      await notificationStore.errorOnce(`codex-ipc:${TASKCHEF_VERSION}`, "Live approval updates unavailable", `${liveState.error}. TaskChef will continue showing saved chat data. Restart Codex or update TaskChef to restore live approval updates.`).catch(() => { /* Optional IPC reporting must not hide saved tasks. */ });
+    }
+    const snapshot = { ...databaseSnapshot, tasks: databaseSnapshot.tasks.map(task => liveState.decorate(task)) };
     const visibleIds = new Set(scope.taskIds ?? []);
     const displayTasks = snapshot.tasks.map(task => {
       if (!visibleIds.has(task.id) || task.pullRequests?.length || !scanner.earlierPullRequest) return task;
@@ -98,12 +108,13 @@ export function registerTaskChefApp(server, {
     const present = new Set(tasks.map(task => task.id));
     for (const id of turnUsageCache.keys()) if (!present.has(id)) turnUsageCache.delete(id);
     result.snapshot = { ...result.snapshot, tasks };
-    const signature = JSON.stringify([result.snapshot.revision, result.snapshot.tasks.map((task) => [task.id, task.status, task.pullRequests, task.earlierPullRequest, task.turnUsage])]);
+    const signature = JSON.stringify([result.snapshot.revision, result.snapshot.tasks.map((task) => [task.id, task.status, task.needsApproval, task.pendingApprovals, task.pullRequests, task.earlierPullRequest, task.turnUsage])]);
     if (signature !== boardSignature) { boardRevision += 1; boardSignature = signature; }
     return { ...result.snapshot, revision: boardRevision };
   }
   async function decoratedTask(task, force = false, includeHistory = false) {
     if (!task) return task;
+    task = liveState.decorate(task);
     const settings = await readSettings();
     if (!includeHistory) {
       const { snapshot } = await github.enrich({ healthy: true, tasks: [task] }, settings, { force });
@@ -158,7 +169,7 @@ export function registerTaskChefApp(server, {
     } finally { await release(); }
   });
   const originalClose = server.close.bind(server);
-  server.close = async () => { scanner.close(); await originalClose(); };
+  server.close = async () => { scanner.close(); liveState.close(); await originalClose(); };
   const appOnly = { ui: { resourceUri: TASKCHEF_APP_URI, visibility: ["app"] } };
   server.registerResource("TaskChef task board", TASKCHEF_APP_URI, {
     description: "TaskChef read-only Codex session board", mimeType: RESOURCE_MIME_TYPE,
@@ -202,6 +213,7 @@ export function registerTaskChefApp(server, {
   }, async ({ taskId, refreshGithub }) => {
     const snapshot = await scanner.refresh();
     if (!snapshot.healthy) throw new Error(snapshot.scan.error);
+    await liveState.refresh(snapshot.tasks);
     const task = await decoratedTask(await scanner.taskDetail(taskId), refreshGithub === true, true);
     if (!task) throw new Error("Task not found.");
     return { structuredContent: { task }, content: [] };

package/src/next-notifications.js

@@ -35,8 +35,8 @@ export class NextNotifications {
       return publicState(state);
     } finally { await release(); }
   }
-  add(state, { taskId = null, title, detail = "", kind, read = false }) {
-    state.items.unshift({ id: randomUUID(), taskId, title, detail, kind, read, timestamp: this.now() });
+  add(state, { id = randomUUID(), taskId = null, title, detail = "", kind, read = false }) {
+    state.items.unshift({ id, taskId, title, detail, kind, read, timestamp: this.now() });
   }
   async reconcile(getSnapshot, settings) {
     const observedAt = this.clock();
@@ -54,7 +54,7 @@ export class NextNotifications {
         const current = { turn, status: task.status ?? null, announced: [...announced] };
         // Archiving changes the board label, but must still consume the saved terminal event.
         const terminal = task.observed?.lastTurnEvent;
-        const event = (task.status === "needs_input" || terminal === "completed") && task.inputSource === "ordinary"
+        const event = ((task.status === "needs_input" && terminal !== "inProgress") || terminal === "completed") && task.inputSource === "ordinary"
           ? "ready" : task.status === "interrupted" || terminal === "interrupted" || terminal === "failed" ? "interrupted" : null;
         const eligible = !task.observed?.archive && !task.manualDone
           && (settings.showExec || task.observed?.source !== "exec")
@@ -73,6 +73,32 @@ export class NextNotifications {
     });
     return { snapshot, notifications };
   }
+  async errorOnce(key, title, detail) {
+    // Older release writers strip unknown fields from notifications.json.
+    const path = `${this.path}.errors.json`;
+    const readWatermark = async () => {
+      try { return z.array(z.string()).parse(JSON.parse(await readFile(path, "utf8"))); }
+      catch { return []; } // A damaged optional watermark must not prevent an alert.
+    };
+    let needsWatermark = false;
+    const result = await this.update(async state => {
+      if ((await readWatermark()).includes(key)) return;
+      const id = `system-error:${key}`;
+      // If the previous process stopped after saving the alert, finish its
+      // watermark without adding a duplicate notification.
+      if (!state.items.some(item => item.id === id)) this.add(state, { id, title, detail, kind: "error" });
+      needsWatermark = true;
+    });
+    // Commit the alert first. A failed write can never suppress an unseen alert.
+    if (needsWatermark) {
+      const release = await acquireFileLock(dirname(this.path));
+      try {
+        const announced = await readWatermark();
+        if (!announced.includes(key)) await writeDurableAtomic(path, JSON.stringify([...announced, key]));
+      } finally { await release(); }
+    }
+    return result;
+  }
   async confirmation(task) {
     return this.update((state) => this.add(state, { taskId: task.id, title: `${task.title} marked Done`, kind: "confirmation", read: true }));
   }

package/src/ui/components/ApprovalNotice.tsx

@@ -0,0 +1,24 @@
+import { IconArrowUpRight, IconShieldCheck } from "@tabler/icons-react";
+import type { Task } from "../types";
+
+export function ApprovalCover({ task, onOpen }: { task: Task; onOpen: () => void }) {
+  const request = task.pendingApprovals?.[0];
+  return <button type="button" className="taskchef-approval-cover" aria-label={`Open chat to approve for ${task.title}`} onClick={onOpen}>
+    <span className="taskchef-approval-heading"><IconShieldCheck size={17} aria-hidden />Needs approval</span>
+    <span className="taskchef-approval-preview">{request?.message ?? "Codex needs permission to continue."}</span>
+    <span className="taskchef-approval-link">Open chat to approve<IconArrowUpRight size={14} aria-hidden /></span>
+  </button>;
+}
+
+export function ApprovalPanel({ task, busy, onOpen }: { task: Task; busy: boolean; onOpen: () => void }) {
+  return <section className="taskchef-approval-panel" aria-label="Pending approvals">
+    <div className="taskchef-approval-heading"><IconShieldCheck size={17} aria-hidden />Permission required</div>
+    {task.pendingApprovals?.length ? task.pendingApprovals.map(request => <div className="taskchef-approval-request" key={request.id}>
+      <div className="taskchef-approval-title">{request.title}</div>
+      <p>{request.message}</p>
+      {request.origin && <div className="taskchef-approval-origin">Origin: {request.origin}</div>}
+    </div>) : <p>Codex needs permission to continue.</p>}
+    <p className="taskchef-approval-guidance">Open the chat to review this request and allow or deny it.</p>
+    <button type="button" disabled={busy} className="taskchef-approval-action" onClick={onOpen}>Open chat to approve<IconArrowUpRight size={14} aria-hidden /></button>
+  </section>;
+}

package/src/ui/components/TaskBoard.test.tsx

@@ -1,3 +1,4 @@
+import { TaskCard } from "./TaskCard";
 import { MantineProvider } from "@mantine/core";
 import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
 import { afterEach, expect, test, vi } from "vitest";
@@ -386,3 +387,24 @@ test("interrupted cards show the recorded capacity reason even without a reply",
   rerender(<MantineProvider><TaskBoard {...props} tasks={[{ ...interrupted, status: "working" }]} /></MantineProvider>);
   expect(screen.queryByLabelText("Latest turn error")).toBeNull();
 });
+
+test("approval cover replaces the image cover and opens the native chat", () => {
+ const open=vi.fn(),detail=vi.fn(),load=vi.fn();
+ const pending={...task(1,'needs_input'),needsApproval:true,replyImage:{url:'/old.png',alt:'Old cover'},pendingApprovals:[{id:'16',turnId:'turn',title:'Browser use',message:'Allow upload to Gmail filters?',origin:'https://mail.google.com'}]};
+ const props={tasks:[pending],lanes:[{status:'needs_input' as const,label:'Waiting'}],completedLimit:5,onMoreCompleted:vi.fn(),onOpenCodex:open,onOpenDetail:detail,loadImage:load};
+ const {rerender}=render(<MantineProvider><TaskBoard {...props}/></MantineProvider>);
+ fireEvent.click(screen.getByRole('button',{name:`Open chat to approve for ${pending.title}`}));
+ expect(open).toHaveBeenCalledWith(pending);
+ expect(detail).not.toHaveBeenCalled();
+ expect(load).not.toHaveBeenCalled();
+ rerender(<MantineProvider><TaskBoard {...props} tasks={[{...pending,needsApproval:false,pendingApprovals:[],replyImage:null}]}/></MantineProvider>);
+ expect(screen.queryByText('Needs approval')).not.toBeInTheDocument();
+});
+
+test("list cards show the approval cover without stale turn content", () => {
+ const pending={...task(1,'needs_input'),needsApproval:true,promptExcerpt:'Old request',replyExcerpt:'Stale reply',observed:{archive:false,lastTurnEvent:'inProgress',lastTurnEventAt:null,recentFileActivity:false}};
+ render(<MantineProvider><TaskCard task={pending} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()}/></MantineProvider>);
+ expect(screen.getByText('Needs approval')).toBeVisible();
+ expect(screen.queryByText('Stale reply')).not.toBeInTheDocument();
+ expect(screen.queryByText('Old request')).not.toBeInTheDocument();
+});

package/src/ui/components/TaskBoard.tsx

@@ -6,6 +6,7 @@ import { hasLinkedCodexThread, latestTurnPresentation } from "../state.js";
 import type { Task, TaskStatus } from "../types";
 import { LinkedText } from "./LinkedText";
 import { TurnContent } from "./TurnContent";
+import { ApprovalCover } from "./ApprovalNotice";
 import { QueuedPrompts } from "./QueuedPrompts";
 import { ReplyCover } from "./ReplyCover";
 import { ElapsedTime, RelativeTime } from "./RelativeTime";
@@ -52,7 +53,7 @@ export function TaskBoard({
 }) {
   const draggedTask = useRef<Task | null>(null);
   const [dragging, setDragging] = useState<Task | null>(null);
-  const isWaiting = (task: Task) => ["needs_input", "interrupted"].includes(task.status ?? "");
+  const isWaiting = (task: Task) => !task.needsApproval && ["needs_input", "interrupted"].includes(task.status ?? "");
   const canDrop = (task: Task, destination: TaskStatus) => destination === "archived" || (isWaiting(task) && (destination === "completed"
     ? !task.scheduled && !task.pullRequests?.some(pr => pr.state !== "merged")
     : destination === "scheduled" && !!task.scheduled && task.inputSource === "ordinary" && !!task.turnId));
@@ -228,7 +229,7 @@ function BoardCard({ showCardUsage, task, onOpenCodex, onOpenDetail, loadImage,
   const cover = task.replyImage ?? task.promptImage;
   return (
     <Paper draggable={draggable} onDragStart={draggable ? onDragStart : undefined} onDragEnd={onDragEnd} data-chat-id={task.id} className="taskchef-board-card" component="article" px="sm" pt="sm" pb={6} withBorder>
-      {task.observed && cover && <ReplyCover key={`${task.turnId}:${cover.url}`} task={task} image={cover} loadImage={loadImage} onOpen={() => onOpenDetail(task)} />}
+      {task.needsApproval ? <ApprovalCover task={task} onOpen={() => onOpenCodex(task)} /> : task.observed && cover && <ReplyCover key={`${task.turnId}:${cover.url}`} task={task} image={cover} loadImage={loadImage} onOpen={() => onOpenDetail(task)} />}
       <Title className="taskchef-board-title" order={3} size="h5">
         <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">{task.title}</button>
         {task.observed?.unread && <span className="taskchef-chat-unread-dot" role="img" aria-label="Unread chat" />}
@@ -236,7 +237,7 @@ function BoardCard({ showCardUsage, task, onOpenCodex, onOpenDetail, loadImage,
       <Text className="taskchef-board-project" size="xs"><IconFolder size={14} stroke={1.5} aria-hidden /><span>{task.project.name}</span></Text>
       {task.needsAnswer && <Tooltip label="Open chat to answer." ><Badge color="blue" size="xs" variant="light">Needs answer</Badge></Tooltip>}
       {task.status === "interrupted" && <Badge color="orange" size="xs" variant="light">Interrupted</Badge>}
-      {task.observed ? <TurnContent task={task} compact /> : <Text component="div" className="taskchef-board-excerpt taskchef-preserve-lines" size="sm"><LinkedText task={task} text={excerpt} /></Text>}
+      {task.needsApproval ? null : task.observed ? <TurnContent task={task} compact /> : <Text component="div" className="taskchef-board-excerpt taskchef-preserve-lines" size="sm"><LinkedText task={task} text={excerpt} /></Text>}
       <QueuedPrompts task={task} compact loadImage={loadImage} onOpen={() => onOpenDetail(task)} />
       <Box className="taskchef-board-card-footer">
         <CardStatusLine turnId={task.turnId} animateUsage={task.status === "working"} turnUsage={showCardUsage ? task.turnUsage : undefined} subagentCount={task.observed?.directChildCount} pullRequests={task.pullRequests} earlierPullRequest={task.earlierPullRequest} scheduled={task.scheduled} nextRunAt={task.nextRunAt} durationMs={task.observed?.latestTurnDurationMs} startedAt={task.observed && task.status === "working" ? task.observed.lastTurnEventAt : null}>

package/src/ui/components/TaskCard.tsx

@@ -1,3 +1,4 @@
+import { ApprovalCover } from "./ApprovalNotice";
 import { Box, Paper, Stack, Text, Title } from "@mantine/core";
 import { IconArrowUpRight } from "@tabler/icons-react";
 import { latestTurnPresentation } from "../state.js";
@@ -23,6 +24,7 @@ export function TaskCard({
   return (
     <Paper className="taskchef-task-row" component="article" pb={8} pt="md" px="sm" radius="md" withBorder>
       <Stack className="taskchef-task-main" gap="sm">
+          {task.needsApproval && <ApprovalCover task={task} onOpen={() => onOpenCodex(task)} />}
           <Box>
             <Box className="taskchef-card-heading">
               <Title order={3} size="h5">
@@ -38,7 +40,7 @@ export function TaskCard({
             {task.scheduled && <Text size="xs" c="violet">Active schedule</Text>}
           </Box>
 
-          {task.observed ? <TurnContent compact task={task} /> : <Box className="taskchef-summary-grid">
+          {task.needsApproval ? null : task.observed ? <TurnContent compact task={task} /> : <Box className="taskchef-summary-grid">
             <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
             <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">
               <LinkedText task={task} text={latest.requestSummary} />

package/src/ui/styles.css

@@ -342,3 +342,18 @@ body {
 
 .taskchef-queue-icon { flex: 0 0 16px; color: var(--mantine-color-dimmed); margin-top: 2px; }
 .taskchef-queue-content { flex: 1; min-width: 0; }
+
+.taskchef-approval-cover { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px; margin-bottom: 10px; border: 1px solid light-dark(#d4a64a, #886731); border-radius: 12px; background: light-dark(#fff6df, #30271a); color: light-dark(#6f4c12, #f1cf8b); text-align: left; cursor: pointer; }
+.taskchef-approval-heading { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
+.taskchef-approval-heading svg { flex: none; }
+.taskchef-approval-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
+.taskchef-approval-link { display: flex; align-items: center; gap: 6px; font-size: 12px; }
+.taskchef-approval-panel { padding: 16px; border: 1px solid light-dark(#d4a64a, #886731); border-radius: 16px; background: light-dark(#fff6df, #30271a); color: light-dark(#6f4c12, #f1cf8b); }
+.taskchef-approval-request { margin-top: 16px; }
+.taskchef-approval-title { font-size: 12px; opacity: .85; }
+.taskchef-approval-panel p { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
+.taskchef-approval-origin { font-size: 12px; overflow-wrap: anywhere; }
+.taskchef-approval-panel .taskchef-approval-guidance { margin-top: 16px; font-size: 12px; }
+.taskchef-approval-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 12px; border: 1px solid currentColor; border-radius: 16px; color: inherit; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
+.taskchef-approval-action:disabled { opacity: .5; cursor: default; }
+.taskchef-approval-cover:focus-visible, .taskchef-approval-action:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: 3px; }

package/src/ui/types.ts

@@ -122,6 +122,8 @@ export interface Task {
   replyText?: string | null;
   replyExcerpt?: string | null;
   annotations?: { text: string; annotation: string }[];
+  needsApproval?: boolean;
+  pendingApprovals?: { id: string; turnId: string; title: string; message: string; origin: string | null }[];
   needsAnswer?: boolean;
   pendingQuestions?: { id: string; title: string; options: string[] }[];
   queuedPrompts?: { id: string; text: string; images: { url: string; alt: string }[] }[];
@@ -129,7 +131,7 @@ export interface Task {
   promptImages?: { url: string; alt: string }[];
   replyImage?: { url: string; alt: string } | null;
   inputSource?: "scheduled" | "ordinary" | "unverified";
-  observed?: { unread?: boolean; source?: string | null; archive: boolean; lastTurnEvent: string | null; lastTurnEventAt: string | null; latestTurnDurationMs?: number | null; recordedChatDurationMs?: number | null; missingTurnDurations?: number; historicalTimePartial?: boolean; recentFileActivity: boolean; directChildCount?: number; userMessages?: number; assistantMessages?: number; sampledBytes?: number; fileBytes?: number };
+  observed?: { pinned?: boolean; unread?: boolean; source?: string | null; archive: boolean; lastTurnEvent: string | null; lastTurnEventAt: string | null; latestTurnDurationMs?: number | null; recordedChatDurationMs?: number | null; missingTurnDurations?: number; historicalTimePartial?: boolean; recentFileActivity: boolean; directChildCount?: number; userMessages?: number; assistantMessages?: number; sampledBytes?: number; fileBytes?: number };
   pullRequests?: PullRequestStatus[];
   detailPullRequests?: PullRequestStatus[];
   earlierPullRequest?: PullRequestStatus;