wp-agentic-writer/agentic-vibe-improved.md

Improved Agentic Vibe UI Design Plan

Bootstrap + Custom CSS Approach (User-Centric, Not Theme-Centric)

---

Executive Summary

Problem with Original Plan:

• Over-emphasis on terminal aesthetics at the expense of usability
• Terminal UI conventions don't translate well to settings panels (low scannability, cognitive load)
• Command palette, typing effects, and "live activity" are nice-to-have but add complexity/friction
• Risk: Users come to configure, not to enjoy the visual experience
• Maintenance burden: ASCII boxes, animations, and simulated CLI behavior require ongoing refinement

Philosophy Shift:

• Form > Function > Aesthetics (in that order)
• Use agentic principles (intelligence, autonomy, status visibility) not agentic visual tropes (terminals, ASCII, artificial constraints)
• Bootstrap ensures consistency, accessibility, and mobile responsiveness by default
• Custom CSS adds visual polish without compromising UX fundamentals

---

Design Approach: Smart Defaults + Agentic Polish

Core Principle

"Modern SaaS + Subtle AI Intelligence Indicators"

Think: Vercel, Linear, Anthropic's own interfaces — they feel "agentic" because:

• They show you real-time processing status clearly
• They use predictive UX (offer what you likely need next)
• They employ subtle motion to guide attention
• They prioritize data clarity over theatrical presentation
• Status is obvious at a glance, not buried in narrative format

---

Design Foundation (Bootstrap 5 Base)

Color System

/* Primary: Modern AI Blue (not terminal green) */
--primary: #3b82f6          /* AI/Logic color */
--primary-dark: #1e40af
--primary-light: #dbeafe

/* Neutral: Professional grays */
--bg-primary: #ffffff       /* Light mode default */
--bg-secondary: #f9fafb
--bg-tertiary: #f3f4f6
--text-primary: #111827
--text-secondary: #6b7280
--text-tertiary: #9ca3af

/* Status (functional, meaningful) */
--success: #10b981         /* Green = running/ready */
--warning: #f59e0b         /* Amber = attention needed */
--error: #ef4444           /* Red = failure */
--info: #06b6d4            /* Cyan = information */

/* Dark Mode (for "agentic" vibe without terminal grimness) */
--dark-bg-primary: #0f172a    /* Deep slate, not pure black */
--dark-bg-secondary: #1e293b
--dark-bg-tertiary: #334155
--dark-text-primary: #f1f5f9
--dark-text-secondary: #cbd5e1
--dark-accent: #0ea5e9      /* Bright cyan accent */

Typography (Bootstrap Default + Custom)

/* Keep Bootstrap's semantic hierarchy */
/* h1-h6 responsive sizes, inherited from Bootstrap */

/* Settings-specific hierarchy */
--font-family-mono: 'Fira Code', 'JetBrains Mono', monospace;
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

/* Intentional monospace use: only for actual values/codes */
.api-key, .model-id, .cost-value, .timestamp, code { font-family: var(--font-family-mono); }

---

Page Structure (Smart Layout, Not Theater)

1. Header Section (Real Status, Not Simulation)

Instead of:

> wp-agentic-writer --version 0.1.3
[●] Connected to OpenRouter API
[i] 142 articles generated | $12.45 total cost

Use (Bootstrap Alert + Custom Badge System):

<div class="agentic-header mb-4">
  <div class="d-flex justify-content-between align-items-center">
    <div>
      <h1>WP Agentic Writer</h1>
      <p class="text-muted mb-0">v0.1.3 · Settings & Configuration</p>
    </div>
    <div class="status-badge">
      <span class="badge bg-success">
        <i class="icon-dot animate-pulse"></i> Connected
      </span>
    </div>
  </div>

  <!-- Real metrics, clearly presented -->
  <div class="row mt-3">
    <div class="col-md-3">
      <div class="stat-card">
        <p class="stat-label">Articles Generated</p>
        <h3 class="stat-value">142</h3>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card">
        <p class="stat-label">Total Cost</p>
        <h3 class="stat-value">$12.45</h3>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card">
        <p class="stat-label">API Status</p>
        <h3 class="stat-value stat-online">Online</h3>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card">
        <p class="stat-label">Last Updated</p>
        <h3 class="stat-value">2m ago</h3>
      </div>
    </div>
  </div>
</div>

CSS:

.agentic-header {
  border-bottom: 2px solid var(--primary);
  padding-bottom: 1.5rem;
}

.stat-card {
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  transition: all 150ms ease-out;
}

.stat-card:hover {
  background: var(--bg-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary);
}

.stat-online {
  color: var(--success);
}

