@fingerskier/augment 0.5.0 → 0.5.1

package/dist/mcp/apps.js

@@ -36,57 +36,57 @@ export function escapeInlineJson(value) {
 export function escapeInlineScript(js) {
     return js.replace(/<\/script/gi, "<\\/script");
 }
-const SNIPPET_CSS = `
-:root {
-  --bg: #0f1419; --panel: #161b22; --line: #2a313c; --fg: #e6edf3; --muted: #8b949e;
-  --accent: #58a6ff; --danger: #f85149; --ok: #3fb950;
-  --spec: #58a6ff; --arch: #bc8cff; --issue: #f85149; --todo: #d29922; --work: #3fb950;
-}
-:root[data-theme="light"] {
-  --bg: #ffffff; --panel: #f6f8fa; --line: #d0d7de; --fg: #1f2328; --muted: #59636e;
-  --accent: #0969da; --danger: #d1242f; --ok: #1a7f37;
-}
-* { box-sizing: border-box; }
-html, body { margin: 0; }
-body {
-  background: var(--color-background-primary, var(--bg));
-  color: var(--color-text-primary, var(--fg));
-  font: 13px/1.5 var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
-  padding: 12px 14px;
-}
-h1 { font-size: 15px; margin: 0; }
-h2 { font-size: 12px; margin: 14px 0 6px; color: var(--color-text-secondary, var(--muted));
-  text-transform: uppercase; letter-spacing: .4px; }
-.head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
-.head .brand { color: var(--accent); font-weight: 700; letter-spacing: .5px; font-size: 12px; }
-.head .totals { color: var(--color-text-secondary, var(--muted)); font-size: 12px; margin-left: auto; }
-.muted { color: var(--color-text-secondary, var(--muted)); }
-.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; }
-.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden;
-  border: 1px solid var(--color-border-primary, var(--line)); background: var(--color-background-secondary, var(--panel)); }
-.bar > span { display: block; height: 100%; }
-.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; }
-.dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 5px; }
-.chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.chip { border: 1px solid var(--color-border-primary, var(--line)); border-radius: 10px;
-  padding: 1px 9px; font-size: 12px; background: var(--color-background-secondary, var(--panel)); }
-.chip b { color: var(--accent); font-weight: 600; margin-left: 4px; }
-.rows .row { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
-.rows .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.kind-pill { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px;
-  font-weight: 600; color: #04121f; }
-.spark { width: 100%; height: 56px; display: block; }
-.footer { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
-.footer .stamp { color: var(--color-text-secondary, var(--muted)); font-size: 11px; }
-button {
-  font: inherit; color: var(--color-text-primary, var(--fg));
-  background: var(--color-background-secondary, var(--panel));
-  border: 1px solid var(--color-border-primary, var(--line)); border-radius: 6px;
-  padding: 3px 10px; cursor: pointer;
-}
-button:hover { border-color: var(--accent); }
-button[hidden] { display: none; }
-#status { color: var(--color-text-secondary, var(--muted)); }
+const SNIPPET_CSS = `
+:root {
+  --bg: #0f1419; --panel: #161b22; --line: #2a313c; --fg: #e6edf3; --muted: #8b949e;
+  --accent: #58a6ff; --danger: #f85149; --ok: #3fb950;
+  --spec: #58a6ff; --arch: #bc8cff; --issue: #f85149; --todo: #d29922; --work: #3fb950;
+}
+:root[data-theme="light"] {
+  --bg: #ffffff; --panel: #f6f8fa; --line: #d0d7de; --fg: #1f2328; --muted: #59636e;
+  --accent: #0969da; --danger: #d1242f; --ok: #1a7f37;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body {
+  background: var(--color-background-primary, var(--bg));
+  color: var(--color-text-primary, var(--fg));
+  font: 13px/1.5 var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  padding: 12px 14px;
+}
+h1 { font-size: 15px; margin: 0; }
+h2 { font-size: 12px; margin: 14px 0 6px; color: var(--color-text-secondary, var(--muted));
+  text-transform: uppercase; letter-spacing: .4px; }
+.head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.head .brand { color: var(--accent); font-weight: 700; letter-spacing: .5px; font-size: 12px; }
+.head .totals { color: var(--color-text-secondary, var(--muted)); font-size: 12px; margin-left: auto; }
+.muted { color: var(--color-text-secondary, var(--muted)); }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; }
+.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden;
+  border: 1px solid var(--color-border-primary, var(--line)); background: var(--color-background-secondary, var(--panel)); }
+.bar > span { display: block; height: 100%; }
+.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; }
+.dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 5px; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip { border: 1px solid var(--color-border-primary, var(--line)); border-radius: 10px;
+  padding: 1px 9px; font-size: 12px; background: var(--color-background-secondary, var(--panel)); }
+.chip b { color: var(--accent); font-weight: 600; margin-left: 4px; }
+.rows .row { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
+.rows .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.kind-pill { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px;
+  font-weight: 600; color: #04121f; }
+.spark { width: 100%; height: 56px; display: block; }
+.footer { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
+.footer .stamp { color: var(--color-text-secondary, var(--muted)); font-size: 11px; }
+button {
+  font: inherit; color: var(--color-text-primary, var(--fg));
+  background: var(--color-background-secondary, var(--panel));
+  border: 1px solid var(--color-border-primary, var(--line)); border-radius: 6px;
+  padding: 3px 10px; cursor: pointer;
+}
+button:hover { border-color: var(--accent); }
+button[hidden] { display: none; }
+#status { color: var(--color-text-secondary, var(--muted)); }
 `;
 /**
  * Shared snippet runtime: XSS-safe DOM helpers plus a minimal MCP Apps bridge.
@@ -96,442 +96,442 @@ button[hidden] { display: none; }
  * JSON island (used by the classic MCP-UI embedded variant) when no host bridge
  * answers. All dynamic values reach the DOM via textContent, never markup.
  */
-const SNIPPET_RUNTIME_JS = String.raw `
-  var KIND_COLORS = { SPEC: "#58a6ff", ARCH: "#bc8cff", ISSUE: "#f85149", TODO: "#d29922", WORK: "#3fb950" };
-
-  function $(sel) { return document.querySelector(sel); }
-
-  function h(tag, props) {
-    var node = document.createElement(tag);
-    applyProps(node, props);
-    for (var i = 2; i < arguments.length; i += 1) appendKid(node, arguments[i]);
-    return node;
-  }
-
-  function s(tag, props) {
-    var node = document.createElementNS("http://www.w3.org/2000/svg", tag);
-    for (var key in (props || {})) node.setAttribute(key, props[key]);
-    for (var i = 2; i < arguments.length; i += 1) appendKid(node, arguments[i]);
-    return node;
-  }
-
-  function applyProps(node, props) {
-    for (var key in (props || {})) {
-      var value = props[key];
-      if (key === "class") node.className = value;
-      else if (key === "text") node.textContent = value;
-      else if (key.indexOf("on") === 0 && typeof value === "function") node.addEventListener(key.slice(2), value);
-      else if (value !== undefined && value !== null) node.setAttribute(key, value);
-    }
-  }
-
-  function appendKid(node, kid) {
-    node.append(kid && kid.nodeType ? kid : document.createTextNode(kid == null ? "" : kid));
-  }
-
-  function kindPill(kind) {
-    return h("span", { class: "kind-pill", style: "background:" + (KIND_COLORS[kind] || "#8b949e") }, kind);
-  }
-
-  function augmentApp(appName, render) {
-    var nextId = 1;
-    var pending = {};
-    // Renderers that paint to a canvas (cytoscape) can't read live CSS
-    // variables, so they register a callback here to recompute colors and
-    // repaint when the host theme changes. Reset on every render.
-    var themeHandlers = [];
-    var bridge = {
-      connected: false,
-      callTool: null,
-      onThemeChange: function (handler) { themeHandlers.push(handler); },
-    };
-    var lastData = null;
-    // Top-level (no embedding frame) means window.parent === window: any
-    // handshake we posted would loop straight back to ourselves.
-    var topLevel = window.parent === window;
-    // Hold outbound notifications until the handshake settles (spec ordering:
-    // nothing before ui/notifications/initialized) or we give up on a host.
-    var canNotify = false;
-
-    function post(message) { window.parent.postMessage(message, "*"); }
-    function notify(method, params) {
-      var message = { jsonrpc: "2.0", method: method };
-      if (params) message.params = params;
-      post(message);
-    }
-    function request(method, params, timeoutMs) {
-      return new Promise(function (resolve, reject) {
-        var id = nextId; nextId += 1;
-        var timer = timeoutMs
-          ? setTimeout(function () { delete pending[id]; reject(new Error(method + " timed out")); }, timeoutMs)
-          : null;
-        pending[id] = function (result, error) {
-          if (timer) clearTimeout(timer);
-          if (error) reject(new Error(error.message || "host error"));
-          else resolve(result);
-        };
-        post({ jsonrpc: "2.0", id: id, method: method, params: params || {} });
-      });
-    }
-
-    function applyHostContext(context) {
-      if (!context) return;
-      if (context.theme) document.documentElement.setAttribute("data-theme", context.theme);
-      var variables = context.styles && context.styles.variables;
-      if (variables) {
-        for (var name in variables) {
-          if (name.indexOf("--") === 0) document.documentElement.style.setProperty(name, String(variables[name]));
-        }
-      }
-      // Now that the effective colors are updated, let canvas renderers repaint
-      // (CSS variables never reach a <canvas>, so they must do it themselves).
-      for (var i = 0; i < themeHandlers.length; i += 1) {
-        try { themeHandlers[i](); } catch (error) { /* a broken repaint must not wedge the frame */ }
-      }
-    }
-
-    function reportSize() {
-      if (!canNotify) return;
-      notify("ui/notifications/size-changed", {
-        width: document.documentElement.scrollWidth,
-        height: document.documentElement.scrollHeight,
-      });
-    }
-
-    function setStatus(text) {
-      var status = $("#status");
-      if (status) status.textContent = text;
-    }
-
-    function show(data) {
-      lastData = data;
-      themeHandlers = []; // the previous render's handlers reference stale nodes
-      var app = $("#app");
-      app.replaceChildren();
-      try {
-        render(app, data, bridge);
-      } catch (error) {
-        app.replaceChildren(h("p", { class: "muted" }, "Failed to render: " + (error && error.message)));
-      }
-      requestAnimationFrame(reportSize);
-    }
-
-    function showMessage(text) {
-      var app = $("#app");
-      app.replaceChildren(h("p", { class: "muted", id: "status" }, text));
-      requestAnimationFrame(reportSize);
-    }
-
-    window.addEventListener("message", function (event) {
-      // Only the embedding host may drive this view: drop self-echoes when
-      // rendered top-level and anything a co-resident frame tries to inject.
-      if (topLevel || event.source !== window.parent) return;
-      var message = event.data;
-      if (!message || message.jsonrpc !== "2.0") return;
-      if (message.id !== undefined && message.method === undefined) {
-        var handler = pending[message.id];
-        if (handler) { delete pending[message.id]; handler(message.result, message.error); }
-        return;
-      }
-      if (message.method === "ui/notifications/tool-result") {
-        var result = message.params || {};
-        if (result.structuredContent) {
-          show(result.structuredContent);
-        } else {
-          // Text-only results (e.g. "no such project") must still surface
-          // instead of leaving the frame on "Waiting for tool result…".
-          var texts = [];
-          var blocks = result.content || [];
-          for (var i = 0; i < blocks.length; i += 1) {
-            if (blocks[i] && blocks[i].type === "text") texts.push(blocks[i].text);
-          }
-          showMessage(texts.length ? texts.join("\n") : "Tool returned no renderable data.");
-        }
-        return;
-      }
-      if (message.method === "ui/notifications/host-context-changed") {
-        applyHostContext(message.params);
-        requestAnimationFrame(reportSize);
-        return;
-      }
-      if (message.id !== undefined && message.method !== undefined) {
-        if (message.method === "ping" || message.method === "ui/resource-teardown") {
-          post({ jsonrpc: "2.0", id: message.id, result: {} });
-        } else {
-          post({ jsonrpc: "2.0", id: message.id, error: { code: -32601, message: "Method not found" } });
-        }
-      }
-    });
-
-    var inlineNode = document.getElementById("augment-data");
-    var inlineData = null;
-    if (inlineNode) {
-      try { inlineData = JSON.parse(inlineNode.textContent); } catch (error) { inlineData = null; }
-    }
-    var hasInlineData = Boolean(inlineData);
-    if (inlineData) show(inlineData);
-
-    if (topLevel) {
-      if (!lastData) setStatus("No MCP Apps host detected and no inline data.");
-    } else {
-      // No hard deadline on the handshake: a slow host may still answer after
-      // the status flips, and the pending entry stays live so a late response
-      // completes the connection instead of being dropped.
-      var statusTimer = setTimeout(function () {
-        if (bridge.connected) return;
-        if (hasInlineData) {
-          // Classic embedded variant only: no SEP-1865 handshake occurs, yet
-          // the inline content is already shown, so a size hint is safe and
-          // useful. A conformant host completes ui/initialize first (clearing
-          // this timer), so it never receives an out-of-lifecycle notification.
-          canNotify = true;
-          reportSize();
-        } else {
-          setStatus("No MCP Apps host detected and no inline data.");
-        }
-      }, 3000);
-      request("ui/initialize", {
-        protocolVersion: "2026-01-26",
-        appInfo: { name: appName, version: "1" },
-        appCapabilities: {},
-      }).then(function (result) {
-        clearTimeout(statusTimer);
-        bridge.connected = true;
-        bridge.callTool = function (name, args) {
-          return request("tools/call", { name: name, arguments: args || {} }, 120000);
-        };
-        notify("ui/notifications/initialized");
-        canNotify = true;
-        if (result) applyHostContext(result.hostContext);
-        reportSize();
-        if (!lastData) setStatus("Waiting for tool result…");
-      });
-    }
-
-    if (window.ResizeObserver) {
-      var scheduled = false;
-      new ResizeObserver(function () {
-        if (scheduled) return;
-        scheduled = true;
-        requestAnimationFrame(function () { scheduled = false; reportSize(); });
-      }).observe(document.body);
-    }
-  }
+const SNIPPET_RUNTIME_JS = String.raw `
+  var KIND_COLORS = { SPEC: "#58a6ff", ARCH: "#bc8cff", ISSUE: "#f85149", TODO: "#d29922", WORK: "#3fb950" };
+
+  function $(sel) { return document.querySelector(sel); }
+
+  function h(tag, props) {
+    var node = document.createElement(tag);
+    applyProps(node, props);
+    for (var i = 2; i < arguments.length; i += 1) appendKid(node, arguments[i]);
+    return node;
+  }
+
+  function s(tag, props) {
+    var node = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    for (var key in (props || {})) node.setAttribute(key, props[key]);
+    for (var i = 2; i < arguments.length; i += 1) appendKid(node, arguments[i]);
+    return node;
+  }
+
+  function applyProps(node, props) {
+    for (var key in (props || {})) {
+      var value = props[key];
+      if (key === "class") node.className = value;
+      else if (key === "text") node.textContent = value;
+      else if (key.indexOf("on") === 0 && typeof value === "function") node.addEventListener(key.slice(2), value);
+      else if (value !== undefined && value !== null) node.setAttribute(key, value);
+    }
+  }
+
+  function appendKid(node, kid) {
+    node.append(kid && kid.nodeType ? kid : document.createTextNode(kid == null ? "" : kid));
+  }
+
+  function kindPill(kind) {
+    return h("span", { class: "kind-pill", style: "background:" + (KIND_COLORS[kind] || "#8b949e") }, kind);
+  }
+
+  function augmentApp(appName, render) {
+    var nextId = 1;
+    var pending = {};
+    // Renderers that paint to a canvas (cytoscape) can't read live CSS
+    // variables, so they register a callback here to recompute colors and
+    // repaint when the host theme changes. Reset on every render.
+    var themeHandlers = [];
+    var bridge = {
+      connected: false,
+      callTool: null,
+      onThemeChange: function (handler) { themeHandlers.push(handler); },
+    };
+    var lastData = null;
+    // Top-level (no embedding frame) means window.parent === window: any
+    // handshake we posted would loop straight back to ourselves.
+    var topLevel = window.parent === window;
+    // Hold outbound notifications until the handshake settles (spec ordering:
+    // nothing before ui/notifications/initialized) or we give up on a host.
+    var canNotify = false;
+
+    function post(message) { window.parent.postMessage(message, "*"); }
+    function notify(method, params) {
+      var message = { jsonrpc: "2.0", method: method };
+      if (params) message.params = params;
+      post(message);
+    }
+    function request(method, params, timeoutMs) {
+      return new Promise(function (resolve, reject) {
+        var id = nextId; nextId += 1;
+        var timer = timeoutMs
+          ? setTimeout(function () { delete pending[id]; reject(new Error(method + " timed out")); }, timeoutMs)
+          : null;
+        pending[id] = function (result, error) {
+          if (timer) clearTimeout(timer);
+          if (error) reject(new Error(error.message || "host error"));
+          else resolve(result);
+        };
+        post({ jsonrpc: "2.0", id: id, method: method, params: params || {} });
+      });
+    }
+
+    function applyHostContext(context) {
+      if (!context) return;
+      if (context.theme) document.documentElement.setAttribute("data-theme", context.theme);
+      var variables = context.styles && context.styles.variables;
+      if (variables) {
+        for (var name in variables) {
+          if (name.indexOf("--") === 0) document.documentElement.style.setProperty(name, String(variables[name]));
+        }
+      }
+      // Now that the effective colors are updated, let canvas renderers repaint
+      // (CSS variables never reach a <canvas>, so they must do it themselves).
+      for (var i = 0; i < themeHandlers.length; i += 1) {
+        try { themeHandlers[i](); } catch (error) { /* a broken repaint must not wedge the frame */ }
+      }
+    }
+
+    function reportSize() {
+      if (!canNotify) return;
+      notify("ui/notifications/size-changed", {
+        width: document.documentElement.scrollWidth,
+        height: document.documentElement.scrollHeight,
+      });
+    }
+
+    function setStatus(text) {
+      var status = $("#status");
+      if (status) status.textContent = text;
+    }
+
+    function show(data) {
+      lastData = data;
+      themeHandlers = []; // the previous render's handlers reference stale nodes
+      var app = $("#app");
+      app.replaceChildren();
+      try {
+        render(app, data, bridge);
+      } catch (error) {
+        app.replaceChildren(h("p", { class: "muted" }, "Failed to render: " + (error && error.message)));
+      }
+      requestAnimationFrame(reportSize);
+    }
+
+    function showMessage(text) {
+      var app = $("#app");
+      app.replaceChildren(h("p", { class: "muted", id: "status" }, text));
+      requestAnimationFrame(reportSize);
+    }
+
+    window.addEventListener("message", function (event) {
+      // Only the embedding host may drive this view: drop self-echoes when
+      // rendered top-level and anything a co-resident frame tries to inject.
+      if (topLevel || event.source !== window.parent) return;
+      var message = event.data;
+      if (!message || message.jsonrpc !== "2.0") return;
+      if (message.id !== undefined && message.method === undefined) {
+        var handler = pending[message.id];
+        if (handler) { delete pending[message.id]; handler(message.result, message.error); }
+        return;
+      }
+      if (message.method === "ui/notifications/tool-result") {
+        var result = message.params || {};
+        if (result.structuredContent) {
+          show(result.structuredContent);
+        } else {
+          // Text-only results (e.g. "no such project") must still surface
+          // instead of leaving the frame on "Waiting for tool result…".
+          var texts = [];
+          var blocks = result.content || [];
+          for (var i = 0; i < blocks.length; i += 1) {
+            if (blocks[i] && blocks[i].type === "text") texts.push(blocks[i].text);
+          }
+          showMessage(texts.length ? texts.join("\n") : "Tool returned no renderable data.");
+        }
+        return;
+      }
+      if (message.method === "ui/notifications/host-context-changed") {
+        applyHostContext(message.params);
+        requestAnimationFrame(reportSize);
+        return;
+      }
+      if (message.id !== undefined && message.method !== undefined) {
+        if (message.method === "ping" || message.method === "ui/resource-teardown") {
+          post({ jsonrpc: "2.0", id: message.id, result: {} });
+        } else {
+          post({ jsonrpc: "2.0", id: message.id, error: { code: -32601, message: "Method not found" } });
+        }
+      }
+    });
+
+    var inlineNode = document.getElementById("augment-data");
+    var inlineData = null;
+    if (inlineNode) {
+      try { inlineData = JSON.parse(inlineNode.textContent); } catch (error) { inlineData = null; }
+    }
+    var hasInlineData = Boolean(inlineData);
+    if (inlineData) show(inlineData);
+
+    if (topLevel) {
+      if (!lastData) setStatus("No MCP Apps host detected and no inline data.");
+    } else {
+      // No hard deadline on the handshake: a slow host may still answer after
+      // the status flips, and the pending entry stays live so a late response
+      // completes the connection instead of being dropped.
+      var statusTimer = setTimeout(function () {
+        if (bridge.connected) return;
+        if (hasInlineData) {
+          // Classic embedded variant only: no SEP-1865 handshake occurs, yet
+          // the inline content is already shown, so a size hint is safe and
+          // useful. A conformant host completes ui/initialize first (clearing
+          // this timer), so it never receives an out-of-lifecycle notification.
+          canNotify = true;
+          reportSize();
+        } else {
+          setStatus("No MCP Apps host detected and no inline data.");
+        }
+      }, 3000);
+      request("ui/initialize", {
+        protocolVersion: "2026-01-26",
+        appInfo: { name: appName, version: "1" },
+        appCapabilities: {},
+      }).then(function (result) {
+        clearTimeout(statusTimer);
+        bridge.connected = true;
+        bridge.callTool = function (name, args) {
+          return request("tools/call", { name: name, arguments: args || {} }, 120000);
+        };
+        notify("ui/notifications/initialized");
+        canNotify = true;
+        if (result) applyHostContext(result.hostContext);
+        reportSize();
+        if (!lastData) setStatus("Waiting for tool result…");
+      });
+    }
+
+    if (window.ResizeObserver) {
+      var scheduled = false;
+      new ResizeObserver(function () {
+        if (scheduled) return;
+        scheduled = true;
+        requestAnimationFrame(function () { scheduled = false; reportSize(); });
+      }).observe(document.body);
+    }
+  }
 `;
-const INSIGHTS_RENDER_JS = String.raw `
-  function formatChars(count) {
-    if (count >= 1000000) return (count / 1000000).toFixed(1) + "M";
-    if (count >= 1000) return (count / 1000).toFixed(1) + "k";
-    return String(count);
-  }
-
-  function section(title) {
-    var kids = [h("h2", {}, title)];
-    for (var i = 1; i < arguments.length; i += 1) kids.push(arguments[i]);
-    var wrap = h("div", {});
-    for (var j = 0; j < kids.length; j += 1) wrap.append(kids[j]);
-    return wrap;
-  }
-
-  function kindBar(byKind, total) {
-    var bar = h("div", { class: "bar" });
-    var legend = h("div", { class: "legend" });
-    for (var i = 0; i < byKind.length; i += 1) {
-      var entry = byKind[i];
-      if (entry.count > 0 && total > 0) {
-        bar.append(h("span", {
-          style: "width:" + (100 * entry.count / total) + "%;background:" + (KIND_COLORS[entry.kind] || "#8b949e"),
-          title: entry.kind + ": " + entry.count,
-        }));
-      }
-      legend.append(h("span", {},
-        h("span", { class: "dot", style: "background:" + (KIND_COLORS[entry.kind] || "#8b949e") }),
-        entry.kind + " " + entry.count));
-    }
-    return h("div", {}, bar, legend);
-  }
-
-  function sparkline(weeks) {
-    var width = 300, height = 56, pad = 2;
-    var max = 1;
-    for (var i = 0; i < weeks.length; i += 1) max = Math.max(max, weeks[i].created + weeks[i].updated);
-    var slot = (width - pad * 2) / weeks.length;
-    var svg = s("svg", { class: "spark", viewBox: "0 0 " + width + " " + height, preserveAspectRatio: "none" });
-    for (var j = 0; j < weeks.length; j += 1) {
-      var week = weeks[j];
-      var x = pad + j * slot;
-      var createdH = Math.round((height - 14) * week.created / max);
-      var updatedH = Math.round((height - 14) * week.updated / max);
-      var base = height - 12;
-      var title = week.start + ": " + week.created + " created, " + week.updated + " updated";
-      var group = s("g", {});
-      group.append(s("title", {}, title));
-      if (updatedH > 0) group.append(s("rect", { x: x + 1, y: base - createdH - updatedH, width: Math.max(1, slot - 2), height: updatedH, fill: "var(--muted)", opacity: "0.55" }));
-      if (createdH > 0) group.append(s("rect", { x: x + 1, y: base - createdH, width: Math.max(1, slot - 2), height: createdH, fill: "var(--accent)" }));
-      group.append(s("rect", { x: x + 1, y: base + 2, width: Math.max(1, slot - 2), height: 2, fill: "var(--line)" }));
-      svg.append(group);
-    }
-    return svg;
-  }
-
-  function renderInsights(app, data, bridge) {
-    var totals = data.totals || { memories: 0, links: 0, distinct_tags: 0, total_chars: 0 };
-    app.append(h("div", { class: "head" },
-      h("span", { class: "brand" }, "augment"),
-      h("h1", {}, "Memory insights — " + data.project.name),
-      h("span", { class: "totals" },
-        totals.memories + " memories · " + totals.links + " links · " + formatChars(totals.total_chars) + " chars")));
-
-    app.append(section("Memories by kind", kindBar(data.by_kind || [], totals.memories)));
-
-    var grid = h("div", { class: "grid" });
-    if ((data.links_by_type || []).length > 0) {
-      var linkRows = h("div", { class: "rows" });
-      for (var i = 0; i < data.links_by_type.length; i += 1) {
-        var entry = data.links_by_type[i];
-        linkRows.append(h("div", { class: "row" },
-          h("span", { class: "grow" }, entry.type),
-          h("span", { class: "muted" }, String(entry.count))));
-      }
-      linkRows.append(h("div", { class: "row muted" }, data.orphan_count + " memories with no links"));
-      grid.append(section("Links", linkRows));
-    }
-    if ((data.top_connected || []).length > 0) {
-      var hubRows = h("div", { class: "rows" });
-      for (var j = 0; j < data.top_connected.length; j += 1) {
-        var hub = data.top_connected[j];
-        hubRows.append(h("div", { class: "row" },
-          kindPill(hub.kind),
-          h("span", { class: "grow", title: hub.name }, hub.name),
-          h("span", { class: "muted" }, "×" + hub.degree)));
-      }
-      grid.append(section("Most connected", hubRows));
-    }
-    if (grid.childNodes.length > 0) app.append(grid);
-
-    if ((data.top_tags || []).length > 0) {
-      var chips = h("div", { class: "chips" });
-      for (var k = 0; k < data.top_tags.length; k += 1) {
-        var tag = data.top_tags[k];
-        chips.append(h("span", { class: "chip" }, tag.tag, h("b", {}, String(tag.count))));
-      }
-      app.append(section("Top tags", chips));
-    }
-
-    app.append(section("Activity (created vs updated, last 12 weeks)", sparkline(data.activity || [])));
-
-    var refresh = h("button", { hidden: "", onclick: function () {
-      refresh.disabled = true;
-      bridge.callTool("memory_insights", { project_name: data.project.name }).then(function (result) {
-        refresh.disabled = false;
-        if (result && result.structuredContent) {
-          app.replaceChildren();
-          renderInsights(app, result.structuredContent, bridge);
-        }
-      }).catch(function () { refresh.disabled = false; });
-    } }, "Refresh");
-    if (bridge.connected) refresh.removeAttribute("hidden");
-    app.append(h("div", { class: "footer" }, refresh,
-      h("span", { class: "stamp" }, "generated " + String(data.generated_at || "").replace("T", " ").slice(0, 16))));
-  }
-
-  augmentApp("augment-memory-insights", renderInsights);
+const INSIGHTS_RENDER_JS = String.raw `
+  function formatChars(count) {
+    if (count >= 1000000) return (count / 1000000).toFixed(1) + "M";
+    if (count >= 1000) return (count / 1000).toFixed(1) + "k";
+    return String(count);
+  }
+
+  function section(title) {
+    var kids = [h("h2", {}, title)];
+    for (var i = 1; i < arguments.length; i += 1) kids.push(arguments[i]);
+    var wrap = h("div", {});
+    for (var j = 0; j < kids.length; j += 1) wrap.append(kids[j]);
+    return wrap;
+  }
+
+  function kindBar(byKind, total) {
+    var bar = h("div", { class: "bar" });
+    var legend = h("div", { class: "legend" });
+    for (var i = 0; i < byKind.length; i += 1) {
+      var entry = byKind[i];
+      if (entry.count > 0 && total > 0) {
+        bar.append(h("span", {
+          style: "width:" + (100 * entry.count / total) + "%;background:" + (KIND_COLORS[entry.kind] || "#8b949e"),
+          title: entry.kind + ": " + entry.count,
+        }));
+      }
+      legend.append(h("span", {},
+        h("span", { class: "dot", style: "background:" + (KIND_COLORS[entry.kind] || "#8b949e") }),
+        entry.kind + " " + entry.count));
+    }
+    return h("div", {}, bar, legend);
+  }
+
+  function sparkline(weeks) {
+    var width = 300, height = 56, pad = 2;
+    var max = 1;
+    for (var i = 0; i < weeks.length; i += 1) max = Math.max(max, weeks[i].created + weeks[i].updated);
+    var slot = (width - pad * 2) / weeks.length;
+    var svg = s("svg", { class: "spark", viewBox: "0 0 " + width + " " + height, preserveAspectRatio: "none" });
+    for (var j = 0; j < weeks.length; j += 1) {
+      var week = weeks[j];
+      var x = pad + j * slot;
+      var createdH = Math.round((height - 14) * week.created / max);
+      var updatedH = Math.round((height - 14) * week.updated / max);
+      var base = height - 12;
+      var title = week.start + ": " + week.created + " created, " + week.updated + " updated";
+      var group = s("g", {});
+      group.append(s("title", {}, title));
+      if (updatedH > 0) group.append(s("rect", { x: x + 1, y: base - createdH - updatedH, width: Math.max(1, slot - 2), height: updatedH, fill: "var(--muted)", opacity: "0.55" }));
+      if (createdH > 0) group.append(s("rect", { x: x + 1, y: base - createdH, width: Math.max(1, slot - 2), height: createdH, fill: "var(--accent)" }));
+      group.append(s("rect", { x: x + 1, y: base + 2, width: Math.max(1, slot - 2), height: 2, fill: "var(--line)" }));
+      svg.append(group);
+    }
+    return svg;
+  }
+
+  function renderInsights(app, data, bridge) {
+    var totals = data.totals || { memories: 0, links: 0, distinct_tags: 0, total_chars: 0 };
+    app.append(h("div", { class: "head" },
+      h("span", { class: "brand" }, "augment"),
+      h("h1", {}, "Memory insights — " + data.project.name),
+      h("span", { class: "totals" },
+        totals.memories + " memories · " + totals.links + " links · " + formatChars(totals.total_chars) + " chars")));
+
+    app.append(section("Memories by kind", kindBar(data.by_kind || [], totals.memories)));
+
+    var grid = h("div", { class: "grid" });
+    if ((data.links_by_type || []).length > 0) {
+      var linkRows = h("div", { class: "rows" });
+      for (var i = 0; i < data.links_by_type.length; i += 1) {
+        var entry = data.links_by_type[i];
+        linkRows.append(h("div", { class: "row" },
+          h("span", { class: "grow" }, entry.type),
+          h("span", { class: "muted" }, String(entry.count))));
+      }
+      linkRows.append(h("div", { class: "row muted" }, data.orphan_count + " memories with no links"));
+      grid.append(section("Links", linkRows));
+    }
+    if ((data.top_connected || []).length > 0) {
+      var hubRows = h("div", { class: "rows" });
+      for (var j = 0; j < data.top_connected.length; j += 1) {
+        var hub = data.top_connected[j];
+        hubRows.append(h("div", { class: "row" },
+          kindPill(hub.kind),
+          h("span", { class: "grow", title: hub.name }, hub.name),
+          h("span", { class: "muted" }, "×" + hub.degree)));
+      }
+      grid.append(section("Most connected", hubRows));
+    }
+    if (grid.childNodes.length > 0) app.append(grid);
+
+    if ((data.top_tags || []).length > 0) {
+      var chips = h("div", { class: "chips" });
+      for (var k = 0; k < data.top_tags.length; k += 1) {
+        var tag = data.top_tags[k];
+        chips.append(h("span", { class: "chip" }, tag.tag, h("b", {}, String(tag.count))));
+      }
+      app.append(section("Top tags", chips));
+    }
+
+    app.append(section("Activity (created vs updated, last 12 weeks)", sparkline(data.activity || [])));
+
+    var refresh = h("button", { hidden: "", onclick: function () {
+      refresh.disabled = true;
+      bridge.callTool("memory_insights", { project_name: data.project.name }).then(function (result) {
+        refresh.disabled = false;
+        if (result && result.structuredContent) {
+          app.replaceChildren();
+          renderInsights(app, result.structuredContent, bridge);
+        }
+      }).catch(function () { refresh.disabled = false; });
+    } }, "Refresh");
+    if (bridge.connected) refresh.removeAttribute("hidden");
+    app.append(h("div", { class: "footer" }, refresh,
+      h("span", { class: "stamp" }, "generated " + String(data.generated_at || "").replace("T", " ").slice(0, 16))));
+  }
+
+  augmentApp("augment-memory-insights", renderInsights);
 `;
-const GRAPH_RENDER_JS = String.raw `
-  function renderGraph(app, data, bridge) {
-    app.append(h("div", { class: "head" },
-      h("span", { class: "brand" }, "augment"),
-      h("h1", {}, "Memory graph — " + data.project.name),
-      h("span", { class: "totals" }, data.total_memories + " memories · " + data.total_links + " links")));
-    if (data.truncated) {
-      app.append(h("p", { class: "muted", style: "margin:4px 0 0" },
-        "Showing the " + data.nodes.length + " most recently updated memories."));
-    }
-
-    var stage = h("div", { style: "position:relative;margin-top:8px" });
-    var cyHost = h("div", { style: "height:380px;border:1px solid var(--color-border-primary, var(--line));border-radius:6px" });
-    var info = h("div", { class: "muted", style: "padding:6px 2px;min-height:24px;font-size:12px" },
-      "Tap a node to inspect it.");
-    stage.append(cyHost);
-    app.append(stage, info);
-
-    var elements = [];
-    for (var i = 0; i < data.nodes.length; i += 1) {
-      var node = data.nodes[i];
-      elements.push({ data: { id: "m" + node.id, label: node.name, kind: node.kind,
-        color: KIND_COLORS[node.kind] || "#8b949e", tags: node.tags, degree: node.degree } });
-    }
-    for (var j = 0; j < data.edges.length; j += 1) {
-      var edge = data.edges[j];
-      elements.push({ data: { id: "l" + edge.id, source: "m" + edge.source, target: "m" + edge.target, label: edge.type } });
-    }
-
-    // Cytoscape paints to canvas, so CSS custom properties don't resolve —
-    // read the effective theme colors off the document instead.
-    var fgColor = getComputedStyle(document.body).color || "#e6edf3";
-    var cy = cytoscape({
-      container: cyHost,
-      elements: elements,
-      minZoom: 0.2,
-      maxZoom: 2.5,
-      style: [
-        { selector: "node", style: {
-          "label": "data(label)", "color": fgColor, "font-size": 10, "text-wrap": "wrap",
-          "text-max-width": 110, "text-valign": "bottom", "text-margin-y": 4,
-          "background-color": "data(color)", "border-color": "data(color)",
-          "width": 20, "height": 20, "border-width": 2 } },
-        { selector: "node:selected", style: { "border-color": "#ffffff", "border-width": 3 } },
-        { selector: "edge", style: {
-          "label": "data(label)", "font-size": 8, "color": "#8b949e", "curve-style": "bezier",
-          "width": 1.2, "line-color": "#484f58", "target-arrow-color": "#484f58",
-          "target-arrow-shape": "triangle", "text-rotation": "autorotate" } },
-      ],
-    });
-    cy.layout({ name: "cose", animate: false, padding: 24, nodeRepulsion: 9000, idealEdgeLength: 80 }).run();
-
-    // Node label color is baked onto the canvas at render time; a later host
-    // theme switch would leave it stale (e.g. light text on a light panel).
-    // Re-read the effective color and restyle in place — positions/zoom/pan
-    // are preserved (no relayout).
-    bridge.onThemeChange(function () {
-      cy.nodes().style("color", getComputedStyle(document.body).color || "#e6edf3");
-    });
-
-    cy.on("tap", "node", function (event) {
-      var d = event.target.data();
-      info.replaceChildren(
-        kindPill(d.kind), " ",
-        h("b", {}, d.label),
-        h("span", { class: "muted" }, "  ×" + d.degree + " links" +
-          (d.tags && d.tags.length ? " · " + d.tags.join(", ") : "")));
-    });
-  }
-
-  augmentApp("augment-memory-graph", renderGraph);
+const GRAPH_RENDER_JS = String.raw `
+  function renderGraph(app, data, bridge) {
+    app.append(h("div", { class: "head" },
+      h("span", { class: "brand" }, "augment"),
+      h("h1", {}, "Memory graph — " + data.project.name),
+      h("span", { class: "totals" }, data.total_memories + " memories · " + data.total_links + " links")));
+    if (data.truncated) {
+      app.append(h("p", { class: "muted", style: "margin:4px 0 0" },
+        "Showing the " + data.nodes.length + " most recently updated memories."));
+    }
+
+    var stage = h("div", { style: "position:relative;margin-top:8px" });
+    var cyHost = h("div", { style: "height:380px;border:1px solid var(--color-border-primary, var(--line));border-radius:6px" });
+    var info = h("div", { class: "muted", style: "padding:6px 2px;min-height:24px;font-size:12px" },
+      "Tap a node to inspect it.");
+    stage.append(cyHost);
+    app.append(stage, info);
+
+    var elements = [];
+    for (var i = 0; i < data.nodes.length; i += 1) {
+      var node = data.nodes[i];
+      elements.push({ data: { id: "m" + node.id, label: node.name, kind: node.kind,
+        color: KIND_COLORS[node.kind] || "#8b949e", tags: node.tags, degree: node.degree } });
+    }
+    for (var j = 0; j < data.edges.length; j += 1) {
+      var edge = data.edges[j];
+      elements.push({ data: { id: "l" + edge.id, source: "m" + edge.source, target: "m" + edge.target, label: edge.type } });
+    }
+
+    // Cytoscape paints to canvas, so CSS custom properties don't resolve —
+    // read the effective theme colors off the document instead.
+    var fgColor = getComputedStyle(document.body).color || "#e6edf3";
+    var cy = cytoscape({
+      container: cyHost,
+      elements: elements,
+      minZoom: 0.2,
+      maxZoom: 2.5,
+      style: [
+        { selector: "node", style: {
+          "label": "data(label)", "color": fgColor, "font-size": 10, "text-wrap": "wrap",
+          "text-max-width": 110, "text-valign": "bottom", "text-margin-y": 4,
+          "background-color": "data(color)", "border-color": "data(color)",
+          "width": 20, "height": 20, "border-width": 2 } },
+        { selector: "node:selected", style: { "border-color": "#ffffff", "border-width": 3 } },
+        { selector: "edge", style: {
+          "label": "data(label)", "font-size": 8, "color": "#8b949e", "curve-style": "bezier",
+          "width": 1.2, "line-color": "#484f58", "target-arrow-color": "#484f58",
+          "target-arrow-shape": "triangle", "text-rotation": "autorotate" } },
+      ],
+    });
+    cy.layout({ name: "cose", animate: false, padding: 24, nodeRepulsion: 9000, idealEdgeLength: 80 }).run();
+
+    // Node label color is baked onto the canvas at render time; a later host
+    // theme switch would leave it stale (e.g. light text on a light panel).
+    // Re-read the effective color and restyle in place — positions/zoom/pan
+    // are preserved (no relayout).
+    bridge.onThemeChange(function () {
+      cy.nodes().style("color", getComputedStyle(document.body).color || "#e6edf3");
+    });
+
+    cy.on("tap", "node", function (event) {
+      var d = event.target.data();
+      info.replaceChildren(
+        kindPill(d.kind), " ",
+        h("b", {}, d.label),
+        h("span", { class: "muted" }, "  ×" + d.degree + " links" +
+          (d.tags && d.tags.length ? " · " + d.tags.join(", ") : "")));
+    });
+  }
+
+  augmentApp("augment-memory-graph", renderGraph);
 `;
 function snippetDocument(options) {
     const dataIsland = options.inlineData === undefined
         ? ""
         : `\n  <script type="application/json" id="augment-data">${escapeInlineJson(options.inlineData)}</script>`;
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${options.title}</title>
-  <style>${SNIPPET_CSS}</style>${options.headExtra ?? ""}
-</head>
-<body>
-  <div id="app"><p id="status" class="muted">Connecting to host…</p></div>${dataIsland}
-  <script>
-(() => {
-  "use strict";
-${SNIPPET_RUNTIME_JS}
-${options.bodyJs}
-})();
-  </script>
-</body>
-</html>
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${options.title}</title>
+  <style>${SNIPPET_CSS}</style>${options.headExtra ?? ""}
+</head>
+<body>
+  <div id="app"><p id="status" class="muted">Connecting to host…</p></div>${dataIsland}
+  <script>
+(() => {
+  "use strict";
+${SNIPPET_RUNTIME_JS}
+${options.bodyJs}
+})();
+  </script>
+</body>
+</html>
 `;
 }
 /**