feat(ui): ship reachability witnessing shell

docs-archived/implplan/SPRINT_20260307_025_FE_reachability_witnessing_merge.md

@@ -5,7 +5,7 @@
 - Ship fully usable witness and proof flows with working routes, drawers, exports, and cross-links from findings, triage, evidence, and release contexts.
 - Complete the missing functionality so operators can actually inspect, verify, and navigate reachability proof rather than just reach routed placeholders.
 - Working directory: `src/Web/StellaOps.Web/src/app/features/reachability`.
-- Allowed coordination edits: `src/Web/StellaOps.Web/src/app/routes/`, `src/Web/StellaOps.Web/src/app/features/security-risk/`, `src/Web/StellaOps.Web/src/app/features/triage/`, `docs/modules/ui/reachability-witnessing`, and `docs/modules/ui/TASKS.md`.
+- Allowed coordination edits: `src/Web/StellaOps.Web/src/app/routes/`, `src/Web/StellaOps.Web/src/app/features/security-risk/`, `src/Web/StellaOps.Web/src/app/features/triage/`, `src/Web/StellaOps.Web/src/app/features/evidence-export/`, `src/Web.StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/`, `src/Web/StellaOps.Web/src/tests/reachability_center/`, `src/Web/StellaOps.Web/src/tests/security-risk/`, `src/Web/StellaOps.Web/src/tests/triage/`, `src/Web.StellaOps.Web/src/tests/evidence/`, `src/Web.StellaOps.Web/src/tests/releases/`, `src/Web.StellaOps.Web/tests/e2e/`, `docs/modules/ui/reachability-witnessing/`, `docs/features/checked/web/`, and `docs/modules/ui/TASKS.md`.
 - Expected evidence: mounted reachability tabs, working witness detail pages, working PoE drawer/permalink behavior, cross-shell deep links, targeted tests, and updated docs.
 
 ## Dependencies & Concurrency
@@ -32,7 +32,7 @@
 ## Delivery Tracker
 
 ### FE-RW-001 - Wire reachability witness routes and tabs into the active shell
-Status: TODO
+Status: DONE
 Dependency: none
 Owners: Product Manager, FE Architect
 Task description:
@@ -40,12 +40,12 @@ Task description:
 - Make the canonical routes and panel behavior work in the live router.
 
 Completion criteria:
-- [ ] Reachability remains the canonical owner shell in the live router.
+- [x] Reachability remains the canonical owner shell in the live router.
-- [ ] Witness and PoE routes are wired and reachable.
+- [x] Witness and PoE routes are wired and reachable.
-- [ ] Tab and panel state work in code, not only in docs.
+- [x] Tab and panel state work in code, not only in docs.
 
 ### FE-RW-002 - Ship the Witnesses list and witness-detail page
-Status: TODO
+Status: DONE
 Dependency: FE-RW-001
 Owners: Developer, FE Architect
 Task description:
@@ -53,12 +53,12 @@ Task description:
 - Ensure the detail page includes path, confidence, related evidence, and export or verify actions.
 
 Completion criteria:
-- [ ] Witness listing and filters are usable from the mounted shell.
+- [x] Witness listing and filters are usable from the mounted shell.
-- [ ] Witness detail renders the required investigation sections.
+- [x] Witness detail renders the required investigation sections.
-- [ ] Export and verify actions work from witness detail.
+- [x] Export and verify actions work from witness detail.
 
 ### FE-RW-003 - Ship PoE detail as drawer-first UX with permalink support
-Status: TODO
+Status: DONE
 Dependency: FE-RW-001
 Owners: Developer, Product Manager
 Task description:
@@ -66,12 +66,12 @@ Task description:
 - Make PoE open from witness detail and other owning workflows without creating a second proof product.
 
 Completion criteria:
-- [ ] PoE drawer is usable from witness detail and other entry points.
+- [x] PoE drawer is usable from witness detail and other entry points.
-- [ ] Permalink route works for direct proof access.
+- [x] Permalink route works for direct proof access.
-- [ ] Operators can inspect proof without leaving the owning workflow unless they choose to.
+- [x] Operators can inspect proof without leaving the owning workflow unless they choose to.
 
 ### FE-RW-004 - Wire findings, triage, evidence, and release deep links
-Status: TODO
+Status: DONE
 Dependency: FE-RW-002
 Owners: FE Architect, Developer
 Task description:
@@ -79,12 +79,12 @@ Task description:
 - Preserve `returnTo` navigation so witness and PoE inspection does not strand the operator away from the original workflow.
 
 Completion criteria:
-- [ ] Findings, triage, evidence, and release entry points open the working reachability UX.
+- [x] Findings, triage, evidence, and release entry points open the working reachability UX.
-- [ ] `returnTo` behavior preserves the original workflow context.
+- [x] `returnTo` behavior preserves the original workflow context.
-- [ ] No duplicate witness pages are required outside the reachability shell.
+- [x] No duplicate witness pages are required outside the reachability shell.
 
 ### FE-RW-005 - Complete exports, evidence cards, and proof actions
-Status: TODO
+Status: DONE
 Dependency: FE-RW-003
 Owners: Developer, Documentation author
 Task description:
@@ -92,12 +92,12 @@ Task description:
 - Align labels and affordances so exported proof remains understandable across security, evidence, and release workflows.
 
 Completion criteria:
-- [ ] Export and verify actions are usable in the shipped UI.
+- [x] Export and verify actions are usable in the shipped UI.
-- [ ] Evidence-chain and proof summary cards render in the shipped UI.
+- [x] Evidence-chain and proof summary cards render in the shipped UI.
-- [ ] Terminology is aligned across the related docs and pages.
+- [x] Terminology is aligned across the related docs and pages.
 
 ### FE-RW-006 - Verify, document, and cut over the feature
-Status: TODO
+Status: DONE
 Dependency: FE-RW-004
 Owners: QA, Documentation author
 Task description:
@@ -105,26 +105,39 @@ Task description:
 - Update reachability and evidence docs so this ships as a usable feature, not a documented merge target only.
 
 Completion criteria:
-- [ ] UI verification covers shell tabs, witness detail, and PoE detail.
+- [x] UI verification covers shell tabs, witness detail, and PoE detail.
-- [ ] Cross-shell deep links and proof actions are included in verification.
+- [x] Cross-shell deep links and proof actions are included in verification.
-- [ ] Docs reflect the mounted and usable feature.
+- [x] Docs reflect the mounted and usable feature.
 
 ## Execution Log
 | Date (UTC) | Update | Owner |
 | --- | --- | --- |
 | 2026-03-07 | Sprint created to ship witness and proof-of-exposure UX as deeper reachability functionality with reusable witness detail pages and PoE drawers across security, triage, evidence, and release flows. | Project Manager |
+| 2026-03-07 | Implementation started. Freezing one routed reachability shell with `Coverage`, `Witnesses`, `PoE / Exposure`, and `Sensor Gaps`, plus a full witness detail page and drawer-first PoE permalink flow. | Developer |
+| 2026-03-07 | Shipped canonical `Security > Reachability` routes for `coverage`, `witnesses`, `poe`, and `gaps`; replaced the placeholder witness page with a live detail view; and wired return-to-context handoffs from findings, triage, evidence replay, and release detail. | Developer |
+| 2026-03-07 | Added targeted Angular verification for reachability shell routing, witness detail, findings/triage/evidence/release handoffs, and ran `npx ng test --watch=false` against the seven reachability-focused spec files: 56 tests passed. | QA |
+| 2026-03-07 | Added Playwright behavioral coverage for witness detail and PoE flows plus Verify & Replay handoff via `npx playwright test tests/e2e/reachability-witnessing.spec.ts --workers=1`: 2 tests passed. | QA |
+| 2026-03-07 | Synced the reachability dossier, checked-feature note, task board, and archived the sprint after implementation and verification completed. | Documentation author |
 
 ## Decisions & Risks
 - Decision: `Security > Reachability` remains the owner shell for witness and proof UX.
 - Decision: witness detail is a full page; PoE is a drawer first and a permalink route second.
+- Decision: findings, triage, evidence replay, and release detail now deep-link to the same canonical reachability route family instead of owning parallel proof views.
+- Decision: witness loading falls back to deterministic fixtures when the witness API is unavailable so the shell remains inspectable offline and in failing environments.
 - Risk: evidence and release teams may create parallel proof views during implementation.
 - Mitigation: freeze deep-link and return-to-context rules before FE work begins.
 - Risk: proof terminology may drift between reachability, evidence, and decisioning docs.
 - Mitigation: align labels and actions to the reachability UX dossier before implementation starts.
+- Evidence:
+  - `docs/modules/ui/reachability-witnessing/README.md`
+  - `docs/features/checked/web/reachability-witnessing-ui.md`
+  - `src/Web/StellaOps.Web/src/tests/reachability_center/reachability-center.component.spec.ts`
+  - `src/Web/StellaOps.Web/src/tests/reachability_center/witness-page.component.spec.ts`
+  - `src/Web/StellaOps.Web/src/tests/security-risk/finding-detail-page-reachability-handoff.spec.ts`
+  - `src/Web/StellaOps.Web/src/tests/evidence/replay-controls-reachability-handoff.spec.ts`
+  - `src/Web/StellaOps.Web/tests/e2e/reachability-witnessing.spec.ts`
 - Delivery rule: this sprint is only complete when witness and PoE flows are mounted, usable from their primary and secondary entry points, and verified end to end.
 - Reference design note: `docs/modules/ui/reachability-witnessing/README.md`.
 
 ## Next Checkpoints
-- 2026-03-08: confirm shell tabs and witness versus PoE ownership boundaries.
+- 2026-03-07: archived after delivery, verification, and docs sync completed.
-- 2026-03-09: freeze witness detail, PoE drawer, and deep-link contracts.
-- 2026-03-10: finalize QA and rollout contract.

docs/features/checked/web/reachability-witnessing-ui.md

@@ -0,0 +1,53 @@
+# Reachability Witnessing UI
+
+## Module
+Web
+
+## Status
+VERIFIED
+
+## Description
+Mounted the canonical `Security > Reachability` shell for coverage, witnesses, proof-of-exposure, and sensor-gap investigation. Operators can drill from findings, triage, evidence replay, and release detail into one witness-detail experience with return-to-context preserved, drawer-first proof inspection, and export or verify actions.
+
+## Implementation Details
+- **Feature directory**: `src/Web/StellaOps.Web/src/app/features/reachability/`
+- **Primary components**:
+  - `reachability-center` (`src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts`)
+  - `witness-page` (`src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.ts`)
+  - `poe-drawer` (`src/Web/StellaOps.Web/src/app/features/reachability/poe-drawer.component.ts`)
+- **Canonical routes**:
+  - `/security/reachability/coverage`
+  - `/security/reachability/witnesses`
+  - `/security/reachability/witnesses/:witnessId`
+  - `/security/reachability/poe`
+  - `/security/reachability/poe/:artifactId`
+  - `/security/reachability/gaps`
+- **Secondary entry points**:
+  - `Security > Findings`
+  - `Triage > Artifact Workspace`
+  - `Evidence > Verify & Replay`
+  - `Releases > Detail`
+- **Source**: shipped reachability owner shell with witness-detail and PoE deep-link contract
+
+## E2E Test Plan
+- **Setup**:
+  - [ ] Log in with a user that can view Security, Evidence, and Releases.
+  - [ ] Navigate to `/security/reachability/witnesses`.
+  - [ ] Ensure witness API data exists or fallback fixtures are enabled.
+- **Core verification**:
+  - [ ] Verify `Coverage`, `Witnesses`, `PoE / Exposure`, and `Sensor Gaps` render in one mounted shell.
+  - [ ] Verify witness search, filters, and witness-detail drill-in work.
+  - [ ] Verify PoE drawer, PoE permalink route, export, and verify actions work.
+- **Cross-shell verification**:
+  - [ ] Verify findings, triage, evidence replay, and release detail link into the canonical reachability routes.
+  - [ ] Verify `returnTo` restores the original workflow context.
+  - [ ] Verify fallback fixtures render a clear degraded-mode message when the backend is unavailable.
+
+## Verification
+- Run:
+  - `npx ng test --watch=false --include src/tests/reachability_center/reachability-center.component.spec.ts --include src/tests/reachability_center/witness-page.component.spec.ts --include src/tests/security-risk/security-risk-routes.spec.ts --include src/tests/security-risk/finding-detail-page-reachability-handoff.spec.ts --include src/tests/triage/triage-workspace-with-proof-tree.behavior.spec.ts --include src/tests/evidence/replay-controls-reachability-handoff.spec.ts --include src/tests/releases/release-detail.live-refresh.spec.ts`
+  - `npx playwright test tests/e2e/reachability-witnessing.spec.ts --workers=1`
+- Tier 0 (source): pass
+- Tier 1 (build/tests): pass
+- Tier 2 (behavior): pass
+- Verified on (UTC): 2026-03-07T18:25:00Z

docs/modules/ui/README.md

@@ -16,6 +16,8 @@ The Console presents operator dashboards for scans, policies, VEX evidence, runt
 - Added restoration topic shape notes at `restoration-topics/README.md` for Watchlist, Reachability Witnessing, Platform Ops, Triage explainability, and Workflow Visualization placement.
 - Added implementation-ready UX dossiers for Watchlist, Reachability Witnessing, Platform Ops Consolidation, Triage Explainability Workspace, Workflow Visualization and Replay, and shared contextual action patterns.
 - Added FE sprint files for the five accepted restoration topics plus a shared sprint for single actions, drawers, tabs, and stray-page placement patterns.
+- Shipped the canonical `Security > Reachability` witness and proof-of-exposure shell, including cross-shell handoffs from findings, triage, evidence replay, and release detail.
+- Added checked-feature verification for reachability witnessing at `../../features/checked/web/reachability-witnessing-ui.md`.
 
 ## Latest updates (2026-02-21)
 - Runtime mock cutover completed for policy simulation history/conflict/batch flows and graph explorer data loading in `src/Web/StellaOps.Web/src/app/**`.

docs/modules/ui/TASKS.md

@@ -9,7 +9,6 @@
 - `docs/implplan/SPRINT_20260307_009_DOCS_ui_component_preservation_map.md`
 - `docs/implplan/SPRINT_20260307_022_FE_policy_vex_release_decisioning_studio.md`
 - `docs/implplan/SPRINT_20260307_023_DOCS_ui_restoration_topic_shapes.md`
-- `docs/implplan/SPRINT_20260307_025_FE_reachability_witnessing_merge.md`
 - `docs/implplan/SPRINT_20260307_026_FE_platform_ops_consolidation.md`
 - `docs/implplan/SPRINT_20260307_027_FE_triage_explainability_workspace.md`
 - `docs/implplan/SPRINT_20260307_028_FE_workflow_visualization_replay.md`
@@ -77,12 +76,12 @@
 - [DONE] FE-WL-004 Tuning tab and operational diagnostics
 - [DONE] FE-WL-005 Cross-product surfacing and deep links for Watchlist
 - [DONE] FE-WL-006 QA, rollout, and docs sync for Watchlist
-- [TODO] FE-RW-001 Freeze reachability shell tabs and route contract
+- [DONE] FE-RW-001 Freeze reachability shell tabs and route contract
-- [TODO] FE-RW-002 Witnesses tab and witness-detail page slice
+- [DONE] FE-RW-002 Witnesses tab and witness-detail page slice
-- [TODO] FE-RW-003 PoE drawer and permalink route contract
+- [DONE] FE-RW-003 PoE drawer and permalink route contract
-- [TODO] FE-RW-004 Cross-product deep links and release-context use for reachability proofs
+- [DONE] FE-RW-004 Cross-product deep links and release-context use for reachability proofs
-- [TODO] FE-RW-005 Supporting evidence and export surfaces for witness UX
+- [DONE] FE-RW-005 Supporting evidence and export surfaces for witness UX
-- [TODO] FE-RW-006 QA, rollout, and docs sync for reachability witnessing
+- [DONE] FE-RW-006 QA, rollout, and docs sync for reachability witnessing
 - [TODO] FE-PO-001 Freeze Operations overview taxonomy and submenu structure
 - [TODO] FE-PO-002 Overview page regrouping and blocking-card contract
 - [TODO] FE-PO-003 Legacy widget absorption matrix for Platform Ops

docs/modules/ui/implementation_plan.md

@@ -13,7 +13,6 @@ Provide a living plan for UI deliverables, dependencies, and evidence.
 - `SPRINT_20260307_009_DOCS_ui_component_preservation_map.md` - per-component preservation dossiers for unused and weakly surfaced console UI components.
 - `SPRINT_20260307_022_FE_policy_vex_release_decisioning_studio.md` - canonical Decisioning Studio shell to unify policy, simulation, VEX decisioning, and release-context gate explanation.
 - `SPRINT_20260307_023_DOCS_ui_restoration_topic_shapes.md` - documentation prerequisite for shell/menu/tab placements; not a product-delivery sprint by itself.
-- `SPRINT_20260307_025_FE_reachability_witnessing_merge.md` - ship witness and proof-of-exposure UX inside Security > Reachability with working cross-shell deep links.
 - `SPRINT_20260307_026_FE_platform_ops_consolidation.md` - ship one Operations shell with grouped overview cards, legacy widget absorption, and legacy redirects.
 - `SPRINT_20260307_027_FE_triage_explainability_workspace.md` - ship the artifact workspace lane model, explainability panels, and audit-bundle flows.
 - `SPRINT_20260307_028_FE_workflow_visualization_replay.md` - ship run-detail graph, timeline, replay, and evidence tabs plus bounded workflow-editor preview reuse.
@@ -26,6 +25,7 @@ Provide a living plan for UI deliverables, dependencies, and evidence.
 - `docs/modules/ui/policy-decisioning-studio/README.md` - proposed Decisioning Studio product shape, tab model, route contract, and Release Orchestrator integration boundary.
 - `docs/modules/ui/restoration-topics/README.md` - detailed placement notes for the next restoration topics after Decisioning Studio.
 - `docs/modules/ui/watchlist-operations/README.md` - detailed watchlist UX dossier and owner-shell contract.
+- `docs/features/checked/web/reachability-witnessing-ui.md` - shipped verification note for the canonical Reachability witness and PoE shell.
 - `docs/features/checked/web/identity-watchlist-management-ui.md` - shipped verification note for the Trust & Signing watchlist shell and its Mission Control / Notifications handoffs.
 - `docs/modules/ui/reachability-witnessing/README.md` - detailed witness and proof UX dossier plus cross-shell deep-link contract.
 - `docs/modules/ui/platform-ops-consolidation/README.md` - detailed Operations overview taxonomy and legacy absorption plan.

docs/modules/ui/reachability-witnessing/README.md

@@ -1,5 +1,9 @@
 # Reachability Witnessing
 
+**Status:** Implemented
+**Owner shell:** `Security > Reachability`
+**Canonical routes:** `/security/reachability/coverage`, `/security/reachability/witnesses`, `/security/reachability/witnesses/:witnessId`, `/security/reachability/poe`, `/security/reachability/poe/:artifactId`, `/security/reachability/gaps`
+
 ## Recommendation
 
 Restore witness and proof-of-exposure UX as a deeper part of `Security > Reachability`, not as a standalone product.
@@ -161,6 +165,31 @@ Keep one canonical route family under security reachability.
 - `Decisioning Studio` or `Releases`
   - open witness and proof for gate verdict explanation
 
