@webmcp-auto-ui/ui 2.5.34 → 2.5.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.34",
+  "version": "2.5.36",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/index.ts

@@ -19,6 +19,10 @@ export { default as MarkdownView } from './primitives/MarkdownView.svelte';
 export { default as CodeView } from './primitives/CodeView.svelte';
 export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primitives/markdown-renderer.js';
 
+// Recipe building blocks (used by RecipeModal and notebook recipe-viewer)
+export { default as RecipeCodeBlock } from './recipe/RecipeCodeBlock.svelte';
+export type { RecipeBlockAction } from './recipe/types.js';
+
 // Widgets are shipped as Svelte 5 custom elements — import the widget file
 // side-effect to register its tag (e.g. `import '@webmcp-auto-ui/ui/widgets/simple/stat.svelte';`
 // then use `<auto-stat data={spec}></auto-stat>`). `WidgetRenderer` does this for you.

package/src/recipe/RecipeCodeBlock.svelte

@@ -0,0 +1,323 @@
+<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 { 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;
+  }
+
+  let {
+    code = '',
+    lang = 'text',
+    actions = undefined,
+    onrun,
+  }: 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 = (globalThis as unknown as { __multiMcp?: { multiClient: McpMultiClient } }).__multiMcp?.multiClient;
+    const result = await runCode(editable, lang, multi);
+
+    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/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/notebook/executors/sql.ts

@@ -1,13 +1,14 @@
 import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
-import type { CellExecutor, CellExecContext, CellResult, DataServerDescriptor } from '../shared.js';
+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 {
+function findSqlTool(servers: DataServerDescriptor[]): DataServerTool | 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 t;
     }
   }
   return null;
