@webmcp-auto-ui/ui 2.5.35 → 2.5.37

package/src/recipe/RecipeCodeBlock.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">
+  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';
+
+  interface Props {
+    code: string;
+    lang?: string;
+    /**
+     * Custom action buttons in the gutter. If omitted AND `onrun` is provided,
+     * a default Run button is rendered (back-compat with original flex behavior).
+     */
+    actions?: RecipeBlockAction[];
+    /**
+     * Back-compat: legacy flex usage. When set, a default Run button is rendered
+     * that calls runCode(code, lang) and forwards the result to this callback.
+     * 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 {
+    code = '',
+    lang = 'text',
+    actions = undefined,
+    onrun,
+    scope,
+  }: Props = $props();
+
+  let editable = $state('');
+  let runStatus = $state<'idle' | 'running' | 'done' | 'error'>('idle');
+  let elapsed = $state(0);
+  let liveTokens = $state(0);
+  let lastDuration = $state<number | undefined>(undefined);
+  let lastTokens = $state<number | undefined>(undefined);
+  let timerId: ReturnType<typeof setInterval> | undefined;
+  let doneResetId: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    editable = code;
+  });
+
+  let highlightedHtml = $derived(highlightCode(editable, lang || 'plaintext'));
+  let preEl: HTMLPreElement | undefined = $state(undefined);
+  let taEl: HTMLTextAreaElement | undefined = $state(undefined);
+
+  function syncScroll() {
+    if (preEl && taEl) {
+      preEl.scrollTop = taEl.scrollTop;
+      preEl.scrollLeft = taEl.scrollLeft;
+    }
+  }
+
+  function formatTokens(n: number): string {
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+    return `${n} tok`;
+  }
+
+  function startTimer(startAt: number) {
+    stopTimer();
+    timerId = setInterval(() => {
+      elapsed = Math.round(performance.now() - startAt);
+      liveTokens = estimateTokens(editable);
+    }, 60);
+  }
+
+  function stopTimer() {
+    if (timerId) {
+      clearInterval(timerId);
+      timerId = undefined;
+    }
+  }
+
+  async function handleRun() {
+    if (runStatus === 'running') return;
+    if (doneResetId) {
+      clearTimeout(doneResetId);
+      doneResetId = undefined;
+    }
+    runStatus = 'running';
+    elapsed = 0;
+    liveTokens = estimateTokens(editable);
+    const t0 = performance.now();
+    startTimer(t0);
+
+    const multi = canvas.multiClient as McpMultiClient | undefined;
+    const result = await runCode(editable, lang, multi, scope);
+
+    stopTimer();
+    lastDuration = result.durationMs;
+    lastTokens = result.tokens;
+    runStatus = result.status === 'error' ? 'error' : 'done';
+
+    onrun?.({ code: editable, lang, result });
+
+    if (runStatus === 'done') {
+      doneResetId = setTimeout(() => {
+        if (runStatus === 'done') runStatus = 'idle';
+      }, 1000);
+    }
+  }
+
+  // Resolve the action list: explicit actions OR back-compat single Run button.
+  const resolvedActions = $derived<RecipeBlockAction[]>(
+    actions && actions.length > 0
+      ? actions
+      : onrun
+        ? [{
+            icon: '▶',
+            label: 'Run',
+            onclick: () => handleRun(),
+          }]
+        : []
+  );
+
+  // For the single-action Run case, we render run-status icon + stats inline.
+  const isSingleRunAction = $derived(
+    !actions && !!onrun && resolvedActions.length === 1
+  );
+
+  function handleActionClick(a: RecipeBlockAction) {
+    a.onclick(editable, lang);
+  }
+</script>
+
+<div class="code-block">
+  <div class="gutter">
+    {#if isSingleRunAction}
+      <button
+        type="button"
+        class="run-btn {runStatus}"
+        onclick={() => handleRun()}
+        disabled={runStatus === 'running'}
+        title={runStatus === 'running' ? 'Running...' : 'Run'}
+      >
+        <span class="icon">
+          {#if runStatus === 'running'}
+            {@html '&#x25D0;'}
+          {:else if runStatus === 'done'}
+            {@html '&#x2713;'}
+          {:else if runStatus === 'error'}
+            !
+          {:else}
+            {@html '&#x25B6;'}
+          {/if}
+        </span>
+        {#if runStatus === 'running' || lastDuration !== undefined}
+          <span class="stats">
+            <span class="t">
+              {runStatus === 'running' ? `${elapsed}ms` : `${lastDuration}ms`}
+            </span>
+            <span class="tok">
+              {formatTokens(runStatus === 'running' ? liveTokens : (lastTokens ?? 0))}
+            </span>
+          </span>
+        {/if}
+      </button>
+    {:else}
+      {#each resolvedActions as a}
+        <button
+          type="button"
+          class="action-btn {a.variant ?? 'default'}"
+          onclick={() => handleActionClick(a)}
+          title={a.label ?? a.icon}
+        >
+          <span class="icon">{@html a.icon}</span>
+        </button>
+      {/each}
+    {/if}
+  </div>
+
+  <div class="editor-wrap">
+    {#if lang && lang !== 'text'}
+      <div class="lang-tag font-mono">{lang}</div>
+    {/if}
+    <pre bind:this={preEl} class="editor highlight-layer hljs font-mono" aria-hidden="true"><code class="hljs language-{lang || 'plaintext'}">{@html highlightedHtml}</code></pre>
+    <textarea
+      bind:this={taEl}
+      bind:value={editable}
+      onscroll={syncScroll}
+      spellcheck="false"
+      autocomplete="off"
+      rows={Math.min(Math.max(editable.split('\n').length, 3), 20)}
+      class="editor input-layer font-mono"
+    ></textarea>
+  </div>
+</div>
+
+<style>
+  .code-block {
+    display: flex;
+    align-items: stretch;
+    gap: 6px;
+    margin: 0.5rem 0;
+  }
+  .gutter {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: stretch;
+  }
+  .run-btn,
+  .action-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: 56px;
+    padding: 8px 6px;
+    border-radius: 0.375rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #0d1117;
+    color: rgb(180, 180, 180);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    cursor: pointer;
+    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+  }
+  .run-btn:hover:not(:disabled),
+  .action-btn:hover:not(:disabled) {
+    background: #161b22;
+    color: #fff;
+  }
+  .run-btn:disabled,
+  .action-btn:disabled {
+    cursor: progress;
+  }
+  .run-btn .icon,
+  .action-btn .icon {
+    font-size: 14px;
+    line-height: 1;
+  }
+  .run-btn.running .icon {
+    animation: spin 0.9s linear infinite;
+  }
+  .run-btn.done,
+  .action-btn.success {
+    color: rgb(74, 222, 128);
+    border-color: rgba(74, 222, 128, 0.4);
+  }
+  .run-btn.error,
+  .action-btn.error {
+    color: rgb(248, 113, 113);
+    border-color: rgba(248, 113, 113, 0.4);
+  }
+  .run-btn .stats {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    font-size: 9px;
+    color: rgb(160, 160, 160);
+    line-height: 1.2;
+  }
+  .run-btn .stats .t { font-weight: 600; }
+  .run-btn .stats .tok { opacity: 0.8; }
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+
+  .editor-wrap {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+  }
+  .lang-tag {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    font-size: 9px;
+    color: rgba(255, 255, 255, 0.35);
+    text-transform: lowercase;
+    pointer-events: none;
+  }
+  .editor {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    background: #0d1117;
+    color: rgb(220, 220, 220);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.375rem;
+    padding: 0.7rem;
+    font-size: 0.7rem;
+    line-height: 1.5;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    white-space: pre;
+    tab-size: 2;
+    margin: 0;
+  }
+  .highlight-layer {
+    position: absolute;
+    inset: 0;
+    overflow: auto;
+    pointer-events: none;
+    border-color: transparent;
+  }
+  .highlight-layer :global(code.hljs) {
+    background: transparent;
+    padding: 0;
+  }
+  .input-layer {
+    position: relative;
+    color: transparent;
+    caret-color: rgb(220, 220, 220);
+    background: transparent;
+    resize: vertical;
+    outline: none;
+    overflow: auto;
+  }
+  .input-layer::selection {
+    color: transparent;
+    background: rgba(96, 165, 250, 0.35);
+  }
+  .input-layer:focus {
+    border-color: rgba(96, 165, 250, 0.45);
+  }
+  .editor-wrap {
+    min-height: 0;
+  }
+</style>

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/recipe/types.ts

@@ -0,0 +1,10 @@
+export interface RecipeBlockAction {
+  /** Glyph or HTML entity. Examples: '▶', '+', '⧉', '✓' */
+  icon: string;
+  /** Tooltip text. Defaults to icon. */
+  label?: string;
+  /** Visual variant. */
+  variant?: 'default' | 'success' | 'error';
+  /** Click handler. Receives the (possibly edited) code + lang. */
+  onclick: (code: string, lang: string) => void;
+}

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,13 +1,16 @@
-import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
-import type { CellExecutor, CellExecContext, CellResult, DataServerDescriptor } from '../shared.js';
+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[]): string | 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.name;
+      for (const t of srv.tools ?? []) if (p.test(t.name)) return { srv, tool: t };
     }
   }
   return null;
@@ -16,16 +19,27 @@ function findSqlTool(servers: DataServerDescriptor[]): string | null {
 export function createSqlExecutor(getServers: () => DataServerDescriptor[]): CellExecutor {
   return async (ctx: CellExecContext): Promise<CellResult> => {
     const startedAt = Date.now();
-    const toolName = findSqlTool(getServers());
-    if (!toolName) {
+    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 };
 
+    // Build args from the tool's inputSchema:
+    //  1. Pick the code-carrying param (query / sql / statement / ...) via findCodeParamName.
+    //  2. Auto-infer required params (e.g. `schema` enum from FROM/JOIN regex).
+    //  3. Merge cell-level overrides from cell.args (parsed from `-- @meta {...}` line).
+    const codeParam = findCodeParamName(tool.inputSchema) ?? 'sql';
+    const auto = buildToolArgs(tool.inputSchema, codeParam, sql, 'sql');
+    const args: Record<string, unknown> = { ...auto, ...(ctx.cell.args ?? {}) };
+    // Code param is owned by the cell content, never overridable via @meta
+    args[codeParam] = sql;
+
     let raw: unknown;
     try {
-      raw = await callToolViaPostMessage(toolName, { sql });
+      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 };
     }