@walwal-harness/cli 7.1.40 → 7.1.42

package/apps/harness-dashboard/components/Scene.tsx

@@ -7,6 +7,7 @@ import type {
   ConventionEntry,
   CxxTodo,
   GotchaEntry,
+  HarnessFileEntry,
   HarnessSnapshot,
   MissionDoc,
   OwnerPromptEntry,
@@ -53,6 +54,14 @@ type HeatSample = {
 };
 
 type GoalGroup = { goal: MissionDoc; children: MissionDoc[] };
+type HealthTone = "green" | "orange" | "red" | "cyan" | "slate";
+type RuntimeHealth = {
+  label: string;
+  detail: string;
+  tone: HealthTone;
+  ageMs: number | null;
+  lastSignalAt: string | null;
+};
 
 const CXX_ROLES = ["ceo", "coo", "cdo", "cto", "cqo", "ops"] as const;
 type CxxRole = typeof CXX_ROLES[number];
@@ -190,6 +199,23 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
             missionId: activeMission?.missionId ?? null,
           });
         }
+        // Authoritative "who's working now": always light the runtime's current
+        // agent lane while the loop is active (we only reach here when not idle),
+        // even if that agent has no per-lane todo/worker row yet — work often runs
+        // in a background agent the runtime only names via current_agent.
+        const currentRole = (snapshot.runtime?.currentAgent ?? "").replace(/^harness-/, "");
+        if (currentRole) {
+          const currentLane = lanes.find((l) => l.kind === "cxx" && l.role === currentRole);
+          if (currentLane && !next.some((s) => s.laneId === currentLane.id)) {
+            next.push({
+              ts: now,
+              laneId: currentLane.id,
+              count: 2,
+              hotfix: activeMission?.type === "hotfix",
+              missionId: activeMission?.missionId ?? null,
+            });
+          }
+        }
         if (next.length === 0) return prev;
         return [...prev, ...next]
           .filter((sample) => now - sample.ts < 30 * 60 * 1000)
@@ -233,12 +259,22 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
   const activeWorkers =
     (snapshot.missions.find((mission) => mission.active) ?? snapshot.missions[0])?.workers.filter((w) => w.active).length ?? 0;
   const hotfixCount = snapshot.missions.filter((m) => m.type === "hotfix").length;
+  const runtimeHealth = useMemo(() => deriveRuntimeHealth(snapshot), [snapshot]);
 
   const handleSelectWorker = (mission: MissionDoc, worker: WorkerDocEntry) => {
     setSelectedMissionId(mission.missionId);
     setSelectedLaneId(`${worker.owner}:${worker.name}`);
   };
 
