# Audit UI/UX transverse - 2026-04-20

## Périmètre audité

Front React complet sous `src/components`:
- `agents/*`
- `projects/*`
- `tickets/*`
- `trackers/*`
- `settings/*`
- `layout/*`

## Incohérences détectées (avant refactor)

1. Boutons d'action dupliqués avec variations de couleurs et de tailles selon les pages (`bg-blue-600`, `bg-gray-900`, `bg-red-100`, etc.).
2. Champs de formulaire répétés avec plusieurs variantes de classes (`input`, `select`, `textarea`) non centralisées.
3. Cartes/blocs de contenu dupliqués (`rounded-lg border border-gray-200 bg-white p-4`) avec petites divergences de spacing.
4. Alertes (`error`, `warning`, `success`, `info`) construites page par page avec des styles proches mais non unifiés.
5. Badges de statut ticket réimplémentés dans plusieurs pages avec logique dupliquée et couverture de statuts non homogène.

## Composants réutilisés sur plusieurs pages

### 1) Boutons (multi-pages)

Usage sur:
- Agents: `AgentList`, `AgentForm`
- Projets: `ProjectForm`, `ProjectDashboard`, `ProjectGraylog`, `ProjectLiveAgent`, `ProjectModules`, `ProjectTasks`
- Tickets: `TicketList`, `TicketDetail`
- Trackers: `TrackerConfig`, `TrackerList`, `FilterBuilder`
- Settings: `SettingsPage`
- Layout: `WindowControls`, `NotificationCenter`
- UI: `ConfirmModal`

Unification appliquée:
- Ajout de `buttonClass()` dans [`src/components/ui/primitives.ts`](/home/leclere/Projets/IA/orchai/src/components/ui/primitives.ts)
- Variantes centralisées: `primary`, `secondary`, `danger`, `dangerSoft`, `neutralDark`, `success`, `ghost`
- Tailles centralisées: `xs`, `sm`, `md`, `icon`

### 2) Formulaires (input/select/textarea + labels)

Usage sur:
- `AgentForm`, `ProjectForm`, `SettingsPage`, `TrackerConfig`, `ProjectGraylog`, `ProjectLiveAgent`, `ProjectTasks`, `TicketDetail`, `FilterBuilder`

Unification appliquée:
- `labelClass`, `inputClass`, `textAreaClass` dans [`src/components/ui/primitives.ts`](/home/leclere/Projets/IA/orchai/src/components/ui/primitives.ts)
- Remplacement des classes inline répétées par ces styles partagés.

### 3) Cartes de contenu

Usage sur:
- `ProjectDashboard`, `ProjectGraylog`, `ProjectLiveAgent`, `ProjectModules`, `ProjectTasks`, `TrackerConfig`, `TrackerList`, `TicketList`, `TicketDetail`, `AgentList`

Unification appliquée:
- `cardClass` / `cardContentClass` dans [`src/components/ui/primitives.ts`](/home/leclere/Projets/IA/orchai/src/components/ui/primitives.ts)
- Réemploi des mêmes classes de surface sur les pages.

### 4) Alertes (erreur/succès/warning/info)

Usage sur:
- `AgentForm`, `AgentList`, `ProjectForm`, `ProjectGraylog`, `ProjectLiveAgent`, `ProjectModules`, `ProjectTasks`, `SettingsPage`, `TrackerConfig`, `TicketDetail`

Unification appliquée:
- `noticeClass(tone, compact)` dans [`src/components/ui/primitives.ts`](/home/leclere/Projets/IA/orchai/src/components/ui/primitives.ts)
- Tons standards: `error`, `success`, `warning`, `info`.

### 5) Badges de statut ticket

Usage sur:
- `TicketList`, `TicketDetail`, `ProjectDashboard`

Unification appliquée:
- Nouveau composant [`src/components/ui/TicketStatusBadge.tsx`](/home/leclere/Projets/IA/orchai/src/components/ui/TicketStatusBadge.tsx)
- Mapping de statuts mutualisé via `ticketStatusClass()`
- Suppression des mappings locaux dupliqués dans les pages tickets/dashboard.

## Méthode de génération commune

Oui, pour les composants réutilisés multi-pages identifiés, la génération du style passe désormais par une couche commune:
- `primitives.ts` pour les patterns UI transverses
- `TicketStatusBadge.tsx` pour les badges de statuts ticket

Cela réduit la divergence visuelle et simplifie les évolutions de design futures.

## Limites / reste à harmoniser

1. Certaines zones très contextuelles (ex: bulles de conversation live, badges de session archivée, blocs de diff) conservent des styles spécifiques, volontairement.
2. Une seconde passe peut encore factoriser quelques micro-patterns (ex: tabs, badges non-ticket, liens d'action inline) si nécessaire.