Skip to main content
MentatLab docs

Mission Control UI

Document path: docs/ui-mission-control.md

  1. Title and Purpose This document defines the Mission Control shell, core panels, overlays, and feature flag surfaces required to satisfy Phase 1 acceptance criteria in docs/mvp-roadmap.md, including PR-D2 requirement for annotated wireframes and file anchors. It establishes a shared contract between product, design, and engineering for MissionControlLayout, panels under services/frontend/src/components/mission-control/panels/, overlays under services/frontend/src/components/mission-control/overlays/, and service hooks in services.ts.

  2. Mission Control Shell Overview 2.1 Wireframe

%% Shell regions and responsibilities
flowchart TB
  subgraph Mission Control Shell
    direction TB
    CANVAS[Center canvas hosts graph and overlays]
    RIGHT[Right dock Issues panel with counts and filters]
    BOTTOM[Bottom dock Console and Timeline stub]
    STATUS[Status bar WS state flags summary p95 indicator]
  end
  CANVAS --- RIGHT
  CANVAS --- BOTTOM
  BOTTOM --- STATUS

2.2 Responsibilities and Anchors

  1. Canvas and Contract Overlay 3.1 CONTRACT_OVERLAY States
  • Compatible
  • Incompatible
  • Quick fix available
  • Dismissed overridden

3.2 Overlay Wireframe and State Transitions

%% Contract overlay states and transitions
flowchart LR
  COMP[Compatible]
  INCOMP[Incompatible red hint]
  QF[Quick fix available CTA]
  DISM[Dismissed overridden muted]

  COMP --> INCOMP
  INCOMP --> QF
  QF --> COMP
  INCOMP --> DISM
  DISM --> INCOMP

Anchors:

Named service hooks:

3.3 Quick-fix CTA Flow and Linter Integration

%% Quick fix flow from overlay through services and back to UI
sequenceDiagram
  participant U as User
  participant O as ContractOverlay
  participant S as MissionControl services
  participant I as IssuesPanel
  participant C as ConsolePanel

  U->>O: Click Quick fix CTA
  O->>S: Request validate and patch
  S-->>O: Return patch applied and fresh diagnostics
  O->>I: Update counts and list
  O->>C: Log action and results

Counts update location: IssuesPanel

  1. Bottom Dock: Console and Timeline Stub 4.1 Layout Wireframe
%% Bottom dock with timeline stub above console
flowchart TB
  subgraph Bottom Dock
    direction TB
    T[TIMELINE scrubber stub shows checkpoints]
    C[CONSOLE shows structured logs]
  end
  T --> C

Anchors:

Recorder hooks:

4.2 Behavior

  1. Right Dock: Issues Panel 5.1 Wireframe and Responsibilities
%% Issues panel with filters and badges
flowchart TB
  IP[Issues panel]
  F[Filters error warning info]
  L[List grouped by file edge node]
  B[Badges counts]
  IP --> F
  IP --> L
  IP --> B

Anchor:

5.2 Data Sources and Tie-ins

  1. Status Bar: Connectivity and QoS 6.1 Placement Wireframe
%% Status bar surfaces
flowchart LR
  WS[WS connected disconnected]
  FLAGS[Feature flags summary]
  P95[p95 latency R Y G]
  WS --- FLAGS --- P95

Anchors:

6.2 Indicators

  • WS Connected: connected disconnected with reconnection spinner
  • Flags summary: compact pill with active flags
  • p95 latency thresholds:
    • Green ≤ 250 ms
    • Yellow ≤ 500 ms
    • Red > 500 ms

Note: This is forward-looking to PR-MC3 and included here for placement.

  1. Feature Flags Surfaces 7.1 Flags Matrix | Flag | Default | Affects | Surfaces Toggled | | --- | --- | --- | --- | | CONTRACT_OVERLAY | On | Contract validation and quick fixes | ContractOverlay, IssuesPanel | | CONNECT_WS | On | Live connectivity and streaming | Status bar WS, streaming to ConsolePanel | | EXPERIMENTS | Off | Experimental UI toggles | Gates new panels or controls in MissionControlLayout | | LINEAGE | Off | Data lineage views | Future overlay in services/frontend/src/components/mission-control/overlays/ | | POLICY_GUARDRAILS | Off | Policy warnings blocks | Warnings in IssuesPanel and canvas callouts |

7.2 Behavior Notes

  • Flags determine visibility and interactivity, not just style.
  • Flags are summarized in status bar and should be queryable from services.ts.
  1. User Flows Mapped to Acceptance Criteria 8.1 Flow A: Fix incompatible edge Steps:
%% Flow A sequence
sequenceDiagram
  participant U as User
  participant CV as Canvas
  participant OV as ContractOverlay
  participant SV as Services
  participant IP as IssuesPanel
  U->>CV: Edit edge
  CV->>OV: Show incompatible with details
  U->>OV: Click Quick fix
  OV->>SV: Apply fix and revalidate
  SV-->>OV: Success and diagnostics
  OV->>IP: Update list and badges
  OV->>CV: Clear red hint

8.2 Flow B: Runs and QoS Steps:

%% Flow B sequence
sequenceDiagram
  participant R as Recorder
  participant TL as Timeline
  participant C as ConsolePanel
  participant SB as StatusBar
  R-->>TL: Checkpoints available
  U->>TL: Select checkpoint
  TL->>C: Scroll to related logs
  SB-->>U: QoS p95 Green

  1. Anchor Map | UI Section | Source | | --- | --- | | Shell layout | MissionControlLayout | | Contract overlay | ContractOverlay | | Console panel | ConsolePanel | | Issues panel | IssuesPanel | | Mission control services | services.ts |

  2. Assets and Conventions 10.1 Mermaid Notes

  • Prefer flowchart and sequenceDiagram for layout and flows.
  • Avoid double quotes and parentheses inside square brackets in node labels.
  • Preview options: GitHub native Mermaid preview or VS Code Mermaid extensions.

10.2 Images Directory and Naming

  • Optional images under docs/assets/ui/
  • Naming: ui-mc-shell-v1.png, ui-mc-overlay-states-v1.png, ui-mc-bottom-dock-v1.png

10.3 Badge and Iconography Legend

  • Error badge Red
  • Warning badge Yellow
  • Info badge Gray
  • Quick-fix CTA Blue
  • WS indicator Green Yellow Red
  • Icons: circle filled for status dot, triangle for warning, square for info
  1. Roadmap Tie-ins and Handoffs
  • PR-MC1: Establish shell scaffolding and panel placeholders in MissionControlLayout with bottom and right dock stubs
  • PR-MC2: Implement CONTRACT_OVERLAY states and quick-fix CTA wired to services.ts
  • PR-MC3: Add status bar WS and QoS p95 with thresholds and flags summary
  • Traceability: see acceptance criteria in docs/mvp-roadmap.md
  • Flags covered: CONTRACT_OVERLAY, CONNECT_WS, EXPERIMENTS, LINEAGE, POLICY_GUARDRAILS

Optional supporting asset:

Tooling guidance:

  • Use write_to_file (or equivalent file creation tool) to create the above files with the exact content.
  • Do not alter any other files.

Completion:

  • When finished, use the attempt_completion tool summarizing the files created/updated and confirming the content was written verbatim and links follow the name format.
Mission Control UI | MentatLab docs