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>
   );
 }

src/components/layout/StatusBar.tsx

@@ -20,9 +20,16 @@ export function StatusBar({ rowCount, executionTime }: Props) {
     <div className="flex h-6 items-center justify-between border-t bg-card px-3 text-[11px] text-muted-foreground">
       <div className="flex items-center gap-3">
         <span className="flex items-center gap-1">
-          <Circle
-            className={`h-2 w-2 ${isConnected ? "fill-green-500 text-green-500" : "fill-muted text-muted"}`}
-          />
+          {activeConn?.color ? (
+            <span
+              className="inline-block h-2 w-2 rounded-full"
+              style={{ backgroundColor: activeConn.color }}
+            />
+          ) : (
+            <Circle
+              className={`h-2 w-2 ${isConnected ? "fill-green-500 text-green-500" : "fill-muted text-muted"}`}
+            />
+          )}
           {activeConn ? activeConn.name : "No connection"}
         </span>
         {isConnected && activeConnectionId && (

src/components/layout/TabBar.tsx

@@ -1,9 +1,11 @@
 import { useAppStore } from "@/stores/app-store";
+import { useConnections } from "@/hooks/use-connections";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { X, Table2, Code, Columns } from "lucide-react";
 
 export function TabBar() {
   const { tabs, activeTabId, setActiveTabId, closeTab } = useAppStore();
+  const { data: connections } = useConnections();
 
   if (tabs.length === 0) return null;
 
@@ -27,6 +29,15 @@ export function TabBar() {
               }`}
               onClick={() => setActiveTabId(tab.id)}
             >
+              {(() => {
+                const tabColor = connections?.find((c) => c.id === tab.connectionId)?.color;
+                return tabColor ? (
+                  <span
+                    className="h-2 w-2 shrink-0 rounded-full"
+                    style={{ backgroundColor: tabColor }}
+                  />
+                ) : null;
+              })()}
               {iconMap[tab.type]}
               <span className="max-w-[120px] truncate">{tab.title}</span>
               <button

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"