harness-bujang 0.2.1 → 0.3.0

package/README.md

@@ -20,6 +20,22 @@ npx harness-bujang init --lang=ko
 npx harness-bujang init --target=./my-app --no-template
 ```
 
+### See the chat-room — any stack
+
+```bash
+# Standalone viewer (works on Next.js, Rails, Django, Express, …) — no setup
+npx harness-bujang chat
+# → opens http://localhost:7777 in your browser
+```
+
+The standalone viewer reads `.harness/chat.db` directly, so it works on any
+project that uses the SQLite chat backend (the default). For projects that have
+not posted any messages yet, pass `--create` to bootstrap an empty DB and seed:
+
+```bash
+npx harness-bujang chat --create
+```
+
 ## What it does
 
 1. **Scans** the project — framework (Next.js / SvelteKit / Astro / Rails / Django / …), language, DB (Supabase / Prisma / Drizzle / TypeORM), UI lib, payment integration, GitHub user.
@@ -56,6 +72,27 @@ npx harness-bujang status [path]
 
 Verifies the install: agent files, `CLAUDE.md` section, learning log, chat-room UI. Counts unfilled `{{...}}` placeholders.
 
+### `chat`
+
+```
+npx harness-bujang chat [options]
+
+Options:
+  --target=<path>         Project root (default: cwd)
+  --port=<number>         Preferred port (default: 7777, falls forward if busy)
+  --no-open               Don't auto-open the browser
+  --create                Create an empty chat DB + schema if none exists yet
+```
+
+Boots a standalone HTTP server (Node `http`, no framework) that reads
+`<target>/.harness/chat.db` via the system `sqlite3` CLI and serves the
+KakaoTalk-style chat-room viewer. Supports both reading and writing — the
+input bar at the bottom of each room sends `from='대표님'` (principal) messages
+that any agent can pick up next time they read the chat.
+
+Requires the `sqlite3` command-line tool (preinstalled on macOS; `apt-get install
+sqlite3` on Ubuntu/WSL; sqlite-tools binaries on Windows).
+
 ## How the harness works once installed
 
 ```

package/dist/index.js

