@webmcp-auto-ui/ui 2.5.10 → 2.5.12

package/README.md

@@ -66,7 +66,7 @@ Requires Svelte 5 and Tailwind CSS.
 <StatCard spec={{ label: 'Users', value: '8 204', variant: 'success', delta: '+3.2%' }} />
 ```
 
-Each component accepts a `spec` prop (rich widgets) or `data` prop (simple blocks). See the showcase2 app at `:3010` for all components with live data.
+Each component accepts a `spec` prop (rich widgets) or `data` prop (simple blocks). See the showcase app at `:3010` for all components with live data.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.10",
+  "version": "2.5.12",
   "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/agent/SettingsPanel.svelte

@@ -236,7 +236,7 @@
     {/if}
   </section>
 
-  <!-- Cache (disabled for WASM/Gemma — prompt caching is Anthropic API only) -->
+  <!-- Cache (disabled for WASM/Gemma — prompt caching is provider-dependent) -->
   <label class="flex items-center gap-2.5 select-none" class:cursor-pointer={modelType !== 'wasm'} class:opacity-40={modelType === 'wasm'}>
     <input
       type="checkbox"
@@ -246,7 +246,7 @@
     />
     <span class="text-xs font-mono text-text1">Prompt caching</span>
     {#if modelType === 'wasm'}
-      <span class="text-[10px] font-mono text-text2/50 ml-auto">Anthropic API only</span>
+      <span class="text-[10px] font-mono text-text2/50 ml-auto">remote API only</span>
     {:else}
       <span class="text-[10px] font-mono text-text2 ml-auto">saves ~80% tokens</span>
     {/if}

package/src/widgets/rich/Carousel.svelte

@@ -14,12 +14,12 @@
   let current = $state(0);
   let timer: ReturnType<typeof setInterval> | null = null;
 
-  function goTo(i: number) {
+  function goTo(i: number, userInitiated = false) {
     current = Math.max(0, Math.min(i, slides.length - 1));
-    onslidechange?.(slides[current], current);
+    if (userInitiated) onslidechange?.(slides[current], current);
     resetAuto();
   }
-  function prev() { goTo(current > 0 ? current - 1 : slides.length - 1); }
+  function prev() { goTo(current > 0 ? current - 1 : slides.length - 1, true); }
   function next() { goTo(current < slides.length - 1 ? current + 1 : 0); }
 
   function resetAuto() {
@@ -72,7 +72,7 @@
 
       {#if slides.length > 1}
         <button class="absolute left-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 text-sm" onclick={prev}>&lsaquo;</button>
-        <button class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 text-sm" onclick={next}>&rsaquo;</button>
+        <button class="absolute right-2 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/40 text-white flex items-center justify-center hover:bg-black/60 text-sm" onclick={() => goTo(current < slides.length - 1 ? current + 1 : 0, true)}>&rsaquo;</button>
       {/if}
     </div>
 
@@ -80,7 +80,7 @@
       <div class="flex justify-center gap-1.5 mt-2">
         {#each slides as _, i}
           <button class="w-2 h-2 rounded-full transition-colors {i === current ? 'bg-accent' : 'bg-border2'}"
-            onclick={() => goTo(i)}></button>
+            onclick={() => goTo(i, true)}></button>
         {/each}
       </div>
     {/if}