feature: Explain tab in SQL editor that shows output of explain analyze (#41569)

* wip: explain tab in results editor

* updated to add sql explain

* updated to default back to results

* updated explain function

* updated case with multiple statements

* updated to reset explain query results

* added tests for semi colon comments

* feature: add explain w/ AI on pretty-explain tab (#41588)

* wip: added explain with AI

* wip: updated header with new buttons

* updated prompt

* remove any types

* removed unused flag

* updated header

* formatted code

apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx

@@ -1,5 +1,13 @@
-import { Activity, ArrowUp, Clock, Database, GitMerge, Hash, Zap } from 'lucide-react'
-import { Badge } from 'ui'
+import { ArrowUp, Eye, Code } from 'lucide-react'
+
+import { useFlag } from 'common'
+import { AiIconAnimation, Button } from 'ui'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import { buildExplainPrompt } from './ExplainVisualizer.ai'
+import type { QueryPlanRow } from './ExplainVisualizer.types'
 
 export interface ExplainSummary {
   totalTime: number
@@ -11,41 +19,83 @@ export interface ExplainHeaderProps {
   mode: 'visual' | 'raw'
   onToggleMode: () => void
   summary?: ExplainSummary
+  id?: string
+  rows?: readonly QueryPlanRow[]
 }
 
-export function ExplainHeader({ mode, onToggleMode, summary }: ExplainHeaderProps) {
+export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: ExplainHeaderProps) {
   const isVisual = mode === 'visual'
 
+  const snapV2 = useSqlEditorV2StateSnapshot()
+  const { openSidebar } = useSidebarManagerSnapshot()
+  const aiSnap = useAiAssistantStateSnapshot()
+
+  const handleExplainWithAI = () => {
+    if (!id) return
+    const snippet = snapV2.snippets[id]?.snippet
+    if (!snippet?.content?.sql) return
+
+    const { query, prompt } = buildExplainPrompt({
+      sql: snippet.content.sql,
+      explainPlanRows: (rows as QueryPlanRow[]) ?? [],
+    })
+
+    openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+    aiSnap.newChat({
+      sqlSnippets: [
+        {
+          label: 'Query',
+          content: query,
+        },
+      ],
+      initialMessage: prompt,
+    })
+  }
+
   const hasSummaryStats =
     isVisual && summary && (summary.totalTime > 0 || (summary.hasSeqScan && !summary.hasIndexScan))
 
   return (
     <div className="bg-surface-100 border-b px-4 py-3 flex flex-col gap-3 text-xs">
       {/* Title row */}
-      <div className="flex items-center gap-2 text-sm">
-        <h3 className="font-medium text-foreground">Query Execution Plan</h3>
-        {/* Summary stats - only show in visual mode when we have the data */}
-        {hasSummaryStats && (
-          <div className="flex items-center gap-4 flex-wrap">
-            {summary.totalTime > 0 && (
-              <div className="flex items-center gap-1.5">
-                <span className="text-foreground-light">/</span>
-                <span className="text-foreground-light">Total time</span>
-                <span className="font-mono font-medium text-foreground">
-                  {summary.totalTime.toFixed(2)}ms
-                </span>
-              </div>
-            )}
-          </div>
-        )}
-        <button
-          type="button"
-          onClick={onToggleMode}
-          className="font-mono text-xs text-foreground-lighter hover:text-foreground transition-colors"
-          aria-label={isVisual ? 'Switch to raw explain output' : 'Switch to visual explain output'}
-        >
-          {isVisual ? '[VISUAL]' : '[RAW]'}
-        </button>
+      <div className="flex items-center justify-between text-sm">
+        <div className="flex items-center gap-2">
+          <h3 className="font-medium text-foreground">Query Execution Plan</h3>
+          {/* Summary stats - only show in visual mode when we have the data */}
+          {hasSummaryStats && (
+            <div className="flex items-center gap-4 flex-wrap">
+              {summary.totalTime > 0 && (
+                <div className="flex items-center gap-1.5">
+                  <span className="text-foreground-light">/</span>
+                  <span className="text-foreground-light">Total time</span>
+                  <span className="font-mono font-medium text-foreground">
+                    {summary.totalTime.toFixed(2)}ms
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {id && rows && (
+            <Button
+              type="default"
+              size="tiny"
+              icon={<AiIconAnimation size={14} />}
+              onClick={handleExplainWithAI}
+            >
+              Explain with AI
+            </Button>
+          )}
+          <Button
+            type="default"
+            size="tiny"
+            icon={isVisual ? <Code size={14} /> : <Eye size={14} />}
+            onClick={onToggleMode}
+          >
+            {isVisual ? 'Raw' : 'Visual'}
+          </Button>
+        </div>
       </div>
 
       {/* How to read */}