diff --git a/frontend/src/app/[locale]/prototypes/ISSUE_COMMENTS.md b/frontend/src/app/[locale]/prototypes/ISSUE_COMMENTS.md new file mode 100644 index 0000000..9005b5b --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/ISSUE_COMMENTS.md @@ -0,0 +1,274 @@ +# Issue Comments for Design Prototypes + +This document contains the comments to be added to each Gitea issue for the design prototypes. + +--- + +## Issue #36: [DESIGN] Project Dashboard Page + +**Comment to add:** + +```markdown +## Design Prototype Ready for Review + +The Project Dashboard prototype has been created and is ready for review. + +### How to View +1. Start the frontend dev server: `cd frontend && npm run dev` +2. Navigate to: `http://localhost:3000/en/prototypes/project-dashboard` + +### What's Included + +**Header Section** +- Project name with status badge (In Progress, Completed, Paused, Blocked) +- Autonomy level indicator (Full Control, Milestone, Autonomous) +- Quick action buttons (Pause Project, Run Sprint) + +**Agent Panel** +- List of all project agents with avatars +- Real-time status indicators (active = green, idle = yellow, pending = gray) +- Current task description for each agent +- Last activity timestamp + +**Sprint Overview** +- Current sprint progress bar +- Issue statistics grid (Completed, In Progress, Blocked, To Do) +- Visual burndown chart with ideal vs actual lines +- Sprint selector dropdown + +**Issue Summary Sidebar** +- Count of issues by status with color-coded icons +- Quick links to view all issues + +**Recent Activity Feed** +- Chronological event list with type icons +- Agent attribution +- Highlighted approval requests with action buttons + +### Key Design Decisions +- Three-column layout on desktop (2/3 main, 1/3 sidebar) +- Agent status uses traffic light colors for intuitive understanding +- Burndown chart is simplified for quick scanning +- Activity feed limited to 5 items with "View All" link + +### Questions for Review +1. Is the burndown chart detailed enough? +2. Should agent cards be expandable for more details? +3. Is the 5-item activity feed sufficient? + +**Please review and approve or provide feedback.** + +Files: +- `/frontend/src/app/[locale]/prototypes/project-dashboard/page.tsx` +- `/frontend/src/app/[locale]/prototypes/project-dashboard/README.md` +``` + +--- + +## Issue #37: [DESIGN] Agent Configuration UI + +**Comment to add:** + +```markdown +## Design Prototype Ready for Review + +The Agent Configuration UI prototype has been created and is ready for review. + +### How to View +1. Start the frontend dev server: `cd frontend && npm run dev` +2. Navigate to: `http://localhost:3000/en/prototypes/agent-configuration` + +### What's Included + +**Three View Architecture** + +1. **List View** + - Grid of agent type cards + - Search functionality + - Status filter (Active, Draft, Inactive) + - Card shows: name, description, expertise tags, model, instance count + +2. **Detail View** + - Full configuration display (read-only) + - Model configuration section + - MCP permissions with scopes + - Personality prompt display + - Duplicate, Edit, Delete actions + +3. **Editor View** (Tabbed Interface) + - **Basic Info Tab**: Name, description, status, expertise areas + - **Model Tab**: Primary/failover model selection, temperature, max tokens, top P + - **Permissions Tab**: MCP server toggles with granular scope checkboxes + - **Personality Tab**: Large textarea for personality prompt + +### Key Design Decisions +- Separate views for browsing, viewing, and editing +- Tabbed editor reduces cognitive load +- MCP permissions show nested scopes when enabled +- Model parameters have helpful descriptions + +### User Flows to Test +1. Click any card to see detail view +2. Click "Edit" to see editor view +3. Click "Create Agent Type" for blank editor +4. Navigate tabs in editor + +### Questions for Review +1. Is the tabbed editor the right approach? +2. Should expertise be free-form tags or predefined list? +3. Should model parameters have "presets"? + +**Please review and approve or provide feedback.** + +Files: +- `/frontend/src/app/[locale]/prototypes/agent-configuration/page.tsx` +- `/frontend/src/app/[locale]/prototypes/agent-configuration/README.md` +``` + +--- + +## Issue #38: [DESIGN] Issue List and Detail Views + +**Comment to add:** + +```markdown +## Design Prototype Ready for Review + +The Issue List and Detail Views prototype has been created and is ready for review. + +### How to View +1. Start the frontend dev server: `cd frontend && npm run dev` +2. Navigate to: `http://localhost:3000/en/prototypes/issue-management` + +### What's Included + +**List View** +- Filterable table with sortable columns +- Quick status filter + expandable advanced filters +- Bulk action bar (appears when selecting issues) +- Sync status indicator per issue +- Labels displayed as badges + +**Filter Options** +- Status: Open, In Progress, In Review, Blocked, Done +- Priority: High, Medium, Low +- Sprint: Current sprints, Backlog +- Assignee: All agents + Unassigned +- Labels: Feature, Bug, Backend, Frontend, etc. + +**Detail View** +- Full issue content (markdown-like display) +- Status workflow panel (click to change status) +- Assignment panel with agent avatar +- Activity timeline with: + - Status changes + - Comments + - Assignment changes + - Label changes +- Development section (branch, PR link) + +### Key Design Decisions +- Table layout for density and scannability +- Status workflow matches common issue tracker patterns +- Sync status indicator shows data freshness +- Activity timeline shows issue history + +### User Flows to Test +1. Use search and filters +2. Click checkboxes to see bulk actions +3. Sort by clicking column headers +4. Click a row to see detail view +5. Click status buttons in detail view + +### Questions for Review +1. Should we add Kanban view as alternative? +2. Is the sync indicator clear enough? +3. Should there be inline editing? + +**Please review and approve or provide feedback.** + +Files: +- `/frontend/src/app/[locale]/prototypes/issue-management/page.tsx` +- `/frontend/src/app/[locale]/prototypes/issue-management/README.md` +``` + +--- + +## Issue #39: [DESIGN] Real-time Activity Feed + +**Comment to add:** + +```markdown +## Design Prototype Ready for Review + +The Real-time Activity Feed prototype has been created and is ready for review. + +### How to View +1. Start the frontend dev server: `cd frontend && npm run dev` +2. Navigate to: `http://localhost:3000/en/prototypes/activity-feed` + +### What's Included + +**Event Types Displayed** +- Agent Status: Started, paused, resumed, stopped +- Agent Message: Updates, questions, progress reports +- Issue Update: Status changes, assignments, creation +- Sprint Event: Standup, retrospective, planning +- Approval Request: Requires user action (highlighted) +- Error: Agent or system errors +- Milestone: Goals achieved, completions + +**Features** +- Real-time connection indicator (pulsing green when connected) +- Time-based event grouping (New, Earlier Today, Yesterday, etc.) +- Search functionality +- Filter panel with: + - Event type checkboxes + - Agent checkboxes + - "Action required only" toggle +- Expandable event details +- Inline approval/reject buttons for requests +- Mark all read functionality + +### Key Design Decisions +- Card-based layout for clear event separation +- Orange left border highlights action-required items +- Time grouping helps users orient in timeline +- Expandable details keep feed scannable +- Real-time indicator builds trust in data freshness + +### User Flows to Test +1. Scroll through the event feed +2. Click events to expand details +3. Open filter panel and select filters +4. Click "Approve" on approval request +5. Click "Mark all read" + +### Questions for Review +1. Should events be grouped by time or show flat? +2. Should there be sound notifications for urgent items? +3. Should users be able to "star" events? + +**Please review and approve or provide feedback.** + +Files: +- `/frontend/src/app/[locale]/prototypes/activity-feed/page.tsx` +- `/frontend/src/app/[locale]/prototypes/activity-feed/README.md` +``` + +--- + +## How to Add These Comments + +The comments above should be added to the respective Gitea issues at: +`https://gitea.pragmazest.com/cardosofelipe/syndarix/issues` + +- Issue #36: Project Dashboard +- Issue #37: Agent Configuration UI +- Issue #38: Issue List and Detail Views +- Issue #39: Real-time Activity Feed + +After the user reviews each prototype and provides feedback: +1. Iterate on the design based on feedback +2. Get explicit approval +3. Begin implementation diff --git a/frontend/src/app/[locale]/prototypes/activity-feed/README.md b/frontend/src/app/[locale]/prototypes/activity-feed/README.md new file mode 100644 index 0000000..55c4eb1 --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/activity-feed/README.md @@ -0,0 +1,248 @@ +# Real-time Activity Feed - Design Prototype + +## Overview +The Activity Feed provides a real-time view of all events happening across Syndarix projects. It displays agent status changes, messages, issue updates, sprint events, approval requests, and errors. This is the central hub for monitoring autonomous agent activity and responding to approval requests. + +## User Stories +- As a user, I want to see real-time updates from my projects so I stay informed +- As a user, I want to filter events by type, agent, or project to focus on what matters +- As a user, I want to quickly identify items requiring my action +- As a user, I want to expand events to see more details +- As a user, I want to approve or reject requests directly from the feed +- As a user, I want to know if I'm connected to the real-time stream +- As a user, I want to mark events as read to track what I've seen + +## Key Screens + +### Main Feed View + +**Header** +- Page title with description +- Action required count badge +- Mark all read button +- Real-time connection indicator + +**Search and Filters** +- Full-text search input +- Filter button (toggles filter panel) +- Refresh button + +**Filter Panel** (expandable) +- Event type checkboxes (with icons) +- Agent checkboxes +- "Action required only" toggle +- Clear all / Apply buttons + +**Event Groups** +- Grouped by time period: New, Earlier Today, Yesterday, This Week, Older +- Group header with count badge +- Separator line + +**Event Cards** +- Event type icon (colored) +- Title with New/Action Required badges +- Description text +- Metadata row (agent, project, type) +- Expand/collapse button +- Expanded details (conditional) +- Action buttons (for approval requests) + +## Event Types + +| Type | Icon | Color | Description | +|------|------|-------|-------------| +| Agent Status | Bot | Blue | Agent started, paused, resumed, stopped | +| Agent Message | MessageSquare | Purple | Agent communication, updates, questions | +| Issue Update | CircleDot | Green | Status change, assignment, creation | +| Sprint Event | Zap | Yellow | Standup, retrospective, planning | +| Approval Request | AlertCircle | Orange | Requires user action | +| Error | XCircle | Red | Agent or system errors | +| Milestone | CheckCircle | Emerald | Goals achieved, completions | + +## User Flow + +### Monitoring Activity +1. User lands on feed page +2. Feed shows real-time updates (newest first) +3. User scrolls through events +4. User clicks event to expand details +5. User navigates to related issue/PR if needed + +### Filtering Events +1. User clicks Filter button +2. Filter panel expands +3. User selects event types, agents, etc. +4. User clicks Apply +5. Feed updates to show matching events + +### Handling Approval Request +1. Approval request appears with orange badge +2. User reads request details +3. User clicks Approve or Request Changes +4. Event updates to show completed +5. Badge count decreases + +## Design Decisions + +### Card-Based Layout +- Each event is a distinct card +- Visual separation between events +- Expandable for more details +- Cards are self-contained + +### Time-Based Grouping +- Events grouped by time period +- Helps users orient in the timeline +- "New" group highlights unread items +- Clear visual hierarchy + +### Real-Time Indicator +- Pulsing green dot when connected +- Gray dot when disconnected +- Builds trust in data freshness +- Matches common patterns (Slack, Discord) + +### Action Required Emphasis +- Orange left border on cards +- Badge in header with count +- Cannot be missed +- Inline approval buttons + +### Expandable Details +- Keeps feed scannable +- Details available on demand +- Consistent expand/collapse pattern +- Metadata shown when expanded + +### Search and Filters +- Combined search and filter approach +- Quick search for specific events +- Structured filters for browsing +- Filter state indicator + +## States + +### Loading +- Skeleton cards while loading +- Connection indicator shows connecting + +### Empty +- No events: "Activity will appear here" message +- No matches: "Try adjusting filters" message + +### Disconnected +- Gray indicator +- Retry button available +- Last known data shown + +### Action Completed +- Card updates to remove action badge +- Success toast notification + +## Responsive Breakpoints + +### Desktop (lg: 1024px+) +- Centered content (max-w-3xl) +- Full filter panel inline +- Comfortable spacing + +### Tablet (md: 768px) +- Full-width content +- Filter panel still inline +- Slightly tighter spacing + +### Mobile (< 768px) +- Full-width cards +- Filter panel stacks vertically +- Touch-friendly buttons +- Simplified metadata row + +## Accessibility Notes +- Event type icons have text labels +- Color is not only indicator (badges, icons) +- Keyboard navigation for expand/collapse +- Screen reader announces new events +- Focus management on filter panel +- Live region for real-time updates + +## Components Used +- Card, CardContent +- Button (default, outline, ghost variants) +- Badge (default, secondary, outline, destructive variants) +- Input (search) +- Checkbox +- Label +- Separator +- Lucide icons + +## Event Data Structure + +```typescript +interface ActivityEvent { + id: string; + type: 'agent_status' | 'agent_message' | 'issue_update' | + 'sprint_event' | 'approval_request' | 'error' | 'milestone'; + title: string; + description: string; + timestamp: string; // ISO 8601 + agent: { + name: string; + avatar: string; + }; + project: string; + metadata: { + issueNumber?: number; + pullRequest?: number; + documentUrl?: string; + progress?: number; + summary?: { + agents: number; + inProgress: number; + blocked: number; + }; + importance?: 'low' | 'medium' | 'high'; + // ... other type-specific fields + }; + requiresAction: boolean; + isNew: boolean; +} +``` + +## Real-Time Implementation Notes + +For production, the feed should: +1. Connect via WebSocket or SSE +2. Handle reconnection gracefully +3. Queue events during disconnect +4. Merge with existing events on reconnect +5. Support pagination for history +6. Implement optimistic updates for actions + +## Questions for Review +1. Should events be grouped by time or show flat chronologically? +2. How many events should load initially? (Currently showing 10) +3. Should there be sound/browser notifications for urgent items? +4. Should users be able to "star" or save important events? +5. Should there be a compact view option? +6. Should events support threading/replies? + +## How to View +Navigate to: `/prototypes/activity-feed` + +Try the features: +1. Scroll through the event feed +2. Click events to expand details +3. Open the filter panel +4. Try the action buttons on approval requests +5. Use the search to filter events + +## Next Steps +After approval: +1. Implement WebSocket connection for real-time updates +2. Add browser notification support +3. Implement event pagination (infinite scroll) +4. Add optimistic updates for approve/dismiss +5. Implement notification sound settings +6. Add project-level filtering +7. Implement event archiving +8. Add keyboard shortcuts (j/k navigation) diff --git a/frontend/src/app/[locale]/prototypes/activity-feed/page.tsx b/frontend/src/app/[locale]/prototypes/activity-feed/page.tsx new file mode 100644 index 0000000..8c10042 --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/activity-feed/page.tsx @@ -0,0 +1,846 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Checkbox } from '@/components/ui/checkbox'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Separator } from '@/components/ui/separator'; +import { + Activity, + Bot, + MessageSquare, + PlayCircle, + PauseCircle, + CheckCircle2, + AlertCircle, + Clock, + GitPullRequest, + GitBranch, + CircleDot, + XCircle, + Zap, + Users, + ChevronRight, + Settings, + Filter, + Bell, + BellOff, + RefreshCw, + ChevronDown, + ChevronUp, + ExternalLink, + Search, +} from 'lucide-react'; + +// Event type configurations +const eventTypeConfig = { + agent_status: { + label: 'Agent Status', + icon: Bot, + color: 'text-blue-500', + bgColor: 'bg-blue-100 dark:bg-blue-900', + }, + agent_message: { + label: 'Agent Message', + icon: MessageSquare, + color: 'text-purple-500', + bgColor: 'bg-purple-100 dark:bg-purple-900', + }, + issue_update: { + label: 'Issue Update', + icon: CircleDot, + color: 'text-green-500', + bgColor: 'bg-green-100 dark:bg-green-900', + }, + sprint_event: { + label: 'Sprint Event', + icon: Zap, + color: 'text-yellow-500', + bgColor: 'bg-yellow-100 dark:bg-yellow-900', + }, + approval_request: { + label: 'Approval Request', + icon: AlertCircle, + color: 'text-orange-500', + bgColor: 'bg-orange-100 dark:bg-orange-900', + }, + error: { + label: 'Error', + icon: XCircle, + color: 'text-red-500', + bgColor: 'bg-red-100 dark:bg-red-900', + }, + milestone: { + label: 'Milestone', + icon: CheckCircle2, + color: 'text-emerald-500', + bgColor: 'bg-emerald-100 dark:bg-emerald-900', + }, +}; + +// Mock activity events +const mockEvents = [ + { + id: 'evt-001', + type: 'approval_request', + title: 'Approval Required: Architecture Decision', + description: 'Architect is requesting approval for the API design document for the checkout flow.', + timestamp: new Date(Date.now() - 1000 * 60 * 2).toISOString(), // 2 min ago + agent: { name: 'Architect', avatar: 'AR' }, + project: 'E-Commerce Platform', + metadata: { + documentUrl: '/docs/adr-015-checkout-api.md', + importance: 'high', + }, + requiresAction: true, + isNew: true, + }, + { + id: 'evt-002', + type: 'agent_message', + title: 'Implementation Update', + description: 'Completed JWT token generation and validation. Moving on to session management.', + timestamp: new Date(Date.now() - 1000 * 60 * 8).toISOString(), // 8 min ago + agent: { name: 'Backend Engineer', avatar: 'BE' }, + project: 'E-Commerce Platform', + metadata: { + issueNumber: 42, + progress: 65, + }, + requiresAction: false, + isNew: true, + }, + { + id: 'evt-003', + type: 'agent_status', + title: 'Agent Started Work', + description: 'Frontend Engineer has started working on the product catalog component.', + timestamp: new Date(Date.now() - 1000 * 60 * 15).toISOString(), // 15 min ago + agent: { name: 'Frontend Engineer', avatar: 'FE' }, + project: 'E-Commerce Platform', + metadata: { + previousStatus: 'idle', + newStatus: 'active', + issueNumber: 45, + }, + requiresAction: false, + isNew: true, + }, + { + id: 'evt-004', + type: 'issue_update', + title: 'Issue Status Changed', + description: 'Issue #38 "Implement user registration" moved from "In Progress" to "In Review".', + timestamp: new Date(Date.now() - 1000 * 60 * 25).toISOString(), // 25 min ago + agent: { name: 'Backend Engineer', avatar: 'BE' }, + project: 'E-Commerce Platform', + metadata: { + issueNumber: 38, + oldStatus: 'in_progress', + newStatus: 'in_review', + }, + requiresAction: false, + isNew: false, + }, + { + id: 'evt-005', + type: 'sprint_event', + title: 'Daily Standup Completed', + description: 'Sprint 3 daily standup: 4 agents reported, 8 issues in progress, 1 blocked.', + timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(), // 1 hour ago + agent: { name: 'System', avatar: 'SY' }, + project: 'E-Commerce Platform', + metadata: { + sprintName: 'Sprint 3', + summary: { + agents: 4, + inProgress: 8, + blocked: 1, + }, + }, + requiresAction: false, + isNew: false, + }, + { + id: 'evt-006', + type: 'error', + title: 'Agent Error', + description: 'QA Engineer encountered an error while setting up the test framework. Retry attempted.', + timestamp: new Date(Date.now() - 1000 * 60 * 90).toISOString(), // 1.5 hours ago + agent: { name: 'QA Engineer', avatar: 'QA' }, + project: 'E-Commerce Platform', + metadata: { + errorType: 'configuration', + retryCount: 1, + resolved: false, + }, + requiresAction: true, + isNew: false, + }, + { + id: 'evt-007', + type: 'milestone', + title: 'Sprint Goal Achieved', + description: 'Authentication module completed! All acceptance criteria met.', + timestamp: new Date(Date.now() - 1000 * 60 * 120).toISOString(), // 2 hours ago + agent: { name: 'Product Owner', avatar: 'PO' }, + project: 'E-Commerce Platform', + metadata: { + milestone: 'Auth Module', + issuesCompleted: 5, + }, + requiresAction: false, + isNew: false, + }, + { + id: 'evt-008', + type: 'agent_status', + title: 'Agent Paused', + description: 'DevOps Engineer paused pending infrastructure approval.', + timestamp: new Date(Date.now() - 1000 * 60 * 180).toISOString(), // 3 hours ago + agent: { name: 'DevOps Engineer', avatar: 'DO' }, + project: 'E-Commerce Platform', + metadata: { + previousStatus: 'active', + newStatus: 'paused', + reason: 'Awaiting approval', + }, + requiresAction: false, + isNew: false, + }, + { + id: 'evt-009', + type: 'agent_message', + title: 'Code Review Comment', + description: 'Found potential security issue in password hashing. Recommending bcrypt with higher rounds.', + timestamp: new Date(Date.now() - 1000 * 60 * 240).toISOString(), // 4 hours ago + agent: { name: 'Architect', avatar: 'AR' }, + project: 'E-Commerce Platform', + metadata: { + issueNumber: 42, + pullRequest: 15, + }, + requiresAction: false, + isNew: false, + }, + { + id: 'evt-010', + type: 'issue_update', + title: 'Issue Created', + description: 'New issue created: "Add rate limiting to API endpoints" - assigned to Backend Engineer.', + timestamp: new Date(Date.now() - 1000 * 60 * 300).toISOString(), // 5 hours ago + agent: { name: 'Product Owner', avatar: 'PO' }, + project: 'E-Commerce Platform', + metadata: { + issueNumber: 50, + priority: 'medium', + }, + requiresAction: false, + isNew: false, + }, +]; + +// Format relative time +function formatRelativeTime(timestamp: string): string { + const now = new Date(); + const then = new Date(timestamp); + const diffMs = now.getTime() - then.getTime(); + const diffMins = Math.floor(diffMs / (1000 * 60)); + const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); + const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); + + if (diffMins < 1) return 'Just now'; + if (diffMins < 60) return `${diffMins} min ago`; + if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`; + return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`; +} + +// Group events by time period +function groupEventsByPeriod(events: typeof mockEvents) { + const now = new Date(); + const groups: { label: string; events: typeof mockEvents }[] = [ + { label: 'New', events: [] }, + { label: 'Earlier Today', events: [] }, + { label: 'Yesterday', events: [] }, + { label: 'This Week', events: [] }, + { label: 'Older', events: [] }, + ]; + + events.forEach((event) => { + const eventDate = new Date(event.timestamp); + const diffHours = (now.getTime() - eventDate.getTime()) / (1000 * 60 * 60); + const diffDays = diffHours / 24; + + if (event.isNew) { + groups[0].events.push(event); + } else if (diffHours < 24 && eventDate.getDate() === now.getDate()) { + groups[1].events.push(event); + } else if (diffDays < 2) { + groups[2].events.push(event); + } else if (diffDays < 7) { + groups[3].events.push(event); + } else { + groups[4].events.push(event); + } + }); + + return groups.filter((g) => g.events.length > 0); +} + +// Event card component +function EventCard({ + event, + expanded, + onToggle, + onApprove, + onDismiss, +}: { + event: (typeof mockEvents)[0]; + expanded: boolean; + onToggle: () => void; + onApprove: () => void; + onDismiss: () => void; +}) { + const config = eventTypeConfig[event.type as keyof typeof eventTypeConfig]; + const Icon = config.icon; + + return ( + +
+
+ {/* Icon */} +
+ +
+ + {/* Content */} +
+
+
+
+

