agello 0.1.1 → 0.2.0

package/README.md

@@ -38,16 +38,19 @@ Run inside the herdr pane where the agent is running (`$HERDR_PANE_ID` is picked
 
 ```sh
 agello start --open      # start in the background and open the page
-agello status            # list running servers
-agello stop              # stop
+agello status            # list running servers (pane, agent state, screen browser)
+agello stop              # stop this pane's server
 ```
 
 Or target another pane:
 
 ```sh
-agello start --pane w1:p2 --port 8766
+agello start --pane w1:p2
+agello stop --pane w1:p2
 ```
 
+One server per pane. `start` reuses the pane's server if it is already running, and otherwise picks the first free port from 8765 (so servers for different panes never collide). The screen panel only uses the terminal-browser given with `--browser` or the one in the agent's own herdr tab, never another tab's.
+
 Messages sent from the page arrive in the agent as:
 
 ```
@@ -61,14 +64,29 @@ The approve / reject buttons send `action=approve` / `action=reject`.
 | Command | Description |
 |---|---|
 | `agello start [options]` | Start a server in the background |
-| `agello stop [--port N \| --all]` | Stop a server |
-| `agello status [--json]` | List running servers and agent state |
-| `agello open [--port N]` | Open the page in the default browser |
+| `agello stop [--port N \| --pane ID \| --all]` | Stop a server (default: this pane's) |
+| `agello status [--json]` | List running servers, agent state and screen browser |
+| `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 |
 
-`start` options: `--pane <id>`, `--port <n>` (default 8765), `--session <id>`, `--browser <terminal-browser key>`, `--allow-origin <origin>` (repeatable), `--open`, `--foreground`.
+`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`.
 
+### Presentation mode
+
+`agello present x,y,w,h` (CSS px of the browser's visible viewport; omit for the whole screen):
+
+- only that rectangle is sent to the page (`Page.captureScreenshot` with a clip, at device resolution)
+- the screen panel expands to fill the window
+- agent replies appear over it as bubbles that fade after 10s
+- `agello present stop` returns to the normal layout; the replies are in the chat as usual
+- the viewer can ask a question with the raise-hand button (its bubble fades after 10s too) or end the presentation with the end button; the agent then receives `[browser] action=present-stop`
+- raising the hand tells the agent at once (`action=hand-raise`) so it can pause; closing the input without asking sends `action=hand-lower`
+
+Run `present` again to move the crop. User control is off while presenting.
+
 ## Embed
 
 ```html

package/bin/agello.ts

@@ -3,6 +3,7 @@
 
 import { spawn } from "node:child_process";
 import { existsSync, mkdirSync, openSync, readdirSync, rmSync } from "node:fs";
+import { createServer } from "node:net";
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { parseArgs } from "node:util";
@@ -11,22 +12,28 @@ import { startServer } from "../src/server.ts";
 
 const NAME = "agello";
 const DEFAULT_PORT = 8765;
+const PORT_RANGE_END = 8799; // auto-picked ports: DEFAULT_PORT..PORT_RANGE_END
 const STATE_DIR = join(process.env.XDG_STATE_HOME ?? join(homedir(), ".local", "state"), NAME);
 
 const HELP = `${NAME} ${pkg.version}: talk to a coding agent in a herdr pane from the browser
 
 Usage:
-  ${NAME} start [options]      Start a bridge server in the background
-  ${NAME} stop [--port N|--all] Stop a running server
+  ${NAME} start [options]      Start a bridge server for a pane in the background
+  ${NAME} stop [--port N|--pane ID|--all]  Stop a server (default: this pane's)
   ${NAME} status [--json]      List running servers
-  ${NAME} open [--port N]      Open the bridge page in the default browser
+  ${NAME} open [--port N|--pane ID]        Open the page (default: this pane's server)
+  ${NAME} present [x,y,w,h] [--port N|--pane ID]  Presentation mode: the page shows only the screen,
+                         full size, cropped to the rect (CSS px of the visible viewport; omit for the
+                         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} help | --version
 
 start options:
   --pane <id>            herdr pane of the agent (default: $HERDR_PANE_ID)
-  --port <n>             port (default: ${DEFAULT_PORT})
+  --port <n>             port (default: first free port from ${DEFAULT_PORT})
   --session <id>         expected agent session id (default: session seen at start)
-  --browser <key>        terminal-browser key for the screen panel (default: same herdr tab)
+  --browser <key>        terminal-browser key for the screen panel (default: the one in the same herdr tab)
   --allow-origin <o>     extra allowed origin for embedding, repeatable ("null" for file://)
   --open                 open the page after starting
   --foreground           run in this process instead of the background
@@ -40,6 +47,7 @@ type Instance = {
   port: number;
   pane: string;
   session?: string;
+  browser?: string; // --browser given at start (unset: same herdr tab)
   url: string;
   log: string;
   startedAt: string;
@@ -89,6 +97,33 @@ async function fetchStatus(url: string): Promise<any | null> {
   }
 }
 
+function portFree(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const s = createServer();
+    s.once("error", () => resolve(false));
+    s.listen(port, "127.0.0.1", () => s.close(() => resolve(true)));
+  });
+}
+
+// Which server a stop/open without --all targets: --port, else --pane,
+// else this pane's ($HERDR_PANE_ID), else the only running one.
+async function resolveTarget(o: { port?: string; pane?: string }): Promise<Instance> {
+  const all = await listInstances();
+  if (o.port) {
+    const i = all.find((x) => x.port === Number(o.port));
+    return i ?? fail(`nothing running on port ${o.port}`);
+  }
+  const pane = o.pane ?? process.env.HERDR_PANE_ID;
+  if (pane) {
+    const i = all.find((x) => x.pane === pane);
+    if (i) return i;
+    if (o.pane) fail(`nothing running for pane ${pane}`);
+  }
+  if (all.length === 1) return all[0];
+  if (!all.length) fail(`not running; run \`${NAME} start\``);
+  return fail(`several servers running; pass --port or --pane:\n${all.map((i) => `  ${i.url}  pane=${i.pane}`).join("\n")}`);
+}
+
 function openUrl(url: string) {
   const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
   Bun.spawn([cmd, url], { stdout: "ignore", stderr: "ignore" });
@@ -106,7 +141,7 @@ async function cmdStart(argv: string[]) {
     args: argv,
     options: {
       pane: { type: "string", default: process.env.HERDR_PANE_ID },
-      port: { type: "string", default: String(DEFAULT_PORT) },
+      port: { type: "string" },
       session: { type: "string" },
       browser: { type: "string" },
       "allow-origin": { type: "string", multiple: true, default: [] },
@@ -114,18 +149,33 @@ async function cmdStart(argv: string[]) {
       foreground: { type: "boolean", default: false },
     },
   });
-  const port = Number(o.port);
   if (!o.pane) fail("--pane is required (HERDR_PANE_ID is not set; run inside herdr or pass --pane)");
   if (!Bun.which("herdr")) fail("herdr not found on PATH");
   mkdirSync(STATE_DIR, { recursive: true });
+  const pane = o.pane!;
 
-  const existing = await readInstance(port);
-  if (existing) {
-    console.log(`already running: ${existing.url} (pane ${existing.pane}, pid ${existing.pid})`);
-    if (o.open) openUrl(existing.url);
+  // One server per pane: reuse this pane's server, never another pane's.
+  const all = await listInstances();
+  const mine = all.find((i) => i.pane === pane);
+  if (mine) {
+    console.log(`already running: ${mine.url} (pane ${mine.pane}, pid ${mine.pid})`);
+    if (o.open) openUrl(mine.url);
     return;
   }
 
+  let port: number;
+  if (o.port) {
+    port = Number(o.port);
+    const other = all.find((i) => i.port === port);
+    if (other) fail(`port ${port} is used by the server for pane ${other.pane} (${other.url}); omit --port to pick a free one`);
+    if (!(await portFree(port))) fail(`port ${port} is in use by another program`);
+  } else {
+    let found = 0;
+    for (let p = DEFAULT_PORT; p <= PORT_RANGE_END && !found; p++)
+      if (!all.some((i) => i.port === p) && (await portFree(p))) found = p;
+    port = found || fail(`no free port in ${DEFAULT_PORT}-${PORT_RANGE_END}; pass --port`);
+  }
+
   if (o.foreground) {
     const srv = await startServer({
       port,
@@ -139,6 +189,7 @@ async function cmdStart(argv: string[]) {
       port,
       pane: srv.pane,
       session: srv.session,
+      browser: o.browser,
       url: srv.url,
       log: logPath(port),
       startedAt: new Date().toISOString(),
@@ -157,7 +208,10 @@ async function cmdStart(argv: string[]) {
   }
 
   // Background: re-run this CLI with --foreground, detached, logging to a file.
-  const args = argv.filter((a) => a !== "--open");
+  const args = ["--pane", pane, "--port", String(port)];
+  if (o.session) args.push("--session", o.session);
+  if (o.browser) args.push("--browser", o.browser);
+  for (const origin of o["allow-origin"] as string[]) args.push("--allow-origin", origin);
   const log = openSync(logPath(port), "a");
   const child = spawn(process.execPath, [import.meta.path, "start", "--foreground", ...args], {
     detached: true,
@@ -171,7 +225,7 @@ async function cmdStart(argv: string[]) {
   while (Date.now() < deadline) {
     if (child.exitCode !== null || !isAlive(child.pid!)) fail(`server exited; see ${logPath(port)}`);
     if ((await readInstance(port)) && (await fetchStatus(url))) {
-      console.log(`started: ${url} (pane ${o.pane}, pid ${child.pid})`);
+      console.log(`started: ${url} (pane ${pane}, pid ${child.pid})`);
       console.log(`log: ${logPath(port)}`);
       if (o.open) openUrl(url);
       return;
@@ -184,11 +238,9 @@ async function cmdStart(argv: string[]) {
 async function cmdStop(argv: string[]) {
   const { values: o } = parseArgs({
     args: argv,
-    options: { port: { type: "string" }, all: { type: "boolean", default: false } },
+    options: { port: { type: "string" }, pane: { type: "string" }, all: { type: "boolean", default: false } },
   });
-  const targets = o.all
-    ? await listInstances()
-    : [await readInstance(Number(o.port ?? DEFAULT_PORT))].filter((i): i is Instance => !!i);
+  const targets = o.all ? await listInstances() : [await resolveTarget(o)];
   if (!targets.length) {
     console.log("not running");
     return;
@@ -219,16 +271,51 @@ async function cmdStatus(argv: string[]) {
     const a = r.agent;
     const state = !a ? "unreachable" : a.alive ? a.status : `dead (${a.reason})`;
     const name = a?.label ? `${a.label} (${r.pane})` : r.pane;
-    console.log(`${r.url}  pane=${name}  agent=${state}  pid=${r.pid}`);
+    const scr = a?.screen;
+    const browser = scr?.browser ?? (scr?.reason ? `none (${scr.reason})` : "unknown");
+    console.log(`${r.url}  pane=${name}  agent=${state}  browser=${browser}  pid=${r.pid}`);
   }
 }
 
 async function cmdOpen(argv: string[]) {
-  const { values: o } = parseArgs({ args: argv, options: { port: { type: "string" } } });
-  const inst = await readInstance(Number(o.port ?? DEFAULT_PORT));
-  if (!inst) fail(`not running on port ${o.port ?? DEFAULT_PORT}; run \`${NAME} start\``);
-  openUrl(inst!.url);
-  console.log(inst!.url);
+  const { values: o } = parseArgs({ args: argv, options: { port: { type: "string" }, pane: { type: "string" } } });
+  const inst = await resolveTarget(o);
+  openUrl(inst.url);
+  console.log(inst.url);
+}
+
+async function cmdPresent(argv: string[]) {
+  const { values: o, positionals } = parseArgs({
+    args: argv,
+    options: { port: { type: "string" }, pane: { type: "string" } },
+    allowPositionals: true,
+  });
+  const inst = await resolveTarget(o);
+  const arg = positionals.join(",");
+  let body: object;
+  if (arg === "stop") body = { stop: true };
+  else if (!arg) body = {};
+  else {
+    const v = arg.split(/[\s,]+/).filter(Boolean).map(Number);
+    if (v.length !== 4 || !v.every(Number.isFinite)) fail(`rect must be x,y,w,h (got "${arg}")`);
+    body = { rect: { x: v[0], y: v[1], w: v[2], h: v[3] } };
+  }
+  let res: any;
+  try {
+    const r = await fetch(`${inst.url}/present`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      signal: AbortSignal.timeout(4000),
+    });
+    res = await r.json();
+  } catch {
+    fail(`server unreachable: ${inst.url}`);
+  }
+  if (!res?.ok) fail(res?.error ?? "failed");
+  const p = res.present;
+  if (!p.on) console.log("presentation: off");
+  else console.log(`presentation: on ${p.rect ? `rect=${p.rect.x},${p.rect.y},${p.rect.w},${p.rect.h}` : "(whole screen)"}`);
 }
 
 // ---------- main ----------
@@ -247,6 +334,9 @@ switch (cmd) {
   case "open":
     await cmdOpen(rest);
     break;
+  case "present":
+    await cmdPresent(rest);
+    break;
   case "--version":
   case "-v":
     console.log(pkg.version);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agello",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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/screencast.ts

@@ -14,8 +14,12 @@ type Browser = {
   tabs: { id: number; url: string; title: string; active: boolean; targetId: string; agentControlled: boolean }[];
 };
 
+// Presentation crop: a rectangle of the visible viewport, in CSS pixels.
+export type Rect = { x: number; y: number; w: number; h: number };
+
 export type ScreenMeta = {
   connected: boolean;
+  reason?: "browser_not_found" | "no_browser_in_tab" | "tab_unknown" | "no_active_tab";
   browser?: string;
   url?: string;
   title?: string;
@@ -27,11 +31,15 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
   const enc = new TextEncoder();
 
   let meta: ScreenMeta = { connected: false };
-  let lastFrame: { data: string; w: number; h: number } | null = null;
+  type Frame = { data: string; w: number; h: number; clip?: Rect };
+  let lastFrame: Frame | null = null; // full screencast frame
+  let lastCrop: Frame | null = null; // cropped frame while a clip is set
+  let clip: Rect | null = null;
   let ws: WebSocket | null = null;
   let wsTarget = "";
   let msgId = 0;
   let timer: Timer | null = null;
+  const pending = new Map<number, (result: any) => void>();
 
   const emit = (c: ReadableStreamDefaultController, event: string, data: unknown) => {
     try {
@@ -53,17 +61,83 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     return (await runJson(["terminal-browser", "ls", "--all", "--json"], 3000))?.browsers ?? [];
   }
 
-  async function pickBrowser(): Promise<Browser | undefined> {
+  // Only ever relay (and forward input to) the intended browser: the one given
+  // with --browser, or one in the agent's own herdr tab. Never fall back to
+  // another tab's browser: that would expose another agent's screen and let
+  // "my control" type into it.
+  async function pickBrowser(): Promise<{ browser?: Browser; reason?: ScreenMeta["reason"] }> {
     const all = await listBrowsers();
-    if (opts.browserKey) return all.find((b) => b.key === opts.browserKey);
+    if (opts.browserKey) {
+      const browser = all.find((b) => b.key === opts.browserKey);
+      return browser ? { browser } : { reason: "browser_not_found" };
+    }
     const tab = await opts.herdrTab?.();
-    return all.find((b) => b.pane?.tab === tab) ?? all[0];
+    if (!tab) return { reason: "tab_unknown" };
+    const browser = all.find((b) => b.pane?.tab === tab);
+    return browser ? { browser } : { reason: "no_browser_in_tab" };
   }
 
   function disconnect() {
     ws?.close();
     ws = null;
     wsTarget = "";
+    pending.forEach((r) => r(null));
+    pending.clear();
+  }
+
+  // CDP call that resolves with the result (null on error or closed socket).
+  function request(method: string, params: object = {}): Promise<any> {
+    const sock = ws;
+    if (!sock || sock.readyState !== WebSocket.OPEN) return Promise.resolve(null);
+    return new Promise((resolve) => {
+      const id = ++msgId;
+      const t = setTimeout(() => pending.delete(id) && resolve(null), 5000);
+      pending.set(id, (r) => (clearTimeout(t), resolve(r)));
+      sock.send(JSON.stringify({ id, method, params }));
+    });
+  }
+
+  // While a clip is set, only the clipped region is sent to viewers: every
+  // screencast frame (= the page changed) triggers one Page.captureScreenshot
+  // of the rectangle at full device resolution. At most one capture runs at a
+  // time; changes during a capture are coalesced into one more capture.
+  let capturing = false;
+  let dirty = false;
+  async function capture() {
+    if (!clip) return;
+    if (capturing) {
+      dirty = true;
+      return;
+    }
+    capturing = true;
+    try {
+      do {
+        dirty = false;
+        const c = clip;
+        if (!c) break;
+        // clip coordinates are document-relative; the rect is viewport-relative
+        const vv = (await request("Page.getLayoutMetrics"))?.cssVisualViewport;
+        if (!vv) break;
+        const shot = await request("Page.captureScreenshot", {
+          format: "jpeg",
+          quality: 85,
+          clip: { x: c.x + vv.pageX, y: c.y + vv.pageY, width: c.w, height: c.h, scale: 1 },
+        });
+        if (!shot?.data || clip !== c) continue;
+        lastCrop = { data: shot.data, w: c.w, h: c.h, clip: c };
+        broadcast("frame", lastCrop);
+        await Bun.sleep(100); // cap at ~10 captures/s
+      } while (dirty && clip);
+    } finally {
+      capturing = false;
+    }
+  }
+
+  function setClip(next: Rect | null) {
+    clip = next;
+    lastCrop = null;
+    if (clip) capture();
+    else if (lastFrame) broadcast("frame", lastFrame);
   }
 
   function connect(port: number, targetId: string) {
@@ -78,14 +152,22 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     sock.onopen = () => {
       call("Page.enable");
       call("Page.startScreencast", { format: "jpeg", quality: 70, maxWidth: 1600, maxHeight: 1600 });
+      if (clip) capture();
     };
     sock.onmessage = (ev) => {
       const msg = JSON.parse(String(ev.data));
+      if (msg.id && pending.has(msg.id)) {
+        const resolve = pending.get(msg.id)!;
+        pending.delete(msg.id);
+        resolve(msg.result ?? null);
+        return;
+      }
       if (msg.method !== "Page.screencastFrame") return;
       const { data, metadata, sessionId } = msg.params;
       call("Page.screencastFrameAck", { sessionId });
       lastFrame = { data, w: metadata.deviceWidth, h: metadata.deviceHeight };
-      broadcast("frame", lastFrame);
+      if (clip) capture();
+      else broadcast("frame", lastFrame);
     };
     sock.onclose = () => {
       if (ws === sock) {
@@ -107,12 +189,13 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
   }
 
   async function syncOnce() {
-    const b = await pickBrowser();
+    const { browser: b, reason } = await pickBrowser();
     const tab = b?.tabs.find((t) => t.active);
     if (!b || !tab) {
       disconnect();
       lastFrame = null;
-      setMeta({ connected: false });
+      lastCrop = null;
+      setMeta({ connected: false, reason: reason ?? "no_active_tab" });
       return;
     }
     const url = `ws://127.0.0.1:${b.cdpPort}/devtools/page/${tab.targetId}`;
@@ -136,6 +219,7 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     timer = null;
     disconnect();
     lastFrame = null;
+    lastCrop = null;
     meta = { connected: false };
   }
 
@@ -148,7 +232,8 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
         ctrl = c;
         viewers.add(c);
         emit(c, "meta", meta);
-        if (lastFrame) emit(c, "frame", lastFrame);
+        const f = clip ? lastCrop : lastFrame;
+        if (f) emit(c, "frame", f);
         ping = setInterval(() => emit(c, "ping", {}), 15000);
         start();
       },
@@ -171,9 +256,17 @@ export function createScreencast(opts: { browserKey?: string; herdrTab?: () => P
     } catch {
       return;
     }
-    if (!INPUT_METHODS.has(m?.method) || !ws || ws.readyState !== WebSocket.OPEN) return;
+    // input coordinates assume the full frame: ignore input while cropped
+    if (clip || !INPUT_METHODS.has(m?.method) || !ws || ws.readyState !== WebSocket.OPEN) return;
     ws.send(JSON.stringify({ id: ++msgId, method: m.method, params: m.params ?? {} }));
   }
 
-  return { handle, input };
+  // Which browser the relay uses (or would use), for status reporting.
+  async function describe(): Promise<ScreenMeta> {
+    if (meta.connected) return meta;
+    const { browser, reason } = await pickBrowser();
+    return browser ? { connected: false, browser: browser.key } : { connected: false, reason };
+  }
+
+  return { handle, input, describe, setClip };
 }

package/src/server.ts

@@ -7,11 +7,15 @@
 // POST /send             {action, text} -> herdr agent prompt
 // GET  /screen           SSE: terminal-browser screen frames (CDP screencast)
 // 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")
 
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { runJson } from "./run.ts";
-import { createScreencast } from "./screencast.ts";
+import { createScreencast, type Rect } from "./screencast.ts";
 
 export type ServerOptions = {
   port: number;
@@ -58,11 +62,36 @@ function toolSummary(input: any): string {
   return text.length > 80 ? text.slice(0, 80) + "…" : text;
 }
 
+// Some models emit user-facing narration as a `thinking` block whose signature
+// carries a "narration" marker. Claude Code renders these like normal replies,
+// so treat them as assistant text. Plain (unmarked) thinking stays hidden.
+// The marker is an undocumented detail of the signature; if it changes, these
+// blocks are simply not shown (same as before).
+export function isNarration(b: any): boolean {
+  if (b?.type !== "thinking" || typeof b.thinking !== "string" || !b.thinking.trim()) return false;
+  try {
+    return Buffer.from(String(b.signature ?? "").slice(0, 200), "base64").includes("narration");
+  } catch {
+    return false;
+  }
+}
+
 // Every herdr call is killed after `timeout` ms so a hung herdr cannot pile up processes.
 async function herdr(timeout: number, ...cmd: string[]): Promise<any> {
   return (await runJson(["herdr", ...cmd], timeout)) ?? { error: { code: "herdr_failed" } };
 }
 
+// Presentation rect from the API: finite, non-negative origin, positive size (CSS px).
+export function parseRect(r: any): Rect | null {
+  if (!r || typeof r !== "object") return null;
+  const v = [r.x, r.y, r.w, r.h].map(Number);
+  if (!v.every(Number.isFinite) || v[0] < 0 || v[1] < 0 || v[2] < 1 || v[3] < 1) return null;
+  const [x, y, w, h] = v.map(Math.round);
+  return { x, y, w, h };
+}
+
+export type Present = { on: boolean; rect?: Rect; since?: string };
+
 type Status =
   | { alive: false; reason: string; pane: string }
   | { alive: true; status: string; pane: string; label?: string; session: string; title?: string };
@@ -229,6 +258,8 @@ export async function startServer(opts: ServerOptions) {
       for (const b of content) {
         if (b.type === "text" && b.text.trim()) {
           broadcast("message", { role: "assistant", text: b.text, ts: d.timestamp });
+        } else if (isNarration(b)) {
+          broadcast("message", { role: "assistant", text: b.thinking, ts: d.timestamp, narration: true });
         } else if (b.type === "tool_use") {
           const t = { id: b.id, name: b.name, summary: toolSummary(b.input), ts: d.timestamp };
           pendingTools.set(b.id, t);
@@ -275,6 +306,40 @@ export async function startServer(opts: ServerOptions) {
     herdrTab: async () => (await agentInfo())?.tab_id,
   });
 
+  // ----- presentation mode -----
+  // on: viewers show only the screen, full size, with agent replies as
+  // short-lived bubbles. rect: crop of the visible viewport (unset = whole screen).
+
+  let present: Present = { on: false };
+  function setPresent(next: Present) {
+    present = next;
+    screen.setClip(next.on ? (next.rect ?? null) : null);
+    broadcast("present", present);
+  }
+
+  async function presentRequest(req: Request): Promise<Response> {
+    const data = (await req.json().catch(() => ({}))) as { rect?: unknown; stop?: boolean; from?: string };
+    if (data.stop) {
+      const was = present.on;
+      setPresent({ on: false });
+      // Ended from the page: the agent may still be presenting, so tell it.
+      // (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", "사용자가 페이지에서 발표를 종료함");
+        notified = r.ok ? "ok" : r.error;
+      }
+      return Response.json({ ok: true, present, notified });
+    }
+    let rect: Rect | undefined;
+    if (data.rect != null) {
+      rect = parseRect(data.rect) ?? undefined;
+      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 });
+  }
+
   // ----- HTTP -----
 
   // Same-origin and localhost pages are allowed by default; add more with
@@ -313,6 +378,7 @@ export async function startServer(opts: ServerOptions) {
           tools: [...pendingTools.keys()],
         });
         if (lastStatus) send(c, "status", lastStatus);
+        send(c, "present", present);
         for (const t of pendingTools.values()) send(c, "tool_start", t);
         ping = setInterval(() => send(c, "ping", {}), 15000);
       },
@@ -326,22 +392,32 @@ export async function startServer(opts: ServerOptions) {
     });
   }
 
-  async function sendPrompt(req: Request): Promise<Response> {
-    const data = (await req.json().catch(() => ({}))) as { action?: string; text?: string };
+  // Type a [browser] prompt into the agent session.
+  async function promptAgent(action: string, text: string): Promise<{ ok: boolean; error?: string; status?: number }> {
     const st = await checkStatus();
-    if (!st.alive) return Response.json({ ok: false, error: st.reason }, { status: 409 });
-    if (st.status === "blocked") return Response.json({ ok: false, error: "agent_blocked" }, { status: 409 });
+    if (!st.alive) return { ok: false, error: st.reason, status: 409 };
+    if (st.status === "blocked") return { ok: false, error: "agent_blocked", status: 409 };
+    const res = await herdr(10000, "agent", "prompt", PANE, formatPrompt(action, text.trim()));
+    if (res?.error) return { ok: false, error: res.error.code, status: 502 };
+    return { ok: true };
+  }
 
+  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 res = await herdr(10000, "agent", "prompt", PANE, formatPrompt(action, (data.text ?? "").trim()));
-    if (res?.error) return Response.json({ ok: false, error: res.error.code }, { status: 502 });
-    return Response.json({ ok: true });
+    const r = await promptAgent(action, data.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> {
     switch (url.pathname) {
       case "/status":
-        return Response.json(await checkStatus());
+        return Response.json({
+          ...(await checkStatus()),
+          browser: opts.browser,
+          screen: await screen.describe(),
+          present,
+        });
       case "/events":
         return events();
       case "/screen":
@@ -352,6 +428,9 @@ 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(present);
     }
     return new Response(HTML, { headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } });
   }

package/web/agent-bridge.js

@@ -23,10 +23,24 @@
 //   agent-tool     detail: { phase: 'start'|'end', id, name?, summary?, isError? }
 //                  (tool calls are also kept in the conversation as one-line rows, like the terminal)
 //   agent-screen   detail: { connected, browser?, url?, title?, agentControlled? }
+//   agent-present  detail: { on, rect?: {x,y,w,h}, since? }
+//
+// Presentation mode (started by the agent: `agello present [x,y,w,h]`)
+//   The screen panel expands to fill the window and shows only the given
+//   rectangle of the browser. Agent replies appear over it as bubbles that fade
+//   after 10s; they are also added to the chat, so it is all there when the
+//   presentation ends. User control is off while presenting.
+//   A raise-hand button next to the bubbles opens a small input so the viewer
+//   can ask the agent something mid-presentation (sent as action=message).
+//   Opening it tells the agent right away (action=hand-raise) so it can pause;
+//   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.
 //
 // Methods
 //   el.send(text, action = 'message') -> Promise<{ok, error?}>
 //   el.clearHistory()                  clear saved chat for the current pane
+//   el.stopPresent()                   end presentation mode, tell the agent -> Promise<{ok, error?, notified?}>
 
 const SCRIPT_ORIGIN = new URL(import.meta.url).origin;
 
@@ -47,7 +61,16 @@ const REASONS = {
   session_changed: "다른 세션으로 교체됨",
 };
 const STATES = { idle: "대기 중", working: "작업 중", blocked: "입력 대기", done: "완료", unknown: "상태 불명" };
-const ACTIONS = { message: "메시지", approve: "승인", reject: "거절" };
+const SCREEN_REASONS = {
+  browser_not_found: "지정한 terminal-browser(--browser)를 찾을 수 없음",
+  no_browser_in_tab: "이 herdr 탭에 열린 terminal-browser 없음",
+  tab_unknown: "에이전트의 herdr 탭을 확인할 수 없음",
+  no_active_tab: "브라우저에 활성 탭 없음",
+};
+const ACTIONS = {
+  message: "메시지", approve: "승인", reject: "거절",
+  "present-stop": "발표 종료", "hand-raise": "손들기", "hand-lower": "손 내림",
+};
 
 const CSS = `
 :host {
@@ -148,6 +171,60 @@ h1 { font-size: 14px; margin: 0; font-weight: 600; }
 .control-btn:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; border-radius: 6px; }
 @media (prefers-reduced-motion: reduce) { .control-btn .track, .control-btn .knob { transition: none; } }
 .placeholder { font-size: 13px; color: var(--_muted); text-align: center; }
+
+/* presentation mode: the screen panel covers the window, chat stays hidden underneath.
+   container-type would make the host the containing block of the fixed layer, so drop it. */
+:host([presenting]) { container-type: normal; }
+.body.present .screen { display: flex; position: fixed; inset: 0; z-index: 2147483000; border: 0;
+                        width: auto; height: auto; background: #0b0b0c; }
+.body.present .screen-bar, .body.present .ring, .body.present .glow, .body.present .agent-badge { display: none; }
+.body.present .viewport { padding: 0; background: #0b0b0c; }
+.body.present .viewport img { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0;
+                              box-shadow: none; }
+.captions { display: none; }
+.body.present .captions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex;
+  flex-direction: column; align-items: center; gap: 10px; padding: 0 88px 28px; pointer-events: none; }
+.caption { max-width: min(900px, 86%); padding: 12px 18px; border-radius: 16px; overflow-wrap: anywhere;
+  font-size: 18px; line-height: 1.5; color: #fff; background: rgba(20, 20, 22, .72);
+  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, .35); animation: capIn .3s ease; }
+.caption.plain { white-space: pre-wrap; }
+.caption.user { background: color-mix(in srgb, var(--_accent) 88%, transparent); }
+.caption.out { opacity: 0; translate: 0 6px; transition: opacity .5s ease, translate .5s ease; }
+.caption > :first-child { margin-top: 0; } .caption > :last-child { margin-bottom: 0; }
+.caption p, .caption ul, .caption ol { margin: .35em 0; }
+.caption code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: rgba(255,255,255,.14);
+                padding: 1px 5px; border-radius: 4px; }
+.caption pre { background: rgba(255,255,255,.1); padding: 8px 10px; border-radius: 8px; overflow-x: auto; }
+.caption a { color: inherit; }
+@keyframes capIn { from { opacity: 0; translate: 0 10px; } }
+
+/* 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;
+  flex-direction: column; align-items: flex-end; gap: 10px; }
+.hand, .end { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center;
+  color: #fff; border: 1px solid rgba(255,255,255,.18); 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);
+  transition: background .2s ease, transform .2s ease; }
+.hand:hover, .end:hover { background: rgba(40, 40, 44, .85); transform: translateY(-2px); }
+.hand[aria-expanded="true"] { background: var(--_accent); border-color: var(--_accent); }
+.hand.sent { background: var(--_ok); border-color: var(--_ok); }
+.end:hover { background: var(--_dead); border-color: var(--_dead); }
+.end:disabled { opacity: .5; cursor: progress; }
+.hand:focus-visible, .end:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+.hand svg, .end svg { width: 22px; height: 22px; }
+.ask { width: min(420px, calc(100vw - 44px)); padding: 12px; border-radius: 16px; color: #fff;
+  background: rgba(20, 20, 22, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
+  box-shadow: 0 8px 30px rgba(0,0,0,.4); animation: capIn .2s ease; }
+.ask[hidden] { display: none; }
+.ask textarea { min-height: 64px; background: rgba(255,255,255,.08); color: #fff;
+  border-color: rgba(255,255,255,.16); font-size: 15px; }
+.ask textarea::placeholder { color: rgba(255,255,255,.5); }
+.ask .ask-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.ask .ask-hint { font-size: 12px; color: rgba(255,255,255,.6); flex: 1; }
+@media (prefers-reduced-motion: reduce) { .hand, .ask { transition: none; animation: none; } }
+@media (prefers-reduced-motion: reduce) { .caption { animation: none; } .caption.out { transition: none; } }
 @container (max-width: 820px) {
   .body { flex-direction: column; }
   :host([screen]) .screen { order: -1; flex: none; height: 45%; border-left: 0; border-bottom: 1px solid var(--_line); }
@@ -250,7 +327,17 @@ const TEMPLATE = `
   <div class="screen-bar"><span class="live" hidden>에이전트 조작 중</span><span class="url"></span>
     <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>
+  <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="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>
+      <button class="end" part="end" type="button" aria-label="발표 종료" title="발표 종료">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+      <button class="hand" part="hand" type="button" aria-expanded="false" aria-label="손들기: 에이전트에게 질문" title="손들기: 에이전트에게 질문">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
+      </button>
+    </div></div>
 </aside></div>`;
 
 class AgentBridge extends HTMLElement {
@@ -267,7 +354,10 @@ class AgentBridge extends HTMLElement {
   #md = null;
   #historyKey = null;
   #history = [];
+  #present = { on: false };
   static HISTORY_LIMIT = 500;
+  static CAPTION_MS = 10000; // presentation bubble lifetime
+  static CAPTION_MAX = 3; // bubbles on screen at once (oldest leaves early)
 
   constructor() {
     super();
@@ -279,6 +369,8 @@ class AgentBridge extends HTMLElement {
       buttons: this.#root.querySelectorAll("button[data-action]"),
       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"),
     };
     this.$.buttons.forEach((b) => b.addEventListener("click", () => this.#submit(b.dataset.action)));
     this.#bindGrip();
@@ -290,6 +382,7 @@ class AgentBridge extends HTMLElement {
     });
     loadMarkdown().then((md) => (this.#md = md));
     this.#bindControl();
+    this.#bindHand();
     this.$.clearBtn.addEventListener("click", () => this.clearHistory());
   }
 
@@ -328,6 +421,19 @@ class AgentBridge extends HTMLElement {
     }
   }
 
+  async stopPresent() {
+    try {
+      const res = await fetch(`${this.server}/present`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ stop: true, from: "viewer" }),
+      });
+      return await res.json();
+    } catch {
+      return { ok: false, error: "server_unreachable" };
+    }
+  }
+
   #emit(type, detail) {
     this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
   }
@@ -343,7 +449,14 @@ class AgentBridge extends HTMLElement {
     on("delivered", ({ id }) => { this.#deliver(id); this.#emit("agent-queue", { phase: "delivered", id }); });
     on("unqueued", ({ id }) => { this.#unqueue(id); this.#emit("agent-queue", { phase: "unqueued", id }); });
     on("status", (s) => this.#renderStatus(s));
-    on("message", (m) => { this.#addMessage(m); this.#saveMessage(m); this.#emit("agent-message", m); });
+    on("message", (m) => {
+      this.#addMessage(m);
+      this.#saveMessage(m);
+      if (this.#present.on && m.role === "assistant") this.#caption(m.text);
+      if (this.#present.on && m.role === "browser" && m.action === "message") this.#caption(m.text, "user");
+      this.#emit("agent-message", m);
+    });
+    on("present", (p) => this.#setPresent(p));
     on("tool_start", (t) => {
       this.#tools.set(t.id, t);
       this.#renderActivity();
@@ -360,11 +473,11 @@ class AgentBridge extends HTMLElement {
       this.#setToolState(t.id, t.isError ? "error" : "done");
       this.#emit("agent-tool", { phase: "end", ...t });
     });
-    es.onerror = () => this.#renderStatus(null);
+    es.onerror = () => { this.#renderStatus(null); this.#setPresent({ on: false }); };
   }
 
   #syncScreen() {
-    const want = this.hasAttribute("screen");
+    const want = this.hasAttribute("screen") || this.#present.on;
     if (!want) { this.#screenEs?.close(); this.#screenEs = null; this.#setControl(false); return; }
     if (this.#screenEs) return;
     const es = (this.#screenEs = new EventSource(`${this.server}/screen`));
@@ -378,6 +491,110 @@ class AgentBridge extends HTMLElement {
     es.onerror = () => this.#renderScreenMeta({ connected: false });
   }
 
+  // ---------- presentation mode ----------
+
+  #setPresent(p) {
+    const on = !!p?.on;
+    const was = this.#present.on;
+    this.#present = p ?? { on: false };
+    this.#emit("agent-present", this.#present);
+    if (on === was) return;
+    if (on) this.#setControl(false);
+    else { this.$.captions.replaceChildren(); this.#openAsk(false); this.#handUp = false; }
+    this.#syncScreen();
+    // FLIP: grow from (or shrink back to) the side panel
+    const { screen, body } = this.$;
+    const before = screen.getBoundingClientRect();
+    body.classList.toggle("present", on);
+    this.toggleAttribute("presenting", on);
+    const after = screen.getBoundingClientRect();
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches || !before.width || !after.width) return;
+    const t = `translate(${before.left - after.left}px, ${before.top - after.top}px) ` +
+      `scale(${before.width / after.width}, ${before.height / after.height})`;
+    screen.animate([{ transformOrigin: "0 0", transform: t }, { transformOrigin: "0 0", transform: "none" }],
+      { duration: on ? 420 : 360, easing: "cubic-bezier(.2, .7, .2, 1)" });
+  }
+
+  // Raise hand: open a small input over the presentation and send it as a message.
+  #bindHand() {
+    const { hand, ask, askBox, askHint } = this.$;
+    hand.addEventListener("click", () => {
+      if (ask.hidden) this.#raiseHand();
+      else this.#lowerHand();
+    });
+    this.$.end.addEventListener("click", async () => {
+      this.$.end.disabled = true;
+      const res = await this.stopPresent();
+      this.$.end.disabled = false;
+      if (!res.ok) { this.#openAsk(true); askHint.textContent = `발표 종료 실패: ${res.error}`; }
+    });
+    ask.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const text = askBox.value.trim();
+      if (!text) return;
+      askHint.textContent = "보내는 중…";
+      const res = await this.send(text, "message");
+      if (!res.ok) { askHint.textContent = `전송 실패: ${res.error}`; return; }
+      askBox.value = "";
+      this.#handUp = false; // the question itself ends the raised hand
+      this.#openAsk(false);
+      hand.classList.add("sent");
+      setTimeout(() => hand.classList.remove("sent"), 1500);
+    });
+    askBox.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); ask.requestSubmit(); }
+      if (e.key === "Escape") { e.preventDefault(); this.#lowerHand(); hand.focus(); }
+    });
+  }
+
+  // Raise: open the input and tell the agent to pause. Lower (closed without
+  // asking): tell it to go on. Failures only show a hint; asking still works.
+  #handUp = false;
+  async #raiseHand() {
+    this.#openAsk(true);
+    if (this.#handUp) return;
+    this.#handUp = true;
+    const res = await this.send("사용자가 손을 듦: 질문 입력 중", "hand-raise");
+    if (!res.ok && !this.$.ask.hidden) this.$.askHint.textContent = `손들기 알림 실패: ${res.error}`;
+  }
+  async #lowerHand() {
+    this.#openAsk(false);
+    if (!this.#handUp) return;
+    this.#handUp = false;
+    await this.send("사용자가 질문 없이 손을 내림", "hand-lower");
+  }
+
+  #openAsk(open) {
+    const { hand, ask, askBox, askHint } = this.$;
+    ask.hidden = !open;
+    hand.setAttribute("aria-expanded", String(open));
+    askHint.textContent = "";
+    if (open) askBox.focus();
+  }
+
+  // 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") {
+    if (!text?.trim()) return;
+    const el = document.createElement("div");
+    el.className = `caption ${kind}`;
+    el.part = "caption";
+    if (kind === "user") { el.textContent = text; el.classList.add("plain"); }
+    else if (this.#md) el.innerHTML = this.#md(text);
+    else { el.textContent = text; el.classList.add("plain"); }
+    const box = this.$.captions;
+    box.append(el);
+    const leave = () => {
+      if (el.classList.contains("out")) return;
+      el.classList.add("out");
+      setTimeout(() => el.remove(), 500);
+    };
+    setTimeout(leave, AgentBridge.CAPTION_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;
+  }
+
   // ---------- composer resize grip (top edge) ----------
 
   #bindGrip() {
@@ -450,7 +667,7 @@ class AgentBridge extends HTMLElement {
     const mods = (e) => (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
     const BUTTONS = ["left", "middle", "right"];
 
-    controlBtn.addEventListener("click", () => this.#setControl(!this.#controlWs));
+    controlBtn.addEventListener("click", () => { if (!this.#present.on) this.#setControl(!this.#controlWs); });
 
     img.addEventListener("mousedown", (e) => {
       if (!on()) return;
@@ -519,6 +736,7 @@ class AgentBridge extends HTMLElement {
   #renderScreenMeta(m) {
     const { live, url, viewport } = this.$;
     if (!m.connected) {
+      this.$.viewport.querySelector(".placeholder").textContent = SCREEN_REASONS[m.reason] || "열린 terminal-browser 없음";
       live.hidden = true;
       url.textContent = "";
       viewport.classList.remove("has", "agent");