AzuTear
149 lines
9.6 KiB
Markdown
149 lines
9.6 KiB
Markdown
# Nexus – Seitenaudit
|
||
|
||
**Datum:** 2026-07-26
|
||
**Commit:** `3bc7622977f4a6c2f2e98ab4aa856a2e45c3cf49`
|
||
**Auditumfang:** Alle 18 in `frontend/src/router.ts` registrierten Seiten plus
|
||
ungültige Navigationsziele und sechs Viewport-Größen.
|
||
|
||
## Methodik und Evidenzgrenze
|
||
|
||
Die Anwendung wurde lokal gebaut und im Browser mit repräsentativen,
|
||
deterministischen API-Fixtures betrieben. Dadurch konnten Authentifizierung,
|
||
Routen, Inhalte, Lade-/Leerzustände, Interaktionen und Responsive-Verhalten
|
||
reproduzierbar geprüft werden.
|
||
|
||
Die Fixtures ersetzen keinen Live-Systemtest:
|
||
|
||
- keine reale PostgreSQL- oder OpenClaw-Verbindung,
|
||
- kein produktiver Nginx-/Traefik-Pfad,
|
||
- SSE absichtlich nicht als Live-Vertrag bewertet,
|
||
- fixturebedingte Datums- oder Reconnect-Anzeigen gelten nicht als
|
||
Produktdefekte.
|
||
|
||
Jeder Screenshot stammt aus diesem Auditlauf und liegt unter
|
||
[`screenshots/`](screenshots/).
|
||
|
||
## Leitbefunde
|
||
|
||
1. **Dashboard ist zwischen 375 und 1024 px nicht nutzbar.** Agent-Cards,
|
||
Header und Iris-Panel überlappen oder werden abgeschnitten.
|
||
2. **Bei 768 px greift der mobile Sidebar-Breakpoint noch nicht.** Die feste
|
||
248-px-Sidebar lässt dem Board nur einen schmalen Restbereich.
|
||
3. **Zwei UI-Shells erzeugen einen Produktbruch.** Dashboard und restliche
|
||
Seiten unterscheiden sich in Navigation, Sprache, Dichte, Tokens und
|
||
Verhalten.
|
||
4. **Vier Dashboard-Navigationsziele sind nicht registriert.** Der
|
||
Wildcard-Redirect kaschiert das Problem und zeigt wieder `/dashboard`.
|
||
5. **Daten nach Login werden nicht zuverlässig initialisiert.** Projects,
|
||
Models und Activity bleiben bis zum manuellen Refresh leer.
|
||
6. **Task Board verliert auf kleinen Displays den Gesamtüberblick.** Es zeigt
|
||
praktisch nur die erste Spalte und erzeugt große leere Höhen.
|
||
7. **Kontrast und Schriftgrößen sind zu schwach.** Das betrifft besonders
|
||
Labels, Metadaten, Buttons und sekundäre Texte.
|
||
|
||
## Visuelle Kernevidenz
|
||
|
||
### Dashboard, Desktop 1440 px
|
||
|
||
|
||
|
||
### Dashboard, Mobile 375 px
|
||
|
||
|
||
|
||
### Dashboard, Tablet 768 px
|
||
|
||
|
||
|
||
### Task Board, Mobile 375 px
|
||
|
||
|
||
|
||
## Audit pro registrierter Seite
|
||
|
||
| Route | Status | Wesentliche Befunde | Evidenz |
|
||
|---|---|---|---|
|
||
| `/login` | P1 | Visuell fokussiert, aber sehr dunkel. Bei 320×568 werden oberer Brand-Bereich und untere Inhalte nicht gemeinsam sichtbar; der Flow benötigt Scrollen. | [Desktop](screenshots/01-login-desktop.png), [320 px](screenshots/22-login-mobile-320.png) |
|
||
| `/dashboard` | P0 | Eigenständige V2-Shell; dichte, überlappende Agent-Topologie; Suche und „Ask Iris“ ohne vollständige Aktion; feste Dashboard-Aktivmarkierung. Zwischen 375 und 1024 px schwer bis vollständig unbrauchbar. | [1440](screenshots/02-dashboard-desktop.png), [375](screenshots/19-dashboard-mobile-375.png), [768](screenshots/23-dashboard-tablet-768.png), [1024](screenshots/24-dashboard-1024.png), [1920](screenshots/25-dashboard-wide-1920.png) |
|
||
| `/memory` | P2 | Kohärente List-/Detailansicht, aber sehr kleine und kontrastarme Metadaten. Der große leere Detailbereich gibt beim Einstieg wenig Orientierung. | [Desktop](screenshots/03-memory-desktop.png) |
|
||
| `/docs` | P2 | Such- und Kategorienstruktur sind verständlich. Initial bleibt viel leerer Raum; kein automatisch ausgewähltes Dokument und zu schwache Sekundärtexte. | [Desktop](screenshots/04-docs-desktop.png) |
|
||
| `/agents/:id` | P1 | Informationsarchitektur ist brauchbar. „Zurück zum Team“ navigiert jedoch zu nicht registriertem `/team` und landet über Wildcard auf dem Dashboard. | [Detail](screenshots/05-agent-detail-desktop.png), [Fehlredirect](screenshots/05b-agent-back-redirect-desktop.png) |
|
||
| `/security` | P0 | Übersicht ist visuell nachvollziehbar, vermittelt aber mehr Sicherheit als die tatsächliche Controller-Autorisierung bietet. Deaktivierte 2FA und kritische Zugriffslücken sind nicht als Release-Blocker erkennbar. | [Desktop](screenshots/06-security-desktop.png) |
|
||
| `/incidents` | P2 | Solide List-/Detailstruktur. Kleine Typografie, schwache Statusdifferenzierung und ein großer initial leerer Detailbereich bremsen den Scan. | [Desktop](screenshots/07-incidents-desktop.png) |
|
||
| `/calendar` | P2 | Termine und Zeitbezug sind gut strukturiert. Refresh und Metadaten sind visuell zu zurückhaltend. | [Desktop](screenshots/08-calendar-desktop.png) |
|
||
| `/projects` | P1 | Nach normalem Login zunächst leer. Erst manueller Refresh lädt Daten. Geladener ModuleView wirkt weitgehend ungestaltet und nicht wie Teil derselben Anwendung. | [Vor Refresh](screenshots/09-projects-desktop.png), [nach Refresh](screenshots/09b-projects-after-refresh-desktop.png) |
|
||
| `/projects/:id` | P2 | Klare Stammdaten und Task-Zuordnung. Sehr große Leerflächen; destruktive Archivaktion erhält relativ viel visuelles Gewicht. | [Desktop](screenshots/10-project-detail-desktop.png) |
|
||
| `/tasks` | P1 | Funktionsreicher Board-Flow, aber fünf Spalten überlaufen bereits auf Desktop. Auf 375 px ist nur eine Spalte plus Restkante sichtbar; keine gute mobile Statusnavigation. | [Desktop](screenshots/11-tasks-desktop.png), [375 px](screenshots/20-task-board-mobile-375.png) |
|
||
| `/tasks/:id` | P1 | Detail- und Subtask-Struktur sind brauchbar. Existierende Priorität `Critical` erscheint leer, weil die Select-Option fehlt. | [Desktop](screenshots/12-task-detail-desktop.png) |
|
||
| `/agents` | P2 | Stärkste Legacy-Übersichtsseite: konsistentes Grid und verständliche Rollen. Ganze `article`-Cards sind jedoch clickbar statt semantische Links/Buttons zu verwenden. | [Desktop](screenshots/13-agents-desktop.png) |
|
||
| `/models` | P1 | Initial leer wegen fehlender Store-Hydration. Nach Refresh inhaltlich vorhanden, aber visuell als roher ModuleView ohne klare Hierarchie. | [Vor Refresh](screenshots/14-models-desktop.png), [nach Refresh](screenshots/14b-models-after-refresh-desktop.png) |
|
||
| `/activity` | P1 | Dasselbe Hydration-Problem. Geladene Activity ist funktional lesbar, wirkt aber wie eine unvollständige Zwischenansicht. | [Vor Refresh](screenshots/15-activity-desktop.png), [nach Refresh](screenshots/15b-activity-after-refresh-desktop.png) |
|
||
| `/chat` | P1 | Kernfunktion ist erkennbar, Oberfläche wirkt jedoch unfertig: schwache Hierarchie, rohe Form-Controls und keine belastbare mobile Conversation-Struktur. | [Desktop](screenshots/16-chat-desktop.png) |
|
||
| `/notifications` | P2 | Filter und Gruppierung sind vorhanden. Kontrast ist schwach; Emoji-Icons brechen die sonstige Icon-Sprache und besitzen uneinheitliche Semantik. | [Desktop](screenshots/17-notifications-desktop.png) |
|
||
| `/settings` | P2 | Am besten gelöste responsive Legacy-Seite. Formfelder bleiben bei 375 px nutzbar. Globale Topbar-Icons und kleine Labels bleiben Accessibility-Risiken. | [Desktop](screenshots/18-settings-desktop.png), [375 px](screenshots/21-settings-mobile-375.png) |
|
||
|
||
## Nicht registrierte oder defekte Ziele
|
||
|
||
| Quelle | Ziel | Tatsächliches Verhalten |
|
||
|---|---|---|
|
||
| Dashboard-Sidebar | `/orchestration` | Wildcard -> `/dashboard` |
|
||
| Dashboard-Sidebar | `/research` | Wildcard -> `/dashboard` |
|
||
| Dashboard-Sidebar | `/hosts` | Wildcard -> `/dashboard` |
|
||
| Dashboard-Sidebar | `/costs` | Wildcard -> `/dashboard` |
|
||
| Agent Detail | `/team` | Wildcard -> `/dashboard` |
|
||
|
||
`TeamView.vue` existiert, ist aber nicht im Router registriert. Der
|
||
Wildcard-Redirect macht diese Integrationsfehler für Nutzer schwer
|
||
diagnostizierbar.
|
||
|
||
## Responsive-Matrix
|
||
|
||
| Viewport | Ergebnis |
|
||
|---|---|
|
||
| 320 px | Login scrollbar und vertikal gequetscht; kein kompakter First-Viewport-Flow |
|
||
| 375 px | Dashboard P0-defekt; Task Board nur eingeschränkt navigierbar; Settings brauchbar |
|
||
| 768 px | Schlechtester Dashboard-Zwischenzustand durch Off-by-one-Breakpoint und feste Sidebar |
|
||
| 1024 px | Dashboard weiterhin überlappend und abgeschnitten |
|
||
| 1440 px | Grundsätzlich bedienbar, aber Dashboard-Header/Cards kollidieren und Task Board läuft horizontal über |
|
||
| 1920 px | Dashboard erstmals stabiler, erzeugt jedoch übermäßig viel ungenutzten Raum |
|
||
|
||
## Accessibility-Spot-Check
|
||
|
||
Keine vollständige WCAG-Prüfung. Sichtbar und im DOM nachvollziehbar:
|
||
|
||
- zahlreiche Icon-Buttons ohne Accessible Name,
|
||
- clickbare `article`-Elemente statt Links oder Buttons,
|
||
- sehr kleine Textgrößen bis in den einstelligen Pixelbereich,
|
||
- schwache Kontraste für Text, Controls und Statusinformationen,
|
||
- horizontale Informationsarchitektur ohne gleichwertige mobile Alternative,
|
||
- Platzhalter-Controls, deren sichtbare Affordance keine Aktion auslöst.
|
||
|
||
## Priorisierte Korrekturen
|
||
|
||
### P0
|
||
|
||
1. Dashboard zwischen 375 und 1024 px neu layouten; 768-px-Grenze explizit
|
||
testen.
|
||
2. Navigation nur aus registrierten Routen erzeugen oder fehlende Seiten
|
||
bewusst implementieren.
|
||
3. Security-Seite und Release-Status an die tatsächlichen
|
||
Zugriffskontrollbefunde koppeln.
|
||
|
||
### P1
|
||
|
||
1. Eine gemeinsame Shell, Tokenbasis und Navigation für alle Seiten festlegen.
|
||
2. Operations Store direkt nach erfolgreichem Login hydratisieren.
|
||
3. Task Board mit mobiler Statusauswahl oder segmentierter Liste statt
|
||
abgeschnittener Fünf-Spalten-Fläche ausstatten.
|
||
4. `Critical` im gesamten Priority-Vertrag unterstützen.
|
||
5. Suche, Ask-Iris, Logout und Back-Navigation entweder funktionsfähig machen
|
||
oder ihre Affordance entfernen.
|
||
|
||
### P2
|
||
|
||
1. Standardgrößen und Kontrast anheben.
|
||
2. Empty-/Loading-/Error-Zustände mit klarer nächster Aktion gestalten.
|
||
3. Interaktive Cards und Icon-Buttons semantisch und keyboard-tauglich machen.
|
||
4. Projects, Models, Activity und Chat aus dem generischen ModuleView in
|
||
kohärente Produktseiten überführen.
|