{event.title}

+ {event.isNew && ( + + New + + )} + {event.requiresAction && ( + + Action Required + + )} +
+

+ {event.description} +

+
+
+ {formatRelativeTime(event.timestamp)} + +
+
+ + {/* Metadata row */} +
+
+ + {event.agent.name} +
+
+ + {event.project} +
+ + {config.label} + +
+ + {/* Expanded details */} + {expanded && ( +
+ {event.metadata.issueNumber && ( +
+ + Issue #{event.metadata.issueNumber} + +
+ )} + {event.metadata.pullRequest && ( +
+ + PR #{event.metadata.pullRequest} + +
+ )} + {event.metadata.documentUrl && ( + + )} + {event.metadata.summary && ( +
+
+

+ {event.metadata.summary.agents} +

+

Agents

+
+
+

+ {event.metadata.summary.inProgress} +

+

In Progress

+
+
+

+ {event.metadata.summary.blocked} +

+

Blocked

+
+
+ )} + {event.metadata.progress !== undefined && ( +
+
+ Progress + {event.metadata.progress}% +
+
+
+
+
+ )} +

+ {new Date(event.timestamp).toLocaleString()} +

+
+ )} + + {/* Action buttons for approval requests */} + {event.requiresAction && ( +
+ + + +
+ )} +
+
+
+ + ); +} + +// Filter panel component +function FilterPanel({ + filters, + onFiltersChange, + onClose, +}: { + filters: { + types: string[]; + agents: string[]; + projects: string[]; + showActionRequired: boolean; + }; + onFiltersChange: (filters: typeof filters) => void; + onClose: () => void; +}) { + const eventTypes = Object.entries(eventTypeConfig); + const agents = ['Backend Engineer', 'Frontend Engineer', 'Architect', 'Product Owner', 'QA Engineer', 'DevOps Engineer']; + const projects = ['E-Commerce Platform', 'Mobile App', 'API Gateway']; + + const toggleType = (type: string) => { + const newTypes = filters.types.includes(type) + ? filters.types.filter((t) => t !== type) + : [...filters.types, type]; + onFiltersChange({ ...filters, types: newTypes }); + }; + + const toggleAgent = (agent: string) => { + const newAgents = filters.agents.includes(agent) + ? filters.agents.filter((a) => a !== agent) + : [...filters.agents, agent]; + onFiltersChange({ ...filters, agents: newAgents }); + }; + + return ( + +
+ {/* Event Types */} +
+ +
+ {eventTypes.map(([key, config]) => { + const Icon = config.icon; + return ( +
+ toggleType(key)} + /> + +
+ ); + })} +
+
+ + {/* Agents */} +
+ +
+ {agents.map((agent) => ( +
+ toggleAgent(agent)} + /> + +
+ ))} +
+
+ + {/* Show action required only */} +
+ + onFiltersChange({ ...filters, showActionRequired: checked as boolean }) + } + /> + +
+ + {/* Actions */} +
+ + +
+
+ + ); +} + +// Real-time indicator +function RealTimeIndicator({ connected }: { connected: boolean }) { + return ( +
+ + + {connected ? 'Live' : 'Disconnected'} + +
+ ); +} + +export default function ActivityFeedPrototype() { + const [events, setEvents] = useState(mockEvents); + const [expandedEvents, setExpandedEvents] = useState([]); + const [showFilters, setShowFilters] = useState(false); + const [filters, setFilters] = useState({ + types: [] as string[], + agents: [] as string[], + projects: [] as string[], + showActionRequired: false, + }); + const [searchQuery, setSearchQuery] = useState(''); + const [isConnected, setIsConnected] = useState(true); + const [notificationsEnabled, setNotificationsEnabled] = useState(true); + + // Simulate real-time updates + useEffect(() => { + const interval = setInterval(() => { + // Randomly toggle connection status for demo + if (Math.random() > 0.95) { + setIsConnected((prev) => !prev); + } + }, 5000); + + return () => clearInterval(interval); + }, []); + + // Filter events + const filteredEvents = events.filter((event) => { + const matchesSearch = + searchQuery === '' || + event.title.toLowerCase().includes(searchQuery.toLowerCase()) || + event.description.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesType = + filters.types.length === 0 || filters.types.includes(event.type); + const matchesAgent = + filters.agents.length === 0 || filters.agents.includes(event.agent.name); + const matchesActionRequired = + !filters.showActionRequired || event.requiresAction; + return matchesSearch && matchesType && matchesAgent && matchesActionRequired; + }); + + const groupedEvents = groupEventsByPeriod(filteredEvents); + + const toggleExpanded = (eventId: string) => { + setExpandedEvents((prev) => + prev.includes(eventId) + ? prev.filter((id) => id !== eventId) + : [...prev, eventId] + ); + }; + + const handleApprove = (eventId: string) => { + setEvents((prev) => + prev.map((e) => + e.id === eventId ? { ...e, requiresAction: false, isNew: false } : e + ) + ); + }; + + const handleDismiss = (eventId: string) => { + // In real implementation, this would open a modal for feedback + console.log('Dismiss:', eventId); + }; + + const markAllRead = () => { + setEvents((prev) => prev.map((e) => ({ ...e, isNew: false }))); + }; + + const actionRequiredCount = events.filter((e) => e.requiresAction).length; + const newCount = events.filter((e) => e.isNew).length; + + return ( +
+ {/* Navigation Bar */} + + +
+
+ {/* Header */} +
+
+

Activity Feed

+

+ Real-time updates from your projects +

+
+
+ {actionRequiredCount > 0 && ( + + + {actionRequiredCount} pending + + )} + {newCount > 0 && ( + + )} +
+
+ + {/* Search and Filters */} +
+
+ + setSearchQuery(e.target.value)} + className="pl-9" + /> +
+ + +
+ + {/* Filter Panel */} + {showFilters && ( + setShowFilters(false)} + /> + )} + + {/* Event Groups */} +
+ {groupedEvents.map((group) => ( +
+
+

+ {group.label} +

+ + {group.events.length} + + +
+
+ {group.events.map((event) => ( + toggleExpanded(event.id)} + onApprove={() => handleApprove(event.id)} + onDismiss={() => handleDismiss(event.id)} + /> + ))} +
+
+ ))} +
+ + {filteredEvents.length === 0 && ( + + +

No activity found

+

+ {searchQuery || filters.types.length > 0 + ? 'Try adjusting your search or filters' + : 'Activity will appear here as agents work on your projects'} +

+ + )} + + {/* Load More */} + {filteredEvents.length > 0 && ( +
+ +
+ )} +
+
+
+ ); +} diff --git a/frontend/src/app/[locale]/prototypes/agent-configuration/README.md b/frontend/src/app/[locale]/prototypes/agent-configuration/README.md new file mode 100644 index 0000000..1960df3 --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/agent-configuration/README.md @@ -0,0 +1,213 @@ +# Agent Configuration UI - Design Prototype + +## Overview +The Agent Configuration UI allows users to create, view, and manage Agent Types - the templates from which agent instances are spawned. This is a critical administrative interface for defining how AI agents behave, what models they use, and what permissions they have. + +## User Stories +- As an admin, I want to create new agent types so I can define specialized AI agents for my projects +- As an admin, I want to configure model selection and parameters to optimize agent performance +- As an admin, I want to define MCP permissions to control what tools agents can access +- As an admin, I want to craft personality prompts to shape agent behavior and communication style +- As an admin, I want to view all agent types and their status at a glance +- As an admin, I want to duplicate existing agent types as starting points for new ones + +## Key Screens + +### 1. Agent Type List View +- Grid layout of agent type cards +- Search functionality +- Status filter (Active, Draft, Inactive) +- Create new agent type button +- Card shows: name, description, expertise tags, model, instance count, status + +### 2. Agent Type Detail View +- Full configuration display (read-only) +- Description and expertise areas +- Model configuration (primary, failover, parameters) +- MCP permissions with scopes +- Personality prompt display +- Instance count and quick actions +- Duplicate, Edit, Delete buttons +- Danger zone for destructive actions + +### 3. Agent Type Editor View +- Tabbed interface for organized editing: + - **Basic Info**: Name, description, status, expertise areas + - **Model**: Primary/failover model selection, temperature, max tokens, top P + - **Permissions**: MCP server toggles with granular scope checkboxes + - **Personality**: Large textarea for personality prompt with character count + +## User Flow + +### Creating a New Agent Type +1. User clicks "Create Agent Type" from list view +2. Editor opens with blank form +3. User fills in basic info (name, description, expertise) +4. User selects model configuration +5. User enables MCP permissions and selects scopes +6. User writes personality prompt +7. User saves (creates as Draft or Active) + +### Editing an Existing Agent Type +1. User clicks agent type card in list +2. Detail view shows full configuration +3. User clicks "Edit" button +4. Editor opens with pre-filled data +5. User modifies settings across tabs +6. User saves changes + +### Duplicating an Agent Type +1. User opens detail view +2. User clicks "Duplicate" +3. Editor opens with copied data and new name +4. User modifies as needed +5. User saves as new agent type + +## Design Decisions + +### Three-View Architecture +- **List**: Overview and discovery +- **Detail**: Read-only inspection +- **Editor**: Focused editing experience +- Clear navigation between views with back button + +### Tabbed Editor +- Logical grouping of related settings +- Reduces cognitive load +- Allows focused work on one aspect at a time +- Icons on tabs for quick recognition + +### Card-Based List +- Visual grid layout for quick scanning +- Status badges for instant status recognition +- Expertise tags show capabilities at a glance +- Instance count indicates usage + +### MCP Permissions UI +- Checkbox for enabling/disabling each server +- Nested scopes only shown when server is enabled +- Clear visual distinction between enabled/disabled +- Granular control over what agents can access + +### Model Configuration +- Primary + failover model selection +- Common parameters exposed (temperature, max tokens, top P) +- Helpful descriptions for each parameter +- Sensible defaults pre-filled + +## States + +### Loading +- Skeleton cards in list view +- Skeleton placeholders in detail/editor views + +### Empty +- No agent types: "Create your first agent type" CTA +- No search results: "No agent types found" with suggestion + +### Error +- Failed to load: Error card with retry button +- Failed to save: Toast notification with error details + +### Validation +- Required fields highlighted +- Character limits enforced +- Model parameter ranges validated + +## Responsive Breakpoints + +### Desktop (lg: 1024px+) +- 3-column card grid in list view +- 2/3 + 1/3 split in detail view +- Full tab navigation visible + +### Tablet (md: 768px) +- 2-column card grid +- Stacked layout in detail view +- Compact tab labels + +### Mobile (< 768px) +- Single column card list +- Full-width cards +- Scrollable tab navigation +- Stacked form fields + +## Accessibility Notes +- Form labels properly associated with inputs +- Tab panel navigation is keyboard accessible +- Status badges have text (not just color) +- Focus management when navigating between views +- Screen reader announces view changes +- Textarea has proper aria-labels + +## Components Used +- Card, CardHeader, CardTitle, CardContent, CardDescription +- Button (default, outline, ghost, destructive variants) +- Badge (default, secondary, outline variants) +- Input, Textarea, Label +- Select, SelectContent, SelectItem, SelectTrigger, SelectValue +- Tabs, TabsList, TabsTrigger, TabsContent +- Checkbox +- Separator +- Lucide icons + +## Form Fields Reference + +### Basic Info +| Field | Type | Required | Validation | +|-------|------|----------|------------| +| Name | Text | Yes | 3-50 characters | +| Status | Select | Yes | active/draft/inactive | +| Description | Textarea | Yes | 10-500 characters | +| Expertise | Tags | No | Comma-separated | + +### Model Configuration +| Field | Type | Required | Validation | +|-------|------|----------|------------| +| Primary Model | Select | Yes | From available models | +| Failover Model | Select | No | From available models | +| Temperature | Number | Yes | 0.0 - 2.0 | +| Max Tokens | Number | Yes | 1024 - 32768 | +| Top P | Number | Yes | 0.0 - 1.0 | + +### MCP Permissions +| Server | Scopes | +|--------|--------| +| Gitea | read, write, issues, branches, prs | +| Knowledge Base | read, write | +| Filesystem | read, write | +| Slack | read, write | +| Jira | read, write, issues | + +### Personality Prompt +- Large textarea (15 rows) +- Character count display +- Template insertion button +- Preview functionality + +## Questions for Review +1. Should we add a "Test Agent" feature to try the personality prompt? +2. Is the tabbed editor the right approach or should all fields be on one page? +3. Should expertise be free-form tags or a predefined list? +4. Should model parameters have "presets" (conservative, balanced, creative)? +5. How should we handle versioning of agent types? +6. Should there be an approval workflow for activating agent types? + +## How to View +Navigate to: `/prototypes/agent-configuration` + +Click through the views: +1. Start on list view +2. Click any card to see detail view +3. Click "Edit" to see editor view +4. Click "Create Agent Type" to see editor in create mode + +## Next Steps +After approval: +1. Implement form validation with react-hook-form and zod +2. Connect to agent type CRUD API +3. Add real model list from API +4. Implement tag input component for expertise +5. Add personality prompt templates +6. Implement MCP permission verification +7. Add loading skeletons and error states diff --git a/frontend/src/app/[locale]/prototypes/agent-configuration/page.tsx b/frontend/src/app/[locale]/prototypes/agent-configuration/page.tsx new file mode 100644 index 0000000..88b962b --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/agent-configuration/page.tsx @@ -0,0 +1,940 @@ +'use client'; + +import { useState } from 'react'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Separator } from '@/components/ui/separator'; +import { Checkbox } from '@/components/ui/checkbox'; +import { + Bot, + Plus, + Search, + Settings, + ChevronRight, + ArrowLeft, + Copy, + Trash2, + Save, + Eye, + Edit, + Sliders, + Shield, + MessageSquare, + Cpu, + Zap, + Code, + FileText, + GitBranch, + CheckCircle2, + AlertTriangle, +} from 'lucide-react'; + +// Mock data for agent types +const mockAgentTypes = [ + { + id: 'type-001', + name: 'Product Owner', + description: 'Manages product backlog, defines user stories, and prioritizes features', + expertise: ['Requirements', 'User Stories', 'Prioritization', 'Stakeholder Management'], + model: 'claude-opus-4-5-20251101', + status: 'active', + instanceCount: 3, + lastModified: '2025-01-20', + }, + { + id: 'type-002', + name: 'Software Architect', + description: 'Designs system architecture, makes technology decisions, and ensures scalability', + expertise: ['System Design', 'API Design', 'Database Architecture', 'Security'], + model: 'claude-opus-4-5-20251101', + status: 'active', + instanceCount: 2, + lastModified: '2025-01-18', + }, + { + id: 'type-003', + name: 'Backend Engineer', + description: 'Implements server-side logic, APIs, and database interactions', + expertise: ['Python', 'FastAPI', 'PostgreSQL', 'Redis', 'Testing'], + model: 'claude-sonnet-4-20250514', + status: 'active', + instanceCount: 5, + lastModified: '2025-01-22', + }, + { + id: 'type-004', + name: 'Frontend Engineer', + description: 'Builds user interfaces using modern React and Next.js', + expertise: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'Testing'], + model: 'claude-sonnet-4-20250514', + status: 'active', + instanceCount: 4, + lastModified: '2025-01-21', + }, + { + id: 'type-005', + name: 'QA Engineer', + description: 'Creates test plans, writes automated tests, and ensures quality', + expertise: ['Test Planning', 'E2E Testing', 'Unit Testing', 'Bug Reporting'], + model: 'claude-sonnet-4-20250514', + status: 'draft', + instanceCount: 0, + lastModified: '2025-01-19', + }, + { + id: 'type-006', + name: 'DevOps Engineer', + description: 'Manages infrastructure, CI/CD pipelines, and deployment processes', + expertise: ['Docker', 'Kubernetes', 'CI/CD', 'Monitoring', 'Security'], + model: 'claude-sonnet-4-20250514', + status: 'inactive', + instanceCount: 1, + lastModified: '2025-01-15', + }, +]; + +// Full agent type detail for editor +const mockAgentTypeDetail = { + id: 'type-002', + name: 'Software Architect', + description: 'Designs system architecture, makes technology decisions, and ensures scalability. Works closely with the Product Owner to understand requirements and with Engineers to implement solutions.', + expertise: ['System Design', 'API Design', 'Database Architecture', 'Security', 'Scalability'], + model: { + primary: 'claude-opus-4-5-20251101', + failover: 'claude-sonnet-4-20250514', + }, + parameters: { + temperature: 0.7, + maxTokens: 8192, + topP: 0.95, + }, + mcpPermissions: [ + { id: 'gitea', name: 'Gitea', enabled: true, scopes: ['read', 'write', 'issues'] }, + { id: 'knowledge', name: 'Knowledge Base', enabled: true, scopes: ['read', 'write'] }, + { id: 'filesystem', name: 'Filesystem', enabled: true, scopes: ['read', 'write'] }, + { id: 'slack', name: 'Slack', enabled: false, scopes: [] }, + { id: 'jira', name: 'Jira', enabled: false, scopes: [] }, + ], + personalityPrompt: `You are a Senior Software Architect with 15+ years of experience designing scalable, maintainable systems. Your approach is: + +1. **Pragmatic**: You favor proven solutions over cutting-edge unless there's a clear benefit +2. **Security-minded**: Security is a first-class concern, not an afterthought +3. **Documentation-focused**: You believe in architecture decision records (ADRs) +4. **Collaborative**: You seek input from engineers and stakeholders before making major decisions + +When designing systems: +- Start with requirements and constraints +- Consider scalability, maintainability, and operational concerns +- Document decisions and their rationale +- Provide clear guidance for implementation teams + +Your communication style is clear, structured, and respectful. You explain complex concepts simply and always justify your recommendations.`, + status: 'active', + instanceCount: 2, + createdAt: '2025-01-10', + lastModified: '2025-01-18', +}; + +// View states +type ViewState = 'list' | 'detail' | 'editor'; + +// Status badge for agent types +function AgentTypeStatusBadge({ status }: { status: string }) { + const variants: Record = { + active: { + label: 'Active', + className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', + }, + draft: { + label: 'Draft', + className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', + }, + inactive: { + label: 'Inactive', + className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200', + }, + }; + + const variant = variants[status] || variants.inactive; + + return ( + + {variant.label} + + ); +} + +// Agent Type List View +function AgentTypeListView({ + onSelect, + onCreate, +}: { + onSelect: (id: string) => void; + onCreate: () => void; +}) { + const [searchQuery, setSearchQuery] = useState(''); + const [statusFilter, setStatusFilter] = useState('all'); + + const filteredTypes = mockAgentTypes.filter((type) => { + const matchesSearch = + type.name.toLowerCase().includes(searchQuery.toLowerCase()) || + type.description.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesStatus = statusFilter === 'all' || type.status === statusFilter; + return matchesSearch && matchesStatus; + }); + + return ( +
+ {/* Header */} +
+
+

