@webmcp-auto-ui/ui 2.5.37 → 2.5.38

package/src/widgets/notebook/notebook.ts

@@ -8,9 +8,9 @@
 import {
   createState, injectStyles, mountRunControls, mountHistoryPanel,
   setupDnD, deleteCellWithConfirm, restoreCellFromSnapshot, addCell,
-  addImportedCells, registerExecutor, collectDataServers,
+  addImportedCells, registerExecutor, collectDataServers, collectWebmcpServers,
   autosize, openShareModal, registerHistoryObserver,
-  renderCellLogs,
+  renderCellLogs, uid, defaultCellContent,
   createPublishControls, autoConnectFrontmatterServers,
   createRuntimeOverlay, effectiveResult, cellRuntimeStatus,
   lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround,
@@ -25,6 +25,42 @@ import { extractCellsFromRecipe, extractCellFromMarkdown } from './resource-extr
 import { mountLeftPane } from './left-pane.js';
 import { highlightCode } from '../../primitives/markdown-renderer.js';
 import { createSqlExecutor } from './executors/sql.js';
+import { runCode } from '@webmcp-auto-ui/sdk';
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
+import { mountWidget } from '@webmcp-auto-ui/core';
+
+// Side-effect imports — register native widget custom elements so that
+// `mountWidget(host, name, params, servers)` can resolve `<auto-${name}>`
+// even when WidgetRenderer.svelte is not mounted on the page (e.g. notebook-
+// viewer, which mounts the notebook widget via vanilla renderNotebook but
+// never imports WidgetRenderer).  Without these imports `customElements.get`
+// returns undefined and every `await widget(...)` result falls through to the
+// silent `container.textContent = '[${type}]'` branch.
+import '../simple/stat.svelte';
+import '../simple/kv.svelte';
+import '../simple/list.svelte';
+import '../simple/chart.svelte';
+import '../simple/alert.svelte';
+import '../simple/code.svelte';
+import '../simple/text.svelte';
+import '../simple/actions.svelte';
+import '../simple/tags.svelte';
+import '../rich/stat-card.svelte';
+import '../rich/profile.svelte';
+import '../rich/json-viewer.svelte';
+import '../rich/chart-rich.svelte';
+import '../rich/sankey.svelte';
+import '../rich/hemicycle.svelte';
+import '../rich/data-table.svelte';
+import '../rich/timeline.svelte';
+import '../rich/trombinoscope.svelte';
+import '../rich/cards.svelte';
+import '../rich/grid-data.svelte';
+import '../rich/js-sandbox.svelte';
+import '../rich/log.svelte';
+import '../rich/gallery.svelte';
+import '../rich/carousel.svelte';
+import '../rich/map.svelte';
 
 export async function render(container: HTMLElement, data: Record<string, unknown>): Promise<() => void> {
   injectStyles();
@@ -38,7 +74,13 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     autoRun: (data as any).autoRun === true,
     publishedSlug: (data as any).publishedSlug,
     publishedToken: (data as any).publishedToken,
-  });
+    webmcpServers: (data as any).webmcpServers,
+    chatApiBase: (data as any).chatApiBase,
+    hidePublishBadge: (data as any).hidePublishBadge === true,
+  } as any);
+
+  // Default src visibility per mode (toggle remains usable for per-cell override).
+  for (const c of state.cells) c.hideSource = state.mode === 'view';
 
   // Live mode runtime overlay (created lazily). Never mutates state.
   let overlay: RuntimeOverlay | null = null;
