Skip to content

Fix landing card bars, alignment, and terminology #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DavidBakerEffendi merged 2 commits into from
Aug 26, 2026
Merged

Fix landing card bars, alignment, and terminology #174

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe455eb
Scale rival bars to their own denominator and even out the cards
DavidBakerEffendi Aug 26, 2026
c208054
Align the card breakdowns and call the other side a reference
DavidBakerEffendi Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 89 additions & 49 deletions docs/src/components/LandingResults.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -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;
Expand All @@ -78,14 +79,17 @@ 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);

/** 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. 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.
function width(value: number, shared: number): string {
return `${(100 * value) / Math.max(1, shared)}%`;
}
---

Expand All @@ -99,11 +103,13 @@ function width(value: number): string {
<p class="label">Short answer</p>
<p class="verdict">
Against ten reference language servers on the reviewed legacy core,
Bifrost is exact on more cases than the rival in <strong>{bifrostAhead}</strong>
{' '}of {rows.length} comparisons, level in {level}, and behind in {rivalAhead}
Bifrost is exact on more cases than the reference server in{' '}
<strong>{bifrostAhead}</strong>
{' '}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.
</p>
<p>
UsageBench is <a href="https://github.com/BrokkAi">BrokkAi</a>'s own
Expand All @@ -123,34 +129,30 @@ function width(value: number): string {
</p>
</aside>

<div class="rivals">
<div class="references">
{rows.map((row) => (
<article class="rival">
<article class="reference">
<header>
<h3>{row.name}</h3>
<span class="ver">{row.toolVersion}</span>
<span class="ver" title={row.reference}>{row.toolVersion}</span>
</header>
<div class="bars">
<div class="bar-row">
<span class="who">Bifrost</span>
<div class="track">
<div class="fill bifrost" style={`width:${width(row.strict.bifrostExact)}`}></div>
</div>
<span class="num">{row.strict.bifrostExact}<small>/{row.strict.shared}</small></span>
<span class="who">Bifrost</span>
<div class="track">
<div class="fill bifrost" style={`width:${width(row.strict.bifrostExact, row.strict.shared)}`}></div>
</div>
<div class="bar-row">
<span class="who">{row.name}</span>
<div class="track">
<div class="fill rival" style={`width:${width(row.strict.referenceExact)}`}></div>
</div>
<span class="num">{row.strict.referenceExact}<small>/{row.strict.shared}</small></span>
<span class="num">{row.strict.bifrostExact}<small>/{row.strict.shared}</small></span>
<span class="who">{row.name}</span>
<div class="track">
<div class="fill reference" style={`width:${width(row.strict.referenceExact, row.strict.shared)}`}></div>
</div>
<span class="num">{row.strict.referenceExact}<small>/{row.strict.shared}</small></span>
</div>
<p class="caption">
{row.bothExact} exact for both
{row.bifrostOnly > 0 ? ` · ${row.bifrostOnly} Bifrost only` : ''}
{row.referenceOnly > 0 ? ` · ${row.referenceOnly} ${row.name} only` : ''}
</p>
<dl class="split">
<div><dt>Both exact</dt><dd>{row.bothExact}</dd></div>
<div><dt>Bifrost only</dt><dd>{row.bifrostOnly}</dd></div>
<div><dt>Reference only</dt><dd>{row.referenceOnly}</dd></div>
</dl>
</article>
))}
</div>
Expand Down Expand Up @@ -217,39 +219,58 @@ function width(value: 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;
}
.rival header {
/* Starlight's markdown flow adds a top margin to every sibling after the
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;
}
.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;
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;
Expand All @@ -258,21 +279,40 @@ 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 {
.fill.reference { background: var(--sl-color-gray-4); }
.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. */
.reference .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);
}
.reference .split div { min-width: 0; }
.reference .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;
}
.reference .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; }
}
</style>