Add directive-first chain system redesign

Redesigns the chain system with a directive-first architecture where
Directive is the top-level entity (the "why/what") and Chains are
generated execution plans (the "how") that can be dynamically modified.

Backend:
- Add database migration for directive system tables
- Add Directive, DirectiveChain, ChainStep, DirectiveEvent models
- Add DirectiveVerifier and DirectiveApproval models
- Add orchestration module with engine, planner, and verifier
- Add comprehensive API handlers for directives
- Add daemon CLI commands for directive management
- Add directive skill documentation
- Integrate contract completion with directive engine
- Add SSE endpoint for real-time directive events

Frontend:
- Add directives route with split-view layout
- Add 6-tab detail view (Overview, Chain, Events, Evaluations, Approvals, Verifiers)
- Add React Flow DAG visualization for chain steps
- Add SSE subscription hook for real-time event updates
- Add useDirectives and useDirectiveEventSubscription hooks
- Add directive types and API functions

Fixes:
- Fix test failures in ws/protocol, task_output, completion_gate, patch
- Fix word boundary matching in looks_like_task()
- Fix parse_last() to find actual last completion gate
- Fix create_export_patch when merge-base equals HEAD
- Clean up clippy warnings in new code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 1254 insertions, 0 deletions

diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx
new file mode 100644
index 0000000..51fd57a
--- /dev/null
+++ b/makima/frontend/src/routes/directives.tsx
@@ -0,0 +1,1254 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { useParams, useNavigate } from "react-router";
+import {
+  ReactFlow,
+  Edge,
+  Controls,
+  Background,
+  Handle,
+  Position,
+  BackgroundVariant,
+  MarkerType,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Masthead } from "../components/Masthead";
+import { useDirectives, useDirectiveEventSubscription } from "../hooks/useDirectives";
+import { useAuth } from "../contexts/AuthContext";
+import type {
+  DirectiveSummary,
+  DirectiveWithProgress,
+  DirectiveGraphResponse,
+  DirectiveGraphNode,
+  CreateDirectiveRequest,
+  RepositoryHistoryEntry,
+  AutonomyLevel,
+  StepStatus,
+  ConfidenceLevel,
+} from "../lib/api";
+import { getRepositorySuggestions } from "../lib/api";
+
+export default function DirectivesPage() {
+  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 <DirectivesPageContent />;
+}
+
+function DirectivesPageContent() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const {
+    directives,
+    loading,
+    error,
+    createNewDirective,
+    archiveExistingDirective,
+    getDirectiveById,
+    getGraph,
+    start,
+    pause,
+    resume,
+    stop,
+  } = useDirectives();
+
+  const [directiveDetail, setDirectiveDetail] = useState<DirectiveWithProgress | null>(null);
+  const [directiveGraph, setDirectiveGraph] = useState<DirectiveGraphResponse | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+
+  // Load directive detail when ID changes
+  useEffect(() => {
+    if (id) {
+      setDetailLoading(true);
+      Promise.all([getDirectiveById(id), getGraph(id).catch(() => null)]).then(([directive, graph]) => {
+        setDirectiveDetail(directive);
+        setDirectiveGraph(graph);
+        setDetailLoading(false);
+      });
+    } else {
+      setDirectiveDetail(null);
+      setDirectiveGraph(null);
+    }
+  }, [id, getDirectiveById, getGraph]);
+
+  const handleSelect = useCallback(
+    (directiveId: string) => {
+      navigate(`/directives/${directiveId}`);
+    },
+    [navigate]
+  );
+
+  const handleBack = useCallback(() => {
+    navigate("/directives");
+  }, [navigate]);
+
+  const handleCreate = useCallback(() => {
+    setIsCreating(true);
+  }, []);
+
+  const handleCreateSubmit = useCallback(
+    async (goal: string, repositoryUrl: string | undefined, autonomyLevel: AutonomyLevel) => {
+      const data: CreateDirectiveRequest = {
+        goal: goal.trim(),
+        repositoryUrl: repositoryUrl?.trim() || undefined,
+        autonomyLevel,
+      };
+
+      try {
+        const result = await createNewDirective(data);
+        if (result) {
+          setIsCreating(false);
+          navigate(`/directives/${result.id}`);
+        }
+      } catch (err) {
+        console.error("Failed to create directive:", err);
+      }
+    },
+    [createNewDirective, navigate]
+  );
+
+  const handleCreateCancel = useCallback(() => {
+    setIsCreating(false);
+  }, []);
+
+  const handleArchive = useCallback(
+    async (directive: DirectiveSummary) => {
+      if (confirm(`Are you sure you want to archive this directive?`)) {
+        const success = await archiveExistingDirective(directive.id);
+        if (success && directive.id === id) {
+          navigate("/directives");
+        }
+      }
+    },
+    [archiveExistingDirective, id, navigate]
+  );
+
+  const handleRefresh = useCallback(async () => {
+    if (id) {
+      const [directive, graph] = await Promise.all([
+        getDirectiveById(id),
+        getGraph(id).catch(() => null),
+      ]);
+      setDirectiveDetail(directive);
+      setDirectiveGraph(graph);
+    }
+  }, [id, getDirectiveById, getGraph]);
+
+  const handleStart = useCallback(async () => {
+    if (id) {
+      await start(id);
+      handleRefresh();
+    }
+  }, [id, start, handleRefresh]);
+
+  const handlePause = useCallback(async () => {
+    if (id) {
+      await pause(id);
+      handleRefresh();
+    }
+  }, [id, pause, handleRefresh]);
+
+  const handleResume = useCallback(async () => {
+    if (id) {
+      await resume(id);
+      handleRefresh();
+    }
+  }, [id, resume, handleRefresh]);
+
+  const handleStop = useCallback(async () => {
+    if (id) {
+      await stop(id);
+      handleRefresh();
+    }
+  }, [id, stop, handleRefresh]);
+
+  return (
+    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+      <Masthead showNav />
+      <main className="flex-1 flex flex-col p-4 pt-2 gap-4 overflow-hidden">
+        {error && (
+          <div className="p-3 bg-red-400/10 border border-red-400/30 text-red-400 font-mono text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* Create directive modal */}
+        {isCreating && (
+          <CreateDirectiveModal
+            onSubmit={handleCreateSubmit}
+            onCancel={handleCreateCancel}
+          />
+        )}
+
+        <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0">
+          {/* Directive list */}
+          <DirectiveList
+            directives={directives}
+            loading={loading}
+            onSelect={handleSelect}
+            onCreate={handleCreate}
+            selectedId={id}
+            onArchive={handleArchive}
+          />
+
+          {/* Directive detail or empty state */}
+          {directiveDetail ? (
+            <DirectiveDetail
+              directive={directiveDetail}
+              graph={directiveGraph}
+              loading={detailLoading}
+              onBack={handleBack}
+              onRefresh={handleRefresh}
+              onStart={handleStart}
+              onPause={handlePause}
+              onResume={handleResume}
+              onStop={handleStop}
+            />
+          ) : (
+            <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 directive 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 Directive
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// =============================================================================
+// Directive List Component
+// =============================================================================
+
+interface DirectiveListProps {
+  directives: DirectiveSummary[];
+  loading: boolean;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+  selectedId?: string;
+  onArchive: (directive: DirectiveSummary) => void;
+}
+
+function DirectiveList({
+  directives,
+  loading,
+  onSelect,
+  onCreate,
+  selectedId,
+  onArchive,
+}: DirectiveListProps) {
+  const [filter, setFilter] = useState<"all" | "active" | "completed" | "failed">("all");
+
+  const filteredDirectives = directives.filter((d) => {
+    if (filter === "all") return true;
+    if (filter === "active") return ["draft", "planning", "active", "paused"].includes(d.status);
+    if (filter === "completed") return d.status === "completed";
+    if (filter === "failed") return d.status === "failed";
+    return true;
+  });
+
+  return (
+    <div className="panel h-full flex flex-col overflow-hidden">
+      <div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.15)]">
+        <h2 className="font-mono text-sm text-[#75aafc] uppercase">Directives</h2>
+        <button
+          onClick={onCreate}
+          className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
+        >
+          + New
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-1 p-2 border-b border-[rgba(117,170,252,0.1)]">
+        {(["all", "active", "completed", "failed"] as const).map((f) => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-2 py-1 font-mono text-[10px] uppercase ${
+              filter === f
+                ? "text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3]"
+                : "text-[#556677] hover:text-[#9bc3ff]"
+            }`}
+          >
+            {f}
+          </button>
+        ))}
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="p-4 text-center">
+            <p className="font-mono text-xs text-[#556677]">Loading...</p>
+          </div>
+        ) : filteredDirectives.length === 0 ? (
+          <div className="p-4 text-center">
+            <p className="font-mono text-xs text-[#556677]">No directives found</p>
+          </div>
+        ) : (
+          filteredDirectives.map((d) => (
+            <DirectiveListItem
+              key={d.id}
+              directive={d}
+              selected={d.id === selectedId}
+              onClick={() => onSelect(d.id)}
+              onArchive={() => onArchive(d)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface DirectiveListItemProps {
+  directive: DirectiveSummary;
+  selected: boolean;
+  onClick: () => void;
+  onArchive: () => void;
+}
+
+function DirectiveListItem({ directive, selected, onClick, onArchive }: DirectiveListItemProps) {
+  const progress = directive.totalSteps > 0
+    ? Math.round((directive.completedSteps / directive.totalSteps) * 100)
+    : 0;
+
+  const statusColor = {
+    draft: "text-[#556677]",
+    planning: "text-yellow-400",
+    active: "text-green-400",
+    paused: "text-yellow-400",
+    completed: "text-[#75aafc]",
+    archived: "text-[#556677]",
+    failed: "text-red-400",
+  }[directive.status] || "text-[#556677]";
+
+  const confidenceColor = {
+    green: "bg-green-500",
+    yellow: "bg-yellow-500",
+    red: "bg-red-500",
+  }[directive.currentConfidence !== null && directive.currentConfidence >= 0.8
+    ? "green"
+    : directive.currentConfidence !== null && directive.currentConfidence >= 0.5
+    ? "yellow"
+    : "red"] || "bg-[#556677]";
+
+  return (
+    <div
+      onClick={onClick}
+      className={`p-3 cursor-pointer border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] ${
+        selected ? "bg-[rgba(117,170,252,0.1)]" : ""
+      }`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <div className="font-mono text-sm text-[#dbe7ff] truncate">
+            {directive.title || directive.goal.slice(0, 50)}
+          </div>
+          <div className="flex items-center gap-2 mt-1">
+            <span className={`font-mono text-[10px] uppercase ${statusColor}`}>
+              {directive.status}
+            </span>
+            <span className="font-mono text-[10px] text-[#556677]">
+              {directive.completedSteps}/{directive.totalSteps} steps
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          {directive.currentConfidence !== null && (
+            <div className={`w-2 h-2 rounded-full ${confidenceColor}`} title={`Confidence: ${Math.round(directive.currentConfidence * 100)}%`} />
+          )}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onArchive();
+            }}
+            className="font-mono text-[10px] text-[#556677] hover:text-red-400"
+          >
+            Archive
+          </button>
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      {directive.totalSteps > 0 && (
+        <div className="mt-2 h-1 bg-[rgba(117,170,252,0.1)] overflow-hidden">
+          <div
+            className="h-full bg-[#75aafc] transition-all duration-300"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// Directive Detail Component
+// =============================================================================
+
+interface DirectiveDetailProps {
+  directive: DirectiveWithProgress;
+  graph: DirectiveGraphResponse | null;
+  loading: boolean;
+  onBack: () => void;
+  onRefresh: () => void;
+  onStart: () => void;
+  onPause: () => void;
+  onResume: () => void;
+  onStop: () => void;
+}
+
+function DirectiveDetail({
+  directive,
+  graph,
+  loading,
+  onBack,
+  onRefresh,
+  onStart,
+  onPause,
+  onResume,
+  onStop,
+}: DirectiveDetailProps) {
+  const [activeTab, setActiveTab] = useState<"overview" | "chain" | "events" | "evaluations" | "approvals" | "verifiers">("overview");
+
+  if (loading) {
+    return (
+      <div className="panel h-full flex items-center justify-center">
+        <p className="font-mono text-xs text-[#556677]">Loading...</p>
+      </div>
+    );
+  }
+
+  const statusColor = {
+    draft: "text-[#556677] bg-[#556677]/10 border-[#556677]/30",
+    planning: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30",
+    active: "text-green-400 bg-green-400/10 border-green-400/30",
+    paused: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30",
+    completed: "text-[#75aafc] bg-[#75aafc]/10 border-[#75aafc]/30",
+    archived: "text-[#556677] bg-[#556677]/10 border-[#556677]/30",
+    failed: "text-red-400 bg-red-400/10 border-red-400/30",
+  }[directive.status] || "text-[#556677] bg-[#556677]/10 border-[#556677]/30";
+
+  return (
+    <div className="panel h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="p-3 border-b border-[rgba(117,170,252,0.15)]">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={onBack}
+              className="font-mono text-xs text-[#556677] hover:text-[#9bc3ff]"
+            >
+              &larr; Back
+            </button>
+            <h2 className="font-mono text-sm text-[#dbe7ff]">
+              {directive.title || directive.goal.slice(0, 50)}
+            </h2>
+            <span className={`px-2 py-0.5 font-mono text-[10px] uppercase border ${statusColor}`}>
+              {directive.status}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {directive.status === "draft" && (
+              <button
+                onClick={onStart}
+                className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-green-700 border border-green-600 hover:bg-green-600 uppercase"
+              >
+                Start
+              </button>
+            )}
+            {directive.status === "active" && (
+              <button
+                onClick={onPause}
+                className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-yellow-700 border border-yellow-600 hover:bg-yellow-600 uppercase"
+              >
+                Pause
+              </button>
+            )}
+            {directive.status === "paused" && (
+              <button
+                onClick={onResume}
+                className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-green-700 border border-green-600 hover:bg-green-600 uppercase"
+              >
+                Resume
+              </button>
+            )}
+            {["active", "paused"].includes(directive.status) && (
+              <button
+                onClick={onStop}
+                className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-red-700 border border-red-600 hover:bg-red-600 uppercase"
+              >
+                Stop
+              </button>
+            )}
+            <button
+              onClick={onRefresh}
+              className="px-3 py-1 font-mono text-[10px] text-[#9bc3ff] hover:text-[#dbe7ff]"
+            >
+              Refresh
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 p-2 border-b border-[rgba(117,170,252,0.1)]">
+        {(["overview", "chain", "events", "evaluations", "approvals", "verifiers"] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-3 py-1.5 font-mono text-[10px] uppercase ${
+              activeTab === tab
+                ? "text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3]"
+                : "text-[#556677] hover:text-[#9bc3ff]"
+            }`}
+          >
+            {tab}
+            {tab === "approvals" && directive.pendingApprovals.length > 0 && (
+              <span className="ml-1 px-1 bg-yellow-500 text-black rounded text-[8px]">
+                {directive.pendingApprovals.length}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {activeTab === "overview" && (
+          <OverviewTab directive={directive} />
+        )}
+        {activeTab === "chain" && (
+          <ChainTab directive={directive} graph={graph} />
+        )}
+        {activeTab === "events" && (
+          <EventsTab directive={directive} />
+        )}
+        {activeTab === "evaluations" && (
+          <EvaluationsTab directive={directive} />
+        )}
+        {activeTab === "approvals" && (
+          <ApprovalsTab directive={directive} onRefresh={onRefresh} />
+        )}
+        {activeTab === "verifiers" && (
+          <VerifiersTab directive={directive} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// Tab Components
+// =============================================================================
+
+function OverviewTab({ directive }: { directive: DirectiveWithProgress }) {
+  return (
+    <div className="space-y-6">
+      {/* Goal */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Goal</h3>
+        <p className="font-mono text-sm text-[#dbe7ff] whitespace-pre-wrap">
+          {directive.goal}
+        </p>
+      </div>
+
+      {/* Progress */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Progress</h3>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.completedSteps || 0}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Completed Steps</div>
+          </div>
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.totalSteps || 0}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Total Steps</div>
+          </div>
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.currentConfidence != null
+                ? `${Math.round((directive.chain?.currentConfidence ?? 0) * 100)}%`
+                : "-"}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Confidence</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Configuration */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Configuration</h3>
+        <div className="grid grid-cols-2 gap-2 text-sm">
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Autonomy Level</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.autonomyLevel}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Max Rework Cycles</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.maxReworkCycles}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Green Threshold</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.confidenceThresholdGreen}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Yellow Threshold</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.confidenceThresholdYellow}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Repository */}
+      {directive.repositoryUrl && (
+        <div>
+          <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Repository</h3>
+          <p className="font-mono text-sm text-[#9bc3ff]">{directive.repositoryUrl}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Step status colors for both list and DAG views
+const stepStatusStyles: Record<StepStatus, { border: string; bg: string; text: string }> = {
+  pending: { border: "#556677", bg: "#556677", text: "#556677" },
+  ready: { border: "#3b82f6", bg: "#3b82f6", text: "#3b82f6" },
+  running: { border: "#22c55e", bg: "#22c55e", text: "#22c55e" },
+  evaluating: { border: "#eab308", bg: "#eab308", text: "#eab308" },
+  passed: { border: "#75aafc", bg: "#75aafc", text: "#75aafc" },
+  failed: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" },
+  rework: { border: "#f97316", bg: "#f97316", text: "#f97316" },
+  skipped: { border: "#556677", bg: "#556677", text: "#556677" },
+  blocked: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" },
+};
+
+// Confidence level colors
+const confidenceColors: Record<ConfidenceLevel, string> = {
+  green: "#22c55e",
+  yellow: "#eab308",
+  red: "#ef4444",
+};
+
+// Node dimensions
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 70;
+
+// Custom node component for steps
+function StepNodeComponent({ data }: { data: DirectiveGraphNode & { selected?: boolean } }) {
+  const styles = stepStatusStyles[data.status] || stepStatusStyles.pending;
+  const isRunning = data.status === "running" || data.status === "evaluating";
+
+  return (
+    <div
+      className={`rounded-lg border-2 bg-[#0a1628] overflow-hidden ${
+        isRunning ? "animate-pulse" : ""
+      }`}
+      style={{
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        borderColor: styles.border,
+        borderStyle: data.status === "pending" ? "dashed" : "solid",
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!bg-[#75aafc] !w-3 !h-3 !border-2 !border-[#0a1628]"
+      />
+
+      {/* Status indicator bar */}
+      <div className="h-1.5" style={{ backgroundColor: styles.bg }} />
+
+      {/* Content */}
+      <div className="p-2">
+        <div className="flex items-center justify-between mb-1">
+          <span className="font-mono text-xs text-[#dbe7ff] truncate flex-1">{data.name}</span>
+          {data.confidenceScore !== null && data.confidenceLevel && (
+            <div
+              className="w-2 h-2 rounded-full flex-shrink-0 ml-1"
+              style={{ backgroundColor: confidenceColors[data.confidenceLevel] }}
+              title={`Confidence: ${Math.round(data.confidenceScore * 100)}%`}
+            />
+          )}
+        </div>
+        <div className="flex items-center justify-between">
+          <span
+            className="font-mono text-[10px] uppercase px-1.5 py-0.5 rounded"
+            style={{
+              color: styles.text,
+              backgroundColor: `${styles.bg}20`,
+            }}
+          >
+            {data.status}
+          </span>
+          <span className="font-mono text-[10px] text-[#8b949e]">{data.stepType}</span>
+        </div>
+      </div>
+
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!bg-[#f59e0b] !w-3 !h-3 !border-2 !border-[#0a1628]"
+      />
+    </div>
+  );
+}
+
+// Node types for React Flow
+const nodeTypes = {
+  step: StepNodeComponent,
+};
+
+function ChainTab({ directive, graph }: { directive: DirectiveWithProgress; graph: DirectiveGraphResponse | null }) {
+  const [viewMode, setViewMode] = useState<"dag" | "list">("dag");
+
+  // Convert graph to React Flow nodes and edges
+  const { nodes, edges } = useMemo(() => {
+    if (!graph || !graph.nodes.length) {
+      // Fallback: generate positions from directive.steps
+      const stepNodes = directive.steps.map((step, index) => ({
+        id: step.id,
+        type: "step" as const,
+        position: {
+          x: (index % 3) * 220 + 50,
+          y: Math.floor(index / 3) * 120 + 50,
+        },
+        data: {
+          id: step.id,
+          name: step.name,
+          stepType: step.stepType,
+          status: step.status,
+          confidenceScore: step.confidenceScore,
+          confidenceLevel: step.confidenceLevel,
+          contractId: step.contractId,
+          editorX: null,
+          editorY: null,
+        },
+      }));
+
+      // Build edges from dependencies
+      const stepEdges: Edge[] = [];
+      directive.steps.forEach((step) => {
+        step.dependsOn.forEach((depName) => {
+          const depStep = directive.steps.find((s) => s.name === depName);
+          if (depStep) {
+            stepEdges.push({
+              id: `${depStep.id}-${step.id}`,
+              source: depStep.id,
+              target: step.id,
+              type: "smoothstep",
+              markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" },
+              style: { stroke: "#556677", strokeWidth: 2 },
+            });
+          }
+        });
+      });
+
+      return { nodes: stepNodes, edges: stepEdges };
+    }
+
+    // Use graph data
+    const graphNodes = graph.nodes.map((node) => ({
+      id: node.id,
+      type: "step" as const,
+      position: {
+        x: node.editorX ?? 50,
+        y: node.editorY ?? 50,
+      },
+      data: { ...node },
+    }));
+
+    const graphEdges: Edge[] = graph.edges.map((edge) => ({
+      id: `${edge.source}-${edge.target}`,
+      source: edge.source,
+      target: edge.target,
+      type: "smoothstep",
+      markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" },
+      style: { stroke: "#556677", strokeWidth: 2 },
+    }));
+
+    return { nodes: graphNodes, edges: graphEdges };
+  }, [graph, directive.steps]);
+
+  if (!directive.chain) {
+    return (
+      <div className="text-center py-8">
+        <p className="font-mono text-sm text-[#556677]">
+          No chain generated yet. Start the directive to generate a chain.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Chain info header */}
+      <div className="flex items-center justify-between p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+        <div>
+          <div className="font-mono text-sm text-[#dbe7ff]">{directive.chain.name}</div>
+          <div className="font-mono text-[10px] text-[#556677]">Generation {directive.chain.generation}</div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="font-mono text-xs text-[#556677]">
+            {directive.chain.completedSteps}/{directive.chain.totalSteps} steps
+          </div>
+          {/* View toggle */}
+          <div className="flex border border-[rgba(117,170,252,0.2)]">
+            <button
+              onClick={() => setViewMode("dag")}
+              className={`px-2 py-1 font-mono text-[10px] uppercase ${
+                viewMode === "dag"
+                  ? "bg-[rgba(117,170,252,0.2)] text-[#75aafc]"
+                  : "text-[#556677] hover:text-[#75aafc]"
+              }`}
+            >
+              DAG
+            </button>
+            <button
+              onClick={() => setViewMode("list")}
+              className={`px-2 py-1 font-mono text-[10px] uppercase ${
+                viewMode === "list"
+                  ? "bg-[rgba(117,170,252,0.2)] text-[#75aafc]"
+                  : "text-[#556677] hover:text-[#75aafc]"
+              }`}
+            >
+              List
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {viewMode === "dag" ? (
+        /* DAG visualization */
+        <div className="h-[400px] border border-[rgba(117,170,252,0.1)] rounded bg-[#050d18]">
+          {directive.steps.length === 0 ? (
+            <div className="flex items-center justify-center h-full">
+              <p className="font-mono text-sm text-[#556677]">No steps in chain</p>
+            </div>
+          ) : (
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              nodeTypes={nodeTypes}
+              fitView
+              fitViewOptions={{ padding: 0.2 }}
+              minZoom={0.5}
+              maxZoom={1.5}
+              defaultEdgeOptions={{
+                type: "smoothstep",
+                style: { stroke: "#556677", strokeWidth: 2 },
+              }}
+            >
+              <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#1a2a3a" />
+              <Controls className="!bg-[#0a1628] !border-[rgba(117,170,252,0.2)]" />
+            </ReactFlow>
+          )}
+        </div>
+      ) : (
+        /* List view */
+        <div className="space-y-2">
+          <h3 className="font-mono text-xs text-[#75aafc] uppercase">Steps</h3>
+          {directive.steps.length === 0 ? (
+            <p className="font-mono text-sm text-[#556677]">No steps in chain</p>
+          ) : (
+            directive.steps.map((step) => {
+              const styles = stepStatusStyles[step.status] || stepStatusStyles.pending;
+
+              return (
+                <div
+                  key={step.id}
+                  className="p-3 bg-[rgba(117,170,252,0.02)] border border-[rgba(117,170,252,0.1)]"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-sm text-[#dbe7ff]">{step.name}</span>
+                      <span
+                        className="px-1.5 py-0.5 font-mono text-[10px] uppercase border"
+                        style={{ color: styles.text, borderColor: `${styles.border}50` }}
+                      >
+                        {step.status}
+                      </span>
+                      {step.confidenceScore !== null && (
+                        <span className="font-mono text-[10px] text-[#556677]">
+                          ({Math.round(step.confidenceScore * 100)}%)
+                        </span>
+                      )}
+                    </div>
+                    <div className="font-mono text-[10px] text-[#556677]">{step.stepType}</div>
+                  </div>
+                  {step.description && (
+                    <p className="font-mono text-xs text-[#556677] mt-1">{step.description}</p>
+                  )}
+                  {step.dependsOn.length > 0 && (
+                    <div className="font-mono text-[10px] text-[#556677] mt-1">
+                      Depends on: {step.dependsOn.join(", ")}
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EventsTab({ directive }: { directive: DirectiveWithProgress }) {
+  // Subscribe to real-time events via SSE
+  const { events: streamEvents, isConnected, error: sseError } = useDirectiveEventSubscription(directive.id);
+
+  // Combine initial events with streamed events (avoiding duplicates)
+  const allEvents = useMemo(() => {
+    const eventMap = new Map();
+    // Add initial events first
+    directive.recentEvents.forEach((e) => eventMap.set(e.id, e));
+    // Add streamed events (will override any duplicates)
+    streamEvents.forEach((e) => eventMap.set(e.id, e));
+    // Sort by created_at descending (most recent first)
+    return Array.from(eventMap.values()).sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }, [directive.recentEvents, streamEvents]);
+
+  return (
+    <div className="space-y-4">
+      {/* Connection status */}
+      <div className="flex items-center justify-between text-[10px] font-mono">
+        <div className="flex items-center gap-2">
+          <span className={isConnected ? "text-green-400" : "text-[#556677]"}>
+            {isConnected ? "● Live" : "○ Connecting..."}
+          </span>
+          {sseError && <span className="text-red-400">{sseError}</span>}
+        </div>
+        <span className="text-[#556677]">{allEvents.length} events</span>
+      </div>
+
+      {/* Event list */}
+      {allEvents.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="font-mono text-sm text-[#556677]">No events yet</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {allEvents.map((event) => {
+            const severityColors: Record<string, string> = {
+              info: "text-[#75aafc]",
+              warning: "text-yellow-400",
+              error: "text-red-400",
+              critical: "text-red-600",
+            };
+            const severityColor = severityColors[event.severity] || "text-[#556677]";
+
+            return (
+              <div
+                key={event.id}
+                className="p-3 bg-[rgba(117,170,252,0.02)] border border-[rgba(117,170,252,0.1)]"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className={`font-mono text-xs ${severityColor}`}>{event.eventType}</span>
+                    <span className="font-mono text-[10px] text-[#556677]">{event.actorType}</span>
+                  </div>
+                  <span className="font-mono text-[10px] text-[#556677]">
+                    {new Date(event.createdAt).toLocaleString()}
+                  </span>
+                </div>
+                {event.eventData != null && (
+                  <pre className="font-mono text-[10px] text-[#556677] mt-1 overflow-x-auto">
+                    {JSON.stringify(event.eventData, null, 2)}
+                  </pre>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EvaluationsTab({ directive: _directive }: { directive: DirectiveWithProgress }) {
+  // TODO: Fetch evaluations separately
+  return (
+    <div className="text-center py-8">
+      <p className="font-mono text-sm text-[#556677]">
+        Evaluations will be shown here after steps are evaluated
+      </p>
+    </div>
+  );
+}
+
+function ApprovalsTab({ directive, onRefresh }: { directive: DirectiveWithProgress; onRefresh: () => void }) {
+  if (directive.pendingApprovals.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <p className="font-mono text-sm text-[#556677]">No pending approvals</p>
+      </div>
+    );
+  }
+
+  const handleApprove = async (approvalId: string) => {
+    try {
+      const { approveDirectiveRequest } = await import("../lib/api");
+      await approveDirectiveRequest(directive.id, approvalId);
+      onRefresh();
+    } catch (err) {
+      console.error("Failed to approve:", err);
+    }
+  };
+
+  const handleDeny = async (approvalId: string) => {
+    try {
+      const { denyDirectiveRequest } = await import("../lib/api");
+      await denyDirectiveRequest(directive.id, approvalId);
+      onRefresh();
+    } catch (err) {
+      console.error("Failed to deny:", err);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {directive.pendingApprovals.map((approval) => {
+        const urgencyColor = {
+          low: "text-[#556677]",
+          normal: "text-[#75aafc]",
+          high: "text-yellow-400",
+          critical: "text-red-400",
+        }[approval.urgency] || "text-[#556677]";
+
+        return (
+          <div
+            key={approval.id}
+            className="p-4 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.2)]"
+          >
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm text-[#dbe7ff]">{approval.approvalType}</span>
+                  <span className={`font-mono text-[10px] uppercase ${urgencyColor}`}>
+                    {approval.urgency}
+                  </span>
+                </div>
+                <p className="font-mono text-xs text-[#9bc3ff] mt-1">{approval.description}</p>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleApprove(approval.id)}
+                  className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-green-700 border border-green-600 hover:bg-green-600 uppercase"
+                >
+                  Approve
+                </button>
+                <button
+                  onClick={() => handleDeny(approval.id)}
+                  className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-red-700 border border-red-600 hover:bg-red-600 uppercase"
+                >
+                  Deny
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function VerifiersTab({ directive: _directive }: { directive: DirectiveWithProgress }) {
+  // TODO: Fetch verifiers separately
+  return (
+    <div className="text-center py-8">
+      <p className="font-mono text-sm text-[#556677]">
+        Verifiers will be shown here. Use auto-detect to find available verifiers.
+      </p>
+    </div>
+  );
+}
+
+// =============================================================================
+// Create Directive Modal
+// =============================================================================
+
+interface CreateDirectiveModalProps {
+  onSubmit: (goal: string, repositoryUrl: string | undefined, autonomyLevel: AutonomyLevel) => void;
+  onCancel: () => void;
+}
+
+function CreateDirectiveModal({ onSubmit, onCancel }: CreateDirectiveModalProps) {
+  const [goal, setGoal] = useState("");
+  const [repositoryUrl, setRepositoryUrl] = useState("");
+  const [autonomyLevel, setAutonomyLevel] = useState<AutonomyLevel>("guardrails");
+  const [suggestions, setSuggestions] = useState<RepositoryHistoryEntry[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  // Load suggestions
+  useEffect(() => {
+    getRepositorySuggestions("remote", undefined, 5)
+      .then((res) => {
+        setSuggestions(res.entries);
+      })
+      .catch(() => {
+        setSuggestions([]);
+      });
+  }, []);
+
+  const handleSubmit = () => {
+    if (goal.trim()) {
+      onSubmit(goal.trim(), repositoryUrl.trim() || undefined, autonomyLevel);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] max-h-[90vh] overflow-y-auto">
+        <h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4">
+          Create Directive
+        </h3>
+
+        <div className="space-y-4">
+          {/* Goal */}
+          <div>
+            <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+              Goal *
+            </label>
+            <textarea
+              value={goal}
+              onChange={(e) => setGoal(e.target.value)}
+              placeholder="Describe what you want to accomplish..."
+              rows={3}
+              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"
+              autoFocus
+            />
+          </div>
+
+          {/* Repository URL */}
+          <div>
+            <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+              Repository URL (optional)
+            </label>
+            <div className="relative">
+              <input
+                type="text"
+                value={repositoryUrl}
+                onChange={(e) => setRepositoryUrl(e.target.value)}
+                onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+                onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
+                placeholder="https://github.com/owner/repo"
+                className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+              />
+              {showSuggestions && suggestions.length > 0 && (
+                <div className="absolute top-full left-0 right-0 mt-1 border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto z-10">
+                  {suggestions.map((s) => (
+                    <button
+                      key={s.id}
+                      type="button"
+                      onClick={() => {
+                        setRepositoryUrl(s.repositoryUrl || "");
+                        setShowSuggestions(false);
+                      }}
+                      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="text-[#9bc3ff] truncate">{s.name}</div>
+                      <div className="text-[10px] text-[#556677] truncate">{s.repositoryUrl}</div>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Autonomy Level */}
+          <div>
+            <label className="block font-mono text-xs text-[#8b949e] uppercase mb-2">
+              Autonomy Level
+            </label>
+            <div className="flex gap-2">
+              {(["full_auto", "guardrails", "manual"] as const).map((level) => (
+                <button
+                  key={level}
+                  type="button"
+                  onClick={() => setAutonomyLevel(level)}
+                  className={`flex-1 px-3 py-2 font-mono text-xs uppercase ${
+                    autonomyLevel === level
+                      ? "text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3]"
+                      : "text-[#556677] border border-[rgba(117,170,252,0.2)] hover:border-[#3f6fb3]"
+                  }`}
+                >
+                  {level.replace("_", " ")}
+                </button>
+              ))}
+            </div>
+            <p className="font-mono text-[10px] text-[#556677] mt-1">
+              {autonomyLevel === "full_auto" && "Automatic progression without approval gates"}
+              {autonomyLevel === "guardrails" && "Request approval for yellow/red confidence scores"}
+              {autonomyLevel === "manual" && "Request approval for all step completions"}
+            </p>
+          </div>
+
+          <p className="font-mono text-xs text-[#8b949e]">
+            A directive is a top-level goal that generates a chain of steps. Each step spawns
+            contracts that are verified before progression.
+          </p>
+
+          {/* Actions */}
+          <div className="flex gap-2 justify-end pt-2">
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={!goal.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>
+  );
+}