# Component Library / Design System

## Design System Approach

**Design System Strategy:** Adopt existing design system (Chakra UI or Ant Design) + AI-specific component extensions

## Core Components

### 1. AI Prompt Input
**Purpose:** Primary interface for natural language task creation and AI interactions
**Variants:** Compact (header), Expanded (full-width), Modal (focused creation)
**States:** Empty, typing, processing, success, error, disabled

### 2. Task Card (Enhanced)
**Purpose:** Display individual tasks with origin tracking and smart actions  
**Variants:** Compact (list view), Detailed (board view), Inline-edit (quick editing)
**States:** Normal, selected, editing, syncing, error, archived

### 3. Context Selector
**Purpose:** Help users specify context for AI operations
**Variants:** Chips (quick selection), Dropdown (full list), Smart (AI-suggested)
**States:** None selected, single selected, multiple selected, loading options

### 4. Status Workflow Indicator
**Purpose:** Visual representation of task progress through BMad/custom workflows
**Variants:** Progress bar (linear), Badge cluster (multiple types), Timeline (historical)
**States:** Not started, in progress, completed, blocked, skipped

### 5. Sync Status Component  
**Purpose:** Real-time indication of Task Master CLI integration health
**Variants:** Icon only (minimal), Detailed (full status), Interactive (click actions)
**States:** Connected, syncing, disconnected, error, manual sync needed

### 6. Bulk Action Toolbar
**Purpose:** Efficient multi-task operations with AI assistance
**Variants:** Floating (appears on selection), Fixed (always visible), Contextual (adaptive)
**States:** No selection, single selected, multiple selected, processing