@@ -855,11 +855,11 @@ async function upsertEnvVar(envFile, key, value) {
 }
 async function confirm2(message) {
   process.stdout.write(`${message} [y/N] `);
-  return new Promise((resolve4) => {
+  return new Promise((resolve5) => {
     process.stdin.setEncoding("utf8");
     process.stdin.once("data", (chunk) => {
       const ans = chunk.toString().trim().toLowerCase();
-      resolve4(ans === "y" || ans === "yes");
+      resolve5(ans === "y" || ans === "yes");
       process.stdin.pause();
     });
   });
@@ -893,7 +893,13 @@ console.log('   \u2713 Transferred ' + total + ' messages');
   return scriptPath;
 }
 
-// src/index.ts
+// src/chat.ts
+import * as http from "http";
+import * as path5 from "path";
+import * as fs5 from "fs";
+import { execFile, spawn } from "child_process";
+import { promisify } from "util";
+var execFileP = promisify(execFile);
 var c4 = {
   bold: (s) => `\x1B[1m${s}\x1B[22m`,
   dim: (s) => `\x1B[2m${s}\x1B[22m`,
@@ -902,16 +908,559 @@ var c4 = {
   yellow: (s) => `\x1B[33m${s}\x1B[39m`,
   cyan: (s) => `\x1B[36m${s}\x1B[39m`
 };
+async function runChat(args) {
+  const opts = parseArgs3(args);
+  try {
+    await execFileP("sqlite3", ["--version"]);
+  } catch {
+    console.log();
+    console.log(c4.red("\u2716 The `sqlite3` command-line tool is required for `bujang chat`."));
+    console.log();
+    console.log("  macOS:        already installed");
+    console.log("  Ubuntu/WSL:   " + c4.bold("sudo apt-get install sqlite3"));
+    console.log("  Fedora:       " + c4.bold("sudo dnf install sqlite"));
+    console.log("  Windows:      https://www.sqlite.org/download.html (sqlite-tools-win-x64)");
+    console.log();
+    process.exitCode = 1;
+    return;
+  }
+  const dbPath = resolveDbPath(opts.target);
+  if (!fs5.existsSync(dbPath)) {
+    if (!opts.create) {
+      console.log();
+      console.log(c4.red(`\u2716 Chat DB not found at ${c4.bold(dbPath)}`));
+      console.log();
+      console.log("  This usually means the harness has not posted any messages yet,");
+      console.log("  or the project does not use the SQLite chat backend.");
+      console.log();
+      console.log("  Run with " + c4.bold("--create") + " to create an empty DB and schema:");
+      console.log("    " + c4.cyan("bujang chat --create"));
+      console.log();
+      process.exitCode = 1;
+      return;
+    }
+    fs5.mkdirSync(path5.dirname(dbPath), { recursive: true });
+    await runSql(dbPath, SCHEMA_SQL);
+    const seedId = `seed-${Date.now()}`;
+    await runSql(
+      dbPath,
+      `INSERT INTO harness_messages (id, "from", "to", type, message, severity)
+       VALUES ('${seedId}', '\uBD80\uC7A5', '\uB300\uD45C\uB2D8', 'info', '\uD1A1\uBC29\uC774 \uC0DD\uC131\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uCCAB \uBA85\uB839\uC744 \uB0B4\uB824\uC8FC\uC138\uC694.', 'info');`
+    );
+    console.log(c4.dim(`   created empty DB + schema at ${dbPath}`));
+  } else {
+    await runSql(dbPath, SCHEMA_SQL);
+  }
+  const port = await findOpenPort(opts.port);
+  const server = http.createServer(async (req, res) => {
+    const url2 = new URL(req.url ?? "/", `http://localhost:${port}`);
+    if (req.method === "GET" && url2.pathname === "/") {
+      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      res.end(renderHtml());
+      return;
+    }
+    if (req.method === "GET" && url2.pathname === "/api/messages") {
+      const days = parseInt(url2.searchParams.get("days") ?? "7", 10);
+      try {
+        const rows = await readMessages(dbPath, days);
+        res.writeHead(200, { "content-type": "application/json" });
+        res.end(JSON.stringify({ data: rows }));
+      } catch (err) {
+        res.writeHead(500, { "content-type": "application/json" });
+        res.end(JSON.stringify({ data: [], error: String(err) }));
+      }
+      return;
+    }
+    if (req.method === "POST" && url2.pathname === "/api/messages") {
+      try {
+        const body = await readBody(req);
+        const parsed = JSON.parse(body);
+        const id = `chat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        const from = parsed.from || "\uB300\uD45C\uB2D8";
+        const to = parsed.to || "\uBD80\uC7A5";
+        const type = parsed.type || "command";
+        const message = parsed.message || "";
+        const severity = parsed.severity || "info";
+        if (!message.trim()) {
+          res.writeHead(400, { "content-type": "application/json" });
+          res.end(JSON.stringify({ error: "message is required" }));
+          return;
+        }
+        await runSql(
+          dbPath,
+          `INSERT INTO harness_messages (id, "from", "to", type, message, severity)
+           VALUES (${q(id)}, ${q(from)}, ${q(to)}, ${q(type)}, ${q(message)}, ${q(severity)});`
+        );
+        res.writeHead(200, { "content-type": "application/json" });
+        res.end(JSON.stringify({ data: { id } }));
+      } catch (err) {
+        res.writeHead(500, { "content-type": "application/json" });
+        res.end(JSON.stringify({ error: String(err) }));
+      }
+      return;
+    }
+    res.writeHead(404);
+    res.end("not found");
+  });
+  await new Promise((resolve5) => server.listen(port, "127.0.0.1", resolve5));
+  const url = `http://localhost:${port}`;
+  console.log();
+  console.log(c4.bold(c4.green("\u{1F7E2} \uD558\uB124\uC2A4 \uD1A1\uBC29 viewer")) + c4.dim(" \u2014 " + url));
+  console.log(c4.dim(`   db:   ${dbPath}`));
+  console.log(c4.dim(`   stop: Ctrl+C`));
+  console.log();
+  if (opts.open) {
+    openBrowser(url);
+  }
+  process.on("SIGINT", () => {
+    console.log();
+    console.log(c4.dim("   bye \u{1F44B}"));
+    server.close();
+    process.exit(0);
+  });
+}
+function parseArgs3(args) {
+  const targetRaw = getFlag3(args, "--target") ?? ".";
+  const portRaw = getFlag3(args, "--port");
+  const port = portRaw ? parseInt(portRaw, 10) : 7777;
+  if (!Number.isFinite(port) || port < 1024 || port > 65535) {
+    throw new Error(`--port must be between 1024 and 65535, got "${portRaw}"`);
+  }
+  return {
+    target: path5.resolve(targetRaw),
+    port,
+    open: !args.includes("--no-open"),
+    create: args.includes("--create")
+  };
+}
+function getFlag3(args, name) {
+  for (const a of args) {
+    if (a.startsWith(`${name}=`)) return a.slice(name.length + 1);
+  }
+  const idx = args.indexOf(name);
+  if (idx >= 0 && idx + 1 < args.length && !args[idx + 1].startsWith("--")) {
+    return args[idx + 1];
+  }
+  return void 0;
+}
+function resolveDbPath(target) {
+  if (process.env.HARNESS_SQLITE_PATH) return process.env.HARNESS_SQLITE_PATH;
+  return path5.join(target, ".harness", "chat.db");
+}
+async function findOpenPort(preferred) {
+  for (let p = preferred; p < preferred + 20; p++) {
+    if (await portIsFree(p)) return p;
+  }
+  throw new Error(`Could not find a free port in range ${preferred}-${preferred + 19}`);
+}
+function portIsFree(port) {
+  return new Promise((resolve5) => {
+    const tester = http.createServer();
+    tester.once("error", () => resolve5(false));
+    tester.once("listening", () => {
+      tester.close();
+      resolve5(true);
+    });
+    tester.listen(port, "127.0.0.1");
+  });
+}
+function openBrowser(url) {
+  const platform = process.platform;
+  const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
+  try {
+    spawn(cmd, [url], { detached: true, stdio: "ignore" }).unref();
+  } catch {
+  }
+}
+function readBody(req) {
+  return new Promise((resolve5, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolve5(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+async function readMessages(dbPath, days) {
+  const sql = `
+    SELECT id, timestamp, "from" AS sender, "to" AS recipient, type, message, severity
+    FROM harness_messages
+    WHERE timestamp >= datetime('now', '-${Math.max(1, days | 0)} day')
+    ORDER BY timestamp ASC;
+  `;
+  const { stdout } = await execFileP("sqlite3", ["-json", dbPath, sql], {
+    maxBuffer: 32 * 1024 * 1024
+  });
+  if (!stdout.trim()) return [];
+  const raw = JSON.parse(stdout);
+  return raw.map((r) => ({
+    id: r.id,
+    timestamp: r.timestamp,
+    from: r.sender,
+    to: r.recipient,
+    type: r.type,
+    message: r.message,
+    severity: r.severity
+  }));
+}
+async function runSql(dbPath, sql) {
+  await execFileP("sqlite3", [dbPath, sql], { maxBuffer: 1024 * 1024 });
+}
+function q(value) {
+  return `'${value.replace(/'/g, "''")}'`;
+}
+var SCHEMA_SQL = `
+  CREATE TABLE IF NOT EXISTS harness_messages (
+    id          TEXT PRIMARY KEY,
+    timestamp   TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+    "from"      TEXT NOT NULL,
+    "to"        TEXT NOT NULL,
+    type        TEXT NOT NULL CHECK (type IN ('command', 'feedback', 'info', 'report')),
+    message     TEXT NOT NULL,
+    severity    TEXT CHECK (severity IS NULL OR severity IN ('info', 'warning', 'error')),
+    data        TEXT,
+    created_at  TEXT DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+  );
+  CREATE INDEX IF NOT EXISTS harness_messages_timestamp_idx ON harness_messages(timestamp DESC);
+  CREATE INDEX IF NOT EXISTS harness_messages_from_to_idx ON harness_messages("from", "to");
+`;
+function renderHtml() {
+  return (
+    /* html */
+    `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>\uD558\uB124\uC2A4 \uD1A1\uBC29</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif; }
+    .chat-bg { background: #b2c7d9; }
+    .chat-bubble-bg { background: #ffeb3b; }
+    @keyframes dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
+    .dot { animation: dot 1.4s infinite; }
+    .dot:nth-child(2) { animation-delay: 0.2s; }
+    .dot:nth-child(3) { animation-delay: 0.4s; }
+  </style>
+</head>
+<body class="h-screen overflow-hidden">
+  <div id="root" class="flex h-screen">
+    <div class="flex items-center justify-center w-full text-gray-400">\uBD88\uB7EC\uC624\uB294 \uC911...</div>
+  </div>
+  <script>
+${CLIENT_JS}
+  </script>
+</body>
+</html>`
+  );
+}
+var CLIENT_JS = (
+  /* js */
+  `
+const ROLES = {
+  '\uB300\uD45C\uB2D8':           { icon: '\u{1F454}', color: 'text-purple-700', bg: 'bg-purple-100', label: '\uB300\uD45C\uB2D8' },
+  '\uBD80\uC7A5':             { icon: '\u{1F9D1}\u200D\u{1F4BC}', color: 'text-blue-700',   bg: 'bg-blue-100',   label: '\uBD80\uC7A5' },
+  'consultant':       { icon: '\u{1F91D}', color: 'text-indigo-700', bg: 'bg-indigo-100', label: '\uCEE8\uC124\uD134\uD2B8' },
+  'dev-team':         { icon: '\u{1F4BB}', color: 'text-violet-700', bg: 'bg-violet-100', label: '\uAC1C\uBC1C\uD300' },
+  'architect-team':   { icon: '\u{1F3D7}\uFE0F', color: 'text-cyan-700',   bg: 'bg-cyan-100',   label: '\uC544\uD0A4\uD14D\uCC98\uD300' },
+  'code-review-team': { icon: '\u{1F4DD}', color: 'text-yellow-700', bg: 'bg-yellow-100', label: '\uCF54\uB4DC\uB9AC\uBDF0\uD300' },
+  'doc-sync-team':    { icon: '\u{1F4C4}', color: 'text-orange-700', bg: 'bg-orange-100', label: '\uBB38\uC11C\uAD00\uB9AC\uD300' },
+  'security-team':    { icon: '\u{1F6E1}\uFE0F', color: 'text-red-700',    bg: 'bg-red-100',    label: '\uBCF4\uC548\uD300' },
+  'db-guard-team':    { icon: '\u{1F5C4}\uFE0F', color: 'text-green-700',  bg: 'bg-green-100',  label: 'DB\uD300' },
+  'qa-team':          { icon: '\u{1F9EA}', color: 'text-teal-700',   bg: 'bg-teal-100',   label: 'QA\uD300' },
+  'verifier-team':    { icon: '\u2705', color: 'text-emerald-700', bg: 'bg-emerald-100', label: '\uAC80\uC218\uD300' },
+};
+
+const ROOMS = [
+  { id: '\uB300\uD45C\uB2D8',           name: '\uB300\uD45C \uBCF4\uACE0',     icon: '\u{1F454}', members: ['\uB300\uD45C\uB2D8', 'consultant', '\uBD80\uC7A5'] },
+  { id: 'consultant',       name: '\uCEE8\uC124\uD134\uD2B8',      icon: '\u{1F91D}', members: ['consultant', '\uBD80\uC7A5'] },
+  { id: 'architect-team',   name: '\uC544\uD0A4\uD14D\uCC98\uD300',    icon: '\u{1F3D7}\uFE0F', members: ['\uBD80\uC7A5', 'architect-team'] },
+  { id: 'code-review-team', name: '\uCF54\uB4DC\uB9AC\uBDF0\uD300',    icon: '\u{1F4DD}', members: ['\uBD80\uC7A5', 'code-review-team'] },
+  { id: 'doc-sync-team',    name: '\uBB38\uC11C\uAD00\uB9AC\uD300',    icon: '\u{1F4C4}', members: ['\uBD80\uC7A5', 'doc-sync-team'] },
+  { id: 'security-team',    name: '\uBCF4\uC548\uD300',        icon: '\u{1F6E1}\uFE0F', members: ['\uBD80\uC7A5', 'security-team'] },
+  { id: 'db-guard-team',    name: 'DB\uD300',          icon: '\u{1F5C4}\uFE0F', members: ['\uBD80\uC7A5', 'db-guard-team'] },
+  { id: 'qa-team',          name: 'QA\uD300',          icon: '\u{1F9EA}', members: ['\uBD80\uC7A5', 'qa-team'] },
+  { id: 'verifier-team',    name: '\uAC80\uC218\uD300',        icon: '\u2705', members: ['\uBD80\uC7A5', 'verifier-team'] },
+  { id: 'dev-team',         name: '\uAC1C\uBC1C\uD300',        icon: '\u{1F4BB}', members: ['\uBD80\uC7A5', 'dev-team'] },
+];
+
+const STORAGE_KEY = 'harness-bujang-read';
+const state = {
+  messages: [],
+  selectedRoom: null,
+  readCounts: JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'),
+  loading: true,
+};
+
+function getRole(name) {
+  return ROLES[name] || { icon: '\u{1F4AC}', color: 'text-gray-700', bg: 'bg-gray-100', label: name };
+}
+
+function getRoleLabel(name) {
+  return (ROLES[name] && ROLES[name].label) || name;
+}
+
+function escapeHtml(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function formatTime(ts) {
+  const d = new Date(ts);
+  if (isNaN(d.getTime())) return '';
+  const h = d.getHours();
+  const m = String(d.getMinutes()).padStart(2, '0');
+  const ampm = h < 12 ? '\uC624\uC804' : '\uC624\uD6C4';
+  const hour = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return ampm + ' ' + hour + ':' + m;
+}
+
+function formatDate(ts) {
+  const d = new Date(ts);
+  if (isNaN(d.getTime())) return '';
+  return d.getFullYear() + '\uB144 ' + (d.getMonth() + 1) + '\uC6D4 ' + d.getDate() + '\uC77C';
+}
+
+function filterMessages(messages, roomId) {
+  if (roomId === 'all') return messages;
+  const room = ROOMS.find((r) => r.id === roomId);
+  if (!room) return [];
+  return messages.filter((m) => {
+    if (!room.members.includes(m.from) || !room.members.includes(m.to)) return false;
+    const smaller = ROOMS.find(
+      (r) =>
+        r.id !== roomId &&
+        r.members.length < room.members.length &&
+        r.members.includes(m.from) &&
+        r.members.includes(m.to),
+    );
+    return !smaller;
+  });
+}
+
+function getLastMessage(messages, roomId) {
+  const filtered = filterMessages(messages, roomId);
+  return filtered.length ? filtered[filtered.length - 1] : null;
+}
+
+function severityBadge(sev) {
+  if (!sev) return '';
+  const m = { error: 'bg-red-500', warning: 'bg-yellow-500', info: 'bg-green-500' };
+  return '<span class="inline-block px-1.5 py-0.5 text-[10px] font-bold ' + (m[sev] || 'bg-gray-500') + ' text-white rounded mr-1">' +
+         (sev === 'error' ? 'ERROR' : sev === 'warning' ? 'WARN' : 'INFO') + '</span>';
+}
+
+function render() {
+  const root = document.getElementById('root');
+  if (state.loading) {
+    root.innerHTML = '<div class="flex items-center justify-center w-full text-gray-400">\uBD88\uB7EC\uC624\uB294 \uC911...</div>';
+    return;
+  }
+
+  const errors   = state.messages.filter((m) => m.severity === 'error').length;
+  const warnings = state.messages.filter((m) => m.severity === 'warning').length;
+  const infos    = state.messages.filter((m) => m.severity === 'info').length;
+
+  let html = '<div class="w-80 border-r border-gray-200 bg-white flex flex-col h-full">';
+  html += '<div class="p-4 border-b border-gray-200">';
+  html += '<h1 class="text-lg font-bold text-gray-900">\uD558\uB124\uC2A4 \uD1A1\uBC29</h1>';
+  html += '<p class="text-xs text-gray-500 mt-1">\uC5D0\uC774\uC804\uD2B8 \uAC04 \uBCF4\uACE0 & \uC9C0\uC2DC \u2014 ' + state.messages.length + '\uAC1C \uBA54\uC2DC\uC9C0</p>';
+  if (state.messages.length > 0) {
+    html += '<div class="flex gap-2 mt-2">';
+    if (errors)   html += '<span class="px-2 py-0.5 text-xs font-bold bg-red-100 text-red-700 rounded-full">ERR ' + errors + '</span>';
+    if (warnings) html += '<span class="px-2 py-0.5 text-xs font-bold bg-yellow-100 text-yellow-700 rounded-full">WARN ' + warnings + '</span>';
+    if (infos)    html += '<span class="px-2 py-0.5 text-xs font-bold bg-green-100 text-green-700 rounded-full">INFO ' + infos + '</span>';
+    html += '</div>';
+  }
+  html += '</div>';
+
+  html += '<div class="flex-1 overflow-y-auto">';
+  for (const room of ROOMS) {
+    const last = getLastMessage(state.messages, room.id);
+    const count = filterMessages(state.messages, room.id).length;
+    const isSelected = state.selectedRoom === room.id;
+    const unread = count - (state.readCounts[room.id] || 0);
+    html += '<button data-room-id="' + escapeHtml(room.id) + '" class="w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ' +
+            (isSelected ? 'bg-indigo-50' : 'hover:bg-gray-50') + '">';
+    html += '<div class="flex-shrink-0 w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center text-2xl">' + room.icon + '</div>';
+    html += '<div class="flex-1 min-w-0">';
+    html += '<div class="flex items-center justify-between"><span class="text-sm font-semibold text-gray-900 truncate">' +
+            escapeHtml(room.name) + ' <span class="text-xs text-gray-400 font-normal ml-1">' + room.members.length + '</span></span>';
+    if (last) html += '<span class="text-xs text-gray-400 flex-shrink-0 ml-2">' + formatTime(last.timestamp) + '</span>';
+    html += '</div>';
+    html += '<div class="flex items-center gap-1 mt-0.5">';
+    if (last && last.severity) html += severityBadge(last.severity);
+    html += '<p class="text-xs text-gray-500 truncate">' + (last ? escapeHtml(last.message) : '\uB300\uD654 \uC5C6\uC74C') + '</p>';
+    html += '</div></div>';
+    if (unread > 0) html += '<span class="flex-shrink-0 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">' + unread + '</span>';
+    html += '</button>';
+  }
+  html += '</div></div>';
+
+  // Right pane
+  html += '<div class="flex-1 flex flex-col chat-bg h-full">';
+  if (!state.selectedRoom) {
+    html += '<div class="flex-1 flex items-center justify-center"><div class="text-center"><p class="text-5xl mb-3">\u{1F3E2}</p><p class="text-sm text-white/80">\uCC44\uD305\uBC29\uC744 \uD074\uB9AD\uD574\uC11C \uC5F4\uC5B4\uC8FC\uC138\uC694</p></div></div>';
+  } else {
+    const roomInfo = ROOMS.find((r) => r.id === state.selectedRoom);
+    const roomMessages = filterMessages(state.messages, state.selectedRoom);
+    html += '<div class="px-5 py-3 bg-white border-b border-gray-200 flex items-center gap-3">';
+    html += '<span class="text-xl">' + (roomInfo ? roomInfo.icon : '\u{1F4AC}') + '</span>';
+    html += '<div><h2 class="text-sm font-semibold text-gray-900">' + escapeHtml(roomInfo ? roomInfo.name : state.selectedRoom) + '</h2>';
+    html += '<p class="text-xs text-gray-400">' + (roomInfo ? roomInfo.members.map(getRoleLabel).join(', ') : '') + '</p></div>';
+    html += '<span class="ml-auto text-xs text-gray-400">' + roomMessages.length + '\uAC1C \uBA54\uC2DC\uC9C0</span></div>';
+
+    html += '<div id="conversation" class="flex-1 overflow-y-auto px-5 py-4">';
+    if (roomMessages.length === 0) {
+      html += '<div class="flex items-center justify-center h-full"><div class="text-center"><p class="text-4xl mb-2">\u{1F4AC}</p><p class="text-sm text-white/80">\uB300\uD654\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</p></div></div>';
+    } else {
+      // Group by date
+      let lastDate = '';
+      for (const msg of roomMessages) {
+        const date = formatDate(msg.timestamp);
+        if (date !== lastDate) {
+          html += '<div class="flex justify-center my-3"><span class="px-3 py-1 text-xs bg-white/40 text-gray-700 rounded-full">' + date + '</span></div>';
+          lastDate = date;
+        }
+        const role = getRole(msg.from);
+        const isMine = msg.from === '\uB300\uD45C\uB2D8';
+        html += '<div class="mb-3 flex ' + (isMine ? 'justify-end' : 'gap-2') + '">';
+        if (!isMine) {
+          html += '<div class="flex-shrink-0 w-9 h-9 rounded-2xl ' + role.bg + ' flex items-center justify-center text-lg">' + role.icon + '</div>';
+        }
+        html += '<div class="' + (isMine ? 'max-w-[70%]' : 'max-w-[70%]') + '">';
+        if (!isMine) {
+          html += '<p class="text-xs text-gray-700 mb-1">' + escapeHtml(role.label) + '</p>';
+        }
+        html += '<div class="flex items-end gap-1 ' + (isMine ? 'flex-row-reverse' : '') + '">';
+        html += '<div class="px-3 py-2 ' + (isMine ? 'chat-bubble-bg text-gray-900' : 'bg-white text-gray-900') + ' rounded-2xl shadow-sm">';
+        if (msg.severity) html += '<div class="mb-1">' + severityBadge(msg.severity) + '</div>';
+        html += '<p class="text-sm whitespace-pre-wrap break-words">' + escapeHtml(msg.message) + '</p>';
+        html += '</div>';
+        html += '<span class="text-[10px] text-gray-600 flex-shrink-0">' + formatTime(msg.timestamp) + '</span>';
+        html += '</div></div></div>';
+      }
+    }
+    html += '</div>';
+
+    // Input bar \u2014 for sending principal messages.
+    html += '<div class="px-4 py-3 bg-white border-t border-gray-200 flex gap-2">';
+    html += '<input id="msg-input" type="text" placeholder="\uBA54\uC2DC\uC9C0 \uC785\uB825 (Enter \uC804\uC1A1)" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500" />';
+    html += '<button id="send-btn" class="px-4 py-2 text-sm font-semibold bg-indigo-500 text-white rounded-lg hover:bg-indigo-600">\uC804\uC1A1</button>';
+    html += '</div>';
+  }
+  html += '</div>';
+
+  root.innerHTML = html;
+
+  // Re-bind handlers
+  document.querySelectorAll('[data-room-id]').forEach((el) => {
+    el.addEventListener('click', () => {
+      state.selectedRoom = el.getAttribute('data-room-id');
+      const count = filterMessages(state.messages, state.selectedRoom).length;
+      state.readCounts[state.selectedRoom] = count;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state.readCounts));
+      render();
+      const conv = document.getElementById('conversation');
+      if (conv) conv.scrollTop = conv.scrollHeight;
+    });
+  });
+
+  const input = document.getElementById('msg-input');
+  const sendBtn = document.getElementById('send-btn');
+  if (input && sendBtn) {
+    const send = async () => {
+      const text = input.value.trim();
+      if (!text) return;
+      input.disabled = true;
+      sendBtn.disabled = true;
+      try {
+        const target = state.selectedRoom === '\uB300\uD45C\uB2D8' ? '\uBD80\uC7A5' : (state.selectedRoom || '\uBD80\uC7A5');
+        await fetch('/api/messages', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({
+            from: '\uB300\uD45C\uB2D8',
+            to: target,
+            type: 'command',
+            message: text,
+            severity: 'info',
+          }),
+        });
+        input.value = '';
+        await refresh();
+        const conv = document.getElementById('conversation');
+        if (conv) conv.scrollTop = conv.scrollHeight;
+      } catch (e) {
+        alert('\uC804\uC1A1 \uC2E4\uD328: ' + e.message);
+      }
+      input.disabled = false;
+      sendBtn.disabled = false;
+      input.focus();
+    };
+    sendBtn.addEventListener('click', send);
+    input.addEventListener('keydown', (e) => { if (e.key === 'Enter') send(); });
+    input.focus();
+  }
+
+  // Auto-scroll the selected room to the bottom on first render of that room.
+  const conv = document.getElementById('conversation');
+  if (conv && conv.dataset.scrolled !== state.selectedRoom) {
+    conv.scrollTop = conv.scrollHeight;
+    conv.dataset.scrolled = state.selectedRoom;
+  }
+}
+
+async function refresh() {
+  try {
+    const res = await fetch('/api/messages?days=14');
+    const json = await res.json();
+    state.messages = (json.data || []).map((m) => ({
+      id: m.id,
+      timestamp: m.timestamp,
+      from: m.from,
+      to: m.to,
+      type: m.type,
+      message: m.message,
+      severity: m.severity || undefined,
+    }));
+    state.loading = false;
+    render();
+  } catch (e) {
+    state.loading = false;
+    render();
+  }
+}
+
+refresh();
+setInterval(refresh, 2000);
+`
+);
+
+// src/index.ts
+var c5 = {
+  bold: (s) => `\x1B[1m${s}\x1B[22m`,
+  dim: (s) => `\x1B[2m${s}\x1B[22m`,
+  green: (s) => `\x1B[32m${s}\x1B[39m`,
+  red: (s) => `\x1B[31m${s}\x1B[39m`,
+  yellow: (s) => `\x1B[33m${s}\x1B[39m`,
+  cyan: (s) => `\x1B[36m${s}\x1B[39m`
+};
 var HELP = `
-${c4.bold("harness-bujang")} \u2014 Korean-style multi-agent harness director for Claude Code
-${c4.dim("https://github.com/bjcho4141/harness-bujang")}
+${c5.bold("harness-bujang")} \u2014 Korean-style multi-agent harness director for Claude Code
+${c5.dim("https://github.com/bjcho4141/harness-bujang")}
 
-${c4.bold("Usage:")}
-  npx harness-bujang ${c4.cyan("init")}     [options]    Install the harness into a project
-  npx harness-bujang ${c4.cyan("status")}   [options]    Verify the harness install
-  npx harness-bujang ${c4.cyan("migrate")}  --to=<sqlite|supabase>  Move chat data between backends
+${c5.bold("Usage:")}
+  npx harness-bujang ${c5.cyan("init")}     [options]    Install the harness into a project
+  npx harness-bujang ${c5.cyan("status")}   [options]    Verify the harness install
+  npx harness-bujang ${c5.cyan("chat")}     [options]    Open the standalone chat-room viewer (any stack)
+  npx harness-bujang ${c5.cyan("migrate")}  --to=<sqlite|supabase>  Move chat data between backends
 
-${c4.bold("Options for init:")}
+${c5.bold("Options for init:")}
   --lang=<ko|en>           Agent language (default: en)
   --chat=<sqlite|supabase> Chat-room backend (default: sqlite \u2014 local file, no setup)
   --commit-chat            Don't gitignore .harness/ (for solo cross-machine sync via git)
@@ -923,31 +1472,37 @@ ${c4.bold("Options for init:")}
   --no-learning-log        Skip learning log seed
   --yes, -y                Skip prompts and overwrite (non-interactive \u2014 for CI / scripts)
 
-${c4.dim("Run without --yes for an interactive setup (prompts for language, backend, etc.).")}
+${c5.dim("Run without --yes for an interactive setup (prompts for language, backend, etc.).")}
+
+${c5.bold("Options for chat:")}
+  --target=<path>          Project root (default: cwd)
+  --port=<number>          Preferred port (default: 7777, falls forward if busy)
+  --no-open                Don't auto-open the browser
+  --create                 Create an empty chat DB + schema if none exists yet
 
-${c4.bold("Options for migrate:")}
+${c5.bold("Options for migrate:")}
   --to=<sqlite|supabase>   Required \u2014 target backend
   --target=<path>          Project root (default: cwd)
   --yes, -y                Skip confirmation
 
-${c4.bold("Examples:")}
-  ${c4.dim("# Install Korean Bujang persona, SQLite chat (default \u2014 zero setup)")}
+${c5.bold("Examples:")}
+  ${c5.dim("# Install Korean Bujang persona, SQLite chat (default \u2014 zero setup)")}
   npx harness-bujang init --lang=ko
 
-  ${c4.dim("# Solo project: localhost-only, no cloud \u2014 done")}
-  npx harness-bujang init && npm run dev
-  ${c4.dim("# Then: open localhost:3000/admin/harness")}
+  ${c5.dim("# Open the standalone chat-room \u2014 works on ANY stack (Next.js, Rails, Django, \u2026)")}
+  npx harness-bujang chat
+  ${c5.dim("# \u2192 opens http://localhost:7777 in your browser")}
 
-  ${c4.dim("# Solo, multiple machines \u2014 sync chat history via git")}
+  ${c5.dim("# Solo, multiple machines \u2014 sync chat history via git")}
   npx harness-bujang init --commit-chat
 
-  ${c4.dim("# Production project with team sharing \u2014 Supabase backend")}
+  ${c5.dim("# Production project with team sharing \u2014 Supabase backend")}
   npx harness-bujang init --chat=supabase
 
-  ${c4.dim("# Started solo, now scaling up \u2014 promote to cloud")}
+  ${c5.dim("# Started solo, now scaling up \u2014 promote to cloud")}
   bujang migrate --to=supabase
 
-  ${c4.dim("# Going back to solo / archive \u2014 pull cloud data into local SQLite")}
+  ${c5.dim("# Going back to solo / archive \u2014 pull cloud data into local SQLite")}
   bujang migrate --to=sqlite
 `;
 async function main() {
@@ -960,12 +1515,15 @@ async function main() {
     case "status":
       await runStatus(args.slice(1));
       break;
+    case "chat":
+      await runChat(args.slice(1));
+      break;
     case "migrate":
       await runMigrate(args.slice(1));
       break;
     case "--version":
     case "-v":
-      console.log("0.1.0");
+      console.log("0.3.0");
       break;
     case "--help":
     case "-h":
@@ -973,13 +1531,13 @@ async function main() {
       console.log(HELP);
       break;
     default:
-      console.error(c4.red(`Unknown command: ${command}`));
+      console.error(c5.red(`Unknown command: ${command}`));
       console.log(HELP);
       process.exit(1);
   }
 }
 main().catch((err) => {
-  console.error(c4.red(`
+  console.error(c5.red(`
 \u2716 ${err.message}`));
   if (process.env.DEBUG) console.error(err.stack);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "harness-bujang",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Install the Harness-Bujang multi-agent harness into any project — Director, 7 specialist teams, real-time chat-room UI. Korean and English personas. Works with Claude Code, Cursor, Cline, Aider, or any tool that reads .claude/agents/.",
   "keywords": [
     "claude-code",
@@ -43,6 +43,7 @@
     "build": "npm run prepare-templates && tsup src/index.ts --format esm --target node20 --clean --shims",
     "dev": "tsx src/index.ts",
     "typecheck": "tsc --noEmit",
+    "sandbox-test": "bash scripts/sandbox-test.sh",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {