agello 0.3.0 → 0.4.1

package/web/agent-bridge.js

@@ -12,9 +12,6 @@
 //   no-history   do not persist chat in localStorage (default: persisted per server + pane)
 //   screen       show live terminal-browser screen panel (side by side, stacked when narrow)
 //                with a toggle that lets the viewer control the browser (mouse, wheel, keyboard)
-//                and an annotate toggle: hovering tints the element under the pointer, clicking
-//                outlines it and opens an input; the request goes to the agent with the element's
-//                CSS selector (action=annotate). The wheel still scrolls the page.
 //
 // Theming (CSS custom properties on the element or an ancestor)
 //   --ab-bg --ab-panel --ab-text --ab-muted --ab-line --ab-accent --ab-user --ab-font
@@ -27,6 +24,12 @@
 //                  (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? }
+//   agent-pane     detail: { pane, server }  another pane was picked in the drawer (server attribute changed)
+//
+// Pane picker
+//   Clicking the status in the header opens a drawer with herdr's workspace -> tab -> pane tree.
+//   Picking a pane switches to that pane's own server (started on demand). Workspaces, tabs and
+//   panes can be added there; nothing is closed from the page (closing kills the pane's processes).
 //
 // 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
@@ -39,12 +42,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', extra) -> Promise<{ok, error?}>  (extra: e.g. {target} for annotate)
+//   el.send(text, action = 'message', images = [{type, data (base64)}]) -> Promise<{ok, error?}>
 //   el.clearHistory()                  clear saved chat for the current pane
 //   el.stopPresent()                   end presentation mode, tell the agent -> Promise<{ok, error?, notified?}>
 
