---
created: 2026-03-12
source: Growth-Engine
tags: [agent-archive, growth-engine]
---

# CLAUDE.md — Control Centre

## What This Is
OpsMan Control Centre — a config-driven dashboard for managing an AI agent fleet.
Currently configured for the RateRight fleet (8 agents on VPS 134.199.153.159).
Designed to be cloned and reconfigured for any fleet/client.

## Tech Stack
- React 19 + Vite 7 (NOT Next.js — intentionally)
- TailwindCSS 4 (dark theme, mission control aesthetic)
- Supabase (auth + database + realtime)
- TanStack Query v5 (data fetching + caching)
- Lucide React (icons)
- Framer Motion (animations, when needed)
- Sonner (toast notifications)

## Architecture

### Config-Driven
Everything reads from `fleet.config.js` at the project root:
- Agent definitions (name, model, port, avatar, color)
- Navigation items (which pages to show)
- Branding (name, colors, logo)
- Projects, status colors

**To configure for a new client:** Edit fleet.config.js. No code changes needed.

### File Structure
```
control-centre/
├── fleet.config.js          ← THE config file. Edit this for new deployments.
├── src/
│   ├── main.jsx             ← Entry point
│   ├── App.jsx              ← Routing + providers
│   ├── index.css            ← Design system (CSS variables)
│   ├── lib/
│   │   ├── fleet.js         ← Fleet config helpers (read-only)
│   │   ├── api.js           ← API client (all endpoint definitions)
│   │   └── supabase.js      ← Supabase client singleton
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Shell.jsx    ← Main layout wrapper
│   │   │   ├── Sidebar.jsx  ← Left sidebar navigation
│   │   │   └── Header.jsx   ← Top header bar
│   │   ├── ui/
│   │   │   ├── Card.jsx     ← Standard card wrapper
│   │   │   ├── Badge.jsx    ← Status/model badges
│   │   │   └── StatusDot.jsx← Colored status indicator
│   │   ├── fleet/
│   │   │   └── AgentCard.jsx← Agent status card
│   │   └── dashboard/
│   │       ├── QuickStats.jsx
│   │       ├── ActivityFeed.jsx
│   │       └── PendingApprovals.jsx
│   └── pages/
│       ├── CommandCentre.jsx ← Home "/" — fleet overview
│       ├── Fleet.jsx         ← "/fleet" — agent management table
│       ├── WaterCooler.jsx   ← "/watercooler" — virtual office
│       └── Placeholder.jsx   ← Temp page for unbuilt routes
```

### Design System
- Dark theme ONLY (mission control aesthetic)
- CSS variables defined in `src/index.css` (all prefixed `--cc-`)
- Fonts: Plus Jakarta Sans (display), JetBrains Mono (data/code)
- Colors: Deep charcoal base, emerald/amber/red status, blue accent
- All components use CSS variables, NOT hardcoded colors

### Adding a New Page
1. Create `src/pages/YourPage.jsx`
2. Import it in `src/App.jsx` and add a `<Route>`
3. Add nav entry in `fleet.config.js` → `nav[]` (sidebar auto-picks it up)

### Adding a New API Endpoint
1. Add the method to the appropriate API module in `src/lib/api.js`
2. Use it in components via TanStack Query:
   ```jsx
   const { data } = useQuery({
     queryKey: ['your-key'],
     queryFn: () => yourApi.method()
   });
   ```

### Demo Data Pattern
All pages currently use hardcoded demo data (marked with `// Demo` comments).
To connect to real APIs:
1. Replace demo constants with `useQuery` calls
2. The API methods are already defined in `src/lib/api.js`
3. Backend endpoints need to be created (see CONTRIBUTING.md)

## Key Rules
- NEVER add light theme. This is dark-only by design.
- NEVER hardcode agent names/ports. Always read from fleet.config.js via `src/lib/fleet.js`.
- NEVER import Supabase directly in components. Use the API layer or hooks.
- Keep components small. One component = one responsibility.
- Demo data is clearly marked. Replace with API calls, don't remove the pattern.