Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Adam
|
cd08fb9248 |
@@ -1393,6 +1393,10 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="empty-state"][data-compact="true"] {
|
||||
min-height: 172px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="usage-chart"] svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -1789,6 +1793,11 @@
|
||||
transform 140ms ease;
|
||||
}
|
||||
|
||||
[data-page="stats"] a[data-component="leader-card"],
|
||||
[data-page="stats"] a[data-component="leader-card"]:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="rank"],
|
||||
[data-page="stats"] [data-slot="delta"][data-negative="true"] {
|
||||
color: var(--stats-faint);
|
||||
@@ -2302,6 +2311,354 @@
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"],
|
||||
[data-page="stats"] [data-section="model-panel"] {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
box-shadow:
|
||||
inset 0 -1px var(--stats-line),
|
||||
inset 1px 0 var(--stats-line),
|
||||
inset -1px 0 var(--stats-line);
|
||||
color: var(--stats-text);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] {
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
padding: 120px 40px 64px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-grid"] {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 240px;
|
||||
gap: 40px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-copy"] {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-back-link"] {
|
||||
width: fit-content;
|
||||
color: var(--stats-faint);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-back-link"]::before {
|
||||
content: "‹ ";
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"] {
|
||||
gap: 8px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"] svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] h1 {
|
||||
max-width: 980px;
|
||||
color: var(--stats-text);
|
||||
font-size: clamp(38px, 7vw, 72px);
|
||||
font-weight: 500;
|
||||
line-height: 0.95;
|
||||
letter-spacing: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-copy"] p {
|
||||
max-width: 720px;
|
||||
color: var(--stats-muted);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-rank-panel"] {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 164px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-rank-panel"] span,
|
||||
[data-page="stats"] [data-component="model-rank-panel"] p {
|
||||
color: var(--stats-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-rank-panel"] strong {
|
||||
color: var(--stats-text);
|
||||
font-size: 64px;
|
||||
font-weight: 500;
|
||||
line-height: 0.95;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-panel"] {
|
||||
padding: 80px 40px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric-grid"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"] {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"] {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
min-height: 132px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"] span,
|
||||
[data-page="stats"] [data-component="model-metric"] p {
|
||||
color: var(--stats-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"] strong {
|
||||
min-width: 0;
|
||||
color: var(--stats-text);
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"][data-state="positive"] strong {
|
||||
color: #198b43;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"][data-state="negative"] strong {
|
||||
color: #b82d35;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-usage-chart"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--model-usage-count), minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
height: 392px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-column"] {
|
||||
display: grid;
|
||||
grid-template-rows: 42px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-label"] {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
color: var(--stats-faint);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-label"] strong {
|
||||
color: var(--stats-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-label"] span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-column"][data-label-hidden="true"] [data-slot="model-usage-label"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-track"] {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
background: var(--stats-dot);
|
||||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
|
||||
mask-position: center top;
|
||||
mask-repeat: repeat;
|
||||
mask-size: 6px 6px;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
|
||||
-webkit-mask-position: center top;
|
||||
-webkit-mask-repeat: repeat;
|
||||
-webkit-mask-size: 6px 6px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-track"] i {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: var(--model-usage-fill);
|
||||
background: var(--stats-accent);
|
||||
font-style: normal;
|
||||
mask-image: none;
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-split-grid"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-panel"] {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-layer);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-panel"] h2 {
|
||||
color: var(--stats-text);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] strong,
|
||||
[data-page="stats"] [data-component="model-mix-row"] span,
|
||||
[data-page="stats"] [data-component="model-mix-row"] b {
|
||||
min-width: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] strong {
|
||||
color: var(--stats-text);
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] span {
|
||||
color: var(--stats-faint);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] b {
|
||||
color: var(--stats-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] i {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 5px;
|
||||
background: var(--stats-layer-2);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-mix-row"] em {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
display: block;
|
||||
width: var(--model-mix-fill);
|
||||
background: var(--stats-text);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] a {
|
||||
display: grid;
|
||||
grid-template-columns: 38px 24px minmax(0, 1fr) minmax(96px, auto) minmax(80px, auto);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--stats-line);
|
||||
background: var(--stats-layer);
|
||||
color: var(--stats-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] a:hover,
|
||||
[data-page="stats"] [data-component="model-peer-list"] a[data-active="true"] {
|
||||
border-color: var(--stats-line-strong);
|
||||
background: var(--stats-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] span,
|
||||
[data-page="stats"] [data-component="model-peer-list"] em,
|
||||
[data-page="stats"] [data-component="model-peer-list"] b {
|
||||
color: var(--stats-muted);
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--stats-muted);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--stats-text);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-page="stats"][data-theme="dark"],
|
||||
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) {
|
||||
color-scheme: dark;
|
||||
@@ -2614,7 +2971,9 @@
|
||||
[data-page="stats"] [data-section="market-share"],
|
||||
[data-page="stats"] [data-section="token-cost"],
|
||||
[data-page="stats"] [data-section="cache-ratio"],
|
||||
[data-page="stats"] [data-section="session-cost"] {
|
||||
[data-page="stats"] [data-section="session-cost"],
|
||||
[data-page="stats"] [data-section="model-hero"],
|
||||
[data-page="stats"] [data-section="model-panel"] {
|
||||
padding: 64px 32px;
|
||||
}
|
||||
}
|
||||
@@ -2642,6 +3001,29 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-grid"] {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-rank-panel"] {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric-grid"],
|
||||
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
|
||||
[data-page="stats"] [data-component="model-split-grid"] {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] a {
|
||||
grid-template-columns: 32px 22px minmax(0, 1fr) minmax(72px, auto);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="chart-footer"] {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
@@ -2746,7 +3128,9 @@
|
||||
[data-page="stats"] [data-section="market-share"],
|
||||
[data-page="stats"] [data-section="token-cost"],
|
||||
[data-page="stats"] [data-section="cache-ratio"],
|
||||
[data-page="stats"] [data-section="session-cost"] {
|
||||
[data-page="stats"] [data-section="session-cost"],
|
||||
[data-page="stats"] [data-section="model-hero"],
|
||||
[data-page="stats"] [data-section="model-panel"] {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
@@ -2762,6 +3146,69 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-grid"] {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="model-hero"] h1 {
|
||||
font-size: 38px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-hero-copy"] p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric-grid"],
|
||||
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
|
||||
[data-page="stats"] [data-component="model-split-grid"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-metric"] {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-usage-chart"] {
|
||||
grid-template-columns: repeat(var(--model-usage-count), 16px);
|
||||
width: calc(100% + 48px);
|
||||
height: 360px;
|
||||
margin-inline: -24px;
|
||||
padding-inline: 24px;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-usage-chart"]::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-label"] {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
width: max-content;
|
||||
max-width: 72px;
|
||||
transform: rotate(-90deg) translateX(-50%);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-slot="model-usage-label"] strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] a {
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto);
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-component="model-peer-list"] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
|
||||
@@ -5,7 +5,6 @@ import ibmPlexMonoRegularLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/
|
||||
import ibmPlexMonoMediumLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2?url"
|
||||
import ibmPlexMonoSemiBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2?url"
|
||||
import ibmPlexMonoBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Latin1.woff2?url"
|
||||
import opencodeWordmarkDark from "../asset/logo-ornate-dark.svg"
|
||||
import statsUnfurlRankings from "../asset/unfurl-rankings.png?url"
|
||||
import {
|
||||
getStatsHomeData,
|
||||
@@ -21,6 +20,16 @@ import { runtime } from "@opencode-ai/stats-core/runtime"
|
||||
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 {
|
||||
applyThemePreference,
|
||||
Footer,
|
||||
getGitHubStars,
|
||||
githubLink,
|
||||
Header,
|
||||
isThemePreference,
|
||||
themeStorageKey,
|
||||
type ThemePreference,
|
||||
} from "./stats-shell"
|
||||
|
||||
const products = ["All Users", "Zen", "Go"] as const
|
||||
const tokenProducts = ["Zen", "Go"] as const
|
||||
@@ -36,25 +45,6 @@ const statsHomeTitle = "OpenCode Stats"
|
||||
const statsHomeDescription = "OpenCode usage, market share, token cost, and session cost stats."
|
||||
const statsHomeFallbackUrl = "https://stats.opencode.ai"
|
||||
const statsUnfurlAlt = "OpenCode Stats wordmark on a dark patterned background"
|
||||
const headerLinks = [
|
||||
{ href: "#top-models", label: "Top Models" },
|
||||
{ href: "#leaderboard", label: "Leaderboard" },
|
||||
{ href: "#session-cost", label: "Session Cost" },
|
||||
{ href: "#token-cost", label: "Token Cost" },
|
||||
{ href: "#cache-ratio", label: "Cache Ratio" },
|
||||
{ href: "#market-share", label: "Market Share" },
|
||||
] as const
|
||||
const githubLink = {
|
||||
href: "https://github.com/anomalyco/opencode",
|
||||
apiHref: "https://api.github.com/repos/anomalyco/opencode",
|
||||
label: "GitHub",
|
||||
fallbackStars: "150K",
|
||||
ariaLabel: "Star OpenCode on GitHub",
|
||||
}
|
||||
const compactNumberFormatter = new Intl.NumberFormat("en", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
const usageColors = [
|
||||
"#ed6aff",
|
||||
"#a684ff",
|
||||
@@ -69,41 +59,16 @@ const usageColors = [
|
||||
"#ff6467",
|
||||
]
|
||||
const marketColors = ["#ed6aff", "#a684ff", "#7c86ff", "#51a2ff", "#00d3f2", "#00d5be", "#00bc7d", "#9ae600", "#ffb900"]
|
||||
const themePreferences = ["dark", "light", "system"] as const
|
||||
const themePreferenceLabels = {
|
||||
dark: "Dark",
|
||||
light: "Light",
|
||||
system: "System",
|
||||
} as const
|
||||
const themeStorageKey = "opencode:stats-theme"
|
||||
|
||||
type UsageProduct = (typeof products)[number]
|
||||
type TokenProduct = (typeof tokenProducts)[number]
|
||||
type UsageRange = (typeof ranges)[number]
|
||||
type ThemePreference = (typeof themePreferences)[number]
|
||||
|
||||
const getData = query(async () => {
|
||||
"use server"
|
||||
return runtime.runPromise(getStatsHomeData())
|
||||
}, "getStatsHomeData")
|
||||
|
||||
const getGitHubStars = query(async () => {
|
||||
"use server"
|
||||
return fetch(githubLink.apiHref, {
|
||||
headers: {
|
||||
Accept: "application/vnd.github+json",
|
||||
"X-GitHub-Api-Version": "2022-11-28",
|
||||
},
|
||||
})
|
||||
.then((response) => (response.ok ? response.json() : undefined))
|
||||
.then((body: unknown) =>
|
||||
body && typeof body === "object" && "stargazers_count" in body && typeof body.stargazers_count === "number"
|
||||
? compactNumberFormatter.format(body.stargazers_count)
|
||||
: githubLink.fallbackStars,
|
||||
)
|
||||
.catch(() => githubLink.fallbackStars)
|
||||
}, "getGitHubStars")
|
||||
|
||||
export default function StatsHome() {
|
||||
const event = getRequestEvent()
|
||||
event?.response.headers.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400")
|
||||
@@ -176,20 +141,6 @@ export default function StatsHome() {
|
||||
)
|
||||
}
|
||||
|
||||
function isThemePreference(value: string | null): value is ThemePreference {
|
||||
return value === "dark" || value === "light" || value === "system"
|
||||
}
|
||||
|
||||
function applyThemePreference(preference: ThemePreference) {
|
||||
if (typeof document === "undefined") return
|
||||
document.documentElement.dataset.statsTheme = preference
|
||||
if (preference === "system") {
|
||||
document.documentElement.style.removeProperty("color-scheme")
|
||||
return
|
||||
}
|
||||
document.documentElement.style.setProperty("color-scheme", preference)
|
||||
}
|
||||
|
||||
function Hero(props: { updatedAt: string | null }) {
|
||||
const [timeZone, setTimeZone] = createSignal("UTC")
|
||||
const [previousTimeZone, setPreviousTimeZone] = createSignal("UTC")
|
||||
@@ -929,10 +880,11 @@ function LeaderboardCard(props: {
|
||||
onActiveModelChange: (model: string | undefined) => void
|
||||
}) {
|
||||
return (
|
||||
<article
|
||||
<a
|
||||
data-component="leader-card"
|
||||
data-size={props.size}
|
||||
data-active={props.active ? "true" : undefined}
|
||||
href={`${import.meta.env.BASE_URL}models/${modelSlug(props.entry.model)}`}
|
||||
role="listitem"
|
||||
tabIndex={0}
|
||||
aria-label={`${String(props.entry.rank).padStart(2, "0")} ${props.entry.model} by ${props.entry.author}`}
|
||||
@@ -962,7 +914,7 @@ function LeaderboardCard(props: {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1561,415 +1513,11 @@ function formatSessionCost(value: number) {
|
||||
return `$${value.toFixed(4)}`
|
||||
}
|
||||
|
||||
function Header(props: { githubStars: string }) {
|
||||
const [menuOpen, setMenuOpen] = createSignal(false)
|
||||
const [menuViewport, setMenuViewport] = createSignal(false)
|
||||
|
||||
createEffect(() => {
|
||||
if (typeof window === "undefined") return
|
||||
const media = window.matchMedia("(max-width: 74.999rem)")
|
||||
const update = () => setMenuViewport(media.matches)
|
||||
update()
|
||||
media.addEventListener("change", update)
|
||||
onCleanup(() => media.removeEventListener("change", update))
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (!menuOpen()) return
|
||||
if (!menuViewport()) return
|
||||
if (typeof document === "undefined") return
|
||||
const page = document.querySelector<HTMLElement>('[data-page="stats"]')
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
|
||||
const htmlOverflow = document.documentElement.style.overflow
|
||||
const pagePaddingRight = page?.style.paddingRight
|
||||
const bodyOverflow = document.body.style.overflow
|
||||
document.documentElement.style.overflow = "hidden"
|
||||
if (scrollbarWidth > 0 && page) page.style.paddingRight = `${scrollbarWidth}px`
|
||||
document.body.style.overflow = "hidden"
|
||||
onCleanup(() => {
|
||||
document.documentElement.style.overflow = htmlOverflow
|
||||
if (page && pagePaddingRight !== undefined) page.style.paddingRight = pagePaddingRight
|
||||
document.body.style.overflow = bodyOverflow
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<header data-component="top" data-menu-open={menuOpen() ? "true" : undefined}>
|
||||
<div data-slot="header-bar">
|
||||
<a data-slot="brand" href={import.meta.env.BASE_URL} aria-label="Stats home">
|
||||
<StatsWordmark />
|
||||
</a>
|
||||
<nav data-component="section-nav" aria-label="Stats sections">
|
||||
<ul>
|
||||
<For each={headerLinks}>
|
||||
{(link) => (
|
||||
<li>
|
||||
<a href={link.href}>{link.label}</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-slot="header-actions">
|
||||
<a
|
||||
data-slot="header-button"
|
||||
data-variant="neutral"
|
||||
href={githubLink.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
|
||||
>
|
||||
<strong>{githubLink.label}</strong>
|
||||
<span>[{props.githubStars}]</span>
|
||||
</a>
|
||||
<a data-slot="header-button" data-variant="contrast" href="https://opencode.ai/">
|
||||
<strong>Try OpenCode</strong>
|
||||
</a>
|
||||
<button
|
||||
data-slot="menu-button"
|
||||
type="button"
|
||||
aria-controls="stats-mobile-nav"
|
||||
aria-expanded={menuOpen() ? "true" : "false"}
|
||||
aria-label={menuOpen() ? "Close navigation" : "Open navigation"}
|
||||
onClick={() => setMenuOpen((value) => !value)}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<Show when={menuOpen()} fallback={<path d="M2 4.72H14M2 8.5H14M2 12.28H14" stroke="currentColor" />}>
|
||||
<path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
|
||||
</Show>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Stats sections" hidden={!menuOpen()}>
|
||||
<a
|
||||
data-slot="mobile-menu-item"
|
||||
data-variant="github"
|
||||
href={githubLink.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
|
||||
>
|
||||
<strong>{githubLink.label}</strong>
|
||||
<span>[{props.githubStars}]</span>
|
||||
</a>
|
||||
<For each={headerLinks}>
|
||||
{(link) => (
|
||||
<a data-slot="mobile-menu-item" href={link.href} onClick={() => setMenuOpen(false)}>
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
function StatsWordmark() {
|
||||
return (
|
||||
<span data-slot="stats-wordmark" aria-hidden="true">
|
||||
<StatsMark />
|
||||
<svg data-slot="brand-label" width="51" height="14" viewBox="0 0 50.8509 14" fill="none">
|
||||
<path
|
||||
d="M46.2359 14C45.2276 14 44.3356 13.819 43.56 13.4571C42.7973 13.0822 42.138 12.5328 41.5822 11.8089L43.1722 10.277C43.56 10.807 44.0124 11.2142 44.5295 11.4986C45.0466 11.7701 45.6283 11.9058 46.2747 11.9058C47.7225 11.9058 48.4464 11.2465 48.4464 9.92798C48.4464 9.38504 48.3172 8.97138 48.0586 8.68698C47.8001 8.40259 47.3735 8.19575 46.7788 8.06648L45.596 7.8338C44.3679 7.57525 43.463 7.13573 42.8813 6.51524C42.2996 5.89474 42.0088 5.02862 42.0088 3.9169C42.0088 2.62419 42.3901 1.6482 43.1528 0.98892C43.9284 0.32964 45.0272 0 46.4492 0C47.4187 0 48.2461 0.161588 48.9312 0.484764C49.6293 0.795014 50.2239 1.28624 50.7151 1.95845L49.1251 3.45152C48.789 2.99908 48.4076 2.66297 47.9811 2.44321C47.5545 2.21053 47.0309 2.09418 46.4104 2.09418C45.7253 2.09418 45.2211 2.22992 44.898 2.50139C44.5748 2.77285 44.4132 3.21237 44.4132 3.81995C44.4132 4.3241 44.536 4.71191 44.7816 4.98338C45.0401 5.25485 45.4538 5.45522 46.0226 5.58449L47.2054 5.83656C47.8647 5.97876 48.4206 6.15328 48.873 6.36011C49.3384 6.56694 49.7133 6.82548 49.9977 7.13573C50.295 7.44598 50.5083 7.8144 50.6376 8.241C50.7798 8.65466 50.8509 9.14589 50.8509 9.71468C50.8509 11.1108 50.4501 12.1773 49.6486 12.9141C48.8601 13.638 47.7225 14 46.2359 14Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M36.9543 2.34643V13.7675H34.5305V2.34643H31.1371V0.232856H40.367V2.34643H36.9543Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M28.6196 13.7675L27.6695 10.2384H23.3066L22.3565 13.7675H20.0296L23.9853 0.232856H27.049L31.0047 13.7675H28.6196ZM26.0407 4.57635L25.6141 2.42399H25.3426L24.916 4.57635L23.8883 8.27995H27.0878L26.0407 4.57635Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.4849 2.34643V13.7675H14.0611V2.34643H10.6678V0.232856H19.8977V2.34643H16.4849Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M4.65374 14C3.64543 14 2.75346 13.819 1.97784 13.4571C1.21514 13.0822 0.555863 12.5328 0 11.8089L1.59003 10.277C1.97784 10.807 2.43029 11.2142 2.94737 11.4986C3.46445 11.7701 4.04617 11.9058 4.69252 11.9058C6.14035 11.9058 6.86427 11.2465 6.86427 9.92798C6.86427 9.38504 6.735 8.97138 6.47646 8.68698C6.21791 8.40259 5.79132 8.19575 5.19668 8.06648L4.01385 7.8338C2.78578 7.57525 1.88089 7.13573 1.29917 6.51524C0.717452 5.89474 0.426593 5.02862 0.426593 3.9169C0.426593 2.62419 0.807941 1.6482 1.57064 0.98892C2.34626 0.32964 3.44506 0 4.86704 0C5.83657 0 6.6639 0.161588 7.34903 0.484764C8.04709 0.795014 8.64174 1.28624 9.13297 1.95845L7.54294 3.45152C7.20683 2.99908 6.82549 2.66297 6.39889 2.44321C5.9723 2.21053 5.44875 2.09418 4.82826 2.09418C4.14312 2.09418 3.63897 2.22992 3.31579 2.50139C2.99261 2.77285 2.83103 3.21237 2.83103 3.81995C2.83103 4.3241 2.95383 4.71191 3.19945 4.98338C3.45799 5.25485 3.87165 5.45522 4.44044 5.58449L5.62327 5.83656C6.28255 5.97876 6.83841 6.15328 7.29086 6.36011C7.75623 6.56694 8.13112 6.82548 8.41551 7.13573C8.71284 7.44598 8.92613 7.8144 9.0554 8.241C9.1976 8.65466 9.2687 9.14589 9.2687 9.71468C9.2687 11.1108 8.86796 12.1773 8.06648 12.9141C7.27793 13.638 6.14035 14 4.65374 14Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function StatsMark() {
|
||||
return (
|
||||
<svg data-slot="brand-mark" width="19" height="24" viewBox="0 0 19 24" fill="none" aria-hidden="true">
|
||||
<path opacity="0.2" d="M14.25 19.2H4.75V9.6H14.25V19.2Z" fill="currentColor" />
|
||||
<path d="M14.25 4.8H4.75V19.2H14.25V4.8ZM19 24H0V0H19V24Z" fill="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function OpenCodeMark() {
|
||||
return (
|
||||
<svg data-slot="opencode-mark" width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
|
||||
<path d="M40 40H0V0H40V40Z" fill="var(--stats-logo-bg)" />
|
||||
<path d="M26 29H14V17H26V29Z" fill="var(--stats-logo-fill)" />
|
||||
<path d="M26 11H14V29H26V11ZM32 35H8V5H32V35Z" fill="var(--stats-logo-stroke)" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function Footer(props: {
|
||||
themePreference: ThemePreference
|
||||
onThemePreferenceChange: (preference: ThemePreference) => void
|
||||
}) {
|
||||
const [subscribeOpen, setSubscribeOpen] = createSignal(false)
|
||||
const modelStats = [
|
||||
{ href: "#top-models", label: "Top Models" },
|
||||
{ href: "#leaderboard", label: "Leaderboard" },
|
||||
{ href: "#session-cost", label: "Session Cost" },
|
||||
{ href: "#token-cost", label: "Token Cost" },
|
||||
{ href: "#cache-ratio", label: "Cache Ratio" },
|
||||
{ href: "#market-share", label: "Market Share" },
|
||||
]
|
||||
const legal = [
|
||||
{ href: "https://opencode.ai/legal/terms-of-service", label: "Terms of service" },
|
||||
{ href: "https://opencode.ai/legal/privacy-policy", label: "Privacy policy" },
|
||||
]
|
||||
const connect = [
|
||||
{ href: "mailto:hello@opencode.ai", label: "Contact us" },
|
||||
{ href: "https://opencode.ai/discord", label: "Community" },
|
||||
{ href: "https://x.com/opencode", label: "X" },
|
||||
githubLink,
|
||||
{ href: "https://www.youtube.com/@anomaly-co", label: "YouTube" },
|
||||
]
|
||||
|
||||
return (
|
||||
<footer data-component="footer">
|
||||
<SectionBridge label="MARKET SHARE" href="#market-share" />
|
||||
<div data-slot="footer-grid">
|
||||
<a data-slot="footer-mark" href="https://opencode.ai" aria-label="OpenCode home">
|
||||
<OpenCodeMark />
|
||||
</a>
|
||||
<FooterColumn title="Model Stats" links={modelStats} />
|
||||
<FooterColumn title="Legal" links={legal} />
|
||||
<FooterColumn title="Connect" links={connect} />
|
||||
<div data-slot="footer-column">
|
||||
<h2>Newsletter</h2>
|
||||
<p>Be the first to know about new releases.</p>
|
||||
<button data-slot="subscribe-button" type="button" onClick={() => setSubscribeOpen(true)}>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div data-slot="footer-pattern" aria-hidden="true" />
|
||||
<div data-slot="footer-bottom">
|
||||
<div>
|
||||
<span>© 2026 Anomaly Innovations Inc.</span>
|
||||
<span data-slot="status">All systems Operational</span>
|
||||
</div>
|
||||
<div data-slot="theme-toggle" role="group" aria-label="Theme">
|
||||
<For each={themePreferences}>
|
||||
{(preference) => (
|
||||
<button
|
||||
data-slot="theme-option"
|
||||
type="button"
|
||||
aria-label={themePreferenceLabels[preference]}
|
||||
aria-pressed={props.themePreference === preference ? "true" : "false"}
|
||||
title={themePreferenceLabels[preference]}
|
||||
onClick={() => props.onThemePreferenceChange(preference)}
|
||||
>
|
||||
<ThemePreferenceIcon preference={preference} />
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={subscribeOpen()}>
|
||||
<SubscribeModal onClose={() => setSubscribeOpen(false)} />
|
||||
</Show>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
function ThemePreferenceIcon(props: { preference: ThemePreference }) {
|
||||
return (
|
||||
<svg data-slot="theme-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<Show
|
||||
when={props.preference === "dark"}
|
||||
fallback={
|
||||
<Show
|
||||
when={props.preference === "light"}
|
||||
fallback={
|
||||
<>
|
||||
<rect x="1.5552" y="2.4448" width="12.8896" height="8.8888" fill="currentColor" opacity="0.3" />
|
||||
<svg
|
||||
x="1.0552"
|
||||
y="1.9446"
|
||||
width="13.8889"
|
||||
height="12.5325"
|
||||
viewBox="0 0 13.8889 12.5325"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M4.05559 12.0555C4.72936 11.8431 5.72492 11.6111 6.94448 11.6111M6.94448 11.6111C7.65114 11.6111 8.66981 11.6893 9.83336 12.0555M6.94448 11.6111L6.94448 9.38888M13.3889 0.5H0.500102C0.500102 0.5 0.500017 1.29594 0.500017 2.27778V7.61112C0.500017 8.59298 0.500007 9.38889 0.500007 9.38889H13.3889C13.3889 9.38889 13.3889 8.59298 13.3889 7.61112V2.27778C13.3889 1.29594 13.3889 0.5 13.3889 0.5Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
x="0.6102"
|
||||
y="0.6102"
|
||||
width="14.7778"
|
||||
height="14.7778"
|
||||
viewBox="0 0 14.7778 14.7778"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M7.38889 0.5V1.38889M12.26 2.51782L11.6315 3.14627M14.2778 7.38892H13.3889M12.26 12.26L11.6315 11.6316M7.38889 14.2778V13.3889M2.51778 12.26L3.14622 11.6316M0.5 7.38892H1.38889M2.51778 2.51782L3.14622 3.14627M7.38888 11.1666C9.47528 11.1666 11.1667 9.47526 11.1667 7.38886C11.1667 5.30245 9.47528 3.61108 7.38888 3.61108C5.30247 3.61108 3.6111 5.30245 3.6111 7.38886C3.6111 9.47526 5.30247 11.1666 7.38888 11.1666Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="square"
|
||||
/>
|
||||
</svg>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
x="2.0549"
|
||||
y="1.742"
|
||||
width="12.3867"
|
||||
height="12.3971"
|
||||
viewBox="0 0 12.3867 12.3971"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M9.05556 8.39711C6.37067 8.39711 4.19444 6.22089 4.19444 3.536C4.19444 2.48445 4.53122 1.51456 5.09822 0.71889C2.48178 1.20733 0.5 3.49944 0.5 6.25822C0.5 9.37244 3.02467 11.8971 6.13889 11.8971C8.76156 11.8971 10.9596 10.1036 11.5903 7.67844C10.8514 8.13189 9.98578 8.39711 9.05556 8.39711Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</Show>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function SubscribeModal(props: { onClose: () => void }) {
|
||||
const [status, setStatus] = createSignal<"idle" | "pending" | "success" | "error">("idle")
|
||||
const [message, setMessage] = createSignal("")
|
||||
let input: HTMLInputElement | undefined
|
||||
|
||||
onMount(() => {
|
||||
if (typeof document === "undefined") return
|
||||
const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : undefined
|
||||
const htmlOverflow = document.documentElement.style.overflow
|
||||
const bodyOverflow = document.body.style.overflow
|
||||
document.documentElement.style.overflow = "hidden"
|
||||
document.body.style.overflow = "hidden"
|
||||
const focusTimeout = window.setTimeout(() => input?.focus(), 0)
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") props.onClose()
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown)
|
||||
onCleanup(() => {
|
||||
window.clearTimeout(focusTimeout)
|
||||
document.documentElement.style.overflow = htmlOverflow
|
||||
document.body.style.overflow = bodyOverflow
|
||||
document.removeEventListener("keydown", onKeyDown)
|
||||
activeElement?.focus()
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<div data-component="subscribe-modal" role="dialog" aria-modal="true" aria-labelledby="subscribe-title">
|
||||
<div data-slot="modal-scrim" aria-hidden="true" onClick={props.onClose} />
|
||||
<div data-slot="modal-panel">
|
||||
<div data-slot="modal-brand">
|
||||
<img data-slot="modal-logo" src={opencodeWordmarkDark} alt="OpenCode" />
|
||||
<button data-slot="modal-close" type="button" aria-label="Close newsletter signup" onClick={props.onClose}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div data-slot="modal-body">
|
||||
<div data-slot="modal-intro">
|
||||
<h2 id="subscribe-title">OpenCode Newsletter</h2>
|
||||
<p>
|
||||
Be the first to know
|
||||
<br />
|
||||
about new releases.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
data-slot="subscribe-form"
|
||||
method="post"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
const form = event.currentTarget
|
||||
setStatus("pending")
|
||||
setMessage("")
|
||||
fetch(`${import.meta.env.BASE_URL}api/newsletter`, {
|
||||
method: "POST",
|
||||
body: new FormData(form),
|
||||
}).then(
|
||||
async (response) => {
|
||||
if (response.ok) {
|
||||
form.reset()
|
||||
setStatus("success")
|
||||
return
|
||||
}
|
||||
setMessage(await newsletterErrorMessage(response))
|
||||
setStatus("error")
|
||||
},
|
||||
() => {
|
||||
setMessage("Failed to subscribe")
|
||||
setStatus("error")
|
||||
},
|
||||
)
|
||||
}}
|
||||
>
|
||||
<input ref={input} type="email" name="email" placeholder="Email address" required />
|
||||
<button type="submit" disabled={status() === "pending"}>
|
||||
<span>{status() === "pending" ? "Subscribing..." : "Subscribe"}</span>
|
||||
</button>
|
||||
</form>
|
||||
<div data-slot="subscribe-feedback" aria-live="polite">
|
||||
<Show when={status() === "success"}>
|
||||
<p data-state="success">You're subscribed.</p>
|
||||
</Show>
|
||||
<Show when={status() === "error"}>
|
||||
<p data-state="error">{message()}</p>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function newsletterErrorMessage(response: Response) {
|
||||
return response.json().then(
|
||||
(body: unknown) =>
|
||||
body && typeof body === "object" && "error" in body && typeof body.error === "string"
|
||||
? body.error
|
||||
: "Failed to subscribe",
|
||||
() => "Failed to subscribe",
|
||||
)
|
||||
}
|
||||
|
||||
function FooterColumn(props: { title: string; links: { href: string; label: string }[] }) {
|
||||
return (
|
||||
<div data-slot="footer-column">
|
||||
<h2>{props.title}</h2>
|
||||
<nav aria-label={props.title}>
|
||||
<For each={props.links}>
|
||||
{(link) => (
|
||||
<a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
function modelSlug(value: string) {
|
||||
return value
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.replace(/-{2,}/g, "-")
|
||||
}
|
||||
|
||||
@@ -0,0 +1,462 @@
|
||||
import "../index.css"
|
||||
import { Link, Meta, Title } from "@solidjs/meta"
|
||||
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
|
||||
import {
|
||||
getStatsModelData,
|
||||
type ModelMixEntry,
|
||||
type ModelPeerEntry,
|
||||
type ModelProductEntry,
|
||||
type ModelUsagePoint,
|
||||
type StatsModelData,
|
||||
} from "@opencode-ai/stats-core/domain/home"
|
||||
import { runtime } from "@opencode-ai/stats-core/runtime"
|
||||
import { createAsync, query, useParams } from "@solidjs/router"
|
||||
import { createMemo, createSignal, For, onMount, Show, type JSX } from "solid-js"
|
||||
import { getRequestEvent } from "solid-js/web"
|
||||
import {
|
||||
applyThemePreference,
|
||||
Footer,
|
||||
getGitHubStars,
|
||||
Header,
|
||||
isThemePreference,
|
||||
themeStorageKey,
|
||||
type HeaderLink,
|
||||
type ThemePreference,
|
||||
} from "../stats-shell"
|
||||
|
||||
const statsModelFallbackUrl = "https://stats.opencode.ai"
|
||||
const modelHeaderLinks: readonly HeaderLink[] = [
|
||||
{ href: "#overview", label: "Overview" },
|
||||
{ href: "#usage", label: "Usage" },
|
||||
{ href: "#composition", label: "Composition" },
|
||||
{ href: "#efficiency", label: "Efficiency" },
|
||||
{ href: "#peers", label: "Peers" },
|
||||
]
|
||||
const modelFooterLinks: readonly HeaderLink[] = [
|
||||
{ href: import.meta.env.BASE_URL, label: "Stats Home" },
|
||||
{ href: `${import.meta.env.BASE_URL}#top-models`, label: "Top Models" },
|
||||
{ href: `${import.meta.env.BASE_URL}#leaderboard`, label: "Leaderboard" },
|
||||
{ href: `${import.meta.env.BASE_URL}#session-cost`, label: "Session Cost" },
|
||||
{ href: `${import.meta.env.BASE_URL}#token-cost`, label: "Token Cost" },
|
||||
{ href: `${import.meta.env.BASE_URL}#market-share`, label: "Market Share" },
|
||||
]
|
||||
|
||||
const getModelData = query(async (model: string) => {
|
||||
"use server"
|
||||
return runtime.runPromise(getStatsModelData(model))
|
||||
}, "getStatsModelData")
|
||||
|
||||
export default function StatsModel() {
|
||||
const event = getRequestEvent()
|
||||
event?.response.headers.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400")
|
||||
const params = useParams()
|
||||
const modelParam = createMemo(() => params.model ?? "")
|
||||
const data = createAsync(() => (modelParam() ? getModelData(modelParam()) : Promise.resolve(null)))
|
||||
const githubStars = createAsync(() => getGitHubStars())
|
||||
const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
|
||||
const modelTitle = createMemo(() => (data()?.model ? `${data()!.model} Stats` : "Model Stats"))
|
||||
const modelDescription = createMemo(() =>
|
||||
data()?.model
|
||||
? `${data()!.model} usage, rank, token mix, cost, and peer stats across OpenCode.`
|
||||
: "Model usage, rank, token mix, cost, and peer stats across OpenCode.",
|
||||
)
|
||||
const modelUrl = createMemo(() =>
|
||||
new URL(
|
||||
`${import.meta.env.BASE_URL}models/${data()?.slug ?? modelParam()}`,
|
||||
event?.request.url ?? (typeof window === "undefined" ? statsModelFallbackUrl : window.location.href),
|
||||
).toString(),
|
||||
)
|
||||
const updateThemePreference = (preference: ThemePreference) => {
|
||||
applyThemePreference(preference)
|
||||
setThemePreference(preference)
|
||||
if (typeof window === "undefined") return
|
||||
window.localStorage.setItem(themeStorageKey, preference)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (typeof window === "undefined") return
|
||||
const preference = window.localStorage.getItem(themeStorageKey)
|
||||
const nextPreference = isThemePreference(preference) ? preference : "system"
|
||||
applyThemePreference(nextPreference)
|
||||
setThemePreference(nextPreference)
|
||||
})
|
||||
|
||||
return (
|
||||
<main data-page="stats" data-theme={themePreference()}>
|
||||
<Title>{modelTitle()}</Title>
|
||||
<Meta name="description" content={modelDescription()} />
|
||||
<Link rel="canonical" href={modelUrl()} />
|
||||
<Meta property="og:type" content="website" />
|
||||
<Meta property="og:site_name" content="OpenCode" />
|
||||
<Meta property="og:title" content={modelTitle()} />
|
||||
<Meta property="og:description" content={modelDescription()} />
|
||||
<Meta property="og:url" content={modelUrl()} />
|
||||
<Meta name="twitter:card" content="summary" />
|
||||
<Meta name="twitter:title" content={modelTitle()} />
|
||||
<Meta name="twitter:description" content={modelDescription()} />
|
||||
<Header githubStars={githubStars() ?? "150K"} links={modelHeaderLinks} brandHref={import.meta.env.BASE_URL} />
|
||||
<div data-component="container">
|
||||
<div data-component="content">
|
||||
<Show when={data() !== undefined} fallback={<ModelLoading />}>
|
||||
<Show when={data()} fallback={<ModelNotFound model={modelParam()} />}>
|
||||
{(stats) => (
|
||||
<>
|
||||
<ModelHero data={stats()} />
|
||||
<ModelOverview data={stats()} />
|
||||
<ModelUsageSection data={stats().usage} />
|
||||
<ModelCompositionSection tokenMix={stats().tokenMix} productMix={stats().productMix} />
|
||||
<ModelEfficiencySection data={stats()} />
|
||||
<ModelPeersSection data={stats()} />
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
<Footer
|
||||
themePreference={themePreference()}
|
||||
onThemePreferenceChange={updateThemePreference}
|
||||
links={modelFooterLinks}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelLoading() {
|
||||
return (
|
||||
<>
|
||||
<section id="overview" data-section="model-hero">
|
||||
<div data-slot="model-hero-grid">
|
||||
<div data-slot="model-hero-copy">
|
||||
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
|
||||
Stats
|
||||
</a>
|
||||
<h1>Model Stats</h1>
|
||||
<p>Reading model aggregates from model_stat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section data-section="model-panel">
|
||||
<ModelEmptyState title="Loading model stats" description="Reading the model profile." />
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelNotFound(props: { model: string }) {
|
||||
return (
|
||||
<>
|
||||
<section id="overview" data-section="model-hero">
|
||||
<div data-slot="model-hero-grid">
|
||||
<div data-slot="model-hero-copy">
|
||||
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
|
||||
Stats
|
||||
</a>
|
||||
<h1>{props.model || "Model"}</h1>
|
||||
<p>No model_stat rows matched this model.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section data-section="model-panel">
|
||||
<ModelEmptyState title="No model data" description="Try opening a model from the leaderboard." />
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelHero(props: { data: StatsModelData }) {
|
||||
return (
|
||||
<section id="overview" data-section="model-hero">
|
||||
<p data-slot="hero-meta">
|
||||
<ProviderIcon aria-hidden="true" id={getProviderIconId(props.data.author)} />
|
||||
<span>{props.data.author}</span>
|
||||
</p>
|
||||
<div data-slot="model-hero-grid">
|
||||
<div data-slot="model-hero-copy">
|
||||
<a data-slot="model-back-link" href={import.meta.env.BASE_URL}>
|
||||
Stats
|
||||
</a>
|
||||
<h1>{props.data.model}</h1>
|
||||
<p>
|
||||
Ranked #{props.data.rank} across recent OpenCode token usage with {formatPercent(props.data.tokenShare)} of
|
||||
observed volume.
|
||||
</p>
|
||||
</div>
|
||||
<div data-component="model-rank-panel">
|
||||
<span>Current Rank</span>
|
||||
<strong>#{props.data.rank}</strong>
|
||||
<p>
|
||||
{props.data.previousRank
|
||||
? `${formatRankMove(props.data.previousRank, props.data.rank)} vs previous window`
|
||||
: "New in window"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelOverview(props: { data: StatsModelData }) {
|
||||
return (
|
||||
<section data-section="model-panel">
|
||||
<SectionTitle title="Overview" description="Recent tokens, sessions, and market position." />
|
||||
<div data-component="model-metric-grid">
|
||||
<MetricCard label="Tokens" value={formatTokens(props.data.totals.tokens)} detail="last two months" />
|
||||
<MetricCard label="Sessions" value={formatInteger(props.data.totals.sessions)} detail="completed sessions" />
|
||||
<MetricCard
|
||||
label="Token Share"
|
||||
value={formatPercent(props.data.tokenShare)}
|
||||
detail={`${props.data.totalModels} models`}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Momentum"
|
||||
value={formatChange(props.data.tokenChange)}
|
||||
detail="vs previous window"
|
||||
state={props.data.tokenChange < 0 ? "negative" : "positive"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelUsageSection(props: { data: ModelUsagePoint[] }) {
|
||||
const max = createMemo(() => Math.max(0, ...props.data.map((item) => item.tokens)) || 1)
|
||||
|
||||
return (
|
||||
<section id="usage" data-section="model-panel">
|
||||
<SectionTitle title="Usage" description="Daily token volume over the recent two-month window." />
|
||||
<Show
|
||||
when={props.data.some((item) => item.tokens > 0)}
|
||||
fallback={<ModelEmptyState title="No usage" description="No usage landed in the current window." />}
|
||||
>
|
||||
<div
|
||||
data-component="model-usage-chart"
|
||||
role="img"
|
||||
aria-label="Daily token usage chart"
|
||||
style={{ "--model-usage-count": props.data.length } as JSX.CSSProperties}
|
||||
>
|
||||
<For each={props.data}>
|
||||
{(point, index) => (
|
||||
<div
|
||||
data-slot="model-usage-column"
|
||||
data-label-hidden={isModelUsageLabelHidden(index(), props.data.length) ? "true" : undefined}
|
||||
>
|
||||
<span data-slot="model-usage-label">
|
||||
<strong>{formatTokens(point.tokens)}</strong>
|
||||
<span>{point.date}</span>
|
||||
</span>
|
||||
<div data-slot="model-usage-track">
|
||||
<i
|
||||
style={{ "--model-usage-fill": `${modelUsageHeight(point.tokens, max())}%` } as JSX.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelCompositionSection(props: { tokenMix: ModelMixEntry[]; productMix: ModelProductEntry[] }) {
|
||||
return (
|
||||
<section id="composition" data-section="model-panel">
|
||||
<SectionTitle title="Composition" description="Where the model's tokens come from and how they split." />
|
||||
<div data-component="model-split-grid">
|
||||
<MixPanel title="Token Flow" items={props.tokenMix} />
|
||||
<ProductPanel items={props.productMix} />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelEfficiencySection(props: { data: StatsModelData }) {
|
||||
return (
|
||||
<section id="efficiency" data-section="model-panel">
|
||||
<SectionTitle title="Efficiency" description="Cost, cache behavior, and average session shape." />
|
||||
<div data-component="model-metric-grid" data-variant="dense">
|
||||
<MetricCard label="Cost" value={formatMoney(props.data.totals.cost)} detail="total spend" />
|
||||
<MetricCard label="Cost / 1M" value={formatMoney(props.data.totals.costPerMillion)} detail="all tokens" />
|
||||
<MetricCard
|
||||
label="Cost / Session"
|
||||
value={formatSessionCost(props.data.totals.costPerSession)}
|
||||
detail="average"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Tokens / Session"
|
||||
value={formatTokens(props.data.totals.tokensPerSession)}
|
||||
detail="average"
|
||||
/>
|
||||
<MetricCard label="Cache Ratio" value={formatPercent(props.data.totals.cacheRatio)} detail="input tokens" />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelPeersSection(props: { data: StatsModelData }) {
|
||||
return (
|
||||
<section id="peers" data-section="model-panel">
|
||||
<SectionTitle title="Peers" description="Nearby models by recent token volume." />
|
||||
<ol data-component="model-peer-list">
|
||||
<For each={props.data.peers}>{(peer) => <PeerRow peer={peer} active={peer.model === props.data.model} />}</For>
|
||||
</ol>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function MetricCard(props: { label: string; value: string; detail: string; state?: "positive" | "negative" }) {
|
||||
return (
|
||||
<article data-component="model-metric" data-state={props.state}>
|
||||
<span>{props.label}</span>
|
||||
<strong>{props.value}</strong>
|
||||
<p>{props.detail}</p>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function MixPanel(props: { title: string; items: ModelMixEntry[] }) {
|
||||
return (
|
||||
<div data-component="model-mix-panel">
|
||||
<h2>{props.title}</h2>
|
||||
<Show
|
||||
when={props.items.length > 0}
|
||||
fallback={<ModelEmptyState title="No token mix" description="No token buckets were recorded." compact />}
|
||||
>
|
||||
<For each={props.items}>
|
||||
{(item) => <MixRow label={item.label} value={formatTokens(item.tokens)} share={item.share} />}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProductPanel(props: { items: ModelProductEntry[] }) {
|
||||
return (
|
||||
<div data-component="model-mix-panel">
|
||||
<h2>Product Mix</h2>
|
||||
<Show
|
||||
when={props.items.length > 0}
|
||||
fallback={<ModelEmptyState title="No product mix" description="No product rows were recorded." compact />}
|
||||
>
|
||||
<For each={props.items}>
|
||||
{(item) => (
|
||||
<MixRow
|
||||
label={item.product}
|
||||
value={formatTokens(item.tokens)}
|
||||
share={item.share}
|
||||
detail={`${formatInteger(item.sessions)} sessions`}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MixRow(props: { label: string; value: string; share: number; detail?: string }) {
|
||||
return (
|
||||
<div data-component="model-mix-row">
|
||||
<div>
|
||||
<strong>{props.label}</strong>
|
||||
<span>{props.detail ?? props.value}</span>
|
||||
<b>{formatPercent(props.share)}</b>
|
||||
</div>
|
||||
<i style={{ "--model-mix-fill": `${Math.max(props.share, props.share > 0 ? 2 : 0)}%` } as JSX.CSSProperties}>
|
||||
<em />
|
||||
</i>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PeerRow(props: { peer: ModelPeerEntry; active: boolean }) {
|
||||
return (
|
||||
<li>
|
||||
<a href={`${import.meta.env.BASE_URL}models/${props.peer.slug}`} data-active={props.active ? "true" : undefined}>
|
||||
<span>{String(props.peer.rank).padStart(2, "0")}</span>
|
||||
<ProviderIcon aria-hidden="true" id={getProviderIconId(props.peer.author)} />
|
||||
<strong>{props.peer.model}</strong>
|
||||
<em>{props.peer.author}</em>
|
||||
<b>{formatTokens(props.peer.tokens)}</b>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function SectionTitle(props: { title: string; description: string }) {
|
||||
return (
|
||||
<p data-slot="section-title">
|
||||
<strong>{props.title}.</strong> <span>{props.description}</span>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
function ModelEmptyState(props: { title: string; description: string; compact?: boolean }) {
|
||||
return (
|
||||
<div data-component="empty-state" data-compact={props.compact ? "true" : undefined}>
|
||||
<strong>{props.title}</strong>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getProviderIconId(author: string) {
|
||||
if (author === "MiniMax") return "minimax"
|
||||
if (author === "Moonshot") return "moonshotai"
|
||||
if (author === "Zhipu") return "zhipuai"
|
||||
return author.toLowerCase()
|
||||
}
|
||||
|
||||
function modelUsageHeight(tokens: number, max: number) {
|
||||
if (tokens <= 0) return 0
|
||||
return Math.max(2, Math.min(100, (tokens / max) * 100))
|
||||
}
|
||||
|
||||
function isModelUsageLabelHidden(index: number, count: number) {
|
||||
if (count <= 16) return false
|
||||
const interval = Math.ceil(count / 8)
|
||||
return index !== count - 1 && index % interval !== 0
|
||||
}
|
||||
|
||||
function formatRankMove(previousRank: number, rank: number) {
|
||||
const change = previousRank - rank
|
||||
if (change > 0) return `+${change}`
|
||||
if (change < 0) return `${change}`
|
||||
return "Even"
|
||||
}
|
||||
|
||||
function formatTokens(value: number) {
|
||||
if (value >= 1_000_000_000_000)
|
||||
return `${trimNumber(value / 1_000_000_000_000, value >= 10_000_000_000_000 ? 0 : 1)}T`
|
||||
if (value >= 1_000_000_000) return `${trimNumber(value / 1_000_000_000, value >= 10_000_000_000 ? 0 : 1)}B`
|
||||
if (value >= 1_000_000) return `${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M`
|
||||
if (value >= 1_000) return `${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K`
|
||||
return String(Math.round(value))
|
||||
}
|
||||
|
||||
function formatInteger(value: number) {
|
||||
return new Intl.NumberFormat("en").format(value)
|
||||
}
|
||||
|
||||
function formatPercent(value: number) {
|
||||
return `${value.toFixed(value > 0 && value < 10 ? 1 : 0)}%`
|
||||
}
|
||||
|
||||
function formatMoney(value: number) {
|
||||
if (value >= 1_000_000) return `$${trimNumber(value / 1_000_000, value >= 10_000_000 ? 0 : 1)}M`
|
||||
if (value >= 1_000) return `$${trimNumber(value / 1_000, value >= 10_000 ? 0 : 1)}K`
|
||||
return `$${value.toFixed(value >= 10 ? 0 : 2)}`
|
||||
}
|
||||
|
||||
function formatSessionCost(value: number) {
|
||||
return `$${value.toFixed(value > 0 && value < 0.01 ? 4 : 2)}`
|
||||
}
|
||||
|
||||
function formatChange(value: number) {
|
||||
if (value > 0) return `+${value}%`
|
||||
return `${value}%`
|
||||
}
|
||||
|
||||
function trimNumber(value: number, digits: number) {
|
||||
return Number(value.toFixed(digits)).toLocaleString("en")
|
||||
}
|
||||
@@ -0,0 +1,491 @@
|
||||
import opencodeWordmarkDark from "../asset/logo-ornate-dark.svg"
|
||||
import { query } from "@solidjs/router"
|
||||
import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
|
||||
|
||||
export type HeaderLink = { href: string; label: string }
|
||||
|
||||
export const headerLinks = [
|
||||
{ href: "#top-models", label: "Top Models" },
|
||||
{ href: "#leaderboard", label: "Leaderboard" },
|
||||
{ href: "#session-cost", label: "Session Cost" },
|
||||
{ href: "#token-cost", label: "Token Cost" },
|
||||
{ href: "#cache-ratio", label: "Cache Ratio" },
|
||||
{ href: "#market-share", label: "Market Share" },
|
||||
] as const
|
||||
export const githubLink = {
|
||||
href: "https://github.com/anomalyco/opencode",
|
||||
apiHref: "https://api.github.com/repos/anomalyco/opencode",
|
||||
label: "GitHub",
|
||||
fallbackStars: "150K",
|
||||
ariaLabel: "Star OpenCode on GitHub",
|
||||
}
|
||||
export const themePreferences = ["dark", "light", "system"] as const
|
||||
export const themeStorageKey = "opencode:stats-theme"
|
||||
export type ThemePreference = (typeof themePreferences)[number]
|
||||
|
||||
const compactNumberFormatter = new Intl.NumberFormat("en", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
const themePreferenceLabels = {
|
||||
dark: "Dark",
|
||||
light: "Light",
|
||||
system: "System",
|
||||
} as const
|
||||
|
||||
export const getGitHubStars = query(async () => {
|
||||
"use server"
|
||||
return fetch(githubLink.apiHref, {
|
||||
headers: {
|
||||
Accept: "application/vnd.github+json",
|
||||
"X-GitHub-Api-Version": "2022-11-28",
|
||||
},
|
||||
})
|
||||
.then((response) => (response.ok ? response.json() : undefined))
|
||||
.then((body: unknown) =>
|
||||
body && typeof body === "object" && "stargazers_count" in body && typeof body.stargazers_count === "number"
|
||||
? compactNumberFormatter.format(body.stargazers_count)
|
||||
: githubLink.fallbackStars,
|
||||
)
|
||||
.catch(() => githubLink.fallbackStars)
|
||||
}, "getGitHubStars")
|
||||
|
||||
export function isThemePreference(value: string | null): value is ThemePreference {
|
||||
return value === "dark" || value === "light" || value === "system"
|
||||
}
|
||||
|
||||
export function applyThemePreference(preference: ThemePreference) {
|
||||
if (typeof document === "undefined") return
|
||||
document.documentElement.dataset.statsTheme = preference
|
||||
if (preference === "system") {
|
||||
document.documentElement.style.removeProperty("color-scheme")
|
||||
return
|
||||
}
|
||||
document.documentElement.style.setProperty("color-scheme", preference)
|
||||
}
|
||||
|
||||
export function Header(props: { githubStars: string; links?: readonly HeaderLink[]; brandHref?: string }) {
|
||||
const [menuOpen, setMenuOpen] = createSignal(false)
|
||||
const [menuViewport, setMenuViewport] = createSignal(false)
|
||||
const links = createMemo(() => props.links ?? headerLinks)
|
||||
|
||||
createEffect(() => {
|
||||
if (typeof window === "undefined") return
|
||||
const media = window.matchMedia("(max-width: 74.999rem)")
|
||||
const update = () => setMenuViewport(media.matches)
|
||||
update()
|
||||
media.addEventListener("change", update)
|
||||
onCleanup(() => media.removeEventListener("change", update))
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (!menuOpen()) return
|
||||
if (!menuViewport()) return
|
||||
if (typeof document === "undefined") return
|
||||
const page = document.querySelector<HTMLElement>('[data-page="stats"]')
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
|
||||
const htmlOverflow = document.documentElement.style.overflow
|
||||
const pagePaddingRight = page?.style.paddingRight
|
||||
const bodyOverflow = document.body.style.overflow
|
||||
document.documentElement.style.overflow = "hidden"
|
||||
if (scrollbarWidth > 0 && page) page.style.paddingRight = `${scrollbarWidth}px`
|
||||
document.body.style.overflow = "hidden"
|
||||
onCleanup(() => {
|
||||
document.documentElement.style.overflow = htmlOverflow
|
||||
if (page && pagePaddingRight !== undefined) page.style.paddingRight = pagePaddingRight
|
||||
document.body.style.overflow = bodyOverflow
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<header data-component="top" data-menu-open={menuOpen() ? "true" : undefined}>
|
||||
<div data-slot="header-bar">
|
||||
<a data-slot="brand" href={props.brandHref ?? import.meta.env.BASE_URL} aria-label="Stats home">
|
||||
<StatsWordmark />
|
||||
</a>
|
||||
<nav data-component="section-nav" aria-label="Stats sections">
|
||||
<ul>
|
||||
<For each={links()}>
|
||||
{(link) => (
|
||||
<li>
|
||||
<a href={link.href}>{link.label}</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-slot="header-actions">
|
||||
<a
|
||||
data-slot="header-button"
|
||||
data-variant="neutral"
|
||||
href={githubLink.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
|
||||
>
|
||||
<strong>{githubLink.label}</strong>
|
||||
<span>[{props.githubStars}]</span>
|
||||
</a>
|
||||
<a data-slot="header-button" data-variant="contrast" href="https://opencode.ai/">
|
||||
<strong>Try OpenCode</strong>
|
||||
</a>
|
||||
<button
|
||||
data-slot="menu-button"
|
||||
type="button"
|
||||
aria-controls="stats-mobile-nav"
|
||||
aria-expanded={menuOpen() ? "true" : "false"}
|
||||
aria-label={menuOpen() ? "Close navigation" : "Open navigation"}
|
||||
onClick={() => setMenuOpen((value) => !value)}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<Show when={menuOpen()} fallback={<path d="M2 4.72H14M2 8.5H14M2 12.28H14" stroke="currentColor" />}>
|
||||
<path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
|
||||
</Show>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="stats-mobile-nav" data-slot="mobile-menu" aria-label="Stats sections" hidden={!menuOpen()}>
|
||||
<a
|
||||
data-slot="mobile-menu-item"
|
||||
data-variant="github"
|
||||
href={githubLink.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`${githubLink.ariaLabel} (${props.githubStars} stars)`}
|
||||
>
|
||||
<strong>{githubLink.label}</strong>
|
||||
<span>[{props.githubStars}]</span>
|
||||
</a>
|
||||
<For each={links()}>
|
||||
{(link) => (
|
||||
<a data-slot="mobile-menu-item" href={link.href} onClick={() => setMenuOpen(false)}>
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
function StatsWordmark() {
|
||||
return (
|
||||
<span data-slot="stats-wordmark" aria-hidden="true">
|
||||
<StatsMark />
|
||||
<svg data-slot="brand-label" width="51" height="14" viewBox="0 0 50.8509 14" fill="none">
|
||||
<path
|
||||
d="M46.2359 14C45.2276 14 44.3356 13.819 43.56 13.4571C42.7973 13.0822 42.138 12.5328 41.5822 11.8089L43.1722 10.277C43.56 10.807 44.0124 11.2142 44.5295 11.4986C45.0466 11.7701 45.6283 11.9058 46.2747 11.9058C47.7225 11.9058 48.4464 11.2465 48.4464 9.92798C48.4464 9.38504 48.3172 8.97138 48.0586 8.68698C47.8001 8.40259 47.3735 8.19575 46.7788 8.06648L45.596 7.8338C44.3679 7.57525 43.463 7.13573 42.8813 6.51524C42.2996 5.89474 42.0088 5.02862 42.0088 3.9169C42.0088 2.62419 42.3901 1.6482 43.1528 0.98892C43.9284 0.32964 45.0272 0 46.4492 0C47.4187 0 48.2461 0.161588 48.9312 0.484764C49.6293 0.795014 50.2239 1.28624 50.7151 1.95845L49.1251 3.45152C48.789 2.99908 48.4076 2.66297 47.9811 2.44321C47.5545 2.21053 47.0309 2.09418 46.4104 2.09418C45.7253 2.09418 45.2211 2.22992 44.898 2.50139C44.5748 2.77285 44.4132 3.21237 44.4132 3.81995C44.4132 4.3241 44.536 4.71191 44.7816 4.98338C45.0401 5.25485 45.4538 5.45522 46.0226 5.58449L47.2054 5.83656C47.8647 5.97876 48.4206 6.15328 48.873 6.36011C49.3384 6.56694 49.7133 6.82548 49.9977 7.13573C50.295 7.44598 50.5083 7.8144 50.6376 8.241C50.7798 8.65466 50.8509 9.14589 50.8509 9.71468C50.8509 11.1108 50.4501 12.1773 49.6486 12.9141C48.8601 13.638 47.7225 14 46.2359 14Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M36.9543 2.34643V13.7675H34.5305V2.34643H31.1371V0.232856H40.367V2.34643H36.9543Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M28.6196 13.7675L27.6695 10.2384H23.3066L22.3565 13.7675H20.0296L23.9853 0.232856H27.049L31.0047 13.7675H28.6196ZM26.0407 4.57635L25.6141 2.42399H25.3426L24.916 4.57635L23.8883 8.27995H27.0878L26.0407 4.57635Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.4849 2.34643V13.7675H14.0611V2.34643H10.6678V0.232856H19.8977V2.34643H16.4849Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M4.65374 14C3.64543 14 2.75346 13.819 1.97784 13.4571C1.21514 13.0822 0.555863 12.5328 0 11.8089L1.59003 10.277C1.97784 10.807 2.43029 11.2142 2.94737 11.4986C3.46445 11.7701 4.04617 11.9058 4.69252 11.9058C6.14035 11.9058 6.86427 11.2465 6.86427 9.92798C6.86427 9.38504 6.735 8.97138 6.47646 8.68698C6.21791 8.40259 5.79132 8.19575 5.19668 8.06648L4.01385 7.8338C2.78578 7.57525 1.88089 7.13573 1.29917 6.51524C0.717452 5.89474 0.426593 5.02862 0.426593 3.9169C0.426593 2.62419 0.807941 1.6482 1.57064 0.98892C2.34626 0.32964 3.44506 0 4.86704 0C5.83657 0 6.6639 0.161588 7.34903 0.484764C8.04709 0.795014 8.64174 1.28624 9.13297 1.95845L7.54294 3.45152C7.20683 2.99908 6.82549 2.66297 6.39889 2.44321C5.9723 2.21053 5.44875 2.09418 4.82826 2.09418C4.14312 2.09418 3.63897 2.22992 3.31579 2.50139C2.99261 2.77285 2.83103 3.21237 2.83103 3.81995C2.83103 4.3241 2.95383 4.71191 3.19945 4.98338C3.45799 5.25485 3.87165 5.45522 4.44044 5.58449L5.62327 5.83656C6.28255 5.97876 6.83841 6.15328 7.29086 6.36011C7.75623 6.56694 8.13112 6.82548 8.41551 7.13573C8.71284 7.44598 8.92613 7.8144 9.0554 8.241C9.1976 8.65466 9.2687 9.14589 9.2687 9.71468C9.2687 11.1108 8.86796 12.1773 8.06648 12.9141C7.27793 13.638 6.14035 14 4.65374 14Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function StatsMark() {
|
||||
return (
|
||||
<svg data-slot="brand-mark" width="19" height="24" viewBox="0 0 19 24" fill="none" aria-hidden="true">
|
||||
<path opacity="0.2" d="M14.25 19.2H4.75V9.6H14.25V19.2Z" fill="currentColor" />
|
||||
<path d="M14.25 4.8H4.75V19.2H14.25V4.8ZM19 24H0V0H19V24Z" fill="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function OpenCodeMark() {
|
||||
return (
|
||||
<svg data-slot="opencode-mark" width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
|
||||
<path d="M40 40H0V0H40V40Z" fill="var(--stats-logo-bg)" />
|
||||
<path d="M26 29H14V17H26V29Z" fill="var(--stats-logo-fill)" />
|
||||
<path d="M26 11H14V29H26V11ZM32 35H8V5H32V35Z" fill="var(--stats-logo-stroke)" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function Footer(props: {
|
||||
themePreference: ThemePreference
|
||||
onThemePreferenceChange: (preference: ThemePreference) => void
|
||||
links?: readonly HeaderLink[]
|
||||
}) {
|
||||
const [subscribeOpen, setSubscribeOpen] = createSignal(false)
|
||||
const modelStats = props.links ?? [
|
||||
{ href: "#top-models", label: "Top Models" },
|
||||
{ href: "#leaderboard", label: "Leaderboard" },
|
||||
{ href: "#session-cost", label: "Session Cost" },
|
||||
{ href: "#token-cost", label: "Token Cost" },
|
||||
{ href: "#cache-ratio", label: "Cache Ratio" },
|
||||
{ href: "#market-share", label: "Market Share" },
|
||||
]
|
||||
const legal = [
|
||||
{ href: "https://opencode.ai/legal/terms-of-service", label: "Terms of service" },
|
||||
{ href: "https://opencode.ai/legal/privacy-policy", label: "Privacy policy" },
|
||||
]
|
||||
const connect = [
|
||||
{ href: "mailto:hello@opencode.ai", label: "Contact us" },
|
||||
{ href: "https://opencode.ai/discord", label: "Community" },
|
||||
{ href: "https://x.com/opencode", label: "X" },
|
||||
githubLink,
|
||||
{ href: "https://www.youtube.com/@anomaly-co", label: "YouTube" },
|
||||
]
|
||||
|
||||
return (
|
||||
<footer data-component="footer">
|
||||
<SectionBridge label="MARKET SHARE" href="#market-share" />
|
||||
<div data-slot="footer-grid">
|
||||
<a data-slot="footer-mark" href="https://opencode.ai" aria-label="OpenCode home">
|
||||
<OpenCodeMark />
|
||||
</a>
|
||||
<FooterColumn title="Model Stats" links={modelStats} />
|
||||
<FooterColumn title="Legal" links={legal} />
|
||||
<FooterColumn title="Connect" links={connect} />
|
||||
<div data-slot="footer-column">
|
||||
<h2>Newsletter</h2>
|
||||
<p>Be the first to know about new releases.</p>
|
||||
<button data-slot="subscribe-button" type="button" onClick={() => setSubscribeOpen(true)}>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div data-slot="footer-pattern" aria-hidden="true" />
|
||||
<div data-slot="footer-bottom">
|
||||
<div>
|
||||
<span>© 2026 Anomaly Innovations Inc.</span>
|
||||
<span data-slot="status">All systems Operational</span>
|
||||
</div>
|
||||
<div data-slot="theme-toggle" role="group" aria-label="Theme">
|
||||
<For each={themePreferences}>
|
||||
{(preference) => (
|
||||
<button
|
||||
data-slot="theme-option"
|
||||
type="button"
|
||||
aria-label={themePreferenceLabels[preference]}
|
||||
aria-pressed={props.themePreference === preference ? "true" : "false"}
|
||||
title={themePreferenceLabels[preference]}
|
||||
onClick={() => props.onThemePreferenceChange(preference)}
|
||||
>
|
||||
<ThemePreferenceIcon preference={preference} />
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={subscribeOpen()}>
|
||||
<SubscribeModal onClose={() => setSubscribeOpen(false)} />
|
||||
</Show>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
function SectionBridge(props: { label: string; href: string }) {
|
||||
return (
|
||||
<a data-component="section-bridge" href={props.href}>
|
||||
<span>LEAN MORE</span>
|
||||
<i />
|
||||
<strong>{props.label}</strong>
|
||||
<b>▸</b>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function ThemePreferenceIcon(props: { preference: ThemePreference }) {
|
||||
return (
|
||||
<svg data-slot="theme-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<Show
|
||||
when={props.preference === "dark"}
|
||||
fallback={
|
||||
<Show
|
||||
when={props.preference === "light"}
|
||||
fallback={
|
||||
<>
|
||||
<rect x="1.5552" y="2.4448" width="12.8896" height="8.8888" fill="currentColor" opacity="0.3" />
|
||||
<svg
|
||||
x="1.0552"
|
||||
y="1.9446"
|
||||
width="13.8889"
|
||||
height="12.5325"
|
||||
viewBox="0 0 13.8889 12.5325"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M4.05559 12.0555C4.72936 11.8431 5.72492 11.6111 6.94448 11.6111M6.94448 11.6111C7.65114 11.6111 8.66981 11.6893 9.83336 12.0555M6.94448 11.6111L6.94448 9.38888M13.3889 0.5H0.500102C0.500102 0.5 0.500017 1.29594 0.500017 2.27778V7.61112C0.500017 8.59298 0.500007 9.38889 0.500007 9.38889H13.3889C13.3889 9.38889 13.3889 8.59298 13.3889 7.61112V2.27778C13.3889 1.29594 13.3889 0.5 13.3889 0.5Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
x="0.6102"
|
||||
y="0.6102"
|
||||
width="14.7778"
|
||||
height="14.7778"
|
||||
viewBox="0 0 14.7778 14.7778"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M7.38889 0.5V1.38889M12.26 2.51782L11.6315 3.14627M14.2778 7.38892H13.3889M12.26 12.26L11.6315 11.6316M7.38889 14.2778V13.3889M2.51778 12.26L3.14622 11.6316M0.5 7.38892H1.38889M2.51778 2.51782L3.14622 3.14627M7.38888 11.1666C9.47528 11.1666 11.1667 9.47526 11.1667 7.38886C11.1667 5.30245 9.47528 3.61108 7.38888 3.61108C5.30247 3.61108 3.6111 5.30245 3.6111 7.38886C3.6111 9.47526 5.30247 11.1666 7.38888 11.1666Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="square"
|
||||
/>
|
||||
</svg>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
x="2.0549"
|
||||
y="1.742"
|
||||
width="12.3867"
|
||||
height="12.3971"
|
||||
viewBox="0 0 12.3867 12.3971"
|
||||
preserveAspectRatio="none"
|
||||
overflow="visible"
|
||||
>
|
||||
<path
|
||||
d="M9.05556 8.39711C6.37067 8.39711 4.19444 6.22089 4.19444 3.536C4.19444 2.48445 4.53122 1.51456 5.09822 0.71889C2.48178 1.20733 0.5 3.49944 0.5 6.25822C0.5 9.37244 3.02467 11.8971 6.13889 11.8971C8.76156 11.8971 10.9596 10.1036 11.5903 7.67844C10.8514 8.13189 9.98578 8.39711 9.05556 8.39711Z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</Show>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function SubscribeModal(props: { onClose: () => void }) {
|
||||
const [status, setStatus] = createSignal<"idle" | "pending" | "success" | "error">("idle")
|
||||
const [message, setMessage] = createSignal("")
|
||||
let input: HTMLInputElement | undefined
|
||||
|
||||
onMount(() => {
|
||||
if (typeof document === "undefined") return
|
||||
const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : undefined
|
||||
const htmlOverflow = document.documentElement.style.overflow
|
||||
const bodyOverflow = document.body.style.overflow
|
||||
document.documentElement.style.overflow = "hidden"
|
||||
document.body.style.overflow = "hidden"
|
||||
const focusTimeout = window.setTimeout(() => input?.focus(), 0)
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") props.onClose()
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown)
|
||||
onCleanup(() => {
|
||||
window.clearTimeout(focusTimeout)
|
||||
document.documentElement.style.overflow = htmlOverflow
|
||||
document.body.style.overflow = bodyOverflow
|
||||
document.removeEventListener("keydown", onKeyDown)
|
||||
activeElement?.focus()
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<div data-component="subscribe-modal" role="dialog" aria-modal="true" aria-labelledby="subscribe-title">
|
||||
<div data-slot="modal-scrim" aria-hidden="true" onClick={props.onClose} />
|
||||
<div data-slot="modal-panel">
|
||||
<div data-slot="modal-brand">
|
||||
<img data-slot="modal-logo" src={opencodeWordmarkDark} alt="OpenCode" />
|
||||
<button data-slot="modal-close" type="button" aria-label="Close newsletter signup" onClick={props.onClose}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<path d="M4.44 4.44L11.56 11.56M11.56 4.44L4.44 11.56" stroke="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div data-slot="modal-body">
|
||||
<div data-slot="modal-intro">
|
||||
<h2 id="subscribe-title">OpenCode Newsletter</h2>
|
||||
<p>
|
||||
Be the first to know
|
||||
<br />
|
||||
about new releases.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
data-slot="subscribe-form"
|
||||
method="post"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
const form = event.currentTarget
|
||||
setStatus("pending")
|
||||
setMessage("")
|
||||
fetch(`${import.meta.env.BASE_URL}api/newsletter`, {
|
||||
method: "POST",
|
||||
body: new FormData(form),
|
||||
}).then(
|
||||
async (response) => {
|
||||
if (response.ok) {
|
||||
form.reset()
|
||||
setStatus("success")
|
||||
return
|
||||
}
|
||||
setMessage(await newsletterErrorMessage(response))
|
||||
setStatus("error")
|
||||
},
|
||||
() => {
|
||||
setMessage("Failed to subscribe")
|
||||
setStatus("error")
|
||||
},
|
||||
)
|
||||
}}
|
||||
>
|
||||
<input ref={input} type="email" name="email" placeholder="Email address" required />
|
||||
<button type="submit" disabled={status() === "pending"}>
|
||||
<span>{status() === "pending" ? "Subscribing..." : "Subscribe"}</span>
|
||||
</button>
|
||||
</form>
|
||||
<div data-slot="subscribe-feedback" aria-live="polite">
|
||||
<Show when={status() === "success"}>
|
||||
<p data-state="success">You're subscribed.</p>
|
||||
</Show>
|
||||
<Show when={status() === "error"}>
|
||||
<p data-state="error">{message()}</p>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function newsletterErrorMessage(response: Response) {
|
||||
return response.json().then(
|
||||
(body: unknown) =>
|
||||
body && typeof body === "object" && "error" in body && typeof body.error === "string"
|
||||
? body.error
|
||||
: "Failed to subscribe",
|
||||
() => "Failed to subscribe",
|
||||
)
|
||||
}
|
||||
|
||||
function FooterColumn(props: { title: string; links: readonly { href: string; label: string }[] }) {
|
||||
return (
|
||||
<div data-slot="footer-column">
|
||||
<h2>{props.title}</h2>
|
||||
<nav aria-label={props.title}>
|
||||
<For each={props.links}>
|
||||
{(link) => (
|
||||
<a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -14,6 +14,41 @@ export type TokenCostEntry = { model: string; total: number; input: number; outp
|
||||
export type CacheRatioEntry = { model: string; ratio: number; cached: number; uncached: number; total: number }
|
||||
export type SessionCostEntry = { model: string; cost: number; tokens: number }
|
||||
export type CountryEntry = { country: string; continent: string; tokens: number; share: number; rank: number }
|
||||
export type ModelUsagePoint = { date: string; tokens: number; sessions: number; cost: number }
|
||||
export type ModelMixEntry = { label: string; tokens: number; share: number }
|
||||
export type ModelProductEntry = { product: string; tokens: number; sessions: number; share: number }
|
||||
export type ModelPeerEntry = {
|
||||
model: string
|
||||
author: string
|
||||
rank: number
|
||||
tokens: number
|
||||
share: number
|
||||
slug: string
|
||||
}
|
||||
export type StatsModelData = {
|
||||
updatedAt: string | null
|
||||
model: string
|
||||
slug: string
|
||||
author: string
|
||||
rank: number
|
||||
previousRank: number | null
|
||||
totalModels: number
|
||||
tokenShare: number
|
||||
tokenChange: number
|
||||
totals: {
|
||||
sessions: number
|
||||
tokens: number
|
||||
cost: number
|
||||
tokensPerSession: number
|
||||
costPerSession: number
|
||||
costPerMillion: number
|
||||
cacheRatio: number
|
||||
}
|
||||
usage: ModelUsagePoint[]
|
||||
tokenMix: ModelMixEntry[]
|
||||
productMix: ModelProductEntry[]
|
||||
peers: ModelPeerEntry[]
|
||||
}
|
||||
export type StatsHomeData = {
|
||||
updatedAt: string | null
|
||||
usage: Record<UsageProduct, Record<UsageRange, UsagePoint[]>>
|
||||
@@ -74,6 +109,12 @@ export const getStatsHomeData: () => Effect.Effect<
|
||||
return buildStatsHomeData(modelRows, providerRows, geoRows)
|
||||
})
|
||||
|
||||
export const getStatsModelData: (model: string) => Effect.Effect<StatsModelData | null, DatabaseError, ModelStatRepo> =
|
||||
Effect.fn("StatsModel.getData")(function* (model) {
|
||||
const modelStats = yield* ModelStatRepo
|
||||
return buildStatsModelData(model, yield* modelStats.listDaily())
|
||||
})
|
||||
|
||||
function buildStatsHomeData(
|
||||
modelRows: ModelStatMetric[],
|
||||
providerRows: ProviderStatMetric[],
|
||||
@@ -111,6 +152,64 @@ function buildStatsHomeData(
|
||||
}
|
||||
}
|
||||
|
||||
function buildStatsModelData(modelParam: string, modelRows: ModelStatMetric[]): StatsModelData | null {
|
||||
const normalized = modelRows.flatMap(normalizeStatRow)
|
||||
if (normalized.length === 0) return null
|
||||
|
||||
const model = resolveModelName(modelParam, normalized)
|
||||
if (!model) return null
|
||||
|
||||
const modelScopedRows = normalized.filter((row) => row.model === model)
|
||||
const earliest = Math.min(...normalized.map((row) => row.periodStart))
|
||||
const latest = Math.max(...normalized.map((row) => row.periodStart))
|
||||
const latestUpdate = Math.max(...modelScopedRows.map((row) => row.updatedAt))
|
||||
const window = getWindow("2M", earliest, latest)
|
||||
const currentRows = rowsForProduct(modelScopedRows, "All Users", window.start, window.end)
|
||||
const previousRows = rowsForProduct(modelScopedRows, "All Users", window.previousStart, window.previousEnd)
|
||||
const current = combineRowsForModel(model, currentRows)
|
||||
const previous = combineRowsForModel(model, previousRows)
|
||||
const peers = aggregateByModelName(rowsForProduct(normalized, "All Users", window.start, window.end))
|
||||
.filter((item) => item.totalTokens > 0)
|
||||
.toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))
|
||||
const previousPeers = aggregateByModelName(
|
||||
rowsForProduct(normalized, "All Users", window.previousStart, window.previousEnd),
|
||||
)
|
||||
.filter((item) => item.totalTokens > 0)
|
||||
.toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))
|
||||
const rank = Math.max(1, peers.findIndex((item) => item.model === model) + 1)
|
||||
const previousRankIndex = previousPeers.findIndex((item) => item.model === model)
|
||||
const totalTokens = peers.reduce((sum, item) => sum + item.totalTokens, 0)
|
||||
|
||||
return {
|
||||
updatedAt: Number.isFinite(latestUpdate) ? new Date(latestUpdate).toISOString() : null,
|
||||
model,
|
||||
slug: modelSlug(model),
|
||||
author: formatProvider(current.provider),
|
||||
rank,
|
||||
previousRank: previousRankIndex >= 0 ? previousRankIndex + 1 : null,
|
||||
totalModels: peers.length,
|
||||
tokenShare: totalTokens > 0 ? round((current.totalTokens / totalTokens) * 100, 2) : 0,
|
||||
tokenChange: percentChange(current.totalTokens, previous.totalTokens),
|
||||
totals: {
|
||||
sessions: current.sessions,
|
||||
tokens: current.totalTokens,
|
||||
cost: round(microcentsToDollars(current.totalCostMicrocents), 2),
|
||||
tokensPerSession: current.sessions > 0 ? Math.round(current.totalTokens / current.sessions) : 0,
|
||||
costPerSession:
|
||||
current.sessions > 0 ? round(microcentsToDollars(current.totalCostMicrocents) / current.sessions, 4) : 0,
|
||||
costPerMillion: costPerMillion(current.totalCostMicrocents, current.totalTokens),
|
||||
cacheRatio:
|
||||
current.inputTokens + current.cacheReadTokens > 0
|
||||
? round((current.cacheReadTokens / (current.inputTokens + current.cacheReadTokens)) * 100, 1)
|
||||
: 0,
|
||||
},
|
||||
usage: buildModelUsage(currentRows, window, "2M"),
|
||||
tokenMix: buildModelTokenMix(current),
|
||||
productMix: buildModelProductMix(modelScopedRows, window, current),
|
||||
peers: buildModelPeers(peers, rank, totalTokens),
|
||||
}
|
||||
}
|
||||
|
||||
function emptyStatsHomeData(): StatsHomeData {
|
||||
return {
|
||||
updatedAt: null,
|
||||
@@ -261,6 +360,65 @@ function buildSessionCost(rows: StatMetricRow[], product: TokenProduct, window:
|
||||
.slice(0, 17)
|
||||
}
|
||||
|
||||
function buildModelUsage(rows: StatMetricRow[], window: DateWindow, range: UsageRange) {
|
||||
return createBuckets(window, range).map((bucket) => {
|
||||
const aggregate = combineRowsForModel(
|
||||
"",
|
||||
rows.filter((row) => row.periodStart >= bucket.start && row.periodStart < bucket.end),
|
||||
)
|
||||
return {
|
||||
date: bucket.label,
|
||||
tokens: aggregate.totalTokens,
|
||||
sessions: aggregate.sessions,
|
||||
cost: round(microcentsToDollars(aggregate.totalCostMicrocents), 2),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function buildModelTokenMix(aggregate: ModelAggregate): ModelMixEntry[] {
|
||||
const items = [
|
||||
{ label: "Input", tokens: aggregate.inputTokens },
|
||||
{ label: "Output", tokens: aggregate.outputTokens },
|
||||
{ label: "Reasoning", tokens: aggregate.reasoningTokens },
|
||||
{ label: "Cached", tokens: aggregate.cacheReadTokens },
|
||||
].filter((item) => item.tokens > 0)
|
||||
const total = items.reduce((sum, item) => sum + item.tokens, 0)
|
||||
if (total === 0) return []
|
||||
return items.map((item) => ({ ...item, share: round((item.tokens / total) * 100, 1) }))
|
||||
}
|
||||
|
||||
function buildModelProductMix(
|
||||
rows: StatMetricRow[],
|
||||
window: DateWindow,
|
||||
fallback: ModelAggregate,
|
||||
): ModelProductEntry[] {
|
||||
const products = ["Go", "Zen", "Enterprise"] as const
|
||||
const items = products.flatMap((product) => {
|
||||
const aggregate = combineRowsForModel(
|
||||
fallback.model,
|
||||
rows.filter((row) => row.tier === product && row.periodStart >= window.start && row.periodStart < window.end),
|
||||
)
|
||||
if (aggregate.totalTokens === 0) return []
|
||||
return [{ product, tokens: aggregate.totalTokens, sessions: aggregate.sessions }]
|
||||
})
|
||||
const total = items.reduce((sum, item) => sum + item.tokens, 0)
|
||||
if (total > 0) return items.map((item) => ({ ...item, share: round((item.tokens / total) * 100, 1) }))
|
||||
if (fallback.totalTokens === 0) return []
|
||||
return [{ product: "All Users", tokens: fallback.totalTokens, sessions: fallback.sessions, share: 100 }]
|
||||
}
|
||||
|
||||
function buildModelPeers(peers: ModelAggregate[], rank: number, totalTokens: number): ModelPeerEntry[] {
|
||||
const start = Math.max(0, Math.min(rank - 4, Math.max(peers.length - 7, 0)))
|
||||
return peers.slice(start, start + 7).map((item, index) => ({
|
||||
model: item.model,
|
||||
author: formatProvider(item.provider),
|
||||
rank: start + index + 1,
|
||||
tokens: item.totalTokens,
|
||||
share: totalTokens > 0 ? round((item.totalTokens / totalTokens) * 100, 2) : 0,
|
||||
slug: modelSlug(item.model),
|
||||
}))
|
||||
}
|
||||
|
||||
function rowsForProduct<T extends { periodStart: number; tier: string }>(
|
||||
rows: T[],
|
||||
product: UsageProduct,
|
||||
@@ -285,6 +443,15 @@ function aggregateByModel(rows: StatMetricRow[]) {
|
||||
)
|
||||
}
|
||||
|
||||
function aggregateByModelName(rows: StatMetricRow[]) {
|
||||
return Object.values(
|
||||
rows.reduce<Record<string, ModelAggregate>>((result, row) => {
|
||||
result[row.model] = combineModelAggregate(result[row.model], row)
|
||||
return result
|
||||
}, {}),
|
||||
)
|
||||
}
|
||||
|
||||
function aggregateByProvider(rows: ProviderMetricRow[]) {
|
||||
return Object.values(
|
||||
rows.reduce<Record<string, { provider: string; tokens: number }>>((result, row) => {
|
||||
@@ -310,6 +477,27 @@ function aggregateByCountry(rows: GeoMetricRow[]) {
|
||||
)
|
||||
}
|
||||
|
||||
function combineRowsForModel(model: string, rows: StatMetricRow[]): ModelAggregate {
|
||||
const aggregate = rows.reduce<ModelAggregate | undefined>(
|
||||
(result, row) => combineModelAggregate(result, row),
|
||||
undefined,
|
||||
)
|
||||
if (aggregate) return { ...aggregate, model: model || aggregate.model }
|
||||
return {
|
||||
model,
|
||||
provider: "unknown",
|
||||
sessions: 0,
|
||||
inputTokens: 0,
|
||||
outputTokens: 0,
|
||||
reasoningTokens: 0,
|
||||
cacheReadTokens: 0,
|
||||
totalTokens: 0,
|
||||
inputCostMicrocents: 0,
|
||||
outputCostMicrocents: 0,
|
||||
totalCostMicrocents: 0,
|
||||
}
|
||||
}
|
||||
|
||||
function combineModelAggregate(current: ModelAggregate | undefined, row: StatMetricRow): ModelAggregate {
|
||||
return {
|
||||
model: row.model,
|
||||
@@ -501,6 +689,25 @@ function formatProvider(provider: string) {
|
||||
return known[normalized] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase())
|
||||
}
|
||||
|
||||
function resolveModelName(modelParam: string, rows: StatMetricRow[]) {
|
||||
const input = modelParam.trim()
|
||||
if (!input) return undefined
|
||||
const normalizedInput = input.toLowerCase()
|
||||
const inputSlug = modelSlug(input)
|
||||
return aggregateByModelName(rows)
|
||||
.filter((item) => item.model.toLowerCase() === normalizedInput || modelSlug(item.model) === inputSlug)
|
||||
.toSorted((a, b) => b.totalTokens - a.totalTokens || a.model.localeCompare(b.model))[0]?.model
|
||||
}
|
||||
|
||||
export function modelSlug(value: string) {
|
||||
return value
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.replace(/-{2,}/g, "-")
|
||||
}
|
||||
|
||||
function modelKey(provider: string, model: string) {
|
||||
return `${provider}\u0000${model}`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user