feat(designer): add node navigation and retain details tabs

[Riley Evans (rllyy97)]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

Add Ctrl/Cmd+Down and Ctrl/Cmd+Up node selection in both designer versions using the existing positive React Flow nodeIndex order, without wrapping at endpoints. Scope IDs are normalized, and the existing keyboard rendering fallback supports offscreen nodes.

Retain the active operation-details tab across selection, with a first-available fallback and remembered preference. Key panel content by node to isolate editor drafts.

The original focus-order and native-scroll fixes are published in 0c4ba300a and bcc7454ee, with regressions in 6b7627539. All three original review threads were answered and resolved.

Latest user-reported correction: f0ce80682. A normal card click focuses the details panel Close button, so canvas-only shortcuts were incorrectly ignored. Navigation now also accepts non-editing controls in the selected node's details panel, restricted to the same designer instance. Tests now start with ordinary mouse clicks and press shortcuts without programmatic focus; the earlier card-focus tests did not cover that user flow.

Impact of Change

• Users: Ctrl/Cmd+Up/Down works immediately after clicking a card, from selected-panel tabs, and from the canvas. Selection retains the details tab and brings the focused card into view. Read-only and monitoring navigation remain supported.
• Developers: Shared ordering helper and regression coverage for both designers, focus/mount ordering, offscreen navigation, panel scope, tab fallback, and editor-state isolation.
• System: Limited selection/focus/panel changes; no new dependencies, credential, authentication, or schema changes. Panel navigation excludes editing fields, unrelated/pinned nodes, other designer instances, and nested dialogs/menus. Preview hosting changes were implemented separately in fix(standalone): unblock named preview deployments #9622, fix(standalone): block default preview sign-in providers #9623, and fix(standalone): report only actual preview deployments #9624 and incorporated through main.

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in: Local production standalone / and /v2, Chromium, Ctrl and Cmd/Meta; initial bug reproduced on the deployed preview.

Latest correction (f0ce80682):

• 124 navigation unit tests passed: 61 legacy and 63 v2, including selected-panel Close/tab navigation, pinned/unrelated panel and other-designer exclusion, nested-dialog exclusion, and input/select/textarea/contenteditable protections.
• 16/16 production-browser tests passed, zero retries. Four new cases use a normal card click, verify default Close-button focus, press Ctrl/Meta arrows without .focus(), and verify target selection, actual DOM focus, and visibility. They also cover Settings-tab navigation, title-input protection, and reverse navigation after clicking a different card.
• Existing nested-scope, genuine offscreen wrapper/header unmount-to-mount, stop-at-end, native-scroll-zero, typing, and tab-fallback checks remain green.
• Production build passed 9/9 tasks, including declarations. Biome, ESLint, extraction, and commit hooks passed. The CI preview build also passed: 35029975155.
• Earlier feature verification passed 331 tests across 18 suites, including six formerly failing cases, real PanelHeader/mount-order tests, preventScroll, and panel-state isolation. That historical count is not represented as a fresh whole-suite run for the latest correction.
• Fresh remote checks and preview deployment are being monitored. The preceding revision had a failing PR Coverage Check; this description makes no all-green, coverage-pass, or merge-ready claim.

Contributors

Riley Evans (@rllyy97) with GitHub Copilot.

Screenshots/Videos

Real captures from the earlier rebuilt local focus-order correction, published as 0c4ba300a. They show retained Settings, not proof of the later mouse-click regression or complete current-head CI.

Settings retained while switching between a scope and an action

Switch selected with Settings active:

HTTP selected using Ctrl+Up, with Settings still active:

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: feat(designer): add node navigation and retain details tabs
• Issue: None — valid feat(scope): prefix and descriptive.
• Recommendation: No change needed.

---

✅ Commit Type

• Exactly one type selected (feat).
• Minor note: the checkbox label reads feature instead of the template's feat, but the intent is clear and correct.

---

✅ Risk Level

• Exactly one box selected (Medium), label risk:medium present, and both match the advised estimate. State-management changes to panelSlice, designer/designer-v2 UI, and shared navigation helpers are shipped-product changes with moderate user impact — Medium is correct.

---

✅ What & Why

• Current: Clear explanation of Ctrl/Cmd+Up/Down node navigation, tab retention, focus/scroll fixes, and the reported card-click regression correction.
• Issue: None.
• Recommendation: No change needed.

---

✅ Impact of Change

• Users, Developers, and System are all populated.
• Recommendation:
  • Users: Documented (keyboard nav, tab retention, read-only/monitoring).
  • Developers: Documented (shared ordering helper, regression coverage).
  • System: Documented (no new deps/credentials/schema).

---

✅ Test Plan

• Unit tests AND E2E tests both added/updated and confirmed in the diff (panelSlice/tabRetention, workflowSelectors.focus, NodeNavigation suites, panelheader/card focus specs, and e2e/ephemeral/preview.spec.ts). Manual testing also described.

