@webmcp-auto-ui/ui 2.5.25 → 2.5.27

package/README.md

@@ -25,9 +25,9 @@ Higher-level components with more complex data shapes and interactivity.
 Layout containers for multi-pane interfaces. `TilingLayout` uses a Fibonacci spiral. `FlexLayout` provides an auto-grid layout with a size slider for adjusting block dimensions. `FloatingLayout` supports collapse/expand (double-click) and a fit-to-content button.
 
 ### Agent UI widgets
-`GemmaLoader` · `TokenBubble` · `EphemeralBubble` · `RemoteMCPserversDemo` · `SettingsPanel`
+`ModelLoader` · `TokenBubble` · `EphemeralBubble` · `RemoteMCPserversDemo` · `SettingsPanel`
 
-`GemmaLoader` — floating overlay with progress stream, auto-collapses to a pill once model is loaded. `TokenBubble` — real-time metrics display (req/min, input tokens/min, output tokens/min, cached tokens). `EphemeralBubble` — transient notification bubble (moved from app to package). `RemoteMCPserversDemo` — MCP server discovery component listing available demo servers. `SettingsPanel` — sliders with dynamic ranges for temperature, topK, and maxTokens controls.
+`ModelLoader` — floating overlay with progress stream, auto-collapses to a pill once model is loaded. `TokenBubble` — real-time metrics display (req/min, input tokens/min, output tokens/min, cached tokens). `EphemeralBubble` — transient notification bubble (moved from app to package). `RemoteMCPserversDemo` — MCP server discovery component listing available demo servers. `SettingsPanel` — sliders with dynamic ranges for temperature, topK, and maxTokens controls.
 
 ### WidgetRenderer
 

package/package.json

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

package/src/agent/AgentConsole.svelte

@@ -27,6 +27,7 @@
     prompt: '#6366f1',
     schema: '#06b6d4',
     warning: '#eab308',
+    recipe: '#ec4899',
   };
 
   function fmtTime(ts: number): string {
@@ -47,12 +48,6 @@
     setTimeout(() => { copyLabel = 'copy'; }, 2000);
   }
 
-  /** Extract provenance tag from tool log detail */
-  function parseProvenance(detail: string): { tag: 'recette' | 'impro' | null; rest: string } {
-    if (detail.startsWith('[recette] ')) return { tag: 'recette', rest: detail.slice(10) };
-    if (detail.startsWith('[impro] ')) return { tag: 'impro', rest: detail.slice(8) };
-    return { tag: null, rest: detail };
-  }
 </script>
 
 <div class="agent-console {cls}">
@@ -81,12 +76,12 @@
              tabindex={log.detail.length > 80 ? 0 : undefined}>
           <span class="ac-ts">{fmtTime(log.ts)}</span>
           <span class="ac-type" style="color:{typeColor[log.type] ?? 'var(--color-text2, #888)'}">{log.type}</span>
