@webmcp-auto-ui/ui 2.5.30 → 2.5.31

package/package.json

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

package/src/widgets/notebook/notebook.ts

@@ -11,7 +11,7 @@ import {
   addImportedCells, registerExecutor, collectDataServers,
   autosize, openShareModal, registerHistoryObserver,
   renderCellLogs,
-  createPublishControls, autoConnectFrontmatterServers,
+  createPublishControls, autoConnectFrontmatterServers, bootstrapMcpBridge,
   createRuntimeOverlay, effectiveResult, cellRuntimeStatus,
   lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround,
   type NotebookState, type NotebookCell, type CellResult, type CellExecContext,
@@ -289,6 +289,10 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   // Auto-connect data servers declared in the recipe frontmatter (data.servers)
   autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
 
+  // Start a persistent MCP bridge so the sql executor can find tools in edit mode
+  // too (not just when live-refresh is running in view mode).
+  const mcpBridgeCleanup = bootstrapMcpBridge({ data, MultiMcpBridgeCtor: MultiMcpBridge as any });
+
   // Keep pane servers in sync with canvas changes
   let canvasUnsub: (() => void) | null = null;
   try {
@@ -315,6 +319,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     pane.destroy();
     publishCleanup();
     liveCleanup?.();
+    mcpBridgeCleanup();
   };
 }
 

package/src/widgets/notebook/shared.ts

@@ -128,8 +128,19 @@ export function preserveScrollAround(anchor: HTMLElement): () => void {
   }
   const winY = window.scrollY;
   const saved = scrollParents.map((el) => el.scrollTop);
+  // Only capture the active cell if the user was actually editing
+  // (textarea or contentEditable). Clicking a button or label should
+  // NOT trigger a post-rerender refocus, which would scroll the page
+  // to that cell's input.
   const activeEl = document.activeElement as HTMLElement | null;
-  const activeCellId = activeEl?.closest<HTMLElement>('[data-cell-id]')?.dataset.cellId ?? null;
+  const isEditing = !!activeEl && (
+    activeEl.tagName === 'TEXTAREA' ||
+    activeEl.tagName === 'INPUT' ||
+    activeEl.isContentEditable
+  );
+  const activeCellId = isEditing
+    ? activeEl?.closest<HTMLElement>('[data-cell-id]')?.dataset.cellId ?? null
+    : null;
 
   return () => {
     requestAnimationFrame(() => {
@@ -844,6 +855,35 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
   };
 }
 
+/**
+ * Start a persistent MCP bridge that connects declared data servers and keeps
+ * their tool/recipe metadata populated on the canvas store. Independent of
+ * live-refresh — this runs even in edit mode, so the sql executor can discover
+ * `*_query_sql` tools as soon as the bridge is connected.
+ *
+ * Returns a cleanup function. Caller is expected to start this once at mount
+ * and call cleanup on unmount.
+ */
+export function bootstrapMcpBridge(opts: {
+  data: Record<string, unknown>;
+  MultiMcpBridgeCtor: new (opts: { getCanvas: () => unknown }) => {
+    start(): void;
+    stop(): void;
+  };
+}): () => void {
+  try {
+    autoConnectFrontmatterServers(opts.data);
+    const canvas: unknown = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
+      .__canvasVanilla ?? (globalThis as { canvasVanilla?: unknown }).canvasVanilla;
+    if (!canvas) return () => { /* no-op */ };
+    const bridge = new opts.MultiMcpBridgeCtor({ getCanvas: () => canvas });
+    bridge.start();
+    return () => { try { bridge.stop(); } catch { /* ignore */ } };
+  } catch {
+    return () => { /* no-op */ };
+  }
+}
+
 /**
  * Auto-connect any data servers declared in recipe frontmatter (`data.servers`)
  * to the shared canvas store. No-op / no-throw if the canvas store is absent.