claude-flow 2.0.0-alpha.61 → 2.0.0-alpha.62

package/src/ui/console/styles/analysis-tools.css

@@ -12,917 +12,927 @@
 
 /* Main Analysis Container */
 .analysis-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    background: #f8fafc;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f8fafc;
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
 }
 
 /* Header Section */
 .analysis-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    background: white;
-    border-bottom: 1px solid #e5e7eb;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .analysis-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
 }
 
 .connection-status {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
 .connection-status.connected {
-    background: #dcfce7;
-    color: #166534;
+  background: #dcfce7;
+  color: #166534;
 }
 
 .connection-status.connected::before {
-    content: '●';
-    color: #10b981;
+  content: '●';
+  color: #10b981;
 }
 
 .connection-status.disconnected {
-    background: #fef2f2;
-    color: #dc2626;
+  background: #fef2f2;
+  color: #dc2626;
 }
 
 .connection-status.disconnected::before {
-    content: '●';
-    color: #ef4444;
+  content: '●';
+  color: #ef4444;
 }
 
 .connection-status.error {
-    background: #fff7ed;
-    color: #ea580c;
+  background: #fff7ed;
+  color: #ea580c;
 }
 
 .connection-status.error::before {
-    content: '●';
-    color: #f97316;
+  content: '●';
+  color: #f97316;
 }
 
 /* Tab Navigation */
 .analysis-tabs {
-    display: flex;
-    background: white;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 0 2rem;
+  display: flex;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 0 2rem;
 }
 
 .analysis-tab {
-    padding: 1rem 1.5rem;
-    cursor: pointer;
-    border: none;
-    background: none;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #6b7280;
-    border-bottom: 2px solid transparent;
-    transition: all 0.2s ease;
+  padding: 1rem 1.5rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
 }
 
 .analysis-tab:hover {
-    color: #3b82f6;
-    background: #f9fafb;
+  color: #3b82f6;
+  background: #f9fafb;
 }
 
 .analysis-tab.active {
-    color: #3b82f6;
-    border-bottom-color: #3b82f6;
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
 }
 
 /* Content Area */
 .analysis-content {
-    flex: 1;
-    padding: 2rem;
-    overflow-y: auto;
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
 }
 
 .analysis-panel {
-    display: none;
-    animation: fadeIn 0.3s ease-in-out;
+  display: none;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 .analysis-panel.active {
-    display: block;
+  display: block;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Metrics Panel */
 .metrics-panel {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
 }
 
 .metric-section {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
 }
 
 .metric-section h3 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0 0 1rem 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .metric-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
 }
 
 .metric-card {
-    text-align: center;
-    padding: 1rem;
-    background: #f9fafb;
-    border-radius: 0.5rem;
-    border: 1px solid #e5e7eb;
+  text-align: center;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
 }
 
 .metric-label {
-    font-size: 0.75rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
 }
 
 .metric-value {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #1f2937;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
 }
 
 .metric-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid #f3f4f6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #f3f4f6;
 }
 
 .metric-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .metric-item label {
-    font-size: 0.875rem;
-    color: #6b7280;
-    font-weight: 500;
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
 }
 
 .metric-item span {
-    font-size: 0.875rem;
-    color: #1f2937;
-    font-weight: 600;
+  font-size: 0.875rem;
+  color: #1f2937;
+  font-weight: 600;
 }
 
 /* Charts */
 .chart-container {
-    position: relative;
-    height: 300px;
-    margin: 1rem 0;
+  position: relative;
+  height: 300px;
+  margin: 1rem 0;
 }
 
 .chart-wrapper {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
 }
 
 .chart-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin-bottom: 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 1rem;
 }
 
 /* Health Status */
 .health-overview {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2rem;
 }
 
 .health-score {
-    font-size: 3rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
 }
 
 .health-excellent {
-    background: #10b981;
+  background: #10b981;
 }
 
 .health-good {
-    background: #3b82f6;
+  background: #3b82f6;
 }
 
 .health-warning {
-    background: #f59e0b;
+  background: #f59e0b;
 }
 
 .health-critical {
-    background: #ef4444;
+  background: #ef4444;
 }
 
 .health-label {
-    font-size: 0.875rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+  font-size: 0.875rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .health-components {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
 }
 
 .health-component {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    background: #f9fafb;
-    border-radius: 0.5rem;
-    border: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
 }
 
 .component-name {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #1f2937;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1f2937;
 }
 
 .component-value {
-    font-size: 0.875rem;
-    font-weight: 600;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-    color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  color: white;
 }
 
 /* Tool Buttons */
 .tool-section {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
-    margin-bottom: 1.5rem;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+  margin-bottom: 1.5rem;
 }
 
 .tool-section h3 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0 0 1rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 1rem 0;
 }
 
 .tool-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
 }
 
 .tool-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: #3b82f6;