-          {#if log.type === 'tool'}
-            {@const prov = parseProvenance(log.detail)}
-            {#if prov.tag}
-              <span class="ac-tag" class:ac-tag-recette={prov.tag === 'recette'} class:ac-tag-impro={prov.tag === 'impro'}>{prov.tag}</span>
-            {/if}
-            <span class="ac-detail">{prov.rest}</span>
+          {#if log.type === 'recipe'}
+            {@const sepIdx = log.detail.indexOf(' · ')}
+            {@const rid = sepIdx > 0 ? log.detail.slice(0, sepIdx) : log.detail}
+            {@const rest = sepIdx > 0 ? log.detail.slice(sepIdx + 3) : ''}
+            <span class="ac-tag ac-tag-recipe">📄 {rid}</span>
+            <span class="ac-detail">{rest}</span>
           {:else}
             <span class="ac-detail">
               {log.detail}
@@ -235,13 +230,9 @@
     border-radius: 2px;
     line-height: 1.6;
   }
-  .ac-tag-recette {
-    color: #4ade80;
-    background: rgba(74, 222, 128, 0.1);
-  }
-  .ac-tag-impro {
-    color: #fb923c;
-    background: rgba(251, 146, 60, 0.1);
+  .ac-tag-recipe {
+    color: #ec4899;
+    background: rgba(236, 72, 153, 0.1);
   }
 
   .ac-clickable {

package/src/agent/EphemeralBubble.svelte

@@ -1,9 +1,39 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
+  import { renderMarkdown } from '../primitives/markdown-renderer.js';
 
   interface EphemeralMsg { id: string; role: 'user' | 'assistant'; html: string; }
   interface Props { ephemeral: EphemeralMsg[]; }
   let { ephemeral }: Props = $props();
+
+  // Detect if content has any markdown markers worth parsing.
+  // If not, we skip marked entirely and fall back to {@html} for the
+  // pre-existing HTML snippets (e.g. "<strong>tool_name</strong>").
+  const MD_RE = /(^|\n)\s*(#{1,6}\s|[-*+]\s|\d+\.\s|>\s)|\*\*|__|`|```|~~~|!\[|\[[^\]]+\]\(/;
+  function looksLikeMarkdown(src: string): boolean {
+    return MD_RE.test(src);
+  }
+
+  // Gracefully close dangling code fences during streaming so that
+  // a half-received ``` block still renders as code instead of
+  // swallowing the rest of the message.
+  function closeDanglingFences(src: string): string {
+    const fences = (src.match(/```/g) ?? []).length;
+    if (fences % 2 === 1) return src + '\n```';
+    const tildes = (src.match(/~~~/g) ?? []).length;
+    if (tildes % 2 === 1) return src + '\n~~~';
+    return src;
+  }
+
+  function renderContent(src: string): string {
+    if (!src) return '';
+    if (!looksLikeMarkdown(src)) return src;
+    try {
+      return renderMarkdown(closeDanglingFences(src));
+    } catch {
+      return src;
+    }
+  }
 </script>
 
 <div class="flex flex-col gap-2 items-start w-full">
@@ -13,7 +43,7 @@
       out:fly={{ y: -32, duration: 450, opacity: 0 }}
       class="ephemeral-msg {msg.role}"
     >
-      {@html msg.html}
+      {@html renderContent(msg.html)}
     </div>
   {/each}
 </div>
@@ -41,4 +71,41 @@
     color: var(--color-text1);
     align-self: flex-start;
   }
+  /* Markdown tweaks scoped to the ephemeral bubble — keep margins tight. */
+  .ephemeral-msg :global(p) { margin: 0.25rem 0; }
+  .ephemeral-msg :global(p:first-child) { margin-top: 0; }
+  .ephemeral-msg :global(p:last-child) { margin-bottom: 0; }
+  .ephemeral-msg :global(h1),
+  .ephemeral-msg :global(h2),
+  .ephemeral-msg :global(h3),
+  .ephemeral-msg :global(h4) {
+    font-weight: 600;
+    margin: 0.35rem 0 0.25rem;
+    font-size: 0.78rem;
+  }
+  .ephemeral-msg :global(ul),
+  .ephemeral-msg :global(ol) {
+    margin: 0.3rem 0;
+    padding-left: 1.1rem;
+  }
+  .ephemeral-msg :global(li) { margin: 0.1rem 0; }
+  .ephemeral-msg :global(code) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.66rem;
+    background: rgba(0, 0, 0, 0.28);
+    padding: 0.05rem 0.25rem;
+    border-radius: 0.2rem;
+  }
+  .ephemeral-msg :global(pre) {
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: 0.3rem;
+    padding: 0.5rem;
+    margin: 0.35rem 0;
+    overflow-x: auto;
+    font-size: 0.66rem;
+  }
+  .ephemeral-msg :global(pre code) { background: transparent; padding: 0; }
+  .ephemeral-msg :global(strong) { font-weight: 600; }
+  .ephemeral-msg :global(em) { font-style: italic; }
+  .ephemeral-msg :global(a) { color: rgb(96, 165, 250); text-decoration: underline; }
 </style>

package/src/agent/LLMSelector.svelte

@@ -1,20 +1,30 @@
 <script lang="ts">
+  import { listTransformersModels } from '@webmcp-auto-ui/agent';
+
   export interface ModelOption {
     value: string;
     label: string;
-    group: 'remote' | 'wasm' | 'local';
+    group: 'remote' | 'wasm' | 'transformers' | 'local';
   }
 
+  const transformersOptions: ModelOption[] = listTransformersModels().map(({ id, entry }) => ({
+    value: id,
+    label: entry.label,
+    group: 'transformers' as const,
+  }));
+
   const DEFAULT_MODELS: ModelOption[] = [
-    { value: 'haiku',      label: 'claude-haiku-4-5',  group: 'remote' },
-    { value: 'gemma-e2b',  label: 'Gemma E2B (WASM)',  group: 'wasm'   },
-    { value: 'gemma-e4b',  label: 'Gemma E4B (WASM)',  group: 'wasm'   },
+    { value: 'haiku',     label: 'claude-haiku-4-5',      group: 'remote' },
+    { value: 'gemma-e2b', label: 'Gemma E2B (MediaPipe)', group: 'wasm'   },
+    { value: 'gemma-e4b', label: 'Gemma E4B (MediaPipe)', group: 'wasm'   },
+    ...transformersOptions,
   ];
 
   const GROUP_LABELS: Record<string, string> = {
-    remote: 'Remote',
-    wasm:   'In-Browser (WASM)',
-    local:  'Local',
+    remote:       'Remote',
+    wasm:         'In-Browser (MediaPipe)',
+    transformers: 'In-Browser (Transformers.js)',
+    local:        'Local',
   };
 
   interface Props {
@@ -26,7 +36,7 @@
   let { value, onchange, models = DEFAULT_MODELS, class: cls = '' }: Props = $props();
 
   const groups = $derived(
-    ['remote', 'wasm', 'local'].filter(g => models.some(m => m.group === g))
+    ['remote', 'wasm', 'transformers', 'local'].filter(g => models.some(m => m.group === g))
   );
 </script>
 

package/src/agent/McpConnector.svelte

@@ -13,7 +13,8 @@
     onconnect?: () => void;
     ondisconnect?: () => void;
     class?: string;
-    compact?: boolean;    // hide token field
+    compact?: boolean;      // hide token field entirely
+    showToken?: boolean;    // toggle controlled from outside
   }
 
   let {
@@ -29,9 +30,9 @@
     ondisconnect,
     class: cls = '',
     compact = false,
+    showToken = $bindable(false),
   }: Props = $props();
 
-  let showToken = $state(false);
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   function handleUrlInput(e: Event) {
@@ -82,25 +83,14 @@
     <McpStatus {connecting} {connected} name={serverName || 'not connected'} />
   </div>
 
-  {#if !compact}
-    <div class="flex items-center gap-2">
-      <button
-        onclick={() => showToken = !showToken}
-        class="text-text2 hover:text-text1 transition-colors flex-shrink-0"
-        title="Bearer token"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
-      </button>
-      {#if showToken}
-        <input
-          type="password"
-          value={token}
-          oninput={(e) => { token = (e.target as HTMLInputElement).value; onTokenChange?.(token); }}
-          placeholder="Bearer token (optional)"
-          class="flex-1 font-mono text-xs bg-surface2 border border-border2 rounded px-2 h-7 text-text1 outline-none placeholder:text-text2/40 focus:border-accent/50 transition-colors"
-        />
-      {/if}
-    </div>
+  {#if !compact && showToken}
+    <input
+      type="password"
+      value={token}
+      oninput={(e) => { token = (e.target as HTMLInputElement).value; onTokenChange?.(token); }}
+      placeholder="Bearer token (optional)"
+      class="font-mono text-xs bg-surface2 border border-border2 rounded px-2 h-7 text-text1 outline-none placeholder:text-text2/40 focus:border-accent/50 transition-colors"
+    />
   {/if}
 
   {#if error}

package/src/agent/{GemmaLoader.svelte → ModelLoader.svelte}

@@ -19,7 +19,7 @@
     elapsed,
     loadedMB = 0,
     totalMB = 0,
-    modelName = 'Gemma E2B',
+    modelName = 'modèle',
     error = '',
     fromCache = false,
     onunload,

package/src/agent/SettingsPanel.svelte

@@ -6,13 +6,12 @@
     effectivePrompt?: string;
     maxTokens?: number;
     maxContextTokens?: number;
-    maxTools?: number;
-    maxMessages?: number;
     maxResultLength?: number;
     compressHistory?: boolean;
     compressPreview?: number;
     contextRAGEnabled?: boolean;
     ragResidueSize?: number;
+    visualTrace?: boolean;
     cacheEnabled?: boolean;
     temperature?: number;
     topK?: number;
@@ -26,13 +25,12 @@
     effectivePrompt = '',
     maxTokens = $bindable(4096),
     maxContextTokens = $bindable(150_000),
-    maxTools = $bindable(8),
-    maxMessages = $bindable(8),
     maxResultLength = $bindable(10000),
     compressHistory = $bindable(false),
     compressPreview = $bindable(500),
     contextRAGEnabled = $bindable(false),
     ragResidueSize = $bindable(200),
+    visualTrace = $bindable(false),
     cacheEnabled = $bindable(true),
     temperature = $bindable(0.7),
     topK = $bindable(10),
@@ -106,15 +104,15 @@
       <label class="text-[9px] font-mono text-text2 uppercase tracking-wider">System Prompt</label>
       <div class="flex items-center gap-2">
         {#if promptSaved && customMode}
-          <span class="text-[9px] font-mono text-teal transition-opacity">✓ applique</span>
+          <span class="text-[9px] font-mono text-teal transition-opacity">✓ applied</span>
         {/if}
         {#if hasEffective}
           {#if customMode}
             <button class="text-[9px] font-mono text-accent2 hover:text-accent transition-colors"
-                    onclick={resetToAuto}>reinitialiser</button>
+                    onclick={resetToAuto}>reset</button>
           {:else}
             <button class="text-[9px] font-mono text-accent hover:text-text1 transition-colors"
-                    onclick={enterCustomMode}>personnaliser</button>
+                    onclick={enterCustomMode}>customize</button>
           {/if}
         {/if}
       </div>
@@ -125,15 +123,15 @@
         value={displayedPrompt}
         rows={8}
         class="w-full bg-surface2/50 border border-border2/50 rounded-lg px-3 py-2 text-xs font-mono text-text2 outline-none resize-none cursor-default"
-        placeholder="Prompt auto-genere"
+        placeholder="Auto-generated prompt"
       ></textarea>
-      <div class="text-[8px] font-mono text-text2/50">prompt auto-genere — cliquer personnaliser pour editer</div>
+      <div class="text-[8px] font-mono text-text2/50">auto-generated prompt — click customize to edit</div>
     {:else}
       <textarea
         bind:value={systemPrompt}
         rows={5}
         class="w-full bg-surface2 border border-border2 rounded-lg px-3 py-2 text-xs font-mono text-text1 outline-none resize-none focus:border-accent/50 transition-colors placeholder:text-text2/40"
-        placeholder="Instructions systeme pour l'agent…"
+        placeholder="System instructions for the agent…"
       ></textarea>
     {/if}
   </div>
@@ -186,36 +184,14 @@
              class="w-full accent-accent" />
     </div>
 
-    <!-- Max tools (WASM only) -->
-    {#if modelType === 'wasm'}
-    <div>
-      <div class="flex justify-between items-baseline mb-1">
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Max tools (WASM)</span>
-        <span class="font-mono text-xs text-text1">{maxTools}</span>
-      </div>
-      <input type="range" bind:value={maxTools}
-             min={4} max={20} step={1}
-             class="w-full accent-accent" />
-    </div>
-    <div>
-      <div class="flex justify-between items-baseline mb-1">
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Max messages (WASM)</span>
-        <span class="font-mono text-xs text-text1">{maxMessages}</span>
-      </div>
-      <input type="range" bind:value={maxMessages}
-             min={2} max={64} step={1}
-             class="w-full accent-accent" />
-    </div>
-    {/if}
-
     <!-- Max result length -->
     <div>
       <div class="flex justify-between items-baseline mb-1">
         <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Max result (chars)</span>
-        <span class="font-mono text-xs text-text1">{formatNumber(maxResultLength)}</span>
+        <span class="font-mono text-xs text-text1">{maxResultLength >= 50000 ? '∞' : formatNumber(maxResultLength)}</span>
       </div>
       <input type="range" bind:value={maxResultLength}
-             min={500} max={20000} step={500}
+             min={500} max={50000} step={500}
              class="w-full accent-accent" />
     </div>
 
@@ -223,7 +199,7 @@
     <div>
       <label class="flex items-center gap-2 cursor-pointer select-none mb-1">
         <input type="checkbox" bind:checked={compressHistory} class="accent-accent w-3.5 h-3.5" />
-        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Tronquer l'historique</span>
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Truncate history</span>
       </label>
       {#if compressHistory}
       <div class="flex justify-between items-baseline mb-1">
@@ -248,7 +224,7 @@
       </div>
       <div class="pl-5">
         <div class="flex justify-between items-baseline mb-1">
-          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Résidu inline (chars)</span>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Inline residue (chars)</span>
           <span class="font-mono text-xs text-text1">{ragResidueSize}</span>
         </div>
         <input type="range" bind:value={ragResidueSize}
@@ -256,6 +232,18 @@
                class="w-full accent-accent" />
       </div>
     {/if}
+
+    <!-- Visual trace -->
+    <label class="flex items-center gap-2.5 cursor-pointer select-none">
+      <input type="checkbox" bind:checked={visualTrace} class="accent-accent w-3.5 h-3.5" />
+      <span class="text-xs font-mono text-text1">Visual trace</span>
+      <span class="text-[8px] font-mono text-text2/40 ml-auto">experimental</span>
+    </label>
+    {#if visualTrace}
+      <div class="text-[9px] font-mono text-text2/60 pl-5 mb-2">
+        Live DAG of agent execution
+      </div>
+    {/if}
   </section>
 
   <!-- Cache (disabled for WASM/Gemma — prompt caching is provider-dependent) -->

package/src/agent/WebMCPserversList.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  interface Server {
+    id: string;
+    label: string;
+    description: string;
+    widgetCount: number;
+  }
+
+  interface Props {
+    servers: Server[];
+    enabledServers?: Set<string>;
+    onToggle?: (id: string) => void;
+    recipeCountByServer?: Record<string, number>;
+    toolCountByServer?: Record<string, number>;
+    onrecipeclick?: (id: string) => void;
+    ontoolclick?: (id: string) => void;
+  }
+
+  let {
+    servers,
+    enabledServers = new Set<string>(),
+    onToggle,
+    recipeCountByServer,
+    toolCountByServer,
+    onrecipeclick,
+    ontoolclick,
+  }: Props = $props();
+
+  let collapsed = $state(true);
+</script>
+
+<div class="flex flex-col gap-2">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="flex items-center gap-1 cursor-pointer select-none"
+       onclick={() => collapsed = !collapsed}>
+    <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">WebMCP servers</span>
+    <span class="text-[9px] text-text2/60 font-mono">({enabledServers.size}/{servers.length})</span>
+    <span class="text-[10px] text-text2 ml-auto transition-transform {collapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+  </div>
+
+  {#if !collapsed}
+    <div class="flex flex-col gap-1">
+      {#each servers as srv (srv.id)}
+        {@const enabled = enabledServers.has(srv.id)}
+        {@const recipes = recipeCountByServer?.[srv.id] ?? 0}
+        {@const tools = toolCountByServer?.[srv.id] ?? 0}
+        <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">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onchange={() => onToggle?.(srv.id)}
+            class="w-3.5 h-3.5 rounded border-border2 accent-accent cursor-pointer flex-shrink-0"
+          />
+          <div class="flex-1 min-w-0 flex flex-col">
+            <span class="font-mono text-xs font-medium text-text1 truncate">{srv.label}</span>
+            {#if srv.description}
+              <span class="text-[10px] text-text2 truncate">{srv.description}</span>
+            {/if}
+            {#if enabled && (recipes > 0 || tools > 0)}
+              <span class="flex items-center gap-1.5 mt-0.5">
+                {#if recipes > 0}
+                  <button class="text-[10px] font-mono text-accent hover:underline"
+                          onclick={(e) => { e.stopPropagation(); onrecipeclick?.(srv.id); }}>
+                    {recipes} recipes
+                  </button>
+                {/if}
+                {#if recipes > 0 && tools > 0}
+                  <span class="text-[10px] text-text2">·</span>
+                {/if}
+                {#if tools > 0}
+                  <button class="text-[10px] font-mono text-accent hover:underline"
+                          onclick={(e) => { e.stopPropagation(); ontoolclick?.(srv.id); }}>
+                    {tools} tools
+                  </button>
+                {/if}
+              </span>
+            {/if}
+          </div>
+          <span class="text-[9px] font-mono text-text2/50 flex-shrink-0">{srv.widgetCount}w</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/index.ts

@@ -86,7 +86,9 @@ export type { BusMessage } from './messaging/bus.svelte.js';
 
 // Agent UI components
 export { default as LLMSelector } from './agent/LLMSelector.svelte';
-export { default as GemmaLoader } from './agent/GemmaLoader.svelte';
+export { default as ModelLoader } from './agent/ModelLoader.svelte';
+/** @deprecated Use ModelLoader instead. Alias maintained for backward compatibility. */
+export { default as GemmaLoader } from './agent/ModelLoader.svelte';
 export { default as McpStatus } from './agent/McpStatus.svelte';
 export { default as AgentProgress } from './agent/AgentProgress.svelte';
 export { default as McpConnector } from './agent/McpConnector.svelte';
@@ -95,6 +97,7 @@ export type { ChatFeedItem, ChatBubble, ChatBlock } from './agent/ChatPanel.svel
 export { default as AgentConsole } from './agent/AgentConsole.svelte';
 export { default as SettingsPanel } from './agent/SettingsPanel.svelte';
 export { default as RemoteMCPserversDemo } from './agent/RemoteMCPserversDemo.svelte';
+export { default as WebMCPserversList } from './agent/WebMCPserversList.svelte';
 export { default as EphemeralBubble } from './agent/EphemeralBubble.svelte';
 export { default as TokenBubble } from './agent/TokenBubble.svelte';
 export { default as DiagnosticModal } from './agent/DiagnosticModal.svelte';

package/src/widgets/WidgetRenderer.svelte

@@ -249,22 +249,15 @@
 {/if}
 
 <style>
-  .vanilla-container :global(svg) {
+  .vanilla-container > :global(svg),
+  .vanilla-container > :global(canvas),
+  .vanilla-container > :global(img) {
     width: 100%;
     height: auto;
     max-height: 100%;
     display: block;
   }
-  .vanilla-container :global(canvas) {
-    width: 100%;
-    height: auto;
-    max-height: 100%;
-    display: block;
-  }
-  .vanilla-container :global(img) {
-    width: 100%;
-    height: auto;
-    max-height: 100%;
+  .vanilla-container > :global(img) {
     object-fit: contain;
   }
 </style>

package/src/widgets/rich/D3Widget.svelte

@@ -227,6 +227,11 @@
     const w = width || 400;
     const h = Math.max(250, Math.round(w * 0.65));
 
+    // Truncate labels so they stay inside the viewBox. Hover <title> shows the full label.
+    const maxChars = Math.max(10, Math.floor(w / 120));
+    const truncate = (text: string): string =>
+      text.length > maxChars ? text.slice(0, Math.max(1, maxChars - 1)) + '…' : text;
+
     const accent = cssVar('--color-accent', '#6c5ce7');
     const accent2 = cssVar('--color-accent2', '#e17055');
     const groups = Array.from(new Set(nodes.map((n) => n.group ?? 0)));
@@ -295,9 +300,9 @@
       .attr('y', 4)
       .attr('font-size', '10px')
       .attr('fill', 'var(--color-text1, #111)')
-      .text((n) => n.label ?? n.id);
+      .text((n) => truncate(String(n.label ?? n.id)));
 
-    node.append('title').text((n) => n.label ?? n.id);
+    node.append('title').text((n) => String(n.label ?? n.id));
 
     sim.on('tick', () => {
       link

package/src/widgets/rich/Sankey.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
-  export interface SankeyNode { id: string; label: string; color?: string; }
+  export interface SankeyNode { id: string; label: string; color?: string; summary?: string; }
   export interface SankeyLink { source: string; target: string; value: number; label?: string; }
   export interface SankeySpec { title?: string; nodes?: SankeyNode[]; links?: SankeyLink[]; }
   interface Props { spec: Partial<SankeySpec>; onnodeclick?: (n: SankeyNode) => void; onlinkclick?: (l: SankeyLink) => void; }
   let { spec, onnodeclick, onlinkclick }: Props = $props();
+  let host: HTMLElement | undefined = $state();
   const nodes=$derived<SankeyNode[]>(Array.isArray(spec.nodes)?spec.nodes:[]);
   const links=$derived<SankeyLink[]>(Array.isArray(spec.links)?spec.links:[]);
   const nodeMap=$derived(new Map(nodes.map(n=>[n.id,n])));
   const maxVal=$derived(Math.max(...links.map(l=>l.value),1));
   const sorted=$derived([...links].sort((a,b)=>b.value-a.value));
+  function dispatchNodeDblclick(node: SankeyNode | undefined) {
+    if (!node || !host) return;
+    host.dispatchEvent(new CustomEvent('widget:node-dblclick', {
+      detail: { nodeId: node.id, nodeData: node },
+      bubbles: true,
+    }));
+  }
 </script>
-<div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
+<div bind:this={host} class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
   {#if !nodes.length||!links.length}<p class="text-text2 text-sm">No flow data</p>
   {:else}
@@ -25,11 +33,21 @@
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div class="flex items-center gap-2 text-xs cursor-pointer hover:opacity-80 transition-opacity" role="button" tabindex="0" onclick={()=>onlinkclick?.(link)} onkeydown={(e)=>{if(e.key==='Enter')onlinkclick?.(link)}}>
-          <span class="text-text2 min-w-[80px] truncate font-mono" style="color:{sc};">{src?.label??link.source}</span>
+          <span
+            class="text-text2 min-w-[80px] truncate font-mono"
+            style="color:{sc};"
+            title={src?.summary ?? src?.label ?? link.source}
+            ondblclick={(e)=>{e.stopPropagation(); dispatchNodeDblclick(src); onnodeclick?.(src!);}}
+          >{src?.label??link.source}</span>
           <div class="flex-1 bg-surface2 rounded-full overflow-hidden" style="height:{barH}px;">
             <div class="rounded-full h-full" style="width:{pct}%;background:linear-gradient(to right,{sc},{tc});"></div>
           </div>
-          <span class="text-text2 min-w-[80px] truncate text-right font-mono" style="color:{tc};">{tgt?.label??link.target}</span>
+          <span
+            class="text-text2 min-w-[80px] truncate text-right font-mono"
+            style="color:{tc};"
+            title={tgt?.summary ?? tgt?.label ?? link.target}
+            ondblclick={(e)=>{e.stopPropagation(); dispatchNodeDblclick(tgt); onnodeclick?.(tgt!);}}
+          >{tgt?.label??link.target}</span>
           <span class="text-text2 min-w-[40px] text-right font-mono">{link.value}</span>
         </div>
       {/each}

package/src/wm/FloatingLayout.svelte

@@ -125,6 +125,7 @@
 
   function resizeStart(id: string, e: MouseEvent) {
     e.stopPropagation();
+    e.preventDefault();
     rdrag = id; rsx = e.clientX; rsy = e.clientY;
     const lw = lmap.get(id); rww = lw?.width ?? defaultWidth; rwh = lw?.height ?? defaultHeight;
     focus(id);
@@ -181,6 +182,7 @@
     <!-- ── Desktop: scrollable floating canvas ─────────────────────────────── -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="absolute inset-0 overflow-auto"
+         class:select-none={drag !== null || rdrag !== null}
          onmousemove={mm} onmouseup={mu} onmouseleave={mu}>
       <div class="relative" style="width:{canvasW}px;height:{canvasH}px;">
         {#each windows as win (win.id)}

package/src/wm/LinkIndicators.svelte

@@ -8,8 +8,10 @@
    * Usage: place inside a title bar div. The component renders inline
    * (flex items) and is invisible when the widget has no links.
    *
-   * Requires the bus to expose hasLinks/getLinks/getGroup (added by another agent).
-   * Gracefully degrades if those methods don't exist yet.
+   * Consumes the FONC bus link API: `bus.hasLinks(busId)` and
+   * `bus.getLinks(busId)` (see packages/ui/src/messaging/bus.svelte.ts).
+   * `getLinks` returns `string[]` of group IDs; the first one drives the
+   * indicator color.
    */
   import { bus } from '../messaging/bus.svelte.js';
   import { groupColor } from './link-utils.js';
@@ -20,22 +22,13 @@
   }
   let { busId }: Props = $props();
 
-  // ── Reactive link state (safe if bus methods don't exist yet) ──────
-  const linked = $derived(
-    typeof (bus as any).hasLinks === 'function' ? (bus as any).hasLinks(busId) : false
-  );
+  // ── Reactive link state ────────────────────────────────────────────
+  const linked = $derived(bus.hasLinks(busId));
 
-  const links = $derived(
-    typeof (bus as any).getLinks === 'function' ? (bus as any).getLinks(busId) : []
-  );
+  const links = $derived(bus.getLinks(busId));
 
   /** First group ID (a widget may belong to multiple groups) */
-  const groupId = $derived.by((): string | null => {
-    if (!Array.isArray(links) || links.length === 0) return null;
-    // Each link has a groupId property
-    const first = links[0];
-    return typeof first === 'object' && first?.groupId ? String(first.groupId) : null;
-  });
+  const groupId = $derived(links.length > 0 ? links[0] : null);
 
   const color = $derived(groupId ? groupColor(groupId) : 'transparent');