fix(designer): correct pinned dual-pane close/unpin behavior and add v2 pinned-action border

[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

Fixes #9304. In the Standard "new view" dual-pane operation panel, a user can pin an action to keep it visible while inspecting another action. This PR fixes several issues with the pinned experience and adds a visual indicator for pinned actions in designer-v2.

1. Closing one pane closed both actions (the reported bug).
Root cause: in PanelContainer.renderHeader, both panes' close (x) buttons were wired to the same onClose handler, which dispatched collapsePanel() and collapsed the entire drawer.
Fix: route each pane's close button independently. The pinned pane's x now unpins only (onUnpinAction); the selected pane's x uses onClose. Added an isDualView flag and a pinned-only render path so a lone pinned action renders at the normal single-pane width (no leading divider / dual-view class). In nodeDetailsPanel.tsx (designer + designer-v2), the selected-pane onClose now dispatches clearPanel() (which preserves the pinned alternate node) when a pinned action exists, otherwise keeps the existing collapse() behavior. unpinAction now passes updatePanelOpenState: true so closing the pinned pane collapses the drawer only when no selected action remains.

2. Closing a pinned action left it logically pinned.
When the pinned action was also the selected node (single pane), closing it with x collapsed the panel but never cleared the pinned alternate node, so re-opening the action's context menu still showed "Unpin". Fix: in the collapse branch of nodeDetailsPanel.tsx (designer + designer-v2), when the pinned alternate node is the selected node, dispatch setAlternateSelectedNode({ nodeId: '' }) before collapsing, so the action is actually unpinned.

3. Pinned actions had no visual indicator in designer-v2.
designer-v1 already draws an orange border around a pinned action; designer-v2 did not. Added an orange pinned border to the v2 cards (ActionCard and SubgraphCard) via a new isPinned prop wired from useIsNodePinnedToOperationPanel. Selected (blue) still takes precedence over pinned (orange), matching v1. designer-v1 is unchanged.

Resulting behavior:

• x on the non-pinned action -> closes only that action; the pinned action stays open and stays pinned. Selecting another action re-opens the side-by-side view.
• x on the pinned action -> closes only the pinned action and unpins it; the selected action stays open (panel collapses only if it was the last one).
• Pinned actions in designer-v2 now show an orange selection border.

Impact of Change

• Users: Closing one action in the dual-pane (pinned) view no longer dismisses the other action; closing a pinned action correctly unpins it; pinned actions are visually highlighted in designer-v2. The reported bug is resolved.
• Developers: PanelContainer can now render a single pinned action without a selected node; close-button routing is per-pane; v2 cards accept an isPinned prop. No public API changes.
• System: No architectural, performance, or dependency changes. The non-pinned single-action path is unchanged (still collapses on close). designer-v1 card rendering is unchanged. The 'selected'-persistence alternate (agent-condition subgraph) and customContent (multi-select) paths are unaffected.

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in: Vitest unit suites
  • New panelSlice.pinned.spec.ts in designer and designer-v2 (8 tests each): clearPanel() keeps a pinned alternate and stays open, collapses when no pin, and clears the pin under clearPinnedState; setAlternateSelectedNode({ nodeId: '', updatePanelOpenState: true }) stays open when a selected node remains and collapses otherwise; closing a pinned action that is the selected node clears the pin.
  • Extended panelcontainer.spec.tsx (designer-ui, 6 tests): dual-view width + dual class, pinned-only render at single-pane width (no dual class), and null render when nothing to show.
  • Biome clean on all changed files.

Contributors

Screenshots/Videos

[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: fix(designer): correct pinned dual-pane close/unpin behavior and add v2 pinned-action border
• Issue: None. The title is specific, scoped, and clearly describes the user-facing behavior change.
• Recommendation: No change needed.

---

✅ Commit Type

• Properly selected (fix).
• Only one commit type is selected, which is correct.

---

✅ Risk Level

• The selected risk level is Low, and that matches the scope of the diff. I did not see a need to raise this risk level.

---

✅ What & Why

• Current: Present and detailed.
• Issue: None. This clearly explains the bug, the fix, and the resulting behavior.
• Recommendation: No change needed.

---

✅ Impact of Change

• Well-covered and appropriately scoped.
• Recommendation:
  • Users: Good as written.
  • Developers: Good as written.
  • System: Good as written.

---

✅ Test Plan

• Passes. Unit tests were added/updated in the diff, which satisfies the test plan requirement.
• No E2E tests are required because unit coverage is present.

---

✅ Contributors

• Blank, but this is optional and does not fail the PR.
• Recommendation: Add contributor credit if others helped with design, implementation, or review.

---

✅ Screenshots/Videos

• Blank, which is acceptable here. The PR includes a UI indicator change, so screenshots would be helpful but are not required for this review.
• Recommendation: Consider adding before/after screenshots for the pinned border change if available.

---

Summary Table

Section	Status	Recommendation
Title	✅	No change needed
Commit Type	✅	No change needed
Risk Level	✅	No change needed
What & Why	✅	No change needed
Impact of Change	✅	No change needed
Test Plan	✅	Unit tests present; no E2E required
Contributors	✅	Optional to add credit if applicable
Screenshots/Videos	✅	Optional, but helpful for UI changes

---

Overall, this PR passes review. The advised risk level remains risk:low, which matches the submitter’s label.

---

Last updated: Wed, 01 Jul 2026 21:57:06 GMT

[github-actions]

📊 Coverage Check

The following changed files need attention:

❌ libs/designer-v2/src/lib/ui/CustomNodes/components/card/subgraphCard.tsx - 0% covered
❌ libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx - 0% covered
❌ libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx - 0% covered

⚠️ libs/designer-ui/src/lib/panel/panelcontainer.tsx - 73% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/ui/CustomNodes/SubgraphCardNode.tsx - 75% covered (needs improvement)

Please add tests for the uncovered files before merging.

[Copilot]

Pull request overview

Fixes a UX bug in the Standard “new view” dual-pane (pinned) operation details panel so that the close (x) button only closes the pane it belongs to, rather than collapsing the entire drawer and dismissing the pinned pane.

Changes:

• Updated PanelContainer to better distinguish dual-pane vs pinned-only rendering, and to route close handling per-pane (selected vs pinned).
• Updated NodeDetailsPanel (designer + designer-v2) close behavior to preserve a pinned alternate action when closing the selected action.
• Added/extended unit tests covering pinned close behavior in the panel slice and the panel container rendering rules.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx	Adjusts close behavior to keep pinned pane open when closing the selected pane (and updates unpin to update open state).
libs/designer/src/lib/core/state/panel/test/panelSlice.pinned.spec.ts	Adds reducer tests for pinned/selected close behavior combinations.
libs/designer-v2/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx	Mirrors the designer close/unpin behavior changes in designer-v2.
libs/designer-v2/src/lib/core/state/panel/test/panelSlice.pinned.spec.ts	Adds the same pinned/selected reducer tests for designer-v2.
libs/designer-ui/src/lib/panel/panelcontainer.tsx	Adds dual-view detection, pinned-only render support, and per-pane close routing in the shared UI container.
libs/designer-ui/src/lib/panel/test/panelcontainer.spec.tsx	Adds tests for dual-view width/classing and pinned-only single-pane rendering behavior.