@webmcp-auto-ui/ui 2.5.26 → 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.26",
+  "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

@@ -48,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}">
@@ -82,13 +76,7 @@
              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>
-          {:else if log.type === 'recipe'}
+          {#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) : ''}
@@ -242,14 +230,6 @@
     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);

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/{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

@@ -11,6 +11,7 @@
     compressPreview?: number;
     contextRAGEnabled?: boolean;
     ragResidueSize?: number;
+    visualTrace?: boolean;
     cacheEnabled?: boolean;
     temperature?: number;
     topK?: number;
@@ -29,6 +30,7 @@
     compressPreview = $bindable(500),
     contextRAGEnabled = $bindable(false),
     ragResidueSize = $bindable(200),
+    visualTrace = $bindable(false),
     cacheEnabled = $bindable(true),
     temperature = $bindable(0.7),
     topK = $bindable(10),
@@ -186,10 +188,10 @@
     <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>
 
@@ -230,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/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';

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');