Internal-Facing React Components

Purpose: Components for CODITECT team members, engineering, product, and operations
Technology: React + Tailwind CSS + Recharts
Deployment: Internal dashboard, documentation portal, ops monitoring

---

Component 1: Architecture Explorer (Interactive System Diagram)

import React, { useState } from 'react';
import { ChevronRight, Database, Server, Cloud, Zap, Eye, Brain } from 'lucide-react';

const ArchitectureExplorer = () => {
  const [selectedComponent, setSelectedComponent] = useState(null);

  const components = {
    ingestion: {
      id: 'ingestion',
      name: 'Video Ingestion',
      icon: Cloud,
      color: 'blue',
      description: 'Handles video downloads from YouTube or file uploads',
      tech: ['yt-dlp', 'FFmpeg', 'Python'],
      responsibilities: [
        'Download videos from YouTube URLs',
        'Validate file formats and duration',
        'Extract metadata (title, duration, chapters)',
        'Generate unique job IDs'
      ],
      metrics: {
        'Avg Download Time': '45s per GB',
        'Success Rate': '99.2%',
        'Max File Size': '2GB'
      }
    },
    transcription: {
      id: 'transcription',
      name: 'Audio Transcription',
      icon: Zap,
      color: 'green',
      description: 'Extracts and transcribes audio using OpenAI Whisper',
      tech: ['OpenAI Whisper API', 'FFmpeg'],
      responsibilities: [
        'Extract audio track from video',
        'Send to Whisper API for transcription',
        'Align word-level timestamps',
        'Handle retry logic for API failures'
      ],
      metrics: {
        'Accuracy': '92% WER',
        'Avg Time': '2.5min per hour',
        'Cost': '$0.36 per hour'
      }
    },
    frameExtraction: {
      id: 'frameExtraction',
      name: 'Frame Extraction',
      icon: Eye,
      color: 'purple',
      description: 'Intelligently samples frames using multi-strategy approach',
      tech: ['OpenCV', 'FFmpeg', 'imagehash'],
      responsibilities: [
        'Scene change detection',
        'Slide content detection',
        'Fixed interval sampling',
        'Content-based deduplication (pHash)'
      ],
      metrics: {
        'Frames Extracted': '180 avg',
        'After Dedup': '85 unique',
        'Reduction': '53%'
      }
    },
    visionAnalysis: {
      id: 'visionAnalysis',
      name: 'Vision Analysis',
      icon: Eye,
      color: 'indigo',
      description: 'Analyzes frames using Claude Vision API',
      tech: ['Anthropic Claude', 'Batch Processing'],
      responsibilities: [
        'Classify frame content type',
        'Extract text (OCR)',
        'Generate descriptions',
        'Identify presentation content'
      ],
      metrics: {
        'Batch Size': '5 frames',
        'Avg Time': '3s per batch',
        'Cost': '$0.004 per frame'
      }
    },
    synthesis: {
      id: 'synthesis',
      name: 'Multi-Agent Synthesis',
      icon: Brain,
      color: 'orange',
      description: 'Correlates audio and visual using LangGraph H.P.001-AGENTS',
      tech: ['LangGraph', 'LangChain', 'Claude Sonnet'],
      responsibilities: [
        'Identify topics from transcript',
        'Extract key moments from frames',
        'Correlate audio-visual content',
        'Generate structured insights'
      ],
      metrics: {
        'Agents': '4 parallel + sequential',
        'Latency': '12s avg',
        'Quality Score': '9.5/10'
      }
    },
    storage: {
      id: 'storage',
      name: 'Data Storage',
      icon: Database,
      color: 'gray',
      description: 'Manages job metadata and output files',
      tech: ['SQLite/Postgres', 'S3/Local FS'],
      responsibilities: [
        'Store job status and metadata',
        'Manage temporary files',
        'Store output artifacts',
        'Auto-cleanup after 7 days'
      ],
      metrics: {
        'DB Size': '2.5GB (10K jobs)',
        'File Storage': '50GB temp',
        'Retention': '7 days'
      }
    }
  };

  const dataFlow = [
    { from: 'ingestion', to: 'transcription', label: 'Audio Track' },
    { from: 'ingestion', to: 'frameExtraction', label: 'Video File' },
    { from: 'transcription', to: 'synthesis', label: 'Transcript' },
    { from: 'frameExtraction', to: 'visionAnalysis', label: 'Unique Frames' },
    { from: 'visionAnalysis', to: 'synthesis', label: 'Frame Analyses' },
    { from: 'synthesis', to: 'storage', label: 'Final Report' }
  ];

  const colorMap = {
    blue: 'bg-blue-500',
    green: 'bg-green-500',
    purple: 'bg-purple-500',
    indigo: 'bg-indigo-500',
    orange: 'bg-orange-500',
    gray: 'bg-gray-500'
  };

  return (
    <div className="max-w-7xl mx-auto p-8 bg-gray-50">
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          System Architecture Explorer
        </h1>
        <p className="text-gray-600">
          Click on any component to see detailed information, technologies, and metrics
        </p>
      </div>

      <div className="grid lg:grid-cols-3 gap-8">
        {/* Component Grid */}
        <div className="lg:col-span-2">
          <div className="bg-white rounded-xl shadow-lg p-8">
            <h2 className="text-xl font-bold mb-6">Pipeline Components</h2>
            
            <div className="grid md:grid-cols-2 gap-4">
              {Object.values(components).map((comp) => {
                const Icon = comp.icon;
                const isSelected = selectedComponent?.id === comp.id;
                
                return (
                  <button
                    key={comp.id}
                    onClick={() => setSelectedComponent(comp)}
                    className={`p-4 rounded-lg border-2 transition-all text-left ${
                      isSelected 
                        ? `border-${comp.color}-500 bg-${comp.color}-50` 
                        : 'border-gray-200 hover:border-gray-300'
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      <div className={`p-2 rounded-lg ${colorMap[comp.color]} text-white`}>
                        <Icon className="w-5 h-5" />
                      </div>
                      <div className="flex-1">
                        <h3 className="font-bold text-gray-900 mb-1">
                          {comp.name}
                        </h3>
                        <p className="text-sm text-gray-600">
                          {comp.description}
                        </p>
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Data Flow Visualization */}
            <div className="mt-8 pt-8 border-t">
              <h3 className="font-bold text-gray-900 mb-4">Data Flow</h3>
              <div className="space-y-2">
                {dataFlow.map((flow, idx) => (
                  <div key={idx} className="flex items-center gap-3 text-sm">
                    <span className="px-3 py-1 bg-gray-100 rounded font-medium">
                      {components[flow.from].name}
                    </span>
                    <ChevronRight className="w-4 h-4 text-gray-400" />
                    <span className="text-gray-600 italic">{flow.label}</span>
                    <ChevronRight className="w-4 h-4 text-gray-400" />
                    <span className="px-3 py-1 bg-gray-100 rounded font-medium">
                      {components[flow.to].name}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Detail Panel */}
        <div className="lg:col-span-1">
          {selectedComponent ? (
            <div className="bg-white rounded-xl shadow-lg p-6 sticky top-8">
              <div className="flex items-center gap-3 mb-4">
                <div className={`p-3 rounded-lg ${colorMap[selectedComponent.color]} text-white`}>
                  {React.createElement(selectedComponent.icon, { className: 'w-6 h-6' })}
                </div>
                <h2 className="text-2xl font-bold text-gray-900">
                  {selectedComponent.name}
                </h2>
              </div>

              <p className="text-gray-600 mb-6">
                {selectedComponent.description}
              </p>

              {/* Technologies */}
              <div className="mb-6">
                <h3 className="font-bold text-gray-900 mb-2">Technologies</h3>
                <div className="flex flex-wrap gap-2">
                  {selectedComponent.tech.map((tech, idx) => (
                    <span key={idx} className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
                      {tech}
                    </span>
                  ))}
                </div>
              </div>

              {/* Responsibilities */}
              <div className="mb-6">
                <h3 className="font-bold text-gray-900 mb-2">Responsibilities</h3>
                <ul className="space-y-2">
                  {selectedComponent.responsibilities.map((resp, idx) => (
                    <li key={idx} className="flex items-start gap-2 text-sm text-gray-700">
                      <span className="text-green-500 mt-1">✓</span>
                      <span>{resp}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Metrics */}
              <div>
                <h3 className="font-bold text-gray-900 mb-2">Key Metrics</h3>
                <div className="space-y-2">
                  {Object.entries(selectedComponent.metrics).map(([key, value]) => (
                    <div key={key} className="flex justify-between items-center text-sm">
                      <span className="text-gray-600">{key}</span>
                      <span className="font-bold text-gray-900">{value}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-white rounded-xl shadow-lg p-6 sticky top-8 text-center text-gray-500">
              <Eye className="w-12 h-12 mx-auto mb-4 opacity-20" />
              <p>Select a component to view details</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ArchitectureExplorer;

---

Component 2: Development Roadmap Tracker

import React, { useState } from 'react';
import { CheckCircle, Circle, Clock, AlertCircle } from 'lucide-react';

const RoadmapTracker = () => {
  const roadmap = {
    phases: [
      {
        id: 'mvp',
        name: 'MVP Development',
        timeline: 'Weeks 1-12',
        status: 'in-progress',
        progress: 75,
        sprints: [
          {
            id: 'sprint1-2',
            name: 'Foundation',
            weeks: '1-4',
            status: 'complete',
            features: [
              { name: 'Video download (yt-dlp)', status: 'complete' },
              { name: 'Audio extraction (FFmpeg)', status: 'complete' },
              { name: 'Whisper API integration', status: 'complete' },
              { name: 'Basic frame extraction', status: 'complete' },
              { name: 'End-to-end CLI test', status: 'complete' }
            ]
          },
          {
            id: 'sprint3-4',
            name: 'Vision & Synthesis',
            weeks: '5-8',
            status: 'in-progress',
            features: [
              { name: 'Multi-strategy frame extraction', status: 'complete' },
              { name: 'pHash deduplication', status: 'complete' },
              { name: 'Claude Vision integration', status: 'in-progress' },
              { name: 'LangGraph orchestrator', status: 'pending' },
              { name: 'Markdown generation', status: 'pending' }
            ]
          },
          {
            id: 'sprint5-6',
            name: 'Frontend & Polish',
            weeks: '9-12',
            status: 'pending',
            features: [
              { name: 'React dashboard', status: 'pending' },
              { name: 'Job status tracker', status: 'pending' },
              { name: 'Results viewer', status: 'pending' },
              { name: 'Error handling', status: 'pending' },
              { name: 'Cloud deployment', status: 'pending' }
            ]
          }
        ]
      },
      {
        id: 'pilot',
        name: 'Pilot Program',
        timeline: 'Weeks 13-24',
        status: 'pending',
        progress: 0,
        milestones: [
          { name: '5 pilot customers enrolled', status: 'pending', week: 13 },
          { name: 'First 100 videos processed', status: 'pending', week: 16 },
          { name: '3 case studies completed', status: 'pending', week: 22 },
          { name: 'Go/No-Go decision', status: 'pending', week: 24 }
        ]
      },
      {
        id: 'ga',
        name: 'General Availability',
        timeline: 'Month 7+',
        status: 'pending',
        progress: 0,
        milestones: [
          { name: 'Public launch', status: 'pending', week: 28 },
          { name: '20 paying customers', status: 'pending', week: 36 },
          { name: 'Phase 2 features shipped', status: 'pending', week: 40 },
          { name: 'Break-even achieved', status: 'pending', week: 60 }
        ]
      }
    ]
  };

  const [selectedPhase, setSelectedPhase] = useState(roadmap.phases[0]);

  const statusColors = {
    complete: 'text-green-600',
    'in-progress': 'text-blue-600',
    pending: 'text-gray-400',
    blocked: 'text-red-600'
  };

  const StatusIcon = ({ status }) => {
    switch (status) {
      case 'complete':
        return <CheckCircle className="w-5 h-5 text-green-600" />;
      case 'in-progress':
        return <Clock className="w-5 h-5 text-blue-600 animate-pulse" />;
      case 'blocked':
        return <AlertCircle className="w-5 h-5 text-red-600" />;
      default:
        return <Circle className="w-5 h-5 text-gray-400" />;
    }
  };

  return (
    <div className="max-w-7xl mx-auto p-8 bg-gray-50">
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          Development Roadmap
        </h1>
        <p className="text-gray-600">
          Track progress across MVP development, pilot program, and general availability
        </p>
      </div>

      {/* Phase Timeline */}
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <div className="flex gap-4 overflow-x-auto pb-4">
          {roadmap.phases.map((phase, idx) => (
            <button
              key={phase.id}
              onClick={() => setSelectedPhase(phase)}
              className={`flex-shrink-0 p-4 rounded-lg border-2 transition-all ${
                selectedPhase.id === phase.id
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-200 hover:border-gray-300'
              }`}
            >
              <div className="text-sm text-gray-600 mb-1">{phase.timeline}</div>
              <div className="font-bold text-gray-900 mb-2">{phase.name}</div>
              <div className="flex items-center gap-2">
                <div className="flex-1 bg-gray-200 rounded-full h-2 w-32">
                  <div
                    className={`h-2 rounded-full transition-all ${
                      phase.status === 'complete' ? 'bg-green-500' :
                      phase.status === 'in-progress' ? 'bg-blue-500' :
                      'bg-gray-300'
                    }`}
                    style={{ width: `${phase.progress}%` }}
                  />
                </div>
                <span className="text-sm font-bold text-gray-700">
                  {phase.progress}%
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Phase Details */}
      <div className="bg-white rounded-xl shadow-lg p-8">
        <div className="flex justify-between items-start mb-6">
          <div>
            <h2 className="text-2xl font-bold text-gray-900 mb-1">
              {selectedPhase.name}
            </h2>
            <p className="text-gray-600">{selectedPhase.timeline}</p>
          </div>
          <div className={`px-4 py-2 rounded-full font-medium ${
            selectedPhase.status === 'complete' ? 'bg-green-100 text-green-700' :
            selectedPhase.status === 'in-progress' ? 'bg-blue-100 text-blue-700' :
            'bg-gray-100 text-gray-700'
          }`}>
            {selectedPhase.status.replace('-', ' ').toUpperCase()}
          </div>
        </div>

        {/* Sprints (for MVP phase) */}
        {selectedPhase.sprints && (
          <div className="space-y-6">
            {selectedPhase.sprints.map((sprint) => (
              <div key={sprint.id} className="border-l-4 border-blue-500 pl-6 pb-6">
                <div className="flex items-center gap-3 mb-4">
                  <StatusIcon status={sprint.status} />
                  <div>
                    <h3 className="font-bold text-gray-900">
                      {sprint.name}
                    </h3>
                    <p className="text-sm text-gray-600">Weeks {sprint.weeks}</p>
                  </div>
                </div>

                <div className="space-y-2">
                  {sprint.features.map((feature, idx) => (
                    <div key={idx} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                      <StatusIcon status={feature.status} />
                      <span className={`flex-1 ${statusColors[feature.status]}`}>
                        {feature.name}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Milestones (for other phases) */}
        {selectedPhase.milestones && (
          <div className="space-y-4">
            {selectedPhase.milestones.map((milestone, idx) => (
              <div key={idx} className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                <StatusIcon status={milestone.status} />
                <div className="flex-1">
                  <div className="font-medium text-gray-900">{milestone.name}</div>
                </div>
                <div className="text-sm text-gray-600">Week {milestone.week}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Team Capacity */}
      <div className="grid md:grid-cols-3 gap-6 mt-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Team Allocation</h3>
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Backend Engineer</span>
                <span className="font-medium">1.0 FTE</span>
              </div>
              <div className="bg-blue-200 rounded-full h-2">
                <div className="bg-blue-600 h-2 rounded-full" style={{ width: '100%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Frontend Engineer</span>
                <span className="font-medium">0.5 FTE</span>
              </div>
              <div className="bg-green-200 rounded-full h-2">
                <div className="bg-green-600 h-2 rounded-full" style={{ width: '50%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Product Manager</span>
                <span className="font-medium">0.25 FTE</span>
              </div>
              <div className="bg-purple-200 rounded-full h-2">
                <div className="bg-purple-600 h-2 rounded-full" style={{ width: '25%' }} />
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Budget Status</h3>
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Budget Allocated</span>
              <span className="font-bold text-gray-900">$115,000</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Spent to Date</span>
              <span className="font-bold text-gray-900">$45,000</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Remaining</span>
              <span className="font-bold text-green-600">$70,000</span>
            </div>
            <div className="bg-gray-200 rounded-full h-3 mt-2">
              <div className="bg-blue-600 h-3 rounded-full" style={{ width: '39%' }} />
            </div>
            <p className="text-xs text-gray-500 text-center">39% utilized</p>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Next Milestones</h3>
          <div className="space-y-3">
            <div className="flex items-start gap-3">
              <Clock className="w-5 h-5 text-blue-600 mt-0.5" />
              <div>
                <div className="font-medium text-gray-900">Claude Vision Integration</div>
                <div className="text-xs text-gray-600">Due: Week 7</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Clock className="w-5 h-5 text-blue-600 mt-0.5" />
              <div>
                <div className="font-medium text-gray-900">LangGraph Orchestrator</div>
                <div className="text-xs text-gray-600">Due: Week 8</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Circle className="w-5 h-5 text-gray-400 mt-0.5" />
              <div>
                <div className="font-medium text-gray-900">React Dashboard</div>
                <div className="text-xs text-gray-600">Due: Week 10</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RoadmapTracker;

---

Component 3: System Health Dashboard (Operations)

import React, { useState, useEffect } from 'react';
import { LineChart, Line, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Activity, AlertTriangle, CheckCircle, Clock, DollarSign, Zap } from 'lucide-react';

const SystemHealthDashboard = () => {
  const [timeRange, setTimeRange] = useState('24h');

  // Simulated real-time metrics (in production, fetch from API)
  const metrics = {
    current: {
      activeJobs: 3,
      queuedJobs: 12,
      completedToday: 145,
      failedToday: 7,
      avgProcessingTime: '11.2min',
      successRate: '95.4%',
      apiCostToday: '$234.50',
      uptime: '99.8%'
    },
    alerts: [
      { severity: 'warning', message: 'API rate limit approaching (85% of quota)', timestamp: '2 min ago' },
      { severity: 'info', message: 'Scheduled maintenance window: Sun 2AM-4AM', timestamp: '1 hour ago' }
    ]
  };

  const processingTimeData = [
    { hour: '00:00', time: 12.3 },
    { hour: '04:00', time: 11.8 },
    { hour: '08:00', time: 10.5 },
    { hour: '12:00', time: 11.2 },
    { hour: '16:00', time: 12.8 },
    { hour: '20:00', time: 11.5 },
    { hour: '24:00', time: 11.2 }
  ];

  const costBreakdownData = [
    { name: 'Whisper API', value: 108, color: '#4A90E2' },
    { name: 'Claude Vision', value: 102, color: '#7ED321' },
    { name: 'LLM Synthesis', value: 24, color: '#F5A623' }
  ];

  const jobStatusData = [
    { status: 'Completed', count: 145, color: '#7ED321' },
    { status: 'In Progress', count: 3, color: '#4A90E2' },
    { status: 'Queued', count: 12, color: '#F5A623' },
    { status: 'Failed', count: 7, color: '#D0021B' }
  ];

  return (
    <div className="max-w-7xl mx-auto p-8 bg-gray-50">
      {/* Header */}
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              System Health Dashboard
            </h1>
            <p className="text-gray-600">
              Real-time monitoring of video analysis pipeline
            </p>
          </div>
          <div className="flex items-center gap-3">
            <select
              value={timeRange}
              onChange={(e) => setTimeRange(e.target.value)}
              className="px-4 py-2 border border-gray-300 rounded-lg"
            >
              <option value="1h">Last Hour</option>
              <option value="24h">Last 24 Hours</option>
              <option value="7d">Last 7 Days</option>
              <option value="30d">Last 30 Days</option>
            </select>
            <div className="flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-lg font-medium">
              <Activity className="w-5 h-5" />
              <span>All Systems Operational</span>
            </div>
          </div>
        </div>
      </div>

      {/* Alerts */}
      {metrics.alerts.length > 0 && (
        <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
          <h2 className="font-bold text-gray-900 mb-4">Active Alerts</h2>
          <div className="space-y-3">
            {metrics.alerts.map((alert, idx) => (
              <div
                key={idx}
                className={`flex items-start gap-3 p-4 rounded-lg ${
                  alert.severity === 'warning' ? 'bg-yellow-50 border-l-4 border-yellow-500' :
                  alert.severity === 'error' ? 'bg-red-50 border-l-4 border-red-500' :
                  'bg-blue-50 border-l-4 border-blue-500'
                }`}
              >
                <AlertTriangle className={`w-5 h-5 mt-0.5 ${
                  alert.severity === 'warning' ? 'text-yellow-600' :
                  alert.severity === 'error' ? 'text-red-600' :
                  'text-blue-600'
                }`} />
                <div className="flex-1">
                  <div className="font-medium text-gray-900">{alert.message}</div>
                  <div className="text-sm text-gray-600">{alert.timestamp}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Key Metrics */}
      <div className="grid md:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-blue-100 rounded-lg">
              <Activity className="w-6 h-6 text-blue-600" />
            </div>
            <div className="text-sm text-gray-600">Active Jobs</div>
          </div>
          <div className="text-3xl font-bold text-gray-900">{metrics.current.activeJobs}</div>
          <div className="text-sm text-gray-600 mt-1">
            {metrics.current.queuedJobs} queued
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-green-100 rounded-lg">
              <CheckCircle className="w-6 h-6 text-green-600" />
            </div>
            <div className="text-sm text-gray-600">Success Rate</div>
          </div>
          <div className="text-3xl font-bold text-gray-900">{metrics.current.successRate}</div>
          <div className="text-sm text-gray-600 mt-1">
            {metrics.current.completedToday} completed today
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-orange-100 rounded-lg">
              <Clock className="w-6 h-6 text-orange-600" />
            </div>
            <div className="text-sm text-gray-600">Avg Processing Time</div>
          </div>
          <div className="text-3xl font-bold text-gray-900">{metrics.current.avgProcessingTime}</div>
          <div className="text-sm text-green-600 mt-1">
            ↓ 8% vs yesterday
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-purple-100 rounded-lg">
              <DollarSign className="w-6 h-6 text-purple-600" />
            </div>
            <div className="text-sm text-gray-600">API Cost Today</div>
          </div>
          <div className="text-3xl font-bold text-gray-900">{metrics.current.apiCostToday}</div>
          <div className="text-sm text-gray-600 mt-1">
            ${(234.50 / metrics.current.completedToday).toFixed(2)}/video avg
          </div>
        </div>
      </div>

      {/* Charts */}
      <div className="grid md:grid-cols-2 gap-8 mb-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Processing Time Trend</h3>
          <ResponsiveContainer width="100%" height={250}>
            <LineChart data={processingTimeData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="hour" />
              <YAxis label={{ value: 'Minutes', angle: -90, position: 'insideLeft' }} />
              <Tooltip formatter={(value) => `${value} min`} />
              <Line type="monotone" dataKey="time" stroke="#4A90E2" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Cost Breakdown</h3>
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie
                data={costBreakdownData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {costBreakdownData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip formatter={(value) => `$${value}`} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Job Status Distribution */}
      <div className="bg-white rounded-xl shadow-lg p-6">
        <h3 className="font-bold text-gray-900 mb-4">Job Status Distribution (Today)</h3>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={jobStatusData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="status" />
            <YAxis />
            <Tooltip />
            <Bar dataKey="count" radius={[8, 8, 0, 0]}>
              {jobStatusData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Component Health */}
      <div className="grid md:grid-cols-3 gap-6 mt-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Component Health</h3>
          <div className="space-y-3">
            {[
              { name: 'API Server', status: 'healthy', uptime: '99.9%' },
              { name: 'Worker Pool', status: 'healthy', uptime: '99.8%' },
              { name: 'Database', status: 'healthy', uptime: '100%' },
              { name: 'File Storage', status: 'degraded', uptime: '98.2%' },
              { name: 'Whisper API', status: 'healthy', uptime: '99.5%' },
              { name: 'Claude API', status: 'healthy', uptime: '99.7%' }
            ].map((comp, idx) => (
              <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className={`w-3 h-3 rounded-full ${
                    comp.status === 'healthy' ? 'bg-green-500' :
                    comp.status === 'degraded' ? 'bg-yellow-500' :
                    'bg-red-500'
                  }`} />
                  <span className="font-medium text-gray-900">{comp.name}</span>
                </div>
                <span className="text-sm text-gray-600">{comp.uptime}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Resource Usage</h3>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">CPU Usage</span>
                <span className="font-medium">45%</span>
              </div>
              <div className="bg-gray-200 rounded-full h-2">
                <div className="bg-blue-600 h-2 rounded-full" style={{ width: '45%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Memory Usage</span>
                <span className="font-medium">62%</span>
              </div>
              <div className="bg-gray-200 rounded-full h-2">
                <div className="bg-green-600 h-2 rounded-full" style={{ width: '62%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Disk Usage</span>
                <span className="font-medium">38%</span>
              </div>
              <div className="bg-gray-200 rounded-full h-2">
                <div className="bg-purple-600 h-2 rounded-full" style={{ width: '38%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-gray-600">Network I/O</span>
                <span className="font-medium">125 Mbps</span>
              </div>
              <div className="bg-gray-200 rounded-full h-2">
                <div className="bg-orange-600 h-2 rounded-full" style={{ width: '25%' }} />
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Recent Events</h3>
          <div className="space-y-3 text-sm">
            {[
              { type: 'success', msg: 'Job job_abc123 completed', time: '2 min ago' },
              { type: 'success', msg: 'Job job_def456 completed', time: '5 min ago' },
              { type: 'warning', msg: 'Worker restart detected', time: '12 min ago' },
              { type: 'info', msg: 'Database backup completed', time: '1 hour ago' },
              { type: 'error', msg: 'Job job_xyz789 failed (retry)', time: '2 hours ago' }
            ].map((event, idx) => (
              <div key={idx} className="flex items-start gap-2">
                <div className={`w-2 h-2 rounded-full mt-1.5 ${
                  event.type === 'success' ? 'bg-green-500' :
                  event.type === 'warning' ? 'bg-yellow-500' :
                  event.type === 'error' ? 'bg-red-500' :
                  'bg-blue-500'
                }`} />
                <div className="flex-1">
                  <div className="text-gray-900">{event.msg}</div>
                  <div className="text-gray-500 text-xs">{event.time}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SystemHealthDashboard;

---

Component 4: Cost Analytics Dashboard

import React, { useState } from 'react';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { DollarSign, TrendingDown, TrendingUp, AlertCircle } from 'lucide-react';

const CostAnalyticsDashboard = () => {
  const [timeRange, setTimeRange] = useState('30d');

  const costTrendData = [
    { date: 'Jan 1', whisper: 85, claude: 95, synthesis: 22, total: 202 },
    { date: 'Jan 8', whisper: 92, claude: 98, synthesis: 24, total: 214 },
    { date: 'Jan 15', whisper: 88, claude: 102, synthesis: 23, total: 213 },
    { date: 'Jan 22', whisper: 78, claude: 88, synthesis: 20, total: 186 },
    { date: 'Jan 29', whisper: 0, claude: 98, synthesis: 22, total: 120 }
  ];

  const perVideoBreakdown = [
    { component: 'Whisper API', cost: 0.36, pct: 32 },
    { component: 'Claude Vision', cost: 0.34, pct: 30 },
    { component: 'LLM Synthesis', cost: 0.15, pct: 13 },
    { component: 'Infrastructure', cost: 0.18, pct: 16 },
    { component: 'Storage', cost: 0.08, pct: 7 },
    { component: 'Other', cost: 0.02, pct: 2 }
  ];

  const optimizationOpportunities = [
    {
      title: 'Migrate to Self-Hosted Whisper',
      impact: '$1,200/month',
      effort: 'Medium',
      roi: '3.2x first year',
      status: 'recommended'
    },
    {
      title: 'Implement Aggressive Frame Deduplication',
      impact: '$450/month',
      effort: 'Low',
      roi: '12x first year',
      status: 'in-progress'
    },
    {
      title: 'Use Prompt Caching (Claude)',
      impact: '$180/month',
      effort: 'Low',
      roi: '24x first year',
      status: 'implemented'
    },
    {
      title: 'Batch Vision API Calls',
      impact: '$0/month',
      effort: 'Low',
      roi: 'No additional savings',
      status: 'implemented'
    }
  ];

  return (
    <div className="max-w-7xl mx-auto p-8 bg-gray-50">
      {/* Header */}
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Cost Analytics Dashboard
            </h1>
            <p className="text-gray-600">
              Track and optimize API and infrastructure costs
            </p>
          </div>
          <select
            value={timeRange}
            onChange={(e) => setTimeRange(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg"
          >
            <option value="7d">Last 7 Days</option>
            <option value="30d">Last 30 Days</option>
            <option value="90d">Last 90 Days</option>
          </select>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="grid md:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="w-6 h-6 text-blue-600" />
            <span className="text-sm text-gray-600">Total Spend (30d)</span>
          </div>
          <div className="text-3xl font-bold text-gray-900">$6,420</div>
          <div className="flex items-center gap-1 text-sm text-green-600 mt-1">
            <TrendingDown className="w-4 h-4" />
            <span>12% vs previous period</span>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="w-6 h-6 text-green-600" />
            <span className="text-sm text-gray-600">Cost per Video</span>
          </div>
          <div className="text-3xl font-bold text-gray-900">$1.13</div>
          <div className="flex items-center gap-1 text-sm text-green-600 mt-1">
            <TrendingDown className="w-4 h-4" />
            <span>Target: $2.00</span>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="w-6 h-6 text-purple-600" />
            <span className="text-sm text-gray-600">Budget Utilization</span>
          </div>
          <div className="text-3xl font-bold text-gray-900">64%</div>
          <div className="text-sm text-gray-600 mt-1">
            $6.4K of $10K monthly budget
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center gap-3 mb-2">
            <DollarSign className="w-6 h-6 text-orange-600" />
            <span className="text-sm text-gray-600">Potential Savings</span>
          </div>
          <div className="text-3xl font-bold text-gray-900">$1,830</div>
          <div className="text-sm text-gray-600 mt-1">
            /month if optimizations applied
          </div>
        </div>
      </div>

      {/* Cost Trend Chart */}
      <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
        <h3 className="font-bold text-gray-900 mb-4">Cost Trend by Component</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={costTrendData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" />
            <YAxis label={{ value: 'Cost ($)', angle: -90, position: 'insideLeft' }} />
            <Tooltip formatter={(value) => `$${value}`} />
            <Legend />
            <Line type="monotone" dataKey="whisper" stroke="#4A90E2" strokeWidth={2} name="Whisper API" />
            <Line type="monotone" dataKey="claude" stroke="#7ED321" strokeWidth={2} name="Claude Vision" />
            <Line type="monotone" dataKey="synthesis" stroke="#F5A623" strokeWidth={2} name="LLM Synthesis" />
            <Line type="monotone" dataKey="total" stroke="#D0021B" strokeWidth={3} strokeDasharray="5 5" name="Total" />
          </LineChart>
        </ResponsiveContainer>
        <div className="mt-4 p-4 bg-blue-50 rounded-lg">
          <div className="flex items-start gap-2">
            <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
            <div>
              <div className="font-medium text-blue-900">Cost Reduction Detected</div>
              <div className="text-sm text-blue-700">
                Whisper API costs dropped to $0 on Jan 29 after migrating to self-hosted model. 
                Savings: $85/day = $2,550/month
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Per-Video Cost Breakdown */}
      <div className="grid md:grid-cols-2 gap-8 mb-8">
        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Per-Video Cost Breakdown</h3>
          <div className="space-y-3">
            {perVideoBreakdown.map((item, idx) => (
              <div key={idx}>
                <div className="flex justify-between items-center mb-1">
                  <span className="text-sm text-gray-600">{item.component}</span>
                  <span className="font-bold text-gray-900">${item.cost.toFixed(2)}</span>
                </div>
                <div className="bg-gray-200 rounded-full h-2">
                  <div
                    className="bg-blue-600 h-2 rounded-full"
                    style={{ width: `${item.pct}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
          <div className="mt-4 pt-4 border-t">
            <div className="flex justify-between items-center">
              <span className="font-bold text-gray-900">Total per Video</span>
              <span className="text-2xl font-bold text-gray-900">$1.13</span>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6">
          <h3 className="font-bold text-gray-900 mb-4">Cost Projection (Next 90 Days)</h3>
          <div className="space-y-4">
            <div>
              <div className="text-sm text-gray-600 mb-2">Current Trajectory</div>
              <div className="text-3xl font-bold text-gray-900 mb-1">$19,260</div>
              <div className="text-sm text-gray-600">Based on current usage patterns</div>
            </div>
            <div className="bg-green-50 rounded-lg p-4">
              <div className="text-sm text-green-700 mb-2">With Optimizations</div>
              <div className="text-3xl font-bold text-green-700 mb-1">$13,770</div>
              <div className="text-sm text-green-600">
                Savings: $5,490 (28% reduction)
              </div>
            </div>
            <div className="grid grid-cols-3 gap-2 text-center text-sm">
              <div className="bg-gray-50 p-2 rounded">
                <div className="font-bold text-gray-900">Month 1</div>
                <div className="text-gray-600">$4,590</div>
              </div>
              <div className="bg-gray-50 p-2 rounded">
                <div className="font-bold text-gray-900">Month 2</div>
                <div className="text-gray-600">$4,590</div>
              </div>
              <div className="bg-gray-50 p-2 rounded">
                <div className="font-bold text-gray-900">Month 3</div>
                <div className="text-gray-600">$4,590</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Optimization Opportunities */}
      <div className="bg-white rounded-xl shadow-lg p-6">
        <h3 className="font-bold text-gray-900 mb-4">Optimization Opportunities</h3>
        <div className="space-y-4">
          {optimizationOpportunities.map((opp, idx) => (
            <div key={idx} className="border rounded-lg p-4">
              <div className="flex items-start justify-between mb-2">
                <div className="flex-1">
                  <h4 className="font-bold text-gray-900">{opp.title}</h4>
                  <div className="flex items-center gap-4 mt-2 text-sm">
                    <div className="flex items-center gap-2">
                      <span className="text-gray-600">Impact:</span>
                      <span className="font-bold text-green-600">{opp.impact}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-600">Effort:</span>
                      <span className="font-medium text-gray-900">{opp.effort}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-600">ROI:</span>
                      <span className="font-bold text-blue-600">{opp.roi}</span>
                    </div>
                  </div>
                </div>
                <div className={`px-3 py-1 rounded-full text-sm font-medium ${
                  opp.status === 'implemented' ? 'bg-green-100 text-green-700' :
                  opp.status === 'in-progress' ? 'bg-blue-100 text-blue-700' :
                  'bg-yellow-100 text-yellow-700'
                }`}>
                  {opp.status.replace('-', ' ').toUpperCase()}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CostAnalyticsDashboard;

---

Usage Instructions

Installation

npm install lucide-react recharts

Import Components

import ArchitectureExplorer from './components/ArchitectureExplorer';
import RoadmapTracker from './components/RoadmapTracker';
import SystemHealthDashboard from './components/SystemHealthDashboard';
import CostAnalyticsDashboard from './components/CostAnalyticsDashboard';

function InternalDashboard() {
  return (
    <div>
      {/* Architecture documentation */}
      <ArchitectureExplorer />
      
      {/* Project management */}
      <RoadmapTracker />
      
      {/* Operations monitoring */}
      <SystemHealthDashboard />
      
      {/* Finance tracking */}
      <CostAnalyticsDashboard />
    </div>
  );
}

Real Data Integration

Replace static data with API calls:

useEffect(() => {
  fetch('/api/metrics/current')
    .then(res => res.json())
    .then(data => setMetrics(data));
}, []);

---

Next: External-facing components (customer landing pages, demos, pricing)