@agentproto/apps 0.8.2 → 0.9.1

package/README.md

@@ -53,7 +53,34 @@ npx agentproto-apps-sync [--base-dir <dir>]
 The default base directory is `~/.agentproto/apps`. It writes each app's
 manifests under `<baseDir>/<slug>/` and a summary catalog to
 `<baseDir>/../app-catalog.json` (so `~/.agentproto/app-catalog.json` by
-default).
+default). The five builtin daemon panels above are **not** part of this
+sync/emit flow — they aren't `AppHandle`s, so there's nothing to `.emit(dir)`.
+A running daemon lists them in `app_catalog` directly (see "Builtin daemon
+panels" above), independent of this file and of `~/.agentproto/apps.json`.
+
+## Builtin daemon panels
+
+Five of `@agentproto/runtime`'s daemon-builtin MCP-Apps widgets live here too,
+as house-app-quality code — but they are **not** `AppHandle`s (`defineApp`
+requires a non-empty `agents` array, and these are pure read-only viewers with
+no agent of their own):
+
+| Panel | Import | MCP tool id |
+| --- | --- | --- |
+| `sessions-panel` | `@agentproto/apps/sessions-panel` | `agentproto_sessions` |
+| `agents-overview` | `@agentproto/apps/agents-overview` | `agentproto_agents_overview` |
+| `bureau-sessions` | `@agentproto/apps/bureau-sessions` | `agentproto_bureau_sessions` |
+| `session-story` | `@agentproto/apps/session-story` | `agentproto_session_story` |
+| `live-session` | `@agentproto/apps/live-session` | `live_session` |
+
+Each exports a `make<Name>App(ops)` factory producing an `AgnoMcpApp` — the
+shape `@agentproto/runtime`'s `mcp-apps-adapter.ts` mounts on the daemon's MCP
+server. `@agentproto/runtime`'s `builtin-apps.ts` wraps these five with the
+daemon's own session registry and mounts them at boot, unconditionally — no
+`app_install` step, and they're always listed in `app_catalog` under
+`category: "builtin"`. A sixth builtin panel, the terminal, stays in
+`@agentproto/runtime` (`terminal-panel-app.ts`) — it needs a live PTY
+WebSocket, not a portable tool-call-driven `AgnoMcpApp`.
 
 ## Generic by design
 

package/dist/agents-overview/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * McpApp definition for the agentproto "agents — vue claire" panel.
+ *
+ * A plain-language overview of agent-cli sessions: one card per session
+ * with a single human sentence (what the agent is doing/last said) plus a
+ * coarse state — `à traiter` / `au travail` / `en attente` / `terminé`.
+ *
+ * Uses the AgnoMcpApp contract (a local McpApp-compatible shape that does
+ * NOT depend on @agstudio/mcp-apps). The host (@agentproto/runtime) wires
+ * this factory's output via `registerMcpApps` at boot time — see runtime's
+ * builtin-apps.ts.
+ *
+ * Protocol flow:
+ *   1. Tool `agentproto_agents_overview` is called by the host.
+ *   2. execute() returns the agent-session snapshot → injected into the
+ *      HTML as the initial render via the tool result JSON.
+ *   3. The HTML panel opens a JSON-RPC bridge (postMessage) and polls
+ *      `session_list` every ~12 s, then calls `summarize_session` for
+ *      each visible session to fetch the plain sentence + state.
+ *
+ * The per-session summary is generated SERVER-SIDE by the
+ * `summarize_session` tool, which stays in @agentproto/runtime
+ * (summarize-session-tool.ts) — it's tied to the runtime's session
+ * ring-buffer/hot path, not to this panel's UI. Only the panel factory +
+ * HTML live here.
+ *
+ * This module also exports `agentsOverviewApp`, a real `defineApp()`
+ * `AppHandle` (`agents: []`, UI-only) — the catalog/emit/`app_install` path.
+ * It's separate from `makeAgentsOverviewApp` above, which the daemon mounts
+ * directly at boot: that factory closes over LIVE `listSessions`, something
+ * a static emitted `ui.html` snapshot can't carry.
+ */
+import { z } from "zod";
+import { type AppHandle } from "@agentproto/app-kit";
+import type { AgnoMcpApp } from "../mcp-app-types.js";
+export declare const agentsOverviewInputSchema: z.ZodObject<{
+    filter: z.ZodOptional<z.ZodEnum<{
+        running: "running";
+        all: "all";
+    }>>;
+}, z.core.$strip>;
+export type AgentsOverviewInput = z.infer<typeof agentsOverviewInputSchema>;
+export type AgentsOverviewOutput<TSession = unknown> = {
+    sessions: TSession[];
+};
+/** Generic over the host's own session-descriptor shape — see
+ *  sessions-panel/index.ts's SessionsPanelOps for why. */
+export interface AgentsOverviewOps<TSession = unknown> {
+    listSessions(filter?: "running" | "all"): TSession[];
+}
+export type { AgnoMcpApp };
+export declare function makeAgentsOverviewApp<TSession = unknown>(ops: AgentsOverviewOps<TSession>): AgnoMcpApp<AgentsOverviewInput, AgentsOverviewOutput<TSession>>;
+export declare const agentsOverviewApp: AppHandle;
+//# sourceMappingURL=index.d.ts.map

package/dist/agents-overview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/agents-overview/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AACvB,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAErD,eAAO,MAAM,yBAAyB;;;;;iBAKpC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAC3E,MAAM,MAAM,oBAAoB,CAAC,QAAQ,GAAG,OAAO,IAAI;IAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAA;AAE/E;0DAC0D;AAC1D,MAAM,WAAW,iBAAiB,CAAC,QAAQ,GAAG,OAAO;IACnD,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ,EAAE,CAAA;CACrD;AAED,YAAY,EAAE,UAAU,EAAE,CAAA;AAE1B,wBAAgB,qBAAqB,CAAC,QAAQ,GAAG,OAAO,EACtD,GAAG,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GAC/B,UAAU,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAajE;AAED,eAAO,MAAM,iBAAiB,EAAE,SAY9B,CAAA"}

package/dist/agents-overview/panel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * HTML bundle for the agentproto "agents — vue claire" panel — the
+ * `AGENTS_OVERVIEW_HTML` served as the `ui://agentproto_agents_overview/view`
+ * resource. Mounted via the `agentproto_agents_overview` tool defined in
+ * ./index.ts.
+ *
+ * The panel polls `session_list` every ~12s, then calls the host's
+ * `summarize_session` tool (registered server-side by
+ * @agentproto/runtime's summarize-session-tool.ts, NOT part of this
+ * package — that tool is tied to the runtime's session ring-buffer/hot
+ * path) for each visible session to fetch the plain sentence + state.
+ */
+export declare const AGENTS_OVERVIEW_HTML: string;
+//# sourceMappingURL=panel.d.ts.map

package/dist/agents-overview/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/agents-overview/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,eAAO,MAAM,oBAAoB,QAuJzB,CAAA"}

package/dist/agents-overview/panel.mjs

@@ -0,0 +1,306 @@
+/**
+ * @agentproto/apps v0.1.0
+ * Ready-made agentproto apps (teams of agents + workflows) built on app-kit.
+ */
+
+// 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/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>`;
+
+export { AGENTS_OVERVIEW_HTML };
+//# sourceMappingURL=panel.mjs.map
+//# sourceMappingURL=panel.mjs.map

package/dist/agents-overview/panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/panel-bridge.ts","../../src/agents-overview/panel.ts"],"names":[],"mappings":";;;;;;AAqCO,SAAS,kBAAkB,OAAA,EAAyB;AACzD,EAAA,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAmDa,IAAA,CAAK,SAAA,CAAU,OAAO,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAA,CAAA;AAyF7C;;;ACjKO,IAAM,oBAAA,GAAuB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuDlC,iBAAA,CAAkB,4BAA4B,CAAC;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA","file":"panel.mjs","sourcesContent":["/**\n * Shared MCP Apps client bridge for agentproto panels.\n *\n * One spec-correct copy of the JSON-RPC-over-postMessage bridge that every\n * ui:// panel embeds in its <script> block. Mirrors the behaviour of\n * @agstudio/mcp-apps' mcpAppClientScript() — which we cannot import here:\n * agentproto is a standalone pnpm workspace with no @agstudio/* dependency\n * (same isolation invariant as mcp-apps-adapter.ts).\n *\n * Handshake (MCP Apps ext spec 2026-01-26, ext-apps McpUiInitializeRequest):\n *   params REQUIRE `appInfo` (Implementation: {name, version}),\n *   `appCapabilities`, and `protocolVersion`. Sending `clientInfo` instead\n *   of `appInfo` fails the host's schema validation — hosts either reply\n *   with an error or silently drop the request, so the panel's initBridge()\n *   promise never resolves and the panel renders blank while every\n *   server-side surface (tools, resources) works. That exact bug shipped in\n *   4 copy-pasted bridges; this module is the single corrected source.\n *\n * The script defines, in panel scope:\n *   post / rpcRequest / rpcNotify      — raw JSON-RPC plumbing\n *   onHostNotification(cb)             — subscribe to host-pushed\n *                                        notifications (method, params)\n *   initBridge()                       — ui/initialize → ui/notifications/initialized\n *   callTool(name, args)               — tools/call + JSON text unwrap\n *   getHostContext() / onHostContext(cb) — host context (displayMode, theme, …),\n *                                        captured from the initialize result and\n *                                        merged on ui/notifications/host-context-changed\n *   requestDisplayMode(mode)           — ui/request-display-mode (inline|fullscreen|pip)\n *\n * Display-mode toggle: the bridge also injects two floating buttons\n * (fullscreen + pip) in the top-right corner of every panel, shown only for\n * the modes the host actually advertises via hostContext.availableDisplayModes\n * — same pattern as guilde's canvas.app.ts canvasShellHtml() (the reference\n * implementation that renders correctly in Claude hosts). No auto-request:\n * panels stay inline until the user clicks.\n */\n\nexport function panelBridgeScript(appName: string): string {\n  return `// ── MCP Apps bridge (shared: panel-bridge.ts) ──\n// JSON-RPC 2.0 over window.parent.postMessage · spec 2026-01-26\nvar _nextId = 1, _pending = {}, _notifyHandlers = [];\nvar _hostContext = null, _hostContextHandlers = [];\nfunction post(msg){ window.parent.postMessage(msg, '*'); }\nfunction getHostContext(){ return _hostContext; }\nfunction onHostContext(cb){\n  _hostContextHandlers.push(cb);\n  // Replay the last context so a late subscriber isn't stuck blind.\n  if (_hostContext){ try { cb(_hostContext); } catch(_) {} }\n}\nfunction _setHostContext(ctx){\n  if (!ctx || typeof ctx !== 'object') return;\n  // ui/notifications/host-context-changed carries only the changed keys —\n  // merge, matching the official ext-apps App behaviour.\n  _hostContext = Object.assign({}, _hostContext || {}, ctx);\n  for (var i = 0; i < _hostContextHandlers.length; i++){\n    try { _hostContextHandlers[i](_hostContext); } catch(_) {}\n  }\n}\nfunction rpcRequest(method, params){\n  return new Promise(function(resolve, reject){\n    var id = _nextId++;\n    _pending[id] = {resolve: resolve, reject: reject};\n    post({jsonrpc: '2.0', id: id, method: method, params: params || {}});\n  });\n}\nfunction rpcNotify(method, params){ post({jsonrpc: '2.0', method: method, params: params || {}}); }\nfunction onHostNotification(cb){ _notifyHandlers.push(cb); }\nwindow.addEventListener('message', function(evt){\n  var msg = evt.data;\n  if (!msg || typeof msg !== 'object' || msg.jsonrpc !== '2.0') return;\n  if (msg.id != null && msg.method == null){\n    var p = _pending[msg.id];\n    if (!p) return;\n    delete _pending[msg.id];\n    if (msg.error) p.reject(new Error(msg.error.message || ('rpc error ' + msg.error.code)));\n    else p.resolve(msg.result);\n    return;\n  }\n  if (msg.method){\n    if (msg.method === 'ui/notifications/host-context-changed'){\n      _setHostContext(msg.params || {});\n    }\n    for (var i = 0; i < _notifyHandlers.length; i++){\n      try { _notifyHandlers[i](msg.method, msg.params || {}); } catch(_) {}\n    }\n  }\n});\nfunction initBridge(){\n  return rpcRequest('ui/initialize', {\n    appInfo: {name: ${JSON.stringify(appName)}, version: '0.1.0'},\n    appCapabilities: {availableDisplayModes: ['inline', 'fullscreen', 'pip']},\n    protocolVersion: '2026-01-26'\n  }).then(function(result){\n    // The initialize result carries the initial hostContext (displayMode +\n    // availableDisplayModes) — capture it before notifying the host.\n    if (result && result.hostContext) _setHostContext(result.hostContext);\n    rpcNotify('ui/notifications/initialized', {});\n  });\n}\nfunction requestDisplayMode(mode){\n  return rpcRequest('ui/request-display-mode', {mode: mode});\n}\nfunction callTool(name, args){\n  return rpcRequest('tools/call', {name: name, arguments: args || {}}).then(function(result){\n    if (result.isError){\n      var e = (result.content && result.content[0] && result.content[0].text) || 'tool error';\n      throw new Error(e);\n    }\n    var text = (result.content && result.content[0] && result.content[0].text) || '{}';\n    return JSON.parse(text);\n  });\n}\n\n// ── Display-mode toggle buttons (NO auto-request) ──────────────────────\n// Injected by the shared bridge so every panel gets them without touching\n// its own markup. Mirrors guilde canvas.app.ts canvasShellHtml(): the\n// panel stays inline by default; the user expands on demand. Buttons only\n// appear for modes the host advertises in hostContext.availableDisplayModes.\n(function(){\n  function mount(){\n    var style = document.createElement('style');\n    style.textContent = '#dm,#pin{display:none;position:fixed;top:8px;z-index:10;'\n      + 'border:1px solid #d0d0d0;background:#fff;color:#1a1a1a;'\n      + 'font:600 13px/1 system-ui,sans-serif;padding:7px 12px;border-radius:6px;'\n      + 'cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}'\n      + '#dm{right:8px}#pin{right:118px}'\n      + '#dm:hover,#pin:hover{background:#f2f2f2;border-color:#b0b0b0}'\n      + '@media (prefers-color-scheme:dark){'\n      + '#dm,#pin{border-color:#555;background:#2a2a2a;color:#f0f0f0;box-shadow:0 1px 4px rgba(0,0,0,.5)}'\n      + '#dm:hover,#pin:hover{background:#333;border-color:#777}}';\n    document.head.appendChild(style);\n\n    var btn = document.createElement('button');\n    btn.id = 'dm'; btn.type = 'button'; btn.title = \"Basculer l'affichage\";\n    var pin = document.createElement('button');\n    pin.id = 'pin'; pin.type = 'button'; pin.title = 'Épingler sur le côté (pip)';\n    document.body.appendChild(pin);\n    document.body.appendChild(btn);\n\n    function has(avail, m){ return !!avail && avail.indexOf(m) >= 0; }\n\n    // Re-sync button visibility + label from the current host context.\n    function syncBtn(ctx){\n      ctx = ctx || {};\n      var avail = ctx.availableDisplayModes;\n      // Diagnostic: what does THIS host actually advertise? (inline/fullscreen/pip)\n      console.log('[mcp-app] displayMode=', ctx.displayMode,\n                  'availableDisplayModes=', avail);\n\n      // Fullscreen toggle button.\n      if (has(avail, 'fullscreen')){\n        btn.style.display = 'block';\n        btn.textContent = (ctx.displayMode === 'fullscreen') ? '⤡ Réduire' : '⤢ Agrandir';\n      } else { btn.style.display = 'none'; }\n\n      // Dedicated pip (\"pinned on side\") button — only if the host advertises pip.\n      if (has(avail, 'pip')){\n        pin.style.display = 'block';\n        pin.textContent = (ctx.displayMode === 'pip') ? '⤡ Détacher' : '📌 Épingler';\n      } else { pin.style.display = 'none'; }\n    }\n\n    onHostContext(syncBtn);\n\n    btn.addEventListener('click', function(){\n      var ctx = getHostContext() || {};\n      var inPanel = (ctx.displayMode === 'fullscreen' || ctx.displayMode === 'pip');\n      requestDisplayMode(inPanel ? 'inline' : 'fullscreen').catch(function(){});\n    });\n\n    pin.addEventListener('click', function(){\n      var ctx = getHostContext() || {};\n      requestDisplayMode(ctx.displayMode === 'pip' ? 'inline' : 'pip').catch(function(){});\n    });\n  }\n  if (document.body) mount();\n  else document.addEventListener('DOMContentLoaded', mount);\n})();`\n}\n","/**\n * HTML bundle for the agentproto \"agents — vue claire\" panel — the\n * `AGENTS_OVERVIEW_HTML` served as the `ui://agentproto_agents_overview/view`\n * resource. Mounted via the `agentproto_agents_overview` tool defined in\n * ./index.ts.\n *\n * The panel polls `session_list` every ~12s, then calls the host's\n * `summarize_session` tool (registered server-side by\n * @agentproto/runtime's summarize-session-tool.ts, NOT part of this\n * package — that tool is tied to the runtime's session ring-buffer/hot\n * path) for each visible session to fetch the plain sentence + state.\n */\n\nimport { panelBridgeScript } from \"../panel-bridge.js\"\n\n// ── HTML bundle (zero CDN, CSP-safe inline) ──────────────────────────────────\n\nexport const AGENTS_OVERVIEW_HTML = `<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>agents — vue claire</title>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\n:root{\n  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;\n  --text:#e6edf3;--text2:#8b949e;\n  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;\n}\nhtml,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}\n#app{display:flex;flex-direction:column;height:100%}\n#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}\n#hdr h1{font-size:13px;font-weight:600;letter-spacing:.02em}\n#hdr .sub{font-size:11px;color:var(--text2);margin-top:2px}\n#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:16px;line-height:1;padding:4px 6px;border-radius:6px}\n#refresh-btn:hover{color:var(--text);background:var(--bg3)}\n#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}\n.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}\n.card.s-todo{border-left-color:var(--purple)}\n.card.s-work{border-left-color:var(--green)}\n.card.s-wait{border-left-color:var(--yellow)}\n.card.s-done{border-left-color:var(--text2)}\n.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}\n.state{font-size:10px;font-weight:700;padding:2px 8px;border-radius:11px;white-space:nowrap;letter-spacing:.02em}\n.state.s-todo{background:rgba(188,140,255,.16);color:var(--purple)}\n.state.s-work{background:rgba(63,185,80,.16);color:var(--green)}\n.state.s-wait{background:rgba(210,153,34,.16);color:var(--yellow)}\n.state.s-done{background:rgba(139,148,158,.14);color:var(--text2)}\n.summary{font-size:12.5px;line-height:1.5;color:var(--text);word-break:break-word}\n.summary.muted{color:var(--text2);font-style:italic}\n.meta{font-size:10.5px;color:var(--text2);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}\n.dot{width:5px;height:5px;border-radius:50%;background:var(--text2);display:inline-block}\n#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}\n#empty .ico{font-size:30px}\n#statusbar{padding:5px 16px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}\n</style>\n</head>\n<body>\n<div id=\"app\">\n  <div id=\"hdr\">\n    <div>\n      <h1>Agents — vue claire</h1>\n      <div class=\"sub\">une carte par agent · résumé + état</div>\n    </div>\n    <button id=\"refresh-btn\" title=\"Rafraîchir\" onclick=\"doRefresh()\">&#8635;</button>\n  </div>\n  <div id=\"grid\"><div id=\"empty\"><div class=\"ico\">&#9889;</div><div>Connexion au bridge&#8230;</div></div></div>\n  <div id=\"statusbar\">Connexion&#8230;</div>\n</div>\n<script>\n${panelBridgeScript(\"agentproto-agents-overview\")}\n\n// ── State ──\nvar REFRESH_MS = 12000;\nvar pollTimer = null, polling = false;\nfunction esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }\nfunction setStatus(m){ document.getElementById('statusbar').textContent = m; }\n\nvar STATE_CLASS = {\n  'à traiter':'s-todo', 'au travail':'s-work', 'en attente':'s-wait', 'terminé':'s-done'\n};\nfunction stateClass(st){ return STATE_CLASS[st] || 's-wait'; }\n\nfunction fmtAgo(iso){\n  if (!iso) return '';\n  var t = Date.parse(iso);\n  if (isNaN(t)) return '';\n  var s = Math.max(0, Math.round((Date.now() - t) / 1000));\n  if (s < 60) return 'il y a ' + s + 's';\n  var m = Math.round(s/60);\n  if (m < 60) return 'il y a ' + m + 'min';\n  var h = Math.round(m/60);\n  return 'il y a ' + h + 'h';\n}\n\nfunction titleOf(s){\n  return s.label || s.name || (s.command ? s.command.split(/\\\\s+/)[0].split('/').pop() : null) || s.id.slice(0,8);\n}\n\nfunction render(sessions, summaries){\n  var grid = document.getElementById('grid');\n  if (!sessions.length){\n    grid.innerHTML = '<div id=\"empty\"><div class=\"ico\">&#128564;</div><div>Aucune session d\\\\'agent</div></div>';\n    return;\n  }\n  var html = '';\n  for (var i=0;i<sessions.length;i++){\n    var s = sessions[i];\n    var sum = summaries[s.id] || {};\n    var st = sum.state || 'en attente';\n    var cls = stateClass(st);\n    var summary = sum.summary || 'Résumé indisponible.';\n    var muted = !sum.summary ? ' muted' : '';\n    html += '<div class=\"card ' + cls + '\">'\n      + '<div class=\"card-top\">'\n      +   '<span class=\"title\">' + esc(titleOf(s)) + '</span>'\n      +   '<span class=\"state ' + cls + '\">' + esc(st) + '</span>'\n      + '</div>'\n      + '<div class=\"summary' + muted + '\">' + esc(summary) + '</div>'\n      + '<div class=\"meta\">'\n      +   '<span>' + esc(s.kind || '') + '</span><span class=\"dot\"></span>'\n      +   '<span>' + esc(s.status || '') + '</span>'\n      +   (s.lastOutputAt ? '<span class=\"dot\"></span><span>' + esc(fmtAgo(s.lastOutputAt)) + '</span>' : '')\n      + '</div>'\n      + '</div>';\n  }\n  grid.innerHTML = html;\n}\n\nfunction loadAndRender(){\n  return callTool('session_list', {kind:'all'}).then(function(data){\n    var all = data.sessions || [];\n    var agents = all.filter(function(s){ return s.kind === 'agent-cli'; });\n    // Render shells immediately, then fill summaries as they arrive.\n    var summaries = {};\n    render(agents, summaries);\n    setStatus(agents.length + ' agent' + (agents.length===1?'':'s') + ' · ' + new Date().toLocaleTimeString('fr-FR'));\n    return Promise.all(agents.map(function(s){\n      return callTool('summarize_session', {sessionId: s.id}).then(function(sum){\n        summaries[s.id] = sum;\n      }).catch(function(){ /* leave shell */ });\n    })).then(function(){ render(agents, summaries); });\n  }).catch(function(e){ setStatus('Erreur : ' + e.message); });\n}\n\nfunction doPoll(){\n  if (polling) return;\n  polling = true;\n  loadAndRender().then(function(){\n    polling = false;\n    pollTimer = setTimeout(doPoll, REFRESH_MS);\n  }).catch(function(){\n    polling = false;\n    pollTimer = setTimeout(doPoll, REFRESH_MS);\n  });\n}\nfunction doRefresh(){ if (pollTimer) clearTimeout(pollTimer); return loadAndRender().then(function(){ pollTimer = setTimeout(doPoll, REFRESH_MS); }); }\n\ninitBridge().then(loadAndRender).then(function(){\n  pollTimer = setTimeout(doPoll, REFRESH_MS);\n}).catch(function(e){\n  setStatus('Bridge : ' + e.message);\n  document.getElementById('grid').innerHTML = '<div id=\"empty\"><div class=\"ico\">&#9888;</div><div>Échec connexion bridge : ' + esc(e.message) + '</div></div>';\n});\n</script>\n</body>\n</html>`\n"]}