# Project Dashboard - Design Prototype

## Overview
The Project Dashboard provides a comprehensive view of a Syndarix project, allowing users to monitor agent activity, sprint progress, and issue status at a glance. This is the primary interface users will see when managing an AI-driven software project.

## User Stories
- As a project owner, I want to see the current status of my project at a glance so I can quickly understand progress
- As a project owner, I want to monitor which agents are active and what they're working on
- As a project owner, I want to track sprint progress and identify blockers
- As a project owner, I want to see recent activity to stay informed of project developments
- As a project owner, I want to take quick actions (pause, run sprint) without navigating away

## Key Screens

### 1. 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)
- Breadcrumb navigation

### 2. 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
- Quick access to agent management

### 3. Sprint Overview
- Current sprint name and date range
- Sprint progress bar with percentage
- Issue statistics grid (Completed, In Progress, Blocked, To Do)
- Visual burndown chart with ideal vs actual lines
- Sprint selector dropdown for historical data

### 4. Issue Summary (Right Sidebar)
- Count of issues by status with color-coded icons
- Quick links to view all issues
- Compact vertical layout for easy scanning

### 5. Recent Activity Feed
- Chronological list of recent project events
- Event type icons (messages, issue updates, status changes, approval requests)
- Agent attribution for each event
- Highlighted items requiring user action
- Quick action buttons for approval requests

## User Flow
1. User navigates to project from project list
2. Dashboard loads with current project state
3. User can scan agent panel to see what's happening
4. User reviews sprint progress and issue counts
5. User checks activity feed for recent updates
6. If approval request exists, user can review and respond
7. User can pause/run sprint or navigate to detailed views

## Design Decisions

### Layout
- Three-column layout on desktop: 2/3 for main content, 1/3 for sidebar
- Main content prioritizes agent panel and sprint overview
- Sidebar contains issue summary and activity feed
- Responsive: stacks vertically on mobile

### Visual Hierarchy
- Project name and status badges are most prominent
- Agent status indicators use traffic light colors (green/yellow/red)
- Action buttons are clearly visible but not overwhelming
- Activity feed uses subtle icons to indicate event types

### Color System
- Status colors follow intuitive patterns:
  - Green: Completed, Active, Success
  - Blue: In Progress, Primary actions
  - Yellow/Orange: Idle, Warning, Pending approval
  - Red: Blocked, Error, Critical
- Uses design system semantic colors (primary, destructive, muted)

### Spacing and Cards
- Each major section is contained in a Card component
- Consistent 24px (gap-6) spacing between cards
- 16px (p-4) internal padding for compact elements
- 24px (p-6) padding for card headers and content

## States

### Loading
- Skeleton placeholders for agent list
- Skeleton for sprint stats grid
- Animated placeholder for burndown chart
- Activity feed shows skeleton items

### Empty
- "No agents assigned" message in agent panel
- "No sprint active" in sprint overview
- "No recent activity" in activity feed

### Error
- Error alert with retry button for failed data loads
- Graceful degradation showing last known state

## Responsive Breakpoints

### Desktop (lg: 1024px+)
- Full three-column layout
- Side-by-side agent cards
- Full burndown chart

### Tablet (md: 768px)
- Two-column layout (main + sidebar stack)
- Agent list in single column
- Compact sprint stats

### Mobile (< 768px)
- Single column, vertical stack
- Collapsible sections for agents
- Simplified burndown (or hidden)
- Touch-friendly action buttons

## Accessibility Notes
- All status indicators have aria-labels
- Color is not the only indicator of status (also uses icons and text)
- Keyboard navigation for all interactive elements
- Focus visible indicators on all buttons
- Screen reader announces activity feed updates

## Components Used
- Card, CardHeader, CardTitle, CardContent, CardDescription
- Button (default, outline, ghost variants)
- Badge (default, secondary, outline variants)
- Tabs, TabsList, TabsTrigger, TabsContent
- Select, SelectContent, SelectItem, SelectTrigger, SelectValue
- Separator
- Lucide icons for visual indicators

## Questions for Review
1. Should the burndown chart be more detailed or is the simplified version sufficient?
2. Is the activity feed length appropriate (5 items) or should more be shown?
3. Should agent cards be expandable to show more details?
4. Is the autonomy level badge prominent enough?
5. Should there be a global "stop all agents" emergency button?

## How to View
Navigate to: `/prototypes/project-dashboard`

## Next Steps
After approval:
1. Implement real-time WebSocket updates for activity feed
2. Connect to actual project and agent APIs
3. Add loading skeletons
4. Implement sprint selector functionality
5. Add agent action dropdown menus
