@webmcp-auto-ui/ui 2.5.27 → 2.5.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.27",
+  "version": "2.5.28",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -15,7 +15,12 @@
     "./canvas": {
       "svelte": "./src/stores/canvas.svelte.ts",
       "import": "./src/stores/canvas.svelte.ts"
-    }
+    },
+    "./widgets/notebook/*": {
+      "svelte": "./src/widgets/notebook/*",
+      "import": "./src/widgets/notebook/*"
+    },
+    "./widgets/notebook/recipes/*": "./src/widgets/notebook/recipes/*"
   },
   "scripts": {
     "build": "svelte-package -i src",
@@ -25,7 +30,13 @@
   "peerDependencies": {
     "d3": "^7.9.0",
     "leaflet": ">=1.9.0",
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "vega-embed": "^6.24.0"
+  },
+  "peerDependenciesMeta": {
+    "vega-embed": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
@@ -46,6 +57,7 @@
     "auto-ui"
   ],
   "dependencies": {
+    "@webmcp-auto-ui/core": "*",
     "@webmcp-auto-ui/sdk": "*",
     "@types/d3": "^7.4.3",
     "bits-ui": "^2.17.2",

package/src/agent/DataServersPanel.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  /**
+   * DataServersPanel — manages the list of data (MCP) servers in the canvas store.
+   *
+   * Reads/writes through `canvas.dataServers` (reactive, Svelte 5 runes wrapper).
+   * A companion `MultiMcpBridge` (installed in the app root) observes the store
+   * and connects/disconnects servers according to their `enabled` flag.
+   *
+   * Visual state per server:
+   *   - disabled           : grey dot
+   *   - enabled + !connected : yellow dot (connecting)
+   *   - enabled + connected : green dot (ok)
+   *   - error              : red dot with tooltip
+   */
+  import { canvas } from '@webmcp-auto-ui/sdk/canvas';
+
+  let connectOpen = $state(false);
+  let newName = $state('');
+  let newUrl = $state('');
+  let formError = $state<string | null>(null);
+  let nameInputEl: HTMLInputElement | null = $state(null);
+
+  function openModal() {
+    connectOpen = true;
+    formError = null;
+    // Focus the name field once the modal mounts.
+    queueMicrotask(() => nameInputEl?.focus());
+  }
+
+  function closeModal() {
+    connectOpen = false;
+    newName = '';
+    newUrl = '';
+    formError = null;
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Escape' && connectOpen) {
+      e.preventDefault();
+      closeModal();
+    }
+  }
+
+  function submitConnect(e?: Event) {
+    e?.preventDefault();
+    const name = newName.trim();
+    const url = newUrl.trim();
+    if (!name) { formError = 'Name required'; return; }
+    if (canvas.getDataServer(name)) { formError = 'A server with this name already exists'; return; }
+    try { new URL(url); } catch { formError = 'Invalid URL'; return; }
+    canvas.addDataServer({ name, url });
+    // addDataServer initialises enabled=true; the bridge will pick it up.
+    closeModal();
+  }
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+<section class="flex flex-col gap-2">
+  <div class="flex items-center justify-between">
+    <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Data servers</span>
+    <button
+      type="button"
+      class="font-mono text-[10px] h-6 px-2 rounded border border-accent/40 text-accent hover:bg-accent/10 transition-colors"
+      onclick={openModal}
+    >
+      + Connect
+    </button>
+  </div>
+
+  {#if canvas.dataServers.length === 0}
+    <div class="text-[10px] font-mono text-text2/50 italic">No data servers connected.</div>
+  {:else}
+    <ul class="flex flex-col gap-1">
+      {#each canvas.dataServers as s (s.name)}
+        <li class="flex items-center gap-2 px-2 py-1.5 rounded border border-border2/60 bg-surface2/40">
+          <label class="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
+            <input
+              type="checkbox"
+              class="accent-accent w-3.5 h-3.5 flex-shrink-0"
+              checked={s.enabled}
+              onchange={() => canvas.toggleDataServer(s.name)}
+              aria-label={`Toggle ${s.name}`}
+            />
+            <span
+              class="w-1.5 h-1.5 rounded-full flex-shrink-0
+                     {s.error ? 'bg-accent2'
+                      : !s.enabled ? 'bg-text2/40'
+                      : s.connected ? 'bg-teal'
+                      : 'bg-amber animate-pulse'}"
+              title={s.error
+                ? `Error: ${s.error}`
+                : !s.enabled ? 'Disabled'
+                : s.connected ? 'Connected'
+                : 'Connecting…'}
+            ></span>
+            <span class="font-mono text-xs text-text1 truncate" title={s.url}>{s.name}</span>
+            {#if s.tools && s.tools.length > 0}
+              <span class="font-mono text-[9px] text-text2/60 flex-shrink-0">{s.tools.length} tools</span>
+            {/if}
+          </label>
+          <button
+            type="button"
+            class="text-text2/60 hover:text-accent2 transition-colors flex-shrink-0 text-sm leading-none px-1"
+            onclick={() => canvas.removeDataServer(s.name)}
+            aria-label={`Remove ${s.name}`}
+            title="Remove"
+          >&times;</button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+{#if connectOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 bg-black/50 z-[60] flex items-center justify-center p-4"
+    onclick={closeModal}
+  >
+    <form
+      class="w-full max-w-sm bg-surface border border-border2 rounded-lg shadow-xl p-5 flex flex-col gap-3"
+      onclick={(e) => e.stopPropagation()}
+      onsubmit={submitConnect}
+    >
+      <h4 class="font-mono text-sm font-bold text-text1">Connect data server</h4>
+      <label class="flex flex-col gap-1">
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Name</span>
+        <input
+          bind:this={nameInputEl}
+          bind:value={newName}
+          type="text"
+          placeholder="tricoteuses"
+          required
+          class="font-mono text-xs h-7 px-2 rounded border border-border2 bg-surface2 text-text1"
+        />
+      </label>
+      <label class="flex flex-col gap-1">
+        <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">URL</span>
+        <input
+          bind:value={newUrl}
+          type="url"
+          placeholder="https://mcp.example.com/mcp"
+          required
+          class="font-mono text-xs h-7 px-2 rounded border border-border2 bg-surface2 text-text1"
+        />
+      </label>
+      {#if formError}
+        <div class="font-mono text-[10px] text-accent2">{formError}</div>
+      {/if}
+      <div class="flex items-center justify-end gap-2 pt-1">
+        <button
+          type="button"
+          class="font-mono text-xs h-7 px-3 rounded border border-border2 text-text2 hover:text-text1 transition-colors"
+          onclick={closeModal}
+        >Cancel</button>
+        <button
+          type="submit"
+          class="font-mono text-xs h-7 px-3 rounded border border-accent/40 text-accent hover:bg-accent/10 transition-colors"
+        >Connect</button>
+      </div>
+    </form>
+  </div>
+{/if}

package/src/agent/LLMSelector.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { listTransformersModels } from '@webmcp-auto-ui/agent';
+  import { listTransformersModels, listHawkModels } from '@webmcp-auto-ui/agent';
 
   export interface ModelOption {
     value: string;
     label: string;
-    group: 'remote' | 'wasm' | 'transformers' | 'local';
+    group: 'remote' | 'wasm' | 'transformers' | 'local' | 'hawk';
   }
 
   const transformersOptions: ModelOption[] = listTransformersModels().map(({ id, entry }) => ({
@@ -13,15 +13,23 @@
     group: 'transformers' as const,
   }));
 
+  const hawkOptions: ModelOption[] = listHawkModels().map(m => ({
+    value: `hawk-${m.id}`,
+    label: m.label,
+    group: 'hawk' as const,
+  }));
+
   const DEFAULT_MODELS: ModelOption[] = [
     { 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,
+    ...hawkOptions,
   ];
 
   const GROUP_LABELS: Record<string, string> = {
     remote:       'Remote',
+    hawk:         'Remote (Hawk)',
     wasm:         'In-Browser (MediaPipe)',
     transformers: 'In-Browser (Transformers.js)',
     local:        'Local',
@@ -36,7 +44,7 @@
   let { value, onchange, models = DEFAULT_MODELS, class: cls = '' }: Props = $props();
 
   const groups = $derived(
-    ['remote', 'wasm', 'transformers', 'local'].filter(g => models.some(m => m.group === g))
+    ['remote', 'hawk', 'wasm', 'transformers', 'local'].filter(g => models.some(m => m.group === g))
   );
 </script>
 

package/src/agent/ModelCacheManager.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+  import {
+    listCachedModels, clearModelCache, clearAllModelCaches, type CachedModelInfo,
+    listAllStorage, deleteStorageEntry, clearAllStorage, type StorageEntry,
+  } from '@webmcp-auto-ui/agent';
+
+  interface Props {
+    class?: string;
+  }
+  let { class: cls = '' }: Props = $props();
+
+  let models = $state<CachedModelInfo[]>([]);
+  let storage = $state<StorageEntry[]>([]);
+  let usage = $state<number | null>(null);
+  let quota = $state<number | null>(null);
+  let loading = $state(true);
+  let supported = $state(true);
+  let busy = $state<string | null>(null);
+  let collapsed = $state(true);
+
+  let opfsCollapsed = $state(false);
+  let cacheCollapsed = $state(true);
+  let idbCollapsed = $state(true);
+
+  const totalSize = $derived(models.reduce((s, m) => s + m.size, 0));
+  const usagePct = $derived(quota && quota > 0 && usage !== null ? Math.min(100, (usage / quota) * 100) : 0);
+
+  const opfsExtras = $derived(storage.filter((e) => e.source === 'opfs'));
+  const cacheEntries = $derived(storage.filter((e) => e.source === 'cache-storage'));
+  const idbEntries = $derived(storage.filter((e) => e.source === 'indexeddb'));
+
+  const cacheTotalSize = $derived(cacheEntries.reduce((s, e) => s + e.size, 0));
+  const opfsExtrasTotalSize = $derived(opfsExtras.reduce((s, e) => s + e.size, 0));
+
+  function formatBytes(n: number): string {
+    if (!Number.isFinite(n) || n <= 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let v = n;
+    let i = 0;
+    while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
+    return `${v.toFixed(v >= 100 || i === 0 ? 0 : v >= 10 ? 1 : 2)} ${units[i]}`;
+  }
+
+  function formatDate(ms: number): string {
+    if (!ms) return '—';
+    const d = new Date(ms);
+    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  function formatSize(e: StorageEntry): string {
+    if (!e.sizeKnown) return 'taille inconnue';
+    return formatBytes(e.size);
+  }
+
+  async function refresh() {
+    loading = true;
+    try {
+      if (typeof navigator === 'undefined' || !navigator.storage?.getDirectory) {
+        supported = false;
+        return;
+      }
+      supported = true;
+      const [ms, sto] = await Promise.all([listCachedModels(), listAllStorage()]);
+      models = ms;
+      storage = sto;
+      try {
+        const est = await navigator.storage.estimate();
+        usage = est.usage ?? null;
+        quota = est.quota ?? null;
+      } catch {
+        usage = null;
+        quota = null;
+      }
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function deleteOne(repo: string) {
+    if (!confirm(`Supprimer le cache "${repo}" ?`)) return;
+    busy = `opfs:${repo}`;
+    try {
+      await clearModelCache(repo);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteAll() {
+    if (!confirm(`Supprimer TOUS les modèles en cache (${models.length} repo·s, ${formatBytes(totalSize)}) ?`)) return;
+    busy = '__opfs_all__';
+    try {
+      await clearAllModelCaches();
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteEntry(e: StorageEntry) {
+    const label = `${e.source} · ${e.key}`;
+    if (!confirm(`Supprimer ${label} ?`)) return;
+    busy = `${e.source}:${e.key}`;
+    try {
+      await deleteStorageEntry(e);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteSource(source: 'opfs' | 'cache-storage' | 'indexeddb', count: number) {
+    if (!confirm(`Supprimer TOUT le ${source} (${count} entrée·s) ?`)) return;
+    busy = `__${source}_all__`;
+    try {
+      await clearAllStorage(source);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  $effect(() => { refresh(); });
+</script>
+
+<div class="flex flex-col gap-2 {cls}">
+  <!-- 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">Model cache (OPFS)</span>
+    <span class="text-[9px] text-text2/60 font-mono">
+      {#if !supported}(n/a){:else if loading}(…){:else}({models.length} · {formatBytes(totalSize)}){/if}
+    </span>
+    <span class="text-[10px] text-text2 ml-auto transition-transform {collapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+  </div>
+
+  {#if !collapsed}
+    <div class="text-[9px] font-mono text-text2/50 -mt-1">OPFS + Cache Storage + IndexedDB</div>
+
+    {#if !supported}
+      <div class="text-[10px] font-mono text-text2/60 p-2 border border-border2 rounded">
+        OPFS indisponible dans ce navigateur.
+      </div>
+    {:else if loading}
+      <div class="text-[10px] font-mono text-text2/60">Lecture du cache…</div>
+    {:else}
+      {#if quota !== null && usage !== null}
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center justify-between font-mono text-[10px] text-text2">
+            <span>{formatBytes(usage)} / {formatBytes(quota)}</span>
+            <span class="text-text2/60">origine entière · {usagePct.toFixed(1)}%</span>
+          </div>
+          <div class="h-1 bg-surface2 rounded overflow-hidden">
+            <div class="h-full bg-teal transition-all" style="width: {usagePct}%"></div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- ── LLM models (OPFS webmcp-models) ───────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => opfsCollapsed = !opfsCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">LLM models (OPFS)</span>
+          <span class="text-[9px] text-text2/60 font-mono">({models.length} · {formatBytes(totalSize)})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {opfsCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !opfsCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Modèles : <span class="text-text1">{models.length}</span> · {formatBytes(totalSize)}
+            </span>
+            {#if models.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={deleteAll}
+              >
+                {busy === '__opfs_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if models.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucun modèle en cache.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each models as m (m.repo)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate" title={m.repo}>{m.repo}</span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatBytes(m.size)} · {m.fileCount} fichier{m.fileCount > 1 ? 's' : ''} · {formatDate(m.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteOne(m.repo)}
+                    title="Supprimer ce cache"
+                  >
+                    {busy === `opfs:${m.repo}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+
+          {#if opfsExtras.length > 0}
+            <div class="text-[9px] font-mono text-text2/50 mt-1">Autres OPFS : {opfsExtras.length} · {formatBytes(opfsExtrasTotalSize)}</div>
+            <ul class="flex flex-col gap-1">
+              {#each opfsExtras as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatSize(e)} · {e.itemCount} fichier{e.itemCount > 1 ? 's' : ''} · {formatDate(e.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer ce répertoire OPFS"
+                  >
+                    {busy === `opfs:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- ── Cache Storage ─────────────────────────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => cacheCollapsed = !cacheCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Cache Storage</span>
+          <span class="text-[9px] text-text2/60 font-mono">({cacheEntries.length} · {formatBytes(cacheTotalSize)})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {cacheCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !cacheCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Caches : <span class="text-text1">{cacheEntries.length}</span> · {formatBytes(cacheTotalSize)}
+            </span>
+            {#if cacheEntries.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={() => deleteSource('cache-storage', cacheEntries.length)}
+              >
+                {busy === '__cache-storage_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if cacheEntries.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucun cache.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each cacheEntries as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatSize(e)} · {e.itemCount} item{e.itemCount > 1 ? 's' : ''} · {formatDate(e.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer ce cache"
+                  >
+                    {busy === `cache-storage:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- ── IndexedDB ─────────────────────────────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => idbCollapsed = !idbCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">IndexedDB</span>
+          <span class="text-[9px] text-text2/60 font-mono">({idbEntries.length})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {idbCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !idbCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Bases : <span class="text-text1">{idbEntries.length}</span> · taille inconnue
+            </span>
+            {#if idbEntries.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={() => deleteSource('indexeddb', idbEntries.length)}
+              >
+                {busy === '__indexeddb_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if idbEntries.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucune base IndexedDB.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each idbEntries as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      taille inconnue · version {e.itemCount}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer cette base"
+                  >
+                    {busy === `indexeddb:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+  {/if}
+</div>