refactor(app): extract RightPanelTabStrip and RightPanelReviewBody from SessionSidePanel by Astro-Han · Pull Request #890 · Astro-Han/pawwork

Astro-Han · 2026-05-24T19:56:26Z

Summary

Extracts the portalled tab strip and nested review body into focused subcomponents (RightPanelTabStrip, RightPanelReviewBody)
Moves 5 exported helpers to helpers.ts, re-exported from session-side-panel.tsx for backwards compatibility
SessionSidePanel shrinks from 583 to 339 lines
Fixes pr-triage failure: removes auto-assigned task rule from .github/labeler.yml (type labels are human judgment; no other type label has an auto-assignment rule)

Verification

bun test — 12 pass, 0 fail (including all gating-contract tests)
bun run typecheck — clean
bun run lint — clean
bun run snap right-panel-titlebar — pass
bun run snap right-panel-tabs-hover — pass (all tab positions, hover states, light/dark themes unchanged)

Changed files

.github/labeler.yml — removed auto-assigned task rule (−5 lines)
packages/app/src/pages/session/helpers.ts — added 5 helpers (+32 lines)
packages/app/src/pages/session/session-side-panel.tsx — thin shell (583 → 339 lines)
packages/app/src/pages/session/right-panel-tab-strip.tsx — new (136 lines)
packages/app/src/pages/session/right-panel-review-body.tsx — new (178 lines)

Closes #889

Summary by CodeRabbit

Refactor
- Reorganized right panel UI architecture for improved code structure and maintainability.
- Extracted tab management, tab strip rendering, and review panel functionality into dedicated reusable components.
- Streamlined session side panel component by delegating specialized rendering and interaction tasks to focused subcomponents.
- Enhanced component separation and organization patterns across the right panel interface system.

coderabbitai · 2026-05-24T19:56:32Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ddd9b691-4559-4337-9d32-4cb4fa04a2fa

📥 Commits

Reviewing files that changed from the base of the PR and between 8647fb5 and 412e132.

📒 Files selected for processing (5)

.github/labeler.yml
packages/app/src/pages/session/helpers.ts
packages/app/src/pages/session/right-panel-review-body.tsx
packages/app/src/pages/session/right-panel-tab-strip.tsx
packages/app/src/pages/session/session-side-panel.tsx

💤 Files with no reviewable changes (1)

.github/labeler.yml

📝 Walkthrough

Walkthrough

This PR extracts the right-panel UI from SessionSidePanel into focused subcomponents and helpers, addressing the structural bloat identified in issue #889. New helper functions and two new components (RightPanelTabStrip, RightPanelReviewBody) encapsulate tab-strip and review-body logic; the main component is refactored to a thin shell. The CI labeler rule is also expanded to cover all .github/* files.

Changes

Right-Panel Component Extraction

Layer / File(s)	Summary
Session Helper Functions & Types `packages/app/src/pages/session/helpers.ts`	Adds `RightPanelTab` type import and exports five new helpers: `formatRightPanelWidth` converts open state + width to CSS string; `makeRightPanelResizeHandler` builds a resize callback marking user interaction before delegating to layout state; `shouldShowReviewFileOpenButton` determines file-open button visibility; `sortableShellTabIds` filters out the pinned `"status"` tab; `openReviewShellTab` activates the review tab via a side-panel API.
Right Panel Tab Strip Component `packages/app/src/pages/session/right-panel-tab-strip.tsx`	New `RightPanelTabStrip` component renders a portalled sortable tab list into a titlebar mount, with `RightPanelShellIcon` selecting the appropriate icon variant (active/inactive, including special handling for review and terminal). Includes a right-aligned "+" dropdown for file picker and "closable missing tabs" actions.
Right Panel Review Body Component `packages/app/src/pages/session/right-panel-review-body.tsx`	New `RightPanelReviewBody` component renders the review panel's tabbed UI: drag-drop reordering of opened file tabs via local draggable state and drag lifecycle handlers; conditional rendering for review/empty/file-tab content panes; conditional "open file" button with tooltip and keybinding; drag overlay for visual preview.
SessionSidePanel Refactoring & Integration `packages/app/src/pages/session/session-side-panel.tsx`	Refactored to delegate tab-strip rendering to `RightPanelTabStrip` and review-body rendering to `RightPanelReviewBody`; removed local `activeDraggable` state and per-tab DnD lifecycle; simplified imports (removed UI/DnD boilerplate); shell-tab reordering now via `handleShellDragOver` calling `view().sidePanel.moveTab`; re-exports helper functions from `session/helpers`.

CI Labeler Configuration

