docs/PLAN_UI_STYLING.md

Plan — Branch ui-styling (UI-Verschönerung)

Branch-Basis: master @ 286e987 User-Scope (bestätigt): Nur Styling — keine Funktionsänderung Status: Scope-Dokument vor Implementierung (DevMind-Regel: 2× fragen)

Ziel

Visuelle Politur der Gradio-WebUI (chat_tab + TTS-Accordion + Profile-Editor + Sessions-Tab), ohne die zugrundeliegende Logik anzufassen. Schneller ästhetischer Gewinn mit minimalem Risiko.

In-Scope

1. CSS-Variablen + Theme-Basis

• Einheitliche CSS-Variablen für Farben, Spacing, Border-Radius in einer neuen Datei gradio_tabs/_styles.py.
• Definiert einen --bg-primary, --bg-secondary, --accent, --text-primary etc., aus denen die Komponenten ihre Werte ziehen.
• Keine Hardcoded-Farben in chat_tab.py mehr; alle bestehenden Inline-Styles durch Variablen ersetzt.

2. Chatbot-Polish

• Bubble-Alignment User rechts / Assistant links (heute unklar).
• Avatar-Platzhalter für User und Assistant (Initial-Buchstabe in Kreis, kein Bild-Asset nötig).
• Code-Block-Highlight via gr.Code(component) statt reinem Markdown für ```-Blöcke.
• Markdown-Rendering für Assistant-Antworten aktivieren (gr.Markdown statt plain text).
• Token-Counter-Badge rechts oben in der Toolbar (prompt_tokens / completion_tokens / total).

3. Sidebar / Layout

• Linke Sidebar mit Logo, Session-Liste, Profile-Auswahl in eigenem Block.
• Hauptbereich Chat + rechte Sidebar mit Settings-Akkordeon (TTS, Profile, Auto-Tune).
• 3-Spalten-Layout via gr.Row + gr.Column(scale=...).
• Tabs oben ersetzen Sidebar-Tabs (Settings/Sessions/Profile/TTS) zu Bottom-Panel-Accordion.

4. Komponenten-Polish

• Buttons: einheitliche Border-Radius (8px), Hover-Effekt, Disabled-State deutlich.
• Accordions: Pfeil-Rotation beim Öffnen, Übergangs-Animation.
• Dropdowns: Suche-Prompt wenn >5 Items, klare Selected-Highlight-Farbe.
• Textbox: Placeholder-Italic, Focus-Border akzentfarben.

5. TTS-Accordion-Schönheit

• Engine-Auswahl als Radio-Buttons mit Engine-Icon (Buchstabe oder Initial in Quadrat).
• Audio-Player zentriert statt full-width.
• Status-Pill oben rechts ("Engine: piper ✓").

Out-of-Scope (EXPLIZIT)

• Keine neuen Features (z.B. kein Multi-Chat, kein Theme-Toggle Light/Dark, keine Animation-Frameworks).
• Keine Änderungen an Server-Endpoints, generators.py, patch.py, model_manager.py — Motor unangetastet (DevMind-Regel: kein motor-touch).
• Keine Änderungen an der Session-Logik, Auto-Tune-Lock, Profile-Resolution.
• Keine Änderungen an Tests, die Logik pinnen — nur ggf. neue CSS-/Visual-Tests (Pillow-Snapshot-Tests von Gradio-Komponenten, falls Zeit reicht).
• Keine Dependency-Additions (kein tailwindcss, kein npm, alles in reinem Gradio-CSS/Inline-Style).

Erlaubte Dateien (lesen + editieren)

• gradio_tabs/chat_tab.py (UI-Komposition)
• gradio_tabs/_styles.py (NEU — CSS-Variablen)
• app.py (nur Mount-Order / Reihenfolge der Tabs, KEINE Logik)
• gradio_tabs/__init__.py (Re-Exports der neuen Helper)
• tests/test_ui_styling.py (NEU — Smoke-Tests: Komponenten gerendert, CSS-Vars vorhanden)

Verifikation

1. bash run.sh startet sauber, keine Warnings.
2. UI lädt in <2s (kein zusätzlicher Network-IO).
3. Alle bestehenden Tests grün (189+).
4. Manuelle Sichtprüfung: Chat-Bubbles aligned, Avatar sichtbar, TTS-Akkordeon ästhetisch, keine 1-Pixel-Bugs.
5. Optional: Pillow-Snapshot-Test (Vergleich vorher/nachher — hartes Kriterium für "kein Stil-Regress").

Risiken

• Gradio-CSS-Spezifität: Inline-Styles in Gradio-Komponenten werden oft von Gradio-Defaults überschrieben. Mitigiert durch css=-Argument in gr.Blocks(css=...) + höhere Spezifität.
• Visuelle Regression in 1b vs 4b: Falls das UI Preset-spezifische States hat (PX-Engine-Aktiv-Indikator). Smoke-Test in beiden Presets.
• Lade-Regression: Zu viele CSS-Variablen können Theme-Init verlangsamen. Mitigiert durch <50 Variablen.

Reihenfolge

1. gradio_tabs/_styles.py mit zentralen CSS-Variablen.
2. chat_tab.py minimal-invasiv: Inline-Styles → Variablen, Avatar hinzu, Markdown-Renderer.
3. Layout-Refactor 3-Spalten (Sidebar + Chat + Settings).
4. TTS-Accordion-Polish.
5. Tests + Smoke (Server lokal, Screenshot-Vergleich).
6. Commit pro Sub-Bereich, nicht ein Mega-Commit.

Was NICHT in diesem Plan ist

• KEINE Auto-Tune-Logik-Änderung.
• KEIN Light/Dark-Toggle (User-Wahl: "Nur Styling", keine Features).
• KEINE neuen TTS-Engines.
• KEINE Modal-Overlays oder Toasts (Gradio-Standard reicht).
• KEINE Mobile-Optimierung (Gradio handhabt das selbst).

Verwandte

• Branch self-conversation (separater Branch, separat dokumentiert)
• Branch relay-layer-discovery (separater Branch, separat dokumentiert)