Agentic UI: Add a file-change Review tab

[shaunandrews]

Related issues

• None. A companion issue was intentionally not opened for this Studio proof of concept.
• Stacked on Agentic UI: Add a changed-file inventory #4594, which independently adds the interactive changed-file inventory on top of Agentic UI: Summarize chat file changes #4590.

How AI was used in this PR

This feature was designed and implemented collaboratively with Codex. AI helped explore several review surfaces, implement the transcript-derived diff view, add tests, and exercise the production build. The interaction and visual design were iterated manually in the running agentic UI.

Executive summary

This is the third PR in a three-PR stack. #4590 adds the display-only change summary, and #4594 adds the per-file inventory. This follow-up adds an optional Review destination to the existing Preview surface, giving larger diffs enough space without replacing the conversation, composer, or live site preview state.

The inventory gains a Review changes action that opens the Preview panel and selects Review. Review presents each file as a collapsible section in a single scrolling column, with bounded previews and lightweight previous/next navigation.

Proposed Changes

• Add Review as an optional destination alongside the existing Preview destinations when the current chat has file changes.
• Let people move naturally from the pill's per-file inventory into the full review surface.
• Present changed files as a single-column, collapsible list so scanning follows the normal vertical reading flow.
• Keep the first file expanded, cap initial previews at 40 lines, and offer Show more/Show less without allowing unbounded DOM growth.
• Provide a compact floating previous/next control for moving between changed files.
• Preserve preview continuity by keeping the site webview mounted while Review is visible; returning to Site reveals the same live preview.
• Keep the conversation and composer in place throughout review.

Review guide

1. Stacked boundary

Review #4590 and #4594 first. They independently own change derivation, localized totals, composer integration, and the interactive file inventory. This PR should contain only the Review destination and the transition into it.

2. Relationship to Preview

Please focus on whether Review feels like a natural peer to Site, WP Admin, and Database. Selecting Review hides—but does not unmount—the preview webview. Selecting any site destination returns immediately to the warm preview.

3. Diff scanability

Files appear in transcript order. The first is expanded; other sections can be opened independently. Initial previews show 40 lines. Expanded diffs render at most 5,000 lines, retaining both the beginning and end when a diff exceeds the cap.

4. Change semantics

The view reconstructs successful Edit and Write activity already stored in the session transcript. Repeated edits to one path are shown consecutively and their counts are aggregated. This is a record of agent activity in the chat, not a reconciliation against Git's current working tree.

Screenshots

Native 2560×1440 PNG captures at 100% page scale and 2× device scale, captured from the rebuilt third layer of the stack.

Light	Dark

Known tradeoffs and follow-ups

• The custom renderer does not yet provide syntax highlighting, intra-line highlighting, side-by-side mode, or Git working-tree reconciliation.
• Only built-in Edit and Write tool activity is represented. File mutation through shell commands or WordPress-specific tools remains outside this proof of concept.
• Expansion and navigation state are intentionally in-memory.
• Inline comments and GitHub-style batched review feedback are not part of this PR. The goal here is a focused read-only review surface.

Safety checklist

• No new runtime dependency or external service.
• No migration or mutation of user-owned project data.
• Session JSONL remains the source of truth and is not modified by the viewer.
• Diff content is rendered as React text, not injected HTML.
• Initial previews and expanded large diffs have bounded DOM sizes.
• The site preview stays mounted and retains its current location while Review is visible.
• The default conversation and composer are not replaced.
• The feature is isolated to the agentic UI.

Testing Instructions

1. Check out Agentic UI: Summarize chat file changes #4590, then Agentic UI: Add a changed-file inventory #4594, then this PR, and launch Studio's agentic UI.
2. Open a chat associated with a local site and make changes to multiple files, including one change longer than 40 diff lines.
3. Select the change pill, confirm its file inventory remains available, then choose Review changes.
4. Confirm the Preview panel opens on Review while the chat and composer remain unchanged.
5. Expand and collapse several files. Verify filenames, paths, and localized addition/deletion counts remain readable and correctly associated.
6. Use the floating previous/next controls and confirm the corresponding file expands and scrolls into view.
7. Use Show more/Show less on a long change and confirm the page remains responsive.
8. Select Site, WP Admin, or Database and confirm the live preview returns without reloading or losing its prior location. Select Review again from the Preview toolbar.
9. Repeat in light and dark appearances.
10. Repeat in a representative RTL locale such as Hebrew or Arabic. Verify the surrounding controls mirror while paths, line counts, and diff content remain LTR and truncate without clipping.

Automated verification completed locally:

• npx eslint --fix on every modified TypeScript/TSX file
• npm test -- apps/ui/src/ui-classic/components/session-view/changes-tracker.test.tsx apps/ui/src/ui-classic/components/session-view/index.test.tsx apps/ui/src/hooks/use-session-ui.test.tsx apps/ui/src/components/site-preview/index.test.tsx apps/ui/src/components/site-preview/address-bar.test.tsx — 5 files and 107 tests passed
• npm run typecheck
• npm run cli:build:ui
• git diff --check

Pre-merge Checklist

• Have you checked for TypeScript, React, or other console errors?
• Verified the Review flow in the agentic UI.
• Verified light and dark appearances.
• Verified representative RTL behavior and mixed-direction paths/counts.
• Verified long-diff preview and rendering caps.
• Confirmed Agentic UI: Add a changed-file inventory #4594 remains useful without this follow-up.
• Confirm the product direction before promoting this proof of concept from draft.