Files
chaos-api/web/default/src/features/usage-logs/lib/format.ts
T
Calcium-Ion 8b2b03d276 feat(web/default): unified UI overhaul — Base UI migration, theme presets, rankings dashboard, and table toolbar refactor (#4633)
* 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges

Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage.

Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on <html>. Wrap the tree in main.tsx.

Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark).

Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi.

* 🎨 fix(web): align segmented controls with theme radius tokens

- Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart
  toolbars with radius-md so the active state follows --radius when users
  change Radius in Theme Settings.
- Use nested radii consistent with TabsList/TabsTrigger: outer
  rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px))
  so the track and active thumb stay concentric at small scales (e.g.
  0.3rem) instead of a squared “focus” block inside a rounded shell.
- Apply the same pattern to pricing SegmentedControl and the segmented
  groups in consumption-distribution-chart, model-charts, and user-charts.

Verified: bun run typecheck (web/default)

*  feat(pricing): enrich model details with uptime sparkline and API documentation

Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with
per-day tooltips, surface it in a status row under quick stats and in the
per-group performance table, and extend mock data so uptime series are stable
and optionally scoped by group.

Introduce an API tab with Shiki-highlighted code samples (cURL, Python,
TypeScript, JavaScript), endpoint-type switching, authentication guidance, a
supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer
vendor, tokenizer, license, and data-retention hints for a provider & data
privacy card on the Overview tab (capabilities/modalities stay with model
identity; rate limits stay with the API tab).

Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi.

* 🏆 feat(rankings): add comprehensive rankings dashboard

Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending.

Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales.

* fix(theme): correct theme preset selection state

- update Base UI Radio selectors to use data-checked/data-unchecked states.
- fix unchecked theme options still showing selected indicators.
- isolate the default theme preview tokens to prevent preset changes from leaking into it.

* fix(setup): correct usage mode radio state

- use Base UI data-checked/data-unchecked states for RadioGroup styling.
- hide radio indicators when options are unchecked to avoid setup page display issues.
- drive usage mode card and icon selection styles from Base UI state.

* fix(auth): submit sign-in and sign-up forms

* 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization

Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`)
and reinstall full component registry with `--overwrite`, including Hugeicons-backed
widgets and newly added registry components.

- Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies,
  preset UI from config drawer); rely on official semantic CSS tokens + light/dark only.
- Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and
  `@theme inline` mappings (plus skeleton token vars for existing shimmer usage).
- Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`;
  clarify scroll-lock override comment.

Application compatibility:
- Keep minimal shims where app code diverged from official APIs (popover collision props,
  combobox legacy `options` callers, Spinner prop typing).
- Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI
  semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.)

