feat(stats): refresh stats routes and homepage (#30419)

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

@@ -0,0 +1,826 @@
+import "../index.css"
+import { Link, Meta, Title } from "@solidjs/meta"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { geoEquirectangular, geoPath } from "d3-geo"
+import { scaleSqrt } from "d3-scale"
+import countryCodesSource from "i18n-iso-countries/codes.json?raw"
+import { feature, mesh } from "topojson-client"
+import countriesTopologySource from "world-atlas/countries-110m.json?raw"
+import {
+  getStatsModelData,
+  type CountryEntry,
+  type ModelPeerEntry,
+  type ModelUsagePoint,
+  type StatsModelData,
+  type UsageRange,
+} from "@opencode-ai/stats-core/domain/home"
+import { runtime } from "@opencode-ai/stats-core/runtime"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createMemo, createSignal, For, onMount, Show, type JSX } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import type { FeatureCollection, GeometryObject, GeoJsonProperties } from "geojson"
+import type { GeometryCollection, Topology } from "topojson-specification"
+import { findModelCatalogEntry, formatCatalogLabName, getModelCatalog, type ModelCatalogEntry } from "../model-catalog"
+import {
+  applyThemePreference,
+  Footer,
+  getGitHubStars,
+  Header,
+  isThemePreference,
+  themeStorageKey,
+  type HeaderLink,
+  type ThemePreference,
+} from "../stats-shell"
+
+const statsModelFallbackUrl = "https://stats.opencode.ai"
+const modelHeaderLinks: readonly HeaderLink[] = [
+  { href: "#overview", label: "Overview" },
+  { href: "#usage", label: "Usage" },
+  { href: "#efficiency", label: "Efficiency" },
+  { href: "#geo-breakdown", label: "Geo Breakdown" },
+  { href: "#peers", label: "Peers" },
+]
+const modelFooterLinks: readonly HeaderLink[] = [
+  { href: import.meta.env.BASE_URL, label: "Stats 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" },
+  { href: `${import.meta.env.BASE_URL}#token-cost`, label: "Token Cost" },
+  { href: `${import.meta.env.BASE_URL}#market-share`, label: "Market Share" },
+  { href: `${import.meta.env.BASE_URL}#geo-breakdown`, label: "Geo Breakdown" },
+]
+const geoMapWidth = 960
+const geoMapHeight = 430
+const countryDisplayNames = new Intl.DisplayNames(["en"], { type: "region" })
+
+type IsoCountryCode = readonly [string, string, string]
+type WorldCountryProperties = GeoJsonProperties & { name?: string }
+type WorldTopology = Topology<{ countries: GeometryCollection<WorldCountryProperties> }>
+
+const countryNumericIds = new Map(
+  (JSON.parse(countryCodesSource) as IsoCountryCode[]).map((country) => [country[0], country[2]] as const),
+)
+const worldTopology = JSON.parse(countriesTopologySource) as WorldTopology
+const worldCountryGeometries: GeometryCollection<WorldCountryProperties> = {
+  ...worldTopology.objects.countries,
+  geometries: worldTopology.objects.countries.geometries.filter((country) => String(country.id ?? "") !== "010"),
+}
+const worldCountries = feature<WorldCountryProperties>(worldTopology, worldCountryGeometries) as FeatureCollection<
+  GeometryObject,
+  WorldCountryProperties
+>
+const worldProjection = geoEquirectangular().fitExtent(
+  [
+    [10, 12],
+    [geoMapWidth - 10, geoMapHeight - 12],
+  ],
+  worldCountries,
+)
+const worldPath = geoPath(worldProjection)
+const worldCountryPaths = worldCountries.features.map((country) => ({
+  id: String(country.id ?? "").padStart(3, "0"),
+  path: worldPath(country) ?? "",
+}))
+const worldBorderPath = worldPath(mesh(worldTopology, worldCountryGeometries, (a, b) => a !== b)) ?? ""
+
+const getModelData = query(async (lab: string, model: string) => {
+  "use server"
+  return runtime.runPromise(getStatsModelData(model, lab))
+}, "getStatsModelData")
+
+export default function StatsModel() {
+  const event = getRequestEvent()
+  event?.response.headers.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400")
+  const params = useParams()
+  const labParam = createMemo(() => params.lab ?? "")
+  const modelParam = createMemo(() => params.model ?? "")
+  const catalog = createAsync(() => getModelCatalog())
+  const catalogEntry = createMemo(() => {
+    const data = catalog()
+    if (!data) return undefined
+    return findModelCatalogEntry(data, modelParam(), labParam()) ?? null
+  })
+  const stats = createAsync(() => {
+    const entry = catalogEntry()
+    if (catalog() === undefined || entry === undefined) return Promise.resolve(undefined)
+    if (!entry && (!labParam() || !modelParam())) return Promise.resolve(null)
+    return getModelData(labParam(), entry?.slug ?? modelParam())
+  })
+  const githubStars = createAsync(() => getGitHubStars())
+  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 modelDescription = createMemo(() =>
+    stats()
+      ? `${modelName()} usage, rank, token mix, cost, geo breakdown, and peer stats across OpenCode.`
+      : `${modelName()} model facts, limits, and OpenCode usage availability.`,
+  )
+  const modelUrl = createMemo(() =>
+    new URL(
+      `${import.meta.env.BASE_URL}${catalogEntry()?.id ?? `${labParam()}/${stats()?.slug ?? modelParam()}`}`,
+      event?.request.url ?? (typeof window === "undefined" ? statsModelFallbackUrl : window.location.href),
+    ).toString(),
+  )
+  const updateThemePreference = (preference: ThemePreference) => {
+    applyThemePreference(preference)
+    setThemePreference(preference)
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(themeStorageKey, preference)
+  }
+
+  onMount(() => {
+    if (typeof window === "undefined") return
+    const preference = window.localStorage.getItem(themeStorageKey)
+    const nextPreference = isThemePreference(preference) ? preference : "system"
+    applyThemePreference(nextPreference)
+    setThemePreference(nextPreference)
+  })
+
+  return (
+    <main data-page="stats" data-theme={themePreference()}>
+      <Title>{modelTitle()}</Title>
+      <Meta name="description" content={modelDescription()} />
+      <Link rel="canonical" href={modelUrl()} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:site_name" content="OpenCode" />
+      <Meta property="og:title" content={modelTitle()} />
+      <Meta property="og:description" content={modelDescription()} />
+      <Meta property="og:url" content={modelUrl()} />
+      <Meta name="twitter:card" content="summary" />
+      <Meta name="twitter:title" content={modelTitle()} />
+      <Meta name="twitter:description" content={modelDescription()} />
+      <Header githubStars={githubStars() ?? "150K"} links={modelHeaderLinks} brandHref={import.meta.env.BASE_URL} />
+      <div data-component="container">
+        <div data-component="content">
+          <Show when={catalogEntry() || stats() !== undefined} fallback={<ModelLoading />}>
+            <Show when={catalogEntry() || stats()} fallback={<ModelNotFound lab={labParam()} model={modelParam()} />}>
+              <>
+                <ModelHero data={stats() ?? null} catalog={catalogEntry() ?? null} labName={labName()} />
+                <ModelOverview data={stats() ?? null} />
+                <ModelUsageSection data={stats()?.usage ?? []} />
+                <ModelEfficiencySection data={stats() ?? null} />
+                <ModelGeoBreakdownSection data={stats()?.country ?? emptyCountryRecord()} />
+                <ModelPeersSection data={stats() ?? null} />
+              </>
+            </Show>
+          </Show>
+        </div>
+        <Footer
+          themePreference={themePreference()}
+          onThemePreferenceChange={updateThemePreference}
+          links={modelFooterLinks}
+        />
+      </div>
+    </main>
+  )
+}
+
+function ModelLoading() {
+  return (
+    <>
+      <section id="overview" data-section="model-hero">
+        <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
+            </a>
+            <h1>Model Stats</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." />
+      </section>
+    </>
+  )
+}
+
+function ModelNotFound(props: { lab: string; model: string }) {
+  return (
+    <>
+      <section id="overview" data-section="model-hero">
+        <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
+            </a>
+            <h1>{props.model || "Model"}</h1>
+            <p>No model facts or model_stat rows matched {props.lab ? `${props.lab}/${props.model}` : props.model}.</p>
+          </div>
+        </div>
+      </section>
+      <section data-section="model-panel">
+        <ModelEmptyState title="No model data" description="Try opening a model from the leaderboard." />
+      </section>
+    </>
+  )
+}
+
+function ModelHero(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null; labName: string }) {
+  const labId = () => props.catalog?.lab ?? props.data?.provider ?? props.labName
+  const modelId = () => props.catalog?.id ?? props.data?.model ?? "Model"
+  const weights = () => props.catalog?.weights[0]
+  return (
+    <section id="overview" data-section="model-hero">
+      <a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
+        Stats
+      </a>
+      <div data-slot="model-hero-grid">
+        <div data-slot="model-hero-copy">
+          <div data-slot="model-hero-tags">
+            <a data-slot="hero-meta" href={`${import.meta.env.BASE_URL}${providerSlug(labId())}`}>
+              <ProviderIcon aria-hidden="true" id={getProviderIconId(labId())} />
+              <span>{props.labName}</span>
+            </a>
+            <span data-slot="model-id-tag">{modelId()}</span>
+          </div>
+          <h1>{props.catalog?.name ?? props.data?.model ?? "Model"}</h1>
+          <Show
+            when={props.data}
+            fallback={
+              <p>Model facts from the shared model index. OpenCode usage appears once this model has activity.</p>
+            }
+          >
+            {(data) => (
+              <p>
+                Ranked #{data().rank} across recent OpenCode token usage with {formatPercent(data().tokenShare)} of
+                observed volume.
+              </p>
+            )}
+          </Show>
+          <Show when={props.catalog?.openWeights && weights()}>
+            {(weight) => (
+              <a data-slot="model-weight-link" href={weight().url} target="_blank" rel="noopener noreferrer">
+                Model weights: {weight().label}
+              </a>
+            )}
+          </Show>
+        </div>
+        <Show when={props.data} fallback={<ModelCatalogCallout catalog={props.catalog} />}>
+          {(data) => (
+            <div data-component="model-rank-panel">
+              <span>Current Rank</span>
+              <strong>#{data().rank}</strong>
+              <p>{formatRankMoveLabel(data().previousRank, data().rank)}</p>
+            </div>
+          )}
+        </Show>
+      </div>
+      <div data-slot="model-hero-pattern" aria-hidden="true" />
+      <Show when={props.catalog}>{(catalog) => <ModelCatalogPanel data={catalog()} />}</Show>
+    </section>
+  )
+}
+
+function ModelCatalogCallout(props: { catalog: ModelCatalogEntry | null }) {
+  return (
+    <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>
+    </div>
+  )
+}
+
+function ModelCatalogPanel(props: { data: ModelCatalogEntry }) {
+  return (
+    <aside data-component="model-catalog" aria-label="Model facts">
+      <div data-slot="model-catalog-grid">
+        <CatalogDatum label="Context" value={formatCatalogLimit(props.data.limit?.context)} />
+        <CatalogDatum label="Output" value={formatCatalogLimit(props.data.limit?.output)} />
+        <CatalogDatum label="Knowledge" value={formatCatalogDate(props.data.knowledge)} />
+        <CatalogDatum label="Release" value={formatCatalogDate(props.data.releaseDate)} />
+        <CatalogDatum label="Inputs" value={formatCatalogModalities(props.data.modalities.input)} />
+      </div>
+    </aside>
+  )
+}
+
+function CatalogDatum(props: { label: string; value: string }) {
+  return (
+    <article data-component="model-catalog-datum">
+      <span>{props.label}</span>
+      <strong>{props.value}</strong>
+    </article>
+  )
+}
+
+function ModelOverview(props: { data: StatsModelData | null }) {
+  return (
+    <section data-section="model-panel">
+      <SectionTitle title="Overview" description="Recent tokens, sessions, and market position." />
+      <Show
+        when={props.data}
+        fallback={<ModelEmptyState title="No usage summary" description="This model has no OpenCode usage rows yet." />}
+      >
+        {(data) => (
+          <div data-component="model-metric-grid">
+            <MetricCard label="Tokens" value={formatTokens(data().totals.tokens)} detail="last two months" />
+            <MetricCard label="Sessions" value={formatInteger(data().totals.sessions)} detail="completed sessions" />
+            <MetricCard
+              label="Token Share"
+              value={formatPercent(data().tokenShare)}
+              detail={`${data().totalModels} models`}
+            />
+            <MetricCard
+              label="Momentum"
+              value={formatChange(data().tokenChange)}
+              detail="vs previous window"
+              state={data().tokenChange < 0 ? "negative" : "positive"}
+            />
+          </div>
+        )}
+      </Show>
+    </section>
+  )
+}
+
+function ModelUsageSection(props: { data: ModelUsagePoint[] }) {
+  const [activeIndex, setActiveIndex] = createSignal<number>()
+  const max = createMemo(() => Math.max(0, ...props.data.map((item) => item.tokens)) || 1)
+  const activePoint = createMemo(() => {
+    const index = activeIndex()
+    if (index === undefined) return undefined
+    return props.data[index]
+  })
+
+  return (
+    <section id="usage" data-section="model-panel">
+      <SectionTitle title="Usage" description="Daily token volume over the recent two-month window." />
+      <Show
+        when={props.data.some((item) => item.tokens > 0)}
+        fallback={<ModelEmptyState title="No usage" description="No usage landed in the current window." />}
+      >
+        <div
+          data-component="model-usage-chart"
+          data-dense-labels={isModelUsageDense(props.data.length) ? "true" : undefined}
+          role="img"
+          aria-label="Daily token usage chart"
+          style={{ "--model-usage-count": props.data.length } as JSX.CSSProperties}
+          onPointerLeave={(event) => {
+            if (event.pointerType === "touch") return
+            setActiveIndex(undefined)
+          }}
+        >
+          <div data-slot="model-usage-axis" aria-hidden="true">
+            <For each={props.data}>
+              {(point, index) => (
+                <div
+                  data-active={activeIndex() === index() ? "true" : undefined}
+                  data-label-hidden={isModelUsageLabelHidden(index(), props.data.length) ? "true" : undefined}
+                >
+                  <span data-slot="model-usage-label">
+                    <span data-slot="model-usage-total">{formatTokens(point.tokens)}</span>
+                    <span data-slot="model-usage-date">{point.date}</span>
+                  </span>
+                </div>
+              )}
+            </For>
+          </div>
+          <div data-slot="model-usage-bars">
+            <For each={props.data}>
+              {(point, index) => (
+                <div
+                  data-slot="model-usage-column"
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`${point.date} ${formatTokens(point.tokens)} tokens`}
+                  data-active={activeIndex() === index() ? "true" : undefined}
+                  data-muted={activeIndex() !== undefined && activeIndex() !== index() ? "true" : undefined}
+                  onPointerDown={(event) => {
+                    if (event.pointerType !== "touch") return
+                    setActiveIndex(index())
+                  }}
+                  onPointerEnter={() => setActiveIndex(index())}
+                  onPointerMove={(event) => {
+                    if (event.pointerType === "touch") return
+                    setActiveIndex(index())
+                  }}
+                  onClick={() => setActiveIndex(index())}
+                  onFocus={() => setActiveIndex(index())}
+                  onBlur={() => setActiveIndex(undefined)}
+                  onKeyDown={(event) => {
+                    if (event.key !== "Enter" && event.key !== " ") return
+                    event.preventDefault()
+                    setActiveIndex(index())
+                  }}
+                >
+                  <div
+                    data-slot="model-usage-bar"
+                    style={{ "--model-usage-fill": `${modelUsageHeight(point.tokens, max())}%` } as JSX.CSSProperties}
+                  />
+                  <Show when={activeIndex() === index() && activePoint()}>
+                    {(active) => (
+                      <div
+                        data-component="chart-tooltip"
+                        data-placement={index() > props.data.length * 0.62 ? "left" : "right"}
+                      >
+                        <strong>{active().date}</strong>
+                        <span>{formatTokens(active().tokens)} tokens</span>
+                        <div data-slot="tooltip-divider" />
+                        <p>
+                          <span data-slot="tooltip-label">
+                            <i /> Daily tokens
+                          </span>
+                          <b>{formatTokens(active().tokens)}</b>
+                        </p>
+                      </div>
+                    )}
+                  </Show>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </section>
+  )
+}
+
+function ModelEfficiencySection(props: { data: StatsModelData | null }) {
+  return (
+    <section id="efficiency" data-section="model-panel">
+      <SectionTitle title="Efficiency" description="Cost, cache behavior, and average session shape." />
+      <Show
+        when={props.data}
+        fallback={
+          <ModelEmptyState title="No efficiency data" description="Cost and cache stats appear after usage lands." />
+        }
+      >
+        {(data) => (
+          <div data-component="model-metric-grid" data-variant="dense">
+            <MetricCard label="Cost" value={formatMoney(data().totals.cost)} detail="total spend" />
+            <MetricCard label="Cost / 1M" value={formatMoney(data().totals.costPerMillion)} detail="all tokens" />
+            <MetricCard
+              label="Cost / Session"
+              value={formatSessionCost(data().totals.costPerSession)}
+              detail="average"
+            />
+            <MetricCard
+              label="Tokens / Session"
+              value={formatTokens(data().totals.tokensPerSession)}
+              detail="average"
+            />
+            <MetricCard label="Cache Ratio" value={formatPercent(data().totals.cacheRatio)} detail="input tokens" />
+          </div>
+        )}
+      </Show>
+    </section>
+  )
+}
+
+function ModelGeoBreakdownSection(props: { data: Record<UsageRange, CountryEntry[]> }) {
+  const [activeCountry, setActiveCountry] = createSignal<string>()
+  const data = createMemo(() => props.data["2M"])
+  const countryById = createMemo(
+    () =>
+      new Map(
+        data().flatMap((country) => {
+          const id = countryNumericId(country.country)
+          return id ? [[id, country] as const] : []
+        }),
+      ),
+  )
+  const maxTokens = createMemo(() => Math.max(0, ...data().map((country) => country.tokens)) || 1)
+  const topCountries = createMemo(() => data().slice(0, 15))
+  const active = createMemo(() => data().find((country) => country.country === activeCountry()) ?? data()[0])
+
+  return (
+    <section
+      id="geo-breakdown"
+      data-section="geo-breakdown"
+      onPointerLeave={(event) => {
+        if (event.pointerType === "touch") return
+        setActiveCountry(undefined)
+      }}
+    >
+      <SectionTitle title="Geo Breakdown" description="Model tokens used by country." />
+      <Show
+        when={data().length > 0}
+        fallback={<ModelEmptyState title="No geo data" description="No geo_stat rows matched this model." />}
+      >
+        <div data-component="geo-breakdown">
+          <div data-slot="geo-map-panel">
+            <GeoWorldMap
+              countryById={countryById()}
+              activeCountry={activeCountry()}
+              maxTokens={maxTokens()}
+              onActiveCountryChange={setActiveCountry}
+            />
+            <Show when={active()}>
+              {(country) => (
+                <div data-slot="geo-active-country">
+                  <span>#{String(country().rank).padStart(2, "0")}</span>
+                  <strong>{formatCountryName(country().country)}</strong>
+                  <p>
+                    <b>{formatGeoTokens(country().tokens)}</b>
+                    <em>{formatGeoShare(country().share)}</em>
+                  </p>
+                </div>
+              )}
+            </Show>
+          </div>
+          <GeoCountryList
+            data={topCountries()}
+            activeCountry={activeCountry()}
+            maxTokens={maxTokens()}
+            onActiveCountryChange={setActiveCountry}
+          />
+        </div>
+      </Show>
+    </section>
+  )
+}
+
+function GeoWorldMap(props: {
+  countryById: Map<string, CountryEntry>
+  activeCountry: string | undefined
+  maxTokens: number
+  onActiveCountryChange: (country: string | undefined) => void
+}) {
+  const opacityScale = createMemo(() => scaleSqrt().domain([0, props.maxTokens]).range([0.26, 0.96]).clamp(true))
+  const countryOpacity = (country: CountryEntry | undefined) => {
+    if (!country) return 0
+    const opacity = opacityScale()(country.tokens)
+    if (!props.activeCountry || props.activeCountry === country.country) return opacity
+    return Math.max(0.18, opacity * 0.36)
+  }
+
+  return (
+    <svg
+      data-component="geo-world-map"
+      viewBox={`0 0 ${geoMapWidth} ${geoMapHeight}`}
+      role="img"
+      aria-label="World map of model token usage by country"
+    >
+      <title>Geo Breakdown map</title>
+      <g data-slot="geo-countries">
+        <For each={worldCountryPaths}>
+          {(country) => {
+            const entry = () => props.countryById.get(country.id)
+            return (
+              <path
+                d={country.path}
+                data-has-data={entry() ? "true" : undefined}
+                data-active={entry()?.country === props.activeCountry ? "true" : undefined}
+                style={{ "--geo-country-opacity": String(countryOpacity(entry())) } as JSX.CSSProperties}
+                aria-hidden="true"
+                onPointerEnter={() => {
+                  const item = entry()
+                  if (!item) return
+                  props.onActiveCountryChange(item.country)
+                }}
+                onClick={() => {
+                  const item = entry()
+                  if (!item) return
+                  props.onActiveCountryChange(item.country)
+                }}
+              />
+            )
+          }}
+        </For>
+      </g>
+      <path data-slot="geo-borders" d={worldBorderPath} aria-hidden="true" />
+    </svg>
+  )
+}
+
+function GeoCountryList(props: {
+  data: CountryEntry[]
+  activeCountry: string | undefined
+  maxTokens: number
+  onActiveCountryChange: (country: string | undefined) => void
+}) {
+  const opacityScale = createMemo(() => scaleSqrt().domain([0, props.maxTokens]).range([0.26, 0.96]).clamp(true))
+
+  return (
+    <ol data-component="geo-country-list">
+      <For each={props.data}>
+        {(country) => (
+          <li>
+            <button
+              type="button"
+              data-active={props.activeCountry === country.country ? "true" : undefined}
+              style={{ "--geo-row-opacity": String(opacityScale()(country.tokens)) } as JSX.CSSProperties}
+              aria-label={`${formatCountryName(country.country)} ${formatGeoTokens(country.tokens)} ${formatGeoShare(
+                country.share,
+              )}`}
+              onClick={() => props.onActiveCountryChange(country.country)}
+              onPointerEnter={() => props.onActiveCountryChange(country.country)}
+              onFocus={() => props.onActiveCountryChange(country.country)}
+            >
+              <span>{String(country.rank).padStart(2, "0")}</span>
+              <i />
+              <strong>{formatCountryName(country.country)}</strong>
+              <em>{formatGeoTokens(country.tokens)}</em>
+              <b>{formatGeoShare(country.share)}</b>
+            </button>
+          </li>
+        )}
+      </For>
+    </ol>
+  )
+}
+
+function ModelPeersSection(props: { data: StatsModelData | null }) {
+  return (
+    <section id="peers" data-section="model-panel">
+      <SectionTitle title="Peers" description="Nearby models by recent token volume." />
+      <Show
+        when={props.data?.peers.length}
+        fallback={<ModelEmptyState title="No peers" description="Peer rankings appear after usage lands." />}
+      >
+        <ol data-component="model-peer-list">
+          <For each={props.data?.peers ?? []}>
+            {(peer) => <PeerRow peer={peer} active={peer.model === props.data?.model} />}
+          </For>
+        </ol>
+      </Show>
+    </section>
+  )
+}
+
+function MetricCard(props: { label: string; value: string; detail: string; state?: "positive" | "negative" }) {
+  return (
+    <article data-component="model-metric" data-state={props.state}>
+      <span>{props.label}</span>
+      <strong>{props.value}</strong>
+      <p>{props.detail}</p>
+    </article>
+  )
+}
+
+function PeerRow(props: { peer: ModelPeerEntry; active: boolean }) {
+  return (
+    <li>
+      <a
+        href={`${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>
+        <b>{formatTokens(props.peer.tokens)}</b>
+      </a>
+    </li>
+  )
+}
+
+function SectionTitle(props: { title: string; description: string }) {
+  return (
+    <p data-slot="section-title">
+      <strong>{props.title}.</strong> <span>{props.description}</span>
+    </p>
+  )
+}
+
+function ModelEmptyState(props: { title: string; description: string; compact?: boolean }) {
+  return (
+    <div data-component="empty-state" data-compact={props.compact ? "true" : undefined}>
+      <strong>{props.title}</strong>
+      <p>{props.description}</p>
+    </div>
+  )
+}
+
+function getProviderIconId(author: string) {
+  if (author === "MiniMax") return "minimax"
+  if (author === "Moonshot") return "moonshotai"
+  if (author === "Zhipu") return "zhipuai"
+  return author.toLowerCase().replace(/[^a-z0-9]+/g, "")
+}
+
+function emptyCountryRecord(): Record<UsageRange, CountryEntry[]> {
+  return {
+    "1D": [],
+    "1W": [],
+    "2W": [],
+    "1M": [],
+    "2M": [],
+    "3M": [],
+    YTD: [],
+    ALL: [],
+  }
+}
+
+function countryNumericId(country: string) {
+  return countryNumericIds.get(country.toUpperCase())?.padStart(3, "0")
+}
+
+function formatCountryName(country: string) {
+  const code = country.toUpperCase()
+  if (code === "ZZ") return "Unknown"
+  if (!countryNumericId(code)) return code
+  return countryDisplayNames.of(code) ?? code
+}
+
+function formatGeoTokens(value: number) {
+  return formatTokens(value * 1_000_000_000_000)
+}
+
+function formatGeoShare(value: number) {
+  return `${value.toFixed(value > 0 && value < 1 ? 1 : 0)}%`
+}
+
+function modelUsageHeight(tokens: number, max: number) {
+  if (tokens <= 0) return 0
+  return Math.max(2, Math.min(100, (tokens / max) * 100))
+}
+
+function isModelUsageDense(count: number) {
+  return count > 20
+}
+
+function isModelUsageLabelHidden(index: number, count: number) {
+  if (count <= 16) return false
+  const interval = Math.ceil(count / 8)
+  return index !== count - 1 && index % interval !== 0
+}
+
+function formatRankMove(previousRank: number, rank: number) {
+  const change = previousRank - rank
+  if (change > 0) return `+${change}`
+  if (change < 0) return `${change}`
+  return "Even"
+}
+
+function formatRankMoveLabel(previousRank: number | null, rank: number) {
+  return previousRank === null ? "New in window" : `${formatRankMove(previousRank, rank)} vs previous window`
+}
+
+function formatTokens(value: number) {
+  if (value >= 1_000_000_000_000)
+    return `${trimNumber(value / 1_000_000_000_000, value >= 10_000_000_000_000 ? 0 : 1)}T`
+  if (value >= 1_000_000_000) return `${trimNumber(value / 1_000_000_000, value >= 10_000_000_000 ? 0 : 1)}B`
+  if (value >= 1_000_000) return `${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M`
+  if (value >= 1_000) return `${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K`
+  return String(Math.round(value))
+}
+
+function formatInteger(value: number) {
+  return new Intl.NumberFormat("en").format(value)
+}
+
+function formatPercent(value: number) {
+  return `${value.toFixed(value > 0 && value < 10 ? 1 : 0)}%`
+}
+
+function formatMoney(value: number) {
+  if (value >= 1_000_000) return `$${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M`
+  if (value >= 1_000) return `$${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K`
+  return `$${value.toFixed(value >= 10 ? 0 : 2)}`
+}
+
+function formatSessionCost(value: number) {
+  return `$${value.toFixed(value > 0 && value < 0.01 ? 4 : 2)}`
+}
+
+function formatChange(value: number) {
+  if (value > 0) return `+${value}%`
+  return `${value}%`
+}
+
+function formatCatalogLimit(value: number | undefined) {
+  return value === undefined ? "Unknown" : formatTokens(value)
+}
+
+function formatCatalogModalities(value: string[]) {
+  if (value.length === 0) return "Unknown"
+  return value.map(formatCatalogModality).join(", ")
+}
+
+function formatCatalogModality(value: string) {
+  if (value === "pdf") return "PDF"
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+function formatCatalogDate(value: string | undefined) {
+  if (!value) return "Unknown"
+  const match = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(value)
+  if (!match) return value
+  const year = Number(match[1])
+  const month = match[2] ? Number(match[2]) - 1 : 0
+  const day = match[3] ? Number(match[3]) : 1
+  return new Intl.DateTimeFormat("en", {
+    month: match[2] ? "short" : undefined,
+    day: match[3] ? "numeric" : undefined,
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month, day)))
+}
+
+function trimNumber(value: number, digits: number) {
+  return Number(value.toFixed(digits)).toLocaleString("en")
+}
+
+function providerSlug(provider: string) {
+  return provider
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-")
+}

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

@@ -0,0 +1,427 @@
+import "../index.css"
+import { Link, Meta, Title } from "@solidjs/meta"
+import {
+  getStatsLabData,
+  type LabUsageModelEntry,
+  type ModelUsagePoint,
+  type StatsLabData,
+} from "@opencode-ai/stats-core/domain/home"
+import { runtime } from "@opencode-ai/stats-core/runtime"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createMemo, createSignal, For, onMount, Show, type JSX } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import {
+  findModelCatalogLab,
+  formatCatalogLabName,
+  getModelCatalog,
+  type ModelCatalogEntry,
+  type ModelCatalogLab,
+} from "../model-catalog"
+import {
+  applyThemePreference,
+  Footer,
+  getGitHubStars,
+  Header,
+  isThemePreference,
+  themeStorageKey,
+  type HeaderLink,
+  type ThemePreference,
+} from "../stats-shell"
+
+const statsLabFallbackUrl = "https://stats.opencode.ai"
+const labHeaderLinks: readonly HeaderLink[] = [
+  { href: "#overview", label: "Overview" },
+  { href: "#usage", label: "Usage" },
+  { href: "#models", label: "Models" },
+]
+const labFooterLinks: readonly HeaderLink[] = [
+  { href: import.meta.env.BASE_URL, label: "Stats 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" },
+]
+
+const getLabData = query(async (lab: string) => {
+  "use server"
+  return runtime.runPromise(getStatsLabData(lab))
+}, "getStatsLabData")
+
+export default function StatsLab() {
+  const event = getRequestEvent()
+  event?.response.headers.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400")
+  const params = useParams()
+  const labParam = createMemo(() => params.lab ?? "")
+  const catalog = createAsync(() => getModelCatalog())
+  const lab = createMemo(() => {
+    const data = catalog()
+    if (!data) return undefined
+    return findModelCatalogLab(data, labParam()) ?? null
+  })
+  const stats = createAsync(() => {
+    const entry = lab()
+    if (catalog() === undefined || entry === undefined) return Promise.resolve(undefined)
+    if (!entry) return Promise.resolve(null)
+    return getLabData(entry.id)
+  })
+  const githubStars = createAsync(() => getGitHubStars())
+  const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
+  const labName = createMemo(() => lab()?.name ?? formatCatalogLabName(labParam()))
+  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.`,
+  )
+  const labUrl = createMemo(() =>
+    new URL(
+      `${import.meta.env.BASE_URL}${lab()?.id ?? labParam()}`,
+      event?.request.url ?? (typeof window === "undefined" ? statsLabFallbackUrl : window.location.href),
+    ).toString(),
+  )
+  const updateThemePreference = (preference: ThemePreference) => {
+    applyThemePreference(preference)
+    setThemePreference(preference)
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(themeStorageKey, preference)
+  }
+
+  onMount(() => {
+    if (typeof window === "undefined") return
+    const preference = window.localStorage.getItem(themeStorageKey)
+    const nextPreference = isThemePreference(preference) ? preference : "system"
+    applyThemePreference(nextPreference)
+    setThemePreference(nextPreference)
+  })
+
+  return (
+    <main data-page="stats" data-theme={themePreference()}>
+      <Title>{labTitle()}</Title>
+      <Meta name="description" content={labDescription()} />
+      <Link rel="canonical" href={labUrl()} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:site_name" content="OpenCode" />
+      <Meta property="og:title" content={labTitle()} />
+      <Meta property="og:description" content={labDescription()} />
+      <Meta property="og:url" content={labUrl()} />
+      <Meta name="twitter:card" content="summary" />
+      <Meta name="twitter:title" content={labTitle()} />
+      <Meta name="twitter:description" content={labDescription()} />
+      <Header githubStars={githubStars() ?? "150K"} links={labHeaderLinks} brandHref={import.meta.env.BASE_URL} />
+      <div data-component="container">
+        <div data-component="content">
+          <Show when={catalog() !== undefined} fallback={<LabLoading />}>
+            <Show when={lab()} fallback={<LabNotFound lab={labParam()} />}>
+              {(data) => (
+                <>
+                  <LabHero lab={data()} stats={stats() ?? null} />
+                  <LabUsageSection lab={data()} data={stats() ?? null} />
+                  <LabModelsSection lab={data()} usage={stats()?.models ?? []} />
+                </>
+              )}
+            </Show>
+          </Show>
+        </div>
+        <Footer
+          themePreference={themePreference()}
+          onThemePreferenceChange={updateThemePreference}
+          links={labFooterLinks}
+        />
+      </div>
+    </main>
+  )
+}
+
+function LabLoading() {
+  return (
+    <section id="overview" data-section="lab-hero">
+      <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
+          </a>
+          <h1>Model Lab</h1>
+          <p>Reading model availability and recent OpenCode usage.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function LabNotFound(props: { lab: string }) {
+  return (
+    <section id="overview" data-section="lab-hero">
+      <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
+          </a>
+          <h1>{formatCatalogLabName(props.lab)}</h1>
+          <p>No models matched this lab.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function LabHero(props: { lab: ModelCatalogLab; stats: StatsLabData | null }) {
+  const latest = createMemo(
+    () =>
+      props.lab.models
+        .map((model) => model.releaseDate)
+        .filter((value): value is string => value !== undefined)
+        .toSorted((a, b) => new Date(b).getTime() - new Date(a).getTime())[0],
+  )
+  const featuredModels = createMemo(() => props.lab.models.slice(0, 3).map((model) => model.name))
+
+  return (
+    <section id="overview" data-section="lab-hero">
+      <a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
+        Stats
+      </a>
+      <div data-slot="model-hero-grid">
+        <div data-slot="model-hero-copy">
+          <h1>{props.lab.name}</h1>
+          <div data-slot="model-hero-pattern" aria-hidden="true" />
+          <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.
+          </p>
+        </div>
+        <div data-component="model-rank-panel">
+          <span>Tokens Processed</span>
+          <strong>{props.stats ? formatTokens(props.stats.totals.tokens) : "Pending"}</strong>
+          <p>
+            {props.stats
+              ? `${formatPercent(props.stats.tokenShare)} of recent OpenCode usage`
+              : latest()
+                ? `Latest release ${formatCatalogDate(latest())}`
+                : "Usage appears after model activity lands"}
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | null }) {
+  const [activeIndex, setActiveIndex] = createSignal<number>()
+  const usage = createMemo(() => props.data?.usage ?? [])
+  const max = createMemo(() => Math.max(0, ...usage().map((item) => item.tokens)) || 1)
+  const activePoint = createMemo(() => {
+    const index = activeIndex()
+    if (index === undefined) return undefined
+    return usage()[index]
+  })
+
+  return (
+    <section id="usage" data-section="model-panel">
+      <p data-slot="section-title">
+        <strong>{props.lab.name} token usage.</strong>{" "}
+        <span>Daily OpenCode token volume over the last two months.</span>
+      </p>
+      <Show
+        when={usage().some((item) => item.tokens > 0)}
+        fallback={
+          <LabEmptyState
+            title="No usage yet"
+            description="Recent token usage appears here once this lab has activity."
+          />
+        }
+      >
+        <div
+          data-component="model-usage-chart"
+          data-dense-labels={isLabUsageDense(usage().length) ? "true" : undefined}
+          role="img"
+          aria-label={`${props.lab.name} daily token usage chart`}
+          style={{ "--model-usage-count": usage().length } as JSX.CSSProperties}
+          onPointerLeave={(event) => {
+            if (event.pointerType === "touch") return
+            setActiveIndex(undefined)
+          }}
+        >
+          <div data-slot="model-usage-axis" aria-hidden="true">
+            <For each={usage()}>
+              {(point, index) => (
+                <div
+                  data-active={activeIndex() === index() ? "true" : undefined}
+                  data-label-hidden={isLabUsageLabelHidden(index(), usage().length) ? "true" : undefined}
+                >
+                  <span data-slot="model-usage-label">
+                    <span data-slot="model-usage-total">{formatTokens(point.tokens)}</span>
+                    <span data-slot="model-usage-date">{point.date}</span>
+                  </span>
+                </div>
+              )}
+            </For>
+          </div>
+          <div data-slot="model-usage-bars">
+            <For each={usage()}>
+              {(point, index) => (
+                <div
+                  data-slot="model-usage-column"
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`${point.date} ${formatTokens(point.tokens)} tokens`}
+                  data-active={activeIndex() === index() ? "true" : undefined}
+                  data-muted={activeIndex() !== undefined && activeIndex() !== index() ? "true" : undefined}
+                  onPointerDown={(event) => {
+                    if (event.pointerType !== "touch") return
+                    setActiveIndex(index())
+                  }}
+                  onPointerEnter={() => setActiveIndex(index())}
+                  onPointerMove={(event) => {
+                    if (event.pointerType === "touch") return
+                    setActiveIndex(index())
+                  }}
+                  onClick={() => setActiveIndex(index())}
+                  onFocus={() => setActiveIndex(index())}
+                  onBlur={() => setActiveIndex(undefined)}
+                  onKeyDown={(event) => {
+                    if (event.key !== "Enter" && event.key !== " ") return
+                    event.preventDefault()
+                    setActiveIndex(index())
+                  }}
+                >
+                  <div
+                    data-slot="model-usage-bar"
+                    style={{ "--model-usage-fill": `${usageHeight(point.tokens, max())}%` } as JSX.CSSProperties}
+                  />
+                  <Show when={activeIndex() === index() && activePoint()}>
+                    {(active) => (
+                      <div
+                        data-component="chart-tooltip"
+                        data-placement={index() > usage().length * 0.62 ? "left" : "right"}
+                      >
+                        <strong>{active().date}</strong>
+                        <span>{formatTokens(active().tokens)} tokens</span>
+                        <div data-slot="tooltip-divider" />
+                        <p>
+                          <span data-slot="tooltip-label">
+                            <i /> Daily tokens
+                          </span>
+                          <b>{formatTokens(active().tokens)}</b>
+                        </p>
+                      </div>
+                    )}
+                  </Show>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </section>
+  )
+}
+
+function LabModelsSection(props: { lab: ModelCatalogLab; usage: LabUsageModelEntry[] }) {
+  const usageBySlug = createMemo(() => new Map(props.usage.map((item) => [item.slug, item])))
+  return (
+    <section id="models" data-section="model-panel">
+      <p data-slot="section-title">
+        <strong>{props.lab.name} models.</strong> <span>Recent usage and limits.</span>
+      </p>
+      <div data-component="lab-model-grid">
+        <For each={props.lab.models}>
+          {(model) => <LabModelCard model={model} usage={usageBySlug().get(model.slug)} />}
+        </For>
+      </div>
+    </section>
+  )
+}
+
+function LabModelCard(props: { model: ModelCatalogEntry; usage: LabUsageModelEntry | undefined }) {
+  return (
+    <a data-component="lab-model-card" href={`${import.meta.env.BASE_URL}${props.model.id}`}>
+      <strong>{props.model.name}</strong>
+      <div data-slot="lab-model-card-meta">
+        <p>
+          <b>Usage</b>
+          <em>{props.usage ? formatTokens(props.usage.tokens) : "—"}</em>
+        </p>
+        <p>
+          <b>Share</b>
+          <em>{props.usage ? formatPercent(props.usage.share) : "—"}</em>
+        </p>
+        <p>
+          <b>Context</b>
+          <em>{formatCatalogLimit(props.model.limit?.context)}</em>
+        </p>
+        <p>
+          <b>Output</b>
+          <em>{formatCatalogLimit(props.model.limit?.output)}</em>
+        </p>
+        <p>
+          <b>Release</b>
+          <em>{formatCatalogDate(props.model.releaseDate)}</em>
+        </p>
+      </div>
+    </a>
+  )
+}
+
+function LabEmptyState(props: { title: string; description: string }) {
+  return (
+    <div data-component="empty-state" data-compact="true">
+      <strong>{props.title}</strong>
+      <p>{props.description}</p>
+    </div>
+  )
+}
+
+function formatCatalogLimit(value: number | undefined) {
+  return value === undefined ? "Unknown" : formatTokens(value)
+}
+
+function formatCatalogDate(value: string | undefined) {
+  if (!value) return "Unknown"
+  const match = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(value)
+  if (!match) return value
+  const year = Number(match[1])
+  const month = match[2] ? Number(match[2]) - 1 : 0
+  const day = match[3] ? Number(match[3]) : 1
+  return new Intl.DateTimeFormat("en", {
+    month: match[2] ? "short" : undefined,
+    day: match[3] ? "numeric" : undefined,
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month, day)))
+}
+
+function formatList(values: string[]) {
+  if (values.length <= 1) return values[0] ?? ""
+  if (values.length === 2) return `${values[0]} and ${values[1]}`
+  return `${values.slice(0, -1).join(", ")}, and ${values[values.length - 1]}`
+}
+
+function formatPercent(value: number) {
+  return `${trimNumber(value, value >= 10 ? 1 : 2)}%`
+}
+
+function formatTokens(value: number) {
+  if (value >= 1_000_000_000_000)
+    return `${trimNumber(value / 1_000_000_000_000, value >= 10_000_000_000_000 ? 0 : 1)}T`
+  if (value >= 1_000_000_000) return `${trimNumber(value / 1_000_000_000, value >= 10_000_000_000 ? 0 : 1)}B`
+  if (value >= 1_000_000) return `${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M`
+  if (value >= 1_000) return `${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K`
+  return String(Math.round(value))
+}
+
+function trimNumber(value: number, digits: number) {
+  return Number(value.toFixed(digits)).toLocaleString("en")
+}
+
+function usageHeight(value: number, max: number) {
+  if (value <= 0 || max <= 0) return 0
+  return Math.max(4, (value / max) * 100)
+}
+
+function isLabUsageDense(count: number) {
+  return count > 20
+}
+
+function isLabUsageLabelHidden(index: number, count: number) {
+  if (count <= 14) return false
+  const cadence = count > 45 ? 7 : count > 28 ? 4 : 2
+  return index % cadence !== 0 && index !== count - 1
+}

packages/stats/app/src/routes/index.css

@@ -740,8 +740,8 @@
 }
 
 [data-page="stats"] [data-component="content"] a:hover {
-  text-decoration: underline;
-  text-underline-offset: 4px;
+  color: var(--stats-text);
+  text-decoration: none;
 }
 
 [data-page="stats"] [data-section="chart"] {
@@ -1393,6 +1393,10 @@
   line-height: 1.5;
 }
 
+[data-page="stats"] [data-component="empty-state"][data-compact="true"] {
+  min-height: 172px;
+}
+
 [data-page="stats"] [data-component="usage-chart"] svg {
   display: block;
   width: 100%;
@@ -1790,6 +1794,11 @@
     transform 140ms ease;
 }
 
+[data-page="stats"] a[data-component="leader-card"],
+[data-page="stats"] a[data-component="leader-card"]:hover {
+  text-decoration: none;
+}
+
 [data-page="stats"] [data-slot="rank"],
 [data-page="stats"] [data-slot="delta"][data-negative="true"] {
   color: var(--stats-faint);
@@ -2603,6 +2612,621 @@
   width: fit-content;
 }
 
+[data-page="stats"] [data-section="model-hero"],
+[data-page="stats"] [data-section="lab-hero"],
+[data-page="stats"] [data-section="model-panel"] {
+  position: relative;
+  box-sizing: border-box;
+  box-shadow:
+    inset 0 -1px var(--stats-line),
+    inset 1px 0 var(--stats-line),
+    inset -1px 0 var(--stats-line);
+  color: var(--stats-text);
+}
+
+[data-page="stats"] [data-section="model-hero"],
+[data-page="stats"] [data-section="lab-hero"] {
+  display: grid;
+  gap: 28px;
+  padding: 120px 40px 64px;
+}
+
+[data-page="stats"] [data-slot="model-hero-grid"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 240px;
+  gap: 40px;
+  align-items: end;
+}
+
+[data-page="stats"] [data-slot="model-hero-copy"] {
+  display: grid;
+  gap: 20px;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-back-link"] {
+  width: fit-content;
+  color: var(--stats-faint);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+[data-page="stats"] [data-slot="model-back-link"]::before {
+  content: "‹ ";
+}
+
+[data-page="stats"] [data-slot="model-back-link"]:hover,
+[data-page="stats"] [data-slot="model-back-link"]:focus-visible {
+  color: var(--stats-text);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"],
+[data-page="stats"] [data-section="lab-hero"] [data-slot="hero-meta"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 6px;
+  color: var(--stats-hero-muted);
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-section="model-hero"] a[data-slot="hero-meta"]:hover,
+[data-page="stats"] [data-section="model-hero"] a[data-slot="hero-meta"]:focus-visible {
+  color: var(--stats-text);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"] svg,
+[data-page="stats"] [data-section="lab-hero"] [data-slot="hero-meta"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+[data-page="stats"] [data-slot="model-hero-tags"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-id-tag"] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 24px;
+  padding: 0 8px;
+  overflow: hidden;
+  color: var(--stats-hero-muted);
+  background: var(--stats-layer-2);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-section="model-hero"] h1,
+[data-page="stats"] [data-section="lab-hero"] h1 {
+  max-width: 980px;
+  color: var(--stats-text);
+  font-size: clamp(38px, 7vw, 72px);
+  font-weight: 500;
+  line-height: 0.95;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-page="stats"] [data-slot="model-hero-pattern"] {
+  width: 100%;
+  height: 18px;
+  overflow: hidden;
+  background: var(--stats-hero-pattern);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  mask-repeat: repeat;
+  mask-size: 6px 6px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 6px 6px;
+}
+
+[data-page="stats"] [data-slot="model-hero-copy"] p:not([data-slot="hero-meta"]) {
+  max-width: 720px;
+  color: var(--stats-muted);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+[data-page="stats"] [data-slot="model-weight-link"] {
+  width: fit-content;
+  color: var(--stats-muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="model-weight-link"]::after {
+  content: " ↗";
+  color: var(--stats-muted);
+}
+
+[data-page="stats"] [data-slot="model-weight-link"]:hover,
+[data-page="stats"] [data-slot="model-weight-link"]:focus-visible {
+  color: var(--stats-text);
+  outline: none;
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="model-weight-link"]:hover::after,
+[data-page="stats"] [data-slot="model-weight-link"]:focus-visible::after {
+  color: var(--stats-text);
+}
+
+[data-page="stats"] [data-component="model-rank-panel"] {
+  display: grid;
+  gap: 10px;
+  min-height: 164px;
+  padding: 18px;
+  border: 1px solid var(--stats-line);
+  background: var(--stats-layer);
+}
+
+[data-page="stats"] [data-component="model-rank-panel"] span,
+[data-page="stats"] [data-component="model-rank-panel"] p {
+  color: var(--stats-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+[data-page="stats"] [data-component="model-rank-panel"] strong {
+  color: var(--stats-text);
+  font-size: 64px;
+  font-weight: 500;
+  line-height: 0.95;
+  letter-spacing: 0;
+}
+
+[data-page="stats"] [data-component="model-catalog"] {
+  min-width: 0;
+}
+
+[data-page="stats"] [data-component="model-catalog-datum"] span {
+  color: var(--stats-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+[data-page="stats"] [data-slot="model-catalog-grid"] {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 18px;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-component="model-catalog-datum"] {
+  display: grid;
+  align-content: start;
+  flex: 1 1 132px;
+  gap: 7px;
+  max-width: 220px;
+  min-width: 0;
+  padding: 0 24px;
+  border-left: 1px solid var(--stats-line);
+}
+
+[data-page="stats"] [data-component="model-catalog-datum"]:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+[data-page="stats"] [data-component="model-catalog-datum"] strong {
+  min-width: 0;
+  color: var(--stats-text);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  overflow-wrap: anywhere;
+}
+
+[data-page="stats"] [data-section="model-panel"] {
+  padding: 80px 40px;
+}
+
+[data-page="stats"] [data-component="model-metric-grid"] {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"] {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+[data-page="stats"] [data-component="model-metric"] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  min-height: 132px;
+  padding: 16px;
+  border: 1px solid var(--stats-line);
+  background: var(--stats-layer);
+}
+
+[data-page="stats"] [data-component="model-metric"] span,
+[data-page="stats"] [data-component="model-metric"] p {
+  color: var(--stats-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+[data-page="stats"] [data-component="model-metric"] strong {
+  min-width: 0;
+  color: var(--stats-text);
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-page="stats"] [data-component="model-metric"][data-state="positive"] strong {
+  color: #198b43;
+}
+
+[data-page="stats"] [data-component="model-metric"][data-state="negative"] strong {
+  color: #b82d35;
+}
+
+[data-page="stats"] [data-component="lab-model-grid"] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+[data-page="stats"] [data-component="lab-model-card"] {
+  position: relative;
+  display: grid;
+  align-content: space-between;
+  gap: 28px;
+  min-height: 220px;
+  padding: 16px;
+  overflow: hidden;
+  border: 1px solid var(--stats-line);
+  color: var(--stats-text);
+  background: var(--stats-layer);
+}
+
+[data-page="stats"] [data-component="lab-model-card"]:hover,
+[data-page="stats"] [data-component="lab-model-card"]:focus-visible {
+  z-index: 1;
+  border-color: var(--stats-text);
+  outline: none;
+}
+
+[data-page="stats"] [data-component="lab-model-card"] > strong {
+  align-self: start;
+  min-width: 0;
+  color: var(--stats-text);
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-page="stats"] [data-slot="lab-model-card-meta"] {
+  display: grid;
+  gap: 8px;
+}
+
+[data-page="stats"] [data-slot="lab-model-card-meta"] p {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--stats-line);
+  color: var(--stats-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+[data-page="stats"] [data-slot="lab-model-card-meta"] b,
+[data-page="stats"] [data-slot="lab-model-card-meta"] em {
+  font: inherit;
+}
+
+[data-page="stats"] [data-slot="lab-model-card-meta"] em {
+  color: var(--stats-text);
+  text-align: right;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] {
+  --model-usage-bar-gap: 6px;
+  --model-usage-dot-size: 6px;
+  --model-usage-dot-offset: 2px;
+  position: relative;
+  display: grid;
+  grid-template-rows: 40px minmax(0, 1fr);
+  gap: 12px;
+  height: clamp(320px, 42vh, 392px);
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-usage-axis"],
+[data-page="stats"] [data-slot="model-usage-bars"] {
+  display: flex;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-usage-axis"] {
+  gap: var(--model-usage-bar-gap);
+}
+
+[data-page="stats"] [data-slot="model-usage-axis"] > div {
+  flex: 1 1 0;
+  min-width: 0;
+  color: var(--stats-faint);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+[data-page="stats"] [data-slot="model-usage-axis"] > div[data-active="true"] {
+  color: var(--stats-text);
+}
+
+[data-page="stats"] [data-slot="model-usage-label"] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-usage-total"] {
+  color: var(--stats-muted);
+  font-weight: 600;
+}
+
+[data-page="stats"] [data-slot="model-usage-date"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-slot="model-usage-column"] {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+  padding-inline: calc(var(--model-usage-bar-gap) / 2);
+  outline: none;
+  cursor: pointer;
+}
+
+[data-page="stats"] [data-slot="model-usage-column"]::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: calc(100% - var(--model-usage-bar-gap));
+  transform: translateX(-50%);
+  content: "";
+  background: var(--stats-dot);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  mask-position: var(--model-usage-dot-offset) top;
+  mask-repeat: repeat;
+  mask-size: var(--model-usage-dot-size) var(--model-usage-dot-size);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-position: var(--model-usage-dot-offset) top;
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: var(--model-usage-dot-size) var(--model-usage-dot-size);
+}
+
+@supports (width: round(down, 100%, 1px)) {
+  [data-page="stats"] [data-slot="model-usage-column"]::before {
+    width: round(down, calc(100% - var(--model-usage-bar-gap)), var(--model-usage-dot-size));
+  }
+}
+
+[data-page="stats"] [data-slot="model-usage-bar"] {
+  position: absolute;
+  right: calc(var(--model-usage-bar-gap) / 2);
+  bottom: 0;
+  left: calc(var(--model-usage-bar-gap) / 2);
+  z-index: 1;
+  height: var(--model-usage-fill);
+  min-height: 0;
+  background: var(--stats-accent);
+  box-shadow: 0 -4px 0 var(--stats-bg);
+  transition:
+    background 120ms ease,
+    opacity 120ms ease;
+}
+
+[data-page="stats"] [data-slot="model-usage-column"][data-muted="true"] [data-slot="model-usage-bar"] {
+  background: var(--stats-layer-2);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-dense-labels="true"]
+  [data-slot="model-usage-axis"]
+  > div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  font-weight: 600;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"][data-dense-labels="true"] [data-slot="model-usage-label"] {
+  position: absolute;
+  left: 50%;
+  width: max-content;
+  max-width: 72px;
+  transform: rotate(-90deg) translateX(-50%);
+  transform-origin: left center;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"][data-dense-labels="true"] [data-slot="model-usage-total"] {
+  display: none;
+}
+
+[data-page="stats"]
+  [data-slot="model-usage-axis"]
+  > div[data-label-hidden="true"]:not([data-active="true"])
+  [data-slot="model-usage-label"] {
+  visibility: hidden;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] {
+  top: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 176px;
+  min-width: 176px;
+  padding: 0;
+  border: 0;
+  box-shadow:
+    0 0 0 0.5px #00000024,
+    0 8px 16px #0000000f,
+    0 4px 8px #00000014;
+  color: var(--stats-text);
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement="right"] {
+  right: auto;
+  left: calc(100% + 8px);
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement="left"] {
+  right: calc(100% + 8px);
+  left: auto;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] strong,
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] > span {
+  display: block;
+  font-size: 11px;
+  line-height: 12px;
+  white-space: nowrap;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] strong {
+  padding: 8px 8px 0;
+  font-weight: 500;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] > span {
+  padding: 4px 8px 8px;
+  color: var(--stats-muted);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"]
+  [data-component="chart-tooltip"]
+  [data-slot="tooltip-divider"] {
+  height: 0.5px;
+  margin: 0;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] p {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px;
+  height: 20px;
+  margin: 8px 0;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] [data-slot="tooltip-label"] {
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 4px;
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] i {
+  width: 6px;
+  height: 6px;
+  justify-self: center;
+  background: var(--stats-accent);
+}
+
+[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] b {
+  font-weight: 500;
+}
+
+[data-page="stats"] [data-component="model-peer-list"] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[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;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--stats-line);
+  background: var(--stats-layer);
+  color: var(--stats-text);
+  text-decoration: none;
+}
+
+[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);
+  background: var(--stats-bg);
+  text-decoration: none;
+}
+
+[data-page="stats"] [data-component="model-peer-list"] span,
+[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-style: normal;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+[data-page="stats"] [data-component="model-peer-list"] svg {
+  width: 18px;
+  height: 18px;
+  color: var(--stats-muted);
+}
+
+[data-page="stats"] [data-component="model-peer-list"] strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--stats-text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 [data-page="stats"][data-theme="dark"],
 :root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) {
   color-scheme: dark;
@@ -2923,7 +3547,10 @@
   [data-page="stats"] [data-section="geo-breakdown"],
   [data-page="stats"] [data-section="token-cost"],
   [data-page="stats"] [data-section="cache-ratio"],
-  [data-page="stats"] [data-section="session-cost"] {
+  [data-page="stats"] [data-section="session-cost"],
+  [data-page="stats"] [data-section="model-hero"],
+  [data-page="stats"] [data-section="lab-hero"],
+  [data-page="stats"] [data-section="model-panel"] {
     padding: 64px 32px;
   }
 }
@@ -2951,6 +3578,29 @@
     flex-wrap: wrap;
   }
 
+  [data-page="stats"] [data-slot="model-hero-grid"] {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
+  [data-page="stats"] [data-component="model-rank-panel"] {
+    min-height: 0;
+  }
+
+  [data-page="stats"] [data-component="model-metric-grid"],
+  [data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
+  [data-page="stats"] [data-component="lab-model-grid"] {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  [data-page="stats"] [data-component="model-peer-list"] a {
+    grid-template-columns: 32px 22px minmax(0, 1fr) minmax(72px, auto);
+  }
+
+  [data-page="stats"] [data-component="model-peer-list"] em {
+    display: none;
+  }
+
   [data-page="stats"] [data-slot="chart-footer"] {
     align-items: flex-start;
     flex-direction: column;
@@ -3056,7 +3706,10 @@
   [data-page="stats"] [data-section="geo-breakdown"],
   [data-page="stats"] [data-section="token-cost"],
   [data-page="stats"] [data-section="cache-ratio"],
-  [data-page="stats"] [data-section="session-cost"] {
+  [data-page="stats"] [data-section="session-cost"],
+  [data-page="stats"] [data-section="model-hero"],
+  [data-page="stats"] [data-section="lab-hero"],
+  [data-page="stats"] [data-section="model-panel"] {
     padding: 48px 24px;
   }
 
@@ -3078,6 +3731,110 @@
     width: 100%;
   }
 
+  [data-page="stats"] [data-section="model-hero"],
+  [data-page="stats"] [data-section="lab-hero"] {
+    gap: 20px;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-grid"] {
+    gap: 24px;
+  }
+
+  [data-page="stats"] [data-section="model-hero"] h1,
+  [data-page="stats"] [data-section="lab-hero"] h1 {
+    font-size: 38px;
+    line-height: 1;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-pattern"] {
+    height: 14px;
+  }
+
+  [data-page="stats"] [data-slot="model-catalog-grid"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px 24px;
+  }
+
+  [data-page="stats"] [data-component="model-catalog-datum"] {
+    max-width: none;
+    padding: 0;
+    border-left: 0;
+  }
+
+  [data-page="stats"] [data-component="model-catalog-datum"] strong {
+    font-size: 18px;
+  }
+
+  [data-page="stats"] [data-slot="model-hero-copy"] p:not([data-slot="hero-meta"]) {
+    font-size: 13px;
+  }
+
+  [data-page="stats"] [data-component="model-metric-grid"],
+  [data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
+  [data-page="stats"] [data-component="lab-model-grid"] {
+    grid-template-columns: 1fr;
+  }
+
+  [data-page="stats"] [data-component="model-metric"] {
+    min-height: 112px;
+  }
+
+  [data-page="stats"] [data-component="model-usage-chart"] {
+    --model-usage-mobile-bar-width: 16px;
+    --model-usage-mobile-track-width: calc(
+      var(--model-usage-count) * (var(--model-usage-mobile-bar-width) + var(--model-usage-bar-gap)) -
+        var(--model-usage-bar-gap)
+    );
+    width: calc(100% + 48px);
+    height: 360px;
+    margin-inline: -24px;
+    padding-inline: 24px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+  }
+
+  [data-page="stats"] [data-component="model-usage-chart"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-page="stats"] [data-slot="model-usage-axis"],
+  [data-page="stats"] [data-slot="model-usage-bars"] {
+    width: var(--model-usage-mobile-track-width);
+    min-width: var(--model-usage-mobile-track-width);
+  }
+
+  [data-page="stats"] [data-slot="model-usage-bars"] {
+    gap: var(--model-usage-bar-gap);
+  }
+
+  [data-page="stats"] [data-slot="model-usage-axis"] > div,
+  [data-page="stats"] [data-slot="model-usage-column"] {
+    flex: 0 0 var(--model-usage-mobile-bar-width);
+  }
+
+  [data-page="stats"] [data-slot="model-usage-column"] {
+    padding-inline: 0;
+  }
+
+  [data-page="stats"] [data-slot="model-usage-column"]::before {
+    width: 100%;
+  }
+
+  [data-page="stats"] [data-slot="model-usage-bar"] {
+    right: 0;
+    left: 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"] svg {
+    display: none;
+  }
+
   [data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {
     display: flex;
     margin-top: 24px;
@@ -3267,6 +4024,23 @@
     right: 12px;
     left: 12px;
   }
+
+  [data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] {
+    position: fixed;
+    top: auto;
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+    z-index: 40;
+    width: auto;
+    min-width: 0;
+    transform: none;
+  }
+
+  [data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement] {
+    right: 12px;
+    left: 12px;
+  }
 }
 
 @media (max-width: 40rem) {

packages/stats/app/src/routes/index.tsx

@@ -10,7 +10,6 @@ import ibmPlexMonoRegularLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/
 import ibmPlexMonoMediumLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2?url"
 import ibmPlexMonoSemiBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2?url"
 import ibmPlexMonoBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Latin1.woff2?url"
-import opencodeWordmarkDark from "../asset/logo-ornate-dark.svg"
 import {
   getStatsHomeData,
   type CacheRatioEntry,
@@ -28,6 +27,16 @@ import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show,
 import { getRequestEvent } from "solid-js/web"
 import type { FeatureCollection, GeometryObject, GeoJsonProperties } from "geojson"
 import type { GeometryCollection, Topology } from "topojson-specification"
+import {
+  applyThemePreference,
+  Footer,
+  getGitHubStars,
+  githubLink,
+  Header,
+  isThemePreference,
+  themeStorageKey,
+  type ThemePreference,
+} from "./stats-shell"
 
 const products = ["All Users", "Zen", "Go"] as const
 const tokenProducts = ["Zen", "Go"] as const
@@ -44,25 +53,6 @@ const statsHomeDescription = "OpenCode usage, market share, token cost, and sess
 const statsHomeFallbackUrl = "https://opencode.ai/stats/"
 const statsUnfurlPath = "banner.png"
 const statsUnfurlAlt = "OpenCode Stats wordmark on a dark patterned background"
-const headerLinks = [
-  { href: "#top-models", label: "Top Models" },
-  { href: "#session-cost", label: "Session Cost" },
-  { href: "#token-cost", label: "Token Cost" },
-  { href: "#cache-ratio", label: "Cache Ratio" },
-  { href: "#market-share", label: "Market Share" },
-  { href: "#geo-breakdown", label: "Geo Breakdown" },
-] as const
-const githubLink = {
-  href: "https://github.com/anomalyco/opencode",
-  apiHref: "https://api.github.com/repos/anomalyco/opencode",
-  label: "GitHub",
-  fallbackStars: "150K",
-  ariaLabel: "Star OpenCode on GitHub",
-}
-const compactNumberFormatter = new Intl.NumberFormat("en", {
-  notation: "compact",
-  maximumFractionDigits: 1,
-})
 const usageColors = [
   "#ed6aff",
   "#a684ff",
@@ -77,13 +67,6 @@ const usageColors = [
   "#ff6467",
 ]
 const marketColors = ["#ed6aff", "#a684ff", "#7c86ff", "#51a2ff", "#00d3f2", "#00d5be", "#00bc7d", "#9ae600", "#ffb900"]
-const themePreferences = ["dark", "light", "system"] as const
-const themePreferenceLabels = {
-  dark: "Dark",
-  light: "Light",
-  system: "System",
-} as const
-const themeStorageKey = "opencode:stats-theme"
 const geoMapWidth = 960
 const geoMapHeight = 430
 const countryDisplayNames = new Intl.DisplayNames(["en"], { type: "region" })
@@ -91,7 +74,6 @@ const countryDisplayNames = new Intl.DisplayNames(["en"], { type: "region" })
 type UsageProduct = (typeof products)[number]
 type TokenProduct = (typeof tokenProducts)[number]
 type UsageRange = (typeof ranges)[number]
-type ThemePreference = (typeof themePreferences)[number]
 type IsoCountryCode = readonly [string, string, string]
 type WorldCountryProperties = GeoJsonProperties & { name?: string }
 type WorldTopology = Topology<{ countries: GeometryCollection<WorldCountryProperties> }>
@@ -127,23 +109,6 @@ const getData = query(async () => {
   return runtime.runPromise(getStatsHomeData())
 }, "getStatsHomeData")
 
-const getGitHubStars = query(async () => {
-  "use server"
-  return fetch(githubLink.apiHref, {
-    headers: {
-      Accept: "application/vnd.github+json",
-      "X-GitHub-Api-Version": "2022-11-28",
-    },
-  })
-    .then((response) => (response.ok ? response.json() : undefined))
-    .then((body: unknown) =>
-      body && typeof body === "object" && "stargazers_count" in body && typeof body.stargazers_count === "number"
-        ? compactNumberFormatter.format(body.stargazers_count)
-        : githubLink.fallbackStars,
-    )
-    .catch(() => githubLink.fallbackStars)
-}, "getGitHubStars")
-
 export default function StatsHome() {
   const event = getRequestEvent()
   event?.response.headers.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400")
@@ -224,20 +189,6 @@ function getStatsHomeUrl(base: string, requestUrl: string) {
   return url.toString()
 }
 
-function isThemePreference(value: string | null): value is ThemePreference {
-  return value === "dark" || value === "light" || value === "system"
-}
-
-function applyThemePreference(preference: ThemePreference) {
-  if (typeof document === "undefined") return
-  document.documentElement.dataset.statsTheme = preference
-  if (preference === "system") {
-    document.documentElement.style.removeProperty("color-scheme")
-    return
-  }
-  document.documentElement.style.setProperty("color-scheme", preference)
-}
-
 function Hero(props: { updatedAt: string | null }) {
   const [timeZone, setTimeZone] = createSignal("UTC")
   const [previousTimeZone, setPreviousTimeZone] = createSignal("UTC")
@@ -977,10 +928,11 @@ function LeaderboardCard(props: {
   onActiveModelChange: (model: string | undefined) => void
 }) {
   return (
-    <article
+    <a
       data-component="leader-card"
       data-size={props.size}
       data-active={props.active ? "true" : undefined}
+      href={`${import.meta.env.BASE_URL}${modelSlug(props.entry.provider)}/${modelSlug(props.entry.model)}`}
       role="listitem"
       tabIndex={0}
       aria-label={`${String(props.entry.rank).padStart(2, "0")} ${props.entry.model} by ${props.entry.author}`}
@@ -1010,7 +962,7 @@ function LeaderboardCard(props: {
           </div>
         </div>
       </div>
-    </article>
+    </a>
   )
 }
 
@@ -1807,415 +1759,11 @@ function formatSessionCost(value: number) {
   return `$${value.toFixed(4)}`
 }
 
-function Header(props: { githubStars: string }) {
-  const [menuOpen, setMenuOpen] = createSignal(false)
-  const [menuViewport, setMenuViewport] = createSignal(false)
-
-  createEffect(() => {
-    if (typeof window === "undefined") return
-    const media = window.matchMedia("(max-width: 74.999rem)")
-    const update = () => setMenuViewport(media.matches)
-    update()
-    media.addEventListener("change", update)
-    onCleanup(() => media.removeEventListener("change", update))
-  })
-
-  createEffect(() => {
-    if (!menuOpen()) return
-    if (!menuViewport()) return
-    if (typeof document === "undefined") return
-    const page = document.querySelector<HTMLElement>('[data-page="stats"]')
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
-    const htmlOverflow = document.documentElement.style.overflow
-    const pagePaddingRight = page?.style.paddingRight
-    const bodyOverflow = document.body.style.overflow
-    document.documentElement.style.overflow = "hidden"
-    if (scrollbarWidth > 0 && page) page.style.paddingRight = `${scrollbarWidth}px`
-    document.body.style.overflow = "hidden"
-    onCleanup(() => {
-      document.documentElement.style.overflow = htmlOverflow
-      if (page && pagePaddingRight !== undefined) page.style.paddingRight = pagePaddingRight
-      document.body.style.overflow = bodyOverflow
-    })
-  })
-
-  return (
-    <header data-component="top" data-menu-open={menuOpen() ? "true" : undefined}>
-      <div data-slot="header-bar">
-        <a data-slot="brand" href={import.meta.env.BASE_URL} aria-label="Stats home">
-          <StatsWordmark />
-        </a>
-        <nav data-component="section-nav" aria-label="Stats sections">
-          <ul>
-            <For each={headerLinks}>
-              {(link) => (
-                <li>
-                  <a href={link.href}>{link.label}</a>
-                </li>
-              )}
-            </For>
-          </ul>
-        </nav>
-        <div data-slot="header-actions">
-          <a
-            data-slot="header-button"
-            data-variant="neutral"
-            href={githubLink.href}
-            target="_blank"
-            rel="noreferrer"
-            aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
-          >
-            <strong>{githubLink.label}</strong>
-            <span>[{props.githubStars}]</span>
-          </a>
-          <a data-slot="header-button" data-variant="contrast" href="https://opencode.ai/">
-            <strong>Try OpenCode</strong>
-          </a>
-          <button
-            data-slot="menu-button"
-            type="button"
-            aria-controls="stats-mobile-nav"
-            aria-expanded={menuOpen() ? "true" : "false"}
-            aria-label={menuOpen() ? "Close navigation" : "Open navigation"}
-            onClick={() => setMenuOpen((value) => !value)}
-          >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-              <Show when={menuOpen()} fallback={<path d="M2 4.72H14M2 8.5H14M2 12.28H14" stroke="currentColor" />}>
-                <path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
-              </Show>
-            </svg>
-          </button>
-        </div>
-      </div>
-      <nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Stats sections" hidden={!menuOpen()}>
-        <a
-          data-slot="mobile-menu-item"
-          data-variant="github"
-          href={githubLink.href}
-          target="_blank"
-          rel="noreferrer"
-          aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
-        >
-          <strong>{githubLink.label}</strong>
-          <span>[{props.githubStars}]</span>
-        </a>
-        <For each={headerLinks}>
-          {(link) => (
-            <a data-slot="mobile-menu-item" href={link.href} onClick={() => setMenuOpen(false)}>
-              {link.label}
-            </a>
-          )}
-        </For>
-      </nav>
-    </header>
-  )
-}
-
-function StatsWordmark() {
-  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>
-  )
-}
-
-function OpenCodeMark() {
-  return (
-    <svg data-slot="opencode-mark" width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
-      <path d="M40 40H0V0H40V40Z" fill="var(--stats-logo-bg)" />
-      <path d="M26 29H14V17H26V29Z" fill="var(--stats-logo-fill)" />
-      <path d="M26 11H14V29H26V11ZM32 35H8V5H32V35Z" fill="var(--stats-logo-stroke)" />
-    </svg>
-  )
-}
-
-function Footer(props: {
-  themePreference: ThemePreference
-  onThemePreferenceChange: (preference: ThemePreference) => void
-}) {
-  const [subscribeOpen, setSubscribeOpen] = createSignal(false)
-  const modelStats = [
-    { href: "#top-models", label: "Top Models" },
-    { href: "#session-cost", label: "Session Cost" },
-    { href: "#token-cost", label: "Token Cost" },
-    { href: "#cache-ratio", label: "Cache Ratio" },
-    { href: "#market-share", label: "Market Share" },
-    { href: "#geo-breakdown", label: "Geo Breakdown" },
-  ]
-  const legal = [
-    { href: "https://opencode.ai/legal/terms-of-service", label: "Terms of service" },
-    { href: "https://opencode.ai/legal/privacy-policy", label: "Privacy policy" },
-  ]
-  const connect = [
-    { href: "mailto:hello@opencode.ai", label: "Contact us" },
-    { href: "https://opencode.ai/discord", label: "Community" },
-    { href: "https://x.com/opencode", label: "X" },
-    githubLink,
-    { href: "https://www.youtube.com/@anomaly-co", label: "YouTube" },
-  ]
-
-  return (
-    <footer data-component="footer">
-      <SectionBridge label="GEO BREAKDOWN" href="#geo-breakdown" />
-      <div data-slot="footer-grid">
-        <a data-slot="footer-mark" href="https://opencode.ai" aria-label="OpenCode home">
-          <OpenCodeMark />
-        </a>
-        <FooterColumn title="Model Stats" links={modelStats} />
-        <FooterColumn title="Legal" links={legal} />
-        <FooterColumn title="Connect" links={connect} />
-        <div data-slot="footer-column">
-          <h2>Newsletter</h2>
-          <p>Be the first to know about new releases.</p>
-          <button data-slot="subscribe-button" type="button" onClick={() => setSubscribeOpen(true)}>
-            Subscribe
-          </button>
-        </div>
-      </div>
-      <div data-slot="footer-pattern" aria-hidden="true" />
-      <div data-slot="footer-bottom">
-        <div>
-          <span>© 2026 Anomaly Innovations Inc.</span>
-          <span data-slot="status">All systems Operational</span>
-        </div>
-        <div data-slot="theme-toggle" role="group" aria-label="Theme">
-          <For each={themePreferences}>
-            {(preference) => (
-              <button
-                data-slot="theme-option"
-                type="button"
-                aria-label={themePreferenceLabels[preference]}
-                aria-pressed={props.themePreference === preference ? "true" : "false"}
-                title={themePreferenceLabels[preference]}
-                onClick={() => props.onThemePreferenceChange(preference)}
-              >
-                <ThemePreferenceIcon preference={preference} />
-              </button>
-            )}
-          </For>
-        </div>
-      </div>
-      <Show when={subscribeOpen()}>
-        <SubscribeModal onClose={() => setSubscribeOpen(false)} />
-      </Show>
-    </footer>
-  )
-}
-
-function ThemePreferenceIcon(props: { preference: ThemePreference }) {
-  return (
-    <svg data-slot="theme-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-      <Show
-        when={props.preference === "dark"}
-        fallback={
-          <Show
-            when={props.preference === "light"}
-            fallback={
-              <>
-                <rect x="1.5552" y="2.4448" width="12.8896" height="8.8888" fill="currentColor" opacity="0.3" />
-                <svg
-                  x="1.0552"
-                  y="1.9446"
-                  width="13.8889"
-                  height="12.5325"
-                  viewBox="0 0 13.8889 12.5325"
-                  preserveAspectRatio="none"
-                  overflow="visible"
-                >
-                  <path
-                    d="M4.05559 12.0555C4.72936 11.8431 5.72492 11.6111 6.94448 11.6111M6.94448 11.6111C7.65114 11.6111 8.66981 11.6893 9.83336 12.0555M6.94448 11.6111L6.94448 9.38888M13.3889 0.5H0.500102C0.500102 0.5 0.500017 1.29594 0.500017 2.27778V7.61112C0.500017 8.59298 0.500007 9.38889 0.500007 9.38889H13.3889C13.3889 9.38889 13.3889 8.59298 13.3889 7.61112V2.27778C13.3889 1.29594 13.3889 0.5 13.3889 0.5Z"
-                    stroke="currentColor"
-                  />
-                </svg>
-              </>
-            }
-          >
-            <svg
-              x="0.6102"
-              y="0.6102"
-              width="14.7778"
-              height="14.7778"
-              viewBox="0 0 14.7778 14.7778"
-              preserveAspectRatio="none"
-              overflow="visible"
-            >
-              <path
-                d="M7.38889 0.5V1.38889M12.26 2.51782L11.6315 3.14627M14.2778 7.38892H13.3889M12.26 12.26L11.6315 11.6316M7.38889 14.2778V13.3889M2.51778 12.26L3.14622 11.6316M0.5 7.38892H1.38889M2.51778 2.51782L3.14622 3.14627M7.38888 11.1666C9.47528 11.1666 11.1667 9.47526 11.1667 7.38886C11.1667 5.30245 9.47528 3.61108 7.38888 3.61108C5.30247 3.61108 3.6111 5.30245 3.6111 7.38886C3.6111 9.47526 5.30247 11.1666 7.38888 11.1666Z"
-                stroke="currentColor"
-                stroke-linecap="square"
-              />
-            </svg>
-          </Show>
-        }
-      >
-        <svg
-          x="2.0549"
-          y="1.742"
-          width="12.3867"
-          height="12.3971"
-          viewBox="0 0 12.3867 12.3971"
-          preserveAspectRatio="none"
-          overflow="visible"
-        >
-          <path
-            d="M9.05556 8.39711C6.37067 8.39711 4.19444 6.22089 4.19444 3.536C4.19444 2.48445 4.53122 1.51456 5.09822 0.71889C2.48178 1.20733 0.5 3.49944 0.5 6.25822C0.5 9.37244 3.02467 11.8971 6.13889 11.8971C8.76156 11.8971 10.9596 10.1036 11.5903 7.67844C10.8514 8.13189 9.98578 8.39711 9.05556 8.39711Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-          />
-        </svg>
-      </Show>
-    </svg>
-  )
-}
-
-function SubscribeModal(props: { onClose: () => void }) {
-  const [status, setStatus] = createSignal<"idle" | "pending" | "success" | "error">("idle")
-  const [message, setMessage] = createSignal("")
-  let input: HTMLInputElement | undefined
-
-  onMount(() => {
-    if (typeof document === "undefined") return
-    const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : undefined
-    const htmlOverflow = document.documentElement.style.overflow
-    const bodyOverflow = document.body.style.overflow
-    document.documentElement.style.overflow = "hidden"
-    document.body.style.overflow = "hidden"
-    const focusTimeout = window.setTimeout(() => input?.focus(), 0)
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") props.onClose()
-    }
-    document.addEventListener("keydown", onKeyDown)
-    onCleanup(() => {
-      window.clearTimeout(focusTimeout)
-      document.documentElement.style.overflow = htmlOverflow
-      document.body.style.overflow = bodyOverflow
-      document.removeEventListener("keydown", onKeyDown)
-      activeElement?.focus()
-    })
-  })
-
-  return (
-    <div data-component="subscribe-modal" role="dialog" aria-modal="true" aria-labelledby="subscribe-title">
-      <div data-slot="modal-scrim" aria-hidden="true" onClick={props.onClose} />
-      <div data-slot="modal-panel">
-        <div data-slot="modal-brand">
-          <img data-slot="modal-logo" src={opencodeWordmarkDark} alt="OpenCode" />
-          <button data-slot="modal-close" type="button" aria-label="Close newsletter signup" onClick={props.onClose}>
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-              <path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
-            </svg>
-          </button>
-        </div>
-        <div data-slot="modal-body">
-          <div data-slot="modal-intro">
-            <h2 id="subscribe-title">OpenCode Newsletter</h2>
-            <p>
-              Be the first to know
-              <br />
-              about new releases.
-            </p>
-          </div>
-          <form
-            data-slot="subscribe-form"
-            method="post"
-            onSubmit={(event) => {
-              event.preventDefault()
-              const form = event.currentTarget
-              setStatus("pending")
-              setMessage("")
-              fetch(`${import.meta.env.BASE_URL}api/newsletter`, {
-                method: "POST",
-                body: new FormData(form),
-              }).then(
-                async (response) => {
-                  if (response.ok) {
-                    form.reset()
-                    setStatus("success")
-                    return
-                  }
-                  setMessage(await newsletterErrorMessage(response))
-                  setStatus("error")
-                },
-                () => {
-                  setMessage("Failed to subscribe")
-                  setStatus("error")
-                },
-              )
-            }}
-          >
-            <input ref={input} type="email" name="email" placeholder="Email address" required />
-            <button type="submit" disabled={status() === "pending"}>
-              <span>{status() === "pending" ? "Subscribing..." : "Subscribe"}</span>
-            </button>
-          </form>
-          <div data-slot="subscribe-feedback" aria-live="polite">
-            <Show when={status() === "success"}>
-              <p data-state="success">You're subscribed.</p>
-            </Show>
-            <Show when={status() === "error"}>
-              <p data-state="error">{message()}</p>
-            </Show>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function newsletterErrorMessage(response: Response) {
-  return response.json().then(
-    (body: unknown) =>
-      body && typeof body === "object" && "error" in body && typeof body.error === "string"
-        ? body.error
-        : "Failed to subscribe",
-    () => "Failed to subscribe",
-  )
-}
-
-function FooterColumn(props: { title: string; links: { href: string; label: string }[] }) {
-  return (
-    <div data-slot="footer-column">
-      <h2>{props.title}</h2>
-      <nav aria-label={props.title}>
-        <For each={props.links}>
-          {(link) => (
-            <a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
-              {link.label}
-            </a>
-          )}
-        </For>
-      </nav>
-    </div>
-  )
+function modelSlug(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-")
 }

packages/stats/app/src/routes/model-catalog.ts

@@ -0,0 +1,224 @@
+import { query } from "@solidjs/router"
+
+export const modelCatalogSourceUrl = "https://models.dev/models.json"
+
+export type ModelCatalogEntry = {
+  id: string
+  lab: string
+  slug: string
+  name: string
+  family?: string
+  knowledge?: string
+  releaseDate?: string
+  lastUpdated?: string
+  limit?: { context?: number; output?: number }
+  modalities: { input: string[]; output: string[] }
+  openWeights: boolean
+  reasoning: boolean
+  toolCall: boolean
+  attachment: boolean
+  temperature: boolean
+  weights: { label: string; url: string }[]
+  benchmarks: ModelCatalogBenchmark[]
+}
+
+export type ModelCatalogBenchmark = {
+  name: string
+  score: number
+  metric?: string
+  harness?: string
+  variant?: string
+  dataset?: string
+  version?: string
+  source?: string
+}
+
+export type ModelCatalogLab = {
+  id: string
+  name: string
+  models: ModelCatalogEntry[]
+}
+
+export type ModelCatalog = {
+  models: ModelCatalogEntry[]
+  labs: ModelCatalogLab[]
+}
+
+export const getModelCatalog = query(async () => {
+  "use server"
+  const payload = await fetch(modelCatalogSourceUrl)
+    .then((response): Promise<unknown> => (response.ok ? (response.json() as Promise<unknown>) : Promise.resolve()))
+    .catch(() => undefined)
+  return buildModelCatalog(payload)
+}, "getModelCatalog")
+
+export function findModelCatalogEntry(catalog: ModelCatalog, model: string, lab?: string) {
+  const normalizedId = lab ? `${catalogSlug(lab)}/${catalogSlug(model)}` : model.trim().toLowerCase()
+  const leaf = catalogSlug(model)
+  return (
+    catalog.models.find((entry) => entry.id.toLowerCase() === normalizedId) ??
+    catalog.models.find((entry) => (lab ? entry.lab === catalogSlug(lab) : true) && entry.slug === leaf) ??
+    catalog.models.find((entry) => entry.slug === leaf)
+  )
+}
+
+export function findModelCatalogLab(catalog: ModelCatalog, lab: string) {
+  const id = catalogSlug(lab)
+  return catalog.labs.find((entry) => entry.id === id)
+}
+
+export function formatCatalogLabName(lab: string) {
+  const known: Record<string, string> = {
+    alibaba: "Alibaba",
+    anthropic: "Anthropic",
+    cohere: "Cohere",
+    deepseek: "DeepSeek",
+    google: "Google",
+    meta: "Meta",
+    minimax: "MiniMax",
+    mistral: "Mistral",
+    moonshotai: "Moonshot",
+    openai: "OpenAI",
+    perplexity: "Perplexity",
+    stepfun: "StepFun",
+    tencent: "Tencent",
+    xai: "xAI",
+    xiaomi: "Xiaomi",
+    zai: "Z.ai",
+    zhipuai: "Zhipu",
+  }
+  return known[catalogSlug(lab)] ?? lab.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase())
+}
+
+export function catalogSlug(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-")
+}
+
+function buildModelCatalog(payload: unknown): ModelCatalog {
+  const models = (Array.isArray(payload) ? payload : isRecord(payload) ? Object.values(payload) : [])
+    .flatMap(readModelCatalogEntry)
+    .toSorted((a, b) => a.lab.localeCompare(b.lab) || displayDateTime(b.releaseDate) - displayDateTime(a.releaseDate))
+  return {
+    models,
+    labs: Object.values(
+      models.reduce<Record<string, ModelCatalogLab>>((result, model) => {
+        result[model.lab] = {
+          id: model.lab,
+          name: formatCatalogLabName(model.lab),
+          models: [...(result[model.lab]?.models ?? []), model],
+        }
+        return result
+      }, {}),
+    ).toSorted((a, b) => a.name.localeCompare(b.name)),
+  }
+}
+
+function readModelCatalogEntry(value: unknown): ModelCatalogEntry[] {
+  if (!isRecord(value)) return []
+  const id = stringValue(value.id)
+  const name = stringValue(value.name)
+  const lab = id?.split("/")[0]
+  const slug = id?.split("/").slice(1).join("/")
+  if (!id || !name || !lab || !slug) return []
+  return [
+    {
+      id,
+      lab: catalogSlug(lab),
+      slug: catalogSlug(slug),
+      name,
+      family: stringValue(value.family),
+      knowledge: stringValue(value.knowledge),
+      releaseDate: stringValue(value.release_date),
+      lastUpdated: stringValue(value.last_updated),
+      limit: readCatalogLimit(value.limit),
+      modalities: readCatalogModalities(value.modalities),
+      openWeights: booleanValue(value.open_weights),
+      reasoning: booleanValue(value.reasoning),
+      toolCall: booleanValue(value.tool_call),
+      attachment: booleanValue(value.attachment),
+      temperature: booleanValue(value.temperature),
+      weights: readCatalogWeights(value.weights),
+      benchmarks: readCatalogBenchmarks(value.benchmarks),
+    },
+  ]
+}
+
+function readCatalogLimit(value: unknown) {
+  if (!isRecord(value)) return undefined
+  return {
+    context: numberValue(value.context),
+    output: numberValue(value.output),
+  }
+}
+
+function readCatalogModalities(value: unknown) {
+  if (!isRecord(value)) return { input: [], output: [] }
+  return {
+    input: stringArrayValue(value.input),
+    output: stringArrayValue(value.output),
+  }
+}
+
+function readCatalogWeights(value: unknown) {
+  if (!Array.isArray(value)) return []
+  return value.flatMap((item) => {
+    if (!isRecord(item)) return []
+    const label = stringValue(item.label)
+    const url = stringValue(item.url)
+    return label && url ? [{ label, url }] : []
+  })
+}
+
+function readCatalogBenchmarks(value: unknown) {
+  if (!Array.isArray(value)) return []
+  return value.flatMap((item) => {
+    if (!isRecord(item)) return []
+    const name = stringValue(item.name)
+    const score = numberValue(item.score)
+    return name && score !== undefined
+      ? [
+          {
+            name,
+            score,
+            metric: stringValue(item.metric),
+            harness: stringValue(item.harness),
+            variant: stringValue(item.variant),
+            dataset: stringValue(item.dataset),
+            version: stringValue(item.version),
+            source: stringValue(item.source),
+          },
+        ]
+      : []
+  })
+}
+
+function displayDateTime(value: string | undefined) {
+  return value ? new Date(value).getTime() || 0 : 0
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+function stringValue(value: unknown) {
+  return typeof value === "string" && value.trim() ? value : undefined
+}
+
+function numberValue(value: unknown) {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined
+}
+
+function booleanValue(value: unknown) {
+  return value === true
+}
+
+function stringArrayValue(value: unknown) {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string" && item.trim() !== "")
+    : []
+}

packages/stats/app/src/routes/stats-shell.tsx

@@ -0,0 +1,493 @@
+import opencodeWordmarkDark from "../asset/logo-ornate-dark.svg"
+import { query } from "@solidjs/router"
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
+
+export type HeaderLink = { href: string; label: string }
+
+export const headerLinks = [
+  { href: "#top-models", label: "Top Models" },
+  { href: "#leaderboard", label: "Leaderboard" },
+  { href: "#session-cost", label: "Session Cost" },
+  { href: "#token-cost", label: "Token Cost" },
+  { href: "#cache-ratio", label: "Cache Ratio" },
+  { href: "#market-share", label: "Market Share" },
+  { href: "#geo-breakdown", label: "Geo Breakdown" },
+] as const
+export const githubLink = {
+  href: "https://github.com/anomalyco/opencode",
+  apiHref: "https://api.github.com/repos/anomalyco/opencode",
+  label: "GitHub",
+  fallbackStars: "150K",
+  ariaLabel: "Star OpenCode on GitHub",
+}
+export const themePreferences = ["dark", "light", "system"] as const
+export const themeStorageKey = "opencode:stats-theme"
+export type ThemePreference = (typeof themePreferences)[number]
+
+const compactNumberFormatter = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+})
+const themePreferenceLabels = {
+  dark: "Dark",
+  light: "Light",
+  system: "System",
+} as const
+
+export const getGitHubStars = query(async () => {
+  "use server"
+  return fetch(githubLink.apiHref, {
+    headers: {
+      Accept: "application/vnd.github+json",
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  })
+    .then((response) => (response.ok ? response.json() : undefined))
+    .then((body: unknown) =>
+      body && typeof body === "object" && "stargazers_count" in body && typeof body.stargazers_count === "number"
+        ? compactNumberFormatter.format(body.stargazers_count)
+        : githubLink.fallbackStars,
+    )
+    .catch(() => githubLink.fallbackStars)
+}, "getGitHubStars")
+
+export function isThemePreference(value: string | null): value is ThemePreference {
+  return value === "dark" || value === "light" || value === "system"
+}
+
+export function applyThemePreference(preference: ThemePreference) {
+  if (typeof document === "undefined") return
+  document.documentElement.dataset.statsTheme = preference
+  if (preference === "system") {
+    document.documentElement.style.removeProperty("color-scheme")
+    return
+  }
+  document.documentElement.style.setProperty("color-scheme", preference)
+}
+
+export function Header(props: { githubStars: string; links?: readonly HeaderLink[]; brandHref?: string }) {
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [menuViewport, setMenuViewport] = createSignal(false)
+  const links = createMemo(() => props.links ?? headerLinks)
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const media = window.matchMedia("(max-width: 74.999rem)")
+    const update = () => setMenuViewport(media.matches)
+    update()
+    media.addEventListener("change", update)
+    onCleanup(() => media.removeEventListener("change", update))
+  })
+
+  createEffect(() => {
+    if (!menuOpen()) return
+    if (!menuViewport()) return
+    if (typeof document === "undefined") return
+    const page = document.querySelector<HTMLElement>('[data-page="stats"]')
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    const htmlOverflow = document.documentElement.style.overflow
+    const pagePaddingRight = page?.style.paddingRight
+    const bodyOverflow = document.body.style.overflow
+    document.documentElement.style.overflow = "hidden"
+    if (scrollbarWidth > 0 && page) page.style.paddingRight = `${scrollbarWidth}px`
+    document.body.style.overflow = "hidden"
+    onCleanup(() => {
+      document.documentElement.style.overflow = htmlOverflow
+      if (page && pagePaddingRight !== undefined) page.style.paddingRight = pagePaddingRight
+      document.body.style.overflow = bodyOverflow
+    })
+  })
+
+  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>
+        <nav data-component="section-nav" aria-label="Stats sections">
+          <ul>
+            <For each={links()}>
+              {(link) => (
+                <li>
+                  <a href={link.href}>{link.label}</a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </nav>
+        <div data-slot="header-actions">
+          <a
+            data-slot="header-button"
+            data-variant="neutral"
+            href={githubLink.href}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
+          >
+            <strong>{githubLink.label}</strong>
+            <span>[{props.githubStars}]</span>
+          </a>
+          <a data-slot="header-button" data-variant="contrast" href="https://opencode.ai/">
+            <strong>Try OpenCode</strong>
+          </a>
+          <button
+            data-slot="menu-button"
+            type="button"
+            aria-controls="stats-mobile-nav"
+            aria-expanded={menuOpen() ? "true" : "false"}
+            aria-label={menuOpen() ? "Close navigation" : "Open navigation"}
+            onClick={() => setMenuOpen((value) => !value)}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <Show when={menuOpen()} fallback={<path d="M2 4.72H14M2 8.5H14M2 12.28H14" stroke="currentColor" />}>
+                <path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
+              </Show>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Stats sections" hidden={!menuOpen()}>
+        <a
+          data-slot="mobile-menu-item"
+          data-variant="github"
+          href={githubLink.href}
+          target="_blank"
+          rel="noreferrer"
+          aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
+        >
+          <strong>{githubLink.label}</strong>
+          <span>[{props.githubStars}]</span>
+        </a>
+        <For each={links()}>
+          {(link) => (
+            <a data-slot="mobile-menu-item" href={link.href} onClick={() => setMenuOpen(false)}>
+              {link.label}
+            </a>
+          )}
+        </For>
+      </nav>
+    </header>
+  )
+}
+
+function StatsWordmark() {
+  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>
+  )
+}
+
+function OpenCodeMark() {
+  return (
+    <svg data-slot="opencode-mark" width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
+      <path d="M40 40H0V0H40V40Z" fill="var(--stats-logo-bg)" />
+      <path d="M26 29H14V17H26V29Z" fill="var(--stats-logo-fill)" />
+      <path d="M26 11H14V29H26V11ZM32 35H8V5H32V35Z" fill="var(--stats-logo-stroke)" />
+    </svg>
+  )
+}
+
+export function Footer(props: {
+  themePreference: ThemePreference
+  onThemePreferenceChange: (preference: ThemePreference) => void
+  links?: readonly HeaderLink[]
+}) {
+  const [subscribeOpen, setSubscribeOpen] = createSignal(false)
+  const modelStats = props.links ?? [
+    { href: "#top-models", label: "Top Models" },
+    { href: "#leaderboard", label: "Leaderboard" },
+    { href: "#session-cost", label: "Session Cost" },
+    { href: "#token-cost", label: "Token Cost" },
+    { href: "#cache-ratio", label: "Cache Ratio" },
+    { href: "#market-share", label: "Market Share" },
+    { href: "#geo-breakdown", label: "Geo Breakdown" },
+  ]
+  const legal = [
+    { href: "https://opencode.ai/legal/terms-of-service", label: "Terms of service" },
+    { href: "https://opencode.ai/legal/privacy-policy", label: "Privacy policy" },
+  ]
+  const connect = [
+    { href: "mailto:hello@opencode.ai", label: "Contact us" },
+    { href: "https://opencode.ai/discord", label: "Community" },
+    { href: "https://x.com/opencode", label: "X" },
+    githubLink,
+    { href: "https://www.youtube.com/@anomaly-co", label: "YouTube" },
+  ]
+
+  return (
+    <footer data-component="footer">
+      <SectionBridge label="GEO BREAKDOWN" href="#geo-breakdown" />
+      <div data-slot="footer-grid">
+        <a data-slot="footer-mark" href="https://opencode.ai" aria-label="OpenCode home">
+          <OpenCodeMark />
+        </a>
+        <FooterColumn title="Model Stats" links={modelStats} />
+        <FooterColumn title="Legal" links={legal} />
+        <FooterColumn title="Connect" links={connect} />
+        <div data-slot="footer-column">
+          <h2>Newsletter</h2>
+          <p>Be the first to know about new releases.</p>
+          <button data-slot="subscribe-button" type="button" onClick={() => setSubscribeOpen(true)}>
+            Subscribe
+          </button>
+        </div>
+      </div>
+      <div data-slot="footer-pattern" aria-hidden="true" />
+      <div data-slot="footer-bottom">
+        <div>
+          <span>© 2026 Anomaly Innovations Inc.</span>
+          <span data-slot="status">All systems Operational</span>
+        </div>
+        <div data-slot="theme-toggle" role="group" aria-label="Theme">
+          <For each={themePreferences}>
+            {(preference) => (
+              <button
+                data-slot="theme-option"
+                type="button"
+                aria-label={themePreferenceLabels[preference]}
+                aria-pressed={props.themePreference === preference ? "true" : "false"}
+                title={themePreferenceLabels[preference]}
+                onClick={() => props.onThemePreferenceChange(preference)}
+              >
+                <ThemePreferenceIcon preference={preference} />
+              </button>
+            )}
+          </For>
+        </div>
+      </div>
+      <Show when={subscribeOpen()}>
+        <SubscribeModal onClose={() => setSubscribeOpen(false)} />
+      </Show>
+    </footer>
+  )
+}
+
+function SectionBridge(props: { label: string; href: string }) {
+  return (
+    <a data-component="section-bridge" href={props.href}>
+      <span>LEAN MORE</span>
+      <i />
+      <strong>{props.label}</strong>
+      <b>▸</b>
+    </a>
+  )
+}
+
+function ThemePreferenceIcon(props: { preference: ThemePreference }) {
+  return (
+    <svg data-slot="theme-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <Show
+        when={props.preference === "dark"}
+        fallback={
+          <Show
+            when={props.preference === "light"}
+            fallback={
+              <>
+                <rect x="1.5552" y="2.4448" width="12.8896" height="8.8888" fill="currentColor" opacity="0.3" />
+                <svg
+                  x="1.0552"
+                  y="1.9446"
+                  width="13.8889"
+                  height="12.5325"
+                  viewBox="0 0 13.8889 12.5325"
+                  preserveAspectRatio="none"
+                  overflow="visible"
+                >
+                  <path
+                    d="M4.05559 12.0555C4.72936 11.8431 5.72492 11.6111 6.94448 11.6111M6.94448 11.6111C7.65114 11.6111 8.66981 11.6893 9.83336 12.0555M6.94448 11.6111L6.94448 9.38888M13.3889 0.5H0.500102C0.500102 0.5 0.500017 1.29594 0.500017 2.27778V7.61112C0.500017 8.59298 0.500007 9.38889 0.500007 9.38889H13.3889C13.3889 9.38889 13.3889 8.59298 13.3889 7.61112V2.27778C13.3889 1.29594 13.3889 0.5 13.3889 0.5Z"
+                    stroke="currentColor"
+                  />
+                </svg>
+              </>
+            }
+          >
+            <svg
+              x="0.6102"
+              y="0.6102"
+              width="14.7778"
+              height="14.7778"
+              viewBox="0 0 14.7778 14.7778"
+              preserveAspectRatio="none"
+              overflow="visible"
+            >
+              <path
+                d="M7.38889 0.5V1.38889M12.26 2.51782L11.6315 3.14627M14.2778 7.38892H13.3889M12.26 12.26L11.6315 11.6316M7.38889 14.2778V13.3889M2.51778 12.26L3.14622 11.6316M0.5 7.38892H1.38889M2.51778 2.51782L3.14622 3.14627M7.38888 11.1666C9.47528 11.1666 11.1667 9.47526 11.1667 7.38886C11.1667 5.30245 9.47528 3.61108 7.38888 3.61108C5.30247 3.61108 3.6111 5.30245 3.6111 7.38886C3.6111 9.47526 5.30247 11.1666 7.38888 11.1666Z"
+                stroke="currentColor"
+                stroke-linecap="square"
+              />
+            </svg>
+          </Show>
+        }
+      >
+        <svg
+          x="2.0549"
+          y="1.742"
+          width="12.3867"
+          height="12.3971"
+          viewBox="0 0 12.3867 12.3971"
+          preserveAspectRatio="none"
+          overflow="visible"
+        >
+          <path
+            d="M9.05556 8.39711C6.37067 8.39711 4.19444 6.22089 4.19444 3.536C4.19444 2.48445 4.53122 1.51456 5.09822 0.71889C2.48178 1.20733 0.5 3.49944 0.5 6.25822C0.5 9.37244 3.02467 11.8971 6.13889 11.8971C8.76156 11.8971 10.9596 10.1036 11.5903 7.67844C10.8514 8.13189 9.98578 8.39711 9.05556 8.39711Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+          />
+        </svg>
+      </Show>
+    </svg>
+  )
+}
+
+function SubscribeModal(props: { onClose: () => void }) {
+  const [status, setStatus] = createSignal<"idle" | "pending" | "success" | "error">("idle")
+  const [message, setMessage] = createSignal("")
+  let input: HTMLInputElement | undefined
+
+  onMount(() => {
+    if (typeof document === "undefined") return
+    const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : undefined
+    const htmlOverflow = document.documentElement.style.overflow
+    const bodyOverflow = document.body.style.overflow
+    document.documentElement.style.overflow = "hidden"
+    document.body.style.overflow = "hidden"
+    const focusTimeout = window.setTimeout(() => input?.focus(), 0)
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") props.onClose()
+    }
+    document.addEventListener("keydown", onKeyDown)
+    onCleanup(() => {
+      window.clearTimeout(focusTimeout)
+      document.documentElement.style.overflow = htmlOverflow
+      document.body.style.overflow = bodyOverflow
+      document.removeEventListener("keydown", onKeyDown)
+      activeElement?.focus()
+    })
+  })
+
+  return (
+    <div data-component="subscribe-modal" role="dialog" aria-modal="true" aria-labelledby="subscribe-title">
+      <div data-slot="modal-scrim" aria-hidden="true" onClick={props.onClose} />
+      <div data-slot="modal-panel">
+        <div data-slot="modal-brand">
+          <img data-slot="modal-logo" src={opencodeWordmarkDark} alt="OpenCode" />
+          <button data-slot="modal-close" type="button" aria-label="Close newsletter signup" onClick={props.onClose}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
+            </svg>
+          </button>
+        </div>
+        <div data-slot="modal-body">
+          <div data-slot="modal-intro">
+            <h2 id="subscribe-title">OpenCode Newsletter</h2>
+            <p>
+              Be the first to know
+              <br />
+              about new releases.
+            </p>
+          </div>
+          <form
+            data-slot="subscribe-form"
+            method="post"
+            onSubmit={(event) => {
+              event.preventDefault()
+              const form = event.currentTarget
+              setStatus("pending")
+              setMessage("")
+              fetch(`${import.meta.env.BASE_URL}api/newsletter`, {
+                method: "POST",
+                body: new FormData(form),
+              }).then(
+                async (response) => {
+                  if (response.ok) {
+                    form.reset()
+                    setStatus("success")
+                    return
+                  }
+                  setMessage(await newsletterErrorMessage(response))
+                  setStatus("error")
+                },
+                () => {
+                  setMessage("Failed to subscribe")
+                  setStatus("error")
+                },
+              )
+            }}
+          >
+            <input ref={input} type="email" name="email" placeholder="Email address" required />
+            <button type="submit" disabled={status() === "pending"}>
+              <span>{status() === "pending" ? "Subscribing..." : "Subscribe"}</span>
+            </button>
+          </form>
+          <div data-slot="subscribe-feedback" aria-live="polite">
+            <Show when={status() === "success"}>
+              <p data-state="success">You're subscribed.</p>
+            </Show>
+            <Show when={status() === "error"}>
+              <p data-state="error">{message()}</p>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function newsletterErrorMessage(response: Response) {
+  return response.json().then(
+    (body: unknown) =>
+      body && typeof body === "object" && "error" in body && typeof body.error === "string"
+        ? body.error
+        : "Failed to subscribe",
+    () => "Failed to subscribe",
+  )
+}
+
+function FooterColumn(props: { title: string; links: readonly { href: string; label: string }[] }) {
+  return (
+    <div data-slot="footer-column">
+      <h2>{props.title}</h2>
+      <nav aria-label={props.title}>
+        <For each={props.links}>
+          {(link) => (
+            <a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
+              {link.label}
+            </a>
+          )}
+        </For>
+      </nav>
+    </div>
+  )
+}

packages/stats/core/src/domain/geo.ts

@@ -37,7 +37,10 @@ export type GeoStatMetric = {
 
 export declare namespace GeoStatRepo {
   export interface Service {
-    readonly listDaily: () => Effect.Effect<GeoStatMetric[], DatabaseError>
+    readonly listDaily: (opts?: {
+      readonly provider?: string
+      readonly model?: string
+    }) => Effect.Effect<GeoStatMetric[], DatabaseError>
     readonly listByPeriod: (opts: {
       readonly grain: string
       readonly periodKey: string
@@ -59,7 +62,16 @@ export class GeoStatRepo extends Context.Service<GeoStatRepo, GeoStatRepo.Servic
     Effect.gen(function* () {
       const db = yield* DrizzleClient
 
-      const listDaily = Effect.fn("GeoStatRepo.listDaily")(function* () {
+      const listDaily = Effect.fn("GeoStatRepo.listDaily")(function* (opts?: {
+        readonly provider?: string
+        readonly model?: string
+      }) {
+        const scope =
+          opts?.model && opts.provider
+            ? and(eq(geoStat.provider, opts.provider), eq(geoStat.model, opts.model))
+            : opts?.model
+              ? eq(geoStat.model, opts.model)
+              : and(eq(geoStat.provider, "all"), eq(geoStat.model, "all"))
         return yield* Effect.tryPromise({
           try: () =>
             db
@@ -74,15 +86,7 @@ export class GeoStatRepo extends Context.Service<GeoStatRepo, GeoStatRepo.Servic
                 totalTokens: geoStat.total_tokens,
               })
               .from(geoStat)
-              .where(
-                and(
-                  eq(geoStat.grain, "day"),
-                  eq(geoStat.client, "all"),
-                  eq(geoStat.source, "all"),
-                  eq(geoStat.provider, "all"),
-                  eq(geoStat.model, "all"),
-                ),
-              )
+              .where(and(eq(geoStat.grain, "day"), eq(geoStat.client, "all"), eq(geoStat.source, "all"), scope))
               .orderBy(asc(geoStat.period_key)),
           catch: (cause) => DatabaseError.make({ cause }),
         })

packages/stats/core/src/domain/home.ts

@@ -9,11 +9,78 @@ export type TokenProduct = "Zen" | "Go" | "Enterprise"
 export type UsageRange = "1D" | "1W" | "2W" | "1M" | "2M" | "3M" | "YTD" | "ALL"
 export type UsagePoint = { date: string; segments: { model: string; value: number }[] }
 export type MarketDay = { date: string; total: number; authors: { author: string; share: number; tokens: number }[] }
-export type LeaderboardEntry = { model: string; author: string; tokens: number; change: number; rank: number }
+export type LeaderboardEntry = {
+  model: string
+  provider: string
+  author: string
+  tokens: number
+  change: number
+  rank: number
+}
 export type TokenCostEntry = { model: string; total: number; input: number; output: number; cached: number }
 export type CacheRatioEntry = { model: string; ratio: number; cached: number; uncached: number; total: number }
 export type SessionCostEntry = { model: string; cost: number; tokens: number }
 export type CountryEntry = { country: string; continent: string; tokens: number; share: number; rank: number }
+export type ModelUsagePoint = { date: string; tokens: number; sessions: number; cost: number }
+export type ModelMixEntry = { label: string; tokens: number; share: number }
+export type ModelProductEntry = { product: string; tokens: number; sessions: number; share: number }
+export type ModelPeerEntry = {
+  model: string
+  provider: string
+  author: string
+  rank: number
+  tokens: number
+  share: number
+  slug: string
+}
+export type LabUsageModelEntry = {
+  model: string
+  provider: string
+  author: string
+  tokens: number
+  share: number
+  slug: string
+}
+export type StatsModelData = {
+  updatedAt: string | null
+  model: string
+  slug: string
+  provider: string
+  author: string
+  rank: number
+  previousRank: number | null
+  totalModels: number
+  tokenShare: number
+  tokenChange: number
+  totals: {
+    sessions: number
+    tokens: number
+    cost: number
+    tokensPerSession: number
+    costPerSession: number
+    costPerMillion: number
+    cacheRatio: number
+  }
+  usage: ModelUsagePoint[]
+  tokenMix: ModelMixEntry[]
+  productMix: ModelProductEntry[]
+  country: Record<UsageRange, CountryEntry[]>
+  peers: ModelPeerEntry[]
+}
+export type StatsLabData = {
+  updatedAt: string | null
+  provider: string
+  author: string
+  tokenShare: number
+  tokenChange: number
+  totals: {
+    sessions: number
+    tokens: number
+    models: number
+  }
+  usage: ModelUsagePoint[]
+  models: LabUsageModelEntry[]
+}
 export type StatsHomeData = {
   updatedAt: string | null
   usage: Record<UsageProduct, Record<UsageRange, UsagePoint[]>>
@@ -74,6 +141,35 @@ export const getStatsHomeData: () => Effect.Effect<
   return buildStatsHomeData(modelRows, providerRows, geoRows)
 })
 
+export const getStatsModelData: (
+  model: string,
+  provider?: string,
+) => Effect.Effect<StatsModelData | null, DatabaseError, ModelStatRepo | GeoStatRepo> = Effect.fn("StatsModel.getData")(
+  function* (model, provider) {
+    const modelStats = yield* ModelStatRepo
+    const geoStats = yield* GeoStatRepo
+    const modelRows = yield* modelStats.listDaily()
+    const normalized = modelRows.flatMap(normalizeStatRow)
+    const resolvedModel = resolveModelName(model, normalized, provider)
+    if (!resolvedModel) return null
+    return buildStatsModelData(
+      resolvedModel,
+      modelRows,
+      yield* geoStats.listDaily({
+        model: resolvedModel,
+        provider: resolveModelProvider(resolvedModel, normalized, provider),
+      }),
+      provider,
+    )
+  },
+)
+
+export const getStatsLabData: (provider: string) => Effect.Effect<StatsLabData | null, DatabaseError, ModelStatRepo> =
+  Effect.fn("StatsLab.getData")(function* (provider) {
+    const modelStats = yield* ModelStatRepo
+    return buildStatsLabData(provider, yield* modelStats.listDaily())
+  })
+
 function buildStatsHomeData(
   modelRows: ModelStatMetric[],
   providerRows: ProviderStatMetric[],
@@ -111,6 +207,119 @@ function buildStatsHomeData(
   }
 }
 
+function buildStatsModelData(
+  modelParam: string,
+  modelRows: ModelStatMetric[],
+  geoRows: GeoStatMetric[],
+  providerParam?: string,
+): StatsModelData | null {
+  const normalized = modelRows.flatMap(normalizeStatRow)
+  const geo = geoRows.flatMap(normalizeGeoRow)
+  if (normalized.length === 0) return null
+
+  const model = resolveModelName(modelParam, normalized, providerParam)
+  if (!model) return null
+
+  const modelScopedRows = normalized.filter((row) => row.model === model)
+  const earliest = Math.min(...normalized.map((row) => row.periodStart))
+  const latest = Math.max(...normalized.map((row) => row.periodStart))
+  const latestUpdate = Math.max(...modelScopedRows.map((row) => row.updatedAt))
+  const window = getWindow("2M", earliest, latest)
+  const currentRows = rowsForProduct(modelScopedRows, "All Users", window.start, window.end)
+  const previousRows = rowsForProduct(modelScopedRows, "All Users", window.previousStart, window.previousEnd)
+  const current = combineRowsForModel(model, currentRows)
+  const previous = combineRowsForModel(model, previousRows)
+  const peers = aggregateByModelName(rowsForProduct(normalized, "All Users", window.start, window.end))
+    .filter((item) => item.totalTokens > 0)
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))
+  const previousPeers = aggregateByModelName(
+    rowsForProduct(normalized, "All Users", window.previousStart, window.previousEnd),
+  )
+    .filter((item) => item.totalTokens > 0)
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))
+  const rank = Math.max(1, peers.findIndex((item) => item.model === model) + 1)
+  const previousRankIndex = previousPeers.findIndex((item) => item.model === model)
+  const totalTokens = peers.reduce((sum, item) => sum + item.totalTokens, 0)
+
+  return {
+    updatedAt: Number.isFinite(latestUpdate) ? new Date(latestUpdate).toISOString() : null,
+    model,
+    slug: modelSlug(model),
+    provider: current.provider,
+    author: formatProvider(current.provider),
+    rank,
+    previousRank: previousRankIndex >= 0 ? previousRankIndex + 1 : null,
+    totalModels: peers.length,
+    tokenShare: totalTokens > 0 ? round((current.totalTokens / totalTokens) * 100, 2) : 0,
+    tokenChange: percentChange(current.totalTokens, previous.totalTokens),
+    totals: {
+      sessions: current.sessions,
+      tokens: current.totalTokens,
+      cost: round(microcentsToDollars(current.totalCostMicrocents), 2),
+      tokensPerSession: current.sessions > 0 ? Math.round(current.totalTokens / current.sessions) : 0,
+      costPerSession:
+        current.sessions > 0 ? round(microcentsToDollars(current.totalCostMicrocents) / current.sessions, 4) : 0,
+      costPerMillion: costPerMillion(current.totalCostMicrocents, current.totalTokens),
+      cacheRatio:
+        current.inputTokens + current.cacheReadTokens > 0
+          ? round((current.cacheReadTokens / (current.inputTokens + current.cacheReadTokens)) * 100, 1)
+          : 0,
+    },
+    usage: buildModelUsage(currentRows, window, "2M"),
+    tokenMix: buildModelTokenMix(current),
+    productMix: buildModelProductMix(modelScopedRows, window, current),
+    country: createRangeRecord((range) => buildCountryStats(geo, getWindow(range, earliest, latest))),
+    peers: buildModelPeers(peers, rank, totalTokens),
+  }
+}
+
+function buildStatsLabData(providerParam: string, modelRows: ModelStatMetric[]): StatsLabData | null {
+  const normalized = modelRows.flatMap(normalizeStatRow)
+  if (normalized.length === 0) return null
+
+  const provider = resolveProviderName(providerParam, normalized)
+  if (!provider) return null
+
+  const providerRows = normalized.filter((row) => providerMatches(row.provider, provider))
+  if (providerRows.length === 0) return null
+
+  const earliest = Math.min(...normalized.map((row) => row.periodStart))
+  const latest = Math.max(...normalized.map((row) => row.periodStart))
+  const latestUpdate = Math.max(...providerRows.map((row) => row.updatedAt))
+  const window = getWindow("2M", earliest, latest)
+  const currentRows = rowsForProduct(providerRows, "All Users", window.start, window.end)
+  const previousRows = rowsForProduct(providerRows, "All Users", window.previousStart, window.previousEnd)
+  const current = combineRowsForModel("", currentRows)
+  const previous = combineRowsForModel("", previousRows)
+  const allCurrent = aggregateByModel(rowsForProduct(normalized, "All Users", window.start, window.end))
+  const totalTokens = allCurrent.reduce((sum, item) => sum + item.totalTokens, 0)
+  const models = aggregateByModel(currentRows)
+    .filter((item) => item.totalTokens > 0)
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))
+
+  return {
+    updatedAt: Number.isFinite(latestUpdate) ? new Date(latestUpdate).toISOString() : null,
+    provider,
+    author: formatProvider(provider),
+    tokenShare: totalTokens > 0 ? round((current.totalTokens / totalTokens) * 100, 2) : 0,
+    tokenChange: percentChange(current.totalTokens, previous.totalTokens),
+    totals: {
+      sessions: current.sessions,
+      tokens: current.totalTokens,
+      models: models.length,
+    },
+    usage: buildModelUsage(currentRows, window, "2M"),
+    models: models.map((item) => ({
+      model: item.model,
+      provider: item.provider,
+      author: formatProvider(item.provider),
+      tokens: item.totalTokens,
+      share: current.totalTokens > 0 ? round((item.totalTokens / current.totalTokens) * 100, 2) : 0,
+      slug: modelSlug(item.model),
+    })),
+  }
+}
+
 function emptyStatsHomeData(): StatsHomeData {
   return {
     updatedAt: null,
@@ -160,6 +369,7 @@ function buildLeaderboard(rows: StatMetricRow[], product: UsageProduct, window:
     .slice(0, 18)
     .map((item, index) => ({
       model: item.model,
+      provider: item.provider,
       author: formatProvider(item.provider),
       tokens: Math.round(item.totalTokens / 1_000_000_000),
       change: percentChange(item.totalTokens, previous.get(modelKey(item.provider, item.model)) ?? 0),
@@ -261,6 +471,66 @@ function buildSessionCost(rows: StatMetricRow[], product: TokenProduct, window:
     .slice(0, 17)
 }
 
+function buildModelUsage(rows: StatMetricRow[], window: DateWindow, range: UsageRange) {
+  return createBuckets(window, range).map((bucket) => {
+    const aggregate = combineRowsForModel(
+      "",
+      rows.filter((row) => row.periodStart >= bucket.start && row.periodStart < bucket.end),
+    )
+    return {
+      date: bucket.label,
+      tokens: aggregate.totalTokens,
+      sessions: aggregate.sessions,
+      cost: round(microcentsToDollars(aggregate.totalCostMicrocents), 2),
+    }
+  })
+}
+
+function buildModelTokenMix(aggregate: ModelAggregate): ModelMixEntry[] {
+  const items = [
+    { label: "Input", tokens: aggregate.inputTokens },
+    { label: "Output", tokens: aggregate.outputTokens },
+    { label: "Reasoning", tokens: aggregate.reasoningTokens },
+    { label: "Cached", tokens: aggregate.cacheReadTokens },
+  ].filter((item) => item.tokens > 0)
+  const total = items.reduce((sum, item) => sum + item.tokens, 0)
+  if (total === 0) return []
+  return items.map((item) => ({ ...item, share: round((item.tokens / total) * 100, 1) }))
+}
+
+function buildModelProductMix(
+  rows: StatMetricRow[],
+  window: DateWindow,
+  fallback: ModelAggregate,
+): ModelProductEntry[] {
+  const products = ["Go", "Zen", "Enterprise"] as const
+  const items = products.flatMap((product) => {
+    const aggregate = combineRowsForModel(
+      fallback.model,
+      rows.filter((row) => row.tier === product && row.periodStart >= window.start && row.periodStart < window.end),
+    )
+    if (aggregate.totalTokens === 0) return []
+    return [{ product, tokens: aggregate.totalTokens, sessions: aggregate.sessions }]
+  })
+  const total = items.reduce((sum, item) => sum + item.tokens, 0)
+  if (total > 0) return items.map((item) => ({ ...item, share: round((item.tokens / total) * 100, 1) }))
+  if (fallback.totalTokens === 0) return []
+  return [{ product: "All Users", tokens: fallback.totalTokens, sessions: fallback.sessions, share: 100 }]
+}
+
+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) => ({
+    model: item.model,
+    provider: item.provider,
+    author: formatProvider(item.provider),
+    rank: start + index + 1,
+    tokens: item.totalTokens,
+    share: totalTokens > 0 ? round((item.totalTokens / totalTokens) * 100, 2) : 0,
+    slug: modelSlug(item.model),
+  }))
+}
+
 function rowsForProduct<T extends { periodStart: number; tier: string }>(
   rows: T[],
   product: UsageProduct,
@@ -285,6 +555,15 @@ function aggregateByModel(rows: StatMetricRow[]) {
   )
 }
 
+function aggregateByModelName(rows: StatMetricRow[]) {
+  return Object.values(
+    rows.reduce<Record<string, ModelAggregate>>((result, row) => {
+      result[row.model] = combineModelAggregate(result[row.model], row)
+      return result
+    }, {}),
+  )
+}
+
 function aggregateByProvider(rows: ProviderMetricRow[]) {
   return Object.values(
     rows.reduce<Record<string, { provider: string; tokens: number }>>((result, row) => {
@@ -310,6 +589,27 @@ function aggregateByCountry(rows: GeoMetricRow[]) {
   )
 }
 
+function combineRowsForModel(model: string, rows: StatMetricRow[]): ModelAggregate {
+  const aggregate = rows.reduce<ModelAggregate | undefined>(
+    (result, row) => combineModelAggregate(result, row),
+    undefined,
+  )
+  if (aggregate) return { ...aggregate, model: model || aggregate.model }
+  return {
+    model,
+    provider: "unknown",
+    sessions: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    reasoningTokens: 0,
+    cacheReadTokens: 0,
+    totalTokens: 0,
+    inputCostMicrocents: 0,
+    outputCostMicrocents: 0,
+    totalCostMicrocents: 0,
+  }
+}
+
 function combineModelAggregate(current: ModelAggregate | undefined, row: StatMetricRow): ModelAggregate {
   return {
     model: row.model,
@@ -501,6 +801,47 @@ function formatProvider(provider: string) {
   return known[normalized] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase())
 }
 
+function resolveModelName(modelParam: string, rows: StatMetricRow[], providerParam?: string) {
+  const input = modelParam.trim()
+  if (!input) return undefined
+  const normalizedInput = input.toLowerCase()
+  const inputSlug = modelSlug(input)
+  const candidates = providerParam
+    ? aggregateByModel(rows).filter((item) => providerMatches(item.provider, providerParam))
+    : aggregateByModelName(rows)
+  return candidates
+    .filter((item) => item.model.toLowerCase() === normalizedInput || modelSlug(item.model) === inputSlug)
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))[0]?.model
+}
+
+function resolveModelProvider(model: string, rows: StatMetricRow[], providerParam?: string) {
+  return aggregateByModel(rows)
+    .filter((item) => item.model === model && (!providerParam || providerMatches(item.provider, providerParam)))
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.provider.localeCompare(b.provider))[0]?.provider
+}
+
+function providerMatches(provider: string, providerParam: string) {
+  return modelSlug(provider) === modelSlug(providerParam)
+}
+
+function resolveProviderName(providerParam: string, rows: StatMetricRow[]) {
+  const input = providerParam.trim()
+  if (!input) return undefined
+  const inputSlug = modelSlug(input)
+  return aggregateByModel(rows)
+    .filter((item) => modelSlug(item.provider) === inputSlug)
+    .toSorted((a, b) => b.totalTokens - a.totalTokens || a.provider.localeCompare(b.provider))[0]?.provider
+}
+
+export function modelSlug(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-")
+}
+
 function modelKey(provider: string, model: string) {
   return `${provider}\u0000${model}`
 }