feat(web): put panel tab close buttons after the title

[alexandre-vl]

Problem

Hovering a right-panel tab or a terminal-list row swaps its icon for the close button, so close sits left of the title.

Change

• The icon stays put and the close button follows the title, in the right panel and the terminal list. It is still revealed only on hover or keyboard focus, on every tab and row, active ones included.
• It floats over the end of the title with a short fade, so hovering never changes a width.
• A 64px min tab width keeps short titles clickable. A terminal running vi is labelled "vi", 9px wide.
• Touch screens cannot hover, so they always show the ×, like the floating stop button in ThreadRelationshipsControl.
• Mute, panel-level close and the add-surface menu are unchanged. Terminal observers still get no ×.

Scope and approval

Approved in #17986 (converted from #11877): #17986 (comment), "Target the VS Code-style row: [icon] [title] [× on hover]", optionally in the terminal list too.

Replaces #18199, which was closed because active tabs and terminal rows kept their × visible and the interactions had no recording. Here close is hover/focus-revealed everywhere, and the recordings are below. Written from scratch on current main.

Verification

Dev build, headless Chrome. The recordings are screenshots taken during real pointer, keyboard and touch input; the cursor, tap marks and key labels are drawn on top.

Pointer: hover each tab, click a title, then keyboard Tab and Enter on Diff.

Touch (emulated): tap a title, then tap Diff's ×.

Terminal list: hover the active row, hover the other row, click its label.

• A click on the middle of each title switches tabs. "Diff" clears the × by 13px and "vi" by 18px.
• The × closes only its own tab, middle-click still closes, drag reorder works, and nothing moves on hover or when switching tabs.
• Keyboard: Tab from a title focuses its ×, which shows, and Enter closes the tab.
• A client without terminal:operate sees no × and no fade.
• vp fmt, vp lint, web typecheck, and the RightPanelTabs / ThreadTerminalDrawer tests (40) pass.

	Before	After
Right panel, hovering Terminal 1
Terminal list, hovering Terminal 3

Model: claude-opus-5-5 · Harness: Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at d4dfcee

Macroscope's review found this PR approvable — This is a localized UI refinement that repositions existing close actions, preserves their callbacks and terminal permission checks, and adds only responsive hover, focus, and touch presentation. It introduces no schema, deployment, default, or static-analysis changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate d4dfcee

[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: aa9714bc-2988-4f67-9f35-5948e74942a4

---

📥 Commits

Reviewing files that changed from the base of the PR and between 18656a3 and d4dfcee.

---

📒 Files selected for processing (3)

• apps/web/src/components/RightPanelTabs.tsx
• apps/web/src/components/ThreadTerminalDrawer.tsx
• apps/web/src/components/ui/panel-tab-close-button.tsx

---

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

---

---

📝 Walkthrough

Walkthrough

The shared panel-tab close button now renders separately from tab content and provides title-fade styling. Right-panel and terminal tabs use the updated control and separate their icons, titles, and close buttons.

Changes

Panel Tab Controls

Layer / File(s)	Summary
Shared close control apps/web/src/components/ui/panel-tab-close-button.tsx	PanelTabCloseButton no longer accepts children. It renders an overlaid close icon that becomes visible and interactive on tab hover, focus-visible, or coarse-pointer devices. The exported title-fade class applies under the same conditions.
Right-panel and terminal tab integration apps/web/src/components/RightPanelTabs.tsx, apps/web/src/components/ThreadTerminalDrawer.tsx	Both tab components render icons, titles, and close buttons separately. Their title buttons use the shared fade class. The terminal close button is rendered only when terminal operation is allowed.

Priority: ⬇️ Low

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

Change: Feature

Suggested reviewers: juliusmarminge

---

Merge Risk | ⚪ Minimal · up to d4dfc

Merge Risk: ⚪ Minimal · up to d4dfc

No actionable merge-blocking behavior is established in the changed tab controls.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to d4dfc

The change rearranges tab controls without expanding permissions or changing which surface or terminal is closed. Existing authorization checks and confirmation behavior remain in place. No introduced or materially worsened security risk was identified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The changed interaction surface is confined to existing web tab controls. Coarse-pointer visibility makes an existing close action easier to access but does not grant terminal-operation authority to observers or broaden its environment, thread, or terminal targets.

Security Findings and Attack Paths

• inferred — No introduced attacker-controlled path to greater authority was identified in the changed flow. Display labels do not select close targets, and both consumers retain their existing callback wiring and domain owners.

Trust Boundaries and Controls

• observed — ThreadTerminalDrawer renders the close control only with terminal-operation permission. Its confirmation path checks permission before confirmation and again afterward. Right-panel terminal closing retains owner-level scope checks. These client controls do not establish backend enforcement.

Resilience and Maintainability Implications

• observed — Confirmation cancellation or dialog failure prevents close dispatch and releases the pending-confirmation count. Existing concurrent confirmations, immediate local terminal cleanup, and differing active-thread versus panel failure-recovery behavior predate this PR and remain unchanged.

---

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: panel tab close buttons now appear after the title.
Description check		The description covers the problem, implementation, scope and approval, verification results, screenshots, interaction checks, and agent details. It matches the required template and provides sufficie…
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.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• 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.}