Layer / File(s)	Summary
CI Label Rule Expansion `.github/labeler.yml`	Replaced the `task` label rule (matching only `.github/workflows/`) with an expanded `ci` label rule matching both `.github/workflows/` and all `.github/**` files.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

[Task] UI rewrite v2 Area B: right panel modular rollout #602: Directly implements the "right panel modular rollout" by extracting RightPanelTabStrip and RightPanelReviewBody subcomponents from SessionSidePanel.

Possibly related PRs

Astro-Han/pawwork#191: Both PRs modify the same session side panel shell-tab icon rendering (active review/terminal icon variants and file-open menu UI changes).
Astro-Han/pawwork#90: Both PRs touch the Review "file-open" (+) visibility logic via shouldShowReviewFileOpenButton.
Astro-Han/pawwork#878: Both PRs reshape the right-panel shell tab UI around the titlebar portal (RightPanelTabStrip corresponds to portal-based tab strip changes).

Suggested labels

enhancement

Poem

🐰 The right panel once bloated and wide,
Now slices clean with helpers inside,
TabStrip and ReviewBody split with care,
SessionSidePanel breathes lighter air.
CI labels now broader, GitHub workflows aware—
Refactoring complete with git to spare! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description covers the summary of changes, verification steps with concrete results, and changed files. However, it lacks certain required checklist items (Human Review Status, Review Focus, Risk Notes, How To Verify section structure) from the template.	Complete the description by adding Human Review Status, Review Focus section, Risk Notes, and ensure How To Verify matches the template format with labeled test results.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main refactoring work: extracting RightPanelTabStrip and RightPanelReviewBody from SessionSidePanel, which is the primary structural change in this PR.
Linked Issues check	✅ Passed	The PR fully implements the stated objectives from issue `#889`: extracted two subcomponents, moved five helpers to helpers.ts, reduced SessionSidePanel size, and fixed the labeler.yml issue. All in-scope requirements are met and verified.
Out of Scope Changes check	✅ Passed	The changes are tightly scoped to the objectives in issue `#889`. The PR only extracts existing functionality into subcomponents, moves helpers, and fixes the labeler rule—no unrelated refactors, dependencies, or behavioral changes outside the stated scope.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch pawwork/issue-889-extract-sidepanel

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

