@webmcp-auto-ui/ui 2.5.36 → 2.5.38

package/src/widgets/notebook/left-pane.ts

@@ -6,7 +6,7 @@
 // Collapsed by default.
 // ---------------------------------------------------------------------------
 
-import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
 import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modal-api.js';
 import type { NotebookCell, NotebookState, DataServerDescriptor } from './shared.js';
 
@@ -67,13 +67,22 @@ export function mountLeftPane(
       serversEl.innerHTML = '<div class="nb-lp-empty">No servers connected.</div>';
       return;
     }
+    let lastGroup: 'data' | 'webmcp' | null = null;
     for (const srv of servers) {
+      const group: 'data' | 'webmcp' = srv.kind === 'webmcp' ? 'webmcp' : 'data';
+      if (group !== lastGroup) {
+        const header = document.createElement('div');
+        header.className = 'nb-lp-group-header';
+        header.textContent = group === 'webmcp' ? 'Widgets' : 'Data';
+        serversEl.appendChild(header);
+        lastGroup = group;
+      }
       const section = document.createElement('section');
       section.className = 'nb-lp-srv';
       section.innerHTML = `
         <header class="nb-lp-srv-head">
           <span class="nb-lp-srv-dot"></span>
-          <span class="nb-lp-srv-name">${escapeHtml(srv.name)}</span>
+          <span class="nb-lp-srv-name">${escapeHtml(srv.serverName ?? srv.label ?? srv.name)}</span>
         </header>
         <div class="nb-lp-srv-groups">
           ${srv.recipes?.length ? `
@@ -132,9 +141,13 @@ export function mountLeftPane(
     if (!imported.body && recipeBodyCache.has(key)) {
       imported.body = recipeBodyCache.get(key);
     }
+    // Bundled WebMCP servers expose recipe bodies inline — no MCP roundtrip.
+    if (!imported.body && srv.kind === 'webmcp') {
+      imported.body = `> ⚠ Recipe \`${r.name}\` (server \`${srv.name}\`) has no inline body.`;
+    }
     if (!imported.body) {
       try {
-        const res: any = await callToolViaPostMessage(`${srv.name}_get_recipe`, { name: r.name, id: r.name });
+        const res: any = await canvas.callTool(srv.name, 'get_recipe', { name: r.name, id: r.name });
         const text = res?.content?.find?.((c: any) => c.type === 'text')?.text;
         if (text) {
           let body = text;
@@ -245,6 +258,13 @@ function injectLeftPaneStyles() {
     .nb-lp-title { flex: 1; font-weight: 600; font-size: 12px; }
     .nb-lp-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text2, #666); }
     .nb-lp-servers { overflow-y: auto; padding: 8px 10px 12px; flex: 1; }
+    .nb-lp-group-header {
+      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
+      color: var(--color-text2, #888); padding: 6px 2px 4px;
+      border-bottom: 1px dashed var(--color-border, #e4e4e7);
+      margin-bottom: 6px;
+    }
+    .nb-lp-group-header:not(:first-child) { margin-top: 14px; }
     .nb-lp-srv { margin-bottom: 10px; }
     .nb-lp-srv-head {
       display: flex; align-items: center; gap: 6px;

package/src/widgets/notebook/notebook.svelte

@@ -23,7 +23,6 @@
     title?: string;
     mode?: 'edit' | 'view';
     autoRun?: boolean;
-    hideLiveToggle?: boolean;
     cells?: NotebookCell[];
     /** MCP servers for SQL execution (array of {name, url}) */
     servers?: Array<{ name: string; url?: string }>;