@@ -16,16 +17,26 @@ 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 tool = findSqlTool(getServers());
+    if (!tool) {
       return { ok: false, error: 'No SQL tool available on connected servers.', errorKind: 'schema', durationMs: Date.now() - startedAt };
     }
     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 callToolViaPostMessage(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

@@ -16,7 +16,6 @@
 // Side-effect import: registers <auto-import-modal> custom element
 import './import-modal.svelte';
 
-import { renderMarkdownWithInjectButtons } from './prose.js';
 import { extractCellsFromRecipe, extractCellsFromTool, extractCellFromFence } from './resource-extractor.js';
 import type { NotebookCell } from './shared.js';
 import type { McpToolLike } from './resource-extractor.js';
@@ -150,9 +149,6 @@ export function openRecipeViewerModal(
 
   _cleanup?.();
 
-  // We'll hold a reference to the prose renderer's destroy fn.
-  let proseDestroy: (() => void) | null = null;
-
   const handler = (e: CustomEvent) => {
     const { action, payload } = e.detail ?? {};
 
@@ -172,8 +168,6 @@ export function openRecipeViewerModal(
 
     if (action === 'inject-all' || action === 'close') {
       el.removeEventListener('widget:interact', handler as EventListener);
-      proseDestroy?.();
-      proseDestroy = null;
       _cleanup = null;
     }
   };
@@ -181,27 +175,9 @@ export function openRecipeViewerModal(
   el.addEventListener('widget:interact', handler as EventListener);
   _cleanup = () => {
     el.removeEventListener('widget:interact', handler as EventListener);
-    proseDestroy?.();
-    proseDestroy = null;
   };
 
   el.openModal({ mode: 'recipe-viewer', recipe });
-
-  // After the CE opens, inject the rendered markdown into [data-role="render"].
-  // requestAnimationFrame ensures Svelte has rendered the modal DOM.
-  requestAnimationFrame(() => {
-    const renderTarget = el.querySelector('[data-role="render"]') as HTMLElement | null;
-    if (!renderTarget) return;
-    const { root, destroy } = renderMarkdownWithInjectButtons(
-      recipe.body ?? '',
-      ({ lang, content }) => {
-        const cell = extractCellFromFence(lang, content);
-        onInjectCell(cell);
-      },
-    );
-    renderTarget.appendChild(root);
-    proseDestroy = destroy;
-  });
 }
 
 // ---------------------------------------------------------------------------

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

@@ -19,6 +19,9 @@
 
   import { filterRecipes, sortRecipes, WEBMCP_RECIPES } from '@webmcp-auto-ui/agent';
   import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+  import { parseBody } from '@webmcp-auto-ui/sdk';
+  import MarkdownView from '../../primitives/MarkdownView.svelte';
+  import RecipeCodeBlock from '../../recipe/RecipeCodeBlock.svelte';
 
   // ---------------------------------------------------------------------------
   // Types (inlined to avoid import-modals.ts cycle)
@@ -90,6 +93,10 @@
   const mode = $derived(data?.mode ?? 'add-md');
   const recipe = $derived(data?.recipe);
   const tool = $derived(data?.tool);
+  const recipeSegments = $derived(parseBody(recipe?.body ?? ''));
+  const recipeCellCount = $derived(
+    recipeSegments.length + ((recipe?.name || recipe?.description) ? 1 : 0),
+  );
 
   // ---------------------------------------------------------------------------
   // Public API — called by wrapper functions
@@ -255,25 +262,13 @@
   // Handlers — recipe-viewer
   // ---------------------------------------------------------------------------
 
-  // prose rendering is done server-side for recipe-viewer; we re-use the
-  // renderMarkdownWithInjectButtons helper injected via slot or data.
-  // Since this is a CE, we render as raw HTML via {@html} after sanitizing.
-  // The inject buttons are wired via event delegation on the section.
-
   function handleInjectAll() {
-    // extractCellsFromRecipe is a pure function from resource-extractor.ts —
-    // but import would create a cycle ui<->notebook. We emit the raw body
-    // and let the consumer (notebook.ts) call extractCellsFromRecipe.
+    // Notebook owns extractCellsFromRecipe to avoid a ui<->notebook cycle.
     emitInteract('inject-all', { recipe: recipe });
     closeModal();
   }
 
-  function handleInjectFence(e: Event) {
-    // Delegated click on .nb-md-fence-inject buttons rendered via {@html}
-    const btn = (e.target as HTMLElement).closest('[data-fence-inject]') as HTMLElement | null;
-    if (!btn) return;
-    const lang = btn.dataset.lang ?? '';
-    const content = btn.dataset.content ?? '';
+  function handleInjectFence(content: string, lang: string) {
     emitInteract('inject-fence', { lang, content });
   }
 
@@ -426,12 +421,30 @@
         {#if recipe?.description}<p>{recipe.description}</p>{/if}
         {#if recipe?.serverName}<span class="nb-imp-recipe-srv">{recipe.serverName}</span>{/if}
       </div>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <section class="nb-imp-body nb-imp-body-recipe" data-role="render" onclick={handleInjectFence}>
-        <!-- Content injected imperatively by notebook.ts via renderMarkdownWithInjectButtons -->
+      <section class="nb-imp-body nb-imp-body-recipe">
+        {#each recipeSegments as seg, i (i)}
+          {#if seg.type === 'markdown'}
+            <MarkdownView source={seg.content} />
+          {:else}
+            <RecipeCodeBlock
+              code={seg.content}
+              lang={seg.lang ?? 'text'}
+              actions={[{
+                icon: '+',
+                label: 'Inject as cell',
+                onclick: handleInjectFence,
+              }]}
+            />
+          {/if}
+        {/each}
       </section>
       <footer class="nb-imp-foot">
-        <button type="button" class="nb-imp-btn" onclick={handleInjectAll}>Inject all cells</button>
+        <button
+          type="button"
+          class="nb-imp-btn nb-imp-primary"
+          onclick={handleInjectAll}
+          disabled={recipeCellCount === 0}
+        >Inject all cells{recipeCellCount > 0 ? ` (${recipeCellCount})` : ''}</button>
       </footer>
 
     <!-- ================================================================ -->
@@ -691,48 +704,4 @@
     font-size: 11.5px;
   }
 
-  /* ---- Styles for prose rendered inside recipe-viewer (delegated via {@html} in consumers) ---- */
-  :global(.nb-md-render) { font-size: 13px; line-height: 1.5; }
-  :global(.nb-md-render h1),
-  :global(.nb-md-render h2),
-  :global(.nb-md-render h3) { margin: 12px 0 6px; }
-  :global(.nb-md-render p) { margin: 6px 0; }
-  :global(.nb-md-render ul),
-  :global(.nb-md-render ol) { margin: 6px 0 6px 20px; }
-  :global(.nb-md-render pre) {
-    background: var(--color-surface2, #f4f4f5);
-    padding: 10px 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-    font-size: 12px;
-  }
-  :global(.nb-md-render code) { font-family: var(--font-mono, monospace); font-size: 12px; }
-  :global(.nb-md-fence) {
-    border: 1px solid var(--color-border, #e4e4e7);
-    border-radius: 8px;
-    margin: 10px 0;
-    overflow: hidden;
-  }
-  :global(.nb-md-fence-head) {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 10px;
-    background: var(--color-surface2, #f4f4f5);
-    font-size: 11px;
-    color: var(--color-text2, #666);
-    border-bottom: 1px solid var(--color-border, #e4e4e7);
-  }
-  :global(.nb-md-fence-lang) { font-family: monospace; flex: 1; }
-  :global(.nb-md-fence-inject) {
-    background: var(--color-accent, #6a55ff);
-    color: #fff;
-    border: 0;
-    border-radius: 4px;
-    padding: 3px 9px;
-    font-size: 11px;
-    cursor: pointer;
-  }
-  :global(.nb-md-fence-inject:hover) { filter: brightness(1.08); }
-  :global(.nb-md-fence pre) { margin: 0; border-radius: 0; background: transparent; }
 </style>

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

@@ -74,7 +74,6 @@ export function mountLeftPane(
         <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-meta">${(srv.recipes?.length ?? 0)} recipes · ${(srv.tools?.length ?? 0)} tools</span>
         </header>
         <div class="nb-lp-srv-groups">
           ${srv.recipes?.length ? `
@@ -141,19 +140,39 @@ export function mountLeftPane(
           let body = text;
           try {
             const parsed = JSON.parse(text);
-            // Recipe servers return either { content: "..." } (legacy) or
-            // { name, description, body, ... } (autoui-style). Pick whichever
-            // string field carries the markdown body, in priority order.
             if (parsed && typeof parsed === 'object') {
-              if (typeof parsed.body === 'string') body = parsed.body;
-              else if (typeof parsed.content === 'string') body = parsed.content;
-              else if (typeof parsed.markdown === 'string') body = parsed.markdown;
+              const candidates = [
+                parsed.body,
+                parsed.content,
+                parsed.markdown,
+                parsed.recipe?.body,
+                parsed.recipe?.content,
+                parsed.recipe?.markdown,
+                parsed.result?.body,
+                parsed.result?.content,
+                parsed.data?.body,
+                parsed.data?.content,
+              ];
+              const hit = candidates.find((c) => typeof c === 'string' && c.trim().length > 0);
+              if (hit) {
+                body = hit;
+              } else {
+                console.warn(
+                  `[notebook] get_recipe(${srv.name}/${r.name}): no recognized body key in parsed JSON. Keys:`,
+                  Object.keys(parsed),
+                );
+              }
             }
           } catch { /* not JSON, use raw text */ }
           imported.body = body;
           recipeBodyCache.set(key, body);
         }
-      } catch { /* pass empty body to viewer */ }
+      } catch (err) {
+        console.warn(`[notebook] get_recipe(${srv.name}/${r.name}) failed:`, err);
+      }
+    }
+    if (!imported.body) {
+      imported.body = `> ⚠ Failed to load recipe body from \`${srv.name}\`. The server returned no usable content for \`${r.name}\`.`;
     }
     openRecipeViewerModal(imported, (cell) => handlers.onInjectCells([cell]));
   }
@@ -236,7 +255,6 @@ function injectLeftPaneStyles() {
       flex-shrink: 0;
     }
     .nb-lp-srv-name { font-weight: 600; color: var(--color-text1, #111); }
-    .nb-lp-srv-meta { margin-left: auto; font-family: monospace; font-size: 10.5px; }
     .nb-lp-group > summary {
       cursor: pointer; padding: 4px 2px; font-size: 11px;
       color: var(--color-text2, #666); font-family: monospace;

package/src/widgets/notebook/notebook.svelte

@@ -21,7 +21,6 @@
   export interface NotebookData {
     id?: string;
     title?: string;
-    kicker?: string;
     mode?: 'edit' | 'view';
     autoRun?: boolean;
     hideLiveToggle?: boolean;

package/src/widgets/notebook/notebook.ts

@@ -35,10 +35,8 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     title: data.title as string ?? 'Untitled notebook',
     mode: (data.mode as any) ?? 'edit',
     cells: data.cells as any,
-    kicker: (data.kicker as string) ?? undefined,
     autoRun: (data as any).autoRun === true,
   });
-  if (!state.kicker) state.kicker = (data.kicker as string) ?? 'untitled';
 
   // Live mode runtime overlay (created lazily). Never mutates state.
   let overlay: RuntimeOverlay | null = null;
@@ -56,7 +54,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">
-          <input class="nbe-kicker-input" value="${escapeAttr(state.kicker || '')}" placeholder="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>
@@ -259,10 +256,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     footerSlot: shell.querySelector('.nbe-publish-footer-slot') as HTMLElement,
     onPublished: () => rerender(),
   });
-  (shell.querySelector('.nbe-kicker-input') as HTMLInputElement).addEventListener('input', (e) => {
-    state.kicker = (e.target as HTMLInputElement).value;
-    state.lastEditAt = Date.now();
-  });
   (shell.querySelector('.nbe-title') as HTMLInputElement).addEventListener('input', (e) => {
     state.title = (e.target as HTMLInputElement).value;
     state.lastEditAt = Date.now();
@@ -623,16 +616,6 @@ function injectLayoutStyles(): void {
   letter-spacing: 0.1em; text-transform: uppercase;
   margin-bottom: 14px;
 }
-.nbe-kicker-input {
-  flex: 0 0 auto; min-width: 120px;
-  background: transparent; border: 1px dashed transparent;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  letter-spacing: 0.1em; text-transform: uppercase;
-  padding: 2px 4px; border-radius: 3px; outline: none;
-}
-.nbe-kicker-input:focus { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text1); }
-.nb-root.nb-view-mode .nbe-kicker-input { pointer-events: none; }
 .nbe-title {
   font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-size: 30px; font-weight: 500;
@@ -650,9 +633,13 @@ function injectLayoutStyles(): void {
 .nbe-handle { position: absolute; left: 0; top: 6px; }
 .nbe-del-abs {
   position: absolute; top: 4px; right: 4px;
-  opacity: 0; transition: opacity 0.15s;
+  opacity: 0.65; transition: opacity 0.15s;
+  width: 26px; height: 26px;
+  font-size: 16px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0;
+  z-index: 2;
 }
-.nbe-cell:hover .nbe-del-abs { opacity: 0.5; }
 .nbe-del-abs:hover { opacity: 1 !important; }
 
 .nbe-prose {
@@ -711,7 +698,7 @@ function injectLayoutStyles(): void {
 }
 .nbe-cell-head {
   display: flex; align-items: center; gap: 8px;
-  padding: 7px 12px;
+  padding: 7px 44px 7px 12px;
   border-bottom: 1px solid var(--color-border);
   font-family: var(--font-mono, 'IBM Plex Mono', monospace);
   font-size: 10px; color: var(--color-text2);

package/src/widgets/notebook/prose.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 // ---------------------------------------------------------------------------
 // Lightweight markdown renderer + allowlist sanitizer for notebook prose cells.
-// Also: renderMarkdownWithInjectButtons — used by recipe viewer modal.
 // No external dependencies.
 // ---------------------------------------------------------------------------
 
@@ -546,80 +545,3 @@ function updateEmptyState(host: HTMLElement): void {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Renderer with inject buttons — used by recipe viewer modal.
-// Each fenced code block gets an "↳ inject" button next to it.
-// ---------------------------------------------------------------------------
-
-export interface InjectFenceEvent {
-  lang: string;
-  content: string;
-}
-
-/**
- * Render markdown into a container. Each fenced code block is rendered with
- * an "↳ inject" button; clicking it calls onInject({lang, content}).
- * Returns a cleanup function.
- */
-export function renderMarkdownWithInjectButtons(
-  body: string,
-  onInject: (e: InjectFenceEvent) => void,
-): { root: HTMLElement; destroy: () => void } {
-  const root = document.createElement('div');
-  root.className = 'nb-md-render';
-
-  const lines = (body || '').replace(/\r\n/g, '\n').split('\n');
-  const buf: string[] = [];
-  let i = 0;
-  const cleanups: Array<() => void> = [];
-
-  const flushProse = () => {
-    if (buf.length) {
-      const chunk = buf.join('\n');
-      const p = document.createElement('div');
-      p.innerHTML = renderProse(chunk);
-      root.appendChild(p);
-      buf.length = 0;
-    }
-  };
-
-  while (i < lines.length) {
-    const line = lines[i];
-    if (/^```/.test(line)) {
-      flushProse();
-      const lang = line.replace(/^```/, '').trim().toLowerCase() || 'text';
-      const code: string[] = [];
-      i++;
-      while (i < lines.length && !/^```/.test(lines[i])) {
-        code.push(lines[i]);
-        i++;
-      }
-      i++; // closing fence
-      const content = code.join('\n');
-
-      const block = document.createElement('div');
-      block.className = 'nb-md-fence';
-      block.innerHTML = `
-        <div class="nb-md-fence-head">
-          <span class="nb-md-fence-lang">${escapeHtml(lang)}</span>
-          <button type="button" class="nb-md-fence-inject">↳ inject</button>
-        </div>
-        <pre class="hljs-pre"><code class="hljs language-${escapeHtml(lang)}">${highlightCode(content, lang)}</code></pre>
-      `;
-      const btn = block.querySelector('.nb-md-fence-inject') as HTMLButtonElement;
-      const handler = () => onInject({ lang, content });
-      btn.addEventListener('click', handler);
-      cleanups.push(() => btn.removeEventListener('click', handler));
-      root.appendChild(block);
-      continue;
-    }
-    buf.push(line);
-    i++;
-  }
-  flushProse();
-
-  return {
-    root,
-    destroy: () => cleanups.forEach((f) => f()),
-  };
-}

package/src/widgets/notebook/recipes/notebook.md

@@ -11,9 +11,6 @@ schema:
     mode:
       type: string
       enum: [edit, view]
-    kicker:
-      type: string
-      description: Small uppercase label above the title (e.g. "analysis", "memo", "brief"). Editable inline. Defaults to "untitled".
     hideLiveToggle:
       type: boolean
       default: false
@@ -52,7 +49,6 @@ The distinguishing feature: prose paragraphs and code cells share a single order
    ```
    widget_display({name: "notebook", params: {
      title: "Q3 observations",
-     kicker: "memo",
      cells: [
        {type: "md", content: "This memo covers the highlights of last quarter."},
        {type: "md", content: "We first look at revenue, then at churn."},
@@ -74,7 +70,6 @@ The distinguishing feature: prose paragraphs and code cells share a single order
 ## Notes
 
 - The serif font (EB Garamond, with Georgia fallback) applies only to prose content inside this widget — it signals "publication" the moment the user sees it.
-- The **kicker** above the title ("analysis", "memo", "internal") is editable inline — click to rename. Keep it short.
 - Prose cells are rendered via an HTML-sanitizing markdown pipeline: markdown syntax is resolved, unsafe tags are stripped (XSS closed), `<mark>` and other editorial tags are preserved.
 - The footer exposes a single `share` button.
 - Run / Stop controls are at the left of each code cell's header, same as the other notebook layouts.
@@ -112,7 +107,6 @@ An editorial piece earns its weight when the prose is anchored to real material.
      name: 'notebook',
      params: {
        title: '...',
-       kicker: 'memo',
        cells: [...],
        servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
      }

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

@@ -26,6 +26,23 @@ const LANG_TO_TYPE: Record<string, CellType> = {
  *  whenever such a fence is mapped so the user gets a hint. */
 const TS_LIKE_LANGS = new Set(['ts', 'typescript']);
 
+/**
+ * Peel a leading `-- @meta {...}` (SQL) or `// @meta {...}` (JS) line from the
+ * cell content and return the parsed JSON args plus the remaining content.
+ * Round-trip with serializeCellMeta in share-handlers.ts.
+ */
+export function peelMetaComment(content: string): { content: string; args?: Record<string, unknown> } {
+  const m = /^[ \t]*(?:--|\/\/)[ \t]*@meta[ \t]+(\{[\s\S]*?\})[ \t]*\r?\n?/.exec(content);
+  if (!m) return { content };
+  try {
+    const parsed = JSON.parse(m[1]);
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return { content: content.slice(m[0].length), args: parsed as Record<string, unknown> };
+    }
+  } catch { /* invalid JSON → ignore, keep line in content */ }
+  return { content };
+}
+
 export function fenceLangToCellType(lang: string): CellType | null {
   const key = (lang || '').toLowerCase().trim();
   if (TS_LIKE_LANGS.has(key)) {
@@ -45,7 +62,10 @@ export function fenceLangToCellType(lang: string): CellType | null {
 export function extractCellFromFence(lang: string, content: string): NotebookCell {
   const cellType = fenceLangToCellType(lang);
   if (cellType) {
-    return { id: uid(), type: cellType, content: content.trim(), hideSource: false, hideResult: false };
+    const { content: stripped, args } = peelMetaComment(content.trim());
+    const cell: NotebookCell = { id: uid(), type: cellType, content: stripped, hideSource: false, hideResult: false };
+    if (args) cell.args = args;
+    return cell;
   }
   // Detect pseudo-code MCP tool calls like: query_sql({sql: "..."})
   // Only attempted when the fence language is unknown/text (cellType === null).

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

@@ -36,7 +36,11 @@ function serializeToMarkdown(state: NotebookState): string {
     } else {
       const lang = cell.type === 'sql' ? 'sql' : 'js';
       const varname = cell.varname ? ` // → ${cell.varname}` : '';
-      parts.push('```' + lang + varname, cell.content.trim(), '```', '');
+      const commentPrefix = cell.type === 'sql' ? '--' : '//';
+      const metaLine = cell.args && Object.keys(cell.args).length > 0
+        ? `${commentPrefix} @meta ${JSON.stringify(cell.args)}\n`
+        : '';
+      parts.push('```' + lang + varname, metaLine + cell.content.trim(), '```', '');
     }
   }
   return parts.join('\n').trim() + '\n';
@@ -191,7 +195,6 @@ function minify(state: NotebookState): Record<string, unknown> {
     id: state.id,
     title: state.title,
     mode: state.mode,
-    kicker: state.kicker,
     cells: state.cells.map((c: NotebookCell) => ({
       id: c.id,
       type: c.type,

package/src/widgets/notebook/shared.ts

@@ -51,6 +51,7 @@ export interface NotebookCell {
   status?: 'fresh' | 'stale';
   comment?: { who: string; when: string; body: string } | null;
   lastResult?: CellResult;
+  args?: Record<string, unknown>;  // override of tool args, parsed from `@meta {...}` leading comment
 }
 
 export interface NotebookState {
@@ -62,7 +63,6 @@ export interface NotebookState {
   scope: Record<string, unknown>;
   executors: CellExecutors;
   lastEditAt: number;
-  kicker?: string;
   publishedSlug?: string;
   publishedToken?: string;
   /**
@@ -168,24 +168,46 @@ export function defaultCellContent(type: CellType): string {
 // ---------------------------------------------------------------------------
 
 export function createState(initial?: Partial<NotebookState>): NotebookState {
-  return {
-    id: initial?.id ?? uid(),
-    title: initial?.title ?? 'Untitled notebook',
-    mode: initial?.mode ?? 'edit',
-    cells: initial?.cells ?? [
-      { id: uid(), type: 'md', content: '### Untitled notebook\n\nAdd some context here.', hideSource: false, hideResult: false },
+  const title = initial?.title ?? 'Untitled notebook';
+  const cells = stripDuplicateTitleHeading(
+    initial?.cells ?? [
+      { id: uid(), type: 'md', content: 'Add some context here.', hideSource: false, hideResult: false },
       { id: uid(), type: 'sql', content: 'select *\nfrom source\nlimit 5', varname: 'rows', hideSource: false, hideResult: false, status: 'fresh' },
       { id: uid(), type: 'js', content: 'console.log(rows)', hideSource: false, hideResult: false, status: 'stale' },
     ],
+    title,
+  );
+  return {
+    id: initial?.id ?? uid(),
+    title,
+    mode: initial?.mode ?? 'edit',
+    cells,
     history: initial?.history ?? [],
     scope: initial?.scope ?? {},
     executors: initial?.executors ?? {},
     lastEditAt: initial?.lastEditAt ?? Date.now(),
-    kicker: initial?.kicker,
     autoRun: initial?.autoRun ?? false,
   };
 }
 
+// If the first md cell opens with a heading whose plain text matches the
+// notebook title, drop that heading line so the title is not rendered twice.
+function stripDuplicateTitleHeading(cells: NotebookCell[], title: string): NotebookCell[] {
+  if (!title || cells.length === 0) return cells;
+  const first = cells[0];
+  if (first.type !== 'md' || typeof first.content !== 'string') return cells;
+  const norm = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, '');
+  const lines = first.content.split('\n');
+  let i = 0;
+  while (i < lines.length && lines[i].trim() === '') i++;
+  if (i >= lines.length) return cells;
+  const m = lines[i].match(/^#{1,6}\s+(.+?)\s*$/);
+  if (!m || norm(m[1]) !== norm(title)) return cells;
+  let drop = i + 1;
+  while (drop < lines.length && lines[drop].trim() === '') drop++;
+  return [{ ...first, content: lines.slice(drop).join('\n') }, ...cells.slice(1)];
+}
+
 // ---------------------------------------------------------------------------
 // Live mode (autoRun) — RuntimeOverlay + helpers
 //
@@ -641,6 +663,7 @@ export function tickRunningCell(cell: NotebookCell, elapsedEl: HTMLElement, onDo
 export interface DataServerTool {
   name: string;
   description?: string;
+  inputSchema?: unknown;
 }
 
 export interface DataServerRecipe {
@@ -715,7 +738,7 @@ export interface PublishControlsOptions {
   onPublished?: (info: { slug: string; url: string; updated: boolean }) => void;
   /** Optional toast function — falls back to internal toast helper if absent. */
   toast?: (message: string, isError?: boolean) => void;
-  /** Minimal projection of the state sent to the server. If absent, sends { id, title, kicker, mode, cells }. */
+  /** Minimal projection of the state sent to the server. If absent, sends { id, title, mode, cells }. */
   serializeState?: (state: NotebookState) => Record<string, unknown>;
 }
 
@@ -819,7 +842,6 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
         : {
             id: state.id,
             title: state.title,
-            kicker: state.kicker,
             mode: state.mode,
             cells: state.cells,
           };