Dashboard Guide - YouTube Automation Agent

Overview

The YouTube Automation Agent includes a beautiful web dashboard for real-time monitoring and control. Access it at http://localhost:3456 while the agent is running.

The dashboard auto-refreshes every 30 seconds to show the latest data without manual intervention.

Accessing the Dashboard

Starting the Dashboard

The dashboard automatically starts when you launch the agent:

npm start

You’ll see:

✅ YouTube Automation Agent running on port 3456
──────────────────────────────────────────────────
📊 Dashboard: http://localhost:3456
🔧 API Health: http://localhost:3456/health
📅 Schedule: http://localhost:3456/schedule
📈 Analytics: http://localhost:3456/analytics
──────────────────────────────────────────────────
🤖 Automation is active. Content will be generated and posted daily.

Opening the Dashboard

Open Your Browser

Navigate to http://localhost:3456 in any modern web browser.

Wait for Data Load

The dashboard will automatically fetch and display:

System health status
Upcoming schedule
Performance analytics
Agent status
Recent activity

Monitor Real-Time Updates

Data refreshes automatically every 30 seconds. Look for the Last Updated timestamp.

Remote Access

To access the dashboard from other devices on your network:

# Find your local IP address
ifconfig | grep "inet " | grep -v 127.0.0.1

# Access dashboard from other devices
http://YOUR_LOCAL_IP:3456

For remote access over the internet, use a reverse proxy like nginx or deploy behind a VPN for security.

Dashboard Layout

Header Section

The dashboard header displays:

Project Name: Ethereal Dreamscript
Subtitle: YouTube Automation Dashboard
Gradient Background: Purple/blue gradient for visual appeal

Status Bar

Four real-time status cards at the top:

System Status Card

🟢 Green: System healthy, all agents running
🔴 Red: System error or agents not initialized
Updates based on /health endpoint response

Content Generated Card

Shows total number of videos created
Increments with each successful generation
Data from /analytics endpoint

Videos Published Card

Total count of successfully published videos
Updates when videos go live on YouTube
Synced with YouTube channel data

Next Generation Card

Displays next scheduled content generation time
Default: “6:00 AM” for daily automation
Shows “Tomorrow” if next generation is next day
Updates from /schedule endpoint

Action Buttons

Three primary action buttons:

Generate Content Now

Triggers immediate content generation, bypassing the schedule.

View Analytics

Opens analytics data in JSON format in new tab.

View Schedule

Opens upcoming schedule in JSON format in new tab.

Dashboard Cards

1. System Overview Card

Shows high-level system health:

📈 System Overview

Status: Initialized
Agents Active: 7/7
Uptime: 24h 15m
Last Updated: 10:45:23 AM

What it shows:

Status: Initialized or Initializing
Agents Active: Count of running agents (should be 7/7)
Uptime: How long the system has been running
Last Updated: Time of last data refresh

If Agents Active shows less than 7/7, check the console logs for initialization errors.

2. Upcoming Schedule Card

Displays next 3 scheduled content items:

📅 Upcoming Schedule

┌─ The Art of Digital Storytelling
└─ January 16, 2024 at 2:00 PM

┌─ Understanding Visual Narratives  
└─ January 17, 2024 at 2:00 PM

┌─ Creative Expression in Modern Media
└─ January 18, 2024 at 2:00 PM

Information displayed:

Content title
Scheduled publish date and time
Sorted by publish time (earliest first)

If schedule is empty:

📅 Daily Content Generation
Scheduled for 6:00 AM daily

📊 Analytics Collection
Scheduled for 9:00 AM daily

🔧 Optimization Tasks
Scheduled for 10:00 PM daily

3. Content Strategy Card

Shows current content focus and settings:

🎯 Content Strategy

Current Focus: Animated Storytelling
Target Audience: Creative individuals interested in storytelling and imagination
Content Types: Story-driven content, Explainers, Tutorials
Posting Frequency: Daily
Optimal Time: 2:00 PM