+## Shipped Behavior
+
+### Mounted shell
+- `Coverage` remains the default entry and keeps the fleet posture summary.
+- `Witnesses` ships a searchable, filterable list with confidence and verdict filters.
+- `PoE / Exposure` keeps drawer-first inspection and supports direct permalink routes for export and audit use.
+- `Sensor Gaps` stays inside the same shell rather than fragmenting into a separate product.
+
+### Witness detail
+- Loads the requested witness from the witness API when available.
+- Falls back to deterministic reachability fixtures when the backend is unavailable.
+- Ships call-path, gate, caveat, evidence-chain, runtime-observation, and related-context sections.
+- Supports verify, JSON export, DOT export, Mermaid export, and PoE drill-in actions.
+
+### Proof-of-exposure detail
+- Opens by default as a contextual drawer from witness or shell entry points.
+- Supports direct navigation through `/security/reachability/poe/:artifactId`.
+- Preserves operator context with `returnTo` when launched from findings, triage, evidence replay, or release detail.
+
+### Cross-product handoffs
+- `Security > Findings` links into canonical witness routes instead of owning a second proof view.
+- `Triage > Artifact Workspace` restores the selected finding and tab when returning from reachability.
+- `Evidence > Verify & Replay` links the current request into reachability proof review.
+- `Releases > Detail` links release-gate investigation into reachability without branching to a parallel shell.
+
 ## UI Standards For Implementation
 
 - Keep witness detail as the canonical deep-link target.
@@ -169,6 +198,12 @@ Keep one canonical route family under security reachability.
 - Reuse evidence cards and path visualizations across security, evidence, and release entry points.
 - Keep graph and proof loading deterministic and evidence-first.
 
+## Verification Status
+
+- Angular verification: targeted route, witness-detail, handoff, and release-context tests passed on 2026-03-07.
+- Playwright verification: witness detail, PoE drawer/permalink, and Verify & Replay handoff passed on 2026-03-07.
+- Checked feature note: `docs/features/checked/web/reachability-witnessing-ui.md`
+
 ## Non-Goals
 
 - Do not create a top-level `Witnessing` product.

src/Web/StellaOps.Web/src/app/features/evidence-export/replay-controls.component.ts

@@ -3,9 +3,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  inject,
   signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
   ReplayDifference,
   ReplayRequest,
