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/layout/StatusBar.tsx

@@ -1,6 +1,7 @@
 import { useAppStore } from "@/stores/app-store";
 import { useConnections } from "@/hooks/use-connections";
 import { Circle } from "lucide-react";
+import { EnvironmentBadge } from "@/components/connections/EnvironmentBadge";
 
 interface Props {
   rowCount?: number | null;
@@ -31,6 +32,7 @@ export function StatusBar({ rowCount, executionTime }: Props) {
             />
           )}
           {activeConn ? activeConn.name : "No connection"}
+          <EnvironmentBadge environment={activeConn?.environment} size="sm" />
         </span>
         {isConnected && activeConnectionId && (
           <span

src/components/layout/Toolbar.tsx

@@ -9,6 +9,8 @@ import { useAppStore } from "@/stores/app-store";
 import { useConnections } from "@/hooks/use-connections";
 import { Database, Plus } from "lucide-react";
 import type { ConnectionConfig, Tab } from "@/types";
+import { getEnvironment } from "@/lib/environment";
+import { EnvironmentBadge } from "@/components/connections/EnvironmentBadge";
 
 export function Toolbar() {
   const [listOpen, setListOpen] = useState(false);
@@ -16,7 +18,9 @@ export function Toolbar() {
   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 activeConn = connections?.find((c) => c.id === activeConnectionId);
+  const activeEnv = getEnvironment(activeConn?.environment);
+  const activeColor = activeEnv?.color ?? activeConn?.color;
 
   const handleNewQuery = () => {
     if (!activeConnectionId) return;
@@ -54,6 +58,13 @@ export function Toolbar() {
 
         <ReadOnlyToggle />
 
+        {activeConn?.environment && (
+          <>
+            <Separator orientation="vertical" className="h-5" />
+            <EnvironmentBadge environment={activeConn.environment} size="sm" />
+          </>
+        )}
+
         <Separator orientation="vertical" className="h-5" />
 
         <Button