taskchef 8.6.2 → 8.7.1

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

@@ -4,13 +4,86 @@ import { useState } from "react";
 import { afterEach, expect, test, vi } from "vitest";
 import { fixtureTask } from "../fixtures";
 import { ActivityTimeline } from "./ActivityTimeline";
-import { ManualTransitionConfirmation, type TerminalStatus } from "./TaskDetail";
+import { ManualTransitionConfirmation, TaskDetail, type TerminalStatus } from "./TaskDetail";
 
 afterEach(() => {
   cleanup();
   vi.restoreAllMocks();
 });
 
+test("shows only metadata available from a DB-backed observed task", () => {
+  renderObservedDetail({
+    archive: false,
+    lastTurnEvent: "inProgress",
+    lastTurnEventAt: null,
+    recentFileActivity: true,
+  });
+
+  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
+  expect(within(metadata).getByText("Archive status")).toBeVisible();
+  expect(within(metadata).getByText("Active")).toBeVisible();
+  expect(within(metadata).queryByText("Location")).not.toBeInTheDocument();
+  expect(within(metadata).getByText("inProgress")).toBeVisible();
+  expect(within(metadata).queryByText("Observed messages")).not.toBeInTheDocument();
+  expect(within(metadata).queryByText("Log bytes sampled")).not.toBeInTheDocument();
+  expect(within(metadata).getByText("Queue reason")).toBeVisible();
+  expect(metadata).not.toHaveTextContent("undefined");
+});
+
+test("shows archived database chat status without claiming a file location", () => {
+  renderObservedDetail({
+    archive: true,
+    lastTurnEvent: "completed",
+    lastTurnEventAt: null,
+    recentFileActivity: false,
+  });
+
+  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
+  expect(within(metadata).getByText("Archive status")).toBeVisible();
+  expect(within(metadata).getByText("Archived")).toBeVisible();
+  expect(within(metadata).queryByText("Location")).not.toBeInTheDocument();
+});
+
+test("keeps log message and byte counts in observed task metadata", () => {
+  renderObservedDetail({
+    archive: true,
+    lastTurnEvent: "completed",
+    lastTurnEventAt: null,
+    recentFileActivity: false,
+    userMessages: 2,
+    assistantMessages: 3,
+    sampledBytes: 1024,
+    fileBytes: 4096,
+  }, "Local Codex log");
+
+  const metadata = screen.getByRole("heading", { name: "Metadata" }).closest("section")!;
+  expect(within(metadata).getByText("Location")).toBeVisible();
+  expect(within(metadata).getByText("Archived sessions")).toBeVisible();
+  expect(within(metadata).getByText("Observed messages")).toBeVisible();
+  expect(within(metadata).getByText("2 user, 3 assistant")).toBeVisible();
+  expect(within(metadata).getByText("Log bytes sampled")).toBeVisible();
+  expect(within(metadata).getByText("1024 of 4096")).toBeVisible();
+});
+
+function renderObservedDetail(observed: NonNullable<ReturnType<typeof fixtureTask>["observed"]>, updatedBy = "Local Codex database") {
+  render(
+    <MantineProvider>
+      <TaskDetail
+        busy={false}
+        error={null}
+        highlightTurnRef={null}
+        onClose={() => {}}
+        onCopy={() => {}}
+        onOpenCodex={() => {}}
+        onTransition={async () => ({ ok: true })}
+        opened
+        readOnly
+        task={fixtureTask({ observed, updatedBy })}
+      />
+    </MantineProvider>,
+  );
+}
+
 test("clears a manual-transition confirmation only after success", async () => {
   const onTransition = vi.fn().mockResolvedValue({ ok: true });
   render(<ConfirmationHarness onTransition={onTransition} />);
@@ -162,3 +235,21 @@ function ConfirmationHarness({ onTransition }: { onTransition: (status: Terminal
     </MantineProvider>
   );
 }
+
+
+test("read-only Details allows copying an ID without exposing manual status actions", () => {
+  const onCopy = vi.fn();
+  render(<MantineProvider><TaskDetail busy={false} error={null} highlightTurnRef={null} onClose={vi.fn()} onCopy={onCopy} onOpenCodex={vi.fn()} onTransition={vi.fn()} opened readOnly task={fixtureTask()} /></MantineProvider>);
+  expect(screen.queryByRole("button", {name:"More task actions"})).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", {name:"Copy Task ID"}));
+  expect(onCopy).toHaveBeenCalledOnce();
+});
+
+test("observed web details show the full same-turn request and response", () => {
+  const task=fixtureTask({promptExcerpt:'Short request',promptText:'Full recorded request',replyExcerpt:'Short response',replyText:'Full recorded response',
+    observed:{archive:false,lastTurnEvent:'completed',lastTurnEventAt:null,recentFileActivity:false}});
+  render(<MantineProvider><TaskDetail task={task} opened readOnly busy={false} error={null} highlightTurnRef={null} onClose={()=>{}} onCopy={()=>{}} onOpenCodex={()=>{}} onTransition={async()=>({ok:true})} /></MantineProvider>);
+  expect(screen.getByLabelText('Latest turn request')).toHaveTextContent('Full recorded request');
+  expect(screen.getByLabelText('Latest turn response')).toHaveTextContent('Full recorded response');
+  expect(screen.queryByText('Latest saved reply (excerpt)')).toBeNull();
+});

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

@@ -1,3 +1,4 @@
+import { PullRequestBadges } from "./PullRequestBadges";
 import {
   ActionIcon,
   Alert,
@@ -26,6 +27,7 @@ import type { Task } from "../types";
 import { ActivityTimeline } from "./ActivityTimeline";
 import { GitHubLinks } from "./GitHubLinks";
 import { OpenChatButton } from "./OpenChatButton";
+import { TurnContent } from "./TurnContent";
 import { RelativeTime } from "./RelativeTime";
 import { StatusBadge } from "./StatusBadge";
 import { UsagePanel } from "./UsagePanel";
@@ -48,6 +50,8 @@ export function TaskDetail({
   task,
   notifications,
   notice,
+  readOnly = false,
+  extraActions,
 }: {
   busy: boolean;
   error: string | null;
@@ -60,6 +64,8 @@ export function TaskDetail({
   task: Task | null;
   notifications?: ReactNode;
   notice?: string | null;
+  readOnly?: boolean;
+  extraActions?: React.ReactNode;
 }) {
   const mobile = useMediaQuery("(max-width: 48em)");
   const [confirmStatus, setConfirmStatus] = useState<TerminalStatus | null>(null);
@@ -90,11 +96,13 @@ export function TaskDetail({
             <Text c="teal" fw={700} size="xs" tt="uppercase">{task.project.name}</Text>
             <Title id="task-detail-title" order={2} size="h3" tabIndex={-1}>{task.title}</Title>
           </Box>
-          <StatusBadge status={task.status} />
+          <StatusBadge status={task.status} label={task.statusLabel} />
         </Group>
         <Group gap="xs" mt="md">
           <OpenChatButton loading={busy} onClick={onOpenCodex} taskTitle={task.title} />
-          <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
+          {extraActions}
+          {readOnly && <Button leftSection={<IconClipboard size={14} />} onClick={onCopy} variant="default">Copy Task ID</Button>}
+          {!readOnly && <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
             <Menu.Target>
               <Tooltip label="More task actions">
                 <ActionIcon aria-label="More task actions" className="taskchef-detail-more" disabled={busy} variant="default">
@@ -111,9 +119,10 @@ export function TaskDetail({
                 <Menu.Item color="red" leftSection={<IconX size={14} />} onClick={() => setConfirmStatus("failed")}>Mark failed</Menu.Item>
               )}
             </Menu.Dropdown>
-          </Menu>
+          </Menu>}
         </Group>
         <Box mt="sm">
+          <PullRequestBadges pullRequests={task.pullRequests} />
           <GitHubLinks task={task} />
         </Box>
       </Box>
@@ -130,19 +139,20 @@ export function TaskDetail({
       {notice && <Alert color="teal" role="status">{notice}</Alert>}
       {error && <Alert color="red" role="alert">{error}</Alert>}
 
-      <section aria-labelledby="usage-heading">
+      {!readOnly && <section aria-labelledby="usage-heading">
         <Title id="usage-heading" mb="xs" order={3} size="h5">Usage</Title>
         <UsagePanel task={task} />
-      </section>
-      <Divider />
-      <section aria-labelledby="activity-heading">
+      </section>}
+      {!readOnly && <Divider />}
+      {!readOnly && <section aria-labelledby="activity-heading">
         <Title id="activity-heading" mb="sm" order={3} size="h5">Activity timeline</Title>
         <ActivityTimeline highlightTurnRef={highlightTurnRef} task={task} />
-      </section>
-      <section aria-labelledby="instruction-heading">
+      </section>}
+      {!readOnly && <section aria-labelledby="instruction-heading">
         <Title id="instruction-heading" mb="xs" order={3} size="h5">Original instruction</Title>
         <Box className="taskchef-code-panel" component="pre">{task.instruction}</Box>
-      </section>
+      </section>}
+      {task.observed && <section aria-label="Latest turn"><TurnContent task={task} /></section>}
       <section aria-labelledby="metadata-heading">
         <Title id="metadata-heading" mb="xs" order={3} size="h5">Metadata</Title>
         <dl className="taskchef-metadata">
@@ -153,6 +163,23 @@ export function TaskDetail({
           <dt>Created</dt><dd><RelativeTime label="Created time" value={task.createdAt} /></dd>
           <dt>Updated</dt><dd><RelativeTime label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} /></dd>
           <dt>Updated by</dt><dd>{task.updatedBy ?? "—"}</dd>
+          {task.observed?.directChildCount !== undefined && <><dt>Direct subagent chats (all history)</dt><dd>{task.observed.directChildCount}</dd></>}
+          {task.observed && <>
+            <dt>Queue reason</dt><dd>{task.summary}</dd>
+            {task.updatedBy === "Local Codex database" ? <>
+              <dt>Archive status</dt><dd>{task.observed.archive ? "Archived" : "Active"}</dd>
+            </> : <>
+              <dt>Location</dt><dd>{task.observed.archive ? "Archived sessions" : "Active sessions"}</dd>
+            </>}
+            {task.statusLabel && <><dt>Schedule</dt><dd>{task.scheduled ? "Active" : "None active"}</dd><dt>Latest input</dt><dd>{task.inputSource}</dd><dt>Done reason</dt><dd>{task.observed.archive ? "Archived" : task.manualDone ? "Manual mark" : "Not marked"}</dd></>}
+            <dt>Latest turn event</dt><dd>{task.observed.lastTurnEvent ?? "Unknown"}</dd>
+            {task.observed.userMessages !== undefined && task.observed.assistantMessages !== undefined && <>
+              <dt>Observed messages</dt><dd>{task.observed.userMessages} user, {task.observed.assistantMessages} assistant</dd>
+            </>}
+            {task.observed.sampledBytes !== undefined && task.observed.fileBytes !== undefined && <>
+              <dt>Log bytes sampled</dt><dd>{task.observed.sampledBytes} of {task.observed.fileBytes}</dd>
+            </>}
+          </>}
         </dl>
       </section>
     </Stack>

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

@@ -0,0 +1,44 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { TurnContent } from "./TurnContent";
+afterEach(cleanup);
+test("a running request is visible without a stale or placeholder reply", () => {
+  const task={...fixtureTask(),status:"working" as const,promptExcerpt:"Current **request**",replyExcerpt:null};
+  render(<TurnContent task={task} compact />);
+  expect(screen.getByLabelText("Latest turn request").querySelector('strong')?.textContent).toBe('request');
+  expect(screen.queryByLabelText("Latest turn response")).toBeNull();
+});
+test("details use full text, and only actual scheduled input has a clock", () => {
+  const task={...fixtureTask(),scheduled:true,inputSource:"ordinary" as const,promptExcerpt:"Short",promptText:"Full request",replyExcerpt:"Short result",replyText:"Full result"};
+  const {rerender}=render(<TurnContent task={task} />);
+  expect(screen.getByText('Full request')).toBeVisible(); expect(screen.getByText('Full result')).toBeVisible();
+  expect(screen.queryByLabelText('Scheduled prompt')).toBeNull();
+  rerender(<TurnContent task={{...task,inputSource:'scheduled'}} />);
+  expect(screen.getByLabelText('Scheduled prompt')).toBeVisible();
+});
+
+test("cards show only the prompt while running and only the response otherwise", () => {
+ const task={...fixtureTask(),status:"working" as const,promptExcerpt:"Current request",replyExcerpt:"Current response"};
+ const {rerender}=render(<TurnContent task={task} compact />);
+ expect(screen.getByText('Current request')).toBeVisible();expect(screen.queryByText('Current response')).toBeNull();
+ rerender(<TurnContent task={{...task,status:'needs_input'}} compact />);
+ expect(screen.queryByText('Current request')).toBeNull();expect(screen.getByText('Current response')).toBeVisible();
+});
+
+
+test("details hide generated request labels and put worked time before the complete reply", () => {
+ render(<TurnContent task={{...fixtureTask(),promptText:"## My request:\nPlease review.",replyText:"Full response.",observed:{archive:false,recentFileActivity:false,lastTurnEvent:"completed",lastTurnEventAt:null,latestTurnDurationMs:298000}}} />);
+ expect(screen.getByLabelText('Latest turn request')).toHaveTextContent('Please review.');
+ expect(screen.getByLabelText('Latest turn request')).not.toHaveTextContent('My request:');
+ expect(screen.getByRole('separator')).toHaveTextContent('Worked for 4m');
+ expect(screen.getByLabelText('Latest turn response')).toHaveTextContent('Full response.');
+});
+
+test("card prompt cleanup does not change response headings", () => {
+ const task={...fixtureTask(),status:"working" as const,promptExcerpt:"## My request:\nReview this.",replyExcerpt:"## My requests:\nA response section."};
+ const {rerender}=render(<TurnContent task={task} compact />);
+ expect(screen.getByLabelText("Latest turn request")).not.toHaveTextContent("My request:");
+ rerender(<TurnContent task={{...task,status:"needs_input"}} compact />);
+ expect(screen.getByLabelText("Latest turn response")).toHaveTextContent("My requests:");
+});

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

@@ -0,0 +1,53 @@
+import { IconClock } from "@tabler/icons-react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import type { Task } from "../types";
+import { ImageGallery } from "./ImageGallery";
+import { ReplyImagePreview } from "./ReplyImagePreview";
+import { formatWorkedDuration } from "../../time.js";
+import { ReplyMarkdown } from "./ReplyMarkdown";
+
+const hidePromptImage = () => null;
+
+export function CollapsedMarkdown({ text }: { text: string }) {
+  const content = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [clipped, setClipped] = useState(false);
+  useLayoutEffect(() => {
+    const element = content.current;
+    if (!element || expanded) return;
+    const measure = () => setClipped(element.scrollHeight > element.clientHeight + 1);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [text, expanded]);
+  return <>
+    <div ref={content} className={expanded ? "" : "taskchef-turn-collapsed"}><ReplyMarkdown text={text} hideRequestLabels renderImage={hidePromptImage} /></div>
+    {(clipped || expanded) && <button type="button" className="taskchef-turn-expand" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? "Show less" : "Show more…"}</button>}
+  </>;
+}
+
+export function TurnContent({ task, compact = false, loadImage, workedDurationMs, onLightboxChange, onAnnotationChange }: { task: Task; compact?: boolean; loadImage?: (task: Task, url?: string) => Promise<string | null>; workedDurationMs?: number | null; onLightboxChange?: (opened: boolean) => void; onAnnotationChange?: (id: string, opened: boolean) => void }) {
+  const currentTask = useRef(task);
+  currentTask.current = task;
+  const renderImage = useCallback((url: string, alt: string) => loadImage ? <ReplyImagePreview key={`${task.id}:${task.turnId}:${url}`} task={currentTask.current} url={url} alt={alt} loadImage={loadImage} onLightboxChange={onLightboxChange} /> : null, [task.id, task.turnId, loadImage, onLightboxChange]);
+  const prompt = compact ? task.promptExcerpt : task.promptText ?? task.promptExcerpt;
+  const reply = compact ? task.replyExcerpt : task.replyText ?? task.replyExcerpt;
+  if (compact) {
+    const text = task.status === "working" ? prompt : reply;
+    return text ? <div className="taskchef-turn-card" aria-label={task.status === "working" ? "Latest turn request" : "Latest turn response"}><ReplyMarkdown key={`${task.id}:${task.turnId}`} compact annotations={task.annotations} hideRequestLabels={task.status === "working"} text={text} renderImage={task.status === "working" ? hidePromptImage : undefined} /></div> : null;
+  }
+  const promptImages = task.promptImages ?? (task.promptImage ? [task.promptImage] : []);
+  const duration = workedDurationMs ?? task.observed?.latestTurnDurationMs;
+  return <div className="taskchef-turn-content">
+    {prompt && <div className="taskchef-turn-prompt" aria-label="Latest turn request">
+      {task.inputSource === "scheduled" && <IconClock className="taskchef-schedule-clock taskchef-prompt-clock" size={14} stroke={1.5} aria-label="Scheduled prompt" />}
+      {loadImage && promptImages.length > 0 && <ImageGallery task={task} images={promptImages} loadImage={loadImage} onLightboxChange={onLightboxChange} />}
+      <CollapsedMarkdown key={`prompt:${task.id}:${task.turnId}`} text={prompt} />
+    </div>}
+    {reply && <>
+      <div className="taskchef-turn-divider" role="separator">{duration != null && Number.isFinite(duration) && duration >= 0 ? `Worked for ${formatWorkedDuration(duration)}` : null}</div>
+      <div className="taskchef-turn-response" aria-label="Latest turn response"><ReplyMarkdown key={`${task.id}:${task.turnId}`} onAnnotationChange={onAnnotationChange} annotations={task.annotations} text={reply} renderImage={loadImage ? renderImage : undefined} /></div>
+    </>}
+  </div>;
+}

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

@@ -36,7 +36,7 @@ export function UsagePanel({ task }: { task: Task }) {
       animated: usage.kind === "pending" || usage.kind === "calculating" || ready?.knownSoFar,
       label: "Tokens",
       title: ready ? `${formatFullTokens(ready.usage.totalTokens)} tokens` : usage.label,
-      value: ready ? formatCompactTokens(ready.usage.totalTokens) : stateValue,
+      value: ready ? `${ready.usage.partial ? "≥" : ""}${formatCompactTokens(ready.usage.totalTokens)}` : stateValue,
     },
     {
       accessibleValue: ready
@@ -54,7 +54,7 @@ export function UsagePanel({ task }: { task: Task }) {
         ? "Estimated cost unavailable"
         : `Unrounded estimate: $${ready.usage.estimatedCostUsd}`,
       value: ready
-        ? ready.usage.estimatedCostUsd == null ? "n/a" : formatEstimatedCost(ready.usage.estimatedCostUsd)
+        ? ready.usage.estimatedCostUsd == null ? "n/a" : `${ready.usage.costPartial ? "≥" : ""}${formatEstimatedCost(ready.usage.estimatedCostUsd)}`
         : stateValue,
     },
     {

package/src/dashboard/react/image-cache.test.ts

@@ -0,0 +1,23 @@
+import { expect, test, vi } from "vitest";
+import { cachedImageLoader } from "./image-cache";
+import { fixtureTask } from "./fixtures";
+
+test('covers and Details share in-flight and completed image requests, scoped to turn and chat', async () => {
+  const load = vi.fn().mockResolvedValue('data:image/png;base64,AAAA');
+  const cached = cachedImageLoader(load); const task = {...fixtureTask(), turnId:'turn-1'};
+  const first = cached(task,'/image.png');
+  expect(cached(task,'/image.png')).toBe(first);
+  await first; await cached(task,'/image.png');
+  expect(load).toHaveBeenCalledTimes(1);
+  await cached({...task,turnId:'turn-2'},'/image.png');
+  await cached({...task,id:'other-chat'},'/image.png');
+  expect(load).toHaveBeenCalledTimes(3);
+});
+test('failed and missing images can be retried', async () => {
+  const load = vi.fn().mockResolvedValueOnce(null).mockRejectedValueOnce(new Error('offline')).mockResolvedValue('data:image/png;base64,AAAA');
+  const cached = cachedImageLoader(load); const task = fixtureTask();
+  expect(await cached(task,'/image.png')).toBeNull();
+  await expect(cached(task,'/image.png')).rejects.toThrow('offline');
+  expect(await cached(task,'/image.png')).toContain('data:image/png');
+  expect(load).toHaveBeenCalledTimes(3);
+});

package/src/dashboard/react/image-cache.ts

@@ -0,0 +1,33 @@
+import type { Task } from "./types";
+
+// Covers and Details reuse the same request. Bound retained image data per board.
+export function cachedImageLoader(load: (task: Task, url?: string) => Promise<string | null>) {
+  const cache = new Map<string, { promise: Promise<string | null>; bytes: number }>();
+  let bytes = 0;
+  return (task: Task, url?: string): Promise<string | null> => {
+    const key = JSON.stringify([task.id, task.turnId, url]);
+    const existing = cache.get(key);
+    if (existing) { cache.delete(key); cache.set(key, existing); return existing.promise; }
+    const entry = { bytes: 0, promise: Promise.resolve(null) as Promise<string | null> };
+    entry.promise = load(task, url).then(source => {
+      if (!source) { if (cache.get(key) === entry) cache.delete(key); return null; }
+      if (cache.get(key) === entry) {
+        entry.bytes = source.length * 2;
+        bytes += entry.bytes;
+        while (cache.size > 64 || bytes > 32 * 1024 * 1024) {
+          const oldest = cache.keys().next().value!;
+          bytes -= cache.get(oldest)!.bytes;
+          cache.delete(oldest);
+        }
+      }
+      return source;
+    }, error => { if (cache.get(key) === entry) cache.delete(key); throw error; });
+    cache.set(key, entry);
+    while (cache.size > 64) {
+      const oldest = cache.keys().next().value!;
+      bytes -= cache.get(oldest)!.bytes;
+      cache.delete(oldest);
+    }
+    return entry.promise;
+  };
+}

package/src/dashboard/react/presentation.test.tsx

@@ -18,9 +18,40 @@ import { ShimmerText } from "./components/ShimmerText";
 import { GitHubLinks } from "./components/GitHubLinks";
 import { LinkedText } from "./components/LinkedText";
 import { UsagePanel } from "./components/UsagePanel";
+import { TaskCard } from "./components/TaskCard";
+import { TaskBoard } from "./components/TaskBoard";
 
 afterEach(cleanup);
 
+test("Next cards show saved replies and keep diagnostics off the card", () => {
+  const parent = fixtureTask({
+    status: "needs_input", updatedBy: "Local Codex database", replyExcerpt: "**CI passed.** The PR is ready for review.",
+    summary: "Latest turn ended. Chat remains open for input or review.",
+    observed: { archive: false, lastTurnEvent: "completed", lastTurnEventAt: null, recentFileActivity: false, directChildCount: 133 },
+  });
+  const empty = fixtureTask({ id: "empty", title: "Empty", replyExcerpt: null, observed: { archive: false, lastTurnEvent: "inProgress", lastTurnEventAt: null, recentFileActivity: true, directChildCount: 0 } });
+  render(<MantineProvider>
+    <TaskCard task={parent} onOpenCodex={() => {}} onOpenDetail={() => {}} />
+    <TaskBoard tasks={[parent, empty]} completedLimit={5} onMoreCompleted={() => {}} onOpenCodex={() => {}} onOpenDetail={() => {}} />
+  </MantineProvider>);
+  expect(screen.getAllByText("CI passed.")).toHaveLength(2);
+  expect(screen.queryByText(/direct subagent/)).not.toBeInTheDocument();
+  expect(screen.queryByText(/Latest turn ended/)).not.toBeInTheDocument();
+  expect(screen.queryByText("No reply text to show for this turn.")).not.toBeInTheDocument();
+  expect(screen.queryByText("Request")).not.toBeInTheDocument();
+  expect(screen.queryByText("Result")).not.toBeInTheDocument();
+});
+
+test("observed list cards show the prompt while running and the response otherwise", () => {
+  const task = fixtureTask({ status: "working", promptExcerpt: "Current request", replyExcerpt: "Previous result", observed: { archive: false, lastTurnEvent: "inProgress", lastTurnEventAt: null, recentFileActivity: true, directChildCount: 0 } });
+  const { rerender } = render(<MantineProvider><TaskCard task={task} onOpenCodex={() => {}} onOpenDetail={() => {}} /></MantineProvider>);
+  expect(screen.getByText("Current request")).toBeInTheDocument();
+  expect(screen.queryByText("Previous result")).not.toBeInTheDocument();
+  rerender(<MantineProvider><TaskCard task={{ ...task, status: "needs_input" }} onOpenCodex={() => {}} onOpenDetail={() => {}} /></MantineProvider>);
+  expect(screen.getByText("Previous result")).toBeInTheDocument();
+  expect(screen.queryByText("Current request")).not.toBeInTheDocument();
+});
+
 describe("token and working presentation", () => {
   test("keeps pending, calculating, ready cost, and unavailable wording distinct", () => {
     expect(usageView(fixtureTask()).label).toBe("Token usage pending");

package/src/dashboard/react/styles.css

@@ -104,11 +104,11 @@ body {
 }
 .taskchef-board:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
 .taskchef-board-dragging { scroll-snap-type: none; user-select: none; cursor: grabbing; }
-.taskchef-board-lane { min-width: 0; scroll-snap-align: start; cursor: grab; }
+.taskchef-board-lane { min-width: 0; scroll-snap-align: start; cursor: grab; padding: 8px; border-radius: 10px; }
 .taskchef-board-lane-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 13px 6px; margin-bottom: 6px; }
 .taskchef-board-lane-heading h2 { font-size: var(--mantine-font-size-sm); font-weight: 680; }
 .taskchef-board-empty { padding: 12px 4px; }
-.taskchef-board-card { display: flex; flex-direction: column; min-width: 0; cursor: auto; background: light-dark(#fff, #202421); border-color: var(--taskchef-border); box-shadow: 0 1px 2px light-dark(rgb(22 31 25 / 3%), transparent); }
+.taskchef-board-card { display: flex; flex-direction: column; min-width: 0; cursor: grab; background: light-dark(#fff, #202421); border-color: var(--taskchef-border); box-shadow: 0 1px 2px light-dark(rgb(22 31 25 / 3%), transparent); }
 .taskchef-board-card:hover { border-color: light-dark(#bdc8c0, #5b685e); }
 .taskchef-board-project { color: var(--taskchef-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .taskchef-board-title { line-height: 1.3; }
@@ -218,3 +218,127 @@ body {
 @media (prefers-reduced-motion: reduce) {
   .taskchef-refresh-spinning { animation: none; }
 }
+
+/* Markdown replies share the same renderer in the board and Details. */
+.taskchef-markdown { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
+.taskchef-markdown > :first-child { margin-top: 0; }
+.taskchef-markdown > :last-child { margin-bottom: 0; }
+.taskchef-markdown p, .taskchef-markdown ul, .taskchef-markdown ol, .taskchef-markdown blockquote { margin: 0.6em 0; }
+.taskchef-markdown h1, .taskchef-markdown h2, .taskchef-markdown h3, .taskchef-markdown h4, .taskchef-markdown h5, .taskchef-markdown h6 { font-size: 1.05em; margin: 1em 0 0.4em; }
+.taskchef-markdown ul, .taskchef-markdown ol { padding-left: 1.5em; }
+.taskchef-markdown a { color: var(--mantine-color-anchor); }
+.taskchef-markdown code { background: var(--mantine-color-default-hover); border-radius: 3px; padding: 0.1em 0.25em; font-size: 0.9em; }
+.taskchef-markdown pre { overflow-x: auto; max-width: 100%; padding: 0.75em; background: var(--mantine-color-default-hover); border-radius: 6px; white-space: pre; }
+.taskchef-markdown pre code { padding: 0; background: none; }
+.taskchef-markdown blockquote { border-left: 3px solid var(--mantine-color-default-border); padding-left: 0.75em; }
+.taskchef-markdown-table { overflow-x: auto; max-width: 100%; }
+.taskchef-markdown table { border-collapse: collapse; width: 100%; }
+.taskchef-markdown th, .taskchef-markdown td { border: 0; padding: 0.75em 1.5em 0.75em 0; text-align: left; vertical-align: top; overflow-wrap: normal; }
+.taskchef-markdown th:last-child, .taskchef-markdown td:last-child { padding-right: 0; }
+.taskchef-markdown:not(.taskchef-markdown--compact) thead tr { border-bottom: 1px solid var(--mantine-color-default-border); }
+.taskchef-markdown:not(.taskchef-markdown--compact) tbody tr:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--mantine-color-default-border) 55%, transparent); }
+.taskchef-markdown--compact { display: inline; }
+.taskchef-markdown--compact :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre,table,thead,tbody,tr,th,td,.taskchef-markdown-table) { display: inline; margin: 0; padding: 0; border: 0; font-size: inherit; white-space: normal; }
+.taskchef-markdown--compact :is(p,li,pre,blockquote,tr)::after { content: " "; }
+.taskchef-markdown--compact li::before { content: "• "; }
+.taskchef-markdown--compact :is(th,td)::after { content: " | "; }
+
+.taskchef-reply-cover { display: flex; align-items: center; justify-content: center; width: calc(100% + 24px); height: 150px; margin: -12px -12px 10px; padding: 0; border: 0; border-radius: var(--mantine-radius-default) var(--mantine-radius-default) 0 0; overflow: hidden; background: light-dark(#eef1ee, #151a17); color: var(--mantine-color-dimmed); cursor: pointer; flex-shrink: 0; }
+.taskchef-reply-cover img { width: 100%; height: 100%; object-fit: contain; }
+.taskchef-reply-cover span { font-size: var(--mantine-font-size-xs); padding: 12px; }
+.taskchef-reply-cover:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: 2px; }
+
+.taskchef-board-project { display: flex; align-items: center; gap: 5px; }
+.taskchef-board-project > svg { flex-shrink: 0; }
+.taskchef-board-project > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.taskchef-card-stats, .taskchef-card-pr-icons { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.taskchef-card-pr-icons { flex-wrap: wrap; }
+.taskchef-card-pr-icons:empty { display: none; }
+.taskchef-card-status-icon { display: inline-flex; position: relative; align-items: center; justify-content: center; width: 20px; height: 22px; padding: 0; flex-shrink: 0; background: none; border: 0; color: var(--taskchef-muted); cursor: pointer; }
+.taskchef-card-status-icon:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 3px; }
+
+.taskchef-status-tooltip { background: var(--taskchef-surface-muted); color: var(--taskchef-text); border: 1px solid var(--taskchef-border); }
+
+.taskchef-status-row { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.5; }
+.taskchef-status-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: 0 0 18px; color: var(--taskchef-muted); }
+.taskchef-status-row-content { min-width: 0; flex: 1; }
+.taskchef-status-pr-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: inherit; color: inherit; }
+.taskchef-popup-pr-icon { position: relative; display: inline-flex; width: 18px; height: 18px; align-items: center; }
+
+.taskchef-pr-access-warning { position: absolute; right: -6px; top: -3px; color: #eac54f; }
+
+.taskchef-schedule-clock { transform: scaleX(-1); }
+
+.taskchef-pr-access-alert { box-shadow: inset 0 0 0 1px #eac54f; border-radius: 4px; padding: 6px 8px 6px 0; }
+
+.taskchef-board-lane-title { display: flex; align-items: center; gap: 4px; }
+/* Codex desktop's default spinner geometry and animation cadence. */
+.taskchef-running-spinner { flex-shrink: 0; color: var(--mantine-color-dimmed); animation: taskchef-running-spin 2s steps(60, end) infinite; }
+@keyframes taskchef-running-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .taskchef-running-spinner { animation: none; } }
+
+.taskchef-board-card:active { cursor: grabbing; }
+.taskchef-board-lane-drop-target {
+  background: light-dark(rgba(47, 158, 68, 0.08), rgba(81, 207, 102, 0.08));
+  box-shadow: inset 0 0 0 1px light-dark(rgba(47, 158, 68, 0.5), rgba(81, 207, 102, 0.4));
+}
+
+.taskchef-card-turn-usage { font-size: 12px; white-space: nowrap; }
+
+.taskchef-board-title { position: relative; }
+.taskchef-board-title:has(.taskchef-chat-unread-dot) { padding-right: 16px; }
+.taskchef-chat-unread-dot { position: absolute; right: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #2f81f7; }
+
+.taskchef-turn-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: var(--mantine-font-size-sm); }
+.taskchef-turn-prompt { align-self: flex-end; max-width: 85%; min-width: 0; padding: 10px 12px; border-radius: 12px; background: light-dark(#eaf1fc, #1c3d69); color: light-dark(#202c3d, #edf3fc); overflow-wrap: anywhere; }
+.taskchef-prompt-clock { float: left; margin: 3px 6px 0 0; }
+.taskchef-turn-response { width: 100%; min-width: 0; overflow-wrap: anywhere; }
+.taskchef-turn-card { margin: 8px 0; font-size: var(--mantine-font-size-sm); }
+.taskchef-turn-card .taskchef-markdown { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.taskchef-turn-collapsed { line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: calc(3 * 1.55em); overflow: hidden; }
+.taskchef-turn-expand { padding: 0; margin-top: 5px; border: 0; background: transparent; color: inherit; text-decoration: underline; font: inherit; font-size: var(--mantine-font-size-xs); cursor: pointer; }
+.taskchef-turn-expand:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: 2px; }
+
+.taskchef-turn-collapsed .taskchef-markdown :is(p,ul,ol,blockquote) { margin-top: 0; margin-bottom: 0; }
+
+.taskchef-turn-divider { margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--mantine-color-default-border); color: var(--mantine-color-dimmed); font-size: var(--mantine-font-size-xs); }
+.taskchef-response-image { display: block; margin: 16px 0; }
+.taskchef-image-thumbnail { display: block; padding: 0; border: 1px solid var(--mantine-color-default-border); border-radius: 8px; background: transparent; overflow: hidden; cursor: zoom-in; max-width: 100%; }
+.taskchef-image-thumbnail img { display: block; max-width: 100%; width: auto; max-height: 160px; object-fit: contain; }
+.taskchef-image-thumbnail:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: 3px; }
+.taskchef-image-lightbox img { display: block; max-width: calc(100vw - 64px); max-height: calc(100dvh - 140px); object-fit: contain; }
+
+.taskchef-prompt-images { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
+.taskchef-prompt-images .taskchef-response-image { margin:0; max-width:100%; }
+.taskchef-prompt-images .taskchef-image-thumbnail img { max-height:120px; }
+
+.taskchef-turn-prompt .taskchef-markdown p:empty { display:none; }
+
+.taskchef-annotation-link { color: var(--mantine-color-anchor); font: inherit; padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
+.taskchef-annotation-popup { font-size: var(--mantine-font-size-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; text-align: left; }
+.taskchef-annotation-label { color: var(--mantine-color-dimmed); margin-top: 8px; margin-bottom: 4px; }
+.taskchef-annotation-label:first-child { margin-top: 0; }
+
+.taskchef-image-placeholder { display: inline-block; width: 180px; height: 120px; max-width: 100%; border-radius: 8px; background: var(--mantine-color-default-hover); }
+.taskchef-queued-prompts { margin-top: 16px; }
+.taskchef-queued-heading { font-size: 12px; color: var(--mantine-color-dimmed); margin-bottom: 8px; }
+.taskchef-queued-prompts > ol { list-style: none; padding: 0; margin: 0; }
+.taskchef-queued-prompts > ol > li { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid var(--mantine-color-default-border); padding: 10px 0; }
+.taskchef-queued-prompts.is-compact { margin-top: 8px; }
+.taskchef-queued-prompts.is-compact > ol > li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; }
+.taskchef-queued-prompts.is-compact > ol > li > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.taskchef-queued-prompts.is-compact .taskchef-markdown { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.taskchef-queued-prompts.is-compact .taskchef-reply-cover { flex: 0 0 28px; width: 28px; height: 22px; min-height: 22px; margin: 0; border-radius: 3px; }
+.taskchef-queued-prompts.is-compact .taskchef-reply-cover span { font-size: 0; }
+
+.taskchef-prompt-images .taskchef-image-thumbnail { width: 180px; height: 120px; display: flex; align-items: center; justify-content: center; }
+.taskchef-prompt-images .taskchef-image-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
+
+.taskchef-queued-prompts.is-compact .taskchef-markdown * { white-space: nowrap; }
+
+.taskchef-pending-questions { margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--mantine-color-default-border); border-bottom: 1px solid var(--mantine-color-default-border); }
+.taskchef-pending-questions ol { padding-left: 24px; margin: 8px 0 0; font-size: var(--mantine-font-size-sm); }
+.taskchef-pending-questions li { padding: 4px 0; white-space: pre-wrap; }
+
+.taskchef-queue-icon { flex: 0 0 16px; color: var(--mantine-color-dimmed); margin-top: 2px; }
+.taskchef-queue-content { flex: 1; min-width: 0; }