fix(web): better right panel (new diffs styling)

[maria-rcks]

Problem

The right-panel tabs and diff chrome had inconsistent sizing and spacing, with the close affordance reserving extra trailing space. Diff rows, controls, separators, and loading skeletons also no longer matched the darker panel treatment. Expanding a file could shift the list upward because the virtualizer's bottom padding disagreed with its sticky-item measurements.

Solution

• compact the panel tabs and replace each leading icon with the close control on hover
• use consistent 8px outer insets and align the diff toolbar with the title-bar controls
• flatten diff backgrounds and borders, and render unmodified-line counts as inline dividers
• remove the virtualizer padding mismatch and keep selected-file reveal scrolling stable
• update the loading skeleton to mirror the current diff layout

Validation

• Browser E2E measurements on small and large diffs: 0px movement for the toolbar, first file row, panel root, and scroll position when files expand
• vp lint apps/web/src/components/ChatView.tsx apps/web/src/components/DiffPanel.tsx apps/web/src/components/DiffPanelShell.tsx apps/web/src/components/RightPanelTabs.tsx
• vp run --filter @t3tools/web typecheck
• vp test run apps/web/src/lib/diffCollapse.test.ts apps/web/src/lib/diffRendering.test.ts apps/web/src/diffPanelStore.test.ts apps/web/src/rightPanelStore.test.ts (44 tests)

before	after

Model: GPT-5.6 Sol via Codex harness.

Note

Restyle diff panel with flatter visuals, compact tabs, and improved scroll targeting

• Updates diff panel surfaces to use --background for all diff backgrounds, removes borders, and adds hover styling and hunk separator metrics for a flatter, more integrated look (DiffPanel.tsx, DiffPanelShell.tsx).
• Rewrites the diff loading state to show structured file-header and code-line skeletons instead of a bordered card placeholder.
• Redesigns right panel tabs to be more compact (h-6, text-xs), with a leading close button that swaps to an X on hover and shows a pending dot indicator (RightPanelTabs.tsx).
• Fixes auto-scroll to the selected diff file by keying on a stable selectedDiffFileKey and re-running the scroll effect on remount via codeViewMountKey.
• Adjusts titlebar controls positioning in ChatView.tsx to anchor right when the right panel is open.

^{Macroscope summarized a764454.}

---

Note

Low Risk
Visual and layout-only changes in the web UI with no auth, data, or API logic touched.

Overview
Right panel tabs are smaller (h-6, text-xs), with the close control on the leading edge that shows the surface icon by default and an X on hover/focus. Tab and menu icons shrink slightly; the add-panel control matches the compact tab height.

Diff panel chrome moves to a flat var(--background) treatment: card-tinted backgrounds and visible header/file borders are removed; diff headers get hover feedback and unmodified-line (“hunk”) separators are styled as inline dividers with centered counts. The diff toolbar uses ghost sm controls instead of outlined xs buttons. Virtualizer metrics align header height (32px), hunk separator height (24px), and zero layout gap/padding so expanding files does not shift the list; selected-file scroll uses a stable mount key and resolved file key.

Loading skeleton in the diff shell mirrors file headers, hunk separators, and code lines instead of a generic card block. Embedded diff header uses tighter horizontal padding; inline right-panel surface subheaders get a shorter height and transparent bottom border. Titlebar panel controls shift right when the right panel is open (including Windows overlay inset).

^{Reviewed by Cursor Bugbot for commit a764454. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 55234769-5e9d-41e2-aae5-b0608aa296ae

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f862182. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This UI styling PR has an unresolved high-severity comment identifying a potential bug where workspace controls may overlap native window buttons on Electron Windows when the right panel is open. This usability issue should be addressed before merging.

^{You can customize Macroscope's approvability policy. Learn more.}