update trackio redesign experiment

app/.astro/astro/content.d.ts

@@ -230,6 +230,11 @@ declare module 'astro:content' {
 
 	type DataEntryMap = {
 		"assets": {
+"data/llm_benchmarks": {
+	id: "data/llm_benchmarks";
+  collection: "assets";
+  data: any
+};
 "data/mnist-variant-model": {
 	id: "data/mnist-variant-model";
   collection: "assets";

app/src/components/Hero.astro

@@ -128,9 +128,9 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     <div class="meta-container-cell meta-container-cell--pdf">
       <h3>PDF</h3>
       <p>
-        <a class="button" href={`/${pdfFilename}`} download={pdfFilename} aria-label={`Download PDF ${pdfFilename}`}>
+        <button class="button" href={`/${pdfFilename}`} download={pdfFilename} aria-label={`Download PDF ${pdfFilename}`}>
           Download PDF
-        </a>
+        </button>
       </p>
     </div>
   </div>

app/src/components/TrackioWrapper.astro

@@ -164,7 +164,7 @@ import Trackio from './trackio/Trackio.svelte';
     align-items: center;
     margin-bottom: 16px;
     padding: 12px 0px;
-    border-bottom: 1px solid var(--border-color);
+    /* border-bottom: 1px solid var(--border-color); */
     gap: 16px;
     flex-wrap: nowrap;
   }
@@ -259,7 +259,10 @@ import Trackio from './trackio/Trackio.svelte';
   
   .trackio-container {
     width: 100%;
-    margin-top: 40px;
+    margin-top: 10px;
+    border: 1px solid var(--border-color);
+    padding: 24px 12px;
+
   }
   
   @media (max-width: 768px) {

app/src/components/trackio/Cell.svelte

@@ -1,8 +1,9 @@
 <script>
-  import * as d3 from 'd3';
-  import { onMount, onDestroy } from 'svelte';
-  import Tooltip from './Tooltip.svelte';
-  import { formatAbbrev, formatLogTick, generateSmartTicks, generateLogTicks } from './chart-utils.js';
+  import ChartRenderer from './ChartRenderer.svelte';
+  import ChartTooltip from './ChartTooltip.svelte';
+  import { formatAbbrev } from './chart-utils.js';
+  
+  // Props
   export let metricKey;
   export let titleText;
   export let wide = false;
@@ -12,554 +13,171 @@
   export let smoothing = false;
   export let metricData = {}; // { run -> [{step,value}] } - smoothed data
   export let rawMetricData = {}; // { run -> [{step,value}] } - original data for background when smoothing
-  export let colorForRun = (name)=> '#999';
+  export let colorForRun = (name) => '#999';
   export let hostEl = null;
 
-  let root; let body;
-  let svg, gRoot, gGrid, gGridDots, gAxes, gAreas, gLines, gPoints, gHover;
-  let xScale, yScale, lineGen;
-  let tooltip, tipTarget;
-  let cleanup;
-  const MARGIN = { top: 10, right: 20, bottom: 46, left: 44 };
-
-  // Reactive rendering when variant or metricData changes
-  $: {
-    if (variant || metricData) {
-      // Add a small delay to ensure CSS variables are updated
-      setTimeout(() => render(), 10);
-    }
-  }
+  // Navigation props
+  export let currentIndex = 0;
+  export let onOpenModal = null;
 
-  // Utility function to get transition duration based on fullscreen state
-  function getTransitionDuration(normalDuration = 160) {
-    const fullscreenOverlay = root?.closest('.trackio-fullscreen-overlay');
-    return (fullscreenOverlay && fullscreenOverlay.classList.contains('transitioning')) ? 0 : normalDuration;
-  }
-
-  function ensureSvg(){
-    if (svg || !body) return;
-    const d3body = d3.select(body);
-    svg = d3body.append('svg').attr('width','100%').style('display','block');
-    gRoot = svg.append('g');
-    gGrid = gRoot.append('g').attr('class','grid');
-    gGridDots = gRoot.append('g').attr('class','grid-dots');
-    gAxes = gRoot.append('g').attr('class','axes');
-    gAreas = gRoot.append('g').attr('class','areas');
-    gLines = gRoot.append('g').attr('class','lines');
-    gPoints = gRoot.append('g').attr('class','points');
-    gHover = gRoot.append('g').attr('class','hover');
-    // Initialize scales - X scale will be updated based on logScaleX prop
-    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear(); 
-    yScale = d3.scaleLinear();
-    lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
-    // Create tooltip container in the trackio parent to inherit CSS variables
-    const trackioEl = root.closest('.trackio') || root;
-    tipTarget = document.createElement('div'); 
-    tipTarget.className = 'tip-host'; 
-    trackioEl.appendChild(tipTarget);
-    tooltip = new Tooltip({ target: tipTarget, props: { visible:false, x:-9999, y:-9999, title:'', subtitle:'', entries:[] } });
-  }
-
-
-  function updateLayout(hoverSteps, themeVars = {}){
-    const { axisStroke = 'var(--trackio-chart-axis-stroke)', axisText = 'var(--trackio-chart-axis-text)', gridStroke = 'var(--trackio-chart-grid-stroke)' } = themeVars;
-    
-    // Get font-family from computed style  
-    const computedStyle = getComputedStyle(root);
-    const fontFamily = computedStyle.getPropertyValue('--trackio-font-family').trim() || 'ui-monospace, SFMono-Regular, Menlo, monospace';
-    const rect = root.getBoundingClientRect(); 
-    let width = Math.max(1, Math.round(rect && rect.width ? rect.width : (root.clientWidth || 800)));
-    
-    // Check if we're in fullscreen mode
-    const isFullscreen = root.closest('.trackio-fullscreen-modal');
-    let height;
-    
-    if (isFullscreen) {
-      // Use available height minus header in fullscreen
-      // Use the body element's actual size
-      const bodyElement = body.parentElement; // cell-body
-      if (bodyElement) {
-        const bodyRect = bodyElement.getBoundingClientRect();
-        height = Math.max(400, Math.floor(bodyRect.height - 20)); // Small margin
-      } else {
-        height = 600; // Fallback
-      }
-    } else {
-      height = Number(root.getAttribute('data-height')) || 180;
-    }
-    if (isFullscreen) {
-      // In fullscreen, stretch to fill completely (no aspect ratio preservation)
-      svg.attr('width', '100%').attr('height', '100%').attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','none');
-    } else {
-      // Normal mode, preserve aspect ratio
-    svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
-    }
-    const innerWidth = width - MARGIN.left - MARGIN.right; const innerHeight = height - MARGIN.top - MARGIN.bottom;
-    gRoot.attr('transform', `translate(${MARGIN.left},${MARGIN.top})`);
-    xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
-
-    gAxes.selectAll('*').remove();
-    
-    const minXTicks = 5;
-    const maxXTicks = Math.max(minXTicks, Math.min(12, Math.floor(innerWidth / 70)));
-    let xTicksForced = [];
-    
-    let logTickData = null;
-    if (logScaleX) {
-      // Use improved logarithmic tick generation
-      logTickData = generateLogTicks(hoverSteps, minXTicks, maxXTicks, innerWidth, xScale);
-      xTicksForced = logTickData.major;
-    } else if (Array.isArray(hoverSteps) && hoverSteps.length) {
-      const tickIndices = generateSmartTicks(hoverSteps, minXTicks, maxXTicks, innerWidth);
-      xTicksForced = tickIndices;
-    } else {
-      // Fallback for continuous scales
-      const makeTicks = (scale, approx) => { 
-        const arr = scale.ticks(approx); 
-        const dom = scale.domain(); 
-        if (arr.length === 0 || arr[0] !== dom[0]) arr.unshift(dom[0]); 
-        if (arr[arr.length-1] !== dom[dom.length-1]) arr.push(dom[dom.length-1]); 
-        return Array.from(new Set(arr)); 
-      };
-      xTicksForced = makeTicks(xScale, maxXTicks);
-    }
-    const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
-    const yCount = maxYTicks; const yDom = yScale.domain();
-    const yTicksForced = (yCount <= 2) ? [yDom[0], yDom[1]] : Array.from({length:yCount}, (_,i)=> yDom[0] + ((yDom[1]-yDom[0])*(i/(yCount-1))));
-
-    gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(xScale).tickValues(xTicksForced).tickFormat((val)=>{ 
-      // For log scale, val is the actual step value; for linear scale, val might be an index
-      const displayVal = logScaleX ? val : (Array.isArray(hoverSteps) && hoverSteps[val] != null ? hoverSteps[val] : val); 
-      return logScaleX ? formatLogTick(displayVal, true) : formatAbbrev(displayVal); 
-    }))
-      .call(g=>{ 
-        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
-        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily)
-          .style('font-weight', d => {
-            // Make powers of 10 bolder in log scale
-            if (!logScaleX) return 'normal';
-            const log10 = Math.log10(Math.abs(d));
-            const isPowerOf10 = Math.abs(log10 % 1) < 0.01;
-            return isPowerOf10 ? '600' : 'normal';
-          }); 
-      });
-    gAxes.append('g').call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v)=>formatAbbrev(v)))
-      .call(g=>{ 
-        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
-        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily); 
-      });
-
-    // Add minor ticks for logarithmic scale
-    if (logScaleX && logTickData && logTickData.minor.length > 0) {
-      gAxes.append('g').attr('class', 'minor-ticks').attr('transform', `translate(0,${innerHeight})`)
-        .selectAll('line.minor-tick')
-        .data(logTickData.minor)
-        .join('line')
-        .attr('class', 'minor-tick')
-        .attr('x1', d => xScale(d))
-        .attr('x2', d => xScale(d))
-        .attr('y1', 0)
-        .attr('y2', 4) // Smaller than major ticks
-        .style('stroke', 'var(--trackio-chart-axis-stroke)')
-        .style('stroke-opacity', 0.4)
-        .style('stroke-width', 0.5);
+  // Component state
+  let root;
+  let chartRenderer; // Reference to ChartRenderer component
+  
+  // Tooltip state
+  let tooltipVisible = false;
+  let tooltipX = -9999;
+  let tooltipY = -9999;
+  let tooltipTitle = '';
+  let tooltipSubtitle = '';
+  let tooltipEntries = [];
+  
+  // Handlers
+  function openFullscreen() {
+    if (onOpenModal) {
+      onOpenModal(currentIndex);
     }
-
-
-    // Grid rendering is now handled in render() function based on theme
-    const labelY = innerHeight + Math.max(20, Math.min(36, MARGIN.bottom - 12));
-    
-    // Main "Steps" label (normal text)
-    // Add (log) to Steps text when log scale is enabled
-    const stepsText = logScaleX ? 'Steps (log)' : 'Steps';
-    
-    gAxes.append('text')
-      .attr('class','x-axis-label')
-      .attr('x', innerWidth/2)
-      .attr('y', labelY)
-      .style('fill', 'var(--trackio-chart-axis-text)')
-      .attr('text-anchor','middle')
-      .style('font-size','9px')
-      .style('opacity','.9')
-      .style('letter-spacing','.5px')
-      .style('text-transform','uppercase')
-      .style('font-weight','500')
-      .style('font-family', fontFamily)
-      .text(stepsText);
-
-    return { innerWidth, innerHeight, xTicksForced, yTicksForced };
   }
-
-  function render(){
-    ensureSvg();
-    if (!svg || !gRoot) return; // Wait for SVG to be ready
-    const runs = Object.keys(metricData||{});
-    const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
-    if (!hasAny) { gRoot.style('display','none'); return; } gRoot.style('display', null);
-
-    // Get theme variables from CSS - try parent element if root doesn't have the variables
-    let computedStyle = getComputedStyle(root);
-    let gridType = computedStyle.getPropertyValue('--trackio-chart-grid-type').trim().replace(/['"]/g, '');
-    
-    // If not found on root, try parent trackio element
-    if (!gridType) {
-      const trackioEl = root?.closest('.trackio');
-      if (trackioEl) {
-        computedStyle = getComputedStyle(trackioEl);
-        gridType = computedStyle.getPropertyValue('--trackio-chart-grid-type').trim().replace(/['"]/g, '');
-      }
-    }
-    
-    const axisStroke = computedStyle.getPropertyValue('--trackio-chart-axis-stroke').trim();
-    const axisText = computedStyle.getPropertyValue('--trackio-chart-axis-text').trim();
-    const gridStroke = computedStyle.getPropertyValue('--trackio-chart-grid-stroke').trim();
-    const gridOpacity = computedStyle.getPropertyValue('--trackio-chart-grid-opacity').trim();
-
-    console.log('🎯 Cell render - variant:', variant, 'gridType:', gridType, 'trackio classes:', root?.closest('.trackio')?.className);
-
-    let minStep=Infinity, maxStep=-Infinity, minVal=Infinity, maxVal=-Infinity;
-    runs.forEach(r => { (metricData[r]||[]).forEach(pt => { minStep=Math.min(minStep, pt.step); maxStep=Math.max(maxStep, pt.step); minVal=Math.min(minVal, pt.value); maxVal=Math.max(maxVal, pt.value); }); });
-    const isAccuracy = /accuracy/i.test(metricKey); const isLoss = /loss/i.test(metricKey);
-    if (isAccuracy) yScale.domain([0,1]).nice(); else if (isLoss && normalizeLoss) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
-    const stepSet = new Set(); runs.forEach(r => (metricData[r]||[]).forEach(v => stepSet.add(v.step)));
-    const hoverSteps = Array.from(stepSet).sort((a,b)=>a-b); 
-    
-    // Update X scale based on logScaleX prop
-    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear();
-    
-    let stepIndex = null; // Declare stepIndex in the proper scope
-    
-    if (logScaleX) {
-      // For log scale, use actual step values (must be > 0)
-      const minStep = Math.max(1, Math.min(...hoverSteps));
-      const maxStep = Math.max(...hoverSteps);
-      xScale.domain([minStep, maxStep]);
-      lineGen.x(d => xScale(d.step));
-    } else {
-      // For linear scale, use indices as before
-      stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
-      xScale.domain([0, Math.max(0, hoverSteps.length - 1)]);
-      lineGen.x(d => xScale(stepIndex.get(d.step)));
-    }
-    const normalizeY = (v) => (isLoss && normalizeLoss ? ((maxVal > minVal) ? (v - minVal) / (maxVal - minVal) : 0) : v); lineGen.y(d => yScale(normalizeY(d.value)));
-    const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(hoverSteps, { axisStroke, axisText, gridStroke });
-
-    // Conditional grid rendering based on theme
-    // Force detection based on variant prop if CSS variables fail
-    const shouldUseDots = (gridType === 'dots') || (variant === 'oblivion');
-    
-    if (shouldUseDots) {
-      // Oblivion-style: Grid as dots at intersections
-      gGrid.selectAll('*').remove(); // Clear line grid
-      gGridDots.selectAll('*').remove(); 
-      const gridPoints = []; 
-      const yMin = yScale.domain()[0]; 
-      const desiredCols = 24; 
-      const xGridStride = Math.max(1, Math.ceil(hoverSteps.length/desiredCols)); 
-      const xGridIdx = []; 
-      for (let idx = 0; idx < hoverSteps.length; idx += xGridStride) xGridIdx.push(idx); 
-      if (xGridIdx[xGridIdx.length-1] !== hoverSteps.length-1) xGridIdx.push(hoverSteps.length-1); 
-      xGridIdx.forEach(i => { 
-        yTicksForced.forEach(t => { 
-          if (i !== 0 && (yMin == null || t !== yMin)) gridPoints.push({ sx: i, ty: t }); 
-        }); 
-      }); 
-      gGridDots.selectAll('circle.grid-dot')
-        .data(gridPoints)
-        .join('circle')
-        .attr('class', 'grid-dot')
-        .attr('cx', d => xScale(d.sx))
-        .attr('cy', d => yScale(d.ty))
-        .attr('r', 1.25)
-        .style('fill', 'var(--trackio-chart-grid-stroke)')
-        .style('fill-opacity', 'var(--trackio-chart-grid-opacity)');
-    } else {
-      // Classic-style: Grid as lines
-      gGridDots.selectAll('*').remove(); // Clear dot grid
-      gGrid.selectAll('*').remove();
-      // Horizontal grid lines
-      gGrid.selectAll('line.horizontal')
-        .data(yTicksForced)
-        .join('line')
-        .attr('class', 'horizontal')
-        .attr('x1', 0).attr('x2', innerWidth)
-        .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
-        .style('stroke', 'var(--trackio-chart-grid-stroke)')
-        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
-        .attr('stroke-width', 1);
-      // Vertical grid lines
-      gGrid.selectAll('line.vertical')
-        .data(xTicksForced)
-        .join('line')
-        .attr('class', 'vertical')
-        .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
-        .attr('y1', 0).attr('y2', innerHeight)
-        .style('stroke', 'var(--trackio-chart-grid-stroke)')
-        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
-        .attr('stroke-width', 1);
-    }
-
-    const series = runs.map(r => ({ run:r, color: colorForRun(r), values: (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
-    
-    // Draw background lines (original data) when smoothing is enabled
-    if (smoothing && rawMetricData && Object.keys(rawMetricData).length > 0) {
-      const rawSeries = runs.map(r => ({ run:r, color: colorForRun(r), values: (rawMetricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
-      const rawPaths = gLines.selectAll('path.raw-line').data(rawSeries, d=>d.run + '-raw'); 
-      rawPaths.enter().append('path').attr('class','raw-line').attr('data-run', d=>d.run).attr('fill','none').attr('stroke-width',1).attr('opacity',0.9).attr('stroke', d=>d.color).style('pointer-events','none').attr('d', d=> lineGen(d.values)); 
-      rawPaths.transition().duration(getTransitionDuration(160)).attr('stroke', d=>d.color).attr('opacity',0.4).attr('d', d=> lineGen(d.values));
-      rawPaths.exit().remove();
-    } else {
-      // Remove raw lines when smoothing is disabled
-      gLines.selectAll('path.raw-line').remove();
-    }
+  
+  function handleChartHover(data) {
+    console.log('🎯 Cell.svelte handleChartHover called with:', data);
+    const { step, entries, position } = data;
     
-    // Draw main lines (smoothed or normal data)
-    const paths = gLines.selectAll('path.run-line').data(series, d=>d.run); 
-    paths.enter().append('path').attr('class','run-line').attr('data-run', d=>d.run).attr('fill','none').attr('stroke-width',1.5).attr('opacity',0.9).attr('stroke', d=>d.color).style('pointer-events','none').attr('d', d=> lineGen(d.values)); 
-    paths.transition().duration(getTransitionDuration(160)).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=> lineGen(d.values));
-    paths.exit().remove();
-    const allPoints = series.flatMap(s => s.values.map(v => ({ run:s.run, color:s.color, step:v.step, value:v.value })));
-    const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d=> `${d.run}-${d.step}`); 
-    ptsSel.enter().append('circle').attr('class','pt').attr('data-run', d=>d.run).attr('r',0).attr('fill', d=>d.color).attr('fill-opacity',0.6).attr('stroke','none').style('pointer-events','none')
-      .attr('cx', d=> logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
-      .attr('cy', d=> yScale(normalizeY(d.value)))
-      .merge(ptsSel)
-      .attr('cx', d=> logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
-      .attr('cy', d=> yScale(normalizeY(d.value))); 
-    ptsSel.exit().remove();
-
-    gHover.selectAll('*').remove(); const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight).style('pointer-events','all'); const hoverLine = gHover.append('line').style('stroke','var(--text-color)').attr('stroke-opacity',0.25).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none').style('pointer-events','none'); let hideTipTimer=null;
-    function onMove(ev){ 
-      if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer=null; } 
-      const [mx,my]=d3.pointer(ev, overlay.node()); 
+    if (entries.length) {
+      // Use global mouse coordinates for tooltip positioning
+      const trackioEl = hostEl.closest('.trackio');
+      const trackioRect = trackioEl.getBoundingClientRect();
       
-      let nearest, xpx;
-      if (logScaleX) {
-        // For log scale, find the closest actual step value
-        const mouseStepValue = xScale.invert(mx);
-        let minDist = Infinity;
-        let closestStep = hoverSteps[0];
-        hoverSteps.forEach(step => {
-          const dist = Math.abs(Math.log(step) - Math.log(mouseStepValue));
-          if (dist < minDist) {
-            minDist = dist;
-            closestStep = step;
-          }
-        });
-        nearest = closestStep;
-        xpx = xScale(nearest);
-      } else {
-        // For linear scale, use index-based approach as before
-        const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); 
-        nearest = hoverSteps[idx]; 
-        xpx = xScale(idx);
-      }
+      // Position tooltip near global cursor with small offset
+      const relativeX = (position.globalX || position.x) - trackioRect.left + 15;
+      const relativeY = (position.globalY || position.y) - trackioRect.top + 15;
       
-      hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); 
-      try { hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_) {} 
-      const entries = series.map(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.get(nearest); return { run:s.run, color:s.color, pt }; }).filter(e => e.pt && e.pt.value!=null).sort((a,b)=> a.pt.value - b.pt.value); 
-      const fmt=(vv)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4)); 
+      tooltipVisible = true;
+      tooltipX = Math.round(relativeX);
+      tooltipY = Math.round(relativeY);
+      tooltipTitle = `Step ${formatAbbrev(step)}`;
+      tooltipSubtitle = titleText;
+      tooltipEntries = entries;
       
-      // Calculate position relative to trackio container
-      const trackioEl = root.closest('.trackio') || root;
-      const rootRect = root.getBoundingClientRect();
-      const trackioRect = trackioEl.getBoundingClientRect();
-      const relativeX = rootRect.left - trackioRect.left + mx + 12 + MARGIN.left;
-      const relativeY = rootRect.top - trackioRect.top + my + 12 + MARGIN.top;
-      tooltip.$set({ visible:true, x: Math.round(relativeX), y: Math.round(relativeY), title:`Step ${formatAbbrev(nearest)}`, subtitle: titleText, entries: entries.map(e=> ({ color:e.color, name:e.run, valueText: fmt(e.pt.value) })) }); 
-      try { gPoints.selectAll('circle.pt').transition().duration(getTransitionDuration(120)).ease(d3.easeCubicOut).attr('r', d => (d && d.step === nearest ? 4 : 0)); } catch(_) {} 
+      console.log('📍 Tooltip state updated:', { tooltipVisible, tooltipX, tooltipY, tooltipTitle, entriesCount: tooltipEntries.length });
+      
+      // Dispatch to host for cross-cell synchronization
+      try { 
+        hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-step', { 
+          detail: { step, sourceMetric: metricKey } 
+        })); 
+      } catch(_) {}
     }
-    function onLeave(){ hideTipTimer = setTimeout(()=>{ tooltip.$set({ visible:false, x:-9999, y:-9999 }); hoverLine.style('display','none'); try { hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_) {} try { gPoints.selectAll('circle.pt').transition().duration(getTransitionDuration(120)).ease(d3.easeCubicOut).attr('r', 0); } catch(_) {} }, 80); }
-    overlay.on('mousemove', onMove).on('mouseleave', onLeave);
-
-    // External hover
-    root.__showExternalStep = (stepVal) => { 
-      if (stepVal==null) { 
-        hoverLine.style('display','none'); 
-        try { gPoints.selectAll('circle.pt').attr('r',0); } catch(_) {} 
-        return; 
-      } 
-      let xpx;
-      if (logScaleX) {
-        xpx = xScale(stepVal);
-      } else {
-        const idx = stepIndex ? stepIndex.get(stepVal) : null;
-        if (idx == null) { hoverLine.style('display','none'); return; }
-        xpx = xScale(idx);
-      }
-      hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); 
-      try { gPoints.selectAll('circle.pt').attr('r', d => (d && d.step === stepVal ? 4 : 0)); } catch(_) {} 
-    };
-    root.__clearExternalStep = () => { hoverLine.style('display','none'); try { gPoints.selectAll('circle.pt').attr('r',0); } catch(_) {} };
-    if (!root.__syncAttached && hostEl) { hostEl.addEventListener('trackio-hover-step', (ev)=>{ const d=ev&&ev.detail; if (!d) return; root.__showExternalStep && root.__showExternalStep(d.step); }); hostEl.addEventListener('trackio-hover-clear', ()=>{ root.__clearExternalStep && root.__clearExternalStep(); }); root.__syncAttached = true; }
   }
-
-  function schedule(){ try { render(); } catch(_) {} }
-  onMount(()=>{ schedule(); const ro = (window.ResizeObserver ? new ResizeObserver(()=> schedule()) : null); ro && ro.observe(root); cleanup = ()=>{ ro && ro.disconnect(); }; });
-  onDestroy(()=>{ cleanup && cleanup(); });
-
-  // Re-render when inputs change so tooltip/overlay are available once data arrives
-  $: { 
-    metricData; 
-    rawMetricData;
-    normalizeLoss; 
-    variant; 
-    logScaleX;
-    smoothing;
-    colorForRun; 
-    // Debug log
-    if (typeof window !== 'undefined') {
-      console.log(`Cell re-rendering for ${metricKey}, variant: ${variant}, logScaleX: ${logScaleX}, smoothing: ${smoothing}`);
-    }
-    schedule(); 
+  
+  function handleChartLeave() {
+    tooltipVisible = false;
+    tooltipX = -9999;
+    tooltipY = -9999;
+    
+    // Dispatch leave event
+    try { 
+      hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-clear', {
+        detail: { sourceMetric: metricKey }
+      })); 
+    } catch(_) {} 
   }
-
-  // Fullscreen functionality
-  function openFullscreen() {
-    if (!root) return;
+  
+  // External hover synchronization
+  function setupExternalHover() {
+    if (!root || root.__syncAttached || !hostEl) return;
     
-    // Create overlay if it doesn't exist
-    let overlay = document.querySelector('.trackio-fullscreen-overlay');
-    if (!overlay) {
-      overlay = document.createElement('div');
-      overlay.className = 'trackio-fullscreen-overlay';
-      
-      const modal = document.createElement('div');
-      modal.className = 'trackio-fullscreen-modal';
-      
-      const closeBtn = document.createElement('button');
-      closeBtn.className = 'trackio-fullscreen-close';
-      closeBtn.innerHTML = '×';
-      closeBtn.title = 'Fermer';
-      
-      overlay.appendChild(modal);
-      overlay.appendChild(closeBtn);
-      document.body.appendChild(overlay);
-      
-      // Close handlers
-      const closeModal = () => {
-        const cellInModal = modal.querySelector('.cell');
-        if (!cellInModal || !cellInModal.__originalParent) {
-          overlay.classList.remove('is-open');
-          return;
-        }
-        
-        // FLIP animation: animate back to original position
-        const currentRect = cellInModal.getBoundingClientRect();
-        const targetRect = cellInModal.__placeholder.getBoundingClientRect();
-        
-        const deltaX = targetRect.left - currentRect.left;
-        const deltaY = targetRect.top - currentRect.top;
-        const scaleX = targetRect.width / currentRect.width;
-        const scaleY = targetRect.height / currentRect.height;
-        
-        // Animate back
-        overlay.classList.add('transitioning'); // Disable D3 animations during close
-        cellInModal.style.transformOrigin = 'top left';
-        cellInModal.style.transition = 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)';
-        cellInModal.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
-        
-        overlay.classList.remove('is-open');
-        
-        setTimeout(() => {
-          // Move cell back to original position
-          if (cellInModal.__placeholder && cellInModal.__originalParent) {
-            cellInModal.__originalParent.insertBefore(cellInModal, cellInModal.__placeholder);
-            cellInModal.__placeholder.remove();
-          }
-          
-          // Reset styles
-          cellInModal.style.transform = '';
-          cellInModal.style.transition = '';
-          cellInModal.style.transformOrigin = '';
-          
-          // Clean up references
-          delete cellInModal.__originalParent;
-          delete cellInModal.__placeholder;
-          
-          // Re-render to fix any layout issues
-          overlay.classList.remove('transitioning'); // Re-enable animations
-          schedule();
-        }, 300);
-      };
+    hostEl.addEventListener('trackio-hover-step', (ev) => {
+      const d = ev && ev.detail;
+      if (!d || !chartRenderer) return;
       
-      closeBtn.addEventListener('click', closeModal);
-      overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) closeModal();
-      });
+      // Don't sync to self - avoid infinite loops
+      if (d.sourceMetric === metricKey) return;
       
-      // ESC key handler
-      const handleEsc = (e) => {
-        if (e.key === 'Escape' && overlay.classList.contains('is-open')) {
-          closeModal();
-        }
-      };
-      document.addEventListener('keydown', handleEsc);
-      
-      overlay.__closeModal = closeModal;
-      overlay.__handleEsc = handleEsc;
-    }
-    
-    const modal = overlay.querySelector('.trackio-fullscreen-modal');
-    
-    // Close any existing modal
-    if (overlay.classList.contains('is-open')) {
-      overlay.__closeModal();
-      return;
-    }
-    
-    // FLIP animation: First - record initial position
-    const initialRect = root.getBoundingClientRect();
-    
-    // Create placeholder
-    const placeholder = document.createElement('div');
-    placeholder.style.width = root.offsetWidth + 'px';
-    placeholder.style.height = root.offsetHeight + 'px';
-    placeholder.style.visibility = 'hidden';
-    
-    // Store references
-    root.__originalParent = root.parentNode;
-    root.__placeholder = placeholder;
-    
-    // Move cell to modal
-    root.parentNode.insertBefore(placeholder, root);
-    modal.appendChild(root);
-    
-    // Last - record final position  
-    overlay.classList.add('is-open');
-    const finalRect = root.getBoundingClientRect();
-    
-    // Invert - calculate the difference
-    const deltaX = initialRect.left - finalRect.left;
-    const deltaY = initialRect.top - finalRect.top;
-    const scaleX = initialRect.width / finalRect.width;
-    const scaleY = initialRect.height / finalRect.height;
-    
-    // Set initial transform (inverted)
-    root.style.transformOrigin = 'top left';
-    root.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+      // Show hover line at the specified step
+      chartRenderer.showHoverLine(d.step);
+    });
     
