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
UI-only chat presentation changes with no API, auth, or data-path impact; behavior is covered by new static render tests.

Overview
Unifies the changed files card styling in ChangedFilesCard and the assistant timeline section so both use the same rounded border-input shell, compact header typography, and inline diff stats instead of the older uppercase label and text action buttons.

The header stays sticky while scrolling (with a filled before band so content does not show through). The count label now pluralizes correctly (1 changed file vs N changed files). Expand/collapse and View diff are compact icon buttons with tooltips and aria-labels, replacing the previous outline text buttons.

Adds static markup tests for ChangedFilesCard and assistant changed-files rendering in MessagesTimeline to lock in sticky classes, singular labels, and the new control markup.

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

Note

Upgrade changed files card UI with sticky header, icon buttons, and singular/plural file count

• Reworks ChangedFilesCard and AssistantChangedFilesSectionInner to use a compact sticky header with a bordered background card layout.
• Replaces text buttons with icon-sized buttons (ChevronsUpDown/ChevronsDownUp and FileDiff) wrapped in tooltips, with aria-label attributes for accessibility.
• Updates the file count label to use correct singular/plural grammar (e.g. "1 file" vs "2 files").
• Adds tests in ChangedFilesTree.test.tsx and MessagesTimeline.test.tsx asserting the new header classes, grammar, and aria-labels.

^{Macroscope summarized 138ddd9.}

[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: 746bf007-315c-4174-a028-0fbda884ce2e

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: updated CSS classes for visual polish, replaced text buttons with icon buttons having tooltips, and fixed singular/plural grammar. No runtime behavior changes - same handlers, same functionality, just visual presentation improvements with accompanying tests.

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

Dismissing prior approval to re-evaluate d55d1a4

Dismissing prior approval to re-evaluate 138ddd9