# Agentic Vibe UI Design Plan

## Concept Overview
Transform the settings page into an **AI-first, developer-centric interface** that reflects the "agentic" nature of the plugin - autonomous, intelligent, and workflow-driven.

## Design Philosophy

### Core Principles
1. **Terminal/CLI Aesthetic** - Embrace developer tools aesthetics (VS Code, terminal, code editors)
2. **Real-time Feedback** - Show AI "thinking" and processing states
3. **Workflow Visualization** - Display the 5-phase workflow prominently
4. **Data-Driven** - Emphasize metrics, costs, and performance
5. **Dark Mode First** - Modern, eye-friendly interface

---

## Proposed Design Elements

### 1. **Terminal-Inspired Header**
```
┌─────────────────────────────────────────────────────────────┐
│ > wp-agentic-writer --version 0.1.3                        │
│   [●] Connected to OpenRouter API                          │
│   [i] 142 articles generated | $12.45 total cost          │
└─────────────────────────────────────────────────────────────┘
```

**Features:**
- Monospace font (Fira Code, JetBrains Mono)
- Green/amber status indicators
- Command-line style output
- Real-time API connection status

### 2. **Workflow Pipeline Visualization**
```
[Scribble] → [Research] → [Plan] → [Execute] → [Revise]
   ✓           ✓           ✓         ⟳          ○
```

**Features:**
- Horizontal pipeline with progress indicators
- Show which phase is currently active
- Click to jump to relevant settings
- Animated transitions between phases

### 3. **Code Editor-Style Tabs**
```
┌─[ General ]─┬─[ Models ]─┬─[ Cost Log ]─┬─[ Guide ]─┐
│                                                        │
│  Settings content here...                             │
│                                                        │
└────────────────────────────────────────────────────────┘
```

**Features:**
- VS Code-style tab design
- File icon indicators
- Close/minimize animations
- Breadcrumb navigation

### 4. **Terminal Output for Cost Log**
```
$ tail -f /var/log/wpaw/costs.log

[2026-01-26 12:30:15] POST #142 | claude-3.5-sonnet | writing | $0.0847
[2026-01-26 12:28:03] POST #141 | gemini-2.5-flash  | planning | $0.0012
[2026-01-26 12:25:41] POST #140 | gpt-4o            | image | $0.0030
[2026-01-26 12:20:18] POST #139 | claude-3.5-sonnet | writing | $0.0921

> filter --model claude-3.5-sonnet --date today
```

**Features:**
- Log file aesthetic
- Syntax highlighting for different actions
- Command-line style filters
- Real-time streaming updates

### 5. **AI Model Cards with Stats**
```
┌─────────────────────────────────────────────┐
│ anthropic/claude-3.5-sonnet                 │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 87% usage │
│                                             │
│ • 142 requests this month                   │
│ • $8.45 total cost                          │
│ • Avg response: 1.2s                        │
│ • Quality score: 9.2/10                     │
└─────────────────────────────────────────────┘
```

**Features:**
- Progress bars for usage
- Real-time metrics
- Performance indicators
- Cost breakdown

### 6. **Live Activity Monitor**
```
┌─ System Status ──────────────────────────────┐
│                                              │
│  CPU: ▓▓▓▓▓▓▓▓░░░░░░░░ 45%                 │
│  API: ▓▓░░░░░░░░░░░░░░ 12%                 │
│  Queue: 3 pending requests                  │
│                                              │
│  [●] Writing article #143...                │
│  [○] Waiting for refinement...              │
└──────────────────────────────────────────────┘
```

**Features:**
- Real-time processing status
- Queue visualization
- Resource usage meters
- Active task indicators

---

## Color Scheme Options

### Option A: **Dark Terminal** (Recommended)
```css
Background: #1e1e1e (VS Code dark)
Foreground: #d4d4d4
Accent: #4ec9b0 (teal/cyan)
Success: #4ec9b0
Warning: #ce9178
Error: #f48771
```

### Option B: **Cyberpunk Neon**
```css
Background: #0a0e27
Foreground: #e0e0e0
Accent: #00ffff (cyan)
Success: #00ff00
Warning: #ffff00
Error: #ff0066
```