@@ -57,8 +99,8 @@ export async function render(container: HTMLElement, data: Record<string, unknow
       <div class="nbe-shell">
         <div class="nbe-kicker">
           <div class="nb-mode-switch" style="margin-left:auto;">
-            <button class="nb-mode-edit nb-on">edit</button>
-            <button class="nb-mode-view">view</button>
+            <button class="nb-mode-edit ${state.mode === 'edit' ? 'nb-on' : ''}">edit</button>
+            <button class="nb-mode-view ${state.mode === 'view' ? 'nb-on' : ''}">view</button>
           </div>
           <button class="nb-btn nbe-history-btn">⟲ history</button>
           <span class="nbe-publish-badge-slot"></span>
@@ -71,11 +113,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
         <div class="nb-history-panel nbe-history-panel"></div>
         <div class="nbe-cells"></div>
         <div class="nbe-footer">
-          <button class="nb-btn nb-add-cell" data-add="md">+ prose</button>
-          <button class="nb-btn nb-add-cell" data-add="sql">+ sql</button>
-          <button class="nb-btn nb-add-cell" data-add="js">+ chart</button>
-          <button class="nb-btn nb-add-cell" data-add-modal="md">+ md</button>
-          <button class="nb-btn nb-add-cell" data-add-modal="recipe">+ recipe</button>
           <span class="nbe-share-btn" title="Share">share</span>
           <span class="nbe-publish-slot"></span>
         </div>
@@ -233,7 +270,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   });
   const publishCleanup = createPublishControls(state, {
     buttonSlot: shell.querySelector('.nbe-publish-slot') as HTMLElement,
-    badgeSlot: shell.querySelector('.nbe-publish-badge-slot') as HTMLElement,
+    badgeSlot: state.hidePublishBadge ? undefined : (shell.querySelector('.nbe-publish-badge-slot') as HTMLElement),
     footerSlot: shell.querySelector('.nbe-publish-footer-slot') as HTMLElement,
     onPublished: () => rerender(),
   });
@@ -245,6 +282,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   const viewBtn = shell.querySelector('.nb-mode-view') as HTMLElement;
   editBtn.addEventListener('click', () => {
     state.mode = 'edit';
+    for (const c of state.cells) c.hideSource = false;
     container.classList.remove('nb-view-mode');
     editBtn.classList.add('nb-on'); viewBtn.classList.remove('nb-on');
     // Leaving view: stop live refresh and clear overlay so frozen snapshots show.
@@ -253,14 +291,21 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   });
   viewBtn.addEventListener('click', () => {
     state.mode = 'view';
+    for (const c of state.cells) c.hideSource = true;
     container.classList.add('nb-view-mode');
     viewBtn.classList.add('nb-on'); editBtn.classList.remove('nb-on');
     if (state.autoRun === true) bootstrapLive();
     rerender();
   });
 
