Skip to content

Agentic UI: Add a changed-file inventory - #4594

Draft
shaunandrews wants to merge 1 commit into
add-chat-change-summaryfrom
add-chat-change-inventory
Draft

Agentic UI: Add a changed-file inventory#4594
shaunandrews wants to merge 1 commit into
add-chat-change-summaryfrom
add-chat-change-inventory

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

This feature was designed and implemented collaboratively with Codex. AI helped separate the interactive inventory from the summary foundation, implement and test the popover behavior, and verify the result in light, dark, LTR, and RTL layouts. The interaction and visual result were reviewed manually in the running agentic UI.

Executive summary

This is the second PR in a three-PR stack. It turns the display-only change summary from #4590 into an interactive control and adds a lightweight per-file inventory. It intentionally stops before rendering diffs or introducing the Review destination.

Proposed Changes

  • Make the chat change-summary pill interactive, keyboard accessible, and discoverable with a tooltip.
  • Open a non-modal inventory with each changed filename, directory context, and localized addition/deletion counts.
  • Keep filenames visible on their own line while long directories truncate responsively in the middle.
  • Align the inventory's inline-end edge with the pill in both LTR and RTL layouts.
  • Bound longer inventories to six complete rows before scrolling so the viewport does not clip through a partially visible file row.

Review guide

The product boundary is deliberate: this PR answers “which files changed?” without trying to show the changes themselves. The next PR adds the Review action and full diff surface.

Please focus on the popover's keyboard behavior, path readability, six-row scroll boundary, mixed-direction content, and whether the transition from a glanceable summary to a per-file inventory feels appropriately lightweight.

Safety and scope

  • No new runtime dependency or external service.
  • No mutation of project files or the session transcript.
  • The popover is non-modal, keyboard dismissible, and built from existing @wordpress/ui primitives and theme tokens.
  • Only successful built-in Edit and Write activity from the stored transcript is represented.
  • This PR contains no diff renderer, Preview destination, or Review action.

Screenshots

Native 2560×1440 PNG captures at 100% page scale and 2× device scale. The inventory shows exactly six complete rows before scrolling and intentionally contains no Review action.

Light Dark
Changed-file inventory in light mode Changed-file inventory in dark mode

Testing Instructions

  1. Check out Agentic UI: Summarize chat file changes #4590, then this PR, and launch Studio's agentic UI.
  2. Open a chat with changes to more than six files.
  3. Select the change-summary pill and confirm the file inventory opens above it.
  4. Verify six complete rows are visible before scrolling and no filename or directory line is clipped by the bottom edge.
  5. Confirm each filename is visible on the first line, the directory appears below, and long directories truncate in the middle.
  6. Confirm localized addition/deletion counts remain associated with the correct file.
  7. Dismiss the inventory with Escape and by selecting outside it.
  8. Repeat in light and dark appearances and in a representative RTL locale such as Hebrew or Arabic.

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 — 2 files and 23 tests passed
  • npm run typecheck
  • npm run cli:build:ui
  • git diff --check

Manual browser measurement: the inventory viewport is 288px high, containing six complete 48px rows. The seventh row begins exactly at the scroll boundary, so no partial row is visible.

Pre-merge Checklist

  • Have you checked for TypeScript, React, or other console errors?
  • Verified the popover with more than six changed files.
  • Verified complete-row scrolling and responsive path truncation.
  • Verified light and dark appearances.
  • Verified representative RTL behavior and mixed-direction paths/counts.
  • Confirmed Agentic UI: Summarize chat file changes #4590 remains useful without this PR.
  • Confirm the product direction before promoting this proof of concept from draft.

@shaunandrews
shaunandrews force-pushed the add-chat-change-inventory branch from 58b3c6b to 2f002d7 Compare August 18, 2026 16:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant