@webmcp-auto-ui/ui 2.5.31 → 2.5.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.31",
+  "version": "2.5.33",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -16,11 +16,23 @@
       "svelte": "./src/stores/canvas.svelte.ts",
       "import": "./src/stores/canvas.svelte.ts"
     },
+    "./agent": {
+      "svelte": "./src/agent/useAgentLoop.svelte.ts",
+      "import": "./src/agent/useAgentLoop.svelte.ts"
+    },
     "./widgets/notebook/*": {
       "svelte": "./src/widgets/notebook/*",
       "import": "./src/widgets/notebook/*"
     },
-    "./widgets/notebook/recipes/*": "./src/widgets/notebook/recipes/*"
+    "./widgets/notebook/recipes/*": "./src/widgets/notebook/recipes/*",
+    "./widgets/simple/*": {
+      "svelte": "./src/widgets/simple/*",
+      "import": "./src/widgets/simple/*"
+    },
+    "./widgets/rich/*": {
+      "svelte": "./src/widgets/rich/*",
+      "import": "./src/widgets/rich/*"
+    }
   },
   "scripts": {
     "build": "svelte-package -i src",
@@ -58,6 +70,7 @@
   ],
   "dependencies": {
     "@types/d3": "^7.4.3",
+    "@webmcp-auto-ui/agent": "*",
     "@webmcp-auto-ui/core": "*",
     "@webmcp-auto-ui/sdk": "*",
     "bits-ui": "^2.17.2",

package/src/agent/DiagnosticModal.svelte

@@ -7,13 +7,32 @@
     codeFix?: string;
   }
 
+  interface DebugLayer {
+    protocol: string;
+    serverName?: string;
+    toolCount?: number;
+  }
+
+  interface DebugInfo {
+    estimatedTokens: number;
+    layerCount: number;
+    toolCount: number;
+    mcpToolCount: number;
+    recipeCount: number;
+    layers: DebugLayer[];
+    prompt: string;
+  }
+
   interface Props {
     open: boolean;
     diagnostics: DiagnosticItem[];
     onclose: () => void;
+    debugInfo?: DebugInfo;
   }
 
-  let { open = $bindable(false), diagnostics, onclose }: Props = $props();
+  let { open = $bindable(false), diagnostics, onclose, debugInfo }: Props = $props();
+
+  let activeTab = $state<'diagnostics' | 'debug'>('diagnostics');
 
   let expandedQuickFix = $state<Set<number>>(new Set());
   let expandedCodeFix = $state<Set<number>>(new Set());
@@ -56,59 +75,116 @@
                 onclick={close}>x</button>
       </div>
 
