UI

Director's UI is built from Matrix actors. Every page in this section describes one user-facing surface from the actual rendered components. Where a feature appears in DESIGN.md but is not yet wired, it is marked target state.

The top-level UI structure (from src/DirectorApp.ts):

director-app
├── top bar (browser/runtime labels, surface nav)
├── command bar (director-command-bar)
├── attention strip (warnings, errors)
├── pinned-targets, saved-views, recent-targets, recent-commands strips
└── one of:
    ├── director-explorer-shell  (mx-split: director-tree | director-detail)
    ├── director-workstreams-shell
    ├── director-ops-feed
    └── director-search-shell

director-detail itself contains seven always-mounted tabs (Overview, Interface, State, Cognitive, Memory, Children, Sessions) plus the Chat surface host.

Pages

• Runtime tree — left-pane actor tree.
• Actors — right-pane detail tabs (the actor inspector).
• Packages — package status, canonical-vs-compat detection.
• Logs — log half of the Ops Feed.
• Traces — trace/span half of the Ops Feed.
• Diagnostics — what Director surfaces about its own connection state.

Notes about navigation

• Surface switching: top-bar buttons or director.navigate { surface }.
• Selecting an actor: click in the tree, type in the command bar, or director.select-actor { mount }.
• History: director.history-back / director.history-forward traverse a per-surface history of { surface, selectedMount, explorerTab, searchQuery, workstreamFilter, opsFilter } snapshots maintained by DirectorApp.
• Pinned targets and saved views are persisted in localStorage by the page actor, so they survive reload but not new browser profiles.

Source: all components in projects/matrix-3/packages/director/src/components/ and the router/dispatch surface in src/DirectorApp.ts.