1085 lines
27 KiB
Markdown
1085 lines
27 KiB
Markdown
# Agentic Vibe Implementation Plan
|
|
**Based on: Improved Agentic Vibe UI Design Plan**
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
This implementation plan transforms the WP Agentic Writer settings page using a **Bootstrap 5 + Custom CSS** approach that prioritizes:
|
|
- **Usability over aesthetics**
|
|
- **Real operational data over simulated terminal output**
|
|
- **Responsive design** (mobile-first)
|
|
- **Maintainability** (standard patterns, minimal custom JS)
|
|
|
|
**Philosophy:** "Agentic" means intelligent, status-aware, and responsive — not terminal-themed.
|
|
|
|
---
|
|
|
|
## Phase 1: Foundation & CSS Variables (Day 1-2)
|
|
|
|
### 1.1 Create CSS Variable System
|
|
**File:** `/assets/css/agentic-variables.css`
|
|
|
|
```css
|
|
:root {
|
|
/* Primary Colors - Modern AI Blue */
|
|
--wpaw-primary: #3b82f6;
|
|
--wpaw-primary-dark: #1e40af;
|
|
--wpaw-primary-light: #dbeafe;
|
|
|
|
/* Neutral Palette */
|
|
--wpaw-bg-primary: #ffffff;
|
|
--wpaw-bg-secondary: #f9fafb;
|
|
--wpaw-bg-tertiary: #f3f4f6;
|
|
--wpaw-text-primary: #111827;
|
|
--wpaw-text-secondary: #6b7280;
|
|
--wpaw-text-tertiary: #9ca3af;
|
|
|
|
/* Status Colors */
|
|
--wpaw-success: #10b981;
|
|
--wpaw-warning: #f59e0b;
|
|
--wpaw-error: #ef4444;
|
|
--wpaw-info: #06b6d4;
|
|
|
|
/* Typography */
|
|
--wpaw-font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
|
|
--wpaw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
|
|
/* Spacing Scale */
|
|
--wpaw-space-xs: 0.25rem;
|
|
--wpaw-space-sm: 0.5rem;
|
|
--wpaw-space-md: 1rem;
|
|
--wpaw-space-lg: 1.5rem;
|
|
--wpaw-space-xl: 2rem;
|
|
|
|
/* Border Radius */
|
|
--wpaw-radius-sm: 4px;
|
|
--wpaw-radius-md: 8px;
|
|
--wpaw-radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--wpaw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--wpaw-shadow-md: 0 4px 12px rgba(59, 130, 246, 0.1);
|
|
--wpaw-shadow-lg: 0 8px 24px rgba(59, 130, 246, 0.15);
|
|
|
|
/* Transitions */
|
|
--wpaw-transition-fast: 150ms ease-out;
|
|
--wpaw-transition-normal: 200ms ease-out;
|
|
--wpaw-transition-slow: 300ms ease-out;
|
|
}
|
|
|
|
/* Dark Mode Variables */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--wpaw-bg-primary: #0f172a;
|
|
--wpaw-bg-secondary: #1e293b;
|
|
--wpaw-bg-tertiary: #334155;
|
|
--wpaw-text-primary: #f1f5f9;
|
|
--wpaw-text-secondary: #cbd5e1;
|
|
--wpaw-text-tertiary: #94a3b8;
|
|
--wpaw-primary: #0ea5e9;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-variables.css`
|
|
- [ ] Enqueue in `class-settings-v2.php` before other styles
|
|
- [ ] Test variable inheritance across components
|
|
|
|
---
|
|
|
|
### 1.2 Bootstrap Customization
|
|
**File:** `/assets/css/agentic-bootstrap-custom.css`
|
|
|
|
```css
|
|
/* Override Bootstrap defaults with our variables */
|
|
.wpaw-settings-v2 {
|
|
--bs-primary: var(--wpaw-primary);
|
|
--bs-success: var(--wpaw-success);
|
|
--bs-warning: var(--wpaw-warning);
|
|
--bs-danger: var(--wpaw-error);
|
|
--bs-info: var(--wpaw-info);
|
|
--bs-body-bg: var(--wpaw-bg-primary);
|
|
--bs-body-color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
/* Bootstrap component overrides */
|
|
.wpaw-settings-v2 .btn {
|
|
transition: all var(--wpaw-transition-fast);
|
|
border-radius: var(--wpaw-radius-md);
|
|
}
|
|
|
|
.wpaw-settings-v2 .btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.wpaw-settings-v2 .form-control,
|
|
.wpaw-settings-v2 .form-select {
|
|
border-radius: var(--wpaw-radius-sm);
|
|
border-color: var(--wpaw-bg-tertiary);
|
|
transition: all var(--wpaw-transition-fast);
|
|
}
|
|
|
|
.wpaw-settings-v2 .form-control:focus,
|
|
.wpaw-settings-v2 .form-select:focus {
|
|
border-color: var(--wpaw-primary);
|
|
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
|
|
}
|
|
|
|
.wpaw-settings-v2 .card {
|
|
border-radius: var(--wpaw-radius-md);
|
|
border: 1px solid var(--wpaw-bg-tertiary);
|
|
transition: all var(--wpaw-transition-normal);
|
|
}
|
|
|
|
.wpaw-settings-v2 .card:hover {
|
|
box-shadow: var(--wpaw-shadow-md);
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-bootstrap-custom.css`
|
|
- [ ] Apply `.wpaw-settings-v2` wrapper to main layout
|
|
- [ ] Test Bootstrap components with custom variables
|
|
|
|
---
|
|
|
|
### 1.3 Component Library Base
|
|
**File:** `/assets/css/agentic-components.css`
|
|
|
|
```css
|
|
/* Stat Cards */
|
|
.wpaw-stat-card {
|
|
background: var(--wpaw-bg-secondary);
|
|
padding: var(--wpaw-space-md);
|
|
border-radius: var(--wpaw-radius-md);
|
|
border-left: 3px solid var(--wpaw-primary);
|
|
transition: all var(--wpaw-transition-normal);
|
|
}
|
|
|
|
.wpaw-stat-card:hover {
|
|
background: var(--wpaw-bg-tertiary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--wpaw-shadow-md);
|
|
}
|
|
|
|
.wpaw-stat-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--wpaw-text-tertiary);
|
|
margin-bottom: var(--wpaw-space-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wpaw-stat-value {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: var(--wpaw-primary);
|
|
font-family: var(--wpaw-font-mono);
|
|
}
|
|
|
|
/* Status Badges */
|
|
.wpaw-status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--wpaw-space-xs);
|
|
padding: var(--wpaw-space-xs) var(--wpaw-space-sm);
|
|
border-radius: var(--wpaw-radius-sm);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.wpaw-status-online {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--wpaw-success);
|
|
}
|
|
|
|
.wpaw-status-offline {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--wpaw-error);
|
|
}
|
|
|
|
/* Pulse Animation */
|
|
@keyframes wpaw-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.wpaw-animate-pulse {
|
|
animation: wpaw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Code/Monospace Elements */
|
|
.wpaw-code {
|
|
font-family: var(--wpaw-font-mono);
|
|
background: var(--wpaw-bg-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: var(--wpaw-radius-sm);
|
|
font-size: 0.85em;
|
|
color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
.wpaw-code-muted {
|
|
color: var(--wpaw-text-tertiary);
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-components.css`
|
|
- [ ] Document component usage in comments
|
|
- [ ] Create example HTML snippets for each component
|
|
|
|
---
|
|
|
|
## Phase 2: Header & Status Section (Day 3-4)
|
|
|
|
### 2.1 Update Header Layout
|
|
**File:** `/views/settings/layout.php`
|
|
|
|
**Replace existing header card with:**
|
|
|
|
```php
|
|
<div class="wpaw-agentic-header mb-4">
|
|
<!-- Top Bar -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<img src="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'assets/img/icon.svg' ); ?>"
|
|
alt="WP Agentic Writer"
|
|
style="width: 48px; height: 48px;">
|
|
<div>
|
|
<h1 class="h3 mb-1"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></h1>
|
|
<p class="text-muted mb-0">
|
|
v<?php echo esc_html( WP_AGENTIC_WRITER_VERSION ); ?> ·
|
|
<?php esc_html_e( 'Settings & Configuration', 'wp-agentic-writer' ); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="wpaw-status-badge wpaw-status-online">
|
|
<span class="wpaw-animate-pulse">●</span>
|
|
<?php esc_html_e( 'Connected', 'wp-agentic-writer' ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="wpaw-stat-card">
|
|
<p class="wpaw-stat-label"><?php esc_html_e( 'Articles Generated', 'wp-agentic-writer' ); ?></p>
|
|
<h3 class="wpaw-stat-value" id="wpaw-stat-articles">--</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="wpaw-stat-card">
|
|
<p class="wpaw-stat-label"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></p>
|
|
<h3 class="wpaw-stat-value" id="wpaw-stat-total-cost">$0.00</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="wpaw-stat-card">
|
|
<p class="wpaw-stat-label"><?php esc_html_e( 'API Status', 'wp-agentic-writer' ); ?></p>
|
|
<h3 class="wpaw-stat-value text-success" id="wpaw-stat-api-status">
|
|
<?php esc_html_e( 'Online', 'wp-agentic-writer' ); ?>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="wpaw-stat-card">
|
|
<p class="wpaw-stat-label"><?php esc_html_e( 'Last Updated', 'wp-agentic-writer' ); ?></p>
|
|
<h3 class="wpaw-stat-value" id="wpaw-stat-last-updated">--</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Update header HTML in `layout.php`
|
|
- [ ] Add CSS for `.wpaw-agentic-header`
|
|
- [ ] Test responsive behavior on mobile
|
|
|
|
---
|
|
|
|
### 2.2 Add Header Stats JavaScript
|
|
**File:** `/assets/js/settings-v2.js`
|
|
|
|
**Add function to load header stats:**
|
|
|
|
```javascript
|
|
/**
|
|
* Load and update header statistics
|
|
*/
|
|
function loadHeaderStats() {
|
|
$.ajax({
|
|
url: wpawSettingsV2.ajaxUrl,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'wpaw_get_header_stats',
|
|
nonce: wpawSettingsV2.nonce
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
const stats = response.data;
|
|
$('#wpaw-stat-articles').text(stats.articles || '--');
|
|
$('#wpaw-stat-total-cost').text('$' + (stats.total_cost || '0.00'));
|
|
$('#wpaw-stat-api-status').text(stats.api_status || 'Unknown')
|
|
.removeClass('text-success text-danger')
|
|
.addClass(stats.api_online ? 'text-success' : 'text-danger');
|
|
$('#wpaw-stat-last-updated').text(stats.last_updated || '--');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Call on page load
|
|
$(document).ready(function() {
|
|
loadHeaderStats();
|
|
// Refresh every 30 seconds
|
|
setInterval(loadHeaderStats, 30000);
|
|
});
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Add `loadHeaderStats()` function to JS
|
|
- [ ] Create AJAX handler in `class-settings-v2.php`
|
|
- [ ] Test real-time updates
|
|
|
|
---
|
|
|
|
### 2.3 Create AJAX Handler for Header Stats
|
|
**File:** `/includes/class-settings-v2.php`
|
|
|
|
**Add method:**
|
|
|
|
```php
|
|
/**
|
|
* AJAX handler for header statistics.
|
|
*
|
|
* @since 0.2.0
|
|
*/
|
|
public function ajax_get_header_stats() {
|
|
check_ajax_referer( 'wpaw_settings', 'nonce' );
|
|
|
|
if ( ! current_user_can( 'manage_options' ) ) {
|
|
wp_send_json_error( array( 'message' => 'Permission denied' ) );
|
|
}
|
|
|
|
global $wpdb;
|
|
$table_name = $wpdb->prefix . 'wpaw_cost_tracking';
|
|
|
|
// Get total articles
|
|
$total_articles = $wpdb->get_var(
|
|
"SELECT COUNT(DISTINCT post_id) FROM {$table_name} WHERE post_id > 0"
|
|
);
|
|
|
|
// Get total cost
|
|
$total_cost = $wpdb->get_var( "SELECT SUM(cost) FROM {$table_name}" );
|
|
|
|
// Check API status
|
|
$settings = get_option( 'wp_agentic_writer_settings', array() );
|
|
$api_key = $settings['openrouter_api_key'] ?? '';
|
|
$api_online = ! empty( $api_key );
|
|
|
|
// Get last activity
|
|
$last_activity = $wpdb->get_var(
|
|
"SELECT created_at FROM {$table_name} ORDER BY created_at DESC LIMIT 1"
|
|
);
|
|
$last_updated = $last_activity ? human_time_diff( strtotime( $last_activity ), current_time( 'timestamp' ) ) . ' ago' : 'Never';
|
|
|
|
wp_send_json_success( array(
|
|
'articles' => intval( $total_articles ),
|
|
'total_cost' => number_format( (float) $total_cost, 2 ),
|
|
'api_status' => $api_online ? 'Online' : 'Offline',
|
|
'api_online' => $api_online,
|
|
'last_updated' => $last_updated,
|
|
) );
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Add AJAX action hook in constructor
|
|
- [ ] Implement `ajax_get_header_stats()` method
|
|
- [ ] Test with real database data
|
|
|
|
---
|
|
|
|
## Phase 3: Workflow Pipeline Visualization (Day 5)
|
|
|
|
### 3.1 Create Workflow Component
|
|
**File:** `/assets/css/agentic-workflow.css`
|
|
|
|
```css
|
|
.wpaw-workflow-progress {
|
|
background: var(--wpaw-bg-secondary);
|
|
padding: var(--wpaw-space-lg);
|
|
border-radius: var(--wpaw-radius-md);
|
|
margin-bottom: var(--wpaw-space-lg);
|
|
}
|
|
|
|
.wpaw-progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--wpaw-space-lg);
|
|
}
|
|
|
|
.wpaw-progress-steps {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wpaw-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--wpaw-space-sm);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.wpaw-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(--wpaw-text-tertiary);
|
|
background: var(--wpaw-bg-primary);
|
|
color: var(--wpaw-text-primary);
|
|
transition: all var(--wpaw-transition-normal);
|
|
}
|
|
|
|
.wpaw-step.completed .wpaw-step-circle {
|
|
background: var(--wpaw-success);
|
|
border-color: var(--wpaw-success);
|
|
color: white;
|
|
}
|
|
|
|
.wpaw-step.active .wpaw-step-circle {
|
|
background: var(--wpaw-primary);
|
|
border-color: var(--wpaw-primary);
|
|
color: white;
|
|
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.wpaw-step.pending .wpaw-step-circle {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.wpaw-step-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: var(--wpaw-text-secondary);
|
|
width: 60px;
|
|
}
|
|
|
|
.wpaw-step-connector {
|
|
flex: 1;
|
|
height: 2px;
|
|
background: var(--wpaw-text-tertiary);
|
|
margin: 0 var(--wpaw-space-sm);
|
|
position: relative;
|
|
top: -20px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.wpaw-step-connector.completed {
|
|
background: var(--wpaw-success);
|
|
}
|
|
|
|
.wpaw-step-connector.active {
|
|
background: var(--wpaw-primary);
|
|
animation: wpaw-slide-progress 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes wpaw-slide-progress {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
@keyframes wpaw-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.wpaw-animate-spin {
|
|
animation: wpaw-spin 2s linear infinite;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.wpaw-progress-steps {
|
|
flex-wrap: wrap;
|
|
gap: var(--wpaw-space-md);
|
|
}
|
|
|
|
.wpaw-step-connector {
|
|
display: none;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-workflow.css`
|
|
- [ ] Add workflow HTML to layout (optional, for demo)
|
|
- [ ] Test responsive behavior
|
|
|
|
---
|
|
|
|
## Phase 4: Enhanced Cost Log Table (Day 6-7)
|
|
|
|
### 4.1 Redesign Cost Log Table
|
|
**File:** `/views/settings/tab-cost-log.php`
|
|
|
|
**Update table structure:**
|
|
|
|
```php
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-sm wpaw-cost-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col"><?php esc_html_e( 'Timestamp', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col"><?php esc_html_e( 'Post', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col"><?php esc_html_e( 'Action', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col" class="text-end"><?php esc_html_e( 'Input', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col" class="text-end"><?php esc_html_e( 'Output', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col" class="text-end"><?php esc_html_e( 'Cost', 'wp-agentic-writer' ); ?></th>
|
|
<th scope="col" class="text-center"><?php esc_html_e( 'Status', 'wp-agentic-writer' ); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="wpaw-cost-log-tbody">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|
|
|
|
**Add CSS:**
|
|
|
|
```css
|
|
.wpaw-cost-table {
|
|
font-size: 0.9rem;
|
|
border-radius: var(--wpaw-radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wpaw-cost-table thead {
|
|
background: var(--wpaw-bg-secondary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr {
|
|
transition: background-color var(--wpaw-transition-fast);
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr:hover {
|
|
background: var(--wpaw-bg-secondary) !important;
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr.row-success {
|
|
border-left-color: var(--wpaw-success);
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr.row-warning {
|
|
border-left-color: var(--wpaw-warning);
|
|
}
|
|
|
|
.wpaw-cost-table tbody tr.row-error {
|
|
border-left-color: var(--wpaw-error);
|
|
}
|
|
|
|
.wpaw-cost-table .wpaw-code {
|
|
font-size: 0.85em;
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Update table HTML structure
|
|
- [ ] Add status column with icons
|
|
- [ ] Apply CSS styling
|
|
- [ ] Update JS rendering to include status
|
|
|
|
---
|
|
|
|
### 4.2 Update JavaScript Table Rendering
|
|
**File:** `/assets/js/settings-v2.js`
|
|
|
|
**Update `renderCostLogTable()` function:**
|
|
|
|
```javascript
|
|
function renderCostLogTable(data) {
|
|
const $tbody = $('#wpaw-cost-log-tbody');
|
|
const records = data.records || [];
|
|
|
|
if (records.length === 0) {
|
|
$tbody.html('<tr><td colspan="8" class="text-center py-4 text-muted">No cost records found.</td></tr>');
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
records.forEach(record => {
|
|
const postCell = record.post_link
|
|
? `<a href="${record.post_link}" class="text-decoration-none">${escapeHtml(record.post_title)}</a>`
|
|
: `<span class="text-muted">${escapeHtml(record.post_title)}</span>`;
|
|
|
|
// Determine row status class
|
|
const cost = parseFloat(record.cost);
|
|
let rowClass = 'row-success';
|
|
if (cost > 0.10) rowClass = 'row-warning';
|
|
if (cost > 0.50) rowClass = 'row-error';
|
|
|
|
html += `
|
|
<tr class="${rowClass}">
|
|
<td><code class="wpaw-code wpaw-code-muted">${escapeHtml(record.created_at)}</code></td>
|
|
<td class="small">${postCell}</td>
|
|
<td><span class="badge bg-primary">${escapeHtml(record.model)}</span></td>
|
|
<td class="small">${escapeHtml(record.action)}</td>
|
|
<td class="text-end small">${record.input_tokens}</td>
|
|
<td class="text-end small">${record.output_tokens}</td>
|
|
<td class="text-end"><strong>$${record.cost}</strong></td>
|
|
<td class="text-center">
|
|
<i class="dashicons dashicons-yes-alt text-success"></i>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
$tbody.html(html);
|
|
|
|
// Update records info
|
|
const start = (data.current_page - 1) * data.per_page + 1;
|
|
const end = Math.min(data.current_page * data.per_page, data.total_items);
|
|
$('#wpaw-records-info').text(`Showing ${start}-${end} of ${data.total_items} records`);
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Update `renderCostLogTable()` function
|
|
- [ ] Add status icons (dashicons or custom)
|
|
- [ ] Test with various cost amounts
|
|
|
|
---
|
|
|
|
## Phase 5: Model Configuration Cards (Day 8)
|
|
|
|
### 5.1 Create Model Card Component
|
|
**File:** `/assets/css/agentic-models.css`
|
|
|
|
```css
|
|
.wpaw-model-card {
|
|
background: var(--wpaw-bg-secondary);
|
|
border: 1px solid var(--wpaw-bg-tertiary);
|
|
border-radius: var(--wpaw-radius-md);
|
|
padding: var(--wpaw-space-lg);
|
|
transition: all var(--wpaw-transition-normal);
|
|
height: 100%;
|
|
}
|
|
|
|
.wpaw-model-card:hover {
|
|
border-color: var(--wpaw-primary);
|
|
box-shadow: var(--wpaw-shadow-md);
|
|
}
|
|
|
|
.wpaw-model-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: var(--wpaw-space-md);
|
|
}
|
|
|
|
.wpaw-model-header h5 {
|
|
margin-bottom: var(--wpaw-space-xs);
|
|
color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
.wpaw-model-header p {
|
|
font-size: 0.875rem;
|
|
color: var(--wpaw-text-tertiary);
|
|
font-family: var(--wpaw-font-mono);
|
|
}
|
|
|
|
.wpaw-model-stat {
|
|
margin-top: var(--wpaw-space-md);
|
|
}
|
|
|
|
.wpaw-model-stat label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
color: var(--wpaw-text-tertiary);
|
|
margin-bottom: var(--wpaw-space-xs);
|
|
}
|
|
|
|
.wpaw-model-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--wpaw-space-md);
|
|
padding-top: var(--wpaw-space-md);
|
|
border-top: 1px solid var(--wpaw-bg-tertiary);
|
|
margin-top: var(--wpaw-space-md);
|
|
}
|
|
|
|
.wpaw-metric {
|
|
text-align: center;
|
|
}
|
|
|
|
.wpaw-metric-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
color: var(--wpaw-text-tertiary);
|
|
margin-bottom: var(--wpaw-space-xs);
|
|
}
|
|
|
|
.wpaw-metric-value {
|
|
display: block;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--wpaw-primary);
|
|
font-family: var(--wpaw-font-mono);
|
|
}
|
|
|
|
.wpaw-model-actions {
|
|
margin-top: var(--wpaw-space-md);
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-models.css`
|
|
- [ ] Design model card HTML structure
|
|
- [ ] Test grid layout responsiveness
|
|
|
|
---
|
|
|
|
## Phase 6: Animations & Polish (Day 9-10)
|
|
|
|
### 6.1 Create Animation Library
|
|
**File:** `/assets/css/agentic-animations.css`
|
|
|
|
```css
|
|
/* Fade In */
|
|
@keyframes wpaw-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.wpaw-fade-in {
|
|
animation: wpaw-fade-in 300ms ease-out;
|
|
}
|
|
|
|
/* Slide In */
|
|
@keyframes wpaw-slide-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.wpaw-slide-in-right {
|
|
animation: wpaw-slide-in-right 300ms ease-out;
|
|
}
|
|
|
|
/* Scale In */
|
|
@keyframes wpaw-scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.wpaw-scale-in {
|
|
animation: wpaw-scale-in 200ms ease-out;
|
|
}
|
|
|
|
/* Shimmer Loading */
|
|
@keyframes wpaw-shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
.wpaw-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--wpaw-bg-secondary) 0%,
|
|
var(--wpaw-bg-tertiary) 50%,
|
|
var(--wpaw-bg-secondary) 100%
|
|
);
|
|
background-size: 1000px 100%;
|
|
animation: wpaw-shimmer 2s infinite;
|
|
}
|
|
|
|
/* Hover Lift */
|
|
.wpaw-hover-lift {
|
|
transition: transform var(--wpaw-transition-normal);
|
|
}
|
|
|
|
.wpaw-hover-lift:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* Glow Effect */
|
|
.wpaw-glow-primary {
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
transition: box-shadow var(--wpaw-transition-normal);
|
|
}
|
|
|
|
.wpaw-glow-primary:hover {
|
|
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Smooth Height Transition */
|
|
.wpaw-smooth-height {
|
|
transition: height var(--wpaw-transition-slow);
|
|
overflow: hidden;
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-animations.css`
|
|
- [ ] Apply animations to key components
|
|
- [ ] Test performance (60fps target)
|
|
|
|
---
|
|
|
|
### 6.2 Add Tab Transition Animations
|
|
**File:** `/assets/js/settings-v2.js`
|
|
|
|
```javascript
|
|
// Add smooth transitions between tabs
|
|
$('.nav-tabs .nav-link').on('shown.bs.tab', function (e) {
|
|
const $target = $($(e.target).data('bs-target'));
|
|
$target.addClass('wpaw-fade-in');
|
|
|
|
setTimeout(function() {
|
|
$target.removeClass('wpaw-fade-in');
|
|
}, 300);
|
|
});
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Add tab transition code
|
|
- [ ] Test smooth switching between tabs
|
|
- [ ] Ensure no layout shift
|
|
|
|
---
|
|
|
|
## Phase 7: Dark Mode Implementation (Day 11)
|
|
|
|
### 7.1 Enhance Dark Mode Support
|
|
**File:** `/assets/css/agentic-dark-mode.css`
|
|
|
|
```css
|
|
@media (prefers-color-scheme: dark) {
|
|
.wpaw-settings-v2 {
|
|
background: var(--wpaw-bg-primary);
|
|
color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
.wpaw-settings-v2 .card {
|
|
background: var(--wpaw-bg-secondary);
|
|
border-color: var(--wpaw-bg-tertiary);
|
|
}
|
|
|
|
.wpaw-settings-v2 .table {
|
|
--bs-table-bg: var(--wpaw-bg-secondary);
|
|
--bs-table-hover-bg: var(--wpaw-bg-tertiary);
|
|
color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
.wpaw-settings-v2 .table-light {
|
|
--bs-table-bg: var(--wpaw-bg-tertiary);
|
|
}
|
|
|
|
.wpaw-settings-v2 .form-control,
|
|
.wpaw-settings-v2 .form-select {
|
|
background: var(--wpaw-bg-secondary);
|
|
border-color: var(--wpaw-bg-tertiary);
|
|
color: var(--wpaw-text-primary);
|
|
}
|
|
|
|
.wpaw-settings-v2 .badge {
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
```
|
|
|
|
**Tasks:**
|
|
- [ ] Create `agentic-dark-mode.css`
|
|
- [ ] Test all components in dark mode
|
|
- [ ] Ensure proper contrast ratios
|
|
|
|
---
|
|
|
|
## Phase 8: Testing & Optimization (Day 12-13)
|
|
|
|
### 8.1 Responsive Testing Checklist
|
|
- [ ] Desktop (1920px, 1440px, 1280px)
|
|
- [ ] Tablet (768px, 1024px)
|
|
- [ ] Mobile (375px, 414px, 390px)
|
|
- [ ] Test all tabs on each breakpoint
|
|
- [ ] Verify table scrolling on mobile
|
|
- [ ] Check stat cards stacking
|
|
|
|
### 8.2 Browser Compatibility
|
|
- [ ] Chrome/Edge (latest)
|
|
- [ ] Firefox (latest)
|
|
- [ ] Safari (latest)
|
|
- [ ] Test dark mode in each browser
|
|
|
|
### 8.3 Performance Optimization
|
|
- [ ] Minify CSS files
|
|
- [ ] Combine CSS files (optional)
|
|
- [ ] Test page load time
|
|
- [ ] Check animation performance (60fps)
|
|
- [ ] Optimize AJAX calls (debouncing)
|
|
|
|
### 8.4 Accessibility Audit
|
|
- [ ] Keyboard navigation works
|
|
- [ ] Screen reader compatibility
|
|
- [ ] Color contrast meets WCAG AA
|
|
- [ ] Focus indicators visible
|
|
- [ ] ARIA labels present
|
|
|
|
---
|
|
|
|
## File Structure
|
|
|
|
```
|
|
wp-agentic-writer/
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ ├── agentic-variables.css (Phase 1)
|
|
│ │ ├── agentic-bootstrap-custom.css (Phase 1)
|
|
│ │ ├── agentic-components.css (Phase 1)
|
|
│ │ ├── agentic-workflow.css (Phase 3)
|
|
│ │ ├── agentic-models.css (Phase 5)
|
|
│ │ ├── agentic-animations.css (Phase 6)
|
|
│ │ ├── agentic-dark-mode.css (Phase 7)
|
|
│ │ └── settings-v2.css (existing, update)
|
|
│ └── js/
|
|
│ └── settings-v2.js (existing, enhance)
|
|
├── includes/
|
|
│ └── class-settings-v2.php (existing, add AJAX)
|
|
└── views/
|
|
└── settings/
|
|
├── layout.php (existing, update)
|
|
├── tab-general.php (existing)
|
|
├── tab-models.php (existing, enhance)
|
|
├── tab-cost-log.php (existing, update)
|
|
└── tab-guide.php (existing)
|
|
```
|
|
|
|
---
|
|
|
|
## Enqueue Order in `class-settings-v2.php`
|
|
|
|
```php
|
|
// CSS Enqueue Order
|
|
wp_enqueue_style( 'bootstrap', '...', array(), '5.3.3' );
|
|
wp_enqueue_style( 'select2', '...', array(), '4.1.0' );
|
|
wp_enqueue_style( 'select2-bootstrap-5', '...', array( 'select2', 'bootstrap' ), '1.3.0' );
|
|
|
|
// Custom CSS (in order)
|
|
wp_enqueue_style( 'wpaw-agentic-variables', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-variables.css', array(), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-bootstrap-custom', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-bootstrap-custom.css', array( 'bootstrap', 'wpaw-agentic-variables' ), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-components', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-components.css', array( 'wpaw-agentic-variables' ), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-workflow', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-workflow.css', array( 'wpaw-agentic-variables' ), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-models', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-models.css', array( 'wpaw-agentic-variables' ), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-animations', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-animations.css', array(), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wpaw-agentic-dark-mode', WP_AGENTIC_WRITER_URL . 'assets/css/agentic-dark-mode.css', array( 'wpaw-agentic-variables' ), WP_AGENTIC_WRITER_VERSION );
|
|
|
|
// Existing styles
|
|
wp_enqueue_style( 'wp-agentic-writer-admin-v2', WP_AGENTIC_WRITER_URL . 'assets/css/admin-v2.css', array(), WP_AGENTIC_WRITER_VERSION );
|
|
wp_enqueue_style( 'wp-agentic-writer-settings-v2', WP_AGENTIC_WRITER_URL . 'assets/css/settings-v2.css', array(), WP_AGENTIC_WRITER_VERSION );
|
|
```
|
|
|
|
---
|
|
|
|
## Timeline Summary
|
|
|
|
| Phase | Duration | Key Deliverables |
|
|
|-------|----------|------------------|
|
|
| Phase 1 | 1-2 days | CSS variables, Bootstrap customization, component library |
|
|
| Phase 2 | 2 days | Header stats, AJAX handler, real-time updates |
|
|
| Phase 3 | 1 day | Workflow pipeline visualization |
|
|
| Phase 4 | 2 days | Enhanced cost log table with status |
|
|
| Phase 5 | 1 day | Model configuration cards |
|
|
| Phase 6 | 2 days | Animations, transitions, polish |
|
|
| Phase 7 | 1 day | Dark mode implementation |
|
|
| Phase 8 | 2 days | Testing, optimization, accessibility |
|
|
|
|
**Total:** 11-13 days
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
### Functional Requirements
|
|
- ✅ All existing features work (no regressions)
|
|
- ✅ Real-time stats update automatically
|
|
- ✅ Cost log loads and filters correctly
|
|
- ✅ Model configuration saves properly
|
|
- ✅ Responsive on all devices
|
|
|
|
### Design Requirements
|
|
- ✅ Consistent color system throughout
|
|
- ✅ Smooth animations (60fps)
|
|
- ✅ Dark mode works correctly
|
|
- ✅ Accessible (WCAG AA)
|
|
- ✅ Professional, modern appearance
|
|
|
|
### Performance Requirements
|
|
- ✅ Page load < 2 seconds
|
|
- ✅ AJAX responses < 500ms
|
|
- ✅ No layout shift (CLS < 0.1)
|
|
- ✅ Smooth scrolling and interactions
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
1. **Review this plan** with stakeholders
|
|
2. **Create a branch** for implementation
|
|
3. **Start with Phase 1** (foundation)
|
|
4. **Test incrementally** after each phase
|
|
5. **Gather feedback** from users
|
|
6. **Iterate and refine** based on feedback
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Keep existing functionality intact
|
|
- Test thoroughly before merging
|
|
- Document component usage
|
|
- Consider creating a style guide
|
|
- Plan for future enhancements
|