agello 0.2.0 → 0.2.1

package/README.md

@@ -69,6 +69,8 @@ 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`.
 
@@ -87,6 +89,23 @@ 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

package/bin/agello.ts

@@ -27,6 +27,13 @@ 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:
@@ -284,6 +291,56 @@ 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,
@@ -291,6 +348,14 @@ 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 };
@@ -337,6 +402,9 @@ 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.0",
+  "version": "0.2.1",
   "description": "Talk to a coding agent in a herdr pane from the browser: chat, live status, and a shared browser screen.",
   "keywords": [
     "herdr",

package/src/player.ts

@@ -0,0 +1,234 @@
+// Presentation script player.
+//
+// A script is a list of steps. Each step has an optional `go` (how to bring the
+// screen to that step: "#3" sets location.hash, anything else is evaluated as
+// JS in the page; written by the agent, agello knows nothing about the deck)
+// and lines (`say`), each shown as one bubble.
+//
+// The player owns order and timing: entering a step runs its `go`, then every
+// line is sent and held for its reading time (see PACE). pause() stops at once and keeps
+// the position, resume() re-runs the current step's `go` (the agent may have
+// moved the screen meanwhile) and continues from the next unshown line.
+// goto() moves the position and shows that step without playing.
+//
+// Positions are "step.line", 1-based, in everything that leaves this module.
+
+import type { Rect } from "./screencast.ts";
+
+export type Step = { go?: string; say: string[]; hold?: number };
+export type Script = { rect?: Rect; steps: Step[] };
+export type PlayerInfo = {
+  state: "empty" | "ready" | "playing" | "paused" | "done";
+  next?: string; // next line to show ("3.2")
+  last?: string; // last line shown
+  steps: number;
+};
+
+// Pacing: the audience looks at a new screen first, then reads and thinks.
+//   go -> 1s -> line (shown >= 10s) -> fades out -> 0.3s -> next line
+//                                     last line -> fades out -> 0.7s -> next step's go
+const MIN_HOLD = 10;
+const MAX_HOLD = 20;
+export const PACE = { afterGo: 1000, fade: 500, betweenLines: 300, afterStep: 700 };
+
+// How long one line stays on screen (s): at least 10s, longer text a bit more
+// (about 8 chars/s past the first ~50 chars), at most 20s. `hold` can only
+// lengthen it.
+export function lineHold(text: string, hold?: number): number {
+  const auto = Math.min(MAX_HOLD, Math.max(MIN_HOLD, 4 + [...text].length / 8));
+  return hold != null && Number.isFinite(hold) && hold > 0 ? Math.max(MIN_HOLD, hold) : auto;
+}
+
+export function parseRectString(v: unknown): Rect | undefined {
+  if (v && typeof v === "object") {
+    const r = v as any;
+    return { x: r.x, y: r.y, w: r.w, h: r.h };
+  }
+  if (typeof v !== "string") return undefined;
+  const n = v.split(/[\s,]+/).filter(Boolean).map(Number);
+  return n.length === 4 ? { x: n[0], y: n[1], w: n[2], h: n[3] } : undefined;
+}
+
+// Validate a script from JSON. Returns the script or an error message.
+export function parseScript(raw: any): Script | string {
+  if (!raw || typeof raw !== "object") return "script must be an object";
+  if (!Array.isArray(raw.steps) || !raw.steps.length) return "steps must be a non-empty array";
+  const steps: Step[] = [];
+  for (const [i, s] of raw.steps.entries()) {
+    const at = `steps[${i}]`;
+    if (!s || typeof s !== "object") return `${at} must be an object`;
+    if (s.go != null && typeof s.go !== "string") return `${at}.go must be a string`;
+    const say = s.say == null ? [] : Array.isArray(s.say) ? s.say : [s.say];
+    if (!say.every((l: unknown) => typeof l === "string" && l.trim())) return `${at}.say must be non-empty strings`;
+    if (s.hold != null && !(Number.isFinite(s.hold) && s.hold > 0)) return `${at}.hold must be a positive number`;
+    steps.push({ go: s.go || undefined, say: say.map((l: string) => l.trim()), hold: s.hold });
+  }
+  const rect = raw.rect == null ? undefined : parseRectString(raw.rect);
+  if (raw.rect != null && !rect) return "rect must be \"x,y,w,h\" or {x,y,w,h}";
+  return { rect, steps };
+}
+
+// "3" or "3.2" (1-based) -> 0-based position
+export function parsePos(v: string): { step: number; line: number } | null {
+  const m = String(v).trim().match(/^(\d+)(?:\.(\d+))?$/);
+  if (!m) return null;
+  const step = Number(m[1]) - 1;
+  const line = m[2] ? Number(m[2]) - 1 : 0;
+  return step >= 0 && line >= 0 ? { step, line } : null;
+}
+
+export function createPlayer(deps: {
+  go: (expr: string) => Promise<void>;
+  say: (text: string, at: string, hold: number) => void;
+  done: () => void;
+  changed: () => void;
+}) {
+  let script: Script | null = null;
+  let state: PlayerInfo["state"] = "empty";
+  let cur = { step: 0, line: 0 }; // next line to show
+  let last: { step: number; line: number } | null = null;
+  let entered = false; // `go` of cur.step already run in this play run
+  let run = 0; // bumps on every pause/goto/load, stale timers check it
+  let timer: Timer | null = null;
+
+  const fmt = (p: { step: number; line: number }) => `${p.step + 1}.${p.line + 1}`;
+  const set = (s: PlayerInfo["state"]) => {
+    state = s;
+    deps.changed();
+  };
+  const cancel = () => {
+    run++;
+    if (timer) clearTimeout(timer);
+    timer = null;
+  };
+  const wait = (ms: number, id: number, fn: () => void) => {
+    timer = setTimeout(() => id === run && fn(), ms);
+  };
+
+  function info(): PlayerInfo {
+    const steps = script?.steps.length ?? 0;
+    // next line as it will be played (a finished step points at the next step)
+    let p = cur;
+    while (script && p.step < steps && p.line >= Math.max(1, script.steps[p.step].say.length))
+      p = { step: p.step + 1, line: 0 };
+    return {
+      state,
+      steps,
+      next: script && p.step < steps ? fmt(p) : undefined,
+      last: last ? fmt(last) : undefined,
+    };
+  }
+
+  // Skip past finished steps (cur.line beyond the step's lines).
+  function normalize() {
+    if (!script) return;
+    while (cur.step < script.steps.length && cur.line >= Math.max(1, script.steps[cur.step].say.length)) {
+      cur = { step: cur.step + 1, line: 0 };
+      entered = false;
+    }
+  }
+
+  async function tick(id: number) {
+    if (id !== run || state !== "playing" || !script) return;
+    normalize();
+    if (cur.step >= script.steps.length) {
+      set("done");
+      deps.done();
+      return;
+    }
+    const step = script.steps[cur.step];
+    if (!entered) {
+      entered = true;
+      if (step.go) {
+        await deps.go(step.go);
+        if (id !== run) return;
+        wait(PACE.afterGo, id, () => tick(id));
+        return;
+      }
+    }
+    if (!step.say.length) {
+      // silent step: just show the screen for `hold` seconds
+      cur = { step: cur.step, line: 1 };
+      deps.changed();
+      wait(lineHold("", step.hold) * 1000 + PACE.afterStep, id, () => tick(id));
+      return;
+    }
+    const text = step.say[cur.line];
+    const hold = lineHold(text, step.hold);
+    const lastLine = cur.line === step.say.length - 1;
+    last = { ...cur };
+    deps.say(text, fmt(cur), hold);
+    cur = { step: cur.step, line: cur.line + 1 };
+    deps.changed();
+    const gap = lastLine ? PACE.afterStep : PACE.betweenLines;
+    wait(hold * 1000 + PACE.fade + gap, id, () => tick(id));
+  }
+
+  return {
+    info,
+    script: () => script,
+
+    // Replace the script, keeping the position (clamped) and the state.
+    load(next: Script) {
+      const playing = state === "playing";
+      cancel();
+      script = next;
+      if (cur.step > next.steps.length) cur = { step: next.steps.length, line: 0 };
+      normalize();
+      if (state === "empty") state = "ready";
+      if (state === "done" && cur.step < next.steps.length) state = "paused";
+      if (playing) {
+        entered = true; // screen is already on this step
+        tick(run);
+      }
+      deps.changed();
+    },
+
+    resume(): string | null {
+      if (!script) return "no_script";
+      if (state === "playing") return null;
+      if (state === "done") return "done";
+      cancel();
+      entered = false; // bring the screen back to the current step first
+      set("playing");
+      tick(run);
+      return null;
+    },
+
+    pause() {
+      if (state !== "playing") return;
+      cancel();
+      set("paused");
+    },
+
+    // Move to a step (and line) and show its screen. Does not play; if it was
+    // playing, it keeps playing from there.
+    async goto(pos: { step: number; line: number }): Promise<string | null> {
+      if (!script) return "no_script";
+      const step = script.steps[pos.step];
+      if (!step) return "no_such_step";
+      if (pos.line > 0 && pos.line >= step.say.length) return "no_such_line";
+      const playing = state === "playing";
+      cancel();
+      cur = { ...pos };
+      entered = false;
+      if (playing) {
+        tick(run);
+        return null;
+      }
+      if (state !== "ready") state = "paused";
+      if (step.go) await deps.go(step.go);
+      entered = true;
+      deps.changed();
+      return null;
+    },
+
+    // Presentation ended: stop where it is.
+    stop() {
+      if (state === "playing") {
+        cancel();
+        set("paused");
+      }
+    },
+  };
+}

package/src/screencast.ts

@@ -268,5 +268,12 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     return browser ? { connected: false, browser: browser.key } : { connected: false, reason };
   }
 
-  return { handle, input, describe, setClip };
+  // 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 };
 }

package/src/server.ts

@@ -11,10 +11,14 @@
 // 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 { 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 = {
@@ -90,7 +94,7 @@ export function parseRect(r: any): Rect | null {
   return { x, y, w, h };
 }
 
-export type Present = { on: boolean; rect?: Rect; since?: string };
+export type Present = { on: boolean; rect?: Rect; since?: string; player?: PlayerInfo };
 
 type Status =
   | { alive: false; reason: string; pane: string }
@@ -311,10 +315,67 @@ 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);
-    broadcast("present", present);
+    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() });
   }
 
   async function presentRequest(req: Request): Promise<Response> {
@@ -326,10 +387,11 @@ 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 r = await promptAgent("present-stop", "사용자가 페이지에서 발표를 종료함");
+        const at = where();
+        const r = await promptAgent("present-stop", `사용자가 페이지에서 발표를 종료함${at ? ` (대본 정지: ${at})` : ""}`);
         notified = r.ok ? "ok" : r.error;
       }
-      return Response.json({ ok: true, present, notified });
+      return Response.json({ ok: true, present: presentView(), notified });
     }
     let rect: Rect | undefined;
     if (data.rect != null) {
@@ -337,7 +399,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 });
+    return Response.json({ ok: true, present: presentView() });
   }
 
   // ----- HTTP -----
@@ -378,7 +440,7 @@ export async function startServer(opts: ServerOptions) {
           tools: [...pendingTools.keys()],
         });
         if (lastStatus) send(c, "status", lastStatus);
-        send(c, "present", present);
+        send(c, "present", presentView());
         for (const t of pendingTools.values()) send(c, "tool_start", t);
         ping = setInterval(() => send(c, "ping", {}), 15000);
       },
@@ -405,7 +467,15 @@ 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 action = /^[\w-]{1,32}$/.test(data.action ?? "") ? data.action! : "message";
-    const r = await promptAgent(action, data.text ?? "");
+    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 r = await promptAgent(action, text);
     return r.ok ? Response.json({ ok: true }) : Response.json({ ok: false, error: r.error }, { status: r.status });
   }
 
@@ -416,7 +486,7 @@ export async function startServer(opts: ServerOptions) {
           ...(await checkStatus()),
           browser: opts.browser,
           screen: await screen.describe(),
-          present,
+          present: presentView(),
         });
       case "/events":
         return events();
@@ -430,7 +500,12 @@ export async function startServer(opts: ServerOptions) {
         if (req.method === "POST") return sendPrompt(req);
         break;
       case "/present":
-        return req.method === "POST" ? presentRequest(req) : Response.json(present);
+        return req.method === "POST" ? presentRequest(req) : Response.json(presentView());
+      case "/script":
+        return scriptRequest(req);
+      case "/player":
+        if (req.method === "POST") return playerRequest(req);
+        break;
     }
     return new Response(HTML, { headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } });
   }

package/web/agent-bridge.js

@@ -36,6 +36,9 @@
 //   closing it without asking sends action=hand-lower so it can go on.
 //   The viewer's questions show as bubbles too, with the same 10s lifetime.
 //   An end button above it stops the presentation for every viewer.
+//   Script lines (`agello script` + `present resume`) arrive as agent messages
+//   with `script: "step.line"`. While the script is not playing and the agent
+//   is working (e.g. answering a question), a small loader is shown.
 //
 // Methods
 //   el.send(text, action = 'message') -> Promise<{ok, error?}>
@@ -199,6 +202,14 @@ h1 { font-size: 14px; margin: 0; font-weight: 600; }
 .caption a { color: inherit; }
 @keyframes capIn { from { opacity: 0; translate: 0 10px; } }
 
+/* agent busy while presenting (answering, fixing the script): minimal loader */
+.busy { display: none; }
+.body.present .busy.on { position: absolute; left: 22px; bottom: 28px; z-index: 5; display: flex; align-items: center;
+  gap: 9px; padding: 9px 14px; border-radius: 999px; font-size: 13px; color: #fff; background: rgba(20, 20, 22, .72);
+  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 30px rgba(0,0,0,.35);
+  animation: capIn .25s ease; }
+.busy .spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
+
 /* raise hand: ask the agent mid-presentation */
 .hand-wrap { display: none; }
 .body.present .hand-wrap { position: absolute; right: 22px; bottom: 28px; z-index: 5; display: flex;
@@ -328,6 +339,7 @@ const TEMPLATE = `
     <button class="control-btn" role="switch" aria-checked="false" title="켜면 마우스와 키보드 입력이 브라우저로 전달돼요 (끄기: Shift+Esc)">
       <span>내 조작</span><span class="track"><span class="knob"></span></span><span class="state-label">OFF</span></button></div>
   <div class="viewport"><div class="ring"></div><div class="glow"></div><div class="agent-badge">에이전트 조작 중</div><img alt="에이전트 브라우저 화면" draggable="false"><textarea class="kbd" aria-label="브라우저 키보드 입력"></textarea><div class="placeholder">열린 terminal-browser 없음</div><div class="captions" part="captions" aria-live="polite"></div>
