nexus/docs/audits/2026-07-26/PAGE_AUDIT.md

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

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, 320 px
/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, 375, 768, 1024, 1920
/memory	P2	Kohärente List-/Detailansicht, aber sehr kleine und kontrastarme Metadaten. Der große leere Detailbereich gibt beim Einstieg wenig Orientierung.	Desktop
/docs	P2	Such- und Kategorienstruktur sind verständlich. Initial bleibt viel leerer Raum; kein automatisch ausgewähltes Dokument und zu schwache Sekundärtexte.	Desktop
/agents/:id	P1	Informationsarchitektur ist brauchbar. „Zurück zum Team“ navigiert jedoch zu nicht registriertem /team und landet über Wildcard auf dem Dashboard.	Detail, Fehlredirect
/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
/incidents	P2	Solide List-/Detailstruktur. Kleine Typografie, schwache Statusdifferenzierung und ein großer initial leerer Detailbereich bremsen den Scan.	Desktop
/calendar	P2	Termine und Zeitbezug sind gut strukturiert. Refresh und Metadaten sind visuell zu zurückhaltend.	Desktop
/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, nach Refresh
/projects/:id	P2	Klare Stammdaten und Task-Zuordnung. Sehr große Leerflächen; destruktive Archivaktion erhält relativ viel visuelles Gewicht.	Desktop
/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, 375 px
/tasks/:id	P1	Detail- und Subtask-Struktur sind brauchbar. Existierende Priorität Critical erscheint leer, weil die Select-Option fehlt.	Desktop
/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
/models	P1	Initial leer wegen fehlender Store-Hydration. Nach Refresh inhaltlich vorhanden, aber visuell als roher ModuleView ohne klare Hierarchie.	Vor Refresh, nach Refresh
/activity	P1	Dasselbe Hydration-Problem. Geladene Activity ist funktional lesbar, wirkt aber wie eine unvollständige Zwischenansicht.	Vor Refresh, nach Refresh
/chat	P1	Kernfunktion ist erkennbar, Oberfläche wirkt jedoch unfertig: schwache Hierarchie, rohe Form-Controls und keine belastbare mobile Conversation-Struktur.	Desktop
/notifications	P2	Filter und Gruppierung sind vorhanden. Kontrast ist schwach; Emoji-Icons brechen die sonstige Icon-Sprache und besitzen uneinheitliche Semantik.	Desktop
/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, 375 px

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.