-  // Left pane (collapsed by default)
-  const pane = mountLeftPane(leftPaneHost, state, collectDataServers(data), {
+
+  // Left pane (collapsed by default). Lists remote data servers AND bundled
+  // WebMCP servers (autoui, d3, …) in two distinct groups.
+  const collectAll = () => [
+    ...collectDataServers(data),
+    ...collectWebmcpServers(state.webmcpServers),
+  ];
+  const pane = mountLeftPane(leftPaneHost, state, collectAll(), {
     onInjectCells: (cells) => {
       addImportedCells(state, cells, activeCellIdx());
       rerender();
@@ -269,14 +314,14 @@ export async function render(container: HTMLElement, data: Record<string, unknow
 
   // Auto-connect data servers declared in the recipe frontmatter (data.servers).
   // The notebook reads MCP state passively from canvas.dataServers.
-  autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
+  autoConnectFrontmatterServers(data, () => pane.setServers(collectAll()));
 
   // Keep pane servers in sync with canvas changes
   let canvasUnsub: (() => void) | null = null;
   try {
     const canvasAny: any = (globalThis as any).__canvasVanilla || (globalThis as any).canvasVanilla;
     if (canvasAny?.subscribe) {
-      canvasUnsub = canvasAny.subscribe(() => pane.setServers(collectDataServers(data)));
+      canvasUnsub = canvasAny.subscribe(() => pane.setServers(collectAll()));
     }
   } catch { /* ignore */ }
 
@@ -304,38 +349,50 @@ export async function render(container: HTMLElement, data: Record<string, unknow
 // Executors (same pattern as compact/workspace/document agents)
 // ---------------------------------------------------------------------------
 
+/**
+ * Convert RunLog[] (objects with {t, msg}) returned by runCode into the
+ * string[] format expected by CellResult.logs. Each entry becomes a
+ * human-readable "<offset>ms  <message>" line.  Without this conversion every
+ * log entry would coerce to "[object Object]" in renderCellLogs.
+ */
+function logsToStrings(logs: Array<{ t: number; msg: string }> | undefined): string[] {
+  if (!logs || logs.length === 0) return [];
+  return logs.map((l) => `${l.t}ms  ${l.msg}`);
+}
+
 async function jsExecutor(ctx: CellExecContext): Promise<CellResult> {
   const start = Date.now();
   const { cell, scope } = ctx;
-  try {
-    const keys = Object.keys(scope);
-    const values = keys.map((k) => scope[k]);
-    const src = cell.content.trim();
-    const body = /^\s*(return|var|let|const|function|class|if|for|while|\/\/|\/\*)/.test(src)
-      ? src
-      : `return (async () => { return (${src}); })();`;
-    // eslint-disable-next-line no-new-func
-    const fn = new Function(...keys, body);
-    let result = fn(...values);
-    if (result && typeof result.then === 'function') result = await result;
-    const durationMs = Date.now() - start;
-
-    if (result === undefined || result === null) return { ok: true, kind: 'empty', durationMs };
-    if (Array.isArray(result)) {
-      const rows = result.filter((r) => r && typeof r === 'object') as Record<string, unknown>[];
-      const columns = rows.length ? Array.from(new Set(rows.flatMap((r) => Object.keys(r)))) : [];
-      return { ok: true, kind: 'table', rows, columns, rowCount: rows.length, durationMs };
-    }
-    if (result && typeof result === 'object') {
-      const r: any = result;
-      if (r.data || r.marks || r.mark || r.$schema) {
-        return { ok: true, kind: 'chart', spec: result, durationMs };
-      }
+  // Accept both `call(...)` (SDK) and `callTool(...)` (legacy / AI-generated)
+  // as aliases. runCode injects `call` and `widget` helpers around an
+  // AsyncFunction body, so top-level `await` and MCP calls work uniformly.
+  const code = cell.content.replace(/\bcallTool\s*\(/g, 'call(');
+  const res = await runCode(code, 'js', canvas.multiClient, scope);
+  const durationMs = Date.now() - start;
+  const logs = logsToStrings(res.logs as any);
+  if (res.status === 'error') {
+    return { ok: false, error: res.error ?? 'error', errorKind: 'runtime', durationMs, logs };
+  }
+  // Widgets emitted via `widget(name, params)` or via `*_widget_display(...)`
+  // calls — surface them as a dedicated kind so the host can mount them.
+  const widgets = res.widgets ?? (res.widget ? [res.widget] : []);
+  if (widgets.length > 0) {
+    return { ok: true, kind: 'widget', widgets, durationMs, logs };
+  }
+  const result = res.output;
+  if (result === undefined || result === null) return { ok: true, kind: 'empty', durationMs, logs };
+  if (Array.isArray(result)) {
+    const rows = result.filter((r) => r && typeof r === 'object') as Record<string, unknown>[];
+    const columns = rows.length ? Array.from(new Set(rows.flatMap((r) => Object.keys(r)))) : [];
+    return { ok: true, kind: 'table', rows, columns, rowCount: rows.length, durationMs, logs };
+  }
+  if (result && typeof result === 'object') {
+    const r: any = result;
+    if (r.data || r.marks || r.mark || r.$schema) {
+      return { ok: true, kind: 'chart', spec: result, durationMs, logs };
     }
-    return { ok: true, kind: 'value', value: result, durationMs };
-  } catch (err: any) {
-    return { ok: false, error: String(err?.message ?? err), errorKind: 'runtime', durationMs: Date.now() - start };
   }
+  return { ok: true, kind: 'value', value: result, durationMs, logs };
 }
 
 // ---------------------------------------------------------------------------
@@ -434,7 +491,7 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
   if (!cell.hideResult) {
     const res = document.createElement('div');
     res.className = 'nbe-result';
-    renderResultInto(res, cell, overlay);
+    renderResultInto(res, cell, overlay, state);
     codeCell.appendChild(res);
   }
 
@@ -443,9 +500,324 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
   (head.querySelector('.nb-toggle-src') as HTMLElement).addEventListener('click', () => { cell.hideSource = !cell.hideSource; rerender(); });
   (head.querySelector('.nb-toggle-res') as HTMLElement).addEventListener('click', () => { cell.hideResult = !cell.hideResult; rerender(); });
 
+  if (state.mode !== 'view') wrap.appendChild(renderCellActionBar(state, cell, rerender));
+
   return wrap;
 }
 
+/**
+ * Per-cell action bar: [+ text] [+ sql] [+ JS] [+ widget] [+ agent]
+ * Inserts a new cell directly after this one, or opens a picker / agent input.
+ * `widget` and `agent` are wired in dedicated handlers below.
+ */
+function renderCellActionBar(state: NotebookState, cell: NotebookCell, rerender: () => void): HTMLElement {
+  const bar = document.createElement('div');
+  bar.className = 'nbe-cell-actionbar';
+  const idx = state.cells.findIndex((c) => c.id === cell.id);
+  const insertAfter = (type: 'md' | 'sql' | 'js', content?: string) => {
+    const newCell: NotebookCell = {
+      id: uid(),
+      type,
+      content: content ?? defaultCellContent(type),
+      hideSource: false, hideResult: false, status: 'stale',
+    };
+    addImportedCells(state, [newCell], idx);
+    rerender();
+  };
+  bar.innerHTML = `
+    <button class="nb-btn nb-cellbar-btn" data-add="md">+ text</button>
+    <button class="nb-btn nb-cellbar-btn" data-add="sql">+ sql</button>
+    <button class="nb-btn nb-cellbar-btn" data-add="js">+ JS</button>
+    <button class="nb-btn nb-cellbar-btn" data-cellbar="widget">+ widget</button>
+    <button class="nb-btn nb-cellbar-btn" data-cellbar="agent">+ agent</button>`;
+  bar.querySelectorAll<HTMLElement>('[data-add]').forEach((btn) => {
+    btn.addEventListener('click', () => insertAfter(btn.dataset.add as 'md' | 'sql' | 'js'));
+  });
+  bar.querySelector<HTMLElement>('[data-cellbar="widget"]')?.addEventListener('click', () => {
+    openWidgetPicker(state, cell, rerender);
+  });
+  bar.querySelector<HTMLElement>('[data-cellbar="agent"]')?.addEventListener('click', () => {
+    toggleAgentBar(bar, state, cell, rerender);
+  });
+  return bar;
+}
+
+/**
+ * +widget picker — lists the recipes exposed by every active WebMCP server
+ * (state.webmcpServers, populated from frontmatter.webmcp_servers). On pick,
+ * inserts a JS cell after the current one with a template that reads the
+ * upstream cell's varname (default 'rows') and renders the widget.
+ */
+function openWidgetPicker(state: NotebookState, cell: NotebookCell, rerender: () => void): void {
+  const servers = state.webmcpServers ?? [];
+  type Item = { server: string; name: string; description?: string };
+  const items: Item[] = [];
+  for (const s of servers) {
+    const recipes = s.layer().recipes ?? [];
+    for (const r of recipes) items.push({ server: s.name, name: r.name, description: r.description });
+  }
+  if (items.length === 0) {
+    toastNoServers();
+    return;
+  }
+  const upstreamVar = findUpstreamVarname(state, cell);
+  const overlay = document.createElement('div');
+  overlay.className = 'nbe-picker-overlay';
+  overlay.innerHTML = `
+    <div class="nbe-picker">
+      <header>
+        <input class="nbe-picker-q" placeholder="filter widgets…" autofocus />
+        <button class="nbe-picker-close" type="button">✕</button>
+      </header>
+      <ul class="nbe-picker-list"></ul>
+    </div>`;
+  document.body.appendChild(overlay);
+  const close = () => { try { overlay.remove(); } catch { /* ignore */ } };
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+  (overlay.querySelector('.nbe-picker-close') as HTMLElement).addEventListener('click', close);
+  const list = overlay.querySelector('.nbe-picker-list') as HTMLElement;
+  const q = overlay.querySelector('.nbe-picker-q') as HTMLInputElement;
+  const render = (filter = '') => {
+    const f = filter.toLowerCase().trim();
+    list.innerHTML = items
+      .filter((i) => !f || i.name.toLowerCase().includes(f) || (i.description ?? '').toLowerCase().includes(f) || i.server.toLowerCase().includes(f))
+      .map((i) => `<li data-name="${escapeAttr(i.name)}" data-server="${escapeAttr(i.server)}">
+        <span class="nbe-picker-name">${escapeHtml(i.name)}</span>
+        <span class="nbe-picker-server">${escapeHtml(i.server)}</span>
+        <span class="nbe-picker-desc">${escapeHtml(i.description ?? '')}</span>
+      </li>`).join('');
+  };
+  render();
+  q.addEventListener('input', () => render(q.value));
+  list.addEventListener('click', (e) => {
+    const li = (e.target as HTMLElement).closest('li[data-name]') as HTMLElement | null;
+    if (!li) return;
+    const name = li.dataset.name as string;
+    const idx = state.cells.findIndex((c) => c.id === cell.id);
+    const template = upstreamVar
+      ? `return widget('${name}', { rows: ${upstreamVar} })`
+      : `return widget('${name}', {})`;
+    const newCell: NotebookCell = {
+      id: uid(), type: 'js',
+      content: template,
+      hideSource: false, hideResult: false, status: 'stale',
+    };
+    addImportedCells(state, [newCell], idx);
+    close();
+    rerender();
+  });
+  function toastNoServers() {
+    const t = document.createElement('div');
+    t.className = 'nbe-toast nbe-toast-error nbe-toast-in';
+    t.textContent = 'No WebMCP server is enabled — add some in flex first (autoui, d3, observable-plot…)';
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 3500);
+  }
+}
+
+/**
+ * Walk back from `cell` to find the nearest cell with a varname (typically a
+ * SQL cell). The widget template will bind to that variable so the chosen
+ * widget visualises the upstream cell's output. Returns null if none.
+ */
+function findUpstreamVarname(state: NotebookState, cell: NotebookCell): string | null {
+  const idx = state.cells.findIndex((c) => c.id === cell.id);
+  for (let i = idx; i >= 0; i--) {
+    const c = state.cells[i];
+    if (c?.varname) return c.varname;
+  }
+  return null;
+}
+
+/**
+ * +agent bar — toggled inline below the cell action bar. The user types a
+ * prompt in <auto-chat-input>, runAgentLoop is invoked with a focused tool
+ * layer that lets the LLM:
+ *   - read the current cell + scope
+ *   - rewrite the current cell content
+ *   - insert a new cell after it (text / sql / js / widget)
+ * Every mutation logs into state.history so the user can ⟲ revert.
+ * Provider: RemoteLLMProvider via /api/chat (proxy reads env LLM_API_KEY).
+ */
+function toggleAgentBar(host: HTMLElement, state: NotebookState, cell: NotebookCell, rerender: () => void): void {
+  const existing = host.parentElement?.querySelector(':scope > .nbe-agent-bar');
+  if (existing) { existing.remove(); return; }
+  const bar = document.createElement('div');
+  bar.className = 'nbe-agent-bar';
+  bar.innerHTML = `
+    <auto-chat-input placeholder="ask agent — e.g. 'filter rows where votes > 50' / 'add a sankey of this'"></auto-chat-input>
+    <div class="nbe-agent-status" hidden></div>`;
+  host.insertAdjacentElement('afterend', bar);
+  const input = bar.querySelector('auto-chat-input') as HTMLElement & { disabled?: boolean };
+  const status = bar.querySelector('.nbe-agent-status') as HTMLElement;
+  let aborter: AbortController | null = null;
+  input.addEventListener('widget:interact', (e: Event) => {
+    const detail = (e as CustomEvent).detail ?? {};
+    const action = (detail as { action?: string }).action;
+    // Prevent the event bubbling to the host (flex/etc.) — otherwise their
+    // own widget-interaction handler would launch a SECOND, unconstrained
+    // agent loop that renders widgets outside the notebook (canvas blocks).
+    if (action === 'stop') { e.stopPropagation(); aborter?.abort(); return; }
+    if (action !== 'submit') return;
+    e.stopPropagation();
+    const text = ((detail as { payload?: { text?: string } }).payload?.text ?? '').trim();
+    if (!text) return;
+    void runAgentForCell(text, state, cell, rerender, status, input, () => aborter ??= new AbortController());
+  });
+}
+
+async function runAgentForCell(
+  prompt: string,
+  state: NotebookState,
+  cell: NotebookCell,
+  rerender: () => void,
+  status: HTMLElement,
+  input: HTMLElement & { disabled?: boolean },
+  getAborter: () => AbortController,
+): Promise<void> {
+  status.hidden = false;
+  status.textContent = '…';
+  input.disabled = true;
+  const aborter = getAborter();
+  try {
+    // Lazy import to keep notebook bundle slim when agent is unused.
+    const { RemoteLLMProvider, runAgentLoop } = await import('@webmcp-auto-ui/agent');
+    // Host injects chatApiBase via data (flex serves under /flex, notebook-viewer
+    // at root). Default '/api/chat' kept for hosts mounting at the root.
+    const proxyUrl = (state as { chatApiBase?: string }).chatApiBase ?? '/api/chat';
+    const provider = new RemoteLLMProvider({ proxyUrl, model: 'haiku' });
+    const layer = buildAgentLayerForCell(state, cell, rerender);
+    const systemPrompt = buildAgentSystemPromptForCell(state, cell);
+    await runAgentLoop(prompt, {
+      provider,
+      layers: [layer],
+      systemPrompt,
+      maxIterations: 6,
+      signal: aborter.signal,
+      callbacks: {
+        onToolCall: (call: { name?: string }) => { status.textContent = `· ${call?.name ?? '?'}…`; },
+      },
+    });
+    status.textContent = '✓ done';
+  } catch (err) {
+    status.textContent = 'error: ' + String((err as { message?: unknown })?.message ?? err);
+  } finally {
+    input.disabled = false;
+  }
+}
+
+/**
+ * Build the WebMCP tool layer the agent sees. Tools mutate state via the
+ * shared helpers (addImportedCells, logHistory) so revert via ⟲ history works
+ * exactly like a manual edit.
+ */
+function buildAgentLayerForCell(state: NotebookState, cell: NotebookCell, rerender: () => void) {
+  const idx = () => state.cells.findIndex((c) => c.id === cell.id);
+  const tools = [
+    {
+      name: 'get_current_cell',
+      description: 'Read the cell the user invoked the agent on (id, type, content, varname).',
+      inputSchema: { type: 'object', properties: {} },
+      execute: async () => ({
+        id: cell.id, type: cell.type,
+        content: cell.content,
+        varname: (cell as { varname?: string }).varname,
+      }),
+    },
+    {
+      name: 'list_cells',
+      description: 'List all cells in the notebook (id, type, short content preview).',
+      inputSchema: { type: 'object', properties: {} },
+      execute: async () => state.cells.map((c) => ({
+        id: c.id, type: c.type,
+        preview: (c.content ?? '').slice(0, 120),
+        varname: (c as { varname?: string }).varname,
+      })),
+    },
+    {
+      name: 'update_cell',
+      description: 'Replace the current cell content with new code/markdown. The cell type is preserved.',
+      inputSchema: {
+        type: 'object',
+        properties: { content: { type: 'string', description: 'New full content for the cell.' } },
+        required: ['content'],
+      },
+      execute: async (args: Record<string, unknown>) => {
+        const next = String(args.content ?? '');
+        const before = cell.content;
+        if (before === next) return { ok: true, unchanged: true };
+        // Snapshot prior content so logHistory can support revert.
+        cell.content = next;
+        cell.status = 'stale';
+        state.lastEditAt = Date.now();
+        // Manual history entry — reuse `edit` kind, summary mentions agent.
+        try {
+          (state.history ?? []).push({
+            ts: Date.now(), kind: 'edit',
+            summary: `agent edited ${cell.type} cell`,
+            snapshot: { cellId: cell.id, before, after: next },
+          } as never);
+        } catch { /* ignore — best-effort */ }
+        rerender();
+        return { ok: true };
+      },
+    },
+    {
+      name: 'insert_cell_after',
+      description: 'Insert a new cell directly after the current one. Use type=text for prose, sql for queries, js for scripts/widgets.',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          type:    { type: 'string', enum: ['text', 'sql', 'js'], description: '"text" for markdown prose, "sql" for a query, "js" for a script (use widget(name, params) to render a widget).' },
+          content: { type: 'string', description: 'Cell content.' },
+          varname: { type: 'string', description: 'Optional varname for sql/js cells — exposes the result as a variable to subsequent cells.' },
+        },
+        required: ['type', 'content'],
+      },
+      execute: async (args: Record<string, unknown>) => {
+        const t = String(args.type ?? '');
+        const type: NotebookCell['type'] = t === 'text' ? 'md' : t === 'sql' ? 'sql' : 'js';
+        const newCell: NotebookCell = {
+          id: uid(), type,
+          content: String(args.content ?? ''),
+          hideSource: false, hideResult: false, status: 'stale',
+          ...(args.varname ? { varname: String(args.varname) } : {}),
+        };
+        addImportedCells(state, [newCell], idx());
+        rerender();
+        return { ok: true, id: newCell.id };
+      },
+    },
+    {
+      name: 'list_widgets',
+      description: 'List widgets exposed by the connected WebMCP servers — pickable in JS cells via widget(name, params).',
+      inputSchema: { type: 'object', properties: {} },
+      execute: async () => {
+        const out: Array<{ server: string; name: string; description?: string }> = [];
+        for (const s of state.webmcpServers ?? []) {
+          for (const r of s.layer().recipes ?? []) out.push({ server: s.name, name: r.name, description: r.description });
+        }
+        return out;
+      },
+    },
+  ];
+  return { protocol: 'webmcp' as const, serverName: 'notebook-editor', tools, recipes: [] };
+}
+
+function buildAgentSystemPromptForCell(_state: NotebookState, cell: NotebookCell): string {
+  return [
+    'You are an in-notebook editing assistant. The user invoked you on a specific cell.',
+    'Your job: rewrite that cell, OR insert a follow-up cell after it, based on the user\'s prompt.',
+    `The current cell is of type "${cell.type}".`,
+    'Workflow:',
+    '  1. Call get_current_cell to read the cell content + varname.',
+    '  2. If the user wants to TRANSFORM the existing cell (filter, refactor, fix), call update_cell.',
+    '  3. If the user wants a FOLLOW-UP step (chart, summary, follow-up query), call insert_cell_after.',
+    '  4. For widgets: call list_widgets first to discover available names, then write a JS cell with `return widget("<name>", { rows, ...params })`.',
+    'Be terse. One or two tool calls is usually enough. Do not explain at length.',
+  ].join('\n');
+}
+
 // ---------------------------------------------------------------------------
 // Result rendering — editorial flavour (serif headers, mono cells, discreet)
 // ---------------------------------------------------------------------------
@@ -471,7 +843,7 @@ function formatMs(ms: number): string {
   return (ms / 1000).toFixed(2) + 's';
 }
 
-function renderResultInto(el: HTMLElement, cell: NotebookCell, overlay: RuntimeOverlay | null): void {
+function renderResultInto(el: HTMLElement, cell: NotebookCell, overlay: RuntimeOverlay | null, stateRef?: NotebookState): void {
   const r = effectiveResult(cell, overlay) ?? cell.lastResult;
   el.innerHTML = '';
   if (!r) {
@@ -509,6 +881,22 @@ function renderResultInto(el: HTMLElement, cell: NotebookCell, overlay: RuntimeO
     renderChart(chart, r.spec).catch(() => { /* fallback handled internally */ });
     return;
   }
+  if (r.kind === 'widget') {
+    const fallbackServers = stateRef?.webmcpServers ?? [];
+    for (const w of r.widgets) {
+      const host = document.createElement('div');
+      host.className = 'nb-widget-host';
+      el.appendChild(host);
+      try { mountWidget(host, w.name, w.params, fallbackServers); }
+      catch (err) {
+        const pre = document.createElement('pre');
+        pre.className = 'nbe-result-error';
+        pre.textContent = `widget "${w.name}" failed: ${String((err as { message?: unknown })?.message ?? err)}`;
+        host.appendChild(pre);
+      }
+    }
+    return;
+  }
   // table — editorial style: serif header row, mono cells, minimal chrome.
   const cols = r.columns && r.columns.length ? r.columns
     : (r.rows[0] ? Object.keys(r.rows[0]) : []);

package/src/widgets/notebook/resource-extractor.ts

@@ -4,7 +4,7 @@
 // Consumed by import-modals.ts and left-pane.ts.
 // ---------------------------------------------------------------------------
 
-import { parseBody } from '@webmcp-auto-ui/sdk';
+import { parseBody, parseWidgetDisplayCall } from '@webmcp-auto-ui/sdk';
 import { uid, defaultCellContent } from './shared.js';
 import type { NotebookCell, CellType } from './shared.js';
 
@@ -80,6 +80,21 @@ export function extractCellFromFence(lang: string, content: string): NotebookCel
         return { id: uid(), type: 'sql', content: sql.trim(), hideSource: false, hideResult: false };
       }
     }
+    // widget_display is a local WebMCP tool (autoui), not a remote MCP tool —
+    // route it to the JS sandbox `widget()` helper which captures and renders
+    // inline. callTool() would fail with "No MCP server exposes tool".
+    if (/^(?:[A-Za-z_]\w*_)?widget_display$/.test(name)) {
+      const parsed = parseWidgetDisplayCall(trimmed);
+      if (parsed) {
+        const paramsLiteral = JSON.stringify(parsed.params, null, 2);
+        return {
+          id: uid(),
+          type: 'js',
+          content: `return widget('${parsed.name}', ${paramsLiteral})`,
+          hideSource: false, hideResult: false,
+        };
+      }
+    }
     return {
       id: uid(),
       type: 'js',

package/src/widgets/notebook/share-handlers.ts

@@ -71,7 +71,8 @@ function buildFrontmatter(state: NotebookState): string {
   const title = (state.title || '').trim();
   const description = extractDescription(state);
   const servers = collectEnabledServers();
-  if (!title && !description && servers.length === 0) return '';
+  const webmcpServers = collectEnabledWebmcpServers();
+  if (!title && !description && servers.length === 0 && webmcpServers.length === 0) return '';
 
   const lines: string[] = ['---'];
   if (title) lines.push(`title: ${yamlQuote(title)}`);
@@ -83,10 +84,28 @@ function buildFrontmatter(state: NotebookState): string {
       lines.push(`    url: ${yamlQuote(s.url)}`);
     }
   }
+  if (webmcpServers.length > 0) {
+    // YAML flow-style for compactness (registry ids, no spaces).
+    lines.push(`webmcp_servers: [${webmcpServers.map(yamlQuote).join(', ')}]`);
+  }
   lines.push('---', '');
   return lines.join('\n');
 }
 
+/**
+ * Read canvas.enabledServerIds — the registry ids (e.g. 'autoui', 'd3',
+ * 'observable-plot') of bundled WebMCP servers active in this notebook.
+ * The viewer re-instantiates them from @webmcp-auto-ui/servers on load.
+ */
+function collectEnabledWebmcpServers(): string[] {
+  try {
+    const ids = (canvasVanilla as { enabledServerIds?: string[] }).enabledServerIds ?? [];
+    return ids.filter((id): id is string => typeof id === 'string' && id.length > 0);
+  } catch {
+    return [];
+  }
+}
+
 function extractDescription(state: NotebookState): string {
   for (const cell of state.cells) {
     if (cell.type !== 'md') continue;