update

README.md

@@ -12,18 +12,19 @@ thumbnail: https://huggingface.co/spaces/tfrere/research-paper-template/thumb.jp
 
 ## Find recent duplicated Spaces
 
-This repository includes a small utility to list public Spaces created in the last N days that were duplicated from a given source Space.
+This repository includes a small Poetry tool under `tools/duplicated-spaces` to list public Spaces created in the last N days that were duplicated from a given source Space.
 
-Prerequisites:
+Setup:
 
 ```bash
-pip install huggingface_hub requests
+cd tools/duplicated-spaces
+poetry install --no-root
 ```
 
 Usage:
 
 ```bash
-python app/scripts/find_duplicated_spaces.py --source owner/space-name --days 14
+poetry run find-duplicated-spaces --source owner/space-name --days 14
 ```
 
 Options:
@@ -40,11 +41,11 @@ Examples:
 export HF_TOKEN=hf_xxx
 
 # Find Spaces duplicated from tfrere/my-space in the last 14 days
-python app/scripts/find_duplicated_spaces.py --source tfrere/my-space
+poetry run find-duplicated-spaces --source tfrere/my-space
 
 # Use a 7-day window and explicit token
-python app/scripts/find_duplicated_spaces.py --source tfrere/my-space --days 7 --token $HF_TOKEN
+poetry run find-duplicated-spaces --source tfrere/my-space --days 7 --token $HF_TOKEN
 ```
 
-The script first checks card metadata (e.g., `duplicated_from`) and optionally falls back to parsing the README frontmatter for robustness.
+The tool first checks card metadata (e.g., `duplicated_from`) and optionally falls back to parsing the README frontmatter for robustness.
 

app/src/components/ColorPicker.astro

@@ -82,7 +82,27 @@
         const toHex = x => Math.round(255 * x).toString(16).padStart(2, '0');
         return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`.toUpperCase();
       };
-      const getName = (hex) => { const h = hexToHsl(hex).h || 0; const labels=['Red','Orange','Yellow','Lime','Green','Cyan','Blue','Indigo','Violet','Magenta']; const idx=Math.round(((h%360)/360)*(labels.length-1)); return labels[idx]; };
+      // Precompute hues for the provided color-name list
+      const NAME_HUES = COLOR_NAMES.map((c) => {
+        const hh = hexToHsl(c.hex).h || 0;
+        return { name: c.name, hue: hh };
+      });
+      // Pick closest name by circular hue distance; fallback to coarse labels
+      const getName = (hex) => {
+        const h = hexToHsl(hex).h || 0;
+        let bestName = '—';
+        let best = 361;
+        for (let i = 0; i < NAME_HUES.length; i++) {
+          const hh = NAME_HUES[i].hue;
+          const d = Math.abs(hh - h);
+          const dist = Math.min(d, 360 - d);
+          if (dist < best) { best = dist; bestName = NAME_HUES[i].name; }
+        }
+        if (bestName !== '—') return bestName;
+        const labels=['Red','Orange','Yellow','Lime','Green','Cyan','Blue','Indigo','Violet','Magenta'];
+        const idx=Math.round(((h%360)/360)*(labels.length-1));
+        return labels[idx];
+      };
       const updateUI = (h, adjusting) => { const rect = slider.getBoundingClientRect(); const r=Math.min(getKnobRadius(), Math.max(0, rect.width/2 - 1)); const t=Math.max(0, Math.min(1, (h/360))); const leftPx = r + t * Math.max(0, (rect.width - 2*r)); if (knob) knob.style.left = (leftPx/rect.width*100) + '%'; if (hueValue) hueValue.textContent=`${Math.round(h)}°`; if (slider) slider.setAttribute('aria-valuenow', String(Math.round(h))); const L=62, S=72; const baseHex=hslToHex(h,S,L); if (currentSwatch) currentSwatch.style.background=baseHex; if (currentName) currentName.textContent=getName(baseHex); if (currentHex) currentHex.textContent=baseHex; if (currentLch) currentLch.textContent = `HSL ${L}, ${S}, ${Math.round(h)}°`; if (currentRgb){ const hex=baseHex.replace('#',''); const R=parseInt(hex.slice(0,2),16), G=parseInt(hex.slice(2,4),16), B=parseInt(hex.slice(4,6),16); currentRgb.textContent=`RGB ${R}, ${G}, ${B}`; } const hoverHex=hslToHex(h, Math.max(0,S-10), Math.max(0, L-8)); const rootEl=document.documentElement; rootEl.style.setProperty('--primary-color', baseHex); rootEl.style.setProperty('--primary-color-hover', hoverHex); };
       const getHueFromEvent = (ev) => { const rect=slider.getBoundingClientRect(); const clientX=ev.touches ? ev.touches[0].clientX : ev.clientX; const x = clientX - rect.left; const r=Math.min(getKnobRadius(), Math.max(0, rect.width/2 - 1)); const effX=Math.max(r, Math.min(rect.width - r, x)); const denom=Math.max(1, rect.width - 2*r); const t=(effX - r) / denom; return t*360; };
       const unsubscribe = bus.subscribe(({ sourceId, hue, adjusting }) => { if (sourceId === instanceId) return; updateUI(hue, adjusting); });

app/src/content/chapters/vibe-coding-charts.mdx

@@ -1,7 +1,10 @@
 import HtmlEmbed from '../../components/HtmlEmbed.astro';
+import Note from '../../components/Note.astro';
 
 ## Vibe coding charts
 
+<Note emoji="⚠️" variant="danger">This is a work in progress. It may change quickly.</Note>
+
 ### Prompt
 
 This page explains how to use the directives to author D3 charts as self‑contained HTML fragments.
@@ -62,7 +65,9 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
 ---
 <HtmlEmbed src="d3-bar.html" title="d3-bar: Memory usage with recomputation" desc={`Figure 6: Memory usage with recomputation.<br/>Credits: <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">Ultrascale playbook</a>`}/>
 --- 
-  <HtmlEmbed src="d3-pie.html" title="d3-pie: Pie charts by category" align="center" frameless desc='Figure 7: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>' /> 
+  <HtmlEmbed src="d3-pie.html" title="d3-pie: Pie charts by category" desc='Figure 7: Comparison across thresholds for all four filters individually: Formatting, Relevance, Visual Dependency, and Image-Question Correspondence <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>' /> 
+--- 
+  <HtmlEmbed src="d3-pie-quad.html" title="d3-pie-quad: Quad donuts by metric" align="center" frameless desc={'Quad view: Answer Tokens, Number of Samples, Number of Turns, Number of Images.'} />
 ---
 <HtmlEmbed src="d3-scatter.html" title="d3-scatter: 2D projection by category" desc={`Figure 8: Dataset visualization via UMAP <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>`} frameless align="center" />
 ---

app/src/content/embeds/d3-pie-quad.html

