dwindown/wp-agentic-writer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
wp-agentic-writer/AGENTIC_VIBE_UI_PLAN.md
dwindown 97426d5ab1 first commit all files
2026-01-28 00:26:00 +07:00

8.7 KiB
Raw Permalink Blame History

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)

Background: #1e1e1e (VS Code dark)
Foreground: #d4d4d4
Accent: #4ec9b0 (teal/cyan)
Success: #4ec9b0
Warning: #ce9178
Error: #f48771

Option B: Cyberpunk Neon

Background: #0a0e27
Foreground: #e0e0e0
Accent: #00ffff (cyan)
Success: #00ff00
Warning: #ffff00
Error: #ff0066

Option C: Hacker Green

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