fluyenta-ruby 0.1.14

data/lib/brainzlab/devtools/assets/devtools.css

@@ -0,0 +1,1329 @@
+/* BrainzLab DevTools - Brainz Design System */
+
+:root {
+  --brainz-cream-50: #FFFDFB;
+  --brainz-cream-100: #FFF8F0;
+  --brainz-cream-200: #F5EDE3;
+  --brainz-cream-300: #E8DED3;
+  --brainz-orange: #FF6B35;
+  --brainz-orange-dark: #E55A2B;
+  --brainz-orange-light: #FF8A5C;
+  --brainz-text: #2D3748;
+  --brainz-text-muted: #718096;
+  --brainz-text-light: #A0AEC0;
+  --brainz-border: #E2E8F0;
+  --brainz-border-dark: #CBD5E0;
+  --brainz-error: #E53E3E;
+  --brainz-error-light: #FED7D7;
+  --brainz-success: #38A169;
+  --brainz-success-light: #C6F6D5;
+  --brainz-warning: #D69E2E;
+  --brainz-warning-light: #FEFCBF;
+  --brainz-info: #3182CE;
+  --brainz-info-light: #BEE3F8;
+  --brainz-code-bg: #1A202C;
+  --brainz-code-text: #E2E8F0;
+  --brainz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --brainz-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Droid Sans Mono", monospace;
+  --brainz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --brainz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* Panel-specific variables (light mode) */
+  --brainz-panel-bg: white;
+  --brainz-panel-surface: #FAFAFA;
+  --brainz-panel-surface-alt: #F5F5F5;
+  --brainz-panel-surface-hover: #EEEEEE;
+  --brainz-panel-text: #1A1A1A;
+  --brainz-panel-text-secondary: #374151;
+  --brainz-panel-text-muted: #6B7280;
+  --brainz-panel-text-placeholder: #9CA3AF;
+  --brainz-panel-border: #E5E5E5;
+  --brainz-panel-border-light: #F3F4F6;
+
+  /* Issue colors (light mode) */
+  --brainz-issue-error-bg: #FEF2F2;
+  --brainz-issue-error-text: #B91C1C;
+  --brainz-issue-warning-bg: #FFFBEB;
+  --brainz-issue-warning-text: #B45309;
+  --brainz-issue-metric-critical-bg: #FEE2E2;
+  --brainz-issue-metric-critical-text: #B91C1C;
+  --brainz-issue-metric-slow-bg: #FEF3C7;
+  --brainz-issue-metric-slow-text: #B45309;
+
+  /* Timeline colors (light mode) */
+  --brainz-timeline-db: #3B82F6;
+  --brainz-timeline-db-bg: #EFF6FF;
+  --brainz-timeline-views: #10B981;
+  --brainz-timeline-views-bg: #ECFDF5;
+  --brainz-timeline-other: #6B7280;
+  --brainz-timeline-other-bg: #F3F4F6;
+  --brainz-timeline-bar-bg: #F3F4F6;
+
+  /* Score colors (light mode) */
+  --brainz-score-bg: #E5E5E5;
+  --brainz-score-excellent: #22C55E;
+  --brainz-score-excellent-text: #16A34A;
+  --brainz-score-good: #3B82F6;
+  --brainz-score-good-text: #2563EB;
+  --brainz-score-warning: #F59E0B;
+  --brainz-score-warning-text: #D97706;
+  --brainz-score-poor: #EF4444;
+  --brainz-score-poor-text: #DC2626;
+}
+
+/* ============================================
+   DARK MODE SUPPORT - Terminal Inspired
+   ============================================ */
+html.dark {
+  --brainz-cream-50: #111111;
+  --brainz-cream-100: #161616;
+  --brainz-cream-200: #1c1c1c;
+  --brainz-cream-300: #262626;
+  --brainz-text: #e4e4e4;
+  --brainz-text-muted: #a3a3a3;
+  --brainz-text-light: #737373;
+  --brainz-border: #262626;
+  --brainz-border-dark: #333333;
+  --brainz-error: #f87171;
+  --brainz-error-light: rgba(248, 113, 113, 0.15);
+  --brainz-success: #4ade80;
+  --brainz-success-light: rgba(74, 222, 128, 0.15);
+  --brainz-warning: #fbbf24;
+  --brainz-warning-light: rgba(251, 191, 36, 0.15);
+  --brainz-info: #60a5fa;
+  --brainz-info-light: rgba(96, 165, 250, 0.15);
+  --brainz-code-bg: #000000;
+  --brainz-code-text: #e4e4e4;
+  --brainz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --brainz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+
+  /* Panel-specific variables (dark mode - terminal inspired) */
+  --brainz-panel-bg: #0a0a0a;
+  --brainz-panel-surface: #111111;
+  --brainz-panel-surface-alt: #161616;
+  --brainz-panel-surface-hover: #1c1c1c;
+  --brainz-panel-text: #e4e4e4;
+  --brainz-panel-text-secondary: #a3a3a3;
+  --brainz-panel-text-muted: #737373;
+  --brainz-panel-text-placeholder: #525252;
+  --brainz-panel-border: #262626;
+  --brainz-panel-border-light: #1f1f1f;
+
+  /* Issue colors (dark mode) */
+  --brainz-issue-error-bg: rgba(248, 113, 113, 0.1);
+  --brainz-issue-error-text: #f87171;
+  --brainz-issue-warning-bg: rgba(251, 191, 36, 0.1);
+  --brainz-issue-warning-text: #fbbf24;
+  --brainz-issue-metric-critical-bg: rgba(248, 113, 113, 0.15);
+  --brainz-issue-metric-critical-text: #f87171;
+  --brainz-issue-metric-slow-bg: rgba(251, 191, 36, 0.15);
+  --brainz-issue-metric-slow-text: #fbbf24;
+
+  /* Timeline colors (dark mode) */
+  --brainz-timeline-db: #60a5fa;
+  --brainz-timeline-db-bg: rgba(96, 165, 250, 0.15);
+  --brainz-timeline-views: #4ade80;
+  --brainz-timeline-views-bg: rgba(74, 222, 128, 0.15);
+  --brainz-timeline-other: #737373;
+  --brainz-timeline-other-bg: rgba(115, 115, 115, 0.15);
+  --brainz-timeline-bar-bg: #1c1c1c;
+
+  /* Score colors (dark mode) */
+  --brainz-score-bg: #262626;
+  --brainz-score-excellent: #4ade80;
+  --brainz-score-excellent-text: #4ade80;
+  --brainz-score-good: #60a5fa;
+  --brainz-score-good-text: #60a5fa;
+  --brainz-score-warning: #fbbf24;
+  --brainz-score-warning-text: #fbbf24;
+  --brainz-score-poor: #f87171;
+  --brainz-score-poor-text: #f87171;
+}
+
+/* ============================================
+   ERROR PAGE STYLES
+   ============================================ */
+
+.brainz-error-page {
+  font-family: var(--brainz-font);
+  background: var(--brainz-cream-100);
+  min-height: 100vh;
+  padding: 2rem;
+  margin: 0;
+  color: var(--brainz-text);
+  line-height: 1.6;
+}
+
+.brainz-error-page * {
+  box-sizing: border-box;
+}
+
+.brainz-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Error Header */
+.brainz-error-header {
+  background: linear-gradient(135deg, var(--brainz-orange), var(--brainz-orange-dark));
+  color: white;
+  padding: 2rem;
+  border-radius: 12px;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--brainz-shadow-lg);
+}
+
+.brainz-error-header-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.brainz-logo {
+  flex-shrink: 0;
+}
+
+.brainz-logo img {
+  width: 40px;
+  height: 40px;
+}
+
+.brainz-error-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+  letter-spacing: -0.025em;
+}
+
+.brainz-error-message {
+  font-size: 1rem;
+  opacity: 0.95;
+  margin: 0;
+  word-break: break-word;
+}
+
+/* Sections */
+.brainz-section {
+  background: var(--brainz-panel-bg);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+  box-shadow: var(--brainz-shadow);
+}
+
+.brainz-section h2 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--brainz-panel-text-muted);
+  margin: 0 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--brainz-panel-border);
+}
+
+.brainz-section h3 {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--brainz-panel-text);
+  margin: 1rem 0 0.5rem 0;
+}
+
+/* File Path */
+.brainz-file-path {
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  color: var(--brainz-text-muted);
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--brainz-cream-200);
+  border-radius: 6px;
+}
+
+/* Source Code */
+.brainz-source-code {
+  background: var(--brainz-code-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.brainz-source-line {
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  line-height: 1.7;
+  color: var(--brainz-code-text);
+  display: flex;
+  gap: 1rem;
+  padding: 0 0.5rem;
+  margin: 0 -0.5rem;
+}
+
+.brainz-source-line.highlight {
+  background: rgba(255, 107, 53, 0.25);
+  border-left: 3px solid var(--brainz-orange);
+  margin-left: -1rem;
+  padding-left: calc(1rem - 3px);
+}
+
+.brainz-source-line .line-number {
+  color: var(--brainz-text-muted);
+  min-width: 3rem;
+  text-align: right;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.brainz-source-line .line-content {
+  white-space: pre;
+}
+
+/* Backtrace */
+.brainz-backtrace {
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.brainz-frame {
+  padding: 0.5rem 0.75rem;
+  margin: 0 -0.75rem;
+  border-radius: 4px;
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.brainz-frame:hover {
+  background: var(--brainz-cream-200);
+}
+
+.brainz-frame.in-app {
+  color: var(--brainz-text);
+  font-weight: 500;
+}
+
+.brainz-frame:not(.in-app) {
+  color: var(--brainz-text-muted);
+}
+
+.brainz-frame.first {
+  background: var(--brainz-error-light);
+  color: var(--brainz-error);
+  font-weight: 600;
+}
+
+.brainz-frame .frame-file {
+  word-break: break-all;
+}
+
+.brainz-frame .frame-line {
+  color: var(--brainz-orange);
+}
+
+.brainz-frame .frame-function {
+  color: var(--brainz-text-muted);
+}
+
+/* Info Tables */
+.brainz-info-table {
+  width: 100%;
+  font-size: 0.875rem;
+  border-collapse: collapse;
+}
+
+.brainz-info-table th,
+.brainz-info-table td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--brainz-panel-border);
+}
+
+.brainz-info-table th {
+  width: 140px;
+  color: var(--brainz-panel-text-muted);
+  font-weight: 500;
+}
+
+.brainz-info-table td {
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  color: var(--brainz-panel-text);
+  word-break: break-all;
+}
+
+/* Parameters */
+.brainz-params {
+  background: var(--brainz-panel-surface-alt);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  margin: 0;
+  color: var(--brainz-panel-text);
+}
+
+/* Query Table */
+.brainz-query-table {
+  width: 100%;
+  font-size: 0.8125rem;
+  border-collapse: collapse;
+}
+
+.brainz-query-table th,
+.brainz-query-table td {
+  padding: 0.5rem;
+  text-align: left;
+  border-bottom: 1px solid var(--brainz-panel-border);
+}
+
+.brainz-query-table th {
+  color: var(--brainz-panel-text-muted);
+  font-weight: 500;
+  background: var(--brainz-panel-surface);
+}
+
+.brainz-query-table td {
+  color: var(--brainz-panel-text);
+}
+
+.brainz-query-duration {
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  color: var(--brainz-panel-text);
+}
+
+.brainz-query-duration.slow {
+  color: var(--brainz-warning);
+  font-weight: 600;
+}
+
+.brainz-query-duration.very-slow {
+  color: var(--brainz-error);
+  font-weight: 600;
+}
+
+.brainz-query-sql {
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  color: var(--brainz-panel-text-muted);
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   DEBUG PANEL STYLES
+   ============================================ */
+
+.brainz-debug-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 50vh;
+  background: var(--brainz-panel-bg);
+  border-top: 3px solid var(--brainz-orange);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+  font-family: var(--brainz-font);
+  z-index: 999999;
+  display: flex;
+  flex-direction: column;
+  transition: max-height 0.2s ease;
+}
+
+html.dark .brainz-debug-panel {
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.brainz-debug-panel * {
+  box-sizing: border-box;
+}
+
+.brainz-debug-panel.collapsed {
+  max-height: 44px;
+  overflow: hidden;
+}
+
+.brainz-debug-panel.collapsed .brainz-debug-tabs,
+.brainz-debug-panel.collapsed .brainz-debug-content {
+  display: none;
+}
+
+/* Minimized State - Panel completely hidden */
+.brainz-debug-panel.minimized {
+  max-height: 0;
+  border-top-width: 0;
+  box-shadow: none;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.brainz-debug-panel.minimized .brainz-debug-toolbar,
+.brainz-debug-panel.minimized .brainz-debug-tabs,
+.brainz-debug-panel.minimized .brainz-debug-content {
+  display: none;
+}
+
+/* Restore button is visible when minimized */
+.brainz-debug-panel.minimized .brainz-debug-restore {
+  pointer-events: auto;
+}
+
+/* Toolbar */
+.brainz-debug-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--brainz-panel-surface);
+  border-bottom: 1px solid var(--brainz-panel-border);
+  gap: 0.75rem;
+  cursor: pointer;
+  min-height: 44px;
+  flex-shrink: 0;
+}
+
+.brainz-debug-toolbar:hover {
+  background: var(--brainz-panel-surface-alt);
+}
+
+.brainz-debug-logo {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.brainz-debug-stat {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background: var(--brainz-panel-bg);
+  border: 1px solid var(--brainz-panel-border);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--brainz-panel-text-muted);
+}
+
+.brainz-debug-stat strong {
+  font-weight: 600;
+  color: var(--brainz-panel-text);
+}
+
+.brainz-debug-stat.error {
+  background: var(--brainz-error-light);
+  border-color: var(--brainz-error);
+  color: var(--brainz-error);
+}
+
+.brainz-debug-stat.warning {
+  background: var(--brainz-warning-light);
+  border-color: var(--brainz-warning);
+  color: var(--brainz-warning);
+}
+
+.brainz-debug-stat.success {
+  background: var(--brainz-success-light);
+  border-color: var(--brainz-success);
+  color: var(--brainz-success);
+}
+
+.brainz-debug-expand {
+  margin-left: auto;
+  color: var(--brainz-panel-text-muted);
+  transition: transform 0.2s ease;
+}
+
+.brainz-debug-panel.collapsed .brainz-debug-expand {
+  transform: rotate(180deg);
+}
+
+/* Minimize Button (on toolbar) */
+.brainz-debug-minimize {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-left: 0.5rem;
+  background: transparent;
+  border: 1px solid var(--brainz-panel-border);
+  border-radius: 4px;
+  color: var(--brainz-panel-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.brainz-debug-minimize:hover {
+  background: var(--brainz-panel-surface-alt);
+  border-color: var(--brainz-panel-border);
+  color: var(--brainz-panel-text);
+}
+
+.brainz-debug-minimize:active {
+  transform: scale(0.95);
+}
+
+/* Restore Button (floating, visible when minimized) */
+.brainz-debug-restore {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: var(--brainz-panel-bg);
+  border: 2px solid var(--brainz-orange);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(255, 107, 53, 0.2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 999999;
+}
+
+html.dark .brainz-debug-restore {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(255, 107, 53, 0.25);
+}
+
+.brainz-debug-restore:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(255, 107, 53, 0.3);
+}
+
+html.dark .brainz-debug-restore:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(255, 107, 53, 0.35);
+}
+
+.brainz-debug-restore:active {
+  transform: scale(1.05);
+}
+
+.brainz-debug-restore img {
+  width: 20px;
+  height: 20px;
+}
+
+/* Show restore button when panel is minimized */
+.brainz-debug-panel.minimized .brainz-debug-restore {
+  display: flex;
+}
+
+/* Performance Score */
+.brainz-score {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.brainz-score-ring {
+  width: 100%;
+  height: 100%;
+}
+
+.brainz-score-bg {
+  stroke: var(--brainz-score-bg);
+}
+
+.brainz-score-progress {
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.brainz-score-value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--brainz-panel-text);
+}
+
+/* Score grades */
+.brainz-score.excellent .brainz-score-progress { stroke: var(--brainz-score-excellent); }
+.brainz-score.excellent .brainz-score-value { color: var(--brainz-score-excellent-text); }
+
+.brainz-score.good .brainz-score-progress { stroke: var(--brainz-score-good); }
+.brainz-score.good .brainz-score-value { color: var(--brainz-score-good-text); }
+
+.brainz-score.warning .brainz-score-progress { stroke: var(--brainz-score-warning); }
+.brainz-score.warning .brainz-score-value { color: var(--brainz-score-warning-text); }
+
+.brainz-score.poor .brainz-score-progress { stroke: var(--brainz-score-poor); }
+.brainz-score.poor .brainz-score-value { color: var(--brainz-score-poor-text); }
+
+/* Tabs */
+.brainz-debug-tabs {
+  display: flex;
+  background: var(--brainz-panel-surface-alt);
+  border-bottom: 1px solid var(--brainz-panel-border);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+
+.brainz-debug-tab {
+  padding: 0.625rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--brainz-panel-text-muted);
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+
+.brainz-debug-tab:hover {
+  color: var(--brainz-panel-text);
+  background: var(--brainz-panel-surface);
+}
+
+.brainz-debug-tab.active {
+  color: var(--brainz-orange);
+  background: var(--brainz-panel-bg);
+  box-shadow: inset 0 -2px 0 var(--brainz-orange);
+}
+
+.brainz-debug-tab .badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: var(--brainz-panel-border);
+  border-radius: 9px;
+  color: var(--brainz-panel-text-muted);
+}
+
+.brainz-debug-tab.active .badge {
+  background: var(--brainz-orange);
+  color: white;
+}
+
+/* Content */
+.brainz-debug-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+  background: var(--brainz-panel-bg);
+}
+
+/* Panes */
+.brainz-debug-pane {
+  display: none;
+}
+
+.brainz-debug-pane.active {
+  display: block;
+}
+
+/* Alert Box */
+.brainz-alert {
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-size: 0.8125rem;
+}
+
+.brainz-alert.error {
+  background: var(--brainz-error-light);
+  border-left: 3px solid var(--brainz-error);
+  color: var(--brainz-error);
+}
+
+.brainz-alert.warning {
+  background: var(--brainz-warning-light);
+  border-left: 3px solid var(--brainz-warning);
+  color: var(--brainz-warning);
+}
+
+.brainz-alert strong {
+  font-weight: 600;
+}
+
+/* N+1 Detection */
+.brainz-n-plus-one {
+  background: rgba(229, 62, 62, 0.05);
+  border-left: 3px solid var(--brainz-error);
+  padding: 0.5rem 0.75rem;
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  border-radius: 0 6px 6px 0;
+}
+
+.brainz-n-plus-one-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.brainz-n-plus-one code {
+  display: block;
+  margin-top: 0.375rem;
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  color: var(--brainz-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brainz-n-plus-one .source {
+  color: var(--brainz-text-light);
+  font-size: 0.75rem;
+  margin-left: 0.5rem;
+}
+
+/* Copy to AI Button */
+.brainz-copy-to-ai-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--brainz-font);
+  color: var(--brainz-orange);
+  background: white;
+  border: 1px solid var(--brainz-orange);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.brainz-copy-to-ai-btn:hover {
+  background: var(--brainz-orange);
+  color: white;
+}
+
+.brainz-copy-to-ai-btn:active {
+  transform: scale(0.95);
+}
+
+.brainz-copy-to-ai-btn svg {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   ISSUES TAB - Anthropic/Claude Design
+   Clean, minimal, warm, elegant
+   ============================================ */
+
+/* Issues Tab styling */
+.brainz-debug-tab.has-issues {
+  color: var(--brainz-error);
+}
+
+.brainz-debug-tab .badge.error {
+  background: var(--brainz-error);
+  color: white;
+}
+
+/* No Issues State */
+.brainz-no-issues {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.brainz-no-issues svg {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 1rem;
+  color: var(--brainz-success);
+}
+
+.brainz-no-issues p {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--brainz-panel-text);
+  margin: 0 0 0.25rem 0;
+}
+
+.brainz-no-issues span {
+  font-size: 0.8125rem;
+  color: var(--brainz-panel-text-muted);
+}
+
+/* Issues Container */
+.brainz-issues-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Issue Section */
+.brainz-issue-section {
+  border: 1px solid var(--brainz-panel-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Issue Header */
+.brainz-issue-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--brainz-panel-text);
+  background: var(--brainz-panel-surface);
+  border-bottom: 1px solid var(--brainz-panel-border);
+}
+
+.brainz-issue-header.error {
+  background: var(--brainz-issue-error-bg);
+  color: var(--brainz-issue-error-text);
+}
+
+.brainz-issue-header.warning {
+  background: var(--brainz-issue-warning-bg);
+  color: var(--brainz-issue-warning-text);
+}
+
+.brainz-issue-header svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+
+.brainz-issue-header .issue-count {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: inherit;
+  opacity: 0.7;
+}
+
+/* Issue Item */
+.brainz-issue-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.875rem;
+  background: var(--brainz-panel-bg);
+  border-bottom: 1px solid var(--brainz-panel-border-light);
+}
+
+.brainz-issue-item:last-child {
+  border-bottom: none;
+}
+
+/* Issue Content */
+.brainz-issue-content {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--brainz-panel-text-secondary);
+}
+
+.brainz-issue-content strong {
+  color: var(--brainz-panel-text);
+  font-weight: 600;
+}
+
+.brainz-issue-content code {
+  display: block;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  font-family: var(--brainz-mono);
+  font-size: 0.6875rem;
+  color: var(--brainz-panel-text-muted);
+  background: var(--brainz-panel-surface);
+  border-radius: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brainz-issue-source {
+  font-size: 0.6875rem;
+  color: var(--brainz-panel-text-placeholder);
+  margin-left: 0.25rem;
+}
+
+.brainz-issue-source::before {
+  content: "·";
+  margin-right: 0.25rem;
+}
+
+.brainz-issue-name {
+  color: var(--brainz-panel-text-muted);
+  font-weight: 400;
+}
+
+.brainz-issue-hint {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--brainz-panel-text-placeholder);
+}
+
+/* Issue Metric Badge */
+.brainz-issue-metric {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  border-radius: 4px;
+  margin-right: 0.375rem;
+}
+
+.brainz-issue-metric.critical {
+  background: var(--brainz-issue-metric-critical-bg);
+  color: var(--brainz-issue-metric-critical-text);
+}
+
+.brainz-issue-metric.slow {
+  background: var(--brainz-issue-metric-slow-bg);
+  color: var(--brainz-issue-metric-slow-text);
+}
+
+/* Copy to AI Button - Clean minimal style */
+.brainz-copy-to-ai-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--brainz-font);
+  color: var(--brainz-panel-text-muted);
+  background: var(--brainz-panel-bg);
+  border: 1px solid var(--brainz-panel-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.brainz-copy-to-ai-btn:hover {
+  color: var(--brainz-panel-text);
+  border-color: var(--brainz-panel-text-muted);
+  background: var(--brainz-panel-surface);
+}
+
+.brainz-copy-to-ai-btn:active {
+  transform: scale(0.97);
+}
+
+.brainz-copy-to-ai-btn.copied {
+  color: var(--brainz-success);
+  border-color: var(--brainz-success);
+}
+
+.brainz-copy-to-ai-btn svg {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* Toast notification */
+.brainz-toast {
+  position: fixed;
+  bottom: 60px;
+  right: 20px;
+  padding: 0.5rem 1rem;
+  background: var(--brainz-code-bg);
+  color: var(--brainz-code-text);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-family: var(--brainz-font);
+  z-index: 1000001;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.brainz-toast.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slow indicators */
+.brainz-query-row.slow {
+  background: var(--brainz-warning-light);
+}
+
+.brainz-slow {
+  color: var(--brainz-warning) !important;
+  font-weight: 600;
+}
+
+/* View Table */
+.brainz-view-table {
+  width: 100%;
+  font-size: 0.8125rem;
+  border-collapse: collapse;
+}
+
+.brainz-view-table th,
+.brainz-view-table td {
+  padding: 0.5rem;
+  text-align: left;
+  border-bottom: 1px solid var(--brainz-panel-border);
+}
+
+.brainz-view-table th {
+  color: var(--brainz-panel-text-muted);
+  font-weight: 500;
+  background: var(--brainz-panel-surface);
+}
+
+.brainz-view-table td {
+  color: var(--brainz-panel-text);
+}
+
+/* Log Entry */
+.brainz-log-entry {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.375rem 0;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid var(--brainz-panel-border);
+  color: var(--brainz-panel-text);
+}
+
+.brainz-log-entry:last-child {
+  border-bottom: none;
+}
+
+.brainz-log-entry .log-level {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  min-width: 48px;
+  text-align: center;
+}
+
+.brainz-log-entry.error .log-level {
+  background: var(--brainz-error-light);
+  color: var(--brainz-error);
+}
+
+.brainz-log-entry.warning .log-level {
+  background: var(--brainz-warning-light);
+  color: var(--brainz-warning);
+}
+
+.brainz-log-entry.info .log-level {
+  background: var(--brainz-info-light);
+  color: var(--brainz-info);
+}
+
+.brainz-log-entry.debug .log-level {
+  background: var(--brainz-panel-surface-alt);
+  color: var(--brainz-panel-text-muted);
+}
+
+.brainz-log-entry .log-time {
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  color: var(--brainz-panel-text-muted);
+  flex-shrink: 0;
+}
+
+.brainz-log-entry .log-message {
+  flex: 1;
+  word-break: break-word;
+}
+
+/* Code Block */
+.brainz-code-block {
+  background: var(--brainz-panel-surface-alt);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0.5rem 0 0 0;
+  color: var(--brainz-panel-text);
+}
+
+/* Timeline */
+/* ============================================
+   TIMELINE - Clean Anthropic Design
+   ============================================ */
+
+/* Header with total time */
+.timeline-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.timeline-total {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--brainz-panel-text);
+  letter-spacing: -0.02em;
+}
+
+.timeline-label {
+  font-size: 0.8125rem;
+  color: var(--brainz-panel-text-placeholder);
+}
+
+/* Timeline Bar */
+.timeline-bar {
+  display: flex;
+  height: 8px;
+  background: var(--brainz-timeline-bar-bg);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1.25rem;
+}
+
+.timeline-segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s ease;
+}
+
+.timeline-segment:hover {
+  opacity: 0.85;
+}
+
+.timeline-segment-label {
+  display: none;
+}
+
+.timeline-segment.db {
+  background: var(--brainz-timeline-db);
+}
+
+.timeline-segment.views {
+  background: var(--brainz-timeline-views);
+}
+
+.timeline-segment.other {
+  background: var(--brainz-timeline-other);
+}
+
+/* Stats Grid */
+.timeline-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.timeline-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--brainz-panel-surface);
+  border: 1px solid var(--brainz-panel-border-light);
+  border-radius: 8px;
+}
+
+.timeline-stat:hover {
+  background: var(--brainz-panel-surface-alt);
+}
+
+.timeline-stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.timeline-stat-icon.db {
+  background: var(--brainz-timeline-db-bg);
+  color: var(--brainz-timeline-db);
+}
+
+.timeline-stat-icon.views {
+  background: var(--brainz-timeline-views-bg);
+  color: var(--brainz-timeline-views);
+}
+
+.timeline-stat-icon.other {
+  background: var(--brainz-timeline-other-bg);
+  color: var(--brainz-timeline-other);
+}
+
+.timeline-stat-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.timeline-stat-value {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--brainz-panel-text);
+}
+
+.timeline-stat-label {
+  font-size: 0.75rem;
+  color: var(--brainz-panel-text-muted);
+  margin-top: 0.125rem;
+}
+
+.timeline-stat-pct {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--brainz-panel-text-placeholder);
+  padding: 0.25rem 0.5rem;
+  background: var(--brainz-panel-bg);
+  border-radius: 4px;
+}
+
+/* Cached Query Styling */
+.brainz-query-row.cached {
+  opacity: 0.6;
+}
+
+.brainz-query-row.cached td:first-child::after {
+  content: " (cached)";
+  font-size: 0.6875rem;
+  color: var(--brainz-panel-text-muted);
+}
+
+/* Keyboard Hint */
+.brainz-keyboard-hint {
+  font-size: 0.6875rem;
+  color: var(--brainz-panel-text-muted);
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  background: var(--brainz-panel-surface-alt);
+  border-radius: 3px;
+  font-family: var(--brainz-mono);
+}