/* Pulse animation for "live" indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

Why This Works:

• ✅ Scans instantly (grid layout, clear labels)
• ✅ Real data, not aesthetic simulation
• ✅ Responsive by default (Bootstrap grid)
• ✅ Agentic vibe from functionality (live status), not from forced terminal look
• ✅ Accessible for screen readers

---

2. Workflow Pipeline (Minimal, Functional)

Instead of:

[Scribble] → [Research] → [Plan] → [Execute] → [Revise]
   ✓           ✓           ✓         ⟳          ○

Use (Simple progress indicator with Bootstrap):

<div class="workflow-progress mb-4">
  <div class="progress-header">
    <h4>Processing Pipeline</h4>
    <span class="badge bg-info">Currently: Executing</span>
  </div>
  
  <div class="progress-steps">
    <div class="step completed">
      <span class="step-circle">✓</span>
      <span class="step-label">Scribble</span>
    </div>
    <div class="step-connector completed"></div>
    
    <div class="step completed">
      <span class="step-circle">✓</span>
      <span class="step-label">Research</span>
    </div>
    <div class="step-connector completed"></div>
    
    <div class="step completed">
      <span class="step-circle">✓</span>
      <span class="step-label">Plan</span>
    </div>
    <div class="step-connector active"></div>
    
    <div class="step active">
      <span class="step-circle animate-spin">⟳</span>
      <span class="step-label">Execute</span>
    </div>
    <div class="step-connector pending"></div>
    
    <div class="step pending">
      <span class="step-circle">○</span>
      <span class="step-label">Revise</span>
    </div>
  </div>
</div>

CSS:

.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  flex: 0 0 auto;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--text-tertiary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: all 200ms ease-out;
}

.step.completed .step-circle {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.step.active .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.15);
}

.step.pending .step-circle {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
  opacity: 0.5;
}

.step-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
  width: 60px;
}

.step-connector {
  flex: 1;
  height: 2px;
  background: var(--text-tertiary);
  margin: 0 0.5rem;
  position: relative;
  top: -20px;
  min-width: 40px;
}

.step-connector.completed {
  background: var(--success);
}

.step-connector.active {
  background: var(--primary);
  animation: slideProgress 1s ease-in-out infinite;
}

@keyframes slideProgress {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 2s linear infinite;
}

Why This Works:

• ✅ Clear visual progress (no cognitive load)
• ✅ Only uses color/state meaningfully
• ✅ Responsive: flex layout adapts to mobile
• ✅ Agentic intelligence shown via real status, not artificial movement
• ✅ Easy to understand at a glance

---

3. Tab Navigation (Familiar Bootstrap Pattern)

Don't reinvent tabs. Bootstrap tabs already work well:

<ul class="nav nav-tabs nav-fill mb-4" role="tablist">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#general">
      <i class="icon-settings me-2"></i> General
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#models">
      <i class="icon-brain me-2"></i> AI Models
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#logs">
      <i class="icon-chart me-2"></i> Cost Log
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#guide">
      <i class="icon-help me-2"></i> Guide
    </button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="general">
    <!-- General settings -->
  </div>
  <div class="tab-pane fade" id="models">
    <!-- Model configuration -->
  </div>
  <!-- ... more tabs ... -->
</div>

Custom CSS for Agentic Polish:

.nav-tabs {
  border-bottom: 2px solid var(--primary);
}

.nav-tabs .nav-link {
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 150ms ease-out;
  position: relative;
}

.nav-tabs .nav-link:hover {
  color: var(--primary);
  background: var(--bg-secondary);
}

.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  animation: fadeInTab 200ms ease-out;
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

Why This Works:

• ✅ Users already know how tabs work
• ✅ No learning curve, no friction
• ✅ Fully responsive
• ✅ Accessible (ARIA attributes included)

---

4. Cost Log Section (Data Table, Not Terminal Theater)

Problem with Terminal Approach:

• Cost logs have actual rows/columns — use <table>!
• Terminal simulation means sacrificing sortability, filtering, export
• Eye strain from low contrast, monospace everywhere
• Non-standard means mobile-unfriendly

Better Approach (Bootstrap Table):

<div class="cost-log-section">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>API Usage & Cost Log</h4>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-sm btn-outline-secondary">Export CSV</button>
      <button type="button" class="btn btn-sm btn-outline-secondary">Refresh</button>
    </div>
  </div>

  <!-- Filter Bar -->
  <div class="row mb-3 g-2">
    <div class="col-md-3">
      <select class="form-select form-select-sm">
        <option>All Models</option>
        <option>Claude 3.5 Sonnet</option>
        <option>GPT-4o</option>
        <option>Gemini 2.5</option>
      </select>
    </div>
    <div class="col-md-3">
      <select class="form-select form-select-sm">
        <option>All Time</option>
        <option>Today</option>
        <option>This Week</option>
        <option>This Month</option>
      </select>
    </div>
    <div class="col-md-6">
      <input type="search" class="form-control form-control-sm" placeholder="Search by action...">
    </div>
  </div>

  <!-- Table with Sorting & Highlighting -->
  <div class="table-responsive">
    <table class="table table-hover table-sm cost-table">
      <thead class="table-light">
        <tr>
          <th scope="col">Timestamp</th>
          <th scope="col">Post ID</th>
          <th scope="col">Model</th>
          <th scope="col">Action</th>
          <th scope="col" class="text-end">Cost</th>
          <th scope="col" class="text-center">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row-success">
          <td><code class="code-muted">2026-01-26 12:30:15</code></td>
          <td><code>#142</code></td>
          <td><span class="badge bg-primary">claude-3.5-sonnet</span></td>
          <td>Writing</td>
          <td class="text-end"><strong>$0.0847</strong></td>
          <td class="text-center">
            <i class="icon-check-circle text-success"></i>
          </td>
        </tr>
        <tr class="row-warning">
          <td><code class="code-muted">2026-01-26 12:28:03</code></td>
          <td><code>#141</code></td>
          <td><span class="badge bg-info">gemini-2.5-flash</span></td>
          <td>Planning</td>
          <td class="text-end"><strong>$0.0012</strong></td>
          <td class="text-center">
            <i class="icon-alert-circle text-warning"></i>
          </td>
        </tr>
        <!-- More rows -->
      </tbody>
    </table>
  </div>

  <!-- Summary Footer -->
  <div class="row mt-3 p-3 bg-light rounded">
    <div class="col-md-6">
      <p class="mb-0"><small class="text-muted">Showing 1-10 of 142 entries</small></p>
    </div>
    <div class="col-md-6 text-end">
      <p class="mb-0">
        <strong>Total Cost:</strong> <code>$8.45</code> this month
      </p>
    </div>
  </div>
</div>

CSS:

.cost-table {
  font-size: 0.9rem;
}

.cost-table code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
}

.code-muted {
  color: var(--text-tertiary);
}

.cost-table tbody tr {
  transition: background-color 150ms ease-out;
}

.cost-table tbody tr:hover {
  background: var(--bg-secondary) !important;
}

.cost-table .row-success {
  border-left: 3px solid var(--success);
}

.cost-table .row-warning {
  border-left: 3px solid var(--warning);
}

.cost-table .row-error {
  border-left: 3px solid var(--error);
}

.table-responsive {
  border-radius: 8px;
  border: 1px solid var(--bg-tertiary);
  overflow: hidden;
}

Why This Works:

• ✅ Proper semantic HTML (<table>)
• ✅ Fully sortable (add data-sortable + JS)
• ✅ Filterable, searchable, exportable
• ✅ Mobile-responsive (table-responsive)
• ✅ Accessible (scope attributes, semantic headers)
• ✅ Shows status at a glance (left border + icon)
• ✅ Agentic: Real operational data, clearly presented

---

5. Model Configuration Cards (Grid, Not Boxes)

<div class="models-section">
  <h4 class="mb-3">AI Models Configuration</h4>
  
  <div class="row g-3">
    <div class="col-md-6">
      <div class="model-card">
        <div class="model-header">
          <div>
            <h5>Claude 3.5 Sonnet</h5>
            <p class="text-muted mb-0">anthropic/claude-3.5-sonnet</p>
          </div>
          <span class="badge bg-success">Active</span>
        </div>

        <!-- Usage Progress -->
        <div class="model-stat mt-3">
          <label class="form-label">
            <small>Usage This Month</small>
          </label>
          <div class="progress">
            <div class="progress-bar" style="width: 87%"></div>
          </div>
          <small class="text-muted">142 / 163 requests (87%)</small>
        </div>

        <!-- Metrics Grid -->
        <div class="model-metrics mt-3">
          <div class="metric">
            <span class="metric-label">Cost</span>
            <span class="metric-value">$8.45</span>
          </div>
          <div class="metric">
            <span class="metric-label">Avg Time</span>
            <span class="metric-value">1.2s</span>
          </div>
          <div class="metric">
            <span class="metric-label">Quality</span>
            <span class="metric-value">9.2/10</span>
          </div>
        </div>

        <!-- Actions -->
        <div class="model-actions mt-3">
          <button class="btn btn-sm btn-outline-primary w-100">
            View Detailed Stats
          </button>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <!-- Repeat for other models -->
    </div>
  </div>
</div>

CSS:

.model-card {
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: 8px;
  padding: 1.25rem;
  transition: all 200ms ease-out;
}

.model-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.model-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.model-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bg-tertiary);
}

.metric {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.25rem;
}

.metric-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  font-family: var(--font-family-mono);
}

Why This Works:

• ✅ Bootstrap grid = responsive multi-column
• ✅ Cards are familiar UI pattern
• ✅ Metrics are actionable, scannable
• ✅ Hover state shows interactivity
• ✅ Easy to expand for more models

---

Agentic Vibe Through Polish, Not Theater

Micro-interactions

/* Button feedback */
.btn {
  transition: all 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active {
  transform: scale(0.98);
}

/* Form input focus (AI-forward styling) */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Status badges with subtle glow */
.badge {
  transition: all 150ms ease-out;
}

.badge.bg-success {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Smooth state transitions */
.spinner-border {
  animation: spinner-border 0.75s linear infinite;
}

Real-time Status Signals

<!-- Use actual status indicators, not simulated ones -->
<div class="live-status-banner alert alert-info" role="alert">
  <i class="icon-pulse animate-pulse"></i>
  <strong>Processing Article #143</strong>
  <span class="ms-2 text-muted">Currently in Research phase · 45% complete</span>
</div>

Subtle Dark Mode

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --primary: #0ea5e9;     /* Brighter in dark mode */
  }
}

