feat(web): run the CryptOS web UI through a design review #110

Goal

Run the existing web UI through a dedicated design review pass. The pass should produce one cohesive, polished design system and redesigns of the screens, and we then implement them in this repo. Today the UI is a set of features built one at a time: shadcn-style primitives in src/components/ui (badge, button, card, input, separator), Tailwind, and HSL tokens in src/index.css. It works, but nobody has designed it as a whole.

Brand

Use the project palette. The current tokens live in src/index.css. The primary is #2E74C0, and there are light and dark sets for background, foreground, card, muted, border, destructive, success and warning. The fonts are Inter Variable and JetBrains Mono. The design pass should refine these tokens, not replace them with a new brand. The header wordmark always reads "CryptOS". Only the operator mark inside the root topology node can be white-labelled (src/lib/branding.ts), and the redesign must keep that split.

Scope: current screens and flows

From the routes in src/App.tsx, all behind AuthGate and inside AppShell:

• Auth gate / sign-in
• App shell: navigation, header, theme toggle (src/context/theme.tsx)
• Dashboard (/)
• Fleet topology (/fleet): fleet topology, topology explorer, node detail panel
• Nodes list (/nodes)
• Node detail (/nodes/:name)
• Node config editor (/nodes/:name/config, config-form)
• Node profiles (/nodes/:name/profiles)
• Issue a certificate (/nodes/:name/issue, issue-form)
• Re-key wizard (/nodes/:name/rekey)
• Node certificate detail (/nodes/:name/certs/:serial)
• Root list and root detail (/root, /root/:name)
• Enrollment list and detail: request, approve/reject, admit (/enrollment, /enrollment/:id)
• Audit log (/audit)
• Operators (/operators): operator issue and revoke dialogs
• Adopt a node (/adopt)
• Certificates inventory (/certificates)
• Profiles list, new and detail (/profiles, /profiles/new, /profiles/:name)
• Protocols list and detail (/protocols, /protocols/:kind)
• Not found (*)
• Dialogs: revoke, decommission, escrow export, escrow import
• Shared: data table, node card, node select, identity badge, root mark

Config field coverage (required)

The UI currently drops newer config fields (#109). The redesign must cover every current config field in the node config editor and the adopt flow, not only the ones the UI shows today. At least:

• network.nameservers and network.search
• SubjectAltNames.krb5_principal, SubjectAltNames.upn, and dotted-OID ext_key_usage
• allow_request_sans
• AuditEvent.details (audit views)
• the newer status fields (feat(status): report revocation preflight and resolver source in NodeStatus api#87)

Treat the current cryptos.v1 API (the MachineConfig and related messages at api main) as the source of truth for the field list, not the stale generated stubs. Every field needs a designed control, validation, and empty/default state.

Deliverables

1. Design tokens: colour (light and dark), typography, spacing, radius, elevation and motion, delivered as an update to src/index.css / tailwind.config.js.
2. Component specs: button, input, select, badge, card, table, dialog, wizard/stepper, form field (label, help, error), status/health indicators, empty and loading states, and the topology node styles. Each spec lists variants and states.
3. Redesigned key screens, at minimum: dashboard, fleet topology, node detail, node config editor (every config field), issue/re-key flows, enrollment, certificates, audit, and sign-in.
4. Implementation plan: a phased, PR-sized breakdown. Tokens first, then primitives, then screens. Note which existing tests each phase touches.

Acceptance criteria

• Every text/background and UI-component colour pair meets WCAG 2.1 AA contrast (4.5:1 body text, 3:1 large text and non-text UI), in both themes.
• Full light and dark themes that follow the existing theme toggle, with no hard-coded colours outside the tokens.
• Responsive layouts for desktop, tablet and narrow widths. Tables and topology degrade usably.
• Keyboard navigation and visible focus states on every interactive element.
• Node config editor and adopt flow cover every current config field (see above).
• Existing page tests still pass, updated where markup changes on purpose.

Out of scope

• Backend or API changes of any kind. This is a UI/UX pass only.
• The fix(api): bump CryptOS-PKI/api so node config edits keep network.nameservers and search #109 stub bump itself. It is tracked there, but the redesign must still design for those fields.

Refs #109