# Contextual Actions Patterns UI

## Module
Web

## Status
VERIFIED

## Description
Shipped the shared contextual placement primitives used to turn restored but narrow functionality into usable owner-shell tabs, drawers, submenu pills, and list-detail layouts instead of standalone products. Watchlist, Reachability, Operations, and Workflow Replay now share one route-state contract, one contextual header model, and one drawer or detail-shell behavior.

## Implementation Details
- **Shared feature directory**: `src/Web/StellaOps.Web/src/app/shared/ui/`
- **Primary shared primitives**:
  - `context-route-state` (`src/Web/StellaOps.Web/src/app/shared/ui/context-route-state/context-route-state.ts`)
  - `context-header` (`src/Web/StellaOps.Web/src/app/shared/ui/context-header/context-header.component.ts`)
  - `context-drawer-host` (`src/Web/StellaOps.Web/src/app/shared/ui/context-drawer-host/context-drawer-host.component.ts`)
  - `list-detail-shell` (`src/Web/StellaOps.Web/src/app/shared/ui/list-detail-shell/list-detail-shell.component.ts`)
  - `overview-card-groups` (`src/Web/StellaOps.Web/src/app/shared/ui/overview-card-groups/overview-card-groups.component.ts`)
  - `tabbed-nav` (`src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts`)
- **Shared route-state keys**:
  - `tab`
  - `panel`
  - `drawer`
  - `returnTo`
  - `scope`
  - `view`
- **Adopted surfaces**:
  - `Setup > Trust & Signing > Identity Watchlist`
  - `Security > Reachability`
  - `Ops > Operations`
  - `Releases > Runs`

## E2E Test Plan
- **Setup**:
  - [ ] Log in with a user that can access `Setup`, `Security`, `Ops`, and `Releases`.
  - [ ] Ensure watchlist, reachability, operations, and release-run fixtures or seeded data exist.
- **Core verification**:
  - [ ] Verify shared tab and submenu primitives render the adopted shells without bespoke route-state code.
  - [ ] Verify contextual headers preserve return-to-context actions where shells deep-link into another owner flow.
  - [ ] Verify route-aware drawers and detail layouts preserve URL state and close behavior.
- **Adoption verification**:
  - [ ] Verify Watchlist entries use the shared list-detail and header patterns.
  - [ ] Verify Reachability tabs and PoE drill-ins use the shared contextual route-state.
  - [ ] Verify Operations overview groups use the shared grouped-card and submenu patterns.
  - [ ] Verify Workflow Replay step-detail and evidence handoff keep shared `returnTo` and drawer semantics.

## Verification
- Run:
  - `npx ng test --watch=false --include src/tests/shared/contextual-actions-patterns-ui.spec.ts --include src/tests/watchlist/identity-watchlist-management-ui.component.spec.ts --include src/tests/reachability_center/reachability-center.component.spec.ts --include src/tests/platform-ops/platform-ops-overview-page.component.spec.ts --include src/tests/workflow_visualization/run-graph-replay-page.behavior.spec.ts`
  - `npx playwright test tests/e2e/watchlist-shell.spec.ts tests/e2e/reachability-witnessing.spec.ts tests/e2e/operations-consolidation.spec.ts tests/e2e/workflow-visualization-replay.spec.ts --workers=1`
- Tier 0 (source): pass
- Tier 1 (build/tests): pass
- Tier 2 (behavior): pass
- Verified on (UTC): 2026-03-07T21:56:33.4410778Z