Files
git.stella-ops.org/docs/features/checked/web/three-pane-layout.md
2026-02-12 10:27:23 +02:00

2.3 KiB

Three-Pane Layout (Categories/Items/Proof)

Module

Web

Status

VERIFIED

Description

The compare feature implements a three-pane layout with categories, items, and proof panes for side-by-side comparison workflows.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/compare/components/
  • Components:
    • three-pane-layout (src/Web/StellaOps.Web/src/app/features/compare/components/three-pane-layout.component.ts)
    • categories-pane (src/Web/StellaOps.Web/src/app/features/compare/components/categories-pane.component.ts)
    • items-pane (src/Web/StellaOps.Web/src/app/features/compare/components/items-pane.component.ts)
    • proof-pane (src/Web/StellaOps.Web/src/app/features/compare/components/proof-pane.component.ts)
    • compare-view integration (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view.component.ts)
  • Services:
    • delta-compute (src/Web/StellaOps.Web/src/app/features/compare/services/delta-compute.service.ts)
  • Behavior coverage:
    • src/Web/StellaOps.Web/src/tests/compare/three-pane-layout.behavior.spec.ts
  • Source: Feature matrix scan (corrected during QA verification)

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to compare workflow route
    • Ensure compare session test data exists (baseline/current scan pair)
  • Core verification:
    • Verify the three panes render with deterministic panel ordering
    • Verify category selection updates item filter and resets item selection
    • Verify selected item/category propagate into proof/categories panes
  • Edge cases:
    • Verify graceful handling when no category is selected (filter clear)
    • Verify responsive layout behavior at reduced viewport widths
    • Verify keyboard/accessibility semantics for pane interactions

Verification

  • Run ID: docs/qa/feature-checks/runs/web/three-pane-layout/run-001/
  • Date (UTC): 2026-02-11
  • Tier 0: PASS (source/symbol verification for compare three-pane components and behavior spec).
  • Tier 1: PASS (npm run test focused suite: 18 files / 92 tests; npm run build passed with known baseline warnings).
  • Tier 2: PASS (behavioral verification of pane rendering, explain-mode/role propagation, deterministic filtering transitions, and cross-pane state propagation).