-    // Play - animate to final position
-    overlay.classList.add('transitioning'); // Add class to suppress animations
-    requestAnimationFrame(() => {
-      root.style.transition = 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)';
-      root.style.transform = 'translate(0, 0) scale(1, 1)';
+    hostEl.addEventListener('trackio-hover-clear', (ev) => {
+      if (!chartRenderer) return;
+      
+      // Don't sync to self
+      const d = ev && ev.detail;
+      if (d && d.sourceMetric === metricKey) return;
       
-      setTimeout(() => {
-        root.style.transition = '';
-        root.style.transform = '';
-        root.style.transformOrigin = '';
-        
-        // Re-render chart at new size with a small delay to ensure layout is settled
-        setTimeout(() => {
-          overlay.classList.remove('transitioning'); // Re-enable animations
-          schedule();
-        }, 50);
-      }, 300);
+      // Hide hover line
+      chartRenderer.hideHoverLine();
     });
+    
+    root.__syncAttached = true;
+  }
+  
+  $: if (root && hostEl) {
+    setupExternalHover();
   }
 </script>
 
+<div 
+  class="cell {wide ? 'cell--wide' : ''}" 
+  bind:this={root} 
+  data-metric={metricKey} 
+  data-title={titleText} 
+  data-variant={variant}
+>
+  <div class="cell-bg"></div>
+  <div class="cell-corners"></div>
+  <div class="cell-inner">
+    <div class="cell-header">
+      <div class="cell-title">
+        {titleText}
+      </div>
+      <button 
+        class="cell-fullscreen-btn" 
+        type="button" 
+        on:click={openFullscreen} 
+        title="Fullscreen"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/>
+        </svg>
+      </button>
+    </div>
+    
+    <div class="cell-body">
+      <ChartRenderer
+        bind:this={chartRenderer}
+        {metricData}
+        {rawMetricData}
+        {colorForRun}
+        {variant}
+        {logScaleX}
+        {smoothing}
+        {normalizeLoss}
+        {metricKey}
+        {titleText}
+        {hostEl}
+        width={800}
+        height={150}
+        onHover={handleChartHover}
+        onLeave={handleChartLeave}
+      />
+    </div>
+  </div>
+</div>
+
+<!-- Tooltip -->
+<ChartTooltip
+  visible={tooltipVisible}
+  x={tooltipX}
+  y={tooltipY}
+  title={tooltipTitle}
+  subtitle={tooltipSubtitle}
+  entries={tooltipEntries}
+  parentElement={root}
+/>
+
+
+
 <style>
   /* =========================
      CELL BASE STYLES
@@ -652,44 +270,8 @@
       linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
   }
   
-  /* Dark mode corners are handled automatically by CSS variables */
-  
-  /* Oblivion theme: cell title with indicator dot */
-  :global(.trackio.theme--oblivion .cell-title) {
-    font-size: 12px;
-    font-weight: 800;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--trackio-oblivion-primary);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .cell-indicator {
-    width: 6px;
-    height: 6px;
-    background: var(--trackio-chart-axis-text);
-    border: 1px solid var(--trackio-chart-axis-stroke);
-    opacity: 0.6;
-    flex-shrink: 0;
-  }
-
-  /* Oblivion theme: adjust cell styling to remove default border only in Oblivion */
-  :global(.trackio.theme--oblivion .cell) {
-    border: none !important;
-    background: transparent !important;
-  }
-  
-  /* Classic theme: ensure borders are visible (redundant but explicit) */
-  :global(.trackio.theme--classic .cell) {
-    border: 1px solid var(--trackio-cell-border) !important;
-    background: var(--trackio-cell-background) !important;
-    border-radius: 10px !important;
-  }
-  
   :global(.trackio .cell-header) {
-    padding: 8px 10px;
+    padding: 0 0px 10px 10px; 
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -714,15 +296,18 @@
     overflow: hidden;
   }
   
-  :global(.trackio .cell-body svg) {
-    max-width: 100%;
-    height: auto;
-    display: block;
+  /* Oblivion theme overrides */
+  :global(.trackio.theme--oblivion .cell) {
+    border: none !important;
+    background: transparent !important;
+  }
+  
+  :global(.trackio.theme--classic .cell) {
+    border: 1px solid var(--trackio-cell-border) !important;
+    background: var(--trackio-cell-background) !important;
+    border-radius: 10px !important;
   }
-
-  /* Theme: Oblivion overrides for cell layers - styles defined above */
   
-  /* Force Roboto Mono in Oblivion theme for cell elements */
   :global(.trackio.theme--oblivion .cell-title) {
     font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
     letter-spacing: 0.12em !important;
@@ -730,7 +315,7 @@
     font-weight: 800 !important;
     font-size: 12px !important;
     position: relative;
-    padding-left: 0;
+    padding-left: 14px;
   }
   
   /* Oblivion theme: add indicator dot before title */
@@ -742,17 +327,24 @@
     transform: translateY(-50%);
     width: 6px;
     height: 6px;
-    background: var(--trackio-oblivion-primary);
-    border: 1px solid var(--trackio-oblivion-dim);
-    box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent) inset;
-    opacity: 0.5;
+    background: var(--trackio-chart-axis-text);
+    border: 1px solid var(--trackio-chart-axis-stroke);
+    border-radius: 1px;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) inset;
+    opacity: 0.6;
   }
 
+
   /* Ghost hover effect */
   :global(.trackio.hovering .ghost) {
     opacity: 0.2;
     transition: opacity 0.15s ease;
   }
+  
+  /* Specific ghost effect for raw lines when smoothing is active */
+  :global(.trackio.hovering path.raw-line.ghost) {
+    opacity: 0.1;
+  }
 
   /* Wide cell spans full width */
   :global(.trackio__grid .cell--wide) {
@@ -774,129 +366,14 @@
     border-radius: 6px;
     transition: opacity 0.15s ease;
   }
+  
   .cell-fullscreen-btn:hover {
     opacity: 1;
-    /* No background on hover - just opacity change */
   }
+  
   .cell-fullscreen-btn svg {
     width: 18px;
     height: 18px;
     fill: var(--trackio-chart-axis-text);
   }
