nexus/design-qa.md

Nexus design QA

• Date: 2026-07-26
• Last verified: 2026-07-30
• Visual authority: /dashboard
• Scope: /login, /dashboard, and all 16 other registered authenticated routes
• Final result: Passed

Reference and comparison

• Fresh dashboard reference at 1440 × 900: docs/audits/2026-07-26/screenshots/00-dashboard-reference-1440.png
• Unchanged login at 1440 × 900: docs/audits/2026-07-26/screenshots/00-login-reference-1440.png
• Migrated representative: docs/audits/2026-07-26/screenshots/design-migration-final-agents-1280.png
• Same-viewport reference/implementation comparison: docs/audits/2026-07-26/screenshots/design-qa-comparison-dashboard-vs-agents-1280.png

The combined comparison was inspected as one image. The migrated shell matches the dashboard's galaxy field, glass hierarchy, blue-violet accent language, 248px sidebar, 62px topbar, typography, border treatment, and controlled glow budget. Both authenticated shells now render the same AppSidebar component, including its category order, labels, registered destinations, icons, counts, active states, and footer.

Navigation follow-up

The 2026-07-26 follow-up closed the remaining shell inconsistency:

• every authenticated page exposes Operations, Knowledge, Infrastructure, and Governance;
• Settings is a persistent footer destination in the dashboard and shared sidebar;
• all shared-shell entries and dashboard entries with registered destinations are semantic RouterLinks;
• Agent, Project, and Task detail routes keep their parent navigation entry active;
• mobile toggles and backdrops have accessible names and preserve the existing close behavior.

Fresh evidence:

• dashboard at 1440 x 900: docs/audits/2026-07-26/screenshots/navigation-groups-after-dashboard.png
• Settings at 1440 x 900: docs/audits/2026-07-26/screenshots/navigation-groups-after-settings.png
• Settings navigation at 375 x 812: docs/audits/2026-07-26/screenshots/navigation-groups-after-settings-375.png
• same-viewport comparison: docs/audits/2026-07-26/screenshots/navigation-groups-comparison-dashboard-vs-settings-1440.png

The authenticated route pass covered the dashboard, all 13 shared-shell index routes, and the Agent, Project, and Task detail routes. Category presence, Settings presence, route targets, active states, and document overflow passed at 1440px; representative checks also passed at 375, 768, 1024, and 1920px.

Dashboard sidebar unification

The 2026-07-27 follow-up removed the final runtime sidebar fork:

• NexusLayout.vue now renders the same AppSidebar.vue as App.vue;
• the dashboard therefore uses the same Noveria Operations branding, Lucide icons, navigation vocabulary, registered destinations, counters, Settings destination, owner control, and active-state treatment as every other authenticated route;
• the dashboard topbar toggle and backdrop now share the 900px overlay breakpoint with AppSidebar;
• dashboard content, stores, cards, task strip, chat, handlers, and data flow remain unchanged.

Evidence:

• before at 1440 x 900: docs/audits/2026-07-27/screenshots/dashboard-sidebar-before-1440.png
• shared Settings reference at 1440 x 900: docs/audits/2026-07-27/screenshots/shared-sidebar-reference-settings-1440.png
• dashboard after at 1440 x 900: docs/audits/2026-07-27/screenshots/dashboard-sidebar-after-1440.png
• dashboard after at 375 x 812: docs/audits/2026-07-27/screenshots/dashboard-sidebar-after-375.png
• same-viewport comparison: docs/audits/2026-07-27/screenshots/dashboard-vs-shared-sidebar-comparison-1440.png

The visual comparison shows identical sidebar geometry and component styling; only the expected active destination differs between Dashboard and Settings. Dashboard-to-Agents, Dashboard-to-Settings, and return navigation passed. Document overflow stayed at zero at 375, 768, 1024, 1440, and 1920px.

Dashboard orchestration focus

The 2026-07-27 workspace follow-up gives the Live-Orchestrierung the dominant geometry:

• Iris Chat is absent by default and opens from the named topbar action as a native modal dialog;
• the same chat messages, thinking/error state, and send handler remain in use;
• the status surface is one 46px row and the focus-task surface is one 44px row;
• agent cards become compact at 680px and below, and the multi-row auto-layout no longer overlaps the first agent row with Iris.

At 1440 x 1000, the orchestration canvas grew from 774 x 731px to 1152 x 808px: 48.8% more width and 10.6% more height. The former 360px chat rail consumes no workspace until invoked.

Pointer close, Escape close, initial input focus, trigger focus restoration, native modal isolation, and the enabled send state passed. Geometry passed at 375, 680, 681, 768, 1024, 1440, and 1920px with zero document overflow, clipped nodes, or node intersections.

Canonical evidence:

• docs/audits/2026-07-27/DASHBOARD_ORCHESTRATION_FOCUS.md
• docs/audits/2026-07-27/screenshots/dashboard-orchestration-before-1440.png
• docs/audits/2026-07-27/screenshots/dashboard-orchestration-after-1440.png
• docs/audits/2026-07-27/screenshots/dashboard-orchestration-after-375.png
• docs/audits/2026-07-27/screenshots/dashboard-iris-modal-after-1440.png
• docs/audits/2026-07-27/screenshots/dashboard-iris-modal-after-375.png

Route matrix

Every registered route rendered at 1440 × 900. Every migrated route also rendered at 375 × 812.

Route	1440	375	Result
/login	checked, unchanged	existing narrow audit evidence	Passed
/dashboard	fresh reference	existing narrow audit evidence	Passed
/memory	checked	checked	Passed
/docs	checked	checked	Passed
/agents/iris	checked	checked	Passed
/security	checked	checked	Passed
/incidents	checked	checked	Passed
/calendar	checked	checked	Passed
/projects	checked	checked	Passed
/projects/nexus	checked	checked	Passed
/tasks	checked	checked	Passed
/tasks/task-design	checked	checked	Passed
/agents	checked	checked	Passed
/models	checked	checked	Passed
/activity	checked	checked	Passed
/chat	checked	checked	Passed
/notifications	checked	checked	Passed
/settings	checked	checked	Passed

All route captures are stored in docs/audits/2026-07-26/screenshots/design-migration-routes/.

Responsive geometry

• Document overflow checks passed at 375, 768, 1024, 1440, and 1920px.
• Memory, Agents, Task Board, Chat, and Project Detail represent the list, grid, workspace, and detail families at 768, 1024, and 1920px.
• Final width contracts at 1920px: standard 1180px, workspace 1440px, reading/form 880px.
• At 375px, migrated route content uses a 14px inset and a 332px content width.
• The Task Board keeps one intentional internal horizontal scroller for its domain-horizontal columns; the document itself does not overflow.

Interaction and accessibility checks

Passed:

• sidebar and mobile navigation;
• Memory search and detail selection;
• Docs category filtering and detail selection;
• Activity sorting and refresh;
• Calendar refresh;
• project edit/cancel;
• task creation modal and close behavior;
• Task Board to Task Detail navigation;
• Chat send and response;
• Notifications mark-all-read;
• Settings labels and password-visibility controls;
• keyboard-equivalent agent/project navigation, accessible control names, visible focus treatment, and Lucide icon replacement.

Loading, empty, error, warning, and success surfaces remain bound to their existing state and copy. No backend, store, service, route, DTO, domain handler, chat-send behavior, task mutation, or permission contract was changed. The only composable adjustment is the responsive auto-layout spacing used to prevent agent-card overlap.

Technical gates

Gate	Result
Typecheck (vue-tsc --noEmit, the pnpm typecheck target)	Passed
Tests (vitest run, the pnpm test target)	Passed, 6 files / 12 tests
Build (vite build after the same typecheck)	Passed, 1,914 modules transformed; existing chunk-size advisory only
Backend (dotnet test, .NET 10 Release)	Passed, 312 / 312 tests
Operated browser QA	Passed; controlled fixture covered all 18 authenticated core routes
git diff --check	Passed; line-ending notices only

Design deviations

• P0: none
• P1: none
• P2: none

The final correction tightened reading/form roots to the required 880px even when a view's scoped stylesheet declared a wider local width.

Final result

Passed

OpenClaw Attach & Adopt follow-up — 2026-07-30

The agent-first integration surfaces were operated against the explicitly synthetic OpenClaw QA contract. This pass covered:

• Setup discovery, the official wizard.* flow and the experimental external-client-ID blocker;
• schema lookup plus hash-guarded config patch and verified read-back;
• live-generated agent file tabs, file write/read-back, Standing Orders and read-only custom workspace files;
• cron list, detail, creation, history and queued runId correlation; and
• sanitized models.authStatus detail without credential values, account identities or profile IDs.

The Dashboard still opens with Iris Chat absent. Its named topbar action opens one modal dialog and the close action restores the no-dialog state.

The visual pass found and corrected one P2 issue in Settings: the Setup Center and OpenClaw Config Editor were being forced into two narrow columns inside the 880px reading surface, which made the five adoption-step labels overlap. Both operational surfaces now span the full reading width; the profile cards retain their compact grid below them.

Geometry and interaction evidence

• All 18 authenticated core routes rendered at 1440 x 1000 and 375 x 812 with documentElement.scrollWidth === clientWidth.
• Dashboard, Settings, Agent Detail, Calendar and Run Control also passed at 768, 1024 and 1920px.
• Settings, Calendar, Agent Detail and Models were visually inspected at 1440px after data and interaction checks.
• Browser console result after the complete route/interaction pass: no warnings and no errors.
• Accessible names, modal semantics, focus transfer and status announcements were present for the operated controls.

Current design deviations

• P0: none
• P1: none
• P2: none after the Settings full-width correction

The corresponding functional and release-boundary evidence is recorded in docs/audits/2026-07-30/openclaw-attach-adopt/IMPLEMENTATION_AND_ACCEPTANCE.md.