Strategy elements:

Current Focus: Main content theme
Target Audience: Who the content is for
Content Types: Formats being produced
Posting Frequency: How often content publishes
Optimal Time: Best time for maximum engagement

The optimal publishing time is automatically adjusted based on analytics data during the weekly strategy review.

4. Recent Activity Card

Live log of recent automation events:

📊 Recent Activity

✅ System initialized successfully
ℹ️  All 7 agents are active
ℹ️  Content strategy loaded
ℹ️  Automation scheduler started
✅ Ready for content generation

Activity indicators:

✅ Success: Tasks completed successfully
ℹ️ Info: Informational messages
⚠️ Warning: Non-critical issues
❌ Error: Failed operations

5. Agent Status Card

Shows status of all 7 agents:

🤖 Agent Status

✅ strategy Agent
✅ scriptWriter Agent
✅ thumbnailDesigner Agent
✅ seoOptimizer Agent
✅ production Agent
✅ publishing Agent
✅ analytics Agent

Agent descriptions:

Agent	Purpose
strategy	Analyzes trends and selects content topics
scriptWriter	Generates video scripts and narratives
thumbnailDesigner	Creates eye-catching thumbnail images
seoOptimizer	Optimizes titles, descriptions, and tags
production	Compiles and validates content assets
publishing	Schedules and uploads videos to YouTube
analytics	Tracks performance and generates insights

6. Performance Metrics Card

Shows aggregated performance data:

📈 Performance Metrics

Average Performance: 78.5
Total Content: 15 videos
System Health: Excellent

When starting fresh:

📈 Performance Metrics

Status: System just started
First Content: Will generate within 24 hours
Automation: Active and ready

Metrics explained:

Average Performance: Composite score 0-100 based on engagement, retention, CTR
Total Content: Number of videos generated by the system
System Health: Overall system status (Excellent, Good, Needs Attention)

Interactive Features

Generate Content Button

Manually trigger content generation:

Click Button

Click the 🎬 Generate Content Now button in the status bar.

Confirm Action

Confirm the prompt: “Generate content now? This will create a new video for your channel.”

Wait for Processing

A loading alert appears. The system processes through all 6 agents (typically 2-5 minutes).

Review Result

Success alert shows: “Content generation started! Title: [Video Title]”

Dashboard Auto-Refresh

Dashboard automatically updates to show new content in the schedule.

What happens behind the scenes:

POST /generate
{
  topic: null,
  style: 'story',
  length: 'medium'
}

View Analytics Button

Inspect raw analytics data:

Click Button

Click 📊 View Analytics in the status bar.

New Tab Opens

Analytics endpoint opens in new browser tab.

View JSON Data

See formatted JSON with:

totalVideos: Count of analyzed videos
averagePerformanceScore: Mean score across all videos
topPerformers: Array of top 3 videos
recentAnalytics: Detailed metrics for each video

Example analytics response:

{
  "totalVideos": 15,
  "averagePerformanceScore": 78.5,
  "topPerformers": [
    {
      "videoId": "dQw4w9WgXcQ",
      "title": "The Art of Digital Storytelling",
      "performanceScore": 92,
      "videoDetails": {
        "statistics": {
          "viewCount": "12500",
          "likeCount": "850",
          "commentCount": "143"
        }
      }
    }
  ]
}

View Schedule Button

Inspect upcoming content:

Click Button

Click 📅 View Schedule in the status bar.

New Tab Opens

Schedule endpoint opens in new browser tab.

View Schedule JSON

See array of scheduled content with:

id: Unique content identifier
title: Video title
publishTime: ISO 8601 timestamp
status: Current status (scheduled/published)

Refresh Button

Manually refresh dashboard data:

Location: Bottom-right corner (floating button)
Icon: 🔄 circular arrow
Action: Immediately refetches all data from API endpoints
Use Case: Get latest data without waiting for 30-second auto-refresh

Auto-Refresh Behavior

The dashboard implements smart auto-refresh:

