eojeon-cli 0.0.0-stage → 0.2.0

package/public/app.js

@@ -0,0 +1,405 @@
+import { Court, W, H } from './scene.js';
+import { runDemo } from './demo.js';
+import { titleOf as typeTitle } from './court-types.js';
+
+const $ = (id) => document.getElementById(id);
+const params = new URLSearchParams(location.search);
+
+const [config, info] = await Promise.all([
+  fetch('/api/config').then((r) => r.json()),
+  fetch('/api/info').then((r) => r.json()).catch(() => ({ demo: true })),
+]);
+const DEMO = info.demo || params.get('demo') === '1';
+
+// ---------- branding from config ----------
+document.title = config.name || document.title;
+$('appName').textContent = config.name || '';
+$('appSub').textContent = config.tagline || config.subtitle || '';
+const root = document.documentElement.style;
+for (const [k, v] of Object.entries(config.palette || {})) if (!k.startsWith('_')) root.setProperty(`--${k}`, v);
+for (const k of ['hong', 'cheong', 'nok', 'inju', 'paper']) if (config.pixel?.[k]) root.setProperty(`--px-${k}`, config.pixel[k]);
+
+// ---------- terminal ----------
+// D2Coding first: its Hangul is exactly 2 cells wide, so Korean text doesn't drift.
+// xterm measures the cell size once, so wait for the font before opening the terminal.
+await Promise.race([document.fonts.load('13px "D2Coding"', '가A').catch(() => {}), new Promise((r) => setTimeout(r, 2500))]);
+const term = new window.Terminal({
+  fontFamily: '"D2Coding", Menlo, Monaco, Consolas, "Noto Sans Mono CJK KR", monospace',
+  fontSize: 13,
+  lineHeight: 1.1,
+  cursorBlink: true,
+  scrollback: 5000,
+  allowProposedApi: true,
+  macOptionIsMeta: true,
+  theme: {
+    background: config.palette.paper,
+    foreground: config.palette.ink,
+    cursor: config.palette.hwang,
+    selectionBackground: '#3A3F4A',
+  },
+});
+const fit = new window.FitAddon.FitAddon();
+term.loadAddon(fit);
+term.open($('term'));
+
+let ws = null;
+let running = false;
+const send = (m) => ws && ws.readyState === 1 && ws.send(JSON.stringify(m));
+const sendInput = (d) => (DEMO ? null : send({ t: 'input', d }));
+
+function doFit() {
+  try {
+    fit.fit();
+    send({ t: 'resize', cols: term.cols, rows: term.rows });
+  } catch {}
+}
+new ResizeObserver(() => doFit()).observe($('term'));
+term.onData((d) => {
+  sendInput(d);
+  // answered the permission dialog directly in the terminal: Esc = refused
+  if (d === '\x1b' && court.petition && !court.petition.closed && !court.petition.ext) {
+    court.closePetition('no');
+    addLog({ type: 'Verdict', time: Date.now(), verdict: 'no' });
+  }
+});
+
+// ---------- stage scaling (integer when big enough, so pixels stay square) ----------
+const stageWrap = document.querySelector('.stage-wrap');
+const stage = $('stage');
+const canvas = $('scene');
+const overlay = $('overlay');
+function scaleStage() {
+  const r = stageWrap.getBoundingClientRect();
+  let s = Math.min(r.width / W, r.height / H);
+  if (s >= 2) s = Math.floor(s);
+  s = Math.max(0.5, s);
+  stage.style.width = `${W * s}px`;
+  stage.style.height = `${H * s}px`;
+  canvas.style.width = `${W * s}px`;
+  canvas.style.height = `${H * s}px`;
+  overlay.style.transform = `scale(${s})`;
+  overlay.style.transformOrigin = '0 0';
+}
+new ResizeObserver(scaleStage).observe(stageWrap);
+scaleStage();
+
+// ---------- court ----------
+const court = new Court({
+  canvas,
+  overlay,
+  config,
+  onPetitionAction: (kind) => {
+    const keys = config.permissionKeys || {};
+    const k = keys[kind];
+    if (k) sendInput(k);
+    addLog({ type: 'Verdict', time: Date.now(), verdict: kind });
+    term.focus();
+  },
+});
+
+// ---------- 사관 일지 (event log) ----------
+const logEl = $('log');
+const ph = config.phrases || {};
+const officials = config.officials || {};
+const titleOf = (t) => typeTitle(t, config);
+const fmt = (tpl, v) => String(tpl || '').replace(/\{(\w+)\}/g, (_, k) => (v[k] == null ? '' : v[k]));
+const byTool = new Map();
+let lastAsk = 0;
+
+function logLine(ev) {
+  const who = titleOf(ev.agentType);
+  switch (ev.type) {
+    case 'PtyStart': return ['sys', '·', `claude 를 띄웠습니다 · ${ev.folder} (${{ new: '새 조회', continue: '이어서', resume: '세션 이어받기' }[ev.mode] || ev.mode})`];
+    case 'PtyExit': return ['sys', '·', `claude 가 끝났습니다 (code ${ev.code})`];
+    case 'SessionStart':
+      if (ev.source === 'clear') return ['sys', '·', '조정을 새로 엽니다 (/clear)'];
+      if (ev.source === 'compact') return ['sys', '·', '기록을 줄였사옵니다 (compact)'];
+      return ['sys', '開', fmt(ev.source === 'resume' || ev.source === 'fork' ? ph.sessionResume : ph.sessionStart, { folder: ev.folder || '' })];
+    case 'UserPromptSubmit': return ['decree', '敎', `교지: ${ev.prompt || ''}`];
+    case 'PreToolUse': return ['tool', '筆', `${who} · ${ev.tool}${ev.summary ? ': ' + ev.summary : ''}`];
+    case 'PostToolUseFailure': return ['fail', '×', `${who} · ${fmt(ph.failed, { tool: ev.tool })}`];
+    case 'PermissionRequest': lastAsk = ev.time; return ['ask', '?', `${who} · ${ph.permission} — ${ev.tool}${ev.summary ? ': ' + ev.summary : ''}`];
+    case 'PermissionDenied': return ['fail', '×', `${who} · ${fmt(ph.denied, { tool: ev.tool })}`];
+    case 'Notification':
+      if (ev.kind === 'permission_prompt') return ev.time - lastAsk < 15000 ? null : ['ask', '?', `${ph.permission} — ${ev.message || ''}`];
+      if (ev.kind === 'idle_prompt') return ['sys', '…', ph.idle];
+      return ['sys', '·', ev.message || ev.kind];
+    case 'SubagentStart': return ['sub', '入', `${titleOf(ev.agentType)} 입궐 (${ev.agentType})`];
+    case 'Agents': return ['sys', '六', ev.text];
+    case 'SubagentStop': return ['sub', '出', `${titleOf(ev.agentType)} 상소: ${ev.report || '맡은 일 마침'}`];
+    case 'Stop': return ['stop', '完', ph.stop];
+    case 'StopFailure': return ['fail', '×', '일을 마치지 못했사옵니다'];
+    case 'SessionEnd': return ['sys', '退', `${ph.sessionEnd}${ev.reason ? ` (${ev.reason})` : ''}`];
+    case 'Verdict': {
+      const s = config.stamps?.[ev.verdict] || {};
+      return ['ask', ev.verdict === 'ok' ? '○' : ev.verdict === 'no' ? '×' : '…', `판정: ${s.full || ev.verdict}`];
+    }
+    default: return null;
+  }
+}
+
+function addLog(ev) {
+  if (ev.type === 'PostToolUse') {
+    const li = ev.toolUseId && byTool.get(ev.toolUseId);
+    if (li && !li.querySelector('.ok')) {
+      const s = document.createElement('span');
+      s.className = 'ok';
+      s.textContent = ev.ms != null ? `✓ ${ev.ms < 1000 ? ev.ms + 'ms' : (ev.ms / 1000).toFixed(1) + 's'}` : '✓';
+      li.querySelector('.tx').appendChild(s);
+    }
+    return;
+  }
+  const line = logLine(ev);
+  if (!line) return;
+  const [kind, icon, text] = line;
+  const li = document.createElement('li');
+  li.className = `k-${kind}`;
+  const t = document.createElement('time');
+  const d = new Date(ev.time || Date.now());
+  t.textContent = [d.getHours(), d.getMinutes(), d.getSeconds()].map((n) => String(n).padStart(2, '0')).join(':');
+  const ic = document.createElement('span');
+  ic.className = 'ic';
+  ic.textContent = icon;
+  const tx = document.createElement('span');
+  tx.className = 'tx';
+  // sessions outside the court (eojeon watch) carry their folder name
+  tx.textContent = ev.ext ? `⇢ ${ev.folder || '바깥'} · ${text}` : text;
+  li.append(t, ic, tx);
+  if (ev.toolUseId) byTool.set(ev.toolUseId, li);
+  const atBottom = logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 30;
+  logEl.appendChild(li);
+  while (logEl.children.length > 400) logEl.firstChild.remove();
+  if (atBottom) logEl.scrollTop = logEl.scrollHeight;
+}
+
+function onEvent(ev, opts = {}) {
+  addLog(ev);
+  court.handle(ev, opts);
+  if (ev.ext && !running && !DEMO) {
+    $('termHintMain').innerHTML = `바깥 터미널의 Claude Code 를 보는 중입니다 (<b>${escapeHtml(ev.folder || '')}</b>) — 보기 전용`;
+  }
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+}
+
+// ---------- launch controls ----------
+const cwdIn = $('cwd');
+const sessSel = $('session');
+const statusEl = $('status');
+const hint = $('termHint');
+function setStatus(state, text) {
+  statusEl.dataset.state = state;
+  statusEl.textContent = text;
+}
+let lastCwd = '';
+try { lastCwd = localStorage.getItem('eojeon.cwd') || ''; } catch {}
+cwdIn.value = DEMO ? '~/projects/my-app' : lastCwd || info.defaultCwd || '';
+
+function fmtTime(ms) {
+  const d = new Date(ms);
+  const p = (n) => String(n).padStart(2, '0');
+  return `${p(d.getMonth() + 1)}/${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+async function loadSessions() {
+  const keep = sessSel.value;
+  sessSel.innerHTML = '';
+  const add = (v, label, parent = sessSel) => {
+    const o = document.createElement('option');
+    o.value = v;
+    o.textContent = label;
+    parent.appendChild(o);
+    return o;
+  };
+  add('new', '새 조회 (새 세션)');
+  add('continue', '이어서 — 가장 최근 세션 (--continue)');
+  add('resume:', '세션 고르기 — Claude Code 목록 (/resume)');
+  if (DEMO) return;
+  try {
+    const r = await fetch(`/api/sessions?cwd=${encodeURIComponent(cwdIn.value.trim())}`).then((x) => x.json());
+    if (r.sessions?.length) {
+      const g = document.createElement('optgroup');
+      g.label = `지난 조회 ${r.sessions.length}개 (최신순)`;
+      for (const s of r.sessions) add(`resume:${s.id}`, `${fmtTime(s.mtime)} · ${s.title ? `[${s.title}] ` : ''}${s.first || s.id.slice(0, 8)}`, g);
+      sessSel.appendChild(g);
+    }
+  } catch {}
+  if ([...sessSel.options].some((o) => o.value === keep)) sessSel.value = keep;
+}
+let sessTimer;
+cwdIn.addEventListener('input', () => {
+  clearTimeout(sessTimer);
+  sessTimer = setTimeout(loadSessions, 350);
+});
+loadSessions();
+
+// ---------- permission mode ----------
+const pmodeSel = $('pmode');
+try { pmodeSel.value = localStorage.getItem('eojeon.pmode') || ''; } catch {}
+if (![...pmodeSel.options].some((o) => o.value === pmodeSel.value)) pmodeSel.value = '';
+pmodeSel.addEventListener('change', () => {
+  try { localStorage.setItem('eojeon.pmode', pmodeSel.value); } catch {}
+});
+
+// ---------- 육조 들이기 (offer the default subagents for this folder, once) ----------
+const YUKJO = ['ijo', 'hojo', 'yejo', 'byeongjo', 'hyeongjo', 'gongjo'];
+const askedKey = (cwd) => `eojeon.yukjo.never:${cwd}`;
+async function offerYukjo(cwd) {
+  let st;
+  try {
+    st = await fetch(`/api/agents?cwd=${encodeURIComponent(cwd)}`).then((r) => r.json());
+  } catch {
+    return;
+  }
+  if (!st || st.error || st.folderMissing || !st.missing?.length) return;
+  try { if (localStorage.getItem(askedKey(st.cwd))) return; } catch {}
+  const dlg = $('yukjoDlg');
+  $('yukjoWhere').textContent = st.dir;
+  $('yukjoMissing').textContent = `${st.missing.length}명`;
+  const list = $('yukjoList');
+  list.innerHTML = '';
+  for (const k of YUKJO) {
+    const li = document.createElement('li');
+    const d = officials[k] || {};
+    li.textContent = `${d.title || k} (${k}) — ${d.role || ''}`;
+    if (!st.missing.includes(k)) {
+      li.className = 'have';
+      li.title = '이미 있음 · 그대로 둡니다';
+    }
+    list.appendChild(li);
+  }
+  $('studioChk').checked = false;
+  const answer = await new Promise((resolve) => {
+    dlg.addEventListener('close', () => resolve(dlg.returnValue), { once: true });
+    dlg.showModal();
+  });
+  if (answer === 'never') {
+    try { localStorage.setItem(askedKey(st.cwd), '1'); } catch {}
+    return;
+  }
+  if (answer !== 'yes') return;
+  const pack = $('studioChk').checked ? 'all' : 'yukjo';
+  try {
+    const r = await fetch('/api/agents/install', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ cwd: st.cwd, pack }),
+    }).then((x) => x.json());
+    if (r.error) throw new Error(r.error);
+    const text = `육조를 들였사옵니다 · 새로 ${r.copied.length}명${r.skipped.length ? ` · 이미 있어 건너뜀 ${r.skipped.length}명(${r.skipped.join(', ')})` : ''}`;
+    addLog({ type: 'Agents', time: Date.now(), text });
+    court.showToast(text, 4200);
+  } catch (err) {
+    setStatus('error', `육조 들이기 실패: ${err.message}`);
+  }
+}
+
+$('launch').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  if (DEMO) return;
+  const v = sessSel.value;
+  const cwd = cwdIn.value.trim();
+  if (running && !confirm('지금 조회를 끝내고 새로 시작할까요?')) return;
+  try { localStorage.setItem('eojeon.cwd', cwd); } catch {}
+  await offerYukjo(cwd);
+  let mode = 'new';
+  let sessionId = '';
+  if (v === 'continue') mode = 'continue';
+  else if (v.startsWith('resume:')) {
+    mode = 'resume';
+    sessionId = v.slice(7);
+  }
+  term.reset();
+  court.reset();
+  doFit();
+  send({ t: 'start', cwd, mode, sessionId, permissionMode: pmodeSel.value });
+  term.focus();
+});
+$('stopBtn').addEventListener('click', () => {
+  if (!DEMO && running && confirm('claude 를 끝낼까요? (진행 중인 일은 멈춥니다)')) send({ t: 'stop' });
+});
+
+// ---------- decree input (sent straight into the PTY) ----------
+const decreeIn = $('decreeInput');
+$('decreeForm').addEventListener('submit', (e) => {
+  e.preventDefault();
+  const text = decreeIn.value;
+  if (!text.trim()) return;
+  if (!running && !DEMO) {
+    setStatus('error', '먼저 입궐(시작)하세요');
+    return;
+  }
+  // text first, Enter a beat later so Claude Code doesn't treat it as a pasted newline
+  sendInput(text);
+  setTimeout(() => sendInput('\r'), 60);
+  decreeIn.value = '';
+  term.focus();
+});
+decreeIn.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && e.isComposing) e.preventDefault(); // Korean IME: finish composition first
+});
+
+// ---------- connection ----------
+function connect() {
+  ws = new WebSocket(`ws://${location.host}/`);
+  ws.onopen = () => doFit();
+  ws.onmessage = (m) => {
+    const msg = JSON.parse(m.data);
+    switch (msg.t) {
+      case 'hello':
+        running = msg.running;
+        setStatus(running ? 'running' : 'idle', running ? `진행 중 · ${msg.info?.folder || ''}` : '대기');
+        hint.classList.toggle('hidden', running);
+        logEl.innerHTML = '';
+        for (const ev of msg.history || []) onEvent(ev, { replay: true });
+        break;
+      case 'out':
+        hint.classList.add('hidden');
+        term.write(msg.d);
+        break;
+      case 'started':
+        running = true;
+        hint.classList.add('hidden');
+        setStatus('running', `진행 중 · ${msg.info.folder}`);
+        break;
+      case 'exit':
+        running = false;
+        setStatus('idle', `끝남 (code ${msg.code})`);
+        term.write('\r\n\x1b[2m[claude 가 끝났습니다. 위에서 다시 입궐할 수 있습니다]\x1b[0m\r\n');
+        break;
+      case 'event':
+        onEvent(msg.ev);
+        break;
+      case 'error':
+        setStatus('error', msg.message);
+        term.write(`\r\n\x1b[31m${msg.message}\x1b[0m\r\n`);
+        break;
+      default:
+        break;
+    }
+  };
+  ws.onclose = () => {
+    setStatus('error', '서버 연결 끊김 — 다시 연결 중');
+    setTimeout(connect, 1500);
+  };
+}
+
+if (DEMO) {
+  setStatus('demo', '데모 재생 중 (claude 없음)');
+  hint.classList.add('hidden');
+  $('startBtn').disabled = true;
+  $('stopBtn').disabled = true;
+  runDemo({
+    term,
+    onEvent,
+    court,
+    speed: Number(params.get('speed')) || 1,
+    stopAt: params.has('stop') ? Number(params.get('stop')) : null,
+    loop: !params.has('stop'),
+  });
+} else {
+  if (!info.claudeFound) setStatus('error', 'claude 를 찾지 못했습니다 — Claude Code 를 설치하세요');
+  if (info.remote) $('footLocal').textContent = '다른 기기 접속 켜짐 (--host) · 접속 키가 있는 기기만 들어올 수 있습니다.';
+  connect();
+}

