feat(ai-agents): add agent card tab and improve inspector UI#2166
Merged
feat(ai-agents): add agent card tab and improve inspector UI#2166
Conversation
- Add dedicated Agent Card tab to view and edit A2A discovery metadata - Add context ID display with copy button in chat header - Fix CopyButton hover animation causing visual shift - Add StringArrayInput component for editing tag arrays - Remove agent card config from create page (requires stepper UI) Agent card configuration on create will be added later with a proper multi-step form wizard to handle the complexity.
Fix multiple linting issues in agent chat and inspector components: - Remove unnecessary fragment wrapper in context ID header - Fix className ordering violations (Biome enforces alphabetical order) - Move useState hooks to component top level before early returns (React rules) - Replace nested ternary with explicit if-else for dialog content states - Fix potential leaked render by using Boolean() instead of && The hook placement fix prevents potential bugs where React would lose state tracking across renders. The nested ternary refactor improves readability without changing behavior.
Replace hardcoded commit SHA with refs/heads/main now that the SDK examples PR is merged. The code snippets are fetched from the how-to-connect-code-snippets repository for display in the Agent Card tab.
Comment on lines
46
to
52
| <button | ||
| className="ml-1 rounded-full p-0.5 hover:bg-muted" | ||
| onClick={() => removeItem(index)} | ||
| type="button" | ||
| > | ||
| <X className="h-3 w-3" /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
Let's use a redpanda UI button component instead with the proper variant.
Contributor
Author
There was a problem hiding this comment.
Done. Using Button with variant="ghost" and size="icon".
| import { Loader } from 'components/ai-elements/loader'; | ||
| import { Badge } from 'components/redpanda-ui/components/badge'; | ||
| import { CopyButton } from 'components/redpanda-ui/components/copy-button'; | ||
| import { Fingerprint } from 'lucide-react'; |
Contributor
There was a problem hiding this comment.
use components/icons barrel file that's acting as the source of truth for icons instead of importing directly from lucide-react
Contributor
Author
There was a problem hiding this comment.
Done. Added FingerprintIcon to the barrel file and updated the import.
Comment on lines
708
to
714
| create(AIAgent_AgentCard_SkillSchema, { | ||
| id: skill.id.trim(), | ||
| name: skill.name.trim(), | ||
| description: skill.description.trim(), | ||
| tags: skill.tags.filter((t: string) => t.trim()), | ||
| examples: skill.examples.filter((e: string) => e.trim()), | ||
| }) |
Contributor
There was a problem hiding this comment.
instead of having to trim every single part of the skill, can we have a transform function or some kind of sanitizer to ensure skill has the right format right away?
Contributor
Author
There was a problem hiding this comment.
Done. Added sanitizeSkill() helper that trims strings and filters empty array entries.
- Use Redpanda UI Button component in StringArrayInput instead of raw button element for consistent styling and behavior - Import Fingerprint icon from components/icons barrel file instead of directly from lucide-react to follow project conventions - Add sanitizeSkill() helper function to centralize skill data transformation instead of inline trimming in handleSave
malinskibeniamin
approved these changes
Jan 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Add Agent Card tab to AI agent details page for viewing and editing A2A discovery metadata. Improve inspector UI with context ID display and copy functionality. Fix CopyButton hover animation issue.
Why
Users need to view and configure agent card metadata (skills, provider info, documentation URLs) for A2A protocol discovery. The existing UI lacked this capability entirely.
The CopyButton hover animation (scale 1.05) caused visual "jumping" on small icon buttons, degrading UX.
Implementation details
Agent Card Tab: New tab in agent details showing:
Inspector improvements:
Deferred work: Agent card configuration removed from create page. This requires a multi-step form wizard (stepper UI) to handle the complexity properly. Will be added in a follow-up PR.
References
recording_1769002671.mp4