---

✅ Contributors

• Credited: Riley Evans (@rllyy97) with GitHub Copilot.

---

⚠️ Screenshots/Videos

• UI-adjacent files are touched, and screenshots are provided. Note: the captures are from an earlier revision (0c4ba300a) and don't show the latest mouse-click regression fix — consider adding a fresh capture, but this does not block.

---

Summary Table

Section	Status	Recommendation
Title	✅	None
Commit Type	✅	Label says feature; template uses feat (cosmetic)
Risk Level	✅	Medium is correct
What & Why	✅	None
Impact of Change	✅	None
Test Plan	✅	Unit + E2E present
Contributors	✅	None
Screenshots/Videos	⚠️	Optionally add a current-head capture

---

All required checks pass. This PR is compliant and cleared to merge from a title/body/risk perspective.

---

Powered by: Copilot CLI (claude-opus-4.8) | Last updated: Tue, 15 Sep 2026 22:21:42 GMT

[github-actions]

Standalone preview

Ready for local-workflow testing.

Current PR revision: f0ce80682c8ed1fb7ca8a55ec1fab2f9fa7ffa97.

Open local-only preview

Deployed revision: f0ce80682c8ed1fb7ca8a55ec1fab2f9fa7ffa97.

Local workflows only. Azure sign-in, live Azure resources, and the development-only template proxy are not available. This preview runs PR code; do not enter credentials or sensitive workflow data.

[Copilot]

🟡 Changes recommended

Browser checks currently fail because panel focus overrides card focus, stopping traversal, while the offscreen test setup also fails its precondition.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds keyboard-based node traversal and preserves operation-details tab selection across both designer versions.

Changes:

• Adds Ctrl/Cmd+Up/Down node navigation using React Flow ordering.
• Preserves preferred details tabs and remounts node-specific panel content.
• Adds shared unit tests, integration tests, E2E coverage, and documentation.

File summaries

File	Description
libs/logic-apps-shared/src/utils/src/lib/helpers/nodeNavigation.ts	Implements adjacent-node lookup.
libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts	Exports the navigation helper.
libs/logic-apps-shared/src/utils/src/lib/helpers/__test__/nodeNavigation.spec.ts	Tests navigation ordering and filtering.
libs/designer/src/lib/ui/NodeNavigation.tsx	Adds v1 navigation hotkeys.
libs/designer/src/lib/ui/DesignerReactFlow.tsx	Mounts navigation and enables offscreen rendering.
libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx	Supports tagged scope focus IDs.
libs/designer/src/lib/ui/__test__/nodeNavigationTestSuite.tsx	Provides shared navigation tests.
libs/designer/src/lib/ui/__test__/NodeNavigation.spec.tsx	Runs the suite against v1.
libs/designer/src/lib/ui/__test__/keyboardNavigation.spec.tsx	Updates keyboard-navigation test context.
libs/designer/src/lib/ui/__test__/DesignerReactFlow.spec.tsx	Tests navigation mounting and rendering fallback.
libs/designer/src/lib/core/state/workflow/workflowSelectors.ts	Recognizes normalized and canvas node IDs.
libs/designer/src/lib/core/state/panel/panelSlice.ts	Retains the selected details tab.
libs/designer-v2/src/lib/ui/NodeNavigation.tsx	Adds v2 navigation hotkeys.
libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx	Mounts v2 navigation and rendering fallback.
libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx	Supports tagged v2 scope focus IDs.
libs/designer-v2/src/lib/ui/__test__/NodeNavigation.spec.tsx	Runs the shared suite against v2.
libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx	Tests v2 navigation integration.
libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts	Recognizes both scope ID forms.
libs/designer-v2/src/lib/core/state/panel/panelSlice.ts	Retains tabs across v2 selection changes.
libs/designer-ui/src/lib/panel/panelcontent.tsx	Adds tab fallback and node-keyed content.
e2e/ephemeral/preview.spec.ts	Exercises navigation in browser previews.
apps/Standalone/README.md	Documents shortcuts and tab retention.

Review details

• Files reviewed: 22/22 changed files
• Comments generated: 3
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

📊 Coverage Check

The following changed files need attention:

❌ libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx - 0% covered

⚠️ libs/designer-v2/src/lib/core/state/panel/panelSlice.ts - 61% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts - 28% covered (needs improvement)
⚠️ libs/designer/src/lib/core/state/panel/panelSlice.ts - 58% covered (needs improvement)
⚠️ libs/designer/src/lib/core/state/workflow/workflowSelectors.ts - 28% covered (needs improvement)
⚠️ libs/designer-ui/src/lib/panel/panelcontent.tsx - 75% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx - 51% covered (needs improvement)
⚠️ libs/designer/src/lib/ui/DesignerReactFlow.tsx - 57% covered (needs improvement)

Please add tests for the uncovered files before merging.