taskchef 8.6.1 → 8.7.0

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

@@ -0,0 +1,100 @@
+import { MantineProvider } from "@mantine/core";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { formatCardAge, formatCardTime, formatWorkedDuration } from "../../time.js";
+import { ElapsedTime, RelativeTime, RelativeTimeProvider } from "./RelativeTime";
+
+afterEach(() => { cleanup(); vi.useRealTimers(); });
+const local = (year: number, month: number, day: number, hour = 0, minute = 0) => new Date(year, month - 1, day, hour, minute).toISOString();
+
+test("saved work durations use hours and minutes without inventing missing data", () => {
+  expect(formatWorkedDuration(54300000)).toBe("15h 5m");
+  expect(formatWorkedDuration(59999)).toBe("<1m");
+  expect(formatWorkedDuration(60000)).toBe("1m");
+  for (const value of [null, undefined, -1, NaN]) expect(formatWorkedDuration(value)).toBe("—");
+});
+
+test("elapsed time ticks from the turn start, resets for a new turn, and cleans up", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-10-09T07:12:34Z"));
+  const { rerender, unmount } = render(<MantineProvider><ElapsedTime startedAt="2026-10-09T07:00:00Z" /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent("12m");
+  expect(screen.getByLabelText(/^Elapsed time:/).querySelector("svg")).not.toBeNull();
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveAccessibleName(/Started/);
+  act(() => { vi.advanceTimersByTime(1000); });
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent(/^12m$/);
+  act(() => { vi.advanceTimersByTime(25000); });
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent(/^13m$/);
+  rerender(<MantineProvider><ElapsedTime startedAt="2026-10-09T06:00:00Z" /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent("1h 13m");
+  rerender(<MantineProvider><ElapsedTime startedAt="2026-10-09T07:13:00Z" /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent("<1m");
+  unmount();
+  expect(vi.getTimerCount()).toBe(0);
+});
+
+test("elapsed time does not invent a start time and clamps clock skew", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-10-09T07:00:00Z"));
+  const { rerender } = render(<MantineProvider><ElapsedTime startedAt="invalid" /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent("—");
+  expect(vi.getTimerCount()).toBe(0);
+  rerender(<MantineProvider><ElapsedTime startedAt="2026-10-09T07:00:01Z" /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent("<1m");
+});
+
+test("card dates use local calendar days across midnight and year boundaries", () => {
+  const now = new Date(2026, 9, 8, 14, 35).getTime();
+  expect(formatCardTime(local(2026, 10, 8, 14, 30), { now })).toBe("2:30PM");
+  expect(formatCardTime(local(2026, 10, 7, 23, 59), { now })).toBe("Yesterday");
+  expect(formatCardTime(local(2026, 7, 7), { now })).toBe("Jul 7th");
+  expect(formatCardTime(local(2025, 7, 7), { now })).toBe("Jul 7th, 2025");
+  expect(formatCardTime(local(2025, 12, 31), { now: new Date(2026, 0, 1, 0, 1).getTime() })).toBe("Yesterday");
+  expect(formatCardTime(local(2026, 10, 9), { now })).toBe("Oct 9th");
+  expect(formatCardTime(null, { now })).toBe("—");
+});
+
+test("ordinal date labels handle teens and month endings", () => {
+  const now = new Date(2026, 9, 8).getTime();
+  for (const [day, suffix] of [[1, "st"], [2, "nd"], [3, "rd"], [11, "th"], [12, "th"], [13, "th"], [21, "st"], [31, "st"]] as const) {
+    expect(formatCardTime(local(2026, 7, day), { now })).toBe(`Jul ${day}${suffix}`);
+  }
+});
+
+test("card time has no clock and preserves exact-time access", () => {
+  render(<MantineProvider><RelativeTimeProvider showCalendarDates now={new Date(2026, 9, 8, 15).getTime()}>
+    <RelativeTime calendar icon={false} label="Updated time" value={local(2026, 10, 8, 14, 30)} />
+  </RelativeTimeProvider></MantineProvider>);
+  const button = screen.getByRole("button", { name: "Updated time: 2:30PM. Show exact time" });
+  expect(button.querySelector("svg")).toBeNull();
+  fireEvent.click(button);
+  expect(button).toHaveAccessibleName(/Show card date/);
+  expect(button).toHaveTextContent("2026");
+  fireEvent.click(button);
+  expect(button).toHaveTextContent("2:30PM");
+});
+
+
+test("compact card ages use minutes, hours, days, and months at their boundaries", () => {
+  const now = Date.parse("2026-10-10T12:00:00Z");
+  for (const [age, expected] of [[0, "<1m"], [59999, "<1m"], [60000, "1m"], [3600000, "1h"], [7200000, "2h"], [5 * 86400000, "5d"], [29 * 86400000, "29d"], [30 * 86400000, "1mo"], [75 * 86400000, "2mo"], [-60000, "<1m"]] as const) {
+    expect(formatCardAge(new Date(now - age).toISOString(), { now })).toBe(expected);
+  }
+  expect(formatCardAge("invalid", { now })).toBe("—");
+});
+
+test("card format defaults to compact age and changes with the shared setting", () => {
+  const now = new Date(2026, 9, 8, 15).getTime();
+  const view = (showCalendarDates = false) => <MantineProvider><RelativeTimeProvider now={now} showCalendarDates={showCalendarDates}>
+    <RelativeTime calendar icon={false} label="Updated time" value={local(2026, 10, 8, 14, 30)} />
+  </RelativeTimeProvider></MantineProvider>;
+  const { rerender } = render(view());
+  expect(screen.getByRole("button", { name: /^Updated time:/ })).toHaveTextContent("30m");
+  fireEvent.click(screen.getByRole("button", { name: /^Updated time:/ }));
+  expect(screen.getByRole("button", { name: /^Updated time:/ })).toHaveAccessibleName(/Show relative time/);
+  fireEvent.click(screen.getByRole("button", { name: /^Updated time:/ }));
+  rerender(view(true));
+  expect(screen.getByRole("button", { name: /^Updated time:/ })).toHaveTextContent("2:30PM");
+  rerender(view());
+  expect(screen.getByRole("button", { name: /^Updated time:/ })).toHaveTextContent("30m");
+});

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

@@ -1,40 +1,75 @@
 import { Tooltip, UnstyledButton } from "@mantine/core";
-import { IconClock } from "@tabler/icons-react";
-import { createContext, useContext, useState, type ReactNode } from "react";
-import { formatExactTime, formatRelativeTime } from "../../time.js";
+import { IconClock, IconHourglass } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { formatCardAge, formatCardTime, formatExactTime, formatRelativeTime, formatWorkedDuration } from "../../time.js";
 
+const CardCalendarDates = createContext(false);
 const RelativeTimeClock = createContext<number | null>(null);
 
-export function RelativeTimeProvider({ children, now }: { children: ReactNode; now: number }) {
-  return <RelativeTimeClock value={now}>{children}</RelativeTimeClock>;
+export function RelativeTimeProvider({ children, now, showCalendarDates = false }: { children: ReactNode; now: number; showCalendarDates?: boolean }) {
+  return <RelativeTimeClock value={now}><CardCalendarDates value={showCalendarDates}>{children}</CardCalendarDates></RelativeTimeClock>;
+}
+
+export function ElapsedTime({ startedAt, tooltipEnabled = true }: { startedAt: string | null | undefined; tooltipEnabled?: boolean }) {
+  const [now, setNow] = useState(() => Date.now());
+  const start = startedAt ? Date.parse(startedAt) : NaN;
+  const available = Number.isFinite(start);
+  useEffect(() => {
+    if (!available) return;
+    const tick = () => setNow(Date.now());
+    tick();
+    const timer = window.setInterval(tick, 1000);
+    return () => window.clearInterval(timer);
+  }, [available, startedAt]);
+  const text = available ? formatWorkedDuration(Math.max(0, now - start)) : "—";
+  const tooltip = available ? `Worked for ${text} · Started ${formatExactTime(startedAt)}` : "Turn start time unavailable";
+  return <Tooltip disabled={!tooltipEnabled} events={{ focus: true, hover: true, touch: false }} label={tooltip}>
+    <span aria-label={`Elapsed time: ${text}. ${tooltip}`} className="taskchef-time" tabIndex={0}>
+      <IconHourglass aria-hidden size={12} />
+      <bdi className="taskchef-time-label">{text}</bdi>
+    </span>
+  </Tooltip>;
 }
 
 export function RelativeTime({
   icon,
+  calendar = false,
   label,
   value,
+  durationMs,
+  tooltipEnabled = true,
 }: {
   icon?: ReactNode;
+  calendar?: boolean;
   label: string;
   value: string | null | undefined;
+  durationMs?: number | null;
+  tooltipEnabled?: boolean;
 }) {
   const [exact, setExact] = useState(false);
-  useContext(RelativeTimeClock);
-  const text = exact ? formatExactTime(value) : formatRelativeTime(value);
+  const now = useContext(RelativeTimeClock) ?? Date.now();
+  const showCalendarDates = useContext(CardCalendarDates);
+  const shortText = calendar
+    ? showCalendarDates ? formatCardTime(value, { now }) : formatCardAge(value, { now })
+    : formatRelativeTime(value, { now });
+  const text = exact ? formatExactTime(value) : shortText;
   const exactText = formatExactTime(value);
   const unavailable = exactText === "—";
-  const tooltip = unavailable ? "Updated time unavailable" : exact ? formatRelativeTime(value) : exactText;
+  const duration = formatWorkedDuration(durationMs);
+  const tooltip = durationMs !== undefined
+    ? duration === "—" ? "Run duration unavailable" : `Worked for ${duration}`
+    : unavailable ? "Updated time unavailable" : exact ? shortText : exactText;
   return (
-    <Tooltip events={{ focus: true, hover: true, touch: false }} label={tooltip}>
+    <Tooltip disabled={!tooltipEnabled} events={{ focus: true, hover: true, touch: false }} label={tooltip}>
       <UnstyledButton
         aria-label={unavailable
           ? `${label}: unavailable.`
-          : `${label}: ${text}. ${exact ? "Show relative time" : "Show exact time"}`}
+          : `${label}: ${text}. ${exact ? calendar && showCalendarDates ? "Show card date" : "Show relative time" : "Show exact time"}`}
         className="taskchef-time"
         disabled={unavailable}
         onClick={() => setExact((value) => !value)}
       >
-        {icon ?? <IconClock aria-hidden size={12} />}
+        {icon === undefined ? <IconClock aria-hidden size={12} /> : icon}
         <bdi className="taskchef-time-label">{text}</bdi>
       </UnstyledButton>
     </Tooltip>

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

@@ -0,0 +1,30 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { ReplyCover } from "./ReplyCover";
+afterEach(cleanup);
+test("loads a local cover, opens details, and clears it on a new turn", async () => {
+  const task = fixtureTask({ title: "Design", turnId: "one", replyImage: { url: "/design.png", alt: "Design screenshot" } });
+  const load = vi.fn().mockResolvedValueOnce("data:image/png;base64,AAAA").mockResolvedValueOnce(null);
+  const open = vi.fn();
+  const { rerender } = render(<ReplyCover task={task} loadImage={load} onOpen={open} />);
+  expect(await screen.findByAltText("Design screenshot")).toHaveAttribute("src", "data:image/png;base64,AAAA");
+  fireEvent.click(screen.getByRole("button")); expect(open).toHaveBeenCalledOnce();
+  rerender(<ReplyCover task={{ ...task, turnId: "two" }} loadImage={load} onOpen={open} />);
+  await waitFor(() => expect(screen.queryByRole("button")).not.toBeInTheDocument());
+  expect(screen.queryByRole("img")).not.toBeInTheDocument();
+});
+test("remote covers are hidden without starting an image request", async () => {
+  const task = fixtureTask({ title: "Chart", replyImage: {url: "https://example.com/chart.png", alt: "Chart"} });
+  const load = vi.fn();
+  render(<ReplyCover task={task} loadImage={load} onOpen={vi.fn()} />);
+  expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  expect(load).not.toHaveBeenCalled();
+  await waitFor(() => expect(screen.queryByRole("button")).not.toBeInTheDocument());
+});
+
+test("a rejected local image read hides the cover", async () => {
+  const task = fixtureTask({ replyImage: {url: "/missing.png", alt: "Missing"} });
+  render(<ReplyCover task={task} loadImage={vi.fn().mockRejectedValue(new Error("Missing file"))} onOpen={vi.fn()} />);
+  await waitFor(() => expect(screen.queryByRole("button")).not.toBeInTheDocument());
+});

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

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import type { Task } from "../types";
+
+export function ReplyCover({ task, image = task.replyImage!, loadImage, onOpen }: { task: Task; image?: { url: string; alt: string }; loadImage?: (task: Task, url?: string) => Promise<string | null>; onOpen: () => void }) {
+  const root = useRef<HTMLButtonElement>(null);
+  const [src, setSrc] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    let started = false;
+    setSrc(null); setFailed(false);
+    // Remote images remain click-only Markdown links, never automatic requests.
+    if (/^https:\/\//i.test(image.url)) { setFailed(true); return; }
+    const load = async () => {
+      if (started) return;
+      started = true;
+      try {
+        const url = await loadImage?.(task, image.url);
+        if (!cancelled) { setSrc(url || null); setFailed(!url); }
+      } catch { if (!cancelled) setFailed(true); }
+    };
+    const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) { observer?.disconnect(); void load(); }
+    }, { rootMargin: "200px" });
+    if (observer && root.current) observer.observe(root.current); else void load();
+    return () => { cancelled = true; observer?.disconnect(); };
+  }, [image.url, task.turnId, loadImage]);
+  if (failed) return null;
+  return <button ref={root} type="button" className="taskchef-reply-cover" aria-label={`View image details for ${task.title}`} onClick={onOpen}>
+    {src ? <img src={src} alt={image.alt} referrerPolicy="no-referrer" loading="lazy" onError={() => setFailed(true)} />
+      : <span>Loading image…</span>}
+  </button>;
+}

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

@@ -0,0 +1,90 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { NextTaskDetail } from "../../../mcp-app/react/NextTaskDetail";
+import { TurnContent } from "./TurnContent";
+// 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 { createPortal } = await import("react-dom");
+  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) ? createPortal(<div {...props} ref={ref} />, document.body) : null),
+    },
+  );
+  return {...actual, Popover};
+});
+
+afterEach(cleanup);
+const png = 'data:image/png;base64,iVBORw0KGgo=';
+test('reply thumbnails open above Details and close with Escape', async () => {
+ const load=vi.fn().mockResolvedValue(png);
+ const close = vi.fn();
+ const { rerender } = render(<MantineProvider><NextTaskDetail task={{...fixtureTask(),title:'Chat details',replyText:'![Design](</local/design (2).png>)'}} opened busy={false} error={null} onClose={close} onOpenCodex={()=>{}} loadImage={load} /></MantineProvider>);
+ const thumbnail=await screen.findByRole('button',{name:'Enlarge Design'});
+ expect(load).toHaveBeenCalledWith(expect.anything(),'/local/design%20(2).png');
+ fireEvent.click(thumbnail);
+ await waitFor(()=>expect(screen.getByRole('dialog',{name:'Design'})).toBeVisible());
+ rerender(<MantineProvider><NextTaskDetail task={{...fixtureTask(),title:'Chat details',replyText:'![Design](</local/design (2).png>)'}} opened busy={false} error={null} onClose={close} onOpenCodex={()=>{}} loadImage={load} /></MantineProvider>);
+ expect(screen.getByRole('dialog',{name:'Design'})).toBeVisible();
+ fireEvent.keyDown(screen.getByRole('dialog',{name:'Design'}),{key:'Escape'});
+ await waitFor(()=>expect(screen.queryByRole('dialog',{name:'Design'})).not.toBeInTheDocument());
+ expect(screen.getByRole('dialog',{name:'Chat details'})).toBeVisible();
+ expect(close).not.toHaveBeenCalled();
+});
+test('missing local images are hidden and remote images stay links', async () => {
+ const load=vi.fn().mockResolvedValue(null);
+ render(<MantineProvider><TurnContent task={{...fixtureTask(),replyText:'![Missing](/gone.png)\n![Remote](https://example.com/image.png)'}} loadImage={load} /></MantineProvider>);
+ await waitFor(()=>expect(load).toHaveBeenCalledTimes(1));
+ expect(screen.queryByRole('img')).toBeNull();expect(screen.queryByRole('button',{name:/Enlarge/})).toBeNull();
+ expect(screen.getByRole('link',{name:'Remote'})).toHaveAttribute('href','https://example.com/image.png');
+});
+
+test('all prompt images stay visible beside capped prompt text and open in the lightbox', async () => {
+ const load=vi.fn().mockResolvedValue(png); const close=vi.fn();
+ const task={...fixtureTask(),title:'Prompt images',promptText:'![First](/first.png)\n\n![Second](/second.png)\n\nPlease review both.',promptImages:[{url:'/first.png',alt:'First'},{url:'/second.png',alt:'Second'}]};
+ render(<MantineProvider><NextTaskDetail task={task} opened busy={false} error={null} onClose={close} onOpenCodex={()=>{}} loadImage={load} /></MantineProvider>);
+ expect(await screen.findByRole('button',{name:'Enlarge First'})).toBeVisible();
+ const second=await screen.findByRole('button',{name:'Enlarge Second'});
+ expect(second.closest('.taskchef-turn-collapsed')).toBeNull();
+ expect(screen.getAllByRole('img')).toHaveLength(2);
+ fireEvent.click(second);
+ await waitFor(()=>expect(screen.getByRole('dialog',{name:'Second'})).toBeVisible());
+ fireEvent.keyDown(screen.getByRole('dialog',{name:'Second'}),{key:'Escape'});
+ await waitFor(()=>expect(screen.queryByRole('dialog',{name:'Second'})).toBeNull());
+ expect(close).not.toHaveBeenCalled();
+});
+
+test('Escape closes an annotation popup while keeping Details open', async () => {
+ const close=vi.fn();
+ render(<MantineProvider><NextTaskDetail task={{...fixtureTask(),title:'Annotated chat',replyText:':codex-annotation{index="1"}',annotations:[{text:'Selected text',annotation:'User comment'}]}} opened busy={false} error={null} onClose={close} onOpenCodex={()=>{}} /></MantineProvider>);
+ fireEvent.click(screen.getByRole('button',{name:'Annotation 1'}));
+ await waitFor(()=>expect(screen.getByRole('tooltip')).toBeVisible());
+ fireEvent.keyDown(screen.getByRole('button',{name:'Annotation 1'}),{key:'Escape'});
+ await waitFor(()=>expect(screen.queryByRole('tooltip')).toBeNull());
+ expect(screen.getByRole('dialog',{name:'Annotated chat'})).toBeVisible();
+ expect(close).not.toHaveBeenCalled();
+});
+
+test('prompt gallery reserves space and reveals images together after concurrent loading', async () => {
+ let first!: (value:string) => void; let second!: (value:string) => void;
+ const load=vi.fn().mockImplementation((_task, url) => new Promise<string>(resolve => { if(url==='/first.png') first=resolve; else second=resolve; }));
+ const task={...fixtureTask(),promptText:'Review both.',promptImages:[{url:'/first.png',alt:'First'},{url:'/second.png',alt:'Second'}]};
+ render(<MantineProvider><TurnContent task={task} loadImage={load} /></MantineProvider>);
+ expect(screen.getByRole('status',{name:'Loading First'})).toBeVisible();
+ expect(screen.getByRole('status',{name:'Loading Second'})).toBeVisible();
+ await waitFor(()=>expect(load).toHaveBeenCalledTimes(2));
+ first(png);
+ await waitFor(()=>expect(screen.queryByRole('button',{name:'Enlarge First'})).toBeNull());
+ second(png);
+ expect(await screen.findByRole('button',{name:'Enlarge First'})).toBeVisible();
+ expect(screen.getByRole('button',{name:'Enlarge Second'})).toBeVisible();
+ expect(load).toHaveBeenCalledTimes(2);
+});

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

@@ -0,0 +1,34 @@
+import { Modal } from "@mantine/core";
+import { useEffect, useState } from "react";
+import type { Task } from "../types";
+
+export function ReplyImagePreview({ task, url, alt, loadImage, source, onLightboxChange }: { task: Task; url: string; alt: string; loadImage: (task: Task, url?: string) => Promise<string | null>; source?: string | null; onLightboxChange?: (opened: boolean) => void }) {
+  const [src, setSrc] = useState<string | null>(source ?? null);
+  const [failed, setFailed] = useState(false);
+  const [opened, setOpened] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    setSrc(source ?? null); setFailed(false);
+    if (source) return;
+    void loadImage(task, url).then(value => {
+      if (!cancelled) {
+        if (value && /^data:image\/(png|jpeg|gif|webp);base64,[A-Za-z0-9+/=]+$/.test(value)) setSrc(value);
+        else setFailed(true);
+      }
+    }).catch(() => { if (!cancelled) setFailed(true); });
+    return () => { cancelled = true; };
+  }, [task.id, task.turnId, url, loadImage, source]);
+  useEffect(() => {
+    if (!opened) return;
+    onLightboxChange?.(true);
+    return () => onLightboxChange?.(false);
+  }, [opened, onLightboxChange]);
+  if (failed) return null;
+  if (!src) return <span className="taskchef-image-placeholder" role="status" aria-label={`Loading ${alt}`} />;
+  return <span className="taskchef-response-image">
+    <button type="button" className="taskchef-image-thumbnail" aria-label={`Enlarge ${alt}`} onClick={() => setOpened(true)}><img src={src} alt={alt} onError={() => setFailed(true)} /></button>
+    <Modal opened={opened} onClose={() => setOpened(false)} title={alt} centered size="auto" zIndex={400} classNames={{ content: "taskchef-image-lightbox" }}>
+      <img src={src} alt={alt} onError={() => { setFailed(true); setOpened(false); }} />
+    </Modal>
+  </span>;
+}

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

