mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-11 12:09:03 +00:00
Tam Nhu Tran
64e78f6e69
Introduce two locked page archetypes -- Config (3-pane) and Monitor (KPI row + 12-col grid) -- wrapped by shared PageShell + PageHeader. Primitives: - page-shell/: PageShell, PageHeader, EmptyState, ErrorState - config-layout/: ConfigLayout, ListPane, SectionRail, FormPane, FormSection, JsonPane (read-only by default, opt-in editable) - monitor-layout/: MonitorLayout, KpiRow, KpiCard, MonitorGrid, MonitorCard (incl. variant="terminal") Single ConfigLayout component, prop-controlled left rail: - ListPane for multi-entity (cliproxy, accounts, providers) - SectionRail for single-entity (codex, copilot, cursor, droid) with IntersectionObserver scroll-spy - omit for none DEV-ONLY /_styleguide route gated by import.meta.env.DEV. Shows every primitive plus composed Config (multi + single) and Monitor demos using fully anonymized data (Provider A/B/C, fake metrics). Phase 1 of dashboard design system unification. Existing pages untouched this phase -- migrations land in Phase 2+. Locked decisions in ui/docs/design-decisions.md: 1. In-app /_styleguide over Storybook 2. Archetype name: Monitor (not Dashboard) 3. JsonPane read-only by default 4. Health terminal aesthetic kept as variant 5. i18n per-page namespaces 6. SectionRail uses scroll-spy
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).