fix file size in line charts, update wrong reasons, add train model decision flowchart

app/src/components/Image.astro

@@ -42,8 +42,40 @@ const {
   linkTarget,
   linkRel,
   fullWidth,
+  src,
   ...imgProps
 } = Astro.props as Props;
+
+// Try to get original image src from ImageMetadata object
+const getOriginalSrc = (imageSrc: any): string => {
+  if (typeof imageSrc === "string") {
+    return imageSrc;
+  }
+  // ImageMetadata from astro:assets has a 'src' property with the URL
+  if (imageSrc && typeof imageSrc === "object") {
+    // Check if this is an import with ?url (returns the original path directly)
+    if ("default" in imageSrc && typeof imageSrc.default === "string") {
+      return imageSrc.default;
+    }
+    // Try src property (optimized version)
+    if ("src" in imageSrc && typeof imageSrc.src === "string") {
+      return imageSrc.src;
+    }
+    // Try pathname property
+    if ("pathname" in imageSrc && typeof imageSrc.pathname === "string") {
+      return imageSrc.pathname;
+    }
+    // Fallback: try all string properties
+    for (const key of Object.keys(imageSrc)) {
+      if (typeof imageSrc[key] === "string" && imageSrc[key].length > 0) {
+        return imageSrc[key];
+      }
+    }
+  }
+  return "";
+};
+
+const originalSrc = getOriginalSrc(src);
 const hasCaptionSlot = Astro.slots.has("caption");
 const hasCaption =
   hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
@@ -56,6 +88,9 @@ const dataDownloadable =
 const hasLink = typeof linkHref === "string" && linkHref.length > 0;
 const resolvedTarget = hasLink ? linkTarget || "_blank" : undefined;
 const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
+
+// Use downloadSrc if provided, otherwise try to use the original src
+const resolvedDownloadSrc = downloadSrc || originalSrc;
 ---
 
 <div
@@ -79,20 +114,22 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
                 rel={resolvedRel}
               >
                 <AstroImage
+                  src={src}
                   {...imgProps}
                   data-zoomable={dataZoomable}
                   data-downloadable={dataDownloadable}
                   data-download-name={downloadName}
-                  data-download-src={downloadSrc}
+                  data-download-src={resolvedDownloadSrc}
                 />
               </a>
             ) : (
               <AstroImage
+                src={src}
                 {...imgProps}
                 data-zoomable={dataZoomable}
                 data-downloadable={dataDownloadable}
                 data-download-name={downloadName}
-                data-download-src={downloadSrc}
+                data-download-src={resolvedDownloadSrc}
               />
             )}
             <button
@@ -115,10 +152,10 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             target={resolvedTarget}
             rel={resolvedRel}
           >
-            <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+            <AstroImage src={src} {...imgProps} data-zoomable={dataZoomable} />
           </a>
         ) : (
-          <AstroImage {...imgProps} data-zoomable={dataZoomable} />
+          <AstroImage src={src} {...imgProps} data-zoomable={dataZoomable} />
         )}
         <figcaption>
           {hasCaptionSlot ? (
@@ -138,20 +175,22 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             rel={resolvedRel}
           >
             <AstroImage
+              src={src}
               {...imgProps}
               data-zoomable={dataZoomable}
               data-downloadable={dataDownloadable}
               data-download-name={downloadName}
-              data-download-src={downloadSrc}
+              data-download-src={resolvedDownloadSrc}
             />
           </a>
         ) : (
           <AstroImage
+            src={src}
             {...imgProps}
             data-zoomable={dataZoomable}
             data-downloadable={dataDownloadable}
             data-download-name={downloadName}
-            data-download-src={downloadSrc}
+            data-download-src={resolvedDownloadSrc}
           />
         )}
         <button
@@ -173,6 +212,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
         rel={resolvedRel}
       >
         <AstroImage
+          src={src}
           {...imgProps}
           data-zoomable={dataZoomable}
           class={fullWidth ? "full" : ""}
@@ -180,6 +220,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
       </a>
     ) : (
       <AstroImage
+        src={src}
         {...imgProps}
         data-zoomable={dataZoomable}
         class={fullWidth ? "full" : ""}

app/src/components/Note.astro

@@ -54,7 +54,8 @@ const hasHeader =
   .note {
     background: var(--surface-bg);
     border-left: 2px solid var(--border-color);
-    border-radius: 4px;
+    border-radius-top-right: 4px;
+    border-radius-bottom-right: 4px;
     padding: 10px 14px;
     margin: var(--block-spacing-y) 0;
   }

app/src/content/embeds/d3-line-chart.html

@@ -204,34 +204,7 @@
     flex-wrap: wrap;
   }
 
