@webmcp-auto-ui/ui 2.5.36 → 2.5.38

package/src/widgets/notebook/shared.ts

@@ -4,7 +4,7 @@
 // Used by the four notebook layout renderers (compact/workspace/document/editorial)
 // ---------------------------------------------------------------------------
 
-import { installMultiMcpBridge } from '@webmcp-auto-ui/core';
+import { serializeToMarkdown } from './share-handlers.js';
 
 export const NB_PUBLISH_HOST: string = (() => {
   try {
@@ -25,6 +25,7 @@ export type CellResult =
   | { ok: true; kind: 'table'; rows: Record<string, unknown>[]; columns: string[]; rowCount: number; truncated?: boolean; durationMs: number; logs?: string[] }
   | { ok: true; kind: 'value'; value: unknown; durationMs: number; logs?: string[] }
   | { ok: true; kind: 'chart'; spec: unknown; durationMs: number; logs?: string[] }
+  | { ok: true; kind: 'widget'; widgets: Array<{ name: string; params: Record<string, unknown> }>; durationMs: number; logs?: string[] }
   | { ok: true; kind: 'empty'; durationMs: number; logs?: string[] }
   | { ok: false; error: string; errorKind?: 'syntax' | 'runtime' | 'timeout' | 'schema'; durationMs: number; logs?: string[] };
 
@@ -71,6 +72,16 @@ export interface NotebookState {
    * a RuntimeOverlay consumed at render. Default false (frozen snapshots).
    */
   autoRun?: boolean;
+  /** Bundled WebMCP server instances active in this notebook. Populated from
+   *  `data.webmcpServers` at mount; used by the widget picker (+widget) and as
+   *  fallback for `mountWidget` when a custom-element tag isn't defined. */
+  webmcpServers?: import('@webmcp-auto-ui/core').WebMcpServer[];
+  /** Host-supplied LLM proxy endpoint. The notebook agent posts to this URL.
+   *  Defaults to '/api/chat' when absent — flex sets '/flex/api/chat' to
+   *  match its base path; notebook-viewer keeps the default. */
+  chatApiBase?: string;
+  /** Suppress the published-slug chip in the header (notebook-viewer use). */
+  hidePublishBadge?: boolean;
 }
 
 export interface HistoryEntry {
@@ -187,6 +198,11 @@ export function createState(initial?: Partial<NotebookState>): NotebookState {
     executors: initial?.executors ?? {},
     lastEditAt: initial?.lastEditAt ?? Date.now(),
     autoRun: initial?.autoRun ?? false,
+    publishedSlug: initial?.publishedSlug,
+    publishedToken: initial?.publishedToken,
+    webmcpServers: initial?.webmcpServers,
+    chatApiBase: initial?.chatApiBase,
+    hidePublishBadge: initial?.hidePublishBadge,
   };
 }
 
@@ -260,9 +276,9 @@ export function cellRuntimeStatus(cell: NotebookCell, overlay: RuntimeOverlay |
   return 'idle';
 }
 
-/** Live-mode whitelist. Only SQL cells are re-executable publicly. */
+/** Live-mode whitelist. SQL and JS cells are re-executable; markdown stays frozen. */
 export function isReRunnable(cell: NotebookCell): boolean {
-  return cell.type === 'sql';
+  return cell.type === 'sql' || cell.type === 'js';
 }
 
 /**
@@ -306,17 +322,18 @@ export async function runAutoRefresh(opts: AutoRefreshOptions): Promise<AutoRefr
   onTick?.(overlay);
 
   const summary: AutoRefreshSummary = { rerun: 0, frozen: 0, stale: 0, failed: 0 };
+  const sharedSignal = signal ?? new AbortController().signal;
 
-  for (const cell of state.cells) {
-    if (signal?.aborted) break;
-    if (!isReRunnable(cell)) { summary.frozen++; continue; }
+  const tasks = state.cells.map(async (cell) => {
+    if (sharedSignal.aborted) return;
+    if (!isReRunnable(cell)) { summary.frozen++; return; }
 
     overlay.status.set(cell.id, 'running');
     onCellChange?.(cell.id);
     onTick?.(overlay);
 
     try {
-      const result = await runner(cell, signal ?? new AbortController().signal);
+      const result = await runner(cell, sharedSignal);
       if (result.ok) {
         overlay.outputs.set(cell.id, { result, refreshedAt: Date.now() });
         overlay.status.set(cell.id, 'fresh');
@@ -332,7 +349,9 @@ export async function runAutoRefresh(opts: AutoRefreshOptions): Promise<AutoRefr
     }
     onCellChange?.(cell.id);
     onTick?.(overlay);
-  }
+  });
+
+  await Promise.all(tasks);
 
   overlay.finishedAt = Date.now();
   onTick?.(overlay);
@@ -348,22 +367,17 @@ export function lastRefreshedAt(overlay: RuntimeOverlay | null | undefined): num
 }
 
 /**
- * Build a CellRunner backed by a MultiMcpBridge. Discovers a SQL-capable tool
- * on the connected servers (matching `*_query_sql` then `query|run|execute`),
- * calls it with `{ sql: cell.content }`, parses content-array into a table.
+ * Build a CellRunner that issues SQL via `callTool`. Discovers a SQL-capable
+ * tool on the connected servers (matching `*_query_sql` then
+ * `query|run|execute`), calls it with `{ sql: cell.content }`, parses the
+ * content-array into a table.
  *
- * Throws if no server is reachable / no SQL tool found. Callers are expected
- * to surface this as a 'stale' status, not crash.
+ * Returns a runtime error result if no server is reachable / no SQL tool found.
  */
-export function createBridgeSqlRunner(bridge: {
-  hasServer?: (name: string) => boolean;
-  connectedServers?: () => string[];
-  multiClient: {
-    listTools?: (url: string) => Promise<{ name: string }[]>;
-    getToolsForUrl?: (url: string) => { name: string }[];
-  };
-  callTool: (serverName: string, toolName: string, args: unknown) => Promise<unknown>;
-}, getServerDescriptors: () => DataServerDescriptor[]): CellRunner {
+export function createBridgeSqlRunner(
+  callTool: (serverName: string, toolName: string, args: unknown) => Promise<unknown>,
+  getServerDescriptors: () => DataServerDescriptor[],
+): CellRunner {
   const PATTERN_PRIMARY = /^.*query_sql$/i;
   const PATTERN_FALLBACK = /^(query|run|execute)(_sql)?$/i;
 
@@ -423,20 +437,18 @@ export function createBridgeSqlRunner(bridge: {
     if (!hit) {
       return { ok: false, error: 'No SQL tool exposed by reachable servers', errorKind: 'schema', durationMs: 0 };
     }
-    const raw = await bridge.callTool(hit.serverName, hit.toolName, { sql: cell.content });
+    const raw = await callTool(hit.serverName, hit.toolName, { sql: cell.content });
     return parseResult(raw, startedAt);
   };
 }
 
 /**
- * High-level bootstrap: auto-connect declared servers, wait for handshake, build
- * a bridge-backed runner, fire runAutoRefresh. Safe to call from any layout at
- * mount time when `state.autoRun && state.mode === 'view'`. Returns a cleanup.
+ * High-level bootstrap: auto-connect declared servers, wait for handshake,
+ * build a SQL runner, fire runAutoRefresh. Safe to call from any layout at
+ * mount time when `state.autoRun && state.mode === 'view'`. Returns cleanup.
  *
- * Reuses the global singleton bridge on `globalThis.__multiMcp` (installed via
- * `installMultiMcpBridge` from @webmcp-auto-ui/core) — never creates a parallel
- * bridge. If no singleton exists yet we install it here, and only the installer
- * is allowed to stop it on cleanup.
+ * Drives connection state through the canvas store; the store's internal
+ * sync owns the McpMultiClient and reconciles handshakes on every mutation.
  */
 export interface BootstrapLiveRefreshOptions {
   state: NotebookState;
@@ -447,36 +459,54 @@ export interface BootstrapLiveRefreshOptions {
   timeoutMs?: number;
 }
 
+interface CanvasLike {
+  dataServers: { name: string; url: string; enabled?: boolean; connected?: boolean }[];
+  callTool: (name: string, toolName: string, args: unknown) => Promise<unknown>;
+}
+
+async function waitForEnabledServers(canvas: CanvasLike, timeoutMs: number): Promise<void> {
+  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;
+    await new Promise((r) => setTimeout(r, 100));
+  }
+}
+
 export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => void {
   const { state, data, overlay, onCellChange, onTick, timeoutMs } = opts;
   const ac = new AbortController();
-  let weCreatedBridge = false;
-  let bridgeRef: any = null;
 
   void (async () => {
     try {
       autoConnectFrontmatterServers(data);
-      const canvas: any = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
-        .__canvasVanilla ?? (globalThis as { canvasVanilla?: unknown }).canvasVanilla;
+      const canvas = ((globalThis as { __canvasVanilla?: CanvasLike; canvasVanilla?: CanvasLike })
+        .__canvasVanilla ?? (globalThis as { canvasVanilla?: CanvasLike }).canvasVanilla) as CanvasLike | undefined;
       if (!canvas) {
         overlay.error = 'No canvas available';
         overlay.finishedAt = Date.now();
         onTick?.(overlay);
         return;
       }
-      const existing = (globalThis as any).__multiMcp;
-      const bridge = existing ?? installMultiMcpBridge({ getCanvas: () => canvas });
-      weCreatedBridge = !existing;
-      bridgeRef = bridge;
-      // `installMultiMcpBridge` already starts the bridge; a pre-existing
-      // singleton is assumed to be running.
-      await bridge.waitForEnabledServers(timeoutMs ?? 5000);
-
-      const runner = createBridgeSqlRunner(bridge, () => {
-        // filter collectDataServers to only connected ones
-        const all = collectDataServers(data);
-        return all.filter((s) => bridge.hasServer(s.name));
-      });
+      await waitForEnabledServers(canvas, timeoutMs ?? 5000);
+
+      const sqlRunner = createBridgeSqlRunner(
+        canvas.callTool.bind(canvas),
+        () => collectDataServers(data).filter((s) => canvas.dataServers.find((d) => d.name === s.name)?.connected),
+      );
+
+      const runner: CellRunner = async (cell, signal) => {
+        if (cell.type === 'sql') return sqlRunner(cell, signal);
+        if (cell.type === 'js') {
+          const exec = state.executors?.js;
+          if (!exec) {
+            return { ok: false, error: 'No JS executor registered', errorKind: 'runtime', durationMs: 0 };
+          }
+          return exec({ cell, state, scope: state.scope, signal });
+        }
+        return { ok: false, error: `Cell type '${cell.type}' is not re-runnable`, errorKind: 'runtime', durationMs: 0 };
+      };
 
       await runAutoRefresh({ state, overlay, runner, onCellChange, onTick, signal: ac.signal });
     } catch (err) {
@@ -486,16 +516,7 @@ export function bootstrapLiveRefresh(opts: BootstrapLiveRefreshOptions): () => v
     }
   })();
 
-  return () => {
-    ac.abort();
-    if (weCreatedBridge && bridgeRef && typeof bridgeRef.stop === 'function') {
-      try { bridgeRef.stop(); } catch { /* ignore */ }
-      try {
-        const g: any = globalThis as any;
-        if (g.__multiMcp === bridgeRef) g.__multiMcp = undefined;
-      } catch { /* ignore */ }
-    }
-  };
+  return () => { ac.abort(); };
 }
 
 export function registerExecutor(state: NotebookState, type: CellType, fn: CellExecutor): void {
@@ -672,9 +693,15 @@ export interface DataServerRecipe {
 }
 
 export interface DataServerDescriptor {
+  /** Canvas key (= registry id, e.g. 'wikipedia'). Stable identity used for routing. */
   name: string;
+  /** Display label (registry label, or URL host for manual entries). */
+  label?: string;
+  /** Real server name from MCP handshake (initResult.serverInfo.name, aliased). */
+  serverName?: string;
   url?: string;
-  kind?: string;
+  /** 'data' = remote MCP via canvas.dataServers, 'webmcp' = bundled JS server. */
+  kind?: 'data' | 'webmcp' | string;
   tools?: DataServerTool[];
   recipes?: DataServerRecipe[];
 }
@@ -704,6 +731,8 @@ export function collectDataServers(data: Record<string, unknown>): DataServerDes
       .filter((s) => !isUiServer(String(s?.name ?? ''), s?.kind))
       .map((s) => ({
         name: String(s.name),
+        label: typeof s.label === 'string' ? s.label : undefined,
+        serverName: typeof s.serverName === 'string' ? s.serverName : undefined,
         url: s.url ? String(s.url) : undefined,
         recipes: Array.isArray(s.recipes) ? s.recipes : [],
         tools: Array.isArray(s.tools) ? s.tools : [],
@@ -715,12 +744,38 @@ export function collectDataServers(data: Record<string, unknown>): DataServerDes
     .filter((s) => s?.name && !isUiServer(String(s.name), s?.kind))
     .map((s) => ({
       name: String(s.name),
+      label: typeof s.label === 'string' ? s.label : undefined,
+      serverName: typeof s.serverName === 'string' ? s.serverName : undefined,
       url: s.url ? String(s.url) : undefined,
       recipes: Array.isArray(s.recipes) ? s.recipes : [],
       tools: Array.isArray(s.tools) ? s.tools : [],
     }));
 }
 
+/**
+ * Project bundled WebMCP server instances into the same descriptor shape used
+ * by the left pane, so they render alongside remote data servers in a separate
+ * "Widgets" group. Recipe bodies are inlined (no get_recipe roundtrip needed).
+ */
+export function collectWebmcpServers(
+  servers: import('@webmcp-auto-ui/core').WebMcpServer[] | undefined,
+): DataServerDescriptor[] {
+  if (!servers?.length) return [];
+  return servers.map((s) => {
+    const layer = (() => { try { return s.layer(); } catch { return { recipes: [], tools: [] }; } })();
+    return {
+      name: s.name,
+      label: s.name,
+      kind: 'webmcp' as const,
+      recipes: (layer.recipes ?? []).map((r: any) => ({ name: r.name, description: r.description, body: r.body })),
+      // Tools of bundled WebMCP servers (search_recipes, widget_display, canvas, …)
+      // are agent-facing primitives, not callable from a JS cell via callTool().
+      // Hide them from the Resources pane to avoid generating broken cells.
+      tools: [],
+    };
+  });
+}
+
 
 // ---------------------------------------------------------------------------
 // Publish controls (button + optional badge + optional footer)
@@ -752,16 +807,25 @@ function publishUrlFor(slug: string): string {
   return `${NB_PUBLISH_HOST}/p/${slug}`;
 }
 
+function publishMode(state: NotebookState): 'publish' | 'save' | 'fork' {
+  if (!state.publishedSlug) return 'publish';
+  return state.publishedToken ? 'save' : 'fork';
+}
+
 function publishBtnLabel(state: NotebookState): string {
-  return state.publishedSlug ? '🔄 update' : '📤 publish';
+  const m = publishMode(state);
+  return m === 'save' ? '💾 save' : m === 'fork' ? '🍴 fork' : '📤 publish';
 }
 
 function refreshPublishControls(state: NotebookState, controls: PublishControlsHandles): void {
   const { btn, badge, footer } = controls;
   btn.textContent = publishBtnLabel(state);
-  btn.dataset.state = state.publishedSlug ? 'published' : 'draft';
-  if (state.publishedSlug) {
-    btn.title = `Update ${publishUrlFor(state.publishedSlug)}`;
+  const mode = publishMode(state);
+  btn.dataset.state = mode === 'publish' ? 'draft' : mode === 'fork' ? 'fork' : 'published';
+  if (mode === 'save') {
+    btn.title = `Save changes to ${publishUrlFor(state.publishedSlug!)}`;
+  } else if (mode === 'fork') {
+    btn.title = 'Fork this notebook — publish a copy you own';
   } else {
     btn.title = 'Publish this notebook';
   }
@@ -777,8 +841,18 @@ function refreshPublishControls(state: NotebookState, controls: PublishControlsH
   }
   if (footer) {
     if (state.publishedSlug) {
-      const url = publishUrlFor(state.publishedSlug);
-      footer.innerHTML = `Published at <a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(url)}</a>`;
+      const publicUrl = publishUrlFor(state.publishedSlug);
+      if (state.publishedToken) {
+        // Author view — show the author URL (with ?t=) so the author keeps their
+        // edit access even after the clipboard is overwritten. The public URL is
+        // exposed via a copy button next to it for sharing.
+        const authorUrl = `${publicUrl}?t=${encodeURIComponent(state.publishedToken)}`;
+        footer.innerHTML =
+          `Published at <a href="${escapeHtml(authorUrl)}" target="_blank" rel="noopener">${escapeHtml(publicUrl)}</a>` +
+          ` <button type="button" class="nb-copy-public-link" title="Copy public link (no edit token)" data-public-url="${escapeHtml(publicUrl)}">copy public link</button>`;
+      } else {
+        footer.innerHTML = `Published at <a href="${escapeHtml(publicUrl)}" target="_blank" rel="noopener">${escapeHtml(publicUrl)}</a>`;
+      }
       footer.style.display = '';
     } else {
       footer.innerHTML = '';
@@ -834,42 +908,50 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
 
   const onClick = async () => {
     const prevLabel = btn.textContent ?? '';
+    const mode = publishMode(state);
     btn.disabled = true;
-    btn.textContent = state.publishedSlug ? '… updating' : '… publishing';
+    btn.textContent = mode === 'save' ? '… saving' : mode === 'fork' ? '… forking' : '… publishing';
     try {
-      const minimal = opts.serializeState
-        ? opts.serializeState(state)
-        : {
-            id: state.id,
-            title: state.title,
-            mode: state.mode,
-            cells: state.cells,
-          };
+      // HyperSkill standalone markdown — frontmatter (title/description/servers)
+      // + body with fenced cells. Re-parsable via parseFrontmatter + parseBody.
+      const markdown = serializeToMarkdown(state);
+      // Fork = publish a fresh copy (no slug/token) — the server allocates a new
+      // slug and token, and the visitor becomes the author of the copy.
+      const payload: Record<string, unknown> = { markdown };
+      if (mode === 'save') {
+        payload.slug = state.publishedSlug;
+        payload.token = state.publishedToken;
+      }
       const res = await fetch(`${NB_PUBLISH_HOST}/api/publish`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({
-          state: minimal,
-          slug: state.publishedSlug,
-          token: state.publishedToken,
-        }),
+        body: JSON.stringify(payload),
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const reply: any = await res.json();
       state.publishedSlug = reply.slug;
       state.publishedToken = reply.token;
       state.lastEditAt = Date.now();
-      const url: string = reply.url ?? publishUrlFor(String(reply.slug));
-      try { await navigator.clipboard?.writeText?.(url); } catch { /* ignore */ }
+      const baseUrl: string = reply.url ?? publishUrlFor(String(reply.slug));
+      // Author URL embeds the token via `?t=` so the viewer can hydrate it
+      // (one-shot — the viewer extracts it into localStorage and cleans the
+      // URL). Public visitors share the bare URL without ?t.
+      const authorUrl = `${baseUrl}?t=${encodeURIComponent(String(reply.token))}`;
+      try { await navigator.clipboard?.writeText?.(authorUrl); } catch { /* ignore */ }
+      // On fork, also rewrite the browser URL so the visitor sees the new slug
+      // and so a refresh keeps them as author (token persisted in localStorage).
+      if (mode === 'fork' && typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(`nb-token-${reply.slug}`, String(reply.token));
+        } catch {}
+        try { window.history.replaceState({}, '', baseUrl); } catch {}
+      }
       const updated = Boolean(reply.updated);
-      toast(
-        updated
-          ? `updated · ${url.replace(/^https?:\/\//, '')} (copied)`
-          : `published · ${url.replace(/^https?:\/\//, '')} (copied)`
-      );
-      opts.onPublished?.({ slug: String(reply.slug), url, updated });
+      const action = mode === 'fork' ? 'forked' : updated ? 'saved' : 'published';
+      toast(`${action} · ${baseUrl.replace(/^https?:\/\//, '')} (author link copied)`);
+      opts.onPublished?.({ slug: String(reply.slug), url: baseUrl, updated });
     } catch (err: any) {
-      toast(`publish failed · ${String(err?.message ?? err)}`, true);
+      toast(`${mode} failed · ${String(err?.message ?? err)}`, true);
       btn.textContent = prevLabel;
     } finally {
       btn.disabled = false;
@@ -879,8 +961,26 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
 
   btn.addEventListener('click', onClick);
 
+  // Delegated handler for the "copy public link" button rendered in the footer
+  // when the author has a token. We can't bind directly because the footer
+  // innerHTML is rebuilt by refreshPublishControls.
+  const onFooterClick = (e: Event) => {
+    const target = e.target as HTMLElement | null;
+    const copyBtn = target?.closest('.nb-copy-public-link') as HTMLElement | null;
+    if (!copyBtn) return;
+    e.preventDefault();
+    const url = copyBtn.dataset.publicUrl ?? '';
+    if (!url) return;
+    void (async () => {
+      try { await navigator.clipboard?.writeText?.(url); toast(`public link copied · ${url.replace(/^https?:\/\//, '')}`); }
+      catch { toast('copy failed', true); }
+    })();
+  };
+  if (footer) footer.addEventListener('click', onFooterClick);
+
   return () => {
     btn.removeEventListener('click', onClick);
+    if (footer) footer.removeEventListener('click', onFooterClick);
     btn.parentNode?.removeChild(btn);
     badge?.parentNode?.removeChild(badge);
     footer?.parentNode?.removeChild(footer);
@@ -1150,7 +1250,79 @@ const NOTEBOOK_STYLES = `
 .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 { display: none !important; }
+.nb-root.nb-view-mode .nb-add-cell,
+.nb-root.nb-view-mode .nbe-cell-actionbar { display: none !important; }
+
+/* Per-cell action bar — slim row of insert/agent shortcuts shown under each cell in edit mode. */
+.nbe-cell-actionbar {
+  display: flex; gap: 4px; align-items: center;
+  margin: 4px 0 14px 0; padding-left: 28px;
+  opacity: 0.55; transition: opacity 120ms ease;
+}
+.nbe-cell-actionbar:hover { opacity: 1; }
+.nb-cellbar-btn {
+  font-size: 11px; padding: 2px 8px; line-height: 1.4;
+  background: transparent; border: 1px dashed var(--color-border, #c8c2b4);
+  color: var(--color-text2, #645d4f); border-radius: 6px; cursor: pointer;
+}
+.nb-cellbar-btn:hover { background: var(--color-bg2, #f4efdf); color: var(--color-text1, #1c1a16); border-style: solid; }
+
+/* Widget picker overlay (+widget action) */
+.nbe-picker-overlay {
+  position: fixed; inset: 0; background: rgba(20, 18, 14, 0.55);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 80px; z-index: 9999;
+  font-family: var(--font-sans, system-ui);
+}
+.nbe-picker {
+  background: var(--color-bg1, #faf6e6); color: var(--color-text1, #1c1a16);
+  border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.18);
+  width: min(620px, calc(100vw - 32px)); max-height: 70vh;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.nbe-picker > header {
+  display: flex; gap: 8px; align-items: center;
+  padding: 10px 12px; border-bottom: 1px solid var(--color-border, #c8c2b4);
+}
+.nbe-picker-q {
+  flex: 1; font-family: inherit; font-size: 14px;
+  padding: 6px 10px; border: 1px solid var(--color-border, #c8c2b4);
+  background: var(--color-bg0, #ffffff); border-radius: 6px;
+}
+.nbe-picker-close {
+  background: transparent; border: none; cursor: pointer;
+  font-size: 16px; color: var(--color-text2, #645d4f); padding: 4px 8px;
+}
+.nbe-picker-list {
+  list-style: none; margin: 0; padding: 4px 0;
+  overflow-y: auto; flex: 1;
+}
+.nbe-picker-list li {
+  display: grid; grid-template-columns: minmax(120px, auto) auto 1fr;
+  gap: 12px; align-items: baseline;
+  padding: 8px 14px; cursor: pointer;
+  border-bottom: 1px solid var(--color-bg2, #f0eada);
+}
+.nbe-picker-list li:hover { background: var(--color-bg2, #f4efdf); }
+.nbe-picker-name { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--color-text1, #1c1a16); }
+.nbe-picker-server { font-size: 11px; color: var(--color-accent, #1d6f5f); text-transform: lowercase; }
+.nbe-picker-desc { font-size: 12px; color: var(--color-text2, #645d4f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Agent bar (+agent) */
+.nbe-agent-bar {
+  margin: 0 0 16px 28px;
+  padding: 8px 10px;
+  background: var(--color-bg2, #f4efdf);
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #c8c2b4);
+  display: flex; flex-direction: column; gap: 6px;
+}
+.nbe-agent-bar auto-chat-input { display: block; }
+.nbe-agent-status {
+  font-family: var(--font-mono, monospace); font-size: 11px;
+  color: var(--color-text2, #645d4f);
+  padding: 0 4px;
+}
 /* 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,

package/src/widgets/rich/cards.svelte

@@ -15,6 +15,7 @@
   export interface CardsData {
     title?: string;
     cards?: CardItem[];
+    items?: CardItem[];
     minCardWidth?: string;
     gap?: string;
     emptyMessage?: string;
@@ -28,7 +29,8 @@
   let { data = {}, oncardclick }: Props = $props();
 
   const cards = $derived.by<CardItem[]>(() => {
-    if (Array.isArray(data?.cards) && (data!.cards as unknown[]).length) return data!.cards as CardItem[];
+    const list = data?.cards ?? data?.items;
+    if (Array.isArray(list) && (list as unknown[]).length) return list as CardItem[];
     return [];
   });
 </script>

package/src/widgets/rich/chart-rich.svelte

@@ -41,20 +41,86 @@
     return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean';
   }
 
+  /**
+   * Normalize a single series item:
+   * - `values: number[]`  → kept as-is
+   * - `value: number`     → wrapped as `[value]`   (tolerance #1)
+   */
+  function normalizeItem(o: Record<string, unknown>): ChartDataset | null {
+    // Prefer explicit `values` array; fall back to scalar `value`
+    let values: number[];
+    if (Array.isArray(o.values)) {
+      values = coerceValues(o.values);
+    } else if (typeof o.value === 'number' && Number.isFinite(o.value)) {
+      values = [o.value];
+    } else if (typeof o.value === 'string') {
+      const n = Number(o.value);
+      values = Number.isFinite(n) ? [n] : [];
+    } else {
+      values = [];
+    }
+    if (!values.length) return null;
+    return {
+      label: isPrimitiveLabel(o.label) ? String(o.label) : undefined,
+      values,
+      color: typeof o.color === 'string' ? o.color : undefined,
+    };
+  }
+
+  /** Detect categorical shorthand: [{label?, value}, ...] — one point per item, single series. */
+  function isCategoricalArray(raw: unknown): boolean {
+    if (!Array.isArray(raw) || raw.length === 0) return false;
+    return raw.every(item =>
+      item && typeof item === 'object'
+      && !Array.isArray((item as Record<string, unknown>).values)
+      && (item as Record<string, unknown>).value !== undefined
+    );
+  }
+
   function normalizeDatasets(raw: unknown): ChartDataset[] {
     if (!Array.isArray(raw)) return [];
+    // Categorical shorthand: collapse N items into ONE series of N points.
+    // Without this, recipes that send `data: [{label, value}, ...]` produce N
+    // datasets of 1 point each, all rendering at x=0 (all dots stack vertically).
+    if (isCategoricalArray(raw)) {
+      const values = raw.map(item => {
+        const v = (item as Record<string, unknown>).value;
+        const n = typeof v === 'number' ? v : Number(v as string);
+        return Number.isFinite(n) ? n : 0;
+      });
+      return [{ values }];
+    }
     return raw.flatMap(item => {
       if (!item || typeof item !== 'object') return [];
-      const o = item as Record<string, unknown>;
-      // Validate values field
-      const values = coerceValues(o.values);
-      if (!values.length) return [];
-      return [{ label: isPrimitiveLabel(o.label) ? String(o.label) : undefined, values, color: typeof o.color === 'string' ? o.color : undefined }];
+      const result = normalizeItem(item as Record<string, unknown>);
+      return result ? [result] : [];
     });
   }
 
-  const datasets = $derived<ChartDataset[]>(normalizeDatasets(data?.datasets));
-  const labels = $derived<string[]>(Array.isArray(data?.labels) ? (data!.labels! as unknown[]).filter(isPrimitiveLabel).map(String) : []);
+  function extractCategoricalLabels(raw: unknown): string[] {
+    if (!isCategoricalArray(raw)) return [];
+    return (raw as unknown[]).map(item => {
+      const l = (item as Record<string, unknown>).label;
+      return typeof l === 'string' || typeof l === 'number' ? String(l) : '';
+    });
+  }
+
+  /**
+   * Resolve datasets from `data` prop, tolerating two shapes:
+   * - `{ datasets: [...] }` — canonical
+   * - `{ data: [...] }`     — agent shorthand (schema uses `data` key)
+   */
+  const rawArray = $derived(
+    Array.isArray((data as Record<string, unknown> | undefined)?.['datasets'])
+      ? (data as Record<string, unknown>)['datasets']
+      : (data as Record<string, unknown> | undefined)?.['data'],
+  );
+  const datasets = $derived<ChartDataset[]>(normalizeDatasets(rawArray));
+  const labels = $derived<string[]>(
+    Array.isArray(data?.labels)
+      ? (data!.labels! as unknown[]).filter(isPrimitiveLabel).map(String)
+      : extractCategoricalLabels(rawArray),
+  );
   const type = $derived(data?.type ?? 'bar');
   const isPie = $derived(type === 'pie' || type === 'donut');
   const allVals = $derived(datasets.flatMap(d => d.values));