claude-flow-multilang
Version:
Revolutionary multilingual AI orchestration framework with cultural awareness and DDD architecture
317 lines (297 loc) • 13.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Claude Flow - Analysis & Monitoring Tools</title>
<link rel="stylesheet" href="styles/analysis-tools.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="analysis-container">
<!-- Header -->
<header class="analysis-header">
<h1 class="analysis-title">Analysis & Monitoring Tools</h1>
<div id="connection-status" class="connection-status disconnected">Disconnected</div>
</header>
<!-- Tab Navigation -->
<nav class="analysis-tabs">
<button class="analysis-tab active" data-tab="metrics">Metrics</button>
<button class="analysis-tab" data-tab="reports">Reports</button>
<button class="analysis-tab" data-tab="analysis">Analysis</button>
<button class="analysis-tab" data-tab="health">Health</button>
</nav>
<!-- Content Area -->
<main class="analysis-content">
<!-- Metrics Panel -->
<div id="metrics-panel" class="analysis-panel active">
<div class="metrics-panel">
<!-- Performance Metrics -->
<div class="metric-section">
<h3>📊 Performance Metrics</h3>
<div id="performance-metrics" class="metric-grid">
<div class="metric-card">
<div class="metric-label">Response Time</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Throughput</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Error Rate</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Uptime</div>
<div class="metric-value">--</div>
</div>
</div>
<div class="chart-wrapper">
<div class="chart-title">Performance Over Time</div>
<div class="chart-container">
<canvas id="performance-chart"></canvas>
</div>
</div>
</div>
<!-- Token Usage -->
<div class="metric-section">
<h3>🎯 Token Usage</h3>
<div id="token-metrics" class="metric-grid">
<div class="metric-card">
<div class="metric-label">Total Tokens</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Input Tokens</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Output Tokens</div>
<div class="metric-value">--</div>
</div>
<div class="metric-card">
<div class="metric-label">Cache Hit Rate</div>
<div class="metric-value">--</div>
</div>
</div>
<div class="chart-wrapper">
<div class="chart-title">Token Distribution</div>
<div class="chart-container">
<canvas id="token-usage-chart"></canvas>
</div>
</div>
</div>
</div>
<!-- Tool Actions -->
<div class="tool-section">
<h3>🔧 Metrics Tools</h3>
<div class="tool-grid">
<button class="tool-btn" data-tool="performance_report">📈 Performance Report</button>
<button class="tool-btn" data-tool="token_usage">🎯 Token Usage</button>
<button class="tool-btn" data-tool="metrics_collect">📊 Collect Metrics</button>
<button class="tool-btn" data-tool="usage_stats">📋 Usage Statistics</button>
</div>
<div class="export-section">
<button class="export-btn" data-type="metrics" data-format="json">
📄 Export JSON
</button>
<button class="export-btn" data-type="metrics" data-format="csv">
📊 Export CSV
</button>
<button class="refresh-btn" data-section="metrics">🔄 Refresh</button>
</div>
</div>
</div>
<!-- Reports Panel -->
<div id="reports-panel" class="analysis-panel">
<div class="tool-section">
<h3>📋 Report Generation</h3>
<div class="tool-grid">
<button class="tool-btn" data-tool="performance_report">📈 Performance Report</button>
<button class="tool-btn" data-tool="cost_analysis">💰 Cost Analysis</button>
<button class="tool-btn" data-tool="quality_assess">⭐ Quality Assessment</button>
<button class="tool-btn" data-tool="benchmark_run">🏁 Benchmark Report</button>
</div>
<div class="export-section">
<button class="export-btn" data-type="reports" data-format="json">
📄 Export JSON
</button>
<button class="export-btn" data-type="reports" data-format="csv">
📊 Export CSV
</button>
<button class="refresh-btn" data-section="reports">🔄 Refresh</button>
</div>
</div>
<!-- Report Output -->
<div class="output-section">
<h4>📊 Report Output</h4>
<div id="performance-report-output" class="output-content">
Click on a report tool above to generate reports...
</div>
</div>
</div>
<!-- Analysis Panel -->
<div id="analysis-panel" class="analysis-panel">
<div class="tool-section">
<h3>🔍 Analysis Tools</h3>
<div class="tool-grid">
<button class="tool-btn" data-tool="bottleneck_analyze">
🚧 Bottleneck Analysis
</button>
<button class="tool-btn" data-tool="trend_analysis">📈 Trend Analysis</button>
<button class="tool-btn" data-tool="error_analysis">❌ Error Analysis</button>
<button class="tool-btn" data-tool="capacity_plan">📏 Capacity Planning</button>
</div>
<div class="export-section">
<button class="export-btn" data-type="analysis" data-format="json">
📄 Export JSON
</button>
<button class="export-btn" data-type="analysis" data-format="csv">
📊 Export CSV
</button>
<button class="refresh-btn" data-section="analysis">🔄 Refresh</button>
</div>
</div>
<!-- Analysis Output -->
<div class="output-section">
<h4>🔍 Analysis Results</h4>
<div id="bottleneck-analysis-output" class="output-content">
Click on an analysis tool above to view results...
</div>
</div>
<div class="output-section">
<h4>📈 Trend Analysis</h4>
<div id="trends-output" class="output-content">
Trend analysis results will appear here...
</div>
</div>
<div class="output-section">
<h4>❌ Error Analysis</h4>
<div id="errors-output" class="output-content">
Error analysis results will appear here...
</div>
</div>
<div class="output-section">
<h4>📏 Capacity Planning</h4>
<div id="capacity-output" class="output-content">
Capacity planning results will appear here...
</div>
</div>
</div>
<!-- Health Panel -->
<div id="health-panel" class="analysis-panel">
<div class="metric-section">
<h3>🏥 System Health</h3>
<div id="health-status">
<div class="health-overview">
<div class="health-score health-excellent">--</div>
<div class="health-label">Overall Health</div>
</div>
<div class="health-components">
<div class="health-component">
<span class="component-name">CPU</span>
<span class="component-value health-excellent">--%</span>
</div>
<div class="health-component">
<span class="component-name">Memory</span>
<span class="component-value health-excellent">--%</span>
</div>
<div class="health-component">
<span class="component-name">Disk</span>
<span class="component-value health-excellent">--%</span>
</div>
<div class="health-component">
<span class="component-name">Network</span>
<span class="component-value health-excellent">--%</span>
</div>
<div class="health-component">
<span class="component-name">API</span>
<span class="component-value health-excellent">--%</span>
</div>
<div class="health-component">
<span class="component-name">Database</span>
<span class="component-value health-excellent">--%</span>
</div>
</div>
</div>
<div class="chart-wrapper">
<div class="chart-title">System Health Overview</div>
<div class="chart-container">
<canvas id="system-health-chart"></canvas>
</div>
</div>
</div>
<div class="metric-section">
<h3>⚡ Load Monitoring</h3>
<div class="chart-wrapper">
<div class="chart-title">Load Over Time</div>
<div class="chart-container">
<canvas id="load-monitor-chart"></canvas>
</div>
</div>
</div>
<div class="tool-section">
<h3>🏥 Health Tools</h3>
<div class="tool-grid">
<button class="tool-btn" data-tool="health_check">🏥 Health Check</button>
<button class="tool-btn" data-tool="load_monitor">⚡ Load Monitor</button>
</div>
<div class="export-section">
<button class="export-btn" data-type="health" data-format="json">
📄 Export JSON
</button>
<button class="export-btn" data-type="health" data-format="csv">📊 Export CSV</button>
<button class="refresh-btn" data-section="health">🔄 Refresh</button>
</div>
</div>
<!-- Health Output -->
<div class="output-section">
<h4>🏥 Health Check Results</h4>
<div id="health-output" class="output-content">
Click on a health tool above to view results...
</div>
</div>
<div class="output-section">
<h4>⚡ Load Monitor Results</h4>
<div id="load-output" class="output-content">
Load monitoring results will appear here...
</div>
</div>
<!-- Alerts -->
<div class="metric-section">
<h3>🚨 System Alerts</h3>
<div id="alerts-container" class="alerts-container">
<div class="alert alert-info">
<div class="alert-header">
<span class="alert-title">System Started</span>
<span class="alert-timestamp">12:00:00</span>
</div>
<div class="alert-message">
Analysis & Monitoring Tools initialized successfully
</div>
<button class="alert-dismiss">×</button>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Additional Output Sections (Hidden by default) -->
<div style="display: none">
<div id="token-usage-output" class="output-content"></div>
<div id="benchmark-output" class="output-content"></div>
<div id="metrics-output" class="output-content"></div>
<div id="costs-output" class="output-content"></div>
<div id="quality-output" class="output-content"></div>
<div id="stats-output" class="output-content"></div>
</div>
<script src="js/analysis-tools.js"></script>
</body>
</html>