dwindown/wp-agentic-writer

Fork 0

Files

dwindown 97426d5ab1 first commit all files

2026-01-28 00:26:00 +07:00

27 KiB

Raw Permalink Blame History

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

: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

/* 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

/* 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:

<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:

/**
 * 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:

/**
 * 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

.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:

<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:

.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:

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

.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

/* 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

// 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

@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`

// 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

Review this plan with stakeholders
Create a branch for implementation
Start with Phase 1 (foundation)
Test incrementally after each phase
Gather feedback from users
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

27 KiB Raw Permalink Blame History

Agentic Vibe Implementation Plan

Overview

Phase 1: Foundation & CSS Variables (Day 1-2)

1.1 Create CSS Variable System

1.2 Bootstrap Customization

1.3 Component Library Base

Phase 2: Header & Status Section (Day 3-4)

2.1 Update Header Layout

2.2 Add Header Stats JavaScript

2.3 Create AJAX Handler for Header Stats

Phase 3: Workflow Pipeline Visualization (Day 5)

3.1 Create Workflow Component

Phase 4: Enhanced Cost Log Table (Day 6-7)

4.1 Redesign Cost Log Table

4.2 Update JavaScript Table Rendering

Phase 5: Model Configuration Cards (Day 8)

5.1 Create Model Card Component

Phase 6: Animations & Polish (Day 9-10)

6.1 Create Animation Library

6.2 Add Tab Transition Animations

Phase 7: Dark Mode Implementation (Day 11)

7.1 Enhance Dark Mode Support

Phase 8: Testing & Optimization (Day 12-13)

8.1 Responsive Testing Checklist

8.2 Browser Compatibility

8.3 Performance Optimization

8.4 Accessibility Audit

File Structure

Enqueue Order in class-settings-v2.php

Timeline Summary

Success Criteria

Functional Requirements

Design Requirements

Performance Requirements

Next Steps

Notes

27 KiB

Raw Permalink Blame History

Enqueue Order in `class-settings-v2.php`