package/public/court-types.js

@@ -0,0 +1,33 @@
+// Pure helpers (no DOM) shared by the browser and the tests:
+// map a Claude Code agent_type to an entry in court.config.json.
+
+// Plugin agents arrive namespaced, e.g. "eojeon:ijo" or "my-plugin:review:security".
+// Exact keys win; otherwise the part after the last colon is tried.
+export function resolveAgentType(type, cfg) {
+  const t = typeof type === 'string' ? type : '';
+  const team = (cfg && cfg.officials) || {};
+  const guests = (cfg && cfg.guests) || {};
+  const has = (k) => k && !k.startsWith('_') && (Object.hasOwn(team, k) || Object.hasOwn(guests, k));
+  if (has(t)) return t;
+  if (t.includes(':')) {
+    const tail = t.slice(t.lastIndexOf(':') + 1);
+    if (has(tail)) return tail;
+  }
+  return t;
+}
+
+// -> { key, def, kind: 'main' | 'seat' | 'guest' | 'unknown' }
+export function lookupOfficial(type, cfg) {
+  const team = (cfg && cfg.officials) || {};
+  const guests = (cfg && cfg.guests) || {};
+  if (!type) return { key: 'main', def: team.main, kind: 'main' };
+  const key = resolveAgentType(type, cfg);
+  if (key !== 'main' && Object.hasOwn(team, key) && !key.startsWith('_')) return { key, def: team[key], kind: 'seat' };
+  if (Object.hasOwn(guests, key) && key !== '*') return { key, def: guests[key], kind: 'guest' };
+  const any = guests['*'] || { title: '관리', role: '맡은 일을 한다', robe: 'nok' };
+  return { key, def: { ...any, title: `${any.title} · ${type}` }, kind: 'unknown' };
+}
+
+export function titleOf(type, cfg) {
+  return lookupOfficial(type, cfg).def?.title || String(type || '');
+}

