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

[Elaina-Lee]

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

[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 — the title is descriptive, scoped, and follows conventional commit style.
• Recommendation: (Optional) You could add a tiny scope like (monitoringTab) if you want to be even more specific, but it's not required.

---

✅ Commit Type

• Properly selected (fix - Bug fix).
• Only one box is selected, which is correct.

---

✅ Risk Level

• Selected: Medium. The PR also has the risk:medium label — these match.

---

✅ What & Why

• Current: The PR body provides a clear Problem, Root Cause, and Fix sections describing the portal-freeze regression, why it happens (referential instability of inline placeholderData), and the introduced solution (module-level emptyData + new hook).
• Issue: None — the explanation is clear and concise.
• Recommendation: (Optional) If you want future readers to find the original regression faster, link PR fix(designer): Fix infinite recursive nesting in monitoring run history values #9123 inline where referenced (you already referenced it by number which is fine).

---

✅ Impact of Change

• The Impact section clearly calls out Users, Developers, and System impact.
• Recommendation: Good as-is.
  • Users: Fixes portal freeze when opening actions in monitoring view.
  • Developers: Adds a reusable hook for sharing raw inputs/outputs across panels.
  • System: Eliminates infinite re-render loop; no extra API calls.

---

✅ Test Plan

• The Test Plan is accurate and the code diff includes new unit tests (useRawInputsOutputs.spec.ts and updated monitoringTab.spec.ts) as claimed.
• E2E tests are not included; the PR explains manual testing in portal dev — acceptable for this behavioral fix.

---

✅ Contributors

• Contributors listed (@takyyon). Good to credit contributors.

---

⚠️ Screenshots/Videos

• Marked N/A — appropriate for a non-visual behavioral fix. (No action required.)

---

Summary Table

Section	Status	Recommendation
Title	✅	No change needed
Commit Type	✅	No change needed
Risk Level	✅	No change needed (matches risk:medium label)
What & Why	✅	No change needed
Impact of Change	✅	No change needed
Test Plan	✅	Unit tests present; manual testing explained
Contributors	✅	No change needed
Screenshots/Videos	⚠️	N/A is fine for this behavioral fix

---

Final message: This PR's title and body meet the repository's PR template and quality expectations. The assigned risk (Medium) matches the changes in the diff; my advised risk level is also risk:medium. The unit tests referenced are present in the diff. You can proceed with merge once CI passes and maintainers approve.

If you want to make any tiny improvements (purely optional):

• Consider optionally adding an inline link to PR fix(designer): Fix infinite recursive nesting in monitoring run history values #9123 where you reference it for easier navigation.
• If the new hook is intended to be shared across other modules, consider noting (in the PR body) whether it will be exported from an index or kept internal in a follow-up.

Thank you for the clear description and tests — nice work unblocking the portal freeze!

---

Last updated: Fri, 01 May 2026 00:54:01 GMT

[github-actions]

📊 Coverage Check

🎉 All changed files have adequate test coverage!