---

Quick Implementation Roadmap

Phase 1: Foundation (1-2 days)

• Set up CSS variables (colors, spacing, fonts)
• Create Bootstrap customization (light/dark mode)
• Build reusable component library (cards, stats, badges)
• Apply to current settings page template

Phase 2: Enhanced UX (2-3 days)

• Implement stat cards header
• Build workflow progress indicator
• Redesign cost log table with filtering
• Add model configuration cards

Phase 3: Polish (1-2 days)

• Add animations (transitions, hover states)
• Implement live status banners
• Test mobile responsiveness
• Dark mode refinement

Phase 4: Advanced (Optional, 2-3 days)

• Add export functionality (CSV, JSON)
• Implement search/filter logic in JS
• Add settings export/import
• Keyboard shortcuts for power users

---

Technical Implementation Notes

CSS Architecture

styles/
├── variables.css          (color system, spacing scale)
├── bootstrap-custom.css   (Bootstrap overrides)
├── components.css         (cards, badges, buttons)
├── layout.css            (grid, sections, spacing)
├── animations.css        (transitions, keyframes)
└── dark-mode.css         (@media prefers-color-scheme)

No New Dependencies

• Keep existing: jQuery, Select2, Bootstrap 5
• Optional: Use AOS.js for scroll animations (lightweight)
• Avoid: Terminal emulators (xterm.js), typing libraries, sound effects

