← Files Model CompassARCHIVED FILE
skills/compare-model-tradeoffs/assets/neon-constellation.fragment.html
34.1 KB · Oct 4, 2026 · 12:30 UTC
<div id="neon-constellation-root-7f3a" class="ncc-shell">
<style>
#neon-constellation-root-7f3a {
width: 100%;
min-width: 0;
color: var(--foreground);
font-size: var(--font-size-base);
font-weight: 400;
}
#neon-constellation-root-7f3a .ncc-layout {
display: grid;
gap: 1rem;
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-selection {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 0.75rem;
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-selection-copy {
min-width: min(100%, 24rem);
flex: 1 1 24rem;
}
#neon-constellation-root-7f3a .ncc-chart-wrap {
position: relative;
min-width: 0;
overflow: hidden;
}
#neon-constellation-root-7f3a .ncc-chart {
display: block;
width: 100%;
height: 430px;
overflow: visible;
}
#neon-constellation-root-7f3a .ncc-nebula-1 {
fill: var(--viz-series-1);
opacity: 0.06;
filter: blur(34px);
pointer-events: none;
}
#neon-constellation-root-7f3a .ncc-nebula-2 {
fill: var(--viz-series-2);
opacity: 0.045;
filter: blur(42px);
pointer-events: none;
}
#neon-constellation-root-7f3a .ncc-star {
fill: var(--muted-foreground);
opacity: 0.18;
pointer-events: none;
}
#neon-constellation-root-7f3a .ncc-grid-line,
#neon-constellation-root-7f3a .ncc-axis-line {
fill: none;
stroke: color-mix(in srgb, var(--border) 72%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-unknown-rail {
fill: none;
stroke: color-mix(in srgb, var(--muted-foreground) 56%, transparent);
stroke-width: 1;
stroke-dasharray: 5 5;
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-axis-label {
fill: var(--foreground);
font-weight: 500;
}
#neon-constellation-root-7f3a .ncc-tick-label,
#neon-constellation-root-7f3a .ncc-rail-label {
fill: var(--muted-foreground);
}
#neon-constellation-root-7f3a .ncc-frontier {
fill: none;
stroke: var(--viz-series-1);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 5px var(--viz-series-1));
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-fast-tether {
fill: none;
stroke: color-mix(in srgb, var(--muted-foreground) 68%, transparent);
stroke-width: 1;
stroke-dasharray: 3 4;
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-fast-origin {
fill: var(--background);
stroke: var(--muted-foreground);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-series-1 {
--ncc-node-color: var(--viz-series-1);
}
#neon-constellation-root-7f3a .ncc-series-2 {
--ncc-node-color: var(--viz-series-2);
}
#neon-constellation-root-7f3a .ncc-series-3 {
--ncc-node-color: var(--viz-series-3);
}
#neon-constellation-root-7f3a .ncc-model-node {
color: var(--ncc-node-color);
}
#neon-constellation-root-7f3a.ncc-ready .ncc-model-node {
transition: transform 460ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
#neon-constellation-root-7f3a .ncc-speed-ring {
fill: none;
stroke: var(--ncc-node-color);
stroke-width: 1;
stroke-opacity: 0.2;
filter: drop-shadow(0 0 4px var(--ncc-node-color));
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-node-glyph {
fill: color-mix(in srgb, var(--background) 86%, var(--ncc-node-color) 14%);
stroke: var(--ncc-node-color);
stroke-width: 2;
filter: drop-shadow(0 0 6px var(--ncc-node-color));
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-selected-orbit {
fill: none;
stroke: var(--viz-series-4);
stroke-width: 2;
stroke-opacity: 0;
vector-effect: non-scaling-stroke;
}
#neon-constellation-root-7f3a .ncc-model-node.ncc-is-selected .ncc-selected-orbit {
stroke-opacity: 0.92;
filter: drop-shadow(0 0 7px var(--viz-series-4));
}
#neon-constellation-root-7f3a .ncc-model-node.ncc-is-selected .ncc-node-glyph {
fill: color-mix(in srgb, var(--background) 64%, var(--ncc-node-color) 36%);
}
#neon-constellation-root-7f3a .ncc-node-label {
fill: var(--foreground);
paint-order: stroke;
stroke: var(--background);
stroke-width: 3;
stroke-linejoin: round;
font-weight: 400;
}
#neon-constellation-root-7f3a .ncc-model-node.ncc-is-selected .ncc-node-label {
font-weight: 500;
}
#neon-constellation-root-7f3a .ncc-model-node.ncc-pulse-once .ncc-selected-orbit {
animation: ncc7f3a-pulse 560ms ease-out 1;
}
#neon-constellation-root-7f3a .ncc-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
color: var(--muted-foreground);
}
#neon-constellation-root-7f3a .ncc-legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
#neon-constellation-root-7f3a .ncc-legend-halo,
#neon-constellation-root-7f3a .ncc-legend-line,
#neon-constellation-root-7f3a .ncc-legend-rail {
display: inline-block;
flex: 0 0 auto;
}
#neon-constellation-root-7f3a .ncc-legend-halo {
width: 1.1rem;
height: 1.1rem;
border: 1px solid var(--viz-series-1);
border-radius: 50%;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--viz-series-1) 26%, transparent),
0 0 7px var(--viz-series-1);
}
#neon-constellation-root-7f3a .ncc-legend-line {
width: 1.5rem;
height: 2px;
background: var(--viz-series-1);
box-shadow: 0 0 5px var(--viz-series-1);
}
#neon-constellation-root-7f3a .ncc-legend-rail {
width: 1.5rem;
border-top: 1px dashed var(--muted-foreground);
}
#neon-constellation-root-7f3a .ncc-gene-panel {
display: grid;
gap: 0.75rem;
padding-top: 0.9rem;
border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-gene-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem 0.75rem;
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-gene-heading h3 {
margin: 0;
font-weight: 500;
}
#neon-constellation-root-7f3a .ncc-gene-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.65rem;
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-gene-step {
display: grid;
grid-template-rows: 58px auto auto;
gap: 0.25rem;
min-width: 0;
}
#neon-constellation-root-7f3a .ncc-gene-meter {
display: flex;
align-items: end;
justify-content: center;
border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
#neon-constellation-root-7f3a .ncc-gene-bar {
display: block;
width: 0.42rem;
min-height: 2px;
background: var(--viz-series-2);
border-radius: 0.3rem 0.3rem 0 0;
transition: height 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
#neon-constellation-root-7f3a .ncc-gene-step.ncc-is-current .ncc-gene-bar {
background: var(--viz-series-1);
box-shadow: 0 0 8px var(--viz-series-1);
}
#neon-constellation-root-7f3a .ncc-gene-effort {
font-weight: 500;
}
#neon-constellation-root-7f3a .ncc-source-note {
color: var(--muted-foreground);
}
@keyframes ncc7f3a-pulse {
0% {
transform: scale(0.86);
stroke-opacity: 0.9;
}
100% {
transform: scale(1.35);
stroke-opacity: 0;
}
}
@media (max-width: 520px) {
#neon-constellation-root-7f3a .ncc-chart {
height: 500px;
}
#neon-constellation-root-7f3a .ncc-gene-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 350px) {
#neon-constellation-root-7f3a .ncc-gene-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
#neon-constellation-root-7f3a .ncc-model-node,
#neon-constellation-root-7f3a .ncc-gene-bar,
#neon-constellation-root-7f3a .ncc-selected-orbit {
transition: none !important;
animation: none !important;
}
}
</style>
<div class="ncc-layout">
<div class="viz-controls" aria-label="Model configuration">
<label class="form-label" for="ncc7f3a-model">
Model
<select id="ncc7f3a-model" class="form-select">
<option value="sol">GPT-5.6 Sol</option>
<option value="terra">GPT-5.6 Terra</option>
<option value="luna">GPT-5.6 Luna</option>
<option value="gpt55">GPT-5.5</option>
<option value="gpt54">GPT-5.4</option>
<option value="mini">GPT-5.4 mini</option>
<option value="spark">GPT-5.3 Codex Spark</option>
</select>
</label>
<label class="form-label" for="ncc7f3a-effort">
Effort
<select id="ncc7f3a-effort" class="form-select"></select>
</label>
<label class="form-label" for="ncc7f3a-tier">
Speed
<select id="ncc7f3a-tier" class="form-select">
<option value="standard">Standard</option>
<option id="ncc7f3a-fast-option" value="fast">Fast</option>
</select>
</label>
</div>
<div class="ncc-selection" aria-live="polite">
<span id="ncc7f3a-selected-badge" class="viz-badge"></span>
<div class="ncc-selection-copy">
<div id="ncc7f3a-selected-main"></div>
<div id="ncc7f3a-selected-note" class="text-small text-muted"></div>
</div>
</div>
<div id="ncc7f3a-chart-wrap" class="ncc-chart-wrap">
<svg
id="ncc7f3a-chart"
class="ncc-chart"
role="img"
aria-labelledby="ncc7f3a-chart-title ncc7f3a-chart-desc"
>
<title id="ncc7f3a-chart-title">Model credit and coding-proxy Pareto constellation</title>
<desc id="ncc7f3a-chart-desc"></desc>
<g id="ncc7f3a-nebulae" aria-hidden="true">
<circle id="ncc7f3a-nebula-1" class="ncc-nebula-1"></circle>
<circle id="ncc7f3a-nebula-2" class="ncc-nebula-2"></circle>
</g>
<g id="ncc7f3a-stars" aria-hidden="true"></g>
<g id="ncc7f3a-axes" aria-hidden="true"></g>
<path id="ncc7f3a-frontier" class="ncc-frontier" aria-hidden="true"></path>
<g id="ncc7f3a-fast-guide" aria-hidden="true"></g>
<g id="ncc7f3a-nodes" aria-hidden="true"></g>
</svg>
</div>
<div class="ncc-legend text-small" aria-label="Chart legend">
<span class="ncc-legend-item">
<span class="ncc-legend-halo" aria-hidden="true"></span>
Halo count = documented speed ordinal
</span>
<span class="ncc-legend-item">
<span class="ncc-legend-line" aria-hidden="true"></span>
Current Pareto frontier
</span>
<span class="ncc-legend-item">
<span class="ncc-legend-rail" aria-hidden="true"></span>
AA coding proxy unavailable
</span>
</div>
<section class="ncc-gene-panel" aria-labelledby="ncc7f3a-gene-title">
<div class="ncc-gene-heading">
<h3 id="ncc7f3a-gene-title">GeneBench Pro effort detail</h3>
<span class="viz-badge">biology domain only</span>
<span class="text-small text-muted">Pass % bar on a fixed 0-30 scale / average tokens in thousands</span>
</div>
<div id="ncc7f3a-gene-status" class="text-small"></div>
<div id="ncc7f3a-gene-grid" class="ncc-gene-grid" role="list"></div>
</section>
<div class="ncc-source-note text-small">
Official snapshot: 2026-07-24.
<a href="https://openai.com/index/gpt-5-6/" target="_blank" rel="noreferrer">AA Coding Agent Index v1.1</a>
is a published model-family proxy and never moves with effort.
<a href="https://learn.chatgpt.com/docs/pricing" target="_blank" rel="noreferrer">Credit rates</a>,
<a href="https://learn.chatgpt.com/docs/agent-configuration/speed" target="_blank" rel="noreferrer">Fast mode</a>, and
<a href="https://cdn.openai.com/pdf/21938268-21af-442f-af93-3b2249afb241/genebench-pro.pdf" target="_blank" rel="noreferrer">GeneBench-Pro</a>
are OpenAI sources.
</div>
</div>
<script>
(() => {
const root = document.getElementById("neon-constellation-root-7f3a");
if (!root) return;
const ns = "http://www.w3.org/2000/svg";
const chart = document.getElementById("ncc7f3a-chart");
const axesLayer = document.getElementById("ncc7f3a-axes");
const starsLayer = document.getElementById("ncc7f3a-stars");
const nodesLayer = document.getElementById("ncc7f3a-nodes");
const frontierPath = document.getElementById("ncc7f3a-frontier");
const fastGuide = document.getElementById("ncc7f3a-fast-guide");
const chartDesc = document.getElementById("ncc7f3a-chart-desc");
const modelSelect = document.getElementById("ncc7f3a-model");
const effortSelect = document.getElementById("ncc7f3a-effort");
const tierSelect = document.getElementById("ncc7f3a-tier");
const fastOption = document.getElementById("ncc7f3a-fast-option");
const selectedBadge = document.getElementById("ncc7f3a-selected-badge");
const selectedMain = document.getElementById("ncc7f3a-selected-main");
const selectedNote = document.getElementById("ncc7f3a-selected-note");
const geneGrid = document.getElementById("ncc7f3a-gene-grid");
const geneStatus = document.getElementById("ncc7f3a-gene-status");
const nebulaOne = document.getElementById("ncc7f3a-nebula-1");
const nebulaTwo = document.getElementById("ncc7f3a-nebula-2");
const gene56 = {
sol: [
{ effort: "none", pass: 3.7, tokens: 1.4 },
{ effort: "low", pass: 14.4, tokens: 5.6 },
{ effort: "medium", pass: 22.5, tokens: 14.4 },
{ effort: "high", pass: 24.4, tokens: 19.5 },
{ effort: "xhigh", pass: 26.8, tokens: 25.7 },
{ effort: "max", pass: 28.7, tokens: 33.2 }
],
terra: [
{ effort: "none", pass: 1, tokens: 0.93 },
{ effort: "low", pass: 6.5, tokens: 5.5 },
{ effort: "medium", pass: 13.6, tokens: 15.9 },
{ effort: "high", pass: 16.2, tokens: 22.2 },
{ effort: "xhigh", pass: 18.8, tokens: 31.1 },
{ effort: "max", pass: 23.3, tokens: 54.3 }
],
luna: [
{ effort: "none", pass: 0.8, tokens: 0.975 },
{ effort: "low", pass: 2.3, tokens: 3.6 },
{ effort: "medium", pass: 4.7, tokens: 15.6 },
{ effort: "high", pass: 8, tokens: 32.3 },
{ effort: "xhigh", pass: 10.8, tokens: 53.1 },
{ effort: "max", pass: 16.5, tokens: 118.2 }
]
};
const models = {
sol: {
name: "GPT-5.6 Sol",
short: "Sol",
outputCredits: 750,
fastFactor: 2.5,
aa: 80,
aaEffort: "Published effort not identified; not remapped by this control.",
speed: 2,
series: 1,
shape: "circle",
efforts: ["low", "medium", "high", "xhigh", "max"],
presetEffort: "medium",
presetTier: "standard"
},
terra: {
name: "GPT-5.6 Terra",
short: "Terra",
outputCredits: 375,
fastFactor: 2.5,
aa: 77.4,
aaEffort: "Published effort not identified; not remapped by this control.",
speed: 3,
series: 1,
shape: "circle",
efforts: ["low", "medium", "high", "xhigh", "max"],
presetEffort: "medium",
presetTier: "fast"
},
luna: {
name: "GPT-5.6 Luna",
short: "Luna",
outputCredits: 150,
fastFactor: 2.5,
aa: 74.6,
aaEffort: "Published effort not identified; not remapped by this control.",
speed: 4,
series: 1,
shape: "circle",
efforts: ["low", "medium", "high", "xhigh", "max"],
presetEffort: "high",
presetTier: "standard"
},
gpt55: {
name: "GPT-5.5",
short: "5.5",
outputCredits: 750,
fastFactor: 2.5,
aa: 76.4,
aaEffort: "Published effort not identified; not remapped by this control.",
speed: 3,
series: 2,
shape: "diamond",
efforts: ["low", "medium", "high", "xhigh"],
presetEffort: "medium",
presetTier: "standard"
},
gpt54: {
name: "GPT-5.4",
short: "5.4",
outputCredits: 375,
fastFactor: 2,
aa: null,
aaEffort: "No published AA Coding Agent Index v1.1 value.",
speed: 3,
series: 2,
shape: "diamond",
efforts: ["low", "medium", "high", "xhigh"],
presetEffort: "medium",
presetTier: "standard"
},
mini: {
name: "GPT-5.4 mini",
short: "5.4 mini",
outputCredits: 113,
fastFactor: null,
aa: null,
aaEffort: "No published AA Coding Agent Index v1.1 value.",
speed: 4,
series: 3,
shape: "triangle",
efforts: ["low", "medium", "high", "xhigh"],
presetEffort: "medium",
presetTier: "standard"
},
spark: {
name: "GPT-5.3 Codex Spark",
short: "Spark",
outputCredits: null,
fastFactor: null,
aa: null,
aaEffort: "Research preview; credit rate and comparable AA proxy are unknown.",
speed: 5,
series: 3,
shape: "star",
efforts: ["preview default"],
presetEffort: "preview default",
presetTier: "standard"
}
};
const stateByModel = Object.fromEntries(
Object.entries(models).map(([id, model]) => [
id,
{ effort: model.presetEffort, tier: model.presetTier }
])
);
let selectedId = "sol";
let nodeEls = {};
let lastLayout = null;
let initialized = false;
const numberFormat = new Intl.NumberFormat("en-US", { maximumFractionDigits: 3 });
function createSvg(tag, attrs = {}, text = "") {
const el = document.createElementNS(ns, tag);
Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, String(value)));
if (text) el.textContent = text;
return el;
}
function makeGlyph(shape) {
if (shape === "circle") {
return createSvg("circle", { class: "ncc-node-glyph", r: 6 });
}
if (shape === "diamond") {
return createSvg("rect", {
class: "ncc-node-glyph",
x: -5,
y: -5,
width: 10,
height: 10,
transform: "rotate(45)"
});
}
if (shape === "triangle") {
return createSvg("path", {
class: "ncc-node-glyph",
d: "M 0 -7 L 7 6 L -7 6 Z"
});
}
return createSvg("path", {
class: "ncc-node-glyph",
d: "M 0 -8 L 2.4 -2.8 L 8 -2.4 L 3.7 1.2 L 5.2 7 L 0 4 L -5.2 7 L -3.7 1.2 L -8 -2.4 L -2.4 -2.8 Z"
});
}
function buildNodes() {
nodesLayer.replaceChildren();
nodeEls = {};
Object.entries(models).forEach(([id, model]) => {
const group = createSvg("g", {
class: `ncc-model-node ncc-series-${model.series}`,
"data-model": id
});
const rings = [];
for (let index = 0; index < model.speed; index += 1) {
const ring = createSvg("circle", {
class: "ncc-speed-ring",
r: 12 + index * 4
});
rings.push(ring);
group.appendChild(ring);
}
const selectedOrbit = createSvg("circle", {
class: "ncc-selected-orbit",
r: 15 + model.speed * 4
});
const glyph = makeGlyph(model.shape);
const label = createSvg("text", {
class: "ncc-node-label text-small",
x: 12,
y: -10
});
group.append(selectedOrbit, glyph, label);
nodesLayer.appendChild(group);
nodeEls[id] = { group, label, selectedOrbit, rings };
});
}
function buildStars() {
const positions = [
[0.08, 0.16], [0.16, 0.31], [0.24, 0.12], [0.31, 0.44],
[0.39, 0.22], [0.47, 0.35], [0.55, 0.11], [0.63, 0.27],
[0.71, 0.18], [0.78, 0.41], [0.86, 0.13], [0.93, 0.32],
[0.11, 0.58], [0.27, 0.67], [0.43, 0.57], [0.59, 0.71],
[0.74, 0.62], [0.89, 0.73]
];
starsLayer.replaceChildren(
...positions.map(([x, y], index) =>
createSvg("circle", {
class: "ncc-star",
"data-x": x,
"data-y": y,
r: index % 4 === 0 ? 1.7 : 1.1
})
)
);
}
function currentState() {
return stateByModel[selectedId];
}
function creditFor(id) {
const model = models[id];
if (model.outputCredits === null) return null;
const state = stateByModel[id];
if (id === selectedId && state.tier === "fast" && model.fastFactor) {
return model.outputCredits * model.fastFactor;
}
return model.outputCredits;
}
function isParetoPoint(point, points) {
return !points.some(
other =>
other.id !== point.id &&
other.credit <= point.credit &&
other.aa >= point.aa &&
(other.credit < point.credit || other.aa > point.aa)
);
}
function effortLabel(value) {
if (value === "xhigh") return "extra high";
return value;
}
function refreshControls() {
const model = models[selectedId];
const state = currentState();
effortSelect.replaceChildren(
...model.efforts.map(effort => {
const option = document.createElement("option");
option.value = effort;
option.textContent = effortLabel(effort);
return option;
})
);
effortSelect.value = state.effort;
effortSelect.disabled = model.efforts.length === 1;
fastOption.disabled = !model.fastFactor;
if (!model.fastFactor && state.tier === "fast") {
state.tier = "standard";
}
tierSelect.value = state.tier;
}
function formatCredit(value) {
return value === null ? "unknown" : numberFormat.format(value);
}
function updateSelectionCopy() {
const model = models[selectedId];
const state = currentState();
const credit = creditFor(selectedId);
const aaText = model.aa === null
? "AA coding proxy unknown"
: `AA coding proxy ${numberFormat.format(model.aa)}`;
selectedBadge.textContent = `${model.name} / ${effortLabel(state.effort)} / ${state.tier === "fast" ? "Fast" : "Standard"}`;
selectedMain.textContent = `${formatCredit(credit)} output credits/M / ${aaText} / speed ordinal ${model.speed}/5`;
if (model.outputCredits === null) {
selectedNote.textContent = model.aaEffort;
} else if (state.tier === "fast") {
selectedNote.textContent = `${model.aaEffort} Fast is documented as 1.5x model speed and ${model.fastFactor}x credits; total task time remains unknown.`;
} else {
selectedNote.textContent = `${model.aaEffort} Higher effort can use more time and tokens; the amount is not published here.`;
}
}
function drawAxes(layout) {
const { width, height, left, right, top, knownBottom, railY, xAxisY, xScale, yScale } = layout;
const elements = [];
const xTicks = [0, 500, 1000, 1500, 2000];
const yTicks = [72, 76, 80];
xTicks.forEach((tick, index) => {
const x = xScale(tick);
elements.push(createSvg("line", {
class: "ncc-grid-line",
x1: x,
y1: top,
x2: x,
y2: xAxisY
}));
const anchor = index === 0 ? "start" : index === xTicks.length - 1 ? "end" : "middle";
elements.push(createSvg("text", {
class: "ncc-tick-label text-small",
x,
y: xAxisY + 20,
"text-anchor": anchor
}, numberFormat.format(tick)));
});
yTicks.forEach(tick => {
const y = yScale(tick);
elements.push(createSvg("line", {
class: "ncc-grid-line",
x1: left,
y1: y,
x2: width - right,
y2: y
}));
elements.push(createSvg("text", {
class: "ncc-tick-label text-small",
x: left - 8,
y: y + 4,
"text-anchor": "end"
}, numberFormat.format(tick)));
});
elements.push(createSvg("line", {
class: "ncc-axis-line",
x1: left,
y1: xAxisY,
x2: width - right,
y2: xAxisY
}));
elements.push(createSvg("line", {
class: "ncc-unknown-rail",
x1: left,
y1: railY,
x2: width - right,
y2: railY
}));
elements.push(createSvg("text", {
class: "ncc-axis-label",
x: left,
y: top - 14
}, "AA Coding Agent Index v1.1"));
elements.push(createSvg("text", {
class: "ncc-rail-label text-small",
x: left,
y: railY - 12
}, "AA proxy unknown"));
elements.push(createSvg("text", {
class: "ncc-axis-label",
x: (left + width - right) / 2,
y: height - 8,
"text-anchor": "middle"
}, "ChatGPT output credits / 1M tokens ->"));
axesLayer.replaceChildren(...elements);
}
function updateDecor(layout) {
const { width, height } = layout;
chart.setAttribute("viewBox", `0 0 ${width} ${height}`);
nebulaOne.setAttribute("cx", width * 0.28);
nebulaOne.setAttribute("cy", height * 0.25);
nebulaOne.setAttribute("r", Math.max(54, width * 0.13));
nebulaTwo.setAttribute("cx", width * 0.76);
nebulaTwo.setAttribute("cy", height * 0.54);
nebulaTwo.setAttribute("r", Math.max(62, width * 0.15));
Array.from(starsLayer.children).forEach(star => {
star.setAttribute("cx", Number(star.dataset.x) * width);
star.setAttribute("cy", Number(star.dataset.y) * height);
});
}
function labelPlacement(id, x, width, isUnknown) {
let dx = 12;
let dy = -10;
let anchor = "start";
if (id === "gpt55") dy = 18;
if (id === "luna") dy = 18;
if (id === "gpt54") dy = 20;
if (id === "mini") dy = -16;
if (id === "spark") dy = -16;
if (isUnknown && id === "gpt54") dy = 20;
if (x > width - 105 || id === "spark") {
dx = -12;
anchor = "end";
}
return { dx, dy, anchor };
}
function renderChart(animateSelection = false) {
const bounds = chart.getBoundingClientRect();
const width = Math.max(300, Math.round(bounds.width || 700));
const height = Math.max(400, Math.round(bounds.height || 430));
const left = width < 440 ? 42 : 56;
const right = width < 440 ? 12 : 28;
const top = 42;
const knownBottom = height - 166;
const railY = height - 105;
const xAxisY = height - 50;
const plotWidth = width - left - right;
const xScale = value => left + (value / 2000) * plotWidth;
const yScale = value => knownBottom - ((value - 70) / 12) * (knownBottom - top);
const layout = { width, height, left, right, top, knownBottom, railY, xAxisY, xScale, yScale };
lastLayout = layout;
drawAxes(layout);
updateDecor(layout);
const points = Object.entries(models).map(([id, model]) => {
const credit = creditFor(id);
const x = credit === null ? width - right - 18 : xScale(credit);
const y = model.aa === null ? railY : yScale(model.aa);
return { id, model, credit, aa: model.aa, x, y };
});
const knownPoints = points.filter(point => point.credit !== null && point.aa !== null);
const frontierPoints = knownPoints
.filter(point => isParetoPoint(point, knownPoints))
.sort((a, b) => a.credit - b.credit);
frontierPath.setAttribute(
"d",
frontierPoints.length
? frontierPoints.map((point, index) => `${index ? "L" : "M"} ${point.x} ${point.y}`).join(" ")
: ""
);
fastGuide.replaceChildren();
const selectedModel = models[selectedId];
const selectedState = currentState();
if (
selectedState.tier === "fast" &&
selectedModel.fastFactor &&
selectedModel.outputCredits !== null
) {
const selectedPoint = points.find(point => point.id === selectedId);
const originX = xScale(selectedModel.outputCredits);
fastGuide.append(
createSvg("line", {
class: "ncc-fast-tether",
x1: originX,
y1: selectedPoint.y,
x2: selectedPoint.x,
y2: selectedPoint.y
}),
createSvg("circle", {
class: "ncc-fast-origin",
cx: originX,
cy: selectedPoint.y,
r: 4
})
);
}
points.forEach(point => {
const refs = nodeEls[point.id];
refs.group.style.transform = `translate(${point.x}px, ${point.y}px)`;
refs.group.classList.toggle("ncc-is-selected", point.id === selectedId);
const label = point.model.aa === null
? `${point.model.short} / AA ?`
: `${point.model.short} / ${numberFormat.format(point.model.aa)}`;
const placement = labelPlacement(point.id, point.x, width, point.model.aa === null);
refs.label.textContent = label;
refs.label.setAttribute("x", placement.dx);
refs.label.setAttribute("y", placement.dy);
refs.label.setAttribute("text-anchor", placement.anchor);
});
if (animateSelection) {
const selectedGroup = nodeEls[selectedId].group;
selectedGroup.classList.remove("ncc-pulse-once");
void selectedGroup.getBoundingClientRect();
selectedGroup.classList.add("ncc-pulse-once");
}
const descriptions = points.map(point => {
const creditText = point.credit === null ? "credit rate unknown" : `${formatCredit(point.credit)} output credits per million`;
const aaText = point.aa === null ? "AA coding proxy unknown" : `AA coding proxy ${numberFormat.format(point.aa)}`;
return `${point.model.name}: ${creditText}, ${aaText}, speed ordinal ${point.model.speed} of 5`;
});
chartDesc.textContent = `${models[selectedId].name} is selected. ${descriptions.join(". ")}.`;
}
function renderGene() {
const rows = gene56[selectedId];
const state = currentState();
geneGrid.replaceChildren();
if (!rows) {
geneGrid.hidden = true;
geneStatus.hidden = false;
geneStatus.textContent = "No official effort-specific GeneBench series is included for this model.";
return;
}
geneGrid.hidden = false;
geneStatus.hidden = false;
geneStatus.textContent = "Domain-specific biology evidence only; do not generalize these effort curves to coding. Ultra is excluded because it changes agent topology.";
rows.forEach(row => {
const item = document.createElement("div");
item.className = "ncc-gene-step";
item.setAttribute("role", "listitem");
item.setAttribute(
"aria-label",
`${row.effort}: ${numberFormat.format(row.pass)} percent pass, ${numberFormat.format(row.tokens)} thousand average tokens`
);
if (row.effort === state.effort) item.classList.add("ncc-is-current");
const meter = document.createElement("div");
meter.className = "ncc-gene-meter";
meter.setAttribute("aria-hidden", "true");
const bar = document.createElement("span");
bar.className = "ncc-gene-bar";
bar.style.height = `${Math.max(2, (row.pass / 30) * 56)}px`;
meter.appendChild(bar);
const effort = document.createElement("div");
effort.className = "ncc-gene-effort";
effort.textContent = effortLabel(row.effort);
const value = document.createElement("div");
value.className = "text-small text-muted";
value.textContent = `${numberFormat.format(row.pass)}% / ${numberFormat.format(row.tokens)}k`;
item.append(meter, effort, value);
geneGrid.appendChild(item);
});
}
function renderState(animateSelection = false) {
refreshControls();
updateSelectionCopy();
renderChart(animateSelection);
renderGene();
}
modelSelect.addEventListener("change", () => {
selectedId = modelSelect.value;
renderState(true);
});
effortSelect.addEventListener("change", () => {
stateByModel[selectedId].effort = effortSelect.value;
renderState(true);
});
tierSelect.addEventListener("change", () => {
stateByModel[selectedId].tier = tierSelect.value;
renderState(true);
});
buildStars();
buildNodes();
modelSelect.value = selectedId;
renderState(false);
requestAnimationFrame(() => {
root.classList.add("ncc-ready");
initialized = true;
});
const observer = new ResizeObserver(() => {
if (!initialized || !lastLayout) return;
renderChart(false);
});
observer.observe(chart);
})();
</script>
</div>
SHA-256: 7e9ab85afcea4c0129f0ccfd4f6f74a67a7eb2735f6a1bc0c6e775f61ae0c0a6