@walwal-harness/cli 7.1.22 → 7.1.23

package/CHANGELOG.md

@@ -31,6 +31,20 @@ docmeta:
 
 ## Unreleased
 
+## 7.1.23 — Dashboard CDO preview + radial org tree (2026-05-21)
+
+### Added
+- Dashboard CDO Preview tab: clicking `harness-cdo` opens an iframe preview from `.harness/documents/{mission}/cdo/preview.html`.
+- CDO skill and harness reference now require the preview artifact before CDO completion, with CEO/Owner handoff guidance to view it in the dashboard.
+- Dashboard mission state now reads `cdo/preview.html` alongside CXX markdown docs.
+
+### Changed
+- Dashboard Org Tree now uses a compact radial/sunflower layout with Owner/CEO centered and CXX roles arranged around them.
+- Org Tree now has independent zoom controls, ctrl/meta-wheel zoom, and drag panning inside a reduced-height scroll surface.
+
+### Fixed
+- CDO dashboard navigation now opens the visual Preview tab instead of only the markdown document flow.
+
 ### Fixed
 - v7 `/goal`, `/submission`, and `/hot-fix` now mark both `company_state.state` and `conductor.state` as `running`, so Claude Stop hook auto-chain does not stop after CEO routing or hiring-only summaries.
 - Stop hook now treats v7 CEO routing state (`current_agent=ceo`, `agent_status=running`, `owner_prompt.status=routing`) as an unfinished company loop, including migrated projects that do not yet have running conductor/company state.

package/HR-Resource/cdo/SKILL.md

@@ -18,13 +18,25 @@ Own design strategy for the mission.
 5. Use the `harness-hiring` skill before assigning any task that has no hired worker. Do not complete that task yourself.
 6. Delegate all design deliverables and review passes to hired workers in fresh sessions.
 7. Evaluate worker feedback for usefulness, discomfort, novelty, clarity, and differentiation.
-8. Select the final direction and report to CEO and CTO.
+8. Select the final direction and write a CDO preview artifact at `.harness/documents/{mission_name}/cdo/preview.html`.
+9. Report to CEO and CTO with a concise preview summary and mention that the visual sample is available in the dashboard by clicking harness-cdo.
 
 ## Rule
 
 Design output must be usable by implementation teams, not just descriptive.
 CDO must not directly produce palettes, typography, layouts, mockups, interaction specs, or design-review findings. CDO may only brief workers, compare their outputs, decide, and document the accepted direction with worker names and report paths.
 
+## Preview Artifact Gate
+
+CDO completion is invalid without `.harness/documents/{mission_name}/cdo/preview.html`.
+
+- The preview must be a self-contained HTML document suitable for dashboard iframe rendering.
+- The preview must summarize the worker-backed final direction visually, not just repeat prose from `cdo.md`.
+- It must include the core screen/state CDO expects CTO to implement, using realistic layout, density, labels, and interaction affordances.
+- It must not load remote scripts or depend on a dev server. Inline CSS is preferred.
+- If the mission has no UI surface, CDO must still write a visual decision board preview explaining the non-UI design constraints.
+- CDO's response to CEO must include a short note: "Dashboard: click harness-cdo to view the Preview."
+
 ## Owner Handoff Gate
 
 Owner is the final acceptance reviewer, not a design QA substitute. CDO must use design/review workers to validate UI/UX readiness, accessibility concerns, responsive behavior assumptions, and visual acceptance risks before handoff. Do not ask the Owner to discover whether the UI is usable or visually broken; ask only for final product or brand acceptance after worker-backed review.
@@ -34,7 +46,8 @@ Required output sections:
 1. Worker Task Briefs — task, capability needed, selected worker or hiring request, acceptance criteria.
 2. Worker Evidence Manifest — worker name, report path, status.
 3. CDO Decision — only decisions accepted from worker evidence.
