Skip to content

STU-1873: Add tool call detail panel - #3904

Merged
shaunandrews merged 7 commits into
trunkfrom
stu-1873-add-tool-detail-panel
Jun 24, 2026
Merged

STU-1873: Add tool call detail panel#3904
shaunandrews merged 7 commits into
trunkfrom
stu-1873-add-tool-detail-panel

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Jun 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
image image

Related issues

How AI was used in this PR

I used AI assistance to port the tool-row presentation from the older exploration branch onto current trunk, keep the scope limited to the classic Agentic UI transcript, and add regression tests. I reviewed the final diff, updated the branch after #3903 landed, ran automated checks, and verified the UI in light and dark modes with a temporary Vite harness.

Proposed Changes

  • Makes classic Agentic UI tool calls easier to scan by showing an icon, a human-readable label, and a compact detail.
  • Lets users expand a tool row to inspect the command/input and output without long output taking over the transcript.
  • Keeps Ask User questions from rendering a duplicate raw tool row, so the custom question UI remains the only visible prompt.

Testing Instructions

  • Run npm test -- tools/common/ai/tests/tools.test.ts apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts.
  • Run npm run typecheck.
  • In classic Agentic UI, trigger tool calls such as WP-CLI and Bash, then click the tool rows to confirm input/output appears inside a bounded scrollable details panel.
  • Check the tool rows and expanded details in both light and dark color schemes.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
This was referenced Jun 19, 2026
Merged
Closed
Base automatically changed from stu-1873-improve-tool-descriptions to trunk June 22, 2026 20:16
@shaunandrews
Merge remote-tracking branch 'origin/trunk' into stu-1873-add-tool-de…
0f2a06d 
…tail-panel

# Conflicts:
#	apps/ui/src/ui-classic/components/session-view/conversation/index.tsx
#	apps/ui/src/ui-desks/chats/conversation/index.tsx
#	tools/common/ai/tests/tools.test.ts
#	tools/common/ai/tools.ts
@shaunandrews
shaunandrews marked this pull request as ready for review June 22, 2026 20:27
@shaunandrews
shaunandrews requested review from a team and bcotrim June 22, 2026 20:27
@wpmobilebot

wpmobilebot commented Jun 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 7312d05 vs trunk

app-size

Metric trunk 7312d05 Diff Change
App Size (Mac) 2344.38 MB 2344.39 MB +0.02 MB ⚪ 0.0%

site-editor

Metric trunk 7312d05 Diff Change
load 1066 ms 1046 ms 20 ms ⚪ 0.0%

site-startup

Metric trunk 7312d05 Diff Change
siteCreation 6512 ms 6507 ms 5 ms ⚪ 0.0%
siteStartup 6992 ms 7487 ms +495 ms 🔴 7.1%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)
katinthehatsite
katinthehatsite reviewed Jun 23, 2026
View reviewed changes
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/index.tsx
katinthehatsite
katinthehatsite reviewed Jun 23, 2026
View reviewed changes
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/index.tsx
bcotrim
bcotrim reviewed Jun 23, 2026
View reviewed changes

@bcotrim bcotrim left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solid, well-scoped PR — does exactly what STU-1873 part 2 calls for, and I didn't find any functional issues. A few non-blocking nits below; NIT 1 (helper duplication) is the only one I'd nudge on. 🙌
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/index.tsx Outdated
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/index.tsx Outdated
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/index.tsx Outdated
Comment thread apps/ui/src/ui-classic/components/session-view/conversation/style.module.css
@shaunandrews
shaunandrews requested review from a team, bcotrim and katinthehatsite June 23, 2026 15:54
bcotrim
bcotrim approved these changes Jun 24, 2026
View reviewed changes

@bcotrim bcotrim left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍
@shaunandrews
shaunandrews merged commit e7ce5c5 into trunk Jun 24, 2026
11 checks passed
@shaunandrews
shaunandrews deleted the stu-1873-add-tool-detail-panel branch June 24, 2026 12:57
shaunandrews added a commit that referenced this pull request Jun 29, 2026
@shaunandrews
STU-1874: Improve Ask User option rendering (#3905)
d42540c 
<img width="505" height="234" alt="image"
src="https://github.com/user-attachments/assets/339b60c7-98e1-4fbf-a4f7-f51df1d3eb46"
/>
<img width="497" height="324" alt="image"
src="https://github.com/user-attachments/assets/53cec4e8-d2c6-45b8-aec8-88d4f9f38867"
/>
<img width="495" height="272" alt="image"
src="https://github.com/user-attachments/assets/e686370b-6d32-47a3-a9bf-681218bcdd45"
/>
<img width="554" height="413" alt="image"
src="https://github.com/user-attachments/assets/0dde2d35-ecb1-484f-9fff-2c71915989d6"
/>




## Related issues

- Fixes
[STU-1874](https://linear.app/a8c/issue/STU-1874/studio-agentic-ui-improve-ask-user-option-rendering)
- Stacked on #3904

## How AI was used in this PR

Codex implemented the scoped Ask User rendering changes, added tests for
historical answer handling, and ran the verification commands below. I
reviewed the diff and adjusted the live answer cache update to avoid
touching older duplicate questions.

## Proposed Changes

- Makes Ask User choices read as an ordered list with visible option
descriptions, so users can compare the available choices without relying
on hidden title text.
- Adds a batched-question flow that shows one active question at a time,
keeps answered questions as compact summaries, and lets users revisit
earlier answers while the batch is still pending.
- Keeps selected Ask User answers visible after submission and when
reviewing historical sessions, including multi-question batches whose
answers are stored as `ask_user` prompts.
- Improves the batched-question handoff with selected-answer
acknowledgement, reduced layout bounce, and scroll clearance so the next
question and options stay comfortably above the composer.
- Preserves accessible button semantics with `aria-pressed` for selected
choices and description text connected via `aria-describedby`.

## Testing Instructions

- `npx eslint --fix apps/ui/src/data/queries/use-agent-run.tsx
apps/ui/src/ui-classic/components/session-view/conversation/index.tsx
apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts
tools/common/ai/sessions/entry-types.ts
apps/ui/src/ui-classic/components/session-view/conversation/style.module.css`
- CSS module reports the expected "File ignored because no matching
configuration was supplied" warning.
- `npm run typecheck`
- `npm test -- tools/common/ai/tests/tools.test.ts
apps/cli/ai/tests/ui.test.ts
apps/ui/src/ui-desks/chats/conversation/index.test.ts
apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts`
- Verified the Ask User option list in both light and dark themes with a
temporary Vite harness and Playwright screenshots.

## Pre-merge Checklist

- [x] Have you checked for TypeScript, React or other console errors?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

4 participants

@shaunandrews @wpmobilebot @bcotrim @katinthehatsite