@webmcp-auto-ui/ui 2.5.38 → 2.5.40

package/package.json

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

package/src/recipe/RecipeCodeBlock.svelte

@@ -26,6 +26,12 @@
      * written back so subsequent blocks can read them. Owner: the host modal.
      */
     scope?: Record<string, unknown>;
+    /**
+     * Recipe-level widget hint (from frontmatter `widget:`). When set and
+     * lang === 'json', the JSON content is treated as widget params instead
+     * of being dispatched as a script.
+     */
+    widget?: string;
   }
 
   let {
@@ -34,6 +40,7 @@
     actions = undefined,
     onrun,
     scope,
+    widget,
   }: Props = $props();
 
   let editable = $state('');
@@ -93,7 +100,15 @@
     startTimer(t0);
 
     const multi = canvas.multiClient as McpMultiClient | undefined;
-    const result = await runCode(editable, lang, multi, scope);
+    // For widget recipes (frontmatter `widget:`), JSON fences carry params —
+    // wrap as widget_display(...) so runCode renders the widget instead of
+    // dispatching the JSON to run_script.
+    const isJsonWidgetParams = widget && /^json\b/i.test(lang);
+    const runCodeStr = isJsonWidgetParams
+      ? `widget_display({name: ${JSON.stringify(widget)}, params: ${editable}})`
+      : editable;
+    const runLang = isJsonWidgetParams ? 'text' : lang;
+    const result = await runCode(runCodeStr, runLang, multi, scope);
 
     stopTimer();
     lastDuration = result.durationMs;

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

@@ -1,5 +1,6 @@
 import { canvas } from '@webmcp-auto-ui/sdk/canvas';
 import { findCodeParamName, buildToolArgs } from '@webmcp-auto-ui/sdk';
+import { stripSqlPreamble } from '../shared.js';
 import type { CellExecutor, CellExecContext, CellResult, DataServerDescriptor, DataServerTool } from '../shared.js';
 
 const PATTERN_PRIMARY = /^.*query_sql$/i;
@@ -24,7 +25,7 @@ export function createSqlExecutor(getServers: () => DataServerDescriptor[]): Cel
       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();
+    const sql = stripSqlPreamble((ctx.cell.content ?? '').trim());
     if (!sql) return { ok: true, kind: 'empty', durationMs: Date.now() - startedAt };
 
     // Build args from the tool's inputSchema:

package/src/widgets/notebook/notebook.svelte

@@ -14,6 +14,7 @@
     status?: 'idle' | 'running' | 'done' | 'error' | 'stale';
     hideSource?: boolean;
     hideResult?: boolean;
+    chatOpen?: boolean;
     lastResult?: unknown;
     lastMs?: number;
   }

package/src/widgets/notebook/notebook.ts

@@ -13,7 +13,7 @@ import {
   renderCellLogs, uid, defaultCellContent,
   createPublishControls, autoConnectFrontmatterServers,
   createRuntimeOverlay, effectiveResult, cellRuntimeStatus,
-  lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround,
+  lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround, startRun,
   type NotebookState, type NotebookCell, type CellResult, type CellExecContext,
   type RuntimeOverlay,
 } from './shared.js';
@@ -79,8 +79,11 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     hidePublishBadge: (data as any).hidePublishBadge === true,
   } as any);
 
-  // Default src visibility per mode (toggle remains usable for per-cell override).
-  for (const c of state.cells) c.hideSource = state.mode === 'view';
+  // Default src + logs visibility per mode (toggle remains usable for per-cell override).
+  for (const c of state.cells) {
+    c.hideSource = state.mode === 'view';
+    if (state.mode === 'view' && c.hideLogs === undefined) c.hideLogs = true;
+  }
 
   // Live mode runtime overlay (created lazily). Never mutates state.
   let overlay: RuntimeOverlay | null = null;
