perf(app): unmount closed right panel body by Astro-Han · Pull Request #619 · Astro-Han/pawwork

Astro-Han · 2026-05-14T09:20:16Z

Summary

Unmount the right panel tab body while the desktop right panel is closed, while keeping the outer panel shell available for width state and open/close transitions.

Also clear the Review scroll element ref on unmount so the review scroll controller does not retain a stale DOM node after the panel body is removed.

Why

Closes #602.

The old right panel architecture kept the tab body mounted even when the panel was visually closed. That meant hidden tabs, tab lists, and active tab content could still exist in the DOM and keep lifecycle work alive. This PR draws the first lifecycle boundary: closed right panel means no mounted panel body.

Related Issue

Closes #602

Human Review Status

Pending. A human should make the final merge decision after reviewing the final diff and verification evidence.

Review Focus

Please focus on the mount boundary in SessionSidePanel and the Review scroll ref cleanup. This PR intentionally does not change the scroll state machine, timeline virtualization, active-tab lazy mounting, or broader right-panel structure.

Risk Notes

Low. The visual shell and width persistence stay in place, but closed-panel content now remounts when the panel opens. Review scroll refs are cleared on unmount to avoid stale DOM references.

How To Verify

Typecheck: bun run typecheck -> passed
Focused unit tests: bun --cwd packages/app test src/pages/session/review-tab.test.tsx src/pages/session/session-side-panel.test.tsx -> 1066 passed, 0 failed
Focused E2E: bun --cwd packages/app playwright test e2e/session/right-panel-width.spec.ts --project=chromium --reporter=line -> 3 passed
Diff check: git diff --check -> no whitespace errors
Electron manual check: bun run dev:desktop -> opened and closed the right panel; open shows status panel, closed state removes right-panel content from the accessibility tree

Screenshots or Recordings

No screenshot attached because this PR has no intended visual delta. The behavior was checked in Electron: opening the right panel still shows the status panel, and closing it removes the panel body from the rendered/accessibility tree.

Checklist

Summary by CodeRabbit

Bug Fixes
- Fixed scroll reference handling to properly clear when review panel components unmount, preventing stale references.
Performance Improvements
- Right panel content now conditionally mounts and unmounts based on open/closed state, reducing memory usage when the panel is not in use.
Tests
- Added comprehensive test coverage for right panel toggle behavior and scroll reference lifecycle management.

github-actions

