feat(inspector): Agent View Tool Call UX Improvements #136
Conversation
- Add optional reasoning field to CallToolInput schema - Render reasoning text above tool call details with typing animation (chatbot-style streaming reveal using requestAnimationFrame) - Add ↑ arrow icon for tool-call (input) and ↓ for tool-result (output) - Remove redundant AGENT badge from individual log entries in agent view (isAgentView prop on EventRow, passed from AgentPanel) - Visually differentiate input/output sections with tinted backgrounds (blue-tinted for input, green-tinted for output) and colored left borders - Reasoning field is optional — gracefully hidden when missing/empty - Forward reasoning from MCP tool call params to agent event payload - Add reasoningReveal and reasoningCursorBlink CSS keyframes Closes TASK-005
📝 WalkthroughSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughPasses an Changes
Sequence DiagramsequenceDiagram
participant User
participant AgentPanel
participant EventRow
participant StandaloneServer
participant ReasoningBubble
participant Renderer
User->>AgentPanel: Open agent events view
AgentPanel->>EventRow: Render row (isAgentView=true)
StandaloneServer->>EventRow: (earlier) emit event with optional reasoning
EventRow->>EventRow: Parse event payload -> extract reasoning
alt reasoning present
EventRow->>ReasoningBubble: Instantiate with text, CHARS_PER_SECOND
ReasoningBubble->>Renderer: Animate reveal + cursor blink
Renderer->>User: Show incremental reasoning text
end
EventRow->>Renderer: Render payload JSON (tinted if agent input/output) and arrow icon
Renderer->>User: Display full event row
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
Code Review: Agent View Tool Call UX ImprovementsOverall AssessmentAPPROVED ✅ This PR successfully enhances the inspector dashboard's agent view with improved tool call visualization. The implementation is clean, follows TypeScript best practices, and aligns well with the repository's standards outlined in AGENTS.md. Code Quality & Best Practices✅ Strengths
Potential Issues & Suggestions
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/inspector/src/dashboard/react/components/EventRow.tsx (1)
150-256:⚠️ Potential issue | 🟡 MinorPrevent reasoning animation from restarting on re-renders.
onAnimationDoneis created inline, so the ReasoningBubble effect re-runs on parent re-renders (e.g., hover), which can restart the typing animation mid-stream.Suggested fix (stable callback)
// Track whether reasoning animation already played (persists across collapse/expand) const reasoningAnimatedRef = useRef(false); + const handleReasoningDone = useCallback(() => { + reasoningAnimatedRef.current = true; + }, []); @@ {reasoning && ( <ReasoningBubble text={reasoning} skipAnimation={reasoningAnimatedRef.current} - onAnimationDone={() => { - reasoningAnimatedRef.current = true; - }} + onAnimationDone={handleReasoningDone} /> )}
Code Review - PR #136: Agent View Tool Call UX Improvements✅ Overall AssessmentThis PR successfully enhances the inspector dashboard's agent view with improved tool call visualization. The implementation is well-structured, type-safe, and follows repository conventions. The changes are focused and deliver clear value with minimal surface area. 🎯 Strengths
🔍 Code Quality ObservationsEventRow.tsx (packages/inspector/src/dashboard/react/components/EventRow.tsx:83-145)
standalone-server.ts (packages/inspector/src/standalone-server.ts:769-775)
styles.ts (packages/inspector/src/dashboard/react/styles.ts:1128-1210)
🧪 Test CoverageCurrent State:
Recommendation:
This is not a blocker for this PR, but worth tracking for future work. 🛡️ Security ConsiderationsNo security concerns identified:
⚡ Performance ConsiderationsExcellent performance characteristics:
Minor optimization opportunity (non-blocking):
📐 Architectural AlignmentAdheres to repository standards:
File Structure:
🎨 UI/UX QualityVisual Design:
User Experience:
🐛 Potential IssuesNone identified. The code is production-ready. Nitpick (cosmetic, non-blocking):
📋 Checklist Compliance
🚀 RecommendationAPPROVE ✅ This PR demonstrates high code quality, thoughtful UX design, and careful attention to performance. The implementation is type-safe, maintainable, and aligns with repository standards. The acknowledged test gap is a pre-existing infrastructure limitation, not a flaw in this PR. Minor suggestion for follow-up (not blocking):
Great work on the typing animation implementation—it adds meaningful polish to the agent view! 🎉 Files Reviewed: 6/6
|
1 participant
Summary
Improve the inspector dashboard agent view with better tool call visualization.
Changes
reasoning?: stringtoCallToolInput. LLMs can explain why they're calling a tool. Server forwards it into agent event payloads.ReasoningBubblecomponent renders reasoning text above tool calls with a rAF-based character-by-character reveal animation (120 chars/sec) + blinking cursor. Animation only plays once per event (persists viauseRef).isAgentViewprop onEventRowconditionally hides it.Files Changed (6)
tool-types.ts—reasoning?: stringonCallToolInputstandalone-server.ts— Forward reasoning into agent event payloadEventRow.tsx— ReasoningBubble, arrow icons, tinted sections, isAgentViewAgentPanel.tsx— PassisAgentViewtoEventRowkeyframes.css— reasoningReveal + reasoningCursorBlink animationsstyles.ts— 11 new style entries, extractedeventPayloadBaseReview Notes
Closes: TASK-005