Dashboard Guide

Complete guide to using the web dashboard for monitoring and controlling your YouTube automation

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

1. Open Your Browser

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

2. Wait for Data Load

   The dashboard will automatically fetch and display:

   • System health status
   • Upcoming schedule
   • Performance analytics
   • Agent status
   • Recent activity
3. 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:

1. Click Button

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

2. Confirm Action

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

3. Wait for Processing

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

4. Review Result

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

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

1. Click Button

   Click 📊 View Analytics in the status bar.

2. New Tab Opens

   Analytics endpoint opens in new browser tab.

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

1. Click Button

   Click 📅 View Schedule in the status bar.

2. New Tab Opens

   Schedule endpoint opens in new browser tab.

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

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

1. Verify Agent is Running

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

2. Check Port Availability

   lsof -i :3456
   

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

3. Check Firewall

   Ensure port 3456 is allowed through firewall:

   sudo ufw allow 3456
   
4. 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:

1. Force Refresh: Click the 🔄 button in bottom-right
2. Check API Health:
   curl http://localhost:3456/health
   
3. Review Browser Console: Open DevTools (F12) and check for JavaScript errors
4. 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:

1. Check console logs for specific agent errors
2. Verify all API credentials are configured
3. Ensure sufficient API quotas
4. 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