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