Skip to content

feat(web): add a file tree to the diff panel and pull request code tab - #9330

Merged
juliusmarminge merged 3 commits into
mainfrom
t3code/diff-file-tree-navigation
Sep 3, 2026
Merged

feat(web): add a file tree to the diff panel and pull request code tab#9330
juliusmarminge merged 3 commits into
mainfrom
t3code/diff-file-tree-navigation

fix(web): reveal a diff tree file again after it leaves and returns

5ea691d
Select commit
Loading
Failed to load commit list.
MacroscopeApp / Macroscope - UI Consistency succeeded Sep 3, 2026 in 3m 13s

UI Consistency: No issues found

All clear

Details

Note

Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.

Reviewed the changed .tsx lines in apps/web/src (components/DiffPanel.tsx, components/diffs/DiffFileTree.tsx, components/pullRequest/PullRequestCodeTab.tsx, components/files/FileBrowserPanel.tsx).

  • Shared primitives: the new toolbar toggles use Toggle + Tooltip, and the tree header/footer controls use Button with existing size/variant values (icon-xs, xs, ghost, outline); no raw styled controls and no overrides of primitive height, radius, focus ring, or base colors.
  • Global CSS / inline styles: no new .css rules. pierre-tree-theme.ts moves the previously inline shadow-root CSS into a shared constant; both unsafeCSS and pierreTreeStyle target a Pierre shadow root and carry runtime theme values, which Tailwind cannot express at the owner.
  • Composition: DiffFileTree is a new shared component consumed by both hosts rather than duplicated markup; the header row reuses the established data-surface-subheader class string, matching the earlier resolved finding.
🔍 Agent activity — 3 tool calls

💭 I'm checking the changed files for UI consistency now that the earlier issue was fixed. I want to verify whether the button size variants like "xs" and "icon-xs" actually exist in the component library, and whether the Toggle usage matches existing patterns elsewhere in the codebase.

1. browse_code — In apps/web/src/components/ui/button.tsx, list the available size variants (e.g. is there "xs", "icon-xs", "icon-micro"?) and variants. Also in ui/toggle.tsx list available size and variant props.

2. browse_code — apps/web/src/components/diffs/DiffFileTree.tsx

💭 I'm noticing that large class string in the header row is now duplicated verbatim from FileBrowserPanel and other components, which fits the pattern for flagging shared-treatment duplication per rule 3 — worth considering as a real finding rather than dismissing it. Actually, checking further, the footer and toggle usages in PullRequestCodeTab look fine, and the inline pierreTreeStyle is an allowed theme-variable exception. No new CSS files appear, and the aside layout classes are just structural, so those are clean. I want to check whether a shared subheader primitive like SurfaceSubheader already exists before deciding how to flag the duplication.

3. browse_code — Is there a shared subheader component or class helper for data-surface-subheader rows in apps/web/src/components (e.g. used by FileBrowserPanel, FilePreviewPanel, PreviewChromeRow, DiffPanelShell)? Show how each defines its subheader row classes.

💭 This duplication is a pre-existing pattern rather than something newly introduced, so flagging it would just be scope creep—I'll leave it alone. Everything else already relies on primitives, so I'm done here.

Agent Credits: 92 credits

Token usage: 24 uncached input · 226,961 cache-read input · 95,541 cache-write input · 6,436 output
Agent Credits may also include non-token charges from external tools such as web research.

View more details on MacroscopeApp