-4. Next Handoff — CTO-ready design constraints, inputs, blockers.
-5. Implementation Notes — in English, with `Design Decisions`, `Deviations`, `Tradeoffs`, and `Open Questions`.
+4. Preview Artifact — path `.harness/documents/{mission_name}/cdo/preview.html`, visual summary, and dashboard viewing note.
+5. Next Handoff — CTO-ready design constraints, inputs, blockers.
+6. Implementation Notes — in English, with `Design Decisions`, `Deviations`, `Tradeoffs`, and `Open Questions`.
 
 Every CDO worker brief must require the worker to append the same English `## Implementation Notes` block to the bottom of `.harness/documents/{mission_name}/cdo/workers/{worker-name}.md`, covering risks, self-corrections, chosen direction, and unresolved questions. Use `None` for empty subsections.

package/README.md

@@ -203,6 +203,7 @@ Features:
 - **Org Tree** — live status of Owner → CEO → CXX → Workers hierarchy, with worker cards created only from hired `hr-roster.json` entries backed by `.harness/shared/HR-Resource/{worker}/SKILL.md`; running hired workers are highlighted under their owning CXX
 - **Mission Timeline** — clickable history of goal/submission/hot-fix missions showing the full dispatch chain
 - **Mission Flow tab** — per-mission flow: Owner prompt → CEO routing → CXX → owner-specific worker evidence → CQO verdict
+- **CDO Preview** — clicking `harness-cdo` opens a dashboard iframe preview from `.harness/documents/{mission}/cdo/preview.html`; CDO completion requires this visual summary artifact
 - **History tab** — mission-specific Owner request (from CEO summary + closest progress.log match)
 - **Gotchas tab** — searchable `.harness/gotchas/*.md` knowledge base, click to read full markdown
 - **Document tab** — per-CXX markdown doc viewer

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

@@ -5,6 +5,7 @@ export type DrawerTab =
   | "mission-flow"      // Mission document hierarchy (PRIMARY)
   | "history"           // Owner prompt history
   | "gotchas"           // Harness gotcha knowledge base
+  | "design-preview"    // CDO visual sample iframe
   | "mission-doc"       // Single doc markdown view
   | "logs";             // Agent log (technical)
 
@@ -23,6 +24,7 @@ const TABS: Array<{ id: DrawerTab; label: string }> = [
   { id: "mission-flow", label: "Mission Flow" },
   { id: "history", label: "History" },
   { id: "gotchas", label: "Gotchas" },
+  { id: "design-preview", label: "Preview" },
   { id: "mission-doc", label: "Document" },
   { id: "logs", label: "Agent Log" },
 ];

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

@@ -1,4 +1,5 @@
 "use client";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { AgentId, HarnessSnapshot, MinifigState, OrgNodeDef } from "@/lib/types";
 
 interface OrgTreeProps {
@@ -66,38 +67,12 @@ function OrgCard({
   );
 }
 
-function BranchConnector({ count }: { count: number }) {
-  const h = 44;
-  const stepPct = 100 / count;
-  const midY = h * 0.5;
-  const centers = Array.from({ length: count }, (_, i) => stepPct * i + stepPct / 2);
-  return (
-    <svg width="100%" height={h} className="overflow-visible pointer-events-none">
-      <line x1="50%" y1="0" x2="50%" y2={midY} stroke="#374151" strokeWidth="1.5" />
-      <line
-        x1={`${centers[0]}%`}
-        y1={midY}
-        x2={`${centers[centers.length - 1]}%`}
-        y2={midY}
-        stroke="#374151"
-        strokeWidth="1.5"
-      />
-      {centers.map((x, i) => (
-        <line
-          key={i}
-          x1={`${x}%`}
-          y1={midY}
-          x2={`${x}%`}
-          y2={h}
-          stroke="#374151"
-          strokeWidth="1.5"
-        />
-      ))}
-    </svg>
-  );
-}
-
 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 => {
@@ -229,68 +204,205 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
   // report-only workers remain visible in mission documents, but not as seats.
   const workers = (currentMission?.workers ?? []).filter((w) => w.hired);
 
-  return (
-    <div className="w-full px-4 py-6 select-none">
-      {/* Mission label */}
-      {currentMission && (
-        <div className="mb-4 text-center">
-          <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-cyan-300/60">
-            current mission
-          </span>
-          <div className="mt-0.5 font-mono text-xs text-gray-400">{currentMission.missionId}</div>
-        </div>
-      )}
+  const setBoundedZoom = useCallback((next: number) => {
+    setZoom(Math.min(1.35, Math.max(0.62, Number(next.toFixed(2)))));
+  }, []);
 
-      {/* Row 1: Owner */}
-      <div className="flex justify-center">
-        <OrgCard
-          node={ownerNode}
-          size="lg"
-          active={activeNodeId === "owner"}
-          onClick={onNodeClick}
-        />
-      </div>
+  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],
+  );
 
-      {/* Connector: Owner → CEO */}
-      <div className="flex justify-center">
-        <div className="w-px h-6 bg-gray-700" />
-      </div>
+  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);
+  }, []);
 
