feat: add connection colors, query history, SQL autocomplete, and EXPLAIN visualizer

Add four developer/QA features:
- Connection color coding: color picker in dialog, colored indicators across toolbar, tabs, status bar, and connection selectors
- Query history: Rust backend with JSON file storage (500 entry cap), sidebar panel with search/clear, auto-recording from workspace
- Schema-aware SQL autocomplete: backend fetches column metadata, CodeMirror receives schema namespace with public tables unprefixed
- EXPLAIN ANALYZE visualizer: recursive tree view with cost-colored bars, expand/collapse nodes, buffers info, Results/Explain tab toggle

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

src/components/layout/Sidebar.tsx

@@ -1,27 +1,60 @@
 import { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { SchemaTree } from "@/components/schema/SchemaTree";
+import { HistoryPanel } from "@/components/history/HistoryPanel";
 import { Search } from "lucide-react";
 
+type SidebarView = "schema" | "history";
+
 export function Sidebar() {
+  const [view, setView] = useState<SidebarView>("schema");
   const [search, setSearch] = useState("");
 
   return (
     <div className="flex h-full flex-col bg-card">
-      <div className="p-2">
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder="Search objects..."
-            className="h-7 pl-7 text-xs"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
-        <SchemaTree />
+      <div className="flex border-b text-xs">
+        <button
+          className={`flex-1 px-3 py-1.5 font-medium ${
+            view === "schema"
+              ? "bg-background text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+          onClick={() => setView("schema")}
+        >
+          Schema
+        </button>
+        <button
+          className={`flex-1 px-3 py-1.5 font-medium ${
+            view === "history"
+              ? "bg-background text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+          onClick={() => setView("history")}
+        >
+          History
+        </button>
       </div>
+
+      {view === "schema" ? (
+        <>
+          <div className="p-2">
+            <div className="relative">
+              <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="Search objects..."
+                className="h-7 pl-7 text-xs"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+            <SchemaTree />
+          </div>
+        </>
+      ) : (
+        <HistoryPanel />
+      )}
     </div>
   );
 }