@agentproto/apps 0.8.2 → 0.9.1

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { defineApp } from '@agentproto/app-kit';
 import { defineAgent } from '@agentproto/agent';
 import { defineWorkflow } from '@agentproto/workflow';
+import { z } from 'zod';
 
 /**
  * @agentproto/apps v0.1.0
@@ -134,17 +135,29 @@ var illustrator = {
 var produceContent = defineWorkflow({
   id: "produce-content",
   name: "Produce a piece of content",
-  description: "Read the sources, draft the piece, edit it, then commit it.",
+  description: "Research the sources, draft the piece, then edit it.",
   version: "0.1.0",
   inputs: {},
   outputs: {},
-  // Concrete workspace tools (fs + exec), so the workflow describes a process
-  // a standard runtime can actually run — not abstract tools nothing provides.
   steps: [
-    { id: "research", kind: "tool", tool: "read_file" },
-    { id: "draft", kind: "tool", tool: "write_file" },
-    { id: "edit", kind: "tool", tool: "edit_file" },
-    { id: "publish", kind: "tool", tool: "run_command" }
+    {
+      id: "research",
+      kind: "agent",
+      agent: { ref: "@agentproto/researcher" },
+      prompt: "Read the source material already in the workspace and hand off a tight brief with a citation for every claim."
+    },
+    {
+      id: "draft",
+      kind: "agent",
+      agent: { ref: "@agentproto/writer" },
+      prompt: "Draft the piece from the researcher's brief and its sources."
+    },
+    {
+      id: "edit",
+      kind: "agent",
+      agent: { ref: "@agentproto/editor" },
+      prompt: "Edit the draft for voice, clarity, and length, then finalize it."
+    }
   ]
 });
 var produceCover = defineWorkflow({
@@ -155,10 +168,12 @@ var produceCover = defineWorkflow({
   inputs: {},
   outputs: {},
   steps: [
-    { id: "concept-from-article", kind: "tool", tool: "content.cover-concept" },
-    { id: "base-gen", kind: "tool", tool: "content.cover-base-gen" },
-    { id: "cleanup", kind: "tool", tool: "content.cover-cleanup" },
-    { id: "upload", kind: "tool", tool: "content.cover-upload" }
+    {
+      id: "illustrate",
+      kind: "agent",
+      agent: { ref: "@agentproto/illustrator" },
+      prompt: "Produce the cover for this article in one pass: (1) read the article and derive the single visual concept that best represents it, (2) write the art direction as a clean, text-free image prompt and generate the base image from it, (3) clean up the generated image (crop, color, artifacts), then (4) upload the final cover to the workspace's output location."
+    }
   ]
 });
 
@@ -2867,6 +2882,2614 @@ var sessionViewer = defineApp({
   }
 });
 
-export { codeTeam, contentTeam, mailTriage, mediaViewer, opsPanel, sessionViewer };
+// src/panel-bridge.ts
+function panelBridgeScript(appName) {
+  return `// \u2500\u2500 MCP Apps bridge (shared: panel-bridge.ts) \u2500\u2500
+// JSON-RPC 2.0 over window.parent.postMessage \xB7 spec 2026-01-26
+var _nextId = 1, _pending = {}, _notifyHandlers = [];
+var _hostContext = null, _hostContextHandlers = [];
+function post(msg){ window.parent.postMessage(msg, '*'); }
+function getHostContext(){ return _hostContext; }
+function onHostContext(cb){
+  _hostContextHandlers.push(cb);
+  // Replay the last context so a late subscriber isn't stuck blind.
+  if (_hostContext){ try { cb(_hostContext); } catch(_) {} }
+}
+function _setHostContext(ctx){
+  if (!ctx || typeof ctx !== 'object') return;
+  // ui/notifications/host-context-changed carries only the changed keys \u2014
+  // merge, matching the official ext-apps App behaviour.
+  _hostContext = Object.assign({}, _hostContext || {}, ctx);
+  for (var i = 0; i < _hostContextHandlers.length; i++){
+    try { _hostContextHandlers[i](_hostContext); } catch(_) {}
+  }
+}
+function rpcRequest(method, params){
+  return new Promise(function(resolve, reject){
+    var id = _nextId++;
+    _pending[id] = {resolve: resolve, reject: reject};
+    post({jsonrpc: '2.0', id: id, method: method, params: params || {}});
+  });
+}
+function rpcNotify(method, params){ post({jsonrpc: '2.0', method: method, params: params || {}}); }
+function onHostNotification(cb){ _notifyHandlers.push(cb); }
+window.addEventListener('message', function(evt){
+  var msg = evt.data;
+  if (!msg || typeof msg !== 'object' || msg.jsonrpc !== '2.0') return;
+  if (msg.id != null && msg.method == null){
+    var p = _pending[msg.id];
+    if (!p) return;
+    delete _pending[msg.id];
+    if (msg.error) p.reject(new Error(msg.error.message || ('rpc error ' + msg.error.code)));
+    else p.resolve(msg.result);
+    return;
+  }
+  if (msg.method){
+    if (msg.method === 'ui/notifications/host-context-changed'){
+      _setHostContext(msg.params || {});
+    }
+    for (var i = 0; i < _notifyHandlers.length; i++){
+      try { _notifyHandlers[i](msg.method, msg.params || {}); } catch(_) {}
+    }
+  }
+});
+function initBridge(){
+  return rpcRequest('ui/initialize', {
+    appInfo: {name: ${JSON.stringify(appName)}, version: '0.1.0'},
+    appCapabilities: {availableDisplayModes: ['inline', 'fullscreen', 'pip']},
+    protocolVersion: '2026-01-26'
+  }).then(function(result){
+    // The initialize result carries the initial hostContext (displayMode +
+    // availableDisplayModes) \u2014 capture it before notifying the host.
+    if (result && result.hostContext) _setHostContext(result.hostContext);
+    rpcNotify('ui/notifications/initialized', {});
+  });
+}
+function requestDisplayMode(mode){
+  return rpcRequest('ui/request-display-mode', {mode: mode});
+}
+function callTool(name, args){
+  return rpcRequest('tools/call', {name: name, arguments: args || {}}).then(function(result){
+    if (result.isError){
+      var e = (result.content && result.content[0] && result.content[0].text) || 'tool error';
+      throw new Error(e);
+    }
+    var text = (result.content && result.content[0] && result.content[0].text) || '{}';
+    return JSON.parse(text);
+  });
+}
+
+// \u2500\u2500 Display-mode toggle buttons (NO auto-request) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// Injected by the shared bridge so every panel gets them without touching
+// its own markup. Mirrors guilde canvas.app.ts canvasShellHtml(): the
+// panel stays inline by default; the user expands on demand. Buttons only
+// appear for modes the host advertises in hostContext.availableDisplayModes.
+(function(){
+  function mount(){
+    var style = document.createElement('style');
+    style.textContent = '#dm,#pin{display:none;position:fixed;top:8px;z-index:10;'
+      + 'border:1px solid #d0d0d0;background:#fff;color:#1a1a1a;'
+      + 'font:600 13px/1 system-ui,sans-serif;padding:7px 12px;border-radius:6px;'
+      + 'cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}'
+      + '#dm{right:8px}#pin{right:118px}'
+      + '#dm:hover,#pin:hover{background:#f2f2f2;border-color:#b0b0b0}'
+      + '@media (prefers-color-scheme:dark){'
+      + '#dm,#pin{border-color:#555;background:#2a2a2a;color:#f0f0f0;box-shadow:0 1px 4px rgba(0,0,0,.5)}'
+      + '#dm:hover,#pin:hover{background:#333;border-color:#777}}';
+    document.head.appendChild(style);
+
+    var btn = document.createElement('button');
+    btn.id = 'dm'; btn.type = 'button'; btn.title = "Basculer l'affichage";
+    var pin = document.createElement('button');
+    pin.id = 'pin'; pin.type = 'button'; pin.title = '\xC9pingler sur le c\xF4t\xE9 (pip)';
+    document.body.appendChild(pin);
+    document.body.appendChild(btn);
+
+    function has(avail, m){ return !!avail && avail.indexOf(m) >= 0; }
+
+    // Re-sync button visibility + label from the current host context.
+    function syncBtn(ctx){
+      ctx = ctx || {};
+      var avail = ctx.availableDisplayModes;
+      // Diagnostic: what does THIS host actually advertise? (inline/fullscreen/pip)
+      console.log('[mcp-app] displayMode=', ctx.displayMode,
+                  'availableDisplayModes=', avail);
+
+      // Fullscreen toggle button.
+      if (has(avail, 'fullscreen')){
+        btn.style.display = 'block';
+        btn.textContent = (ctx.displayMode === 'fullscreen') ? '\u2921 R\xE9duire' : '\u2922 Agrandir';
+      } else { btn.style.display = 'none'; }
+
+      // Dedicated pip ("pinned on side") button \u2014 only if the host advertises pip.
+      if (has(avail, 'pip')){
+        pin.style.display = 'block';
+        pin.textContent = (ctx.displayMode === 'pip') ? '\u2921 D\xE9tacher' : '\u{1F4CC} \xC9pingler';
+      } else { pin.style.display = 'none'; }
+    }
+
+    onHostContext(syncBtn);
+
+    btn.addEventListener('click', function(){
+      var ctx = getHostContext() || {};
+      var inPanel = (ctx.displayMode === 'fullscreen' || ctx.displayMode === 'pip');
+      requestDisplayMode(inPanel ? 'inline' : 'fullscreen').catch(function(){});
+    });
+
+    pin.addEventListener('click', function(){
+      var ctx = getHostContext() || {};
+      requestDisplayMode(ctx.displayMode === 'pip' ? 'inline' : 'pip').catch(function(){});
+    });
+  }
+  if (document.body) mount();
+  else document.addEventListener('DOMContentLoaded', mount);
+})();`;
+}
+
+// src/sessions-panel/panel.ts
+var PANEL_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>agentproto sessions</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:Menlo,Monaco,'Courier New',monospace;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden}
+#app{display:flex;height:100%}
+#sidebar{width:220px;min-width:180px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
+#sidebar-hdr{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
+#sidebar-hdr h1{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
+#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:15px;line-height:1;padding:2px 4px;border-radius:4px;font-family:inherit}
+#refresh-btn:hover{color:var(--text);background:var(--bg3)}
+#session-list{flex:1;overflow-y:auto;padding:4px 0}
+.si{padding:8px 12px;cursor:pointer;border-left:2px solid transparent}
+.si:hover{background:var(--bg3)}
+.si.active{background:var(--bg3);border-left-color:var(--blue)}
+.sn{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sm{font-size:11px;color:var(--text2);margin-top:2px;display:flex;gap:6px;align-items:center}
+.badge{display:inline-block;padding:1px 5px;border-radius:10px;font-size:10px;font-weight:600}
+.br{background:rgba(63,185,80,.15);color:var(--green)}
+.bs{background:rgba(88,166,255,.15);color:var(--blue)}
+.be{background:rgba(139,148,158,.1);color:var(--text2)}
+.bk{background:rgba(248,81,73,.1);color:var(--red)}
+.berr{background:rgba(248,81,73,.2);color:var(--red)}
+#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+#toolbar{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg2)}
+#session-title{font-size:12px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.abtn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}
+.abtn:hover{background:var(--border)}
+.abtn:disabled{opacity:.4;cursor:default}
+.abtn.danger{border-color:var(--red);color:var(--red)}
+.abtn.danger:hover{background:rgba(248,81,73,.1)}
+#output{flex:1;overflow-y:auto;padding:8px 12px;background:var(--bg);font-size:12px;line-height:1.6}
+.line{white-space:pre-wrap;word-break:break-all}
+#empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text2);gap:8px;text-align:center;padding:24px}
+#empty .ico{font-size:32px}
+#statusbar{padding:4px 12px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+.errmsg{color:var(--red);padding:12px}
+/* ANSI SGR */
+.ab{font-weight:bold}.ad{opacity:.6}.ai{font-style:italic}.au{text-decoration:underline}
+.f0{color:#21262d}.f1{color:#f85149}.f2{color:#3fb950}.f3{color:#d29922}
+.f4{color:#58a6ff}.f5{color:#bc8cff}.f6{color:#39d353}.f7{color:#e6edf3}
+.f8{color:#8b949e}.f9{color:#ff7b72}.f10{color:#56d364}.f11{color:#e3b341}
+.f12{color:#79c0ff}.f13{color:#d2a8ff}.f14{color:#56d364}.f15{color:#f0f6fc}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="sidebar">
+    <div id="sidebar-hdr">
+      <h1>Sessions</h1>
+      <button id="refresh-btn" title="Refresh" onclick="doRefresh()">&#8635;</button>
+    </div>
+    <div id="session-list"></div>
+  </div>
+  <div id="main">
+    <div id="toolbar" style="display:none">
+      <span id="session-title"></span>
+      <button class="abtn danger" id="kill-btn" onclick="doKill()">Kill</button>
+    </div>
+    <div id="output">
+      <div id="empty"><div class="ico">&#9889;</div><div>Select a session</div></div>
+    </div>
+    <div id="statusbar">Connecting to bridge&#8230;</div>
+  </div>
+</div>
+<script>
+${panelBridgeScript("agentproto-sessions-panel")}
+
+// ============================================================
+// ANSI-to-HTML renderer (SGR codes: colors 0-15, bold/dim/italic/underline)
+// ============================================================
+
+function escHtml(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function ansiToHtml(raw) {
+  // Strip CR overwrite sequences (progress bars: CR without LF)
+  var text = raw.replace(/[^\\n]*\\r([^\\n])/g, '$1').replace(/\\r/g, '');
+  var bold = false, dim = false, italic = false, underline = false, fg = -1;
+  var out = '';
+  // Split on ESC [ ... m (SGR) sequences; keep delimiters
+  var ESC = '\x1B';
+  var parts = text.split(/([\x1B]\\[[0-9;]*m)/);
+  for (var pi = 0; pi < parts.length; pi++) {
+    var part = parts[pi];
+    if (part.length === 0) continue;
+    if (part.charCodeAt(0) === 0x1b && part[1] === '[') {
+      // Parse SGR parameters
+      var inner = part.slice(2, part.length - 1); // strip ESC[ and m
+      var codes = inner === '' ? [0] : inner.split(';').map(Number);
+      for (var ci = 0; ci < codes.length; ci++) {
+        var c = codes[ci];
+        if (c === 0) { bold = false; dim = false; italic = false; underline = false; fg = -1; }
+        else if (c === 1) bold = true;
+        else if (c === 2) dim = true;
+        else if (c === 3) italic = true;
+        else if (c === 4) underline = true;
+        else if (c === 22) { bold = false; dim = false; }
+        else if (c === 23) italic = false;
+        else if (c === 24) underline = false;
+        else if (c >= 30 && c <= 37) fg = c - 30;
+        else if (c === 39) fg = -1;
+        else if (c >= 90 && c <= 97) fg = c - 90 + 8;
+      }
+    } else {
+      // Text segment \u2014 strip any remaining non-printable ESC sequences
+      var safe = escHtml(part).replace(/\x1B\\[[^m]*[A-Za-z]/g, '');
+      if (safe === '') continue;
+      var cls = '';
+      if (bold) cls += ' ab';
+      if (dim) cls += ' ad';
+      if (italic) cls += ' ai';
+      if (underline) cls += ' au';
+      if (fg >= 0 && fg <= 15) cls += ' f' + fg;
+      cls = cls.trim();
+      out += cls ? '<span class="' + cls + '">' + safe + '</span>' : safe;
+    }
+  }
+  return out;
+}
+
+// ============================================================
+// App state
+// ============================================================
+
+var sessions = [];
+var activeId = null;
+var outputLines = [];
+var nextCursor = 0;
+var pollTimer = null;
+var pollActive = false;
+
+function setStatus(msg) {
+  document.getElementById('statusbar').textContent = msg;
+}
+
+// ============================================================
+// Session list
+// ============================================================
+
+function badgeClass(status) {
+  if (status === 'running') return 'br';
+  if (status === 'starting') return 'bs';
+  if (status === 'killed') return 'bk';
+  if (status === 'error') return 'berr';
+  return 'be'; // exited
+}
+
+// Derive a turn-aware display badge. A session's 'status' only tracks process
+// liveness, so an agent-cli process stays "running" while idle between turns.
+// Read 'busy' / 'awaitingInput' to show real activity instead:
+//   working  \u2014 a turn is in flight (busy)
+//   waiting  \u2014 turn ended on awaiting-input (needs a reply)
+//   idle     \u2014 process alive, no turn running (last turn done)
+function displayBadge(s) {
+  if (s.status === 'running' && s.kind === 'agent-cli') {
+    if (s.busy) return { label: 'working', cls: 'br' };
+    if (s.awaitingInput) return { label: 'waiting', cls: 'bs' };
+    return { label: 'idle', cls: 'be' };
+  }
+  return { label: s.status, cls: badgeClass(s.status) };
+}
+
+function renderSidebar() {
+  var el = document.getElementById('session-list');
+  if (sessions.length === 0) {
+    el.innerHTML = '<div style="padding:12px;color:var(--text2);font-size:11px">No sessions</div>';
+    return;
+  }
+  var html = '';
+  for (var i = 0; i < sessions.length; i++) {
+    var s = sessions[i];
+    var label = s.label || s.name || (s.command ? s.command.split('/').pop() : null) || s.id.slice(0, 8);
+    var db = displayBadge(s);
+    var active = s.id === activeId ? ' active' : '';
+    // blockedOn (set while the turn waits on a spawned sub-agent or a
+    // shell command) rides next to the status badge; waiting-on-user is
+    // NOT here \u2014 that's awaitingInput, a different signal.
+    var blocked = '';
+    if (s.blockedOn === 'subagent') blocked = '<span class="badge bs">&#129513; sous-agent</span>';
+    else if (s.blockedOn === 'command') blocked = '<span class="badge bs">&#9203; commande</span>';
+    html += '<div class="si' + active + '" onclick="selectSession(\\'' + s.id + '\\')">'
+          + '<div class="sn">' + escHtml(label) + '</div>'
+          + '<div class="sm">'
+          + '<span class="badge ' + db.cls + '">' + db.label + '</span>'
+          + blocked
+          + '<span>' + escHtml(s.kind || '') + '</span>'
+          + '</div></div>';
+  }
+  el.innerHTML = html;
+}
+
+function loadSessions() {
+  // {kind:'all'} is session_list's live-able default \u2014 agent-CLI + terminal/
+  // PTY only. kind:"command" rows (a shell-execution log, not a resumable
+  // session) are excluded unless includeCommands is explicitly passed.
+  return callTool('session_list', {kind: 'all'}).then(function(data) {
+    sessions = data.sessions || [];
+    renderSidebar();
+    setStatus(sessions.length + ' session' + (sessions.length === 1 ? '' : 's') + ' \xB7 ' + new Date().toLocaleTimeString());
+  }).catch(function(e) {
+    setStatus('Error: ' + e.message);
+  });
+}
+
+// ============================================================
+// Output panel
+// ============================================================
+
+function renderOutputFull() {
+  var el = document.getElementById('output');
+  if (outputLines.length === 0) {
+    el.innerHTML = '<div id="empty"><div class="ico">&#9889;</div><div>No output yet</div></div>';
+    return;
+  }
+  var html = '';
+  for (var i = 0; i < outputLines.length; i++) {
+    html += '<div class="line">' + ansiToHtml(outputLines[i]) + '</div>';
+  }
+  el.innerHTML = html;
+  el.scrollTop = el.scrollHeight;
+}
+
+function appendLines(lines) {
+  var el = document.getElementById('output');
+  // Remove empty-state placeholder if present
+  var empty = el.querySelector('#empty');
+  if (empty) empty.parentNode.removeChild(empty);
+  var frag = document.createDocumentFragment();
+  for (var i = 0; i < lines.length; i++) {
+    var div = document.createElement('div');
+    div.className = 'line';
+    div.innerHTML = ansiToHtml(lines[i]);
+    frag.appendChild(div);
+  }
+  el.appendChild(frag);
+  el.scrollTop = el.scrollHeight;
+}
+
+function selectSession(id) {
+  activeId = id;
+  outputLines = [];
+  nextCursor = 0;
+  renderSidebar();
+
+  var s = null;
+  for (var i = 0; i < sessions.length; i++) {
+    if (sessions[i].id === id) { s = sessions[i]; break; }
+  }
+
+  var toolbar = document.getElementById('toolbar');
+  toolbar.style.display = 'flex';
+  document.getElementById('session-title').textContent = (s && (s.label || s.name)) || id.slice(0, 12);
+
+  var killBtn = document.getElementById('kill-btn');
+  killBtn.disabled = !s || (s.status !== 'running' && s.status !== 'starting');
+
+  document.getElementById('output').innerHTML = '<div style="padding:12px;color:var(--text2)">Loading&#8230;</div>';
+
+  // Initial load
+  callTool('agent_output', {sessionId: id, lastN: 200}).then(function(data) {
+    outputLines = data.lines || [];
+    nextCursor = data.nextCursor || 0;
+    renderOutputFull();
+  }).catch(function(e) {
+    document.getElementById('output').innerHTML = '<div class="errmsg">Error: ' + escHtml(e.message) + '</div>';
+  });
+}
+
+// ============================================================
+// Kill
+// ============================================================
+
+function doKill() {
+  if (!activeId) return;
+  var s = null;
+  for (var i = 0; i < sessions.length; i++) {
+    if (sessions[i].id === activeId) { s = sessions[i]; break; }
+  }
+  var toolName = (s && s.pty) ? 'terminal_kill' : 'agent_kill';
+  callTool(toolName, {sessionId: activeId}).then(function() {
+    return doRefresh();
+  }).catch(function(e) {
+    setStatus('Kill failed: ' + e.message);
+  });
+}
+
+// ============================================================
+// Poll
+// ============================================================
+
+function doPoll() {
+  if (pollActive) return;
+  pollActive = true;
+  var p = loadSessions();
+  if (activeId) {
+    var capturedId = activeId;
+    var capturedCursor = nextCursor;
+    p = p.then(function() {
+      return callTool('agent_output', {sessionId: capturedId, since: capturedCursor});
+    }).then(function(data) {
+      if (capturedId !== activeId) return; // user switched sessions
+      var newLines = data.lines || [];
+      if (newLines.length > 0) {
+        outputLines = outputLines.concat(newLines);
+        if (outputLines.length > 2000) outputLines = outputLines.slice(-2000);
+        nextCursor = data.nextCursor || nextCursor;
+        appendLines(newLines);
+      }
+    }).catch(function() {});
+  }
+  p.then(function() {
+    pollActive = false;
+    pollTimer = setTimeout(doPoll, 3000);
+  }).catch(function() {
+    pollActive = false;
+    pollTimer = setTimeout(doPoll, 3000);
+  });
+}
+
+function doRefresh() {
+  return loadSessions().then(function() {
+    if (activeId) {
+      return callTool('agent_output', {sessionId: activeId, lastN: 200}).then(function(data) {
+        outputLines = data.lines || [];
+        nextCursor = data.nextCursor || 0;
+        renderOutputFull();
+      });
+    }
+  });
+}
+
+// ============================================================
+// Boot
+// ============================================================
+
+initBridge().then(function() {
+  return loadSessions();
+}).then(function() {
+  pollTimer = setTimeout(doPoll, 3000);
+}).catch(function(e) {
+  setStatus('Bridge error: ' + e.message);
+  document.getElementById('output').innerHTML = '<div class="errmsg">Failed to connect to MCP bridge: ' + escHtml(e.message) + '</div>';
+});
+</script>
+</body>
+</html>`;
+
+// src/sessions-panel/index.ts
+var sessionsPanelInputSchema = z.object({
+  filter: z.enum(["running", "all"]).optional().describe(
+    "Which sessions to return. `running` = only alive; `all` = running + recent (default)."
+  )
+});
+function makeSessionsPanelApp(ops) {
+  return {
+    id: "agentproto_sessions",
+    title: "Agent Sessions",
+    description: "Open the agentproto sessions panel \u2014 an interactive UI that shows all running and recent agent-CLI and terminal/PTY sessions. Raw shell-command runs are a log, not a resumable session, and don't appear here \u2014 see `command_list`. The panel polls live data and lets you inspect output or kill sessions.",
+    inputSchema: sessionsPanelInputSchema,
+    execute: async (input) => ({
+      sessions: ops.listSessions(input.filter)
+    }),
+    html: PANEL_HTML
+  };
+}
+var sessionsPanelApp = defineApp({
+  id: "@agentproto/sessions-panel",
+  name: "Agent Sessions",
+  description: "Open the agentproto sessions panel \u2014 an interactive UI that shows all running and recent agent-CLI and terminal/PTY sessions.",
+  agents: [],
+  ui: {
+    html: PANEL_HTML,
+    title: "Agent Sessions",
+    tools: ["session_list", "agent_output"]
+  }
+});
+
+// src/agents-overview/panel.ts
+var AGENTS_OVERVIEW_HTML = `<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>agents \u2014 vue claire</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden}
+#app{display:flex;flex-direction:column;height:100%}
+#hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);flex-shrink:0}
+#hdr h1{font-size:13px;font-weight:600;letter-spacing:.02em}
+#hdr .sub{font-size:11px;color:var(--text2);margin-top:2px}
+#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:16px;line-height:1;padding:4px 6px;border-radius:6px}
+#refresh-btn:hover{color:var(--text);background:var(--bg3)}
+#grid{flex:1;overflow-y:auto;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-content:start}
+.card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:96px}
+.card.s-todo{border-left-color:var(--purple)}
+.card.s-work{border-left-color:var(--green)}
+.card.s-wait{border-left-color:var(--yellow)}
+.card.s-done{border-left-color:var(--text2)}
+.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
+.state{font-size:10px;font-weight:700;padding:2px 8px;border-radius:11px;white-space:nowrap;letter-spacing:.02em}
+.state.s-todo{background:rgba(188,140,255,.16);color:var(--purple)}
+.state.s-work{background:rgba(63,185,80,.16);color:var(--green)}
+.state.s-wait{background:rgba(210,153,34,.16);color:var(--yellow)}
+.state.s-done{background:rgba(139,148,158,.14);color:var(--text2)}
+.summary{font-size:12.5px;line-height:1.5;color:var(--text);word-break:break-word}
+.summary.muted{color:var(--text2);font-style:italic}
+.meta{font-size:10.5px;color:var(--text2);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
+.dot{width:5px;height:5px;border-radius:50%;background:var(--text2);display:inline-block}
+#empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);gap:8px;padding:48px;text-align:center}
+#empty .ico{font-size:30px}
+#statusbar{padding:5px 16px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="hdr">
+    <div>
+      <h1>Agents \u2014 vue claire</h1>
+      <div class="sub">une carte par agent \xB7 r\xE9sum\xE9 + \xE9tat</div>
+    </div>
+    <button id="refresh-btn" title="Rafra\xEEchir" onclick="doRefresh()">&#8635;</button>
+  </div>
+  <div id="grid"><div id="empty"><div class="ico">&#9889;</div><div>Connexion au bridge&#8230;</div></div></div>
+  <div id="statusbar">Connexion&#8230;</div>
+</div>
+<script>
+${panelBridgeScript("agentproto-agents-overview")}
+
+// \u2500\u2500 State \u2500\u2500
+var REFRESH_MS = 12000;
+var pollTimer = null, polling = false;
+function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+function setStatus(m){ document.getElementById('statusbar').textContent = m; }
+
+var STATE_CLASS = {
+  '\xE0 traiter':'s-todo', 'au travail':'s-work', 'en attente':'s-wait', 'termin\xE9':'s-done'
+};
+function stateClass(st){ return STATE_CLASS[st] || 's-wait'; }
+
+function fmtAgo(iso){
+  if (!iso) return '';
+  var t = Date.parse(iso);
+  if (isNaN(t)) return '';
+  var s = Math.max(0, Math.round((Date.now() - t) / 1000));
+  if (s < 60) return 'il y a ' + s + 's';
+  var m = Math.round(s/60);
+  if (m < 60) return 'il y a ' + m + 'min';
+  var h = Math.round(m/60);
+  return 'il y a ' + h + 'h';
+}
+
+function titleOf(s){
+  return s.label || s.name || (s.command ? s.command.split(/\\s+/)[0].split('/').pop() : null) || s.id.slice(0,8);
+}
+
+function render(sessions, summaries){
+  var grid = document.getElementById('grid');
+  if (!sessions.length){
+    grid.innerHTML = '<div id="empty"><div class="ico">&#128564;</div><div>Aucune session d\\'agent</div></div>';
+    return;
+  }
+  var html = '';
+  for (var i=0;i<sessions.length;i++){
+    var s = sessions[i];
+    var sum = summaries[s.id] || {};
+    var st = sum.state || 'en attente';
+    var cls = stateClass(st);
+    var summary = sum.summary || 'R\xE9sum\xE9 indisponible.';
+    var muted = !sum.summary ? ' muted' : '';
+    html += '<div class="card ' + cls + '">'
+      + '<div class="card-top">'
+      +   '<span class="title">' + esc(titleOf(s)) + '</span>'
+      +   '<span class="state ' + cls + '">' + esc(st) + '</span>'
+      + '</div>'
+      + '<div class="summary' + muted + '">' + esc(summary) + '</div>'
+      + '<div class="meta">'
+      +   '<span>' + esc(s.kind || '') + '</span><span class="dot"></span>'
+      +   '<span>' + esc(s.status || '') + '</span>'
+      +   (s.lastOutputAt ? '<span class="dot"></span><span>' + esc(fmtAgo(s.lastOutputAt)) + '</span>' : '')
+      + '</div>'
+      + '</div>';
+  }
+  grid.innerHTML = html;
+}
+
+function loadAndRender(){
+  return callTool('session_list', {kind:'all'}).then(function(data){
+    var all = data.sessions || [];
+    var agents = all.filter(function(s){ return s.kind === 'agent-cli'; });
+    // Render shells immediately, then fill summaries as they arrive.
+    var summaries = {};
+    render(agents, summaries);
+    setStatus(agents.length + ' agent' + (agents.length===1?'':'s') + ' \xB7 ' + new Date().toLocaleTimeString('fr-FR'));
+    return Promise.all(agents.map(function(s){
+      return callTool('summarize_session', {sessionId: s.id}).then(function(sum){
+        summaries[s.id] = sum;
+      }).catch(function(){ /* leave shell */ });
+    })).then(function(){ render(agents, summaries); });
+  }).catch(function(e){ setStatus('Erreur : ' + e.message); });
+}
+
+function doPoll(){
+  if (polling) return;
+  polling = true;
+  loadAndRender().then(function(){
+    polling = false;
+    pollTimer = setTimeout(doPoll, REFRESH_MS);
+  }).catch(function(){
+    polling = false;
+    pollTimer = setTimeout(doPoll, REFRESH_MS);
+  });
+}
+function doRefresh(){ if (pollTimer) clearTimeout(pollTimer); return loadAndRender().then(function(){ pollTimer = setTimeout(doPoll, REFRESH_MS); }); }
+
+initBridge().then(loadAndRender).then(function(){
+  pollTimer = setTimeout(doPoll, REFRESH_MS);
+}).catch(function(e){
+  setStatus('Bridge : ' + e.message);
+  document.getElementById('grid').innerHTML = '<div id="empty"><div class="ico">&#9888;</div><div>\xC9chec connexion bridge : ' + esc(e.message) + '</div></div>';
+});
+</script>
+</body>
+</html>`;
+
+// src/agents-overview/index.ts
+var agentsOverviewInputSchema = z.object({
+  filter: z.enum(["running", "all"]).optional().describe("`running` = only alive agent sessions; `all` = running + recent (default).")
+});
+function makeAgentsOverviewApp(ops) {
+  return {
+    id: "agentproto_agents_overview",
+    title: "Agents \u2014 vue claire",
+    description: "Open the agents overview \u2014 a plain-language card per agent session with one human sentence (what it's doing / last said) and a coarse state (\xE0 traiter / au travail / en attente / termin\xE9). Polls live and asks the server to summarise each session.",
+    inputSchema: agentsOverviewInputSchema,
+    execute: async (input) => ({ sessions: ops.listSessions(input.filter) }),
+    html: AGENTS_OVERVIEW_HTML
+  };
+}
+var agentsOverviewApp = defineApp({
+  id: "@agentproto/agents-overview",
+  name: "Agents \u2014 vue claire",
+  description: "Open the agents overview \u2014 a plain-language card per agent session with one human sentence and a coarse state (\xE0 traiter / au travail / en attente / termin\xE9).",
+  agents: [],
+  ui: {
+    html: AGENTS_OVERVIEW_HTML,
+    title: "Agents \u2014 vue claire",
+    tools: ["session_list", "summarize_session"]
+  }
+});
+
+// src/bureau-sessions/panel.ts
+var BUREAU_SESSIONS_HTML = `<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>bureau \u2014 sessions navigateur</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+*{box-sizing:border-box}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden}
+#app{display:flex;flex-direction:column;height:100%}
+#hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);flex-shrink:0}
+#hdr h1{font-size:13px;font-weight:600}
+#hdr .sub{font-size:11px;color:var(--text2);margin-top:2px}
+#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:16px;line-height:1;padding:4px 6px;border-radius:6px}
+#refresh-btn:hover{color:var(--text);background:var(--bg3)}
+#list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
+.row{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:11px 14px;display:flex;align-items:center;gap:14px}
+.icon{font-size:20px;flex-shrink:0}
+.body{flex:1;min-width:0}
+.r1{display:flex;align-items:center;gap:8px}
+.adapter{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.url{font-family:Menlo,Monaco,'Courier New',monospace;font-size:11.5px;color:var(--blue);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.meta{font-size:10.5px;color:var(--text2);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.dot{width:5px;height:5px;border-radius:50%;background:var(--text2);display:inline-block}
+.badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:11px;white-space:nowrap}
+.br{background:rgba(63,185,80,.16);color:var(--green)}
+.bs{background:rgba(88,166,255,.16);color:var(--blue)}
+.bk{background:rgba(248,81,73,.14);color:var(--red)}
+.be{background:rgba(139,148,158,.14);color:var(--text2)}
+.berr{background:rgba(248,81,73,.22);color:var(--red)}
+.port{font-family:Menlo,Monaco,'Courier New',monospace}
+#empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);gap:8px;padding:48px;text-align:center}
+#empty .ico{font-size:30px}
+#statusbar{padding:5px 16px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="hdr">
+    <div>
+      <h1>Bureau \u2014 sessions navigateur</h1>
+      <div class="sub">services navigateur actifs \xB7 URL / port / statut</div>
+    </div>
+    <button id="refresh-btn" title="Rafra\xEEchir" onclick="doRefresh()">&#8635;</button>
+  </div>
+  <div id="list"><div id="empty"><div class="ico">&#127760;</div><div>Connexion au bridge&#8230;</div></div></div>
+  <div id="statusbar">Connexion&#8230;</div>
+</div>
+<script>
+${panelBridgeScript("agentproto-bureau-sessions")}
+
+// \u2500\u2500 State \u2500\u2500
+var REFRESH_MS = 5000;
+var pollTimer = null, polling = false;
+function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+function setStatus(m){ document.getElementById('statusbar').textContent = m; }
+
+function badgeClass(st){
+  if (st === 'running') return 'br';
+  if (st === 'starting') return 'bs';
+  if (st === 'killed') return 'bk';
+  if (st === 'error') return 'berr';
+  return 'be';
+}
+function fmtUptime(iso, end){
+  if (!iso) return '';
+  var start = Date.parse(iso);
+  if (isNaN(start)) return '';
+  var ref = end ? Date.parse(end) : Date.now();
+  var s = Math.max(0, Math.round((ref - start) / 1000));
+  if (s < 60) return s + 's';
+  var m = Math.floor(s/60), rs = s%60;
+  if (m < 60) return m + 'm ' + rs + 's';
+  var h = Math.floor(m/60), rm = m%60;
+  return h + 'h ' + rm + 'm';
+}
+
+function render(rows){
+  var list = document.getElementById('list');
+  if (!rows.length){
+    list.innerHTML = '<div id="empty"><div class="ico">&#127760;</div><div>Aucune session navigateur</div></div>';
+    return;
+  }
+  var html = '';
+  for (var i=0;i<rows.length;i++){
+    var s = rows[i];
+    var bc = badgeClass(s.status);
+    var url = s.browserBaseUrl || (s.browserPort ? ('http://127.0.0.1:' + s.browserPort) : '');
+    var adapter = s.browserAdapterId || s.label || s.name || 'navigateur';
+    var up = fmtUptime(s.startedAt, s.endedAt);
+    html += '<div class="row">'
+      + '<div class="icon">&#127760;</div>'
+      + '<div class="body">'
+      +   '<div class="r1"><span class="adapter">' + esc(adapter) + '</span>'
+      +     '<span class="badge ' + bc + '">' + esc(s.status || '') + '</span></div>'
+      +   (url ? '<div class="url">' + esc(url) + '</div>' : '')
+      +   '<div class="meta">'
+      +     (s.browserPort ? '<span>port <span class="port">' + esc(s.browserPort) + '</span></span><span class="dot"></span>' : '')
+      +     '<span>' + (up ? 'uptime ' + esc(up) : '') + '</span>'
+      +   '</div>'
+      + '</div>'
+      + '</div>';
+  }
+  list.innerHTML = html;
+}
+
+function loadAndRender(){
+  return callTool('session_list', {kind:'all'}).then(function(data){
+    var all = data.sessions || [];
+    var browsers = all.filter(function(s){ return s.kind === 'browser'; });
+    render(browsers);
+    setStatus(browsers.length + ' session' + (browsers.length===1?'':'s') + ' \xB7 ' + new Date().toLocaleTimeString('fr-FR'));
+  }).catch(function(e){ setStatus('Erreur : ' + e.message); });
+}
+
+function doPoll(){
+  if (polling) return;
+  polling = true;
+  loadAndRender().then(function(){
+    polling = false;
+    pollTimer = setTimeout(doPoll, REFRESH_MS);
+  }).catch(function(){
+    polling = false;
+    pollTimer = setTimeout(doPoll, REFRESH_MS);
+  });
+}
+function doRefresh(){ if (pollTimer) clearTimeout(pollTimer); return loadAndRender().then(function(){ pollTimer = setTimeout(doPoll, REFRESH_MS); }); }
+
+initBridge().then(loadAndRender).then(function(){
+  pollTimer = setTimeout(doPoll, REFRESH_MS);
+}).catch(function(e){
+  setStatus('Bridge : ' + e.message);
+  document.getElementById('list').innerHTML = '<div id="empty"><div class="ico">&#9888;</div><div>\xC9chec connexion bridge : ' + esc(e.message) + '</div></div>';
+});
+</script>
+</body>
+</html>`;
+
+// src/bureau-sessions/index.ts
+var bureauSessionsInputSchema = z.object({
+  filter: z.enum(["running", "all"]).optional().describe("`running` = only alive browser sessions; `all` = running + recent (default).")
+});
+function makeBureauSessionsApp(ops) {
+  return {
+    id: "agentproto_bureau_sessions",
+    title: "Bureau \u2014 sessions navigateur",
+    description: "Open the browser-sessions panel \u2014 one row per browser service (adapter, base URL, port, status, uptime). Polls live every ~5 s.",
+    inputSchema: bureauSessionsInputSchema,
+    execute: async (input) => ({
+      sessions: ops.listSessions(input.filter).filter((s) => s.kind === "browser")
+    }),
+    html: BUREAU_SESSIONS_HTML
+  };
+}
+var bureauSessionsApp = defineApp({
+  id: "@agentproto/bureau-sessions",
+  name: "Bureau \u2014 sessions navigateur",
+  description: "Open the browser-sessions panel \u2014 one row per browser service (adapter, base URL, port, status, uptime).",
+  agents: [],
+  ui: {
+    html: BUREAU_SESSIONS_HTML,
+    title: "Bureau \u2014 sessions navigateur",
+    tools: ["session_list"]
+  }
+});
+
+// src/session-story/panel.ts
+var SESSION_STORY_PANEL_HTML = `<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>session story</title>
+<style>
+  :root {
+    color-scheme: light;
+    --bg:#faf8f5; --panel:#fffdfa; --line:#ece5da; --line-soft:#f2ede3;
+    --ink:#241f1a; --ink-mute:#7d7060; --ink-faint:#a9997f; --ink-ghost:#b3a893;
+    --accent:#0d7a4f; --accent-soft:#e8f4ec;
+    --gold:#a6701b; --gold-soft:#fff2dc;
+    --blue:#1d4e80; --blue-soft:#e9f1fb;
+    --violet:#5b3fa6; --violet-soft:#ede9ff;
+    --sel:#fbeccd; --red:#b3261e; --red-soft:#fbeae8;
+  }
+  * { box-sizing:border-box; }
+  html,body { height:100%; }
+  body { margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
+  .app { height:100vh; display:flex; flex-direction:column; }
+  .hidden { display:none !important; }
+
+  /* \u2500\u2500 picker screen \u2500\u2500 */
+  #pickerScreen { height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; }
+  #pickerScreen h1 { font-size:15px; font-weight:700; }
+  #pickerList { width:min(520px,90vw); max-height:60vh; overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
+  .pk-item { padding:10px 14px; border-bottom:1px solid var(--line-soft); cursor:pointer; display:flex; align-items:center; gap:10px; }
+  .pk-item:last-child { border-bottom:none; }
+  .pk-item:hover { background:var(--line-soft); }
+  .pk-name { flex:1; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .pk-meta { flex:none; font-size:10.5px; color:var(--ink-faint); font-weight:600; }
+  .pk-empty { padding:24px; text-align:center; color:var(--ink-mute); font-size:12.5px; }
+  .badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:10px; font-weight:700; }
+  .badge.running { background:var(--accent-soft); color:var(--accent); }
+  .badge.starting { background:var(--blue-soft); color:var(--blue); }
+  .badge.exited { background:var(--line-soft); color:var(--ink-faint); }
+  .badge.killed, .badge.error { background:var(--red-soft); color:var(--red); }
+
+  /* \u2500\u2500 big picture : mission + plan de sous-t\xE2ches \u2500\u2500 */
+  .hero { flex:none; padding:13px 20px 0; border-bottom:1px solid var(--line); background:var(--panel); }
+  .hero-top { display:flex; align-items:center; gap:13px; }
+  .pulse { width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none;
+           box-shadow:0 0 0 0 rgba(13,122,79,.35); animation:pulse 2.4s infinite; }
+  .pulse.off { background:var(--ink-ghost); animation:none; }
+  @keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(13,122,79,0); } 100% { box-shadow:0 0 0 0 rgba(13,122,79,0); } }
+  .who { min-width:0; flex:1; }
+  .who .h1 { font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .who .h2 { font-size:12px; color:var(--ink-mute); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .modewrap { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:none; }
+  .modewrap button { border:none; background:var(--panel); color:var(--ink-mute); font-size:11px; font-weight:700; padding:6px 11px; cursor:pointer; }
+  .modewrap button.on { background:var(--ink); color:#fdf9f2; }
+  button.sim, a.sim { border:1px solid var(--line); background:var(--panel); color:var(--ink-mute); font-weight:700;
+               font-size:11.5px; border-radius:8px; padding:6px 12px; cursor:pointer; flex:none; }
+  button.sim.on { background:var(--ink); border-color:var(--ink); color:#fdf9f2; }
+  a.sim { display:inline-flex; align-items:center; text-decoration:none; }
+  a.sim:hover { border-color:var(--ink-ghost); color:var(--ink); }
+
+  /* plan strip : les sous-t\xE2ches, l'avancement d'un coup d'\u0153il */
+  .plan { display:flex; gap:6px; overflow-x:auto; padding:11px 0 12px; scrollbar-width:none; }
+  .plan::-webkit-scrollbar { display:none; }
+  .pt { flex:none; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px;
+        border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink-mute); cursor:pointer; white-space:nowrap; }
+  .pt:hover { border-color:var(--ink-ghost); }
+  .pt .st { font-size:10px; }
+  .pt.done { color:var(--accent); background:var(--accent-soft); border-color:transparent; }
+  .pt.cur { color:var(--gold); background:var(--gold-soft); border-color:transparent; }
+  .pt.cur .st { animation:blink 1.6s infinite; }
+  @keyframes blink { 50% { opacity:.35; } }
+
+  /* \u2500\u2500 corps \u2500\u2500 */
+  .body { flex:1; display:flex; min-height:0; }
+  .feedcol { flex:1; min-width:320px; display:flex; flex-direction:column; }
+  .feed { flex:1; overflow-y:auto; padding:4px 14px 10px; display:flex; flex-direction:column; scroll-behavior:smooth; }
+  .fspacer { flex:1; }
+
+  /* chapitres */
+  .chap { flex:none; position:sticky; top:0; z-index:5; margin:8px -4px 2px; padding:7px 12px; display:flex; align-items:center; gap:9px;
+          background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(6px);
+          border-radius:9px; cursor:pointer; font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--ink-mute); }
+  .chap:hover { color:var(--ink); }
+  .chap .cst { flex:none; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:900; }
+  .chap.done .cst { background:var(--accent-soft); color:var(--accent); }
+  .chap.cur .cst { background:var(--gold-soft); color:var(--gold); }
+  .chap .cnum { color:var(--ink-ghost); font-weight:700; }
+  .chap .csum { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .chap .cmeta { flex:none; font-size:10.5px; color:var(--ink-ghost); font-weight:600; }
+  .chap .cchev { flex:none; color:var(--ink-ghost); transition:transform .15s; }
+  .chap.open .cchev { transform:rotate(90deg); }
+
+  .row { flex:none; min-height:44px; margin:1px 0 1px 10px; padding:5px 12px 5px 10px; display:flex; align-items:center; gap:11px;
+         cursor:pointer; border-radius:10px; border-left:3px solid transparent; transition:background .12s; }
+  .row:hover { background:var(--line-soft); }
+  .row[aria-selected="true"] { background:var(--sel); border-left-color:var(--gold); }
+  .row .ico { width:24px; height:24px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:11.5px; font-weight:800; }
+  .ico.k-text { background:var(--blue-soft); color:var(--blue); }
+  .ico.k-edit { background:var(--gold-soft); color:var(--gold); }
+  .ico.k-bash { background:var(--accent-soft); color:var(--accent); }
+  .ico.k-read { background:var(--violet-soft); color:var(--violet); }
+  .ico.k-user { background:var(--ink); color:#fdf9f2; }
+  .row .mid { flex:1; min-width:0; }
+  .row .sum { display:block; font-size:13.5px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .row .raw1 { display:block; font-size:10.5px; color:var(--ink-faint); font-family:ui-monospace,Menlo,monospace;
+               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
+  body:not(.tech) .row .raw1 { display:none; }
+  .row .route { display:inline-block; font-size:10px; font-weight:800; padding:1px 8px; border-radius:999px; margin-top:2px; }
+  .route.cont { background:var(--blue-soft); color:var(--blue); }
+  .route.newt { background:var(--gold-soft); color:var(--gold); }
+  .row .cnt { flex:none; font-size:10px; font-weight:800; color:var(--gold); background:var(--gold-soft); padding:2px 7px; border-radius:999px; }
+  .row .ts { flex:none; font-size:10.5px; color:var(--ink-ghost); font-variant-numeric:tabular-nums; }
+  @keyframes slidein { from { opacity:0; transform:translateY(6px); } }
+  .row.new { animation:slidein .25s ease-out; }
+
+  /* \u2500\u2500 panneau ancr\xE9 \u2500\u2500 */
+  .panel { flex:none; width:0; overflow:hidden; border-left:1px solid transparent; background:var(--panel);
+           display:flex; flex-direction:column; transition:width .22s ease, border-color .22s; }
+  .panel.open { width:min(430px,46vw); border-left-color:var(--line); }
+  .panel-inner { width:min(430px,46vw); flex:1; display:flex; flex-direction:column; min-height:0; }
+  .phead { flex:none; padding:14px 16px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:11px; }
+  .phead .ico { width:28px; height:28px; font-size:13px; border-radius:9px; }
+  .phead .tt { min-width:0; flex:1; }
+  .phead .t { font-size:14px; font-weight:700; line-height:1.4; }
+  .phead .s { font-size:11px; color:var(--ink-faint); margin-top:3px; font-variant-numeric:tabular-nums; }
+  .pnav { display:flex; gap:4px; flex:none; }
+  .pnav button { width:26px; height:26px; border:1px solid var(--line); background:var(--panel); border-radius:8px;
+                 color:var(--ink-mute); font-size:12px; cursor:pointer; display:grid; place-items:center; }
+  .pnav button:disabled { opacity:.3; cursor:default; }
+  .pbody { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
+  .plain { font-size:14px; line-height:1.7; }
+  .plain .why { margin-top:8px; font-size:12.5px; color:var(--ink-mute); line-height:1.6; }
+  .facts { display:flex; flex-wrap:wrap; gap:6px; }
+  .fact { font-size:11px; font-weight:700; background:var(--bg); border:1px solid var(--line); color:var(--ink-mute); padding:4px 10px; border-radius:999px; }
+  .fact.ok { background:var(--accent-soft); border-color:transparent; color:var(--accent); }
+  details.techbox { border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden; }
+  details.techbox summary { list-style:none; cursor:pointer; padding:10px 14px; font-size:11.5px; font-weight:800;
+          letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
+  details.techbox summary::-webkit-details-marker { display:none; }
+  details.techbox summary::after { content:"\u25B8"; margin-left:auto; transition:transform .15s; }
+  details.techbox[open] summary::after { transform:rotate(90deg); }
+  .techlist { padding:0 12px 12px; display:flex; flex-direction:column; gap:8px; }
+  .titem { border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; }
+  .titem .th { padding:8px 12px; font-size:11.5px; font-weight:700; color:var(--ink-mute); display:flex; align-items:center; gap:8px; }
+  .titem .th .copy { margin-left:auto; border:none; background:none; color:var(--ink-ghost); font-size:11px; cursor:pointer; padding:2px 4px; border-radius:5px; }
+  .titem .th .copy:hover { color:var(--ink); background:var(--line-soft); }
+  .titem pre { margin:0; border-top:1px solid var(--line-soft); font-family:ui-monospace,Menlo,monospace; font-size:11.5px;
+               line-height:1.55; color:#4a4236; padding:9px 12px; overflow:auto; max-height:240px; white-space:pre-wrap; word-break:break-word; }
+  .d-text { font-size:13.5px; line-height:1.7; }
+  .d-text p { margin:0 0 8px; }
+  .d-text p:last-child { margin-bottom:0; }
+  .d-text h1, .d-text h2, .d-text h3, .d-text h4, .d-text h5, .d-text h6 { margin:12px 0 6px; line-height:1.3; }
+  .d-text h1:first-child, .d-text h2:first-child, .d-text h3:first-child { margin-top:0; }
+  .d-text ul, .d-text ol { margin:0 0 8px; padding-left:20px; }
+  .d-text code { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:var(--bg); border-radius:4px; padding:1px 5px; }
+  .d-text pre { margin:0 0 8px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 12px; overflow:auto; }
+  .d-text pre code { background:none; border-radius:0; padding:0; }
+  .d-text table { border-collapse:collapse; margin:0 0 8px; font-size:12.5px; }
+  .d-text th, .d-text td { border:1px solid var(--line); padding:4px 8px; text-align:left; }
+  .d-text a { color:var(--blue); }
+  .pfoot { flex:none; border-top:1px solid var(--line); padding:9px 16px; font-size:11px; color:var(--ink-ghost); display:flex; gap:10px; }
+  .kbd { font-family:ui-monospace,Menlo,monospace; font-size:10px; border:1px solid var(--line); border-bottom-width:2px;
+         border-radius:5px; padding:1px 5px; background:var(--panel); color:var(--ink-mute); }
+
+  /* \u2500\u2500 bo\xEEte d'envoi + routage IA \u2500\u2500 */
+  .composer { flex:none; border-top:1px solid var(--line); background:var(--panel); padding:10px 14px; }
+  .composer .cbar { display:flex; gap:8px; }
+  .composer textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font:inherit; font-size:13px; max-height:110px; background:var(--bg); }
+  .composer textarea:focus { outline:2px solid #241f1a22; }
+  .composer textarea:disabled { opacity:.5; cursor:not-allowed; }
+  .composer button { border:none; border-radius:10px; padding:0 16px; background:var(--ink); color:#fdf9f2; font-weight:700; font-size:13px; cursor:pointer; }
+  .composer button:disabled { opacity:.4; cursor:not-allowed; }
+  .composer .routing { font-size:11px; color:var(--ink-faint); padding:6px 2px 0; min-height:22px; }
+  .composer .routing .r-cont { color:var(--blue); font-weight:700; }
+  .composer .routing .r-newt { color:var(--gold); font-weight:700; }
+  #statusbar { flex:none; padding:4px 20px; font-size:10.5px; color:var(--ink-ghost); border-top:1px solid var(--line-soft); }
+</style>
+</head>
+<body>
+<div id="pickerScreen">
+  <h1>Choisis une session</h1>
+  <div id="pickerList"><div class="pk-empty">Connexion&#8230;</div></div>
+</div>
+
+<div class="app hidden" id="storyScreen">
+  <div class="hero">
+    <div class="hero-top">
+      <span class="pulse" id="pulse"></span>
+      <div class="who">
+        <div class="h1" id="heroTitle"></div>
+        <div class="h2" id="heroSub"></div>
+      </div>
+      <div class="modewrap"><button id="modeSimple" class="on" type="button">Simple</button><button id="modeTech" type="button">Tech</button></div>
+      <a class="sim" id="fullPanelLink" href="#" target="_blank" rel="noopener" title="Ouvrir le panneau complet (Terminal/Chat/JSON/TTY)">&#8599; panneau complet</a>
+      <button class="sim" id="switchBtn" type="button">&#8646; changer</button>
+    </div>
+    <div class="plan" id="plan"></div>
+  </div>
+
+  <div class="body">
+    <div class="feedcol">
+      <div class="feed" id="feed"><div class="fspacer"></div><div id="rows"></div></div>
+      <div class="composer">
+        <div class="cbar">
+          <textarea id="msgBox" rows="1" placeholder="\xC9cris \xE0 l'agent\u2026 (la surcouche classe ton message : suite de la sous-t\xE2che ou nouvelle sous-t\xE2che)"></textarea>
+          <button id="sendBtn" type="button">Envoyer</button>
+        </div>
+        <div class="routing" id="routing"></div>
+      </div>
+    </div>
+
+    <aside class="panel" id="panel" aria-label="D\xE9tail de l'\xE9tape">
+      <div class="panel-inner">
+        <div class="phead">
+          <span class="ico" id="pIco"></span>
+          <div class="tt"><div class="t" id="pTitle"></div><div class="s" id="pSub"></div></div>
+          <div class="pnav"><button id="pPrev" type="button">\u2191</button><button id="pNext" type="button">\u2193</button><button id="pClose" type="button">\u2715</button></div>
+        </div>
+        <div class="pbody" id="pBody"></div>
+        <div class="pfoot"><span class="kbd">\u2191</span><span class="kbd">\u2193</span> naviguer \xB7 <span class="kbd">Esc</span> fermer</div>
+      </div>
+    </aside>
+  </div>
+  <div id="statusbar"></div>
+</div>
+
+<script>
+var $=function(id){ return document.getElementById(id); };
+var esc=function(s){ return String(s==null?"":s).replace(/[&<>]/g,function(c){ return {"&":"&amp;","<":"&lt;",">":"&gt;"}[c]; }); };
+
+// ============================================================
+// renderMd \u2014 vanilla-JS port of markdown-lite.ts. Kept
+// function-for-function identical so the two are easy to diff (same
+// self-contained-panel constraint as buildStoryJs below): headers,
+// bold/italic, inline/fenced code, bullet/numbered lists, pipe tables and
+// links, with every raw text run HTML-escaped before any generated tag
+// wraps it.
+// ============================================================
+function escHtmlMd(s){ return String(s).replace(/[&<>"]/g,function(c){ if(c==='&') return '&amp;'; if(c==='<') return '&lt;'; if(c==='>') return '&gt;'; return '&quot;'; }); }
+function renderInlineMd(text){
+  var out=escHtmlMd(text);
+  out=out.replace(/\`([^\`]+)\`/g,function(_m,code){ return '<code>'+code+'</code>'; });
+  out=out.replace(/\\[([^\\]]+)\\]\\((https?:\\/\\/[^\\s)]+)\\)/g,function(_m,label,url){ return '<a href="'+url+'" target="_blank" rel="noopener noreferrer">'+label+'</a>'; });
+  out=out.replace(/\\*\\*([^*]+)\\*\\*/g,'<strong>$1</strong>');
+  out=out.replace(/(^|[^*])\\*([^*]+)\\*(?!\\*)/g,'$1<em>$2</em>');
+  return out;
+}
+function isTableSepMd(line){ return /^\\s*\\|?\\s*:?-+:?\\s*(\\|\\s*:?-+:?\\s*)+\\|?\\s*$/.test(line); }
+function splitRowMd(line){ return line.trim().replace(/^\\|/,'').replace(/\\|$/,'').split('|').map(function(c){ return c.trim(); }); }
+function renderMd(md){
+  var lines=String(md==null?'':md).replace(/\\r\\n?/g,'\\n').split('\\n');
+  var out=[], para=[], list=null;
+  function flushPara(){ if(para.length){ out.push('<p>'+para.map(renderInlineMd).join('<br>')+'</p>'); para=[]; } }
+  function flushList(){ if(list){ var tag=list.ordered?'ol':'ul'; out.push('<'+tag+'>'+list.items.map(function(i){ return '<li>'+renderInlineMd(i)+'</li>'; }).join('')+'</'+tag+'>'); list=null; } }
+  function flushAll(){ flushPara(); flushList(); }
+  var i=0;
+  while(i<lines.length){
+    var line=lines[i];
+    if(/^\\s*\`\`\`/.test(line)){
+      flushAll();
+      var code=[]; i+=1;
+      while(i<lines.length && !/^\\s*\`\`\`/.test(lines[i])){ code.push(lines[i]); i+=1; }
+      i+=1;
+      out.push('<pre><code>'+escHtmlMd(code.join('\\n'))+'</code></pre>');
+      continue;
+    }
+    var header=line.match(/^(#{1,6})\\s+(.*)$/);
+    if(header){
+      flushAll();
+      var level=header[1].length;
+      out.push('<h'+level+'>'+renderInlineMd(header[2].trim())+'</h'+level+'>');
+      i+=1;
+      continue;
+    }
+    if(/^\\s*\\|/.test(line) && i+1<lines.length && isTableSepMd(lines[i+1])){
+      flushAll();
+      var headCells=splitRowMd(line);
+      i+=2;
+      var bodyRows=[];
+      while(i<lines.length && /^\\s*\\|/.test(lines[i])){ bodyRows.push(splitRowMd(lines[i])); i+=1; }
+      out.push('<table><thead><tr>'+headCells.map(function(c){ return '<th>'+renderInlineMd(c)+'</th>'; }).join('')+'</tr></thead><tbody>'
+        +bodyRows.map(function(r){ return '<tr>'+r.map(function(c){ return '<td>'+renderInlineMd(c)+'</td>'; }).join('')+'</tr>'; }).join('')+'</tbody></table>');
+      continue;
+    }
+    var bullet=line.match(/^\\s*[-*+]\\s+(.*)$/);
+    var numbered=line.match(/^\\s*\\d+\\.\\s+(.*)$/);
+    if(bullet || numbered){
+      flushPara();
+      var ordered=!!numbered;
+      var item=(bullet||numbered)[1];
+      if(!list || list.ordered!==ordered){ flushList(); list={ordered:ordered,items:[]}; }
+      list.items.push(item);
+      i+=1;
+      continue;
+    }
+    if(line.trim()===''){ flushAll(); i+=1; continue; }
+    flushList();
+    para.push(line);
+    i+=1;
+  }
+  flushAll();
+  return out.join('');
+}
+
+${panelBridgeScript("agentproto-session-story-panel")}
+// Best-effort: some hosts forward the triggering tool call's arguments as
+// a notification so the panel can auto-open the right session. Purely
+// additive \u2014 the session picker is the reliable path when this never
+// arrives.
+var pendingSessionId=null;
+onHostNotification(function(method, params){
+  if(/tool-input|tool-call/.test(method)){
+    var args=(params && (params.arguments || params.input)) || {};
+    if(args && args.sessionId) pendingSessionId=args.sessionId;
+  }
+});
+
+// ============================================================
+// buildStory \u2014 vanilla-JS port of session-story.ts. Kept
+// function-for-function identical so the two are easy to diff; the panel
+// resource must be fully self-contained (no bundler/dynamic import), so it
+// cannot import the TS module directly.
+// ============================================================
+
+var SALIENT_KEYS=["file_path","path","filePath","file","command","pattern","query","q","url","todos","description","prompt"];
+function truncateStr(v,max){ var o=String(v).replace(/\\s+/g,' ').trim(); return o.length>max? o.slice(0,max-1)+'\u2026':o; }
+function formatArgValue(v){
+  if(typeof v==='string') return v;
+  if(Array.isArray(v)) return v.length+' item'+(v.length===1?'':'s');
+  if(v && typeof v==='object') return JSON.stringify(v);
+  return String(v);
+}
+function pickSalient(args){
+  for(var i=0;i<SALIENT_KEYS.length;i++){
+    var k=SALIENT_KEYS[i], v=args[k];
+    if(v!==undefined && v!==null && v!=='') return formatArgValue(v);
+  }
+  return null;
+}
+function formatToolCall(name,args){
+  name=name||'tool';
+  args=(args && typeof args==='object' && !Array.isArray(args)) ? args : {};
+  var salient=pickSalient(args);
+  if(salient!==null){
+    if(name.toLowerCase().indexOf(salient.toLowerCase())>=0) return truncateStr(name,120);
+    return truncateStr(name+' '+salient,120);
+  }
+  if(Object.keys(args).length===0) return name;
+  return truncateStr(name+' '+JSON.stringify(args),120);
+}
+function extractText(v){
+  if(v==null) return null;
+  if(typeof v==='string') return v;
+  if(Array.isArray(v)){
+    var parts=v.map(extractText).filter(function(x){ return x!=null; });
+    return parts.length? parts.join('\\n') : null;
+  }
+  if(typeof v==='object'){
+    if(typeof v.text==='string') return v.text;
+    if(typeof v.message==='string') return v.message;
+    if(Array.isArray(v.content)) return extractText(v.content);
+    if(typeof v.error==='string') return v.error;
+    if(v.error && typeof v.error==='object' && typeof v.error.message==='string') return v.error.message;
+    return null;
+  }
+  return null;
+}
+function formatToolResult(toolName,result,isError){
+  var text=extractText(result);
+  if(isError){
+    var message=text!=null? text : (result!=null? JSON.stringify(result) : 'failed');
+    var firstLine=String(message).split(/\\r?\\n/)[0] || message;
+    return truncateStr(firstLine,160);
+  }
+  if(text==null) return null;
+  var trimmed=text.trim();
+  if(!trimmed) return null;
+  var lines=trimmed.split(/\\r?\\n/);
+  if(lines.length>1){
+    var bytes=new TextEncoder().encode(trimmed).length;
+    return lines.length+' lines, '+bytes+'B';
+  }
+  return truncateStr(lines[0],160);
+}
+
+function classifyKind(toolCalls){
+  if(!toolCalls || toolCalls.length===0) return 'text';
+  var names=toolCalls.map(function(t){ return t.name.toLowerCase(); });
+  if(names.some(function(n){ return /edit|write/.test(n); })) return 'edit';
+  if(names.some(function(n){ return /bash|terminal|command/.test(n); })) return 'bash';
+  if(names.some(function(n){ return /read|grep|glob/.test(n); })) return 'read';
+  return 'text';
+}
+var NEW_CHAPTER_RE=/\\b(aussi|autre|ensuite|nouveau|nouvelle|plut[o\xF4]t|maintenant|apr[e\xE8]s \xE7a|il faudrait|peux[- ]tu|on pourrait|ajoute|g[e\xE8]re)\\b/iu;
+function classifyRoute(text){
+  var newt=NEW_CHAPTER_RE.test(text);
+  if(!newt) return {route:'cont'};
+  var title=text.replace(/[.?!].*$/,'').slice(0,42);
+  return {route:'newt', title:title};
+}
+function formatTsJs(ts){
+  if(ts===undefined || ts===null || isNaN(ts)) return '';
+  return new Date(ts).toISOString().slice(11,19);
+}
+function firstMeaningfulLine(text){
+  if(!text) return undefined;
+  var lines=text.split('\\n').map(function(l){ return l.trim(); }).filter(function(l){ return l.length>0; });
+  return lines[0];
+}
+function lineCountOf(text){
+  var n=(text||'').split('\\n').filter(function(l){ return l.trim().length>0; }).length;
+  return n||1;
+}
+function parseArgsJson(s){ try{ return JSON.parse(s); }catch(e){ return {}; } }
+
+function foldToolStep(assistant,toolResults){
+  var toolCalls=assistant.toolCalls||[];
+  var kind=classifyKind(toolCalls);
+  var count=toolCalls.length||1;
+  var items=[], facts=[];
+  if(assistant.text && assistant.text.trim()) items.push({text:assistant.text.trim()});
+  toolCalls.forEach(function(tc,i){
+    var args=parseArgsJson(tc.args);
+    var h=formatToolCall(tc.name,args);
+    var resultMsg=toolResults[i];
+    var resultText=(resultMsg && resultMsg.text) || '';
+    var isError=resultText.indexOf('[error]')===0;
+    var r=isError? resultText.slice(7).trim() : resultText;
+    items.push({h:h,r:r});
+    var fact=formatToolResult(tc.name,r,isError);
+    if(fact) facts.push(fact);
+  });
+  var firstLine=firstMeaningfulLine(assistant.text);
+  var firstToolCall=toolCalls[0];
+  var sum=firstLine!==undefined? firstLine : (firstToolCall? formatToolCall(firstToolCall.name,parseArgsJson(firstToolCall.args)) : '\u2026');
+  var raw1;
+  if(toolCalls.length===0) raw1='assistant \xB7 '+lineCountOf(assistant.text)+' ligne(s)';
+  else if(toolCalls.length===1) raw1=formatToolCall(firstToolCall.name,parseArgsJson(firstToolCall.args));
+  else raw1=(firstToolCall? firstToolCall.name : 'tool')+' \xD7'+toolCalls.length;
+  return {kind:kind, ts:formatTsJs(assistant.ts), sum:sum, raw1:raw1, count:count, facts:facts, items:items};
+}
+function foldUserStep(msg){
+  var text=msg.text||'';
+  return {kind:'user', ts:formatTsJs(msg.ts), sum:'\xAB '+truncateStr(text,80)+' \xBB', raw1:'user \xB7 '+lineCountOf(text)+' ligne(s)', count:1, facts:[], items:[{text:text}], userText:text};
+}
+function foldOrphanToolStep(msg){
+  var text=msg.text||'';
+  var isError=text.indexOf('[error]')===0;
+  var r=isError? text.slice(7).trim() : text;
+  var name=msg.toolName||'tool';
+  var fact=formatToolResult(name,r,isError);
+  return {kind:classifyKind([{name:name}]), ts:formatTsJs(msg.ts), sum: msg.toolName? (msg.toolName+' \xB7 r\xE9sultat') : "R\xE9sultat d'outil", raw1: msg.toolName||'tool', count:1, facts: fact?[fact]:[], items:[{h:name,r:r}]};
+}
+function foldSystemStep(msg){
+  var text=msg.text||'';
+  var line=firstMeaningfulLine(text);
+  return {kind:'text', ts:formatTsJs(msg.ts), sum: line!==undefined? line : text, raw1:'system', count:1, facts:[], items: text?[{text:text}]:[]};
+}
+function foldMessages(messages){
+  var steps=[], i=0;
+  while(i<messages.length){
+    var msg=messages[i];
+    if(msg.role==='user'){ steps.push(foldUserStep(msg)); i+=1; continue; }
+    if(msg.role==='assistant'){
+      var j=i+1, toolResults=[];
+      while(j<messages.length && messages[j].role==='tool'){ toolResults.push(messages[j]); j+=1; }
+      steps.push(foldToolStep(msg,toolResults)); i=j; continue;
+    }
+    if(msg.role==='tool'){ steps.push(foldOrphanToolStep(msg)); i+=1; continue; }
+    steps.push(foldSystemStep(msg)); i+=1;
+  }
+  return steps;
+}
+function buildStoryJs(messages){
+  var folded=foldMessages(messages||[]);
+  var chapters=[], steps=[];
+  var currentChapterId, sawFirstUser=false;
+  function closeCurrent(){ var cur=chapters.filter(function(c){ return c.id===currentChapterId; })[0]; if(cur) cur.status='done'; }
+  function openChapter(title){ var id='c'+(chapters.length+1); chapters.push({id:id,title:title,status:'cur'}); return id; }
+  folded.forEach(function(step){
+    var route;
+    if(step.kind==='user' && step.userText!==undefined){
+      if(!sawFirstUser){ sawFirstUser=true; currentChapterId=openChapter('Cadrage'); }
+      else {
+        var verdict=classifyRoute(step.userText);
+        route=verdict.route;
+        if(verdict.route==='newt'){ closeCurrent(); currentChapterId=openChapter(verdict.title||'Nouvelle sous-t\xE2che'); }
+      }
+    } else if(currentChapterId===undefined){ currentChapterId=openChapter('Cadrage'); }
+    var out={chap:currentChapterId, kind:step.kind, ts:step.ts, sum:step.sum, raw1:step.raw1, count:step.count, facts:step.facts, items:step.items};
+    if(route) out.route=route;
+    steps.push(out);
+  });
+  return {chapters:chapters, steps:steps};
+}
+
+// ============================================================
+// App state
+// ============================================================
+var sessions=[];
+var activeSessionId=null;
+var story={chapters:[], steps:[]};
+var open={};
+var selected=-1;
+var lastSeenOutputAt=null;
+var pollTimer=null, polling=false;
+var ICONS={text:["k-text","A"],edit:["k-edit","\u270E"],bash:["k-bash","\u25B8"],read:["k-read","\u2315"],user:["k-user","T"]};
+var icoSpec=function(k){ return ICONS[k]||ICONS.text; };
+var chapOf=function(id){ return story.chapters.filter(function(c){ return c.id===id; })[0]; };
+var curChap=function(){ return story.chapters.filter(function(c){ return c.status==='cur'; })[0] || story.chapters[story.chapters.length-1]; };
+
+function setStatus(msg){ $('statusbar').textContent=msg; }
+function nowTs(){ return new Date().toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit',second:'2-digit'}); }
+
+function titleOf(s){
+  return s.label || s.name || (s.command? s.command.split(/\\s+/)[0].split('/').pop() : null) || s.id.slice(0,8);
+}
+
+// ============================================================
+// Picker screen
+// ============================================================
+function renderPicker(){
+  var el=$('pickerList');
+  if(!sessions.length){ el.innerHTML='<div class="pk-empty">Aucune session</div>'; return; }
+  var html='';
+  sessions.forEach(function(s){
+    html+='<div class="pk-item" data-id="'+esc(s.id)+'">'
+        + '<span class="pk-name">'+esc(titleOf(s))+'</span>'
+        + '<span class="badge '+esc(s.status)+'">'+esc(s.status)+'</span>'
+        + '<span class="pk-meta">'+esc(s.kind||'')+'</span>'
+        + '</div>';
+  });
+  el.innerHTML=html;
+  Array.prototype.forEach.call(el.querySelectorAll('.pk-item'), function(row){
+    row.onclick=function(){ openSession(row.getAttribute('data-id')); };
+  });
+}
+
+function showPicker(){
+  activeSessionId=null;
+  $('pickerScreen').classList.remove('hidden');
+  $('storyScreen').classList.add('hidden');
+  renderPicker();
+}
+
+function openSession(id){
+  activeSessionId=id;
+  story={chapters:[], steps:[]};
+  open={};
+  selected=-1;
+  lastSeenOutputAt=null;
+  $('pickerScreen').classList.add('hidden');
+  $('storyScreen').classList.remove('hidden');
+  $('fullPanelLink').href='https://cli.agentproto.sh/panel?session='+encodeURIComponent(id);
+  closePanel();
+  loadStory().then(renderAll);
+}
+
+// ============================================================
+// Story loading
+// ============================================================
+function activeSession(){ return sessions.filter(function(s){ return s.id===activeSessionId; })[0]; }
+
+function loadStory(){
+  return callTool('agent_export', {sessionId:activeSessionId, format:'json'}).then(function(data){
+    var messages=(data && data.messages) || [];
+    story=buildStoryJs(messages);
+    // Default open state: only the last (current) chapter is expanded.
+    var last=story.chapters[story.chapters.length-1];
+    if(last && !(last.id in open)) open[last.id]=true;
+  }).catch(function(e){
+    setStatus('Erreur export : '+e.message);
+  });
+}
+
+function canSend(){
+  var s=activeSession();
+  return !!s && s.kind==='agent-cli' && s.status==='running';
+}
+
+function renderComposer(){
+  var s=activeSession();
+  var box=$('msgBox'), btn=$('sendBtn');
+  var enabled=canSend();
+  box.disabled=!enabled;
+  btn.disabled=!enabled;
+  if(!s){ box.placeholder='Session introuvable.'; }
+  else if(!enabled) box.placeholder='Lecture seule \u2014 session '+esc(s.status)+'.';
+  else box.placeholder="\xC9cris \xE0 l'agent\u2026 (la surcouche classe ton message : suite de la sous-t\xE2che ou nouvelle sous-t\xE2che)";
+}
+
+function renderHero(){
+  var s=activeSession();
+  $('heroTitle').textContent=s? titleOf(s) : (activeSessionId||'');
+  var firstUser=story.steps.filter(function(st){ return st.kind==='user'; })[0];
+  var mission=firstUser? firstUser.userText || (firstUser.items[0] && firstUser.items[0].text) : null;
+  $('heroSub').textContent=mission? truncateStr(mission,200) : 'Aucun message pour le moment.';
+  var p=$('pulse');
+  p.classList.toggle('off', !(s && (s.status==='running' || s.status==='starting')));
+  renderComposer();
+}
+
+function renderAll(){
+  renderHero();
+  renderPlan();
+  renderRows('bottom');
+}
+
+// ============================================================
+// big picture strip
+// ============================================================
+function renderPlan(){
+  var done=story.chapters.filter(function(c){ return c.status==='done'; }).length;
+  $('plan').innerHTML=story.chapters.map(function(c,i){
+    return '<span class="pt '+c.status+'" data-c="'+esc(c.id)+'"><span class="st">'+(c.status==='done'?'\u2713':'\u25CF')+'</span>'+(i+1)+'. '+esc(c.title)+'</span>';
+  }).join('') + '<span class="pt" style="cursor:default"><b>'+done+'/'+story.chapters.length+'</b>&nbsp;faites</span>';
+  Array.prototype.forEach.call($('plan').querySelectorAll('.pt[data-c]'), function(el){
+    el.onclick=function(){ open[el.getAttribute('data-c')]=true; renderRows(); jumpToChap(el.getAttribute('data-c')); };
+  });
+}
+function jumpToChap(cid){
+  var el=document.querySelector('.chap[data-c="'+cid+'"]');
+  if(el) el.scrollIntoView({block:'start',behavior:'smooth'});
+}
+
+// ============================================================
+// feed segment\xE9 par chapitres
+// ============================================================
+function rowHtml(s,i,isNew){
+  var spec=icoSpec(s.kind), cls=spec[0], ch=spec[1];
+  var route=s.route? '<span class="route '+(s.route==='newt'?'newt':'cont')+'">'+(s.route==='newt'?'\u2605 nouvelle sous-t\xE2che':'\u21B3 suite')+'</span>' : '';
+  return '<div class="row '+(isNew?'new':'')+'" aria-selected="'+(i===selected)+'" data-i="'+i+'">'
+    + '<span class="ico '+cls+'">'+ch+'</span>'
+    + '<span class="mid"><span class="sum">'+esc(s.sum)+'</span><span class="raw1">'+esc(s.raw1||'')+'</span>'+route+'</span>'
+    + (s.count>1? '<span class="cnt">\xD7'+s.count+'</span>':'') + '<span class="ts">'+esc(s.ts||'')+'</span>'
+    + '</div>';
+}
+function renderRows(keepScroll,newIdx){
+  var feed=$('feed');
+  var prevH=feed.scrollHeight, prevTop=feed.scrollTop;
+  var html='';
+  story.chapters.forEach(function(c,ci){
+    var chapSteps=[];
+    story.steps.forEach(function(s,i){ if(s.chap===c.id) chapSteps.push({s:s,i:i}); });
+    if(!chapSteps.length) return;
+    var isOpen=!!open[c.id];
+    html+='<div class="chap '+c.status+' '+(isOpen?'open':'')+'" data-c="'+esc(c.id)+'">'
+      + '<span class="cst">'+(c.status==='done'?'\u2713':'\u25CF')+'</span><span class="cnum">'+(ci+1)+'.</span>'
+      + '<span class="csum">'+esc(c.title)+'</span>'
+      + '<span class="cmeta">'+chapSteps.length+' \xE9tape'+(chapSteps.length>1?'s':'')+'</span><span class="cchev">\u25B8</span>'
+      + '</div>';
+    if(isOpen) html += chapSteps.map(function(x){ return rowHtml(x.s,x.i,x.i===newIdx); }).join('');
+  });
+  $('rows').innerHTML=html;
+  Array.prototype.forEach.call(document.querySelectorAll('.row'), function(el){
+    el.onclick=function(){ selectStep(Number(el.getAttribute('data-i'))); };
+  });
+  Array.prototype.forEach.call(document.querySelectorAll('.chap'), function(el){
+    el.onclick=function(){ var c=el.getAttribute('data-c'); open[c]=!open[c]; renderRows(); };
+  });
+  if(keepScroll==='bottom') feed.scrollTop=feed.scrollHeight;
+  else if(keepScroll==='preserve') feed.scrollTop=feed.scrollHeight-prevH+prevTop;
+}
+
+// ============================================================
+// panneau ancr\xE9
+// ============================================================
+function selectStep(i){
+  selected=i;
+  var s=story.steps[i]; if(!s) return;
+  open[s.chap]=true;
+  $('panel').classList.add('open');
+  var spec=icoSpec(s.kind), cls=spec[0], ch=spec[1];
+  var ico=$('pIco'); ico.className='ico '+cls; ico.textContent=ch;
+  $('pTitle').textContent=s.sum;
+  var c=chapOf(s.chap);
+  $('pSub').textContent=(s.ts? s.ts+' \xB7 ':'')+(c? ('sous-t\xE2che : '+c.title) : '');
+  var facts=(s.facts||[]).map(function(f){
+    return '<span class="fact '+(/\u2713|exit 0|passed|0 match/.test(f)?'ok':'')+'">'+esc(f)+'</span>';
+  }).join('');
+  var tech=(s.items||[]).map(function(it,k){
+    return it.text!==undefined
+      ? '<div class="d-text">'+renderMd(it.text)+'</div>'
+      : '<div class="titem"><div class="th">'+esc(it.h)+'<button class="copy" data-k="'+k+'" type="button">\u29C9</button></div><pre>'+esc(it.r)+'</pre></div>';
+  }).join('');
+  $('pBody').innerHTML=''
+    + '<div class="plain"><div>'+esc(s.sum)+'.</div><div class="why">'+esc(s.why||'')+'</div></div>'
+    + (facts? '<div class="facts">'+facts+'</div>':'')
+    + '<details class="techbox" '+(document.body.classList.contains('tech')?'open':'')+'>'
+    + '<summary>D\xE9tail technique \xB7 '+(s.items||[]).length+'</summary><div class="techlist">'+tech+'</div>'
+    + '</details>';
+  Array.prototype.forEach.call($('pBody').querySelectorAll('.copy'), function(btn){
+    btn.onclick=function(e){
+      e.stopPropagation();
+      var it=(s.items||[])[Number(btn.getAttribute('data-k'))];
+      var payload=(it.h||'')+'\\n'+(it.r||it.text||'');
+      if(navigator.clipboard) navigator.clipboard.writeText(payload).catch(function(){});
+      btn.textContent='\u2713'; setTimeout(function(){ btn.textContent='\u29C9'; },900);
+    };
+  });
+  $('pPrev').disabled=i<=0; $('pNext').disabled=i>=story.steps.length-1;
+  renderRows();
+  var el=document.querySelector('.row[data-i="'+i+'"]');
+  if(el) el.scrollIntoView({block:'nearest',behavior:'smooth'});
+}
+function closePanel(){ selected=-1; var p=$('panel'); if(p) p.classList.remove('open'); renderRows(); }
+$('pClose').addEventListener('click',closePanel);
+$('pPrev').addEventListener('click',function(){ if(selected>0) selectStep(selected-1); });
+$('pNext').addEventListener('click',function(){ if(selected<story.steps.length-1) selectStep(selected+1); });
+document.addEventListener('keydown',function(e){
+  if(e.key==='Escape'){ closePanel(); return; }
+  if($('storyScreen').classList.contains('hidden')) return;
+  if(selected<0 || e.target.tagName==='TEXTAREA') return;
+  if(e.key==='ArrowUp'){ e.preventDefault(); if(selected>0) selectStep(selected-1); }
+  if(e.key==='ArrowDown'){ e.preventDefault(); if(selected<story.steps.length-1) selectStep(selected+1); }
+});
+
+// ============================================================
+// Simple / Tech modes
+// ============================================================
+function setMode(tech){
+  document.body.classList.toggle('tech',tech);
+  $('modeTech').classList.toggle('on',tech);
+  $('modeSimple').classList.toggle('on',!tech);
+  if(selected>=0) selectStep(selected);
+}
+$('modeSimple').addEventListener('click',function(){ setMode(false); });
+$('modeTech').addEventListener('click',function(){ setMode(true); });
+$('switchBtn').addEventListener('click', function(){ if(pollTimer) clearTimeout(pollTimer); showPicker(); doPoll(); });
+
+// ============================================================
+// composer \u2014 local chapter-routing classification + agent_prompt
+// ============================================================
+$('sendBtn').addEventListener('click', sendMsg);
+$('msgBox').addEventListener('keydown', function(e){
+  if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }
+});
+function sendMsg(){
+  if(!canSend()) return;
+  var box=$('msgBox'), text=box.value.trim();
+  if(!text) return;
+  box.value='';
+  var cur=curChap();
+  var r=cur? classifyRoute(text) : {route:'cont'};
+  var chapId=cur? cur.id : null;
+  if(r.route==='newt' && cur){
+    cur.status='done';
+    var id='c'+(story.chapters.length+1);
+    story.chapters.push({id:id, title:r.title||'Nouvelle sous-t\xE2che', status:'cur'});
+    chapId=id; open[id]=true;
+    $('routing').innerHTML='\u2726 class\xE9 : <span class="r-newt">\u2605 nouvelle sous-t\xE2che \xAB '+esc(r.title||'')+' \xBB</span>';
+  } else {
+    $('routing').innerHTML='\u2726 class\xE9 : <span class="r-cont">\u21B3 suite de \xAB '+esc(cur? cur.title : '')+' \xBB</span>';
+  }
+  setTimeout(function(){ $('routing').textContent=''; },5000);
+  story.steps.push({
+    chap:chapId, kind:'user', ts:nowTs(),
+    sum:'\xAB '+text.slice(0,80)+(text.length>80?'\u2026':'')+' \xBB',
+    raw1:'user \xB7 '+text.split('\\n').length+' ligne(s)',
+    route:r.route, facts:[], items:[{text:text}], userText:text,
+  });
+  renderPlan(); renderRows('bottom', story.steps.length-1);
+  callTool('agent_prompt', {sessionId:activeSessionId, prompt:text}).catch(function(e){
+    setStatus('Envoi \xE9chou\xE9 : '+e.message);
+  });
+}
+
+// ============================================================
+// Poll \u2014 session_list every ~5s; re-fetch agent_export only on turn
+// boundaries (lastOutputAt changed for the active session).
+// ============================================================
+var POLL_MS=5000;
+function loadSessions(){
+  return callTool('session_list', {kind:'all'}).then(function(data){
+    sessions=data.sessions||[];
+    if($('pickerScreen') && !$('pickerScreen').classList.contains('hidden')) renderPicker();
+  }).catch(function(e){ setStatus('Erreur : '+e.message); });
+}
+function doPoll(){
+  if(polling) return;
+  polling=true;
+  loadSessions().then(function(){
+    if(!activeSessionId){ polling=false; pollTimer=setTimeout(doPoll,POLL_MS); return; }
+    var s=activeSession();
+    if(!s){ polling=false; pollTimer=setTimeout(doPoll,POLL_MS); return; }
+    renderHero();
+    var changed=s.lastOutputAt && s.lastOutputAt!==lastSeenOutputAt;
+    if(changed){
+      lastSeenOutputAt=s.lastOutputAt;
+      loadStory().then(function(){ renderPlan(); renderRows('bottom'); polling=false; pollTimer=setTimeout(doPoll,POLL_MS); });
+    } else {
+      polling=false; pollTimer=setTimeout(doPoll,POLL_MS);
+    }
+  }).catch(function(){ polling=false; pollTimer=setTimeout(doPoll,POLL_MS); });
+}
+
+// ============================================================
+// Boot
+// ============================================================
+initBridge().then(loadSessions).then(function(){
+  setTimeout(function(){
+    var target=pendingSessionId && sessions.some(function(s){ return s.id===pendingSessionId; })
+      ? pendingSessionId
+      : null;
+    if(!target){
+      var agentSessions=sessions.filter(function(s){ return s.kind==='agent-cli'; });
+      if(agentSessions.length===1) target=agentSessions[0].id;
+    }
+    if(target) openSession(target); else showPicker();
+    pollTimer=setTimeout(doPoll,POLL_MS);
+  }, 50);
+}).catch(function(e){
+  setStatus('Bridge : '+e.message);
+  $('pickerList').innerHTML='<div class="pk-empty">\xC9chec connexion bridge : '+esc(e.message)+'</div>';
+});
+</script>
+</body>
+</html>`;
+
+// src/session-story/index.ts
+var sessionStoryInputSchema = z.object({
+  sessionId: z.string().optional().describe(
+    "Session id to open directly. When omitted, the panel shows a session picker (built from session_list) and lets the user choose."
+  )
+});
+function makeSessionStoryPanelApp(ops) {
+  return {
+    id: "agentproto_session_story",
+    title: "Session Story",
+    description: "Open the session story panel \u2014 a readable, per-session timeline for two audiences at once: a plain-language summary of every step for beginners, expandable to raw tool-call detail for technical users. Shows a one-sentence mission, a plan strip of inferred sub-task chapters, a chapter-segmented feed, and a composer to keep driving the session. Polls live data and lets you jump to any step.",
+    inputSchema: sessionStoryInputSchema,
+    execute: async (input) => input.sessionId ? { sessionId: input.sessionId } : { sessions: ops.listSessions("all") },
+    html: SESSION_STORY_PANEL_HTML
+  };
+}
+var sessionStoryApp = defineApp({
+  id: "@agentproto/session-story",
+  name: "Session Story",
+  description: "Open the session story panel \u2014 a readable, per-session timeline for two audiences at once: a plain-language summary of every step for beginners, expandable to raw tool-call detail for technical users.",
+  agents: [],
+  ui: {
+    html: SESSION_STORY_PANEL_HTML,
+    title: "Session Story",
+    tools: ["session_list", "agent_export", "agent_prompt"]
+  }
+});
+
+// src/live-session/panel.ts
+function LIVE_SESSION_HTML(initData) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>agentproto live session</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;--text3:#6e7681;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;background:var(--bg);color:var(--text);overflow:hidden}
+#app{display:flex;height:100%}
+#tree-pane{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg2)}
+#tree-head{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600;font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
+#tree-body{flex:1;overflow-y:auto;padding:6px}
+#timeline-pane{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
+#timeline-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
+#timeline-head .focus-id{font-weight:600;font-size:13px;font-family:Menlo,Monaco,monospace}
+#head-summary{margin-left:auto;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;min-width:0}
+#head-summary .sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px;vertical-align:1px}
+#head-summary .sdot.running{background:var(--green)}
+#head-summary .sdot.grey{background:var(--text3)}
+#head-summary .sdot.error{background:var(--red)}
+#usage-chip{font-size:10.5px;font-family:Menlo,Monaco,monospace;background:var(--bg3);border-radius:4px;padding:1px 6px;color:var(--text)}
+#status-line{margin-left:8px;font-size:11px;color:var(--text2);flex-shrink:0}
+#timeline-body{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
+#head-selector{display:none;max-width:42%;font:inherit;font-size:12px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:2px 4px}
+#new-pill{display:none;position:absolute;right:14px;bottom:12px;z-index:6;background:var(--blue);color:#0d1117;border:none;font-size:11px;font-weight:700;padding:5px 11px;border-radius:12px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
+#new-pill.show{display:block}
+
+/* WP3 compact mode \u2014 colour rail + tighter rows; only under body.compact-mode
+   (displayMode 'inline' or narrow viewport). fullscreen/pip keep the cards. */
+body.compact-mode #tree-pane{display:none}
+body.compact-mode #head-selector{display:inline-block}
+body.compact-mode #focus-id-label{display:none}
+body.compact-mode .row{border-radius:6px;padding:5px 8px;border-left-width:3px}
+body.compact-mode .row.text{border-left-color:var(--blue)}
+body.compact-mode .row.tool-call{border-left-color:var(--yellow)}
+body.compact-mode .row.turn-end{border-left-color:var(--purple)}
+body.compact-mode .row .body{font-size:12px;margin-top:3px}
+body.compact-mode .row .rhead{font-size:10px}
+details.tool-group{border:1px solid var(--border);border-radius:8px;background:var(--bg2);padding:5px 8px;border-left:3px solid var(--yellow)}
+details.tool-group>summary{cursor:pointer;font-size:11px;color:var(--text2);font-weight:600;list-style:none}
+details.tool-group[open]>summary{margin-bottom:6px}
+details.tool-group .row{margin-top:5px}
+
+.tnode{border-radius:6px;cursor:pointer;padding:5px 8px;margin:1px 0;display:flex;align-items:center;gap:7px;font-size:12px}
+.tnode:hover{background:var(--bg3)}
+.tnode.focus{background:var(--bg3);outline:1px solid var(--blue)}
+.tnode .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.dot.running{background:var(--green)}
+.dot.grey{background:var(--text3)}
+.dot.error{background:var(--red)}
+.tnode .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Menlo,Monaco,monospace}
+.tnode .badge{font-size:9px;font-weight:700;color:var(--purple);border:1px solid var(--purple);border-radius:3px;padding:0 4px;flex-shrink:0}
+.tchildren{margin-left:14px;border-left:1px solid var(--border);padding-left:4px}
+#tree-empty{padding:12px;color:var(--text3);font-size:12px}
+
+.row{border:1px solid var(--border);border-radius:8px;background:var(--bg2);padding:8px 10px}
+.row .rhead{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text2)}
+.row .kind{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:10px}
+.row.text .kind{color:var(--blue)}
+.row.tool-call .kind{color:var(--yellow)}
+.row.turn-end .kind{color:var(--purple)}
+.row .body{margin-top:5px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
+.row.text .body{font-family:inherit}
+.row.tool-call .toolname{font-family:Menlo,Monaco,monospace;font-weight:600}
+.status-badge{font-size:9px;font-weight:700;border-radius:3px;padding:1px 5px;margin-left:6px}
+.status-badge.pending{background:var(--bg3);color:var(--text2)}
+.status-badge.ok{background:#0f3d20;color:var(--green)}
+.status-badge.error{background:#3d1418;color:var(--red)}
+.row details{margin-top:6px}
+.row summary{cursor:pointer;font-size:11px;color:var(--text2)}
+.row pre{margin-top:4px;font-family:Menlo,Monaco,monospace;font-size:11px;white-space:pre-wrap;word-break:break-word;color:var(--text2);background:var(--bg);border-radius:5px;padding:6px 8px;max-height:200px;overflow:auto}
+.chip{display:inline-block;font-size:10.5px;font-family:Menlo,Monaco,monospace;background:var(--bg3);border-radius:4px;padding:2px 6px}
+#timeline-empty{color:var(--text3);font-size:12px;padding:8px 2px}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="tree-pane">
+    <div id="tree-head">Sessions</div>
+    <div id="tree-body"><div id="tree-empty">Loading\u2026</div></div>
+  </div>
+  <div id="timeline-pane">
+    <div id="timeline-head">
+      <span class="focus-id" id="focus-id-label">\u2014</span>
+      <select id="head-selector" title="Sessions"></select>
+      <span id="head-summary"></span>
+      <span id="status-line">connecting\u2026</span>
+    </div>
+    <div id="timeline-body"><div id="timeline-empty">No session focused yet.</div></div>
+    <button id="new-pill" type="button">\u2193 New messages</button>
+  </div>
+</div>
+<script>
+window.__APP_INIT__ = ${JSON.stringify(initData)};
+
+${panelBridgeScript("agentproto-live-session")}
+
+// ============================================================
+// INLINED REDUCER COPY \u2014 hand-kept mirror of live-session/logic.ts.
+// Plain JS, same semantics: coalesce consecutive text-delta of the same
+// session (and rejoin an unterminated mid-line fragment split by an
+// interleaved record \u2014 see the TS module's text-delta arm), pair
+// tool-call/tool-result by toolCallId, pass through turn-end, keep usage
+// as STATE (SPEC \xA71: usage leaves the timeline \u2014 a usage_update record
+// never produces a row), ignore unknown kinds. Keep in sync with the TS
+// module; the TS module is the one the test suite imports.
+// ============================================================
+
+function initialTimelineState() {
+  return { rows: [], usage: null };
+}
+
+function rowId(record, rows) {
+  return record.seq != null ? (record.kind + '-' + record.seq) : (record.kind + '-' + rows.length);
+}
+
+// Fold a text-delta record into an existing row (fresh object), keeping the
+// row's "partial" hint in step with the latest record \u2014 see mergeTextDelta in
+// the TS module.
+function mergeTextDelta(row, record) {
+  var merged = Object.assign({}, row, {
+    text: row.text + (record.text || ''),
+    seq: record.seq,
+    ts: record.ts,
+  });
+  if (record.partial === true) merged.partial = true;
+  else delete merged.partial;
+  return merged;
+}
+
+function reduceEvent(state, record) {
+  switch (record.kind) {
+    case 'text-delta': {
+      var last = state.rows[state.rows.length - 1];
+      if (last && last.kind === 'text' && last.sessionId === record.sessionId) {
+        return { rows: state.rows.slice(0, -1).concat([mergeTextDelta(last, record)]), usage: state.usage };
+      }
+      // Debounce can flush an unterminated mid-word fragment (flagged
+      // partial), let a tool-call land, then flush the continuation \u2014 look
+      // back within the same turn (bounded by this session's last turn-end)
+      // for that session's most recent text row and continue it in place.
+      // Only the explicit partial flag glues: a non-partial record with no
+      // trailing newline is the writer's normal end-of-text-block shape.
+      for (var i = state.rows.length - 1; i >= 0; i--) {
+        var prior = state.rows[i];
+        if (prior.sessionId !== record.sessionId) continue;
+        if (prior.kind === 'turn-end') break;
+        if (prior.kind !== 'text') continue;
+        if (prior.partial === true) {
+          var patched = state.rows.slice();
+          patched[i] = mergeTextDelta(prior, record);
+          return { rows: patched, usage: state.usage };
+        }
+        break;
+      }
+      var row = {
+        kind: 'text', id: rowId(record, state.rows), seq: record.seq, ts: record.ts,
+        sessionId: record.sessionId, text: record.text || '',
+      };
+      if (record.partial === true) row.partial = true;
+      return { rows: state.rows.concat([row]), usage: state.usage };
+    }
+    case 'tool-call': {
+      var row = {
+        kind: 'tool-call', id: rowId(record, state.rows), seq: record.seq, ts: record.ts,
+        sessionId: record.sessionId, toolCallId: record.toolCallId || '',
+        toolName: record.toolName || 'unknown', arguments: record.arguments, status: 'pending',
+      };
+      return { rows: state.rows.concat([row]), usage: state.usage };
+    }
+    case 'tool-result': {
+      var idx = -1;
+      for (var i = 0; i < state.rows.length; i++) {
+        if (state.rows[i].kind === 'tool-call' && state.rows[i].toolCallId === record.toolCallId) idx = i;
+      }
+      if (idx === -1) {
+        var row = {
+          kind: 'tool-call', id: rowId(record, state.rows), seq: record.seq, ts: record.ts,
+          sessionId: record.sessionId, toolCallId: record.toolCallId || '', toolName: 'unknown',
+          status: record.isError ? 'error' : 'ok', result: record.result,
+        };
+        return { rows: state.rows.concat([row]), usage: state.usage };
+      }
+      var updated = Object.assign({}, state.rows[idx], {
+        status: record.isError ? 'error' : 'ok', result: record.result,
+      });
+      var rows = state.rows.slice();
+      rows[idx] = updated;
+      return { rows: rows, usage: state.usage };
+    }
+    case 'turn-end': {
+      var row = {
+        kind: 'turn-end', id: rowId(record, state.rows), seq: record.seq, ts: record.ts,
+        sessionId: record.sessionId, reason: record.reason,
+      };
+      return { rows: state.rows.concat([row]), usage: state.usage };
+    }
+    case 'usage_update': {
+      // Usage is state, not a row (SPEC \xA71) \u2014 last-write-wins, no merge with
+      // the prior snapshot. state.rows is reused as-is (it didn't change).
+      return {
+        rows: state.rows,
+        usage: {
+          size: record.size, used: record.used, cost: record.cost,
+          tokensIn: record.tokensIn, tokensOut: record.tokensOut,
+          seq: record.seq, ts: record.ts,
+        },
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+// ============================================================
+// INLINED PURE HELPERS \u2014 exact copies of live-session/logic.ts's
+// isNearBottom (SPEC \xA72) and groupAdjacentToolCalls (SPEC \xA73). Same names,
+// same signatures, same default thresholds; plain JS because the widget
+// has no import step.
+// ============================================================
+
+var SCROLL_STICK_THRESHOLD_PX = 24;
+
+function isNearBottom(scrollHeight, scrollTop, clientHeight, threshold) {
+  if (threshold == null) threshold = SCROLL_STICK_THRESHOLD_PX;
+  return scrollHeight - scrollTop - clientHeight <= threshold;
+}
+
+var TOOL_CALL_GROUP_THRESHOLD = 2;
+
+// Collapse runs of \`threshold\`+ adjacent tool-call rows into one
+// {kind:'tool-group', rows:[...]} entry; everything else passes through as
+// individual {kind:'row', row} entries, same order as the input.
+function groupAdjacentToolCalls(rows, threshold) {
+  if (threshold == null) threshold = TOOL_CALL_GROUP_THRESHOLD;
+  var out = [];
+  var run = [];
+  function flushRun() {
+    if (!run.length) return;
+    if (run.length >= threshold) out.push({ kind: 'tool-group', rows: run });
+    else for (var j = 0; j < run.length; j++) out.push({ kind: 'row', row: run[j] });
+    run = [];
+  }
+  for (var i = 0; i < rows.length; i++) {
+    if (rows[i].kind === 'tool-call') { run.push(rows[i]); continue; }
+    flushRun();
+    out.push({ kind: 'row', row: rows[i] });
+  }
+  flushRun();
+  return out;
+}
+
+// ============================================================
+// Rendering helpers
+// ============================================================
+
+function escHtml(s) {
+  return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function safeJson(v) {
+  try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
+}
+
+function statusDotClass(status) {
+  if (status === 'running' || status === 'starting') return 'running';
+  if (status === 'error' || status === 'killed') return 'error';
+  return 'grey';
+}
+
+// SPEC \xA74 (non-contract guidance): 52524 \u2192 "52.5k", >=1e6 \u2192 "M" suffix,
+// one decimal, trailing .0 vanishes because the value stays a number.
+// cost \u2192 "$" + toFixed(2). Read from timelineState.usage.
+function fmtCompactNum(n) {
+  if (typeof n !== 'number' || !isFinite(n)) return null;
+  if (n >= 1000000) return (Math.round(n / 100000) / 10) + 'M';
+  if (n >= 1000) return (Math.round(n / 100) / 10) + 'k';
+  return String(n);
+}
+
+function usageChipText(usage) {
+  if (!usage) return '';
+  var bits = [];
+  if (usage.used != null && usage.size != null) {
+    bits.push(fmtCompactNum(usage.used) + '/' + fmtCompactNum(usage.size));
+  } else if (usage.used != null) {
+    bits.push(fmtCompactNum(usage.used));
+  }
+  if (typeof usage.cost === 'number') bits.push('$' + usage.cost.toFixed(2));
+  return bits.join(' \xB7 ');
+}
+
+// WP5: elapsed seconds since the timeline's first row (running only).
+function elapsedText(rows, status) {
+  if (status !== 'running' && status !== 'starting') return null;
+  if (!rows.length || rows[0].ts == null) return null;
+  var ms = new Date(rows[0].ts).getTime();
+  if (!isFinite(ms)) return null;
+  return Math.max(0, Math.round((Date.now() - ms) / 1000)) + 's';
+}
+
+// ============================================================
+// LEFT pane \u2014 live tree
+// ============================================================
+
+var currentTree = [];
+var focusId = (window.__APP_INIT__ && window.__APP_INIT__.sessionId) || null;
+// Where the current focus came from: 'pinned' (the tool result that mounted
+// this widget named a session \u2014 never auto-switched away), 'auto' (self-
+// discovered newest running session, a guess the host may still correct),
+// 'user' (explicit click/selector choice \u2014 outranks everything).
+var focusSource = focusId ? 'pinned' : null;
+var bootDone = false;
+var treeTimer = null;
+
+// INLINED COPY of live-session/logic.ts extractToolResultSessionId \u2014
+// keep in sync (same convention as the reducer copy below).
+function extractToolResultSessionId(params) {
+  if (!params || typeof params !== 'object') return null;
+  var res = (params.result && typeof params.result === 'object') ? params.result : params;
+  if (res.isError) return null;
+  var content = Array.isArray(res.content) ? res.content : [];
+  var item = content[0];
+  if (!item || item.type !== 'text' || typeof item.text !== 'string') return null;
+  try {
+    var body = JSON.parse(item.text);
+    if (body && typeof body.sessionId === 'string' && body.sessionId) return body.sessionId;
+    if (body && typeof body.id === 'string' && body.id) return body.id;
+  } catch (_) {}
+  return null;
+}
+
+// The host pushes the triggering tool call's result (ext-apps
+// ui/notifications/tool-result). For agent_start that result IS the spawned
+// session's descriptor \u2014 pin the widget to THAT session instead of leaving
+// pollTree() to self-discover the newest running one, which made every
+// agent_start card show the latest started session rather than its own.
+onHostNotification(function(method, params) {
+  if (method !== 'ui/notifications/tool-result') return;
+  var id = extractToolResultSessionId(params);
+  if (!id || focusSource === 'user' || id === focusId) return;
+  focusSource = 'pinned';
+  if (bootDone) setFocus(id);
+  else focusId = id; // boot's own startTimeline(focusId) picks it up
+});
+
+function findNode(nodes, id) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].id === id) return nodes[i];
+    var found = findNode(nodes[i].children || [], id);
+    if (found) return found;
+  }
+  return null;
+}
+
+function flattenDfs(nodes, out) {
+  out = out || [];
+  for (var i = 0; i < nodes.length; i++) {
+    out.push(nodes[i]);
+    flattenDfs(nodes[i].children || [], out);
+  }
+  return out;
+}
+
+function pickInitialFocus(tree) {
+  var flat = flattenDfs(tree);
+  var alive = flat.filter(function(n) { return n.status === 'running' || n.status === 'starting'; });
+  if (alive.length) return alive[alive.length - 1].id;
+  return tree.length ? tree[0].id : null;
+}
+
+function renderTreeNode(node, depth) {
+  var childrenHtml = (node.children || []).map(function(c) { return renderTreeNode(c, depth + 1); }).join('');
+  var badge = node.isOrchestrator ? '<span class="badge">orch</span>' : '';
+  var cls = 'tnode' + (node.id === focusId ? ' focus' : '');
+  return '<div class="' + cls + '" data-id="' + escHtml(node.id) + '">' +
+    '<span class="dot ' + statusDotClass(node.status) + '"></span>' +
+    '<span class="label">' + escHtml(node.label || node.id) + '</span>' + badge +
+    '</div>' +
+    (childrenHtml ? '<div class="tchildren">' + childrenHtml + '</div>' : '');
+}
+
+// WP4: compact header <select> mirrors the tree; still routes through
+// setFocus() \u2014 the only session-switch entry point.
+function renderHeadSelector() {
+  var sel = document.getElementById('head-selector');
+  var flat = flattenDfs(currentTree);
+  while (sel.firstChild) sel.removeChild(sel.firstChild);
+  if (!flat.length) return;
+  for (var i = 0; i < flat.length; i++) {
+    var n = flat[i];
+    var o = document.createElement('option');
+    o.value = n.id;
+    o.textContent = (n.id === focusId ? '\u25CF ' : '') + (n.label || n.id);
+    sel.appendChild(o);
+  }
+  sel.value = focusId || '';
+}
+
+function renderTree() {
+  var body = document.getElementById('tree-body');
+  var root = focusId ? findNode(currentTree, focusId) : null;
+  var renderNodes = root ? [root] : currentTree;
+  if (!renderNodes.length) {
+    body.innerHTML = '<div id="tree-empty">No sessions.</div>';
+    renderHeadSelector();
+    return;
+  }
+  body.innerHTML = renderNodes.map(function(n) { return renderTreeNode(n, 0); }).join('');
+  var els = body.querySelectorAll('.tnode');
+  els.forEach(function(el) {
+    el.addEventListener('click', function() {
+      var id = el.getAttribute('data-id');
+      if (id === focusId) return;
+      focusSource = 'user';
+      setFocus(id);
+    });
+  });
+  renderHeadSelector();
+}
+
+function pollTree() {
+  callTool('app_session_tree', {}).then(function(res) {
+    currentTree = res.tree || [];
+    if (!focusId) {
+      focusId = pickInitialFocus(currentTree);
+      if (focusId) { focusSource = 'auto'; startTimeline(focusId); }
+    }
+    renderTree();
+    updateHeader();
+  }).catch(function() {
+    // Leave the last-known tree rendered; the next poll may recover.
+  });
+}
+
+// ============================================================
+// RIGHT pane \u2014 timeline for focusId
+// ============================================================
+
+var timelineState = initialTimelineState();
+var sincePtr = 0;
+var activeSource = null; // {type:'sse', es} | {type:'poll', timer}
+var compactMode = false; // WP3: hostContext.displayMode === 'inline' (or narrow)
+
+function setStatus(msg) {
+  document.getElementById('status-line').textContent = msg;
+}
+
+function isCompact() {
+  return (getHostContext() && getHostContext().displayMode === 'inline') ||
+    (typeof window !== 'undefined' && window.innerWidth < 640);
+}
+
+// WP3/WP4: apply the compact/expanded split. Only re-renders the timeline
+// when the mode actually flips (scroll + <details> state survive otherwise).
+function applyDisplayMode() {
+  var c = isCompact();
+  document.body.classList.toggle('compact-mode', c);
+  if (c !== compactMode) {
+    compactMode = c;
+    renderTimelineFull();
+    renderTree();
+  }
+}
+
+// WP5 + WP2: one header line \u2014 \`\u25CF running \xB7 3 tools \xB7 52.5k/200k \xB7 $0.04 \xB7 12s\`
+// (status dot from the focus node, tool count from the rows, usage from
+// timelineState.usage \u2014 no usage_update row anymore) + transport status.
+function updateHeader() {
+  document.getElementById('focus-id-label').textContent = focusId || '\u2014';
+  var rows = timelineState.rows || [];
+  var usage = timelineState.usage;
+  var tools = 0;
+  for (var i = 0; i < rows.length; i++) if (rows[i].kind === 'tool-call') tools++;
+  var node = focusId ? findNode(currentTree, focusId) : null;
+  var st = node ? node.status : null;
+  var parts = [];
+  if (st) parts.push('<span class="sdot ' + statusDotClass(st) + '"></span>' + escHtml(st));
+  if (tools) parts.push(tools + (tools === 1 ? ' tool' : ' tools'));
+  var chip = usageChipText(usage);
+  if (chip) parts.push('<span id="usage-chip" class="chip">' + escHtml(chip) + '</span>');
+  var el = elapsedText(rows, st);
+  if (el) parts.push(escHtml(el));
+  document.getElementById('head-summary').innerHTML = parts.length ? parts.join(' \xB7 ') : '';
+}
+
+function captureDetailsOpenFlags(body) {
+  var dets = body.querySelectorAll('details');
+  var flags = [];
+  for (var i = 0; i < dets.length; i++) flags.push(dets[i].open);
+  return flags;
+}
+
+function restoreDetailsOpenFlags(body, flags) {
+  var dets = body.querySelectorAll('details');
+  for (var i = 0; i < dets.length && i < flags.length; i++) {
+    if (flags[i]) dets[i].open = true;
+  }
+}
+
+// Full rebuild \u2014 used ONLY for the first paint of a session, a setFocus()
+// session switch (SPEC \xA72: full reset is correct there), a display-mode
+// flip, and as the fallback for shapes the incremental patcher can't patch.
+// A display-mode flip re-renders the SAME content (WP3: "r\xE9actif... sans
+// perdre le scroll ni l'\xE9tat des <details>"), so open <details> and the
+// exact scroll offset (not just the at-bottom decision) survive the rebuild.
+function renderTimelineFull() {
+  var body = document.getElementById('timeline-body');
+  var wasAtBottom = isNearBottom(body.scrollHeight, body.scrollTop, body.clientHeight);
+  var savedScrollTop = body.scrollTop;
+  var flags = captureDetailsOpenFlags(body);
+  body.innerHTML = buildTimelineHtml();
+  restoreDetailsOpenFlags(body, flags);
+  body.scrollTop = wasAtBottom ? body.scrollHeight : savedScrollTop;
+  updateHeader();
+}
+
+function buildTimelineHtml() {
+  var rows = timelineState.rows;
+  if (!rows.length) return '<div id="timeline-empty">No events yet.</div>';
+  if (compactMode) {
+    var entries = groupAdjacentToolCalls(rows);
+    var html = '';
+    for (var i = 0; i < entries.length; i++) {
+      var e = entries[i];
+      if (e.kind === 'tool-group') {
+        html += '<details class="tool-group"><summary>\u25B8 ' + e.rows.length + ' tool calls</summary>' +
+          e.rows.map(renderRow).join('') + '</details>';
+      } else {
+        html += renderRow(e.row);
+      }
+    }
+    return html;
+  }
+  return rows.map(renderRow).join('');
+}
+
+// \u2500\u2500 WP1 incremental patch (dense mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// One record, one minimal DOM mutation. The common case (text-delta merged
+// into the LAST rendered row) patches just that row's text node. Anything
+// else appends via insertAdjacentHTML. Only rare in-place replacements
+// (tool-result merge, partial-lookback re-merge) swap ONE element's HTML.
+function applyRecordToDom(prevRows) {
+  var body = document.getElementById('timeline-body');
+  // Capture "stuck to bottom?" BEFORE any mutation (SPEC \xA72).
+  var wasAtBottom = isNearBottom(body.scrollHeight, body.scrollTop, body.clientHeight);
+  var rows = timelineState.rows;
+
+  if (compactMode) {
+    // Inline mode: smaller rows \u2014 full grouped rebuild, preserving
+    // wasAtBottom/scrollTop and <details> open-state. Only touch the DOM
+    // (and the scroll/pill decision) when the rows actually changed \u2014 a
+    // usage_update leaves rows === prevRows, so it must fall through to the
+    // header-only path below, same as the dense-mode branch.
+    if (rows !== prevRows) {
+      var flags = captureDetailsOpenFlags(body);
+      body.innerHTML = buildTimelineHtml();
+      restoreDetailsOpenFlags(body, flags);
+      if (wasAtBottom) body.scrollTop = body.scrollHeight;
+      else showNewPill();
+    }
+    updateHeader();
+    return;
+  }
+
+  var appended = rows.length > prevRows.length;
+  if (prevRows.length === 0 || (appended && !samePrefix(prevRows, rows))) {
+    // First real paint of this session (empty placeholder present) or an
+    // unexpected shape \u2014 full reset is correct/cheapest.
+    body.innerHTML = buildTimelineHtml();
+    body.scrollTop = body.scrollHeight;
+    updateHeader();
+    return;
+  }
+
+  if (appended) {
+    body.insertAdjacentHTML('beforeend', renderRow(rows[rows.length - 1]));
+  } else if (rows.length === prevRows.length && rows.length > 0) {
+    // Exactly one row object replaced (tool-result merge, partial-text
+    // re-merge via the reducer's lookback). Patch that one element only.
+    // Scan from the tail: the hot path (a text-delta merged into the LAST
+    // row, the dominant streaming case) is found in O(1) this way instead
+    // of walking the whole array \u2014 the rare mid-array lookback re-merge
+    // still resolves correctly, just slower.
+    var idx = -1;
+    for (var i = rows.length - 1; i >= 0; i--) {
+      if (rows[i] !== prevRows[i]) { idx = i; break; }
+    }
+    var patched = false;
+    if (idx >= 0) {
+      var row = rows[idx];
+      var el = body.querySelector('[data-row-id="' + escHtml(row.id) + '"]');
+      if (el) {
+        if (row.kind === 'text' && idx === rows.length - 1) {
+          // High-frequency case: patch the existing text node in place.
+          var b = el.querySelector('.body');
+          if (b) { b.textContent = row.text; patched = true; }
+        }
+        if (!patched) { el.outerHTML = renderRow(row); patched = true; }
+      }
+    }
+    if (!patched) {
+      // Multiple rows changed at once (shouldn't happen per-record) \u2014 rebuild.
+      body.innerHTML = buildTimelineHtml();
+      if (wasAtBottom) body.scrollTop = body.scrollHeight;
+      updateHeader();
+      return;
+    }
+  } else {
+    // rows unchanged (usage_update) \u2014 header only.
+    updateHeader();
+    return;
+  }
+
+  // Scroll decision AFTER the mutation: stick or leave the position alone.
+  if (wasAtBottom) body.scrollTop = body.scrollHeight;
+  else showNewPill();
+  updateHeader();
+}
+
+function samePrefix(prevRows, rows) {
+  for (var i = 0; i < prevRows.length; i++) {
+    if (prevRows[i] !== rows[i]) return false;
+  }
+  return true;
+}
+
+function showNewPill() {
+  document.getElementById('new-pill').classList.add('show');
+}
+
+function hideNewPill() {
+  document.getElementById('new-pill').classList.remove('show');
+}
+
+function renderRow(row) {
+  if (row.kind === 'text') {
+    return '<div class="row text" data-row-id="' + escHtml(row.id) + '"><div class="rhead"><span class="kind">text</span></div>' +
+      '<div class="body">' + escHtml(row.text) + '</div></div>';
+  }
+  if (row.kind === 'tool-call') {
+    var badgeCls = row.status === 'pending' ? 'pending' : row.status;
+    var badgeText = row.status === 'pending' ? 'pending' : (row.status === 'ok' ? 'ok' : 'error');
+    var resultHtml = row.status !== 'pending'
+      ? '<details><summary>result</summary><pre>' + escHtml(safeJson(row.result)) + '</pre></details>'
+      : '';
+    return '<div class="row tool-call" data-row-id="' + escHtml(row.id) + '"><div class="rhead"><span class="kind">tool</span>' +
+      '<span class="toolname">' + escHtml(row.toolName) + '</span>' +
+      '<span class="status-badge ' + badgeCls + '">' + badgeText + '</span></div>' +
+      '<details><summary>arguments</summary><pre>' + escHtml(safeJson(row.arguments)) + '</pre></details>' +
+      resultHtml + '</div>';
+  }
+  if (row.kind === 'turn-end') {
+    return '<div class="row turn-end" data-row-id="' + escHtml(row.id) + '"><div class="rhead"><span class="kind">turn end</span>' +
+      '<span class="chip">' + escHtml(row.reason || '\u2014') + '</span></div></div>';
+  }
+  return '';
+}
+
+function teardownTimeline() {
+  if (activeSource) {
+    if (activeSource.type === 'sse' && activeSource.es) {
+      try { activeSource.es.close(); } catch (e) {}
+    }
+    // Both the poll re-arm timer AND the SSE open/first-message fallback
+    // timer must be cleared, or a focus switch within the 2.5s window leaves
+    // a stale timer that fires startPolling for the abandoned session.
+    if (activeSource.timer) clearTimeout(activeSource.timer);
+    if (activeSource.fallbackTimer) clearTimeout(activeSource.fallbackTimer);
+  }
+  activeSource = null;
+}
+
+function attemptSSE(id) {
+  var settled = false;
+  var es;
+  try {
+    es = new EventSource(window.__APP_INIT__.httpBaseUrl + '/sessions/' + encodeURIComponent(id) + '/events/stream');
+  } catch (e) {
+    startPolling(id);
+    return;
+  }
+  var src = { type: 'sse', es: es, fallbackTimer: null };
+  activeSource = src;
+  // Every callback below re-checks focusId===id AND that src is still the
+  // live source: a focus switch tears down src and starts a new one, so a
+  // late open/message/error from this abandoned EventSource must be a no-op
+  // rather than mutating the new focus's timeline or clobbering activeSource.
+  function stale() { return activeSource !== src || focusId !== id; }
+  src.fallbackTimer = setTimeout(function() {
+    if (settled || stale()) return;
+    settled = true;
+    try { es.close(); } catch (e) {}
+    startPolling(id);
+  }, 2500);
+  es.addEventListener('open', function() {
+    if (settled || stale()) return;
+    settled = true;
+    clearTimeout(src.fallbackTimer);
+    setStatus('streaming via SSE');
+  });
+  es.onmessage = function(evt) {
+    if (stale()) return;
+    if (!settled) {
+      settled = true;
+      clearTimeout(src.fallbackTimer);
+      setStatus('streaming via SSE');
+    }
+    var rec;
+    try { rec = JSON.parse(evt.data); } catch (e) { return; }
+    var prev = timelineState;
+    timelineState = reduceEvent(timelineState, rec);
+    if (typeof rec.seq === 'number' && rec.seq > sincePtr) sincePtr = rec.seq;
+    if (timelineState !== prev) applyRecordToDom(prev.rows);
+  };
+  es.onerror = function() {
+    if (stale()) return;
+    if (!settled) {
+      settled = true;
+      clearTimeout(src.fallbackTimer);
+      try { es.close(); } catch (e) {}
+      startPolling(id);
+    } else {
+      // Do not leave EventSource to perform its native reconnect: this
+      // endpoint replays from since=0 when no cursor is provided, so a
+      // transparent reconnect would duplicate every row already reduced.
+      // The bridge poll resumes from sincePtr instead and preserves the
+      // exactly-once cursor contract.
+      try { es.close(); } catch (e) {}
+      startPolling(id);
+    }
+  };
+}
+
+function startPolling(id) {
+  activeSource = { type: 'poll', timer: null };
+  setStatus('polling');
+  function tick() {
+    if (!activeSource || activeSource.type !== 'poll' || focusId !== id) return;
+    callTool('app_session_events', { sessionId: id, since: sincePtr }).then(function(res) {
+      var events = res.events || [];
+      for (var i = 0; i < events.length; i++) {
+        var prev = timelineState;
+        timelineState = reduceEvent(timelineState, events[i]);
+        if (timelineState !== prev) applyRecordToDom(prev.rows);
+      }
+      if (typeof res.nextSeq === 'number') sincePtr = res.nextSeq;
+      setStatus('polling');
+      if (activeSource) activeSource.timer = setTimeout(tick, 1500);
+    }).catch(function() {
+      setStatus('disconnected');
+      if (activeSource) activeSource.timer = setTimeout(tick, 1500);
+    });
+  }
+  tick();
+}
+
+function startTimeline(id) {
+  teardownTimeline();
+  timelineState = initialTimelineState();
+  sincePtr = 0;
+  hideNewPill();
+  renderTimelineFull();
+  setStatus('connecting\u2026');
+  attemptSSE(id);
+}
+
+function setFocus(id) {
+  focusId = id;
+  renderTree();
+  startTimeline(id);
+}
+
+// ============================================================
+// Boot
+// ============================================================
+
+initBridge().then(function() {
+  var init = window.__APP_INIT__ || {};
+  if (init.httpBaseUrl) return init;
+  // Static ui:// resources render once at server-registration time with
+  // EMPTY initData (mcp-apps-adapter.ts registerMcpApps) \u2014 fall back to
+  // calling the tool ourselves over the bridge, same as the other panels.
+  return callTool('live_session', {}).then(function(result) {
+    window.__APP_INIT__ = result;
+    return result;
+  });
+}).then(function(init) {
+  // Only override the focus when live_session itself named a session AND a
+  // tool-result notification didn't already pin one while the fallback
+  // tools/call above was in flight \u2014 the host's push names the exact
+  // session this widget was mounted for, so it outranks the fallback's
+  // (argument-less, hence session-less in practice) self-call.
+  if (init.sessionId && focusSource !== 'pinned') {
+    focusId = init.sessionId;
+    focusSource = 'pinned';
+  }
+  onHostContext(function() {
+    applyDisplayMode();
+    updateHeader();
+  });
+  document.getElementById('head-selector').addEventListener('change', function(evt) {
+    var id = evt.target.value;
+    if (id && id !== focusId) { focusSource = 'user'; setFocus(id); }
+  });
+  document.getElementById('new-pill').addEventListener('click', function() {
+    var body = document.getElementById('timeline-body');
+    body.scrollTop = body.scrollHeight;
+    hideNewPill();
+  });
+  document.getElementById('timeline-body').addEventListener('scroll', function() {
+    // User scrolled back near the bottom \u2014 the pill is stale, hide it.
+    var el = document.getElementById('timeline-body');
+    if (isNearBottom(el.scrollHeight, el.scrollTop, el.clientHeight)) hideNewPill();
+  });
+  window.addEventListener('resize', function() {
+    var c = isCompact();
+    if (c !== compactMode) { applyDisplayMode(); }
+  });
+  applyDisplayMode();
+  bootDone = true;
+  pollTree();
+  treeTimer = setInterval(pollTree, 2000);
+  setInterval(updateHeader, 1000); // keep the WP5 elapsed clock fresh
+  if (focusId) startTimeline(focusId);
+}).catch(function(e) {
+  setStatus('Bridge error: ' + e.message);
+});
+</script>
+</body>
+</html>`;
+}
+
+// src/live-session/index.ts
+var liveSessionInputSchema = z.object({
+  sessionId: z.string().optional().describe(
+    "Attach the widget to an existing session by id or name. Omit to self-discover the newest running session from the tree."
+  )
+});
+function makeLiveSessionApp(ops) {
+  const httpBaseUrl = ops?.httpBaseUrl ?? "http://127.0.0.1:18790";
+  const httpOrigin = new URL(httpBaseUrl).origin;
+  return {
+    id: "live_session",
+    title: "Live Session",
+    description: "Open the live session widget \u2014 a two-pane view of a running agent session: a live tree on the left, a streaming timeline (text, tool calls/results, turn-end) on the right. Omit `sessionId` to attach to the newest running session; pass one to attach directly.",
+    inputSchema: liveSessionInputSchema,
+    execute: async (input) => ({
+      sessionId: input.sessionId,
+      httpBaseUrl
+    }),
+    html: (initData) => LIVE_SESSION_HTML(initData),
+    csp: { connectDomains: [httpOrigin] }
+  };
+}
+var DEFAULT_HTTP_BASE_URL = "http://127.0.0.1:18790";
+var liveSessionApp = defineApp({
+  id: "@agentproto/live-session",
+  name: "Live Session",
+  description: "Open the live session widget \u2014 a two-pane view of a running agent session: a live tree on the left, a streaming timeline (text, tool calls/results, turn-end) on the right.",
+  agents: [],
+  ui: {
+    html: LIVE_SESSION_HTML({ httpBaseUrl: DEFAULT_HTTP_BASE_URL }),
+    title: "Live Session",
+    tools: ["app_session_tree", "app_session_events", "live_session"]
+  }
+});
+
+export { agentsOverviewApp, bureauSessionsApp, codeTeam, contentTeam, liveSessionApp, mailTriage, makeAgentsOverviewApp, makeBureauSessionsApp, makeLiveSessionApp, makeSessionStoryPanelApp, makeSessionsPanelApp, mediaViewer, opsPanel, panelBridgeScript, sessionStoryApp, sessionViewer, sessionsPanelApp };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map