@agentproto/apps 0.10.0 → 0.12.0

package/dist/index.mjs

@@ -2888,8 +2888,29 @@ function panelBridgeScript(appName) {
 // 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.
@@ -2934,6 +2955,16 @@ window.addEventListener('message', function(evt){
   }
 });
 function initBridge(){
+  if (_isStandalone()){
+    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
+      // hidden (they only show for modes hostContext.availableDisplayModes
+      // lists) instead of rendering two buttons with nothing to switch to.
+      _setHostContext({displayMode: 'inline', availableDisplayModes: []});
+    });
+  }
   return rpcRequest('ui/initialize', {
     appInfo: {name: ${JSON.stringify(appName)}, version: '0.1.0'},
     appCapabilities: {availableDisplayModes: ['inline', 'fullscreen', 'pip']},
@@ -2942,14 +2973,25 @@ 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){
-  return rpcRequest('tools/call', {name: name, arguments: args || {}}).then(function(result){
+  var raw = _standaloneApp
+    ? _standaloneApp.callTool(name, args || {})
+    : rpcRequest('tools/call', {name: name, arguments: args || {}});
+  return raw.then(function(result){
     if (result.isError){
       var e = (result.content && result.content[0] && result.content[0].text) || 'tool error';
       throw new Error(e);
@@ -5490,14 +5532,89 @@ var liveSessionApp = defineApp({
   }
 });
 
+// src/session-chat/blob-embed.ts
+var BLOB_BOOT_MESSAGE_TYPE = "agentproto-blob-boot";
+function blobEmbedScript() {
+  return `// \u2500\u2500 Blob pass-through transform (shared: session-chat/blob-embed.ts) \u2500\u2500
+function _blobEscapeAttr(s){ return String(s).replace(/&/g, '&').replace(/"/g, '"'); }
+// Rewrite the fetched chat html so it works as a blob: document: <base> on
+// the deep link, a fetch/EventSource shim that carries the embed token to
+// the daemon origin, and the standalone bridge's ./tool-call made absolute.
+function transformChatHtmlForBlob(html, url, token){
+  var origin = new URL(url).origin;
+  var tc = new URL('./tool-call', url);
+  tc.searchParams.set('et', token);
+  // The app-visible query for the blob doc: the deep link's search minus the
+  // embed token (the token must not ride the app's visible params). The
+  // blob document's own location has no params, so this is the ONLY channel
+  // for ?session= / ?embed=1 \u2014 the app reads it via bootSearchParams().
+  var bootUrl = new URL(url);
+  bootUrl.searchParams.delete('et');
+  var bootQuery = bootUrl.search;
+  var shim = '<script>(function(){'
+    + 'try { window.parent.postMessage({ type: ${JSON.stringify(BLOB_BOOT_MESSAGE_TYPE)} }, "*"); } catch (_) {}'
+    + 'var ORIGIN = ' + JSON.stringify(origin) + ', TOKEN = ' + JSON.stringify(token) + ';'
+    + 'window.__AGENTPROTO_BASEURL__ = ORIGIN;'
+    + 'var _h = window.history, _rs = _h.replaceState.bind(_h), _ps = _h.pushState.bind(_h);'
+    + 'function _sameOrLoc(u){'
+    +   'try {'
+    +     'var x = new URL(u == null ? window.location.href : u, document.baseURI);'
+    +     'return x.origin === window.location.origin ? u : window.location.href;'
+    +   '} catch (_) { return window.location.href; }'
+    + '}'
+    + '_h.replaceState = function(s, t, u){'
+    +   'try { _rs(s, t, _sameOrLoc(u)); } catch (_) { try { _rs(s, t, window.location.href); } catch (_) {} }'
+    + '};'
+    + '_h.pushState = function(s, t, u){'
+    +   'try { _ps(s, t, _sameOrLoc(u)); } catch (_) { try { _ps(s, t, window.location.href); } catch (_) {} }'
+    + '};'
+    + 'window.__AGENTPROTO_BOOT_QUERY__ = ' + JSON.stringify(bootQuery) + ';'
+    + 'function withEt(u){'
+    +   'try {'
+    +     'var x = new URL(String(u), document.baseURI);'
+    +     'if (x.origin !== ORIGIN) return null;'
+    +     'if (!x.searchParams.has("et")) x.searchParams.set("et", TOKEN);'
+    +     'return x.href;'
+    +   '} catch (_) { return null; }'
+    + '}'
+    + 'var _fetch = window.fetch;'
+    + 'if (typeof _fetch === "function") {'
+    +   'window.fetch = function(input, init){'
+    +     'var r;'
+    +     'if (typeof Request !== "undefined" && input instanceof Request) {'
+    +       'r = withEt(input.url);'
+    +       'if (r) { try { input = new Request(r, input); } catch (_) {} }'
+    +     '} else {'
+    +       'r = withEt(input);'
+    +       'if (r) input = r;'
+    +     '}'
+    +     'return _fetch.call(window, input, init);'
+    +   '};'
+    + '}'
+    + 'var _ES = window.EventSource;'
+    + 'if (typeof _ES === "function") {'
+    +   'window.EventSource = function(u, cfg){ return new _ES(withEt(u) || u, cfg); };'
+    +   'window.EventSource.prototype = _ES.prototype;'
+    + '}'
+    + '})();<\\/script>';
+  var head = '<base href="' + _blobEscapeAttr(url) + '">' + shim;
+  var m = html.match(/<head[^>]*>/i);
+  var out = m
+    ? html.slice(0, m.index + m[0].length) + head + html.slice(m.index + m[0].length)
+    : head + html;
+  return out.split('fetch("./tool-call"').join('fetch(' + JSON.stringify(tc.href));
+}`;
+}
+
 // src/session-chat/panel.ts
 function escapeAttr(text) {
   return text.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
 function sessionChatEmbedHtml(initData) {
-  const url = initData.url;
-  const link = url != null ? `<a href="${escapeAttr(url)}" target="_blank" rel="noreferrer">open in a tab</a>` : "app not installed";
-  const iframe = url != null ? `<iframe id="chat" title="Session Chat" src="${escapeAttr(url)}"></iframe>` : "";
+  const url = typeof initData.url === "string" && initData.url ? initData.url : null;
+  const notInstalled = initData.installed === false;
+  const link = url != null ? `<a href="${escapeAttr(url)}" target="_blank" rel="noreferrer">open in a tab</a>` : notInstalled ? "app not installed" : "connecting\u2026";
+  const iframe = url != null ? `<iframe id="chat" title="Session Chat"></iframe>` : "";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5509,12 +5626,354 @@ function sessionChatEmbedHtml(initData) {
 html,body{height:100%;font-family:system-ui,-apple-system,sans-serif;background:#0d1117;color:#e6edf3;overflow:hidden}
 #bar{padding:6px 12px;font-size:12px;color:#8b949e;background:#161b22;border-bottom:1px solid #30363d}
 #bar a{color:#58a6ff}
-#chat{border:0;display:block;width:100%;height:calc(100% - 29px)}
+#mode{color:#6e7681}
+#stage{position:relative;height:calc(100% - 29px)}
+#chat{position:absolute;inset:0;z-index:2;border:0;display:block;width:100%;height:100%}
+#card{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
+#card h2{font-size:15px;font-weight:600}
+#card .sid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#8b949e;background:#161b22;border:1px solid #30363d;border-radius:4px;padding:2px 8px}
+#card p{font-size:12px;color:#8b949e;max-width:420px;line-height:1.5}
+#card a{display:inline-block;margin-top:2px;border:1px solid #30363d;background:#161b22;color:#58a6ff;font-size:13px;padding:7px 14px;border-radius:6px;text-decoration:none}
+#card a:hover{border-color:#58a6ff}
+#notice{display:none;max-width:560px;margin:0 auto;padding:48px 24px;line-height:1.6}
+#notice.show{display:block}
+#notice h1{font-size:18px;margin-bottom:12px}
+#notice code{background:#161b22;border:1px solid #30363d;border-radius:4px;padding:2px 6px;font-size:13px}
+#notice p{margin:8px 0;color:#8b949e;font-size:13px}
 </style>
 </head>
 <body>
-<div id="bar">Session Chat &#183; ${link}</div>
-${iframe}
+<div id="bar">Session Chat &#183; <span id="link">${link}</span><span id="mode"></span></div>
+<div id="stage">${iframe}<div id="card">
+  <h2>Session Chat</h2>
+  <div id="card-session" class="sid">&#8212;</div>
+  <p>Full embed isn't supported by this host &#8212; the chat opens in a browser tab.</p>
+  <a id="card-open" href="#" target="_blank" rel="noreferrer">Open chat</a>
+</div><div id="notice"${notInstalled ? ' class="show"' : ""}>
+  <h1>Session Chat is not installed</h1>
+  <p>This panel is a thin launcher for the <code>@agentik/session-chat</code> app &#8212;
+  it does not bundle the chat UI itself.</p>
+  <p>To use it, install the app into this daemon:</p>
+  <p><code>agentproto app install @agentik/session-chat</code></p>
+</div></div>
+<script>
+window.__APP_INIT__ = ${JSON.stringify(initData)};
+
+${panelBridgeScript("agentproto-session-chat")}
+
+${blobEmbedScript()}
+
+// \u2500\u2500 Session-chat launcher logic \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+var mountedUrl = (window.__APP_INIT__ && window.__APP_INIT__.url) || null;
+var pinnedSessionId = null;   // session named by the host's tool-result push
+var pendingUrl = null;        // url pushed by the host before the bridge was up
+var pendingNotInstalled = false;
+var bridged = false;
+var cardUrl = null;           // deep link once resolved (drives the card button)
+var cardSessionEl = document.getElementById('card-session');
+var cardOpenEl = document.getElementById('card-open');
+var mountGen = 0;             // bumps per mount(); async work checks it before touching the DOM
+var blobUrl = null;           // live object url of the blob-mounted chat, if any
+var blobBootTimer = null;
+var blobBootOk = false;
+
+function escapeHtml(text) {
+  return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+}
+
+function setMode(text) {
+  document.getElementById('mode').textContent = text ? ' \\u00b7 ' + text : '';
+  // The chat app is live inside the frame \u2014 the launcher bar (title, deep
+  // link, mount mode) is noise on top of the real surface. Hide it and let
+  // the frame own the full height. Only a failed mount (launcher card /
+  // not-installed notice) shows the bar again.
+  var bar = document.getElementById('bar');
+  var stage = document.getElementById('stage');
+  if (bar && stage) {
+    bar.style.display = text ? 'none' : '';
+    stage.style.height = text ? '100%' : 'calc(100% - 29px)';
+  }
+}
+
+// One fresh #chat frame on the stage (over the card), the previous one gone.
+function newFrame() {
+  var stage = document.getElementById('stage');
+  var old = document.getElementById('chat');
+  if (old) old.remove();
+  var frame = document.createElement('iframe');
+  frame.id = 'chat';
+  frame.title = 'Session Chat';
+  stage.insertBefore(frame, stage.firstChild);
+  return frame;
+}
+
+function revokeBlob() {
+  if (blobBootTimer) { clearTimeout(blobBootTimer); blobBootTimer = null; }
+  if (blobUrl) {
+    try { URL.revokeObjectURL(blobUrl); } catch (_) {}
+    blobUrl = null;
+  }
+}
+
+function mount(url) {
+  if (!url || url === mountedUrl) return;
+  mountedUrl = url;
+  var gen = ++mountGen;
+  revokeBlob();
+  document.getElementById('notice').className = '';
+  setCardUrl(url);
+  document.getElementById('link').innerHTML =
+    '<a href="' + escapeHtml(url) + '" target="_blank" rel="noreferrer">open in a tab</a>';
+  var tokened = withEmbedToken(url);
+  if (tokened === url) {
+    // No per-boot token baked in (standalone tab, VS Code HTTP-iframe panel):
+    // the direct frame already passes the daemon's origin checks, and the
+    // blob path's daemon calls would have nothing to carry \u2014 skip it.
+    mountDirect(url);
+    return;
+  }
+  mountBlob(url, tokened, gen).catch(function (err) {
+    if (gen !== mountGen) return;
+    // The fetch itself was refused (host connect-src not merging our
+    // connectDomains, PNA, daemon down, \u2026) \u2014 probe answered: no blob path.
+    console.warn('[session-chat] blob mount failed, falling back to a direct frame:',
+      err && err.message ? err.message : String(err));
+    mountDirect(url);
+  });
+}
+
+// Direct-src iframe of the deep link, with the block probe \u2192 launcher card
+// fallback. The terminal mount path when the blob one is unavailable.
+function mountDirect(url) {
+  var frame = newFrame();
+  frame.src = withEmbedToken(url);
+  setMode('direct frame');
+  armBlockProbe(frame);
+}
+
+// Blob pass-through: fetch the chat html through the embed token, rewrite it
+// for life as a blob: document (transformChatHtmlForBlob, blob-embed.ts) and
+// mount it \u2014 blob: passes a host frame-src that refuses the daemon origin.
+function mountBlob(url, tokened, gen) {
+  return fetch(tokened, { credentials: 'omit' }).then(function (res) {
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    return res.text();
+  }).then(function (html) {
+    if (gen !== mountGen) return;
+    var doc = transformChatHtmlForBlob(html, url, window.__AGENPROTO_EMBED_TOKEN__);
+    blobUrl = URL.createObjectURL(new Blob([doc], { type: 'text/html' }));
+    var frame = newFrame();
+    armBlobBootProbe(frame, url, gen);
+    frame.src = blobUrl;
+    setMode('embedded');
+  });
+}
+
+// The blob document's shim posts a boot ack as its first statement. No ack
+// within the settle window means the host refused the blob frame or its
+// inherited CSP killed the document's inline scripts \u2014 surface that through
+// the direct-frame path (whose own probe ends on the launcher card) rather
+// than leaving a silent blank.
+window.addEventListener('message', function (evt) {
+  var d = evt.data;
+  if (!d || typeof d !== 'object' || d.type !== ${JSON.stringify(BLOB_BOOT_MESSAGE_TYPE)}) return;
+  var frame = document.getElementById('chat');
+  if (!frame || evt.source !== frame.contentWindow) return;
+  blobBootOk = true;
+  if (blobBootTimer) { clearTimeout(blobBootTimer); blobBootTimer = null; }
+});
+
+function armBlobBootProbe(frame, url, gen) {
+  blobBootOk = false;
+  blobBootTimer = setTimeout(function () {
+    blobBootTimer = null;
+    if (gen !== mountGen || blobBootOk) return;
+    console.warn('[session-chat] blob document never booted (host CSP?), falling back to a direct frame');
+    revokeBlob();
+    frame.remove();
+    mountDirect(url);
+  }, 5000);
+}
+
+function showNotInstalled() {
+  var old = document.getElementById('chat');
+  if (old) old.remove();
+  revokeBlob();
+  setMode('');
+  mountedUrl = null;
+  document.getElementById('card').style.display = 'none';
+  document.getElementById('notice').className = 'show';
+  document.getElementById('link').textContent = 'app not installed';
+}
+
+// The body of an ext-apps tool-result notification, whichever wrapping
+// shape the host uses (params IS the CallToolResult, or nests it under
+// params.result). null for error results / non-JSON text.
+function parseToolResultBody(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 { return JSON.parse(item.text); } catch (_) { return null; }
+}
+
+// INLINED COPY of live-session/logic.ts extractToolResultSessionId \u2014 keep
+// in sync. \`sessionId\` (an agentproto_session_chat / live_session result)
+// wins over \`id\` (an agent_start result: the spawned session descriptor).
+function extractToolResultSessionId(params) {
+  var body = parseToolResultBody(params);
+  if (!body) return null;
+  if (typeof body.sessionId === 'string' && body.sessionId) return body.sessionId;
+  if (typeof body.id === 'string' && body.id) return body.id;
+  return null;
+}
+
+// \u2500\u2500 Embed-token refresh \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// The token baked into this page by registerMcpApps dies with the daemon
+// boot that minted it (runtime embed-tokens.ts), but hosts cache the
+// rendered widget: Claude Desktop keeps a conversation's srcdoc, so after
+// any daemon restart the cached page replays a dead token and every daemon
+// call 403s \u2014 the blob fetch fails, the direct frame is refused, and the
+// user is left on the launcher card forever. Every tool result carries a
+// live token (SessionChatOutput.embedToken), so adopt it before mounting.
+//
+// Only a render that WAS baked refreshes. A standalone tab or VS Code
+// HTTP-iframe panel still holds the literal placeholder and passes the
+// daemon's origin checks on its own; handing it a token would switch it
+// onto the blob path for no reason.
+function adoptEmbedToken(body) {
+  var cur = window.__AGENPROTO_EMBED_TOKEN__;
+  if (!cur || cur === '__AGENPROTO_EMBED_TOKEN__') return;
+  if (!body || typeof body.embedToken !== 'string' || !body.embedToken) return;
+  window.__AGENPROTO_EMBED_TOKEN__ = body.embedToken;
+}
+
+// Turn a session id into the installed app's deep link over the bridge.
+function resolveSession(sessionId) {
+  noteSession(sessionId);
+  return callTool('agentproto_session_chat', sessionId ? { sessionId: sessionId } : {})
+    .then(function(out) {
+      adoptEmbedToken(out);
+      if (out && out.installed && typeof out.url === 'string' && out.url) mount(out.url);
+      else showNotInstalled();
+    })
+    .catch(function(err) {
+      document.getElementById('link').textContent = 'bridge error: ' + (err && err.message ? err.message : String(err));
+    });
+}
+
+// \u2500\u2500 Launcher card (the frame-blocked fallback UI) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// The iframe mounts OVER the card. When the host's own CSP refuses the
+// frame (Claude Desktop / Codex widget frames run frame-src 'self' blob:
+// data: and do not yet merge csp.frameDomains), the frame stays on a
+// same-origin about:blank \u2014 readable, unlike the loaded cross-origin chat \u2014
+// and is removed after a settle window so the card becomes the interactive
+// surface.
+//
+// The anchor carries target="_blank" rel="noreferrer" as the fallback path,
+// but that is a plain no-op in hosts that sandbox the widget iframe without
+// allow-popups (observed in Claude Desktop's side chat) \u2014 a normal click
+// on such a host does nothing. Where the host advertises the capability
+// (McpUiInitializeResult.hostCapabilities.openLinks in the ext-apps spec,
+// captured by the bridge's getHostCapabilities()), route through the
+// host-mediated ui/open-link request instead, which is not subject to the
+// iframe's popup sandboxing.
+cardOpenEl.addEventListener('click', function (evt) {
+  if (!cardUrl) { evt.preventDefault(); return; }
+  if (getHostCapabilities() && getHostCapabilities().openLinks) {
+    evt.preventDefault();
+    openLink(cardUrl).catch(function () { window.open(cardUrl, '_blank'); });
+  }
+});
+
+function noteSession(id) {
+  if (id && cardSessionEl) cardSessionEl.textContent = id;
+}
+
+function setCardUrl(u) {
+  if (!u) return;
+  cardUrl = u;
+  cardOpenEl.setAttribute('href', u);
+}
+
+// A blocked frame never leaves about:blank (same-origin with this page \u2014
+// readable); the loaded chat is cross-origin (the probe throws). A readable
+// frame that is STILL blank when the settle window closes = blocked.
+function isBlank(frame) {
+  try { return frame.contentWindow.location.href === 'about:blank'; } catch (_) { return false; }
+}
+
+function armBlockProbe(frame) {
+  var settle = null;
+  function probe() {
+    if (settle) { clearTimeout(settle); settle = null; }
+    if (!isBlank(frame)) return;
+    // Still on about:blank right now \u2014 arm the settle window, but
+    // re-check when it closes: a slow (not blocked) load may have landed
+    // in the meantime, and only a frame STILL blank after the window gets
+    // removed. load firing in between clears this timeout above.
+    settle = setTimeout(function () {
+      settle = null;
+      if (isBlank(frame)) frame.remove();
+    }, 2000);
+  }
+  setTimeout(function () {
+    frame.addEventListener('load', probe);
+    probe();
+  }, 100);
+}
+
+// A url baked at render time (a host that re-renders per call with a real
+// initData) mounts on boot \u2014 through the same blob-first path as every
+// other mount, since the same opaque widget context frames it. The
+// pre-rendered #chat frame is replaced by mount()'s own.
+if (mountedUrl) {
+  var bootUrl = mountedUrl;
+  mountedUrl = null;
+  adoptEmbedToken(window.__APP_INIT__);
+  mount(bootUrl);
+}
+
+// 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.
+onHostNotification(function(method, params) {
+  if (method !== 'ui/notifications/tool-result') return;
+  var body = parseToolResultBody(params);
+  if (!body) return;
+  if (typeof body.url === 'string' && body.url && body.installed !== false) {
+    // Adopt now, not at mount time: the token doesn't depend on the bridge.
+    adoptEmbedToken(body);
+    if (bridged) mount(body.url); else pendingUrl = body.url;
+    return;
+  }
+  if (body.installed === false) {
+    if (bridged) showNotInstalled(); else pendingNotInstalled = true;
+    return;
+  }
+  var id = extractToolResultSessionId(params);
+  if (!id || id === pinnedSessionId) return;
+  pinnedSessionId = id;
+  noteSession(id);
+  if (bridged) resolveSession(id);
+});
+
+initBridge().then(function() {
+  bridged = true;
+  if (pendingUrl) { mount(pendingUrl); pendingUrl = null; return; }
+  if (pendingNotInstalled) { showNotInstalled(); return; }
+  if (mountedUrl) return;                       // rendered with a real url
+  var init = window.__APP_INIT__ || {};
+  if (init.installed === false) { showNotInstalled(); return; }
+  // No url baked in (static ui:// render): resolve over the bridge \u2014 the
+  // pinned session when the host named one, else the app's picker.
+  return resolveSession(pinnedSessionId);
+}).catch(function(err) {
+  document.getElementById('link').textContent = 'bridge error: ' + (err && err.message ? err.message : String(err));
+});
+</script>
 </body>
 </html>`;
 }
@@ -5561,7 +6020,7 @@ function sessionChatAppUrl(httpBaseUrl, sessionId) {
   params.set("embed", "1");
   return `${base}?${params.toString()}`;
 }
-function frameOrigin(httpBaseUrl) {
+function daemonOrigin(httpBaseUrl) {
   return new URL(httpBaseUrl).origin;
 }
 function makeSessionChatApp(ops) {
@@ -5571,12 +6030,27 @@ function makeSessionChatApp(ops) {
     title: "Session Chat",
     description: "Open the Session Chat app \u2014 a chat-thread view of any agentproto daemon session: full transcript replay, live follow-over SSE, and a composer that sends prompts into the same session. Requires the `@agentik/session-chat` app to be installed; without it the panel shows install instructions. Pass `sessionId` to deep-link straight into a known session.",
     inputSchema: sessionChatInputSchema,
-    execute: async (input) => ({
-      installed,
-      url: installed ? sessionChatAppUrl(ops.httpBaseUrl, input.sessionId) : null
-    }),
+    execute: async (input) => {
+      if (!installed) return { installed, url: null };
+      const token = ops.mintEmbedToken?.();
+      return {
+        installed,
+        url: sessionChatAppUrl(ops.httpBaseUrl, input.sessionId),
+        // Re-arms a cached widget whose baked token died with an earlier
+        // daemon boot (see SessionChatOutput.embedToken).
+        ...token ? { embedToken: token } : {}
+      };
+    },
     html: (initData) => sessionChatEmbedHtml(initData),
-    csp: { frameDomains: [frameOrigin(ops.httpBaseUrl)] }
+    // Spec-correct either way (ext-apps McpUiResourceMeta). Measured
+    // 2026-09-18: Claude Desktop / Codex do NOT merge frameDomains into
+    // their widget frame-src; whether they merge connectDomains is unknown,
+    // so the panel probes it at runtime (blob fetch → fallback) rather than
+    // assuming either way.
+    csp: {
+      frameDomains: [daemonOrigin(ops.httpBaseUrl)],
+      connectDomains: [daemonOrigin(ops.httpBaseUrl)]
+    }
   };
 }
 var sessionChatApp = defineApp({
@@ -5591,317 +6065,659 @@ var sessionChatApp = defineApp({
   }
 });
 
-// src/work-board/panel.ts
-var WORK_BOARD_HTML = `<!DOCTYPE html>
+// src/work-board/panel.generated.ts
+var WORK_BOARD_HTML_GENERATED = `<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>agentproto work board</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;flex-direction:column;height:100%}
-#toolbar{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg2);flex-shrink:0}
-#board-label{font-size:11px;color:var(--text2)}
-#board-id{font-weight:600;color:var(--text);font-size:12px}
-#board-input{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;font-family:inherit;width:220px}
-.tbtn{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}
-.tbtn:hover{background:var(--border)}
-#new-title{flex:1;min-width:120px;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;font-family:inherit}
-#columns{flex:1;display:flex;overflow-x:auto;overflow-y:hidden}
-.col{width:260px;min-width:220px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border)}
-.col-hdr{padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg2);font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between}
-.col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
-.card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 10px}
-.c-title{font-size:12px;font-weight:500;margin-bottom:4px;word-break:break-word}
-.c-id{font-size:10px;color:var(--text2);margin-bottom:6px}
-.c-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:6px}
-.tag{display:inline-block;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}
-.t-unclaimed{background:rgba(139,148,158,.15);color:var(--text2);border:1px dashed var(--text2)}
-.t-owner{background:rgba(88,166,255,.15);color:var(--blue)}
-.t-gate{background:rgba(63,185,80,.18);color:var(--green)}
-.t-self{background:rgba(210,153,34,.18);color:var(--yellow)}
-.t-human{background:rgba(88,166,255,.18);color:var(--blue)}
-.t-gated{background:rgba(139,148,158,.12);color:var(--text2)}
-.t-cancelled{background:rgba(139,148,158,.12);color:var(--text2)}
-.c-err{font-size:10px;color:var(--red);margin-bottom:6px;word-break:break-word}
-.c-actions{display:flex;flex-wrap:wrap;gap:4px}
-.abtn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:11px;font-family:inherit}
-.abtn:hover{background:var(--border)}
-.abtn.danger{border-color:var(--red);color:var(--red)}
-.abtn.primary{border-color:var(--green);color:var(--green)}
-#statusbar{padding:4px 12px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0}
-.empty{padding:16px 8px;color:var(--text2);font-size:11px;text-align:center}
-</style>
-</head>
-<body>
-<div id="app">
-  <div id="toolbar">
-    <span id="board-label">Board:</span>
-    <span id="board-id">\u2014</span>
-    <input id="board-input" type="text" placeholder="tree:&lt;sessionId&gt; or ws:&lt;slug&gt;">
-    <button class="tbtn" id="go-btn">Go</button>
-    <button class="tbtn" id="refresh-btn" title="Refresh">&#8635;</button>
-    <input id="new-title" type="text" placeholder="New task title&#8230;">
-    <button class="tbtn" id="add-btn">+ Add</button>
-  </div>
-  <div id="columns"></div>
-  <div id="statusbar">Connecting to bridge&#8230;</div>
-</div>
-<script>
-${panelBridgeScript("agentproto-work-board-panel")}
-
-// ============================================================
-// State
-// ============================================================
-
-var COLUMNS = [
-  {key: 'pending', label: 'Pending'},
-  {key: 'in_progress', label: 'In Progress'},
-  {key: 'done', label: 'Done'},
-  {key: 'failed', label: 'Failed'}
-];
-
-var boardId = null;
-var tasks = [];
-var pollTimer = null;
-var pollActive = false;
-
-function setStatus(msg) {
-  document.getElementById('statusbar').textContent = msg;
-}
-
-function esc(s) {
-  return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+<!-- PANEL_BRIDGE: replaced with the inline panelBridgeScript() output by
+     vite.config.ts's injectPanelBridge plugin \u2014 a classic (non-module)
+     script so its \`initBridge\`/\`callTool\` land as globals before the
+     deferred module script below runs. -->
+<script>// \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 = [];
+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);
 }
-
-// A cancelled task folds into the Failed column, tagged distinctly \u2014 v1
-// treats both as terminal scrap, and a fifth column for a rarely-used
-// status isn't worth the width.
-function columnOf(status) {
-  if (status === 'cancelled') return 'failed';
-  return status;
+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.
+  if (_hostContext){ try { cb(_hostContext); } catch(_) {} }
 }
-
-// ============================================================
-// Verification tell \u2014 never render an unverified done as gate-passed.
-// ============================================================
-
-function verificationTag(t) {
-  var v = t.verification;
-  if (v) {
-    if (v.kind === 'gate') return '<span class="tag t-gate">&#10003; gate</span>';
-    if (v.kind === 'self-report') return '<span class="tag t-self">self-report</span>';
-    if (v.kind === 'human') return '<span class="tag t-human">human</span>';
-  }
-  if (t.status === 'in_progress' && t.verify) {
-    return '<span class="tag t-gated">gated</span>';
+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(_) {}
   }
-  return '';
 }
-
-function ownerTag(t) {
-  if (!t.owner) return '<span class="tag t-unclaimed">Unclaimed</span>';
-  return '<span class="tag t-owner">' + esc(t.owner) + '</span>';
+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 || {}});
+  });
 }
-
-// ============================================================
-// Card actions \u2014 explicit status moves, no drag-and-drop (read-only-safe
-// first: see module docblock).
-// ============================================================
-
-function actionsFor(t) {
-  var a = [];
-  if (t.status === 'pending') {
-    if (!t.owner) a.push({label: 'Claim', action: 'claim', cls: 'primary'});
-    else a.push({label: 'Start', action: 'start', cls: 'primary'});
-    a.push({label: 'Cancel', action: 'cancel', cls: 'danger'});
-  } else if (t.status === 'in_progress') {
-    a.push({label: 'Done', action: 'done', cls: 'primary'});
-    a.push({label: 'Fail', action: 'fail', cls: 'danger'});
-    a.push({label: 'Release', action: 'release', cls: ''});
-    a.push({label: 'Cancel', action: 'cancel', cls: 'danger'});
-  } else if (t.status === 'done') {
-    a.push({label: 'Reopen', action: 'reopen', cls: ''});
-  }
-  return a;
-}
-
-function applyAction(taskId, action) {
-  var t = null;
-  for (var i = 0; i < tasks.length; i++) {
-    if (tasks[i].taskId === taskId) { t = tasks[i]; break; }
-  }
-  if (!t) return;
-  var p;
-  if (action === 'claim') {
-    p = callTool('task_claim', {taskId: t.taskId, rev: t.rev});
-  } else if (action === 'start') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, status: 'in_progress'});
-  } else if (action === 'done') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, status: 'done'});
-  } else if (action === 'fail') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, status: 'failed'});
-  } else if (action === 'release') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, owner: null});
-  } else if (action === 'cancel') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, status: 'cancelled'});
-  } else if (action === 'reopen') {
-    p = callTool('task_update', {taskId: t.taskId, rev: t.rev, status: 'pending'});
-  } else {
+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;
   }
-  p.then(function (result) {
-    if (result && result.conflict) {
-      setStatus('Someone else moved "' + t.title + '" first \u2014 refreshed.');
-    } else if (result && result.error) {
-      setStatus('Action failed: ' + result.error);
-    } else {
-      setStatus('Updated "' + t.title + '".');
+  if (msg.method){
+    if (msg.method === 'ui/notifications/host-context-changed'){
+      _setHostContext(msg.params || {});
     }
-    return loadBoard();
-  }).catch(function (e) {
-    setStatus('Action failed: ' + e.message);
-  });
-}
-
-// ============================================================
-// Render
-// ============================================================
-
-function renderCard(t) {
-  var html = '<div class="card" data-taskid="' + esc(t.taskId) + '">';
-  html += '<div class="c-title">' + esc(t.title) + '</div>';
-  html += '<div class="c-id">#' + esc(t.taskId) + '</div>';
-  html += '<div class="c-row">' + ownerTag(t) + verificationTag(t);
-  if (t.status === 'cancelled') html += '<span class="tag t-cancelled">cancelled</span>';
-  html += '</div>';
-  if (t.lastVerifyError) {
-    html += '<div class="c-err">verify failed: ' + esc(t.lastVerifyError) + '</div>';
-  }
-  var actions = actionsFor(t);
-  if (actions.length > 0) {
-    html += '<div class="c-actions">';
-    for (var i = 0; i < actions.length; i++) {
-      var a = actions[i];
-      html += '<button class="abtn ' + a.cls + '" data-taskid="' + esc(t.taskId) + '" data-action="' + a.action + '">' + a.label + '</button>';
+    for (var i = 0; i < _notifyHandlers.length; i++){
+      try { _notifyHandlers[i](msg.method, msg.params || {}); } catch(_) {}
     }
-    html += '</div>';
-  }
-  html += '</div>';
-  return html;
-}
-
-function render() {
-  document.getElementById('board-id').textContent = boardId || '\u2014';
-  if (!document.getElementById('board-input').value) {
-    document.getElementById('board-input').value = boardId || '';
   }
-  var el = document.getElementById('columns');
-  var html = '';
-  for (var c = 0; c < COLUMNS.length; c++) {
-    var col = COLUMNS[c];
-    var rows = tasks.filter(function (t) { return columnOf(t.status) === col.key; });
-    html += '<div class="col"><div class="col-hdr"><span>' + col.label + '</span><span>' + rows.length + '</span></div><div class="col-body">';
-    if (rows.length === 0) {
-      html += '<div class="empty">No tasks</div>';
-    } else {
-      for (var i = 0; i < rows.length; i++) html += renderCard(rows[i]);
-    }
-    html += '</div></div>';
+});
+function initBridge(){
+  if (_isStandalone()){
+    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
+      // hidden (they only show for modes hostContext.availableDisplayModes
+      // lists) instead of rendering two buttons with nothing to switch to.
+      _setHostContext({displayMode: 'inline', availableDisplayModes: []});
+    });
   }
-  el.innerHTML = html;
-}
-
-// ============================================================
-// Data
-// ============================================================
-
-function loadBoard() {
-  var args = {includeClosed: true, full: true};
-  if (boardId) args.boardId = boardId;
-  return callTool('task_list', args).then(function (data) {
-    boardId = data.boardId || boardId;
-    tasks = data.tasks || [];
-    render();
-    setStatus(tasks.length + ' task' + (tasks.length === 1 ? '' : 's') + ' \xB7 ' + new Date().toLocaleTimeString());
-  }).catch(function (e) {
-    setStatus('Error: ' + e.message);
+  return rpcRequest('ui/initialize', {
+    appInfo: {name: "agentproto-work-board-panel", 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);
+    // 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 doPoll() {
-  if (pollActive) return;
-  pollActive = true;
-  loadBoard().then(function () {
-    pollActive = false;
-    pollTimer = setTimeout(doPoll, 4000);
-  }).catch(function () {
-    pollActive = false;
-    pollTimer = setTimeout(doPoll, 4000);
+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 || {})
+    : rpcRequest('tools/call', {name: name, arguments: args || {}});
+  return raw.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);
   });
 }
 
-// ============================================================
-// Toolbar wiring
-// ============================================================
+// \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);
 
-document.getElementById('columns').addEventListener('click', function (evt) {
-  var btn = evt.target.closest ? evt.target.closest('button[data-action]') : null;
-  if (!btn) return;
-  applyAction(btn.getAttribute('data-taskid'), btn.getAttribute('data-action'));
-});
+    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);
 
-document.getElementById('refresh-btn').addEventListener('click', function () {
-  loadBoard();
-});
+    function has(avail, m){ return !!avail && avail.indexOf(m) >= 0; }
 
-document.getElementById('go-btn').addEventListener('click', function () {
-  var v = document.getElementById('board-input').value.trim();
-  if (!v) return;
-  boardId = v;
-  loadBoard();
-});
+    // 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);
 
-document.getElementById('add-btn').addEventListener('click', function () {
-  var input = document.getElementById('new-title');
-  var title = input.value.trim();
-  if (!title) return;
-  var args = {title: title};
-  if (boardId) args.boardId = boardId;
-  callTool('task_create', args).then(function (result) {
-    if (result && result.error) {
-      setStatus('Create failed: ' + result.error);
-      return;
+      // 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'; }
     }
-    input.value = '';
-    setStatus('Created "' + title + '".');
-    return loadBoard();
-  }).catch(function (e) {
-    setStatus('Create failed: ' + e.message);
-  });
-});
 
-// ============================================================
-// Boot
-// ============================================================
+    onHostContext(syncBtn);
 
-initBridge().then(function () {
-  return loadBoard();
-}).then(function () {
-  pollTimer = setTimeout(doPoll, 4000);
-}).catch(function (e) {
-  setStatus('Bridge error: ' + e.message);
-});
-</script>
+    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);
+})();</script>
+  <script>(function() {
+  "use strict";
+  const COLUMN_STATUSES = ["pending", "in_progress", "done", "failed"];
+  const COLUMN_LABELS = {
+    pending: "Pending",
+    in_progress: "In Progress",
+    done: "Done",
+    failed: "Failed"
+  };
+  function esc(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function columnOf(status) {
+    return status === "cancelled" ? "failed" : status;
+  }
+  function verificationTag(task) {
+    const v = task.verification;
+    if (v) {
+      if (v.kind === "gate") return '<span class="tag t-gate">&#10003; gate</span>';
+      if (v.kind === "self-report") return '<span class="tag t-self">self-report</span>';
+      if (v.kind === "human") return '<span class="tag t-human">human</span>';
+    }
+    if (task.status === "in_progress" && task.verify) {
+      return '<span class="tag t-gated">gated</span>';
+    }
+    return "";
+  }
+  function ownerTag(task) {
+    if (!task.owner) return '<span class="tag t-unclaimed">Unclaimed</span>';
+    return \`<span class="tag t-owner">\${esc(task.owner)}</span>\`;
+  }
+  function actionsFor(task) {
+    if (task.status === "pending") {
+      return [
+        task.owner ? { label: "Start", action: "start", cls: "primary" } : { label: "Claim", action: "claim", cls: "primary" },
+        { label: "Cancel", action: "cancel", cls: "danger" }
+      ];
+    }
+    if (task.status === "in_progress") {
+      return [
+        { label: "Done", action: "done", cls: "primary" },
+        { label: "Fail", action: "fail", cls: "danger" },
+        { label: "Release", action: "release", cls: "" },
+        { label: "Cancel", action: "cancel", cls: "danger" }
+      ];
+    }
+    if (task.status === "done") {
+      return [{ label: "Reopen", action: "reopen", cls: "" }];
+    }
+    return [];
+  }
+  function renderCard(task) {
+    let html = \`<div class="card" data-taskid="\${esc(task.taskId)}">\`;
+    html += \`<div class="c-title">\${esc(task.title)}</div>\`;
+    html += \`<div class="c-id">#\${esc(task.taskId)}</div>\`;
+    html += \`<div class="c-row">\${ownerTag(task)}\${verificationTag(task)}\`;
+    if (task.status === "cancelled") html += '<span class="tag t-cancelled">cancelled</span>';
+    html += "</div>";
+    if (task.lastVerifyError) {
+      html += \`<div class="c-err">verify failed: \${esc(task.lastVerifyError)}</div>\`;
+    }
+    const actions = actionsFor(task);
+    if (actions.length > 0) {
+      html += '<div class="c-actions">';
+      for (const a of actions) {
+        html += \`<button class="abtn \${a.cls}" data-taskid="\${esc(task.taskId)}" data-action="\${a.action}">\${a.label}</button>\`;
+      }
+      html += "</div>";
+    }
+    html += "</div>";
+    return html;
+  }
+  function renderColumns(tasks2) {
+    let html = "";
+    for (const status of COLUMN_STATUSES) {
+      const rows = tasks2.filter((t) => columnOf(t.status) === status);
+      html += \`<div class="col"><div class="col-hdr"><span>\${COLUMN_LABELS[status]}</span><span>\${rows.length}</span></div><div class="col-body">\`;
+      html += rows.length === 0 ? '<div class="empty">No tasks</div>' : rows.map(renderCard).join("");
+      html += "</div></div>";
+    }
+    return html;
+  }
+  function getEl(id) {
+    const el = document.getElementById(id);
+    if (!el) throw new Error(\`work board: missing #\${id}\`);
+    return el;
+  }
+  function getInput(id) {
+    const el = document.getElementById(id);
+    if (!(el instanceof HTMLInputElement)) throw new Error(\`work board: missing input #\${id}\`);
+    return el;
+  }
+  function isCardAction(value) {
+    switch (value) {
+      case "claim":
+      case "start":
+      case "done":
+      case "fail":
+      case "release":
+      case "cancel":
+      case "reopen":
+        return true;
+      default:
+        return false;
+    }
+  }
+  let boardId = null;
+  let tasks = [];
+  let pollActive = false;
+  function boot() {
+    const columnsEl = getEl("columns");
+    const statusbarEl = getEl("statusbar");
+    const boardIdEl = getEl("board-id");
+    const boardInputEl = getInput("board-input");
+    const newTitleEl = getInput("new-title");
+    function setStatus(msg) {
+      statusbarEl.textContent = msg;
+    }
+    function render() {
+      boardIdEl.textContent = boardId ?? "\u2014";
+      if (!boardInputEl.value) boardInputEl.value = boardId ?? "";
+      columnsEl.innerHTML = renderColumns(tasks);
+    }
+    function findTask(taskId) {
+      return tasks.find((t) => t.taskId === taskId);
+    }
+    function loadBoard() {
+      const args = {
+        includeClosed: true,
+        full: true,
+        ...boardId ? { boardId } : {}
+      };
+      return callTool("task_list", args).then((data) => {
+        boardId = data.boardId ?? boardId;
+        tasks = data.tasks ?? [];
+        render();
+        setStatus(\`\${tasks.length} task\${tasks.length === 1 ? "" : "s"} \xB7 \${(/* @__PURE__ */ new Date()).toLocaleTimeString()}\`);
+      }).catch((e) => {
+        setStatus(\`Error: \${e.message}\`);
+      });
+    }
+    function applyAction(taskId, action) {
+      const task = findTask(taskId);
+      if (!task) return;
+      const base = { taskId: task.taskId, rev: task.rev };
+      let promise;
+      if (action === "claim") {
+        promise = callTool("task_claim", base);
+      } else if (action === "start") {
+        promise = callTool("task_update", { ...base, status: "in_progress" });
+      } else if (action === "done") {
+        promise = callTool("task_update", { ...base, status: "done" });
+      } else if (action === "fail") {
+        promise = callTool("task_update", { ...base, status: "failed" });
+      } else if (action === "release") {
+        promise = callTool("task_update", { ...base, owner: null });
+      } else if (action === "cancel") {
+        promise = callTool("task_update", { ...base, status: "cancelled" });
+      } else {
+        promise = callTool("task_update", { ...base, status: "pending" });
+      }
+      promise.then((result) => {
+        if ("conflict" in result) {
+          setStatus(\`Someone else moved "\${task.title}" first \u2014 refreshed.\`);
+        } else if ("error" in result) {
+          setStatus(\`Action failed: \${result.error}\`);
+        } else {
+          setStatus(\`Updated "\${task.title}".\`);
+        }
+        return loadBoard();
+      }).catch((e) => {
+        setStatus(\`Action failed: \${e.message}\`);
+      });
+    }
+    function doPoll() {
+      if (pollActive) return;
+      pollActive = true;
+      loadBoard().finally(() => {
+        pollActive = false;
+        setTimeout(doPoll, 4e3);
+      });
+    }
+    columnsEl.addEventListener("click", (evt) => {
+      if (!(evt.target instanceof Element)) return;
+      const btn = evt.target.closest("button[data-action]");
+      if (!(btn instanceof HTMLButtonElement)) return;
+      const taskId = btn.getAttribute("data-taskid");
+      const action = btn.getAttribute("data-action");
+      if (!taskId || !action || !isCardAction(action)) return;
+      applyAction(taskId, action);
+    });
+    getEl("refresh-btn").addEventListener("click", () => {
+      void loadBoard();
+    });
+    getEl("go-btn").addEventListener("click", () => {
+      const value = boardInputEl.value.trim();
+      if (!value) return;
+      boardId = value;
+      void loadBoard();
+    });
+    getEl("add-btn").addEventListener("click", () => {
+      const title = newTitleEl.value.trim();
+      if (!title) return;
+      const args = boardId ? { title, boardId } : { title };
+      callTool("task_create", args).then((result) => {
+        if (result.error) {
+          setStatus(\`Create failed: \${result.error}\`);
+          return void 0;
+        }
+        newTitleEl.value = "";
+        setStatus(\`Created "\${title}".\`);
+        return loadBoard();
+      }).catch((e) => {
+        setStatus(\`Create failed: \${e.message}\`);
+      });
+    });
+    initBridge().then(() => loadBoard()).then(() => {
+      setTimeout(doPoll, 4e3);
+    }).catch((e) => {
+      setStatus(\`Bridge error: \${e.message}\`);
+    });
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+})();</script>
+  <style rel="stylesheet" crossorigin>/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Semantic tokens + runtime mapping sheets.
+
+   Every rule below the next section reads ONLY the --wb-* custom
+   properties. Each one resolves through TWO mapping sheets, chosen at
+   PAINT time via plain CSS var() fallback \u2014 no build step, no JS, so a
+   host that swaps its theme live (VS Code) is never frozen at whatever
+   theme happened to be active when this bundle was built:
+
+     1. embedded  \u2014 VS Code injects a live --vscode-* custom-property set
+        into the webview and swaps it on theme change. Whenever the
+        relevant --vscode-* variable exists, it wins \u2014 in a VS Code
+        \`srcdoc\` relay panel AND (structurally identically) any other host
+        that happened to expose the same names, though none is known to.
+     2. standalone \u2014 the agentproto brand tokens (see
+        projects/agentproto/site/src/app/brand.css), used whenever no
+        --vscode-* variable is set \u2014 a plain MCP-Apps host or the daemon's
+        own \`/apps/.../ui\` tab. \`--phos\`/\`--amber\`/\`--crimson\` are
+        THEME-INVARIANT in brand.css (the phosphor terminal palette), so
+        they're identical in both blocks below; the rest follow brand.css's
+        light/dark split via \`prefers-color-scheme\` \u2014 a standalone tab has
+        no host to pick a theme for it, unlike VS Code's own.
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+:root {
+  --wb-bg: var(--vscode-editor-background, #f5f6f3);
+  --wb-surface: var(--vscode-sideBar-background, #ffffff);
+  --wb-ink: var(--vscode-editor-foreground, #171a1e);
+  --wb-ink-muted: var(--vscode-descriptionForeground, #5c6470);
+  --wb-border: var(--vscode-panel-border, #dde0da);
+  --wb-accent: var(--vscode-button-background, #0f62fe);
+
+  /* Status colors \u2014 phos/amber/crimson are the theme-invariant terminal
+     palette in brand.css, so light and dark standalone fallbacks match. */
+  --wb-status-pending: var(--vscode-descriptionForeground, #5c6470);
+  --wb-status-in-progress: var(--vscode-charts-yellow, #f0b429);
+  --wb-status-done: var(--vscode-charts-green, #3edc81);
+  --wb-status-failed: var(--vscode-charts-red, #fa4d56);
+  --wb-status-cancelled: var(--vscode-descriptionForeground, #5c6470);
+  --wb-status-cancelled-weak: color-mix(in srgb, var(--wb-status-cancelled) 55%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --wb-bg: var(--vscode-editor-background, #101214);
+    --wb-surface: var(--vscode-sideBar-background, #16191d);
+    --wb-ink: var(--vscode-editor-foreground, #e8eaed);
+    --wb-ink-muted: var(--vscode-descriptionForeground, #99a2ad);
+    --wb-border: var(--vscode-panel-border, #272c33);
+    --wb-accent: var(--vscode-button-background, #4589ff);
+
+    --wb-status-pending: var(--vscode-descriptionForeground, #99a2ad);
+    --wb-status-in-progress: var(--vscode-charts-yellow, #f0b429);
+    --wb-status-done: var(--vscode-charts-green, #3edc81);
+    --wb-status-failed: var(--vscode-charts-red, #fa4d56);
+    --wb-status-cancelled: var(--vscode-descriptionForeground, #99a2ad);
+    --wb-status-cancelled-weak: color-mix(in srgb, var(--wb-status-cancelled) 55%, transparent);
+  }
+}
+
+/* \u2500\u2500 Base \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\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 */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  background: var(--wb-bg);
+  color: var(--wb-ink);
+  overflow: hidden;
+}
+
+.mono {
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
+}
+
+#app { display: flex; flex-direction: column; height: 100%; }
+
+#toolbar {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--wb-border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--wb-surface);
+  flex-shrink: 0;
+}
+#board-label { font-size: 11px; color: var(--wb-ink-muted); }
+#board-id { font-weight: 600; color: var(--wb-ink); font-size: 12px; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace; }
+#board-input {
+  background: var(--wb-bg);
+  border: 1px solid var(--wb-border);
+  color: var(--wb-ink);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  width: 220px;
+}
+.tbtn {
+  background: var(--wb-bg);
+  border: 1px solid var(--wb-border);
+  color: var(--wb-ink);
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+}
+.tbtn:hover { background: var(--wb-border); }
+#new-title {
+  flex: 1;
+  min-width: 120px;
+  background: var(--wb-bg);
+  border: 1px solid var(--wb-border);
+  color: var(--wb-ink);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+#columns { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; }
+.col {
+  width: 260px;
+  min-width: 220px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--wb-border);
+}
+.col-hdr {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--wb-border);
+  background: var(--wb-surface);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--wb-ink-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: flex;
+  justify-content: space-between;
+}
+.col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
+
+.card {
+  background: var(--wb-surface);
+  border: 1px solid var(--wb-border);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+.c-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; word-break: break-word; }
+.c-id {
+  font-size: 10px;
+  color: var(--wb-ink-muted);
+  margin-bottom: 6px;
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
+}
+.c-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
+
+.tag { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap; }
+.t-unclaimed { background: color-mix(in srgb, var(--wb-ink-muted) 15%, transparent); color: var(--wb-ink-muted); border: 1px dashed var(--wb-ink-muted); }
+.t-owner { background: color-mix(in srgb, var(--wb-accent) 15%, transparent); color: var(--wb-accent); }
+
+/* Verification tell: gate solid green, self-report amber outline, human
+   blue, a declared verify with no verification yet grey "gated" \u2014 never
+   render an unverified done as gate-passed (see render.ts's verificationTag). */
+.t-gate { background: color-mix(in srgb, var(--wb-status-done) 18%, transparent); color: var(--wb-status-done); }
+.t-self { background: transparent; color: var(--wb-status-in-progress); border: 1px solid var(--wb-status-in-progress); }
+.t-human { background: color-mix(in srgb, var(--wb-accent) 18%, transparent); color: var(--wb-accent); }
+.t-gated { background: color-mix(in srgb, var(--wb-ink-muted) 12%, transparent); color: var(--wb-ink-muted); }
+.t-cancelled {
+  background: color-mix(in srgb, var(--wb-status-cancelled) 10%, transparent);
+  color: var(--wb-status-cancelled-weak);
+  border: 1px dashed color-mix(in srgb, var(--wb-status-cancelled) 40%, transparent);
+}
+
+.c-err { font-size: 10px; color: var(--wb-status-failed); margin-bottom: 6px; word-break: break-word; }
+.c-actions { display: flex; flex-wrap: wrap; gap: 4px; }
+.abtn {
+  background: var(--wb-bg);
+  border: 1px solid var(--wb-border);
+  color: var(--wb-ink);
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+}
+.abtn:hover { background: var(--wb-border); }
+.abtn.danger { border-color: var(--wb-status-failed); color: var(--wb-status-failed); }
+.abtn.primary { border-color: var(--wb-status-done); color: var(--wb-status-done); }
+
+#statusbar {
+  padding: 4px 12px;
+  font-size: 11px;
+  color: var(--wb-ink-muted);
+  border-top: 1px solid var(--wb-border);
+  background: var(--wb-surface);
+  flex-shrink: 0;
+}
+.empty { padding: 16px 8px; color: var(--wb-ink-muted); font-size: 11px; text-align: center; }</style>
+</head>
+<body>
+<div id="app">
+  <div id="toolbar">
+    <span id="board-label">Board:</span>
+    <span id="board-id">\u2014</span>
+    <input id="board-input" type="text" placeholder="tree:&lt;sessionId&gt; or ws:&lt;slug&gt;">
+    <button class="tbtn" id="go-btn">Go</button>
+    <button class="tbtn" id="refresh-btn" title="Refresh">&#8635;</button>
+    <input id="new-title" type="text" placeholder="New task title&#8230;">
+    <button class="tbtn" id="add-btn">+ Add</button>
+  </div>
+  <div id="columns"></div>
+  <div id="statusbar">Connecting to bridge&#8230;</div>
+</div>
 </body>
-</html>`;
+</html>
+`;
+
+// src/work-board/panel.ts
+var WORK_BOARD_APP_ID = "@agentproto/work-board";
+var WORK_BOARD_TOOL_ID = "agentproto_work_board";
+var WORK_BOARD_UI_TOOLS = [
+  "task_list",
+  "task_claim",
+  "task_update",
+  "task_create"
+];
+var WORK_BOARD_HTML = WORK_BOARD_HTML_GENERATED;
 
 // src/work-board/index.ts
 var workBoardInputSchema = z.object({
@@ -5911,7 +6727,7 @@ var workBoardInputSchema = z.object({
 });
 function makeWorkBoardApp(ops) {
   return {
-    id: "agentproto_work_board",
+    id: WORK_BOARD_TOOL_ID,
     title: "Work Board",
     description: "Open the agentproto work board \u2014 a kanban over the daemon's Task ledger (columns: pending/in_progress/done/failed, cancelled folded into failed). Swimlane is the ledger's own board id (`tree:<root>` or `ws:<slug>`). Each card shows its owner (or \"Unclaimed\") and the verification tell \u2014 a gate-passed done reads visually distinct from a self-reported one. Pass `boardId` to open a specific board.",
     inputSchema: workBoardInputSchema,
@@ -5920,14 +6736,14 @@ function makeWorkBoardApp(ops) {
   };
 }
 var workBoardApp = defineApp({
-  id: "@agentproto/work-board",
+  id: WORK_BOARD_APP_ID,
   name: "Work Board",
   description: "Open the agentproto work board \u2014 a kanban over the daemon's Task ledger, scoped by board id (`tree:<rootSessionId>` or `ws:<slug>`), with an explicit status action per card.",
   agents: [],
   ui: {
     html: WORK_BOARD_HTML,
     title: "Work Board",
-    tools: ["task_list", "task_claim", "task_update", "task_create"]
+    tools: [...WORK_BOARD_UI_TOOLS]
   }
 });