@webmcp-auto-ui/ui 2.5.36 → 2.5.37

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 {
@@ -187,6 +187,8 @@ 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,
   };
 }
 
@@ -260,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';
 }
 
 /**
@@ -348,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;
 
@@ -423,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;
@@ -447,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) {
@@ -486,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 {
@@ -672,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[];
@@ -704,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 : [],
@@ -715,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 : [],
@@ -753,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 {
@@ -761,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';
   }
@@ -835,21 +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,
-            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,
         }),
@@ -859,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;