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/results/ResultsPanel.tsx

@@ -1,7 +1,8 @@
 import { ResultsTable } from "./ResultsTable";
 import { ResultsJsonView } from "./ResultsJsonView";
 import type { QueryResult } from "@/types";
-import { Loader2, AlertCircle } from "lucide-react";
+import { Loader2, AlertCircle, Sparkles, Wand2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface Props {
   result?: QueryResult | null;
@@ -14,6 +15,10 @@ interface Props {
     value: unknown
   ) => void;
   highlightedCells?: Set<string>;
+  aiExplanation?: string | null;
+  isAiLoading?: boolean;
+  onExplainError?: () => void;
+  onFixError?: () => void;
 }
 
 export function ResultsPanel({
@@ -23,6 +28,10 @@ export function ResultsPanel({
   viewMode = "table",
   onCellDoubleClick,
   highlightedCells,
+  aiExplanation,
+  isAiLoading,
+  onExplainError,
+  onFixError,
 }: Props) {
   if (isLoading) {
     return (
@@ -33,13 +42,65 @@ export function ResultsPanel({
     );
   }
 
+  if (aiExplanation) {
+    return (
+      <div className="h-full overflow-auto p-4">
+        <div className="rounded-md border bg-muted/30 p-4">
+          <div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
+            <Sparkles className="h-3.5 w-3.5" />
+            AI Explanation
+          </div>
+          <pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed text-foreground">
+            {aiExplanation}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+
   if (error) {
     return (
-      <div className="flex h-full items-center justify-center p-4">
+      <div className="flex h-full flex-col items-center justify-center gap-3 p-4">
         <div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
           <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <pre className="whitespace-pre-wrap font-mono text-xs">{error}</pre>
         </div>
+        {(onExplainError || onFixError) && (
+          <div className="flex items-center gap-2">
+            {onExplainError && (
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 gap-1.5 text-xs"
+                onClick={onExplainError}
+                disabled={isAiLoading}
+              >
+                {isAiLoading ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Sparkles className="h-3 w-3" />
+                )}
+                Explain
+              </Button>
+            )}
+            {onFixError && (
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 gap-1.5 text-xs"
+                onClick={onFixError}
+                disabled={isAiLoading}
+              >
+                {isAiLoading ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Wand2 className="h-3 w-3" />
+                )}
+                Fix with AI
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     );
   }