Merge pull request #873 from manjunath22466/fix/cyber-voice-popups

fix(ui): harden Cyber panel layout and preset restoration

CHANGELOG.md

@@ -58,6 +58,22 @@
   only to the origin that sent the view. SECURITY.md describes the MCP surface
   and the panel's browser keys.
 
+- Cockpit now enters on the existing matching map style while keeping one fixed,
+  duplicate-free carousel over `Normal / CRT / NVG / FLIR / Anime / Noir / Snow`.
+  Normal remains a real unfiltered option; Cockpit-only choices still restore
+  the captured map style through both Exit Cockpit and Reset.
+- Cyber's compact right-rail and Cockpit utility buttons now center their glyphs
+  vertically and share the same inset and edge alignment.
+- Keep Cyber Voice help/error popups and Location/Visual Presets pins clear of
+  their decorative frames. Leave space above attribution for its full logo row.
+- Add an intentionally future-facing, opt-in panel surface contract for new
+  panels to inherit compatible Normal, Cyber and Cockpit styling. Its first
+  production adopter will land separately after this change.
+- Restore the user's previous visual preset when they explicitly switch from
+  Cyber to another HUD layout, without overriding scene or shared-link state.
+- Move the aligned Cyber side-panel rails upward on desktop so the left stack
+  clears the lower coordinate card; keep Cockpit's independent visor layout.
+
 ## [0.2.0] — 2026-10-02 — God's Eye View through Your Agent
 
 - Show God's Eye View inside AI conversations. Answers that can be shown

docs/CURRENT-STATE.md

@@ -40,11 +40,12 @@ lists at 25 rows by default. Voice offers the same queries next to its app
 actions: the session lists them, and the browser runs them through the same
 catalog, loaded on first use. See [tools and the MCP server](TOOLS.md).
 
-## Cyber HUD — September 23, 2026
+## Cyber HUD — September 30, 2026
 
 Display > HUD > Layout includes Cyber, also available through the HUD voice
 action and shared visual state. An explicit first transition into Cyber selects
-FLIR with Ironbow 0.42; restored links and subsequent visual tuning remain
+FLIR with Ironbow 0.42. An explicit switch back to another HUD layout restores
+the visual preset used before Cyber; restored links and scenes remain
 authoritative. The skin uses shared red/slate panel treatments in map and cockpit,
 with compact 200px collapsed controls and wider expanded panels. Other HUD
 layouts retain their existing presentation.
@@ -57,6 +58,21 @@ headers and decorative frames. The narrow-screen rail remains scrollable to reac
 each panel. Radio retains the shared nested Context player and compact
 header disclosure, without relocating playback controls on theme changes.
 
+Voice help/error popups and Location/Visual Presets pins extend beyond their
+Cyber frames without being clipped: the shapes decorate non-interactive
+pseudo-elements. The lower-left telemetry card leaves room for attribution's
+full logo row. New panels can use the [shared surface contract](panel-surfaces.md)
+for theme tokens, rail input and a fixed header with a bounded scroll body.
+The contract is intentionally future-facing and opt-in; its first production
+adopter will land after this change. Existing owners still control disclosure,
+persistence and placement, while small-screen rail popup clipping and other
+integration limits remain documented in the contract.
+
+On desktop, Cyber raises the left rail so it clears the lower coordinate card.
+`layoutRightPanelRail` reads that rendered top as its measured `baseTop`, which
+keeps the right rail aligned. Cockpit retains its separate rail placement for
+its visor layout.
+
 Sonar has one contact-highlighting method. Native Cesium points, billboards and
 labels are treated in GPU draw commands without replacing their positions,
 identities or pick commands. Model and canvas/DOM overlays retain their own