-      {/* Row 2: CEO */}
-      <div className="flex justify-center">
-        <OrgCard
-          node={ceoNode}
-          size="lg"
-          active={activeNodeId === "ceo"}
-          onClick={onNodeClick}
-        />
-      </div>
+  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: 1160, height: 600 };
+  const center = { x: 500, y: 240 };
 
-      {/* Branch connector: CEO → CXX */}
-      <BranchConnector count={cxxNodes.length} />
+  const layout = useMemo(() => {
+    const cxxAngles = [-150, -78, 0, 78, 150];
+    const cxxRadius = 280;
+    const workerRadius = 150;
 
-      {/* Row 3: CXX nodes with workers below */}
-      <div className="flex gap-3 justify-center">
-        {cxxNodes.map((node) => {
-          const nodeWorkers = workers.filter((w) => w.owner === node.role);
-          const hasActiveWorker = nodeWorkers.some((w) => w.active);
-          const displayNode = hasActiveWorker
-            ? { ...node, status: "typing" as const, activity: "Worker active" }
-            : node;
+    return cxxNodes.map((node, index) => {
+      const angle = (cxxAngles[index] * Math.PI) / 180;
+      const x = center.x + Math.cos(angle) * cxxRadius;
+      const y = center.y + Math.sin(angle) * cxxRadius * 0.58;
+      const outwardX = Math.cos(angle) * workerRadius;
+      const outwardY = Math.sin(angle) * workerRadius * 0.48;
+      return {
+        node,
+        x,
+        y,
+        workerX: x + outwardX,
+        workerY: y + outwardY,
+      };
+    });
+  }, [cxxNodes]);
 
-          return (
-            <div key={node.id} className="flex flex-col items-center gap-2">
+  return (
+    <div className="select-none">
+      <div className="flex items-center justify-between border-b border-white/10 bg-black/20 px-3 py-2">
+        <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 border border-gray-700 bg-gray-900/80 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 border border-gray-700 bg-gray-900/80 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 border border-gray-700 bg-gray-900/80 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 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}
+            >
+              <line x1={center.x} y1={center.y - 26} x2={center.x} y2={center.y + 26} stroke="#374151" strokeWidth="1.5" />
+              {layout.map(({ node, x, y }) => (
+                <line
+                  key={node.id}
+                  x1={center.x}
+                  y1={center.y}
+                  x2={x}
+                  y2={y}
+                  stroke="#374151"
+                  strokeDasharray="4 5"
+                  strokeWidth="1.5"
+                />
+              ))}
+              {layout.map(({ node, x, y, workerX, workerY }) => {
+                const nodeWorkers = workers.filter((w) => w.owner === node.role);
+                if (nodeWorkers.length === 0) return null;
+                return (
+                  <line
+                    key={`${node.id}-workers`}
+                    x1={x}
+                    y1={y}
+                    x2={workerX}
+                    y2={workerY}
+                    stroke="#374151"
+                    strokeWidth="1.5"
+                  />
+                );
+              })}
+            </svg>
+
+            <div className="absolute left-[390px] top-[170px] grid w-[220px] gap-2">
               <OrgCard
-                node={displayNode}
-                size="md"
-                active={activeNodeId === node.id}
+                node={ownerNode}
+                size="lg"
+                active={activeNodeId === "owner"}
                 onClick={onNodeClick}
               />
-              {/* Worker mini-cards under CTO */}
-              {nodeWorkers.length > 0 && (
-                <>
-                  <div className="w-px h-3 bg-gray-700/60" />
-                  <div className="flex flex-col gap-1.5 w-full">
+              <OrgCard
+                node={ceoNode}
+                size="lg"
+                active={activeNodeId === "ceo"}
+                onClick={onNodeClick}
+              />
+            </div>
+
+            {layout.map(({ node, x, y, workerX, workerY }) => {
+              const nodeWorkers = workers.filter((w) => w.owner === node.role);
+              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 - 82, 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;
@@ -339,11 +451,12 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
                       );
                     })}
                   </div>
-                </>
-              )}
-            </div>
-          );
-        })}
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );

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

