Layer 1: Multipage Operator Console and Hash-Bound Approval UI

[d3v07]

using opus 4.8 on extra high effort

Before starting this issue, confirm you are using Opus 4.8 on extra high effort. Ask this every time you start a new work item.

Shared execution rules:

• Work on branch: feature/frex22-layers-1-4-operator-control
• Submit Layers 1 to 4 as one PR only.
• PR title: Build Layers 1-4 Operator, Intake, Control Plane, and Oversight UI
• d3v07 reviews that PR before any work starts on Layers 5 to 8.
• Do not change EvidencePack v1.
• Do not add API endpoints.
• Do not rename tools.
• Do not modify backend verification logic unless a frontend build cannot compile without a tiny type-safe adapter. If a backend change seems necessary, stop and ask d3v07.
• All agents remain read-only. Mutation remains backend-only after matching hash-bound approval.

Title:
Layer 1: Multipage Operator Console and Hash-Bound Approval UI

Assignee:
frex22

Branch:
feature/frex22-layers-1-4-operator-control

Context:
Use the Layer 1 architecture image as the visual spec. This layer is the operator-facing console. The dashboard must remain multipage. Do not collapse it into a single-page demo.

Goal:
Build or polish the multipage Next.js operator console so it clearly shows:

• Overview
• Run Review
• System Map
• History & Compare
• Audit View

The UI must consume EvidencePack v1 JSON only. Do not change the EvidencePack schema. Do not invent a new frontend contract.

Required pages or page-level sections:

1. Overview
   Show:

• current runs
• recent activity
• run status
• alerts or failed verification states when available

2. Run Review
   Show:

• selected EvidencePack
• short hash preview near the CTA
• full evidence hash somewhere readable and copyable
• approval gate
• before/after explain-plan diff
• trace or verification summary
• pending state for diagnosed-but-not-applied runs

Approval CTA must say exactly:
Approve this evidence hash

Do not use a generic Approve button.

3. System Map
   Show where these parts sit:

• Next.js dashboard
• FastAPI Cloud Run API
• deterministic controller
• Agent Engine roles
• MongoDB target
• Evidence Ledger
• Secret Manager
• policy and verification components if available

4. History & Compare
   Show a simple product-ready view for past runs and outcomes.
   If the backend only provides limited pack history, derive the view from existing /packs data.
   Do not add backend endpoints.

5. Audit View
   Show:

• approvals
• verification trail
• policy events if present
• trace items if present

If policy events are not present in EvidencePack v1, show a graceful empty state:
No policy events recorded for this run.

Required Safety authority section:
Add this compact section to Run Review:

Safety authority

• Agent recommendation: read-only
• Winner selection: deterministic Python
• Approval: hash-bound human decision
• Mutation: backend-only after approval
• Verification: re-explain after apply

Before/after plan diff labels:
The plan area must explicitly read like an explain-plan diff.

Use labels like:
Before: SORT present / high docs examined
After: SORT removed / index-backed query

If the run is not verified yet, use:
After: pending verification

If verification failed, use:
After: verification failed, see trace

Strict constraints:

• Do not change EvidencePack v1.
• Do not add new API endpoints.
• Do not rename tools.
• Do not make the dashboard single-page.
• Do not make the browser responsible for mutation.
• Do not let the browser see secrets.
• Do not hide failed verification states.

Acceptance criteria:

• Operator can navigate between Overview, Run Review, System Map, History & Compare, and Audit View.
• Run Review shows approval hash preview and full hash.
• Approval CTA says Approve this evidence hash.
• Safety authority section exists exactly as specified.
• Before/after plan area is understandable without reading raw JSON.
• Pending, approved, rejected, verified, and verification-failed states do not look identical.
• Mobile 390x1000 has no horizontal overflow or clipped CTA.

Tests:
Run:
cd dashboard && npm run lint
cd dashboard && ./node_modules/.bin/tsc --noEmit
cd dashboard && npm run build

Manual QA:

• desktop 1440x1100
• mobile 390x1000
• fallback example pack
• diagnosed pending approval
• approve/reject disabled or settled states
• verified happy path
• verification-failed trace state