@@ -75,10 +75,61 @@ const SCREEN_REASONS = {
 };
 const ACTIONS = {
   message: "메시지", approve: "승인", reject: "거절",
-  "present-stop": "발표 종료", "hand-raise": "손들기", "hand-lower": "손 내림", annotate: "주석",
+  "present-stop": "발표 종료", "hand-raise": "손들기", "hand-lower": "손 내림",
 };
 
 const CSS = `
+.pane-btn { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
+            color: var(--_muted); max-width: 46cqi; }
+.pane-btn .state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pane-btn .dot { flex: none; }
+.drawer-backdrop { display: none; position: absolute; inset: 0; z-index: 20; background: rgb(0 0 0 / .25); }
+.drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 21; width: min(360px, 92%); display: flex;
+          flex-direction: column; background: var(--_panel); border-left: 1px solid var(--_line);
+          box-shadow: -8px 0 24px rgb(0 0 0 / .18); transform: translateX(100%); visibility: hidden;
+          transition: transform .18s ease, visibility 0s .18s; }
+:host([panes-open]) .drawer { transform: none; visibility: visible; transition: transform .18s ease; }
+:host([panes-open]) .drawer-backdrop { display: block; }
+.drawer-head { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--_line); }
+.drawer-head strong { font-size: 13px; margin-right: auto; }
+.icon-btn { padding: 1px 8px; border-radius: 6px; font-size: 14px; line-height: 1.5; }
+.pane-filter { width: 100%; padding: 5px 9px; font: inherit; font-size: 12px; border: 1px solid var(--_line);
+               border-radius: 7px; background: var(--_bg); color: var(--_text); }
+.drawer-search { padding: 8px 12px; border-bottom: 1px solid var(--_line); }
+.add-form { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--_line); font-size: 12px; }
+.add-form[hidden] { display: none; }
+.add-form .add-title { font-weight: 600; }
+.add-form input, .add-form select { padding: 4px 8px; font: inherit; border: 1px solid var(--_line); border-radius: 6px;
+                                    background: var(--_bg); color: var(--_text); }
+.add-form .add-row { display: flex; gap: 6px; justify-content: flex-end; }
+.tree { flex: 1; overflow: auto; padding: 6px 0; font-size: 13px; }
+.tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; min-width: 0; }
+.tree-row:hover { background: var(--_user); }
+.tree-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-row .meta { font-size: 11px; color: var(--_muted); flex: none; }
+.tree-row .caret { width: 12px; flex: none; color: var(--_muted); font-size: 10px; }
+.tree-row .row-add { visibility: hidden; padding: 0 6px; font-size: 12px; border-radius: 5px; flex: none; }
+.tree-row:hover .row-add, .tree-row:focus-within .row-add { visibility: visible; }
+.tree-row.ws .name { font-weight: 600; }
+.tree-row.tab { padding-left: 26px; color: var(--_muted); }
+.tree-row.pane { padding-left: 30px; }
+.tree-row.pane.nested { padding-left: 46px; }
+.tree-row.pane.current { background: color-mix(in srgb, var(--_accent) 16%, transparent); }
+.tree-row .badge { font-size: 10px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--_line); color: var(--_muted); flex: none; }
+.tree-empty, .drawer-hint { padding: 8px 12px; font-size: 12px; color: var(--_muted); }
+.drawer-hint:empty { display: none; }
+.term-btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: 999px; }
+.term-btn svg { width: 14px; height: 14px; }
+.term-btn[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: white; }
+.terminal-panel { display: none; flex: 1; min-height: 0; flex-direction: column; background: #101114; }
+:host([terminal-open]) .chat > .stage, :host([terminal-open]) .chat > footer { display: none; }
+:host([terminal-open]) .terminal-panel { display: flex; }
+.terminal-bar { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #26272b; }
+.terminal-status { flex: 1; font-size: 12px; color: #a1a1aa; overflow-wrap: anywhere; }
+.terminal-retry { font-size: 11px; padding: 2px 9px; border-radius: 999px; }
+.terminal-host { flex: 1; min-height: 0; padding: 8px 12px; overflow: hidden; }
+.terminal-host textarea { min-height: 0; border: 0; padding: 0; resize: none; }
+
 :host {
   --_bg: var(--ab-bg, #f6f6f4); --_panel: var(--ab-panel, #fff); --_text: var(--ab-text, #1f1f1f);
   --_muted: var(--ab-muted, #6b6b6b); --_line: var(--ab-line, #e4e4e0); --_accent: var(--ab-accent, #2f6fed);
@@ -103,7 +154,6 @@ header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; bord
          background: var(--_panel); }
 :host([no-header]) header { display: none; }
 h1 { font-size: 14px; margin: 0; font-weight: 600; }
-.clear-btn { font-size: 11px; padding: 2px 9px; border-radius: 999px; }
 .session { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--_muted); }
 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--_muted); }
 .dot.idle, .dot.done { background: var(--_ok); } .dot.working { background: var(--_busy); }
@@ -178,30 +228,6 @@ h1 { font-size: 14px; margin: 0; font-weight: 600; }
 @media (prefers-reduced-motion: reduce) { .control-btn .track, .control-btn .knob { transition: none; } }
 .placeholder { font-size: 13px; color: var(--_muted); text-align: center; }
 
-/* annotate: hover tint, selected outline, request input next to the element */
-.annot-btn { flex: none; font-size: 12px; padding: 2px 10px; border-radius: 999px; }
-.annot-btn[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: #fff; }
-.viewport.annot img { cursor: crosshair; }
-.hl { position: absolute; z-index: 3; pointer-events: none; display: none; border-radius: 2px; }
-.hl.on { display: block; }
-.hl.hover { background: color-mix(in srgb, var(--_accent) 22%, transparent);
-            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_accent) 55%, transparent); }
-.hl.sel { box-shadow: 0 0 0 2px var(--_accent), 0 0 0 5px color-mix(in srgb, var(--_accent) 25%, transparent); }
-.hl-label { position: absolute; z-index: 4; pointer-events: none; display: none; max-width: 60%;
-  padding: 2px 7px; border-radius: 5px; font: 11px/1.5 ui-monospace, Menlo, monospace; color: #fff;
-  background: rgba(20, 20, 22, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.hl-label.on { display: block; }
-.note { position: absolute; z-index: 5; width: min(340px, calc(100% - 16px)); padding: 10px; border-radius: 12px;
-  background: var(--_panel); border: 1px solid var(--_line); box-shadow: 0 8px 28px rgba(0,0,0,.22);
-  animation: capIn .18s ease; }
-.note[hidden] { display: none; }
-.note .note-target { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--_muted); margin-bottom: 6px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.note textarea { min-height: 52px; font-size: 14px; }
-.note .note-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
-.note .note-hint { flex: 1; font-size: 12px; color: var(--_muted); }
-@media (prefers-reduced-motion: reduce) { .note { animation: none; } }
-
 /* 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; }
@@ -229,14 +255,6 @@ 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;
@@ -341,18 +359,38 @@ button.primary { background: var(--_accent); border-color: var(--_accent); color
 button:disabled { cursor: not-allowed; opacity: .45; }
 :host([no-actions]) .secondary { display: none; }
 .hint { font-size: 12px; color: var(--_muted); }
+.attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.attachments:empty { display: none; }
+.attachment { position: relative; width: 64px; height: 64px; border: 1px solid var(--_line); border-radius: 8px; overflow: hidden; }
+.attachment img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.attachment button { position: absolute; top: 2px; right: 2px; padding: 0 6px; font-size: 12px; line-height: 1.5;
+                     border-radius: 999px; background: rgb(0 0 0 / .6); border: 0; color: #fff; }
+.composer.dragover textarea { outline: 2px dashed var(--_accent); outline-offset: -1px; }
 `;
 
 const TEMPLATE = `
-<header><h1 part="heading"></h1><div class="session"><button class="clear-btn" title="이 pane의 저장된 대화 삭제">기록 지우기</button><span class="dot"></span><span class="state">연결 중</span></div></header>
+<header><h1 part="heading"></h1><div class="session"><button class="term-btn" aria-pressed="false" title="터미널에서 실행 중인 세션 보기 (다시 누르면 채팅)" aria-label="터미널"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="13" height="11" rx="2"/><path d="M4.5 6l2 2-2 2M8.5 10.5h3"/></svg></button><button class="pane-btn" aria-haspopup="dialog" aria-expanded="false" title="pane 선택"><span class="dot"></span><span class="state">연결 중</span><span aria-hidden="true">▾</span></button></div></header>
+<div class="drawer-backdrop"></div>
+<aside class="drawer" role="dialog" aria-label="pane 선택">
+  <div class="drawer-head"><strong>pane 선택</strong><button class="icon-btn ws-add" title="workspace 추가" aria-label="workspace 추가">+</button><button class="icon-btn panes-refresh" title="새로고침" aria-label="새로고침">↻</button><button class="icon-btn drawer-close" title="닫기 (Esc)" aria-label="닫기">×</button></div>
+  <div class="drawer-search"><input class="pane-filter" type="search" placeholder="workspace, 제목, 폴더 검색" aria-label="pane 검색"></div>
+  <form class="add-form" hidden><span class="add-title"></span>
+    <input name="label" placeholder="이름 (선택)" maxlength="80">
+    <input name="cwd" placeholder="폴더 경로 (선택, 절대 경로)">
+    <select name="direction" aria-label="분할 방향"><option value="right">오른쪽으로 분할</option><option value="down">아래로 분할</option></select>
+    <div class="add-row"><button type="button" class="add-cancel">취소</button><button type="submit" class="primary">추가</button></div></form>
+  <div class="tree" role="tree"></div><div class="drawer-hint" role="status"></div>
+</aside>
 <div class="body"><section class="chat">
+<div class="terminal-panel" aria-label="터미널"><div class="terminal-bar"><span class="terminal-status" role="status"></span><button class="terminal-retry">다시 연결</button></div><div class="terminal-host"></div></div>
 <div class="stage">
 <div class="log" part="log"><div class="inner"><div class="empty">이 pane의 대화가 브라우저에 저장돼요.</div></div><div class="inner queue" part="queue"></div></div>
 <div class="activity" part="activity"></div>
 </div>
 <footer part="composer"><div class="composer">
   <div class="grip" role="separator" aria-orientation="horizontal" aria-label="입력창 높이 조절 (위아래 방향키)" tabindex="0" title="끌어서 입력창 높이 조절"></div>
-  <textarea placeholder="에이전트에게 보낼 메시지 (Enter 전송, Shift+Enter 줄바꿈)"></textarea>
+  <textarea placeholder="에이전트에게 보낼 메시지 (Enter 전송, Shift+Enter 줄바꿈, 이미지 붙여넣기·끌어놓기)"></textarea>
+  <div class="attachments" aria-label="첨부 이미지"></div>
   <div class="row">
     <button class="secondary" data-action="approve">승인</button>
     <button class="secondary" data-action="reject">거절</button>
@@ -363,13 +401,9 @@ const TEMPLATE = `
 </section>
 <aside class="screen" part="screen">
   <div class="screen-bar"><span class="live" hidden>에이전트 조작 중</span><span class="url"></span>