// Refresh every 30 seconds
setInterval(refreshDashboard, 30000);

async function refreshDashboard() {
  // Fetch health data
  const health = await fetch('/health').then(r => r.json());
  
  // Fetch schedule
  const schedule = await fetch('/schedule').then(r => r.json());
  
  // Fetch analytics (optional, may fail if no data yet)
  try {
    const analytics = await fetch('/analytics').then(r => r.json());
  } catch (error) {
    console.log('Analytics not available yet');
  }
  
  // Update UI
  updateAllCards(health, schedule, analytics);
}

What gets refreshed:

System status indicator (green/red)
Agent status (7/7 active check)
Uptime counter
Upcoming schedule items
Content and published counts
Performance metrics
Recent activity log

Status Indicators

Color Coding

The dashboard uses consistent color coding:

Color	Meaning	Example
🟢 Green	Healthy, Active	System status indicator
🔴 Red	Error, Inactive	System down or agent failed
🟡 Yellow	Warning	Low performance score
🔵 Blue	Info	General information messages

Performance Scoring

Score Interpretation:

90-100: Exceptional performance
80-89: Excellent performance
70-79: Good performance
60-69: Average performance
50-59: Below average, needs improvement
0-49: Poor performance, requires attention

Customizing the Dashboard

Changing Port

Run on a different port:

PORT=8080 npm start

Dashboard now accessible at: http://localhost:8080

Branding Customization

Edit /source/dashboard/index.html to customize:

<title>Your Brand - YouTube Automation Dashboard</title>

Adding Custom Metrics

Extend the dashboard with custom data:

// In index.html, add new fetch
async function loadCustomMetrics() {
  const response = await fetch('/api/custom-metrics');
  const data = await response.json();
  
  // Update custom card
  document.getElementById('custom-metrics').innerHTML = `
    <p><strong>Custom Metric:</strong> ${data.value}</p>
  `;
}

Troubleshooting

Dashboard Won’t Load

Symptoms:

Browser shows “Cannot connect”
Page loads but shows errors

Solutions:

Verify Agent is Running

Check terminal for “YouTube Automation Agent running on port 3456”

Check Port Availability

lsof -i :3456

If port is in use by another process, change port with PORT=3457 npm start

Check Firewall

Ensure port 3456 is allowed through firewall:

sudo ufw allow 3456

Try Different Browser

Test with another browser to rule out browser-specific issues.

Data Not Updating

Symptoms:

Dashboard loads but shows stale data
“Loading…” messages persist

Solutions:

Force Refresh: Click the 🔄 button in bottom-right
Check API Health:
```
curl http://localhost:3456/health
```
Review Browser Console: Open DevTools (F12) and check for JavaScript errors
Restart Agent: Stop and restart the agent with npm start

System Status Shows Red

Symptoms:

Status card shows 🔴 instead of 🟢

Causes:

Agent not fully initialized
Database connection failed
Missing credentials

Solutions:

# Check health endpoint directly
curl http://localhost:3456/health

# Expected: {"status": "healthy", "initialized": true}
# If false, check console logs for errors

# Verify credentials
npm run credentials:validate

# Reinitialize database if needed
npm run db:init

Agents Show Less Than 7/7

Symptoms:

Agent Status card shows “5/7” or similar

Cause:

Some agents failed to initialize

Solution:

Check console logs for specific agent errors
Verify all API credentials are configured
Ensure sufficient API quotas
Restart with npm start

Mobile Access

Responsive Design

The dashboard is fully responsive:

Desktop: Full 6-card grid layout
Tablet: 2-column responsive grid
Mobile: Single-column stacked layout

Mobile Optimization Tips

On mobile, use landscape orientation for best viewing experience.

Buttons are touch-friendly (44px minimum hit area)
Text is readable without zooming (16px base font)
Cards stack vertically for easy scrolling
Auto-refresh works seamlessly on mobile

Best Practices

Daily Monitoring

