@cordfuse/crosstalk 7.0.0-alpha.9 → 7.0.0-beta.1

package/src/web/chat-page.ts

@@ -0,0 +1,636 @@
+// chat-page.ts — interactive chat panel.
+//
+// Layout mirrors llmux's session screen (CSS + structure copied
+// verbatim where it touches the bar layout — Steve's phone proved that
+// version works in practice, so don't redesign it):
+//
+//   ┌──────────────────────────────────────┐
+//   │ ⌂ × · ● agent · CROSSTALK v…         │  ← #chat-topbar (fixed)
+//   ├──────────────────────────────────────┤
+//   │                                      │
+//   │           xterm.js terminal          │  ← #term-wrap (fills middle)
+//   │                                      │
+//   ├──────────────────────────────────────┤
+//   │   Home ▲ ▼ ◀ ▶ End                   │  ← #chat-bar (mobile-only)
+//   │   Esc Tab Ctrl Alt                   │
+//   └──────────────────────────────────────┘
+//
+// Two-button kill model:
+//   • ⌂ (back) / `/exit` typed in terminal → SIGTERM, SIGKILL 1s later
+//   • × (kill) → immediate SIGKILL (confirm prompt)
+//
+// Soft-keyboard handling: viewport meta carries
+// `interactive-widget=resizes-content` so Android Chrome resizes the
+// visual viewport when the keyboard pops up — the fixed-bottom bar
+// then rides above the keyboard instead of being covered.
+
+import { page, escapeHtml, TOAST_HELPER } from './layout.js';
+
+export interface ChatPageData {
+  host: string;
+  alias: string;
+  /** Installed agent CLIs on the host (from /agents installed list). */
+  installedAgents: string[];
+  /** Engine version — rendered in the topbar brand strip. */
+  version?: string;
+  /** Engine-side $HOME — used as the default CWD in the picker. */
+  home: string;
+}
+
+export function chatPage(d: ChatPageData): string {
+  const agentsJson = JSON.stringify(d.installedAgents);
+  const versionStr = d.version ?? '';
+  const homeJson = JSON.stringify(d.home);
+  return page({
+    title: `crosstalk on ${d.host} · Chat`,
+    host: d.host,
+    alias: d.alias,
+    activeNav: 'chat',
+    pageTitle: 'Chat',
+    // Critical: the chat session uses fixed-position layout +
+    // visualViewport math. Without `interactive-widget=resizes-content`
+    // the Android soft keyboard overlays the bar instead of pushing it
+    // up. Caught 2026-06-22 — the picker was unaffected because it
+    // doesn't have fixed-bottom UI.
+    viewport: 'width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content',
+    extraCss: `
+  /* Picker (default state) */
+  .picker-card .pick-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+  .picker-card .pick-row label{font-size:11px;color:#9aa0a6;text-transform:uppercase;letter-spacing:.05em;min-width:48px}
+  .picker-card select,
+  .picker-card input[type="text"]{background:#0b0c10;color:#e6e8eb;border:1px solid #262c34;border-radius:6px;padding:7px 10px;font:13px ui-monospace,monospace;outline:none;flex:1 1 200px;min-width:160px}
+  .picker-card select:focus,
+  .picker-card input[type="text"]:focus{border-color:#2d4a66}
+  .picker-card .cwd-row{position:relative}
+  .picker-card #cwd-recent{background:#1c2128;color:#9aa0a6;border:1px solid #262c34;border-radius:6px;padding:7px 8px;font:11px ui-monospace,monospace;cursor:pointer;min-width:36px}
+  .picker-card #cwd-recent:hover{background:#252b34;color:#e6e8eb}
+  .picker-card #cwd-recent-menu{position:absolute;top:38px;right:0;background:#0e1116;border:1px solid #1f2329;border-radius:6px;padding:4px;display:none;z-index:5;max-width:90vw;min-width:240px}
+  .picker-card #cwd-recent-menu.open{display:block}
+  .picker-card #cwd-recent-menu button{display:block;width:100%;text-align:left;background:transparent;border:none;color:#c9d1d9;padding:7px 10px;font:12px ui-monospace,monospace;cursor:pointer;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .picker-card #cwd-recent-menu button:hover{background:#11141a;color:#7cc4ff}
+  .picker-card #cwd-recent-menu .empty{padding:8px 10px;color:#7a7f87;font-style:italic;font-size:11px}
+  .picker-card .actions-row{display:flex;justify-content:flex-end;margin-top:6px}
+
+  /* ── Session mode (toggled via <body class="chat-session">) ──── */
+  :root{--topbar-h:38px;--bar-h:92px}
+  body.chat-session{margin:0;padding:0;max-width:none;height:100dvh;min-height:100dvh;overscroll-behavior:none}
+  body.chat-session > header,
+  body.chat-session #nav-drawer,
+  body.chat-session #nav-backdrop,
+  body.chat-session .picker-card{display:none !important}
+  body.chat-session main{margin:0;padding:0}
+
+  /* Topbar */
+  #chat-topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:#11141a;border-bottom:1px solid #1f2329;display:none;align-items:center;gap:8px;padding:0 10px;z-index:21;box-sizing:border-box}
+  body.chat-session #chat-topbar{display:flex}
+  #chat-topbar button.iconbtn{flex:0 0 auto;background:#1c2128;color:#e6e8eb;border:1px solid #262c34;border-radius:6px;height:26px;width:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:14px ui-monospace,monospace;-webkit-tap-highlight-color:transparent;outline:none;padding:0}
+  #chat-topbar button.iconbtn:active{background:#252b34;border-color:#3a414b}
+  #chat-topbar button#chat-kill{color:#f85149;border-color:#4a2329}
+  #chat-topbar button#chat-kill:active{background:#4a2329}
+  #chat-topbar .title{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;color:#c9d1d9;font-size:12px}
+  #chat-topbar .title-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#9aa0a6;transition:background .2s,box-shadow .2s}
+  #chat-topbar .title-dot[data-state="connecting"]{background:#d29922}
+  #chat-topbar .title-dot[data-state="connected"]{background:#7ee787;box-shadow:0 0 6px #7ee78766}
+  #chat-topbar .title-dot[data-state="closed"],
+  #chat-topbar .title-dot[data-state="error"]{background:#f85149}
+  #chat-topbar .title-name{flex:0 1 auto;font-weight:600;color:#e6e8eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  #chat-topbar .brand{flex:0 0 auto;color:#7cc4ff;font-size:11px;font-weight:600;letter-spacing:.08em;padding-left:8px;margin-left:auto}
+  #chat-topbar .ver{flex:0 0 auto;color:#7a7f87;font-size:10px;padding-left:6px}
+
+  /* Terminal — exact position spec copied from llmux. The touch-action
+     claim is what lets pinch-to-zoom work on mobile. */
+  #term-wrap{display:none;background:#000;position:fixed;top:var(--topbar-h);left:0;right:0;bottom:var(--bar-h);touch-action:none}
+  body.chat-session #term-wrap{display:block}
+  .xterm{height:100%}
+  .xterm-viewport{background:#000 !important}
+
+  /* Soft-keyboard helper bar — CSS copied verbatim from
+     @cordfuse/llmux/src/daemon/web/server.ts (session page) so the
+     visual feel matches exactly. */
+  :root{--allkeys-h:0px}
+  #chat-bar{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bar-h);background:#11141a;border-top:1px solid #1f2329;flex-direction:column;gap:8px;padding:6px 0 14px;z-index:20;box-sizing:border-box}
+  body.chat-session #chat-bar{display:flex}
+  #chat-bar .row{display:flex;align-items:center;gap:6px;padding:0 6px;flex:0 0 auto;height:32px}
+  #chat-bar .row.arrows{justify-content:center}
+  #chat-bar .row.keys{justify-content:flex-start}
+  #chat-bar #more{flex:0 0 auto;margin-left:auto}
+  #chat-bar button{flex:0 0 auto;min-width:40px;height:30px;padding:0 10px;background:#1c2128;color:#e6e8eb;border:1px solid #262c34;border-radius:6px;font:13px ui-monospace,monospace;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:background .15s,border-color .15s}
+  #chat-bar button:active{background:#252b34;border-color:#3a414b}
+  #chat-bar button[aria-pressed="true"]{background:#1e3a52;border-color:#2d5a85;color:#7cc4ff}
+  #chat-bar button[aria-pressed="locked"]{background:#2d5a85;border-color:#4a7fae;color:#fff}
+
+  /* Expanded all-keys panel — opens above #chat-bar when ⋯ is tapped.
+     Contains shell chars, numbers, brackets, operators, navigation,
+     and function keys. Same structure as llmux's #all-keys. */
+  #all-keys{position:fixed;bottom:var(--bar-h);left:0;right:0;background:#0e1116;border-top:1px solid #1f2329;display:none;padding:8px;z-index:19;max-height:40vh;overflow-y:auto;box-sizing:border-box}
+  body.chat-session #all-keys.open{display:block}
+  #all-keys h4{margin:14px 4px 6px;font:500 10px/1 ui-monospace,monospace;color:#7a7f87;text-transform:uppercase;letter-spacing:.06em}
+  #all-keys h4:first-child{margin-top:4px}
+  #all-keys .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
+  #all-keys button{flex:0 0 auto;min-width:36px;height:30px;padding:0 8px;background:#1c2128;color:#e6e8eb;border:1px solid #262c34;border-radius:6px;font:12px ui-monospace,monospace;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none}
+  #all-keys button:active{background:#252b34;border-color:#3a414b}
+
+  /* When the all-keys panel is open, the terminal shrinks to make
+     room. --allkeys-h is set in JS based on the panel's actual height. */
+  body.chat-session.allkeys-open #term-wrap{bottom:calc(var(--bar-h) + var(--allkeys-h))}
+
+  /* Desktop / mouse-primary devices have a real keyboard — hide the
+     bar entirely so the terminal extends to the viewport bottom. */
+  @media (pointer: fine) and (hover: hover){
+    body.chat-session{--bar-h:0px}
+    #chat-bar, #all-keys{display:none !important}
+  }
+  /* Landscape phones — compact rows */
+  @media (orientation: landscape) and (max-height: 500px){
+    body.chat-session{--topbar-h:28px;--bar-h:64px}
+    #chat-bar button{height:22px;min-width:36px;padding:0 8px;font-size:11px}
+    #chat-bar{padding:4px 0 10px;gap:4px}
+    #chat-bar .row{gap:4px;height:24px}
+    #all-keys{max-height:60vh}
+    #all-keys button{height:24px;min-width:30px;padding:0 7px;font-size:11px}
+  }
+    `,
+    body: `
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css" />
+
+<section class="card picker-card">
+  <h3>Interactive chat</h3>
+  <p class="sub">Spawns a fresh agent process on the host attached to your browser via WebSocket. Close the tab, hit the back arrow, or type <code>/exit</code> to terminate gracefully. Hit the red <code>×</code> in the topbar for an immediate SIGKILL when an agent is wedged. Async-by-design: no persistent sessions — for durable work, use the orch bus.</p>
+
+  <div class="pick-row">
+    <label for="chat-agent">agent</label>
+    <select id="chat-agent"></select>
+  </div>
+  <div class="pick-row cwd-row">
+    <label for="chat-cwd">cwd</label>
+    <input type="text" id="chat-cwd" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="/path/to/dir">
+    <button type="button" id="cwd-recent" title="Recent directories">recent ⌄</button>
+    <div id="cwd-recent-menu" role="menu" aria-hidden="true"></div>
+  </div>
+  <div class="actions-row">
+    <button type="button" class="primary" id="chat-start">start session</button>
+  </div>
+</section>
+
+<div id="chat-topbar">
+  <button class="iconbtn" id="chat-back" title="Back to picker (graceful exit)" aria-label="back">⌂</button>
+  <button class="iconbtn" id="chat-kill" title="SIGKILL the agent immediately" aria-label="kill">×</button>
+  <span class="title">
+    <span class="title-dot" id="chat-dot" data-state="connecting" title="connecting"></span>
+    <span class="title-name" id="chat-title">—</span>
+  </span>
+  <span class="brand">CROSSTALK</span>
+  <span class="ver">${versionStr ? 'v' + escapeHtml(versionStr) : ''}</span>
+</div>
+
+<div id="term-wrap"></div>
+
+<div id="chat-bar" aria-label="keyboard helper">
+  <div class="row arrows">
+    <button data-mod="shift" title="Shift (tap then key; double-tap to lock)">Shift</button>
+    <button data-key="home" title="Home">Home</button>
+    <button data-key="up" title="Up">▲</button>
+    <button data-key="down" title="Down">▼</button>
+    <button data-key="left" title="Left">◀</button>
+    <button data-key="right" title="Right">▶</button>
+    <button data-key="end" title="End">End</button>
+  </div>
+  <div class="row keys">
+    <button data-key="esc" title="Escape">Esc</button>
+    <button data-key="tab" title="Tab">Tab</button>
+    <button data-mod="ctrl" title="Ctrl (tap then key; double-tap to lock)">Ctrl</button>
+    <button data-mod="alt" title="Alt (tap then key; double-tap to lock)">Alt</button>
+    <button id="more" title="More keys (functions, brackets, etc.)">⋯</button>
+  </div>
+</div>
+
+<div id="all-keys" aria-hidden="true">
+  <h4>shell</h4>
+  <div class="row">
+    <button data-char="~">~</button>
+    <button data-char="\`">\`</button>
+    <button data-char="/">/</button>
+    <button data-char="\\\\">\\</button>
+    <button data-char="|">|</button>
+    <button data-char="-">-</button>
+    <button data-char="_">_</button>
+  </div>
+  <h4>numbers</h4>
+  <div class="row">
+    <button data-char="0">0</button><button data-char="1">1</button><button data-char="2">2</button>
+    <button data-char="3">3</button><button data-char="4">4</button><button data-char="5">5</button>
+    <button data-char="6">6</button><button data-char="7">7</button><button data-char="8">8</button>
+    <button data-char="9">9</button>
+  </div>
+  <h4>brackets &amp; quotes</h4>
+  <div class="row">
+    <button data-char="(">(</button><button data-char=")">)</button>
+    <button data-char="[">[</button><button data-char="]">]</button>
+    <button data-char="{">{</button><button data-char="}">}</button>
+    <button data-char="&lt;">&lt;</button><button data-char="&gt;">&gt;</button>
+    <button data-char="'">'</button><button data-char='"'>"</button>
+  </div>
+  <h4>operators</h4>
+  <div class="row">
+    <button data-char="=">=</button><button data-char="+">+</button>
+    <button data-char="*">*</button><button data-char="&amp;">&amp;</button>
+    <button data-char="^">^</button><button data-char="%">%</button>
+    <button data-char="$">$</button><button data-char="#">#</button>
+    <button data-char="@">@</button><button data-char="!">!</button>
+    <button data-char="?">?</button>
+  </div>
+  <h4>punctuation</h4>
+  <div class="row">
+    <button data-char=":">:</button><button data-char=";">;</button>
+    <button data-char=",">,</button><button data-char=".">.</button>
+  </div>
+  <h4>navigation &amp; edit</h4>
+  <div class="row">
+    <button data-key="pgup">PgUp</button><button data-key="pgdn">PgDn</button>
+    <button data-key="del">Del</button><button data-key="ins">Ins</button>
+    <button data-key="bsp">⌫ Bsp</button><button data-key="enter">↵ Enter</button>
+  </div>
+  <h4>function keys</h4>
+  <div class="row">
+    <button data-key="f1">F1</button><button data-key="f2">F2</button>
+    <button data-key="f3">F3</button><button data-key="f4">F4</button>
+    <button data-key="f5">F5</button><button data-key="f6">F6</button>
+    <button data-key="f7">F7</button><button data-key="f8">F8</button>
+    <button data-key="f9">F9</button><button data-key="f10">F10</button>
+    <button data-key="f11">F11</button><button data-key="f12">F12</button>
+  </div>
+  <h4>actions</h4>
+  <div class="row">
+    <button id="reset-term" title="Clear xterm buffer and send Ctrl-L to redraw">Reset terminal</button>
+  </div>
+</div>
+`,
+    inlineScript: `${TOAST_HELPER}
+window.__CHAT_AGENTS__ = ${agentsJson};
+window.__CHAT_HOME__ = ${homeJson};
+`,
+  }).replace('</body>', `
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+<script>
+(() => {
+  const agents = window.__CHAT_AGENTS__ || [];
+  const home = window.__CHAT_HOME__ || '/';
+  const sel = document.getElementById('chat-agent');
+  const cwdInput = document.getElementById('chat-cwd');
+  const cwdRecentBtn = document.getElementById('cwd-recent');
+  const cwdRecentMenu = document.getElementById('cwd-recent-menu');
+  const startBtn = document.getElementById('chat-start');
+  const backBtn = document.getElementById('chat-back');
+  const killBtn = document.getElementById('chat-kill');
+  const dot = document.getElementById('chat-dot');
+  const titleEl = document.getElementById('chat-title');
+  const wrap = document.getElementById('term-wrap');
+
+  if (agents.length === 0) {
+    sel.innerHTML = '<option value="">(no agents installed)</option>';
+    sel.disabled = true;
+    startBtn.disabled = true;
+  } else {
+    sel.innerHTML = agents.map(a => '<option value="' + a + '">' + a + '</option>').join('') +
+                    '<option value="bash">bash (shell)</option>';
+  }
+
+  // ── CWD picker (Option A) ─────────────────────────────────────
+  // Pre-fill the input from the last-used cwd, falling back to $HOME.
+  // The recent-cwds dropdown surfaces the last 5 used dirs from
+  // localStorage. Server-side validates the path on spawn — invalid
+  // paths fall back to $HOME with a warning line in the terminal.
+  const LS_KEY = 'crosstalk_recent_cwds';
+  function readRecent(){
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      const arr = raw ? JSON.parse(raw) : [];
+      return Array.isArray(arr) ? arr.filter(s => typeof s === 'string') : [];
+    } catch { return []; }
+  }
+  function writeRecent(arr){
+    try { localStorage.setItem(LS_KEY, JSON.stringify(arr.slice(0, 5))); } catch {}
+  }
+  function pushRecent(dir){
+    if (!dir) return;
+    const cur = readRecent().filter(d => d !== dir);
+    cur.unshift(dir);
+    writeRecent(cur);
+  }
+  function renderRecentMenu(){
+    const recent = readRecent();
+    if (recent.length === 0){
+      cwdRecentMenu.innerHTML = '<div class="empty">no recent directories yet</div>';
+      return;
+    }
+    cwdRecentMenu.innerHTML = recent
+      .map(d => '<button type="button" data-cwd="' + d.replace(/"/g, '&quot;') + '" title="' + d.replace(/"/g, '&quot;') + '">' + d + '</button>')
+      .join('');
+  }
+  function setCwdMenuOpen(open){
+    cwdRecentMenu.classList.toggle('open', open);
+    cwdRecentMenu.setAttribute('aria-hidden', String(!open));
+  }
+  // Initial value: last-used cwd or $HOME.
+  const recentInit = readRecent();
+  cwdInput.value = recentInit[0] || home;
+  cwdInput.placeholder = home;
+
+  cwdRecentBtn.addEventListener('click', () => {
+    const isOpen = cwdRecentMenu.classList.contains('open');
+    if (!isOpen) renderRecentMenu();
+    setCwdMenuOpen(!isOpen);
+  });
+  cwdRecentMenu.addEventListener('click', (ev) => {
+    const t = ev.target;
+    if (!(t instanceof HTMLElement) || !t.dataset.cwd) return;
+    cwdInput.value = t.dataset.cwd;
+    setCwdMenuOpen(false);
+  });
+  document.addEventListener('click', (ev) => {
+    if (!cwdRecentMenu.classList.contains('open')) return;
+    const t = ev.target;
+    if (t === cwdRecentBtn || cwdRecentMenu.contains(t)) return;
+    setCwdMenuOpen(false);
+  });
+
+  let term = null;
+  let fitAddon = null;
+  let ws = null;
+
+  // Modifier state — 'off' | 'pending' (one-shot) | 'locked' (sticky).
+  // Tap once → pending; tap again → locked; tap third time → off.
+  const mods = { ctrl: 'off', alt: 'off', shift: 'off' };
+  function setMod(mod, val){
+    mods[mod] = val;
+    const btn = document.querySelector('[data-mod="' + mod + '"]');
+    if (btn){
+      if (val === 'off') btn.removeAttribute('aria-pressed');
+      else btn.setAttribute('aria-pressed', val === 'locked' ? 'locked' : 'true');
+    }
+  }
+  function consumeMods(d){
+    let out = d;
+    if (mods.shift !== 'off' && d.length === 1){
+      out = d.toUpperCase();
+      if (mods.shift === 'pending') setMod('shift', 'off');
+    }
+    if (mods.ctrl !== 'off' && out.length === 1){
+      const c = out.charCodeAt(0);
+      if (c >= 0x40 && c <= 0x7f) out = String.fromCharCode(c & 0x1f);
+      else if (c === 0x20) out = String.fromCharCode(0);
+      if (mods.ctrl === 'pending') setMod('ctrl', 'off');
+    }
+    if (mods.alt !== 'off'){
+      out = String.fromCharCode(0x1b) + out;
+      if (mods.alt === 'pending') setMod('alt', 'off');
+    }
+    return out;
+  }
+
+  function setStatus(state, label){
+    dot.dataset.state = state;
+    dot.title = label;
+  }
+
+  function enterSession(agent){
+    document.body.classList.add('chat-session');
+    titleEl.textContent = agent;
+    setStatus('connecting', 'connecting…');
+  }
+  function leaveSession(){
+    document.body.classList.remove('chat-session');
+    document.body.classList.remove('allkeys-open');
+    document.getElementById('all-keys').classList.remove('open');
+    if (term){ try { term.dispose(); } catch(_){} }
+    term = null; fitAddon = null;
+    wrap.innerHTML = '';
+    setMod('ctrl', 'off');
+    setMod('alt', 'off');
+    setMod('shift', 'off');
+  }
+
+  function startSession(){
+    const agent = sel.value;
+    if (!agent){ window.showToast('pick an agent first', 'err'); return; }
+    const cwd = (cwdInput.value || '').trim() || home;
+    pushRecent(cwd);
+    enterSession(agent);
+
+    term = new window.Terminal({
+      cursorBlink: true,
+      fontFamily: 'ui-monospace, monospace',
+      fontSize: 13,
+      theme: { background: '#000000', foreground: '#e6e8eb', cursor: '#7cc4ff' },
+      scrollback: 5000,
+    });
+    fitAddon = new window.FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(wrap);
+    requestAnimationFrame(() => {
+      try { fitAddon.fit(); } catch(_){}
+    });
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = proto + '//' + location.host + '/ws/chat?agent=' + encodeURIComponent(agent) + '&cols=' + (term.cols || 80) + '&rows=' + (term.rows || 24) + '&cwd=' + encodeURIComponent(cwd);
+    ws = new WebSocket(wsUrl);
+    ws.binaryType = 'arraybuffer';
+
+    ws.addEventListener('open', () => {
+      setStatus('connected', 'connected');
+      try {
+        if (fitAddon) fitAddon.fit();
+        ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+      } catch(_){}
+      term.focus();
+    });
+    ws.addEventListener('message', (ev) => {
+      const data = typeof ev.data === 'string' ? ev.data : new TextDecoder().decode(new Uint8Array(ev.data));
+      term.write(data);
+    });
+    ws.addEventListener('close', (ev) => {
+      setStatus('closed', 'disconnected (code ' + ev.code + ')');
+      ws = null;
+      // Server-initiated close (agent exited naturally — 'exit' in
+      // bash, '/exit' inside an agent CLI, Ctrl-D, etc.) — auto-return
+      // to the picker after a short delay so the operator can read the
+      // exit line. Mirrors the back-button behavior; means the operator
+      // never has to manually dismiss the terminal screen.
+      //
+      // Skip auto-leave for transport-level disconnects (code 1006
+      // abnormal closure) so the operator can still see what happened
+      // and choose to retry rather than getting bounced silently.
+      const NATURAL_EXIT_CODES = new Set([1000, 1001, 1003, 1011]);
+      if (NATURAL_EXIT_CODES.has(ev.code)){
+        setTimeout(leaveSession, 1500);
+      }
+    });
+    ws.addEventListener('error', () => {
+      setStatus('error', 'connection error');
+    });
+
+    term.onData((data) => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      // Apply Ctrl/Alt modifiers before forwarding.
+      const mapped = consumeMods(data);
+      // /exit interception (graceful exit).
+      if (data === String.fromCharCode(13) || data === String.fromCharCode(10)){
+        const trailingLine = (term.__buf || '').trim();
+        term.__buf = '';
+        if (trailingLine === '/exit'){
+          ws.send(JSON.stringify({ type: 'exit' }));
+          return;
+        }
+      }
+      term.__buf = (term.__buf || '') + data;
+      if (term.__buf.length > 64) term.__buf = term.__buf.slice(-64);
+      ws.send(mapped);
+    });
+
+    // Resize handler. visualViewport.resize is the event that fires
+    // when the soft keyboard opens/closes — re-fit the terminal so
+    // its cell grid matches the available height.
+    let resizeT = null;
+    const onResize = () => {
+      if (resizeT) clearTimeout(resizeT);
+      resizeT = setTimeout(() => {
+        try { fitAddon.fit(); } catch(_){}
+        if (ws && ws.readyState === WebSocket.OPEN){
+          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+        }
+      }, 150);
+    };
+    window.addEventListener('resize', onResize);
+    if (window.visualViewport) window.visualViewport.addEventListener('resize', onResize);
+  }
+
+  function gracefulExit(){
+    if (ws && ws.readyState === WebSocket.OPEN){
+      ws.send(JSON.stringify({ type: 'exit' }));
+      setTimeout(leaveSession, 250);
+    } else {
+      leaveSession();
+    }
+  }
+
+  function forceKill(){
+    if (ws && ws.readyState === WebSocket.OPEN){
+      ws.send(JSON.stringify({ type: 'kill' }));
+      setTimeout(leaveSession, 250);
+    } else {
+      leaveSession();
+    }
+  }
+
+  startBtn.addEventListener('click', startSession);
+  backBtn.addEventListener('click', gracefulExit);
+  killBtn.addEventListener('click', () => {
+    if (confirm('SIGKILL this agent immediately? Unsaved work in the agent will be lost.')) forceKill();
+  });
+
+  // Keyboard helper bar + all-keys panel.
+  //
+  // KEYS map carries the byte sequence each named key emits. Values
+  // are written with \\u escapes so they survive the engine's HTML
+  // template-literal embedding, then unescaped at runtime.
+  const KEYS = {
+    esc: '\\u001b', tab: '\\t', enter: '\\r', bsp: '\\u007f',
+    up: '\\u001b[A', down: '\\u001b[B', right: '\\u001b[C', left: '\\u001b[D',
+    home: '\\u001b[H', end: '\\u001b[F',
+    pgup: '\\u001b[5~', pgdn: '\\u001b[6~',
+    del: '\\u001b[3~', ins: '\\u001b[2~',
+    f1: '\\u001bOP', f2: '\\u001bOQ', f3: '\\u001bOR', f4: '\\u001bOS',
+    f5: '\\u001b[15~', f6: '\\u001b[17~', f7: '\\u001b[18~', f8: '\\u001b[19~',
+    f9: '\\u001b[20~', f10: '\\u001b[21~', f11: '\\u001b[23~', f12: '\\u001b[24~',
+  };
+
+  const allKeysEl = document.getElementById('all-keys');
+  const moreBtn = document.getElementById('more');
+
+  function updateAllKeysH(){
+    if (!allKeysEl.classList.contains('open')){
+      document.documentElement.style.setProperty('--allkeys-h', '0px');
+      return;
+    }
+    // Cap the panel at 40% of the visible viewport so it doesn't crowd
+    // the terminal entirely on short screens (landscape phones, etc.).
+    const visibleH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const h = Math.min(allKeysEl.scrollHeight, Math.floor(visibleH * 0.4));
+    document.documentElement.style.setProperty('--allkeys-h', h + 'px');
+  }
+  function toggleAllKeys(){
+    const open = !allKeysEl.classList.contains('open');
+    allKeysEl.classList.toggle('open', open);
+    document.body.classList.toggle('allkeys-open', open);
+    allKeysEl.setAttribute('aria-hidden', String(!open));
+    moreBtn.setAttribute('aria-pressed', open ? 'true' : 'false');
+    updateAllKeysH();
+    // Re-fit the terminal so the cell grid adapts to the new height.
+    requestAnimationFrame(() => {
+      try { fitAddon && fitAddon.fit(); } catch(_){}
+      if (ws && ws.readyState === WebSocket.OPEN && term){
+        ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+      }
+    });
+  }
+  moreBtn.addEventListener('click', toggleAllKeys);
+
+  function sendKey(key){
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    const seq = KEYS[key];
+    if (!seq) return;
+    ws.send(consumeMods(seq));
+    if (term) term.focus();
+  }
+
+  function sendChar(ch){
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    ws.send(consumeMods(ch));
+    if (term) term.focus();
+  }
+
+  // Bar (modifiers + Esc/Tab/arrows/Home/End)
+  document.getElementById('chat-bar').addEventListener('click', (ev) => {
+    const t = ev.target;
+    if (!(t instanceof HTMLElement)) return;
+    if (t.id === 'more') return; // moreBtn has its own listener
+    if (t.dataset.mod){
+      const mod = t.dataset.mod;
+      const cur = mods[mod];
+      const next = cur === 'off' ? 'pending' : (cur === 'pending' ? 'locked' : 'off');
+      setMod(mod, next);
+      return;
+    }
+    if (t.dataset.key) sendKey(t.dataset.key);
+  });
+
+  // All-keys panel (chars + extended keys + reset action)
+  allKeysEl.addEventListener('click', (ev) => {
+    const t = ev.target;
+    if (!(t instanceof HTMLElement)) return;
+    if (t.id === 'reset-term'){
+      // Reset = clear xterm scrollback + send Ctrl-L to redraw the
+      // remote prompt. Useful when an agent CLI gets confused about
+      // terminal state (cursor in weird position, garbled output).
+      if (term){ try { term.clear(); term.reset(); } catch(_){} }
+      if (ws && ws.readyState === WebSocket.OPEN) ws.send('\\u000c'.replace(/\\\\u([0-9a-f]{4})/gi, (_,h) => String.fromCharCode(parseInt(h,16))));
+      return;
+    }
+    if (t.dataset.char){
+      sendChar(t.dataset.char);
+      return;
+    }
+    if (t.dataset.key) sendKey(t.dataset.key);
+  });
+
+  // The KEYS literal strings carry \\u escapes that survive engine
+  // HTML embedding. Unescape them once at boot so sendKey works as
+  // expected — converts '\\u001b[A' into the 3-byte sequence ESC [ A.
+  for (const k of Object.keys(KEYS)){
+    KEYS[k] = KEYS[k].replace(/\\\\u([0-9a-f]{4})/gi, (_, h) => String.fromCharCode(parseInt(h, 16)));
+  }
+})();
+</script>
+</body>`);
+}