SCRUM-247 — AdminUI app shell redesign¶
Plan ref: UI-2 (docs/11-admin-plane-plan.md). Stacked on SCRUM-246.
What exists¶
| Piece | Notes |
|---|---|
| Nav from the route table | RouteMeta gains navGroup (operate/content/admin), navOrder, crumbParent; src/router/nav.ts (navGroups, breadcrumbs) is pure and unit-tested. Services, Packs, Releases and Users appear automatically when their tickets add routes |
| Sidebar | Operate · Content · Admin, empty groups hidden, role-filtered as before (minRole), aria-current="page"; footer with name, email, role badges, sign out |
| Environment banner | from env.json: live red "LIVE — changes reach players" (also [LIVE] title prefix), staging amber, anything else info |
| Breadcrumbs | ui/Breadcrumbs.vue in each page's PageHeader; hidden on top-level pages |
| ⌘K / Ctrl+K palette | RoutePalette.vue: works from anywhere, focused search, substring filter over the role's pages, ↑/↓/Enter/Esc, combobox/listbox ARIA; "Search ⌘K" button in the sidebar |
| Labels | nav titles are now "Overview" and "Namespaces" (e2e selectors updated) |
How to verify¶
cd services/adminui
npm ci
npm run typecheck && npm run lint && npm run format:check && npx vitest run && npm run build
npx playwright test
npm run dev:mock # sign in as admin@example.com; press Ctrl+K and type
Results at time of writing¶
- typecheck, lint (0 warnings), prettier, vitest (232 tests), build: pass.
- Playwright: 6/6 incl. "Ctrl+K → type logs → Enter" with no click (asserts focus).
- Screenshots checked: LIVE banner, grouped sidebar, breadcrumbs on the editor, palette open with a filter.
How it was built¶
DeepSeek run scoped (Landlock) to services/adminui (493 s, ~52k output tokens,
reasoning effort low). Claude review (screenshots) found and fixed:
- the environment banner was never visible: Ionic's split pane is absolutely
positioned over the viewport and covered it;
- the palette's search box did not receive focus (focused before IonModal
finished presenting); it now focuses on did-present, the unit stub emits it like
the real modal, and the e2e types without clicking;
- the palette opened as a mostly empty full-size dialog; it is now sized to content
near the top.