ai-workspace-services/opencode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stats): use data branding assets

Browse Source
This commit is contained in:
Adam 2026-06-09 11:34:26 -05:00
parent ada5b31bb0
commit f1c31f4eba
No known key found for this signature in database
GPG Key ID: 9CB48779AF150E75
9 changed files with 51 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/console/app/src/lib/stats-proxy.ts
View File

@ -10,7 +10,7 @@ export async function statsProxy(evt: APIEvent) {
targetUrl.hostname = Resource.App.stage === "production" ? "stats.opencode.ai" : "stats.dev.opencode.ai"
targetUrl.port = ""
if (targetUrl.pathname.startsWith(`${dataPath}/_build/`) || targetUrl.pathname === `${dataPath}/banner.png`) {
if (targetUrl.pathname.startsWith(`${dataPath}/_build/`) || targetUrl.pathname === `${dataPath}/banner.jpg`) {
targetUrl.pathname = targetUrl.pathname.slice(dataPath.length)
}

BIN
packages/stats/app/public/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
packages/stats/app/public/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.8 KiB

4
packages/stats/app/src/app.tsx
View File

@ -7,8 +7,8 @@ import "./app.css"
function AppMeta() {
return (
<>
<Title>OpenCode Stats</Title>
<Meta name="description" content="OpenCode usage, market share, token cost, and session cost stats." />
<Title>OpenCode Data</Title>
<Meta name="description" content="OpenCode usage data, market share, token cost, and session cost." />
</>
)
}

20
packages/stats/app/src/routes/[lab]/[model].tsx
View File

@ -41,7 +41,7 @@ const modelHeaderLinks: readonly HeaderLink[] = [
{ href: "#peers", label: "Peers" },
]
const modelFooterLinks: readonly HeaderLink[] = [
{ href: import.meta.env.BASE_URL, label: "Stats Home" },
{ href: import.meta.env.BASE_URL, label: "Data Home" },
{ href: `${import.meta.env.BASE_URL}#top-models`, label: "Top Models" },
{ href: `${import.meta.env.BASE_URL}#leaderboard`, label: "Leaderboard" },
{ href: `${import.meta.env.BASE_URL}#session-cost`, label: "Session Cost" },
@ -110,10 +110,10 @@ export default function StatsModel() {
const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
const modelName = createMemo(() => catalogEntry()?.name ?? stats()?.model ?? modelParam() ?? "Model")
const labName = createMemo(() => formatCatalogLabName(catalogEntry()?.lab ?? stats()?.provider ?? labParam()))
const modelTitle = createMemo(() => `${modelName()} Stats`)
const modelTitle = createMemo(() => `${modelName()} Data`)
const modelDescription = createMemo(() =>
stats()
? `${modelName()} usage, rank, token mix, cost, geo breakdown, and peer stats across OpenCode.`
? `${modelName()} usage, rank, token mix, cost, geo breakdown, and peer data across OpenCode.`
: `${modelName()} model facts, limits, and OpenCode usage availability.`,
)
const modelUrl = createMemo(() =>
@ -183,15 +183,15 @@ function ModelLoading() {
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<h1>Model Stats</h1>
<h1>Model Data</h1>
<p>Reading model aggregates from model_stat.</p>
</div>
</div>
</section>
<section data-section="model-panel">
<ModelEmptyState title="Loading model stats" description="Reading the model profile." />
<ModelEmptyState title="Loading model data" description="Reading the model profile." />
</section>
</>
)
@ -204,7 +204,7 @@ function ModelNotFound(props: { lab: string; model: string }) {
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<h1>{props.model || "Model"}</h1>
<p>No model facts or model_stat rows matched {props.lab ? `${props.lab}/${props.model}` : props.model}.</p>
@ -225,7 +225,7 @@ function ModelHero(props: { data: StatsModelData | null; catalog: ModelCatalogEn
return (
<section id="overview" data-section="model-hero">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
@ -279,7 +279,7 @@ function ModelCatalogCallout(props: { catalog: ModelCatalogEntry | null }) {
<div data-component="model-rank-panel">
<span>Model Profile</span>
<strong>{props.catalog?.releaseDate ? formatCatalogDate(props.catalog.releaseDate) : "Listed"}</strong>
<p>No OpenCode usage in the current stats window.</p>
<p>No OpenCode usage in the current data window.</p>
</div>
)
}
@ -446,7 +446,7 @@ function ModelEfficiencySection(props: { data: StatsModelData | null }) {
<Show
when={props.data}
fallback={
<ModelEmptyState title="No efficiency data" description="Cost and cache stats appear after usage lands." />
<ModelEmptyState title="No efficiency data" description="Efficiency data appears after usage lands." />
}
>
{(data) => (

12
packages/stats/app/src/routes/[lab]/index.tsx
View File

@ -35,7 +35,7 @@ const labHeaderLinks: readonly HeaderLink[] = [
{ href: "#models", label: "Models" },
]
const labFooterLinks: readonly HeaderLink[] = [
{ href: import.meta.env.BASE_URL, label: "Stats Home" },
{ href: import.meta.env.BASE_URL, label: "Data Home" },
{ href: `${import.meta.env.BASE_URL}#top-models`, label: "Top Models" },
{ href: `${import.meta.env.BASE_URL}#market-share`, label: "Market Share" },
{ href: `${import.meta.env.BASE_URL}#geo-breakdown`, label: "Geo Breakdown" },
@ -69,7 +69,7 @@ export default function StatsLab() {
const labTitle = createMemo(() => `${labName()} Models`)
const labDescription = createMemo(
() =>
`Explore ${labName()} models used in OpenCode, with recent token usage, context windows, release dates, and model-specific stats.`,
`Explore ${labName()} models used in OpenCode, with recent token usage, context windows, release dates, and model-specific data.`,
)
const labUrl = createMemo(() =>
new URL(
@ -136,7 +136,7 @@ function LabLoading() {
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<h1>Model Lab</h1>
<p>Reading model availability and recent OpenCode usage.</p>
@ -152,7 +152,7 @@ function LabNotFound(props: { lab: string }) {
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<h1>{formatCatalogLabName(props.lab)}</h1>
<p>No models matched this lab.</p>
@ -175,7 +175,7 @@ function LabHero(props: { lab: ModelCatalogLab; stats: StatsLabData | null }) {
return (
<section id="overview" data-section="lab-hero">
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
Stats
Data
</a>
<div data-slot="model-hero-grid">
<div data-slot="model-hero-copy">
@ -184,7 +184,7 @@ function LabHero(props: { lab: ModelCatalogLab; stats: StatsLabData | null }) {
<p>
Explore {props.lab.models.length} {props.lab.name} models used in OpenCode
<Show when={featuredModels().length > 0}> including {formatList(featuredModels())}</Show>. Compare recent
token usage, context windows, release dates, and model-specific stats.
token usage, context windows, release dates, and model-specific data.
</p>
</div>
<div data-component="model-rank-panel">

18
packages/stats/app/src/routes/index.css
View File

@ -145,22 +145,10 @@
}
[data-page="stats"] [data-slot="stats-wordmark"] {
display: flex;
display: block;
flex-shrink: 0;
align-items: center;
gap: 12px;
}
[data-page="stats"] [data-slot="brand-mark"] {
display: block;
width: 19px;
height: 24px;
}
[data-page="stats"] [data-slot="brand-label"] {
display: block;
width: 50.851px;
height: 14px;
width: 66px;
height: 20px;
}
[data-page="stats"] [data-component="section-nav"] {

14
packages/stats/app/src/routes/index.tsx
View File

@ -48,11 +48,11 @@ const rangeLabels: Record<UsageRange, string> = {
"1M": "1 Month",
"2M": "2 Months",
}
const statsHomeTitle = "OpenCode Stats"
const statsHomeDescription = "OpenCode usage, market share, token cost, and session cost stats."
const statsHomeTitle = "OpenCode Data"
const statsHomeDescription = "OpenCode usage data, market share, token cost, and session cost."
const statsHomeFallbackUrl = "https://opencode.ai/data/"
const statsUnfurlPath = "banner.png"
const statsUnfurlAlt = "OpenCode Stats wordmark on a dark patterned background"
const statsUnfurlPath = "banner.jpg"
const statsUnfurlAlt = "OpenCode Data wordmark on a dark patterned background"
const usageColors = [
"#ed6aff",
"#a684ff",
@ -146,7 +146,7 @@ export default function StatsHome() {
<Meta property="og:description" content={statsHomeDescription} />
<Meta property="og:url" content={statsHomeUrl} />
<Meta property="og:image" content={statsUnfurlUrl} />
<Meta property="og:image:type" content="image/png" />
<Meta property="og:image:type" content="image/jpeg" />
<Meta property="og:image:width" content="1200" />
<Meta property="og:image:height" content="630" />
<Meta property="og:image:alt" content={statsUnfurlAlt} />
@ -265,7 +265,7 @@ function Hero(props: { updatedAt: string | null }) {
</p>
<div data-slot="hero-canvas">
<div data-slot="hero-pattern" aria-hidden="true" />
<h1>Model Stats</h1>
<h1>Model Data</h1>
<p data-slot="hero-copy">
See which models are winning real usage, how the mix <br data-slot="hero-copy-break" />
shifts over time, and where momentum is moving each week.
@ -291,7 +291,7 @@ function StatsLoading() {
<>
<Hero updatedAt={null} />
<ChartSection title="Usage">
<EmptyState title="Loading stats" description="Reading model aggregates from model_stat." />
<EmptyState title="Loading data" description="Reading model aggregates from model_stat." />
</ChartSection>
</>
)

61
packages/stats/app/src/routes/stats-shell.tsx
View File

@ -101,10 +101,10 @@ export function Header(props: { githubStars: string; links?: readonly HeaderLink
return (
<header data-component="top" data-menu-open={menuOpen() ? "true" : undefined}>
<div data-slot="header-bar">
<a data-slot="brand" href={props.brandHref ?? import.meta.env.BASE_URL} aria-label="Stats home">
<StatsWordmark />
<a data-slot="brand" href={props.brandHref ?? import.meta.env.BASE_URL} aria-label="Data home">
<DataWordmark />
</a>
<nav data-component="section-nav" aria-label="Stats sections">
<nav data-component="section-nav" aria-label="Data sections">
<ul>
<For each={links()}>
{(link) => (
@ -146,7 +146,7 @@ export function Header(props: { githubStars: string; links?: readonly HeaderLink
</button>
</div>
</div>
<nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Stats sections" hidden={!menuOpen()}>
<nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Data sections" hidden={!menuOpen()}>
<a
data-slot="mobile-menu-item"
data-variant="github"
@ -170,41 +170,24 @@ export function Header(props: { githubStars: string; links?: readonly HeaderLink
)
}
function StatsWordmark() {
function DataWordmark() {
return (
<span data-slot="stats-wordmark" aria-hidden="true">
<StatsMark />
<svg data-slot="brand-label" width="51" height="14" viewBox="0 0 50.8509 14" fill="none">
<path
d="M46.2359 14C45.2276 14 44.3356 13.819 43.56 13.4571C42.7973 13.0822 42.138 12.5328 41.5822 11.8089L43.1722 10.277C43.56 10.807 44.0124 11.2142 44.5295 11.4986C45.0466 11.7701 45.6283 11.9058 46.2747 11.9058C47.7225 11.9058 48.4464 11.2465 48.4464 9.92798C48.4464 9.38504 48.3172 8.97138 48.0586 8.68698C47.8001 8.40259 47.3735 8.19575 46.7788 8.06648L45.596 7.8338C44.3679 7.57525 43.463 7.13573 42.8813 6.51524C42.2996 5.89474 42.0088 5.02862 42.0088 3.9169C42.0088 2.62419 42.3901 1.6482 43.1528 0.98892C43.9284 0.32964 45.0272 0 46.4492 0C47.4187 0 48.2461 0.161588 48.9312 0.484764C49.6293 0.795014 50.2239 1.28624 50.7151 1.95845L49.1251 3.45152C48.789 2.99908 48.4076 2.66297 47.9811 2.44321C47.5545 2.21053 47.0309 2.09418 46.4104 2.09418C45.7253 2.09418 45.2211 2.22992 44.898 2.50139C44.5748 2.77285 44.4132 3.21237 44.4132 3.81995C44.4132 4.3241 44.536 4.71191 44.7816 4.98338C45.0401 5.25485 45.4538 5.45522 46.0226 5.58449L47.2054 5.83656C47.8647 5.97876 48.4206 6.15328 48.873 6.36011C49.3384 6.56694 49.7133 6.82548 49.9977 7.13573C50.295 7.44598 50.5083 7.8144 50.6376 8.241C50.7798 8.65466 50.8509 9.14589 50.8509 9.71468C50.8509 11.1108 50.4501 12.1773 49.6486 12.9141C48.8601 13.638 47.7225 14 46.2359 14Z"
fill="currentColor"
/>
<path
d="M36.9543 2.34643V13.7675H34.5305V2.34643H31.1371V0.232856H40.367V2.34643H36.9543Z"
fill="currentColor"
/>
<path
d="M28.6196 13.7675L27.6695 10.2384H23.3066L22.3565 13.7675H20.0296L23.9853 0.232856H27.049L31.0047 13.7675H28.6196ZM26.0407 4.57635L25.6141 2.42399H25.3426L24.916 4.57635L23.8883 8.27995H27.0878L26.0407 4.57635Z"
fill="currentColor"
/>
<path
d="M16.4849 2.34643V13.7675H14.0611V2.34643H10.6678V0.232856H19.8977V2.34643H16.4849Z"
fill="currentColor"
/>
<path
d="M4.65374 14C3.64543 14 2.75346 13.819 1.97784 13.4571C1.21514 13.0822 0.555863 12.5328 0 11.8089L1.59003 10.277C1.97784 10.807 2.43029 11.2142 2.94737 11.4986C3.46445 11.7701 4.04617 11.9058 4.69252 11.9058C6.14035 11.9058 6.86427 11.2465 6.86427 9.92798C6.86427 9.38504 6.735 8.97138 6.47646 8.68698C6.21791 8.40259 5.79132 8.19575 5.19668 8.06648L4.01385 7.8338C2.78578 7.57525 1.88089 7.13573 1.29917 6.51524C0.717452 5.89474 0.426593 5.02862 0.426593 3.9169C0.426593 2.62419 0.807941 1.6482 1.57064 0.98892C2.34626 0.32964 3.44506 0 4.86704 0C5.83657 0 6.6639 0.161588 7.34903 0.484764C8.04709 0.795014 8.64174 1.28624 9.13297 1.95845L7.54294 3.45152C7.20683 2.99908 6.82549 2.66297 6.39889 2.44321C5.9723 2.21053 5.44875 2.09418 4.82826 2.09418C4.14312 2.09418 3.63897 2.22992 3.31579 2.50139C2.99261 2.77285 2.83103 3.21237 2.83103 3.81995C2.83103 4.3241 2.95383 4.71191 3.19945 4.98338C3.45799 5.25485 3.87165 5.45522 4.44044 5.58449L5.62327 5.83656C6.28255 5.97876 6.83841 6.15328 7.29086 6.36011C7.75623 6.56694 8.13112 6.82548 8.41551 7.13573C8.71284 7.44598 8.92613 7.8144 9.0554 8.241C9.1976 8.65466 9.2687 9.14589 9.2687 9.71468C9.2687 11.1108 8.86796 12.1773 8.06648 12.9141C7.27793 13.638 6.14035 14 4.65374 14Z"
fill="currentColor"
/>
</svg>
</span>
)
}
function StatsMark() {
return (
<svg data-slot="brand-mark" width="19" height="24" viewBox="0 0 19 24" fill="none" aria-hidden="true">
<path opacity="0.2" d="M14.25 19.2H4.75V9.6H14.25V19.2Z" fill="currentColor" />
<path d="M14.25 4.8H4.75V19.2H14.25V4.8ZM19 24H0V0H19V24Z" fill="currentColor" />
<svg data-slot="stats-wordmark" width="66" height="20" viewBox="0 0 66 20" fill="none" aria-hidden="true">
<path opacity="0.2" d="M12 16H4V8H12V16Z" fill="currentColor" />
<path d="M12 4H4V16H12V4ZM16 20H0V0H16V20Z" fill="currentColor" />
<path
d="M63.3543 16L62.5119 12.8711H58.6437L57.8013 16H55.7383L59.2454 4H61.9618L65.4689 16H63.3543ZM61.0678 7.851L60.6896 5.94269H60.4489L60.0707 7.851L59.1595 11.1347H61.9962L61.0678 7.851Z"
fill="currentColor"
/>
<path d="M52.5951 5.87392V16H50.4461V5.87392H47.4375V4H55.6209V5.87392H52.5951Z" fill="currentColor" />
<path
d="M45.2059 16L44.3635 12.8711H40.4953L39.6529 16H37.5898L41.097 4H43.8133L47.3205 16H45.2059ZM42.9194 7.851L42.5411 5.94269H42.3004L41.9222 7.851L41.011 11.1347H43.8477L42.9194 7.851Z"
fill="currentColor"
/>
<path
d="M28 4H32.0917C32.8138 4 33.4556 4.11461 34.0172 4.34384C34.5903 4.5616 35.0716 4.9169 35.4613 5.40974C35.8625 5.89112 36.1662 6.51003 36.3725 7.26648C36.5788 8.02292 36.6819 8.9341 36.6819 10C36.6819 11.0659 36.5788 11.9771 36.3725 12.7335C36.1662 13.49 35.8625 14.1146 35.4613 14.6075C35.0716 15.0888 34.5903 15.4441 34.0172 15.6734C33.4556 15.8911 32.8138 16 32.0917 16H28V4ZM32.0917 14.1261C32.8252 14.1261 33.3926 13.9026 33.7937 13.4556C34.1948 12.9971 34.3954 12.3152 34.3954 11.4097V8.59026C34.3954 7.68481 34.1948 7.0086 33.7937 6.5616C33.3926 6.10315 32.8252 5.87392 32.0917 5.87392H30.149V14.1261H32.0917Z"
fill="currentColor"
/>
</svg>
)
}
@ -253,7 +236,7 @@ export function Footer(props: {
<a data-slot="footer-mark" href="https://opencode.ai" aria-label="OpenCode home">
<OpenCodeMark />
</a>
<FooterColumn title="Model Stats" links={modelStats} />
<FooterColumn title="Model Data" links={modelStats} />
<FooterColumn title="Legal" links={legal} />
<FooterColumn title="Connect" links={connect} />
<div data-slot="footer-column">