@fingerskier/augment 0.2.0 → 0.3.0

package/dist/mcp/apps.js

@@ -0,0 +1,578 @@
+/**
+ * Dashboard snippets for MCP Apps (SEP-1865, extension `io.modelcontextprotocol/ui`,
+ * spec version 2026-01-26). Each snippet is a self-contained HTML5 document served
+ * as a predeclared `ui://` resource; UI-capable hosts render it in a sandboxed
+ * iframe and stream the tool result in over postMessage JSON-RPC. Templates are
+ * compiled-in strings (same no-frontend-build approach as src/dashboard/assets.ts)
+ * and work offline under the spec's default CSP (inline script/style only, no
+ * network), so the postMessage bridge below is hand-rolled rather than pulled from
+ * `@modelcontextprotocol/ext-apps` — the snippet must be a single inline document.
+ */
+/** Spec-mandated mime type for MCP Apps HTML templates (mirrors ext-apps RESOURCE_MIME_TYPE). */
+export const UI_MIME_TYPE = "text/html;profile=mcp-app";
+/** Reverse-DNS extension id hosts advertise in initialize capabilities.extensions. */
+export const UI_EXTENSION_ID = "io.modelcontextprotocol/ui";
+export const INSIGHTS_RESOURCE_URI = "ui://augment/insights.html";
+export const GRAPH_RESOURCE_URI = "ui://augment/graph.html";
+/**
+ * JSON destined for an inline <script> block. `<` is escaped so memory content
+ * containing `</script>` (or `<!--`) cannot break out of the data island;
+ * U+2028/U+2029 are escaped because they terminate lines in JS source.
+ */
+export function escapeInlineJson(value) {
+    return JSON.stringify(value)
+        .replace(/</g, "\\u003c")
+        .replace(/\u2028/g, "\\u2028")
+        .replace(/\u2029/g, "\\u2029");
+}
+/**
+ * Makes bundled JS source safe to inline in a <script> element. `<\/` parses
+ * identically to `</` inside JS string and regex literals — the only forms a
+ * real minified bundle emits — so behavior is preserved while an embedded
+ * `</script` can no longer close the tag. (A bare relational-division
+ * expression like `a</script/.test(x)` would be corrupted, but no bundler
+ * produces that shape.)
+ */
+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)); }
+`;
+/**
+ * Shared snippet runtime: XSS-safe DOM helpers plus a minimal MCP Apps bridge.
+ * `augmentApp(name, render)` wires the SEP-1865 lifecycle — `ui/initialize`
+ * request, `ui/notifications/initialized`, then renders on each
+ * `ui/notifications/tool-result` — and falls back to the inline `#augment-data`
+ * 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" };
+  var VERDICT_COLORS = { helpful: "var(--ok)", harmless: "var(--muted)", harmful: "var(--danger)", "correct-abstention": "var(--accent)" };
+
+  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 tallyRows(tally) {
+    var rows = h("div", { class: "rows" });
+    for (var verdict in tally.by_verdict) {
+      rows.append(h("div", { class: "row" },
+        h("span", { class: "dot", style: "background:" + (VERDICT_COLORS[verdict] || "var(--muted)") }),
+        h("span", { class: "grow" }, verdict),
+        h("span", { class: "muted" }, String(tally.by_verdict[verdict]))));
+    }
+    rows.append(h("div", { class: "row muted" }, tally.total + " rated of " + tally.target + " target"));
+    return rows;
+  }
+
+  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 (data.tally && data.tally.total > 0) {
+      grid.append(section("Recall quality (tally)", tallyRows(data.tally)));
+    }
+    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);
+`;
+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>
+`;
+}
+/**
+ * The insights dashboard snippet. With no argument this is the `ui://` template
+ * (data arrives via ui/notifications/tool-result); with inline data it is the
+ * self-contained classic MCP-UI embedded variant.
+ */
+export function insightsSnippetHtml(inlineData) {
+    return snippetDocument({
+        title: "Augment — Memory Insights",
+        bodyJs: INSIGHTS_RENDER_JS,
+        inlineData,
+    });
+}
+/**
+ * The memory-graph snippet. Cytoscape is inlined (resolved from node_modules at
+ * read time, like the dashboard route) so the document stays offline-safe under
+ * the default MCP Apps CSP.
+ */
+export function graphSnippetHtml(cytoscapeJs, inlineData) {
+    return snippetDocument({
+        title: "Augment — Memory Graph",
+        headExtra: `\n  <script>${escapeInlineScript(cytoscapeJs)}</script>`,
+        bodyJs: GRAPH_RENDER_JS,
+        inlineData,
+    });
+}
+//# sourceMappingURL=apps.js.map

