`) | | **Prompt-Zeile** | Textarea, `+` Datei, optional Quellen-Picker, Provider-Multi-Select, Voice, Send/Stop; `@file` Autocomplete | `pages/views/workspace/WorkspaceInput.tsx` | | **Drag auf Prompt-Bereich** | Nur **`application/tree-items`** (Baum) und **`application/chat-id`** (Chat-Referenz) — kein natives File-Drop im Input-Wrapper (Dateien laufen über Parent-`main`) | `WorkspaceInput.tsx` (`_handlePromptDragOver` / `_handlePromptDrop`) | | **Neuer Chat** | `workspace.resetToNew` an UDB gebunden; in **Chats-Tab** Toolbar Button `+` mit `title="Neuer Chat"` | `WorkspacePage.tsx` → `UnifiedDataBar` → `ChatsTab.tsx` | | **Billing-Funktionalität** | `BillingDataView`: Tabs Übersicht / Statistik / Transaktionen, Balance Cards, Hinweis auf Admin-Pfad für Aufladung | `pages/billing/BillingDataView.tsx`, `hooks/useBilling.ts`, `api/billingApi.ts` | | **Guthaben im UI** | User-Menü: Eintrag «Guthaben» → `/billing/transactions` | `components/Navigation/UserSection.tsx` | | **Quellen / Verbindungen** | Ausführlicher `SourcesTab` (Browse, Active Sources, Neutralize) | `components/UnifiedDataBar/SourcesTab.tsx` | | **Login** | Logo, Credentials, Microsoft/Google, Registrierung, Kurz-Disclaimer KI/Datenschutz | `pages/Login.tsx`, `Login.module.css` | | **Rechtstexte** | Modal «Rechtliche Hinweise» + Links zu statischen HTML-Seiten | `UserSection.tsx` | ### Konkrete Issues (Lücken vs. Meeting-Feedback) | # | Problem | Ursache im Code / Verhalten | |---|---------|------------------------------| | I1 | **Eingabe wirkt «versteckt»** | Chat-Fläche frisst vertikal Platz; Prompt unten, enges Fenster + zwei Sidebars → Mittelspalte wird sehr schmal (>1024px, beide Sidebars offen). Kein **Empty-State** in `ChatStream`, der die Eingabe einrahmt oder zur Aktion führt. | | I2 | **«Wo tippe ich?» / kein ChatGPT-Balken** | Textarea ist funktional, aber **Placeholder auf Englisch** (`Type a message...`); visuell keine «Hero»-Eingabe. Sekundäraktionen (`+`, 🔗, Voice, Provider) stehen **in einer Zeile** neben dem Feld — bei wenig Breite wirkt das «nur ein Plus». | | I3 | **Neuer Chat unsichtbar** | Nur **`+`** in `ChatsTab` Toolbar; wenn linke Spalte eingeklappt oder Mobile-User nicht auf Tab «Chats» wechselt, fehlt ein **zentrale CTA** in der Mitte. | | I4 | **Schmale Desktop-Breite (ca. 1025–1280px)** | `isMobile` ist **false**, also **beide** Sidebars standardmäßig aktiv (280px + 320px + Handles). Zentrum `flex: 1`, `minWidth: 0` — Eingabe bleibt im DOM, wirkt aber «Wischiwaschi» oder abgeschnitten. Meeting: «A4-Fenster» genau diese Zone. | | I5 | **Dateien: Entdeckbarkeit** | Vollflächen-Drop existiert, aber ohne **dauerhaften Hinweis** im leeren Chat; Nutzer erwarten oft Drop **direkt auf das Textfeld**. | | I6 | **Vertrauen / Schweiz / Partner** | Login: **kein** Hosting-Hinweis, kein Partner-Strip, kein ® am Logo in der UI (nur Bildasset — rechtlich/Marken separat klären). Compliance-Texte eher in `e-compliance/` und statischen HTML, nicht **scanbar** auf Login. | | I7 | **Billing / Pricing Auffindbarkeit** | Funktional stark (`BillingDataView`), aber **Einstieg** primär: Nav-Baum (`GET /api/navigation`, siehe Gateway `NAVIGATION_SECTIONS`) + verstecktes User-Menü «Guthaben». Kein **Dashboard-Teaser** nach erstem Login. | | I8 | **Connector-Sorge** | `SourcesTab` ist technisch mächtig, aber ohne **kuratierte Erstnutzer-Copy** («Verbindung ist read-only / nichts kaputt») am Einstieg — Meeting-Thema «baue ich Scheisse». | | I9 | **Informationsdichte** | Workspace + UDB + rechte Spalte parallel; kein **progressives** Onboarding in der Mitte (ausser globalem OnboardingWizard nach Google). | --- ## Umsetzungsplan (integriert) Ziele: Issues I1–I9 adressieren, **ohne** Billing-Logik oder Gateway-Tarife neu zu erfinden. Reihenfolge nach **Aufwand × Wirkung** für KMU-Erstnutzung. ### Phase A — Quick Wins (1–3 Tage) | Task | Änderung | Dateien / Hinweise | |------|-----------|-------------------| | A1 | Placeholder + primäre Labels **DE** (und i18n Keys, falls `locales` für Workspace genutzt werden soll) | `WorkspaceInput.tsx` — z. B. «Frage stellen oder @Dateiname für Kontext» | | A2 | **Empty State** in der Mitte: kurzer Titel, Bullet «Hier unten Frage eingeben», «Dateien auf die Fläche ziehen», Button **Neuer Chat** (ruft `onCreateNew`/`resetToNew` — Props von `WorkspacePage` durchreichen) | `ChatStream.tsx` + optionell schmale Props von `WorkspacePage.tsx` | | A3 | **Neuer Chat** zusätzlich: Button in der **mittleren Kopfzeile** (nur Desktop) oder neben Mobile-«Workspace»-Leiste, sichtbar ohne UDB | `WorkspacePage.tsx` | | A4 | Billing-Hinweis für **Nicht-Admins**: ein Zeiler im Empty State oder unter Prompt mit Link zu Hilfe («Guthaben: Administrator») — Text mit `BillingDataView` / BalanceCard abgleichen | `ChatStream` oder `WorkspacePage`, Copy-only | ### Phase B — Layout & Breakpoints (3–5 Tage) | Task | Änderung | Dateien / Hinweise | |------|-----------|-------------------| | B1 | **Zwischen-Breakpoint** (z. B. `≤1280` oder `≤1360`): **automatisch linke und/oder rechte Sidebar einklappen** oder nur eine Sidebar standardmäßig offen, damit `mindestens ~480px` für die Mittelspalte garantiert sind | `WorkspacePage.tsx` — `useEffect` auf `innerWidth` + lokaler State, dokumentierte Schwellwerte | | B2 | Optional: **minWidth** auf `

