The shared shell every operator panel uses. 28px header strip with
UPPERCASE letter-spaced title (--type-label, --fg-2), optional muted
subtitle (--fg-3), StaleIndicator dot, and an external-link "raw"
icon → upstream source. Body fills remaining space and scrolls
internally. Border-bottom 1px --fg-4 separates panels in the column.
Primitives in shared/:
KPI — value (mono, --type-num-l, tabular-nums, --fg-1) + label
(UPPERCASE, --type-label, --fg-3). No card wrapper, no
rounded corner, no background. The number IS the unit.
Sparkline — d3-scale + d3-array driven inline SVG. Single stroke
in currentColor, no axes / no fill / no animation. Used
only when the shape IS the insight (per ethos). Returns
null with <2 points so empty panels don't ship a flat line
as a placeholder.
StaleIndicator — 6px square dot. --ok green (fresh), --amber
(stale, breached threshold), --fg-4 muted (unknown / no
data yet). Title attribute carries last update UTC time
for hover context.
RawLink not extracted yet — Panel inlines the icon since one raw
link per panel is the rule. Extract when a panel needs more.
Adds d3-scale 4.0.2 + d3-array 3.2.4 + their @types — small d3
modules (not the full umbrella) per spec §10.3 to keep bundle lean.
Plan 5 Task 13 Design QA: panel header 28px, title UPPERCASE
letter-spaced, sparkline pure stroke (no axes / fill), stale dot
6px, no border-radius anywhere, no hover scale.
react-globe.gl 2.37 + three 0.184 added. Globe component is React.memo'd,
absolute-fills the .center grid cell, sizes itself via ResizeObserver on
the wrapper div (the library defaults to window.innerWidth/Height which
would blow past the 1247px cell). pointsMerge: true so hundreds of
points cost one ThreeJS Mesh draw call.
Layer dataset built by useGlobePoints / useGlobeRings hooks in
globeLayers.ts, projecting each store point onto color/altitude/radius
lookup tables keyed on the 6 GlobePointTypes:
earthquake/ransomware/scan = monochrome (--fg-2/--fg-1/--fg-4)
iss = --ok (live position is functional, not decorative)
outage/hijack = --amber (the only globe surfaces with alarm color —
earthquakes and ransomware stay monochrome because an M2.5 quake or
daily victim is not user-actionable)
Rings are simple white pulses (no per-ring color decoration), single
pulse (ringRepeatPeriod=0). Camera panTo() in globeCamera.ts is the
only motion API; the dashboard lifecycle (Task 24) will trigger it on
high-mag quakes etc. Auto-rotate disabled on globe ready — motion is
meaning, a globe that spins for no reason violates the rule.
atmosphereAltitude=0.12, atmosphereColor=#1f2937 per spec §10.4 — a thin
glow that gives the sphere silhouette without becoming "3D space
ambiance." backgroundColor=rgba(0,0,0,0) so the panel cell --bg shows
through. No starfield, no nebulas. No globeImageUrl — keeps the build
self-contained (no CDN dep); we add a local texture later if geographic
context needs to be richer.
Plan 5 Task 12 Design QA: no starfield/nebula/extra glow, monochrome
quake dots, amber confined to outage/hijack, no hover tooltip on globe.
Press F → hide TopStrip + BottomTicker, drop the panel column borders, and
shrink panel columns from 320 to 280 so the globe gets more room. Esc →
exit. Mode persists to localStorage at STORAGE_KEYS.PRESENTATION_MODE so
refresh maintains it (use case: second-monitor wall).
Implementation: each chrome component (TopStrip, BottomTicker) reads
presentationMode from the ui store and early-returns null. Dashboard
applies a .presentation modifier to .root that re-templates the inner
.grid columns and zeroes the aside borders. CSS Modules-scoped — no
:global escape, no clsx dep.
isTypingInForm guards F so it doesn't fire when typing in inputs / textareas
/ contentEditable. Escape always exits — universal "get me out" semantics.
useUIStore.getState() inside the keydown handler avoids stale closure.
Plan 5 Task 11 Design QA: F hides chrome cleanly without animation flash,
globe area expands, panels stay readable, Esc restores, state persists.
32px strip in the bottomticker grid-area that renders the ticker Zustand
store as a horizontally scrolling marquee — one of the few places motion
is allowed because new entries pushing older ones along IS data changing.
Source label uppercase + letter-spaced --fg-3, headline body --fg-2,
relative timestamp mono tabular --fg-3.
Empty state is a bare strip (no "no events" message, no illustration) —
operator UI doesn't onboard. The track only renders when items.length > 0
so the marquee animation isn't running over an empty list.
formatRel uses module-scope SECONDS_PER_MINUTE / SECONDS_PER_HOUR /
MS_PER_SECOND constants (no inline magic numbers). Animation uses kebab
keyframe name (stylelint keyframes-name-pattern).
The only surface in the dashboard that uses amber as a fill color — the
one-alarm-color rule reserves this paint for "look here." 48px strip in
the alertbanner grid-area, dark text (--amber-fg #1a1a1a) on the amber
fill for cross-room legibility, ellipsis on long messages, dismiss button
at right. Returns null when the ui store has no currentAlert so the row
collapses to zero and the center grid sits flush with the top strip.
Auto-dismiss after 30s via setTimeout in useEffect; cleanup on unmount
or alert change. role="alert" for screen readers. focus-visible outline
1px --amber-fg.
Adds --amber-fg to ethos tokens — pairs explicitly with --amber so any
future amber-fill surface uses the same dark text. Also cleans up an
empty `//` line in the ethos comment block (stylelint scss/comment-no-empty).
Thin 36px strip in the topstrip grid-area: left = MONITORING THE SITUATION
label + about-trigger icon, center = HH:MM:SS UTC mono clock with tabular-nums
ticking once per second, right = settings gear (auth) or user (anonymous)
that navigates via ROUTES.{SETTINGS,LOGIN}. About icon dispatches openAbout
on the ui store; the modal itself is Task 23.
Pure monochrome — title --fg-2 letter-spaced uppercase --type-label, clock
--fg-2 mono, icons --fg-3 with --fg-1 hover color shift (no transition,
no scale, no rounded surface). Reads tmux-status-line, not SaaS app header.
focus-visible outline 1px --fg-2 for keyboard a11y. Dashboard.tsx renders
<TopStrip /> as a direct child of .root so it auto-places into the
topstrip named area.
Plan 5 Task 8 Design QA: strip height, label tier, mono tabular clock,
zero rounding, tmux feel — all verified.
Replaces the demolition scaffold with the structural grid that Tasks 8-21
fill in. Root is a 4-row grid (topstrip / alertbanner / main / bottomticker)
with named grid-areas; the main row contains a 3-col sub-grid (left aside /
center section / right aside) at fixed 320px / 1fr / 320px. 100dvh, no body
scroll, ethos custom properties only — no template SCSS variables touched.
Adds --col-panel-width: 320px to the ethos token block (no magic number in
the layout module). index.tsx becomes a one-line re-export of Dashboard so
the lazy-route contract in routers.tsx stays unchanged.
No placeholder components. The empty <aside>/<section> elements are the
column containers themselves; subsequent tasks add real children inside
them rather than swap stub components.
Verified in browser at 1920x1080: rgb(10,10,10) bg, 320/1247/320 col rects,
1px var(--fg-4) rules between columns, body has no scroll. All 5 Plan 5
Task 7 Design QA boxes checked.
CarterPerez-dev