package/public/demo.js

@@ -0,0 +1,100 @@
+// Demo mode: replays a scripted session (fake hook events + a fake terminal
+// transcript) without running claude. Used for screenshots and promo videos.
+// URL params: ?demo=1  [&speed=2]  [&stop=<seconds>  → play up to that moment, then hold]
+
+const ESC = '\x1b[';
+const dim = (s) => `${ESC}2m${s}${ESC}0m`;
+const bold = (s) => `${ESC}1m${s}${ESC}0m`;
+const orange = (s) => `${ESC}38;5;209m${s}${ESC}0m`;
+const green = (s) => `${ESC}32m${s}${ESC}0m`;
+const red = (s) => `${ESC}31m${s}${ESC}0m`;
+const nl = '\r\n';
+
+const SID = 'demo-0000-4a1c-9d2e-000000000001';
+const base = { session: SID, folder: 'my-app' };
+
+const BANNER =
+  dim('[데모 모드 — 실제 claude 가 아니라 녹화용 재생 화면입니다]') + nl + nl +
+  orange(' ▐▛███▜▌') + '   ' + bold('Claude Code') + nl +
+  orange('▝▜█████▛▘') + '  ' + dim('~/projects/my-app') + nl +
+  orange('  ▘▘ ▝▝') + nl + nl;
+
+const PROMPT_LINE = (s) => `${dim('>')} ${s}${nl}${nl}`;
+
+// [time (s), action]
+export const SCRIPT = [
+  [0.0, { out: BANNER }],
+  [0.2, { ev: { type: 'SessionStart', source: 'startup', model: 'claude-opus-5-5' } }],
+  [2.0, { out: PROMPT_LINE('로그인 화면에 비밀번호 보기 버튼 넣고, 문구 다듬고, 테스트 돌려 줘') }],
+  [2.1, { ev: { type: 'UserPromptSubmit', prompt: '로그인 화면에 비밀번호 보기 버튼 넣고, 문구 다듬고, 테스트 돌려 줘', slash: false } }],
+  [4.6, { out: `${orange('⏺')} ${bold('Read')}(src/screens/Login.jsx)${nl}` }],
+  [4.6, { ev: { type: 'PreToolUse', tool: 'Read', summary: 'src/screens/Login.jsx', toolUseId: 't1' } }],
+  [5.6, { ev: { type: 'PostToolUse', tool: 'Read', summary: 'src/screens/Login.jsx', toolUseId: 't1', ms: 14 } }],
+  [5.7, { out: `  ${dim('⎿  Read 142 lines')}${nl}${nl}` }],
+  [6.2, { out: `${orange('⏺')} ${bold('Task')}(gongjo · 비밀번호 보기 버튼)${nl}` }],
+  [6.2, { ev: { type: 'PreToolUse', tool: 'Task', summary: 'gongjo · 비밀번호 보기 버튼', spawnType: 'gongjo', toolUseId: 't2' } }],
+  [6.5, { ev: { type: 'SubagentStart', agentId: 'a1', agentType: 'gongjo' } }],
+  [7.0, { out: `${orange('⏺')} ${bold('Task')}(hyeongjo · 로그인 화면 리뷰)${nl}` }],
+  [7.0, { ev: { type: 'PreToolUse', tool: 'Task', summary: 'hyeongjo · 로그인 화면 리뷰', spawnType: 'hyeongjo', toolUseId: 't3' } }],
+  [7.3, { ev: { type: 'SubagentStart', agentId: 'a2', agentType: 'hyeongjo' } }],
+  [12.0, { ev: { type: 'PreToolUse', tool: 'Edit', summary: 'src/screens/Login.jsx', toolUseId: 't4', agentId: 'a1', agentType: 'gongjo' } }],
+  [12.0, { out: `  ${dim('⎿')}  ${bold('Edit')}(src/screens/Login.jsx)${nl}` }],
+  [13.0, { ev: { type: 'PreToolUse', tool: 'Grep', summary: '"로그인" · src', toolUseId: 't5', agentId: 'a2', agentType: 'hyeongjo' } }],
+  [13.0, { out: `  ${dim('⎿')}  ${bold('Grep')}("로그인", src)${nl}` }],
+  [8.0, { out: `${orange('⏺')} ${bold('Task')}(eojeon:yejo · 변경 기록)${nl}` }],
+  [8.0, { ev: { type: 'PreToolUse', tool: 'Task', summary: 'eojeon:yejo · 변경 기록', spawnType: 'eojeon:yejo', toolUseId: 't9' } }],
+  [8.3, { ev: { type: 'SubagentStart', agentId: 'a3', agentType: 'eojeon:yejo' } }],
+  [14.2, { ev: { type: 'PreToolUse', tool: 'Edit', summary: 'CHANGELOG.md', toolUseId: 't10', agentId: 'a3', agentType: 'eojeon:yejo' } }],
+  [13.6, { ev: { type: 'PreToolUse', tool: 'Bash', summary: 'npx eslint src/screens', toolUseId: 't6' } }],
+  [16.5, { ev: { type: 'PostToolUseFailure', tool: 'Bash', summary: 'npx eslint src/screens', toolUseId: 't6' } }],
+  [16.5, { out: `${orange('⏺')} ${bold('Bash')}(npx eslint src/screens)${nl}  ${red('⎿  Error: 1 problem (1 error)')}${nl}` }],
+  [17.0, { ev: { type: 'PostToolUse', tool: 'Grep', summary: '"로그인" · src', toolUseId: 't5', agentId: 'a2', agentType: 'hyeongjo', ms: 40 } }],
+  [17.5, { ev: { type: 'PostToolUse', tool: 'Edit', summary: 'src/screens/Login.jsx', toolUseId: 't4', agentId: 'a1', agentType: 'gongjo', ms: 22 } }],
+  [18.5, { ev: { type: 'SubagentStop', agentId: 'a1', agentType: 'gongjo', report: '보기 버튼 넣고 접근성 라벨 달았습니다' } }],
+  [18.6, { out: `  ${green('⎿  Done')} ${dim('(gongjo · 3 tool uses)')}${nl}` }],
+  [18.0, { ev: { type: 'PostToolUse', tool: 'Edit', summary: 'CHANGELOG.md', toolUseId: 't10', agentId: 'a3', agentType: 'eojeon:yejo', ms: 18 } }],
+  [20.2, { ev: { type: 'SubagentStop', agentId: 'a3', agentType: 'eojeon:yejo', report: 'CHANGELOG 에 한 줄 적었습니다' } }],
+  [19.2, { ev: { type: 'SubagentStop', agentId: 'a2', agentType: 'hyeongjo', report: '막을 문제 없음 · 사소한 것 1건' } }],
+  [19.3, { out: `  ${green('⎿  Done')} ${dim('(hyeongjo · 2 tool uses)')}${nl}${nl}` }],
+  [26.0, { ev: { type: 'PreToolUse', tool: 'Bash', summary: 'npm test', toolUseId: 't7' } }],
+  [26.1, { ev: { type: 'PermissionRequest', tool: 'Bash', summary: 'npm test' } }],
+  [26.1, {
+    out:
+      `${orange('⏺')} ${bold('Bash')}(npm test)${nl}${nl}` +
+      ` ${bold('Bash command')}${nl}${nl}   npm test${nl}   ${dim('Run the test suite')}${nl}${nl}` +
+      ` Do you want to proceed?${nl} ${orange('❯')} 1. Yes${nl}   2. Yes, and don't ask again for ${bold('npm test')} commands${nl}   3. No, and tell Claude what to do differently ${dim('(esc)')}${nl}${nl}`,
+  }],
+  [26.8, { ev: { type: 'Notification', kind: 'permission_prompt', message: 'Claude needs your permission to use Bash' } }],
+  [32.0, { press: 'ok' }],
+  [32.4, { out: `  ${dim('⎿')}  ${green('Tests: 24 passed, 24 total')}${nl}${nl}` }],
+  [33.0, { ev: { type: 'PostToolUse', tool: 'Bash', summary: 'npm test', toolUseId: 't7', ms: 2140 } }],
+  [33.6, { ev: { type: 'PreToolUse', tool: 'Bash', summary: 'git diff --stat', toolUseId: 't8' } }],
+  [34.6, { ev: { type: 'PostToolUse', tool: 'Bash', summary: 'git diff --stat', toolUseId: 't8', ms: 30 } }],
+  [34.6, { out: `${orange('⏺')} ${bold('Bash')}(git diff --stat)${nl}  ${dim('⎿  2 files changed, 38 insertions(+), 6 deletions(-)')}${nl}${nl}` }],
+  [35.5, { out: `${orange('⏺')} 비밀번호 보기 버튼을 넣고 문구를 다듬었습니다. 테스트 24개 모두 통과했습니다.${nl}${nl}` }],
+  [35.6, { ev: { type: 'Stop' } }],
+  [42.0, { ev: { type: 'Notification', kind: 'idle_prompt', message: 'Claude is waiting for your input' } }],
+  [48.0, { end: true }],
+];
+
+export function runDemo({ term, onEvent, court, speed = 1, stopAt = null, loop = true }) {
+  let timers = [];
+  const play = () => {
+    timers.forEach(clearTimeout);
+    timers = [];
+    term.reset();
+    court.reset();
+    for (const [t, a] of SCRIPT) {
+      if (stopAt != null && t > stopAt) continue;
+      timers.push(
+        setTimeout(() => {
+          if (a.out) term.write(a.out);
+          if (a.ev) onEvent({ ...base, ...a.ev, time: Date.now() });
+          if (a.press) court.petitionAction(a.press);
+          if (a.end && loop) play();
+        }, (t * 1000) / speed),
+      );
+    }
+  };
+  play();
+}

package/public/fonts/LICENSE-D2Coding.txt

@@ -0,0 +1,97 @@
+Copyright (c) 2015, NAVER Corporation (https://www.navercorp.com),
+with Reserved Font Name D2Coding.
+
+Copyright (c) 2015, NAVER Corporation (https://www.navercorp.com),
+with Reserved Font Name D2Coding-Bold.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.