@walwal-harness/cli 7.1.8 → 7.1.10

package/HR-Resource/ceo/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: harness-ceo
-description: "CEO/Dispatcher. Owner-facing mission intake, CXX meeting orchestration, event routing, and final Owner reports. Trigger with /goal, /hot-fix, /ceo."
+description: "CEO/Dispatcher. Owner-facing mission intake, CXX meeting orchestration, event routing, and final Owner reports. Trigger with /goal, /submission, /hot-fix, /ceo."
 model: sonnet
 disable-model-invocation: false
 ---
@@ -12,7 +12,7 @@ You are the only direct conversation channel with the Owner.
 ## Mission Protocol
 
 1. Read the Owner request and decide whether brainstorming is needed or execution can start.
-2. Create or update `.harness/documents/{mission_name}/ceo.md`.
+2. Create or update `.harness/documents/{goal-or-child-mission}/ceo.md`.
 3. Ask each CXX only mission-relevant questions:
    - COO: planning, market/reference research, hypothesis validation, mission fit.
    - CDO: branding, UI/UX direction, mock selection, design review.
@@ -28,8 +28,8 @@ You are the only direct conversation channel with the Owner.
 - CXX agents do not execute specialist work directly. They only define scope, choose workers, review outputs, resolve blockers, and report decisions.
 - Every mission must use hired specialist workers for research, planning, design production, implementation, QA, ops checks, or any other domain deliverable. Small scope is not an exemption.
 - If a suitable hired worker is absent, invoke the `harness-hiring` skill before the CXX proceeds with that deliverable.
-- CEO must reject CXX reports that contain completed specialist deliverables without matching worker records under `.harness/documents/{mission_name}/workers/`.
-- Every CXX starts from fresh context and records decisions in `.harness/documents/{mission_name}/{cxx}.md`.
+- CEO must reject CXX reports that contain completed specialist deliverables without matching worker records under `.harness/documents/{goal-or-child-mission}/{owning-cxx}/workers/`.
+- Every CXX starts from fresh context and records decisions in `.harness/documents/{goal-or-child-mission}/{cxx}.md`.
 - Preserve DDD boundaries: domain decisions, application wiring, infrastructure, and quality policy are separate responsibilities.
 - Before CTO/CDO/OPS allocate runnable services, agree with the Owner on a `{xx}000` base port and write it to project `.env` as `HARNESS_BASE_PORT={xx}000`. Mentioning the value in `ceo.md` is not sufficient.
 - After writing `.env`, verify with `grep '^HARNESS_BASE_PORT=' .env` before routing service work.

package/HR-Resource/cqo/SKILL.md

@@ -12,7 +12,7 @@ Own quality, recurrence prevention, and archive eligibility.
 ## Workflow
 
 1. Read CEO and CTO mission context.
-2. Record decisions in `.harness/documents/{mission_name}/cqo.md`.
+2. Record decisions in `.harness/documents/{goal-or-child-mission}/cqo.md`.
 3. Break the CQO scope into worker tasks: e2e, backtest, visual, API, security, performance, regression, and operational verification.
 4. Use the `harness-resource-manager` skill to check available evaluators or reviewers for every task.
 5. Use the `harness-hiring` skill before assigning any task that has no hired worker. Do not complete that task yourself.
@@ -28,7 +28,7 @@ CQO must not directly execute QA, visual review, security review, performance te
 
 **CQO does not communicate with dev workers.** CQO only communicates with CEO and with its own evaluator/tester workers. If CQO needs clarification on implementation details, it routes the question back to CEO → CTO.
 
-Every evaluator/tester dispatched by CQO must write its report under `.harness/documents/{mission_name}/cqo/workers/{worker-name}.md`.
+Every evaluator/tester dispatched by CQO must write its report under `.harness/documents/{goal-or-child-mission}/cqo/workers/{worker-name}.md`.
 
 Required output sections in `cqo.md`:
 
@@ -40,7 +40,7 @@ Required output sections in `cqo.md`:
 
 ## Worker Report Note Requirement
 
-Every CQO evaluator/tester brief must require the worker to append this English block to the bottom of `.harness/documents/{mission_name}/cqo/workers/{worker-name}.md`:
+Every CQO evaluator/tester brief must require the worker to append this English block to the bottom of `.harness/documents/{goal-or-child-mission}/cqo/workers/{worker-name}.md`:
 
 ```
 ## Implementation Notes

package/HR-Resource/cto/SKILL.md

@@ -12,7 +12,7 @@ Own engineering execution for the mission.
 ## Workflow
 
 1. Read CEO, COO, and CDO mission documents.
-2. Record decisions in `.harness/documents/{mission_name}/cto.md`. **This file must be created before any worker is dispatched.**
+2. Record decisions in `.harness/documents/{goal-or-child-mission}/cto.md`. **This file must be created before any worker is dispatched.**
 3. Break the CTO scope into worker tasks: architecture review, backend, frontend, app, web, data, DevOps, integration, implementation, and technical QA.
 4. Use the `harness-resource-manager` skill to find hired workers for every task.
 5. Use the `harness-hiring` skill before assigning any missing specialty. Do not complete that task yourself.
@@ -26,9 +26,9 @@ Own engineering execution for the mission.
 
 CTO must not directly write code, create build scripts, choose detailed implementation content, run technical QA as the evaluator, or produce final implementation artifacts. CTO may only design boundaries, brief workers, coordinate ports/config, review worker outputs, and record accepted decisions with worker names and report paths.
 
-**cto.md is a prerequisite gate.** No worker may be dispatched before `cto.md` exists. A mission where workers appear in `.harness/documents/{mission_name}/workers/` but no `cto.md` exists is a protocol violation — CEO bypassed CTO.
+**cto.md is a prerequisite gate.** No worker may be dispatched before `cto.md` exists. A mission where workers appear in `.harness/documents/{goal-or-child-mission}/cto/workers/` but no `cto.md` exists is a protocol violation — CEO bypassed CTO.
 
-Every worker dispatched by CTO must be listed in the Worker Evidence Manifest section of `cto.md` with their report path and status. The report path must be `.harness/documents/{mission_name}/cto/workers/{worker-name}.md`. Workers not listed there are invisible to the harness and their output cannot be accepted.
+Every worker dispatched by CTO must be listed in the Worker Evidence Manifest section of `cto.md` with their report path and status. The report path must be `.harness/documents/{goal-or-child-mission}/cto/workers/{worker-name}.md`. Workers not listed there are invisible to the harness and their output cannot be accepted.
 
 Required output sections in `cto.md`:
 
@@ -41,7 +41,7 @@ Required output sections in `cto.md`:
 
 ## Worker Report Note Requirement
 
-Every CTO worker brief must require the worker to append this English block to the bottom of `.harness/documents/{mission_name}/cto/workers/{worker-name}.md`:
+Every CTO worker brief must require the worker to append this English block to the bottom of `.harness/documents/{goal-or-child-mission}/cto/workers/{worker-name}.md`:
 
 ```
 ## Implementation Notes

