refactor(operator): derive env badge from hostname, not from user choice

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/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;