skills/compare-model-tradeoffs/assets/effort-field.fragment.html

<div id="effort-field-v1" role="region" aria-labelledby="ef-title" aria-describedby="ef-description">
  <style>
    #effort-field-v1 {
      width: 100%;
      color: var(--foreground);
    }

    #effort-field-v1 .ef-stack {
      display: grid;
      gap: 1rem;
    }

    #effort-field-v1 .ef-evidence {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }

    #effort-field-v1 .ef-guardrail {
      font-weight: 500;
    }

    #effort-field-v1 .ef-summary {
      display: grid;
      grid-template-columns: minmax(9rem, 1.6fr) repeat(2, minmax(6rem, 1fr));
      gap: 0.75rem 1rem;
      align-items: end;
    }

    #effort-field-v1 .ef-summary-item {
      min-width: 0;
    }

    #effort-field-v1 .ef-summary-value {
      font-weight: 500;
    }

    #effort-field-v1 .ef-delta {
      grid-column: 1 / -1;
    }

    #effort-field-v1 .ef-matrix {
      display: grid;
      gap: 0.375rem;
    }

    #effort-field-v1 .ef-heading,
    #effort-field-v1 .ef-row {
      display: grid;
      grid-template-columns: minmax(2.75rem, 0.72fr) repeat(6, minmax(0, 1fr));
      gap: 0.375rem;
      align-items: stretch;
    }

    #effort-field-v1 .ef-column,
    #effort-field-v1 .ef-model {
      display: flex;
      align-items: center;
      color: var(--muted-foreground);
    }

    #effort-field-v1 .ef-column {
      justify-content: center;
      text-align: center;
    }

    #effort-field-v1 .ef-model {
      justify-content: flex-start;
      font-weight: 500;
    }

    #effort-field-v1 .ef-sol {
      --ef-series: var(--viz-series-1);
    }

    #effort-field-v1 .ef-terra {
      --ef-series: var(--viz-series-2);
    }

    #effort-field-v1 .ef-luna {
      --ef-series: var(--viz-series-3);
    }

    #effort-field-v1 .ef-signal {
      background: color-mix(in srgb, var(--ef-series) var(--signal), var(--card));
      color: var(--card-foreground);
    }

    #effort-field-v1 .ef-legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.875rem;
    }

    #effort-field-v1 .ef-key {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    #effort-field-v1 .ef-swatch {
      display: inline-block;
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 50%;
      background: var(--ef-series);
    }

    #effort-field-v1 .ef-refresh {
      animation: ef-summary-refresh 180ms ease-out;
    }

    @keyframes ef-summary-refresh {
      from {
        opacity: 0.78;
        transform: translateY(2px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 520px) {
      #effort-field-v1 .ef-summary {
        grid-template-columns: 1fr 1fr;
      }

      #effort-field-v1 .ef-summary-item:first-child {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 390px) {
      #effort-field-v1 .ef-heading,
      #effort-field-v1 .ef-row {
        grid-template-columns: minmax(2.5rem, 0.7fr) repeat(6, minmax(0, 1fr));
        gap: 0.2rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #effort-field-v1 .ef-refresh {
        animation: none;
      }
    }
  </style>

  <h2 class="sr-only" id="ef-title">GeneBench-Pro reasoning-effort signal field</h2>
  <p class="sr-only" id="ef-description">
    Select one of 18 model and reasoning-effort combinations. Each cell shows pass percentage; its accessible label also gives average generated tokens. The summary compares the selection with the same model at medium effort.
  </p>

  <div class="ef-stack">
    <div class="ef-evidence" role="note">
      <span class="viz-badge">129 biology tasks</span>
      <span class="ef-guardrail">Domain-specific evidence · not a coding prediction</span>
    </div>

    <div class="card ef-summary" id="ef-summary" aria-live="polite">
      <div class="ef-summary-item">
        <div class="text-small">Selection</div>
        <div class="ef-summary-value" id="ef-selection">Terra · High</div>
      </div>
      <div class="ef-summary-item">
        <div class="text-small">Pass score</div>
        <div class="ef-summary-value" id="ef-score">16.2%</div>
      </div>
      <div class="ef-summary-item">
        <div class="text-small">Average tokens</div>
        <div class="ef-summary-value" id="ef-tokens">22.2k</div>
      </div>
      <div class="ef-delta text-small" id="ef-delta">+2.6 pp · +6.3k average tokens vs Terra medium</div>
    </div>

    <div class="ef-matrix" aria-label="Pass percentage by model and reasoning effort">
      <div class="ef-heading" aria-hidden="true">
        <span></span>
        <span class="ef-column">None</span>
        <span class="ef-column">Low</span>
        <span class="ef-column">Med</span>
        <span class="ef-column">High</span>
        <span class="ef-column">X-high</span>
        <span class="ef-column">Max</span>
      </div>

      <div class="ef-row">
        <div class="ef-model">Sol</div>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 12%;" data-model="sol" data-effort="none" data-score="3.7" data-tokens="1.4" aria-label="GPT-5.6 Sol, no reasoning effort: 3.7 percent pass, 1.4 thousand average tokens" aria-pressed="false">3.7%</button>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 23%;" data-model="sol" data-effort="low" data-score="14.4" data-tokens="5.6" aria-label="GPT-5.6 Sol, low reasoning effort: 14.4 percent pass, 5.6 thousand average tokens" aria-pressed="false">14.4%</button>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 32%;" data-model="sol" data-effort="medium" data-score="22.5" data-tokens="14.4" aria-label="GPT-5.6 Sol, medium reasoning effort: 22.5 percent pass, 14.4 thousand average tokens" aria-pressed="false">22.5%</button>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 34%;" data-model="sol" data-effort="high" data-score="24.4" data-tokens="19.5" aria-label="GPT-5.6 Sol, high reasoning effort: 24.4 percent pass, 19.5 thousand average tokens" aria-pressed="false">24.4%</button>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 36%;" data-model="sol" data-effort="xhigh" data-score="26.8" data-tokens="25.7" aria-label="GPT-5.6 Sol, extra high reasoning effort: 26.8 percent pass, 25.7 thousand average tokens" aria-pressed="false">26.8%</button>
        <button type="button" class="btn viz-tile ef-signal ef-sol" style="--signal: 38%;" data-model="sol" data-effort="max" data-score="28.7" data-tokens="33.2" aria-label="GPT-5.6 Sol, maximum reasoning effort: 28.7 percent pass, 33.2 thousand average tokens" aria-pressed="false">28.7%</button>
      </div>

      <div class="ef-row">
        <div class="ef-model">Terra</div>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 9%;" data-model="terra" data-effort="none" data-score="1.0" data-tokens="0.93" aria-label="GPT-5.6 Terra, no reasoning effort: 1.0 percent pass, 0.93 thousand average tokens" aria-pressed="false">1.0%</button>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 15%;" data-model="terra" data-effort="low" data-score="6.5" data-tokens="5.5" aria-label="GPT-5.6 Terra, low reasoning effort: 6.5 percent pass, 5.5 thousand average tokens" aria-pressed="false">6.5%</button>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 22%;" data-model="terra" data-effort="medium" data-score="13.6" data-tokens="15.9" aria-label="GPT-5.6 Terra, medium reasoning effort: 13.6 percent pass, 15.9 thousand average tokens" aria-pressed="false">13.6%</button>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 25%;" data-model="terra" data-effort="high" data-score="16.2" data-tokens="22.2" aria-label="GPT-5.6 Terra, high reasoning effort: 16.2 percent pass, 22.2 thousand average tokens" aria-pressed="true">16.2%</button>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 28%;" data-model="terra" data-effort="xhigh" data-score="18.8" data-tokens="31.1" aria-label="GPT-5.6 Terra, extra high reasoning effort: 18.8 percent pass, 31.1 thousand average tokens" aria-pressed="false">18.8%</button>
        <button type="button" class="btn viz-tile ef-signal ef-terra" style="--signal: 32%;" data-model="terra" data-effort="max" data-score="23.3" data-tokens="54.3" aria-label="GPT-5.6 Terra, maximum reasoning effort: 23.3 percent pass, 54.3 thousand average tokens" aria-pressed="false">23.3%</button>
      </div>

      <div class="ef-row">
        <div class="ef-model">Luna</div>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 9%;" data-model="luna" data-effort="none" data-score="0.8" data-tokens="0.975" aria-label="GPT-5.6 Luna, no reasoning effort: 0.8 percent pass, 0.975 thousand average tokens" aria-pressed="false">0.8%</button>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 10%;" data-model="luna" data-effort="low" data-score="2.3" data-tokens="3.6" aria-label="GPT-5.6 Luna, low reasoning effort: 2.3 percent pass, 3.6 thousand average tokens" aria-pressed="false">2.3%</button>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 13%;" data-model="luna" data-effort="medium" data-score="4.7" data-tokens="15.6" aria-label="GPT-5.6 Luna, medium reasoning effort: 4.7 percent pass, 15.6 thousand average tokens" aria-pressed="false">4.7%</button>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 16%;" data-model="luna" data-effort="high" data-score="8.0" data-tokens="32.3" aria-label="GPT-5.6 Luna, high reasoning effort: 8.0 percent pass, 32.3 thousand average tokens" aria-pressed="false">8.0%</button>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 19%;" data-model="luna" data-effort="xhigh" data-score="10.8" data-tokens="53.1" aria-label="GPT-5.6 Luna, extra high reasoning effort: 10.8 percent pass, 53.1 thousand average tokens" aria-pressed="false">10.8%</button>
        <button type="button" class="btn viz-tile ef-signal ef-luna" style="--signal: 25%;" data-model="luna" data-effort="max" data-score="16.5" data-tokens="118.2" aria-label="GPT-5.6 Luna, maximum reasoning effort: 16.5 percent pass, 118.2 thousand average tokens" aria-pressed="false">16.5%</button>
      </div>
    </div>

    <div class="ef-legend text-small" aria-label="Legend: Sol uses series one, Terra series two, Luna series three. Within each model color, stronger signal indicates a higher pass percentage.">
      <span class="text-muted">Signal</span>
      <span class="ef-key ef-sol"><span class="ef-swatch" aria-hidden="true"></span>Sol</span>
      <span class="ef-key ef-terra"><span class="ef-swatch" aria-hidden="true"></span>Terra</span>
      <span class="ef-key ef-luna"><span class="ef-swatch" aria-hidden="true"></span>Luna</span>
      <span class="text-muted">dim → vivid = lower → higher pass %</span>
    </div>

    <div class="text-small text-muted">
      Source:
      <a href="https://cdn.openai.com/pdf/21938268-21af-442f-af93-3b2249afb241/genebench-pro.pdf" target="_blank" rel="noreferrer">OpenAI GeneBench-Pro</a>
    </div>
  </div>

  <script>
    (() => {
      const root = document.getElementById("effort-field-v1");
      if (!root) return;

      const models = {
        sol: {
          label: "Sol",
          medium: { score: 22.5, tokens: 14.4 }
        },
        terra: {
          label: "Terra",
          medium: { score: 13.6, tokens: 15.9 }
        },
        luna: {
          label: "Luna",
          medium: { score: 4.7, tokens: 15.6 }
        }
      };

      const efforts = {
        none: "None",
        low: "Low",
        medium: "Medium",
        high: "High",
        xhigh: "Extra high",
        max: "Max"
      };

      const summary = root.querySelector("#ef-summary");
      const selection = root.querySelector("#ef-selection");
      const score = root.querySelector("#ef-score");
      const tokens = root.querySelector("#ef-tokens");
      const delta = root.querySelector("#ef-delta");
      const cells = Array.from(root.querySelectorAll(".ef-signal"));

      const formatNumber = (value, maximumFractionDigits = 3) =>
        Math.abs(value).toLocaleString(undefined, {
          minimumFractionDigits: 1,
          maximumFractionDigits
        });

      const formatSigned = (value, maximumFractionDigits = 3) => {
        if (Math.abs(value) < 0.0005) return "±0.0";
        return `${value > 0 ? "+" : "−"}${formatNumber(value, maximumFractionDigits)}`;
      };

      const selectCell = (cell) => {
        const model = models[cell.dataset.model];
        const effort = cell.dataset.effort;
        const selectedScore = Number(cell.dataset.score);
        const selectedTokens = Number(cell.dataset.tokens);
        const scoreDelta = selectedScore - model.medium.score;
        const tokenDelta = selectedTokens - model.medium.tokens;

        cells.forEach((candidate) => {
          candidate.setAttribute("aria-pressed", String(candidate === cell));
        });

        selection.textContent = `${model.label} · ${efforts[effort]}`;
        score.textContent = `${selectedScore.toFixed(1)}%`;
        tokens.textContent = `${formatNumber(selectedTokens)}k`;

        if (effort === "medium") {
          delta.textContent = `Baseline · same as ${model.label} medium`;
        } else {
          delta.textContent = `${formatSigned(scoreDelta, 1)} pp · ${formatSigned(tokenDelta)}k average tokens vs ${model.label} medium`;
        }

        summary.classList.remove("ef-refresh");
        void summary.offsetWidth;
        summary.classList.add("ef-refresh");
      };

      cells.forEach((cell) => {
        cell.addEventListener("click", () => selectCell(cell));
      });

      summary.addEventListener("animationend", () => {
        summary.classList.remove("ef-refresh");
      });
    })();
  </script>
</div>