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>

1 files changed, 0 insertions, 516 deletions

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 "";
-}