Suggested priority: P2 (includes user-path files (packages/app/src/pages/session/helpers.ts, packages/app/src/pages/session/right-panel-review-body.tsx, packages/app/src/pages/session/right-panel-tab-strip.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.

gemini-code-assist

Code Review

This pull request refactors the session side panel by extracting logic into dedicated components, specifically creating RightPanelReviewBody and RightPanelTabStrip, while moving utility functions to a helper file. The review feedback identifies opportunities to optimize SolidJS performance within the new RightPanelReviewBody component by removing the keyed attribute from Show components. This change ensures that child components like FileTabContent and the drag overlay can handle reactive updates without unnecessary unmounting and remounting, thereby preserving internal state and improving efficiency.

github-actions · 2026-05-24T20:07:26Z

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	24 -> 24 (0)	48 -> 48 (0)	94 -> 66 (-28)	44 -> 16 (-28)	16.8 -> 33.3 (+16.5)	166.6 -> 150 (-16.6)	4 -> 4 (0)	0 -> 0 (0)	pass
default / long-session-input-lag	48 -> 48 (0)	48 -> 48 (0)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.7 (0)	16.8 -> 16.7 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 40 (0)	56 -> 64 (+8)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	33.3 -> 33.3 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-call-expand	40 -> 40 (0)	40 -> 40 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-default-open-heavy-bash	16 -> 16 (0)	24 -> 24 (0)	73 -> 68 (-5)	38 -> 34 (-4)	50 -> 66.7 (+16.7)	116.6 -> 133.3 (+16.7)	2 -> 4 (+2)	0.004 -> 0.004 (0)	pass
default / terminal-side-panel-open	48 -> 40 (-8)	48 -> 56 (+8)	0 -> 0 (0)	0 -> 0 (0)	33.3 -> 33.4 (+0.1)	33.4 -> 50.1 (+16.7)	0 -> 1 (+1)	0 -> 0 (0)	pass
default / session-scroll-reading	16 -> 16 (0)	16 -> 16 (0)	0 -> 0 (0)	0 -> 0 (0)	33.3 -> 33.2 (-0.1)	33.3 -> 33.2 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
low-end / session-scroll-reading-long	0 -> 0 (0)	0 -> 0 (0)	50 -> 0 (-50)	0 -> 0 (0)	33.3 -> 33.3 (0)	50 -> 33.4 (-16.6)	0 -> 0 (0)	0 -> 0 (0)	pass
low-end / session-timeline-recompute	40 -> 32 (-8)	48 -> 40 (-8)	0 -> 0 (0)	0 -> 0 (0)	33.3 -> 33.4 (+0.1)	33.4 -> 33.4 (0)	0 -> 0 (0)	1.075 -> 1.075 (0)	pass
low-end / concurrent-shimmer-extreme	0 -> 0 (0)	0 -> 0 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass

The task rule in labeler.yml auto-assigned the task type label for .github/workflows/** changes and — because sync-labels is true — removed manually-added task labels for all other paths. Type labels (bug, enhancement, task, documentation) are human judgment; no other type label has an auto-assignment rule. Removing the task rule fixes the pr-triage failure on PR #890.

…om SessionSidePanel Move 5 exported helpers (formatRightPanelWidth, makeRightPanelResizeHandler, shouldShowReviewFileOpenButton, sortableShellTabIds, openReviewShellTab) to helpers.ts and re-export from session-side-panel.tsx for backwards compat. Extract the portalled titlebar tab strip into RightPanelTabStrip, including RightPanelShellIcon. Extract the nested review-body (inner Tabs, DnD provider, file tab switching) into RightPanelReviewBody with its own DnD handlers and drag store. SessionSidePanel shrinks from 583 to 339 lines as a thin shell that owns the resize handle, open/bodyMounted lifecycle, and Tabs.Content dispatch. Closes #889

…tPanelTabStrip

…ewBody - Replace t/keybind props with useLanguage()/useCommand() context hooks - Move helper re-export block to end of session-side-panel.tsx - Restore Portal/gap/spacer design constraint comments in RightPanelTabStrip - Verified: bun test (12 pass), typecheck (clean), snap right-panel-titlebar (pass), snap right-panel-tabs-hover (pass)

The task rule in labeler.yml auto-assigned the task type label for .github/workflows/** changes and — because sync-labels is true — removed manually-added task labels for all other paths. Type labels (bug, enhancement, task, documentation) are human judgment; no other type label has an auto-assignment rule. Removing the task rule fixes the pr-triage failure on PR #890.

Astro-Han added task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work app Application behavior and product flows tech-debt Supplemental cleanup, maintainability, architecture, test, or quality debt context labels May 24, 2026

github-actions Bot added ui Design system and user interface P2 Medium priority and removed task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work tech-debt Supplemental cleanup, maintainability, architecture, test, or quality debt context labels May 24, 2026

github-actions Bot reviewed May 24, 2026

View reviewed changes

Astro-Han added the P3 Low priority label May 24, 2026

gemini-code-assist Bot reviewed May 24, 2026

View reviewed changes

Comment thread packages/app/src/pages/session/right-panel-review-body.tsx

Comment thread packages/app/src/pages/session/right-panel-review-body.tsx

Astro-Han added the task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work label May 25, 2026

github-actions Bot removed task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work P3 Low priority labels May 25, 2026

Astro-Han added the task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work label May 25, 2026

github-actions Bot removed the task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work label May 25, 2026

github-actions Bot added the ci Continuous integration / GitHub Actions label May 25, 2026

Astro-Han added the task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work label May 25, 2026

github-actions Bot removed the task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work label May 25, 2026

Astro-Han added 4 commits May 25, 2026 10:53

fix(app): preserve this binding when passing closeTab/openTab to Righ…

a507de9

…tPanelTabStrip

Astro-Han force-pushed the pawwork/issue-889-extract-sidepanel branch from 1f6d238 to 412e132 Compare May 25, 2026 02:54

Astro-Han merged commit 580fb76 into dev May 25, 2026
28 of 29 checks passed

Astro-Han deleted the pawwork/issue-889-extract-sidepanel branch May 25, 2026 03:05

Astro-Han mentioned this pull request May 25, 2026

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

Open

coderabbitai Bot mentioned this pull request May 25, 2026

refactor(app): flatten right-panel terminal into outer shell tabs #901

Merged

13 tasks

coderabbitai Bot mentioned this pull request Jun 7, 2026

feat(ui): add browser/refresh/lock icons, drop selection-state active variants #1201

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(app): extract RightPanelTabStrip and RightPanelReviewBody from SessionSidePanel#890

refactor(app): extract RightPanelTabStrip and RightPanelReviewBody from SessionSidePanel#890
Astro-Han merged 4 commits into
devfrom
pawwork/issue-889-extract-sidepanel

Astro-Han commented May 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 24, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

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

Uh oh!

Summary

Verification

Changed files

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Perf delta summary

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 24, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 24, 2026 •

edited

Loading

github-actions Bot commented May 24, 2026 •

edited

Loading