@@ -1994,11 +2010,12 @@ down | auth-failed` (plus the unchanged `missing-key`/`unsupported`) with
 >   registered for lifecycle and restoration but is not duplicated in Data Layers.
 >   Inside Cockpit, the focused summary card is titled Contact in both visible
 >   copy and its accessible control labels.
->   The top-center Cockpit vision cycle shows the inherited map preset name
->   (for example, `NOIR`) followed by CRT, NVG, FLIR, and NOIR. That inherited entry
->   leaves the selected map preset unchanged inside Cockpit. NONE is not offered
->   in the cycle; CRT, NVG, FLIR, and NOIR temporarily override that preset, while returning to it or exiting
->   Cockpit restores the captured map style and its exact shader intensities.
+>   The top-center Cockpit vision cycle is the fixed, duplicate-free sequence
+>   Normal, CRT, NVG, FLIR, Anime, Noir, and Snow. Entry selects the map preset
+>   already in use, so a FLIR map opens on the existing FLIR item while
+>   Normal remains available exactly once. NONE is not offered. Cockpit choices
+>   temporarily override the map preset, while Exit Cockpit and Reset both restore
+>   the captured map style and its exact shader intensities.
 >   Selecting a Cockpit vision treatment with configurable parameters opens
 >   Cockpit Display and reveals those parameters through the existing right-side
 >   accordion; an inherited parameterless Normal preset does not force it open.
@@ -3838,8 +3855,9 @@ and unreachable upstream (502/504) separately from road geometry.
   first, activates the Contacts sub-view, and returns the settled 250 km window.
   Its `aircraft` count is the exact civilian-plus-military total when both feeds
   can answer, or `unknown` when either component is unavailable.
-- Cockpit's top vision switch cycles five rendered looks: the inherited map
-  style, CRT, NVG, FLIR, and Noir. There is no empty `NONE` entry.
+- Cockpit's top vision switch cycles all seven map looks: Normal, CRT, NVG,
+  FLIR, Anime, Noir, and Snow. Entry selects the matching map style without adding
+  a duplicate carousel item. There is no empty `NONE` entry.
 
 ### Live AIS Vessels (June 2026)
 
@@ -4210,7 +4228,7 @@ are omitted rather than framing the wrong part of the globe.
 - **Cockpit left-panel clearance:** the Cockpit Contact card and peripheral HUD participate in the adaptive left accordion's live obstacle measurements, including live viewport-height changes. Expanding Layers or Scenes keeps the active panel in the available upper-left corridor with internal scrolling; it does not cover the Contact card, lower Cockpit controls, or Cesium credit line. Outside Cockpit the hidden card does not alter the normal corridor.
 - **Cockpit Context scope:** the 250 km radius applies to the air/sea proximity cohorts. Installation counts come only from the currently loaded viewport and are labeled `CURRENT VIEWPORT ONLY` in the cockpit as well as the normal Context panel; neither surface presents them as a complete 250 km installation survey.
 - **Cockpit camera anchor:** first-person mode does not write feed-boundary corrections directly into the camera. A cockpit-only inertial anchor advances from the selected aircraft's displayed course and speed, then converges toward the authoritative delayed track with correction capped below forward motion. The displayed kinematics are derived from the same consecutive fix segment as the rendered position, with raw feed speed/course used only as fallback; a transient zero/missing feed speed therefore cannot freeze a visibly moving aircraft after layer enable or a map/cockpit handoff. Rendered altitude continues to come from that interpolated track position. Late ADS-B fixes and short render stalls can remove drift without accelerating or reversing the view. Camera placement runs before scene update/culling at a bounded 20 Hz so a moving cockpit does not force Photoreal 3D Tiles to retraverse on every display frame; textual instruments update at 10 Hz and context/layout work at 4 Hz. Every far Cockpit contact pip shares one stable Cesium texture-atlas entry and skips unused screen-projected course calculations, while only in-range 2D aircraft silhouettes pay the screen-projected rotation cost; ambient glTF collections are hidden/retained rather than synchronously destroyed at cockpit entry, and context rails lay out only on explicit content/state changes and viewport resize. The deliberate 15/30-second layer interpolation delays and per-Cesium-frame position caches remain unchanged.
-- **Cockpit route, vision, and view controls:** visible on-screen `COCKPIT`, `RESET`, and `EXIT COCKPIT` controls replace reliance on the `C` shortcut. RESET uses the same canonical globe route as the map and voice actions, exits Cockpit, and releases its camera ownership rather than exposing the hidden map-style top action. When the tracked commercial flight has a plausible ADSBDB route, the top of the right briefing rail shows a compact `FROM → TO` airport strip and the visor shows a centered estimated-destination chevron with its relative bearing; absent or implausible route data hides the strip and cue rather than guessing. The cockpit-local vision control is an interactive `PREV / CURRENT / NEXT` carousel over the inherited map preset, `CRT`, `NVG`, `FLIR`, and `NOIR`; its previous/next actions wrap, and activating the current value advances to the next style. The inherited entry is named directly, such as `NOIR`, and retains that map shader. There is no empty `NONE` entry. CRT, NVG, FLIR, and NOIR temporarily activate the existing Cesium post-process stages, while returning to the inherited entry or exiting Cockpit restores the pre-entry visual style. The regional-news page uses a free Google News RSS locality query first, with the existing GDELT query retained only as a fail-soft fallback; linked headlines remain reporting, not verified incidents or risk intelligence.
+- **Cockpit route, vision, and view controls:** visible on-screen `COCKPIT`, `RESET`, and `EXIT COCKPIT` controls replace reliance on the `C` shortcut. RESET uses the same canonical globe route as the map and voice actions, exits Cockpit, and releases its camera ownership rather than exposing the hidden map-style top action. When the tracked commercial flight has a plausible ADSBDB route, the top of the right briefing rail shows a compact `FROM → TO` airport strip and the visor shows a centered estimated-destination chevron with its relative bearing; absent or implausible route data hides the strip and cue rather than guessing. The cockpit-local vision control is an interactive `PREV / CURRENT / NEXT` carousel over `NORMAL`, `CRT`, `NVG`, `FLIR`, `ANIME`, `NOIR`, and `SNOW`; its previous/next actions wrap, and activating the current value advances to the next style. Cockpit enters on the active map preset, so a Cyber FLIR map opens Cockpit on FLIR while Normal remains a distinct option instead of producing a second FLIR entry. Cockpit choices temporarily activate the existing Cesium post-process stages, while exiting Cockpit through either EXIT or RESET restores the pre-entry map style. The regional-news page uses a free Google News RSS locality query first, with the existing GDELT query retained only as a fail-soft fallback; linked headlines remain reporting, not verified incidents or risk intelligence.
 - **Cockpit weather status:** the earlier multi-canvas atmospheric compositor remains fail-closed and is not attached to the live viewer. Cockpit clouds are a separate transparent WebGL pass with a capped 520×320 framebuffer, 24 ray steps, three FBM octaves, and a 12 FPS ceiling. It defaults off and starts only when local storage explicitly contains the persisted `WX ON` opt-in (`'1'`). When opted in, observations refresh after five minutes or 25 km of aircraft movement, fail transparent when unavailable or clear, and stop on exit or disable. `WX OFF` governs atmospheric rendering only: the briefing still fetches source-backed Natural Earth region, headline, and Open-Meteo local-information data, aborting and replacing any in-flight request when the selected aircraft changes. No weather effect runs in map mode and no synthetic fallback is shown.
 - **Cockpit trail visibility:** entering cockpit hides the selected aircraft's trail body and head so they cannot cross the first-person view; exit restores them. This cockpit-only presentation change does not alter the normal map-mode invariant that aircraft trails render through terrain using their depth-fail material.
 - **Aircraft course slew:** civilian and military 3D models retain the 60°/s course limiter, but each rendered frame can consume at most 250 ms of accumulated slew time. A long tile/render stall therefore catches up over multiple visible frames instead of turning one delayed frame into a heading snap.

docs/panel-surfaces.md

@@ -0,0 +1,150 @@
+# Panel surface contract
+
+`src/ui/styles/panel-surfaces.css` supplies an opt-in visual surface for new
+panels. It uses the application's default color, font, border and radius tokens;
+Cyber supplies its existing red/slate palette, monospace typography and shaped
+frame. This is CSS shared by the existing panel system, not a panel registry or
+a controller. A panel ID does not need a new theme selector.
+
+## Markup
+
+A rail panel uses an outer owner with its existing stable `id`, matching
+`data-panel-id`, and `panel-collapsible` class. Its first non-glow child is the
+surface. Keep the header and any outward popup outside the scrolling body:
+
+```html
+<section
+  id="example-panel"
+  data-panel-id="example-panel"
+  class="panel-collapsible"
+>
+  <div data-panel-surface>
+    <header data-panel-header>
+      <h2 class="panel-title panel-surface-title">Example</h2>
+      <button
+        class="panel-collapse-btn panel-surface-control"
+        data-collapse-target="example-panel"
+        aria-expanded="true"
+        aria-label="Collapse Example"
+      >
+        −
+      </button>
+    </header>
+    <div data-panel-body data-rail-scroller>
+      <label>Filter <input class="panel-surface-control" type="text" /></label>
+      <button class="panel-surface-control" type="button">Apply</button>
+      <p class="panel-surface-error" role="status" hidden></p>
+    </div>
+    <aside data-panel-popup hidden aria-label="Example help">
+      <!-- The panel owns this popup's placement and interactions. -->
+    </aside>
+  </div>
+</section>
+```
+
+Use native controls and accessible names. `.panel-surface-control` is an
+optional skin for buttons, text fields, selects and textareas; it provides
+hover, focus, disabled and invalid-state styling. Native `disabled` owns actual
+disablement; `aria-disabled` alone only describes a state and must be enforced
+by the controller. `.panel-surface-error` supplies error color, not announcement
+or validation behavior. Keep checkbox/radio semantics and labels intact.
+
+`data-panel-header` stays outside `data-panel-body`, so it remains reachable
+when content scrolls. Give the body a bounded height through its containing
+surface. The rail's allocation supplies that bound; a dock or dialog owner must
+supply its own `max-height` or height. Avoid a flex body whose contents shrink to
+fit when those contents should instead scroll.
+
+## Placement and ownership
+
+| Mount                                 | Shared contract                                                                                     | Owner responsibilities                                                                                                                                                                                   |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Direct child of `#left-panel-stack`   | An owner with a direct `[data-panel-surface]` child receives relative positioning and allocated height; inner surface/body skin | Add the wrapper shown above, use the existing layout/disclosure owners, and retain left-rail focus/auto-collapse rules.                                                                                  |
+| Direct child of `#right-context-rail` | The same hooks with right-rail allocation and intrinsic measurement                                 | Keep `data-rail-scroller` on the body so measurement preserves its scroll position. Respect Cyber's one-expanded-panel policy.                                                                           |
+| Surface inside `#command-dock`        | Surface, controls, popup decoration and inherited dock concealment                                  | Supply geometry, stacking, disclosure, pin behavior if wanted, safe viewport bounds and dismissal. This CSS does not extend the existing Location/Visual Presets tray stack manager to arbitrary panels. |
+| `dialog[data-panel-surface]`          | The same surface/body skin; a closed dialog remains hidden                                          | Set width/max-height, use `showModal()` or `show()` and `close()`, and own labels, initial/return focus and dismissal. Do not put `panel-collapsible` on a dialog.                                       |
+
+For rails, `--panel-expanded-width` and `--panel-collapsed-width` customize
+the desired widths within the rail; otherwise Cyber uses its existing left,
+right and collapsed panel widths. `--left-panel-allocated-height` and
+`--right-panel-allocated-height` belong
+to the existing layout owner, not to individual panels. The surface must be
+the wrapper's first non-glow child because left-rail intrinsic measurement
+inspects that child. Do not put an absolutely positioned popup before the
+surface or inside its body. Position a popup beside or above its surface using
+component CSS; the shared rules deliberately do not choose a direction that
+could run beyond the viewport.
+
+Rail measurement still considers visible child extents. A popup extending
+below the surface can therefore increase its measured height. Prefer a popup
+beside or above the surface, or integrate an external overlay host with the
+feature's layout owner; this CSS does not change measurement algorithms.
+
+At viewport widths of 720px or less, both rails are intentional scroll
+containers. Their overflow can clip outward popups even when the panel's own
+surface is unclipped. Use a popup contained within the rail's visible bounds,
+or an explicitly owned overlay host outside the rail; the surface contract
+does not provide automatic popup escape from these small-screen scroll regions.
+
+For dock disclosure, use a semantic button with `.panel-surface-control` and
+the feature's own accessible name, `aria-expanded` state and event binding.
+Do not copy the rail example's `.panel-collapse-btn` class into the dock:
+existing dock rules intentionally hide that class. The generic surface skin
+does not replace the dock's disclosure policy.
+
+The existing `PanelChrome` binds `.panel-collapse-btn[data-collapse-target]`
+at initialization and routes state through `setPanelCollapsed`. For additions
+present at startup, keep those hooks and the existing chrome lifecycle. A
+dynamically mounted panel must bind and dispose its own disclosure using
+`bindPanelDisclosure` / `collapsePanelOnEscape` from `panelDisclosure.js`, with
+the application owning state changes. Do not rerun the whole application chrome
+initializer just to add one panel. `layoutLeftPanelRail` and
+`layoutRightPanelRail` accept arbitrary direct `data-panel-id` children; their
+host owns layout scheduling, observations and collapse callbacks. Dynamic
+content that changes size may require an owner-scheduled layout pass or an
+owned `ResizeObserver`; adding CSS attributes does not register new observers.
+
+Persisted/share-link state, pinning, provider loading, keyboard shortcuts and
+Cockpit-specific mounting still require deliberate integration with their
+current owners. This contract does not add entries to named persistence, dock,
+Cockpit or share-state policies. Dispose listeners, observers and timers,
+dismiss open popups/dialogs and restore focus before removing a dynamic panel.
+
+## Decoration, popups and visibility
+
+The shared surface reserves `::before` for its non-interactive background. The
+Cyber frame clips this pseudo-element only; the surface stays unclipped with
+visible overflow. This follows the existing Display and Global Context pattern.
+Putting the shape on an interactive ancestor clips all descendant popups even
+if their `z-index` is high. A scrolling body also clips descendants by design,
+so outward popups must be siblings of the body, or use an explicitly owned
+overlay host outside every clipping ancestor.
+
+`data-panel-popup` gives a positioned popup the same decorative and control
+tokens. It is not a popover API, focus trap, collision solver or top-layer
+manager. The owner must keep it inside the viewport, above relevant siblings,
+and reachable by pointer and keyboard. A native modal dialog participates in
+the browser top layer; a surface in a rail does not. Transform, containment,
+mask, clipping or stacking rules on an additional ancestor can still obstruct
+either an ordinary panel or its popup. Arbitrary future markup is not covered.
+
+`hidden`, a closed native dialog and collapsed bodies/popups remain hidden.
+Clean UI and recording conceal conforming surfaces, including outward popups;
+owners must close modal dialogs when entering these modes so an invisible
+modal cannot leave the application inert. Existing Cockpit rail and dock
+exclusions remain in force. New left-rail/Cockpit functionality needs an
+explicit product integration; the surface attribute grants no mode exception.
+Never use theme styling to alter stored preferences or force hidden content
+visible.
+
+## Check an addition
+
+Use the real application with the default and Cyber themes. Check open,
+collapsed, hidden, disabled/error, theme round trips, clean UI/recording and
+the intended Cockpit behavior. Exercise keyboard focus, Escape, pointer input,
+the last scrolling item, resize without reload and any pin/unpin controls.
+For an outward popup, test visible pixels and pointer hit-testing outside the
+surface; a positive bounding box alone does not prove it escaped clipping.
+Check each mount the addition actually supports. The CSS contract cannot
+establish provider correctness, disclosure lifecycle or responsive placement
+without those feature-specific checks.

scripts/qa-cockpit-utility.mjs