@@ -17,6 +17,7 @@ import { OwnerHistoryTab } from "./drawer/OwnerHistoryTab";
 import { MissionDocTab } from "./drawer/MissionDocTab";
 import { MissionFlowTab } from "./drawer/MissionFlowTab";
 import { GotchasTab } from "./drawer/GotchasTab";
+import { DesignPreviewTab } from "./drawer/DesignPreviewTab";
 import { MissionTimeline } from "./MissionTimeline";
 import { OrgTree } from "./OrgTree";
 
@@ -48,6 +49,8 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     }
     if (node.id === "owner") {
       setDrawerTab("history");
+    } else if (node.id === "cdo") {
+      setDrawerTab("design-preview");
     } else if (node.id.startsWith("worker-")) {
       setDrawerTab("mission-doc");
     } else {
@@ -167,6 +170,9 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
             {drawerTab === "gotchas" && (
               <GotchasTab gotchas={snapshot.gotchas ?? []} />
             )}
+            {drawerTab === "design-preview" && (
+              <DesignPreviewTab mission={selectedMission ?? snapshot.missions?.[0] ?? null} />
+            )}
             {drawerTab === "mission-doc" && selectedNode && (
               <MissionDocTab
                 missions={snapshot.missions ?? []}

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

@@ -0,0 +1,160 @@
+"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>
+  );
+}

package/apps/harness-dashboard/lib/harness-state.ts

@@ -1229,6 +1229,7 @@ function readMissions(rootDir: string, progress: RawProgress | null = null, limi
         cqo: readMd("cqo.md"),
         coo: readMd("coo.md"),
         cdo: readMd("cdo.md"),
+        cdoPreview: readMd("cdo/preview.html"),
         ops: readMd("ops.md"),
         workers,
         cxxPresent: [...cxxPresent],

package/apps/harness-dashboard/lib/types.ts

@@ -318,6 +318,7 @@ export interface MissionDoc {
   cqo: string | null;
   coo: string | null;
   cdo: string | null;
+  cdoPreview: string | null;
   ops: string | null;
   workers: WorkerDocEntry[];
   cxxPresent: string[];

package/assets/templates/HARNESS.md

@@ -89,6 +89,7 @@ Flat `.harness/documents/{mission}/workers/` reports are legacy. New worker evid
 - CEO must not dispatch, hire, or brief workers directly.
 - CXX agents must not directly execute specialist deliverables.
 - CTO worker dispatch requires `cto.md` first.
+- CDO completion requires `.harness/documents/{mission}/cdo/preview.html`; CEO/Owner can view it from the dashboard by clicking `harness-cdo`.
 - CQO verdicts require evaluator/tester worker evidence.
 - Owner is final acceptance only. Do not report "done, please check" until worker-backed verification proves the goal is complete.
 - Every `ceo.md`, `{cxx}.md`, and worker report must end with:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walwal-harness/cli",
-  "version": "7.1.22",
+  "version": "7.1.23",
   "description": "Company-style AI agent harness for Claude and Codex. Installs commands, CXX agents, skills, HR-Resource hiring pool, and project-local .harness runtime state.",
   "bin": {
     "walwal-harness": "bin/init.js"