perf(web): sidebar drags restyle only the sidebar

[maria-rcks]

Problem

Every frame of a sidebar drag changed --sidebar-width on [data-slot=sidebar-wrapper], the app root. Changing an inherited custom property there restyles every element in the app. The settings page, with no React work at all, still spent about 42ms per frame on style and layout.

Fix

During the drag, the width is written only to the sidebar gap and container, the two elements that read it. --sidebar-width is set on the wrapper once, on release. Collapsing the sidebar mid-drag now cancels the drag and restores the earlier width, instead of keeping an unsaved width.

sidebar drag, right panel open, 2 runs each	main	this stack
style recalc per step	41–49 ms	1.6–1.8 ms
p50 frame	17–33 ms	16.7 ms

Collapse and expand still animate and land at the same width. There's no visual change, so there are no screenshots. The sidebar test passes.

Opus 5.5 via Claude Code in T3 Code

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

Only developers with an assigned seat can use this organization's usage-based review budget, and seats here are assigned manually. Ask an admin to assign a seat, or change the review continuation mode in Billing.

Next included review available in 18 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 10 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 76b0e3be-f346-4b2e-8e78-2117f5a16df4

---

📥 Commits

Reviewing files that changed from the base of the PR and between 73e78a9 and 23a0744.

---

📒 Files selected for processing (1)

• apps/web/src/components/ui/sidebar.tsx

---

---

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: e4998a41-6f5c-4aff-ad87-b7e18fe71627

---

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6db99 and a92d381.

---

📒 Files selected for processing (1)

• apps/web/src/components/ui/sidebar.tsx

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 3 remain after this review.

---

---

📝 Walkthrough

Walkthrough

Sidebar resizing now applies frame-by-frame width changes to the gap and container. When dragging finishes, the wrapper receives the final width. Cleanup removes temporary width and transition-duration styles, and changing the sidebar’s open state cancels an active drag.

Changes

Sidebar resize behavior

Layer / File(s)	Summary
Resize updates and cleanup apps/web/src/components/ui/sidebar.tsx	During dragging, resize frames update the gap and container widths. On completion, the wrapper receives the final width. Cleanup removes temporary styles, and the resize hook now depends on open.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Refactor

Suggested reviewers: juliusmarminge

---

Merge Risk: ⚪ Minimal · up to a92d3

Sidebar dragging keeps the active layout in sync and commits accepted widths when finished. No actionable merge-blocking risk was identified.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to a92d3

The change remains within browser-side sidebar sizing. Width constraints, persistence validation, and application callbacks are preserved, and abandoning a drag removes its temporary styles. No material security risk was found introduced or worsened by this PR.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The changed path affects sidebar presentation and a browser-local width preference. Its inputs and outcomes do not introduce a new identity transition, tenant boundary, service authority, or privileged sink in the inspected interaction.

Resilience and Maintainability Implications

• observed — The hook prevents overlapping sessions and clears active ownership before releasing pointer capture. Committed completion flushes the pending position and cleans temporary styles before committing. Open-state changes and unmount cancel without persistence; pointer cancellation and lost capture retain their pre-existing commit behavior. Storage-write failure remains caught without preventing the current-session state update.

---

---

Pre-merge checks | 3 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check		The description explains the problem and fix, but it omits the required Scope and approval section and does not provide the required Verification section with focused manual checks, observed results, …	Add a Scope and approval section with the linked issue or maintainer approval, or explain why this focused fix qualifies for an exemption. Add a Verification section with specific test and manual-check steps and observed results. Include be…

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: limiting sidebar drag restyling to the sidebar.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

Full details: Description check

Explanation

The description explains the problem and fix, but it omits the required Scope and approval section and does not provide the required Verification section with focused manual checks, observed results, and UI evidence. It also states that no screenshots exist even though the template requires before/after screenshots for UI changes.

Resolution

Add a Scope and approval section with the linked issue or maintainer approval, or explain why this focused fix qualifies for an exemption. Add a Verification section with specific test and manual-check steps and observed results. Include before/after screenshots and a short recording if interaction timing or transitions require evidence, or explain the applicable repository-approved exception.

---

---

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

[macroscopeapp]

Approvability

Verdict: Approved at d720801

Macroscope's review found this PR approvable — This single-file performance change keeps live drag updates confined to the sidebar elements that need them, then commits the final width through the existing wrapper variable and persistence path. Cancellation and cleanup are handled locally, with no product-default, schema, infrastructure, or static-analysis changes.

No code changes detected at 23a0744. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	4.9 KiB	—	6.8 KiB	✅
Codex	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Codex	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Codex	Live turn WebSocket decoded	—	20.8 KiB	—	29.3 KiB	✅
Codex	Live turn messages	—	1	—	8	✅
Claude	Total thread wire	—	5.0 KiB	—	6.8 KiB	✅
Claude	Thread snapshot wire	—	3.8 KiB	—	4.9 KiB	✅
Claude	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Claude	Live turn WebSocket decoded	—	21.2 KiB	—	29.3 KiB	✅
Claude	Live turn messages	—	2	—	8	✅

Baseline: unavailable · PR result: 23a0744 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

Dismissing prior approval to re-evaluate d720801