From e11759447b1ac00becfb1e979e488f7f9c9cf478 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Fri, 1 May 2026 23:56:51 +0100
Subject: chore(cleanup): Phase 5 contracts removal + tmp directive + 30-day
 expiry + scroll fix (#118)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sweeping cleanup across the surface and the wire. Net: -14k LOC of legacy
contracts code, plus the tmp/scroll/UX fixes the user asked for.

## Sidebar/editor independent scroll
Replace `height: calc(100vh - 80px)` (which assumed an 80px masthead and
quietly clipped or pushed the whole page below the fold when the masthead
was taller) with `h-screen + overflow-hidden` on the page root and proper
`flex-1 min-h-0` sizing on `<main>`. Sidebar and editor pane now manage
their own scroll independently; the page itself never scrolls.

Same fix in /tmp/:taskId.

## tmp directive — real backing for orphans/ephemerals

New migration `20260501100000_tmp_directive_and_clear_orphans.sql`:
  * Adds `directives.is_tmp` BOOLEAN NOT NULL DEFAULT false.
  * Partial unique index `(owner_id) WHERE is_tmp` — at most ONE tmp
    directive per owner.
  * Hard-deletes every existing orphan task (`directive_id IS NULL`).
    Per the user spec: "ALSO there are TOO MANY old tasks in tmp, we
    need to remove all of them as well."

New repository helpers:
  * `get_or_create_tmp_directive(pool, owner_id) -> Directive`
    INSERT ON CONFLICT DO NOTHING + fallback SELECT, race-safe.
  * `list_all_tmp_directives` — drives the expiry sweep.
  * `delete_expired_tmp_tasks(tmp_directive_id) -> u64`.
  * `list_tmp_tasks_for_owner` (replaces `list_orphan_tasks_for_owner`).

`mesh::create_task`: every top-level task must have a directive. If a
caller doesn't supply `directive_id` and isn't a subtask, attach to the
caller's tmp directive (auto-creating it on first use).

`list_directives_for_owner` filters out `is_tmp=true` so the scratchpad
directive doesn't pollute the contract list — surfaced via the sidebar's
`tmp/` folder instead.

## 30-day expiry on tmp tasks

New `phase_tmp_expiry` in the directive reconciler. Throttled to once per
hour: enumerates every tmp directive, calls `delete_expired_tmp_tasks`,
logs the count. The actual delete is `WHERE created_at < NOW() - INTERVAL
'30 days'` and is fast on the existing index. Subtasks die via FK cascade.

## Phase 5 — contracts removed

### Frontend
Deleted entire `/contracts` surface:
  * routes: `contracts.tsx`, `contract-file.tsx`
  * components/contracts: ContractList, ContractDetail, ContractCliInput,
    ContractContextMenu, CommandModePanel, PhaseBadge, PhaseHint,
    PhaseDeliverablesPanel, PhaseProgressBar, QuickActionButtons,
    RepositoryPanel, TaskDerivationPreview
  * (Kept `PhaseConfirmationModal` — used outside the contracts surface
    by `TaskOutput` and `PhaseConfirmationNotification`.)
  * Routes deregistered from `main.tsx`; nav entry removed from
    `NavStrip`.

### Backend handlers
Deleted: `contracts.rs` (2.4k LOC), `contract_chat.rs` (3.2k LOC),
`contract_daemon.rs` (~940 LOC), `contract_discuss.rs` (~590 LOC),
`transcript_analysis.rs` (~690 LOC). All `/api/v1/contracts/*` routes
deregistered. OpenAPI entries dropped. Module declarations removed from
`server/handlers/mod.rs`.

### CLI
Removed `makima contract` and `makima supervisor` subcommands. Deleted
`daemon/cli/contract.rs` and `daemon/cli/supervisor.rs`. Bin dispatch
trimmed (~377 LOC).

### Orchestrator
Removed the contract-spawn path from `phase_execution`
(`spawn_step_contract` and its caller). `directive_steps.contract_type`
now logs a warning and falls through to standalone-task spawn. Column
itself stays — old data still reads, just no longer triggers a
contract+supervisor spawn.

### TUI
`Action::PerformCreateContract` is now a no-op that surfaces a status
message: "Contracts have been removed. Use directives instead." The TUI
form is dead code pending a wider refresh.

## Out of scope (deliberately left)

* Contracts DB tables (`contracts`, `contract_repositories`,
  `contract_chat_history`, `contract_events`, `contract_templates`) are
  retained for historical data + because some peripheral code still
  joins to them in TaskSummary queries.
* `mesh_supervisor` handlers are retained — they aren't only used by
  contracts (some mesh-level supervisor behaviour persists), and the
  cross-cutting cleanup is bigger than this PR.
* `directive_steps.contract_type` column itself isn't dropped; just no
  longer functional.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 makima/frontend/src/components/NavStrip.tsx        |   9 +-
 .../src/components/contracts/CommandModePanel.tsx  | 272 ------
 .../src/components/contracts/ContractCliInput.tsx  | 974 ---------------------
 .../components/contracts/ContractContextMenu.tsx   | 160 ----
 .../src/components/contracts/ContractDetail.tsx    | 810 -----------------
 .../src/components/contracts/ContractList.tsx      | 223 -----
 .../src/components/contracts/PhaseBadge.tsx        |  54 --
 .../contracts/PhaseDeliverablesPanel.tsx           | 339 -------
 .../src/components/contracts/PhaseHint.tsx         |  90 --
 .../src/components/contracts/PhaseProgressBar.tsx  | 149 ----
 .../components/contracts/QuickActionButtons.tsx    | 217 -----
 .../src/components/contracts/RepositoryPanel.tsx   | 325 -------
 .../components/contracts/TaskDerivationPreview.tsx | 221 -----
 makima/frontend/src/main.tsx                       |  26 -
 makima/frontend/src/routes/contract-file.tsx       | 659 --------------
 makima/frontend/src/routes/contracts.tsx           | 885 -------------------
 makima/frontend/src/routes/document-directives.tsx |  16 +-
 makima/frontend/src/routes/tmp.tsx                 |   9 +-
 18 files changed, 16 insertions(+), 5422 deletions(-)
 delete mode 100644 makima/frontend/src/components/contracts/CommandModePanel.tsx
 delete mode 100644 makima/frontend/src/components/contracts/ContractCliInput.tsx
 delete mode 100644 makima/frontend/src/components/contracts/ContractContextMenu.tsx
 delete mode 100644 makima/frontend/src/components/contracts/ContractDetail.tsx
 delete mode 100644 makima/frontend/src/components/contracts/ContractList.tsx
 delete mode 100644 makima/frontend/src/components/contracts/PhaseBadge.tsx
 delete mode 100644 makima/frontend/src/components/contracts/PhaseDeliverablesPanel.tsx
 delete mode 100644 makima/frontend/src/components/contracts/PhaseHint.tsx
 delete mode 100644 makima/frontend/src/components/contracts/PhaseProgressBar.tsx
 delete mode 100644 makima/frontend/src/components/contracts/QuickActionButtons.tsx
 delete mode 100644 makima/frontend/src/components/contracts/RepositoryPanel.tsx
 delete mode 100644 makima/frontend/src/components/contracts/TaskDerivationPreview.tsx
 delete mode 100644 makima/frontend/src/routes/contract-file.tsx
 delete mode 100644 makima/frontend/src/routes/contracts.tsx

(limited to 'makima/frontend')

diff --git a/makima/frontend/src/components/NavStrip.tsx b/makima/frontend/src/components/NavStrip.tsx
index 6fe4ba9..7c5dad1 100644
--- a/makima/frontend/src/components/NavStrip.tsx
+++ b/makima/frontend/src/components/NavStrip.tsx
@@ -20,12 +20,9 @@ const NAV_LINKS: NavLink[] = [
   { label: "Listen", href: "/listen" },
   { label: "Directives", href: "/directives", requiresAuth: true },
   { label: "Orders", href: "/orders", requiresAuth: true },
-  {
-    label: "Contracts",
-    href: "/contracts",
-    requiresAuth: true,
-    hideInDocumentMode: true,
-  },
+  // /contracts has been removed in Phase 5; the legacy nav entry is gone.
+  // /exec is still reachable for the standalone task page but hidden when
+  // document mode is on (the unified surface routes through /directives).
   {
     label: "Exec",
     href: "/exec",
diff --git a/makima/frontend/src/components/contracts/CommandModePanel.tsx b/makima/frontend/src/components/contracts/CommandModePanel.tsx
deleted file mode 100644
index b39b309..0000000
--- a/makima/frontend/src/components/contracts/CommandModePanel.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import { useState, useCallback } from "react";
-import { useNavigate } from "react-router";
-import type { ContractWithRelations } from "../../lib/api";
-import {
-  getSupervisorStatus,
-  startSupervisor,
-  stopSupervisor,
-  resumeSupervisor,
-  updateContract,
-  type SupervisorStatus,
-} from "../../lib/api";
-
-interface CommandModePanelProps {
-  contract: ContractWithRelations;
-  onUpdate: () => void;
-}
-
-const statusConfig: Record<
-  SupervisorStatus["status"],
-  { label: string; color: string; bgColor: string }
-> = {
-  not_configured: {
-    label: "Not Configured",
-    color: "text-[#555]",
-    bgColor: "bg-[#555]/10",
-  },
-  pending: {
-    label: "Ready",
-    color: "text-yellow-400",
-    bgColor: "bg-yellow-400/10",
-  },
-  starting: {
-    label: "Starting...",
-    color: "text-blue-400",
-    bgColor: "bg-blue-400/10",
-  },
-  running: {
-    label: "Running",
-    color: "text-green-400",
-    bgColor: "bg-green-400/10",
-  },
-  paused: {
-    label: "Paused",
-    color: "text-orange-400",
-    bgColor: "bg-orange-400/10",
-  },
-  done: {
-    label: "Completed",
-    color: "text-blue-400",
-    bgColor: "bg-blue-400/10",
-  },
-  failed: {
-    label: "Failed",
-    color: "text-red-400",
-    bgColor: "bg-red-400/10",
-  },
-};
-
-export function CommandModePanel({ contract, onUpdate }: CommandModePanelProps) {
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const supervisorStatus = getSupervisorStatus(contract);
-
-  const handleGoToSupervisor = useCallback(() => {
-    if (supervisorStatus.supervisorTaskId) {
-      navigate(`/exec/${supervisorStatus.supervisorTaskId}`);
-    }
-  }, [supervisorStatus.supervisorTaskId, navigate]);
-  const config = statusConfig[supervisorStatus.status];
-
-  const handleStart = useCallback(async () => {
-    if (!supervisorStatus.supervisorTaskId) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      await startSupervisor(supervisorStatus.supervisorTaskId);
-      onUpdate();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to start command mode");
-    } finally {
-      setLoading(false);
-    }
-  }, [supervisorStatus.supervisorTaskId, onUpdate]);
-
-  const handleStop = useCallback(async () => {
-    if (!supervisorStatus.supervisorTaskId) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      await stopSupervisor(supervisorStatus.supervisorTaskId);
-      onUpdate();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to stop command mode");
-    } finally {
-      setLoading(false);
-    }
-  }, [supervisorStatus.supervisorTaskId, onUpdate]);
-
-  const handleResume = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      await resumeSupervisor(contract.id, { resumeMode: "continue" });
-      // After resuming, we need to start the task
-      if (supervisorStatus.supervisorTaskId) {
-        await startSupervisor(supervisorStatus.supervisorTaskId);
-      }
-      onUpdate();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to resume command mode");
-    } finally {
-      setLoading(false);
-    }
-  }, [contract.id, supervisorStatus.supervisorTaskId, onUpdate]);
-
-  const handlePhaseGuardChange = useCallback(async (enabled: boolean) => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      await updateContract(contract.id, {
-        phaseGuard: enabled,
-        version: contract.version,
-      });
-      onUpdate();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to update phase guard setting");
-    } finally {
-      setLoading(false);
-    }
-  }, [contract.id, contract.version, onUpdate]);
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h3 className="font-mono text-xs text-[#75aafc] uppercase">
-          Command Mode
-        </h3>
-        <div className="flex items-center gap-2">
-          {supervisorStatus.supervisorTaskId && (
-            <button
-              onClick={handleGoToSupervisor}
-              className="px-2 py-1 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] hover:bg-[rgba(117,170,252,0.1)] transition-colors flex items-center gap-1"
-            >
-              <span className="text-[#75aafc]">▶</span>
-              Supervisor
-            </button>
-          )}
-          <div
-            className={`px-2 py-1 rounded font-mono text-xs ${config.color} ${config.bgColor}`}
-          >
-            {config.label}
-          </div>
-        </div>
-      </div>
-
-      <p className="font-mono text-xs text-[#555]">
-        {supervisorStatus.status === "not_configured" ? (
-          "This contract does not have a Command Mode supervisor configured."
-        ) : supervisorStatus.status === "running" ? (
-          "Command Mode is actively working on this contract, spawning tasks and managing progress."
-        ) : supervisorStatus.status === "pending" ? (
-          "Command Mode is ready to start. Click 'Enable' to begin autonomous work."
-        ) : supervisorStatus.status === "paused" ? (
-          "Command Mode is paused. Click 'Resume' to continue work."
-        ) : supervisorStatus.status === "failed" ? (
-          "Command Mode encountered an error. You can resume to retry."
-        ) : supervisorStatus.status === "done" ? (
-          "Command Mode has completed its work on this contract."
-        ) : (
-          "Command Mode is initializing..."
-        )}
-      </p>
-
-      {error && (
-        <div className="px-3 py-2 bg-red-500/10 border border-red-400/30 font-mono text-xs text-red-400">
-          {error}
-        </div>
-      )}
-
-      <div className="flex gap-2">
-        {supervisorStatus.canStart && (
-          <button
-            onClick={handleStart}
-            disabled={loading}
-            className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-green-600/20 border border-green-400/50 hover:bg-green-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? "Starting..." : "Enable Command Mode"}
-          </button>
-        )}
-
-        {supervisorStatus.canResume && (
-          <button
-            onClick={handleResume}
-            disabled={loading}
-            className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-blue-600/20 border border-blue-400/50 hover:bg-blue-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? "Resuming..." : "Resume Command Mode"}
-          </button>
-        )}
-
-        {supervisorStatus.canStop && (
-          <button
-            onClick={handleStop}
-            disabled={loading}
-            className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-orange-600/20 border border-orange-400/50 hover:bg-orange-600/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? "Stopping..." : "Pause Command Mode"}
-          </button>
-        )}
-      </div>
-
-      {/* Phase Guard Toggle */}
-      <div className="pt-3 border-t border-dashed border-[rgba(117,170,252,0.2)]">
-        <label className="flex items-start gap-3 cursor-pointer group">
-          <div className="relative mt-0.5">
-            <input
-              type="checkbox"
-              checked={contract.phaseGuard ?? false}
-              onChange={(e) => handlePhaseGuardChange(e.target.checked)}
-              disabled={loading}
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 bg-[rgba(117,170,252,0.1)] border border-[rgba(117,170,252,0.3)] rounded-full peer-checked:bg-[rgba(117,170,252,0.3)] transition-colors peer-disabled:opacity-50" />
-            <div className="absolute left-0.5 top-0.5 w-4 h-4 bg-[#555] rounded-full transition-transform peer-checked:translate-x-4 peer-checked:bg-[#75aafc] peer-disabled:opacity-50" />
-          </div>
-          <div className="flex-1">
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm text-[#dbe7ff] group-hover:text-white transition-colors">
-                Phase Guard
-              </span>
-              {contract.phaseGuard && (
-                <span className="px-1.5 py-0.5 text-[9px] font-mono uppercase bg-yellow-500/20 text-yellow-400 border border-yellow-400/30 rounded">
-                  active
-                </span>
-              )}
-            </div>
-            <div className="font-mono text-xs text-[#555] mt-0.5">
-              Ask for confirmation before advancing to the next phase
-            </div>
-          </div>
-        </label>
-      </div>
-
-      {/* Show running indicator when active */}
-      {supervisorStatus.status === "running" && (
-        <div className="flex items-center gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.2)]">
-          <div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
-          <span className="font-mono text-xs text-green-400">
-            Command Mode is actively working
-          </span>
-        </div>
-      )}
-
-      {supervisorStatus.status === "starting" && (
-        <div className="flex items-center gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.2)]">
-          <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
-          <span className="font-mono text-xs text-blue-400">
-            Initializing command mode...
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/ContractCliInput.tsx b/makima/frontend/src/components/contracts/ContractCliInput.tsx
deleted file mode 100644
index 54d9f3a..0000000
--- a/makima/frontend/src/components/contracts/ContractCliInput.tsx
+++ /dev/null
@@ -1,974 +0,0 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-import {
-  getContractChatHistory,
-  clearContractChatHistory,
-  startTask,
-  sendTaskMessage,
-  type UserQuestion,
-  type ContractWithRelations,
-  type TaskStatus,
-} from "../../lib/api";
-import { SimpleMarkdown } from "../SimpleMarkdown";
-import {
-  QuickActionButtons,
-  type QuickAction,
-} from "./QuickActionButtons";
-import { TaskDerivationPreview, type ParsedTask } from "./TaskDerivationPreview";
-import { useTaskSubscription, type TaskOutputEvent } from "../../hooks/useTaskSubscription";
-
-interface ContractCliInputProps {
-  contractId: string;
-  contract: ContractWithRelations;
-  onUpdate: () => void;
-}
-
-interface Message {
-  id: string;
-  type: "user" | "assistant" | "error" | "question";
-  content: string;
-  toolCalls?: { name: string; success: boolean; message: string }[];
-  questions?: UserQuestion[];
-  quickActions?: QuickAction[];
-}
-
-export function ContractCliInput({ contractId, contract, onUpdate }: ContractCliInputProps) {
-  const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [historyLoading, setHistoryLoading] = useState(true);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [expanded, setExpanded] = useState(false);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [pendingQuestions, setPendingQuestions] = useState<UserQuestion[] | null>(null);
-  const [userAnswers, setUserAnswers] = useState<Map<string, string[]>>(new Map());
-  const [customInputs, setCustomInputs] = useState<Map<string, string>>(new Map());
-
-  // Task derivation state
-  const [parsedTasks, setParsedTasks] = useState<ParsedTask[] | null>(null);
-  const [parsedTaskGroups, setParsedTaskGroups] = useState<string[]>([]);
-  const [parsedTasksFileName, setParsedTasksFileName] = useState<string>("");
-  const [creatingTasks, setCreatingTasks] = useState(false);
-
-  // Supervisor state
-  const [supervisorStarting, setSupervisorStarting] = useState(false);
-  const [supervisorOutput, setSupervisorOutput] = useState<TaskOutputEvent[]>([]);
-  const [supervisorQuestion, setSupervisorQuestion] = useState<{
-    id: string;
-    question: string;
-    options: string[];
-    allowMultiple?: boolean;
-    allowCustom?: boolean;
-  } | null>(null);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const messagesRef = useRef<HTMLDivElement>(null);
-
-  // Find the supervisor task for this contract
-  // First try by supervisorTaskId on the contract, then fall back to isSupervisor flag
-  const supervisorTask = useMemo(() => {
-    // Use contract.supervisorTaskId if available (most reliable)
-    if (contract.supervisorTaskId) {
-      const taskById = contract.tasks.find((t) => t.id === contract.supervisorTaskId);
-      if (taskById) return taskById;
-    }
-    // Fallback to finding by isSupervisor flag
-    return contract.tasks.find((t) => t.isSupervisor);
-  }, [contract.tasks, contract.supervisorTaskId]);
-
-  // Log for debugging
-  useEffect(() => {
-    console.log("Supervisor lookup:", {
-      contractId: contract.id,
-      supervisorTaskId: contract.supervisorTaskId,
-      tasksCount: contract.tasks.length,
-      foundSupervisor: supervisorTask ? { id: supervisorTask.id, status: supervisorTask.status, isSupervisor: supervisorTask.isSupervisor } : null,
-      allTasks: contract.tasks.map(t => ({ id: t.id, name: t.name, isSupervisor: t.isSupervisor }))
-    });
-  }, [contract.id, contract.supervisorTaskId, contract.tasks, supervisorTask]);
-
-  const supervisorTaskId = supervisorTask?.id ?? null;
-  const supervisorStatus = supervisorTask?.status as TaskStatus | undefined;
-  const isSupervisorRunning = supervisorStatus === "running";
-  const isSupervisorPending = supervisorStatus === "pending";
-
-  // Subscribe to supervisor output when it's running
-  const handleSupervisorOutput = useCallback((event: TaskOutputEvent) => {
-    // Check for question pattern in output
-    // Pattern: {"__supervisor_question__": {"id": "...", "question": "...", "options": [...]}}
-    if (!event.isPartial && event.content) {
-      const questionMatch = event.content.match(/\{"__supervisor_question__":\s*(\{[^}]+\})\}/);
-      if (questionMatch) {
-        try {
-          const questionData = JSON.parse(questionMatch[1]);
-          if (questionData.id && questionData.question && questionData.options) {
-            setSupervisorQuestion({
-              id: questionData.id,
-              question: questionData.question,
-              options: questionData.options,
-              allowMultiple: questionData.allowMultiple ?? false,
-              allowCustom: questionData.allowCustom ?? true,
-            });
-            // Don't add this to output since it's a control message
-            return;
-          }
-        } catch {
-          // Not valid JSON, continue as normal output
-        }
-      }
-    }
-
-    setSupervisorOutput((prev) => {
-      // If it's a partial message, update the last message
-      if (event.isPartial && prev.length > 0) {
-        const lastEvent = prev[prev.length - 1];
-        if (lastEvent.messageType === event.messageType && lastEvent.isPartial) {
-          return [...prev.slice(0, -1), { ...event, content: lastEvent.content + event.content }];
-        }
-      }
-      return [...prev, event];
-    });
-  }, []);
-
-  useTaskSubscription({
-    taskId: supervisorTaskId,
-    subscribeOutput: isSupervisorRunning,
-    onOutput: handleSupervisorOutput,
-  });
-
-  // Auto-start supervisor function - starts and waits for it to be running
-  const ensureSupervisorStarted = useCallback(async (): Promise<boolean> => {
-    if (!supervisorTask) {
-      console.warn("No supervisor task found for contract");
-      return false;
-    }
-
-    if (isSupervisorRunning) {
-      return true; // Already running
-    }
-
-    if (isSupervisorPending) {
-      try {
-        setSupervisorStarting(true);
-        await startTask(supervisorTask.id);
-
-        // Poll for the task to be running (up to 10 seconds)
-        for (let i = 0; i < 20; i++) {
-          await new Promise(resolve => setTimeout(resolve, 500));
-          onUpdate(); // Refresh contract to get updated task status
-          // Note: We can't check the new status here directly since state updates are async
-          // The UI will update when onUpdate triggers a re-render
-        }
-
-        // Return true - the caller should check if supervisor is running after this
-        return true;
-      } catch (err) {
-        console.error("Failed to start supervisor:", err);
-        return false;
-      } finally {
-        setSupervisorStarting(false);
-      }
-    }
-
-    // Supervisor exists but is in some other state (paused, done, failed, etc.)
-    // Can still send messages to paused tasks
-    return supervisorStatus === "paused";
-  }, [supervisorTask, isSupervisorRunning, isSupervisorPending, supervisorStatus, onUpdate]);
-
-  // Handle answering supervisor questions
-  const [supervisorAnswers, setSupervisorAnswers] = useState<string[]>([]);
-  const [supervisorCustomInput, setSupervisorCustomInput] = useState("");
-
-  const handleSupervisorOptionToggle = useCallback((option: string) => {
-    setSupervisorAnswers((prev) => {
-      if (supervisorQuestion?.allowMultiple) {
-        if (prev.includes(option)) {
-          return prev.filter((a) => a !== option);
-        }
-        return [...prev, option];
-      }
-      return [option];
-    });
-  }, [supervisorQuestion?.allowMultiple]);
-
-  const handleSubmitSupervisorAnswer = useCallback(async () => {
-    if (!supervisorQuestion || !supervisorTask) return;
-
-    const customAnswer = supervisorCustomInput.trim();
-    const allAnswers = customAnswer
-      ? [...supervisorAnswers, customAnswer]
-      : supervisorAnswers;
-
-    if (allAnswers.length === 0) return;
-
-    // Format answer message for supervisor
-    const answerMessage = `__supervisor_answer__ ${JSON.stringify({
-      id: supervisorQuestion.id,
-      answers: allAnswers,
-    })}`;
-
-    try {
-      await sendTaskMessage(supervisorTask.id, answerMessage);
-
-      // Add user message to chat
-      const userMsgId = Date.now().toString();
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: userMsgId,
-          type: "user",
-          content: `[Answer to: ${supervisorQuestion.question}]\n${allAnswers.join(", ")}`,
-        },
-      ]);
-    } catch (err) {
-      console.error("Failed to send supervisor answer:", err);
-    } finally {
-      setSupervisorQuestion(null);
-      setSupervisorAnswers([]);
-      setSupervisorCustomInput("");
-    }
-  }, [supervisorQuestion, supervisorTask, supervisorAnswers, supervisorCustomInput]);
-
-  const handleCancelSupervisorQuestion = useCallback(() => {
-    setSupervisorQuestion(null);
-    setSupervisorAnswers([]);
-    setSupervisorCustomInput("");
-  }, []);
-
-  // Load chat history on mount
-  useEffect(() => {
-    let mounted = true;
-
-    async function loadHistory() {
-      try {
-        const history = await getContractChatHistory(contractId);
-        if (!mounted) return;
-
-        // Convert saved messages to display messages
-        const displayMessages: Message[] = history.messages.map((msg) => ({
-          id: msg.id,
-          type: msg.role as "user" | "assistant" | "error",
-          content: msg.content,
-          toolCalls: msg.toolCalls as { name: string; success: boolean; message: string }[] | undefined,
-        }));
-
-        setMessages(displayMessages);
-
-        // Auto-expand if there's history
-        if (displayMessages.length > 0) {
-          setExpanded(true);
-        }
-      } catch (err) {
-        console.error("Failed to load contract chat history:", err);
-      } finally {
-        if (mounted) {
-          setHistoryLoading(false);
-        }
-      }
-    }
-
-    loadHistory();
-
-    return () => {
-      mounted = false;
-    };
-  }, [contractId]);
-
-  // Auto-scroll to bottom when messages change
-  useEffect(() => {
-    if (messagesRef.current) {
-      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  // Auto-start supervisor when component mounts if it's pending (but not for completed contracts)
-  useEffect(() => {
-    if (supervisorTask && isSupervisorPending && !supervisorStarting && contract.status !== 'completed') {
-      console.log("Auto-starting supervisor task on mount...");
-      ensureSupervisorStarted().then((started) => {
-        if (started) {
-          console.log("Supervisor started successfully");
-        }
-      });
-    }
-  }, [supervisorTask?.id, contract.status]); // Only run when task ID or contract status changes
-
-  // Convert supervisor output events to messages
-  useEffect(() => {
-    if (supervisorOutput.length === 0) return;
-
-    // Get the latest event
-    const latestEvent = supervisorOutput[supervisorOutput.length - 1];
-
-    // Only add complete messages (not partials) to the message history
-    if (!latestEvent.isPartial && latestEvent.content.trim()) {
-      const msgId = `supervisor-${Date.now()}`;
-      let msgType: "assistant" | "error" = "assistant";
-      let content = latestEvent.content;
-
-      // Format based on message type
-      switch (latestEvent.messageType) {
-        case "assistant":
-          content = latestEvent.content;
-          break;
-        case "tool_use":
-          content = `_Using tool: ${latestEvent.toolName}_`;
-          break;
-        case "tool_result":
-          content = latestEvent.isError
-            ? `Tool error: ${latestEvent.content}`
-            : `Tool result: ${latestEvent.content.slice(0, 200)}${latestEvent.content.length > 200 ? "..." : ""}`;
-          msgType = latestEvent.isError ? "error" : "assistant";
-          break;
-        case "error":
-          msgType = "error";
-          break;
-        case "result":
-          // Final result - show cost info if available
-          if (latestEvent.costUsd) {
-            content = `${latestEvent.content}\n\n_Cost: $${latestEvent.costUsd.toFixed(4)}_`;
-          }
-          break;
-        default:
-          // system, raw, etc.
-          break;
-      }
-
-      setMessages((prev) => {
-        // Don't add duplicate messages
-        if (prev.some((m) => m.content === content)) return prev;
-        return [
-          ...prev,
-          { id: msgId, type: msgType, content },
-        ];
-      });
-    }
-  }, [supervisorOutput]);
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!input.trim() || loading) return;
-
-      const userMessage = input.trim();
-      setInput("");
-      setExpanded(true);
-
-      const userMsgId = Date.now().toString();
-      setMessages((prev) => [
-        ...prev,
-        { id: userMsgId, type: "user", content: userMessage },
-      ]);
-
-      setLoading(true);
-
-      try {
-        // Supervisor is the ONLY way to interact with contracts
-        if (!supervisorTask) {
-          throw new Error("No supervisor task found. Please create a contract with a supervisor.");
-        }
-
-        // Ensure supervisor is started (this will start it if pending)
-        await ensureSupervisorStarted();
-
-        // Send message to supervisor task stdin
-        await sendTaskMessage(supervisorTask.id, userMessage);
-
-        // Response will come through WebSocket subscription
-        // No need for a placeholder message - output will stream in
-      } catch (err) {
-        const errorMsgId = (Date.now() + 1).toString();
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: errorMsgId,
-            type: "error",
-            content: err instanceof Error ? err.message : "An error occurred",
-          },
-        ]);
-      } finally {
-        setLoading(false);
-        inputRef.current?.focus();
-      }
-    },
-    [input, loading, supervisorTask, ensureSupervisorStarted]
-  );
-
-  const handleOptionToggle = useCallback((questionId: string, option: string, allowMultiple: boolean) => {
-    setUserAnswers((prev) => {
-      const newMap = new Map(prev);
-      const currentAnswers = newMap.get(questionId) || [];
-
-      if (allowMultiple) {
-        if (currentAnswers.includes(option)) {
-          newMap.set(questionId, currentAnswers.filter((a) => a !== option));
-        } else {
-          newMap.set(questionId, [...currentAnswers, option]);
-        }
-      } else {
-        newMap.set(questionId, [option]);
-      }
-
-      return newMap;
-    });
-  }, []);
-
-  const handleCustomInputChange = useCallback((questionId: string, value: string) => {
-    setCustomInputs((prev) => {
-      const newMap = new Map(prev);
-      newMap.set(questionId, value);
-      return newMap;
-    });
-  }, []);
-
-  const handleSubmitAnswers = useCallback(async () => {
-    if (!pendingQuestions || loading) return;
-
-    const answers = pendingQuestions.map((q) => {
-      const selectedOptions = userAnswers.get(q.id) || [];
-      const customInput = customInputs.get(q.id)?.trim();
-      const finalAnswers = customInput
-        ? [...selectedOptions, customInput]
-        : selectedOptions;
-
-      return {
-        id: q.id,
-        answers: finalAnswers,
-      };
-    });
-
-    const answerText = answers
-      .map((a) => {
-        const question = pendingQuestions.find((q) => q.id === a.id);
-        return `${question?.question || a.id}: ${a.answers.join(", ")}`;
-      })
-      .join("\n");
-
-    setPendingQuestions(null);
-    setUserAnswers(new Map());
-    setCustomInputs(new Map());
-
-    const userMsgId = Date.now().toString();
-    setMessages((prev) => [
-      ...prev,
-      { id: userMsgId, type: "user", content: `[Answers]\n${answerText}` },
-    ]);
-
-    setLoading(true);
-
-    try {
-      if (!supervisorTask) {
-        throw new Error("No supervisor task found");
-      }
-      await ensureSupervisorStarted();
-      await sendTaskMessage(supervisorTask.id, answerText);
-      // Response will come through WebSocket
-    } catch (err) {
-      const errorMsgId = (Date.now() + 1).toString();
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: errorMsgId,
-          type: "error",
-          content: err instanceof Error ? err.message : "An error occurred",
-        },
-      ]);
-    } finally {
-      setLoading(false);
-    }
-  }, [pendingQuestions, userAnswers, customInputs, loading, supervisorTask, ensureSupervisorStarted]);
-
-  const handleCancelQuestions = useCallback(() => {
-    setPendingQuestions(null);
-    setUserAnswers(new Map());
-    setCustomInputs(new Map());
-  }, []);
-
-  const clearMessages = useCallback(() => {
-    setMessages([]);
-    setPendingQuestions(null);
-    setUserAnswers(new Map());
-    setCustomInputs(new Map());
-    setParsedTasks(null);
-    setParsedTaskGroups([]);
-    setParsedTasksFileName("");
-    setSupervisorOutput([]);
-    setSupervisorQuestion(null);
-    setSupervisorAnswers([]);
-    setSupervisorCustomInput("");
-  }, []);
-
-  // Handle creating tasks from the preview
-  const handleCreateDerivedTasks = useCallback(
-    async (selectedTasks: ParsedTask[]) => {
-      if (selectedTasks.length === 0) {
-        setParsedTasks(null);
-        return;
-      }
-
-      setCreatingTasks(true);
-
-      // Build a message asking the supervisor to create these tasks
-      const taskList = selectedTasks
-        .map((t, i) => `${i + 1}. ${t.name}${t.description ? `: ${t.description}` : ""}`)
-        .join("\n");
-
-      const message = `Create these ${selectedTasks.length} tasks as chained tasks:\n${taskList}`;
-
-      // Add user message
-      const userMsgId = Date.now().toString();
-      setMessages((prev) => [
-        ...prev,
-        { id: userMsgId, type: "user", content: message },
-      ]);
-
-      try {
-        if (!supervisorTask) {
-          throw new Error("No supervisor task found");
-        }
-        await ensureSupervisorStarted();
-        await sendTaskMessage(supervisorTask.id, message);
-        // Response will come through WebSocket
-      } catch (err) {
-        const errorMsgId = (Date.now() + 1).toString();
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: errorMsgId,
-            type: "error",
-            content: err instanceof Error ? err.message : "An error occurred",
-          },
-        ]);
-      } finally {
-        setCreatingTasks(false);
-        setParsedTasks(null);
-        setParsedTaskGroups([]);
-        setParsedTasksFileName("");
-      }
-    },
-    [supervisorTask, ensureSupervisorStarted]
-  );
-
-  const handleCancelTaskDerivation = useCallback(() => {
-    setParsedTasks(null);
-    setParsedTaskGroups([]);
-    setParsedTasksFileName("");
-  }, []);
-
-  const handleQuickAction = useCallback(
-    async (action: QuickAction) => {
-      // Convert the action into a chat message that triggers the appropriate behavior
-      let message = "";
-      switch (action.type) {
-        case "create_file":
-          message = "Create the suggested file from the template.";
-          break;
-        case "create_task":
-          message = "Yes, create the tasks.";
-          break;
-        case "derive_tasks":
-          message = "Show me the tasks to review and create them.";
-          break;
-        case "run_task":
-          message = "Run the next task.";
-          break;
-        case "advance_phase":
-          if (action.data?.phase) {
-            message = `Advance to the ${action.data.phase} phase.`;
-          } else {
-            message = "Advance to the next phase.";
-          }
-          break;
-        case "update_file":
-          message = "Update the file with the task output.";
-          break;
-        default:
-          return;
-      }
-
-      setExpanded(true);
-
-      // Submit the message
-      const userMsgId = Date.now().toString();
-      setMessages((prev) => [
-        ...prev,
-        { id: userMsgId, type: "user", content: message },
-      ]);
-
-      setLoading(true);
-      try {
-        if (!supervisorTask) {
-          throw new Error("No supervisor task found");
-        }
-        await ensureSupervisorStarted();
-        await sendTaskMessage(supervisorTask.id, message);
-        // Response will come through WebSocket
-      } catch (err) {
-        const errorMsgId = (Date.now() + 1).toString();
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: errorMsgId,
-            type: "error",
-            content: err instanceof Error ? err.message : "An error occurred",
-          },
-        ]);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [supervisorTask, ensureSupervisorStarted]
-  );
-
-  return (
-    <div className="border-t border-[rgba(117,170,252,0.35)] bg-[#0d1b2d]">
-      {/* Header bar with supervisor status and toggle */}
-      <div className="px-3 py-2 flex items-center justify-between border-b border-[rgba(117,170,252,0.2)]">
-        <div className="flex items-center gap-3">
-          <span className="font-mono text-[10px] text-[#555] uppercase tracking-wide">
-            Supervisor
-          </span>
-          {supervisorTask && (
-            <span className={`font-mono text-[10px] px-2 py-0.5 border ${
-              isSupervisorRunning
-                ? "text-green-400 border-green-400/30 bg-green-400/10"
-                : isSupervisorPending || supervisorStarting
-                ? "text-yellow-400 border-yellow-400/30 bg-yellow-400/10"
-                : "text-[#555] border-[rgba(117,170,252,0.2)]"
-            }`}>
-              {supervisorStarting ? "Starting..." : isSupervisorRunning ? "Running" : supervisorStatus || "Unknown"}
-            </span>
-          )}
-          {!supervisorTask && (
-            <span className="font-mono text-[10px] text-red-400">
-              No supervisor
-            </span>
-          )}
-        </div>
-        {messages.length > 0 && (
-          <button
-            type="button"
-            onClick={() => setExpanded(!expanded)}
-            className="font-mono text-[10px] text-[#555] hover:text-[#9bc3ff] transition-colors"
-          >
-            {expanded ? "Hide Messages" : `Show Messages (${messages.length})`}
-          </button>
-        )}
-      </div>
-
-      {/* History loading indicator */}
-      {historyLoading && (
-        <div className="px-3 py-2 text-[10px] font-mono text-[#555] flex items-center gap-2 border-b border-[rgba(117,170,252,0.2)]">
-          <span className="animate-pulse">Loading history...</span>
-        </div>
-      )}
-
-      {/* Messages Panel (expandable) */}
-      {expanded && messages.length > 0 && !historyLoading && (
-        <div className="relative border-b border-[rgba(117,170,252,0.2)]">
-          {/* Expand/Collapse button */}
-          <div className="absolute top-2 right-2 z-10 flex gap-1">
-            <button
-              type="button"
-              onClick={() => setFullscreen(!fullscreen)}
-              className="px-2 py-1 font-mono text-[10px] text-[#555] hover:text-[#9bc3ff] bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)] transition-colors"
-              title={fullscreen ? "Collapse" : "Expand"}
-            >
-              {fullscreen ? "▼ Collapse" : "▲ Expand"}
-            </button>
-          </div>
-          <div
-            ref={messagesRef}
-            className={`overflow-y-auto p-3 pr-24 space-y-2 transition-all duration-200 ${
-              fullscreen ? "max-h-[60vh]" : "max-h-48"
-            }`}
-          >
-            {messages.map((msg) => (
-              <div key={msg.id} className="font-mono text-xs">
-                {msg.type === "user" && (
-                  <div className="flex gap-2">
-                    <span className="text-[#9bc3ff]">&gt;</span>
-                    <span className="text-white/80 whitespace-pre-wrap">{msg.content}</span>
-                  </div>
-                )}
-                {(msg.type === "assistant" || msg.type === "question") && (
-                  <div className="pl-4 space-y-1">
-                    <SimpleMarkdown content={msg.content} className="text-[#75aafc]" />
-                    {msg.toolCalls && msg.toolCalls.length > 0 && (
-                      <div className="text-[#555] text-[10px] space-y-0.5">
-                        {msg.toolCalls.map((tc, i) => (
-                          <div key={i}>
-                            <span
-                              className={
-                                tc.success ? "text-green-500" : "text-red-400"
-                              }
-                            >
-                              {tc.success ? "+" : "x"}
-                            </span>{" "}
-                            {tc.name}: {tc.message}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {msg.quickActions && msg.quickActions.length > 0 && (
-                      <QuickActionButtons
-                        actions={msg.quickActions}
-                        onAction={handleQuickAction}
-                        loading={loading}
-                      />
-                    )}
-                  </div>
-                )}
-                {msg.type === "error" && (
-                  <div className="pl-4 text-red-400">{msg.content}</div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Pending Questions UI */}
-      {pendingQuestions && pendingQuestions.length > 0 && (
-        <div className="p-3 border-b border-[rgba(117,170,252,0.2)] space-y-3">
-          <div className="text-[#9bc3ff] font-mono text-xs uppercase tracking-wide">
-            Questions from AI
-          </div>
-          {pendingQuestions.map((q) => (
-            <div key={q.id} className="space-y-2">
-              <div className="text-white/90 font-mono text-sm">{q.question}</div>
-              <div className="flex flex-wrap gap-2">
-                {q.options.map((option) => {
-                  const isSelected = (userAnswers.get(q.id) || []).includes(option);
-                  return (
-                    <button
-                      key={option}
-                      type="button"
-                      onClick={() => handleOptionToggle(q.id, option, q.allowMultiple)}
-                      className={`px-2 py-1 font-mono text-xs border transition-colors ${
-                        isSelected
-                          ? "bg-[#3f6fb3] border-[#75aafc] text-white"
-                          : "bg-transparent border-[rgba(117,170,252,0.25)] text-[#9bc3ff] hover:border-[#3f6fb3]"
-                      }`}
-                    >
-                      {q.allowMultiple && (
-                        <span className="mr-1">{isSelected ? "[x]" : "[ ]"}</span>
-                      )}
-                      {option}
-                    </button>
-                  );
-                })}
-              </div>
-              {q.allowCustom && (
-                <input
-                  type="text"
-                  value={customInputs.get(q.id) || ""}
-                  onChange={(e) => handleCustomInputChange(q.id, e.target.value)}
-                  placeholder="Or type a custom answer..."
-                  className="w-full bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-xs px-2 py-1 outline-none focus:border-[#3f6fb3] placeholder-[#555]"
-                />
-              )}
-            </div>
-          ))}
-          <div className="flex gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleSubmitAnswers}
-              disabled={loading}
-              className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
-            >
-              {loading ? "..." : "Submit Answers"}
-            </button>
-            <button
-              type="button"
-              onClick={handleCancelQuestions}
-              disabled={loading}
-              className="px-3 py-1 font-mono text-xs text-[#555] hover:text-[#9bc3ff] transition-colors"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Supervisor Question UI */}
-      {supervisorQuestion && (
-        <div className="p-3 border-b border-[rgba(117,170,252,0.2)] space-y-3 bg-[rgba(117,170,252,0.05)]">
-          <div className="text-green-400 font-mono text-xs uppercase tracking-wide flex items-center gap-2">
-            <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
-            Question from Supervisor
-          </div>
-          <div className="text-white/90 font-mono text-sm">{supervisorQuestion.question}</div>
-          <div className="flex flex-wrap gap-2">
-            {supervisorQuestion.options.map((option) => {
-              const isSelected = supervisorAnswers.includes(option);
-              return (
-                <button
-                  key={option}
-                  type="button"
-                  onClick={() => handleSupervisorOptionToggle(option)}
-                  className={`px-2 py-1 font-mono text-xs border transition-colors ${
-                    isSelected
-                      ? "bg-green-500/30 border-green-400 text-white"
-                      : "bg-transparent border-[rgba(117,170,252,0.25)] text-[#9bc3ff] hover:border-green-400"
-                  }`}
-                >
-                  {supervisorQuestion.allowMultiple && (
-                    <span className="mr-1">{isSelected ? "[x]" : "[ ]"}</span>
-                  )}
-                  {option}
-                </button>
-              );
-            })}
-          </div>
-          {supervisorQuestion.allowCustom && (
-            <input
-              type="text"
-              value={supervisorCustomInput}
-              onChange={(e) => setSupervisorCustomInput(e.target.value)}
-              placeholder="Or type a custom answer..."
-              className="w-full bg-transparent border border-[rgba(117,170,252,0.25)] text-white font-mono text-xs px-2 py-1 outline-none focus:border-green-400 placeholder-[#555]"
-            />
-          )}
-          <div className="flex gap-2 pt-2">
-            <button
-              type="button"
-              onClick={handleSubmitSupervisorAnswer}
-              disabled={supervisorAnswers.length === 0 && !supervisorCustomInput.trim()}
-              className="px-3 py-1 font-mono text-xs text-green-400 border border-green-400/50 hover:border-green-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
-            >
-              Send Answer
-            </button>
-            <button
-              type="button"
-              onClick={handleCancelSupervisorQuestion}
-              className="px-3 py-1 font-mono text-xs text-[#555] hover:text-[#9bc3ff] transition-colors"
-            >
-              Dismiss
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Contract Context Badge */}
-      <div className="px-3 pt-2 pb-1 flex items-center gap-2 text-[10px] font-mono text-[#555]">
-        <span className="text-[#75aafc]">{contract.phase}</span>
-        <span>|</span>
-        {supervisorTask && (
-          <>
-            <span
-              className={
-                isSupervisorRunning
-                  ? "text-green-400"
-                  : isSupervisorPending
-                  ? "text-yellow-400"
-                  : supervisorStarting
-                  ? "text-cyan-400 animate-pulse"
-                  : "text-[#555]"
-              }
-            >
-              Supervisor: {supervisorStarting ? "starting..." : supervisorTask.status}
-            </span>
-            <span>|</span>
-          </>
-        )}
-        <span>{contract.files.length} files</span>
-        <span>|</span>
-        <span>{contract.tasks.length} tasks</span>
-        <span>|</span>
-        <span>{contract.repositories.length} repos</span>
-        <span>|</span>
-        <button
-          type="button"
-          onClick={() => {
-            const prompt = "Guide me to complete this phase and advance to the next. Analyze my current deliverables, identify what's missing, and suggest specific next steps.";
-            setInput(prompt);
-            // Auto-submit the prompt
-            setTimeout(() => {
-              const form = document.querySelector('form');
-              if (form) form.requestSubmit();
-            }, 0);
-          }}
-          disabled={loading || !!pendingQuestions}
-          className="text-[#75aafc] hover:text-[#9bc3ff] disabled:opacity-50 transition-colors cursor-pointer"
-        >
-          Progress →
-        </button>
-        {messages.length > 0 && (
-          <>
-            <span>|</span>
-            <button
-              type="button"
-              onClick={async () => {
-                if (window.confirm("Clear all chat history for this contract?")) {
-                  try {
-                    await clearContractChatHistory(contractId);
-                    setMessages([]);
-                  } catch (err) {
-                    console.error("Failed to clear history:", err);
-                  }
-                }
-              }}
-              disabled={loading}
-              className="text-[#555] hover:text-red-400 disabled:opacity-50 transition-colors cursor-pointer"
-            >
-              Clear
-            </button>
-          </>
-        )}
-      </div>
-
-      {/* Input Bar */}
-      <form onSubmit={handleSubmit} className="flex items-center gap-2 px-3 pb-3">
-        <span className="text-[#9bc3ff] font-mono text-sm">&gt;</span>
-        <input
-          ref={inputRef}
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder={
-            loading
-              ? "Processing..."
-              : supervisorStarting
-              ? "Starting supervisor..."
-              : supervisorQuestion
-              ? "Answer supervisor question above..."
-              : pendingQuestions
-              ? "Answer questions above first..."
-              : isSupervisorRunning
-              ? "Message supervisor..."
-              : "Create a task, add a file, or ask about the contract..."
-          }
-          disabled={loading || !!pendingQuestions || !!supervisorQuestion}
-          className="flex-1 bg-transparent border-none outline-none font-mono text-sm text-white placeholder-[#555]"
-        />
-        {messages.length > 0 && (
-          <button
-            type="button"
-            onClick={clearMessages}
-            className="text-[#555] hover:text-[#9bc3ff] font-mono text-xs transition-colors"
-          >
-            clear
-          </button>
-        )}
-        <button
-          type="submit"
-          disabled={loading || !input.trim() || !!pendingQuestions || !!supervisorQuestion}
-          className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
-        >
-          {loading ? "..." : "Send"}
-        </button>
-      </form>
-
-      {/* Task Derivation Preview Modal */}
-      {parsedTasks && parsedTasks.length > 0 && (
-        <TaskDerivationPreview
-          tasks={parsedTasks}
-          groups={parsedTaskGroups}
-          fileName={parsedTasksFileName}
-          onCreateTasks={handleCreateDerivedTasks}
-          onCancel={handleCancelTaskDerivation}
-          loading={creatingTasks}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/ContractContextMenu.tsx b/makima/frontend/src/components/contracts/ContractContextMenu.tsx
deleted file mode 100644
index f31beb5..0000000
--- a/makima/frontend/src/components/contracts/ContractContextMenu.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { ContractSummary } from "../../lib/api";
-
-interface ContractContextMenuProps {
-  x: number;
-  y: number;
-  contract: ContractSummary;
-  onClose: () => void;
-  onMarkComplete: () => void;
-  onMarkActive: () => void;
-  onArchive: () => void;
-  onDelete: () => void;
-  onGoToSupervisor: () => void;
-}
-
-export function ContractContextMenu({
-  x,
-  y,
-  contract,
-  onClose,
-  onMarkComplete,
-  onMarkActive,
-  onArchive,
-  onDelete,
-  onGoToSupervisor,
-}: ContractContextMenuProps) {
-  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 showMarkComplete = contract.status !== "completed";
-  const showMarkActive = contract.status !== "active";
-  const showArchive = contract.status !== "archived";
-  const showGoToSupervisor = !!contract.supervisorTaskId;
-
-  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 contract name */}
-      <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]">
-        {contract.name}
-      </div>
-
-      {/* Status actions */}
-      {showMarkComplete && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onMarkComplete();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">✓</span>
-          Mark as Complete
-        </button>
-      )}
-
-      {showMarkActive && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onMarkActive();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">●</span>
-          Mark as Active
-        </button>
-      )}
-
-      {showArchive && (
-        <button
-          className={menuItemClass}
-          onClick={() => {
-            onArchive();
-            onClose();
-          }}
-        >
-          <span className="text-[#75aafc]">▣</span>
-          Archive
-        </button>
-      )}
-
-      {/* Supervisor link */}
-      {showGoToSupervisor && (
-        <>
-          <div className={dividerClass} />
-          <button
-            className={menuItemClass}
-            onClick={() => {
-              onGoToSupervisor();
-              onClose();
-            }}
-          >
-            <span className="text-[#75aafc]">▶</span>
-            Go to Supervisor Task
-          </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/contracts/ContractDetail.tsx b/makima/frontend/src/components/contracts/ContractDetail.tsx
deleted file mode 100644
index 02c129e..0000000
--- a/makima/frontend/src/components/contracts/ContractDetail.tsx
+++ /dev/null
@@ -1,810 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import type {
-  ContractWithRelations,
-  ContractPhase,
-  ContractStatus,
-  ContractRepository,
-  FileSummary,
-  TaskSummary,
-  TemplateSummary,
-} from "../../lib/api";
-import {
-  listTemplates,
-  getTemplate,
-  createFile,
-} from "../../lib/api";
-import { PhaseProgressBar } from "./PhaseProgressBar";
-import { PhaseHint } from "./PhaseHint";
-import { RepositoryPanel } from "./RepositoryPanel";
-import { ContractCliInput } from "./ContractCliInput";
-import { PhaseDeliverablesPanel } from "./PhaseDeliverablesPanel";
-import { CommandModePanel } from "./CommandModePanel";
-import { TaskTree } from "../mesh/TaskTree";
-
-type Tab = "overview" | "repos" | "files" | "tasks";
-
-interface ContractDetailProps {
-  contract: ContractWithRelations;
-  loading: boolean;
-  onBack: () => void;
-  onUpdate: (name: string, description: string) => void;
-  onDelete: () => void;
-  onPhaseChange: (phase: ContractPhase) => void;
-  onStatusChange: (status: ContractStatus) => void;
-  onFileSelect: (id: string) => void;
-  onTaskSelect: (id: string) => void;
-  onTaskCreate: (name: string, plan: string, repositoryUrl?: string) => void;
-  onRefresh: () => void;
-  // Repository callbacks
-  onAddRemoteRepo: (name: string, url: string, isPrimary: boolean) => void;
-  onAddLocalRepo: (name: string, path: string, isPrimary: boolean) => void;
-  onCreateManagedRepo: (name: string, isPrimary: boolean) => void;
-  onDeleteRepo: (repoId: string) => void;
-  onSetRepoPrimary: (repoId: string) => void;
-  // File creation callback for phase deliverables
-  onCreateFileFromTemplate?: (templateId: string, suggestedName: string) => void;
-}
-
-const statusConfig: Record<ContractStatus, { label: string; color: string }> = {
-  active: { label: "Active", color: "text-green-400" },
-  completed: { label: "Completed", color: "text-blue-400" },
-  archived: { label: "Archived", color: "text-[#555]" },
-};
-
-export function ContractDetail({
-  contract,
-  loading,
-  onBack,
-  onUpdate,
-  onDelete,
-  onPhaseChange,
-  onStatusChange,
-  onFileSelect,
-  onTaskSelect,
-  onTaskCreate,
-  onRefresh,
-  onAddRemoteRepo,
-  onAddLocalRepo,
-  onCreateManagedRepo,
-  onDeleteRepo,
-  onSetRepoPrimary,
-  onCreateFileFromTemplate,
-}: ContractDetailProps) {
-  const [activeTab, setActiveTab] = useState<Tab>("overview");
-  const [isEditing, setIsEditing] = useState(false);
-  const [name, setName] = useState(contract.name);
-  const [description, setDescription] = useState(contract.description || "");
-
-  const handleSave = () => {
-    onUpdate(name, description);
-    setIsEditing(false);
-  };
-
-  const handleCancel = () => {
-    setName(contract.name);
-    setDescription(contract.description || "");
-    setIsEditing(false);
-  };
-
-  if (loading) {
-    return (
-      <div className="panel h-full flex items-center justify-center">
-        <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
-      </div>
-    );
-  }
-
-  const tabs: { key: Tab; label: string; count?: number }[] = [
-    { key: "overview", label: "Overview" },
-    { key: "repos", label: "Repositories", count: contract.repositories.length },
-    { key: "files", label: "Files", count: contract.files.length },
-    { key: "tasks", label: "Tasks", count: contract.tasks.length },
-  ];
-
-  return (
-    <div className="panel h-full flex flex-col min-h-0">
-      {/* Header */}
-      <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
-        <div className="flex items-center justify-between mb-3">
-          <button
-            onClick={onBack}
-            className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
-          >
-            &larr; Back to list
-          </button>
-          <div className="flex items-center gap-2">
-            {isEditing ? (
-              <>
-                <button
-                  onClick={handleCancel}
-                  className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors uppercase"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleSave}
-                  className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
-                >
-                  Save
-                </button>
-              </>
-            ) : (
-              <>
-                <button
-                  onClick={() => setIsEditing(true)}
-                  className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] border border-[#0f3c78] hover:border-[#3f6fb3] transition-colors uppercase"
-                >
-                  Edit
-                </button>
-                <button
-                  onClick={onDelete}
-                  className="px-3 py-1.5 font-mono text-xs text-red-400 border border-red-400/30 hover:border-red-400/50 transition-colors uppercase"
-                >
-                  Delete
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-
-        {isEditing ? (
-          <div className="space-y-3">
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
-              placeholder="Contract name"
-            />
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
-              rows={2}
-              placeholder="Description (optional)"
-            />
-          </div>
-        ) : (
-          <>
-            <div className="flex items-center gap-3 mb-2">
-              <h2 className="font-mono text-lg text-[#dbe7ff]">
-                {contract.name}
-              </h2>
-              <span
-                className={`font-mono text-xs uppercase ${
-                  statusConfig[contract.status].color
-                }`}
-              >
-                {statusConfig[contract.status].label}
-              </span>
-              {contract.localOnly && (
-                <span className="px-2 py-0.5 font-mono text-[10px] uppercase text-amber-400 border border-amber-400/30 bg-amber-400/10">
-                  Local-Only
-                </span>
-              )}
-            </div>
-            {contract.description && (
-              <p className="font-mono text-sm text-[#9bc3ff] mb-3">
-                {contract.description}
-              </p>
-            )}
-          </>
-        )}
-
-        {/* Phase progress */}
-        <div className="mt-4 pt-4 border-t border-dashed border-[rgba(117,170,252,0.2)]">
-          <PhaseProgressBar
-            currentPhase={contract.phase}
-            contractType={contract.contractType}
-            onPhaseClick={onPhaseChange}
-          />
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <div className="flex border-b border-[rgba(117,170,252,0.2)]">
-        {tabs.map((tab) => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
-            className={`
-              px-4 py-2 font-mono text-xs uppercase tracking-wider transition-colors
-              ${
-                activeTab === tab.key
-                  ? "text-[#dbe7ff] border-b-2 border-[#75aafc]"
-                  : "text-[#555] hover:text-[#9bc3ff]"
-              }
-            `}
-          >
-            {tab.label}
-            {tab.count !== undefined && tab.count > 0 && (
-              <span className="ml-1 text-[10px]">({tab.count})</span>
-            )}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab content */}
-      <div className="flex-1 overflow-y-auto p-4 min-h-0">
-        {activeTab === "overview" && (
-          <OverviewTab
-            contract={contract}
-            onStatusChange={onStatusChange}
-            onPhaseChange={onPhaseChange}
-            onCreateFile={onCreateFileFromTemplate}
-            onRefresh={onRefresh}
-          />
-        )}
-
-        {activeTab === "repos" && (
-          <RepositoryPanel
-            repositories={contract.repositories}
-            onAddRemote={onAddRemoteRepo}
-            onAddLocal={onAddLocalRepo}
-            onCreateManaged={onCreateManagedRepo}
-            onDelete={onDeleteRepo}
-            onSetPrimary={onSetRepoPrimary}
-          />
-        )}
-
-        {activeTab === "files" && (
-          <FilesTab
-            files={contract.files}
-            contractId={contract.id}
-            contractPhase={contract.phase}
-            onSelect={onFileSelect}
-            onRefresh={onRefresh}
-          />
-        )}
-
-        {activeTab === "tasks" && (
-          <TasksTab
-            tasks={contract.tasks}
-            repositories={contract.repositories}
-            supervisorTaskId={contract.supervisorTaskId}
-            contractType={contract.contractType}
-            onSelect={onTaskSelect}
-            onCreate={onTaskCreate}
-          />
-        )}
-      </div>
-
-      {/* Chat Input */}
-      <ContractCliInput
-        contractId={contract.id}
-        contract={contract}
-        onUpdate={onRefresh}
-      />
-    </div>
-  );
-}
-
-// Overview tab
-function OverviewTab({
-  contract,
-  onStatusChange,
-  onPhaseChange,
-  onCreateFile,
-  onRefresh,
-}: {
-  contract: ContractWithRelations;
-  onStatusChange: (status: ContractStatus) => void;
-  onPhaseChange: (phase: ContractPhase) => void;
-  onCreateFile?: (templateId: string, suggestedName: string) => void;
-  onRefresh: () => void;
-}) {
-  return (
-    <div className="space-y-6">
-      {/* Command Mode controls */}
-      <CommandModePanel contract={contract} onUpdate={onRefresh} />
-
-      {/* Phase deliverables checklist */}
-      <PhaseDeliverablesPanel
-        contract={contract}
-        onCreateFile={onCreateFile}
-      />
-
-      {/* Phase hint */}
-      <PhaseHint contract={contract} onAdvancePhase={onPhaseChange} />
-
-      {/* Task progress summary */}
-      <TaskStatusSummary tasks={contract.tasks} />
-
-      {/* Stats */}
-      <div className="grid grid-cols-3 gap-4">
-        <StatCard label="Repositories" value={contract.repositories.length} />
-        <StatCard label="Files" value={contract.files.length} />
-        <StatCard label="Tasks" value={contract.tasks.length} />
-      </div>
-
-      {/* Status change */}
-      <div>
-        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">
-          Status
-        </h3>
-        <div className="flex gap-2">
-          {(["active", "completed", "archived"] as ContractStatus[]).map(
-            (status) => (
-              <button
-                key={status}
-                onClick={() => onStatusChange(status)}
-                className={`
-                  px-3 py-1.5 font-mono text-xs uppercase transition-colors
-                  ${
-                    contract.status === status
-                      ? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]"
-                      : "text-[#555] border border-transparent hover:text-[#75aafc]"
-                  }
-                `}
-              >
-                {status}
-              </button>
-            )
-          )}
-        </div>
-      </div>
-
-      {/* Metadata */}
-      <div>
-        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">
-          Details
-        </h3>
-        <div className="space-y-1 font-mono text-xs text-[#555]">
-          <p>Created: {new Date(contract.createdAt).toLocaleString()}</p>
-          <p>Updated: {new Date(contract.updatedAt).toLocaleString()}</p>
-          <p>Version: {contract.version}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: number }) {
-  return (
-    <div className="p-3 border border-[rgba(117,170,252,0.2)]">
-      <div className="font-mono text-2xl text-[#dbe7ff]">{value}</div>
-      <div className="font-mono text-[10px] text-[#555] uppercase">{label}</div>
-    </div>
-  );
-}
-
-// Task status summary with progress bar
-function TaskStatusSummary({ tasks }: { tasks: TaskSummary[] }) {
-  if (tasks.length === 0) return null;
-
-  // Count tasks by status
-  const statusCounts = {
-    done: 0,
-    merged: 0,
-    running: 0,
-    pending: 0,
-    failed: 0,
-    other: 0,
-  };
-
-  for (const task of tasks) {
-    switch (task.status) {
-      case "done":
-        statusCounts.done++;
-        break;
-      case "merged":
-        statusCounts.merged++;
-        break;
-      case "running":
-      case "initializing":
-      case "starting":
-        statusCounts.running++;
-        break;
-      case "pending":
-        statusCounts.pending++;
-        break;
-      case "failed":
-        statusCounts.failed++;
-        break;
-      default:
-        statusCounts.other++;
-    }
-  }
-
-  const completedCount = statusCounts.done + statusCounts.merged;
-  const progressPercent = (completedCount / tasks.length) * 100;
-
-  // Build summary parts
-  const parts: string[] = [];
-  if (completedCount > 0) parts.push(`${completedCount} done`);
-  if (statusCounts.running > 0) parts.push(`${statusCounts.running} running`);
-  if (statusCounts.pending > 0) parts.push(`${statusCounts.pending} pending`);
-  if (statusCounts.failed > 0) parts.push(`${statusCounts.failed} failed`);
-
-  return (
-    <div className="space-y-2">
-      <h3 className="font-mono text-xs text-[#75aafc] uppercase">
-        Task Progress
-      </h3>
-
-      {/* Progress bar */}
-      <div className="h-2 bg-[rgba(117,170,252,0.1)] rounded overflow-hidden">
-        <div
-          className="h-full bg-green-400 transition-all duration-300"
-          style={{ width: `${progressPercent}%` }}
-        />
-      </div>
-
-      {/* Summary text */}
-      <div className="flex items-center justify-between">
-        <span className="font-mono text-xs text-[#9bc3ff]">
-          {parts.join(", ")}
-        </span>
-        <span className="font-mono text-xs text-[#555]">
-          {completedCount}/{tasks.length} completed
-        </span>
-      </div>
-    </div>
-  );
-}
-
-// Phase color mapping for badges
-const phaseColors: Record<ContractPhase, string> = {
-  research: "bg-purple-500/20 text-purple-400 border-purple-400/30",
-  specify: "bg-blue-500/20 text-blue-400 border-blue-400/30",
-  plan: "bg-cyan-500/20 text-cyan-400 border-cyan-400/30",
-  execute: "bg-green-500/20 text-green-400 border-green-400/30",
-  review: "bg-yellow-500/20 text-yellow-400 border-yellow-400/30",
-};
-
-// Files tab with template creation
-function FilesTab({
-  files,
-  contractId,
-  contractPhase,
-  onSelect,
-  onRefresh,
-}: {
-  files: FileSummary[];
-  contractId: string;
-  contractPhase: ContractPhase;
-  onSelect: (id: string) => void;
-  onRefresh: () => void;
-}) {
-  const [showTemplateModal, setShowTemplateModal] = useState(false);
-  const [templates, setTemplates] = useState<TemplateSummary[]>([]);
-  const [loadingTemplates, setLoadingTemplates] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const [fileName, setFileName] = useState("");
-  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
-
-  // Load templates when modal opens
-  useEffect(() => {
-    if (showTemplateModal) {
-      setLoadingTemplates(true);
-      listTemplates(contractPhase)
-        .then((res) => setTemplates(res.templates))
-        .catch((err) => console.error("Failed to load templates:", err))
-        .finally(() => setLoadingTemplates(false));
-    }
-  }, [showTemplateModal, contractPhase]);
-
-  const handleCreateFromTemplate = useCallback(async () => {
-    if (!fileName.trim() || !selectedTemplateId) return;
-
-    setCreating(true);
-    try {
-      // Get the full template with body
-      const template = await getTemplate(selectedTemplateId);
-
-      // Create the file with contract (files must belong to contracts)
-      await createFile({
-        contractId,
-        name: fileName.trim(),
-        description: template.description,
-        body: template.suggestedBody,
-      });
-
-      // Reset and close
-      setShowTemplateModal(false);
-      setFileName("");
-      setSelectedTemplateId(null);
-      onRefresh();
-    } catch (err) {
-      console.error("Failed to create file from template:", err);
-    } finally {
-      setCreating(false);
-    }
-  }, [fileName, selectedTemplateId, contractId, onRefresh]);
-
-  const handleCloseModal = () => {
-    setShowTemplateModal(false);
-    setFileName("");
-    setSelectedTemplateId(null);
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Create from template button */}
-      <button
-        onClick={() => setShowTemplateModal(true)}
-        className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-      >
-        + Create from Template
-      </button>
-
-      {/* Template Selection Modal */}
-      {showTemplateModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-lg p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] max-h-[80vh] flex flex-col">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="font-mono text-sm text-[#75aafc] uppercase">
-                Create File from Template
-              </h3>
-              <span className={`px-2 py-0.5 text-[10px] font-mono uppercase border rounded ${phaseColors[contractPhase]}`}>
-                {contractPhase} phase
-              </span>
-            </div>
-
-            <div className="space-y-4 flex-1 overflow-y-auto">
-              {/* File name input */}
-              <div>
-                <label className="block font-mono text-xs text-[#555] uppercase mb-1">
-                  File Name
-                </label>
-                <input
-                  type="text"
-                  value={fileName}
-                  onChange={(e) => setFileName(e.target.value)}
-                  placeholder="e.g., Project Requirements"
-                  className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
-                  autoFocus
-                />
-              </div>
-
-              {/* Template selection */}
-              <div>
-                <label className="block font-mono text-xs text-[#555] uppercase mb-2">
-                  Select Template
-                </label>
-                {loadingTemplates ? (
-                  <p className="font-mono text-xs text-[#555]">Loading templates...</p>
-                ) : templates.length === 0 ? (
-                  <p className="font-mono text-xs text-[#555]">No templates available for {contractPhase} phase</p>
-                ) : (
-                  <div className="space-y-2 max-h-60 overflow-y-auto">
-                    {templates.map((template) => (
-                      <button
-                        key={template.id}
-                        onClick={() => setSelectedTemplateId(template.id)}
-                        className={`w-full text-left p-3 border transition-colors ${
-                          selectedTemplateId === template.id
-                            ? "border-[#75aafc] bg-[rgba(117,170,252,0.1)]"
-                            : "border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)]"
-                        }`}
-                      >
-                        <div className="flex items-center justify-between mb-1">
-                          <span className="font-mono text-sm text-[#dbe7ff]">
-                            {template.name}
-                          </span>
-                          <span className="font-mono text-[10px] text-[#555]">
-                            {template.elementCount} elements
-                          </span>
-                        </div>
-                        <p className="font-mono text-xs text-[#555]">
-                          {template.description}
-                        </p>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <div className="flex gap-2 justify-end mt-4 pt-4 border-t border-[rgba(117,170,252,0.2)]">
-              <button
-                onClick={handleCloseModal}
-                className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleCreateFromTemplate}
-                disabled={!fileName.trim() || !selectedTemplateId || creating}
-                className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {creating ? "Creating..." : "Create File"}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* File list */}
-      {files.length === 0 ? (
-        <p className="font-mono text-xs text-[#555]">
-          No files in this contract. Create one from a template above.
-        </p>
-      ) : (
-        <div className="space-y-2">
-          {files.map((file) => (
-            <button
-              key={file.id}
-              onClick={() => onSelect(file.id)}
-              className="w-full text-left p-3 border border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)] transition-colors"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <span className="font-mono text-sm text-[#dbe7ff]">
-                    {file.name}
-                  </span>
-                  {file.contractPhase && (
-                    <span
-                      className={`px-1.5 py-0.5 text-[9px] font-mono uppercase border rounded ${
-                        phaseColors[file.contractPhase]
-                      }`}
-                      title={`Added during ${file.contractPhase} phase`}
-                    >
-                      {file.contractPhase}
-                    </span>
-                  )}
-                </div>
-                <span className="font-mono text-[10px] text-[#555]">
-                  v{file.version}
-                </span>
-              </div>
-              {file.description && (
-                <p className="font-mono text-xs text-[#555] mt-1 truncate">
-                  {file.description}
-                </p>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Tasks tab - now using TaskTree for supervisor view
-function TasksTab({
-  tasks,
-  repositories,
-  supervisorTaskId,
-  contractType,
-  onSelect,
-  onCreate,
-}: {
-  tasks: TaskSummary[];
-  repositories: ContractRepository[];
-  supervisorTaskId: string | null;
-  contractType: string;
-  onSelect: (id: string) => void;
-  onCreate: (name: string, plan: string, repositoryUrl?: string) => void;
-}) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [taskName, setTaskName] = useState("");
-  const [taskPlan, setTaskPlan] = useState("# Plan\n\nDescribe what this task should accomplish...");
-
-  // Find primary repository or first ready one
-  const readyRepos = repositories.filter((r) => r.status === "ready");
-  const primaryRepo = readyRepos.find((r) => r.isPrimary) || readyRepos[0];
-  const [selectedRepoId, setSelectedRepoId] = useState<string>(primaryRepo?.id || "");
-
-  const handleCreate = () => {
-    if (!taskName.trim()) return;
-    const selectedRepo = repositories.find((r) => r.id === selectedRepoId);
-    // Get the URL - for remote repos it's repositoryUrl, for local it's the local path
-    const repoUrl = selectedRepo?.repositoryUrl || selectedRepo?.localPath;
-    onCreate(taskName.trim(), taskPlan, repoUrl || undefined);
-    setIsCreating(false);
-    setTaskName("");
-    setTaskPlan("# Plan\n\nDescribe what this task should accomplish...");
-    setSelectedRepoId(primaryRepo?.id || "");
-  };
-
-  const handleCancel = () => {
-    setIsCreating(false);
-    setTaskName("");
-    setTaskPlan("# Plan\n\nDescribe what this task should accomplish...");
-    setSelectedRepoId(primaryRepo?.id || "");
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* TaskTree with supervisor view */}
-      <TaskTree
-        tasks={tasks}
-        supervisorTaskId={supervisorTaskId}
-        onSelect={onSelect}
-      />
-
-      {/* Manual task creation - show for task-type contracts or contracts without supervisors */}
-      {(contractType === "task" || !supervisorTaskId) && (
-        <>
-          <div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
-            <button
-              onClick={() => setIsCreating(true)}
-              className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-            >
-              + Create Task Manually
-            </button>
-          </div>
-
-          {/* Create Task Modal */}
-          {isCreating && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-              <div className="w-full max-w-lg p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)]">
-                <h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4">
-                  Create Task
-                </h3>
-                <div className="space-y-4">
-                  <div>
-                    <label className="block font-mono text-xs text-[#555] uppercase mb-1">
-                      Name
-                    </label>
-                    <input
-                      type="text"
-                      value={taskName}
-                      onChange={(e) => setTaskName(e.target.value)}
-                      placeholder="Task name"
-                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
-                      autoFocus
-                    />
-                  </div>
-
-                  {/* Repository selection */}
-                  {readyRepos.length > 0 && (
-                    <div>
-                      <label className="block font-mono text-xs text-[#555] uppercase mb-1">
-                        Repository
-                      </label>
-                      <select
-                        value={selectedRepoId}
-                        onChange={(e) => setSelectedRepoId(e.target.value)}
-                        className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
-                      >
-                        <option value="">No repository</option>
-                        {readyRepos.map((repo) => (
-                          <option key={repo.id} value={repo.id}>
-                            {repo.name}
-                            {repo.isPrimary ? " (Primary)" : ""}
-                            {" - "}
-                            {repo.sourceType}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-
-                  <div>
-                    <label className="block font-mono text-xs text-[#555] uppercase mb-1">
-                      Plan
-                    </label>
-                    <textarea
-                      value={taskPlan}
-                      onChange={(e) => setTaskPlan(e.target.value)}
-                      rows={6}
-                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
-                    />
-                  </div>
-
-                  <div className="flex gap-2 justify-end">
-                    <button
-                      onClick={handleCancel}
-                      className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={handleCreate}
-                      disabled={!taskName.trim()}
-                      className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      Create
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/ContractList.tsx b/makima/frontend/src/components/contracts/ContractList.tsx
deleted file mode 100644
index 1eee6a3..0000000
--- a/makima/frontend/src/components/contracts/ContractList.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { useState } from "react";
-import type { ContractSummary, ContractStatus } from "../../lib/api";
-import { PhaseBadge } from "./PhaseBadge";
-import { PhaseProgressBarCompact } from "./PhaseProgressBar";
-import { ContractContextMenu } from "./ContractContextMenu";
-
-interface ContractListProps {
-  contracts: ContractSummary[];
-  loading: boolean;
-  onSelect: (id: string) => void;
-  onCreate: () => void;
-  selectedId?: string;
-  onMarkComplete?: (contract: ContractSummary) => void;
-  onMarkActive?: (contract: ContractSummary) => void;
-  onArchive?: (contract: ContractSummary) => void;
-  onDelete?: (contract: ContractSummary) => void;
-  onGoToSupervisor?: (contract: ContractSummary) => void;
-}
-
-const statusColors: Record<ContractStatus, string> = {
-  active: "text-green-400",
-  completed: "text-blue-400",
-  archived: "text-[#555]",
-};
-
-export function ContractList({
-  contracts,
-  loading,
-  onSelect,
-  onCreate,
-  selectedId,
-  onMarkComplete,
-  onMarkActive,
-  onArchive,
-  onDelete,
-  onGoToSupervisor,
-}: ContractListProps) {
-  const [filter, setFilter] = useState<ContractStatus | "all">("all");
-  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
-  const [contextMenuContract, setContextMenuContract] = useState<ContractSummary | null>(null);
-
-  const handleContextMenu = (e: React.MouseEvent, contract: ContractSummary) => {
-    e.preventDefault();
-    setContextMenuPosition({ x: e.clientX, y: e.clientY });
-    setContextMenuContract(contract);
-  };
-
-  const closeContextMenu = () => {
-    setContextMenuPosition(null);
-    setContextMenuContract(null);
-  };
-
-  const filteredContracts =
-    filter === "all"
-      ? contracts
-      : contracts.filter((c) => c.status === filter);
-
-  if (loading) {
-    return (
-      <div className="panel h-full flex items-center justify-center">
-        <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="panel h-full flex flex-col min-h-0">
-      {/* Header */}
-      <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
-        <div className="flex items-center justify-between mb-3">
-          <h2 className="font-mono text-sm text-[#75aafc] uppercase tracking-wider">
-            Contracts
-          </h2>
-          <button
-            onClick={onCreate}
-            className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
-          >
-            + New
-          </button>
-        </div>
-
-        {/* Filter tabs */}
-        <div className="flex gap-1">
-          {(["all", "active", "completed", "archived"] as const).map((status) => (
-            <button
-              key={status}
-              onClick={() => setFilter(status)}
-              className={`
-                px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors
-                ${
-                  filter === status
-                    ? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]"
-                    : "text-[#555] hover:text-[#75aafc]"
-                }
-              `}
-            >
-              {status}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Contract list */}
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        {filteredContracts.length === 0 ? (
-          <div className="p-4 text-center">
-            <p className="font-mono text-sm text-[#555]">
-              {filter === "all"
-                ? "No contracts yet"
-                : `No ${filter} contracts`}
-            </p>
-          </div>
-        ) : (
-          <div className="divide-y divide-[rgba(117,170,252,0.15)]">
-            {filteredContracts.map((contract) => (
-              <button
-                key={contract.id}
-                onClick={() => onSelect(contract.id)}
-                onContextMenu={(e) => handleContextMenu(e, contract)}
-                className={`
-                  w-full text-left p-4 transition-colors
-                  ${
-                    selectedId === contract.id
-                      ? "bg-[rgba(117,170,252,0.1)]"
-                      : "hover:bg-[rgba(117,170,252,0.05)]"
-                  }
-                `}
-              >
-                <div className="flex items-start justify-between gap-2 mb-2">
-                  <div className="flex items-center gap-2 min-w-0">
-                    <h3 className="font-mono text-sm text-[#dbe7ff] truncate">
-                      {contract.name}
-                    </h3>
-                    {contract.localOnly && (
-                      <span className="px-1.5 py-0.5 font-mono text-[9px] uppercase text-amber-400 border border-amber-400/30 bg-amber-400/10 shrink-0">
-                        Local
-                      </span>
-                    )}
-                  </div>
-                  <span
-                    className={`text-[10px] font-mono uppercase shrink-0 ${
-                      statusColors[contract.status]
-                    }`}
-                  >
-                    {contract.status}
-                  </span>
-                </div>
-
-                {contract.description && (
-                  <p className="font-mono text-xs text-[#555] mb-2 line-clamp-2">
-                    {contract.description}
-                  </p>
-                )}
-
-                <div className="flex items-center justify-between">
-                  <PhaseProgressBarCompact currentPhase={contract.phase} contractType={contract.contractType} />
-                  <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]">
-                    {contract.fileCount > 0 && (
-                      <span>{contract.fileCount} files</span>
-                    )}
-                    {contract.taskCount > 0 && (
-                      <span>{contract.taskCount} tasks</span>
-                    )}
-                    {contract.repositoryCount > 0 && (
-                      <span>{contract.repositoryCount} repos</span>
-                    )}
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Context Menu */}
-      {contextMenuPosition && contextMenuContract && (
-        <ContractContextMenu
-          x={contextMenuPosition.x}
-          y={contextMenuPosition.y}
-          contract={contextMenuContract}
-          onClose={closeContextMenu}
-          onMarkComplete={() => onMarkComplete?.(contextMenuContract)}
-          onMarkActive={() => onMarkActive?.(contextMenuContract)}
-          onArchive={() => onArchive?.(contextMenuContract)}
-          onDelete={() => onDelete?.(contextMenuContract)}
-          onGoToSupervisor={() => onGoToSupervisor?.(contextMenuContract)}
-        />
-      )}
-    </div>
-  );
-}
-
-export function ContractCard({
-  contract,
-  onClick,
-}: {
-  contract: ContractSummary;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className="w-full text-left p-4 border border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)] transition-colors"
-    >
-      <div className="flex items-start justify-between gap-2 mb-2">
-        <h3 className="font-mono text-sm text-[#dbe7ff]">{contract.name}</h3>
-        <PhaseBadge phase={contract.phase} />
-      </div>
-
-      {contract.description && (
-        <p className="font-mono text-xs text-[#555] mb-3 line-clamp-2">
-          {contract.description}
-        </p>
-      )}
-
-      <div className="flex items-center gap-4 text-[10px] font-mono text-[#555]">
-        <span>{contract.fileCount} files</span>
-        <span>{contract.taskCount} tasks</span>
-        <span>{contract.repositoryCount} repos</span>
-      </div>
-    </button>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/PhaseBadge.tsx b/makima/frontend/src/components/contracts/PhaseBadge.tsx
deleted file mode 100644
index 0f46b9b..0000000
--- a/makima/frontend/src/components/contracts/PhaseBadge.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { ContractPhase } from "../../lib/api";
-
-interface PhaseBadgeProps {
-  phase: ContractPhase;
-  size?: "sm" | "md";
-}
-
-const phaseConfig: Record<
-  ContractPhase,
-  { label: string; color: string; bgColor: string }
-> = {
-  research: {
-    label: "Research",
-    color: "text-purple-400",
-    bgColor: "bg-purple-400/10 border-purple-400/30",
-  },
-  specify: {
-    label: "Specify",
-    color: "text-blue-400",
-    bgColor: "bg-blue-400/10 border-blue-400/30",
-  },
-  plan: {
-    label: "Plan",
-    color: "text-cyan-400",
-    bgColor: "bg-cyan-400/10 border-cyan-400/30",
-  },
-  execute: {
-    label: "Execute",
-    color: "text-yellow-400",
-    bgColor: "bg-yellow-400/10 border-yellow-400/30",
-  },
-  review: {
-    label: "Review",
-    color: "text-green-400",
-    bgColor: "bg-green-400/10 border-green-400/30",
-  },
-};
-
-export function PhaseBadge({ phase, size = "sm" }: PhaseBadgeProps) {
-  const config = phaseConfig[phase];
-  const sizeClasses = size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-3 py-1 text-xs";
-
-  return (
-    <span
-      className={`${sizeClasses} ${config.color} ${config.bgColor} border font-mono uppercase tracking-wider`}
-    >
-      {config.label}
-    </span>
-  );
-}
-
-export function getPhaseLabel(phase: ContractPhase): string {
-  return phaseConfig[phase].label;
-}
diff --git a/makima/frontend/src/components/contracts/PhaseDeliverablesPanel.tsx b/makima/frontend/src/components/contracts/PhaseDeliverablesPanel.tsx
deleted file mode 100644
index b2c2e58..0000000
--- a/makima/frontend/src/components/contracts/PhaseDeliverablesPanel.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-import { useMemo } from "react";
-import type { ContractWithRelations, ContractPhase, ContractType } from "../../lib/api";
-
-// Phase deliverables configuration (mirrors backend phase_guidance.rs)
-// IDs must match backend phase_guidance.rs exactly for mark_deliverable_complete
-interface PhaseDeliverable {
-  id: string;  // Must match backend deliverable ID
-  name: string;
-  priority: "required" | "recommended" | "optional";
-  description: string;
-}
-
-interface PhaseConfig {
-  deliverables: PhaseDeliverable[];
-  requiresRepository: boolean;
-  requiresTasks: boolean;
-  guidance: string;
-}
-
-// Contract type specific deliverables (must match backend phase_guidance.rs)
-type ContractTypeDeliverables = Partial<Record<ContractPhase, PhaseConfig>>;
-
-const CONTRACT_TYPE_DELIVERABLES: Record<ContractType, ContractTypeDeliverables> = {
-  simple: {
-    plan: {
-      deliverables: [
-        { id: "plan-document", name: "Plan", priority: "required", description: "Implementation plan detailing the approach and tasks" },
-      ],
-      requiresRepository: true,
-      requiresTasks: false,
-      guidance: "Create a plan document that outlines the implementation approach. A repository must be configured before moving to Execute phase.",
-    },
-    execute: {
-      deliverables: [
-        { id: "pull-request", name: "Pull Request", priority: "required", description: "Pull request with the implemented changes" },
-      ],
-      requiresRepository: true,
-      requiresTasks: true,
-      guidance: "Execute the plan and create a PR with the implemented changes. Complete all tasks to finish the contract.",
-    },
-  },
-  specification: {
-    research: {
-      deliverables: [
-        { id: "research-notes", name: "Research Notes", priority: "required", description: "Document findings and insights during research" },
-      ],
-      requiresRepository: false,
-      requiresTasks: false,
-      guidance: "Focus on understanding the problem space and document your findings in the Research Notes before moving to Specify phase.",
-    },
-    specify: {
-      deliverables: [
-        { id: "requirements-document", name: "Requirements Document", priority: "required", description: "Define functional and non-functional requirements" },
-      ],
-      requiresRepository: false,
-      requiresTasks: false,
-      guidance: "Define what needs to be built with clear requirements in the Requirements Document. Ensure specifications are detailed enough for planning.",
-    },
-    plan: {
-      deliverables: [
-        { id: "plan-document", name: "Plan", priority: "required", description: "Implementation plan detailing the approach and tasks" },
-      ],
-      requiresRepository: true,
-      requiresTasks: false,
-      guidance: "Create a plan document that outlines the implementation approach. A repository must be configured before moving to Execute phase.",
-    },
-    execute: {
-      deliverables: [
-        { id: "pull-request", name: "Pull Request", priority: "required", description: "Pull request with the implemented changes" },
-      ],
-      requiresRepository: true,
-      requiresTasks: true,
-      guidance: "Execute the plan and create a PR with the implemented changes. Complete all tasks before moving to Review phase.",
-    },
-    review: {
-      deliverables: [
-        { id: "release-notes", name: "Release Notes", priority: "required", description: "Document changes for release communication" },
-      ],
-      requiresRepository: false,
-      requiresTasks: false,
-      guidance: "Review completed work and document the release in the Release Notes. The contract can be completed after review.",
-    },
-  },
-  execute: {
-    execute: {
-      deliverables: [], // No deliverables for execute-only contract type
-      requiresRepository: true,
-      requiresTasks: true,
-      guidance: "Execute the tasks directly. No deliverable documents are required for this contract type.",
-    },
-  },
-};
-
-// Get phase config for a specific contract type and phase
-function getPhaseConfig(contractType: ContractType, phase: ContractPhase): PhaseConfig {
-  const typeConfig = CONTRACT_TYPE_DELIVERABLES[contractType];
-  const phaseConfig = typeConfig?.[phase];
-
-  if (phaseConfig) {
-    return phaseConfig;
-  }
-
-  // Fallback for unknown phase/type combinations
-  return {
-    deliverables: [],
-    requiresRepository: false,
-    requiresTasks: false,
-    guidance: `Unknown phase "${phase}" for contract type "${contractType}"`,
-  };
-}
-
-interface DeliverableStatus {
-  id: string;
-  name: string;
-  priority: "required" | "recommended" | "optional";
-  description: string;
-  completed: boolean;
-  fileId?: string;
-  actualName?: string;
-}
-
-interface PhaseDeliverablesProps {
-  contract: ContractWithRelations;
-  onCreateFile?: (templateId: string, suggestedName: string) => void;
-}
-
-export function PhaseDeliverablesPanel({ contract, onCreateFile }: PhaseDeliverablesProps) {
-  // Get phase config based on contract type AND phase
-  const phaseConfig = useMemo(
-    () => getPhaseConfig(contract.contractType, contract.phase),
-    [contract.contractType, contract.phase]
-  );
-
-  // Calculate deliverable status
-  const deliverableStatuses = useMemo((): DeliverableStatus[] => {
-    return phaseConfig.deliverables.map((deliverable) => {
-      // Find matching file by name similarity
-      const matchedFile = contract.files.find((f) => {
-        const nameLower = f.name.toLowerCase();
-        const deliverableLower = deliverable.name.toLowerCase();
-        return (
-          f.contractPhase === contract.phase &&
-          (nameLower.includes(deliverableLower) || deliverableLower.includes(nameLower) || nameLower.includes(deliverable.id.replace("-", " ")))
-        );
-      });
-
-      return {
-        ...deliverable,
-        completed: !!matchedFile,
-        fileId: matchedFile?.id,
-        actualName: matchedFile?.name,
-      };
-    });
-  }, [contract.files, contract.phase, phaseConfig.deliverables]);
-
-  // Check repository status
-  const hasRepository = contract.repositories.length > 0;
-
-  // Check task status
-  const taskStats = useMemo(() => {
-    const total = contract.tasks.length;
-    const done = contract.tasks.filter((t) => t.status === "done" || t.status === "merged").length;
-    const pending = contract.tasks.filter((t) => t.status === "pending").length;
-    const running = contract.tasks.filter((t) => ["running", "initializing", "starting"].includes(t.status)).length;
-    const failed = contract.tasks.filter((t) => t.status === "failed").length;
-    return { total, done, pending, running, failed };
-  }, [contract.tasks]);
-
-  // Calculate completion percentage
-  const completionPercent = useMemo(() => {
-    let completed = 0;
-    let total = 0;
-
-    // Count required and recommended deliverables
-    deliverableStatuses.forEach((s) => {
-      if (s.priority !== "optional") {
-        total++;
-        if (s.completed) completed++;
-      }
-    });
-
-    // Count repository if required
-    if (phaseConfig.requiresRepository) {
-      total++;
-      if (hasRepository) completed++;
-    }
-
-    // Count tasks if required
-    if (phaseConfig.requiresTasks && taskStats.total > 0) {
-      total++;
-      if (taskStats.done === taskStats.total) completed++;
-    }
-
-    return total > 0 ? Math.round((completed / total) * 100) : 100;
-  }, [deliverableStatuses, hasRepository, phaseConfig, taskStats]);
-
-  const priorityColors = {
-    required: "text-red-400",
-    recommended: "text-yellow-400",
-    optional: "text-[#555]",
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="font-mono text-xs text-[#75aafc] uppercase">
-          Phase Deliverables
-        </h3>
-        <div className="flex items-center gap-2">
-          <div className="w-24 h-1.5 bg-[rgba(117,170,252,0.1)] rounded overflow-hidden">
-            <div
-              className={`h-full transition-all duration-300 ${
-                completionPercent === 100 ? "bg-green-400" : "bg-[#75aafc]"
-              }`}
-              style={{ width: `${completionPercent}%` }}
-            />
-          </div>
-          <span className="font-mono text-[10px] text-[#555]">{completionPercent}%</span>
-        </div>
-      </div>
-
-      {/* Guidance text */}
-      <p className="font-mono text-xs text-[#555] italic">{phaseConfig.guidance}</p>
-
-      {/* Deliverables checklist */}
-      <div className="space-y-2">
-        {deliverableStatuses.map((status) => (
-          <div
-            key={status.id}
-            className={`flex items-center justify-between p-2 border ${
-              status.completed
-                ? "border-green-400/20 bg-green-400/5"
-                : "border-[rgba(117,170,252,0.15)]"
-            }`}
-          >
-            <div className="flex items-center gap-2">
-              <span
-                className={`font-mono text-xs ${
-                  status.completed ? "text-green-400" : "text-[#555]"
-                }`}
-              >
-                {status.completed ? "[+]" : "[ ]"}
-              </span>
-              <div>
-                <div className="flex items-center gap-2">
-                  <span className="font-mono text-xs text-[#dbe7ff]">
-                    {status.completed ? status.actualName : status.name}
-                  </span>
-                  {!status.completed && (
-                    <span className={`font-mono text-[9px] uppercase ${priorityColors[status.priority]}`}>
-                      {status.priority}
-                    </span>
-                  )}
-                </div>
-                <span className="font-mono text-[10px] text-[#555]">
-                  {status.description}
-                </span>
-              </div>
-            </div>
-            {!status.completed && onCreateFile && (
-              <button
-                onClick={() => onCreateFile(status.id, status.name)}
-                className="px-2 py-1 font-mono text-[10px] text-[#75aafc] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-              >
-                Create
-              </button>
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Repository status */}
-      {phaseConfig.requiresRepository && (
-        <div
-          className={`flex items-center gap-2 p-2 border ${
-            hasRepository
-              ? "border-green-400/20 bg-green-400/5"
-              : "border-[rgba(117,170,252,0.15)]"
-          }`}
-        >
-          <span
-            className={`font-mono text-xs ${
-              hasRepository ? "text-green-400" : "text-[#555]"
-            }`}
-          >
-            {hasRepository ? "[+]" : "[ ]"}
-          </span>
-          <div>
-            <span className="font-mono text-xs text-[#dbe7ff]">
-              Repository Configured
-            </span>
-            {!hasRepository && (
-              <span className="font-mono text-[9px] uppercase text-red-400 ml-2">
-                required
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Task status */}
-      {phaseConfig.requiresTasks && (
-        <div
-          className={`flex items-center justify-between p-2 border ${
-            taskStats.total > 0 && taskStats.done === taskStats.total
-              ? "border-green-400/20 bg-green-400/5"
-              : "border-[rgba(117,170,252,0.15)]"
-          }`}
-        >
-          <div className="flex items-center gap-2">
-            <span
-              className={`font-mono text-xs ${
-                taskStats.total > 0 && taskStats.done === taskStats.total
-                  ? "text-green-400"
-                  : "text-[#555]"
-              }`}
-            >
-              {taskStats.total > 0 && taskStats.done === taskStats.total ? "[+]" : "[ ]"}
-            </span>
-            <span className="font-mono text-xs text-[#dbe7ff]">
-              Tasks Completed
-            </span>
-          </div>
-          {taskStats.total > 0 ? (
-            <span className="font-mono text-[10px] text-[#9bc3ff]">
-              {taskStats.done}/{taskStats.total}
-              {taskStats.running > 0 && ` (${taskStats.running} running)`}
-              {taskStats.failed > 0 && (
-                <span className="text-red-400"> ({taskStats.failed} failed)</span>
-              )}
-            </span>
-          ) : (
-            <span className="font-mono text-[10px] text-[#555]">No tasks yet</span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/PhaseHint.tsx b/makima/frontend/src/components/contracts/PhaseHint.tsx
deleted file mode 100644
index 95573ed..0000000
--- a/makima/frontend/src/components/contracts/PhaseHint.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { ContractPhase, ContractWithRelations } from "../../lib/api";
-
-interface PhaseHintProps {
-  contract: ContractWithRelations;
-  onAdvancePhase: (phase: ContractPhase) => void;
-}
-
-const phaseOrder: ContractPhase[] = ["research", "specify", "plan", "execute", "review"];
-
-interface HintConfig {
-  condition: (contract: ContractWithRelations) => boolean;
-  message: (contract: ContractWithRelations) => string;
-  nextPhase: ContractPhase;
-}
-
-const phaseHints: Record<ContractPhase, HintConfig | null> = {
-  research: {
-    condition: (c) => c.files.length >= 1,
-    message: (c) =>
-      `You have ${c.files.length} file${c.files.length === 1 ? "" : "s"}. Ready to specify requirements?`,
-    nextPhase: "specify",
-  },
-  specify: {
-    condition: (c) => c.files.length >= 2,
-    message: () => "Spec files ready. Create implementation plan?",
-    nextPhase: "plan",
-  },
-  plan: {
-    condition: (c) => c.files.length >= 1 && c.repositories.length >= 1,
-    message: () => "Plan documented. Ready to create tasks?",
-    nextPhase: "execute",
-  },
-  execute: {
-    condition: (c) => {
-      // Show hint only when all tasks are complete
-      const doneTasks = c.tasks.filter(
-        (t) => t.status === "done" || t.status === "merged"
-      );
-      return c.tasks.length > 0 && doneTasks.length === c.tasks.length;
-    },
-    message: (c) => {
-      const doneTasks = c.tasks.filter(
-        (t) => t.status === "done" || t.status === "merged"
-      );
-      return `All ${doneTasks.length} task${doneTasks.length === 1 ? "" : "s"} complete. Ready for review?`;
-    },
-    nextPhase: "review",
-  },
-  review: null, // No hint for review phase - it's the final phase
-};
-
-export function PhaseHint({ contract, onAdvancePhase }: PhaseHintProps) {
-  const hintConfig = phaseHints[contract.phase];
-
-  // No hint for this phase
-  if (!hintConfig) return null;
-
-  // Condition not met
-  if (!hintConfig.condition(contract)) return null;
-
-  return (
-    <div className="flex items-center gap-3 p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.2)]">
-      <span className="font-mono text-xs text-[#9bc3ff]">
-        {hintConfig.message(contract)}
-      </span>
-      <button
-        onClick={() => onAdvancePhase(hintConfig.nextPhase)}
-        className="px-3 py-1 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase whitespace-nowrap"
-      >
-        Advance to {hintConfig.nextPhase}
-      </button>
-    </div>
-  );
-}
-
-export function getNextPhase(currentPhase: ContractPhase): ContractPhase | null {
-  const currentIndex = phaseOrder.indexOf(currentPhase);
-  if (currentIndex === -1 || currentIndex === phaseOrder.length - 1) {
-    return null;
-  }
-  return phaseOrder[currentIndex + 1];
-}
-
-export function getPreviousPhase(currentPhase: ContractPhase): ContractPhase | null {
-  const currentIndex = phaseOrder.indexOf(currentPhase);
-  if (currentIndex <= 0) {
-    return null;
-  }
-  return phaseOrder[currentIndex - 1];
-}
diff --git a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
deleted file mode 100644
index 9589db9..0000000
--- a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import type { ContractPhase, ContractType } from "../../lib/api";
-import { getValidPhases } from "../../lib/api";
-
-interface PhaseProgressBarProps {
-  currentPhase: ContractPhase;
-  contractType?: ContractType;
-  onPhaseClick?: (phase: ContractPhase) => void;
-  readonly?: boolean;
-}
-
-const phases: ContractPhase[] = ["research", "specify", "plan", "execute", "review"];
-
-const phaseLabels: Record<ContractPhase, string> = {
-  research: "Research",
-  specify: "Specify",
-  plan: "Plan",
-  execute: "Execute",
-  review: "Review",
-};
-
-const phaseColors: Record<ContractPhase, { active: string; inactive: string; completed: string }> = {
-  research: {
-    active: "bg-purple-400 border-purple-400",
-    inactive: "bg-transparent border-purple-400/30",
-    completed: "bg-purple-400/50 border-purple-400/50",
-  },
-  specify: {
-    active: "bg-blue-400 border-blue-400",
-    inactive: "bg-transparent border-blue-400/30",
-    completed: "bg-blue-400/50 border-blue-400/50",
-  },
-  plan: {
-    active: "bg-cyan-400 border-cyan-400",
-    inactive: "bg-transparent border-cyan-400/30",
-    completed: "bg-cyan-400/50 border-cyan-400/50",
-  },
-  execute: {
-    active: "bg-yellow-400 border-yellow-400",
-    inactive: "bg-transparent border-yellow-400/30",
-    completed: "bg-yellow-400/50 border-yellow-400/50",
-  },
-  review: {
-    active: "bg-green-400 border-green-400",
-    inactive: "bg-transparent border-green-400/30",
-    completed: "bg-green-400/50 border-green-400/50",
-  },
-};
-
-export function PhaseProgressBar({
-  currentPhase,
-  contractType,
-  onPhaseClick,
-  readonly = false,
-}: PhaseProgressBarProps) {
-  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
-  const currentIndex = visiblePhases.indexOf(currentPhase);
-
-  return (
-    <div className="flex items-center gap-1">
-      {visiblePhases.map((phase, index) => {
-        const isActive = phase === currentPhase;
-        const isCompleted = index < currentIndex;
-        const colors = phaseColors[phase];
-        const colorClass = isActive
-          ? colors.active
-          : isCompleted
-          ? colors.completed
-          : colors.inactive;
-
-        const canClick = !readonly && onPhaseClick;
-
-        return (
-          <div key={phase} className="flex items-center">
-            {/* Phase node */}
-            <button
-              onClick={() => canClick && onPhaseClick(phase)}
-              disabled={readonly}
-              className={`
-                relative group flex flex-col items-center
-                ${canClick ? "cursor-pointer" : "cursor-default"}
-              `}
-            >
-              {/* Circle */}
-              <div
-                className={`
-                  w-3 h-3 rounded-full border-2 transition-all
-                  ${colorClass}
-                  ${canClick && !isActive ? "hover:scale-110" : ""}
-                `}
-              />
-              {/* Label */}
-              <span
-                className={`
-                  absolute top-4 font-mono text-[9px] uppercase tracking-wide whitespace-nowrap
-                  ${isActive ? "text-[#dbe7ff]" : "text-[#555]"}
-                  ${canClick && !isActive ? "group-hover:text-[#75aafc]" : ""}
-                `}
-              >
-                {phaseLabels[phase]}
-              </span>
-            </button>
-
-            {/* Connector line */}
-            {index < visiblePhases.length - 1 && (
-              <div
-                className={`
-                  w-8 h-0.5 mx-1
-                  ${index < currentIndex ? "bg-[#3f6fb3]" : "bg-[rgba(117,170,252,0.15)]"}
-                `}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function PhaseProgressBarCompact({
-  currentPhase,
-  contractType,
-}: {
-  currentPhase: ContractPhase;
-  contractType?: ContractType;
-}) {
-  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
-  const currentIndex = visiblePhases.indexOf(currentPhase);
-
-  return (
-    <div className="flex items-center gap-0.5">
-      {visiblePhases.map((phase, index) => {
-        const isActive = phase === currentPhase;
-        const isCompleted = index < currentIndex;
-        const colors = phaseColors[phase];
-
-        return (
-          <div
-            key={phase}
-            className={`
-              w-2 h-2 rounded-full border
-              ${isActive ? colors.active : isCompleted ? colors.completed : colors.inactive}
-            `}
-            title={phaseLabels[phase]}
-          />
-        );
-      })}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/QuickActionButtons.tsx b/makima/frontend/src/components/contracts/QuickActionButtons.tsx
deleted file mode 100644
index 4dbb90c..0000000
--- a/makima/frontend/src/components/contracts/QuickActionButtons.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useCallback } from "react";
-
-export type QuickActionType =
-  | "create_file"
-  | "create_task"
-  | "run_task"
-  | "advance_phase"
-  | "derive_tasks"
-  | "update_file";
-
-export interface QuickAction {
-  type: QuickActionType;
-  label: string;
-  description?: string;
-  data?: Record<string, unknown>;
-}
-
-interface QuickActionButtonsProps {
-  actions: QuickAction[];
-  onAction: (action: QuickAction) => void;
-  loading?: boolean;
-}
-
-const ACTION_ICONS: Record<QuickActionType, string> = {
-  create_file: "[+]",
-  create_task: "[T]",
-  run_task: "[>]",
-  advance_phase: "[→]",
-  derive_tasks: "[≡]",
-  update_file: "[*]",
-};
-
-const ACTION_COLORS: Record<QuickActionType, string> = {
-  create_file: "border-blue-400/30 hover:border-blue-400/60 text-blue-400",
-  create_task: "border-green-400/30 hover:border-green-400/60 text-green-400",
-  run_task: "border-yellow-400/30 hover:border-yellow-400/60 text-yellow-400",
-  advance_phase: "border-purple-400/30 hover:border-purple-400/60 text-purple-400",
-  derive_tasks: "border-cyan-400/30 hover:border-cyan-400/60 text-cyan-400",
-  update_file: "border-orange-400/30 hover:border-orange-400/60 text-orange-400",
-};
-
-export function QuickActionButtons({
-  actions,
-  onAction,
-  loading = false,
-}: QuickActionButtonsProps) {
-  const handleClick = useCallback(
-    (action: QuickAction) => {
-      if (!loading) {
-        onAction(action);
-      }
-    },
-    [onAction, loading]
-  );
-
-  if (actions.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap gap-2 mt-2">
-      {actions.map((action, index) => (
-        <button
-          key={`${action.type}-${index}`}
-          onClick={() => handleClick(action)}
-          disabled={loading}
-          className={`
-            flex items-center gap-1.5 px-2 py-1
-            font-mono text-[10px] uppercase
-            border transition-colors
-            disabled:opacity-50 disabled:cursor-not-allowed
-            ${ACTION_COLORS[action.type]}
-          `}
-          title={action.description}
-        >
-          <span>{ACTION_ICONS[action.type]}</span>
-          <span>{action.label}</span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Parse tool call results to extract suggested quick actions.
- * This is used by ContractCliInput to detect actionable results.
- */
-export function parseActionsFromToolCalls(
-  toolCalls: { name: string; success: boolean; message: string }[]
-): QuickAction[] {
-  const actions: QuickAction[] = [];
-
-  for (const tc of toolCalls) {
-    if (!tc.success) continue;
-
-    switch (tc.name) {
-      case "derive_tasks_from_file":
-        // When tasks are parsed, offer to create them
-        if (tc.message.includes("task") || tc.message.includes("Found")) {
-          actions.push({
-            type: "derive_tasks",
-            label: "Review & Create Tasks",
-            description: "Review parsed tasks and create them with chaining",
-          });
-        }
-        break;
-
-      case "process_task_completion":
-        // Check for suggested actions in the result
-        if (tc.message.includes("next task")) {
-          actions.push({
-            type: "run_task",
-            label: "Run Next Task",
-            description: "Continue with the next chained task",
-          });
-        }
-        if (tc.message.includes("advance") || tc.message.includes("phase")) {
-          actions.push({
-            type: "advance_phase",
-            label: "Advance Phase",
-            description: "Move to the next contract phase",
-          });
-        }
-        break;
-
-      case "get_phase_checklist":
-        // When checklist shows missing items, offer to create them
-        if (tc.message.includes("missing") || tc.message.includes("not created")) {
-          actions.push({
-            type: "create_file",
-            label: "Create Missing Files",
-            description: "Create files from recommended templates",
-          });
-        }
-        break;
-
-      case "advance_phase":
-        // After phase transition, suggest creating files
-        actions.push({
-          type: "create_file",
-          label: "Create Phase Files",
-          description: "Create recommended files for this phase",
-        });
-        break;
-    }
-  }
-
-  return actions;
-}
-
-/**
- * Parse LLM response text to detect suggested actions.
- * Used as a fallback when structured action data isn't available.
- */
-export function parseActionsFromText(text: string): QuickAction[] {
-  const actions: QuickAction[] = [];
-  const lower = text.toLowerCase();
-
-  // Detect file creation suggestions
-  if (
-    lower.includes("create a file") ||
-    lower.includes("create the file") ||
-    lower.includes("should i create")
-  ) {
-    actions.push({
-      type: "create_file",
-      label: "Create File",
-      description: "Create the suggested file",
-    });
-  }
-
-  // Detect task creation suggestions
-  if (
-    lower.includes("create tasks") ||
-    lower.includes("create these tasks") ||
-    lower.includes("create chained tasks")
-  ) {
-    actions.push({
-      type: "create_task",
-      label: "Create Tasks",
-      description: "Create the suggested tasks",
-    });
-  }
-
-  // Detect phase advancement suggestions
-  if (
-    lower.includes("advance to") ||
-    lower.includes("ready to move to") ||
-    lower.includes("transition to")
-  ) {
-    const phases = ["specify", "plan", "execute", "review"];
-    for (const phase of phases) {
-      if (lower.includes(phase)) {
-        actions.push({
-          type: "advance_phase",
-          label: `Advance to ${phase.charAt(0).toUpperCase() + phase.slice(1)}`,
-          description: `Move to the ${phase} phase`,
-          data: { phase },
-        });
-        break;
-      }
-    }
-  }
-
-  // Detect run task suggestions
-  if (
-    lower.includes("run the task") ||
-    lower.includes("start the task") ||
-    lower.includes("run task")
-  ) {
-    actions.push({
-      type: "run_task",
-      label: "Run Task",
-      description: "Start the suggested task",
-    });
-  }
-
-  return actions;
-}
diff --git a/makima/frontend/src/components/contracts/RepositoryPanel.tsx b/makima/frontend/src/components/contracts/RepositoryPanel.tsx
deleted file mode 100644
index 15741a8..0000000
--- a/makima/frontend/src/components/contracts/RepositoryPanel.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-import { useState, useEffect } from "react";
-import type {
-  ContractRepository,
-  RepositorySourceType,
-  RepositoryStatus,
-  DaemonDirectory,
-  RepositoryHistoryEntry,
-} from "../../lib/api";
-import { getDaemonDirectories, getRepositorySuggestions } from "../../lib/api";
-import { DirectoryInput } from "../mesh/DirectoryInput";
-
-interface RepositoryPanelProps {
-  repositories: ContractRepository[];
-  onAddRemote: (name: string, url: string, isPrimary: boolean) => void;
-  onAddLocal: (name: string, path: string, isPrimary: boolean) => void;
-  onCreateManaged: (name: string, isPrimary: boolean) => void;
-  onDelete: (repoId: string) => void;
-  onSetPrimary: (repoId: string) => void;
-}
-
-type AddMode = "remote" | "local" | "managed" | null;
-
-const sourceTypeLabels: Record<RepositorySourceType, string> = {
-  remote: "Remote",
-  local: "Local",
-  managed: "Managed",
-};
-
-const sourceTypeIcons: Record<RepositorySourceType, string> = {
-  remote: "GH",
-  local: "FS",
-  managed: "MK",
-};
-
-const statusColors: Record<RepositoryStatus, string> = {
-  ready: "text-green-400",
-  pending: "text-yellow-400",
-  creating: "text-cyan-400",
-  failed: "text-red-400",
-};
-
-export function RepositoryPanel({
-  repositories,
-  onAddRemote,
-  onAddLocal,
-  onCreateManaged,
-  onDelete,
-  onSetPrimary,
-}: RepositoryPanelProps) {
-  const [addMode, setAddMode] = useState<AddMode>(null);
-  const [name, setName] = useState("");
-  const [url, setUrl] = useState("");
-  const [path, setPath] = useState("");
-  const [isPrimary, setIsPrimary] = useState(false);
-  // Daemon directory suggestions for local repositories
-  const [suggestedDirectories, setSuggestedDirectories] = useState<DaemonDirectory[]>([]);
-  // Repository history suggestions
-  const [repoSuggestions, setRepoSuggestions] = useState<RepositoryHistoryEntry[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-
-  // Fetch daemon directories when "local" mode is selected
-  useEffect(() => {
-    if (addMode === "local") {
-      getDaemonDirectories()
-        .then((res) => setSuggestedDirectories(res.directories))
-        .catch(() => setSuggestedDirectories([]));
-    }
-  }, [addMode]);
-
-  // Fetch repository suggestions when mode changes to remote or local
-  useEffect(() => {
-    if (addMode === "remote" || addMode === "local") {
-      getRepositorySuggestions(addMode, undefined, 10)
-        .then((res) => {
-          setRepoSuggestions(res.entries);
-          setShowSuggestions(res.entries.length > 0);
-        })
-        .catch(() => {
-          setRepoSuggestions([]);
-          setShowSuggestions(false);
-        });
-    } else {
-      setRepoSuggestions([]);
-      setShowSuggestions(false);
-    }
-  }, [addMode]);
-
-  // Apply a suggestion to the form
-  const applySuggestion = (suggestion: RepositoryHistoryEntry) => {
-    setName(suggestion.name);
-    if (suggestion.repositoryUrl) {
-      setUrl(suggestion.repositoryUrl);
-    }
-    if (suggestion.localPath) {
-      setPath(suggestion.localPath);
-    }
-    setShowSuggestions(false);
-  };
-
-  const handleAdd = () => {
-    if (!name.trim()) return;
-
-    if (addMode === "remote" && url.trim()) {
-      onAddRemote(name.trim(), url.trim(), isPrimary);
-    } else if (addMode === "local" && path.trim()) {
-      onAddLocal(name.trim(), path.trim(), isPrimary);
-    } else if (addMode === "managed") {
-      onCreateManaged(name.trim(), isPrimary);
-    }
-
-    // Reset form
-    setAddMode(null);
-    setName("");
-    setUrl("");
-    setPath("");
-    setIsPrimary(false);
-  };
-
-  const handleCancel = () => {
-    setAddMode(null);
-    setName("");
-    setUrl("");
-    setPath("");
-    setIsPrimary(false);
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Repository list */}
-      {repositories.length === 0 ? (
-        <p className="font-mono text-xs text-[#555]">
-          No repositories configured
-        </p>
-      ) : (
-        <div className="space-y-2">
-          {repositories.map((repo) => (
-            <div
-              key={repo.id}
-              className="flex items-center gap-3 p-3 border border-[rgba(117,170,252,0.2)]"
-            >
-              {/* Type icon */}
-              <span className="font-mono text-[10px] text-[#555] uppercase w-6">
-                {sourceTypeIcons[repo.sourceType]}
-              </span>
-
-              {/* Name and details */}
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="font-mono text-sm text-[#dbe7ff] truncate">
-                    {repo.name}
-                  </span>
-                  {repo.isPrimary && (
-                    <span className="px-1 py-0.5 text-[8px] font-mono uppercase bg-[rgba(117,170,252,0.1)] text-[#75aafc] border border-[rgba(117,170,252,0.3)]">
-                      Primary
-                    </span>
-                  )}
-                </div>
-                <div className="font-mono text-[10px] text-[#555] truncate">
-                  {repo.repositoryUrl || repo.localPath || "(pending creation)"}
-                </div>
-              </div>
-
-              {/* Status */}
-              <span
-                className={`font-mono text-[10px] uppercase ${
-                  statusColors[repo.status]
-                }`}
-              >
-                {repo.status}
-              </span>
-
-              {/* Actions */}
-              <div className="flex items-center gap-1">
-                {!repo.isPrimary && repo.status === "ready" && (
-                  <button
-                    onClick={() => onSetPrimary(repo.id)}
-                    className="p-1 font-mono text-[10px] text-[#555] hover:text-[#75aafc] transition-colors"
-                    title="Set as primary"
-                  >
-                    *
-                  </button>
-                )}
-                <button
-                  onClick={() => onDelete(repo.id)}
-                  className="p-1 font-mono text-[10px] text-[#555] hover:text-red-400 transition-colors"
-                  title="Remove"
-                >
-                  x
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Add repository form */}
-      {addMode ? (
-        <div className="p-3 border border-[rgba(117,170,252,0.3)] space-y-3">
-          <div className="flex items-center justify-between mb-2">
-            <span className="font-mono text-xs text-[#75aafc] uppercase">
-              Add {sourceTypeLabels[addMode]} Repository
-            </span>
-            {repoSuggestions.length > 0 && (
-              <button
-                onClick={() => setShowSuggestions(!showSuggestions)}
-                className="font-mono text-[10px] text-[#555] hover:text-[#9bc3ff] transition-colors"
-              >
-                {showSuggestions ? "Hide suggestions" : `${repoSuggestions.length} suggestions`}
-              </button>
-            )}
-          </div>
-
-          {/* Suggestions dropdown */}
-          {showSuggestions && repoSuggestions.length > 0 && (
-            <div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto">
-              {repoSuggestions.map((suggestion) => (
-                <button
-                  key={suggestion.id}
-                  onClick={() => applySuggestion(suggestion)}
-                  className="w-full text-left px-3 py-2 font-mono text-xs hover:bg-[rgba(117,170,252,0.1)] transition-colors border-b border-[rgba(117,170,252,0.1)] last:border-b-0"
-                >
-                  <div className="flex items-center justify-between">
-                    <span className="text-[#9bc3ff] truncate">{suggestion.name}</span>
-                    <span className="text-[10px] text-[#556677]">
-                      {suggestion.useCount}×
-                    </span>
-                  </div>
-                  <div className="text-[10px] text-[#556677] truncate">
-                    {addMode === "local" ? suggestion.localPath : suggestion.repositoryUrl}
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Repository name"
-            className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-xs focus:outline-none focus:border-[#75aafc]"
-          />
-
-          {addMode === "remote" && (
-            <input
-              type="text"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              placeholder="https://github.com/owner/repo"
-              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-xs focus:outline-none focus:border-[#75aafc]"
-            />
-          )}
-
-          {addMode === "local" && (
-            <DirectoryInput
-              value={path}
-              onChange={setPath}
-              suggestions={suggestedDirectories}
-              placeholder="/path/to/repository"
-            />
-          )}
-
-          {addMode === "managed" && (
-            <p className="font-mono text-xs text-[#555]">
-              Makima will create this repository via the daemon.
-            </p>
-          )}
-
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isPrimary}
-              onChange={(e) => setIsPrimary(e.target.checked)}
-              className="w-3 h-3"
-            />
-            <span className="font-mono text-xs text-[#9bc3ff]">
-              Set as primary repository
-            </span>
-          </label>
-
-          <div className="flex gap-2">
-            <button
-              onClick={handleCancel}
-              className="px-3 py-1.5 font-mono text-xs text-[#555] hover:text-[#9bc3ff] transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleAdd}
-              disabled={
-                !name.trim() ||
-                (addMode === "remote" && !url.trim()) ||
-                (addMode === "local" && !path.trim())
-              }
-              className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Add Repository
-            </button>
-          </div>
-        </div>
-      ) : (
-        <div className="flex gap-2">
-          <button
-            onClick={() => setAddMode("remote")}
-            className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-          >
-            + Remote
-          </button>
-          <button
-            onClick={() => setAddMode("local")}
-            className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-          >
-            + Local
-          </button>
-          <button
-            onClick={() => setAddMode("managed")}
-            className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
-          >
-            + Managed
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/components/contracts/TaskDerivationPreview.tsx b/makima/frontend/src/components/contracts/TaskDerivationPreview.tsx
deleted file mode 100644
index 07421ef..0000000
--- a/makima/frontend/src/components/contracts/TaskDerivationPreview.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { useState, useCallback } from "react";
-
-export interface ParsedTask {
-  name: string;
-  description?: string;
-  group?: string;
-  order: number;
-  completed: boolean;
-  dependencies: string[];
-}
-
-interface TaskDerivationPreviewProps {
-  tasks: ParsedTask[];
-  groups: string[];
-  fileName: string;
-  onCreateTasks: (selectedTasks: ParsedTask[]) => void;
-  onCancel: () => void;
-  loading?: boolean;
-}
-
-export function TaskDerivationPreview({
-  tasks,
-  groups,
-  fileName,
-  onCreateTasks,
-  onCancel,
-  loading = false,
-}: TaskDerivationPreviewProps) {
-  const [selectedIndices, setSelectedIndices] = useState<Set<number>>(
-    new Set(tasks.map((_, i) => i)) // Select all by default
-  );
-
-  const toggleTask = useCallback((index: number) => {
-    setSelectedIndices((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(index)) {
-        newSet.delete(index);
-      } else {
-        newSet.add(index);
-      }
-      return newSet;
-    });
-  }, []);
-
-  const selectAll = useCallback(() => {
-    setSelectedIndices(new Set(tasks.map((_, i) => i)));
-  }, [tasks]);
-
-  const selectNone = useCallback(() => {
-    setSelectedIndices(new Set());
-  }, []);
-
-  const handleCreate = useCallback(() => {
-    const selectedTasks = tasks.filter((_, i) => selectedIndices.has(i));
-    onCreateTasks(selectedTasks);
-  }, [tasks, selectedIndices, onCreateTasks]);
-
-  // Group tasks by their group property
-  const tasksByGroup = tasks.reduce((acc, task, index) => {
-    const groupKey = task.group || "Ungrouped";
-    if (!acc[groupKey]) {
-      acc[groupKey] = [];
-    }
-    acc[groupKey].push({ task, index });
-    return acc;
-  }, {} as Record<string, { task: ParsedTask; index: number }[]>);
-
-  const selectedCount = selectedIndices.size;
-  const totalCount = tasks.length;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="w-full max-w-2xl p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] max-h-[80vh] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h3 className="font-mono text-sm text-[#75aafc] uppercase">
-              Create Tasks from Document
-            </h3>
-            <p className="font-mono text-xs text-[#555] mt-1">
-              Source: {fileName}
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={selectAll}
-              className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
-            >
-              Select All
-            </button>
-            <span className="text-[#555]">|</span>
-            <button
-              onClick={selectNone}
-              className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
-            >
-              Select None
-            </button>
-          </div>
-        </div>
-
-        {/* Task List */}
-        <div className="flex-1 overflow-y-auto space-y-4 mb-4">
-          {groups.length > 0 ? (
-            // Grouped view
-            Object.entries(tasksByGroup).map(([groupName, groupTasks]) => (
-              <div key={groupName} className="space-y-2">
-                <h4 className="font-mono text-xs text-[#9bc3ff] uppercase border-b border-[rgba(117,170,252,0.2)] pb-1">
-                  {groupName}
-                </h4>
-                {groupTasks.map(({ task, index }) => (
-                  <TaskItem
-                    key={index}
-                    task={task}
-                    index={index}
-                    selected={selectedIndices.has(index)}
-                    onToggle={() => toggleTask(index)}
-                  />
-                ))}
-              </div>
-            ))
-          ) : (
-            // Flat view
-            tasks.map((task, index) => (
-              <TaskItem
-                key={index}
-                task={task}
-                index={index}
-                selected={selectedIndices.has(index)}
-                onToggle={() => toggleTask(index)}
-              />
-            ))
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between pt-4 border-t border-[rgba(117,170,252,0.2)]">
-          <span className="font-mono text-xs text-[#555]">
-            {selectedCount} of {totalCount} tasks selected
-          </span>
-          <div className="flex gap-2">
-            <button
-              onClick={onCancel}
-              disabled={loading}
-              className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors disabled:opacity-50"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleCreate}
-              disabled={loading || selectedCount === 0}
-              className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {loading ? "Creating..." : `Create ${selectedCount} Task${selectedCount !== 1 ? "s" : ""}`}
-            </button>
-          </div>
-        </div>
-
-        {/* Chaining info */}
-        {selectedCount > 1 && (
-          <p className="font-mono text-[10px] text-[#555] mt-2 text-center">
-            Tasks will be chained: each task continues from the previous one's work
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function TaskItem({
-  task,
-  index,
-  selected,
-  onToggle,
-}: {
-  task: ParsedTask;
-  index: number;
-  selected: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <button
-      onClick={onToggle}
-      className={`w-full text-left p-3 border transition-colors ${
-        selected
-          ? "border-[#75aafc] bg-[rgba(117,170,252,0.1)]"
-          : "border-[rgba(117,170,252,0.15)] hover:border-[rgba(117,170,252,0.3)]"
-      }`}
-    >
-      <div className="flex items-start gap-2">
-        <span
-          className={`font-mono text-xs mt-0.5 ${
-            selected ? "text-[#75aafc]" : "text-[#555]"
-          }`}
-        >
-          {selected ? "[x]" : "[ ]"}
-        </span>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="font-mono text-[10px] text-[#555]">#{index + 1}</span>
-            <span className="font-mono text-sm text-[#dbe7ff]">{task.name}</span>
-            {task.completed && (
-              <span className="font-mono text-[9px] text-green-400 uppercase">
-                done in source
-              </span>
-            )}
-          </div>
-          {task.description && (
-            <p className="font-mono text-xs text-[#555] mt-1 truncate">
-              {task.description}
-            </p>
-          )}
-          {task.dependencies.length > 0 && (
-            <p className="font-mono text-[10px] text-[#75aafc] mt-1">
-              Depends on: {task.dependencies.join(", ")}
-            </p>
-          )}
-        </div>
-      </div>
-    </button>
-  );
-}
diff --git a/makima/frontend/src/main.tsx b/makima/frontend/src/main.tsx
index bbb72f3..c1c6c35 100644
--- a/makima/frontend/src/main.tsx
+++ b/makima/frontend/src/main.tsx
@@ -12,14 +12,12 @@ import { ProtectedRoute } from "./components/ProtectedRoute";
 import HomePage from "./routes/_index";
 import ListenPage from "./routes/listen";
 import FilesPage from "./routes/files";
-import ContractsPage from "./routes/contracts";
 import OrdersPage from "./routes/orders";
 import MeshPage from "./routes/mesh";
 import DaemonsPage from "./routes/daemons";
 import HistoryPage from "./routes/history";
 import LoginPage from "./routes/login";
 import SettingsPage from "./routes/settings";
-import ContractFilePage from "./routes/contract-file";
 import SpeakPage from "./routes/speak";
 import DirectivesPage from "./routes/directives";
 import ExecRedirect from "./routes/exec-redirect";
@@ -61,30 +59,6 @@ createRoot(document.getElementById("root")!).render(
               </ProtectedRoute>
             }
           />
-          <Route
-            path="/contracts"
-            element={
-              <ProtectedRoute>
-                <ContractsPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/contracts/:id"
-            element={
-              <ProtectedRoute>
-                <ContractsPage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/contracts/:id/files/:fileId"
-            element={
-              <ProtectedRoute>
-                <ContractFilePage />
-              </ProtectedRoute>
-            }
-          />
           <Route
             path="/orders"
             element={
diff --git a/makima/frontend/src/routes/contract-file.tsx b/makima/frontend/src/routes/contract-file.tsx
deleted file mode 100644
index 9ed25ed..0000000
--- a/makima/frontend/src/routes/contract-file.tsx
+++ /dev/null
@@ -1,659 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { useParams, useNavigate } from "react-router";
-import { useAuth } from "../contexts/AuthContext";
-import { Masthead } from "../components/Masthead";
-import { FileDetail, type FocusedElement } from "../components/files/FileDetail";
-import { CliInput } from "../components/files/CliInput";
-import { ConflictNotification } from "../components/files/ConflictNotification";
-import { UpdateNotification } from "../components/files/UpdateNotification";
-import { useFiles } from "../hooks/useFiles";
-import { useVersionHistory } from "../hooks/useVersionHistory";
-import {
-  useFileSubscription,
-  type FileUpdateEvent,
-} from "../hooks/useFileSubscription";
-import type { FileDetail as FileDetailType, BodyElement } from "../lib/api";
-
-/**
- * ContractFilePage - Wrapper for viewing files within a contract context
- *
- * This component handles the /contracts/:contractId/files/:fileId route,
- * providing navigation back to the contract and rendering the file detail view.
- */
-export default function ContractFilePage() {
-  const { id: contractId, fileId } = useParams<{ id: string; fileId: string }>();
-  const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
-  const navigate = useNavigate();
-
-  // Redirect to login if not authenticated (when auth is configured)
-  useEffect(() => {
-    if (!authLoading && isAuthConfigured && !isAuthenticated) {
-      navigate("/login");
-    }
-  }, [authLoading, isAuthConfigured, isAuthenticated, navigate]);
-
-  // Show loading while checking auth
-  if (authLoading) {
-    return (
-      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
-        <Masthead showNav />
-        <main className="flex-1 flex items-center justify-center">
-          <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
-        </main>
-      </div>
-    );
-  }
-
-  // Don't render if not authenticated (will redirect)
-  if (isAuthConfigured && !isAuthenticated) {
-    return null;
-  }
-
-  // Render the file page with contract context
-  return <ContractAwareFilesPage contractId={contractId} fileId={fileId} />;
-}
-
-// A version of the files page aware of contract context
-function ContractAwareFilesPage({
-  contractId,
-  fileId,
-}: {
-  contractId?: string;
-  fileId?: string;
-}) {
-  const navigate = useNavigate();
-  const { error, conflict, clearConflict, fetchFile, editFile, removeFile } = useFiles();
-  const [fileDetail, setFileDetail] = useState<FileDetailType | null>(null);
-  const [detailLoading, setDetailLoading] = useState(false);
-  const [remoteUpdate, setRemoteUpdate] = useState<FileUpdateEvent | null>(null);
-  const [remoteFileData, setRemoteFileData] = useState<FileDetailType | null>(null);
-  const [focusedElement, setFocusedElement] = useState<FocusedElement | null>(null);
-  const [suggestedPrompt, setSuggestedPrompt] = useState<string | null>(null);
-  const pendingUpdateRef = useRef(false);
-  const lastSentVersionRef = useRef<number | null>(null);
-  const lastSavedVersionRef = useRef<number | null>(null);
-  const hasLocalChangesRef = useRef(false);
-  const isActivelyEditingRef = useRef(false);
-  const currentVersionRef = useRef<number | null>(null);
-
-  // Handle back navigation - go to contract detail instead of /files
-  const handleBack = useCallback(() => {
-    if (contractId) {
-      navigate(`/contracts/${contractId}`);
-    } else {
-      navigate("/contracts");
-    }
-  }, [contractId, navigate]);
-
-  const updateHasLocalChanges = useCallback((value: boolean) => {
-    hasLocalChangesRef.current = value;
-  }, []);
-
-  const updateIsActivelyEditing = useCallback((value: boolean) => {
-    isActivelyEditingRef.current = value;
-  }, []);
-
-  // Version history
-  const {
-    versions,
-    loading: versionsLoading,
-    selectedVersion,
-    loadingVersion,
-    restoring,
-    fetchVersion,
-    restoreToVersion,
-    clearSelectedVersion,
-    fetchVersions,
-  } = useVersionHistory({
-    fileId: fileId || null,
-    currentVersion: fileDetail?.version || 0,
-  });
-
-  const handleRestoreVersion = useCallback(
-    async (targetVersion: number) => {
-      const result = await restoreToVersion(targetVersion);
-      if (result) {
-        currentVersionRef.current = result.version;
-        setFileDetail(result);
-        updateHasLocalChanges(false);
-        fetchVersions();
-      }
-    },
-    [restoreToVersion, fetchVersions, updateHasLocalChanges]
-  );
-
-  // Load file detail when fileId is provided
-  useEffect(() => {
-    if (fileId) {
-      setDetailLoading(true);
-      updateHasLocalChanges(false);
-      pendingUpdateRef.current = false;
-      lastSentVersionRef.current = null;
-      lastSavedVersionRef.current = null;
-      currentVersionRef.current = null;
-      setRemoteUpdate(null);
-      setRemoteFileData(null);
-      setFocusedElement(null);
-      fetchFile(fileId).then((detail) => {
-        if (detail) {
-          currentVersionRef.current = detail.version;
-        }
-        setFileDetail(detail);
-        setDetailLoading(false);
-      });
-    } else {
-      setFileDetail(null);
-      currentVersionRef.current = null;
-      updateHasLocalChanges(false);
-    }
-  }, [fileId, fetchFile, updateHasLocalChanges]);
-
-  // Handle file update events from WebSocket
-  const handleFileUpdate = useCallback(
-    async (event: FileUpdateEvent) => {
-      if (lastSavedVersionRef.current !== null && event.version === lastSavedVersionRef.current) {
-        lastSavedVersionRef.current = null;
-        return;
-      }
-
-      if (pendingUpdateRef.current) {
-        if (lastSentVersionRef.current !== null) {
-          const expectedNewVersion = lastSentVersionRef.current + 1;
-          if (event.version === expectedNewVersion) {
-            pendingUpdateRef.current = false;
-            lastSentVersionRef.current = null;
-            return;
-          }
-        }
-        return;
-      }
-
-      if (currentVersionRef.current !== null && event.version === currentVersionRef.current) {
-        return;
-      }
-
-      if (!hasLocalChangesRef.current && !isActivelyEditingRef.current) {
-        const detail = await fetchFile(event.fileId);
-        if (detail) {
-          currentVersionRef.current = detail.version;
-        }
-        setFileDetail(detail);
-      } else {
-        const remoteData = await fetchFile(event.fileId);
-        setRemoteFileData(remoteData);
-        setRemoteUpdate(event);
-      }
-    },
-    [fetchFile]
-  );
-
-  useFileSubscription({
-    fileId: fileId || null,
-    onUpdate: handleFileUpdate,
-  });
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      if (confirm("Are you sure you want to delete this file?")) {
-        const success = await removeFile(id);
-        if (success && fileId === id) {
-          handleBack();
-        }
-      }
-    },
-    [removeFile, fileId, handleBack]
-  );
-
-  const handleSave = useCallback(
-    async (id: string, name: string, description: string) => {
-      if (!fileDetail) return;
-      pendingUpdateRef.current = true;
-      lastSentVersionRef.current = fileDetail.version;
-      try {
-        const result = await editFile(id, { name, description, version: fileDetail.version });
-        if (result) {
-          lastSavedVersionRef.current = result.version;
-          currentVersionRef.current = result.version;
-          setFileDetail(result);
-          updateHasLocalChanges(false);
-        }
-      } finally {
-        pendingUpdateRef.current = false;
-        lastSentVersionRef.current = null;
-      }
-    },
-    [editFile, fileDetail, updateHasLocalChanges]
-  );
-
-  const handleBodyUpdate = useCallback(
-    (body: BodyElement[], summary: string | null) => {
-      if (fileDetail) {
-        setFileDetail({
-          ...fileDetail,
-          body,
-          summary,
-        });
-      }
-    },
-    [fileDetail]
-  );
-
-  const handleBodyElementUpdate = useCallback(
-    async (index: number, element: BodyElement) => {
-      if (fileDetail && fileId) {
-        const newBody = [...fileDetail.body];
-        newBody[index] = element;
-
-        setFileDetail({
-          ...fileDetail,
-          body: newBody,
-        });
-        updateHasLocalChanges(true);
-
-        pendingUpdateRef.current = true;
-        lastSentVersionRef.current = fileDetail.version;
-        try {
-          const result = await editFile(fileId, { body: newBody, version: fileDetail.version });
-          if (result) {
-            lastSavedVersionRef.current = result.version;
-            currentVersionRef.current = result.version;
-            setFileDetail(result);
-            updateHasLocalChanges(false);
-          }
-        } finally {
-          pendingUpdateRef.current = false;
-          lastSentVersionRef.current = null;
-        }
-      }
-    },
-    [fileDetail, fileId, editFile, updateHasLocalChanges]
-  );
-
-  const handleBodyReorder = useCallback(
-    async (fromIndex: number, toIndex: number) => {
-      if (fileDetail && fileId) {
-        const newBody = [...fileDetail.body];
-        const [movedElement] = newBody.splice(fromIndex, 1);
-        newBody.splice(toIndex, 0, movedElement);
-
-        setFileDetail({
-          ...fileDetail,
-          body: newBody,
-        });
-        updateHasLocalChanges(true);
-
-        pendingUpdateRef.current = true;
-        lastSentVersionRef.current = fileDetail.version;
-        try {
-          const result = await editFile(fileId, { body: newBody, version: fileDetail.version });
-          if (result) {
-            lastSavedVersionRef.current = result.version;
-            currentVersionRef.current = result.version;
-            setFileDetail(result);
-            updateHasLocalChanges(false);
-          }
-        } finally {
-          pendingUpdateRef.current = false;
-          lastSentVersionRef.current = null;
-        }
-      }
-    },
-    [fileDetail, fileId, editFile, updateHasLocalChanges]
-  );
-
-  const handleBodyElementDelete = useCallback(
-    async (index: number) => {
-      if (fileDetail && fileId) {
-        const newBody = fileDetail.body.filter((_, i) => i !== index);
-
-        setFileDetail({
-          ...fileDetail,
-          body: newBody,
-        });
-        updateHasLocalChanges(true);
-
-        if (focusedElement?.index === index) {
-          setFocusedElement(null);
-        } else if (focusedElement && focusedElement.index > index) {
-          setFocusedElement({
-            ...focusedElement,
-            index: focusedElement.index - 1,
-          });
-        }
-
-        pendingUpdateRef.current = true;
-        lastSentVersionRef.current = fileDetail.version;
-        try {
-          const result = await editFile(fileId, { body: newBody, version: fileDetail.version });
-          if (result) {
-            lastSavedVersionRef.current = result.version;
-            currentVersionRef.current = result.version;
-            setFileDetail(result);
-            updateHasLocalChanges(false);
-          }
-        } finally {
-          pendingUpdateRef.current = false;
-          lastSentVersionRef.current = null;
-        }
-      }
-    },
-    [fileDetail, fileId, editFile, updateHasLocalChanges, focusedElement]
-  );
-
-  const handleBodyElementDuplicate = useCallback(
-    async (index: number) => {
-      if (fileDetail && fileId) {
-        const elementToDuplicate = fileDetail.body[index];
-        if (!elementToDuplicate) return;
-
-        const newBody = [...fileDetail.body];
-        newBody.splice(index + 1, 0, { ...elementToDuplicate });
-
-        setFileDetail({
-          ...fileDetail,
-          body: newBody,
-        });
-        updateHasLocalChanges(true);
-
-        if (focusedElement && focusedElement.index > index) {
-          setFocusedElement({
-            ...focusedElement,
-            index: focusedElement.index + 1,
-          });
-        }
-
-        pendingUpdateRef.current = true;
-        lastSentVersionRef.current = fileDetail.version;
-        try {
-          const result = await editFile(fileId, { body: newBody, version: fileDetail.version });
-          if (result) {
-            lastSavedVersionRef.current = result.version;
-            currentVersionRef.current = result.version;
-            setFileDetail(result);
-            updateHasLocalChanges(false);
-          }
-        } finally {
-          pendingUpdateRef.current = false;
-          lastSentVersionRef.current = null;
-        }
-      }
-    },
-    [fileDetail, fileId, editFile, updateHasLocalChanges, focusedElement]
-  );
-
-  const handleFocusElement = useCallback((element: FocusedElement | null) => {
-    setFocusedElement(element);
-  }, []);
-
-  const handleClearFocus = useCallback(() => {
-    setFocusedElement(null);
-  }, []);
-
-  const handleConvertElement = useCallback(
-    async (index: number, toType: string) => {
-      if (!fileDetail || !fileId) return;
-
-      const element = fileDetail.body[index];
-      if (!element) return;
-
-      let textContent = "";
-      switch (element.type) {
-        case "heading":
-        case "paragraph":
-          textContent = element.text;
-          break;
-        case "code":
-          textContent = element.content;
-          break;
-        case "list":
-          textContent = element.items.join("\n");
-          break;
-        default:
-          return;
-      }
-
-      let newElement: BodyElement;
-      if (toType === "paragraph") {
-        newElement = { type: "paragraph", text: textContent };
-      } else if (toType === "list_unordered") {
-        const items = textContent.split("\n").filter(line => line.trim());
-        newElement = { type: "list", ordered: false, items };
-      } else if (toType === "list_ordered") {
-        const items = textContent.split("\n").filter(line => line.trim());
-        newElement = { type: "list", ordered: true, items };
-      } else if (toType === "code") {
-        newElement = { type: "code", content: textContent };
-      } else if (toType.startsWith("heading_")) {
-        const level = parseInt(toType.replace("heading_", ""), 10) as 1 | 2 | 3 | 4 | 5 | 6;
-        newElement = { type: "heading", level, text: textContent };
-      } else {
-        return;
-      }
-
-      const newBody = [...fileDetail.body];
-      newBody[index] = newElement;
-
-      setFileDetail({ ...fileDetail, body: newBody });
-      updateHasLocalChanges(true);
-
-      if (focusedElement?.index === index) {
-        setFocusedElement({
-          index,
-          type: newElement.type,
-          preview: textContent.slice(0, 50) + (textContent.length > 50 ? "..." : ""),
-        });
-      }
-
-      pendingUpdateRef.current = true;
-      lastSentVersionRef.current = fileDetail.version;
-      try {
-        const result = await editFile(fileId, { body: newBody, version: fileDetail.version });
-        if (result) {
-          lastSavedVersionRef.current = result.version;
-          currentVersionRef.current = result.version;
-          setFileDetail(result);
-          updateHasLocalChanges(false);
-        }
-      } finally {
-        pendingUpdateRef.current = false;
-        lastSentVersionRef.current = null;
-      }
-    },
-    [fileDetail, fileId, editFile, updateHasLocalChanges, focusedElement]
-  );
-
-  const handleGenerateFromElement = useCallback(
-    (index: number, action: string) => {
-      if (!fileDetail) return;
-
-      const element = fileDetail.body[index];
-      if (!element) return;
-
-      let preview = "";
-      switch (element.type) {
-        case "heading":
-        case "paragraph":
-          preview = element.text.slice(0, 50);
-          break;
-        case "code":
-          preview = element.content.slice(0, 50);
-          break;
-        case "list":
-          preview = element.items[0]?.slice(0, 40) || "";
-          break;
-        default:
-          preview = "Element";
-      }
-
-      setFocusedElement({
-        index,
-        type: element.type,
-        preview: preview + (preview.length >= 50 ? "..." : ""),
-      });
-
-      let prompt = "";
-      switch (action) {
-        case "elaborate":
-          prompt = "Elaborate and expand on this content";
-          break;
-        case "summarize":
-          prompt = "Summarize this content";
-          break;
-        case "extract_actions":
-          prompt = "Extract action items from this content";
-          break;
-      }
-      setSuggestedPrompt(prompt);
-    },
-    [fileDetail]
-  );
-
-  // Conflict resolution handlers
-  const handleConflictReload = useCallback(async () => {
-    if (fileId) {
-      clearConflict();
-      const detail = await fetchFile(fileId);
-      if (detail) {
-        currentVersionRef.current = detail.version;
-      }
-      setFileDetail(detail);
-      updateHasLocalChanges(false);
-    }
-  }, [fileId, clearConflict, fetchFile, updateHasLocalChanges]);
-
-  const handleConflictForceOverwrite = useCallback(async () => {
-    if (fileId && fileDetail) {
-      clearConflict();
-      const latest = await fetchFile(fileId);
-      if (latest) {
-        pendingUpdateRef.current = true;
-        lastSentVersionRef.current = latest.version;
-        try {
-          const result = await editFile(fileId, { body: fileDetail.body, version: latest.version });
-          if (result) {
-            lastSavedVersionRef.current = result.version;
-            currentVersionRef.current = result.version;
-            setFileDetail(result);
-            updateHasLocalChanges(false);
-          }
-        } finally {
-          pendingUpdateRef.current = false;
-          lastSentVersionRef.current = null;
-        }
-      }
-    }
-  }, [fileId, fileDetail, clearConflict, fetchFile, editFile, updateHasLocalChanges]);
-
-  const handleRemoteUpdateRefresh = useCallback(async () => {
-    if (fileId) {
-      const detail = await fetchFile(fileId);
-      if (detail) {
-        currentVersionRef.current = detail.version;
-      }
-      setFileDetail(detail);
-      setRemoteUpdate(null);
-      setRemoteFileData(null);
-      updateHasLocalChanges(false);
-    }
-  }, [fileId, fetchFile, updateHasLocalChanges]);
-
-  const handleRemoteUpdateDismiss = useCallback(() => {
-    setRemoteUpdate(null);
-    setRemoteFileData(null);
-  }, []);
-
-  return (
-    <div className="relative z-10 h-screen flex flex-col overflow-hidden">
-      <Masthead showTicker={false} showNav />
-
-      <main className="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
-        {error && (
-          <div className="mb-4 p-3 border border-red-400/50 bg-red-400/10 text-red-400 font-mono text-sm shrink-0">
-            {error}
-          </div>
-        )}
-
-        {fileId && fileDetail ? (
-          <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-            <div className="flex-1 min-h-0 overflow-hidden">
-              <FileDetail
-                file={fileDetail}
-                loading={detailLoading}
-                onBack={handleBack}
-                onSave={handleSave}
-                onDelete={handleDelete}
-                onBodyElementUpdate={handleBodyElementUpdate}
-                onBodyReorder={handleBodyReorder}
-                onBodyElementDelete={handleBodyElementDelete}
-                onBodyElementDuplicate={handleBodyElementDuplicate}
-                onConvertElement={handleConvertElement}
-                onGenerateFromElement={handleGenerateFromElement}
-                onEditingChange={updateIsActivelyEditing}
-                hasPendingRemoteUpdate={!!remoteUpdate}
-                onOverwrite={handleRemoteUpdateDismiss}
-                focusedElement={focusedElement}
-                onFocusElement={handleFocusElement}
-                versions={versions}
-                versionsLoading={versionsLoading}
-                selectedVersion={selectedVersion}
-                loadingVersion={loadingVersion}
-                restoring={restoring}
-                onSelectVersion={fetchVersion}
-                onRestoreVersion={handleRestoreVersion}
-                onClearVersionSelection={clearSelectedVersion}
-              />
-            </div>
-            <div className="shrink-0">
-              <CliInput
-                fileId={fileId}
-                onUpdate={handleBodyUpdate}
-                focusedElement={focusedElement}
-                onClearFocus={handleClearFocus}
-                suggestedPrompt={suggestedPrompt}
-                onClearSuggestedPrompt={() => setSuggestedPrompt(null)}
-              />
-            </div>
-          </div>
-        ) : fileId && detailLoading ? (
-          <div className="panel h-full flex items-center justify-center">
-            <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
-          </div>
-        ) : (
-          <div className="panel h-full flex items-center justify-center">
-            <div className="text-center">
-              <p className="font-mono text-sm text-[#555] mb-4">
-                File not found
-              </p>
-              <button
-                onClick={handleBack}
-                className="px-4 py-2 font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
-              >
-                &larr; Back to Contract
-              </button>
-            </div>
-          </div>
-        )}
-      </main>
-
-      {/* Conflict notification */}
-      {conflict?.hasConflict && (
-        <ConflictNotification
-          onReload={handleConflictReload}
-          onForceOverwrite={handleConflictForceOverwrite}
-          onDismiss={clearConflict}
-        />
-      )}
-
-      {/* Remote update notification */}
-      {remoteUpdate && (
-        <UpdateNotification
-          updatedBy={remoteUpdate.updatedBy}
-          localBody={fileDetail?.body || []}
-          remoteBody={remoteFileData?.body || []}
-          onRefresh={handleRemoteUpdateRefresh}
-          onDismiss={handleRemoteUpdateDismiss}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/makima/frontend/src/routes/contracts.tsx b/makima/frontend/src/routes/contracts.tsx
deleted file mode 100644
index ce9ceca..0000000
--- a/makima/frontend/src/routes/contracts.tsx
+++ /dev/null
@@ -1,885 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { Masthead } from "../components/Masthead";
-import { ContractList } from "../components/contracts/ContractList";
-import { ContractDetail } from "../components/contracts/ContractDetail";
-import { DirectoryInput } from "../components/mesh/DirectoryInput";
-import { useContracts } from "../hooks/useContracts";
-import { useAuth } from "../contexts/AuthContext";
-import {
-  createTask,
-  getDaemonDirectories,
-  getRepositorySuggestions,
-  listContractTypes,
-} from "../lib/api";
-import type {
-  ContractWithRelations,
-  ContractSummary,
-  ContractPhase,
-  ContractStatus,
-  ContractType,
-  CreateContractRequest,
-  RepositorySourceType,
-  DaemonDirectory,
-  RepositoryHistoryEntry,
-  ContractTypeTemplate,
-} from "../lib/api";
-
-export default function ContractsPage() {
-  const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
-  const navigate = useNavigate();
-
-  // Redirect to login if not authenticated (when auth is configured)
-  useEffect(() => {
-    if (!authLoading && isAuthConfigured && !isAuthenticated) {
-      navigate("/login");
-    }
-  }, [authLoading, isAuthConfigured, isAuthenticated, navigate]);
-
-  // Show loading while checking auth
-  if (authLoading) {
-    return (
-      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
-        <Masthead showNav />
-        <main className="flex-1 flex items-center justify-center">
-          <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
-        </main>
-      </div>
-    );
-  }
-
-  // Don't render if not authenticated (will redirect)
-  if (isAuthConfigured && !isAuthenticated) {
-    return null;
-  }
-
-  return <ContractsPageContent />;
-}
-
-function ContractsPageContent() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const {
-    contracts,
-    loading,
-    error,
-    fetchContract,
-    saveContract,
-    editContract,
-    removeContract,
-    changePhase,
-    addRemoteRepo,
-    addLocalRepo,
-    createManagedRepo,
-    removeRepo,
-    setRepoPrimary,
-  } = useContracts();
-
-  const [contractDetail, setContractDetail] = useState<ContractWithRelations | null>(null);
-  const [detailLoading, setDetailLoading] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
-  const [newContractName, setNewContractName] = useState("");
-  const [newContractDescription, setNewContractDescription] = useState("");
-  const [contractType, setContractType] = useState<ContractType>("simple");
-  const [initialPhase, setInitialPhase] = useState<ContractPhase>("plan");
-  const [repoType, setRepoType] = useState<RepositorySourceType>("remote");
-  const [repoName, setRepoName] = useState("");
-  const [repoUrl, setRepoUrl] = useState("");
-  const [repoPath, setRepoPath] = useState("");
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [suggestedDirectories, setSuggestedDirectories] = useState<DaemonDirectory[]>([]);
-  const [repoSuggestions, setRepoSuggestions] = useState<RepositoryHistoryEntry[]>([]);
-  const [showRepoSuggestions, setShowRepoSuggestions] = useState(false);
-  const [contractTypes, setContractTypes] = useState<ContractTypeTemplate[]>([]);
-  const [contractTypesLoading, setContractTypesLoading] = useState(false);
-  const [localOnly, setLocalOnly] = useState(false);
-
-  // Fetch contract types when modal opens - API returns both built-in and custom templates
-  useEffect(() => {
-    if (isCreating) {
-      setContractTypesLoading(true);
-
-      listContractTypes()
-        .then((res) => {
-          setContractTypes(res.contractTypes);
-          setContractTypesLoading(false);
-        })
-        .catch((err) => {
-          console.error("Failed to fetch contract types:", err);
-          // Fall back to built-in types
-          const builtinTypes: ContractTypeTemplate[] = [
-            {
-              id: "simple",
-              name: "Simple",
-              description: "Plan \u2192 Execute: Simple workflow with a plan document",
-              phases: ["plan", "execute"],
-              defaultPhase: "plan",
-              isBuiltin: true,
-            },
-            {
-              id: "specification",
-              name: "Specification",
-              description: "Research \u2192 Specify \u2192 Plan \u2192 Execute \u2192 Review: Full specification-driven development with TDD",
-              phases: ["research", "specify", "plan", "execute", "review"],
-              defaultPhase: "research",
-              isBuiltin: true,
-            },
-            {
-              id: "execute",
-              name: "Execute",
-              description: "Execute only: Minimal workflow for immediate task execution",
-              phases: ["execute"],
-              defaultPhase: "execute",
-              isBuiltin: true,
-            },
-          ];
-          setContractTypes(builtinTypes);
-          setContractTypesLoading(false);
-        });
-    }
-  }, [isCreating]);
-
-  // Fetch repository suggestions when modal opens and repo type changes
-  useEffect(() => {
-    if (isCreating && (repoType === "remote" || repoType === "local")) {
-      getRepositorySuggestions(repoType, undefined, 10)
-        .then((res) => {
-          setRepoSuggestions(res.entries);
-          setShowRepoSuggestions(res.entries.length > 0);
-        })
-        .catch(() => {
-          setRepoSuggestions([]);
-          setShowRepoSuggestions(false);
-        });
-    } else {
-      setRepoSuggestions([]);
-      setShowRepoSuggestions(false);
-    }
-  }, [isCreating, repoType]);
-
-  // Apply a repository suggestion
-  const applyRepoSuggestion = useCallback((suggestion: RepositoryHistoryEntry) => {
-    setRepoName(suggestion.name);
-    if (suggestion.repositoryUrl) {
-      setRepoUrl(suggestion.repositoryUrl);
-    }
-    if (suggestion.localPath) {
-      setRepoPath(suggestion.localPath);
-    }
-    setShowRepoSuggestions(false);
-  }, []);
-
-  // Fetch daemon directories when "local" repo type is selected
-  useEffect(() => {
-    if (repoType === "local" && isCreating) {
-      getDaemonDirectories()
-        .then((res) => setSuggestedDirectories(res.directories))
-        .catch(() => setSuggestedDirectories([]));
-    }
-  }, [repoType, isCreating]);
-
-  // Load contract detail when ID changes
-  useEffect(() => {
-    if (id) {
-      setDetailLoading(true);
-      fetchContract(id).then((contract) => {
-        setContractDetail(contract);
-        setDetailLoading(false);
-      });
-    } else {
-      setContractDetail(null);
-    }
-  }, [id, fetchContract]);
-
-  const handleSelect = useCallback(
-    (contractId: string) => {
-      navigate(`/contracts/${contractId}`);
-    },
-    [navigate]
-  );
-
-  const handleBack = useCallback(() => {
-    navigate("/contracts");
-  }, [navigate]);
-
-  const handleCreate = useCallback(() => {
-    setIsCreating(true);
-  }, []);
-
-  // Validate repository configuration
-  const isRepoValid = useCallback(() => {
-    if (!repoName.trim()) return false;
-    if (repoType === "remote" && !repoUrl.trim()) return false;
-    if (repoType === "local" && !repoPath.trim()) return false;
-    return true;
-  }, [repoType, repoName, repoUrl, repoPath]);
-
-  const handleCreateSubmit = useCallback(async () => {
-    if (!newContractName.trim()) return;
-    if (!isRepoValid()) {
-      setCreateError("Repository configuration is required");
-      return;
-    }
-
-    setCreateError(null);
-
-    // Get default phase from contract types or fall back to static function
-    const selectedType = contractTypes.find((t) => t.id === contractType);
-    const defaultPhaseForType = selectedType?.defaultPhase || (contractType === "simple" ? "plan" : "research");
-    const isCustomTemplate = selectedType && !selectedType.isBuiltin;
-
-    const data: CreateContractRequest = {
-      name: newContractName.trim(),
-      description: newContractDescription.trim() || undefined,
-      // For custom templates, send templateId instead of contractType
-      contractType: isCustomTemplate ? undefined : contractType,
-      templateId: isCustomTemplate ? contractType : undefined,
-      initialPhase: initialPhase !== defaultPhaseForType ? initialPhase : undefined,
-      localOnly: localOnly || undefined,
-    };
-
-    try {
-      const contract = await saveContract(data);
-      if (contract) {
-        // Add the repository after contract creation
-        try {
-          if (repoType === "remote") {
-            await addRemoteRepo(contract.id, {
-              name: repoName.trim(),
-              repositoryUrl: repoUrl.trim(),
-              isPrimary: true,
-            });
-          } else if (repoType === "local") {
-            await addLocalRepo(contract.id, {
-              name: repoName.trim(),
-              localPath: repoPath.trim(),
-              isPrimary: true,
-            });
-          } else if (repoType === "managed") {
-            await createManagedRepo(contract.id, {
-              name: repoName.trim(),
-              isPrimary: true,
-            });
-          }
-        } catch (repoError) {
-          console.error("Failed to add repository:", repoError);
-          // Still navigate to the contract - repo can be added later
-        }
-
-        // Clear form state
-        setIsCreating(false);
-        setNewContractName("");
-        setNewContractDescription("");
-        setContractType("simple");
-        setInitialPhase("plan");
-        setRepoType("remote");
-        setRepoName("");
-        setRepoUrl("");
-        setRepoPath("");
-        setLocalOnly(false);
-        navigate(`/contracts/${contract.id}`);
-      }
-    } catch (err) {
-      setCreateError(err instanceof Error ? err.message : "Failed to create contract");
-    }
-  }, [
-    newContractName,
-    newContractDescription,
-    contractType,
-    contractTypes,
-    initialPhase,
-    repoType,
-    repoName,
-    repoUrl,
-    repoPath,
-    isRepoValid,
-    saveContract,
-    addRemoteRepo,
-    addLocalRepo,
-    createManagedRepo,
-    navigate,
-  ]);
-
-  const handleCreateCancel = useCallback(() => {
-    setIsCreating(false);
-    setNewContractName("");
-    setNewContractDescription("");
-    setContractType("simple");
-    setInitialPhase("plan");
-    setRepoType("remote");
-    setRepoName("");
-    setRepoUrl("");
-    setRepoPath("");
-    setLocalOnly(false);
-    setCreateError(null);
-  }, []);
-
-  const handleUpdate = useCallback(
-    async (name: string, description: string) => {
-      if (contractDetail) {
-        const updated = await editContract(contractDetail.id, {
-          name,
-          description: description || undefined,
-          version: contractDetail.version,
-        });
-        if (updated) {
-          // Refresh detail
-          const refreshed = await fetchContract(contractDetail.id);
-          setContractDetail(refreshed);
-        }
-      }
-    },
-    [contractDetail, editContract, fetchContract]
-  );
-
-  const handleDelete = useCallback(async () => {
-    if (contractDetail && confirm("Are you sure you want to delete this contract?")) {
-      const success = await removeContract(contractDetail.id);
-      if (success) {
-        navigate("/contracts");
-      }
-    }
-  }, [contractDetail, removeContract, navigate]);
-
-  const handlePhaseChange = useCallback(
-    async (phase: ContractPhase) => {
-      if (contractDetail) {
-        const updated = await changePhase(contractDetail.id, phase);
-        if (updated) {
-          // Refresh detail
-          const refreshed = await fetchContract(contractDetail.id);
-          setContractDetail(refreshed);
-        }
-      }
-    },
-    [contractDetail, changePhase, fetchContract]
-  );
-
-  const handleStatusChange = useCallback(
-    async (status: ContractStatus) => {
-      if (contractDetail) {
-        const updated = await editContract(contractDetail.id, {
-          status,
-          version: contractDetail.version,
-        });
-        if (updated) {
-          // Refresh detail
-          const refreshed = await fetchContract(contractDetail.id);
-          setContractDetail(refreshed);
-        }
-      }
-    },
-    [contractDetail, editContract, fetchContract]
-  );
-
-  // Repository handlers
-  const handleAddRemoteRepo = useCallback(
-    async (name: string, url: string, isPrimary: boolean) => {
-      if (contractDetail) {
-        await addRemoteRepo(contractDetail.id, { name, repositoryUrl: url, isPrimary });
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-      }
-    },
-    [contractDetail, addRemoteRepo, fetchContract]
-  );
-
-  const handleAddLocalRepo = useCallback(
-    async (name: string, path: string, isPrimary: boolean) => {
-      if (contractDetail) {
-        await addLocalRepo(contractDetail.id, { name, localPath: path, isPrimary });
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-      }
-    },
-    [contractDetail, addLocalRepo, fetchContract]
-  );
-
-  const handleCreateManagedRepo = useCallback(
-    async (name: string, isPrimary: boolean) => {
-      if (contractDetail) {
-        await createManagedRepo(contractDetail.id, { name, isPrimary });
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-      }
-    },
-    [contractDetail, createManagedRepo, fetchContract]
-  );
-
-  const handleDeleteRepo = useCallback(
-    async (repoId: string) => {
-      if (contractDetail) {
-        await removeRepo(contractDetail.id, repoId);
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-      }
-    },
-    [contractDetail, removeRepo, fetchContract]
-  );
-
-  const handleSetRepoPrimary = useCallback(
-    async (repoId: string) => {
-      if (contractDetail) {
-        await setRepoPrimary(contractDetail.id, repoId);
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-      }
-    },
-    [contractDetail, setRepoPrimary, fetchContract]
-  );
-
-  // Refresh contract detail (used after file/task operations)
-  const handleRefresh = useCallback(async () => {
-    if (contractDetail) {
-      const refreshed = await fetchContract(contractDetail.id);
-      setContractDetail(refreshed);
-    }
-  }, [contractDetail, fetchContract]);
-
-  // File/task navigation handlers
-  const handleFileSelect = useCallback(
-    (fileId: string) => {
-      if (contractDetail) {
-        navigate(`/contracts/${contractDetail.id}/files/${fileId}`);
-      }
-    },
-    [navigate, contractDetail]
-  );
-
-  const handleTaskSelect = useCallback(
-    (taskId: string) => {
-      navigate(`/exec/${taskId}`);
-    },
-    [navigate]
-  );
-
-  // Create task within contract context
-  const handleTaskCreate = useCallback(
-    async (name: string, plan: string, repositoryUrl?: string) => {
-      if (!contractDetail) return;
-      try {
-        // Create the task with contract_id (task is automatically associated)
-        const task = await createTask({
-          contractId: contractDetail.id,
-          name,
-          plan,
-          repositoryUrl,
-        });
-        // Refresh contract detail to show new task
-        const refreshed = await fetchContract(contractDetail.id);
-        setContractDetail(refreshed);
-        // Navigate to the new task
-        navigate(`/exec/${task.id}`);
-      } catch (e) {
-        console.error("Failed to create task:", e);
-        alert(e instanceof Error ? e.message : "Failed to create task");
-      }
-    },
-    [contractDetail, fetchContract, navigate]
-  );
-
-  // Context menu handlers for ContractList
-  const handleContextMarkComplete = useCallback(
-    async (contract: ContractSummary) => {
-      await editContract(contract.id, { status: "completed", version: contract.version });
-    },
-    [editContract]
-  );
-
-  const handleContextMarkActive = useCallback(
-    async (contract: ContractSummary) => {
-      await editContract(contract.id, { status: "active", version: contract.version });
-    },
-    [editContract]
-  );
-
-  const handleContextArchive = useCallback(
-    async (contract: ContractSummary) => {
-      await editContract(contract.id, { status: "archived", version: contract.version });
-    },
-    [editContract]
-  );
-
-  const handleContextDelete = useCallback(
-    async (contract: ContractSummary) => {
-      if (confirm(`Are you sure you want to delete "${contract.name}"?`)) {
-        const success = await removeContract(contract.id);
-        if (success && contract.id === id) {
-          navigate("/contracts");
-        }
-      }
-    },
-    [removeContract, id, navigate]
-  );
-
-  const handleContextGoToSupervisor = useCallback(
-    (contract: ContractSummary) => {
-      if (contract.supervisorTaskId) {
-        navigate(`/exec/${contract.supervisorTaskId}`);
-      }
-    },
-    [navigate]
-  );
-
-  return (
-    <div className="relative z-10 h-screen flex flex-col overflow-hidden bg-[#0a1628]">
-      <Masthead showNav />
-      <main className="flex-1 flex overflow-hidden" style={{ height: "calc(100vh - 80px)" }}>
-        {/* Left: Contract list */}
-        <div className="w-[350px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] overflow-hidden flex flex-col">
-          <ContractList
-            contracts={contracts}
-            loading={loading}
-            onSelect={handleSelect}
-            onCreate={handleCreate}
-            selectedId={id}
-            onMarkComplete={handleContextMarkComplete}
-            onMarkActive={handleContextMarkActive}
-            onArchive={handleContextArchive}
-            onDelete={handleContextDelete}
-            onGoToSupervisor={handleContextGoToSupervisor}
-          />
-        </div>
-
-        {/* Right: Detail or Create */}
-        <div className="flex-1 overflow-hidden flex flex-col min-h-0">
-          {error && (
-            <div className="p-3 bg-red-400/10 border border-red-400/30 text-red-400 font-mono text-sm">
-              {error}
-            </div>
-          )}
-
-          {/* Contract detail, creation form, or empty state */}
-          <div className="flex-1 min-h-0 overflow-hidden">
-          {isCreating ? (
-            <div className="p-4 max-w-lg overflow-y-auto h-full bg-[#0a1628]">
-              <h3 className="font-mono text-[10px] text-[#9bc3ff] uppercase tracking-wide mb-4">
-                Create Contract
-              </h3>
-
-              {createError && (
-                <div className="mb-4 p-3 bg-red-400/10 border border-red-400/30 text-red-400 font-mono text-xs">
-                  {createError}
-                </div>
-              )}
-
-              <div className="space-y-4">
-                {/* Contract name */}
-                <div>
-                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                    Contract Name
-                  </label>
-                  <input
-                    type="text"
-                    value={newContractName}
-                    onChange={(e) => setNewContractName(e.target.value)}
-                    placeholder="Contract name"
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
-                    autoFocus
-                  />
-                </div>
-
-                {/* Description */}
-                <div>
-                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                    Description (optional)
-                  </label>
-                  <textarea
-                    value={newContractDescription}
-                    onChange={(e) => setNewContractDescription(e.target.value)}
-                    placeholder="Describe what this contract is for..."
-                    rows={2}
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc] resize-none"
-                  />
-                </div>
-
-                {/* Contract Type */}
-                <div>
-                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                    Contract Type
-                  </label>
-                  {contractTypesLoading ? (
-                    <div className="flex items-center justify-center py-4">
-                      <span className="font-mono text-xs text-[#8b949e]">Loading contract types...</span>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="flex gap-2">
-                        {contractTypes.map((type) => (
-                          <button
-                            key={type.id}
-                            type="button"
-                            onClick={() => {
-                              setContractType(type.id as ContractType);
-                              setInitialPhase(type.defaultPhase as ContractPhase);
-                            }}
-                            className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
-                              contractType === type.id
-                                ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                                : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
-                            }`}
-                          >
-                            {type.name}
-                          </button>
-                        ))}
-                      </div>
-                      <p className="mt-1 font-mono text-xs text-[#8b949e]">
-                        {contractTypes.find((t) => t.id === contractType)?.description ||
-                          "Select a contract type"}
-                      </p>
-                    </>
-                  )}
-                </div>
-
-                {/* Starting Phase */}
-                <div>
-                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                    Starting Phase
-                  </label>
-                  <select
-                    value={initialPhase}
-                    onChange={(e) => setInitialPhase(e.target.value as ContractPhase)}
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
-                  >
-                    {(() => {
-                      const template = contractTypes.find((t) => t.id === contractType);
-                      return (template?.phases || []).map((phase) => {
-                        const displayName = template?.phaseNames?.[phase] || (phase.charAt(0).toUpperCase() + phase.slice(1));
-                        return (
-                          <option key={phase} value={phase}>
-                            {displayName}
-                          </option>
-                        );
-                      });
-                    })()}
-                  </select>
-                  <p className="mt-1 font-mono text-xs text-[#8b949e]">
-                    {contractType === "simple"
-                      ? "Start in Plan to define what to build, or Execute if already planned"
-                      : "Skip earlier phases if you already have requirements defined"}
-                  </p>
-                </div>
-
-                {/* Local-Only Mode */}
-                <div className="space-y-2">
-                  <div className="flex items-center space-x-3">
-                    <button
-                      type="button"
-                      onClick={() => setLocalOnly(!localOnly)}
-                      className={`w-5 h-5 flex items-center justify-center border transition-colors ${
-                        localOnly
-                          ? "bg-[#0f3c78] border-[#75aafc] text-[#dbe7ff]"
-                          : "bg-[#0d1b2d] border-[rgba(117,170,252,0.2)] text-transparent"
-                      }`}
-                    >
-                      {localOnly && (
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="3"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          className="w-3 h-3"
-                        >
-                          <polyline points="20 6 9 17 4 12" />
-                        </svg>
-                      )}
-                    </button>
-                    <label
-                      className="font-mono text-sm text-[#dbe7ff] cursor-pointer select-none"
-                      onClick={() => setLocalOnly(!localOnly)}
-                    >
-                      Local-Only Mode
-                    </label>
-                  </div>
-                  <p className="font-mono text-xs text-[#8b949e] pl-8">
-                    When enabled, tasks won't automatically push to remote or create PRs.
-                    Use patch files to export changes.
-                  </p>
-                </div>
-
-                {/* Repository Configuration */}
-                <div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
-                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-3">
-                    Repository Configuration (Required)
-                  </label>
-
-                  {/* Repository type selector */}
-                  <div className="flex gap-2 mb-3">
-                    <button
-                      type="button"
-                      onClick={() => setRepoType("remote")}
-                      className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
-                        repoType === "remote"
-                          ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
-                      }`}
-                    >
-                      Remote
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setRepoType("local")}
-                      className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
-                        repoType === "local"
-                          ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
-                      }`}
-                    >
-                      Local
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setRepoType("managed")}
-                      className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
-                        repoType === "managed"
-                          ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
-                      }`}
-                    >
-                      Managed
-                    </button>
-                  </div>
-
-                  {/* Repository suggestions */}
-                  {showRepoSuggestions && repoSuggestions.length > 0 && (
-                    <div className="mb-3">
-                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                        Recent Repositories
-                      </label>
-                      <div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto">
-                        {repoSuggestions.map((suggestion) => (
-                          <button
-                            key={suggestion.id}
-                            type="button"
-                            onClick={() => applyRepoSuggestion(suggestion)}
-                            className="w-full text-left px-3 py-2 font-mono text-xs hover:bg-[rgba(117,170,252,0.1)] border-b border-[rgba(117,170,252,0.1)] last:border-b-0"
-                          >
-                            <div className="flex items-center justify-between">
-                              <span className="text-[#9bc3ff] truncate">{suggestion.name}</span>
-                              <span className="text-[10px] text-[#556677] ml-2">
-                                {suggestion.useCount}×
-                              </span>
-                            </div>
-                            <div className="text-[10px] text-[#556677] truncate">
-                              {repoType === "local" ? suggestion.localPath : suggestion.repositoryUrl}
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Repository name */}
-                  <div className="mb-3">
-                    <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                      Repository Name
-                    </label>
-                    <input
-                      type="text"
-                      value={repoName}
-                      onChange={(e) => setRepoName(e.target.value)}
-                      placeholder="e.g., my-project"
-                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
-                    />
-                  </div>
-
-                  {/* Repository URL (for remote) */}
-                  {repoType === "remote" && (
-                    <div>
-                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                        Repository URL
-                      </label>
-                      <input
-                        type="text"
-                        value={repoUrl}
-                        onChange={(e) => setRepoUrl(e.target.value)}
-                        placeholder="https://github.com/user/repo.git"
-                        className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
-                      />
-                    </div>
-                  )}
-
-                  {/* Repository path (for local) */}
-                  {repoType === "local" && (
-                    <div>
-                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
-                        Local Path
-                      </label>
-                      <DirectoryInput
-                        value={repoPath}
-                        onChange={setRepoPath}
-                        suggestions={suggestedDirectories}
-                        placeholder="/path/to/repository"
-                      />
-                    </div>
-                  )}
-
-                  {/* Managed description */}
-                  {repoType === "managed" && (
-                    <p className="font-mono text-xs text-[#8b949e]">
-                      A managed repository will be created automatically by the daemon.
-                    </p>
-                  )}
-                </div>
-
-                {/* Actions */}
-                <div className="flex gap-2 justify-end pt-2">
-                  <button
-                    onClick={handleCreateCancel}
-                    className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={handleCreateSubmit}
-                    disabled={!newContractName.trim() || !isRepoValid()}
-                    className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[rgba(117,170,252,0.2)] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Create
-                  </button>
-                </div>
-              </div>
-            </div>
-          ) : contractDetail ? (
-            <ContractDetail
-              contract={contractDetail}
-              loading={detailLoading}
-              onBack={handleBack}
-              onUpdate={handleUpdate}
-              onDelete={handleDelete}
-              onPhaseChange={handlePhaseChange}
-              onStatusChange={handleStatusChange}
-              onFileSelect={handleFileSelect}
-              onTaskSelect={handleTaskSelect}
-              onTaskCreate={handleTaskCreate}
-              onRefresh={handleRefresh}
-              onAddRemoteRepo={handleAddRemoteRepo}
-              onAddLocalRepo={handleAddLocalRepo}
-              onCreateManagedRepo={handleCreateManagedRepo}
-              onDeleteRepo={handleDeleteRepo}
-              onSetRepoPrimary={handleSetRepoPrimary}
-            />
-          ) : (
-            <div className="panel h-full flex items-center justify-center">
-              <div className="text-center">
-                <p className="font-mono text-sm text-[#555] mb-4">
-                  Select a contract or create a new one
-                </p>
-                <button
-                  onClick={handleCreate}
-                  className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
-                >
-                  + New Contract
-                </button>
-              </div>
-            </div>
-          )}
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/makima/frontend/src/routes/document-directives.tsx b/makima/frontend/src/routes/document-directives.tsx
index 7b0a89b..a3ea969 100644
--- a/makima/frontend/src/routes/document-directives.tsx
+++ b/makima/frontend/src/routes/document-directives.tsx
@@ -1530,13 +1530,17 @@ export default function DocumentDirectivesPage() {
     : null;
 
   return (
-    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+    // h-screen + overflow-hidden so the page itself never scrolls; the
+    // sidebar and editor pane each manage their own scroll via flex-1
+    // children with overflow-y-auto. Previously we set
+    // height: calc(100vh - 80px) on <main>, which assumed an 80px masthead
+    // and quietly clipped content when the masthead was taller (or pushed
+    // the page below the viewport on shorter screens, which made the
+    // whole page scroll instead of the sidebar/editor independently).
+    <div className="relative z-10 h-screen flex flex-col bg-[#0a1628] overflow-hidden">
       <Masthead showNav />
-      <main
-        className="flex-1 flex overflow-hidden"
-        style={{ height: "calc(100vh - 80px)" }}
-      >
-        {/* Left: file-tree sidebar */}
+      <main className="flex-1 flex min-h-0 overflow-hidden">
+        {/* Left: file-tree sidebar — independent scroll. */}
         <div className="w-[260px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] overflow-hidden flex flex-col bg-[#091428]">
           <DocumentSidebar
             directives={directives}
diff --git a/makima/frontend/src/routes/tmp.tsx b/makima/frontend/src/routes/tmp.tsx
index 69f13a2..c0c7365 100644
--- a/makima/frontend/src/routes/tmp.tsx
+++ b/makima/frontend/src/routes/tmp.tsx
@@ -53,7 +53,7 @@ export default function TmpTaskPage() {
 
   if (authLoading) {
     return (
-      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+      <div className="relative z-10 h-screen flex flex-col bg-[#0a1628] overflow-hidden">
         <Masthead showNav />
         <main className="flex-1 flex items-center justify-center">
           <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
@@ -63,12 +63,9 @@ export default function TmpTaskPage() {
   }
 
   return (
-    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+    <div className="relative z-10 h-screen flex flex-col bg-[#0a1628] overflow-hidden">
       <Masthead showNav />
-      <main
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ height: "calc(100vh - 80px)" }}
-      >
+      <main className="flex-1 flex flex-col min-h-0 overflow-hidden">
         {/* Breadcrumb echoing the document-mode header style. */}
         <div className="px-6 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]">
           <div className="flex items-center gap-2 text-[10px] font-mono uppercase tracking-wide text-[#7788aa]">
-- 
cgit v1.2.3