@webmcp-auto-ui/ui 2.5.37 → 2.5.38

package/src/widgets/notebook/shared.ts

@@ -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 {
@@ -189,6 +200,9 @@ export function createState(initial?: Partial<NotebookState>): NotebookState {
     autoRun: initial?.autoRun ?? false,
     publishedSlug: initial?.publishedSlug,
     publishedToken: initial?.publishedToken,
+    webmcpServers: initial?.webmcpServers,
+    chatApiBase: initial?.chatApiBase,
+    hidePublishBadge: initial?.hidePublishBadge,
   };
 }
 
@@ -308,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');
@@ -334,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);
@@ -683,7 +700,8 @@ export interface DataServerDescriptor {
   /** 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[];
 }
@@ -734,6 +752,30 @@ export function collectDataServers(data: Record<string, unknown>): DataServerDes
     }));
 }
 
+/**
+ * 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)
@@ -765,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 ? '💾 save' : '📤 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 = `Save changes to ${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';
   }
@@ -790,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 = '';
@@ -847,20 +908,24 @@ 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 ? '… saving' : '… publishing';
+    btn.textContent = mode === 'save' ? '… saving' : mode === 'fork' ? '… forking' : '… publishing';
     try {
       // 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({
-          markdown,
-          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();
@@ -873,15 +938,20 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
       // 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
-          ? `saved · ${baseUrl.replace(/^https?:\/\//, '')} (author link copied)`
-          : `published · ${baseUrl.replace(/^https?:\/\//, '')} (author link copied)`
-      );
+      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;
@@ -891,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);
@@ -1162,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));

package/src/widgets/rich/data-table.svelte

@@ -23,15 +23,36 @@
   let sortCol = $state<string|null>(null);
   let sortAsc = $state(true);
 
-  const rows = $derived<Record<string,unknown>[]>(
-    Array.isArray(data?.rows) && (data!.rows as unknown[]).length
-      ? data!.rows as Record<string,unknown>[]
-      : []
-  );
+  // ── Tolerance 1: alias `headers` → `columns` ─────────────────────────────
+  // Some callers pass `headers` (array of strings or column objects) instead of
+  // `columns`. Normalise so downstream logic only sees `columns`.
+  const resolvedColumnDefs = $derived.by<DataTableColumn[] | null>(() => {
+    const src = (data as DataTableData & { headers?: unknown }).headers ?? data?.columns;
+    if (!Array.isArray(src) || !src.length) return null;
+    // headers can be plain strings ["A","B"] or full column objects [{key,label}]
+    return (src as unknown[]).map((h) =>
+      typeof h === 'string' ? { key: h, label: h } : h as DataTableColumn
+    );
+  });
+
+  // ── Tolerance 2: rows as array-of-arrays ─────────────────────────────────
+  // If the first row is an array, map each row to an object using `resolvedColumnDefs`
+  // (falling back to positional keys "0","1",… when no column defs are available).
+  const rows = $derived.by<Record<string,unknown>[]>(() => {
+    if (!Array.isArray(data?.rows) || !(data!.rows as unknown[]).length) return [];
+    const raw = data!.rows as unknown[];
+    if (!Array.isArray(raw[0])) return raw as Record<string,unknown>[];
+    // array-of-arrays: convert to array-of-objects
+    const keys = resolvedColumnDefs?.map(c => c.key)
+      ?? (raw[0] as unknown[]).map((_, i) => String(i));
+    return (raw as unknown[][]).map(arr =>
+      Object.fromEntries(keys.map((k, i) => [k, arr[i]]))
+    );
+  });
 
   const columns = $derived<DataTableColumn[]>(
-    Array.isArray(data?.columns) && (data!.columns as unknown[]).length
-      ? data!.columns as DataTableColumn[]
+    resolvedColumnDefs && resolvedColumnDefs.length
+      ? resolvedColumnDefs
       : rows.length > 0
         ? Object.keys(rows[0] as object).map(k => ({ key: k, label: k }))
         : []