@@ -0,0 +1,108 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { MantineProvider } from "@mantine/core";
+import { ReplyMarkdown } from "./ReplyMarkdown";
+
+// 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 { createPortal } = await import("react-dom");
+  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) ? createPortal(<div {...props} ref={ref} />, document.body) : null),
+    },
+  );
+  return {...actual, Popover};
+});
+
+afterEach(cleanup);
+
+test("renders Markdown blocks, formatting, links, and GFM tables", () => {
+  const { container } = render(<ReplyMarkdown text={'# Review\n\n**Ready** with `npm test`.\n\n- First\n- Second\n\n```js\nconst ready = true;\n```\n\n| Check | Result |\n| --- | --- |\n| CI | Passed |\n\n[PR](https://github.com/example/repo/pull/1)'} />);
+  expect(screen.getByRole("heading", { name: "Review" })).toBeVisible();
+  expect(container.querySelector("strong")).toHaveTextContent("Ready");
+  expect(container.querySelectorAll("li")).toHaveLength(2);
+  expect(container.querySelector("pre code")).toHaveTextContent("const ready = true;");
+  expect(screen.getByRole("table")).toHaveTextContent("Passed");
+  expect(screen.getByRole("link", { name: "PR" })).toHaveAttribute("rel", "noopener noreferrer");
+});
+
+test("compact previews keep formatting without exposing Markdown markers", () => {
+  const { container } = render(<ReplyMarkdown compact text={'**Ready**\n\n- Run `npm test`'} />);
+  expect(container.firstChild).toHaveClass("taskchef-markdown--compact");
+  expect(container.querySelector("strong")).toHaveTextContent("Ready");
+  expect(container.querySelector("code")).toHaveTextContent("npm test");
+  expect(container).not.toHaveTextContent("**Ready**");
+});
+
+test("does not execute HTML, use unsafe links, or fetch saved images", () => {
+  const { container } = render(<ReplyMarkdown text={'<script>alert(1)</script>\n\n[Unsafe](javascript:alert%281%29) [Local](/tmp/test)\n\n![Screenshot](https://example.com/private.png)\n\n![Bad](data:image/png;base64,aaa)'} />);
+  expect(container.querySelector("script")).toBeNull();
+  expect(container.querySelector("img")).toBeNull();
+  expect(screen.queryByRole("link", { name: "Unsafe" })).toBeNull();
+  expect(screen.queryByRole("link", { name: "Local" })).toBeNull();
+  expect(screen.queryByRole("link", { name: "Bad" })).toBeNull();
+  expect(screen.getByRole("link", { name: "Screenshot" })).toHaveAttribute("href", "https://example.com/private.png");
+});
+
+
+test.each(["## My request:\nFix the filter.", "## My requests:\nFix the filter.", "My requests:\n\nFix the filter.", "My requests: Fix the filter.", "My requests:\nFix the filter.", "My requests:  \nFix the filter.", "**My requests:** Fix the filter.", "## **My requests:**\nFix the filter.", "**My requests:**  \nFix the filter."])("card previews hide request labels: %s", text => {
+  const { container, rerender } = render(<ReplyMarkdown compact hideRequestLabels text={text} />);
+  expect(container).toHaveTextContent("Fix the filter.");
+  expect(container).not.toHaveTextContent(/My requests?:/i);
+  rerender(<ReplyMarkdown text={text} />);
+  expect(container).toHaveTextContent(/My requests?:/i);
+});
+
+test("card request-label cleanup preserves quoted and code examples", () => {
+  const { container } = render(<ReplyMarkdown compact hideRequestLabels text={"> ## My requests:\n\n```text\nMy requests:\n```"} />);
+  expect(container.querySelector("blockquote")).toHaveTextContent("My requests:");
+  expect(container.querySelector("pre code")).toHaveTextContent("My requests:");
+});
+
+test("prompt cleanup preserves later user headings", () => {
+ const { container } = render(<ReplyMarkdown hideRequestLabels text={"## My request:\nReview this.\n\n## My requests:\nA real later section."} />);
+ expect(container.querySelectorAll("h2")).toHaveLength(1);
+ expect(container.querySelector("h2")).toHaveTextContent("My requests:");
+});
+
+test.each([false, true])("annotations render readable links with selected text and comment (compact=%s)", async compact => {
+ const {container}=render(<MantineProvider><ReplyMarkdown compact={compact} annotations={[{text:'Quoted selection',annotation:'Requested change'}]} text={'Final plan :codex-annotation{index="1"}'} /></MantineProvider>);
+ const button=screen.getByRole('button',{name:'Annotation 1'});
+ expect(container).not.toHaveTextContent(':codex-annotation');
+ fireEvent.focus(button);
+ expect(await screen.findByRole('tooltip')).toHaveTextContent('Selected text:Quoted selectionUser comment:Requested change');
+});
+test('code examples stay literal and unavailable annotations do not borrow another index', async () => {
+ const {container}=render(<MantineProvider><ReplyMarkdown annotations={[{text:'First selection',annotation:'First comment'}]} text={':codex-annotation{index="2"}\n\n`:codex-annotation{index="1"}`\n\n```text\n:codex-annotation{index="1"}\n```'} /></MantineProvider>);
+ expect(container.querySelectorAll('code')).toHaveLength(2);
+ expect(container.querySelector('code')).toHaveTextContent(':codex-annotation{index="1"}');
+ expect(screen.queryByRole('button',{name:'Annotation 1'})).toBeNull();
+ fireEvent.focus(screen.getByRole('button',{name:'Annotation 2'}));
+ expect(await screen.findByRole('tooltip')).toHaveTextContent('Annotation details unavailable.');
+});
+
+test('an open annotation survives same-turn refresh and closes without opening a card', async () => {
+ const annotation={text:'Selected text',annotation:'User comment'};
+ const clicked=vi.fn();
+ const {rerender}=render(<MantineProvider><div onClick={clicked}><ReplyMarkdown text={':codex-annotation{index="1"}'} annotations={[annotation]} /></div></MantineProvider>);
+ fireEvent.click(screen.getByRole('button',{name:'Annotation 1'}));
+ expect(clicked).not.toHaveBeenCalled();
+ rerender(<MantineProvider><div onClick={clicked}><ReplyMarkdown text={':codex-annotation{index="1"}'} annotations={[{...annotation}]} /></div></MantineProvider>);
+ expect(screen.getByRole('tooltip')).toHaveTextContent('User comment');
+ fireEvent.keyDown(screen.getByRole('button',{name:'Annotation 1'}),{key:'Escape'});
+ expect(screen.queryByRole('tooltip')).toBeNull();
+});
+
+ test("annotation popups keep fixed labels even without a comment", async () => {
+ render(<MantineProvider><ReplyMarkdown text={':codex-annotation{index="1"}'} annotations={[{text:"A selection",annotation:"   "}]} /></MantineProvider>);
+ fireEvent.mouseEnter(screen.getByRole("button",{name:"Annotation 1"}));
+ const popup=await screen.findByRole("tooltip");
+ expect(popup).toHaveTextContent("Selected text:A selectionUser comment:—");
+ });

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