` mit «Seite zu schmal»-Hinweis statt silent squeeze | `WorkspacePage.tsx` | | B3 | **Visuelle Hierarchie Prompt**: Eingabezeile leicht hervorgehoben (Schatten/Rand), ggf. erste Zeile höher (`minHeight`) | `WorkspaceInput.tsx` oder ausgelagertes CSS Module | | B4 | E2E/Visuell: Viewports **1100 / 1200 / 1280 / 1440** in Testplan festhalten | Playwright oder manuelle Matrix | ### Phase C — Vertrauen & Marketing-UI (2–4 Tage, abhängig von Legal) | Task | Änderung | Dateien / Hinweise | |------|-----------|-------------------| | C1 | Wiederverwendbare **`TrustFooter` / `TrustStrip`**: Zeile Hosting Schweiz (Formulierung mit Legal abgleichen — ggf. Verweis auf [e-compliance/security-overview.md](../../e-compliance/security-overview.md)) | Neue Komponente unter `components/`, einbinden in `Login.tsx`, optional `Register`, optional `MainLayout` Footer | | C2 | **Recommended by** — statische Logos/Links (max. 5) nur nach **Partner-Freigabe** | Gleiche Komponente; Assets unter `public/` | | C3 | Swiss **®** am Logo nur nach Markenfreigabe — sonst Textlink «Marke» | `Login.module.css` / Layout-Logo | | C4 | **SourcesTab** oder erster Besuch «Quellen»: ein **Info-Banner** (1–2 Sätze) zu sicherer Verbindung / keine Zerstörung von Quelldaten — mit Product Owner fact-checken | `SourcesTab.tsx` oben | ### Phase D — Billing-Discovery (2–3 Tage) | Task | Änderung | Dateien / Hinweise | |------|-----------|-------------------| | D1 | Nach Login: **einmaliger** Banner oder Home-Teaser «Guthaben & Nutzung» mit Link zu `/billing/transactions` (nur wenn Route erlaubt — Permission prüfen wie andere Nav-Items) | `MainLayout.tsx`, `App.tsx` Home-Route, oder dedizierte `HomePage` — je nachdem wo Landing liegt | | D2 | Optional: **kleine Balance-Zahl** in UserSection neben Avatar (nur wenn API schon geladen wird und Mandate eindeutig) — Performance/UX mit `useBilling` prüfen | `UserSection.tsx` | | D3 | Gateway: Navigations-**Label/Reihenfolge** für Billing in «Meine Sicht» nach oben ziehen (wenn gewünscht) — **kein** Frontend-Workaround ohne Backend | `platform-core` `NAVIGATION_SECTIONS` / `mainSystem.py` (siehe Wiki navigation.md) | ### Phase E — Feinschliff (laufend) | Task | Änderung | |------|-----------| | E1 | `WorkspaceInput`: optional natives **File** im Prompt-`onDragOver`/`Drop` spiegeln (gleiche Logik wie `WorkspacePage._uploadAndAttach`) — dann expliziter Drop auf Eingabe | | E2 | i18n: alle neuen Strings in `locales/` | | E3 | Nach Merge: `b-reference/ui-nyla/architecture.md` um Workspace-UX-Notizen ergänzen | ### Abhängigkeiten & Risiken - **D3** erfordert Gateway-Deploy und gehört fachlich zu «IA», nicht nur CSS. - **C1–C3** müssen mit **Legal/Marketing** sign-off; keine konkreten Hosting-Anbieter-Namen ohne Vertragslage. - **D1** braucht klare Regel, wann der Banner **nicht** nervt (localStorage `dismissed`). --- ## Entscheidungen | Datum | Entscheidung | Begründung | |-------|-------------|------------| | 2026-04-07 | Plan aus Meeting-Transkript abgeleitet; Fokus UI/UX, nicht Pricing-Tarife | Entscheidungen zu Tarifen und Modellen sind separat zu treffen | | 2026-04-07 | Codebase-Audit gegen `ui-nyla` — Umsetzung in Phasen A–E | Issues I1–I9 und bestehende Bausteine im Dokument festgehalten | *Weitere Einträge nach UX-Review und Abstimmung Partner/Hosting-Formulierung.* ## Umsetzungs-Checkliste Die detaillierte Aufgabenzerlegung steht in **Umsetzungsplan** (Phasen A–E). Hier die Cross-Cutting-Checks: **Phase A (Quick Wins)** - [ ] A1: `WorkspaceInput.tsx` — DE-Placeholder / Copy - [ ] A2: `ChatStream.tsx` + Props — Empty State + Kurzhelp - [ ] A3: `WorkspacePage.tsx` — «Neuer Chat» sichtbar ohne UDB - [ ] A4: Copy für Nicht-Admins (Guthaben) **Phase B (Layout)** - [ ] B1–B2: `WorkspacePage.tsx` — Zwischen-Breakpoint / Sidebar-Strategie - [ ] B3: `WorkspaceInput.tsx` — visuelle Hierarchie Eingabe - [ ] B4: Viewport-Testmatrix dokumentiert **Phase C (Trust)** - [ ] C1–C3: Trust-Komponente + Login/Register/Layout — Legal OK - [ ] C4: `SourcesTab.tsx` — Sicherheits-Banner **Phase D (Billing-Discovery)** - [ ] D1: Home / nach Login — Teaser-Link Billing - [ ] D2: optional `UserSection.tsx` — Balance-Snippet - [ ] D3: optional Gateway — `NAVIGATION_SECTIONS` Billing-Prominenz **Phase E / Plattform** - [ ] E1: optional File-Drop auf Prompt synchron zu `WorkspacePage` - [ ] E2: `locales/*` für neue Strings - [ ] E3: Wiki `b-reference/ui-nyla/architecture.md` aktualisieren **Querschnitt** - [ ] API-Endpunkte: nur bei D2/D3 oder neuen Summary-APIs nötig - [ ] DB-Migration: nein (Planstand) - [ ] RBAC: Billing-Routen nur anzeigen wenn wie heute erlaubt - [ ] Neutralisierung: nur Copy in C4, kein Verhalten - [ ] Navigation / Routing: nur bei D1/D3 - [ ] Billing-Impact: Darstellung/Auffindbarkeit, keine Tariflogik ## Akzeptanzkriterien | # | Kriterium (Given-When-Then) | Prio | |---|---------------------------|------| | 1 | Given ein eingeloggter User ohne verbundene Datenquellen, When er den AI-Workspace öffnet (Desktop ≥1280px und Mobile-Viewport), Then ist die Haupt-Eingabe für Prompt/Frage ohne Hover oder Scrollen in den ersten sichtbaren 50 % des Hauptbereichs erkennbar | must | | 2 | Given schmales Desktop-Fenster (z. B. 900–1024px Breite), When der AI-Workspace angezeigt wird, Then bleibt die Prompt-Eingabe zugänglich (kein «verschwindendes» Chatfenster ohne Alternativlayout) | must | | 3 | Given Login- oder Startansicht, When der User die Seite scannt (5–10 Sekunden), Then sind mindestens ein **Schweiz-Hosting**-Hinweis und der **Partner-/Recommended-by**-Block gemäss kuratierter Liste sichtbar oder mit einem klaren «Vertrauen»-Einstieg erreichbar | should | | 4 | Given User mit Rolle Admin, When er nach dem ersten Login Orientierung zu Kosten sucht, Then führt ein in der UI sichtbarer Einstieg innerhalb ≤2 Klicks zur Billing-/Usage-Übersicht (bestehender Pfad darf erhalten bleiben, muss aber nicht mehr alleinige Entdeckungsquelle sein) | should | | 5 | Given AI-Workspace, When der User eine neue Unterhaltung beginnen will, Then ist eine explizite «Neuer Chat»- oder gleichwertige Handlung sichtbar und erklärt sich ohne externe Doku | should | | 6 | Given leerer Chat ohne Nachrichten, When der User eine Datei einbinden will, Then ist erkennbar, ob und wie Drag-and-Drop in den Prompt funktioniert (Text oder Dropzone) | could | ## Testplan | ID | AC | Art | Automatisiert | Repo-Pfad | Status | |----|----|-----|--------------|-----------|--------| | T1 | 1,2 | e2e / manuell Viewports | teilweise | `ui-nyla` — `WorkspacePage.tsx` bei 1100/1200/1280/1440px | pending | | T2 | 3 | manuell UX-Review | nein | — | pending | | T3 | 4 | manuell Rolle Admin | nein | — | pending | | T4 | 5,6 | manuell Explorer/Safari/Edge | nein | — | pending | ## Links - Input: [input2026-04-ui-enhancement-inbputs.txt](./input2026-04-ui-enhancement-inbputs.txt) - Produkt-Überblick: [README.md](../../README.md) - Frontend-Referenz: [b-reference/ui-nyla/architecture.md](../../b-reference/ui-nyla/architecture.md) - Navigation API: [b-reference/platform/navigation.md](../../b-reference/platform/navigation.md) - Billing (Backend-Kontext): [b-reference/platform-core/billing.md](../../b-reference/platform-core/billing.md) - Compliance (Copy-Grundlage): [e-compliance/security-overview.md](../../e-compliance/security-overview.md) **Code (Haupt-Einstiegspunkte, Repo `ui-nyla`)** - `src/pages/views/workspace/WorkspacePage.tsx` — Layout, Mobile, Drag-Drop, UDB - `src/pages/views/workspace/WorkspaceInput.tsx` — Prompt, Anhänge, STT - `src/pages/views/workspace/ChatStream.tsx` — Nachrichtenliste - `src/components/UnifiedDataBar/ChatsTab.tsx` — Chat-Liste, `+` Neuer Chat - `src/components/UnifiedDataBar/SourcesTab.tsx` — Verbindungen / Quellen - `src/pages/Login.tsx` — Login-Shell - `src/components/Navigation/UserSection.tsx` — Guthaben-Menü - `src/pages/billing/BillingDataView.tsx` — Nutzer-Billing - PR: … - Issue: … ## Abschluss - [ ] b-reference/ aktualisiert (`ui-nyla/architecture.md`, ggf. `platform/navigation.md`) - [ ] TOPICS.md aktualisiert (falls neues Thema «Trust-UI» o. ä.) - [ ] Dieses Dokument → `z-archive/` verschoben (nach Release)