-    color: white;
-    border: none;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .tool-btn:hover {
-    background: #2563eb;
-    transform: translateY(-1px);
+  background: #2563eb;
+  transform: translateY(-1px);
 }
 
 .tool-btn:disabled {
-    background: #9ca3af;
-    cursor: not-allowed;
-    transform: none;
+  background: #9ca3af;
+  cursor: not-allowed;
+  transform: none;
 }
 
 .tool-btn.loading {
-    background: #9ca3af;
-    cursor: not-allowed;
+  background: #9ca3af;
+  cursor: not-allowed;
 }
 
 .tool-btn.loading::after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    border: 2px solid #ffffff;
-    border-top: 2px solid transparent;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-left: 0.5rem;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border: 2px solid #ffffff;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-left: 0.5rem;
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Export Buttons */
 .export-section {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #e5e7eb;
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
 }
 
 .export-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: #10b981;
-    color: white;
-    border: none;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #10b981;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .export-btn:hover {
-    background: #059669;
+  background: #059669;
 }
 
 .refresh-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: #6b7280;
-    color: white;
-    border: none;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #6b7280;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .refresh-btn:hover {
-    background: #4b5563;
+  background: #4b5563;
 }
 
 /* Output Sections */
 .output-section {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
-    margin-top: 1rem;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+  margin-top: 1rem;
 }
 
 .output-section h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 1rem 0;
 }
 
 .output-content {
-    background: #f9fafb;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    border: 1px solid #e5e7eb;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    min-height: 100px;
-    white-space: pre-wrap;
-    overflow-x: auto;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  min-height: 100px;
+  white-space: pre-wrap;
+  overflow-x: auto;
 }
 
 /* Reports */
 .report-summary {
-    background: #f0f9ff;
-    border: 1px solid #bae6fd;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
+  background: #f0f9ff;
+  border: 1px solid #bae6fd;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 .report-summary h3 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: #0c4a6e;
-    margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #0c4a6e;
+  margin: 0 0 0.5rem 0;
 }
 
 .report-summary p {
-    color: #0369a1;
-    margin: 0;
+  color: #0369a1;
+  margin: 0;
 }
 
 .report-recommendations {
-    background: #f0fdf4;
-    border: 1px solid #bbf7d0;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-top: 1.5rem;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-top: 1.5rem;
 }
 
 .report-recommendations h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #166534;
-    margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #166534;
+  margin: 0 0 0.5rem 0;
 }
 
 .report-recommendations ul {
-    margin: 0;
-    padding-left: 1.5rem;
-    color: #15803d;
+  margin: 0;
+  padding-left: 1.5rem;
+  color: #15803d;
 }
 
 .report-recommendations li {
-    margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 /* Analysis Results */
 .analysis-results {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
 }
 
 .bottleneck-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 .bottleneck-item {
-    display: grid;
-    grid-template-columns: 1fr auto auto;
-    gap: 1rem;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid #e5e7eb;
-    align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  align-items: center;
 }
 
 .bottleneck-item.severity-low {
-    background: #f0fdf4;
-    border-color: #bbf7d0;
+  background: #f0fdf4;
+  border-color: #bbf7d0;
 }
 
 .bottleneck-item.severity-medium {
-    background: #fff7ed;
-    border-color: #fed7aa;
+  background: #fff7ed;
+  border-color: #fed7aa;
 }
 
 .bottleneck-item.severity-high {
-    background: #fef2f2;
-    border-color: #fecaca;
+  background: #fef2f2;
+  border-color: #fecaca;
 }
 
 .bottleneck-component {
-    font-weight: 600;
-    color: #1f2937;
+  font-weight: 600;
+  color: #1f2937;
 }
 
 .bottleneck-severity {
-    padding: 0.25rem 0.75rem;
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: white;
 }
 
 .severity-low .bottleneck-severity {
-    background: #10b981;
+  background: #10b981;
 }
 
 .severity-medium .bottleneck-severity {
-    background: #f59e0b;
+  background: #f59e0b;
 }
 
 .severity-high .bottleneck-severity {
-    background: #ef4444;
+  background: #ef4444;
 }
 
 .bottleneck-impact {
-    font-size: 0.875rem;
-    color: #6b7280;
+  font-size: 0.875rem;
+  color: #6b7280;
 }
 
 /* Usage Stats */
 .usage-overview {
-    background: white;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e5e7eb;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
 }
 
 .usage-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
 }
 
 .usage-stat {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 1rem;
-    background: #f9fafb;
-    border-radius: 0.5rem;
-    border: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
 }
 
 .usage-stat label {
-    font-size: 0.75rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
 }
 
 .usage-stat span {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #1f2937;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
 }
 
 /* Alerts */
 .alerts-container {
-    max-height: 400px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .alert {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid;
-    position: relative;
-    animation: slideIn 0.3s ease-out;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid;
+  position: relative;
+  animation: slideIn 0.3s ease-out;
 }
 
 .alert-info {
-    background: #f0f9ff;
-    border-color: #bae6fd;
-    color: #0c4a6e;
+  background: #f0f9ff;
+  border-color: #bae6fd;
+  color: #0c4a6e;
 }
 
 .alert-warning {
-    background: #fff7ed;
-    border-color: #fed7aa;
-    color: #9a3412;
+  background: #fff7ed;
+  border-color: #fed7aa;
+  color: #9a3412;
 }
 
 .alert-critical {
-    background: #fef2f2;
-    border-color: #fecaca;
-    color: #991b1b;
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #991b1b;
 }
 
 .alert-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
 }
 
 .alert-title {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .alert-timestamp {
-    font-size: 0.75rem;
-    opacity: 0.75;
+  font-size: 0.75rem;
+  opacity: 0.75;
 }
 
 .alert-message {
-    font-size: 0.875rem;
-    line-height: 1.5;
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 .alert-dismiss {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    background: none;
-    border: none;
-    font-size: 1.25rem;
-    cursor: pointer;
-    color: currentColor;
-    opacity: 0.5;
-    transition: opacity 0.2s ease;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
 }
 
 .alert-dismiss:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 @keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateX(-100%);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 /* Error Messages */
 .error-message {
-    position: fixed;
-    top: 1rem;
-    right: 1rem;
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    color: #991b1b;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    animation: slideIn 0.3s ease-out;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #991b1b;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  animation: slideIn 0.3s ease-out;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .analysis-header {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: flex-start;
-    }
+  .analysis-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
 
-    .analysis-tabs {
-        padding: 0 1rem;
-        overflow-x: auto;
-    }
+  .analysis-tabs {
+    padding: 0 1rem;
+    overflow-x: auto;
+  }
 
-    .analysis-content {
-        padding: 1rem;
-    }
+  .analysis-content {
+    padding: 1rem;
+  }
 
-    .metrics-panel {
-        grid-template-columns: 1fr;
-    }
+  .metrics-panel {
+    grid-template-columns: 1fr;
+  }
 
-    .tool-grid {
-        grid-template-columns: 1fr;
-    }
+  .tool-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .metric-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .metric-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    .health-components {
-        grid-template-columns: 1fr;
-    }
+  .health-components {
+    grid-template-columns: 1fr;
+  }
 
-    .export-section {
-        flex-direction: column;
-    }
+  .export-section {
+    flex-direction: column;
+  }
 
-    .bottleneck-item {
-        grid-template-columns: 1fr;
-        gap: 0.5rem;
-    }
+  .bottleneck-item {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
 
-    .usage-stats {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .usage-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 480px) {
-    .analysis-title {
-        font-size: 1.25rem;
-    }
+  .analysis-title {
+    font-size: 1.25rem;
+  }
 
-    .analysis-tab {
-        padding: 0.75rem 1rem;
-        font-size: 0.8rem;
-    }
+  .analysis-tab {
+    padding: 0.75rem 1rem;
+    font-size: 0.8rem;
+  }
 
-    .metric-grid {
-        grid-template-columns: 1fr;
-    }
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .usage-stats {
-        grid-template-columns: 1fr;
-    }
+  .usage-stats {
+    grid-template-columns: 1fr;
+  }
 
-    .chart-container {
-        height: 250px;
-    }
+  .chart-container {
+    height: 250px;
+  }
 }
 
 /* Loading States */
 .loading-spinner {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid #f3f4f6;
-    border-top: 3px solid #3b82f6;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f4f6;
+  border-top: 3px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
 }
 
 .loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-    z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+  z-index: 10;
 }
 
 /* Hover Effects */
 .metric-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
 .chart-wrapper:hover {
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
 }
 
 /* Focus States */
 .tool-btn:focus,
 .export-btn:focus,
 .refresh-btn:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
 }
 
 .analysis-tab:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: -2px;
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
 }
 
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
-    .analysis-container {
-        background: #111827;
-        color: #f9fafb;
-    }
-
-    .analysis-header {
-        background: #1f2937;
-        border-bottom-color: #374151;
-    }
-
-    .analysis-title {
-        color: #f9fafb;
-    }
-
-    .analysis-tabs {
-        background: #1f2937;
-        border-bottom-color: #374151;
-    }
-
-    .analysis-tab {
-        color: #9ca3af;
-    }
-
-    .analysis-tab:hover {
-        color: #60a5fa;
-        background: #374151;
-    }
-
-    .analysis-tab.active {
-        color: #60a5fa;
-        border-bottom-color: #60a5fa;
-    }
-
-    .metric-section,
-    .tool-section,
-    .chart-wrapper,
-    .output-section,
-    .analysis-results,
-    .usage-overview {
-        background: #1f2937;
-        border-color: #374151;
-    }
-
-    .metric-card,
-    .health-component,
-    .usage-stat {
-        background: #374151;
-        border-color: #4b5563;
-    }
-
-    .metric-value,
-    .metric-item span,
-    .component-name,
-    .usage-stat span {
-        color: #f9fafb;
-    }
-
-    .metric-label,
-    .metric-item label,
-    .usage-stat label {
-        color: #9ca3af;
-    }
-
-    .output-content {
-        background: #374151;
-        border-color: #4b5563;
-        color: #f9fafb;
-    }
+  .analysis-container {
+    background: #111827;
+    color: #f9fafb;
+  }
+
+  .analysis-header {
+    background: #1f2937;
+    border-bottom-color: #374151;
+  }
+
+  .analysis-title {
+    color: #f9fafb;
+  }
+
+  .analysis-tabs {
+    background: #1f2937;
+    border-bottom-color: #374151;
+  }
+
+  .analysis-tab {
+    color: #9ca3af;
+  }
+
+  .analysis-tab:hover {
+    color: #60a5fa;
+    background: #374151;
+  }
+
+  .analysis-tab.active {
+    color: #60a5fa;
+    border-bottom-color: #60a5fa;
+  }
+
+  .metric-section,
+  .tool-section,
+  .chart-wrapper,
+  .output-section,
+  .analysis-results,
+  .usage-overview {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .metric-card,
+  .health-component,
+  .usage-stat {
+    background: #374151;
+    border-color: #4b5563;
+  }
+
+  .metric-value,
+  .metric-item span,
+  .component-name,
+  .usage-stat span {
+    color: #f9fafb;
+  }
+
+  .metric-label,
+  .metric-item label,
+  .usage-stat label {
+    color: #9ca3af;
+  }
+
+  .output-content {
+    background: #374151;
+    border-color: #4b5563;
+    color: #f9fafb;
+  }
 }
 
 /* Print Styles */
 @media print {
-    .analysis-container {
-        height: auto;
-    }
-
-    .analysis-tabs,
-    .export-section,
-    .tool-section {
-        display: none;
-    }
-
-    .analysis-content {
-        padding: 0;
-    }
-
-    .analysis-panel {
-        display: block !important;
-    }
-
-    .chart-container {
-        height: 400px;
-    }
-}
+  .analysis-container {
+    height: auto;
+  }
+
+  .analysis-tabs,
+  .export-section,
+  .tool-section {
+    display: none;
+  }
+
+  .analysis-content {
+    padding: 0;
+  }
+
+  .analysis-panel {
+    display: block !important;
+  }
+
+  .chart-container {
+    height: 400px;
+  }
+}