[Witroch4]

Summary

• show all-time USD cost next to each API key in the API Key Manager
• add a per-key cost action that opens the Cost Explorer filtered to that key and grouped by model
• let the Cost Explorer hydrate range, groupBy, and apiKeyIds from URL query parameters
• display provider quota card percentages as used percent (for example 29 / 100 shows 29% used) while preserving remaining-quota health colors
• include webdav-handler.mjs in standalone builds so server-ws.mjs can boot in Docker

Why

While using API keys for separate users/devices, request counts were visible per key but cost attribution required jumping to the global cost dashboard and manually filtering. The API key creation modal already exposes self-service cost/token usage, and this makes the admin view match that operational need: quickly identify which key generated which USD usage, then drill into model-level cost.

The provider quota percentage change fixes a confusing visual case where the raw value said 29 / 100 but the large percentage showed the remaining quota (71%). The progress bar still uses remaining quota for health, but the text now describes usage explicitly.

The standalone packaging fix addresses a Docker boot failure in the websocket server when server-ws.mjs imports ./webdav-handler.mjs but the file is not copied into /app.

Validation

• npm run typecheck:core
• DISABLE_SQLITE_AUTO_BACKUP=true node --max-old-space-size=8192 --import tsx --import ./open-sse/utils/setupPolyfill.ts --test --test-force-exit tests/unit/api-key-self-service.test.ts tests/unit/provider-limits-ui.test.ts tests/unit/provider-columns.test.ts
• npx eslint src/app/'(dashboard)'/dashboard/api-manager/ApiManagerPageClient.tsx src/app/'(dashboard)'/dashboard/costs/CostOverviewTab.tsx src/app/'(dashboard)'/dashboard/usage/components/ProviderLimits/QuotaProgressBar.tsx src/app/'(dashboard)'/dashboard/usage/components/ProviderLimits/parts/QuotaCardBody.tsx src/app/'(dashboard)'/dashboard/usage/components/ProviderLimits/parts/QuotaCardExpanded.tsx
• npm run build
• Docker image booted with /login returning 200 and container healthy

[gemini-code-assist]

Code Review

This pull request adds cost tracking to the API manager, enabling users to view USD costs per API key and link directly to a filtered cost overview. It also updates the cost overview tab to support URL search parameters for filtering and grouping, and modifies quota progress bars to display the percentage of quota used instead of remaining. The feedback highlights several important issues: the need to synchronize state with URL search parameter changes, wrapping useSearchParams in a <Suspense> boundary to avoid Next.js build de-optimization, fixing a decimal rounding bug for negative values in formatUsdCost, and localizing several hardcoded English strings to comply with internationalization standards.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The range and explorerGroupBy states are initialized from URL search parameters on mount, but they do not sync when the search parameters change later. If a user is already on the costs page and clicks a link to view costs for a specific key (which updates the URL query parameters), the local states will not update, causing the UI to display incorrect or stale data.

Adding useEffect hooks to sync these states when the search parameters change resolves this issue.

  const [explorerGroupBy, setExplorerGroupBy] = useState<CostExplorerGroupBy>(() =>
    parseExplorerGroupBy(searchParams.get("groupBy"))
  );

  useEffect(() => {
    setRange(parseCostRange(searchParams.get("range")));
  }, [searchParams]);

  useEffect(() => {
    setExplorerGroupBy(parseExplorerGroupBy(searchParams.get("groupBy")));
  }, [searchParams]);

[gemini-code-assist]

Using useSearchParams() directly in CostOverviewTab without a <Suspense> boundary will cause the entire page to de-opt to client-side rendering during Next.js static HTML generation. To prevent this, wrap the component or its usage in a <Suspense> boundary.

[gemini-code-assist]

The formatUsdCost function does not handle negative values correctly when determining the number of fraction digits. If a cost is negative (e.g., due to refunds or credit adjustments) and falls between -1 and 0, amount > 0 will be false, defaulting the format to 2 decimal places instead of 4. This can round sub-cent negative values to -$0.00.

