Add dev and alpha environment indicator (#5092)

ui/desktop/src/components/GooseSidebar/AppSidebar.tsx

@@ -15,6 +15,7 @@ import { ChatSmart, Gear } from '../icons';
 import { ViewOptions, View } from '../../utils/navigationUtils';
 import { useChatContext } from '../../contexts/ChatContext';
 import { DEFAULT_CHAT_TITLE } from '../../contexts/ChatContext';
+import EnvironmentBadge from './EnvironmentBadge';
 
 interface SidebarProps {
   onSelectSession: (sessionId: string) => void;
@@ -165,7 +166,9 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
         <SidebarMenu>{menuItems.map((entry, index) => renderMenuItem(entry, index))}</SidebarMenu>
       </SidebarContent>
 
-      <SidebarFooter />
+      <SidebarFooter className="pb-2 flex items-start">
+        <EnvironmentBadge />
+      </SidebarFooter>
     </>
   );
 };

ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/Tooltip';
+
+const EnvironmentBadge: React.FC = () => {
+  const isAlpha = process.env.ALPHA;
+  const isDevelopment = import.meta.env.DEV;
+
+  // Don't show badge in production
+  if (!isDevelopment && !isAlpha) {
+    return null;
+  }
+
+  const tooltipText = isAlpha ? 'Alpha' : 'Dev';
+  const bgColor = isAlpha ? 'bg-purple-600' : 'bg-orange-400';
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={`${bgColor} w-3 h-3 rounded-full cursor-default`}
+          data-testid="environment-badge"
+          aria-label={tooltipText}
+        />
+      </TooltipTrigger>
+      <TooltipContent side="right">{tooltipText}</TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default EnvironmentBadge;

ui/desktop/src/components/GooseSidebar/index.ts

@@ -1 +1,2 @@
 export { default as AppSidebar } from './AppSidebar';
+export { default as EnvironmentBadge } from './EnvironmentBadge';