@@ -0,0 +1,112 @@
+import { Popover } from "@mantine/core";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, useId, type ReactNode } from "react";
+import Markdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { PhrasingContent, Root, RootContent } from "mdast";
+
+// Saved replies are untrusted text. Do not execute HTML or load remote images.
+function replyUrl(url: string): string {
+  return /^(https?:|mailto:)/i.test(url) || url.startsWith("#") ? url : "";
+}
+
+function localImagePath(url: string): boolean {
+  return (url.startsWith("/") && !url.startsWith("//")) || /^[A-Za-z]:[\\/]/.test(url);
+}
+
+// Generated request labels add no information to cards or prompt bubbles.
+// Keep labels inside quoted examples and code intact.
+function requestLabelText(node: PhrasingContent): string | null {
+  if (node.type === "text") return node.value;
+  if ((node.type === "strong" || node.type === "emphasis") && node.children.length === 1 && node.children[0].type === "text") return node.children[0].value;
+  return null;
+}
+
+function hideCardRequestLabels() {
+  return (tree: Root) => {
+    const leading = tree.children[0];
+    if (leading && (leading.type === "heading" || leading.type === "paragraph") && leading.children.length === 1
+      && /^My requests?:\s*$/i.test(requestLabelText(leading.children[0]) ?? "")) tree.children.shift();
+    const first = tree.children[0];
+    if (first?.type === "paragraph" && first.children[0]) {
+      const label = first.children[0];
+      if (label.type === "text") {
+        label.value = label.value.replace(/^My requests?:[ \t]*(?:\r?\n)?/i, "");
+        if (!label.value) first.children.shift();
+      } else if (/^My requests?:\s*$/i.test(requestLabelText(label) ?? "")) {
+        first.children.shift();
+      } else return;
+      if (first.children[0]?.type === "break") first.children.shift();
+    }
+  };
+}
+
+// Transform text nodes only: quoted code and existing links remain literal.
+function annotationLinks() {
+  return (tree: Root) => {
+    const visit = (parent: Root | RootContent) => {
+      if (!("children" in parent) || parent.type === "link") return;
+      parent.children = parent.children.flatMap((child): (RootContent | PhrasingContent)[] => {
+        if (child.type !== "text") { visit(child as RootContent); return [child]; }
+        const parts: PhrasingContent[] = [];
+        let end = 0;
+        for (const match of child.value.matchAll(/:codex-annotation\{index="([1-9]\d*)"\}/g)) {
+          if (match.index! > end) parts.push({ type: "text", value: child.value.slice(end, match.index) });
+          parts.push({ type: "link", url: `#taskchef-annotation-${match[1]}`, children: [{ type: "text", value: `Annotation ${match[1]}` }] });
+          end = match.index! + match[0].length;
+        }
+        if (!parts.length) return [child];
+        if (end < child.value.length) parts.push({ type: "text", value: child.value.slice(end) });
+        return parts;
+      }) as typeof parent.children;
+    };
+    visit(tree);
+  };
+}
+
+type Annotation = { text: string; annotation: string };
+type AnnotationOpenChange = (id: string, opened: boolean) => void;
+const AnnotationContext = createContext<{ items: Annotation[]; onOpenChange?: AnnotationOpenChange }>({ items: [] });
+function AnnotationLink({ index }: { index: number }) {
+  const { items, onOpenChange } = useContext(AnnotationContext);
+  const annotation = items[index - 1];
+  const popupId = useId();
+  const label = annotation ? <div className="taskchef-annotation-popup">
+    <div className="taskchef-annotation-label">Selected text:</div><div>{annotation.text}</div>
+    <div className="taskchef-annotation-label">User comment:</div><div>{annotation.annotation.trim() || "—"}</div>
+  </div> : "Annotation details unavailable.";
+  const [opened, setOpened] = useState(false);
+  useEffect(() => { onOpenChange?.(popupId, opened); return () => onOpenChange?.(popupId, false); }, [popupId, opened, onOpenChange]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const target = useRef<HTMLButtonElement>(null);
+  const popup = useRef<HTMLDivElement>(null);
+  const show = () => { if (timer.current) clearTimeout(timer.current); setOpened(true); };
+  const 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); }, []);
+  return <Popover opened={opened} onChange={setOpened} withinPortal width={320} zIndex={500} position="bottom-start" middlewares={{ flip: true, shift: { crossAxis: true, padding: 12 } }}>
+    <Popover.Target><button ref={target} type="button" className="taskchef-annotation-link" onMouseEnter={show} onMouseLeave={leave} onFocus={show} onBlur={leave}
+      onClick={event => { event.stopPropagation(); show(); }} onKeyDown={event => { event.stopPropagation(); if (event.key === "Escape") setOpened(false); }} aria-expanded={opened} aria-label={`Annotation ${index}`}>Annotation {index}</button></Popover.Target>
+    <Popover.Dropdown ref={popup} role="tooltip" maw="calc(100vw - 24px)" className="taskchef-status-tooltip" onMouseEnter={show} onMouseLeave={leave} onFocus={show} onBlur={leave}
+      onClick={event => event.stopPropagation()} onKeyDown={event => { event.stopPropagation(); if (event.key === "Escape") setOpened(false); }}>{label}</Popover.Dropdown>
+  </Popover>;
+}
+
+export function ReplyMarkdown({ text, compact = false, hideRequestLabels = false, renderImage, annotations = [], onAnnotationChange }: { text: string; compact?: boolean; hideRequestLabels?: boolean; renderImage?: (url: string, alt: string) => ReactNode; annotations?: Annotation[]; onAnnotationChange?: AnnotationOpenChange }) {
+  const components = useMemo<Components>(() => ({
+      a: ({ href, children }) => /^#taskchef-annotation-[1-9]\d*$/.test(href ?? "")
+        ? <AnnotationLink index={Number(href!.split("-").at(-1))} /> : href
+        ? <a href={href} target={href.startsWith("#") ? undefined : "_blank"} rel="noopener noreferrer">{children}</a>
+        : <span>{children}</span>,
+      img: ({ src, alt }) => src && renderImage && localImagePath(src) ? renderImage(src, alt || "Image") : src
+        ? <a href={src} target="_blank" rel="noopener noreferrer">{alt || "Image"}</a>
+        : <span>{alt || "Image"}</span>,
+      table: ({ children }) => <div className="taskchef-markdown-table"><table>{children}</table></div>,
+  }), [renderImage]);
+  return <div className={`taskchef-markdown${compact ? " taskchef-markdown--compact" : ""}`}>
+    <AnnotationContext value={{ items: annotations, onOpenChange: onAnnotationChange }}><Markdown skipHtml remarkPlugins={hideRequestLabels ? [remarkGfm, hideCardRequestLabels, annotationLinks] : [remarkGfm, annotationLinks]} urlTransform={(url, key) => key === "src" && renderImage && localImagePath(url) ? url : replyUrl(url)} components={components}>{text}</Markdown></AnnotationContext>
+  </div>;
+}

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

@@ -0,0 +1,11 @@
+import { expect, test } from "vitest";
+import { compactTokens, savedUsageCost } from "./SavedUsageFormat";
+test("formats token units with two decimal places and promotes rounded boundaries", () => {
+  expect([0, 999, 3210, 4230000, 5390000000, 999999].map(compactTokens)).toEqual(["0", "999", "3.21K", "4.23M", "5.39B", "1.00M"]);
+});
+
+test("an unknown price keeps a plain cost placeholder", () => {
+  const usage={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};
+  expect(savedUsageCost(usage)).toBe("—");
+  expect(savedUsageCost({...usage,costPartial:false})).toBe("$0.00");
+});