From fe455eb3f4ae6e8b6c28b3f7548745f4dfcd32a1 Mon Sep 17 00:00:00 2001 From: David Baker Effendi Date: Wed, 26 Aug 2026 14:47:36 +0200 Subject: [PATCH 1/2] Scale rival bars to their own denominator and even out the cards Two things were wrong on the landing cards. The bars were scaled against the widest card's denominator rather than their own, so Ruby LSP's 9 of 9 rendered at 56% -- 9/16, the TypeScript server's population -- and read as a 56% score. Each bar is now a share of its own card's shared denominator. Cross-card bar lengths were never a valid comparison anyway: rivals answer different populations, from 5 shared cases for gopls to 16 for the TypeScript server, and the project's own guardrail is that those denominators are not interchangeable. The cards also came out at two different heights. Two causes, both measured rather than guessed. The rival's name sat in a fixed 5.5rem label column, so the longer ones wrapped to a second line; the two bar rows now share one grid, whose label column sizes to the longer of the pair and never wraps. And Starlight's markdown flow puts a top margin on every sibling after the first, which left the first card a different height from the rest inside the grid -- the grid's gap owns that spacing now. While in there, the per-card breakdown moves from a sentence to three fixed slots, so it is the same height on every card and scannable down a column, and the third label reads "Rival only" rather than repeating a server name that the card title and its own bar row already carry, which was being truncated mid-phrase. Verified in a browser against the real published scores: all ten cards 206px by 350px with no truncated labels, bars at 100%/22.2% for 9 of 9 against 2 of 9, and the checked-in placeholder still renders the no-result state. astro check clean, links:check 22 routes. Co-Authored-By: Claude Opus 5 --- docs/src/components/LandingResults.astro | 100 +++++++++++++++-------- 1 file changed, 67 insertions(+), 33 deletions(-) diff --git a/docs/src/components/LandingResults.astro b/docs/src/components/LandingResults.astro index 88d6b99..a788392 100644 --- a/docs/src/components/LandingResults.astro +++ b/docs/src/components/LandingResults.astro @@ -82,10 +82,13 @@ const rivalAhead = rows.filter((row) => row.referenceOnly > row.bifrostOnly).len const level = rows.length - bifrostAhead - rivalAhead; const behind = rows.filter((row) => row.referenceOnly > row.bifrostOnly); -/** Widest bar in a row, so the two sides stay on one comparable scale. */ -const widest = Math.max(1, ...rows.map((row) => row.strict.shared)); -function width(value: number): string { - return `${(100 * value) / widest}%`; +// Each bar is a share of its own card's shared denominator, never of the +// widest card. Rivals answer different populations -- 5 shared cases for gopls, +// 16 for the TypeScript server -- so a cross-card scale made 9 of 9 render at +// 56% and read as a 56% score. Bar lengths are comparable within a card, which +// is the only comparison the denominators support. +function width(value: number, shared: number): string { + return `${(100 * value) / Math.max(1, shared)}%`; } --- @@ -128,29 +131,25 @@ function width(value: number): string {

{row.name}

- {row.toolVersion} + {row.toolVersion}
-
- Bifrost -
-
-
- {row.strict.bifrostExact}/{row.strict.shared} + Bifrost +
+
-
- {row.name} -
-
-
- {row.strict.referenceExact}/{row.strict.shared} + {row.strict.bifrostExact}/{row.strict.shared} + {row.name} +
+
+ {row.strict.referenceExact}/{row.strict.shared}
-

- {row.bothExact} exact for both - {row.bifrostOnly > 0 ? ` · ${row.bifrostOnly} Bifrost only` : ''} - {row.referenceOnly > 0 ? ` · ${row.referenceOnly} ${row.name} only` : ''} -

+
+
Both exact
{row.bothExact}
+
Bifrost only
{row.bifrostOnly}
+
Rival only
{row.referenceOnly}
+
))} @@ -228,6 +227,12 @@ function width(value: number): string { border-radius: 0.5rem; padding: 0.9rem 1rem; } + /* Starlight's markdown flow adds a top margin to every sibling after the + first, which inside this grid left the first card a different height from + the rest. The grid's own gap owns the spacing here. */ + .rivals > .rival { + margin: 0; + } .rival header { display: flex; align-items: baseline; @@ -241,15 +246,25 @@ function width(value: number): string { color: var(--sl-color-gray-3); font-variant-numeric: tabular-nums; text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 55%; } - .bars { display: grid; gap: 0.35rem; } - .bar-row { + /* One grid for both rows, so the label column sizes to the longer of the two + names and the tracks still line up. A fixed label width wrapped the longer + server names onto a second line and left those cards taller than the rest. */ + .bars { display: grid; - grid-template-columns: 5.5rem 1fr 3.5rem; + grid-template-columns: auto 1fr auto; align-items: center; - gap: 0.5rem; + gap: 0.35rem 0.5rem; + } + .bars .who { + font-size: 0.8rem; + color: var(--sl-color-gray-2); + white-space: nowrap; } - .bar-row .who { font-size: 0.8rem; color: var(--sl-color-gray-2); } .track { background: var(--sl-color-gray-6); border-radius: 0.2rem; @@ -259,20 +274,39 @@ function width(value: number): string { .fill { height: 100%; border-radius: 0.2rem; } .fill.bifrost { background: var(--sl-color-accent); } .fill.rival { background: var(--sl-color-gray-4); } - .bar-row .num { + .bars .num { font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: right; + white-space: nowrap; } - .bar-row .num small { color: var(--sl-color-gray-3); } - .rival .caption { - font-size: 0.75rem; + .bars .num small { color: var(--sl-color-gray-3); } + /* Fixed slots, so every card is the same height whatever the numbers say. */ + .rival .split { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.4rem; + margin: 0.7rem 0 0; + padding-top: 0.6rem; + border-top: 1px solid var(--sl-color-gray-5); + } + .rival .split div { min-width: 0; } + .rival .split dt { + font-size: 0.68rem; color: var(--sl-color-gray-3); - margin: 0.6rem 0 0; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .rival .split dd { + margin: 0.1rem 0 0; + font-size: 0.95rem; + font-variant-numeric: tabular-nums; } .foot { font-size: 0.85rem; color: var(--sl-color-gray-2); } @media (max-width: 30rem) { - .bar-row { grid-template-columns: 4.5rem 1fr 3rem; } + .bars .who { font-size: 0.75rem; } } From c2080548fca0ca796e67f673893434ec3cf357a9 Mon Sep 17 00:00:00 2001 From: David Baker Effendi Date: Wed, 26 Aug 2026 14:52:37 +0200 Subject: [PATCH 2/2] Align the card breakdowns and call the other side a reference The three-slot breakdown at the foot of each card was misaligned: the first column's label and number sat 16px above its neighbours, and its column was 16px taller. Same cause as the uneven card heights fixed a commit ago -- Starlight's markdown flow puts a top margin on every sibling after the first, so columns two and three were pushed down while column one was not. Measured as margins of 0px, 16px, 16px across the three. Every grid in this component owns its spacing through gap, so the reset now covers the cards, the breakdown columns, and the bar rows rather than only the cards. Also drop "rival" for "reference". That was my coinage; the project already has a word for this and uses it everywhere else. The generated result page's own column heading is "Reference only", the registry calls these reference profiles, and the evidence map speaks of reference-found counts. The landing page now matches its own source tables, and it reads less like a scoreboard against opponents and more like what it is -- a comparison against established implementations, on cases both sides answer. Fixes a swallowed space that rendered "in7 of 10 comparisons". Verified in a browser against the real published scores: no card has a misaligned breakdown row, all ten are 190px by 332px, labels read Both exact, Bifrost only, Reference only, and no label truncates. Placeholder still renders the no-result state; astro check clean, links:check 22 routes. Co-Authored-By: Claude Opus 5 --- docs/src/components/LandingResults.astro | 58 +++++++++++++----------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/docs/src/components/LandingResults.astro b/docs/src/components/LandingResults.astro index a788392..21c3999 100644 --- a/docs/src/components/LandingResults.astro +++ b/docs/src/components/LandingResults.astro @@ -24,8 +24,9 @@ const legacyResult = (legacy?.result ?? {}) as SliceResult; const published = legacyResult.status === 'published_immutable_release'; const profiles: ProfileScore[] = legacyResult.derivedScores?.profiles ?? []; -// A rival's registered profile name carries its version; the short name is what -// a reader scans for. Keyed on the profile string the result generator emits. +// A reference profile's registered name carries its version; the short name is +// what a reader scans for. Keyed on the profile string the result generator +// emits. const shortNames: [RegExp, string][] = [ [/^Apple clangd/, 'clangd'], [/^Eclipse JDT LS/, 'Eclipse JDT LS'], @@ -53,7 +54,7 @@ function version(reference: string): string { type Row = ProfileScore & { name: string; toolVersion: string; - /** Cases exact for Bifrost but not the rival, and the reverse. */ + /** Cases exact for Bifrost but not the reference server, and the reverse. */ bifrostOnly: number; referenceOnly: number; bothExact: number; @@ -78,12 +79,12 @@ const rows: Row[] = profiles const totalShared = rows.reduce((sum, row) => sum + row.strict.shared, 0); const bifrostAhead = rows.filter((row) => row.bifrostOnly > row.referenceOnly).length; -const rivalAhead = rows.filter((row) => row.referenceOnly > row.bifrostOnly).length; -const level = rows.length - bifrostAhead - rivalAhead; +const referenceAhead = rows.filter((row) => row.referenceOnly > row.bifrostOnly).length; +const level = rows.length - bifrostAhead - referenceAhead; const behind = rows.filter((row) => row.referenceOnly > row.bifrostOnly); // Each bar is a share of its own card's shared denominator, never of the -// widest card. Rivals answer different populations -- 5 shared cases for gopls, +// widest card. Reference servers answer different populations -- 5 shared cases for gopls, // 16 for the TypeScript server -- so a cross-card scale made 9 of 9 render at // 56% and read as a 56% score. Bar lengths are comparable within a card, which // is the only comparison the denominators support. @@ -102,11 +103,13 @@ function width(value: number, shared: number): string {

Short answer

Against ten reference language servers on the reviewed legacy core, - Bifrost is exact on more cases than the rival in {bifrostAhead} - {' '}of {rows.length} comparisons, level in {level}, and behind in {rivalAhead} + Bifrost is exact on more cases than the reference server in{' '} + {bifrostAhead} + {' '}of {rows.length} comparisons, level in {level}, and behind in {referenceAhead} {behind.length > 0 ? ` (${behind.map((row) => row.name).join(', ')})` : ''}. Each language server is compared only on the cases it and Bifrost both - answer, so a rival is never charged for an operation it does not offer. + answer, so a reference server is never charged for an operation it does + not offer.

UsageBench is BrokkAi's own @@ -126,9 +129,9 @@ function width(value: number, shared: number): string {

-
+
{rows.map((row) => ( -
+

{row.name}

{row.toolVersion} @@ -141,14 +144,14 @@ function width(value: number, shared: number): string { {row.strict.bifrostExact}/{row.strict.shared} {row.name}
-
+
{row.strict.referenceExact}/{row.strict.shared}
Both exact
{row.bothExact}
Bifrost only
{row.bifrostOnly}
-
Rival only
{row.referenceOnly}
+
Reference only
{row.referenceOnly}
))} @@ -216,32 +219,35 @@ function width(value: number, shared: number): string { padding-top: 0.6rem; } - .rivals { + .references { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } - .rival { + .reference { border: 1px solid var(--sl-color-gray-5); border-radius: 0.5rem; padding: 0.9rem 1rem; } /* Starlight's markdown flow adds a top margin to every sibling after the - first, which inside this grid left the first card a different height from - the rest. The grid's own gap owns the spacing here. */ - .rivals > .rival { + first. Inside these grids that left the first card taller than the rest, + and then the first breakdown column sitting 16px above its neighbours. + Every grid here owns its spacing through gap, so reset the children. */ + .references > .reference, + .reference .split > div, + .reference .bars > * { margin: 0; } - .rival header { + .reference header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } - .rival h3 { font-size: 1rem; margin: 0; } - .rival .ver { + .reference h3 { font-size: 1rem; margin: 0; } + .reference .ver { font-size: 0.7rem; color: var(--sl-color-gray-3); font-variant-numeric: tabular-nums; @@ -273,7 +279,7 @@ function width(value: number, shared: number): string { } .fill { height: 100%; border-radius: 0.2rem; } .fill.bifrost { background: var(--sl-color-accent); } - .fill.rival { background: var(--sl-color-gray-4); } + .fill.reference { background: var(--sl-color-gray-4); } .bars .num { font-size: 0.85rem; font-variant-numeric: tabular-nums; @@ -282,7 +288,7 @@ function width(value: number, shared: number): string { } .bars .num small { color: var(--sl-color-gray-3); } /* Fixed slots, so every card is the same height whatever the numbers say. */ - .rival .split { + .reference .split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; @@ -290,8 +296,8 @@ function width(value: number, shared: number): string { padding-top: 0.6rem; border-top: 1px solid var(--sl-color-gray-5); } - .rival .split div { min-width: 0; } - .rival .split dt { + .reference .split div { min-width: 0; } + .reference .split dt { font-size: 0.68rem; color: var(--sl-color-gray-3); margin: 0; @@ -299,7 +305,7 @@ function width(value: number, shared: number): string { overflow: hidden; text-overflow: ellipsis; } - .rival .split dd { + .reference .split dd { margin: 0.1rem 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums;