brainzlab 0.1.1 → 0.1.2

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

@@ -0,0 +1,1106 @@
+/* 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);
+}
+
+/* ============================================
+   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: white;
+  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-text-muted);
+  margin: 0 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--brainz-border);
+}
+
+.brainz-section h3 {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--brainz-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-border);
+}
+
+.brainz-info-table th {
+  width: 140px;
+  color: var(--brainz-text-muted);
+  font-weight: 500;
+}
+
+.brainz-info-table td {
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  color: var(--brainz-text);
+  word-break: break-all;
+}
+
+/* Parameters */
+.brainz-params {
+  background: var(--brainz-cream-200);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--brainz-mono);
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+/* 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-border);
+}
+
+.brainz-query-table th {
+  color: var(--brainz-text-muted);
+  font-weight: 500;
+  background: var(--brainz-cream-100);
+}
+
+.brainz-query-duration {
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.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-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: white;
+  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;
+}
+
+.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;
+}
+
+/* Toolbar */
+.brainz-debug-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--brainz-cream-100);
+  border-bottom: 1px solid var(--brainz-border);
+  gap: 0.75rem;
+  cursor: pointer;
+  min-height: 44px;
+  flex-shrink: 0;
+}
+
+.brainz-debug-toolbar:hover {
+  background: var(--brainz-cream-200);
+}
+
+.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: white;
+  border: 1px solid var(--brainz-border);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.brainz-debug-stat strong {
+  font-weight: 600;
+  color: var(--brainz-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-text-muted);
+  transition: transform 0.2s ease;
+}
+
+.brainz-debug-panel.collapsed .brainz-debug-expand {
+  transform: rotate(180deg);
+}
+
+/* Performance Score */
+.brainz-score {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.brainz-score-ring {
+  width: 100%;
+  height: 100%;
+}
+
+.brainz-score-bg {
+  stroke: #E5E5E5;
+}
+
+.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: #1A1A1A;
+}
+
+/* Score grades */
+.brainz-score.excellent .brainz-score-progress { stroke: #22C55E; }
+.brainz-score.excellent .brainz-score-value { color: #16A34A; }
+
+.brainz-score.good .brainz-score-progress { stroke: #3B82F6; }
+.brainz-score.good .brainz-score-value { color: #2563EB; }
+
+.brainz-score.warning .brainz-score-progress { stroke: #F59E0B; }
+.brainz-score.warning .brainz-score-value { color: #D97706; }
+
+.brainz-score.poor .brainz-score-progress { stroke: #EF4444; }
+.brainz-score.poor .brainz-score-value { color: #DC2626; }
+
+/* Tabs */
+.brainz-debug-tabs {
+  display: flex;
+  background: var(--brainz-cream-200);
+  border-bottom: 1px solid var(--brainz-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-text-muted);
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+
+.brainz-debug-tab:hover {
+  color: var(--brainz-text);
+  background: var(--brainz-cream-100);
+}
+
+.brainz-debug-tab.active {
+  color: var(--brainz-orange);
+  background: white;
+  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-border);
+  border-radius: 9px;
+  color: var(--brainz-text-muted);
+}
+
+.brainz-debug-tab.active .badge {
+  background: var(--brainz-orange);
+  color: white;
+}
+
+/* Content */
+.brainz-debug-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+  background: white;
+}
+
+/* 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: #C35A3C;
+}
+
+.brainz-debug-tab .badge.error {
+  background: #C35A3C;
+  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: #16A34A;
+}
+
+.brainz-no-issues p {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #1A1A1A;
+  margin: 0 0 0.25rem 0;
+}
+
+.brainz-no-issues span {
+  font-size: 0.8125rem;
+  color: #6B6B6B;
+}
+
+/* Issues Container */
+.brainz-issues-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Issue Section */
+.brainz-issue-section {
+  border: 1px solid #E5E5E5;
+  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: #1A1A1A;
+  background: #FAFAFA;
+  border-bottom: 1px solid #E5E5E5;
+}
+
+.brainz-issue-header.error {
+  background: #FEF2F2;
+  color: #B91C1C;
+}
+
+.brainz-issue-header.warning {
+  background: #FFFBEB;
+  color: #B45309;
+}
+
+.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: white;
+  border-bottom: 1px solid #F3F3F3;
+}
+
+.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: #374151;
+}
+
+.brainz-issue-content strong {
+  color: #1A1A1A;
+  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: #6B7280;
+  background: #F9FAFB;
+  border-radius: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brainz-issue-source {
+  font-size: 0.6875rem;
+  color: #9CA3AF;
+  margin-left: 0.25rem;
+}
+
+.brainz-issue-source::before {
+  content: "·";
+  margin-right: 0.25rem;
+}
+
+.brainz-issue-name {
+  color: #6B7280;
+  font-weight: 400;
+}
+
+.brainz-issue-hint {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: #9CA3AF;
+}
+
+/* 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: #FEE2E2;
+  color: #B91C1C;
+}
+
+.brainz-issue-metric.slow {
+  background: #FEF3C7;
+  color: #B45309;
+}
+
+/* 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-text-muted);
+  background: white;
+  border: 1px solid var(--brainz-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.brainz-copy-to-ai-btn:hover {
+  color: var(--brainz-text);
+  border-color: var(--brainz-text-muted);
+  background: var(--brainz-cream-100);
+}
+
+.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: white;
+  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: rgba(214, 158, 46, 0.08);
+}
+
+.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-border);
+}
+
+.brainz-view-table th {
+  color: var(--brainz-text-muted);
+  font-weight: 500;
+  background: var(--brainz-cream-100);
+}
+
+/* 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-border);
+}
+
+.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-cream-200);
+  color: var(--brainz-text-muted);
+}
+
+.brainz-log-entry .log-time {
+  font-family: var(--brainz-mono);
+  font-size: 0.75rem;
+  color: var(--brainz-text-light);
+  flex-shrink: 0;
+}
+
+.brainz-log-entry .log-message {
+  flex: 1;
+  word-break: break-word;
+}
+
+/* Code Block */
+.brainz-code-block {
+  background: var(--brainz-cream-200);
+  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;
+}
+
+/* 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: #1A1A1A;
+  letter-spacing: -0.02em;
+}
+
+.timeline-label {
+  font-size: 0.8125rem;
+  color: #9CA3AF;
+}
+
+/* Timeline Bar */
+.timeline-bar {
+  display: flex;
+  height: 8px;
+  background: #F3F4F6;
+  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: #3B82F6;
+}
+
+.timeline-segment.views {
+  background: #10B981;
+}
+
+.timeline-segment.other {
+  background: #9CA3AF;
+}
+
+/* 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: #FAFAFA;
+  border: 1px solid #F3F4F6;
+  border-radius: 8px;
+}
+
+.timeline-stat:hover {
+  background: #F5F5F5;
+}
+
+.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: #EFF6FF;
+  color: #3B82F6;
+}
+
+.timeline-stat-icon.views {
+  background: #ECFDF5;
+  color: #10B981;
+}
+
+.timeline-stat-icon.other {
+  background: #F3F4F6;
+  color: #6B7280;
+}
+
+.timeline-stat-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.timeline-stat-value {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #1A1A1A;
+}
+
+.timeline-stat-label {
+  font-size: 0.75rem;
+  color: #6B7280;
+  margin-top: 0.125rem;
+}
+
+.timeline-stat-pct {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #9CA3AF;
+  padding: 0.25rem 0.5rem;
+  background: white;
+  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-text-light);
+}
+
+/* Keyboard Hint */
+.brainz-keyboard-hint {
+  font-size: 0.6875rem;
+  color: var(--brainz-text-light);
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  background: var(--brainz-cream-200);
+  border-radius: 3px;
+  font-family: var(--brainz-mono);
+}