mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-16 16:16:52 +00:00
Tam Nhu Tran
ae3240d4c8
Replace the ornamental logs page (radial-gradient overlays, faux-HUD captions, scale-on-click animations, two competing tab shells, zero virtualization) with a calm, accessible, performant surface. - Calm 48px header + tabs + 3-pane shell (filters | list | detail) - List virtualized via react-virtuoso; trace-grouped rows by requestId with expandable per-stage timeline and per-stage latencyMs - Filters split into primary (search / level / source) + advanced (module / stage / requestId / time-window) with 250ms debounce and in-flight react-query cancellation on filter change - Live-tail pause / resume with rotation-safe id-set diff for the new-entries pill; visibility-aware polling - Detail panel: Overview / Context / Raw tabs; Copy JSON, Copy requestId, Show-trace jump; redaction-aware rendering - Designed empty / loading / error states (4 empty variants, retry on error) - Keyboard nav (j / k / Enter / Esc / / / Space / ?) with visible focus rings; reduced-motion respected; AA-tuned level palette - New header button for keyboard-shortcuts discoverability (alongside ? keypress) -- pairs with the shortcuts dialog - Optional fields added to LogsEntry to consume the #1141 contract; UI ships against fixture (?mock=logs URL flag) so backend isn't a hard prerequisite. Dev-only assertLogsEntryShape warns once on drift - Deleted dead logs-overview-cards.tsx (was unmounted) Closes #1142 Refs #1138, #1141
CCS Dashboard UI
React + TypeScript + Vite frontend for the CCS local dashboard.
This UI is served by the CCS web server and is accessed via:
ccs config
Development
From project root:
bun run dev
This starts the CCS server, opens a local browser URL, and prints bind/network details for the dashboard. If the runtime bind is reachable beyond loopback, CCS also prints an auth reminder.
For remote device access during development, run:
bun run dev -- --host 0.0.0.0
For local-only development, run:
bun run dev -- --host 127.0.0.1
From ui/ only (frontend dev server):
cd ui
bun run dev
Quality Commands
cd ui
bun run typecheck
bun run lint
bun run validate
bun run test:run
i18n
Dashboard localization uses react-i18next.
- Main setup:
ui/src/lib/i18n.ts - Locale helpers:
ui/src/lib/locales.ts - Language switcher:
ui/src/components/layout/language-switcher.tsx
For full architecture, conventions, and locale onboarding, see:
Notes
- UI locale persistence uses browser localStorage key
ccs-ui-locale. - Current supported locales are managed in
ui/src/lib/locales.ts. - Current locales:
en,zh-CN,vi. - Fallback locale is English (
en).