@walwal-harness/cli 7.1.8 → 7.1.9

package/README.md

@@ -128,6 +128,45 @@ The harness ships with a real-time dashboard that reads `.harness/documents/` di
 bash scripts/harness-dashboard-up.sh
 ```
 
+Run on a different port:
+
+```bash
+bash scripts/harness-dashboard-up.sh --port 3002
+```
+
+Force-refresh the isolated dashboard cache when an older dashboard is still shown:
+
+```bash
+bash scripts/harness-dashboard-up.sh --port 3002 --reinstall
+```
+
+Dashboard options:
+
+| Option | Role |
+|---|---|
+| `--port <port>` | Run Brick Office on a custom port, e.g. `3002` |
+| `--reinstall` | Delete and rebuild the isolated dashboard cache under `~/.walwal-harness/dashboard/` |
+
+Existing users should update and migrate from the target project:
+
+```bash
+npm i @walwal-harness/cli@latest
+npx walwal-harness migrate
+```
+
+If command discovery or installed harness files look stale, refresh the install contract:
+
+```bash
+npx walwal-harness init --force
+```
+
+For an explicit project root:
+
+```bash
+npx walwal-harness migrate --project-root /path/to/project
+npx walwal-harness init --force --project-root /path/to/project
+```
+
 Features:
 
 - **Org Tree** — live status of Owner → CEO → CXX → Workers hierarchy
@@ -169,6 +208,7 @@ harness-hiring           → register and onboard worker
 
 | Version | Summary |
 |---|---|
+| 7.1.9 | Dashboard is packaged with npm and auto-syncs isolated cache by package version; README documents dashboard port/reinstall and update/migrate commands |
 | 7.1.8 | HR-Resource: replace China-platform-specific workers with global equivalents; refine cross-border/video/livestream skills |
 | 7.1.7 | Implementation Notes mandatory in all CXX docs and worker reports; harness-worker-evidence-validate.sh |
 | 7.1.6 | CXX hierarchy enforcement: CEO→CXX-only gate, CTO prerequisite gate, CQO worker-evidence mandate; dashboard gotchas tab, mission-specific history tab, worker file list in flow |

package/apps/harness-dashboard/app/api/env/route.ts

@@ -0,0 +1,62 @@
+import { NextResponse } from "next/server";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+export const revalidate = 0;
+
+const ALLOWED_FILES = new Set([
+  ".env",
+  ".env.local",
+  ".env.production",
+  ".env.development",
+  ".env.example",
+]);
+
+function isSafeKey(key: string): boolean {
+  return /^[A-Z_][A-Z0-9_]*$/i.test(key);
+}
+
+function quoteValue(value: string): string {
+  if (/^[A-Za-z0-9_./:@+-]*$/.test(value)) return value;
+  return JSON.stringify(value);
+}
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => null);
+  const file = String(body?.file ?? "");
+  const key = String(body?.key ?? "");
+  const value = String(body?.value ?? "");
+
+  if (!ALLOWED_FILES.has(file) || !isSafeKey(key)) {
+    return NextResponse.json({ ok: false, error: "invalid env target" }, { status: 400 });
+  }
+
+  const root = resolveHarnessRoot();
+  const target = path.join(root, file);
+  if (!existsSync(target)) {
+    return NextResponse.json({ ok: false, error: "env file not found" }, { status: 404 });
+  }
+
+  const original = readFileSync(target, "utf-8");
+  const lines = original.split("\n");
+  const nextLine = `${key}=${quoteValue(value)}`;
+  let replaced = false;
+  const next = lines.map((line) => {
+    if (line.trimStart().startsWith("#")) return line;
+    const idx = line.indexOf("=");
+    if (idx < 0) return line;
+    if (line.slice(0, idx).trim() !== key) return line;
+    replaced = true;
+    return nextLine;
+  });
+  if (!replaced) next.push(nextLine);
+  writeFileSync(target, next.join("\n").replace(/\n*$/, "\n"));
+
+  return NextResponse.json(
+    { ok: true, file, key, replaced },
+    { status: 200, headers: { "Cache-Control": "no-store" } }
+  );
+}

package/apps/harness-dashboard/app/api/log/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import { readProgressLog } from "@/lib/log-filter";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+export const revalidate = 0;
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const agentId = url.searchParams.get("agent") ?? undefined;
+  const limitParam = url.searchParams.get("limit");
+  const limit = limitParam ? Math.max(1, Math.min(500, parseInt(limitParam, 10))) : 50;
+  const lines = readProgressLog(resolveHarnessRoot(), { agentId, limit });
+  return NextResponse.json(
+    { agentId: agentId ?? null, lines },
+    { status: 200, headers: { "Cache-Control": "no-store" } }
+  );
+}

package/apps/harness-dashboard/app/api/missions/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { readHarnessState } from "@/lib/harness-state";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+export const revalidate = 0;
+
+export async function GET() {
+  const snapshot = readHarnessState(resolveHarnessRoot());
+  return NextResponse.json(
+    { missions: snapshot.missions },
+    { status: 200, headers: { "Cache-Control": "no-store" } }
+  );
+}

package/apps/harness-dashboard/app/api/snapshot/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { readHarnessState } from "@/lib/harness-state";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export async function GET() {
+  const root = resolveHarnessRoot();
+  const snapshot = readHarnessState(root);
+  return NextResponse.json(snapshot, {
+    status: 200,
+    headers: { "Cache-Control": "no-store" },
+  });
+}

package/apps/harness-dashboard/app/api/stream/route.ts

@@ -0,0 +1,71 @@
+import { readHarnessState } from "@/lib/harness-state";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+import { watchHarness } from "@/lib/watcher";
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+export const revalidate = 0;
+
+const SSE_HEADERS = {
+  "Content-Type": "text/event-stream",
+  "Cache-Control": "no-cache, no-transform",
+  Connection: "keep-alive",
+} as const;
+
+function sseFrame(snapshotJson: string): string {
+  // Each SSE frame ends with a blank line. Default event = "message".
+  return `data: ${snapshotJson}\n\n`;
+}
+
+export async function GET(request: Request) {
+  const root = resolveHarnessRoot();
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      const send = () => {
+        try {
+          const snap = readHarnessState(root);
+          controller.enqueue(encoder.encode(sseFrame(JSON.stringify(snap))));
+        } catch (err) {
+          // readHarnessState 는 이미 errorBanner 로 fallback 하지만, 만약을
+          // 위해 여기서도 안전하게 처리.
+          const fallback = JSON.stringify({
+            version: "1.1.0",
+            ts: new Date().toISOString(),
+            errorBanner: {
+              level: "error",
+              message_ko: "스트림 처리 중 오류가 발생했습니다.",
+              message_en: "Stream processing error.",
+            },
+          });
+          controller.enqueue(encoder.encode(sseFrame(fallback)));
+        }
+      };
+
+      // Initial snapshot.
+      send();
+
+      const handle = watchHarness(root, () => send());
+
+      const cleanup = async () => {
+        try {
+          await handle.close();
+        } catch {
+          /* ignore */
+        }
+        try {
+          controller.close();
+        } catch {
+          /* ignore — already closed */
+        }
+      };
+
+      request.signal.addEventListener("abort", () => {
+        void cleanup();
+      });
+    },
+  });
+
+  return new Response(stream, { status: 200, headers: SSE_HEADERS });
+}

package/apps/harness-dashboard/app/globals.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  background:
+    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.08), transparent 26rem),
+    radial-gradient(circle at 88% 6%, rgba(251, 191, 36, 0.06), transparent 24rem),
+    #101216;
+  color: #e5e7eb;
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    sans-serif;
+}

package/apps/harness-dashboard/app/layout.tsx

@@ -0,0 +1,29 @@
+import path from "node:path";
+import type { Metadata } from "next";
+import "./globals.css";
+import { Header } from "@/components/Header";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const root = resolveHarnessRoot();
+  const name = path.basename(root);
+  return {
+    title: `Brick Office — ${name}`,
+    description: `walwal-harness 라이브 운영 대시보드 — ${name}`,
+  };
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}

package/apps/harness-dashboard/app/page.tsx

@@ -0,0 +1,35 @@
+import { readHarnessState } from "@/lib/harness-state";
+import { resolveHarnessRoot } from "@/lib/harness-root";
+import { Scene } from "@/components/Scene";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default function Page() {
+  const snapshot = readHarnessState(resolveHarnessRoot());
+  const banner = snapshot.errorBanner;
+
+  return (
+    <main className="min-h-[100dvh]">
+      {banner && (
+        <div
+          role="alert"
+          data-testid="error-banner"
+          className={`mx-auto max-w-[1280px] mt-4 px-4 py-3 rounded border text-sm ${
+            banner.level === "error"
+              ? "border-aura-alert/60 bg-aura-alert/10 text-aura-alert"
+              : "border-aura-talking/60 bg-aura-talking/10 text-aura-talking"
+          }`}
+        >
+          <div>{banner.message_ko}</div>
+          <div className="opacity-60 text-xs mt-1">{banner.message_en}</div>
+        </div>
+      )}
+      <Scene snapshot={snapshot} />
+      <footer className="mx-auto max-w-[1280px] px-6 pb-8 text-xs text-gray-500 font-mono flex items-center justify-between">
+        <span>Sprint 1 / Phase C-1 — Foundation</span>
+        <span data-testid="snapshot-ts">{snapshot.ts}</span>
+      </footer>
+    </main>
+  );
+}

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

@@ -0,0 +1,97 @@
+"use client";
+import { useEffect } from "react";
+
+export type DrawerTab =
+  | "mission-flow"      // Mission document hierarchy (PRIMARY)
+  | "history"           // Owner prompt history
+  | "gotchas"           // Harness gotcha knowledge base
+  | "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;
+}
+
+const TABS: Array<{ id: DrawerTab; label: string }> = [
+  { id: "mission-flow", label: "Mission Flow" },
+  { id: "history", label: "History" },
+  { id: "gotchas", label: "Gotchas" },
+  { id: "mission-doc", label: "Document" },
+  { id: "logs", label: "Agent Log" },
+];
+
+export function Drawer({ open, tab, title, onClose, onTabChange, children }: DrawerProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  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 className="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

@@ -0,0 +1,40 @@
+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

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