feat: add environment labels (local/dev/stage/prod) for connections

Visual badges help distinguish environments across the UI to prevent
running dangerous queries on production. Environment color takes
priority over custom connection color for the toolbar border.

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

src/components/connections/ConnectionDialog.tsx

@@ -18,6 +18,7 @@ import {
 import { useSaveConnection, useTestConnection } from "@/hooks/use-connections";
 import { toast } from "sonner";
 import type { ConnectionConfig } from "@/types";
+import { ENVIRONMENTS } from "@/lib/environment";
 import { Loader2, X } from "lucide-react";
 
 const CONNECTION_COLORS = [
@@ -47,6 +48,7 @@ const emptyConfig: ConnectionConfig = {
   database: "postgres",
   ssl_mode: "prefer",
   color: undefined,
+  environment: undefined,
 };
 
 export function ConnectionDialog({ open, onOpenChange, connection }: Props) {
@@ -184,6 +186,38 @@ export function ConnectionDialog({ open, onOpenChange, connection }: Props) {
               </SelectContent>
             </Select>
           </div>
+          <div className="grid grid-cols-4 items-center gap-3">
+            <label className="text-right text-sm text-muted-foreground">
+              Environment
+            </label>
+            <Select
+              value={form.environment ?? "__none__"}
+              onValueChange={(v) =>
+                setForm((f) => ({
+                  ...f,
+                  environment: v === "__none__" ? undefined : v,
+                }))
+              }
+            >
+              <SelectTrigger className="col-span-3">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">None</SelectItem>
+                {ENVIRONMENTS.map((env) => (
+                  <SelectItem key={env.value} value={env.value}>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="h-2 w-2 rounded-full"
+                        style={{ backgroundColor: env.color }}
+                      />
+                      {env.label}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
           <div className="grid grid-cols-4 items-center gap-3">
             <label className="text-right text-sm text-muted-foreground">
               Color