first commit all files
This commit is contained in:
dwindown
299
AGENTIC_VIBE_UI_PLAN.md
Normal file
299
AGENTIC_VIBE_UI_PLAN.md
Normal file
@@ -0,0 +1,299 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user