@webmcp-auto-ui/ui 2.5.36 → 2.5.38

package/src/base/chat-inline.svelte

@@ -32,7 +32,7 @@
   }
 </script>
 
-<div class="flex items-center gap-2 w-full">
+<div class="chat-inline">
   <input
     bind:this={inputEl}
     bind:value
@@ -40,16 +40,13 @@
     {placeholder}
     {disabled}
     onkeydown={handleKeydown}
-    class="flex-1 h-9 px-3 rounded-lg border border-border2 bg-surface2 text-sm text-text1
-           placeholder:text-text2/40 focus:outline-none focus:border-accent/50
-           disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+    class="chat-inline__input"
   />
   {#if disabled}
     <button
       type="button"
       onclick={handleStop}
-      class="h-9 px-3 rounded-lg border border-accent2/40 bg-accent2/10 text-accent2
-             text-xs font-mono hover:bg-accent2/20 transition-colors flex-shrink-0"
+      class="chat-inline__btn chat-inline__btn--stop"
     >
       stop
     </button>
@@ -58,11 +55,86 @@
       type="button"
       onclick={handleSubmit}
       disabled={!value?.trim()}
-      class="h-9 px-3 rounded-lg border border-accent/40 bg-accent/10 text-accent
-             text-xs font-mono hover:bg-accent/20 disabled:opacity-40 disabled:cursor-not-allowed
-             transition-colors flex-shrink-0"
+      class="chat-inline__btn chat-inline__btn--send"
     >
       send
     </button>
   {/if}
 </div>
+
+<style>
+  .chat-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .chat-inline__input {
+    flex: 1 1 0%;
+    min-width: 0;
+    height: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-border2, var(--color-border, #2a2a2a));
+    background: var(--color-surface2, var(--color-surface, #1a1a1a));
+    color: var(--color-text1, #f5f5f5);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+  }
+
+  .chat-inline__input::placeholder {
+    color: var(--color-text2, #888);
+    opacity: 0.4;
+  }
+
+  .chat-inline__input:focus {
+    border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 50%, transparent);
+  }
+
+  .chat-inline__input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .chat-inline__btn {
+    flex-shrink: 0;
+    height: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 0.6875rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  }
+
+  .chat-inline__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .chat-inline__btn--send {
+    background: color-mix(in srgb, var(--color-accent, #4a9eff) 10%, transparent);
+    color: var(--color-accent, #4a9eff);
+    border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 40%, transparent);
+  }
+
+  .chat-inline__btn--send:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-accent, #4a9eff) 20%, transparent);
+  }
+
+  .chat-inline__btn--stop {
+    background: color-mix(in srgb, var(--color-accent2, #ff6b6b) 10%, transparent);
+    color: var(--color-accent2, #ff6b6b);
+    border-color: color-mix(in srgb, var(--color-accent2, #ff6b6b) 40%, transparent);
+  }
+
+  .chat-inline__btn--stop:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-accent2, #ff6b6b) 20%, transparent);
+  }
+</style>

package/src/index.ts

@@ -21,6 +21,7 @@ export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primiti
 
 // Recipe building blocks (used by RecipeModal and notebook recipe-viewer)
 export { default as RecipeCodeBlock } from './recipe/RecipeCodeBlock.svelte';
+export { default as RecipeRunModal } from './recipe/RecipeRunModal.svelte';
 export type { RecipeBlockAction } from './recipe/types.js';
 
 // Widgets are shipped as Svelte 5 custom elements — import the widget file

package/src/primitives/MarkdownView.svelte

@@ -5,13 +5,23 @@
   interface Props {
     source: string;
     class?: string;
+    onLinkClick?: (href: string, ev: MouseEvent) => void;
   }
 
-  let { source, class: className = '' }: Props = $props();
+  let { source, class: className = '', onLinkClick }: Props = $props();
   const html = $derived(renderMarkdown(source ?? ''));
+
+  function handleClick(ev: MouseEvent) {
+    if (!onLinkClick) return;
+    const a = (ev.target as HTMLElement | null)?.closest?.('a');
+    if (!a) return;
+    const href = a.getAttribute('href');
+    if (!href) return;
+    onLinkClick(href, ev);
+  }
 </script>
 
-<div class="markdown-body {className}">
+<div class="markdown-body {className}" onclick={handleClick} role="presentation">
   {@html html}
 </div>
 

package/src/recipe/RecipeCodeBlock.svelte

@@ -2,6 +2,7 @@
   import type { McpMultiClient } from '@webmcp-auto-ui/core';
   import type { RunResult } from '@webmcp-auto-ui/sdk';
   import { runCode, estimateTokens } from '@webmcp-auto-ui/sdk';
+  import { canvas } from '@webmcp-auto-ui/sdk/canvas';
   import { highlightCode } from '../primitives/markdown-renderer.js';
   import type { RecipeBlockAction } from './types.js';
 
@@ -19,6 +20,12 @@
      * Ignored when `actions` is provided.
      */
     onrun?: (payload: { code: string; lang: string; result: RunResult }) => void;
+    /**
+     * Optional shared scope object. When provided, top-level decls of prior
+     * blocks are visible in this block, and this block's top-level decls are
+     * written back so subsequent blocks can read them. Owner: the host modal.
+     */
+    scope?: Record<string, unknown>;
   }
 
   let {
@@ -26,6 +33,7 @@
     lang = 'text',
     actions = undefined,
     onrun,
+    scope,
   }: Props = $props();
 
   let editable = $state('');
@@ -84,8 +92,8 @@
     const t0 = performance.now();
     startTimer(t0);
 
-    const multi = (globalThis as unknown as { __multiMcp?: { multiClient: McpMultiClient } }).__multiMcp?.multiClient;
-    const result = await runCode(editable, lang, multi);
+    const multi = canvas.multiClient as McpMultiClient | undefined;
+    const result = await runCode(editable, lang, multi, scope);
 
     stopTimer();
     lastDuration = result.durationMs;

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

@@ -68,10 +68,12 @@
   import './rich/gallery.svelte';
   import './rich/carousel.svelte';
   import './rich/chat-input.svelte';
+  import './rich/map.svelte';
   // Notebook (1)
   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>([
@@ -80,11 +82,12 @@
     // Rich
     'stat-card', 'profile', 'json-viewer', 'chart-rich', 'sankey', 'hemicycle',
     'data-table', 'timeline', 'trombinoscope', 'cards', 'grid-data',
-    'js-sandbox', 'log', 'gallery', 'carousel', 'chat-input',
+    'js-sandbox', 'log', 'gallery', 'carousel', 'chat-input', 'map',
     // Notebook
     'notebook',
     // Agent browsers
     'recipe-browser',
+    'tool-browser',
   ]);
 
   /** A vanilla renderer: returns cleanup or Promise thereof. Still used for
@@ -167,7 +170,7 @@
     const tag = `auto-${type}`;
     // Instantiate on first mount. `data` setter is reactive via Svelte 5 custom-element.
     const el = document.createElement(tag) as HTMLElement;
-    (el as unknown as { data: unknown }).data = plainData;
+    (el as unknown as { data: unknown }).data = servers ? { ...plainData, webmcpServers: servers } : plainData;
     const onInteract = (ev: Event) => {
       const ce = ev as CustomEvent<{ action?: string; payload?: unknown }>;
       const action = ce.detail?.action ?? 'interact';
@@ -188,7 +191,7 @@
   $effect(() => {
     const next = plainData;
     if (!isNativeCustomElement || !ceElement) return;
-    (ceElement as unknown as { data: unknown }).data = next;
+    (ceElement as unknown as { data: unknown }).data = servers ? { ...next, webmcpServers: servers } : next;
   });
 
   // ── Vanilla renderer container + lifecycle ────────────
@@ -230,7 +233,7 @@
     let cancelled = false;
 
     try {
-      const result = renderer(container, untrack(() => plainData));
+      const result = renderer(container, untrack(() => servers ? { ...plainData, webmcpServers: servers } : plainData));
       if (result && typeof (result as Promise<unknown>).then === 'function') {
         (result as Promise<void | (() => void)>).then(
           (c) => {
@@ -277,7 +280,7 @@
     runCurrentCleanup();
     container.innerHTML = '';
     try {
-      const result = vanillaRenderer(container, data);
+      const result = vanillaRenderer(container, servers ? { ...data, webmcpServers: servers } : data);
       if (result && typeof (result as Promise<unknown>).then === 'function') {
         (result as Promise<void | (() => void)>).then(
           (c) => { currentCleanup = c ?? undefined; },

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) ?? '' };