@walwal-harness/cli 7.1.41 → 7.1.42

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

@@ -199,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)
@@ -229,12 +246,10 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     title: string;
     content: string;
   } | null>(null);
-  const [selectedHarnessPath, setSelectedHarnessPath] = useState<string | null>(null);
 
   // Selecting a mission or lane returns the viewer to mission-context mode.
   useEffect(() => {
     setCustomDoc(null);
-    setSelectedHarnessPath(null);
   }, [selectedMissionId, selectedLaneId]);
 
   void lang;
@@ -245,32 +260,19 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     (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 highlightedPaths = useMemo(
-    () => buildHighlightedPaths(selectedMission, selectedLane, snapshot.todos),
-    [selectedMission, selectedLane, snapshot.todos]
-  );
 
   const handleSelectWorker = (mission: MissionDoc, worker: WorkerDocEntry) => {
     setSelectedMissionId(mission.missionId);
     setSelectedLaneId(`${worker.owner}:${worker.name}`);
   };
 
-  const handleSelectHarnessFile = (entry: HarnessFileEntry) => {
-    setSelectedHarnessPath(entry.path);
-    setCustomDoc({
-      source: "Harness file",
-      title: entry.path,
-      content: [
-        `# ${entry.path}`,
-        "",
-        `- kind: ${entry.kind}`,
-        `- category: ${entry.category}`,
-        `- updated: ${entry.updatedAt ?? "(unknown)"}`,
-        `- size: ${entry.size === null ? "(directory)" : `${entry.size} bytes`}`,
-        "",
-        "Select a mission, CXX lane, or worker report to inspect document contents.",
-      ].join("\n"),
-    });
+  // 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 (
@@ -295,23 +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: Owner situational awareness */}
+          {/* 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}
             />
-            <StepProgressPanel
-              mission={selectedMission}
-              runtimeAgent={snapshot.runtime.currentAgent}
-              todos={snapshot.todos}
+            <ActiveNowPanel
+              lanes={lanes}
+              snapshot={snapshot}
+              selectedLaneId={selectedLaneId}
+              onSelectLane={setSelectedLaneId}
             />
-            <HarnessFileMapPanel
-              files={snapshot.files}
-              highlightedPaths={highlightedPaths}
-              selectedPath={selectedHarnessPath}
-              onSelect={handleSelectHarnessFile}
+            <KnowledgeBasePanel
+              gotchas={snapshot.gotchas}
+              conventions={snapshot.conventions}
+              baselineTs={selectedGoal?.ts ?? null}
+              onSelect={handleSelectKnowledge}
             />
             <RecentReportPanel
               missions={snapshot.missions}
@@ -1012,6 +1018,113 @@ function RuntimeMetric({ label, value }: { label: string; value: string }) {
   );
 }
 
+// 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,
@@ -2036,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
@@ -2330,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";

package/apps/harness-dashboard/components/brick/BrickDashboard.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+/* =============================================================
+   walwal-harness · BRICK OFFICE — App shell
+   Ported from design_handoff_harness_dashboard/Harness Dashboard.html
+   App() (lines ~395-437) + the view switch.
+
+   The mockup drove its state from a `useHarness(motion)` simulation;
+   here we drive it from the REAL SSE feed (useHarnessStream) mapped
+   through toContractState(snapshot, connected, nowMs). The shell ticks
+   a `nowMs` clock ~1/s so "ago"/heartbeat/stale read live.
+
+   The mockup set data-tone / data-density on <body>; in the Next app the
+   shell is a component, so those attributes (and the .brick scope class)
+   live on the shell root <div>.
+
+   brick.css is imported at app/layout level (see app/layout.tsx), matching
+   how Scene's CSS is loaded via globals.css.
+   ============================================================= */
+
+import React, { useEffect, useState } from "react";
+
+import type { HarnessSnapshot } from "../../lib/types";
+import { useHarnessStream } from "../../hooks/useHarnessStream";
+import { toContractState } from "../../lib/brick/adapter";
+import type { AgentRole, DocTarget } from "../../lib/brick/contract";
+import type { MetricsSample } from "../../lib/metrics/sampler";
+
+import { Header, Sidebar, type BrickView } from "./ui";
+import { GridView } from "./views-grid";
+import { GraphView } from "./views-graph";
+import { TimelineView } from "./views-timeline";
+import { DocViewer } from "./reports";
+import { BrickTweaks, useTweaks } from "./tweaks";
+
+export interface BrickDashboardProps {
+  /** Server-rendered initial snapshot, hydrated then kept fresh over SSE. */
+  initialSnapshot: HarnessSnapshot;
+}
+
+export function BrickDashboard({
+  initialSnapshot,
+}: BrickDashboardProps): React.JSX.Element {
+  const { snapshot, connectionState } = useHarnessStream(initialSnapshot);
+
+  // tweaks (agent layout / density / live motion / surface) — persisted.
+  const [t, setTweak] = useTweaks();
+
+  // top-level view + chrome state (mirrors the mockup App() useState block).
+  const [view, setView] = useState<BrickView>("grid");
+  const [collapsed, setCollapsed] = useState(false);
+  const [sel, setSel] = useState<AgentRole>("cto");
+  const [doc, setDoc] = useState<DocTarget | null>(null);
+
+  // ~1/s clock so "ago"/heartbeat/stale derive against a live `now`.
+  const [nowMs, setNowMs] = useState<number>(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  // REAL telemetry poll (read-only): /api/metrics every ~5s. On any failure we
+  // keep the last good sample (or null), and the honest "—" placeholders stand.
+  const [metrics, setMetrics] = useState<MetricsSample | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    const poll = async (): Promise<void> => {
+      try {
+        const res = await fetch("/api/metrics", { cache: "no-store" });
+        if (!res.ok) return;
+        const sample = (await res.json()) as MetricsSample;
+        if (!cancelled && sample && typeof sample === "object") {
+          setMetrics(sample);
+        }
+      } catch {
+        /* network/parse error — keep last sample; never fabricate */
+      }
+    };
+    void poll();
+    const id = window.setInterval(() => void poll(), 5000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, []);
+
+  // build the single Contract state object every view renders from.
+  const connected = connectionState === "open";
+  const s = toContractState(snapshot, connected, nowMs);
+
+  // Override the adapter's honest nulls with REAL sampled telemetry where it
+  // exists. Anything still null stays null -> the views render "—".
+  if (metrics) {
+    s.metrics.tokensPerMin = metrics.tokensPerMin;
+    s.metrics.costToday = metrics.costToday;
+    s.metrics.cpu = metrics.cpu;
+    s.metrics.contextPct = metrics.contextPct;
+    s.metrics.costEstimated = metrics.costEstimated;
+    s.mtrend = metrics.mtrend ?? [];
+    s.ctrend = metrics.ctrend ?? [];
+  }
+
+  const openDoc = (target: DocTarget): void => setDoc(target);
+  const closeDoc = (): void => setDoc(null);
+
+  return (
+    <div className="brick" data-tone={t.surface} data-density={t.density}>
+      <div className="app">
+        <Header metrics={s.metrics} view={view} setView={setView} alerts={s.alerts} />
+        <div className="app-body">
+          <Sidebar
+            collapsed={collapsed}
+            onToggle={() => setCollapsed((c) => !c)}
+            missions={snapshot.missions}
+            ownerHistory={snapshot.ownerHistory}
+          />
+          <div className="app-main">
+            {view === "grid" && (
+              <div className="viewscroll">
+                <GridView s={s} layout={t.agentLayout} openDoc={openDoc} />
+              </div>
+            )}
+            {view === "graph" && (
+              <div className="viewscroll viewscroll-graph">
+                <GraphView s={s} sel={sel} setSel={setSel} openDoc={openDoc} />
+              </div>
+            )}
+            {view === "timeline" && (
+              <div className="viewscroll">
+                <TimelineView s={s} openDoc={openDoc} />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DocViewer
+          target={doc}
+          state={s}
+          onClose={closeDoc}
+          onRetarget={openDoc}
+        />
+
+        <BrickTweaks values={t} setTweak={setTweak} />
+      </div>
+    </div>
+  );
+}
+
+export default BrickDashboard;

package/apps/harness-dashboard/components/brick/reports.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+/* =============================================================
+   walwal-harness · BRICK OFFICE — markdown renderer + DocViewer
+   Ported from design_handoff_harness_dashboard/harness/reports.jsx.
+
+   The mockup hard-coded its report bodies in a REPORTS table; here
+   buildReport returns REAL markdown supplied by the adapter
+   (agent.report / worker.report), with leading YAML frontmatter
+   stripped before rendering. Everything else (classNames, CSS,
+   markdown grammar, DocViewer layout) is preserved verbatim.
+
+   Exports: MD, DocViewer, buildReport
+   ============================================================= */
+
+import React, { useEffect, type CSSProperties, type ReactNode } from "react";
+import {
+  fmt,
+  statusColor,
+  type ContractState,
+  type ContractAgent,
+  type ContractWorker,
+  type DocTarget,
+} from "../../lib/brick/contract";
+import { stripFrontmatter } from "../../lib/brick/adapter";
+import { StatusDot } from "./ui";
+
+/* ---- tiny markdown renderer ------------------------------------------- */
+
+/** Inline pass: splits on `code` and **bold**, returns React children. */
+function inline(text: string, key: string | number): ReactNode[] {
+  const out: ReactNode[] = [];
+  let rest = text;
+  let i = 0;
+  const re = /(`[^`]+`|\*\*[^*]+\*\*)/;
+  while (rest.length) {
+    const m = rest.match(re);
+    if (!m || m.index === undefined) {
+      out.push(rest);
+      break;
+    }
+    if (m.index > 0) out.push(rest.slice(0, m.index));
+    const tok = m[0];
+    if (tok.startsWith("`")) {
+      out.push(<code key={key + "-" + i}>{tok.slice(1, -1)}</code>);
+    } else {
+      out.push(<b key={key + "-" + i}>{tok.slice(2, -2)}</b>);
+    }
+    rest = rest.slice(m.index + tok.length);
+    i++;
+  }
+  return out;
+}
+
+interface ListProps {
+  ordered: boolean;
+  items: string[];
+}
+
+function List({ ordered, items }: ListProps): React.JSX.Element {
+  const Tag = ordered ? "ol" : "ul";
+  return (
+    <Tag>
+      {items.map((it, i) => (
+        <li key={i}>{inline(it, "li" + i)}</li>
+      ))}
+    </Tag>
+  );
+}
+
+export interface MDProps {
+  src: string;
+}
+
+/**
+ * Block-level markdown renderer. Supports #/##/###, -/1. lists, `code`,
+ * **bold**, > blockquote and --- rules (same grammar as the mockup).
+ */
+export function MD({ src }: MDProps): React.JSX.Element {
+  const lines = src.split("\n");
+  const blocks: ReactNode[] = [];
+  // accumulate list items so consecutive bullets/numbers merge into one list
+  let listOrdered: boolean | null = null;
+  let listItems: string[] = [];
+  let listKey = 0;
+  const flush = () => {
+    if (listOrdered !== null) {
+      blocks.push(
+        <List key={"list-" + listKey} ordered={listOrdered} items={listItems} />
+      );
+      listOrdered = null;
+      listItems = [];
+    }
+  };
+
+  lines.forEach((ln, idx) => {
+    const t = ln.trimEnd();
+    if (!t.trim()) {
+      flush();
+      return;
+    }
+    if (t.startsWith("### ")) {
+      flush();
+      blocks.push(<h4 key={idx}>{inline(t.slice(4), idx)}</h4>);
+      return;
+    }
+    if (t.startsWith("## ")) {
+      flush();
+      blocks.push(<h3 key={idx}>{inline(t.slice(3), idx)}</h3>);
+      return;
+    }
+    if (t.startsWith("# ")) {
+      flush();
+      blocks.push(<h2 key={idx}>{inline(t.slice(2), idx)}</h2>);
+      return;
+    }
+    if (t === "---") {
+      flush();
+      blocks.push(<hr key={idx} />);
+      return;
+    }
+    if (t.startsWith("> ")) {
+      flush();
+      blocks.push(<blockquote key={idx}>{inline(t.slice(2), idx)}</blockquote>);
+      return;
+    }
+    const oli = t.match(/^(\d+)\.\s+(.*)/);
+    const uli = t.match(/^[-*]\s+(.*)/);
+    if (oli || uli) {
+      const ordered = !!oli;
+      if (listOrdered === null || listOrdered !== ordered) {
+        flush();
+        listOrdered = ordered;
+        listKey = idx;
+      }
+      listItems.push(oli ? oli[2] : uli![1]);
+      return;
+    }
+    flush();
+    blocks.push(<p key={idx}>{inline(t, idx)}</p>);
+  });
+  flush();
+  return <div className="md">{blocks}</div>;
+}
+
+/* ---- report assembly (REAL markdown, not the mockup table) ------------ */
+
+export interface BuiltReport {
+  /** Title shown in the meta block (agent work string / worker name). */
+  title: string;
+  /** The owning agent of this document. */
+  owner: ContractAgent;
+  /** Short document-kind label. */
+  kind: string;
+  /** Status string for the StatusDot + color. */
+  status: string;
+  /** Markdown body, frontmatter already stripped. */
+  body: string;
+}
+
+const NO_SOURCE = "_no report source — this agent has not produced a document yet._";
+const NO_WORKER_SOURCE = "_no report source — this worker has not produced a brief yet._";
+
+/**
+ * Build the document to render for a DocTarget, pulling REAL markdown from
+ * the adapter-provided report strings. Agent reports are stripped of leading
+ * YAML frontmatter at render time (per spec); worker reports are already
+ * stripped by the adapter but stripping again is harmless and keeps the
+ * render path uniform.
+ */
+export function buildReport(target: DocTarget, state: ContractState): BuiltReport {
+  const agent =
+    state.agents.find((a) => a.id === target.agent) ?? state.agents[0];
+
+  if (target.type === "worker") {
+    const worker = target.worker;
+    const body = stripFrontmatter(worker.report) || NO_WORKER_SOURCE;
+    return {
+      title: worker.name,
+      owner: agent,
+      kind: "Worker Brief",
+      status: worker.status,
+      body,
+    };
+  }
+
+  const body = stripFrontmatter(agent.report) || NO_SOURCE;
+  return {
+    title: agent.work,
+    owner: agent,
+    kind: "CXX Document",
+    status: agent.status,
+    body,
+  };
+}
+
+/* ---- DocViewer drawer -------------------------------------------------- */
+
+export interface DocViewerProps {
+  /** The document to show, or null to render nothing. */
+  target: DocTarget | null;
+  /** The live contract state. */
+  state: ContractState;
+  /** Close the drawer. */
+  onClose: () => void;
+  /** Re-point the drawer at another document (e.g. a spawned worker). */
+  onRetarget: (target: DocTarget) => void;
+}
+
+/** Right-hand document drawer with the agent meta block + markdown body. */
+export function DocViewer({
+  target,
+  state,
+  onClose,
+  onRetarget,
+}: DocViewerProps): React.JSX.Element | null {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  if (!target) return null;
+
+  const rep = buildReport(target, state);
+  const a = rep.owner;
+  const mine = state.workers.filter((w) => w.agent === a.id);
+  const hueVar = { "--hue": a.hue } as CSSProperties;
+
+  return (
+    <div className="docroot">
+      <div className="docback" onClick={onClose} />
+      <aside className="docview" style={hueVar}>
+        <div className="docview-bar">
+          <span className="docview-crumb">
+            DOCUMENT VIEWER <span className="dv-sep">·</span>
+            <span style={{ color: a.hue }}>{a.name}</span>
+            {target.type === "worker" && (
+              <>
+                <span className="dv-sep">·</span> {target.worker.name}
+              </>
+            )}
+          </span>
+          <button className="docview-x" onClick={onClose}>
+            esc ✕
+          </button>
+        </div>
+        <div className="docview-scroll">
+          <div className="docview-meta">
+            <span
+              className="glyph glyph-lg"
+              style={{ color: a.hue, borderColor: a.hue + "66" }}
+            >
+              {a.name}
+            </span>
+            <div className="dvm-id">
+              <div className="dvm-kind">{rep.kind}</div>
+              <div className="dvm-status" style={{ color: statusColor(rep.status) }}>
+                <StatusDot status={rep.status} size={7} />
+                {rep.status}
+              </div>
+            </div>
+            <div className="dvm-time">{fmt.time(new Date(state.now))}</div>
+          </div>
+
+          {target.type === "agent" && mine.length > 0 && (
+            <div className="dvm-workers">
+              <span className="dvm-wlabel">spawned workers</span>
+              {mine.map((w: ContractWorker) => (
+                <button
+                  key={w.id}
+                  className="dvm-wchip"
+                  onClick={() =>
+                    onRetarget({ type: "worker", agent: a.id, worker: w })
+                  }
+                >
+                  <StatusDot status={w.status} size={5} pulse={false} />
+                  {w.name} <em>{w.progress == null ? "—" : Math.round(w.progress) + "%"}</em>
+                </button>
+              ))}
+            </div>
+          )}
+
+          <MD src={rep.body} />
+        </div>
+      </aside>
+    </div>
+  );
+}