@walwal-harness/cli 7.1.8 → 7.1.10

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

@@ -0,0 +1,214 @@
+"use client";
+import type { MissionDoc } from "@/lib/types";
+
+interface Props {
+  missions: MissionDoc[];
+  activeMissionId: string | null;
+  onMissionClick: (mission: MissionDoc) => void;
+}
+
+type ChipRole =
+  | "owner"
+  | "ceo"
+  | "coo"
+  | "cdo"
+  | "cto"
+  | "cqo"
+  | "ops"
+  | "worker";
+
+function chipColor(role: ChipRole): string {
+  switch (role) {
+    case "owner":
+      return "bg-amber-500/15 text-amber-300 border-amber-500/30";
+    case "ceo":
+      return "bg-cyan-400/15 text-cyan-300 border-cyan-400/30";
+    case "coo":
+      return "bg-emerald-500/15 text-emerald-300 border-emerald-500/30";
+    case "cdo":
+      return "bg-purple-500/15 text-purple-300 border-purple-500/30";
+    case "cto":
+      return "bg-blue-400/15 text-blue-300 border-blue-400/30";
+    case "cqo":
+      return "bg-amber-400/15 text-amber-300 border-amber-400/30";
+    case "ops":
+      return "bg-rose-400/15 text-rose-300 border-rose-400/30";
+    case "worker":
+      return "bg-gray-500/15 text-gray-300 border-gray-500/30";
+    default:
+      return "bg-gray-500/15 text-gray-400 border-gray-600/30";
+  }
+}
+
+function Chip({
+  role,
+  label,
+  badge,
+}: {
+  role: ChipRole;
+  label: string;
+  badge?: string;
+}) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-[9px] ${chipColor(role)}`}
+    >
+      {label}
+      {badge && <span className="opacity-80">{badge}</span>}
+    </span>
+  );
+}
+
+function Arrow() {
+  return <span className="text-[10px] text-gray-600 shrink-0">→</span>;
+}
+
+function buildFlowChain(mission: MissionDoc): React.ReactNode {
+  // Pre-worker CXX: planning phase (before implementation)
+  const preWorker: Array<{ key: "coo" | "cdo" | "cto"; role: ChipRole }> = [
+    { key: "coo", role: "coo" },
+    { key: "cdo", role: "cdo" },
+    { key: "cto", role: "cto" },
+  ];
+  // Post-worker CXX: verification phase (after implementation)
+  const postWorker: Array<{ key: "cqo" | "ops"; role: ChipRole }> = [
+    { key: "cqo", role: "cqo" },
+    { key: "ops", role: "ops" },
+  ];
+
+  const isCqoAccepted =
+    typeof mission.cqo === "string" && mission.cqo.includes("ACCEPTED");
+
+  const chips: React.ReactNode[] = [];
+  let key = 0;
+
+  chips.push(<Chip key={key++} role="owner" label="Owner" />);
+  chips.push(<Arrow key={key++} />);
+  chips.push(<Chip key={key++} role="ceo" label="CEO" />);
+
+  // Planning phase: COO, CDO, CTO
+  for (const { key: roleKey, role } of preWorker) {
+    if (mission.cxxPresent.includes(roleKey)) {
+      chips.push(<Arrow key={key++} />);
+      chips.push(<Chip key={key++} role={role} label={roleKey.toUpperCase()} />);
+    }
+  }
+
+  // CTO-owned implementation workers. Legacy flat workers remain visible here
+  // with owner=unknown so protocol bypasses are not hidden.
+  for (const worker of mission.workers.filter((w) => w.owner === "cto" || w.owner === "unknown")) {
+    chips.push(<Arrow key={key++} />);
+    const badge = worker.status === "COMPLETE" ? "✅" : "⏳";
+    const shortName =
+      worker.name.length > 12 ? worker.name.slice(0, 12) + "…" : worker.name;
+    chips.push(
+      <Chip key={key++} role="worker" label={shortName} badge={badge} />
+    );
+  }
+
+  // Verification phase: CQO, OPS
+  for (const { key: roleKey, role } of postWorker) {
+    if (mission.cxxPresent.includes(roleKey)) {
+      chips.push(<Arrow key={key++} />);
+      const badge = roleKey === "cqo" && isCqoAccepted ? "✅" : undefined;
+      chips.push(
+        <Chip key={key++} role={role} label={roleKey.toUpperCase()} badge={badge} />
+      );
+      if (roleKey === "cqo") {
+        for (const worker of mission.workers.filter((w) => w.owner === "cqo")) {
+          chips.push(<Arrow key={key++} />);
+          const workerBadge = worker.status === "COMPLETE" ? "✅" : "⏳";
+          const shortName =
+            worker.name.length > 12 ? worker.name.slice(0, 12) + "…" : worker.name;
+          chips.push(
+            <Chip key={key++} role="worker" label={shortName} badge={workerBadge} />
+          );
+        }
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 min-w-0">{chips}</div>
+  );
+}
+
+export function MissionTimeline({
+  missions,
+  activeMissionId,
+  onMissionClick,
+}: Props) {
+  if (!missions.length) {
+    return (
+      <div className="rounded border border-dashed border-gray-700 px-3 py-4 text-center text-[11px] text-gray-500">
+        No missions found in .harness/documents/
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {missions.map((mission) => {
+        const isActive = mission.missionId === activeMissionId;
+        const typeBadge =
+          mission.type === "hotfix"
+            ? "[🔥 hot-fix]"
+            : mission.type === "submission"
+            ? "[+ submission]"
+            : mission.type === "goal" || mission.type === "feature"
+            ? "[✦ goal]"
+            : "[— unknown]";
+        const shortId =
+          mission.missionId.length > 28
+            ? mission.missionId.slice(0, 28) + "…"
+            : mission.missionId;
+
+        let dateStr = "—";
+        try {
+          dateStr = new Date(mission.ts).toLocaleDateString(undefined, {
+            month: "short",
+            day: "numeric",
+          });
+        } catch {
+          // ignore invalid date
+        }
+
+        return (
+          <button
+            key={mission.missionId}
+            type="button"
+            onClick={() => onMissionClick(mission)}
+            className={`w-full rounded border px-3 py-2.5 text-left transition-colors ${
+              isActive
+                ? "border-cyan-400/40 bg-cyan-400/5"
+                : "border-gray-700/40 bg-black/10 hover:border-gray-600/50"
+            }`}
+          >
+            <div className="flex items-start justify-between gap-2 mb-1.5">
+              <div className="flex items-center gap-2 min-w-0">
+                <span
+                  className={`shrink-0 font-mono text-[9px] rounded px-1.5 py-0.5 border ${
+                    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-200 truncate">
+                  {shortId}
+                </span>
+              </div>
+              <span className="shrink-0 font-mono text-[9px] text-gray-500">
+                {dateStr}
+              </span>
+            </div>
+            {buildFlowChain(mission)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,330 @@
+"use client";
+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={`relative rounded-lg border p-3 text-left transition-all cursor-pointer ${roleColor} ${widths[size]} ${active ? "ring-2 ring-cyan-300 border-cyan-300/60" : "hover:border-white/30"}`}
+    >
+      <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>
+  );
+}
+
+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 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[],
+    },
+  ];
+
+  // Workers from current mission's workers/, shown under CTO column
+  const workers = currentMission?.workers ?? [];
+
+  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>
+      )}
+
+      {/* Row 1: Owner */}
+      <div className="flex justify-center">
+        <OrgCard
+          node={ownerNode}
+          size="lg"
+          active={activeNodeId === "owner"}
+          onClick={onNodeClick}
+        />
+      </div>
+
+      {/* Connector: Owner → CEO */}
+      <div className="flex justify-center">
+        <div className="w-px h-6 bg-gray-700" />
+      </div>
+
+      {/* Row 2: CEO */}
+      <div className="flex justify-center">
+        <OrgCard
+          node={ceoNode}
+          size="lg"
+          active={activeNodeId === "ceo"}
+          onClick={onNodeClick}
+        />
+      </div>
+
+      {/* Branch connector: CEO → CXX */}
+      <BranchConnector count={cxxNodes.length} />
+
+      {/* Row 3: CXX nodes with workers below */}
+      <div className="flex gap-3 justify-center">
+        {cxxNodes.map((node) => {
+          const nodeWorkers = node.role === "cto" ? workers : [];
+
+          return (
+            <div key={node.id} className="flex flex-col items-center gap-2">
+              <OrgCard
+                node={node}
+                size="md"
+                active={activeNodeId === node.id}
+                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">
+                    {nodeWorkers.map((w) => (
+                      <button
+                        key={w.name}
+                        type="button"
+                        onClick={() =>
+                          onNodeClick({
+                            id: `worker-${w.name}`,
+                            role: "cto",
+                            label: w.name,
+                            sublabel: w.status,
+                            status: w.status === "COMPLETE" ? "idle" : "typing",
+                            activity: null,
+                            agentIds: [],
+                          })
+                        }
+                        className={`rounded border border-gray-700/40 bg-gray-800/30 px-2 py-1.5 text-left min-w-[130px] max-w-[160px] transition-all hover:border-white/20 ${
+                          activeNodeId === `worker-${w.name}` ? "ring-1 ring-cyan-300" : ""
+                        }`}
+                      >
+                        <div className="font-mono text-[9px] text-gray-500">worker</div>
+                        <div className="text-[11px] font-medium text-gray-200 truncate">
+                          {w.name}
+                        </div>
+                        <div
+                          className={`text-[9px] font-mono mt-0.5 ${
+                            w.status === "COMPLETE" ? "text-emerald-400" : "text-amber-400"
+                          }`}
+                        >
+                          {w.status}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}