@@ -0,0 +1,347 @@
+<div class="d3-pie-quad"></div>
+<style>
+  /* Layout piloté par container queries (par rapport au parent) */
+  .d3-pie-quad { container-type: inline-size; }
+  .d3-pie-quad .legend { width: 80%;margin: 0 auto; font-size: 12px; line-height: 1.35; color: var(--text-color); }
+  .d3-pie-quad .legend { margin-bottom: 32px; }
+  .d3-pie-quad .legend .items { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
+  .d3-pie-quad .legend .item { display:flex; align-items:center; gap:8px; white-space:nowrap; }
+  .d3-pie-quad .legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border: 1px solid var(--border-color); }
+  .d3-pie-quad .legend .title { display:block; text-align:center; font-weight:800; margin-bottom:6px; }
+  .d3-pie-quad .caption { font-size: 14px; font-weight: 800; fill: var(--text-color); }
+  .d3-pie-quad .caption-subtitle { font-size: 11px; font-weight: 400; fill: var(--muted-color); }
+  .d3-pie-quad .nodata { font-size: 12px; fill: var(--muted-color); }
+  /* Ghost legend items when hovering slices */
+  .d3-pie-quad.hovering .legend .item.ghost { opacity: .35; }
+  .d3-pie-quad .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: var(--transparent-page-contrast); stroke-width: 3px; }
+  /* Effet ghost synchronisé */
+  .d3-pie-quad .slice {
+    transition: opacity .15s ease;
+  }
+  .d3-pie-quad.hovering .slice.ghost {
+    opacity: .25;
+  }
+  /* Layout HTML (pas JS) pour la grille et les cellules */
+  .d3-pie-quad .plots-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 12px 20px;
+    margin-top: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+  /* Par défaut (flux ~1280): 2 colonnes centrées */
+  .content-grid .d3-pie-quad .plots-grid { width: 100%; }
+  .content-grid .d3-pie-quad .pie-cell { flex: 0 0 calc((100% - 20px)/2); }
+  /* En wrappers larges: viser 4 colonnes si l'espace le permet */
+  .wide .d3-pie-quad .plots-grid,
+  .full-width .d3-pie-quad .plots-grid { width: 100%; }
+  .wide .d3-pie-quad .pie-cell,
+  .full-width .d3-pie-quad .pie-cell { flex: 0 0 calc((100% - 60px)/4); }
+  /* Forcer 2 colonnes dans le flux lorsque le parent ~1280px */
+  .content-grid .d3-pie-quad .plots-grid { width: min(740px, 100%); }
+  .d3-pie-quad .pie-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 360px; /* 2 colonnes fixes dans le flux à 1280px */
+  }
+  /* 4/2/1 colonnes en fonction de la largeur du parent */
+  /* @container (min-width: 740px) {
+    .d3-pie-quad .plots-grid { width: 740px; }
+  }
+  @container (max-width: 739.98px) {
+    .d3-pie-quad .plots-grid { width: 100%; }
+  } */
+  @media (max-width: 500px) {
+    .d3-pie-quad .pie-cell { flex: 0 0 100%; }
+  }
+  /* Tooltip styling aligned with filters-quad */
+  .d3-pie-quad .d3-tooltip {
+    z-index: var(--z-elevated);
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  .d3-pie-quad .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+  }
+  .d3-pie-quad .d3-tooltip__inner > div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+  .d3-pie-quad .d3-tooltip__inner > div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+  .d3-pie-quad .d3-tooltip__inner > div:nth-child(n+3) {
+    padding-top: 6px;
+    border-top: 1px solid var(--border-color);
+  }
+  .d3-pie-quad .d3-tooltip__color-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+</style>
+<script>
+  (() => {
+    const THIS_SCRIPT = document.currentScript;
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = THIS_SCRIPT;
+      const host = scriptEl && scriptEl.parentElement;
+      let container = null;
+      if (host && host.querySelector) {
+        container = host.querySelector('.d3-pie-quad');
+      }
+      if (!container) {
+        let sib = scriptEl && scriptEl.previousElementSibling;
+        while (sib && !(sib.classList && sib.classList.contains('d3-pie-quad'))) {
+          sib = sib.previousElementSibling;
+        }
+        container = sib || document.querySelector('.d3-pie-quad');
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip'); let tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position:'absolute', top:'0px', left:'0px', transform:'translate(-9999px, -9999px)', pointerEvents:'none',
+          padding:'10px 12px', borderRadius:'12px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)',
+          background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity:'0', transition:'opacity .12s ease',
+          zIndex: 'var(--z-elevated)', backdropFilter: 'saturate(1.12) blur(8px)'
+        });
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // HTML scaffolding: legend and plots grid as HTML; only pies are SVG
+      const legendHost = document.createElement('div'); legendHost.className = 'legend'; container.appendChild(legendHost);
+      const plotsHost = document.createElement('div'); plotsHost.className = 'plots-grid'; container.appendChild(plotsHost);
+
+      // Metrics (order and labels as in the Python script)
+      const METRICS = [
+        { key:'answer_total_tokens', name:'Answer Tokens', title:'Weighted by ', letter:'a' },
+        { key:'total_samples',       name:'Number of Samples', title:'Weighted by ', letter:'b' },
+        { key:'total_turns',         name:'Number of Turns', title:'Weighted by ', letter:'c' },
+        { key:'total_images',        name:'Number of Images', title:'Weighted by ', letter:'d' }
+      ];
+
+      // CSV: load from public path
+      const CSV_PATHS = [
+        '/data/vision.csv'
+      ];
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const res = await fetch(p, { cache: 'no-cache' });
+            if (res.ok) { return await res.text(); }
+          } catch (_) { /* try next */ }
+        }
+        throw new Error('CSV not found: vision.csv');
+      };
+
+      const parseCsv = (text) => d3.csvParse(text, (d) => ({
+        subset_name: (d['subset_name']||'').trim(),
+        eagle_cathegory: (d['eagle_cathegory']||'').trim(),
+        answer_total_tokens: +((d['answer_total_tokens']||'0').toString().trim()) || 0,
+        total_samples: +((d['total_samples']||'0').toString().trim()) || 0,
+        total_turns: +((d['total_turns']||'0').toString().trim()) || 0,
+        total_images: +((d['total_images']||'0').toString().trim()) || 0
+      }));
+
+      // Layout
+      let width=800; const margin = { top: 8, right: 24, bottom: 0, left: 24 };
+      const CAPTION_GAP = 36;   // espace entre titre et donut
+      const GAP_X = 20;         // espace entre colonnes
+      const GAP_Y = 12;         // espace entre lignes
+      const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
+      const DONUT_INNER_RATIO = 0.58; // ratio du trou central (0 = pie plein, 0.5 = moitié)
+      // LEGEND_GAP supprimé: l'espacement est désormais géré en CSS via .d3-pie-quad .legend { margin-bottom }
+      const SVG_VPAD = 16;      // padding vertical supplémentaire à l'intérieur des SVG pour éviter la coupe
+      
+      const updateSize = () => {
+        width = container.clientWidth || 800;
+        return { innerWidth: width - margin.left - margin.right };
+      };
+
+      function renderLegend(categories, colorOf){
+        legendHost.style.display = 'flex';
+        legendHost.style.alignItems = 'center';
+        legendHost.style.justifyContent = 'center';
+        legendHost.innerHTML = `<div class="items">${categories.map(c => `<div class="item" data-category="${c}"><span class=\"swatch\" style=\"background:${colorOf(c)}\"></span><span style=\"font-weight:500\">${c}</span></div>`).join('')}</div>`;
+      }
+
+      function drawPies(rows){
+        const { innerWidth } = updateSize();
+
+        // Catégories (triées) + échelle de couleurs harmonisée avec banner.html
+        const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory || 'Unknown'))).sort();
+        const getCatColors = (n) => {
+          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}
+          return (d3.schemeTableau10 ? d3.schemeTableau10.slice(0, n) : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'].slice(0, n));
+        };
+        const color = d3.scaleOrdinal().domain(categories).range(getCatColors(categories.length));
+        const colorOf = (cat) => color(cat || 'Unknown');
+
+        // Clear plots grid
+        plotsHost.innerHTML = '';
+
+        // Légende au-dessus, centrée
+        renderLegend(categories, colorOf);
+
+        // Rayon fixé selon la largeur cible d'une cellule (gérée par CSS)
+        const CELL_BASIS = 360; // doit correspondre à .pie-cell { flex-basis }
+        const radius = Math.max(80, Math.min(120, Math.floor(CELL_BASIS * 0.42)));
+        const innerR = Math.round(radius * DONUT_INNER_RATIO);
+        // Placement géré par CSS; ici on ne fait que l'espacement vertical minimal
+        plotsHost.style.position = 'relative';
+        plotsHost.style.marginTop = (TOP_OFFSET) + 'px';
+
+        const pie = d3.pie().sort(null).value(d => d.value).padAngle(0.02);
+        const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
+        const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
+
+        // Légende déjà rendue au-dessus
+
+        METRICS.forEach((metric, idx) => {
+          // Aggregate by category
+          const totals = new Map(); categories.forEach(c => totals.set(c, 0));
+          rows.forEach(r => { totals.set(r.eagle_cathegory, totals.get(r.eagle_cathegory) + (r[metric.key] || 0)); });
+          const values = categories.map(c => ({ category: c, value: totals.get(c) || 0 }));
+          const nonZeroValues = values.filter(v => (v.value || 0) > 0);
+          const totalSum = d3.sum(nonZeroValues, d => d.value);
+
+          // Create HTML cell container
+          const cell = document.createElement('div');
+          cell.className = 'pie-cell';
+          cell.style.width = (radius * 2) + 'px';
+          cell.style.height = (radius * 2 + SVG_VPAD * 2 + CAPTION_GAP + 24) + 'px';
+          cell.style.display = 'flex';
+          cell.style.flexDirection = 'column';
+          cell.style.alignItems = 'center';
+          cell.style.justifyContent = 'flex-start';
+          plotsHost.appendChild(cell);
+
+          // SVG pie inside cell
+          const svg = d3.select(cell).append('svg').attr('width', radius * 2).attr('height', radius * 2 + SVG_VPAD * 2).style('display','block');
+          const gCell = svg.append('g').attr('transform', `translate(${radius},${radius + SVG_VPAD})`);
+
+          if (!totalSum || totalSum <= 0 || nonZeroValues.length === 0) {
+            gCell.append('text').attr('class','nodata').attr('text-anchor','middle').attr('dy','0').text('No data for this metric');
+          } else {
+            const data = pie(nonZeroValues);
+            const percent = (v) => (v / totalSum) * 100;
+
+            // Slices
+            const slices = gCell.selectAll('path.slice').data(data).enter().append('path').attr('class','slice')
+              .attr('d', arc)
+              .attr('fill', d => colorOf(d.data.category))
+              .attr('stroke', 'var(--surface-bg)')
+              .attr('stroke-width', 1.2)
+              .attr('data-category', d => d.data.category)
+              .on('mouseenter', function(ev, d){
+                const hoveredCategory = d.data.category;
+                d3.select(container).classed('hovering', true);
+                d3.select(container).selectAll('path.slice').classed('ghost', s => (s.data && s.data.category) !== hoveredCategory);
+                // Ghost legend items that are not hovered
+                d3.select(legendHost).selectAll('.item').classed('ghost', function(){ return this.dataset && this.dataset.category !== hoveredCategory; });
+                d3.select(this).attr('stroke', 'rgba(0,0,0,0.85)').attr('stroke-width', 1);
+                const p = percent(d.data.value);
+                const catColor = colorOf(d.data.category);
+                let html = `<div style="display:flex;align-items:center;gap:8px;white-space:nowrap;"><span class=\"d3-tooltip__color-dot\" style=\"background:${catColor}\"></span><strong>${d.data.category}</strong></div>`;
+                html += `<div>${metric.name}</div>`;
+                html += `<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;"><strong>Value</strong><span style="margin-left:auto;text-align:right;">${d.data.value.toLocaleString()}</span></div>`;
+                /* Share row removed per request */
+                tipInner.innerHTML = html;
+                tip.style.opacity = '1';
+              })
+              .on('mousemove', function(ev){
+                const [mx, my] = d3.pointer(ev, container); const offsetX = 12, offsetY = 12; tip.style.transform = `translate(${Math.round(mx+offsetX)}px, ${Math.round(my+offsetY)}px)`;
+              })
+              .on('mouseleave', function(){
+                tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)';
+                d3.select(container).classed('hovering', false);
+                d3.select(container).selectAll('path.slice').classed('ghost', false);
+                d3.select(legendHost).selectAll('.item').classed('ghost', false);
+                d3.select(this).attr('stroke','var(--surface-bg)');
+              });
+
+            // Percentage labels (>= 3%)
+            gCell.selectAll('text.slice-label').data(data.filter(d => percent(d.data.value) >= 3)).enter()
+              .append('text').attr('class','slice-label').style('pointer-events','none')
+              .attr('transform', d => `translate(${arcLabel.centroid(d)})`)
+              .attr('text-anchor','middle')
+              .text(d => `${percent(d.data.value).toFixed(1)}%`);
+          }
+
+          // HTML captions under the SVG (keep design)
+          const subtitleEl = document.createElement('div'); subtitleEl.className = 'caption-subtitle'; subtitleEl.textContent = metric.title; subtitleEl.style.textAlign = 'center'; cell.appendChild(subtitleEl);
+          const titleEl = document.createElement('div'); titleEl.className = 'caption'; titleEl.textContent = metric.name; titleEl.style.textAlign = 'center'; cell.appendChild(titleEl);
+        });
+
+        // Container height flows naturally with HTML; nothing to do
+
+        // Reset global hover/ghost when leaving the plots area
+        plotsHost.onmouseleave = () => {
+          tip.style.opacity='0';
+          tip.style.transform='translate(-9999px, -9999px)';
+          d3.select(container).classed('hovering', false);
+          d3.select(container).selectAll('path.slice').classed('ghost', false);
+          d3.select(legendHost).selectAll('.item').classed('ghost', false);
+        };
+      }
+
+      async function init(){
+        try {
+          const text = await fetchFirstAvailable(CSV_PATHS);
+          const rows = parseCsv(text);
+          drawPies(rows);
+
+          // Resize handling
+          const rerender = () => drawPies(rows);
+          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(container); }
+          else { window.addEventListener('resize', rerender); }
+        } catch (err) {
+          const pre = document.createElement('pre'); pre.textContent = (err && err.message) ? err.message : String(err);
+          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap';
+          container.appendChild(pre);
+        }
+      }
+
+      init();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+
+
+
+
+

