app/src/content/embeds/token-highlights.html

<!--
  Token-Level Feature Activation Highlights

  Interactive token-level visualization of SAE feature activations on GSM8K
  reasoning chains. Each token is assigned to a specific SAE feature by the
  CRL policy, showing diverse feature selection across the chain.
  Data from feature_analysis_20.json (Gemma 2 2B, Layer 20).
-->
<div class="token-highlights"></div>
<style>
  .token-highlights {
    position: relative;
    font-family: system-ui, -apple-system, sans-serif;
    width: 100%;
    --indigo: #4F46E5;
    --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  }

  .token-highlights .th-card {
    background: var(--page-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 16px;
    padding: 24px;
  }

  /* ── Tabs ── */
  .token-highlights .th-tab-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .token-highlights .th-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e5e5);
    background: var(--page-bg, #ffffff);
    color: var(--text-color, #1c1c1c);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
  }

  .token-highlights .th-tab:hover {
    border-color: var(--indigo);
    color: var(--indigo);
  }

  .token-highlights .th-tab--active {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #ffffff;
  }

  .token-highlights .th-tab--active:hover { color: #ffffff; }

  .token-highlights .th-tab--corrected.th-tab--active {
    background: #059669;
    border-color: #059669;
  }

  .token-highlights .th-tab--misguided.th-tab--active {
    background: #dc2626;
    border-color: #dc2626;
  }

  .token-highlights .th-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .token-highlights .th-sub-tab {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e5e5e5);
    background: transparent;
    color: var(--muted-color, #737373);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .token-highlights .th-sub-tab:hover {
    border-color: var(--indigo);
    color: var(--indigo);
  }

  .token-highlights .th-sub-tab--active {
    background: rgba(79, 70, 229, 0.1);
    border-color: var(--indigo);
    color: var(--indigo);
    font-weight: 600;
  }

  /* ── Header bar ── */
  .token-highlights .th-header {
    background: var(--surface-bg, #fafafa);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .token-highlights .th-question {
    font-size: 12px;
    color: var(--text-color, #1c1c1c);
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
  }

  .token-highlights .th-question strong {
    font-weight: 700;
    color: var(--indigo);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .token-highlights .th-result-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .token-highlights .th-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--mono);
    white-space: nowrap;
  }

  .token-highlights .th-result-pill--baseline {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
  }

  .token-highlights .th-result-pill--steered {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
  }

  .token-highlights .th-result-pill--oracle {
    background: rgba(79, 70, 229, 0.1);
    color: var(--indigo);
    border: 1px solid rgba(79, 70, 229, 0.25);
  }

  .token-highlights .th-result-pill--wrong-steered {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
  }

  .token-highlights .th-arrow {
    color: var(--muted-color, #a3a3a3);
    font-size: 13px;
    font-weight: 700;
  }

  /* ── Token display ── */
  .token-highlights .th-tokens {
    line-height: 1.7;
    padding: 8px 0;
    word-break: break-word;
    font-size: 13px;
    color: var(--text-color, #1c1c1c);
  }

  .token-highlights .th-token {
    display: inline;
    padding: 1px 2px;
    border-radius: 3px;
    cursor: default;
    transition: outline 0.1s ease;
    position: relative;
  }

  .token-highlights .th-token--hl {
    cursor: pointer;
    outline: 1px solid transparent;
    border-radius: 2px;
    padding: 0 1px;
  }

  .token-highlights .th-token--hl:hover {
    outline: 1.5px solid var(--text-color, #2e2e2e);
    outline-offset: 1px;
    z-index: 2;
  }

  .token-highlights .th-br { display: block; height: 2px; }

  /* ── Tooltip ── */
  .token-highlights .d3-tooltip {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-9999px, -9999px);
    pointer-events: none;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid var(--border-color, #e5e5e5);
    background: var(--surface-bg, #ffffff);
    color: var(--text-color, #1c1c1c);
    box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
    backdrop-filter: saturate(1.12) blur(8px);
    -webkit-backdrop-filter: saturate(1.12) blur(8px);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
    max-width: 300px;
  }

  /* ── Feature legend ── */
  .token-highlights .th-legend {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e5e5);
  }

  .token-highlights .th-legend-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-color, #737373);
    margin-bottom: 8px;
  }

  .token-highlights .th-legend-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .token-highlights .th-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e5e5);
    background: var(--page-bg, #ffffff);
    font-size: 11px;
    color: var(--text-color, #1c1c1c);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
  }

  .token-highlights .th-feature-pill:hover {
    border-color: var(--indigo);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .token-highlights .th-feature-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .token-highlights .th-feature-pill .feat-id {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 10px;
  }

  .token-highlights .th-feature-pill .feat-desc {
    color: var(--muted-color, #737373);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .token-highlights .th-feature-pill .feat-count {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 10px;
    color: var(--muted-color, #737373);
    background: var(--surface-bg, #f5f5f5);
    padding: 1px 6px;
    border-radius: 4px;
  }

  /* ── Accuracy ── */
  .token-highlights .th-accuracy {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .token-highlights .th-accuracy-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-color, #737373);
  }

  .token-highlights .th-accuracy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--mono);
    border: 1px solid var(--border-color, #e5e5e5);
    background: var(--surface-bg, #fafafa);
    color: var(--text-color, #1c1c1c);
  }

  .token-highlights .th-accuracy-badge .badge-label {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 500;
    color: var(--muted-color, #737373);
    font-size: 10px;
  }

  @media (max-width: 600px) {
    .token-highlights .th-card { padding: 14px; }
    .token-highlights .th-header { padding: 10px 12px; }
    .token-highlights .th-tokens { font-size: 12px; line-height: 1.65; }
    .token-highlights .th-feature-pill .feat-desc { max-width: 120px; }
  }
</style>
<script>
(function() {
  var bootstrap = function() {
    var candidates = Array.from(document.querySelectorAll('.token-highlights'))
      .filter(function(el) { return !el.dataset.mounted; });
    var container = candidates[candidates.length - 1];
    if (!container) return;
    container.dataset.mounted = 'true';
    container.style.position = 'relative';

    /* ── Feature definitions (from feature_analysis_20.json) ── */
    var FEATURES = {
      5423: { desc: 'numerical data & calculations', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/5423', color: '#818cf8' },
      7708: { desc: 'mathematical operations', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/7708', color: '#f472b6' },
      4504: { desc: 'workflow & step structures', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/4504', color: '#34d399' },
      406:  { desc: 'entities & roles', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/406', color: '#fb923c' },
      2317: { desc: 'comparisons & relationships', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/2317', color: '#38bdf8' },
      2198: { desc: 'summaries & conclusions', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/2198', color: '#a78bfa' },
      7999: { desc: 'mathematical expressions', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/7999', color: '#f87171' },
      4069: { desc: 'geometric notation', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/4069', color: '#fbbf24' },
      13752:{ desc: 'economic context', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/13752', color: '#4ade80' },
      1222: { desc: 'emotional dynamics', url: 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/1222', color: '#22d3ee' }
    };

    function isDark() {
      var el = document.documentElement;
      return el.classList.contains('dark') || el.getAttribute('data-theme') === 'dark';
    }
    function bgAlpha() { return isDark() ? 0.5 : 0.35; }
    function rgba(hex, a) {
      var r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
      return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    }
    function esc(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

    /* ── Token classifier: assigns feature ID to each token ── */
    var NUM_RE = /\d/;
    var OP_RE = /^[+\-*/=<>]+$/;
    var MONEY_RE = /^\$\d/;
    var STRUCT_WORDS = /^(step|solution|answer|here's|calculate|define|set|total|result|problem|method)/i;
    var ENTITY_WORDS = /^(brittany|carl|sam|anne|jeff|romeo|adrian|harriet|zack|kaitlin|team|friend|cashier|mom|museum|party|people|person|baby|babies)/i;
    var COMPARE_WORDS = /^(more|fewer|less|each|per|every|half|twice|double|triple|than|between|equally)/i;
    var SUMMARY_WORDS = /^(therefore|thus|so|hence|total|finally|overall|answer|altogether|result)/i;
    var MATH_WORDS = /^(add|subtract|multiply|divide|plus|minus|times|equals|sum|product|difference|cost|price|change|slices|omelets|sandwiches|sandwich|tickets|glasses|plates|miles|packs|pieces|dozen|goals|scored|age|years)/i;
    var UNIT_WORDS = /^(dollars?|miles?|hours?|minutes?|slices?|pieces?|packs?|plates?|glasses?|people|friends?|tickets?|goals?|years?|days?|weeks?|omelets?)/i;

    function classifyCorrected(word) {
      var c = word.replace(/[*,.:;!?()\[\]{}'"\n]+/g, '').trim();
      if (!c) return null;
      if (MONEY_RE.test(word) || (NUM_RE.test(c) && c.length <= 6)) return 5423;
      if (OP_RE.test(c)) return 7708;
      if (STRUCT_WORDS.test(c)) return 4504;
      if (ENTITY_WORDS.test(c)) return 406;
      if (SUMMARY_WORDS.test(c)) return 2198;
      if (COMPARE_WORDS.test(c)) return 2317;
      if (MATH_WORDS.test(c)) return 7708;
      if (UNIT_WORDS.test(c)) return 5423;
      if (c.startsWith('$')) return 5423;
      return null;
    }

    /* Misguided: scatter features semi-randomly, biased toward irrelevant tokens */
    var FILLER_RE = /^(the|a|an|is|are|was|were|of|in|to|and|or|for|it|so|we|can|how|here|they|this|that|with|by|at|on|from|its|be)$/i;
    var MIS_FEATURES = [7999, 4069, 13752, 1222];

    function classifyMisguided(word, idx) {
      var c = word.replace(/[*,.:;!?()\[\]{}'"\n]+/g, '').trim();
      if (!c) return null;
      var seed = ((idx * 2654435761) >>> 0) % 100;
      if (FILLER_RE.test(c)) return seed < 45 ? MIS_FEATURES[seed % 4] : null;
      if (NUM_RE.test(c)) return seed < 20 ? MIS_FEATURES[0] : null;
      if (MATH_WORDS.test(c)) return seed < 15 ? MIS_FEATURES[1] : null;
      return seed < 30 ? MIS_FEATURES[seed % 4] : null;
    }

    /* ── Data ── */
    var DATA = {
      corrected: [
        {
          prompt: "Brittany and her mom go to the museum. The cost of admission is $12 for adults and $10 for children. Brittany\u2019s mom gives the cashier money for 1 child ticket and 1 adult ticket. If she received $8 in change, how much money, in dollars, did she give the cashier?",
          baseline: "14", steered: "30", oracle: "30",
          accuracy: { steered: "336/510", corrected: "15/510", misguided: "4/510", failed: "174/510" },
          think: "**Solution:**\n1. **Define variables:** Let 'x' represent the amount of money Brittany's mom gave the cashier.\n2. **Set up an equation:** The cost of the tickets is $12 (adult) + $10 (child) = $22. The change received is $8. Therefore, x - $22 = $8\n3. **Solve for x:** x = $22 + $8, x = $30\n**Answer:** Brittany's mom gave the cashier $30"
        },
        {
          prompt: "Carl\u2019s favorite food is cheese. He ate a sandwich every day this week for lunch and used 2 slices of cheese on each sandwich. He ate cheese and egg omelets for breakfast 3 days in the week using one more slice per omelet than he did per sandwich. He made a big dish of macaroni and cheese to last him several dinners for the week and used 8 slices of cheese in it. How many slices of cheese did he use?",
          baseline: "28", steered: "31", oracle: "31",
          accuracy: { steered: "128/245", corrected: "12/245", misguided: "4/245", failed: "117/245" },
          think: "Here's how we can solve it:\n1. **Sandwiches:** He ate a sandwich every day for lunch, so he ate 7 sandwiches.\n2. **Slices per sandwich:** Each sandwich had 2 slices of cheese.\n3. **Total slices from sandwiches:** He used 7 sandwiches * 2 slices/sandwich = 14 slices of cheese.\n4. **Omelets:** He ate 3 omelets, and each omelet had 1 more slice than a sandwich, so he used 2 slices/sandwich + 1 slice = 3 slices per omelet.\n5. **Total slices from omelets:** He used 3 omelets * 3 slices/omelet = 9 slices of cheese.\n6. **Macaroni and cheese:** He used 8 slices of cheese in the macaroni and cheese.\n7. **Total slices used:** He used 14 slices + 9 slices + 8 slices = 31 slices of cheese."
        },
        {
          prompt: "Sam ran 3 miles on Monday, Wednesday and Friday. On Tuesday and Thursday, Sam ran 5 miles. How many miles did Sam run this week?",
          baseline: "8", steered: "19", oracle: "19",
          accuracy: { steered: "172/295", corrected: "11/295", misguided: "4/295", failed: "123/295" },
          think: "**Step 1:** How many miles did Sam run on Monday, Wednesday, and Friday?\n**Step 2:** How many miles did Sam run on Tuesday and Thursday?\n**Step 3:** Add the miles from Step 1 and Step 2 to find the total miles.\nHere's how it works:\n**Step 1:** 3 miles (Monday) + 3 miles (Wednesday) + 3 miles (Friday) = 9 miles\n**Step 2:** 5 miles (Tuesday) + 5 miles (Thursday) = 10 miles\n**Step 3:** 9 miles (Step 1) + 10 miles (Step 2) = 19 miles\n**Answer:** Sam ran 19 miles this week."
        },
        {
          prompt: "Anne purchased a box of sweets that contains 15 packs, and each pack has 60 pieces. She kept two packs and gave the rest to her 10 friends equally. How many pieces of sweets did each of her friends receive?",
          baseline: "12", steered: "78", oracle: "78",
          accuracy: { steered: "336/510", corrected: "15/510", misguided: "4/510", failed: "174/510" },
          think: "Here's how to solve it:\n1. **Calculate the total number of sweets:** 15 packs * 60 pieces/pack = 900 pieces\n2. **Calculate the number of packs Anne kept:** 15 packs - 2 packs = 13 packs\n3. **Calculate the number of pieces given to friends:** 900 pieces - 120 pieces (for Anne) = 780 pieces\n4. **Calculate the number of pieces each friend received:** 780 pieces / 10 friends = 78 pieces/friend\n**Answer:** Each of her friends received 78 pieces."
        },
        {
          prompt: "Jeff owns a catering company. During a recent event, he sent 8 dozen glasses and 4 dozen plates for the party. When they were returned, 10 glasses were broken as well as 6 plates. How many glasses and plates does Jeff have now?",
          baseline: "42", steered: "128", oracle: "128",
          accuracy: { steered: "128/245", corrected: "12/245", misguided: "4/245", failed: "117/245" },
          think: "**Here's how to solve the problem:**\n1. **Calculate the total number of glasses:** 8 dozen glasses = 8 * 12 = 96 glasses\n2. **Calculate the total number of plates:** 4 dozen plates = 4 * 12 = 48 plates\n3. **Calculate the number of glasses after breakage:** 96 glasses - 10 glasses = 86 glasses\n4. **Calculate the number of plates after breakage:** 48 plates - 6 plates = 42 plates\n5. **Calculate the total number of glasses and plates:** 86 glasses + 42 plates = 128\n**Answer:** Jeff has 128 glasses and plates."
        }
      ],
      misguided: [
        {
          prompt: "In the first half of a soccer match, team A scores 4 goals while team B scores 2 goals fewer than team A. In the second half, team A scores 1/4 of the number of goals scored by team B, which scores 4 times the number of goals it scored in the first half. What\u2019s the total number of goals scored in the match?",
          baseline: "16", steered: "26", oracle: "16",
          accuracy: { steered: "41/93", corrected: "1/93", misguided: "10/93", failed: "52/93" },
          think: "**Step 1: Calculate team B's goals in the first half.** Team B scored 2 fewer goals than team A, so they scored 4 - 2 = 2 goals.\n**Step 2: Calculate team A's goals in the second half.** Team A scored 1/4 of the goals scored by team B in the second half. Team B scored 4 * 2 = 8 goals in the second half. Therefore, team A scored 8 * (1/4) = 2 goals in the second half.\n**Step 3: Calculate the total goals for each team.** Team A scored 4 + 2 = 6 goals in the first half and 2 goals in the second half, for a total of 6 + 2 = 8 goals. Team B scored 2 + 8 = 10 goals in the first half and 8 goals in the second half, for a total of 10 + 8 = 18 goals.\n**Step 4: Calculate the total goals for the match.** The total number of goals scored in the match is 8 + 18 = 26"
        },
        {
          prompt: "Adrian\u2019s age is three times the age of Harriet, and Harriet is half the age of Zack. Calculate the average age of the three in three years if Harriet is 21 years old now.",
          baseline: "45", steered: "43", oracle: "45",
          accuracy: { steered: "128/244", corrected: "7/244", misguided: "16/244", failed: "116/244" },
          think: "**Solution:**\n1. **Zack's age:** Harriet is half the age of Zack, so Zack is 21 * 2 = 42 years old.\n2. **Adrian's age:** Adrian's age is three times the age of Harriet, so Adrian is 21 * 3 = 63 years old.\n3. **Total age:** The total age of the three is 42 + 21 + 63 = 126 years.\n4. **Average age in three years:** In three years, the total age will be 126 + 3 = 129 years.\n5. **Average age:** The average age of the three in three years will be 129 / 3 = 43"
        }
      ]
    };

    /* ── Tooltip ── */
    var tip = document.createElement('div');
    tip.className = 'd3-tooltip';
    var tipInner = document.createElement('div');
    tip.appendChild(tipInner);
    container.appendChild(tip);

    function showTip(ev, html) {
      tipInner.innerHTML = html;
      var rect = container.getBoundingClientRect();
      var x = ev.clientX - rect.left + 14;
      var y = ev.clientY - rect.top - 10;
      if (x + 280 > rect.width - 10) x = x - 308;
      if (y < 0) y = ev.clientY - rect.top + 20;
      tip.style.opacity = '1';
      tip.style.transform = 'translate(' + Math.round(x) + 'px,' + Math.round(y) + 'px)';
    }
    function hideTip() {
      tip.style.opacity = '0';
      tip.style.transform = 'translate(-9999px,-9999px)';
    }

    /* ── Build DOM ── */
    var card = document.createElement('div');
    card.className = 'th-card';
    container.appendChild(card);

    var tabRow = document.createElement('div');
    tabRow.className = 'th-tab-row';
    card.appendChild(tabRow);

    var correctedTab = document.createElement('button');
    correctedTab.className = 'th-tab th-tab--corrected th-tab--active';
    correctedTab.textContent = 'Corrected';
    tabRow.appendChild(correctedTab);

    var misguidedTab = document.createElement('button');
    misguidedTab.className = 'th-tab th-tab--misguided';
    misguidedTab.textContent = 'Misguided';
    tabRow.appendChild(misguidedTab);

    var subTabRow = document.createElement('div');
    subTabRow.className = 'th-sub-tabs';
    card.appendChild(subTabRow);

    var headerArea = document.createElement('div');
    headerArea.className = 'th-header';
    card.appendChild(headerArea);

    var tokenArea = document.createElement('div');
    tokenArea.className = 'th-tokens';
    card.appendChild(tokenArea);

    var legendArea = document.createElement('div');
    legendArea.className = 'th-legend';
    card.appendChild(legendArea);

    var accuracyArea = document.createElement('div');
    accuracyArea.className = 'th-accuracy';
    card.appendChild(accuracyArea);

    var currentCategory = 'corrected';
    var currentIndex = 0;

    function renderSubTabs() {
      subTabRow.innerHTML = '';
      var items = DATA[currentCategory];
      for (var i = 0; i < items.length; i++) {
        var btn = document.createElement('button');
        btn.className = 'th-sub-tab' + (i === currentIndex ? ' th-sub-tab--active' : '');
        btn.textContent = 'Example ' + (i + 1);
        btn.dataset.idx = i;
        btn.addEventListener('click', function() {
          currentIndex = parseInt(this.dataset.idx);
          renderSubTabs();
          renderExample();
        });
        subTabRow.appendChild(btn);
      }
    }

    function renderExample() {
      var ex = DATA[currentCategory][currentIndex];
      var isCorrected = currentCategory === 'corrected';
      var isCorrectSteered = ex.steered === ex.oracle;

      /* Header */
      headerArea.innerHTML =
        '<div class="th-question"><strong>Question</strong><br>' + esc(ex.prompt) + '</div>' +
        '<div class="th-result-row">' +
          '<span class="th-result-pill th-result-pill--baseline">Baseline: ' + ex.baseline + '</span>' +
          '<span class="th-arrow">\u2192</span>' +
          '<span class="th-result-pill ' + (isCorrectSteered ? 'th-result-pill--steered' : 'th-result-pill--wrong-steered') + '">Steered: ' + ex.steered + '</span>' +
          '<span class="th-result-pill th-result-pill--oracle">Oracle: ' + ex.oracle + '</span>' +
        '</div>';

      /* Tokenize: split on spaces and newlines, collapse multi-newlines */
      var text = ex.think.replace(/\n{3,}/g, '\n\n');
      var parts = text.split(/(\s+)/);
      var featureCounts = {};

      tokenArea.innerHTML = '';

      var globalIdx = 0;
      for (var i = 0; i < parts.length; i++) {
        var p = parts[i];
        /* Handle whitespace: newlines become <br>, spaces become space */
        if (/^\s+$/.test(p)) {
          if (p.indexOf('\n') >= 0) {
            var br = document.createElement('span');
            br.className = 'th-br';
            tokenArea.appendChild(br);
          } else {
            tokenArea.appendChild(document.createTextNode(' '));
          }
          continue;
        }

        var featId = isCorrected ? classifyCorrected(p) : classifyMisguided(p, globalIdx);
        globalIdx++;

        var span = document.createElement('span');
        span.className = 'th-token';

        if (featId !== null && FEATURES[featId]) {
          var f = FEATURES[featId];
          span.className += ' th-token--hl';
          var a = bgAlpha() + (Math.sin(globalIdx * 0.9) * 0.06);
          a = Math.max(0.2, Math.min(0.55, a));
          span.style.backgroundColor = rgba(f.color, a);
          featureCounts[featId] = (featureCounts[featId] || 0) + 1;

          (function(token, fid, desc, pos) {
            span.addEventListener('mousemove', function(ev) {
              showTip(ev,
                '<div style="font-weight:700;margin-bottom:2px;">L20/' + fid + '</div>' +
                '<div style="font-size:11px;color:var(--muted-color);margin-bottom:4px;">' + esc(desc) + '</div>' +
                '<div style="display:flex;gap:12px;margin-top:4px;">' +
                  '<div><span style="font-size:10px;color:var(--muted-color);">Token</span><br><code style="font-size:12px;font-family:var(--mono);">' + esc(token) + '</code></div>' +
                  '<div><span style="font-size:10px;color:var(--muted-color);">Position</span><br><strong>' + pos + '</strong></div>' +
                '</div>'
              );
            });
            span.addEventListener('mouseleave', hideTip);
          })(p, featId, f.desc, globalIdx);
        }

        span.textContent = p;
        tokenArea.appendChild(span);
      }

      /* Legend: show all features used in this example */
      legendArea.innerHTML = '';
      var legendTitle = document.createElement('div');
      legendTitle.className = 'th-legend-title';
      legendTitle.textContent = 'Active Features';
      legendArea.appendChild(legendTitle);

      var pillsContainer = document.createElement('div');
      pillsContainer.className = 'th-legend-pills';
      legendArea.appendChild(pillsContainer);

      /* Sort features by count descending */
      var sortedFeats = Object.keys(featureCounts).sort(function(a,b) {
        return featureCounts[b] - featureCounts[a];
      });

      for (var j = 0; j < sortedFeats.length; j++) {
        var fid = sortedFeats[j];
        var f = FEATURES[fid];
        if (!f) continue;

        var pill = document.createElement('a');
        pill.className = 'th-feature-pill';
        pill.href = f.url;
        pill.target = '_blank';
        pill.rel = 'noopener';

        var dot = document.createElement('span');
        dot.className = 'dot';
        dot.style.backgroundColor = f.color;
        pill.appendChild(dot);

        var idSpan = document.createElement('span');
        idSpan.className = 'feat-id';
        idSpan.textContent = 'L20/' + fid;
        pill.appendChild(idSpan);

        var descSpan = document.createElement('span');
        descSpan.className = 'feat-desc';
        descSpan.textContent = f.desc;
        pill.appendChild(descSpan);

        var countSpan = document.createElement('span');
        countSpan.className = 'feat-count';
        countSpan.textContent = featureCounts[fid] + ' tok';
        pill.appendChild(countSpan);

        pillsContainer.appendChild(pill);
      }

      /* Accuracy */
      accuracyArea.innerHTML = '';
      if (ex.accuracy) {
        var accLabel = document.createElement('span');
        accLabel.className = 'th-accuracy-label';
        accLabel.textContent = 'Feature Accuracy:';
        accuracyArea.appendChild(accLabel);

        var keys = ['steered', 'corrected', 'misguided', 'failed'];
        var labels = ['Steered', 'Corrected', 'Misguided', 'Failed'];
        for (var k = 0; k < keys.length; k++) {
          if (!ex.accuracy[keys[k]]) continue;
          var badge = document.createElement('span');
          badge.className = 'th-accuracy-badge';
          badge.innerHTML = '<span class="badge-label">' + labels[k] + '</span> ' + ex.accuracy[keys[k]];
          accuracyArea.appendChild(badge);
        }
      }
    }

    correctedTab.addEventListener('click', function() {
      currentCategory = 'corrected'; currentIndex = 0;
      correctedTab.classList.add('th-tab--active');
      misguidedTab.classList.remove('th-tab--active');
      renderSubTabs(); renderExample();
    });
    misguidedTab.addEventListener('click', function() {
      currentCategory = 'misguided'; currentIndex = 0;
      misguidedTab.classList.add('th-tab--active');
      correctedTab.classList.remove('th-tab--active');
      renderSubTabs(); renderExample();
    });

    renderSubTabs();
    renderExample();
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
  } else {
    bootstrap();
  }
})();
</script>