From c93865e187cff9822e1df9a5bc7b6ed16c0504f2 Mon Sep 17 00:00:00 2001
From: Ronni Baslund <rhb@vdoc.dk>
Date: Sun, 24 May 2026 16:52:07 +0200
Subject: [PATCH] refactor(operator): derive env badge from hostname, not from
 user choice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A toggle-able env badge is a sticker, not a safety signal. Move env to
useEnv() which reads window.location.hostname:
  *.local / localhost → 'dev'
  *staging* → 'staging'
  everything else → 'prod' (safest default)

- New composable: apps/operator/composables/useEnv.ts
- Topbar reads useEnv() instead of useTweaks().env
- useTweaks loses the env field; hydrate strips it from stale
  localStorage payloads so old entries don't break
- TweaksPanel: env section removed (theme + density remain)
- Settings: env section removed from Appearance; added a read-only
  Environment row to the Profile card showing the detected env +
  hostname source ("auto-detected from operator.dezky.local")
---
 apps/operator/components/OpTopbar.vue    |  4 +--
 apps/operator/components/TweaksPanel.vue | 20 +++---------
 apps/operator/composables/useEnv.ts      | 39 ++++++++++++++++++++++++
 apps/operator/composables/useTweaks.ts   | 20 +++++++-----
 apps/operator/pages/settings.vue         | 28 +++++++++++------
 5 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 apps/operator/composables/useEnv.ts

diff --git a/apps/operator/components/OpTopbar.vue b/apps/operator/components/OpTopbar.vue
index dffc900..60b7825 100644
--- a/apps/operator/components/OpTopbar.vue
+++ b/apps/operator/components/OpTopbar.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 withDefaults(defineProps<{ oncall?: boolean }>(), { oncall: true })
 
-const { state: tweaks } = useTweaks()
 const { open: openPalette } = useCommandPalette()
+const { env } = useEnv()
 
 const ENVS = {
   prod:    { label: 'PROD',    fg: 'var(--text)', bg: 'rgba(244,243,238,0.08)', border: 'rgba(244,243,238,0.15)' },
   staging: { label: 'STAGING', fg: '#FFC872',     bg: 'rgba(232,154,31,0.16)',  border: 'rgba(232,154,31,0.36)' },
   dev:     { label: 'DEV',     fg: '#D4AAFF',     bg: 'rgba(159,98,212,0.18)',  border: 'rgba(159,98,212,0.36)' },
 } as const
-
-const env = computed(() => tweaks.value.env)
 </script>
 
 <template>
diff --git a/apps/operator/components/TweaksPanel.vue b/apps/operator/components/TweaksPanel.vue
index 5c62fce..a8860e0 100644
--- a/apps/operator/components/TweaksPanel.vue
+++ b/apps/operator/components/TweaksPanel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-// Floating cosmetic-tweaks panel. Lives in the bottom-right corner. Lets the
-// operator flip theme/density/env without touching settings pages. All three
-// are pure-cosmetic — env in particular is just a colored chip in the topbar,
-// not a real environment switch.
+// Floating cosmetic-tweaks panel. Lives in the bottom-right corner. Quick
+// theme + density toggle without leaving the page. The env badge is NOT
+// here — it's derived from the hostname (see useEnv) so the operator can
+// trust it as a real environment signal, not a sticker they flipped.
 
-const { state, setTheme, setDensity, setEnv } = useTweaks()
+const { state, setTheme, setDensity } = useTweaks()
 const open = ref(false)
 </script>
 
@@ -39,15 +39,6 @@ const open = ref(false)
           </div>
         </section>
 
-        <section>
-          <label class="row-label">Env badge</label>
-          <div class="seg three">
-            <button :class="{ on: state.env === 'prod' }" type="button" @click="setEnv('prod')">PROD</button>
-            <button :class="{ on: state.env === 'staging' }" type="button" @click="setEnv('staging')">STAGING</button>
-            <button :class="{ on: state.env === 'dev' }" type="button" @click="setEnv('dev')">DEV</button>
-          </div>
-        </section>
-
         <footer>
           <Mono dim>// cosmetic only — saved to localStorage</Mono>
         </footer>
@@ -129,7 +120,6 @@ section { display: flex; flex-direction: column; gap: 6px; }
   border: 1px solid var(--border);
   border-radius: 7px;
 }
