vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-09 23:08:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(data): redesign model peers

Browse source
This commit is contained in:
Adam 2026-07-07 11:12:17 -05:00
parent 0b2e8707e3
commit 14a5529793
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
3 changed files with 79 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/stats/app/src/routes/[lab]/[model].tsx
View file

@ -1143,10 +1143,16 @@ function PeerRow(props: { peer: ModelPeerEntry; active: boolean }) {
href={language.route(`${import.meta.env.BASE_URL}${providerSlug(props.peer.provider)}/${props.peer.slug}`)}
data-active={props.active ? "true" : undefined}
>
<span>{String(props.peer.rank).padStart(2, "0")}</span>
<ProviderIcon aria-hidden="true" id={getProviderIconId(props.peer.author)} />
<strong>{props.peer.model}</strong>
<em>{props.peer.author}</em>
<span data-slot="model-peer-rank" aria-label={props.active ? `Rank ${props.peer.rank}` : undefined}>
<Show when={!props.active}>{String(props.peer.rank).padStart(2, "0")}</Show>
</span>
<span data-slot="model-peer-avatar">
<ProviderIcon aria-hidden="true" id={getProviderIconId(props.peer.author)} />
</span>
<span data-slot="model-peer-copy">
<strong>{props.peer.model}</strong>
<em>{props.peer.author}</em>
</span>
<b>{formatTokens(props.peer.tokens)}</b>
</a>
</li>

85
packages/stats/app/src/routes/index.css
View file

@ -5159,7 +5159,10 @@
[data-page="stats"] [data-component="model-peer-list"] {
display: grid;
gap: 8px;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-rows: repeat(5, 64px);
gap: 12px 40px;
margin: 0;
padding: 0;
list-style: none;
@ -5167,11 +5170,12 @@
[data-page="stats"] [data-component="model-peer-list"] a {
display: grid;
grid-template-columns: 38px 24px minmax(0, 1fr) minmax(96px, auto) minmax(80px, auto);
gap: 12px;
grid-template-columns: 32px 32px minmax(0, 1fr) minmax(64px, auto);
gap: 16px;
align-items: center;
min-height: 44px;
padding: 0 12px;
box-sizing: border-box;
height: 64px;
padding: 15px 16px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: var(--stats-text);
@ -5180,25 +5184,56 @@
[data-page="stats"] [data-component="model-peer-list"] a:hover,
[data-page="stats"] [data-component="model-peer-list"] a[data-active="true"] {
border-color: var(--stats-line-strong);
border-color: var(--stats-text);
background: var(--stats-bg);
text-decoration: none;
}
[data-page="stats"] [data-component="model-peer-list"] span,
[data-page="stats"] [data-slot="model-peer-rank"],
[data-page="stats"] [data-component="model-peer-list"] em,
[data-page="stats"] [data-component="model-peer-list"] b {
color: var(--stats-muted);
font-size: 11px;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 1.2;
line-height: 16px;
font-variant-numeric: tabular-nums;
}
[data-page="stats"] [data-component="model-peer-list"] svg {
[data-page="stats"] [data-slot="model-peer-rank"] {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
}
[data-page="stats"] [data-component="model-peer-list"] a[data-active="true"] [data-slot="model-peer-rank"]::before {
width: 6px;
height: 6px;
content: "";
background: var(--stats-text);
}
[data-page="stats"] [data-slot="model-peer-avatar"] {
display: grid;
place-items: center;
width: 32px;
height: 32px;
color: var(--stats-muted);
background: var(--stats-bg);
box-shadow: inset 0 0 0 1px var(--stats-line);
}
[data-page="stats"] [data-slot="model-peer-avatar"] svg {
width: 18px;
height: 18px;
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="model-peer-copy"] {
display: grid;
gap: 2px;
min-width: 0;
}
[data-page="stats"] [data-component="model-peer-list"] strong {
@ -5207,11 +5242,16 @@
color: var(--stats-text);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="model-peer-list"] b {
justify-self: end;
color: var(--stats-text);
}
[data-page="stats"][data-theme="dark"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) {
color-scheme: dark;
@ -5749,11 +5789,12 @@
}
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 32px 22px minmax(0, 1fr) minmax(72px, auto);
grid-template-columns: 32px 32px minmax(0, 1fr) minmax(64px, auto);
gap: 12px;
}
[data-page="stats"] [data-component="model-peer-list"] em {
display: none;
display: block;
}
[data-page="stats"] [data-slot="chart-footer"] {
@ -6304,12 +6345,20 @@
min-width: 0;
}
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto);
[data-page="stats"] [data-component="model-peer-list"] {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-rows: none;
gap: 12px;
}
[data-page="stats"] [data-component="model-peer-list"] svg {
display: none;
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 28px 32px minmax(0, 1fr) minmax(56px, auto);
gap: 12px;
}
[data-page="stats"] [data-slot="model-peer-rank"] {
width: 28px;
}
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {

4
packages/stats/core/src/domain/home.ts
View file

@ -646,8 +646,8 @@ function buildModelTokenMix(aggregate: ModelAggregate): ModelMixEntry[] {
}
function buildModelPeers(peers: ModelAggregate[], rank: number, totalTokens: number): ModelPeerEntry[] {
const start = Math.max(0, Math.min(rank - 4, Math.max(peers.length - 7, 0)))
return peers.slice(start, start + 7).map((item, index) => ({
const start = Math.max(0, Math.min(rank - 5, Math.max(peers.length - 10, 0)))
return peers.slice(start, start + 10).map((item, index) => ({
model: item.model,
provider: item.provider,
author: formatProvider(item.provider),