@webmcp-auto-ui/ui 2.5.20 → 2.5.21

package/package.json

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

package/src/agent/SettingsPanel.svelte

@@ -11,6 +11,7 @@
     compressHistory?: boolean;
     compressPreview?: number;
     contextRAGEnabled?: boolean;
+    ragResidueSize?: number;
     cacheEnabled?: boolean;
     temperature?: number;
     topK?: number;
@@ -29,6 +30,7 @@
     compressHistory = $bindable(false),
     compressPreview = $bindable(500),
     contextRAGEnabled = $bindable(false),
+    ragResidueSize = $bindable(200),
     cacheEnabled = $bindable(true),
     temperature = $bindable(0.7),
     topK = $bindable(10),
@@ -210,7 +212,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">Compresser l'historique</span>
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Tronquer l'historique</span>
       </label>
       {#if compressHistory}
       <div class="flex justify-between items-baseline mb-1">
@@ -230,9 +232,18 @@
       <span class="text-[8px] font-mono text-text2/40 ml-auto">experimental</span>
     </label>
     {#if contextRAGEnabled}
-      <div class="text-[9px] font-mono text-text2/60 pl-5">
+      <div class="text-[9px] font-mono text-text2/60 pl-5 mb-2">
         Semantic context compaction via vector embeddings
       </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="font-mono text-xs text-text1">{ragResidueSize}</span>
+        </div>
+        <input type="range" bind:value={ragResidueSize}
+               min={0} max={2000} step={50}
+               class="w-full accent-accent" />
+      </div>
     {/if}
   </section>
 

package/src/widgets/export-widget.ts

@@ -89,23 +89,33 @@ function exportCsv(type: string, data: Record<string, unknown>): void {
 
 async function exportPng(type: string, containerEl: HTMLElement): Promise<void> {
   const name = filename(type, 'png');
-  const clientW = Math.max(containerEl.clientWidth, 1);
-  const clientH = Math.max(containerEl.clientHeight, 1);
-  const pixelRatio = TARGET_PNG_WIDTH / clientW;
+  // Use scroll dimensions to capture the FULL content, not just the visible viewport.
+  // Widgets like data-table can overflow horizontally; clientWidth would crop them.
+  const scrollW = Math.max(containerEl.scrollWidth, containerEl.clientWidth, 1);
+  const scrollH = Math.max(containerEl.scrollHeight, containerEl.clientHeight, 1);
+  const pixelRatio = TARGET_PNG_WIDTH / scrollW;
+
+  const bg = (typeof document !== 'undefined'
+    ? getComputedStyle(document.documentElement).getPropertyValue('--color-surface').trim()
+    : '') || '#ffffff';
 
   try {
     const dataUrl = await toPng(containerEl, {
       pixelRatio,
+      width: scrollW,
+      height: scrollH,
       cacheBust: true,
-      // Let the DOM speak for its own styles — no forced background
-      // so dark/light themes both render correctly.
+      backgroundColor: bg,
+      style: {
+        // Force children visibility inside the cloned node so overflow content renders
+        overflow: 'visible',
+      },
     });
     downloadFile(dataUrl, name);
   } catch (err) {
     console.error('[exportWidget] PNG export failed for type', type, err);
     alert(`Export PNG impossible : ${err instanceof Error ? err.message : String(err)}`);
   }
-  // pixelRatio used as-is; final canvas size = clientW*pixelRatio × clientH*pixelRatio = 2048 × (2048 * clientH / clientW)
 }
 
 // ── Markdown ──────────────────────────────────────────────────────────────────