-.seg.three { grid-template-columns: 1fr 1fr 1fr; }
 .seg button {
   appearance: none;
   border: 0;
diff --git a/apps/operator/composables/useEnv.ts b/apps/operator/composables/useEnv.ts
new file mode 100644
index 0000000..905d5ab
--- /dev/null
+++ b/apps/operator/composables/useEnv.ts
@@ -0,0 +1,39 @@
+// Detect which Dezky environment we're running against, from the browser
+// hostname. The env badge in the topbar reads this and uses it as a
+// "you're about to make changes in prod" warning — so it must NOT be
+// user-controllable.
+//
+// Rules:
+//   - hostname ends in `.local` or is `localhost` → 'dev'
+//   - hostname contains `staging` → 'staging'
+//   - anything else → 'prod' (safest default — show the prod styling)
+//
+// SSR returns 'dev' by default because the server has no concept of the
+// browser hostname. The first client tick re-evaluates and the env pill
+// updates without a visible flash for the typical operator workflow
+// (signed-in client-side navigation).
+
+export type Env = 'prod' | 'staging' | 'dev'
+
+function detect(hostname: string): Env {
+  const h = hostname.toLowerCase()
+  if (h === 'localhost' || h === '127.0.0.1' || h.endsWith('.local')) return 'dev'
+  if (h.includes('staging')) return 'staging'
+  return 'prod'
+}
+
+const current = ref<Env>('dev')
+const hostname = ref<string>('')
+let initialized = false
+
+function init() {
+  if (!import.meta.client || initialized) return
+  hostname.value = window.location.hostname
+  current.value = detect(hostname.value)
+  initialized = true
+}
+
+export const useEnv = () => {
+  if (import.meta.client) init()
+  return { env: current, hostname }
+}
diff --git a/apps/operator/composables/useTweaks.ts b/apps/operator/composables/useTweaks.ts
index 7b9bf69..b1e9f5d 100644
--- a/apps/operator/composables/useTweaks.ts
+++ b/apps/operator/composables/useTweaks.ts
@@ -1,21 +1,23 @@
-// Cosmetic tweaks for the operator shell — theme (dark/light), density
-// (comfy/compact), env badge (prod/staging/dev). Persisted in localStorage so
+// Cosmetic user-controllable preferences for the operator shell — theme
+// (dark/light) and density (comfy/compact). Persisted in localStorage so
 // the choices survive page reloads. The values are applied to <html> as
 // data-* attributes; tokens.css picks them up via selector overrides.
+//
+// NOTE: `env` used to live here but is now derived from the hostname via
+// `useEnv()` so it's a real environment signal, not a sticker the operator
+// can flip.
 
 export type ThemeMode = 'dark' | 'light'
 export type Density = 'comfy' | 'compact'
-export type Env = 'prod' | 'staging' | 'dev'
 
 interface TweakState {
   theme: ThemeMode
   density: Density
-  env: Env
 }
 
 const STORAGE_KEY = 'dezky-operator-tweaks'
 
-const DEFAULTS: TweakState = { theme: 'dark', density: 'comfy', env: 'dev' }
+const DEFAULTS: TweakState = { theme: 'dark', density: 'comfy' }
 
 const state = ref<TweakState>({ ...DEFAULTS })
 const hydrated = ref(false)
@@ -41,8 +43,13 @@ function hydrate() {
   try {
     const raw = localStorage.getItem(STORAGE_KEY)
     if (raw) {
+      // Old payloads carried an `env` field — pick fields we still care about
+      // and ignore the rest so a stale localStorage entry doesn't break.
       const parsed = JSON.parse(raw) as Partial<TweakState>
-      state.value = { ...DEFAULTS, ...parsed }
+      state.value = {
+        theme: parsed.theme ?? DEFAULTS.theme,
+        density: parsed.density ?? DEFAULTS.density,
+      }
     }
   } catch {
     // ignore corrupt JSON
@@ -64,6 +71,5 @@ export const useTweaks = () => {
     state,
     setTheme: (v: ThemeMode) => set('theme', v),
     setDensity: (v: Density) => set('density', v),
-    setEnv: (v: Env) => set('env', v),
   }
 }
diff --git a/apps/operator/pages/settings.vue b/apps/operator/pages/settings.vue
index 1228d15..9f8b53a 100644
--- a/apps/operator/pages/settings.vue
+++ b/apps/operator/pages/settings.vue
@@ -17,7 +17,14 @@ interface VerifyResponse {
 }
 
 const { user } = useOidcAuth()
-const { state: tweaks, setTheme, setDensity, setEnv } = useTweaks()
+const { state: tweaks, setTheme, setDensity } = useTweaks()
+const { env, hostname } = useEnv()
+
+const ENV_LABEL: Record<'prod' | 'staging' | 'dev', string> = {
+  prod: 'Production',
+  staging: 'Staging',
+  dev: 'Development',
+}
 
 const { data: token } = useLazyFetch<VerifyResponse>('/api/_verify-token', {
   server: false,
@@ -102,6 +109,15 @@ const links = [
               <Mono v-if="!groups.length" dim>—</Mono>
             </dd>
           </div>
+          <div class="row">
+            <dt>Environment</dt>
+            <dd class="env-row">
+              <Badge :tone="env === 'prod' ? 'bad' : env === 'staging' ? 'warn' : 'info'" dot>
+                {{ ENV_LABEL[env] }}
+              </Badge>
+              <Mono dim>auto-detected from {{ hostname || '—' }}</Mono>
+            </dd>
+          </div>
         </dl>
       </Card>
 
@@ -147,14 +163,6 @@ const links = [
               <button :class="{ on: tweaks.density === 'compact' }" type="button" @click="setDensity('compact')">Compact</button>
             </div>
           </section>
-          <section>
-            <span class="label">Env badge</span>
-            <div class="seg three">
-              <button :class="{ on: tweaks.env === 'prod' }" type="button" @click="setEnv('prod')">PROD</button>
-              <button :class="{ on: tweaks.env === 'staging' }" type="button" @click="setEnv('staging')">STAGING</button>
-              <button :class="{ on: tweaks.env === 'dev' }" type="button" @click="setEnv('dev')">DEV</button>
-            </div>
-          </section>
         </div>
       </Card>
     </div>
@@ -193,6 +201,7 @@ const links = [
 }
 .kv dd { margin: 0; font-size: 13px; }
 .kv dd.groups { display: flex; flex-wrap: wrap; gap: 6px; }
+.kv dd.env-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 
 .links { display: flex; flex-direction: column; }
 .link {
@@ -242,7 +251,6 @@ const links = [
   border-radius: 7px;
   max-width: 280px;
 }
-.seg.three { grid-template-columns: 1fr 1fr 1fr; max-width: 360px; }
 .seg button {
   appearance: none;
   border: 0;