diff --git a/bun.lock b/bun.lock index 9695753def..1ec14798a6 100644 --- a/bun.lock +++ b/bun.lock @@ -34,15 +34,15 @@ }, "dependencies": { "@ai-sdk/alibaba": "1.0.17", - "@ai-sdk/amazon-bedrock": "4.0.96", + "@ai-sdk/amazon-bedrock": "4.0.107", "@ai-sdk/anthropic": "3.0.71", "@ai-sdk/azure": "3.0.49", "@ai-sdk/cerebras": "2.0.54", "@ai-sdk/cohere": "3.0.27", "@ai-sdk/deepinfra": "2.0.41", "@ai-sdk/gateway": "3.0.104", - "@ai-sdk/google": "3.0.63", - "@ai-sdk/google-vertex": "4.0.112", + "@ai-sdk/google": "3.0.73", + "@ai-sdk/google-vertex": "4.0.128", "@ai-sdk/groq": "3.0.31", "@ai-sdk/mistral": "3.0.27", "@ai-sdk/openai": "3.0.53", @@ -67,16 +67,17 @@ "ai-gateway-provider": "3.1.2", "cross-spawn": "catalog:", "effect": "catalog:", - "gitlab-ai-provider": "6.7.0", + "gitlab-ai-provider": "6.8.0", "glob": "13.0.5", "google-auth-library": "10.5.0", "immer": "11.1.4", + "jsonc-parser": "3.3.1", "mime-types": "3.0.2", "minimatch": "10.2.5", "npm-package-arg": "13.0.2", "rotating-file-stream": "3.2.9", "semver": "^7.6.3", - "venice-ai-sdk-provider": "2.0.1", + "venice-ai-sdk-provider": "2.0.2", "xdg-basedir": "5.1.0", "zod": "catalog:", }, @@ -86,6 +87,7 @@ "@types/cross-spawn": "catalog:", "@types/npm-package-arg": "6.1.4", "@types/npmcli__arborist": "6.3.3", + "@types/semver": "catalog:", }, }, "packages/effect-drizzle-sqlite": { @@ -466,6 +468,7 @@ "@silvia-odwyer/photon-node": "0.3.4", "@solid-primitives/event-bus": "1.1.2", "@solid-primitives/scheduled": "1.5.2", + "@types/ws": "8.18.1", "@zip.js/zip.js": "2.7.62", "ai": "catalog:", "ai-gateway-provider": "3.1.2", @@ -510,6 +513,7 @@ "vscode-jsonrpc": "8.2.1", "web-tree-sitter": "0.25.10", "which": "6.0.1", + "ws": "8.21.0", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", "yargs": "18.0.0", "zod": "catalog:", @@ -723,7 +727,7 @@ "@effect/platform-node": "4.0.0-beta.66", "@effect/sql-sqlite-bun": "4.0.0-beta.66", "@kobalte/core": "0.13.11", - "@lydell/node-pty": "1.2.0-beta.10", + "@lydell/node-pty": "1.2.0-beta.12", "@npmcli/arborist": "9.4.0", "@octokit/rest": "22.0.0", "@openauthjs/openauth": "0.0.0-20250322224806", @@ -1338,19 +1342,19 @@ "@lukeed/ms": ["@lukeed/ms@2.0.2", "", {}, "sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA=="], - "@lydell/node-pty": ["@lydell/node-pty@1.2.0-beta.10", "", { "optionalDependencies": { "@lydell/node-pty-darwin-arm64": "1.2.0-beta.10", "@lydell/node-pty-darwin-x64": "1.2.0-beta.10", "@lydell/node-pty-linux-arm64": "1.2.0-beta.10", "@lydell/node-pty-linux-x64": "1.2.0-beta.10", "@lydell/node-pty-win32-arm64": "1.2.0-beta.10", "@lydell/node-pty-win32-x64": "1.2.0-beta.10" } }, "sha512-Fv+A3+MZVA8qhkBIZsM1E6dCdHNMyXXz22mAYiMWd03LlyK///F3OH6CKPX9mj4id7LUlxpr45yPzyBVy9aDPw=="], + "@lydell/node-pty": ["@lydell/node-pty@1.2.0-beta.12", "", { "optionalDependencies": { "@lydell/node-pty-darwin-arm64": "1.2.0-beta.12", "@lydell/node-pty-darwin-x64": "1.2.0-beta.12", "@lydell/node-pty-linux-arm64": "1.2.0-beta.12", "@lydell/node-pty-linux-x64": "1.2.0-beta.12", "@lydell/node-pty-win32-arm64": "1.2.0-beta.12", "@lydell/node-pty-win32-x64": "1.2.0-beta.12" } }, "sha512-qIK890UwPupoj07osVvgOIa++1mxeHbcGry4PKRHhNVNs81V2SCG34eJr46GybiOmBtc8Sj5PB1/GGM5PL549g=="], - "@lydell/node-pty-darwin-arm64": ["@lydell/node-pty-darwin-arm64@1.2.0-beta.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-C+eqDyRNHRYvx7RaHj6VVCx6nCpRBPuuxhTcc3JH3GuBMoxTsYeY4GkWH2XOktrgbAq1BG8e/Y8bu/wNQreCEw=="], + "@lydell/node-pty-darwin-arm64": ["@lydell/node-pty-darwin-arm64@1.2.0-beta.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tqaifcY9Cr41SblO1+FLzh8oxxtkNhuW9Dhl22lKme9BreYvKvxEZcdPIXTuqkJc5tagOEC4QHShKmJjLyLXLQ=="], - "@lydell/node-pty-darwin-x64": ["@lydell/node-pty-darwin-x64@1.2.0-beta.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-aZoIK6HtJO5BiT4ELm683U4dyHtt8b7wNgq3NJqYAQwSXrcPv576Z8vY3BIulVxfcFkht/SPLKou9TtdFXdNpg=="], + "@lydell/node-pty-darwin-x64": ["@lydell/node-pty-darwin-x64@1.2.0-beta.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-4LrS5pCJwqHKDVf1zS2gyNV0m4hKAXch+XZNhbZ6LY8uwVL8BhchzQBO40Os5anuRxRCWzHpw4Sp64Ie8q7E4Q=="], - "@lydell/node-pty-linux-arm64": ["@lydell/node-pty-linux-arm64@1.2.0-beta.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-0cKX2iMyXFNBE4fGtGK6B7IkdXcDMZajyEDoGMOgQQs/DDtoI5tSPcBcqNY9VitVrsRQA8+gFt6eKYU9Ye/lUA=="], + "@lydell/node-pty-linux-arm64": ["@lydell/node-pty-linux-arm64@1.2.0-beta.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-Sx+A71x5BDGHt9ansfrtGxwq2VFVDWvJUAdlUL0Hv0qeiJUfts+hgopx+CgT4PSwahKjdEgtu0+FAfY9rICKRw=="], - "@lydell/node-pty-linux-x64": ["@lydell/node-pty-linux-x64@1.2.0-beta.10", "", { "os": "linux", "cpu": "x64" }, "sha512-J9HnxvSzEeMH748+Ul1VrmCLWMo7iCVJy9EGijRR62+YO/Yk5GaCydUTZ+KzlH0/X5aTrgt5cfiof4vx45tRRg=="], + "@lydell/node-pty-linux-x64": ["@lydell/node-pty-linux-x64@1.2.0-beta.12", "", { "os": "linux", "cpu": "x64" }, "sha512-bJzs94njofYhGg/UDqW1nj0dtvvu+2OvxMY+RlLS1T17VgcktKoIR6PuenTwE5HJ/D6StCPADmXcT0nNsCKmIQ=="], - "@lydell/node-pty-win32-arm64": ["@lydell/node-pty-win32-arm64@1.2.0-beta.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-PlDJpJX/pnKyy6OmADKzhf+INZDDnzTBGaI0LT4laVNc6NblZNqUSkCMjLFWbeakeuQp0VG37M49WQSN9FDfeA=="], + "@lydell/node-pty-win32-arm64": ["@lydell/node-pty-win32-arm64@1.2.0-beta.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-p7POgjVEiFaBC3/y+AKuV1FzePCsJ6HmZDv2XK+jBZSfwP8+uBAw181ZiKYN1YuRa/XpmBGaWezcI8hZkbW++g=="], - "@lydell/node-pty-win32-x64": ["@lydell/node-pty-win32-x64@1.2.0-beta.10", "", { "os": "win32", "cpu": "x64" }, "sha512-ExFgWrzyldNAMi45U9PLIOu+g/RatP+f0c/dZxaooifME6yLW32BoHveH26/TtoAjZyJrc2iL0u48pgnR1fzmg=="], + "@lydell/node-pty-win32-x64": ["@lydell/node-pty-win32-x64@1.2.0-beta.12", "", { "os": "win32", "cpu": "x64" }, "sha512-IDFa00g7qUDGUYgByrUBJtC+mOjYVt/8KYyWivCg5JjGOHbBUACUQZLl0jTWmnr+tld/UyTpX90a2PY6oTVtRw=="], "@manypkg/find-root": ["@manypkg/find-root@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@types/node": "^12.7.1", "find-up": "^4.1.0", "fs-extra": "^8.1.0" } }, "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA=="], @@ -4498,8 +4502,18 @@ "@octokit/rest/@octokit/plugin-rest-endpoint-methods": ["@octokit/plugin-rest-endpoint-methods@16.1.1", "", { "dependencies": { "@octokit/types": "^15.0.1" }, "peerDependencies": { "@octokit/core": ">=6" } }, "sha512-VztDkhM0ketQYSh5Im3IcKWFZl7VIrrsCaHbDINkdYeiiAsJzjhS2xRFCSJgfN6VOcsoW4laMtsmf3HcNqIimg=="], + "@opencode-ai/core/@ai-sdk/amazon-bedrock": ["@ai-sdk/amazon-bedrock@4.0.107", "", { "dependencies": { "@ai-sdk/anthropic": "3.0.78", "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27", "@smithy/eventstream-codec": "^4.0.1", "@smithy/util-utf8": "^4.0.0", "aws4fetch": "^1.0.20" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-8nT08pGPy25rleJNk56ep00UHK6kCtCmu+ZNqVVSSPDieADlIZqcaN1iRXAFBoCH0Fb9F6C2EjFDaySdsargfQ=="], + + "@opencode-ai/core/@ai-sdk/google": ["@ai-sdk/google@3.0.73", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-o2MuIeyvZrFIeIbnbA8Thrr63irdyUBh0uWBZ2lY6yFeXuE/tcwyXF74bDKS4KvTu84uFpQfpbS/LXHGKKXz+g=="], + + "@opencode-ai/core/@ai-sdk/google-vertex": ["@ai-sdk/google-vertex@4.0.128", "", { "dependencies": { "@ai-sdk/anthropic": "3.0.77", "@ai-sdk/google": "3.0.73", "@ai-sdk/openai-compatible": "2.0.47", "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27", "google-auth-library": "^10.5.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-jK8fixb4km2yfgvb9DUFQRpV/jiDB0v9gyxHoHfPydaQvz+CpAz8DTt1quyaM+Wg9G2R8Zo68CYmHbIkUqW2AA=="], + "@opencode-ai/core/@aws-sdk/credential-providers": ["@aws-sdk/credential-providers@3.993.0", "", { "dependencies": { "@aws-sdk/client-cognito-identity": "3.993.0", "@aws-sdk/core": "^3.973.11", "@aws-sdk/credential-provider-cognito-identity": "^3.972.3", "@aws-sdk/credential-provider-env": "^3.972.9", "@aws-sdk/credential-provider-http": "^3.972.11", "@aws-sdk/credential-provider-ini": "^3.972.9", "@aws-sdk/credential-provider-login": "^3.972.9", "@aws-sdk/credential-provider-node": "^3.972.10", "@aws-sdk/credential-provider-process": "^3.972.9", "@aws-sdk/credential-provider-sso": "^3.972.9", "@aws-sdk/credential-provider-web-identity": "^3.972.9", "@aws-sdk/nested-clients": "3.993.0", "@aws-sdk/types": "^3.973.1", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.23.2", "@smithy/credential-provider-imds": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/property-provider": "^4.2.8", "@smithy/types": "^4.12.0", "tslib": "^2.6.2" } }, "sha512-1M/nukgPSLqe9krzOKHnE8OylUaKAiokAV3xRLdeExVHcRE7WG5uzCTKWTj1imKvPjDqXq/FWhlbbdWIn7xIwA=="], + "@opencode-ai/core/gitlab-ai-provider": ["gitlab-ai-provider@6.8.0", "", { "dependencies": { "@anthropic-ai/sdk": "^0.71.0", "@anycable/core": "^0.9.2", "graphql-request": "^6.1.0", "isomorphic-ws": "^5.0.0", "openai": "^6.16.0", "socket.io-client": "^4.8.1", "vscode-jsonrpc": "^8.2.1", "zod": "^3.25.76" }, "peerDependencies": { "@ai-sdk/provider": ">=3.0.0", "@ai-sdk/provider-utils": ">=4.0.0" } }, "sha512-KwHASXkHtDcgrzTXZVp9Dyx6t8m9nK0R2fCm47MWcxxQ1kOBt3f2LZugtu1kOby8i4Sbd+kvBSYM66PGkDclng=="], + + "@opencode-ai/core/venice-ai-sdk-provider": ["venice-ai-sdk-provider@2.0.2", "", { "dependencies": { "@ai-sdk/openai-compatible": "^2.0.47", "@ai-sdk/provider": "^3.0.10", "@ai-sdk/provider-utils": "^4.0.27" }, "peerDependencies": { "ai": "^6.0.90" } }, "sha512-aoa05nI3BTK5aGbjBflq+Gfln2AHAkwNbWuGGvCzUIsOfp5Y3iPD4O4PUGDAEiWVJWbjpPn0KfDa0H/HebwsaA=="], + "@opencode-ai/storybook/@storybook/addon-a11y": ["@storybook/addon-a11y@10.4.4", "", { "dependencies": { "@storybook/global": "^5.0.0", "axe-core": "^4.2.0" }, "peerDependencies": { "storybook": "^10.4.4" } }, "sha512-/eUCx/6Ozq5grauwm/NqKtlW0oJ26b6GNesXrMuFID8WLg/qLEKf79Awfz9XrmyWxe7loD40K952r7AA5Oc23A=="], "@opencode-ai/storybook/@storybook/addon-docs": ["@storybook/addon-docs@10.4.4", "", { "dependencies": { "@mdx-js/react": "^3.0.0", "@storybook/csf-plugin": "10.4.4", "@storybook/icons": "^2.0.2", "@storybook/react-dom-shim": "10.4.4", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "ts-dedent": "^2.0.0" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.4.4" }, "optionalPeers": ["@types/react"] }, "sha512-yPshCvtmQTq52T2sXuXgjy7B/QbhA/WIZxLYggptNjBL8BJMvbOfp9bAfCKh7+KpRWGqDZ6Y6tWL1Q48Wj3vtw=="], @@ -4958,10 +4972,38 @@ "@octokit/rest/@octokit/core/before-after-hook": ["before-after-hook@4.0.0", "", {}, "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="], + "@opencode-ai/core/@ai-sdk/amazon-bedrock/@ai-sdk/anthropic": ["@ai-sdk/anthropic@3.0.78", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-0OY12G20cUt6iU6htpEA1491Oz++NVxZxlmWGX4B7rSbeZ5pnDmOu6YtW9BKzdZlNx5Gn23i6WMxyZFoMKNcgA=="], + + "@opencode-ai/core/@ai-sdk/amazon-bedrock/@ai-sdk/provider": ["@ai-sdk/provider@3.0.10", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw=="], + + "@opencode-ai/core/@ai-sdk/amazon-bedrock/@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@4.0.27", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@standard-schema/spec": "^1.1.0", "eventsource-parser": "^3.0.8" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-ubkAJ+xODouwtmN1tYlvTPphH1hPOBfZaEQe8U7skGvFAnIRs9PPpsq57bC2+Ky/MB4yzhd6YOsxTAx9sGpazw=="], + + "@opencode-ai/core/@ai-sdk/google/@ai-sdk/provider": ["@ai-sdk/provider@3.0.10", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw=="], + + "@opencode-ai/core/@ai-sdk/google/@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@4.0.27", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@standard-schema/spec": "^1.1.0", "eventsource-parser": "^3.0.8" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-ubkAJ+xODouwtmN1tYlvTPphH1hPOBfZaEQe8U7skGvFAnIRs9PPpsq57bC2+Ky/MB4yzhd6YOsxTAx9sGpazw=="], + + "@opencode-ai/core/@ai-sdk/google-vertex/@ai-sdk/anthropic": ["@ai-sdk/anthropic@3.0.77", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-ML8C2M1YvPA1ulEx4TiyF0k1xvC2ikEiPBIC1PPQ0a5xELUGrO2lAaEzsTEoJ+eCeDd8PSBuFJjs+r+9yIwQXA=="], + + "@opencode-ai/core/@ai-sdk/google-vertex/@ai-sdk/openai-compatible": ["@ai-sdk/openai-compatible@2.0.47", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.27" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-Enm5UlL0zUCrW3792opk5h7hRWxZOZzDe6eQYVFqX9LUOGGCe1h8MZWAGim765nwzgnjlpeYOsuzZmLtRsTPlg=="], + + "@opencode-ai/core/@ai-sdk/google-vertex/@ai-sdk/provider": ["@ai-sdk/provider@3.0.10", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw=="], + + "@opencode-ai/core/@ai-sdk/google-vertex/@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@4.0.27", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@standard-schema/spec": "^1.1.0", "eventsource-parser": "^3.0.8" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-ubkAJ+xODouwtmN1tYlvTPphH1hPOBfZaEQe8U7skGvFAnIRs9PPpsq57bC2+Ky/MB4yzhd6YOsxTAx9sGpazw=="], + "@opencode-ai/core/@aws-sdk/credential-providers/@aws-sdk/client-cognito-identity": ["@aws-sdk/client-cognito-identity@3.993.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "^3.973.11", "@aws-sdk/credential-provider-node": "^3.972.10", "@aws-sdk/middleware-host-header": "^3.972.3", "@aws-sdk/middleware-logger": "^3.972.3", "@aws-sdk/middleware-recursion-detection": "^3.972.3", "@aws-sdk/middleware-user-agent": "^3.972.11", "@aws-sdk/region-config-resolver": "^3.972.3", "@aws-sdk/types": "^3.973.1", "@aws-sdk/util-endpoints": "3.993.0", "@aws-sdk/util-user-agent-browser": "^3.972.3", "@aws-sdk/util-user-agent-node": "^3.972.9", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.23.2", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/hash-node": "^4.2.8", "@smithy/invalid-dependency": "^4.2.8", "@smithy/middleware-content-length": "^4.2.8", "@smithy/middleware-endpoint": "^4.4.16", "@smithy/middleware-retry": "^4.4.33", "@smithy/middleware-serde": "^4.2.9", "@smithy/middleware-stack": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/node-http-handler": "^4.4.10", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.11.5", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.32", "@smithy/util-defaults-mode-node": "^4.2.35", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-7Ne3Yk/bgQPVebAkv7W+RfhiwTRSbfER9BtbhOa2w/+dIr902LrJf6vrZlxiqaJbGj2ALx8M+ZK1YIHVxSwu9A=="], "@opencode-ai/core/@aws-sdk/credential-providers/@aws-sdk/nested-clients": ["@aws-sdk/nested-clients@3.993.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "^3.973.11", "@aws-sdk/middleware-host-header": "^3.972.3", "@aws-sdk/middleware-logger": "^3.972.3", "@aws-sdk/middleware-recursion-detection": "^3.972.3", "@aws-sdk/middleware-user-agent": "^3.972.11", "@aws-sdk/region-config-resolver": "^3.972.3", "@aws-sdk/types": "^3.973.1", "@aws-sdk/util-endpoints": "3.993.0", "@aws-sdk/util-user-agent-browser": "^3.972.3", "@aws-sdk/util-user-agent-node": "^3.972.9", "@smithy/config-resolver": "^4.4.6", "@smithy/core": "^3.23.2", "@smithy/fetch-http-handler": "^5.3.9", "@smithy/hash-node": "^4.2.8", "@smithy/invalid-dependency": "^4.2.8", "@smithy/middleware-content-length": "^4.2.8", "@smithy/middleware-endpoint": "^4.4.16", "@smithy/middleware-retry": "^4.4.33", "@smithy/middleware-serde": "^4.2.9", "@smithy/middleware-stack": "^4.2.8", "@smithy/node-config-provider": "^4.3.8", "@smithy/node-http-handler": "^4.4.10", "@smithy/protocol-http": "^5.3.8", "@smithy/smithy-client": "^4.11.5", "@smithy/types": "^4.12.0", "@smithy/url-parser": "^4.2.8", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.32", "@smithy/util-defaults-mode-node": "^4.2.35", "@smithy/util-endpoints": "^3.2.8", "@smithy/util-middleware": "^4.2.8", "@smithy/util-retry": "^4.2.8", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-iOq86f2H67924kQUIPOAvlmMaOAvOLoDOIb66I2YqSUpMYB6ufiuJW3RlREgskxv86S5qKzMnfy/X6CqMjK6XQ=="], + "@opencode-ai/core/gitlab-ai-provider/@anthropic-ai/sdk": ["@anthropic-ai/sdk@0.71.2", "", { "dependencies": { "json-schema-to-ts": "^3.1.1" }, "peerDependencies": { "zod": "^3.25.0 || ^4.0.0" }, "optionalPeers": ["zod"], "bin": { "anthropic-ai-sdk": "bin/cli" } }, "sha512-TGNDEUuEstk/DKu0/TflXAEt+p+p/WhTlFzEnoosvbaDU2LTjm42igSdlL0VijrKpWejtOKxX0b8A7uc+XiSAQ=="], + + "@opencode-ai/core/gitlab-ai-provider/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="], + + "@opencode-ai/core/venice-ai-sdk-provider/@ai-sdk/openai-compatible": ["@ai-sdk/openai-compatible@2.0.50", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@ai-sdk/provider-utils": "4.0.29" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-HyuxddF2Yv5G8qxK/0uksAINjQ4h6TpwOqHuqzsCM0u78/JWAW2OXcIplQeB44PIAORgPjbMzrw9DhnPYHMskA=="], + + "@opencode-ai/core/venice-ai-sdk-provider/@ai-sdk/provider": ["@ai-sdk/provider@3.0.10", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw=="], + + "@opencode-ai/core/venice-ai-sdk-provider/@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@4.0.29", "", { "dependencies": { "@ai-sdk/provider": "3.0.10", "@standard-schema/spec": "^1.1.0", "eventsource-parser": "^3.0.8" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-uhukHaCBvqkwBHkT8C2PrnqKTCoLn3pdHXqtcR9I8ErH+flbzgW4o7VHSNIup9LRu+WBvZIZDQLsx6rwl2tiOA=="], + "@opencode-ai/storybook/@storybook/addon-docs/@storybook/csf-plugin": ["@storybook/csf-plugin@10.4.4", "", { "dependencies": { "unplugin": "^2.3.5" }, "peerDependencies": { "esbuild": "*", "rollup": "*", "storybook": "^10.4.4", "vite": "*", "webpack": "*" }, "optionalPeers": ["esbuild", "rollup", "vite", "webpack"] }, "sha512-1mzZyAwVUmAcw4WEUsJDVdSupkJf+Kf/f5uNAs4RzlBXA75P8YRkDKAb2EoMwsB5URiXFi9XoeAN/vWke0G6+w=="], "@opencode-ai/storybook/@storybook/addon-docs/@storybook/react-dom-shim": ["@storybook/react-dom-shim@10.4.4", "", { "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "storybook": "^10.4.4" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-y6SObmoW78AydE6VfKQSUmCkuqiaMPy9LgMpMdMEyWfJ/pSxBDMIKycr9dlRMJP1cvNgByaJgrusWtA46ndSQw=="], diff --git a/package.json b/package.json index a45edfc06f..733e116336 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@solidjs/start": "https://pkg.pr.new/@solidjs/start@dfb2020", "solid-js": "1.9.12", "vite-plugin-solid": "2.11.10", - "@lydell/node-pty": "1.2.0-beta.10", + "@lydell/node-pty": "1.2.0-beta.12", "@opentui/keymap": "0.2.15", "@effect/sql-sqlite-bun": "4.0.0-beta.66" } diff --git a/packages/kilo-docs/source-links.md b/packages/kilo-docs/source-links.md index 620973d1de..ce7301c277 100644 --- a/packages/kilo-docs/source-links.md +++ b/packages/kilo-docs/source-links.md @@ -95,6 +95,8 @@ - +- + - - @@ -188,6 +190,8 @@ - +- + - - diff --git a/packages/opencode/package.json b/packages/opencode/package.json index 3db70fbaf7..bb65a3a57a 100644 --- a/packages/opencode/package.json +++ b/packages/opencode/package.json @@ -128,6 +128,7 @@ "@silvia-odwyer/photon-node": "0.3.4", "@solid-primitives/event-bus": "1.1.2", "@solid-primitives/scheduled": "1.5.2", + "@types/ws": "8.18.1", "@zip.js/zip.js": "2.7.62", "ai": "catalog:", "ai-gateway-provider": "3.1.2", @@ -172,6 +173,7 @@ "vscode-jsonrpc": "8.2.1", "web-tree-sitter": "0.25.10", "which": "6.0.1", + "ws": "8.21.0", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", "yargs": "18.0.0", "zod": "catalog:" diff --git a/packages/stats/AGENTS.md b/packages/stats/AGENTS.md deleted file mode 100644 index 409271cf09..0000000000 --- a/packages/stats/AGENTS.md +++ /dev/null @@ -1 +0,0 @@ -To start the stats site locally, run `bun dev:stats` from the repo root. diff --git a/packages/stats/README.md b/packages/stats/README.md deleted file mode 100644 index 6c66684cc5..0000000000 --- a/packages/stats/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# OpenCode Stats - -Stats is a separate site from the console. Runtime, database, and domain services live in `core`; the SolidStart website lives in `app`; deployable Lambda entrypoints live in `function`. - -## Packages - -- `app`: SolidStart frontend/site. -- `core`: Effect services, app config, Drizzle schema/migrations, and stats domains. -- `function`: Lambda handlers that call into `core` services. - -## Commands - -- `bun run dev:stats` from the repo root starts the SolidStart app. -- `bun run --cwd packages/stats/app typecheck` typechecks the site. -- `bun run --cwd packages/stats/core typecheck` typechecks the Effect/database package. -- `bun run --cwd packages/stats/function typecheck` typechecks Lambda entrypoints. diff --git a/packages/stats/app/.gitignore b/packages/stats/app/.gitignore deleted file mode 100644 index 60a72e7e6c..0000000000 --- a/packages/stats/app/.gitignore +++ /dev/null @@ -1,17 +0,0 @@ -dist -.wrangler -.output -.vercel -.netlify -app.config.timestamp_*.js - -# Environment -.env -.env*.local - -# dependencies -/node_modules - -# System Files -.DS_Store -Thumbs.db diff --git a/packages/stats/app/app.config.ts b/packages/stats/app/app.config.ts deleted file mode 100644 index 40a103295f..0000000000 --- a/packages/stats/app/app.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - server: { - preset: "cloudflare-module", - }, -} diff --git a/packages/stats/app/package.json b/packages/stats/app/package.json deleted file mode 100644 index b83bc46b2f..0000000000 --- a/packages/stats/app/package.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/package.json", - "name": "@opencode-ai/stats-app", - "version": "7.3.46", - "private": true, - "type": "module", - "license": "MIT", - "scripts": { - "typecheck": "tsgo --noEmit", - "dev": "vite dev --host 0.0.0.0", - "build": "vite build", - "start": "vite start" - }, - "dependencies": { - "@ibm/plex": "6.4.1", - "@opencode-ai/stats-core": "workspace:*", - "@opencode-ai/ui": "workspace:*", - "@solidjs/meta": "catalog:", - "@solidjs/router": "catalog:", - "@solidjs/start": "catalog:", - "d3-scale": "4.0.2", - "effect": "catalog:", - "nitro": "3.0.1-alpha.1", - "sst": "catalog:", - "solid-js": "catalog:", - "vite": "catalog:" - }, - "devDependencies": { - "@cloudflare/workers-types": "catalog:", - "@types/bun": "catalog:", - "@types/d3-scale": "4.0.9", - "@typescript/native-preview": "catalog:", - "typescript": "catalog:" - }, - "engines": { - "node": ">=22" - } -} diff --git a/packages/stats/app/src/app.css b/packages/stats/app/src/app.css deleted file mode 100644 index 6b7652a033..0000000000 --- a/packages/stats/app/src/app.css +++ /dev/null @@ -1,123 +0,0 @@ -:root { - color-scheme: light dark; - --stats-bg: #f8f5ee; - --stats-ink: #16110d; - --stats-muted: #6d6257; - --stats-line: #ded5c9; - --stats-panel: #fffaf1; - --stats-accent: #2357ff; -} - -@media (prefers-color-scheme: dark) { - :root { - --stats-bg: #11100e; - --stats-ink: #f7efe4; - --stats-muted: #b8aa99; - --stats-line: #322d27; - --stats-panel: #1a1714; - --stats-accent: #86a2ff; - } -} - -html { - line-height: 1; - background: var(--stats-bg); -} - -body { - margin: 0; - min-width: 320px; - background: - radial-gradient(circle at top left, color-mix(in srgb, var(--stats-accent) 16%, transparent), transparent 32rem), - var(--stats-bg); - color: var(--stats-ink); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - -webkit-font-smoothing: antialiased; -} - -a { - color: inherit; -} - -.shell { - box-sizing: border-box; - min-height: 100vh; - padding: 2rem clamp(1rem, 4vw, 4rem); -} - -.panel { - display: grid; - gap: clamp(2rem, 8vw, 5rem); - box-sizing: border-box; - width: min(100%, 72rem); - margin: 0 auto; - padding: clamp(1.25rem, 4vw, 3rem); - border: 1px solid var(--stats-line); - border-radius: 1.5rem; - background: color-mix(in srgb, var(--stats-panel) 88%, transparent); -} - -.eyebrow { - margin: 0 0 1rem; - color: var(--stats-muted); - font-size: 0.75rem; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -h1 { - max-width: 11ch; - margin: 0; - font-size: clamp(3rem, 14vw, 9rem); - line-height: 0.85; - letter-spacing: -0.08em; -} - -.summary { - max-width: 42rem; - margin: 1.5rem 0 0; - color: var(--stats-muted); - font-size: clamp(1rem, 2vw, 1.25rem); - line-height: 1.6; -} - -.grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 1px; - overflow: hidden; - border: 1px solid var(--stats-line); - border-radius: 1rem; - background: var(--stats-line); -} - -.metric { - padding: 1rem; - background: var(--stats-panel); -} - -.metric b { - display: block; - margin-bottom: 0.5rem; - font-size: clamp(1.5rem, 4vw, 3rem); - letter-spacing: -0.05em; -} - -.metric span { - color: var(--stats-muted); - font-size: 0.8125rem; -} - -.link { - display: inline-flex; - width: fit-content; - margin-top: 1.5rem; - color: var(--stats-accent); - text-decoration: none; -} - -@media (max-width: 720px) { - .grid { - grid-template-columns: 1fr; - } -} diff --git a/packages/stats/app/src/app.tsx b/packages/stats/app/src/app.tsx deleted file mode 100644 index 1d46cb782f..0000000000 --- a/packages/stats/app/src/app.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { MetaProvider, Meta, Title } from "@solidjs/meta" -import { Router } from "@solidjs/router" -import { FileRoutes } from "@solidjs/start/router" -import { Suspense } from "solid-js" -import "./app.css" - -function AppMeta() { - return ( - <> - OpenCode Stats - - - ) -} - -export default function App() { - return ( - ( - - - {props.children} - - )} - > - - - ) -} diff --git a/packages/stats/app/src/asset/logo-ornate-dark.svg b/packages/stats/app/src/asset/logo-ornate-dark.svg deleted file mode 100644 index a158273242..0000000000 --- a/packages/stats/app/src/asset/logo-ornate-dark.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/packages/stats/app/src/asset/logo-ornate-light.svg b/packages/stats/app/src/asset/logo-ornate-light.svg deleted file mode 100644 index 2a856dccef..0000000000 --- a/packages/stats/app/src/asset/logo-ornate-light.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/packages/stats/app/src/asset/unfurl-rankings.png b/packages/stats/app/src/asset/unfurl-rankings.png deleted file mode 100644 index 872cb6073d..0000000000 Binary files a/packages/stats/app/src/asset/unfurl-rankings.png and /dev/null differ diff --git a/packages/stats/app/src/entry-client.tsx b/packages/stats/app/src/entry-client.tsx deleted file mode 100644 index 8187b9eadc..0000000000 --- a/packages/stats/app/src/entry-client.tsx +++ /dev/null @@ -1,7 +0,0 @@ -// @refresh reload -import { mount, StartClient } from "@solidjs/start/client" - -const root = document.getElementById("app") -if (!root) throw new Error("Root element #app not found") - -mount(() => , root) diff --git a/packages/stats/app/src/entry-server.tsx b/packages/stats/app/src/entry-server.tsx deleted file mode 100644 index f1e054cfa0..0000000000 --- a/packages/stats/app/src/entry-server.tsx +++ /dev/null @@ -1,37 +0,0 @@ -// @refresh reload -import { createHandler, StartServer } from "@solidjs/start/server" - -const statsThemePreloadScript = `;(function () { - var preference = "system" - try { - var stored = localStorage.getItem("opencode:stats-theme") - if (stored === "dark" || stored === "light" || stored === "system") preference = stored - } catch (_) {} - document.documentElement.dataset.statsTheme = preference - if (preference === "system") document.documentElement.style.removeProperty("color-scheme") - else document.documentElement.style.setProperty("color-scheme", preference) -})()` - -export default createHandler( - () => ( - ( - - - - - - {assets} - - -
{children}
- {scripts} - - - )} - /> - ), - { - mode: "async", - }, -) diff --git a/packages/stats/app/src/global.d.ts b/packages/stats/app/src/global.d.ts deleted file mode 100644 index dc6f10c226..0000000000 --- a/packages/stats/app/src/global.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/packages/stats/app/src/resource.d.ts b/packages/stats/app/src/resource.d.ts deleted file mode 100644 index 098ea852ad..0000000000 --- a/packages/stats/app/src/resource.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import "sst/resource" - -declare module "sst/resource" { - export interface Resource { - EMAILOCTOPUS_API_KEY: { - type: "sst.sst.Secret" - value: string - } - } -} diff --git a/packages/stats/app/src/routes/api/health.ts b/packages/stats/app/src/routes/api/health.ts deleted file mode 100644 index fe7abc9a7f..0000000000 --- a/packages/stats/app/src/routes/api/health.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { AppConfig } from "@opencode-ai/stats-core/config" -import { runtime } from "@opencode-ai/stats-core/runtime" -import { Effect } from "effect" - -export async function GET() { - return Response.json( - await runtime.runPromise( - Effect.gen(function* () { - const config = yield* AppConfig - return { - ok: true, - app: "stats", - stage: config.stage, - publicUrl: config.publicUrl, - } - }), - ), - ) -} diff --git a/packages/stats/app/src/routes/api/newsletter.ts b/packages/stats/app/src/routes/api/newsletter.ts deleted file mode 100644 index 50485fb485..0000000000 --- a/packages/stats/app/src/routes/api/newsletter.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Resource } from "sst/resource" - -const listId = "8b9bb82c-9d5f-11f0-975f-0df6fd1e4945" - -export async function POST(event: { request: Request }) { - const contentType = event.request.headers.get("content-type") ?? "" - if (!contentType.includes("multipart/form-data") && !contentType.includes("application/x-www-form-urlencoded")) { - return Response.json({ error: "Email address is required" }, { status: 400 }) - } - - const form = await event.request.formData() - const emailAddress = form.get("email") - if (typeof emailAddress !== "string" || emailAddress.trim().length === 0) { - return Response.json({ error: "Email address is required" }, { status: 400 }) - } - - const response = await fetch(`https://api.emailoctopus.com/lists/${listId}/contacts`, { - method: "PUT", - headers: { - Authorization: `Bearer ${Resource.EMAILOCTOPUS_API_KEY.value}`, - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email_address: emailAddress.trim(), - }), - }) - if (!response.ok) return Response.json({ error: "Failed to subscribe" }, { status: 502 }) - return Response.json({ success: true }) -} diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css deleted file mode 100644 index d8aee2d6ac..0000000000 --- a/packages/stats/app/src/routes/index.css +++ /dev/null @@ -1,2971 +0,0 @@ -@font-face { - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); - unicode-range: - U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, - U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; -} - -@font-face { - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); - unicode-range: - U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, - U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; -} - -@font-face { - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); - unicode-range: - U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, - U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; -} - -@font-face { - font-family: "IBM Plex Mono"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Latin1.woff2") format("woff2"); - unicode-range: - U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, - U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; -} - -[data-page="stats"] { - color-scheme: light; - --color-background: #ffffff; - --color-background-weak: #fafafa; - --color-background-weak-hover: #eeeeee; - --color-background-strong: #161616; - --color-background-strong-hover: #242424; - --color-text: #5c5c5c; - --color-text-weak: #808080; - --color-text-strong: #161616; - --color-text-inverted: #ffffff; - --color-border-weak: #0000001a; - --stats-bg: #ffffff; - --stats-layer: #fafafa; - --stats-layer-2: #eeeeee; - --stats-line: #0000001a; - --stats-line-strong: #00000033; - --stats-text: #161616; - --stats-muted: #5c5c5c; - --stats-faint: #808080; - --stats-theme-icon-active: #3a3a3a; - --stats-accent: #3b5cf6; - --stats-accent-text: #6c7dff; - --stats-bar-idle: #d4d4d4; - --stats-dot: #d4d4d4; - --stats-hero-muted: #5c5c5c; - --stats-hero-pattern: #eeeeee; - --stats-logo-bg: #161616; - --stats-logo-fill: #454545; - --stats-logo-stroke: #e2e2e2; - --stats-page-padding: 5rem; - --stats-section-padding: 6rem; - min-height: 100vh; - display: flex; - flex-direction: column; - font-synthesis: none; - overflow-x: clip; - padding-bottom: 0; - background: var(--stats-bg); -} - -[data-page="stats"] [data-component="content"] { - color: var(--stats-text); - font-family: - "IBM Plex Mono", - var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); -} - -[data-page="stats"] [data-component="container"] { - box-sizing: border-box; - width: 100%; - max-width: 80rem; - margin: 0 auto; -} - -[data-page="stats"] [data-component="top"] { - position: sticky; - top: 0; - z-index: 10; - box-sizing: border-box; - width: 100%; - color: var(--stats-text); - background: var(--stats-bg); - font-family: - "IBM Plex Mono", - var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); -} - -[data-page="stats"] [data-component="top"] * { - box-sizing: border-box; -} - -[data-page="stats"] [data-slot="header-bar"] { - display: flex; - align-items: center; - gap: 16px; - min-height: 72px; - padding: 20px 20px 20px 24px; - overflow: hidden; -} - -[data-page="stats"] [data-component="top"] a { - text-decoration: none; -} - -[data-page="stats"] [data-component="top"] a:hover { - text-decoration: none; -} - -[data-page="stats"] [data-slot="brand"] { - flex: 0 0 auto; - min-width: 0; - display: flex; - align-items: center; - margin-right: auto; - color: var(--stats-text); -} - -[data-page="stats"] [data-slot="stats-wordmark"] { - display: flex; - flex-shrink: 0; - align-items: center; - gap: 12px; -} - -[data-page="stats"] [data-slot="brand-mark"] { - display: block; - width: 19px; - height: 24px; -} - -[data-page="stats"] [data-slot="brand-label"] { - display: block; - width: 50.851px; - height: 14px; -} - -[data-page="stats"] [data-component="section-nav"] { - display: none; - align-items: center; - justify-content: center; - min-width: 0; -} - -[data-page="stats"] [data-component="section-nav"] ul { - display: flex; - align-items: center; - margin: 0; - padding: 0; - list-style: none; -} - -[data-page="stats"] [data-component="section-nav"] a { - display: flex; - align-items: center; - justify-content: center; - height: 32px; - padding: 0 15px; - color: var(--stats-muted); - font-size: 13px; - line-height: 1; - white-space: nowrap; -} - -[data-page="stats"] [data-component="section-nav"] a:hover { - color: var(--stats-text); -} - -[data-page="stats"] [data-slot="header-actions"] { - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 8px; -} - -[data-page="stats"] [data-slot="header-button"], -[data-page="stats"] [data-slot="menu-button"] { - position: relative; - flex-shrink: 0; - display: inline-flex; - align-items: center; - justify-content: center; - height: 32px; - overflow: hidden; - margin: 0; - border: 0; - border-radius: 0; - appearance: none; - font: inherit; - font-size: 13px; - line-height: 1.1; - cursor: pointer; -} - -[data-page="stats"] [data-slot="header-button"]::before, -[data-page="stats"] [data-slot="menu-button"]::before { - position: absolute; - top: 0; - right: 0; - left: 0; - height: 16px; - pointer-events: none; - content: ""; - background: linear-gradient(180deg, #ffffff00 0%, #ffffff12 100%); -} - -[data-page="stats"] [data-slot="header-button"] { - padding: 0 12px; -} - -[data-page="stats"] [data-slot="header-button"] strong, -[data-page="stats"] [data-slot="header-button"] span, -[data-page="stats"] [data-slot="menu-button"] svg { - position: relative; - z-index: 1; -} - -[data-page="stats"] [data-slot="header-button"] strong { - font-weight: 500; - white-space: nowrap; -} - -[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] { - display: none; - gap: 6px; - color: #161616; - background: #ffffff; - box-shadow: - 0 0 0 0 #00000024, - 0 0 0 0.5px #00000024, - 0 1px 1.5px 0 #0000001a; -} - -[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] span { - color: #5c5c5c; - font-weight: 400; - font-variant-numeric: tabular-nums; -} - -[data-page="stats"] [data-slot="header-button"][data-variant="contrast"] { - gap: 8px; - color: #ffffff; - background: #242424; - box-shadow: - 0 0 0 0 #00000000, - 0 0 0 0.5px #3a3a3a, - 0 1px 1.5px 0 #00000033, - inset 0 -1px 2px 0 #0000000f, - inset 0 1px 2px 0 #ffffff24; -} - -[data-page="stats"] [data-slot="menu-button"] { - display: inline-flex; - width: 32px; - padding: 0; - color: #3a3a3a; - background: #ffffff; - box-shadow: - 0 0 0 0 #00000024, - 0 0 0 0.5px #00000024, - 0 1px 1.5px 0 #0000001a; -} - -[data-page="stats"] [data-slot="header-button"]:focus-visible, -[data-page="stats"] [data-slot="menu-button"]:focus-visible, -[data-page="stats"] [data-component="section-nav"] a:focus-visible, -[data-page="stats"] [data-slot="mobile-menu-item"]:focus-visible, -[data-page="stats"] [data-slot="brand"]:focus-visible { - outline: 2px solid var(--stats-accent); - outline-offset: 2px; -} - -[data-page="stats"] [data-slot="mobile-menu"] { - position: fixed; - top: 72px; - right: 0; - bottom: 0; - left: 0; - z-index: 9; - display: none; - overflow: auto; - background: var(--stats-bg); - border-top: 1px solid var(--stats-line); -} - -[data-page="stats"] [data-menu-open="true"] [data-slot="mobile-menu"]:not([hidden]) { - display: block; -} - -[data-page="stats"] [data-slot="mobile-menu-item"] { - display: flex; - align-items: center; - gap: 12px; - min-height: 65px; - padding: 24px; - color: var(--stats-text); - border-bottom: 1px solid var(--stats-line); - font-size: 13px; - line-height: 16px; - white-space: nowrap; -} - -[data-page="stats"] [data-slot="mobile-menu-item"]:hover { - color: var(--stats-text); - background: var(--stats-layer); -} - -[data-page="stats"] [data-slot="mobile-menu-item"] strong { - font-weight: 400; -} - -[data-page="stats"] [data-slot="mobile-menu-item"] span { - min-width: 0; - overflow: hidden; - color: var(--stats-muted); - font-variant-numeric: tabular-nums; - text-overflow: ellipsis; -} - -[data-page="stats"] [data-component="footer"] { - position: relative; - display: grid; - gap: 56px; - box-sizing: border-box; - min-height: 0; - padding: 112px clamp(32px, 4vw, 48px) 24px; - color: var(--stats-text); - font-family: - "IBM Plex Mono", - var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-size: 11px; -} - -[data-page="stats"] [data-slot="footer-grid"] { - display: grid; - grid-template-columns: 120px repeat(4, minmax(0, 1fr)); - gap: 72px; - align-items: start; -} - -[data-page="stats"] [data-slot="footer-mark"] { - display: block; - width: fit-content; - color: var(--stats-text); -} - -[data-page="stats"] [data-slot="footer-mark"] [data-slot="opencode-mark"] { - display: block; - width: 40px; - height: 40px; -} - -[data-page="stats"] [data-slot="footer-column"] { - display: grid; - align-content: start; - gap: 18px; - min-width: 0; -} - -[data-page="stats"] [data-slot="footer-column"] h2 { - color: var(--stats-text); - font-size: 11px; - font-weight: 500; - line-height: 1; - letter-spacing: 0; -} - -[data-page="stats"] [data-slot="footer-column"] nav { - display: grid; - gap: 12px; -} - -[data-page="stats"] [data-slot="footer-column"] a, -[data-page="stats"] [data-slot="footer-column"] p { - color: var(--stats-text); - font-size: 11px; - font-weight: 400; - line-height: 1.5; - text-decoration: none; -} - -[data-page="stats"] [data-slot="footer-column"] a, -[data-page="stats"] [data-slot="footer-column"] p, -[data-page="stats"] [data-slot="footer-bottom"] { - color: var(--stats-muted); -} - -[data-page="stats"] [data-slot="footer-column"] a:hover { - color: var(--stats-text); - text-decoration: none; -} - -[data-page="stats"] [data-slot="subscribe-button"] { - display: inline-flex; - align-items: center; - justify-content: center; - width: fit-content; - height: 28px; - margin: 0; - padding: 0 12px; - border: 1px solid var(--stats-line); - border-radius: 0; - appearance: none; - background: var(--stats-bg); - color: var(--stats-text) !important; - font: inherit; - font-size: 11px; - font-weight: 500; - line-height: 1; - text-decoration: none; - cursor: pointer; -} - -[data-page="stats"] [data-slot="subscribe-button"]:hover { - border-color: var(--stats-line-strong); - background: var(--stats-layer); -} - -[data-page="stats"] [data-slot="subscribe-button"]:focus-visible, -[data-page="stats"] [data-slot="theme-option"]:focus-visible, -[data-page="stats"] [data-component="subscribe-modal"] button:focus-visible, -[data-page="stats"] [data-component="subscribe-modal"] input:focus-visible { - outline: 2px solid var(--stats-accent); - outline-offset: 2px; -} - -[data-page="stats"] [data-component="subscribe-modal"] { - position: fixed; - inset: 0; - z-index: 80; - display: grid; - place-items: center; - box-sizing: border-box; - padding: 8px; - color: var(--stats-text); - font-family: - "IBM Plex Mono", - var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); -} - -[data-page="stats"] [data-slot="modal-scrim"] { - position: absolute; - inset: 0; - background: #00000066; - backdrop-filter: blur(2px); -} - -[data-page="stats"] [data-slot="modal-panel"] { - position: relative; - z-index: 1; - width: min(374px, calc(100vw - 16px)); - max-height: calc(100dvh - 16px); - overflow: auto; - background: #fafafa; - box-shadow: - 0 0 0 0.5px #0000001f, - 0 4px 8px #00000014, - 0 8px 16px #0000000a; -} - -[data-page="stats"] [data-slot="modal-brand"] { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 122px; - background: #242424; - color: #ffffff; -} - -[data-page="stats"] [data-slot="modal-logo"] { - display: block; - width: 234px; - height: 42px; -} - -[data-page="stats"] [data-slot="modal-close"] { - position: absolute; - top: 0; - right: 0; - display: grid; - place-items: center; - width: 32px; - height: 32px; - margin: 0; - padding: 0; - border: 0; - border-radius: 0; - appearance: none; - background: transparent; - color: #808080; - cursor: pointer; -} - -[data-page="stats"] [data-slot="modal-close"]:hover { - background: #ffffff1a; -} - -[data-page="stats"] [data-slot="modal-body"] { - display: grid; - gap: 24px; - padding: 24px 12px 12px; - background: #fafafa; -} - -[data-page="stats"] [data-slot="modal-intro"] { - display: grid; - gap: 4px; - text-align: center; -} - -[data-page="stats"] [data-slot="modal-intro"] h2 { - color: #161616; - font-size: 16px; - font-weight: 500; - line-height: 24px; - letter-spacing: 0; -} - -[data-page="stats"] [data-slot="modal-intro"] p { - color: #5c5c5c; - font-size: 16px; - font-weight: 400; - line-height: 24px; -} - -[data-page="stats"] [data-slot="subscribe-form"] { - display: grid; - gap: 12px; -} - -[data-page="stats"] [data-slot="subscribe-form"] input, -[data-page="stats"] [data-slot="subscribe-form"] button { - box-sizing: border-box; - width: 100%; - height: 40px; - margin: 0; - border-radius: 0; - appearance: none; - font: inherit; - font-size: 13px; - line-height: 1; -} - -[data-page="stats"] [data-slot="subscribe-form"] input { - padding: 0 12px; - border: 0; - background: #ffffff; - color: #161616; - box-shadow: - 0 0 0 0.5px #00000024, - 0 1px 1.5px #0000001a; -} - -[data-page="stats"] [data-slot="subscribe-form"] input::placeholder { - color: #808080; -} - -[data-page="stats"] [data-slot="subscribe-form"] button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - border: 0; - background: #242424; - color: #ffffff; - font-weight: 500; - cursor: pointer; - box-shadow: - 0 0 0 0.5px #3a3a3a, - 0 1px 1.5px #00000033, - inset 0 -1px 2px #0000000f, - inset 0 1px 2px #ffffff24; -} - -[data-page="stats"] [data-slot="subscribe-form"] button::before { - position: absolute; - top: 0.25px; - right: 0; - left: 0; - height: 20px; - pointer-events: none; - content: ""; - background: linear-gradient(180deg, #ffffff00 0%, #ffffff12 100%); -} - -[data-page="stats"] [data-slot="subscribe-form"] button span { - position: relative; -} - -[data-page="stats"] [data-slot="subscribe-form"] button:disabled { - cursor: progress; - opacity: 0.7; -} - -[data-page="stats"] [data-slot="subscribe-feedback"]:empty { - display: none; -} - -[data-page="stats"] [data-slot="subscribe-feedback"] p { - text-align: center; - font-size: 11px; - font-weight: 500; - line-height: 16px; -} - -[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="success"] { - color: #198b43; -} - -[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="error"] { - color: #b82d35; -} - -[data-page="stats"] [data-slot="footer-pattern"] { - height: 16px; - overflow: hidden; - background: var(--stats-hero-pattern); - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E"); - mask-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="footer-bottom"], -[data-page="stats"] [data-slot="footer-bottom"] > div { - display: flex; - align-items: center; -} - -[data-page="stats"] [data-slot="footer-bottom"] { - justify-content: space-between; - gap: 24px; - font-size: 11px; - line-height: 1; -} - -[data-page="stats"] [data-slot="footer-bottom"] > div:first-child { - gap: 24px; -} - -[data-page="stats"] [data-slot="theme-toggle"] { - display: flex; - align-items: center; - gap: 1px; - padding: 1px; - background: var(--stats-layer-2); -} - -[data-page="stats"] [data-slot="theme-option"] { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 20px; - margin: 0; - padding: 0; - border: 0; - border-radius: 0; - appearance: none; - background: transparent; - color: var(--stats-faint); - font: inherit; - font-size: 11px; - line-height: 1; - cursor: pointer; -} - -[data-page="stats"] [data-slot="theme-icon"] { - display: block; - width: 16px; - height: 16px; - pointer-events: none; -} - -[data-page="stats"] [data-slot="theme-option"]:hover { - color: var(--stats-text); -} - -[data-page="stats"] [data-slot="theme-option"][aria-pressed="true"] { - background: var(--stats-bg); - color: var(--stats-theme-icon-active); - box-shadow: - 0 0 0 0 #0000, - 0 0 0 0.5px #0000001f, - 0 1px 2px -1px #00000014, - 0 2px 4px 0 #0000000a; -} - -[data-page="stats"] [data-slot="status"] { - display: flex; - align-items: center; - gap: 10px; -} - -[data-page="stats"] [data-slot="status"]::before { - content: ""; - width: 6px; - height: 6px; - background: #198b43; -} - -[data-page="stats"] [data-component="content"] a { - color: var(--stats-text); - text-decoration: none; -} - -[data-page="stats"] [data-component="content"] a:hover { - text-decoration: underline; - text-underline-offset: 4px; -} - -[data-page="stats"] [data-section="chart"] { - border-bottom: 1px solid var(--stats-line); - box-shadow: - inset 1px 0 var(--stats-line), - inset -1px 0 var(--stats-line); - padding: var(--stats-section-padding) var(--stats-page-padding); -} - -[data-page="stats"] [data-section="hero"] { - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-end; - gap: 24px; - min-height: 0; - overflow: hidden; - padding: 128px 24px 48px; - border-bottom: 0; - box-shadow: none; -} - -[data-page="stats"] h1, -[data-page="stats"] h2, -[data-page="stats"] p { - margin: 0; -} - -[data-page="stats"] h1 { - font-size: 38px; - line-height: 1; - letter-spacing: normal; - font-weight: 600; - max-width: none; -} - -[data-page="stats"] h2 { - font-size: 24px; - line-height: 1; - letter-spacing: -0.03em; - font-weight: 500; -} - -[data-page="stats"] [data-slot="section-header"] p { - color: var(--stats-muted); - font-size: 16px; - line-height: 1.5; -} - -[data-page="stats"] [data-slot="hero-canvas"] { - display: flex; - flex-direction: column; - gap: 24px; - width: 100%; - min-width: 0; -} - -[data-page="stats"] [data-section="hero"] h1 { - order: 1; - color: var(--stats-text); - font-size: 64px; - font-weight: 500; - line-height: 1; - letter-spacing: 0; -} - -[data-page="stats"] [data-slot="hero-copy"] { - order: 3; - color: var(--stats-hero-muted); - font-size: 16px; - font-weight: 400; - line-height: 1.5; -} - -[data-page="stats"] [data-slot="hero-copy-break"] { - display: none; -} - -[data-page="stats"] [data-slot="hero-pattern"] { - order: 2; - flex: 0 0 auto; - width: 100%; - height: 16px; - overflow: hidden; - background: var(--stats-hero-pattern); - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E"); - mask-repeat: repeat; - mask-size: 6px 6px; - -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E"); - -webkit-mask-repeat: repeat; - -webkit-mask-size: 6px 6px; -} - -[data-page="stats"] [data-slot="hero-meta"] { - display: flex; - align-items: center; - gap: 4px; - width: fit-content; - max-width: 100%; - height: 24px; - padding: 0 8px 0 4px; - background: var(--stats-layer-2); - color: var(--stats-hero-muted); - font-size: 13px; - font-weight: 500; - line-height: 1.1; - overflow: hidden; - white-space: nowrap; -} - -[data-page="stats"] [data-slot="hero-meta"] svg { - width: 16px; - height: 16px; - flex: 0 0 auto; -} - -[data-page="stats"] [data-slot="hero-meta-label"], -[data-page="stats"] [data-slot="hero-meta-empty"] { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; -} - -[data-page="stats"] [data-slot="hero-meta-time"] { - display: inline-flex; - align-items: center; - min-width: 0; - overflow: hidden; -} - -[data-page="stats"] [data-slot="hero-meta-separator"] { - flex: 0 0 auto; - margin-right: 0.35em; -} - -[data-page="stats"] [data-slot="hero-meta-ticker"] { - position: relative; - flex: 0 1 auto; - min-width: 0; - height: 1.1em; - overflow: hidden; - line-height: 1.1; -} - -[data-page="stats"] [data-slot="hero-meta-ticker-track"] { - display: flex; - min-width: 0; - flex-direction: column; - transform: translateY(0); - will-change: transform; -} - -[data-page="stats"] [data-slot="hero-meta-ticker"][data-ticking="true"] [data-slot="hero-meta-ticker-track"] { - animation: stats-hero-meta-ticker 680ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -[data-page="stats"] [data-slot="hero-meta-ticker-item"] { - display: block; - min-width: 0; - overflow: hidden; - line-height: 1.1; - text-overflow: ellipsis; -} - -@keyframes stats-hero-meta-ticker { - 0%, - 18% { - transform: translateY(0); - } - - 82%, - 100% { - transform: translateY(-50%); - } -} - -@media (prefers-reduced-motion: reduce) { - [data-page="stats"] [data-slot="hero-meta-ticker"][data-ticking="true"] [data-slot="hero-meta-ticker-track"] { - animation: none; - transform: translateY(-50%); - } -} - -@media (min-width: 48rem) { - [data-page="stats"] [data-section="hero"] { - gap: 16px; - padding: 128px 32px 32px; - } - - [data-page="stats"] [data-slot="hero-canvas"] { - position: relative; - display: block; - height: 232px; - overflow: hidden; - } - - [data-page="stats"] [data-slot="hero-pattern"] { - position: absolute; - top: 50%; - left: 50%; - width: 1280px; - height: 351px; - transform: translate(-50%, -50%); - } - - [data-page="stats"] [data-section="hero"] h1 { - position: absolute; - top: 0; - left: 0; - z-index: 1; - width: max-content; - max-width: 100%; - padding: 0 12px 12px 0; - background: var(--stats-bg); - white-space: nowrap; - } - - [data-page="stats"] [data-slot="hero-copy"] { - position: absolute; - right: 0; - bottom: 0; - z-index: 1; - width: min(563px, 100%); - padding: 12px 0 0 16px; - background: var(--stats-bg); - text-align: right; - } - - [data-page="stats"] [data-slot="hero-copy-break"] { - display: block; - } -} - -@media (min-width: 75rem) { - [data-page="stats"] [data-section="hero"] { - padding: 128px 40px 24px; - } -} - -@media (min-width: 90rem) { - [data-page="stats"] [data-section="hero"] { - padding-right: 0; - padding-left: 0; - } -} - -[data-page="stats"] [data-section="chart"] { - min-height: 0; -} - -[data-page="stats"] [data-section="top-models"] { - box-sizing: border-box; - margin-top: 1px; - box-shadow: - 0 -1px var(--stats-line), - inset 0 -1px var(--stats-line), - inset 1px 0 var(--stats-line), - inset -1px 0 var(--stats-line); - padding: 80px 40px; - color: var(--stats-text); -} - -[data-page="stats"] [data-slot="top-models-title"] { - max-width: 1200px; - margin-bottom: 40px; - color: var(--stats-muted); - font-size: 28px; - font-weight: 400; - line-height: 1.5; - letter-spacing: 0; -} - -[data-page="stats"] [data-slot="top-models-title"] strong { - color: var(--stats-text); - font-weight: 500; -} - -[data-page="stats"] [data-slot="top-models-title"] span { - color: var(--stats-muted); - font-weight: 400; -} - -[data-page="stats"] [data-slot="top-models-mobile-controls"] { - display: none; -} - -[data-page="stats"] [data-component="top-models-chart"] { - --top-models-bar-gap: 12px; - position: relative; - display: grid; - grid-template-rows: 34px minmax(0, 1fr); - gap: 12px; - width: 100%; - height: clamp(320px, 44vh, 400px); -} - -[data-page="stats"] [data-slot="top-models-axis"], -[data-page="stats"] [data-slot="top-models-bars"] { - display: flex; - min-width: 0; -} - -[data-page="stats"] [data-slot="top-models-axis"] { - gap: var(--top-models-bar-gap); -} - -[data-page="stats"] [data-slot="top-models-axis"] > div { - flex: 1 1 0; - min-width: 0; - color: var(--stats-faint); - font-size: 11px; - font-weight: 500; - line-height: 1.5; -} - -[data-page="stats"] [data-slot="top-models-axis"] > div[data-active="true"] { - color: var(--stats-text); - font-weight: 500; -} - -[data-page="stats"] [data-slot="axis-label"] { - display: flex; - flex-direction: column; -} - -[data-page="stats"] - [data-slot="top-models-axis"] - > div[data-label-hidden="true"]:not([data-active="true"]) - [data-slot="axis-label"], -[data-page="stats"] - [data-slot="market-labels"] - button[data-label-hidden="true"]:not([data-active="true"]) - [data-slot="market-axis-label"] { - visibility: hidden; -} - -[data-page="stats"] [data-slot="axis-date-mobile"] { - display: none; -} - -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] { - --top-models-bar-gap: 8px; - grid-template-rows: 40px minmax(0, 1fr); -} - -[data-page="stats"] [data-component="top-models-chart"][data-range="2M"] { - --top-models-bar-gap: 6px; -} - -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] { - --market-gap: 8px; - grid-template-rows: 40px minmax(0, 1fr); -} - -[data-page="stats"] [data-component="market-share"][data-range="2M"] { - --market-gap: 6px; -} - -[data-page="stats"] [data-component="market-share"][data-range="2M"] [data-slot="market-labels"], -[data-page="stats"] [data-component="market-share"][data-range="2M"] [data-slot="market-bars"] { - gap: var(--market-gap); -} - -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"] > div { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 40px; - font-weight: 600; -} - -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"] button { - position: relative; - align-items: center; - justify-content: center; - height: 40px; - line-height: 1.2; -} - -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-label"], -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-axis-label"] { - position: absolute; - left: 50%; - width: max-content; - max-width: 72px; - transform: rotate(-90deg) translateX(-50%); - transform-origin: left center; -} - -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-total"], -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-date-full"], -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-total"], -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-date-full"] { - display: none; -} - -[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-date-mobile"], -[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-date-mobile"] { - display: block; -} - -[data-page="stats"] [data-slot="top-models-bars"] { - width: calc(100% + var(--top-models-bar-gap)); - margin-inline: calc(var(--top-models-bar-gap) / -2); - min-height: 0; -} - -[data-page="stats"] [data-slot="top-models-bar"] { - position: relative; - box-sizing: border-box; - flex: 1 1 0; - min-width: 0; - height: 100%; - padding-inline: calc(var(--top-models-bar-gap) / 2); - outline: none; - cursor: pointer; -} - -[data-page="stats"] [data-slot="top-models-bar"]::before { - position: absolute; - inset: 0 calc(var(--top-models-bar-gap) / 2); - content: ""; - background: var(--stats-dot); - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E"); - mask-position: 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="top-models-stack"] { - position: absolute; - right: calc(var(--top-models-bar-gap) / 2); - bottom: 0; - left: calc(var(--top-models-bar-gap) / 2); - z-index: 1; - display: grid; - height: var(--top-models-bar-height); - min-height: 0; - overflow: hidden; - background: var(--stats-bg); - box-shadow: 0 -4px 0 var(--stats-bg); -} - -[data-page="stats"] [data-slot="top-models-stack"] i { - box-sizing: border-box; - display: block; - min-height: 0; - transition: background 120ms ease; -} - -[data-page="stats"] [data-slot="top-models-stack"] i + i { - border-top: 2px solid var(--stats-bg); -} - -[data-page="stats"] [data-slot="mobile-filter-button"] { - display: inline-flex; - flex: 1 1 0; - align-items: center; - justify-content: center; - gap: 6px; - height: 32px; - min-width: 0; - overflow: hidden; - padding: 0 12px; - color: var(--stats-text); - background: var(--stats-bg); - border: 0; - border-radius: 0; - box-shadow: - 0 0 0 0 #00000024, - 0 0 0 0.5px #00000024, - 0 1px 1.5px 0 #0000001a; - font-size: 13px; - font-weight: 600; - line-height: 1.1; -} - -[data-page="stats"] [data-slot="mobile-filter-button"] svg { - flex: 0 0 auto; - color: var(--stats-muted); -} - -[data-page="stats"] [data-component="mobile-filter-sheet"] { - position: fixed; - inset: 0; - z-index: 30; - display: flex; - align-items: flex-end; - padding: 0 8px 8px; - background: #00000066; - backdrop-filter: blur(3px); -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] { - width: 100%; - background: var(--stats-bg); - box-shadow: 0 8px 24px #00000026; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button { - position: relative; - display: flex; - align-items: center; - width: 100%; - min-height: 44px; - padding: 0 42px; - color: var(--stats-faint); - background: transparent; - border: 0; - border-radius: 0; - border-bottom: 1px solid var(--stats-line); - font-size: 13px; - font-weight: 600; - line-height: 1.1; - text-align: left; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button:last-child { - border-bottom: 0; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"] { - color: var(--stats-text); - background: transparent; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"]::before { - position: absolute; - left: 20px; - width: 6px; - height: 6px; - content: ""; - background: currentColor; -} - -[data-page="stats"] [data-slot="section-header"] { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 32px; - margin-bottom: 32px; -} - -[data-page="stats"] [data-slot="section-header"] > div { - display: grid; - gap: 18px; - max-width: 460px; -} - -[data-page="stats"] [data-component="controls"] { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 10px; -} - -[data-page="stats"] [data-component="pills"], -[data-page="stats"] [data-component="toggle"] { - display: flex; - gap: 4px; - padding: 4px; - background: var(--stats-layer); - border: 1px solid var(--stats-line); - border-radius: 6px; -} - -[data-page="stats"] [data-component="content"] button { - font: inherit; - color: var(--stats-muted); - background: transparent; - border: 0; - border-radius: 4px; - padding: 7px 10px; - cursor: pointer; -} - -[data-page="stats"] [data-component="content"] button[data-active="true"] { - color: #fff; - background: var(--stats-text); -} - -[data-page="stats"] button[data-slot="mobile-filter-button"] { - padding: 0 12px; - color: var(--stats-text); - background: var(--stats-bg); - border-radius: 0; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button { - padding: 0 42px; - color: var(--stats-faint); - background: transparent; - border-radius: 0; -} - -[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"] { - color: var(--stats-text); - background: transparent; -} - -[data-page="stats"] [data-component="usage-chart"] { - position: relative; -} - -[data-page="stats"] [data-component="usage-chart"] { - display: grid; -} - -[data-page="stats"] [data-component="empty-state"] { - display: grid; - place-content: center; - gap: 12px; - min-height: 280px; - padding: 32px; - background: var(--stats-layer); - border: 1px solid var(--stats-line); - color: var(--stats-muted); - text-align: center; -} - -[data-page="stats"] [data-component="empty-state"] strong { - color: var(--stats-text); - font-weight: 600; -} - -[data-page="stats"] [data-component="empty-state"] p { - max-width: 34rem; - color: var(--stats-muted); - font-size: 13px; - line-height: 1.5; -} - -[data-page="stats"] [data-component="usage-chart"] svg { - display: block; - width: 100%; - overflow: visible; -} - -[data-page="stats"] .chart-total, -[data-page="stats"] .chart-date { - font-size: 14px; - fill: var(--stats-faint); -} - -[data-page="stats"] .chart-date { - font-size: 12px; -} - -[data-page="stats"] [data-component="usage-chart"] g[role="button"] { - outline: none; - cursor: pointer; -} - -[data-page="stats"] [data-component="usage-chart"] g[role="button"] rect { - transition: - fill 120ms ease, - opacity 120ms ease; -} - -[data-page="stats"] [data-component="usage-chart"] g[role="button"][data-active="true"] .chart-total, -[data-page="stats"] [data-component="usage-chart"] g[role="button"][data-active="true"] .chart-date { - fill: var(--stats-text); -} - -[data-page="stats"] [data-slot="chart-footer"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - margin-top: 32px; -} - -[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] { - margin-top: 32px; -} - -[data-page="stats"] [data-component="usage-filter"] { - display: flex; - align-items: center; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="product"] { - gap: 24px; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="range"] { - gap: 6px; -} - -[data-page="stats"] [data-component="usage-filter"] button { - color: var(--stats-faint); - background: transparent; - border: 0; - border-radius: 0; - padding: 0; - font-size: 13px; - font-weight: 500; - line-height: 17px; -} - -[data-page="stats"] [data-component="usage-filter"] button:hover { - color: var(--stats-text); -} - -[data-page="stats"] [data-component="usage-filter"] button[data-active="true"] { - color: var(--stats-text); - background: transparent; - font-weight: 500; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="product"] button[data-active="true"] { - display: flex; - align-items: center; - gap: 6px; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="product"] button[data-active="true"]::before { - content: ""; - width: 16px; - height: 16px; - background: linear-gradient(var(--stats-text), var(--stats-text)) center / 6px 6px no-repeat; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="range"] button { - height: 24px; - width: 36px; - padding: 0; -} - -[data-page="stats"] [data-component="usage-filter"][data-variant="range"] button[data-active="true"] { - background: var(--stats-layer-2); -} - -[data-page="stats"] [data-component="chart-tooltip"] { - position: absolute; - right: auto; - top: 96px; - display: grid; - gap: 8px; - min-width: 220px; - padding: 16px; - background: #fffffff2; - border: 1px solid var(--stats-line-strong); - box-shadow: - 0 8px 16px #0000000a, - 0 4px 8px #00000014; - pointer-events: none; - z-index: 2; -} - -[data-page="stats"] [data-component="chart-tooltip"] p { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: 18px; - margin: 0 -4px; - padding: 2px 4px; - color: var(--stats-muted); - font-size: 12px; - line-height: 17px; -} - -[data-page="stats"] [data-component="chart-tooltip"] p[data-active="true"] { - background: var(--stats-layer-2); - color: var(--stats-text); -} - -[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-label"] { - display: grid; - grid-template-columns: 9px minmax(0, 1fr); - gap: 8px; - min-width: 0; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] { - height: 1px; - margin: 4px -16px 2px; - background: var(--stats-line); -} - -[data-page="stats"] [data-component="chart-tooltip"] i { - width: 9px; - height: 9px; -} - -[data-page="stats"] [data-component="chart-tooltip"] b { - color: var(--stats-text); -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] { - top: 110px; - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: 0; - width: 192px; - min-width: 192px; - padding: 0; - background: #fffffff2; - border: 0; - box-shadow: - 0 0 0 0.5px #00000024, - 0 8px 16px #0000000f, - 0 4px 8px #00000014; - color: var(--stats-text); -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"][data-placement="right"] { - right: auto; - left: calc(100% + 8px); -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"][data-placement="left"] { - right: calc(100% + 8px); - left: auto; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] strong, -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] > span { - display: block; - font-size: 11px; - line-height: 12px; - white-space: nowrap; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] strong { - padding: 8px 8px 0; - font-weight: 500; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] > span { - padding: 4px 8px 8px; - color: var(--stats-muted); -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] { - height: 0.5px; - margin: 0; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] p { - grid-template-columns: minmax(0, 1fr) auto; - gap: 4px; - height: 16px; - margin: 4px 0 0; - padding: 0 8px; - font-size: 11px; - font-weight: 500; - line-height: 12px; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] p[data-muted="true"] { - opacity: 0.46; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] + p { - margin-top: 8px; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] p:last-child { - margin-bottom: 8px; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] [data-slot="tooltip-label"] { - grid-template-columns: 16px minmax(0, 1fr); - gap: 4px; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] i { - width: 6px; - height: 6px; - justify-self: center; -} - -[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] b { - font-weight: 500; -} - -[data-page="stats"] - :is( - [data-section="leaderboard"], - [data-section="market-share"], - [data-section="token-cost"], - [data-section="session-cost"] - ) { - 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); - padding: 80px 40px; - color: var(--stats-text); -} - -[data-page="stats"] [data-component="section-bridge"] { - position: absolute; - top: 0; - left: 50%; - z-index: 2; - display: inline-flex; - align-items: center; - gap: 6px; - height: 24px; - padding: 0 10px; - border: 1px solid var(--stats-line); - background: var(--stats-bg); - color: var(--stats-faint); - font-size: 10px; - font-weight: 500; - line-height: 1; - text-decoration: none; - transform: translate(-50%, -50%); - white-space: nowrap; -} - -[data-page="stats"] [data-component="section-bridge"]:hover { - color: var(--stats-text); - text-decoration: none; -} - -[data-page="stats"] [data-component="section-bridge"] i { - width: 1px; - height: 10px; - background: var(--stats-line-strong); -} - -[data-page="stats"] [data-component="section-bridge"] strong, -[data-page="stats"] [data-component="section-bridge"] b { - color: var(--stats-muted); - font-weight: 600; -} - -[data-page="stats"] [data-component="section-bridge"] { - display: none; -} - -[data-page="stats"] [data-slot="section-title"] { - max-width: 1200px; - margin-bottom: 40px; - color: var(--stats-muted); - font-size: 28px; - font-weight: 400; - line-height: 1.5; - letter-spacing: 0; -} - -[data-page="stats"] [data-slot="section-title"] strong { - color: var(--stats-text); - font-weight: 500; -} - -[data-page="stats"] [data-slot="section-title"] span { - color: var(--stats-muted); - font-weight: 400; -} - -[data-page="stats"] [data-component="leaderboard"] { - display: block; - width: 100%; -} - -[data-page="stats"] [data-slot="leaderboard-pattern"] { - scroll-margin-top: 88px; - height: 16px; - margin: 32px 0 16px; - overflow: hidden; - background: var(--stats-hero-pattern); - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E"); - mask-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="leaderboard-scroll"] { - box-sizing: border-box; - display: flex; - gap: 8px; - width: calc(100% + 80px); - margin-inline: -40px; - padding: 4px 40px 8px; - overflow-x: auto; - overscroll-behavior-x: contain; - scroll-padding-inline: 40px; - scroll-snap-type: x proximity; - scrollbar-width: none; -} - -[data-page="stats"] [data-slot="leaderboard-scroll"]::-webkit-scrollbar { - display: none; -} - -[data-page="stats"] [data-slot="leaderboard-scroll"] [data-component="leader-card"] { - flex: 0 0 clamp(240px, 31vw, 360px); - width: clamp(240px, 31vw, 360px); - scroll-snap-align: start; -} - -[data-page="stats"] [data-component="leader-card"] { - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-between; - min-width: 0; - overflow: hidden; - padding: 16px; - border: 1px solid var(--stats-line); - background: linear-gradient(180deg, #ffffff0a 0%, #ffffff00 100%), var(--stats-layer); - font-size: 13px; - line-height: 1.1; - outline: none; - transition: - background 140ms ease, - border-color 140ms ease, - box-shadow 140ms ease, - transform 140ms ease; -} - -[data-page="stats"] [data-slot="rank"], -[data-page="stats"] [data-slot="delta"][data-negative="true"] { - color: var(--stats-faint); -} - -[data-page="stats"] [data-component="leader-card"][data-size="featured"] { - justify-content: flex-start; - gap: 17px; - min-height: 154px; -} - -[data-page="stats"] [data-component="leader-card"][data-size="compact"] { - min-height: 88px; - box-shadow: - 0 0 0 0.5px #0000001f, - 0 1px 2px -1px #00000014, - 0 2px 4px #0000000a; -} - -[data-page="stats"] [data-slot="leader-watermark"] { - position: absolute; - right: -20px; - top: 50%; - display: none; - width: 168px; - height: 168px; - transform: translateY(-50%); - color: var(--stats-line); - opacity: 0.58; - pointer-events: none; - transition: - color 140ms ease, - opacity 140ms ease; -} - -[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-watermark"] { - display: block; -} - -[data-page="stats"] [data-slot="leader-body"] { - position: relative; - display: flex; - align-items: center; - gap: 12px; - min-width: 0; - z-index: 1; -} - -[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-body"] { - flex-direction: column; - align-items: flex-start; - gap: 12px; - width: 100%; -} - -[data-page="stats"] [data-slot="leader-avatar"] { - display: grid; - place-items: center; - flex: 0 0 auto; - box-sizing: border-box; - width: 20px; - height: 20px; - padding: 3px; - border: 0.5px solid var(--stats-line-strong); - border-radius: 4px; - background: var(--stats-bg); - color: var(--stats-muted); - font-family: var(--font-mono); - font-size: 10px; - font-weight: 600; -} - -[data-page="stats"] [data-slot="leader-copy"] { - display: grid; - gap: 4px; - flex: 1; - min-width: 0; - width: 100%; -} - -[data-page="stats"] [data-slot="leader-copy"] div { - display: flex; - gap: 8px; - min-width: 0; -} - -[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-copy"] div { - gap: 4px; -} - -[data-page="stats"] [data-slot="leader-copy"] strong, -[data-page="stats"] [data-slot="leader-copy"] div > span:first-child { - flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -[data-page="stats"] [data-slot="leader-copy"] strong { - color: var(--stats-text); - font-weight: 600; - line-height: 1.3; -} - -[data-page="stats"] [data-slot="leader-copy"] span { - color: var(--stats-muted); -} - -[data-page="stats"] [data-slot="leader-copy"] [data-slot="delta"] { - color: #198b43; -} - -[data-page="stats"] [data-slot="leader-copy"] [data-slot="delta"][data-negative="true"] { - color: #b82d35; -} - -[data-page="stats"] [data-component="leader-card"][data-active="true"] { - border-color: var(--stats-line-strong); - background: #ffffff; - box-shadow: - 0 0 0 0.5px #00000024, - 0 6px 16px #0000000d, - 0 2px 6px #0000000f; - transform: translateY(-1px); -} - -[data-page="stats"] [data-component="leader-card"][data-active="true"] [data-slot="leader-watermark"] { - color: var(--stats-layer-2); - opacity: 0.86; -} - -[data-page="stats"] [data-component="leader-card"][data-active="true"] [data-slot="leader-avatar"] { - border-color: var(--stats-line-strong); - color: var(--stats-text); -} - -@media (hover: hover) { - [data-page="stats"] [data-component="leader-card"]:hover, - [data-page="stats"] [data-component="leader-card"]:focus-visible { - border-color: var(--stats-line-strong); - background: #ffffff; - box-shadow: - 0 0 0 0.5px #00000024, - 0 6px 16px #0000000d, - 0 2px 6px #0000000f; - transform: translateY(-1px); - } - - [data-page="stats"] [data-component="leader-card"]:hover [data-slot="leader-watermark"], - [data-page="stats"] [data-component="leader-card"]:focus-visible [data-slot="leader-watermark"] { - color: var(--stats-layer-2); - opacity: 0.86; - } - - [data-page="stats"] [data-component="leader-card"]:hover [data-slot="leader-avatar"], - [data-page="stats"] [data-component="leader-card"]:focus-visible [data-slot="leader-avatar"] { - border-color: var(--stats-line-strong); - color: var(--stats-text); - } -} - -[data-page="stats"] [data-component="market-share"] { - --market-gap: 12px; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - gap: 12px; - height: 348px; -} - -[data-page="stats"] [data-slot="market-labels"], -[data-page="stats"] [data-slot="market-bars"] { - display: grid; - grid-template-columns: repeat(var(--market-count), minmax(0, 1fr)); - gap: var(--market-gap); -} - -[data-page="stats"] [data-slot="market-labels"] button, -[data-page="stats"] [data-slot="market-bars"] button { - display: flex; - min-width: 0; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - text-align: left; -} - -[data-page="stats"] [data-slot="market-labels"] button { - flex-direction: column; - align-items: flex-start; - color: var(--stats-faint); - font-size: 10px; - font-weight: 500; - line-height: 14px; -} - -[data-page="stats"] [data-slot="market-labels"] button[data-active="true"] { - color: var(--stats-text); - background: transparent; - font-weight: 600; -} - -[data-page="stats"] [data-slot="market-axis-label"] { - display: grid; -} - -[data-page="stats"] [data-slot="market-date-mobile"] { - display: none; -} - -[data-page="stats"] [data-slot="market-bars"] { - flex: 1; - min-height: 0; -} - -[data-page="stats"] [data-slot="market-bars"] button { - flex-direction: column; - gap: 2px; - height: 100%; - overflow: hidden; -} - -[data-page="stats"] [data-slot="market-bars"] button[data-active="true"] { - background: transparent; -} - -[data-page="stats"] [data-slot="market-bars"] span { - width: 100%; - min-height: 1px; - background: var(--stats-layer-2); - cursor: pointer; - transition: - background-color 140ms ease, - opacity 140ms ease; -} - -[data-page="stats"] [data-component="market-share-list"] { - display: grid; - grid-auto-flow: column; - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(3, auto); - gap: 8px 10px; - margin: 36px 0 0; - padding: 0; - list-style: none; -} - -[data-page="stats"] [data-component="market-share-list"] li { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - height: 28px; - box-sizing: border-box; - padding: 0 8px; - background: var(--stats-layer); - border: 1px solid var(--stats-line); - font-size: 11px; - line-height: 1; - cursor: pointer; - outline: none; - transition: - border-color 120ms ease, - box-shadow 120ms ease, - background 120ms ease; -} - -[data-page="stats"] [data-component="market-share-list"] li[data-active="true"], -[data-page="stats"] [data-component="market-share-list"] li:focus-visible { - border-color: var(--stats-text); - background: var(--stats-layer); - box-shadow: - 0 0 0 0.5px color-mix(in srgb, var(--stats-text) 70%, transparent), - 0 1px 2px -1px #00000014, - 0 2px 4px #0000000a; -} - -[data-page="stats"] [data-component="market-share-list"] span { - width: 22px; - flex: 0 0 auto; - color: var(--stats-muted); - font-weight: 500; - text-align: center; -} - -[data-page="stats"] [data-component="market-share-list"] i { - width: 6px; - height: 6px; - flex: 0 0 auto; -} - -[data-page="stats"] [data-component="market-share-list"] strong { - flex: 1; - min-width: 0; - overflow: hidden; - color: var(--stats-text); - font-weight: 600; - text-overflow: ellipsis; - white-space: nowrap; -} - -[data-page="stats"] [data-component="market-share-list"] em, -[data-page="stats"] [data-component="market-share-list"] b, -[data-page="stats"] [data-slot="market-footer"] span { - color: var(--stats-faint); - font-style: normal; -} - -[data-page="stats"] [data-component="market-share-list"] b { - color: var(--stats-muted); - font-weight: 500; -} - -[data-page="stats"] [data-slot="market-footer"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 64px; - margin-top: 40px; -} - -[data-page="stats"] [data-slot="market-footer"] p { - display: flex; - align-items: center; - gap: 8px; - width: 240px; - color: var(--stats-text); - font-size: 11px; - font-weight: 500; - line-height: 1.1; - white-space: nowrap; -} - -[data-page="stats"] [data-component="token-cost"] { - position: relative; - display: grid; - gap: 8px; - width: 100%; - margin-top: 4px; -} - -[data-page="stats"] button[data-component="token-row"] { - display: flex; - align-items: center; - gap: 12px; - width: 100%; - height: 28px; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - color: var(--stats-text); - font-size: 11px; - line-height: 16px; - text-align: left; -} - -[data-page="stats"] button[data-component="token-row"][data-active="true"] { - background: #0000000a; - color: var(--stats-text); -} - -[data-page="stats"] [data-component="token-row"] strong { - flex: 0 0 56px; - color: var(--stats-text); - font-weight: 500; - white-space: nowrap; -} - -[data-page="stats"] button[data-component="token-row"][data-active="true"] strong { - color: var(--stats-accent-text); -} - -[data-page="stats"] [data-component="token-row"] > span { - flex: 0 0 132px; - overflow: hidden; - color: var(--stats-muted); - font-weight: 400; - line-height: 16px; - text-overflow: ellipsis; - white-space: nowrap; -} - -[data-page="stats"] [data-component="token-row"][data-variant="session"] > span { - flex-basis: 150px; -} - -[data-page="stats"] [data-component="metric-bar"] { - position: relative; - display: block; - flex: 1; - min-width: 0; - height: 5px; - background: var(--stats-layer-2); - font-style: normal; -} - -[data-page="stats"] [data-component="metric-bar"] b { - position: absolute; - inset: 0 auto 0 0; - display: block; - width: var(--metric-bar-fill); - height: 5px; - background: var(--stats-text); -} - -[data-page="stats"] [data-component="metric-bar"][data-active="true"] b { - background: var(--stats-accent); -} - -[data-page="stats"] [data-component="metric-bar"] em { - display: none; -} - -[data-page="stats"] [data-component="metric-bar"][data-active="true"] { - background: var(--stats-line-strong); -} - -[data-page="stats"] [data-slot="session-heading"] { - display: flex; - align-items: flex-end; - gap: 12px; - width: 100%; - height: 18px; -} - -[data-page="stats"] [data-slot="session-heading"] strong { - flex: 0 0 56px; -} - -[data-page="stats"] [data-slot="session-heading"] span { - flex: 0 0 150px; -} - -[data-page="stats"] [data-slot="session-heading"] p { - flex: 1; - min-width: 0; - color: var(--stats-faint); - font-size: 9px; - font-weight: 600; - line-height: 1; -} - -[data-page="stats"] [data-component="token-tooltip"] { - position: absolute; - left: 44%; - z-index: 2; - display: grid; - gap: 6px; - width: 150px; - box-sizing: border-box; - padding: 8px; - background: var(--stats-layer); - box-shadow: - 0 0 0 0.5px #0000001f, - 0 4px 8px #00000014, - 0 8px 16px #0000000a; - pointer-events: none; -} - -[data-page="stats"] [data-component="token-tooltip"] p { - display: flex; - justify-content: space-between; - gap: 10px; - font-size: 9px; - font-weight: 600; - line-height: 1.1; -} - -[data-page="stats"] [data-component="token-tooltip"] span { - color: var(--stats-muted); -} - -[data-page="stats"] [data-slot="token-footer"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - margin-top: 40px; -} - -[data-page="stats"] [data-component="live-filter"] { - display: none; - align-items: center; - gap: 6px; - padding: 0; - color: var(--stats-muted); - font-size: 11px; - font-weight: 500; - line-height: 1.1; -} - -[data-page="stats"] [data-component="live-filter"]::before { - content: ""; - width: 6px; - height: 6px; - background: #198b43; -} - -[data-page="stats"] [data-component="session-cost"] { - position: relative; - display: grid; - gap: 8px; - width: 100%; - margin-top: 4px; -} - -[data-page="stats"] [data-component="toggle"] { - width: fit-content; -} - -[data-page="stats"][data-theme="dark"], -:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) { - color-scheme: dark; - --color-background: #161616; - --color-background-weak: #242424; - --color-background-weak-hover: #303030; - --color-background-strong: #ffffff; - --color-background-strong-hover: #eeeeee; - --color-text: #d4d4d4; - --color-text-weak: #808080; - --color-text-strong: #ffffff; - --color-text-inverted: #161616; - --color-border-weak: #ffffff1a; - --stats-bg: #161616; - --stats-layer: #242424; - --stats-layer-2: #303030; - --stats-line: #ffffff1a; - --stats-line-strong: #ffffff33; - --stats-text: #ffffff; - --stats-muted: #d4d4d4; - --stats-faint: #808080; - --stats-theme-icon-active: #fafafa; - --stats-bar-idle: #303030; - --stats-dot: #303030; - --stats-hero-muted: #808080; - --stats-hero-pattern: #303030; - --stats-logo-bg: #f1ecec; - --stats-logo-fill: #b7b1b1; - --stats-logo-stroke: #211e1e; -} - -[data-page="stats"][data-theme="dark"] [data-component="chart-tooltip"], -:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] { - background: #242424f2; -} - -[data-page="stats"][data-theme="dark"] [data-section="top-models"] [data-component="chart-tooltip"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-section="top-models"] - [data-component="chart-tooltip"] { - background: #242424f2; - box-shadow: - 0 0 0 0.5px #ffffff24, - 0 8px 16px #0000003d, - 0 4px 8px #00000052; -} - -[data-page="stats"][data-theme="dark"] [data-section="top-models"] [data-component="chart-tooltip"] > span, -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-section="top-models"] - [data-component="chart-tooltip"] - > span { - color: var(--stats-faint); -} - -[data-page="stats"][data-theme="dark"] [data-component="leader-card"][data-size="compact"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-size="compact"] { - box-shadow: - 0 0 0 0.5px #ffffff1f, - 0 1px 2px -1px #00000052, - 0 2px 4px #0000003d; -} - -[data-page="stats"][data-theme="dark"] [data-component="leader-card"][data-active="true"], -[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:hover, -[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:focus-visible, -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-active="true"], -:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="leader-card"]:hover, -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:focus-visible { - background: #303030; - box-shadow: - 0 0 0 0.5px #ffffff24, - 0 6px 16px #0000003d, - 0 2px 6px #00000052; -} - -[data-page="stats"][data-theme="dark"] - [data-component="leader-card"][data-active="true"] - [data-slot="leader-watermark"], -[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:hover [data-slot="leader-watermark"], -[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:focus-visible [data-slot="leader-watermark"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-active="true"] - [data-slot="leader-watermark"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:hover - [data-slot="leader-watermark"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:focus-visible - [data-slot="leader-watermark"] { - color: var(--stats-line-strong); - opacity: 0.78; -} - -[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="neutral"], -[data-page="stats"][data-theme="dark"] [data-slot="menu-button"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="neutral"], -:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-slot="menu-button"] { - color: #fafafa; - background: #ffffff0f; - box-shadow: - 0 -0.5px 0 0 #ffffff33, - 0 0 0 0.5px #ffffff33, - 0 1px 2px 0 #00000066; -} - -[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="neutral"] span, -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="neutral"] - span { - color: #aeaeae; -} - -[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="contrast"], -:root[data-stats-theme="dark"] - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="contrast"] { - color: #ffffff; - background: #5c5c5c; - box-shadow: - 0 -0.5px 0 0 #ffffff4d, - 0 0 0 0.5px #ffffff66, - 0 1px 2px 0 #00000066; -} - -@media (prefers-color-scheme: dark) { - :root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) { - color-scheme: dark; - --color-background: #161616; - --color-background-weak: #242424; - --color-background-weak-hover: #303030; - --color-background-strong: #ffffff; - --color-background-strong-hover: #eeeeee; - --color-text: #d4d4d4; - --color-text-weak: #808080; - --color-text-strong: #ffffff; - --color-text-inverted: #161616; - --color-border-weak: #ffffff1a; - --stats-bg: #161616; - --stats-layer: #242424; - --stats-layer-2: #303030; - --stats-line: #ffffff1a; - --stats-line-strong: #ffffff33; - --stats-text: #ffffff; - --stats-muted: #d4d4d4; - --stats-faint: #808080; - --stats-theme-icon-active: #fafafa; - --stats-bar-idle: #303030; - --stats-dot: #303030; - --stats-hero-muted: #808080; - --stats-hero-pattern: #303030; - --stats-logo-bg: #f1ecec; - --stats-logo-fill: #b7b1b1; - --stats-logo-stroke: #211e1e; - } - - :root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] { - background: #242424f2; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-section="top-models"] - [data-component="chart-tooltip"] { - background: #242424f2; - box-shadow: - 0 0 0 0.5px #ffffff24, - 0 8px 16px #0000003d, - 0 4px 8px #00000052; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-section="top-models"] - [data-component="chart-tooltip"] - > span { - color: var(--stats-faint); - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-size="compact"] { - box-shadow: - 0 0 0 0.5px #ffffff1f, - 0 1px 2px -1px #00000052, - 0 2px 4px #0000003d; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-active="true"], - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:hover, - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:focus-visible { - background: #303030; - box-shadow: - 0 0 0 0.5px #ffffff24, - 0 6px 16px #0000003d, - 0 2px 6px #00000052; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"][data-active="true"] - [data-slot="leader-watermark"], - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:hover - [data-slot="leader-watermark"], - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-component="leader-card"]:focus-visible - [data-slot="leader-watermark"] { - color: var(--stats-line-strong); - opacity: 0.78; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="neutral"], - :root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-slot="menu-button"] { - color: #fafafa; - background: #ffffff0f; - box-shadow: - 0 -0.5px 0 0 #ffffff33, - 0 0 0 0.5px #ffffff33, - 0 1px 2px 0 #00000066; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="neutral"] - span { - color: #aeaeae; - } - - :root:not([data-stats-theme="light"]) - [data-page="stats"]:not([data-theme="light"]) - [data-slot="header-button"][data-variant="contrast"] { - color: #ffffff; - background: #5c5c5c; - box-shadow: - 0 -0.5px 0 0 #ffffff4d, - 0 0 0 0.5px #ffffff66, - 0 1px 2px 0 #00000066; - } -} - -@media (min-width: 48rem) { - [data-page="stats"] [data-slot="header-button"][data-variant="neutral"] { - display: inline-flex; - } -} - -@media (min-width: 75rem) { - [data-page="stats"] [data-slot="header-bar"] { - gap: 32px; - } - - [data-page="stats"] [data-slot="brand"], - [data-page="stats"] [data-component="section-nav"], - [data-page="stats"] [data-slot="header-actions"] { - flex: 1 1 0; - } - - [data-page="stats"] [data-slot="brand"] { - margin-right: 0; - } - - [data-page="stats"] [data-component="section-nav"] { - display: flex; - } - - [data-page="stats"] [data-slot="menu-button"] { - display: none; - } - - [data-page="stats"] [data-slot="mobile-menu"] { - display: none !important; - } -} - -@media (min-width: 90rem) { - [data-page="stats"] [data-component="footer"] { - padding-right: 0; - padding-left: 0; - } -} - -@media (max-width: 74rem) { - [data-page="stats"] [data-section="top-models"], - [data-page="stats"] [data-section="leaderboard"], - [data-page="stats"] [data-section="market-share"], - [data-page="stats"] [data-section="token-cost"], - [data-page="stats"] [data-section="session-cost"] { - padding: 64px 32px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] { - width: calc(100% + 64px); - margin-inline: -32px; - padding-right: 32px; - padding-left: 32px; - scroll-padding-inline: 32px; - } -} - -@media (max-width: 58rem) { - [data-page="stats"] { - --stats-page-padding: 24px; - --stats-section-padding: 4rem; - } - - [data-page="stats"] [data-section="chart"] { - padding-left: 24px; - padding-right: 24px; - } - - [data-page="stats"] [data-slot="section-header"] { - flex-direction: column; - } - - [data-page="stats"] [data-component="controls"] { - align-items: flex-start; - } - - [data-page="stats"] [data-component="pills"] { - flex-wrap: wrap; - } - - [data-page="stats"] [data-slot="chart-footer"] { - align-items: flex-start; - flex-direction: column; - } - - [data-page="stats"] [data-component="usage-filter"] { - flex-wrap: wrap; - } - - [data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] { - align-items: center; - flex-direction: row; - } - - [data-page="stats"] [data-section="top-models"] [data-component="usage-filter"] { - flex-wrap: nowrap; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] [data-component="leader-card"] { - flex-basis: 280px; - width: 280px; - } - - [data-page="stats"] [data-component="leader-card"][data-size="featured"], - [data-page="stats"] [data-component="leader-card"][data-size="compact"] { - min-height: 96px; - } - - [data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-body"] { - flex-direction: row; - align-items: center; - gap: 12px; - } - - [data-page="stats"] [data-slot="leader-watermark"] { - right: -64px; - width: 180px; - height: 180px; - font-size: 96px; - } - - [data-page="stats"] [data-slot="session-heading"] { - display: none; - } - - [data-page="stats"] [data-slot="market-labels"], - [data-page="stats"] [data-slot="market-bars"] { - gap: 8px; - } - - [data-page="stats"] [data-component="market-share-list"] { - grid-auto-flow: row; - grid-template-columns: 1fr; - grid-template-rows: none; - } - - [data-page="stats"] [data-component="token-tooltip"] { - position: static; - order: -1; - width: 100%; - margin-bottom: 8px; - } - - [data-page="stats"] [data-slot="market-footer"] { - align-items: flex-start; - flex-direction: column; - gap: 24px; - } - - [data-page="stats"] [data-component="chart-tooltip"] { - position: static; - margin-top: 16px; - } - - [data-page="stats"] [data-component="footer"] { - padding: 88px 24px 24px; - } - - [data-page="stats"] [data-slot="footer-grid"] { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 40px 32px; - } - - [data-page="stats"] [data-slot="footer-mark"] { - grid-column: 1 / -1; - } - - [data-page="stats"] [data-slot="footer-bottom"], - [data-page="stats"] [data-slot="footer-bottom"] > div:first-child { - align-items: flex-start; - flex-direction: column; - } - - [data-page="stats"] [data-slot="footer-bottom"] { - line-height: 1.5; - } -} - -@media (max-width: 47.999rem) { - [data-page="stats"] [data-section="top-models"], - [data-page="stats"] [data-section="leaderboard"], - [data-page="stats"] [data-section="market-share"], - [data-page="stats"] [data-section="token-cost"], - [data-page="stats"] [data-section="session-cost"] { - padding: 48px 24px; - } - - [data-page="stats"] [data-slot="top-models-title"], - [data-page="stats"] [data-slot="section-title"] { - margin-bottom: 32px; - font-size: 16px; - } - - [data-page="stats"] [data-slot="top-models-mobile-controls"] { - display: flex; - gap: 8px; - width: 100%; - } - - [data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] { - display: flex; - margin-top: 24px; - } - - [data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] [data-component="usage-filter"] { - display: none; - } - - [data-page="stats"] [data-slot="leaderboard-featured"], - [data-page="stats"] [data-slot="leaderboard-compact"] { - display: none; - } - - [data-page="stats"] [data-slot="leaderboard-pattern"] { - margin: 24px 0 12px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] { - gap: 12px; - width: calc(100% + 48px); - margin-inline: -24px; - padding-right: 24px; - padding-left: 24px; - scroll-padding-inline: 24px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] [data-component="leader-card"] { - flex: 0 0 240px; - width: 240px; - min-height: 156px; - gap: 32px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] [data-slot="leader-body"] { - flex-direction: column; - align-items: flex-start; - gap: 16px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] [data-slot="leader-avatar"] { - width: 28px; - height: 28px; - padding: 4px; - border-radius: 6px; - } - - [data-page="stats"] [data-slot="leaderboard-scroll"] [data-slot="leader-watermark"] { - right: -68px; - width: 240px; - height: 240px; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"] { - box-sizing: border-box; - display: flex; - gap: 12px; - width: calc(100% + 48px); - margin-inline: -24px; - padding-inline: 24px; - overflow-x: auto; - overscroll-behavior-x: contain; - scroll-padding-inline: 24px; - scroll-snap-type: x proximity; - scrollbar-width: none; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"]::-webkit-scrollbar { - display: none; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"] [data-component="leader-card"] { - flex: 0 0 240px; - width: 240px; - min-height: 156px; - gap: 32px; - scroll-snap-align: start; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-body"] { - flex-direction: column; - align-items: flex-start; - gap: 16px; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-avatar"] { - width: 28px; - height: 28px; - padding: 4px; - border-radius: 6px; - } - - [data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-watermark"] { - right: -68px; - width: 240px; - height: 240px; - } - - [data-page="stats"] [data-component="top-models-chart"] { - grid-template-rows: 40px minmax(0, 1fr); - height: 360px; - } - - [data-page="stats"] [data-component="market-share"] { - grid-template-rows: 40px minmax(0, 1fr); - height: 400px; - } - - [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"], - [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] { - overflow-x: auto; - overflow-y: visible; - overscroll-behavior-x: contain; - scrollbar-width: none; - } - - [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"]::-webkit-scrollbar, - [data-page="stats"] [data-component="market-share"][data-dense-labels="true"]::-webkit-scrollbar { - display: none; - } - - [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] { - --top-models-mobile-bar-width: 12px; - } - - [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"], - [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-bars"] { - min-width: calc(var(--top-models-count) * (var(--top-models-mobile-bar-width) + var(--top-models-bar-gap))); - } - - [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] { - --market-mobile-bar-width: 12px; - } - - [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"], - [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-bars"] { - min-width: calc(var(--market-count) * (var(--market-mobile-bar-width) + var(--market-gap))); - } - - [data-page="stats"] [data-slot="top-models-axis"] > div { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 40px; - font-weight: 600; - } - - [data-page="stats"] [data-slot="market-labels"] button { - position: relative; - align-items: center; - justify-content: center; - height: 40px; - line-height: 1.2; - } - - [data-page="stats"] [data-slot="axis-label"] { - position: absolute; - left: 50%; - width: max-content; - max-width: 72px; - transform: rotate(-90deg) translateX(-50%); - transform-origin: left center; - } - - [data-page="stats"] [data-slot="market-axis-label"] { - position: absolute; - left: 50%; - width: max-content; - max-width: 72px; - transform: rotate(-90deg) translateX(-50%); - transform-origin: left center; - } - - [data-page="stats"] [data-slot="top-models-axis"] > div[data-mobile-hidden="true"] [data-slot="axis-label"], - [data-page="stats"] [data-slot="axis-total"], - [data-page="stats"] [data-slot="axis-date-full"] { - display: none; - } - - [data-page="stats"] [data-slot="market-labels"] button[data-mobile-hidden="true"] [data-slot="market-axis-label"], - [data-page="stats"] [data-slot="market-total"], - [data-page="stats"] [data-slot="market-date-full"] { - display: none; - } - - [data-page="stats"] [data-slot="axis-date-mobile"] { - display: block; - } - - [data-page="stats"] [data-slot="market-date-mobile"] { - display: block; - } - - [data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] { - position: fixed; - top: auto; - right: 12px; - bottom: 12px; - left: 12px; - z-index: 40; - width: auto; - min-width: 0; - max-height: min(320px, 48vh); - overflow: auto; - transform: none; - } - - [data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"][data-placement] { - right: 12px; - left: 12px; - } -} - -@media (max-width: 40rem) { - [data-page="stats"] [data-slot="footer-grid"] { - grid-template-columns: 1fr; - } -} diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx deleted file mode 100644 index a770a9f046..0000000000 --- a/packages/stats/app/src/routes/index.tsx +++ /dev/null @@ -1,1830 +0,0 @@ -import "./index.css" -import { Link, Meta, Title } from "@solidjs/meta" -import { ProviderIcon } from "@opencode-ai/ui/provider-icon" -import ibmPlexMonoRegularLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2?url" -import ibmPlexMonoMediumLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2?url" -import ibmPlexMonoSemiBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2?url" -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, - type LeaderboardEntry, - type MarketDay, - type StatsHomeData, - type SessionCostEntry, - type TokenCostEntry, - type UsagePoint, -} from "@opencode-ai/stats-core/domain/home" -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" - -const products = ["All Users", "Zen", "Go"] as const -const tokenProducts = ["Zen", "Go"] as const -const ranges = ["1D", "1W", "2W", "1M", "2M"] as const -const rangeLabels: Record = { - "1D": "1 Day", - "1W": "1 Week", - "2W": "2 Weeks", - "1M": "1 Month", - "2M": "2 Months", -} -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: "#token-cost", label: "Token Cost" }, - { href: "#session-cost", label: "Session Cost" }, - { 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", - "#7c86ff", - "#51a2ff", - "#00d3f2", - "#00d5be", - "#00bc7d", - "#9ae600", - "#ffb900", - "#ff8904", - "#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") - const statsHomeUrl = new URL( - import.meta.env.BASE_URL, - event?.request.url ?? (typeof window === "undefined" ? statsHomeFallbackUrl : window.location.href), - ).toString() - const statsUnfurlUrl = new URL(statsUnfurlRankings, statsHomeUrl).toString() - const data = createAsync(() => getData()) - const githubStars = createAsync(() => getGitHubStars()) - const [themePreference, setThemePreference] = createSignal("system") - 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 ( -
- {statsHomeTitle} - - - - - - - - - - - - - - - - - - - - - -
-
-
- }> - {(stats) => ( - <> - - - - - - - )} - -
-
-
-
- ) -} - -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") - const [isTicking, setIsTicking] = createSignal(false) - const updatedAtParts = (timeZone: string) => - props.updatedAt ? formatUpdatedAtParts(props.updatedAt, timeZone) : { date: "No rows yet", time: "" } - const previousUpdatedAt = createMemo(() => updatedAtParts(previousTimeZone())) - const currentUpdatedAt = createMemo(() => updatedAtParts(timeZone())) - const currentUpdatedLabel = createMemo(() => - props.updatedAt ? `Updated ${formatUpdatedAtLabel(currentUpdatedAt())}` : "No rows yet", - ) - const isDateTicking = createMemo(() => isTicking() && previousUpdatedAt().date !== currentUpdatedAt().date) - const isTimeTicking = createMemo(() => isTicking() && previousUpdatedAt().time !== currentUpdatedAt().time) - - onMount(() => { - if (!props.updatedAt) return - const nextTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC" - if (nextTimeZone === "UTC") return - if ( - formatUpdatedAtLabel(formatUpdatedAtParts(props.updatedAt, nextTimeZone)) === - formatUpdatedAtLabel(updatedAtParts("UTC")) - ) - return - const timeouts: number[] = [] - timeouts.push( - window.setTimeout(() => { - setPreviousTimeZone(timeZone()) - setTimeZone(nextTimeZone) - setIsTicking(true) - timeouts.push( - window.setTimeout(() => { - setPreviousTimeZone(nextTimeZone) - setIsTicking(false) - }, 720), - ) - }, 480), - ) - onCleanup(() => timeouts.forEach((timeout) => window.clearTimeout(timeout))) - }) - - return ( -
-

- - {props.updatedAt ? ( - <> - - - - ) : ( - No rows yet - )} -

-
- -
- ) -} - -function HeroMetaTickerPart(props: { previous: string; current: string; ticking: boolean }) { - return ( - - - {props.previous} - {props.current} - - - ) -} - -function StatsLoading() { - return ( - <> - - - - - - ) -} - -function ChartSection(props: { - id?: string - title: string - description?: string - controls?: JSX.Element - children: JSX.Element -}) { - return ( -
-
-
-

{props.title}

- {props.description &&

{props.description}

} -
- {props.controls} -
- {props.children} -
- ) -} - -function SectionTitle(props: { title: string; description: string }) { - return ( -

- {props.title}. {props.description} -

- ) -} - -function SectionBridge(props: { label: string; href: string }) { - return ( - - LEAN MORE - - {props.label} - â–¸ - - ) -} - -function EmptyState(props: { title: string; description: string }) { - return ( -
- {props.title} -

{props.description}

-
- ) -} - -function formatUpdatedAtParts(value: string, timeZone: string) { - const date = new Date(value) - if (Number.isNaN(date.getTime())) return { date: "just now", time: "" } - return { - date: new Intl.DateTimeFormat("en", { - month: "short", - day: "numeric", - timeZone, - }).format(date), - time: new Intl.DateTimeFormat("en", { - hour: "numeric", - minute: "2-digit", - timeZone, - timeZoneName: "short", - }).format(date), - } -} - -function formatUpdatedAtLabel(value: { date: string; time: string }) { - if (!value.time) return value.date - return `${value.date}, ${value.time}` -} - -function TopModelsSection(props: { data: StatsHomeData["usage"]; leaderboard: StatsHomeData["leaderboard"] }) { - const [product, setProduct] = createSignal("All Users") - const [range, setRange] = createSignal("2M") - const [sheet, setSheet] = createSignal<"product" | "range">() - const [activeModel, setActiveModel] = createSignal() - const data = createMemo(() => props.data[product()][range()]) - const leaderboard = createMemo(() => props.leaderboard[product()][range()]) - - createEffect(() => { - if (!sheet()) return - if (typeof document === "undefined") return - const htmlOverflow = document.documentElement.style.overflow - const bodyOverflow = document.body.style.overflow - document.documentElement.style.overflow = "hidden" - document.body.style.overflow = "hidden" - const onKeyDown = (event: KeyboardEvent) => { - if (event.key === "Escape") setSheet(undefined) - } - document.addEventListener("keydown", onKeyDown) - onCleanup(() => { - document.documentElement.style.overflow = htmlOverflow - document.body.style.overflow = bodyOverflow - document.removeEventListener("keydown", onKeyDown) - }) - }) - - return ( -
-

- Top models. Usage of models across OpenCode. -

- usageTotal(item) > 0)} - fallback={} - > - - -
- ) -} - -function MobileFilterButton(props: { label: string; value: string; expanded: boolean; onClick: () => void }) { - return ( - - ) -} - -function MobileFilterSheet(props: { - kind: "product" | "range" - product: UsageProduct - range: UsageRange - onProductSelect: (product: UsageProduct) => void - onRangeSelect: (range: UsageRange) => void - onClose: () => void -}) { - return ( -
-
- - {(item) => ( - - )} - - } - > - - {(item) => ( - - )} - - -
-
- ) -} - -function ChevronDown() { - return ( - - ) -} - -function StatsFilters(props: { - product: UsageProduct - range: UsageRange - onProductSelect: (product: UsageProduct) => void - onRangeSelect: (range: UsageRange) => void -}) { - return ( - <> - - - - ) -} - -function FilterPills(props: { - items: readonly T[] - selected: T - label: string - variant: "product" | "range" - onSelect: (item: T) => void -}) { - return ( -
- - {(item) => ( - - )} - -
- ) -} - -function TopModelsChart(props: { - data: UsagePoint[] - range: UsageRange - activeModel: string | undefined - onActiveModelChange: (model: string | undefined) => void -}) { - let chartRef: HTMLDivElement | undefined - const [activeIndex, setActiveIndex] = createSignal() - const maxTotal = createMemo(() => getTopModelsMaxTotal(props.data)) - const segmentOrder = createMemo(() => getTopModelsSegmentOrder(props.data)) - const activePoint = createMemo(() => props.data[activeIndex() ?? -1]) - - createEffect(() => scrollDenseChartToEnd(chartRef, props.range, props.data.length)) - - return ( -
- -
- - {(day, dayIndex) => ( -
{ - if (event.pointerType !== "touch") return - setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) - }} - onPointerEnter={() => { - setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) - }} - onPointerLeave={(event) => { - if (event.pointerType === "touch") return - setActiveIndex(undefined) - props.onActiveModelChange(undefined) - }} - onClick={() => { - setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) - }} - onFocus={() => { - setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) - }} - onBlur={() => { - setActiveIndex(undefined) - props.onActiveModelChange(undefined) - }} - onKeyDown={(event) => { - if (event.key !== "Enter" && event.key !== " ") return - event.preventDefault() - setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) - }} - > -
- - {(item) => ( - { - event.stopPropagation() - setActiveIndex(dayIndex()) - props.onActiveModelChange(item.segment.model) - }} - onPointerDown={(event) => { - event.stopPropagation() - setActiveIndex(dayIndex()) - props.onActiveModelChange(item.segment.model) - }} - onClick={(event) => { - event.stopPropagation() - setActiveIndex(dayIndex()) - props.onActiveModelChange(item.segment.model) - }} - /> - )} - -
- - {(point) => ( -
props.data.length * 0.62 ? "left" : "right"} - > - {point().date} - {formatTokens(usageTotal(point()))} total -
- - {(item) => ( -

- - {" "} - {item.segment.model} - - {formatTokens(item.segment.value)} -

- )} - -
- )} - -
- )} - -
-
- ) -} - -function getTopModelsBarHeight(total: number, max: number) { - if (total <= 0) return 0 - return Math.max(2, Math.min(100, (total / max) * 100)) -} - -function getTopModelsMaxTotal(data: UsagePoint[]) { - const max = Math.max(0, ...data.map((item) => usageTotal(item))) - if (max === 0) return 1 - if (data.length === 1) return max * 1.75 - return max -} - -function getTopModelsSegmentRows(point: UsagePoint, order: Map) { - const total = usageTotal(point) - if (total <= 0) return "" - return stackedTopModelsSegments(point, order) - .map((item) => `${(item.segment.value / total) * 100}%`) - .join(" ") -} - -function visibleTopModelsSegments(point: UsagePoint) { - return point.segments.map((segment, index) => ({ segment, index })).filter((item) => item.segment.value > 0) -} - -function stackedTopModelsSegments(point: UsagePoint, order: Map) { - return visibleTopModelsSegments(point) - .slice() - .sort((a, b) => (order.get(b.segment.model) ?? b.index) - (order.get(a.segment.model) ?? a.index)) -} - -function getTopModelsSegmentOrder(data: UsagePoint[]) { - return getRankOrder( - data.flatMap((point) => - point.segments.map((segment, index) => ({ key: segment.model, value: segment.value, index })), - ), - ) -} - -function getTopModelsSegmentColor( - model: string, - index: number, - order: Map, - muted: boolean, - activeModel: string | undefined, -) { - if (activeModel !== undefined) - return activeModel === model ? getRankColor(model, index, order, usageColors) : "var(--stats-layer-2)" - if (muted) return "var(--stats-layer-2)" - return getRankColor(model, index, order, usageColors) -} - -function isTopModelsMobileAxisHidden(index: number, count: number) { - return count > 7 && index % 2 === 1 -} - -function isColumnLabelHidden(index: number, count: number) { - if (count <= 20) return false - const interval = Math.ceil(count / 8) - return index !== count - 1 && index % interval !== 0 -} - -function isDenseColumnRange(range: UsageRange) { - return range === "1M" || range === "2M" -} - -function scrollDenseChartToEnd(element: HTMLDivElement | undefined, range: UsageRange, count: number) { - if (!element || count <= 0 || !isDenseColumnRange(range) || typeof window === "undefined") return - window.requestAnimationFrame(() => { - element.scrollLeft = element.scrollWidth - element.clientWidth - }) -} - -function formatTopModelsMobileDate(label: string, range: UsageRange) { - if (range === "1M" || range === "2M") return label.split(" - ")[0] ?? label - return label -} - -function usageTotal(point: UsagePoint) { - return point.segments.reduce((sum, item) => sum + item.value, 0) -} - -function formatTokens(value: number) { - if (value >= 1) return `${value.toFixed(value >= 10 ? 0 : 1)}T` - return `${Math.round(value * 1000)}B` -} - -function Leaderboard(props: { - data: LeaderboardEntry[] - activeModel: string | undefined - onActiveModelChange: (model: string | undefined) => void -}) { - return ( -
-
- - {(entry) => ( - - )} - -
-
- ) -} - -function LeaderboardCard(props: { - entry: LeaderboardEntry - active: boolean - onActiveModelChange: (model: string | undefined) => void -}) { - return ( -
props.onActiveModelChange(props.entry.model)} - onPointerLeave={(event) => { - if (event.pointerType === "touch") return - props.onActiveModelChange(undefined) - }} - onFocus={() => props.onActiveModelChange(props.entry.model)} - onBlur={() => props.onActiveModelChange(undefined)} - onClick={() => props.onActiveModelChange(props.entry.model)} - > - {String(props.entry.rank).padStart(2, "0")} -
- ) -} - -function getProviderIconId(author: string) { - if (author === "MiniMax") return "minimax" - if (author === "Moonshot") return "moonshotai" - if (author === "Zhipu") return "zhipuai" - return author.toLowerCase() -} - -function formatBillions(value: number) { - if (value >= 1000) return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}T` - return `${value}B` -} - -function formatChange(value: number) { - if (value > 0) return `+${value}%` - return `${value}%` -} - -function MarketShareSection(props: { data: StatsHomeData["market"] }) { - const [range, setRange] = createSignal("2M") - const [activeIndex, setActiveIndex] = createSignal(2) - const [activeAuthor, setActiveAuthor] = createSignal() - const [inspecting, setInspecting] = createSignal(false) - const data = createMemo(() => props.data[range()]) - const authorOrder = createMemo(() => getMarketAuthorOrder(data())) - const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(data().length - 1, 0))) - const activeDay = createMemo(() => data()[selectedIndex()]) - - return ( -
{ - if (event.pointerType === "touch") return - setActiveAuthor(undefined) - setInspecting(false) - }} - > - - - } - > - {(day) => ( - <> - { - setActiveIndex(index) - setInspecting(true) - }} - onActiveAuthorChange={(author) => { - setActiveAuthor(author) - setInspecting(true) - }} - /> - { - setActiveAuthor(author) - setInspecting(true) - }} - /> - - )} - -
-

- [*] - {inspecting() ? formatMarketDate(activeDay()) : formatMarketRange(data())} -

- { - setRange(item) - setActiveAuthor(undefined) - setInspecting(false) - }} - /> -
-
- ) -} - -function MarketShare(props: { - data: MarketDay[] - range: UsageRange - authorOrder: Map - activeIndex: number - activeAuthor: string | undefined - inspecting: boolean - onActiveIndexChange: (index: number) => void - onActiveAuthorChange: (author: string) => void -}) { - let chartRef: HTMLDivElement | undefined - - createEffect(() => scrollDenseChartToEnd(chartRef, props.range, props.data.length)) - - return ( -
-
- - {(day, index) => ( - - )} - -
-
- - {(day, index) => ( - - )} - -
-
- ) -} - -function MarketShareList(props: { - data: MarketDay["authors"] - authorOrder: Map - activeAuthor: string | undefined - onActiveAuthorChange: (author: string) => void -}) { - return ( -
    - - {(item, index) => ( -
  1. props.onActiveAuthorChange(item.author)} - onFocus={() => props.onActiveAuthorChange(item.author)} - onKeyDown={(event) => { - if (event.key !== "Enter" && event.key !== " ") return - event.preventDefault() - props.onActiveAuthorChange(item.author) - }} - > - {String(index() + 1).padStart(2, "0")} - - {item.author} - {formatTrillions(item.tokens)} - {item.share.toFixed(1)}% -
    2. - )} -     -
- ) -} - -function getMarketSegmentColor(author: string, color: string, activeAuthor: string | undefined) { - if (!activeAuthor) return color - if (activeAuthor === author) return color - return "var(--stats-bar-idle)" -} - -function stackedMarketAuthors(day: MarketDay, order: Map) { - return day.authors - .map((author, index) => ({ author, index })) - .slice() - .sort((a, b) => (order.get(b.author.author) ?? b.index) - (order.get(a.author.author) ?? a.index)) -} - -function getMarketAuthorOrder(data: MarketDay[]) { - return getRankOrder( - data.flatMap((day) => day.authors.map((author, index) => ({ key: author.author, value: author.tokens, index }))), - ) -} - -function getRankOrder(items: { key: string; value: number; index: number }[]) { - return new Map( - Object.values( - items.reduce>((result, item) => { - result[item.key] = { - key: item.key, - value: (result[item.key]?.value ?? 0) + item.value, - index: Math.min(result[item.key]?.index ?? item.index, item.index), - } - return result - }, {}), - ) - .toSorted((a, b) => b.value - a.value || a.index - b.index || a.key.localeCompare(b.key)) - .map((item, index) => [item.key, index] as const), - ) -} - -function getRankColor(key: string, fallbackIndex: number, order: Map, colors: readonly string[]) { - return colors[order.get(key) ?? fallbackIndex] ?? "var(--stats-text)" -} - -function isMarketMobileLabelHidden(index: number, count: number) { - return count > 7 && index % 2 === 1 -} - -function formatMarketMobileDate(label: string) { - return marketDateParts(label).start -} - -function formatTrillions(value: number) { - return `${value.toFixed(value >= 10 ? 0 : 1)}T` -} - -function formatMarketDate(day: MarketDay | undefined) { - if (!day) return "No data" - return formatMarketDateLabel(day.date) -} - -function formatMarketRange(data: MarketDay[]) { - const first = data[0]?.date - const last = data[data.length - 1]?.date - if (!first || !last) return "No data" - const start = marketDateParts(first).start - const end = marketDateParts(last).end - if (start === end) return formatMarketDateLabel(start) - return `${start} ${new Date().getFullYear()} → ${end} ${new Date().getFullYear()}` -} - -function formatMarketDateLabel(label: string) { - const parts = marketDateParts(label) - const year = new Date().getFullYear() - if (parts.start === parts.end) return `${parts.start} ${year}` - return `${parts.start} ${year} → ${parts.end} ${year}` -} - -function marketDateParts(label: string) { - const [start, end] = label.split(" - ") - return { start: start ?? label, end: end ?? start ?? label } -} - -function TokenCostSection(props: { data: StatsHomeData["tokenCost"] }) { - const [product, setProduct] = createSignal("Zen") - const [activeIndex, setActiveIndex] = createSignal(2) - const data = createMemo(() => props.data[product()]) - const visible = createMemo(() => data().slice(0, 13)) - const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(visible().length - 1, 0))) - - return ( -
- - - 0} - fallback={ - - } - > - - -
- - -
-
- ) -} - -function TokenCostChart(props: { - data: TokenCostEntry[] - activeIndex: number - onActiveIndexChange: (index: number) => void -}) { - const max = createMemo(() => Math.max(0, ...props.data.map((item) => item.total)) || 1) - const active = createMemo(() => props.data[props.activeIndex] ?? props.data[0]) - - return ( -
- - {(item, index) => ( - - )} - - - {(item) => ( -
-

- Input - {formatDollars(item().input)} -

-

- Output - {formatDollars(item().output)} -

-

- Cached - {formatDollars(item().cached)} -

-
- )} - -
- ) -} - -function formatDollars(value: number) { - return `$${value.toFixed(2)}` -} - -function MetricBar(props: { value: number; max: number; active: boolean }) { - const fill = createMemo(() => Math.min(1, Math.max(props.value / props.max, props.value > 0 ? 0.03 : 0))) - return ( - - - - - ) -} - -function SessionCostSection(props: { data: StatsHomeData["sessionCost"] }) { - const [product, setProduct] = createSignal("Zen") - const [activeIndex, setActiveIndex] = createSignal(2) - const data = createMemo(() => props.data[product()]) - const visible = createMemo(() => data().slice(0, 16)) - const selectedIndex = createMemo(() => Math.min(activeIndex(), Math.max(visible().length - 1, 0))) - - return ( -
- - - 0} - fallback={ - - } - > - - -
- - -
-
- ) -} - -function SessionCostChart(props: { - data: SessionCostEntry[] - activeIndex: number - onActiveIndexChange: (index: number) => void -}) { - const maxCost = createMemo(() => Math.max(0, ...props.data.map((item) => item.cost)) || 1) - const maxTokens = createMemo(() => Math.max(0, ...props.data.map((item) => item.tokens)) || 1) - const active = createMemo(() => props.data[props.activeIndex] ?? props.data[0]) - - return ( -
-
-