eojeon-cli 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project are documented here. Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), versioning: [SemVer](https://semver.org/).
 
+## [0.2.0] - 2026-10-24
+
+Fixes from the first day of use.
+
+### Added
+- `eojeon watch` / `eojeon watch --off`: show Claude Code sessions running outside the court (other terminals, IDEs), watch-only. Hooks go into `~/.claude/settings.json` (backup kept, only our entries are removed on `--off`); the hook copy lives in `~/.eojeon/hook/` and finds the court through `~/.eojeon/runtime.json`.
+- `--host <addr>` (and `--new-key`): open the court to other devices, e.g. over Tailscale. Requires an access key printed at start (`?key=…` once, then an HttpOnly cookie for 30 days). The terminal still answers on 127.0.0.1 without a key.
+- 전령 (`jeollyeong`) office for an SNS-posting agent.
+
+### Changed
+- One input on computers: the terminal. The 교지 쓰기 bar now shows only on touch screens.
+- Petitions from outside sessions show "그 터미널에서 답하소서" instead of stamps; their log lines are tagged with the folder.
+
 ## [0.1.0] - 2026-10-24
 
 First public version.
@@ -22,4 +35,5 @@ First public version.
 - Hook payloads trimmed and secrets masked before leaving the hook process.
 - `scripts/check-publish.js` blocks publishing local paths, e-mail addresses or token-shaped strings.
 
+[0.2.0]: https://github.com/hiio420pr/eojeon/releases/tag/v0.2.0
 [0.1.0]: https://github.com/hiio420pr/eojeon/releases/tag/v0.1.0

package/README.md

@@ -61,6 +61,9 @@ npm start          # = node cli/eojeon.js
 | `--port <n>` | 포트 (기본 4747, 사용 중이면 다음 빈 포트) |
 | `--cwd <폴더>` | 시작 화면의 기본 작업 폴더 |
 | `--no-open` | 브라우저를 열지 않음 |
+| `eojeon watch` / `eojeon watch --off` | 어전 밖(다른 터미널·IDE)에서 쓰는 Claude Code 도 화면에 보이게 / 끄기. 아래 '이미 쓰던 Claude Code 보기' |
+| `--host <주소>` | 다른 기기(Tailscale·같은 와이파이)에서 접속 허용. 접속 키 필요. 아래 '다른 기기에서 보기' |
+| `--new-key` | `--host` 와 함께: 접속 키 새로 만들기(예전 주소는 막힘) |
 | `--help`, `--version` | 도움말, 버전 |
 
 `COURT_CLAUDE_BIN=/path/to/claude` 로 다른 claude 실행 파일을 쓸 수 있습니다.
@@ -106,7 +109,33 @@ npm start          # = node cli/eojeon.js
 - **시작 옵션**: 작업 폴더, 새 조회 / 이어서(`--continue`) / 지난 세션(`--resume <id>`), 권한 모드(`--permission-mode`: manual · acceptEdits · plan · auto · dontAsk — `bypassPermissions` 는 윤허 장면이 사라지고 위험해서 일부러 뺐습니다).
 - **장면**: 교지 반포 → 임금이 두루마리를 듦 · 도구 사용 → 담당 신하가 붓질하며 말풍선 · 서브에이전트 시작 → 그 관직의 신하가 입궐해 자기 책상으로, 끝나면 영의정께 보고하고 퇴궐 · 권한 요청 → 오른쪽 위에 "윤허를 청하옵니다" 패널과 **윤허 / 불허 / 보류** 도장(터미널 권한 창에 실제 키 전송: 윤허=`1`, 불허=`Esc`) · 실패 → 먹물 얼룩 말풍선.
 - 말풍선은 겹치지 않게 자리를 엇갈리고, 한 번에 3개까지만 보입니다. 나머지는 **사관 일지**(오른쪽)에 모두 남습니다.
-- **교지 쓰기 입력창**: 한글 입력이 편한 별도 입력창. Enter 로 터미널에 그대로 들어갑니다.
+- **입력은 터미널 하나**: 컴퓨터에서는 아래 터미널에 바로 칩니다. 휴대폰·태블릿(터치 화면)에서만 터미널 아래에 **교지 쓰기** 칸이 보입니다(터치 키보드로 터미널에 한글을 치기 어려워서). Enter 하면 터미널에 그대로 들어갑니다.
+
+### 이미 쓰던 Claude Code 보기 (`eojeon watch`)
+
+어전에서 띄운 claude 말고, 원래 쓰던 터미널·IDE 의 Claude Code 도 궁궐에 보이게 합니다.
+
+```bash
+npx eojeon-cli watch        # 한 번만. ~/.claude/settings.json 에 hook 추가(처음 한 번 settings.json.eojeon-backup 백업)
+npx eojeon-cli              # 어전을 켜 두면, 이후 시작하는 모든 Claude Code 세션이 실시간으로 보임
+npx eojeon-cli watch --off  # 끄기(우리 hook 만 지우고 나머지 설정은 그대로)
+```
+
+- **보기 전용**: 바깥 세션의 권한 요청은 패널에 "그 터미널에서 답하소서"로만 뜹니다. 도장이 그 터미널에 키를 보낼 수 없기 때문입니다. 사관 일지에는 `⇢ 폴더 이름` 이 붙습니다.
+- 이미 열려 있는 세션은 `/hooks` 를 한 번 열거나 다시 시작해야 새 hook 을 읽습니다.
+- 어전이 꺼져 있으면 hook 은 아무것도 하지 않고 바로 끝납니다. hook 파일은 `~/.eojeon/hook/` 에 복사해 두고 씁니다(npx 캐시 경로가 바뀌어도 동작).
+
+### 다른 기기에서 보기 (`--host`, Tailscale 등)
+
+```bash
+npx eojeon-cli --host 0.0.0.0     # 또는 Tailscale IP 하나만: --host 100.x.y.z
+```
+
+시작할 때 터미널에 `http://<주소>:4747/?key=…` 가 찍힙니다(Tailscale 주소가 맨 위). **처음 한 번은 키가 붙은 그 주소로 여세요.** 그 뒤에는 기기에 쿠키가 남아 `http://macmini:4747` 처럼 키 없이 열립니다(30일).
+
+- 키가 없으면 403. 키는 `~/.eojeon/remote-key` 에 있고 `--new-key` 로 바꿉니다.
+- **키를 가진 사람은 이 컴퓨터의 claude 터미널을 쓸 수 있습니다.** 공용 와이파이에서는 `0.0.0.0` 대신 Tailscale IP 만 지정하세요.
+- `--host` 없이 켜면 예전처럼 `127.0.0.1` 에만 열립니다.
 
 ## 작동 원리
 
@@ -117,7 +146,7 @@ npm start          # = node cli/eojeon.js
 
 ## 개인정보
 
-- **로컬 전용**: 서버는 `127.0.0.1` 에만 열립니다. 외부로 보내는 요청이 없습니다. xterm 은 npm 패키지에서, 글꼴은 패키지 안에서 직접 서빙합니다(CDN 없음, 추적 없음).
+- **로컬 전용**: 서버는 기본으로 `127.0.0.1` 에만 열립니다(`--host` 를 줄 때만 다른 기기에 열리고, 그때는 접속 키가 필요). 외부로 보내는 요청이 없습니다. xterm 은 npm 패키지에서, 글꼴은 패키지 안에서 직접 서빙합니다(CDN 없음, 추적 없음).
 - **비밀 가림**: 화면으로 가는 이벤트에는 파일 내용·도구 출력·전체 프롬프트가 없습니다. 프롬프트는 앞 60자, 명령은 첫 줄 56자까지, API 키·토큰·비밀번호·개인 키 모양 문자열은 `***` 로 가립니다.
 - **외부 연결 차단**: Host·Origin 을 검사해 다른 웹사이트가 내 터미널에 입력하거나 에이전트 파일을 쓰지 못하게 막고(DNS rebinding·CSWSH 방어), hook 수신은 실행마다 새로 만든 토큰으로만 받습니다.
 - 세션 목록은 `~/.claude/projects/` 기록 파일의 앞뒤만 읽기 전용으로 읽습니다.
@@ -185,7 +214,13 @@ claude plugin validate .
 2. **Claude Code plugin**: `/plugin marketplace add hiio420pr/eojeon` then `/plugin install eojeon@eojeon` (or on 2.1.275+: `/plugin install eojeon --marketplace hiio420pr/eojeon`). Then type `/eojeon` or "open the court". Third-party marketplaces don't auto-update by default: run `/plugin` → Marketplaces → eojeon → Enable auto-update (or `/plugin marketplace update eojeon`). You don't need both npx and the plugin. The plugin also provides the six agents as `eojeon:ijo` … `eojeon:gongjo`.
 3. **git clone**: `git clone https://github.com/hiio420pr/eojeon.git && cd eojeon && npm install && npm start`
 
-CLI: `eojeon [--port n] [--cwd dir] [--no-open]`, `eojeon demo`, `eojeon init [dir] [--pack yukjo|studio|all]` (never overwrites an existing file; prints what was added and skipped), `--help`, `--version`.
+**Watch sessions you already run elsewhere**: `npx eojeon-cli watch` adds hooks to `~/.claude/settings.json` (backup kept) so any Claude Code session (other terminals, IDEs) shows up in the court while it runs — watch-only, answer its prompts in its own terminal. `eojeon watch --off` removes only our hooks.
+
+**Other devices (Tailscale, LAN)**: `npx eojeon-cli --host 0.0.0.0` (or just your Tailscale IP). Open the printed `http://<addr>:4747/?key=…` once; the device keeps a cookie for 30 days. No key, no access. Whoever has the key can use your claude terminal; rotate with `--new-key`. Without `--host` it stays on 127.0.0.1.
+
+On a computer you type into the terminal only; the separate 교지 input appears on touch screens only.
+
+CLI: `eojeon [--port n] [--cwd dir] [--host addr] [--no-open]`, `eojeon watch [--off]`, `eojeon demo`, `eojeon init [dir] [--pack yukjo|studio|all]` (never overwrites an existing file; prints what was added and skipped), `--help`, `--version`.
 
 ### The Six Ministries (육조) — default subagents
 
@@ -206,7 +241,7 @@ Runs your **real** `claude` CLI in a PTY, shown in the browser with xterm.js. Ho
 
 ### Privacy
 
-Local only (binds to 127.0.0.1, no outbound requests, no CDN, no telemetry). Secrets masked before anything reaches the page. Host/Origin checks block other websites from typing into your terminal or writing agent files; hook posts need a per-run token.
+Local only by default (binds to 127.0.0.1; `--host` opens it to other devices behind an access key; no outbound requests, no CDN, no telemetry). Secrets masked before anything reaches the page. Host/Origin checks block other websites from typing into your terminal or writing agent files; hook posts need a per-run token.
 
 ### Requirements
 

package/cli/eojeon.js

@@ -3,6 +3,7 @@
 //   eojeon [--port N] [--cwd DIR] [--no-open]   start the court (server + browser)
 //   eojeon demo [--port N]                      replay a scripted session, no claude needed
 //   eojeon init [DIR] [--pack yukjo|studio|all] copy subagent files into DIR/.claude/agents (never overwrites)
+//   eojeon watch [--off]                        also show Claude Code sessions running outside the court
 //   eojeon --help | --version
 import fs from 'node:fs';
 import path from 'node:path';
@@ -19,15 +20,20 @@ Usage
   eojeon demo [options]         Replay a scripted session (no claude, no usage)
   eojeon init [dir] [--pack P]  Add the Six Ministries (육조) subagents to dir/.claude/agents
                                 P = yukjo (default) | studio | all. Existing files are never overwritten.
+  eojeon watch [--off]          Also show Claude Code sessions you run elsewhere (any terminal or IDE),
+                                watch-only. Adds hooks to ~/.claude/settings.json (backup kept); --off removes them.
 
 Options
   --port <n>     Port to listen on (default 4747; the next free port is used if taken)
   --cwd <dir>    Default project folder shown in the launcher (default: current folder)
+  --host <addr>  Also open to other devices (e.g. 0.0.0.0, or your Tailscale IP). Needs the access key
+                 printed at start; whoever has it can use your claude terminal.
+  --new-key      With --host: make a new access key (old addresses stop working)
   --no-open      Do not open a browser
   -h, --help     Show this help
   -v, --version  Show the version
 
-Everything runs on 127.0.0.1 only. Docs: ${pkg.homepage}`;
+By default everything runs on 127.0.0.1 only. Docs: ${pkg.homepage}`;
 
 function takeOpt(list, name) {
   const i = list.indexOf(name);
@@ -66,6 +72,26 @@ if (cmd === 'init') {
     console.error(`init failed: ${e.message}`);
     process.exit(1);
   }
+} else if (cmd === 'watch') {
+  const watch = await import('../server/watch.js');
+  try {
+    if (argv.includes('--off')) {
+      const r = watch.uninstall();
+      console.log(`어전 · eojeon watch off → removed our hooks from ${r.settingsFile}`);
+    } else if (argv.includes('--status')) {
+      console.log(watch.status() ? 'on' : 'off');
+    } else {
+      const r = watch.install();
+      console.log(`어전 · eojeon watch on → ${r.settingsFile}`);
+      if (r.backup) console.log(`  backup: ${r.backup}`);
+      console.log('  Claude Code sessions started from now on (any terminal, IDE) appear in the court while it runs.');
+      console.log('  Watch-only: answer their permission prompts in their own terminal. Turn off: eojeon watch --off');
+      console.log('  Already-open sessions: run /hooks once (or restart) so they pick up the new hooks.');
+    }
+  } catch (e) {
+    console.error(`watch failed: ${e.message}`);
+    process.exit(1);
+  }
 } else if (cmd === 'start' || cmd === 'demo') {
   const pass = [...argv];
   if (cmd === 'demo' && !pass.includes('--demo')) pass.push('--demo');

package/court.config.json

@@ -216,6 +216,15 @@
       "emblem": "album",
       "side": "west",
       "pack": "studio"
+    },
+    "jeollyeong": {
+      "title": "전령",
+      "short": "전",
+      "role": "완성된 글을 들고 SNS 고을마다 알린다",
+      "robe": "nok",
+      "emblem": "hoof",
+      "side": "west",
+      "pack": "studio"
     }
   },
   "guests": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eojeon-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Claude Code as a Joseon royal court: issue a decree, AI officials (subagents) work, and ask for your royal assent. Pixel-art throne hall around your real Claude Code CLI. Unofficial. · Claude Code를 어전회의로 — 교지를 내리면 AI 신하들이 일하고 윤허를 청한다. 비공식 도구.",
   "keywords": [
     "claude-code",
@@ -41,7 +41,7 @@
     "start": "node cli/eojeon.js",
     "demo": "node cli/eojeon.js demo",
     "test": "node --test",
-    "check": "node --check cli/eojeon.js && node --check server/index.js && node --check server/hook.js && node --check server/sessions.js && node --check server/sanitize.js && node --check server/agents.js",
+    "check": "node --check cli/eojeon.js && node --check server/index.js && node --check server/hook.js && node --check server/sessions.js && node --check server/sanitize.js && node --check server/agents.js && node --check server/watch.js",
     "check-publish": "node scripts/check-publish.js",
     "prepublishOnly": "npm test && node scripts/check-publish.js",
     "postinstall": "node scripts/fix-pty.js",

package/public/app.js

@@ -57,7 +57,7 @@ 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) {
+  if (d === '\x1b' && court.petition && !court.petition.closed && !court.petition.ext) {
     court.closePetition('no');
     addLog({ type: 'Verdict', time: Date.now(), verdict: 'no' });
   }
@@ -162,7 +162,8 @@ function addLog(ev) {
   ic.textContent = icon;
   const tx = document.createElement('span');
   tx.className = 'tx';
-  tx.textContent = text;
+  // 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;
@@ -174,6 +175,12 @@ function addLog(ev) {
 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 ----------
@@ -393,5 +400,6 @@ if (DEMO) {
   });
 } else {
   if (!info.claudeFound) setStatus('error', 'claude 를 찾지 못했습니다 — Claude Code 를 설치하세요');
+  if (info.remote) $('footLocal').textContent = '다른 기기 접속 켜짐 (--host) · 접속 키가 있는 기기만 들어올 수 있습니다.';
   connect();
 }

package/public/index.html

@@ -53,12 +53,13 @@
     <section class="term-wrap" aria-label="Claude Code 터미널">
       <div id="term" class="term"></div>
       <div id="termHint" class="term-hint">
-        <p><b>입궐</b>을 누르면 이 폴더에서 <code>claude</code> 가 뜹니다.</p>
+        <p id="termHintMain"><b>입궐</b>을 누르면 이 폴더에서 <code>claude</code> 가 뜹니다. 명령은 이 터미널에 바로 치세요.</p>
         <p class="muted">슬래시 명령·권한 창·/resume 이 모두 터미널 그대로 동작합니다.</p>
+        <p class="muted">이미 다른 터미널에서 쓰는 Claude Code 도 보려면: <code>npx eojeon-cli watch</code></p>
       </div>
       <form id="decreeForm" class="decree-bar" autocomplete="off">
         <label for="decreeInput" class="decree-label">교지 쓰기</label>
-        <input id="decreeInput" type="text" placeholder="명령을 쓰고 Enter — 터미널에 그대로 들어갑니다" />
+        <input id="decreeInput" type="text" placeholder="휴대폰용 입력칸 — 쓰고 Enter 하면 위 터미널에 들어갑니다" />
         <button class="btn">반포</button>
       </form>
     </section>
@@ -86,7 +87,7 @@
   </dialog>
 
   <footer class="foot">
-    <span>모든 것이 이 컴퓨터 안에서만 돕니다 (127.0.0.1). 외부로 보내는 것 없음.</span>
+    <span id="footLocal">모든 것이 이 컴퓨터 안에서만 돕니다 (127.0.0.1). 외부로 보내는 것 없음.</span>
     <span>Claude Code 비공식 도구 · MIT · 글꼴 Galmuri · D2Coding (SIL OFL 1.1)</span>
   </footer>
 

package/public/scene.js

@@ -544,6 +544,7 @@ export class Court {
       b.addEventListener('click', () => this.petitionAction(k));
     }
     el('div', 'p-hint', this.pet, this.ph.permissionHint || '');
+    el('div', 'p-ext', this.pet, '바깥 터미널의 조회입니다 — 그 터미널에서 답하소서');
     this.pet.title = this.ph.permissionHint || '';
     // stamp + plaque
     this.stamp = el('div', 'stamp', o);
@@ -730,7 +731,7 @@ export class Court {
   }
 
   // ---------- petition (permission request) ----------
-  openPetition({ tool, summary, message, actor }) {
+  openPetition({ tool, summary, message, actor, ext = false }) {
     const who = actor || this.main;
     const head = tool ? fmt(this.ph.petition, { tool, summary: summary || '' }) : `아뢰옵니다 — ${message || '권한이 필요합니다'}`;
     if (this.petition && !this.petition.closed) {
@@ -739,8 +740,10 @@ export class Court {
     } else {
       this.stats.petitions++;
     }
-    this.petition = { tool, summary, since: performance.now(), actor: who, closed: false };
+    this.petition = { tool, summary, since: performance.now(), actor: who, closed: false, ext };
     this.petHead.textContent = head;
+    // a session outside the court (eojeon watch): the stamps can't reach its terminal
+    this.pet.classList.toggle('ext', ext);
     this.pet.classList.add('on');
     this.pet.classList.remove('min');
     who.carry = true;
@@ -749,7 +752,7 @@ export class Court {
   }
 
   petitionAction(kind) {
-    if (!this.petition || this.petition.closed) return;
+    if (!this.petition || this.petition.closed || this.petition.ext) return;
     if (kind === 'hold') {
       this.pet.classList.add('min');
       this.stampVerdict('hold');
@@ -829,7 +832,7 @@ export class Court {
         actor.doneWork(false, fmt(ph.failed, { tool: ev.tool }));
         break;
       case 'PermissionRequest':
-        this.openPetition({ tool: ev.tool, summary: ev.summary, actor });
+        this.openPetition({ tool: ev.tool, summary: ev.summary, actor, ext: !!ev.ext });
         break;
       case 'PermissionDenied':
         if (this.petition && !this.petition.closed) this.closePetition('no');
@@ -837,7 +840,7 @@ export class Court {
         break;
       case 'Notification':
         if (ev.kind === 'permission_prompt') {
-          if (!this.petition || this.petition.closed) this.openPetition({ message: ev.message, actor });
+          if (!this.petition || this.petition.closed) this.openPetition({ message: ev.message, actor, ext: !!ev.ext });
         } else if (ev.kind === 'idle_prompt') {
           this.main.say(ph.idle || '분부를 기다리옵니다', '', 120_000);
         } else if (ev.message) {

package/public/style.css

@@ -223,6 +223,9 @@ body { height: 100vh; }
 .petition .p-ok { background: var(--px-hong); color: #fff; }
 .petition .p-no { background: #3A3F4A; }
 .petition .p-btn:focus-visible { outline: 2px solid var(--hwang); }
+.petition .p-ext { display: none; font-family: 'Galmuri7', var(--pixel); font-size: 8px; color: var(--hwang); margin-top: 4px; }
+.petition.ext .p-btns, .petition.ext .p-hint { display: none; }
+.petition.ext .p-ext { display: block; }
 .petition .p-hint { display: none; } /* shown as a tooltip on the panel instead, to keep it short */
 .petition.min { width: 110px; left: 286px !important; }
 .petition.min .p-btns, .petition.min .p-hint, .petition.min .p-ask { display: none; }
@@ -288,6 +291,8 @@ body { height: 100vh; }
 }
 .term-hint p { margin: 4px 0; }
 .term-hint.hidden { display: none; }
+/* one input on computers: the terminal. The decree bar is for touch screens, where typing into xterm is awkward */
+@media (hover: hover) and (pointer: fine) { .decree-bar { display: none !important; } .term-hint { inset: 0; } }
 .decree-bar { display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid var(--line); background: var(--card); }
 .decree-label { font-family: var(--pixel); font-size: 12px; color: var(--hwang); white-space: nowrap; }
 .decree-bar input {

package/server/hook.js

@@ -1,17 +1,37 @@
 #!/usr/bin/env node
-// Claude Code hook handler (injected via `claude --settings <temp file>`).
+// Claude Code hook handler.
 // Reads the hook JSON from stdin, trims it to a tiny display event, and POSTs it
 // to the local court server. It never blocks Claude Code: hard time limit,
 // prints nothing to stdout, and always exits 0.
 //
-// usage: node hook.js <port> <token>
+// usage: node hook.js <port> <token>   injected via `claude --settings <temp file>` for the court's own claude
+//        node hook.js --watch          installed by `eojeon watch` into ~/.claude/settings.json; finds the
+//                                      running court through ~/.eojeon/runtime.json and does nothing if none
+import fs from 'node:fs';
 import http from 'node:http';
+import os from 'node:os';
+import path from 'node:path';
 import { sanitize } from './sanitize.js';
 
-const [port, token] = process.argv.slice(2);
 const done = () => process.exit(0);
 setTimeout(done, 1500).unref?.();
 
+const WATCH = process.argv[2] === '--watch';
+// the court's own claude already reports through its --settings hook; don't count it twice
+if (WATCH && process.env.EOJEON_CHILD === '1') done();
+
+let port;
+let token;
+if (WATCH) {
+  try {
+    ({ port, token } = JSON.parse(fs.readFileSync(path.join(os.homedir(), '.eojeon', 'runtime.json'), 'utf8')));
+  } catch {
+    done(); // no court running
+  }
+} else {
+  [port, token] = process.argv.slice(2);
+}
+
 let buf = '';
 process.stdin.setEncoding('utf8');
 process.stdin.on('data', (c) => {
@@ -26,6 +46,7 @@ process.stdin.on('end', () => {
     return done();
   }
   if (!port || !token) return done();
+  if (WATCH) ev.ext = true; // a session outside the court: watch only, the stamps can't answer it
   const body = JSON.stringify(ev);
   const req = http.request(
     {
@@ -33,7 +54,7 @@ process.stdin.on('end', () => {
       port: Number(port),
       path: '/hook',
       method: 'POST',
-      headers: { 'content-type': 'application/json', 'content-length': Buffer.byteLength(body), 'x-court-token': token },
+      headers: { 'content-type': 'application/json', 'content-length': Buffer.byteLength(body), 'x-court-token': String(token) },
       timeout: 800,
     },
     (res) => {

package/server/index.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 // Local server: serves the pixel court UI, runs your real `claude` in a PTY,
 // bridges it to the browser terminal over WebSocket, and receives Claude Code
-// hook events (injected with `claude --settings <temp file>`). Binds to 127.0.0.1 only.
+// hook events (injected with `claude --settings <temp file>`). Binds to 127.0.0.1 only,
+// unless started with --host (other devices, e.g. over Tailscale), which then requires an access key.
 import http from 'node:http';
 import fs from 'node:fs';
 import os from 'node:os';
@@ -14,6 +15,7 @@ import { WebSocketServer } from 'ws';
 import { listSessions } from './sessions.js';
 import { sanitize } from './sanitize.js';
 import { inspect as inspectAgents, install as installAgents, PACKS } from './agents.js';
+import { HOOK_EVENTS, eojeonDir, runtimeFile } from './watch.js';
 
 const require = createRequire(import.meta.url);
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
@@ -31,9 +33,28 @@ const DEMO = flag('--demo');
 const NO_OPEN = flag('--no-open') || process.env.COURT_NO_OPEN === '1';
 const WANT_PORT = Number(opt('--port', process.env.COURT_PORT || 4747));
 const DEFAULT_CWD = path.resolve(expandHome(opt('--cwd', process.env.INIT_CWD || process.cwd())));
+const HOST = opt('--host', process.env.COURT_HOST || '127.0.0.1');
+const LOOPBACK = new Set(['127.0.0.1', 'localhost', '::1']);
+const REMOTE = !LOOPBACK.has(HOST);
 const TOKEN = crypto.randomBytes(18).toString('hex');
+const KEY = REMOTE ? remoteKey(flag('--new-key')) : '';
 const VERSION = JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf8')).version;
 
+// one key per machine, kept in ~/.eojeon/remote-key so a bookmarked address keeps working; --new-key rotates it
+function remoteKey(rotate) {
+  const file = path.join(eojeonDir(), 'remote-key');
+  if (!rotate) {
+    try {
+      const k = fs.readFileSync(file, 'utf8').trim();
+      if (/^[0-9a-f]{32,}$/.test(k)) return k;
+    } catch {}
+  }
+  const k = crypto.randomBytes(24).toString('hex');
+  fs.mkdirSync(path.dirname(file), { recursive: true, mode: 0o700 });
+  fs.writeFileSync(file, k + '\n', { mode: 0o600 });
+  return k;
+}
+
 function expandHome(p) {
   return typeof p === 'string' && (p === '~' || p.startsWith('~/')) ? path.join(os.homedir(), p.slice(1)) : p;
 }
@@ -56,11 +77,6 @@ function findClaude() {
 const CLAUDE = findClaude();
 
 // ---------- temp settings with hooks ----------
-const HOOK_EVENTS = [
-  'SessionStart', 'UserPromptSubmit', 'PreToolUse', 'PostToolUse', 'PostToolUseFailure',
-  'PermissionRequest', 'PermissionDenied', 'SubagentStart', 'SubagentStop', 'Notification',
-  'Stop', 'StopFailure', 'SessionEnd',
-];
 let tmpDir = null;
 let settingsPath = null;
 let runtimePath = null;
@@ -76,11 +92,20 @@ function writeSettings(port) {
   // lets `npm run fake-hooks` find this server (token stays on this machine, owner-only file)
   runtimePath = path.join(os.tmpdir(), `eojeon-${port}.json`);
   fs.writeFileSync(runtimePath, JSON.stringify({ port, token: TOKEN, hook: HOOK }), { mode: 0o600 });
+  // lets `eojeon watch` hooks (sessions outside the court) find this server
+  try {
+    fs.mkdirSync(eojeonDir(), { recursive: true, mode: 0o700 });
+    fs.writeFileSync(runtimeFile(), JSON.stringify({ port, token: TOKEN, pid: process.pid }), { mode: 0o600 });
+  } catch {}
 }
 
 function cleanup() {
   try { if (tmpDir) fs.rmSync(tmpDir, { recursive: true, force: true }); } catch {}
   try { if (runtimePath) fs.rmSync(runtimePath, { force: true }); } catch {}
+  try {
+    // only our own: a second court may have taken over the file
+    if (JSON.parse(fs.readFileSync(runtimeFile(), 'utf8')).pid === process.pid) fs.rmSync(runtimeFile(), { force: true });
+  } catch {}
 }
 
 // ---------- state ----------
@@ -162,6 +187,7 @@ function startClaude({ cwd, mode, sessionId, permissionMode }) {
     'CLAUDE_CODE_MESSAGING_TOKEN', 'CLAUDE_CODE_BRIDGE_SESSION_ID', 'CLAUDE_CODE_EXECPATH', 'CLAUDE_PID', 'CLAUDE_EFFORT',
   ]) delete env[k];
   for (const k of Object.keys(env)) if (k.startsWith('npm_')) delete env[k];
+  env.EOJEON_CHILD = '1'; // `eojeon watch` hooks skip this session (it already reports through --settings)
 
   const { spawn } = loadPty();
   pty = spawn(CLAUDE, args, { name: 'xterm-256color', cols: size.cols, rows: size.rows, cwd: dir, env });
@@ -211,6 +237,27 @@ function allowedHost(h) {
 function allowedOrigin(o) {
   return o === `http://localhost:${PORT}` || o === `http://127.0.0.1:${PORT}` || o === `http://[::1]:${PORT}`;
 }
+const fromLoopback = (req) => /^(127\.|::1$|::ffff:127\.)/.test(req.socket.remoteAddress || '');
+function cookieKey(req) {
+  const m = /(?:^|;\s*)eojeon_key=([0-9a-f]+)/.exec(req.headers.cookie || '');
+  return m ? m[1] : '';
+}
+function keyOk(k) {
+  return !!KEY && typeof k === 'string' && k.length === KEY.length && crypto.timingSafeEqual(Buffer.from(k), Buffer.from(KEY));
+}
+// Who may use the page and the terminal:
+//  - this computer, under a localhost name (DNS-rebinding guard) — as before
+//  - with --host: anyone holding the access key (cookie set from ?key=… on the first visit)
+function access(req) {
+  if (fromLoopback(req) && allowedHost(req.headers.host || '')) return 'local';
+  if (REMOTE && keyOk(cookieKey(req))) return 'key';
+  return '';
+}
+// same-origin check for anything that writes (terminal socket, agent install)
+function sameOrigin(req, who) {
+  const o = req.headers.origin || '';
+  return who === 'local' ? allowedOrigin(o) : o === `http://${req.headers.host}`;
+}
 
 function sendFile(res, file) {
   fs.readFile(file, (err, data) => {
@@ -247,17 +294,13 @@ function loadConfig() {
   return JSON.parse(fs.readFileSync(path.join(ROOT, 'court.config.json'), 'utf8'));
 }
 
-const server = http.createServer(async (req, res) => {
-  // DNS-rebinding guard: only answer to localhost names
-  if (!allowedHost(req.headers.host || '')) {
-    res.writeHead(403).end('forbidden host');
-    return;
-  }
+async function handle(req, res) {
   const url = new URL(req.url, `http://localhost:${PORT}`);
   const p = url.pathname;
 
   if (p === '/hook' && req.method === 'POST') {
-    if (req.headers['x-court-token'] !== TOKEN) {
+    // hooks always run on this computer
+    if (!fromLoopback(req) || req.headers['x-court-token'] !== TOKEN) {
       res.writeHead(403).end();
       return;
     }
@@ -273,9 +316,29 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
+  let who = access(req);
+  if (!who && REMOTE && req.method === 'GET' && keyOk(url.searchParams.get('key'))) {
+    // first visit from another device: trade the key in the address for a cookie, then drop it from the address bar
+    url.searchParams.delete('key');
+    res.writeHead(302, {
+      'set-cookie': `eojeon_key=${KEY}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${60 * 60 * 24 * 30}`,
+      location: url.pathname + url.search,
+      'cache-control': 'no-store',
+    });
+    res.end();
+    return;
+  }
+  if (!who) {
+    // DNS-rebinding guard: only localhost names, or the access key with --host
+    res.writeHead(403, { 'content-type': 'text/plain; charset=utf-8' }).end(
+      REMOTE ? 'forbidden — 어전을 켠 터미널에 찍힌 주소(?key=…)로 한 번 열어 주세요' : 'forbidden host',
+    );
+    return;
+  }
+
   if (p === '/api/agents/install' && req.method === 'POST') {
     // writes files: only from our own page (same-origin fetch always sends Origin) and only JSON
-    if (!allowedOrigin(req.headers.origin || '') || !/^application\/json/.test(req.headers['content-type'] || '')) {
+    if (!sameOrigin(req, who) || !/^application\/json/.test(req.headers['content-type'] || '')) {
       res.writeHead(403).end();
       return;
     }
@@ -298,7 +361,7 @@ const server = http.createServer(async (req, res) => {
     return json(res, 200, {
       app: 'eojeon', version: VERSION,
       demo: DEMO, defaultCwd: DEFAULT_CWD, claudeFound: !!CLAUDE, running: !!pty, info: ptyInfo,
-      home: os.homedir(), platform: process.platform, permissionModes: PERMISSION_MODES,
+      home: os.homedir(), platform: process.platform, permissionModes: PERMISSION_MODES, remote: REMOTE,
     });
   }
   if (p === '/api/config') {
@@ -336,19 +399,28 @@ const server = http.createServer(async (req, res) => {
     return;
   }
   sendFile(res, file);
-});
+}
 
 // ---------- websocket ----------
 const wss = new WebSocketServer({ noServer: true, maxPayload: 1024 * 1024 });
-server.on('upgrade', (req, socket, head) => {
+function onUpgrade(req, socket, head) {
   // Cross-site WebSocket hijacking guard: a random web page must never be able to type into your terminal.
-  if (!allowedHost(req.headers.host || '') || !allowedOrigin(req.headers.origin || '')) {
+  const who = access(req);
+  if (!who || !sameOrigin(req, who)) {
     socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
     socket.destroy();
     return;
   }
   wss.handleUpgrade(req, socket, head, (ws) => wss.emit('connection', ws, req));
-});
+}
+function makeServer() {
+  const s = http.createServer(handle);
+  s.on('upgrade', onUpgrade);
+  return s;
+}
+// always on 127.0.0.1 (hooks post there); with --host also on that address unless it already covers loopback
+const server = makeServer();
+const WILDCARD = HOST === '0.0.0.0' || HOST === '::';
 
 wss.on('connection', (ws) => {
   clients.add(ws);
@@ -399,10 +471,34 @@ function listen(port, tries = 10) {
     };
     server.once('error', onErr);
     server.once('listening', onOk);
-    server.listen(port, '127.0.0.1');
+    server.listen(port, WILDCARD ? HOST : '127.0.0.1');
+  });
+}
+
+function listenAlso(port) {
+  return new Promise((resolve, reject) => {
+    const s = makeServer();
+    s.once('error', reject);
+    s.listen(port, HOST, () => resolve(s));
   });
 }
 
+// addresses another device can use: Tailscale (100.64.0.0/10), LAN, and this computer's name
+function remoteUrls(port) {
+  const out = [];
+  if (!WILDCARD) out.push(HOST);
+  else {
+    for (const list of Object.values(os.networkInterfaces())) {
+      for (const a of list || []) if (a.family === 'IPv4' && !a.internal) out.push(a.address);
+    }
+    out.push(os.hostname().replace(/\.local$/, ''));
+  }
+  const ts = (a) => /^100\.(6[4-9]|[7-9]\d|1[01]\d|12[0-7])\./.test(a);
+  return [...new Set(out)]
+    .sort((a, b) => ts(b) - ts(a))
+    .map((h) => `http://${h.includes(':') ? `[${h}]` : h}:${port}/?key=${KEY}${ts(h) ? '   (Tailscale)' : ''}`);
+}
+
 function openBrowser(url) {
   const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'cmd' : 'xdg-open';
   const args = process.platform === 'win32' ? ['/c', 'start', '', url] : [url];
@@ -412,12 +508,27 @@ function openBrowser(url) {
 }
 
 PORT = await listen(WANT_PORT);
+if (REMOTE && !WILDCARD) {
+  try {
+    await listenAlso(PORT);
+  } catch (e) {
+    console.error(`  --host ${HOST}: ${e.message}`);
+    process.exit(1);
+  }
+}
 writeSettings(PORT);
 const url = `http://localhost:${PORT}/${DEMO ? '?demo=1' : ''}`;
 console.log(`\n  어전 · eojeon ${VERSION} ${DEMO ? '(demo)' : ''}`);
 console.log(`  ${url}`);
 console.log(`  claude: ${CLAUDE || '(not found)'}   folder: ${DEFAULT_CWD}`);
-console.log('  Everything stays on this machine (127.0.0.1). Ctrl+C to quit.\n');
+if (REMOTE) {
+  console.log(`\n  다른 기기에서 (--host ${HOST}) — 처음 한 번은 키가 붙은 주소로 여세요:`);
+  for (const u of remoteUrls(PORT)) console.log(`    ${u}`);
+  console.log('  ! 이 키를 가진 사람은 이 컴퓨터의 claude 터미널을 쓸 수 있습니다. 믿는 기기에서만 여세요. 키 바꾸기: --new-key');
+  console.log('  Ctrl+C to quit.\n');
+} else {
+  console.log('  Everything stays on this machine (127.0.0.1). Ctrl+C to quit.\n');
+}
 if (!NO_OPEN) openBrowser(url);
 
 for (const sig of ['SIGINT', 'SIGTERM', 'SIGHUP']) {

package/server/watch.js

@@ -0,0 +1,96 @@
+// `eojeon watch`: show Claude Code sessions that run outside the court (any terminal, IDE, ...).
+// Adds one hook command per event to ~/.claude/settings.json. The command runs a copy of hook.js
+// kept in ~/.eojeon/hook/ (a stable path, unlike the npx cache), which looks for a running court
+// in ~/.eojeon/runtime.json and exits at once when there is none.
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+
+export const HOOK_EVENTS = [
+  'SessionStart', 'UserPromptSubmit', 'PreToolUse', 'PostToolUse', 'PostToolUseFailure',
+  'PermissionRequest', 'PermissionDenied', 'SubagentStart', 'SubagentStop', 'Notification',
+  'Stop', 'StopFailure', 'SessionEnd',
+];
+
+const MARK = path.join('.eojeon', 'hook', 'hook.js');
+const isOurs = (h) => typeof h?.command === 'string' && h.command.replace(/\\/g, '/').includes(MARK.replace(/\\/g, '/'));
+
+export function eojeonDir(home = os.homedir()) {
+  return path.join(home, '.eojeon');
+}
+
+export function runtimeFile(home = os.homedir()) {
+  return path.join(eojeonDir(home), 'runtime.json');
+}
+
+function readSettings(file) {
+  if (!fs.existsSync(file)) return {};
+  const text = fs.readFileSync(file, 'utf8');
+  if (!text.trim()) return {};
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    throw new Error(`${file} 을 읽지 못했습니다(JSON 오류). 손대지 않았습니다: ${e.message}`);
+  }
+}
+
+function writeSettings(file, obj) {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  const tmp = `${file}.eojeon-tmp`;
+  fs.writeFileSync(tmp, JSON.stringify(obj, null, 2) + '\n');
+  fs.renameSync(tmp, file);
+}
+
+// drop our entries, keep everything else exactly as the user had it
+function strip(hooks) {
+  const out = {};
+  for (const [ev, groups] of Object.entries(hooks || {})) {
+    if (!Array.isArray(groups)) {
+      out[ev] = groups;
+      continue;
+    }
+    const kept = groups
+      .map((g) => (Array.isArray(g?.hooks) ? { ...g, hooks: g.hooks.filter((h) => !isOurs(h)) } : g))
+      .filter((g) => !Array.isArray(g?.hooks) || g.hooks.length > 0);
+    if (kept.length) out[ev] = kept;
+  }
+  return out;
+}
+
+export function install({ home = os.homedir(), node = process.execPath } = {}) {
+  const settingsFile = path.join(home, '.claude', 'settings.json');
+  const settings = readSettings(settingsFile); // throws before anything is written
+  const dir = path.join(eojeonDir(home), 'hook');
+  fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+  for (const f of ['hook.js', 'sanitize.js']) fs.copyFileSync(path.join(HERE, f), path.join(dir, f));
+  fs.writeFileSync(path.join(dir, 'package.json'), '{ "type": "module" }\n');
+  const backup = `${settingsFile}.eojeon-backup`;
+  if (fs.existsSync(settingsFile) && !fs.existsSync(backup)) fs.copyFileSync(settingsFile, backup);
+
+  const q = (s) => `"${s.replace(/"/g, '\\"')}"`;
+  const command = `${q(node)} ${q(path.join(dir, 'hook.js'))} --watch`;
+  const hooks = strip(settings.hooks);
+  for (const ev of HOOK_EVENTS) hooks[ev] = [...(hooks[ev] || []), { hooks: [{ type: 'command', command, timeout: 5 }] }];
+  writeSettings(settingsFile, { ...settings, hooks });
+  return { settingsFile, backup: fs.existsSync(backup) ? backup : null, command };
+}
+
+export function uninstall({ home = os.homedir() } = {}) {
+  const settingsFile = path.join(home, '.claude', 'settings.json');
+  const settings = readSettings(settingsFile);
+  const hooks = strip(settings.hooks);
+  const next = { ...settings };
+  if (Object.keys(hooks).length) next.hooks = hooks;
+  else delete next.hooks;
+  if (fs.existsSync(settingsFile)) writeSettings(settingsFile, next);
+  fs.rmSync(path.join(eojeonDir(home), 'hook'), { recursive: true, force: true });
+  return { settingsFile };
+}
+
+export function status({ home = os.homedir() } = {}) {
+  const settings = readSettings(path.join(home, '.claude', 'settings.json'));
+  return HOOK_EVENTS.every((ev) => (settings.hooks?.[ev] || []).some((g) => (g?.hooks || []).some(isOurs)));
+}