add useServerEnvironment hook with document title prefix

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -3,11 +3,13 @@ import * as Authentication from './Screens/Authentication';
 import * as Dashboard from './Screens/Dashboard';
 import { useAuth } from 'hooks/useAuth';
 import { useServerSettings } from 'state/useServerSettings';
+import { useServerEnvironment } from 'state/useServerEnvironment';
 import { useInitialData } from '@/state/useInitialData';
 
 export function App() {
   const { isLoading, isAuthenticated, user } = useAuth();
   const { onboardingComplete, plugins, isLoading: isServerSettingsLoading } = useServerSettings();
+  useServerEnvironment();
   useInitialData();
 
   if (isLoading || isServerSettingsLoading) return null;

src/workspaces/state/src/index.ts

@@ -16,3 +16,5 @@ export type { UseChatSessionsType } from './useChatSessions';
 export { useChatGroups } from './useChatGroups';
 export { useUserApps } from './useUserApps';
 export type { AppManifest } from './useUserApps';
+export { useServerEnvironment } from './useServerEnvironment';
+export type { ServerEnvironment } from './useServerEnvironment';

src/workspaces/state/src/useServerEnvironment.ts

@@ -0,0 +1,25 @@
+import { useGlobal } from 'hooks/useGlobal';
+
+export type ServerEnvironment = 'dev' | 'alpha' | 'edge' | 'production';
+
+function detectEnvironment(): ServerEnvironment {
+  const host = window.location.host;
+  if (host === 'officer.dev' || host === 'www.officer.dev') return 'production';
+  if (host.startsWith('edge.')) return 'edge';
+  if (host.startsWith('alpha.')) return 'alpha';
+  return 'dev';
+}
+
+const env = detectEnvironment();
+
+if (env !== 'production') {
+  const prefix = env.toUpperCase();
+  if (!document.title.startsWith(prefix)) {
+    document.title = `${prefix} | ${document.title}`;
+  }
+}
+
+export const useServerEnvironment = () => {
+  const [environment] = useGlobal<ServerEnvironment>('SERVER_ENVIRONMENT', env);
+  return environment;
+};