Tooling / docs / build:
- Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`.
- Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack.
- Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.)

Verified: `bun run typecheck` passes.

Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere;
not addressed in this change.

* 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters

- Refactor DataTableToolbar to a single wrapping flex row with a
  right-aligned action cluster (Reset / Search / View / Expand) for a
  cleaner Ant Design Pro–style filter bar; remove the dedicated stats row
  and the toolbar `stats` prop.
- Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive-
  data visibility toggle into the page header via CommonLogsHeaderActions
  and SectionPageLayout.Actions so the toolbar stays focused on filters.
- Slim CommonLogsFilterBar props (no stats / preActions eye control).
- Improve CompactDateTimeRangePicker: show minute-precision labels on the
  trigger (seconds omitted; aligns with datetime-local inputs); widen the
  trigger on sm+ breakpoints so the full range is visible without truncation;
  apply the same width in task logs filters.
- Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon.
- Earlier layout tweak: extra top padding on SectionPageLayout scroll
  content so control focus rings are not clipped by overflow.

* feat(web/default): Base UI migration and component foundation

Migrate from Radix UI to Base UI, rewrite core UI primitives,
update dependencies (recharts, date-fns, next-themes), add
shadcn agent skill documentation, and refresh AI element components.

This is the foundational work from the v2/localmain lineage that
was not covered by the individual feature commits above.

---------

Co-authored-by: t0ng7u <dev@aiass.cc>
Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
2026-05-06 12:39:36 +08:00

283 lines
7.7 KiB
TypeScript
Vendored

import type { StatusBadgeProps } from '@/components/status-badge'
import {
BILLING_PRICING_VARS,
normalizeTierLabel,
parseTiersFromExpr,
type ParsedTier,
} from '@/features/pricing/lib/billing-expr'
import type { UsageLog } from '../data/schema'
import type { LogOtherData } from '../types'
export { normalizeTierLabel }
const PARAM_OVERRIDE_ACTION_MAP: Record<string, string> = {
set: 'Set',
delete: 'Delete',
copy: 'Copy',
move: 'Move',
append: 'Append',
prepend: 'Prepend',
trim_prefix: 'Trim Prefix',
trim_suffix: 'Trim Suffix',
ensure_prefix: 'Ensure Prefix',
ensure_suffix: 'Ensure Suffix',
trim_space: 'Trim Space',
to_lower: 'To Lower',
to_upper: 'To Upper',
replace: 'Replace',
regex_replace: 'Regex Replace',
set_header: 'Set Header',
delete_header: 'Delete Header',
copy_header: 'Copy Header',
move_header: 'Move Header',
pass_headers: 'Pass Headers',
sync_fields: 'Sync Fields',
return_error: 'Return Error',
}
/**
* Get localized label for a param override action
*/
export function getParamOverrideActionLabel(
action: string,
t: (key: string) => string
): string {
const key = PARAM_OVERRIDE_ACTION_MAP[action.toLowerCase()]
return key ? t(key) : action
}
/**
* Parse a param override audit line into action and content
*/
export function parseAuditLine(
line: string
): { action: string; content: string } | null {
if (typeof line !== 'string') return null
const firstSpace = line.indexOf(' ')
if (firstSpace <= 0) return { action: line, content: line }
return {
action: line.slice(0, firstSpace),
content: line.slice(firstSpace + 1),
}
}
/**
* Check if the log is a violation fee log
*/
export function isViolationFeeLog(other: LogOtherData | null): boolean {
if (!other) return false
return (
other.violation_fee === true ||
Boolean(other.violation_fee_code) ||
Boolean(other.violation_fee_marker)
)
}
/**
* Parse the 'other' field from JSON string to object
*/
export function parseLogOther(other: string): LogOtherData | null {
if (!other) return null
try {
return JSON.parse(other) as LogOtherData
} catch (error) {
// eslint-disable-next-line no-console
console.error('Failed to parse log other field:', error)
return null
}
}
/**
* Get time color based on duration (in seconds)
*/
export function getTimeColor(
seconds: number
): 'success' | 'warning' | 'danger' {
if (seconds < 10) return 'success'
if (seconds < 30) return 'warning'
return 'danger'
}
/**
* Get first-response-token color based on latency (in seconds)
*/
export function getFirstResponseTimeColor(
seconds: number
): 'success' | 'warning' | 'danger' {
if (seconds < 5) return 'success'
if (seconds < 10) return 'warning'
return 'danger'
}
/**
* Get throughput color based on generated tokens per second
*/
export function getThroughputColor(
tokensPerSecond: number
): 'success' | 'warning' | 'danger' {
if (tokensPerSecond >= 30) return 'success'
if (tokensPerSecond >= 15) return 'warning'
return 'danger'
}
/**
* Get response color using throughput only when enough output tokens exist.
*/
export function getResponseTimeColor(
seconds: number,
completionTokens: number
): 'success' | 'warning' | 'danger' {
if (completionTokens < 100 || seconds <= 0) return getTimeColor(seconds)
return getThroughputColor(completionTokens / seconds)
}
/**
* Format model name with mapping indicator
*/
export function formatModelName(log: UsageLog): {
name: string
isMapped: boolean
actualModel?: string
} {
const other = parseLogOther(log.other)
const isMapped = !!(
other?.is_model_mapped &&
other?.upstream_model_name &&
other.upstream_model_name !== ''
)
return {
name: log.model_name,
isMapped,
actualModel: isMapped ? other.upstream_model_name : undefined,
}
}
/**
* Decode a base64-encoded billing expression. Safely returns an empty string
* when the input is missing or malformed (e.g. legacy logs without expr_b64).
*/
export function decodeBillingExprB64(exprB64: string | undefined): string {
if (!exprB64) return ''
try {
const binaryString =
typeof window !== 'undefined'
? window.atob(exprB64)
: Buffer.from(exprB64, 'base64').toString('binary')
const bytes = new Uint8Array(binaryString.length)
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
if (typeof TextDecoder !== 'undefined') {
return new TextDecoder().decode(bytes)
}
return decodeURIComponent(
Array.prototype.map
.call(bytes, (byte: number) => '%' + byte.toString(16).padStart(2, '0'))
.join('')
)
} catch {
return ''
}
}
/**
* Resolve which parsed tier corresponds to the matched_tier label in a log
* entry. Missing or unknown labels do not fall back to another tier because
* that would display guessed unit prices.
*/
export function resolveMatchedTier(
tiers: ParsedTier[],
matchedLabel: string | undefined
): ParsedTier | null {
if (tiers.length === 0) return null
if (!matchedLabel) return null
const found = tiers.find((tier) => {
const l1 = normalizeTierLabel(tier.label)
const l2 = normalizeTierLabel(matchedLabel)
return l1 === l2 && l1 !== ''
})
return found || null
}
/**
* Tiered pricing summary derived from an `other` log payload using the
* billing-expression library. Returns null when the entry is not a tiered
* billing log or the expression failed to parse.
*/
export interface TieredBillingSummary {
tiers: ParsedTier[]
tier: ParsedTier
priceEntries: Array<{ field: string; shortLabel: string; price: number }>
}
/**
* Whether the request payload reports any cache-related token usage. Used to
* suppress cache pricing rows from the tiered breakdown when the request did
* not exercise the cache path (mirrors the classic frontend behaviour).
*/
export function hasAnyCacheTokens(
other: LogOtherData | null | undefined
): boolean {
if (!other) return false
return (
(other.cache_tokens || 0) > 0 ||
(other.cache_creation_tokens || 0) > 0 ||
(other.cache_creation_tokens_5m || 0) > 0 ||
(other.cache_creation_tokens_1h || 0) > 0
)
}
export function getTieredBillingSummary(
other: LogOtherData | null
): TieredBillingSummary | null {
if (!other || other.billing_mode !== 'tiered_expr') return null
const exprStr = decodeBillingExprB64(other.expr_b64)
if (!exprStr) return null
const tiers = parseTiersFromExpr(exprStr)
const tier = resolveMatchedTier(tiers, other.matched_tier)
if (!tier) return null
const cacheTokensPresent = hasAnyCacheTokens(other)
const priceEntries: TieredBillingSummary['priceEntries'] = []
for (const v of BILLING_PRICING_VARS) {
if (!v.field) continue
if (v.group === 'cache' && !cacheTokensPresent) continue
const raw = tier[v.field as keyof ParsedTier]
const price = Number(raw)
if (Number.isFinite(price) && price > 0) {
priceEntries.push({
field: v.field,
shortLabel: v.shortLabel,
price,
})
}
}
return { tiers, tier, priceEntries }
}
/**
* Calculate duration and return formatted result with color variant
* @param submitTime - Submit timestamp
* @param finishTime - Finish timestamp
* @param unit - Unit of the timestamps ('seconds' or 'milliseconds')
*/
export function formatDuration(
submitTime?: number,
finishTime?: number,
unit: 'seconds' | 'milliseconds' = 'milliseconds'
): { durationSec: number; variant: StatusBadgeProps['variant'] } | null {
if (!submitTime || !finishTime) return null
const durationSec =
unit === 'milliseconds'
? (finishTime - submitTime) / 1000
: finishTime - submitTime
return { durationSec, variant: durationSec > 60 ? 'red' : 'green' }
}