@@ -282,7 +285,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   const viewBtn = shell.querySelector('.nb-mode-view') as HTMLElement;
   editBtn.addEventListener('click', () => {
     state.mode = 'edit';
-    for (const c of state.cells) c.hideSource = false;
+    for (const c of state.cells) { c.hideSource = false; c.hideLogs = false; c.chatOpen = false; }
     container.classList.remove('nb-view-mode');
     editBtn.classList.add('nb-on'); viewBtn.classList.remove('nb-on');
     // Leaving view: stop live refresh and clear overlay so frozen snapshots show.
@@ -291,7 +294,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   });
   viewBtn.addEventListener('click', () => {
     state.mode = 'view';
-    for (const c of state.cells) c.hideSource = true;
+    for (const c of state.cells) { c.hideSource = true; c.hideLogs = true; }
     container.classList.add('nb-view-mode');
     viewBtn.classList.add('nb-on'); editBtn.classList.remove('nb-on');
     if (state.autoRun === true) bootstrapLive();
@@ -336,12 +339,28 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     rerender();
   }
 
+  // Real-time elapsed timer for running cells. Updates every 200ms in-place
+  // (no full rerender) by reading data-running-since attributes.
+  const tickRunningTimers = () => {
+    const els = container.querySelectorAll<HTMLElement>('.nbe-running-time[data-running-since]');
+    if (els.length === 0) return;
+    const now = Date.now();
+    els.forEach((el) => {
+      const since = Number(el.getAttribute('data-running-since'));
+      if (!since) return;
+      const ms = now - since;
+      el.textContent = ms < 1000 ? `running ${ms}ms` : `running ${(ms / 1000).toFixed(1)}s`;
+    });
+  };
+  const runningTimerHandle = setInterval(tickRunningTimers, 200);
+
   return () => {
     unsubHistory();
     canvasUnsub?.();
     pane.destroy();
     publishCleanup();
     liveCleanup?.();
+    clearInterval(runningTimerHandle);
   };
 }
 
@@ -447,24 +466,34 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
   let liveBadge = '';
   if (showLive) {
     if (rtStatus === 'running') {
-      liveBadge = `<span class="nbe-cell-badge nbe-cell-running" title="re-executing"><span class="nbe-spinner"></span>running</span>`;
+      const startedAt = overlay?.cellStartedAt.get(cell.id) ?? Date.now();
+      liveBadge = `<span class="nbe-cell-badge nbe-cell-running" title="re-executing"><span class="nbe-spinner"></span><span class="nbe-running-time" data-running-since="${startedAt}">running</span></span>`;
     } else if (rtStatus === 'stale') {
       liveBadge = `<span class="nbe-cell-badge nbe-cell-stale" title="last live refresh failed">stale</span>`;
     } else if (rtStatus === 'frozen') {
       liveBadge = `<span class="nbe-cell-badge nbe-cell-frozen" title="JS cells are not re-executed in live mode">frozen</span>`;
     }
   }
+  const lastRes = effectiveResult(cell, overlay) ?? cell.lastResult;
+  const logCount = (lastRes?.logs as string[] | undefined)?.length ?? 0;
+  const logsToggle = logCount > 0
+    ? `<button class="nb-icon-btn nb-toggle-logs" title="toggle console">${cell.hideLogs ? '▸' : '▾'} ${logCount}</button>`
+    : '';
   head.innerHTML = `
     <span class="nbe-run-controls"></span>
     <span class="nbe-type-${cell.type}">${cell.type}</span>
     <span class="nbe-meta-info">${escapeHtml(metaInfoFor(cell, overlay))}</span>
     ${liveBadge}
     <div class="nbe-actions">
+      ${logsToggle}
       <button class="nb-icon-btn nb-toggle-src">${cell.hideSource ? '▸ src' : '◂ src'}</button>
       <button class="nb-icon-btn nb-toggle-res">${cell.hideResult ? '▸ res' : '◂ res'}</button>
+      ${state.mode === 'view' ? `<span class="nbe-actions-sep">│</span><button class="nb-icon-btn nb-toggle-chat">${cell.chatOpen ? '◂ chat' : '▸ chat'}</button>` : ''}
     </div>`;
   codeCell.appendChild(head);
   mountRunControls(head.querySelector('.nbe-run-controls') as HTMLElement, cell, wrap, state, rerender);
+  const logsBtn = head.querySelector('.nb-toggle-logs') as HTMLElement | null;
+  if (logsBtn) logsBtn.addEventListener('click', () => { cell.hideLogs = !cell.hideLogs; rerender(); });
 
   const body = document.createElement('div');
   body.className = 'nbe-code-body' + (cell.hideSource ? ' nbe-hidden' : '');
@@ -499,6 +528,13 @@ function renderCell(cell: NotebookCell, state: NotebookState, overlay: RuntimeOv
 
   (head.querySelector('.nb-toggle-src') as HTMLElement).addEventListener('click', () => { cell.hideSource = !cell.hideSource; rerender(); });
   (head.querySelector('.nb-toggle-res') as HTMLElement).addEventListener('click', () => { cell.hideResult = !cell.hideResult; rerender(); });
+  const chatBtn = head.querySelector('.nb-toggle-chat') as HTMLElement | null;
+  if (chatBtn) chatBtn.addEventListener('click', () => { cell.chatOpen = !cell.chatOpen; rerender(); });
+
+  if (state.mode === 'view' && cell.chatOpen) {
+    wrap.classList.add('nb-cell-chat-active');
+    mountAgentBarAbove(codeCell, state, cell, rerender, overlay);
+  }
 
   if (state.mode !== 'view') wrap.appendChild(renderCellActionBar(state, cell, rerender));
 
@@ -666,27 +702,77 @@ function toggleAgentBar(host: HTMLElement, state: NotebookState, cell: NotebookC
   });
 }
 
