From 171f554916a3256e222b5545b13d0cefef5be5a7 Mon Sep 17 00:00:00 2001
From: AdrianoDev <adrianodalpastro@gmail.com>
Date: Mon, 11 May 2026 22:48:53 +0200
Subject: [PATCH] fix(dashboard): icone Material rese come testo + JSON keys
 invisibili
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Due bug visivi distinti:

1) Icone Material rotte ("arrow_drop_down" come testo nel selector):
   Il selettore CSS '*' applicava font Inter a tutti gli elementi inclusi
   gli .material-icons che richiedono il loro proprio font ligature.
   Sostituito '*' con whitelist esplicita di elementi UI; aggiunto override
   esplicito per .material-icons / .q-icon che forza font 'Material Icons'.

2) JSON keys invisibili nel code block config:
   NiceGUI ui.code usa Prism.js (non highlight.js) per il syntax highlighting.
   Aggiunti selettori .token.* coordinati con la palette neon:
   - .token.property / .token.attr-name → cyan (chiavi JSON)
   - .token.string → green (valori string)
   - .token.number / .token.boolean / .token.null → pink
   - .token.punctuation / .token.operator → muted
   - .token.keyword / .token.builtin → amber
   Più reset text-shadow per pre[class*=language-].

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/multi_swarm/dashboard/nicegui_app.py | 25 ++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/multi_swarm/dashboard/nicegui_app.py b/src/multi_swarm/dashboard/nicegui_app.py
index fd33a0f..918f178 100644
--- a/src/multi_swarm/dashboard/nicegui_app.py
+++ b/src/multi_swarm/dashboard/nicegui_app.py
@@ -62,8 +62,16 @@ _CUSTOM_CSS = f"""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
-* {{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; }}
-code, pre, .q-code {{ font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: 12.5px !important; }}
+html, body, .q-page, .q-card, .q-btn, .q-field, .q-table, .text-h4, .text-h6, .text-subtitle1, .text-caption, .text-body1, .nav-link, .brand, label, p, span, div {{
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    letter-spacing: -0.01em;
+}}
+.material-icons, .material-icons-outlined, .material-symbols-outlined, .q-icon, i.q-icon, i[class*="material"] {{
+    font-family: 'Material Icons' !important;
+    font-feature-settings: 'liga';
+    letter-spacing: normal !important;
+}}
+code, pre, .q-code, .nicegui-code {{ font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: 13.5px !important; }}
 
 body, .q-page-container, .q-page {{
     background: {COLOR_BG} !important;
@@ -247,6 +255,19 @@ code, pre, .nicegui-code {{
 .hljs-comment {{ color: {COLOR_TEXT_MUTED} !important; font-style: italic; }}
 .hljs-name, .hljs-title {{ color: {COLOR_PRIMARY} !important; }}
 
+/* Prism.js tokens (NiceGUI usa Prism per ui.code) */
+.token.property, .token.attr-name, .token.tag {{ color: {COLOR_SECONDARY} !important; font-weight: 500; }}
+.token.string, .token.url {{ color: {COLOR_SUCCESS} !important; }}
+.token.number, .token.boolean, .token.null, .token.symbol {{ color: {COLOR_PRIMARY} !important; font-weight: 500; }}
+.token.keyword, .token.constant, .token.builtin, .token.atrule {{ color: {COLOR_ACCENT} !important; }}
+.token.punctuation, .token.operator {{ color: {COLOR_TEXT_MUTED} !important; }}
+.token.comment {{ color: {COLOR_TEXT_MUTED} !important; font-style: italic; }}
+.token.function, .token.class-name {{ color: {COLOR_PRIMARY} !important; }}
+pre[class*="language-"], code[class*="language-"] {{
+    color: {COLOR_TEXT} !important;
+    text-shadow: none !important;
+}}
+
 .q-badge {{ border-radius: 6px !important; font-weight: 500 !important; padding: 4px 10px !important; font-size: 12px !important; }}
 </style>
 """