taskchef 8.6.2 → 8.7.1

package/src/dashboard/react/components/AnimatedUsage.test.tsx

@@ -0,0 +1,78 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import type { SavedUsage } from "../types";
+import { useAnimatedUsage } from "./SavedUsageFormat";
+
+const motion = vi.hoisted(() => ({ reduced: false }));
+vi.mock("@mantine/hooks", () => ({ useReducedMotion: () => motion.reduced }));
+const usage = (tokens: number, cost: number): SavedUsage => ({
+  tokens: { input_tokens: tokens, cached_input_tokens: 0, cache_write_input_tokens: 0, output_tokens: 0, reasoning_output_tokens: 0, total_tokens: tokens },
+  samples: 1, costUsd: cost, partial: false, costPartial: false,
+});
+function Counter({ value, running = true, identity = "turn-1" }: { value?: SavedUsage; running?: boolean; identity?: string }) {
+  const displayed = useAnimatedUsage(value, running, identity);
+  return <output data-testid="counter">{displayed ? `${displayed.tokens.total_tokens}:${displayed.costUsd}` : "missing"}</output>;
+}
+let clock = 0, nextFrame = 0;
+const frames = new Map<number, FrameRequestCallback>();
+function advance(now: number) {
+  act(() => {
+    clock = now;
+    const pending = [...frames.values()];
+    frames.clear();
+    pending.forEach(callback => callback(now));
+  });
+}
+function displayed() { return screen.getByTestId("counter").textContent; }
+beforeEach(() => {
+  clock = 0; nextFrame = 0; motion.reduced = false; frames.clear();
+  vi.spyOn(performance, "now").mockImplementation(() => clock);
+  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => { frames.set(++nextFrame, callback); return nextFrame; });
+  vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
+});
+afterEach(() => { cleanup(); vi.restoreAllMocks(); vi.unstubAllGlobals(); });
+
+test("running usage catches up and continues from the displayed amount when another update arrives", () => {
+  const view = render(<Counter value={usage(1000, 2)} />);
+  expect(displayed()).toBe("0:0");
+  advance(400);
+  expect(displayed()).toBe("875:1.75");
+  view.rerender(<Counter value={usage(2000, 4)} />);
+  expect(displayed()).toBe("875:1.75");
+  advance(800);
+  expect(displayed()).toBe("1859:3.71875");
+  advance(1200);
+  expect(displayed()).toBe("2000:4");
+  expect(frames.size).toBe(0);
+});
+
+test("late usage animates from zero and a new turn does not inherit the old counter", () => {
+  const view = render(<Counter />);
+  expect(displayed()).toBe("missing");
+  view.rerender(<Counter value={usage(1000, 2)} />);
+  advance(800);
+  expect(displayed()).toBe("1000:2");
+  view.rerender(<Counter value={usage(300, 0.5)} identity="turn-2" />);
+  expect(displayed()).toBe("0:0");
+  advance(1600);
+  expect(displayed()).toBe("300:0.5");
+});
+
+test("completed chats and reduced motion show the exact total and cancel pending animation", () => {
+  const view = render(<Counter value={usage(1000, 2)} />);
+  advance(200);
+  view.rerender(<Counter value={usage(1000, 2)} running={false} />);
+  expect(displayed()).toBe("1000:2");
+  expect(frames.size).toBe(0);
+  motion.reduced = true;
+  view.rerender(<Counter value={usage(2000, 4)} />);
+  expect(displayed()).toBe("2000:4");
+  expect(frames.size).toBe(0);
+});
+
+test("unmount cancels the counter's pending frame", () => {
+  const view = render(<Counter value={usage(1000, 2)} />);
+  expect(frames.size).toBe(1);
+  view.unmount();
+  expect(frames.size).toBe(0);
+});

package/src/dashboard/react/components/CardStatusIcons.test.tsx