@@ -25,6 +27,14 @@ import {
       <header class="page-header">
         <h1>Verdict Replay</h1>
         <p>Re-evaluate verdicts for determinism verification and audit trails.</p>
+        @if (releaseId() || runId()) {
+          <p class="replay-context">
+            Context:
+            <code>{{ releaseId() || 'release-unset' }}</code>
+            /
+            <code>{{ runId() || 'run-unset' }}</code>
+          </p>
+        }
       </header>
 
       <!-- Request New Replay -->
@@ -109,6 +119,12 @@ import {
                     </div>
                   </div>
 
+                  <div class="context-actions">
+                    <button class="btn btn-secondary" (click)="openReachabilityWorkspace(request)">
+                      Open reachability proof
+                    </button>
+                  </div>
+
                   @if (request.status === 'running') {
                     <div class="running-indicator">
                       <div class="spinner"></div>
@@ -260,6 +276,11 @@ import {
       }
     }
 
+    .replay-context {
+      margin-top: 0.5rem !important;
+      font-size: 0.875rem;
+    }
+
     section {
       margin-bottom: 2.5rem;
     }
@@ -401,6 +422,10 @@ import {
       background: var(--color-surface-tertiary);
     }
 
+    .context-actions {
+      margin-bottom: 1rem;
+    }
+
     .details-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -674,11 +699,20 @@ import {
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReplayControlsComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+
   replayTarget = '';
   replayReason = '';
   statusFilter = '';
 
   readonly expandedRequest = signal<string | null>(null);
+  readonly releaseId = signal<string | null>(
+    this.route.snapshot.queryParamMap.get('releaseId')
+  );
+  readonly runId = signal<string | null>(
+    this.route.snapshot.queryParamMap.get('runId')
+  );
 
   readonly requests = signal<ReplayRequest[]>([
     {
@@ -768,6 +802,18 @@ export class ReplayControlsComponent {
     return { totalReplays, matchCount, mismatchCount, matchRate };
   });
 
+  constructor() {
+    this.route.queryParamMap.subscribe((params) => {
+      this.releaseId.set(params.get('releaseId'));
+      this.runId.set(params.get('runId'));
+
+      const requestId = params.get('requestId');
+      if (requestId) {
+        this.expandedRequest.set(requestId);
+      }
+    });
+  }
+
   toggleRequest(requestId: string): void {
     this.expandedRequest.set(
       this.expandedRequest() === requestId ? null : requestId
@@ -778,6 +824,25 @@ export class ReplayControlsComponent {
     return this.results().get(requestId);
   }
 
+  openReachabilityWorkspace(request?: ReplayRequest): void {
+    const target = request ?? this.getActiveReplayRequest();
+    const queryParams: Record<string, string> = {
+      search: this.reachabilitySearchTarget(target),
+      returnTo: this.buildReplayReturnTo(target),
+    };
+
+    if (this.releaseId()) {
+      queryParams['releaseId'] = this.releaseId()!;
+    }
+    if (this.runId()) {
+      queryParams['runId'] = this.runId()!;
+    }
+
+    void this.router.navigate(['/security/reachability/witnesses'], {
+      queryParams,
+    });
+  }
+
   requestReplay(): void {
     const newRequest: ReplayRequest = {
       id: `rr-${Date.now()}`,
@@ -824,4 +889,36 @@ export class ReplayControlsComponent {
     if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
     return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
   }
+
+  private getActiveReplayRequest(): ReplayRequest | undefined {
+    const expandedId = this.expandedRequest();
+    if (expandedId) {
+      return this.requests().find((request) => request.id === expandedId);
+    }
+    return this.filteredRequests()[0];
+  }
+
+  private reachabilitySearchTarget(request?: ReplayRequest): string {
+    return request?.verdictId || request?.imageRef || this.replayTarget || this.runId() || 'replay';
+  }
+
+  private buildReplayReturnTo(request?: ReplayRequest): string {
+    const queryParams: Record<string, string> = {};
+
+    if (request?.id) {
+      queryParams['requestId'] = request.id;
+    }
+    if (this.releaseId()) {
+      queryParams['releaseId'] = this.releaseId()!;
+    }
+    if (this.runId()) {
+      queryParams['runId'] = this.runId()!;
+    }
+
+    return this.router.serializeUrl(
+      this.router.createUrlTree(['/evidence', 'verify-replay'], {
+        queryParams,
+      })
+    );
+  }
 }

src/Web/StellaOps.Web/src/app/features/reachability/poe-drawer.component.ts

@@ -11,10 +11,8 @@
  * - Reproducibility instructions
  */
 
-import { Component, input, output, computed, signal } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 
-import { PathViewerComponent } from './components/path-viewer/path-viewer.component';
-import { PoEBadgeComponent } from '../../shared/components/poe-badge.component';
 import { RekorLinkComponent } from '../../shared/components/rekor-link.component';
 
 /**
@@ -93,9 +91,15 @@ export interface PoEEdge {
 @Component({
   selector: 'app-poe-drawer',
   standalone: true,
-  imports: [PathViewerComponent, PoEBadgeComponent, RekorLinkComponent],
+  imports: [RekorLinkComponent],
   template: `
-    <div class="poe-drawer" [class.poe-drawer--open]="open()" role="complementary" [attr.aria-hidden]="!open()">
+    <div
+      class="poe-drawer"
+      [class.poe-drawer--open]="open()"
+      role="complementary"
+      [attr.aria-hidden]="!open()"
+      data-testid="poe-drawer"
+    >
       <!-- Backdrop -->
       <div
         class="poe-drawer__backdrop"
@@ -121,6 +125,7 @@ export interface PoEEdge {
               class="poe-drawer__close"
               (click)="handleClose()"
               aria-label="Close PoE drawer"
+              data-testid="poe-drawer-close"
             >
               <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
@@ -295,6 +300,7 @@ export interface PoEEdge {
                 type="button"
                 class="poe-drawer__action poe-drawer__action--primary"
                 (click)="handleExport()"
+                data-testid="poe-export-btn"
               >
                 Export PoE Artifact
               </button>
@@ -302,6 +308,7 @@ export interface PoEEdge {
                 type="button"
                 class="poe-drawer__action poe-drawer__action--secondary"
                 (click)="handleVerify()"
+                data-testid="poe-verify-btn"
               >
                 Verify Offline
               </button>
@@ -318,25 +325,22 @@ export interface PoEEdge {
   styles: [`
     .poe-drawer {
       position: fixed;
-      top: 0;
+      inset: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
       z-index: 1000;
       pointer-events: none;
-      transition: opacity 0.3s;
       opacity: 0;
+      transition: opacity 0.3s ease;
+    }
 
-      &--open {
+    .poe-drawer--open {
-        pointer-events: auto;
+      pointer-events: auto;
-        opacity: 1;
+      opacity: 1;
-      }
     }
 
     .poe-drawer__backdrop {
       position: absolute;
       inset: 0;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgb(0 0 0 / 0.48);
       backdrop-filter: blur(2px);
     }
 
@@ -345,17 +349,17 @@ export interface PoEEdge {
       top: 0;
       right: 0;
       bottom: 0;
-      width: min(600px, 90vw);
+      width: min(640px, 92vw);
-      background: var(--color-surface-primary);
-      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
       display: flex;
       flex-direction: column;
+      background: var(--color-surface-primary);
+      box-shadow: -4px 0 16px rgb(0 0 0 / 0.22);
       transform: translateX(100%);
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
-      .poe-drawer--open & {
+    .poe-drawer--open .poe-drawer__panel {
-        transform: translateX(0);
+      transform: translateX(0);
-      }
     }
 
     .poe-drawer__header {
@@ -368,38 +372,38 @@ export interface PoEEdge {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 1rem;
       margin-bottom: 1rem;
     }
 
     .poe-drawer__title {
+      margin: 0;
       font-size: 1.25rem;
       font-weight: var(--font-weight-semibold);
-      margin: 0;
     }
 
     .poe-drawer__close {
-      background: none;
       border: none;
-      font-size: 1.5rem;
+      background: transparent;
+      color: inherit;
       cursor: pointer;
       padding: 0.25rem;
       line-height: 1;
-      opacity: 0.6;
+      opacity: 0.72;
-      transition: opacity 0.15s;
+    }
 
-      &:hover {
+    .poe-drawer__close:hover {
-        opacity: 1;
+      opacity: 1;
-      }
     }
 
     .poe-drawer__meta {
-      display: flex;
+      display: grid;
-      flex-direction: column;
       gap: 0.5rem;
     }
 
     .poe-drawer__meta-item {
       display: flex;
+      flex-wrap: wrap;
       gap: 0.5rem;
       font-size: 0.875rem;
     }
@@ -410,7 +414,7 @@ export interface PoEEdge {
     }
 
     .poe-drawer__meta-value {
-      font-family: 'Monaco', 'Menlo', monospace;
+      font-family: ui-monospace, SFMono-Regular, monospace;
       font-size: 0.8125rem;
       word-break: break-all;
     }
@@ -423,16 +427,16 @@ export interface PoEEdge {
 
     .poe-drawer__section {
       margin-bottom: 2rem;
+    }
 
-      &:last-child {
+    .poe-drawer__section:last-child {
-        margin-bottom: 0;
+      margin-bottom: 0;
-      }
     }
 
     .poe-drawer__section-title {
+      margin: 0 0 1rem;
       font-size: 1rem;
       font-weight: var(--font-weight-semibold);
-      margin: 0 0 1rem;
     }
 
     .poe-drawer__status-grid {
@@ -448,32 +452,28 @@ export interface PoEEdge {
       font-size: 0.875rem;
     }
 
-    .poe-drawer__status-icon {
-      font-size: 1.25rem;
-    }
-
     .poe-drawer__status-valid {
       color: var(--color-status-success);
       font-weight: var(--font-weight-medium);
     }
 
     .poe-drawer__paths {
-      display: flex;
+      display: grid;
-      flex-direction: column;
+      gap: 1.25rem;
-      gap: 1.5rem;
     }
 
     .poe-drawer__path {
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-md);
-      padding: 1rem;
       background: var(--color-surface-secondary);
+      padding: 1rem;
     }
 
     .poe-drawer__path-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      gap: 0.75rem;
+      flex-wrap: wrap;
       margin-bottom: 1rem;
       font-size: 0.875rem;
     }
@@ -488,16 +488,15 @@ export interface PoEEdge {
     }
 
     .poe-drawer__path-viz {
-      display: flex;
+      display: grid;
-      flex-direction: column;
       gap: 0.5rem;
     }
 
     .poe-drawer__node {
-      padding: 0.75rem;
-      background: var(--color-surface-primary);
       border: 1px solid var(--color-border-primary);
       border-radius: var(--radius-sm);
+      background: var(--color-surface-primary);
+      padding: 0.75rem;
     }
 
     .poe-drawer__node--entry {
@@ -509,16 +508,16 @@ export interface PoEEdge {
     }
 
     .poe-drawer__node-symbol {
-      font-family: 'Monaco', 'Menlo', monospace;
+      font-family: ui-monospace, SFMono-Regular, monospace;
       font-size: 0.8125rem;
       font-weight: var(--font-weight-medium);
       word-break: break-all;
     }
 
     .poe-drawer__node-location {
+      margin-top: 0.25rem;
       font-size: 0.75rem;
       color: var(--color-text-secondary);
-      margin-top: 0.25rem;
     }
 
     .poe-drawer__arrow {
@@ -544,8 +543,8 @@ export interface PoEEdge {
 
     .poe-drawer__guard {
       background: var(--color-surface-tertiary);
-      padding: 0.25rem 0.5rem;
       border-radius: var(--radius-sm);
+      padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
     }
 
@@ -554,33 +553,33 @@ export interface PoEEdge {
       grid-template-columns: auto 1fr;
       gap: 0.75rem 1rem;
       font-size: 0.875rem;
+    }
 
-      dt {
+    .poe-drawer__metadata dt {
-        font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
-        color: var(--color-text-secondary);
+      color: var(--color-text-secondary);
-      }
+    }
 
-      dd {
+    .poe-drawer__metadata dd {
-        margin: 0;
+      margin: 0;
-        word-break: break-all;
+      word-break: break-all;
-      }
+    }
 
-      code {
+    .poe-drawer__metadata code {
-        font-family: 'Monaco', 'Menlo', monospace;
+      font-family: ui-monospace, SFMono-Regular, monospace;
-        font-size: 0.8125rem;
+      font-size: 0.8125rem;
-      }
     }
 
     .poe-drawer__hash {
-      background: var(--color-surface-tertiary);
-      padding: 0.25rem 0.5rem;
-      border-radius: var(--radius-sm);
       display: inline-block;
+      background: var(--color-surface-tertiary);
+      border-radius: var(--radius-sm);
+      padding: 0.25rem 0.5rem;
     }
 
     .poe-drawer__repro-intro {
-      font-size: 0.875rem;
       margin: 0 0 0.75rem;
+      font-size: 0.875rem;
     }
 
     .poe-drawer__repro-steps {
@@ -588,10 +587,10 @@ export interface PoEEdge {
       padding-left: 1.5rem;
       font-size: 0.875rem;
       line-height: 1.6;
+    }
 
-      li {
+    .poe-drawer__repro-steps li {
-        margin-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
-      }
     }
 
     .poe-drawer__actions {
@@ -599,36 +598,28 @@ export interface PoEEdge {
       gap: 0.75rem;
       padding: 1rem 1.5rem;
       border-top: 1px solid var(--color-border-primary);
+      flex-shrink: 0;
     }
 
     .poe-drawer__action {
       flex: 1;
-      padding: 0.75rem 1rem;
       border-radius: var(--radius-sm);
+      padding: 0.75rem 1rem;
       font-size: 0.875rem;
       font-weight: var(--font-weight-medium);
       cursor: pointer;
-      transition: all 0.15s;
+    }
 
-      &--primary {
+    .poe-drawer__action--primary {
-        background: var(--color-brand-primary);
+      border: none;
-        color: var(--color-surface-primary);
+      background: var(--color-brand-primary);
-        border: none;
+      color: var(--color-text-heading);
+    }
 
-        &:hover {
+    .poe-drawer__action--secondary {
-          background: var(--color-brand-primary-hover);
+      border: 1px solid var(--color-border-primary);
-        }
+      background: var(--color-surface-secondary);
-      }
+      color: var(--color-text-primary);
-
-      &--secondary {
-        background: var(--color-surface-secondary);
-        color: var(--color-text-primary);
-        border: 1px solid var(--color-border-primary);
-
-        &:hover {
-          background: var(--color-surface-tertiary);
-        }
-      }
     }
 
     .poe-drawer__empty {
@@ -636,6 +627,12 @@ export interface PoEEdge {
       padding: 3rem 1rem;
       color: var(--color-text-secondary);
     }
+
+    @media (max-width: 720px) {
+      .poe-drawer__actions {
+        flex-direction: column;
+      }
+    }
   `]
 })
 export class PoEDrawerComponent {
@@ -681,7 +678,14 @@ export class PoEDrawerComponent {
   }
 
   formatDate(isoDate: string): string {
-    return new Date(isoDate).toLocaleString();
+    return new Intl.DateTimeFormat('en-US', {
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      month: 'short',
+      timeZone: 'UTC',
+      year: 'numeric',
+    }).format(new Date(isoDate));
   }
 
   hasGuards(path: PoEPath): boolean {

src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.html

@@ -0,0 +1,326 @@
+<section class="reachability-shell" data-testid="reachability-page">
+  <header class="shell-header">
+    <div>
+      <p class="eyebrow">Security / Reachability</p>
+      <h1>Reachability</h1>
+      <p class="subtitle">
+        Coverage, witnesses, proof-of-exposure artifacts, and sensor gaps stay in one investigation shell.
+      </p>
+    </div>
+
+    <div class="header-actions">
+      @if (returnTo()) {
+        <button
+          type="button"
+          class="btn-secondary"
+          (click)="returnToSource()"
+          data-testid="reachability-return-btn"
+        >
+          Return to {{ returnToLabel() }}
+        </button>
+      }
+      <button
+        type="button"
+        class="btn-secondary"
+        (click)="loadWitnesses()"
+        data-testid="reachability-refresh-btn"
+      >
+        Refresh witnesses
+      </button>
+    </div>
+  </header>
+
+  @if (message()) {
+    <div class="message-banner" [class.error]="messageType() === 'error'">
+      <span>{{ message() }}</span>
+      <button type="button" class="dismiss" (click)="message.set(null)">Close</button>
+    </div>
+  }
+
+  <section class="summary-grid">
+    <article class="summary-card">
+      <span class="label">Healthy assets</span>
+      <strong>{{ okCount() }}</strong>
+      <span>{{ fleetCoveragePercent() }}% fleet coverage</span>
+    </article>
+    <article class="summary-card summary-card--warning">
+      <span class="label">Stale facts</span>
+      <strong>{{ staleCount() }}</strong>
+      <span>{{ staleWitnessCount() }} stale witness observations</span>
+    </article>
+    <article class="summary-card summary-card--danger">
+      <span class="label">Missing sensors</span>
+      <strong>{{ missingCount() }}</strong>
+      <span>{{ sensorCoveragePercent() }}% sensor coverage</span>
+    </article>
+    <article class="summary-card summary-card--info">
+      <span class="label">Confirmed witnesses</span>
+      <strong>{{ confirmedWitnessCount() }}</strong>
+      <span>{{ witnesses().length }} total witness records</span>
+    </article>
+  </section>
+
+  <nav class="tab-strip" aria-label="Reachability tabs">
+    <button
+      type="button"
+      data-testid="reachability-tab-coverage"
+      [class.active]="activeTab() === 'coverage'"
+      (click)="showCoverage()"
+    >
+      Coverage
+    </button>
+    <button
+      type="button"
+      data-testid="reachability-tab-witnesses"
+      [class.active]="activeTab() === 'witnesses'"
+      (click)="showWitnesses()"
+    >
+      Witnesses
+    </button>
+    <button
+      type="button"
+      data-testid="reachability-tab-poe"
+      [class.active]="activeTab() === 'poe'"
+      (click)="showPoE()"
+    >
+      PoE / Exposure
+    </button>
+    <button
+      type="button"
+      data-testid="reachability-tab-gaps"
+      [class.active]="activeTab() === 'gaps'"
+      (click)="showGaps()"
+    >
+      Sensor Gaps
+    </button>
+  </nav>
+
+  @if (activeTab() === 'coverage') {
+    <section class="panel-stack">
+      <div class="filter-pills">
+        <button type="button" class="pill" [class.pill--active]="coverageStatusFilter() === 'all'" (click)="setCoverageStatusFilter('all')">
+          All
+        </button>
+        <button type="button" class="pill" [class.pill--active]="coverageStatusFilter() === 'ok'" (click)="setCoverageStatusFilter('ok')">
+          Healthy
+        </button>
+        <button type="button" class="pill" [class.pill--active]="coverageStatusFilter() === 'stale'" (click)="setCoverageStatusFilter('stale')">
+          Stale
+        </button>
+        <button type="button" class="pill" [class.pill--active]="coverageStatusFilter() === 'missing'" (click)="setCoverageStatusFilter('missing')">
+          Missing
+        </button>
+      </div>
+
+      <div class="table-panel">
+        <table>
+          <thead>
+            <tr>
+              <th>Asset</th>
+              <th>Environment</th>
+              <th>Coverage</th>
+              <th>Sensors</th>
+              <th>Last fact</th>
+              <th>Hot CVEs</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of filteredCoverageRows(); track row.assetId) {
+              <tr>
+                <td><code>{{ row.assetId }}</code></td>
+                <td>{{ row.environment }}</td>
+                <td>{{ row.coveragePercent }}%</td>
+                <td>{{ row.sensorsOnline }}/{{ row.sensorsExpected }}</td>
+                <td>{{ formatDate(row.lastFactAt) }}</td>
+                <td>
+                  <div class="chip-row">
+                    @for (cve of row.hotCves; track cve) {
+                      <span class="chip">{{ cve }}</span>
+                    }
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </section>
+  }
+
+  @if (activeTab() === 'witnesses') {
+    <section class="panel-stack">
+      <div class="toolbar">
+        <label class="field field--search">
+          <span>Search</span>
+          <input
+            type="search"
+            [value]="witnessSearch()"
+            placeholder="Search witness id, CVE, package, or purl"
+            (input)="onWitnessSearch($any($event.target).value)"
+            data-testid="reachability-witness-search"
+          />
+        </label>
+
+        <label class="field">
+          <span>Tier</span>
+          <select
+            [value]="tierFilter()"
+            (change)="onTierFilter($any($event.target).value)"
+            data-testid="reachability-tier-filter"
+          >
+            <option value="">All tiers</option>
+            <option value="confirmed">Confirmed</option>
+            <option value="likely">Likely</option>
+            <option value="present">Present</option>
+            <option value="unreachable">Unreachable</option>
+            <option value="unknown">Unknown</option>
+          </select>
+        </label>
+
+        <label class="field">
+          <span>Verdict</span>
+          <select
+            [value]="witnessVerdictFilter()"
+            (change)="onWitnessVerdictFilter($any($event.target).value)"
+            data-testid="reachability-verdict-filter"
+          >
+            <option value="all">All</option>
+            <option value="reachable">Reachable</option>
+            <option value="unreachable">Unreachable</option>
+          </select>
+        </label>
+      </div>
+
+      @if (witnessLoading()) {
+        <div class="empty-state">Loading witnesses...</div>
+      } @else if (!filteredWitnesses().length) {
+        <div class="empty-state">No witnesses match the current filters.</div>
+      } @else {
+        <div class="table-panel">
+          <table>
+            <thead>
+              <tr>
+                <th>Witness</th>
+                <th>CVE</th>
+                <th>Package</th>
+                <th>Tier</th>
+                <th>Confidence</th>
+                <th>Observed</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (witness of filteredWitnesses(); track trackByWitness($index, witness)) {
+                <tr data-testid="witness-row">
+                  <td>
+                    <strong>{{ witness.witnessId }}</strong>
+                    <span class="subtle">{{ reachabilityLabel(witness) }}</span>
+                  </td>
+                  <td>{{ witness.cveId ?? witness.vulnId }}</td>
+                  <td>
+                    <div>{{ witness.packageName }}</div>
+                    <div class="subtle">{{ witness.packageVersion ?? 'n/a' }}</div>
+                  </td>
+                  <td><span class="chip chip--tier">{{ witness.confidenceTier }}</span></td>
+                  <td>{{ confidenceLabel(witness) }}</td>
+                  <td>{{ formatDate(witness.observedAt) }}</td>
+                  <td class="actions-cell">
+                    <a
+                      class="btn-link"
+                      [routerLink]="['/security/reachability/witnesses', witness.witnessId]"
+                      [queryParams]="{ returnTo: router.url, findingId: witness.vulnId }"
+                    >
+                      Open witness
+                    </a>
+                    <button
+                      type="button"
+                      class="btn-link"
+                      (click)="openPoeArtifact(artifactRouteId(witness.cveId ?? witness.vulnId))"
+                      data-testid="open-poe-from-witness-row"
+                    >
+                      Open PoE
+                    </button>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </section>
+  }
+
+  @if (activeTab() === 'poe') {
+    <section class="panel-stack">
+      @if (!poeArtifacts().length) {
+        <div class="empty-state">No proof-of-exposure artifacts are available.</div>
+      } @else {
+        <div class="table-panel">
+          <table>
+            <thead>
+              <tr>
+                <th>Proof</th>
+                <th>Component</th>
+                <th>Signed</th>
+                <th>Rekor</th>
+                <th>Generated</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (artifact of poeArtifacts(); track artifact.vulnId) {
+                <tr data-testid="poe-row">
+                  <td>
+                    <strong>{{ artifact.vulnId }}</strong>
+                    <span class="subtle">{{ artifact.paths.length }} path(s)</span>
+                  </td>
+                  <td><code>{{ artifact.componentPurl }}</code></td>
+                  <td>{{ artifact.isSigned ? 'Signed' : 'Unsigned' }}</td>
+                  <td>{{ artifact.hasRekorTimestamp ? 'Present' : 'Missing' }}</td>
+                  <td>{{ formatDate(artifact.generatedAt) }}</td>
+                  <td class="actions-cell">
+                    <button
+                      type="button"
+                      class="btn-link"
+                      (click)="openPoeArtifact(artifactRouteId(artifact.vulnId))"
+                    >
+                      Inspect proof
+                    </button>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </section>
+  }
+
+  @if (activeTab() === 'gaps') {
+    <section class="panel-stack">
+      <div class="gap-grid">
+        @for (gap of gapRows(); track trackByGap($index, gap)) {
+          <article class="gap-card" [class.gap-card--critical]="gap.severity === 'critical'">
+            <div class="gap-header">
+              <strong>{{ gap.assetId }}</strong>
+              <span class="chip">{{ gap.owner }}</span>
+            </div>
+            <ul>
+              @for (item of gap.backlog; track item) {
+                <li>{{ item }}</li>
+              }
+            </ul>
+          </article>
+        }
+      </div>
+    </section>
+  }
+
+  <app-poe-drawer
+    [open]="activeTab() === 'poe' && !!selectedPoeArtifact()"
+    [poeArtifact]="selectedPoeArtifact()"
+    (close)="closePoeDrawer()"
+    (exportPoE)="exportSelectedPoe()"
+    (verifyPoE)="verifySelectedPoe()"
+  />
+</section>

src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.scss

@@ -0,0 +1,319 @@
+:host {
+  display: block;
+}
+
+.reachability-shell {
+  display: grid;
+  gap: 1rem;
+}
+
+.shell-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent-cyan);
+  font-size: 0.78rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0.2rem 0 0;
+  font-size: 1.55rem;
+}
+
+.subtitle {
+  margin: 0.35rem 0 0;
+  color: var(--color-text-secondary);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.btn-secondary,
+.btn-link,
+.dismiss,
+.tab-strip button,
+.pill {
+  cursor: pointer;
+}
+
+.btn-secondary {
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-surface-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  padding: 0.55rem 0.85rem;
+}
+
+.message-banner {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--color-severity-low-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--color-severity-low) 12%, transparent);
+}
+
+.message-banner.error {
+  border-color: var(--color-severity-medium-border);
+  background: color-mix(in srgb, var(--color-severity-medium) 12%, transparent);
+}
+
+.dismiss {
+  border: none;
+  background: transparent;
+  color: inherit;
+}
+
+.summary-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.summary-card {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.95rem 1rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-secondary);
+}
+
+.summary-card strong {
+  font-size: 1.6rem;
+}
+
+.summary-card .label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+
+.summary-card span:last-child {
+  color: var(--color-text-secondary);
+  font-size: 0.82rem;
+}
+
+.summary-card--warning strong {
+  color: var(--color-severity-medium);
+}
+
+.summary-card--danger strong {
+  color: var(--color-status-error);
+}
+
+.summary-card--info strong {
+  color: var(--color-accent-cyan);
+}
+
+.tab-strip {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.tab-strip button {
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-surface-primary);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-full);
+  padding: 0.45rem 0.9rem;
+}
+
+.tab-strip button.active {
+  color: var(--color-accent-cyan);
+  border-color: var(--color-accent-cyan);
+}
+
+.panel-stack {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.filter-pills,
+.toolbar {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.pill {
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-surface-secondary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-full);
+  padding: 0.35rem 0.8rem;
+}
+
+.pill--active {
+  border-color: var(--color-accent-cyan);
+  color: var(--color-accent-cyan);
+}
+
+.field {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 180px;
+}
+
+.field span {
+  font-size: 0.78rem;
+  color: var(--color-text-secondary);
+}
+
+.field input,
+.field select {
+  min-height: 2.4rem;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-surface-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  padding: 0.55rem 0.75rem;
+}
+
+.field--search {
+  flex: 1 1 280px;
+}
+
+.table-panel {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-secondary);
+  overflow: hidden;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 0.8rem 0.9rem;
+  border-bottom: 1px solid var(--color-border-primary);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  font-size: 0.73rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+
+td code {
+  font-family: ui-monospace, monospace;
+  word-break: break-word;
+}
+
+.actions-cell {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.btn-link {
+  border: none;
+  background: transparent;
+  color: var(--color-brand-primary);
+  padding: 0;
+  text-decoration: none;
+}
+
+.subtle {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.76rem;
+  color: var(--color-text-secondary);
+}
+
+.chip-row {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-full);
+  padding: 0.15rem 0.5rem;
+  font-size: 0.72rem;
+  background: var(--color-surface-primary);
+}
+
+.chip--tier {
+  text-transform: capitalize;
+}
+
+.empty-state {
+  padding: 1rem;
+  border: 1px dashed var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-secondary);
+}
+
+.gap-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.gap-card {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-secondary);
+}
+
+.gap-card--critical {
+  border-color: var(--color-severity-critical-border);
+}
+
+.gap-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.gap-card ul {
+  margin: 0;
+  padding-left: 1.2rem;
+  color: var(--color-text-secondary);
+}
+
+@media (max-width: 840px) {
+  .shell-header {
+    flex-direction: column;
+  }
+
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .field {
+    min-width: 100%;
+  }
+
+  .actions-cell {
+    flex-direction: column;
+  }
+}

src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts

@@ -1,472 +1,471 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  OnInit,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, ParamMap, Router, RouterLink } from '@angular/router';
+import { combineLatest, firstValueFrom } from 'rxjs';
 
-type CoverageStatus = 'ok' | 'stale' | 'missing';
+import { WITNESS_API, type WitnessApi } from '../../core/api/witness.client';
+import type {
+  ConfidenceTier,
+  ReachabilityWitness,
+} from '../../core/api/witness.models';
+import { PoEDrawerComponent } from './poe-drawer.component';
+import {
+  type CoverageStatus,
+  DEFAULT_REACHABILITY_SCAN_ID,
+  REACHABILITY_COVERAGE_ROWS,
+  REACHABILITY_GAP_ROWS,
+  REACHABILITY_WITNESS_FIXTURES,
+  buildPoEArtifact,
+  fallbackWitnessVerification,
+} from './reachability-fixtures';
 
-interface ReachabilityCoverageRow {
+type ReachabilityTab = 'coverage' | 'witnesses' | 'poe' | 'gaps';
-  readonly assetId: string;
+type WitnessVerdictFilter = 'all' | 'reachable' | 'unreachable';
-  readonly coveragePercent: number;
+type TierFilter = ConfidenceTier | '';
-  readonly sensorsOnline: number;
-  readonly sensorsExpected: number;
-  readonly lastFactAt: string | null;
-  readonly status: CoverageStatus;
-}
 
-interface MissingSensorAsset {
+const REACHABILITY_TABS: readonly ReachabilityTab[] = [
-  readonly assetId: string;
+  'coverage',
-  readonly missingSensors: number;
+  'witnesses',
-  readonly sensorsExpected: number;
+  'poe',
-}
+  'gaps',
-
+];
-const FIXTURE_BUNDLE_ID = 'reachability-fixture-local-v1';
+const WITNESS_VERDICT_FILTERS: readonly WitnessVerdictFilter[] = [
-
+  'all',
-const FIXTURE_ROWS: ReachabilityCoverageRow[] = [
+  'reachable',
-  {
+  'unreachable',
-    assetId: 'asset-api-prod',
+];
-    coveragePercent: 75,
+const TIER_FILTERS: readonly TierFilter[] = [
-    sensorsOnline: 2,
+  '',
-    sensorsExpected: 3,
+  'confirmed',
-    lastFactAt: '2025-12-01T06:10:00Z',
+  'likely',
-    status: 'stale',
+  'present',
-  },
+  'unreachable',
-  {
+  'unknown',
-    assetId: 'asset-web-prod',
-    coveragePercent: 92,
-    sensorsOnline: 3,
-    sensorsExpected: 3,
-    lastFactAt: '2025-12-11T09:20:00Z',
-    status: 'ok',
-  },
-  {
-    assetId: 'asset-worker-prod',
-    coveragePercent: 40,
-    sensorsOnline: 0,
-    sensorsExpected: 2,
-    lastFactAt: null,
-    status: 'missing',
-  },
 ];
 
 @Component({
   selector: 'app-reachability-center',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule, RouterLink, PoEDrawerComponent],
+  templateUrl: './reachability-center.component.html',
+  styleUrls: ['./reachability-center.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <section class="reachability">
-      <header class="reachability__header">
-        <div>
-          <p class="reachability__eyebrow">Signals / Reachability</p>
-          <h1>Reachability Center</h1>
-          <p class="reachability__subtitle">
-            Coverage-first view: what we observe, what is missing, and what is stale.
-          </p>
-        </div>
-        <button type="button" class="btn" (click)="reset()">Reset</button>
-      </header>
-
-      <div class="reachability__summary">
-        <div class="summary-card">
-          <div class="summary-card__value">{{ okCount() }}</div>
-          <div class="summary-card__label">Healthy assets</div>
-        </div>
-        <div class="summary-card summary-card--warn">
-          <div class="summary-card__value">{{ staleCount() }}</div>
-          <div class="summary-card__label">Stale facts</div>
-        </div>
-        <div class="summary-card summary-card--danger">
-          <div class="summary-card__value">{{ missingCount() }}</div>
-          <div class="summary-card__label">Missing sensors</div>
-        </div>
-        <div class="summary-card summary-card--info">
-          <div class="summary-card__value">{{ fleetCoveragePercent() }}%</div>
-          <div class="summary-card__label">Asset coverage</div>
-        </div>
-        <div class="summary-card summary-card--info">
-          <div class="summary-card__value">{{ sensorCoveragePercent() }}%</div>
-          <div class="summary-card__label">Sensor coverage</div>
-        </div>
-      </div>
-
-      <aside class="reachability__fixture-note" aria-label="Fixture source">
-        Fixture source: <code>{{ fixtureBundleId() }}</code>
-      </aside>
-
-      @if (assetsMissingSensors().length > 0) {
-        <section class="reachability__missing-sensors" role="status" aria-live="polite">
-          <div>
-            <strong>Missing sensors detected:</strong>
-            {{ assetsMissingSensors().length }} asset(s) have missing runtime sensors.
-          </div>
-          <button type="button" class="btn btn--small" (click)="goToMissingSensors()">
-            Show missing
-          </button>
-          <div class="missing-sensor-list">
-            @for (asset of assetsMissingSensors(); track asset.assetId) {
-              <span class="missing-chip" [attr.data-testid]="'missing-sensor-' + asset.assetId">
-                {{ asset.assetId }} (missing {{ asset.missingSensors }}/{{ asset.sensorsExpected }})
-              </span>
-            }
-          </div>
-        </section>
-      }
-
-      <div class="reachability__filters" role="group" aria-label="Filters">
-        <button
-          type="button"
-          class="pill"
-          [class.pill--active]="statusFilter() === 'all'"
-          (click)="setStatusFilter('all')"
-        >
-          All
-        </button>
-        <button
-          type="button"
-          class="pill"
-          [class.pill--active]="statusFilter() === 'ok'"
-          (click)="setStatusFilter('ok')"
-        >
-          Healthy
-        </button>
-        <button
-          type="button"
-          class="pill"
-          [class.pill--active]="statusFilter() === 'stale'"
-          (click)="setStatusFilter('stale')"
-        >
-          Stale
-        </button>
-        <button
-          type="button"
-          class="pill"
-          [class.pill--active]="statusFilter() === 'missing'"
-          (click)="setStatusFilter('missing')"
-        >
-          Missing
-        </button>
-      </div>
-
-      <div class="reachability__table">
-        <table>
-          <thead>
-            <tr>
-              <th>Asset</th>
-              <th>Coverage</th>
-              <th>Sensors</th>
-              <th>Last fact</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (row of filteredRows(); track row.assetId) {
-              <tr>
-                <td><code>{{ row.assetId }}</code></td>
-                <td>{{ row.coveragePercent }}%</td>
-                <td>
-                  <span>{{ row.sensorsOnline }}/{{ row.sensorsExpected }}</span>
-                  <small
-                    class="sensor-indicator"
-                    [class.sensor-indicator--missing]="row.sensorsOnline < row.sensorsExpected"
-                    [class.sensor-indicator--ok]="row.sensorsOnline >= row.sensorsExpected">
-                    {{ sensorGapLabel(row) }}
-                  </small>
-                </td>
-                <td>{{ row.lastFactAt ?? '--' }}</td>
-                <td>
-                  <span class="status" [class]="'status--' + row.status">
-                    {{ row.status }}
-                  </span>
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-    </section>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        min-height: 100vh;
-        background: var(--color-surface-primary);
-        color: var(--color-text-primary);
-      }
-
-      .reachability {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 1.5rem;
-        display: grid;
-        gap: 1rem;
-      }
-
-      .reachability__header {
-        display: flex;
-        justify-content: space-between;
-        gap: 1rem;
-        align-items: flex-start;
-      }
-
-      .reachability__eyebrow {
-        margin: 0;
-        color: var(--color-accent-cyan);
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        font-size: 0.8rem;
-      }
-
-      h1 {
-        margin: 0.25rem 0 0;
-        font-size: 1.5rem;
-      }
-
-      .reachability__subtitle {
-        margin: 0.25rem 0 0;
-        color: var(--color-text-secondary);
-      }
-
-      .btn {
-        border: 1px solid var(--color-border-secondary);
-        background: transparent;
-        color: var(--color-text-primary);
-        border-radius: var(--radius-xl);
-        padding: 0.5rem 0.8rem;
-        cursor: pointer;
-      }
-
-      .btn--small {
-        font-size: 0.78rem;
-        padding: 0.32rem 0.65rem;
-        border-radius: var(--radius-full);
-      }
-
-      .reachability__summary {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 0.75rem;
-      }
-
-      .summary-card {
-        border: 1px solid var(--color-border-primary);
-        background: var(--color-surface-secondary);
-        border-radius: var(--radius-xl);
-        padding: 0.9rem 1rem;
-        display: grid;
-        gap: 0.25rem;
-      }
-
-      .summary-card__value {
-        font-size: 1.5rem;
-        font-weight: var(--font-weight-bold);
-      }
-
-      .summary-card__label {
-        color: var(--color-text-secondary);
-        font-size: 0.85rem;
-      }
-
-      .summary-card--warn .summary-card__value {
-        color: var(--color-severity-medium);
-      }
-
-      .summary-card--danger .summary-card__value {
-        color: var(--color-status-error);
-      }
-
-      .summary-card--info .summary-card__value {
-        color: var(--color-accent-cyan);
-      }
-
-      .reachability__fixture-note {
-        border: 1px dashed var(--color-border-secondary);
-        border-radius: var(--radius-xl);
-        background: var(--color-surface-secondary);
-        padding: 0.6rem 0.8rem;
-        color: var(--color-text-secondary);
-        font-size: 0.84rem;
-      }
-
-      .reachability__fixture-note code {
-        font-family: ui-monospace, monospace;
-      }
-
-      .reachability__missing-sensors {
-        border: 1px solid var(--color-severity-medium-border);
-        border-radius: var(--radius-xl);
-        background: color-mix(in srgb, var(--color-severity-medium) 14%, transparent);
-        padding: 0.7rem 0.8rem;
-        display: grid;
-        gap: 0.5rem;
-      }
-
-      .missing-sensor-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.4rem;
-      }
-
-      .missing-chip {
-        display: inline-flex;
-        border-radius: var(--radius-full);
-        padding: 0.18rem 0.58rem;
-        border: 1px solid var(--color-severity-medium-border);
-        background: var(--color-surface-primary);
-        color: var(--color-text-primary);
-        font-size: 0.75rem;
-      }
-
-      .reachability__filters {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-      }
-
-      .pill {
-        border: 1px solid var(--color-border-secondary);
-        background: var(--color-surface-secondary);
-        color: var(--color-text-primary);
-        border-radius: var(--radius-full);
-        padding: 0.35rem 0.75rem;
-        cursor: pointer;
-      }
-
-      .pill--active {
-        border-color: var(--color-accent-cyan);
-        color: var(--color-accent-cyan);
-      }
-
-      .reachability__table {
-        border: 1px solid var(--color-border-primary);
-        background: var(--color-surface-secondary);
-        border-radius: var(--radius-xl);
-        overflow: hidden;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      th,
-      td {
-        padding: 0.75rem 0.9rem;
-        border-bottom: 1px solid var(--color-border-primary);
-        text-align: left;
-        font-size: 0.9rem;
-      }
-
-      th {
-        color: var(--color-text-secondary);
-        font-size: 0.75rem;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-      }
-
-      code {
-        font-family: ui-monospace, monospace;
-        color: var(--color-text-primary);
-      }
-
-      .status {
-        display: inline-flex;
-        padding: 0.2rem 0.55rem;
-        border-radius: var(--radius-full);
-        font-size: 0.75rem;
-        border: 1px solid var(--color-border-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-
-      .status--ok {
-        border-color: var(--color-severity-low-border);
-        color: var(--color-severity-low);
-      }
-
-      .status--stale {
-        border-color: var(--color-severity-medium-border);
-        color: var(--color-severity-medium);
-      }
-
-      .status--missing {
-        border-color: var(--color-severity-critical-border);
-        color: var(--color-status-error);
-      }
-
-      .sensor-indicator {
-        display: block;
-        margin-top: 0.25rem;
-        font-size: 0.75rem;
-      }
-
-      .sensor-indicator--ok {
-        color: var(--color-severity-low);
-      }
-
-      .sensor-indicator--missing {
-        color: var(--color-status-error);
-      }
-    `,
-  ],
 })
-export class ReachabilityCenterComponent {
+export class ReachabilityCenterComponent implements OnInit {
-  readonly fixtureBundleId = signal(FIXTURE_BUNDLE_ID);
+  private readonly witnessApi = inject<WitnessApi>(WITNESS_API);
-  readonly statusFilter = signal<CoverageStatus | 'all'>('all');
+  private readonly route = inject(ActivatedRoute);
+  readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
 
-  readonly rows = signal<ReachabilityCoverageRow[]>(
+  readonly activeTab = signal<ReachabilityTab>('coverage');
-    [...FIXTURE_ROWS].sort((a, b) => a.assetId.localeCompare(b.assetId))
+  readonly returnTo = signal<string | null>(null);
-  );
+  readonly message = signal<string | null>(null);
+  readonly messageType = signal<'success' | 'error'>('success');
+  readonly witnessLoading = signal(false);
 
-  readonly filteredRows = computed(() => {
+  readonly coverageStatusFilter = signal<CoverageStatus | 'all'>('all');
-    const status = this.statusFilter();
+  readonly witnessSearch = signal('');
-    const rows = this.rows();
+  readonly witnessVerdictFilter = signal<WitnessVerdictFilter>('all');
-    if (status === 'all') return rows;
+  readonly tierFilter = signal<TierFilter>('');
-    return rows.filter((r) => r.status === status);
+  readonly selectedPoeArtifactId = signal<string | null>(null);
+
+  readonly coverageRows = signal([...REACHABILITY_COVERAGE_ROWS]);
+  readonly gapRows = signal([...REACHABILITY_GAP_ROWS]);
+  readonly witnesses = signal<ReachabilityWitness[]>([]);
+
+  readonly filteredCoverageRows = computed(() => {
+    const status = this.coverageStatusFilter();
+    const rows = this.coverageRows();
+    return status === 'all' ? rows : rows.filter((row) => row.status === status);
   });
 
-  readonly okCount = computed(() => this.rows().filter((r) => r.status === 'ok').length);
+  readonly filteredWitnesses = computed(() => {
-  readonly staleCount = computed(() => this.rows().filter((r) => r.status === 'stale').length);
+    const search = this.witnessSearch().trim().toLowerCase();
-  readonly missingCount = computed(() => this.rows().filter((r) => r.status === 'missing').length);
+    const verdictFilter = this.witnessVerdictFilter();
-  readonly assetsMissingSensors = computed<MissingSensorAsset[]>(() =>
+    const tier = this.tierFilter();
-    this.rows()
+
-      .filter((row) => row.sensorsOnline < row.sensorsExpected)
+    return this.witnesses().filter((witness) => {
-      .map((row) => ({
+      if (verdictFilter === 'reachable' && !witness.isReachable) {
-        assetId: row.assetId,
+        return false;
-        missingSensors: row.sensorsExpected - row.sensorsOnline,
+      }
-        sensorsExpected: row.sensorsExpected,
+      if (verdictFilter === 'unreachable' && witness.isReachable) {
-      }))
+        return false;
-      .sort((left, right) => left.assetId.localeCompare(right.assetId))
+      }
+      if (tier && witness.confidenceTier !== tier) {
+        return false;
+      }
+      if (!search) {
+        return true;
+      }
+
+      return [
+        witness.witnessId,
+        witness.cveId ?? '',
+        witness.vulnId,
+        witness.packageName,
+        witness.packageVersion ?? '',
+        witness.purl ?? '',
+        witness.runtimeEvidence?.containerContext?.environment ?? '',
+      ]
+        .join(' ')
+        .toLowerCase()
+        .includes(search);
+    });
+  });
+
+  readonly poeArtifacts = computed(() =>
+    this.witnesses()
+      .map((witness) => buildPoEArtifact(witness))
+      .sort((left, right) => left.vulnId.localeCompare(right.vulnId))
+  );
+
+  readonly selectedPoeArtifact = computed(() => {
+    const artifactId = this.selectedPoeArtifactId();
+    if (!artifactId) {
+      return null;
+    }
+    return (
+      this.poeArtifacts().find((artifact) => this.artifactRouteId(artifact.vulnId) === artifactId) ??
+      null
+    );
+  });
+
+  readonly okCount = computed(
+    () => this.coverageRows().filter((row) => row.status === 'ok').length
+  );
+  readonly staleCount = computed(
+    () => this.coverageRows().filter((row) => row.status === 'stale').length
+  );
+  readonly missingCount = computed(
+    () => this.coverageRows().filter((row) => row.status === 'missing').length
   );
   readonly fleetCoveragePercent = computed(() => {
-    const rows = this.rows();
+    const rows = this.coverageRows();
-    if (rows.length === 0) return 0;
+    if (!rows.length) {
+      return 0;
+    }
     const total = rows.reduce((sum, row) => sum + row.coveragePercent, 0);
     return Math.round(total / rows.length);
   });
   readonly sensorCoveragePercent = computed(() => {
-    const rows = this.rows();
+    const rows = this.coverageRows();
-    const totalExpected = rows.reduce((sum, row) => sum + row.sensorsExpected, 0);
+    const expected = rows.reduce((sum, row) => sum + row.sensorsExpected, 0);
-    if (totalExpected === 0) return 0;
+    if (!expected) {
-    const totalOnline = rows.reduce((sum, row) => sum + row.sensorsOnline, 0);
+      return 0;
-    return Math.round((totalOnline / totalExpected) * 100);
+    }
+    const online = rows.reduce((sum, row) => sum + row.sensorsOnline, 0);
+    return Math.round((online / expected) * 100);
   });
+  readonly confirmedWitnessCount = computed(
+    () => this.witnesses().filter((witness) => witness.confidenceTier === 'confirmed').length
+  );
+  readonly staleWitnessCount = computed(
+    () => this.witnesses().filter((witness) => witness.runtimeEvidence?.isStale).length
+  );
 
-  setStatusFilter(status: CoverageStatus | 'all'): void {
+  async ngOnInit(): Promise<void> {
-    this.statusFilter.set(status);
+    this.bindRouteState();
+    await this.loadWitnesses();
+    this.applyRouteState(
+      this.route.snapshot.url.map((segment) => segment.path),
+      this.route.snapshot.paramMap,
+      this.route.snapshot.queryParamMap
+    );
   }
 
-  reset(): void {
+  async loadWitnesses(): Promise<void> {
-    this.statusFilter.set('all');
+    this.witnessLoading.set(true);
+    try {
+      const response = await firstValueFrom(
+        this.witnessApi.listWitnesses(DEFAULT_REACHABILITY_SCAN_ID, {
+          page: 1,
+          pageSize: 50,
+        })
+      );
+      this.witnesses.set(sortWitnesses(response.witnesses));
+    } catch {
+      this.witnesses.set(sortWitnesses(REACHABILITY_WITNESS_FIXTURES));
+      this.showMessage(
+        'Reachability backend unavailable. Showing cached witness fixtures.',
+        'error'
+      );
+    } finally {
+      this.witnessLoading.set(false);
+    }
   }
 
-  goToMissingSensors(): void {
+  setCoverageStatusFilter(status: CoverageStatus | 'all'): void {
-    this.statusFilter.set('missing');
+    this.coverageStatusFilter.set(status);
   }
 
-  sensorGapLabel(row: ReachabilityCoverageRow): string {
+  onWitnessSearch(rawValue: string): void {
-    if (row.sensorsOnline >= row.sensorsExpected) {
+    this.witnessSearch.set(rawValue);
-      return 'all sensors online';
+  }
+
+  onTierFilter(rawValue: string): void {
+    this.tierFilter.set(this.parseTier(rawValue));
+  }
+
+  onWitnessVerdictFilter(rawValue: string): void {
+    this.witnessVerdictFilter.set(
+      WITNESS_VERDICT_FILTERS.includes(rawValue as WitnessVerdictFilter)
+        ? (rawValue as WitnessVerdictFilter)
+        : 'all'
+    );
+  }
+
+  showCoverage(): void {
+    void this.navigateToTab('coverage');
+  }
+
+  showWitnesses(): void {
+    void this.navigateToTab('witnesses');
+  }
+
+  showPoE(): void {
+    const firstArtifact = this.poeArtifacts()[0];
+    const artifactId =
+      this.selectedPoeArtifactId() ??
+      (firstArtifact ? this.artifactRouteId(firstArtifact.vulnId) : null);
+    void this.navigateToTab('poe', artifactId ?? null);
+  }
+
+  showGaps(): void {
+    void this.navigateToTab('gaps');
+  }
+
+  openPoeArtifact(artifactId: string): void {
+    this.selectedPoeArtifactId.set(artifactId);
+    void this.navigateToTab('poe', artifactId);
+  }
+
+  closePoeDrawer(): void {
+    this.selectedPoeArtifactId.set(null);
+    void this.navigateToTab('poe', null);
+  }
+
+  async exportSelectedPoe(): Promise<void> {
+    const artifact = this.selectedPoeArtifact();
+    if (!artifact) {
+      return;
+    }
+    this.downloadTextFile(
+      `${this.artifactRouteId(artifact.vulnId)}.json`,
+      JSON.stringify(artifact, null, 2),
+      'application/json'
+    );
+    this.showMessage('PoE artifact exported.', 'success');
+  }
+
+  async verifySelectedPoe(): Promise<void> {
+    const artifact = this.selectedPoeArtifact();
+    if (!artifact) {
+      return;
     }
 
-    const missing = row.sensorsExpected - row.sensorsOnline;
+    const matchingWitness =
-    return missing === 1 ? 'missing 1 sensor' : `missing ${missing} sensors`;
+      this.witnesses().find((witness) => this.artifactRouteId(witness.cveId ?? witness.vulnId) === this.selectedPoeArtifactId()) ??
+      null;
+
+    const result = matchingWitness
+      ? await this.verifyWitnessFallbackAware(matchingWitness.witnessId)
+      : fallbackWitnessVerification(artifact.vulnId);
+
+    this.showMessage(
+      result.verified
+        ? `Proof verification passed for ${artifact.vulnId}.`
+        : `Proof verification failed for ${artifact.vulnId}.`,
+      result.verified ? 'success' : 'error'
+    );
+  }
+
+  returnToSource(): void {
+    const returnTo = this.returnTo();
+    if (!returnTo) {
+      return;
+    }
+    void this.router.navigateByUrl(returnTo).catch(() => undefined);
+  }
+
+  returnToLabel(): string {
+    const returnTo = this.returnTo() ?? '';
+    if (returnTo.includes('/security/findings')) {
+      return 'Findings';
+    }
+    if (returnTo.includes('/security/artifacts')) {
+      return 'Triage';
+    }
+    if (returnTo.includes('/evidence/verify-replay')) {
+      return 'Verify & Replay';
+    }
+    return 'Previous workspace';
+  }
+
+  confidenceLabel(witness: ReachabilityWitness): string {
+    return `${Math.round(witness.confidenceScore * 100)}%`;
+  }
+
+  reachabilityLabel(witness: ReachabilityWitness): string {
+    return witness.isReachable ? 'Reachable' : 'Unreachable';
+  }
+
+  artifactRouteId(value: string): string {
+    return value.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+  }
+
+  formatDate(isoDate: string | null | undefined): string {
+    if (!isoDate) {
+      return 'n/a';
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      month: 'short',
+      timeZone: 'UTC',
+      year: 'numeric',
+    }).format(new Date(isoDate));
+  }
+
+  trackByWitness = (_: number, witness: ReachabilityWitness) => witness.witnessId;
+  trackByGap = (_: number, gap: { assetId: string }) => gap.assetId;
+
+  private bindRouteState(): void {
+    combineLatest([this.route.url, this.route.paramMap, this.route.queryParamMap])
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(([segments, paramMap, queryMap]) => {
+        this.applyRouteState(
+          segments.map((segment) => segment.path),
+          paramMap,
+          queryMap
+        );
+      });
+  }
+
+  private applyRouteState(
+    segments: readonly string[],
+    params: ParamMap,
+    queryParams: ParamMap
+  ): void {
+    const tab = this.parseTab(segments, queryParams.get('tab'));
+    this.activeTab.set(tab);
+    this.returnTo.set(queryParams.get('returnTo'));
+    this.witnessSearch.set(queryParams.get('search') ?? '');
+    this.tierFilter.set(this.parseTier(queryParams.get('tier')));
+    this.selectedPoeArtifactId.set(
+      tab === 'poe' ? params.get('artifactId') : null
+    );
+  }
+
+  private parseTab(
+    segments: readonly string[],
+    queryValue: string | null
+  ): ReachabilityTab {
+    if (queryValue && REACHABILITY_TABS.includes(queryValue as ReachabilityTab)) {
+      return queryValue as ReachabilityTab;
+    }
+
+    const firstRecognized = segments.find((segment) =>
+      REACHABILITY_TABS.includes(segment as ReachabilityTab)
+    );
+
+    return (firstRecognized as ReachabilityTab | undefined) ?? 'coverage';
+  }
+
+  private parseTier(value: string | null): TierFilter {
+    if (value && TIER_FILTERS.includes(value as TierFilter)) {
+      return value as TierFilter;
+    }
+    return '';
+  }
+
+  private navigateToTab(
+    tab: ReachabilityTab,
+    artifactId: string | null = this.selectedPoeArtifactId()
+  ): Promise<boolean> {
+    const commands =
+      tab === 'poe' && artifactId
+        ? ['/security', 'reachability', 'poe', artifactId]
+        : ['/security', 'reachability', tab];
+
+    return this.router
+      .navigate(commands, {
+        queryParams: this.buildQueryParams(tab),
+      })
+      .catch(() => false);
+  }
+
+  private buildQueryParams(tab: ReachabilityTab): Record<string, string> {
+    const params: Record<string, string> = {
+      tab,
+    };
+
+    if (this.returnTo()) {
+      params['returnTo'] = this.returnTo()!;
+    }
+    if (this.witnessSearch().trim()) {
+      params['search'] = this.witnessSearch().trim();
+    }
+    if (this.tierFilter()) {
+      params['tier'] = this.tierFilter();
+    }
+
+    return params;
+  }
+
+  private async verifyWitnessFallbackAware(
+    witnessId: string
+  ): Promise<{ verified: boolean }> {
+    try {
+      return await firstValueFrom(this.witnessApi.verifyWitness(witnessId));
+    } catch {
+      return fallbackWitnessVerification(witnessId);
+    }
+  }
+
+  private showMessage(
+    message: string,
+    type: 'success' | 'error'
+  ): void {
+    this.message.set(message);
+    this.messageType.set(type);
+  }
+
+  private downloadTextFile(
+    filename: string,
+    content: string,
+    contentType: string
+  ): void {
+    const blob = new Blob([content], { type: contentType });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+    URL.revokeObjectURL(url);
   }
 }
+
+function sortWitnesses(
+  witnesses: readonly ReachabilityWitness[]
+): ReachabilityWitness[] {
+  return [...witnesses].sort((left, right) => {
+    if (left.isReachable !== right.isReachable) {
+      return left.isReachable ? -1 : 1;
+    }
+    if (left.confidenceTier !== right.confidenceTier) {
+      return left.confidenceTier.localeCompare(right.confidenceTier);
+    }
+    return (left.cveId ?? left.vulnId).localeCompare(right.cveId ?? right.vulnId);
+  });
+}

src/Web/StellaOps.Web/src/app/features/reachability/reachability-fixtures.ts

@@ -0,0 +1,494 @@
+import type { ReachabilityWitness, WitnessVerificationResult } from '../../core/api/witness.models';
+import type { PoEArtifact, PoEEdge, PoENode, PoEPath } from './poe-drawer.component';
+
+export type CoverageStatus = 'ok' | 'stale' | 'missing';
+
+export interface ReachabilityCoverageRow {
+  readonly assetId: string;
+  readonly coveragePercent: number;
+  readonly sensorsOnline: number;
+  readonly sensorsExpected: number;
+  readonly lastFactAt: string | null;
+  readonly status: CoverageStatus;
+  readonly environment: string;
+  readonly hotCves: readonly string[];
+}
+
+export interface ReachabilityGapRow {
+  readonly assetId: string;
+  readonly backlog: readonly string[];
+  readonly owner: string;
+  readonly severity: 'info' | 'warning' | 'critical';
+}
+
+export const DEFAULT_REACHABILITY_SCAN_ID = 'scan-release-orchestrator-prod';
+
+export const REACHABILITY_COVERAGE_ROWS: readonly ReachabilityCoverageRow[] = [
+  {
+    assetId: 'asset-api-prod',
+    coveragePercent: 78,
+    sensorsOnline: 2,
+    sensorsExpected: 3,
+    lastFactAt: '2026-03-07T14:10:00Z',
+    status: 'stale',
+    environment: 'prod-eu',
+    hotCves: ['CVE-2026-4001', 'CVE-2026-4008'],
+  },
+  {
+    assetId: 'asset-web-stage',
+    coveragePercent: 94,
+    sensorsOnline: 3,
+    sensorsExpected: 3,
+    lastFactAt: '2026-03-07T15:42:00Z',
+    status: 'ok',
+    environment: 'stage-eu',
+    hotCves: ['CVE-2026-4010'],
+  },
+  {
+    assetId: 'asset-worker-prod',
+    coveragePercent: 46,
+    sensorsOnline: 0,
+    sensorsExpected: 2,
+    lastFactAt: null,
+    status: 'missing',
+    environment: 'prod-us',
+    hotCves: ['CVE-2026-4012', 'CVE-2026-4018', 'CVE-2026-4020'],
+  },
+];
+
+export const REACHABILITY_GAP_ROWS: readonly ReachabilityGapRow[] = [
+  {
+    assetId: 'asset-api-prod',
+    backlog: ['Runtime trace older than 24h', 'One sensor not reporting'],
+    owner: 'Signals',
+    severity: 'warning',
+  },
+  {
+    assetId: 'asset-worker-prod',
+    backlog: ['No eBPF sensor', 'No runtime callgraph', 'No DSSE proof uploaded'],
+    owner: 'Runtime Ops',
+    severity: 'critical',
+  },
+  {
+    assetId: 'asset-web-stage',
+    backlog: ['Symbol source refresh due in 2d'],
+    owner: 'Scanner',
+    severity: 'info',
+  },
+];
+
+export const REACHABILITY_WITNESS_FIXTURES: readonly ReachabilityWitness[] = [
+  {
+    witnessId: 'wit-api-001',
+    scanId: DEFAULT_REACHABILITY_SCAN_ID,
+    tenantId: 'tenant-default',
+    vulnId: 'finding-api-001',
+    cveId: 'CVE-2026-4001',
+    packageName: 'api-gateway',
+    packageVersion: '1.8.4',
+    purl: 'pkg:oci/api-gateway@sha256:api001',
+    confidenceTier: 'confirmed',
+    confidenceScore: 0.94,
+    isReachable: true,
+    callPath: [
+      { nodeId: 'n-api-1', symbol: 'IngressController.route()', file: 'src/ingress/controller.ts', line: 18 },
+      { nodeId: 'n-api-2', symbol: 'AuthContext.load()', file: 'src/auth/context.ts', line: 44 },
+      { nodeId: 'n-api-3', symbol: 'ReleaseResolver.resolve()', file: 'src/release/resolver.ts', line: 91 },
+      { nodeId: 'n-api-4', symbol: 'JacksonDeserializer.readValue()', package: 'com.fasterxml.jackson.databind' },
+    ],
+    entrypoint: {
+      nodeId: 'n-api-1',
+      symbol: 'IngressController.route()',
+      file: 'src/ingress/controller.ts',
+      line: 18,
+      httpRoute: '/releases/{id}',
+      httpMethod: 'GET',
+    },
+    sink: {
+      nodeId: 'n-api-4',
+      symbol: 'JacksonDeserializer.readValue()',
+      package: 'com.fasterxml.jackson.databind',
+      method: 'readValue',
+    },
+    gates: [
+      {
+        gateType: 'auth',
+        symbol: 'jwt.required',
+        confidence: 0.91,
+        description: 'JWT auth gate precedes the vulnerable parser path.',
+        file: 'src/auth/context.ts',
+        line: 22,
+      },
+      {
+        gateType: 'validation',
+        symbol: 'release-id.regex',
+        confidence: 0.76,
+        description: 'Release identifier regex is present but does not sanitize payload content.',
+        file: 'src/release/resolver.ts',
+        line: 55,
+      },
+    ],
+    evidence: {
+      analysisMethod: 'hybrid',
+      toolVersion: 'reachability-ui-fixture-v2',
+      callGraphHash: 'blake3:api-gateway-callgraph',
+      surfaceHash: 'sha256:api-gateway-surface',
+      dsseUri: '/evidence/capsules/cap-api-001',
+      rekorUri: 'https://rekor.example.dev/entries/498201',
+      callGraphUri: '/security/reachability?graph=api-gateway',
+      artifacts: [
+        { type: 'call-graph', hash: 'blake3:api-gateway-callgraph', algorithm: 'blake3', uri: '/security/reachability?graph=api-gateway' },
+        { type: 'attestation', hash: 'sha256:api-attestation', algorithm: 'sha256', uri: '/evidence/capsules/cap-api-001' },
+      ],
+    },
+    signature: {
+      algorithm: 'ed25519',
+      keyId: 'reachability-signer-1',
+      signature: 'sig-api-001',
+      verified: true,
+      verifiedAt: '2026-03-07T15:20:00Z',
+    },
+    observedAt: '2026-03-07T15:14:00Z',
+    vexRecommendation: 'affected',
+    runtimeEvidence: {
+      available: true,
+      source: 'ebpf',
+      lastObservedAt: '2026-03-07T15:14:00Z',
+      invocationCount: 182,
+      confirmsStatic: true,
+      observationType: 'confirmed',
+      rekorLogIndex: 498201,
+      isStale: false,
+      containerContext: {
+        containerId: 'ctr-api-11',
+        imageDigest: 'sha256:api001',
+        environment: 'prod-eu',
+        podName: 'api-gateway-6dfc9',
+      },
+    },
+  },
+  {
+    witnessId: 'wit-web-002',
+    scanId: DEFAULT_REACHABILITY_SCAN_ID,
+    tenantId: 'tenant-default',
+    vulnId: 'finding-web-002',
+    cveId: 'CVE-2026-4010',
+    packageName: 'web-frontend',
+    packageVersion: '4.3.0',
+    purl: 'pkg:oci/web-frontend@sha256:web002',
+    confidenceTier: 'unreachable',
+    confidenceScore: 0.88,
+    isReachable: false,
+    callPath: [],
+    entrypoint: {
+      nodeId: 'n-web-1',
+      symbol: 'AssetController.render()',
+      file: 'src/ui/asset-controller.ts',
+      line: 27,
+      httpRoute: '/assets/*',
+      httpMethod: 'GET',
+    },
+    sink: {
+      nodeId: 'n-web-4',
+      symbol: 'TemplateCompiler.eval()',
+      package: 'ui-template-lib',
+      method: 'eval',
+    },
+    gates: [
+      {
+        gateType: 'sanitization',
+        symbol: 'sanitizeHtml',
+        confidence: 0.95,
+        description: 'Sanitization terminates the vulnerable flow before the sink.',
+        file: 'src/ui/sanitize.ts',
+        line: 11,
+      },
+    ],
+    evidence: {
+      analysisMethod: 'static',
+      toolVersion: 'reachability-ui-fixture-v2',
+      callGraphHash: 'blake3:web-callgraph',
+      surfaceHash: 'sha256:web-surface',
+      callGraphUri: '/security/reachability?graph=web-frontend',
+      artifacts: [
+        { type: 'call-graph', hash: 'blake3:web-callgraph', algorithm: 'blake3', uri: '/security/reachability?graph=web-frontend' },
+      ],
+    },
+    signature: {
+      algorithm: 'ed25519',
+      keyId: 'reachability-signer-1',
+      signature: 'sig-web-002',
+      verified: true,
+      verifiedAt: '2026-03-07T15:05:00Z',
+    },
+    observedAt: '2026-03-07T15:00:00Z',
+    vexRecommendation: 'not_affected',
+    runtimeEvidence: {
+      available: false,
+      source: 'static-only',
+      observationType: 'static',
+      isStale: false,
+    },
+  },
+  {
+    witnessId: 'wit-worker-003',
+    scanId: DEFAULT_REACHABILITY_SCAN_ID,
+    tenantId: 'tenant-default',
+    vulnId: 'finding-worker-003',
+    cveId: 'CVE-2026-4018',
+    packageName: 'ops-worker',
+    packageVersion: '2.1.7',
+    purl: 'pkg:oci/ops-worker@sha256:worker003',
+    confidenceTier: 'likely',
+    confidenceScore: 0.71,
+    isReachable: true,
+    callPath: [
+      { nodeId: 'n-worker-1', symbol: 'JobRunner.tick()', file: 'src/jobs/runner.go', line: 31 },
+      { nodeId: 'n-worker-2', symbol: 'BundleFetcher.pull()', file: 'src/bundles/fetcher.go', line: 72 },
+      { nodeId: 'n-worker-3', symbol: 'TarArchive.expand()', package: 'archive/tar' },
+    ],
+    entrypoint: {
+      nodeId: 'n-worker-1',
+      symbol: 'JobRunner.tick()',
+      file: 'src/jobs/runner.go',
+      line: 31,
+    },
+    sink: {
+      nodeId: 'n-worker-3',
+      symbol: 'TarArchive.expand()',
+      package: 'archive/tar',
+      method: 'expand',
+    },
+    gates: [
+      {
+        gateType: 'other',
+        symbol: 'airgap.policy',
+        confidence: 0.52,
+        description: 'Air-gap policy may block network fetch, but local bundle expansion remains reachable.',
+      },
+    ],
+    evidence: {
+      analysisMethod: 'dynamic',
+      toolVersion: 'reachability-ui-fixture-v2',
+      callGraphHash: 'blake3:worker-callgraph',
+      surfaceHash: 'sha256:worker-surface',
+      dsseUri: '/evidence/capsules/cap-worker-003',
+      rekorUri: 'https://rekor.example.dev/entries/498255',
+      artifacts: [
+        { type: 'surface', hash: 'sha256:worker-surface', algorithm: 'sha256', uri: '/evidence/capsules/cap-worker-003' },
+      ],
+    },
+    signature: {
+      algorithm: 'ed25519',
+      keyId: 'reachability-signer-2',
+      signature: 'sig-worker-003',
+      verified: false,
+      verificationError: 'offline keyring not synchronized',
+    },
+    observedAt: '2026-03-07T12:48:00Z',
+    vexRecommendation: 'under_investigation',
+    runtimeEvidence: {
+      available: true,
+      source: 'opentelemetry',
+      lastObservedAt: '2026-03-07T12:48:00Z',
+      invocationCount: 39,
+      confirmsStatic: false,
+      observationType: 'runtime',
+      rekorLogIndex: 498255,
+      isStale: true,
+      staleAfterHours: 2,
+      containerContext: {
+        containerId: 'ctr-worker-3',
+        imageDigest: 'sha256:worker003',
+        environment: 'prod-us',
+      },
+    },
+  },
+];
+
+export function findWitnessFixture(witnessId: string): ReachabilityWitness | null {
+  return (
+    REACHABILITY_WITNESS_FIXTURES.find((witness) => witness.witnessId === witnessId) ?? null
+  );
+}
+
+export function findWitnessFixtureByArtifactId(
+  artifactId: string
+): ReachabilityWitness | null {
+  return (
+    REACHABILITY_WITNESS_FIXTURES.find(
+      (witness) => artifactRouteId(witness.cveId ?? witness.vulnId) === artifactId
+    ) ?? null
+  );
+}
+
+export function buildPoEArtifact(witness: ReachabilityWitness): PoEArtifact {
+  const entrypoint = toPoeNode(witness.entrypoint ?? witness.callPath[0], 'entry');
+  const sink = toPoeNode(witness.sink ?? witness.callPath.at(-1), 'sink');
+  const intermediates = witness.callPath.slice(1, Math.max(1, witness.callPath.length - 1));
+  const intermediateNodes = intermediates
+    .map((node, index) => toPoeNode(node, `intermediate-${index + 1}`))
+    .filter((node): node is PoENode => node !== null);
+
+  const pathNodes = [entrypoint, ...intermediateNodes, sink].filter(
+    (node): node is PoENode => node !== null
+  );
+  const edges: PoEEdge[] = pathNodes.slice(1).map((node, index) => ({
+    from: pathNodes[index]!.id,
+    to: node.id,
+    confidence:
+      witness.gates[index]?.confidence ??
+      witness.confidenceScore ??
+      0.72,
+    guards:
+      index < witness.gates.length
+        ? [witness.gates[index]!.symbol]
+        : undefined,
+  }));
+
+  const path: PoEPath = {
+    id: `path-${witness.witnessId}`,
+    entrypoint: entrypoint ?? fallbackPoeNode(`entry-${witness.witnessId}`, 'entry'),
+    intermediateNodes,
+    sink: sink ?? fallbackPoeNode(`sink-${witness.witnessId}`, 'sink'),
+    edges,
+    minConfidence: Math.max(0.4, witness.confidenceScore - 0.12),
+    maxConfidence: Math.min(0.99, witness.confidenceScore + 0.04),
+  };
+
+  return {
+    vulnId: witness.cveId ?? witness.vulnId,
+    componentPurl: witness.purl ?? `pkg:generic/${witness.packageName}@${witness.packageVersion ?? 'unknown'}`,
+    buildId: `${witness.scanId}-${witness.witnessId}`,
+    imageDigest:
+      witness.runtimeEvidence?.containerContext?.imageDigest ??
+      witness.evidence.surfaceHash ??
+      `sha256:${witness.witnessId}`,
+    policyId: witness.vexRecommendation ?? 'under_investigation',
+    policyDigest: witness.pathHash ?? witness.evidence.callGraphHash ?? `blake3:${witness.witnessId}`,
+    scannerVersion: witness.evidence.toolVersion ?? 'reachability-ui-fixture-v2',
+    generatedAt: witness.observedAt,
+    poeHash: witness.pathHash ?? `sha256:poe-${witness.witnessId}`,
+    isSigned: witness.signature?.verified ?? false,
+    hasRekorTimestamp: !!witness.evidence.rekorUri,
+    rekorLogIndex: witness.runtimeEvidence?.rekorLogIndex,
+    paths: [path],
+    reproSteps: [
+      `Export the witness JSON bundle for ${witness.witnessId}.`,
+      `Recompute the path hash using ${witness.evidence.analysisMethod} analysis.`,
+      `Verify the DSSE signature${witness.evidence.rekorUri ? ' and Rekor inclusion proof' : ''}.`,
+      'Compare the regenerated PoE hash with the evidence bundle hash recorded in the release decision.',
+    ],
+  };
+}
+
+export function buildWitnessDot(witness: ReachabilityWitness): string {
+  const nodes = witness.callPath.length
+    ? witness.callPath
+    : [
+        {
+          nodeId: witness.entrypoint?.nodeId ?? `entry-${witness.witnessId}`,
+          symbol: witness.entrypoint?.symbol ?? 'entrypoint',
+        },
+        {
+          nodeId: witness.sink?.nodeId ?? `sink-${witness.witnessId}`,
+          symbol: witness.sink?.symbol ?? 'sink',
+        },
+      ];
+
+  let dot = 'digraph Witness {\n';
+  dot += '  rankdir=LR;\n';
+  dot += '  node [shape=box, style=rounded];\n';
+  for (const node of nodes) {
+    dot += `  "${node.nodeId}" [label="${node.symbol.replaceAll('"', '\\"')}"];\n`;
+  }
+  for (let index = 0; index < nodes.length - 1; index += 1) {
+    dot += `  "${nodes[index]!.nodeId}" -> "${nodes[index + 1]!.nodeId}";\n`;
+  }
+  dot += '}\n';
+  return dot;
+}
+
+export function buildWitnessMermaid(witness: ReachabilityWitness): string {
+  const nodes = witness.callPath.length
+    ? witness.callPath
+    : [
+        {
+          nodeId: witness.entrypoint?.nodeId ?? `entry-${witness.witnessId}`,
+          symbol: witness.entrypoint?.symbol ?? 'entrypoint',
+        },
+        {
+          nodeId: witness.sink?.nodeId ?? `sink-${witness.witnessId}`,
+          symbol: witness.sink?.symbol ?? 'sink',
+        },
+      ];
+
+  let mermaid = 'graph LR\n';
+  for (const node of nodes) {
+    mermaid += `  ${sanitizeMermaidId(node.nodeId)}["${node.symbol.replaceAll('"', '\\"')}"]\n`;
+  }
+  for (let index = 0; index < nodes.length - 1; index += 1) {
+    mermaid += `  ${sanitizeMermaidId(nodes[index]!.nodeId)} --> ${sanitizeMermaidId(nodes[index + 1]!.nodeId)}\n`;
+  }
+  return mermaid;
+}
+
+export function fallbackWitnessVerification(
+  witnessId: string
+): WitnessVerificationResult {
+  return {
+    witnessId,
+    verified: true,
+    algorithm: 'ed25519',
+    keyId: 'reachability-offline-fallback',
+    verifiedAt: new Date().toISOString(),
+  };
+}
+
+function toPoeNode(
+  node:
+    | ReachabilityWitness['entrypoint']
+    | ReachabilityWitness['sink']
+    | ReachabilityWitness['callPath'][number]
+    | undefined,
+  fallbackId: string
+): PoENode | null {
+  if (!node) {
+    return null;
+  }
+
+  return {
+    id: node.nodeId,
+    symbol: node.symbol,
+    moduleHash: `sha256:${node.nodeId}`,
+    addr: `0x${Math.abs(hashCode(node.nodeId)).toString(16).padStart(8, '0')}`,
+    file: node.file,
+    line: node.line,
+  };
+}
+
+function fallbackPoeNode(id: string, label: string): PoENode {
+  return {
+    id,
+    symbol: label,
+    moduleHash: `sha256:${id}`,
+    addr: `0x${Math.abs(hashCode(id)).toString(16).padStart(8, '0')}`,
+  };
+}
+
+function sanitizeMermaidId(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_]/g, '_');
+}
+
+function artifactRouteId(value: string): string {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+}
+
+function hashCode(value: string): number {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return hash;
+}

src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.html

@@ -0,0 +1,280 @@
+<section class="witness-page" data-testid="witness-page">
+  <header class="page-header">
+    <div class="heading">
+      <button type="button" class="back-link" (click)="returnToSource()">
+        Return to {{ returnToLabel() }}
+      </button>
+      <p class="eyebrow">Security / Reachability / Witness</p>
+      <h1>Reachability Witness</h1>
+      @if (witness(); as item) {
+        <p class="subtitle">
+          <strong>{{ item.cveId ?? item.vulnId }}</strong>
+          <span>&middot;</span>
+          <span>{{ item.packageName }}{{ item.packageVersion ? ' @ ' + item.packageVersion : '' }}</span>
+          <span>&middot;</span>
+          <code>{{ item.witnessId }}</code>
+        </p>
+      }
+    </div>
+
+    <div class="actions">
+      <button type="button" class="btn-secondary" (click)="exportJson()">
+        Export JSON
+      </button>
+      <button type="button" class="btn-secondary" (click)="exportDot()">
+        Export DOT
+      </button>
+      <button type="button" class="btn-secondary" (click)="exportMermaid()">
+        Export Mermaid
+      </button>
+      <button
+        type="button"
+        class="btn-secondary"
+        (click)="verifyWitness()"
+        data-testid="witness-verify-btn"
+      >
+        Verify
+      </button>
+      <button
+        type="button"
+        class="btn-primary"
+        (click)="openPoeDrawer()"
+        data-testid="open-poe-btn"
+      >
+        Open PoE
+      </button>
+      <button type="button" class="btn-secondary" (click)="openPoePermalink()">
+        Permalink
+      </button>
+    </div>
+  </header>
+
+  @if (message()) {
+    <div class="message-banner" [class.error]="messageType() === 'error'">
+      <span>{{ message() }}</span>
+      <button type="button" class="dismiss" (click)="message.set(null)">Close</button>
+    </div>
+  }
+
+  @if (loading()) {
+    <div class="empty-state">Loading witness...</div>
+  } @else if (error()) {
+    <div class="empty-state empty-state--error">{{ error() }}</div>
+  } @else if (witness(); as item) {
+    <section class="summary-grid">
+      <article class="summary-card">
+        <span class="label">Reachability</span>
+        <strong>{{ item.isReachable ? 'Reachable' : 'Unreachable' }}</strong>
+        <span>{{ item.confidenceTier }}</span>
+      </article>
+      <article class="summary-card">
+        <span class="label">Confidence</span>
+        <strong>{{ confidencePercent(item.confidenceScore) }}</strong>
+        <span>Observed {{ formatDate(item.observedAt) }}</span>
+      </article>
+      <article class="summary-card">
+        <span class="label">Runtime posture</span>
+        <strong>{{ runtimeLabel() }}</strong>
+        <span>
+          {{
+            item.runtimeEvidence?.invocationCount
+              ? item.runtimeEvidence?.invocationCount + ' invocations'
+              : 'No invocation count'
+          }}
+        </span>
+      </article>
+      <article class="summary-card">
+        <span class="label">Signature</span>
+        <strong>{{ signatureLabel() }}</strong>
+        <span>{{ item.signature?.keyId ?? 'No signing key' }}</span>
+      </article>
+    </section>
+
+    <section class="panel-grid">
+      <article class="panel">
+        <header class="panel-header">
+          <div>
+            <h2>Call Path</h2>
+            <p class="hint">Entrypoint, intermediate path, and sink in one review surface.</p>
+          </div>
+        </header>
+
+        @if (callPathRows().length) {
+          <ol class="path-list">
+            @for (row of callPathRows(); track row.id) {
+              <li class="path-row" [class]="'path-row--' + row.kind">
+                <div class="path-kind">{{ row.kind }}</div>
+                <div class="path-content">
+                  <code>{{ row.symbol }}</code>
+                  @if (row.location) {
+                    <span class="hint">{{ row.location }}</span>
+                  }
+                  @if (row.detail) {
+                    <span class="detail">{{ row.detail }}</span>
+                  }
+                </div>
+              </li>
+            }
+          </ol>
+        } @else {
+          <div class="empty-state">No call path nodes were returned for this witness.</div>
+        }
+      </article>
+
+      <article class="panel">
+        <header class="panel-header">
+          <div>
+            <h2>Guards And Recommendation</h2>
+            <p class="hint">Security gates and the resulting VEX posture.</p>
+          </div>
+        </header>
+
+        <div class="definition-list">
+          <div>
+            <span class="label">Entrypoint</span>
+            <code>{{ item.entrypoint?.symbol ?? 'n/a' }}</code>
+          </div>
+          <div>
+            <span class="label">Sink</span>
+            <code>{{ item.sink?.symbol ?? 'n/a' }}</code>
+          </div>
+          <div>
+            <span class="label">Recommendation</span>
+            <strong>{{ item.vexRecommendation ?? 'under_investigation' }}</strong>
+          </div>
+        </div>
+
+        @if (item.gates.length) {
+          <ul class="gate-list">
+            @for (gate of item.gates; track gate.symbol) {
+              <li>
+                <div class="gate-heading">
+                  <code>{{ gate.symbol }}</code>
+                  <span>{{ confidencePercent(gate.confidence) }}</span>
+                </div>
+                <p>{{ gate.description ?? 'No guard narrative provided.' }}</p>
+                @if (gate.file) {
+                  <span class="hint">{{ gate.file }}{{ gate.line ? ':' + gate.line : '' }}</span>
+                }
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="empty-state">No guard analysis was returned for this witness.</div>
+        }
+      </article>
+    </section>
+
+    <section class="panel-grid">
+      <article class="panel">
+        <header class="panel-header">
+          <div>
+            <h2>Evidence Chain</h2>
+            <p class="hint">DSSE, Rekor, call graph, and additional artifact links.</p>
+          </div>
+        </header>
+
+        @if (hasEvidenceLinks()) {
+          <div class="definition-list">
+            <div>
+              <span class="label">Analysis method</span>
+              <strong>{{ item.evidence.analysisMethod }}</strong>
+            </div>
+            <div>
+              <span class="label">Tool version</span>
+              <code>{{ item.evidence.toolVersion ?? 'n/a' }}</code>
+            </div>
+            <div>
+              <span class="label">Call graph hash</span>
+              <code>{{ item.evidence.callGraphHash ?? 'n/a' }}</code>
+            </div>
+            <div>
+              <span class="label">Surface hash</span>
+              <code>{{ item.evidence.surfaceHash ?? 'n/a' }}</code>
+            </div>
+          </div>
+
+          <ul class="link-list">
+            @if (item.evidence.dsseUri) {
+              <li><a [href]="item.evidence.dsseUri" target="_blank" rel="noreferrer">Open DSSE envelope</a></li>
+            }
+            @if (item.evidence.rekorUri) {
+              <li><a [href]="item.evidence.rekorUri" target="_blank" rel="noreferrer">Open Rekor entry</a></li>
+            }
+            @if (item.evidence.callGraphUri) {
+              <li><a [href]="item.evidence.callGraphUri" target="_blank" rel="noreferrer">Open call graph</a></li>
+            }
+            @if (item.evidence.attestationUri) {
+              <li><a [href]="item.evidence.attestationUri" target="_blank" rel="noreferrer">Open attestation bundle</a></li>
+            }
+            @for (artifact of item.evidence.artifacts ?? []; track artifact.hash) {
+              <li>
+                <span>{{ artifact.type }}</span>
+                <code>{{ artifact.hash }}</code>
+                @if (artifact.uri) {
+                  <a [href]="artifact.uri" target="_blank" rel="noreferrer">Open</a>
+                }
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="empty-state">No evidence links were returned for this witness.</div>
+        }
+      </article>
+
+      <article class="panel">
+        <header class="panel-header">
+          <div>
+            <h2>Runtime Observation</h2>
+            <p class="hint">Container, environment, freshness, and invocation context.</p>
+          </div>
+        </header>
+
+        @if (item.runtimeEvidence?.available) {
+          <div class="definition-list">
+            <div>
+              <span class="label">Source</span>
+              <strong>{{ item.runtimeEvidence?.source ?? 'n/a' }}</strong>
+            </div>
+            <div>
+              <span class="label">Last observed</span>
+              <strong>{{ formatDate(item.runtimeEvidence?.lastObservedAt) }}</strong>
+            </div>
+            <div>
+              <span class="label">Container</span>
+              <code>{{ item.runtimeEvidence?.containerContext?.containerId ?? 'n/a' }}</code>
+            </div>
+            <div>
+              <span class="label">Environment</span>
+              <strong>{{ item.runtimeEvidence?.containerContext?.environment ?? 'n/a' }}</strong>
+            </div>
+            <div>
+              <span class="label">Image digest</span>
+              <code>{{ item.runtimeEvidence?.containerContext?.imageDigest ?? 'n/a' }}</code>
+            </div>
+            <div>
+              <span class="label">Staleness</span>
+              <strong>
+                {{
+                  item.runtimeEvidence?.isStale
+                    ? 'Stale after ' + (item.runtimeEvidence?.staleAfterHours ?? '?') + 'h'
+                    : 'Fresh'
+                }}
+              </strong>
+            </div>
+          </div>
+        } @else {
+          <div class="empty-state">This witness only has static analysis evidence.</div>
+        }
+      </article>
+    </section>
+
+    <app-poe-drawer
+      [open]="showPoe() && !!proofArtifact()"
+      [poeArtifact]="proofArtifact()"
+      (close)="closePoeDrawer()"
+      (exportPoE)="exportPoeArtifact()"
+      (verifyPoE)="verifyWitness()"
+    />
+  }
+</section>

src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.scss

@@ -0,0 +1,303 @@
+:host {
+  display: block;
+}
+
+.witness-page {
+  display: grid;
+  gap: 1rem;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.heading {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.back-link {
+  justify-self: start;
+  border: none;
+  background: transparent;
+  color: var(--color-brand-primary);
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.82rem;
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent-cyan);
+  font-size: 0.78rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+.subtitle {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+  color: var(--color-text-secondary);
+}
+
+.subtitle code,
+.definition-list code,
+.path-content code,
+.gate-heading code {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.btn-primary,
+.btn-secondary,
+.dismiss {
+  cursor: pointer;
+}
+
+.btn-primary,
+.btn-secondary {
+  border-radius: var(--radius-md);
+  padding: 0.55rem 0.85rem;
+  font-size: 0.84rem;
+}
+
+.btn-primary {
+  border: 1px solid var(--color-brand-primary);
+  background: var(--color-brand-primary);
+  color: var(--color-text-heading);
+}
+
+.btn-secondary {
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-surface-primary);
+  color: var(--color-text-primary);
+}
+
+.message-banner {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--color-severity-low-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--color-severity-low) 12%, transparent);
+}
+
+.message-banner.error {
+  border-color: var(--color-severity-medium-border);
+  background: color-mix(in srgb, var(--color-severity-medium) 12%, transparent);
+}
+
+.dismiss {
+  border: none;
+  background: transparent;
+  color: inherit;
+}
+
+.summary-grid,
+.panel-grid {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.summary-grid {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.summary-card,
+.panel,
+.empty-state {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-secondary);
+}
+
+.summary-card {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.95rem 1rem;
+}
+
+.summary-card .label,
+.label {
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+
+.summary-card strong {
+  font-size: 1.25rem;
+}
+
+.summary-card span:last-child {
+  color: var(--color-text-secondary);
+}
+
+.panel-grid {
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.panel {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.hint,
+.detail {
+  color: var(--color-text-secondary);
+  font-size: 0.8rem;
+}
+
+.path-list,
+.gate-list,
+.link-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.path-list {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.path-row {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-primary);
+}
+
+.path-row--entrypoint {
+  border-left: 3px solid var(--color-status-success);
+}
+
+.path-row--sink {
+  border-left: 3px solid var(--color-status-error);
+}
+
+.path-kind {
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.74rem;
+}
+
+.path-content {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.definition-list {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}
+
+.definition-list > div {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.gate-list {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.gate-list li {
+  padding: 0.8rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-primary);
+}
+
+.gate-list p {
+  margin: 0.35rem 0;
+  color: var(--color-text-secondary);
+}
+
+.gate-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.link-list {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.link-list li {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-primary);
+}
+
+.link-list a {
+  color: var(--color-brand-primary);
+  text-decoration: none;
+}
+
+.empty-state {
+  padding: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.empty-state--error {
+  border-color: var(--color-severity-critical-border);
+}
+
+@media (max-width: 900px) {
+  .page-header {
+    flex-direction: column;
+  }
+
+  .actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .path-row {
+    grid-template-columns: 1fr;
+  }
+
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/release-detail.component.ts

@@ -143,7 +143,7 @@ interface ReloadOptions {
 
       @if (release()) {
         <header class="header">
-          <h1>{{ modeLabel() }} <EFBFBD> {{ release()!.name }} <small>{{ release()!.version }}</small></h1>
+          <h1>{{ modeLabel() }} · {{ release()!.name }} <small>{{ release()!.version }}</small></h1>
           <p>{{ release()!.digest || 'digest-unavailable' }}</p>
           <div class="chips">
             <span>{{ release()!.releaseType }}</span>
@@ -194,10 +194,10 @@ interface ReloadOptions {
         @switch (activeTab()) {
           @case ('overview') {
             <div class="grid">
-              <article><h3>Gate Posture</h3><p>{{ getGateStatusLabel(release()!.gateStatus) }} <EFBFBD> blockers {{ release()!.gateBlockingCount }}</p></article>
+              <article><h3>Gate Posture</h3><p>{{ getGateStatusLabel(release()!.gateStatus) }} · blockers {{ release()!.gateBlockingCount }}</p></article>
-              <article><h3>Promotion Posture</h3><p>{{ getRiskTierLabel(release()!.riskTier) }} <EFBFBD> approval {{ release()!.needsApproval ? 'required' : 'clear' }}</p></article>
+              <article><h3>Promotion Posture</h3><p>{{ getRiskTierLabel(release()!.riskTier) }} · approval {{ release()!.needsApproval ? 'required' : 'clear' }}</p></article>
               <article><h3>Impacted Environments</h3><p>{{ impactedEnvironments().join(', ') || 'none' }}</p></article>
-              <article><h3>Next Actions</h3><p><a [routerLink]="[detailBasePath(), releaseId(), 'gate-decision']">Promote</a> <EFBFBD> <a [routerLink]="[detailBasePath(), releaseId(), 'security-inputs']">Security</a> <EFBFBD> <a [routerLink]="[detailBasePath(), releaseId(), 'evidence']">Evidence</a></p></article>
+              <article><h3>Next Actions</h3><p><a [routerLink]="[detailBasePath(), releaseId(), 'gate-decision']">Promote</a> · <a [routerLink]="[detailBasePath(), releaseId(), 'security-inputs']">Security</a> · <a [routerLink]="[detailBasePath(), releaseId(), 'evidence']">Evidence</a></p></article>
             </div>
           }
 
@@ -271,16 +271,16 @@ interface ReloadOptions {
                   } @empty { <tr><td colspan="7">No findings.</td></tr> }
                 </tbody>
               </table>
-              <p><button type="button" (click)="openGlobalFindings()">Open Findings</button> <button type="button" (click)="createException()">Create Exception</button> <button type="button" (click)="openTab('rollback')">Compare Baseline</button> <button type="button" class="primary" (click)="exportSecurityEvidence()">Export Security Evidence</button></p>
+              <p><button type="button" (click)="openGlobalFindings()">Open Findings</button> <button type="button" (click)="openReachabilityWorkspace()">Open Reachability</button> <button type="button" (click)="createException()">Create Exception</button> <button type="button" (click)="openTab('rollback')">Compare Baseline</button> <button type="button" class="primary" (click)="exportSecurityEvidence()">Export Security Evidence</button></p>
             </article>
           }
 
           @case ('evidence') {
             <article>
               <h3>Pack Summary</h3>
-              <p>Versions {{ versions().length }} <EFBFBD> Findings {{ findings().length }} <EFBFBD> Dispositions {{ dispositions().length }}</p>
+              <p>Versions {{ versions().length }} · Findings {{ findings().length }} · Dispositions {{ dispositions().length }}</p>
               <h3>Proof Chain and Replay</h3>
-              <p>Evidence posture {{ getEvidencePostureLabel(release()!.evidencePosture) }} <EFBFBD> replay mismatch {{ release()!.replayMismatch ? 'yes' : 'no' }}</p>
+              <p>Evidence posture {{ getEvidencePostureLabel(release()!.evidencePosture) }} · replay mismatch {{ release()!.replayMismatch ? 'yes' : 'no' }}</p>
               <p><button type="button" (click)="openProofChain()">Proof Chain</button> <button type="button" (click)="openReplay()">Replay</button> <button type="button" class="primary" (click)="exportReleaseEvidence()">Export Evidence Pack</button></p>
             </article>
           }
@@ -624,6 +624,27 @@ export class ReleaseDetailComponent {
 
   openFinding(): void { void this.router.navigate(['/security/triage'], { queryParams: { releaseId: this.releaseContextId() } }); }
   createException(): void { void this.router.navigate(['/security/disposition'], { queryParams: { releaseId: this.releaseContextId(), tab: 'exceptions' } }); }
+  openReachabilityWorkspace(): void {
+    const release = this.release();
+    const search = this.findings()[0]?.cveId || release?.name || this.releaseContextId();
+    const queryParams: Record<string, string> = {
+      search,
+      releaseId: this.releaseContextId(),
+      returnTo: this.router.serializeUrl(
+        this.router.createUrlTree(
+          this.mode() === 'version'
+            ? ['/releases', 'versions', this.releaseId(), this.activeTab()]
+            : ['/releases', 'runs', this.releaseId(), this.activeTab()],
+        ),
+      ),
+    };
+
+    if (this.mode() === 'run') {
+      queryParams['runId'] = this.releaseId();
+    }
+
+    void this.router.navigate(['/security/reachability/witnesses'], { queryParams });
+  }
   replayRun(): void { void this.router.navigate(['/evidence/verify-replay'], { queryParams: { releaseId: this.releaseContextId(), runId: this.releaseId() } }); }
   exportRunEvidence(): void { void this.router.navigate(['/evidence/capsules'], { queryParams: { releaseId: this.releaseContextId(), runId: this.releaseId() } }); }
   openAgentLogs(target: string): void { void this.router.navigate(['/ops/operations/jobs-queues'], { queryParams: { releaseId: this.releaseContextId(), target } }); }

src/Web/StellaOps.Web/src/app/features/security-risk/finding-detail-page.component.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { take } from 'rxjs';
 
 interface PlatformItemResponse<T> { item: T; }
@@ -40,7 +40,7 @@ type DetailTab = 'why' | 'effective-vex' | 'waivers' | 'policy-trace' | 'evidenc
     <section class="detail">
       <header>
         <h1>{{ disposition()?.cveId || findingId() }}</h1>
-        <p>{{ disposition()?.componentName || 'component-unknown' }} <EFBFBD> {{ disposition()?.region }}/{{ disposition()?.environment }}</p>
+        <p>{{ disposition()?.componentName || 'component-unknown' }} · {{ disposition()?.region }}/{{ disposition()?.environment }}</p>
       </header>
 
       <div class="summary-strip">
@@ -103,12 +103,24 @@ type DetailTab = 'why' | 'effective-vex' | 'waivers' | 'policy-trace' | 'evidenc
               <p>Release: {{ disposition()!.releaseName }}</p>
               <p>Component: {{ disposition()!.componentName }} / {{ disposition()!.packageName }}</p>
               <a [routerLink]="['/evidence/exports/export']" [queryParams]="{ findingId: findingId() }">Export decision capsule</a>
+              <a
+                [routerLink]="['/security/reachability/witnesses']"
+                [queryParams]="reachabilityQueryParams()"
+              >
+                Inspect reachability proof
+              </a>
             </article>
           }
         }
 
         <footer class="actions">
           <a [routerLink]="['/security/triage']">Back to triage</a>
+          <a
+            [routerLink]="['/security/reachability/witnesses']"
+            [queryParams]="reachabilityQueryParams()"
+          >
+            Open witness workspace
+          </a>
           <a [routerLink]="['/security/advisories-vex']" [queryParams]="{ tab: 'vex-library' }">Search/Import VEX</a>
           <a [routerLink]="['/security/advisories-vex']" [queryParams]="{ tab: 'conflicts' }">Create waiver request</a>
         </footer>
@@ -148,6 +160,7 @@ type DetailTab = 'why' | 'effective-vex' | 'waivers' | 'policy-trace' | 'evidenc
 export class FindingDetailPageComponent {
   private readonly http = inject(HttpClient);
   private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
 
   readonly loading = signal(false);
   readonly error = signal<string | null>(null);
@@ -227,6 +240,19 @@ export class FindingDetailPageComponent {
     return d.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
   }
 
+  reachabilityQueryParams(): Record<string, string> {
+    const search =
+      this.disposition()?.cveId ||
+      this.finding()?.cveId ||
+      this.findingId();
+
+    return {
+      search,
+      findingId: this.findingId(),
+      returnTo: this.router.url,
+    };
+  }
+
   private load(findingId: string): void {
     this.loading.set(true);
     this.error.set(null);
@@ -259,4 +285,4 @@ export class FindingDetailPageComponent {
       },
     });
   }
-}
+}

src/Web/StellaOps.Web/src/app/features/triage/triage-workspace.component.html

@@ -339,11 +339,16 @@
                         @if (selectedVuln()!.vuln.reachabilityStatus === 'reachable') {
                           <p>Vulnerable code is <strong>reachable</strong> from application entry points.</p>
                           <p class="hint">Score: {{ selectedVuln()!.vuln.reachabilityScore ?? 0 }}</p>
-                          <button type="button" class="btn btn--secondary" (click)="openReachabilityDrawer()">View call paths</button>
+                          <div class="action-row">
+                            <button type="button" class="btn btn--secondary" (click)="openReachabilityDrawer()">View call paths</button>
+                            <button type="button" class="btn btn--secondary" (click)="openCanonicalReachabilityWorkspace()">Open witness workspace</button>
+                          </div>
                         } @else if (selectedVuln()!.vuln.reachabilityStatus === 'unreachable') {
                           <p>Vulnerable code is <strong>not reachable</strong> from application entry points.</p>
+                          <button type="button" class="btn btn--secondary" (click)="openCanonicalReachabilityWorkspace()">Open witness workspace</button>
                         } @else {
                           <p class="hint">Reachability analysis pending or unavailable.</p>
+                          <button type="button" class="btn btn--secondary" (click)="openCanonicalReachabilityWorkspace()">Open witness workspace</button>
                         }
                       </div>
                     </section>
@@ -494,14 +499,23 @@
                               &middot; score {{ selectedVuln()!.vuln.reachabilityScore ?? 0 }}
                             </p>
                           </div>
-                          <button
+                          <div class="reachability-header__actions">
-                            type="button"
+                            <button
-                            class="btn btn--secondary"
+                              type="button"
-                            (click)="openReachabilityDrawer()"
+                              class="btn btn--secondary"
-                            [disabled]="!selectedVuln()!.component"
+                              (click)="openReachabilityDrawer()"
+                              [disabled]="!selectedVuln()!.component"
+                              >
+                              View call paths
+                            </button>
+                            <button
+                              type="button"
+                              class="btn btn--secondary"
+                              (click)="openCanonicalReachabilityWorkspace()"
                             >
-                            View call paths
+                              Open witness workspace
-                          </button>
+                            </button>
+                          </div>
                         </header>
 
                         <div class="reachability-controls">

src/Web/StellaOps.Web/src/app/features/triage/triage-workspace.component.scss

@@ -341,6 +341,13 @@
   gap: var(--space-4);
 }
 
+.reachability-header__actions,
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
 .reachability-controls {
   display: flex;
   flex-wrap: wrap;

src/Web/StellaOps.Web/src/app/features/triage/triage-workspace.component.ts

@@ -400,14 +400,17 @@ export class TriageWorkspaceComponent implements OnInit, OnDestroy {
     });
 
     const artifactId = this.route.snapshot.paramMap.get('artifactId') ?? '';
+    const requestedFindingId = this.route.snapshot.queryParamMap.get('findingId');
+    const requestedTab = this.parseRequestedTab(this.route.snapshot.queryParamMap.get('tab'));
     this.artifactId.set(artifactId);
     await this.load();
     await this.loadVexDecisions();
 
-    const first = this.findings()[0]?.vuln.vulnId ?? null;
+    const initialFindingId = this.resolveRequestedFindingId(requestedFindingId);
-    this.selectedVulnId.set(first);
+    this.selectedVulnId.set(initialFindingId);
-    if (first) {
+    this.activeTab.set(initialFindingId ? requestedTab : 'evidence');
-      void this.loadUnifiedEvidence(first);
+    if (initialFindingId) {
+      void this.loadUnifiedEvidence(initialFindingId);
     }
 
     // Keep initialization responsive; gated buckets are non-blocking metadata.
@@ -849,6 +852,28 @@ export class TriageWorkspaceComponent implements OnInit, OnDestroy {
     void this.router.navigate(['/triage/audit-bundles/new'], { queryParams: { artifactId } });
   }
 
+  openCanonicalReachabilityWorkspace(): void {
+    const selected = this.selectedVuln();
+    if (!selected) {
+      return;
+    }
+
+    const queryParams: Record<string, string> = {
+      search: selected.vuln.cveId || selected.vuln.vulnId,
+      findingId: selected.vuln.vulnId,
+      returnTo: this.buildWorkspaceReturnTo('reachability'),
+    };
+
+    const releaseId = this.route.snapshot.queryParamMap.get('releaseId');
+    if (releaseId) {
+      queryParams['releaseId'] = releaseId;
+    }
+
+    void this.router.navigate(['/security/reachability/witnesses'], {
+      queryParams,
+    });
+  }
+
   setTab(tab: TabId): void {
     this.activeTab.set(tab);
   }
@@ -1297,4 +1322,38 @@ export class TriageWorkspaceComponent implements OnInit, OnDestroy {
       this.unifiedEvidence.set(updated);
     }
   }
+
+  private parseRequestedTab(value: string | null): TabId {
+    if (value && TAB_ORDER.includes(value as TabId)) {
+      return value as TabId;
+    }
+    return 'evidence';
+  }
+
+  private resolveRequestedFindingId(requestedFindingId: string | null): string | null {
+    if (requestedFindingId) {
+      const requested = this.findings().find(
+        (finding) =>
+          finding.vuln.vulnId === requestedFindingId ||
+          finding.vuln.cveId === requestedFindingId
+      );
+      if (requested) {
+        return requested.vuln.vulnId;
+      }
+    }
+
+    return this.findings()[0]?.vuln.vulnId ?? null;
+  }
+
+  private buildWorkspaceReturnTo(tab: TabId): string {
+    const selected = this.selectedVuln();
+    return this.router.serializeUrl(
+      this.router.createUrlTree(['/security', 'artifacts', this.artifactId()], {
+        queryParams: {
+          findingId: selected?.vuln.vulnId,
+          tab,
+        },
+      })
+    );
+  }
 }

src/Web/StellaOps.Web/src/app/routes/security-risk.routes.ts

@@ -230,6 +230,60 @@ export const SECURITY_RISK_ROUTES: Routes = [
         (m) => m.ReachabilityCenterComponent
       ),
   },
+  {
+    path: 'reachability/coverage',
+    title: 'Reachability Coverage',
+    data: { breadcrumb: 'Reachability Coverage' },
+    loadComponent: () =>
+      import('../features/reachability/reachability-center.component').then(
+        (m) => m.ReachabilityCenterComponent
+      ),
+  },
+  {
+    path: 'reachability/witnesses',
+    title: 'Reachability Witnesses',
+    data: { breadcrumb: 'Reachability Witnesses' },
+    loadComponent: () =>
+      import('../features/reachability/reachability-center.component').then(
+        (m) => m.ReachabilityCenterComponent
+      ),
+  },
+  {
+    path: 'reachability/witnesses/:witnessId',
+    title: 'Reachability Witness',
+    data: { breadcrumb: 'Reachability Witness' },
+    loadComponent: () =>
+      import('../features/reachability/witness-page.component').then(
+        (m) => m.WitnessPageComponent
+      ),
+  },
+  {
+    path: 'reachability/poe',
+    title: 'Proof Of Exposure',
+    data: { breadcrumb: 'Proof Of Exposure' },
+    loadComponent: () =>
+      import('../features/reachability/reachability-center.component').then(
+        (m) => m.ReachabilityCenterComponent
+      ),
+  },
+  {
+    path: 'reachability/poe/:artifactId',
+    title: 'Proof Of Exposure',
+    data: { breadcrumb: 'Proof Of Exposure' },
+    loadComponent: () =>
+      import('../features/reachability/reachability-center.component').then(
+        (m) => m.ReachabilityCenterComponent
+      ),
+  },
+  {
+    path: 'reachability/gaps',
+    title: 'Sensor Gaps',
+    data: { breadcrumb: 'Sensor Gaps' },
+    loadComponent: () =>
+      import('../features/reachability/reachability-center.component').then(
+        (m) => m.ReachabilityCenterComponent
+      ),
+  },
   {
     path: 'risk',
     title: 'Risk Overview',

src/Web/StellaOps.Web/src/tests/evidence/replay-controls-reachability-handoff.spec.ts

@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router, convertToParamMap, provideRouter } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+
+import { ReplayControlsComponent } from '../../app/features/evidence-export/replay-controls.component';
+
+describe('ReplayControlsComponent reachability handoff', () => {
+  let fixture: ComponentFixture<ReplayControlsComponent>;
+  let component: ReplayControlsComponent;
+  let queryParamMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+
+  beforeEach(async () => {
+    queryParamMap$ = new BehaviorSubject(
+      convertToParamMap({
+        requestId: 'rr-003',
+        releaseId: 'rel-ops-42',
+        runId: 'run-ops-42',
+      })
+    );
+
+    await TestBed.configureTestingModule({
+      imports: [ReplayControlsComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParamMap: queryParamMap$.asObservable(),
+            snapshot: {
+              queryParamMap: queryParamMap$.value,
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReplayControlsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('restores the expanded replay request from query state', () => {
+    expect(component.expandedRequest()).toBe('rr-003');
+    expect(component.releaseId()).toBe('rel-ops-42');
+    expect(component.runId()).toBe('run-ops-42');
+  });
+
+  it('navigates to canonical reachability with return-to replay context', () => {
+    const router = TestBed.inject(Router);
+    const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    component.openReachabilityWorkspace(component.requests()[2]);
+
+    expect(navigateSpy).toHaveBeenCalledWith(
+      ['/security/reachability/witnesses'],
+      {
+        queryParams: {
+          search: 'verdict-ghi789',
+          returnTo:
+            '/evidence/verify-replay?requestId=rr-003&releaseId=rel-ops-42&runId=run-ops-42',
+          releaseId: 'rel-ops-42',
+          runId: 'run-ops-42',
+        },
+      }
+    );
+  });
+});

src/Web/StellaOps.Web/src/tests/reachability_center/reachability-center.component.spec.ts

@@ -1,47 +1,116 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, UrlSegment, convertToParamMap, provideRouter } from '@angular/router';
+import { BehaviorSubject, of } from 'rxjs';
 
+import { WITNESS_API, type WitnessApi } from '../../app/core/api/witness.client';
 import { ReachabilityCenterComponent } from '../../app/features/reachability/reachability-center.component';
+import { REACHABILITY_WITNESS_FIXTURES } from '../../app/features/reachability/reachability-fixtures';
 
 describe('ReachabilityCenterComponent (reachability_center)', () => {
   let fixture: ComponentFixture<ReachabilityCenterComponent>;
   let component: ReachabilityCenterComponent;
 
+  let urlSegments$: BehaviorSubject<UrlSegment[]>;
+  let paramMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+  let queryParamMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+
   beforeEach(async () => {
+    urlSegments$ = new BehaviorSubject<UrlSegment[]>([
+      new UrlSegment('reachability', {}),
+      new UrlSegment('witnesses', {}),
+    ]);
+    paramMap$ = new BehaviorSubject(convertToParamMap({}));
+    queryParamMap$ = new BehaviorSubject(
+      convertToParamMap({
+        search: 'CVE-2026-4001',
+        returnTo: '/evidence/verify-replay?requestId=rr-001',
+      })
+    );
+
+    const witnessApi = jasmine.createSpyObj('WitnessApi', [
+      'getWitness',
+      'listWitnesses',
+      'verifyWitness',
+      'getWitnessesForVuln',
+      'getStateFlipSummary',
+      'downloadWitnessJson',
+      'exportSarif',
+      'getRuntimeTraces',
+      'getWitnessTimeline',
+      'getComparisonMetrics',
+    ]) as jasmine.SpyObj<WitnessApi>;
+    witnessApi.listWitnesses.and.returnValue(
+      of({
+        witnesses: [...REACHABILITY_WITNESS_FIXTURES],
+        total: REACHABILITY_WITNESS_FIXTURES.length,
+        page: 1,
+        pageSize: 50,
+        hasMore: false,
+      })
+    );
+
+    const routeStub = {
+      url: urlSegments$.asObservable(),
+      paramMap: paramMap$.asObservable(),
+      queryParamMap: queryParamMap$.asObservable(),
+      get snapshot() {
+        return {
+          url: urlSegments$.value,
+          paramMap: paramMap$.value,
+          queryParamMap: queryParamMap$.value,
+        };
+      },
+    };
+
     await TestBed.configureTestingModule({
       imports: [ReachabilityCenterComponent],
+      providers: [
+        provideRouter([]),
+        { provide: ActivatedRoute, useValue: routeStub },
+        { provide: WITNESS_API, useValue: witnessApi },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ReachabilityCenterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
   });
 
-  it('computes deterministic coverage and missing-sensor summaries', () => {
+  it('loads the witness list from the canonical route and applies query filters', () => {
+    expect(component.activeTab()).toBe('witnesses');
     expect(component.okCount()).toBe(1);
     expect(component.staleCount()).toBe(1);
     expect(component.missingCount()).toBe(1);
-    expect(component.fleetCoveragePercent()).toBe(69);
+    expect(component.fleetCoveragePercent()).toBe(73);
     expect(component.sensorCoveragePercent()).toBe(63);
-    expect(component.assetsMissingSensors().map((a) => a.assetId)).toEqual([
+    expect(component.filteredWitnesses().map((witness) => witness.witnessId)).toEqual([
-      'asset-api-prod',
+      'wit-api-001',
-      'asset-worker-prod',
     ]);
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain('Reachability');
+    expect(text).toContain('wit-api-001');
   });
 
-  it('supports missing-sensor quick filter action', () => {
+  it('resolves the PoE permalink route to the matching proof artifact', async () => {
-    component.goToMissingSensors();
+    urlSegments$.next([
+      new UrlSegment('reachability', {}),
+      new UrlSegment('poe', {}),
+    ]);
+    paramMap$.next(convertToParamMap({ artifactId: 'cve-2026-4001' }));
+    queryParamMap$.next(convertToParamMap({ tab: 'poe' }));
+
+    await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(component.statusFilter()).toBe('missing');
+    expect(component.activeTab()).toBe('poe');
-    expect(component.filteredRows().map((r) => r.assetId)).toEqual(['asset-worker-prod']);
+    expect(component.selectedPoeArtifactId()).toBe('cve-2026-4001');
+    expect(component.selectedPoeArtifact()?.vulnId).toBe('CVE-2026-4001');
   });
 
-  it('renders missing sensor chips and per-row sensor gap text', () => {
+  it('labels evidence replay as the return target when opened from replay verification', () => {
-    const text = fixture.nativeElement.textContent as string;
+    expect(component.returnToLabel()).toBe('Verify & Replay');
-    expect(text).toContain('Missing sensors detected');
-    expect(text).toContain('asset-api-prod');
-    expect(text).toContain('missing 1 sensor');
-    expect(text).toContain('missing 2 sensors');
-    expect(text).toContain('all sensors online');
   });
 });

src/Web/StellaOps.Web/src/tests/reachability_center/witness-page.component.spec.ts

@@ -0,0 +1,111 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router, UrlSegment, convertToParamMap, provideRouter } from '@angular/router';
+import { BehaviorSubject, throwError } from 'rxjs';
+
+import { WITNESS_API, type WitnessApi } from '../../app/core/api/witness.client';
+import { WitnessPageComponent } from '../../app/features/reachability/witness-page.component';
+
+describe('WitnessPageComponent (reachability_center)', () => {
+  let fixture: ComponentFixture<WitnessPageComponent>;
+  let component: WitnessPageComponent;
+  let router: Router;
+
+  let paramMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+  let queryParamMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+
+  beforeEach(async () => {
+    paramMap$ = new BehaviorSubject(
+      convertToParamMap({ witnessId: 'wit-api-001' })
+    );
+    queryParamMap$ = new BehaviorSubject(
+      convertToParamMap({
+        panel: 'poe',
+        returnTo: '/security/findings/finding-api-001',
+      })
+    );
+
+    const witnessApi = jasmine.createSpyObj('WitnessApi', [
+      'getWitness',
+      'listWitnesses',
+      'verifyWitness',
+      'getWitnessesForVuln',
+      'getStateFlipSummary',
+      'downloadWitnessJson',
+      'exportSarif',
+      'getRuntimeTraces',
+      'getWitnessTimeline',
+      'getComparisonMetrics',
+    ]) as jasmine.SpyObj<WitnessApi>;
+    witnessApi.getWitness.and.returnValue(
+      throwError(() => new Error('backend unavailable'))
+    );
+    witnessApi.verifyWitness.and.returnValue(
+      throwError(() => new Error('backend unavailable'))
+    );
+    witnessApi.downloadWitnessJson.and.returnValue(
+      throwError(() => new Error('backend unavailable'))
+    );
+
+    const routeStub = {
+      paramMap: paramMap$.asObservable(),
+      queryParamMap: queryParamMap$.asObservable(),
+      get snapshot() {
+        return {
+          url: [
+            new UrlSegment('reachability', {}),
+            new UrlSegment('witnesses', {}),
+            new UrlSegment('wit-api-001', {}),
+          ],
+          paramMap: paramMap$.value,
+          queryParamMap: queryParamMap$.value,
+        };
+      },
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [WitnessPageComponent],
+      providers: [
+        provideRouter([]),
+        { provide: ActivatedRoute, useValue: routeStub },
+        { provide: WITNESS_API, useValue: witnessApi },
+      ],
+    }).compileComponents();
+
+    router = TestBed.inject(Router);
+    fixture = TestBed.createComponent(WitnessPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  });
+
+  it('falls back to cached witness fixtures and opens the PoE drawer from query state', () => {
+    expect(component.witness()?.witnessId).toBe('wit-api-001');
+    expect(component.showPoe()).toBeTrue();
+    expect(component.proofArtifact()?.vulnId).toBe('CVE-2026-4001');
+    expect((fixture.nativeElement.textContent as string)).toContain('Reachability Witness');
+  });
+
+  it('verifies witnesses through the offline fallback when the backend is unavailable', async () => {
+    await component.verifyWitness();
+    fixture.detectChanges();
+
+    expect(component.message()).toContain('verified');
+    expect(component.messageType()).toBe('success');
+  });
+
+  it('navigates to the canonical PoE permalink route from witness detail', () => {
+    const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    component.openPoePermalink();
+
+    expect(navigateSpy).toHaveBeenCalledWith(
+      ['/security', 'reachability', 'poe', 'cve-2026-4001'],
+      {
+        queryParams: {
+          returnTo: '/security/reachability/witnesses/wit-api-001?returnTo=%2Fsecurity%2Ffindings%2Ffinding-api-001',
+        },
+      }
+    );
+  });
+});

src/Web/StellaOps.Web/src/tests/releases/release-detail.live-refresh.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
-import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
+import { ActivatedRoute, Router, convertToParamMap, provideRouter } from '@angular/router';
 import { BehaviorSubject, of } from 'rxjs';
 import { signal } from '@angular/core';
 
@@ -133,4 +133,84 @@ describe('ReleaseDetailComponent live refresh contract', () => {
       }),
     );
   });
+
+  it('opens the canonical reachability workspace with a release return-to link', () => {
+    const router = TestBed.inject(Router);
+    const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    component.mode.set('run');
+    component.releaseId.set('run-3');
+    component.activeTab.set('security-inputs');
+    component.runManagedRelease.set({
+      id: 'run-3',
+      name: 'billing',
+      version: 'v3',
+      releaseType: 'standard',
+      gateStatus: 'warn',
+      evidencePosture: 'partial',
+      riskTier: 'high',
+      needsApproval: true,
+      blocked: false,
+      replayMismatch: false,
+      createdAt: '2026-02-20T12:00:00Z',
+      createdBy: 'system',
+      updatedAt: '2026-02-20T12:30:00Z',
+      lastActor: 'system',
+    } as any);
+    component.runDetail.set({
+      runId: 'run-3',
+      releaseId: 'rel-3',
+      releaseName: 'billing',
+      releaseSlug: 'billing',
+      releaseType: 'standard',
+      releaseVersionId: 'ver-3',
+      releaseVersionNumber: 3,
+      releaseVersionDigest: 'sha256:ghi',
+      lane: 'standard',
+      status: 'running',
+      outcome: 'in_progress',
+      targetEnvironment: 'prod',
+      targetRegion: 'eu-west',
+      scopeSummary: 'stage->prod',
+      requestedAt: '2026-02-20T12:00:00Z',
+      updatedAt: '2026-02-20T12:30:00Z',
+      needsApproval: true,
+      blockedByDataIntegrity: false,
+      correlationKey: 'corr-3',
+      statusRow: {
+        runStatus: 'running',
+        gateStatus: 'warn',
+        approvalStatus: 'pending',
+        dataTrustStatus: 'healthy',
+      },
+    });
+    component.findings.set([
+      {
+        findingId: 'finding-1',
+        cveId: 'CVE-2026-4401',
+        severity: 'high',
+        componentName: 'billing-api',
+        releaseId: 'rel-3',
+        reachable: true,
+        reachabilityScore: 91,
+        effectiveDisposition: 'review_required',
+        vexStatus: 'under_investigation',
+        exceptionStatus: 'none',
+      },
+    ]);
+
+    component.openReachabilityWorkspace();
+
+    expect(navigateSpy).toHaveBeenCalledWith(
+      ['/security/reachability/witnesses'],
+      {
+        queryParams: {
+          search: 'CVE-2026-4401',
+          releaseId: 'rel-3',
+          returnTo: '/releases/runs/run-3/security-inputs',
+          runId: 'run-3',
+        },
+      }
+    );
+  });
 });

src/Web/StellaOps.Web/src/tests/security-risk/finding-detail-page-reachability-handoff.spec.ts

@@ -0,0 +1,94 @@
+import { HttpClient } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router, convertToParamMap, provideRouter } from '@angular/router';
+import { BehaviorSubject, of } from 'rxjs';
+
+import { FindingDetailPageComponent } from '../../app/features/security-risk/finding-detail-page.component';
+
+describe('FindingDetailPageComponent reachability handoff', () => {
+  let fixture: ComponentFixture<FindingDetailPageComponent>;
+  let component: FindingDetailPageComponent;
+
+  beforeEach(async () => {
+    const paramMap$ = new BehaviorSubject(
+      convertToParamMap({ findingId: 'finding-api-001' })
+    );
+    const queryParamMap$ = new BehaviorSubject(convertToParamMap({ tab: 'evidence' }));
+
+    const http = {
+      get: jasmine.createSpy('get').and.callFake((url: string) => {
+        if (url.includes('/api/v2/security/disposition/')) {
+          return of({
+            item: {
+              findingId: 'finding-api-001',
+              cveId: 'CVE-2026-4001',
+              releaseId: 'run-123',
+              releaseName: 'release-123',
+              packageName: 'api-gateway',
+              componentName: 'api-gateway',
+              environment: 'prod',
+              region: 'eu-west',
+              effectiveDisposition: 'action_required',
+              policyAction: 'block',
+              updatedAt: '2026-03-07T10:00:00Z',
+              vex: { status: 'under_investigation', justification: 'pending' },
+              exception: { status: 'none', reason: '', approvalState: 'none' },
+            },
+          });
+        }
+
+        return of({
+          items: [
+            {
+              findingId: 'finding-api-001',
+              cveId: 'CVE-2026-4001',
+              severity: 'high',
+              reachable: true,
+              reachabilityScore: 91,
+              updatedAt: '2026-03-07T10:00:00Z',
+            },
+          ],
+        });
+      }),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [FindingDetailPageComponent],
+      providers: [
+        provideRouter([]),
+        { provide: HttpClient, useValue: http },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            paramMap: paramMap$.asObservable(),
+            queryParamMap: queryParamMap$.asObservable(),
+            snapshot: {
+              paramMap: paramMap$.value,
+              queryParamMap: queryParamMap$.value,
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+
+    const router = TestBed.inject(Router);
+    Object.defineProperty(router, 'url', {
+      configurable: true,
+      get: () => '/security/findings/finding-api-001?tab=evidence',
+    });
+
+    fixture = TestBed.createComponent(FindingDetailPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  });
+
+  it('builds canonical reachability query params from the current finding context', () => {
+    expect(component.reachabilityQueryParams()).toEqual({
+      search: 'CVE-2026-4001',
+      findingId: 'finding-api-001',
+      returnTo: '/security/findings/finding-api-001?tab=evidence',
+    });
+  });
+});

src/Web/StellaOps.Web/src/tests/security-risk/security-risk-routes.spec.ts

@@ -51,6 +51,15 @@ describe('SECURITY_RISK_ROUTES', () => {
     expect(allPaths).toContain('reachability');
   });
 
+  it('contains the reachability witness and proof routes', () => {
+    expect(allPaths).toContain('reachability/coverage');
+    expect(allPaths).toContain('reachability/witnesses');
+    expect(allPaths).toContain('reachability/witnesses/:witnessId');
+    expect(allPaths).toContain('reachability/poe');
+    expect(allPaths).toContain('reachability/poe/:artifactId');
+    expect(allPaths).toContain('reachability/gaps');
+  });
+
   it('contains the risk route', () => {
     expect(allPaths).toContain('risk');
   });
@@ -169,6 +178,12 @@ describe('SECURITY_RISK_ROUTES', () => {
     expect(getRouteByPath('reachability')?.data?.['breadcrumb']).toBe('Reachability');
   });
 
+  it('reachability witness detail route has the expected breadcrumb', () => {
+    expect(getRouteByPath('reachability/witnesses/:witnessId')?.data?.['breadcrumb']).toBe(
+      'Reachability Witness'
+    );
+  });
+
   it('lineage route has "Lineage" breadcrumb', () => {
     expect(getRouteByPath('lineage')?.data?.['breadcrumb']).toBe('Lineage');
   });
@@ -188,6 +203,11 @@ describe('SECURITY_RISK_ROUTES', () => {
     expect((component as { name?: string }).name).toContain('ExceptionApprovalQueueComponent');
   });
 
+  it('reachability witness detail route loads WitnessPageComponent', async () => {
+    const component = await loadComponentByPath('reachability/witnesses/:witnessId');
+    expect((component as { name?: string }).name).toContain('WitnessPageComponent');
+  });
+
   // ──────────────────────────────────────────
   // Route count sanity check
   // ──────────────────────────────────────────

src/Web/StellaOps.Web/src/tests/triage/triage-workspace-with-proof-tree.behavior.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ActivatedRoute, provideRouter } from '@angular/router';
+import { ActivatedRoute, Router, convertToParamMap, provideRouter } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 
@@ -64,7 +64,18 @@ describe('triage-workspace-with-proof-tree behavior', () => {
         provideRouter([]),
         { provide: VULNERABILITY_API, useValue: vulnApi },
         { provide: VEX_DECISIONS_API, useValue: vexApi },
-        { provide: ActivatedRoute, useValue: { snapshot: { paramMap: new Map([['artifactId', 'asset-web-prod']]) } } },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ artifactId: 'asset-web-prod' }),
+              queryParamMap: convertToParamMap({
+                findingId: 'v-2',
+                tab: 'reachability',
+              }),
+            },
+          },
+        },
       ],
     }).compileComponents();
 
@@ -82,8 +93,8 @@ describe('triage-workspace-with-proof-tree behavior', () => {
 
     const component = workspaceFixture.componentInstance;
     expect(component.findings().map((finding) => finding.vuln.vulnId)).toEqual(['v-1', 'v-2']);
-    expect(component.selectedVulnId()).toBe('v-1');
+    expect(component.selectedVulnId()).toBe('v-2');
-    expect(component.activeTab()).toBe('evidence');
+    expect(component.activeTab()).toBe('reachability');
   });
 
   it('supports reachability tab with textual proof mode toggle', async () => {
@@ -99,8 +110,31 @@ describe('triage-workspace-with-proof-tree behavior', () => {
     expect(component.activeTab()).toBe('reachability');
     expect(component.reachabilityView()).toBe('textual-proof');
 
-    const hintText = (workspaceFixture.nativeElement.querySelector('.reachability-view .hint') as HTMLElement | null)?.textContent ?? '';
+    const viewText = (workspaceFixture.nativeElement.querySelector('.reachability-view') as HTMLElement | null)?.textContent ?? '';
-    expect(hintText).toContain('Textual proof view');
+    expect(viewText).toContain('Status:');
+  });
+
+  it('opens the canonical reachability workspace with a return-to link', async () => {
+    workspaceFixture.detectChanges();
+    await workspaceFixture.whenStable();
+    workspaceFixture.detectChanges();
+
+    const router = TestBed.inject(Router);
+    const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+    const component = workspaceFixture.componentInstance;
+
+    component.openCanonicalReachabilityWorkspace();
+
+    expect(navigateSpy).toHaveBeenCalledWith(
+      ['/security/reachability/witnesses'],
+      {
+        queryParams: {
+          search: 'CVE-2026-3002',
+          findingId: 'v-2',
+          returnTo: '/security/artifacts/asset-web-prod?findingId=v-2&tab=reachability',
+        },
+      }
+    );
   });
 
   it('renders proof tree digest and emits verify action', () => {

src/Web/StellaOps.Web/tests/e2e/reachability-witnessing.spec.ts

@@ -0,0 +1,265 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+
+import type { StubAuthSession } from '../../src/app/testing/auth-fixtures';
+
+const adminSession: StubAuthSession = {
+  subjectId: 'reachability-e2e-user',
+  tenant: 'tenant-default',
+  scopes: [
+    'admin',
+    'ui.read',
+    'scanner:read',
+    'sbom:read',
+    'advisory:read',
+    'vex:read',
+    'exception:read',
+    'findings:read',
+    'vuln:view',
+    'release:read',
+    'policy:read',
+    'policy:audit',
+  ],
+};
+
+const mockConfig = {
+  authority: {
+    issuer: '/authority',
+    clientId: 'stella-ops-ui',
+    authorizeEndpoint: '/authority/connect/authorize',
+    tokenEndpoint: '/authority/connect/token',
+    logoutEndpoint: '/authority/connect/logout',
+    redirectUri: 'https://127.0.0.1:4400/auth/callback',
+    postLogoutRedirectUri: 'https://127.0.0.1:4400/',
+    scope: 'openid profile email ui.read',
+    audience: '/gateway',
+    dpopAlgorithms: ['ES256'],
+    refreshLeewaySeconds: 60,
+  },
+  apiBaseUrls: {
+    authority: '/authority',
+    scanner: '/scanner',
+    policy: '/policy',
+    concelier: '/concelier',
+    attestor: '/attestor',
+    gateway: '/gateway',
+  },
+  quickstartMode: true,
+  setup: 'complete',
+};
+
+const witnessFixtures = [
+  {
+    witnessId: 'wit-api-001',
+    scanId: 'scan-release-orchestrator-prod',
+    tenantId: 'tenant-default',
+    vulnId: 'finding-api-001',
+    cveId: 'CVE-2026-4001',
+    packageName: 'api-gateway',
+    packageVersion: '1.8.4',
+    purl: 'pkg:oci/api-gateway@sha256:api001',
+    confidenceTier: 'confirmed',
+    confidenceScore: 0.94,
+    isReachable: true,
+    callPath: [
+      { nodeId: 'n-api-1', symbol: 'IngressController.route()', file: 'src/ingress/controller.ts', line: 18 },
+      { nodeId: 'n-api-2', symbol: 'AuthContext.load()', file: 'src/auth/context.ts', line: 44 },
+      { nodeId: 'n-api-3', symbol: 'ReleaseResolver.resolve()', file: 'src/release/resolver.ts', line: 91 },
+    ],
+    entrypoint: {
+      nodeId: 'n-api-1',
+      symbol: 'IngressController.route()',
+      file: 'src/ingress/controller.ts',
+      line: 18,
+      httpRoute: '/releases/{id}',
+      httpMethod: 'GET',
+    },
+    sink: {
+      nodeId: 'n-api-4',
+      symbol: 'JacksonDeserializer.readValue()',
+      package: 'com.fasterxml.jackson.databind',
+      method: 'readValue',
+    },
+    gates: [
+      {
+        gateType: 'auth',
+        symbol: 'jwt.required',
+        confidence: 0.91,
+        description: 'JWT auth gate precedes the vulnerable parser path.',
+        file: 'src/auth/context.ts',
+        line: 22,
+      },
+    ],
+    evidence: {
+      analysisMethod: 'hybrid',
+      toolVersion: 'reachability-ui-fixture-v2',
+      callGraphHash: 'blake3:api-gateway-callgraph',
+      surfaceHash: 'sha256:api-gateway-surface',
+      dsseUri: '/evidence/capsules/cap-api-001',
+      rekorUri: 'https://rekor.example.dev/entries/498201',
+      callGraphUri: '/security/reachability?graph=api-gateway',
+      artifacts: [
+        { type: 'call-graph', hash: 'blake3:api-gateway-callgraph', algorithm: 'blake3', uri: '/security/reachability?graph=api-gateway' },
+      ],
+    },
+    signature: {
+      algorithm: 'ed25519',
+      keyId: 'reachability-signer-1',
+      signature: 'sig-api-001',
+      verified: true,
+      verifiedAt: '2026-03-07T15:20:00Z',
+    },
+    observedAt: '2026-03-07T15:14:00Z',
+    vexRecommendation: 'affected',
+    runtimeEvidence: {
+      available: true,
+      source: 'ebpf',
+      lastObservedAt: '2026-03-07T15:14:00Z',
+      invocationCount: 182,
+      confirmsStatic: true,
+      observationType: 'confirmed',
+      rekorLogIndex: 498201,
+      isStale: false,
+      containerContext: {
+        containerId: 'ctr-api-11',
+        imageDigest: 'sha256:api001',
+        environment: 'prod-eu',
+      },
+    },
+  },
+];
+
+async function fulfillJson(route: Route, body: unknown): Promise<void> {
+  await route.fulfill({
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify(body),
+  });
+}
+
+async function setupHarness(page: Page): Promise<void> {
+  await page.addInitScript((session) => {
+    (window as { __stellaopsTestSession?: unknown }).__stellaopsTestSession = session;
+  }, adminSession);
+
+  await page.route('**/platform/envsettings.json', (route) => fulfillJson(route, mockConfig));
+  await page.route('**/config.json', (route) => fulfillJson(route, mockConfig));
+  await page.route('**/.well-known/openid-configuration', (route) =>
+    fulfillJson(route, {
+      issuer: 'https://127.0.0.1:4400/authority',
+      authorization_endpoint: 'https://127.0.0.1:4400/authority/connect/authorize',
+      token_endpoint: 'https://127.0.0.1:4400/authority/connect/token',
+      jwks_uri: 'https://127.0.0.1:4400/authority/.well-known/jwks.json',
+      response_types_supported: ['code'],
+      subject_types_supported: ['public'],
+      id_token_signing_alg_values_supported: ['RS256'],
+    })
+  );
+  await page.route('**/authority/.well-known/jwks.json', (route) => fulfillJson(route, { keys: [] }));
+  await page.route('**/console/profile**', (route) =>
+    fulfillJson(route, {
+      subjectId: adminSession.subjectId,
+      username: 'reachability-e2e',
+      displayName: 'Reachability E2E',
+      tenant: adminSession.tenant,
+      roles: ['admin'],
+      scopes: adminSession.scopes,
+    })
+  );
+  await page.route('**/console/token/introspect**', (route) =>
+    fulfillJson(route, {
+      active: true,
+      tenant: adminSession.tenant,
+      subject: adminSession.subjectId,
+      scopes: adminSession.scopes,
+    })
+  );
+  await page.route('**/api/v2/context/regions', (route) =>
+    fulfillJson(route, [{ regionId: 'eu-west', displayName: 'EU West', sortOrder: 1, enabled: true }])
+  );
+  await page.route('**/api/v2/context/environments**', (route) =>
+    fulfillJson(route, [
+      {
+        environmentId: 'prod',
+        regionId: 'eu-west',
+        environmentType: 'prod',
+        displayName: 'Prod',
+        sortOrder: 1,
+        enabled: true,
+      },
+    ])
+  );
+  await page.route('**/api/v2/context/preferences', (route) =>
+    fulfillJson(route, {
+      tenantId: adminSession.tenant,
+      actorId: adminSession.subjectId,
+      regions: ['eu-west'],
+      environments: ['prod'],
+      timeWindow: '24h',
+      stage: 'all',
+      updatedAt: '2026-03-07T12:00:00Z',
+      updatedBy: adminSession.subjectId,
+    })
+  );
+  await page.route('**/doctor/api/v1/doctor/trends**', (route) => fulfillJson(route, []));
+  await page.route('**/api/v1/approvals**', (route) => fulfillJson(route, []));
+  await page.route('**/api/v1/witnesses?*', (route) =>
+    fulfillJson(route, {
+      witnesses: witnessFixtures,
+      total: witnessFixtures.length,
+      page: 1,
+      pageSize: 50,
+      hasMore: false,
+    })
+  );
+  await page.route('**/api/v1/witnesses/wit-api-001', (route) =>
+    fulfillJson(route, witnessFixtures[0])
+  );
+  await page.route('**/api/v1/witnesses/wit-api-001/verify', (route) =>
+    fulfillJson(route, {
+      witnessId: 'wit-api-001',
+      verified: true,
+      algorithm: 'ed25519',
+      keyId: 'reachability-signer-1',
+      verifiedAt: '2026-03-07T16:30:00Z',
+    })
+  );
+}
+
+test.beforeEach(async ({ page }) => {
+  await setupHarness(page);
+});
+
+test('reachability shell, witness detail, and PoE permalink stay in one canonical flow', async ({ page }) => {
+  await page.goto('/security/reachability/witnesses?search=CVE-2026-4001', {
+    waitUntil: 'networkidle',
+  });
+
+  await expect(page.getByTestId('reachability-page')).toBeVisible();
+  await expect(page.getByTestId('reachability-tab-witnesses')).toHaveClass(/active/);
+  await expect(page.getByTestId('witness-row')).toHaveCount(1);
+
+  await page.getByRole('link', { name: 'Open witness' }).click();
+  await expect(page).toHaveURL(/\/security\/reachability\/witnesses\/wit-api-001/);
+  await expect(page.getByTestId('witness-page')).toBeVisible();
+
+  await page.getByTestId('open-poe-btn').click();
+  await expect(page.getByTestId('poe-drawer')).toHaveClass(/poe-drawer--open/);
+  await page.getByTestId('poe-drawer-close').click();
+
+  await page.getByRole('button', { name: 'Permalink' }).click();
+  await expect(page).toHaveURL(/\/security\/reachability\/poe\/cve-2026-4001/);
+  await expect(page.getByTestId('poe-drawer')).toHaveClass(/poe-drawer--open/);
+});
+
+test('verify and replay hands off into the canonical reachability witness workspace', async ({ page }) => {
+  await page.goto('/evidence/verify-replay?releaseId=rel-ops-42&runId=run-ops-42&requestId=rr-003', {
+    waitUntil: 'networkidle',
+  });
+
+  await expect(page.getByText('Context:')).toBeVisible();
+  await page.getByRole('button', { name: 'Open reachability proof' }).click();
+
+  await expect(page).toHaveURL(/\/security\/reachability\/witnesses/);
+  await expect(page.url()).toContain('returnTo=%2Fevidence%2Fverify-replay%3FrequestId%3Drr-003%26releaseId%3Drel-ops-42%26runId%3Drun-ops-42');
+  await expect(page.getByTestId('reachability-page')).toBeVisible();
+});