+/**
+ * View-mode variant — renders the agent bar ABOVE the code cell (beforebegin)
+ * and persists open state via cell.chatOpen so the bar survives the rerender
+ * triggered by `update_cell`. Reuses runAgentForCell unchanged.
+ */
+function mountAgentBarAbove(codeCell: HTMLElement, state: NotebookState, cell: NotebookCell, rerender: () => void, overlay: RuntimeOverlay | null): void {
+  const bar = document.createElement('div');
+  bar.className = 'nbe-agent-bar';
+  bar.innerHTML = `
+    <auto-chat-input placeholder="ask agent — e.g. 'filter rows where votes > 50' / 'add a sankey of this'"></auto-chat-input>
+    <div class="nbe-agent-progress" hidden>
+      <span class="nbe-progress-track"><span class="nbe-progress-fill"></span></span>
+      <span class="nbe-progress-label"></span>
+    </div>`;
+  codeCell.insertAdjacentElement('beforebegin', bar);
+  const input = bar.querySelector('auto-chat-input') as HTMLElement & { disabled?: boolean };
+  const progress = bar.querySelector('.nbe-agent-progress') as HTMLElement;
+  const fill = bar.querySelector('.nbe-progress-fill') as HTMLElement;
+  const label = bar.querySelector('.nbe-progress-label') as HTMLElement;
+  let aborter: AbortController | null = null;
+  input.addEventListener('widget:interact', (e: Event) => {
+    const detail = (e as CustomEvent).detail ?? {};
+    const action = (detail as { action?: string }).action;
+    if (action === 'stop') { e.stopPropagation(); aborter?.abort(); return; }
+    if (action !== 'submit') return;
+    e.stopPropagation();
+    const text = ((detail as { payload?: { text?: string } }).payload?.text ?? '').trim();
+    if (!text) return;
+    void runAgentForCell(text, state, cell, rerender, progress, fill, label, input, () => aborter ??= new AbortController(), overlay);
+  });
+}
+
 async function runAgentForCell(
   prompt: string,
   state: NotebookState,
   cell: NotebookCell,
   rerender: () => void,
-  status: HTMLElement,
+  progress: HTMLElement,
+  fill: HTMLElement,
+  label: HTMLElement,
   input: HTMLElement & { disabled?: boolean },
   getAborter: () => AbortController,
+  overlay: RuntimeOverlay | null,
 ): Promise<void> {
-  status.hidden = false;
-  status.textContent = '…';
+  progress.hidden = false;
+  progress.classList.remove('nbe-progress-error', 'nbe-progress-done');
+  let currentTool = '…';
+  const startedAt = Date.now();
+  // Indeterminate slide: a 3-block fill traverses the 8-block track.
+  const TRACK = 8;
+  const FILL = 3;
+  let pos = 0;
+  const tick = () => {
+    const cells: string[] = [];
+    for (let i = 0; i < TRACK; i++) {
+      const inFill = i >= pos && i < pos + FILL;
+      cells.push(inFill ? '▰' : '▱');
+    }
+    fill.textContent = cells.join('');
+    label.textContent = `${currentTool} · ${((Date.now() - startedAt) / 1000).toFixed(1)}s`;
+    pos = (pos + 1) % (TRACK - FILL + 1 + 2); // small pause at each end
+  };
+  tick();
+  const interval = setInterval(tick, 120);
   input.disabled = true;
   const aborter = getAborter();
   try {
-    // Lazy import to keep notebook bundle slim when agent is unused.
     const { RemoteLLMProvider, runAgentLoop } = await import('@webmcp-auto-ui/agent');
-    // Host injects chatApiBase via data (flex serves under /flex, notebook-viewer
-    // at root). Default '/api/chat' kept for hosts mounting at the root.
     const proxyUrl = (state as { chatApiBase?: string }).chatApiBase ?? '/api/chat';
     const provider = new RemoteLLMProvider({ proxyUrl, model: 'haiku' });
-    const layer = buildAgentLayerForCell(state, cell, rerender);
+    const layer = buildAgentLayerForCell(state, cell, rerender, overlay);
     const systemPrompt = buildAgentSystemPromptForCell(state, cell);
     await runAgentLoop(prompt, {
       provider,
@@ -695,12 +781,20 @@ async function runAgentForCell(
       maxIterations: 6,
       signal: aborter.signal,
       callbacks: {
-        onToolCall: (call: { name?: string }) => { status.textContent = `· ${call?.name ?? '?'}…`; },
+        onToolCall: (call: { name?: string }) => { currentTool = call?.name ?? '?'; },
       },
     });
-    status.textContent = '✓ done';
+    clearInterval(interval);
+    progress.classList.add('nbe-progress-done');
+    fill.textContent = '▰▰▰▰▰▰▰▰';
+    label.textContent = `done · ${((Date.now() - startedAt) / 1000).toFixed(1)}s`;
+    // Auto-close happens earlier inside update_cell.execute (avoids the lag of
+    // Haiku's trailing assistant turn). Nothing to do here.
   } catch (err) {
-    status.textContent = 'error: ' + String((err as { message?: unknown })?.message ?? err);
+    clearInterval(interval);
+    progress.classList.add('nbe-progress-error');
+    fill.textContent = '▱▱▱▱▱▱▱▱';
+    label.textContent = 'error: ' + String((err as { message?: unknown })?.message ?? err);
   } finally {
     input.disabled = false;
   }
@@ -711,8 +805,12 @@ async function runAgentForCell(
  * shared helpers (addImportedCells, logHistory) so revert via ⟲ history works
  * exactly like a manual edit.
  */
-function buildAgentLayerForCell(state: NotebookState, cell: NotebookCell, rerender: () => void) {
+function buildAgentLayerForCell(state: NotebookState, cell: NotebookCell, rerender: () => void, overlay: RuntimeOverlay | null) {
   const idx = () => state.cells.findIndex((c) => c.id === cell.id);
+  // View-mode chat is per-cell and meant to TRANSFORM the targeted cell.
+  // Exception: when the cell is `sql`, the natural follow-up is "add a chart on
+  // top of these rows", so we keep insert_cell_after + list_widgets available.
+  const transformOnly = state.mode === 'view' && cell.type !== 'sql';
   const tools = [
     {
       name: 'get_current_cell',
@@ -758,7 +856,20 @@ function buildAgentLayerForCell(state: NotebookState, cell: NotebookCell, rerend
             snapshot: { cellId: cell.id, before, after: next },
           } as never);
         } catch { /* ignore — best-effort */ }
+        // Drop the live-overlay cache for this cell. effectiveResult prefers
+        // overlay.outputs over cell.lastResult, so without this the pre-edit
+        // render lingers until the next bootstrapLive (= view-edit-view).
+        overlay?.outputs.delete(cell.id);
+        overlay?.status.delete(cell.id);
+        // Close the chat bar immediately on success in view mode — waiting for
+        // runAgentLoop to fully resolve adds a 1-2s lag from Haiku's trailing
+        // assistant turn ("Done!") after the tool result.
+        if (state.mode === 'view') cell.chatOpen = false;
         rerender();
+        // Re-run so the result panel reflects the new content.
+        if (cell.type !== 'md' && state.executors?.[cell.type]) {
+          startRun(cell, state, rerender);
+        }
         return { ok: true };
       },
     },
@@ -790,21 +901,65 @@ function buildAgentLayerForCell(state: NotebookState, cell: NotebookCell, rerend
     },
     {
       name: 'list_widgets',
-      description: 'List widgets exposed by the connected WebMCP servers — pickable in JS cells via widget(name, params).',
+      description: 'List widgets exposed by the connected WebMCP servers, with one usage example each. Pickable in JS cells via widget(name, params).',
       inputSchema: { type: 'object', properties: {} },
       execute: async () => {
-        const out: Array<{ server: string; name: string; description?: string }> = [];
+        const out: Array<{ server: string; name: string; description?: string; example?: string }> = [];
         for (const s of state.webmcpServers ?? []) {
-          for (const r of s.layer().recipes ?? []) out.push({ server: s.name, name: r.name, description: r.description });
+          for (const r of s.layer().recipes ?? []) {
+            const body = (r as { body?: string }).body ?? '';
+            // First fenced block in the recipe body is the canonical example,
+            // showing the exact param keys the renderer expects.
+            const m = /```[a-zA-Z]*\n([\s\S]*?)\n```/.exec(body);
+            out.push({
+              server: s.name,
+              name: r.name,
+              description: r.description,
+              ...(m ? { example: m[1] } : {}),
+            });
+          }
         }
         return out;
       },
     },
   ];
-  return { protocol: 'webmcp' as const, serverName: 'notebook-editor', tools, recipes: [] };
+  // list_widgets is read-only and essential — without it, the agent hallucinates
+  // widget names. Only insert_cell_after is dropped in transformOnly.
+  const filtered = transformOnly
+    ? tools.filter((t) => t.name !== 'insert_cell_after')
+    : tools;
+  return { protocol: 'webmcp' as const, serverName: 'notebook-editor', tools: filtered, recipes: [] };
 }
 
-function buildAgentSystemPromptForCell(_state: NotebookState, cell: NotebookCell): string {
+function buildAgentSystemPromptForCell(state: NotebookState, cell: NotebookCell): string {
+  if (state.mode === 'view') {
+    if (cell.type === 'sql') {
+      return [
+        'You are an in-notebook editing assistant. The user invoked you on a SQL cell.',
+        'Two valid actions:',
+        '  - TRANSFORM: rewrite this SQL cell. Call get_current_cell, then update_cell.',
+        '  - FOLLOW-UP (chart/viz/widget): insert a JS cell after this one that renders a widget on top of the rows.',
+        'For a follow-up widget:',
+        '  1. Call get_current_cell to read this cell\'s `varname` (the rows of this SQL are bound to that name in cross-cell scope).',
+        '  2. Call list_widgets to discover the exact widget name + the example showing the required param keys. NEVER invent a widget name.',
+        '  3. Call insert_cell_after with type="js" and content like: `return widget("<name>", { ...params per the example, with rows substituted for <varname> });`',
+        'For JS cells: use the `widget(name, params)` helper. `widget_display` is not available as a global.',
+        'Never write a JS cell that re-issues the SQL — reuse the varname from cross-cell scope.',
+        'Be terse. Two or three tool calls is enough. Do not explain at length.',
+      ].join('\n');
+    }
+    return [
+      'You are an in-notebook editing assistant. The user invoked you on a specific cell to TRANSFORM it.',
+      `The current cell is of type "${cell.type}".`,
+      'Workflow:',
+      '  1. Call get_current_cell to read the cell content.',
+      '  2. If the user asks for a chart/widget/viz, call list_widgets to learn the exact widget names + the example showing the required param keys. NEVER invent a widget name.',
+      '  3. Call update_cell with the rewritten content.',
+      'Always rewrite the existing cell. Never insert new cells.',
+      'For JS cells: use the `widget(name, params)` helper. `widget_display` is not available as a global. Call widget once with the final result; do NOT also call widget_display after.',
+      'Be terse. Two tool calls is usually enough. Do not explain at length.',
+    ].join('\n');
+  }
   return [
     'You are an in-notebook editing assistant. The user invoked you on a specific cell.',
     'Your job: rewrite that cell, OR insert a follow-up cell after it, based on the user\'s prompt.',
@@ -847,12 +1002,25 @@ function renderResultInto(el: HTMLElement, cell: NotebookCell, overlay: RuntimeO
   const r = effectiveResult(cell, overlay) ?? cell.lastResult;
   el.innerHTML = '';
   if (!r) {
-    el.innerHTML = `<div class="nbe-result-empty">press ▶ to run</div>`;
+    const isView = stateRef?.mode === 'view';
+    const rtStatus = cellRuntimeStatus(cell, overlay);
+    const startedAt = overlay?.cellStartedAt.get(cell.id);
+    if (rtStatus === 'running' && startedAt != null) {
+      el.innerHTML = `<div class="nbe-result-running"><span class="nbe-spinner"></span> <span class="nbe-running-time" data-running-since="${startedAt}">running</span></div>`;
+    } else if (isView && (rtStatus === 'pending' || rtStatus === 'idle')) {
+      // Queued: cell will run sequentially after upstream cells finish.
+      // Spinner without timer — there's nothing to count yet.
+      el.innerHTML = `<div class="nbe-result-running"><span class="nbe-spinner"></span> queued</div>`;
+    } else {
+      el.innerHTML = `<div class="nbe-result-empty">press ▶ to run</div>`;
+    }
     return;
   }
   // Logs panel (shared across all widgets), prepended above the main result
-  const logsEl = renderCellLogs(r);
-  if (logsEl) el.appendChild(logsEl);
+  if (!cell.hideLogs) {
+    const logsEl = renderCellLogs(r);
+    if (logsEl) el.appendChild(logsEl);
+  }
   if (!r.ok) {
     const err = document.createElement('div');
     err.className = 'nbe-result-error';
@@ -1080,6 +1248,30 @@ function injectLayoutStyles(): void {
 .nbe-code-body { padding: 14px 16px; }
 .nbe-hidden { display: none !important; }
 
+/* View-mode Option B: chrome hidden by default, revealed on hover in top-right corner. */
+.nb-root.nb-view-mode .nbe-code-cell { position: relative; min-height: 28px; }
+.nb-root.nb-view-mode .nbe-cell-head {
+  position: absolute; top: 0; right: 0; z-index: 2;
+  padding: 4px 8px; gap: 6px;
+  background: var(--color-surface2);
+  border: 1px solid var(--color-border);
+  border-top: none; border-right: none;
+  border-bottom-left-radius: 6px;
+  opacity: 0; pointer-events: none;
+  transition: opacity 120ms ease;
+  font-size: 9.5px;
+}
+.nb-root.nb-view-mode .nbe-code-cell:hover .nbe-cell-head,
+.nb-root.nb-view-mode .nbe-cell-head:focus-within {
+  opacity: 0.95; pointer-events: auto;
+}
+.nb-root.nb-view-mode .nbe-cell-head .nbe-meta-info,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-sql,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-js,
+.nb-root.nb-view-mode .nbe-cell-head .nbe-type-md { display: none; }
+.nb-root.nb-view-mode .nbe-code-body { padding: 10px 14px; }
+.nb-root.nb-view-mode .nbe-result { padding: 8px 14px; }
+
 .nbe-result {
   background: var(--color-bg);
   border-top: 1px solid var(--color-border);
@@ -1090,6 +1282,10 @@ function injectLayoutStyles(): void {
 .nbe-result-empty {
   color: var(--color-text2); font-style: italic; font-size: 11.5px;
 }
+.nbe-result-running {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: #2ea043; font-size: 11.5px;
+}
 .nbe-result-error {
   color: var(--color-accent2); white-space: pre-wrap; font-size: 12px;
 }

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

@@ -4,7 +4,7 @@
 // 4 formats: JSON, Markdown, Hyperskill link (+ short), PNG snapshot.
 // ---------------------------------------------------------------------------
 
-import { encode, buildShortUrl } from '@webmcp-auto-ui/sdk';
+import { encode, buildShortUrl, pickFence } from '@webmcp-auto-ui/sdk';
 import { canvasVanilla } from '@webmcp-auto-ui/sdk/canvas-vanilla';
 import type { NotebookState, NotebookCell } from './shared.js';
 
@@ -56,7 +56,9 @@ export function serializeToMarkdown(state: NotebookState): string {
       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(), '```', '');
+      const body = metaLine + cell.content.trim();
+      const fence = pickFence(body);
+      parts.push(fence + lang + varname, body, fence, '');
     }
   }
   return parts.join('\n').trim() + '\n';

package/src/widgets/notebook/shared.ts

@@ -5,6 +5,7 @@
 // ---------------------------------------------------------------------------
 
 import { serializeToMarkdown } from './share-handlers.js';
+import { extractTopLevelDecls, hasIdentifierReference, findCodeParamName, buildToolArgs } from '@webmcp-auto-ui/sdk';
 
 export const NB_PUBLISH_HOST: string = (() => {
   try {
@@ -47,6 +48,10 @@ export interface NotebookCell {
   varname?: string;        // named output (compact)
   hideSource?: boolean;
   hideResult?: boolean;
+  /** view-mode: agent chat bar opened above this cell (persists across rerender). */
+  chatOpen?: boolean;
+  /** view-mode: collapse the console logs panel under the head bar. Default true in view mode. */
+  hideLogs?: boolean;
   runState?: RunState;
   lastMs?: number;
   status?: 'fresh' | 'stale';
@@ -95,6 +100,25 @@ export interface HistoryEntry {
 // Utilities
 // ---------------------------------------------------------------------------
 
+/**
+ * Strip leading SQL preamble — line comments and block comments,
+ * BOM, and whitespace — so the first non-trivial token is the real keyword.
+ * Some upstream MCP SQL servers (Tricoteuses) enforce a strict
+ * `^(SELECT|WITH)` regex on the raw string; a comment header would fail.
+ */
+export function stripSqlPreamble(sql: string): string {
+  let s = sql.replace(/^/, '');
+  // Repeat: there can be a mix of line + block comments + blank lines.
+  for (;;) {
+    const before = s;
+    s = s.replace(/^[\s]+/, '');
+    s = s.replace(/^--[^\n]*\n?/, '');
+    s = s.replace(/^\/\*[\s\S]*?\*\//, '');
+    if (s === before) break;
+  }
+  return s;
+}
+
 export function uid(): string {
   return 'c_' + Math.random().toString(36).slice(2, 9);
 }
@@ -245,6 +269,8 @@ export interface RuntimeOverlay {
   outputs: Map<string, { result: CellResult; refreshedAt: number }>;
   /** Per-cell status during/after the refresh cycle. */
   status: Map<string, CellRuntimeStatus>;
+  /** Per-cell start timestamp — set when status flips to 'running', cleared on completion. */
+  cellStartedAt: Map<string, number>;
   startedAt: number | null;
   finishedAt: number | null;
   /** Last fatal reason (e.g. "no reachable server"). */
@@ -255,6 +281,7 @@ export function createRuntimeOverlay(): RuntimeOverlay {
   return {
     outputs: new Map(),
     status: new Map(),
+    cellStartedAt: new Map(),
     startedAt: null,
     finishedAt: null,
     error: null,
@@ -324,34 +351,77 @@ export async function runAutoRefresh(opts: AutoRefreshOptions): Promise<AutoRefr
   const summary: AutoRefreshSummary = { rerun: 0, frozen: 0, stale: 0, failed: 0 };
   const sharedSignal = signal ?? new AbortController().signal;
 
-  const tasks = state.cells.map(async (cell) => {
-    if (sharedSignal.aborted) return;
-    if (!isReRunnable(cell)) { summary.frozen++; return; }
+  // Build dependency graph: a JS cell depends on the most recent prior cell
+  // that declares a top-level identifier referenced in this cell's body.
+  // Cells with no inter-cell deps run in parallel; dependent cells await
+  // their providers via a Promise map (no batching, no sequential bottleneck).
+  const declToProvider = new Map<string, string>();   // identifier → cell id of latest declarer
+  const cellDeps = new Map<string, string[]>();        // cell id → [provider cell ids]
+  for (const cell of state.cells) {
+    if (!isReRunnable(cell)) continue;
+    const deps = new Set<string>();
+    if (cell.type === 'js') {
+      for (const [name, providerId] of declToProvider) {
+        if (providerId === cell.id) continue;
+        if (hasIdentifierReference(cell.content, name)) deps.add(providerId);
+      }
+    }
+    cellDeps.set(cell.id, [...deps]);
+    // Register this cell's provided names AFTER computing its deps so a cell
+    // doesn't depend on itself when it both reads and re-declares a name.
+    if (cell.type === 'js') {
+      for (const decl of extractTopLevelDecls(cell.content)) {
+        declToProvider.set(decl, cell.id);
+      }
+    } else if (cell.type === 'sql' && cell.varname) {
+      declToProvider.set(cell.varname, cell.id);
+    }
+  }
+
+  const cellPromises = new Map<string, Promise<void>>();
+  for (const cell of state.cells) {
+    cellPromises.set(cell.id, (async () => {
+      if (sharedSignal.aborted) return;
+      if (!isReRunnable(cell)) { summary.frozen++; return; }
 
-    overlay.status.set(cell.id, 'running');
-    onCellChange?.(cell.id);
-    onTick?.(overlay);
+      // Wait for dependencies before starting.
+      const deps = cellDeps.get(cell.id) ?? [];
+      if (deps.length > 0) {
+        await Promise.all(deps.map((d) => cellPromises.get(d)).filter(Boolean) as Promise<void>[]);
+      }
+      if (sharedSignal.aborted) return;
 
-    try {
-      const result = await runner(cell, sharedSignal);
-      if (result.ok) {
+      overlay.status.set(cell.id, 'running');
+      overlay.cellStartedAt.set(cell.id, Date.now());
+      onCellChange?.(cell.id);
+      onTick?.(overlay);
+
+      try {
+        const result = await runner(cell, sharedSignal);
         overlay.outputs.set(cell.id, { result, refreshedAt: Date.now() });
-        overlay.status.set(cell.id, 'fresh');
-        summary.rerun++;
-      } else {
+        if (result.ok) {
+          overlay.status.set(cell.id, 'fresh');
+          summary.rerun++;
+        } else {
+          overlay.status.set(cell.id, 'stale');
+          summary.stale++;
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        overlay.outputs.set(cell.id, {
+          result: { ok: false, error: message, errorKind: 'runtime', durationMs: 0 },
+          refreshedAt: Date.now(),
+        });
         overlay.status.set(cell.id, 'stale');
-        summary.stale++;
+        summary.failed++;
+        if (!overlay.error) overlay.error = message;
       }
-    } catch (err) {
-      overlay.status.set(cell.id, 'stale');
-      summary.failed++;
-      if (!overlay.error) overlay.error = err instanceof Error ? err.message : String(err);
-    }
-    onCellChange?.(cell.id);
-    onTick?.(overlay);
-  });
-
-  await Promise.all(tasks);
+      overlay.cellStartedAt.delete(cell.id);
+      onCellChange?.(cell.id);
+      onTick?.(overlay);
+    })());
+  }
+  await Promise.all([...cellPromises.values()]);
 
   overlay.finishedAt = Date.now();
   onTick?.(overlay);
@@ -381,15 +451,15 @@ export function createBridgeSqlRunner(
   const PATTERN_PRIMARY = /^.*query_sql$/i;
   const PATTERN_FALLBACK = /^(query|run|execute)(_sql)?$/i;
 
-  function findSqlTool(servers: DataServerDescriptor[]): { serverName: string; toolName: string } | null {
+  function findSqlTool(servers: DataServerDescriptor[]): { serverName: string; toolName: string; tool: DataServerTool } | null {
     for (const srv of servers) {
       for (const t of srv.tools ?? []) {
-        if (PATTERN_PRIMARY.test(t.name)) return { serverName: srv.name, toolName: t.name };
+        if (PATTERN_PRIMARY.test(t.name)) return { serverName: srv.name, toolName: t.name, tool: t };
       }
     }
     for (const srv of servers) {
       for (const t of srv.tools ?? []) {
-        if (PATTERN_FALLBACK.test(t.name)) return { serverName: srv.name, toolName: t.name };
+        if (PATTERN_FALLBACK.test(t.name)) return { serverName: srv.name, toolName: t.name, tool: t };
       }
     }
     return null;
@@ -437,7 +507,11 @@ export function createBridgeSqlRunner(
     if (!hit) {
       return { ok: false, error: 'No SQL tool exposed by reachable servers', errorKind: 'schema', durationMs: 0 };
     }
-    const raw = await callTool(hit.serverName, hit.toolName, { sql: cell.content });
+    const sql = stripSqlPreamble((cell.content ?? '').trim());
+    const codeParam = findCodeParamName(hit.tool.inputSchema) ?? 'sql';
+    const args: Record<string, unknown> = { ...buildToolArgs(hit.tool.inputSchema, codeParam, sql, 'sql'), ...(cell.args ?? {}) };
+    args[codeParam] = sql;
+    const raw = await callTool(hit.serverName, hit.toolName, args);
     return parseResult(raw, startedAt);
   };
 }
@@ -464,12 +538,21 @@ interface CanvasLike {
   callTool: (name: string, toolName: string, args: unknown) => Promise<unknown>;
 }
 
-async function waitForEnabledServers(canvas: CanvasLike, timeoutMs: number): Promise<void> {
+async function waitForEnabledServers(
+  canvas: CanvasLike,
+  timeoutMs: number,
+  expectedCount: number,
+): Promise<void> {
+  // expectedCount = number of servers declared by the notebook frontmatter.
+  // Without this, an empty canvas.dataServers (autoConnect lost a race against
+  // canvas.__canvasVanilla being set, or a notify loop hasn't fired yet)
+  // would return immediately and the runner would execute against zero servers.
   const deadline = Date.now() + Math.max(0, timeoutMs);
   while (Date.now() < deadline) {
     const enabled = (canvas.dataServers ?? []).filter((s) => s.enabled !== false);
-    if (enabled.length === 0) return;
-    if (enabled.every((s) => s.connected)) return;
+    // Notebook declared no servers — nothing to wait for.
+    if (expectedCount === 0 && enabled.length === 0) return;
+    if (enabled.length >= expectedCount && enabled.every((s) => s.connected)) return;
     await new Promise((r) => setTimeout(r, 100));
   }
 }
@@ -489,7 +572,10 @@ export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => v
         onTick?.(overlay);
         return;
       }
-      await waitForEnabledServers(canvas, timeoutMs ?? 5000);
+      const declaredServers = Array.isArray((data as { servers?: unknown }).servers)
+        ? (data as { servers: unknown[] }).servers.length
+        : 0;
+      await waitForEnabledServers(canvas, timeoutMs ?? 10_000, declaredServers);
 
       const sqlRunner = createBridgeSqlRunner(
         canvas.callTool.bind(canvas),
@@ -1248,8 +1334,6 @@ const NOTEBOOK_STYLES = `
 
 .nb-root.nb-view-mode .nb-drag-handle,
 .nb-root.nb-view-mode .nb-icon-btn.nb-danger,
-.nb-root.nb-view-mode .nb-toggle-src,
-.nb-root.nb-view-mode .nb-toggle-res,
 .nb-root.nb-view-mode .nb-add-cell,
 .nb-root.nb-view-mode .nbe-cell-actionbar { display: none !important; }
 
@@ -1318,11 +1402,23 @@ const NOTEBOOK_STYLES = `
   display: flex; flex-direction: column; gap: 6px;
 }
 .nbe-agent-bar auto-chat-input { display: block; }
+.nbe-actions-sep { color: var(--color-border, #c8c2b4); margin: 0 4px; user-select: none; }
+.nb-cell-chat-active { outline: 2px solid var(--color-accent, #1d6f5f); outline-offset: 4px; border-radius: 6px; }
 .nbe-agent-status {
   font-family: var(--font-mono, monospace); font-size: 11px;
   color: var(--color-text2, #645d4f);
   padding: 0 4px;
 }
+.nbe-agent-progress {
+  display: flex; align-items: center; gap: 10px;
+  font-family: var(--font-mono, monospace); font-size: 11px;
+  color: var(--color-text2, #645d4f);
+  padding: 0 4px;
+}
+.nbe-progress-track { letter-spacing: 1px; color: var(--color-accent, #1d6f5f); }
+.nbe-progress-fill { display: inline-block; }
+.nbe-agent-progress.nbe-progress-done .nbe-progress-track { color: var(--color-accent, #1d6f5f); }
+.nbe-agent-progress.nbe-progress-error .nbe-progress-track { color: #b54141; }
 /* Run controls (.nb-ctl-pill) remain active in view mode — users can execute cells
  * even when the notebook is read-only; only editing the source is locked. */
 .nb-root.nb-view-mode textarea,