package/dist/mcp/apps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps.js","sourceRoot":"","sources":["../../src/mcp/apps.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GAAG,2BAA2B,CAAC;AACxD,sFAAsF;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,4BAA4B,CAAC;AAE5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAClE,MAAM,CAAC,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAE5D;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;SACzB,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;SACxB,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC7B,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAU;IAC3C,OAAO,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIpC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEjC,CAAC;AAEF,SAAS,eAAe,CAAC,OAKxB;IACC,MAAM,UAAU,GACd,OAAO,CAAC,UAAU,KAAK,SAAS;QAC9B,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,yDAAyD,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC;IAC/G,OAAO;;;;;WAKE,OAAO,CAAC,KAAK;WACb,WAAW,WAAW,OAAO,CAAC,SAAS,IAAI,EAAE;;;4EAGoB,UAAU;;;;EAIpF,kBAAkB;EAClB,OAAO,CAAC,MAAM;;;;;CAKf,CAAC;AACF,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,UAA2B;IAC7D,OAAO,eAAe,CAAC;QACrB,KAAK,EAAE,2BAA2B;QAClC,MAAM,EAAE,kBAAkB;QAC1B,UAAU;KACX,CAAC,CAAC;AACL,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,UAAyB;IAC7E,OAAO,eAAe,CAAC;QACrB,KAAK,EAAE,wBAAwB;QAC/B,SAAS,EAAE,eAAe,kBAAkB,CAAC,WAAW,CAAC,WAAW;QACpE,MAAM,EAAE,eAAe;QACvB,UAAU;KACX,CAAC,CAAC;AACL,CAAC"}

package/dist/mcp/insights.d.ts

@@ -0,0 +1,91 @@
+import { type LinkType, type MemoryKind } from "../constants.js";
+import type { TallySummary } from "../tally.js";
+import type { ProjectGraph } from "../types.js";
+/**
+ * Pure aggregation over a project's memory graph (plus the optional tally
+ * summary) into the payload the dashboard snippets render. Kept free of I/O so
+ * the numbers the MCP Apps iframe shows are unit-testable without a daemon.
+ */
+export declare const ACTIVITY_WEEKS = 12;
+export declare const TOP_TAG_LIMIT = 12;
+export declare const TOP_CONNECTED_LIMIT = 5;
+/** Node cap for the graph snippet payload — keeps structuredContent bounded. */
+export declare const GRAPH_NODE_LIMIT = 300;
+export interface ActivityWeek {
+    /** ISO date (UTC midnight) of the first day of the bucket. */
+    start: string;
+    created: number;
+    updated: number;
+}
+export interface MemoryInsights {
+    project: {
+        id: number;
+        name: string;
+    };
+    generated_at: string;
+    totals: {
+        memories: number;
+        links: number;
+        distinct_tags: number;
+        total_chars: number;
+    };
+    by_kind: Array<{
+        kind: MemoryKind;
+        count: number;
+    }>;
+    links_by_type: Array<{
+        type: LinkType;
+        count: number;
+    }>;
+    top_tags: Array<{
+        tag: string;
+        count: number;
+    }>;
+    /**
+     * Oldest week first; 12 seven-day buckets aligned to UTC midnights, the
+     * window ending at the first UTC midnight after `generated_at`.
+     */
+    activity: ActivityWeek[];
+    top_connected: Array<{
+        id: number;
+        name: string;
+        kind: MemoryKind;
+        degree: number;
+    }>;
+    orphan_count: number;
+    freshest?: {
+        id: number;
+        name: string;
+        kind: MemoryKind;
+        updated_at: string;
+    };
+    tally?: TallySummary;
+}
+export interface GraphPayload {
+    project: {
+        id: number;
+        name: string;
+    };
+    nodes: Array<{
+        id: number;
+        name: string;
+        kind: MemoryKind;
+        tags: string[];
+        degree: number;
+    }>;
+    edges: Array<{
+        id: number;
+        source: number;
+        target: number;
+        type: LinkType;
+    }>;
+    total_memories: number;
+    total_links: number;
+    truncated: boolean;
+}
+export declare function computeInsights(graph: ProjectGraph, tally: TallySummary | undefined, now: Date): MemoryInsights;
+export declare function toGraphPayload(graph: ProjectGraph, nodeLimit?: number): GraphPayload;
+/** Text fallback: what the model (and any non-UI host) sees for memory_insights. */
+export declare function renderInsightsText(insights: MemoryInsights): string;
+/** Text fallback for memory_graph — a summary, never the full node/edge dump. */
+export declare function renderGraphText(payload: GraphPayload): string;