@walwal-harness/cli 7.1.40 → 7.1.41

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

@@ -1,459 +0,0 @@
-"use client";
-import { useCallback, useMemo, useRef, useState } from "react";
-import type { AgentId, HarnessSnapshot, MinifigState, OrgNodeDef } from "@/lib/types";
-
-interface OrgTreeProps {
-  snapshot: HarnessSnapshot;
-  activeNodeId: string | null;
-  onNodeClick: (node: OrgNodeDef) => void;
-}
-
-function StatusDot({ status }: { status: MinifigState }) {
-  const cls = {
-    "red-alert": "bg-rose-500 animate-ping",
-    typing: "bg-cyan-400 animate-pulse",
-    talking: "bg-emerald-400",
-    queued: "bg-amber-400",
-    idle: "bg-gray-600",
-  }[status] ?? "bg-gray-600";
-  return <span className={`absolute top-2 right-2 h-2 w-2 rounded-full ${cls}`} />;
-}
-
-function OrgCard({
-  node,
-  size = "md",
-  active,
-  onClick,
-}: {
-  node: OrgNodeDef;
-  size?: "lg" | "md" | "sm";
-  active: boolean;
-  onClick: (n: OrgNodeDef) => void;
-}) {
-  const roleColor = {
-    owner: "border-amber-500/50 bg-amber-500/5",
-    ceo: "border-cyan-400/50 bg-cyan-400/5",
-    coo: "border-emerald-400/40 bg-emerald-500/5",
-    cdo: "border-purple-400/40 bg-purple-500/5",
-    cto: "border-blue-400/40 bg-blue-500/5",
-    cqo: "border-amber-400/40 bg-amber-500/5",
-    ops: "border-rose-400/40 bg-rose-500/5",
-  }[node.role] ?? "border-gray-600/40 bg-gray-800/30";
-
-  const widths = {
-    lg: "min-w-[220px] max-w-[260px]",
-    md: "min-w-[150px] max-w-[190px]",
-    sm: "min-w-[130px] max-w-[160px]",
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={() => onClick(node)}
-      className={`brutal-tile relative rounded-md p-3 text-left transition-all cursor-pointer ${roleColor} ${widths[size]} ${active ? "ring-2 ring-cyan-300 border-cyan-300/80" : "hover:border-white/35"}`}
-    >
-      <StatusDot status={node.status} />
-      <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 mb-0.5">{node.role}</div>
-      <div className="text-sm font-semibold text-gray-100 leading-tight">{node.label}</div>
-      {node.sublabel && (
-        <div className="text-[10px] text-gray-500 mt-0.5">{node.sublabel}</div>
-      )}
-      {node.activity && (
-        <div className="mt-2 text-[10px] text-gray-400 line-clamp-2 leading-relaxed">
-          {node.activity}
-        </div>
-      )}
-    </button>
-  );
-}
-
-export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
-  const defaultZoom = 0.74;
-  const [zoom, setZoom] = useState(defaultZoom);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const dragRef = useRef<{ x: number; y: number; left: number; top: number } | null>(null);
-
-  const agentMap = new Map(snapshot.agents.map((a) => [a.id, a]));
-
-  const getStatus = (ids: AgentId[]): MinifigState => {
-    const states = ids.map((id) => agentMap.get(id)?.minifigState ?? "idle");
-    if (states.includes("red-alert")) return "red-alert";
-    if (states.includes("typing")) return "typing";
-    if (states.includes("talking")) return "talking";
-    if (states.includes("queued")) return "queued";
-    return "idle";
-  };
-
-  const currentMission = snapshot.missions?.[0] ?? null;
-
-  // Parse CEO activity from mission doc
-  const ceoActivity = (() => {
-    if (!currentMission?.ceo) return null;
-    const match = currentMission.ceo.match(/##\s*Owner 요청 요약\s*\n([\s\S]*?)(?=\n##)/);
-    return (
-      match?.[1]
-        ?.split("\n")
-        .find((l) => l.trim().length > 0)
-        ?.replace(/^[-*\d.]\s*/, "")
-        .trim()
-        .slice(0, 100) ?? null
-    );
-  })();
-
-  const ownerNode: OrgNodeDef = {
-    id: "owner",
-    role: "owner",
-    label: "Owner",
-    sublabel: "/goal · /submission · /hot-fix",
-    status: "idle",
-    activity: snapshot.ownerHistory?.[0]?.content.slice(0, 80) ?? null,
-    agentIds: [],
-  };
-
-  const ceoNode: OrgNodeDef = {
-    id: "ceo",
-    role: "ceo",
-    label: "harness-ceo",
-    sublabel: "Dispatcher · Brainstormer",
-    status: getStatus(["dispatcher", "brainstormer"] as AgentId[]),
-    activity: ceoActivity,
-    agentIds: ["dispatcher", "brainstormer"] as AgentId[],
-  };
-
-  const cxxNodes: OrgNodeDef[] = [
-    {
-      id: "coo",
-      role: "coo",
-      label: "harness-coo",
-      sublabel: "Planner · Research",
-      status: getStatus(["planner", "coo-developer", "documentationer"] as AgentId[]),
-      activity: null,
-      agentIds: ["planner", "coo-developer", "documentationer"] as AgentId[],
-    },
-    {
-      id: "cdo",
-      role: "cdo",
-      label: "harness-cdo",
-      sublabel: "Design · Branding",
-      status: "idle",
-      activity: null,
-      agentIds: [],
-    },
-    {
-      id: "cto",
-      role: "cto",
-      label: "harness-cto",
-      sublabel: "Conductor · Generators",
-      status: getStatus([
-        "cto",
-        "conductor",
-        "generator-backend",
-        "generator-frontend",
-        "generator-designer",
-        "generator-devops",
-      ] as AgentId[]),
-      activity: currentMission?.cto ? "Architecture plan active" : null,
-      agentIds: [
-        "cto",
-        "conductor",
-        "generator-backend",
-        "generator-frontend",
-        "generator-designer",
-        "generator-devops",
-      ] as AgentId[],
-    },
-    {
-      id: "cqo",
-      role: "cqo",
-      label: "harness-cqo",
-      sublabel: "Evaluators",
-      status: getStatus([
-        "cqo",
-        "evaluator-functional",
-        "evaluator-visual",
-        "evaluator-code-quality",
-        "evaluator-architecture",
-        "evaluator-security",
-      ] as AgentId[]),
-      activity: currentMission?.cqo?.includes("ACCEPTED")
-        ? "ACCEPTED"
-        : currentMission?.cqo
-        ? "Report available"
-        : null,
-      agentIds: [
-        "cqo",
-        "evaluator-functional",
-        "evaluator-visual",
-        "evaluator-code-quality",
-        "evaluator-architecture",
-        "evaluator-security",
-      ] as AgentId[],
-    },
-    {
-      id: "ops",
-      role: "ops",
-      label: "harness-ops",
-      sublabel: "Service Monitor",
-      status: getStatus(["service-ops"] as AgentId[]),
-      activity: null,
-      agentIds: ["service-ops"] as AgentId[],
-    },
-  ];
-
-  // Only hired HR-Resource workers are positioned in the org chart. Legacy
-  // report-only workers remain visible in mission documents, but not as seats.
-  const workers = (currentMission?.workers ?? []).filter((w) => w.hired);
-
-  const setBoundedZoom = useCallback((next: number) => {
-    setZoom(Math.min(1.35, Math.max(0.62, Number(next.toFixed(2)))));
-  }, []);
-
-  const handleWheel = useCallback(
-    (event: React.WheelEvent<HTMLDivElement>) => {
-      if (!event.ctrlKey && !event.metaKey) return;
-      event.preventDefault();
-      setBoundedZoom(zoom + (event.deltaY > 0 ? -0.06 : 0.06));
-    },
-    [setBoundedZoom, zoom],
-  );
-
-  const handlePointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
-    if (event.button !== 0 || (event.target as HTMLElement).closest("button")) return;
-    const node = scrollRef.current;
-    if (!node) return;
-    dragRef.current = {
-      x: event.clientX,
-      y: event.clientY,
-      left: node.scrollLeft,
-      top: node.scrollTop,
-    };
-    node.setPointerCapture(event.pointerId);
-  }, []);
-
-  const handlePointerMove = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
-    const start = dragRef.current;
-    const node = scrollRef.current;
-    if (!start || !node) return;
-    node.scrollLeft = start.left - (event.clientX - start.x);
-    node.scrollTop = start.top - (event.clientY - start.y);
-  }, []);
-
-  const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
-    scrollRef.current?.releasePointerCapture(event.pointerId);
-    dragRef.current = null;
-  }, []);
-
-  const canvas = { width: 1280, height: 500 };
-  const ownerPos = { x: 70, y: 196 };
-  const ceoPos = { x: 320, y: 196 };
-  const cxxX = 610;
-  const workerX = 890;
-
-  const layout = useMemo(() => {
-    const startY = 50;
-    const rowGap = 86;
-
-    return cxxNodes.map((node, index) => {
-      const nodeWorkers = workers.filter((w) => w.owner === node.role);
-      const y = startY + index * rowGap;
-      const workerHeight = Math.max(58, nodeWorkers.length * 54 + Math.max(0, nodeWorkers.length - 1) * 6);
-      return { node, x: cxxX, y, workerX, workerY: y - workerHeight / 2 + 30, nodeWorkers };
-    });
-  }, [cxxNodes, workers]);
-
-  return (
-    <div className="select-none">
-      <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2 backdrop-blur">
-        <div className="min-w-0">
-          {currentMission && (
-            <div className="truncate font-mono text-[10px] text-cyan-300/70">
-              current mission · {currentMission.missionId}
-            </div>
-          )}
-        </div>
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => setBoundedZoom(zoom - 0.08)}
-            className="h-7 w-7 rounded-md border border-white/15 bg-black/35 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
-            title="Zoom out"
-          >
-            -
-          </button>
-          <button
-            type="button"
-            onClick={() => setBoundedZoom(defaultZoom)}
-            className="h-7 min-w-12 rounded-md border border-white/15 bg-black/35 px-2 font-mono text-[10px] text-gray-300 hover:border-cyan-300/60"
-            title="Reset zoom"
-          >
-            {Math.round(zoom * 100)}%
-          </button>
-          <button
-            type="button"
-            onClick={() => setBoundedZoom(zoom + 0.08)}
-            className="h-7 w-7 rounded-md border border-white/15 bg-black/35 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
-            title="Zoom in"
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      <div
-        ref={scrollRef}
-        onWheel={handleWheel}
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={endDrag}
-        onPointerCancel={endDrag}
-        className="scrollbar-hidden isometric-stage h-[390px] cursor-grab overflow-auto active:cursor-grabbing"
-      >
-        <div
-          className="relative"
-          style={{
-            width: canvas.width * zoom,
-            height: canvas.height * zoom,
-          }}
-        >
-          <div
-            className="absolute left-0 top-0 origin-top-left"
-            style={{
-              width: canvas.width,
-              height: canvas.height,
-              transform: `scale(${zoom})`,
-            }}
-          >
-            <svg className="pointer-events-none absolute inset-0" width={canvas.width} height={canvas.height}>
-              <path
-                d={`M ${ownerPos.x + 235} ${ownerPos.y + 56} H ${ceoPos.x}`}
-                stroke="#374151"
-                strokeWidth="1.5"
-                fill="none"
-              />
-              <path
-                d={`M ${ceoPos.x + 235} ${ceoPos.y + 56} H ${cxxX - 54}`}
-                stroke="#374151"
-                strokeWidth="1.5"
-                fill="none"
-              />
-              <path
-                d={`M ${cxxX - 54} ${layout[0]?.y ?? 80} V ${layout[layout.length - 1]?.y ?? 420}`}
-                stroke="#374151"
-                strokeWidth="1.5"
-                fill="none"
-              />
-              {layout.map(({ node, x, y, nodeWorkers }) => (
-                <g key={node.id}>
-                  <path
-                    d={`M ${x - 54} ${y} H ${x - 10}`}
-                    stroke="#374151"
-                    strokeDasharray="4 5"
-                    strokeWidth="1.5"
-                    fill="none"
-                  />
-                  {nodeWorkers.length > 0 && (
-                    <path
-                      d={`M ${x + 166} ${y} H ${workerX - 16}`}
-                      stroke="#374151"
-                      strokeWidth="1.5"
-                      fill="none"
-                    />
-                  )}
-                </g>
-              ))}
-            </svg>
-
-            <div className="absolute" style={{ left: ownerPos.x, top: ownerPos.y }}>
-              <OrgCard node={ownerNode} size="lg" active={activeNodeId === "owner"} onClick={onNodeClick} />
-            </div>
-
-            <div className="absolute" style={{ left: ceoPos.x, top: ceoPos.y }}>
-              <OrgCard
-                node={ceoNode}
-                size="lg"
-                active={activeNodeId === "ceo"}
-                onClick={onNodeClick}
-              />
-            </div>
-
-            {layout.map(({ node, x, y, workerX, workerY, nodeWorkers }) => {
-              const hasActiveWorker = nodeWorkers.some((w) => w.active);
-              const displayNode = hasActiveWorker
-                ? { ...node, status: "typing" as const, activity: "Worker active" }
-                : node;
-
-              return (
-                <div
-                  key={node.id}
-                  className="absolute"
-                  style={{ left: x, top: y - 38 }}
-                >
-                  <OrgCard
-                    node={displayNode}
-                    size="md"
-                    active={activeNodeId === node.id}
-                    onClick={onNodeClick}
-                  />
-                  {nodeWorkers.length > 0 && (
-                  <div
-                    className="absolute flex w-[170px] flex-col gap-1.5"
-                    style={{ left: workerX - x, top: workerY - y }}
-                  >
-                    {nodeWorkers.map((w) => {
-                      const workerNodeId = `worker-${node.role}-${w.name}`;
-                      const workerActive = activeNodeId === workerNodeId || w.active;
-                      return (
-                      <button
-                        key={`${node.role}-${w.name}`}
-                        type="button"
-                        onClick={() =>
-                          onNodeClick({
-                            id: workerNodeId,
-                            role: node.role,
-                            label: w.displayName,
-                            sublabel: w.active ? `running · ${w.name}` : `${w.status} · ${w.name}`,
-                            status: w.active ? "typing" : w.status === "COMPLETE" ? "idle" : "queued",
-                            activity: w.sourcePath ?? null,
-                            agentIds: [],
-                          })
-                        }
-                        className={`brutal-tile relative rounded-md px-2 py-1.5 text-left min-w-[130px] max-w-[160px] transition-all hover:border-white/25 ${
-                          workerActive
-                            ? "border-cyan-300/70 bg-cyan-400/10 shadow-[0_0_18px_rgba(34,211,238,0.18)]"
-                            : "border-gray-700/40 bg-gray-800/30"
-                        } ${activeNodeId === workerNodeId ? "ring-1 ring-cyan-300" : ""}`}
-                      >
-                        {w.active && (
-                          <span className="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-cyan-300 animate-pulse" />
-                        )}
-                        <div className={`font-mono text-[9px] ${w.active ? "text-cyan-300/80" : "text-gray-500"}`}>
-                          hired worker
-                        </div>
-                        <div className="text-[11px] font-medium text-gray-200 truncate pr-3">
-                          {w.displayName}
-                        </div>
-                        <div
-                          className={`text-[9px] font-mono mt-0.5 ${
-                            w.active
-                              ? "text-cyan-300"
-                              : w.status === "COMPLETE"
-                              ? "text-emerald-400"
-                              : "text-amber-400"
-                        }`}
-                        >
-                          {w.active ? "RUNNING" : w.status}
-                        </div>
-                      </button>
-                      );
-                    })}
-                  </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/apps/harness-dashboard/components/drawer/AgentLogTab.tsx

@@ -1,56 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from "react";
-
-interface AgentLogTabProps {
-  agentId: string;
-}
-
-export function AgentLogTab({ agentId }: AgentLogTabProps) {
-  const [lines, setLines] = useState<string[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLines(null);
-    setError(null);
-    fetch(`/api/log?agent=${encodeURIComponent(agentId)}&limit=50`)
-      .then((r) => r.json())
-      .then((d) => {
-        if (cancelled) return;
-        setLines(d.lines ?? []);
-      })
-      .catch((e) => {
-        if (cancelled) return;
-        setError(String(e));
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [agentId]);
-
-  useEffect(() => {
-    if (lines && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [lines]);
-
-  if (error) {
-    return <div className="text-aura-alert">Error loading log: {error}</div>;
-  }
-  if (lines === null) {
-    return <div className="text-gray-500">Loading…</div>;
-  }
-  if (lines.length === 0) {
-    return <div className="text-gray-500">No log lines for {agentId}.</div>;
-  }
-  return (
-    <div ref={scrollRef} className="space-y-1 max-h-full">
-      {lines.map((line, i) => (
-        <div key={i} className="whitespace-pre-wrap break-words text-[11px] leading-relaxed">
-          {line}
-        </div>
-      ))}
-    </div>
-  );
-}

package/apps/harness-dashboard/components/drawer/DesignPreviewTab.tsx

@@ -1,160 +0,0 @@
-"use client";
-import type { MissionDoc } from "@/lib/types";
-
-interface DesignPreviewTabProps {
-  mission: MissionDoc | null;
-}
-
-function escapeHtml(value: string) {
-  return value
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
-}
-
-function extractFirstBullet(markdown: string | null | undefined) {
-  if (!markdown) return null;
-  return (
-    markdown
-      .split("\n")
-      .map((line) => line.trim())
-      .find((line) => /^[-*]\s+\S/.test(line))
-      ?.replace(/^[-*]\s+/, "")
-      .slice(0, 140) ?? null
-  );
-}
-
-function buildPreviewDoc(mission: MissionDoc | null) {
-  if (mission?.cdoPreview?.trim()) {
-    return mission.cdoPreview;
-  }
-
-  const missionId = mission?.missionId ?? "No active mission";
-  const brief =
-    extractFirstBullet(mission?.cdo) ??
-    extractFirstBullet(mission?.ceo) ??
-    "Design direction will appear here after harness-cdo writes cdo.md.";
-
-  return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-    :root {
-      color-scheme: dark;
-      --bg: #101216;
-      --panel: #171b22;
-      --line: #2d3543;
-      --text: #eef2f7;
-      --muted: #8a94a6;
-      --cyan: #22d3ee;
-      --amber: #fbbf24;
-      --rose: #fb7185;
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background: radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .12), transparent 26rem), var(--bg);
-      color: var(--text);
-    }
-    .shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
-    header {
-      display: flex; align-items: center; justify-content: space-between; gap: 16px;
-      padding: 18px 22px; border-bottom: 1px solid var(--line); background: rgba(10, 12, 16, .72);
-    }
-    .brand { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
-    .mission { max-width: 54ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
-    main { display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
-    aside { border-right: 1px solid var(--line); padding: 18px; background: rgba(255,255,255,.02); }
-    .nav { display: grid; gap: 8px; }
-    .nav div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }
-    .nav div:first-child { color: var(--text); border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.08); }
-    section { padding: 22px; min-width: 0; }
-    .hero {
-      border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel);
-      display: grid; grid-template-columns: minmax(260px, 1fr) 280px;
-    }
-    .hero-copy { padding: 28px; }
-    h1 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: 0; }
-    p { color: var(--muted); line-height: 1.55; }
-    .actions { display: flex; gap: 10px; margin-top: 22px; }
-    button { border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 700; }
-    .primary { background: var(--cyan); color: #061014; }
-    .secondary { background: #242a35; color: var(--text); }
-    .visual { padding: 20px; background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(251,191,36,.12)); display: grid; align-content: center; gap: 12px; }
-    .card { border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 14px; background: rgba(16,18,22,.72); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
-    .metric { font-size: 26px; font-weight: 800; }
-    .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
-    .tile { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: rgba(255,255,255,.03); min-height: 112px; }
-    .tile b { display: block; margin-bottom: 8px; }
-    @media (max-width: 760px) {
-      main, .hero { grid-template-columns: 1fr; }
-      aside { display: none; }
-      h1 { font-size: 28px; }
-      .grid { grid-template-columns: 1fr; }
-    }
-  </style>
-</head>
-<body>
-  <div class="shell">
-    <header>
-      <div class="brand">CDO Visual Sample</div>
-      <div class="mission">${escapeHtml(missionId)}</div>
-    </header>
-    <main>
-      <aside>
-        <div class="nav">
-          <div>Overview</div>
-          <div>Interaction</div>
-          <div>Accessibility</div>
-          <div>Review</div>
-        </div>
-      </aside>
-      <section>
-        <div class="hero">
-          <div class="hero-copy">
-            <h1>${escapeHtml(brief)}</h1>
-            <p>Structured sample generated from the active CDO/CEO mission context. Replace this with a richer cdo.md mockup artifact when available.</p>
-            <div class="actions">
-              <button class="primary">Primary action</button>
-              <button class="secondary">Secondary</button>
-            </div>
-          </div>
-          <div class="visual">
-            <div class="card"><div class="metric">92%</div><p>Readiness score</p></div>
-            <div class="card"><b>State</b><p>Focused, scannable, worker-backed.</p></div>
-          </div>
-        </div>
-        <div class="grid">
-          <div class="tile"><b>Layout</b><p>Quiet hierarchy, constrained content, no nested cards.</p></div>
-          <div class="tile"><b>Flow</b><p>Primary workflow remains visible without explanation copy.</p></div>
-          <div class="tile"><b>Quality</b><p>Designed for CDO review before CQO evidence collection.</p></div>
-        </div>
-      </section>
-    </main>
-  </div>
-</body>
-</html>`;
-}
-
-export function DesignPreviewTab({ mission }: DesignPreviewTabProps) {
-  const srcDoc = buildPreviewDoc(mission);
-
-  return (
-    <div className="flex h-full min-h-[620px] flex-col gap-3">
-      <div className="rounded border border-purple-400/30 bg-purple-500/10 px-3 py-2 text-[11px] text-purple-200">
-        harness-cdo visual preview
-      </div>
-      <iframe
-        title="CDO visual sample"
-        sandbox=""
-        srcDoc={srcDoc}
-        className="min-h-0 flex-1 rounded-md border border-gray-700 bg-[#101216]"
-      />
-    </div>
-  );
-}