agello 0.2.1 → 0.4.1

package/web/agent-bridge.js

@@ -24,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
@@ -36,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') -> Promise<{ok, error?}>
+//   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?}>
 
@@ -76,6 +79,57 @@ const ACTIONS = {
 };
 
 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);
@@ -100,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); }
@@ -202,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;
@@ -314,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>
@@ -339,7 +404,6 @@ const TEMPLATE = `
     <button class="control-btn" role="switch" aria-checked="false" title="켜면 마우스와 키보드 입력이 브라우저로 전달돼요 (끄기: Shift+Esc)">
       <span>내 조작</span><span class="track"><span class="knob"></span></span><span class="state-label">OFF</span></button></div>
   <div class="viewport"><div class="ring"></div><div class="glow"></div><div class="agent-badge">에이전트 조작 중</div><img alt="에이전트 브라우저 화면" draggable="false"><textarea class="kbd" aria-label="브라우저 키보드 입력"></textarea><div class="placeholder">열린 terminal-browser 없음</div><div class="captions" part="captions" aria-live="polite"></div>
-    <div class="busy" part="busy" role="status"><span class="spinner"></span><span>답변 준비 중</span></div>
     <div class="hand-wrap">
       <form class="ask" part="ask" hidden><textarea aria-label="에이전트에게 질문" placeholder="에이전트에게 질문 (Enter 전송, Esc 닫기)"></textarea>
         <div class="ask-row"><span class="ask-hint"></span><button type="submit" class="primary">보내기</button></div></form>
@@ -359,6 +423,15 @@ class AgentBridge extends HTMLElement {
   #es = null;
   #screenEs = null;
   #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;
@@ -380,9 +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"),
+      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();
@@ -395,7 +468,10 @@ class AgentBridge extends HTMLElement {
     loadMarkdown().then((md) => (this.#md = md));
     this.#bindControl();
     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() {
@@ -408,6 +484,7 @@ class AgentBridge extends HTMLElement {
     this.#syncScreen();
   }
   disconnectedCallback() {
+    this.#showTerminal(false);
     this.#es?.close();
     this.#es = null;
     this.#screenEs?.close();
@@ -416,16 +493,291 @@ class AgentBridge extends HTMLElement {
   }
   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") {
+  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({ action, text }),
+        body: JSON.stringify({ action, text, images: images.length ? images : undefined }),
       });
       return await res.json();
     } catch {
@@ -464,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);
     });
@@ -511,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);
+    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
@@ -529,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.$;
@@ -594,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}`;
@@ -609,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;
@@ -904,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") {
@@ -966,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();

package/web/index.html

@@ -12,5 +12,17 @@
 </head>
 <body>
   <agent-bridge screen></agent-bridge>
+  <script>
+    // Keep the pane picked in the drawer across reloads (?server=http://127.0.0.1:<port>).
+    const bridge = document.querySelector("agent-bridge");
+    const saved = new URLSearchParams(location.search).get("server");
+    if (saved && /^http:\/\/127\.0\.0\.1:\d+$/.test(saved)) bridge.setAttribute("server", saved);
+    bridge.addEventListener("agent-pane", (e) => {
+      const url = new URL(location.href);
+      if (e.detail.server === location.origin) url.searchParams.delete("server");
+      else url.searchParams.set("server", e.detail.server);
+      history.replaceState(null, "", url);
+    });
+  </script>
 </body>
 </html>