Skip to content

ui: migrate usage, logs, errors, and proxy pages to shared primitives #501

@icebear0828

Description

@icebear0828

Context

The remaining operational pages share the same design language but use independent class strings: UsageStats summary cards and filters, UsageChart containers, LogsPage table/detail layout, ErrorsPage grouped cards, ProxyPool and ProxySettings forms/lists. Migrating these after the primitive layer will complete the page-level design-system consolidation.

Depends on #497 and #498. Recommended after #499 and #500 or in parallel if the shared primitive APIs are stable.

Scope

  • Migrate UsageStats summary cards, filter chips, chart containers, legends, and empty/loading states.
  • Migrate LogsPage list/table, detail panel, pagination controls, and state filters.
  • Migrate ErrorsPage error group cards, unread badges, raw detail blocks, empty state, and clear/mark actions.
  • Migrate ProxyPool and ProxySettings cards, import/add forms, list items, health badges, and action buttons.
  • Preserve usage-history semantics: range/window cards must continue to show history-window data, not cumulative summary substitutes.

Acceptance criteria

  • All listed pages use shared primitives for repeated controls and surfaces.
  • Chart colors and quota/proxy/error status colors follow DESIGN.md.
  • Empty, loading, disabled, hover, and selected states are consistent in light and dark mode.
  • No user-facing data semantics change during the visual migration.
  • No TypeScript any is introduced.

Verification

  • Add/update tests for affected UsageStats, LogsPage, ErrorsPage, and Proxy UI behavior.
  • Run npm test.
  • Run npm run build.
  • Manually verify Usage Stats, Logs, Errors, Proxy tabs at localhost:8080 in light and dark mode.

Notes

If this issue grows too large during implementation, split by page family: usage/stats, logs/errors, proxy management.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions