Show Tool Calls having data part in UI#142
Show Tool Calls having data part in UI#142SathishKumarRamasamy wants to merge 4 commits intoa2aproject:mainfrom
Conversation
Summary of ChangesHello @SathishKumarRamasamy, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the A2A Inspector's user interface by enabling the proper display and formatting of function calls and responses, which were previously shown as raw JSON or ignored. By introducing dedicated rendering logic and visual styling, the inspector now provides a much clearer and more intuitive view of agent interactions, making it easier to debug and understand complex tool-based conversations. Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request introduces significant enhancements to the A2A Inspector UI, specifically improving the display of function calls and responses (DataParts). Previously, these were shown as raw JSON or ignored, but now they are presented in a user-friendly, formatted manner with distinct styling. New helper functions (formatFunctionCall, formatFunctionResponse, formatStructuredData) have been added to script.ts to handle the intelligent detection and rendering of different DataPart types. The status-update event handler has been updated to process all parts of a message, not just text. Additionally, a new CSS file (tool-styles.css) has been added to provide custom styling, including dark mode support and animations, for these new UI elements. The index.html file has been updated to link this new CSS file. Overall, these changes greatly improve the usability and clarity of the A2A Inspector for debugging and understanding agent behavior.
| **Created**: 2026-02-22 | ||
| **Author**: Cline AI Assistant | ||
| **Version**: 1.0.0 |
There was a problem hiding this comment.
It is best practice to avoid hardcoding dates, authors, or versions directly into documentation files like this. This information can quickly become outdated and lead to maintenance overhead. Consider using a dynamic system or a separate changelog for versioning and authorship.
| .map(([key, value]) => { | ||
| const sanitizedKey = DOMPurify.sanitize(key); | ||
| const sanitizedValue = DOMPurify.sanitize(JSON.stringify(value)); | ||
| return `<div class="tool-arg">├─ <span class="arg-key">${sanitizedKey}:</span> <span class="arg-value">${sanitizedValue}</span></div>`; | ||
| }) | ||
| .join(''); | ||
| argsHtml = `<div class="tool-args">${argsList}</div>`; |
There was a problem hiding this comment.
The JSON.stringify(value) call for sanitizedValue might produce a string that includes quotes around primitive types (e.g., "15" instead of 15). This could make the output less readable for simple values. Consider checking the type of value and only stringifying complex objects, or using a more sophisticated pretty-printing function that handles primitives gracefully.
const sanitizedValue = DOMPurify.sanitize(typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value));| .map(([key, value]) => { | ||
| const sanitizedKey = DOMPurify.sanitize(key); | ||
| const sanitizedValue = DOMPurify.sanitize(JSON.stringify(value, null, 2)); | ||
| return `<div class="tool-arg">└─ <span class="arg-key">${sanitizedKey}:</span> <span class="arg-value">${sanitizedValue}</span></div>`; | ||
| }) | ||
| .join(''); | ||
| responseHtml = `<div class="tool-response-content">${responseList}</div>`; |
There was a problem hiding this comment.
Similar to the formatFunctionCall function, JSON.stringify(value, null, 2) for sanitizedValue might add unnecessary quotes around primitive values, affecting readability. A more nuanced approach to stringification could improve the display.
const sanitizedValue = DOMPurify.sanitize(typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) : String(value));| const combinedContent = allContent.join(''); | ||
| const kindChip = `<span class="kind-chip kind-chip-status-update">${event.kind}</span>`; | ||
| const messageHtml = `${kindChip} ${combinedContent}`; |
There was a problem hiding this comment.
The kindChip is currently prepended to the combinedContent without any spacing, which might lead to poor readability in the UI. Adding a non-breaking space or a small margin between the chip and the content would improve the visual separation.
const combinedContent = allContent.join('');
const kindChip = `<span class="kind-chip kind-chip-status-update">${event.kind}</span>`;
const messageHtml = `${kindChip} ${combinedContent};`1 participant
No description provided.