feat: add AI Explain Query and Fix Error via Ollama

Extract shared call_ollama_chat helper from generate_sql to reuse
settings loading and Ollama API call logic. Add two new AI commands:
- explain_sql: explains what a SQL query does in plain language
- fix_sql_error: suggests corrected SQL based on the error and schema

UI additions: "AI Explain" toolbar button, "Explain" and "Fix with AI"
action buttons on query errors, inline explanation display in results.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/workspace/WorkspacePanel.tsx

@@ -13,7 +13,7 @@ import { useCompletionSchema } from "@/hooks/use-completion-schema";
 import { useConnections } from "@/hooks/use-connections";
 import { useAppStore } from "@/stores/app-store";
 import { Button } from "@/components/ui/button";
-import { Play, Loader2, Lock, BarChart3, Download, AlignLeft, Bookmark, Table2, Braces, Sparkles } from "lucide-react";
+import { Play, Loader2, Lock, BarChart3, Download, AlignLeft, Bookmark, Table2, Braces, Sparkles, BrainCircuit } from "lucide-react";
 import { format as formatSql } from "sql-formatter";
 import { SaveQueryDialog } from "@/components/saved-queries/SaveQueryDialog";
 import {
@@ -26,6 +26,7 @@ import { exportCsv, exportJson } from "@/lib/tauri";
 import { save } from "@tauri-apps/plugin-dialog";
 import { toast } from "sonner";
 import { AiBar } from "@/components/ai/AiBar";
+import { useExplainSql, useFixSqlError } from "@/hooks/use-ai";
 import type { QueryResult, ExplainResult } from "@/types";
 
 interface Props {
@@ -53,8 +54,11 @@ export function WorkspacePanel({
   const [resultViewMode, setResultViewMode] = useState<"table" | "json">("table");
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [aiBarOpen, setAiBarOpen] = useState(false);
+  const [aiExplanation, setAiExplanation] = useState<string | null>(null);
 
   const queryMutation = useQueryExecution();
+  const explainMutation = useExplainSql();
+  const fixMutation = useFixSqlError();
   const addHistoryMutation = useAddHistory();
   const { data: connections } = useConnections();
   const { data: completionSchema } = useCompletionSchema(connectionId);
@@ -98,6 +102,7 @@ export function WorkspacePanel({
     if (!sqlValue.trim() || !connectionId) return;
     setError(null);
     setExplainData(null);
+    setAiExplanation(null);
     setResultView("results");
     queryMutation.mutate(
       { connectionId, sql: sqlValue },
@@ -191,6 +196,60 @@ export function WorkspacePanel({
     [result]
   );
 
+  const isAiLoading = explainMutation.isPending || fixMutation.isPending;
+
+  const handleAiExplain = useCallback(() => {
+    if (!sqlValue.trim() || !connectionId) return;
+    setAiExplanation(null);
+    setResultView("results");
+    explainMutation.mutate(
+      { connectionId, sql: sqlValue },
+      {
+        onSuccess: (explanation) => {
+          setAiExplanation(explanation);
+        },
+        onError: (err) => {
+          toast.error("AI Explain failed", { description: String(err) });
+        },
+      }
+    );
+  }, [connectionId, sqlValue, explainMutation]);
+
+  const handleExplainError = useCallback(() => {
+    if (!sqlValue.trim() || !connectionId || !error) return;
+    setAiExplanation(null);
+    explainMutation.mutate(
+      { connectionId, sql: `${sqlValue}\n\n-- Error: ${error}` },
+      {
+        onSuccess: (explanation) => {
+          setAiExplanation(explanation);
+        },
+        onError: (err) => {
+          toast.error("AI Explain failed", { description: String(err) });
+        },
+      }
+    );
+  }, [connectionId, sqlValue, error, explainMutation]);
+
+  const handleFixError = useCallback(() => {
+    if (!sqlValue.trim() || !connectionId || !error) return;
+    fixMutation.mutate(
+      { connectionId, sql: sqlValue, errorMessage: error },
+      {
+        onSuccess: (fixedSql) => {
+          setSqlValue(fixedSql);
+          onSqlChange?.(fixedSql);
+          setError(null);
+          setAiExplanation(null);
+          toast.success("SQL replaced by AI suggestion");
+        },
+        onError: (err) => {
+          toast.error("AI Fix failed", { description: String(err) });
+        },
+      }
+    );
+  }, [connectionId, sqlValue, error, fixMutation, onSqlChange]);
+
   return (
     <>
     <ResizablePanelGroup orientation="vertical">
@@ -257,6 +316,21 @@ export function WorkspacePanel({
               <Sparkles className="h-3 w-3" />
               AI
             </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 gap-1 text-xs"
+              onClick={handleAiExplain}
+              disabled={isAiLoading || !sqlValue.trim()}
+              title="Explain query with AI"
+            >
+              {isAiLoading ? (
+                <Loader2 className="h-3 w-3 animate-spin" />
+              ) : (
+                <BrainCircuit className="h-3 w-3" />
+              )}
+              AI Explain
+            </Button>
             {result && result.columns.length > 0 && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -314,7 +388,7 @@ export function WorkspacePanel({
       <ResizableHandle withHandle />
       <ResizablePanel id="results" defaultSize="60%" minSize="15%">
         <div className="flex h-full flex-col overflow-hidden">
-          {(explainData || result || error) && (
+          {(explainData || result || error || aiExplanation) && (
             <div className="flex shrink-0 items-center border-b text-xs">
               <button
                 className={`px-3 py-1 font-medium ${
@@ -377,6 +451,10 @@ export function WorkspacePanel({
                 error={error}
                 isLoading={queryMutation.isPending && resultView === "results"}
                 viewMode={resultViewMode}
+                aiExplanation={aiExplanation}
+                isAiLoading={isAiLoading}
+                onExplainError={error ? handleExplainError : undefined}
+                onFixError={error ? handleFixError : undefined}
               />
             )}
           </div>