# 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:3021/portal/** — public customer door (access-web). Loopback edge still has `/portal` on `:3000`. 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)