feat(operator): command palette, impersonation, incident, tweaks (O.8)

- CommandPalette + useCommandPalette: ⌘K opens a search-and-jump panel over
  real tenants/partners + fixture flags + nav + actions. Arrow keys + Enter
  navigate, Escape/backdrop close. Recents are intentionally omitted for now;
  add when there's something to recent over.
- Impersonation stub: useImpersonation + ImpersonationModal + ImpersonationBanner.
  Modal opens from tenant detail and from the palette. Banner stays at the top
  of the shell until exited. No real OBO token is minted — wiring OAuth Token
  Exchange is tracked as a follow-up.
- IncidentModal + useIncidentModal: opened from the Overview and Infrastructure
  incident banners, renders the mock INCIDENT data with metrics, timeline and
  draft composer.
- TweaksPanel + useTweaks: floating bottom-right panel for theme (dark/light),
  density (comfy/compact), env badge (prod/staging/dev). Saved to localStorage.
- Theme/density apply via [data-theme] + [data-density] overrides in
  tokens.css. Topbar env badge now reads from useTweaks instead of a prop.
- Layout wires ⌘K + ⌘[ at the document level and mounts the palette + modals
  + banner + tweaks panel once for all pages.

apps/operator/components/ImpersonationBanner.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// Persistent red banner at the very top of the operator chrome. Renders
+// whenever useImpersonation().active is set. Sits OUTSIDE the sidebar/topbar
+// so it spans the full window width.
+
+const { active, asUser, exit } = useImpersonation()
+</script>
+
+<template>
+  <div v-if="active" class="banner" role="alert">
+    <span class="pill">
+      <span class="dot" />
+      Operator impersonation
+    </span>
+    <div class="body">
+      Viewing <strong>{{ active.name }}</strong> as <strong>{{ asUser }}</strong>.
+      Every action you take is logged with your operator identity.
+    </div>
+    <button class="log-note" type="button">Log note</button>
+    <button class="exit" type="button" @click="exit">
+      <UiIcon name="x" :size="12" />
+      Exit impersonation
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.banner {
+  background: #9F1D1D;
+  color: #FEEEEE;
+  padding: 8px 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+  animation: impersonationGlow 1.4s ease-in-out infinite alternate;
+}
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  background: rgba(255, 255, 255, 0.14);
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.dot { width: 6px; height: 6px; border-radius: 999px; background: #fff; }
+.body { flex: 1; min-width: 0; font-size: 13px; }
+.body strong { font-weight: 700; }
+
+.log-note, .exit {
+  border: 0;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  border-radius: 4px;
+}
+.log-note {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #FEEEEE;
+  font-size: 12px;
+  padding: 5px 12px;
+}
+.exit {
+  background: #FEEEEE;
+  color: #9F1D1D;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+@keyframes impersonationGlow {
+  from { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1); }
+  to   { box-shadow: inset 0 -1px 0 rgba(255, 200, 200, 0.3); }
+}
+</style>