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.
This commit is contained in:
Ronni Baslund
2026-05-24 08:34:34 +02:00
parent e0ac643e80
commit c71e782dc0
16 changed files with 1162 additions and 30 deletions
+43
View File
@@ -37,4 +37,47 @@
--font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
--input-bg: rgba(244, 243, 238, 0.04);
/* Cosmetic density. comfy=1, compact≈0.78. Used by page chrome that opts in
(PageHeader / table cells). Reading via calc() keeps layouts in one place. */
--density-scale: 1;
}
/* Tweaks: density overrides */
:root[data-density='compact'] { --density-scale: 0.78; }
/* Tweaks: light theme (warm cream, charcoal text). Overrides every surface
token so any component that uses var(--bg / --surface / --text / ...) flips
without code changes. Components that hard-code rgba(244,243,238,...) will
not flip — those should switch to tokens if they care about light mode. */
:root[data-theme='light'] {
--bg: #F6F4EF;
--surface: #FAF8F2;
--elevated: #FFFFFF;
--border: #E2DED2;
--border-hi: #D0CBBC;
--text: #1C1B17;
--text-dim: rgba(28, 27, 23, 0.72);
--text-mute: rgba(28, 27, 23, 0.50);
--side-bg: #F0EDE4;
--side-surf: #FAF8F2;
--side-border: #E2DED2;
--side-text: #1C1B17;
--side-dim: rgba(28, 27, 23, 0.62);
--side-mute: rgba(28, 27, 23, 0.42);
--side-hover: rgba(28, 27, 23, 0.05);
--side-active: rgba(28, 27, 23, 0.08);
--accent: #1F8A5B;
--accent-fg: #FAF8F2;
--signal: #1F8A5B;
--ok: #1F8A5B;
--warn: #C97F1F;
--bad: #C03A3A;
--info: #2A6FDB;
--input-bg: rgba(28, 27, 23, 0.04);
}