Using Math.abs(amount) for the fraction digits condition resolves this issue.

function formatUsdCost(value: number, locale: string): string {
  const amount = Number.isFinite(value) ? value : 0;
  const absAmount = Math.abs(amount);
  const useFourDecimals = absAmount > 0 && absAmount < 1;
  return new Intl.NumberFormat(locale, { 
    style: "currency",
    currency: "USD",
    minimumFractionDigits: useFourDecimals ? 4 : 2,
    maximumFractionDigits: useFourDecimals ? 4 : 2,
  }).format(amount);
}

[gemini-code-assist]

The title and aria-label attributes contain hardcoded English strings. Since this is a multi-lingual application using next-intl, these strings should be localized using the translation hook t.

Suggested change

	title={`View costs for ${key.name}`}
	aria-label={`View costs for ${key.name}`}
	title={t("viewCostsFor", { name: key.name })}
	aria-label={t("viewCostsFor", { name: key.name })}

[gemini-code-assist]

The string "% used" is hardcoded in English, which violates internationalization (i18n) standards.

To fix this, call const t = useTranslations("usage"); at the very top of the QuotaRow component (before the if (q.isCredits) early return to avoid violating the Rules of Hooks) and use it to translate the label.

[gemini-code-assist]

The string "% used" is hardcoded in English, which violates internationalization (i18n) standards.

To fix this, call const t = useTranslations("usage"); at the very top of the QuotaDetailRow component (before the if (q.isCredits) early return to avoid violating the Rules of Hooks) and use it to translate the label.

[gemini-code-assist]

The string "% used" is hardcoded in English, which violates internationalization (i18n) standards. Import useTranslations from next-intl and use it to localize this string.

[Witroch4]

These screenshots show the intended admin workflow for this PR.

In the first screenshot, the API Key Manager now exposes a cost/action icon directly beside each API key row. This gives the admin a quick entry point from a specific key to its usage/cost details, without having to manually open the global cost dashboard and search for the key.

In the second screenshot, clicking that action opens the full Cost Explorer already filtered to the selected API key. From there, the admin can inspect the total USD cost, token usage, request volume, and model-level breakdown for that key over the selected date range.

The goal is to connect the existing per-key usage tracking with the existing cost analytics UI: API keys already isolate usage, and this makes the cost investigation path visible and practical for real multi-user deployments.

[diegosouzapw]

Merged into release/v3.8.23 🎉 Thanks @Witroch4! Great operational feature — surfacing per-key USD spend and deep-linking into the Cost Explorer closes a real gap. A few adjustments were pushed to your branch before merge: the URL-param parsers were extracted into costExplorerParams.ts with a unit test (the deep-link hydration parses untrusted query params, so it's worth guarding — Hard Rule #18); the new % used / View costs for strings were moved to i18n keys (en + zh-CN) to match the rest of the dashboard; and the assembleStandalone.mjs webdav-handler entry was dropped since it already landed on the release branch. Verified backend support for apiKeyIds in /api/usage/analytics. Ships in v3.8.23!

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge (already merged)

Files Reviewed (5 files)

• src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
• src/app/(dashboard)/dashboard/costs/CostOverviewTab.tsx
• src/app/(dashboard)/dashboard/costs/costExplorerParams.ts
• src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaProgressBar.tsx
• src/app/(dashboard)/dashboard/usage/components/ProviderLimits/parts/QuotaCardBody.tsx
• src/app/(dashboard)/dashboard/usage/components/ProviderLimits/parts/QuotaCardExpanded.tsx
• src/i18n/messages/en.json
• src/i18n/messages/zh-CN.json
• tests/unit/cost-explorer-params.test.ts

---

_{Reviewed by step-3.7-flash-20260528 · 557,750 tokens}