Merge branch 'dev' into rankings

sync
2026-05-02 15:00:39 +08:00 · 2026-04-05 03:48:59 -04:00 · 2026-04-01 00:49:29 -04:00
22 changed files with 1661 additions and 299 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -371,7 +371,6 @@
        "jsonc-parser": "3.3.1",
        "mime-types": "3.0.2",
        "minimatch": "10.0.3",
-        "npm-package-arg": "13.0.2",
        "open": "10.1.2",
        "opencode-gitlab-auth": "2.0.1",
        "opencode-poe-auth": "0.0.1",
@@ -413,7 +412,6 @@
        "@types/bun": "catalog:",
        "@types/cross-spawn": "catalog:",
        "@types/mime-types": "3.0.1",
-        "@types/npm-package-arg": "6.1.4",
        "@types/npmcli__arborist": "6.3.3",
        "@types/semver": "^7.5.8",
        "@types/turndown": "5.0.5",
--- a/nix/hashes.json
+++ b/nix/hashes.json
@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-LRhPPrOKCGUSCEWTpAxPdWKTKVNkg82WrvD25cP3jts=",
-    "aarch64-linux": "sha256-sbNxkil47n+B7v6ds5EYFybLytXUyRlu0Cpka0ZmDx4=",
-    "aarch64-darwin": "sha256-5+99gtpIHGygMW3VBAexNhmaORgI8LCxPk/Gf1fW/ds=",
-    "x86_64-darwin": "sha256-LqnvZGGnQaRxIoowOr5gf6lFgDhbgQhVPiAcRTtU6fE="
+    "x86_64-linux": "sha256-0jwPCu2Lod433GPQLHN8eEkhfpPviDFfkFJmuvkRdlE=",
+    "aarch64-linux": "sha256-Qi0IkGkaIBKZsPLTO8kaTbCVL0cEfVOm/Y/6VUVI9TY=",
+    "aarch64-darwin": "sha256-1eZBBLgYVkjg5RYN/etR1Mb5UjU3VelElBB5ug5hQdc=",
+    "x86_64-darwin": "sha256-jdXgA+kZb/foFHR40UiPif6rsA2GDVCCVHnJR3jBUGI="
  }
 }