+  // Open a gotcha/convention in the document viewer with its FULL markdown body
+  // (entry.content is the real readFileSync'd file — restores full-document reading).
+  const handleSelectKnowledge = (
+    entry: GotchaEntry | ConventionEntry,
+    kind: KnowledgeKind
+  ) => {
+    setCustomDoc({ source: kind, title: `${entry.id}.md`, content: entry.content });
+  };
+
   return (
     <div className="flex h-[100dvh] flex-col overflow-hidden bg-[#070d1d] text-slate-200">
       <TopHeader
@@ -261,24 +297,27 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
         />
 
         <main className="flex min-w-0 flex-1 flex-col gap-2 p-2">
-          {/* Top row: Knowledge | Layer Activity | Recent Report */}
-          <section className="grid shrink-0 grid-cols-3 gap-2" style={{ height: 280 }}>
+          {/* Top row: Owner situational awareness.
+              PULSE (trust verdict) · ACTIVE NOW (per-CXX activity, fixes the
+              "only CEO" heatmap illusion) · KNOWLEDGE (gotchas/conventions, full
+              body) · RECENT (worker reports, full body). All viewer-openable. */}
+          <section className="grid shrink-0 grid-cols-4 gap-2" style={{ height: 310 }}>
+            <OperationalStatusPanel
+              snapshot={snapshot}
+              health={runtimeHealth}
+              mission={selectedMission}
+            />
+            <ActiveNowPanel
+              lanes={lanes}
+              snapshot={snapshot}
+              selectedLaneId={selectedLaneId}
+              onSelectLane={setSelectedLaneId}
+            />
             <KnowledgeBasePanel
               gotchas={snapshot.gotchas}
               conventions={snapshot.conventions}
               baselineTs={selectedGoal?.ts ?? null}
-              onSelect={(entry, kind) =>
-                setCustomDoc({
-                  source: kind,
-                  title: `${entry.id}.md`,
-                  content: entry.content,
-                })
-              }
-            />
-            <LayerActivityPanel
-              goalScope={goalScopeMissions}
-              todos={snapshot.todos}
-              label={selectedGoal?.missionId ?? "no goal"}
+              onSelect={handleSelectKnowledge}
             />
             <RecentReportPanel
               missions={snapshot.missions}
@@ -384,12 +423,82 @@ function TopHeader({
         />
         <HeaderBadge label="Workers" value={String(activeWorkers)} tone="cyan" />
         <HeaderBadge label="Hot-fix" value={String(hotfixCount)} tone="red" />
+        <WakeToggle />
         <PresenceLegend />
       </div>
     </header>
   );
 }
 
+// Toggles the per-project hourly wake launchd job (keyed by HARNESS_BASE_PORT)
+// that drives the perpetual operating loop across sessions.
+interface WakeStatus {
+  supported?: boolean;
+  enabled?: boolean;
+  base_port?: number | string | null;
+  label?: string;
+  error?: string;
+}
+
+function WakeToggle() {
+  const [status, setStatus] = useState<WakeStatus | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    fetch("/api/wake")
+      .then((r) => r.json())
+      .then((s) => { if (alive) setStatus(s); })
+      .catch(() => { if (alive) setStatus({ supported: false }); });
+    return () => { alive = false; };
+  }, []);
+
+  const toggle = async () => {
+    if (busy || !status?.supported) return;
+    setBusy(true);
+    try {
+      const r = await fetch("/api/wake", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ action: status?.enabled ? "off" : "on" }),
+      });
+      setStatus(await r.json());
+    } catch {
+      /* keep prior status */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!status) return null;
+  const supported = !!status.supported;
+  const on = !!status.enabled;
+  const port = status.base_port ? `:${status.base_port}` : "";
+  const tone = !supported
+    ? "border-slate-600/30 bg-slate-600/10 text-slate-500"
+    : on
+    ? "border-emerald-400/40 bg-emerald-400/10 text-emerald-200"
+    : "border-slate-500/30 bg-slate-500/10 text-slate-300";
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      disabled={busy || !supported}
+      title={
+        supported
+          ? `Hourly wake launchd job ${status.label ?? ""} — click to turn ${on ? "off" : "on"} (drives the perpetual operating loop across sessions)`
+          : "launchd not available on this OS"
+      }
+      className={`rounded-full border px-2.5 py-1 font-mono text-[10px] transition-colors ${tone} ${
+        supported ? "cursor-pointer hover:brightness-125" : "cursor-default"
+      } ${busy ? "opacity-60" : ""}`}
+    >
+      <span className="text-slate-500">Wake</span>
+      <span className="ml-1.5">{!supported ? "n/a" : on ? `● on${port}` : `○ off${port}`}</span>
+    </button>
+  );
+}
+
 function HeaderBadge({
   label,
   value,
@@ -565,14 +674,22 @@ function HistoryNavigator({
               <button
                 type="button"
                 onClick={() => onSelect(goal.missionId)}
-                className={`w-full truncate px-2 py-2 text-left ${
+                className={`flex w-full items-center gap-1 px-2 py-2 text-left ${
                   activeMissionId === goal.missionId
                     ? "bg-cyan-400/[0.12] text-cyan-100"
                     : "text-slate-300 hover:bg-white/[0.04]"
                 }`}
                 title={goal.label || goal.missionId}
               >
-                {goal.label || goal.missionId}
+                {goal.lifecycle === "operating" && (
+                  <span
+                    className="shrink-0 rounded bg-emerald-500/20 px-1 py-0.5 font-mono text-[8px] font-semibold text-emerald-300"
+                    title={`영구 운영 중${typeof goal.operatingCycles === "number" ? ` · ${goal.operatingCycles} cycles` : ""}`}
+                  >
+                    ⟳ OPER{typeof goal.agendaOpen === "number" && goal.agendaOpen > 0 ? ` ${goal.agendaOpen}` : ""}
+                  </span>
+                )}
+                <span className="truncate">{goal.label || goal.missionId}</span>
               </button>
               {children.length > 0 && (
                 <div className="border-t border-slate-800/70 py-1 pl-3">
@@ -701,6 +818,496 @@ function formatTime(iso: string | null | undefined) {
   }
 }
 
+function formatRelativeTime(iso: string | null | undefined) {
+  if (!iso) return "no signal";
+  const t = new Date(iso).getTime();
+  if (!Number.isFinite(t)) return "bad timestamp";
+  const diff = Math.max(0, Date.now() - t);
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+function newestIso(values: Array<string | null | undefined>) {
+  let best: string | null = null;
+  let bestTime = 0;
+  for (const value of values) {
+    if (!value) continue;
+    const time = Date.parse(value);
+    if (!Number.isFinite(time) || time <= bestTime) continue;
+    best = value;
+    bestTime = time;
+  }
+  return best;
+}
+
+function deriveRuntimeHealth(snapshot: HarnessSnapshot): RuntimeHealth {
+  const rt = snapshot.runtime;
+  const status = (rt.agentStatus ?? "").toLowerCase();
+  const conductor = (rt.conductorState ?? "").toLowerCase();
+  const nextAgent = (rt.nextAgent ?? "").toLowerCase();
+  const hasNextAgent = nextAgent !== "" && nextAgent !== "none";
+  const hasActiveDispatch =
+    status === "running" ||
+    conductor === "running" ||
+    conductor === "active" ||
+    conductor === "dispatching" ||
+    hasNextAgent;
+  const lastSignalAt = newestIso([
+    rt.updatedAt,
+    rt.lastDispatchAt,
+    snapshot.activitySamples.at(-1)?.ts,
+    snapshot.events[0]?.ts,
+    ...snapshot.todos.map((todo) => todo.lastHeartbeatAt ?? todo.updatedAt),
+    ...snapshot.missions.flatMap((mission) => [
+      mission.ts,
+      ...mission.workers.map((worker) => worker.updatedAt),
+    ]),
+  ]);
+  const ageMs = lastSignalAt ? Date.now() - Date.parse(lastSignalAt) : null;
+  const completedLoop =
+    status === "completed" ||
+    status === "complete" ||
+    conductor === "completed" ||
+    conductor === "complete";
+  const idle =
+    !hasActiveDispatch &&
+    (completedLoop || ((rt.currentAgent ?? null) === null && !hasNextAgent));
+
+  if (status === "blocked" || conductor === "blocked" || rt.ownerPrompt?.status === "awaiting-authority") {
+    return {
+      label: "BLOCKED",
+      detail: rt.ownerPrompt?.summary || rt.currentAction || "external authority required",
+      tone: "red",
+      ageMs,
+      lastSignalAt,
+    };
+  }
+  if (idle) {
+    return {
+      label: conductor === "operating" || status === "operating" ? "OPERATING" : "IDLE",
+      detail: conductor === "operating" || status === "operating" ? "yielded to hourly wake" : "runtime loop is closed",
+      tone: conductor === "operating" || status === "operating" ? "cyan" : "slate",
+      ageMs,
+      lastSignalAt,
+    };
+  }
+  if (ageMs === null) {
+    return { label: "UNKNOWN", detail: "no heartbeat yet", tone: "orange", ageMs, lastSignalAt };
+  }
+  if (ageMs > 15 * 60_000) {
+    return {
+      label: "STUCK?",
+      detail: "running state with no recent file or heartbeat movement",
+      tone: "red",
+      ageMs,
+      lastSignalAt,
+    };
+  }
+  if (ageMs > 3 * 60_000) {
+    return {
+      label: "STALE",
+      detail: "running, but no recent visible movement",
+      tone: "orange",
+      ageMs,
+      lastSignalAt,
+    };
+  }
+  return {
+    label: "ALIVE",
+    detail: rt.currentAction || `${rt.currentAgent ?? rt.nextAgent ?? "company"} is active`,
+    tone: "green",
+    ageMs,
+    lastSignalAt,
+  };
+}
+
+function healthToneClass(tone: HealthTone) {
+  return {
+    green: "border-emerald-400/40 bg-emerald-400/10 text-emerald-200",
+    orange: "border-orange-400/40 bg-orange-400/10 text-orange-200",
+    red: "border-rose-400/50 bg-rose-400/10 text-rose-200",
+    cyan: "border-cyan-400/40 bg-cyan-400/10 text-cyan-200",
+    slate: "border-slate-500/30 bg-slate-500/10 text-slate-300",
+  }[tone];
+}
+
+function buildHighlightedPaths(
+  mission: MissionDoc | null,
+  lane: AgentLane | null,
+  todos: CxxTodo[]
+) {
+  const paths = new Set<string>();
+  if (mission) {
+    const base = `.harness/documents/${mission.missionId}`;
+    paths.add(base);
+    paths.add(`${base}/mission-state.json`);
+    for (const role of ["ceo", "coo", "cdo", "cto", "cqo", "ops"]) {
+      const key = role as keyof Pick<MissionDoc, "ceo" | "coo" | "cdo" | "cto" | "cqo" | "ops">;
+      if (mission[key]) paths.add(`${base}/${role}.md`);
+    }
+    for (const worker of mission.workers) {
+      if (worker.reportPath) paths.add(worker.reportPath);
+    }
+  }
+  if (lane?.worker?.reportPath) paths.add(lane.worker.reportPath);
+  for (const todo of todos) {
+    if (todo.missionPath) paths.add(todo.missionPath);
+    for (const artifact of todo.requiredArtifacts) paths.add(artifact);
+  }
+  paths.add(".harness/progress.json");
+  paths.add(".harness/todos/state.json");
+  return paths;
+}
+
+function OperationalStatusPanel({
+  snapshot,
+  health,
+  mission,
+}: {
+  snapshot: HarnessSnapshot;
+  health: RuntimeHealth;
+  mission: MissionDoc | null;
+}) {
+  const rt = snapshot.runtime;
+  const openTodos = snapshot.todos.filter((todo) => !["done", "completed"].includes(todo.status)).length;
+  const activeMission = mission ?? snapshot.missions.find((m) => m.active) ?? null;
+  return (
+    <div className="panel-shell fade-in flex h-full min-h-0 flex-col overflow-hidden p-2">
+      <SectionLabel>Now · Runtime</SectionLabel>
+      <div className={`mt-2 rounded border px-3 py-2 ${healthToneClass(health.tone)}`}>
+        <div className="flex items-center justify-between gap-2">
+          <span className="font-mono text-lg font-semibold tracking-wide">{health.label}</span>
+          <span className="font-mono text-[10px] opacity-80">{formatRelativeTime(health.lastSignalAt)}</span>
+        </div>
+        <div className="mt-1 line-clamp-2 text-[11px] leading-4 opacity-90">{health.detail}</div>
+      </div>
+      <div className="mt-2 grid grid-cols-2 gap-1.5 text-[10px]">
+        <RuntimeMetric label="agent" value={rt.currentAgent ?? rt.nextAgent ?? "none"} />
+        <RuntimeMetric label="status" value={rt.agentStatus ?? "unknown"} />
+        <RuntimeMetric label="loop" value={rt.conductorState ?? rt.companyState ?? "n/a"} />
+        <RuntimeMetric label="workers" value={String(rt.activeWorkers ?? 0)} />
+      </div>
+      <div className="inset-shell mt-2 min-h-0 flex-1 overflow-hidden p-2">
+        <div className="font-mono text-[9px] uppercase tracking-wider text-slate-500">Current Work</div>
+        <div className="mt-1 truncate text-[11px] text-cyan-100" title={activeMission?.missionId}>
+          {activeMission?.missionId ?? "no mission selected"}
+        </div>
+        <div className="mt-1 line-clamp-2 text-[10px] leading-4 text-slate-300" title={rt.currentAction ?? ""}>
+          {rt.currentAction ?? rt.ownerPrompt?.summary ?? "no current action recorded"}
+        </div>
+        <div className="mt-2 flex items-center justify-between font-mono text-[9px] text-slate-500">
+          <span>{openTodos} open todos</span>
+          <span>{snapshot.events.length} recent events</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RuntimeMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="inset-shell min-w-0 px-2 py-1">
+      <div className="font-mono text-[8px] uppercase tracking-wider text-slate-600">{label}</div>
+      <div className="truncate font-mono text-[10px] text-slate-200" title={value}>{value}</div>
+    </div>
+  );
+}
+
+// ACTIVE NOW — a per-CXX roster so the whole company is legible at a glance,
+// independent of heatmap brightness. Each role shows LIVE (open todo / running
+// worker), RECENT (newest activity sample, relative age), or IDLE — in its own
+// CXX colour. This is the perception-level fix for "heatmap shows only CEO".
+function ActiveNowPanel({
+  lanes,
+  snapshot,
+  selectedLaneId,
+  onSelectLane,
+}: {
+  lanes: AgentLane[];
+  snapshot: HarnessSnapshot;
+  selectedLaneId: string | null;
+  onSelectLane: (laneId: string) => void;
+}) {
+  const lastSampleByRole = useMemo(() => {
+    const m = new Map<string, string>();
+    for (const s of snapshot.activitySamples) {
+      const role = s.laneId.split(":")[0];
+      const prev = m.get(role);
+      if (!prev || Date.parse(s.ts) > Date.parse(prev)) m.set(role, s.ts);
+    }
+    return m;
+  }, [snapshot.activitySamples]);
+
+  // The runtime's current_agent is the authoritative "who is working now" signal:
+  // a freshly-spawned agent often has no per-lane todo/worker row yet (work runs in
+  // a background agent the runtime only names via current_agent + current_action),
+  // so honour it directly instead of inferring liveness from todos/workers alone.
+  const rt = snapshot.runtime;
+  const currentRole = (rt.currentAgent ?? "").replace(/^harness-/, "");
+  const loopActive =
+    rt.agentStatus !== "completed" &&
+    rt.agentStatus !== "complete" &&
+    rt.conductorState !== "completed" &&
+    rt.conductorState !== "blocked";
+
+  const rows = CXX_ROLES.map((role) => {
+    const lane = lanes.find((l) => l.kind === "cxx" && l.role === role) ?? null;
+    const openTodos = snapshot.todos.filter(
+      (t) => t.owner === role && t.status !== "done" && t.status !== "completed"
+    ).length;
+    const runningWorkers = (lane?.workers ?? []).filter(
+      (w) => w.active || w.status === "IN_PROGRESS"
+    ).length;
+    const lastTs = lastSampleByRole.get(role) ?? null;
+    const isCurrent = loopActive && currentRole === role;
+    const state: "live" | "recent" | "idle" =
+      isCurrent || openTodos > 0 || runningWorkers > 0 ? "live" : lastTs ? "recent" : "idle";
+    return { role, lane, openTodos, runningWorkers, lastTs, isCurrent, state };
+  });
+
+  return (
+    <div className="panel-shell fade-in flex h-full min-h-0 flex-col overflow-hidden p-2">
+      <SectionLabel>Active Now · Who · What</SectionLabel>
+      <div className="mt-2 min-h-0 flex-1 space-y-1 overflow-auto pr-1">
+        {rows.map(({ role, lane, openTodos, runningWorkers, lastTs, isCurrent, state }) => {
+          const selected = !!lane && selectedLaneId === lane.id;
+          return (
+            <button
+              key={role}
+              type="button"
+              disabled={!lane}
+              onClick={() => lane && onSelectLane(lane.id)}
+              title={lane ? `Open ${role.toUpperCase()} document` : `${role.toUpperCase()} not active in this mission`}
+              className={`flex w-full items-center gap-2 rounded border px-2 py-1.5 text-left transition-colors ${
+                selected
+                  ? "border-cyan-300 bg-cyan-400/10"
+                  : state === "live"
+                  ? "border-cyan-400/40 bg-cyan-400/5"
+                  : "border-slate-800 hover:border-cyan-400/20 hover:bg-white/[0.03]"
+              } ${lane ? "cursor-pointer" : "cursor-default opacity-60"}`}
+            >
+              <span
+                className={`h-2.5 w-2.5 shrink-0 rounded-full ${
+                  state === "idle" ? "bg-slate-700" : CXX_COLOR[role]
+                } ${state === "live" ? "animate-pulse" : state === "recent" ? "opacity-60" : ""}`}
+              />
+              <span className={`w-9 shrink-0 font-mono text-[11px] font-semibold ${CXX_TEXT[role]}`}>
+                {role.toUpperCase()}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-[10px] text-slate-300">
+                {state === "live"
+                  ? isCurrent
+                    ? rt.currentAction ?? "current agent · running"
+                    : runningWorkers > 0
+                    ? `${runningWorkers} worker${runningWorkers > 1 ? "s" : ""} running`
+                    : `${openTodos} open todo${openTodos > 1 ? "s" : ""}`
+                  : state === "recent"
+                  ? `active ${formatRelativeTime(lastTs)}`
+                  : "idle"}
+              </span>
+              <span
+                className={`shrink-0 font-mono text-[8px] uppercase tracking-wider ${
+                  state === "live" ? "text-cyan-300" : state === "recent" ? "text-slate-500" : "text-slate-600"
+                }`}
+              >
+                {state}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function StepProgressPanel({
+  mission,
+  runtimeAgent,
+  todos,
+}: {
+  mission: MissionDoc | null;
+  runtimeAgent: string | null;
+  todos: CxxTodo[];
+}) {
+  const steps = useMemo(() => buildMissionSteps(mission, runtimeAgent, todos), [mission, runtimeAgent, todos]);
+  return (
+    <div className="panel-shell fade-in flex h-full min-h-0 flex-col overflow-hidden p-2">
+      <SectionLabel>Plan · Current Step</SectionLabel>
+      <div className="mt-2 min-h-0 flex-1 space-y-1 overflow-auto pr-1">
+        {steps.map((step, idx) => (
+          <div
+            key={step.id}
+            className={`flex items-center gap-2 rounded border px-2 py-1.5 ${
+              step.state === "active"
+                ? "border-cyan-400/50 bg-cyan-400/10"
+                : step.state === "done"
+                ? "border-emerald-400/20 bg-emerald-400/[0.06]"
+                : step.state === "blocked"
+                ? "border-rose-400/40 bg-rose-400/10"
+                : "border-slate-800 bg-slate-950/30"
+            }`}
+          >
+            <span className={`grid h-5 w-5 shrink-0 place-items-center rounded font-mono text-[9px] ${
+              step.state === "active"
+                ? "bg-cyan-400 text-slate-950"
+                : step.state === "done"
+                ? "bg-emerald-500/70 text-slate-950"
+                : step.state === "blocked"
+                ? "bg-rose-500/80 text-white"
+                : "bg-slate-800 text-slate-500"
+            }`}>
+              {idx + 1}
+            </span>
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-[11px] font-semibold text-slate-100">{step.label}</div>
+              <div className="truncate font-mono text-[9px] text-slate-500">{step.detail}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function buildMissionSteps(
+  mission: MissionDoc | null,
+  runtimeAgent: string | null,
+  todos: CxxTodo[]
+) {
+  const roleDone = (role: keyof Pick<MissionDoc, "ceo" | "coo" | "cdo" | "cto" | "cqo" | "ops">) => !!mission?.[role];
+  const workerTotal = mission?.workers.length ?? 0;
+  const workerDone = mission?.workers.filter((w) => w.status === "COMPLETE").length ?? 0;
+  const blockedOwners = new Set(todos.filter((todo) => todo.status === "blocked").map((todo) => todo.owner));
+  const terminal = mission ? isTerminalLifecycle(mission.lifecycle) || mission.lifecycle === "blocked" : false;
+  const activeRole = (runtimeAgent ?? "").replace(/^harness-/, "");
+  const rows = [
+    { id: "owner", label: "Owner intake", done: !!mission, detail: mission?.type ?? "waiting for command" },
+    { id: "ceo", label: "CEO routing/report", done: roleDone("ceo"), detail: mission?.ceo ? "ceo.md present" : "needs CEO record" },
+    { id: "coo", label: "COO plan/research", done: roleDone("coo"), detail: mission?.coo ? "coo.md present" : "not routed yet" },
+    { id: "cdo", label: "CDO design", done: roleDone("cdo"), detail: mission?.cdoPreview ? "preview available" : mission?.cdo ? "cdo.md present" : "not routed yet" },
+    { id: "cto", label: "CTO implementation", done: roleDone("cto"), detail: mission?.cto ? "cto.md present" : "not routed yet" },
+    { id: "cqo", label: "CQO verification", done: roleDone("cqo"), detail: mission?.cqo ? "cqo.md present" : "not routed yet" },
+    { id: "ops", label: "OPS watch", done: roleDone("ops"), detail: mission?.ops ? "ops.md present" : "not routed yet" },
+    { id: "workers", label: "Hired workers", done: workerTotal > 0 && workerDone >= workerTotal, detail: `${workerDone}/${workerTotal} reports complete` },
+    { id: "terminal", label: "Runtime transition", done: terminal, detail: mission?.lifecycle ?? "unknown" },
+  ];
+  return rows.map((row) => ({
+    ...row,
+    state: blockedOwners.has(row.id)
+      ? "blocked"
+      : activeRole === row.id || (row.id === "workers" && workerTotal > workerDone)
+      ? "active"
+      : row.done
+      ? "done"
+      : "pending",
+  }));
+}
+
+function HarnessFileMapPanel({
+  files,
+  highlightedPaths,
+  selectedPath,
+  onSelect,
+}: {
+  files: HarnessFileEntry[];
+  highlightedPaths: Set<string>;
+  selectedPath: string | null;
+  onSelect: (entry: HarnessFileEntry) => void;
+}) {
+  const visibleFiles = useMemo(() => {
+    const priority = new Map<HarnessFileEntry["category"], number>([
+      ["documents", 0],
+      ["todos", 1],
+      ["activity", 2],
+      ["knowledge", 3],
+      ["runtime", 4],
+      ["config", 5],
+      ["other", 6],
+    ]);
+    return [...files]
+      .sort((a, b) => {
+        const hotA = isHighlightedPath(a.path, highlightedPaths) ? -1 : 0;
+        const hotB = isHighlightedPath(b.path, highlightedPaths) ? -1 : 0;
+        if (hotA !== hotB) return hotA - hotB;
+        const cat = (priority.get(a.category) ?? 9) - (priority.get(b.category) ?? 9);
+        if (cat !== 0) return cat;
+        return (b.updatedAt ?? "").localeCompare(a.updatedAt ?? "");
+      })
+      .slice(0, 90);
+  }, [files, highlightedPaths]);
+  return (
+    <div className="panel-shell fade-in flex h-full min-h-0 flex-col overflow-hidden p-2">
+      <div className="flex items-center justify-between">
+        <SectionLabel>.harness · File Map</SectionLabel>
+        <span className="font-mono text-[9px] text-slate-500">{files.length} indexed</span>
+      </div>
+      <div className="mt-2 min-h-0 flex-1 overflow-auto pr-1">
+        {visibleFiles.length === 0 ? (
+          <div className="text-[10px] text-slate-500">No .harness files indexed.</div>
+        ) : (
+          visibleFiles.map((entry) => {
+            const active = isHighlightedPath(entry.path, highlightedPaths);
+            const selected = selectedPath === entry.path;
+            return (
+              <button
+                key={entry.path}
+                type="button"
+                onClick={() => onSelect(entry)}
+                className={`mb-0.5 grid w-full grid-cols-[1fr_auto] items-center gap-2 rounded border px-1.5 py-1 text-left ${
+                  selected
+                    ? "border-cyan-300 bg-cyan-400/10"
+                    : active
+                    ? "border-emerald-400/40 bg-emerald-400/10"
+                    : "border-transparent hover:border-cyan-400/20 hover:bg-white/[0.03]"
+                }`}
+                title={entry.path}
+              >
+                <span className="min-w-0 truncate font-mono text-[10px] text-slate-200" style={{ paddingLeft: `${Math.max(0, entry.depth - 1) * 10}px` }}>
+                  <span className={entry.kind === "dir" ? "text-amber-300" : "text-slate-500"}>
+                    {entry.kind === "dir" ? "▸" : "•"}
+                  </span>{" "}
+                  {entry.name}
+                </span>
+                <span className={`rounded px-1 py-0.5 font-mono text-[8px] ${fileCategoryClass(entry.category)}`}>
+                  {active ? "focus" : entry.category}
+                </span>
+                <span className="col-span-2 truncate pl-4 font-mono text-[8px] text-slate-600">
+                  {entry.path} · {formatRelativeTime(entry.updatedAt)}
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+function isHighlightedPath(pathValue: string, highlightedPaths: Set<string>) {
+  if (highlightedPaths.has(pathValue)) return true;
+  for (const candidate of highlightedPaths) {
+    if (candidate && pathValue.startsWith(`${candidate}/`)) return true;
+  }
+  return false;
+}
+
+function fileCategoryClass(category: HarnessFileEntry["category"]) {
+  return {
+    documents: "bg-cyan-400/10 text-cyan-200",
+    todos: "bg-orange-400/10 text-orange-200",
+    activity: "bg-emerald-400/10 text-emerald-200",
+    knowledge: "bg-violet-400/10 text-violet-200",
+    runtime: "bg-slate-500/10 text-slate-300",
+    config: "bg-amber-400/10 text-amber-200",
+    other: "bg-slate-800 text-slate-400",
+  }[category];
+}
+
 // ===== Knowledge base panel =====
 
 type KnowledgeKind = "Gotcha" | "Convention";
@@ -1542,7 +2149,7 @@ function WorkflowHeatmap({
                     : selected
                     ? "border-cyan-300"
                     : "border-transparent"
-                } ${heatColor(cell.count)}`}
+                } ${heatColor(cell.count, cell.laneId)}`}
                 style={{ gridColumn: cell.x + 2, gridRow: cell.y + 2 }}
                 title={
                   interactive
@@ -1732,6 +2339,14 @@ function DocumentViewer({
     | undefined;
   const roleDoc = role ? mission?.[role] : null;
   const workerDoc = lane?.worker?.content ?? null;
+  // CDO ships a self-contained HTML preview (cdo/preview.html). When the CDO
+  // lane is selected and a preview exists, surface the visual deliverable in a
+  // sandboxed iframe (the "click harness-cdo to view the Preview" contract),
+  // with a toggle back to the cdo.md decision record.
+  const cdoPreview = !customDoc && !workerDoc && role === "cdo" ? mission?.cdoPreview ?? null : null;
+  const [cdoMode, setCdoMode] = useState<"preview" | "doc">("preview");
+  const showPreview = !!cdoPreview && cdoMode === "preview";
+
   const rawContent = customDoc
     ? customDoc.content
     : workerDoc ?? roleDoc ?? mission?.ceo ?? "_No document selected._";
@@ -1745,28 +2360,59 @@ function DocumentViewer({
           : role
           ? role.toUpperCase()
           : "CEO"
-      }`;
+      }${cdoPreview ? (showPreview ? " · preview" : " · doc") : ""}`;
   return (
     <section className="panel-shell flex min-h-0 flex-1 flex-col p-2">
       <div className="flex items-center justify-between gap-2">
         <SectionLabel>Document Viewer · {subtitle}</SectionLabel>
-        <button
-          type="button"
-          onClick={onToggle}
-          className="grid h-6 w-6 shrink-0 place-items-center rounded text-[11px] text-slate-400 hover:bg-white/10 hover:text-cyan-200"
-          title={expanded ? "Minimize viewer" : "Expand to 50%"}
-          aria-label={expanded ? "Minimize viewer" : "Expand viewer"}
-        >
-          <span className={`doc-toggle-icon ${expanded ? "rotate-180" : ""}`}>↗</span>
-        </button>
-      </div>
-      <div className="inset-shell mt-2 min-h-0 flex-1 overflow-auto p-3">
-        <article className="markdown-doc text-[11px] leading-5 text-slate-300">
-          <ReactMarkdown remarkPlugins={[remarkGfm]} components={MARKDOWN_COMPONENTS}>
-            {content}
-          </ReactMarkdown>
-        </article>
+        <div className="flex shrink-0 items-center gap-1">
+          {cdoPreview && (
+            <div className="mr-1 flex overflow-hidden rounded border border-slate-700 font-mono text-[9px]">
+              <button
+                type="button"
+                onClick={() => setCdoMode("preview")}
+                className={`px-1.5 py-0.5 ${showPreview ? "bg-violet-500/30 text-violet-200" : "text-slate-400 hover:text-violet-200"}`}
+              >
+                Preview
+              </button>
+              <button
+                type="button"
+                onClick={() => setCdoMode("doc")}
+                className={`px-1.5 py-0.5 ${!showPreview ? "bg-violet-500/30 text-violet-200" : "text-slate-400 hover:text-violet-200"}`}
+              >
+                Doc
+              </button>
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={onToggle}
+            className="grid h-6 w-6 place-items-center rounded text-[11px] text-slate-400 hover:bg-white/10 hover:text-cyan-200"
+            title={expanded ? "Minimize viewer" : "Expand to 50%"}
+            aria-label={expanded ? "Minimize viewer" : "Expand viewer"}
+          >
+            <span className={`doc-toggle-icon ${expanded ? "rotate-180" : ""}`}>↗</span>
+          </button>
+        </div>
       </div>
+      {showPreview ? (
+        <div className="inset-shell mt-2 min-h-0 flex-1 overflow-hidden p-1">
+          <iframe
+            title="CDO design preview"
+            sandbox=""
+            className="h-full w-full rounded bg-white"
+            srcDoc={cdoPreview ?? ""}
+          />
+        </div>
+      ) : (
+        <div className="inset-shell mt-2 min-h-0 flex-1 overflow-auto p-3">
+          <article className="markdown-doc text-[11px] leading-5 text-slate-300">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={MARKDOWN_COMPONENTS}>
+              {content}
+            </ReactMarkdown>
+          </article>
+        </div>
+      )}
     </section>
   );
 }
@@ -1797,8 +2443,16 @@ function Arrow() {
   return <span className="text-slate-600">→</span>;
 }
 
-function heatColor(count: number) {
-  // 3-state activity from sample.count: 0 idle / 1 standby / 2 in-progress.
+function heatColor(count: number, laneId?: string) {
+  // 3-state activity from sample.count: 0 idle / 1 recent / 2 in-progress.
+  // Render per-role so each lane's history shows in its own CXX colour instead of
+  // collapsing into one dim emerald (which read as "only CEO is working"). The
+  // base colour + "/30" variant mirror the patterns already used in LayerActivityPanel.
+  const role = (laneId ?? "").split(":")[0] as CxxRole;
+  if (role in CXX_COLOR) {
+    if (count >= 2) return CXX_COLOR[role];
+    if (count >= 1) return `${CXX_COLOR[role]}/30`;
+  }
   if (count >= 2) return "bg-emerald-500/80";
   if (count >= 1) return "bg-emerald-500/30";
   return "bg-slate-900";