app/src/content/embeds/d3-pie.html

@@ -1,345 +1,154 @@
 <div class="d3-pie"></div>
 <style>
-  /* Layout piloté par container queries (par rapport au parent) */
-  .d3-pie { container-type: inline-size; }
-  .d3-pie .legend { width: 80%;margin: 0 auto; font-size: 12px; line-height: 1.35; color: var(--text-color); }
-  .d3-pie .legend { margin-bottom: 32px; }
-  .d3-pie .legend .items { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
-  .d3-pie .legend .item { display:flex; align-items:center; gap:8px; white-space:nowrap; }
-  .d3-pie .legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border: 1px solid var(--border-color); }
-  .d3-pie .legend .title { display:block; text-align:center; font-weight:800; margin-bottom:6px; }
-  .d3-pie .caption { font-size: 14px; font-weight: 800; fill: var(--text-color); }
-  .d3-pie .caption-subtitle { font-size: 11px; font-weight: 400; fill: var(--muted-color); }
-  .d3-pie .nodata { font-size: 12px; fill: var(--muted-color); }
+  .d3-pie { position: relative; }
+  .d3-pie .legend { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin: 8px 0 0 0; font-size:12px; color: var(--text-color); }
+  .d3-pie .legend .legend-title { font-size:12px; font-weight:700; color: var(--text-color); }
+  .d3-pie .legend .items { display:flex; flex-wrap:wrap; gap:8px 14px; }
+  .d3-pie .legend .item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
+  .d3-pie .legend .swatch { width:14px; height:14px; border-radius:3px; border:1px solid var(--border-color); }
   /* Ghost legend items when hovering slices */
   .d3-pie.hovering .legend .item.ghost { opacity: .35; }