--- a/packages/console/app/src/routes/rankings.css
+++ b/packages/console/app/src/routes/rankings.css
@@ -0,0 +1,541 @@
+[data-page="zen"][data-route="rankings"] {
+  [data-component="hero"][data-variant="rankings"] {
+    padding-top: var(--vertical-padding);
+    padding-bottom: var(--vertical-padding);
+
+    [data-slot="hero-copy"] {
+      p {
+        margin-bottom: 0;
+        max-width: 44rem;
+      }
+    }
+  }
+
+  [data-component="container"] {
+    border: none;
+  }
+
+  [data-component="footer"] {
+    border-top: none;
+  }
+
+  [data-component="rankings-section"] {
+    padding: var(--vertical-padding) var(--padding);
+
+    h3 {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--color-text-strong);
+    }
+  }
+
+  [data-slot="chart"] {
+    margin-top: 1.5rem;
+    background: var(--color-background-weak);
+    border: 1px solid var(--color-border-weak);
+    border-radius: 0.5rem;
+    padding: 2rem 1.5rem 1.5rem;
+    overflow: visible;
+
+    @media (max-width: 40rem) {
+      padding: 1.5rem 1rem 1rem;
+    }
+  }
+
+  [data-slot="bars"] {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.75rem;
+    height: 20rem;
+
+    @media (max-width: 40rem) {
+      height: 14rem;
+      gap: 0.5rem;
+    }
+  }
+
+  [data-slot="bar-group"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    height: 100%;
+    justify-content: flex-end;
+    min-width: 2.5rem;
+    cursor: default;
+    transition: opacity 0.15s ease;
+
+    &[data-dimmed] {
+      opacity: 0.35;
+    }
+  }
+
+  [data-slot="bar-label"] {
+    color: var(--color-text-weak);
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  [data-slot="bar-wrap"] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  [data-slot="bar"] {
+    width: 100%;
+    max-width: 4rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+    min-height: 2px;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 1px;
+    overflow: hidden;
+
+    span {
+      display: block;
+      min-height: 1px;
+    }
+
+    span:last-child {
+      border-radius: 0.25rem 0.25rem 0 0;
+    }
+  }
+
+  [data-slot="bar-week"] {
+    color: var(--color-text-weak);
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  [data-slot="tooltip"] {
+    position: fixed;
+    z-index: 100;
+    transform: translateY(-100%);
+    background: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+    min-width: 14rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    pointer-events: none;
+
+    strong {
+      display: block;
+      color: var(--color-text-strong);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      margin-bottom: 0.125rem;
+    }
+  }
+
+  [data-slot="tooltip-total"] {
+    display: block;
+    color: var(--color-text-weak);
+    font-size: 0.75rem;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--color-border-weak);
+  }
+
+  [data-slot="tooltip-row"] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--color-text);
+    padding: 0.175rem 0;
+
+    i {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 2px;
+      flex: none;
+    }
+
+    span:last-child {
+      text-align: right;
+      color: var(--color-text-strong);
+      font-weight: 500;
+    }
+  }
+
+  [data-slot="legend"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.25rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--color-border-weak);
+  }
+
+  [data-slot="legend-item"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8125rem;
+    color: var(--color-text);
+
+    i {
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 2px;
+      flex: none;
+    }
+  }
+
+  [data-slot="subtitle"] {
+    color: var(--color-text);
+    margin-top: 0.5rem;
+  }
+
+  [data-slot="lb-podium"] {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+
+    @media (max-width: 40rem) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  [data-slot="lb-podium-item"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 1.25rem;
+    background: var(--color-background-weak);
+    border: 1px solid var(--color-border-weak);
+    border-radius: 0.5rem;
+
+    strong {
+      color: var(--color-text-strong);
+      font-size: 1.0625rem;
+      font-weight: 600;
+    }
+  }
+
+  [data-slot="lb-podium-rank"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+
+  [data-slot="lb-podium-item"][data-rank="1"] [data-slot="lb-podium-rank"] {
+    background: hsl(45, 93%, 47%);
+    color: hsl(45, 100%, 10%);
+  }
+
+  [data-slot="lb-podium-item"][data-rank="2"] [data-slot="lb-podium-rank"] {
+    background: hsl(0, 0%, 75%);
+    color: hsl(0, 0%, 15%);
+  }
+
+  [data-slot="lb-podium-item"][data-rank="3"] [data-slot="lb-podium-rank"] {
+    background: hsl(30, 60%, 50%);
+    color: hsl(30, 60%, 10%);
+  }
+
+  [data-slot="lb-podium-tokens"] {
+    color: var(--color-text-weak);
+    font-size: 0.875rem;
+  }
+
+  [data-slot="leaderboard"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 2rem;
+    margin-top: 1rem;
+
+    @media (max-width: 58rem) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  [data-slot="lb-col"] {
+    display: grid;
+    align-content: start;
+  }
+
+  [data-slot="lb-col"] [data-slot="lb-row"]:last-child {
+    border-bottom: none;
+  }
+
+  [data-slot="lb-row"] {
+    display: grid;
+    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--color-border-weak);
+  }
+
+  [data-slot="lb-row"]:last-child {
+    border-bottom: none;
+  }
+
+  [data-slot="lb-rank"] {
+    color: var(--color-text-weak);
+    font-size: 0.875rem;
+  }
+
+  [data-slot="lb-info"] {
+    min-width: 0;
+
+    strong {
+      display: block;
+      color: var(--color-text-strong);
+      font-size: 0.9375rem;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  [data-slot="lb-tokens"] {
+    white-space: nowrap;
+    color: var(--color-text);
+    font-size: 0.875rem;
+  }
+
+  [data-slot="lb-toggle"] {
+    display: block;
+    margin: 1rem auto 0;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--color-text-weak);
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 0.14em;
+    text-decoration-thickness: 1px;
+
+    &:hover {
+      color: var(--color-text-strong);
+    }
+  }
+
+  [data-slot="share-bars"] {
+    display: flex;
+    gap: 0.5rem;
+    height: 20rem;
+
+    @media (max-width: 40rem) {
+      height: 14rem;
+      gap: 0.375rem;
+    }
+  }
+
+  [data-slot="share-col"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 2.5rem;
+    cursor: default;
+    transition: opacity 0.15s ease;
+
+    &[data-dimmed] {
+      opacity: 0.35;
+    }
+  }
+
+  [data-slot="share-stack"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 1px;
+    border-radius: 0.25rem;
+    overflow: hidden;
+
+    span {
+      display: block;
+      min-height: 1px;
+    }
+  }
+
+  [data-slot="share-week"] {
+    color: var(--color-text-weak);
+    font-size: 0.75rem;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  [data-slot="pricing-table"] {
+    margin-top: 1.5rem;
+    border: 1px solid var(--color-border-weak);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  [data-slot="pricing-header"],
+  [data-slot="pricing-row"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
+    gap: 0.75rem;
+    padding: 0.75rem 1.25rem;
+
+    &[data-cols="4"] {
+      grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
+    }
+
+    &[data-cols="3"] {
+      grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
+    }
+
+    &[data-cols="2"] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    @media (max-width: 40rem) {
+      padding: 0.625rem 0.75rem;
+      gap: 0.5rem;
+    }
+  }
+
+  [data-slot="pricing-header"] {
+    background: var(--color-background-weak);
+    border-bottom: 1px solid var(--color-border-weak);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--color-text-weak);
+  }
+
+  [data-slot="pricing-row"] {
+    border-bottom: 1px solid var(--color-border-weak);
+    font-size: 0.875rem;
+    color: var(--color-text);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  [data-slot="cost-list"] {
+    margin-top: 1.5rem;
+  }
+
+  [data-slot="cost-group"] {
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  [data-slot="cost-row"] {
+    padding: 0.5rem 0;
+  }
+
+  [data-slot="cost-main"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
+    align-items: center;
+    gap: 0.75rem 2rem;
+  }
+
+  [data-slot="cost-detail"] {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--color-text-weak);
+  }
+
+  [data-slot="cost-bar-wrap"] {
+    height: 0.375rem;
+    background: var(--color-border-weak);
+    border-radius: 999px;
+  }
+
+  [data-slot="cost-bar"] {
+    display: block;
+    height: 100%;
+    background: var(--color-background-strong);
+    border-radius: 999px;
+    min-width: 2px;
+  }
+
+  [data-slot="pricing-model"] {
+    color: var(--color-text-strong);
+    font-weight: 500;
+    font-size: 0.9375rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [data-slot="pricing-effective"] {
+    color: var(--color-text-strong);
+    font-weight: 600;
+  }
+
+  [data-slot="tps-cell"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 0.5rem;
+    background: var(--color-border-weak);
+    border-radius: 999px;
+    cursor: default;
+
+    &:hover::after {
+      content: attr(title);
+      position: absolute;
+      bottom: calc(100% + 0.375rem);
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 0.25rem 0.5rem;
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--color-text-strong);
+      white-space: nowrap;
+      pointer-events: none;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      z-index: 10;
+    }
+  }
+
+  [data-slot="tps-bar"] {
+    height: 100%;
+    background: var(--color-background-strong);
+    border-radius: 999px 0 0 999px;
+    min-width: 2px;
+  }
+
+  [data-slot="map-wrap"] {
+    position: relative;
+    margin-top: 1.5rem;
+  }
+
+  [data-slot="world-map"] {
+    width: 100%;
+    height: auto;
+
+    path {
+      cursor: default;
+      transition: opacity 0.15s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
--- a/packages/console/app/src/routes/rankings.tsx
+++ b/packages/console/app/src/routes/rankings.tsx
@@ -0,0 +1,920 @@
+import "./zen/index.css"
+import "./rankings.css"
+import { Title } from "@solidjs/meta"
+import { createSignal, For, Show } from "solid-js"
+import { Footer } from "~/component/footer"
+import { Header } from "~/component/header"
+import { Legal } from "~/component/legal"
+import { LocaleLinks } from "~/component/locale-links"
+import { paths as worldPaths } from "./world-paths"
+
+const models = [
+  { name: "minimax-m2.5-free", color: "#f25bb2" },
+  { name: "big-pickle", color: "#8b5cf6" },
+  { name: "mimo-v2-pro-free", color: "#18a57b" },
+  { name: "kimi-k2.5-free", color: "#3481cf" },
+  { name: "kimi-k2.5", color: "#e4ad27" },
+  { name: "minimax-m2.1-free", color: "#ff5a1f" },
+  { name: "glm-5-free", color: "#46b786" },
+  { name: "gpt-5-nano", color: "#84cc16" },
+  { name: "nemotron-3-super-free", color: "#14c2a3" },
+  { name: "claude-opus-4-6", color: "#ff7b3d" },
+] as const
+
+type Week = {
+  week: string
+  segments: { model: string; color: string; tokens: number }[]
+  total: number
+}
+
+const raw: Record<string, Record<string, number>> = {
+  "jan-27": {
+    "big-pickle": 368743864804,
+    "kimi-k2.5-free": 915886375887,
+    "kimi-k2.5": 39168495089,
+    "minimax-m2.1-free": 270764664177,
+    "gpt-5-nano": 41276213376,
+  },
+  "feb-3": {
+    "big-pickle": 520618971808,
+    "kimi-k2.5-free": 980317788887,
+    "kimi-k2.5": 92823557285,
+    "minimax-m2.1-free": 721380871693,
+    "gpt-5-nano": 74420810088,
+    "claude-opus-4-6": 49826050233,
+  },
+  "feb-10": {
+    "minimax-m2.5-free": 905276977685,
+    "big-pickle": 775593605696,
+    "kimi-k2.5-free": 546100624556,
+    "kimi-k2.5": 106869700825,
+    "minimax-m2.1-free": 273479063739,
+    "glm-5-free": 21944995438,
+    "gpt-5-nano": 86562724981,
+    "claude-opus-4-6": 71785580030,
+  },
+  "feb-17": {
+    "minimax-m2.5-free": 1313909105944,
+    "big-pickle": 1017431400927,
+    "kimi-k2.5-free": 350112011799,
+    "kimi-k2.5": 100616295719,
+    "minimax-m2.1-free": 11269742719,
+    "glm-5-free": 735726749938,
+    "gpt-5-nano": 79036772388,
+    "claude-opus-4-6": 66789922519,
+  },
+  "feb-24": {
+    "minimax-m2.5-free": 1988229542028,
+    "big-pickle": 1332574843957,
+    "kimi-k2.5-free": 17964822381,
+    "kimi-k2.5": 152009783828,
+    "minimax-m2.1-free": 10376282858,
+    "glm-5-free": 3848233361,
+    "gpt-5-nano": 94195723658,
+    "claude-opus-4-6": 72579249230,
+  },
+  "mar-3": {
+    "minimax-m2.5-free": 1103526073812,
+    "big-pickle": 864075264151,
+    "kimi-k2.5": 236732504356,
+    "gpt-5-nano": 62076480967,
+    "claude-opus-4-6": 75122544903,
+  },
+  "mar-10": {
+    "minimax-m2.5-free": 1765538911999,
+    "big-pickle": 1456821813321,
+    "kimi-k2.5": 270005019814,
+    "gpt-5-nano": 80064940458,
+    "nemotron-3-super-free": 226767628611,
+    "claude-opus-4-6": 121826865344,
+  },
+  "mar-17": {
+    "minimax-m2.5-free": 2258964526070,
+    "big-pickle": 2157757939980,
+    "mimo-v2-pro-free": 1393092895745,
+    "kimi-k2.5": 253277628360,
+    "gpt-5-nano": 91075743861,
+    "nemotron-3-super-free": 257336931857,
+    "claude-opus-4-6": 107180831444,
+  },
+  "mar-24": {
+    "minimax-m2.5-free": 2256417941175,
+    "big-pickle": 2596072141208,
+    "mimo-v2-pro-free": 1612680626347,
+    "kimi-k2.5": 263140655381,
+    "gpt-5-nano": 130043140955,
+    "nemotron-3-super-free": 254171104198,
+    "claude-opus-4-6": 107813898809,
+  },
+}
+
+const totals: Record<string, number> = {
+  "jan-27": 1954431878631,
+  "feb-3": 2782873471532,
+  "feb-10": 2982021636344,
+  "feb-17": 3898395901667,
+  "feb-24": 3980255846812,
+  "mar-3": 2789862168396,
+  "mar-10": 4672779512356,
+  "mar-17": 7453410720062,
+  "mar-24": 8434615944207,
+}
+
+const weeks = ["jan-27", "feb-3", "feb-10", "feb-17", "feb-24", "mar-3", "mar-10", "mar-17", "mar-24"]
+const labels: Record<string, string> = {
+  "jan-27": "Jan 27",
+  "feb-3": "Feb 3",
+  "feb-10": "Feb 10",
+  "feb-17": "Feb 17",
+  "feb-24": "Feb 24",
+  "mar-3": "Mar 3",
+  "mar-10": "Mar 10",
+  "mar-17": "Mar 17",
+  "mar-24": "Mar 24",
+}
+
+const usage: Week[] = weeks.map((key) => {
+  const data = raw[key]
+  const total = totals[key]
+  const named = models.filter((m) => data[m.name]).map((m) => ({ model: m.name, color: m.color, tokens: data[m.name] }))
+  const rest = total - named.reduce((sum, s) => sum + s.tokens, 0)
+  return {
+    week: labels[key],
+    total,
+    segments: [...named, { model: "Other", color: "rgba(148, 163, 184, 0.35)", tokens: rest }],
+  }
+})
+
+const max = Math.max(...usage.map((w) => w.total))
+
+const fmt = (n: number) => {
+  if (n >= 1e12) return `${(n / 1e12).toFixed(1)}T`
+  return `${(n / 1e9).toFixed(0)}B`
+}
+
+const leaderboard = [
+  { rank: 1, model: "big-pickle", tokens: 2_596_072_141_208 },
+  { rank: 2, model: "minimax-m2.5-free", tokens: 2_256_417_941_175 },
+  { rank: 3, model: "mimo-v2-pro-free", tokens: 1_612_680_626_347 },
+  { rank: 4, model: "mimo-v2-omni-free", tokens: 313_963_070_777 },
+  { rank: 5, model: "kimi-k2.5", tokens: 263_140_655_381 },
+  { rank: 6, model: "nemotron-3-super-free", tokens: 254_171_104_198 },
+  { rank: 7, model: "minimax-m2.7", tokens: 235_471_532_073 },
+  { rank: 8, model: "qwen3.6-plus-free", tokens: 211_645_852_696 },
+  { rank: 9, model: "glm-5", tokens: 149_968_059_435 },
+  { rank: 10, model: "gpt-5-nano", tokens: 130_043_140_955 },
+  { rank: 11, model: "claude-opus-4-6", tokens: 107_813_898_809 },
+  { rank: 12, model: "minimax-m2.5", tokens: 91_477_876_330 },
+  { rank: 13, model: "gpt-5.4", tokens: 64_216_544_736 },
+  { rank: 14, model: "claude-sonnet-4-6", tokens: 53_638_240_479 },
+  { rank: 15, model: "gpt-5.3-codex", tokens: 31_928_019_743 },
+  { rank: 16, model: "gemini-3-flash", tokens: 14_528_488_448 },
+  { rank: 17, model: "claude-haiku-4-5", tokens: 8_921_076_835 },
+  { rank: 18, model: "gemini-3.1-pro", tokens: 7_676_935_166 },
+  { rank: 19, model: "claude-sonnet-4-5", tokens: 5_051_555_617 },
+  { rank: 20, model: "gpt-5.4-mini", tokens: 4_751_125_737 },
+]
+
+const providers = [
+  { name: "opencode", color: "#8b5cf6" },
+  { name: "minimax", color: "#f25bb2" },
+  { name: "xiaomi", color: "#ff5a1f" },
+  { name: "moonshot", color: "#3481cf" },
+  { name: "nvidia", color: "#14c2a3" },
+  { name: "openai", color: "#84cc16" },
+  { name: "anthropic", color: "#ff7b3d" },
+  { name: "zhipu", color: "#46b786" },
+  { name: "google", color: "#e4ad27" },
+  { name: "alibaba", color: "#ef5db1" },
+  { name: "arcee", color: "#2085ec" },
+] as const
+
+const shareRaw: Record<string, Record<string, number>> = {
+  "jan-27": {
+    moonshot: 957101046076,
+    opencode: 368743864804,
+    minimax: 273789245099,
+    zhipu: 175220173052,
+    openai: 71428726197,
+    anthropic: 63795092028,
+    arcee: 22900709163,
+    google: 21116481943,
+    alibaba: 336540269,
+  },
+  "feb-3": {
+    moonshot: 1075728836899,
+    minimax: 727777460147,
+    opencode: 520618971808,
+    anthropic: 126083048915,
+    openai: 119992167519,
+    zhipu: 106315324243,
+    arcee: 70511760645,
+    google: 35345191581,
+    alibaba: 500567954,
+  },
+  "feb-10": {
+    minimax: 1195064506114,
+    opencode: 775593605696,
+    moonshot: 655693064959,
+    openai: 126021773769,
+    anthropic: 114969689993,
+    zhipu: 66447874989,
+    google: 27728156767,
+    arcee: 20502880487,
+  },
+  "feb-17": {
+    minimax: 1340689075939,
+    opencode: 1017431400927,
+    zhipu: 753486920157,
+    moonshot: 453006079914,
+    anthropic: 136280713749,
+    openai: 117036878336,
+    google: 44709966980,
+    arcee: 35460739820,
+  },
+  "feb-24": {
+    minimax: 2037390464296,
+    opencode: 1332574843957,
+    moonshot: 172345287072,
+    openai: 165404921924,
+    anthropic: 137007019288,
+    arcee: 65348467867,
+    zhipu: 36192647725,
+    google: 32632757942,
+  },
+  "mar-3": {
+    minimax: 1236589693899,
+    opencode: 864075264151,
+    moonshot: 236940261927,
+    openai: 144296631970,
+    anthropic: 143388311109,
+    zhipu: 89420861866,
+    google: 35499950281,
+    xiaomi: 24396507662,
+    arcee: 14674544044,
+  },
+  "mar-10": {
+    minimax: 1919467888084,
+    opencode: 1456821813321,
+    xiaomi: 302031698856,
+    moonshot: 270021430246,
+    nvidia: 226767628611,
+    anthropic: 181566633371,
+    openai: 171713393912,
+    zhipu: 113460952065,
+    google: 30109971757,
+    arcee: 818102133,
+  },
+  "mar-17": {
+    minimax: 2536581988215,
+    opencode: 2157757939980,
+    xiaomi: 1708313298084,
+    nvidia: 257336931857,
+    moonshot: 253304780525,
+    openai: 196305815207,
+    anthropic: 188087354693,
+    zhipu: 127277270842,
+    google: 28180238053,
+    arcee: 265058488,
+  },
+  "mar-24": {
+    opencode: 2596072141208,
+    minimax: 2583441903425,
+    xiaomi: 1930671539776,
+    moonshot: 263142158847,
+    nvidia: 254171104198,
+    openai: 242821016755,
+    alibaba: 211645852696,
+    anthropic: 179934787304,
+    zhipu: 150050493012,
+    google: 22325363704,
+    arcee: 336333746,
+  },
+}
+
+const share = weeks.map((key) => {
+  const data = shareRaw[key]
+  const total = totals[key]
+  const segs = providers
+    .filter((p) => data[p.name])
+    .map((p) => ({
+      provider: p.name,
+      color: p.color,
+      tokens: data[p.name],
+      pct: (data[p.name] / total) * 100,
+    }))
+  return { week: labels[key], total, segments: segs }
+})
+
+const pricing: Record<string, { input: number; output: number; cached: number }> = {
+  "kimi-k2.5": { input: 0.6, output: 3.0, cached: 0.1 },
+  "minimax-m2.7": { input: 0.3, output: 1.2, cached: 0.06 },
+  "glm-5": { input: 1.0, output: 3.2, cached: 0.2 },
+  "claude-opus-4-6": { input: 5.0, output: 25.0, cached: 0.5 },
+  "minimax-m2.5": { input: 0.3, output: 1.2, cached: 0.03 },
+  "gpt-5.4": { input: 2.5, output: 15.0, cached: 0.25 },
+  "claude-sonnet-4-6": { input: 3.0, output: 15.0, cached: 0.3 },
+  "gpt-5.3-codex": { input: 1.75, output: 14.0, cached: 0.175 },
+  "gemini-3-flash": { input: 0.5, output: 3.0, cached: 0.05 },
+  "claude-haiku-4-5": { input: 1.0, output: 5.0, cached: 0.1 },
+  "gemini-3.1-pro": { input: 2.0, output: 12.0, cached: 0.2 },
+  "claude-sonnet-4-5": { input: 3.0, output: 15.0, cached: 0.3 },
+  "gpt-5.4-mini": { input: 0.75, output: 4.5, cached: 0.075 },
+}
+
+const effective = (p: { input: number; output: number; cached: number }) =>
+  p.cached * 0.94 + p.input * 0.06 + p.output * 0.01
+
+const price = (n: number) => (n === 0 ? "Free" : `$${n.toFixed(2)}`)
+
+const modelGroup: Record<string, string> = {
+  "kimi-k2.5": "moonshot",
+  "minimax-m2.7": "minimax",
+  "minimax-m2.5": "minimax",
+  "glm-5": "zhipu",
+  "claude-opus-4-6": "anthropic",
+  "claude-sonnet-4-6": "anthropic",
+  "claude-sonnet-4-5": "anthropic",
+  "claude-haiku-4-5": "anthropic",
+  "gpt-5.4": "openai",
+  "gpt-5.3-codex": "openai",
+  "gpt-5.4-mini": "openai",
+  "gemini-3-flash": "google",
+  "gemini-3.1-pro": "google",
+}
+
+const pricedModels = leaderboard
+  .filter((r) => !r.model.endsWith("-free") && pricing[r.model])
+  .sort((a, b) => effective(pricing[a.model]) - effective(pricing[b.model]))
+
+const maxEffective = Math.max(...pricedModels.map((r) => effective(pricing[r.model])))
+
+const grouped = (() => {
+  const groups: { provider: string; models: typeof pricedModels }[] = []
+  const seen = new Set<string>()
+  for (const row of pricedModels) {
+    const g = modelGroup[row.model] || row.model
+    if (seen.has(g)) continue
+    seen.add(g)
+    const items = pricedModels.filter((r) => (modelGroup[r.model] || r.model) === g)
+    groups.push({ provider: g, models: items })
+  }
+  return groups
+})()
+
+const sessions = [
+  { model: "gpt-5.4-nano", spend: 56.19, sessions: 2469, tokens: 2_058_320_992 },
+  { model: "gpt-5.1-codex-mini", spend: 46.49, sessions: 649, tokens: 1_114_706_819 },
+  { model: "minimax-m2.5", spend: 10774.93, sessions: 101862, tokens: 91_512_287_752 },
+  { model: "claude-haiku-4-5", spend: 2169.56, sessions: 14896, tokens: 8_965_515_678 },
+  { model: "gpt-5.4-mini", spend: 858.63, sessions: 4726, tokens: 4_759_454_622 },
+  { model: "minimax-m2.7", spend: 24120.99, sessions: 118523, tokens: 235_267_498_689 },
+  { model: "gpt-5.4", spend: 31834.9, sessions: 142909, tokens: 64_146_279_556 },
+  { model: "kimi-k2.5", spend: 39724.09, sessions: 150135, tokens: 263_660_128_320 },
+  { model: "gemini-3-flash", spend: 2294.28, sessions: 8405, tokens: 14_752_884_651 },
+  { model: "glm-5", spend: 37814.87, sessions: 105292, tokens: 150_626_981_063 },
+  { model: "claude-sonnet-4-6", spend: 32133.34, sessions: 42237, tokens: 53_550_067_871 },
+  { model: "gpt-5.3-codex", spend: 10809.82, sessions: 13888, tokens: 31_907_600_634 },
+  { model: "claude-sonnet-4-5", spend: 4061.09, sessions: 4057, tokens: 5_157_076_730 },
+  { model: "gemini-3.1-pro", spend: 6257.1, sessions: 5777, tokens: 7_569_358_077 },
+  { model: "claude-opus-4-6", spend: 114219.22, sessions: 42550, tokens: 106_575_958_684 },
+  { model: "claude-opus-4-5", spend: 3582.53, sessions: 1576, tokens: 3_219_688_476 },
+  { model: "gpt-5.4-pro", spend: 6555.13, sessions: 1264, tokens: 200_314_429 },
+]
+
+const avg = (r: (typeof sessions)[number]) => r.spend / r.sessions
+const avgTokens = (r: (typeof sessions)[number]) => Math.round(r.tokens / r.sessions)
+
+const fmtTokens = (n: number) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`
+  if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`
+  return String(n)
+}
+
+const maxTps = Math.max(...sessions.map((r) => avgTokens(r)))
+
+const countries: Record<string, number> = {
+  CN: 1_954_638_555_964,
+  US: 893_134_696_046,
+  IN: 535_643_693_640,
+  BR: 382_163_396_828,
+  DE: 311_242_520_442,
+  ES: 209_329_692_495,
+  RU: 201_527_328_150,
+  HK: 196_512_051_704,
+  GB: 166_553_586_780,
+  AR: 162_194_105_984,
+  SG: 158_456_781_083,
+  FR: 156_789_513_531,
+  JP: 152_176_549_930,
+  NL: 142_283_579_531,
+  ID: 133_099_866_730,
+  CA: 130_175_404_155,
+  IT: 104_164_651_206,
+  MX: 103_470_313_882,
+  TW: 99_750_103_092,
+  CO: 96_782_169_230,
+  VN: 89_760_456_363,
+  PL: 87_055_503_038,
+  TR: 83_380_620_873,
+  KR: 82_692_257_401,
+  AU: 82_626_936_402,
+  PH: 63_600_637_182,
+  EG: 61_672_925_246,
+  PT: 55_231_430_725,
+  BD: 54_398_663_664,
+  SE: 53_569_291_560,
+  CL: 52_319_761_865,
+  TH: 50_343_490_695,
+  NG: 50_159_406_105,
+  PK: 49_490_412_870,
+  FI: 45_825_535_387,
+  PE: 43_961_712_555,
+  CH: 43_300_038_112,
+  MY: 41_561_444_011,
+  RO: 40_383_208_346,
+  BE: 38_322_022_514,
+  MA: 38_272_211_062,
+  ZA: 38_180_939_069,
+  UA: 36_032_426_930,
+  VE: 34_807_973_969,
+  KE: 34_239_081_597,
+  IL: 32_705_941_531,
+  AT: 31_995_376_039,
+  DZ: 29_533_977_612,
+  CZ: 28_976_529_740,
+  NP: 25_623_967_353,
+  DO: 23_957_780_174,
+  DK: 22_736_971_721,
+  EC: 21_934_976_342,
+  AE: 21_823_728_235,
+  TN: 21_412_135_454,
+  NO: 20_735_253_026,
+  SA: 20_234_711_215,
+  BY: 18_939_368_533,
+  GH: 16_936_621_597,
+  RS: 16_778_051_855,
+  NZ: 16_319_979_678,
+  ET: 15_465_960_765,
+  IE: 14_978_507_068,
+  BO: 14_833_821_684,
+  GR: 14_785_265_286,
+  HU: 14_540_890_452,
+  UY: 13_804_790_917,
+  UZ: 13_008_621_109,
+  LK: 12_735_597_659,
+  BG: 12_045_851_521,
+  CR: 11_261_069_513,
+  PY: 10_614_168_600,
+  KH: 10_555_315_979,
+  KZ: 10_159_168_104,
+  LT: 9_815_793_110,
+  EE: 9_417_177_100,
+  UG: 9_165_111_455,
+  SK: 9_070_826_870,
+  LV: 8_198_013_338,
+  IQ: 8_187_011_695,
+  HR: 7_605_019_662,
+  CM: 7_377_050_916,
+  ZW: 7_314_742_432,
+  YE: 6_747_216_591,
+  JO: 6_211_747_207,
+  PA: 6_092_366_683,
+  QA: 5_955_042_936,
+  MD: 5_773_585_201,
+  TZ: 5_625_754_397,
+  NI: 5_228_293_282,
+  GE: 5_165_628_063,
+  SI: 4_955_336_900,
+  SN: 4_688_066_204,
+  BA: 4_549_605_753,
+  BJ: 4_543_143_957,
+  GT: 4_424_503_835,
+  HN: 4_405_852_608,
+  OM: 4_395_319_849,
+}
+
+const maxCountry = Math.max(...Object.values(countries))
+
+const names: Record<string, string> = {
+  CN: "China",
+  US: "United States",
+  IN: "India",
+  BR: "Brazil",
+  DE: "Germany",
+  ES: "Spain",
+  RU: "Russia",
+  HK: "Hong Kong",
+  GB: "United Kingdom",
+  AR: "Argentina",
+  SG: "Singapore",
+  FR: "France",
+  JP: "Japan",
+  NL: "Netherlands",
+  ID: "Indonesia",
+  CA: "Canada",
+  IT: "Italy",
+  MX: "Mexico",
+  TW: "Taiwan",
+  CO: "Colombia",
+  VN: "Vietnam",
+  PL: "Poland",
+  TR: "Turkey",
+  KR: "South Korea",
+  AU: "Australia",
+  PH: "Philippines",
+  EG: "Egypt",
+  PT: "Portugal",
+  BD: "Bangladesh",
+  SE: "Sweden",
+  CL: "Chile",
+  TH: "Thailand",
+  NG: "Nigeria",
+  PK: "Pakistan",
+  FI: "Finland",
+  PE: "Peru",
+  CH: "Switzerland",
+  MY: "Malaysia",
+  RO: "Romania",
+  BE: "Belgium",
+  MA: "Morocco",
+  ZA: "South Africa",
+  UA: "Ukraine",
+  VE: "Venezuela",
+  KE: "Kenya",
+  IL: "Israel",
+  AT: "Austria",
+  DZ: "Algeria",
+  CZ: "Czechia",
+  NP: "Nepal",
+  DO: "Dominican Republic",
+  DK: "Denmark",
+  EC: "Ecuador",
+  AE: "UAE",
+  TN: "Tunisia",
+  NO: "Norway",
+  SA: "Saudi Arabia",
+  BY: "Belarus",
+  GH: "Ghana",
+  RS: "Serbia",
+  NZ: "New Zealand",
+  ET: "Ethiopia",
+  IE: "Ireland",
+  BO: "Bolivia",
+  GR: "Greece",
+  HU: "Hungary",
+  UY: "Uruguay",
+  UZ: "Uzbekistan",
+  LK: "Sri Lanka",
+  BG: "Bulgaria",
+  CR: "Costa Rica",
+  PY: "Paraguay",
+  KH: "Cambodia",
+  KZ: "Kazakhstan",
+  LT: "Lithuania",
+  EE: "Estonia",
+  UG: "Uganda",
+  SK: "Slovakia",
+  LV: "Latvia",
+  IQ: "Iraq",
+  HR: "Croatia",
+  CM: "Cameroon",
+  ZW: "Zimbabwe",
+  YE: "Yemen",
+  JO: "Jordan",
+  PA: "Panama",
+  QA: "Qatar",
+  MD: "Moldova",
+  TZ: "Tanzania",
+  NI: "Nicaragua",
+  GE: "Georgia",
+  SI: "Slovenia",
+  SN: "Senegal",
+  BA: "Bosnia",
+  BJ: "Benin",
+  GT: "Guatemala",
+  HN: "Honduras",
+  OM: "Oman",
+}
+
+const flag = (code: string) => String.fromCodePoint(...[...code].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65))
+
+const fill = (code: string) => {
+  const val = countries[code]
+  if (!val) return "var(--color-border-weak)"
+  const t = Math.pow(Math.log(val) / Math.log(maxCountry), 1.5)
+  const s = 50 + t * 40
+  const l = 92 - t * 60
+  return `hsl(220, ${s}%, ${l}%)`
+}
+
+export default function Rankings() {
+  const [active, setActive] = createSignal<number | null>(null)
+  const [pos, setPos] = createSignal({ x: 0, y: 0 })
+  const [expanded, setExpanded] = createSignal(false)
+  const [shareActive, setShareActive] = createSignal<number | null>(null)
+  const [sharePos, setSharePos] = createSignal({ x: 0, y: 0 })
+  const [mapHover, setMapHover] = createSignal<string | null>(null)
+  const [mapPos, setMapPos] = createSignal({ x: 0, y: 0 })
+
+  return (
+    <main data-page="zen" data-route="rankings">
+      <Title>Model Rankings</Title>
+      <LocaleLinks path="/rankings" />
+
+      <div data-component="container">
+        <Header zen hideGetStarted />
+
+        <div data-component="content">
+          <section data-component="hero" data-variant="rankings">
+            <div data-slot="hero-copy">
+              <h1>Model Rankings</h1>
+              <p>
+                See which models are winning real usage, how the mix shifts over time, and where momentum is moving each
+                week.
+              </p>
+            </div>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Usage</h3>
+            <div data-slot="chart">
+              <div
+                data-slot="bars"
+                onMouseLeave={() => setActive(null)}
+                onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}
+              >
+                <For each={usage}>
+                  {(week, i) => (
+                    <div
+                      data-slot="bar-group"
+                      data-active={active() === i() ? "" : undefined}
+                      data-dimmed={active() !== null && active() !== i() ? "" : undefined}
+                      onMouseEnter={() => setActive(i())}
+                    >
+                      <span data-slot="bar-label">{fmt(week.total)}</span>
+                      <div data-slot="bar-wrap">
+                        <div data-slot="bar" style={{ height: `${(week.total / max) * 100}%` }}>
+                          <For each={week.segments}>
+                            {(seg) => (
+                              <span
+                                style={{
+                                  flex: String(seg.tokens),
+                                  background: seg.color,
+                                }}
+                              />
+                            )}
+                          </For>
+                        </div>
+                      </div>
+                      <span data-slot="bar-week">{week.week}</span>
+                    </div>
+                  )}
+                </For>
+              </div>
+              <Show when={active() !== null}>
+                <div
+                  data-slot="tooltip"
+                  style={{
+                    left: `${pos().x + 16}px`,
+                    top: `${pos().y - 16}px`,
+                  }}
+                >
+                  <strong>{usage[active()!].week}</strong>
+                  <span data-slot="tooltip-total">{fmt(usage[active()!].total)} total</span>
+                  <For each={usage[active()!].segments.filter((s) => s.tokens > 0)}>
+                    {(seg) => (
+                      <span data-slot="tooltip-row">
+                        <i style={{ background: seg.color }} />
+                        <span>{seg.model}</span>
+                        <span>{fmt(seg.tokens)}</span>
+                      </span>
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <div data-slot="legend">
+                <For each={models}>
+                  {(m) => (
+                    <span data-slot="legend-item">
+                      <i style={{ background: m.color }} />
+                      {m.name}
+                    </span>
+                  )}
+                </For>
+                <span data-slot="legend-item">
+                  <i style={{ background: "rgba(148, 163, 184, 0.35)" }} />
+                  Other
+                </span>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Leaderboard</h3>
+            <p data-slot="subtitle">Week of Mar 24 — top models by token usage.</p>
+            <div data-slot="lb-podium">
+              <For each={leaderboard.slice(0, 3)}>
+                {(row) => (
+                  <div data-slot="lb-podium-item" data-rank={row.rank}>
+                    <span data-slot="lb-podium-rank">{row.rank}</span>
+                    <strong>{row.model}</strong>
+                    <span data-slot="lb-podium-tokens">{fmt(row.tokens)}</span>
+                  </div>
+                )}
+              </For>
+            </div>
+            <div data-slot="leaderboard">
+              <For
+                each={[
+                  leaderboard.slice(3, expanded() ? 13 : 8),
+                  leaderboard.slice(expanded() ? 13 : 8, expanded() ? leaderboard.length : 13),
+                ]}
+              >
+                {(col) => (
+                  <div data-slot="lb-col">
+                    <For each={col}>
+                      {(row) => (
+                        <article data-slot="lb-row">
+                          <span data-slot="lb-rank">{row.rank}.</span>
+                          <div data-slot="lb-info">
+                            <strong>{row.model}</strong>
+                          </div>
+                          <span data-slot="lb-tokens">{fmt(row.tokens)}</span>
+                        </article>
+                      )}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </div>
+            <Show when={leaderboard.length > 13}>
+              <button data-slot="lb-toggle" onClick={() => setExpanded(!expanded())}>
+                {expanded() ? "Show less" : "Show all"}
+              </button>
+            </Show>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Market Share</h3>
+            <div data-slot="chart">
+              <div
+                data-slot="share-bars"
+                onMouseLeave={() => setShareActive(null)}
+                onMouseMove={(e) => setSharePos({ x: e.clientX, y: e.clientY })}
+              >
+                <For each={share}>
+                  {(week, i) => (
+                    <div
+                      data-slot="share-col"
+                      data-dimmed={shareActive() !== null && shareActive() !== i() ? "" : undefined}
+                      onMouseEnter={() => setShareActive(i())}
+                    >
+                      <div data-slot="share-stack">
+                        <For each={week.segments}>
+                          {(seg) => <span style={{ flex: String(seg.pct), background: seg.color }} />}
+                        </For>
+                      </div>
+                      <span data-slot="share-week">{week.week}</span>
+                    </div>
+                  )}
+                </For>
+              </div>
+              <Show when={shareActive() !== null}>
+                <div
+                  data-slot="tooltip"
+                  style={{
+                    left: `${sharePos().x + 16}px`,
+                    top: `${sharePos().y - 16}px`,
+                  }}
+                >
+                  <strong>{share[shareActive()!].week}</strong>
+                  <span data-slot="tooltip-total">{fmt(share[shareActive()!].total)} total</span>
+                  <For each={share[shareActive()!].segments.filter((s) => s.tokens > 0)}>
+                    {(seg) => (
+                      <span data-slot="tooltip-row">
+                        <i style={{ background: seg.color }} />
+                        <span>{seg.provider}</span>
+                        <span>{seg.pct.toFixed(1)}%</span>
+                      </span>
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <div data-slot="legend">
+                <For each={providers}>
+                  {(p) => (
+                    <span data-slot="legend-item">
+                      <i style={{ background: p.color }} />
+                      {p.name}
+                    </span>
+                  )}
+                </For>
+              </div>
+            </div>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Token Cost</h3>
+            <p data-slot="subtitle">Price per 1M tokens on OpenCode Zen.</p>
+            <div data-slot="cost-list">
+              <For each={grouped}>
+                {(group) => (
+                  <div data-slot="cost-group">
+                    <For each={group.models}>
+                      {(row) => {
+                        const p = pricing[row.model]
+                        const eff = effective(p)
+                        return (
+                          <div data-slot="cost-row">
+                            <div data-slot="cost-main">
+                              <span data-slot="pricing-model">{row.model}</span>
+                              <span data-slot="pricing-effective">{price(eff)}</span>
+                              <span data-slot="cost-bar-wrap">
+                                <span data-slot="cost-bar" style={{ width: `${(eff / maxEffective) * 100}%` }} />
+                              </span>
+                            </div>
+                            <div data-slot="cost-detail">
+                              <span>Input {price(p.input)}</span>
+                              <span>Output {price(p.output)}</span>
+                              <span>Cached {price(p.cached)}</span>
+                            </div>
+                          </div>
+                        )
+                      }}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </div>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Session Cost</h3>
+            <p data-slot="subtitle">Average cost per session on OpenCode Zen.</p>
+            <div data-slot="pricing-table">
+              <div data-slot="pricing-header" data-cols="3">
+                <span>Model</span>
+                <span>Cost / Session</span>
+                <span>Tokens / Session</span>
+              </div>
+              <For each={sessions}>
+                {(row) => (
+                  <div data-slot="pricing-row" data-cols="3">
+                    <span data-slot="pricing-model">{row.model}</span>
+                    <span data-slot="pricing-effective">${avg(row).toFixed(4)}</span>
+                    <span data-slot="tps-cell" title={fmtTokens(avgTokens(row))}>
+                      <span data-slot="tps-bar" style={{ width: `${(avgTokens(row) / maxTps) * 100}%` }} />
+                    </span>
+                  </div>
+                )}
+              </For>
+            </div>
+          </section>
+
+          <section data-component="rankings-section">
+            <h3>Token by Country</h3>
+            <div data-slot="map-wrap" onMouseLeave={() => setMapHover(null)}>
+              <svg
+                data-slot="world-map"
+                viewBox="30.767 241.591 784.077 458.627"
+                onMouseMove={(e) => setMapPos({ x: e.clientX, y: e.clientY })}
+              >
+                <For each={Object.entries(worldPaths)}>
+                  {([code, d]) => (
+                    <path
+                      d={d}
+                      fill={fill(code)}
+                      stroke="var(--color-background)"
+                      stroke-width="0.5"
+                      onMouseEnter={() => setMapHover(code)}
+                      onMouseLeave={() => setMapHover(null)}
+                    />
+                  )}
+                </For>
+              </svg>
+              <Show when={mapHover() && countries[mapHover()!]}>
+                <div
+                  data-slot="tooltip"
+                  style={{
+                    left: `${mapPos().x + 16}px`,
+                    top: `${mapPos().y - 16}px`,
+                  }}
+                >
+                  <strong>
+                    {flag(mapHover()!)} {names[mapHover()!] || mapHover()}
+                  </strong>
+                  <span data-slot="tooltip-total">{fmt(countries[mapHover()!])}</span>
+                </div>
+              </Show>
+            </div>
+          </section>
+
+          <Footer />
+        </div>
+      </div>
+
+      <Legal />
+    </main>
+  )
+}
--- a/packages/console/app/src/routes/world-paths.ts
+++ b/packages/console/app/src/routes/world-paths.ts
--- a/packages/opencode/package.json
+++ b/packages/opencode/package.json
@@ -54,7 +54,6 @@
    "@types/bun": "catalog:",
    "@types/cross-spawn": "catalog:",
    "@types/mime-types": "3.0.1",
-    "@types/npm-package-arg": "6.1.4",
    "@types/npmcli__arborist": "6.3.3",
    "@types/semver": "^7.5.8",
    "@types/turndown": "5.0.5",
@@ -136,7 +135,6 @@
    "jsonc-parser": "3.3.1",
    "mime-types": "3.0.2",
    "minimatch": "10.0.3",
-    "npm-package-arg": "13.0.2",
    "open": "10.1.2",
    "opencode-gitlab-auth": "2.0.1",
    "opencode-poe-auth": "0.0.1",
--- a/packages/opencode/src/cli/cmd/tui/app.tsx
+++ b/packages/opencode/src/cli/cmd/tui/app.tsx
@@ -125,16 +125,14 @@ import type { EventSource } from "./context/sdk"
 import { DialogVariant } from "./component/dialog-variant"

 function rendererConfig(_config: TuiConfig.Info): CliRendererConfig {
-  const mouseEnabled = !Flag.OPENCODE_DISABLE_MOUSE && (_config.mouse ?? true)
-
  return {
+    externalOutputMode: "passthrough",
    targetFps: 60,
    gatherStats: false,
    exitOnCtrlC: false,
    useKittyKeyboard: { events: process.platform === "win32" },
    autoFocus: false,
    openConsoleOnError: false,
-    useMouse: mouseEnabled,
    consoleOptions: {
      keyBindings: [{ name: "y", ctrl: true, action: "copy-selection" }],
      onCopySelection: (text) => {
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -841,20 +841,8 @@ export function Prompt(props: PromptProps) {
    return !!current
  })

-  const suggestion = createMemo(() => {
-    if (!props.sessionID) return
-    if (store.mode !== "normal") return
-    if (store.prompt.input) return
-    const current = status()
-    if (current.type !== "idle") return
-    const value = current.suggestion?.trim()
-    if (!value) return
-    return value
-  })
-
  const placeholderText = createMemo(() => {
    if (props.showPlaceholder === false) return undefined
-    if (suggestion()) return suggestion()
    if (store.mode === "shell") {
      if (!shell().length) return undefined
      const example = shell()[store.placeholder % shell().length]
@@ -945,16 +933,6 @@ export function Prompt(props: PromptProps) {
                  e.preventDefault()
                  return
                }
-                if (!store.prompt.input && e.name === "right" && !e.ctrl && !e.meta && !e.shift && !e.super) {
-                  const value = suggestion()
-                  if (value) {
-                    input.setText(value)
-                    setStore("prompt", "input", value)
-                    input.gotoBufferEnd()
-                    e.preventDefault()
-                    return
-                  }
-                }
                // Check clipboard for images before terminal-handled paste runs.
                // This helps terminals that forward Ctrl+V to the app; Windows
                // Terminal 1.25+ usually handles Ctrl+V before this path.
--- a/packages/opencode/src/cli/cmd/tui/context/sync.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/sync.tsx
@@ -233,7 +233,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
        }

        case "session.status": {
-          setStore("session_status", event.properties.sessionID, reconcile(event.properties.status))
+          setStore("session_status", event.properties.sessionID, event.properties.status)
          break
        }

--- a/packages/opencode/src/config/tui-schema.ts
+++ b/packages/opencode/src/config/tui-schema.ts
@@ -22,7 +22,6 @@ export const TuiOptions = z.object({
    .enum(["auto", "stacked"])
    .optional()
    .describe("Control diff rendering style: 'auto' adapts to terminal width, 'stacked' always shows single column"),
-  mouse: z.boolean().optional().describe("Enable or disable mouse capture (default: true)"),
 })

 export const TuiInfo = z
--- a/packages/opencode/src/flag/flag.ts
+++ b/packages/opencode/src/flag/flag.ts
@@ -31,7 +31,6 @@ export namespace Flag {
  export const OPENCODE_ENABLE_EXPERIMENTAL_MODELS = truthy("OPENCODE_ENABLE_EXPERIMENTAL_MODELS")
  export const OPENCODE_DISABLE_AUTOCOMPACT = truthy("OPENCODE_DISABLE_AUTOCOMPACT")
  export const OPENCODE_DISABLE_MODELS_FETCH = truthy("OPENCODE_DISABLE_MODELS_FETCH")
-  export const OPENCODE_DISABLE_MOUSE = truthy("OPENCODE_DISABLE_MOUSE")
  export const OPENCODE_DISABLE_CLAUDE_CODE = truthy("OPENCODE_DISABLE_CLAUDE_CODE")
  export const OPENCODE_DISABLE_CLAUDE_CODE_PROMPT =
    OPENCODE_DISABLE_CLAUDE_CODE || truthy("OPENCODE_DISABLE_CLAUDE_CODE_PROMPT")
@@ -73,7 +72,6 @@ export namespace Flag {
  export const OPENCODE_EXPERIMENTAL_PLAN_MODE = OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_PLAN_MODE")
  export const OPENCODE_EXPERIMENTAL_WORKSPACES = OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_WORKSPACES")
  export const OPENCODE_EXPERIMENTAL_MARKDOWN = !falsy("OPENCODE_EXPERIMENTAL_MARKDOWN")
-  export const OPENCODE_EXPERIMENTAL_NEXT_PROMPT = truthy("OPENCODE_EXPERIMENTAL_NEXT_PROMPT")
  export const OPENCODE_MODELS_URL = process.env["OPENCODE_MODELS_URL"]
  export const OPENCODE_MODELS_PATH = process.env["OPENCODE_MODELS_PATH"]
  export const OPENCODE_DISABLE_EMBEDDED_WEB_UI = truthy("OPENCODE_DISABLE_EMBEDDED_WEB_UI")
--- a/packages/opencode/src/npm/index.ts
+++ b/packages/opencode/src/npm/index.ts
@@ -11,7 +11,6 @@ import { Arborist } from "@npmcli/arborist"

 export namespace Npm {
  const log = Log.create({ service: "npm" })
-  const illegal = process.platform === "win32" ? new Set(["<", ">", ":", '"', "|", "?", "*"]) : undefined

  export const InstallFailedError = NamedError.create(
    "NpmInstallFailedError",
@@ -20,13 +19,8 @@ export namespace Npm {
    }),
  )

-  export function sanitize(pkg: string) {
-    if (!illegal) return pkg
-    return Array.from(pkg, (char) => (illegal.has(char) || char.charCodeAt(0) < 32 ? "_" : char)).join("")
-  }
-
  function directory(pkg: string) {
-    return path.join(Global.Path.cache, "packages", sanitize(pkg))
+    return path.join(Global.Path.cache, "packages", pkg)
  }

  function resolveEntryPoint(name: string, dir: string) {
--- a/packages/opencode/src/plugin/shared.ts
+++ b/packages/opencode/src/plugin/shared.ts
@@ -1,6 +1,5 @@
 import path from "path"
 import { fileURLToPath, pathToFileURL } from "url"
-import npa from "npm-package-arg"
 import semver from "semver"
 import { Npm } from "@/npm"
 import { Filesystem } from "@/util/filesystem"
@@ -13,24 +12,11 @@ export function isDeprecatedPlugin(spec: string) {
  return DEPRECATED_PLUGIN_PACKAGES.some((pkg) => spec.includes(pkg))
 }

-function parse(spec: string) {
-  try {
-    return npa(spec)
-  } catch {}
-}
-
 export function parsePluginSpecifier(spec: string) {
-  const hit = parse(spec)
-  if (hit?.type === "alias" && !hit.name) {
-    const sub = (hit as npa.AliasResult).subSpec
-    if (sub?.name) {
-      const version = !sub.rawSpec || sub.rawSpec === "*" ? "latest" : sub.rawSpec
-      return { pkg: sub.name, version }
-    }
-  }
-  if (!hit?.name) return { pkg: spec, version: "" }
-  if (hit.raw === hit.name) return { pkg: hit.name, version: "latest" }
-  return { pkg: hit.name, version: hit.rawSpec }
+  const lastAt = spec.lastIndexOf("@")
+  const pkg = lastAt > 0 ? spec.substring(0, lastAt) : spec
+  const version = lastAt > 0 ? spec.substring(lastAt + 1) : "latest"
+  return { pkg, version }
 }

 export type PluginSource = "file" | "npm"
@@ -204,11 +190,9 @@ export async function checkPluginCompatibility(target: string, opencodeVersion:
  }
 }

-export async function resolvePluginTarget(spec: string) {
+export async function resolvePluginTarget(spec: string, parsed = parsePluginSpecifier(spec)) {
  if (isPathPluginSpec(spec)) return resolvePathPluginTarget(spec)
-  const hit = parse(spec)
-  const pkg = hit?.name && hit.raw === hit.name ? `${hit.name}@latest` : spec
-  const result = await Npm.add(pkg)
+  const result = await Npm.add(parsed.pkg + "@" + parsed.version)
  return result.directory
 }

--- a/packages/opencode/src/session/prompt.ts
+++ b/packages/opencode/src/session/prompt.ts
@@ -20,7 +20,6 @@ import { Plugin } from "../plugin"
 import PROMPT_PLAN from "../session/prompt/plan.txt"
 import BUILD_SWITCH from "../session/prompt/build-switch.txt"
 import MAX_STEPS from "../session/prompt/max-steps.txt"
-import PROMPT_SUGGEST_NEXT from "../session/prompt/suggest-next.txt"
 import { ToolRegistry } from "../tool/registry"
 import { Runner } from "@/effect/runner"
 import { MCP } from "../mcp"
@@ -250,80 +249,6 @@ export namespace SessionPrompt {
          )
      })

-      const suggest = Effect.fn("SessionPrompt.suggest")(function* (input: {
-        session: Session.Info
-        sessionID: SessionID
-        message: MessageV2.WithParts
-      }) {
-        if (input.session.parentID) return
-        const message = input.message.info
-        if (message.role !== "assistant") return
-        if (message.error) return
-        if (!message.finish) return
-        if (["tool-calls", "unknown"].includes(message.finish)) return
-        if ((yield* status.get(input.sessionID)).type !== "idle") return
-
-        // Use the same model for prompt-cache hit on the conversation prefix
-        const model = yield* Effect.promise(async () =>
-          Provider.getModel(message.providerID, message.modelID).catch(() => undefined),
-        )
-        if (!model) return
-
-        const ag = yield* agents.get(message.agent ?? "code")
-        if (!ag) return
-
-        // Full message history so the cached KV from the main conversation is reused
-        const msgs = yield* MessageV2.filterCompactedEffect(input.sessionID)
-        const real = (item: MessageV2.WithParts) =>
-          item.info.role === "user" && !item.parts.every((part) => "synthetic" in part && part.synthetic)
-        const parent = msgs.find((item) => item.info.id === message.parentID)
-        const user = parent && real(parent) ? parent.info : msgs.findLast((item) => real(item))?.info
-        if (!user || user.role !== "user") return
-
-        // Rebuild system prompt identical to the main loop for cache hit
-        const skills = yield* Effect.promise(() => SystemPrompt.skills(ag))
-        const env = yield* Effect.promise(() => SystemPrompt.environment(model))
-        const instructions = yield* instruction.system().pipe(Effect.orDie)
-        const modelMsgs = yield* Effect.promise(() => MessageV2.toModelMessages(msgs, model))
-        const system = [...env, ...(skills ? [skills] : []), ...instructions]
-
-        const text = yield* Effect.promise(async (signal) => {
-          const result = await LLM.stream({
-            agent: ag,
-            user,
-            system,
-            small: false,
-            tools: {},
-            model,
-            abort: signal,
-            sessionID: input.sessionID,
-            retries: 1,
-            toolChoice: "none",
-            // Append suggestion instruction after the full conversation
-            messages: [...modelMsgs, { role: "user" as const, content: PROMPT_SUGGEST_NEXT }],
-          })
-          return result.text
-        })
-
-        const line = text
-          .replace(/<think>[\s\S]*?<\/think>\s*/g, "")
-          .split("\n")
-          .map((item) => item.trim())
-          .find((item) => item.length > 0)
-          ?.replace(/^["'`]+|["'`]+$/g, "")
-        if (!line) return
-
-        const tag = line
-          .toUpperCase()
-          .replace(/[\s-]+/g, "_")
-          .replace(/[^A-Z_]/g, "")
-        if (tag === "NO_SUGGESTION") return
-
-        const suggestion = line.length > 110 ? line.slice(0, 107) + "..." : line
-        if ((yield* status.get(input.sessionID)).type !== "idle") return
-        yield* status.suggest(input.sessionID, suggestion)
-      })
-
      const insertReminders = Effect.fn("SessionPrompt.insertReminders")(function* (input: {
        messages: MessageV2.WithParts[]
        agent: Agent.Info
@@ -1394,13 +1319,7 @@ NOTE: At any point in time through this workflow you should feel free to ask the
          }

          if (input.noReply === true) return message
-          const result = yield* loop({ sessionID: input.sessionID })
-          yield* suggest({
-            session,
-            sessionID: input.sessionID,
-            message: result,
-          }).pipe(Effect.ignore, Effect.forkIn(scope))
-          return result
+          return yield* loop({ sessionID: input.sessionID })
        },
      )

--- a/packages/opencode/src/session/prompt/suggest-next.txt
+++ b/packages/opencode/src/session/prompt/suggest-next.txt
@@ -1,21 +0,0 @@
-You are generating a suggested next user message for the current conversation.
-
-Goal:
- Suggest a useful next step that keeps momentum.
-
-Rules:
- Output exactly one line, 110 characters max. Be concise.
- Write as the user speaking to the assistant (for example: "Can you...", "Help me...", "Let's...").
- Match the user's tone and language; keep it natural and human.
- Prefer a concrete action over a broad question.
- If the conversation is vague or small-talk, steer toward a practical starter request.
- If there is no meaningful or appropriate next step to suggest, output exactly: NO_SUGGESTION
- Avoid corporate or robotic phrasing.
- Avoid asking multiple discovery questions in one sentence.
- Do not include quotes, labels, markdown, or explanations.
-
-Examples:
- Greeting context -> "Can you scan this repo and suggest the best first task to tackle?"
- Bug-fix context -> "Can you reproduce this bug and propose the smallest safe fix?"
- Feature context -> "Let's implement this incrementally; start with the MVP version first."
- Conversation is complete -> "NO_SUGGESTION"
--- a/packages/opencode/src/session/status.ts
+++ b/packages/opencode/src/session/status.ts
@@ -11,7 +11,6 @@ export namespace SessionStatus {
    .union([
      z.object({
        type: z.literal("idle"),
-        suggestion: z.string().optional(),
      }),
      z.object({
        type: z.literal("retry"),
@@ -49,7 +48,6 @@ export namespace SessionStatus {
    readonly get: (sessionID: SessionID) => Effect.Effect<Info>
    readonly list: () => Effect.Effect<Map<SessionID, Info>>
    readonly set: (sessionID: SessionID, status: Info) => Effect.Effect<void>
-    readonly suggest: (sessionID: SessionID, suggestion: string) => Effect.Effect<void>
  }

  export class Service extends ServiceMap.Service<Service, Interface>()("@opencode/SessionStatus") {}
@@ -83,17 +81,7 @@ export namespace SessionStatus {
        data.set(sessionID, status)
      })

-      const suggest = Effect.fn("SessionStatus.suggest")(function* (sessionID: SessionID, suggestion: string) {
-        const data = yield* InstanceState.get(state)
-        const current = data.get(sessionID)
-        if (current && current.type !== "idle") return
-        const status: Info = { type: "idle", suggestion }
-        // only publish Status so the TUI sees the suggestion;
-        // skip Event.Idle to avoid spurious plugin notifications
-        yield* bus.publish(Event.Status, { sessionID, status })
-      })
-
-      return Service.of({ get, list, set, suggest })
+      return Service.of({ get, list, set })
    }),
  )

@@ -111,8 +99,4 @@ export namespace SessionStatus {
  export async function set(sessionID: SessionID, status: Info) {
    return runPromise((svc) => svc.set(sessionID, status))
  }
-
-  export async function suggest(sessionID: SessionID, suggestion: string) {
-    return runPromise((svc) => svc.suggest(sessionID, suggestion))
-  }
 }
--- a/packages/opencode/test/npm.test.ts
+++ b/packages/opencode/test/npm.test.ts
@@ -1,18 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { Npm } from "../src/npm"
-
-const win = process.platform === "win32"
-
-describe("Npm.sanitize", () => {
-  test("keeps normal scoped package specs unchanged", () => {
-    expect(Npm.sanitize("@opencode/acme")).toBe("@opencode/acme")
-    expect(Npm.sanitize("@opencode/acme@1.0.0")).toBe("@opencode/acme@1.0.0")
-    expect(Npm.sanitize("prettier")).toBe("prettier")
-  })
-
-  test("handles git https specs", () => {
-    const spec = "acme@git+https://github.com/opencode/acme.git"
-    const expected = win ? "acme@git+https_//github.com/opencode/acme.git" : spec
-    expect(Npm.sanitize(spec)).toBe(expected)
-  })
-})
--- a/packages/opencode/test/plugin/shared.test.ts
+++ b/packages/opencode/test/plugin/shared.test.ts
@@ -1,88 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { parsePluginSpecifier } from "../../src/plugin/shared"
-
-describe("parsePluginSpecifier", () => {
-  test("parses standard npm package without version", () => {
-    expect(parsePluginSpecifier("acme")).toEqual({
-      pkg: "acme",
-      version: "latest",
-    })
-  })
-
-  test("parses standard npm package with version", () => {
-    expect(parsePluginSpecifier("acme@1.0.0")).toEqual({
-      pkg: "acme",
-      version: "1.0.0",
-    })
-  })
-
-  test("parses scoped npm package without version", () => {
-    expect(parsePluginSpecifier("@opencode/acme")).toEqual({
-      pkg: "@opencode/acme",
-      version: "latest",
-    })
-  })
-
-  test("parses scoped npm package with version", () => {
-    expect(parsePluginSpecifier("@opencode/acme@1.0.0")).toEqual({
-      pkg: "@opencode/acme",
-      version: "1.0.0",
-    })
-  })
-
-  test("parses package with git+https url", () => {
-    expect(parsePluginSpecifier("acme@git+https://github.com/opencode/acme.git")).toEqual({
-      pkg: "acme",
-      version: "git+https://github.com/opencode/acme.git",
-    })
-  })
-
-  test("parses scoped package with git+https url", () => {
-    expect(parsePluginSpecifier("@opencode/acme@git+https://github.com/opencode/acme.git")).toEqual({
-      pkg: "@opencode/acme",
-      version: "git+https://github.com/opencode/acme.git",
-    })
-  })
-
-  test("parses package with git+ssh url containing another @", () => {
-    expect(parsePluginSpecifier("acme@git+ssh://git@github.com/opencode/acme.git")).toEqual({
-      pkg: "acme",
-      version: "git+ssh://git@github.com/opencode/acme.git",
-    })
-  })
-
-  test("parses scoped package with git+ssh url containing another @", () => {
-    expect(parsePluginSpecifier("@opencode/acme@git+ssh://git@github.com/opencode/acme.git")).toEqual({
-      pkg: "@opencode/acme",
-      version: "git+ssh://git@github.com/opencode/acme.git",
-    })
-  })
-
-  test("parses unaliased git+ssh url", () => {
-    expect(parsePluginSpecifier("git+ssh://git@github.com/opencode/acme.git")).toEqual({
-      pkg: "git+ssh://git@github.com/opencode/acme.git",
-      version: "",
-    })
-  })
-
-  test("parses npm alias using the alias name", () => {
-    expect(parsePluginSpecifier("acme@npm:@opencode/acme@1.0.0")).toEqual({
-      pkg: "acme",
-      version: "npm:@opencode/acme@1.0.0",
-    })
-  })
-
-  test("parses bare npm protocol specifier using the target package", () => {
-    expect(parsePluginSpecifier("npm:@opencode/acme@1.0.0")).toEqual({
-      pkg: "@opencode/acme",
-      version: "1.0.0",
-    })
-  })
-
-  test("parses unversioned npm protocol specifier", () => {
-    expect(parsePluginSpecifier("npm:@opencode/acme")).toEqual({
-      pkg: "@opencode/acme",
-      version: "latest",
-    })
-  })
-})
--- a/packages/sdk/js/src/v2/gen/types.gen.ts
+++ b/packages/sdk/js/src/v2/gen/types.gen.ts
@@ -126,7 +126,6 @@ export type EventPermissionReplied = {
 export type SessionStatus =
  | {
      type: "idle"
-      suggestion?: string
    }
  | {
      type: "retry"
--- a/packages/web/src/content/docs/cli.mdx
+++ b/packages/web/src/content/docs/cli.mdx
@@ -573,7 +573,6 @@ OpenCode can be configured using environment variables.
 | `OPENCODE_DISABLE_CLAUDE_CODE_PROMPT` | boolean | Disable reading `~/.claude/CLAUDE.md`             |
 | `OPENCODE_DISABLE_CLAUDE_CODE_SKILLS` | boolean | Disable loading `.claude/skills`                  |
 | `OPENCODE_DISABLE_MODELS_FETCH`       | boolean | Disable fetching models from remote sources       |
-| `OPENCODE_DISABLE_MOUSE`              | boolean | Disable mouse capture in the TUI                  |
 | `OPENCODE_FAKE_VCS`                   | string  | Fake VCS provider for testing purposes            |
 | `OPENCODE_DISABLE_FILETIME_CHECK`     | boolean | Disable file time checking for optimization       |
 | `OPENCODE_CLIENT`                     | string  | Client identifier (defaults to `cli`)             |
--- a/packages/web/src/content/docs/config.mdx
+++ b/packages/web/src/content/docs/config.mdx
@@ -272,8 +272,7 @@ Use a dedicated `tui.json` (or `tui.jsonc`) file for TUI-specific settings.
  "scroll_acceleration": {
    "enabled": true
  },
-  "diff_style": "auto",
-  "mouse": true
+  "diff_style": "auto"
 }
 ```

@@ -281,6 +280,8 @@ Use `OPENCODE_TUI_CONFIG` to point to a custom TUI config file.

 Legacy `theme`, `keybinds`, and `tui` keys in `opencode.json` are deprecated and automatically migrated when possible.

+[Learn more about TUI configuration here](/docs/tui#configure).
+
 ---

 ### Server
--- a/packages/web/src/content/docs/tui.mdx
+++ b/packages/web/src/content/docs/tui.mdx
@@ -368,8 +368,7 @@ You can customize TUI behavior through `tui.json` (or `tui.jsonc`).
  "scroll_acceleration": {
    "enabled": true
  },
-  "diff_style": "auto",
-  "mouse": true
+  "diff_style": "auto"
 }
 ```

@@ -382,7 +381,6 @@ This is separate from `opencode.json`, which configures server/runtime behavior.
 - `scroll_acceleration.enabled` - Enable macOS-style scroll acceleration for smooth, natural scrolling. When enabled, scroll speed increases with rapid scrolling gestures and stays precise for slower movements. **This setting takes precedence over `scroll_speed` and overrides it when enabled.**
 - `scroll_speed` - Controls how fast the TUI scrolls when using scroll commands (minimum: `0.001`, supports decimal values). Defaults to `3`. **Note: This is ignored if `scroll_acceleration.enabled` is set to `true`.**
 - `diff_style` - Controls diff rendering. `"auto"` adapts to terminal width, `"stacked"` always shows a single-column layout.
- `mouse` - Enable or disable mouse capture in the TUI (default: `true`). When disabled, the terminal's native mouse selection/scrolling behavior is preserved.

 Use `OPENCODE_TUI_CONFIG` to load a custom TUI config path.
Author	SHA1	Message	Date
Frank	a34bcf9880	Merge branch 'dev' into rankings	2026-04-05 03:48:59 -04:00
Frank	7a881b6950	sync	2026-04-01 00:49:29 -04:00