Extract changed files card with compact aligned diff stats by juliusmarminge · Pull Request #3023 · pingdotgg/t3code

juliusmarminge · 2026-06-09T23:31:03Z

Ports the changed-files part of #2451 by @sandersonstabo, rebased onto current main.

Extracts a ChangedFilesCard (header + tree) using the tool-call-card surface, replacing the old heavy inline card in the timeline; the sticky header behavior main added recently is preserved
DiffStatLabel renders +/- counts in a fixed 4ch-aligned grid with font-mono tabular-nums for easy vertical scanning, collapsing large counts to k/m/b
Root-level changed files are no longer indented as if inside a directory; tree rows get consistent rounded hover/focus styling

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code

Note

Low Risk
Frontend-only chat UI refactor; no API, auth, or data-path changes.

Overview
Refactors the assistant changed files block into a shared ChangedFilesCard (rounded card surface, sticky header with file count, aggregate +/- stats, Expand all / View diff, then the tree). MessagesTimeline no longer builds that header inline—it wires store expand state into the card.

DiffStatLabel now formats large counts with k/m/b suffixes and supports layout (inline in the card header vs default 4ch-aligned grid for tree rows), with optional className.

ChangedFilesTree row styling shifts to rounded-xl accent hover and focus rings; root-level file rows skip the chevron spacer when there are no directory nodes.

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

Note

Extract changed files into `ChangedFilesCard` with compact aligned diff stats

Introduces a new ChangedFilesCard component in ChangedFilesTree.tsx that wraps the file tree in a card with a sticky header showing file count, diff stats, and expand/collapse and view-diff buttons.
Extends DiffStatLabel in DiffStatLabel.tsx with an layout prop ('aligned' | 'inline') and compact number formatting (e.g. 1.2k, 3m); removes the slash separator between add/delete counts.
Replaces the inline changed-files header in MessagesTimeline.tsx with the new ChangedFilesCard, preserving expand/collapse and view-diff behavior.
Behavioral Change: top-level files with no directory siblings no longer render a leading spacer, shifting icons and text left in flat file lists.

📊 Macroscope summarized aaec49a. 3 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

Ported from #2451. Co-authored-by: ss <[email protected]> Co-Authored-By: Claude Opus 4.8 <[email protected]>

coderabbitai · 2026-06-09T23:31:11Z

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: c8712f85-9588-46a3-9b92-9190af520f97

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
Commit unit tests in branch ui/changed-files-card

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

macroscopeapp · 2026-06-09T23:32:38Z

Approvability

Verdict: Approved

UI component extraction and styling updates with no runtime behavior changes. The open review comment identifies a minor CSS grid width issue (low severity) that may cause text overflow for large formatted numbers.

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

github-actions · 2026-06-09T23:33:24Z

🚀 Expo continuous deployment is ready!

Project → t3-code
Platforms → android, ios
Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: `INTERNAL` Build profile: `preview:dev` Runtime version: `ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e` App version: `0.1.0` Git commit: `10261202c84fe6d78e961e9305058c07d097a897`	Build Permalink Details Distribution: `INTERNAL` Build profile: `preview:dev` Runtime version: `313e506a7f15a9c3f15b01d787d68a12382432bf` App version: `0.1.0` Git commit: `4f3c95780c371f4accc1c31e514028d394d6c246`
Update Details	Update Permalink Details Branch: `pr-3023` Runtime version: `ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e` Git commit: `4f3c95780c371f4accc1c31e514028d394d6c246`	Update Permalink Details Branch: `pr-3023` Runtime version: `313e506a7f15a9c3f15b01d787d68a12382432bf` Git commit: `4f3c95780c371f4accc1c31e514028d394d6c246`
Update QR

Co-authored-by: codex <[email protected]>

Dismissing prior approval to re-evaluate dcc52e4

cursor

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

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Overflow hidden breaks sticky header
- Replaced overflow-hidden with overflow-clip on the card wrapper, which clips content to the border-radius without creating a scroll container that would break sticky positioning.

Or push these changes by commenting:

@cursor push 9af219b96d

Preview (9af219b96d)

diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -33,8 +33,8 @@
   const summaryStat = useMemo(() => summarizeTurnDiffStats(files), [files]);
 
   return (
-    <div className="mt-4 rounded-2xl border border-input bg-card/40 p-2 pt-4 shadow-xs/5 not-dark:bg-clip-padding">
-      <div className="sticky top-2 z-10 mb-3 flex items-center justify-between gap-2 bg-card/72 px-2 backdrop-blur-md before:absolute before:inset-x-0 before:-top-4 before:h-4 before:bg-inherit before:content-['']">
+    <div className="mt-4 overflow-clip rounded-2xl border border-input bg-card/40 p-2 pt-0 shadow-xs/5 not-dark:bg-clip-padding">
+      <div className="sticky top-0 z-10 -mx-2 mb-3 flex items-center justify-between gap-2 bg-card/72 px-4 py-4 backdrop-blur-md">
         <p className="flex self-start items-center gap-1 font-medium text-foreground text-xs leading-4">
           <span>{files.length} changed files</span>
           {hasNonZeroStat(summaryStat) && (

_{You can send follow-ups to the cloud agent here.}

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

Dismissing prior approval to re-evaluate aaec49a

Co-authored-by: codex <[email protected]>

macroscopeapp · 2026-06-10T08:30:15Z

+        className={cn(
+          layout === "inline"
+            ? "inline-flex items-center gap-1 tabular-nums align-middle"
+            : "inline-grid grid-cols-[4ch_4ch] gap-2 text-right tabular-nums align-middle",


🟢 Low chat/DiffStatLabel.tsx:37

The grid column width grid-cols-[4ch_4ch] is too narrow for formatted values. formatCompactDiffCount can return strings like "9.9k" (for 9900), and after prepending the +/- sign the cell content becomes "+9.9k" — 5 characters, which overflows a 4ch column. This breaks the aligned layout. Change 4ch to 5ch to accommodate the longest possible formatted output.

Suggested change

: "inline-grid grid-cols-[4ch_4ch] gap-2 text-right tabular-nums align-middle",

: "inline-grid grid-cols-[5ch_5ch] gap-2 text-right tabular-nums align-middle",

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/web/src/components/chat/DiffStatLabel.tsx around line 37: The grid column width `grid-cols-[4ch_4ch]` is too narrow for formatted values. `formatCompactDiffCount` can return strings like `"9.9k"` (for 9900), and after prepending the `+`/`-` sign the cell content becomes `"+9.9k"` — 5 characters, which overflows a `4ch` column. This breaks the aligned layout. Change `4ch` to `5ch` to accommodate the longest possible formatted output. Evidence trail: apps/web/src/components/chat/DiffStatLabel.tsx lines 8-20 (formatCompactDiffCount function), line 37 (grid-cols-[4ch_4ch]), lines 41-42 (+ and - prefix with font-mono class). Trace: formatCompactDiffCount(9900) → k=9.9, k<10, 9.9.toFixed(1)='9.9', no .0 to replace → '9.9k' (4 chars). Line 41 prepends '+' → '+9.9k' (5 chars) in a 4ch column. Also: formatCompactDiffCount(999999) → k=999.999, k>=10, Math.round(999.999)=1000 → '1000k' (5 chars) → '+1000k' (6 chars).

@latest

…MIT ONLY, DO NOT SQUASH (#100) * fix: maintain reasoning selections for multiple providers (pingdotgg#2760) * [codex] Bump Effect to beta.73 and migrate compatibility APIs (pingdotgg#2840) Co-authored-by: codex <[email protected]> * Add Claude Opus 4.8 support (pingdotgg#2849) * Migrate TypeScript checks to Effect TSGo (pingdotgg#2851) * Extract collection performance refactors from mobile stack (pingdotgg#2854) Co-authored-by: codex <[email protected]> * Extract independent web cleanup from mobile stack (pingdotgg#2855) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: codex <[email protected]> * Ensure Electron runtime is installed in release workflow (pingdotgg#2861) * T3 Code Mobile [WIP] (pingdotgg#2013) Co-authored-by: codex <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Yash Singh <[email protected]> * chore: add vendored reference repo subtree sync tooling (pingdotgg#2902) Co-authored-by: codex <[email protected]> * Use HttpApi for Environment APIs & standardize authn/authz (pingdotgg#2858) Co-authored-by: codex <[email protected]> * chore: add Alchemy reference repo subtree (pingdotgg#2918) Co-authored-by: codex <[email protected]> * fix(desktop): Include standard Linux AppImage icons for Niri/Noctalia (pingdotgg#2915) * Probe Cursor models via list_available_models (pingdotgg#2428) Co-authored-by: codex <[email protected]> Co-authored-by: Julius Marminge <[email protected]> * Migrate workspace to Vite+ and pnpm (pingdotgg#2899) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Cursor Agent <[email protected]> * test(web): CI stability - prebundle react-dom client for browser tests (pingdotgg#2928) * fix(ssh): Surface redacted stdout for failed commands (pingdotgg#2920) * fix(desktop): Preserve SSH HTTP auth status (pingdotgg#2923) Co-authored-by: Julius Marminge <[email protected]> * fix: build web before desktop release packaging (pingdotgg#2934) Co-authored-by: Julius Marminge <[email protected]> * ci: let setup-vp install dependencies (pingdotgg#2936) Co-authored-by: Julius Marminge <[email protected]> * fix(release): surface desktop packaging subprocess output (pingdotgg#2937) Co-authored-by: Julius Marminge <[email protected]> * chore: setup eas ci (pingdotgg#2911) Co-authored-by: Julius Marminge <[email protected]> * fix(release): use workspace electron-builder for desktop packaging (pingdotgg#2938) Co-authored-by: Julius Marminge <[email protected]> * [codex] remove duplicated pnpm root config (pingdotgg#2939) Co-authored-by: Julius Marminge <[email protected]> * fix(release): install dependency closures in partial jobs (pingdotgg#2941) Co-authored-by: Julius Marminge <[email protected]> * [codex] split ci workflow jobs (pingdotgg#2940) Co-authored-by: Julius Marminge <[email protected]> * [codex] fix mobile native static analysis source discovery (pingdotgg#2942) Co-authored-by: Julius Marminge <[email protected]> * fix(release): preserve desktop artifact arch (pingdotgg#2943) Co-authored-by: Julius Marminge <[email protected]> * [codex] Fix desktop packaging patched dependencies (pingdotgg#2944) Co-authored-by: codex <[email protected]> * [codex] Filter staged desktop patched dependencies (pingdotgg#2945) Co-authored-by: codex <[email protected]> * fix(release): install hosted web workspace closure (pingdotgg#2949) * fix(cli): bundle patched diff parser dependency (pingdotgg#2957) Co-authored-by: Julius Marminge <[email protected]> * Prevent settings layout shifts with scrollbar gutters (pingdotgg#2960) * [codex] fix release finalize install (pingdotgg#2961) Co-authored-by: Julius Marminge <[email protected]> * fix(source-control): handle self-hosted GitLab, multi-account GitHub auth & azure devops web url (pingdotgg#2480) Co-authored-by: Julius Marminge <[email protected]> * [codex] Avoid shell for Node executable spawns (pingdotgg#2952) Co-authored-by: Julius Marminge <[email protected]> * [codex] Avoid shell for Windows environment probe (pingdotgg#2951) Co-authored-by: Julius Marminge <[email protected]> * fix(composer): support spaces in file mentions (pingdotgg#2625) * [codex] Avoid shell for system executables (pingdotgg#2950) Co-authored-by: Julius Marminge <[email protected]> * feat(relay): Add managed relay tunnels and APN service (pingdotgg#2837) Co-authored-by: codex <[email protected]> * Restructure documentation into topical folders (pingdotgg#2963) * move * dont fail if env-file is unspecified * fallback to None when RELAY_DOMAIN is unset * implicit install from vp * forward args directly * bump alchemy to fix absolute drizzle schema out * bump alchemy to fix drizzle schema out attempt 2 * Migrate tests to vite-plus test APIs (pingdotgg#2964) * remove `vp staged` * publish deploy status on relay deploy workflow * Use pnpm for server publish workflow (pingdotgg#2966) * Rename function for publishing arguments to vp pm (pingdotgg#2967) * Remove duplicate 'publish' argument in CLI script * Refactor recoverable Effect fallbacks to orElseSucceed (pingdotgg#2968) * document vp instead of mise * link * cleanup * tip * we support cursor, duhhh * include @latest * fix(cloud): use Electron fetch for proxying Clerk IPC requests (pingdotgg#2973) * fix: handle Claude Agent SDK 0.3.x system messages to stop runtime-warning flood (pingdotgg#2872) Co-authored-by: Julius Marminge <[email protected]> * "claude system message" instead of "runtime warning" when using 4.8 from claude code (pingdotgg#2972) * fix(desktop): stop looping macOS TCC permission prompts (pingdotgg#2745) Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Julius Marminge <[email protected]> * Annotate relay error spans with schema fields (pingdotgg#2976) * [codex] Enrich relay authorization diagnostics (pingdotgg#2977) Co-authored-by: codex <[email protected]> * [codex] Extract infrastructure, telemetry, and test tooling (pingdotgg#2994) Co-authored-by: codex <[email protected]> * feat(grok): add Grok CLI provider via ACP (pingdotgg#2809) Co-authored-by: Julius Marminge <[email protected]> * [codex] Fix main CI Effect test runtimes (pingdotgg#3008) Co-authored-by: codex <[email protected]> * Add Claude Fable 5 model (pingdotgg#3009) Co-authored-by: codex <[email protected]> * chore(release): prepare v0.0.26 * [codex] Rebrand T3 Cloud as T3 Connect (pingdotgg#3011) Co-authored-by: codex <[email protected]> * Fix Clerk browser test mock (pingdotgg#3013) Co-authored-by: codex <[email protected]> * chore(release): prepare v0.0.27 * Bundle DM Sans and JetBrains Mono fonts instead of Google Fonts (pingdotgg#3014) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Mute icons in labeled controls and suppress popup focus rings (pingdotgg#3015) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Polish dialog/alert surfaces and unauthenticated provider banner (pingdotgg#3016) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * fix(marketing) : marketing showing wrong icons on linux (pingdotgg#2696) Co-authored-by: Julius Marminge <[email protected]> * Misc markdown styling improvements (pingdotgg#3017) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com> * Model picker UI Improvements, Virtualize Model List (pingdotgg#3021) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Provider env vars table and reworked accent color picker (pingdotgg#3026) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Polish branch picker trigger, scroll fade, and list layout (pingdotgg#3024) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Cursor Agent <[email protected]> * Polish web context menu fallback and sidebar icon actions (pingdotgg#3025) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> * Composer polish: focus ring, send/stop buttons, command menu, context meter, answer panel (pingdotgg#3018) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> * Extract changed files card with compact aligned diff stats (pingdotgg#3023) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]> * ci: fix vp test invocation (-r and --filter are mutually exclusive) --------- Co-authored-by: Adam Buchweitz <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: codex <[email protected]> Co-authored-by: Ibrahim Elkamali <[email protected]> Co-authored-by: Theo Browne <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Yash Singh <[email protected]> Co-authored-by: Mike Olson <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Julius Marminge <[email protected]> Co-authored-by: Guilherme Vieira <[email protected]> Co-authored-by: Abdul Azeez <[email protected]> Co-authored-by: Peter Hozák <[email protected]> Co-authored-by: Ishan <[email protected]> Co-authored-by: Milosz Jankiewicz <[email protected]> Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: Ruzbyte <[email protected]> Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com> Co-authored-by: aaditagrawal <[email protected]>

…#3023) Co-authored-by: ss <[email protected]> Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: codex <[email protected]>

feat(web): extract changed files card with compact aligned diff stats

cad7480

Ported from #2451. Co-authored-by: ss <[email protected]> Co-Authored-By: Claude Opus 4.8 <[email protected]>

github-actions Bot added vouch:trusted Author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Jun 9, 2026

macroscopeapp Bot previously approved these changes Jun 9, 2026

View reviewed changes

juliusmarminge and others added 2 commits June 10, 2026 01:02

Merge branch 'main' into ui/changed-files-card

90bcbb2

fix(web): soften changed files sticky header

dcc52e4

Co-authored-by: codex <[email protected]>

cursor Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread apps/web/src/components/chat/ChangedFilesTree.tsx Resolved

juliusmarminge force-pushed the ui/changed-files-card branch 2 times, most recently from e71be20 to 6335457 Compare June 10, 2026 08:20

macroscopeapp Bot previously approved these changes Jun 10, 2026

View reviewed changes

juliusmarminge force-pushed the ui/changed-files-card branch from 6335457 to aaec49a Compare June 10, 2026 08:22

fix(web): contain changed files sticky header

7a4feab

Co-authored-by: codex <[email protected]>

juliusmarminge force-pushed the ui/changed-files-card branch from aaec49a to 7a4feab Compare June 10, 2026 08:24

juliusmarminge enabled auto-merge (squash) June 10, 2026 08:25

macroscopeapp Bot approved these changes Jun 10, 2026

View reviewed changes

juliusmarminge merged commit 0b40ea6 into main Jun 10, 2026
16 checks passed

juliusmarminge deleted the ui/changed-files-card branch June 10, 2026 08:27

macroscopeapp Bot reviewed Jun 10, 2026

View reviewed changes

kevin-stuart mentioned this pull request Jul 5, 2026

[Feature]: Render Codex inline artifact and edited-files cards in the chat timeline #3704

Closed

2 of 3 tasks

Navigation Menu

Repository navigation

Extract changed files card with compact aligned diff stats - #3023

Extract changed files card with compact aligned diff stats#3023
juliusmarminge merged 4 commits into
mainfrom
ui/changed-files-card

juliusmarminge commented Jun 9, 2026 •

edited by macroscopeapp Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading

Review skipped

Uh oh!

macroscopeapp Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

cursor Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot Jun 10, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	: "inline-grid grid-cols-[4ch_4ch] gap-2 text-right tabular-nums align-middle",
	: "inline-grid grid-cols-[5ch_5ch] gap-2 text-right tabular-nums align-middle",

Conversation

juliusmarminge commented Jun 9, 2026 • edited by macroscopeapp Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Extract changed files into ChangedFilesCard with compact aligned diff stats

🗂️ Filtered Issues

Uh oh!

coderabbitai Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

macroscopeapp Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approvability

Uh oh!

github-actions Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

juliusmarminge commented Jun 9, 2026 •

edited by macroscopeapp Bot

Loading

Extract changed files into `ChangedFilesCard` with compact aligned diff stats

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading

macroscopeapp Bot commented Jun 9, 2026 •

edited

Loading

github-actions Bot commented Jun 9, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading