This commit is contained in:
decolua
2026-03-31 15:41:52 +07:00
parent 8640503b36
commit 9708541f6d
13 changed files with 471 additions and 13 deletions

View File

@@ -96,6 +96,15 @@ export const PROVIDERS = {
tokenUrl: "https://iflow.cn/oauth/token", tokenUrl: "https://iflow.cn/oauth/token",
authUrl: "https://iflow.cn/oauth" authUrl: "https://iflow.cn/oauth"
}, },
qoder: {
baseUrl: "https://api.qoder.com/v1/chat/completions",
format: "openai",
headers: { "User-Agent": "Qoder-Cli" },
clientId: process.env.QODER_OAUTH_CLIENT_ID || "10009311001",
clientSecret: process.env.QODER_OAUTH_CLIENT_SECRET || "4Z3YjXycVsQvyGF1etiNlIBB4RsqSDtW",
tokenUrl: "https://api.qoder.com/oauth/token",
authUrl: "https://qoder.com/oauth/authorize"
},
antigravity: { antigravity: {
baseUrls: [ baseUrls: [
"https://daily-cloudcode-pa.googleapis.com", "https://daily-cloudcode-pa.googleapis.com",

View File

@@ -2,6 +2,7 @@ import { AntigravityExecutor } from "./antigravity.js";
import { GeminiCLIExecutor } from "./gemini-cli.js"; import { GeminiCLIExecutor } from "./gemini-cli.js";
import { GithubExecutor } from "./github.js"; import { GithubExecutor } from "./github.js";
import { IFlowExecutor } from "./iflow.js"; import { IFlowExecutor } from "./iflow.js";
import { QoderExecutor } from "./qoder.js";
import { KiroExecutor } from "./kiro.js"; import { KiroExecutor } from "./kiro.js";
import { CodexExecutor } from "./codex.js"; import { CodexExecutor } from "./codex.js";
import { CursorExecutor } from "./cursor.js"; import { CursorExecutor } from "./cursor.js";
@@ -13,6 +14,7 @@ const executors = {
"gemini-cli": new GeminiCLIExecutor(), "gemini-cli": new GeminiCLIExecutor(),
github: new GithubExecutor(), github: new GithubExecutor(),
iflow: new IFlowExecutor(), iflow: new IFlowExecutor(),
qoder: new QoderExecutor(),
kiro: new KiroExecutor(), kiro: new KiroExecutor(),
codex: new CodexExecutor(), codex: new CodexExecutor(),
cursor: new CursorExecutor(), cursor: new CursorExecutor(),
@@ -38,6 +40,7 @@ export { AntigravityExecutor } from "./antigravity.js";
export { GeminiCLIExecutor } from "./gemini-cli.js"; export { GeminiCLIExecutor } from "./gemini-cli.js";
export { GithubExecutor } from "./github.js"; export { GithubExecutor } from "./github.js";
export { IFlowExecutor } from "./iflow.js"; export { IFlowExecutor } from "./iflow.js";
export { QoderExecutor } from "./qoder.js";
export { KiroExecutor } from "./kiro.js"; export { KiroExecutor } from "./kiro.js";
export { CodexExecutor } from "./codex.js"; export { CodexExecutor } from "./codex.js";
export { CursorExecutor } from "./cursor.js"; export { CursorExecutor } from "./cursor.js";

View File

@@ -0,0 +1,73 @@
import crypto from "crypto";
import { BaseExecutor } from "./base.js";
import { PROVIDERS } from "../config/providers.js";
/**
* QoderExecutor - Executor for Qoder API with HMAC-SHA256 signature
* Requires 3 custom headers to avoid 406 error: session-id, x-qoder-timestamp, x-qoder-signature
*/
export class QoderExecutor extends BaseExecutor {
constructor() {
super("qoder", PROVIDERS.qoder);
}
/**
* Create Qoder signature using HMAC-SHA256
* Formula: HMAC-SHA256(key=apiKey, message="UserAgent:sessionID:timestamp")
*/
createSignature(userAgent, sessionID, timestamp, apiKey) {
if (!apiKey) return "";
const payload = `${userAgent}:${sessionID}:${timestamp}`;
const hmac = crypto.createHmac("sha256", apiKey);
hmac.update(payload);
return hmac.digest("hex");
}
/**
* Build headers with Qoder-specific signature
*/
buildHeaders(credentials, stream = true) {
const sessionID = `session-${crypto.randomUUID()}`;
const timestamp = Date.now();
const userAgent = this.config.headers["User-Agent"] || "Qoder-Cli";
const apiKey = credentials.apiKey || credentials.accessToken || "";
const signature = this.createSignature(userAgent, sessionID, timestamp, apiKey);
const headers = {
"Content-Type": "application/json",
...this.config.headers,
"session-id": sessionID,
"x-qoder-timestamp": timestamp.toString(),
"x-qoder-signature": signature,
};
if (credentials.apiKey) {
headers["Authorization"] = `Bearer ${credentials.apiKey}`;
} else if (credentials.accessToken) {
headers["Authorization"] = `Bearer ${credentials.accessToken}`;
}
if (stream) {
headers["Accept"] = "text/event-stream";
}
return headers;
}
buildUrl(model, stream, urlIndex = 0, credentials = null) {
return this.config.baseUrl;
}
/**
* Inject stream_options for usage data on streaming requests
*/
transformRequest(model, body, stream, credentials) {
if (stream && body.messages && !body.stream_options) {
body.stream_options = { include_usage: true };
}
return body;
}
}
export default QoderExecutor;

View File

@@ -1,6 +1,6 @@
{ {
"name": "9router-app", "name": "9router-app",
"version": "0.3.66", "version": "0.3.69",
"description": "9Router web dashboard", "description": "9Router web dashboard",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@@ -737,7 +737,7 @@ export default function ProviderDetailPage() {
{providerInfo.notice && !providerInfo.deprecated && ( {providerInfo.notice && !providerInfo.deprecated && (
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-black/[0.02] dark:bg-white/[0.02] border border-black/[0.05] dark:border-white/[0.05]"> <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-black/[0.02] dark:bg-white/[0.02] border border-black/[0.05] dark:border-white/[0.05]">
<span className="material-symbols-outlined text-[16px] text-text-muted shrink-0">info</span> <span className="material-symbols-outlined text-[16px] text-text-muted shrink-0">info</span>
<p className="text-xs text-text-muted leading-relaxed flex-1">{providerInfo.notice.text}</p> <p className="text-xs text-text-muted leading-relaxed">{providerInfo.notice.text}</p>
{providerInfo.notice.apiKeyUrl && ( {providerInfo.notice.apiKeyUrl && (
<a <a
href={providerInfo.notice.apiKeyUrl} href={providerInfo.notice.apiKeyUrl}

View File

@@ -7,7 +7,7 @@ import {
getProxyPoolById, getProxyPoolById,
} from "@/models"; } from "@/models";
import { APIKEY_PROVIDERS } from "@/shared/constants/config"; import { APIKEY_PROVIDERS } from "@/shared/constants/config";
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers"; import { FREE_TIER_PROVIDERS, isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
@@ -100,6 +100,7 @@ export async function POST(request) {
// Validation // Validation
const isValidProvider = APIKEY_PROVIDERS[provider] || const isValidProvider = APIKEY_PROVIDERS[provider] ||
FREE_TIER_PROVIDERS[provider] ||
isOpenAICompatibleProvider(provider) || isOpenAICompatibleProvider(provider) ||
isAnthropicCompatibleProvider(provider); isAnthropicCompatibleProvider(provider);

View File

@@ -63,6 +63,17 @@ export const QWEN_CONFIG = {
codeChallengeMethod: "S256", codeChallengeMethod: "S256",
}; };
// Qoder OAuth Configuration (Device Token Flow)
export const QODER_CONFIG = {
apiBaseUrl: "https://api2.qoder.sh",
deviceTokenUrl: "https://api2.qoder.sh/api/v1/deviceToken/poll",
deviceRefreshUrl: "https://api2.qoder.sh/api/v1/deviceToken/refresh",
refreshUrl: "https://api2.qoder.sh/api/v3/user/refresh_token",
userInfoUrl: "https://api2.qoder.sh/api/v1/userinfo",
statusUrl: "https://api2.qoder.sh/api/v3/user/status",
loginUrl: "https://qoder.com/login",
};
// iFlow OAuth Configuration (Authorization Code) // iFlow OAuth Configuration (Authorization Code)
export const IFLOW_CONFIG = { export const IFLOW_CONFIG = {
clientId: "10009311001", clientId: "10009311001",
@@ -250,6 +261,7 @@ export const PROVIDERS = {
CODEX: "codex", CODEX: "codex",
GEMINI: "gemini-cli", GEMINI: "gemini-cli",
QWEN: "qwen", QWEN: "qwen",
QODER: "qoder",
IFLOW: "iflow", IFLOW: "iflow",
ANTIGRAVITY: "antigravity", ANTIGRAVITY: "antigravity",
OPENAI: "openai", OPENAI: "openai",

View File

@@ -12,6 +12,7 @@ import {
CODEX_CONFIG, CODEX_CONFIG,
GEMINI_CONFIG, GEMINI_CONFIG,
QWEN_CONFIG, QWEN_CONFIG,
QODER_CONFIG,
IFLOW_CONFIG, IFLOW_CONFIG,
ANTIGRAVITY_CONFIG, ANTIGRAVITY_CONFIG,
GITHUB_CONFIG, GITHUB_CONFIG,
@@ -424,6 +425,84 @@ const PROVIDERS = {
}), }),
}, },
qoder: {
config: QODER_CONFIG,
flowType: "authorization_code",
buildAuthUrl: (config, redirectUri, state) => {
const params = new URLSearchParams({
client_id: config.clientId,
response_type: "code",
redirect_uri: redirectUri,
state: state,
});
return `${config.authorizeUrl}?${params.toString()}`;
},
exchangeToken: async (config, code, redirectUri) => {
const basicAuth = Buffer.from(`${config.clientId}:${config.clientSecret}`).toString("base64");
const response = await fetch(config.tokenUrl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Accept: "application/json",
Authorization: `Basic ${basicAuth}`,
},
body: new URLSearchParams({
grant_type: "authorization_code",
code: code,
redirect_uri: redirectUri,
client_id: config.clientId,
client_secret: config.clientSecret,
}),
});
if (!response.ok) {
const error = await response.text();
throw new Error(`Token exchange failed: ${error}`);
}
return await response.json();
},
postExchange: async (tokens) => {
// Fetch user info (MUST succeed to get API key)
const userInfoRes = await fetch(
`${QODER_CONFIG.userInfoUrl}?accessToken=${encodeURIComponent(tokens.access_token)}`,
{ headers: { Accept: "application/json" } }
);
if (!userInfoRes.ok) {
const errorText = await userInfoRes.text();
throw new Error(`Failed to fetch user info: ${errorText}`);
}
const result = await userInfoRes.json();
if (!result.success) {
throw new Error(`User info request failed: ${result.message || "Unknown error"}`);
}
const userInfo = result.data || {};
if (!userInfo.apiKey || userInfo.apiKey.trim() === "") {
throw new Error("Empty API key returned from Qoder");
}
const email = userInfo.email?.trim() || userInfo.phone?.trim();
if (!email) {
throw new Error("Missing account email/phone in user info");
}
return { userInfo };
},
mapTokens: (tokens, extra) => ({
accessToken: tokens.access_token,
refreshToken: tokens.refresh_token,
expiresIn: tokens.expires_in,
apiKey: extra?.userInfo?.apiKey,
email: extra?.userInfo?.email || extra?.userInfo?.phone,
displayName: extra?.userInfo?.nickname || extra?.userInfo?.name,
}),
},
qwen: { qwen: {
config: QWEN_CONFIG, config: QWEN_CONFIG,
flowType: "device_code", flowType: "device_code",

View File

@@ -8,6 +8,7 @@ export { CodexService } from "./codex.js";
export { GeminiCLIService } from "./gemini.js"; export { GeminiCLIService } from "./gemini.js";
export { QwenService } from "./qwen.js"; export { QwenService } from "./qwen.js";
export { IFlowService } from "./iflow.js"; export { IFlowService } from "./iflow.js";
export { QoderService } from "./qoder.js";
export { AntigravityService } from "./antigravity.js"; export { AntigravityService } from "./antigravity.js";
export { OpenAIService } from "./openai.js"; export { OpenAIService } from "./openai.js";
export { GitHubService } from "./github.js"; export { GitHubService } from "./github.js";

View File

@@ -0,0 +1,232 @@
import crypto from "crypto";
import open from "open";
import { QODER_CONFIG } from "../constants/oauth.js";
import { getServerCredentials } from "../config/index.js";
import { startLocalServer } from "../utils/server.js";
import { spinner as createSpinner } from "../utils/ui.js";
/**
* Qoder OAuth Service
* Uses Authorization Code flow with Basic Auth
*/
export class QoderService {
constructor() {
this.config = QODER_CONFIG;
}
/**
* Build Qoder authorization URL
*/
buildAuthUrl(redirectUri, state) {
const params = new URLSearchParams({
client_id: this.config.clientId,
response_type: "code",
redirect_uri: redirectUri,
state: state,
});
return `${this.config.authorizeUrl}?${params.toString()}`;
}
/**
* Exchange authorization code for tokens
*/
async exchangeCode(code, redirectUri) {
const basicAuth = Buffer.from(
`${this.config.clientId}:${this.config.clientSecret}`
).toString("base64");
const response = await fetch(this.config.tokenUrl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Accept: "application/json",
Authorization: `Basic ${basicAuth}`,
},
body: new URLSearchParams({
grant_type: "authorization_code",
code: code,
redirect_uri: redirectUri,
client_id: this.config.clientId,
client_secret: this.config.clientSecret,
}),
});
if (!response.ok) {
const error = await response.text();
throw new Error(`Token exchange failed: ${error}`);
}
return await response.json();
}
/**
* Refresh access token using refresh token
*/
async refreshToken(refreshToken) {
const basicAuth = Buffer.from(
`${this.config.clientId}:${this.config.clientSecret}`
).toString("base64");
const response = await fetch(this.config.tokenUrl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Accept: "application/json",
Authorization: `Basic ${basicAuth}`,
},
body: new URLSearchParams({
grant_type: "refresh_token",
refresh_token: refreshToken,
client_id: this.config.clientId,
client_secret: this.config.clientSecret,
}),
});
if (!response.ok) {
const error = await response.text();
throw new Error(`Token refresh failed: ${error}`);
}
return await response.json();
}
/**
* Get user info from Qoder
*/
async getUserInfo(accessToken) {
const response = await fetch(
`${this.config.userInfoUrl}?accessToken=${encodeURIComponent(accessToken)}`,
{ headers: { Accept: "application/json" } }
);
if (!response.ok) {
const error = await response.text();
throw new Error(`Failed to get user info: ${error}`);
}
const result = await response.json();
if (!result.success) {
throw new Error("Failed to get user info");
}
return result.data;
}
/**
* Save Qoder tokens to server
*/
async saveTokens(tokens, userInfo) {
const { server, token, userId } = getServerCredentials();
const response = await fetch(`${server}/api/cli/providers/qoder`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
"X-User-Id": userId,
},
body: JSON.stringify({
accessToken: tokens.access_token,
refreshToken: tokens.refresh_token,
expiresIn: tokens.expires_in,
apiKey: userInfo.apiKey,
email: userInfo.email || userInfo.phone,
}),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || "Failed to save tokens");
}
return await response.json();
}
/**
* Refresh and update tokens on server
*/
async refreshAndSave(existingRefreshToken) {
const spinner = createSpinner("Refreshing Qoder token...").start();
try {
const tokens = await this.refreshToken(existingRefreshToken);
const userInfo = await this.getUserInfo(tokens.access_token);
await this.saveTokens(tokens, userInfo);
spinner.succeed("Qoder token refreshed successfully");
return tokens;
} catch (error) {
spinner.fail(`Token refresh failed: ${error.message}`);
throw error;
}
}
/**
* Complete Qoder OAuth flow
*/
async connect() {
const spinner = createSpinner("Starting Qoder OAuth...").start();
try {
spinner.text = "Starting local server...";
let callbackParams = null;
const { port, close } = await startLocalServer((params) => {
callbackParams = params;
});
const redirectUri = `http://localhost:${port}/callback`;
spinner.succeed(`Local server started on port ${port}`);
const state = crypto.randomBytes(32).toString("base64url");
const authUrl = this.buildAuthUrl(redirectUri, state);
console.log("\nOpening browser for Qoder authentication...");
console.log(`If browser doesn't open, visit:\n${authUrl}\n`);
await open(authUrl);
spinner.start("Waiting for Qoder authorization...");
await new Promise((resolve, reject) => {
const timeout = setTimeout(() => {
reject(new Error("Authentication timeout (5 minutes)"));
}, 300000);
const checkInterval = setInterval(() => {
if (callbackParams) {
clearInterval(checkInterval);
clearTimeout(timeout);
resolve();
}
}, 100);
});
close();
if (callbackParams.error) {
throw new Error(callbackParams.error_description || callbackParams.error);
}
if (!callbackParams.code) {
throw new Error("No authorization code received");
}
spinner.start("Exchanging code for tokens...");
const tokens = await this.exchangeCode(callbackParams.code, redirectUri);
spinner.text = "Fetching user info...";
const userInfo = await this.getUserInfo(tokens.access_token);
spinner.text = "Saving tokens to server...";
await this.saveTokens(tokens, userInfo);
spinner.succeed(`Qoder connected successfully! (${userInfo.email || userInfo.phone})`);
return true;
} catch (error) {
spinner.fail(`Failed: ${error.message}`);
throw error;
}
}
}

View File

@@ -38,12 +38,14 @@ const getPageInfo = (pathname) => {
return { return {
title: "Providers", title: "Providers",
description: "Manage your AI provider connections", description: "Manage your AI provider connections",
icon: "dns",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/combos")) if (pathname.includes("/combos"))
return { return {
title: "Combos", title: "Combos",
description: "Model combos with fallback", description: "Model combos with fallback",
icon: "layers",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/usage")) if (pathname.includes("/usage"))
@@ -51,48 +53,70 @@ const getPageInfo = (pathname) => {
title: "Usage & Analytics", title: "Usage & Analytics",
description: description:
"Monitor your API usage, token consumption, and request logs", "Monitor your API usage, token consumption, and request logs",
icon: "bar_chart",
breadcrumbs: [],
};
if (pathname.includes("/quota"))
return {
title: "Quota Tracker",
description: "Track and manage your API quota limits",
icon: "data_usage",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/mitm")) if (pathname.includes("/mitm"))
return { return {
title: "MITM Proxy", title: "MITM Proxy",
description: "Intercept CLI tool traffic and route through 9Router", description: "Intercept CLI tool traffic and route through 9Router",
icon: "security",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/cli-tools")) if (pathname.includes("/cli-tools"))
return { return {
title: "CLI Tools", title: "CLI Tools",
description: "Configure CLI tools", description: "Configure CLI tools",
icon: "terminal",
breadcrumbs: [],
};
if (pathname.includes("/proxy-pools"))
return {
title: "Proxy Pools",
description: "Manage your proxy pool configurations",
icon: "lan",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/endpoint")) if (pathname.includes("/endpoint"))
return { return {
title: "Endpoint", title: "Endpoint",
description: "API endpoint configuration", description: "API endpoint configuration",
icon: "api",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/profile")) if (pathname.includes("/profile"))
return { return {
title: "Settings", title: "Settings",
description: "Manage your preferences", description: "Manage your preferences",
icon: "settings",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/translator")) if (pathname.includes("/translator"))
return { return {
title: "Translator", title: "Translator",
description: "Debug translation flow between formats", description: "Debug translation flow between formats",
icon: "translate",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname.includes("/console-log")) if (pathname.includes("/console-log"))
return { return {
title: "Console Log", title: "Console Log",
description: "Live server console output", description: "Live server console output",
icon: "monitor",
breadcrumbs: [], breadcrumbs: [],
}; };
if (pathname === "/dashboard") if (pathname === "/dashboard")
return { return {
title: "Endpoint", title: "Endpoint",
description: "API endpoint configuration", description: "API endpoint configuration",
icon: "api",
breadcrumbs: [], breadcrumbs: [],
}; };
return { title: "", description: "", breadcrumbs: [] }; return { title: "", description: "", breadcrumbs: [] };
@@ -104,7 +128,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
// Memoize page info to prevent unnecessary recalculations // Memoize page info to prevent unnecessary recalculations
const pageInfo = useMemo(() => getPageInfo(pathname), [pathname]); const pageInfo = useMemo(() => getPageInfo(pathname), [pathname]);
const { title, description, breadcrumbs } = pageInfo; const { title, description, icon, breadcrumbs } = pageInfo;
const handleLogout = async () => { const handleLogout = async () => {
try { try {
@@ -174,9 +198,16 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
</div> </div>
) : title ? ( ) : title ? (
<div> <div>
<h1 className="text-2xl font-semibold text-text-main tracking-tight"> <div className="flex items-center gap-2">
{translate(title)} {icon && (
</h1> <span className="material-symbols-outlined text-primary text-2xl">
{icon}
</span>
)}
<h1 className="text-2xl font-semibold tracking-tight">
{translate(title)}
</h1>
</div>
{description && ( {description && (
<p className="text-sm text-text-muted"> <p className="text-sm text-text-muted">
{translate(description)} {translate(description)}

View File

@@ -191,6 +191,7 @@ export default function UsageStats() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [fetching, setFetching] = useState(false); const [fetching, setFetching] = useState(false);
const [tableView, setTableView] = useState("model"); const [tableView, setTableView] = useState("model");
const [viewMode, setViewMode] = useState("costs");
const [providers, setProviders] = useState([]); const [providers, setProviders] = useState([]);
const [period, setPeriod] = useState("7d"); const [period, setPeriod] = useState("7d");
@@ -236,14 +237,14 @@ export default function UsageStats() {
es.onmessage = (e) => { es.onmessage = (e) => {
try { try {
const data = JSON.parse(e.data); const data = JSON.parse(e.data);
// Only update real-time fields from SSE, keep filtered stats intact // Always merge only real-time fields, never overwrite full stats from REST
setStats((prev) => prev ? { setStats((prev) => ({
...prev, ...(prev || {}),
activeRequests: data.activeRequests, activeRequests: data.activeRequests,
recentRequests: data.recentRequests, recentRequests: data.recentRequests,
errorProvider: data.errorProvider, errorProvider: data.errorProvider,
pending: data.pending, pending: data.pending,
} : data); }));
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
console.error("[SSE CLIENT] parse error:", err); console.error("[SSE CLIENT] parse error:", err);
@@ -443,6 +444,20 @@ export default function UsageStats() {
<option key={opt.value} value={opt.value}>{opt.label}</option> <option key={opt.value} value={opt.value}>{opt.label}</option>
))} ))}
</select> </select>
<div className="flex items-center gap-1 bg-bg-subtle rounded-lg p-1 border border-border">
<button
onClick={() => setViewMode("costs")}
className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "costs" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
>
Costs
</button>
<button
onClick={() => setViewMode("tokens")}
className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
>
Tokens
</button>
</div>
</div> </div>
{loading ? spinner : activeTableConfig && ( {loading ? spinner : activeTableConfig && (
<UsageTable <UsageTable
@@ -453,6 +468,7 @@ export default function UsageStats() {
sortBy={sortBy} sortBy={sortBy}
sortOrder={sortOrder} sortOrder={sortOrder}
onToggleSort={toggleSort} onToggleSort={toggleSort}
viewMode={viewMode}
storageKey={activeTableConfig.storageKey} storageKey={activeTableConfig.storageKey}
renderSummaryCells={activeTableConfig.renderSummaryCells} renderSummaryCells={activeTableConfig.renderSummaryCells}
renderDetailCells={activeTableConfig.renderDetailCells} renderDetailCells={activeTableConfig.renderDetailCells}

View File

@@ -7,6 +7,7 @@ export const FREE_PROVIDERS = {
"gemini-cli": { id: "gemini-cli", alias: "gc", name: "Gemini CLI", icon: "terminal", color: "#4285F4", deprecated: true, deprecationNotice: "Google has tightened Gemini CLI abuse detection and restricted Pro models to paid accounts (Mar 25, 2026). Using this provider may violate ToS and risk account bans." }, "gemini-cli": { id: "gemini-cli", alias: "gc", name: "Gemini CLI", icon: "terminal", color: "#4285F4", deprecated: true, deprecationNotice: "Google has tightened Gemini CLI abuse detection and restricted Pro models to paid accounts (Mar 25, 2026). Using this provider may violate ToS and risk account bans." },
// gitlab: { id: "gitlab", alias: "gl", name: "GitLab Duo", icon: "code", color: "#FC6D26" }, // gitlab: { id: "gitlab", alias: "gl", name: "GitLab Duo", icon: "code", color: "#FC6D26" },
// codebuddy: { id: "codebuddy", alias: "cb", name: "CodeBuddy", icon: "smart_toy", color: "#006EFF" }, // codebuddy: { id: "codebuddy", alias: "cb", name: "CodeBuddy", icon: "smart_toy", color: "#006EFF" },
// qoder: { id: "qoder", alias: "qd", name: "Qoder AI", icon: "water_drop", color: "#EC4899" },
iflow: { id: "iflow", alias: "if", name: "iFlow AI", icon: "water_drop", color: "#6366F1" }, iflow: { id: "iflow", alias: "if", name: "iFlow AI", icon: "water_drop", color: "#6366F1" },
}; };
@@ -14,14 +15,14 @@ export const FREE_PROVIDERS = {
export const FREE_TIER_PROVIDERS = { export const FREE_TIER_PROVIDERS = {
openrouter: { id: "openrouter", alias: "openrouter", name: "OpenRouter", icon: "router", color: "#F97316", textIcon: "OR", passthroughModels: true, website: "https://openrouter.ai", notice: { text: "Free tier: 27+ free models, no credit card needed, 200 req/day. After $10 credit: 1,000 req/day.", apiKeyUrl: "https://openrouter.ai/settings/keys" }, modelsFetcher: { url: "https://openrouter.ai/api/v1/models", type: "openrouter-free" } }, openrouter: { id: "openrouter", alias: "openrouter", name: "OpenRouter", icon: "router", color: "#F97316", textIcon: "OR", passthroughModels: true, website: "https://openrouter.ai", notice: { text: "Free tier: 27+ free models, no credit card needed, 200 req/day. After $10 credit: 1,000 req/day.", apiKeyUrl: "https://openrouter.ai/settings/keys" }, modelsFetcher: { url: "https://openrouter.ai/api/v1/models", type: "openrouter-free" } },
nvidia: { id: "nvidia", alias: "nvidia", name: "NVIDIA NIM", icon: "developer_board", color: "#76B900", textIcon: "NV", website: "https://developer.nvidia.com/nim", notice: { text: "Free access for NVIDIA Developer Program members (prototyping & testing).", apiKeyUrl: "https://build.nvidia.com/settings/api-keys" } }, nvidia: { id: "nvidia", alias: "nvidia", name: "NVIDIA NIM", icon: "developer_board", color: "#76B900", textIcon: "NV", website: "https://developer.nvidia.com/nim", notice: { text: "Free access for NVIDIA Developer Program members (prototyping & testing).", apiKeyUrl: "https://build.nvidia.com/settings/api-keys" } },
ollama: { id: "ollama", alias: "ollama", name: "Ollama Cloud", icon: "cloud", color: "#ffffffff", textIcon: "OL", website: "https://ollama.com", notice: { text: "Free tier: light usage, 1 cloud model at a time (limits reset every 5h & 7d). Pro $20/mo · Max $100/mo.", apiKeyUrl: "https://ollama.com/settings/api-keys" } }, ollama: { id: "ollama", alias: "ollama", name: "Ollama Cloud", icon: "cloud", color: "#ffffffff", textIcon: "OL", website: "https://ollama.com", notice: { text: "Free tier: light usage, 1 cloud model at a time (limits reset every 5h & 7d). Pro $20/mo · Max $100/mo.", apiKeyUrl: "https://ollama.com/settings/keys" } },
vertex: { id: "vertex", alias: "vx", name: "Vertex AI", icon: "cloud", color: "#4285F4", textIcon: "VX", website: "https://cloud.google.com/vertex-ai", notice: { text: "New Google Cloud accounts get $300 free credits. Requires GCP project + Service Account with Vertex AI API enabled.", apiKeyUrl: "https://console.cloud.google.com/iam-admin/serviceaccounts" } }, vertex: { id: "vertex", alias: "vx", name: "Vertex AI", icon: "cloud", color: "#4285F4", textIcon: "VX", website: "https://cloud.google.com/vertex-ai", notice: { text: "New Google Cloud accounts get $300 free credits. Requires GCP project + Service Account with Vertex AI API enabled.", apiKeyUrl: "https://console.cloud.google.com/iam-admin/serviceaccounts" } },
}; };
// OAuth Providers // OAuth Providers
export const OAUTH_PROVIDERS = { export const OAUTH_PROVIDERS = {
claude: { id: "claude", alias: "cc", name: "Claude Code", icon: "smart_toy", color: "#D97757" }, claude: { id: "claude", alias: "cc", name: "Claude Code", icon: "smart_toy", color: "#D97757" },
antigravity: { id: "antigravity", alias: "ag", name: "Antigravity", icon: "rocket_launch", color: "#F59E0B" }, antigravity: { id: "antigravity", alias: "ag", name: "Antigravity", icon: "rocket_launch", color: "#F59E0B", deprecated: true, deprecationNotice: "Antigravity has tightened abuse detection and restricted model access. Using this provider may violate ToS and risk account bans." },
codex: { id: "codex", alias: "cx", name: "OpenAI Codex", icon: "code", color: "#3B82F6" }, codex: { id: "codex", alias: "cx", name: "OpenAI Codex", icon: "code", color: "#3B82F6" },
github: { id: "github", alias: "gh", name: "GitHub Copilot", icon: "code", color: "#333333" }, github: { id: "github", alias: "gh", name: "GitHub Copilot", icon: "code", color: "#333333" },
cursor: { id: "cursor", alias: "cu", name: "Cursor IDE", icon: "edit_note", color: "#00D4AA" }, cursor: { id: "cursor", alias: "cu", name: "Cursor IDE", icon: "edit_note", color: "#00D4AA" },