package/README.md

@@ -10,7 +10,7 @@ One project = one company. The Owner speaks only to the CEO. The CEO speaks only
 
 ```
 Owner
-  └─ /goal · /hot-fix
+  └─ /goal · /submission · /hot-fix
       └─ harness-ceo          orchestrator — Owner's only contact
           ├─ harness-coo      research, hypothesis, service direction
           ├─ harness-cdo      branding, UI/UX, design review
@@ -48,6 +48,7 @@ What `init` installs:
 | Path | Contents |
 |---|---|
 | `.claude/commands/goal.md` | `/goal` Owner command |
+| `.claude/commands/submission.md` | `/submission` Owner command |
 | `.claude/commands/hot-fix.md` | `/hot-fix` Owner command |
 | `.claude/skills/harness-{ceo,coo,cdo,cto,cqo,ops}/` | CXX agent skills |
 | `.harness/shared/HR-Resource/` | Hireable worker skill pool |
@@ -79,6 +80,16 @@ Owner /hot-fix → CEO → CTO → [dev workers] → CQO → [evaluator workers]
 
 **Complete when:** `cto.md` + `cqo.md` + at least one `.harness/gotchas/` or `.harness/conventions/` entry exist.
 
+### Submission
+
+```
+Owner /submission → CEO → [relevant CXX] → [workers] → [convention updates]
+```
+
+1. CEO locates the active `.harness/documents/goal-{index}-{name}/`.
+2. CEO creates `.harness/documents/goal-{index}-{name}/submission-{index}-{name}/`.
+3. Relevant CXX update `.harness/conventions/` when the new requirement changes durable project rules.
+
 ---
 
 ## Hard Rules
@@ -93,7 +104,7 @@ Owner /hot-fix → CEO → CTO → [dev workers] → CQO → [evaluator workers]
 | 6 | CEO routes only to CXX — never directly to workers |
 | 7 | No CXX self-execution — deliverables without matching worker records are rejected |
 | 8 | No verdict without worker evidence — CQO self-inspection is not valid |
-| 9 | Hierarchical worker ownership — worker reports live under `.harness/documents/{mission}/{owning-cxx}/workers/` |
+| 9 | Hierarchical worker ownership — worker reports live under `.harness/documents/{goal-or-child-mission}/{owning-cxx}/workers/` |
 | 10 | Implementation Notes required — `ceo.md`, every `{cxx}.md`, and every worker report must end with an English `## Implementation Notes` section |
 
 ### Implementation Notes Format
@@ -128,10 +139,49 @@ 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
-- **Mission Timeline** — clickable history of goal/hot-fix missions showing the full dispatch chain
+- **Mission Timeline** — clickable history of goal/submission/hot-fix missions showing the full dispatch chain
 - **Mission Flow tab** — per-mission flow: Owner prompt → CEO routing → CXX → worker files changed → CQO verdict
 - **History tab** — mission-specific Owner request (from CEO summary + closest progress.log match)
 - **Gotchas tab** — searchable `.harness/gotchas/*.md` knowledge base, click to read full markdown
@@ -143,8 +193,10 @@ Features:
 
 | Path | Role |
 |---|---|
-| `.harness/documents/{mission}/` | CXX decisions and worker reports per mission |
-| `.harness/documents/{mission}/{cxx}/workers/` | Worker reports owned by that CXX |
+| `.harness/documents/goal-{index}-{name}/` | Goal-level CXX decisions and worker reports |
+| `.harness/documents/goal-{index}-{name}/submission-{index}-{name}/` | Additional requirement under the active goal |
+| `.harness/documents/goal-{index}-{name}/hotfix-{index}-{name}/` | Emergency fix under the active goal |
+| `.harness/documents/{goal-or-child-mission}/{cxx}/workers/` | Worker reports owned by that CXX |
 | `.harness/conventions/` | Durable rules (CQO writes, survives missions) |
 | `.harness/gotchas/` | Recurrence-prevention records (CQO registers per hot-fix) |
 | `.harness/shared/HR-Resource/` | Hireable worker skill pool |
@@ -169,6 +221,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>
+  );
+}