claude-flow-multilang
Version:
Revolutionary multilingual AI orchestration framework with cultural awareness and DDD architecture
377 lines (359 loc) • 15.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Claude Flow Analytics & Monitoring Dashboard" />
<title>📊 Claude Flow Analytics Dashboard</title>
<link rel="stylesheet" href="styles/console.css" />
<link rel="stylesheet" href="styles/analytics.css" />
<link rel="stylesheet" href="styles/responsive.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<!-- Header with branding and controls -->
<header class="console-header">
<div class="header-left">
<h1 class="console-title">
<span class="console-icon">📊</span>
Claude Flow Analytics
</h1>
<div class="connection-status" id="connectionStatus">
<span class="status-indicator" id="statusIndicator"></span>
<span class="status-text" id="statusText">Connecting...</span>
</div>
</div>
<div class="header-right">
<button class="header-button" id="refreshData" aria-label="Refresh Data">
<span class="icon">🔄</span>
Refresh
</button>
<button class="header-button" id="exportReport" aria-label="Export Report">
<span class="icon">📥</span>
Export
</button>
<button class="header-button" id="settingsToggle" aria-label="Toggle Settings">
<span class="icon">⚙️</span>
Settings
</button>
<button class="header-button" id="backToConsole" aria-label="Back to Console">
<span class="icon">🔙</span>
Console
</button>
</div>
</header>
<!-- Main analytics dashboard -->
<main class="analytics-main">
<!-- Quick stats overview -->
<section class="stats-overview">
<div class="stat-card" id="performanceCard">
<div class="stat-icon">⚡</div>
<div class="stat-content">
<div class="stat-value" id="performanceScore">--</div>
<div class="stat-label">Performance Score</div>
<div class="stat-trend" id="performanceTrend">--</div>
</div>
</div>
<div class="stat-card" id="tokenUsageCard">
<div class="stat-icon">🪙</div>
<div class="stat-content">
<div class="stat-value" id="tokenCount">--</div>
<div class="stat-label">Tokens Used</div>
<div class="stat-trend" id="tokenTrend">--</div>
</div>
</div>
<div class="stat-card" id="systemHealthCard">
<div class="stat-icon">💚</div>
<div class="stat-content">
<div class="stat-value" id="healthScore">--</div>
<div class="stat-label">System Health</div>
<div class="stat-trend" id="healthTrend">--</div>
</div>
</div>
<div class="stat-card" id="costAnalysisCard">
<div class="stat-icon">💰</div>
<div class="stat-content">
<div class="stat-value" id="estimatedCost">--</div>
<div class="stat-label">Estimated Cost</div>
<div class="stat-trend" id="costTrend">--</div>
</div>
</div>
</section>
<!-- Analytics tools grid -->
<section class="analytics-grid">
<!-- Performance Monitoring -->
<div class="analytics-panel" id="performancePanel">
<div class="panel-header">
<h3><span class="panel-icon">📈</span>Performance Monitoring</h3>
<div class="panel-controls">
<button class="panel-button" id="runBenchmark">Run Benchmark</button>
<button class="panel-button" id="analyzeBottlenecks">Find Bottlenecks</button>
</div>
</div>
<div class="panel-content">
<div class="chart-container">
<canvas id="performanceChart"></canvas>
</div>
<div class="metrics-list" id="performanceMetrics">
<!-- Performance metrics will be populated here -->
</div>
</div>
</div>
<!-- Token Usage Analytics -->
<div class="analytics-panel" id="tokenPanel">
<div class="panel-header">
<h3><span class="panel-icon">🪙</span>Token Usage Analytics</h3>
<div class="panel-controls">
<button class="panel-button" id="analyzeTokens">Analyze Usage</button>
<button class="panel-button" id="optimizeTokens">Optimize</button>
</div>
</div>
<div class="panel-content">
<div class="chart-container">
<canvas id="tokenChart"></canvas>
</div>
<div class="token-breakdown" id="tokenBreakdown">
<!-- Token breakdown will be populated here -->
</div>
</div>
</div>
<!-- System Health Monitor -->
<div class="analytics-panel" id="healthPanel">
<div class="panel-header">
<h3><span class="panel-icon">🏥</span>System Health Monitor</h3>
<div class="panel-controls">
<button class="panel-button" id="runHealthCheck">Health Check</button>
<button class="panel-button" id="viewDiagnostics">Diagnostics</button>
</div>
</div>
<div class="panel-content">
<div class="health-status" id="healthStatus">
<div class="health-indicator">
<span class="health-dot" id="cpuHealth"></span>
<span class="health-label">CPU</span>
<span class="health-value" id="cpuValue">--</span>
</div>
<div class="health-indicator">
<span class="health-dot" id="memoryHealth"></span>
<span class="health-label">Memory</span>
<span class="health-value" id="memoryValue">--</span>
</div>
<div class="health-indicator">
<span class="health-dot" id="swarmHealth"></span>
<span class="health-label">Swarm</span>
<span class="health-value" id="swarmValue">--</span>
</div>
<div class="health-indicator">
<span class="health-dot" id="networkHealth"></span>
<span class="health-label">Network</span>
<span class="health-value" id="networkValue">--</span>
</div>
</div>
<div class="chart-container">
<canvas id="healthChart"></canvas>
</div>
</div>
</div>
<!-- Error Analysis -->
<div class="analytics-panel" id="errorPanel">
<div class="panel-header">
<h3><span class="panel-icon">🔍</span>Error Analysis</h3>
<div class="panel-controls">
<button class="panel-button" id="analyzeErrors">Analyze Patterns</button>
<button class="panel-button" id="clearErrors">Clear Log</button>
</div>
</div>
<div class="panel-content">
<div class="error-summary" id="errorSummary">
<div class="error-count">
<span class="error-count-value" id="errorCount">0</span>
<span class="error-count-label">Total Errors</span>
</div>
<div class="error-rate">
<span class="error-rate-value" id="errorRate">0%</span>
<span class="error-rate-label">Error Rate</span>
</div>
</div>
<div class="error-patterns" id="errorPatterns">
<!-- Error patterns will be populated here -->
</div>
</div>
</div>
<!-- Quality Assessment -->
<div class="analytics-panel" id="qualityPanel">
<div class="panel-header">
<h3><span class="panel-icon">✅</span>Quality Assessment</h3>
<div class="panel-controls">
<button class="panel-button" id="runQualityCheck">Assess Quality</button>
<button class="panel-button" id="generateReport">Generate Report</button>
</div>
</div>
<div class="panel-content">
<div class="quality-metrics" id="qualityMetrics">
<div class="quality-score">
<span class="score-value" id="overallQuality">--</span>
<span class="score-label">Overall Quality</span>
</div>
<div class="quality-breakdown">
<div class="quality-item">
<span class="quality-name">Code Quality</span>
<div class="quality-bar">
<div class="quality-fill" id="codeQuality"></div>
</div>
<span class="quality-percent" id="codeQualityPercent">--</span>
</div>
<div class="quality-item">
<span class="quality-name">Response Quality</span>
<div class="quality-bar">
<div class="quality-fill" id="responseQuality"></div>
</div>
<span class="quality-percent" id="responseQualityPercent">--</span>
</div>
<div class="quality-item">
<span class="quality-name">Coordination Quality</span>
<div class="quality-bar">
<div class="quality-fill" id="coordinationQuality"></div>
</div>
<span class="quality-percent" id="coordinationQualityPercent">--</span>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Statistics -->
<div class="analytics-panel" id="usagePanel">
<div class="panel-header">
<h3><span class="panel-icon">📊</span>Usage Statistics</h3>
<div class="panel-controls">
<button class="panel-button" id="collectStats">Collect Stats</button>
<button class="panel-button" id="trendAnalysis">Trend Analysis</button>
</div>
</div>
<div class="panel-content">
<div class="usage-stats" id="usageStats">
<div class="usage-item">
<span class="usage-label">Commands Executed</span>
<span class="usage-value" id="commandsExecuted">--</span>
</div>
<div class="usage-item">
<span class="usage-label">Files Processed</span>
<span class="usage-value" id="filesProcessed">--</span>
</div>
<div class="usage-item">
<span class="usage-label">Swarms Created</span>
<span class="usage-value" id="swarmsCreated">--</span>
</div>
<div class="usage-item">
<span class="usage-label">Avg Response Time</span>
<span class="usage-value" id="avgResponseTime">--</span>
</div>
</div>
<div class="chart-container">
<canvas id="usageChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Real-time activity log -->
<section class="activity-log">
<div class="log-header">
<h3><span class="log-icon">📝</span>Real-time Activity Log</h3>
<div class="log-controls">
<button class="log-button" id="pauseLog">Pause</button>
<button class="log-button" id="clearLog">Clear</button>
<button class="log-button" id="exportLog">Export</button>
</div>
</div>
<div class="log-content" id="activityLog">
<!-- Real-time activity will be displayed here -->
</div>
</section>
</main>
<!-- Settings panel -->
<aside class="settings-panel" id="settingsPanel">
<div class="settings-header">
<h2>Analytics Settings</h2>
<button class="close-button" id="closeSettings" aria-label="Close Settings">×</button>
</div>
<div class="settings-content">
<!-- Data Collection Settings -->
<section class="setting-group">
<h3>Data Collection</h3>
<div class="setting-item">
<label for="refreshInterval">Refresh Interval (seconds):</label>
<select id="refreshInterval">
<option value="5">5 seconds</option>
<option value="10" selected>10 seconds</option>
<option value="30">30 seconds</option>
<option value="60">1 minute</option>
</select>
</div>
<div class="setting-item">
<label class="checkbox-label">
<input type="checkbox" id="realTimeUpdates" checked />
Enable real-time updates
</label>
</div>
<div class="setting-item">
<label class="checkbox-label">
<input type="checkbox" id="enableNotifications" />
Enable alert notifications
</label>
</div>
</section>
<!-- Performance Thresholds -->
<section class="setting-group">
<h3>Performance Thresholds</h3>
<div class="setting-item">
<label for="cpuThreshold">CPU Warning Threshold (%):</label>
<input type="number" id="cpuThreshold" min="1" max="100" value="80" />
</div>
<div class="setting-item">
<label for="memoryThreshold">Memory Warning Threshold (%):</label>
<input type="number" id="memoryThreshold" min="1" max="100" value="85" />
</div>
<div class="setting-item">
<label for="responseThreshold">Response Time Warning (ms):</label>
<input type="number" id="responseThreshold" min="100" max="10000" value="2000" />
</div>
</section>
<!-- Data Retention -->
<section class="setting-group">
<h3>Data Retention</h3>
<div class="setting-item">
<label for="retentionPeriod">Keep data for:</label>
<select id="retentionPeriod">
<option value="1">1 day</option>
<option value="7" selected>7 days</option>
<option value="30">30 days</option>
<option value="90">90 days</option>
</select>
</div>
<div class="setting-item">
<label for="maxLogEntries">Max log entries:</label>
<input type="number" id="maxLogEntries" min="100" max="50000" value="10000" />
</div>
</section>
</div>
</aside>
<!-- Loading indicator -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-spinner">
<div class="spinner"></div>
<div class="loading-text">Loading analytics data...</div>
</div>
</div>
<!-- JavaScript modules -->
<script type="module" src="js/analytics-dashboard.js"></script>
<script type="module" src="js/analytics-tools.js"></script>
<script type="module" src="js/chart-manager.js"></script>
<script type="module" src="js/websocket-client.js"></script>
</body>
</html>