+  /* Ghost effect on slices */
+  .d3-pie .slice { transition: opacity .15s ease; }
+  .d3-pie.hovering .slice.ghost { opacity: .25; }
+  /* Labels with contrast liseret */
   .d3-pie .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: var(--transparent-page-contrast); stroke-width: 3px; }
-  /* Effet ghost synchronisé */
-  .d3-pie .slice {
-    transition: opacity .15s ease;
-  }
-  .d3-pie.hovering .slice.ghost {
-    opacity: .25;
-  }
-  /* Layout HTML (pas JS) pour la grille et les cellules */
-  .d3-pie .plots-grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 12px 20px;
-    margin-top: 4px;
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
-  /* Par défaut (flux ~1280): 2 colonnes centrées */
-  .content-grid .d3-pie .plots-grid { width: 100%; }
-  .content-grid .d3-pie .pie-cell { flex: 0 0 calc((100% - 20px)/2); }
-  /* En wrappers larges: viser 4 colonnes si l'espace le permet */
-  .wide .d3-pie .plots-grid,
-  .full-width .d3-pie .plots-grid { width: 100%; }
-  .wide .d3-pie .pie-cell,
-  .full-width .d3-pie .pie-cell { flex: 0 0 calc((100% - 60px)/4); }
-  /* Forcer 2 colonnes dans le flux lorsque le parent ~1280px */
-  .content-grid .d3-pie .plots-grid { width: min(740px, 100%); }
-  .d3-pie .pie-cell {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 0 0 360px; /* 2 colonnes fixes dans le flux à 1280px */
-  }
-  /* 4/2/1 colonnes en fonction de la largeur du parent */
-  /* @container (min-width: 740px) {
-    .d3-pie .plots-grid { width: 740px; }
-  }
-  @container (max-width: 739.98px) {
-    .d3-pie .plots-grid { width: 100%; }
-  } */
-  @media (max-width: 500px) {
-    .d3-pie .pie-cell { flex: 0 0 100%; }
-  }
-  /* Tooltip styling aligned with filters-quad */
-  .d3-pie .d3-tooltip {
-    z-index: var(--z-elevated);
-    backdrop-filter: saturate(1.12) blur(8px);
-  }
-  .d3-pie .d3-tooltip__inner {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 220px;
-  }
-  .d3-pie .d3-tooltip__inner > div:first-child {
-    font-weight: 800;
-    letter-spacing: 0.1px;
-    margin-bottom: 0;
-  }
-  .d3-pie .d3-tooltip__inner > div:nth-child(2) {
-    font-size: 11px;
-    color: var(--muted-color);
-    display: block;
-    margin-top: -4px;
-    margin-bottom: 2px;
-    letter-spacing: 0.1px;
-  }
-  .d3-pie .d3-tooltip__inner > div:nth-child(n+3) {
-    padding-top: 6px;
-    border-top: 1px solid var(--border-color);
-  }
-  .d3-pie .d3-tooltip__color-dot {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-  }
+  .d3-pie .d3-tooltip { position:absolute; top:0; left:0; transform:translate(-9999px,-9999px); pointer-events:none; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35; border:1px solid var(--border-color); background:var(--surface-bg); color:var(--text-color); box-shadow:0 4px 24px rgba(0,0,0,.18); opacity:0; transition:opacity .12s ease; }
+  .d3-pie .d3-tooltip { z-index: var(--z-elevated); backdrop-filter: saturate(1.12) blur(8px); }
+  .d3-pie .d3-tooltip__inner { display:flex; flex-direction:column; gap:6px; min-width: 220px; text-align: left; }
+  .d3-pie .d3-tooltip__inner > div:first-child { font-weight: 800; letter-spacing: 0.1px; margin-bottom: 0; }
+  .d3-pie .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--muted-color); display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.1px; }
+  .d3-pie .d3-tooltip__inner > div:nth-child(n+3) { padding-top: 6px; border-top: 1px solid var(--border-color); }
+  .d3-pie .d3-tooltip .swatch { width:12px; height:12px; border-radius:3px; border:1px solid var(--border-color); display:inline-block; margin-right:6px; }
+  .d3-pie .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
 </style>
 <script>
   (() => {
-    const THIS_SCRIPT = document.currentScript;
     const ensureD3 = (cb) => {
       if (window.d3 && typeof window.d3.select === 'function') return cb();
       let s = document.getElementById('d3-cdn-script');
-      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      if (!s) { s = document.createElement('script'); s.id='d3-cdn-script'; s.src='https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
       const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
-      s.addEventListener('load', onReady, { once: true });
-      if (window.d3) onReady();
+      s.addEventListener('load', onReady, { once:true }); if (window.d3) onReady();
     };
 
     const bootstrap = () => {
-      const scriptEl = THIS_SCRIPT;
-      const host = scriptEl && scriptEl.parentElement;
-      let container = null;
-      if (host && host.querySelector) {
-        container = host.querySelector('.d3-pie');
-      }
-      if (!container) {
-        let sib = scriptEl && scriptEl.previousElementSibling;
-        while (sib && !(sib.classList && sib.classList.contains('d3-pie'))) {
-          sib = sib.previousElementSibling;
-        }
-        container = sib || document.querySelector('.d3-pie');
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-pie'))){
+        const cs = Array.from(document.querySelectorAll('.d3-pie')).filter(el => !(el.dataset && el.dataset.mounted==='true'));
+        container = cs[cs.length-1] || null;
       }
       if (!container) return;
-      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+      if (container.dataset) { if (container.dataset.mounted==='true') return; container.dataset.mounted='true'; }
 
-      // Tooltip
       container.style.position = container.style.position || 'relative';
       let tip = container.querySelector('.d3-tooltip'); let tipInner;
-      if (!tip) {
-        tip = document.createElement('div'); tip.className = 'd3-tooltip';
-        Object.assign(tip.style, {
-          position:'absolute', top:'0px', left:'0px', transform:'translate(-9999px, -9999px)', pointerEvents:'none',
-          padding:'10px 12px', borderRadius:'12px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)',
-          background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity:'0', transition:'opacity .12s ease',
-          zIndex: 'var(--z-elevated)', backdropFilter: 'saturate(1.12) blur(8px)'
-        });
-        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); container.appendChild(tip);
-      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+      if (!tip) { tip = document.createElement('div'); tip.className = 'd3-tooltip'; tipInner = document.createElement('div'); tipInner.className='d3-tooltip__inner'; tip.appendChild(tipInner); container.appendChild(tip); } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
 
-      // HTML scaffolding: legend and plots grid as HTML; only pies are SVG
-      const legendHost = document.createElement('div'); legendHost.className = 'legend'; container.appendChild(legendHost);
-      const plotsHost = document.createElement('div'); plotsHost.className = 'plots-grid'; container.appendChild(plotsHost);
+      const card = document.createElement('div'); card.className = 'chart-card'; container.appendChild(card);
+      const legend = document.createElement('div'); legend.className = 'legend'; legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>'; container.appendChild(legend);
 
-      // Metrics (order and labels as in the Python script)
-      const METRICS = [
-        { key:'answer_total_tokens', name:'Answer Tokens', title:'Weighted by ', letter:'a' },
-        { key:'total_samples',       name:'Number of Samples', title:'Weighted by ', letter:'b' },
-        { key:'total_turns',         name:'Number of Turns', title:'Weighted by ', letter:'c' },
-        { key:'total_images',        name:'Number of Images', title:'Weighted by ', letter:'d' }
-      ];
-
-      // CSV: load from public path
-      const CSV_PATHS = [
-        '/data/vision.csv'
-      ];
+      const svg = d3.select(card).append('svg').attr('width','100%').style('display','block');
+      const gRoot = svg.append('g');
 
+      const DEFAULT_CSV = '/data/vision.csv';
       const fetchFirstAvailable = async (paths) => {
-        for (const p of paths) {
-          try {
-            const res = await fetch(p, { cache: 'no-cache' });
-            if (res.ok) { return await res.text(); }
-          } catch (_) { /* try next */ }
-        }
+        for (const p of paths) { try { const r = await fetch(p, { cache:'no-cache' }); if (r.ok) return await r.text(); } catch(_){} }
         throw new Error('CSV not found: vision.csv');
       };
+      function parseCsv(text){
+        return d3.csvParse(text, d => ({
+          category: (d['eagle_cathegory']||d['category']||'').trim(),
+          value: +((d['total_samples']||d['value']||'0').toString().trim()) || 0
+        }));
+      }
 
-      const parseCsv = (text) => d3.csvParse(text, (d) => ({
-        subset_name: (d['subset_name']||'').trim(),
-        eagle_cathegory: (d['eagle_cathegory']||'').trim(),
-        answer_total_tokens: +((d['answer_total_tokens']||'0').toString().trim()) || 0,
-        total_samples: +((d['total_samples']||'0').toString().trim()) || 0,
-        total_turns: +((d['total_turns']||'0').toString().trim()) || 0,
-        total_images: +((d['total_images']||'0').toString().trim()) || 0
-      }));
-
-      // Layout
-      let width=800; const margin = { top: 8, right: 24, bottom: 0, left: 24 };
-      const CAPTION_GAP = 36;   // espace entre titre et donut
-      const GAP_X = 20;         // espace entre colonnes
-      const GAP_Y = 12;         // espace entre lignes
-      const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
-      const DONUT_INNER_RATIO = 0.58; // ratio du trou central (0 = pie plein, 0.5 = moitié)
-      // LEGEND_GAP supprimé: l'espacement est désormais géré en CSS via .d3-pie .legend { margin-bottom }
-      const SVG_VPAD = 16;      // padding vertical supplémentaire à l'intérieur des SVG pour éviter la coupe
-      
-      const updateSize = () => {
-        width = container.clientWidth || 800;
-        return { innerWidth: width - margin.left - margin.right };
-      };
-
-      function renderLegend(categories, colorOf){
-        legendHost.style.display = 'flex';
-        legendHost.style.alignItems = 'center';
-        legendHost.style.justifyContent = 'center';
-        legendHost.innerHTML = `<div class="items">${categories.map(c => `<div class="item" data-category="${c}"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`;
+      let width=800, height=340; const DONUT_INNER_RATIO = 0.6;
+      function updateSize(){
+        width = container.clientWidth || 800; height = Math.max(240, Math.round(width/3));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${width/2},${height/2})`);
+        return { inner: Math.min(width, height) * 0.42 };
       }
 
-      function drawPies(rows){
-        const { innerWidth } = updateSize();
+      function makeLegend(categories, colorOf){
+        const items = legend.querySelector('.items'); items.innerHTML = '';
+        categories.forEach(name => { const el = document.createElement('span'); el.className='item'; el.dataset.category=name; const sw=document.createElement('span'); sw.className='swatch'; sw.style.background=colorOf(name); const txt=document.createElement('span'); txt.textContent=name; el.appendChild(sw); el.appendChild(txt); items.appendChild(el); });
+      }
 
-        // Catégories (triées) + échelle de couleurs harmonisée avec banner.html
-        const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory || 'Unknown'))).sort();
-        const getCatColors = (n) => {
-          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch(_) {}
-          return (d3.schemeTableau10 ? d3.schemeTableau10.slice(0, n) : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'].slice(0, n));
-        };
-        const color = d3.scaleOrdinal().domain(categories).range(getCatColors(categories.length));
-        const colorOf = (cat) => color(cat || 'Unknown');
+      function render(rows){
+        const { inner } = updateSize();
+        const categories = Array.from(new Set(rows.map(r => r.category || 'Unknown'))).sort();
+        const getColors = (n) => { try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') return window.ColorPalettes.getColors('categorical', n); } catch(_){} return (window.d3 && d3.schemeTableau10) ? d3.schemeTableau10.slice(0, n) : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'].slice(0,n); };
+        const palette = getColors(categories.length);
+        const color = d3.scaleOrdinal().domain(categories).range(palette);
+        const colorOf = (c) => color(c || 'Unknown');
 
-        // Clear plots grid
-        plotsHost.innerHTML = '';
+        makeLegend(categories, colorOf);
 
-        // Légende au-dessus, centrée
-        renderLegend(categories, colorOf);
+        const totals = new Map(); categories.forEach(c => totals.set(c, 0)); rows.forEach(r => totals.set(r.category, (totals.get(r.category)||0) + (r.value||0)));
+        const values = categories.map(c => ({ category:c, value: totals.get(c)||0 })).filter(d => d.value > 0);
+        const sum = d3.sum(values, d=>d.value) || 1;
 
-        // Rayon fixé selon la largeur cible d'une cellule (gérée par CSS)
-        const CELL_BASIS = 360; // doit correspondre à .pie-cell { flex-basis }
-        const radius = Math.max(80, Math.min(120, Math.floor(CELL_BASIS * 0.42)));
+        const radius = Math.max(60, Math.min(inner, 120));
         const innerR = Math.round(radius * DONUT_INNER_RATIO);
-        // Placement géré par CSS; ici on ne fait que l'espacement vertical minimal
-        plotsHost.style.position = 'relative';
-        plotsHost.style.marginTop = (TOP_OFFSET) + 'px';
-
-        const pie = d3.pie().sort(null).value(d => d.value).padAngle(0.02);
+        const pie = d3.pie().sort(null).value(d=>d.value).padAngle(0.02);
         const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
-        const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
-
-        // Légende déjà rendue au-dessus
-
-        METRICS.forEach((metric, idx) => {
-          // Aggregate by category
-          const totals = new Map(); categories.forEach(c => totals.set(c, 0));
-          rows.forEach(r => { totals.set(r.eagle_cathegory, totals.get(r.eagle_cathegory) + (r[metric.key] || 0)); });
-          const values = categories.map(c => ({ category: c, value: totals.get(c) || 0 }));
-          const nonZeroValues = values.filter(v => (v.value || 0) > 0);
-          const totalSum = d3.sum(nonZeroValues, d => d.value);
-
-          // Create HTML cell container
-          const cell = document.createElement('div');
-          cell.className = 'pie-cell';
-          cell.style.width = (radius * 2) + 'px';
-          cell.style.height = (radius * 2 + SVG_VPAD * 2 + CAPTION_GAP + 24) + 'px';
-          cell.style.display = 'flex';
-          cell.style.flexDirection = 'column';
-          cell.style.alignItems = 'center';
-          cell.style.justifyContent = 'flex-start';
-          plotsHost.appendChild(cell);
-
-          // SVG pie inside cell
-          const svg = d3.select(cell).append('svg').attr('width', radius * 2).attr('height', radius * 2 + SVG_VPAD * 2).style('display','block');
-          const gCell = svg.append('g').attr('transform', `translate(${radius},${radius + SVG_VPAD})`);
-
-          if (!totalSum || totalSum <= 0 || nonZeroValues.length === 0) {
-            gCell.append('text').attr('class','nodata').attr('text-anchor','middle').attr('dy','0').text('No data for this metric');
-          } else {
-            const data = pie(nonZeroValues);
-            const percent = (v) => (v / totalSum) * 100;
-
-            // Slices
-            const slices = gCell.selectAll('path.slice').data(data).enter().append('path').attr('class','slice')
-              .attr('d', arc)
-              .attr('fill', d => colorOf(d.data.category))
-              .attr('stroke', 'var(--surface-bg)')
-              .attr('stroke-width', 1.2)
-              .attr('data-category', d => d.data.category)
-              .on('mouseenter', function(ev, d){
-                const hoveredCategory = d.data.category;
-                d3.select(container).classed('hovering', true);
-                d3.select(container).selectAll('path.slice').classed('ghost', s => (s.data && s.data.category) !== hoveredCategory);
-                // Ghost legend items that are not hovered
-                d3.select(legendHost).selectAll('.item').classed('ghost', function(){ return this.dataset && this.dataset.category !== hoveredCategory; });
-                d3.select(this).attr('stroke', 'rgba(0,0,0,0.85)').attr('stroke-width', 1);
-                const p = percent(d.data.value);
-                const catColor = colorOf(d.data.category);
-                let html = `<div style="display:flex;align-items:center;gap:8px;white-space:nowrap;"><span class=\"d3-tooltip__color-dot\" style=\"background:${catColor}\"></span><strong>${d.data.category}</strong></div>`;
-                html += `<div>${metric.name}</div>`;
-                html += `<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;"><strong>Value</strong><span style="margin-left:auto;text-align:right;">${d.data.value.toLocaleString()}</span></div>`;
-                /* Share row removed per request */
-                tipInner.innerHTML = html;
-                tip.style.opacity = '1';
-              })
-              .on('mousemove', function(ev){
-                const [mx, my] = d3.pointer(ev, container); const offsetX = 12, offsetY = 12; tip.style.transform = `translate(${Math.round(mx+offsetX)}px, ${Math.round(my+offsetY)}px)`;
-              })
-              .on('mouseleave', function(){
-                tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)';
-                d3.select(container).classed('hovering', false);
-                d3.select(container).selectAll('path.slice').classed('ghost', false);
-                d3.select(legendHost).selectAll('.item').classed('ghost', false);
-                d3.select(this).attr('stroke','var(--surface-bg)');
-              });
-
-            // Percentage labels (>= 3%)
-            gCell.selectAll('text.slice-label').data(data.filter(d => percent(d.data.value) >= 3)).enter()
-              .append('text').attr('class','slice-label').style('pointer-events','none')
-              .attr('transform', d => `translate(${arcLabel.centroid(d)})`)
-              .attr('text-anchor','middle')
-              .text(d => `${percent(d.data.value).toFixed(1)}%`);
-          }
-
-          // HTML captions under the SVG (keep design)
-          const subtitleEl = document.createElement('div'); subtitleEl.className = 'caption-subtitle'; subtitleEl.textContent = metric.title; subtitleEl.style.textAlign = 'center'; cell.appendChild(subtitleEl);
-          const titleEl = document.createElement('div'); titleEl.className = 'caption'; titleEl.textContent = metric.name; titleEl.style.textAlign = 'center'; cell.appendChild(titleEl);
-        });
-
-        // Container height flows naturally with HTML; nothing to do
-
-        // Reset global hover/ghost when leaving the plots area
-        plotsHost.onmouseleave = () => {
-          tip.style.opacity='0';
-          tip.style.transform='translate(-9999px, -9999px)';
-          d3.select(container).classed('hovering', false);
-          d3.select(container).selectAll('path.slice').classed('ghost', false);
-          d3.select(legendHost).selectAll('.item').classed('ghost', false);
-        };
+        const arcLabel = d3.arc().innerRadius((innerR + radius)/2).outerRadius((innerR + radius)/2);
+
+        const data = pie(values);
+        const slices = gRoot.selectAll('path.slice').data(data, d=>d.data.category);
+        slices.enter().append('path').attr('class','slice')
+          .attr('fill', d=>colorOf(d.data.category))
+          .attr('stroke','var(--surface-bg)')
+          .attr('stroke-width',1)
+          .attr('data-category', d => d.data.category)
+          .on('mouseenter', (ev, d) => {
+            const pct = (d.data.value / sum) * 100;
+            container.classList.add('hovering');
+            gRoot.selectAll('path.slice').classed('ghost', s => (s && s.data && s.data.category) !== d.data.category);
+            try { const items = legend.querySelectorAll('.item'); items.forEach(it => it.classList.toggle('ghost', it.dataset.category !== d.data.category)); } catch(_) {}
+            const colorSw = colorOf(d.data.category);
+            tipInner.innerHTML = `<div style="display:flex;align-items:center;gap:8px;white-space:nowrap;"><span class=\"swatch\" style=\"background:${colorSw}\"></span><strong>${d.data.category}</strong></div>` +
+              `<div>Value</div>` +
+              `<div style=\"display:flex;align-items:center;gap:6px;white-space:nowrap;\"><strong>Total</strong><span style=\"margin-left:auto;text-align:right;\">${d.data.value.toLocaleString()} (${pct.toFixed(1)}%)</span></div>`;
+            tip.style.opacity='1';
+          })
+          .on('mousemove', (ev) => { const [mx,my] = d3.pointer(ev, container); tip.style.transform = `translate(${Math.round(mx+12)}px, ${Math.round(my+12)}px)`; })
+          .on('mouseleave', () => {
+            tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)';
+            container.classList.remove('hovering');
+            gRoot.selectAll('path.slice').classed('ghost', false);
+            try { const items = legend.querySelectorAll('.item'); items.forEach(it => it.classList.remove('ghost')); } catch(_) {}
+          })
+          .merge(slices)
+          .attr('d', arc)
+          .attr('fill', d=>colorOf(d.data.category));
+        slices.exit().remove();
+
+        const labels = gRoot.selectAll('text.slice-label').data(data.filter(d => (d.data.value/sum) >= 0.03), d=>d.data.category);
+        labels.enter().append('text').attr('class','slice-label').attr('text-anchor','middle')
+          .merge(labels)
+          .attr('transform', d => `translate(${arcLabel.centroid(d)})`)
+          .text(d => `${((d.data.value/sum)*100).toFixed(1)}%`);
+        labels.exit().remove();
       }
 
