mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-16 10:16:49 +00:00
feat(ui): add design system foundations
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
This commit is contained in:
Tam Nhu Tran
@@ -0,0 +1,18 @@
|
||||
# Design System — Decisions Log
|
||||
|
||||
The 6 open questions from the brainstorm phase, resolved before implementation.
|
||||
|
||||
| # | Question | Decision | Rationale |
|
||||
|---|----------|----------|-----------|
|
||||
| 1 | Storybook vs in-app `/_styleguide` | **In-app `/_styleguide`** | Zero-config, lives in the repo, gated by `import.meta.env.DEV`. Storybook is a heavy second build pipeline for marginal benefit at this scale. |
|
||||
| 2 | Archetype B name (Monitor vs Dashboard) | **Monitor** | "Dashboard" is the whole product. "Monitor" matches existing health/analytics framing and avoids overloading the term. |
|
||||
| 3 | JsonPane editability scope | **Read-only by default**, opt-in `editable` prop | Cliproxy is the only page that genuinely needs in-pane editing today. Opt-in keeps the API safe for codex/copilot/cursor (read-only). |
|
||||
| 4 | Health terminal aesthetic | **Keep** as `MonitorCard variant="terminal"` | Preserves the `ccs health --watch` feel. Implemented as opt-in variant, not a separate primitive. |
|
||||
| 5 | i18n key namespace convention | **Per-page namespaces** (`pages.<name>.*`) + shared (`common.*`) | Current i18n already uses ad-hoc per-page keys; this just formalizes it. Primitives use `common.*` so they're translation-stable across pages. |
|
||||
| 6 | SectionRail activation | **Scroll-spy** via `IntersectionObserver` | Preserves long-form config feel + shows all validation errors at once. Click-to-switch hides errors in inactive sections, which is worse UX for forms. |
|
||||
|
||||
---
|
||||
|
||||
## How to revisit
|
||||
|
||||
If a decision turns out wrong in practice, update this doc and bump the affected primitive — don't silently drift. Each row above should be appended with a "Revised: <date> · <reason>" line if changed.
|
||||
@@ -0,0 +1,179 @@
|
||||
# CCS Dashboard Design System
|
||||
|
||||
The dashboard ships **two page archetypes**. Every page picks exactly one. All pages share the same outer chrome via `PageShell` + `PageHeader`.
|
||||
|
||||
> Live preview in dev: `bun run dev` then visit `/_styleguide`.
|
||||
|
||||
---
|
||||
|
||||
## 1. The shell — every page
|
||||
|
||||
```
|
||||
PageShell
|
||||
├─ PageHeader (title · description · status · actions)
|
||||
└─ <archetype body>
|
||||
```
|
||||
|
||||
```tsx
|
||||
<PageShell>
|
||||
<PageHeader title="Cliproxy" status={…} actions={…} />
|
||||
<ConfigLayout … /> {/* OR <MonitorLayout> */}
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
Header rules:
|
||||
- `title` is mandatory; `description` optional 1-line subtitle.
|
||||
- `status` slot: small badges/chips (e.g. "Running · :8317").
|
||||
- `actions` slot: button group; **primary action belongs in FormPane footer**, not here, for Config pages.
|
||||
|
||||
---
|
||||
|
||||
## 2. Config archetype — 3-pane
|
||||
|
||||
Used by every page that configures one or more entities (cliproxy, accounts, codex, copilot, cursor, droid, claude-extension, api, shared, profiles).
|
||||
|
||||
```
|
||||
┌──────────┬──────────────────┬──────────┐
|
||||
│ left │ form (FormPane) │ json │
|
||||
│ rail │ │ (right) │
|
||||
└──────────┴──────────────────┴──────────┘
|
||||
```
|
||||
|
||||
One component, prop-controlled left rail:
|
||||
|
||||
```tsx
|
||||
// Multi-entity (cliproxy, accounts, providers)
|
||||
<ConfigLayout
|
||||
left={<ListPane items={…} selectedId={id} onSelect={…} />}
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…} />}
|
||||
/>
|
||||
|
||||
// Single-entity (codex, copilot, cursor, droid, claude-extension)
|
||||
<ConfigLayout
|
||||
left={<SectionRail sections={…} />}
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…} />}
|
||||
/>
|
||||
|
||||
// No rail (rare — only if page has neither entities to pick nor sections to navigate)
|
||||
<ConfigLayout form={<FormPane>…</FormPane>} json={<JsonPane data={…} />} />
|
||||
```
|
||||
|
||||
### Rules
|
||||
|
||||
- **Layout**: left 260px / form flex / json 360px on `>=1024px`.
|
||||
- **<1024px**: collapses to tabs (`Browse | Configure | JSON`).
|
||||
- **Save action**: lives **only** in `FormPane footer`. Never duplicate in PageHeader.
|
||||
- **Per-entity actions** (delete, duplicate, sync): ListPane row trailing actions or FormPane header secondary actions — never both.
|
||||
- **JsonPane is read-only by default**. Pass `editable` prop only on pages that need inline editing (cliproxy is the canonical example).
|
||||
|
||||
### SectionRail
|
||||
|
||||
For single-entity pages. Provides anchor nav with `IntersectionObserver` scroll-spy. Each item must match the `id` of a `<FormSection id="…">` in the FormPane.
|
||||
|
||||
```tsx
|
||||
<SectionRail
|
||||
sections={[
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'auth', label: 'Authentication' },
|
||||
{ id: 'routing', label: 'Routing' },
|
||||
]}
|
||||
/>
|
||||
|
||||
// FormPane:
|
||||
<FormSection id="general" title="General">…</FormSection>
|
||||
<FormSection id="auth" title="Authentication">…</FormSection>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Monitor archetype — KPI row + 12-col grid
|
||||
|
||||
Used by every page that shows live state (home, analytics, health, logs, future status pages).
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ KpiRow: [KPI] [KPI] [KPI] [KPI] │ (optional, ≤4 hero numbers)
|
||||
├────────────────────────────────────────────────┤
|
||||
│ MonitorGrid (12-col): │
|
||||
│ <MonitorCard span={8}> primary viz │
|
||||
│ <MonitorCard span={4}> side widget │
|
||||
│ <MonitorCard span={6}> ... │
|
||||
│ <MonitorCard span={6}> ... │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```tsx
|
||||
<MonitorLayout
|
||||
kpis={
|
||||
<KpiRow>
|
||||
<KpiCard label="Active accounts" value="87" hint="▲ 3" tone="positive" />
|
||||
…
|
||||
</KpiRow>
|
||||
}
|
||||
>
|
||||
<MonitorGrid>
|
||||
<MonitorCard span={8} title="Live monitor">…</MonitorCard>
|
||||
<MonitorCard span={4} title="Top providers">…</MonitorCard>
|
||||
<MonitorCard span={6} title="Requests" meta="last 24h">…</MonitorCard>
|
||||
<MonitorCard span={6} variant="terminal" title="$ ccs health --watch">…</MonitorCard>
|
||||
</MonitorGrid>
|
||||
</MonitorLayout>
|
||||
```
|
||||
|
||||
### Rules
|
||||
|
||||
- **KpiRow** only when there are ≤4 hero numbers. More than 4 → use `MonitorCard`s inside the grid instead.
|
||||
- **One primary viz per page** — span ≥8 cols. Preserves the "punch" of home and analytics.
|
||||
- **`variant="terminal"`** = dark monospace card, for live-log / `health --watch` aesthetics. Opt-in only.
|
||||
- **Spans clamp at 6 cols on tablet**, single column on mobile.
|
||||
|
||||
---
|
||||
|
||||
## 4. When NOT to use either archetype
|
||||
|
||||
These remain bespoke:
|
||||
- `/login` — minimal centered shell, no header/grid.
|
||||
- Setup wizard — modal overlay, not a page.
|
||||
- Dialogs — radix `Dialog`, not a layout.
|
||||
|
||||
If you find yourself fighting the shell, the answer is usually "this isn't a Config or Monitor page" — talk to the maintainers before inventing a third archetype.
|
||||
|
||||
---
|
||||
|
||||
## 5. Composing a new page
|
||||
|
||||
The recipe for any new page is:
|
||||
|
||||
```tsx
|
||||
import { PageShell, PageHeader } from '@/components/page-shell';
|
||||
import { ConfigLayout, /*…*/ } from '@/components/config-layout';
|
||||
|
||||
export function MyPage() {
|
||||
return (
|
||||
<PageShell>
|
||||
<PageHeader title="My Page" actions={<Actions/>} />
|
||||
<ConfigLayout
|
||||
left={…}
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…}/>}
|
||||
/>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Target LOC for a new page: **~80** for typical config, **~120** for monitor. If your page exceeds 400 LOC it should be split into `pages/<name>/` with section files.
|
||||
|
||||
---
|
||||
|
||||
## 6. Lint / enforcement
|
||||
|
||||
Phase 4 adds a lint rule: every file under `src/pages/*.tsx` (or `src/pages/*/index.tsx`) must import `PageShell`. Until then, code review enforces the contract.
|
||||
|
||||
---
|
||||
|
||||
## 7. Decisions
|
||||
|
||||
See [`design-decisions.md`](./design-decisions.md) for the resolutions of the 6 open questions from the brainstorm phase.
|
||||
@@ -47,6 +47,11 @@ const HealthPage = lazy(() => import('@/pages/health').then((m) => ({ default: m
|
||||
const SharedPage = lazy(() => import('@/pages/shared').then((m) => ({ default: m.SharedPage })));
|
||||
const UpdatesPage = lazy(() => import('@/pages/updates').then((m) => ({ default: m.UpdatesPage })));
|
||||
|
||||
// Dev-only: design system styleguide
|
||||
const StyleguidePage = import.meta.env.DEV
|
||||
? lazy(() => import('@/pages/_styleguide').then((m) => ({ default: m.StyleguidePage })))
|
||||
: null;
|
||||
|
||||
// Loading fallback for lazy components
|
||||
function PageLoader() {
|
||||
return (
|
||||
@@ -203,6 +208,16 @@ export default function App() {
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
{StyleguidePage && (
|
||||
<Route
|
||||
path="/_styleguide"
|
||||
element={
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<StyleguidePage />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ConfigLayoutProps {
|
||||
/** Left rail: <ListPane> for multi-entity, <SectionRail> for single-entity, omit for none. */
|
||||
left?: ReactNode;
|
||||
/** Middle pane: form. */
|
||||
form: ReactNode;
|
||||
/** Right pane: raw JSON / effective config. Omit to hide. */
|
||||
json?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* ConfigLayout - Strict 3-pane shell for every Config archetype page.
|
||||
*
|
||||
* - >=1024px: 3-column grid (left 260px / form flex / json 360px)
|
||||
* - <1024px: tabs (left | form | json)
|
||||
*
|
||||
* Single component, prop-controlled left rail. The contract:
|
||||
* - <ConfigLayout left={<ListPane …/>} …/> // multi-entity
|
||||
* - <ConfigLayout left={<SectionRail …/>} …/> // single-entity
|
||||
* - <ConfigLayout …/> // no rail
|
||||
*/
|
||||
export function ConfigLayout({ left, form, json, className }: ConfigLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Desktop: 3-pane grid */}
|
||||
<div
|
||||
className={cn(
|
||||
'hidden min-h-0 flex-1 lg:grid lg:gap-4 lg:p-4',
|
||||
left && json && 'lg:grid-cols-[260px_minmax(0,1fr)_360px]',
|
||||
left && !json && 'lg:grid-cols-[260px_minmax(0,1fr)]',
|
||||
!left && json && 'lg:grid-cols-[minmax(0,1fr)_360px]',
|
||||
!left && !json && 'lg:grid-cols-1',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{left && (
|
||||
<aside className="min-w-0 overflow-hidden rounded-xl border bg-card">{left}</aside>
|
||||
)}
|
||||
<main className="min-w-0 overflow-hidden rounded-xl border bg-card">{form}</main>
|
||||
{json && (
|
||||
<aside className="min-w-0 overflow-hidden rounded-xl border bg-card">{json}</aside>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile/tablet: tabs */}
|
||||
<MobileTabs left={left} form={form} json={json} className={className} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileTabs({
|
||||
left,
|
||||
form,
|
||||
json,
|
||||
className,
|
||||
}: Pick<ConfigLayoutProps, 'left' | 'form' | 'json' | 'className'>) {
|
||||
const tabs = [
|
||||
left && { id: 'list', label: 'Browse', node: left },
|
||||
{ id: 'form', label: 'Configure', node: form },
|
||||
json && { id: 'json', label: 'JSON', node: json },
|
||||
].filter(Boolean) as { id: string; label: string; node: ReactNode }[];
|
||||
const [active, setActive] = useState(tabs[0]?.id ?? 'form');
|
||||
|
||||
return (
|
||||
<div className={cn('flex min-h-0 flex-1 flex-col gap-3 p-3 lg:hidden', className)}>
|
||||
<Tabs value={active} onValueChange={setActive}>
|
||||
<TabsList className="w-full">
|
||||
{tabs.map((t) => (
|
||||
<TabsTrigger key={t.id} value={t.id} className="flex-1">
|
||||
{t.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((t) => (
|
||||
<TabsContent key={t.id} value={t.id} className="rounded-xl border bg-card">
|
||||
{t.node}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface FormPaneProps {
|
||||
/** Sticky header above the scrolling form body. Typically entity name + secondary actions. */
|
||||
header?: ReactNode;
|
||||
/** Form body — typically a stack of <FormSection>s. */
|
||||
children: ReactNode;
|
||||
/** Footer pinned at bottom. Place primary save action here. */
|
||||
footer?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* FormPane - Middle pane of ConfigLayout. Holds the form.
|
||||
*
|
||||
* Layout: optional sticky header, scrolling body, optional sticky footer (for primary actions).
|
||||
*/
|
||||
export function FormPane({ header, children, footer, className }: FormPaneProps) {
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', className)}>
|
||||
{header && (
|
||||
<div className="flex shrink-0 items-center gap-2 border-b bg-card px-5 py-3">{header}</div>
|
||||
)}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="space-y-4 p-5">{children}</div>
|
||||
</ScrollArea>
|
||||
{footer && (
|
||||
<div className="flex shrink-0 items-center gap-2 border-t bg-card/80 px-5 py-3 backdrop-blur">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface FormSectionProps {
|
||||
/** Anchor id — must match SectionRail item id for scroll-spy. */
|
||||
id: string;
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
/** Optional trailing actions in section header. */
|
||||
actions?: ReactNode;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* FormSection - Titled card group inside FormPane.
|
||||
*
|
||||
* The `id` prop is REQUIRED and drives SectionRail scroll-spy. Each section in a
|
||||
* single-entity Config page should have a stable, kebab-case id like "general", "auth", "routing".
|
||||
*/
|
||||
export function FormSection({
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
actions,
|
||||
children,
|
||||
className,
|
||||
}: FormSectionProps) {
|
||||
return (
|
||||
<section
|
||||
id={id}
|
||||
className={cn('scroll-mt-4 rounded-lg border bg-background/40 p-4', className)}
|
||||
>
|
||||
<header className="mb-3 flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm font-semibold tracking-tight">{title}</h3>
|
||||
{description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="shrink-0">{actions}</div>}
|
||||
</header>
|
||||
<div className="space-y-3">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { ConfigLayout } from './config-layout';
|
||||
export { ListPane, type ListPaneItem } from './list-pane';
|
||||
export { SectionRail, type SectionRailItem } from './section-rail';
|
||||
export { FormPane } from './form-pane';
|
||||
export { FormSection } from './form-section';
|
||||
export { JsonPane, type JsonTab } from './json-pane';
|
||||
@@ -0,0 +1,114 @@
|
||||
import { useMemo, useState, type ReactNode } from 'react';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { CopyButton } from '@/components/ui/copy-button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface JsonTab {
|
||||
id: string;
|
||||
label: ReactNode;
|
||||
/** Object/array to render. Stringified internally. */
|
||||
data: unknown;
|
||||
}
|
||||
|
||||
interface JsonPaneProps {
|
||||
/** Single source — used when there's only one view. */
|
||||
data?: unknown;
|
||||
/** Multi-tab mode (e.g. Effective | Override | Diff). */
|
||||
tabs?: JsonTab[];
|
||||
title?: ReactNode;
|
||||
/** Accept structural edits. Off by default — Phase 1 ships read-only baseline. */
|
||||
editable?: boolean;
|
||||
/** Called when editable=true and user commits a change. */
|
||||
onChange?: (next: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* JsonPane - Right pane of ConfigLayout. Displays raw / effective configuration.
|
||||
*
|
||||
* Read-only by default. Pass `editable` to opt-in to inline editing (cliproxy uses this).
|
||||
* Single-source via `data` OR multi-tab via `tabs` (e.g. effective / override / diff).
|
||||
*/
|
||||
export function JsonPane({
|
||||
data,
|
||||
tabs,
|
||||
title = 'Configuration',
|
||||
editable = false,
|
||||
onChange,
|
||||
className,
|
||||
}: JsonPaneProps) {
|
||||
const hasTabs = tabs && tabs.length > 0;
|
||||
const [activeTab, setActiveTab] = useState<string>(tabs?.[0]?.id ?? 'data');
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', className)}>
|
||||
<header className="flex shrink-0 items-center justify-between gap-2 border-b px-4 py-2.5">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1">
|
||||
<CopyButton
|
||||
value={
|
||||
hasTabs
|
||||
? JSON.stringify(tabs.find((t) => t.id === activeTab)?.data ?? {}, null, 2)
|
||||
: JSON.stringify(data ?? {}, null, 2)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{hasTabs ? (
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
className="flex min-h-0 flex-1 flex-col"
|
||||
>
|
||||
<TabsList className="mx-3 mt-2 w-fit">
|
||||
{tabs.map((t) => (
|
||||
<TabsTrigger key={t.id} value={t.id} className="text-xs">
|
||||
{t.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((t) => (
|
||||
<TabsContent key={t.id} value={t.id} className="min-h-0 flex-1 overflow-hidden">
|
||||
<JsonView data={t.data} editable={editable} onChange={onChange} />
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
) : (
|
||||
<JsonView data={data} editable={editable} onChange={onChange} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface JsonViewProps {
|
||||
data: unknown;
|
||||
editable: boolean;
|
||||
onChange?: (next: string) => void;
|
||||
}
|
||||
|
||||
function JsonView({ data, editable, onChange }: JsonViewProps) {
|
||||
const text = useMemo(() => JSON.stringify(data ?? {}, null, 2), [data]);
|
||||
|
||||
if (editable) {
|
||||
return (
|
||||
<textarea
|
||||
defaultValue={text}
|
||||
onBlur={(e) => onChange?.(e.target.value)}
|
||||
spellCheck={false}
|
||||
className="h-full w-full resize-none border-0 bg-muted/40 p-3 font-mono text-xs leading-relaxed focus:outline-none"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<pre className="whitespace-pre p-3 font-mono text-xs leading-relaxed text-foreground">
|
||||
{text}
|
||||
</pre>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface ListPaneItem {
|
||||
id: string;
|
||||
label: ReactNode;
|
||||
badge?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
|
||||
interface ListPaneProps {
|
||||
items: ListPaneItem[];
|
||||
selectedId?: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
searchValue?: string;
|
||||
onSearchChange?: (v: string) => void;
|
||||
searchPlaceholder?: string;
|
||||
header?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* ListPane - Sidebar list of selectable entities (multi-entity Config pages).
|
||||
*
|
||||
* Provides search input + scrollable list + footer slot for "+ Add" actions.
|
||||
*/
|
||||
export function ListPane({
|
||||
items,
|
||||
selectedId,
|
||||
onSelect,
|
||||
searchValue,
|
||||
onSearchChange,
|
||||
searchPlaceholder = 'Search…',
|
||||
header,
|
||||
footer,
|
||||
className,
|
||||
}: ListPaneProps) {
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', className)}>
|
||||
{header && <div className="border-b p-3">{header}</div>}
|
||||
{onSearchChange && (
|
||||
<div className="relative border-b p-2">
|
||||
<Search className="absolute left-4 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchValue ?? ''}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="h-8 pl-7 text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<ScrollArea className="flex-1">
|
||||
<ul className="p-2">
|
||||
{items.map((item) => {
|
||||
const selected = item.id === selectedId;
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(item.id)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
|
||||
selected
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-accent/50 hover:text-accent-foreground'
|
||||
)}
|
||||
aria-current={selected ? 'true' : undefined}
|
||||
>
|
||||
{item.icon && <span className="shrink-0">{item.icon}</span>}
|
||||
<span className="min-w-0 flex-1 truncate">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="shrink-0 text-xs text-muted-foreground">{item.badge}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
{footer && <div className="border-t p-2">{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useEffect, useState, type ReactNode } from 'react';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface SectionRailItem {
|
||||
id: string;
|
||||
label: ReactNode;
|
||||
badge?: ReactNode;
|
||||
}
|
||||
|
||||
interface SectionRailProps {
|
||||
sections: SectionRailItem[];
|
||||
/** ID of the FormSection element to scroll into view on click. Section's `id` prop must match. */
|
||||
onJump?: (id: string) => void;
|
||||
/** Optional: container element to observe for scroll-spy. Defaults to scrollable ancestor. */
|
||||
observeRoot?: HTMLElement | null;
|
||||
header?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* SectionRail - Anchor nav for single-entity Config pages.
|
||||
*
|
||||
* Replaces ListPane on pages that configure ONE entity (codex, copilot, cursor, droid…).
|
||||
* Each item maps to a <FormSection id="…"> in the FormPane. Scroll-spy via
|
||||
* IntersectionObserver auto-highlights the active section.
|
||||
*
|
||||
* Click → smooth-scrolls the matching FormSection into view.
|
||||
*/
|
||||
export function SectionRail({
|
||||
sections,
|
||||
onJump,
|
||||
observeRoot,
|
||||
header,
|
||||
className,
|
||||
}: SectionRailProps) {
|
||||
const [activeId, setActiveId] = useState<string>(sections[0]?.id ?? '');
|
||||
|
||||
// Scroll-spy: observe each FormSection element by id
|
||||
useEffect(() => {
|
||||
const els = sections
|
||||
.map((s) => document.getElementById(s.id))
|
||||
.filter((el): el is HTMLElement => el !== null);
|
||||
if (els.length === 0) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
// Pick the section closest to top that's intersecting
|
||||
const visible = entries
|
||||
.filter((e) => e.isIntersecting)
|
||||
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
|
||||
if (visible[0]) setActiveId(visible[0].target.id);
|
||||
},
|
||||
{
|
||||
root: observeRoot ?? null,
|
||||
rootMargin: '-20% 0px -60% 0px',
|
||||
threshold: 0,
|
||||
}
|
||||
);
|
||||
els.forEach((el) => observer.observe(el));
|
||||
return () => observer.disconnect();
|
||||
}, [sections, observeRoot]);
|
||||
|
||||
const handleJump = (id: string) => {
|
||||
setActiveId(id);
|
||||
if (onJump) {
|
||||
onJump(id);
|
||||
return;
|
||||
}
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', className)}>
|
||||
{header && <div className="border-b p-3">{header}</div>}
|
||||
<ScrollArea className="flex-1">
|
||||
<ul className="p-2">
|
||||
{sections.map((s) => {
|
||||
const active = s.id === activeId;
|
||||
return (
|
||||
<li key={s.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleJump(s.id)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
|
||||
active
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-block size-1.5 shrink-0 rounded-full transition-colors',
|
||||
active ? 'bg-accent-foreground' : 'bg-muted-foreground/30'
|
||||
)}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate">{s.label}</span>
|
||||
{s.badge && (
|
||||
<span className="shrink-0 text-xs text-muted-foreground">{s.badge}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { MonitorLayout } from './monitor-layout';
|
||||
export { KpiRow, KpiCard } from './kpi';
|
||||
export { MonitorGrid, MonitorCard } from './monitor-grid';
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface KpiRowProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* KpiRow - Container row for hero stat tiles.
|
||||
*
|
||||
* Use only when there are ≤4 hero numbers. More than 4 → consider grouping into a card grid.
|
||||
* Responsive: 2 cols on mobile, 4 on desktop.
|
||||
*/
|
||||
export function KpiRow({ children, className }: KpiRowProps) {
|
||||
return (
|
||||
<div className={cn('grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface KpiCardProps {
|
||||
label: ReactNode;
|
||||
value: ReactNode;
|
||||
hint?: ReactNode;
|
||||
/** Tone for the hint line (e.g. positive delta, warning, etc.). */
|
||||
tone?: 'default' | 'positive' | 'warning' | 'negative';
|
||||
icon?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TONE_CLASSES: Record<NonNullable<KpiCardProps['tone']>, string> = {
|
||||
default: 'text-muted-foreground',
|
||||
positive: 'text-emerald-600 dark:text-emerald-400',
|
||||
warning: 'text-amber-600 dark:text-amber-400',
|
||||
negative: 'text-destructive',
|
||||
};
|
||||
|
||||
/**
|
||||
* KpiCard - Single hero stat tile inside a KpiRow.
|
||||
*/
|
||||
export function KpiCard({ label, value, hint, tone = 'default', icon, className }: KpiCardProps) {
|
||||
return (
|
||||
<div className={cn('rounded-xl border bg-card p-4 shadow-sm', className)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</p>
|
||||
{icon && <span className="text-muted-foreground">{icon}</span>}
|
||||
</div>
|
||||
<p className="mt-2 text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
|
||||
{hint && <p className={cn('mt-1 text-xs', TONE_CLASSES[tone])}>{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface MonitorGridProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* MonitorGrid - 12-column responsive grid for MonitorCards.
|
||||
*
|
||||
* - <640px: single column
|
||||
* - <1024px: 6 cols
|
||||
* - >=1024px: 12 cols
|
||||
*
|
||||
* Children should be <MonitorCard span={…}/> using span values 1-12.
|
||||
*/
|
||||
export function MonitorGrid({ children, className }: MonitorGridProps) {
|
||||
return (
|
||||
<div className={cn('grid grid-cols-1 gap-4 sm:grid-cols-6 lg:grid-cols-12', className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
type Variant = 'default' | 'terminal';
|
||||
|
||||
interface MonitorCardProps {
|
||||
/** Column span in MonitorGrid (1-12). Default 4. */
|
||||
span?: Span;
|
||||
variant?: Variant;
|
||||
title?: ReactNode;
|
||||
description?: ReactNode;
|
||||
/** Trailing actions in card header. */
|
||||
actions?: ReactNode;
|
||||
/** Optional meta line (e.g. timeframe, count) shown next to actions. */
|
||||
meta?: ReactNode;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Tailwind needs literal class names — map span -> class explicitly so JIT picks them up.
|
||||
const SPAN_DESKTOP: Record<Span, string> = {
|
||||
1: 'lg:col-span-1',
|
||||
2: 'lg:col-span-2',
|
||||
3: 'lg:col-span-3',
|
||||
4: 'lg:col-span-4',
|
||||
5: 'lg:col-span-5',
|
||||
6: 'lg:col-span-6',
|
||||
7: 'lg:col-span-7',
|
||||
8: 'lg:col-span-8',
|
||||
9: 'lg:col-span-9',
|
||||
10: 'lg:col-span-10',
|
||||
11: 'lg:col-span-11',
|
||||
12: 'lg:col-span-12',
|
||||
};
|
||||
|
||||
// Tablet: clamp span to 6 cols max.
|
||||
const SPAN_TABLET: Record<Span, string> = {
|
||||
1: 'sm:col-span-2',
|
||||
2: 'sm:col-span-2',
|
||||
3: 'sm:col-span-3',
|
||||
4: 'sm:col-span-3',
|
||||
5: 'sm:col-span-3',
|
||||
6: 'sm:col-span-6',
|
||||
7: 'sm:col-span-6',
|
||||
8: 'sm:col-span-6',
|
||||
9: 'sm:col-span-6',
|
||||
10: 'sm:col-span-6',
|
||||
11: 'sm:col-span-6',
|
||||
12: 'sm:col-span-6',
|
||||
};
|
||||
|
||||
const VARIANT_CLASSES: Record<Variant, string> = {
|
||||
default: 'bg-card text-card-foreground',
|
||||
terminal: 'bg-zinc-950 text-emerald-400 border-emerald-900/40 font-mono',
|
||||
};
|
||||
|
||||
/**
|
||||
* MonitorCard - Single tile in a MonitorGrid.
|
||||
*
|
||||
* Variants:
|
||||
* - default: standard card
|
||||
* - terminal: dark monospace card for "live log" / health-style tiles
|
||||
*/
|
||||
export function MonitorCard({
|
||||
span = 4,
|
||||
variant = 'default',
|
||||
title,
|
||||
description,
|
||||
actions,
|
||||
meta,
|
||||
children,
|
||||
className,
|
||||
}: MonitorCardProps) {
|
||||
return (
|
||||
<article
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
'col-span-1 flex flex-col gap-3 rounded-xl border p-4 shadow-sm',
|
||||
SPAN_TABLET[span],
|
||||
SPAN_DESKTOP[span],
|
||||
VARIANT_CLASSES[variant],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{(title || actions || meta) && (
|
||||
<header className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
{title && (
|
||||
<h3
|
||||
className={cn(
|
||||
'truncate text-sm font-semibold',
|
||||
variant === 'terminal' && 'text-emerald-300'
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{description && (
|
||||
<p
|
||||
className={cn(
|
||||
'mt-0.5 text-xs',
|
||||
variant === 'terminal' ? 'text-emerald-500/70' : 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{meta && (
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs',
|
||||
variant === 'terminal' ? 'text-emerald-500/70' : 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{meta}
|
||||
</span>
|
||||
)}
|
||||
{actions}
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">{children}</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface MonitorLayoutProps {
|
||||
/** Optional KPI row above the grid (use <KpiRow>). Render only when ≤4 hero numbers. */
|
||||
kpis?: ReactNode;
|
||||
/** Page body — typically a <MonitorGrid> of <MonitorCard>s. */
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* MonitorLayout - Body wrapper for Monitor archetype pages (home, analytics, health, logs).
|
||||
*
|
||||
* - Optional KPI row pinned above the grid
|
||||
* - Scrollable body
|
||||
*
|
||||
* Compose inside <PageShell>:
|
||||
* <PageShell>
|
||||
* <PageHeader …/>
|
||||
* <MonitorLayout kpis={<KpiRow>…</KpiRow>}>
|
||||
* <MonitorGrid>…</MonitorGrid>
|
||||
* </MonitorLayout>
|
||||
* </PageShell>
|
||||
*/
|
||||
export function MonitorLayout({ kpis, children, className }: MonitorLayoutProps) {
|
||||
return (
|
||||
<ScrollArea className={cn('flex-1', className)}>
|
||||
<div className="space-y-4 p-4 sm:p-6">
|
||||
{kpis}
|
||||
{children}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: LucideIcon;
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
action?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* EmptyState - Standard placeholder when a list / page has no content.
|
||||
*/
|
||||
export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{Icon && (
|
||||
<div className="rounded-full bg-muted p-3 text-muted-foreground">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium">{title}</h3>
|
||||
{description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
|
||||
</div>
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ErrorStateProps {
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
action?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* ErrorState - Standard error placeholder.
|
||||
*/
|
||||
export function ErrorState({ title, description, action, className }: ErrorStateProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-8 text-center',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="rounded-full bg-destructive/10 p-3 text-destructive">
|
||||
<AlertTriangle className="size-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-destructive">{title}</h3>
|
||||
{description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
|
||||
</div>
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export { PageShell } from './page-shell';
|
||||
export { PageHeader } from './page-header';
|
||||
export { EmptyState } from './empty-state';
|
||||
export { ErrorState } from './error-state';
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
status?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* PageHeader - Standard header strip for every page.
|
||||
*
|
||||
* Slots:
|
||||
* - title: page name (required)
|
||||
* - description: short subtitle below title
|
||||
* - status: status badge / chip on the trailing side
|
||||
* - actions: button group on the trailing side
|
||||
*
|
||||
* Layout: title block on left, status + actions on right.
|
||||
*/
|
||||
export function PageHeader({ title, description, status, actions, className }: PageHeaderProps) {
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
'flex flex-col gap-3 border-b bg-background/50 px-6 py-4 sm:flex-row sm:items-center sm:justify-between',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
|
||||
{status && <div className="flex items-center gap-2">{status}</div>}
|
||||
</div>
|
||||
{description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface PageShellProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* PageShell - Outer wrapper for every dashboard page.
|
||||
*
|
||||
* Provides:
|
||||
* - Consistent max-width and padding
|
||||
* - Vertical flex layout for header + body
|
||||
*
|
||||
* Compose with PageHeader + (ConfigLayout | MonitorLayout) inside.
|
||||
*/
|
||||
export function PageShell({ children, className }: PageShellProps) {
|
||||
return <div className={cn('flex h-full min-h-0 w-full flex-col', className)}>{children}</div>;
|
||||
}
|
||||
@@ -0,0 +1,439 @@
|
||||
/**
|
||||
* /_styleguide — DEV-ONLY route showcasing the CCS design system.
|
||||
*
|
||||
* Renders every primitive in isolation plus composed Config + Monitor archetype demos.
|
||||
* Gated by import.meta.env.DEV in App.tsx — never exposed in production builds.
|
||||
*
|
||||
* All demo data is anonymized (Provider A/B/C, fake metrics) so screenshots are
|
||||
* safe to publish in PRs without enabling Privacy mode.
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import { Activity, Bot, Cloud, Cpu, Plus, RefreshCcw, ShieldCheck, Zap } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { PageShell, PageHeader, EmptyState, ErrorState } from '@/components/page-shell';
|
||||
import {
|
||||
ConfigLayout,
|
||||
ListPane,
|
||||
SectionRail,
|
||||
FormPane,
|
||||
FormSection,
|
||||
JsonPane,
|
||||
type ListPaneItem,
|
||||
type SectionRailItem,
|
||||
} from '@/components/config-layout';
|
||||
import {
|
||||
MonitorLayout,
|
||||
MonitorGrid,
|
||||
MonitorCard,
|
||||
KpiRow,
|
||||
KpiCard,
|
||||
} from '@/components/monitor-layout';
|
||||
|
||||
const DEMO_PROVIDERS: ListPaneItem[] = [
|
||||
{ id: 'provider-a', label: 'Provider A', badge: '14', icon: <Zap className="size-3.5" /> },
|
||||
{ id: 'provider-b', label: 'Provider B', badge: '3', icon: <Bot className="size-3.5" /> },
|
||||
{ id: 'provider-c', label: 'Provider C', badge: '70', icon: <Cloud className="size-3.5" /> },
|
||||
{ id: 'provider-d', label: 'Provider D', badge: '1', icon: <ShieldCheck className="size-3.5" /> },
|
||||
];
|
||||
|
||||
const DEMO_SECTIONS: SectionRailItem[] = [
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'auth', label: 'Authentication' },
|
||||
{ id: 'routing', label: 'Routing' },
|
||||
{ id: 'models', label: 'Models' },
|
||||
{ id: 'tools', label: 'Tools & MCP' },
|
||||
{ id: 'advanced', label: 'Advanced' },
|
||||
];
|
||||
|
||||
const DEMO_CONFIG = {
|
||||
endpoint: 'https://example.local:8317',
|
||||
strategy: 'weighted-round-robin',
|
||||
accounts: 14,
|
||||
failover: ['provider-b', 'provider-c'],
|
||||
timeout_ms: 30000,
|
||||
};
|
||||
|
||||
export function StyleguidePage() {
|
||||
return (
|
||||
<div className="space-y-12 bg-muted/20 px-4 py-8 sm:px-8">
|
||||
<Intro />
|
||||
<PrimitiveSection title="1. PageShell + PageHeader" anchor="page-shell">
|
||||
<DemoPageHeader />
|
||||
</PrimitiveSection>
|
||||
|
||||
<PrimitiveSection
|
||||
title="2a. Config archetype — multi-entity (ListPane)"
|
||||
anchor="config-multi"
|
||||
>
|
||||
<DemoConfigMulti />
|
||||
</PrimitiveSection>
|
||||
|
||||
<PrimitiveSection
|
||||
title="2b. Config archetype — single-entity (SectionRail)"
|
||||
anchor="config-single"
|
||||
>
|
||||
<DemoConfigSingle />
|
||||
</PrimitiveSection>
|
||||
|
||||
<PrimitiveSection title="3. Monitor archetype" anchor="monitor">
|
||||
<DemoMonitor />
|
||||
</PrimitiveSection>
|
||||
|
||||
<PrimitiveSection title="4. EmptyState / ErrorState" anchor="states">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<EmptyState
|
||||
icon={Activity}
|
||||
title="No providers yet"
|
||||
description="Add your first provider to start routing requests."
|
||||
action={
|
||||
<Button size="sm">
|
||||
<Plus className="size-3.5" /> Add provider
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ErrorState
|
||||
title="Failed to load configuration"
|
||||
description="The remote host returned 503. Retry in a moment."
|
||||
action={
|
||||
<Button size="sm" variant="outline">
|
||||
<RefreshCcw className="size-3.5" /> Retry
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</PrimitiveSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Section helpers
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function Intro() {
|
||||
return (
|
||||
<header className="mx-auto max-w-4xl space-y-3 text-center">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
DEV ONLY · /_styleguide
|
||||
</Badge>
|
||||
<h1 className="text-3xl font-bold tracking-tight">CCS Dashboard Design System</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Two archetypes — <strong>Config</strong> (3-pane: list | form | JSON) and{' '}
|
||||
<strong>Monitor</strong> (KPI row + grid) — wrapped by <code>PageShell</code>. Every page
|
||||
picks one archetype.
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function PrimitiveSection({
|
||||
title,
|
||||
anchor,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
anchor: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={anchor} className="mx-auto max-w-7xl space-y-3">
|
||||
<h2 className="text-lg font-semibold">{title}</h2>
|
||||
<div className="overflow-hidden rounded-2xl border bg-background shadow-sm">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// PageHeader demo
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function DemoPageHeader() {
|
||||
return (
|
||||
<PageShell>
|
||||
<PageHeader
|
||||
title="Demo Page"
|
||||
description="PageShell + PageHeader provide consistent chrome for every page."
|
||||
status={<Badge variant="secondary">Running</Badge>}
|
||||
actions={
|
||||
<>
|
||||
<Button variant="outline" size="sm">
|
||||
Refresh
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="size-3.5" /> New
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="p-6 text-sm text-muted-foreground">Page body renders below the header.</div>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Config (multi-entity) demo
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function DemoConfigMulti() {
|
||||
const [selectedId, setSelectedId] = useState<string>('provider-a');
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const filtered = DEMO_PROVIDERS.filter((p) =>
|
||||
String(p.label).toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-[640px] flex-col">
|
||||
<PageHeader
|
||||
title="CLIProxy"
|
||||
status={<Badge variant="secondary">Multi-entity demo</Badge>}
|
||||
actions={
|
||||
<Button size="sm">
|
||||
<Plus className="size-3.5" /> New provider
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ConfigLayout
|
||||
left={
|
||||
<ListPane
|
||||
items={filtered}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search providers…"
|
||||
footer={
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<Plus className="size-3.5" /> Add provider
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
form={
|
||||
<FormPane
|
||||
header={
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold">Provider A</p>
|
||||
<p className="text-xs text-muted-foreground">14 accounts · synced 2m ago</p>
|
||||
</div>
|
||||
<Badge variant="outline">connected</Badge>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<>
|
||||
<Button size="sm">Save</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
Test connection
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FormSection id="general" title="General" description="Endpoint and routing strategy.">
|
||||
<Field label="Display name" defaultValue="Provider A" />
|
||||
<Field label="Endpoint" defaultValue="https://example.local:8317" />
|
||||
</FormSection>
|
||||
<FormSection id="auth" title="Authentication">
|
||||
<Field label="Strategy" defaultValue="weighted-round-robin" />
|
||||
</FormSection>
|
||||
</FormPane>
|
||||
}
|
||||
json={<JsonPane title="Effective" data={DEMO_CONFIG} />}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Config (single-entity) demo
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function DemoConfigSingle() {
|
||||
return (
|
||||
<div className="flex h-[680px] flex-col">
|
||||
<PageHeader
|
||||
title="Cursor"
|
||||
description="Single-entity config with SectionRail."
|
||||
status={<Badge variant="secondary">v0.42 · connected</Badge>}
|
||||
actions={
|
||||
<Button size="sm">
|
||||
<Plus className="size-3.5" /> Open editor
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ConfigLayout
|
||||
left={<SectionRail sections={DEMO_SECTIONS} />}
|
||||
form={
|
||||
<FormPane footer={<Button size="sm">Save configuration</Button>}>
|
||||
<FormSection id="general" title="General" description="Top-level identity.">
|
||||
<Field label="Endpoint" defaultValue="https://example.local:8317" />
|
||||
<Field label="Default profile" defaultValue="example-profile" />
|
||||
</FormSection>
|
||||
<FormSection id="auth" title="Authentication">
|
||||
<Field label="Strategy" defaultValue="oauth" />
|
||||
</FormSection>
|
||||
<FormSection id="routing" title="Routing">
|
||||
<Field label="Strategy" defaultValue="weighted-round-robin" />
|
||||
<Field label="Failover chain" defaultValue="provider-b → provider-c" />
|
||||
</FormSection>
|
||||
<FormSection id="models" title="Models">
|
||||
<Field label="Default model" defaultValue="model-x" />
|
||||
</FormSection>
|
||||
<FormSection id="tools" title="Tools & MCP">
|
||||
<Field label="MCP endpoint" defaultValue="(none)" />
|
||||
</FormSection>
|
||||
<FormSection id="advanced" title="Advanced">
|
||||
<Field label="Timeout (ms)" defaultValue="30000" />
|
||||
</FormSection>
|
||||
</FormPane>
|
||||
}
|
||||
json={
|
||||
<JsonPane
|
||||
title="Configuration"
|
||||
tabs={[
|
||||
{ id: 'effective', label: 'Effective', data: DEMO_CONFIG },
|
||||
{ id: 'override', label: 'Override', data: { strategy: 'failover-only' } },
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Monitor demo
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function DemoMonitor() {
|
||||
return (
|
||||
<div className="flex h-[720px] flex-col">
|
||||
<PageHeader
|
||||
title="Home"
|
||||
status={<Badge variant="secondary">All systems nominal</Badge>}
|
||||
actions={
|
||||
<Button size="sm" variant="outline">
|
||||
<RefreshCcw className="size-3.5" /> Refresh
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<MonitorLayout
|
||||
kpis={
|
||||
<KpiRow>
|
||||
<KpiCard
|
||||
label="Active accounts"
|
||||
value="87"
|
||||
hint="▲ 3 vs yesterday"
|
||||
tone="positive"
|
||||
icon={<ShieldCheck className="size-4" />}
|
||||
/>
|
||||
<KpiCard
|
||||
label="Requests / 24h"
|
||||
value="12,481"
|
||||
hint="▲ 6.4%"
|
||||
tone="positive"
|
||||
icon={<Activity className="size-4" />}
|
||||
/>
|
||||
<KpiCard label="Errors" value="12" hint="3 quota, 9 transient" tone="warning" />
|
||||
<KpiCard
|
||||
label="Uptime"
|
||||
value="99.98%"
|
||||
hint="30-day"
|
||||
icon={<Cpu className="size-4" />}
|
||||
/>
|
||||
</KpiRow>
|
||||
}
|
||||
>
|
||||
<MonitorGrid>
|
||||
<MonitorCard
|
||||
span={8}
|
||||
title="Live account monitor"
|
||||
meta="realtime"
|
||||
description="Anonymized — Account 1, 2, …"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{[42, 58, 31, 81, 12, 96, 24, 19].map((pct, i) => (
|
||||
<div key={i} className="rounded-md border bg-muted/30 p-2">
|
||||
<p className="text-xs font-medium">Account {i + 1}</p>
|
||||
<p className="text-[10px] text-muted-foreground">tier · {pct}%</p>
|
||||
<div className="mt-1.5 h-1 overflow-hidden rounded bg-muted">
|
||||
<div
|
||||
className={
|
||||
pct > 80
|
||||
? 'h-full bg-destructive'
|
||||
: pct > 60
|
||||
? 'h-full bg-amber-500'
|
||||
: 'h-full bg-emerald-500'
|
||||
}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</MonitorCard>
|
||||
|
||||
<MonitorCard span={4} title="Top providers" meta="24h">
|
||||
<ul className="space-y-1.5 text-sm">
|
||||
{[
|
||||
{ name: 'Provider A', share: '62%' },
|
||||
{ name: 'Provider C', share: '24%' },
|
||||
{ name: 'Provider B', share: '9%' },
|
||||
{ name: 'Provider D', share: '5%' },
|
||||
].map((row) => (
|
||||
<li
|
||||
key={row.name}
|
||||
className="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-muted/50"
|
||||
>
|
||||
<span>{row.name}</span>
|
||||
<span className="text-xs text-muted-foreground">{row.share}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</MonitorCard>
|
||||
|
||||
<MonitorCard span={6} title="Requests" meta="last 24h">
|
||||
<div className="flex h-32 items-end gap-1">
|
||||
{[14, 22, 30, 38, 28, 35, 42, 55, 48, 60, 70, 64, 78, 82, 90, 88, 95].map((h, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 rounded-t bg-accent/70"
|
||||
style={{ height: `${h}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</MonitorCard>
|
||||
|
||||
<MonitorCard span={6} variant="terminal" title="$ ccs health --watch" meta="live">
|
||||
<pre className="text-xs leading-relaxed">
|
||||
{`[OK] cliproxy :8317 uptime 14d 02h
|
||||
[OK] dashboard :3000 uptime 14d 02h
|
||||
[OK] qdrant :6333 uptime 21d 11h
|
||||
[OK] postgres :5432 uptime 47d 03h
|
||||
[!] ollama-gpu gpu 78% vram 9.4/12GB
|
||||
[OK] runner self-hosted online`}
|
||||
</pre>
|
||||
</MonitorCard>
|
||||
</MonitorGrid>
|
||||
</MonitorLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// tiny field helper
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function Field({ label, defaultValue }: { label: string; defaultValue: string }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</Label>
|
||||
<Input defaultValue={defaultValue} className="font-mono text-sm" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user