feat(directives): strict orchestration flow + sidebar overhaul + task page rewritestrict-orchestration

End-to-end rewrite addressing the issues from the user's UX review.
The system now feels like a daemon-orchestration tool: lock a contract
and the orchestrator just goes; PR raised → auto-ship → reopen for
amendments. The sidebar tree shows real entities only (no duplicates,
no inline action buttons polluting the file list), and every entity
gets a right-click context menu. Task page matches the old /exec
layout (diff on the left, feed + composer on the right).

## Backend — strict lifecycle (the orchestrator-never-spawned bug)

Root cause: `phase_planning()` gates on `directive.status='active'`, but
`start_contract()` only flipped the contract row — the parent directive
stayed in whatever state it was. So locking a contract did nothing
visible.

Fix: contract lifecycle now drives directive status in the same
transaction.

  start_contract   → if contract becomes active, flip directive
                     draft|paused|idle|inactive → active
  pause_contract   → after promote, if no active contract left,
                     directive → paused
  complete_contract→ after promote, if no active left, directive →
                     inactive (also fires on auto-ship from PR detect)
  unlock_contract  → if was active and no active left, directive →
                     paused
  reopen_contract  → NEW. shipped → active. Directive → active,
                     orchestrator_task_id/pr_url/pr_branch cleared so
                     the reconciler spawns a fresh planner. The
                     planner reads get_latest_merged_revision and
                     frames the new plan as an amendment.

handlers::directive_documents lifts state.kick_directive_reconciler()
into run_contract_transition so every successful transition wakes the
reconciler immediately (no 15s wait).

handlers::directives `update_directive` (PR-detection branch) calls
`complete_contract(active_contract_id, pr_url, pr_branch)` instead of
`set_directive_inactive`. The contract auto-ships; the directive
follows via the sync above. No more manual "Mark complete" click.

POST /api/v1/contracts/{id}/reopen added + wired through openapi.

Spawn task names dropped the directive-title prefix that looked
redundant in the sidebar:
  "Plan: <title>"      → "orchestrator"
  "Re-plan: <title>"   → "orchestrator (re-plan)"
  "PR: <title>"        → "completion"
  "Update PR: <title>" → "completion (update)"

## Frontend — sidebar

* De-dupe: DocumentTasksFolder filters tasks[] to exclude any task
  whose id already appears in steps[].taskId. Single row per task,
  single highlight on click.
* Generic SidebarContextMenu (new) replaces the directive-only
  DirectiveContextMenu (deleted). Per-entity item arrays built at the
  page level — directive, contract, step, task each have their own
  contextual actions.
* Right-click works on every sidebar entity now (was directive-only).
* `+ New document` / `+ New ephemeral task` inline buttons removed.
  Reachable via the directive folder right-click OR the hover-only
  `+` button on the directive folder row.
* ContractHeader: dropped "Mark complete" button (auto-fires on PR).
  Added "Reopen for amendment" button when contract is shipped.

## Frontend — task page rewrite

TaskPage.tsx replaces DocumentTaskStream.tsx (deleted). Two-column
layout matches the old /exec page that the user preferred:

  ┌────────────────────────┬──────────────────────────────────┐
  │  Changed files (~30%)  │  Transcript feed (scrollable)    │
  │  ──────────────────    │  ──────────────────────          │
  │  src/foo.rs            │  [user] do thing                 │
  │  src/bar.rs            │  [tool] Read foo.rs              │
  │                        │                                  │
  │  Diff (selected file)  │                                  │
  │                        ├──────────────────────────────────┤
  │                        │  Composer (sticky bottom)        │
  └────────────────────────┴──────────────────────────────────┘

Diff comes from getTaskDiff(); parseDiff + DiffFileView exported from
OverlayDiffViewer for reuse (no duplication). Diff auto-refreshes
when the task transitions to a terminal state. Transcript styling +
sticky composer keep the parts the user liked. "Open in task page"
button removed — the right pane IS the task page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

3 files changed, 651 insertions, 767 deletions

diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
deleted file mode 100644
index eda7e7f..0000000
--- a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { DirectiveSummary } from "../../lib/api";
-
-interface DirectiveContextMenuProps {
-  x: number;
-  y: number;
-  directive: DirectiveSummary;
-  onClose: () => void;
-  onStart: () => void;
-  onPause: () => void;
-  onArchive: () => void;
-  onDelete: () => void;
-  onGoToPR: () => void;
-  /**
-   * Reset the contract to a fresh empty draft (clears goal + pr_url, status
-   * back to 'draft'). Past revisions stay as history. Optional so the legacy
-   * tabular UI doesn't have to wire it up.
-   */
-  onNewDraft?: () => void;
-  /** Trigger a fresh PR creation from the current contract state. */
-  onCreatePR?: () => void;
-  /** Manually advance the DAG (find newly-ready steps). */
-  onAdvance?: () => void;
-  /** Run the cleanup task to prune merged/stale steps. */
-  onCleanup?: () => void;
-  /** Pick up linked orders (queue them as new steps). */
-  onPickUpOrders?: () => void;
-}
-
-export function DirectiveContextMenu({
-  x,
-  y,
-  directive,
-  onClose,
-  onStart,
-  onPause,
-  onArchive,
-  onDelete,
-  onGoToPR,
-  onNewDraft,
-  onCreatePR,
-  onAdvance,
-  onCleanup,
-  onPickUpOrders,
-}: DirectiveContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onClose]);
-
-  // Adjust position if menu would overflow viewport
-  useEffect(() => {
-    if (menuRef.current) {
-      const rect = menuRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      if (rect.right > viewportWidth) {
-        menuRef.current.style.left = `${x - rect.width}px`;
-      }
-      if (rect.bottom > viewportHeight) {
-        menuRef.current.style.top = `${y - rect.height}px`;
-      }
-    }
-  }, [x, y]);
-
-  const menuItemClass =
-    "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";
-  const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";
-
-  const showStart = directive.status === "draft" || directive.status === "paused" || directive.status === "idle";
-  const showPause = directive.status === "active";
-  const showArchive = directive.status !== "archived";
-  const showGoToPR = !!directive.prUrl;
-  // "New draft" appears once the contract is inactive (its iteration has
-  // shipped) — that's the explicit affordance for starting the next cycle
-  // on a clean slate while keeping prior revisions as history.
-  const showNewDraft = !!onNewDraft && directive.status === "inactive";
-
-  return (
-    <div
-      ref={menuRef}
-      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
-      style={{ left: x, top: y }}
-    >
-      {/* Header showing directive title */}
-      <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]">
-        {directive.title}
-      </div>
-
-      {/* New draft — the canonical action on an inactive (shipped) contract. */}
-      {showNewDraft && (
-        <>
-          <button
-            className={menuItemClass}
-            onClick={() => {
-              onNewDraft?.();
-              onClose();
-            }}
-          >
-            <span className="text-emerald-300">＋</span>
-            New draft
-          </button>
-          <div className={dividerClass} />
-        </>
-      )}
-
-      {/* Status actions */}
-      {showStart && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onStart();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">▶</span>
-          Start
-        </button>
-      )}
-
-      {showPause && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onPause();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">❚❚</span>
-          Pause
-        </button>
-      )}
-
-      {showArchive && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onArchive();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">▣</span>
-          Archive
-        </button>
-      )}
-
-      {/* Orchestration actions — Advance / Pick up orders / Cleanup. */}
-      {(onAdvance || onPickUpOrders || onCleanup) && (
-        <div className={dividerClass} />
-      )}
-      {onAdvance && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onAdvance();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">»</span>
-          Advance DAG
-        </button>
-      )}
-      {onPickUpOrders && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onPickUpOrders();
-            onClose();
-          }}
-        >
-          <span className="text-[#c084fc]">◆</span>
-          Plan orders
-        </button>
-      )}
-      {onCleanup && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onCleanup();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">⎚</span>
-          Clean up
-        </button>
-      )}
-
-      {/* PR actions — Create / Update / Go to PR. */}
-      {(onCreatePR || showGoToPR) && <div className={dividerClass} />}
-      {onCreatePR && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onCreatePR();
-            onClose();
-          }}
-        >
-          <span className="text-emerald-300">↗</span>
-          {directive.prUrl ? "Update PR" : "Create PR"}
-        </button>
-      )}
-      {showGoToPR && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onGoToPR();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">↗</span>
-          Go to PR
-        </button>
-      )}
-
-      <div className={dividerClass} />
-
-      {/* Delete action */}
-      <button
-        className={`${menuItemClass} text-red-400 hover:bg-red-400/10`}
-        onClick={() => {
-          onDelete();
-          onClose();
-        }}
-      >
-        <span className="text-red-400">✕</span>
-        Delete
-      </button>
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/directives/DocumentTaskStream.tsx b/makima/frontend/src/components/directives/DocumentTaskStream.tsx
deleted file mode 100644
index b718ae4..0000000
--- a/makima/frontend/src/components/directives/DocumentTaskStream.tsx
+++ /dev/null
@@ -1,516 +0,0 @@
-/**
- * DocumentTaskStream — renders a running task's output as a flowing document
- * (assistant prose, tool blocks) instead of the boxy log style of TaskOutput.
- *
- * Key differences from TaskOutput:
- *   - Document typography (serif-ish paragraphs, not monospace logs).
- *   - Interleaved with subtle marginalia for tool calls and results.
- *   - Sticky comment composer at the bottom that's always in view.
- *   - Header strip with explicit Stop / Send / Open-in-task-page buttons so
- *     primary task controls don't require a right-click discovery step.
- *   - Module-level cache of historical entries per taskId so re-selecting a
- *     task you've already viewed renders instantly while a fresh fetch
- *     refreshes in the background.
- */
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router";
-import { SimpleMarkdown } from "../SimpleMarkdown";
-import {
-  useTaskSubscription,
-  type TaskOutputEvent,
-} from "../../hooks/useTaskSubscription";
-import { getTaskOutput, sendTaskMessage, stopTask } from "../../lib/api";
-
-interface DocumentTaskStreamProps {
-  taskId: string;
-  /** Human label used as the document header (e.g. "orchestrator", step name) */
-  label: string;
-  /**
-   * When this task is ephemeral (spawned via the directive's "+ New task"
-   * action) AND has reached a terminal state, surface a "Merge to base"
-   * affordance that navigates the user to the standalone task page where
-   * the existing merge UI handles the actual merge / conflict flow.
-   *
-   * Step-spawned tasks have their own merge path (the directive's PR), so
-   * this affordance is intentionally off by default.
-   */
-  ephemeral?: boolean;
-  /** Current status of the task; drives whether merge button is enabled. */
-  status?: string;
-}
-
-// =============================================================================
-// Module-level cache for historical task entries.
-//
-// Switching between tasks you've already viewed used to re-fire
-// getTaskOutput and show "Loading transcript…" for the duration of the
-// network round-trip. We now keep the entries cached per taskId; on
-// re-selection we render the cache immediately and refetch in the
-// background. The WS subscription continues to handle live deltas.
-// =============================================================================
-const entriesCache = new Map<string, TaskOutputEvent[]>();
-
-export function DocumentTaskStream({
-  taskId,
-  label,
-  ephemeral,
-  status,
-}: DocumentTaskStreamProps) {
-  const navigate = useNavigate();
-  const [entries, setEntries] = useState<TaskOutputEvent[]>(
-    () => entriesCache.get(taskId) ?? [],
-  );
-  const [loading, setLoading] = useState(!entriesCache.has(taskId));
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [comment, setComment] = useState("");
-  const [sending, setSending] = useState(false);
-  const [sendError, setSendError] = useState<string | null>(null);
-  const [stopping, setStopping] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const composerRef = useRef<HTMLDivElement>(null);
-  // autoScroll lives in a ref so the scroll handler reads the latest value
-  // synchronously without re-creating the effect.
-  const autoScrollRef = useRef(true);
-  const [showResumeScroll, setShowResumeScroll] = useState(false);
-
-  // Load historical output when the selected task changes. Render the cache
-  // immediately if we have it; refetch in the background regardless.
-  useEffect(() => {
-    let cancelled = false;
-    const cached = entriesCache.get(taskId);
-    if (cached) {
-      setEntries(cached);
-      setLoading(false);
-    } else {
-      setEntries([]);
-      setLoading(true);
-    }
-    setIsStreaming(false);
-
-    getTaskOutput(taskId)
-      .then((res) => {
-        if (cancelled) return;
-        const mapped: TaskOutputEvent[] = res.entries.map((e) => ({
-          taskId: e.taskId,
-          messageType: e.messageType,
-          content: e.content,
-          toolName: e.toolName,
-          toolInput: e.toolInput,
-          isError: e.isError,
-          costUsd: e.costUsd,
-          durationMs: e.durationMs,
-          isPartial: false,
-        }));
-        entriesCache.set(taskId, mapped);
-        setEntries(mapped);
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        // eslint-disable-next-line no-console
-        console.error("Failed to load task output history:", err);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [taskId]);
-
-  const handleOutput = useCallback(
-    (event: TaskOutputEvent) => {
-      if (event.isPartial) return;
-      setEntries((prev) => {
-        const next = [...prev, event];
-        entriesCache.set(taskId, next);
-        return next;
-      });
-      setIsStreaming(true);
-    },
-    [taskId],
-  );
-
-  const handleUpdate = useCallback((event: { status: string }) => {
-    if (
-      event.status === "completed" ||
-      event.status === "failed" ||
-      event.status === "cancelled" ||
-      event.status === "interrupted" ||
-      event.status === "merged" ||
-      event.status === "done"
-    ) {
-      setIsStreaming(false);
-    } else if (event.status === "running") {
-      setIsStreaming(true);
-    }
-  }, []);
-
-  useTaskSubscription({
-    taskId,
-    subscribeOutput: true,
-    onOutput: handleOutput,
-    onUpdate: handleUpdate,
-  });
-
-  // Auto-scroll while at bottom. The previous version only flipped autoScroll
-  // off and never resumed; now a scroll back into the bottom 80px reactivates
-  // it so a brief read-up doesn't permanently freeze the stream at the top.
-  useEffect(() => {
-    if (autoScrollRef.current && containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [entries]);
-
-  // After loading the initial transcript, snap to the bottom unconditionally
-  // so users see the latest output, not the start.
-  useEffect(() => {
-    if (!loading && containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-      autoScrollRef.current = true;
-      setShowResumeScroll(false);
-    }
-  }, [loading, taskId]);
-
-  const handleScroll = useCallback(() => {
-    if (!containerRef.current) return;
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const atBottom = distanceFromBottom < 80;
-    autoScrollRef.current = atBottom;
-    setShowResumeScroll(!atBottom);
-  }, []);
-
-  const submitComment = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      const trimmed = comment.trim();
-      if (!trimmed || sending) return;
-      setSending(true);
-      setSendError(null);
-      // Show the comment immediately as a user-input entry.
-      setEntries((prev) => {
-        const next: TaskOutputEvent[] = [
-          ...prev,
-          {
-            taskId,
-            messageType: "user_input",
-            content: trimmed,
-            isPartial: false,
-          },
-        ];
-        entriesCache.set(taskId, next);
-        return next;
-      });
-      try {
-        await sendTaskMessage(taskId, trimmed);
-        setComment("");
-      } catch (err) {
-        setSendError(
-          err instanceof Error ? err.message : "Failed to send comment",
-        );
-        window.setTimeout(() => setSendError(null), 5000);
-      } finally {
-        setSending(false);
-      }
-    },
-    [comment, sending, taskId],
-  );
-
-  const handleStop = useCallback(async () => {
-    if (stopping || !isStreaming) return;
-    if (!window.confirm("Stop this task? It will be marked failed.")) return;
-    setStopping(true);
-    try {
-      await stopTask(taskId);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to stop task", err);
-    } finally {
-      setStopping(false);
-    }
-  }, [taskId, stopping, isStreaming]);
-
-  const focusComposer = useCallback(() => {
-    const input = composerRef.current?.querySelector("textarea");
-    input?.focus();
-  }, []);
-
-  const resumeScroll = useCallback(() => {
-    if (!containerRef.current) return;
-    containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    autoScrollRef.current = true;
-    setShowResumeScroll(false);
-  }, []);
-
-  return (
-    <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628] relative">
-      {/* Action header strip — explicit Stop / Send / Open-in-task-page so
-          users don't have to right-click to discover task controls. */}
-      <div className="shrink-0 flex items-center gap-2 px-6 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)] bg-[#091428]">
-        <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
-          Task actions
-        </span>
-        <button
-          type="button"
-          onClick={focusComposer}
-          className="ml-auto px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400"
-        >
-          Send (⌘↵)
-        </button>
-        <button
-          type="button"
-          onClick={handleStop}
-          disabled={!isStreaming || stopping}
-          className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-amber-300 border border-amber-600/60 hover:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          {stopping ? "Stopping…" : "Stop"}
-        </button>
-
-        {/* Manual merge affordance — visible only on ephemeral tasks that
-            have reached a terminal state. Navigates to the standalone task
-            page where the existing mesh_merge UI drives the real merge /
-            conflict resolution flow. The user explicitly asked for this to
-            be a manual button press for safety. */}
-        {ephemeral && isTerminalStatus(status) && (
-          <button
-            type="button"
-            onClick={() => {
-              const ok = window.confirm(
-                "Merge this ephemeral task into the base branch? You'll be taken to the task page where the merge runs and any conflicts are resolved.",
-              );
-              if (!ok) return;
-              navigate(`/exec/${taskId}#merge`);
-            }}
-            title="Manual merge — opens the merge UI on the task page"
-            className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400"
-          >
-            Merge to base ↗
-          </button>
-        )}
-
-        <button
-          type="button"
-          onClick={() => navigate(`/exec/${taskId}`)}
-          className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] border border-[rgba(117,170,252,0.35)] hover:border-[#75aafc]"
-        >
-          Open in task page
-        </button>
-      </div>
-
-      {/* Document body */}
-      <div
-        ref={containerRef}
-        onScroll={handleScroll}
-        className="flex-1 overflow-y-auto"
-      >
-        <div className="max-w-3xl mx-auto px-8 py-10 pb-32 text-[#dbe7ff]">
-          <div className="flex items-center gap-3 mb-1">
-            <h1 className="text-[24px] font-medium text-white tracking-tight">
-              {label}
-            </h1>
-            {isStreaming && (
-              <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-400/10 border border-green-400/30 text-green-400 font-mono text-[10px] uppercase">
-                <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
-                Live
-              </span>
-            )}
-          </div>
-          <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide mb-8">
-            Live transcript — comments below are sent to the task as input.
-          </p>
-
-          {loading && entries.length === 0 ? (
-            <p className="text-[#556677] font-mono text-xs italic">
-              Loading transcript…
-            </p>
-          ) : entries.length === 0 ? (
-            <p className="text-[#556677] font-mono text-xs italic">
-              {isStreaming ? "Waiting for output…" : "No output yet."}
-            </p>
-          ) : (
-            <div className="space-y-4">
-              {entries.map((entry, idx) => (
-                <DocumentEntry key={idx} entry={entry} />
-              ))}
-              {isStreaming && (
-                <span className="inline-block w-2 h-4 bg-[#9bc3ff] animate-pulse align-baseline" />
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* "Resume auto-scroll" floating chip when the user has scrolled up. */}
-      {showResumeScroll && (
-        <button
-          type="button"
-          onClick={resumeScroll}
-          className="absolute bottom-32 right-6 z-10 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] bg-[#091428] border border-[rgba(117,170,252,0.4)] hover:border-[#75aafc] shadow-lg"
-        >
-          ↓ Jump to latest
-        </button>
-      )}
-
-      {/* Sticky comment composer — always pinned to the viewport bottom so
-          users can interact with the task no matter where they've scrolled. */}
-      <div
-        ref={composerRef}
-        className="absolute bottom-0 left-0 right-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]/95 backdrop-blur"
-      >
-        {sendError && (
-          <div className="px-6 py-1 bg-red-900/20 text-red-400 text-xs font-mono">
-            {sendError}
-          </div>
-        )}
-        <form
-          onSubmit={submitComment}
-          className="max-w-3xl mx-auto px-8 py-3 flex items-start gap-3"
-        >
-          <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide pt-2 shrink-0">
-            Comment
-          </span>
-          <textarea
-            value={comment}
-            onChange={(e) => setComment(e.target.value)}
-            onKeyDown={(e) => {
-              // ⌘/Ctrl-Enter submits.
-              if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                void submitComment(e as unknown as React.FormEvent);
-              }
-            }}
-            placeholder={
-              isStreaming
-                ? "Add a comment to interrupt and redirect…"
-                : "Task is not streaming — comments will queue if accepted."
-            }
-            rows={2}
-            disabled={sending}
-            className="flex-1 bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none"
-          />
-          <button
-            type="submit"
-            disabled={sending || !comment.trim()}
-            className="px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
-          >
-            {sending ? "Sending…" : "Send"}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Entry rendering — document-style, not log-style.
-// ---------------------------------------------------------------------------
-
-function DocumentEntry({ entry }: { entry: TaskOutputEvent }) {
-  switch (entry.messageType) {
-    case "user_input":
-      return (
-        <blockquote className="border-l-2 border-cyan-400/60 pl-4 py-1 italic text-cyan-200">
-          <span className="not-italic text-[10px] font-mono text-cyan-400 uppercase tracking-wide block mb-1">
-            You
-          </span>
-          {entry.content}
-        </blockquote>
-      );
-
-    case "assistant":
-      return (
-        <div className="leading-relaxed text-[14px]">
-          <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
-        </div>
-      );
-
-    case "system":
-      return (
-        <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
-          {entry.content}
-        </p>
-      );
-
-    case "tool_use":
-      return (
-        <p className="text-[11px] font-mono text-[#7788aa] flex items-center gap-2">
-          <span className="text-yellow-500">·</span>
-          <span className="text-[#75aafc]">{entry.toolName || "tool"}</span>
-          {firstLineOfInput(entry.toolInput) && (
-            <span className="text-[#445566] truncate">
-              {firstLineOfInput(entry.toolInput)}
-            </span>
-          )}
-        </p>
-      );
-
-    case "tool_result":
-      if (!entry.content) return null;
-      return (
-        <p className="text-[11px] font-mono pl-4">
-          <span className={entry.isError ? "text-red-400" : "text-emerald-400"}>
-            {entry.isError ? "✗" : "→"}
-          </span>{" "}
-          <span className="text-[#7788aa]">
-            {entry.content.split("\n")[0]}
-            {entry.content.includes("\n") && "…"}
-          </span>
-        </p>
-      );
-
-    case "result":
-      return (
-        <div className="border-t border-[rgba(117,170,252,0.15)] pt-3 mt-6">
-          <p className="text-[10px] font-mono text-emerald-400 uppercase tracking-wide mb-2">
-            Result
-          </p>
-          <div className="leading-relaxed text-[13px]">
-            <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
-          </div>
-          {(entry.costUsd !== undefined || entry.durationMs !== undefined) && (
-            <p className="text-[10px] font-mono text-[#556677] mt-2">
-              {entry.durationMs !== undefined &&
-                `Duration: ${(entry.durationMs / 1000).toFixed(1)}s`}
-              {entry.costUsd !== undefined && entry.durationMs !== undefined && " · "}
-              {entry.costUsd !== undefined &&
-                `Cost: $${entry.costUsd.toFixed(4)}`}
-            </p>
-          )}
-        </div>
-      );
-
-    case "error":
-      return (
-        <p className="border-l-2 border-red-400/60 pl-4 py-1 text-red-300 text-[13px]">
-          {entry.content}
-        </p>
-      );
-
-    default:
-      // Fall back to a quiet rendering for unknown message types so users
-      // still see the data, just inconspicuously.
-      if (!entry.content) return null;
-      return (
-        <p className="text-[11px] font-mono text-[#556677]">
-          {entry.content}
-        </p>
-      );
-  }
-}
-
-/** Terminal task statuses where the merge button is meaningful. */
-function isTerminalStatus(status?: string): boolean {
-  if (!status) return false;
-  return ["done", "completed", "merged"].includes(status);
-}
-
-function firstLineOfInput(input?: Record<string, unknown>): string {
-  if (!input) return "";
-  // Common shapes — show the most informative single value.
-  for (const key of ["command", "file_path", "path", "url", "pattern", "query"]) {
-    const v = input[key];
-    if (typeof v === "string" && v.length > 0) {
-      return v.split("\n")[0].slice(0, 96);
-    }
-  }
-  return "";
-}
diff --git a/makima/frontend/src/components/directives/TaskPage.tsx b/makima/frontend/src/components/directives/TaskPage.tsx
new file mode 100644
index 0000000..41b4418
--- /dev/null
+++ b/makima/frontend/src/components/directives/TaskPage.tsx
@@ -0,0 +1,651 @@
+/**
+ * TaskPage — the right-pane view for a selected task in document mode.
+ *
+ * Layout (replaces the old single-column DocumentTaskStream):
+ *
+ *   ┌───────────────────────────────────────────────────────────┐
+ *   │  Header: title · status · branch · Stop                   │
+ *   ├────────────────────────┬──────────────────────────────────┤
+ *   │ Changed files (~30%)   │  Transcript feed (scrollable)    │
+ *   │ src/foo.rs             │  [user] do thing                 │
+ *   │ src/bar.rs             │  [tool] Read foo.rs              │
+ *   │ (selected file diff)   │                                  │
+ *   │ + added                │                                  │
+ *   │ - removed              │                                  │
+ *   │                        ├──────────────────────────────────┤
+ *   │                        │  Composer (sticky bottom)        │
+ *   └────────────────────────┴──────────────────────────────────┘
+ *
+ * Diff data comes from getTaskDiff(); we parse it with parseDiff (reused
+ * from OverlayDiffViewer) so we don't duplicate the parser. The file
+ * list on the left is the parsed file paths; selecting one filters the
+ * diff render to that single file. Refresh button re-fetches on demand;
+ * by default the diff loads once on mount + after each task status
+ * change so the user sees fresh changes as soon as the daemon commits.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SimpleMarkdown } from "../SimpleMarkdown";
+import {
+  useTaskSubscription,
+  type TaskOutputEvent,
+} from "../../hooks/useTaskSubscription";
+import { getTaskOutput, getTaskDiff, sendTaskMessage, stopTask } from "../../lib/api";
+import { parseDiff, DiffFileView, type DiffFile } from "../mesh/OverlayDiffViewer";
+
+interface TaskPageProps {
+  taskId: string;
+  /** Human label for the task header (e.g. "orchestrator", step name). */
+  label: string;
+  /** True for tasks spawned via the directive's `+ New ephemeral task`
+   *  action (no backing step). Drives the optional "Merge to base"
+   *  affordance — step-spawned tasks merge via the directive's PR. */
+  ephemeral?: boolean;
+  /** Current task status — drives whether merge button is enabled. */
+  status?: string;
+}
+
+// Module-level caches so navigation between tasks is instant on re-visit.
+const entriesCache = new Map<string, TaskOutputEvent[]>();
+const diffCache = new Map<string, string>();
+
+export function TaskPage({ taskId, label, ephemeral, status }: TaskPageProps) {
+  // ---- Transcript state (mirrors the old DocumentTaskStream) ----
+  const [entries, setEntries] = useState<TaskOutputEvent[]>(
+    () => entriesCache.get(taskId) ?? [],
+  );
+  const [loading, setLoading] = useState(!entriesCache.has(taskId));
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [comment, setComment] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
+  const [stopping, setStopping] = useState(false);
+  const transcriptRef = useRef<HTMLDivElement>(null);
+  const composerRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+  const [showResumeScroll, setShowResumeScroll] = useState(false);
+
+  // ---- Diff state ----
+  const [diffText, setDiffText] = useState<string>(() => diffCache.get(taskId) ?? "");
+  const [diffLoading, setDiffLoading] = useState(false);
+  const [diffError, setDiffError] = useState<string | null>(null);
+  const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
+
+  // Reset both panes when the task id changes.
+  useEffect(() => {
+    setSelectedFilePath(null);
+    setCollapsedFiles(new Set());
+    setDiffText(diffCache.get(taskId) ?? "");
+  }, [taskId]);
+
+  // ---- Load historical transcript on task change. ----
+  useEffect(() => {
+    let cancelled = false;
+    const cached = entriesCache.get(taskId);
+    if (cached) {
+      setEntries(cached);
+      setLoading(false);
+    } else {
+      setEntries([]);
+      setLoading(true);
+    }
+    setIsStreaming(false);
+
+    getTaskOutput(taskId)
+      .then((res) => {
+        if (cancelled) return;
+        const mapped: TaskOutputEvent[] = res.entries.map((e) => ({
+          taskId: e.taskId,
+          messageType: e.messageType,
+          content: e.content,
+          toolName: e.toolName,
+          toolInput: e.toolInput,
+          isError: e.isError,
+          costUsd: e.costUsd,
+          durationMs: e.durationMs,
+          isPartial: false,
+        }));
+        entriesCache.set(taskId, mapped);
+        setEntries(mapped);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        // eslint-disable-next-line no-console
+        console.error("Failed to load task output history:", err);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [taskId]);
+
+  // ---- Load diff on task change + after each task status update. ----
+  const refreshDiff = useCallback(async () => {
+    setDiffLoading(true);
+    setDiffError(null);
+    try {
+      const res = await getTaskDiff(taskId);
+      if (res.success && res.diff !== null) {
+        setDiffText(res.diff);
+        diffCache.set(taskId, res.diff);
+      } else if (res.error) {
+        setDiffError(res.error);
+      } else {
+        setDiffText("");
+        diffCache.set(taskId, "");
+      }
+    } catch (e) {
+      setDiffError(e instanceof Error ? e.message : "Failed to load diff");
+    } finally {
+      setDiffLoading(false);
+    }
+  }, [taskId]);
+
+  useEffect(() => {
+    void refreshDiff();
+  }, [refreshDiff]);
+
+  // ---- Live subscription. ----
+  const handleOutput = useCallback(
+    (event: TaskOutputEvent) => {
+      if (event.isPartial) return;
+      setEntries((prev) => {
+        const next = [...prev, event];
+        entriesCache.set(taskId, next);
+        return next;
+      });
+      setIsStreaming(true);
+    },
+    [taskId],
+  );
+
+  const handleUpdate = useCallback(
+    (event: { status: string }) => {
+      const terminal = [
+        "completed",
+        "failed",
+        "cancelled",
+        "interrupted",
+        "merged",
+        "done",
+      ];
+      if (terminal.includes(event.status)) {
+        setIsStreaming(false);
+        // Daemon may have written final commits — refresh the diff.
+        void refreshDiff();
+      } else if (event.status === "running") {
+        setIsStreaming(true);
+      }
+    },
+    [refreshDiff],
+  );
+
+  useTaskSubscription({
+    taskId,
+    subscribeOutput: true,
+    onOutput: handleOutput,
+    onUpdate: handleUpdate,
+  });
+
+  // ---- Auto-scroll (transcript pane). ----
+  useEffect(() => {
+    if (autoScrollRef.current && transcriptRef.current) {
+      transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
+    }
+  }, [entries]);
+
+  useEffect(() => {
+    if (!loading && transcriptRef.current) {
+      transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
+      autoScrollRef.current = true;
+      setShowResumeScroll(false);
+    }
+  }, [loading, taskId]);
+
+  const handleScroll = useCallback(() => {
+    if (!transcriptRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = transcriptRef.current;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    const atBottom = distanceFromBottom < 80;
+    autoScrollRef.current = atBottom;
+    setShowResumeScroll(!atBottom);
+  }, []);
+
+  const resumeScroll = useCallback(() => {
+    if (!transcriptRef.current) return;
+    transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
+    autoScrollRef.current = true;
+    setShowResumeScroll(false);
+  }, []);
+
+  // ---- Composer + stop. ----
+  const submitComment = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      const trimmed = comment.trim();
+      if (!trimmed || sending) return;
+      setSending(true);
+      setSendError(null);
+      setEntries((prev) => {
+        const next: TaskOutputEvent[] = [
+          ...prev,
+          { taskId, messageType: "user_input", content: trimmed, isPartial: false },
+        ];
+        entriesCache.set(taskId, next);
+        return next;
+      });
+      try {
+        await sendTaskMessage(taskId, trimmed);
+        setComment("");
+      } catch (err) {
+        setSendError(err instanceof Error ? err.message : "Failed to send comment");
+        window.setTimeout(() => setSendError(null), 5000);
+      } finally {
+        setSending(false);
+      }
+    },
+    [comment, sending, taskId],
+  );
+
+  const handleStop = useCallback(async () => {
+    if (stopping || !isStreaming) return;
+    if (!window.confirm("Stop this task? It will be marked failed.")) return;
+    setStopping(true);
+    try {
+      await stopTask(taskId);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to stop task", err);
+    } finally {
+      setStopping(false);
+    }
+  }, [taskId, stopping, isStreaming]);
+
+  const focusComposer = useCallback(() => {
+    const input = composerRef.current?.querySelector("textarea");
+    input?.focus();
+  }, []);
+
+  // ---- Parse diff once, derive file list. ----
+  const parsedFiles = useMemo(() => parseDiff(diffText), [diffText]);
+
+  // Default selection: first file in the parsed list.
+  useEffect(() => {
+    if (!selectedFilePath && parsedFiles.length > 0) {
+      setSelectedFilePath(parsedFiles[0].path);
+    }
+  }, [parsedFiles, selectedFilePath]);
+
+  const visibleFiles: DiffFile[] = useMemo(() => {
+    if (!selectedFilePath) return parsedFiles;
+    const match = parsedFiles.find((f) => f.path === selectedFilePath);
+    return match ? [match] : parsedFiles;
+  }, [parsedFiles, selectedFilePath]);
+
+  const toggleFile = (path: string) => {
+    setCollapsedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628]">
+      {/* Header strip — title + live indicator + actions. */}
+      <div className="shrink-0 flex items-center gap-3 px-6 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)] bg-[#091428]">
+        <h1 className="text-[14px] font-medium text-white tracking-tight">
+          {label}
+        </h1>
+        {isStreaming && (
+          <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-400/10 border border-green-400/30 text-green-400 font-mono text-[10px] uppercase">
+            <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+            Live
+          </span>
+        )}
+        {status && (
+          <span className="font-mono text-[10px] uppercase tracking-wide text-[#7788aa]">
+            {status}
+          </span>
+        )}
+        <div className="ml-auto flex items-center gap-2">
+          <button
+            type="button"
+            onClick={focusComposer}
+            className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400"
+          >
+            Send (⌘↵)
+          </button>
+          <button
+            type="button"
+            onClick={handleStop}
+            disabled={!isStreaming || stopping}
+            className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-amber-300 border border-amber-600/60 hover:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {stopping ? "Stopping…" : "Stop"}
+          </button>
+          {ephemeral && isTerminalStatus(status) && (
+            <button
+              type="button"
+              onClick={() => {
+                const ok = window.confirm(
+                  "Merge this ephemeral task into the base branch? You'll be taken to the standalone task page where the merge runs.",
+                );
+                if (!ok) return;
+                window.open(`/exec/${taskId}#merge`, "_blank");
+              }}
+              title="Manual merge — opens the merge UI on the standalone task page"
+              className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400"
+            >
+              Merge to base ↗
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Two-column body. */}
+      <div className="flex-1 flex min-h-0 overflow-hidden">
+        {/* Left: changed files + diff. */}
+        <div className="w-[40%] min-w-[320px] max-w-[640px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] flex flex-col bg-[#0a1628] overflow-hidden">
+          <div className="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-dashed border-[rgba(117,170,252,0.15)]">
+            <span className="text-[10px] font-mono uppercase tracking-wide text-[#7788aa]">
+              Changed files
+            </span>
+            <span className="text-[10px] font-mono text-[#556677]">
+              {parsedFiles.length}
+            </span>
+            <button
+              type="button"
+              onClick={() => void refreshDiff()}
+              className="ml-auto text-[10px] font-mono text-[#9bc3ff] hover:text-white"
+              title="Refresh diff"
+            >
+              ↻
+            </button>
+          </div>
+          {/* File list (top half of left pane). */}
+          <div className="overflow-y-auto max-h-[40%] border-b border-dashed border-[rgba(117,170,252,0.15)]">
+            {parsedFiles.length === 0 ? (
+              <div className="px-3 py-3 font-mono text-[10px] italic text-[#556677]">
+                {diffLoading
+                  ? "Loading diff…"
+                  : diffError
+                  ? diffError
+                  : "No changes yet"}
+              </div>
+            ) : (
+              parsedFiles.map((f) => (
+                <button
+                  key={f.path}
+                  type="button"
+                  onClick={() => setSelectedFilePath(f.path)}
+                  className={`w-full text-left flex items-center gap-2 px-3 py-1 font-mono text-[11px] ${
+                    selectedFilePath === f.path
+                      ? "bg-[rgba(117,170,252,0.12)] text-white"
+                      : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)]"
+                  }`}
+                >
+                  <span className={fileStatusClass(f.status)}>
+                    {fileStatusInitial(f.status)}
+                  </span>
+                  <span className="truncate flex-1">{f.path}</span>
+                  <span className="font-mono text-[9px]">
+                    {f.additions > 0 && (
+                      <span className="text-green-400 mr-1">+{f.additions}</span>
+                    )}
+                    {f.deletions > 0 && (
+                      <span className="text-red-400">-{f.deletions}</span>
+                    )}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+          {/* Diff content (bottom of left pane). */}
+          <div className="flex-1 overflow-y-auto p-2">
+            {visibleFiles.length === 0 ? (
+              <div className="px-2 py-3 font-mono text-[10px] italic text-[#556677]">
+                Select a file to view its diff.
+              </div>
+            ) : (
+              visibleFiles.map((file) => (
+                <DiffFileView
+                  key={file.path}
+                  file={file}
+                  collapsed={collapsedFiles.has(file.path)}
+                  onToggle={() => toggleFile(file.path)}
+                />
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Right: transcript + sticky composer. */}
+        <div className="flex-1 flex flex-col min-h-0 overflow-hidden relative">
+          <div
+            ref={transcriptRef}
+            onScroll={handleScroll}
+            className="flex-1 overflow-y-auto"
+          >
+            <div className="max-w-3xl mx-auto px-6 py-6 pb-32 text-[#dbe7ff]">
+              {loading && entries.length === 0 ? (
+                <p className="text-[#556677] font-mono text-xs italic">
+                  Loading transcript…
+                </p>
+              ) : entries.length === 0 ? (
+                <p className="text-[#556677] font-mono text-xs italic">
+                  {isStreaming ? "Waiting for output…" : "No output yet."}
+                </p>
+              ) : (
+                <div className="space-y-4">
+                  {entries.map((entry, idx) => (
+                    <FeedEntry key={idx} entry={entry} />
+                  ))}
+                  {isStreaming && (
+                    <span className="inline-block w-2 h-4 bg-[#9bc3ff] animate-pulse align-baseline" />
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {showResumeScroll && (
+            <button
+              type="button"
+              onClick={resumeScroll}
+              className="absolute bottom-32 right-6 z-10 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] bg-[#091428] border border-[rgba(117,170,252,0.4)] hover:border-[#75aafc] shadow-lg"
+            >
+              ↓ Jump to latest
+            </button>
+          )}
+
+          <div
+            ref={composerRef}
+            className="absolute bottom-0 left-0 right-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]/95 backdrop-blur"
+          >
+            {sendError && (
+              <div className="px-6 py-1 bg-red-900/20 text-red-400 text-xs font-mono">
+                {sendError}
+              </div>
+            )}
+            <form
+              onSubmit={submitComment}
+              className="max-w-3xl mx-auto px-6 py-3 flex items-start gap-3"
+            >
+              <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide pt-2 shrink-0">
+                Comment
+              </span>
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                onKeyDown={(e) => {
+                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                    void submitComment(e as unknown as React.FormEvent);
+                  }
+                }}
+                placeholder={
+                  isStreaming
+                    ? "Add a comment to interrupt and redirect…"
+                    : "Task is not streaming — comments will queue if accepted."
+                }
+                rows={2}
+                disabled={sending}
+                className="flex-1 bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none"
+              />
+              <button
+                type="submit"
+                disabled={sending || !comment.trim()}
+                className="px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+              >
+                {sending ? "Sending…" : "Send"}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Feed entry rendering — document-style, not log-style. Mirrors the old
+// DocumentTaskStream's DocumentEntry exactly (the user liked that part).
+// ---------------------------------------------------------------------------
+
+function FeedEntry({ entry }: { entry: TaskOutputEvent }) {
+  switch (entry.messageType) {
+    case "user_input":
+      return (
+        <blockquote className="border-l-2 border-cyan-400/60 pl-4 py-1 italic text-cyan-200">
+          <span className="not-italic text-[10px] font-mono text-cyan-400 uppercase tracking-wide block mb-1">
+            You
+          </span>
+          {entry.content}
+        </blockquote>
+      );
+
+    case "assistant":
+      return (
+        <div className="leading-relaxed text-[14px]">
+          <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
+        </div>
+      );
+
+    case "system":
+      return (
+        <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
+          {entry.content}
+        </p>
+      );
+
+    case "tool_use":
+      return (
+        <p className="text-[11px] font-mono text-[#7788aa] flex items-center gap-2">
+          <span className="text-yellow-500">·</span>
+          <span className="text-[#75aafc]">{entry.toolName || "tool"}</span>
+          {firstLineOfInput(entry.toolInput) && (
+            <span className="text-[#445566] truncate">
+              {firstLineOfInput(entry.toolInput)}
+            </span>
+          )}
+        </p>
+      );
+
+    case "tool_result":
+      if (!entry.content) return null;
+      return (
+        <p className="text-[11px] font-mono pl-4">
+          <span className={entry.isError ? "text-red-400" : "text-emerald-400"}>
+            {entry.isError ? "✗" : "→"}
+          </span>{" "}
+          <span className="text-[#7788aa]">
+            {entry.content.split("\n")[0]}
+            {entry.content.includes("\n") && "…"}
+          </span>
+        </p>
+      );
+
+    case "result":
+      return (
+        <div className="border-t border-[rgba(117,170,252,0.15)] pt-3 mt-6">
+          <p className="text-[10px] font-mono text-emerald-400 uppercase tracking-wide mb-2">
+            Result
+          </p>
+          <div className="leading-relaxed text-[13px]">
+            <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" />
+          </div>
+          {(entry.costUsd !== undefined || entry.durationMs !== undefined) && (
+            <p className="text-[10px] font-mono text-[#556677] mt-2">
+              {entry.durationMs !== undefined &&
+                `Duration: ${(entry.durationMs / 1000).toFixed(1)}s`}
+              {entry.costUsd !== undefined && entry.durationMs !== undefined && " · "}
+              {entry.costUsd !== undefined &&
+                `Cost: $${entry.costUsd.toFixed(4)}`}
+            </p>
+          )}
+        </div>
+      );
+
+    case "error":
+      return (
+        <p className="border-l-2 border-red-400/60 pl-4 py-1 text-red-300 text-[13px]">
+          {entry.content}
+        </p>
+      );
+
+    default:
+      if (!entry.content) return null;
+      return (
+        <p className="text-[11px] font-mono text-[#556677]">
+          {entry.content}
+        </p>
+      );
+  }
+}
+
+function isTerminalStatus(status?: string): boolean {
+  if (!status) return false;
+  return ["done", "completed", "merged"].includes(status);
+}
+
+function firstLineOfInput(input?: Record<string, unknown>): string {
+  if (!input) return "";
+  for (const key of ["command", "file_path", "path", "url", "pattern", "query"]) {
+    const v = input[key];
+    if (typeof v === "string" && v.length > 0) {
+      return v.split("\n")[0].slice(0, 96);
+    }
+  }
+  return "";
+}
+
+function fileStatusClass(status: DiffFile["status"]): string {
+  switch (status) {
+    case "added":
+      return "text-green-400 bg-green-400/10 px-1 py-0.5 text-[9px] font-bold";
+    case "deleted":
+      return "text-red-400 bg-red-400/10 px-1 py-0.5 text-[9px] font-bold";
+    case "renamed":
+      return "text-purple-400 bg-purple-400/10 px-1 py-0.5 text-[9px] font-bold";
+    case "modified":
+    default:
+      return "text-yellow-400 bg-yellow-400/10 px-1 py-0.5 text-[9px] font-bold";
+  }
+}
+
+function fileStatusInitial(status: DiffFile["status"]): string {
+  switch (status) {
+    case "added":
+      return "A";
+    case "deleted":
+      return "D";
+    case "renamed":
+      return "R";
+    case "modified":
+    default:
+      return "M";
+  }
+}