npm - @webmcp-auto-ui/ui - Versions diffs - 2.5.35 → 2.5.37 - Mend

@webmcp-auto-ui/ui 2.5.35 → 2.5.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/package.json +1 -1
package/src/agent/MCPserversList.svelte +44 -32
package/src/agent/RecipeBrowser.svelte +54 -18
package/src/agent/RemoteMCPserversDemo.svelte +7 -7
package/src/agent/ToolBrowser.svelte +34 -5
package/src/agent/WebMCPserversList.svelte +85 -40
package/src/index.ts +5 -0
package/src/primitives/MarkdownView.svelte +12 -2
package/src/recipe/RecipeCodeBlock.svelte +331 -0
package/src/recipe/RecipeRunModal.svelte +245 -0
package/src/recipe/types.ts +10 -0
package/src/widgets/WidgetRenderer.svelte +2 -0
package/src/widgets/notebook/executors/sql.ts +21 -7
package/src/widgets/notebook/import-modal-api.ts +15 -43
package/src/widgets/notebook/import-modal.svelte +36 -66
package/src/widgets/notebook/left-pane.ts +30 -12
package/src/widgets/notebook/notebook.svelte +0 -2
package/src/widgets/notebook/notebook.ts +12 -56
package/src/widgets/notebook/prose.ts +0 -78
package/src/widgets/notebook/recipes/notebook.md +0 -6
package/src/widgets/notebook/resource-extractor.ts +21 -1
package/src/widgets/notebook/share-handlers.ts +76 -3
package/src/widgets/notebook/shared.ts +113 -79

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

@@ -5,6 +5,7 @@
 // ---------------------------------------------------------------------------
 import { encode, buildShortUrl } from '@webmcp-auto-ui/sdk';
+import { canvasVanilla } from '@webmcp-auto-ui/sdk/canvas-vanilla';
 import type { NotebookState, NotebookCell } from './shared.js';
 // ---------------------------------------------------------------------------
@@ -27,8 +28,23 @@ export async function shareAsMarkdown(state: NotebookState): Promise<void> {
   triggerDownload(blob, sanitizeFilename(state.title || 'notebook') + '.md');
 }