Suggested priority: P2 (includes user-path files (packages/app/src/pages/session/review-panel-scroll.ts, packages/app/src/pages/session/review-panel-view.tsx, packages/app/src/pages/session/review-tab.test.tsx, packages/app/src/pages/session/review-tab.tsx, packages/app/src/pages/session/session-side-panel.tsx)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

coderabbitai · 2026-05-14T09:20:34Z

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 25 minutes and 54 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 2cc0c2dc-f291-46c4-a1af-291fec868f61

📥 Commits

Reviewing files that changed from the base of the PR and between 56f7d72 and 701e71c.

📒 Files selected for processing (2)

packages/app/e2e/session/right-panel-width.spec.ts
packages/app/src/pages/session/session-side-panel.tsx

📝 Walkthrough

Walkthrough

The right-panel body is now conditionally mounted only when open, and ref cleanup is coordinated through the component hierarchy by allowing undefined in ref callbacks and notifying listeners when components unmount.

Changes

Right Panel Ref Lifecycle and Conditional Mounting

Layer / File(s)	Summary
Panel conditional mounting and component cleanup `packages/app/src/pages/session/session-side-panel.tsx`, `packages/app/src/pages/session/review-tab.tsx`	The right-panel body wraps in a `<Show when={open()}>` to mount/unmount when panel state changes. `SessionReviewTab` implements cleanup that calls `props.onScrollRef?.(undefined)` to notify consumers when the scroll ref is torn down.
Ref callback type propagation `packages/app/src/pages/session/review-panel-view.tsx`, `packages/app/src/pages/session/review-panel-scroll.ts`	The `onScrollRef` callback contract and `setReviewScroll` setter are updated to accept `HTMLDivElement
Test coverage for mounting and cleanup `packages/app/e2e/session/right-panel-width.spec.ts`, `packages/app/src/pages/session/review-tab.test.tsx`	E2e test asserts that the tablist DOM element is removed when the panel closes and restored on reopen; unit test verifies that `SessionReviewTab` invokes the `onScrollRef` callback with `undefined` during cleanup.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Astro-Han/pawwork#289: Modifies the same right-panel-width.spec.ts to validate right utility panel toggle behavior with aria-hidden and DOM visibility assertions.

Suggested labels

enhancement, P2, app, ui

Poem

🐰 A rabbit's tale of cleanup and care,
When panels close, let refs beware—
Undefined whispers "time to go,"
As Show-when-open steals the show!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: unmounting the closed right panel body for performance. It is concise and directly related to the primary changeset objective.
Description check	✅ Passed	The PR description follows the template structure with all major sections completed: Summary, Why, Related Issue, Human Review Status, Review Focus, Risk Notes, How To Verify, Screenshots, and Checklist all filled out appropriately.
Linked Issues check	✅ Passed	The changes align with the scope of issue `#602`: incrementally rewriting the right panel (specifically in-scope Session review surface), with unmounting behavior supporting the modular rollout objective without touching out-of-scope areas.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the mount/unmount boundary in SessionSidePanel and Review scroll ref cleanup per `#602`. No refactors, dependencies, generated files, or unrelated changes are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch codex/i602-side-panel-mount

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-14T09:24:20Z

Perf delta summary

Comparator: pass

Profile / Scenario	interaction median	interaction worst	long task max	tbt	frame gap p95	frame gap max	jank count	cls	status
default / homepage-cold	32 -> 24 (-8)	40 -> 48 (+8)	62 -> 61 (-1)	12 -> 11 (-1)	16.8 -> 16.8 (0)	166.7 -> 166.6 (-0.1)	3 -> 3 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 48 (+8)	48 -> 64 (+16)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	33.4 -> 16.8 (-16.6)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-call-expand	24 -> 16 (-8)	24 -> 24 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.7 (-0.1)	16.8 -> 16.7 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / terminal-side-panel-open	48 -> 40 (-8)	48 -> 40 (-8)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-scroll-reading	32 -> 24 (-8)	32 -> 32 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 16.8 (0)	0 -> 0 (0)	0.505 -> 0.505 (0)	warn: cls
low-end / session-timeline-recompute	112 -> 120 (+8)	144 -> 128 (-16)	100 -> 102 (+2)	160 -> 155 (-5)	83.3 -> 100 (+16.7)	166.6 -> 166.6 (0)	3 -> 3 (0)	0.081 -> 0.081 (0)	pass

gemini-code-assist

Code Review

This pull request implements the unmounting of the right panel's tab body when closed to improve performance. Key changes include updating scroll reference types to handle undefined, adding cleanup logic to clear scroll references on unmount, and wrapping the panel body in a conditional Show component. New E2E and unit tests were added to verify these changes. Feedback was provided regarding a potential visual regression where the panel content disappears instantly during the closing transition, suggesting a transition-aware unmounting strategy to maintain UI consistency.

perf(app): unmount closed right panel body

56f7d72

github-actions Bot added app Application behavior and product flows ui Design system and user interface labels May 14, 2026

github-actions Bot reviewed May 14, 2026

View reviewed changes

Astro-Han added enhancement New feature or request P2 Medium priority tech-debt Supplemental cleanup, maintainability, architecture, test, or quality debt context labels May 14, 2026 — with ChatGPT Codex Connector

gemini-code-assist Bot reviewed May 14, 2026

View reviewed changes

Comment thread packages/app/src/pages/session/session-side-panel.tsx Outdated

fix(app): keep right panel body through close transition

701e71c

Astro-Han merged commit 864780a into dev May 14, 2026
24 checks passed

Astro-Han deleted the codex/i602-side-panel-mount branch May 14, 2026 10:39

Astro-Han mentioned this pull request May 23, 2026

[Task] UI rewrite v2 Area B: right panel modular rollout #602

Open

coderabbitai Bot mentioned this pull request Jun 8, 2026

feat(app): embedded browser tab (WebContentsView) #1204

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(app): unmount closed right panel body#619

perf(app): unmount closed right panel body#619
Astro-Han merged 2 commits into
devfrom
codex/i602-side-panel-mount

Astro-Han commented May 14, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot left a comment

Uh oh!

coderabbitai Bot commented May 14, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented May 14, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 14, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

Human Review Status

Review Focus

Risk Notes

How To Verify

Screenshots or Recordings

Checklist

Summary by CodeRabbit

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf delta summary

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 14, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 14, 2026 •

edited

Loading

github-actions Bot commented May 14, 2026 •

edited

Loading