-      <!-- Body -->
-      <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
-        {#if diagnostics.length === 0}
-          <div class="font-mono text-xs text-text2 text-center py-8">Aucun probleme detecte.</div>
-        {:else}
-          {#each diagnostics as diag, i}
-            <div class="rounded-lg border p-3 flex flex-col gap-1.5
-                       {diag.severity === 'error' ? 'border-accent2/30 bg-accent2/5' : 'border-amber-500/30 bg-amber-500/5'}">
-              <!-- Severity icon + title -->
-              <div class="flex items-start gap-2">
-                {#if diag.severity === 'error'}
-                  <span class="flex-shrink-0 w-4 h-4 rounded-full bg-accent2/20 text-accent2 flex items-center justify-center text-[10px] mt-0.5">!</span>
-                {:else}
-                  <span class="flex-shrink-0 w-4 h-4 flex items-center justify-center text-amber-500 text-xs mt-0.5">&#x26A0;</span>
-                {/if}
-                <span class="font-mono text-xs font-bold text-text1">{diag.title}</span>
-              </div>
-              <!-- Detail -->
-              <div class="font-mono text-[11px] text-text2 leading-relaxed pl-6">{diag.detail}</div>
-
-              <!-- Quick fix -->
-              {#if diag.quickFix}
-                <div class="pl-6">
-                  <button class="font-mono text-[10px] text-accent hover:underline cursor-pointer"
-                          onclick={() => toggleQuickFix(i)}>
-                    {expandedQuickFix.has(i) ? '- Quick fix (prompt)' : '+ Quick fix (prompt)'}
-                  </button>
-                  {#if expandedQuickFix.has(i)}
-                    <div class="mt-1 relative">
-                      <pre class="bg-surface2 border border-border2 rounded p-2 text-[10px] font-mono text-text2 whitespace-pre-wrap break-words">{diag.quickFix}</pre>
-                      <button class="absolute top-1 right-1 px-1.5 py-0.5 rounded text-[9px] font-mono bg-surface border border-border2 text-text2 hover:text-text1 transition-colors"
-                              onclick={() => copyText(diag.quickFix!)}>Copier</button>
-                    </div>
+      <!-- Tabs (only shown when debugInfo is provided) -->
+      {#if debugInfo}
+        <div class="flex border-b border-border flex-shrink-0">
+          <button
+            class="px-5 py-2 font-mono text-xs transition-colors border-b-2
+                   {activeTab === 'diagnostics' ? 'border-accent text-text1' : 'border-transparent text-text2 hover:text-text1'}"
+            onclick={() => activeTab = 'diagnostics'}>
+            Diagnostics
+          </button>
+          <button
+            class="px-5 py-2 font-mono text-xs transition-colors border-b-2
+                   {activeTab === 'debug' ? 'border-accent text-text1' : 'border-transparent text-text2 hover:text-text1'}"
+            onclick={() => activeTab = 'debug'}>
+            Debug
+          </button>
+        </div>
+      {/if}
+
+      <!-- Body: Diagnostics tab -->
+      {#if !debugInfo || activeTab === 'diagnostics'}
+        <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
+          {#if diagnostics.length === 0}
+            <div class="font-mono text-xs text-text2 text-center py-8">Aucun probleme detecte.</div>
+          {:else}
+            {#each diagnostics as diag, i}
+              <div class="rounded-lg border p-3 flex flex-col gap-1.5
+                         {diag.severity === 'error' ? 'border-accent2/30 bg-accent2/5' : 'border-amber-500/30 bg-amber-500/5'}">
+                <!-- Severity icon + title -->
+                <div class="flex items-start gap-2">
+                  {#if diag.severity === 'error'}
+                    <span class="flex-shrink-0 w-4 h-4 rounded-full bg-accent2/20 text-accent2 flex items-center justify-center text-[10px] mt-0.5">!</span>
+                  {:else}
+                    <span class="flex-shrink-0 w-4 h-4 flex items-center justify-center text-amber-500 text-xs mt-0.5">&#x26A0;</span>
                   {/if}
+                  <span class="font-mono text-xs font-bold text-text1">{diag.title}</span>
                 </div>
-              {/if}
-
-              <!-- Code fix -->
-              {#if diag.codeFix}
-                <div class="pl-6">
-                  <button class="font-mono text-[10px] text-teal hover:underline cursor-pointer"
-                          onclick={() => toggleCodeFix(i)}>
-                    {expandedCodeFix.has(i) ? '- Fix (code)' : '+ Fix (code)'}
-                  </button>
-                  {#if expandedCodeFix.has(i)}
-                    <pre class="mt-1 bg-surface2 border border-border2 rounded p-2 text-[10px] font-mono text-text2 whitespace-pre-wrap break-words">{diag.codeFix}</pre>
-                  {/if}
+                <!-- Detail -->
+                <div class="font-mono text-[11px] text-text2 leading-relaxed pl-6">{diag.detail}</div>
+
+                <!-- Quick fix -->
+                {#if diag.quickFix}
+                  <div class="pl-6">
+                    <button class="font-mono text-[10px] text-accent hover:underline cursor-pointer"
+                            onclick={() => toggleQuickFix(i)}>
+                      {expandedQuickFix.has(i) ? '- Quick fix (prompt)' : '+ Quick fix (prompt)'}
+                    </button>
+                    {#if expandedQuickFix.has(i)}
+                      <div class="mt-1 relative">
+                        <pre class="bg-surface2 border border-border2 rounded p-2 text-[10px] font-mono text-text2 whitespace-pre-wrap break-words">{diag.quickFix}</pre>
+                        <button class="absolute top-1 right-1 px-1.5 py-0.5 rounded text-[9px] font-mono bg-surface border border-border2 text-text2 hover:text-text1 transition-colors"
+                                onclick={() => copyText(diag.quickFix!)}>Copier</button>
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+
+                <!-- Code fix -->
+                {#if diag.codeFix}
+                  <div class="pl-6">
+                    <button class="font-mono text-[10px] text-teal hover:underline cursor-pointer"
+                            onclick={() => toggleCodeFix(i)}>
+                      {expandedCodeFix.has(i) ? '- Fix (code)' : '+ Fix (code)'}
+                    </button>
+                    {#if expandedCodeFix.has(i)}
+                      <pre class="mt-1 bg-surface2 border border-border2 rounded p-2 text-[10px] font-mono text-text2 whitespace-pre-wrap break-words">{diag.codeFix}</pre>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Body: Debug tab -->
+      {#if debugInfo && activeTab === 'debug'}
+        <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
+          <!-- Stats grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-[10px]">
+            <span class="text-text2">Prompt tokens (est.)</span>
+            <span class="text-text1 font-mono">{debugInfo.estimatedTokens.toLocaleString()}</span>
+            <span class="text-text2">Active layers</span>
+            <span class="text-text1 font-mono">{debugInfo.layerCount}</span>
+            <span class="text-text2">Tools sent</span>
+            <span class="text-text1 font-mono">{debugInfo.toolCount} <span class="text-text2">(MCP: {debugInfo.mcpToolCount}, UI: {debugInfo.toolCount - debugInfo.mcpToolCount})</span></span>
+            <span class="text-text2">Recipes</span>
+            <span class="text-text1 font-mono">{debugInfo.recipeCount}</span>
+          </div>
+
+          <!-- Layers -->
+          <div>
+            <div class="text-[9px] text-text2 uppercase tracking-wider mb-1">Layers</div>
+            <div class="flex flex-col gap-1">
+              {#each debugInfo.layers as layer, i}
+                <div class="text-[10px] font-mono text-text1 px-2 py-1 bg-surface2/50 rounded">
+                  [{i}] {layer.protocol}
+                  {#if layer.serverName}— {layer.serverName}{/if}
+                  {#if layer.toolCount !== undefined}({layer.toolCount} tools){/if}
                 </div>
-              {/if}
+              {/each}
             </div>
-          {/each}
-        {/if}
-      </div>
+          </div>
+
+          <!-- System prompt -->
+          <div>
+            <div class="text-[9px] text-text2 uppercase tracking-wider mb-1">System Prompt</div>
+            <pre class="text-[9px] text-text1 bg-surface2/50 rounded p-2 max-h-[300px] overflow-auto whitespace-pre-wrap break-all">{debugInfo.prompt}</pre>
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}

package/src/agent/EphemeralBubble.svelte

@@ -3,8 +3,16 @@
   import { renderMarkdown } from '../primitives/markdown-renderer.js';
 
   interface EphemeralMsg { id: string; role: 'user' | 'assistant'; html: string; }
-  interface Props { ephemeral: EphemeralMsg[]; }
-  let { ephemeral }: Props = $props();
+  interface Props { ephemeral: EphemeralMsg[]; ondismiss?: () => void; }
+  let { ephemeral, ondismiss }: Props = $props();
+
+  let wrapper: HTMLDivElement | undefined = $state();
+
+  function onWindowPointerDown(e: PointerEvent) {
+    if (!ondismiss || ephemeral.length === 0) return;
+    const target = e.target as Node | null;
+    if (wrapper && target && !wrapper.contains(target)) ondismiss();
+  }
 
   // Detect if content has any markdown markers worth parsing.
   // If not, we skip marked entirely and fall back to {@html} for the
@@ -36,7 +44,9 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 items-start w-full">
+<svelte:window onpointerdown={onWindowPointerDown} />
+
+<div bind:this={wrapper} class="flex flex-col gap-2 items-start w-full">
   {#each ephemeral as msg (msg.id)}
     <div
       in:fly={{ y: 16, duration: 280, opacity: 0 }}

package/src/agent/MCPserversList.svelte

@@ -0,0 +1,147 @@
+<svelte:options customElement={{ tag: 'auto-mcp-servers-list', shadow: 'none' }} />
+
+<script lang="ts">
+  interface Server {
+    id: string;
+    name: string;
+    description: string;
+    url: string;
+    tags?: string[];
+  }
+
+  interface Props {
+    servers: Server[];
+    connectedUrls?: string[];
+    loading?: string[];
+    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 {
+    servers,
+    connectedUrls = [],
+    loading = [],
+    onconnect,
+    onconnectall,
+    ondisconnect,
+    recipeCountByServer,
+    onrecipeclick,
+    toolCountByServer,
+    ontoolclick,
+  }: Props = $props();
+
+  const allConnected = $derived(
+    servers.length > 0 && servers.every(s => connectedUrls.includes(s.url))
+  );
+  const anyConnected = $derived(
+    servers.some(s => connectedUrls.includes(s.url))
+  );
+
+  function isConnected(url: string) {
+    return connectedUrls.includes(url);
+  }
+  function isLoading(url: string) {
+    return loading.includes(url);
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <span class="text-[9px] font-mono uppercase tracking-wider text-text2">
+    Available MCP servers
+  </span>
+
+  <div class="flex flex-col gap-1">
+    {#each servers as server (server.id)}
+      {@const connected = isConnected(server.url)}
+      {@const busy = isLoading(server.url)}
+      <div
+        class="group flex items-center gap-2 px-2 py-1.5 rounded border border-border2 bg-surface2 hover:border-accent/30 transition-colors"
+      >
+        <!-- status dot -->
+        <div
+          class="w-1.5 h-1.5 rounded-full flex-shrink-0 {busy
+            ? 'bg-amber animate-pulse'
+            : connected
+              ? 'bg-teal'
+              : 'bg-text2/30'}"
+        ></div>
+
+        <!-- info -->
+        <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 -->
+        <div class="flex-shrink-0">
+          {#if busy}
+            <div class="w-4 h-4 border border-accent/50 border-t-accent rounded-full animate-spin"></div>
+          {:else if connected}
+            <button
+              onclick={() => ondisconnect?.(server.url)}
+              class="text-xs font-mono px-1.5 h-6 rounded text-teal group-hover:text-accent2 transition-colors"
+              title="Disconnect"
+            >
+              <span class="group-hover:hidden">&#10003;</span>
+              <span class="hidden group-hover:inline text-accent2">&#215;</span>
+            </button>
+          {:else}
+            <button
+              onclick={() => onconnect?.(server.url)}
+              class="text-[10px] font-mono px-1.5 h-6 rounded border border-border2 bg-surface2 hover:border-accent/50 hover:text-accent text-text2 transition-colors"
+            >
+              connect
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  <!-- bottom actions -->
+  <div class="flex items-center gap-2 mt-1">
+    <button
+      onclick={onconnectall}
+      disabled={allConnected}
+      class="text-xs font-mono px-2 h-7 rounded border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+    >
+      Load all
+    </button>
+    {#if anyConnected}
+      <button
+        onclick={() => {
+          for (const s of servers) {
+            if (isConnected(s.url)) ondisconnect?.(s.url);
+          }
+        }}
+        class="text-xs font-mono px-2 h-7 rounded border border-border2 bg-surface2 hover:border-accent2/50 hover:text-accent2 text-text2 transition-colors"
+      >
+        Disconnect all
+      </button>
+    {/if}
+  </div>
+</div>

package/src/agent/McpConnector.svelte

@@ -34,10 +34,15 @@
   }: Props = $props();
 
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let urlChangeTimer: ReturnType<typeof setTimeout> | null = null;
 
   function handleUrlInput(e: Event) {
     const v = (e.target as HTMLInputElement).value;
-    onurlchange?.(v);
+    // Debounce onurlchange so we don't pollute the canvas store with every keystroke.
+    if (urlChangeTimer) clearTimeout(urlChangeTimer);
+    urlChangeTimer = setTimeout(() => {
+      onurlchange?.(v);
+    }, 400);
     if (debounceTimer) clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
       if (v.startsWith('http') && !connected && !connecting) {
@@ -48,7 +53,11 @@
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
+      if (urlChangeTimer) { clearTimeout(urlChangeTimer); urlChangeTimer = null; }
       if (debounceTimer) clearTimeout(debounceTimer);
+      // Flush current URL immediately before connecting.
+      const v = (e.target as HTMLInputElement).value;
+      onurlchange?.(v);
       onconnect?.();
     }
   }