Skip to main content

Agent Forge Features Spec

Status: ✅ Implemented Created: 2026-01-17 Updated: 2026-01-17

Overview​

Port key features from the agent-forge Backstage plugin to CAIPE UI to provide feature parity and improved user experience.

Features Implemented​

1. Text Selection & Copy Icons ✅​

Problem: Text in chat messages was hard to select and copy.

Solution:

  • Improved text selection contrast with selection:bg-primary/30
  • Copy button on user messages (hover to reveal)
  • Copy button on assistant responses with tooltip
  • Visual feedback on copy success

Files Changed:

  • src/components/chat/ChatPanel.tsx
  • src/components/ui/tooltip.tsx (new)

2. Feedback System ✅​

Problem: No way to provide feedback on agent responses.

Solution (matching agent-forge exactly):

  • Inline thumbs up/down buttons per assistant message
  • When clicked, inline panel appears below message with reason chips:
    • For LIKE: "Very Helpful", "Accurate", "Simplified My Task", "Other"
    • For DISLIKE: "Inaccurate", "Poorly Formatted", "Incomplete", "Off-topic", "Other"
  • If "Other" selected, shows multi-line text area for additional feedback
  • Submit button (disabled until reason selected)
  • "Thank you for your feedback!" message after submission
  • Toggle behavior: clicking same thumb deselects

Files Changed:

  • src/components/chat/FeedbackButton.tsx (new)
  • src/components/chat/ChatPanel.tsx
  • src/store/chat-store.ts (added updateMessageFeedback)
  • src/types/a2a.ts (added MessageFeedback type with showFeedbackOptions)

3. Execution Plan with Interactive Checkboxes ✅​

Problem: Task list lacked visual progress indication.

Solution:

  • Progress bar showing completion percentage with animation
  • Interactive checkbox-style task list
  • Status indicators:
    • ⬜ Pending (circle)
    • 🔄 In Progress (spinner)
    • ✅ Completed (checkmark)
    • ❌ Failed (alert)
  • Auto-parse from execution_plan_update artifacts
  • Official agent logos with brand colors

Files Changed:

  • src/components/a2a/ContextPanel.tsx
  • src/components/shared/AgentLogos.tsx (new)

4. MetadataInputForm for User Input ✅​

Problem: No way for agent to request structured input from user.

Solution:

  • Dynamic form rendering for agent input requests
  • Support for text fields and select dropdowns
  • Field validation with error display
  • Styled to match A2A "input-required" state

Files Changed:

  • src/components/chat/MetadataInputForm.tsx (new)

5. Custom Call Buttons (Agent Selection) ✅​

Problem: No quick way to target specific agents.

Solution:

  • Inline agent selector in input area with official logos
  • Quick access buttons for:
    • ArgoCD
    • AWS
    • GitHub
    • Jira
    • Splunk
    • PagerDuty
  • Agent prompt prepended to messages automatically
  • Visual indicator when agent is selected

Files Changed:

  • src/components/chat/CustomCallButtons.tsx (new)
  • src/components/chat/ChatPanel.tsx

6. Task Cancellation via A2A Protocol ✅​

Problem: Client-side abort didn't notify backend.

Solution:

  • Added cancelTask(taskId) method to A2AClient
  • Added getTaskStatus(taskId) method
  • Proper A2A JSON-RPC request format

Files Changed:

  • src/lib/a2a-client.ts

7. Official Agent Logos ✅​

Problem: Task list used generic badges instead of recognizable icons.

Solution:

  • Created shared AgentLogos.tsx component
  • Official SVG logos from Simple Icons for:
    • ArgoCD (#EF7B4D)
    • AWS (#FF9900)
    • GitHub (#181717)
    • Jira (#0052CC)
    • Splunk (#000000)
    • PagerDuty (#06AC38)
    • Confluence (#172B4D)
    • Kubernetes (#326CE5)
    • CAIPE (#8B5CF6)
    • Supervisor (#10B981)
  • Auto-matching via normalizeAgentName() function

Files Changed:

  • src/components/shared/AgentLogos.tsx (new)
  • src/components/a2a/ContextPanel.tsx
  • src/components/chat/CustomCallButtons.tsx

Testing Checklist​

  • Send message and verify copy buttons appear on hover
  • Click thumbs up on response, verify "Thanks!" appears
  • Click thumbs down, select reason, submit feedback
  • Start multi-step task, verify task list with checkboxes
  • Verify progress bar updates as tasks complete
  • Select ArgoCD agent, verify prompt prefix
  • Cancel running request, verify backend notified
  • Verify agent logos match brand colors

Dependencies​

  • react-markdown for markdown rendering
  • remark-gfm for GitHub Flavored Markdown
  • react-syntax-highlighter for code blocks
  • framer-motion for animations
  • lucide-react for icons

Future Enhancements​

  1. Backend endpoint for feedback submission (/api/feedback)
  2. User input form integration in chat flow
  3. Agent suggestions based on conversation context
  4. Execution plan history tracking