@walwal-harness/cli 7.1.8 → 7.1.10

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

@@ -0,0 +1,520 @@
+"use client";
+import { useState } from "react";
+import type { MissionDoc, OwnerPromptEntry } from "@/lib/types";
+import { MarkdownView } from "@/lib/markdown";
+
+type DocView = "overview" | "ceo" | "cto" | "cqo" | "coo" | "cdo" | "ops" | string;
+
+interface Props {
+  mission: MissionDoc | null;
+  ownerHistory: OwnerPromptEntry[];
+}
+
+// ---------------------------------------------------------------------------
+// Section extractors
+// ---------------------------------------------------------------------------
+
+/** Extract up to maxLines non-empty lines from a ## section */
+function extractSection(content: string, heading: string, maxLines = 3): string | null {
+  const body = content.replace(/^---[\s\S]*?---\n+/, "");
+  const pattern = new RegExp(`^##\\s+${heading.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "m");
+  const match = pattern.exec(body);
+  if (!match) return null;
+  const start = match.index + match[0].length;
+  const rest = body.slice(start);
+  const lines = rest.split("\n");
+  const snippet: string[] = [];
+  for (const line of lines) {
+    if (line.startsWith("## ") || line.startsWith("# ")) break;
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("---")) snippet.push(trimmed);
+    if (snippet.length >= maxLines) break;
+  }
+  const result = snippet.join(" · ").slice(0, 240);
+  return result || null;
+}
+
+/** Try multiple heading alternatives, return first match */
+function extractSectionAny(content: string, ...headings: string[]): string | null {
+  for (const h of headings) {
+    const r = extractSection(content, h, 4);
+    if (r) return r;
+  }
+  return null;
+}
+
+/** Parse markdown table rows from "생성/수정 파일" or "구현 파일 목록" sections */
+function extractFilesTable(content: string, maxRows = 5): Array<{ file: string; action: string }> {
+  const body = content.replace(/^---[\s\S]*?---\n+/, "");
+  const lines = body.split("\n");
+  const results: Array<{ file: string; action: string }> = [];
+  let inFileTable = false;
+
+  for (const line of lines) {
+    // Detect table header with "파일" column
+    if (line.startsWith("|") && (line.includes("파일") || line.includes("File"))) {
+      inFileTable = true;
+      continue;
+    }
+    if (inFileTable) {
+      if (line.trim() === "" || (!line.startsWith("|") && !line.startsWith("|-"))) {
+        inFileTable = false;
+        continue;
+      }
+      if (line.includes("---")) continue; // divider row
+      if (!line.startsWith("|")) continue;
+      const cells = line.split("|").map((c) => c.trim()).filter(Boolean);
+      if (cells.length < 1) continue;
+      const file = cells[0].replace(/`/g, "").trim();
+      if (!file || file.toLowerCase() === "파일" || file.toLowerCase() === "file") continue;
+      // Truncate long action text
+      const raw = cells[1]?.replace(/`/g, "").trim() ?? "";
+      const action = raw.length > 60 ? raw.slice(0, 60) + "…" : raw;
+      results.push({ file, action });
+      if (results.length >= maxRows) break;
+    }
+  }
+  return results;
+}
+
+/** Extract CTO's worker instruction section */
+function extractCtoWorkerInstructions(content: string): string | null {
+  return extractSection(content, "워커 지시", 6);
+}
+
+// ---------------------------------------------------------------------------
+// Chip helpers
+// ---------------------------------------------------------------------------
+function StepChip({
+  role,
+  label,
+  onClick,
+}: {
+  role: string;
+  label: string;
+  onClick?: () => void;
+}) {
+  const colorMap: Record<string, string> = {
+    owner: "bg-amber-500/15 text-amber-300 border-amber-500/30",
+    ceo: "bg-cyan-400/15 text-cyan-300 border-cyan-400/30",
+    coo: "bg-emerald-500/15 text-emerald-300 border-emerald-500/30",
+    cdo: "bg-purple-500/15 text-purple-300 border-purple-500/30",
+    cto: "bg-blue-400/15 text-blue-300 border-blue-400/30",
+    cqo: "bg-amber-400/15 text-amber-300 border-amber-400/30",
+    ops: "bg-rose-400/15 text-rose-300 border-rose-400/30",
+    worker: "bg-gray-500/15 text-gray-300 border-gray-500/30",
+  };
+  const cls = colorMap[role] ?? "bg-gray-600/15 text-gray-400 border-gray-600/30";
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-[9px] ${cls} ${onClick ? "cursor-pointer hover:opacity-80" : ""}`}
+      onClick={onClick}
+    >
+      {label}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DocRow: one step in the flow tree
+// ---------------------------------------------------------------------------
+function DocRow({
+  step,
+  roleLabel,
+  roleKey,
+  snippet,
+  onViewDoc,
+}: {
+  step: number;
+  roleLabel: string;
+  roleKey: string;
+  snippet?: string | null;
+  onViewDoc?: () => void;
+}) {
+  return (
+    <div className="relative pl-4 border-l border-gray-700/40 ml-2 space-y-1">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5">
+          <span className="font-mono text-[9px] text-gray-600">{step}</span>
+          <StepChip role={roleKey} label={roleLabel} />
+        </div>
+        {onViewDoc && (
+          <button
+            type="button"
+            onClick={onViewDoc}
+            className="shrink-0 font-mono text-[9px] text-cyan-400/70 hover:text-cyan-300 transition-colors"
+          >
+            View Doc →
+          </button>
+        )}
+      </div>
+      {snippet && (
+        <p className="text-[10px] text-gray-500 leading-relaxed pl-5 line-clamp-3">
+          {snippet}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// WorkerCard: shows worker + file list
+// ---------------------------------------------------------------------------
+function WorkerCard({
+  worker,
+  onViewDoc,
+  active,
+}: {
+  worker: { name: string; content: string; status: string; owner?: string };
+  onViewDoc?: () => void;
+  active?: boolean;
+}) {
+  const files = extractFilesTable(worker.content, 4);
+  return (
+    <div
+      className={`relative pl-3 border-l border-gray-700/30 ml-2 space-y-1 pb-1 ${active ? "border-cyan-400/40" : ""}`}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5">
+          <span className="font-mono text-[9px] text-gray-600">├─</span>
+          <StepChip role="worker" label={worker.name} />
+          <span
+            className={`font-mono text-[9px] ${
+              worker.status === "COMPLETE" ? "text-emerald-400" : "text-amber-400"
+            }`}
+          >
+            {worker.status === "COMPLETE" ? "COMPLETE ✅" : "⏳"}
+          </span>
+        </div>
+        {onViewDoc && (
+          <button
+            type="button"
+            onClick={onViewDoc}
+            className="shrink-0 font-mono text-[9px] text-cyan-400/70 hover:text-cyan-300 transition-colors"
+          >
+            View Doc →
+          </button>
+        )}
+      </div>
+
+      {/* Changed files */}
+      {files.length > 0 && (
+        <div className="pl-5 space-y-0.5">
+          {files.map((f, i) => (
+            <div key={i} className="flex items-start gap-1.5">
+              <span className="font-mono text-[9px] text-gray-600 shrink-0 mt-0.5">▸</span>
+              <div className="min-w-0">
+                <span className="font-mono text-[9px] text-blue-300/80 break-all leading-tight">
+                  {f.file}
+                </span>
+                {f.action && (
+                  <span className="font-mono text-[9px] text-gray-600 ml-1">— {f.action}</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+export function MissionFlowTab({ mission, ownerHistory }: Props) {
+  const [docView, setDocView] = useState<DocView>("overview");
+
+  if (!mission) {
+    return (
+      <div className="text-gray-500 text-xs">
+        No mission selected. Click a mission from the timeline below.
+      </div>
+    );
+  }
+
+  // -- Doc view mode --
+  if (docView !== "overview") {
+    let content: string | null = null;
+    let docTitle = docView;
+
+    if (["ceo", "cto", "cqo", "coo", "cdo", "ops"].includes(docView)) {
+      content = mission[docView as "ceo" | "cto" | "cqo" | "coo" | "cdo" | "ops"];
+      docTitle = `harness-${docView}`;
+    } else {
+      const w = mission.workers.find((x) => x.name === docView);
+      content = w?.content ?? null;
+      docTitle = docView;
+    }
+
+    return (
+      <div className="space-y-3">
+        <button
+          type="button"
+          onClick={() => setDocView("overview")}
+          className="flex items-center gap-1.5 font-mono text-[10px] text-cyan-400/70 hover:text-cyan-300 transition-colors"
+        >
+          ← Back
+        </button>
+        <div className="font-mono text-[10px] text-gray-500">
+          {mission.missionId} · {docTitle}
+        </div>
+        {content ? (
+          <MarkdownView source={content} />
+        ) : (
+          <div className="text-gray-500 text-xs">No document available.</div>
+        )}
+      </div>
+    );
+  }
+
+  // -- Overview mode --
+
+  // Find owner prompt closest to mission date
+  let ownerPromptSnippet: string | null = null;
+  if (ownerHistory.length > 0) {
+    const missionTime = Date.parse(mission.ts);
+    let closest: OwnerPromptEntry | null = null;
+    let closestDiff = Infinity;
+    for (const entry of ownerHistory) {
+      const t = Date.parse(entry.ts);
+      if (!Number.isNaN(t)) {
+        const diff = Math.abs(t - missionTime);
+        if (diff < closestDiff) { closestDiff = diff; closest = entry; }
+      }
+    }
+    if (closest) ownerPromptSnippet = closest.content.slice(0, 140);
+  }
+
+  const typeBadge =
+    mission.type === "hotfix" ? "[🔥 hot-fix]"
+    : mission.type === "submission" ? "[+ submission]"
+    : mission.type === "goal" || mission.type === "feature" ? "[✦ goal]"
+    : "[— unknown]";
+
+  let dateStr = "—";
+  try {
+    dateStr = new Date(mission.ts).toLocaleDateString(undefined, {
+      year: "numeric", month: "short", day: "numeric",
+    });
+  } catch { /* ignore */ }
+
+  // Routing breadcrumb
+  const routeChips: string[] = ["Owner", "CEO"];
+  const cxxOrder: Array<"coo" | "cdo" | "cto" | "cqo" | "ops"> = ["coo", "cdo", "cto", "cqo", "ops"];
+  for (const r of cxxOrder) {
+    if (mission.cxxPresent.includes(r)) routeChips.push(r.toUpperCase());
+  }
+
+  // CEO snippets
+  const ceoRequestSnippet = mission.ceo
+    ? extractSectionAny(mission.ceo, "Owner 요청 요약", "Owner Request")
+    : null;
+  const ceoDecisionSnippet = mission.ceo
+    ? extractSectionAny(mission.ceo, "CEO 결정", "CXX Decisions")
+    : null;
+  const ceoSnippet = [ceoRequestSnippet, ceoDecisionSnippet].filter(Boolean).join(" | ").slice(0, 240) || null;
+
+  // CTO snippet + worker instructions
+  const ctoSnippet = mission.cto
+    ? extractSectionAny(mission.cto, "변경 요약", "Summary")
+    : null;
+  const ctoWorkerInstructions = mission.cto
+    ? extractCtoWorkerInstructions(mission.cto)
+    : null;
+
+  // CQO verdict
+  let cqoVerdict: string | null = null;
+  if (mission.cqo) {
+    if (mission.cqo.includes("ACCEPTED")) cqoVerdict = "검증 결과: ACCEPTED ✅";
+    else if (mission.cqo.includes("REJECTED")) cqoVerdict = "검증 결과: REJECTED ❌";
+    else cqoVerdict = extractSectionAny(mission.cqo, "검증 결과", "Verdict") ?? null;
+  }
+
+  let stepNum = 1;
+
+  return (
+    <div className="space-y-3">
+      {/* Mission header */}
+      <div>
+        <div className="flex items-center gap-2 flex-wrap mb-1">
+          <span
+            className={`font-mono text-[9px] rounded border px-1.5 py-0.5 ${
+              mission.type === "hotfix"
+                ? "bg-rose-500/15 text-rose-300 border-rose-500/30"
+                : mission.type === "submission"
+                ? "bg-sky-500/15 text-sky-300 border-sky-500/30"
+                : "bg-emerald-500/15 text-emerald-300 border-emerald-500/30"
+            }`}
+          >
+            {typeBadge}
+          </span>
+          <span className="font-mono text-[10px] text-gray-300 truncate flex-1 min-w-0">
+            {mission.missionId}
+          </span>
+          <span className="font-mono text-[9px] text-gray-500 shrink-0">{dateStr}</span>
+        </div>
+        {/* Routing breadcrumb */}
+        <div className="flex flex-wrap items-center gap-1 mt-1">
+          {routeChips.map((label, idx) => {
+            const roleKey = label === "Owner" ? "owner" : label === "CEO" ? "ceo" : label.toLowerCase();
+            return (
+              <span key={idx} className="flex items-center gap-1">
+                {idx > 0 && <span className="text-gray-600 text-[9px]">→</span>}
+                <StepChip role={roleKey} label={label} />
+              </span>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Flow tree */}
+      <div className="space-y-2">
+        {/* OWNER */}
+        <DocRow step={stepNum++} roleLabel="OWNER" roleKey="owner" />
+        {ownerPromptSnippet && (
+          <p className="pl-7 text-[10px] text-gray-500 italic leading-relaxed line-clamp-2">
+            {ownerPromptSnippet}{ownerPromptSnippet.length >= 140 ? "…" : ""}
+          </p>
+        )}
+
+        {/* CEO */}
+        <div className="pl-3 space-y-1">
+          <p className="font-mono text-[9px] text-gray-600 pl-2">↓ dispatched to</p>
+          <DocRow
+            step={stepNum++}
+            roleLabel="harness-ceo"
+            roleKey="ceo"
+            snippet={ceoSnippet}
+            onViewDoc={mission.ceo ? () => setDocView("ceo") : undefined}
+          />
+          {/* Legacy flat workers: protocol violation / unknown owner */}
+          {mission.workers.some((w) => w.owner === "unknown") && (
+            <div className="pl-4 space-y-2 mt-1">
+              <p className="font-mono text-[9px] text-rose-300/80 pl-1">
+                Unowned legacy workers (CEO/CXX bypass suspected):
+              </p>
+              {mission.workers.filter((w) => w.owner === "unknown").map((worker) => (
+                <WorkerCard
+                  key={worker.name}
+                  worker={worker}
+                  onViewDoc={worker.content ? () => setDocView(worker.name) : undefined}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* COO */}
+        {mission.cxxPresent.includes("coo") && (
+          <div className="pl-6 space-y-1">
+            <p className="font-mono text-[9px] text-gray-600 pl-2">↓ routed to</p>
+            <DocRow
+              step={stepNum++}
+              roleLabel="harness-coo"
+              roleKey="coo"
+              snippet={mission.coo ? extractSectionAny(mission.coo, "요약", "Summary") : null}
+              onViewDoc={mission.coo ? () => setDocView("coo") : undefined}
+            />
+          </div>
+        )}
+
+        {/* CDO */}
+        {mission.cxxPresent.includes("cdo") && (
+          <div className="pl-6 space-y-1">
+            <p className="font-mono text-[9px] text-gray-600 pl-2">↓ routed to</p>
+            <DocRow
+              step={stepNum++}
+              roleLabel="harness-cdo"
+              roleKey="cdo"
+              snippet={mission.cdo ? extractSectionAny(mission.cdo, "요약", "Summary") : null}
+              onViewDoc={mission.cdo ? () => setDocView("cdo") : undefined}
+            />
+          </div>
+        )}
+
+        {/* CTO + Workers */}
+        {mission.cxxPresent.includes("cto") && (
+          <div className="pl-6 space-y-1">
+            <p className="font-mono text-[9px] text-gray-600 pl-2">↓ routed to</p>
+            <DocRow
+              step={stepNum++}
+              roleLabel="harness-cto"
+              roleKey="cto"
+              snippet={ctoSnippet}
+              onViewDoc={mission.cto ? () => setDocView("cto") : undefined}
+            />
+
+            {/* CTO worker instructions */}
+            {ctoWorkerInstructions && (
+              <div className="pl-7 mt-1">
+                <div className="rounded border border-blue-400/15 bg-blue-400/5 px-2 py-1.5">
+                  <span className="font-mono text-[9px] text-blue-300/50 uppercase tracking-wider">
+                    워커 지시
+                  </span>
+                  <p className="text-[10px] text-gray-400 leading-relaxed mt-0.5">
+                    {ctoWorkerInstructions}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Workers */}
+            {mission.workers.some((w) => w.owner === "cto") && (
+              <div className="pl-4 space-y-2 mt-1">
+                <p className="font-mono text-[9px] text-gray-500 pl-1">CTO workers:</p>
+                {mission.workers.filter((w) => w.owner === "cto").map((worker) => (
+                  <WorkerCard
+                    key={worker.name}
+                    worker={worker}
+                    onViewDoc={worker.content ? () => setDocView(worker.name) : undefined}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* OPS */}
+        {mission.cxxPresent.includes("ops") && (
+          <div className="pl-6 space-y-1">
+            <p className="font-mono text-[9px] text-gray-600 pl-2">↓ routed to</p>
+            <DocRow
+              step={stepNum++}
+              roleLabel="harness-ops"
+              roleKey="ops"
+              snippet={mission.ops ? extractSectionAny(mission.ops, "요약", "Summary") : null}
+              onViewDoc={mission.ops ? () => setDocView("ops") : undefined}
+            />
+          </div>
+        )}
+
+        {/* CQO */}
+        {mission.cxxPresent.includes("cqo") && (
+          <div className="pl-6 space-y-1">
+            <p className="font-mono text-[9px] text-gray-600 pl-2">↓ routed to</p>
+            <DocRow
+              step={stepNum++}
+              roleLabel="harness-cqo"
+              roleKey="cqo"
+              snippet={cqoVerdict}
+              onViewDoc={mission.cqo ? () => setDocView("cqo") : undefined}
+            />
+            {mission.workers.some((w) => w.owner === "cqo") && (
+              <div className="pl-4 space-y-2 mt-1">
+                <p className="font-mono text-[9px] text-gray-500 pl-1">CQO evaluators:</p>
+                {mission.workers.filter((w) => w.owner === "cqo").map((worker) => (
+                  <WorkerCard
+                    key={worker.name}
+                    worker={worker}
+                    onViewDoc={worker.content ? () => setDocView(worker.name) : undefined}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,160 @@
+"use client";
+import type { MissionDoc, OwnerPromptEntry } from "@/lib/types";
+
+interface Props {
+  ownerHistory: OwnerPromptEntry[];
+  mission?: MissionDoc | null;
+  onEntryClick?: (entry: OwnerPromptEntry) => void;
+}
+
+function extractSectionText(content: string, ...headings: string[]): string | null {
+  const body = content.replace(/^---[\s\S]*?---\n+/, "");
+  for (const heading of headings) {
+    const pattern = new RegExp(`^##\\s+${heading.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "m");
+    const match = pattern.exec(body);
+    if (!match) continue;
+    const start = match.index + match[0].length;
+    const rest = body.slice(start);
+    const lines = rest.split("\n");
+    const snippet: string[] = [];
+    for (const line of lines) {
+      if (line.startsWith("## ") || line.startsWith("# ")) break;
+      const trimmed = line.trim();
+      if (trimmed && !trimmed.startsWith("---")) snippet.push(trimmed);
+      if (snippet.length >= 6) break;
+    }
+    const result = snippet.join("\n").slice(0, 600);
+    if (result) return result;
+  }
+  return null;
+}
+
+export function OwnerHistoryTab({ ownerHistory, mission, onEntryClick }: Props) {
+  // Mission-specific view
+  if (mission) {
+    const requestText = mission.ceo
+      ? extractSectionText(mission.ceo, "Owner 요청 요약", "Owner Request")
+      : null;
+
+    // Find closest owner history entry by timestamp
+    let closestEntry: OwnerPromptEntry | null = null;
+    if (ownerHistory.length > 0) {
+      const missionTime = Date.parse(mission.ts);
+      let closestDiff = Infinity;
+      for (const entry of ownerHistory) {
+        const t = Date.parse(entry.ts);
+        if (!Number.isNaN(t)) {
+          const diff = Math.abs(t - missionTime);
+          if (diff < closestDiff) { closestDiff = diff; closestEntry = entry; }
+        }
+      }
+    }
+
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center gap-2 mb-3">
+          <span className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500">from</span>
+          <span className="rounded bg-amber-500/10 border border-amber-500/30 px-2 py-0.5 text-[10px] text-amber-300 font-mono">
+            Owner
+          </span>
+          <span className="font-mono text-[9px] text-gray-600">→</span>
+          <span className="rounded bg-cyan-400/10 border border-cyan-400/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono">
+            CEO
+          </span>
+          <span className="ml-auto font-mono text-[9px] text-gray-600 truncate max-w-[160px]">
+            {mission.missionId}
+          </span>
+        </div>
+
+        {/* CEO's summary of owner request */}
+        {requestText && (
+          <div className="rounded border border-cyan-400/20 bg-cyan-400/5 p-2.5">
+            <div className="font-mono text-[9px] uppercase tracking-[0.15em] text-cyan-400/60 mb-1.5">
+              CEO가 정리한 Owner 요청
+            </div>
+            <p className="text-[11px] leading-relaxed text-gray-300 whitespace-pre-line">
+              {requestText}
+            </p>
+          </div>
+        )}
+
+        {/* Closest matching progress.log entry */}
+        {closestEntry && (
+          <div
+            className={`rounded border border-gray-700/60 bg-black/20 p-2 ${onEntryClick ? "cursor-pointer hover:border-amber-400/30 hover:bg-amber-400/5 transition-colors" : ""}`}
+            onClick={onEntryClick ? () => onEntryClick(closestEntry!) : undefined}
+          >
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <span className="font-mono text-[9px] text-gray-500">progress.log</span>
+              <div className="flex items-center gap-1.5">
+                <span className="font-mono text-[9px] text-gray-600">{closestEntry.ts}</span>
+                <span
+                  className={`font-mono text-[9px] px-1.5 py-0.5 rounded ${
+                    closestEntry.type === "goal"
+                      ? "bg-emerald-500/15 text-emerald-300"
+                      : closestEntry.type === "submission"
+                      ? "bg-sky-500/15 text-sky-300"
+                      : closestEntry.type === "hot-fix"
+                      ? "bg-rose-500/15 text-rose-300"
+                      : "bg-gray-500/15 text-gray-400"
+                  }`}
+                >
+                  {closestEntry.type}
+                </span>
+              </div>
+            </div>
+            <p className="text-[11px] leading-relaxed text-gray-400 break-words">{closestEntry.content}</p>
+          </div>
+        )}
+
+        {!requestText && !closestEntry && (
+          <div className="text-gray-500 text-xs">No owner prompt found for this mission.</div>
+        )}
+      </div>
+    );
+  }
+
+  // All-history fallback (no mission selected)
+  if (!ownerHistory || ownerHistory.length === 0) {
+    return <div className="text-gray-500">No prompt history found in progress.log.</div>;
+  }
+  return (
+    <div className="space-y-2">
+      <div className="mb-3 flex items-center gap-2">
+        <span className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500">from</span>
+        <span className="rounded bg-amber-500/10 border border-amber-500/30 px-2 py-0.5 text-[10px] text-amber-300 font-mono">
+          Owner
+        </span>
+        <span className="font-mono text-[9px] text-gray-600">→</span>
+        <span className="rounded bg-cyan-400/10 border border-cyan-400/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono">
+          CEO
+        </span>
+      </div>
+      {ownerHistory.map((entry, i) => (
+        <div
+          key={i}
+          className={`rounded border border-gray-700/60 bg-black/20 p-2 ${onEntryClick ? "cursor-pointer hover:border-cyan-400/30 hover:bg-cyan-400/5 transition-colors" : ""}`}
+          onClick={onEntryClick ? () => onEntryClick(entry) : undefined}
+        >
+          <div className="flex items-center justify-between gap-2 mb-1">
+            <span className="font-mono text-[9px] text-gray-500">{entry.ts}</span>
+            <span
+              className={`font-mono text-[9px] px-1.5 py-0.5 rounded ${
+                entry.type === "goal"
+                  ? "bg-emerald-500/15 text-emerald-300"
+                  : entry.type === "submission"
+                  ? "bg-sky-500/15 text-sky-300"
+                  : entry.type === "hot-fix"
+                  ? "bg-rose-500/15 text-rose-300"
+                  : "bg-gray-500/15 text-gray-400"
+              }`}
+            >
+              {entry.type}
+            </span>
+          </div>
+          <p className="text-[11px] leading-relaxed text-gray-300 break-words">{entry.content}</p>
+        </div>
+      ))}
+    </div>
+  );
+}