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/Toolbar.tsx

@@ -6,6 +6,7 @@ import { ConnectionList } from "@/components/connections/ConnectionList";
 import { ConnectionDialog } from "@/components/connections/ConnectionDialog";
 import { ReadOnlyToggle } from "@/components/layout/ReadOnlyToggle";
 import { useAppStore } from "@/stores/app-store";
+import { useConnections } from "@/hooks/use-connections";
 import { Database, Plus } from "lucide-react";
 import type { ConnectionConfig, Tab } from "@/types";
 
@@ -14,6 +15,8 @@ export function Toolbar() {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingConn, setEditingConn] = useState<ConnectionConfig | null>(null);
   const { activeConnectionId, addTab } = useAppStore();
+  const { data: connections } = useConnections();
+  const activeColor = connections?.find((c) => c.id === activeConnectionId)?.color;
 
   const handleNewQuery = () => {
     if (!activeConnectionId) return;
@@ -29,7 +32,10 @@ export function Toolbar() {
 
   return (
     <>
-      <div className="flex h-10 items-center gap-2 border-b px-3 bg-card">
+      <div
+        className="flex h-10 items-center gap-2 border-b px-3 bg-card"
+        style={{ borderLeftWidth: activeColor ? 3 : 0, borderLeftColor: activeColor }}
+      >
         <Button
           variant="ghost"
           size="sm"