feat: add connection management UI

Add TypeScript types, typed Tauri invoke wrappers, Zustand store,
TanStack Query hooks, and connection components: ConnectionDialog
(create/edit/test), ConnectionList (sheet panel), ConnectionSelector
(toolbar dropdown).

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

src/components/connections/ConnectionSelector.tsx

@@ -0,0 +1,41 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useConnections } from "@/hooks/use-connections";
+import { useAppStore } from "@/stores/app-store";
+
+export function ConnectionSelector() {
+  const { data: connections } = useConnections();
+  const { activeConnectionId, setActiveConnectionId, connectedIds } =
+    useAppStore();
+
+  const connectedList = connections?.filter((c) => connectedIds.has(c.id)) ?? [];
+
+  if (connectedList.length === 0) {
+    return (
+      <div className="text-xs text-muted-foreground px-2">Not connected</div>
+    );
+  }
+
+  return (
+    <Select
+      value={activeConnectionId ?? undefined}
+      onValueChange={setActiveConnectionId}
+    >
+      <SelectTrigger className="h-7 w-[200px] text-xs">
+        <SelectValue placeholder="Select connection" />
+      </SelectTrigger>
+      <SelectContent>
+        {connectedList.map((conn) => (
+          <SelectItem key={conn.id} value={conn.id}>
+            {conn.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}