Pipeliner Client

## Brief de design — SOUPs Management (designer agent #27)

Module client **« SOUPs Management »** calqué sur **Security Ops (§SO)** — mêmes conventions Next.js App Router / TanStack Query / next-intl / Atomic Design. La section complète a été **ajoutée (additif uniquement)** au design-system : `docs/design/design-system.md` › section **« SOUPs Management (Pipeliner) »** (§SM.risk-map, SM.1, SM.donut, SM.2, SM.3c, SM.4, SM.privacy, SM.5, SM.i18n). Maquette filaire jointe : `soups-management-mockup.txt`.

### Atomic Design
- **Page / template** : `app/projects/[id]/soups/page.tsx` — shell §UR.1/§SO.1 verbatim (bande `← Overview` + nom projet centré `h1`). Atteinte via une **tuile Tools §PO.6** (Lucide `package-search`, stat clé = mot de risque global).
- **Organismes** : `SoupRiskOverview` (§SM.1a), `SoupComponentsTable` (§SM.2), `SoupComponentDetailDrawer` (§SM.3c), `SoupReportPanel` (§SM.4).
- **Molécules / atomes réutilisés** : `<TimeSeriesChart>` (seul importeur recharts), `SeverityBar` (§SO.2b), chips §SO.3a, segmented §TB.1, `HealthBadge`/`StatusPill` §6.1, Card §6.3, Radix `Select` §v2.5, `TextInput type=date` §7b.2, `SectionError` §PO.7. **Nouvel atome** : `SoupRiskDonut` (donut **SVG natif — PAS recharts**).

### Vue d'ensemble (§SM.1a)
Carte de **niveau de risque global** (mot+pastille+rail, 🔴/🟠/🟢 décoratifs `aria-hidden`), **donut SVG de répartition** (`breakdown`), **courbe 30 j** via `<TimeSeriesChart>` (2 lignes Critical/High), **Top 3 risques critiques** (`top_critical`, liens advisory). Sélecteur 7/30/90 j (défaut 30 j).

### Détail composants (§SM.2)
`<table>` triable **card-owns-scroll** (`min-w-[48rem]`), **filtrable par risque / statut / date**, pagination serveur (milliers de lignes). Chaque ligne : Component, Version, Risk (pastille), Status (pastille), Last seen (relatif §PK.4), **« Voir détails »** → drawer latéral droit (§SM.3c, `role=dialog`, `?component=`).

### Rapports (§SM.4)
`SoupReportPanel` : choix de standard **IEC 62304 (medtech) / PCI DSS (fintech) / Generic**, boutons **Download PDF** + **Download Excel** → `GET /api/projects/{id}/soups/report?standard=&format=` (proxy `owned_project` → aggregator → Dependency-Track, blob `Content-Disposition: attachment`). Lien **`View CycloneDX SBOM ↗`** = `report_url` de l'enveloppe (omis si `null`).

### États
empty / loading / error couverts par section (squelettes §SO.5, `SectionError` section-scoped + Retry, `Collecting history…`, `No components match these filters.`, `No SOUP data yet for this project.`).

### Tokens / couleurs
**Aucune nouvelle couleur** (100 % tokens §2/§3, base **v2.3**). `SM.risk-map` = la `§SO.severity-map`/`§SO.1a` vérifiée : 🔴 critical→`danger`, 🟠 high→`warning` (ambre « Attention »), 🟠 medium→`warning` doux, 🟢 low→neutre, 🟢 clean→`success`. **Gotcha #6** honorée : rouge « Down » réservé aux pannes — ici `danger` = sévérité, pas outage. Niveau **toujours porté par le mot + la pastille**, jamais la couleur seule (§7).

### Faux positifs / champs supprimés (§SM.privacy)
**Jamais affichés** côté client (filtrés serveur). **Au plus un compteur** neutre `{n} items suppressed` — aucune liste, aucun lien, aucun bouton « voir les supprimés ».

### Charts & i18n
- Courbe via le **seul** wrapper `src/components/atoms/TimeSeriesChart.tsx` (aucun autre import recharts) ; donut = **SVG natif**.
- **Clés i18n** : nouveau namespace **`soups`** ajouté à **`en.ts` uniquement** (`fr.ts` réexporte `en.ts` — jamais de FR séparé). Liste complète dans §SM.i18n.

**Statut → Design.** Le FE est en attente de la dépendance backend (« Proxy backend Pipeliner `owned_project` pour les SOUPs »).