@walwal-harness/cli 7.1.39 → 7.1.41

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

@@ -1,146 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-
-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)
-
-interface DrawerProps {
-  open: boolean;
-  tab: DrawerTab;
-  title: string;
-  onClose: () => void;
-  onTabChange: (tab: DrawerTab) => void;
-  children: React.ReactNode;
-  mode?: "overlay" | "inline";
-  scrollResetKey?: string;
-}
-
-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" },
-];
-
-export function Drawer({ open, tab, title, onClose, onTabChange, children, mode = "overlay", scrollResetKey }: DrawerProps) {
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!open || mode === "inline") return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose, mode]);
-
-  useEffect(() => {
-    contentRef.current?.scrollTo({ top: 0, left: 0 });
-  }, [scrollResetKey]);
-
-  if (mode === "inline") {
-    return (
-      <aside
-        role="complementary"
-        aria-label="Detail panel"
-        data-testid="drawer"
-        data-open="true"
-        className="glass-panel h-full min-h-0 rounded-lg flex flex-col overflow-hidden"
-      >
-        <header className="flex items-center justify-between border-b border-white/10 px-4 py-3">
-          <h2 className="text-sm font-semibold tracking-tight text-gray-100 truncate">
-            {title}
-          </h2>
-        </header>
-        <nav className="flex flex-wrap border-b border-white/10 px-2 py-2 text-[11px] font-mono">
-          {TABS.map((t) => (
-            <button
-              key={t.id}
-              type="button"
-              data-testid={`drawer-tab-${t.id}`}
-              data-active={t.id === tab}
-              onClick={() => onTabChange(t.id)}
-              className={`min-w-[33%] flex-1 rounded-md px-2 py-2 transition-colors ${
-                t.id === tab
-                  ? "bg-white/12 text-gray-100 shadow-inner"
-                  : "text-gray-500 hover:bg-white/6 hover:text-gray-200"
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </nav>
-        <div ref={contentRef} className="scrollbar-hidden flex-1 overflow-y-auto px-4 py-3 text-xs text-gray-200 font-mono">
-          {children}
-        </div>
-      </aside>
-    );
-  }
-
-  return (
-    <>
-      {/* Click-outside backdrop. Pointer-events flip with `open`. */}
-      <div
-        data-testid="drawer-backdrop"
-        aria-hidden="true"
-        onClick={onClose}
-        className={`fixed inset-0 bg-black/30 transition-opacity duration-200 ${
-          open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-        }`}
-      />
-      <aside
-        role="complementary"
-        aria-label="Detail panel"
-        aria-hidden={!open}
-        data-testid="drawer"
-        data-open={open}
-        className={`fixed top-0 right-0 h-[100dvh] w-full sm:w-[50vw] sm:min-w-[600px] bg-brick-bg border-l border-brick-wall shadow-2xl flex flex-col transition-transform duration-300 ease-out ${
-          open ? "translate-x-0" : "translate-x-full"
-        }`}
-      >
-        <header className="flex items-center justify-between border-b border-brick-wall px-4 py-3">
-          <h2 className="text-sm font-mono uppercase tracking-widest text-gray-200">
-            {title}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close panel"
-            data-testid="drawer-close"
-            className="rounded p-1 text-gray-400 hover:text-gray-100 hover:bg-brick-wall/40"
-          >
-            ✕
-          </button>
-        </header>
-        <nav className="flex flex-wrap border-b border-brick-wall text-[11px] font-mono">
-          {TABS.map((t) => (
-            <button
-              key={t.id}
-              type="button"
-              data-testid={`drawer-tab-${t.id}`}
-              data-active={t.id === tab}
-              onClick={() => onTabChange(t.id)}
-              className={`min-w-[33%] flex-1 px-2 py-2 transition-colors ${
-                t.id === tab
-                  ? "bg-brick-wall/50 text-gray-100 border-b-2 border-aura-typing"
-                  : "text-gray-500 hover:text-gray-200"
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </nav>
-        <div ref={contentRef} className="scrollbar-hidden flex-1 overflow-y-auto px-4 py-3 text-xs text-gray-200 font-mono">
-          {children}
-        </div>
-      </aside>
-    </>
-  );
-}

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

@@ -1,40 +0,0 @@
-import path from "node:path";
-import { Wordmark } from "./Wordmark";
-import { resolveHarnessRoot } from "@/lib/harness-root";
-
-export function Header() {
-  const root = resolveHarnessRoot();
-  const projectName = path.basename(root);
-  return (
-    <header className="border-b border-brick-wall bg-brick-bg/80 backdrop-blur">
-      <div className="mx-auto flex max-w-[1280px] items-center justify-between px-6 py-4">
-        <div className="flex items-baseline gap-4">
-          <Wordmark />
-          <span className="hidden items-baseline gap-2 sm:inline-flex">
-            <span
-              className="rounded bg-brick-wall/40 px-2 py-0.5 font-mono text-xs font-semibold text-amber-300"
-              title={root}
-            >
-              {projectName}
-            </span>
-            <span className="text-xs text-gray-400">walwal-harness 라이브 운영 대시보드</span>
-          </span>
-        </div>
-        <nav className="flex items-center gap-3 text-xs font-mono text-gray-500">
-          <span className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full bg-aura-idle" /> idle
-          </span>
-          <span className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full bg-aura-typing" /> typing
-          </span>
-          <span className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full bg-aura-talking" /> talking
-          </span>
-          <span className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full bg-aura-alert" /> alert
-          </span>
-        </nav>
-      </div>
-    </header>
-  );
-}

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

@@ -1,214 +0,0 @@
-"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="glass-panel rounded-lg 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-lg px-3 py-2.5 text-left transition-colors ${
-              isActive
-                ? "glass-panel"
-                : "border border-white/10 bg-white/[0.035] hover:border-white/20"
-            }`}
-          >
-            <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>
-  );
-}