Agent Types

+

+ Configure templates for spawning AI agent instances +

+
+ +
+ + {/* Filters */} +
+
+ + setSearchQuery(e.target.value)} + className="pl-9" + /> +
+ +
+ + {/* Agent Type Grid */} +
+ {filteredTypes.map((type) => ( + onSelect(type.id)} + > + +
+
+ +
+ +
+ {type.name} + {type.description} + + +
+ {/* Expertise tags */} +
+ {type.expertise.slice(0, 3).map((skill) => ( + + {skill} + + ))} + {type.expertise.length > 3 && ( + + +{type.expertise.length - 3} + + )} +
+ + + + {/* Metadata */} +
+
+ + {type.model.split('-').slice(1, 2).join(' ')} +
+
+ + {type.instanceCount} instances +
+
+
+ + + ))} +
+ + {filteredTypes.length === 0 && ( +
+ +

No agent types found

+

Try adjusting your search or filters

+
+ )} +
+ ); +} + +// Agent Type Detail View +function AgentTypeDetailView({ + onBack, + onEdit, +}: { + onBack: () => void; + onEdit: () => void; +}) { + const type = mockAgentTypeDetail; + + return ( +
+ {/* Header */} +
+ +
+
+

{type.name}

+ +
+

Last modified: {type.lastModified}

