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

@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/select";
 import { useConnections } from "@/hooks/use-connections";
 import { useAppStore } from "@/stores/app-store";
+import { EnvironmentBadge } from "@/components/connections/EnvironmentBadge";
 
 export function ConnectionSelector() {
   const { data: connections } = useConnections();
@@ -37,6 +38,7 @@ export function ConnectionSelector() {
             />
           )}
           <SelectValue placeholder="Select connection" />
+          <EnvironmentBadge environment={activeConn?.environment} size="sm" />
         </div>
       </SelectTrigger>
       <SelectContent>
@@ -50,6 +52,7 @@ export function ConnectionSelector() {
                 />
               )}
               {conn.name}
+              <EnvironmentBadge environment={conn.environment} size="sm" />
             </div>
           </SelectItem>
         ))}