@webmcp-auto-ui/ui 2.5.11 → 2.5.14

package/package.json

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

package/src/agent/McpStatus.svelte

@@ -11,9 +11,10 @@
     name: string;
     servers?: ConnectedServerInfo[];
     onserverclick?: (url: string) => void;
+    onclick?: () => void;
     class?: string;
   }
-  let { connecting, connected, name, servers = [], onserverclick, class: cls = '' }: Props = $props();
+  let { connecting, connected, name, servers = [], onserverclick, onclick, class: cls = '' }: Props = $props();
 
   let dropdownOpen = $state(false);
 
@@ -45,7 +46,7 @@
       class="text-[10px] text-teal font-mono cursor-pointer hover:underline select-none"
       onclick={toggleDropdown}
     >
-      multi-serveurs ({servers.length})
+      multi-server ({servers.length})
     </span>
 
     {#if dropdownOpen}
@@ -61,14 +62,26 @@
           >
             <span class="w-1.5 h-1.5 rounded-full bg-teal flex-shrink-0"></span>
             <span class="truncate flex-1">{server.name}</span>
-            <span class="text-text2 text-[10px] flex-shrink-0">{server.toolCount} outils</span>
+            <span class="text-text2 text-[10px] flex-shrink-0">{server.toolCount} tools</span>
           </button>
         {/each}
+        {#if onclick}
+          <button
+            class="w-full flex items-center gap-2 px-3 py-1.5 text-left font-mono text-xs text-accent hover:bg-surface2 transition-colors border-t border-border"
+            onclick={(e) => { e.stopPropagation(); dropdownOpen = false; onclick?.(); }}
+          >
+            Browse recipes
+          </button>
+        {/if}
       </div>
     {/if}
   {:else}
-    <span class="text-[10px] text-text2 font-mono">
-      {connecting ? 'connexion\u2026' : connected ? name : 'non connect\u00e9'}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <span
+      class="text-[10px] text-text2 font-mono {connected && onclick ? 'cursor-pointer hover:underline' : ''}"
+      onclick={() => { if (connected) onclick?.(); }}
+    >
+      {connecting ? 'connecting\u2026' : connected ? name : 'not connected'}
     </span>
   {/if}
 </div>

package/src/agent/RemoteMCPserversDemo.svelte

@@ -14,6 +14,10 @@
     onconnect?: (url: string) => void;
     onconnectall?: () => void;
     ondisconnect?: (url: string) => void;
+    recipeCountByServer?: Record<string, number>;
+    onrecipeclick?: (url: string) => void;
+    toolCountByServer?: Record<string, number>;
+    ontoolclick?: (url: string) => void;
   }
 
   let {
@@ -23,6 +27,10 @@
     onconnect,
     onconnectall,
     ondisconnect,
+    recipeCountByServer,
+    onrecipeclick,
+    toolCountByServer,
+    ontoolclick,
   }: Props = $props();
 
   const allConnected = $derived(
@@ -65,6 +73,25 @@
         <div class="flex-1 min-w-0 flex flex-col">
           <span class="font-mono text-xs font-medium text-text1">{server.name}</span>
           <span class="text-[10px] text-text2 truncate">{server.description}</span>
+          {#if connected && (recipeCountByServer?.[server.url] || toolCountByServer?.[server.url])}
+            <span class="flex items-center gap-1.5 mt-0.5">
+              {#if recipeCountByServer?.[server.url]}
+                <button class="text-[10px] font-mono text-accent hover:underline"
+                        onclick={(e) => { e.stopPropagation(); onrecipeclick?.(server.url); }}>
+                  {recipeCountByServer[server.url]} recipes
+                </button>
+              {/if}
+              {#if recipeCountByServer?.[server.url] && toolCountByServer?.[server.url]}
+                <span class="text-[10px] text-text2">·</span>
+              {/if}
+              {#if toolCountByServer?.[server.url]}
+                <button class="text-[10px] font-mono text-accent hover:underline"
+                        onclick={(e) => { e.stopPropagation(); ontoolclick?.(server.url); }}>
+                  {toolCountByServer[server.url]} tools
+                </button>
+              {/if}
+            </span>
+          {/if}
         </div>
 
         <!-- action -->

package/src/widgets/WidgetRenderer.svelte

@@ -137,6 +137,10 @@
     customRenderer ? undefined : NATIVE_MAP[type],
   );
 
+  // Deep-clone data to strip Svelte 5 $state proxies — third-party libs
+  // (Chart.js, Cytoscape, etc.) use Object.defineProperty which conflicts.
+  const plainData: Record<string, unknown> = $derived(JSON.parse(JSON.stringify(data)));
+
   // ── Vanilla renderer container + lifecycle ────────────
   let vanillaContainer: HTMLElement | undefined = $state(undefined);
 
@@ -144,9 +148,9 @@
     if (!isVanillaRenderer || !vanillaContainer) return;
     // Clear previous content
     vanillaContainer.innerHTML = '';
-    // Call the vanilla renderer, capture optional cleanup
+    // Call the vanilla renderer with proxy-free data, capture optional cleanup
     const cleanup = (customRenderer as (container: HTMLElement, data: Record<string, unknown>) => void | (() => void))(
-      vanillaContainer, data,
+      vanillaContainer, plainData,
     );
     // Return teardown for $effect
     return () => {
@@ -217,9 +221,9 @@
 {#if isVanillaRenderer}
   <div bind:this={vanillaContainer} class="vanilla-container w-full h-full overflow-auto p-2"></div>
 {:else if customRenderer}
-  <svelte:component this={customRenderer as Component<any>} {data} {id} />
+  <svelte:component this={customRenderer as Component<any>} data={plainData} {id} />
 {:else if nativeEntry}
-  <svelte:component this={nativeEntry.component} {...nativeEntry.props(data, emit)} />
+  <svelte:component this={nativeEntry.component} {...nativeEntry.props(plainData, emit)} />
 {:else}
   <div class="p-3 font-mono text-xs text-text2">[{type}]</div>
 {/if}