feat(ai-agents): add agent card tab and improve inspector UI (#2166)

* feat(ai-agents): add agent card tab and improve inspector UI

- 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(frontend): address Biome linting violations in agent UI components

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.

* fix(ai-agents): point A2A SDK examples to main branch

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.

* fix(frontend): address PR review feedback

- 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

Author: birdayz

frontend/src/components/icons/index.tsx

@@ -53,6 +53,7 @@ export {
   Eye as EyeIcon, // IoMdEye, EyeIcon (Heroicons)
   EyeOff as EyeOffIcon, // IoMdEyeOff, MdOutlineVisibilityOff, EyeOffIcon (Heroicons), EyeClosedIcon (Octicons)
   Filter as FilterIcon, // FilterIcon (Heroicons)
+  Fingerprint as FingerprintIcon, // Fingerprint icon for context IDs
   Flame as FlameIcon, // MdLocalFireDepartment
   HelpCircle as HelpIcon, // MdHelpOutline, MdOutlineQuestionMark
   Home as HomeIcon, // HomeIcon (Heroicons)

frontend/src/components/pages/agents/details/a2a/chat/ai-agent-chat.tsx

@@ -13,6 +13,9 @@
 
 import { Conversation, ConversationContent, ConversationEmptyState } from 'components/ai-elements/conversation';
 import { Loader } from 'components/ai-elements/loader';
+import { FingerprintIcon } from 'components/icons';
+import { Badge } from 'components/redpanda-ui/components/badge';
+import { CopyButton } from 'components/redpanda-ui/components/copy-button';
 import { useCallback, useEffect, useRef } from 'react';
 
 import { ChatInput } from './components/chat-input';
@@ -22,7 +25,7 @@ import { useChatMessages } from './hooks/use-chat-messages';
 import { useCumulativeUsage } from './hooks/use-cumulative-usage';
 import type { AIAgentChatProps } from './types';
 
-export const AIAgentChat = ({ agent }: AIAgentChatProps) => {
+export const AIAgentChat = ({ agent, headerActions }: AIAgentChatProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -86,10 +89,27 @@ export const AIAgentChat = ({ agent }: AIAgentChatProps) => {
     <div className="flex h-[calc(100vh-210px)] flex-col" ref={containerRef}>
       {/* Context ID header */}
       {Boolean(contextId) && (
-        <div className="shrink-0 border-b bg-muted/30 px-4 py-2">
-          <div className="flex gap-1.5 text-muted-foreground text-xs">
-            <span className="font-medium">context_id:</span>
-            <span className="font-mono">{contextId}</span>
+        <div className="shrink-0 border-b bg-gradient-to-r from-muted/50 to-muted/30 px-4 py-1.5">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10">
+                <FingerprintIcon className="h-3 w-3 text-primary" />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">Context ID</span>
+                <Badge className="font-mono text-xs" variant="outline">
+                  {contextId}
+                </Badge>
+                <CopyButton
+                  className="h-6 min-h-6 w-6 min-w-6 shrink-0 p-0"
+                  content={contextId}
+                  size="icon"
+                  variant="ghost"
+                  whileHover={{ scale: 1 }}
+                />
+              </div>
+            </div>
+            {headerActions}
           </div>
         </div>
       )}

frontend/src/components/pages/agents/details/a2a/chat/types.ts

@@ -99,4 +99,5 @@ export type ChatMessage = {
 
 export type AIAgentChatProps = {
   agent: AIAgent;
+  headerActions?: React.ReactNode;
 };