Performance

• All CSS custom properties for instant theme switching
• No heavy animations (60fps friendly)
• Bootstrap utilities for responsive layouts
• Minimal JavaScript (mostly Bootstrap's out-of-the-box)

---

Why This Approach Wins

Aspect	Terminal Plan	This Plan
Scannability	Low (text-heavy)	High (visual hierarchy)
Mobile Support	Poor	Excellent (Bootstrap grid)
Accessibility	Risky (semantic loss)	Strong (semantic HTML)
Maintenance	High (custom behavior)	Low (Bootstrap base)
User Friction	Medium (learning curve)	None (familiar patterns)
Agentic Feel	Visual (aesthetic)	Functional (real status)
Extensibility	Hard (locked to theme)	Easy (component-based)
Performance	Heavier (animations)	Lighter (native CSS)
Team Velocity	Slow (custom)	Fast (Bootstrap + CSS)

---

Visual Philosophy

DO:

• ✅ Use color meaningfully (status = function)
• ✅ Show real-time data clearly (cost, usage, status)
• ✅ Employ subtle motion (attention guidance)
• ✅ Embrace typography hierarchy
• ✅ Respect Bootstrap responsive defaults
• ✅ Polish through micro-interactions
• ✅ Let functionality convey "intelligence"

DON'T:

• ❌ Simulate terminal UI (compromises UX)
• ❌ Add ASCII art (reduces readability)
• ❌ Force monospace fonts (except for actual code)
• ❌ Implement fake workflows (use real data)
• ❌ Add unnecessary animations (cognitive load)
• ❌ Break accessible defaults
• ❌ Sacrifice mobile experience for desktop vibes

---

The Bottom Line

"Agentic" doesn't mean terminal-themed. It means intelligent, responsive, status-aware, and delightful to use.

This plan delivers that through:

1. Real-time operational visibility (processing status, costs, usage)
2. Smart information hierarchy (card-based, scannable)
3. Responsive design (desktop, tablet, mobile)
4. Polish without friction (animations, colors, transitions)
5. Maintainable code (Bootstrap + CSS)

The interface feels agentic because it shows the agent working intelligently — not because it wears a terminal costume.