-
-  /* Fullscreen modal */
-  :global(.trackio-fullscreen-overlay) {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(8px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-  }
-  :global(.trackio-fullscreen-overlay.is-open) {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  :global(.trackio-fullscreen-modal) {
-    position: relative;
-    width: min(95vw, 1400px);
-    height: min(95vh, 900px);
-    background: var(--surface-bg);
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  }
-  :global(.trackio-fullscreen-close) {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    width: 40px;
-    height: 40px;
-    border: 0;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    font-size: 20px;
-    transition: background-color 0.15s ease;
-  }
-  :global(.trackio-fullscreen-close:hover) {
-    background: rgba(0, 0, 0, 0.7);
-  }
-  
-  /* Hide fullscreen button when in modal */
-  :global(.trackio-fullscreen-modal .cell-fullscreen-btn) {
-    display: none;
-  }
-  
-  /* Minor ticks styling for logarithmic scales */
-  :global(.trackio .minor-ticks line.minor-tick) {
-    stroke: var(--trackio-chart-axis-stroke);
-    stroke-opacity: 0.4;
-    stroke-width: 0.5px;
-  }
-  
-  /* Oblivion theme: enhanced minor ticks */
-  :global(.trackio.theme--oblivion .minor-ticks line.minor-tick) {
-    stroke: var(--trackio-oblivion-dim);
-    stroke-opacity: 0.6;
-    stroke-width: 0.8px;
-  }
-  
-
-  /* Fullscreen cell takes full modal space */
-  :global(.trackio-fullscreen-modal .cell) {
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-  
-  :global(.trackio-fullscreen-modal .cell-inner) {
-    height: 100%;
-  }
-  
-  :global(.trackio-fullscreen-modal .cell-body) {
-    flex: 1;
-    height: calc(100% - 50px); /* Minus header height */
-  }
-  
-  :global(.trackio-fullscreen-modal .cell-body svg) {
-    width: 100% !important;
-    height: 100% !important;
-    max-width: none !important;
-    max-height: none !important;
-  }
 </style>
-
-<div class="cell {wide ? 'cell--wide' : ''}" bind:this={root} data-metric={metricKey} data-title={titleText} data-variant={variant}>
-  <div class="cell-bg"></div>
-  <div class="cell-corners"></div>
-  <div class="cell-inner">
-    <div class="cell-header">
-      <div class="cell-title">
-        {#if variant === 'oblivion'}
-          <span class="cell-indicator"></span>
-        {/if}
-        {titleText}
-      </div>
-      <button class="cell-fullscreen-btn" type="button" on:click={openFullscreen} title="Fullscreen">
-        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-          <path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/>
-        </svg>
-      </button>
-    </div>
-    <div class="cell-body"><div bind:this={body}></div></div>
-  </div>
-</div>
-
-

app/src/components/trackio/ChartRenderer.svelte

@@ -0,0 +1,500 @@
+<script>
+  import * as d3 from 'd3';
+  import { onMount, onDestroy } from 'svelte';
+  import { formatAbbrev, formatLogTick, generateSmartTicks, generateLogTicks } from './chart-utils.js';
+  
+  // Props
+  export let metricData = {};
+  export let rawMetricData = {};
+  export let colorForRun = (name) => '#999';
+  export let variant = 'classic';
+  export let logScaleX = false;
+  export let smoothing = false;
+  export let normalizeLoss = true;
+  export let metricKey = '';
+  export let titleText = '';
+  export let hostEl = null;
+  export let width = 800;
+  export let height = 150;
+  export let margin = { top: 10, right: 12, bottom: 46, left: 44 };
+  export let onHover = null; // Callback for hover events
+  export let onLeave = null; // Callback for leave events
+  
+  // SVG elements
+  let container;
+  let svg, gRoot, gGrid, gGridDots, gAxes, gAreas, gLines, gPoints, gHover;
+  let xScale, yScale, lineGen;
+  let cleanup;
+  let hoverLine; // Reference to hover line for external control
+  
+  $: innerHeight = height - margin.top - margin.bottom;
+  
+  // Reactive re-render when data or any relevant prop changes
+  $: {
+    if (container) {
+      // List all dependencies to trigger render when any change
+      void metricData;
+      void metricKey;
+      void variant;
+      void logScaleX;
+      void normalizeLoss;
+      void smoothing;
+      render();
+    }
+  }
+  
+  function ensureSvg() {
+    if (svg || !container) return;
+    
+    const d3Container = d3.select(container);
+    svg = d3Container.append('svg')
+      .attr('width', '100%')
+      .style('display', 'block');
+      
+    gRoot = svg.append('g');
+    gGrid = gRoot.append('g').attr('class', 'grid');
+    gGridDots = gRoot.append('g').attr('class', 'grid-dots');
+    gAxes = gRoot.append('g').attr('class', 'axes');
+    gAreas = gRoot.append('g').attr('class', 'areas');
+    gLines = gRoot.append('g').attr('class', 'lines');
+    gPoints = gRoot.append('g').attr('class', 'points');
+    gHover = gRoot.append('g').attr('class', 'hover');
+    
+    // Initialize scales
+    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear(); 
+    yScale = d3.scaleLinear();
+    lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
+  }
+  
+  function updateLayout(hoverSteps) {
+    if (!svg || !container) return { innerWidth: 0, innerHeight: 0, xTicksForced: [], yTicksForced: [] };
+    
+    const fontFamily = 'var(--trackio-font-family)';
+    
+    // Calculate actual container width
+    const rect = container.getBoundingClientRect();
+    const actualWidth = Math.max(1, Math.round(rect && rect.width ? rect.width : (container.clientWidth || width)));
+    
+    svg.attr('width', actualWidth)
+       .attr('height', height)
+       .attr('viewBox', `0 0 ${actualWidth} ${height}`)
+       .attr('preserveAspectRatio', 'xMidYMid meet');
+       
+    const innerWidth = actualWidth - margin.left - margin.right;
+    
+    gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+    xScale.range([0, innerWidth]); 
+    yScale.range([innerHeight, 0]);
+
+    gAxes.selectAll('*').remove();
+    
+    const minXTicks = 5;
+    const maxXTicks = Math.max(minXTicks, Math.min(12, Math.floor(innerWidth / 70)));
+    let xTicksForced = [];
+    
+    let logTickData = null;
+    if (logScaleX) {
+      logTickData = generateLogTicks(hoverSteps, minXTicks, maxXTicks, innerWidth, xScale);
+      xTicksForced = logTickData.major;
+    } else if (Array.isArray(hoverSteps) && hoverSteps.length) {
+      const tickIndices = generateSmartTicks(hoverSteps, minXTicks, maxXTicks, innerWidth);
+      xTicksForced = tickIndices;
+    } else {
+      const makeTicks = (scale, approx) => { 
+        const arr = scale.ticks(approx); 
+        const dom = scale.domain(); 
+        if (arr.length === 0 || arr[0] !== dom[0]) arr.unshift(dom[0]); 
+        if (arr[arr.length-1] !== dom[dom.length-1]) arr.push(dom[dom.length-1]); 
+        return Array.from(new Set(arr)); 
+      };
+      xTicksForced = makeTicks(xScale, maxXTicks);
+    }
+    
+    const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
+    const yCount = maxYTicks; 
+    const yDom = yScale.domain();
+    const yTicksForced = (yCount <= 2) ? [yDom[0], yDom[1]] : Array.from({length:yCount}, (_,i)=> yDom[0] + ((yDom[1]-yDom[0])*(i/(yCount-1))));
+
+    // Draw axes
+    gAxes.append('g')
+      .attr('transform', `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(xScale).tickValues(xTicksForced).tickFormat((val) => { 
+        const displayVal = logScaleX ? val : (Array.isArray(hoverSteps) && hoverSteps[val] != null ? hoverSteps[val] : val); 
+        return logScaleX ? formatLogTick(displayVal, true) : formatAbbrev(displayVal); 
+      }))
+      .call(g => { 
+        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
+        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily)
+          .style('font-weight', d => {
+            if (!logScaleX) return 'normal';
+            const log10 = Math.log10(Math.abs(d));
+            const isPowerOf10 = Math.abs(log10 % 1) < 0.01;
+            return isPowerOf10 ? '600' : 'normal';
+          }); 
+      });
+      
+    gAxes.append('g')
+      .call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v) => formatAbbrev(v)))
+      .call(g => { 
+        g.selectAll('path, line').style('stroke', 'var(--trackio-chart-axis-stroke)'); 
+        g.selectAll('text').style('fill', 'var(--trackio-chart-axis-text)').style('font-size','11px').style('font-family', fontFamily); 
+      });
+
+    // Add minor ticks for logarithmic scale
+    if (logScaleX && logTickData && logTickData.minor.length > 0) {
+      gAxes.append('g').attr('class', 'minor-ticks').attr('transform', `translate(0,${innerHeight})`)
+        .selectAll('line.minor-tick')
+        .data(logTickData.minor)
+        .join('line')
+        .attr('class', 'minor-tick')
+        .attr('x1', d => xScale(d))
+        .attr('x2', d => xScale(d))
+        .attr('y1', 0)
+        .attr('y2', 4)
+        .style('stroke', 'var(--trackio-chart-axis-stroke)')
+        .style('stroke-opacity', 0.4)
+        .style('stroke-width', 0.5);
+    }
+
+    // Steps label
+    const labelY = innerHeight + Math.max(20, Math.min(36, margin.bottom - 12));
+    const stepsText = logScaleX ? 'Steps (log)' : 'Steps';
+    
+    gAxes.append('text')
+      .attr('class','x-axis-label')
+      .attr('x', innerWidth/2)
+      .attr('y', labelY)
+      .style('fill', 'var(--trackio-chart-axis-text)')
+      .attr('text-anchor','middle')
+      .style('font-size','9px')
+      .style('opacity','.9')
+      .style('letter-spacing','.5px')
+      .style('text-transform','uppercase')
+      .style('font-weight','500')
+      .style('font-family', fontFamily)
+      .text(stepsText);
+
+    return { innerWidth, innerHeight, xTicksForced, yTicksForced };
+  }
+  
+  function renderGrid(xTicksForced, yTicksForced, hoverSteps) {
+    const shouldUseDots = variant === 'oblivion';
+    
+    if (shouldUseDots) {
+      // Oblivion-style: Grid as dots
+      gGrid.selectAll('*').remove();
+      gGridDots.selectAll('*').remove(); 
+      const gridPoints = []; 
+      const yMin = yScale.domain()[0]; 
+      const desiredCols = 24; 
+      const xGridStride = Math.max(1, Math.ceil(hoverSteps.length/desiredCols)); 
+      const xGridIdx = []; 
+      for (let idx = 0; idx < hoverSteps.length; idx += xGridStride) xGridIdx.push(idx); 
+      if (xGridIdx[xGridIdx.length-1] !== hoverSteps.length-1) xGridIdx.push(hoverSteps.length-1); 
+      xGridIdx.forEach(i => { 
+        yTicksForced.forEach(t => { 
+          if (i !== 0 && (yMin == null || t !== yMin)) gridPoints.push({ sx: i, ty: t }); 
+        }); 
+      }); 
+      gGridDots.selectAll('circle.grid-dot')
+        .data(gridPoints)
+        .join('circle')
+        .attr('class', 'grid-dot')
+        .attr('cx', d => xScale(d.sx))
+        .attr('cy', d => yScale(d.ty))
+        .attr('r', 1.25)
+        .style('fill', 'var(--trackio-chart-grid-stroke)')
+        .style('fill-opacity', 'var(--trackio-chart-grid-opacity)');
+    } else {
+      // Classic-style: Grid as lines
+      gGridDots.selectAll('*').remove();
+      gGrid.selectAll('*').remove();
+      
+      // Horizontal grid lines
+      const xRange = xScale.range();
+      const maxX = Math.max(...xRange);
+      
+      gGrid.selectAll('line.horizontal')
+        .data(yTicksForced)
+        .join('line')
+        .attr('class', 'horizontal')
+        .attr('x1', 0).attr('x2', maxX)
+        .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+        .style('stroke', 'var(--trackio-chart-grid-stroke)')
+        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
+        .attr('stroke-width', 1);
+        
+      // Vertical grid lines
+      gGrid.selectAll('line.vertical')
+        .data(xTicksForced)
+        .join('line')
+        .attr('class', 'vertical')
+        .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+        .attr('y1', 0).attr('y2', innerHeight)
+        .style('stroke', 'var(--trackio-chart-grid-stroke)')
+        .style('stroke-opacity', 'var(--trackio-chart-grid-opacity)')
+        .attr('stroke-width', 1);
+    }
+  }
+  
+  function render() {
+    ensureSvg();
+    if (!svg || !gRoot) return;
+    
+    const runs = Object.keys(metricData || {});
+    const hasAny = runs.some(r => (metricData[r] || []).length > 0);
+    if (!hasAny) { 
+      gRoot.style('display', 'none'); 
+      return; 
+    } 
+    gRoot.style('display', null);
+
+    // Data processing
+    let minStep = Infinity, maxStep = -Infinity, minVal = Infinity, maxVal = -Infinity;
+    runs.forEach(r => { 
+      (metricData[r] || []).forEach(pt => { 
+        minStep = Math.min(minStep, pt.step); 
+        maxStep = Math.max(maxStep, pt.step); 
+        minVal = Math.min(minVal, pt.value); 
+        maxVal = Math.max(maxVal, pt.value); 
+      }); 
+    });
+    
+    const isAccuracy = /accuracy/i.test(metricKey); 
+    const isLoss = /loss/i.test(metricKey);
+    if (isAccuracy) yScale.domain([0,1]).nice(); 
+    else if (isLoss && normalizeLoss) yScale.domain([0,1]).nice(); 
+    else yScale.domain([minVal, maxVal]).nice();
+    
+    const stepSet = new Set(); 
+    runs.forEach(r => (metricData[r] || []).forEach(v => stepSet.add(v.step)));
+    const hoverSteps = Array.from(stepSet).sort((a,b) => a - b); 
+    
+    // Update X scale based on logScaleX prop
+    xScale = logScaleX ? d3.scaleLog() : d3.scaleLinear();
+    
+    let stepIndex = null;
+    
+    if (logScaleX) {
+      const minStep = Math.max(1, Math.min(...hoverSteps));
+      const maxStep = Math.max(...hoverSteps);
+      xScale.domain([minStep, maxStep]);
+      lineGen.x(d => xScale(d.step));
+    } else {
+      stepIndex = new Map(hoverSteps.map((s,i) => [s,i]));
+      xScale.domain([0, Math.max(0, hoverSteps.length - 1)]);
+      lineGen.x(d => xScale(stepIndex.get(d.step)));
+    }
+    
+    const normalizeY = (v) => (isLoss && normalizeLoss ? ((maxVal > minVal) ? (v - minVal) / (maxVal - minVal) : 0) : v); 
+    lineGen.y(d => yScale(normalizeY(d.value)));
+    
+    const { xTicksForced, yTicksForced } = updateLayout(hoverSteps);
+    
+    // Render grid
+    renderGrid(xTicksForced, yTicksForced, hoverSteps);
+    
+    // Render data
+    const series = runs.map(r => ({ 
+      run: r, 
+      color: colorForRun(r), 
+      values: (metricData[r] || []).slice().sort((a,b) => a.step - b.step) 
+    }));
+    
+    // Draw background lines (original data) when smoothing is enabled
+    if (smoothing && rawMetricData && Object.keys(rawMetricData).length > 0) {
+      const rawSeries = runs.map(r => ({ 
+        run: r, 
+        color: colorForRun(r), 
+        values: (rawMetricData[r] || []).slice().sort((a,b) => a.step - b.step) 
+      }));
+      const rawPaths = gLines.selectAll('path.raw-line').data(rawSeries, d => d.run + '-raw'); 
+      rawPaths.enter().append('path').attr('class','raw-line').attr('data-run', d => d.run).attr('fill','none').attr('stroke-width',1).attr('opacity',0.2).attr('stroke', d => d.color).style('pointer-events','none').attr('d', d => lineGen(d.values)); 
+      rawPaths.attr('stroke', d => d.color).attr('opacity',0.2).attr('d', d => lineGen(d.values));
+      rawPaths.exit().remove();
+    } else {
+      gLines.selectAll('path.raw-line').remove();
+    }
+    
+    // Draw main lines
+    const paths = gLines.selectAll('path.run-line').data(series, d => d.run); 
+    paths.enter().append('path').attr('class','run-line').attr('data-run', d => d.run).attr('fill','none').attr('stroke-width',1.5).attr('opacity',0.9).attr('stroke', d => d.color).style('pointer-events','none').attr('d', d => lineGen(d.values)); 
+    paths.transition().duration(160).attr('stroke', d => d.color).attr('opacity',0.9).attr('d', d => lineGen(d.values));
+    paths.exit().remove();
+    
+    // Draw points
+    const allPoints = series.flatMap(s => s.values.map(v => ({ run: s.run, color: s.color, step: v.step, value: v.value })));
+    const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d => `${d.run}-${d.step}`); 
+    ptsSel.enter().append('circle').attr('class','pt').attr('data-run', d => d.run).attr('r',0).attr('fill', d => d.color).attr('fill-opacity',0.6).attr('stroke','none').style('pointer-events','none')
+      .attr('cx', d => logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
+      .attr('cy', d => yScale(normalizeY(d.value)))
+      .merge(ptsSel)
+      .attr('cx', d => logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
+      .attr('cy', d => yScale(normalizeY(d.value))); 
+    ptsSel.exit().remove();
+
+    // Setup hover interactions
+    setupHoverInteractions(hoverSteps, stepIndex, series, normalizeY, isAccuracy, innerWidth);
+  }
+  
+  function setupHoverInteractions(hoverSteps, stepIndex, series, normalizeY, isAccuracy, innerWidth) {
+    if (!gHover || !container) return;
+    
+    gHover.selectAll('*').remove(); 
+    
+    // Recalculate dimensions to be sure
+    const actualWidth = container.getBoundingClientRect().width;
+    const currentInnerWidth = innerWidth || (actualWidth - margin.left - margin.right);
+    const currentInnerHeight = innerHeight || (height - margin.top - margin.bottom);
+    
+    const overlay = gHover.append('rect')
+      .attr('fill','transparent')
+      .style('cursor','crosshair')
+      .attr('x',0)
+      .attr('y',0)
+      .attr('width', currentInnerWidth)
+      .attr('height', currentInnerHeight)
+      .style('pointer-events','all'); 
+      
+    hoverLine = gHover.append('line')
+      .style('stroke','var(--text-color)')
+      .attr('stroke-opacity',0.25)
+      .attr('stroke-width',1)
+      .attr('y1',0)
+      .attr('y2',innerHeight)
+      .style('display','none')
+      .style('pointer-events','none'); 
+      
+    let hideTipTimer = null;
+    
+    function onMove(ev) { 
+      console.log('onMove called, checking series...');
+      try {
+        if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } 
+        const [mx, my] = d3.pointer(ev, overlay.node());
+        console.log('Got mouse position:', mx, my);
+        
+        // Get global mouse coordinates for tooltip positioning
+        const globalX = ev.clientX;
+        const globalY = ev.clientY; 
+      
+      let nearest, xpx;
+      if (logScaleX) {
+        const mouseStepValue = xScale.invert(mx);
+        let minDist = Infinity;
+        let closestStep = hoverSteps[0];
+        hoverSteps.forEach(step => {
+          const dist = Math.abs(Math.log(step) - Math.log(mouseStepValue));
+          if (dist < minDist) {
+            minDist = dist;
+            closestStep = step;
+          }
+        });
+        nearest = closestStep;
+        xpx = xScale(nearest);
+      } else {
+        const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); 
+        nearest = hoverSteps[idx]; 
+        xpx = xScale(idx);
+      }
+      
+      hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); 
+      
+      console.log('About to use series, available?', typeof series);
+      const entries = series.map(s => { 
+        const m = new Map(s.values.map(v => [v.step, v])); 
+        const pt = m.get(nearest); 
+        return { run: s.run, color: s.color, pt }; 
+      }).filter(e => e.pt && e.pt.value != null).sort((a,b) => a.pt.value - b.pt.value); 
+      
+      const fmt = (vv) => (isAccuracy ? (+vv).toFixed(4) : (+vv).toFixed(4)); 
+      
+      // Call parent hover callback
+      console.log('About to call onHover:', { hasOnHover: !!onHover, entriesLength: entries.length, step: nearest });
+      if (onHover) {
+        onHover({
+          step: nearest,
+          entries: entries.map(e => ({ 
+            color: e.color, 
+            name: e.run, 
+            valueText: fmt(e.pt.value) 
+          })),
+          position: { x: mx, y: my, globalX, globalY }
+        });
+        console.log('onHover callback completed');
+      } else {
+        console.log('onHover is null!');
+      }
+      
+      try { 
+        gPoints.selectAll('circle.pt').attr('r', d => (d && d.step === nearest ? 4 : 0)); 
+      } catch(_) {} 
+      } catch(error) {
+        console.error('Error in onMove:', error);
+      }
+    }
+    
+    function onMouseLeave() { 
+      hideTipTimer = setTimeout(() => { 
+        hoverLine.style('display','none'); 
+        if (onLeave) onLeave();
+        try { 
+          gPoints.selectAll('circle.pt').attr('r', 0); 
+        } catch(_) {} 
+      }, 0); 
+    }
+    
+    overlay.on('mousemove', function() {
+      console.log('OVERLAY MOUSEMOVE DETECTED!');
+      onMove.apply(this, arguments);
+    }).on('mouseleave', onMouseLeave);
+  }
+  
+  onMount(() => {
+    render();
+    const ro = window.ResizeObserver ? new ResizeObserver(() => render()) : null;
+    if (ro && container) ro.observe(container);
+    cleanup = () => { ro && ro.disconnect(); };
+  });
+  
+  onDestroy(() => {
+    cleanup && cleanup();
+  });
+  
+  // Public methods for external hover control
+  export function showHoverLine(step) {
+    if (!hoverLine || !xScale || !container) return;
+    
+    try {
+      let xpx;
+      if (logScaleX) {
+        xpx = xScale(step);
+      } else {
+        // Find step index in hoverSteps
+        const stepSet = new Set();
+        Object.keys(metricData || {}).forEach(r => 
+          (metricData[r] || []).forEach(v => stepSet.add(v.step))
+        );
+        const hoverSteps = Array.from(stepSet).sort((a,b) => a - b);
+        const stepIndex = hoverSteps.indexOf(step);
+        if (stepIndex >= 0) {
+          xpx = xScale(stepIndex);
+        }
+      }
+      
+      if (xpx !== undefined) {
+        hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+      }
+    } catch (e) {
+      console.warn('Error showing hover line:', e);
+    }
+  }
+  
+  export function hideHoverLine() {
+    if (hoverLine) {
+      hoverLine.style('display', 'none');
+    }
+  }
+</script>
+
+<div bind:this={container} style="width: 100%; height: 100%;"></div>

app/src/components/trackio/ChartTooltip.svelte

@@ -0,0 +1,245 @@
+<script>
+  import { onMount } from 'svelte';
+  
+  // Props
+  export let visible = false;
+  export let x = -9999;
+  export let y = -9999;
+  export let title = '';
+  export let subtitle = '';
+  export let entries = []; // Array of { color, name, valueText }
+  export let parentElement = null; // Element to append tooltip to
+  export let zIndex = 1000; // Default z-index
+  
+  let tooltipElement;
+  let tipHost;
+  
+  onMount(() => {
+    // Find trackio parent for positioning context
+    console.log('ChartTooltip onMount - parentElement:', parentElement);
+    console.log('ChartTooltip onMount - parentElement classes:', parentElement?.className);
+    
+    const trackioEl = parentElement?.closest?.('.trackio') || (parentElement?.classList?.contains('trackio') ? parentElement : null);
+    
+    console.log('ChartTooltip onMount - trackioEl found:', trackioEl);
+    
+    if (trackioEl) {
+      // Create tooltip host positioned relative to trackio container
+      tipHost = document.createElement('div');
+      tipHost.className = 'tip-host';
+      tipHost.style.position = 'absolute';
+      tipHost.style.top = '0';
+      tipHost.style.left = '0';
+      tipHost.style.width = '100%';
+      tipHost.style.height = '100%';
+      tipHost.style.pointerEvents = 'none';
+      tipHost.style.zIndex = String(zIndex);
+      tipHost.style.overflow = 'visible';
+      trackioEl.appendChild(tipHost);
+      
+      // Move tooltip element to host
+      if (tooltipElement && tipHost) {
+        tipHost.appendChild(tooltipElement);
+      }
+    }
+    
+    return () => {
+      if (tipHost && tipHost.parentNode) {
+        tipHost.parentNode.removeChild(tipHost);
+      }
+    };
+  });
+  
+  $: tooltipStyle = `
+    transform: translate(${x}px, ${y}px);
+    pointer-events: none;
+    z-index: ${zIndex};
+  `;
+  
+  $: tooltipClass = `d3-tooltip ${visible ? 'is-visible' : ''}`;
+</script>
+
+<div 
+  bind:this={tooltipElement}
+  class={tooltipClass}
+  style={tooltipStyle}
+>
+  <div class="d3-tooltip__inner">
+    {#if title}
+      <div class="d3-tooltip__title">{@html title}</div>
+    {/if}
+    
+    {#if subtitle}
+      <div class="d3-tooltip__subtitle">{subtitle}</div>
+    {/if}
+    
+    {#each entries as entry}
+        <div class="d3-tooltip__entry">
+          <span class="d3-tooltip__color-dot" style="background:{entry.color}"></span>
+          <strong class="d3-tooltip__entry-name">{entry.name}</strong>
+          <span class="d3-tooltip__entry-value">{entry.valueText}</span>
+        </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* Classic tooltip styling - based on original d3-trackio.html */
+  .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
+    opacity: 0;
+    transition: none;
+    z-index: var(--z-tooltip, 50);
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+  
+  .d3-tooltip.is-visible {
+    opacity: 1;
+  }
+  
+  .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+  }
+  
+  .d3-tooltip__title {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+    color: var(--text-color);
+  }
+  
+  .d3-tooltip__subtitle {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+  
+  .d3-tooltip__entry {
+    padding-top: 6px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+  }
+  
+  .d3-tooltip__entry-name {
+    flex: 1;
+    font-weight: 500;
+  }
+  
+  .d3-tooltip__entry-value {
+    margin-left: auto;
+    text-align: right;
+    font-weight: 900;
+  }
+  
+  .d3-tooltip__color-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+  
+  /* Oblivion tooltip styling - based on original d3-trackio-oblivion.html */
+  :global(.trackio.theme--oblivion) .d3-tooltip {
+    border-radius: 8px;
+    border: none;
+    background: 
+      radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%),
+      radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
+    color: var(--trackio-text-primary);
+    box-shadow: 0 8px 32px rgba(127,241,255,.05), 0 2px 8px rgba(0,0,0,.10);
+    opacity: 0;
+    backdrop-filter: saturate(1.1) blur(10px);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip.is-visible {
+    opacity: 1;
+  }
+  
+  /* Dark mode oblivion tooltip */
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip {
+    background:
+      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
+      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%),
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%);
+    color: var(--trackio-text-primary);
+    box-shadow: 0 8px 32px color-mix(in srgb, #ffffff 5%, transparent), 0 2px 8px color-mix(in srgb, black 10%, transparent);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__title {
+    font-weight: 900;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--trackio-oblivion-primary);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__subtitle {
+    color: var(--trackio-oblivion-primary);
+    opacity: 0.4;
+    letter-spacing: 0.06em;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__entry {
+    position: relative;
+    padding-top: 10px;
+    margin-top: 6px;
+    border-top: none;
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__entry::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background: color-mix(in srgb, #000000 10%, transparent);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__entry::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 1px;
+    height: 1px;
+    background: color-mix(in srgb, #ffffff 15%, transparent);
+  }
+  
+  /* Dark mode separator adjustments */
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip__entry::before {
+    background: color-mix(in srgb, #ffffff 5%, transparent);
+  }
+  
+  :global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip__entry::after {
+    background: color-mix(in srgb, #000000 10%, transparent);
+  }
+  
+  :global(.trackio.theme--oblivion) .d3-tooltip__color-dot {
+    border-radius: 2px;
+    border: 1px solid var(--obl-border, rgba(50, 50, 50, 0.22));
+    box-shadow: 0 0 10px color-mix(in srgb, var(--obl-base, #323232) 20%, transparent) inset;
+  }
+</style>

app/src/components/trackio/FullscreenModal.svelte

@@ -0,0 +1,618 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import ChartRenderer from './ChartRenderer.svelte';
+  import ChartTooltip from './ChartTooltip.svelte';
+  import Legend from './Legend.svelte';
+  import { formatAbbrev } from './chart-utils.js';
+  
+  // Props
+  export let visible = false;
+  export let title = '';
+  export let metricData = {};
+  export let rawMetricData = {};
+  export let colorForRun = (name) => '#999';
+  export let variant = 'classic';
+  export let logScaleX = false;
+  export let smoothing = false;
+  export let normalizeLoss = true;
+  export let metricKey = '';
+  export let titleText = '';
+  
+  // Navigation props
+  export let currentIndex = 0;
+  export let totalCharts = 1;
+  export let onNavigate = null;
+  
+  const dispatch = createEventDispatcher();
+  
+  let modalElement;
+  
+  // Tooltip state (same as Cell.svelte)
+  let tooltipVisible = false;
+  let tooltipX = -9999;
+  let tooltipY = -9999;
+  let tooltipTitle = '';
+  let tooltipSubtitle = '';
+  let tooltipEntries = [];
+  
+  // Modal management
+  $: if (visible && modalElement) {
+    document.body.appendChild(modalElement);
+    
+    // Copy CSS variables from the trackio parent to ensure theme inheritance
+    const trackioParent = document.querySelector('.trackio');
+    if (trackioParent) {
+      const computedStyle = getComputedStyle(trackioParent);
+      const cssVars = [
+        '--trackio-chart-axis-stroke',
+        '--trackio-chart-axis-text', 
+        '--trackio-chart-grid-stroke',
+        '--trackio-chart-grid-opacity',
+        '--trackio-chart-grid-type',
+        '--trackio-font-family',
+        '--trackio-tooltip-background',
+        '--trackio-tooltip-border',
+        '--trackio-tooltip-shadow',
+        '--trackio-text-primary',
+        '--trackio-text-secondary'
+      ];
+      
+      cssVars.forEach(varName => {
+        const value = computedStyle.getPropertyValue(varName);
+        if (value) {
+          modalElement.style.setProperty(varName, value);
+        }
+      });
+    }
+    
+    requestAnimationFrame(() => {
+      modalElement.classList.add('show');
+    });
+  }
+  
+  function closeModal() {
+    if (modalElement) {
+      modalElement.classList.remove('show');
+      setTimeout(() => {
+        if (modalElement && modalElement.parentNode) {
+          modalElement.parentNode.removeChild(modalElement);
+        }
+        dispatch('close');
+      }, 300);
+    }
+  }
+  
+  function handleKeydown(e) {
+    if (e.key === 'Escape') {
+      closeModal();
+    } else if (e.key === 'ArrowLeft') {
+      navigatePrevious();
+    } else if (e.key === 'ArrowRight') {
+      navigateNext();
+    }
+  }
+  
+  function navigatePrevious() {
+    if (onNavigate && totalCharts > 1) {
+      const newIndex = currentIndex === 0 ? totalCharts - 1 : currentIndex - 1;
+      onNavigate(newIndex);
+    }
+  }
+  
+  function navigateNext() {
+    if (onNavigate && totalCharts > 1) {
+      const newIndex = currentIndex === totalCharts - 1 ? 0 : currentIndex + 1;
+      onNavigate(newIndex);
+    }
+  }
+  
+  function handleOverlayClick(e) {
+    if (e.target === e.currentTarget) {
+      closeModal();
+    }
+  }
+  
+  // Prepare legend data
+  $: runs = Object.keys(metricData);
+  $: legendData = runs.map(run => ({
+    name: run,
+    color: colorForRun(run)
+  }));
+  
+  // Tooltip handling (same logic as Cell.svelte)
+  function handleChartHover(data) {
+    const { step, entries, position } = data;
+    
+    if (entries.length) {
+      // Use global mouse coordinates for tooltip positioning
+      const modalRect = modalElement.getBoundingClientRect();
+      
+      // Position tooltip near global cursor with small offset
+      const relativeX = (position.globalX || position.x) - modalRect.left + 15;
+      const relativeY = (position.globalY || position.y) - modalRect.top + 15;
+      
+      tooltipVisible = true;
+      tooltipX = Math.round(relativeX);
+      tooltipY = Math.round(relativeY);
+      tooltipTitle = `Step ${formatAbbrev(step)}`;
+      tooltipSubtitle = titleText || metricKey;
+      tooltipEntries = entries;
+    }
+  }
+  
+  function handleChartLeave() {
+    tooltipVisible = false;
+    tooltipX = -9999;
+    tooltipY = -9999;
+  }
+  
+  // Ghost legend functionality
+  function handleLegendHover(idx) {
+    legendData.forEach((otherItem, otherIdx) => {
+      if (otherIdx !== idx) {
+        const legendItems = modalElement?.querySelectorAll('.item');
+        if (legendItems && legendItems[otherIdx]) {
+          legendItems[otherIdx].classList.add('ghost');
+        }
+        
+        const chartElements = modalElement?.querySelectorAll(`[data-run="${otherItem.name}"]`);
+        chartElements?.forEach(el => el.classList.add('ghost'));
+      }
+    });
+    
+    // Add hovering class to trigger the ghost styles
+    const modalChart = modalElement?.querySelector('.trackio-modal-chart-content');
+    modalChart?.classList.add('hovering');
+  }
+  
+  function handleLegendLeave() {
+    const legendItems = modalElement?.querySelectorAll('.item');
+    legendItems?.forEach(item => item.classList.remove('ghost'));
+    
+    const chartElements = modalElement?.querySelectorAll('[data-run]');
+    chartElements?.forEach(el => el.classList.remove('ghost'));
+    
+    // Remove hovering class
+    const modalChart = modalElement?.querySelector('.trackio-modal-chart-content');
+    modalChart?.classList.remove('hovering');
+  }
+</script>
+
+<!-- Modal overlay -->
+{#if visible}
+  <div 
+    bind:this={modalElement}
+    class="trackio-modal-overlay trackio {variant === 'oblivion' ? 'theme--oblivion' : 'theme--classic'}"
+    on:click={handleOverlayClick}
+    on:keydown={handleKeydown}
+    role="dialog" 
+    aria-modal="true"
+    tabindex="-1"
+  >
+    <div class="trackio-modal">
+      <!-- Header with improved layout -->
+      <div class="trackio-modal-header">
+        <div class="trackio-modal-header-left">
+          <h3>{title}</h3>
+        </div>
+        
+        <div class="trackio-modal-header-right">
+          <!-- Navigation controls grouped with counter -->
+          <div class="trackio-modal-nav-counter-group">
+            {#if totalCharts > 1}
+              <button 
+                class="trackio-modal-nav-inline trackio-modal-nav-inline-left"
+                on:click={navigatePrevious}
+                title="Previous chart (←)"
+                aria-label="Previous chart"
+              >
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                </svg>
+              </button>
+            {/if}
+            
+            <div class="trackio-modal-counter">
+              {currentIndex + 1}/{totalCharts}
+            </div>
+            
+            {#if totalCharts > 1}
+              <button 
+                class="trackio-modal-nav-inline trackio-modal-nav-inline-right"
+                on:click={navigateNext}
+                title="Next chart (→)"
+                aria-label="Next chart"
+              >
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                </svg>
+              </button>
+            {/if}
+          </div>
+          
+          <button 
+            class="trackio-modal-close" 
+            on:click={closeModal}
+            title="Close"
+            aria-label="Close modal"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+      
+      <!-- Content -->
+      <div class="trackio-modal-content">
+        <!-- Legend -->
+        {#if legendData.length > 0}
+          <div class="trackio-modal-legend">
+            <Legend
+              items={legendData}
+              alignment="left"
+              on:legend-hover={(e) => handleLegendHover(legendData.findIndex(item => item.name === e.detail.name))}
+              on:legend-leave={handleLegendLeave}
+            />
+          </div>
+        {/if}
+        
+        <!-- Chart -->
+        <div class="trackio-modal-chart-content trackio {variant === 'oblivion' ? 'theme--oblivion' : 'theme--classic'}">
+          <ChartRenderer
+            {metricData}
+            {rawMetricData}
+            {colorForRun}
+            {variant}
+            {logScaleX}
+            {smoothing}
+            {normalizeLoss}
+            {metricKey}
+            {titleText}
+            height={500}
+            margin={{ top: 20, right: 30, bottom: 46, left: 44 }}
+            onHover={handleChartHover}
+            onLeave={handleChartLeave}
+          />
+        </div>
+      </div>
+    </div>
+    
+    <!-- Tooltip (same as Cell.svelte but with higher z-index) -->
+    <ChartTooltip
+      visible={tooltipVisible}
+      x={tooltipX}
+      y={tooltipY}
+      title={tooltipTitle}
+      subtitle={tooltipSubtitle}
+      entries={tooltipEntries}
+      parentElement={modalElement}
+      zIndex={1000001}
+    />
+  </div>
+{/if}
+
+<style>
+  /* Modal styles */
+  :global(.trackio-modal-overlay) {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+  
+  /* Light mode overlay */
+  :global([data-theme="light"]) :global(.trackio-modal-overlay) {
+    background: rgba(255, 255, 255, 0.85);
+  }
+  
+  /* Dark mode overlay */
+  :global([data-theme="dark"]) :global(.trackio-modal-overlay) {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  
+  /* Oblivion theme overlay - light mode */
+  :global([data-theme="light"]) :global(.trackio-modal-overlay.theme--oblivion) {
+    background: rgba(240, 245, 255, 0.9);
+  }
+  
+  /* Oblivion theme overlay - dark mode */
+  :global([data-theme="dark"]) :global(.trackio-modal-overlay.theme--oblivion) {
+    background: rgba(15, 20, 30, 0.85);
+  }
+  
+  :global(.trackio-modal-overlay.show) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  
+  :global(.trackio-modal) {
+    position: relative;
+    width: min(95vw, 1200px);
+    backdrop-filter: blur(4px);
+
+    background: var(--surface-bg);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+  }
+  
+  :global(.trackio-modal-header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px 0px 20px;
+    background: var(--surface-bg, white);
+  }
+  
+  :global(.trackio-modal-header-left) {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+  
+  :global(.trackio-modal-header-right) {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  :global(.trackio-modal-nav-counter-group) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  
+  :global(.trackio-modal-counter) {
+    font-size: 10px;
+    color: var(--muted-color);
+    font-family: var(--trackio-font-family);
+    font-weight: 500;
+    background: none!important;
+    border: none!important;
+    opacity: 0.6;
+    padding: 2px 6px;
+    border-radius: 4px;
+    line-height: 1;
+  }
+  
+  :global(.trackio-modal-header h3) {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color, rgba(0, 0, 0, 0.9));
+    flex: 1;
+  }
+  
+  :global(.trackio-modal-close) {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-color, rgba(0, 0, 0, 0.7));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition: background-color 0.15s ease;
+  }
+  
+  :global(.trackio-modal-close:hover) {
+    background: var(--border-color, rgba(0, 0, 0, 0.1));
+  }
+  
+  /* Inline navigation arrows in header */
+  :global(.trackio-modal-nav-inline) {
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 4px;
+    padding: 0 !important;
+    background: transparent;
+    color: var(--text-color, rgba(0, 0, 0, 0.7));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+  }
+  
+  :global(.trackio-modal-nav-inline:hover) {
+    background: var(--border-color, rgba(0, 0, 0, 0.1));
+    color: var(--text-color, rgba(0, 0, 0, 0.9));
+    transform: scale(1.1);
+  }
+  
+  :global(.trackio-modal-nav-inline:active) {
+    transform: scale(0.9);
+  }
+  
+  :global(.trackio-modal-nav-inline svg) {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+  }
+  
+  :global(.trackio-modal-content) {
+    flex: 1;
+    padding: 20px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  :global(.trackio-modal-legend) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  :global(.trackio-modal-chart-content) {
+    flex: 1;
+    position: relative;
+    min-height: 0;
+  }
+  
+  /* Ghost hover effect */
+  :global(.trackio-modal .ghost) {
+    opacity: 0.2;
+    transition: opacity 0.15s ease;
+  }
+  
+  /* Specific ghost effect for raw lines when smoothing is active */
+  :global(.trackio-modal.hovering path.raw-line.ghost) {
+    opacity: 0.1;
+  }
+  
+  /* =========================
+     OBLIVION THEME STYLES
+     ========================= */
+  
+  /* Oblivion modal overlay */
+  :global(.trackio-modal-overlay.theme--oblivion) {
+    background: rgba(15, 17, 21, 0.9);
+  }
+  
+  /* Oblivion modal box - styled like a cell with corners */
+  :global(.theme--oblivion .trackio-modal) {
+    position: relative;
+    background: transparent;
+    border: none;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(8px);
+    backdrop-filter: saturate(1.1) blur(15px);
+  }
+  
+  /* Modal background layer (like cell-bg) */
+  :global(.theme--oblivion .trackio-modal)::before {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 4px;
+    background: 
+      radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%),
+      radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
+    backdrop-filter: blur(10px);
+  }
+  
+  /* Dark mode oblivion modal */
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal)::before {
+    background:
+      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
+      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%);
+      /* linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%); */
+      backdrop-filter: blur(10px);
+    }
+  
+  /* Dark mode: bright corners */
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal)::after {
+    background:
+      linear-gradient(#ffffff, #ffffff) top left / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top left / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top right / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) top right / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom left / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom left / 1px 8px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
+      linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
+  }
+  
+  /* Modal content above pseudo-elements */
+  :global(.theme--oblivion .trackio-modal-header),
+  :global(.theme--oblivion .trackio-modal-content) {
+    position: relative;
+    z-index: 5;
+  }
+  
+  /* Oblivion modal header */
+  :global(.theme--oblivion .trackio-modal-header) {
+    background: transparent;
+  }
+  
+  :global(.theme--oblivion .trackio-modal-header h3) {
+    color: var(--trackio-oblivion-primary, #2a2a2a);
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-size: 14px;
+  }
+  
+  :global(.theme--oblivion .trackio-modal-counter) {
+    background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
+    color: var(--trackio-oblivion-primary, #2a2a2a);
+    border: 1px solid var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+  }
+  
+  :global(.theme--oblivion .trackio-modal-close) {
+    color: var(--trackio-oblivion-primary, #2a2a2a);
+    background: transparent;
+    border: 1px solid transparent;
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  }
+  
+  :global(.theme--oblivion .trackio-modal-close:hover) {
+    background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
+    border: 1px solid var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
+  }
+  
+  /* Oblivion inline navigation arrows */
+  :global(.theme--oblivion .trackio-modal-nav-inline) {
+    background: transparent;
+    border: none;
+    color: var(--trackio-oblivion-primary, #2a2a2a);
+    border-radius: 4px;
+  }
+  
+  :global(.theme--oblivion .trackio-modal-nav-inline:hover) {
+    background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
+    transform: scale(1.1);
+  }
+  
+  /* Dark mode overrides for modal content */
+  
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-header h3) {
+    color: #ffffff;
+  }
+  
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-counter) {
+    background: color-mix(in srgb, #ffffff 25%, transparent);
+    color: #ffffff;
+    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
+  }
+  
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-close) {
+    color: #ffffff;
+  }
+  
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-close:hover) {
+    background: color-mix(in srgb, #ffffff 25%, transparent);
+    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
+  }
+  
+  /* Dark mode inline navigation arrows */
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-nav-inline) {
+    background: transparent;
+    border: none;
+    color: #ffffff;
+  }
+  
+  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-nav-inline:hover) {
+    background: color-mix(in srgb, #ffffff 25%, transparent);
+    transform: scale(1.1);
+  }
+</style>

app/src/components/trackio/Legend.svelte

@@ -1,13 +1,28 @@
 <script>
   import { createEventDispatcher } from 'svelte';
+  
+  // Props
   export let items = [];
+  export let alignment = 'center'; // 'left', 'center', 'right' - Controls the alignment of the legend
+  
+  // Events
   const dispatch = createEventDispatcher();
   function enter(name){ dispatch('legend-hover', { name }); }
   function leave(){ dispatch('legend-leave'); }
+  
+  /**
+   * Usage examples:
+   * <Legend items={runs} alignment="left" />
+   * <Legend items={runs} alignment="center" />
+   * <Legend items={runs} alignment="right" />
+   */
 </script>
 
-<div class="legend-bottom">
-  <div class="legend-title">Runs</div>
+<div class="legend-bottom legend-align-{alignment}">
+  <div class="legend-title">
+    Runs 
+    <span class="legend-count">({items.length})</span>
+  </div>
   <div class="items">
     {#each items as it}
       <div class="item" role="presentation" data-run={it.name} on:mouseenter={() => enter(it.name)} on:mouseleave={leave}>
@@ -26,16 +41,32 @@
   .legend-bottom { 
     display: flex; 
     flex-direction: column; 
-    align-items: center; 
     gap: 6px; 
     font-size: 12px; 
-    text-align: center; 
     width: 80%; 
-    margin: 0 auto; 
     color: var(--trackio-legend-text);
     font-family: var(--trackio-font-family);
   }
   
+  /* Alignment variations */
+  .legend-align-left {
+    align-items: flex-start;
+    text-align: left;
+    margin: 0 auto 0 0;
+  }
+  
+  .legend-align-center {
+    align-items: center;
+    text-align: center;
+    margin: 0 auto;
+  }
+  
+  .legend-align-right {
+    align-items: flex-end;
+    text-align: right;
+    margin: 0 0 0 auto;
+  }
+  
   /* Force Roboto Mono in Oblivion theme */
   :global(.trackio.theme--oblivion) .legend-bottom,
   :global(.trackio.theme--oblivion) .legend-title,
@@ -50,20 +81,45 @@
     text-transform: uppercase !important;
   }
   
+  :global(.trackio.theme--oblivion) .legend-count {
+    font-weight: 500 !important;
+    text-transform: none !important;
+    letter-spacing: 0.02em !important;
+  }
+  
   .legend-title { 
     font-size: 12px; 
     font-weight: 700;
     color: var(--trackio-legend-text);
   }
   
+  .legend-count {
+    font-size: 10px;
+    font-weight: 400;
+    opacity: 0.6;
+    margin-left: 2px;
+  }
+  
   .items { 
     display: flex; 
     flex-wrap: wrap; 
     gap: 8px 14px; 
-    justify-content: center; 
     align-items: center; 
   }
   
+  /* Items alignment */
+  .legend-align-left .items {
+    justify-content: flex-start;
+  }
+  
+  .legend-align-center .items {
+    justify-content: center;
+  }
+  
+  .legend-align-right .items {
+    justify-content: flex-end;
+  }
+  
   .item { 
     display: inline-flex; 
     align-items: center; 

app/src/components/trackio/Tooltip.svelte

@@ -66,7 +66,7 @@
     color: var(--text-color);
     box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
     opacity: 0;
-    transition: opacity .12s ease;
+    transition: none;
     z-index: var(--z-tooltip, 50);
     backdrop-filter: saturate(1.12) blur(8px);
   }

app/src/components/trackio/Trackio.svelte

@@ -4,6 +4,7 @@
   import { generateRunNames, genCurves } from './data-generator.js';
   import Legend from './Legend.svelte';
   import Cell from './Cell.svelte';
+  import FullscreenModal from './FullscreenModal.svelte';
   import { onMount, onDestroy } from 'svelte';
   import { jitterTrigger } from './store.js';
 
@@ -175,6 +176,34 @@
 
 
   // Chart logic now handled by Cell.svelte
+  
+  // Fullscreen navigation state
+  let currentFullscreenIndex = 0;
+  let isModalOpen = false;
+  
+  function handleNavigate(newIndex) {
+    currentFullscreenIndex = newIndex;
+  }
+  
+  function openModal(index) {
+    currentFullscreenIndex = index;
+    isModalOpen = true;
+  }
+  
+  function closeModal() {
+    isModalOpen = false;
+  }
+  
+  // Prepare all charts data for navigation
+  $: allChartsData = cellsDef.map(c => ({
+    metricKey: c.metric,
+    titleText: c.title,
+    metricData: (preparedData && preparedData[c.metric]) || {},
+    rawMetricData: (preparedRawData && preparedRawData[c.metric]) || {}
+  }));
+  
+  // Color function for the modal
+  $: modalColorForRun = (name) => colorsByRun[name] || '#999';
 
   let cleanup = null;
   onMount(() => {
@@ -296,6 +325,7 @@
       // Ghost the chart lines and points
       hostEl.querySelectorAll('.cell').forEach(cell => {
         cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
+        cell.querySelectorAll('svg .lines path.raw-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
         cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
       });
       
@@ -313,6 +343,7 @@
       // Clear ghost from chart lines and points
       hostEl.querySelectorAll('.cell').forEach(cell => {
         cell.querySelectorAll('svg .lines path.run-line').forEach(p => p.classList.remove('ghost'));
+        cell.querySelectorAll('svg .lines path.raw-line').forEach(p => p.classList.remove('ghost'));
         cell.querySelectorAll('svg .points circle.pt').forEach(c => c.classList.remove('ghost'));
       });
       
@@ -329,12 +360,52 @@
     <Legend items={legendItems} on:legend-hover={(e) => { const run = e?.detail?.name; if (!run) return; ghostRun(run); }} on:legend-leave={() => { clearGhost(); }} />
   </div>
   <div class="trackio__grid" bind:this={gridEl}>
-    {#each cellsDef as c}
-      <Cell metricKey={c.metric} titleText={c.title} wide={c.wide} variant={variant} normalizeLoss={normalizeLoss} logScaleX={logScaleX} smoothing={smoothing} metricData={(preparedData && preparedData[c.metric]) || {}} rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}} colorForRun={(name)=> colorsByRun[name] || '#999'} hostEl={hostEl} />
+    {#each cellsDef as c, i}
+      <Cell 
+        metricKey={c.metric} 
+        titleText={c.title} 
+        wide={c.wide} 
+        {variant} 
+        {normalizeLoss} 
+        {logScaleX} 
+        {smoothing} 
+        metricData={(preparedData && preparedData[c.metric]) || {}} 
+        rawMetricData={(preparedRawData && preparedRawData[c.metric]) || {}} 
+        colorForRun={(name)=> colorsByRun[name] || '#999'} 
+        {hostEl}
+        currentIndex={i}
+        onOpenModal={openModal}
+      />
     {/each}
   </div>
+  <div class="trackio__footer">
+    <small>
+      Built with <a href="https://github.com/huggingface/trackio" target="_blank" rel="noopener noreferrer">TrackIO</a>
+      <span class="separator">•</span>
+      <a href="https://huggingface.co/docs/hub/spaces-sdks-docker" target="_blank" rel="noopener noreferrer">Use via API</a>
+    </small>
+  </div>
 </div>
 
+<!-- Centralized Fullscreen Modal -->
+<FullscreenModal
+  visible={isModalOpen}
+  title={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  metricData={allChartsData[currentFullscreenIndex]?.metricData || {}}
+  rawMetricData={allChartsData[currentFullscreenIndex]?.rawMetricData || {}}
+  colorForRun={modalColorForRun}
+  {variant}
+  {logScaleX}
+  {smoothing}
+  {normalizeLoss}
+  metricKey={allChartsData[currentFullscreenIndex]?.metricKey || ''}
+  titleText={allChartsData[currentFullscreenIndex]?.titleText || ''}
+  currentIndex={currentFullscreenIndex}
+  totalCharts={cellsDef.length}
+  onNavigate={handleNavigate}
+  on:close={closeModal}
+/>
+
 <style>
   /* =========================
      TRACKIO THEME SYSTEM
@@ -576,6 +647,51 @@
   .trackio.theme--oblivion .grid-dots { display: block; }
   .trackio.theme--oblivion .cell-bg,
   .trackio.theme--oblivion .cell-corners { display: block; }
+
+  /* =========================
+     FOOTER
+     ========================= */
+
+  .trackio__footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12px;
+    padding-top: 6px;
+    opacity: 1;
+  }
+
+  .trackio__footer small {
+    font-size: 10px;
+    color: var(--trackio-text-secondary);
+    font-family: var(--trackio-font-family);
+    opacity: 0.7;
+  }
+
+  .trackio__footer a {
+    color: var(--trackio-text-secondary);
+    text-decoration: none;
+    border-top: 1px solid var(--trackio-chart-grid-stroke);
+    font-weight: var(--trackio-font-weight-normal);
+    transition: opacity 0.15s ease;
+  }
+
+  .trackio__footer a:hover {
+    text-decoration: none;
+  }
+
+  .trackio__footer .separator {
+    margin: 0 6px;
+  }
+
+  /* Oblivion theme footer adjustments */
+  .trackio.theme--oblivion .trackio__footer {
+    border-top-color: var(--trackio-oblivion-dim);
+  }
+
+  .trackio.theme--oblivion .trackio__footer small {
+    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  }
 </style>
 
 

app/src/components/trackio/themes/_components.css

@@ -1,561 +0,0 @@
-/* =========================
-   TRACKIO COMPONENT STYLES
-   Shared component styling across themes
-   ========================= */
-
-/* =========================
-   CELL COMPONENTS
-   ========================= */
-
-/* Base cell structure */
-:global(.trackio .cell) {
-  border: 1px solid var(--trackio-cell-border);
-  border-radius: var(--trackio-border-radius);
-  background: var(--trackio-cell-background);
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-/* Cell background layer - hidden by default */
-:global(.trackio .cell-bg) {
-  position: absolute;
-  inset: 10px;
-  pointer-events: none;
-  z-index: 1;
-  border-radius: 4px;
-  display: none;
-}
-
-/* Cell corners layer - hidden by default */
-:global(.trackio .cell-corners) {
-  position: absolute;
-  inset: 6px;
-  pointer-events: none;
-  z-index: 3;
-  display: none;
-  opacity: 0.85;
-}
-
-:global(.trackio .cell-inner) {
-  position: relative;
-  z-index: 2;
-  padding: var(--trackio-inner-padding);
-  display: flex;
-  flex-direction: column;
-}
-
-:global(.trackio .cell-header) {
-  padding: 8px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-:global(.trackio .cell-title) {
-  font-size: 13px;
-  font-weight: var(--trackio-font-weight-bold);
-  color: var(--trackio-text-primary);
-  font-family: var(--trackio-font-family);
-}
-
-:global(.trackio .cell-body) {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-:global(.trackio .cell-body svg) {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-/* Wide cell spans full width */
-:global(.trackio__grid .cell--wide) {
-  grid-column: 1 / -1;
-}
-
-/* =========================
-   LEGEND COMPONENTS
-   ========================= */
-
-.legend-bottom { 
-  display: flex; 
-  flex-direction: column; 
-  align-items: center; 
-  gap: 6px; 
-  font-size: 12px; 
-  text-align: center; 
-  width: 80%; 
-  margin: 0 auto; 
-  color: var(--trackio-legend-text);
-  font-family: var(--trackio-font-family);
-}
-
-.legend-title { 
-  font-size: 12px; 
-  font-weight: var(--trackio-font-weight-bold);
-  color: var(--trackio-legend-text);
-}
-
-.items { 
-  display: flex; 
-  flex-wrap: wrap; 
-  gap: 8px 14px; 
-  justify-content: center; 
-  align-items: center; 
-}
-
-.item { 
-  display: inline-flex; 
-  align-items: center; 
-  gap: 6px; 
-  white-space: nowrap; 
-  cursor: pointer; 
-  padding: 2px 4px; 
-  transition: opacity var(--trackio-transition-normal);
-  color: var(--trackio-legend-text);
-}
-
-.swatch { 
-  width: 14px; 
-  height: 14px; 
-  border-radius: 3px; 
-  border: 1px solid var(--trackio-legend-swatch-border); 
-  display: inline-block; 
-}
-
-/* Ghost hover effect */
-:global(.trackio.hovering .ghost) {
-  opacity: 0.2;
-  transition: opacity var(--trackio-transition-normal);
-}
-
-:global(.trackio.hovering) .item.ghost { 
-  opacity: 0.2; 
-}
-
-/* =========================
-   TOOLTIP COMPONENTS
-   ========================= */
-
-.d3-tooltip {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(-9999px, -9999px);
-  pointer-events: none;
-  padding: 10px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  line-height: 1.35;
-  border: 1px solid var(--trackio-tooltip-border);
-  background: var(--trackio-tooltip-background);
-  color: var(--trackio-text-primary);
-  box-shadow: var(--trackio-tooltip-shadow);
-  opacity: 0;
-  transition: opacity var(--trackio-transition-fast);
-  z-index: var(--z-tooltip);
-  backdrop-filter: saturate(1.12) blur(8px);
-}
-
-.d3-tooltip.is-visible { 
-  opacity: 1; 
-}
-
-.d3-tooltip__inner { 
-  display: flex; 
-  flex-direction: column; 
-  gap: 6px; 
-  min-width: 220px; 
-}
-
-.d3-tooltip__inner > div:first-child { 
-  font-weight: var(--trackio-font-weight-extra-bold); 
-  letter-spacing: 0.1px; 
-  margin-bottom: 0; 
-}
-
-.d3-tooltip__inner > div:nth-child(2) { 
-  font-size: 11px; 
-  color: var(--trackio-text-secondary); 
-  display: block; 
-  margin-top: -4px; 
-  margin-bottom: 2px; 
-  letter-spacing: 0.1px; 
-}
-
-.d3-tooltip__inner > div.row { 
-  padding-top: 6px; 
-  border-top: 1px solid var(--trackio-tooltip-border); 
-  display: flex; 
-  align-items: center; 
-  gap: 8px; 
-  white-space: nowrap; 
-}
-
-.dot { 
-  display: inline-block; 
-  width: 12px; 
-  height: 12px; 
-  border-radius: 3px; 
-  border: 1px solid var(--trackio-tooltip-border); 
-}
-
-.val { 
-  margin-left: auto; 
-  text-align: right; 
-}
-
-/* =========================
-   FULLSCREEN COMPONENTS
-   ========================= */
-
-/* Fullscreen button */
-.cell-fullscreen-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 0;
-  background: transparent;
-  color: var(--trackio-chart-axis-text);
-  opacity: 0.6;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: opacity var(--trackio-transition-normal);
-}
-
-.cell-fullscreen-btn:hover {
-  opacity: 1;
-}
-
-.cell-fullscreen-btn svg {
-  width: 18px;
-  height: 18px;
-  fill: var(--trackio-chart-axis-text);
-}
-
-/* Fullscreen modal */
-:global(.trackio-fullscreen-overlay) {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-overlay);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--trackio-transition-slow);
-}
-
-:global(.trackio-fullscreen-overlay.is-open) {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-:global(.trackio-fullscreen-modal) {
-  position: relative;
-  width: min(95vw, 1400px);
-  height: min(95vh, 900px);
-  background: var(--surface-bg);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-
-:global(.trackio-fullscreen-close) {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  font-size: 20px;
-  transition: background-color var(--trackio-transition-normal);
-}
-
-:global(.trackio-fullscreen-close:hover) {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-/* Hide fullscreen button when in modal */
-:global(.trackio-fullscreen-modal .cell-fullscreen-btn) {
-  display: none;
-}
-
-/* Fullscreen cell styling */
-:global(.trackio-fullscreen-modal .cell) {
-  width: 100%;
-  height: 100%;
-  border: none;
-  border-radius: 0;
-}
-
-:global(.trackio-fullscreen-modal .cell-inner) {
-  height: 100%;
-}
-
-:global(.trackio-fullscreen-modal .cell-body) {
-  flex: 1;
-  height: calc(100% - 50px);
-}
-
-:global(.trackio-fullscreen-modal .cell-body svg) {
-  width: 100% !important;
-  height: 100% !important;
-  max-width: none !important;
-  max-height: none !important;
-}
-
-/* =========================
-   CHART STYLING
-   ========================= */
-
-/* Legacy axis/grid selectors - for compatibility */
-.trackio .axes path,
-.trackio .axes line {
-  stroke: var(--trackio-chart-axis-stroke);
-}
-
-.trackio .axes text {
-  fill: var(--trackio-chart-axis-text);
-  font-family: var(--trackio-font-family);
-}
-
-.trackio .grid line {
-  stroke: var(--trackio-chart-grid-stroke);
-  opacity: var(--trackio-chart-grid-opacity);
-}
-
-/* Minor ticks styling for logarithmic scales */
-:global(.trackio .minor-ticks line.minor-tick) {
-  stroke: var(--trackio-chart-axis-stroke);
-  stroke-opacity: 0.4;
-  stroke-width: 0.5px;
-}
-
-/* Grid type switching */
-.trackio .grid-dots { 
-  display: none; 
-}
-
-/* =========================
-   OBLIVION THEME COMPONENT OVERRIDES
-   ========================= */
-
-/* Oblivion cell specific styling */
-:global(.trackio.theme--oblivion .cell-inner) {
-  padding: var(--trackio-oblivion-hud-corner-size, 8px) 12px 10px var(--trackio-oblivion-hud-gap, 10px);
-}
-
-:global(.trackio.theme--oblivion .cell-bg) {
-  display: block !important;
-  background: 
-    radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%),
-    radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
-}
-
-:global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-bg) {
-  background:
-    radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
-    radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%),
-    linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%);
-}
-
-:global(.trackio.theme--oblivion .cell-corners) {
-  display: block !important;
-  inset: 6px;
-  background:
-    linear-gradient(#000000, #000000) top left / 8px 1px no-repeat,
-    linear-gradient(#000000, #000000) top left / 1px 8px no-repeat,
-    linear-gradient(#000000, #000000) top right / 8px 1px no-repeat,
-    linear-gradient(#000000, #000000) top right / 1px 8px no-repeat,
-    linear-gradient(#000000, #000000) bottom left / 8px 1px no-repeat,
-    linear-gradient(#000000, #000000) bottom left / 1px 8px no-repeat,
-    linear-gradient(#000000, #000000) bottom right / 8px 1px no-repeat,
-    linear-gradient(#000000, #000000) bottom right / 1px 8px no-repeat;
-  opacity: 1;
-  z-index: 3;
-}
-
-:global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-corners) {
-  background:
-    linear-gradient(#ffffff, #ffffff) top left / 8px 1px no-repeat,
-    linear-gradient(#ffffff, #ffffff) top left / 1px 8px no-repeat,
-    linear-gradient(#ffffff, #ffffff) top right / 8px 1px no-repeat,
-    linear-gradient(#ffffff, #ffffff) top right / 1px 8px no-repeat,
-    linear-gradient(#ffffff, #ffffff) bottom left / 8px 1px no-repeat,
-    linear-gradient(#ffffff, #ffffff) bottom left / 1px 8px no-repeat,
-    linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
-    linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
-}
-
-:global(.trackio.theme--oblivion .cell-header) {
-  padding: 5px 0px 18px 12px;
-}
-
-:global(.trackio.theme--oblivion .cell-title) {
-  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--trackio-oblivion-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-  padding-left: 0;
-}
-
-:global(.trackio.theme--oblivion .cell-title)::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 6px;
-  height: 6px;
-  background: var(--trackio-oblivion-primary);
-  border: 1px solid var(--trackio-oblivion-dim);
-  box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent) inset;
-  opacity: 0.5;
-}
-
-/* Force Roboto Mono in Oblivion theme for legend */
-:global(.trackio.theme--oblivion) .legend-bottom,
-:global(.trackio.theme--oblivion) .legend-title,
-:global(.trackio.theme--oblivion) .item {
-  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
-  letter-spacing: 0.06em;
-}
-
-:global(.trackio.theme--oblivion) .legend-title {
-  font-weight: 900 !important;
-  letter-spacing: 0.18em !important;
-  text-transform: uppercase !important;
-}
-
-/* Oblivion theme: enhanced minor ticks */
-:global(.trackio.theme--oblivion .minor-ticks line.minor-tick) {
-  stroke: var(--trackio-oblivion-dim);
-  stroke-opacity: 0.6;
-  stroke-width: 0.8px;
-}
-
-/* Force font-family for SVG text in Oblivion */
-.trackio.theme--oblivion .axes text {
-  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
-}
-
-/* =========================
-   OBLIVION TOOLTIP STYLES
-   ========================= */
-
-/* Tooltip variables for Oblivion theme */
-:global(.trackio.theme--oblivion) .d3-tooltip {
-  /* Light mode variables */
-  --tooltip-oblivion-base: #2a2a2a;
-  --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
-  --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
-  --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
-  --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
-  --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base) 8%, transparent);
-  --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
-  --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.08);
-  --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.15);
-}
-
-/* Dark mode variables */
-:global([data-theme="dark"]) :global(.trackio.theme--oblivion) .d3-tooltip {
-  --tooltip-oblivion-base: #ffffff;
-  --tooltip-oblivion-bg-primary: color-mix(in srgb, var(--tooltip-oblivion-base) 15%, transparent);
-  --tooltip-oblivion-bg-secondary: color-mix(in srgb, var(--tooltip-oblivion-base) 10%, transparent);
-  --tooltip-oblivion-bg-base: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
-  --tooltip-oblivion-border: color-mix(in srgb, var(--tooltip-oblivion-base) 5%, transparent);
-  --tooltip-oblivion-shadow: color-mix(in srgb, var(--tooltip-oblivion-base) 8%, transparent);
-  --tooltip-oblivion-text: color-mix(in srgb, var(--tooltip-oblivion-base) 90%, transparent);
-  --tooltip-oblivion-line-dark: rgba(0, 0, 0, 0.15);
-  --tooltip-oblivion-line-light: rgba(255, 255, 255, 0.08);
-}
-
-/* Oblivion tooltip styling */
-:global(.trackio.theme--oblivion) .d3-tooltip {
-  border-radius: 8px;
-  border: none;
-  background: 
-    radial-gradient(400px 100px at 30% 0%, var(--tooltip-oblivion-bg-primary), transparent 70%),
-    radial-gradient(300px 80px at 70% 100%, var(--tooltip-oblivion-bg-secondary), transparent 70%),
-    var(--tooltip-oblivion-bg-base);
-  color: var(--tooltip-oblivion-text);
-  box-shadow: 
-    0 0 0 1px var(--tooltip-oblivion-border),
-    0 8px 40px var(--tooltip-oblivion-shadow),
-    0 2px 8px rgba(0, 0, 0, 0.05);
-  backdrop-filter: saturate(1.1) blur(10px);
-  opacity: 0.5;
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip.is-visible {
-  opacity: 1;
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip__inner > div:first-child {
-  font-weight: 900;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--tooltip-oblivion-text);
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip__inner > div:nth-child(2) {
-  color: var(--tooltip-oblivion-text);
-  opacity: 0.4;
-  letter-spacing: 0.06em;
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row {
-  position: relative;
-  padding-top: 10px;
-  margin-top: 6px;
-  border-top: none;
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 1px;
-  background: var(--tooltip-oblivion-line-dark);
-}
-
-:global(.trackio.theme--oblivion) .d3-tooltip__inner > div.row::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 1px;
-  height: 1px;
-  background: var(--tooltip-oblivion-line-light);
-}
-
-:global(.trackio.theme--oblivion) .dot {
-  border-radius: 2px;
-  border: 1px solid var(--trackio-chart-axis-stroke);
-  box-shadow: 0 0 10px color-mix(in srgb, var(--trackio-oblivion-base) 20%, transparent) inset;
-}

app/src/components/trackio/themes/_theme-base.css

@@ -1,49 +0,0 @@
-/* =========================
-   TRACKIO THEME SYSTEM
-   Base theme variables and typography
-   ========================= */
-
-/* Font imports for themes */
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700;800;900&display=swap');
-
-/* Fallback font-face declaration */
-@font-face {
-  font-family: 'Roboto Mono Fallback';
-  src: url('https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4AJi8SJQt.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Base variables - all themes inherit these */
-.trackio {
-  position: relative;
-  --z-tooltip: 50;
-  --z-overlay: 99999999;
-  
-  /* Typography system */
-  --trackio-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  --trackio-font-weight-normal: 400;
-  --trackio-font-weight-medium: 600;
-  --trackio-font-weight-bold: 700;
-  --trackio-font-weight-extra-bold: 800;
-  --trackio-font-weight-black: 900;
-  
-  /* Apply font-family to root element */
-  font-family: var(--trackio-font-family);
-  
-  /* Layout system */
-  --trackio-cell-gap: 12px;
-  --trackio-border-radius: 10px;
-  --trackio-inner-padding: 8px 12px 10px 10px;
-  
-  /* Animation system */
-  --trackio-transition-fast: 0.12s ease;
-  --trackio-transition-normal: 0.15s ease;
-  --trackio-transition-slow: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-/* Dark mode base adjustments */
-:global([data-theme="dark"]) .trackio {
-  /* Dark mode base overrides will be defined in individual theme files */
-}

app/src/components/trackio/themes/_theme-classic.css

@@ -1,69 +0,0 @@
-/* =========================
-   TRACKIO THEME: CLASSIC
-   Clean, traditional interface theme
-   ========================= */
-
-.trackio.theme--classic {
-  /* Base color system */
-  --trackio-base: #323232;
-  --trackio-primary: var(--trackio-base);
-  --trackio-dim: color-mix(in srgb, var(--trackio-base) 28%, transparent);
-  --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
-  --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
-  
-  /* Chart rendering */
-  --trackio-chart-grid-type: 'lines';
-  --trackio-chart-axis-stroke: var(--trackio-dim);
-  --trackio-chart-axis-text: var(--trackio-text);
-  --trackio-chart-grid-stroke: var(--trackio-subtle);
-  --trackio-chart-grid-opacity: 1;
-  
-  /* Cell styling */
-  --trackio-cell-background: rgba(0, 0, 0, 0.02);
-  --trackio-cell-border: var(--border-color, rgba(0, 0, 0, 0.1));
-  --trackio-cell-corner-inset: 0px;
-  
-  /* Typography */
-  --trackio-text-primary: var(--text-color, rgba(0, 0, 0, 0.9));
-  --trackio-text-secondary: var(--muted-color, rgba(0, 0, 0, 0.6));
-  --trackio-text-accent: var(--primary-color, #E889AB);
-  
-  /* Tooltip */
-  --trackio-tooltip-background: var(--surface-bg, white);
-  --trackio-tooltip-border: var(--border-color, rgba(0, 0, 0, 0.1));
-  --trackio-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-  
-  /* Legend */
-  --trackio-legend-text: var(--text-color, rgba(0, 0, 0, 0.9));
-  --trackio-legend-swatch-border: var(--border-color, rgba(0, 0, 0, 0.1));
-}
-
-/* Dark mode overrides for Classic theme */
-:global([data-theme="dark"]) .trackio.theme--classic {
-  --trackio-base: #ffffff;
-  --trackio-primary: var(--trackio-base);
-  --trackio-dim: color-mix(in srgb, var(--trackio-base) 25%, transparent);
-  --trackio-text: color-mix(in srgb, var(--trackio-base) 60%, transparent);
-  --trackio-subtle: color-mix(in srgb, var(--trackio-base) 8%, transparent);
-  
-  /* Cell background for dark mode */
-  --trackio-cell-background: rgba(255, 255, 255, 0.03);
-  
-  /* Chart adjustments */
-  --trackio-chart-axis-stroke: rgba(255, 255, 255, 0.18);
-  --trackio-chart-axis-text: rgba(255, 255, 255, 0.60);
-  --trackio-chart-grid-stroke: rgba(255, 255, 255, 0.08);
-}
-
-/* Classic theme cell styling */
-.trackio.theme--classic .cell {
-  border: 1px solid var(--trackio-cell-border) !important;
-  background: var(--trackio-cell-background) !important;
-  border-radius: var(--trackio-border-radius) !important;
-}
-
-/* Classic theme ensures borders are visible */
-.trackio.theme--classic .cell-bg,
-.trackio.theme--classic .cell-corners {
-  display: none !important;
-}

app/src/components/trackio/themes/_theme-neon.css

@@ -1,73 +0,0 @@
-/* =========================
-   TRACKIO THEME: NEON
-   Cyberpunk-inspired neon theme (example)
-   ========================= */
-
-.trackio.theme--neon {
-  /* Neon color system */
-  --trackio-neon-base: #00ffff;
-  --trackio-neon-secondary: #ff00ff;
-  --trackio-neon-accent: #ffff00;
-  --trackio-neon-dim: color-mix(in srgb, var(--trackio-neon-base) 40%, transparent);
-  --trackio-neon-subtle: color-mix(in srgb, var(--trackio-neon-base) 15%, transparent);
-  --trackio-neon-glow: 0 0 20px var(--trackio-neon-base);
-  
-  /* Chart rendering overrides */
-  --trackio-chart-grid-type: 'lines';
-  --trackio-chart-axis-stroke: var(--trackio-neon-dim);
-  --trackio-chart-axis-text: var(--trackio-neon-base);
-  --trackio-chart-grid-stroke: var(--trackio-neon-subtle);
-  --trackio-chart-grid-opacity: 0.8;
-  
-  /* Cell styling */
-  --trackio-cell-background: rgba(0, 0, 0, 0.8);
-  --trackio-cell-border: 2px solid var(--trackio-neon-base);
-  --trackio-cell-gap: 16px;
-  
-  /* Typography */
-  --trackio-font-family: 'Courier New', monospace;
-  --trackio-text-primary: var(--trackio-neon-base);
-  --trackio-text-secondary: var(--trackio-neon-dim);
-  --trackio-text-accent: var(--trackio-neon-secondary);
-  
-  /* Neon glow effects */
-  background: #000;
-  color: var(--trackio-neon-base);
-  text-shadow: var(--trackio-neon-glow);
-}
-
-/* Dark mode (enhanced neon) */
-:global([data-theme="dark"]) .trackio.theme--neon {
-  --trackio-neon-glow: 0 0 30px var(--trackio-neon-base);
-  background: #000010;
-}
-
-/* Neon cell effects */
-.trackio.theme--neon .cell {
-  border: 2px solid var(--trackio-neon-base) !important;
-  box-shadow: 
-    0 0 20px color-mix(in srgb, var(--trackio-neon-base) 30%, transparent),
-    inset 0 0 20px color-mix(in srgb, var(--trackio-neon-base) 10%, transparent);
-  background: rgba(0, 0, 0, 0.9) !important;
-}
-
-/* Neon title styling */
-.trackio.theme--neon .cell-title {
-  color: var(--trackio-neon-base);
-  text-shadow: var(--trackio-neon-glow);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-/* Neon grid styling */
-.trackio.theme--neon .grid line {
-  filter: drop-shadow(0 0 3px var(--trackio-neon-base));
-}
-
-/* Neon legend styling */
-.trackio.theme--neon .legend-title {
-  color: var(--trackio-neon-secondary);
-  text-shadow: 0 0 15px var(--trackio-neon-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-}

app/src/components/trackio/themes/_theme-oblivion.css

@@ -1,106 +0,0 @@
-/* =========================
-   TRACKIO THEME: OBLIVION
-   Futuristic HUD-style interface theme
-   ========================= */
-
-.trackio.theme--oblivion {
-  /* Core oblivion color system - Light mode: darker colors for visibility */
-  --trackio-oblivion-base: #2a2a2a;
-  --trackio-oblivion-primary: var(--trackio-oblivion-base);
-  --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 30%, transparent);
-  --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
-  --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
-  
-  /* Chart rendering overrides */
-  --trackio-chart-grid-type: 'dots';
-  --trackio-chart-axis-stroke: var(--trackio-oblivion-dim);
-  --trackio-chart-axis-text: var(--trackio-oblivion-primary);
-  --trackio-chart-grid-stroke: var(--trackio-oblivion-dim);
-  --trackio-chart-grid-opacity: 0.6;
-  
-  /* Cell styling overrides */
-  --trackio-cell-background: var(--trackio-oblivion-subtle);
-  --trackio-cell-border: var(--trackio-oblivion-dim);
-  --trackio-cell-corner-inset: 6px;
-  --trackio-cell-gap: 0px;
-  
-  /* HUD-specific variables */
-  --trackio-oblivion-hud-gap: 10px;
-  --trackio-oblivion-hud-corner-size: 8px;
-  --trackio-oblivion-hud-bg-gradient: 
-    radial-gradient(1200px 200px at 20% -10%, var(--trackio-oblivion-ghost), transparent 80%),
-    radial-gradient(900px 200px at 80% 110%, var(--trackio-oblivion-ghost), transparent 80%);
-  
-  /* Typography overrides */
-  --trackio-font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
-  --trackio-text-primary: var(--trackio-oblivion-primary);
-  --trackio-text-secondary: var(--trackio-oblivion-dim);
-  --trackio-text-accent: var(--trackio-oblivion-primary);
-  
-  /* Tooltip overrides */
-  --trackio-tooltip-background: var(--trackio-oblivion-subtle);
-  --trackio-tooltip-border: var(--trackio-oblivion-dim);
-  --trackio-tooltip-shadow: 
-    0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent),
-    0 2px 8px color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent);
-  
-  /* Legend overrides */
-  --trackio-legend-text: var(--trackio-oblivion-primary);
-  --trackio-legend-swatch-border: var(--trackio-oblivion-dim);
-  
-  /* Force font application */
-  font-family: var(--trackio-font-family) !important;
-  color: var(--trackio-text-primary);
-}
-
-/* Dark mode overrides for Oblivion theme */
-:global([data-theme="dark"]) .trackio.theme--oblivion {
-  --trackio-oblivion-base: #ffffff;
-  --trackio-oblivion-primary: var(--trackio-oblivion-base);
-  --trackio-oblivion-dim: color-mix(in srgb, var(--trackio-oblivion-base) 25%, transparent);
-  --trackio-oblivion-subtle: color-mix(in srgb, var(--trackio-oblivion-base) 8%, transparent);
-  --trackio-oblivion-ghost: color-mix(in srgb, var(--trackio-oblivion-base) 4%, transparent);
-  
-  --trackio-oblivion-hud-bg-gradient: 
-    radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, var(--trackio-oblivion-base) 6.5%, transparent), transparent 80%),
-    radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, var(--trackio-oblivion-base) 6%, transparent), transparent 80%),
-    linear-gradient(180deg, color-mix(in srgb, var(--trackio-oblivion-base) 3.5%, transparent), transparent 45%);
-  
-  --trackio-tooltip-shadow: 
-    0 8px 32px color-mix(in srgb, var(--trackio-oblivion-base) 5%, transparent),
-    0 2px 8px color-mix(in srgb, black 10%, transparent);
-  
-  background: #0f1115;
-}
-
-/* Force Roboto Mono application in Oblivion theme */
-.trackio.theme--oblivion,
-.trackio.theme--oblivion * {
-  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
-}
-
-/* Specific overrides for different elements in Oblivion */
-.trackio.theme--oblivion .cell-title,
-.trackio.theme--oblivion .legend-bottom,
-.trackio.theme--oblivion .legend-title,
-.trackio.theme--oblivion .item {
-  font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
-}
-
-/* Oblivion theme: remove default cell border */
-.trackio.theme--oblivion .cell {
-  border: none !important;
-  background: transparent !important;
-}
-
-/* Grid type switching for Oblivion */
-.trackio.theme--oblivion .grid { 
-  display: none; 
-}
-.trackio.theme--oblivion .grid-dots { 
-  display: block; 
-}
-.trackio.theme--oblivion .cell-bg,
-.trackio.theme--oblivion .cell-corners { 
-  display: block; 
-}

app/src/components/trackio/themes/index.css

@@ -1,41 +0,0 @@
-/* =========================
-   TRACKIO THEME SYSTEM
-   Main theme entry point
-   ========================= */
-
-/* Import base theme system */
-@import './_theme-base.css';
-
-/* Import component styles */
-@import './_components.css';
-
-/* Import individual themes */
-@import './_theme-classic.css';
-@import './_theme-oblivion.css';
-@import './_theme-neon.css';
-
-/* =========================
-   LAYOUT SYSTEM
-   ========================= */
-
-.trackio__grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--trackio-cell-gap);
-}
-
-@media (max-width: 980px) {
-  .trackio__grid { 
-    grid-template-columns: 1fr; 
-  }
-}
-
-.trackio__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 12px;
-  margin: 0 0 10px 0;
-  flex-wrap: wrap;
-  width: 100%;
-}

app/src/content/assets/data/{comparison/id_2_query.png → llm_benchmarks.json}

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:51f839032e3f0483a4e572bde8493f56eda776f535d1770d507bfa3122899e0a
-size 18115
+oid sha256:55d9bff23e8f076125669cbbb8011d8cfe282b1efc3e8d7f9332cee4e8cf3f29
+size 1513

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

@@ -72,7 +72,6 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
 ---
 <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" />
 
-### Trackio
----
+### Trackio redesign experiment
 <TrackioWrapper />
 

app/src/content/embeds/d3-trackio-oblivion.html

@@ -1,670 +0,0 @@
-<div class="d3-trackio-oblivion">
-  <div class="d3-trackio-oblivion__grid">
-    <div class="cell" data-metric="epoch" data-title="epoch"></div>
-    <div class="cell" data-metric="train_accuracy" data-title="train_accuracy"></div>
-    <div class="cell" data-metric="train_loss" data-title="train_loss"></div>
-    <div class="cell" data-metric="val_accuracy" data-title="val_accuracy"></div>
-    <div class="cell cell--wide" data-metric="val_loss" data-title="val_loss"></div>
-  </div>
-  <noscript>JavaScript is required to render this chart.</noscript>
-</div>
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
-  /* Futuristic "Oblivion"-inspired styling */
-  .d3-trackio-oblivion { position: relative;
-    --cell-gap: 0px;
-    /* Default: light/neutral theme */
-    --obl-base: #323232; /* base hue for the UI (light theme) */
-    --obl-cyan: var(--obl-base);
-    --obl-cyan-dim: color-mix(in srgb, var(--obl-base) 28%, transparent);
-    --obl-bg: color-mix(in srgb, var(--obl-base) 4%, transparent);
-    --obl-border: color-mix(in srgb, var(--obl-base) 22%, transparent);
-    --ghost-obl-border: color-mix(in srgb, var(--obl-base) 6%, transparent);
-    --obl-glow: 0 0 0 1px color-mix(in srgb, var(--obl-base) 5%, transparent), 0 8px 40px color-mix(in srgb, var(--obl-base) 6%, transparent);
-    /* Engraved separator colors (light theme) */
-    --engrave-light: color-mix(in srgb, white 15%, transparent);
-    --engrave-dark: color-mix(in srgb, var(--obl-base) 10%, transparent);
-    background: transparent;
-    --corner-inset: 6px;
-    --hud-gap: 10px;
-    --hud-corner-size: 8px;
-    /* Chart background gradient as a variable for easy theming */
-    --hud-bg-gradient: radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%), radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
-    /* Tooltip offset (bottom-right of cursor) */
-    --tip-offset-x: 10px;
-    --tip-offset-y: 10px;
-    padding: var(--hud-gap);
-    --z-tooltip: 50;
-    --z-overlay: 99999999;
-    z-index: var(--z-tooltip);
-    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
- }
-  .d3-trackio-oblivion * { font-family: inherit;
-   }
-  /* Dark mode: cyan/Oblivion theme */
-  [data-theme="dark"] .d3-trackio-oblivion {
-    --obl-base: #ffffff; /* base hue for the UI (dark theme) */
-    --obl-cyan: var(--obl-base);
-    --obl-cyan-dim: color-mix(in srgb, var(--obl-base) 25%, transparent);
-    --obl-bg: color-mix(in srgb, var(--obl-base) 6%, transparent);
-    --obl-border: color-mix(in srgb, var(--obl-base) 25%, transparent);
-    --ghost-obl-border: color-mix(in srgb, var(--obl-base) 2%, transparent);
-    --obl-glow: 0 0 0 1px color-mix(in srgb, var(--obl-base) 35%, transparent), 0 8px 40px color-mix(in srgb, var(--obl-base) 12%, transparent);
-    /* Richer cyan gradients for the classic Oblivion blue feel */
-    --hud-bg-gradient:
-      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, var(--obl-base) 6.5%, transparent), transparent 80%),
-      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, var(--obl-base) 6%, transparent), transparent 80%),
-      linear-gradient(180deg, color-mix(in srgb, var(--obl-base) 3.5%, transparent), transparent 45%);
-    /* Engraved separator colors (dark theme) */
-    --engrave-light: color-mix(in srgb, var(--obl-base) 5%, transparent);
-    --engrave-dark: color-mix(in srgb, black 15%, transparent);
-    background: #0f1115;
-  }
-  /* Tooltip shadows: neutral by default, bluish tint in dark */
-  .d3-trackio-oblivion .d3-tooltip { box-shadow: 0 8px 32px color-mix(in srgb, var(--obl-base) 8%, transparent), 0 2px 8px color-mix(in srgb, var(--obl-base) 6%, transparent); }
-  [data-theme="dark"] .d3-trackio-oblivion .d3-tooltip { box-shadow: 0 8px 32px color-mix(in srgb, var(--obl-base) 5%, transparent), 0 2px 8px color-mix(in srgb, black 10%, transparent); }
-
-  .d3-trackio-oblivion__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: --cell-gap; }
-  @media (max-width: 980px) { .d3-trackio-oblivion__grid { grid-template-columns: 1fr; } }
-  .d3-trackio-oblivion__grid .cell--wide { grid-column: 1 / -1; }
-
-  .d3-trackio-oblivion .cell {
-    /* border: 1px solid var(--obl-border);
-    border-radius: 4px;
-    background: var(--obl-bg);
-    backdrop-filter: saturate(1.1) blur(10px);
-    box-shadow: var(--obl-glow); */
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    /* Important: allow tooltip to overflow outside cell bounds */
-    overflow: visible;
-    z-index: 0;
-    
-  }
-  .d3-trackio-oblivion .cell:hover { z-index: 50; }
-  /* Background and corners are explicit elements for maintainability */
-  .d3-trackio-oblivion .cell-bg { position: absolute; inset: var(--hud-gap); pointer-events: none; z-index: 1; background: var(--hud-bg-gradient);  border-radius: 4px!important;}
-  .d3-trackio-oblivion .cell-corners { position: absolute; inset: var(--corner-inset); pointer-events: none; z-index: 3; background:
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top left / var(--hud-corner-size) 1px no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top left / 1px var(--hud-corner-size) no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top right / var(--hud-corner-size) 1px no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) top right / 1px var(--hud-corner-size) no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom left / var(--hud-corner-size) 1px no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom left / 1px var(--hud-corner-size) no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom right / var(--hud-corner-size) 1px no-repeat,
-      linear-gradient(var(--obl-cyan), var(--obl-cyan)) bottom right / 1px var(--hud-corner-size) no-repeat; opacity:.85; }
-  .d3-trackio-oblivion .cell-inner { position: relative; z-index: 2; padding: var(--hud-corner-size) 12px 10px var(--hud-gap); display:flex; flex-direction:column; }
-  .d3-trackio-oblivion .cell-header { padding: 10px 6px 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  .d3-trackio-oblivion .cell-title { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--obl-cyan); padding-left: 14px; }
-  .d3-trackio-oblivion .cell-title:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width: 6px; height: 6px; background: var(--obl-cyan); border: 1px solid var(--obl-border); box-shadow: 0 0 10px color-mix(in srgb, var(--obl-base) 25%, transparent) inset; opacity: .5; }
-  /* Fullscreen button (icon only, no behavior here) */
-  .d3-trackio-oblivion .cell-action { padding: 0 !important; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--obl-cyan); opacity: .5; cursor: pointer; z-index: 4; }
-  .d3-trackio-oblivion .cell-action:hover { opacity: .7; }
-  .d3-trackio-oblivion .cell-action svg { width: 22px; height: 22px; opacity: .6; margin-left: 5px; fill: var(--interaction-color); }
-  .d3-trackio-oblivion .cell-action svg, .d3-trackio-oblivion .cell-action svg path { fill: currentColor; stroke: none; }
-  [data-theme="dark"] .d3-trackio-oblivion .cell-action svg { opacity: .85; }
-  .d3-trackio-oblivion .cell-body { position: relative; width: 100%; overflow: hidden; }
-  .d3-trackio-oblivion .cell-body svg { max-width: 100%; height: auto; display: block; }
-
-  /* Axes & grid use cyan tint */
-  .d3-trackio-oblivion .axes path, .d3-trackio-oblivion .axes line { stroke: var(--obl-cyan-dim); stroke-opacity: 1; }
-  .d3-trackio-oblivion .axes text { fill: var(--obl-cyan); opacity: .6; font-weight: 400; letter-spacing: 0.02em; }
-  .d3-trackio-oblivion .grid line { stroke: var(--obl-cyan-dim); stroke-opacity: .5; }
-
-  /* Legend header */
-  .d3-trackio-oblivion__header { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin: 0 0 10px 0; flex-wrap: wrap; width: 100%; }
-  .d3-trackio-oblivion__header .legend-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--obl-cyan); text-align: center; }
-  .d3-trackio-oblivion__header .legend-bottom .legend-title { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--obl-cyan); text-transform: uppercase; }
-  .d3-trackio-oblivion__header .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
-  .d3-trackio-oblivion__header .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--obl-cyan); }
-  .d3-trackio-oblivion__header .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--ghost-obl-border); display: inline-block; box-shadow: 0 0 12px color-mix(in srgb, var(--obl-base) 18%, transparent) inset; }
-
-  /* Hover ghosting */
-  .d3-trackio-oblivion.hovering .lines path.ghost { opacity: .22; }
-  .d3-trackio-oblivion.hovering .points circle.ghost { opacity: .22; }
-  .d3-trackio-oblivion.hovering .areas path.ghost { opacity: .06; }
-  .d3-trackio-oblivion.hovering .legend-bottom .item.ghost { opacity: .35; }
-
-  /* Tooltip */
-  .d3-trackio-oblivion .d3-tooltip {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-9999px, -9999px);
-    pointer-events: none;
-    padding: 10px 12px;
-    border-radius: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    background: var(--obl-bg);
-    color: var(--obl-cyan);
-    box-shadow: 0 8px 32px rgba(127,241,255,.05), 0 2px 8px rgba(0,0,0,.10);
-    opacity: .5;
-    transition: opacity .12s ease;
-    z-index: 1000;
-    backdrop-filter: saturate(1.1) blur(10px);
-  }
-  .d3-trackio-oblivion .d3-tooltip.is-visible { opacity: 1; }
-  .d3-trackio-oblivion .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; text-align: left; }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:first-child { font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--obl-cyan); }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--obl-cyan); opacity: .4; display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.06em; }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3) { position: relative; padding-top: 10px; margin-top: 6px; }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3)::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background: var(--engrave-dark); }
-  .d3-trackio-oblivion .d3-tooltip__inner > div:nth-child(n+3)::after { content:""; position:absolute; left:0; right:0; top:1px; height:1px; background: var(--engrave-light); }
-  .d3-trackio-oblivion .d3-tooltip__color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--obl-border); box-shadow: 0 0 10px color-mix(in srgb, var(--obl-base) 20%, transparent) inset; }
-</style>
-<script>
-  (() => {
-    const THIS_SCRIPT = document.currentScript;
-    const TARGET_METRICS = ['epoch','train_accuracy','train_loss','val_accuracy','val_loss'];
-
-    const prettyMetricLabel = (key) => {
-      if (!key) return '';
-      const table = { 'train_accuracy':'Train Accuracy', 'val_accuracy':'Val Accuracy', 'train_loss':'Train Loss', 'val_loss':'Val Loss', 'epoch':'Epoch' };
-      if (table[key]) return table[key];
-      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
-      return cleaned.split(/\s+/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
-    };
-
-    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();
-    };
-
-    function initCell(cell){
-      const d3 = window.d3;
-      const metricKey = cell.getAttribute('data-metric');
-      const titleText = cell.getAttribute('data-title') || metricKey;
-      // Structured layers: bg + corners + inner (header + svg)
-      const bg = document.createElement('div'); bg.className = 'cell-bg'; cell.appendChild(bg);
-      const corners = document.createElement('div'); corners.className = 'cell-corners'; cell.appendChild(corners);
-      const inner = document.createElement('div'); inner.className = 'cell-inner'; cell.appendChild(inner);
-      const header = document.createElement('div'); header.className = 'cell-header';
-      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = prettyMetricLabel(titleText); header.appendChild(title);
-      // Fullscreen icon button (no click handler here)
-      const fsBtn = document.createElement('button'); fsBtn.className = 'cell-action cell-action--fullscreen'; fsBtn.type = 'button'; fsBtn.title = 'Fullscreen'; fsBtn.setAttribute('aria-label', 'Open fullscreen');
-      fsBtn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/></svg>';
-      header.appendChild(fsBtn);
-      inner.appendChild(header);
-
-      const body = document.createElement('div'); body.className = 'cell-body'; inner.appendChild(body);
-      const svg = d3.select(body).append('svg').attr('width','100%').style('display','block');
-      const gRoot = svg.append('g');
-      const gGrid = gRoot.append('g').attr('class','grid');
-      const gAxes = gRoot.append('g').attr('class','axes');
-      const gAreas = gRoot.append('g').attr('class','areas');
-      const gLines = gRoot.append('g').attr('class','lines');
-      const gPoints = gRoot.append('g').attr('class','points');
-      const gHover = gRoot.append('g').attr('class','hover');
-      const host = cell.closest('.d3-trackio-oblivion');
-
-      // Tooltip
-      cell.style.position = cell.style.position || 'relative';
-      let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
-      if (!tip) { tip = document.createElement('div'); tip.className = 'd3-tooltip'; tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tip.appendChild(tipInner); cell.appendChild(tip); } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
-
-      // Layout & scales
-      let width = 800, height = 180; const margin = { top: 12, right: 20, bottom: 36, left: 44 };
-      let xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
-      const lineGen = d3.line().x(d => xScale(0)).y(d => yScale(d.value));
-
-      // Generic number abbreviation for axis ticks (K/M/B) with up to 2 decimals
-      const formatAbbrev = (value) => {
-        const num = Number(value);
-        if (!Number.isFinite(num)) return String(value);
-        const abs = Math.abs(num);
-        const trim2 = (n) => Number(n).toFixed(2).replace(/\.?0+$/, '');
-        if (abs >= 1e9) return `${trim2(num / 1e9)}B`;
-        if (abs >= 1e6) return `${trim2(num / 1e6)}M`;
-        if (abs >= 1e3) return `${trim2(num / 1e3)}K`;
-        return trim2(num);
-      };
-
-      function updateLayout(axisLabelY, xTicksArg){
-        const rect = cell.getBoundingClientRect();
-        width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
-        height = 180;
-        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
-        // Respect HUD gap: keep content inside gradient inset
-        const css = getComputedStyle(cell);
-        const hudGap = Math.max(0, parseFloat(css.getPropertyValue('--hud-gap')) || 0);
-        const innerWidth = Math.max(0, width - margin.left - margin.right - hudGap * 2);
-        const innerHeight = Math.max(0, height - margin.top - margin.bottom - hudGap * 2);
-        gRoot.attr('transform', `translate(${margin.left + hudGap},${margin.top + hudGap})`);
-        xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
-        // grid cleared; drawn as dot intersections in render()
-        gGrid.selectAll('*').remove();
-        gAxes.selectAll('*').remove();
-        // Build ticks that always include domain edges
-        const makeTicks = (scale, approx) => {
-          const arr = scale.ticks(approx);
-          const dom = scale.domain();
-          if (arr.length === 0 || arr[0] !== dom[0]) arr.unshift(dom[0]);
-          if (arr[arr.length - 1] !== dom[dom.length - 1]) arr.push(dom[dom.length - 1]);
-          // dedupe
-          return Array.from(new Set(arr));
-        };
-        const xTicksForced = (Array.isArray(xTicksArg) && xTicksArg.length)
-          ? Array.from({ length: xTicksArg.length }, (_, i) => i)
-          : makeTicks(xScale, 8);
-        // Adapt tick density to available space (fewer ticks when range is large), prioritizing nice numeric values (1,2,5×10^k)
-        const maxXTicks = Math.max(3, Math.min(12, Math.floor(innerWidth / 90)));
-        let xTickVals = xTicksForced;
-        if (Array.isArray(xTicksArg) && xTicksArg.length) {
-          const realMin = xTicksArg[0];
-          const realMax = xTicksArg[xTicksArg.length - 1];
-          const niceVals = d3.ticks(realMin, realMax, maxXTicks);
-          const nearestIndex = (val) => {
-            let bestIdx = 0; let bestDist = Infinity;
-            for (let i = 0; i < xTicksArg.length; i++) {
-              const d = Math.abs(xTicksArg[i] - val);
-              if (d < bestDist) { bestDist = d; bestIdx = i; }
-            }
-            return bestIdx;
-          };
-          const indices = Array.from(new Set(niceVals.map(v => nearestIndex(v)))).sort((a,b)=>a-b);
-          // Ensure edges included
-          if (indices[0] !== 0) indices.unshift(0);
-          const lastIdx = xTicksArg.length - 1;
-          if (indices[indices.length - 1] !== lastIdx) indices.push(lastIdx);
-          xTickVals = indices;
-        } else if (xTicksForced.length > maxXTicks) {
-          const stride = Math.max(1, Math.ceil(xTicksForced.length / maxXTicks));
-          const last = xTicksForced[xTicksForced.length - 1];
-          xTickVals = xTicksForced.filter((i, idx) => (idx % stride) === 0);
-          if (xTickVals[xTickVals.length - 1] !== last) xTickVals.push(last);
-        }
-        const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
-        const yCount = maxYTicks;
-        const yDom = yScale.domain();
-        const yTicksForced = (yCount <= 2)
-          ? [yDom[0], yDom[1]]
-          : Array.from({ length: yCount }, (_, i) => yDom[0] + ((yDom[1] - yDom[0]) * (i / (yCount - 1))));
-        gAxes
-          .append('g')
-          .attr('transform', `translate(0,${innerHeight})`)
-          .call(
-            d3.axisBottom(xScale)
-              .tickValues(xTickVals)
-              .tickFormat((i) => {
-                const val = (Array.isArray(xTicksArg) && xTicksArg[i] != null ? xTicksArg[i] : i);
-                return formatAbbrev(val);
-              })
-          )
-          .call((g) => {
-            g.selectAll('path.domain').attr('stroke', 'var(--obl-cyan-dim)');
-            g.selectAll('.tick line')
-              .attr('stroke', 'var(--obl-cyan-dim)')
-              .attr('y1', 4)
-              .attr('y2', 6);
-            g.selectAll('text')
-              .attr('fill', 'var(--obl-cyan)')
-              .style('font-size', '11px');
-          });
-
-        gAxes
-          .append('g')
-          .call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v) => formatAbbrev(v)))
-          .call((g) => {
-            g.selectAll('path.domain').attr('stroke', 'var(--obl-cyan-dim)');
-            g.selectAll('.tick line')
-              .attr('stroke', 'var(--obl-cyan-dim)')
-              .attr('x1', -4)
-              .attr('x2', -6);
-            g.selectAll('text')
-              .attr('fill', 'var(--obl-cyan)')
-              .style('font-size', '11px');
-          });
-        gAxes
-          .append('text')
-          .attr('class','x-axis-label')
-          .attr('x', innerWidth/2)
-          .attr('y', innerHeight + Math.max(22, Math.min(36, margin.bottom - 2)))
-          .attr('fill', 'var(--obl-cyan)')
-          .attr('text-anchor', 'middle')
-          .style('font-size','9px')
-          .style('opacity', '0.3')
-          .style('font-weight','500')
-          .style('letter-spacing','.12em')
-          .style('text-transform','uppercase')
-          .text('Steps');
-        // Y-axis label removed to gain horizontal space
-        return { innerWidth, innerHeight, xTicksForced: xTickVals, yTicksForced };
-      }
-
-      function render(metricData, colorForRun){
-        const runs = Object.keys(metricData || {});
-        const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
-        if (!hasAny) { gRoot.style('display','none'); let msg = body.querySelector('.empty-msg'); if (!msg) { msg = document.createElement('div'); msg.className='empty-msg'; msg.textContent='Metric not found in data.'; Object.assign(msg.style,{ padding:'10px', fontSize:'12px', color:'var(--obl-cyan)', opacity:.6 }); body.appendChild(msg); } return; }
-        const msg = body.querySelector('.empty-msg'); if (msg) msg.remove(); gRoot.style('display', null);
-
-        let minStep = Infinity, maxStep = -Infinity, minVal = Infinity, maxVal = -Infinity;
-        runs.forEach(r => { (metricData[r]||[]).forEach(pt => { minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); minVal = Math.min(minVal, pt.value); maxVal = Math.max(maxVal, pt.value); }); });
-        if (!isFinite(minStep) || !isFinite(maxStep)) return;
-        const isAccuracy = /accuracy/i.test(metricKey);
-        const isLoss = /loss/i.test(metricKey);
-        const axisLabelY = prettyMetricLabel(metricKey);
-        if (isAccuracy) yScale.domain([0,1]).nice(); else if (isLoss) yScale.domain([0,1]).nice(); else yScale.domain([minVal, maxVal]).nice();
-        // Compute unique x steps and build index mapping
-        const rawSteps = [];
-        runs.forEach(r => (metricData[r]||[]).forEach(pt => rawSteps.push(pt.step)));
-        const hoverSteps = Array.from(new Set(rawSteps)).sort((a,b)=>a-b);
-        const stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
-        const indices = hoverSteps.map((_, i) => i);
-        // Linear index scale → ticks at edges, equal spacing
-        xScale = d3.scaleLinear().domain([0, Math.max(0, indices.length - 1)]);
-        // Update line generator X accessor to use index directly
-        lineGen.x(d => xScale(stepIndex.get(d.step)));
-        const normalizeY = (v) => (isLoss ? ((maxVal > minVal) ? (v - minVal) / (maxVal - minVal) : 0) : v);
-        lineGen.y(d => yScale(normalizeY(d.value)));
-        const { innerWidth, innerHeight, xTicksForced, yTicksForced } = updateLayout(axisLabelY, hoverSteps);
-
-        // Grid as small dots at intersections of y ticks × step positions (X density relative to number of data steps)
-        // Exclude dots that fall on the origin axes lines (left Y-axis and bottom X-axis)
-        const gridPoints = [];
-        const yDomAll = yScale.domain();
-        const yMin = Array.isArray(yDomAll) ? yDomAll[0] : null;
-        const desiredCols = 24; // target grid columns; density scales with data size via stride
-        const xGridStride = Math.max(1, Math.ceil(hoverSteps.length / desiredCols));
-        const xGridIdx = [];
-        for (let idx = 0; idx < hoverSteps.length; idx += xGridStride) xGridIdx.push(idx);
-        if (xGridIdx[xGridIdx.length - 1] !== hoverSteps.length - 1) xGridIdx.push(hoverSteps.length - 1);
-        xGridIdx.forEach(i => {
-          yTicksForced.forEach(t => {
-            if (i !== 0 && (yMin == null || t !== yMin)) {
-              gridPoints.push({ sx: i, ty: t });
-            }
-          });
-        });
-        gGrid.selectAll('circle.grid-dot')
-          .data(gridPoints)
-          .join('circle')
-          .attr('class', 'grid-dot')
-          .attr('cx', d => xScale(d.sx))
-          .attr('cy', d => yScale(d.ty))
-          .attr('r', 1.25)
-          .attr('fill', 'var(--obl-cyan-dim)')
-          .attr('fill-opacity', 0.5);
-
-        // No stderr correction shapes for now (kept intentionally minimal)
-        gAreas.selectAll('*').remove();
-
-        // Lines
-        const series = runs.map(r => ({ run:r, color: colorForRun(r), values:(metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
-        const paths = gLines.selectAll('path.run').data(series, d=>d.run);
-        paths.enter().append('path').attr('class','run').attr('fill','none').attr('stroke-width',1.8).attr('opacity',0.95).attr('stroke', d=>d.color).attr('d', d=>lineGen(d.values));
-        paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.95).attr('d', d=>lineGen(d.values));
-        paths.exit().remove();
-
-        // Points
-        const allPts = series.flatMap(s => s.values.map(v => ({ run:s.run, color:s.color, step:v.step, value:v.value })));
-        const ptsSel = gPoints.selectAll('circle.pt').data(allPts, d=>`${d.run}-${d.step}`);
-        ptsSel.enter().append('circle')
-          .attr('class','pt')
-          .attr('r', 0) /* default invisible */
-          .attr('fill', d=>d.color)
-          .attr('stroke','none')
-          .attr('cx', d=> xScale(stepIndex.get(d.step)))
-          .attr('cy', d=>yScale(normalizeY(d.value)))
-          .merge(ptsSel)
-          .transition().duration(150)
-          .attr('cx', d=> xScale(stepIndex.get(d.step)))
-          .attr('cy', d=>yScale(normalizeY(d.value)))
-          .attr('r', 0); /* keep baseline at 0 when not hovering */
-        ptsSel.exit().remove();
-        // Steps used for hover snapping (unique data steps)
-        // already computed above as hoverSteps
-
-        // Hover
-        gHover.selectAll('*').remove();
-        const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
-        const hoverLine = gHover.append('line').style('stroke','var(--obl-cyan)').attr('stroke-opacity', 0.35).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
-        // External hover handlers
-        cell.__showExternalStep = (stepVal) => {
-          if (stepVal == null) { hoverLine.style('display','none'); return; }
-          const idx = stepIndex.get(stepVal);
-          if (idx == null) { hoverLine.style('display','none'); return; }
-          const xpx = xScale(idx);
-          hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
-        };
-        cell.__clearExternalStep = () => { hoverLine.style('display','none'); };
-        if (!cell.__syncAttached && host) {
-          host.addEventListener('trackio-hover-step', (ev) => { const d = ev && ev.detail; if (!d) return; if (cell.__showExternalStep) cell.__showExternalStep(d.step); });
-          host.addEventListener('trackio-hover-clear', () => { if (cell.__clearExternalStep) cell.__clearExternalStep(); });
-          cell.__syncAttached = true;
-        }
-        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); const nearest = hoverSteps[idx]; const xpx = xScale(idx); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_){} } let html = `<div>Step ${formatAbbrev(nearest)}</div><div>${prettyMetricLabel(metricKey)}</div>`; const entries = series.map(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.get(nearest); return { run:s.run, color:s.color, pt }; }).filter(e => e.pt && e.pt.value!=null); entries.sort((a,b)=> (a.pt.value - b.pt.value)); const fmt = (vv)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4)); entries.forEach(e => { html += `<div style=\"display:flex;align-items:center;gap:8px;white-space:nowrap;\"><span class=\"d3-tooltip__color-dot\" style=\"background:${e.color}\"></span><strong>${e.run}</strong><span style=\"margin-left:auto;text-align:right;\">${fmt(e.pt.value)}</span></div>`; }); tipInner.innerHTML = html; const cssVars = getComputedStyle(cell); const offx = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-x')) || 0); const offy = Math.max(0, parseFloat(cssVars.getPropertyValue('--tip-offset-y')) || 0); const cellRect = cell.getBoundingClientRect(); const cx = (ev && ev.clientX != null) ? ev.clientX : (cellRect.left + mx); const cy = (ev && ev.clientY != null) ? ev.clientY : (cellRect.top + my); const x = cx - cellRect.left + offx; const y = cy - cellRect.top + offy; tip.classList.add('is-visible'); tip.style.transform=`translate(${x}px, ${y}px)`; 
-          // Animate points: from 0 to hover size only for the hovered step
-          try {
-            gPoints.selectAll('circle.pt')
-              .transition().duration(140).ease(d3.easeCubicOut)
-              .attr('r', d => (d && d.step === nearest ? 4 : 0));
-          } catch(_) {}
-        }
-        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.classList.remove('is-visible'); tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_){} } try { gPoints.selectAll('circle.pt').transition().duration(150).ease(d3.easeCubicOut).attr('r', 0); } catch(_) {} }, 100); }
-        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
-      }
-
-      return { metricKey, render };
-    }
-
-    const bootstrap = () => {
-      const scriptEl = THIS_SCRIPT; let host = null; const header = document.createElement('div'); header.className = 'd3-trackio-oblivion__header'; const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Runs</div><div class="items"></div>'; header.appendChild(legend);
-      if (scriptEl && scriptEl.parentElement && scriptEl.parentElement.querySelector) host = scriptEl.parentElement.querySelector('.d3-trackio-oblivion'); if (!host) { let sib = scriptEl && scriptEl.previousElementSibling; while (sib && !(sib.classList && sib.classList.contains('d3-trackio-oblivion'))) { sib = sib.previousElementSibling; } host = sib || null; }
-      if (!host) { host = document.querySelector('.d3-trackio-oblivion'); }
-      if (!host) return; if (host.dataset && host.dataset.mounted==='true') return; if (host.dataset) host.dataset.mounted='true';
-
-      // Insert legend header above the grid container
-      const gridNode = host.querySelector('.d3-trackio-oblivion__grid');
-      if (gridNode && gridNode.parentNode === host) { host.insertBefore(header, gridNode); } else { host.insertBefore(header, host.firstChild); }
-      const cells = Array.from(host.querySelectorAll('.cell')); if (!cells.length) return;
-      const instances = cells.map(cell => initCell(cell));
-
-      // Read HtmlEmbed attributes
-      let mountEl = host; while (mountEl && !mountEl.getAttribute?.('data-datafiles') && !mountEl.getAttribute?.('data-config')) { mountEl = mountEl.parentElement; }
-      let providedData = null; let providedConfig = null;
-      try { const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null; if (attr && attr.trim()) providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim(); } catch(_){ }
-      try { const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null; if (cfg && cfg.trim()) providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg; } catch(_){ }
-
-      const DEFAULT_CSV = '/data/trackio_wandb_demo.csv';
-      const ensureDataPrefix = (p) => { if (typeof p !== 'string' || !p) return p; return p.includes('/') ? p : `/data/${p}`; };
-      const normalizeInput = (inp) => Array.isArray(inp) ? inp.map(ensureDataPrefix) : (typeof inp === 'string' ? [ ensureDataPrefix(inp) ] : null);
-      const CSV_PATHS = Array.isArray(providedData) ? normalizeInput(providedData) : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [ DEFAULT_CSV, './assets/data/trackio_wandb_demo.csv', '../assets/data/trackio_wandb_demo.csv', '../../assets/data/trackio_wandb_demo.csv' ]);
-
-      const d3 = window.d3;
-      (async () => {
-        try {
-          const texts = await Promise.all(CSV_PATHS.map(p => fetch(p, { cache:'no-cache' }).then(r => r.ok ? r.text() : '').catch(()=>'')));
-          const textAll = texts.filter(Boolean).join('\n');
-          const rows = d3.csvParse(textAll, d => ({ run:(d.run||'').trim(), step:+d.step, metric:(d.metric||'').trim(), value:+d.value, stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null }));
-          // Filter out comments and invalid rows before building lists/maps
-          const cleanRows = rows.filter(r => {
-            const run = String(r.run||'').trim();
-            const metric = String(r.metric||'').trim();
-            return run && run.charAt(0) !== '#' && metric && isFinite(+r.step) && !isNaN(+r.step) && isFinite(+r.value) && !isNaN(+r.value);
-          });
-          const metricsInData = Array.from(new Set(cleanRows.map(r => r.metric)));
-          const lcSet = new Set(metricsInData.map(m => m.toLowerCase()));
-          const preferIfExists = (cand) => cand.find(c => lcSet.has(String(c).toLowerCase())) || null;
-          const resolveMetric = (target) => {
-            const override = providedConfig && providedConfig.metricMap && providedConfig.metricMap[target]; if (override && lcSet.has(String(override).toLowerCase())) return metricsInData.find(m => m.toLowerCase() === String(override).toLowerCase());
-            const exact = metricsInData.find(m => m.toLowerCase() === target.toLowerCase()); if (exact) return exact;
-            const cands = (name) => metricsInData.filter(m => m.toLowerCase().includes(name));
-            if (target === 'epoch') return preferIfExists(['epoch']);
-            if (target === 'train_accuracy') return preferIfExists(['train_accuracy','training_accuracy','accuracy_train','train_acc','acc_train','train/accuracy','accuracy']) || cands('acc').find(m => /train|trn/i.test(m));
-            if (target === 'val_accuracy') return preferIfExists(['val_accuracy','valid_accuracy','validation_accuracy','val_acc','acc_val','val/accuracy']) || cands('acc').find(m => /val|valid/i.test(m));
-            if (target === 'train_loss') return preferIfExists(['train_loss','training_loss','loss_train','train/loss','loss']) || cands('loss').find(m => /train|trn/i.test(m));
-            if (target === 'val_loss') return preferIfExists(['val_loss','validation_loss','valid_loss','loss_val','val/loss']) || cands('loss').find(m => /val|valid/i.test(m));
-            return null;
-          };
-          const TARGET_TO_DATA = Object.fromEntries(TARGET_METRICS.map(t => [t, resolveMetric(t)]));
-          const metricsToDraw = TARGET_METRICS.filter(t => !!TARGET_TO_DATA[t]);
-
-          const runList = Array.from(new Set(cleanRows.map(r => String(r.run||'').trim()).filter(Boolean))).sort();
-          let currentRunList = runList.slice();
-          let palette = (() => {
-            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') return window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
-            const d = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#7ff1ff','#5ae0e8','#3cc2da','#289ab8','#1a7e9a','#0f637b','#0a4b5e','#083948','#062a36','#041e27'];
-            return d;
-          })();
-          const colorForRun = (name) => palette[currentRunList.indexOf(name) % palette.length];
-
-          const legendItemsHost = legend.querySelector('.items');
-          function rebuildLegend(){
-            legendItemsHost.innerHTML = currentRunList.map((name) => { const color = colorForRun(name); return `<span class="item" data-run="${name}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${name}</span></span>`; }).join('');
-            legendItemsHost.querySelectorAll('.item').forEach(el => {
-              el.addEventListener('mouseenter', () => { const run = el.getAttribute('data-run'); if (!run) return; host.classList.add('hovering'); host.querySelectorAll('.cell').forEach(cell => { cell.querySelectorAll('.lines path.run').forEach(p => p.classList.toggle('ghost', (p.__data__ && p.__data__.run) !== run)); cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run)); cell.querySelectorAll('.areas path.area').forEach(a => a.classList.toggle('ghost', a.getAttribute('data-run') !== run)); }); legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-run') !== run)); });
-              el.addEventListener('mouseleave', () => { host.classList.remove('hovering'); host.querySelectorAll('.cell').forEach(cell => { cell.querySelectorAll('.lines path.run').forEach(p => p.classList.remove('ghost')); cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.remove('ghost')); cell.querySelectorAll('.areas path.area').forEach(a => a.classList.remove('ghost')); }); legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost')); });
-            });
-          }
-          rebuildLegend();
-
-          const dataByMetric = new Map();
-          metricsToDraw.forEach(tgt => { const m = TARGET_TO_DATA[tgt]; const map = {}; runList.forEach(r => map[r] = []); cleanRows.filter(r=>r.metric===m).forEach(r => { map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); }); dataByMetric.set(tgt, map); });
-
-          instances.forEach(inst => { const metricMap = dataByMetric.get(inst.metricKey) || {}; inst.render(metricMap, colorForRun); });
-
-          const rerender = () => { instances.forEach(inst => inst.render(dataByMetric.get(inst.metricKey)||{}, colorForRun)); };
-          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(host); } else { window.addEventListener('resize', rerender); }
-          // Cycle through step lengths: 0=short,1=medium,2=long
-          let cycleIdx = 2;
-
-          // Randomize data slightly on 'r' key press (in-place jitter)
-          function jitterData(){
-            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
-            mList.forEach((tgt) => {
-              if (tgt === 'epoch') return; // keep epoch intact
-              const map = dataByMetric.get(tgt);
-              if (!map) return;
-              const isAcc = /acc/i.test(tgt);
-              const isLoss = /loss/i.test(tgt);
-              const scale = isAcc ? 0.01 : (isLoss ? 0.03 : 0.02);
-              Object.keys(map).forEach((run) => {
-                map[run].forEach((pt) => {
-                  const base = Math.abs(pt.value) || 1;
-                  const delta = (Math.random() * 2 - 1) * scale * base;
-                  let nv = pt.value + delta;
-                  if (isAcc) nv = Math.max(0, Math.min(1, nv));
-                  pt.value = nv;
-                });
-              });
-            });
-          }
-          // Simulate a fresh dataset on 's' key press (realistic-ish patterns)
-          function generateRunNames(count){
-            const adjectives = ['ancient','brave','calm','clever','crimson','daring','eager','fearless','gentle','glossy','golden','hidden','icy','jolly','lively','mighty','noble','proud','quick','silent','swift','tiny','vivid','wild'];
-            const nouns = ['river','mountain','harbor','forest','valley','ocean','meadow','desert','island','canyon','harbor','trail','summit','delta','lagoon','ridge','tundra','reef','plateau','prairie','grove','bay','dune','cliff'];
-            const used = new Set(); const names = [];
-            const pick = (arr) => arr[Math.floor(Math.random()*arr.length)];
-            while (names.length < count) { const name = `${pick(adjectives)}-${pick(nouns)}-${Math.floor(1+Math.random()*9)}`; if (!used.has(name)) { used.add(name); names.push(name); } }
-            return names;
-          }
-          function simulateData(){
-            // Randomize number of runs between 2 and 7 with W&B-like names
-            const wantRuns = Math.max(2, Math.floor(2 + Math.random()*6));
-            const runsSim = generateRunNames(wantRuns);
-            const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
-            // Cycle: short -> medium -> long -> repeat
-            let stepsCount = 16;
-            if (cycleIdx === 0) stepsCount = rnd(4, 12);
-            else if (cycleIdx === 1) stepsCount = rnd(16, 48);
-            else stepsCount = rnd(80, 240);
-            cycleIdx = (cycleIdx + 1) % 3;
-            const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
-            function genCurves(n){
-              const quality = Math.random(); const good = quality > 0.66; const poor = quality < 0.33;
-              // Train loss with LR phases and decaying noise
-              const l0 = 2.0 + Math.random()*4.5;
-              const targetLoss = good ? l0*(0.12+Math.random()*0.12) : (poor ? l0*(0.35+Math.random()*0.25) : l0*(0.22+Math.random()*0.16));
-              const phases = 1 + Math.floor(Math.random()*3);
-              const marksSet = new Set();
-              while (marksSet.size < phases-1) { marksSet.add(Math.floor((0.25+Math.random()*0.5)*(n-1))); }
-              const marks = [0, ...Array.from(marksSet).sort((a,b)=>a-b), n-1];
-              let kLoss = 0.02 + Math.random()*0.08; const loss = new Array(n);
-              for (let seg=0; seg<marks.length-1; seg++){
-                const a=marks[seg], b=marks[seg+1]||a+1;
-                for (let i=a;i<=b;i++){
-                  const t = (i-a)/Math.max(1,(b-a));
-                  const segTarget = targetLoss * Math.pow(0.85, seg);
-                  let v = l0*Math.exp(-kLoss*(i+1));
-                  v = 0.6*v + 0.4*(l0 + (segTarget - l0)*(seg + t)/Math.max(1,(marks.length-1)));
-                  const noiseAmp = (0.08*l0) * (1 - 0.8*(i/(n-1)));
-                  v += (Math.random()*2-1)*noiseAmp; if (Math.random() < 0.02) v += 0.15*l0;
-                  loss[i] = Math.max(0, v);
-                }
-                kLoss *= 1.6;
-              }
-              // Train accuracy logistic rise with decaying noise and phase boosts
-              const a0 = 0.1 + Math.random()*0.35; const aMax = good ? (0.92+Math.random()*0.07) : (poor ? (0.62+Math.random()*0.14) : (0.8+Math.random()*0.1));
-              let kAcc = 0.02 + Math.random()*0.08; const acc = new Array(n);
-              for (let i=0;i<n;i++){
-                let v = aMax - (aMax - a0)*Math.exp(-kAcc*(i+1));
-                const noiseAmp = 0.04*(1 - 0.8*(i/(n-1)));
-                v += (Math.random()*2-1)*noiseAmp; acc[i] = Math.max(0, Math.min(1, v));
-                if (marksSet.has(i)) kAcc *= 1.4;
-              }
-              // Validation: gap + noise + optional overfitting
-              const accGap = 0.02 + Math.random()*0.06; const lossGap = 0.05 + Math.random()*0.15;
-              const accVal = new Array(n); const lossVal = new Array(n);
-              let ofStart = Math.floor(((good ? 0.85 : 0.7) + (Math.random()*0.15 - 0.05))*(n-1));
-              ofStart = Math.max(Math.floor(0.5*(n-1)), Math.min(Math.floor(0.95*(n-1)), ofStart));
-              for (let i=0;i<n;i++){
-                let av = acc[i] - accGap + (Math.random()*0.06 - 0.03);
-                let lv = loss[i]*(1+lossGap) + (Math.random()*0.1 - 0.05)*Math.max(1, l0*0.2);
-                if (i>=ofStart && !poor){ const t = (i-ofStart)/Math.max(1,(n-1-ofStart)); av -= 0.03*t; lv += 0.12*t*loss[i]; }
-                accVal[i] = Math.max(0, Math.min(1, av)); lossVal[i] = Math.max(0, lv);
-              }
-              return { accTrain: acc, lossTrain: loss, accVal, lossVal };
-            }
-            // Build fresh maps per metric
-            const nextByMetric = new Map();
-            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
-            mList.forEach(tgt => {
-              const map = {}; runsSim.forEach(r => map[r] = []); nextByMetric.set(tgt, map);
-            });
-            runsSim.forEach(run => {
-              const curves = genCurves(stepsCount);
-              steps.forEach((s,i)=>{
-                if (metricsToDraw.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
-                if (metricsToDraw.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
-                if (metricsToDraw.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
-                if (metricsToDraw.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
-                if (metricsToDraw.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
-              });
-            });
-            // Swap data
-            nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
-            // Update current run list, palette and legend
-            currentRunList = runsSim.slice();
-            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
-            if (!palette) { palette = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#7ff1ff','#5ae0e8','#3cc2da','#289ab8','#1a7e9a','#0f637b','#0a4b5e','#083948','#062a36','#041e27']; }
-            rebuildLegend();
-          }
-          const onKeyDownJitter = (ev) => {
-            try {
-              const key = ev && ev.key ? ev.key.toLowerCase() : '';
-              if (key === 'r') { jitterData(); rerender(); }
-              if (key === 's') { simulateData(); rerender(); }
-            } catch(_) {}
-          };
-          window.addEventListener('keydown', onKeyDownJitter);
-          // Start with level 3 (long) synthetic data by default
-          simulateData();
-          rerender();
-
-          // (Legend hover handlers bound inside rebuildLegend())
-        } catch (e) {
-          const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e); pre.style.color = 'var(--obl-cyan)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap'; host.appendChild(pre);
-        }
-      })();
-    };
-
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
-  })();
-</script>
-
-

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

@@ -1,843 +0,0 @@
-<div class="d3-trackio">
-  <div class="d3-trackio__grid">
-    <div class="cell" data-metric="epoch" data-title="epoch"></div>
-    <div class="cell" data-metric="train_accuracy" data-title="train_accuracy"></div>
-    <div class="cell" data-metric="train_loss" data-title="train_loss"></div>
-    <div class="cell" data-metric="val_accuracy" data-title="val_accuracy"></div>
-    <div class="cell cell--wide" data-metric="val_loss" data-title="val_loss"></div>
-  </div>
-  <noscript>JavaScript is required to render this chart.</noscript>
-</div>
-<style>
-  .d3-trackio { position: relative; --z-tooltip: 50; --z-overlay: 99999999;
-    /* Softer chart theming (light) */
-    --axis-color: rgba(0,0,0,.18);
-    --tick-color: rgba(0,0,0,.50);
-    --grid-color: rgba(0,0,0,.05);
-  }
-  /* Softer chart theming (dark) */
-  [data-theme="dark"] .d3-trackio {
-    --axis-color: rgba(255,255,255,.18);
-    --tick-color: rgba(255,255,255,.50);
-    --grid-color: rgba(255,255,255,.05);
-  }
-  .d3-trackio__grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-  @media (max-width: 980px) {
-    .d3-trackio__grid { grid-template-columns: 1fr; }
-  }
-  .d3-trackio__grid .cell--wide { grid-column: 1 / -1; }
-
-  .d3-trackio .cell {
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    background: var(--surface-bg);
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-  .d3-trackio .cell-header {
-    padding: 8px 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-  .d3-trackio .cell-title {
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--text-color);
-    text-transform: none;
-  }
-  .d3-trackio .cell-action {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border: 0;
-    background: transparent;
-    color: var(--text-color);
-    opacity: .8;
-    cursor: pointer;
-  }
-  .d3-trackio .cell-action:hover { opacity: 1; }
-  .d3-trackio .cell-action svg { width: 28px; height: 28px; }
-  .d3-trackio .cell-action svg, .d3-trackio .cell-action svg path { fill: var(--text-color); stroke: none; }
-
-  /* Fullscreen overlay */
-  .d3-trackio__overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,.48);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--z-overlay);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .2s ease;
-  }
-  .d3-trackio__overlay.is-open { opacity: 1; pointer-events: auto; }
-  .d3-trackio__modal {
-    position: relative;
-    width: min(92vw, 1200px);
-    height: min(92vh, 900px);
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
-    transform: scale(.96);
-    transition: transform .2s ease;
-  }
-  .d3-trackio__overlay.is-open .d3-trackio__modal { transform: scale(1); }
-  .d3-trackio__modal .cell { width: 100%; height: 100%; }
-  .d3-trackio__modal .cell .cell-body { height: calc(100% - 44px); }
-  /* Conserver le ratio pour éviter les décalages points/ticks lors du zoom */
-  .d3-trackio__modal .cell .cell-body svg { width: 100% !important; height: auto !important; }
-  .d3-trackio__modal .cell .cell-action { display: none; }
-  .d3-trackio__modal-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-  .d3-trackio .cell-body { position: relative; width: 100%; overflow: hidden; }
-  .d3-trackio .cell-body svg { max-width: 100%; height: auto; display: block; }
-
-  /* Axes/grid colors via project CSS variables */
-  .d3-trackio .axes path,
-  .d3-trackio .axes line { stroke: var(--axis-color); }
-  .d3-trackio .axes text { fill: var(--tick-color); }
-  .d3-trackio .grid line { stroke: var(--grid-color); }
-
-  /* Global header (legend) above the grid and centered */
-  .d3-trackio__header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    margin: 0 0 10px 0;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-  .d3-trackio__header .legend-bottom {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--text-color);
-    text-align: center;
-  }
-  .d3-trackio__header .legend-bottom .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
-  .d3-trackio__header .legend-bottom .items { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
-  .d3-trackio__header .legend-bottom .item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
-  .d3-trackio__header .legend-bottom .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; }
-
-  /* Hover ghosting */
-  .d3-trackio.hovering .lines path.ghost { opacity: .25; }
-  .d3-trackio.hovering .points circle.ghost { opacity: .25; }
-  .d3-trackio.hovering .areas path.ghost { opacity: .08; }
-  .d3-trackio.hovering .legend-bottom .item.ghost { opacity: .35; }
-
-  /* Tooltip styling aligned with other embeds */
-  .d3-trackio .d3-tooltip {
-    z-index: var(--z-tooltip);
-    backdrop-filter: saturate(1.12) blur(8px);
-  }
-  .d3-trackio .d3-tooltip__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
-  .d3-trackio .d3-tooltip__inner > div:first-child { font-weight: 800; letter-spacing: 0.1px; margin-bottom: 0; }
-  .d3-trackio .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-trackio .d3-tooltip__inner > div:nth-child(n+3) { padding-top: 6px; border-top: 1px solid var(--border-color); }
-  .d3-trackio .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 TARGET_METRICS = [
-      'epoch',
-      'train_accuracy',
-      'train_loss',
-      'val_accuracy',
-      'val_loss'
-    ];
-
-    const prettyMetricLabel = (key) => {
-      if (!key) return '';
-      const table = {
-        'train_accuracy': 'Train Accuracy',
-        'val_accuracy': 'Val Accuracy',
-        'train_loss': 'Train Loss',
-        'val_loss': 'Val Loss',
-        'epoch': 'Epoch'
-      };
-      if (table[key]) return table[key];
-      const cleaned = String(key).replace(/[_-]+/g, ' ').trim();
-      return cleaned.split(/\s+/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
-    };
-
-    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();
-    };
-
-    // Build per-cell line chart
-    function initCell(cell) {
-      const d3 = window.d3;
-      const metricKey = cell.getAttribute('data-metric');
-      const titleText = cell.getAttribute('data-title') || metricKey;
-      const host = cell.closest('.d3-trackio');
-      const shouldSuppress = () => !!(host && host.dataset && host.dataset.suppressTransitions === '1');
-
-      // Header
-      const header = document.createElement('div'); header.className = 'cell-header';
-      const title = document.createElement('div'); title.className = 'cell-title'; title.textContent = prettyMetricLabel(titleText); header.appendChild(title);
-      cell.appendChild(header);
-
-      // Body & SVG
-      const body = document.createElement('div'); body.className = 'cell-body'; cell.appendChild(body);
-      const svg = d3.select(body).append('svg').attr('width','100%').style('display','block');
-      const gRoot = svg.append('g');
-      const gGrid = gRoot.append('g').attr('class','grid');
-      const gAxes = gRoot.append('g').attr('class','axes');
-      const gAreas = gRoot.append('g').attr('class','areas');
-      const gLines = gRoot.append('g').attr('class','lines');
-      const gPoints = gRoot.append('g').attr('class','points');
-      const gHover = gRoot.append('g').attr('class','hover');
-
-      // Legacy flag, kept for compatibility but computed via shouldSuppress()
-      let suppressTransitions = false;
-
-      // Tooltip
-      cell.style.position = cell.style.position || 'relative';
-      let tip = cell.querySelector('.d3-tooltip'); let tipInner; let hideTipTimer = null;
-      if (!tip) {
-        tip = document.createElement('div'); tip.className = 'd3-tooltip';
-        Object.assign(tip.style, {
-          position:'absolute', top:'0', left:'0', 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'
-        });
-        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); cell.appendChild(tip);
-      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
-
-      // Layout & scales
-      let width = 800, height = 10; const margin = { top: 10, right: 20, bottom: 46, left: 44 };
-      const xScale = d3.scaleLinear();
-      const yScale = d3.scaleLinear();
-      const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
-
-      function updateLayout(axisLabelY, xTicksArg){
-        const rect = cell.getBoundingClientRect();
-        width = Math.max(1, Math.round(rect && rect.width ? rect.width : (cell.clientWidth || 800)));
-        // Hauteur fixe par défaut, overridable via data-height (pour fullscreen)
-        height = Number(cell.getAttribute('data-height')) || 200;
-        svg.attr('width', width).attr('height', height).attr('viewBox', `0 0 ${width} ${height}`).attr('preserveAspectRatio','xMidYMid meet');
-        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom;
-        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-        xScale.range([0, innerWidth]); yScale.range([innerHeight, 0]);
-
-        // Grid
-        gGrid.selectAll('*').remove();
-        gGrid.selectAll('line').data(yScale.ticks(6)).join('line')
-          .attr('x1',0).attr('x2',innerWidth).attr('y1',d=>yScale(d)).attr('y2',d=>yScale(d))
-          .attr('stroke','var(--grid-color)').attr('stroke-width',1).attr('shape-rendering','crispEdges');
-
-        // Axes
-        gAxes.selectAll('*').remove();
-        // Ticks (Oblivion logic):
-        // - X: nice values mapped to nearest indices, include edges, density by width
-        // - Y: at least 5 ticks, density by height
-        const makeTicks = (scale, approx) => {
-          const arr = scale.ticks(approx);
-          const dom = scale.domain();
-          if (arr.length === 0 || arr[0] !== dom[0]) arr.unshift(dom[0]);
-          if (arr[arr.length - 1] !== dom[dom.length - 1]) arr.push(dom[dom.length - 1]);
-          return Array.from(new Set(arr));
-        };
-        const maxXTicks = Math.max(3, Math.min(12, Math.floor(innerWidth / 90)));
-        let xTicksForced = (Array.isArray(xTicksArg) && xTicksArg.length) ? [] : makeTicks(xScale, 8);
-        if (Array.isArray(xTicksArg) && xTicksArg.length) {
-          const realMin = xTicksArg[0];
-          const realMax = xTicksArg[xTicksArg.length - 1];
-          const niceVals = d3.ticks(realMin, realMax, maxXTicks);
-          const nearestIndex = (val) => {
-            let bestIdx = 0; let bestDist = Infinity;
-            for (let i = 0; i < xTicksArg.length; i++) {
-              const d = Math.abs(xTicksArg[i] - val);
-              if (d < bestDist) { bestDist = d; bestIdx = i; }
-            }
-            return bestIdx;
-          };
-          const indices = Array.from(new Set(niceVals.map(v => nearestIndex(v)))).sort((a,b)=>a-b);
-          if (indices[0] !== 0) indices.unshift(0);
-          const lastIdx = xTicksArg.length - 1;
-          if (indices[indices.length - 1] !== lastIdx) indices.push(lastIdx);
-          xTicksForced = indices;
-        } else if (xTicksForced.length > maxXTicks) {
-          const stride = Math.max(1, Math.ceil(xTicksForced.length / maxXTicks));
-          const last = xTicksForced[xTicksForced.length - 1];
-          xTicksForced = xTicksForced.filter((_, idx) => (idx % stride) === 0);
-          if (xTicksForced[xTicksForced.length - 1] !== last) xTicksForced.push(last);
-        }
-        const maxYTicks = Math.max(5, Math.min(6, Math.floor(innerHeight / 60)));
-        const yCount = maxYTicks;
-        const yDom = yScale.domain();
-        const yTicksForced = (yCount <= 2)
-          ? [yDom[0], yDom[1]]
-          : Array.from({ length: yCount }, (_, i) => yDom[0] + ((yDom[1] - yDom[0]) * (i / (yCount - 1))));
-        // X axis with forced ticks (indices) and formatted labels mapped to original steps in render()
-        gAxes.append('g')
-          .attr('transform', `translate(0,${innerHeight})`)
-          .call(
-            d3.axisBottom(xScale)
-              .tickValues(xTicksForced)
-              .tickFormat((i) => {
-                // Label mapping will be provided by caller via closure over xTicksArg
-                const val = (Array.isArray(xTicksArg) && xTicksArg[i] != null ? xTicksArg[i] : i);
-                return formatAbbrev(val);
-              })
-          )
-          .call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
-        // Y axis with forced ticks
-        gAxes.append('g')
-          .call(d3.axisLeft(yScale).tickValues(yTicksForced).tickFormat((v)=>formatAbbrev(v)))
-          .call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','11px'); });
-
-        // Axis labels (only X; Y-label removed to gain space)
-        gAxes.append('text')
-          .attr('class', 'x-axis-label')
-          .attr('x', innerWidth / 2)
-          .attr('y', innerHeight + Math.max(20, Math.min(36, margin.bottom - 12)))
-          .attr('fill', 'var(--text-color)')
-          .attr('text-anchor', 'middle')
-          .style('font-size', '8px')
-          .style('opacity', '.5')
-          .style('letter-spacing', '.5px')
-          .style('text-transform', 'uppercase')
-          .style('font-weight', '500')
-          .text('Steps');
-
-        return { innerWidth, innerHeight, xTicksForced, yTicksForced };
-      }
-
-      // Generic number abbreviation for ticks (K/M/B) with up to 2 decimals
-      const formatAbbrev = (value) => {
-        const num = Number(value);
-        if (!Number.isFinite(num)) return String(value);
-        const abs = Math.abs(num);
-        const trim2 = (n) => Number(n).toFixed(2).replace(/\.?0+$/, '');
-        if (abs >= 1e9) return `${trim2(num / 1e9)}B`;
-        if (abs >= 1e6) return `${trim2(num / 1e6)}M`;
-        if (abs >= 1e3) return `${trim2(num / 1e3)}K`;
-        return trim2(num);
-      };
-
-      function render(metricData, colorForRun) {
-        const runs = Object.keys(metricData || {});
-        const hasAny = runs.some(r => (metricData[r]||[]).length > 0);
-        if (!hasAny) {
-          // Show a single empty message and hide the SVG group
-          gRoot.style('display', 'none');
-          let msg = body.querySelector('.empty-msg');
-          if (!msg) {
-            msg = document.createElement('div');
-            msg.className = 'empty-msg';
-            msg.textContent = 'Metric not found in data.';
-            Object.assign(msg.style, { padding:'10px', fontSize:'12px', color:'var(--muted-color)' });
-            body.appendChild(msg);
-          }
-          return;
-        }
-        // Ensure message is removed if previously shown
-        const msg = body.querySelector('.empty-msg'); if (msg) msg.remove();
-        gRoot.style('display', null);
-
-        let minStep = Infinity, maxStep = -Infinity, minVal = Infinity, maxVal = -Infinity;
-        runs.forEach(r => { (metricData[r]||[]).forEach(pt => { minStep = Math.min(minStep, pt.step); maxStep = Math.max(maxStep, pt.step); minVal = Math.min(minVal, pt.value); maxVal = Math.max(maxVal, pt.value); }); });
-        const isAccuracy = /accuracy/i.test(metricKey);
-        const axisLabelY = prettyMetricLabel(metricKey);
-        if (isAccuracy) yScale.domain([0, 1]).nice(); else yScale.domain([minVal, maxVal]).nice();
-        // Build unique steps and index mapping for equal spacing and snapping
-        const stepSet = new Set(); runs.forEach(r => (metricData[r]||[]).forEach(v => stepSet.add(v.step)));
-        const hoverSteps = Array.from(stepSet).sort((a,b)=>a-b);
-        const stepIndex = new Map(hoverSteps.map((s,i)=>[s,i]));
-        xScale.domain([0, Math.max(0, hoverSteps.length - 1)]);
-
-        // Update line generator X accessor to use index directly
-        lineGen.x(d => xScale(stepIndex.get(d.step)));
-
-        const { innerWidth, innerHeight, xTicksForced } = updateLayout(axisLabelY, hoverSteps);
-
-        // Vertical grid lines at each step index (same visibility as horizontal)
-        gGrid.selectAll('line.vstep')
-          .data(xTicksForced)
-          .join(
-            enter => enter.append('line').attr('class','vstep')
-              .attr('y1', 0).attr('y2', innerHeight)
-              .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
-              .attr('stroke','var(--grid-color)').attr('stroke-width',1).attr('shape-rendering','crispEdges'),
-            update => update
-              .attr('y1', 0).attr('y2', innerHeight)
-              .attr('x1', d => xScale(d)).attr('x2', d => xScale(d)),
-            exit => exit.remove()
-          );
-
-        // Remove stderr correction shapes (no uncertainty area)
-        gAreas.selectAll('*').remove();
-
-        // Lines
-        const series = runs.map(r => ({ run: r, color: colorForRun(r), values: (metricData[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
-        const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
-        paths.enter().append('path').attr('class','run-line').attr('data-run', d=>d.run).attr('fill','none').attr('stroke-width', 1.5).attr('opacity', 0.9)
-          .attr('stroke', d=>d.color).attr('d', d=>lineGen(d.values));
-        if (shouldSuppress()) {
-          paths.attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
-        } else {
-          paths.transition().duration(260).attr('stroke', d=>d.color).attr('opacity',0.9).attr('d', d=>lineGen(d.values));
-        }
-        paths.exit().remove();
-
-        // Points
-        const allPoints = series.flatMap(s => s.values.map(v => ({ run:s.run, color:s.color, step:v.step, value:v.value })));
-        const ptsSel = gPoints.selectAll('circle.pt').data(allPoints, d=> `${d.run}-${d.step}`);
-        ptsSel.enter().append('circle').attr('class','pt').attr('data-run', d=>d.run).attr('r', 0).attr('fill', d=>d.color).attr('fill-opacity', 0.6)
-          .attr('stroke', 'none').attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value))
-          .merge(ptsSel)
-          .each(function(d){ /* placeholder to keep merge chain intact */ })
-          .attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value));
-        if (!shouldSuppress()) {
-          try { gPoints.selectAll('circle.pt').transition().duration(150).attr('cx', d=>xScale(stepIndex.get(d.step))).attr('cy', d=>yScale(d.value)); } catch(_){}
-        }
-        ptsSel.exit().remove();
-
-        // Hover
-        gHover.selectAll('*').remove();
-        const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
-        const hoverLine = gHover.append('line').style('stroke','var(--text-color)').attr('stroke-opacity', 0.25).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
-
-        // Expose external hover handlers for cross-chart sync
-        cell.__showExternalStep = (stepVal) => {
-          if (stepVal == null) { hoverLine.style('display','none'); return; }
-          const idx = stepIndex.get(stepVal);
-          if (idx == null) { hoverLine.style('display','none'); return; }
-          const xpx = xScale(idx);
-          hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
-        };
-        cell.__clearExternalStep = () => { hoverLine.style('display','none'); };
-        if (!cell.__syncAttached && host) {
-          host.addEventListener('trackio-hover-step', (ev) => { const d = ev && ev.detail; if (!d) return; if (cell.__showExternalStep) cell.__showExternalStep(d.step); });
-          host.addEventListener('trackio-hover-clear', () => { if (cell.__clearExternalStep) cell.__clearExternalStep(); });
-          cell.__syncAttached = true;
-        }
-        function onMove(ev){ if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; } const [mx,my]=d3.pointer(ev, overlay.node()); const idx = Math.round(Math.max(0, Math.min(hoverSteps.length-1, xScale.invert(mx)))); const nearest = hoverSteps[idx]; const xpx = xScale(idx); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-step', { detail: { step: nearest } })); } catch(_){} }
-          let html = `<div><strong>step</strong> ${formatAbbrev(nearest)}</div><div><strong>${prettyMetricLabel(metricKey)}</strong></div>`;
-          const entries = series.map(s=>{ const map = new Map(s.values.map(v=>[v.step, v])); const pt = map.get(nearest); return { run:s.run, color:s.color, pt }; }).filter(e => e.pt && e.pt.value!=null);
-          entries.sort((a,b)=> (a.pt.value - b.pt.value));
-          const fmt = (vv)=> (isAccuracy? (+vv).toFixed(4) : (+vv).toFixed(4));
-          entries.forEach(e => {
-            html += `<div style=\"display:flex;align-items:center;gap:8px;white-space:nowrap;\"><span class=\"d3-tooltip__color-dot\" style=\"background:${e.color}\"></span><strong>${e.run}</strong><span style=\"margin-left:auto;text-align:right;\">${fmt(e.pt.value)}</span></div>`;
-          });
-          tipInner.innerHTML = html; const offsetX=12, offsetY=12; tip.style.opacity='1'; tip.style.transform=`translate(${Math.round(mx+offsetX+margin.left)}px, ${Math.round(my+offsetY+margin.top)}px)`;
-          // No animation on chart while scaling up/down
-          try {
-            const sel = gPoints.selectAll('circle.pt');
-            if (shouldSuppress()) { sel.interrupt().attr('r', d => (d && d.step === nearest ? 4 : 0)); }
-            else { sel.transition().duration(140).ease(d3.easeCubicOut).attr('r', d => (d && d.step === nearest ? 4 : 0)); }
-          } catch(_) {}
-        }
-        function onLeave(){ hideTipTimer = setTimeout(()=>{ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); if (host) { try { host.dispatchEvent(new CustomEvent('trackio-hover-clear')); } catch(_){} } try { const sel = gPoints.selectAll('circle.pt'); if (shouldSuppress()) { sel.interrupt().attr('r', 0); } else { sel.transition().duration(150).ease(d3.easeCubicOut).attr('r', 0); } } catch(_) {} }, 100); }
-        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
-      }
-
-      // Fullscreen: button + modal behavior
-      const fsBtn = document.createElement('button'); fsBtn.className = 'cell-action cell-action--fullscreen'; fsBtn.type = 'button'; fsBtn.title='Fullscreen'; fsBtn.setAttribute('aria-label','Open fullscreen');
-      fsBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/></svg>';
-      header.appendChild(fsBtn);
-
-      function ensureOverlay(host){
-        let overlay = host.querySelector('.d3-trackio__overlay');
-        if (!overlay) {
-          overlay = document.createElement('div'); overlay.className='d3-trackio__overlay';
-          const modal = document.createElement('div'); modal.className='d3-trackio__modal';
-          const close = document.createElement('button'); close.className='d3-trackio__modal-close'; close.type='button'; close.innerHTML='&#10005;';
-          overlay.appendChild(modal); overlay.appendChild(close);
-          host.appendChild(overlay);
-          overlay.addEventListener('click', (e)=>{ if (e.target === overlay) close.click(); });
-          close.addEventListener('click', ()=>{
-            const moving = modal.querySelector('.cell'); if (!moving) { overlay.classList.remove('is-open'); return; }
-            const placeholder = moving.__placeholder;
-            if (!placeholder) { overlay.classList.remove('is-open'); return; }
-            // Global suppression across charts inside this host
-            host.dataset.suppressTransitions = '1';
-            // Cancel any in-flight D3 transitions
-            try { d3.select(host).selectAll('path.run-line').interrupt(); d3.select(host).selectAll('circle.pt').interrupt(); } catch(_){ }
-            // FLIP: animate from current (modal) to placeholder position
-            const from = moving.getBoundingClientRect();
-            const to = placeholder.getBoundingClientRect();
-            const dx = to.left - from.left; const dy = to.top - from.top;
-            const sx = Math.max(0.0001, to.width / from.width);
-            const sy = Math.max(0.0001, to.height / from.height);
-            moving.style.transformOrigin = 'top left';
-            moving.style.transition = 'transform 220ms cubic-bezier(.2,.8,.2,1)';
-            moving.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
-            const onEnd = () => {
-              moving.removeEventListener('transitionend', onEnd);
-              overlay.classList.remove('is-open');
-              moving.style.transition = '';
-              moving.style.transform = '';
-              if (placeholder && placeholder.parentNode) { placeholder.parentNode.insertBefore(moving, placeholder); placeholder.remove(); }
-              moving.removeAttribute('data-height');
-              // Recompute layout without any line/point animation
-              try { const h = host; if (h && h.__rerender) h.__rerender(); } catch {}
-              requestAnimationFrame(()=>{ delete host.dataset.suppressTransitions; });
-            };
-            moving.addEventListener('transitionend', onEnd);
-          });
-          window.addEventListener('keydown', (e)=>{ if (e.key === 'Escape' && overlay.classList.contains('is-open')) { const btn = overlay.querySelector('.d3-trackio__modal-close'); btn && btn.click(); }});
-        }
-        return overlay;
-      }
-
-      fsBtn.addEventListener('click', ()=>{
-        const hostNode = cell.closest('.d3-trackio'); if (!hostNode) return;
-        const overlay = ensureOverlay(hostNode); const modal = overlay.querySelector('.d3-trackio__modal');
-        // If another chart is open, close it first then proceed
-        const existing = modal.querySelector('.cell');
-        if (overlay.classList.contains('is-open') && existing && existing !== cell) {
-          const btn = overlay.querySelector('.d3-trackio__modal-close');
-          if (btn) { btn.dispatchEvent(new Event('click')); }
-          const waitEnd = () => {
-            if (!overlay.classList.contains('is-open')) { fsBtn.click(); return; }
-            requestAnimationFrame(waitEnd);
-          };
-          waitEnd();
-          return;
-        }
-        // Global suppression across charts inside this host
-        hostNode.dataset.suppressTransitions = '1';
-        // Cancel any in-flight D3 transitions
-        try { d3.select(hostNode).selectAll('path.run-line').interrupt(); d3.select(hostNode).selectAll('circle.pt').interrupt(); } catch(_){ }
-        const before = cell.getBoundingClientRect();
-        const placeholder = document.createElement('div'); placeholder.style.width = cell.offsetWidth + 'px'; placeholder.style.height = cell.offsetHeight + 'px';
-        cell.__placeholder = placeholder; cell.parentNode.insertBefore(placeholder, cell);
-        modal.appendChild(cell);
-        // Do NOT re-render or change SVG internals; scale via CSS only
-        const after = cell.getBoundingClientRect();
-        const dx = before.left - after.left; const dy = before.top - after.top;
-        const sx = Math.max(0.0001, before.width / after.width);
-        const sy = Math.max(0.0001, before.height / after.height);
-        cell.style.transformOrigin = 'top left';
-        cell.style.transition = 'transform 220ms cubic-bezier(.2,.8,.2,1)';
-        cell.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
-        overlay.classList.add('is-open');
-        requestAnimationFrame(()=>{ requestAnimationFrame(()=>{ cell.style.transform = 'none'; }); });
-        const onEnd = () => { cell.removeEventListener('transitionend', onEnd); cell.style.transition = ''; cell.style.transform = ''; requestAnimationFrame(()=>{ /* keep suppress until settled or close */ }); };
-        cell.addEventListener('transitionend', onEnd);
-      });
-
-      return { metricKey, render };
-    }
-
-    const bootstrap = () => {
-      const scriptEl = THIS_SCRIPT;
-      // Locate host
-      let host = null;
-      if (scriptEl && scriptEl.parentElement && scriptEl.parentElement.querySelector) {
-        host = scriptEl.parentElement.querySelector('.d3-trackio');
-      }
-      if (!host) {
-        let sib = scriptEl && scriptEl.previousElementSibling;
-        while (sib && !(sib.classList && sib.classList.contains('d3-trackio'))) { sib = sib.previousElementSibling; }
-        host = sib || null;
-      }
-      if (!host) { host = document.querySelector('.d3-trackio'); }
-      if (!host) return;
-      if (host.dataset && host.dataset.mounted === 'true') return; if (host.dataset) host.dataset.mounted = 'true';
-
-      // Build global header (legend) and insert ABOVE the grid
-      const header = document.createElement('div'); header.className = 'd3-trackio__header';
-      const legend = document.createElement('div'); legend.className = 'legend-bottom'; legend.innerHTML = '<div class="legend-title">Runs</div><div class="items"></div>';
-      header.appendChild(legend);
-      const gridNode = host.querySelector('.d3-trackio__grid');
-      if (gridNode && gridNode.parentNode === host) { host.insertBefore(header, gridNode); } else { host.insertBefore(header, host.firstChild); }
-
-      const cells = Array.from(host.querySelectorAll('.cell'));
-      if (!cells.length) return;
-
-      const instances = cells.map(cell => initCell(cell));
-
-      // Read HtmlEmbed attributes from closest ancestor carrying them
-      let mountEl = host;
-      while (mountEl && !mountEl.getAttribute?.('data-datafiles') && !mountEl.getAttribute?.('data-config')) {
-        mountEl = mountEl.parentElement;
-      }
-      let providedData = null; let providedConfig = null;
-      try { const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null; if (attr && attr.trim()) { providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim(); } } catch(_) {}
-      try { const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null; if (cfg && cfg.trim()) { providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg; } } catch(_) {}
-
-      const DEFAULT_CSV = '/data/trackio_wandb_demo.csv';
-      const ensureDataPrefix = (p) => { if (typeof p !== 'string' || !p) return p; return p.includes('/') ? p : `/data/${p}`; };
-      const normalizeInput = (inp) => Array.isArray(inp) ? inp.map(ensureDataPrefix) : (typeof inp === 'string' ? [ ensureDataPrefix(inp) ] : null);
-      const CSV_PATHS = Array.isArray(providedData)
-        ? normalizeInput(providedData)
-        : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
-            DEFAULT_CSV,
-            './assets/data/formatting_filters.csv',
-            '../assets/data/formatting_filters.csv',
-            '../../assets/data/formatting_filters.csv'
-          ]);
-      const fetchFirstAvailable = async (paths) => { 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'); };
-
-      const d3 = window.d3;
-      (async () => {
-        try {
-          // Load one or many CSVs and merge rows
-          let textAll = '';
-          if (Array.isArray(CSV_PATHS) && CSV_PATHS.length > 1) {
-            const texts = await Promise.all(CSV_PATHS.map(p => fetch(p, { cache:'no-cache' }).then(r => r.ok ? r.text() : '').catch(()=>'')));
-            textAll = texts.filter(Boolean).join('\n');
-          } else {
-            textAll = await fetchFirstAvailable(CSV_PATHS);
-          }
-          const rows = d3.csvParse(textAll, d => ({
-            run:(d.run||'').trim(),
-            step:+d.step,
-            metric:(d.metric||'').trim(),
-            value:+d.value,
-            stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null
-          }));
-
-          // Filter to target metrics if present in data, with synonym resolution
-          const metricsInData = Array.from(new Set(rows.map(r => r.metric)));
-          const lcSet = new Set(metricsInData.map(m => m.toLowerCase()));
-          const preferIfExists = (cand) => cand.find(c => lcSet.has(String(c).toLowerCase())) || null;
-          const resolveMetric = (target) => {
-            // Config override
-            const override = providedConfig && providedConfig.metricMap && providedConfig.metricMap[target];
-            if (override && lcSet.has(String(override).toLowerCase())) return metricsInData.find(m => m.toLowerCase() === String(override).toLowerCase());
-            // Exact
-            const exact = metricsInData.find(m => m.toLowerCase() === target.toLowerCase()); if (exact) return exact;
-            // Heuristics by target
-            const cands = (name) => metricsInData.filter(m => m.toLowerCase().includes(name));
-            if (target === 'epoch') return preferIfExists(['epoch']);
-            if (target === 'train_accuracy') return preferIfExists([
-              'train_accuracy','training_accuracy','accuracy_train','train_acc','acc_train','train/accuracy','accuracy'
-            ]) || cands('acc').find(m => /train|trn/i.test(m));
-            if (target === 'val_accuracy') return preferIfExists([
-              'val_accuracy','valid_accuracy','validation_accuracy','val_acc','acc_val','val/accuracy'
-            ]) || cands('acc').find(m => /val|valid/i.test(m));
-            if (target === 'train_loss') return preferIfExists([
-              'train_loss','training_loss','loss_train','train/loss','loss'
-            ]) || cands('loss').find(m => /train|trn/i.test(m));
-            if (target === 'val_loss') return preferIfExists([
-              'val_loss','validation_loss','valid_loss','loss_val','val/loss'
-            ]) || cands('loss').find(m => /val|valid/i.test(m));
-            return null;
-          };
-          const TARGET_TO_DATA = Object.fromEntries(TARGET_METRICS.map(t => [t, resolveMetric(t)]));
-          const metricsToDraw = TARGET_METRICS.filter(t => !!TARGET_TO_DATA[t]);
-
-          // Build run list and shared color mapping
-          const runList = Array.from(new Set(rows.map(r => String(r.run||'').trim()).filter(Boolean))).sort();
-          let currentRunList = runList.slice();
-          let palette = null;
-          try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
-          if (!palette) {
-            const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
-            palette = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
-          }
-          const colorForRun = (name) => palette[currentRunList.indexOf(name) % palette.length];
-
-          // Populate legend
-          const legendItemsHost = legend.querySelector('.items');
-          function rebuildLegend(){
-            legendItemsHost.innerHTML = currentRunList.map((name) => {
-              const color = colorForRun(name);
-              return `<span class="item" data-run="${name}"><span class=\"swatch\" style=\"background:${color}\"></span><span>${name}</span></span>`;
-            }).join('');
-            // Bind hover ghosting
-            legendItemsHost.querySelectorAll('.item').forEach(el => {
-              el.addEventListener('mouseenter', () => {
-                const run = el.getAttribute('data-run'); if (!run) return;
-                host.classList.add('hovering');
-                host.querySelectorAll('.cell').forEach(cell => {
-                  cell.querySelectorAll('.lines path.run-line').forEach(p => p.classList.toggle('ghost', p.getAttribute('data-run') !== run));
-                  cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.toggle('ghost', c.getAttribute('data-run') !== run));
-                  cell.querySelectorAll('.areas path.area').forEach(a => a.classList.toggle('ghost', a.getAttribute('data-run') !== run));
-                });
-                legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.toggle('ghost', it.getAttribute('data-run') !== run));
-              });
-              el.addEventListener('mouseleave', () => {
-                host.classList.remove('hovering');
-                host.querySelectorAll('.cell').forEach(cell => {
-                  cell.querySelectorAll('.lines path.run-line').forEach(p => p.classList.remove('ghost'));
-                  cell.querySelectorAll('.points circle.pt').forEach(c => c.classList.remove('ghost'));
-                  cell.querySelectorAll('.areas path.area').forEach(a => a.classList.remove('ghost'));
-                });
-                legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
-              });
-            });
-          }
-          rebuildLegend();
-
-          // Build per-metric data map (using resolved names)
-          const dataByMetric = new Map();
-          metricsToDraw.forEach(tgt => {
-            const m = TARGET_TO_DATA[tgt];
-            const map = {}; runList.forEach(r => map[r] = []);
-            rows.filter(r=>r.metric===m).forEach(r => {
-              if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr });
-            });
-            dataByMetric.set(tgt, map);
-          });
-
-          // Render each cell
-          instances.forEach(inst => {
-            const metricMap = dataByMetric.get(inst.metricKey) || {};
-            inst.render(metricMap, colorForRun);
-          });
-
-          // Resize handling
-          const rerender = () => { instances.forEach(inst => inst.render(dataByMetric.get(inst.metricKey)||{}, colorForRun)); };
-          // Synthetic data support: jitter (r) and simulation (s)
-          let cycleIdx = 2;
-          function jitterData(){
-            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
-            mList.forEach((tgt) => {
-              if (tgt === 'epoch') return;
-              const map = dataByMetric.get(tgt); if (!map) return;
-              const isAcc = /acc/i.test(tgt); const isLoss = /loss/i.test(tgt);
-              const scale = isAcc ? 0.01 : (isLoss ? 0.03 : 0.02);
-              Object.keys(map).forEach((run) => {
-                map[run].forEach((pt) => {
-                  const base = Math.abs(pt.value) || 1;
-                  const delta = (Math.random()*2-1) * scale * base;
-                  let nv = pt.value + delta;
-                  if (isAcc) nv = Math.max(0, Math.min(1, nv));
-                  pt.value = nv;
-                });
-              });
-            });
-          }
-          function genCurves(n){
-            const quality = Math.random(); const good = quality > 0.66; const poor = quality < 0.33;
-            const l0 = 2.0 + Math.random()*4.5;
-            const targetLoss = good ? l0*(0.12+Math.random()*0.12) : (poor ? l0*(0.35+Math.random()*0.25) : l0*(0.22+Math.random()*0.16));
-            const phases = 1 + Math.floor(Math.random()*3);
-            const marksSet = new Set();
-            while (marksSet.size < phases-1) { marksSet.add(Math.floor((0.25+Math.random()*0.5)*(n-1))); }
-            const marks = [0, ...Array.from(marksSet).sort((a,b)=>a-b), n-1];
-            let kLoss = 0.02 + Math.random()*0.08; const loss = new Array(n);
-            for (let seg=0; seg<marks.length-1; seg++){
-              const a=marks[seg], b=marks[seg+1]||a+1;
-              for (let i=a;i<=b;i++){
-                const t = (i-a)/Math.max(1,(b-a));
-                const segTarget = targetLoss * Math.pow(0.85, seg);
-                let v = l0*Math.exp(-kLoss*(i+1));
-                v = 0.6*v + 0.4*(l0 + (segTarget - l0)*(seg + t)/Math.max(1,(marks.length-1)));
-                const noiseAmp = (0.08*l0) * (1 - 0.8*(i/(n-1)));
-                v += (Math.random()*2-1)*noiseAmp; if (Math.random() < 0.02) v += 0.15*l0;
-                loss[i] = Math.max(0, v);
-              }
-              kLoss *= 1.6;
-            }
-            const a0 = 0.1 + Math.random()*0.35; const aMax = good ? (0.92+Math.random()*0.07) : (poor ? (0.62+Math.random()*0.14) : (0.8+Math.random()*0.1));
-            let kAcc = 0.02 + Math.random()*0.08; const acc = new Array(n);
-            for (let i=0;i<n;i++){
-              let v = aMax - (aMax - a0)*Math.exp(-kAcc*(i+1));
-              const noiseAmp = 0.04*(1 - 0.8*(i/(n-1)));
-              v += (Math.random()*2-1)*noiseAmp; acc[i] = Math.max(0, Math.min(1, v));
-              if (marksSet.has(i)) kAcc *= 1.4;
-            }
-            const accGap = 0.02 + Math.random()*0.06; const lossGap = 0.05 + Math.random()*0.15;
-            const accVal = new Array(n); const lossVal = new Array(n);
-            let ofStart = Math.floor(((good ? 0.85 : 0.7) + (Math.random()*0.15 - 0.05))*(n-1));
-            ofStart = Math.max(Math.floor(0.5*(n-1)), Math.min(Math.floor(0.95*(n-1)), ofStart));
-            for (let i=0;i<n;i++){
-              let av = acc[i] - accGap + (Math.random()*0.06 - 0.03);
-              let lv = loss[i]*(1+lossGap) + (Math.random()*0.1 - 0.05)*Math.max(1, l0*0.2);
-              if (i>=ofStart && !poor){ const t = (i-ofStart)/Math.max(1,(n-1-ofStart)); av -= 0.03*t; lv += 0.12*t*loss[i]; }
-              accVal[i] = Math.max(0, Math.min(1, av)); lossVal[i] = Math.max(0, lv);
-            }
-            return { accTrain: acc, lossTrain: loss, accVal, lossVal };
-          }
-          function generateRunNames(count){
-            const adjectives = ['ancient','brave','calm','clever','crimson','daring','eager','fearless','gentle','glossy','golden','hidden','icy','jolly','lively','mighty','noble','proud','quick','silent','swift','tiny','vivid','wild'];
-            const nouns = ['river','mountain','harbor','forest','valley','ocean','meadow','desert','island','canyon','harbor','trail','summit','delta','lagoon','ridge','tundra','reef','plateau','prairie','grove','bay','dune','cliff'];
-            const used = new Set(); const names = [];
-            const pick = (arr) => arr[Math.floor(Math.random()*arr.length)];
-            while (names.length < count) {
-              const name = `${pick(adjectives)}-${pick(nouns)}-${Math.floor(1+Math.random()*9)}`;
-              if (!used.has(name)) { used.add(name); names.push(name); }
-            }
-            return names;
-          }
-          function simulateData(){
-            // Randomize number of runs between 2 and 7 with W&B-like names
-            const wantRuns = Math.max(2, Math.floor(2 + Math.random()*6));
-            const runsSim = generateRunNames(wantRuns);
-            const rnd = (min,max)=> Math.floor(min + Math.random()*(max-min+1));
-            let stepsCount = 16;
-            if (cycleIdx === 0) stepsCount = rnd(4, 12);
-            else if (cycleIdx === 1) stepsCount = rnd(16, 48);
-            else stepsCount = rnd(80, 240);
-            cycleIdx = (cycleIdx + 1) % 3;
-            const steps = Array.from({length: stepsCount}, (_,i)=> i+1);
-            const nextByMetric = new Map();
-            const mList = (metricsToDraw && metricsToDraw.length) ? metricsToDraw : TARGET_METRICS;
-            mList.forEach(tgt => { const map = {}; runsSim.forEach(r => map[r] = []); nextByMetric.set(tgt, map); });
-            runsSim.forEach(run => {
-              const curves = genCurves(stepsCount);
-              steps.forEach((s,i)=>{
-                if (mList.includes('epoch')) nextByMetric.get('epoch')[run].push({ step:s, value:s });
-                if (mList.includes('train_accuracy')) nextByMetric.get('train_accuracy')[run].push({ step:s, value: curves.accTrain[i] });
-                if (mList.includes('val_accuracy')) nextByMetric.get('val_accuracy')[run].push({ step:s, value: curves.accVal[i] });
-                if (mList.includes('train_loss')) nextByMetric.get('train_loss')[run].push({ step:s, value: curves.lossTrain[i] });
-                if (mList.includes('val_loss')) nextByMetric.get('val_loss')[run].push({ step:s, value: curves.lossVal[i] });
-              });
-            });s
-            nextByMetric.forEach((v,k)=> dataByMetric.set(k,v));
-            // Update currentRunList and palette, then legend
-            currentRunList = runsSim.slice();
-            try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors==='function') palette = window.ColorPalettes.getColors('categorical', currentRunList.length); } catch(_) {}
-            if (!palette) { const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB'; palette = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])]; }
-            rebuildLegend();
-          }
-          const onKeyDownSim = (ev) => { try { const key = ev && ev.key ? ev.key.toLowerCase() : ''; if (key==='r') { jitterData(); rerender(); } if (key==='s') { simulateData(); rerender(); } } catch(_) {} };
-          window.addEventListener('keydown', onKeyDownSim);
-          // Start with level 3 (long) synthetic data by default
-          simulateData();
-          rerender();
-          host.__rerender = rerender;
-          if (window.ResizeObserver) { const ro = new ResizeObserver(() => rerender()); ro.observe(host); } else { window.addEventListener('resize', rerender); }
-
-          // (Legend hover handlers bound inside rebuildLegend())
-        } catch (e) {
-          const pre = document.createElement('pre'); pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
-          pre.style.color = 'var(--danger, #b00020)'; pre.style.fontSize = '12px'; pre.style.whiteSpace = 'pre-wrap'; host.appendChild(pre);
-        }
-      })();
-    };
-
-    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
-  })();
-</script>
-
-

