# Dashboard Components

React 19 components organized by feature. Top-level files are flat per-page/per-card components; subdirectories group related complex flows.

## Structure

```
components/
├── ui/                # shadcn/ui primitives (auto-generated, do not hand-edit)
├── kanban/            # Task board (DnD-Kit drag/drop, columns, cards)
├── sandbox-drawer/    # Sandbox detail panel (services, repos, sessions tabs)
├── workspace-form/    # Workspace create/edit (repos, dev commands, secrets)
├── settings/          # Global settings (CLIProxy, session templates, config files)
└── *.tsx              # Top-level page-scoped components
```

## Conventions

- **One responsibility per file**: large components (>300 lines) are split by tab/section under their own subdir
- **Server state via TanStack Query**: hooks live in `../hooks/` or `../api/queries/` — components read, don't fetch directly
- **Optimistic updates**: stop/start/delete actions mutate cache immediately, rollback on error
- **shadcn/ui only for primitives**: domain-specific composites live at this level, not in `ui/`
- **Type-safe API**: all manager calls go through Eden Treaty client (`../api/client.ts`)

## Anti-Patterns

- **DO NOT** edit `ui/` components — they are tracked via `components.json` and regenerated by shadcn CLI
- **DO NOT** prop-drill server state — fetch with TanStack Query at the consuming component
- **DO NOT** use `useEffect` to sync server state — use query invalidation
