fix(designer): Extract useRawInputsOutputs hook to fix portal freeze

[takyyon]

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

Problem

Follow-up to PR #9123. The inline placeholderData fix for infinite recursive nesting worked correctly in the Standalone designer, but caused the portal to freeze completely when opening any action in monitoring view. The browser tab becomes unresponsive and must be force-killed.

Root Cause

The fix in #9123 used an inline object literal for placeholderData:

placeholderData: { inputs: {}, outputs: {} },

In the portal environment, TanStack Query returns placeholderData as data immediately (isLoading=false). Because a new object reference is created each render, this triggers an infinite re-render loop:

1. Component renders → inline { inputs: {}, outputs: {} } creates new object reference
2. TanStack Query returns it as data (since isLoading is false with placeholderData)
3. useEffect fires on data change → dispatches initializeInputsOutputsBinding
4. Redux state updates → component re-renders → back to step 1

This did not surface in Standalone because the Standalone app initializes the query cache differently (fresh mount vs portal's persistent extension host).

Fix

Extract a dedicated useRawInputsOutputs hook, porting the proven pattern from designer-v2:

1. Module-level emptyData constant — const emptyData: RawInputsOutputs = { inputs: {}, outputs: {} } at module scope provides a stable reference. placeholderData: emptyData never creates a new object, breaking the re-render loop.
2. Dedicated hook (useRawInputsOutputs.ts) — encapsulates the query logic in a reusable hook with a typed RawInputsOutputs interface, matching designer-v2's pattern.
3. Simplified MonitoringPanel — monitoringTab.tsx now delegates all data fetching to the hook, reducing its responsibility to layout and dispatch.

Why designer-v2 is unaffected

designer-v2's useRawInputsOutputs hook already uses a module-level empty constant. This fix aligns v1 with that pattern.

Impact of Change

• Users: Fixes portal freeze when opening any action in monitoring/run history view. Combined with fix(designer): Fix infinite recursive nesting in monitoring run history values #9123, this resolves the original infinite scrolling bug and the portal freeze regression.
• Developers: New reusable useRawInputsOutputs hook exported from nodeDetailsPanel/ — can be shared across any panel that needs raw action inputs/outputs.
• System: Eliminates infinite re-render loop in portal extension. No additional API calls.

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in: Portal local dev with pinned v5.953.2 packages

Test details:

• useRawInputsOutputs.spec.ts — 7 new unit tests covering:
  • should use stable query key with actionTrackingId, startTime, and endTime — verifies cache key stability
  • should use a stable placeholderData reference (prevents infinite re-render) — the core regression test — asserts placeholderData is referentially identical across renders
  • should always call getActionLinks even when runData has existing inputs/outputs — verifies no shortcut
  • should not re-feed already-bound BoundParameters as raw inputs (regression) — regression from fix(designer): Fix infinite recursive nesting in monitoring run history values #9123
  • should return empty inputs/outputs when getActionLinks returns nullish values — null safety
  • should handle getActionLinks returning null/undefined entirely — edge case
  • should pass enabled option when provided — API contract
• monitoringTab.spec.tsx — updated to mock useRawInputsOutputs instead of useQuery directly, testing integration points (nodeId passing, loading state, error state)

Contributors

@takyyon

Screenshots/Videos

N/A — behavioral fix (unfreezes browser), no visual changes

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR fixes a portal browser-freeze regression by extracting raw inputs/outputs fetching into a dedicated React Query hook with stable placeholderData, avoiding infinite re-render/dispatch loops.

Changes:

• Added useRawInputsOutputs hook with module-level emptyData placeholder and a stable query key.
• Updated MonitoringPanel to use the new hook instead of an inline React Query call.
• Moved/adjusted unit tests to cover the hook behavior and simplified MonitoringTab tests.

Reviewed changes

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

File	Description
libs/designer/src/lib/ui/panel/nodeDetailsPanel/useRawInputsOutputs.ts	Introduces shared hook for fetching raw action inputs/outputs with stable placeholder data.
libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/monitoringTab.tsx	Replaces inline query logic with the new hook and keeps binding initialization via effect.
libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/test/monitoringTab.spec.tsx	Updates tests to mock the new hook and removes direct React Query/RunService assertions.
libs/designer/src/lib/ui/panel/nodeDetailsPanel/test/useRawInputsOutputs.spec.ts	Adds hook-level tests for query key, placeholder stability, and RunService fetching behavior.

[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): Extract useRawInputsOutputs hook to fix portal freeze
• Issue: None — title is clear, scoped, and follows conventional commit style.
• Recommendation: (Optional) This is good as-is. You could optionally include the affected area (monitoringTab / nodeDetailsPanel) but not required.

---

✅ Commit Type

• Properly selected (fix) and only one option checked.
• Note: This matches the change (bug/regression fix).

---

✅ Risk Level

• Assessment: PR declares Medium and the repo contains the risk:medium label.
• This is consistent with the changes (new hook, refactor of monitoring tab, behavioral fix affecting portal runtime). No mismatch detected.

---

✅ What & Why

• Current: Detailed problem, root cause analysis, and fix description are present in the body (Problem, Root Cause, Fix, alignment with designer-v2).
• Issue: None.
• Recommendation: None — excellent explanation and justification for the change.

---

✅ Impact of Change

• Impact section is present and clear.
• Recommendation: Keep as-is. It correctly identifies Users, Developers, and System impacts.
  • Users: Fixes portal freeze when opening action in monitoring view.
  • Developers: Introduces a reusable hook under nodeDetailsPanel; good to note any exported APIs if intended for cross-package use.
  • System: Behavioral fix; no new API surface beyond internal hook.

---

✅ Test Plan

• Assessment: The PR claims unit tests added/updated and manual testing completed.
• I verified unit tests in the code diff:
  • New unit test: libs/designer/.../useRawInputsOutputs.spec.ts (7 tests)
  • MonitoringTab tests updated to mock/use the new hook
• E2E tests: none added (marked as not applicable). Manual testing rationale is provided.
• Recommendation: Ensure CI runs these new tests (they look comprehensive and cover the core regression). If possible, add a short note in the PR summary listing the CI job that validated the tests (optional).

---

✅ Contributors

• Contributors listed (@takyyon). Good — credit is given.

---

⚠️ Screenshots/Videos

• Assessment: N/A — behavioral fix with no visual changes.
• Recommendation: No screenshots are required.

---

Summary Table

Section	Status	Recommendation
Title	✅	Good — descriptive and conventional commit style.
Commit Type	✅	Correctly marked as fix.
Risk Level	✅	Medium chosen and label present — consistent.
What & Why	✅	Well-documented; clear root cause and fix.
Impact of Change	✅	Clear user/developer/system impact described.
Test Plan	✅	Unit tests present in diff; manual test coverage described.
Contributors	✅	Contributors listed.
Screenshots/Videos	⚠️	N/A — acceptable for behavioral fix.

---

Summary
The PR follows the required PR body template, includes unit tests that address the regression, and the selected risk level matches the repo label. I recommend removing the needs-pr-update label (it remains on the PR) once you are ready for final review/merge, since the PR body appears complete and test coverage is added.

Quick actionable suggestions (optional):

• Remove the needs-pr-update label prior to merge if no further changes are expected.
• Confirm CI passed for the new unit tests (they are present in the diff and should be picked up by your test pipeline).
• If the new hook is intended to be consumed outside the nodeDetailsPanel folder in other packages, explicitly document or export it in the package index (only if intended).

Please update labels / run CI if needed and proceed — this PR passes review for title & body compliance.

---

Last updated: Fri, 01 May 2026 00:49:38 GMT

[github-actions]

📊 Coverage Check

🎉 All changed files have adequate test coverage!