feat: Agentic UI components for agent configuration and artifacts

[manavgup]

Summary

Implement frontend React components to support the agentic RAG features, including agent configuration per collection, artifact display in search results, and agent management dashboard.

Background

This implements the architecture defined in docs/architecture/agentic-ui-architecture.md. The UI enables users to:

1. Configure which agents run on their collections
2. View and download agent-generated artifacts (PowerPoint, PDF, charts)
3. Monitor agent pipeline execution in real-time
4. Manage agents across all collections from a dashboard

Component Hierarchy

App Layout
├── /search
│   └── LightweightSearchInterface (ENHANCED)
│       ├── AgentArtifactsPanel (NEW)
│       │   └── ArtifactCard (NEW)
│       ├── AgentExecutionIndicator (NEW)
│       └── AgentPipelineStatus (NEW)
│
├── /collections/:id/settings
│   └── CollectionAgentsTab (NEW)
│       ├── AgentStageSection (NEW)
│       └── AgentConfigModal (NEW)
│
├── /agents
│   └── AgentDashboard (NEW)
│       ├── MyAgentsPanel (NEW)
│       ├── AgentAnalytics (NEW)
│       └── AgentAuditLog (NEW)
│
└── /agents/marketplace
    └── AgentMarketplacePage (NEW)
        └── AgentDetailModal (NEW)

Implementation Tasks

Search Interface Enhancements

• AgentArtifactsPanel - Container for artifacts in search results
• ArtifactCard - Individual artifact with preview/download
• ArtifactPreviewModal - Full preview for images/PDFs
• AgentPipelineStatus - Real-time pipeline stage indicator
• AgentExecutionIndicator - Badge showing agents that processed response

Collection Agent Configuration

• CollectionAgentsTab - Tab in collection settings
• AgentStageSection - Section for each pipeline stage
• AgentConfigModal - Modal for agent-specific settings
• AgentPriorityDragDrop - Drag to reorder agent priority

Agent Management Dashboard

• AgentDashboard - Main agent management page
• MyAgentsPanel - User's configured agents
• AgentAnalytics - Usage statistics and metrics
• AgentAuditLog - Execution history log

Agent Marketplace

• AgentMarketplacePage - Browse available agents
• AgentCatalog - Grid of available agents
• AgentDetailModal - Agent info and add button

Supporting Components

• ProgressSteps - Pipeline stage indicator UI
• FileDownloadButton - Base64 download handler

API Client

• agentApiClient.ts - Agent-specific API methods
  • getAvailableAgents()
  • getUserAgentConfigs()
  • createAgentConfig()
  • updateAgentConfig()
  • deleteAgentConfig()
  • getCollectionAgents()
  • addAgentToCollection()
  • removeAgentFromCollection()
  • batchUpdatePriorities()
  • getAgentAnalytics()
  • getAgentExecutions()

State Management

• AgentContext - React context for agent state
• Agent-related types in types/agent.ts

Search Response Types

• Update SearchResponse type with:
  • agent_artifacts?: AgentArtifact[]
  • agent_executions?: AgentExecution[]
  • pipeline_metadata?: PipelineMetadata

File Structure

frontend/src/
├── components/
│   ├── agents/
│   │   ├── AgentDashboard.tsx
│   │   ├── MyAgentsPanel.tsx
│   │   ├── AgentAnalytics.tsx
│   │   ├── AgentAuditLog.tsx
│   │   ├── AgentMarketplacePage.tsx
│   │   ├── AgentCatalog.tsx
│   │   ├── AgentDetailModal.tsx
│   │   ├── CollectionAgentsTab.tsx
│   │   ├── AgentStageSection.tsx
│   │   ├── AgentConfigModal.tsx
│   │   └── AgentPriorityDragDrop.tsx
│   │
│   ├── search/
│   │   ├── AgentArtifactsPanel.tsx
│   │   ├── ArtifactCard.tsx
│   │   ├── ArtifactPreviewModal.tsx
│   │   ├── AgentExecutionIndicator.tsx
│   │   └── AgentPipelineStatus.tsx
│   │
│   └── ui/
│       ├── ProgressSteps.tsx
│       └── FileDownloadButton.tsx
│
├── services/
│   └── agentApiClient.ts
│
├── types/
│   └── agent.ts
│
└── contexts/
    └── AgentContext.tsx

Dependencies

• Issue feat: Implement SearchService 3-stage agent execution hooks #697 (Agent Hooks) - Backend APIs must exist
• Issue feat: Expose RAG Modulo as MCP Server #698 (MCP Server) - For agent capabilities

Design Requirements

• Follow existing Carbon Design System patterns
• Use Tailwind CSS for styling
• Heroicons for icons
• Accessible (ARIA labels, keyboard navigation)
• Responsive (mobile, tablet, desktop breakpoints)
• Dark mode support

Acceptance Criteria

• Users can add/remove agents from collections
• Users can configure agent-specific settings
• Users can reorder agent priority via drag-drop
• Search results display agent artifacts
• Users can preview and download artifacts
• Pipeline status shows during search execution
• Agent dashboard shows usage analytics
• Audit log shows execution history
• All components are accessible
• Components work on mobile

References

• Architecture: docs/architecture/agentic-ui-architecture.md
• Epic: [EPIC] Future: Agentic AI Platform v2 (Phase 4) #691