fix(web): right panel and terminal drawer follow the pointer while dragging

[maria-rcks]

Problem

The right panel and terminal drawer edges trail the pointer by one frame while you drag them. The panel width lived in ChatView state, so every drag step re-rendered all of ChatView after the paint. The terminal set React state on each pointermove.

Fix

Both drags now write the size straight to the element during the drag, the same way SidebarRail already does. The right panel reads --resizable-width, and its width transition is off while dragging. The terminal writes style.height. React state and localStorage commit once on release. An abandoned drag (thread switch or unmount) restores the last rendered width, and the drawer gained the missing lost-capture handler. If the panel's bounds change mid-drag (sidebar opens, window narrows), useResizeDrag's new refresh() re-applies the pointer position, and the drag disables transitions with transition-property: none so the shell's own transition reset can't re-enable them.

Measurements

Headless Chrome, dev build, 2 runs each.

drag	main: frames behind pointer	this stack	script ms per step
right panel	204/623, 204/630	0/358, 0/355	195–201 → 16–19
terminal drawer	120/364, 117/357	0/377, 0/301	18–20 → 13–17

Long animation frames during the right panel drag went from 230 to 8–12. In the videos, the red line marks the pointer.

The right panel width still survives a reload (440 on both). useResizableWidth and the terminal drawer tests pass.

Opus 5.5 via Claude Code in T3 Code

🤖 Generated with Claude Code

[coderabbitai]

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: a4e8c957-b6b1-4b49-9af3-6620d09c8a6a

---

📥 Commits

Reviewing files that changed from the base of the PR and between 8b76ca1 and a722d79.

---

📒 Files selected for processing (3)

• apps/web/src/hooks/useResizableWidth.test.tsx
• apps/web/src/hooks/useResizableWidth.ts
• apps/web/src/hooks/useResizeDrag.ts

---

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

---

---

📝 Walkthrough

Walkthrough

Resize drags now update inline styles during pointer movement instead of triggering React state updates for each move. Drag completion commits the final size to state. The preview panel uses a shared CSS property for live width, and the terminal drawer handles lost pointer capture.

Changes

Resize updates

Layer / File(s)	Summary
Commit-aware drag width updates apps/web/src/hooks/useResizeDrag.ts, apps/web/src/hooks/useResizableWidth.ts, apps/web/src/hooks/useResizableWidth.test.tsx	The resize hook writes clamped widths to a host CSS property during dragging and commits the final width to state and storage on completion. Cleanup receives the commit status, restores transition settings, and resets uncommitted drags to the latest rendered width. Tests check the host styles and cleanup.
Apply live sizing to panels and drawer apps/web/src/components/preview/PreviewPanelShell.tsx, apps/web/src/components/ThreadTerminalDrawer.tsx	The preview panel uses the live width property for its outer and inner widths. The terminal drawer updates inline height during pointer movement, commits the final height on resize end, and routes lost pointer capture through the resize-end handler.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

---

Merge Risk: ⚪ Minimal · up to a722d

Panel and terminal resizing can complete or be interrupted without an identified state inconsistency. The change is mergeable after normal checks.

Architecture Summary

Architecture risk: 🟡 Medium · up to a722d

The change affects 1 system.

Changed systems: apps/web

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — apps/web (ui) was modified; 5 changed files map to changed impact.

Before / after behavior

• observed — Modified behavior in apps/web/src/components/ThreadTerminalDrawer.tsx: The pointer-resize state now retains the drawer element whose inline height is updated during dragging.
• observed — Modified behavior in apps/web/src/components/ThreadTerminalDrawer.tsx: Pointer movement now updates the drawer’s inline height immediately instead of calling setDrawerHeight on every move; the callback no longer depends on that setter.
• observed — Modified behavior in apps/web/src/components/ThreadTerminalDrawer.tsx: When a drag changed the height, pointer end now commits the ref’s final height to React state before synchronizing it and incrementing the resize epoch.
• observed — Modified behavior in apps/web/src/components/ThreadTerminalDrawer.tsx: The empty-terminal drawer’s resize handle now routes lost pointer capture through the resize-end handler.

Reliability and maintainability

• inferred — Risk-relevant change factors for apps/web: blast_radius_1; direct_dependents_1

---

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check		The title clearly identifies the main fix: keeping the right panel and terminal drawer aligned with the pointer during dragging.
Description check		The description explains the problem, implementation, performance measurements, test results, UI recordings, persistence check, and agent attribution. It uses "Fix" and "Measurements" instead of the t…

---

---

✨ 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 a722d79

Macroscope's review found this PR approvable — This is a contained fix to existing panel and terminal resize interactions, using direct DOM sizing during drags while preserving persisted state and existing non-resizable modes. The shared lifecycle changes are covered by focused tests and do not introduce schema, infrastructure, security, or product-default changes.

^{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	—	5.0 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.9 KiB	—	29.3 KiB	✅
Codex	Live turn messages	—	2	—	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	—	1	—	8	✅

Baseline: unavailable · PR result: a722d79 · 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 a722d79