@@ -0,0 +1,146 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { nextRunLabel, prPresentation, PullRequestIcons, PullRequestInfo, CardStatusLine } from "./CardStatusIcons";
+import type { PullRequestStatus } from "../types";
+// Test TaskChef's rows and keyboard handlers without jsdom layout work.
+// Browser QA separately exercises Mantine's real popup and positioning.
+vi.mock("@mantine/core", async () => {
+  const actual = await vi.importActual<typeof import("@mantine/core")>("@mantine/core");
+  const React = await import("react");
+  const Open = React.createContext(false);
+  const Popover = Object.assign(
+    ({opened, children}: {opened: boolean; children: React.ReactNode}) => <Open value={opened}>{children}</Open>,
+    {
+      Target: ({children}: {children: React.ReactNode}) => children,
+      Dropdown: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) =>
+        React.useContext(Open) ? <div {...props} ref={ref} /> : null),
+    },
+  );
+  return {...actual, Popover};
+});
+
+afterEach(cleanup);
+const url="https://github.com/example/repo/pull/12";
+const pr:PullRequestStatus={url,state:"open",checks:"passed",title:"Improve search"};
+test("cards keep PR status in an accessible icon without extra text",()=>{
+  render(<MantineProvider><PullRequestIcons pullRequests={[pr,{...pr,url:"https://github.com/example/repo/pull/13",state:"unknown"}]}/></MantineProvider>);
+  expect(screen.getByLabelText("#12 Improve search: Checks passed")).toBeInTheDocument();
+  expect(screen.getByLabelText("#13 Improve search: PR status not checked or unavailable")).toBeInTheDocument();
+  expect(screen.queryByText(/unavailable/)).not.toBeInTheDocument();
+});
+test("PR presentation follows Codex priority for drafts, conflicts, CI and merge readiness",()=>{
+  expect(prPresentation({...pr,state:"draft",checks:"failed"}).dot).toBeNull();
+  expect(prPresentation({...pr,hasMergeConflicts:true}).label).toBe("Merge conflicts");
+  expect(prPresentation({...pr,canMerge:true}).label).toBe("Ready to merge");
+  expect(prPresentation({...pr,checks:"pending"}).label).toBe("Checks pending");
+  expect(prPresentation({...pr,state:"merged",checks:"failed"}).label).toBe("Merged");
+});
+test("next run uses Today and Tomorrow and never invents missing times",()=>{
+  const now=new Date(2026,9,10,10);
+  expect(nextRunLabel(new Date(2026,9,10,15).toISOString(),now)).toMatch(/^Next run: Today at /);
+  expect(nextRunLabel(new Date(2026,9,11,9).toISOString(),now)).toMatch(/^Next run: Tomorrow at /);
+  expect(nextRunLabel(null,now)).toBe("Next run time unavailable");
+});
+
+
+test("popup content keeps CI for merged and unknown PRs and links only supported URLs",()=>{
+  const {rerender}=render(<MantineProvider><PullRequestInfo pr={{...pr,state:"merged"}}/></MantineProvider>);
+  expect(screen.getByText("CI passed")).toBeInTheDocument();
+  expect(screen.getByRole("link",{name:"#12 Improve search"})).toHaveAttribute("href",url);
+  rerender(<MantineProvider><PullRequestInfo pr={{...pr,state:"unknown",checks:"unknown",url:"javascript:alert(1)"}}/></MantineProvider>);
+  expect(screen.queryByText(/CI status unknown/)).not.toBeInTheDocument();
+  expect(screen.queryByRole("link")).not.toBeInTheDocument();
+});
+
+
+test("one status popup shows available lines, survives movement onto links, and closes with Escape", async () => {
+  render(<MantineProvider env="test"><CardStatusLine durationMs={905 * 60000} pullRequests={[{...pr, canMerge: true, checkedAt: new Date().toISOString()}]} scheduled nextRunAt={new Date(Date.now()+3600000).toISOString()}><span>Oct 7th</span></CardStatusLine></MantineProvider>);
+  const line = screen.getByLabelText("Turn status details");
+  fireEvent.mouseEnter(line);
+  expect(screen.getByText("Worked for 15h 5m")).toBeInTheDocument();
+  const link = screen.getByRole("link", {name:"#12 Improve search",hidden:true});
+  expect(link).toHaveAttribute("href",url);
+  expect(screen.queryByText("CI passed")).not.toBeInTheDocument();
+  expect(screen.getByText(/^Next run:/)).toBeInTheDocument();
+  expect(screen.queryByText(/Checked |Ready to merge/)).not.toBeInTheDocument();
+  fireEvent.focus(line);
+  fireEvent.keyDown(line,{key:"Tab"});
+  expect(link).toHaveFocus();
+  fireEvent.keyDown(link,{key:"Escape"});
+  expect(line).toHaveFocus();
+});
+
+test("popup omits missing duration, CI and schedule time instead of unavailable lines", async () => {
+  render(<MantineProvider env="test"><CardStatusLine durationMs={null} scheduled nextRunAt={null} pullRequests={[{...pr,checks:"unknown"}]}><span>Oct 7th</span></CardStatusLine></MantineProvider>);
+  fireEvent.mouseEnter(screen.getByLabelText("Turn status details"));
+  expect(screen.getByRole("link",{name:"#12 Improve search",hidden:true})).toBeInTheDocument();
+  expect(screen.queryByText(/Worked for|Next run:|CI status|unavailable/)).not.toBeInTheDocument();
+});
+
+
+test("status line describes PR state to keyboard and screen-reader users", () => {
+  render(<MantineProvider><CardStatusLine pullRequests={[{...pr,state:"merged"},{...pr,url:"https://github.com/example/repo/pull/13",state:"draft"}]}><span>Oct 7th</span></CardStatusLine></MantineProvider>);
+  expect(screen.getByLabelText("Turn status details")).toHaveAccessibleDescription("#12 Improve search: Merged. #13 Improve search: Draft");
+});
+
+
+test("Tab preserves the time control before handing focus to the PR link", () => {
+  render(<MantineProvider env="test"><CardStatusLine pullRequests={[pr]}><button>Oct 7th</button></CardStatusLine></MantineProvider>);
+  const line = screen.getByLabelText("Turn status details");
+  fireEvent.focus(line);
+  expect(fireEvent.keyDown(line, {key:"Tab"})).toBe(true);
+  const time = screen.getByRole("button", {name:"Oct 7th"});
+  time.focus();
+  fireEvent.keyDown(time, {key:"Tab"});
+  expect(screen.getByRole("link", {name:"#12 Improve search",hidden:true})).toHaveFocus();
+});
+
+test("shows subagents and repository access action with number first", () => {
+  render(<MantineProvider><CardStatusLine subagentCount={155} pullRequests={[{...pr,state:"unknown",checks:"unknown",accessIssue:"denied"}]}><span>Oct 7th</span></CardStatusLine></MantineProvider>);
+  fireEvent.mouseEnter(screen.getByLabelText("Turn status details"));
+  expect(screen.queryByText("155 subagents")).toBeNull();
+  expect(screen.getByText(/Access denied to example\/repo/)).toBeInTheDocument();
+  expect(screen.getByRole("link",{name:"Grant access"})).toHaveAttribute("href","https://github.com/apps/taskchef/installations/new");
+  expect(screen.getByRole("link",{name:"#12 Improve search"})).toHaveClass("taskchef-status-pr-title");
+});
+
+ test("card and popup use latest turn usage and omit incomplete markers", () => {
+  const turnUsage = {tokens:{input_tokens:1000,cached_input_tokens:200,cache_write_input_tokens:0,output_tokens:100,reasoning_output_tokens:40,total_tokens:1100},costUsd:2.34,samples:1,partial:true,costPartial:true};
+  render(<MantineProvider env="test"><CardStatusLine turnUsage={turnUsage}><span>1h</span></CardStatusLine></MantineProvider>);
+  expect(screen.getByText("1.10K • $2.34")).toBeVisible();
+  fireEvent.focus(screen.getByLabelText("Turn status details"));
+  expect(screen.getByText("Turn usage: 1.10K • $2.34")).toBeVisible();
+});
+
+test("missing turn records show plain placeholders without an explanation", () => {
+ const turnUsage={tokens:{input_tokens:0,cached_input_tokens:0,cache_write_input_tokens:0,output_tokens:0,reasoning_output_tokens:0,total_tokens:0},costUsd:0,samples:0,partial:true,costPartial:true};
+ render(<MantineProvider env="test"><CardStatusLine turnUsage={turnUsage}><span>1h</span></CardStatusLine></MantineProvider>);
+ expect(screen.getByText("— • —")).toBeVisible();
+ fireEvent.focus(screen.getByLabelText("Turn status details"));
+ expect(screen.getByText("Turn usage: — • —")).toBeVisible();
+ expect(screen.queryByText(/Some usage records/)).toBeNull();
+});
+
+test("earlier-turn PR is labeled in the popup and latest-turn PRs take priority", () => {
+  const earlier={...pr,state:"merged" as const};
+  const view=render(<MantineProvider><CardStatusLine earlierPullRequest={earlier}><span>1h</span></CardStatusLine></MantineProvider>);
+  expect(screen.getByLabelText("#12 Improve search: Merged")).toBeInTheDocument();
+  fireEvent.mouseEnter(screen.getByLabelText("Turn status details"));
+  expect(screen.getByText("(Earlier turn PR)")).toBeInTheDocument();
+  expect(screen.getByRole("link",{name:"#12 Improve search",hidden:true})).toHaveAttribute("href",url);
+  view.rerender(<MantineProvider><CardStatusLine earlierPullRequest={earlier} pullRequests={[{...pr,url:"https://github.com/example/repo/pull/13",title:"Current change"}]}><span>1h</span></CardStatusLine></MantineProvider>);
+  expect(screen.queryByText("(Earlier turn PR)")).toBeNull();
+  expect(screen.queryByRole("link",{name:"#12 Improve search",hidden:true})).toBeNull();
+  expect(screen.getByRole("link",{name:"#13 Current change",hidden:true})).toBeInTheDocument();
+});
+
+test("earlier PR note stays directly below the link before an access warning", () => {
+  render(<MantineProvider><CardStatusLine earlierPullRequest={{...pr,accessIssue:'denied'}}><span>1h</span></CardStatusLine></MantineProvider>);
+  fireEvent.mouseEnter(screen.getByLabelText('Turn status details'));
+  const link=screen.getByRole('link',{name:'#12 Improve search',hidden:true});
+  const note=screen.getByText('(Earlier turn PR)');
+  const warning=screen.getByText(/Access denied to/);
+  expect(link.compareDocumentPosition(note) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(note.compareDocumentPosition(warning) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+});

package/src/dashboard/react/components/CardStatusIcons.tsx

@@ -0,0 +1,138 @@
+import { PrOpenIcon, PrStatusIcon, PrDraftIcon, PrMergedIcon, PrClosedIcon } from "./PrGlyph";
+import { Anchor, Box, Popover, Stack, Text, VisuallyHidden } from "@mantine/core";
+import { IconAlertTriangle, IconHourglass,  IconCircleCheck, IconCircleX, IconLoader, IconMinus, IconClock, IconChartBar } from "@tabler/icons-react";
+import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { formatWorkedDuration } from "../../time.js";
+import { turnUsageLabel, useAnimatedUsage } from "./SavedUsageFormat";
+import type { SavedUsage, PullRequestStatus } from "../types";
+
+export function nextRunLabel(value?: string | null, now = new Date()) {
+  if (!value || !Number.isFinite(new Date(value).getTime())) return "Next run time unavailable";
+  const date = new Date(value);
+  const tomorrow = new Date(now); tomorrow.setDate(tomorrow.getDate() + 1);
+  const day = date.toDateString() === now.toDateString() ? "Today" : date.toDateString() === tomorrow.toDateString() ? "Tomorrow"
+    : date.toLocaleDateString(undefined, { month: "short", day: "numeric", ...(date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}) });
+  return `Next run: ${day} at ${date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`;
+}
+
+export function prPresentation(pr: PullRequestStatus) {
+  if (pr.state === "merged") return { Icon: PrMergedIcon, color: "#b28bdf", dot: null, label: "Merged" };
+  if (pr.state === "closed") return { Icon: PrClosedIcon, color: "#f0787e", dot: null, label: "Closed, not merged" };
+  if (pr.state === "draft") return { Icon: PrDraftIcon, color: "var(--taskchef-muted)", dot: null, label: "Draft" };
+  if (pr.accessIssue && pr.state === "unknown") return { Icon: IconAlertTriangle, color: "#eac54f", dot: null, label: "Repository access needed" };
+  if (pr.state === "unknown") return { Icon: PrOpenIcon, color: "var(--taskchef-muted)", dot: null, label: "PR status not checked or unavailable" };
+  if (pr.hasMergeConflicts || pr.checks === "failed") return { Icon: PrStatusIcon, color: "var(--taskchef-muted)", dot: "#e56b6f", label: pr.hasMergeConflicts ? "Merge conflicts" : "Checks failed" };
+  if (pr.canMerge || pr.checks === "passed") return { Icon: PrStatusIcon, color: "var(--taskchef-muted)", dot: "#39c681", label: pr.canMerge ? "Ready to merge" : "Checks passed" };
+  return { Icon: PrStatusIcon, color: "var(--taskchef-muted)", dot: "#eac54f", label: pr.checks === "none" ? "No checks" : pr.checks === "pending" ? "Checks pending" : "Open PR" };
+}
+
+export function PullRequestIcons({ pullRequests = [] }: { pullRequests?: PullRequestStatus[] }) {
+  return <Box className="taskchef-card-pr-icons">{pullRequests.map(pr => {
+    const { Icon, color, dot, label } = prPresentation(pr);
+    return <span key={pr.url} className="taskchef-card-status-icon" aria-label={`${prTitle(pr)}: ${label}`} style={{ color, "--taskchef-pr-dot-color": dot ?? "currentColor" } as CSSProperties}>
+      <Icon size={15} stroke={1.5} aria-hidden />
+      {pr.accessIssue && pr.state !== "unknown" && <IconAlertTriangle className="taskchef-pr-access-warning" size={10} aria-hidden />}
+    </span>;
+  })}</Box>;
+}
+
+export function CardStatusLine({ children, pullRequests = [], earlierPullRequest, scheduled, nextRunAt, durationMs, startedAt, subagentCount, turnUsage, turnId, animateUsage }: {
+  subagentCount?: number;
+  turnUsage?: SavedUsage;
+  turnId?: string | null;
+  animateUsage?: boolean;
+  children: ReactNode;
+  pullRequests?: PullRequestStatus[];
+  earlierPullRequest?: PullRequestStatus;
+  scheduled?: boolean;
+  nextRunAt?: string | null;
+  durationMs?: number | null;
+  startedAt?: string | null;
+}) {
+  const showEarlierPr = !pullRequests.length && !!earlierPullRequest;
+  const displayedPrs = showEarlierPr ? [earlierPullRequest!] : pullRequests;
+  const descriptionId = useId();
+  const [opened, setOpened] = useState(false);
+  const [now, setNow] = useState(Date.now);
+  const start = startedAt ? Date.parse(startedAt) : NaN;
+  const running = Number.isFinite(start);
+  const animatedUsage = useAnimatedUsage(turnUsage, animateUsage ?? running, turnId ?? startedAt);
+  useEffect(() => {
+    if (!running) return;
+    setNow(Date.now());
+    const tick = window.setInterval(() => setNow(Date.now()), 60000);
+    return () => window.clearInterval(tick);
+  }, [running, startedAt]);
+  const duration = formatWorkedDuration(running ? Math.max(0, now - start) : durationMs);
+  const hasNextRun = scheduled && !!nextRunAt && Number.isFinite(Date.parse(nextRunAt));
+  const hasUsage = !!turnUsage && (!!turnUsage.samples || turnUsage.partial || turnUsage.costPartial);
+  const hasInfo = hasUsage || duration !== "—" || displayedPrs.length > 0 || hasNextRun;
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const target = useRef<HTMLDivElement>(null);
+  const popup = useRef<HTMLDivElement>(null);
+  function show() { if (timer.current) clearTimeout(timer.current); if (hasInfo) { setNow(Date.now()); setOpened(true); } }
+  function leave() {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      if (!target.current?.contains(document.activeElement) && !popup.current?.contains(document.activeElement)) setOpened(false);
+    }, 180);
+  }
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  useEffect(() => { if (!hasInfo) setOpened(false); }, [hasInfo]);
+  return <Popover opened={opened && hasInfo} onChange={setOpened} position="top" withArrow withinPortal width={300} zIndex={400}>
+    <Popover.Target>
+      <Box ref={target} className="taskchef-card-stats" tabIndex={hasInfo ? 0 : undefined} aria-label="Turn status details" aria-describedby={displayedPrs.length ? descriptionId : undefined}
+        onMouseEnter={show} onMouseLeave={leave} onFocus={show} onBlur={leave} onClick={show}
+        onKeyDown={event => {
+          if (event.key === "Escape") { setOpened(false); event.stopPropagation(); }
+          if (event.key === "Tab" && !event.shiftKey && opened && popup.current?.querySelector("a")
+            && (event.target !== target.current || !target.current?.querySelector('button:not(:disabled), [tabindex="0"]'))) {
+            event.preventDefault(); popup.current.querySelector("a")?.focus();
+          }
+        }}>
+        {children}
+        {hasUsage && <span className="taskchef-card-turn-usage">{turnUsageLabel(animatedUsage!)}</span>}
+        {scheduled && <span className="taskchef-card-status-icon" aria-label="Active schedule"><IconClock className="taskchef-schedule-clock" size={15} stroke={1.5} aria-hidden /></span>}
+        <PullRequestIcons pullRequests={displayedPrs} />
+        {displayedPrs.length > 0 && <VisuallyHidden id={descriptionId}>{showEarlierPr ? "Earlier turn PR. " : ""}{displayedPrs.map(pr => `${prTitle(pr)}: ${pr.state === "merged" ? "Merged" : pr.state === "closed" ? "Closed, not merged" : pr.state === "draft" ? "Draft" : pr.state === "unknown" ? "PR status not checked or unavailable" : pr.hasMergeConflicts ? "Open, merge conflicts" : "Open"}`).join(". ")}</VisuallyHidden>}
+      </Box>
+    </Popover.Target>
+    <Popover.Dropdown className="taskchef-status-tooltip" p={9} ref={popup} onMouseEnter={show} onMouseLeave={leave} onFocus={show} onBlur={leave}
+      onKeyDown={event => { if (event.key === "Escape") { setOpened(false); target.current?.focus(); setOpened(false); event.stopPropagation(); } }}>
+      <Stack gap={5}>
+        {duration !== "—" && <StatusRow icon={<IconHourglass size={15} stroke={1.5} />}>Worked for {duration}</StatusRow>}
+        {hasUsage && <StatusRow icon={<IconChartBar size={15} stroke={1.5} />}>Turn usage: {turnUsageLabel(animatedUsage!)}</StatusRow>}
+        {displayedPrs.map(pr => <PullRequestInfo key={pr.url} pr={pr} showChecks={false} earlierTurn={showEarlierPr} />)}
+        {hasNextRun && <StatusRow icon={<IconClock className="taskchef-schedule-clock" size={15} stroke={1.5} />}>{nextRunLabel(nextRunAt)}</StatusRow>}
+      </Stack>
+    </Popover.Dropdown>
+  </Popover>;
+}
+
+function prTitle(pr: PullRequestStatus) {
+  const number = pr.url.match(/\/pull\/(\d+)/)?.[1];
+  const title = pr.title || pr.url.match(/github\.com\/(.+)\/pull\/\d+/)?.[1] || "Pull request";
+  return `${number ? `#${number} ` : ""}${title}`;
+}
+
+function StatusRow({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return <Box className="taskchef-status-row"><span className="taskchef-status-row-icon" aria-hidden>{icon}</span><Box className="taskchef-status-row-content">{children}</Box></Box>;
+}
+
+export function PullRequestInfo({ pr, showAccess = true, showChecks = true, earlierTurn = false }: { pr: PullRequestStatus; showAccess?: boolean; showChecks?: boolean; earlierTurn?: boolean }) {
+  const title = prTitle(pr);
+  const safeLink = /^https:\/\/github\.com\/[A-Za-z0-9-]+\/[A-Za-z0-9_.-]+\/pull\/[1-9]\d*\/?$/.test(pr.url);
+  const { Icon, color, dot } = prPresentation(pr);
+  const CiIcon = pr.checks === "passed" ? IconCircleCheck : pr.checks === "failed" ? IconCircleX : pr.checks === "pending" ? IconLoader : IconMinus;
+  const repo = safeLink ? pr.url.match(/github\.com\/(.+)\/pull\//)?.[1] : null;
+  return <Stack gap={5}>
+    <StatusRow icon={<span className="taskchef-popup-pr-icon" style={{ color, "--taskchef-pr-dot-color": dot ?? "currentColor" } as CSSProperties}><Icon size={15} stroke={1.5} /></span>}>
+      {safeLink ? <Anchor className="taskchef-status-pr-title" href={pr.url} target="_blank" rel="noopener noreferrer" title={title}>{title}</Anchor> : <Text className="taskchef-status-pr-title">{title}</Text>}
+    </StatusRow>
+    {earlierTurn && <StatusRow icon={null}><Text size="xs" c="dimmed">(Earlier turn PR)</Text></StatusRow>}
+    {showChecks && pr.checks !== "unknown" && <StatusRow icon={<CiIcon size={15} stroke={1.5} />}>{pr.checks === "passed" ? "CI passed" : pr.checks === "failed" ? "CI failed" : pr.checks === "pending" ? "CI pending" : "No CI checks"}</StatusRow>}
+    {showAccess && pr.accessIssue && safeLink && <Box className="taskchef-pr-access-alert">
+      <StatusRow icon={null}><Text size="xs">{pr.accessIssue === "denied" ? `Access denied to ${repo}.` : `PR #${pr.url.match(/\/pull\/(\d+)/)?.[1]} is unavailable. It may be private or removed.`} <Anchor size="xs" href="https://github.com/apps/taskchef/installations/new" target="_blank" rel="noopener noreferrer">{pr.accessIssue === "denied" ? "Grant access" : "Check access"}</Anchor></Text></StatusRow>
+    </Box>}
+  </Stack>;
+}

package/src/dashboard/react/components/ImageGallery.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import type { Task } from "../types";
+import { ReplyImagePreview } from "./ReplyImagePreview";
+
+type Image = { url: string; alt: string };
+export function ImageGallery({ task, images, loadImage, onLightboxChange }: { task: Task; images: Image[]; loadImage: (task: Task, url?: string) => Promise<string | null>; onLightboxChange?: (opened: boolean) => void }) {
+  const signature = JSON.stringify([task.id, task.turnId, images.map(image => image.url)]);
+  const [loaded, setLoaded] = useState<{ signature: string; sources: (string | null)[] } | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    void Promise.all(images.map(image => loadImage(task, image.url).catch(() => null))).then(sources => {
+      if (!cancelled) setLoaded({ signature, sources });
+    });
+    return () => { cancelled = true; };
+  }, [signature, loadImage]);
+  const sources = loaded?.signature === signature ? loaded.sources : null;
+  return <div className="taskchef-prompt-images" aria-busy={!sources}>
+    {images.map((image, index) => sources
+      ? sources[index] && <ReplyImagePreview key={`${signature}:${index}`} task={task} url={image.url} alt={image.alt} loadImage={loadImage} source={sources[index]} onLightboxChange={onLightboxChange} />
+      : <span key={image.url + index} className="taskchef-image-placeholder" role="status" aria-label={`Loading ${image.alt}`} />)}
+  </div>;
+}

