fix(opencode): match complete retry messages

packages/opencode/src/session/retry.ts

@@ -28,13 +28,10 @@ export const RETRY_BACKOFF_FACTOR = 2
 export const RETRY_MAX_DELAY_NO_HEADERS = 30_000 // 30 seconds
 export const RETRY_MAX_DELAY = 2_147_483_647 // max 32-bit signed integer for setTimeout
 
-const RETRYABLE_MESSAGE_PATTERNS = [
-  /429|500|502|503|504|524/i,
-  /rate increased too quickly|rate limit|rate-limit|rate_limit|too many requests/i,
-  /overloaded|service unavailable|service_unavailable|service-unavailable|internal error|internal_error|internal server error|server error|server_error|server-error|provider returned error|provider_returned_error|provider-returned-error/i,
-  /terminated|fetch failed|failed to fetch|network error|upstream connect|connection error|connection refused|connection lost|socket connection was closed|socket hang up|reset before headers|getaddrinfo|enotfound|eai_again|econnrefused|econnreset|etimedout/i,
-  /^timeout$|\b(?:request|response|connection|network|stream|read) (?:timeout|timed out|time out)\b/i,
-  /try your request again|retry your request|resource exhausted|resource_exhausted/i,
+const RETRYABLE_MESSAGE = [
+  /\b(?:server[_\s-]?error|internal[_\s-]?error|service[_\s-]?unavailable|overloaded|too many requests|rate increased too quickly|rate[_\s-]?limit)\b|\bprovider returned error\b/i,
+  /\b(?:fetch failed|network error|upstream connect|connection (?:error|refused|lost)|socket connection was closed|socket hang up|reset before headers|getaddrinfo|ENOTFOUND|EAI_AGAIN)\b|^timeout$|\b(?:request|response|connection|network|stream|read) (?:timeout|timed? out)\b/i,
+  /\b(?:resource[_\s-]?exhausted|please retry your request|you can retry your request|try your request again)\b/i,
 ]
 
 function cap(ms: number) {
@@ -77,17 +74,13 @@ export function delay(attempt: number, error?: SessionV1.APIError) {
 export function retryable(error: Err, provider: string) {
   // context overflow errors should not be retried
   if (SessionV1.ContextOverflowError.isInstance(error)) return undefined
+  const msg = isRecord(error.data) ? error.data.message : undefined
+  const retryableMessage = isRetryableMessage(msg)
   if (SessionV1.APIError.isInstance(error)) {
     const status = error.data.statusCode
     // 5xx errors are transient server failures and should always be retried,
     // even when the provider SDK doesn't explicitly mark them as retryable.
-    if (
-      !error.data.isRetryable &&
-      !(status !== undefined && status >= 500) &&
-      !matchesRetryableMessage(error.data.message) &&
-      !matchesRetryableMessage(error.data.responseBody)
-    )
-      return undefined
+    if (!error.data.isRetryable && !(status !== undefined && status >= 500) && !retryableMessage) return undefined
     if (error.data.responseBody?.includes("FreeUsageLimitError")) {
       return {
         message: GO_UPSELL_MESSAGE,
@@ -137,17 +130,26 @@ export function retryable(error: Err, provider: string) {
     return { message: error.data.message.includes("Overloaded") ? "Provider is overloaded" : error.data.message }
   }
 
-  const message = isRecord(error.data) ? error.data.message : undefined
-  if (typeof message !== "string") return undefined
-  const lower = message.toLowerCase()
-  if (lower.includes("too_many_requests")) return { message: "Too Many Requests" }
-  if (lower.includes("exhausted") || lower.includes("unavailable")) return { message: "Provider is overloaded" }
-  if (matchesRetryableMessage(message)) return { message }
+  const json = parseJSON(msg)
+  if (json && typeof json === "object") {
+    const code = typeof json.code === "string" ? json.code : ""
+    if (json.type === "error" && json.error?.type === "too_many_requests") {
+      return { message: "Too Many Requests" }
+    }
+    if (code.includes("exhausted") || code.includes("unavailable")) {
+      return { message: "Provider is overloaded" }
+    }
+    if (json.type === "error" && typeof json.error?.code === "string" && json.error.code.includes("rate_limit")) {
+      return { message: "Rate Limited" }
+    }
+  }
+  if (retryableMessage && typeof msg === "string") return { message: msg }
   return undefined
 }
 
-function matchesRetryableMessage(value: unknown) {
-  return typeof value === "string" && RETRYABLE_MESSAGE_PATTERNS.some((pattern) => pattern.test(value))
+function isRetryableMessage(input: unknown) {
+  if (typeof input !== "string") return false
+  return RETRYABLE_MESSAGE.some((pattern) => pattern.test(input))
 }
 
 function str(value: unknown) {

packages/opencode/test/session/retry.test.ts

@@ -118,21 +118,16 @@ describe("session.retry.delay", () => {
 })
 
 describe("session.retry.retryable", () => {
-  test("retries serialized too_many_requests messages", () => {
+  test("maps too_many_requests json messages", () => {
     const error = wrap(JSON.stringify({ type: "error", error: { type: "too_many_requests" } }))
     expect(SessionRetry.retryable(error, retryProvider)).toEqual({ message: "Too Many Requests" })
   })
 
-  test("retries serialized overloaded provider codes", () => {
+  test("maps overloaded provider codes", () => {
     const error = wrap(JSON.stringify({ code: "resource_exhausted" }))
     expect(SessionRetry.retryable(error, retryProvider)).toEqual({ message: "Provider is overloaded" })
   })
 
-  test("retries serialized rate_limit messages", () => {
-    const message = JSON.stringify({ type: "error", error: { code: "rate_limit_exceeded" } })
-    expect(SessionRetry.retryable(wrap(message), retryProvider)).toEqual({ message })
-  })
-
   test("does not retry unknown json messages", () => {
     const error = wrap(JSON.stringify({ error: { message: "no_kv_space" } }))
     expect(SessionRetry.retryable(error, retryProvider)).toBeUndefined()
@@ -169,42 +164,41 @@ describe("session.retry.retryable", () => {
   })
 
   test.each([
+    "server_error",
     "Internal server error",
-    "internal error",
-    "server-error",
+    "Service Unavailable",
+    "Provider is overloaded",
     "Provider returned error",
-    "provider-returned-error",
-    "terminated",
     "fetch failed",
-    "connection refused",
-    "connect ECONNREFUSED",
-    "request ETIMEDOUT",
-    "failed to fetch",
-    "EAI_AGAIN",
-    "response timed out",
-    "Please retry your request",
-    "try your request again",
-    "upstream returned status 524",
-  ])("retries matching API error text: %s", (message) => {
-    expect(SessionRetry.retryable(wrap(message), retryProvider)).toEqual({ message })
+    "connection timed out",
+    "socket hang up",
+    "getaddrinfo ENOTFOUND api.example.com",
+    "ResourceExhausted",
+    "You can retry your request",
+  ])("retries transient plain text errors: %s", (msg) => {
+    expect(SessionRetry.retryable(wrap(msg), retryProvider)).toEqual({ message: msg })
   })
 
-  test("retries hyphenated service-unavailable errors", () => {
-    expect(SessionRetry.retryable(wrap("service-unavailable"), retryProvider)).toEqual({
-      message: "Provider is overloaded",
-    })
+  test("retries transient messages nested in json", () => {
+    const msg = JSON.stringify({ type: "error", error: { code: "server_error", message: "xxx" } })
+    expect(SessionRetry.retryable(wrap(msg), retryProvider)).toEqual({ message: msg })
   })
 
-  test("matches retryable API response bodies", () => {
-    const error = Schema.decodeUnknownSync(SessionV1.APIError.Schema)(
-      new SessionV1.APIError({
-        message: "Request failed",
-        isRetryable: false,
-        statusCode: 400,
-        responseBody: JSON.stringify({ error: { message: "upstream connection refused" } }),
-      }).toObject(),
-    )
-    expect(SessionRetry.retryable(error, retryProvider)).toEqual({ message: "Request failed" })
+  test("retries transient API errors even when the SDK does not", () => {
+    const error = new SessionV1.APIError({ message: "server_error", isRetryable: false }).toObject()
+    expect(SessionRetry.retryable(error, retryProvider)).toEqual({ message: "server_error" })
+  })
+
+  test.each(["Observer error", "Unterminated string in JSON", "Invalid timeout option"])(
+    "does not retry near-miss errors: %s",
+    (msg) => {
+      expect(SessionRetry.retryable(wrap(msg), retryProvider)).toBeUndefined()
+    },
+  )
+
+  test("retries transient messages in arbitrary json fields", () => {
+    const msg = JSON.stringify({ detail: "rate limit exceeded" })
+    expect(SessionRetry.retryable(wrap(msg), retryProvider)).toEqual({ message: msg })
   })
 
   test("retries transport timeout errors", () => {

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

@@ -1,17 +1,23 @@
 import { 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-50m.json?raw"
 import {
   getStatsModelData,
   type CountryEntry,
   type ModelPeerEntry,
   type ModelUsagePoint,
   type StatsModelData,
+  type UsageRange,
 } from "@opencode-ai/stats-core/domain/home"
 import { createAsync, query, useParams } from "@solidjs/router"
 import { createMemo, createSignal, createUniqueId, 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 { LocaleLinks } from "../../component/locale-links"
 import { useI18n } from "../../context/i18n"
 import { useLanguage } from "../../context/language"
@@ -19,10 +25,10 @@ import { localizedUrl } from "../../lib/language"
 import {
   findModelCatalogEntry,
   formatCatalogLabName,
-  loadModelCatalog,
+  getModelCatalog,
+  type ModelCatalog,
   type ModelCatalogEntry,
 } from "../model-catalog"
-import { geoMapHeight, geoMapWidth, worldBorderPath, worldCountryMarkers, worldCountryPaths } from "../geo-map"
 import { SectionHeading } from "../section-heading"
 import { runStatsEffect } from "../../stats-runtime"
 import { setStatsPageCacheHeaders } from "../stats-cache"
@@ -45,41 +51,45 @@ import {
 } from "../stats-shell"
 
 const statsUnfurlPath = "banner.png"
+const geoMapWidth = 960
+const geoMapHeight = 430
 const shortMonths = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] as const
 
 type IsoCountryCode = readonly [string, string, string]
-type ModelCatalogOption = Pick<ModelCatalogEntry, "id" | "lab" | "slug" | "name">
-type ModelPageCatalog = {
-  entry: ModelCatalogEntry | null
-  labs: { id: string; name: string }[]
-  labModels: ModelCatalogOption[]
-}
-type StatsModelPageData = Omit<StatsModelData, "country"> & { country: CountryEntry[] }
-type ModelPageData = { catalog: ModelPageCatalog; stats: StatsModelPageData | null }
+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) ?? "",
+  marker: geoCountryMarker(country),
+}))
+const worldBorderPath = worldPath(mesh(worldTopology, worldCountryGeometries, (a, b) => a !== b)) ?? ""
 
-const getModelPageData = query(async (labParam: string, modelParam: string) => {
+const getModelData = query(async (lab: string, model: string) => {
   "use server"
-  const catalog = await loadModelCatalog()
-  const entry = findModelCatalogEntry(catalog, modelParam, labParam) ?? null
-  const lab = entry?.lab ?? labParam
-  const model = entry?.slug ?? modelParam
-  const stats = lab && model ? await runStatsEffect(getStatsModelData(model, lab)) : null
-  return {
-    catalog: {
-      entry,
-      labs: catalog.labs.map((item) => ({ id: item.id, name: item.name })),
-      labModels:
-        catalog.labs
-          .find((item) => item.id === (entry?.lab ?? providerSlug(labParam)))
-          ?.models.map((item) => ({ id: item.id, lab: item.lab, slug: item.slug, name: item.name })) ?? [],
-    },
-    stats: stats ? { ...stats, country: stats.country["2M"] } : null,
-  } satisfies ModelPageData
-}, "getStatsModelPageData")
+  return runStatsEffect(getStatsModelData(model, lab))
+}, "getStatsModelData")
 
 export default function StatsModel() {
   const i18n = useI18n()
@@ -89,9 +99,18 @@ export default function StatsModel() {
   const params = useParams()
   const labParam = createMemo(() => params.lab ?? "")
   const modelParam = createMemo(() => params.model ?? "")
-  const page = createAsync(() => getModelPageData(labParam(), modelParam()))
-  const catalogEntry = createMemo(() => page()?.catalog.entry)
-  const stats = createMemo(() => page()?.stats)
+  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() ?? i18n.t("model.fallback"))
@@ -160,13 +179,13 @@ export default function StatsModel() {
       <Header githubStars={githubStars() ?? "150K"} links={modelHeaderLinks()} brandHref={import.meta.env.BASE_URL} />
       <div data-component="container">
         <div data-component="content">
-          <Show when={page() !== undefined} fallback={<ModelLoading />}>
+          <Show when={catalogEntry() || stats() !== undefined} fallback={<ModelLoading />}>
             <Show when={catalogEntry() || stats()} fallback={<ModelNotFound lab={labParam()} model={modelParam()} />}>
               <>
                 <ModelHero
                   data={stats() ?? null}
                   catalog={catalogEntry() ?? null}
-                  catalogData={page()?.catalog ?? null}
+                  catalogData={catalog() ?? null}
                   labName={labName()}
                 />
                 <ModelOverview catalog={catalogEntry() ?? null} />
@@ -174,10 +193,10 @@ export default function StatsModel() {
                 <ModelUsageSection data={stats() ?? null} />
                 <ModelUniqueUsersSection data={stats() ?? null} />
                 <ModelEfficiencySection data={stats() ?? null} catalog={catalogEntry() ?? null} />
-                <ModelGeoBreakdownSection data={stats()?.country ?? []} />
+                <ModelGeoBreakdownSection data={stats()?.country ?? emptyCountryRecord()} />
                 <ModelPeersSection data={stats() ?? null} />
                 <ComparisonCardsSection
-                  pairs={modelComparisonPairs(page()?.catalog.labModels, catalogEntry() ?? null, stats() ?? null)}
+                  pairs={modelComparisonPairs(catalog(), catalogEntry() ?? null, stats() ?? null)}
                   title="Compare This Model"
                   description="Other models to compare with this one."
                   variant="featured"
@@ -252,9 +271,9 @@ function ModelNotFound(props: { lab: string; model: string }) {
 }
 
 function ModelHero(props: {
-  data: StatsModelPageData | null
+  data: StatsModelData | null
   catalog: ModelCatalogEntry | null
-  catalogData: ModelPageCatalog | null
+  catalogData: ModelCatalog | null
   labName: string
 }) {
   const i18n = useI18n()
@@ -263,7 +282,9 @@ function ModelHero(props: {
   const modelName = () => props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback")
   const weights = () => props.catalog?.weights[0]
   const labs = () => props.catalogData?.labs ?? []
-  const labModels = () => props.catalogData?.labModels ?? (props.catalog ? [props.catalog] : [])
+  const labModels = () =>
+    props.catalogData?.labs.find((lab) => lab.id === providerSlug(labId()))?.models ??
+    (props.catalog ? [props.catalog] : [])
   return (
     <section id="overview" data-section="model-hero">
       <nav data-component="model-hero-breadcrumb" aria-label="Data breadcrumb">
@@ -382,7 +403,7 @@ function ModelHeroActionIcon(props: { kind: "weights" | "compare" }) {
   )
 }
 
-function ModelHeroSparkline(props: { data: StatsModelPageData }) {
+function ModelHeroSparkline(props: { data: StatsModelData }) {
   const values = () => props.data.usage.slice(-14).map((point) => point.tokens)
   return (
     <span data-slot="model-hero-sparkline" aria-hidden="true">
@@ -445,7 +466,7 @@ function ModelOverview(props: { catalog: ModelCatalogEntry | null }) {
   )
 }
 
-function ModelMomentumSection(props: { data: StatsModelPageData | null }) {
+function ModelMomentumSection(props: { data: StatsModelData | null }) {
   const i18n = useI18n()
   const language = useLanguage()
   return (
@@ -484,7 +505,7 @@ function ModelMomentumSection(props: { data: StatsModelPageData | null }) {
   )
 }
 
-function MomentumChart(props: { data: StatsModelPageData; locale: string }) {
+function MomentumChart(props: { data: StatsModelData; locale: string }) {
   const chart = createMemo(() => momentumChart(props.data.usage, props.data.updatedAt))
   const changeState = createMemo(() => (props.data.tokenChange < 0 ? "negative" : "positive"))
   return (
@@ -541,7 +562,7 @@ function MomentumMetric(props: { label: string; value: string; watermark?: strin
   )
 }
 
-function ModelUsageSection(props: { data: StatsModelPageData | null }) {
+function ModelUsageSection(props: { data: StatsModelData | null }) {
   const i18n = useI18n()
   return (
     <ModelTrendSection
@@ -561,7 +582,7 @@ function ModelUsageSection(props: { data: StatsModelPageData | null }) {
   )
 }
 
-function ModelUniqueUsersSection(props: { data: StatsModelPageData | null }) {
+function ModelUniqueUsersSection(props: { data: StatsModelData | null }) {
   const i18n = useI18n()
   return (
     <ModelTrendSection
@@ -585,7 +606,7 @@ function ModelUniqueUsersSection(props: { data: StatsModelPageData | null }) {
 }
 
 function ModelTrendSection(props: {
-  data: StatsModelPageData | null
+  data: StatsModelData | null
   id: string
   title: string
   description: string
@@ -838,7 +859,7 @@ function ModelTrendSection(props: {
   )
 }
 
-function ModelEfficiencySection(props: { data: StatsModelPageData | null; catalog: ModelCatalogEntry | null }) {
+function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null }) {
   const i18n = useI18n()
   return (
     <section id="efficiency" data-section="model-panel">
@@ -889,11 +910,11 @@ function ModelEfficiencySection(props: { data: StatsModelPageData | null; catalo
   )
 }
 
-function ModelGeoBreakdownSection(props: { data: CountryEntry[] }) {
+function ModelGeoBreakdownSection(props: { data: Record<UsageRange, CountryEntry[]> }) {
   const i18n = useI18n()
   const language = useLanguage()
   const [activeCountry, setActiveCountry] = createSignal<string>()
-  const data = createMemo(() => props.data)
+  const data = createMemo(() => props.data["2M"])
   const countryById = createMemo(
     () =>
       new Map(
@@ -1010,30 +1031,31 @@ function GeoWorldMap(props: {
         </For>
       </g>
       <g data-slot="geo-country-markers">
-        <For each={worldCountryMarkers}>
+        <For each={worldCountryPaths}>
           {(country) => {
             const entry = () => props.countryById.get(country.id)
             return (
-              <Show when={entry()}>
-                <circle
-                  cx={country.marker.x}
-                  cy={country.marker.y}
-                  data-country-id={country.id}
-                  r={entry()?.country === props.activeCountry ? 3.4 : 2.4}
-                  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)
-                  }}
-                />
+              <Show when={country.marker && entry() ? country.marker : undefined}>
+                {(marker) => (
+                  <circle
+                    cx={marker().x}
+                    cy={marker().y}
+                    r={entry()?.country === props.activeCountry ? 3.4 : 2.4}
+                    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)
+                    }}
+                  />
+                )}
               </Show>
             )
           }}
@@ -1081,7 +1103,7 @@ function GeoCountryList(props: {
   )
 }
 
-function ModelPeersSection(props: { data: StatsModelPageData | null }) {
+function ModelPeersSection(props: { data: StatsModelData | null }) {
   const i18n = useI18n()
   return (
     <section id="peers" data-section="model-panel">
@@ -1150,9 +1172,9 @@ function ModelEmptyState(props: { title: string; description: string; compact?:
 }
 
 function modelComparisonPairs(
-  catalogModels: ModelCatalogOption[] | undefined,
+  catalog: ModelCatalog | undefined,
   catalogEntry: ModelCatalogEntry | null,
-  data: StatsModelPageData | null,
+  data: StatsModelData | null,
 ) {
   const current = modelComparisonRef(catalogEntry, data)
   if (!current) return []
@@ -1170,7 +1192,9 @@ function modelComparisonPairs(
       },
       detail: "Usage peer",
     }))
-  const catalogPairs = (catalogEntry ? (catalogModels ?? []) : [])
+  const catalogPairs = (
+    catalogEntry && catalog ? (catalog.labs.find((lab) => lab.id === catalogEntry.lab)?.models ?? []) : []
+  )
     .filter((model) => model.id !== catalogEntry?.id)
     .slice(0, 3)
     .map((model) => ({
@@ -1183,7 +1207,7 @@ function modelComparisonPairs(
 
 function modelComparisonRef(
   catalogEntry: ModelCatalogEntry | null,
-  data: StatsModelPageData | null,
+  data: StatsModelData | null,
 ): ComparisonModelRef | undefined {
   if (catalogEntry) return modelRefFromCatalog(catalogEntry)
   if (!data) return undefined
@@ -1203,10 +1227,31 @@ function getProviderIconId(author: string) {
   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 geoCountryMarker(country: (typeof worldCountries.features)[number]) {
+  const bounds = worldPath.bounds(country)
+  const [x, y] = worldPath.centroid(country)
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined
+  if (bounds[1][0] - bounds[0][0] >= 3 && bounds[1][1] - bounds[0][1] >= 3) return undefined
+  return { x, y }
+}
+
 function formatCountryName(country: string, locale: string, i18n: ReturnType<typeof useI18n>) {
   const code = country.toUpperCase()
   if (code === "ZZ") return i18n.t("home.unknown")
@@ -1463,7 +1508,7 @@ function formatSparklinePoint(value: number) {
   return Number(value.toFixed(2)).toString()
 }
 
-function formatModelRankMoveLabel(data: StatsModelPageData, i18n: ReturnType<typeof useI18n>) {
+function formatModelRankMoveLabel(data: StatsModelData, i18n: ReturnType<typeof useI18n>) {
   if (data.rank === null) return i18n.t("model.noUsageLastWeek")
   if (data.previousRank === null) return i18n.t("model.newThisWeek")
   const change = data.previousRank - data.rank

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

@@ -6,6 +6,7 @@ import {
   type LabUsageModelEntry,
   type MarketDay,
   type ModelUsagePoint,
+  type StatsHomeData,
   type StatsLabData,
 } from "@opencode-ai/stats-core/domain/home"
 import { createAsync, query, useParams } from "@solidjs/router"
@@ -19,7 +20,7 @@ import {
   catalogSlug,
   findModelCatalogLab,
   formatCatalogLabName,
-  loadModelCatalog,
+  getModelCatalog,
   type ModelCatalogEntry,
   type ModelCatalogLab,
 } from "../model-catalog"
@@ -41,33 +42,15 @@ import {
 
 const statsUnfurlPath = "banner.png"
 
-type RelatedCatalogLab = Pick<ModelCatalogLab, "id" | "name" | "description"> & {
-  models: Pick<ModelCatalogEntry, "name">[]
-}
-
-type LabPageData = {
-  lab: ModelCatalogLab | null
-  labs: RelatedCatalogLab[]
-  market: MarketDay[]
-  stats: StatsLabData | null
-}
-
-const getLabPageData = query(async (labParam: string) => {
+const getLabData = query(async (lab: string) => {
   "use server"
-  const [catalog, home] = await Promise.all([loadModelCatalog(), runStatsEffect(getStatsHomeData())])
-  const lab = findModelCatalogLab(catalog, labParam) ?? null
-  return {
-    lab,
-    labs: catalog.labs.map((entry) => ({
-      id: entry.id,
-      name: entry.name,
-      description: entry.description,
-      models: entry.models.map((model) => ({ name: model.name })),
-    })),
-    market: home.market["2M"],
-    stats: lab ? await runStatsEffect(getStatsLabData(lab.id)) : null,
-  } satisfies LabPageData
-}, "getStatsLabPageData")
+  return runStatsEffect(getStatsLabData(lab))
+}, "getStatsLabData")
+
+const getHomeData = query(async () => {
+  "use server"
+  return runStatsEffect(getStatsHomeData())
+}, "getStatsHomeData")
 
 type LabModelTooltipState = {
   model: ModelCatalogEntry
@@ -84,9 +67,19 @@ export default function StatsLab() {
   setStatsPageCacheHeaders(event?.response.headers)
   const params = useParams()
   const labParam = createMemo(() => params.lab ?? "")
-  const page = createAsync(() => getLabPageData(labParam()))
-  const lab = createMemo(() => page()?.lab)
-  const stats = createMemo(() => page()?.stats)
+  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 homeStats = createAsync((): Promise<StatsHomeData | undefined> => getHomeData())
   const githubStars = createAsync(() => getGitHubStars())
   const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
   const labName = createMemo(() => lab()?.name ?? formatCatalogLabName(labParam()))
@@ -144,18 +137,18 @@ export default function StatsLab() {
       <Header githubStars={githubStars() ?? "150K"} links={labHeaderLinks()} brandHref={import.meta.env.BASE_URL} />
       <div data-component="container">
         <div data-component="content">
-          <Show when={page() !== undefined} fallback={<LabLoading />}>
-            <Show when={lab()} fallback={<LabNotFound lab={labParam()} labs={page()?.labs ?? []} />}>
+          <Show when={catalog() !== undefined} fallback={<LabLoading />}>
+            <Show when={lab()} fallback={<LabNotFound lab={labParam()} labs={catalog()?.labs ?? []} />}>
               {(data) => (
                 <>
-                  <LabHero lab={data()} labs={page()?.labs ?? []} />
+                  <LabHero lab={data()} labs={catalog()?.labs ?? []} />
                   <LabOverview lab={data()} data={stats() ?? null} />
                   <LabUsageSection lab={data()} data={stats() ?? null} />
                   <LabModelsSection lab={data()} usage={stats()?.models ?? []} />
                   <LabRelatedSection
                     lab={data()}
-                    labs={page()?.labs ?? []}
-                    market={page()?.market ?? []}
+                    labs={catalog()?.labs ?? []}
+                    market={homeStats()?.market["2M"] ?? []}
                   />
                   <ComparisonCardsSection
                     pairs={labComparisonPairs(data(), stats()?.models ?? [])}
@@ -189,7 +182,7 @@ function LabLoading() {
   )
 }
 
-function LabNotFound(props: { lab: string; labs: RelatedCatalogLab[] }) {
+function LabNotFound(props: { lab: string; labs: ModelCatalogLab[] }) {
   const i18n = useI18n()
   const labName = () => formatCatalogLabName(props.lab)
   return (
@@ -201,7 +194,7 @@ function LabNotFound(props: { lab: string; labs: RelatedCatalogLab[] }) {
   )
 }
 
-function LabHero(props: { lab: ModelCatalogLab; labs: RelatedCatalogLab[] }) {
+function LabHero(props: { lab: ModelCatalogLab; labs: ModelCatalogLab[] }) {
   return (
     <section id="overview" data-section="lab-hero">
       <LabHeroBreadcrumb label={props.lab.name} labs={props.labs} />
@@ -210,7 +203,7 @@ function LabHero(props: { lab: ModelCatalogLab; labs: RelatedCatalogLab[] }) {
   )
 }
 
-function LabHeroBreadcrumb(props: { label: string; labs?: RelatedCatalogLab[] }) {
+function LabHeroBreadcrumb(props: { label: string; labs?: ModelCatalogLab[] }) {
   const language = useLanguage()
   const labs = () => props.labs ?? []
   const current = () => labs().find((lab) => lab.name === props.label)
@@ -675,7 +668,7 @@ function LabModelTooltip(props: { state: LabModelTooltipState }) {
   )
 }
 
-function LabRelatedSection(props: { lab: ModelCatalogLab; labs: RelatedCatalogLab[]; market: MarketDay[] }) {
+function LabRelatedSection(props: { lab: ModelCatalogLab; labs: ModelCatalogLab[]; market: MarketDay[] }) {
   const related = createMemo(() => relatedLabs(props.lab, props.labs, props.market))
   return (
     <section id="related-labs" data-section="model-panel" data-variant="lab-related">
@@ -764,9 +757,9 @@ function labComparisonPairs(lab: ModelCatalogLab, usage: LabUsageModelEntry[]) {
   )
 }
 
-type RelatedLabEntry = { lab: RelatedCatalogLab; share: number; tokens: number }
+type RelatedLabEntry = { lab: ModelCatalogLab; share: number; tokens: number }
 
-function relatedLabs(current: ModelCatalogLab, labs: RelatedCatalogLab[], market: MarketDay[]): RelatedLabEntry[] {
+function relatedLabs(current: ModelCatalogLab, labs: ModelCatalogLab[], market: MarketDay[]): RelatedLabEntry[] {
   const stats = relatedLabStats(labs, market)
   return labs
     .filter((lab) => lab.id !== current.id)
@@ -775,8 +768,8 @@ function relatedLabs(current: ModelCatalogLab, labs: RelatedCatalogLab[], market
     .slice(0, 3)
 }
 
-function relatedLabStats(labs: RelatedCatalogLab[], market: MarketDay[]) {
-  const labByKey = new Map<string, RelatedCatalogLab>()
+function relatedLabStats(labs: ModelCatalogLab[], market: MarketDay[]) {
+  const labByKey = new Map<string, ModelCatalogLab>()
   labs.forEach((lab) => {
     labByKey.set(lab.id, lab)
     labByKey.set(catalogSlug(lab.name), lab)
@@ -801,7 +794,7 @@ function relatedLabStats(labs: RelatedCatalogLab[], market: MarketDay[]) {
   )
 }
 
-function labRelatedDescription(lab: RelatedCatalogLab) {
+function labRelatedDescription(lab: ModelCatalogLab) {
   return lab.description ?? ""
 }
 

packages/stats/app/src/routes/compare-cards.tsx

@@ -17,7 +17,7 @@ export type ComparisonPair = {
   description?: string
 }
 
-export function modelRefFromCatalog(entry: Pick<ModelCatalogEntry, "name" | "lab" | "slug">): ComparisonModelRef {
+export function modelRefFromCatalog(entry: ModelCatalogEntry): ComparisonModelRef {
   return {
     name: entry.name,
     lab: entry.lab,

packages/stats/app/src/routes/geo-map.ts

@@ -1,120 +0,0 @@
-import { geoEquirectangular, geoPath } from "d3-geo"
-import { feature, mesh } from "topojson-client"
-import countriesTopologySource from "world-atlas/countries-110m.json?raw"
-import type { FeatureCollection, GeometryObject, GeoJsonProperties } from "geojson"
-import type { GeometryCollection, Topology } from "topojson-specification"
-
-export const geoMapWidth = 960
-export const geoMapHeight = 430
-
-type WorldCountryProperties = GeoJsonProperties & { name?: string }
-type WorldTopology = Topology<{ countries: GeometryCollection<WorldCountryProperties> }>
-
-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)
-
-export const worldCountryPaths = worldCountries.features.map((country) => ({
-  id: String(country.id ?? "").padStart(3, "0"),
-  path: worldPath(country) ?? "",
-}))
-
-export const worldBorderPath = worldPath(mesh(worldTopology, worldCountryGeometries, (a, b) => a !== b)) ?? ""
-
-function geoCountryMarker(country: (typeof worldCountries.features)[number]) {
-  const bounds = worldPath.bounds(country)
-  const [x, y] = worldPath.centroid(country)
-  if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined
-  if (bounds[1][0] - bounds[0][0] >= 3 && bounds[1][1] - bounds[0][1] >= 3) return undefined
-  return { x, y }
-}
-
-// The 110m topology omits small regions. Geographic centroids keep those countries interactive without shipping 50m paths.
-const fallbackCountryMarkerCoordinates = [
-  ["016", -170.7179, -14.3046],
-  ["020", 1.5606, 42.542],
-  ["028", -61.7945, 17.2762],
-  ["048", 50.5425, 26.0417],
-  ["052", -59.5602, 13.1811],
-  ["060", -64.7558, 32.3131],
-  ["086", 72.4453, -7.3312],
-  ["092", -64.4704, 18.5276],
-  ["132", -23.9576, 15.9551],
-  ["136", -80.9129, 19.43],
-  ["174", 43.6844, -11.879],
-  ["184", -159.7871, -21.2195],
-  ["212", -61.3576, 15.4394],
-  ["234", -6.8808, 62.0527],
-  ["239", -36.4863, -54.4641],
-  ["248", 19.9528, 60.2153],
-  ["258", -144.8045, -14.7283],
-  ["296", -167.9217, 0.893],
-  ["308", -61.6818, 12.1174],
-  ["316", 144.767, 13.4406],
-  ["334", 73.52, -53.0872],
-  ["336", 12.4343, 41.9021],
-  ["344", 114.1143, 22.3983],
-  ["438", 9.5357, 47.1367],
-  ["446", 113.509, 22.2231],
-  ["462", 73.4573, 3.7316],
-  ["470", 14.405, 35.9215],
-  ["480", 57.5714, -20.2779],
-  ["492", 7.4073, 43.7526],
-  ["500", -62.1856, 16.7404],
-  ["520", 166.9326, -0.5189],
-  ["531", -68.9721, 12.1957],
-  ["533", -69.9827, 12.521],
-  ["534", -63.0572, 18.0509],
-  ["570", -169.8704, -19.0489],
-  ["574", 167.9497, -29.0516],
-  ["580", 145.6193, 15.8288],
-  ["583", 153.2966, 7.5361],
-  ["584", 170.3313, 7.015],
-  ["585", 134.4056, 7.286],
-  ["612", -128.3167, -24.3649],
-  ["652", -62.841, 17.8988],
-  ["654", -9.7009, -12.3548],
-  ["659", -62.6873, 17.2647],
-  ["660", -63.066, 18.2243],
-  ["662", -60.9696, 13.8946],
-  ["663", -63.0599, 18.0888],
-  ["666", -56.3037, 46.9187],
-  ["670", -61.2008, 13.2251],
-  ["674", 12.4594, 43.9415],
-  ["678", 6.7235, 0.4434],
-  ["690", 55.476, -4.6601],
-  ["702", 103.817, 1.359],
-  ["776", -174.7998, -20.4161],
-  ["796", -71.9734, 21.8312],
-  ["831", -2.5726, 49.4678],
-  ["832", -2.1272, 49.2181],
-  ["833", -4.5388, 54.224],
-  ["850", -64.8028, 17.9555],
-  ["876", -177.3469, -13.8898],
-  ["882", -172.1649, -13.7536],
-] as const
-
-export const worldCountryMarkers = [
-  ...worldCountries.features.flatMap((country) => {
-    const marker = geoCountryMarker(country)
-    return marker ? [{ id: String(country.id ?? "").padStart(3, "0"), marker }] : []
-  }),
-  ...fallbackCountryMarkerCoordinates.flatMap(([id, longitude, latitude]) => {
-    const marker = worldProjection([longitude, latitude])
-    return marker ? [{ id, marker: { x: marker[0], y: marker[1] } }] : []
-  }),
-]

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

@@ -1,7 +1,10 @@
 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-50m.json?raw"
 import ibmPlexMonoRegularLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2?url"
 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"
@@ -12,6 +15,7 @@ import {
   type CountryEntry,
   type LeaderboardEntry,
   type MarketDay,
+  type StatsHomeData,
   type SessionCostEntry,
   type TokenCostEntry,
   type UsagePoint,
@@ -19,13 +23,14 @@ import {
 import { createAsync, query } from "@solidjs/router"
 import { createEffect, createMemo, createSignal, For, onCleanup, 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 { runStatsEffect } from "../stats-runtime"
 import { LocaleLinks } from "../component/locale-links"
 import { useI18n } from "../context/i18n"
 import { useLanguage } from "../context/language"
 import { localizedUrl } from "../lib/language"
-import { findModelCatalogEntry, loadModelCatalog, type ModelCatalog } from "./model-catalog"
-import { geoMapHeight, geoMapWidth, worldBorderPath, worldCountryMarkers, worldCountryPaths } from "./geo-map"
+import { findModelCatalogEntry, getModelCatalog, type ModelCatalog } from "./model-catalog"
 import { SectionHeading } from "./section-heading"
 import { setStatsPageCacheHeaders } from "./stats-cache"
 import { ComparisonCardsSection, uniqueComparisonPairs, type ComparisonModelRef } from "./compare-cards"
@@ -40,6 +45,9 @@ import {
   type ThemePreference,
 } from "./stats-shell"
 
+const products = ["All Users", "Zen", "Go"] as const
+const tokenProducts = ["Zen", "Go"] as const
+const ranges = ["1D", "1W", "2W", "1M", "2M"] as const
 const comparisonPairIndexes = [
   [0, 1, "Top two by recent usage"],
   [0, 2, "Leader vs challenger"],
@@ -61,40 +69,60 @@ const usageColors = [
   "#ff6467",
 ]
 const marketColors = ["#ed6aff", "#a684ff", "#7c86ff", "#51a2ff", "#00d3f2", "#00d5be", "#00bc7d", "#9ae600", "#ffb900"]
+const geoMapWidth = 960
+const geoMapHeight = 430
 
-type UsageRange = "1D" | "1W" | "2W" | "1M" | "2M"
+type UsageProduct = (typeof products)[number]
+type TokenProduct = (typeof tokenProducts)[number]
+type UsageRange = (typeof ranges)[number]
 type IsoCountryCode = readonly [string, string, string]
+type WorldCountryProperties = GeoJsonProperties & { name?: string }
+type WorldTopology = Topology<{ countries: GeometryCollection<WorldCountryProperties> }>
 
-type StatsHomePageData = {
-  updatedAt: string | null
-  usage: UsagePoint[]
-  users: UsagePoint[]
-  leaderboard: LeaderboardEntry[]
-  market: MarketDay[]
-  tokenCost: TokenCostEntry[]
-  cacheRatio: CacheRatioEntry[]
-  sessionCost: SessionCostEntry[]
-  country: CountryEntry[]
+function productLabel(product: UsageProduct | TokenProduct, i18n: ReturnType<typeof useI18n>) {
+  if (product === "All Users") return i18n.t("product.allUsers")
+  if (product === "Zen") return i18n.t("product.zen")
+  return i18n.t("product.go")
+}
+
+function rangeLabel(range: UsageRange, i18n: ReturnType<typeof useI18n>) {
+  if (range === "1D") return i18n.t("range.1D")
+  if (range === "1W") return i18n.t("range.1W")
+  if (range === "2W") return i18n.t("range.2W")
+  if (range === "1M") return i18n.t("range.1M")
+  return i18n.t("range.2M")
 }
 
 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) ?? "",
+  marker: geoCountryMarker(country),
+}))
+const worldBorderPath = worldPath(mesh(worldTopology, worldCountryGeometries, (a, b) => a !== b)) ?? ""
 
 const getData = query(async () => {
   "use server"
-  const [stats, catalog] = await Promise.all([runStatsEffect(getStatsHomeData()), loadModelCatalog()])
-  return {
-    updatedAt: stats.updatedAt,
-    usage: stats.usage.Go["2M"],
-    users: stats.users.Go["2M"],
-    leaderboard: stats.leaderboard.Go["2M"],
-    market: stats.market["2M"],
-    tokenCost: priceTokenCostFromCatalog(stats.tokenCost.Go, catalog),
-    cacheRatio: stats.cacheRatio.Go,
-    sessionCost: stats.sessionCost.Go,
-    country: stats.country["2M"],
-  } satisfies StatsHomePageData
+  return runStatsEffect(getStatsHomeData())
 }, "getStatsHomeData")
 
 export default function StatsHome() {
@@ -105,6 +133,7 @@ export default function StatsHome() {
   const statsHomeUrl = localizedUrl(language.locale(), "/data/")
   const statsUnfurlUrl = new URL(statsUnfurlPath, localizedUrl("en", "/data/")).toString()
   const data = createAsync(() => getData())
+  const catalog = createAsync(() => getModelCatalog())
   const githubStars = createAsync(() => getGitHubStars())
   const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
   const updateThemePreference = (preference: ThemePreference) => {
@@ -156,12 +185,12 @@ export default function StatsHome() {
                 <TopModelsSection data={stats().usage} leaderboard={stats().leaderboard} />
                 <UniqueUsersSection data={stats().users} />
                 <SessionCostSection data={stats().sessionCost} />
-                <TokenCostSection data={stats().tokenCost} />
+                <TokenCostSection data={stats().tokenCost} catalog={catalog() ?? null} />
                 <CacheRatioSection data={stats().cacheRatio} />
                 <MarketShareSection data={stats().market} />
                 <GeoBreakdownSection data={stats().country} />
                 <ComparisonCardsSection
-                  pairs={homeComparisonPairs(stats().leaderboard)}
+                  pairs={homeComparisonPairs(stats().leaderboard["All Users"]["2M"])}
                   title="Model Comparisons"
                   description="Popular model pairs from the leaderboard."
                   variant="featured"
@@ -372,9 +401,32 @@ function formatUpdatedAtLabel(value: { date: string; time: string }) {
   return `${value.date}, ${value.time}`
 }
 
-function TopModelsSection(props: { data: UsagePoint[]; leaderboard: LeaderboardEntry[] }) {
+function TopModelsSection(props: { data: StatsHomeData["usage"]; leaderboard: StatsHomeData["leaderboard"] }) {
   const i18n = useI18n()
+  const [product, setProduct] = createSignal<UsageProduct>("Go")
+  const [range, setRange] = createSignal<UsageRange>("2M")
+  const [sheet, setSheet] = createSignal<"product" | "range">()
   const [activeModel, setActiveModel] = createSignal<string>()
+  const data = createMemo(() => props.data[product()][range()])
+  const leaderboard = createMemo(() => props.leaderboard[product()][range()])
+
+  createEffect(() => {
+    if (!sheet()) return
+    if (typeof document === "undefined") return
+    const htmlOverflow = document.documentElement.style.overflow
+    const bodyOverflow = document.body.style.overflow
+    document.documentElement.style.overflow = "hidden"
+    document.body.style.overflow = "hidden"
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setSheet(undefined)
+    }
+    document.addEventListener("keydown", onKeyDown)
+    onCleanup(() => {
+      document.documentElement.style.overflow = htmlOverflow
+      document.body.style.overflow = bodyOverflow
+      document.removeEventListener("keydown", onKeyDown)
+    })
+  })
 
   return (
     <section id="top-models" data-section="top-models">
@@ -386,28 +438,201 @@ function TopModelsSection(props: { data: UsagePoint[]; leaderboard: LeaderboardE
         description={i18n.t("home.topModelsDescription")}
       />
       <Show
-        when={props.data.some((item) => usageTotal(item) > 0)}
+        when={data().some((item) => usageTotal(item) > 0)}
         fallback={<EmptyState title={i18n.t("home.noUsageTitle")} description={i18n.t("home.noUsageDescription")} />}
       >
         <TopModelsChart
-          data={props.data}
-          range="2M"
+          data={data()}
+          range={range()}
           activeModel={activeModel()}
           onActiveModelChange={setActiveModel}
         />
       </Show>
       <Show
-        when={props.leaderboard.length > 0}
+        when={leaderboard().length > 0}
         fallback={
           <EmptyState title={i18n.t("home.noLeaderboardTitle")} description={i18n.t("home.noLeaderboardDescription")} />
         }
       >
-        <Leaderboard data={props.leaderboard} activeModel={activeModel()} onActiveModelChange={setActiveModel} />
+        <Leaderboard data={leaderboard()} activeModel={activeModel()} onActiveModelChange={setActiveModel} />
+      </Show>
+      <div data-slot="chart-footer" hidden>
+        <StatsFilters product={product()} range={range()} onProductSelect={setProduct} onRangeSelect={setRange} />
+        <div data-slot="top-models-mobile-controls">
+          <MobileFilterButton
+            label={i18n.t("home.productFilter")}
+            value={productLabel(product(), i18n)}
+            expanded={sheet() === "product"}
+            onClick={() => setSheet(sheet() === "product" ? undefined : "product")}
+          />
+          <MobileFilterButton
+            label={i18n.t("home.dateRange")}
+            value={rangeLabel(range(), i18n)}
+            expanded={sheet() === "range"}
+            onClick={() => setSheet(sheet() === "range" ? undefined : "range")}
+          />
+        </div>
+      </div>
+      <Show when={sheet()}>
+        {(kind) => (
+          <MobileFilterSheet
+            kind={kind()}
+            product={product()}
+            range={range()}
+            onProductSelect={(value) => {
+              setProduct(value)
+              setSheet(undefined)
+            }}
+            onRangeSelect={(value) => {
+              setRange(value)
+              setSheet(undefined)
+            }}
+            onClose={() => setSheet(undefined)}
+          />
+        )}
       </Show>
     </section>
   )
 }
 
+function MobileFilterButton(props: { label: string; value: string; expanded: boolean; onClick: () => void }) {
+  return (
+    <button
+      data-slot="mobile-filter-button"
+      type="button"
+      aria-label={props.label}
+      aria-expanded={props.expanded ? "true" : "false"}
+      onClick={props.onClick}
+    >
+      <span>{props.value}</span>
+      <ChevronDown />
+    </button>
+  )
+}
+
+function MobileFilterSheet(props: {
+  kind: "product" | "range"
+  product: UsageProduct
+  range: UsageRange
+  onProductSelect: (product: UsageProduct) => void
+  onRangeSelect: (range: UsageRange) => void
+  onClose: () => void
+}) {
+  const i18n = useI18n()
+  return (
+    <div data-component="mobile-filter-sheet" role="presentation" onClick={props.onClose}>
+      <div
+        data-slot="filter-sheet-panel"
+        role="radiogroup"
+        aria-label={props.kind === "product" ? i18n.t("home.productFilter") : i18n.t("home.dateRange")}
+      >
+        <Show
+          when={props.kind === "product"}
+          fallback={
+            <For each={ranges}>
+              {(item) => (
+                <button
+                  type="button"
+                  role="radio"
+                  aria-checked={props.range === item}
+                  data-active={props.range === item ? "true" : undefined}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    props.onRangeSelect(item)
+                  }}
+                >
+                  {rangeLabel(item, i18n)}
+                </button>
+              )}
+            </For>
+          }
+        >
+          <For each={products}>
+            {(item) => (
+              <button
+                type="button"
+                role="radio"
+                aria-checked={props.product === item}
+                data-active={props.product === item ? "true" : undefined}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  props.onProductSelect(item)
+                }}
+              >
+                {productLabel(item, i18n)}
+              </button>
+            )}
+          </For>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+function ChevronDown() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+      <path d="M5 7L8 10L11 7" stroke="currentColor" />
+    </svg>
+  )
+}
+
+function StatsFilters(props: {
+  product: UsageProduct
+  range: UsageRange
+  onProductSelect: (product: UsageProduct) => void
+  onRangeSelect: (range: UsageRange) => void
+}) {
+  const i18n = useI18n()
+  return (
+    <>
+      <FilterPills
+        items={products}
+        selected={props.product}
+        label={i18n.t("home.productFilter")}
+        variant="product"
+        formatLabel={(item) => productLabel(item, i18n)}
+        onSelect={props.onProductSelect}
+      />
+      <FilterPills
+        items={ranges}
+        selected={props.range}
+        label={i18n.t("home.dateRange")}
+        variant="range"
+        formatLabel={(item) => rangeLabel(item, i18n)}
+        onSelect={props.onRangeSelect}
+      />
+    </>
+  )
+}
+
+function FilterPills<T extends string>(props: {
+  items: readonly T[]
+  selected: T
+  label: string
+  variant: "product" | "range"
+  formatLabel?: (item: T) => string
+  onSelect: (item: T) => void
+}) {
+  return (
+    <div data-component="usage-filter" data-variant={props.variant} role="radiogroup" aria-label={props.label}>
+      <For each={props.items}>
+        {(item) => (
+          <button
+            type="button"
+            role="radio"
+            aria-checked={props.selected === item}
+            data-active={props.selected === item ? "true" : undefined}
+            onClick={() => props.onSelect(item)}
+          >
+            {props.formatLabel ? props.formatLabel(item) : item}
+          </button>
+        )}
+      </For>
+    </div>
+  )
+}
+
 function TopModelsChart(props: {
   data: UsagePoint[]
   range: UsageRange
@@ -598,9 +823,10 @@ function TopModelsChart(props: {
   )
 }
 
-function UniqueUsersSection(props: { data: UsagePoint[] }) {
+function UniqueUsersSection(props: { data: StatsHomeData["users"] }) {
   const i18n = useI18n()
   const [activeModel, setActiveModel] = createSignal<string>()
+  const data = createMemo(() => props.data.Go["2M"])
 
   return (
     <section id="unique-users" data-section="unique-users">
@@ -611,13 +837,13 @@ function UniqueUsersSection(props: { data: UsagePoint[] }) {
         description={i18n.t("home.uniqueUsersDescription")}
       />
       <Show
-        when={props.data.some((item) => usageTotal(item) > 0)}
+        when={data().some((item) => usageTotal(item) > 0)}
         fallback={
           <EmptyState title={i18n.t("home.noUserDataTitle")} description={i18n.t("home.noUserDataDescription")} />
         }
       >
         <TopModelsChart
-          data={props.data}
+          data={data()}
           range="2M"
           metric="users"
           ariaLabel={i18n.t("home.uniqueUsersChart")}
@@ -858,14 +1084,16 @@ function formatChange(value: number | null, i18n: ReturnType<typeof useI18n>) {
   return `${value}%`
 }
 
-function MarketShareSection(props: { data: MarketDay[] }) {
+function MarketShareSection(props: { data: StatsHomeData["market"] }) {
   const i18n = useI18n()
+  const [range, setRange] = createSignal<UsageRange>("2M")
   const [activeIndex, setActiveIndex] = createSignal(2)
   const [activeAuthor, setActiveAuthor] = createSignal<string>()
   const [inspecting, setInspecting] = createSignal(false)
-  const authorOrder = createMemo(() => getMarketAuthorOrder(props.data))
-  const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(props.data.length - 1, 0)))
-  const activeDay = createMemo(() => props.data[selectedIndex()])
+  const data = createMemo(() => props.data[range()])
+  const authorOrder = createMemo(() => getMarketAuthorOrder(data()))
+  const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(data().length - 1, 0)))
+  const activeDay = createMemo(() => data()[selectedIndex()])
 
   return (
     <section
@@ -890,8 +1118,8 @@ function MarketShareSection(props: { data: MarketDay[] }) {
         {(day) => (
           <>
             <MarketShare
-              data={props.data}
-              range="2M"
+              data={data()}
+              range={range()}
               authorOrder={authorOrder()}
               activeIndex={selectedIndex()}
               activeAuthor={activeAuthor()}
@@ -923,9 +1151,22 @@ function MarketShareSection(props: { data: MarketDay[] }) {
           <strong>
             {inspecting()
               ? formatMarketDate(activeDay(), i18n.t("home.noData"))
-              : formatMarketRange(props.data, i18n.t("home.noData"))}
+              : formatMarketRange(data(), i18n.t("home.noData"))}
           </strong>
         </p>
+        <div hidden>
+          <FilterPills
+            items={ranges}
+            selected={range()}
+            label={i18n.t("home.dateRange")}
+            variant="range"
+            onSelect={(item) => {
+              setRange(item)
+              setActiveAuthor(undefined)
+              setInspecting(false)
+            }}
+          />
+        </div>
       </div>
     </section>
   )
@@ -1092,22 +1333,23 @@ function MarketShareList(props: {
   )
 }
 
-function GeoBreakdownSection(props: { data: CountryEntry[] }) {
+function GeoBreakdownSection(props: { data: StatsHomeData["country"] }) {
   const i18n = useI18n()
   const language = useLanguage()
   const [activeCountry, setActiveCountry] = createSignal<string>()
+  const data = createMemo(() => props.data["2M"])
   const countryById = createMemo(
     () =>
       new Map(
-        props.data.flatMap((country) => {
+        data().flatMap((country) => {
           const id = countryNumericId(country.country)
           return id ? [[id, country] as const] : []
         }),
       ),
   )
-  const maxTokens = createMemo(() => Math.max(0, ...props.data.map((country) => country.tokens)) || 1)
-  const topCountries = createMemo(() => props.data.slice(0, 15))
-  const active = createMemo(() => props.data.find((country) => country.country === activeCountry()) ?? props.data[0])
+  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
@@ -1121,7 +1363,7 @@ function GeoBreakdownSection(props: { data: CountryEntry[] }) {
       <SectionBridge label={i18n.t("nav.marketShare").toUpperCase()} href="#market-share" />
       <SectionTitle id="geo-breakdown" title={i18n.t("home.geoTitle")} description={i18n.t("home.geoDescription")} />
       <Show
-        when={props.data.length > 0}
+        when={data().length > 0}
         fallback={<EmptyState title={i18n.t("home.noGeoTitle")} description={i18n.t("home.noGeoDescription")} />}
       >
         <div data-component="geo-breakdown">
@@ -1211,30 +1453,31 @@ function GeoWorldMap(props: {
         </For>
       </g>
       <g data-slot="geo-country-markers">
-        <For each={worldCountryMarkers}>
+        <For each={worldCountryPaths}>
           {(country) => {
             const entry = () => props.countryById.get(country.id)
             return (
-              <Show when={entry()}>
-                <circle
-                  cx={country.marker.x}
-                  cy={country.marker.y}
-                  data-country-id={country.id}
-                  r={entry()?.country === props.activeCountry ? 3.4 : 2.4}
-                  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)
-                  }}
-                />
+              <Show when={country.marker && entry() ? country.marker : undefined}>
+                {(marker) => (
+                  <circle
+                    cx={marker().x}
+                    cy={marker().y}
+                    r={entry()?.country === props.activeCountry ? 3.4 : 2.4}
+                    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)
+                    }}
+                  />
+                )}
               </Show>
             )
           }}
@@ -1288,6 +1531,14 @@ function countryNumericId(country: string) {
   return countryNumericIds.get(country.toUpperCase())?.padStart(3, "0")
 }
 
+function geoCountryMarker(country: (typeof worldCountries.features)[number]) {
+  const bounds = worldPath.bounds(country)
+  const [x, y] = worldPath.centroid(country)
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return undefined
+  if (bounds[1][0] - bounds[0][0] >= 3 && bounds[1][1] - bounds[0][1] >= 3) return undefined
+  return { x, y }
+}
+
 function formatCountryName(country: string, locale: string, unknown: string) {
   const code = country.toUpperCase()
   if (code === "ZZ") return unknown
@@ -1385,10 +1636,12 @@ function marketDateParts(label: string) {
   return { start: start ?? label, end: end ?? start ?? label }
 }
 
-function TokenCostSection(props: { data: TokenCostEntry[] }) {
+function TokenCostSection(props: { data: StatsHomeData["tokenCost"]; catalog: ModelCatalog | null }) {
   const i18n = useI18n()
+  const [product, setProduct] = createSignal<TokenProduct>("Go")
   const [activeIndex, setActiveIndex] = createSignal(2)
-  const visible = createMemo(() => props.data.slice(0, 13))
+  const data = createMemo(() => priceTokenCostFromCatalog(props.data[product()], props.catalog))
+  const visible = createMemo(() => data().slice(0, 13))
   const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(visible().length - 1, 0)))
 
   return (
@@ -1407,6 +1660,17 @@ function TokenCostSection(props: { data: TokenCostEntry[] }) {
       >
         <TokenCostChart data={visible()} activeIndex={selectedIndex()} onActiveIndexChange={setActiveIndex} />
       </Show>
+      <div data-slot="token-footer" hidden>
+        <FilterPills
+          items={tokenProducts}
+          selected={product()}
+          label={i18n.t("home.productFilter")}
+          variant="product"
+          formatLabel={(item) => productLabel(item, i18n)}
+          onSelect={setProduct}
+        />
+        <LiveIndicator />
+      </div>
     </section>
   )
 }
@@ -1459,10 +1723,12 @@ function TokenCostChart(props: {
   )
 }
 
-function CacheRatioSection(props: { data: CacheRatioEntry[] }) {
+function CacheRatioSection(props: { data: StatsHomeData["cacheRatio"] }) {
   const i18n = useI18n()
+  const [product, setProduct] = createSignal<TokenProduct>("Go")
   const [activeIndex, setActiveIndex] = createSignal(2)
-  const visible = createMemo(() => props.data.slice(0, 16))
+  const data = createMemo(() => props.data[product()])
+  const visible = createMemo(() => data().slice(0, 16))
   const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(visible().length - 1, 0)))
 
   return (
@@ -1479,6 +1745,17 @@ function CacheRatioSection(props: { data: CacheRatioEntry[] }) {
       >
         <CacheRatioChart data={visible()} activeIndex={selectedIndex()} onActiveIndexChange={setActiveIndex} />
       </Show>
+      <div data-slot="token-footer" hidden>
+        <FilterPills
+          items={tokenProducts}
+          selected={product()}
+          label={i18n.t("home.productFilter")}
+          variant="product"
+          formatLabel={(item) => productLabel(item, i18n)}
+          onSelect={setProduct}
+        />
+        <LiveIndicator />
+      </div>
     </section>
   )
 }
@@ -1576,10 +1853,12 @@ function MetricBar(props: { value: number; max: number; active: boolean }) {
   )
 }
 
-function SessionCostSection(props: { data: SessionCostEntry[] }) {
+function SessionCostSection(props: { data: StatsHomeData["sessionCost"] }) {
   const i18n = useI18n()
+  const [product, setProduct] = createSignal<TokenProduct>("Go")
   const [activeIndex, setActiveIndex] = createSignal(2)
-  const visible = createMemo(() => props.data.slice(0, 16))
+  const data = createMemo(() => props.data[product()])
+  const visible = createMemo(() => data().slice(0, 16))
   const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(visible().length - 1, 0)))
 
   return (
@@ -1598,6 +1877,17 @@ function SessionCostSection(props: { data: SessionCostEntry[] }) {
       >
         <SessionCostChart data={visible()} activeIndex={selectedIndex()} onActiveIndexChange={setActiveIndex} />
       </Show>
+      <div data-slot="token-footer" hidden>
+        <FilterPills
+          items={tokenProducts}
+          selected={product()}
+          label={i18n.t("home.productFilter")}
+          variant="product"
+          formatLabel={(item) => productLabel(item, i18n)}
+          onSelect={setProduct}
+        />
+        <LiveIndicator />
+      </div>
     </section>
   )
 }
@@ -1659,6 +1949,11 @@ function SessionCostChart(props: {
   )
 }
 
+function LiveIndicator() {
+  const i18n = useI18n()
+  return <span data-component="live-filter">{i18n.t("chart.live")}</span>
+}
+
 function formatTokenCount(value: number) {
   if (value >= 1_000_000) return `${Number((value / 1_000_000).toFixed(1))}M`
   return `${Math.round(value / 1_000)}K`