-      async function init(){
+      (async () => {
         try {
-          const text = await fetchFirstAvailable(CSV_PATHS);
+          const text = await fetchFirstAvailable([DEFAULT_CSV, './assets/data/vision.csv', '../assets/data/vision.csv']);
           const rows = parseCsv(text);
-          drawPies(rows);
-
-          // Resize handling
-          const rerender = () => drawPies(rows);
-          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(container); }
-          else { window.addEventListener('resize', rerender); }
-        } catch (err) {
-          const pre = document.createElement('pre'); pre.textContent = (err && err.message) ? err.message : String(err);
-          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap';
-          container.appendChild(pre);
+          render(rows);
+          const rerender = () => render(rows);
+          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(container); } else { window.addEventListener('resize', rerender); }
+        } catch (e) {
+          const pre = document.createElement('pre'); pre.textContent = (e && e.message) ? e.message : String(e); pre.style.color='var(--danger, #b00020)'; pre.style.fontSize='12px'; pre.style.whiteSpace='pre-wrap'; container.appendChild(pre);
         }
-      }
-
-      init();
+      })();
     };
 
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+    if (document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once:true }); } else { ensureD3(bootstrap); }
   })();
 </script>
 
-
-
-

app/src/content/embeds/vibe-code-d3-embeds-directives.md