package/src/dashboard/react/components/ModelSettings.test.tsx

@@ -19,18 +19,18 @@ vi.mock('@mantine/core', async () => {
 
 afterEach(() => { cleanup(); vi.unstubAllGlobals(); vi.clearAllMocks(); });
 
-test('shows the ccusage version pinned by TaskChef without an availability status', async () => {
+test('shows the built-in TaskChef usage engine without an availability status', async () => {
   vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
     ok: true,
     json: async () => ({
       profiles: [],
-      usageProvider: { provider: 'ccusage', version: '20.0.21' },
+      usageProvider: { provider: 'TaskChef', version: '8.6.2' },
     }),
   }));
   render(<MantineProvider><ModelSettings /></MantineProvider>);
-  expect(await screen.findByText('ccusage 20.0.21')).toBeInTheDocument();
+  expect(await screen.findByText('TaskChef 8.6.2')).toBeInTheDocument();
   expect(screen.getByText('Usage provider')).toBeInTheDocument();
-  expect(screen.getByText(/Version pinned by TaskChef/)).toBeInTheDocument();
+  expect(screen.getByText(/TaskChef’s accounting engine/)).toBeInTheDocument();
   expect(screen.queryByText('available')).not.toBeInTheDocument();
 });
 

package/src/dashboard/react/components/ModelSettings.tsx

@@ -99,7 +99,7 @@ export function ModelSettings() {
       <Stack gap="xs">
         <Title order={3} size="h5">Usage provider</Title>
         <Text size="sm">{usageProvider.provider}{usageProvider.version ? ` ${usageProvider.version}` : ' version unavailable'}</Text>
-        <Text c="dimmed" size="sm">Version pinned by TaskChef for token and cost estimates.</Text>
+        <Text c="dimmed" size="sm">Reads saved Codex usage with TaskChef’s accounting engine.</Text>
       </Stack>
     </Paper>}
   </Stack>;

package/src/dashboard/react/components/OpenChatButton.test.tsx

@@ -21,3 +21,22 @@ test("uses the shared open-chat presentation and accessible task label", () => {
   fireEvent.click(button);
   expect(onClick).toHaveBeenCalledOnce();
 });
+
+test("opening a chat keeps its label and icon still while preventing another click", () => {
+  const click = vi.fn();
+  const view = render(<MantineProvider><OpenChatButton loading onClick={click} taskTitle="Example" /></MantineProvider>);
+  const button = screen.getByRole("button", {name:"Open chat for Example"});
+  expect(button).toBeDisabled();
+  expect(button).toHaveAttribute("aria-busy", "true");
+  expect(button).not.toHaveAttribute("data-loading");
+  expect(button.querySelector(".mantine-Button-loader")).toBeNull();
+  expect(button).toHaveTextContent("Open chat");
+  expect(button.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+  fireEvent.click(button);
+  expect(click).not.toHaveBeenCalled();
+  view.rerender(<MantineProvider><OpenChatButton onClick={click} taskTitle="Example" /></MantineProvider>);
+  expect(button).toBeEnabled();
+  expect(button).not.toHaveAttribute("aria-busy");
+  fireEvent.click(button);
+  expect(click).toHaveBeenCalledOnce();
+});

package/src/dashboard/react/components/OpenChatButton.tsx

@@ -15,7 +15,8 @@ export function OpenChatButton({
       aria-label={`Open chat for ${taskTitle}`}
       className="taskchef-open-chat"
       leftSection={<IconArrowUpRight aria-hidden size={15} stroke={1.6} />}
-      loading={loading}
+      disabled={loading}
+      aria-busy={loading || undefined}
       onClick={onClick}
       size="compact-sm"
       variant="default"

package/src/dashboard/react/components/PrGlyph.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+type Props = Omit<SVGProps<SVGSVGElement>, "stroke"> & { size?: number; stroke?: number };
+type Shape = "open" | "status" | "draft" | "merged" | "closed";
+
+// Drawn on a 20px grid to match Codex's branch layout and node sizes.
+// The status dot replaces the right node; it is not an external badge.
+function PrGlyph({ shape, size = 15, stroke: _stroke, ...props }: Props & { shape: Shape }) {
+  return <svg width={size} height={size} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth={1.33} strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <circle cx={5.42} cy={5} r={1.875} />
+    <path d="M5.42 6.875V13.125" />
+    <circle cx={5.42} cy={15} r={1.875} />
+    {shape === "merged" ? <>
+      <path d="M6.2 6.6C7.1 10.2 9.3 11.9 12.71 12.5" />
+      <circle cx={14.58} cy={12.5} r={1.875} />
+    </> : shape === "draft" ? <>
+      <circle cx={14.58} cy={5} r={1} fill="currentColor" stroke="none" />
+      <circle cx={14.58} cy={9.25} r={1} fill="currentColor" stroke="none" />
+      <circle cx={14.58} cy={15} r={1.875} />
+    </> : shape === "closed" ? <>
+      <path d="M12.92 3.33L16.25 6.67M16.25 3.33L12.92 6.67M14.58 9.58V13.125" />
+      <circle cx={14.58} cy={15} r={1.875} />
+    </> : <>
+      <path d="M11.67 3.33L10 5L11.67 6.67M10 5H13.33Q15 5 15 6.67V9.17" />
+      {shape === "status" ? <circle cx={15.14} cy={15.14} r={3.14} fill="var(--taskchef-pr-dot-color, currentColor)" stroke="none" />
+        : <path d="M15 12.5V16.67M12.92 14.58H17.08" />}
+    </>}
+  </svg>;
+}
+
+export function PrOpenIcon(props: Props) { return <PrGlyph {...props} shape="open" />; }
+export function PrStatusIcon(props: Props) { return <PrGlyph {...props} shape="status" />; }
+export function PrDraftIcon(props: Props) { return <PrGlyph {...props} shape="draft" />; }
+export function PrMergedIcon(props: Props) { return <PrGlyph {...props} shape="merged" />; }
+export function PrClosedIcon(props: Props) { return <PrGlyph {...props} shape="closed" />; }

package/src/dashboard/react/components/PullRequestBadges.tsx

@@ -0,0 +1,18 @@
+import { Badge, Group } from "@mantine/core";
+import { IconGitMerge, IconGitPullRequest, IconGitPullRequestDraft } from "@tabler/icons-react";
+import type { PullRequestStatus } from "../types";
+
+export function PullRequestBadges({ pullRequests = [] }: { pullRequests?: PullRequestStatus[] }) {
+  if (!pullRequests.length) return null;
+  return <Group gap={4} wrap="wrap" aria-label="Attached pull requests">
+    {pullRequests.map((pr) => {
+      const merged = pr.state === "merged";
+      const draft = pr.state === "draft";
+      const label = merged ? "Merged" : draft ? "Draft" : pr.state === "closed" ? "Closed, not merged" : pr.state === "unknown" ? "Status unavailable" : pr.checks === "passed" ? "Checks passed" : pr.checks === "none" ? "No checks" : pr.checks === "pending" ? "Checks pending" : pr.checks === "failed" ? "Checks failed" : "Checks unavailable";
+      const Icon = merged ? IconGitMerge : draft ? IconGitPullRequestDraft : IconGitPullRequest;
+      const color = merged ? "violet" : draft || pr.state === "unknown" ? "gray" : pr.state === "closed" || pr.checks === "failed" ? "red" : pr.checks === "passed" ? "green" : "yellow";
+      const safeLink = /^https:\/\/github\.com\/[A-Za-z0-9-]+\/[A-Za-z0-9_.-]+\/pull\/[1-9]\d*\/?$/.test(pr.url);
+      return <Badge key={pr.url} component="a" href={safeLink ? pr.url : undefined} target="_blank" rel="noopener noreferrer" variant="light" color={color} size="xs" leftSection={<Icon size={12} aria-hidden />} title={`${pr.url}\n${label}${pr.error ? `: ${pr.error}` : ""}${pr.checkedAt ? `\nChecked ${new Date(pr.checkedAt).toLocaleString()}` : ""}`} style={{ cursor: "pointer", textTransform: "none", maxWidth: "100%" }}>#{pr.url.match(/\/pull\/(\d+)/)?.[1] ?? "PR"} · {label}</Badge>;
+    })}
+  </Group>;
+}

package/src/dashboard/react/components/QueuedPrompts.test.tsx

@@ -0,0 +1,42 @@
+import { MantineProvider } from '@mantine/core';
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+import { QueuedPrompts } from './QueuedPrompts';
+import { fixtureTask } from '../fixtures';
+afterEach(()=>{cleanup();vi.restoreAllMocks();});
+const prompts=[{id:'first',text:'First follow-up',images:[]},{id:'second',text:'Second follow-up\n'+ 'More details. '.repeat(30),images:[]}];
+test('queue preserves execution order and removes started prompts on refresh',()=>{
+ const task={...fixtureTask(),queuedPrompts:prompts};
+ const {rerender}=render(<MantineProvider><QueuedPrompts task={task} compact /></MantineProvider>);
+ expect(screen.getByText('2 queued')).toBeVisible();
+ expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('First follow-up');
+ for (const item of screen.getAllByRole('listitem')) expect(item.firstElementChild).toHaveClass('taskchef-queue-icon');
+ rerender(<MantineProvider><QueuedPrompts task={{...task,queuedPrompts:prompts.slice(1)}} compact /></MantineProvider>);
+ expect(screen.getByText('1 queued')).toBeVisible(); expect(screen.queryByText('First follow-up')).toBeNull();
+ rerender(<MantineProvider><QueuedPrompts task={{...task,queuedPrompts:[]}} compact /></MantineProvider>);
+ expect(screen.queryByRole('region',{name:'Queued prompts'})).toBeNull();
+});
+test('Details provides expansion and clickable queued image thumbnails', async()=>{
+ vi.spyOn(HTMLElement.prototype,'scrollHeight','get').mockReturnValue(200);
+ vi.spyOn(HTMLElement.prototype,'clientHeight','get').mockReturnValue(60);
+ const load=vi.fn().mockResolvedValue('data:image/png;base64,iVBORw0KGgo=');
+ const task={...fixtureTask(),queuedPrompts:[{...prompts[1],images:[{url:'taskchef-queue:second:0',alt:'Queued screenshot'}]}]};
+ render(<MantineProvider><QueuedPrompts task={task} loadImage={load}/></MantineProvider>);
+ expect(screen.getByText('Queued prompts (1)')).toBeVisible();
+ expect(screen.getByRole('listitem').firstElementChild).toHaveClass('taskchef-queue-icon');
+ fireEvent.click(screen.getByRole('button',{name:'Show more…'}));
+ expect(screen.getByRole('button',{name:'Show less'})).toHaveAttribute('aria-expanded','true');
+ const thumbnail=await screen.findByRole('button',{name:'Enlarge Queued screenshot'});
+ fireEvent.click(thumbnail);
+ await waitFor(()=>expect(screen.getByRole('dialog',{name:'Queued screenshot'})).toBeVisible());
+});
+
+test('short queued text offers expansion when narrow wrapping exceeds three rendered lines',()=>{
+ vi.spyOn(HTMLElement.prototype,'scrollHeight','get').mockReturnValue(100);
+ vi.spyOn(HTMLElement.prototype,'clientHeight','get').mockReturnValue(60);
+ const task={...fixtureTask(),queuedPrompts:[{id:'short',text:'A short request that wraps on a narrow screen.',images:[]}]};
+ render(<MantineProvider><QueuedPrompts task={task}/></MantineProvider>);
+ expect(screen.getByRole('button',{name:'Show more…'})).toBeVisible();
+ fireEvent.click(screen.getByRole('button',{name:'Show more…'}));
+ expect(screen.getByRole('button',{name:'Show less'})).toHaveAttribute('aria-expanded','true');
+});

package/src/dashboard/react/components/QueuedPrompts.tsx

@@ -0,0 +1,34 @@
+import { CollapsedMarkdown } from "./TurnContent";
+import type { Task } from "../types";
+import { ReplyMarkdown } from "./ReplyMarkdown";
+import { ImageGallery } from "./ImageGallery";
+import { ReplyCover } from "./ReplyCover";
+
+function QueueIcon() {
+  return <svg className="taskchef-queue-icon" width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M3.33 3.33V11c0 3.2.8 4 4 4h9.34M14.58 12.92 16.67 15l-2.09 2.08M7.5 5h6.67M7.5 9.58h4.17" />
+  </svg>;
+}
+
+export function QueuedPrompts({ task, compact = false, loadImage, onLightboxChange, onOpen }: { task: Task; compact?: boolean; loadImage?: (task: Task, url?: string) => Promise<string | null>; onLightboxChange?: (opened: boolean) => void; onOpen?: () => void }) {
+  if (!task.queuedPrompts?.length) return null;
+  return <section className={`taskchef-queued-prompts${compact ? " is-compact" : ""}`} aria-label="Queued prompts">
+    <div className="taskchef-queued-heading">{compact ? `${task.queuedPrompts.length} queued` : `Queued prompts (${task.queuedPrompts.length})`}</div>
+    <ol>{task.queuedPrompts.map(prompt => compact
+      ? <li key={prompt.id}>
+        <QueueIcon />
+        {loadImage && onOpen && prompt.images[0] && <ReplyCover task={task} image={prompt.images[0]} loadImage={loadImage} onOpen={onOpen} />}
+        <span><ReplyMarkdown text={prompt.text} compact hideRequestLabels renderImage={() => null} /></span>
+      </li>
+      : <QueuedPrompt key={prompt.id} task={task} prompt={prompt} loadImage={loadImage} onLightboxChange={onLightboxChange} />)}</ol>
+  </section>;
+}
+function QueuedPrompt({ task, prompt, loadImage, onLightboxChange }: { task: Task; prompt: NonNullable<Task['queuedPrompts']>[number]; loadImage?: (task: Task, url?: string) => Promise<string | null>; onLightboxChange?: (opened: boolean) => void }) {
+  return <li>
+    <QueueIcon />
+    <div className="taskchef-queue-content">
+    {loadImage && prompt.images.length > 0 && <ImageGallery task={task} images={prompt.images} loadImage={loadImage} onLightboxChange={onLightboxChange} />}
+    <CollapsedMarkdown text={prompt.text} />
+    </div>
+  </li>;
+}