Restyle staff and console UIs; add UI-Docs walkthrough and review PDF.

Match CS/sales/accounting/access-staff to the portal indigo system with dollar amounts, skip links, and empty states. Fleet replica actions move into overflow menus, roles become chips, Docs become cards, and the header copy reflects the 0.0.0.0 bind. Simulator uses the same shell (orange only for faults). Portal API keys are masked; admin customers edit in a drawer. Catalog uses system-ui. New UI-Docs repo holds screenshots, usage notes, and UI-REVIEW.pdf.
2026-09-11 18:01:33 -04:00 · 2026-09-11 18:01:33 -04:00 · cb07f5b321
commit cb07f5b321
parent ddf772454b
72 changed files with 3284 additions and 242 deletions
--- a/packages/ui-docs/WALKTHROUGH.md
+++ b/packages/ui-docs/WALKTHROUGH.md
@ -0,0 +1,127 @@
+# UI walkthrough (operator, staff, customers)
+
+Captured 2026-09-11. Browser console: no application errors on the product UIs (favicon data-URI). Design tokens: `--accent #4f46e5`, `--bg #f4f5fb`, 12px radius, indigo header.
+
+## 1. Operator console — Fleet
+
+Open **http://127.0.0.1:3850/**.
+
+![Fleet](screenshots/01-console-fleet.png)
+
+1. Header kicker reads **operator LAN · binds 0.0.0.0:3850**. NATS stays private.
+2. **Add machine:** pick roles as chips (`tree-node`, `archive-worm`, …), then **Add machine**.
+3. Machine cards show role pills and enable/disable.
+4. Services: **Health** is operational/degraded. **Power** is a status (`on` / `paused` / `off`), not a toggle.
+5. Click **⋯** on a replica or on Power for pause / resume / restart / start / stop.
+
+![Overflow](screenshots/01b-console-fleet-overflow.png)
+
+## 2. Trace
+
+Click **Trace**.
+
+![Trace](screenshots/02-console-trace.png)
+
+1. Pick an action (default Create Timestamp and Wait).
+2. Orange **Faults** box is inject-only.
+3. **Run step**. Hops wrap; module names are not clipped.
+
+![Trace run](screenshots/02b-console-trace-run.png)
+
+## 3. Docs
+
+Click **Docs**. Cards match Fleet. High-level first.
+
+![Docs](screenshots/03-console-docs.png)
+
+## 4. Standalone simulator
+
+Open **http://127.0.0.1:3847/**. Same indigo shell. Orange only on **Inject faults**.
+
+![Simulator](screenshots/04-simulator.png)
+
+**Run step** or a scenario (Register, Batch Merkle, …).
+
+![Simulator run](screenshots/04b-simulator-run.png)
+
+## 5. Customer service
+
+Open **http://127.0.0.1:3011/**.
+
+1. Customer id → **Review account**. Prepaid is dollars.
+2. **Amount (USD)** → **Apply credit**. Table lists `$5.00`, reason, agent name, when.
+
+![CS review](screenshots/05-cs.png)
+
+![CS credit](screenshots/05-cs-credit.png)
+
+## 6. Sales
+
+**http://127.0.0.1:3012/** — **Review account** or **Show quote** (named fields, not a JSON dump).
+
+![Sales](screenshots/06-sales.png)
+
+## 7. Accounting
+
+**http://127.0.0.1:3013/** — review plus **QuickBooks IIF** / **CSV**.
+
+![Accounting](screenshots/07-accounting.png)
+
+## 8. Staff access plane
+
+**http://127.0.0.1:3025/** — same review/credit UI after `verae.access.authz.check`.
+
+![Staff](screenshots/08-access-staff.png)
+
+## 9. Admin
+
+**http://127.0.0.1:3000/admin/**
+
+| Username | Password |
+|----------|----------|
+| `admin` | `admin-dev-key` |
+| `demo` | `$$$Adm1n###` |
+
+![Login](screenshots/09-admin-login.png)
+
+![Rate card](screenshots/10-admin-rate-card.png)
+
+**Customers** is a read-only list. **Edit** opens a drawer (email, type, multiplier, billing).
+
+![Customers](screenshots/12-admin-customers.png)
+
+![Drawer](screenshots/12b-admin-customer-drawer.png)
+
+Invoices empty state until you **Generate** a period.
+
+![Invoices](screenshots/14-admin-invoices.png)
+
+## 10. Customer portal
+
+**http://127.0.0.1:3000/portal/** — create an account or sign in.
+
+![Portal login](screenshots/16-portal-login.png)
+
+Dashboard: API key is **masked**. **Reveal**, **Copy** (full key to clipboard), **Regenerate**.
+
+![Dashboard](screenshots/17-portal-dashboard.png)
+
+![No invoices](screenshots/18-portal-invoices-empty.png)
+
+![Statement](screenshots/19-portal-statement.png)
+
+**API & pricing** notes that `/docs` is stock Swagger.
+
+![API](screenshots/20-portal-api-pricing.png)
+
+## 11. Swagger (not a customer surface)
+
+**http://127.0.0.1:3000/docs** — vendor Swagger UI for integrators.
+
+![Swagger](screenshots/21-swagger-stock.png)
+
+## 12. Catalog
+
+**https://zapier.georgelambert.org/** — system-ui on the indigo header (not Georgia).
+
+![Catalog](screenshots/22-catalog.png)