-  /* Trackio footer */
-  .d3-line-chart .trackio-footer {
-    text-align: left;
-    margin-top: 12px;
-    margin-bottom: -2px;
-    padding: 0;
-    opacity: 0.35;
-  }
-
-  @media (prefers-color-scheme: light) {
-    .d3-line-chart .trackio-footer {
-      opacity: 0.7;
-    }
-  }
-
-  .d3-line-chart .trackio-footer a {
-    font-size: 9px;
-    color: var(--muted-color);
-    opacity: 1;
-    text-decoration: none;
-    font-weight: 400;
-    letter-spacing: 0.3px;
-    transition: opacity 0.2s ease;
-  }
-
-  .d3-line-chart .trackio-footer a:hover {
-    opacity: 0.6;
-  }
+  /* Trackio footer removed */
 </style>
 <script>
   (() => {
@@ -320,11 +293,7 @@
       container.appendChild(chartCard);
       container.appendChild(header);
 
-      // Add Trackio footer
-      const footer = document.createElement('div');
-      footer.className = 'trackio-footer';
-      footer.innerHTML = '<a href="https://github.com/gradio-app/trackio" target="_blank" rel="noopener noreferrer">Made with Trackio</a>';
-      container.appendChild(footer);
+      // Footer removed
 
       const d3 = window.d3;
 
@@ -471,6 +440,19 @@
       // Smart formatters (will be set after data loading)
       let formatX = (v) => v;
       let formatY = (v) => v;
+      const MAX_TICKS = 10;
+
+      function limitTicks(ticks, maxCount, domain) {
+        if (!Array.isArray(ticks)) return ticks;
+        if (ticks.length <= maxCount) return ticks;
+        const first = ticks[0];
+        const last = ticks[ticks.length - 1];
+        const step = Math.ceil(ticks.length / maxCount);
+        const sampled = ticks.filter((_, i) => i % step === 0);
+        if (sampled[0] !== first && first >= domain[0]) sampled.unshift(first);
+        if (sampled[sampled.length - 1] !== last && last <= domain[1]) sampled.push(last);
+        return sampled.slice(0, maxCount);
+      }
 
       // Function to determine smart format based on data values
       function createSmartFormatter(values, isFileSize = false) {
@@ -483,18 +465,21 @@
         // Check if all values are effectively integers (within 0.001 tolerance)
         const allIntegers = values.every(v => Math.abs(v - Math.round(v)) < 0.001);
 
-        // File size formatting (B, kB, MB, GB)
+        // File size formatting (binary units: B, KiB, MiB, GiB)
         if (isFileSize) {
+          const KiB = 1024;
+          const MiB = KiB * 1024;
+          const GiB = MiB * 1024;
           return (v) => {
-            if (v >= 1e9) {
-              const gb = v / 1e9;
-              return d3.format('.2f')(gb) + ' GB';
-            } else if (v >= 1e6) {
-              const mb = v / 1e6;
-              return d3.format('.2f')(mb) + ' MB';
-            } else if (v >= 1000) {
-              const kb = v / 1000;
-              return d3.format('.1f')(kb) + ' kB';
+            if (v >= GiB) {
+              const gib = v / GiB;
+              return (gib % 1 === 0 ? d3.format('d')(gib) : d3.format('.2f')(gib)) + ' GiB';
+            } else if (v >= MiB) {
+              const mib = v / MiB;
+              return (mib % 1 === 0 ? d3.format('d')(mib) : d3.format('.2f')(mib)) + ' MiB';
+            } else if (v >= KiB) {
+              const kib = v / KiB;
+              return (kib % 1 === 0 ? d3.format('d')(kib) : d3.format('.1f')(kib)) + ' KiB';
             } else {
               return d3.format('d')(Math.round(v)) + ' B';
             }
@@ -574,9 +559,10 @@
         const innerWidth = xScale.range()[1];
 
         // Smart grid ticks (same as axis ticks)
+
         const getGridTicks = (scale, scaleType) => {
           if (scaleType !== 'log') {
-            return scale.ticks(6);
+            return scale.ticks(Math.min(6, MAX_TICKS));
           }
 
           const domain = scale.domain();
@@ -605,7 +591,8 @@
             ticks.sort((a, b) => a - b);
           }
 
-          return ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          const within = ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          return limitTicks(within, MAX_TICKS, domain);
         };
 
         // Update grid lines
@@ -640,18 +627,27 @@
           .attr('d', d => line(applySmoothing(d.values, smoothEnabled)));
 
         // Smart tick generation for zoomed view
-        const getSmartTicksZoom = (scale, scaleType) => {
+        const getSmartTicksZoom = (scale, scaleType, useBinary = false) => {
           if (scaleType !== 'log') {
-            return scale.ticks(6);
+            return scale.ticks(Math.min(6, MAX_TICKS));
           }
 
           const domain = scale.domain();
+          if (useBinary) {
+            const minPow2 = Math.ceil(Math.log2(domain[0]));
+            const maxPow2 = Math.floor(Math.log2(domain[1]));
+            const ticks = [];
+            for (let p = minPow2; p <= maxPow2; p++) ticks.push(Math.pow(2, p));
+            const within = ticks.filter(t => t >= domain[0] && t <= domain[1]);
+            return limitTicks(within, MAX_TICKS, domain);
+          }
+
           const minLog = Math.log10(domain[0]);
           const maxLog = Math.log10(domain[1]);
           const logRange = maxLog - minLog;
 
           if (logRange < 2) {
-            return scale.ticks(Math.min(4, Math.ceil(logRange * 2)));
+            return scale.ticks(Math.min(MAX_TICKS, Math.min(4, Math.ceil(logRange * 2))));
           }
 
           const ticks = [];
@@ -671,10 +667,11 @@
             ticks.sort((a, b) => a - b);
           }
 
-          return ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          const within = ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          return limitTicks(within, MAX_TICKS, domain);
         };
 
-        const newXTicks = getSmartTicksZoom(newXScale, CONFIG.xScaleType);
+        const newXTicks = getSmartTicksZoom(newXScale, CONFIG.xScaleType, !!CONFIG.xFormatAsFileSize);
         const newYTicks = getSmartTicksZoom(newYScale, CONFIG.yScaleType);
 
         // Update axes with rescaled domains
@@ -742,33 +739,38 @@
           .translateExtent([[0, 0], [innerWidth, innerHeight]]);
 
         // Smart tick generation for log scales
-        const getSmartTicks = (scale, scaleType, targetCount = 6) => {
+        const getSmartTicks = (scale, scaleType, targetCount = 6, useBinary = false) => {
           if (scaleType !== 'log') {
-            return scale.ticks(targetCount);
+            return scale.ticks(Math.min(targetCount, MAX_TICKS));
           }
 
-          // For log scale, use custom tick logic to avoid crowding
           const domain = scale.domain();
+          if (useBinary) {
+            const minPow2 = Math.ceil(Math.log2(domain[0]));
+            const maxPow2 = Math.floor(Math.log2(domain[1]));
+            const ticks = [];
+            for (let p = minPow2; p <= maxPow2; p++) ticks.push(Math.pow(2, p));
+            const within = ticks.filter(t => t >= domain[0] && t <= domain[1]);
+            return limitTicks(within, MAX_TICKS, domain);
+          }
+
+          // For log scale, use custom tick logic to avoid crowding (powers of 10)
           const minLog = Math.log10(domain[0]);
           const maxLog = Math.log10(domain[1]);
           const logRange = maxLog - minLog;
 
-          // If range is small (< 2 orders of magnitude), use fewer ticks
           if (logRange < 2) {
-            return scale.ticks(Math.min(4, Math.ceil(logRange * 2)));
+            return scale.ticks(Math.min(MAX_TICKS, Math.min(4, Math.ceil(logRange * 2))));
           }
 
-          // For larger ranges, show powers of 10 and maybe intermediate values
           const ticks = [];
           const minPower = Math.ceil(minLog);
           const maxPower = Math.floor(maxLog);
 
-          // Always include powers of 10
           for (let power = minPower; power <= maxPower; power++) {
             ticks.push(Math.pow(10, power));
           }
 
-          // If we have too few ticks and the range is not too large, add intermediate values
           if (ticks.length < 4 && logRange < 3) {
             const intermediateTicks = [];
             for (let power = minPower; power < maxPower; power++) {
@@ -778,11 +780,11 @@
             ticks.sort((a, b) => a - b);
           }
 
-          // Filter ticks to be within domain
-          return ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          const within = ticks.filter(t => t >= domain[0] && t <= domain[1]);
+          return limitTicks(within, MAX_TICKS, domain);
         };
 
-        const xTicks = getSmartTicks(xScale, CONFIG.xScaleType, 6);
+        const xTicks = getSmartTicks(xScale, CONFIG.xScaleType, 6, !!CONFIG.xFormatAsFileSize);
         const yTicks = getSmartTicks(yScale, CONFIG.yScaleType, 6);
 
         // Grid (use smart ticks)
@@ -1116,6 +1118,9 @@
             CONFIG.xColumn.toLowerCase().includes('size') ||
             CONFIG.xColumn.toLowerCase().includes('message');
 
+          // Ensure CONFIG flag reflects detection for consistent tick logic
+          CONFIG.xFormatAsFileSize = shouldFormatAsFileSize;
+
           formatX = createSmartFormatter(xValues, shouldFormatAsFileSize);
           formatY = createSmartFormatter(yValues);
 

app/src/content/embeds/train-model-decision-flowchart.html

@@ -0,0 +1,504 @@
+<!--
+  Train Model Decision Flowchart
+  
+  Usage:
+    <HtmlEmbed src="/embeds/train-model-decision-flowchart.html" />
+-->
+<div class="train-model-decision-flowchart"></div>
+<style>
+    .train-model-decision-flowchart {
+        width: 100%;
+        min-height: 300px;
+        position: relative;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    }
+
+    .train-model-decision-flowchart svg {
+        display: block;
+        width: 100%;
+    }
+
+    .train-model-decision-flowchart .node-rect {
+        stroke-width: 2px;
+        rx: 12px;
+        ry: 12px;
+    }
+
+    .train-model-decision-flowchart .node-text {
+        font-size: 18px;
+        font-weight: 500;
+        text-anchor: middle;
+        pointer-events: none;
+        fill: var(--text-color, #333);
+    }
+
+    .train-model-decision-flowchart .node-question {
+        fill: color-mix(in srgb, var(--primary-color) 30%, var(--page-bg));
+    }
+
+    .train-model-decision-flowchart .node-success {
+        fill: color-mix(in srgb, var(--success-color) 30%, var(--page-bg));
+    }
+
+    .train-model-decision-flowchart .node-category {
+        fill: color-mix(in srgb, var(--danger-color) 25%, var(--page-bg));
+    }
+
+    .train-model-decision-flowchart .link-path {
+        fill: none;
+        stroke: var(--muted-color, #666);
+        stroke-width: 2.5px;
+        marker-end: url(#arrowhead);
+    }
+
+    .train-model-decision-flowchart .link-label {
+        font-size: 14px;
+        font-weight: 700;
+        fill: var(--text-color, #333);
+        text-anchor: middle;
+        pointer-events: none;
+    }
+
+    .train-model-decision-flowchart .link-label-bg {
+        fill: var(--page-bg, #ffffff);
+        stroke: none;
+    }
+</style>
+<script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => {
+                if (window.d3 && typeof window.d3.select === 'function') cb();
+            };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
+
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('train-model-decision-flowchart'))) {
+                const candidates = Array.from(document.querySelectorAll('.train-model-decision-flowchart'))
+                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+                container = candidates[candidates.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Define color scheme matching the Mermaid chart
+            const getColors = () => {
+                // Try to use CSS variables first, fallback to Mermaid colors
+                const getCSSVar = (varName, fallback) => {
+                    if (typeof getComputedStyle !== 'undefined') {
+                        const value = getComputedStyle(document.documentElement)
+                            .getPropertyValue(varName);
+                        if (value && value.trim()) {
+                            return value.trim();
+                        }
+                    }
+                    return fallback;
+                };
+
+                return {
+                    question: getCSSVar('--danger-color', '#e85c42'),
+                    decision: getCSSVar('--surface-bg', '#f9f9f9'),
+                    success: getCSSVar('--success-color', '#42d9b3'),
+                    category: getCSSVar('--primary-color', '#0084ff'),
+                    link: getCSSVar('--muted-color', '#666')
+                };
+            };
+
+            // Define the flowchart structure
+            // Layout: top-down with very generous vertical spacing between layers
+            const nodes = [
+                { id: 'A', label: 'Should you train your own model?', type: 'question', x: 400, y: 100 },
+                { id: 'B', label: 'Can existing models handle your use case?', type: 'question', x: 400, y: 240 },
+                { id: 'C', label: 'Existing models work well just with prompting', type: 'decision', x: 200, y: 400 },
+                { id: 'D', label: 'Prompting isn\'t enough', type: 'decision', x: 600, y: 400 },
+                { id: 'E', label: '❌\nDon\'t train. Use existing models', type: 'success', x: 200, y: 560 },
+                { id: 'F', label: 'Can finetuning solve your problem?', type: 'question', x: 600, y: 600 },
+                { id: 'G', label: 'Finetuning works (post-training/continual pretraining)', type: 'decision', x: 450, y: 760 },
+                { id: 'H', label: 'Finetuning cannot solve your problem', type: 'decision', x: 750, y: 760 },
+                { id: 'I', label: '❌\nDon\'t train from scratch', type: 'success', x: 450, y: 920 },
+                { id: 'J', label: 'Train a model under one of these categories', type: 'category', x: 750, y: 960 },
+                { id: 'K', label: '🔬\nResearch', type: 'category', x: 600, y: 1120 },
+                { id: 'L', label: '🏭\nProduction', type: 'category', x: 750, y: 1120 },
+                { id: 'N', label: '🌐\nStrategic Open-Source', type: 'category', x: 970, y: 1120 }
+            ];
+
+            const links = [
+                { source: 'A', target: 'B', label: '' },
+                { source: 'B', target: 'C', label: 'YES' },
+                { source: 'B', target: 'D', label: 'NO' },
+                { source: 'C', target: 'E', label: '' },
+                { source: 'D', target: 'F', label: '' },
+                { source: 'F', target: 'G', label: 'YES' },
+                { source: 'F', target: 'H', label: 'NO' },
+                { source: 'G', target: 'I', label: '' },
+                { source: 'H', target: 'J', label: '' },
+                { source: 'J', target: 'K', label: '' },
+                { source: 'J', target: 'L', label: '' },
+                { source: 'J', target: 'N', label: '' }
+            ];
+
+            // Create SVG
+            const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+            const gRoot = svg.append('g');
+
+            // Define arrowhead marker (solid triangle arrowhead)
+            const defs = svg.append('defs');
+            const marker = defs.append('marker')
+                .attr('id', 'arrowhead')
+                .attr('viewBox', '0 0 10 10')
+                .attr('refX', 2.5)
+                .attr('refY', 5)
+                .attr('markerWidth', 4)
+                .attr('markerHeight', 4)
+                .attr('orient', 'auto');
+
+            // Create solid arrowhead pointing right (smaller)
+            marker.append('path')
+                .attr('d', 'M 0 0 L 8 5 L 0 10 Z')
+                .attr('fill', () => getColors().link);
+
+            let width = 1000, height = 800;
+
+            function render() {
+                width = container.clientWidth || 1000;
+                height = Math.max(800, Math.round(width * 1.3));
+                svg.attr('width', width).attr('height', height);
+
+                const colors = getColors();
+
+                // Calculate scale to fit content (no padding, allow to touch edges)
+                const nodeExtent = {
+                    minX: d3.min(nodes, d => d.x) - 140,
+                    maxX: d3.max(nodes, d => d.x) + 140,
+                    minY: d3.min(nodes, d => d.y) - 20,
+                    maxY: d3.max(nodes, d => d.y) + 20
+                };
+
+                const contentWidth = nodeExtent.maxX - nodeExtent.minX;
+                const contentHeight = nodeExtent.maxY - nodeExtent.minY;
+
+                const scale = Math.min(width / contentWidth, height / contentHeight);
+                const offsetX = (width - contentWidth * scale) / 2 - nodeExtent.minX * scale;
+                const offsetY = (height - contentHeight * scale) / 2 - nodeExtent.minY * scale;
+
+                gRoot.attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+
+                // Create a temporary text element for measuring text width
+                const tempText = gRoot.append('text')
+                    .style('visibility', 'hidden')
+                    .style('font-size', '18px')
+                    .style('font-weight', '500');
+
+                // Word wrap function - intelligently breaks text into lines
+                const wordWrap = (text, maxWidth, fontSize = '18px') => {
+                    const explicitLines = text.split('\n');
+                    const wrappedLines = [];
+
+                    explicitLines.forEach(line => {
+                        if (!line.trim()) {
+                            wrappedLines.push(line);
+                            return;
+                        }
+
+                        tempText.attr('font-size', fontSize).text(line);
+                        const textWidth = tempText.node().getComputedTextLength();
+
+                        // If line fits, keep it as is
+                        if (textWidth <= maxWidth) {
+                            wrappedLines.push(line);
+                            return;
+                        }
+
+                        // Otherwise, break into words and wrap
+                        const words = line.split(/\s+/);
+                        let currentLine = '';
+
+                        words.forEach(word => {
+                            const testLine = currentLine ? `${currentLine} ${word}` : word;
+                            tempText.text(testLine);
+                            const testWidth = tempText.node().getComputedTextLength();
+
+                            if (testWidth <= maxWidth && currentLine) {
+                                currentLine = testLine;
+                            } else {
+                                if (currentLine) {
+                                    wrappedLines.push(currentLine);
+                                }
+                                currentLine = word;
+                            }
+                        });
+
+                        if (currentLine) {
+                            wrappedLines.push(currentLine);
+                        }
+                    });
+
+                    return wrappedLines.filter(line => line.trim().length > 0);
+                };
+
+                // Calculate node dimensions with word wrapping
+                const getNodeDimensions = (node) => {
+                    // Determine max width based on node type (increased for better readability)
+                    const maxWidths = {
+                        question: 220,
+                        decision: 240,
+                        success: 220,
+                        category: 200
+                    };
+
+                    const maxWidth = maxWidths[node.type] || 180;
+                    const fontSize = node.type === 'category' ? '19px' : '18px';
+
+                    // Get wrapped lines
+                    const wrappedLines = wordWrap(node.label, maxWidth, fontSize);
+                    node.wrappedLines = wrappedLines;
+
+                    // Calculate actual width from wrapped lines
+                    tempText.attr('font-size', fontSize);
+                    const lineWidths = wrappedLines.map(line => {
+                        tempText.text(line);
+                        return tempText.node().getComputedTextLength();
+                    });
+                    const maxLineWidth = Math.max(...lineWidths, 0);
+
+                    // Calculate dimensions with padding
+                    const padding = 36;
+                    const lineHeight = node.type === 'category' ? 28 : 26;
+
+                    const width = Math.max(120, maxLineWidth + padding);
+                    const height = Math.max(30, wrappedLines.length * lineHeight + padding);
+
+                    return { width, height, wrappedLines };
+                };
+
+                // Pre-calculate all node dimensions with wrapping
+                nodes.forEach(node => {
+                    const dims = getNodeDimensions(node);
+                    node.width = dims.width;
+                    node.height = dims.height;
+                });
+
+                // Keep tempText for measuring link labels (don't remove it yet)
+
+                // Draw links first (so labels can be on top)
+                const linkGroup = gRoot.selectAll('.link-group').data(links);
+                const linkEnter = linkGroup.enter().append('g').attr('class', 'link-group');
+
+                linkEnter.append('path').attr('class', 'link-path');
+                // Add background rect and text for labels (will be positioned later, after path)
+                linkEnter.append('rect').attr('class', 'link-label-bg').style('opacity', 0);
+                linkEnter.append('text').attr('class', 'link-label').attr('dy', -5);
+
+                const linkMerge = linkEnter.merge(linkGroup);
+
+                linkMerge.select('.link-path')
+                    .attr('d', d => {
+                        const sourceNode = nodes.find(n => n.id === d.source);
+                        const targetNode = nodes.find(n => n.id === d.target);
+
+                        // Add gap between arrows and nodes, and ensure arrows point to node edges
+                        const gap = 12;
+
+                        // Calculate arrow start/end points at node edges
+                        // For vertical connections
+                        if (Math.abs(sourceNode.x - targetNode.x) < 50) {
+                            const sx = sourceNode.x;
+                            const sy = sourceNode.y + sourceNode.height / 2 + gap;
+                            const tx = targetNode.x;
+                            const ty = targetNode.y - targetNode.height / 2 - gap;
+                            return `M ${sx} ${sy} L ${tx} ${ty}`;
+                        }
+
+                        // For horizontal/curved connections
+                        // Determine connection points based on relative positions
+                        let sx, sy, tx, ty;
+
+                        if (Math.abs(sourceNode.y - targetNode.y) < 50) {
+                            // Horizontal connection
+                            const sourceIsLeft = sourceNode.x < targetNode.x;
+                            sx = sourceNode.x + (sourceIsLeft ? sourceNode.width / 2 + gap : -(sourceNode.width / 2 + gap));
+                            sy = sourceNode.y;
+                            tx = targetNode.x + (sourceIsLeft ? -(targetNode.width / 2 + gap) : targetNode.width / 2 + gap);
+                            ty = targetNode.y;
+                        } else {
+                            // Vertical or diagonal connection
+                            sx = sourceNode.x;
+                            sy = sourceNode.y + (sourceNode.y < targetNode.y ? sourceNode.height / 2 + gap : -(sourceNode.height / 2 + gap));
+                            tx = targetNode.x;
+                            ty = targetNode.y + (targetNode.y > sourceNode.y ? -(targetNode.height / 2 + gap) : targetNode.height / 2 + gap);
+                        }
+
+                        // Use curve for diagonal/horizontal connections
+                        const midX = (sx + tx) / 2;
+                        const midY = (sy + ty) / 2;
+                        return `M ${sx} ${sy} C ${sx} ${midY}, ${tx} ${midY}, ${tx} ${ty}`;
+                    })
+                    .attr('stroke', colors.link);
+
+                // Draw label backgrounds and text (only for non-empty labels like YES/NO)
+                linkMerge.filter(d => d.label && d.label.trim())
+                    .each(function (d) {
+                        const sourceNode = nodes.find(n => n.id === d.source);
+                        const targetNode = nodes.find(n => n.id === d.target);
+                        const x = (sourceNode.x + targetNode.x) / 2;
+                        const y = (sourceNode.y + targetNode.y) / 2;
+
+                        const labelEl = d3.select(this);
+                        const textEl = labelEl.select('.link-label');
+
+                        // Measure text to size background (use correct font size for labels)
+                        tempText.style('font-size', '14px').style('font-weight', '700').text(d.label);
+                        const textWidth = tempText.node().getComputedTextLength();
+                        const textHeight = 20;
+                        const padding = 10;
+
+                        // Position background
+                        labelEl.select('.link-label-bg')
+                            .attr('x', x - textWidth / 2 - padding)
+                            .attr('y', y - textHeight / 2 - padding / 2)
+                            .attr('width', textWidth + padding * 2)
+                            .attr('height', textHeight + padding)
+                            .style('opacity', 1);
+
+                        // Position text
+                        textEl
+                            .attr('x', x)
+                            .attr('y', y)
+                            .text(d.label);
+                    });
+
+                // Empty labels don't need background
+                linkMerge.filter(d => !d.label || !d.label.trim())
+                    .select('.link-label')
+                    .attr('x', d => {
+                        const sourceNode = nodes.find(n => n.id === d.source);
+                        const targetNode = nodes.find(n => n.id === d.target);
+                        return (sourceNode.x + targetNode.x) / 2;
+                    })
+                    .attr('y', d => {
+                        const sourceNode = nodes.find(n => n.id === d.source);
+                        const targetNode = nodes.find(n => n.id === d.target);
+                        return (sourceNode.y + targetNode.y) / 2;
+                    })
+                    .text('');
+
+                // Now remove temporary text element
+                tempText.remove();
+
+                // Draw nodes
+                const nodeGroup = gRoot.selectAll('.node-group').data(nodes);
+                const nodeEnter = nodeGroup.enter().append('g').attr('class', 'node-group');
+
+                nodeEnter.append('rect').attr('class', d => `node-rect node-${d.type}`);
+                nodeEnter.append('text').attr('class', 'node-text');
+
+                const nodeMerge = nodeEnter.merge(nodeGroup);
+
+                nodeMerge.select('.node-rect')
+                    .attr('x', d => d.x - d.width / 2)
+                    .attr('y', d => d.y - d.height / 2)
+                    .attr('width', d => d.width)
+                    .attr('height', d => d.height)
+                    .attr('fill', d => {
+                        // Use CSS classes for colors to support color-mix
+                        switch (d.type) {
+                            case 'question': return 'currentColor';
+                            case 'decision': return colors.decision;
+                            case 'success': return 'currentColor';
+                            case 'category': return 'currentColor';
+                            default: return colors.decision;
+                        }
+                    })
+                    .each(function (d) {
+                        // Set stroke based on type, using CSS variables
+                        const strokeColor = d.type === 'decision'
+                            ? 'var(--border-color, #ddd)'
+                            : 'var(--border-color, #ccc)';
+                        d3.select(this).attr('stroke', strokeColor);
+                    })
+                    .attr('stroke-width', 2);
+
+                nodeMerge.select('.node-text')
+                    .attr('x', d => d.x)
+                    .each(function (d) {
+                        // Use wrapped lines if available, otherwise fallback to original
+                        const lines = d.wrappedLines || d.label.split('\n');
+                        const textEl = d3.select(this);
+                        textEl.selectAll('tspan').remove();
+
+                        const fontSize = d.type === 'category' ? '19px' : '18px';
+                        const lineHeight = d.type === 'category' ? 28 : 26;
+
+                        // Calculate vertical centering precisely
+                        // Position text element at node center Y
+                        textEl.attr('y', d.y);
+
+                        // Calculate the offset needed to center the text block
+                        // The first line should be positioned such that the middle of all lines aligns with d.y
+                        const numLines = lines.length;
+                        const totalTextHeight = (numLines - 1) * lineHeight;
+
+                        // For each line, calculate its Y position relative to center
+                        lines.forEach((line, i) => {
+                            // Calculate offset from center: line 0 is at -totalTextHeight/2, last line at +totalTextHeight/2
+                            const offsetFromCenter = (i - (numLines - 1) / 2) * lineHeight;
+
+                            textEl.append('tspan')
+                                .attr('x', d.x)
+                                .attr('dy', i === 0 ? `${offsetFromCenter}px` : `${lineHeight}px`)
+                                .attr('font-size', fontSize)
+                                .attr('text-anchor', 'middle')
+                                .attr('dominant-baseline', 'central')
+                                .text(line);
+                        });
+                    });
+
+                // Update arrowhead color
+                marker.select('path').attr('fill', colors.link);
+            }
+
+            // Initial render + resize handling
+            render();
+            const rerender = () => render();
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(() => rerender());
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', rerender);
+            }
+
+            // Listen for theme changes
+            const observer = new MutationObserver(() => {
+                render();
+            });
+
+            if (document.documentElement) {
+                observer.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['data-theme', 'class']
+                });
+            }
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else {
+            ensureD3(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/wrong-reasons.html

@@ -22,12 +22,12 @@
     background: oklch(from var(--danger-color) calc(l + 0.4) c h / 0.26);
     border: 1px solid oklch(from var(--danger-color) calc(l + 0.15) c h / 0.5);
     border-radius: 16px;
-    padding: var(--spacing-5);
-    text-align: center;
+    padding: var(--spacing-6) var(--spacing-8);
+    text-align: left;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     min-height: 140px;
   }
 
@@ -41,7 +41,7 @@
     font-size: 18px;
     font-weight: 600;
     color: var(--danger-color);
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-2);
     line-height: 1.2;
     letter-spacing: -0.01em;
     position: relative;
@@ -55,20 +55,41 @@
 
   .wrong-reasons .reason-explanation {
     font-size: 13px;
-    color: oklch(from var(--danger-color) calc(l + 0.05) calc(c * 0.7) h);
+    color: oklch(from var(--danger-color) calc(l + 0.05) calc(c * 0.8) h);
     line-height: 1.4;
     font-weight: 500;
-    opacity: 0.85;
+    opacity: 0.9;
     position: relative;
     z-index: 1;
     font-style: italic;
     letter-spacing: -0.005em;
+    padding-left: 1.6em;
+  }
+
+  .wrong-reasons .reason-explanation::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.5em;
+    width: 1.4em;
+    height: 1.4em;
+    background-color: var(--danger-color);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 2 L2 8 L18 8 M18 8 L14 4 M18 8 L14 12' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 2 L2 8 L18 8 M18 8 L14 4 M18 8 L14 12' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    opacity: 0.85;
+    transform: translateY(-50%);
   }
 
   /* Dark mode adjustments for better readability */
   [data-theme="dark"] .wrong-reasons .reason-explanation {
-    color: oklch(from var(--danger-color) calc(l + 0.15) calc(c * 0.9) h);
-    opacity: 0.9;
+    color: oklch(from var(--danger-color) calc(l + 0.2) calc(c * 0.95) h);
+    opacity: 0.95;
   }
 
   @media (max-width: 768px) {