# 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 desktop](screenshots/02-dashboard-desktop.png)

### Dashboard, Mobile 375 px

![Dashboard mobile](screenshots/19-dashboard-mobile-375.png)

### Dashboard, Tablet 768 px

![Dashboard tablet](screenshots/23-dashboard-tablet-768.png)

### Task Board, Mobile 375 px

![Task Board mobile](screenshots/20-task-board-mobile-375.png)

## 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.