admin-ui-debug

Admin UI Debug

Use this skill when the root admin control surface or operator-facing UI behavior is the focus.

Evidence First

Collect:

• Screenshot or browser reproduction path.
• API payloads the UI consumes: /api/status, /api/channels/summary, launch verify, preflight, logs.
• Browser console errors.
• Whether LOCAL_READ_ONLY=1 is set.
• Mobile and desktop viewport checks for layout changes.

Design Constraints

This is an operator control surface, not a marketing dashboard. Keep it dense, dark-only, Vercel-native, and restrained. Avoid decorative cards, ornamental color, and copy that explains obvious controls.

Use existing components and patterns before adding abstractions. Keep text small enough for compact panels and ensure button/card text cannot overflow.

Fix Boundaries

• UI: src/components/designs/command-shell.tsx.
• Action/request helpers: src/components/admin-{action,request}-core.ts.
• API shape changes: affected route/shared type only.
• Design reference: .impeccable.md.

Verification

Run focused tests/typecheck and, for visual changes, use browser verification or screenshots:

node scripts/verify.mjs --steps=test,typecheck
lat check

When a dev server is needed, start it and report the URL.