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

Add diff file content expansion and refresh to the right panel diff view

• Adds a getDiffFileContents RPC (server, contracts, client) that fetches old/new file text for a diff entry, with per-side 1 MB limits, binary rejection, path-containment checks, and support for both working-tree and branch-range sources.
• DiffPanel now lazily loads per-file contents, auto-refreshes on window focus and after a new turn completes, and exposes a manual refresh button with a spinner.
• AnnotatableCodeView switches from onLineSelectionEnd to onGutterUtilityClick to trigger comments, lifts draft text state up, and accepts a codeViewKey prop to force remounts.
• LocalCommentAnnotation supports a controlled onTextChange/text prop pair and simplifies saved-comment rendering (no header or range label).
• Diff panel visuals are updated: new CSS theming, selected-line highlight bars, improved skeleton loading state, and restyled tab close affordance at the leading edge.
• Behavioral Change: onLineSelectionEnd no longer creates comments in AnnotatableCodeView; gutter clicks are now the sole trigger.

^{Macroscope summarized 13c8279.}

---

Note

Medium Risk
New server path reads git revisions and the working tree from user-supplied paths; mitigations exist (workspace root, realpath containment) but this expands the review attack surface. Large UI/CSS and comment-interaction changes affect core diff viewing behavior.

Overview
Adds review.getDiffFileContents end-to-end (contracts, WS RPC, auth, ReviewService, Git driver) so the diff panel can hydrate full old/new file text when expanding unchanged regions in working-tree and branch-range previews, with workspace-bound cwd, repo-root path checks, binary rejection, and a 1 MB per-side cap.

DiffPanel wires Pierre’s loadDiffFiles to that command for git scopes (not turn checkpoints), adds a manual Refresh diff control plus auto-refresh on window focus and when the latest completed turn changes, and refreshes diff styling (flat backgrounds, inline “N unmodified lines” separators, tighter headers/metrics, codeViewRevision remount when collapsing all files).

Right-panel chrome is tightened: smaller tabs with hover-to-close on the leading icon, title-bar control positioning when the panel is open, and updated loading skeletons. Diff comments now start from gutter utility clicks (not line-selection end), with simplified inline draft/saved annotation UI and lifted draft text state.

^{Reviewed by Cursor Bugbot for commit 13c8279. 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: 358cd34c-18d8-43d5-81ca-64ba4a52983c

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

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new diff file expansion feature with a new RPC endpoint, server-side file reading logic with path traversal protections, and new UI behaviors — significantly more than the 'styling' title suggests. The security-sensitive file reading code and scope of new capability warrant human review.

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

[macroscopeapp]

One finding on the new ReviewService.getDiffFileContents path: the workspace-boundary failure it produces reports the wrong operation/detail, so the caller-visible error identifies getDiffPreview instead of the failing operation. Inline comment has the suggested fix.

^{Posted via Macroscope — Effect Service Conventions}

[macroscopeapp]

One finding on the new Git review-diff file-contents path. See the inline comment.

^{Posted via Macroscope — Effect Service Conventions}