From a0f47bf9668d31f339d214d21a863d1a7d9a48c8 Mon Sep 17 00:00:00 2001 From: Gilles Soulier Date: Fri, 22 May 2026 08:13:53 +0200 Subject: [PATCH] feat: add plans, design system, CONSIGNE and brainstorm assets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajoute les trois plans d'implémentation (agent Rust, serveur Go, dashboard), les consignes de design, les fichiers de brainstorming et le .gitignore. Co-Authored-By: Claude Sonnet 4.6 --- .gitignore | 1 + .../599106-1779425616/content/approaches.html | 44 + .../599106-1779425616/content/waiting.html | 4 + .../599106-1779425616/state/server-info | 1 + .../599687-1779425985/content/approaches.html | 44 + .../599687-1779425985/content/layout-v2.html | 646 ++++++ .../599687-1779425985/content/layout-v3.html | 602 ++++++ .../599687-1779425985/content/layout-v4.html | 541 +++++ .../599687-1779425985/content/layout-v5.html | 577 ++++++ .../599687-1779425985/content/layout-v6.html | 551 ++++++ .../599687-1779425985/content/layout-v7.html | 634 ++++++ .../599687-1779425985/content/layout-v8.html | 672 +++++++ .../599687-1779425985/content/layout-v9.html | 673 +++++++ .../599687-1779425985/content/layout.html | 360 ++++ .../599687-1779425985/state/server-info | 1 + .../599687-1779425985/state/server.log | 26 + .../599687-1779425985/state/server.pid | 1 + CONSIGNE.md | 41 + design_system/README.md | 304 +++ design_system/components/ui-kit.jsx | 656 +++++++ design_system/consigne_design_system.md | 363 ++++ design_system/examples/exemple-minimal.html | 115 ++ design_system/examples/exemple-tout.html | 1015 ++++++++++ design_system/tokens/tokens.css | 204 ++ design_system/tokens/tokens.gnome.css | 378 ++++ design_system/tokens/tokens.json | 136 ++ .../2026-05-22-nanometrics-agent-rust.md | 1351 +++++++++++++ .../plans/2026-05-22-nanometrics-dashboard.md | 1381 +++++++++++++ .../plans/2026-05-22-nanometrics-server-go.md | 1746 +++++++++++++++++ 29 files changed, 13068 insertions(+) create mode 100644 .gitignore create mode 100644 .superpowers/brainstorm/599106-1779425616/content/approaches.html create mode 100644 .superpowers/brainstorm/599106-1779425616/content/waiting.html create mode 100644 .superpowers/brainstorm/599106-1779425616/state/server-info create mode 100644 .superpowers/brainstorm/599687-1779425985/content/approaches.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v2.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v3.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v4.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v5.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v6.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v7.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v8.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout-v9.html create mode 100644 .superpowers/brainstorm/599687-1779425985/content/layout.html create mode 100644 .superpowers/brainstorm/599687-1779425985/state/server-info create mode 100644 .superpowers/brainstorm/599687-1779425985/state/server.log create mode 100644 .superpowers/brainstorm/599687-1779425985/state/server.pid create mode 100644 CONSIGNE.md create mode 100644 design_system/README.md create mode 100644 design_system/components/ui-kit.jsx create mode 100644 design_system/consigne_design_system.md create mode 100644 design_system/examples/exemple-minimal.html create mode 100644 design_system/examples/exemple-tout.html create mode 100644 design_system/tokens/tokens.css create mode 100644 design_system/tokens/tokens.gnome.css create mode 100644 design_system/tokens/tokens.json create mode 100644 docs/superpowers/plans/2026-05-22-nanometrics-agent-rust.md create mode 100644 docs/superpowers/plans/2026-05-22-nanometrics-dashboard.md create mode 100644 docs/superpowers/plans/2026-05-22-nanometrics-server-go.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f5b6a04 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +repo.md diff --git a/.superpowers/brainstorm/599106-1779425616/content/approaches.html b/.superpowers/brainstorm/599106-1779425616/content/approaches.html new file mode 100644 index 0000000..595a161 --- /dev/null +++ b/.superpowers/brainstorm/599106-1779425616/content/approaches.html @@ -0,0 +1,44 @@ +

Approches architecturales

+

Base de données + protocole temps réel — choisir une approche

+ +
+
+
A
+
+

SQLite + SSE

+

SQLite — fichier unique, pas de conteneur supplémentaire, SQL classique.
+ Server-Sent Events — flux unidirectionnel serveur→browser, plus simple que WebSocket.

+
+

Avantages

  • Zéro dépendance supplémentaire
  • Déploiement ultra-simple
  • SSE natif dans les browsers modernes
+

