taskchef 8.6.2 → 8.7.0

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

@@ -0,0 +1,68 @@
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "@mantine/hooks";
+import type { SavedUsage } from "../types";
+
+export function compactTokens(value: number) {
+  const units = ["", "K", "M", "B", "T"];
+  let amount = value, unit = 0;
+  while (amount >= 1000 && unit < units.length - 1) { amount /= 1000; unit++; }
+  if (unit && Number(amount.toFixed(2)) >= 1000 && unit < units.length - 1) { amount /= 1000; unit++; }
+  return unit ? `${amount.toFixed(2)}${units[unit]}` : amount.toLocaleString();
+}
+
+export function savedUsageCost(value: SavedUsage) {
+  if (!value.samples || (value.costPartial && value.costUsd === 0)) return "—";
+  return `$${value.costUsd.toFixed(2)}`;
+}
+
+export function turnUsageLabel(value: SavedUsage) {
+  return `${value.samples ? compactTokens(value.tokens.total_tokens) : "—"} • ${savedUsageCost(value)}`;
+}
+
+export function TokenBreakdown({ value }: { value: SavedUsage }) {
+  return <Stack gap={2}>
+    <Text inherit>Input: {value.tokens.input_tokens.toLocaleString()}</Text>
+    <Text inherit>Cached input: {value.tokens.cached_input_tokens.toLocaleString()}</Text>
+    <Text inherit>Cache writes: {value.tokens.cache_write_input_tokens.toLocaleString()}</Text>
+    <Text inherit>Output: {value.tokens.output_tokens.toLocaleString()}</Text>
+    <Text inherit>Reasoning: {value.tokens.reasoning_output_tokens.toLocaleString()} (included in output)</Text>
+    {value.partial && <Text inherit>Some saved usage records or turn links are missing or incomplete.</Text>}
+  </Stack>;
+}
+
+
+export function useAnimatedUsage(value: SavedUsage | undefined, running: boolean, identity?: string | null) {
+  const reducedMotion = useReducedMotion();
+  const targetTokens = value?.tokens.total_tokens ?? 0;
+  const targetCost = value?.costUsd ?? 0;
+  const current = useRef({ tokens: 0, cost: 0, identity });
+  const [display, setDisplay] = useState(() => running && !reducedMotion ? { tokens: 0, cost: 0 } : { tokens: targetTokens, cost: targetCost });
+  useEffect(() => {
+    const target = { tokens: targetTokens, cost: targetCost };
+    const from = current.current.identity === identity ? current.current : { tokens: 0, cost: 0 };
+    current.current = { ...from, identity };
+    if (!running || reducedMotion || (from.tokens === targetTokens && from.cost === targetCost)) {
+      current.current = { ...target, identity };
+      setDisplay(target);
+      return;
+    }
+    setDisplay(from);
+    const started = performance.now();
+    let frame = 0;
+    const tick = (now: number) => {
+      const progress = Math.min(1, Math.max(0, (now - started) / 800));
+      const eased = 1 - (1 - progress) ** 3;
+      const next = progress === 1 ? target : { tokens: from.tokens + (targetTokens - from.tokens) * eased, cost: from.cost + (targetCost - from.cost) * eased };
+      current.current = { ...next, identity };
+      setDisplay(next);
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [targetTokens, targetCost, running, reducedMotion, identity]);
+  if (!value) return undefined;
+  const shown = !running || reducedMotion ? { tokens: targetTokens, cost: targetCost }
+    : current.current.identity !== identity ? { tokens: 0, cost: 0 } : display;
+  return { ...value, tokens: { ...value.tokens, total_tokens: Math.round(shown.tokens) }, costUsd: shown.cost };
+}

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

@@ -2,6 +2,6 @@ import { Badge } from "@mantine/core";
 import { statusColor, statusLabel } from "../presentation";
 import type { Task } from "../types";
 
-export function StatusBadge({ status }: { status: Task["status"] | "interrupted" }) {
-  return <Badge className="taskchef-status-badge" color={statusColor(status)} size="sm" variant="light">{statusLabel(status)}</Badge>;
+export function StatusBadge({ status, label }: { status: Task["status"] | "interrupted"; label?: string }) {
+  return <Badge className="taskchef-status-badge" color={statusColor(status)} size="sm" variant="light">{label ?? statusLabel(status)}</Badge>;
 }

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

@@ -1,7 +1,8 @@
 import { MantineProvider } from "@mantine/core";
-import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
 import { afterEach, expect, test, vi } from "vitest";
 import { fixtureTask } from "../fixtures";
+import type { Task } from "../types";
 import { TaskBoard } from "./TaskBoard";
 
 afterEach(cleanup);
@@ -14,6 +15,18 @@ function task(id: number, status: ReturnType<typeof fixtureTask>["status"], titl
   });
 }
 
+test("observed running cards show elapsed time and return to a date when the turn ends", () => {
+  const running = task(1, "working");
+  running.observed = { archive: false, lastTurnEvent: "inProgress", lastTurnEventAt: new Date(Date.now() - 754000).toISOString(), recentFileActivity: true };
+  const props = { completedLimit: 5, onMoreCompleted: vi.fn(), onOpenCodex: vi.fn(), onOpenDetail: vi.fn() };
+  const { rerender } = render(<MantineProvider><TaskBoard {...props} tasks={[running]} /></MantineProvider>);
+  expect(screen.getByLabelText(/^Elapsed time:/)).toHaveTextContent(/^12m$/);
+  expect(screen.queryByRole("button", { name: /^Updated time:/ })).not.toBeInTheDocument();
+  rerender(<MantineProvider><TaskBoard {...props} tasks={[{ ...running, status: "needs_input" }]} /></MantineProvider>);
+  expect(screen.queryByLabelText(/^Elapsed time:/)).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /^Updated time:/ })).toBeInTheDocument();
+});
+
 function pointer(target: Element, type: string, pointerType: string, clientX: number, pointerId = 1) {
   const event = new MouseEvent(type, { bubbles: true, button: 0, clientX });
   Object.assign(event, { pointerType, pointerId, isPrimary: true });
@@ -120,3 +133,245 @@ test("card controls and touch gestures do not start mouse panning", () => {
   fireEvent.click(title);
   expect(onOpenDetail).toHaveBeenCalledOnce();
 });
+
+
+test("keeps Archived separate from Done and limits archived cards", () => {
+  const archived = Array.from({ length: 8 }, (_, index) => task(index + 10, "archived"));
+  const more = vi.fn();
+  render(<MantineProvider><TaskBoard lanes={[{ status: "completed", label: "Done" }, { status: "archived", label: "Archived" }]} tasks={[task(1, "completed"), ...archived]} completedLimit={5} onMoreArchived={more} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Done, 1 tasks" })).getAllByRole("article")).toHaveLength(1);
+  const archive = screen.getByRole("region", { name: "Archived, 8 tasks" });
+  expect(within(archive).getAllByRole("article")).toHaveLength(5);
+  fireEvent.click(within(archive).getByRole("button", { name: "Show 3 more · 5 of 8" }));
+  expect(more).toHaveBeenCalledOnce();
+});
+
+
+test("Done and Archived expand independently", () => {
+  const done = Array.from({ length: 8 }, (_, i) => task(i, "completed"));
+  const archived = Array.from({ length: 8 }, (_, i) => task(i + 20, "archived"));
+  const moreDone = vi.fn(); const moreArchived = vi.fn();
+  const props = { lanes: [{ status: "completed" as const, label: "Done" }, { status: "archived" as const, label: "Archived" }], tasks: [...done, ...archived], completedLimit: 5, onMoreCompleted: moreDone, onMoreArchived: moreArchived, onOpenCodex: vi.fn(), onOpenDetail: vi.fn() };
+  const { rerender } = render(<MantineProvider><TaskBoard {...props} archivedLimit={5} /></MantineProvider>);
+  const archiveLane = screen.getByRole("region", { name: "Archived, 8 tasks" });
+  fireEvent.click(within(archiveLane).getByRole("button", { name: /Show 3 more/ }));
+  expect(moreArchived).toHaveBeenCalledOnce(); expect(moreDone).not.toHaveBeenCalled();
+  rerender(<MantineProvider><TaskBoard {...props} archivedLimit={10} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Done, 8 tasks" })).getAllByRole("article")).toHaveLength(5);
+  expect(within(screen.getByRole("region", { name: "Archived, 8 tasks" })).getAllByRole("article")).toHaveLength(8);
+});
+
+
+test("Next groups interrupted cards under Waiting with a tag and keeps empty Scheduled", () => {
+  const lanes = [{ status: "scheduled" as const, label: "Scheduled", emptyMessage: "No scheduled chats" }, { status: "needs_input" as const, label: "Waiting for input/review" }, { status: "completed" as const, label: "Done" }];
+  const interrupted = task(1, "interrupted");
+  const { rerender } = render(<MantineProvider><TaskBoard lanes={lanes} tasks={[interrupted]} groupInterruptedWithWaiting completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Scheduled, 0 tasks" })).getByText("No scheduled chats")).toBeVisible();
+  expect(within(screen.getByRole("region", { name: "Waiting for input/review, 1 tasks" })).getByText("Interrupted")).toBeVisible();
+  expect(screen.queryByRole("region", { name: /Unverified/ })).not.toBeInTheDocument();
+  rerender(<MantineProvider><TaskBoard lanes={lanes} tasks={[interrupted, task(2, "scheduled")]} groupInterruptedWithWaiting completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(screen.getByRole("region", { name: "Scheduled, 1 tasks" })).toBeVisible();
+});
+
+
+test("reports only intersecting cards and does not observe unrendered Done cards", () => {
+  let notify!: IntersectionObserverCallback;
+  const observe = vi.fn();
+  const disconnect = vi.fn();
+  vi.stubGlobal("IntersectionObserver", class {
+    constructor(callback: IntersectionObserverCallback) { notify = callback; }
+    observe = observe;
+    disconnect = disconnect;
+  });
+  try {
+    const onVisibleTasksChange = vi.fn();
+    const tasks = [task(1,"working"),task(2,"completed"),task(3,"completed")];
+    const view = render(<MantineProvider><TaskBoard tasks={tasks} completedLimit={1} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onVisibleTasksChange={onVisibleTasksChange} /></MantineProvider>);
+    const cards = observe.mock.calls.map(([element]) => element as HTMLElement);
+    expect(cards).toHaveLength(2);
+    act(() => notify([{target:cards[0],isIntersecting:true},{target:cards[1],isIntersecting:false}] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([cards[0].dataset.chatId]);
+    act(() => notify([{target:cards[0],isIntersecting:false},{target:cards[1],isIntersecting:true}] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([cards[1].dataset.chatId]);
+    const observations = observe.mock.calls.length;
+    const previousNotify = notify;
+    view.rerender(<MantineProvider><TaskBoard tasks={tasks.map(item => ({...item, summary:"Updated reply"}))} completedLimit={1} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onVisibleTasksChange={onVisibleTasksChange} /></MantineProvider>);
+    expect(observe.mock.calls.length).toBe(observations);
+    view.rerender(<MantineProvider><TaskBoard tasks={[tasks[0]]} completedLimit={1} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onVisibleTasksChange={onVisibleTasksChange} /></MantineProvider>);
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([]);
+    act(() => previousNotify([{target:cards[0],isIntersecting:true}] as unknown as IntersectionObserverEntry[], {} as IntersectionObserver));
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([]);
+    view.rerender(<MantineProvider><TaskBoard tasks={[]} completedLimit={1} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onVisibleTasksChange={onVisibleTasksChange} /></MantineProvider>);
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([]);
+    onVisibleTasksChange.mockClear();
+    view.unmount();
+    expect(onVisibleTasksChange).toHaveBeenLastCalledWith([]);
+    expect(disconnect).toHaveBeenCalled();
+  } finally { vi.unstubAllGlobals(); }
+});
+
+test("card footer orders time, schedule clock and PR icon; project has a folder",()=>{
+  const scheduled=task(1,"needs_input"); scheduled.scheduled=true;
+  scheduled.nextRunAt=new Date(Date.now()+3600000).toISOString();
+  scheduled.pullRequests=[{url:"https://github.com/example/repo/pull/12",state:"merged",checks:"passed",title:"Improve search"}];
+  render(<MantineProvider><TaskBoard tasks={[scheduled]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()}/></MantineProvider>);
+  const card=screen.getByRole("article");
+  expect(card.querySelector(".taskchef-board-project svg")).toBeInTheDocument();
+  expect(screen.queryByText("Active schedule")).not.toBeInTheDocument();
+  const stats=card.querySelector(".taskchef-card-stats")!;
+  expect(stats.children[0]).toHaveClass("taskchef-time");
+  expect(stats.children[1]).toHaveAttribute("aria-label","Active schedule");
+  expect(stats.children[2]).toHaveClass("taskchef-card-pr-icons");
+  expect(within(card).getByLabelText("#12 Improve search: Merged")).toBeInTheDocument();
+});
+
+
+test("shows the Running spinner only for a populated Running lane", () => {
+  const props = { completedLimit: 5, onMoreCompleted: vi.fn(), onOpenCodex: vi.fn(), onOpenDetail: vi.fn() };
+  const running = task(1, "working");
+  const lanes = [{ status: "working" as const, label: "Running" }];
+  const { rerender } = render(<MantineProvider><TaskBoard {...props} lanes={lanes} tasks={[running]} /></MantineProvider>);
+  expect(screen.getByRole("img", { name: "Running chats" })).toBeInTheDocument();
+  rerender(<MantineProvider><TaskBoard {...props} lanes={lanes} tasks={[]} /></MantineProvider>);
+  expect(screen.queryByRole("img", { name: "Running chats" })).not.toBeInTheDocument();
+  rerender(<MantineProvider><TaskBoard {...props} tasks={[running]} /></MantineProvider>);
+  expect(screen.queryByRole("img", { name: "Running chats" })).not.toBeInTheDocument();
+});
+
+
+test("all cards can drag and valid destinations are highlighted without moving cards early", () => {
+  const move = vi.fn();
+  const waiting = task(1, "needs_input");
+  const lanes = [{ status: "working" as const, label: "Running" }, { status: "needs_input" as const, label: "Waiting" }, { status: "completed" as const, label: "Done" }, { status: "scheduled" as const, label: "Scheduled" }, { status: "archived" as const, label: "Archived" }];
+  render(<MantineProvider><TaskBoard lanes={lanes} tasks={[waiting, task(2, "working"), task(3, "scheduled")]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onMoveTask={move} /></MantineProvider>);
+  const card = within(screen.getByRole("region", { name: "Waiting, 1 tasks" })).getByRole("article");
+  expect(card).toHaveAttribute("draggable", "true");
+  expect(within(screen.getByRole("region", { name: "Running, 1 tasks" })).getByRole("article")).toHaveAttribute("draggable", "true");
+  expect(within(screen.getByRole("region", { name: "Scheduled, 1 tasks" })).getByRole("article")).toHaveAttribute("draggable", "true");
+  const destination = screen.getByRole("region", { name: "Done, 0 tasks" });
+  fireEvent.drop(destination);
+  expect(move).not.toHaveBeenCalled();
+  fireEvent.dragStart(within(card).getByRole("button", { name: waiting.title }), { dataTransfer: { setData: vi.fn() } });
+  fireEvent.drop(destination);
+  expect(move).not.toHaveBeenCalled();
+  fireEvent.dragStart(card, { dataTransfer: { setData: vi.fn() } });
+  expect(destination).toHaveClass("taskchef-board-lane-drop-target");
+  expect(screen.getByRole("region", { name: "Scheduled, 1 tasks" })).not.toHaveClass("taskchef-board-lane-drop-target");
+  fireEvent.drop(destination);
+  expect(destination).not.toHaveClass("taskchef-board-lane-drop-target");
+  expect(move).toHaveBeenCalledWith(waiting, "completed");
+  expect(card).toBeInTheDocument();
+});
+
+
+test("running, scheduled, done and archived cards can drop into Archived only", () => {
+  const move = vi.fn();
+  const lanes = [{ status: "working" as const, label: "Running" }, { status: "scheduled" as const, label: "Scheduled" }, { status: "completed" as const, label: "Done" }, { status: "archived" as const, label: "Archived" }];
+  const tasks = [task(1, "working"), task(2, "scheduled"), task(3, "completed"), task(4, "archived")];
+  render(<MantineProvider><TaskBoard lanes={lanes} tasks={tasks} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onMoveTask={move} /></MantineProvider>);
+  const archive = screen.getByRole("region", { name: "Archived, 1 tasks" });
+  for (const item of tasks) {
+    const card = screen.getAllByRole("article").find(card => card.dataset.chatId === item.id)!;
+    fireEvent.dragStart(card, { dataTransfer: { setData: vi.fn() } });
+    expect(archive).toHaveClass("taskchef-board-lane-drop-target");
+    expect(screen.getByRole("region", { name: "Done, 1 tasks" })).not.toHaveClass("taskchef-board-lane-drop-target");
+    fireEvent.drop(archive);
+    expect(move).toHaveBeenLastCalledWith(item, "archived");
+    expect(archive).not.toHaveClass("taskchef-board-lane-drop-target");
+  }
+});
+
+test.each(["scheduled", "pr"])("blocked %s waiting cards highlight only valid destinations and clear on drag end", (kind) => {
+  const waiting = { ...task(1, "needs_input"), turnId: "turn-1", ...(kind === "scheduled" ? { scheduled: true, inputSource: "ordinary" as const } : { pullRequests: [{ state: "open", url: "https://github.com/example/repo/pull/1", checks: "pending" }] as Task["pullRequests"] }) };
+  const lanes = [{ status: "needs_input" as const, label: "Waiting" }, { status: "completed" as const, label: "Done" }, { status: "scheduled" as const, label: "Scheduled" }];
+  render(<MantineProvider><TaskBoard lanes={lanes} tasks={[waiting]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onMoveTask={vi.fn()} /></MantineProvider>);
+  const card = screen.getByRole("article");
+  fireEvent.dragStart(card, { dataTransfer: { setData: vi.fn() } });
+  expect(screen.getByRole("region", { name: "Done, 0 tasks" })).not.toHaveClass("taskchef-board-lane-drop-target");
+  expect(screen.getByRole("region", { name: "Scheduled, 0 tasks" }).classList.contains("taskchef-board-lane-drop-target")).toBe(kind === "scheduled");
+  fireEvent.dragEnd(card);
+  expect(document.querySelector(".taskchef-board-lane-drop-target")).toBeNull();
+});
+
+
+test("first load shows Loading instead of empty queue messages", () => {
+  render(<MantineProvider><TaskBoard loading tasks={[]} lanes={[{status: "working", label: "Running", emptyMessage: "No chats running"}, {status: "completed", label: "Done"}]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(screen.getAllByText("Loading…")).toHaveLength(2);
+  expect(screen.queryByText("No chats running")).not.toBeInTheDocument();
+});
+
+test("cards animate between queue positions and honor reduced motion", () => {
+  const animate = vi.fn();
+  const rect = vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+    const left = this.closest('[aria-label="Done, 1 tasks"]') ? 320 : 0;
+    return {left, top: 100, right: left + 300, bottom: 200, width: 300, height: 100, x: left, y: 100, toJSON() { return {}; }};
+  });
+  vi.stubGlobal("matchMedia", () => ({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() }));
+  Object.defineProperty(HTMLElement.prototype, "animate", { configurable: true, value: animate });
+  const props = { lanes: [{ status: "needs_input" as const, label: "Waiting" }, { status: "completed" as const, label: "Done" }], completedLimit: 5, onMoreCompleted: vi.fn(), onOpenCodex: vi.fn(), onOpenDetail: vi.fn() };
+  try {
+    const { rerender } = render(<MantineProvider><TaskBoard {...props} tasks={[task(1, "needs_input")]} /></MantineProvider>);
+    expect(animate).not.toHaveBeenCalled();
+    rerender(<MantineProvider><TaskBoard {...props} tasks={[task(1, "completed")]} /></MantineProvider>);
+    expect(animate).toHaveBeenCalledWith([{transform: "translate(-320px, 0px)"}, {transform: "translate(0, 0)"}], {duration: 280, easing: "ease-out"});
+    animate.mockClear();
+    vi.stubGlobal("matchMedia", () => ({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() }));
+    rerender(<MantineProvider><TaskBoard {...props} tasks={[task(1, "needs_input")]} /></MantineProvider>);
+    expect(animate).not.toHaveBeenCalled();
+  } finally { rect.mockRestore(); delete (HTMLElement.prototype as unknown as {animate?: unknown}).animate; vi.unstubAllGlobals(); }
+});
+
+
+test("native image and link drags move the card while their clicks stay available", async () => {
+  const waiting = {...task(1, "needs_input"), observed: {archive: false, lastTurnEvent: "completed", lastTurnEventAt: null, recentFileActivity: false}, replyExcerpt: "See [report](https://example.com/report)", replyImage: {url: "/local/image.png", alt: "Report image"}};
+  const move = vi.fn();
+  render(<MantineProvider><TaskBoard loadImage={async () => "data:image/png;base64,AAAA"} tasks={[waiting]} lanes={[{status: "needs_input", label: "Waiting"}, {status: "completed", label: "Done"}]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} onMoveTask={move} /></MantineProvider>);
+  const card = screen.getByRole("article");
+  const destination = screen.getByRole("region", {name: "Done, 0 tasks"});
+  for (const element of [within(card).getByRole("link", {name: "report"}), await within(card).findByRole("img", {name: "Report image"})]) {
+    const dataTransfer = {setData: vi.fn(), setDragImage: vi.fn()};
+    fireEvent.dragStart(element, {dataTransfer, clientX: 10, clientY: 10});
+    expect(destination).toHaveClass("taskchef-board-lane-drop-target");
+    expect(dataTransfer.setDragImage).toHaveBeenCalled();
+    fireEvent.drop(destination);
+    expect(move).toHaveBeenLastCalledWith(waiting, "completed");
+  }
+  expect(within(card).getByRole("link", {name: "report"})).toHaveAttribute("href", "https://example.com/report");
+});
+
+test("unread dots follow Codex read state and do not mark a chat read on Details", () => {
+  const chat = task(1, "needs_input");
+  chat.observed = { archive: false, unread: true, lastTurnEvent: "completed", lastTurnEventAt: null, recentFileActivity: false };
+  const props = { completedLimit: 5, onMoreCompleted: vi.fn(), onOpenCodex: vi.fn(), onOpenDetail: vi.fn() };
+  const { rerender } = render(<MantineProvider><TaskBoard {...props} tasks={[chat]} /></MantineProvider>);
+  expect(screen.getByRole("img", {name: "Unread chat"})).toBeVisible();
+  fireEvent.click(screen.getByRole("button", { name: chat.title }));
+  expect(props.onOpenDetail).toHaveBeenCalledWith(chat);
+  expect(screen.getByRole("img", {name: "Unread chat"})).toBeVisible();
+  rerender(<MantineProvider><TaskBoard {...props} tasks={[{...chat, observed: {...chat.observed, unread: false}}]} /></MantineProvider>);
+  expect(screen.queryByRole("img", {name: "Unread chat"})).toBeNull();
+});
+
+test("card usage is on by default and the setting removes usage data from the status line", () => {
+  const item = task(1, "needs_input");
+  item.observed = {archive: false, lastTurnEvent: "completed", lastTurnEventAt: item.updatedAt, recentFileActivity: false, latestTurnDurationMs: 60000};
+  item.turnUsage = {tokens:{input_tokens:1000,cached_input_tokens:0,cache_write_input_tokens:0,output_tokens:100,reasoning_output_tokens:0,total_tokens:1100},costUsd:2.34,samples:1,partial:false,costPartial:false};
+  const props = {tasks:[item],completedLimit:5,onMoreCompleted:vi.fn(),onOpenCodex:vi.fn(),onOpenDetail:vi.fn()};
+  const view = render(<MantineProvider env="test"><TaskBoard {...props} /></MantineProvider>);
+  expect(screen.getByText("1.10K • $2.34")).toBeVisible();
+  view.rerender(<MantineProvider env="test"><TaskBoard {...props} showCardUsage={false} /></MantineProvider>);
+  expect(screen.queryByText("1.10K • $2.34")).toBeNull();
+  expect(screen.queryByText(/Turn usage:/)).toBeNull();
+});
+
+test("covers prefer response images and fall back to prompt images for every status", async () => {
+ const running={...task(1,"working"),observed:{archive:false,lastTurnEvent:"inProgress",lastTurnEventAt:null,recentFileActivity:false},promptImage:{url:"/prompt-first.png",alt:"First prompt"},replyImage:{url:"/reply.png",alt:"Reply"}};
+ const load=vi.fn().mockResolvedValue("data:image/png;base64,AAAA");
+ const {rerender}=render(<MantineProvider><TaskBoard loadImage={load} tasks={[running]} lanes={[{status:"working",label:"Running"},{status:"needs_input",label:"Waiting"}]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+ expect(await screen.findByAltText("Reply")).toBeVisible();
+ expect(load).toHaveBeenCalledWith(running,"/reply.png");
+ expect(screen.queryByAltText("First prompt")).toBeNull();
+ rerender(<MantineProvider><TaskBoard loadImage={load} tasks={[{...running,status:"needs_input",replyImage:null}]} lanes={[{status:"working",label:"Running"},{status:"needs_input",label:"Waiting"}]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+ expect(await screen.findByAltText("First prompt")).toBeVisible();
+ expect(screen.queryByRole("img",{name:"Reply"})).toBeNull();
+});

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

@@ -1,41 +1,111 @@
-import { Box, Button, Paper, Stack, Text, Title } from "@mantine/core";
-import { useRef, type PointerEvent as ReactPointerEvent } from "react";
-import { IconArrowUpRight } from "@tabler/icons-react";
+import { CardStatusLine } from "./CardStatusIcons";
+import { Badge, Box, Button, Paper, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { useLayoutEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
+import { IconArrowUpRight, IconFolder } from "@tabler/icons-react";
 import { hasLinkedCodexThread, latestTurnPresentation } from "../../state.js";
 import type { Task, TaskStatus } from "../types";
 import { LinkedText } from "./LinkedText";
-import { RelativeTime } from "./RelativeTime";
+import { TurnContent } from "./TurnContent";
+import { QueuedPrompts } from "./QueuedPrompts";
+import { ReplyCover } from "./ReplyCover";
+import { ElapsedTime, RelativeTime } from "./RelativeTime";
 
-const lanes: { status: TaskStatus; label: string }[] = [
+const defaultLanes: { status: TaskStatus; label: string; emptyMessage?: string }[] = [
   { status: "working", label: "Working" },
   { status: "needs_input", label: "Needs input" },
   { status: "completed", label: "Completed" },
   { status: "failed", label: "Failed" },
   { status: null, label: "Unresolved" },
 ];
-const knownStatuses = new Set<TaskStatus>(["working", "needs_input", "completed", "failed"]);
-
-function laneFor(task: Task): TaskStatus {
-  return knownStatuses.has(task.status) ? task.status : null;
-}
-
 export function TaskBoard({
+  lanes = defaultLanes,
+  loading = false,
+  showCardUsage = true,
+  groupInterruptedWithWaiting = false,
+  loadImage,
+  doneNotice,
+  onVisibleTasksChange,
+  onMoveTask,
   completedLimit,
+  archivedLimit = 5,
+  onMoreArchived,
   onMoreCompleted,
   onOpenCodex,
   onOpenDetail,
   tasks,
 }: {
+  loading?: boolean;
+  showCardUsage?: boolean;
+  onMoveTask?: (task: Task, destination: TaskStatus) => void;
+  groupInterruptedWithWaiting?: boolean;
+  doneNotice?: ReactNode;
+  onVisibleTasksChange?: (ids: string[]) => void;
+  loadImage?: (task: Task, url?: string) => Promise<string | null>;
+  lanes?: { status: TaskStatus; label: string; emptyMessage?: string }[];
   completedLimit: number;
+  archivedLimit?: number;
+  onMoreArchived?: () => void;
   onMoreCompleted: () => void;
   onOpenCodex: (task: Task) => void;
   onOpenDetail: (task: Task) => void;
   tasks: Task[];
 }) {
+  const draggedTask = useRef<Task | null>(null);
+  const [dragging, setDragging] = useState<Task | null>(null);
+  const isWaiting = (task: Task) => ["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));
+  const acceptsDrop = (task: Task, destination: TaskStatus) => destination === "archived" || (isWaiting(task) && ["completed", "scheduled"].includes(destination ?? ""));
   const boardRef = useRef<HTMLDivElement>(null);
+  const previousPositions = useRef(new Map<string, { left: number; top: number }>());
   const dragRef = useRef<{ pointerId: number; startX: number; scrollLeft: number; moved: boolean } | null>(null);
   const suppressClickRef = useRef(false);
 
+  // Observe the same DOM cards across reply updates; rebuild only when cards or lanes change.
+  const cardLayoutKey = JSON.stringify(tasks.map(({ id, status }) => [id, status]));
+  useLayoutEffect(() => {
+    const cards = boardRef.current?.querySelectorAll<HTMLElement>("[data-chat-id]");
+    if (!cards) return;
+    const next = new Map<string, { left: number; top: number }>();
+    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    for (const card of cards) {
+      for (const animation of card.getAnimations?.() ?? []) animation.cancel();
+      const rect = card.getBoundingClientRect();
+      const left = rect.left + (boardRef.current?.scrollLeft ?? 0);
+      const top = rect.top + (boardRef.current?.scrollTop ?? 0);
+      const id = card.dataset.chatId!;
+      const previous = previousPositions.current.get(id);
+      next.set(id, { left, top });
+      if (previous && !reducedMotion && typeof card.animate === "function") {
+        const x = previous.left - left;
+        const y = previous.top - top;
+        if (Math.abs(x) > 1 || Math.abs(y) > 1) card.animate([
+          { transform: `translate(${x}px, ${y}px)` }, { transform: "translate(0, 0)" },
+        ], { duration: 280, easing: "ease-out" });
+      }
+    }
+    previousPositions.current = next;
+  }, [cardLayoutKey, completedLimit, archivedLimit]);
+  useLayoutEffect(() => {
+    if (!onVisibleTasksChange || !boardRef.current || typeof IntersectionObserver === "undefined") return;
+    onVisibleTasksChange([]);
+    const visible = new Set<string>();
+    let active = true;
+    const observer = new IntersectionObserver(entries => {
+      if (!active) return;
+      for (const entry of entries) {
+        const id = (entry.target as HTMLElement).dataset.chatId;
+        if (!id) continue;
+        if (entry.isIntersecting) visible.add(id); else visible.delete(id);
+      }
+      onVisibleTasksChange([...visible].sort());
+    });
+    const cards = boardRef.current.querySelectorAll("[data-chat-id]");
+    for (const card of cards) observer.observe(card);
+    return () => { active = false; observer.disconnect(); onVisibleTasksChange([]); };
+  }, [cardLayoutKey, completedLimit, archivedLimit, onVisibleTasksChange]);
+
   function onPointerDown(event: ReactPointerEvent<HTMLDivElement>) {
     if (event.pointerType !== "mouse" || event.button !== 0 || !event.isPrimary) return;
     const target = event.target as Element;
@@ -73,7 +143,9 @@ export function TaskBoard({
     }
   }
 
-  const visibleLanes = lanes.filter((lane) => lane.status !== null || tasks.some((task) => laneFor(task) === null));
+  const knownStatuses = new Set(lanes.map((lane) => lane.status));
+  const laneFor = (task: Task): TaskStatus => groupInterruptedWithWaiting && task.status === "interrupted" ? "needs_input" : knownStatuses.has(task.status) ? task.status : null;
+  const visibleLanes = lanes.filter((lane) => (lane.status !== null || tasks.some((task) => laneFor(task) === null)));
   return (
     <Box
       aria-label="Task board"
@@ -92,20 +164,43 @@ export function TaskBoard({
       ref={boardRef}
       tabIndex={0}
     >
-      {visibleLanes.map(({ status, label }) => {
+      {visibleLanes.map(({ status, label, emptyMessage }) => {
         const matching = tasks.filter((task) => laneFor(task) === status);
-        const shown = status === "completed" ? matching.slice(0, completedLimit) : matching;
+        const shown = (status === "completed" || status === "archived") ? matching.slice(0, status === "archived" ? archivedLimit : completedLimit) : matching;
         return (
-          <Box aria-label={`${label}, ${matching.length} tasks`} className="taskchef-board-lane" component="section" key={label}>
+          <Box aria-label={`${label}, ${matching.length} tasks`} className={`taskchef-board-lane${dragging && canDrop(dragging, status) ? " taskchef-board-lane-drop-target" : ""}`} component="section" key={label}
+            onDragOver={(event) => { if (onMoveTask && draggedTask.current && acceptsDrop(draggedTask.current, status)) event.preventDefault(); }}
+            onDrop={(event) => {
+              const task = draggedTask.current;
+              draggedTask.current = null;
+              setDragging(null);
+              if (!onMoveTask || !task || !acceptsDrop(task, status)) return;
+              event.preventDefault();
+              onMoveTask(task, status);
+            }}
+          >
             <Box className="taskchef-board-lane-heading">
-              <Title order={2} size="h5">{label}</Title>
-              <Text aria-label={`${matching.length} tasks`} c="dimmed" size="sm">{matching.length}</Text>
+              <Box className="taskchef-board-lane-title">
+                <Title order={2} size="h5">{label}</Title>
+                {status === "working" && label === "Running" && matching.length > 0 && (
+                  <svg aria-label="Running chats" role="img" className="taskchef-running-spinner" width="18" height="18" viewBox="0 0 24 24" fill="none">
+                    <path opacity="0.3" d="M18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor" />
+                    <path d="M12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12H6C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6V4Z" fill="currentColor" />
+                  </svg>
+                )}
+              </Box>
+              {matching.length > 0 && <Text aria-label={`${matching.length} tasks`} c="dimmed" size="sm">{matching.length}</Text>}
             </Box>
             <Stack gap="sm">
-              {shown.map((task) => <BoardCard key={task.id} onOpenCodex={onOpenCodex} onOpenDetail={onOpenDetail} task={task} />)}
-              {matching.length === 0 && <Text c="dimmed" className="taskchef-board-empty" size="sm">No tasks</Text>}
-              {status === "completed" && matching.length > shown.length && (
-                <Button className="taskchef-board-more" onClick={onMoreCompleted} size="compact-sm" variant="subtle">
+              {!loading && status === "completed" && doneNotice}
+              {shown.map((task) => <BoardCard showCardUsage={showCardUsage} draggable={!!onMoveTask} onDragStart={(event) => { if (event.target !== event.currentTarget) {
+                if (!(event.target as Element).closest("a, img")) return;
+                const rect = event.currentTarget.getBoundingClientRect();
+                event.dataTransfer.setDragImage?.(event.currentTarget, event.clientX - rect.left, event.clientY - rect.top);
+              } draggedTask.current = task; setDragging(task); event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", task.id); }} onDragEnd={() => { draggedTask.current = null; setDragging(null); }} loadImage={loadImage} key={task.id} onOpenCodex={onOpenCodex} onOpenDetail={onOpenDetail} task={task} />)}
+              {matching.length === 0 && <Text c="dimmed" className="taskchef-board-empty" size="sm">{loading ? "Loading…" : emptyMessage ?? "No tasks"}</Text>}
+              {(status === "completed" || status === "archived") && matching.length > shown.length && (
+                <Button className="taskchef-board-more" onClick={status === "archived" ? onMoreArchived : onMoreCompleted} size="compact-sm" variant="subtle">
                   Show {Math.min(5, matching.length - shown.length)} more · {shown.length} of {matching.length}
                 </Button>
               )}
@@ -117,7 +212,12 @@ export function TaskBoard({
   );
 }
 
-function BoardCard({ task, onOpenCodex, onOpenDetail }: {
+function BoardCard({ showCardUsage, task, onOpenCodex, onOpenDetail, loadImage, draggable, onDragStart, onDragEnd }: {
+  showCardUsage: boolean;
+  draggable?: boolean;
+  onDragStart?: React.DragEventHandler<HTMLElement>;
+  onDragEnd?: React.DragEventHandler<HTMLElement>;
+  loadImage?: (task: Task, url?: string) => Promise<string | null>;
   task: Task;
   onOpenCodex: (task: Task) => void;
   onOpenDetail: (task: Task) => void;
@@ -125,17 +225,25 @@ function BoardCard({ task, onOpenCodex, onOpenDetail }: {
   const latest = latestTurnPresentation(task);
   const excerpt = task.status === "working" ? latest.requestSummary : latest.resultSummary;
   const linked = hasLinkedCodexThread(task);
+  const cover = task.replyImage ?? task.promptImage;
   return (
-    <Paper className="taskchef-board-card" component="article" px="sm" pt="sm" pb={6} withBorder>
+    <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)} />}
       <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" />}
       </Title>
-      <Text className="taskchef-board-project" size="xs">{task.project.name}</Text>
-      <Text className="taskchef-board-excerpt taskchef-preserve-lines" size="sm">
-        <LinkedText task={task} text={excerpt} />
-      </Text>
+      <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>}
+      <QueuedPrompts task={task} compact loadImage={loadImage} onOpen={() => onOpenDetail(task)} />
       <Box className="taskchef-board-card-footer">
-        <RelativeTime label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} />
+        <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}>
+        {task.observed && task.status === "working"
+          ? <ElapsedTime tooltipEnabled={false} startedAt={task.observed.lastTurnEventAt} />
+          : <RelativeTime tooltipEnabled={false} calendar={!!task.observed} icon={task.observed ? false : undefined} label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} durationMs={task.observed ? task.observed.latestTurnDurationMs ?? null : undefined} />}
+        </CardStatusLine>
         {linked ? (
           <button aria-label={`Open chat for ${task.title}`} className="taskchef-board-chat" onClick={() => onOpenCodex(task)} title="Open chat" type="button">
             <IconArrowUpRight aria-hidden size={19} stroke={1.6} />

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

@@ -6,6 +6,8 @@ import { GitHubLinks } from "./GitHubLinks";
 import { LinkedText } from "./LinkedText";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
+import { TurnContent } from "./TurnContent";
+import { RelativeTime } from "./RelativeTime";
 import { TaskCardStats } from "./TaskCardStats";
 
 export function TaskCard({
@@ -29,13 +31,14 @@ export function TaskCard({
                 </button>
               </Title>
               <Stack align="flex-end" className="taskchef-card-metadata" gap={4}>
-                <StatusBadge status={task.status} />
+                <StatusBadge status={task.status} label={task.statusLabel} />
               </Stack>
             </Box>
             <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
+            {task.scheduled && <Text size="xs" c="violet">Active schedule</Text>}
           </Box>
 
-          <Box className="taskchef-summary-grid">
+          {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} />
@@ -46,11 +49,11 @@ export function TaskCard({
                 ? <ShimmerText>{latest.resultSummary}</ShimmerText>
                 : <LinkedText task={task} text={latest.resultSummary} />}
             </Text>
-          </Box>
+          </Box>}
 
           <GitHubLinks task={task} />
           <Box className="taskchef-list-card-footer">
-            <TaskCardStats task={task} />
+            {task.observed ? <RelativeTime calendar icon={false} label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} /> : <TaskCardStats task={task} />}
             <button aria-label={`Open chat for ${task.title}`} className="taskchef-board-chat" onClick={() => onOpenCodex(task)} title="Open chat" type="button">
               <IconArrowUpRight aria-hidden size={19} stroke={1.6} />
             </button>