@agentproto/apps 0.11.0 → 0.13.0

package/dist/work-board.mjs

@@ -22,12 +22,29 @@ var WORK_BOARD_HTML_GENERATED = `<!DOCTYPE html>
 // JSON-RPC 2.0 over window.parent.postMessage \xB7 spec 2026-01-26
 var _nextId = 1, _pending = {}, _notifyHandlers = [];
 var _hostContext = null, _hostContextHandlers = [];
+var _hostCaps = null;
 var _standaloneApp = null;
 function _isStandalone(){
   return window.parent === window && !!window.McpApp && typeof window.McpApp.connect === 'function';
 }
+// \u2500\u2500 Per-boot embed token (runtime embed-tokens.ts) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// Panels that iframe the daemon's standalone app host carry this proof so
+// GET /apps/:appId/ui?embed=1&et=... can drop its anti-framing headers for
+// MCP-Apps hosts whose widget context is an opaque origin (Claude Desktop).
+// registerMcpApps replaces the placeholder with a real per-boot token when
+// serving the panel as a resource; every other render (tests, standalone
+// tab, VS Code HTTP-iframe panel \u2014 the latter two already pass
+// iframeEmbedAllowed's origin checks) keeps the literal, and
+// withEmbedToken() then degrades to an identity function.
+window.__AGENPROTO_EMBED_TOKEN__ = "__AGENPROTO_EMBED_TOKEN__";
+function withEmbedToken(url){
+  var t = window.__AGENPROTO_EMBED_TOKEN__;
+  if (!t || t === '__AGENPROTO_EMBED_TOKEN__') return url;
+  return url + (url.indexOf('?') >= 0 ? '&' : '?') + 'et=' + encodeURIComponent(t);
+}
 function post(msg){ window.parent.postMessage(msg, '*'); }
 function getHostContext(){ return _hostContext; }
+function getHostCapabilities(){ return _hostCaps; }
 function onHostContext(cb){
   _hostContextHandlers.push(cb);
   // Replay the last context so a late subscriber isn't stuck blind.
@@ -76,7 +93,7 @@ function initBridge(){
     return window.McpApp.connect().then(function(conn){
       _standaloneApp = conn;
       // No host to advertise a hostContext \u2014 default to inline with no
-      // other modes available, which keeps the #dm/#pin toggle buttons
+      // other modes available, which keeps the display-mode toggle buttons
       // hidden (they only show for modes hostContext.availableDisplayModes
       // lists) instead of rendering two buttons with nothing to switch to.
       _setHostContext({displayMode: 'inline', availableDisplayModes: []});
@@ -90,12 +107,20 @@ function initBridge(){
     // The initialize result carries the initial hostContext (displayMode +
     // availableDisplayModes) \u2014 capture it before notifying the host.
     if (result && result.hostContext) _setHostContext(result.hostContext);
+    // McpUiInitializeResult.hostCapabilities (ext-apps spec) \u2014 e.g. openLinks,
+    // "Host supports opening external URLs". Captured once, read via
+    // getHostCapabilities() by panels that need to branch on it.
+    if (result && result.hostCapabilities) _hostCaps = result.hostCapabilities;
     rpcNotify('ui/notifications/initialized', {});
   });
 }
 function requestDisplayMode(mode){
   return rpcRequest('ui/request-display-mode', {mode: mode});
 }
+function openLink(url){
+  if (_standaloneApp && typeof _standaloneApp.openLink === 'function') return _standaloneApp.openLink(url);
+  return rpcRequest('ui/open-link', {url: url});
+}
 function callTool(name, args){
   var raw = _standaloneApp
     ? _standaloneApp.callTool(name, args || {})
@@ -110,71 +135,302 @@ function callTool(name, args){
   });
 }
 
-// \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}}';
+// \u2500\u2500 Display-mode toggle (shared: @agentproto/app-client/display-mode) \u2500\u2500
+// The installer is inlined verbatim (it is self-contained and idempotent),
+// then handed this panel's own JSON-RPC plumbing. NO auto-request: the
+// panel stays inline until the user clicks, and the buttons only appear for
+// the modes the host advertises in hostContext.availableDisplayModes.
+(function () {
+  if (window.AgentprotoUI && window.AgentprotoUI.installDisplayMode) return;
+  window.AgentprotoUI = window.AgentprotoUI || {};
+
+  var STYLE_ID = "agentproto-display-mode-style";
+  var BAR_ID = "agentproto-display-mode-bar";
+  // Gap between the host's safe area (or the viewport edge) and the button.
+  var EDGE_GAP = 8;
+
+  // Glyph + accessible label per mode. The button is an icon; the words go
+  // to title/aria-label so the control stays compact without going mute to
+  // a screen reader.
+  var LABELS = {
+    fullscreen: {
+      on: "\\u2921", off: "\\u2922",
+      onLabel: "R\\u00e9duire", offLabel: "Agrandir"
+    },
+    pip: {
+      on: "\\u2921", off: "\\uD83D\\uDCCC",
+      onLabel: "D\\u00e9tacher", offLabel: "\\u00c9pingler sur le c\\u00f4t\\u00e9 (pip)"
+    }
+  };
+
+  // Every colour and both offsets resolve through an app-overridable custom
+  // property first, so an app can restyle/reposition the button with a
+  // stylesheet and never touch this script. The safe-area vars are what the
+  // host's own chrome feeds (see applyInsets), sitting UNDER the app's.
+  function ensureStyle() {
+    if (!document.head || document.getElementById(STYLE_ID)) return;
+    var style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent =
+      "#" + BAR_ID + "{position:fixed;display:flex;gap:6px;align-items:center;z-index:10;" +
+      "top:var(--agentproto-dm-top,var(--agentproto-dm-safe-top,8px));" +
+      "right:var(--agentproto-dm-right,var(--agentproto-dm-safe-right,8px))}" +
+      ".agentproto-dm-btn{display:inline-flex;align-items:center;justify-content:center;" +
+      "box-sizing:border-box;width:28px;height:28px;padding:0;margin:0;border-radius:6px;" +
+      "cursor:pointer;-webkit-appearance:none;appearance:none;" +
+      "font:600 14px/1 system-ui,-apple-system,sans-serif;" +
+      "border:1px solid var(--agentproto-dm-border,#d0d0d0);" +
+      "background:var(--agentproto-dm-bg,#fff);" +
+      "color:var(--agentproto-dm-fg,#1a1a1a);" +
+      "box-shadow:0 1px 4px rgba(0,0,0,.18)}" +
+      ".agentproto-dm-btn:hover{filter:brightness(.95)}" +
+      ".agentproto-dm-btn:focus-visible{outline:2px solid var(--agentproto-dm-fg,#1a1a1a);outline-offset:2px}" +
+      ".agentproto-dm-btn[data-theme=\\"dark\\"]{border-color:var(--agentproto-dm-border,#555);background:var(--agentproto-dm-bg,#2a2a2a);color:var(--agentproto-dm-fg,#f0f0f0);box-shadow:0 1px 4px rgba(0,0,0,.5)}" +
+      "@media (prefers-color-scheme:dark){" +
+      ".agentproto-dm-btn:not([data-theme=\\"light\\"]){border-color:var(--agentproto-dm-border,#555);background:var(--agentproto-dm-bg,#2a2a2a);color:var(--agentproto-dm-fg,#f0f0f0);box-shadow:0 1px 4px rgba(0,0,0,.5)}}";
     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(){});
-    });
+  function ready(fn) {
+    if (document.body) fn();
+    else document.addEventListener("DOMContentLoaded", fn);
+  }
 
-    pin.addEventListener('click', function(){
-      var ctx = getHostContext() || {};
-      requestDisplayMode(ctx.displayMode === 'pip' ? 'inline' : 'pip').catch(function(){});
-    });
+  function metaToggle() {
+    var el = document.querySelector('meta[name="agentproto-display-toggle"]');
+    if (!el) return "";
+    return (el.getAttribute("content") || "").toLowerCase().replace(/^\\s+|\\s+$/g, "");
   }
-  if (document.body) mount();
-  else document.addEventListener('DOMContentLoaded', mount);
-})();</script>
+
+  function ensureBar() {
+    var bar = document.getElementById(BAR_ID);
+    if (bar) return bar;
+    bar = document.createElement("div");
+    bar.id = BAR_ID;
+    document.body.appendChild(bar);
+    return bar;
+  }
+
+  function px(v) {
+    return typeof v === "number" && isFinite(v) && v > 0 ? v : 0;
+  }
+
+  window.AgentprotoUI.installDisplayMode = function (api, opts) {
+    api = api || {};
+    opts = opts || {};
+
+    var ctx = {};
+    var listeners = [];
+    var buttons = [];
+    // Modes the host has refused once. Checked before availability, so a
+    // later host-context-changed can never resurrect a dead button.
+    var refused = {};
+    var loggedKeys = false;
+
+    var setting = opts.toggle || metaToggle() || "auto";
+    var optimistic = setting === "optimistic";
+    var autoMount = setting !== "none";
+
+    function get() {
+      return ctx.displayMode || "inline";
+    }
+
+    function available() {
+      var a = ctx.availableDisplayModes;
+      return a && a.slice ? a.slice() : [];
+    }
+
+    function supports(mode) {
+      if (refused[mode]) return false;
+      var a = ctx.availableDisplayModes;
+      if (a && a.indexOf && a.indexOf(mode) >= 0) return true;
+      // Optimistic: the host advertises nothing (Claude Desktop, some
+      // embedders) but may still honour the request. Fullscreen only \u2014 pip
+      // is niche enough that guessing at it is just noise.
+      return optimistic && mode === "fullscreen";
+    }
+
+    // Host chrome to stay clear of. Published as custom properties rather
+    // than inline styles so an app's own --agentproto-dm-top/right still
+    // wins (an inline style would beat any stylesheet it could write).
+    function applyInsets() {
+      var insets = ctx.safeAreaInsets || {};
+      var root = document.documentElement;
+      if (!root || !root.style || !root.style.setProperty) return;
+      root.style.setProperty("--agentproto-dm-safe-top", (px(insets.top) + EDGE_GAP) + "px");
+      root.style.setProperty("--agentproto-dm-safe-right", (px(insets.right) + EDGE_GAP) + "px");
+    }
+
+    function syncButton(btn) {
+      var mode = btn.getAttribute("data-agentproto-dm") || "fullscreen";
+      var labels = LABELS[mode] || LABELS.fullscreen;
+      var active = get() === mode;
+      btn.style.display = supports(mode) ? "" : "none";
+      btn.textContent = active ? labels.on : labels.off;
+      var label = active ? labels.onLabel : labels.offLabel;
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      btn.setAttribute("aria-pressed", active ? "true" : "false");
+      if (ctx.theme === "dark" || ctx.theme === "light") btn.setAttribute("data-theme", ctx.theme);
+      else btn.removeAttribute("data-theme");
+    }
+
+    function sync() {
+      applyInsets();
+      for (var i = buttons.length - 1; i >= 0; i--) {
+        // An app that removed its inline toggle stops being our problem.
+        if (buttons[i].isConnected === false) { buttons.splice(i, 1); continue; }
+        syncButton(buttons[i]);
+      }
+    }
+
+    function emit() {
+      var mode = get();
+      for (var i = 0; i < listeners.length; i++) {
+        try { listeners[i](mode, ctx); } catch (_) {}
+      }
+    }
+
+    // host-context-changed carries only the changed keys \u2014 merge, matching
+    // the official ext-apps App behaviour.
+    function setContext(next) {
+      if (!next || typeof next !== "object") return;
+      for (var k in next) {
+        if (Object.prototype.hasOwnProperty.call(next, k)) ctx[k] = next[k];
+      }
+      sync();
+      emit();
+    }
+
+    function retire(mode) {
+      refused[mode] = true;
+      sync();
+    }
+
+    function request(mode) {
+      var pending;
+      try {
+        pending = api.requestDisplayMode
+          ? api.requestDisplayMode(mode)
+          : Promise.reject(new Error("display mode: no host"));
+      } catch (err) {
+        pending = Promise.reject(err);
+      }
+      return Promise.resolve(pending).then(function (result) {
+        // McpUiRequestDisplayModeResult.mode is the mode actually set, and
+        // the spec lets it differ from the one asked for \u2014 so a host that
+        // answers "still inline" is a refusal, not a success.
+        var settled = (result && result.mode) || mode;
+        if (optimistic && mode !== "inline" && settled !== mode) {
+          retire(mode);
+          throw new Error("host refused display mode: " + mode);
+        }
+        // Hosts are not required to follow up with host-context-changed \u2014
+        // trust the result so the glyph flips either way.
+        setContext({ displayMode: settled });
+        return settled;
+      }, function (err) {
+        if (optimistic && mode !== "inline") retire(mode);
+        throw err;
+      });
+    }
+
+    function makeButton(mode) {
+      var btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "agentproto-dm-btn";
+      // Stable id for the floating pair (styling hooks, tests). An app that
+      // mounts extra inline toggles gets unnamed ones rather than duplicates.
+      var id = mode === "fullscreen"
+        ? "agentproto-display-mode"
+        : "agentproto-display-mode-" + mode;
+      if (!document.getElementById(id)) btn.id = id;
+      btn.setAttribute("data-agentproto-dm", mode);
+      btn.style.display = "none";
+      btn.addEventListener("click", function () {
+        var cur = get();
+        // Same rule both copies had: anything that isn't inline collapses
+        // back to inline, so the button is always an escape hatch.
+        var inPanel = cur === "fullscreen" || cur === "pip";
+        request(inPanel ? "inline" : mode)["catch"](function () {});
+      });
+      return btn;
+    }
+
+    function mountToggle(el, mode) {
+      ensureStyle();
+      mode = mode || "fullscreen";
+      var btn = makeButton(mode);
+      if (el) el.appendChild(btn);
+      else ensureBar().appendChild(btn);
+      buttons.push(btn);
+      syncButton(btn);
+      return btn;
+    }
+
+    function onChange(cb) {
+      if (typeof cb !== "function") return function () {};
+      listeners.push(cb);
+      try { cb(get(), ctx); } catch (_) {}
+      return function () {
+        var i = listeners.indexOf(cb);
+        if (i >= 0) listeners.splice(i, 1);
+      };
+    }
+
+    ready(function () {
+      ensureStyle();
+      // Only the first installer in a document owns the floating bar: a
+      // built-in panel served standalone gets the injected window.McpApp
+      // bridge's copy AND its own, and two stacked buttons is a bug.
+      if (autoMount && !document.getElementById(BAR_ID)) {
+        ensureBar();
+        mountToggle(null, "pip");
+        mountToggle(null, "fullscreen");
+      }
+      sync();
+    });
+
+    // The diagnostic both copies had, now on BOTH paths: it used to exist
+    // only in the built-in panel bridge, so an installed app debugged in
+    // Claude Desktop (which advertises no fullscreen, hence no button)
+    // printed nothing at all and left the user with no way to tell "the
+    // host refuses" from "the toggle is broken".
+    function observe(next) {
+      console.log('[mcp-app] displayMode=', next && next.displayMode,
+                  'availableDisplayModes=', next && next.availableDisplayModes);
+      setContext(next);
+      // What ELSE does this host send? Keys only, once \u2014 a host context can
+      // carry toolInfo (the instantiating tool call's arguments) and other
+      // host-private fields, so the names are the diagnostic and the values
+      // stay out of the console.
+      if (!loggedKeys && next && typeof next === "object") {
+        loggedKeys = true;
+        var keys = [];
+        for (var k in ctx) {
+          if (Object.prototype.hasOwnProperty.call(ctx, k)) keys.push(k);
+        }
+        console.log('[mcp-app] hostContext keys=', keys.sort().join(','));
+      }
+    }
+
+    if (typeof api.onHostContext === "function") api.onHostContext(observe);
+    else if (typeof api.getHostContext === "function") observe(api.getHostContext());
+
+    return {
+      get: get,
+      available: available,
+      request: request,
+      onChange: onChange,
+      mountToggle: mountToggle
+    };
+  };
+})();
+var displayMode = window.AgentprotoUI.installDisplayMode({
+  getHostContext: getHostContext,
+  onHostContext: onHostContext,
+  requestDisplayMode: requestDisplayMode
+});</script>
   <script>(function() {
   "use strict";
   const COLUMN_STATUSES = ["pending", "in_progress", "done", "failed"];