### Option C: **Hacker Green**
```css
Background: #0c0c0c
Foreground: #00ff00
Accent: #00cc00
Success: #00ff00
Warning: #ffcc00
Error: #ff3300
```

---

## Typography

### Recommended Fonts
1. **Monospace:** JetBrains Mono, Fira Code, Source Code Pro
2. **UI Text:** Inter, SF Pro, Segoe UI
3. **Headers:** Space Grotesk, Outfit

### Font Sizes
- Terminal output: 13px
- Body text: 14px
- Headers: 18px-24px
- Code: 12px

---

## Interactive Elements

### 1. **Command Palette** (Ctrl/Cmd + K)
```
> Search settings...
  ─────────────────────────────────────
  → Change writing model
  → View cost breakdown
  → Refresh API models
  → Export cost log
  → Test API connection
```

### 2. **Toast Notifications**
```
┌─────────────────────────────────┐
│ ✓ Settings saved successfully   │
│   Changes applied to 6 models   │
└─────────────────────────────────┘
```

### 3. **Inline Validation**
```
API Key: ••••••••••••••••••••••••••• [✓]
         └─ Valid • Last tested 2m ago
```

---

## Animation & Transitions

### Key Animations
1. **Typing effect** for terminal output
2. **Pulse animation** for active processes
3. **Slide transitions** between tabs
4. **Fade in/out** for modals and toasts
5. **Progress bars** with smooth fills

### Micro-interactions
- Hover effects on buttons (glow, scale)
- Click feedback (ripple effect)
- Loading spinners (terminal-style)
- Success checkmarks (animated)

---

## Implementation Phases

### Phase 1: Foundation (Quick Win)
- [ ] Apply dark theme color scheme
- [ ] Switch to monospace fonts for key areas
- [ ] Add terminal-style header
- [ ] Implement basic animations

### Phase 2: Enhanced UX
- [ ] Create workflow pipeline visualization
- [ ] Redesign cost log as terminal output
- [ ] Add model usage statistics
- [ ] Implement command palette

### Phase 3: Advanced Features
- [ ] Real-time activity monitor
- [ ] Live API status indicators
- [ ] Performance metrics dashboard
- [ ] Advanced filtering with CLI-style commands

### Phase 4: Polish
- [ ] Add sound effects (optional)
- [ ] Implement keyboard shortcuts
- [ ] Create onboarding tour
- [ ] Add theme switcher (light/dark/custom)

---

## Technical Requirements

### CSS Framework
- Keep Bootstrap 5 for grid/utilities
- Add custom CSS for terminal aesthetic
- Use CSS variables for theming

### JavaScript Libraries
- Keep existing: jQuery, Select2
- Add: anime.js (animations), typed.js (typing effect)
- Consider: xterm.js (full terminal emulation)

### Performance
- Lazy load terminal output
- Virtualize long cost logs
- Debounce real-time updates
- Cache API responses

---

## Inspiration Sources

1. **VS Code Settings** - Clean, organized, searchable
2. **GitHub CLI** - Terminal aesthetic, clear output
3. **Vercel Dashboard** - Modern, data-driven
4. **Railway.app** - Developer-focused, beautiful
5. **Linear.app** - Smooth animations, keyboard-first

---

## Next Steps

1. **Review & Approve** this design direction
2. **Create mockups** for key screens
3. **Build prototype** of one section (e.g., cost log)
4. **Gather feedback** and iterate
5. **Implement** in phases

---

## Questions to Consider

1. Should we support **light mode** or go dark-only?
2. Do we want **sound effects** for actions?
3. Should the terminal be **interactive** (accept commands)?
4. Do we need **mobile responsiveness** or desktop-only?
5. Should we add **AI assistant chat** in the settings?

---

## Estimated Development Time

- **Phase 1:** 4-6 hours
- **Phase 2:** 8-12 hours
- **Phase 3:** 12-16 hours
- **Phase 4:** 6-8 hours

**Total:** ~30-42 hours for full implementation