agello 0.2.1 → 0.4.1

package/README.md

@@ -5,15 +5,16 @@
 - Chat with the agent from a web page; terminal input, browser input and agent replies are shown as separate bubbles
 - Live session status, tool activity, and prompts queued while the agent is busy (same order as the terminal)
 - Conversation saved per pane in the browser, kept across reloads
+- Interactive terminal view of the existing herdr pane: live cursor, keyboard input, and automatic resize
 - Optional live view of a `terminal-browser` screen, with an on/off switch to control it yourself
 - Embeddable `<agent-bridge>` web component
 
-Currently supports **Claude Code** sessions.
+Chat currently supports **Claude Code** sessions. The terminal view connects directly to the pane, including ordinary shells and other terminal applications.
 
 ## Requirements
 
 - [Bun](https://bun.sh) >= 1.1
-- [herdr](https://herdr.dev) (the agent must run inside a herdr pane)
+- [herdr](https://herdr.dev) (the agent must run inside a herdr pane); interactive terminal view requires `herdr terminal session control`
 - Optional: `terminal-browser` for the screen panel
 
 ## Install
@@ -69,13 +70,25 @@ The approve / reject buttons send `action=approve` / `action=reject`.
 | `agello open [--port N \| --pane ID]` | Open the page (default: this pane's server) |
 | `agello present [x,y,w,h] [--port N \| --pane ID]` | Presentation mode (see below) |
 | `agello present stop` | End presentation mode |
-| `agello script load <file> \| show` | Load / show a presentation script |
-| `agello present resume \| pause \| goto <n[.m]>` | Play the script from where it stopped / stop it / move to a step |
 
 `start` options: `--pane <id>`, `--port <n>` (default: first free from 8765), `--session <id>`, `--browser <terminal-browser key>`, `--allow-origin <origin>` (repeatable), `--open`, `--foreground`.
 
 State and logs: `~/.local/state/agello/<port>.json`, `<port>.log`.
 
+### Pane picker
+
+Click the status in the header to open a drawer with herdr's workspace -> tab -> pane tree (the current pane's workspace is expanded; a workspace with a single tab lists its panes directly). Search filters by workspace, title, folder, or agent. Picking a pane switches the page to that pane's server, starting it if needed (`?server=` keeps the choice across reloads). Panes without Claude Code open as a terminal, since chat supports Claude Code only.
+
+`+` adds a workspace (top), a tab (workspace row), or splits a pane (pane row); new panes open as a terminal. Nothing can be closed from the page: closing a herdr pane ends its processes.
+
+### Interactive terminal
+
+Click the terminal icon in the header to replace the chat with the pane's live terminal (the screen panel stays). Keyboard input (including Korean text, arrow keys, and Ctrl+C) goes directly to that terminal. The viewport follows the browser size, and the mouse wheel scrolls through Herdr. Click the icon again or close the page to release control; the pane and its process keep running. If disconnected, use **다시 연결** to restore the current screen.
+
+Only one browser connection can control a pane through this server at a time. Agello never forcibly takes over another Herdr controller. While connected, resizing the browser also changes the source terminal size. Terminal input is raw input, without the chat's `[browser]` prefix.
+
+The xterm.js renderer and its styles are served locally; no terminal CDN is required. Herdr sends an initial ANSI screen and subsequent frame updates over the WebSocket, including cursor state. Terminal frames are not stored in browser chat history.
+
 ### Presentation mode
 
 `agello present x,y,w,h` (CSS px of the browser's visible viewport; omit for the whole screen):
@@ -89,23 +102,6 @@ State and logs: `~/.local/state/agello/<port>.json`, `<port>.log`.
 
 Run `present` again to move the crop. User control is off while presenting.
 
-#### Scripts
-
-Write the talk ahead so each line appears the moment its screen does:
-
-```json
-{ "rect": "28,157,688,477",
-  "steps": [
-    { "go": "#1", "say": ["First line", "Second line"] },
-    { "go": "#2", "say": ["..."], "hold": 6 } ] }
-```
-
-- step: `go` brings the screen there (`#n` sets `location.hash`, anything else is JS run in the page; agello knows nothing about the deck), `say` lines are one bubble each, `hold` seconds a line stays on screen (default from length, 10 to 20s; never below 10s). Pacing: screen change, 1s, line, fade out, 0.3s, next line; after a step's last line 0.7s before the next screen
-- `present resume` plays from where it stopped (starts presentation mode with the script's `rect`); it first re-runs the current step's `go`, so the agent may move the screen freely while answering
-- raising a hand pauses at once; the agent gets `action=hand-raise` with the position (`마지막 표시 2.1 · 다음 2.2`)
-- `script load` again after editing keeps the position; `present goto 2.2` then `present resume` replays from a fixed line
-- at the end the agent gets `action=present-done`; while the script is paused and the agent is working, the page shows a small loader
-
 ## Embed
 
 ```html
@@ -129,11 +125,17 @@ See `web/embed-example.html`.
 - **Send**: `herdr agent prompt <pane> "<text>"` (kept to 3 lines so Claude Code does not treat it as a paste)
 - **Status**: `herdr agent get` / `herdr pane get`, polled every 1.5s
 - **Chat**: tails the Claude Code transcript (`$CLAUDE_CONFIG_DIR/projects/*/<session>.jsonl`) and streams it over SSE
+- **Panes**: `GET /panes` (`herdr workspace/tab/pane list`), `POST /panes/connect` (`agello start --pane`), `POST /panes/create` (`herdr workspace create`, `tab create`, `pane split`, always `--no-focus`)
+- **Terminal**: `/terminal` WebSocket relays `herdr terminal session control <pane>` ANSI frames and validated input, resize, and scroll commands to xterm.js
 - **Screen**: finds the terminal-browser CDP port via `terminal-browser ls --json` and relays `Page.startScreencast` frames; user control forwards `Input.*` events only
 
 ## Security
 
-The server listens on `127.0.0.1` only. Data and input endpoints accept requests from the same origin and `localhost` pages only; other origins get `403` unless added with `--allow-origin`. Anything allowed to post to `/send` can type into your agent session, so keep the allow list short.
+The server listens on `127.0.0.1` only. Data and input endpoints accept requests from the same origin and `localhost` pages only; other origins get `403` unless added with `--allow-origin`. Allowed origins can send chat prompts and connect to `/terminal` to type directly into the pane, so keep the allow list short.
+
+## Development
+
+Run `bun install` and `bun test`. Tests cover the pane tree and creation (against a mock herdr), local terminal assets, origin rejection, ANSI frames, keyboard bytes, resize, exclusive control, and reconnect.
 
 ## License
 

package/bin/agello.ts

@@ -27,13 +27,6 @@ Usage:
                          whole screen), with agent replies as bubbles that fade after 10s.
                          Run again to move the crop.
   ${NAME} present stop [--port N|--pane ID]       End presentation mode (bubbles stay in the chat)
-  ${NAME} script load <file.json>   Load a presentation script (keeps the current position):
-                         {"rect": "x,y,w,h", "steps": [{"go": "#1", "say": ["line", ...], "hold": 6}]}
-                         go: "#n" sets location.hash, otherwise JS run in the page; one line = one bubble
-  ${NAME} script show               Script with positions (step.line) and player state
-  ${NAME} present resume            Play the script from where it stopped (starts presentation mode)
-  ${NAME} present pause             Stop the script (raising a hand on the page also pauses)
-  ${NAME} present goto <n[.m]>      Move to step n (line m) and show its screen
   ${NAME} help | --version
 
 start options:
@@ -291,56 +284,6 @@ async function cmdOpen(argv: string[]) {
   console.log(inst.url);
 }
 
-async function api(url: string, path: string, body?: object): Promise<any> {
-  try {
-    const r = await fetch(`${url}${path}`, {
-      method: body ? "POST" : "GET",
-      headers: { "Content-Type": "application/json" },
-      body: body ? JSON.stringify(body) : undefined,
-      signal: AbortSignal.timeout(8000),
-    });
-    return await r.json();
-  } catch {
-    return fail(`server unreachable: ${url}`);
-  }
-}
-
-const playerLine = (p: any) =>
-  `script: ${p.state}${p.last ? ` last=${p.last}` : ""}${p.next ? ` next=${p.next}` : ""} steps=${p.steps}`;
-
-async function cmdScript(argv: string[]) {
-  const { values: o, positionals } = parseArgs({
-    args: argv,
-    options: { port: { type: "string" }, pane: { type: "string" } },
-    allowPositionals: true,
-  });
-  const [sub, file] = positionals;
-  const inst = await resolveTarget(o);
-  if (sub === "load") {
-    if (!file) fail("usage: script load <file.json>");
-    let script: unknown;
-    try {
-      script = await Bun.file(file!).json();
-    } catch (e) {
-      fail(`cannot read ${file}: ${(e as Error).message}`);
-    }
-    const res = await api(inst.url, "/script", { script });
-    if (!res.ok) fail(res.error);
-    console.log(playerLine(res.player));
-  } else if (sub === "show" || !sub) {
-    const res = await api(inst.url, "/script");
-    console.log(playerLine(res.player));
-    for (const [i, st] of (res.script?.steps ?? []).entries()) {
-      console.log(`${i + 1}${st.go ? `  go=${st.go}` : ""}${st.hold ? `  hold=${st.hold}s` : ""}`);
-      st.say.forEach((l: string, j: number) => {
-        const at = `${i + 1}.${j + 1}`;
-        const mark = at === res.player.next ? ">" : at === res.player.last ? "*" : " ";
-        console.log(` ${mark} ${at}  ${l}`);
-      });
-    }
-  } else fail(`unknown script command: ${sub}`);
-}
-
 async function cmdPresent(argv: string[]) {
   const { values: o, positionals } = parseArgs({
     args: argv,
@@ -348,14 +291,6 @@ async function cmdPresent(argv: string[]) {
     allowPositionals: true,
   });
   const inst = await resolveTarget(o);
-  const [sub, at] = positionals;
-  if (sub === "resume" || sub === "pause" || sub === "goto") {
-    if (sub === "goto" && !at) fail("usage: present goto <n[.m]>");
-    const res = await api(inst.url, "/player", { cmd: sub, at });
-    if (!res.ok) fail(`${res.error}${res.player ? ` (${playerLine(res.player)})` : ""}`);
-    console.log(playerLine(res.player));
-    return;
-  }
   const arg = positionals.join(",");
   let body: object;
   if (arg === "stop") body = { stop: true };
@@ -402,9 +337,6 @@ switch (cmd) {
   case "present":
     await cmdPresent(rest);
     break;
-  case "script":
-    await cmdScript(rest);
-    break;
   case "--version":
   case "-v":
     console.log(pkg.version);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agello",
-  "version": "0.2.1",
+  "version": "0.4.1",
   "description": "Talk to a coding agent in a herdr pane from the browser: chat, live status, and a shared browser screen.",
   "keywords": [
     "herdr",
@@ -31,5 +31,9 @@
   "engines": {
     "bun": ">=1.1"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@xterm/addon-fit": "0.11.0",
+    "@xterm/xterm": "6.0.0"
+  }
 }

package/src/panes.ts

@@ -0,0 +1,86 @@
+// herdr workspace -> tab -> pane tree, creation, and switching to a pane's own
+// agello server (one server per pane; started on demand through the CLI).
+// Deliberately no close/delete: closing a herdr pane kills its processes.
+
+import { join } from "node:path";
+import { run, runJson } from "./run.ts";
+
+const CLI = join(import.meta.dir, "..", "bin", "agello.ts");
+const ID = /^[A-Za-z0-9]+:[A-Za-z0-9]+$/; // herdr ids: w23, w23:t1, w23:p3
+const WS_ID = /^[A-Za-z0-9]+$/;
+
+// Resolve herdr on the current PATH (Bun.spawn uses the PATH from process start).
+const bin = () => Bun.which("herdr", { PATH: process.env.PATH }) ?? "herdr";
+const herdr = async (...cmd: string[]) => (await runJson([bin(), ...cmd], 5000)) ?? { error: { code: "herdr_failed" } };
+
+export type TreePane = { id: string; agent?: string; status: string; title?: string; cwd?: string; focused: boolean };
+export type TreeTab = { id: string; label: string; number: number; panes: TreePane[] };
+export type TreeWorkspace = { id: string; label: string; number: number; tabs: TreeTab[] };
+
+export async function paneTree(): Promise<TreeWorkspace[] | null> {
+  const [w, t, p] = await Promise.all([herdr("workspace", "list"), herdr("tab", "list"), herdr("pane", "list")]);
+  if (!w.result || !t.result || !p.result) return null;
+  const tabs = new Map<string, TreeTab>();
+  for (const tab of t.result.tabs)
+    tabs.set(tab.tab_id, { id: tab.tab_id, label: tab.label, number: tab.number, panes: [] });
+  for (const pane of p.result.panes)
+    tabs.get(pane.tab_id)?.panes.push({
+      id: pane.pane_id,
+      agent: pane.agent,
+      status: pane.agent_status,
+      title: pane.terminal_title_stripped || undefined,
+      cwd: pane.foreground_cwd || pane.cwd,
+      focused: pane.focused,
+    });
+  return w.result.workspaces.map((ws: any) => ({
+    id: ws.workspace_id,
+    label: ws.label,
+    number: ws.number,
+    tabs: t.result.tabs
+      .filter((tab: any) => tab.workspace_id === ws.workspace_id)
+      .map((tab: any) => tabs.get(tab.tab_id)!),
+  }));
+}
+
+const text = (v: unknown, max = 200) => (typeof v === "string" && v.trim() && v.length <= max ? v.trim() : undefined);
+const fail = (error: string, status = 400) => Response.json({ ok: false, error }, { status });
+
+// POST /panes/connect {pane} -> {ok, url}: the pane's server, started if needed.
+async function connect(pane: unknown): Promise<Response> {
+  if (typeof pane !== "string" || !ID.test(pane)) return fail("invalid_pane");
+  if (!(await herdr("pane", "get", pane)).result) return fail("pane_not_found", 404);
+  const out = await run([process.execPath, CLI, "start", "--pane", pane], 20000);
+  const url = out?.match(/https?:\/\/127\.0\.0\.1:\d+/)?.[0];
+  return url ? Response.json({ ok: true, pane, url }) : fail("server_start_failed", 502);
+}
+
+// POST /panes/create {kind: workspace|tab|pane, ...} -> {ok, pane}: the new root pane.
+async function create(d: any): Promise<Response> {
+  const cwd = text(d.cwd, 1024);
+  if (cwd && !cwd.startsWith("/")) return fail("invalid_cwd");
+  const label = text(d.label, 80);
+  const opt = [...(cwd ? ["--cwd", cwd] : []), ...(label ? ["--label", label] : []), "--no-focus"];
+  let res: any;
+  if (d.kind === "workspace") res = await herdr("workspace", "create", ...opt);
+  else if (d.kind === "tab") {
+    if (typeof d.workspace !== "string" || !WS_ID.test(d.workspace)) return fail("invalid_workspace");
+    res = await herdr("tab", "create", "--workspace", d.workspace, ...opt);
+  } else if (d.kind === "pane") {
+    if (typeof d.pane !== "string" || !ID.test(d.pane)) return fail("invalid_pane");
+    if (d.direction !== "right" && d.direction !== "down") return fail("invalid_direction");
+    res = await herdr("pane", "split", d.pane, "--direction", d.direction, ...(cwd ? ["--cwd", cwd] : []), "--no-focus");
+  } else return fail("invalid_kind");
+  const pane = res.result?.root_pane?.pane_id ?? res.result?.pane?.pane_id;
+  return pane ? Response.json({ ok: true, pane }) : fail(res.error?.code ?? "herdr_failed", 502);
+}
+
+export async function panesRoute(req: Request, path: string, current: string): Promise<Response | null> {
+  if (path === "/panes" && req.method === "GET") {
+    const tree = await paneTree();
+    return tree ? Response.json({ ok: true, current, workspaces: tree }) : fail("herdr_failed", 502);
+  }
+  if (req.method !== "POST" || (path !== "/panes/connect" && path !== "/panes/create")) return null;
+  const d = (await req.json().catch(() => null)) as any;
+  if (!d || typeof d !== "object") return fail("invalid_body");
+  return path === "/panes/connect" ? connect(d.pane) : create(d);
+}

package/src/screencast.ts

@@ -268,12 +268,5 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     return browser ? { connected: false, browser: browser.key } : { connected: false, reason };
   }
 
-  // Run JS in the relayed tab (presentation script `go`). Needs the relay to be
-  // connected, i.e. at least one viewer. Returns false if it could not run.
-  async function evaluate(expression: string): Promise<boolean> {
-    const r = await request("Runtime.evaluate", { expression, awaitPromise: true });
-    return !!r && !r.exceptionDetails;
-  }
-
-  return { handle, input, describe, setClip, evaluate };
+  return { handle, input, describe, setClip };
 }

package/src/server.ts

@@ -4,21 +4,26 @@
 // GET  /agent-bridge.js  <agent-bridge> web component
 // GET  /status           session liveness (herdr agent get + pane get)
 // GET  /events           SSE: status, chat messages, tool start/end (from transcript JSONL)
-// POST /send             {action, text} -> herdr agent prompt
+// POST /send             {action, text, images?: [{type, data(base64)}]} -> herdr agent prompt
+//                        (images are saved to $TMPDIR/agello-uploads and sent as [image: <path>])
 // GET  /screen           SSE: terminal-browser screen frames (CDP screencast)
+// POST /upload           {images: [{type, data(base64)}]} -> {paths}: terminal image paste
+// WS   /terminal         interactive herdr terminal frames, keyboard input, resize
+// GET  /panes            herdr workspace -> tab -> pane tree
+// POST /panes/connect    {pane} -> url of that pane's server (started if needed)
+// POST /panes/create     {kind: workspace|tab|pane, cwd?, label?, workspace?, pane?, direction?}
 // WS   /input            user control: CDP Input.* commands forwarded to the page
 // GET  /present          presentation state
 // POST /present          {rect?: {x,y,w,h}} start (or move the crop), {stop: true} end
 //                        ({stop: true, from: "viewer"}: ended from the page, the agent is told
 //                         with "[browser] action=present-stop")
-// GET  /script           presentation script + player position
-// POST /script           {script: {rect?, steps: [{go?, say: string[], hold?}]}} load (keeps position)
-// POST /player           {cmd: "resume" | "pause" | "goto", at?: "3" | "3.2"}
 
-import { homedir } from "node:os";
+import { createTerminal, type SocketData } from "./terminal.ts";
+import { panesRoute } from "./panes.ts";
+import { mkdir } from "node:fs/promises";
+import { homedir, tmpdir } from "node:os";
 import { join } from "node:path";
 import { runJson } from "./run.ts";
-import { createPlayer, parsePos, parseScript, type PlayerInfo } from "./player.ts";
 import { createScreencast, type Rect } from "./screencast.ts";
 
 export type ServerOptions = {
@@ -30,6 +35,30 @@ export type ServerOptions = {
 };
 
 export const BROWSER_PREFIX = "[browser]";
+const UPLOAD_DIR = join(tmpdir(), "agello-uploads");
+const IMAGE_EXT: Record<string, string> = { "image/png": "png", "image/jpeg": "jpg", "image/gif": "gif", "image/webp": "webp" };
+const MAX_IMAGES = 5;
+const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+
+// Save pasted/dropped chat images so the agent can open them by path
+// (herdr agent prompt carries text only). null: invalid input.
+export async function saveImages(list: unknown): Promise<string[] | null> {
+  if (list === undefined) return [];
+  if (!Array.isArray(list) || list.length > MAX_IMAGES) return null;
+  const files = list.map((img: any) => {
+    const ext = IMAGE_EXT[img?.type];
+    if (!ext || typeof img.data !== "string") return null;
+    const bytes = Buffer.from(img.data, "base64");
+    return bytes.length && bytes.length <= MAX_IMAGE_BYTES ? { ext, bytes } : null;
+  });
+  if (files.includes(null)) return null;
+  await mkdir(UPLOAD_DIR, { recursive: true, mode: 0o700 });
+  return Promise.all(files.map(async (f) => {
+    const path = join(UPLOAD_DIR, `${crypto.randomUUID()}.${f!.ext}`);
+    await Bun.write(path, f!.bytes);
+    return path;
+  }));
+}
 const WEB_DIR = join(import.meta.dir, "..", "web");
 
 // ---------- pure helpers ----------
@@ -94,7 +123,7 @@ export function parseRect(r: any): Rect | null {
   return { x, y, w, h };
 }
 
-export type Present = { on: boolean; rect?: Rect; since?: string; player?: PlayerInfo };
+export type Present = { on: boolean; rect?: Rect; since?: string };
 
 type Status =
   | { alive: false; reason: string; pane: string }
@@ -108,6 +137,12 @@ export async function startServer(opts: ServerOptions) {
   const HTML = Bun.file(join(WEB_DIR, "index.html"));
   const COMPONENT = Bun.file(join(WEB_DIR, "agent-bridge.js"));
 
+  const terminal = createTerminal(PANE);
+  const bundle = await Bun.build({ entrypoints: [join(WEB_DIR, "terminal.js")], target: "browser", minify: true });
+  if (!bundle.success) throw new Error(`Terminal bundle failed: ${bundle.logs.join("\n")}`);
+  const terminalJS = await bundle.outputs[0].text();
+  const terminalCSS = Bun.file(new URL(import.meta.resolve("@xterm/xterm/css/xterm.css")));
+
   const agentInfo = async (): Promise<any | null> =>
     (await herdr(3000, "agent", "get", PANE))?.result?.agent ?? null;
 
@@ -307,7 +342,8 @@ export async function startServer(opts: ServerOptions) {
 
   const screen = createScreencast({
     browserKey: opts.browser,
-    herdrTab: async () => (await agentInfo())?.tab_id,
+    // shell panes have no agent: fall back to the pane's own tab
+    herdrTab: async () => (await agentInfo())?.tab_id ?? (await herdr(3000, "pane", "get", PANE))?.result?.pane?.tab_id,
   });
 
   // ----- presentation mode -----
@@ -315,67 +351,10 @@ export async function startServer(opts: ServerOptions) {
   // short-lived bubbles. rect: crop of the visible viewport (unset = whole screen).
 
   let present: Present = { on: false };
-  const presentView = (): Present => ({ ...present, player: player.info() });
   function setPresent(next: Present) {
     present = next;
     screen.setClip(next.on ? (next.rect ?? null) : null);
-    if (!next.on) player.stop();
-    broadcast("present", presentView());
-  }
-
-  // Script player: agello owns order and timing, the agent owns the deck
-  // (each step's `go`) and decides when to resume after a question.
-  const player = createPlayer({
-    async go(expr) {
-      const js = expr.startsWith("#") ? `location.hash = ${JSON.stringify(expr)}` : expr;
-      if (!(await screen.evaluate(js))) console.error(`present: go failed: ${expr}`);
-    },
-    say(text, at, hold) {
-      broadcast("message", { role: "assistant", text, ts: new Date().toISOString(), script: at, hold });
-    },
-    done() {
-      const n = player.info().steps;
-      promptAgent("present-done", `대본 끝까지 재생함 (${n}장)`);
-    },
-    changed() {
-      broadcast("present", presentView());
-    },
-  });
-
-  // "마지막 표시 3.2 · 다음 3.3" for agent notices
-  const where = () => {
-    const i = player.info();
-    if (i.state === "empty") return "";
-    return [i.last && `마지막 표시 ${i.last}`, i.next && `다음 ${i.next}`].filter(Boolean).join(" · ");
-  };
-
-  async function scriptRequest(req: Request): Promise<Response> {
-    if (req.method !== "POST") return Response.json({ script: player.script(), player: player.info() });
-    const data = (await req.json().catch(() => ({}))) as { script?: unknown };
-    const script = parseScript(data.script);
-    if (typeof script === "string") return Response.json({ ok: false, error: script }, { status: 400 });
-    if (script.rect && !parseRect(script.rect))
-      return Response.json({ ok: false, error: "invalid_rect" }, { status: 400 });
-    player.load(script);
-    return Response.json({ ok: true, player: player.info() });
-  }
-
-  async function playerRequest(req: Request): Promise<Response> {
-    const data = (await req.json().catch(() => ({}))) as { cmd?: string; at?: string };
-    let error: string | null = null;
-    if (data.cmd === "resume") {
-      if (!present.on) {
-        const rect = player.script()?.rect;
-        setPresent({ on: true, rect: rect ? parseRect(rect)! : undefined, since: new Date().toISOString() });
-      }
-      error = player.resume();
-    } else if (data.cmd === "pause") player.pause();
-    else if (data.cmd === "goto") {
-      const pos = parsePos(data.at ?? "");
-      error = pos ? await player.goto(pos) : "invalid_position";
-    } else error = "unknown_cmd";
-    if (error) return Response.json({ ok: false, error, player: player.info() }, { status: 400 });
-    return Response.json({ ok: true, player: player.info() });
+    broadcast("present", present);
   }
 
   async function presentRequest(req: Request): Promise<Response> {
@@ -387,11 +366,10 @@ export async function startServer(opts: ServerOptions) {
       // (The CLI stop comes from the agent itself and needs no notice.)
       let notified: string | undefined;
       if (was && data.from === "viewer") {
-        const at = where();
-        const r = await promptAgent("present-stop", `사용자가 페이지에서 발표를 종료함${at ? ` (대본 정지: ${at})` : ""}`);
+        const r = await promptAgent("present-stop", "사용자가 페이지에서 발표를 종료함");
         notified = r.ok ? "ok" : r.error;
       }
-      return Response.json({ ok: true, present: presentView(), notified });
+      return Response.json({ ok: true, present, notified });
     }
     let rect: Rect | undefined;
     if (data.rect != null) {
@@ -399,7 +377,7 @@ export async function startServer(opts: ServerOptions) {
       if (!rect) return Response.json({ ok: false, error: "invalid_rect" }, { status: 400 });
     }
     setPresent({ on: true, rect, since: present.on ? present.since : new Date().toISOString() });
-    return Response.json({ ok: true, present: presentView() });
+    return Response.json({ ok: true, present });
   }
 
   // ----- HTTP -----
@@ -440,7 +418,7 @@ export async function startServer(opts: ServerOptions) {
           tools: [...pendingTools.keys()],
         });
         if (lastStatus) send(c, "status", lastStatus);
-        send(c, "present", presentView());
+        send(c, "present", present);
         for (const t of pendingTools.values()) send(c, "tool_start", t);
         ping = setInterval(() => send(c, "ping", {}), 15000);
       },
@@ -465,33 +443,36 @@ export async function startServer(opts: ServerOptions) {
   }
 
   async function sendPrompt(req: Request): Promise<Response> {
-    const data = (await req.json().catch(() => ({}))) as { action?: string; text?: string };
+    const data = (await req.json().catch(() => ({}))) as { action?: string; text?: string; images?: unknown };
     const action = /^[\w-]{1,32}$/.test(data.action ?? "") ? data.action! : "message";
-    let text = data.text ?? "";
-    // Raised hand: stop the script at once (no agent round trip) and tell the
-    // agent where it stopped.
-    if (action === "hand-raise") {
-      player.pause();
-      const at = where();
-      if (at) text += ` (대본 정지: ${at})`;
-    }
+    const images = await saveImages(data.images);
+    if (!images) return Response.json({ ok: false, error: "invalid_images" }, { status: 400 });
+    const text = [data.text ?? "", ...images.map((p) => `[image: ${p}]`)].join("\n");
     const r = await promptAgent(action, text);
     return r.ok ? Response.json({ ok: true }) : Response.json({ ok: false, error: r.error }, { status: r.status });
   }
 
   async function route(req: Request, url: URL): Promise<Response> {
+    if (url.pathname.startsWith("/panes")) {
+      const res = await panesRoute(req, url.pathname, PANE);
+      if (res) return res;
+    }
     switch (url.pathname) {
       case "/status":
         return Response.json({
           ...(await checkStatus()),
           browser: opts.browser,
           screen: await screen.describe(),
-          present: presentView(),
+          present,
         });
       case "/events":
         return events();
       case "/screen":
         return screen.handle();
+      case "/terminal.js":
+        return new Response(terminalJS, { headers: { "Content-Type": "text/javascript; charset=utf-8" } });
+      case "/terminal.css":
+        return new Response(terminalCSS, { headers: { "Content-Type": "text/css; charset=utf-8" } });
       case "/agent-bridge.js":
         return new Response(COMPONENT, {
           headers: { "Content-Type": "text/javascript; charset=utf-8", "Cache-Control": "no-store" },
@@ -499,30 +480,36 @@ export async function startServer(opts: ServerOptions) {
       case "/send":
         if (req.method === "POST") return sendPrompt(req);
         break;
-      case "/present":
-        return req.method === "POST" ? presentRequest(req) : Response.json(presentView());
-      case "/script":
-        return scriptRequest(req);
-      case "/player":
-        if (req.method === "POST") return playerRequest(req);
+      case "/upload":
+        if (req.method === "POST") {
+          const data = (await req.json().catch(() => ({}))) as { images?: unknown };
+          const paths = data.images === undefined ? null : await saveImages(data.images);
+          return paths ? Response.json({ ok: true, paths }) : Response.json({ ok: false, error: "invalid_images" }, { status: 400 });
+        }
         break;
+      case "/present":
+        return req.method === "POST" ? presentRequest(req) : Response.json(present);
     }
     return new Response(HTML, { headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } });
   }
 
-  const server = Bun.serve({
+  const server = Bun.serve<SocketData>({
     hostname: "127.0.0.1",
     port: opts.port,
     idleTimeout: 0, // keep SSE open
     websocket: {
-      message(_ws, msg) {
-        screen.input(String(msg));
+      maxPayloadLength: 128 * 1024,
+      open(ws) { if (ws.data.kind === "terminal") terminal.open(ws); },
+      message(ws, msg) {
+        if (ws.data.kind === "terminal") terminal.message(ws, String(msg));
+        else screen.input(String(msg));
       },
+      close(ws) { if (ws.data.kind === "terminal") terminal.close(ws); },
     },
     async fetch(req, server) {
       const url = new URL(req.url);
       const origin = req.headers.get("Origin");
-      const isScript = url.pathname === "/agent-bridge.js";
+      const isScript = ["/agent-bridge.js", "/terminal.js", "/terminal.css"].includes(url.pathname);
 
       // The component script itself is public; data and input endpoints are origin-checked.
       if (!isScript && !originAllowed(origin, url.origin))
@@ -541,8 +528,9 @@ export async function startServer(opts: ServerOptions) {
           origin,
         );
 
-      if (url.pathname === "/input")
-        return server.upgrade(req) ? undefined : new Response("websocket required", { status: 426 });
+      if (url.pathname === "/input" || url.pathname === "/terminal")
+        return server.upgrade(req, { data: { kind: url.pathname === "/terminal" ? "terminal" : "screen" } })
+          ? undefined : new Response("websocket required", { status: 426 });
 
       const res = await route(req, url);
       return isScript ? (res.headers.set("Access-Control-Allow-Origin", "*"), res) : withCors(res, origin);
@@ -555,6 +543,7 @@ export async function startServer(opts: ServerOptions) {
     session: SESSION,
     transcript,
     stop() {
+      terminal.stop();
       timers.forEach(clearInterval);
       server.stop(true);
     },