Check system status is 🟢 green
Verify all 7 agents are active
Review upcoming schedule has 2-3 items
Check performance metrics are improving
Scan recent activity for errors

Weekly Review

Analyze performance score trends
Review top performing content
Adjust content strategy if needed
Verify automation schedule is working
Check database backup was created

When to Take Action

Immediate Action Required:

🔴 Red system status
Less than 5/7 agents active
No scheduled content
Multiple errors in recent activity

Monitor Closely:

Performance score below 60
Declining view counts
Failed automation events
System health below 80

Advanced Features

Browser Integration

Bookmark these URLs for quick access:

Main Dashboard: http://localhost:3456
Health Check: http://localhost:3456/health
Analytics JSON: http://localhost:3456/analytics
Schedule JSON: http://localhost:3456/schedule

Embedding in Tools

Embed dashboard in other tools:

<!-- Embed in internal tools -->
<iframe 
  src="http://localhost:3456" 
  width="100%" 
  height="800px"
  frameborder="0">
</iframe>

API Integration

Build custom dashboards using the same APIs:

// Custom monitoring script
const monitorDashboard = async () => {
  const health = await fetch('http://localhost:3456/health').then(r => r.json());
  
  if (health.status !== 'healthy') {
    sendAlert('YouTube Automation: System Unhealthy!');
  }
};

setInterval(monitorDashboard, 60000); // Check every minute

Next Steps

API Reference

Explore all API endpoints used by the dashboard

Manual Operations

Learn manual control and API usage

Automation Schedule

Understand the automation schedule

Troubleshooting

Solve common dashboard issues

​Overview

​Accessing the Dashboard

​Starting the Dashboard

​Opening the Dashboard

​Remote Access

​Dashboard Layout

​Header Section

​Status Bar

​System Status Card

​Content Generated Card

​Videos Published Card

​Next Generation Card

​Action Buttons

Generate Content Now

View Analytics

View Schedule

​Dashboard Cards

​1. System Overview Card

​2. Upcoming Schedule Card

​3. Content Strategy Card

​4. Recent Activity Card

​5. Agent Status Card

​6. Performance Metrics Card

​Interactive Features

​Generate Content Button

​View Analytics Button

​View Schedule Button

​Refresh Button

​Auto-Refresh Behavior

​Status Indicators

​Color Coding

​Performance Scoring

​Customizing the Dashboard

​Changing Port

​Branding Customization

​Adding Custom Metrics

​Troubleshooting

​Dashboard Won’t Load

​Data Not Updating

​System Status Shows Red

​Agents Show Less Than 7/7

​Mobile Access

​Responsive Design

​Mobile Optimization Tips

​Best Practices

​Daily Monitoring

​Weekly Review

​When to Take Action

​Advanced Features

​Browser Integration

​Embedding in Tools

​API Integration

​Next Steps

API Reference

Manual Operations

Automation Schedule

Troubleshooting

Overview

Accessing the Dashboard

Starting the Dashboard

Opening the Dashboard

Remote Access

Dashboard Layout

Header Section

Status Bar

System Status Card

Content Generated Card

Videos Published Card

Next Generation Card

Action Buttons

Dashboard Cards

1. System Overview Card

2. Upcoming Schedule Card

3. Content Strategy Card

4. Recent Activity Card

5. Agent Status Card

6. Performance Metrics Card

Interactive Features

Generate Content Button

View Analytics Button

View Schedule Button

Refresh Button

Auto-Refresh Behavior

Status Indicators

Color Coding

Performance Scoring

Customizing the Dashboard

Changing Port

Branding Customization

Adding Custom Metrics

Troubleshooting

Dashboard Won’t Load

Data Not Updating

System Status Shows Red

Agents Show Less Than 7/7

Mobile Access

Responsive Design

Mobile Optimization Tips

Best Practices

Daily Monitoring

Weekly Review

When to Take Action

Advanced Features

Browser Integration

Embedding in Tools

API Integration

Next Steps