#20780 Agent pane: calm the changed-files card and diff (cx-ncc.99)

Leo on the agent pane's changed-files card and diff: "the styling is no bueno … too big / too tonka toys." This brings both to Codex/Claude desktop restraint: nothing bold, smaller type, compact rows, hairline rims, terminal-sized diff lines.

Edited files card (conversation/EditedFilesCard.tsx, styles.css, turnChanges/turnChanges.css)

• File names 600 → 400 and the title 500 → 400. Nothing in the card is heavier than regular.
• Paths use the chat's monospace (--cv-code-font / --cv-mono) at --text-detail (12px), with the folder muted and the name in the text color. Leo asked for mono; Codex and Claude use sans here.
• Rows 34 → 26px, "Show N more" 34 → 26px with its filled band removed, and the head 58 → 36px. The 36px icon tile becomes a 14px muted glyph, and the totals move onto the title line.
• View changes: 28px filled rect (radius 8) → 22px hairline rect (radius 6) at detail size. Undo, Cancel and the collapse chevron are 22px (radius 6) text buttons.
• The card has one 1px --agent-border rim (was --agent-border-strong), radius 9 → 8, and a 2% fill (was 3%, with a 5% head band). The card is flush with the reply text, and a guard test keeps it there.

Diff (diffTheme.ts, which covers the changes view and the inline edit diffs; changes/FileHeader via styles.css)

• Code lines 12/21.6 → 12/18px, separator rows 32 → 24px, and add/remove tints 20%/10% → 14%/8%.
• The font family, size and line height read --cmux-diff-code-font-family / --cmux-diff-font-size / --cmux-diff-line-height, the variables appearance.ts sets from the terminal font. The agent pane's theme doesn't carry the terminal font yet, so the pane still draws the mono stack at 12/18. cx-ncc.100 tracks sending it from AgentPaneTheme.swift.
• File header 36 → 30px. The name is mono at detail size, regular weight. The New/Deleted/Edit N of M/outside badges are plain muted text instead of filled pills.

The type-scale baseline drops by 7 raw font sizes (styles.css 74 → 71, turnChanges.css 4 → 0).

Tests

webviews/test/agent-pane-edited-calm.test.ts (browser, against the pane's dev entry and a stand-in daemon) asserts:

• in the card and file header, no weight above 500, file names at 400, mono paths and tabular counts;

• rows ≤ 28px, the head ≤ 40px, View changes ≤ 24px, and no glyph tile;

• radius ≤ 8 and rims/borders ≤ 1px;

• the card's left edge on the reply text's left edge;

• a file header ≤ 30px with a transparent badge, and diff lines ≤ 12px font and ≤ 19px tall.

• Red on 846a529e0f9f88bd4e102aa7cd6e3de2629d646b (react-apps-check): file names at weight 600, card radius 9, file header 36px. The left-edge test already passed, so it is a guard.

• Green on fd9449a41ecadf312ad267cc41d0ca3e28f35596: react-apps-check passes, with agent-pane-edited-calm.test.ts PASS. Three "cmux-next checks" reds are base reds in files this PR doesn't touch: state roots in chief_brains.rs (f8e4efc5), concurrency in IdleOwnerRestart.swift (c6390e5a), and the script-tests crash-report test.

References

Codex desktop (card structure, muted dir and primary filename, quiet "N unmodified lines" rows):

The card is a header (icon, "Edited 4 files", +N/−N, Undo, a hairline View changes button), then one row per file with a muted directory, the filename in the text color, and right-aligned +N/−N, then "Show N more files". The diff uses a sans file header, muted line numbers and folded "N unmodified lines" rows. The reference stills are kept in the team's private reference repos (not public).

Claude desktop: an inline one-line "Created file +14 -0" summary that expands to a tight mono diff with no hunk headers. There is no T3 capture of this surface.

Borrowed

• shadcn AI Elements: one line per step, nested items shown by expansion, a small code block for nested output, and restraint in weights.
• Codex: the card structure (header, rows, Show N more) and the muted directory before the primary filename.
• Claude: overall restraint and a tighter diff.

Captures

Real cmux NEXT DEV builds on a capture mini (before = feat-cmux-next 7742bb59, after = this PR's fd9449a4), with a test-harness chat in a small git project: turn 1 edits one file, turn 2 edits nine (one of them new). Panes are cropped to the chat: narrow is about 520px, wide about 1180px.

Inline edit diff, opened in the transcript

	Before	After
narrow, light
narrow, dark
wide, light
wide, dark

Edited 9 files card, collapsed

	Before	After
narrow, light
narrow, dark
wide, light
wide, dark

Edited 9 files card, with Show 4 more open

	Before	After
narrow, light
narrow, dark
wide, light
wide, dark

View changes: in the app, View changes on a local chat opens the folder's git changes pane beside the chat. That's diff-viewer, which this PR doesn't change, and before and after looked the same there. The in-place diff panel this PR restyles shows only for remote and Quick Chat chats, so it's shown below from the gallery. No gallery variant has a created file, so the New label is not pictured.

Gallery extras (before left, after right): agent-pane.edited-files three-files and fourteen-files-expanded, agent-pane.diff-panel last-turn, at 520 and 1180

edited-files / three-files

edited-files / fourteen-files-expanded

diff-panel / last-turn

Changelog

Changed: The agent pane's changed-files card and diff are smaller and calmer: regular weights, monospace paths, compact rows, hairline buttons and terminal-sized diff lines.

🤖 Generated with Claude Code