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.
2026-05-24 08:34:34 +02:00
parent e0ac643e80
commit c71e782dc0
16 changed files with 1162 additions and 30 deletions
@@ -0,0 +1,19 @@
+// Shared open/close state for the ⌘K command palette. The trigger lives on
+// the topbar and on the global keyboard shortcut handler, while the rendered
+// panel lives in the default layout — they all read/write the same ref via
+// this composable.
+
+const isOpen = ref(false)
+
+export const useCommandPalette = () => ({
+  isOpen,
+  open: () => {
+    isOpen.value = true
+  },
+  close: () => {
+    isOpen.value = false
+  },
+  toggle: () => {
+    isOpen.value = !isOpen.value
+  },
+})
@@ -0,0 +1,34 @@
+// Visual-only impersonation state. Real impersonation requires an OAuth
+// on-behalf-of grant or admin-impersonation token endpoint; this composable
+// just tracks whether the modal is open + which tenant we're "viewing" so the
+// red banner and topbar warning surface render correctly. Tracked as a
+// follow-up in OPERATOR-PLAN.md.
+
+import type { Tenant } from '~/types/tenant'
+
+const candidate = ref<Tenant | null>(null) // shown in the confirm modal
+const active = ref<Tenant | null>(null) // shown in the persistent banner
+const asUser = ref<string>('first-user@example.com')
+
+export const useImpersonation = () => ({
+  candidate,
+  active,
+  asUser,
+  open: (tenant: Tenant) => {
+    candidate.value = tenant
+  },
+  cancel: () => {
+    candidate.value = null
+  },
+  confirm: (reason: string, userLabel?: string) => {
+    if (!candidate.value) return
+    active.value = candidate.value
+    asUser.value = userLabel ?? asUser.value
+    candidate.value = null
+    // eslint-disable-next-line no-console
+    console.log('[impersonation] entered', { tenant: active.value.slug, reason, asUser: asUser.value })
+  },
+  exit: () => {
+    active.value = null
+  },
+})
@@ -0,0 +1,11 @@
+const isOpen = ref(false)
+
+export const useIncidentModal = () => ({
+  isOpen,
+  open: () => {
+    isOpen.value = true
+  },
+  close: () => {
+    isOpen.value = false
+  },
+})
@@ -0,0 +1,69 @@
+// Cosmetic tweaks for the operator shell — theme (dark/light), density
+// (comfy/compact), env badge (prod/staging/dev). 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.
+
+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 state = ref<TweakState>({ ...DEFAULTS })
+const hydrated = ref(false)
+
+function apply() {
+  if (!import.meta.client) return
+  const root = document.documentElement
+  root.setAttribute('data-theme', state.value.theme)
+  root.setAttribute('data-density', state.value.density)
+}
+
+function persist() {
+  if (!import.meta.client) return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state.value))
+  } catch {
+    // localStorage can throw in private mode; tweaks are cosmetic so swallow.
+  }
+}
+
+function hydrate() {
+  if (!import.meta.client || hydrated.value) return
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<TweakState>
+      state.value = { ...DEFAULTS, ...parsed }
+    }
+  } catch {
+    // ignore corrupt JSON
+  }
+  apply()
+  hydrated.value = true
+}
+
+export const useTweaks = () => {
+  if (import.meta.client) hydrate()
+
+  function set<K extends keyof TweakState>(key: K, value: TweakState[K]) {
+    state.value = { ...state.value, [key]: value }
+    apply()
+    persist()
+  }
+
+  return {
+    state,
+    setTheme: (v: ThemeMode) => set('theme', v),
+    setDensity: (v: Density) => set('density', v),
+    setEnv: (v: Env) => set('env', v),
+  }
+}