@webmcp-auto-ui/ui 2.5.36 → 2.5.37

package/src/recipe/RecipeRunModal.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import type { RunTab } from '@webmcp-auto-ui/sdk';
+  import { safeStringify } from '@webmcp-auto-ui/sdk';
+  import { WidgetRenderer } from '@webmcp-auto-ui/ui';
+  import type { WebMcpServer } from '@webmcp-auto-ui/core';
+
+  interface Props {
+    open: boolean;
+    runs: RunTab[];
+    activeTabId: string | null;
+    onclose: () => void;
+    onreplay: (tabId: string) => void;
+    onselectTab: (tabId: string) => void;
+    /** When true, render as an inline panel inside the host modal instead of a floating side panel. */
+    inline?: boolean;
+    /** Connected WebMCP servers — needed for custom widget renderers (e.g. canvas2d). */
+    servers?: WebMcpServer[];
+  }
+
+  let {
+    open,
+    runs,
+    activeTabId,
+    onclose,
+    onreplay,
+    onselectTab,
+    inline = false,
+    servers = [],
+  }: Props = $props();
+
+  const active = $derived(runs.find((r) => r.id === activeTabId) ?? runs[runs.length - 1] ?? null);
+
+  let logsOpen = $state(true);
+  let copyState = $state<'idle' | 'copied'>('idle');
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function formatTokens(n: number | undefined): string {
+    if (n == null) return '—';
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+    return `${n}`;
+  }
+
+  async function copyOutput() {
+    if (!active) return;
+    try {
+      const text =
+        active.result.status === 'error'
+          ? (active.result.error ?? '')
+          : safeStringify(active.result.output);
+      await navigator.clipboard.writeText(text);
+      copyState = 'copied';
+      if (copyTimer) clearTimeout(copyTimer);
+      copyTimer = setTimeout(() => { copyState = 'idle'; }, 1500);
+    } catch {
+      /* ignore */
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="run-panel {inline ? 'inline' : 'side'} bg-surface border border-border2 rounded-2xl flex flex-col shadow-2xl overflow-hidden"
+    transition:fly={{ x: inline ? 0 : 24, y: inline ? 12 : 0, duration: 200 }}
+  >
+    <!-- Header -->
+    <div class="flex items-center gap-3 px-4 py-3 border-b border-border flex-shrink-0">
+      <span class="font-mono text-xs font-bold text-text1 flex-1 truncate">
+        {#if active}
+          {@html '&#x25B6;'} Run · <span class="text-accent">{active.label}</span>
+        {:else}
+          Run
+        {/if}
+      </span>
+      <button
+        class="text-text2 hover:text-text1 font-mono text-base leading-none transition-colors"
+        onclick={onclose}
+        title="Close"
+      >x</button>
+    </div>
+
+    <!-- Tabs (if multiple) -->
+    {#if runs.length > 1}
+      <div class="flex items-center gap-1 px-3 py-1.5 border-b border-border overflow-x-auto flex-shrink-0">
+        {#each runs as tab (tab.id)}
+          <button
+            class="font-mono text-[10px] px-2 py-1 rounded border transition-colors whitespace-nowrap
+                   {tab.id === active?.id
+                     ? 'border-accent/50 text-accent bg-accent/10'
+                     : 'border-border2 text-text2 hover:text-text1'}"
+            onclick={() => onselectTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    {#if active}
+      <!-- Stats row -->
+      <div class="flex items-center gap-4 px-4 py-2 border-b border-border flex-shrink-0 font-mono text-[11px]">
+        <span class="text-text2">
+          {@html '&#x23F1;'} <span class="text-text1">{active.result.durationMs ?? '—'}{active.result.durationMs != null ? 'ms' : ''}</span>
+        </span>
+        <span class="text-text2">
+          {@html '&#x25FC;'} <span class="text-text1">{formatTokens(active.result.tokens)} tok</span>
+        </span>
+        <span class="ml-auto">
+          {#if active.result.status === 'running'}
+            <span class="text-accent">{@html '&#x25D0;'} running</span>
+          {:else if active.result.status === 'done'}
+            <span class="text-teal">{@html '&#x2713;'} done</span>
+          {:else if active.result.status === 'error'}
+            <span class="text-red-400">! error</span>
+          {:else}
+            <span class="text-text2">idle</span>
+          {/if}
+        </span>
+        <button
+          class="font-mono text-xs h-6 px-2 rounded border border-border2 text-text2 hover:text-text1 transition-colors"
+          onclick={() => onreplay(active.id)}
+          disabled={active.result.status === 'running'}
+          title="Replay"
+        >{@html '&#x21BB;'}</button>
+      </div>
+
+      <!-- Body -->
+      <div class="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3">
+        <!-- Output -->
+        <div>
+          <div class="flex items-center mb-1">
+            <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">
+              {active.result.status === 'error'
+                ? 'Error'
+                : (active.result.widgets && active.result.widgets.length > 0) || active.result.widget
+                  ? `Widget${active.result.widgets && active.result.widgets.length > 1 ? `s (${active.result.widgets.length})` : ''}`
+                  : 'Output'}
+            </span>
+            {#if !active.result.widget && !(active.result.widgets && active.result.widgets.length > 0)}
+              <button
+                class="ml-auto font-mono text-[10px] px-2 py-0.5 rounded border transition-colors
+                       {copyState === 'copied' ? 'border-teal/40 text-teal' : 'border-border2 text-text2 hover:text-text1'}"
+                onclick={copyOutput}
+              >
+                {copyState === 'copied' ? 'copied' : 'copy'}
+              </button>
+            {/if}
+          </div>
+          {#if active.result.status === 'done' && active.result.widgets && active.result.widgets.length > 0}
+            <div class="widget-host flex flex-col gap-3">
+              {#key active.id}
+                {#each active.result.widgets as w, i (i)}
+                  <WidgetRenderer type={w.name} data={w.params} {servers} />
+                {/each}
+              {/key}
+            </div>
+          {:else if active.result.status === 'done' && active.result.widget}
+            <div class="widget-host">
+              {#key active.id}
+                <WidgetRenderer
+                  type={active.result.widget.name}
+                  data={active.result.widget.params}
+                  {servers}
+                />
+              {/key}
+            </div>
+          {:else}
+            <pre class="output-pre font-mono"><code>{
+              active.result.status === 'running'
+                ? '...'
+                : active.result.status === 'error'
+                  ? (active.result.error ?? '(unknown error)')
+                  : safeStringify(active.result.output)
+            }</code></pre>
+          {/if}
+        </div>
+
+        <!-- Logs -->
+        {#if active.result.logs.length > 0}
+          <div>
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="flex items-center gap-1 cursor-pointer select-none"
+              onclick={() => logsOpen = !logsOpen}
+            >
+              <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Logs ({active.result.logs.length})</span>
+              <span class="text-[10px] text-text2 ml-1 transition-transform {logsOpen ? 'rotate-90' : ''}">{@html '&#x25B6;'}</span>
+            </div>
+            {#if logsOpen}
+              <div class="mt-1 flex flex-col gap-0.5">
+                {#each active.result.logs as entry, i (i)}
+                  <div class="font-mono text-[10px] text-text2">
+                    <span class="text-text2/60">[+{entry.t}ms]</span>
+                    <span class="text-text1">{entry.msg}</span>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <div class="flex-1 flex items-center justify-center">
+        <span class="font-mono text-xs text-text2">No run yet</span>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .run-panel.side {
+    width: 100%;
+    height: 100%;
+  }
+  .run-panel.inline {
+    width: 100%;
+    max-height: 50vh;
+  }
+  .widget-host {
+    background: #0d1117;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.375rem;
+    padding: 0.6rem 0.7rem;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+  }
+  .widget-host :global(> *) {
+    flex: 1;
+    min-height: 0;
+  }
+  .output-pre {
+    background: #0d1117;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.375rem;
+    padding: 0.6rem 0.7rem;
+    margin: 0;
+    font-size: 0.7rem;
+    line-height: 1.5;
+    color: rgb(220, 220, 220);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+</style>

package/src/widgets/WidgetRenderer.svelte

@@ -72,6 +72,7 @@
   import './notebook/notebook.svelte';
   // Agent browsers (registered as widgets for widget_display)
   import '../agent/RecipeBrowser.svelte';
+  import '../agent/ToolBrowser.svelte';
 
   /** Native widget types served as custom elements (`<auto-${type}>`). */
   const NATIVE_CUSTOM_ELEMENTS = new Set<string>([
@@ -85,6 +86,7 @@
     'notebook',
     // Agent browsers
     'recipe-browser',
+    'tool-browser',
   ]);
 
   /** A vanilla renderer: returns cleanup or Promise thereof. Still used for

package/src/widgets/notebook/executors/sql.ts

@@ -1,14 +1,16 @@
-import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
 import { findCodeParamName, buildToolArgs } from '@webmcp-auto-ui/sdk';
 import type { CellExecutor, CellExecContext, CellResult, DataServerDescriptor, DataServerTool } from '../shared.js';
 
 const PATTERN_PRIMARY = /^.*query_sql$/i;
 const PATTERN_FALLBACK = /^(query|run|execute)(_sql)?$/i;
 
-function findSqlTool(servers: DataServerDescriptor[]): DataServerTool | null {
+interface SqlHit { srv: DataServerDescriptor; tool: DataServerTool; }
+
+function findSqlTool(servers: DataServerDescriptor[]): SqlHit | null {
   for (const p of [PATTERN_PRIMARY, PATTERN_FALLBACK]) {
     for (const srv of servers) {
-      for (const t of srv.tools ?? []) if (p.test(t.name)) return t;
+      for (const t of srv.tools ?? []) if (p.test(t.name)) return { srv, tool: t };
     }
   }
   return null;
@@ -17,10 +19,11 @@ function findSqlTool(servers: DataServerDescriptor[]): DataServerTool | null {
 export function createSqlExecutor(getServers: () => DataServerDescriptor[]): CellExecutor {
   return async (ctx: CellExecContext): Promise<CellResult> => {
     const startedAt = Date.now();
-    const tool = findSqlTool(getServers());
-    if (!tool) {
+    const hit = findSqlTool(getServers());
+    if (!hit) {
       return { ok: false, error: 'No SQL tool available on connected servers.', errorKind: 'schema', durationMs: Date.now() - startedAt };
     }
+    const { srv, tool } = hit;
     const sql = (ctx.cell.content ?? '').trim();
     if (!sql) return { ok: true, kind: 'empty', durationMs: Date.now() - startedAt };
 
@@ -36,7 +39,7 @@ export function createSqlExecutor(getServers: () => DataServerDescriptor[]): Cel
 
     let raw: unknown;
     try {
-      raw = await callToolViaPostMessage(tool.name, args);
+      raw = await canvas.callTool(srv.name, tool.name, args);
     } catch (err) {
       return { ok: false, error: String((err as { message?: unknown })?.message ?? err), errorKind: 'runtime', durationMs: Date.now() - startedAt };
     }

package/src/widgets/notebook/import-modal-api.ts

@@ -55,19 +55,15 @@ type ModalEl = HTMLElement & {
 let _modal: ModalEl | null = null;
 let _cleanup: (() => void) | null = null;
 
-function ensureModal(): ModalEl {
+async function ensureModal(): Promise<ModalEl> {
   if (_modal && document.contains(_modal)) return _modal;
 
-  // Register the CE if not already done (Svelte registers it on first import
-  // but we ensure it here for safety).
-  if (!customElements.get('auto-import-modal')) {
-    // Dynamic import triggers CE registration via Svelte's customElement decorator.
-    // Since this module is already bundled with the CE, it's already registered.
-    // If somehow not registered, fall back gracefully.
-  }
-
   const el = document.createElement('auto-import-modal') as ModalEl;
   document.body.appendChild(el);
+  // Svelte 5's connectedCallback is async (awaits a microtask before creating
+  // $$c), and exported methods are exposed via getters that read $$c. Yield
+  // one microtask so el.openModal/closeModal are defined when we call them.
+  await Promise.resolve();
   _modal = el;
   return el;
 }
@@ -84,8 +80,8 @@ export function closeImportModal(): void {
 // openAddMdModal
 // ---------------------------------------------------------------------------
 
-export function openAddMdModal(onPick: (content: string) => void): void {
-  const el = ensureModal();
+export async function openAddMdModal(onPick: (content: string) => void): Promise<void> {
+  const el = await ensureModal();
 
   // Clean up previous listener
   _cleanup?.();
@@ -111,8 +107,8 @@ export function openAddMdModal(onPick: (content: string) => void): void {
 // openAddRecipeModal
 // ---------------------------------------------------------------------------
 
-export function openAddRecipeModal(opts: AddRecipeModalOptions): void {
-  const el = ensureModal();
+export async function openAddRecipeModal(opts: AddRecipeModalOptions): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 
@@ -141,11 +137,11 @@ export function openAddRecipeModal(opts: AddRecipeModalOptions): void {
 // openRecipeViewerModal
 // ---------------------------------------------------------------------------
 
-export function openRecipeViewerModal(
+export async function openRecipeViewerModal(
   recipe: ImportedRecipe,
   onInjectCell: (cell: NotebookCell) => void,
-): void {
-  const el = ensureModal();
+): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 
@@ -184,11 +180,11 @@ export function openRecipeViewerModal(
 // openToolViewerModal
 // ---------------------------------------------------------------------------
 
-export function openToolViewerModal(
+export async function openToolViewerModal(
   tool: McpToolLike,
   onInjectCells: (cells: NotebookCell[]) => void,
-): void {
-  const el = ensureModal();
+): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 

package/src/widgets/notebook/import-modal.svelte

@@ -18,7 +18,7 @@
   // ---------------------------------------------------------------------------
 
   import { filterRecipes, sortRecipes, WEBMCP_RECIPES } from '@webmcp-auto-ui/agent';
-  import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+  import { canvas } from '@webmcp-auto-ui/sdk/canvas';
   import { parseBody } from '@webmcp-auto-ui/sdk';
   import MarkdownView from '../../primitives/MarkdownView.svelte';
   import RecipeCodeBlock from '../../recipe/RecipeCodeBlock.svelte';
@@ -157,7 +157,7 @@
     if (d.mcpServers?.length) {
       const fetches = d.mcpServers.map(async (srv) => {
         try {
-          const res: any = await callToolViaPostMessage(`${srv.name}_list_recipes`, {});
+          const res: any = await canvas.callTool(srv.name, 'list_recipes', {});
           const items = extractRecipeItems(res, srv);
           if (items.length) recipes = [...recipes, ...items];
         } catch { /* ignore */ }
@@ -239,8 +239,9 @@
     // Fetch body on demand if missing
     if (!r.body && r.serverName && r.serverName !== 'webmcp') {
       try {
-        const res: any = await callToolViaPostMessage(
-          `${r.serverName}_get_recipe`,
+        const res: any = await canvas.callTool(
+          r.serverName,
+          'get_recipe',
           { name: r.originalName ?? r.name, id: r.id ?? r.name },
         );
         r = { ...r, body: extractRecipeBody(res) ?? '' };

package/src/widgets/notebook/left-pane.ts

@@ -6,7 +6,7 @@
 // Collapsed by default.
 // ---------------------------------------------------------------------------
 
-import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
 import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modal-api.js';
 import type { NotebookCell, NotebookState, DataServerDescriptor } from './shared.js';
 
@@ -73,7 +73,7 @@ export function mountLeftPane(
       section.innerHTML = `
         <header class="nb-lp-srv-head">
           <span class="nb-lp-srv-dot"></span>
-          <span class="nb-lp-srv-name">${escapeHtml(srv.name)}</span>
+          <span class="nb-lp-srv-name">${escapeHtml(srv.serverName ?? srv.label ?? srv.name)}</span>
         </header>
         <div class="nb-lp-srv-groups">
           ${srv.recipes?.length ? `
@@ -134,7 +134,7 @@ export function mountLeftPane(
     }
     if (!imported.body) {
       try {
-        const res: any = await callToolViaPostMessage(`${srv.name}_get_recipe`, { name: r.name, id: r.name });
+        const res: any = await canvas.callTool(srv.name, 'get_recipe', { name: r.name, id: r.name });
         const text = res?.content?.find?.((c: any) => c.type === 'text')?.text;
         if (text) {
           let body = text;

package/src/widgets/notebook/notebook.svelte

@@ -23,7 +23,6 @@
     title?: string;
     mode?: 'edit' | 'view';
     autoRun?: boolean;
-    hideLiveToggle?: boolean;
     cells?: NotebookCell[];
     /** MCP servers for SQL execution (array of {name, url}) */
     servers?: Array<{ name: string; url?: string }>;

package/src/widgets/notebook/notebook.ts

@@ -36,6 +36,8 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     mode: (data.mode as any) ?? 'edit',
     cells: data.cells as any,
     autoRun: (data as any).autoRun === true,
+    publishedSlug: (data as any).publishedSlug,
+    publishedToken: (data as any).publishedToken,
   });
 
   // Live mode runtime overlay (created lazily). Never mutates state.
@@ -54,7 +56,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
       <div class="nbe-leftpane-slot"></div>
       <div class="nbe-shell">
         <div class="nbe-kicker">
-          <span class="nbe-live-toggle-slot"></span>
           <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>
@@ -104,24 +105,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     });
   }
 
-  const hideLiveToggle = (data as any).hideLiveToggle === true;
-
-  function renderLiveToggle() {
-    const slot = shell.querySelector('.nbe-live-toggle-slot') as HTMLElement;
-    if (hideLiveToggle) { slot.innerHTML = ''; return; }
-    if (state.mode === 'edit') {
-      const checked = state.autoRun === true ? 'checked' : '';
-      slot.innerHTML = `<label class="nbe-live-toggle" title="Re-execute SQL cells against connected servers when this notebook is opened in view mode."><input type="checkbox" ${checked} />Live data</label>`;
-      const cb = slot.querySelector('input[type=checkbox]') as HTMLInputElement;
-      cb.addEventListener('change', () => {
-        state.autoRun = cb.checked;
-        rerender();
-      });
-    } else {
-      slot.innerHTML = '';
-    }
-  }
-
   function renderLiveBadge() {
     const slot = shell.querySelector('.nbe-live-badge-slot') as HTMLElement;
     if (state.mode === 'view' && state.autoRun === true) {
@@ -194,7 +177,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   function rerender() {
     const restore = preserveScrollAround(cellsEl);
     mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); });
-    renderLiveToggle();
     renderLiveBadge();
     renderEmptyState();
     renderCells();
@@ -221,9 +203,8 @@ export async function render(container: HTMLElement, data: Record<string, unknow
           rerender();
         });
       } else if (which === 'recipe') {
-        const mcpServers = (Array.isArray((data as any)?.servers) ? (data as any).servers : [])
-          .map((s: any) => ({ name: String(s?.name ?? ''), url: s?.url ? String(s.url) : undefined }))
-          .filter((s: any) => s.name);
+        const mcpServers = collectDataServers(data)
+          .map((s) => ({ name: s.name, url: s.url }));
         openAddRecipeModal({
           mcpServers,
           scope: 'data',
@@ -287,7 +268,7 @@ 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 globalThis.__multiMcp (singleton).
+  // The notebook reads MCP state passively from canvas.dataServers.
   autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
 
   // Keep pane servers in sync with canvas changes
@@ -801,18 +782,6 @@ function injectLayoutStyles(): void {
 .nbe-toast.nbe-toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
 .nbe-toast.nbe-toast-error { color: var(--color-accent2); border-color: var(--color-accent2); }
 
-/* Live mode — discreet toggle in header (edit mode only) */
-.nbe-live-toggle {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 10.5px; color: var(--color-text2);
-  letter-spacing: 0.06em; text-transform: uppercase;
-  cursor: pointer; user-select: none;
-  padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 4px;
-}
-.nbe-live-toggle:hover { color: var(--color-text1); border-color: var(--color-border2); }
-.nbe-live-toggle input { margin: 0; cursor: pointer; }
-
 /* Title row + Live badge (view mode + autoRun) */
 .nbe-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
 .nbe-title-row .nbe-title { flex: 1; min-width: 0; }

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

@@ -5,6 +5,7 @@
 // ---------------------------------------------------------------------------
 
 import { encode, buildShortUrl } from '@webmcp-auto-ui/sdk';
+import { canvasVanilla } from '@webmcp-auto-ui/sdk/canvas-vanilla';
 import type { NotebookState, NotebookCell } from './shared.js';
 
 // ---------------------------------------------------------------------------
@@ -27,8 +28,23 @@ export async function shareAsMarkdown(state: NotebookState): Promise<void> {
   triggerDownload(blob, sanitizeFilename(state.title || 'notebook') + '.md');
 }
 
-function serializeToMarkdown(state: NotebookState): string {
+/**
+ * Serialize a notebook state as a HyperSkill standalone markdown:
+ *   ---
+ *   title: "..."
+ *   description: "..."
+ *   servers:
+ *     - name: foo
+ *       url: https://...
+ *   ---
+ *   <body with ```sql / ```js fenced cells>
+ *
+ * Re-parsable via @webmcp-auto-ui/core::parseFrontmatter + @webmcp-auto-ui/sdk::parseBody.
+ */
+export function serializeToMarkdown(state: NotebookState): string {
+  const fm = buildFrontmatter(state);
   const parts: string[] = [];
+  if (fm) parts.push(fm);
   if (state.title) parts.push(`# ${state.title}`, '');
   for (const cell of state.cells) {
     if (cell.type === 'md') {
@@ -46,6 +62,60 @@ function serializeToMarkdown(state: NotebookState): string {
   return parts.join('\n').trim() + '\n';
 }
 
+/**
+ * Emit YAML frontmatter for HyperSkill format. Reads connected MCP servers from
+ * the canvas store. Returns '' when nothing useful to declare (no title, no
+ * description, no servers) — caller can skip prepending.
+ */
+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 lines: string[] = ['---'];
+  if (title) lines.push(`title: ${yamlQuote(title)}`);
+  if (description) lines.push(`description: ${yamlQuote(description)}`);
+  if (servers.length > 0) {
+    lines.push('servers:');
+    for (const s of servers) {
+      lines.push(`  - name: ${yamlQuote(s.name)}`);
+      lines.push(`    url: ${yamlQuote(s.url)}`);
+    }
+  }
+  lines.push('---', '');
+  return lines.join('\n');
+}
+
+function extractDescription(state: NotebookState): string {
+  for (const cell of state.cells) {
+    if (cell.type !== 'md') continue;
+    const text = stripHtml(cell.content).trim();
+    if (!text) continue;
+    // First non-heading line of the first md cell.
+    const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
+    const prose = lines.find((l) => !/^#{1,6}\s/.test(l) && !/^[-*]\s/.test(l));
+    if (prose) return prose.slice(0, 200);
+  }
+  return '';
+}
+
+function collectEnabledServers(): { name: string; url: string }[] {
+  try {
+    const servers = canvasVanilla.dataServers ?? [];
+    return servers
+      .filter((s: any) => s?.enabled && s?.url && s?.name && s.name !== 'autoui' && s.kind !== 'ui' && s.kind !== 'webmcp')
+      .map((s: any) => ({ name: String(s.name), url: String(s.url) }));
+  } catch {
+    return [];
+  }
+}
+
+/** Quote a YAML scalar safely. Conservative: always double-quote. */
+function yamlQuote(s: string): string {
+  return '"' + s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"';
+}
+
 function stripHtml(s: string): string {
   if (typeof document === 'undefined') return s;
   const d = document.createElement('div');