From ba6d43e75c6481f64d0497497a725543021c4c35 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Thu, 9 Oct 2025 11:15:29 -0700
Subject: [PATCH] Add dev and alpha environment indicator (#5092)

---
 .../components/GooseSidebar/AppSidebar.tsx    |  5 +++-
 .../GooseSidebar/EnvironmentBadge.tsx         | 30 +++++++++++++++++++
 .../src/components/GooseSidebar/index.ts      |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx

diff --git a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
index 1076f6f0..89efec1c 100644
--- a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
+++ b/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>
     </>
   );
 };
diff --git a/ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx b/ui/desktop/src/components/GooseSidebar/EnvironmentBadge.tsx
new file mode 100644
index 00000000..db64b080
--- /dev/null
+++ b/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;
diff --git a/ui/desktop/src/components/GooseSidebar/index.ts b/ui/desktop/src/components/GooseSidebar/index.ts
index e99ee41f..6ca1e20a 100644
--- a/ui/desktop/src/components/GooseSidebar/index.ts
+++ b/ui/desktop/src/components/GooseSidebar/index.ts
@@ -1 +1,2 @@
 export { default as AppSidebar } from './AppSidebar';
+export { default as EnvironmentBadge } from './EnvironmentBadge';