@@ -405,6 +405,52 @@ function makeLegend(seriesNames, colorFor) {
 - Axes/labels are legible at small widths.
 - Code is easy to skim: clear naming, early returns, short functions.
 
+### 14.1) Agent Checklist (operational)
+- Ensure root: one `<div .d3-xyz>` + scoped `<style>` + IIFE `<script>`
+- Gate mount with `data-mounted` and select closest previous sibling instance
+- Load D3 once via `#d3-cdn-script`; verify `window.d3.select`
+- Colors from `window.ColorPalettes` with CSS variable fallbacks
+- Legend present with visible title “Legend”; HTML-based, not SVG
+- Controls in HTML only; if metric select exists, label text must be “Metric”
+- Tooltip is a single absolute `.d3-tooltip` within the container
+- Data load public-first; implement `fetchFirstAvailable([...])` with `cache:'no-cache'`
+- Read optional HtmlEmbed `data-datafiles` and `data-config` per section 6.1
+- Responsiveness: width from container; `ResizeObserver` fallback to `window.resize`
+- Axis/tick/grid use CSS variables (`--axis-color`, `--tick-color`, `--grid-color`)
+- SVG for marks only; UI/legend/controls in HTML
+- No globals leaked; no external runtime deps besides D3/TFJS when necessary
+- Error path: append small red `<pre>` with a readable message inside container
+- Print-friendly: `svg` width 100%, height responsive, avoid heavy bitmaps
+
+### 14.2) Definition of Done (DoD)
+- Implements root structure and mounting guard
+- Uses `ColorPalettes` (with safe fallback) and CSS variables for theming
+- Legend with title “Legend” and consistent swatch style (14×14, r=3, 1px border)
+- Metric select labelled “Metric” when present; accessible markup (`<label for>`)
+- Tooltip works (show on hover, hide on leave, positioned via `d3.pointer`)
+- Public-first data loading + HtmlEmbed prop support when applicable
+- Responsive: resizes smoothly; axes and grid legible at small widths
+- No console errors; graceful error message on load failures
+- File is self‑contained; no globals; lints pass
+
+### 14.3) Prompt modèle (for the agent)
+```markdown
+You are implementing a self-contained D3 embed fragment.
+Name: d3-<type>.html (root class .d3-<type>)
+Requirements:
+- One root div + scoped style + IIFE script; no globals
+- UI in HTML (legend+controls), chart primitives in SVG
+- Legend title text exactly “Legend”; swatch 14×14, r=3, 1px border
+- If a select toggles metrics, visible label text exactly “Metric”
+- Colors via window.ColorPalettes (categorical/sequential/diverging), fallback to CSS variables or Tableau10
+- Tooltip: single .d3-tooltip inside container, HTML, positioned via d3.pointer
+- Data loading: try `/data/<file>` first, then `./assets/data/<file>`, `../assets/data/<file>`; implement fetchFirstAvailable(paths)
+- Read optional HtmlEmbed attributes `data-datafiles` and `data-config` if present (see section 6.1)
+- Responsiveness: compute width from container, use ResizeObserver; axis/tick/grid via CSS vars
+- Error handling: append small red <pre> inside container on failure
+Deliver one .html file with only the required elements.
+```
+
 ### 15) Example: small bar chart (structure only)
 ```html
 <div class="d3-mini-bar"></div>

tools/duplicated-spaces/README.md

@@ -0,0 +1,32 @@
+# duplicated-spaces
+
+Small Poetry project to list public Spaces created in the last N days that were duplicated from a given source Space.
+
+## Setup
+
+```bash
+cd tools/duplicated-spaces
+poetry install --no-root
+```
+
+Optionally export your token:
+
+```bash
+export HF_TOKEN=hf_xxx
+```
+
+## Usage
+
+```bash
+poetry run find-duplicated-spaces --source owner/space-name --days 14
+```
+
+Options:
+- `--source`: required. The source Space in the form `owner/space-name`.
+- `--days`: optional. Time window in days (default: 14).
+- `--token`: optional. Your HF token. Defaults to `HF_TOKEN` env var if set.
+- `--no-deep`: optional. Disable README/frontmatter fallback detection.
+
+The tool checks card metadata and may fallback to README frontmatter parsing for robustness.
+
+

tools/duplicated-spaces/duplicated_spaces/__init__.py

@@ -0,0 +1,5 @@
+from .finder import find_duplicated_spaces
+
+__all__ = ["find_duplicated_spaces"]
+
+

tools/duplicated-spaces/duplicated_spaces/cli.py

@@ -0,0 +1,69 @@
+from __future__ import annotations
+
+import argparse
+import os
+from typing import Optional
+
+from huggingface_hub import HfApi
+
+from .finder import find_duplicated_spaces
+
+
+def build_parser() -> argparse.ArgumentParser:
+    parser = argparse.ArgumentParser(
+        description="List recent Spaces duplicated from a given Space"
+    )
+    parser.add_argument(
+        "--source",
+        required=True,
+        help="Source Space in the form 'owner/space-name'",
+    )
+    parser.add_argument(
+        "--days",
+        type=int,
+        default=14,
+        help="Time window in days (default: 14)",
+    )
+    parser.add_argument(
+        "--token",
+        default=os.environ.get("HF_TOKEN"),
+        help="Hugging Face token (optional). Defaults to HF_TOKEN env var if set.",
+    )
+    parser.add_argument(
+        "--no-deep",
+        action="store_true",
+        help=(
+            "Disable deep detection (README/frontmatter fetch) when card metadata is missing."
+        ),
+    )
+    return parser
+
+
+def main(argv: Optional[list[str]] = None) -> None:
+    parser = build_parser()
+    args = parser.parse_args(argv)
+
+    api = HfApi(token=args.token)
+    duplicated = find_duplicated_spaces(
+        api=api,
+        source=args.source,
+        days=args.days,
+        deep_detection=not args.no_deep,
+    )
+
+    if duplicated:
+        print(
+            f"Found {len(duplicated)} Space(s) duplicated from {args.source} in the last {args.days} days:\n"
+        )
+        for sid in duplicated:
+            print(f"https://huggingface.co/spaces/{sid}")
+    else:
+        print(
+            f"No public Spaces duplicated from {args.source} in the last {args.days} days."
+        )
+
+
+if __name__ == "__main__":
+    main()
+
+

app/scripts/find_duplicated_spaces.py → tools/duplicated-spaces/duplicated_spaces/finder.py

@@ -1,22 +1,10 @@
-#!/usr/bin/env python3
-"""
-Find Spaces created in the last N days that were duplicated from a given source Space.
-
-This script uses the public Hugging Face Hub APIs via `huggingface_hub` and optionally
-falls back to reading README frontmatter for robustness.
-
-Usage:
-  python app/scripts/find_duplicated_spaces.py --source owner/space-name [--days 14] [--token <hf_token>] [--no-deep]
+from __future__ import annotations
 
-Notes:
-  - Comments are in English as requested.
-  - Chat responses remain in French.
+"""
+Core logic to find Spaces duplicated from a given source within a time window.
+Comments are in English (per user preference for code comments).
 """
 
-from __future__ import annotations
-
-import argparse
-import os
 from datetime import datetime, timedelta, timezone
 from typing import Iterable, List, Optional
 
@@ -24,39 +12,8 @@ import requests
 from huggingface_hub import HfApi
 
 
-def parse_args() -> argparse.Namespace:
-    parser = argparse.ArgumentParser(
-        description="List recent Spaces duplicated from a given Space"
-    )
-    parser.add_argument(
-        "--source",
-        required=True,
-        help="Source Space in the form 'owner/space-name'",
-    )
-    parser.add_argument(
-        "--days",
-        type=int,
-        default=14,
-        help="Time window in days (default: 14)",
-    )
-    parser.add_argument(
-        "--token",
-        default=os.environ.get("HF_TOKEN"),
-        help="Hugging Face token (optional). Defaults to HF_TOKEN env var if set.",
-    )
-    parser.add_argument(
-        "--no-deep",
-        action="store_true",
-        help=(
-            "Disable deep detection (README/frontmatter fetch) when card metadata is missing."
-        ),
-    )
-    return parser.parse_args()
-
-
 def iso_to_datetime(value: str) -> datetime:
     """Parse ISO 8601 timestamps returned by the Hub to aware datetime in UTC."""
-    # Examples: "2024-09-01T12:34:56.789Z" or without microseconds
     try:
         dt = datetime.strptime(value, "%Y-%m-%dT%H:%M:%S.%fZ")
     except ValueError:
@@ -66,7 +23,6 @@ def iso_to_datetime(value: str) -> datetime:
 
 def readme_frontmatter_duplicated_from(space_id: str) -> Optional[str]:
     """Fetch README raw and try to extract duplicated_from from YAML frontmatter."""
-    # Raw README for Spaces is accessible at /spaces/{id}/raw/README.md
     url = f"https://huggingface.co/spaces/{space_id}/raw/README.md"
     try:
         resp = requests.get(url, timeout=10)
@@ -76,43 +32,31 @@ def readme_frontmatter_duplicated_from(space_id: str) -> Optional[str]:
     except requests.RequestException:
         return None
 
-    # Very light-weight frontmatter scan to find a line like: duplicated_from: owner/space
-    # Do not parse full YAML to avoid extra deps.
     lines = text.splitlines()
     in_frontmatter = False
     for line in lines:
         if line.strip() == "---":
             in_frontmatter = not in_frontmatter
-            # Stop if we closed the frontmatter without finding the key.
             if not in_frontmatter:
                 break
             continue
         if in_frontmatter and line.strip().startswith("duplicated_from:"):
-            # Extract value after colon, trim quotes/spaces
             value = line.split(":", 1)[1].strip().strip("'\"")
             return value or None
     return None
 
 
 def get_recent_spaces(api: HfApi, days: int) -> Iterable:
-    """Yield Spaces created within the last `days` days, iterating newest first.
-
-    Tries to sort by creation date descending; falls back gracefully if not supported.
-    """
+    """Yield Spaces created within the last `days` days, iterating newest first if possible."""
     cutoff = datetime.now(timezone.utc) - timedelta(days=days)
-
-    # Primary attempt: request spaces sorted by creation date (newest first)
     try:
         spaces_iter = api.list_spaces(full=True, sort="created", direction=-1)
     except TypeError:
-        # Fallback: no sort support in current huggingface_hub; get a reasonably large list
-        # Note: This may include items older than the cutoff; we'll filter below.
         spaces_iter = api.list_spaces(full=True)
 
     for space in spaces_iter:
         created_at_raw = getattr(space, "created_at", None) or getattr(space, "createdAt", None)
         if not created_at_raw:
-            # If missing, include conservatively
             yield space
             continue
         created_at = (
@@ -121,23 +65,11 @@ def get_recent_spaces(api: HfApi, days: int) -> Iterable:
         if created_at >= cutoff:
             yield space
         else:
-            # If we know the iteration is sorted by creation desc, we can break early
-            # Only do that when we explicitly asked for sort="created"
-            if "spaces_iter" in locals():
-                try:
-                    # If we reached here under the sorted branch, short-circuit
-                    # by checking if the generator came from the sorted call
-                    _ = api  # keep linter calm
-                except Exception:
-                    pass
-            # We can't be certain the iterator is sorted in fallback; just continue
-            # without breaking to avoid missing any items.
+            # We cannot guarantee sort order when falling back; continue to be safe.
             continue
 
 
-def find_duplicated_spaces(
-    api: HfApi, source: str, days: int, deep_detection: bool
-) -> List[str]:
+def find_duplicated_spaces(api: HfApi, source: str, days: int, deep_detection: bool) -> List[str]:
     """Return list of Space IDs that were duplicated from `source` within `days`."""
     source = source.strip().strip("/ ")
     results: List[str] = []
@@ -146,7 +78,6 @@ def find_duplicated_spaces(
         if not space_id:
             continue
 
-        # Check card metadata first
         card = getattr(space, "cardData", None) or getattr(space, "card_data", None)
         duplicated_from_value: Optional[str] = None
         if isinstance(card, dict):
@@ -155,7 +86,6 @@ def find_duplicated_spaces(
                     duplicated_from_value = card[key].strip().strip("/ ")
                     break
 
-        # Optional deep detection via README frontmatter
         if not duplicated_from_value and deep_detection:
             duplicated_from_value = readme_frontmatter_duplicated_from(space_id)
             if duplicated_from_value:
@@ -167,30 +97,3 @@ def find_duplicated_spaces(
     return results
 
 
-def main() -> None:
-    args = parse_args()
-    api = HfApi(token=args.token)
-
-    duplicated = find_duplicated_spaces(
-        api=api,
-        source=args.source,
-        days=args.days,
-        deep_detection=not args.no_deep,
-    )
-
-    if duplicated:
-        print(
-            f"Found {len(duplicated)} Space(s) duplicated from {args.source} in the last {args.days} days:\n"
-        )
-        for sid in duplicated:
-            print(f"https://huggingface.co/spaces/{sid}")
-    else:
-        print(
-            f"No public Spaces duplicated from {args.source} in the last {args.days} days."
-        )
-
-
-if __name__ == "__main__":
-    main()
-
-

tools/duplicated-spaces/pyproject.toml

@@ -0,0 +1,23 @@
+[tool.poetry]
+name = "duplicated-spaces"
+version = "0.1.0"
+description = "Find recent Hugging Face Spaces duplicated from a given Space"
+authors = ["thibaud frere <>"]
+readme = "README.md"
+packages = [{ include = "duplicated_spaces" }]
+
+[tool.poetry.dependencies]
+python = ">=3.9,<4.0"
+huggingface_hub = "^0.24.0"
+requests = "^2.31.0"
+
+[tool.poetry.group.dev.dependencies]
+
+[tool.poetry.scripts]
+find-duplicated-spaces = "duplicated_spaces.cli:main"
+
+[build-system]
+requires = ["poetry-core>=1.7.0"]
+build-backend = "poetry.core.masonry.api"
+
+