-    <button class="annot-btn" type="button" aria-pressed="false" title="화면의 요소를 골라 에이전트에게 요청 (선택자와 함께 전달)">주석</button>
     <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="hl hover"></div><div class="hl sel"></div><div class="hl-label"></div>
-    <form class="note" part="note" hidden><div class="note-target"></div><textarea aria-label="선택한 요소에 대한 요청" placeholder="이 요소에 대한 요청 (Enter 전송, Esc 취소)"></textarea>
-      <div class="note-row"><span class="note-hint"></span><button type="submit" class="primary">보내기</button></div></form><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="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>
@@ -388,14 +422,16 @@ class AgentBridge extends HTMLElement {
   #root = this.attachShadow({ mode: "open" });
   #es = null;
   #screenEs = null;
-  #ws = null; // /input: control input and annotate inspect queries
-  #control = false;
-  #annot = false;
-  #hover = null; // inspected element under the pointer (annotate)
-  #hoverPt = null;
-  #sel = null; // selected element (annotate)
-  #inspectId = 0;
-  #inspectWait = new Map();
+  #controlWs = null;
+  #terminalCleanup = null;
+  #terminalVersion = 0;
+  #terminalStyles = null;
+  #panes = null; // {current, workspaces}
+  #expanded = new Set();
+  #adding = null; // {kind, workspace?, pane?}
+  #images = []; // chat attachments: {type, data (base64), url (preview)}
+  static IMAGE_MAX = 5;
+  static IMAGE_BYTES = 10 * 1024 * 1024;
   #frame = { w: 0, h: 0 };
   #moveQueued = null;
   #status = null;
@@ -417,11 +453,9 @@ class AgentBridge extends HTMLElement {
       activity: q(".activity"), box: q("textarea"), hint: q(".hint"),
       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"),
+      controlBtn: q(".control-btn"), kbd: q(".kbd"),
       body: q(".body"), screen: q(".screen"), captions: q(".captions"),
-      busy: q(".busy"), hand: q(".hand"), end: q(".end"), ask: q(".ask"), askBox: q(".ask textarea"), askHint: q(".ask-hint"),
-      annotBtn: q(".annot-btn"), hlHover: q(".hl.hover"), hlSel: q(".hl.sel"), hlLabel: q(".hl-label"),
-      note: q(".note"), noteBox: q(".note textarea"), noteHint: q(".note-hint"), noteTarget: q(".note-target"),
+      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();
@@ -433,9 +467,11 @@ class AgentBridge extends HTMLElement {
     });
     loadMarkdown().then((md) => (this.#md = md));
     this.#bindControl();
-    this.#bindAnnotate();
     this.#bindHand();
-    this.$.clearBtn.addEventListener("click", () => this.clearHistory());
+    q(".term-btn").addEventListener("click", () => this.#showTerminal(!this.hasAttribute("terminal-open")));
+    q(".terminal-retry").addEventListener("click", () => this.#showTerminal(true));
+    this.#bindPanes();
+    this.#bindImages();
   }
 
   get server() {
@@ -448,25 +484,300 @@ class AgentBridge extends HTMLElement {
     this.#syncScreen();
   }
   disconnectedCallback() {
+    this.#showTerminal(false);
     this.#es?.close();
     this.#es = null;
     this.#screenEs?.close();
     this.#screenEs = null;
     this.#setControl(false);
-    this.#setAnnotate(false);
   }
   attributeChangedCallback(name) {
     if (name === "heading") this.$.heading.textContent = this.getAttribute("heading") || "agello";
-    if (name === "server" && this.isConnected) { this.#connect(); this.#screenEs?.close(); this.#screenEs = null; this.#syncScreen(); }
+    if (name === "server" && this.isConnected) { this.#showTerminal(false); this.#openPanes(false); this.#connect(); this.#screenEs?.close(); this.#screenEs = null; this.#syncScreen(); }
     if (name === "screen" && this.isConnected) this.#syncScreen();
   }
 
-  async send(text, action = "message", extra = {}) {
+  async #showTerminal(on) {
+    const version = ++this.#terminalVersion;
+    this.#terminalCleanup?.();
+    this.#terminalCleanup = null;
+    this.toggleAttribute("terminal-open", on);
+    const q = (s) => this.#root.querySelector(s);
+    q(".term-btn").setAttribute("aria-pressed", String(on));
+    if (!on) return;
+    this.#setControl(false);
+    q(".terminal-status").textContent = "터미널 로딩 중…";
+    try {
+      if (!this.#terminalStyles) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = `${SCRIPT_ORIGIN}/terminal.css`;
+        link.dataset.terminalCss = "";
+        this.#terminalStyles = new Promise((resolve, reject) => {
+          link.onload = resolve;
+          link.onerror = () => { this.#terminalStyles = null; link.remove(); reject(new Error("Stylesheet failed")); };
+        });
+        this.#root.append(link);
+      }
+      await this.#terminalStyles;
+      const { mountTerminal } = await import(`${SCRIPT_ORIGIN}/terminal.js`);
+      if (version !== this.#terminalVersion || !this.isConnected) return;
+      this.#terminalCleanup = mountTerminal(q(".terminal-host"), q(".terminal-status"), this.server);
+    } catch {
+      if (version === this.#terminalVersion) q(".terminal-status").textContent = "터미널을 불러오지 못했습니다. 다시 연결해 주세요.";
+    }
+  }
+
+  // ---------- pane picker (herdr workspace -> tab -> pane) ----------
+
+  #bindPanes() {
+    const q = (s) => this.#root.querySelector(s);
+    q(".pane-btn").addEventListener("click", () => this.#openPanes(!this.hasAttribute("panes-open")));
+    q(".drawer-close").addEventListener("click", () => this.#openPanes(false));
+    q(".drawer-backdrop").addEventListener("click", () => this.#openPanes(false));
+    q(".panes-refresh").addEventListener("click", () => this.#loadPanes());
+    q(".ws-add").addEventListener("click", () => this.#startAdd({ kind: "workspace" }));
+    q(".pane-filter").addEventListener("input", () => this.#renderPanes());
+    q(".add-cancel").addEventListener("click", () => this.#startAdd(null));
+    q(".add-form").addEventListener("submit", (e) => { e.preventDefault(); this.#submitAdd(); });
+    q(".drawer").addEventListener("keydown", (e) => {
+      if (e.key === "Escape") { e.stopPropagation(); this.#adding ? this.#startAdd(null) : this.#openPanes(false); }
+    });
+    q(".tree").addEventListener("click", (e) => {
+      const add = e.target.closest(".row-add");
+      const row = e.target.closest(".tree-row");
+      if (!row) return;
+      const { kind, id, ws } = row.dataset;
+      if (add) return this.#startAdd(kind === "ws" ? { kind: "tab", workspace: id } : { kind: "pane", pane: id, workspace: ws });
+      if (kind === "pane") return this.#selectPane(id);
+      this.#expanded.has(id) ? this.#expanded.delete(id) : this.#expanded.add(id);
+      this.#renderPanes();
+    });
+    q(".tree").addEventListener("keydown", (e) => {
+      if ((e.key === "Enter" || e.key === " ") && e.target.classList.contains("tree-row")) { e.preventDefault(); e.target.click(); }
+    });
+  }
+
+  #openPanes(on) {
+    if (on === this.hasAttribute("panes-open")) return;
+    this.toggleAttribute("panes-open", on);
+    const q = (s) => this.#root.querySelector(s);
+    q(".pane-btn").setAttribute("aria-expanded", String(on));
+    if (!on) { this.#startAdd(null); q(".pane-btn").focus(); return; }
+    q(".pane-filter").value = "";
+    this.#loadPanes(true);
+    q(".pane-filter").focus();
+  }
+
+  async #loadPanes(expandCurrent = false) {
+    const hint = this.#root.querySelector(".drawer-hint");
+    hint.textContent = "불러오는 중…";
+    try {
+      const res = await fetch(`${this.server}/panes`);
+      const d = await res.json();
+      if (!d.ok) throw new Error(d.error);
+      this.#panes = d;
+      hint.textContent = "";
+      if (expandCurrent) {
+        const ws = d.workspaces.find((w) => w.tabs.some((t) => t.panes.some((p) => p.id === d.current)));
+        const tab = ws?.tabs.find((t) => t.panes.some((p) => p.id === d.current));
+        if (ws) this.#expanded.add(ws.id);
+        if (tab) this.#expanded.add(tab.id);
+      }
+    } catch {
+      hint.textContent = "pane 목록을 불러오지 못했습니다.";
+    }
+    this.#renderPanes();
+  }
+
+  #renderPanes() {
+    const tree = this.#root.querySelector(".tree");
+    const d = this.#panes;
+    if (!d) { tree.replaceChildren(); return; }
+    const filter = this.#root.querySelector(".pane-filter").value.trim().toLowerCase();
+    const hit = (...xs) => !filter || xs.some((x) => String(x ?? "").toLowerCase().includes(filter));
+    const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+    const row = (kind, id, cls, level, expanded) => {
+      const r = el("div", `tree-row ${cls}`);
+      Object.assign(r.dataset, { kind, id });
+      r.tabIndex = 0;
+      r.setAttribute("role", "treeitem");
+      r.setAttribute("aria-level", String(level));
+      if (expanded !== undefined) r.setAttribute("aria-expanded", String(expanded));
+      return r;
+    };
+    const addBtn = (label) => { const b = el("button", "row-add", "+"); b.type = "button"; b.title = label; b.setAttribute("aria-label", label); return b; };
+    const base = (p) => p.cwd?.split("/").filter(Boolean).pop();
+    const rows = [];
+    for (const ws of d.workspaces) {
+      const tabs = ws.tabs.map((t) => ({ ...t, panes: t.panes.filter((p) => hit(ws.label, t.label, p.id, p.agent, p.title, p.cwd)) }))
+        .filter((t) => t.panes.length);
+      if (filter && !tabs.length) continue;
+      const open = !!filter || this.#expanded.has(ws.id);
+      const r = row("ws", ws.id, "ws", 1, open);
+      const count = ws.tabs.reduce((n, t) => n + t.panes.length, 0);
+      r.append(el("span", "caret", open ? "▾" : "▸"), el("span", "name", ws.label || ws.id), el("span", "meta", String(count)), addBtn("tab 추가"));
+      rows.push(r);
+      if (!open) continue;
+      const single = ws.tabs.length === 1; // D5: a lone tab adds no information
+      for (const t of tabs) {
+        const tabOpen = single || !!filter || this.#expanded.has(t.id);
+        if (!single) {
+          const tr = row("tab", t.id, "tab", 2, tabOpen);
+          tr.append(el("span", "caret", tabOpen ? "▾" : "▸"), el("span", "name", `tab ${t.label}`), el("span", "meta", String(t.panes.length)));
+          rows.push(tr);
+        }
+        if (!tabOpen) continue;
+        for (const p of t.panes) {
+          const pr = row("pane", p.id, `pane${single ? "" : " nested"}${p.id === d.current ? " current" : ""}`, single ? 2 : 3);
+          pr.dataset.ws = ws.id;
+          if (p.id === d.current) pr.setAttribute("aria-current", "true");
+          const dot = el("span", `dot ${p.status}`);
+          dot.title = STATES[p.status] || p.status;
+          const name = el("span", "name", p.title || base(p) || p.id);
+          name.title = [p.title, p.cwd, p.id].filter(Boolean).join("\n");
+          const badge = el("span", "badge", p.agent || "셸");
+          if (p.agent !== "claude") badge.title = "채팅 미지원: 터미널로 연결";
+          pr.append(dot, name, badge, addBtn("pane 분할"));
+          rows.push(pr);
+        }
+      }
+    }
+    tree.replaceChildren(...rows);
+    if (!rows.length) tree.append(el("div", "tree-empty", filter ? "검색 결과 없음" : "pane 없음"));
+  }
+
+  #startAdd(target) {
+    this.#adding = target;
+    const form = this.#root.querySelector(".add-form");
+    form.hidden = !target;
+    if (!target) return;
+    form.reset();
+    const titles = { workspace: "새 workspace", tab: "새 tab", pane: "pane 분할" };
+    form.querySelector(".add-title").textContent = titles[target.kind];
+    form.elements.label.hidden = target.kind === "pane";
+    form.elements.direction.hidden = target.kind !== "pane";
+    (target.kind === "pane" ? form.elements.direction : form.elements.label).focus();
+  }
+
+  async #submitAdd() {
+    const target = this.#adding;
+    if (!target) return;
+    const f = this.#root.querySelector(".add-form").elements;
+    const hint = this.#root.querySelector(".drawer-hint");
+    const body = { ...target, cwd: f.cwd.value.trim() || undefined };
+    if (target.kind === "pane") body.direction = f.direction.value;
+    else body.label = f.label.value.trim() || undefined;
+    if (body.cwd && !body.cwd.startsWith("/")) { hint.textContent = "폴더 경로는 /로 시작하는 절대 경로여야 합니다."; return; }
+    hint.textContent = "만드는 중…";
+    try {
+      const res = await fetch(`${this.server}/panes/create`, {
+        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+      });
+      const d = await res.json();
+      if (!d.ok) throw new Error(d.error);
+      this.#startAdd(null);
+      if (target.workspace) this.#expanded.add(target.workspace);
+      await this.#selectPane(d.pane, { terminal: true }); // a new pane is a plain shell: show it as a terminal
+    } catch (e) {
+      hint.textContent = `추가 실패: ${e.message || "server_unreachable"}`;
+    }
+  }
+
+  async #selectPane(pane, { terminal = false } = {}) {
+    const hint = this.#root.querySelector(".drawer-hint");
+    if (pane === this.#panes?.current && !terminal) { this.#openPanes(false); return; }
+    hint.textContent = "연결 중…";
+    try {
+      const res = await fetch(`${this.server}/panes/connect`, {
+        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pane }),
+      });
+      const d = await res.json();
+      if (!d.ok) throw new Error(d.error);
+      const info = this.#panes?.workspaces.flatMap((w) => w.tabs.flatMap((t) => t.panes)).find((p) => p.id === pane);
+      hint.textContent = "";
+      this.#openPanes(false);
+      if (d.url !== this.server) this.setAttribute("server", d.url);
+      this.#emit("agent-pane", { pane, server: d.url });
+      if (terminal || (info && info.agent !== "claude")) this.#showTerminal(true); // D8: chat is Claude-only
+    } catch (e) {
+      hint.textContent = `연결 실패: ${e.message || "server_unreachable"}`;
+    }
+  }
+
+  // ---------- image attachments (paste / drop into the chat box) ----------
+
+  #bindImages() {
+    const composer = this.#root.querySelector(".composer");
+    const images = (list) => [...(list ?? [])].filter((f) => f.type?.startsWith("image/"));
+    this.$.box.addEventListener("paste", (e) => {
+      const files = images([...(e.clipboardData?.items ?? [])].filter((i) => i.kind === "file").map((i) => i.getAsFile()));
+      if (!files.length) return;
+      if (!e.clipboardData.getData("text/plain")) e.preventDefault();
+      this.#addImages(files);
+    });
+    composer.addEventListener("dragover", (e) => {
+      if (![...(e.dataTransfer?.items ?? [])].some((i) => i.kind === "file")) return;
+      e.preventDefault();
+      composer.classList.add("dragover");
+    });
+    composer.addEventListener("dragleave", (e) => { if (!composer.contains(e.relatedTarget)) composer.classList.remove("dragover"); });
+    composer.addEventListener("drop", (e) => {
+      composer.classList.remove("dragover");
+      const files = images(e.dataTransfer?.files);
+      if (!files.length) return;
+      e.preventDefault();
+      this.#addImages(files);
+    });
+    this.#root.querySelector(".attachments").addEventListener("click", (e) => {
+      const i = e.target.closest("[data-remove]")?.dataset.remove;
+      if (i === undefined) return;
+      URL.revokeObjectURL(this.#images[i].url);
+      this.#images.splice(Number(i), 1);
+      this.#renderImages();
+    });
+  }
+
+  async #addImages(files) {
+    const ok = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+    for (const f of files) {
+      if (this.#images.length >= AgentBridge.IMAGE_MAX) { this.$.hint.textContent = `이미지는 최대 ${AgentBridge.IMAGE_MAX}개`; break; }
+      if (!ok.includes(f.type)) { this.$.hint.textContent = "PNG, JPEG, GIF, WebP만 첨부 가능"; continue; }
+      if (f.size > AgentBridge.IMAGE_BYTES) { this.$.hint.textContent = "이미지 1개당 최대 10MB"; continue; }
+      const data = await new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onload = () => resolve(String(r.result).split(",")[1]);
+        r.onerror = reject;
+        r.readAsDataURL(f);
+      });
+      this.#images.push({ type: f.type, data, url: URL.createObjectURL(f) });
+    }
+    this.#renderImages();
+  }
+
+  #renderImages() {
+    this.#root.querySelector(".attachments").replaceChildren(...this.#images.map((img, i) => {
+      const wrap = document.createElement("div");
+      wrap.className = "attachment";
+      const pic = document.createElement("img");
+      pic.src = img.url;
+      pic.alt = `첨부 이미지 ${i + 1}`;
+      const rm = document.createElement("button");
+      rm.type = "button";
+      rm.textContent = "×";
+      rm.dataset.remove = String(i);
+      rm.setAttribute("aria-label", `첨부 이미지 ${i + 1} 삭제`);
+      wrap.append(pic, rm);
+      return wrap;
+    }));
+  }
+
+  async send(text, action = "message", images = []) {
     try {
       const res = await fetch(`${this.server}/send`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...extra, action, text }),
+        body: JSON.stringify({ action, text, images: images.length ? images : undefined }),
       });
       return await res.json();
     } catch {
@@ -505,8 +816,7 @@ class AgentBridge extends HTMLElement {
     on("message", (m) => {
       this.#addMessage(m);
       this.#saveMessage(m);
-      // 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 === "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);
     });
@@ -532,7 +842,7 @@ class AgentBridge extends HTMLElement {
 
   #syncScreen() {
     const want = this.hasAttribute("screen") || this.#present.on;
-    if (!want) { this.#screenEs?.close(); this.#screenEs = null; this.#setControl(false); this.#setAnnotate(false); return; }
+    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`));
     es.addEventListener("meta", (e) => this.#renderScreenMeta(JSON.parse(e.data)));
@@ -541,7 +851,6 @@ class AgentBridge extends HTMLElement {
       this.#frame = { w: f.w, h: f.h };
       this.$.img.src = `data:image/jpeg;base64,${f.data}`;
       this.$.viewport.classList.add("has");
-      if (this.#annot) this.#annotFrame();
     });
     es.onerror = () => this.#renderScreenMeta({ connected: false });
   }
@@ -553,9 +862,8 @@ 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); this.#setAnnotate(false); }
+    if (on) { this.#showTerminal(false); 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
@@ -571,12 +879,6 @@ 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.$;
@@ -636,7 +938,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", ms = AgentBridge.CAPTION_MS) {
+  #caption(text, kind = "agent") {
     if (!text?.trim()) return;
     const el = document.createElement("div");
     el.className = `caption ${kind}`;
@@ -651,7 +953,7 @@ class AgentBridge extends HTMLElement {
       el.classList.add("out");
       setTimeout(() => el.remove(), 500);
     };
-    setTimeout(leave, ms);
+    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;
@@ -694,43 +996,24 @@ class AgentBridge extends HTMLElement {
 
   // ---------- user control ----------
 
-  // One socket for both modes; open while control or annotate is on.
-  #syncWs() {
-    const want = this.#control || this.#annot;
-    if (want && !this.#ws) {
+  #setControl(on) {
+    if (on && !this.#controlWs) {
       const ws = new WebSocket(`${this.server.replace(/^http/, "ws")}/input`);
-      ws.onmessage = (e) => {
-        let m;
-        try { m = JSON.parse(e.data); } catch { return; }
-        this.#inspectWait.get(m.id)?.(m.result ?? null);
-      };
-      ws.onclose = () => {
-        if (this.#ws !== ws) return;
-        this.#ws = null;
-        this.#setControl(false);
-        this.#setAnnotate(false);
-      };
-      this.#ws = ws;
-    } else if (!want && this.#ws) {
-      const ws = this.#ws;
-      this.#ws = null;
+      ws.onclose = () => { if (this.#controlWs === ws) this.#setControl(false); };
+      this.#controlWs = ws;
+    } else if (!on && this.#controlWs) {
+      const ws = this.#controlWs;
+      this.#controlWs = null;
       ws.close();
     }
-    if (!this.#ws) { this.#inspectWait.forEach((r) => r(null)); this.#inspectWait.clear(); }
-  }
-
-  #setControl(on) {
-    this.#control = !!on && !this.#present.on;
-    if (this.#control) this.#setAnnotate(false);
-    this.#syncWs();
-    this.$.controlBtn.setAttribute("aria-checked", String(this.#control));
-    this.$.controlBtn.querySelector(".state-label").textContent = this.#control ? "ON" : "OFF";
-    this.$.viewport.classList.toggle("control", this.#control);
-    if (this.#control) this.$.kbd.focus();
+    this.$.controlBtn.setAttribute("aria-checked", String(!!this.#controlWs));
+    this.$.controlBtn.querySelector(".state-label").textContent = this.#controlWs ? "ON" : "OFF";
+    this.$.viewport.classList.toggle("control", !!this.#controlWs);
+    if (this.#controlWs) this.$.kbd.focus();
   }
 
   #cdp(method, params) {
-    const ws = this.#ws;
+    const ws = this.#controlWs;
     if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ method, params }));
   }
 
@@ -744,11 +1027,11 @@ class AgentBridge extends HTMLElement {
 
   #bindControl() {
     const { img, kbd, controlBtn } = this.$;
-    const on = () => this.#control && this.#frame.w > 0;
+    const on = () => !!this.#controlWs && this.#frame.w > 0;
     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.#control));
+    controlBtn.addEventListener("click", () => { if (!this.#present.on) this.#setControl(!this.#controlWs); });
 
     img.addEventListener("mousedown", (e) => {
       if (!on()) return;
@@ -776,7 +1059,7 @@ class AgentBridge extends HTMLElement {
       });
     });
     img.addEventListener("wheel", (e) => {
-      if (!on() && !(this.#annot && this.#frame.w > 0)) return; // annotate: scroll to reach the element
+      if (!on()) return;
       e.preventDefault();
       this.#cdp("Input.dispatchMouseEvent", { type: "mouseWheel", ...this.#point(e), deltaX: e.deltaX, deltaY: e.deltaY,
         modifiers: mods(e) });
@@ -814,163 +1097,6 @@ class AgentBridge extends HTMLElement {
     });
   }
 
-  // ---------- annotate ----------
-
-  #setAnnotate(on) {
-    on = !!on && !this.#present.on;
-    if (on === this.#annot) return;
-    this.#annot = on;
-    if (on) this.#setControl(false);
-    else { this.#hover = null; this.#hoverPt = null; this.#select(null); }
-    this.#syncWs();
-    this.$.annotBtn.setAttribute("aria-pressed", String(on));
-    this.$.viewport.classList.toggle("annot", on);
-    this.#drawHl();
-  }
-
-  // Element at a frame point ({x, y}) or by selector; null if unavailable.
-  #inspect(q, full = false) {
-    const ws = this.#ws;
-    if (ws?.readyState !== WebSocket.OPEN) return Promise.resolve(null);
-    const id = ++this.#inspectId;
-    return new Promise((resolve) => {
-      const done = (r) => { clearTimeout(t); this.#inspectWait.delete(id); resolve(r); };
-      const t = setTimeout(() => done(null), 3000);
-      this.#inspectWait.set(id, done);
-      ws.send(JSON.stringify({ id, inspect: { ...q, full } }));
-    });
-  }
-
-  // Latest pointer position wins; at most one hover query in flight.
-  #probing = false;
-  #probeAgain = false;
-  async #probeHover() {
-    if (this.#probing) { this.#probeAgain = true; return; }
-    this.#probing = true;
-    try {
-      do {
-        this.#probeAgain = false;
-        const p = this.#hoverPt;
-        if (!p || !this.#annot) break;
-        const r = await this.#inspect(p);
-        if (this.#hoverPt && this.#annot) { this.#hover = r; this.#drawHl(); }
-      } while (this.#probeAgain);
-    } finally {
-      this.#probing = false;
-    }
-  }
-
-  // The page changed (scroll, layout, HMR): follow the selected element and
-  // re-check what is under the pointer.
-  #tracking = false;
-  async #annotFrame() {
-    if (this.#hoverPt) this.#probeHover();
-    const sel = this.#sel;
-    if (!sel || this.#tracking) { this.#drawHl(); return; }
-    this.#tracking = true;
-    try {
-      const r = await this.#inspect({ selector: sel.selector });
-      if (r && this.#sel === sel) sel.rect = r.rect; // gone from the page: keep the last box
-    } finally {
-      this.#tracking = false;
-    }
-    this.#drawHl();
-  }
-
-  #select(t) {
-    const { note, noteBox, noteHint, noteTarget } = this.$;
-    this.#sel = t;
-    note.hidden = !t;
-    noteHint.textContent = "";
-    if (t) {
-      noteTarget.textContent = t.selector;
-      noteTarget.title = t.selector;
-      noteBox.focus();
-    }
-    this.#drawHl();
-  }
-
-  // Frame (CSS px of the page viewport) -> position over the displayed image.
-  #drawHl() {
-    const { viewport, img, hlHover, hlSel, hlLabel, note } = this.$;
-    const show = this.#annot && viewport.classList.contains("has") && this.#frame.w > 0;
-    const vr = viewport.getBoundingClientRect();
-    const ir = img.getBoundingClientRect();
-    const sx = ir.width / this.#frame.w, sy = ir.height / this.#frame.h;
-    const box = (r) => {
-      if (!show || !r) return null;
-      const x0 = Math.max(r.x, 0), y0 = Math.max(r.y, 0);
-      const x1 = Math.min(r.x + r.w, this.#frame.w), y1 = Math.min(r.y + r.h, this.#frame.h);
-      if (x1 <= x0 || y1 <= y0) return null;
-      return { left: ir.left - vr.left + x0 * sx, top: ir.top - vr.top + y0 * sy, width: (x1 - x0) * sx, height: (y1 - y0) * sy };
-    };
-    const place = (el, b) => {
-      el.classList.toggle("on", !!b);
-      if (b) Object.assign(el.style, { left: `${b.left}px`, top: `${b.top}px`, width: `${b.width}px`, height: `${b.height}px` });
-      return b;
-    };
-    const hb = place(hlHover, box(this.#hover?.rect));
-    const sb = place(hlSel, box(this.#sel?.rect));
-
-    hlLabel.classList.toggle("on", !!hb);
-    if (hb) {
-      const r = this.#hover.rect;
-      hlLabel.textContent = `${this.#hover.label}  ${Math.round(r.w)}×${Math.round(r.h)}`;
-      // above the box, else below it, else inside its top edge
-      const top = hb.top >= 22 ? hb.top - 22 : hb.top + hb.height + 26 <= vr.height ? hb.top + hb.height + 4 : hb.top + 4;
-      Object.assign(hlLabel.style, { left: `${hb.left + (top === hb.top + 4 ? 4 : 0)}px`, top: `${top}px` });
-    }
-
-    // input below the selected element, above it if there is no room
-    if (!note.hidden) {
-      const W = note.offsetWidth, H = note.offsetHeight, pad = 8;
-      const b = sb ?? { left: pad, top: pad, width: 0, height: 0 };
-      let top = b.top + b.height + pad;
-      if (top + H > vr.height - pad) top = b.top - H - pad;
-      top = Math.max(pad, Math.min(top, vr.height - H - pad));
-      const left = Math.max(pad, Math.min(b.left, vr.width - W - pad));
-      Object.assign(note.style, { left: `${left}px`, top: `${top}px` });
-    }
-  }
-
-  #bindAnnotate() {
-    const { img, annotBtn, note, noteBox, noteHint } = this.$;
-    annotBtn.addEventListener("click", () => this.#setAnnotate(!this.#annot));
-    img.addEventListener("mousemove", (e) => {
-      if (!this.#annot || !this.#frame.w) return;
-      this.#hoverPt = this.#point(e);
-      this.#probeHover();
-    });
-    img.addEventListener("mouseleave", () => {
-      if (!this.#annot) return;
-      this.#hoverPt = null;
-      this.#hover = null;
-      this.#drawHl();
-    });
-    img.addEventListener("click", async (e) => {
-      if (!this.#annot || !this.#frame.w) return;
-      e.preventDefault();
-      const t = await this.#inspect(this.#point(e), true);
-      if (t && this.#annot) this.#select(t);
-    });
-    new ResizeObserver(() => this.#drawHl()).observe(img);
-    note.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const text = noteBox.value.trim();
-      const target = this.#sel;
-      if (!text || !target) return;
-      noteHint.textContent = "보내는 중…";
-      const res = await this.send(text, "annotate", { target });
-      if (!res.ok) { noteHint.textContent = `전송 실패: ${res.error}`; return; }
-      noteBox.value = "";
-      if (this.#sel === target) this.#select(null);
-    });
-    noteBox.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); note.requestSubmit(); }
-      if (e.key === "Escape") { e.preventDefault(); this.#select(null); }
-    });
-  }
-
   #renderScreenMeta(m) {
     const { live, url, viewport } = this.$;
     if (!m.connected) {
@@ -986,7 +1112,6 @@ class AgentBridge extends HTMLElement {
       url.textContent = m.title ? `${m.title} · ${m.url}` : m.url || "";
       url.title = m.url || "";
     }
-    this.#drawHl();
     this.#emit("agent-screen", m);
   }
 
@@ -1123,7 +1248,7 @@ class AgentBridge extends HTMLElement {
       return;
     } else if (m.role === "assistant") {
       wrap.className = "msg assistant";
-      meta.textContent = `에이전트${m.script ? ` · 대본 ${m.script}` : ""} · ${time}`;
+      meta.textContent = `에이전트 · ${time}`;
       if (this.#md) bubble.innerHTML = this.#md(m.text);
       else { bubble.textContent = m.text; bubble.classList.add("plain"); }
     } else if (m.role === "browser") {
@@ -1185,16 +1310,22 @@ 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);
   }
 
   async #submit(action) {
     const text = this.$.box.value.trim();
-    if (action === "message" && !text) return;
+    const images = this.#images.map(({ type, data }) => ({ type, data }));
+    if (action === "message" && !text && !images.length) return;
     this.$.buttons.forEach((b) => (b.disabled = true));
-    const res = await this.send(text, action);
-    if (res.ok) { this.$.box.value = ""; this.$.hint.textContent = ""; }
+    const res = await this.send(text, action, images);
+    if (res.ok) {
+      this.$.box.value = "";
+      this.$.hint.textContent = "";
+      this.#images.forEach((img) => URL.revokeObjectURL(img.url));
+      this.#images = [];
+      this.#renderImages();
+    }
     else this.$.hint.textContent = `전송 실패: ${res.error}`;
     this.#renderStatus(this.#status);
     this.$.box.focus();