app/src/styles/components/_button.css

@@ -1,7 +1,7 @@
 button, .button {
     appearance: none;
     background: linear-gradient(15deg, var(--primary-color) 0%, var(--primary-color-hover) 35%);
-    color: white!important;
+    color: white;
     border: 1px solid transparent;
     border-radius: var(--button-radius);
     padding: var(--button-padding-y) var(--button-padding-x);
@@ -15,7 +15,7 @@ button, .button {
   /* Icon-only buttons: equal X/Y padding */
   button:has(> svg:only-child),
   .button:has(> svg:only-child) {
-    padding: var(--button-icon-padding) !important;
+    padding: var(--button-icon-padding);
   }
   button:hover, .button:hover {
     filter: brightness(96%);
@@ -32,24 +32,24 @@ button, .button {
   }
   
   /* Ghost/Muted button: subtle outline, primary color text/border */
-  .button--ghost {
+  .button.button--ghost {
     background: transparent !important;
     color: var(--primary-color) !important;
     border-color: var(--primary-color) !important;
   }
-  .button--ghost:hover {
+  .button.button--ghost:hover {
     color: var(--primary-color-hover) !important;
     border-color: var(--primary-color-hover) !important;
     filter: none;
   }
   
   /* Big button: larger padding and font size */
-  .button--big {
-    padding: var(--button-big-padding-y) var(--button-big-padding-x) !important;
+  .button.button--big {
+    padding: var(--button-big-padding-y) var(--button-big-padding-x);
     font-size: var(--button-big-font-size);
   }
-  .button--big:has(> svg:only-child) {
-    padding: var(--button-big-icon-padding) !important;
+  .button.button--big:has(> svg:only-child) {
+    padding: var(--button-big-icon-padding);
   }
   
   .button-group .button {