@libredb/studio 0.9.7

package/src/components/VisualExplain.tsx

@@ -0,0 +1,820 @@
+"use client";
+
+import React, { useMemo, useState, useCallback, useRef } from 'react';
+import {
+  Zap,
+  Search,
+  ArrowDown,
+  Layers,
+  Database,
+  Clock,
+  LayoutGrid,
+  AlertTriangle,
+  CheckCircle2,
+  TrendingUp,
+  HardDrive,
+  Target,
+  ChevronRight,
+  Info,
+  FileJson,
+  Activity,
+  Sparkles,
+  Play,
+  Loader2,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type ExplainPlanNode = {
+  Plan?: ExplainPlanNode;
+  'Node Type'?: string;
+  'Actual Rows'?: number;
+  'Plan Rows'?: number;
+  'Actual Total Time'?: number;
+  'Total Cost'?: number;
+  'Shared Hit Blocks'?: number;
+  'Shared Read Blocks'?: number;
+  'Relation Name'?: string;
+  'Actual Loops'?: number;
+  Filter?: string;
+  'Index Name'?: string;
+  Plans?: ExplainPlanNode[];
+};
+
+export type ExplainPlanResult = {
+  Plan?: ExplainPlanNode;
+  'Execution Time'?: number;
+  'Planning Time'?: number;
+};
+
+interface VisualExplainProps {
+  plan: ExplainPlanResult[] | null | undefined;
+  query?: string;
+  schemaContext?: string;
+  databaseType?: string;
+  onLoadQuery?: (query: string) => void;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function formatNumber(num: number): string {
+  if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+  return num.toFixed(0);
+}
+
+
+function formatTime(ms: number): string {
+  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
+  if (ms >= 1) return `${ms.toFixed(2)}ms`;
+  return `${(ms * 1000).toFixed(0)}μs`;
+}
+
+// ============================================================================
+// Analysis Functions
+// ============================================================================
+
+interface PlanAnalysis {
+  totalTime: number;
+  planningTime: number;
+  executionTime: number;
+  totalRows: number;
+  totalCost: number;
+  bufferHits: number;
+  bufferReads: number;
+  nodeCount: number;
+  warnings: Warning[];
+  insights: Insight[];
+}
+
+interface Warning {
+  type: 'critical' | 'warning' | 'info';
+  title: string;
+  description: string;
+  node?: string;
+}
+
+interface Insight {
+  label: string;
+  value: string;
+  status: 'good' | 'warning' | 'critical';
+}
+
+function analyzePlan(plan: ExplainPlanResult[]): PlanAnalysis {
+  const warnings: Warning[] = [];
+  const insights: Insight[] = [];
+  let totalRows = 0;
+  let nodeCount = 0;
+  let bufferHits = 0;
+  let bufferReads = 0;
+
+  const rootPlan = plan?.[0]?.Plan;
+  const executionTime = plan?.[0]?.['Execution Time'] || rootPlan?.['Actual Total Time'] || 0;
+  const planningTime = plan?.[0]?.['Planning Time'] || 0;
+  const totalCost = rootPlan?.['Total Cost'] || 0;
+
+  // Recursive node analysis
+  function analyzeNode(node: ExplainPlanNode, depth: number = 0) {
+    if (!node) return;
+    nodeCount++;
+
+    const nodeType = node['Node Type'] || '';
+    const actualRows = node['Actual Rows'] || 0;
+    const planRows = node['Plan Rows'] || 0;
+    const actualTime = node['Actual Total Time'] || 0;
+
+    totalRows += actualRows;
+    bufferHits += node['Shared Hit Blocks'] || 0;
+    bufferReads += node['Shared Read Blocks'] || 0;
+
+    // Check for Sequential Scan on large tables
+    if (nodeType.includes('Seq Scan') && actualRows > 10000) {
+      warnings.push({
+        type: 'warning',
+        title: 'Sequential Scan',
+        description: `Full table scan on "${node['Relation Name'] || 'table'}" (${formatNumber(actualRows)} rows). Consider adding an index.`,
+        node: nodeType,
+      });
+    }
+
+    // Check for row estimate mismatch
+    if (planRows > 0 && actualRows > 0) {
+      const ratio = actualRows / planRows;
+      if (ratio > 10 || ratio < 0.1) {
+        warnings.push({
+          type: 'info',
+          title: 'Estimate Mismatch',
+          description: `Expected ${formatNumber(planRows)} rows, got ${formatNumber(actualRows)}. Statistics may be outdated.`,
+          node: nodeType,
+        });
+      }
+    }
+
+    // Check for expensive sorts
+    if (nodeType.includes('Sort') && actualTime > 100) {
+      warnings.push({
+        type: 'warning',
+        title: 'Expensive Sort',
+        description: `Sort operation took ${formatTime(actualTime)}. Consider adding an index for ordered access.`,
+        node: nodeType,
+      });
+    }
+
+    // Check for nested loops with high iterations
+    const actualLoops = node['Actual Loops'] ?? 1;
+    if (nodeType.includes('Nested Loop') && actualLoops > 1000) {
+      warnings.push({
+        type: 'critical',
+        title: 'High Loop Count',
+        description: `Nested loop executed ${formatNumber(actualLoops)} times. This could indicate an N+1 problem.`,
+        node: nodeType,
+      });
+    }
+
+    // Recurse into children
+    (node['Plans'] || []).forEach((child) => analyzeNode(child, depth + 1));
+  }
+
+  if (rootPlan) {
+    analyzeNode(rootPlan);
+  }
+
+  // Build insights
+  insights.push({
+    label: 'Cache Hit Rate',
+    value: bufferHits + bufferReads > 0
+      ? `${((bufferHits / (bufferHits + bufferReads)) * 100).toFixed(1)}%`
+      : 'N/A',
+    status: bufferHits / (bufferHits + bufferReads || 1) > 0.95 ? 'good' : 'warning',
+  });
+
+  insights.push({
+    label: 'Operations',
+    value: nodeCount.toString(),
+    status: nodeCount > 20 ? 'warning' : 'good',
+  });
+
+  insights.push({
+    label: 'Execution',
+    value: formatTime(executionTime),
+    status: executionTime > 1000 ? 'critical' : executionTime > 100 ? 'warning' : 'good',
+  });
+
+  return {
+    totalTime: executionTime + planningTime,
+    planningTime,
+    executionTime,
+    totalRows,
+    totalCost,
+    bufferHits,
+    bufferReads,
+    nodeCount,
+    warnings,
+    insights,
+  };
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+const NodeIcon = ({ type }: { type: string }) => {
+  if (type.includes('Seq Scan')) return <Search className="w-4 h-4 text-amber-400" />;
+  if (type.includes('Index Scan') || type.includes('Index Only')) return <Target className="w-4 h-4 text-emerald-400" />;
+  if (type.includes('Scan')) return <Search className="w-4 h-4 text-blue-400" />;
+  if (type.includes('Join')) return <Layers className="w-4 h-4 text-purple-400" />;
+  if (type.includes('Sort')) return <ArrowDown className="w-4 h-4 text-amber-400" />;
+  if (type.includes('Limit')) return <LayoutGrid className="w-4 h-4 text-zinc-400" />;
+  if (type.includes('Aggregate') || type.includes('Group')) return <Zap className="w-4 h-4 text-pink-400" />;
+  if (type.includes('Hash')) return <HardDrive className="w-4 h-4 text-cyan-400" />;
+  return <Database className="w-4 h-4 text-zinc-500" />;
+};
+
+const StatusBadge = ({ status }: { status: 'good' | 'warning' | 'critical' }) => {
+  return <div className={cn('w-2 h-2 rounded-full', status === 'good' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-red-500')} />;
+};
+
+// Compact Plan Node
+const PlanNode = ({ node, depth = 0, maxTime }: { node: ExplainPlanNode; depth?: number; maxTime: number }) => {
+  const [expanded, setExpanded] = useState(depth < 2);
+  const nodeType = node['Node Type'] || 'Unknown';
+  const actualTime = node['Actual Total Time'] || 0;
+  const actualRows = node['Actual Rows'] || 0;
+  const children = node['Plans'] || [];
+  const isIndexScan = nodeType.includes('Index');
+  const isSeqScan = nodeType.includes('Seq Scan');
+
+  const timePercent = maxTime > 0 ? (actualTime / maxTime) * 100 : 0;
+
+  return (
+    <div className="relative">
+      {/* Node */}
+      <div
+        className={cn(
+          "group flex items-center gap-2 py-1.5 px-2 rounded-lg transition-all cursor-pointer hover:bg-white/5",
+          depth === 0 && "bg-white/[0.02]"
+        )}
+        onClick={() => setExpanded(!expanded)}
+        style={{ marginLeft: depth * 20 }}
+      >
+        {/* Expand icon */}
+        {children.length > 0 && (
+          <ChevronRight className={cn("w-3 h-3 text-zinc-600 transition-transform", expanded && "rotate-90")} />
+        )}
+        {children.length === 0 && <div className="w-3" />}
+
+        {/* Icon */}
+        <div className={cn(
+          "p-1 rounded",
+          isSeqScan ? "bg-amber-500/10" : isIndexScan ? "bg-emerald-500/10" : "bg-white/5"
+        )}>
+          <NodeIcon type={nodeType} />
+        </div>
+
+        {/* Type & Table */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[11px] font-medium text-zinc-200 truncate">{nodeType}</span>
+            {node['Relation Name'] && (
+              <span className="text-[10px] text-zinc-500 font-mono truncate">{node['Relation Name']}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center gap-4 text-[10px] font-mono">
+          <span className="text-zinc-500 w-16 text-right">{formatNumber(actualRows)} rows</span>
+          <span className={cn(
+            "w-16 text-right",
+            timePercent > 50 ? "text-red-400" : timePercent > 20 ? "text-amber-400" : "text-zinc-400"
+          )}>
+            {formatTime(actualTime)}
+          </span>
+          {/* Time bar */}
+          <div className="w-20 h-1.5 bg-white/5 rounded-full overflow-hidden">
+            <div
+              className={cn(
+                "h-full rounded-full transition-all",
+                timePercent > 50 ? "bg-red-500" : timePercent > 20 ? "bg-amber-500" : "bg-blue-500"
+              )}
+              style={{ width: `${Math.min(timePercent, 100)}%` }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Details on expand */}
+      {expanded && (
+        <div className="ml-8 pl-4 border-l border-white/5" style={{ marginLeft: depth * 20 + 32 }}>
+          {/* Filter info */}
+          {node['Filter'] && (
+            <div className="flex items-start gap-2 py-1 text-[10px]">
+              <span className="text-amber-500/70 font-medium shrink-0">Filter:</span>
+              <span className="text-zinc-500 font-mono break-all">{node['Filter']}</span>
+            </div>
+          )}
+          {/* Index info */}
+          {node['Index Name'] && (
+            <div className="flex items-center gap-2 py-1 text-[10px]">
+              <span className="text-emerald-500/70 font-medium">Index:</span>
+              <span className="text-emerald-400 font-mono">{node['Index Name']}</span>
+            </div>
+          )}
+          {/* Buffer stats */}
+          {((node['Shared Hit Blocks'] ?? 0) > 0 || (node['Shared Read Blocks'] ?? 0) > 0) && (
+            <div className="flex items-center gap-4 py-1 text-[10px] text-zinc-600">
+              {(node['Shared Hit Blocks'] ?? 0) > 0 && <span>Cache hits: {node['Shared Hit Blocks']}</span>}
+              {(node['Shared Read Blocks'] ?? 0) > 0 && <span>Disk reads: {node['Shared Read Blocks']}</span>}
+            </div>
+          )}
+
+          {/* Children */}
+          {children.map((child, idx) => (
+            <PlanNode key={idx} node={child} depth={depth + 1} maxTime={maxTime} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// AI Explain Tab Component
+// ============================================================================
+
+function AIExplainTab({
+  plan,
+  query,
+  schemaContext,
+  databaseType,
+  onLoadQuery,
+}: {
+  plan: ExplainPlanResult[];
+  query?: string;
+  schemaContext?: string;
+  databaseType?: string;
+  onLoadQuery?: (query: string) => void;
+}) {
+  const [aiResponse, setAiResponse] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasRun, setHasRun] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const analyzeWithAI = useCallback(async () => {
+    if (!query && !plan) return;
+
+    setIsLoading(true);
+    setAiResponse('');
+    setError(null);
+    setHasRun(true);
+
+    // Abort previous request if any
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    try {
+      const response = await fetch('/api/ai/explain', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: query || 'Unknown query',
+          explainPlan: plan,
+          schemaContext: schemaContext || '',
+          databaseType: databaseType || 'postgres',
+        }),
+        signal: abortController.signal,
+      });
+
+      if (!response.ok) {
+        const errData = await response.json().catch(() => ({}));
+        throw new Error(errData.error || 'AI analysis failed');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error('No response body');
+
+      const decoder = new TextDecoder();
+      let accumulated = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        accumulated += chunk;
+        setAiResponse(accumulated);
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return;
+      setError(err instanceof Error ? err.message : 'AI analysis failed');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [query, plan, schemaContext, databaseType]);
+
+
+  // Simple markdown renderer for the AI response
+  const renderMarkdown = (text: string) => {
+    const lines = text.split('\n');
+    const elements: React.ReactNode[] = [];
+    let inCodeBlock = false;
+    let codeBlockLang = '';
+    let codeBlockContent = '';
+
+    lines.forEach((line, idx) => {
+      if (line.startsWith('```')) {
+        if (inCodeBlock) {
+          // End code block
+          const content = codeBlockContent;
+          const isSql = codeBlockLang === 'sql';
+          elements.push(
+            <div key={`code-${idx}`} className="my-3 relative group/code">
+              <pre className={cn(
+                "text-[11px] font-mono p-3 rounded-lg overflow-x-auto border",
+                isSql ? "bg-blue-500/5 border-blue-500/10 text-blue-300" : "bg-white/[0.02] border-white/5 text-zinc-400"
+              )}>
+                {content}
+              </pre>
+              {isSql && onLoadQuery && (
+                <button
+                  onClick={() => onLoadQuery(content)}
+                  className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold flex items-center gap-1"
+                >
+                  <Play className="w-3 h-3" /> Try This
+                </button>
+              )}
+            </div>
+          );
+          codeBlockContent = '';
+          inCodeBlock = false;
+        } else {
+          // Start code block
+          inCodeBlock = true;
+          codeBlockLang = line.slice(3).trim();
+          codeBlockContent = '';
+        }
+        return;
+      }
+
+      if (inCodeBlock) {
+        codeBlockContent += (codeBlockContent ? '\n' : '') + line;
+        return;
+      }
+
+      // Headers
+      if (line.startsWith('## ')) {
+        elements.push(
+          <h2 key={idx} className="text-[13px] font-bold text-zinc-200 mt-4 mb-2 flex items-center gap-2">
+            {line.slice(3)}
+          </h2>
+        );
+      } else if (line.startsWith('### ')) {
+        elements.push(
+          <h3 key={idx} className="text-[12px] font-semibold text-zinc-300 mt-3 mb-1">
+            {line.slice(4)}
+          </h3>
+        );
+      } else if (line.startsWith('- ')) {
+        elements.push(
+          <div key={idx} className="flex items-start gap-2 text-[11px] text-zinc-400 leading-relaxed ml-2 my-0.5">
+            <span className="text-zinc-600 mt-1 shrink-0">•</span>
+            <span>{renderInlineFormatting(line.slice(2))}</span>
+          </div>
+        );
+      } else if (/^\d+\.\s/.test(line)) {
+        const num = line.match(/^(\d+)\./)?.[1];
+        elements.push(
+          <div key={idx} className="flex items-start gap-2 text-[11px] text-zinc-400 leading-relaxed ml-2 my-0.5">
+            <span className="text-blue-400 font-bold mt-0 shrink-0 w-4">{num}.</span>
+            <span>{renderInlineFormatting(line.replace(/^\d+\.\s*/, ''))}</span>
+          </div>
+        );
+      } else if (line.trim() === '') {
+        elements.push(<div key={idx} className="h-1" />);
+      } else {
+        elements.push(
+          <p key={idx} className="text-[11px] text-zinc-400 leading-relaxed my-0.5">
+            {renderInlineFormatting(line)}
+          </p>
+        );
+      }
+    });
+
+    return elements;
+  };
+
+  const renderInlineFormatting = (text: string): React.ReactNode => {
+    // Bold **text**
+    const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g);
+    return parts.map((part, i) => {
+      if (part.startsWith('**') && part.endsWith('**')) {
+        return <strong key={i} className="text-zinc-200 font-medium">{part.slice(2, -2)}</strong>;
+      }
+      if (part.startsWith('`') && part.endsWith('`')) {
+        return <code key={i} className="text-blue-400 bg-blue-500/10 px-1 rounded text-[10px] font-mono">{part.slice(1, -1)}</code>;
+      }
+      return part;
+    });
+  };
+
+  // Not run yet state
+  if (!hasRun) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center p-8 text-center">
+        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-blue-500/10 flex items-center justify-center mb-4">
+          <Sparkles className="w-7 h-7 text-purple-400" />
+        </div>
+        <h3 className="text-sm font-semibold text-zinc-200 mb-1">AI Query Analysis</h3>
+        <p className="text-[11px] text-zinc-500 max-w-[280px] leading-relaxed mb-4">
+          Get a plain-language explanation of your query&apos;s execution plan with concrete optimization suggestions.
+        </p>
+        <button
+          onClick={analyzeWithAI}
+          disabled={!query}
+          className={cn(
+            "flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all",
+            query
+              ? "bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-900/20"
+              : "bg-white/5 text-zinc-600 cursor-not-allowed"
+          )}
+        >
+          <Sparkles className="w-3.5 h-3.5" />
+          Analyze with AI
+        </button>
+        {!query && (
+          <p className="text-[10px] text-zinc-600 mt-2">Run a query first to enable AI analysis.</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Re-analyze button */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-3.5 h-3.5 text-purple-400" />
+          <span className="text-[10px] font-bold text-purple-400 uppercase tracking-wider">AI Analysis</span>
+        </div>
+        <button
+          onClick={analyzeWithAI}
+          disabled={isLoading}
+          className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
+        >
+          {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+          {isLoading ? 'Analyzing...' : 'Re-analyze'}
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-4">
+        {error && (
+          <div className="flex items-center gap-2 p-3 rounded-lg bg-red-500/5 border border-red-500/10 text-red-400 text-xs mb-4">
+            <AlertTriangle className="w-4 h-4 shrink-0" />
+            {error}
+          </div>
+        )}
+
+        {aiResponse && (
+          <div className="space-y-0">
+            {renderMarkdown(aiResponse)}
+          </div>
+        )}
+
+        {isLoading && !aiResponse && (
+          <div className="flex items-center gap-3 text-zinc-500 text-sm">
+            <Loader2 className="w-4 h-4 animate-spin text-purple-400" />
+            <span>Analyzing execution plan...</span>
+          </div>
+        )}
+
+        {isLoading && aiResponse && (
+          <div className="flex items-center gap-2 mt-2 text-zinc-600 text-[10px]">
+            <Loader2 className="w-3 h-3 animate-spin" />
+            <span>Still generating...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function VisualExplain({ plan, query, schemaContext, databaseType, onLoadQuery }: VisualExplainProps) {
+  const [activeTab, setActiveTab] = useState<'insights' | 'tree' | 'raw' | 'ai'>('insights');
+
+  const analysis = useMemo(() => {
+    if (!plan || !Array.isArray(plan) || plan.length === 0) return null;
+    return analyzePlan(plan);
+  }, [plan]);
+
+  // Empty state
+  if (!plan || !Array.isArray(plan) || plan.length === 0) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center text-zinc-500 bg-[#080808] p-12 text-center">
+        <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-4">
+          <Activity className="w-6 h-6 text-zinc-600" />
+        </div>
+        <h3 className="text-sm font-medium text-zinc-300 mb-1">No execution plan</h3>
+        <p className="text-xs text-zinc-600 max-w-[240px]">
+          Run a SELECT query to see its execution plan and performance insights.
+        </p>
+      </div>
+    );
+  }
+
+  const rootPlan = plan[0]?.Plan;
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      {/* Header Stats */}
+      <div className="px-4 py-3 border-b border-white/5 bg-[#0a0a0a]">
+        <div className="flex items-center justify-between">
+          {/* Quick stats */}
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+              <Clock className="w-3.5 h-3.5 text-blue-400" />
+              <span className="text-[13px] font-medium text-zinc-200">
+                {formatTime(analysis?.executionTime || 0)}
+              </span>
+              <span className="text-[10px] text-zinc-600">execution</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <TrendingUp className="w-3.5 h-3.5 text-zinc-500" />
+              <span className="text-[13px] font-medium text-zinc-400">
+                {formatNumber(analysis?.totalRows || 0)}
+              </span>
+              <span className="text-[10px] text-zinc-600">rows</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <HardDrive className="w-3.5 h-3.5 text-zinc-500" />
+              <span className="text-[13px] font-medium text-zinc-400">
+                {formatNumber(analysis?.totalCost || 0)}
+              </span>
+              <span className="text-[10px] text-zinc-600">cost</span>
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex items-center gap-1 bg-white/5 rounded-lg p-0.5">
+            {(['insights', 'ai', 'tree', 'raw'] as const).map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={cn(
+                  "px-3 py-1 text-[10px] font-medium rounded-md transition-all uppercase tracking-wide",
+                  activeTab === tab
+                    ? tab === 'ai' ? "bg-purple-500/20 text-purple-300" : "bg-white/10 text-zinc-200"
+                    : "text-zinc-500 hover:text-zinc-300"
+                )}
+              >
+                {tab === 'insights' && <Zap className="w-3 h-3 inline mr-1" />}
+                {tab === 'ai' && <Sparkles className="w-3 h-3 inline mr-1" />}
+                {tab === 'tree' && <Layers className="w-3 h-3 inline mr-1" />}
+                {tab === 'raw' && <FileJson className="w-3 h-3 inline mr-1" />}
+                {tab === 'ai' ? 'AI Explain' : tab}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'ai' && (
+          <AIExplainTab
+            plan={plan}
+            query={query}
+            schemaContext={schemaContext}
+            databaseType={databaseType}
+            onLoadQuery={onLoadQuery}
+          />
+        )}
+
+        {activeTab === 'insights' && (
+          <div className="p-4 space-y-4">
+            {/* Warnings */}
+            {analysis && analysis.warnings.length > 0 && (
+              <div className="space-y-2">
+                <h3 className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">
+                  Performance Issues
+                </h3>
+                {analysis.warnings.map((warning, idx) => (
+                  <div
+                    key={idx}
+                    className={cn(
+                      "flex items-start gap-3 p-3 rounded-lg border",
+                      warning.type === 'critical'
+                        ? "bg-red-500/5 border-red-500/10"
+                        : warning.type === 'warning'
+                        ? "bg-amber-500/5 border-amber-500/10"
+                        : "bg-blue-500/5 border-blue-500/10"
+                    )}
+                  >
+                    <div className={cn(
+                      "p-1 rounded",
+                      warning.type === 'critical'
+                        ? "bg-red-500/10"
+                        : warning.type === 'warning'
+                        ? "bg-amber-500/10"
+                        : "bg-blue-500/10"
+                    )}>
+                      {warning.type === 'critical' ? (
+                        <AlertTriangle className="w-3.5 h-3.5 text-red-400" />
+                      ) : warning.type === 'warning' ? (
+                        <AlertTriangle className="w-3.5 h-3.5 text-amber-400" />
+                      ) : (
+                        <Info className="w-3.5 h-3.5 text-blue-400" />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <h4 className={cn(
+                        "text-[11px] font-medium",
+                        warning.type === 'critical'
+                          ? "text-red-300"
+                          : warning.type === 'warning'
+                          ? "text-amber-300"
+                          : "text-blue-300"
+                      )}>
+                        {warning.title}
+                      </h4>
+                      <p className="text-[10px] text-zinc-500 mt-0.5 leading-relaxed">
+                        {warning.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* No warnings */}
+            {analysis && analysis.warnings.length === 0 && (
+              <div className="flex items-center gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10">
+                <div className="p-1 rounded bg-emerald-500/10">
+                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
+                </div>
+                <div>
+                  <h4 className="text-[11px] font-medium text-emerald-300">Query looks good</h4>
+                  <p className="text-[10px] text-zinc-500">No obvious performance issues detected.</p>
+                </div>
+              </div>
+            )}
+
+            {/* Metrics Grid */}
+            <div className="grid grid-cols-3 gap-2">
+              {analysis?.insights.map((insight, idx) => (
+                <div key={idx} className="p-3 rounded-lg bg-white/[0.02] border border-white/5">
+                  <div className="flex items-center gap-2 mb-1">
+                    <StatusBadge status={insight.status} />
+                    <span className="text-[9px] text-zinc-500 uppercase tracking-wider font-medium">
+                      {insight.label}
+                    </span>
+                  </div>
+                  <span className="text-lg font-medium text-zinc-200">{insight.value}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* Plan tree preview */}
+            <div>
+              <h3 className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">
+                Execution Plan
+              </h3>
+              <div className="rounded-lg border border-white/5 bg-white/[0.01] p-2">
+                {rootPlan && analysis && (
+                  <PlanNode node={rootPlan} maxTime={analysis.executionTime || 1} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'tree' && (
+          <div className="p-4">
+            <div className="rounded-lg border border-white/5 bg-white/[0.01] p-2">
+              {rootPlan && analysis && (
+                <PlanNode node={rootPlan} maxTime={analysis.executionTime || 1} />
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'raw' && (
+          <div className="p-4">
+            <pre className="text-[10px] font-mono text-zinc-400 bg-white/[0.02] rounded-lg p-4 overflow-auto border border-white/5">
+              {JSON.stringify(plan, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}