+    <div class="busy" part="busy" role="status"><span class="spinner"></span><span>답변 준비 중</span></div>
     <div class="hand-wrap">
       <form class="ask" part="ask" hidden><textarea aria-label="에이전트에게 질문" placeholder="에이전트에게 질문 (Enter 전송, Esc 닫기)"></textarea>
         <div class="ask-row"><span class="ask-hint"></span><button type="submit" class="primary">보내기</button></div></form>
@@ -370,7 +382,7 @@ class AgentBridge extends HTMLElement {
       live: q(".live"), url: q(".screen-bar .url"), viewport: q(".viewport"), img: q(".viewport img"),
       controlBtn: q(".control-btn"), kbd: q(".kbd"), clearBtn: q(".clear-btn"),
       body: q(".body"), screen: q(".screen"), captions: q(".captions"),
-      hand: q(".hand"), end: q(".end"), ask: q(".ask"), askBox: q(".ask textarea"), askHint: q(".ask-hint"),
+      busy: q(".busy"), hand: q(".hand"), end: q(".end"), ask: q(".ask"), askBox: q(".ask textarea"), askHint: q(".ask-hint"),
     };
     this.$.buttons.forEach((b) => b.addEventListener("click", () => this.#submit(b.dataset.action)));
     this.#bindGrip();
@@ -452,7 +464,8 @@ class AgentBridge extends HTMLElement {
     on("message", (m) => {
       this.#addMessage(m);
       this.#saveMessage(m);
-      if (this.#present.on && m.role === "assistant") this.#caption(m.text);
+      // script lines carry their own on-screen time (>= 10s), others use CAPTION_MS
+      if (this.#present.on && m.role === "assistant") this.#caption(m.text, "agent", m.hold * 1000 || undefined);
       if (this.#present.on && m.role === "browser" && m.action === "message") this.#caption(m.text, "user");
       this.#emit("agent-message", m);
     });
@@ -498,6 +511,7 @@ class AgentBridge extends HTMLElement {
     const was = this.#present.on;
     this.#present = p ?? { on: false };
     this.#emit("agent-present", this.#present);
+    this.#renderBusy();
     if (on === was) return;
     if (on) this.#setControl(false);
     else { this.$.captions.replaceChildren(); this.#openAsk(false); this.#handUp = false; }
@@ -515,6 +529,12 @@ class AgentBridge extends HTMLElement {
       { duration: on ? 420 : 360, easing: "cubic-bezier(.2, .7, .2, 1)" });
   }
 
+  #renderBusy() {
+    const s = this.#status;
+    const busy = this.#present.on && s?.alive && s.status === "working" && this.#present.player?.state !== "playing";
+    this.$.busy.classList.toggle("on", !!busy);
+  }
+
   // Raise hand: open a small input over the presentation and send it as a message.
   #bindHand() {
     const { hand, ask, askBox, askHint } = this.$;
@@ -574,7 +594,7 @@ class AgentBridge extends HTMLElement {
 
   // Agent reply as a short-lived bubble over the presented screen.
   // kind "user": the viewer's own question (plain text, accent colour).
-  #caption(text, kind = "agent") {
+  #caption(text, kind = "agent", ms = AgentBridge.CAPTION_MS) {
     if (!text?.trim()) return;
     const el = document.createElement("div");
     el.className = `caption ${kind}`;
@@ -589,7 +609,7 @@ class AgentBridge extends HTMLElement {
       el.classList.add("out");
       setTimeout(() => el.remove(), 500);
     };
-    setTimeout(leave, AgentBridge.CAPTION_MS);
+    setTimeout(leave, ms);
     const live = [...box.children].filter((c) => !c.classList.contains("out"));
     live.slice(0, Math.max(0, live.length - AgentBridge.CAPTION_MAX)).forEach((c) => c.__leave?.());
     el.__leave = leave;
@@ -884,7 +904,7 @@ class AgentBridge extends HTMLElement {
       return;
     } else if (m.role === "assistant") {
       wrap.className = "msg assistant";
-      meta.textContent = `에이전트 · ${time}`;
+      meta.textContent = `에이전트${m.script ? ` · 대본 ${m.script}` : ""} · ${time}`;
       if (this.#md) bubble.innerHTML = this.#md(m.text);
       else { bubble.textContent = m.text; bubble.classList.add("plain"); }
     } else if (m.role === "browser") {
@@ -946,6 +966,7 @@ class AgentBridge extends HTMLElement {
     this.$.buttons.forEach((b) => (b.disabled = !canSend));
     if (!s || !s.alive || s.status === "idle") this.#tools.clear();
     this.#renderActivity();
+    this.#renderBusy();
     this.#emit("agent-status", s);
   }