feat: add VITE_APP_MODE environment variable support

- Introduced VITE_APP_MODE variable in multiple files to manage application modes.
- Updated dev.mjs and docker-compose.dev.yml to set different modes for development.
- Enhanced type definitions in vite-env.d.ts to include VITE_APP_MODE options.
- Modified AutomakerLogo component to display version suffix based on the current app mode.
- Improved OS detection logic in use-os-detection.ts to utilize Electron's platform information.
- Updated ElectronAPI interface to expose platform information.

These changes provide better control over application behavior based on the mode, enhancing the development experience.

apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx

@@ -1,13 +1,30 @@
 import type { NavigateOptions } from '@tanstack/react-router';
 import { cn } from '@/lib/utils';
+import { useOSDetection } from '@/hooks/use-os-detection';
 
 interface AutomakerLogoProps {
   sidebarOpen: boolean;
   navigate: (opts: NavigateOptions) => void;
 }
 
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
 export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
   const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const { os } = useOSDetection();
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
 
   return (
     <div
@@ -69,7 +86,7 @@ export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
           </g>
         </svg>
         <span className="text-[0.625rem] text-muted-foreground leading-none font-medium">
-          v{appVersion}
+          v{appVersion} {versionSuffix}
         </span>
       </div>
 
@@ -125,7 +142,7 @@ export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
             </span>
           </div>
           <span className="text-[0.625rem] text-muted-foreground leading-none font-medium ml-[38.8px]">
-            v{appVersion}
+            v{appVersion} {versionSuffix}
           </span>
         </div>
       )}

apps/ui/src/hooks/use-os-detection.ts

@@ -10,11 +10,12 @@ export interface OSDetectionResult {
 }
 
 function detectOS(): OperatingSystem {
-  // Check Electron's process.platform first (most reliable in Electron apps)
-  if (typeof process !== 'undefined' && process.platform) {
-    if (process.platform === 'darwin') return 'mac';
-    if (process.platform === 'win32') return 'windows';
-    if (process.platform === 'linux') return 'linux';
+  // Check Electron's exposed platform first (via preload contextBridge)
+  if (typeof window !== 'undefined' && window.electronAPI?.platform) {
+    const platform = window.electronAPI.platform;
+    if (platform === 'darwin') return 'mac';
+    if (platform === 'win32') return 'windows';
+    if (platform === 'linux') return 'linux';
   }
 
   if (typeof navigator === 'undefined') {

apps/ui/src/types/electron.d.ts

@@ -466,6 +466,10 @@ export interface AutoModeAPI {
 }
 
 export interface ElectronAPI {
+  // Platform info (exposed from preload)
+  platform?: 'darwin' | 'win32' | 'linux';
+  isElectron?: boolean;
+
   ping: () => Promise<string>;
   getApiKey?: () => Promise<string | null>;
   quit?: () => Promise<void>;

apps/ui/src/vite-env.d.ts

@@ -2,7 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_SERVER_URL?: string;
-  // Add other VITE_ prefixed env vars here as needed
+  readonly VITE_APP_MODE?: '1' | '2' | '3' | '4';
 }
 
 // Extend ImportMeta to include env property