Finale: upgrade changed files card to fix various UI issues

[sandersonstabo]

Why

When merging the original UI PR this section was left in a kind of hybrid state, it had some changes merged but not all. I highly suggest merging this version instead as the last one has contrast issues, padding issues and visual noise that is not needed. Also unifies the radii of the card to be like the others.

Now available as 25 line addition, not the 9K one that was mistakenly generated!

UI changes

Before:

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Testing

vp check; vp run typecheck passed locally before splitting these PRs.

---

Note

Low Risk
Presentation-only Tailwind/className updates; no logic, data, or behavior changes beyond copy pluralization.

Overview
Aligns the changed files UI in ChangedFilesCard and the assistant timeline block (AssistantChangedFilesSectionInner) to the same card treatment: rounded-2xl, border-input, bg-background, light shadow, and dark:bg-input/32 instead of semi-transparent card layers, pseudo-borders, and sticky blurred headers.

The header is a normal flex row (not sticky): “N changed file(s)” with proper pluralization, inline DiffStatLabel (layout="inline", text-xs), and Collapse all / View diff outline buttons with tighter px-1.5. In ChangedFilesCard, the extra inner padding wrapper around ChangedFilesTree is removed so the tree sits directly in the card.

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

Note

Fix UI issues in the changed files card header and diff stat display

• Removes the sticky header from ChangedFilesCard and AssistantChangedFilesSectionInner, replacing it with a bordered, rounded card layout.
• Adds pluralization to the changed files count label ('changed file' vs 'changed files').
• Renders DiffStatLabel inline with compact text sizing (text-xs leading-4) and reduces horizontal padding on action buttons.

^{Macroscope summarized d55d1a4.}

[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

Run ID: 0dc902ee-4622-4fad-9664-6e4cfd9b90ec

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 f27a82a. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved

Pure UI styling changes: CSS class adjustments, singular/plural grammar fix, and layout restructuring. No logic or runtime behavior changes beyond visual presentation.

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

Dismissing prior approval to re-evaluate d55d1a4