first commit all files
This commit is contained in:
dwindown
870
agentic-vibe-improved.md
Normal file
870
agentic-vibe-improved.md
Normal file
@@ -0,0 +1,870 @@
|
||||
# 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
|
||||
```css
|
||||
/* 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)
|
||||
```css
|
||||
/* 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):
|
||||
```html
|
||||
<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:**
|
||||
```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):
|
||||
```html
|
||||
<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:**
|
||||
```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:
|
||||
|
||||
```html
|
||||
<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:**
|
||||
```css
|
||||
.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):**
|
||||
|
||||
```html
|
||||
<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:**
|
||||
```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)
|
||||
|
||||
```html
|
||||
<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:**
|
||||
```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
|
||||
```css
|
||||
/* 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
|
||||
```html
|
||||
<!-- 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
|
||||
```css
|
||||
@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.
|
||||
Reference in New Issue
Block a user