+
+
+ + +
+
+ +
+ {/* Main Content */} +
+ {/* Description Card */} + + + + + Description + + + +

{type.description}

+ + + + {/* Expertise Card */} + + + + + Expertise Areas + + + +
+ {type.expertise.map((skill) => ( + + {skill} + + ))} +
+ + + + {/* Personality Prompt Card */} + + + + + Personality Prompt + + + + 
+                {type.personalityPrompt}
+
+ + + + {/* MCP Permissions Card */} + + + + + MCP Permissions + + + Model Context Protocol servers this agent can access + + + +
+ {type.mcpPermissions.map((perm) => ( +
+
+
+ {perm.enabled ? ( + + ) : ( + + )} +
+
+

{perm.name}

+

+ {perm.enabled ? perm.scopes.join(', ') : 'Not enabled'} +

+
+
+ + {perm.enabled ? 'Enabled' : 'Disabled'} + +
+ ))} +
+ + +
+ + {/* Sidebar */} +
+ {/* Model Configuration */} + + + + + Model Configuration + + + +
+

Primary Model

+

{type.model.primary}

+
+
+

Failover Model

+

{type.model.failover}

+
+ +
+
+ Temperature + {type.parameters.temperature} +
+
+ Max Tokens + {type.parameters.maxTokens.toLocaleString()} +
+
+ Top P + {type.parameters.topP} +
+
+ + + + {/* Instance Stats */} + + + + + Instances + + + +
+

{type.instanceCount}

+

Active instances

+
+ + + + + {/* Danger Zone */} + + + + + Danger Zone + + + + + + + +
+
+
+ ); +} + +// Agent Type Editor View +function AgentTypeEditorView({ + onBack, + onSave, + isNew = false, +}: { + onBack: () => void; + onSave: () => void; + isNew?: boolean; +}) { + const [activeTab, setActiveTab] = useState('basic'); + + return ( +
+ {/* Header */} +
+ +
+

+ {isNew ? 'Create Agent Type' : 'Edit Agent Type'} +

+

+ {isNew + ? 'Define a new agent type template' + : 'Modify agent type configuration'} +

+
+
+ + +
+
+ + {/* Editor Tabs */} + + + + + Basic Info + + + + Model + + + + Permissions + + + + Personality + + + + {/* Basic Info Tab */} + + + + Basic Information + + Define the agent type name, description, and expertise areas + + + +
+
+ + +
+
+ + +
+
+ +
+ +