Limites

  • Performances sur gros volumes de séries temporelles
  • SSE unidirectionnel (pas d'envoi de commandes futures)
+
+
+
+ +
+
B
+
+

InfluxDB + WebSocket

+

InfluxDB — time-series DB optimisée, requêtes temporelles puissantes.
+ WebSocket — bidirectionnel, extensible pour des commandes futures vers les agents.

+
+

Avantages

  • Optimisé pour les métriques temporelles
  • WebSocket = extensible (alertes, commandes)
  • Grafana compatible nativement
+

Limites

+
  • Conteneur InfluxDB supplémentaire dans le compose
  • Courbe d'apprentissage Flux/InfluxQL
+
+
+
+ +
+
C
+
+

SQLite + WebSocket ⭐ Recommandé

+

SQLite — simplicité opérationnelle, suffisant pour 20+ agents avec rétention configurable.
+ WebSocket — bidirectionnel dès le départ, sans surcoût opérationnel.

+
+

Avantages

  • Pas de conteneur DB supplémentaire
  • WebSocket prêt pour extensions futures
  • Simple à debugger et sauvegarder
+

Limites

  • Requêtes temporelles moins expressives qu'InfluxDB
  • Scalabilité limitée au-delà de ~100 agents
+
+
+
+
diff --git a/.superpowers/brainstorm/599106-1779425616/content/waiting.html b/.superpowers/brainstorm/599106-1779425616/content/waiting.html new file mode 100644 index 0000000..99c14a1 --- /dev/null +++ b/.superpowers/brainstorm/599106-1779425616/content/waiting.html @@ -0,0 +1,4 @@ +
+

⚙️

+

Brainstorming Nanometrics — questions en cours dans le terminal...

+
diff --git a/.superpowers/brainstorm/599106-1779425616/state/server-info b/.superpowers/brainstorm/599106-1779425616/state/server-info new file mode 100644 index 0000000..bf9536a --- /dev/null +++ b/.superpowers/brainstorm/599106-1779425616/state/server-info @@ -0,0 +1 @@ +{"type":"server-started","port":60787,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:60787","screen_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599106-1779425616/content","state_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599106-1779425616/state"} diff --git a/.superpowers/brainstorm/599687-1779425985/content/approaches.html b/.superpowers/brainstorm/599687-1779425985/content/approaches.html new file mode 100644 index 0000000..595a161 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/approaches.html @@ -0,0 +1,44 @@ +

Approches architecturales

+

Base de données + protocole temps réel — choisir une approche

+ +
+
+
A
+
+

SQLite + SSE

+

SQLite — fichier unique, pas de conteneur supplémentaire, SQL classique.
+ Server-Sent Events — flux unidirectionnel serveur→browser, plus simple que WebSocket.

+
+

Avantages

  • Zéro dépendance supplémentaire
  • Déploiement ultra-simple
  • SSE natif dans les browsers modernes
+

Limites

  • Performances sur gros volumes de séries temporelles
  • SSE unidirectionnel (pas d'envoi de commandes futures)
+
+
+
+ +
+
B
+
+

InfluxDB + WebSocket

+

InfluxDB — time-series DB optimisée, requêtes temporelles puissantes.
+ WebSocket — bidirectionnel, extensible pour des commandes futures vers les agents.

+
+

Avantages

  • Optimisé pour les métriques temporelles
  • WebSocket = extensible (alertes, commandes)
  • Grafana compatible nativement
+

Limites

+
  • Conteneur InfluxDB supplémentaire dans le compose
  • Courbe d'apprentissage Flux/InfluxQL
+
+
+
+ +
+
C
+
+

SQLite + WebSocket ⭐ Recommandé

+

SQLite — simplicité opérationnelle, suffisant pour 20+ agents avec rétention configurable.
+ WebSocket — bidirectionnel dès le départ, sans surcoût opérationnel.

+
+

Avantages

  • Pas de conteneur DB supplémentaire
  • WebSocket prêt pour extensions futures
  • Simple à debugger et sauvegarder
+

Limites

  • Requêtes temporelles moins expressives qu'InfluxDB
  • Scalabilité limitée au-delà de ~100 agents
+
+
+
+
diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v2.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v2.html new file mode 100644 index 0000000..f8dcc11 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v2.html @@ -0,0 +1,646 @@ + + + + + +Nanometrics — Layout A v2 + + + + + + + + +
+ + +
+ +
+
+ AGENTS + 8 +
+
+ OK + 5 +
+
+ WARN + 2 +
+
+ ERR + 1 +
+
+ +
+ + +
+ + Basculer thème +
+ + +
+ + Configuration serveur +
+
+ + +
+
+ + +
+
+
+
+
srv-prod-01
+
10.0.0.11
+
+
+
+
+
CPU
42%
+
RAM
58%
+
DISK
31%
+
+
+ 14j 6h +
+
+ + +
+
+
+
+
srv-backup-02
+
10.0.0.12
+
+
+
+
+
CPU
78%
+
RAM
72%
+
DISK
20%
+
+
+ 3j 14h +
+
+ + +
+
+
+
+
rpi-sensor-03
+
10.0.0.23
+
+
+
+
+
CPU
12%
+
RAM
38%
+
DISK
94%
+
+
+ 62j 1h +
+
+ + +
+
+
+
+
nas-storage-04
+
10.0.0.30
+
+
+
+
+
CPU
8%
+
RAM
45%
+
DISK
66%
+
+
+ 128j 3h +
+
+ + +
+
+
+
+
db-primary-05
+
10.0.0.40
+
+
+
+
+
CPU
25%
+
RAM
61%
+
DISK
48%
+
+
+ 7j 22h +
+
+ + +
+
+
+
+
web-front-06
+
10.0.0.51
+
+
+
+
+
CPU
71%
+
RAM
55%
+
DISK
28%
+
+
+ 21j 8h +
+
+ + +
+
+
+
+
srv-dev-07
+
10.0.0.60
+
+
+
+
+
CPU
—
+
RAM
—
+
DISK
—
+
+
+ Hors ligne · vu il y a 2h +
+
+ + +
+
+
+
+
gateway-08
+
10.0.0.1
+
+
+
+
+
CPU
5%
+
RAM
22%
+
DISK
15%
+
+
+ 365j 0h +
+
+ +
+
+ + +
+
LIVE
+
+ + SERVEUR +
+
+ + CPU + 18% + +
+
+ + MEM + 71% + +
+
+
+ + Dernière actualisation : 22:14:07 +
+
+ + + + + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v3.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v3.html new file mode 100644 index 0000000..d1bbda2 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v3.html @@ -0,0 +1,602 @@ + + + + + +Nanometrics — Layout v3 + + + + + + + + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+ + Thème clair / sombre +
+
+ + Configuration interface +
+
+ + +
+
+ + +
+
+
+
srv-prod-01
10.0.0.11
+
+
+
+
+
Processeur (CPU)
+
+ 42% +
+
+
Mémoire RAM
+
+ 58% +
+
+
Espace disque
+
+ 31% +
+
+
14j 6h
+
+ + +
+
+
+
srv-backup-02
10.0.0.12
+
+
+
+
+
Processeur (CPU) — élevé
+
+ 78% +
+
+
Mémoire RAM — élevée
+
+ 72% +
+
+
Espace disque
+
+ 20% +
+
+
3j 14h
+
+ + +
+
+
+
rpi-sensor-03
10.0.0.23
+
+
+
+
+
Processeur (CPU)
+
+ 12% +
+
+
Mémoire RAM
+
+ 38% +
+
+
Disque critique !
+
+ 94% +
+
+
62j 1h
+
+ + +
+
+
+
nas-storage-04
10.0.0.30
+
+
+
+
+
Processeur (CPU)
+
+ 8% +
+
+
Mémoire RAM
+
+ 45% +
+
+
Espace disque
+
+ 66% +
+
+
128j 3h
+
+ + +
+
+
+
db-primary-05
10.0.0.40
+
+
+
+
+
Processeur (CPU)
+
+ 25% +
+
+
Mémoire RAM
+
+ 61% +
+
+
Espace disque
+
+ 48% +
+
+
7j 22h
+
+ + +
+
+
+
web-front-06
10.0.0.51
+
+
+
+
+
Processeur (CPU) — élevé
+
+ 71% +
+
+
Mémoire RAM
+
+ 55% +
+
+
Espace disque
+
+ 28% +
+
+
21j 8h
+
+ + +
+
+
+
srv-dev-07
10.0.0.60
+
+
+
+
+
Processeur (CPU)
+
— +
+
+
Mémoire RAM
+
— +
+
+
Espace disque
+
— +
+
+
Hors ligne · vu il y a 2h
+
+ + +
+
+
+
gateway-08
10.0.0.1
+
+
+
+
+
Processeur (CPU)
+
+ 5% +
+
+
Mémoire RAM
+
+ 22% +
+
+
Espace disque
+
+ 15% +
+
+
365j 0h
+
+ +
+
+ + +
+
LIVE
+
SERVEUR
+
+ + 18% +
+
+
+ + 71% +
+
+
+
+ + Actualisation : 22:14:07 +
+
+ + + + + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v4.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v4.html new file mode 100644 index 0000000..9d3fe62 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v4.html @@ -0,0 +1,541 @@ + + + + + +Nanometrics — Layout v4 + + + + + + + + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+ + Thème clair / sombre +
+
+ + Configuration interface +
+
+ + +
+
+
+
+
+
srv-prod-01
10.0.0.11
+
+
+
+
Processeur (CPU)
42%
+
Mémoire RAM
58%
+
Espace disque
31%
+
+
14j 6h
+
+
+
+
+
srv-backup-02
10.0.0.12
+
+
+
+
CPU — élevé
78%
+
RAM — élevée
72%
+
Espace disque
20%
+
+
3j 14h
+
+
+
+
+
rpi-sensor-03
10.0.0.23
+
+
+
+
CPU
12%
+
RAM
38%
+
Disque critique !
94%
+
+
62j 1h
+
+
+
+
+
nas-storage-04
10.0.0.30
+
+
+
+
CPU
8%
+
RAM
45%
+
Disque
66%
+
+
128j 3h
+
+
+
+
+
db-primary-05
10.0.0.40
+
+
+
+
CPU
25%
+
RAM
61%
+
Disque
48%
+
+
7j 22h
+
+
+
+
+
web-front-06
10.0.0.51
+
+
+
+
CPU — élevé
71%
+
RAM
55%
+
Disque
28%
+
+
21j 8h
+
+
+
+
+
srv-dev-07
10.0.0.60
+
+
+
+
—
+
—
+
—
+
+
Hors ligne · vu il y a 2h
+
+
+
+
+
gateway-08
10.0.0.1
+
+
+
+
CPU
5%
+
RAM
22%
+
Disque
15%
+
+
365j 0h
+
+
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v5.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v5.html new file mode 100644 index 0000000..1db7eb5 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v5.html @@ -0,0 +1,577 @@ + + + + + +Nanometrics — Layout v5 + + + + + + + + +
+ + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
srv-prod-01
10.0.0.11
+
+
+
+
42%
+
58%
+
31%
+
+
14j 6h
+
+ +
+
+
+
srv-backup-02
10.0.0.12
+
+
+
+
78%
+
72%
+
20%
+
+
3j 14h
+
+ +
+
+
+
rpi-sensor-03
10.0.0.23
+
+
+
+
12%
+
38%
+
94%
+
+
62j 1h
+
+ +
+
+
+
nas-storage-04
10.0.0.30
+
+
+
+
8%
+
45%
+
66%
+
+
128j 3h
+
+ +
+
+
+
db-primary-05
10.0.0.40
+
+
+
+
25%
+
61%
+
48%
+
+
7j 22h
+
+ +
+
+
+
web-front-06
10.0.0.51
+
+
+
+
71%
+
55%
+
28%
+
+
21j 8h
+
+ +
+
+
+
srv-dev-07
10.0.0.60
+
+
+
+
—
+
—
+
—
+
+
Hors ligne · vu il y a 2h
+
+ +
+
+
+
gateway-08
10.0.0.1
+
+
+
+
5%
+
22%
+
15%
+
+
365j 0h
+
+ +
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v6.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v6.html new file mode 100644 index 0000000..45b1dbb --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v6.html @@ -0,0 +1,551 @@ + + + + + +Nanometrics — Layout v6 — Config agent + + + + + + +
+ + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+
+
+ + +
+
+
+
srv-prod-01
10.0.0.11
+
+
42%
+
58%
+
31%
+
+
14j 6h
+
+
+
srv-backup-02
10.0.0.12
+
+
78%
+
72%
+
20%
+
+
3j 14h
+
+
+
rpi-sensor-03
10.0.0.23
+
+
12%
+
38%
+
94%
+
+
62j 1h
+
+
nas-storage-04
10.0.0.30
8%
45%
66%
128j 3h
+
db-primary-05
10.0.0.40
25%
61%
48%
7j 22h
+
srv-dev-07
10.0.0.60
—
—
—
Hors ligne · vu il y a 2h
+
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + +
+ +
+ + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v7.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v7.html new file mode 100644 index 0000000..d332406 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v7.html @@ -0,0 +1,634 @@ + + + + + +Nanometrics — v7 + + + + + + +
+ + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+
+
+ + +
+
+
+
srv-prod-01
10.0.0.11
+
+
42%
+
58%
+
31%
+
+
14j 6h
+
+
srv-backup-02
10.0.0.12
78%
72%
20%
3j 14h
+
rpi-sensor-03
10.0.0.23
12%
38%
94%
62j 1h
+
nas-storage-04
10.0.0.30
8%
45%
66%
128j 3h
+
srv-dev-07
10.0.0.60
—
—
—
Hors ligne · vu il y a 2h
+
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + +
+ +
+ + + + + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v8.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v8.html new file mode 100644 index 0000000..eaa46b0 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v8.html @@ -0,0 +1,672 @@ + + + + + +Nanometrics — v8 + + + + + + +
+ + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+ +
+
+ + +
+
+
+
srv-prod-01
10.0.0.11
+
+
42%
+
58%
+
31%
+
+
14j 6h
+
+
srv-backup-02
10.0.0.12
78%
72%
20%
3j 14h
+
rpi-sensor-03
10.0.0.23
12%
38%
94%
62j 1h
+
nas-storage-04
10.0.0.30
8%
45%
66%
128j 3h
+
srv-dev-07
10.0.0.60
—
—
—
Hors ligne · vu il y a 2h
+
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + + + + +
+ +
+ + + + + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout-v9.html b/.superpowers/brainstorm/599687-1779425985/content/layout-v9.html new file mode 100644 index 0000000..7951898 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout-v9.html @@ -0,0 +1,673 @@ + + + + + +Nanometrics — v9 + + + + + + +
+ + +
+ +
+
+
AGENTS8
+
OK5
+
WARN2
+
ERR1
+
+
+
+
+
+ + +
+
+
+
srv-prod-01
10.0.0.11
+
+
42%
+
58%
+
31%
+
+
14j 6h
+
+
srv-backup-02
10.0.0.12
78%
72%
20%
3j 14h
+
rpi-sensor-03
10.0.0.23
12%
38%
94%
62j 1h
+
nas-storage-04
10.0.0.30
8%
45%
66%
128j 3h
+
srv-dev-07
10.0.0.60
—
—
—
Hors ligne · vu il y a 2h
+
+
+ + +
+
LIVE
+
SERVEUR
+
18%
+
71%
+
+
Actualisation : 22:14:07
+
+ + + + + +
+ +
+ + + + + + + + + + diff --git a/.superpowers/brainstorm/599687-1779425985/content/layout.html b/.superpowers/brainstorm/599687-1779425985/content/layout.html new file mode 100644 index 0000000..8905d2a --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/content/layout.html @@ -0,0 +1,360 @@ + + + + + +Nanometrics — Layout du dashboard + + + + + + +
+

Layout du dashboard Nanometrics

+

Clique sur le layout qui te correspond le mieux

+
+ +
+ + +
+
+
A
+
+
Grille uniforme
+
Toutes les tuiles identiques, adaptatives
+
+
+
+
+
NANOMETRICS22:14:05
+
+
+
⬡srv-01
+
CPU
42%
+
RAM
74%
+
DSK
31%
+
+
+
⬡srv-02
+
CPU
78%
+
RAM
55%
+
DSK
20%
+
+
+
⬡rpi-03
+
CPU
12%
+
RAM
38%
+
DSK
91%
+
+
+
⬡nas-04
+
CPU
8%
+
RAM
60%
+
DSK
44%
+
+
+
+
LIVE
+
4 agents
+
3 ok · 1 warn
+
22:14:05
+
+
+
+
+ + +
+
+
B
+
+
Sidebar + grille
+
Liste des agents à gauche, tuiles à droite
+
+
+
+
+
NANOMETRICS22:14:05
+
+
+
srv-01
+
srv-02
+
rpi-03
+
nas-04
+
db-05
+
web-06
+
+
+
+
⬡srv-01
+
CPU
42%
+
RAM
74%
+
DSK
31%
+
+
+
⬡srv-02
+
CPU
78%
+
RAM
55%
+
DSK
20%
+
+
+
⬡rpi-03
+
CPU
12%
+
RAM
38%
+
DSK
91%
+
+
+
+
+
LIVE
+
6 agents
+
4 ok · 1 warn · 1 err
+
22:14:05
+
+
+
+
+ + +
+
+
C
+
+
3 colonnes (ops-style)
+
Tree nav · cockpit KPI · logs live
+
+
+
+
+
NANOMETRICS22:14:05
+
+
+
AGENTS
+
srv-01
+
srv-02
+
rpi-03
+
nas-04
+
db-05
+
+
+
+
CPU
+
42%
+
+
+
+
MÉMOIRE
+
74%
+
+
+
+
DISQUE
+
31%
+
+
+
+
UPTIME
+
14j 6h
+
depuis dernier boot
+
+
+
+
22:14:05 srv-01 online
+
22:13:58 srv-02 cpu>75%
+
22:13:41 rpi-03 disk>90%
+
22:13:30 nas-04 online
+
22:13:22 db-05 online
+
22:12:55 srv-02 cpu>70%
+
22:12:40 web-06 online
+
+
+
+
LIVE
+
srv-01 sélectionné
+
5 ok · 1 warn · 1 err
+
22:14:05
+
+
+
+
+ +
+ +
+ Nanometrics — Layout du dashboard + Clique sur un layout pour le sélectionner +
+ + + diff --git a/.superpowers/brainstorm/599687-1779425985/state/server-info b/.superpowers/brainstorm/599687-1779425985/state/server-info new file mode 100644 index 0000000..470cd88 --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/state/server-info @@ -0,0 +1 @@ +{"type":"server-started","port":55731,"host":"0.0.0.0","url_host":"10.0.0.50","url":"http://10.0.0.50:55731","screen_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content","state_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/state"} diff --git a/.superpowers/brainstorm/599687-1779425985/state/server.log b/.superpowers/brainstorm/599687-1779425985/state/server.log new file mode 100644 index 0000000..3ad7a9b --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/state/server.log @@ -0,0 +1,26 @@ +{"type":"server-started","port":55731,"host":"0.0.0.0","url_host":"10.0.0.50","url":"http://10.0.0.50:55731","screen_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content","state_dir":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/state"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/approaches.html"} +{"source":"user-event","type":"click","text":"C\n \n SQLite + WebSocket ⭐ Recommandé\n SQLite — simplicité opérationnelle, suffisant pour 20+ agents avec rétention configurable.\n WebSocket — bidirectionnel dès le départ, sans surcoût opérationnel.\n \n AvantagesPas de conteneur DB supplémentaireWebSocket prêt pour extensions futuresSimple à debugger et sauvegarder\n LimitesRequêtes temporelles moins expressives qu'InfluxDBScalabilité limitée au-delà de ~100 agents","choice":"c","id":null,"timestamp":1779426035162} +{"source":"user-event","type":"click","text":"C\n \n SQLite + WebSocket ⭐ Recommandé\n SQLite — simplicité opérationnelle, suffisant pour 20+ agents avec rétention configurable.\n WebSocket — bidirectionnel dès le départ, sans surcoût opérationnel.\n \n AvantagesPas de conteneur DB supplémentaireWebSocket prêt pour extensions futuresSimple à debugger et sauvegarder\n LimitesRequêtes temporelles moins expressives qu'InfluxDBScalabilité limitée au-delà de ~100 agents","choice":"c","id":null,"timestamp":1779426056446} +{"source":"user-event","type":"click","text":"C\n \n SQLite + WebSocket ⭐ Recommandé\n SQLite — simplicité opérationnelle, suffisant pour 20+ agents avec rétention configurable.\n WebSocket — bidirectionnel dès le départ, sans surcoût opérationnel.\n \n AvantagesPas de conteneur DB supplémentaireWebSocket prêt pour extensions futuresSimple à debugger et sauvegarder\n LimitesRequêtes temporelles moins expressives qu'InfluxDBScalabilité limitée au-delà de ~100 agents","choice":"c","id":null,"timestamp":1779426057055} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout.html"} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426189689} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426247715} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426255628} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426320054} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426600975} +{"source":"user-event","type":"click","text":"B\n \n Sidebar + grille\n Liste des agents à gauche, tuiles à droite\n \n \n \n \n NANOMETRICS22:14:05\n \n \n srv-01\n srv-02\n rpi-03\n nas-04\n db-05\n web-06\n \n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n \n \n LIVE\n 6 agents\n 4 ok · 1 warn · 1 err\n 22:14:05","choice":"b","id":null,"timestamp":1779426601678} +{"source":"user-event","type":"click","text":"C\n \n 3 colonnes (ops-style)\n Tree nav · cockpit KPI · logs live\n \n \n \n \n NANOMETRICS22:14:05\n \n \n AGENTS\n srv-01\n srv-02\n rpi-03\n nas-04\n db-05\n \n \n \n CPU\n 42%\n \n \n \n MÉMOIRE\n 74%\n \n \n \n DISQUE\n 31%\n \n \n \n UPTIME\n 14j 6h\n depuis dernier boot\n \n \n \n 22:14:05 srv-01 online\n 22:13:58 srv-02 cpu>75%\n 22:13:41 rpi-03 disk>90%\n 22:13:30 nas-04 online\n 22:13:22 db-05 online\n 22:12:55 srv-02 cpu>70%\n 22:12:40 web-06 online\n \n \n \n LIVE\n srv-01 sélectionné\n 5 ok · 1 warn · 1 err\n 22:14:05","choice":"c","id":null,"timestamp":1779426603020} +{"source":"user-event","type":"click","text":"C\n \n 3 colonnes (ops-style)\n Tree nav · cockpit KPI · logs live\n \n \n \n \n NANOMETRICS22:14:05\n \n \n AGENTS\n srv-01\n srv-02\n rpi-03\n nas-04\n db-05\n \n \n \n CPU\n 42%\n \n \n \n MÉMOIRE\n 74%\n \n \n \n DISQUE\n 31%\n \n \n \n UPTIME\n 14j 6h\n depuis dernier boot\n \n \n \n 22:14:05 srv-01 online\n 22:13:58 srv-02 cpu>75%\n 22:13:41 rpi-03 disk>90%\n 22:13:30 nas-04 online\n 22:13:22 db-05 online\n 22:12:55 srv-02 cpu>70%\n 22:12:40 web-06 online\n \n \n \n LIVE\n srv-01 sélectionné\n 5 ok · 1 warn · 1 err\n 22:14:05","choice":"c","id":null,"timestamp":1779426603540} +{"source":"user-event","type":"click","text":"B\n \n Sidebar + grille\n Liste des agents à gauche, tuiles à droite\n \n \n \n \n NANOMETRICS22:14:05\n \n \n srv-01\n srv-02\n rpi-03\n nas-04\n db-05\n web-06\n \n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n \n \n LIVE\n 6 agents\n 4 ok · 1 warn · 1 err\n 22:14:05","choice":"b","id":null,"timestamp":1779426604201} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426605083} +{"source":"user-event","type":"click","text":"A\n \n Grille uniforme\n Toutes les tuiles identiques, adaptatives\n \n \n \n \n NANOMETRICS22:14:05\n \n \n ⬡srv-01\n CPU42%\n RAM74%\n DSK31%\n \n \n ⬡srv-02\n CPU78%\n RAM55%\n DSK20%\n \n \n ⬡rpi-03\n CPU12%\n RAM38%\n DSK91%\n \n \n ⬡nas-04\n CPU8%\n RAM60%\n DSK44%\n \n \n \n LIVE\n 4 agents\n 3 ok · 1 warn\n 22:14:05","choice":"a","id":null,"timestamp":1779426608505} +{"source":"user-event","type":"click","text":"C\n \n 3 colonnes (ops-style)\n Tree nav · cockpit KPI · logs live\n \n \n \n \n NANOMETRICS22:14:05\n \n \n AGENTS\n srv-01\n srv-02\n rpi-03\n nas-04\n db-05\n \n \n \n CPU\n 42%\n \n \n \n MÉMOIRE\n 74%\n \n \n \n DISQUE\n 31%\n \n \n \n UPTIME\n 14j 6h\n depuis dernier boot\n \n \n \n 22:14:05 srv-01 online\n 22:13:58 srv-02 cpu>75%\n 22:13:41 rpi-03 disk>90%\n 22:13:30 nas-04 online\n 22:13:22 db-05 online\n 22:12:55 srv-02 cpu>70%\n 22:12:40 web-06 online\n \n \n \n LIVE\n srv-01 sélectionné\n 5 ok · 1 warn · 1 err\n 22:14:05","choice":"c","id":null,"timestamp":1779426641935} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v2.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v3.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v4.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v5.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v6.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v7.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v8.html"} +{"type":"screen-added","file":"/home/gilles/projects/nano_metrics/.superpowers/brainstorm/599687-1779425985/content/layout-v9.html"} diff --git a/.superpowers/brainstorm/599687-1779425985/state/server.pid b/.superpowers/brainstorm/599687-1779425985/state/server.pid new file mode 100644 index 0000000..8d1dd1f --- /dev/null +++ b/.superpowers/brainstorm/599687-1779425985/state/server.pid @@ -0,0 +1 @@ +599695 diff --git a/CONSIGNE.md b/CONSIGNE.md new file mode 100644 index 0000000..2cdd307 --- /dev/null +++ b/CONSIGNE.md @@ -0,0 +1,41 @@ +Projet : Nano-Telemetry - Directives de Développement (CONSIGNE.md) +Rôle et Contexte + +tu pourra faire un brainstorming, tu me parlera en francais, l app et les commentaire en francais, tu realisera un plan de devellopement. n hesite pas a utiliser internet pour tes recherches et verifier les deniere version et pour le debuggage + +Tu es un agent de développement IA chargé de créer "Nano-Telemetry", un système client-serveur de surveillance matérielle. L'objectif absolu de ce projet est de concevoir un agent de collecte de métriques (CPU, RAM, Espace Disque) ayant une empreinte système la plus proche possible de zéro sur des machines Debian, et de transmettre ces données sur un réseau local vers un serveur d'agrégation. +Ligne de Conduite 1 : L'Agent de Télémétrie (Rust) + + Langage et Empreinte : L'agent doit être écrit en Rust. L'objectif est d'éviter tout ramasse-miettes (Garbage Collector) pour garantir une utilisation mémoire déterministe et une consommation CPU résiduelle. + + Optimisation de Compilation : Configure le fichier Cargo.toml avec un profil de type "release" strict. Utilise les options strip = true pour supprimer les symboles de débogage, opt-level = "z" pour optimiser la taille du binaire, et lto = true pour l'optimisation à l'édition des liens. + + Collecte des données : Utilise la bibliothèque sysinfo, mais tu dois impérativement désactiver ses fonctionnalités par défaut (default-features = false) pour empêcher le lancement de multiples threads en arrière-plan, ce qui augmenterait inutilement l'empreinte mémoire. + + Orchestration Temporelle : N'inclus aucun moteur asynchrone (comme Tokio). Les fréquences d'actualisation différenciées (ex: CPU toutes les 2s, Disque toutes les 60s) doivent être gérées via une boucle mono-thread utilisant des pauses natives std::thread::sleep pour suspendre complètement le processus. + + Configuration : Implémente la lecture d'un fichier config.toml externe via la bibliothèque serde pour paramétrer dynamiquement l'adresse IP du serveur cible (10.0.0.50) et les métriques à activer. + + Transport : Utilise le protocole UDP pour expédier les charges utiles (payloads) en JSON, privilégiant la vitesse sans état (modèle fire-and-forget) sur un réseau local. + +Ligne de Conduite 2 : Le Serveur d'Ingestion (Go) + + Langage : Le serveur central doit être écrit en Go (Golang) pour profiter de son modèle de concurrence ultra-performant sur les opérations réseau. + + Traitement Réseau : Crée un écouteur UDP. Dès la réception d'un datagramme, déclenche une nouvelle goroutine asynchrone pour traiter la désérialisation JSON afin d'éviter tout goulot d'étranglement lors de réceptions simultanées massives. + + Observabilité : Utilise le paquet standard github.com/prometheus/client_golang pour convertir les données reçues en jauges (Gauges) Prometheus en mémoire vive, et expose ces métriques sur un endpoint HTTP standard /metrics. + +Ligne de Conduite 3 : Déploiement et Sécurité (Systemd sous Debian) + + Confinement : Fournis un fichier unitaire de service systemd pour déployer l'agent Rust sur les machines cibles. + + Moindre Privilège : Intègre la directive DynamicUser=yes, qui génère un utilisateur éphémère et applique automatiquement des sécurités matérielles telles que ProtectSystem=strict et ProtectHome=read-only pour verrouiller l'accès au disque. + + Accès Configuration : Utilise la directive ConfigurationDirectory= afin que ce service confiné puisse lire son fichier TOML de manière sécurisée. + +Ligne de Conduite 4 : Intégration du Design Graphique (UI/UX) + + Ressources Graphiques : Le répertoire du projet contient un dossier nommé design_system. + + Application Stricte : Pour toute interface visuelle, tableau de bord, ou composant web (éventuellement servi par l'application Go pour visualiser l'état du serveur), tu dois strictement et obligatoirement te baser sur les fichiers contenus dans ce dossier design_system. Tu dois respecter la charte graphique, les palettes de couleurs, les polices de caractères et la structure des composants (CSS/Assets) qui s'y trouvent. diff --git a/design_system/README.md b/design_system/README.md new file mode 100644 index 0000000..a0ee628 --- /dev/null +++ b/design_system/README.md @@ -0,0 +1,304 @@ +# mon design system — Gruvbox seventies + +> Design system rétro-futuriste pour applications de monitoring, ops, IoT, domotique. +> Orange brûlé, fond brun délavé en sombre / gris clair usé en clair. +> **Version 1.0** · deux thèmes (dark + light), 14+ composants React, palette GTK pour GNOME. + +--- + +## 🚀 Démarrage rapide (web) + +```html + + + + + + + + + + + + + + + + + + +
+ + + + + +``` + +Pour voir tout fonctionner, ouvre `examples/exemple-minimal.html`. + +--- + +## 📂 Contenu du package + +``` +export/ +├── README.md ← Ce fichier +├── consigne_design_system.md ← Brief pour agents IA (Claude, ChatGPT…) +├── tokens/ +│ ├── tokens.css ← Variables CSS web (dark + light) +│ ├── tokens.gnome.css ← GTK 4 / libadwaita (apps GNOME) +│ └── tokens.json ← Format générique (Tailwind, Figma…) +├── components/ +│ └── ui-kit.jsx ← 14 composants React (Button, IconButton, Toggle, Tooltip, +│ StatusLed, BatteryGauge, RadialGauge, BigRadialGauge, +│ Popup, TreeNav, Sparkline, LineChart, Icon, …) +└── examples/ + └── exemple-minimal.html ← Démo minimale autoportante +``` + +--- + +## 🎨 Ce qui est paramétrable + +### 1. Thème global + +```html + +``` + +Tu peux mettre `data-theme` sur **n'importe quel parent** pour basculer un sous-arbre uniquement (utile pour une preview en mode opposé dans un menu de réglages). + +### 2. Toutes les couleurs (CSS variables) + +Édite `tokens.css` ou surcharge dans ton propre CSS : + +```css +:root[data-theme="dark"] { + --accent: #fe8019; /* Couleur principale (orange seventies) */ + --accent-soft: #d65d0e; + --bg-1: #2a231d; /* Fond app */ + --bg-3: #3c332a; /* Cartes */ + --ink-1: #f2e5c7; /* Texte */ + --ok: #4dbb26; + --warn: #fabd2f; + --err: #fb4934; + --blue: #3db0d1; /* Datavis additionnel */ + --purple: #c882c8; +} +``` + +**4 statuts** (ok / warn / err / info) + **2 couleurs datavis** (blue / purple) + **6 niveaux de fond** + **4 niveaux d'encre** + **3 niveaux de bordure**. + +### 3. Polices + +Trois familles, toutes substituables : + +| Variable | Usage | Défaut | +|-----------------|-------------------------------------|---------------------| +| `--font-ui` | Interface (titres, corps, boutons) | Inter | +| `--font-mono` | Données, code, valeurs numériques | JetBrains Mono | +| `--font-terminal` | Logs, terminal embarqué, vibe rétro | Share Tech Mono | + +Pour changer, remplace simplement les `@import` Google Fonts et redéfinis les variables. + +### 4. Ombres et relief + +```css +--tile-3d /* Relief 3D marqué pour cartes */ +--shadow-1, -2, -3 /* Niveaux d'élévation */ +--shadow-press /* Inset pour état pressé */ +--hover-glow /* Halo accent au survol */ +``` + +### 5. Composants — props paramétrables + +Chaque composant accepte des props pour personnaliser sans toucher au CSS. Exemples : + +```jsx + + + + + + + + + + + + + Contenu + + + +``` + +Voir la doc complète des props : `Component Reference.html` dans le projet original. + +--- + +## 🐧 Utilisation dans une app GNOME (GTK 4 / libadwaita) + +Charge `tokens/tokens.gnome.css` comme provider CSS au démarrage de l'app. + +**Python (PyGObject)** : +```python +from gi.repository import Gtk, Gdk + +css_provider = Gtk.CssProvider() +css_provider.load_from_path("tokens.gnome.css") +Gtk.StyleContext.add_provider_for_display( + Gdk.Display.get_default(), + css_provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION +) +``` + +**GJS** : +```javascript +const provider = new Gtk.CssProvider(); +provider.load_from_path('tokens.gnome.css'); +Gtk.StyleContext.add_provider_for_display( + Gdk.Display.get_default(), + provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION +); +``` + +**Rust (gtk4-rs)** : +```rust +let provider = gtk::CssProvider::new(); +provider.load_from_path("tokens.gnome.css"); +gtk::style_context_add_provider_for_display( + &gdk::Display::default().unwrap(), + &provider, + gtk::STYLE_PROVIDER_PRIORITY_APPLICATION, +); +``` + +Le fichier override directement les couleurs sémantiques de libadwaita (`@window_bg_color`, `@accent_color`, etc.) ET ajoute des styles spécifiques pour les widgets courants : `button.suggested-action`, `entry`, `switch`, `scale`, `progressbar`, `notebook`, `popover`… + +Classes CSS supplémentaires à appliquer via `add_css_class()` : +- `.tile` / `.card` — Tuile en relief 3D +- `.mono` — Texte monospace JetBrains Mono +- `.terminal` — Texte terminal Share Tech Mono +- `.status.ok` / `.status.warn` / `.status.error` / `.status.info` — Badge de statut + +--- + +## 🔧 Intégration dans d'autres outils + +### Tailwind CSS + +Convertis `tokens.json` en `tailwind.config.js` : + +```js +const tokens = require('./tokens/tokens.json'); +module.exports = { + theme: { + extend: { + colors: { + accent: tokens.themes.dark.accent.primary.value, + ok: tokens.themes.dark.status.ok.value, + // … + }, + fontFamily: { + sans: [tokens.typography.fonts.ui.family, ...tokens.typography.fonts.ui.fallback], + mono: [tokens.typography.fonts.mono.family], + }, + }, + }, +}; +``` + +### Figma / outils de design + +`tokens.json` suit un schéma compatible avec la plupart des plugins de tokens (Figma Tokens, Style Dictionary). Importe-le directement. + +### Variables Sass / SCSS + +```scss +@use 'sass:map'; +$tokens: ( + accent: #fe8019, + bg-1: #2a231d, + ok: #4dbb26, +); +// … +``` + +--- + +## ⚙️ Personnalisation avancée + +### Créer un thème dérivé + +Duplique `tokens.css`, change le nom du sélecteur (`[data-theme="ocean"]` par exemple) et modifie les variables. Charge les deux fichiers — `data-theme` choisira automatiquement. + +### Ajouter une couleur status custom + +```css +:root[data-theme="dark"] { + --critical: #ff0080; + --critical-glow: rgba(255, 0, 128, 0.45); +} +``` + +Utilisable ensuite partout : `` nécessite une PR dans `ui-kit.jsx` (carte `map` dans `StatusLed`), mais en raw CSS tu peux utiliser la variable directement. + +### Désactiver les effets + +Tous les effets de `transition` / `transform` / `box-shadow` sont concentrés dans les classes `.interactive`, `.bg-hover`, `.gauge-hover`. Surcharge-les en CSS si besoin : + +```css +.interactive { transition: none !important; } +``` + +--- + +## ✅ Checklist d'intégration + +- [ ] Polices Google Fonts chargées (Inter, JetBrains Mono, Share Tech Mono) +- [ ] Font Awesome 6 chargé +- [ ] `tokens.css` (web) **ou** `tokens.gnome.css` (GTK) chargé +- [ ] Attribut `data-theme="dark"` (ou "light") sur `` ou un parent +- [ ] React 18 + Babel chargés (uniquement pour `ui-kit.jsx`) +- [ ] `ui-kit.jsx` chargé en `type="text/babel"` + +--- + +## 📋 Statuts du système + +| Couleur | Token | Hex (dark) | Hex (light) | Usage | +|---------|--------|------------|-------------|-----------------------------| +| Accent | `--accent` | `#fe8019` | `#af3a03` | Primaire, focus, sélection | +| OK | `--ok` | `#4dbb26` | `#3c911c` | Succès, état nominal | +| Warn | `--warn` | `#fabd2f` | `#b57614` | Attention, latence élevée | +| Err | `--err` | `#fb4934` | `#9d0006` | Erreur, alerte critique | +| Info | `--info` | `#83a598` | `#427b58` | Information neutre | +| Blue | `--blue` | `#3db0d1` | `#2d82a3` | Datavis catégorie 2 | +| Purple | `--purple` | `#c882c8` | `#8c468c` | Datavis catégorie 3 | + +--- + +## 🤖 Pour les agents IA + +Si tu utilises ce design system avec une IA (Claude, GPT, Copilot, etc.), partage-lui le fichier **`consigne_design_system.md`**. Il y trouvera toutes les règles d'utilisation, conventions, contre-exemples à éviter. + +--- + +**Licence** · Usage libre dans tes projets. Pas de garantie. diff --git a/design_system/components/ui-kit.jsx b/design_system/components/ui-kit.jsx new file mode 100644 index 0000000..92f9e76 --- /dev/null +++ b/design_system/components/ui-kit.jsx @@ -0,0 +1,656 @@ +/* ============================================================ + ui-kit.jsx + Composants haute-fid Gruvbox Seventies. + Tout est purement décoratif/interactif côté composant. + Effets : transparence (glass), hover glow, click 3D, tooltips. + ============================================================ */ + +const { useState, useRef, useEffect } = React; + +/* ============================================================ + Icônes — Font Awesome 6 Free. + Mapping nom logique → classe FA. Le CSS de FA est chargé en CDN + dans le . Le composant garde la MÊME API qu'avant (name, + size, style) pour ne rien casser ailleurs. + ============================================================ */ +const ICON_MAP = { + cpu: 'microchip', + memory: 'memory', + disk: 'hard-drive', + network: 'network-wired', + clock: 'clock', + grid: 'table-cells', + list: 'list', + cog: 'gear', + alert: 'triangle-exclamation', + bell: 'bell', + server: 'server', + chart: 'chart-line', + bars: 'chart-simple', + terminal: 'terminal', + refresh: 'arrows-rotate', + play: 'play', + pause: 'pause', + power: 'power-off', + sun: 'sun', + moon: 'moon', + search: 'magnifying-glass', + close: 'xmark', + chevR: 'chevron-right', + chevL: 'chevron-left', + chevD: 'chevron-down', + chevU: 'chevron-up', + plus: 'plus', + filter: 'filter', + download: 'download', + folder: 'folder', + node: 'circle-nodes', + user: 'user', +}; + +const Icon = ({ name, size = 16, style }) => { + const fa = ICON_MAP[name] || 'circle-question'; + return ( +