foxy-dev-team/docs/walkthrough.md

# 🦊 Foxy Dev Team v2.0 — Refonte complète

## Résumé

Refonte complète du système Foxy Dev Team : remplacement du daemon [foxy-autopilot.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/scripts/foxy-autopilot.py) et de la gestion d'état fichier par une architecture moderne FastAPI + React + SQLite.

---

## Architecture livrée

```mermaid
graph LR
    subgraph Frontend
        A[React + TypeScript + TailwindCSS]
    end
    subgraph Backend
        B[FastAPI + SQLAlchemy]
        C[(SQLite)]
        D[WebSocket Hub]
    end
    subgraph External
        E[Telegram Bot v3]
        F[OpenClaw CLI]
    end
    A -- REST API --> B
    A -- WebSocket --> D
    B --> C
    E -- REST API --> B
    B --> F
```

---

## Fichiers créés

### Backend (`backend/app/`)

| Fichier | Rôle |
|---------|------|
| [config.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/config.py) | Pydantic-settings, `.env` loader |
| [database.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/database.py) | Async SQLAlchemy engine + session |
| [models.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/models.py) | 4 tables ORM (Project, Task, AgentExecution, AuditLog) |
| [schemas.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/schemas.py) | Pydantic request/response schemas |
| [workflows.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/workflows.py) | Moteur de workflows dynamique (4 types) |
| [notifications.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/notifications.py) | Service Telegram async (httpx) |
| [openclaw.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/openclaw.py) | Intégration OpenClaw async |
| [main.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/main.py) | Application FastAPI principale |

### API Routers (`backend/app/routers/`)

| Fichier | Endpoints |
|---------|-----------|
| [projects.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/projects.py) | CRUD projets + `/start`, `/pause`, `/stop`, `/reset` |
| [agents.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/agents.py) | Status agents + historique |
| [logs.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/logs.py) | Audit logs avec filtres |
| [workflows.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/workflows.py) | Définitions des 4 workflows |
| [config.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/config.py) | Gestion config (secrets masqués) |
| [ws.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/backend/app/routers/ws.py) | WebSocket hub temps réel |

### Frontend (`frontend/src/`)

| Fichier | Page |
|---------|------|
| [App.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/App.tsx) | Layout principal + sidebar + routing |
| [Dashboard.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/pages/Dashboard.tsx) | Vue d'ensemble (stats, agents, activité) |
| [Projects.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/pages/Projects.tsx) | Liste projets + création + contrôle |
| [Agents.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/pages/Agents.tsx) | Cartes agents avec stats |
| [Logs.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/pages/Logs.tsx) | Table audit en temps réel |
| [Settings.tsx](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/frontend/src/pages/Settings.tsx) | Configuration + workflows |

### Telegram Bot

| Fichier | Rôle |
|---------|------|
| [foxy-telegram-bot-v3.py](file:///c:/dev/git/openclaw/FoxyDevTeam/foxy-dev-team/scripts/foxy-telegram-bot-v3.py) | Bot async via API centralisée (remplace les subprocess) |

---

## Vérification

### API Endpoints testés ✅

```
GET  /api/health     → {"status": "ok", "version": "2.0.0"}
POST /api/projects   → Création projet avec audit log
GET  /api/projects   → Liste avec task_count/tasks_done
GET  /api/agents     → 6 agents avec modèles et stats
GET  /api/workflows  → 4 workflows (SOFTWARE_DESIGN, SYSADMIN_DEBUG, DEVOPS_SETUP, SYSADMIN_ADJUST)
GET  /api/logs       → Audit logs filtrables
```

### Dashboard vérifié visuellement ✅

````carousel
![Dashboard principal — stat cards, projets en cours, agents, activité récente](C:/Users/bruno/.gemini/antigravity/brain/8671b437-c23e-40f7-ac31-e12ef1c7eb72/dashboard_main.png)
<!-- slide -->
![Agents — 6 cartes avec modèles IA et statistiques d'exécution](C:/Users/bruno/.gemini/antigravity/brain/8671b437-c23e-40f7-ac31-e12ef1c7eb72/agents_page.png)
<!-- slide -->
![Logs en temps réel — table d'audit avec filtres et auto-scroll](C:/Users/bruno/.gemini/antigravity/brain/8671b437-c23e-40f7-ac31-e12ef1c7eb72/logs_page.png)
````

### Enregistrement du Dashboard

![Navigation complète du Dashboard](C:/Users/bruno/.gemini/antigravity/brain/8671b437-c23e-40f7-ac31-e12ef1c7eb72/dashboard_verification_1773345567606.webp)

---

## Démarrage rapide

```bash
# Backend
cd backend
cp .env.example .env  # Configurer les variables
pip install -r requirements.txt
python -m uvicorn app.main:app --port 7000

# Frontend
cd frontend
npm install
npm run dev

# Telegram Bot
cd scripts
export TELEGRAM_BOT_TOKEN="..." TELEGRAM_CHAT_ID="..." FOXY_API_URL="http://localhost:7000"
python3 foxy-telegram-bot-v3.py
```