openrig/TEST_READY.md

TEST READY: OpenRig UI Redesign (PR 2417) E2E Test Suite

Executive Summary

The comprehensive, opaque-box End-to-End (E2E) Test Suite for the OpenRig UI Redesign (PR 2417) is fully implemented, verified, and ready.

The test suite validates all 12 inventoried features across desktop and mobile form factors adhering strictly to the Dual Track Principles defined in PROJECT.md:

• Opaque-Box Requirement-Driven: Tests assert user-observable DOM structure, ARIA accessibility contracts, routing, and behavior without depending on private component internals.
• Progressive Testability: All tests execute cleanly against the current codebase without dependencies on future or unmerged milestones.
• Four-Tier Architecture: Spans primary feature coverage (Tier 1), boundary & corner conditions (Tier 2), cross-feature pairwise combinations (Tier 3), and operator workflow scenarios (Tier 4).

---

Runner Execution Commands

Primary UI Workspace Test Runner

Executes all 232 test files (2,012+ unit, integration, and E2E tests):

npm.cmd run test -w packages/ui

Dedicated E2E Test Suite Runner

Runs only the newly created E2E test suite (12 test files, 71 tests):

npx.cmd vitest run test/e2e/ -c packages/ui/vitest.config.ts

Targeted Tier Runners

• Tier 1 (Feature Coverage):

  npx.cmd vitest run test/e2e/tier1-features/ -c packages/ui/vitest.config.ts
  

• Tier 2 (Boundary & Corner Cases):

  npx.cmd vitest run test/e2e/tier2-boundaries/ -c packages/ui/vitest.config.ts
  

• Tier 3 (Cross-Feature Combinations):

  npx.cmd vitest run test/e2e/tier3-combinations/ -c packages/ui/vitest.config.ts
  

• Tier 4 (Real-World Workflows):

  npx.cmd vitest run test/e2e/tier4-scenarios/ -c packages/ui/vitest.config.ts
  

---

Test Inventory & Coverage Matrix

Tier	Test Suite File	Feature Covered	Tests	Pass Rate	Key Verification Areas
Tier 1	test/e2e/tier1-features/sidebar-features.test.tsx	Labeled Sidebar	6	100%	Labeled sections, active indicator ARIA, collapse/expand toggle, localStorage persistence, live rig status dots, palette event trigger.
Tier 1	test/e2e/tier1-features/clean-theme-tokens.test.tsx	Clean Theme Tokens	5	100%	Status vocabulary tone mapping, StatusDot pulse animations, StatusBadge labels, theme persistence, CSS token validity.
Tier 1	test/e2e/tier1-features/command-palette-features.test.tsx	Command Palette (⌘K)	6	100%	⌘K modal open, route search filtering, Enter navigation, Escape dismiss, g d / g i shortcuts, input focus protection.
Tier 1	test/e2e/tier1-features/mobile-navigation-features.test.tsx	Mobile Navigation	5	100%	Responsive <1024px breakpoint, bottom nav tabs, inbox badge counter, slide-over drawer opening, backdrop dismiss.
Tier 1	test/e2e/tier1-features/dashboard-v2-features.test.tsx	Dashboard v2	6	100%	PageHeader actions, 4 KPI metric tiles, Needs You queue with 1-click verbs, Rigs table, empty fleet states, GettingStarted checklist dismissal.
Tier 1	test/e2e/tier1-features/agent-properties-features.test.tsx	Agent Properties Panel	6	100%	Metadata inspector fields, context usage bar clamping, copy session feedback, copy attach command, remote host guard, error banner.
Tier 1	test/e2e/tier1-features/toasts-notifications-features.test.tsx	Toasts & Notifications	6	100%	notifySuccess, notifyError with Error/string parsing, snapshot mutation toast, rig teardown toast, UndoToast cancellation and expiration.
Tier 1	test/e2e/tier1-features/breadcrumbs-header-features.test.tsx	Breadcrumbs & Header	5	100%	TopBar header rendering, ancestor link navigation, 4-segment deep route crumb hierarchy, percent-decoding, host indicator & theme selector integration.
Tier 1	test/e2e/tier1-features/page-restyling-primitives-features.test.tsx	Page Restyling & Primitives	7	100%	Button variants (default, tactical, outline, ghost), Badge variants, EmptyState action affordance, MetricTile, Kbd monospace styling, Separator orientations, PageHeader layout.
Tier 2	test/e2e/tier2-boundaries/boundary-corner-cases.test.tsx	Boundary & Corner Cases	11	100%	Ultra-compact 320px viewport, 4K 3840px resolution, dynamic breakpoint resizing, regex characters in search, 1200+ char strings, Unicode/emoji inputs, 1000ms sequence expiration, rapid key spamming, null metadata in agent panel, corrupted localStorage JSON, invalid mode fallback.
Tier 3	test/e2e/tier3-combinations/cross-feature-pairwise.test.tsx	Cross-Feature Combinations	5	100%	Cmd-K navigation + Sidebar active highlight synchronization, theme switch + mobile drawer stability, toast notifications + mobile bottom nav co-existence, deep route breadcrumbs + sidebar highlight, sidebar collapse toggle + open palette persistence.
Tier 4	test/e2e/tier4-scenarios/real-world-workflows.test.tsx	Real-World Workflows	3	100%	End-to-end operator journey (Dashboard \to Fleet \to Rig Details \to Agent inspection), multi-rig fleet aggregation (healthy, degraded, stopped), daemon health disruption & recovery.
TOTAL	12 Files	All 12 Features	71	100%	Full 4-tier coverage achieved with zero test failures.

---

Escalations & Identified Implementation Quirks

During the authoring and verification of this test suite, several implementation quirks and opportunities for downstream hardening were identified:

1. Radix DialogDescription Warning: Mounting Command.Dialog in CommandPalette.tsx logs Warning: Missing Description or aria-describedby={undefined} for {DialogContent}. Recommend adding <DialogDescription className="sr-only">Search navigation and actions</DialogDescription>.
2. SPA Routing in Primitives: EmptyState.tsx renders a raw <a href="..."> rather than @tanstack/react-router <Link>. While functional in testing environments, replacing with <Link> ensures seamless single-page navigation without full page reloads.
3. Mobile Layout Clearance: On mobile screens (<1024px), MobileBottomNav occupies fixed bottom-0 (56\text{px}). Ensure UndoToast and VellumSheet drawer actions maintain sufficient bottom clearance (pb-16 / bottom-20) so controls remain unobstructed.