-function serializeToMarkdown(state: NotebookState): string {
+/**
+ * Serialize a notebook state as a HyperSkill standalone markdown:
+ *   ---
+ *   title: "..."
+ *   description: "..."
+ *   servers:
+ *     - name: foo
+ *       url: https://...
+ *   ---
+ *   <body with ```sql / ```js fenced cells>
+ *
+ * Re-parsable via @webmcp-auto-ui/core::parseFrontmatter + @webmcp-auto-ui/sdk::parseBody.
+ */
+export function serializeToMarkdown(state: NotebookState): string {
+  const fm = buildFrontmatter(state);
   const parts: string[] = [];
+  if (fm) parts.push(fm);
   if (state.title) parts.push(`# ${state.title}`, '');
   for (const cell of state.cells) {
     if (cell.type === 'md') {
@@ -36,12 +52,70 @@ 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';
 }
+/**
+ * Emit YAML frontmatter for HyperSkill format. Reads connected MCP servers from
+ * the canvas store. Returns '' when nothing useful to declare (no title, no
+ * description, no servers) — caller can skip prepending.
+ */
+function buildFrontmatter(state: NotebookState): string {
+  const title = (state.title || '').trim();
+  const description = extractDescription(state);
+  const servers = collectEnabledServers();
+  if (!title && !description && servers.length === 0) return '';
+  const lines: string[] = ['---'];
+  if (title) lines.push(`title: ${yamlQuote(title)}`);
+  if (description) lines.push(`description: ${yamlQuote(description)}`);
+  if (servers.length > 0) {
+    lines.push('servers:');
+    for (const s of servers) {
+      lines.push(`  - name: ${yamlQuote(s.name)}`);
+      lines.push(`    url: ${yamlQuote(s.url)}`);
+    }
+  }
+  lines.push('---', '');
+  return lines.join('\n');
+}
+function extractDescription(state: NotebookState): string {
+  for (const cell of state.cells) {
+    if (cell.type !== 'md') continue;
+    const text = stripHtml(cell.content).trim();
+    if (!text) continue;
+    // First non-heading line of the first md cell.
+    const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
+    const prose = lines.find((l) => !/^#{1,6}\s/.test(l) && !/^[-*]\s/.test(l));
+    if (prose) return prose.slice(0, 200);
+  }
+  return '';
+}
+function collectEnabledServers(): { name: string; url: string }[] {
+  try {
+    const servers = canvasVanilla.dataServers ?? [];
+    return servers
+      .filter((s: any) => s?.enabled && s?.url && s?.name && s.name !== 'autoui' && s.kind !== 'ui' && s.kind !== 'webmcp')
+      .map((s: any) => ({ name: String(s.name), url: String(s.url) }));
+  } catch {
+    return [];
+  }
+}
+/** Quote a YAML scalar safely. Conservative: always double-quote. */
+function yamlQuote(s: string): string {
+  return '"' + s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"';
+}
 function stripHtml(s: string): string {
   if (typeof document === 'undefined') return s;
   const d = document.createElement('div');
@@ -191,7 +265,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 CHANGED Viewed

@@ -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 {
@@ -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,48 @@ 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,
+    publishedSlug: initial?.publishedSlug,
+    publishedToken: initial?.publishedToken,
   };
 }
+// 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
 //
@@ -238,9 +262,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';
 }
 /**
@@ -326,22 +350,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;
@@ -401,20 +420,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;
@@ -425,36 +442,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) {
@@ -464,16 +499,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 {
@@ -641,6 +667,7 @@ export function tickRunningCell(cell: NotebookCell, elapsedEl: HTMLElement, onDo
 export interface DataServerTool {
   name: string;
   description?: string;
+  inputSchema?: unknown;
 }
 export interface DataServerRecipe {
@@ -649,7 +676,12 @@ 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;
   tools?: DataServerTool[];
@@ -681,6 +713,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 : [],
@@ -692,6 +726,8 @@ 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 : [],
@@ -715,7 +751,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>;
 }
@@ -730,7 +766,7 @@ function publishUrlFor(slug: string): string {
 }
 function publishBtnLabel(state: NotebookState): string {
-  return state.publishedSlug ? '🔄 update' : '📤 publish';
+  return state.publishedSlug ? '💾 save' : '📤 publish';
 }
 function refreshPublishControls(state: NotebookState, controls: PublishControlsHandles): void {
@@ -738,7 +774,7 @@ function refreshPublishControls(state: NotebookState, controls: PublishControlsH
   btn.textContent = publishBtnLabel(state);
   btn.dataset.state = state.publishedSlug ? 'published' : 'draft';
   if (state.publishedSlug) {
-    btn.title = `Update ${publishUrlFor(state.publishedSlug)}`;
+    btn.title = `Save changes to ${publishUrlFor(state.publishedSlug)}`;
   } else {
     btn.title = 'Publish this notebook';
   }
@@ -812,22 +848,16 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
   const onClick = async () => {
     const prevLabel = btn.textContent ?? '';
     btn.disabled = true;
-    btn.textContent = state.publishedSlug ? '… updating' : '… publishing';
+    btn.textContent = state.publishedSlug ? '… saving' : '… publishing';
     try {
-      const minimal = opts.serializeState
-        ? opts.serializeState(state)
-        : {
-            id: state.id,
-            title: state.title,
-            kicker: state.kicker,
-            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);
       const res = await fetch(`${NB_PUBLISH_HOST}/api/publish`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({
-          state: minimal,
+          markdown,
           slug: state.publishedSlug,
           token: state.publishedToken,
         }),
@@ -837,15 +867,19 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
       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 */ }
       const updated = Boolean(reply.updated);
       toast(
         updated
-          ? `updated · ${url.replace(/^https?:\/\//, '')} (copied)`
-          : `published · ${url.replace(/^https?:\/\//, '')} (copied)`
+          ? `saved · ${baseUrl.replace(/^https?:\/\//, '')} (author link copied)`
+          : `published · ${baseUrl.replace(/^https?:\/\//, '')} (author link copied)`
       );
-      opts.onPublished?.({ slug: String(reply.slug), url, updated });
+      opts.onPublished?.({ slug: String(reply.slug), url: baseUrl, updated });
     } catch (err: any) {
       toast(`publish failed · ${String(err?.message ?? err)}`, true);
       btn.textContent = prevLabel;