@@ -1572,6 +1572,10 @@ try {
     const cockpit = manager.cockpitView;
     const current = document.getElementById('cockpit-vision-current');
     const label = document.getElementById('cockpit-vision-current-label');
+    const settle = (ms = 900) => new Promise((resolve) => setTimeout(resolve, ms));
+    const intensities = () => Object.fromEntries(
+      Object.entries(manager.stages || {}).map(([name, stage]) => [name, stage.uniforms?.intensity]),
+    );
     const read = () => ({
       mode: current?.dataset.cockpitVision,
       label: label?.textContent?.trim(),
@@ -1582,62 +1586,106 @@ try {
       parametersCollapsed: document.getElementById('param-slider-panel')?.classList.contains('collapsed'),
       signalCollapsed: cockpit.signalCollapsed,
       focusRetained: document.activeElement === current,
+      activeStyle: manager.activeStyle,
+      intensities: intensities(),
     });
+    const reenter = async () => {
+      cockpit.exit({ restoreTracking: true });
+      await settle();
+      for (let attempt = 0; attempt < 40; attempt += 1) {
+        if (cockpit.enter() === true) return true;
+        await settle(200);
+      }
+      return false;
+    };
     manager._setCockpitDisclosure('display', false);
     manager._setCockpitDisclosure('radio', false);
     cockpit.setVisionMode('optical');
     current.focus({ preventScroll: true });
     const states = [read()];
-    for (let index = 0; index < 5; index += 1) {
+    for (let index = 0; index < 7; index += 1) {
       current.click();
       states.push(read());
     }
     const originalStyle = manager.activeStyle;
+    // A Noir map preset: Cockpit enters on Noir, Normal clears every shader
+    // without changing the map preset, and Exit Cockpit restores Noir.
+    cockpit.exit({ restoreTracking: true });
     manager.setStyle('noir');
-    await new Promise((resolve) => setTimeout(resolve, 900));
+    await settle();
+    const enteredOnNoir = await reenter();
+    const entryNoir = read();
     cockpit.setVisionMode('optical');
-    const inheritedNoir = read();
-    cockpit.setVisionMode('noir');
-    const explicitNoir = read();
-    cockpit.setVisionMode('optical');
-    const restoredNoir = {
-      ...read(),
-      activeStyle: manager.activeStyle,
-      intensity: manager.stages.noir?.uniforms?.intensity,
-    };
+    const normalInsideNoir = read();
+    cockpit.setVisionMode('crt');
+    const cockpitOnlyCrt = read();
+    const exitedNoir = cockpit.exit({ restoreTracking: true }) === true;
+    await settle();
+    const restoredNoir = { ...read(), cockpitActive: cockpit.active };
     manager.setStyle(originalStyle);
-    await new Promise((resolve) => setTimeout(resolve, 900));
+    await settle();
+    const reentered = await reenter();
     cockpit.setVisionMode('optical');
-    return { states, inheritedNoir, explicitNoir, restoredNoir };
+    return {
+      states,
+      enteredOnNoir,
+      entryNoir,
+      normalInsideNoir,
+      cockpitOnlyCrt,
+      exitedNoir,
+      restoredNoir,
+      reentered,
+    };
   });
+  const cycleModes = ['optical', 'crt', 'nvg', 'thermal', 'anime', 'noir', 'snow', 'optical'];
+  const cycleLabels = ['NORMAL', 'CRT', 'NVG', 'FLIR', 'ANIME', 'NOIR', 'SNOW', 'NORMAL'];
   check(
-    'Cockpit vision control exposes inherited, CRT, NVG, FLIR, and NOIR before wrapping',
-    JSON.stringify(visionCycle.states.map((state) => state.mode))
-      === JSON.stringify(['optical', 'crt', 'nvg', 'thermal', 'noir', 'optical'])
-      && visionCycle.states[4]?.label === 'NOIR'
-      && visionCycle.states[4]?.aria === 'Current cockpit vision style: Noir. Activate for next style.',
-    JSON.stringify(visionCycle),
+    'Cockpit vision control exposes Normal, CRT, NVG, FLIR, Anime, Noir and Snow before wrapping',
+    JSON.stringify(visionCycle.states.map((state) => state.mode)) === JSON.stringify(cycleModes)
+      && JSON.stringify(visionCycle.states.map((state) => state.label)) === JSON.stringify(cycleLabels)
+      && visionCycle.states[5]?.aria === 'Current cockpit vision style: Noir. Activate for next style.'
+      && visionCycle.states[7]?.aria === 'Current cockpit vision style: Normal. Activate for next style.',
+    JSON.stringify(visionCycle.states.map(({ mode, label, aria }) => ({ mode, label, aria }))),
   );
   check(
     'user vision changes open Display for every temporary treatment and retain selector focus',
-    visionCycle.states[1]?.mode === 'crt'
-      && visionCycle.states.slice(1, 5).every((state) => state.displayOpen === 'true')
-      && visionCycle.states.slice(1, 5).every((state) => state.radioOpen === 'false')
-      && visionCycle.states.slice(1, 5).every((state) => state.parametersActive)
-      && visionCycle.states.slice(1, 5).every((state) => !state.parametersCollapsed)
-      && visionCycle.states.slice(1, 5).every((state) => state.signalCollapsed)
+    visionCycle.states.slice(1, 7).every((state) => state.displayOpen === 'true')
+      && visionCycle.states.slice(1, 7).every((state) => state.radioOpen === 'false')
+      && visionCycle.states.slice(1, 7).every((state) => state.parametersActive)
+      && visionCycle.states.slice(1, 7).every((state) => !state.parametersCollapsed)
+      && visionCycle.states.slice(1, 7).every((state) => state.signalCollapsed)
       && visionCycle.states.every((state) => state.focusRetained),
     JSON.stringify(visionCycle.states),
   );
   check(
-    'inherited Noir and explicit Noir keep distinct ownership and restore the Noir map preset',
-    visionCycle.inheritedNoir?.mode === 'optical'
-      && visionCycle.inheritedNoir?.label === 'NOIR'
-      && visionCycle.explicitNoir?.mode === 'noir'
-      && visionCycle.explicitNoir?.label === 'NOIR'
-      && visionCycle.restoredNoir?.mode === 'optical'
+    'each Cockpit vision mode drives only its own shader and Normal clears them all',
+    visionCycle.states.slice(1, 7).every((state) => {
+      const target = {
+        crt: 'retro', nvg: 'surveillance', thermal: 'thermal', anime: 'anime', noir: 'noir', snow: 'snow',
+      }[state.mode];
+      return Object.entries(state.intensities).every(([name, value]) =>
+        name === target ? value > 0 : value === 0);
+    })
+      && Object.values(visionCycle.states[7].intensities).every((value) => value === 0),
+    JSON.stringify(visionCycle.states.map(({ mode, intensities }) => ({ mode, intensities }))),
+  );
+  check(
+    'Cockpit enters on the Noir map preset, Normal clears it, and Exit Cockpit restores it',
+    visionCycle.enteredOnNoir
+      && visionCycle.entryNoir?.mode === 'noir'
+      && visionCycle.entryNoir?.label === 'NOIR'
+      && visionCycle.normalInsideNoir?.mode === 'optical'
+      && visionCycle.normalInsideNoir?.label === 'NORMAL'
+      && visionCycle.normalInsideNoir?.activeStyle === 'noir'
+      && Object.values(visionCycle.normalInsideNoir?.intensities || {}).every((value) => value === 0)
+      && visionCycle.cockpitOnlyCrt?.mode === 'crt'
+      && visionCycle.cockpitOnlyCrt?.activeStyle === 'noir'
+      && visionCycle.exitedNoir
+      && !visionCycle.restoredNoir?.cockpitActive
       && visionCycle.restoredNoir?.activeStyle === 'noir'
-      && visionCycle.restoredNoir?.intensity === 1,
+      && visionCycle.restoredNoir?.intensities?.noir === 1
+      && visionCycle.restoredNoir?.intensities?.retro === 0
+      && visionCycle.reentered,
     JSON.stringify(visionCycle),
   );
   await page.evaluate(() => window.__godsEyeView.styleManager.cockpitView.setVisionMode('noir'));
@@ -2266,10 +2314,16 @@ try {
     // Both the UI and compatibility facade delegate to this navigation owner.
     const manager = window.__godsEyeView.styleManager._locationNavigation;
     const awareness = window.__godsEyeView.dataManager.layers.get('military-awareness')?.module;
+    const styleManager = window.__godsEyeView.styleManager;
+    const styleBefore = styleManager.activeStyle;
+    // A Cockpit-only choice that Reset must undo.
+    styleManager.cockpitView.setVisionMode('snow');
     window.__qaCockpitReset = {
       calls: 0,
       original: manager.resetToGlobeView,
       subjectId: awareness?.getContextSnapshot?.()?.subject?.id || null,
+      styleBefore,
+      snowDuringCockpit: styleManager.stages?.snow?.uniforms?.intensity,
     };
     manager.resetToGlobeView = function qaCountedCockpitReset(...args) {
       window.__qaCockpitReset.calls += 1;
@@ -2305,16 +2359,26 @@ try {
       resetHidden: document.getElementById('cockpit-reset-globe')?.hidden,
       height,
       subjectPreserved: Boolean(qa.subjectId && subjectId === qa.subjectId),
+      styleRestored: gev.styleManager.activeStyle === qa.styleBefore,
+      snowDuringCockpit: qa.snowDuringCockpit,
+      // Cockpit-time intensities are Cockpit's own, so check against the map preset.
+      visionRestored: Object.entries(gev.styleManager.stages || {}).every(([name, stage]) =>
+        name === gev.styleManager.activeStyle
+          ? stage.uniforms?.intensity > 0
+          : stage.uniforms?.intensity === 0),
     };
   });
   check(
-    'keyboard Cockpit Reset uses one canonical route and preserves Contact selection',
+    'keyboard Cockpit Reset uses one canonical route, preserves Contact selection and restores the map style',
     resetState.calls === 1
       && !resetState.cockpitActive
       && !resetState.trackedEntity
       && resetState.resetHidden
       && Math.abs(resetState.height - 18_000_000) < 150_000
-      && resetState.subjectPreserved,
+      && resetState.subjectPreserved
+      && resetState.snowDuringCockpit > 0
+      && resetState.styleRestored
+      && resetState.visionRestored,
     JSON.stringify(resetState),
   );
   check('runtime console remains clean', consoleErrors.length === 0 && localHttpErrors.length === 0,

src/cockpitMarkup.test.mjs

@@ -86,23 +86,47 @@ test('Cockpit heading tape leaves the bottom exit row unobstructed', () => {
   assert.doesNotMatch(css, /cockpit-compass-label/);
 });
 
-test('Cockpit vision cycle exposes exactly five real visual styles without NONE', () => {
-  assert.match(cycleVisionMode.toString(), /const modes = COCKPIT_VISION_MODES;/);
-  assert.match(setVisionMode.toString(), /const labels = \{\s*optical: inherited,\s*crt: 'CRT',\s*nvg: 'NVG',\s*thermal: 'FLIR',\s*noir: 'NOIR',?\s*\};/);
+test('Cockpit vision cycle exposes every map preset exactly once', () => {
+  assert.match(
+    cycleVisionMode.toString(),
+    /const modes = COCKPIT_VISION_MODES;/,
+  );
+  assert.match(
+    setVisionMode.toString(),
+    /const labels = \{\s*optical: 'NORMAL',\s*crt: 'CRT',\s*nvg: 'NVG',\s*thermal: 'FLIR',\s*anime: 'ANIME',\s*noir: 'NOIR',\s*snow: 'SNOW',?\s*\};/,
+  );
   assert.doesNotMatch(setVisionMode.toString(), /none: 'NONE'/);
-  assert.match(ui, /getInheritedVisionLabel: \(\) =>\s*\(?[\s\S]*?STYLE_STATUS_LABELS\[this\.activeStyle\]/);
+  assert.doesNotMatch(ui, /getInheritedVisionLabel/);
   assert.match(html, /id="cockpit-vision-current-label"[^>]*>NORMAL<\/strong>/);
-  assert.match(ui, /const target = applyCockpitVisionStageIntensities\(\s*this\.stages,\s*next,\s*this\._cockpitVisionRestore,?\s*\);/);
-  assert.match(ui, /this\._cockpitVisionRestore = captureCockpitVisionBaseline\(\s*this\.stages,\s*this\.transitions,?\s*\);/);
+  assert.match(
+    cockpitEnter.toString(),
+    /this\.setVisionMode\(this\.getInitialVisionMode\(\)\)/,
+    'Cockpit must enter on the mode matching the active map preset',
+  );
+  assert.match(
+    readRadioSource(
+      new URL('./ui/cockpitCoordinator.js', import.meta.url),
+      'utf8',
+    ),
+    /getInitialVisionMode:\s*\(\)\s*=>\s*cockpitVisionModeForStyle\(this\.activeStyle\)/,
+  );
   assert.match(
     ui,
-    /if \(next === 'optical'\) \{[\s\S]*?applyCockpitVisionStageIntensities\(\s*this\.stages,\s*next,\s*this\._cockpitVisionRestore,?\s*\);[\s\S]*?return;[\s\S]*?const target = applyCockpitVisionStageIntensities/,
-    'the inherited entry must restore the map shader while CRT, NVG, FLIR, and NOIR remain temporary Cockpit overrides',
+    /const target = applyCockpitVisionStageIntensities\(\s*this\.stages,\s*next,?\s*\);/,
+  );
+  assert.match(
+    ui,
+    /this\._cockpitVisionRestore = captureCockpitVisionBaseline\(\s*this\.stages,\s*this\.transitions,?\s*\);/,
+  );
+  assert.match(
+    ui,
+    /if \(next === 'optical'\) \{[\s\S]*?applyCockpitVisionStageIntensities\(\s*this\.stages,\s*next,?\s*\);[\s\S]*?this\._updateSliderPanel\(null,[\s\S]*?return;[\s\S]*?const target = applyCockpitVisionStageIntensities/,
+    'Normal must clear the inherited map shader while the other map presets remain temporary Cockpit overrides',
   );
   assert.match(
     ui,
     /_syncCockpitInheritedStyle\(\)[\s\S]*?name === this\.activeStyle \? 1 : 0[\s\S]*?this\.transitions\.delete\(name\)[\s\S]*?setVisionMode\(this\.cockpitView\.visionMode\)/,
-    'changing the map preset in Cockpit must refresh both the inherited label and restore baseline',
+    'changing the map preset in Cockpit must refresh the exit restore baseline without replacing Normal',
   );
   assert.match(ui, /setStyle\([\s\S]*?this\._syncCockpitInheritedStyle\(\);/);
 });

src/cockpitVisionPolicy.js

@@ -3,21 +3,40 @@ export const COCKPIT_VISION_MODES = Object.freeze([
   'crt',
   'nvg',
   'thermal',
+  'anime',
   'noir',
+  'snow',
 ]);
 
 const TARGET_STYLE_BY_MODE = Object.freeze({
   crt: 'retro',
   nvg: 'surveillance',
   thermal: 'thermal',
+  anime: 'anime',
   noir: 'noir',
+  snow: 'snow',
 });
 
-/** Normalize a requested Cockpit vision mode to the inherited preset entry. */
+const COCKPIT_MODE_BY_STYLE = Object.freeze({
+  normal: 'optical',
+  retro: 'crt',
+  surveillance: 'nvg',
+  thermal: 'thermal',
+  anime: 'anime',
+  noir: 'noir',
+  snow: 'snow',
+});
+
+/** Normalize a requested Cockpit vision mode to the unfiltered Normal entry. */
 export function normalizeCockpitVisionMode(mode) {
   return COCKPIT_VISION_MODES.includes(mode) ? mode : 'optical';
 }
 
+/** Start Cockpit on the equivalent supported map preset. */
+export function cockpitVisionModeForStyle(style) {
+  return COCKPIT_MODE_BY_STYLE[String(style || '').toLowerCase()] || 'optical';
+}
+
 /** Settle pending map-style crossfades and return their intended final intensities. */
 export function captureCockpitVisionBaseline(stages, transitions) {
   const baseline = {};
@@ -34,12 +53,10 @@ export function captureCockpitVisionBaseline(stages, transitions) {
  * Apply Cockpit-only stage intensities without changing any shader parameters.
  * Returns the temporary style whose parameters should be shown, or null.
  */
-export function applyCockpitVisionStageIntensities(stages, mode, restore = {}) {
+export function applyCockpitVisionStageIntensities(stages, mode) {
   const next = normalizeCockpitVisionMode(mode);
   if (next === 'optical') {
-    for (const [name, intensity] of Object.entries(restore)) {
-      if (stages[name]) stages[name].uniforms.intensity = intensity;
-    }
+    for (const stage of Object.values(stages)) stage.uniforms.intensity = 0;
     return null;
   }
 

src/cockpitVisionPolicy.test.mjs

@@ -3,6 +3,7 @@ import test from 'node:test';
 import {
   applyCockpitVisionStageIntensities,
   captureCockpitVisionBaseline,
+  cockpitVisionModeForStyle,
   COCKPIT_VISION_MODES,
   normalizeCockpitVisionMode,
 } from './cockpitVisionPolicy.js';
@@ -14,12 +15,31 @@ const createStages = () => ({
   thermal: { uniforms: { intensity: 0, heat: 0.8 } },
 });
 
-test('Cockpit vision order exposes inherited, CRT, NVG, FLIR, and NOIR modes', () => {
-  assert.deepEqual(COCKPIT_VISION_MODES, ['optical', 'crt', 'nvg', 'thermal', 'noir']);
+test('Cockpit vision order mirrors the unique map preset order', () => {
+  assert.deepEqual(COCKPIT_VISION_MODES, [
+    'optical',
+    'crt',
+    'nvg',
+    'thermal',
+    'anime',
+    'noir',
+    'snow',
+  ]);
   assert.equal(normalizeCockpitVisionMode('none'), 'optical');
   assert.equal(normalizeCockpitVisionMode('unknown'), 'optical');
 });
 
+test('Cockpit entry selects the vision mode equivalent to the active map style', () => {
+  assert.equal(cockpitVisionModeForStyle('normal'), 'optical');
+  assert.equal(cockpitVisionModeForStyle('retro'), 'crt');
+  assert.equal(cockpitVisionModeForStyle('surveillance'), 'nvg');
+  assert.equal(cockpitVisionModeForStyle('thermal'), 'thermal');
+  assert.equal(cockpitVisionModeForStyle('anime'), 'anime');
+  assert.equal(cockpitVisionModeForStyle('noir'), 'noir');
+  assert.equal(cockpitVisionModeForStyle('snow'), 'snow');
+  assert.equal(cockpitVisionModeForStyle('unsupported'), 'optical');
+});
+
 test('Cockpit settles pending map crossfades before a temporary preset takes ownership', () => {
   const stages = createStages();
   const transitions = new Map([
@@ -29,49 +49,81 @@ test('Cockpit settles pending map crossfades before a temporary preset takes own
   const restore = captureCockpitVisionBaseline(stages, transitions);
   assert.deepEqual(restore, { noir: 1, retro: 0, surveillance: 0, thermal: 0 });
   assert.equal(transitions.size, 0);
-  applyCockpitVisionStageIntensities(stages, 'nvg', restore);
+  applyCockpitVisionStageIntensities(stages, 'nvg');
   assert.equal(stages.surveillance.uniforms.intensity, 1);
-  applyCockpitVisionStageIntensities(stages, 'optical', restore);
-  assert.equal(stages.noir.uniforms.intensity, 1);
+  applyCockpitVisionStageIntensities(stages, 'optical');
+  assert.equal(stages.noir.uniforms.intensity, 0);
   assert.equal(stages.retro.uniforms.intensity, 0);
 });
 
-test('returning from a temporary preset restores the exact inherited intensities', () => {
+test('Normal clears every temporary and inherited visual stage', () => {
   const stages = createStages();
   const restore = Object.fromEntries(
-    Object.entries(stages).map(([name, stage]) => [name, stage.uniforms.intensity]),
+    Object.entries(stages).map(([name, stage]) => [
+      name,
+      stage.uniforms.intensity,
+    ]),
   );
-  applyCockpitVisionStageIntensities(stages, 'thermal', restore);
-  applyCockpitVisionStageIntensities(stages, 'optical', restore);
+  applyCockpitVisionStageIntensities(stages, 'thermal');
+  applyCockpitVisionStageIntensities(stages, 'optical');
   assert.deepEqual(
-    Object.fromEntries(Object.entries(stages).map(([name, stage]) => [name, stage.uniforms.intensity])),
-    restore,
+    Object.fromEntries(
+      Object.entries(stages).map(([name, stage]) => [
+        name,
+        stage.uniforms.intensity,
+      ]),
+    ),
+    { noir: 0, retro: 0, surveillance: 0, thermal: 0 },
   );
+  assert.deepEqual(restore, {
+    noir: 0.72,
+    retro: 0.18,
+    surveillance: 0,
+    thermal: 0,
+  });
 });
 
 test('temporary styles replace each other without changing the inherited restore snapshot', () => {
   const stages = createStages();
   const restore = Object.fromEntries(
-    Object.entries(stages).map(([name, stage]) => [name, stage.uniforms.intensity]),
+    Object.entries(stages).map(([name, stage]) => [
+      name,
+      stage.uniforms.intensity,
+    ]),
   );
-  applyCockpitVisionStageIntensities(stages, 'thermal', restore);
-  assert.equal(applyCockpitVisionStageIntensities(stages, 'crt', restore), 'retro');
+  applyCockpitVisionStageIntensities(stages, 'thermal');
+  assert.equal(applyCockpitVisionStageIntensities(stages, 'crt'), 'retro');
   assert.equal(stages.retro.uniforms.intensity, 1);
   assert.equal(stages.noir.uniforms.intensity, 0);
-  applyCockpitVisionStageIntensities(stages, 'optical', restore);
-  assert.equal(stages.noir.uniforms.intensity, 0.72);
-  assert.equal(stages.retro.uniforms.intensity, 0.18);
+  applyCockpitVisionStageIntensities(stages, 'optical');
+  assert.equal(stages.noir.uniforms.intensity, 0);
+  assert.equal(stages.retro.uniforms.intensity, 0);
+  assert.deepEqual(restore, {
+    noir: 0.72,
+    retro: 0.18,
+    surveillance: 0,
+    thermal: 0,
+  });
 });
 
-test('NOIR is a temporary Cockpit override and inherited restores the captured map style', () => {
+test('NOIR is a temporary Cockpit override and Normal clears it', () => {
   const stages = createStages();
   const restore = Object.fromEntries(
-    Object.entries(stages).map(([name, stage]) => [name, stage.uniforms.intensity]),
+    Object.entries(stages).map(([name, stage]) => [
+      name,
+      stage.uniforms.intensity,
+    ]),
   );
-  assert.equal(applyCockpitVisionStageIntensities(stages, 'noir', restore), 'noir');
+  assert.equal(applyCockpitVisionStageIntensities(stages, 'noir'), 'noir');
   assert.equal(stages.noir.uniforms.intensity, 1);
   assert.equal(stages.retro.uniforms.intensity, 0);
-  applyCockpitVisionStageIntensities(stages, 'optical', restore);
-  assert.equal(stages.noir.uniforms.intensity, 0.72);
-  assert.equal(stages.retro.uniforms.intensity, 0.18);
+  applyCockpitVisionStageIntensities(stages, 'optical');
+  assert.equal(stages.noir.uniforms.intensity, 0);
+  assert.equal(stages.retro.uniforms.intensity, 0);
+  assert.deepEqual(restore, {
+    noir: 0.72,
+    retro: 0.18,
+    surveillance: 0,
+    thermal: 0,
+  });
 });

src/ui/applicationShell.js

@@ -1359,6 +1359,8 @@ export class StyleManager extends ShellFacade {
    * @param {string} styleName - Target style ('normal'|'retro'|'surveillance'|'thermal'|'anime'|'noir'|'snow').
    * @param {object} [options]
    * @param {boolean} [options.applyPreset=true] - Whether to apply STYLE_PRESET_DEFAULTS for the new style.
+   * @param {boolean} [options.userInitiated=false] - Whether a direct user preset choice owns the Cyber exit style.
+   * @param {boolean} [options.preserveCyberRestore=false] - Whether an automatic style update keeps the Cyber entry snapshot.
    * @returns {void}
    */
   setStyle(

src/ui/cockpitController.js

@@ -52,11 +52,11 @@ export class CockpitViewController {
     {
       services,
       onVisionChange = null,
+      getInitialVisionMode = null,
       onCameraTakeover = null,
       isEntryAllowed = null,
       onEntered = null,
       onExited = null,
-      getInheritedVisionLabel = null,
       restoreTrackingFrame = null,
     } = {},
   ) {
@@ -121,13 +121,13 @@ export class CockpitViewController {
     this.visionNext = document.getElementById('cockpit-vision-next');
     this.visionMode = 'optical';
     this.onVisionChange = onVisionChange;
+    this.getInitialVisionMode =
+      typeof getInitialVisionMode === 'function'
+        ? getInitialVisionMode
+        : () => 'optical';
     this.onCameraTakeover = onCameraTakeover;
     this.onEntered = onEntered;
     this.onExited = onExited;
-    this.getInheritedVisionLabel =
-      typeof getInheritedVisionLabel === 'function'
-        ? getInheritedVisionLabel
-        : () => 'NORMAL';
     this.restoreTrackingFrame =
       typeof restoreTrackingFrame === 'function'
         ? restoreTrackingFrame

src/ui/cockpitCoordinator.js

@@ -1,8 +1,8 @@
 import { CockpitViewController, CockpitDisplayPortal } from './cockpit.js';
-import { STYLE_STATUS_LABELS } from './visualPresets.js';
 import { cockpitEntryAllowed } from '../contextModePolicy.js';
 import { formatAwarenessLabel } from '../data/militaryAwarenessEngine.js';
 import { enterCockpitWithTracking } from '../cockpitTracking.js';
+import { cockpitVisionModeForStyle } from '../cockpitVisionPolicy.js';
 
 /** Own Cockpit entry/rollback, readouts and the single Display portal. */
 export class CockpitCoordinator {
@@ -72,11 +72,9 @@ export class CockpitCoordinator {
       },
       onVisionChange: (mode, active, options) =>
         this._setCockpitVision(mode, active, options),
+      getInitialVisionMode: () => cockpitVisionModeForStyle(this.activeStyle),
       onCameraTakeover: () =>
         this._stampNavigation({ cancelPendingSelection: false }),
-      getInheritedVisionLabel: () =>
-        STYLE_STATUS_LABELS[this.activeStyle] ||
-        String(this.activeStyle || 'normal').toUpperCase(),
       isEntryAllowed: () =>
         cockpitEntryAllowed({
           contextMode: this._contextMode,

src/ui/cockpitInstruments.js

@@ -217,22 +217,23 @@ export function syncWeatherToggle(enabled) {
 export function setVisionMode(mode, { revealParameters = false } = {}) {
   const next = normalizeCockpitVisionMode(mode);
   this.visionMode = next;
-  const inherited = String(
-    this.getInheritedVisionLabel?.() || 'NORMAL',
-  ).toUpperCase();
   const labels = {
-    optical: inherited,
+    optical: 'NORMAL',
     crt: 'CRT',
     nvg: 'NVG',
     thermal: 'FLIR',
+    anime: 'ANIME',
     noir: 'NOIR',
+    snow: 'SNOW',
   };
   const names = {
-    optical: inherited,
+    optical: 'Normal',
     crt: 'CRT',
     nvg: 'Night vision',
     thermal: 'Thermal',
+    anime: 'Anime',
     noir: 'Noir',
+    snow: 'Snow',
   };
   if (this.visionCurrent) {
     this.visionCurrent.dataset.cockpitVision = next;

src/ui/cockpitTrackingController.js

@@ -194,7 +194,7 @@ export function enter() {
     `${trackLabel} · COURSE ${trackHeading}°`,
   );
   this.updateHud(info, performance.now(), true);
-  this.setVisionMode(this.visionMode);
+  this.setVisionMode(this.getInitialVisionMode());
   this.scheduleContextLayout();
   this.mapViewButton?.focus({ preventScroll: true });
   this.onEntered?.();

src/ui/cyberTheme.test.mjs

@@ -9,6 +9,9 @@ import {
   normalizeHudLayout,
 } from '../hudLayouts.js';
 import { GEV_ACTION_SCHEMAS } from '../voice/actionSchemas.js';
+import { createGevActionRunner } from '../voice/gevActions.js';
+import { StyleManager } from './applicationShell.js';
+import { bindDisplayControls } from './displayControls.js';
 import { VisualSettings } from './visualSettings.js';
 import { STYLES } from './visualPresets.js';
 
@@ -137,6 +140,169 @@ test('non-Cyber style presets and explicit HUD choices remain authoritative', (t
   }
 });
 
+test('leaving Cyber without a preset choice restores the prior visual preset', (t) => {
+  const { owner, hud } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'thermal');
+  assert.equal(owner._preCyberStyle, 'noir');
+  assert.equal(owner._cyberStyleUserSelected, false);
+
+  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  assert.equal(hud.getVariant(), 'operator');
+  assert.equal(owner.activeStyle, 'noir');
+  assert.equal(owner._preCyberStyle, null);
+  assert.equal(owner._cyberStyleUserSelected, false);
+});
+
+test('a preset explicitly selected in Cyber survives exit and resets for re-entry', (t) => {
+  const { owner, hud } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  owner.setStyle('snow', { userInitiated: true });
+  assert.equal(owner.activeStyle, 'snow');
+  assert.equal(owner._preCyberStyle, 'noir');
+  assert.equal(owner._cyberStyleUserSelected, true);
+
+  // Reselecting the active mode must not erase the user's preset intent.
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  assert.equal(owner._preCyberStyle, 'noir');
+  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  assert.equal(hud.getVariant(), 'operator');
+  assert.equal(owner.activeStyle, 'snow');
+  assert.equal(owner._preCyberStyle, null);
+  assert.equal(owner._cyberStyleUserSelected, false);
+
+  // A later untouched Cyber round trip restores the new pre-Cyber preset.
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'thermal');
+  assert.equal(owner._preCyberStyle, 'snow');
+  owner._setHudVariant('minimal', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'snow');
+});
+
+test('an explicit same-value FLIR choice is preserved on Cyber exit', (t) => {
+  const { owner } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+
+  owner.setStyle('thermal', { userInitiated: true });
+  assert.equal(owner.activeStyle, 'thermal');
+  assert.equal(owner._cyberStyleUserSelected, true);
+  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'thermal');
+});
+
+test('an authoritative same-Cyber reset clears local preset ownership', (t) => {
+  const { owner } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  owner.setStyle('snow', { userInitiated: true });
+  assert.equal(owner._cyberStyleUserSelected, true);
+
+  owner._setHudVariant('cyber');
+  assert.equal(owner.activeStyle, 'snow');
+  assert.equal(owner._preCyberStyle, null);
+  assert.equal(owner._cyberStyleUserSelected, false);
+  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'snow');
+});
+
+test('Display and voice HUD routes preserve explicit Cyber entry and exit authority', async (t) => {
+  const makeOwner = () => {
+    const { owner, hud } = styleOwner(t, 'tactical');
+    owner.setStyle('noir');
+    owner.setHudLayout = (...args) =>
+      StyleManager.prototype.setHudLayout.call(owner, ...args);
+    owner.getControlState = () => ({
+      hud: { layout: hud.getVariant(), visible: true },
+    });
+    return { owner, hud };
+  };
+
+  const display = makeOwner();
+  const hudLayout = new EventTarget();
+  hudLayout.value = 'cyber';
+  const snowButton = new EventTarget();
+  snowButton.dataset = { style: 'snow' };
+  const controls = bindDisplayControls({
+    elements: { hudLayout, styleButtons: [snowButton] },
+    actions: {
+      setHudLayout: (value) => display.owner.setHudLayout(value),
+      setStyle: (value) =>
+        display.owner.setStyle(value, { userInitiated: true }),
+    },
+  });
+  hudLayout.dispatchEvent(new Event('change'));
+  assert.equal(display.hud.getVariant(), 'cyber');
+  assert.equal(display.owner.activeStyle, 'thermal');
+  snowButton.dispatchEvent(new Event('click'));
+  assert.equal(display.owner.activeStyle, 'snow');
+  hudLayout.value = 'operator';
+  hudLayout.dispatchEvent(new Event('change'));
+  assert.equal(display.hud.getVariant(), 'operator');
+  assert.equal(display.owner.activeStyle, 'snow');
+  controls.destroy();
+
+  const voice = makeOwner();
+  const eventSource = { addEventListener() {}, removeEventListener() {} };
+  const viewer = {
+    camera: { moveEnd: { addEventListener() {} } },
+    clock: { onTick: { addEventListener: () => () => {} } },
+    scene: { canvas: eventSource },
+  };
+  const runVoiceAction = createGevActionRunner({
+    viewer,
+    styleManager: voice.owner,
+    dataManager: {},
+  });
+  const entered = await runVoiceAction('set_hud', { layout: 'cyber' });
+  assert.equal(entered.ok, true);
+  assert.equal(voice.hud.getVariant(), 'cyber');
+  assert.equal(voice.owner.activeStyle, 'thermal');
+  const selected = await runVoiceAction('set_visual_style', { style: 'snow' });
+  assert.equal(selected.ok, true);
+  assert.equal(voice.owner.activeStyle, 'snow');
+  const exited = await runVoiceAction('set_hud', { layout: 'operator' });
+  assert.equal(exited.ok, true);
+  assert.equal(voice.hud.getVariant(), 'operator');
+  assert.equal(voice.owner.activeStyle, 'snow');
+});
+
+test('scene and share HUD transitions do not restore a local pre-Cyber preset', async (t) => {
+  const { owner, hud } = styleOwner(t, 'tactical');
+  owner.setStyle('noir');
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  owner.setStyle('snow', { userInitiated: true });
+  assert.equal(owner._cyberStyleUserSelected, true);
+
+  await owner.applyVisualState({ style: 'retro', hud: { variant: 'cyber' } });
+  assert.equal(hud.getVariant(), 'cyber');
+  assert.equal(owner.activeStyle, 'retro');
+  assert.equal(owner._preCyberStyle, null);
+  assert.equal(owner._cyberStyleUserSelected, false);
+  owner._setHudVariant('operator', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'retro');
+
+  owner.setStyle('surveillance');
+  owner._setHudVariant('cyber', { applyVisualDefaults: true });
+  assert.equal(owner._preCyberStyle, 'surveillance');
+  owner.setStyle('snow', { userInitiated: true });
+  await owner.restoreShareState({
+    style: 'thermal',
+    hudVariant: 'cyber',
+  });
+  assert.equal(hud.getVariant(), 'cyber');
+  assert.equal(owner.activeStyle, 'thermal');
+  assert.equal(owner._preCyberStyle, null);
+  assert.equal(owner._cyberStyleUserSelected, false);
+  owner._setHudVariant('tactical', { applyVisualDefaults: true });
+  assert.equal(owner.activeStyle, 'thermal');
+  assert.equal(owner._preCyberStyle, null);
+});
+
 test('scene and share restoration override Cyber and preserve restored Cyber parameters', async (t) => {
   const { owner, hud } = styleOwner(t);
   await owner.applyVisualState({ style: 'retro', hud: { variant: 'minimal' } });
@@ -179,6 +345,104 @@ test('Cyber setup uses a compact toolbar icon and highlights the north-up letter
 });
 const cyberStyles = read('./styles/cyber.css');
 
+// Source guards supplement rendered popup/hit-target checks. Inspect one rule
+// at a time so a safe declaration on a child cannot excuse a clipped ancestor.
+function cssRuleBody(styles, selector) {
+  const match = styles.match(new RegExp(`${selector.source}\\s*\\{([^}]+)\\}`));
+  assert.ok(match, `Missing CSS rule: ${selector.source}`);
+  return match[1];
+}
+
+test('Cyber Voice clips its decoration without clipping descendant help and errors', () => {
+  const owner = cssRuleBody(
+    cyberStyles,
+    /:root\[data-ui-theme='cyber'\] #command-dock > #gev-voice-control/,
+  );
+  assert.match(owner, /isolation:\s*isolate;/);
+  assert.match(owner, /overflow:\s*visible;/);
+  assert.match(owner, /clip-path:\s*none;/);
+
+  const decoration = cssRuleBody(
+    cyberStyles,
+    /:root\[data-ui-theme='cyber'\] #command-dock > #gev-voice-control::before/,
+  );
+  assert.match(decoration, /clip-path:\s*polygon\(/);
+  assert.match(decoration, /pointer-events:\s*none;/);
+  assert.match(decoration, /inset:\s*0;/);
+  assert.match(decoration, /z-index:\s*-1;/);
+});
+
+test('Cyber dock pins escape the tray mask and its decoration overrides the legacy arrow geometry', () => {
+  const owner = cssRuleBody(
+    cyberStyles,
+    /:root\[data-ui-theme='cyber'\] #command-dock \.dock-popover-content/,
+  );
+  assert.match(owner, /clip-path:\s*none;/);
+  assert.match(owner, /isolation:\s*isolate;/);
+
+  // Including the tray owners beats #control-panel's more specific old
+  // ::after arrow positioning. Otherwise left:auto can collapse the frame.
+  const decoration = cssRuleBody(
+    cyberStyles,
+    /:root\[data-ui-theme='cyber'\]\s+#command-dock\s+:is\(#location-bar, #control-panel\)\s+\.dock-popover-content::after/,
+  );
+  assert.match(decoration, /inset:\s*0;/);
+  assert.match(decoration, /width:\s*auto;/);
+  assert.match(decoration, /height:\s*auto;/);
+  assert.match(decoration, /transform:\s*none;/);
+  assert.match(decoration, /clip-path:\s*var\(--cyber-panel-frame\);/);
+  assert.match(decoration, /pointer-events:\s*none;/);
+});
+
+test('Cyber lower-left telemetry tracks the credit anchor with clearance for its logo row', () => {
+  const telemetry = cssRuleBody(
+    cyberStyles,
+    /#intel-hud\[data-variant='cyber'\] \.hud-bottom-left/,
+  );
+  const offset = telemetry.match(/bottom:\s*calc\(2vh \+ ([\d.]+)rem\);/);
+  assert.ok(offset, 'telemetry must retain the attribution viewport anchor');
+  const credits = read('./styles/command-dock-trays.css');
+  const creditOffsets = [
+    ...credits.matchAll(
+      /#cesium-credits\s*\{[^}]*bottom:\s*calc\(2vh \+ ([\d.]+)rem\);/g,
+    ),
+  ];
+  assert.ok(creditOffsets.length > 0);
+  for (const credit of creditOffsets) {
+    assert.ok(
+      Number(offset[1]) - Number(credit[1]) >= 2.75,
+      'reserve the 28px logo row, baseline descent and 12px clearance at the 16px root size',
+    );
+  }
+  assert.doesNotMatch(cyberStyles, /\.hud-bottom-left\s*\{\s*bottom:\s*60px;/);
+});
+
+test('shared panel hooks affect only opted-in rail surfaces without overriding disclosure and concealment', () => {
+  const styles = read('./styles/panel-surfaces.css');
+  const rail = cssRuleBody(
+    styles,
+    /:is\(#left-panel-stack, #right-context-rail\)\s+> \[data-panel-id\]:has\(> \[data-panel-surface\]\)/,
+  );
+  assert.match(rail, /pointer-events:\s*auto;/);
+  assert.doesNotMatch(rail, /(?:display|visibility):/);
+  assert.doesNotMatch(
+    styles,
+    /:is\(#left-panel-stack, #right-context-rail\)\s*> \[data-panel-id\]\s*\{/,
+  );
+  assert.match(
+    styles,
+    /\[data-panel-surface\]:not\(\[hidden\]\):not\(dialog:not\(\[open\]\)\)\s*\{\s*display: flex;/,
+  );
+  assert.match(
+    styles,
+    /dialog\[data-panel-surface\]:not\(\[open\]\)\s*\{\s*display: none !important;/,
+  );
+  assert.match(
+    styles,
+    /body:is\(\.ui-clean-view, \.recording-mode\)[^{]+\{[^}]*visibility: hidden !important;[^}]*pointer-events: none !important;/,
+  );
+});
+
 test('Cyber clipped expand controls retain an inset keyboard-focus outline in map and cockpit', () => {
   assert.match(
     cyberStyles,
@@ -254,6 +518,14 @@ test('Cyber side panels share one width and one framed surface material', () =>
     cyberStyles,
     /#pp-toggles\s*> \.pp-header-row\s+\.pp-collapse-btn \{[\s\S]*?width: var\(--cyber-panel-control-size\);[\s\S]*?height: var\(--cyber-panel-control-size\);/,
   );
+  assert.match(
+    cyberStyles,
+    /#right-context-rail\s+:is\(\s*\.cctv-panel-inner,\s*\.weather-panel-inner,\s*\.recent-imagery-panel-inner,\s*\.global-context-panel-inner\s*\) \{\s*padding-right: 8px;/,
+  );
+  assert.match(
+    cyberStyles,
+    /#right-context-rail[\s\S]*?:is\(\s*#cctv-panel,\s*#weather-panel,\s*#recent-imagery-panel,\s*#global-context-panel\s*\)\.collapsed[\s\S]*?> \.panel-header \{[\s\S]*?height: 48px;[\s\S]*?padding: 0 10px 0 14px;/,
+  );
   assert.doesNotMatch(
     cyberStyles,
     /\.cockpit-utility-control\.is-expanded\s*\{[^}]*order:/,
@@ -321,7 +593,15 @@ test('Cyber visual defaults update the style, thermal palette and render state',
 
   assert.equal(owner.stages.thermal.uniforms.palette, 0.42);
   assert.deepEqual(calls, [
-    ['style', 'thermal', { applyPreset: false, revealParameters: false }],
+    [
+      'style',
+      'thermal',
+      {
+        applyPreset: false,
+        revealParameters: false,
+        preserveCyberRestore: true,
+      },
+    ],
     ['sliders', 'thermal', { reveal: false }],
     ['render', 'cyber-visual-defaults'],
   ]);
@@ -330,6 +610,7 @@ test('Cyber visual defaults update the style, thermal palette and render state',
 test('the Display selector, voice schema and final stylesheet expose Cyber', () => {
   const display = read('./templates/display-controls.html');
   const stylesheet = read('../../style.css');
+  const rightRail = read('./rightPanelRail.js');
   const hud = read('../hud.js');
   const detection = read('../data/detection.js');
   const civilRendering = read('../layers/flights/rendering.js');
@@ -415,21 +696,24 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   assert.match(cyberStyles, /--cyber-hud-card-top: max\(100px, 10\.25vh\);/);
   assert.match(
     cyberStyles,
-    /--cyber-left-rail-top: max\([\s\S]*?252px,[\s\S]*?calc\(var\(--cyber-hud-card-top\) \+ 146px\)/,
+    /--cyber-left-rail-top: max\([\s\S]*?220px,[\s\S]*?calc\(var\(--cyber-hud-card-top\) \+ 120px\)/,
   );
   assert.match(
     cyberStyles,
     /\.hud-top-left \{[\s\S]*?top: var\(--cyber-hud-card-top\);/,
   );
-  assert.match(cyberStyles, /\.hud-bottom-left \{\s*bottom: 60px;/);
   assert.match(
     cyberStyles,
-    /#left-panel-stack \{[\s\S]*?top: var\(--cyber-left-rail-top\) !important;/,
+    /#left-panel-stack \{[\s\S]*?top: var\(--cyber-left-rail-top\) !important;[\s\S]*?bottom: calc\(2vh \+ 13rem\);/,
   );
   assert.match(
     cyberStyles,
     /\.hud-left-edge \{\s*top: calc\(var\(--cyber-left-rail-top\) - 18px\);\s*left: 14px;/,
   );
+  assert.match(
+    rightRail,
+    /const leftStackTop = leftStack\?\.getBoundingClientRect\(\)\.top;[\s\S]*?const alignedTop = Number\.isFinite\(leftStackTop\)[\s\S]*?baseTop: alignedTop,/,
+  );
   assert.match(
     cyberStyles,
     /--right-display-collapsed-width: var\(--cyber-panel-collapsed-width\);/,
@@ -453,7 +737,7 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   assert.match(cyberStyles, /#left-panel-stack:has/);
   assert.match(cyberStyles, /left: 54px;/);
   assert.match(cyberStyles, /right: 62px;/);
-  assert.match(cyberStyles, /bottom: calc\(2vh \+ 11rem\);/);
+  assert.match(cyberStyles, /bottom: calc\(2vh \+ 13rem\);/);
   assert.doesNotMatch(cyberStyles, /NAV 01  \/\/  COMMAND BUS  \/\/  VIS 03/);
   assert.match(cyberStyles, /data-layer-id='satellites'/);
   assert.match(cyberStyles, /#search-toggle::before/);
@@ -525,7 +809,7 @@ test('Cyber desktop cockpit collapsed utility frames match the 50px Data Layers
   );
   assert.match(
     desktop,
-    /:root\[data-ui-theme='cyber'\]\s+body\.cockpit-mode\s+\.cockpit-utility-control:not\(\.is-expanded\)\s+\.cockpit-utility-launcher\s*\{\s*height: 50px;\s*min-height: 50px;\s*padding: 8px 18px 10px 24px;/,
+    /:root\[data-ui-theme='cyber'\]\s+body\.cockpit-mode\s+\.cockpit-utility-control:not\(\.is-expanded\)\s+\.cockpit-utility-launcher\s*\{\s*height: 50px;\s*min-height: 50px;\s*padding: 9px 18px 9px 24px;/,
   );
   assert.match(
     desktop,

src/ui/displayBindings.js

@@ -64,7 +64,7 @@ export class DisplayBindings {
       documentRef: document,
       searchInput: this._locationSearch,
       actions: {
-        setStyle: (style) => this.setStyle(style),
+        setStyle: (style) => this.setStyle(style, { userInitiated: true }),
         dismissSearch: () => {
           if (this._locationSearch.classList.contains('expanded')) {
             this._locationSearch.classList.remove('expanded');
@@ -121,7 +121,7 @@ export class DisplayBindings {
         modelModeButtons: this._models3dBtn ? this._models3dModeBtns : [],
       },
       actions: {
-        setStyle: (style) => this.setStyle(style),
+        setStyle: (style) => this.setStyle(style, { userInitiated: true }),
         toggleBloom: () => {
           this.shareLinkManager?.claimRestoreLane?.('visual');
           this._setBloomEnabled(!this.bloomEnabled);

src/ui/shellFacade.js

@@ -655,7 +655,7 @@ export class ShellFacade {
     return this._visualSettings._syncIrBoost(...arguments);
   }
 
-  /** Keep Cockpit's inherited label and restore target aligned with the active map preset. */
+  /** Keep Cockpit's exit restore target aligned with the active map preset. */
   _syncCockpitInheritedStyle() {
     return this._visualSettings._syncCockpitInheritedStyle(...arguments);
   }

src/ui/styles/cyber.css

@@ -185,6 +185,11 @@
     0 8px 20px rgba(0, 0, 0, 0.28);
 }
 
+/* Compact Cyber rails must wrap multi-word actions within their own button. */
+:root[data-ui-theme='cyber'] #scene-panel .scene-controls .scene-btn {
+  white-space: normal;
+}
+
 /* Carry the raised voice-module silhouette across the primary panel system.
    The six-pixel calibration bay is decorative and stays outside panel content. */
 :root[data-ui-theme='cyber']
@@ -224,6 +229,65 @@
   border-bottom: 1px solid rgba(206, 222, 226, 0.08);
 }
 
+/* The right-rail surfaces use different content gutters, but their disclosure
+   controls should still read as one vertical column. Eight pixels here plus
+   the shared two-pixel header inset matches Display's eleven-pixel framed
+   edge inset once the surface border is included. */
+:root[data-ui-theme='cyber']
+  #right-context-rail
+  :is(
+    .cctv-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .global-context-panel-inner
+  ) {
+  padding-right: 8px;
+}
+
+/* Collapsed right-rail panels otherwise inherit different legacy gutters:
+   CCTV lands five pixels low while Context lands four pixels high. Give every
+   compact launcher the same centered 48px content row inside its 1px frame. */
+:root[data-ui-theme='cyber']
+  #right-context-rail
+  :is(
+    #cctv-panel,
+    #weather-panel,
+    #recent-imagery-panel,
+    #global-context-panel
+  ).collapsed
+  > :is(
+    .cctv-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .global-context-panel-inner
+  ) {
+  padding: 0;
+}
+
+:root[data-ui-theme='cyber']
+  #right-context-rail
+  :is(
+    #cctv-panel,
+    #weather-panel,
+    #recent-imagery-panel,
+    #global-context-panel
+  ).collapsed
+  > :is(
+    .cctv-panel-inner,
+    .weather-panel-inner,
+    .recent-imagery-panel-inner,
+    .global-context-panel-inner
+  )
+  > .panel-header {
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  min-height: 48px;
+  margin: 0;
+  padding: 0 10px 0 14px;
+  border-bottom: 0;
+}
+
 :root[data-ui-theme='cyber']
   :is(
     .data-panel-inner,
@@ -924,7 +988,24 @@
   --cyber-voice-wave: 105, 203, 209;
   --cyber-voice-peak: 226, 240, 240;
   --cyber-voice-alert: 196, 84, 84;
-  border-color: rgba(196, 84, 84, 0.58);
+  /* Popups extend above this root. Only its decorative layer may be clipped. */
+  isolation: isolate;
+  overflow: visible;
+  clip-path: none;
+  border-color: transparent;
+  background: none;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+:root[data-ui-theme='cyber'] #command-dock > #gev-voice-control::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  border: 1px solid rgba(196, 84, 84, 0.58);
   border-radius: 0;
   background:
     linear-gradient(180deg, rgba(196, 84, 84, 0.14), transparent 34%),
@@ -1192,8 +1273,30 @@
 
 :root[data-ui-theme='cyber'] #command-dock .dock-popover-content {
   padding-top: 1.65rem;
-  border: 1px solid rgba(196, 84, 84, 0.62);
+  /* The pin straddles the tray edge; keep it outside the decorative mask. */
+  isolation: isolate;
+  clip-path: none;
+  border-color: transparent;
   border-radius: 0;
+  background: none;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+:root[data-ui-theme='cyber']
+  #command-dock
+  :is(#location-bar, #control-panel)
+  .dock-popover-content::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: auto;
+  height: auto;
+  transform: none;
+  pointer-events: none;
+  border: 1px solid rgba(196, 84, 84, 0.62);
   background:
     linear-gradient(135deg, rgba(62, 86, 94, 0.22), transparent 46%),
     linear-gradient(rgba(188, 211, 218, 0.045) 1px, transparent 1px),
@@ -1456,6 +1559,12 @@
   bottom: calc(2vh + 6.5rem);
 }
 
+/* Attribution's logo row extends above its text baseline. Reserve the whole
+   row plus a gap above the dock-relative 2vh + 5rem credit position. */
+#intel-hud[data-variant='cyber'] .hud-bottom-left {
+  bottom: calc(2vh + 7.75rem);
+}
+
 #intel-hud[data-variant='cyber'] .hud-corner {
   position: fixed;
   isolation: isolate;
@@ -1493,12 +1602,21 @@
 
 /* Cyber also owns a distinct desktop composition. Existing components keep
    their controls and semantics, but move onto asymmetric mission-deck rails. */
+@media (min-width: 961px) and (max-height: 649px) {
+  /* The compact-height layout drops the desktop rail composition one pixel
+     below its 650px threshold. Keep the left rail inside the same telemetry
+     and attribution-safe floor while its panel bodies take over scrolling. */
+  :root[data-ui-theme='cyber'] #left-panel-stack {
+    bottom: calc(2vh + 13rem);
+  }
+}
+
 @media (min-width: 961px) and (min-height: 650px) {
   :root[data-ui-theme='cyber'] {
     /* Compose the upper mission card and both panel rails as one compact lane.
        The shared rail anchor keeps expanded left/right panels aligned. */
     --cyber-hud-card-top: max(100px, 10.25vh);
-    --cyber-left-rail-top: max(252px, calc(var(--cyber-hud-card-top) + 146px));
+    --cyber-left-rail-top: max(220px, calc(var(--cyber-hud-card-top) + 120px));
   }
 
   /* Keep the rotated COLL / ONA telemetry in the upper clearance lane. Its
@@ -1510,7 +1628,7 @@
 
   :root[data-ui-theme='cyber'] #left-panel-stack {
     top: var(--cyber-left-rail-top) !important;
-    bottom: calc(2vh + 11rem);
+    bottom: calc(2vh + 13rem);
     left: 54px;
     width: 300px;
     padding-left: 10px;
@@ -1564,7 +1682,7 @@
     .cockpit-utility-launcher {
     height: 50px;
     min-height: 50px;
-    padding: 8px 18px 10px 24px;
+    padding: 9px 18px 9px 24px;
   }
 
   :root[data-ui-theme='cyber']
@@ -1709,12 +1827,6 @@
     right: 28px;
     bottom: 28px;
   }
-
-  /* Match the lower telemetry cards by their top edge while leaving the
-     shorter coordinate card clear of Cesium attribution. */
-  #intel-hud[data-variant='cyber'] .hud-bottom-left {
-    bottom: 60px;
-  }
 }
 
 @media (max-width: 720px) {

src/ui/styles/panel-surfaces.css

@@ -0,0 +1,230 @@
+/* Shared structural hooks for panels admitted by the existing rail owners.
+   Specific legacy component rules retain priority; no panel IDs are registered
+   here. The rail itself remains pointer-transparent over the globe. */
+:is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id]:has(> [data-panel-surface]) {
+  position: relative;
+  inset: auto;
+  flex: 0 0 auto;
+  min-height: 0;
+  pointer-events: auto;
+}
+
+#left-panel-stack
+  > [data-panel-id]:has(> [data-panel-surface]):not(.collapsed) {
+  flex: 0 1 var(--left-panel-allocated-height, auto);
+  height: var(--left-panel-allocated-height, auto);
+  max-height: var(--left-panel-allocated-height, 100%);
+}
+
+#left-panel-stack.layout-tail
+  > [data-panel-id]:has(> [data-panel-surface]):not(.collapsed) {
+  flex: 0 0 var(--left-panel-allocated-height);
+}
+
+#right-context-rail.layout-focus
+  > [data-panel-id]:has(> [data-panel-surface]):not(.collapsed) {
+  flex: 0 1 var(--right-panel-allocated-height);
+  height: var(--right-panel-allocated-height);
+  max-height: var(--right-panel-allocated-height);
+}
+
+/* Opt-in skin: the positioned surface can contain an outward popup. Only the
+   non-interactive decoration is clipped; only data-panel-body scrolls. */
+:root {
+  --panel-surface-font: var(--font-sans);
+  --panel-surface-detail: none;
+  --panel-surface-frame: none;
+  --panel-surface-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
+  --panel-surface-title: var(--text-secondary);
+  --panel-surface-error: #ff9b8e;
+  --panel-surface-width: 300px;
+  --panel-surface-collapsed-width: var(--left-collapsed-width);
+}
+
+:root[data-ui-theme='cyber'] {
+  --panel-surface-font: var(--font-mono);
+  --panel-surface-detail: var(--cyber-panel-surface-detail);
+  --panel-surface-frame: var(--cyber-panel-frame);
+  --panel-surface-shadow: var(--cyber-panel-shadow);
+  --panel-surface-title: var(--cyber-red-bright);
+  --panel-surface-error: var(--cyber-red-bright);
+  --panel-surface-width: var(--cyber-panel-width);
+  --panel-surface-collapsed-width: var(--cyber-panel-collapsed-width);
+}
+
+:root[data-ui-theme='cyber']
+  #right-context-rail
+  > [data-panel-id]:has(> [data-panel-surface]) {
+  --panel-surface-width: var(--cyber-right-panel-width);
+}
+
+:is([data-panel-surface], [data-panel-popup]) {
+  isolation: isolate;
+  min-width: 0;
+  min-height: 0;
+  padding: 12px;
+  border: 1px solid transparent;
+  border-radius: var(--panel-radius);
+  background: none;
+  color: var(--text-primary);
+  font: 12px/1.5 var(--panel-surface-font);
+  overflow: visible;
+}
+
+[data-panel-surface]:not(dialog) {
+  position: relative;
+}
+
+:is([data-panel-surface], [data-panel-popup])::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  z-index: -1;
+  border: 1px solid var(--glass-border);
+  border-radius: inherit;
+  background-color: var(--glass-bg);
+  background-image: var(--panel-surface-detail);
+  box-shadow: var(--panel-surface-shadow);
+  clip-path: var(--panel-surface-frame);
+  pointer-events: none;
+}
+
+/* A closed native dialog must retain the browser's display:none. */
+[data-panel-surface]:not([hidden]):not(dialog:not([open])) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+:is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id]:has(> [data-panel-surface]) {
+  width: min(100%, var(--panel-expanded-width, var(--panel-surface-width)));
+  background: none;
+  box-shadow: none;
+}
+
+:is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id]
+  > [data-panel-surface] {
+  height: 100%;
+  max-height: 100%;
+}
+
+:is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id].collapsed:has(> [data-panel-surface]) {
+  width: min(
+    100%,
+    var(--panel-collapsed-width, var(--panel-surface-collapsed-width))
+  );
+}
+
+#right-context-rail[data-rail-measuring]
+  > [data-panel-id]
+  > [data-panel-surface] {
+  height: auto;
+  max-height: none;
+}
+
+[data-panel-header] {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 8px;
+  min-height: 30px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.panel-surface-title {
+  flex: 1;
+  min-width: 0;
+  color: var(--panel-surface-title);
+  font: 600 11px/1.4 var(--font-mono);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  overflow-wrap: anywhere;
+}
+
+[data-panel-body] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--glass-border-hover) transparent;
+  /* Keep an inset focus ring inside the intentional scrolling boundary. */
+  padding: 3px;
+}
+
+.panel-surface-control {
+  min-width: 0;
+  min-height: 30px;
+  max-width: 100%;
+  padding: 5px 8px;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--btn-radius);
+  background: var(--bg-dark);
+  color: var(--text-primary);
+  font: inherit;
+  accent-color: var(--accent);
+}
+
+button.panel-surface-control {
+  cursor: pointer;
+}
+
+.panel-surface-control:hover:not(:disabled):not([aria-disabled='true']) {
+  border-color: var(--glass-border-hover);
+  background: var(--accent-dim);
+}
+
+.panel-surface-control:focus-visible {
+  outline: 2px solid var(--text-primary);
+  outline-offset: -3px;
+}
+
+.panel-surface-control:is(:disabled, [aria-disabled='true']) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.panel-surface-error,
+.panel-surface-control[aria-invalid='true'] {
+  color: var(--panel-surface-error);
+  border-color: var(--panel-surface-error);
+}
+
+[data-panel-popup] {
+  position: absolute;
+  z-index: 5;
+  /* The owner supplies placement, width, collision handling and disclosure. */
+}
+
+[data-panel-surface].collapsed > :is([data-panel-body], [data-panel-popup]),
+[data-panel-id].collapsed
+  > [data-panel-surface]
+  > :is([data-panel-body], [data-panel-popup]),
+:is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id]:has(> [data-panel-surface])[hidden],
+:is(
+  [data-panel-surface],
+  [data-panel-header],
+  [data-panel-body],
+  [data-panel-popup]
+)[hidden],
+dialog[data-panel-surface]:not([open]) {
+  display: none !important;
+}
+
+/* Conforming additions follow the same concealment policy as existing chrome.
+   Cockpit continues to own rail/dock placement and exclusions in cockpit.css. */
+body:is(.ui-clean-view, .recording-mode)
+  :is([data-panel-surface], [data-panel-popup]),
+body:is(.ui-clean-view, .recording-mode)
+  :is(#left-panel-stack, #right-context-rail)
+  > [data-panel-id]:has(> [data-panel-surface]) {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}

src/ui/visualSettings.js

@@ -196,6 +196,8 @@ export class VisualSettings {
       releaseRender: services.releaseContinuousRender,
     });
     this.activeStyle = 'normal';
+    this._preCyberStyle = null;
+    this._cyberStyleUserSelected = false;
     document.documentElement.dataset.gevStyle = this.activeStyle;
     this._detectionUserOverridden = false;
     this._cockpitVisionMode = 'optical';
@@ -341,23 +343,15 @@ export class VisualSettings {
       );
     }
     if (next === 'optical') {
-      applyCockpitVisionStageIntensities(
-        this.stages,
-        next,
-        this._cockpitVisionRestore,
-      );
+      applyCockpitVisionStageIntensities(this.stages, next);
       this._syncStagesEnabledFromIntensity();
       this._cockpitVisionMode = next;
       this._syncIrBoost();
-      this._updateSliderPanel(this.activeStyle, { reveal: false });
+      this._updateSliderPanel(null, { reveal: false });
       this._revealCockpitStyleParameters({ openDisplay: revealParameters });
       return;
     }
-    const target = applyCockpitVisionStageIntensities(
-      this.stages,
-      next,
-      this._cockpitVisionRestore,
-    );
+    const target = applyCockpitVisionStageIntensities(this.stages, next);
     this._syncStagesEnabledFromIntensity();
     this._cockpitVisionMode = next;
     this._syncIrBoost(); // Cockpit vision override ('nvg'/'thermal' boost; CRT/NOIR clear)
@@ -369,8 +363,11 @@ export class VisualSettings {
     const cockpitMode = this.cockpitView?.active
       ? this._cockpitVisionMode
       : null;
-    const effective =
-      cockpitMode && cockpitMode !== 'optical' ? cockpitMode : this.activeStyle;
+    const effective = cockpitMode
+      ? cockpitMode === 'optical'
+        ? 'normal'
+        : cockpitMode
+      : this.activeStyle;
     const irBoost =
       effective === 'surveillance' ||
       effective === 'thermal' ||
@@ -384,7 +381,7 @@ export class VisualSettings {
       new CustomEvent('gev:vision-change', {
         detail: {
           style: effective,
-          cockpit: Boolean(cockpitMode && cockpitMode !== 'optical'),
+          cockpit: Boolean(cockpitMode),
         },
       }),
     );
@@ -614,6 +611,18 @@ export class VisualSettings {
     const previousVariant = this.hud.getVariant();
     this.hud.setVariant(variantName);
     const nextVariant = this.hud.getVariant();
+    const enteredCyber = previousVariant !== 'cyber' && nextVariant === 'cyber';
+    const leftCyber = previousVariant === 'cyber' && nextVariant !== 'cyber';
+    if (!applyVisualDefaults) {
+      // Scene/share/programmatic state is authoritative even when it reapplies
+      // the current Cyber variant. Do not let an older explicit entry restore
+      // stale local preset memory on the next user-selected exit.
+      this._preCyberStyle = null;
+      this._cyberStyleUserSelected = false;
+    } else if (enteredCyber) {
+      this._preCyberStyle = this.activeStyle;
+      this._cyberStyleUserSelected = false;
+    }
     if (this._hudLayoutSelect && this._hudLayoutSelect.value !== nextVariant) {
       this._hudLayoutSelect.value = nextVariant;
     }
@@ -623,6 +632,21 @@ export class VisualSettings {
       { explicit: applyVisualDefaults },
     );
     if (visualDefaults) this._applyCyberVisualDefaults(visualDefaults);
+    if (leftCyber) {
+      const restoreStyle =
+        applyVisualDefaults && !this._cyberStyleUserSelected
+          ? this._preCyberStyle
+          : null;
+      this._preCyberStyle = null;
+      this._cyberStyleUserSelected = false;
+      if (restoreStyle && restoreStyle !== this.activeStyle) {
+        this.setStyle(restoreStyle, {
+          applyPreset: false,
+          revealParameters: false,
+          preserveCyberRestore: true,
+        });
+      }
+    }
     this._syncCyberSonarControl();
     this._syncShareState();
     this._scheduleAdaptivePanelLayout({ settle: true });
@@ -632,6 +656,7 @@ export class VisualSettings {
     this.setStyle(style, {
       applyPreset: false,
       revealParameters: false,
+      preserveCyberRestore: true,
     });
     const thermalUniforms = this.stages?.thermal?.uniforms;
     if (!thermalUniforms || thermalUniforms.palette === undefined) return;
@@ -1509,10 +1534,24 @@ export class VisualSettings {
       applyPreset = true,
       revealParameters = applyPreset,
       restore = false,
+      userInitiated = false,
+      preserveCyberRestore = false,
     } = {},
   ) {
     const { setDetectionStyle } = this.services;
     if (!restore) this.shareLinkManager?.claimRestoreLane?.('visual');
+    if (this.hud.getVariant() === 'cyber') {
+      if (userInitiated) {
+        // A direct preset choice owns the active style even when it selects the
+        // same value as Cyber's automatic FLIR default.
+        this._cyberStyleUserSelected = true;
+      } else if (!preserveCyberRestore) {
+        // Scene/share/reset state is authoritative and must not be overwritten
+        // by a remembered local Cyber entry when the user later exits.
+        this._preCyberStyle = null;
+        this._cyberStyleUserSelected = false;
+      }
+    }
     if (styleName === this.activeStyle) {
       if (revealParameters && styleName !== 'normal')
         this._revealStyleParameters();

src/voice/gevActions.js

@@ -688,7 +688,7 @@ export function createGevActionRunner({
       const style = normalizeStyle(args.style);
       if (!style)
         throw new Error(`Unknown visual style: ${args.style || 'missing'}`);
-      styleManager.setStyle(style);
+      styleManager.setStyle(style, { userInitiated: true });
       return { ok: true, action: 'set_visual_style', style };
     }
 

style.css

@@ -23,4 +23,5 @@
 @import './src/ui/styles/provider-settings.css';
 
 @import './src/ui/styles/weather.css';
+@import './src/ui/styles/panel-surfaces.css';
 @import './src/ui/styles/cyber.css';