Merge main into PR #621 (ChatGPT OAuth for Realtime voice)

Resolve conflicts with the voice-core captions, panel resize and MCP
panel key changes by keeping both sides.

src/ui/applicationShell.js

@@ -15,6 +15,7 @@ import { readShellElements } from './shellElements.js';
 import { CockpitCoordinator } from './cockpitCoordinator.js';
 import { ContextControls } from './context.js';
 import { CctvControls } from './cctv.js';
+import { StreetLevelControls } from './streetLevelControls.js';
 import { RadioControls } from './radio.js';
 import { LocalSdrControls } from './localSdrControls.js';
 import { LocationNavigation } from './locationNavigation.js';
@@ -104,6 +105,7 @@ export class StyleManager extends ShellFacade {
         _setRadioDisclosure: (...args) => this._setRadioDisclosure(...args),
         _syncCctvPanelViewport: (...args) =>
           this._syncCctvPanelViewport(...args),
+        _onPanelResized: (...args) => this._onPanelResized(...args),
         _syncContextRadioLauncherState: (...args) =>
           this._syncContextRadioLauncherState(...args),
         _showToast: (...args) => this._showToast(...args),
@@ -569,6 +571,7 @@ export class StyleManager extends ShellFacade {
     this._initRightPanelAdaptiveLayout();
     this._initRadioPanel();
     this._initCctvPanel();
+    this._initStreetLevelPanel();
     this._initGlobalContextPanel();
     this._initLocationBar();
     this._initShareButton();
@@ -930,6 +933,46 @@ export class StyleManager extends ShellFacade {
     return this._runExplicitNavigation('camera', () => focus(cameraId));
   }
 
+  /** Compose the Street Level panel controls from its layer and application actions. */
+  _initStreetLevelPanel() {
+    const { streetLevelLayer } = this.services;
+    this._streetLevelControls?.destroy();
+    this._streetLevelControls = null;
+    if (!this._streetLevelPanel || !streetLevelLayer) return;
+    // Photo framing and FOLLOW release tracking like any explicit flight.
+    streetLevelLayer.attachNavigation?.({
+      run: (noun, move) => this._runExplicitNavigation(noun, move),
+      begin: (noun) => this._beginDeferredNavigation(noun),
+      reassert: (generation) => this._reassertNavigationHandoff(generation),
+      subscribeHandoff: (listener) =>
+        this._navigation.subscribeCameraHandoff(listener),
+    });
+    this._streetLevelControls = new StreetLevelControls({
+      root: this._streetLevelPanel,
+      layer: streetLevelLayer,
+      actions: {
+        isEnabled: () => this._dataManager?.isEnabled('street-level') === true,
+        setEnabled: (enabled) =>
+          this._dataManager?.setEnabled('street-level', enabled, {
+            origin: 'user',
+          }),
+        setParams: (params, options) =>
+          this._dataManager?.setLayerParams('street-level', params, options),
+        setPanelCollapsed: (collapsed, options) =>
+          this.setPanelCollapsed('street-level-panel', collapsed, options),
+        dockPanel: () => this._panelChrome.dockPanel('street-level-panel'),
+        showToast: (message) => this._showToast(message),
+        // Lets the panel open for a user, voice or tool switch-on, not a restore.
+        subscribeEnableRequests: (listener) =>
+          this._dataManager?.subscribeVisibilityRequests?.((change) => {
+            if (change?.layerId === 'street-level' && change.enabled)
+              listener(change.origin);
+          }) || null,
+      },
+    });
+    this._streetLevelControls.connect();
+  }
+
   /** Compose camera panel controls from the existing camera port and application actions. */
   _initCctvPanel() {
     const { cctvLayer } = this.services;
@@ -1473,6 +1516,13 @@ export class StyleManager extends ShellFacade {
     this._initCockpitDisplayPortal();
   }
 
+  /** A portable panel was resized or docked: refit any viewport inside it. */
+  _onPanelResized(panelId) {
+    if (panelId === 'cctv-panel') this._syncCctvPanelViewport();
+    if (panelId === 'street-level-panel')
+      this._streetLevelControls?.onPanelResized();
+  }
+
   /**
    * Recalculates the CCTV panel max-height based on its current top position
    * and the window height, enabling internal scroll without viewport overflow.
@@ -1535,6 +1585,8 @@ export class StyleManager extends ShellFacade {
     this._cameraOrientationControls?.destroy();
     this._clearLayersControl?.destroy();
     this._cctvControls?.destroy();
+    this.services?.streetLevelLayer?.attachNavigation?.(null);
+    this._streetLevelControls?.destroy();
     this._radioControls?.destroy();
     this._localSdrControls?.destroy();
     this._cockpitCoordinator.stop();

src/ui/chipGroup.js

@@ -28,6 +28,17 @@ export function syncChipGroup(container, chips = [], { before = null } = {}) {
       `data-toggle-chip chip-${state}${chip.active ? ' active' : ''}`,
     );
     set(button, 'textContent', chip.label);
+    // Optional per-chip colour; CSS decides how it is used.
+    const color = chip.color || '';
+    if ((button.dataset.chipColor || '') !== color) {
+      if (color) {
+        button.style.setProperty('--chip-color', color);
+        button.dataset.chipColor = color;
+      } else {
+        button.style.removeProperty('--chip-color');
+        delete button.dataset.chipColor;
+      }
+    }
     set(button, 'title', chip.title || '');
     set(button, 'disabled', Boolean(chip.disabled));
     attribute(button, 'aria-pressed', String(Boolean(chip.active)));

src/ui/chipGroup.test.mjs

@@ -31,3 +31,24 @@ test('keyed chips retain focus, reflect state, reorder and remove without redund
   syncChipGroup(f.container, []);
   assert.deepEqual(f.container.children, [legend]);
 });
+
+test('a chip colour is set once, changed, and cleared through a CSS variable', () => {
+  const f = railFixture(() => {});
+  const calls = [];
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  const chip = f.container.children[0];
+  chip.style.setProperty = (name, value) => calls.push(['set', name, value]);
+  chip.style.removeProperty = (name) => calls.push(['remove', name]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  assert.deepEqual(calls, [], 'a chip without a colour never touches style');
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#05cb63' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#05cb63' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M', color: '#a66bff' }]);
+  syncChipGroup(f.container, [{ id: 'm', label: 'M' }]);
+  assert.deepEqual(calls, [
+    ['set', '--chip-color', '#05cb63'],
+    ['set', '--chip-color', '#a66bff'],
+    ['remove', '--chip-color'],
+  ]);
+  assert.equal(chip.dataset.chipColor, undefined);
+});

src/ui/cyberPanelDisclosure.test.mjs

@@ -85,3 +85,16 @@ test('non-Cyber explicit panels and restored preferences retain their existing p
     } finally { globalThis.document = prior; }
   }
 });
+
+test('opening a floating Cyber window leaves the docked rail panels open', () => {
+  const f = fixture(), prior = globalThis.document;
+  globalThis.document = f.doc;
+  try {
+    f.owner.setPanelCollapsed('pp-toggles', false, { explicit: true });
+    f.cctv.classList.add('panel-floating');
+    f.owner.setPanelCollapsed('cctv-panel', false, { explicit: true });
+    assert.equal(f.cctv.classList.contains('collapsed'), false);
+    assert.equal(f.display.classList.contains('collapsed'), false, 'DISPLAY stays open');
+    assert.ok(!f.saved.some(([id, collapsed]) => id === 'pp-toggles' && collapsed));
+  } finally { globalThis.document = prior; }
+});

src/ui/cyberTheme.test.mjs

@@ -520,11 +520,11 @@ test('Cyber side panels share one width and one framed surface material', () =>
   );
   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;/,
+    /#right-context-rail\s+:is\(\s*\.cctv-panel-inner,\s*\.weather-panel-inner,\s*\.recent-imagery-panel-inner,\s*\.street-level-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;/,
+    /#right-context-rail[\s\S]*?:is\(\s*#cctv-panel,\s*#weather-panel,\s*#recent-imagery-panel,\s*#street-level-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,
@@ -712,7 +712,7 @@ test('the Display selector, voice schema and final stylesheet expose Cyber', ()
   );
   assert.match(
     rightRail,
-    /const leftStackTop = leftStack\?\.getBoundingClientRect\(\)\.top;[\s\S]*?const alignedTop = Number\.isFinite\(leftStackTop\)[\s\S]*?baseTop: alignedTop,/,
+    /const leftStackTop = settledLeftRailTop\([\s\S]*?const alignedTop = Number\.isFinite\(leftStackTop\)[\s\S]*?baseTop: alignedTop,/,
   );
   assert.match(
     cyberStyles,

src/ui/layerPanel.js

@@ -32,7 +32,7 @@ const PANEL_GROUPS = [
   },
   {
     label: 'Cameras',
-    ids: ['cctv', 'recent-imagery'],
+    ids: ['cctv', 'recent-imagery', 'street-level'],
   },
   {
     label: 'Infrastructure',
@@ -73,6 +73,7 @@ const PANEL_LABELS = {
   'ais-live-vessels': 'Live Vessels',
   bikeshare: 'Bike Share',
   cctv: 'Cameras',
+  'street-level': 'Street Level',
   'alpr-cameras': 'Mapped ALPR Cameras',
   'local-datacenters': 'Data Centers',
   'local-firms': 'Active Fires',

src/ui/panelChrome.js

@@ -14,6 +14,7 @@ const SHARE_PANEL_STATE_SPECS = Object.freeze([
   { id: 'cctv-panel' },
   { id: 'weather-panel' },
   { id: 'recent-imagery-panel' },
+  { id: 'street-level-panel' },
   { id: 'radio-panel' },
   { id: 'scene-panel' },
   { id: 'global-context-panel' },
@@ -26,6 +27,7 @@ const COCKPIT_ENTRY_COLLAPSE_PANEL_IDS = Object.freeze([
   'cctv-panel',
   'weather-panel',
   'recent-imagery-panel',
+  'street-level-panel',
   'scene-panel',
   'pp-toggles',
   'global-context-panel',
@@ -61,6 +63,7 @@ export class PanelChrome {
       layoutRightPanels: () => this._layoutRightPanels(),
       syncCctvPanelViewport: () => this._syncCctvPanelViewport(),
       showToast: (message) => this._showToast(message),
+      onPanelResized: (panelId) => this._onPanelResized(panelId),
     });
     this._panelLayout = new PanelLayoutController({
       readHud: () => ({
@@ -144,6 +147,7 @@ export class PanelChrome {
     this._initCommandDockPins();
     this._initCommandDockTrayMetrics();
     this._maybeNotifyLayoutReset();
+    this._panelPosition._initPanelDrag();
   }
 
   _collapsePanelOnEscape(event, panelId) {
@@ -288,6 +292,7 @@ export class PanelChrome {
       'cctv-panel',
       'weather-panel',
       'recent-imagery-panel',
+      'street-level-panel',
       'global-context-panel',
     ].includes(panelEl?.id);
     const collapsed = panelEl.classList.contains('collapsed');
@@ -383,6 +388,11 @@ export class PanelChrome {
     this.shareLinkManager?.onPanelStateChange?.();
   }
 
+  /** @returns {boolean} Whether the panel was floating and is now docked. */
+  dockPanel(panelId) {
+    return this._panelPosition?.dockPanel?.(panelId) === true;
+  }
+
   setPanelCollapsed(
     panelId,
     collapsed,
@@ -405,17 +415,20 @@ export class PanelChrome {
       panelEl.classList.contains('cyber-accordion-collapsed');
     // A user opening a Cyber rail panel owns the whole accordion, including
     // peers that were only presentation-collapsed during a saved-state restore.
+    // A floating window is outside the accordion both ways.
     if (
       explicit &&
       !restore &&
       !nextCollapsed &&
       document.documentElement?.dataset.uiTheme === 'cyber' &&
-      panelEl.parentElement === this._rightPanelStack
+      panelEl.parentElement === this._rightPanelStack &&
+      !panelEl.classList.contains('panel-floating')
     ) {
       for (const peer of this._rightPanelStack.children) {
         if (
           peer !== panelEl &&
           peer.matches('[data-panel-id]') &&
+          !peer.classList.contains('panel-floating') &&
           !peer.hidden
         ) {
           this.setPanelCollapsed(peer.id, true, {
@@ -543,6 +556,10 @@ export class PanelChrome {
       }
     }
     panelEl.classList.toggle('collapsed', nextCollapsed);
+    // Only a user's own collapse docks a floating window; restores, cockpit
+    // entry and accordion peers keep its place.
+    if (explicit && !restore)
+      this._panelPosition?.onPanelCollapsed?.(panelId, nextCollapsed);
     if (
       nextCollapsed &&
       this.cockpitView?.active &&

src/ui/panelDock.test.mjs

@@ -0,0 +1,580 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { PanelPositionControls } from './panelPositionControls.js';
+
+/** Just enough DOM for PanelPositionControls' portable-panel paths. */
+function fixture() {
+  const saved = Object.fromEntries(
+    ['document', 'window', 'localStorage', 'performance', 'ResizeObserver'].map(
+      (key) => [key, globalThis[key]],
+    ),
+  );
+  const store = new Map();
+  const element = () => {
+    const classes = new Set();
+    const style = {
+      removeProperty(name) {
+        // Like CSSStyleDeclaration: 'z-index' also clears style.zIndex.
+        delete this[name];
+        delete this[name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())];
+      },
+      getPropertyValue: () => '',
+    };
+    return Object.assign(new EventTarget(), {
+      id: '',
+      style,
+      dataset: {},
+      classList: {
+        add: (...names) => names.forEach((name) => classes.add(name)),
+        remove: (...names) => names.forEach((name) => classes.delete(name)),
+        contains: (name) => classes.has(name),
+        toggle: (name, on) => (on ? classes.add(name) : classes.delete(name)),
+      },
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      closest: () => null,
+      setAttribute() {},
+      removeAttribute() {},
+      appendChild() {},
+      remove() {},
+      getBoundingClientRect: () => ({
+        left: 100,
+        top: 80,
+        width: 360,
+        height: 420,
+        right: 460,
+        bottom: 500,
+      }),
+    });
+  };
+  globalThis.document = Object.assign(new EventTarget(), {
+    getElementById: () => null,
+    querySelectorAll: () => [],
+    createElement: () => element(),
+  });
+  globalThis.window = Object.assign(new EventTarget(), {
+    innerWidth: 1440,
+    innerHeight: 900,
+  });
+  globalThis.localStorage = {
+    getItem: (key) => (store.has(key) ? store.get(key) : null),
+    setItem: (key, value) => store.set(key, String(value)),
+    removeItem: (key) => store.delete(key),
+  };
+  const calls = { layout: 0, resized: [] };
+  const owner = new PanelPositionControls({
+    syncPanelCollapseButton() {},
+    layoutRightPanels: () => calls.layout++,
+    syncCctvPanelViewport() {},
+    showToast() {},
+    onPanelResized: (id) => calls.resized.push(id),
+  });
+  return {
+    owner,
+    element,
+    store,
+    calls,
+    restore() {
+      owner.destroy();
+      Object.assign(globalThis, saved);
+    },
+  };
+}
+
+function floatingPanel(f, id, { dockOnCollapse = false } = {}) {
+  const panel = f.element();
+  const handle = f.element();
+  panel.id = id;
+  panel.classList.add('panel-floating', 'panel-draggable');
+  Object.assign(panel.style, {
+    left: '100px',
+    top: '80px',
+    width: '360px',
+    height: '420px',
+  });
+  f.store.set(`godsEyeView.v8.panelPos.${id}`, '{"floating":true}');
+  f.owner._portablePanels.set(id, {
+    panel,
+    min: { width: 320, height: 280 },
+    dockOnCollapse,
+  });
+  f.owner._makePanelDraggable(id, panel, handle);
+  return { panel, handle };
+}
+
+/** A left-button header press; `timeStamp` is a read-only getter on Event. */
+function press(handle, { timeStamp, clientX = 200, clientY = 90 }) {
+  const event = new Event('pointerdown', { cancelable: true });
+  for (const [key, value] of Object.entries({
+    button: 0,
+    clientX,
+    clientY,
+    timeStamp,
+  }))
+    Object.defineProperty(event, key, { value });
+  handle.dispatchEvent(event);
+}
+
+test('dockPanel returns a floating window to its rail and forgets its place', () => {
+  const f = fixture();
+  try {
+    const { panel } = floatingPanel(f, 'street-level-panel');
+    assert.equal(f.owner.dockPanel('street-level-panel'), true);
+    assert.equal(panel.classList.contains('panel-floating'), false);
+    assert.equal(panel.style.width, undefined);
+    assert.equal(panel.style.height, undefined);
+    assert.equal(
+      f.store.has('godsEyeView.v8.panelPos.street-level-panel'),
+      false,
+    );
+    assert.deepEqual(f.calls.resized, ['street-level-panel']);
+    assert.equal(
+      f.owner.dockPanel('street-level-panel'),
+      false,
+      'already docked',
+    );
+    assert.equal(f.owner.dockPanel('unknown'), false);
+  } finally {
+    f.restore();
+  }
+});
+
+test('only a dockOnCollapse panel docks when collapsed, and only on collapse', () => {
+  const f = fixture();
+  try {
+    const street = floatingPanel(f, 'street-level-panel', {
+      dockOnCollapse: true,
+    });
+    const cctv = floatingPanel(f, 'cctv-panel');
+    f.owner.onPanelCollapsed('street-level-panel', false);
+    assert.equal(
+      street.panel.classList.contains('panel-floating'),
+      true,
+      'expanding keeps it',
+    );
+    f.owner.onPanelCollapsed('cctv-panel', true);
+    assert.equal(
+      cctv.panel.classList.contains('panel-floating'),
+      true,
+      'CCTV did not opt in',
+    );
+    f.owner.onPanelCollapsed('street-level-panel', true);
+    assert.equal(street.panel.classList.contains('panel-floating'), false);
+  } finally {
+    f.restore();
+  }
+});
+
+test('two quick header presses snap a floating panel back; slow or distant ones do not', () => {
+  const f = fixture();
+  try {
+    const { panel, handle } = floatingPanel(f, 'cctv-panel');
+    press(handle, { timeStamp: 1000 });
+    window.dispatchEvent(new Event('pointerup'));
+    press(handle, { timeStamp: 1600 });
+    window.dispatchEvent(new Event('pointerup'));
+    assert.equal(
+      panel.classList.contains('panel-floating'),
+      true,
+      '600 ms apart is two clicks',
+    );
+    press(handle, { timeStamp: 1700, clientX: 260 });
+    window.dispatchEvent(new Event('pointerup'));
+    assert.equal(
+      panel.classList.contains('panel-floating'),
+      true,
+      '60 px apart is two clicks',
+    );
+    press(handle, { timeStamp: 1900, clientX: 262 });
+    assert.equal(
+      panel.classList.contains('panel-floating'),
+      false,
+      'a double press docks',
+    );
+  } finally {
+    f.restore();
+  }
+});
+
+test('a restored floating window stacks above the docked DISPLAY panel (z 110)', () => {
+  const f = fixture();
+  try {
+    const panel = f.element();
+    panel.id = 'street-level-panel';
+    f.owner._portablePanels.set('street-level-panel', {
+      panel,
+      min: { width: 320, height: 280 },
+      dockOnCollapse: true,
+    });
+    f.store.set(
+      'godsEyeView.v8.panelPos.street-level-panel',
+      JSON.stringify({
+        left: 900,
+        top: 200,
+        width: 420,
+        height: 600,
+        floating: true,
+      }),
+    );
+    f.owner._restorePanelPosition('street-level-panel', panel);
+    assert.equal(panel.classList.contains('panel-floating'), true);
+    assert.ok(Number(panel.style.zIndex) > 110, `z ${panel.style.zIndex}`);
+    f.owner.dockPanel('street-level-panel');
+    assert.equal(panel.style.zIndex, undefined, 'docking drops the promotion');
+  } finally {
+    f.restore();
+  }
+});
+
+test('renumbering the z ladder never drops a window below the docked panels', () => {
+  const f = fixture();
+  try {
+    const windows = [f.element(), f.element(), f.element()];
+    windows.forEach((node, index) => {
+      node.classList.add('panel-draggable');
+      node.style.zIndex = String(130 + index);
+    });
+    globalThis.document.querySelectorAll = (selector) =>
+      selector === '.panel-draggable' ? windows : [];
+    f.owner._panelZCounter = 139;
+    const top = f.element();
+    top.classList.add('panel-draggable');
+    f.owner._promotePanelZ(top);
+    for (const node of [...windows, top])
+      assert.ok(Number(node.style.zIndex) > 110, `z ${node.style.zIndex}`);
+    assert.ok(Number(top.style.zIndex) > Number(windows[2].style.zIndex));
+  } finally {
+    f.restore();
+  }
+});
+
+/** A portable panel still in its rail, with its header and resize handles. */
+function dockedPanel(f, id) {
+  const panel = f.element();
+  const handle = f.element();
+  panel.id = id;
+  const portable = { panel, min: { width: 320, height: 280 } };
+  f.owner._portablePanels.set(id, portable);
+  f.owner._makePanelDraggable(id, panel, handle);
+  f.owner._makePanelResizable(id, panel, portable.min);
+  const edges = Object.fromEntries(
+    f.owner._resizeHandles.map((node) => [node.dataset.dir, node]),
+  );
+  return { panel, handle, edges };
+}
+
+/** A pointer event; `pointerType` defaults to what a mouse reports. */
+function pointer(target, type, { x = 200, y = 90, pointerType = 'mouse' }) {
+  const event = new Event(type, { cancelable: true });
+  for (const [key, value] of Object.entries({
+    button: 0,
+    clientX: x,
+    clientY: y,
+    pointerType,
+  }))
+    Object.defineProperty(event, key, { value });
+  target.dispatchEvent(event);
+  return event;
+}
+
+const POSITION_KEY = 'godsEyeView.v8.panelPos.street-level-panel';
+
+test('a click on a docked panel’s resize edge leaves it docked and stores nothing', () => {
+  const f = fixture();
+  try {
+    const { panel, edges } = dockedPanel(f, 'street-level-panel');
+    pointer(edges.w, 'pointerdown', { x: 101, y: 200 });
+    pointer(window, 'pointermove', { x: 103, y: 201 }); // a jittery click
+    pointer(window, 'pointerup', { x: 103, y: 201 });
+    assert.equal(panel.classList.contains('panel-floating'), false);
+    assert.equal(panel.style.width, undefined, 'no size was pinned');
+    assert.equal(f.store.has(POSITION_KEY), false);
+    assert.deepEqual(f.calls.resized, []);
+
+    // A real resize still lifts it out and remembers the window.
+    pointer(edges.w, 'pointerdown', { x: 101, y: 200 });
+    pointer(window, 'pointermove', { x: 61, y: 200 });
+    pointer(window, 'pointerup', { x: 61, y: 200 });
+    assert.equal(panel.classList.contains('panel-floating'), true);
+    assert.equal(JSON.parse(f.store.get(POSITION_KEY)).floating, true);
+  } finally {
+    f.restore();
+  }
+});
+
+test('a touch on the header or an edge does not lift the panel, and the rail can still scroll', () => {
+  const f = fixture();
+  try {
+    const { panel, handle, edges } = dockedPanel(f, 'street-level-panel');
+    const press = pointer(handle, 'pointerdown', { pointerType: 'touch' });
+    assert.equal(press.defaultPrevented, false, 'the swipe can scroll');
+    pointer(window, 'pointermove', { y: 190, pointerType: 'touch' });
+    pointer(window, 'pointerup', { y: 190, pointerType: 'touch' });
+    pointer(edges.s, 'pointerdown', { y: 500, pointerType: 'touch' });
+    pointer(window, 'pointermove', { y: 600, pointerType: 'touch' });
+    pointer(window, 'pointerup', { y: 600, pointerType: 'touch' });
+    assert.equal(panel.classList.contains('panel-floating'), false);
+    assert.equal(f.store.has(POSITION_KEY), false);
+  } finally {
+    f.restore();
+  }
+});
+
+test('a pointercancel mid-drag saves nothing and puts the panel back', () => {
+  const f = fixture();
+  try {
+    const { panel, handle, edges } = dockedPanel(f, 'street-level-panel');
+    pointer(handle, 'pointerdown', {});
+    pointer(window, 'pointermove', { x: 260, y: 140 });
+    assert.equal(panel.classList.contains('panel-floating'), true, 'lifted');
+    pointer(window, 'pointercancel', { x: 260, y: 140 });
+    assert.equal(panel.classList.contains('panel-floating'), false, 'docked');
+    assert.equal(f.store.has(POSITION_KEY), false);
+
+    pointer(edges.e, 'pointerdown', { x: 459 });
+    pointer(window, 'pointermove', { x: 520 });
+    pointer(window, 'pointercancel', { x: 520 });
+    assert.equal(panel.classList.contains('panel-floating'), false);
+    assert.equal(f.store.has(POSITION_KEY), false);
+  } finally {
+    f.restore();
+  }
+});
+
+test('a pointercancel while dragging a floating window returns it to where it was', () => {
+  const f = fixture();
+  try {
+    const { panel, handle } = floatingPanel(f, 'cctv-panel');
+    const stored = f.store.get('godsEyeView.v8.panelPos.cctv-panel');
+    pointer(handle, 'pointerdown', {});
+    pointer(window, 'pointermove', { x: 400, y: 300 });
+    assert.notEqual(panel.style.left, '100px', 'it moved');
+    pointer(window, 'pointercancel', { x: 400, y: 300 });
+    assert.equal(panel.style.left, '100px');
+    assert.equal(panel.style.top, '80px');
+    assert.equal(panel.classList.contains('panel-floating'), true);
+    assert.equal(f.store.get('godsEyeView.v8.panelPos.cctv-panel'), stored);
+  } finally {
+    f.restore();
+  }
+});
+
+test('a header press that travels under the drag threshold is a click, not a lift', () => {
+  const f = fixture();
+  try {
+    const { panel, handle } = dockedPanel(f, 'street-level-panel');
+    pointer(handle, 'pointerdown', { x: 200, y: 90 });
+    pointer(window, 'pointermove', { x: 202, y: 90 });
+    pointer(window, 'pointerup', { x: 202, y: 90 });
+    assert.equal(panel.classList.contains('panel-floating'), false);
+    assert.equal(panel.classList.contains('panel-dragging'), false);
+    assert.equal(f.store.has(POSITION_KEY), false);
+    assert.equal(f.calls.layout, 0, 'the rail was not re-laid out');
+    assert.deepEqual(f.calls.resized, []);
+  } finally {
+    f.restore();
+  }
+});
+
+/**
+ * Both portable panels wired through _initPanelDrag. Headers are the top
+ * 36 px; `obstacles` stand in for the command dock and voice pill.
+ * ResizeObserver callbacks run on `observe()`.
+ */
+function portableShell(f, { stored = {}, box = {}, obstacles = {} } = {}) {
+  const observers = [];
+  globalThis.ResizeObserver = class {
+    constructor(callback) {
+      this.callback = callback;
+      this.targets = [];
+      observers.push(this);
+    }
+    observe(target) {
+      this.targets.push(target);
+    }
+    disconnect() {}
+  };
+  const nodes = new Map();
+  const panels = {};
+  for (const id of ['cctv-panel', 'street-level-panel']) {
+    const panel = f.element();
+    const handle = f.element();
+    const natural = { width: 360, height: 420, ...box[id] };
+    panel.id = id;
+    panel.querySelector = (selector) =>
+      selector === '.panel-header' ? handle : null;
+    panel.getBoundingClientRect = () => {
+      const left = parseFloat(panel.style.left) || 0;
+      const top = parseFloat(panel.style.top) || 0;
+      const width = parseFloat(panel.style.width) || natural.width;
+      const height = parseFloat(panel.style.height) || natural.height;
+      return {
+        left,
+        top,
+        width,
+        height,
+        right: left + width,
+        bottom: top + height,
+      };
+    };
+    handle.getBoundingClientRect = () => {
+      const rect = panel.getBoundingClientRect();
+      return { ...rect, height: 36, bottom: rect.top + 36 };
+    };
+    if (stored[id])
+      f.store.set(
+        `godsEyeView.v8.panelPos.${id}`,
+        JSON.stringify({ floating: true, ...stored[id] }),
+      );
+    nodes.set(id, panel);
+    panels[id] = { panel, handle, natural };
+  }
+  const obstacle = (id, rect) =>
+    nodes.set(id, {
+      getBoundingClientRect: () => ({
+        ...rect,
+        width: rect.right - rect.left,
+        height: rect.bottom - rect.top,
+      }),
+    });
+  for (const [id, rect] of Object.entries(obstacles)) obstacle(id, rect);
+  globalThis.document.getElementById = (id) => nodes.get(id) ?? null;
+  f.owner._initPanelDrag();
+  return {
+    ...panels,
+    obstacle,
+    observed: (node) => observers.some(({ targets }) => targets.includes(node)),
+    contentResized: () => observers.forEach(({ callback }) => callback([])),
+  };
+}
+
+test('a floating window whose content grows is pulled back on-screen', () => {
+  const f = fixture();
+  try {
+    const shell = portableShell(f, {
+      stored: { 'cctv-panel': { left: 900, top: 380 } },
+    });
+    const { panel, natural } = shell['cctv-panel'];
+    assert.equal(panel.style.top, '380px');
+    assert.equal(shell.observed(panel), true, 'its size is watched');
+    assert.equal(shell.observed(shell['street-level-panel'].panel), true);
+    // Expanding the collapsed strip, or an image opening in Street Level.
+    natural.height = 800;
+    shell.contentResized();
+    assert.equal(panel.style.top, `${900 - 800 - 6}px`);
+    assert.equal(panel.style.left, '900px');
+  } finally {
+    f.restore();
+  }
+});
+
+test('a live window resize shrinks a floating window larger than the viewport', () => {
+  const f = fixture();
+  try {
+    const shell = portableShell(f, {
+      stored: {
+        'cctv-panel': { left: 100, top: 80, width: 1300, height: 700 },
+      },
+    });
+    const { panel } = shell['cctv-panel'];
+    assert.equal(panel.style.width, '1300px');
+    Object.assign(window, { innerWidth: 1000, innerHeight: 500 });
+    window.dispatchEvent(new Event('resize'));
+    assert.equal(panel.style.width, '988px');
+    assert.equal(panel.style.height, '488px');
+    assert.equal(panel.style.left, '6px');
+    assert.equal(panel.style.top, '6px');
+    // A window that already fits keeps the size the user gave it.
+    Object.assign(window, { innerWidth: 1440, innerHeight: 900 });
+    window.dispatchEvent(new Event('resize'));
+    assert.equal(panel.style.width, '988px');
+  } finally {
+    f.restore();
+  }
+});
+
+const DOCK = { left: 300, top: 820, right: 1140, bottom: 882 };
+
+test('a floating header never lands under the command dock or voice pill', () => {
+  const f = fixture();
+  try {
+    const shell = portableShell(f, {
+      stored: { 'cctv-panel': { left: 100, top: 80 } },
+      // A collapsed CCTV window is just its header strip.
+      box: { 'cctv-panel': { height: 36 } },
+      obstacles: { 'command-dock': DOCK },
+    });
+    const { panel, handle, natural } = shell['cctv-panel'];
+    const above = DOCK.top - 36 - 6;
+
+    // Drag: the strip dropped at the bottom centre stops above the dock.
+    pointer(handle, 'pointerdown', { x: 200, y: 90 });
+    pointer(window, 'pointermove', { x: 720, y: 880 });
+    assert.equal(panel.style.top, `${above}px`);
+    pointer(window, 'pointerup', { x: 720, y: 880 });
+    const key = 'godsEyeView.v8.panelPos.cctv-panel';
+    assert.equal(JSON.parse(f.store.get(key)).top, above);
+
+    // Restore: a place saved under the dock (older build) comes back clear.
+    f.store.set(key, JSON.stringify({ left: 620, top: 858, floating: true }));
+    f.owner._restorePanelPosition('cctv-panel', panel);
+    assert.equal(panel.style.top, `${above}px`);
+
+    // Re-clamp: the voice pill measured when the window resizes.
+    Object.assign(panel.style, { left: '1000px', top: '700px' });
+    shell.obstacle('gev-voice-control', {
+      left: 1190,
+      top: 690,
+      right: 1404,
+      bottom: 740,
+    });
+    window.dispatchEvent(new Event('resize'));
+    assert.equal(panel.style.top, `${690 - 36 - 6}px`);
+
+    // Only the header has to stay clear: a body over the dock is fine.
+    natural.height = 200;
+    Object.assign(panel.style, { left: '620px', top: '650px' });
+    window.dispatchEvent(new Event('resize'));
+    assert.equal(panel.style.top, '650px');
+  } finally {
+    f.restore();
+  }
+});
+
+test('a collapsed floating window keeps its chosen height through a drag and a reload', () => {
+  const f = fixture();
+  try {
+    const { panel, handle } = floatingPanel(f, 'cctv-panel');
+    panel.style.height = '500px';
+    panel.classList.add('collapsed');
+    // Collapsed, the window measures only its header strip.
+    panel.getBoundingClientRect = () => {
+      const left = parseFloat(panel.style.left);
+      const top = parseFloat(panel.style.top);
+      return {
+        left,
+        top,
+        width: 360,
+        height: 50,
+        right: left + 360,
+        bottom: top + 50,
+      };
+    };
+    pointer(handle, 'pointerdown', { x: 200, y: 90 });
+    pointer(window, 'pointermove', { x: 260, y: 140 });
+    pointer(window, 'pointerup', { x: 260, y: 140 });
+    const record = JSON.parse(
+      f.store.get('godsEyeView.v8.panelPos.cctv-panel'),
+    );
+    assert.equal(record.height, 500, 'the chosen height, not the strip');
+    assert.equal(record.width, 360);
+
+    // Reload: a fresh panel restores the size it expands to.
+    const reloaded = f.element();
+    reloaded.id = 'cctv-panel';
+    f.owner._restorePanelPosition('cctv-panel', reloaded);
+    assert.equal(reloaded.style.height, '500px');
+  } finally {
+    f.restore();
+  }
+});

src/ui/panelLayoutController.js

@@ -97,6 +97,7 @@ export class PanelLayoutController {
     this._cctvPanel = document.getElementById('cctv-panel');
     this._weatherPanel = document.getElementById('weather-panel');
     this._recentImageryPanel = document.getElementById('recent-imagery-panel');
+    this._streetLevelPanel = document.getElementById('street-level-panel');
     this._sliderPanel = document.getElementById('param-slider-panel');
     this._detectionBtn = document.getElementById('detection-toggle');
   }
@@ -201,11 +202,15 @@ export class PanelLayoutController {
       this._cctvPanel,
       this._weatherPanel,
       this._recentImageryPanel,
+      this._streetLevelPanel,
     ]) {
       if (!panel) continue;
-      for (const property of ['top', 'right', 'bottom', 'left', 'z-index'])
-        panel.style.removeProperty(property);
-      panel.classList.remove('panel-draggable', 'panel-dragging');
+      // A floating window keeps its restored place and size.
+      if (!panel.classList.contains('panel-floating')) {
+        for (const property of ['top', 'right', 'bottom', 'left', 'z-index'])
+          panel.style.removeProperty(property);
+        panel.classList.remove('panel-draggable', 'panel-dragging');
+      }
       stack.insertBefore(panel, globalContextPanel);
       this._syncPanelCollapseButton(panel);
     }
@@ -229,6 +234,7 @@ export class PanelLayoutController {
         this._cctvPanel,
         this._weatherPanel,
         this._recentImageryPanel,
+        this._streetLevelPanel,
         globalContextPanel,
         document.getElementById('radio-panel'),
       ]) {

src/ui/panelPositionControls.js

@@ -1,4 +1,6 @@
 /** Own panel position preferences, viewport clamping and drag listeners. */
+import { RESIZE_DIRECTIONS, resizeBox } from './panelResize.js';
+
 /** Versioned localStorage namespace prefix to invalidate stale panel layouts. */
 const PANEL_LAYOUT_STORAGE_VERSION = 'v6';
 /**
@@ -10,40 +12,203 @@ const PANEL_POSITION_STORAGE_VERSION = 'v8';
 /** Z ladder: panels promote within [100, 139]; voice pill 150, toast 200, clean-view-exit 300. */
 const PANEL_Z_BASE = 100;
 const PANEL_Z_MAX = 139;
+/**
+ * Lowest z for a promoted panel: above every docked rail panel (#pp-toggles is
+ * 110). Keep in step with `#right-context-rail > .panel-floating` in controls.css.
+ */
+const PANEL_Z_FLOATING_FLOOR = PANEL_Z_BASE + 11;
+/** Pointer travel before a press becomes a drag or resize. */
+const DRAG_THRESHOLD_PX = 4;
+/**
+ * Double press that snaps a floating panel back. Detected from pointerdown
+ * because the drag's preventDefault() suppresses a native dblclick.
+ */
+const DOUBLE_PRESS_MS = 400;
+const DOUBLE_PRESS_SLOP_PX = 6;
+const VIEWPORT_MARGIN_PX = 6;
+/**
+ * Fixed chrome that paints over the rail's stacking context; a floating
+ * window keeps its header clear of it so it can always be grabbed again.
+ */
+const PANEL_OBSTACLE_IDS = ['command-dock', 'gev-voice-control'];
+const PANEL_FLOAT_HINT_STORAGE_KEY = `godsEyeView.${PANEL_POSITION_STORAGE_VERSION}.panelFloatHintShown`;
+const PANEL_FLOAT_HINT = 'Double-click the header to snap the panel back';
+/** Header children whose own interaction wins over a drag or a snap-back. */
+const INTERACTIVE_SELECTOR =
+  'input, select, option, textarea, button, a, [role="button"]';
+const FLOATING_STYLE_PROPERTIES = [
+  'left',
+  'top',
+  'right',
+  'bottom',
+  'width',
+  'height',
+  'z-index',
+];
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function fitWindowExtent(value, minimum, viewportExtent) {
+  return clamp(
+    Math.round(value),
+    minimum,
+    Math.max(minimum, viewportExtent - 2 * VIEWPORT_MARGIN_PX),
+  );
+}
+
+function placeAt(panelEl, left, top) {
+  panelEl.style.left = `${left}px`;
+  panelEl.style.top = `${top}px`;
+  panelEl.style.right = 'auto';
+  panelEl.style.bottom = 'auto';
+}
+
+/** On a phone the rail scrolls, so a finger on a header is a swipe, not a drag. */
+function isPrecisePointer(event) {
+  const pointerType = event.pointerType || 'mouse';
+  return pointerType === 'mouse' || pointerType === 'pen';
+}
+
+function geometryOf(panelEl) {
+  const { left, top, width, height } = panelEl.style;
+  return { left, top, width, height };
+}
+
 export class PanelPositionControls {
+  /** `onPanelResized(panelId)` runs after a portable panel moves, resizes or docks. */
   constructor({
     syncPanelCollapseButton,
     layoutRightPanels,
     syncCctvPanelViewport,
     showToast,
+    onPanelResized = null,
   }) {
     this._syncPanelCollapseButton = syncPanelCollapseButton;
     this._layoutRightPanels = layoutRightPanels;
     this._syncCctvPanelViewport = syncCctvPanelViewport;
     this._showToast = showToast;
+    this._onPanelResized = onPanelResized;
     this._ppToggles = document.getElementById('pp-toggles');
     this._panelZCounter = PANEL_Z_BASE + 10;
     this._draggableResizeObserver = null;
     this._cancelDrag = null;
+    this._portablePanels = new Map();
+    this._resizeHandles = [];
+    this._dragInitialized = false;
     this.removers = [];
     this.destroyed = false;
   }
-  listen(target, type, callback) {
+  listen(target, type, callback, options) {
     if (this.destroyed || !target) return;
     const listener = (event) => {
       if (!this.destroyed) callback(event);
     };
-    target.addEventListener(type, listener);
-    this.removers.push(() => target.removeEventListener(type, listener));
+    target.addEventListener(type, listener, options);
+    this.removers.push(() =>
+      target.removeEventListener(type, listener, options),
+    );
   }
   _reclampDraggablePanels() {
     if (this.destroyed) return;
     const el = this._ppToggles;
-    if (!el || !el.style.top || el.style.top === 'auto') return;
-    const top = parseInt(el.style.top, 10);
-    if (!Number.isFinite(top)) return;
-    el.style.top = `${this._clampToViewport(0, top, el).top}px`;
-    this._pinPanelToRight(el);
+    if (el && el.style.top && el.style.top !== 'auto') {
+      const top = parseInt(el.style.top, 10);
+      if (Number.isFinite(top)) {
+        el.style.top = `${this._clampToViewport(0, top, el).top}px`;
+        this._pinPanelToRight(el);
+      }
+    }
+    for (const entry of this._portablePanels.values()) {
+      const { classList } = entry.panel;
+      if (!classList.contains('panel-floating')) continue;
+      // A live gesture owns the box; it re-clamps when it ends.
+      if (classList.contains('panel-dragging')) continue;
+      if (classList.contains('panel-resizing')) continue;
+      this._reclampPortablePanel(entry);
+    }
+  }
+
+  /** Bring a floating window on-screen; shrink it only if it exceeds the viewport. */
+  _reclampPortablePanel(entry) {
+    const { panel, min } = entry;
+    const left = parseInt(panel.style.left, 10);
+    const top = parseInt(panel.style.top, 10);
+    if (!Number.isFinite(left) || !Number.isFinite(top)) return;
+    for (const [property, viewportExtent] of [
+      ['width', window.innerWidth],
+      ['height', window.innerHeight],
+    ]) {
+      const extent = parseFloat(panel.style[property]);
+      if (!Number.isFinite(extent)) continue;
+      const fitted = fitWindowExtent(extent, min[property], viewportExtent);
+      if (fitted < extent) panel.style[property] = `${fitted}px`;
+    }
+    const next = this._clampPortableWindow(entry, left, top);
+    panel.style.left = `${next.left}px`;
+    panel.style.top = `${next.top}px`;
+  }
+
+  /**
+   * Clamp a floating window inside the viewport margin with its header above
+   * the command dock and voice pill, measured each time since the dock resizes.
+   */
+  _clampPortableWindow(
+    entry,
+    left,
+    top,
+    geometry = this._windowGeometry(entry),
+  ) {
+    const { width, height, header } = geometry;
+    const maxLeft = Math.max(
+      VIEWPORT_MARGIN_PX,
+      window.innerWidth - width - VIEWPORT_MARGIN_PX,
+    );
+    const maxTop = Math.max(
+      VIEWPORT_MARGIN_PX,
+      window.innerHeight - height - VIEWPORT_MARGIN_PX,
+    );
+    const x = clamp(left, VIEWPORT_MARGIN_PX, maxLeft);
+    let y = clamp(top, VIEWPORT_MARGIN_PX, maxTop);
+    const obstacles = this._panelObstacles();
+    for (let pass = 0; pass < obstacles.length; pass++) {
+      const hit = obstacles.find(
+        (rect) =>
+          rect.left < x + width &&
+          rect.right > x &&
+          rect.top < y + header &&
+          rect.bottom > y,
+      );
+      if (!hit) break;
+      const above = hit.top - header - VIEWPORT_MARGIN_PX;
+      y =
+        above >= VIEWPORT_MARGIN_PX
+          ? above
+          : Math.min(maxTop, hit.bottom + VIEWPORT_MARGIN_PX);
+    }
+    return { left: x, top: y };
+  }
+
+  _windowGeometry({ panel, handle }, rect = panel.getBoundingClientRect()) {
+    const handleRect = handle?.getBoundingClientRect();
+    const header = handleRect ? handleRect.bottom - rect.top : 0;
+    return {
+      width: rect.width,
+      height: rect.height,
+      // Without a measurable header, keep the whole window clear.
+      header: header > 0 ? Math.min(header, rect.height) : rect.height,
+    };
+  }
+
+  _panelObstacles() {
+    const rects = [];
+    for (const id of PANEL_OBSTACLE_IDS) {
+      const rect = document.getElementById(id)?.getBoundingClientRect();
+      // A hidden dock, or a voice UI switched off, measures empty.
+      if (rect && rect.width > 0 && rect.height > 0) rects.push(rect);
+    }
+    return rects;
   }
 
   _maybeNotifyLayoutReset() {
@@ -65,28 +230,71 @@ export class PanelPositionControls {
   }
 
   _initPanelDrag() {
-    if (this.destroyed) return;
+    if (this.destroyed || this._dragInitialized) return;
+    this._dragInitialized = true;
+    const cctvPanel = document.getElementById('cctv-panel');
+    const streetLevelPanel = document.getElementById('street-level-panel');
+    // A `portable` panel lifts out of its rail on a header drag, resizes from
+    // every edge and remembers its window; the others only reposition.
     const dragSpecs = [
       {
         id: 'pp-toggles',
         panel: this._ppToggles,
         handle: this._ppToggles?.querySelector('.panel-drag-handle.compact'),
       },
+      {
+        id: 'cctv-panel',
+        panel: cctvPanel,
+        handle: cctvPanel?.querySelector('.panel-header'),
+        portable: true,
+        min: { width: 300, height: 160 },
+      },
+      {
+        id: 'street-level-panel',
+        panel: streetLevelPanel,
+        handle: streetLevelPanel?.querySelector('.panel-header'),
+        portable: true,
+        min: { width: 320, height: 280 },
+        // Shrinking the window to its strip docks it, so it never sits
+        // over the globe as a stray header.
+        dockOnCollapse: true,
+      },
     ].filter(Boolean);
 
     for (const spec of dragSpecs) {
       if (!spec.panel || !spec.handle) continue;
+      if (spec.portable) {
+        this._portablePanels.set(spec.id, {
+          panel: spec.panel,
+          handle: spec.handle,
+          min: { width: 300, height: 160, ...spec.min },
+          dockOnCollapse: spec.dockOnCollapse === true,
+        });
+        spec.panel.classList.add('panel-portable');
+      }
       this._restorePanelPosition(spec.id, spec.panel);
       this._makePanelDraggable(spec.id, spec.panel, spec.handle);
+      if (spec.portable) {
+        this._makePanelResizable(spec.id, spec.panel, spec.min);
+      }
     }
     // Keep a positioned panel on-screen when its HEIGHT changes after restore — it expands to its
     // full row set a frame or two later, so the restore-time clamp used a stale (shorter) height and
-    // the panel could still hang off the bottom (audit U2). Re-clamp on every size change.
-    if (this._ppToggles && typeof ResizeObserver !== 'undefined') {
+    // the panel could still hang off the bottom (audit U2). Re-clamp on every size change. Floating
+    // windows grow the same way when their content does.
+    const observed = [
+      this._ppToggles,
+      ...[...this._portablePanels.values()].map(({ panel }) => panel),
+    ].filter(Boolean);
+    if (observed.length && typeof ResizeObserver !== 'undefined') {
       this._draggableResizeObserver = new ResizeObserver(() =>
         this._reclampDraggablePanels(),
       );
-      this._draggableResizeObserver.observe(this._ppToggles);
+      for (const panel of observed)
+        this._draggableResizeObserver.observe(panel);
+    }
+    if (this._portablePanels.size) {
+      this.listen(window, 'resize', () => this._reclampDraggablePanels());
     }
   }
 
@@ -159,17 +367,43 @@ export class PanelPositionControls {
       const pos = JSON.parse(raw);
       if (!pos || typeof pos.left !== 'number' || typeof pos.top !== 'number')
         return;
+      // Only portable panels store, and accept, floating records.
+      const portable = this._portablePanels.get(panelId);
+      if (Boolean(pos.floating) !== Boolean(portable)) return;
+      if (portable) {
+        panelEl.classList.add('panel-floating', 'panel-draggable');
+        // A restored window must stack above the docked rail panels too.
+        this._promotePanelZ(panelEl);
+        if (Number.isFinite(pos.width)) {
+          panelEl.style.width = `${fitWindowExtent(
+            pos.width,
+            portable.min.width,
+            window.innerWidth,
+          )}px`;
+        }
+        if (Number.isFinite(pos.height)) {
+          panelEl.style.height = `${fitWindowExtent(
+            pos.height,
+            portable.min.height,
+            window.innerHeight,
+          )}px`;
+        }
+      }
       // Clamp to the viewport: a position saved at one window size would otherwise land off-screen at
-      // another (audit U2 — observed a panel at x:-192). The drag handler clamps; restore must too.
-      const { left, top } = this._clampToViewport(
-        Math.round(pos.left),
-        Math.round(pos.top),
-        panelEl,
-      );
-      panelEl.style.left = `${left}px`;
-      panelEl.style.top = `${top}px`;
-      panelEl.style.right = 'auto';
-      panelEl.style.bottom = 'auto';
+      // another (audit U2 — observed a panel at x:-192). The drag handler clamps; restore must too,
+      // and a window saved under the command dock must not come back there.
+      const { left, top } = portable
+        ? this._clampPortableWindow(
+            portable,
+            Math.round(pos.left),
+            Math.round(pos.top),
+          )
+        : this._clampToViewport(
+            Math.round(pos.left),
+            Math.round(pos.top),
+            panelEl,
+          );
+      placeAt(panelEl, left, top);
       if (panelId === 'pp-toggles') {
         this._pinPanelToRight(panelEl);
       }
@@ -190,13 +424,28 @@ export class PanelPositionControls {
 
   _savePanelPosition(panelId, panelEl) {
     const rect = panelEl.getBoundingClientRect();
+    const record = {
+      left: Math.round(rect.left),
+      top: Math.round(rect.top),
+    };
+    if (this._portablePanels.has(panelId)) {
+      // Only an explicitly set size is remembered, and the inline value
+      // rather than the measured box: a collapsed window measures only its
+      // header but keeps the size the user chose for when it expands.
+      const chosen = (inline, measured) => {
+        const px = parseFloat(inline);
+        return Math.round(Number.isFinite(px) ? px : measured);
+      };
+      if (panelEl.style.width)
+        record.width = chosen(panelEl.style.width, rect.width);
+      if (panelEl.style.height)
+        record.height = chosen(panelEl.style.height, rect.height);
+      record.floating = true;
+    }
     try {
       localStorage.setItem(
         this._panelStorageKey(panelId),
-        JSON.stringify({
-          left: Math.round(rect.left),
-          top: Math.round(rect.top),
-        }),
+        JSON.stringify(record),
       );
     } catch {
       // storage unavailable
@@ -209,7 +458,7 @@ export class PanelPositionControls {
       const promoted = [...document.querySelectorAll('.panel-draggable')]
         .filter((el) => el.style.zIndex)
         .sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
-      let z = PANEL_Z_BASE + 1;
+      let z = PANEL_Z_FLOATING_FLOOR;
       for (const el of promoted) {
         el.style.zIndex = String(z);
         z += 1;
@@ -219,11 +468,70 @@ export class PanelPositionControls {
     panelEl.style.zIndex = String(this._panelZCounter);
   }
 
+  _maybeShowFloatHint() {
+    try {
+      if (localStorage.getItem(PANEL_FLOAT_HINT_STORAGE_KEY)) return;
+      localStorage.setItem(PANEL_FLOAT_HINT_STORAGE_KEY, '1');
+    } catch {
+      // storage unavailable: still show it once this session
+      if (this._floatHintShown) return;
+      this._floatHintShown = true;
+    }
+    this._showToast(PANEL_FLOAT_HINT);
+  }
+
+  /**
+   * Turn a rail panel into a fixed window in place. Width is frozen so a
+   * `width: 100%` panel keeps its size; height stays natural until a resize.
+   */
+  _liftPanelOut(panelId, panelEl, rect = panelEl.getBoundingClientRect()) {
+    if (panelEl.classList.contains('panel-floating')) return false;
+    placeAt(panelEl, Math.round(rect.left), Math.round(rect.top));
+    if (!panelEl.classList.contains('collapsed')) {
+      panelEl.style.width = `${Math.round(rect.width)}px`;
+    }
+    panelEl.style.removeProperty('--right-panel-allocated-height');
+    panelEl.removeAttribute('aria-hidden');
+    panelEl.classList.add('panel-floating', 'panel-draggable');
+    this._promotePanelZ(panelEl);
+    this._layoutRightPanels();
+    this._maybeShowFloatHint();
+    return true;
+  }
+
+  /** Snap a floating panel back into its rail and forget its window. */
+  _resetPanelPosition(panelId) {
+    const portable = this._portablePanels.get(panelId);
+    if (!portable) return;
+    const panelEl = portable.panel;
+    this._cancelDrag?.();
+    panelEl.classList.remove(
+      'panel-floating',
+      'panel-draggable',
+      'panel-dragging',
+      'panel-resizing',
+    );
+    for (const property of FLOATING_STYLE_PROPERTIES) {
+      panelEl.style.removeProperty(property);
+    }
+    try {
+      localStorage.removeItem(this._panelStorageKey(panelId));
+    } catch {
+      // storage unavailable
+    }
+    this._layoutRightPanels();
+    this._onPanelResized?.(panelId);
+  }
+
   _makePanelDraggable(panelId, panelEl, handleEl) {
     // Z-order promotion: bring clicked panel to front of the stacking context
     this.listen(panelEl, 'pointerdown', () => {
       this._promotePanelZ(panelEl);
     });
+    if (this._portablePanels.has(panelId)) {
+      this._makePortablePanelDraggable(panelId, panelEl, handleEl);
+      return;
+    }
 
     this.listen(handleEl, 'pointerdown', (event) => {
       if (event.button !== 0) return;
@@ -238,64 +546,296 @@ export class PanelPositionControls {
       this._cancelDrag?.();
       event.preventDefault();
       const rect = panelEl.getBoundingClientRect();
-      const startX = event.clientX;
-      const startY = event.clientY;
-      const offsetX = startX - rect.left;
-      const offsetY = startY - rect.top;
+      const offsetX = event.clientX - rect.left;
+      const offsetY = event.clientY - rect.top;
 
-      panelEl.style.left = `${rect.left}px`;
-      panelEl.style.top = `${rect.top}px`;
-      panelEl.style.right = 'auto';
-      panelEl.style.bottom = 'auto';
+      placeAt(panelEl, rect.left, rect.top);
       panelEl.classList.add('panel-dragging');
       this._promotePanelZ(panelEl);
 
-      const onMove = (moveEvent) => {
-        const nextLeftRaw = moveEvent.clientX - offsetX;
-        const nextTopRaw = moveEvent.clientY - offsetY;
-        const maxLeft = Math.max(6, window.innerWidth - rect.width - 6);
-        const maxTop = Math.max(6, window.innerHeight - rect.height - 6);
-        const nextLeft = Math.max(6, Math.min(maxLeft, nextLeftRaw));
-        const nextTop = Math.max(6, Math.min(maxTop, nextTopRaw));
-        panelEl.style.left = `${nextLeft}px`;
-        panelEl.style.top = `${nextTop}px`;
-        if (panelId === 'pp-toggles') {
-          this._layoutRightPanels();
-        }
-        if (panelId === 'cctv-panel') {
-          this._syncCctvPanelViewport();
-        }
-      };
-
-      const cancel = () => {
-        panelEl.classList.remove('panel-dragging');
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        window.removeEventListener('pointercancel', onUp);
-        this._cancelDrag = null;
-      };
-      const onUp = () => {
-        cancel();
-        if (panelId === 'pp-toggles') {
-          this._pinPanelToRight(panelEl);
-        }
-        this._savePanelPosition(panelId, panelEl);
-        if (panelId === 'cctv-panel') {
-          this._syncCctvPanelViewport();
-        }
-      };
-
-      this._cancelDrag = cancel;
-      window.addEventListener('pointermove', onMove);
-      window.addEventListener('pointerup', onUp);
-      window.addEventListener('pointercancel', onUp);
+      this._trackPointerGesture(event, {
+        onMove: (moveEvent) => {
+          const nextLeftRaw = moveEvent.clientX - offsetX;
+          const nextTopRaw = moveEvent.clientY - offsetY;
+          const maxLeft = Math.max(6, window.innerWidth - rect.width - 6);
+          const maxTop = Math.max(6, window.innerHeight - rect.height - 6);
+          const nextLeft = Math.max(6, Math.min(maxLeft, nextLeftRaw));
+          const nextTop = Math.max(6, Math.min(maxTop, nextTopRaw));
+          panelEl.style.left = `${nextLeft}px`;
+          panelEl.style.top = `${nextTop}px`;
+          if (panelId === 'pp-toggles') {
+            this._layoutRightPanels();
+          }
+          if (panelId === 'cctv-panel') {
+            this._syncCctvPanelViewport();
+          }
+        },
+        onStop: () => panelEl.classList.remove('panel-dragging'),
+        // A cancelled press keeps the place too: there is no rail to revert to.
+        onEnd: () => {
+          if (panelId === 'pp-toggles') {
+            this._pinPanelToRight(panelEl);
+          }
+          this._savePanelPosition(panelId, panelEl);
+          if (panelId === 'cctv-panel') {
+            this._syncCctvPanelViewport();
+          }
+        },
+      });
     });
   }
+
+  /**
+   * Track one pointer gesture. With a `threshold`, `onStart` and `onMove` wait
+   * until the pointer has travelled that far; `onEnd`/`onCancel` get whether
+   * it started. Stopping through `_cancelDrag` calls neither.
+   */
+  _trackPointerGesture(
+    event,
+    { threshold = 0, onStart, onMove, onStop, onEnd, onCancel = onEnd },
+  ) {
+    const startX = event.clientX;
+    const startY = event.clientY;
+    let started = threshold <= 0;
+    const move = (moveEvent) => {
+      const dx = moveEvent.clientX - startX;
+      const dy = moveEvent.clientY - startY;
+      if (!started) {
+        if (Math.hypot(dx, dy) < threshold) return;
+        started = true;
+        onStart?.();
+      }
+      onMove(moveEvent, dx, dy);
+    };
+    const stop = () => {
+      onStop?.();
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      window.removeEventListener('pointercancel', cancel);
+      if (this._cancelDrag === stop) this._cancelDrag = null;
+    };
+    const up = () => {
+      stop();
+      onEnd?.(started);
+    };
+    const cancel = () => {
+      stop();
+      onCancel?.(started);
+    };
+    this._cancelDrag = stop;
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+    window.addEventListener('pointercancel', cancel);
+  }
+
+  /** @returns {boolean} Whether the panel was floating and is now docked. */
+  dockPanel(panelId) {
+    const portable = this._portablePanels.get(panelId);
+    if (!portable?.panel.classList.contains('panel-floating')) return false;
+    this._resetPanelPosition(panelId);
+    return true;
+  }
+
+  /** A `dockOnCollapse` panel returns to its rail when collapsed while floating. */
+  onPanelCollapsed(panelId, collapsed) {
+    if (!collapsed || !this._portablePanels.get(panelId)?.dockOnCollapse)
+      return;
+    this.dockPanel(panelId);
+  }
+
+  /**
+   * The collapse button still toggles on a plain click; the click that ends a
+   * real drag is swallowed so it cannot toggle by accident.
+   */
+  _makePortablePanelDraggable(panelId, panelEl, handleEl) {
+    let swallowNextClick = false;
+    this.listen(
+      handleEl,
+      'click',
+      (event) => {
+        if (!swallowNextClick) return;
+        swallowNextClick = false;
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      },
+      { capture: true },
+    );
+    this.listen(handleEl, 'dblclick', (event) => {
+      if (event.target.closest?.(INTERACTIVE_SELECTOR)) return;
+      if (!panelEl.classList.contains('panel-floating')) return;
+      event.preventDefault();
+      this._resetPanelPosition(panelId);
+    });
+    let lastPress = null;
+    this.listen(handleEl, 'pointerdown', (event) => {
+      if (event.button !== 0 || !isPrecisePointer(event)) return;
+      const interactive = event.target.closest?.(INTERACTIVE_SELECTOR);
+      if (interactive && !interactive.matches('.panel-collapse-btn')) return;
+
+      const now = event.timeStamp || performance.now();
+      const doublePress =
+        !interactive &&
+        lastPress &&
+        now - lastPress.time <= DOUBLE_PRESS_MS &&
+        Math.hypot(event.clientX - lastPress.x, event.clientY - lastPress.y) <=
+          DOUBLE_PRESS_SLOP_PX;
+      lastPress = doublePress
+        ? null
+        : { time: now, x: event.clientX, y: event.clientY };
+      if (doublePress && panelEl.classList.contains('panel-floating')) {
+        event.preventDefault();
+        this._resetPanelPosition(panelId);
+        return;
+      }
+
+      this._cancelDrag?.();
+      // A header press must not start a text selection across the page.
+      event.preventDefault();
+      const entry = this._portablePanels.get(panelId);
+      let lifted = false;
+      let before = null;
+      let offsetX = 0;
+      let offsetY = 0;
+      let geometry = null;
+
+      this._trackPointerGesture(event, {
+        threshold: DRAG_THRESHOLD_PX,
+        onStart: () => {
+          // A drag between two presses is not a double-click.
+          lastPress = null;
+          const rect = panelEl.getBoundingClientRect();
+          offsetX = event.clientX - rect.left;
+          offsetY = event.clientY - rect.top;
+          geometry = this._windowGeometry(entry, rect);
+          before = geometryOf(panelEl);
+          lifted = this._liftPanelOut(panelId, panelEl, rect);
+          panelEl.classList.add('panel-dragging');
+          this._promotePanelZ(panelEl);
+        },
+        onMove: (moveEvent) => {
+          moveEvent.preventDefault();
+          const next = this._clampPortableWindow(
+            entry,
+            moveEvent.clientX - offsetX,
+            moveEvent.clientY - offsetY,
+            geometry,
+          );
+          panelEl.style.left = `${next.left}px`;
+          panelEl.style.top = `${next.top}px`;
+        },
+        onStop: () => panelEl.classList.remove('panel-dragging'),
+        onEnd: (dragged) => {
+          if (!dragged) return;
+          swallowNextClick = true;
+          setTimeout(() => {
+            swallowNextClick = false;
+          }, 0);
+          this._savePanelPosition(panelId, panelEl);
+          this._onPanelResized?.(panelId);
+        },
+        onCancel: (dragged) => {
+          if (dragged)
+            this._revertPanelGesture(panelId, panelEl, lifted, before);
+        },
+      });
+    });
+  }
+
+  /** On pointercancel, restore the panel as the gesture found it; save nothing. */
+  _revertPanelGesture(panelId, panelEl, lifted, before) {
+    if (lifted) {
+      this._resetPanelPosition(panelId);
+      return;
+    }
+    Object.assign(panelEl.style, before);
+    this._onPanelResized?.(panelId);
+  }
+
+  /** Resizing a docked panel lifts it out first, so handles work in both states. */
+  _makePanelResizable(panelId, panelEl, min = {}) {
+    const limits = { width: 300, height: 160, ...min };
+    for (const dir of RESIZE_DIRECTIONS) {
+      const handle = document.createElement('div');
+      handle.className =
+        dir === 'se' ? 'panel-resize-grip' : 'panel-resize-edge';
+      handle.dataset.dir = dir;
+      handle.setAttribute('aria-hidden', 'true');
+      if (dir === 'se') {
+        handle.title = 'Drag to resize · double-click the header to snap back';
+      }
+      panelEl.appendChild(handle);
+      this._resizeHandles.push(handle);
+      this.listen(handle, 'pointerdown', (event) =>
+        this._startPanelResize(event, panelId, panelEl, dir, limits),
+      );
+    }
+  }
+
+  _startPanelResize(event, panelId, panelEl, dir, limits) {
+    if (event.button !== 0 || !isPrecisePointer(event)) return;
+    event.preventDefault();
+    this._cancelDrag?.();
+    // Set once the pointer has travelled: a plain click on an edge must not
+    // lift the panel out.
+    let startBox = null;
+    let lifted = false;
+    let before = null;
+    const apply = ({ left, top, width, height }) => {
+      panelEl.style.left = `${left}px`;
+      panelEl.style.top = `${top}px`;
+      panelEl.style.width = `${width}px`;
+      panelEl.style.height = `${height}px`;
+    };
+
+    this._trackPointerGesture(event, {
+      threshold: DRAG_THRESHOLD_PX,
+      onStart: () => {
+        const rect = panelEl.getBoundingClientRect();
+        before = geometryOf(panelEl);
+        lifted = this._liftPanelOut(panelId, panelEl, rect);
+        startBox = {
+          left: Math.round(rect.left),
+          top: Math.round(rect.top),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        };
+        panelEl.classList.add('panel-resizing');
+        this._promotePanelZ(panelEl);
+        apply(startBox);
+      },
+      onMove: (moveEvent, dx, dy) => {
+        moveEvent.preventDefault();
+        apply(
+          resizeBox(startBox, dir, dx, dy, {
+            minWidth: limits.width,
+            minHeight: limits.height,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+          }),
+        );
+      },
+      onStop: () => panelEl.classList.remove('panel-resizing'),
+      onEnd: (resized) => {
+        if (!resized) return;
+        // Re-clamping skipped the live gesture; a north edge may have moved
+        // the header under the command dock.
+        const entry = this._portablePanels.get(panelId);
+        if (entry) this._reclampPortablePanel(entry);
+        this._savePanelPosition(panelId, panelEl);
+        this._onPanelResized?.(panelId);
+      },
+      onCancel: (resized) => {
+        if (resized) this._revertPanelGesture(panelId, panelEl, lifted, before);
+      },
+    });
+  }
+
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
     this._cancelDrag?.();
     for (const remove of this.removers.splice(0)) remove();
+    for (const handle of this._resizeHandles.splice(0)) handle.remove();
     this._draggableResizeObserver?.disconnect();
     this._draggableResizeObserver = null;
   }

src/ui/panelRails.test.mjs

@@ -113,7 +113,10 @@ function element(
     getBoundingClientRect() {
       return this.rect;
     },
-    matches: (selector) => selector === '[data-panel-id]',
+    matches: (selector) =>
+      selector === '[data-panel-id]' ||
+      (selector === '[data-panel-id]:not(.panel-floating)' &&
+        !classes.has('panel-floating')),
     contains(target) {
       return (
         target === this || this.children.some((child) => child.contains(target))
@@ -322,6 +325,28 @@ test('right layout retains Display allocation during measurement and caps restor
   );
 });
 
+test('right rail neither measures nor allocates a panel floating out of it', () => {
+  const f = fixture('right');
+  f.expand(f.first, 900);
+  f.expand(f.second, 300);
+  f.first.classList.add('panel-floating');
+  f.first.style.setProperty('--right-panel-allocated-height', '500px');
+  f.first.writes.length = 0;
+  f.run();
+  assert.equal(f.stack.dataset.expandedCount, '1');
+  assert.deepEqual(
+    f.first.writes,
+    [],
+    'a floating panel keeps whatever inline style it left the rail with',
+  );
+  assert.equal(f.first.getAttribute('aria-hidden'), undefined);
+  assert.equal(f.first.classList.contains('layout-auto-collapsed'), false);
+  assert.ok(
+    f.second.style.getPropertyValue('--right-panel-allocated-height'),
+    'the docked panel still receives its allocation',
+  );
+});
+
 test('right rail aligns to the current left rail and excludes hidden obstacles', () => {
   const f = fixture('right');
   f.options.leftStack.rect.top = 200;
@@ -332,6 +357,54 @@ test('right rail aligns to the current left rail and excludes hidden obstacles',
   assert.equal(f.stack.dataset.safeTop, '200.0');
 });
 
+// The left rail's `top` animates after the right pass runs, and nothing
+// re-runs it when the transition lands: the right rail must read the end value.
+function animatingLeftRail({ keyframes = true } = {}) {
+  const f = fixture('right');
+  const left = f.options.leftStack;
+  left.rect.top = 250;
+  left.computed.top = '250px';
+  left.dataset.safeTopPct = '29.60';
+  left.getAnimations = () => [
+    { transitionProperty: 'bottom', effect: null },
+    {
+      transitionProperty: 'top',
+      effect: {
+        getKeyframes: () =>
+          keyframes ? [{ top: '234px' }, { top: '266.4px' }] : [],
+      },
+    },
+  ];
+  return f;
+}
+
+test('right rail aligns to where a mid-transition left rail settles', () => {
+  const f = animatingLeftRail();
+  f.run();
+  assert.equal(f.stack.dataset.safeTop, '266.4');
+  assert.equal(
+    f.stack.style.getPropertyValue('--right-stack-safe-top'),
+    '266.4px',
+  );
+});
+
+test('right rail falls back to the committed left target when the transition end is unreadable', () => {
+  const f = animatingLeftRail({ keyframes: false });
+  f.run();
+  assert.equal(f.stack.dataset.safeTop, '266.4');
+});
+
+test('right rail follows a settled left rail whose CSS overrides the committed target', () => {
+  // Cyber pins the left rail with `top: ... !important`, so the committed
+  // percentage is not where it renders and no `top` transition runs.
+  const f = fixture('right', { hud: { visible: true, variant: 'cyber' } });
+  f.options.leftStack.rect.top = 220;
+  f.options.leftStack.dataset.safeTopPct = '26.00';
+  f.options.leftStack.getAnimations = () => [];
+  f.run();
+  assert.equal(f.stack.dataset.safeTop, '220.0');
+});
+
 test('natural height includes visible content, margins and wrapper chrome, excluding hidden rows', () => {
   const panel = element('panel');
   const inner = element('inner', { top: 100 });

src/ui/panelResize.js

@@ -0,0 +1,47 @@
+// Pure resize geometry for floating panels; PanelPositionControls wires the DOM.
+
+const EDGE_MARGIN_PX = 6;
+export const RESIZE_DIRECTIONS = ['n', 's', 'e', 'w', 'ne', 'nw', 'sw', 'se'];
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * Edges named in `dir` follow the pointer (dx, dy since gesture start) and the
+ * opposite edge stays put. Minimum size and the viewport margin win.
+ */
+export function resizeBox(
+  box,
+  dir,
+  dx,
+  dy,
+  {
+    minWidth,
+    minHeight,
+    viewportWidth = Infinity,
+    viewportHeight = Infinity,
+    margin = EDGE_MARGIN_PX,
+  } = {},
+) {
+  let { left, top, width, height } = box;
+  const right = box.left + box.width;
+  const bottom = box.top + box.height;
+  if (dir.includes('e'))
+    width = clamp(box.width + dx, minWidth, viewportWidth - margin - box.left);
+  if (dir.includes('s'))
+    height = clamp(
+      box.height + dy,
+      minHeight,
+      viewportHeight - margin - box.top,
+    );
+  if (dir.includes('w')) {
+    width = clamp(box.width - dx, minWidth, right - margin);
+    left = right - width;
+  }
+  if (dir.includes('n')) {
+    height = clamp(box.height - dy, minHeight, bottom - margin);
+    top = bottom - height;
+  }
+  return { left, top, width, height };
+}

src/ui/panelResize.test.mjs

@@ -0,0 +1,64 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { resizeBox } from './panelResize.js';
+
+const box = { left: 100, top: 100, width: 400, height: 300 };
+const limits = {
+  minWidth: 200,
+  minHeight: 150,
+  viewportWidth: 1000,
+  viewportHeight: 800,
+};
+
+test('east and south edges grow away from the anchored corner', () => {
+  assert.deepEqual(resizeBox(box, 'se', 50, 20, limits), {
+    left: 100,
+    top: 100,
+    width: 450,
+    height: 320,
+  });
+  assert.deepEqual(resizeBox(box, 'e', -30, 999, limits), {
+    left: 100,
+    top: 100,
+    width: 370,
+    height: 300,
+  });
+});
+
+test('west and north edges keep the opposite edge pinned', () => {
+  assert.deepEqual(resizeBox(box, 'w', -40, 0, limits), {
+    left: 60,
+    top: 100,
+    width: 440,
+    height: 300,
+  });
+  assert.deepEqual(resizeBox(box, 'nw', 40, 30, limits), {
+    left: 140,
+    top: 130,
+    width: 360,
+    height: 270,
+  });
+  assert.deepEqual(
+    resizeBox(box, 'n', -50, 0, limits).top,
+    100,
+    'horizontal motion does not move a north edge',
+  );
+});
+
+test('minimum size stops the moving edge, not the anchored one', () => {
+  const small = resizeBox(box, 'w', 350, 0, limits);
+  assert.deepEqual(small, { left: 300, top: 100, width: 200, height: 300 });
+  assert.equal(resizeBox(box, 'ne', 0, 400, limits).height, 150);
+  assert.equal(resizeBox(box, 'ne', 0, 400, limits).top, 250);
+});
+
+test('the viewport margin caps growth in every direction', () => {
+  assert.equal(resizeBox(box, 'e', 2000, 0, limits).width, 1000 - 6 - 100);
+  assert.equal(resizeBox(box, 's', 0, 2000, limits).height, 800 - 6 - 100);
+  const west = resizeBox(box, 'w', -2000, 0, limits);
+  assert.equal(west.left, 6);
+  assert.equal(west.left + west.width, 500);
+  const north = resizeBox(box, 'n', 0, -2000, limits);
+  assert.equal(north.top, 6);
+  assert.equal(north.top + north.height, 400);
+});

src/ui/rightPanelRail.js

@@ -11,6 +11,28 @@ import { displayPanelScroller } from './displayPanelScroll.js';
 
 const pendingCollapseRetries = new WeakSet();
 
+/**
+ * Where the left rail's top will settle, not where it is mid-transition:
+ * nothing re-runs this pass when the `top` animation ends (ResizeObserver
+ * ignores moves). Returns NaN when there is no left rail.
+ */
+function settledLeftRailTop(leftStack, viewportHeight, getComputedStyle) {
+  const top = leftStack?.getBoundingClientRect().top;
+  if (!Number.isFinite(top)) return NaN;
+  const transition = leftStack
+    .getAnimations?.()
+    .find((animation) => animation.transitionProperty === 'top');
+  if (!transition) return top;
+  const keyframes = transition.effect?.getKeyframes?.() || [];
+  const targetTop = parseFloat(keyframes.at(-1)?.top);
+  const currentTop = parseFloat(getComputedStyle(leftStack).top);
+  // The rect and the computed `top` move together; keep any offset between them.
+  if (Number.isFinite(targetTop) && Number.isFinite(currentTop))
+    return top + targetTop - currentTop;
+  const targetPct = parseFloat(leftStack.dataset?.safeTopPct);
+  return Number.isFinite(targetPct) ? (targetPct * viewportHeight) / 100 : top;
+}
+
 /**
  * Measure and place the right panel rail for one synchronous layout pass.
  * The caller owns scheduling, obstacle selection, disclosure preferences and
@@ -47,8 +69,10 @@ export function layoutRightPanelRail({
   // A collapse may schedule one follow-up, which only measures and allocates.
   const isCollapseRetry = pendingCollapseRetries.delete(stack);
 
+  // A floating (lifted-out) panel is not laid out by the rail.
   const panels = [...stack.children].filter(
-    (panel) => panel.matches('[data-panel-id]') && !panel.hidden,
+    (panel) =>
+      panel.matches('[data-panel-id]:not(.panel-floating)') && !panel.hidden,
   );
   if (!hud.visible || hud.variant !== 'tactical') {
     for (const panel of panels.filter((item) =>
@@ -110,7 +134,11 @@ export function layoutRightPanelRail({
   const viewportHeight = Math.max(1, windowRef.innerHeight);
   const safeGap = Math.max(8, viewportHeight * 0.012);
   const stackRect = stack.getBoundingClientRect();
-  const leftStackTop = leftStack?.getBoundingClientRect().top;
+  const leftStackTop = settledLeftRailTop(
+    leftStack,
+    viewportHeight,
+    getComputedStyle,
+  );
   const alignedTop = Number.isFinite(leftStackTop)
     ? leftStackTop
     : viewportHeight * 0.26;

src/ui/shellElements.js

@@ -59,6 +59,7 @@ export function readShellElements(document = globalThis.document) {
     _dataPanel: document.getElementById('data-panel'),
     _scenePanel: document.getElementById('scene-panel'),
     _cctvPanel: document.getElementById('cctv-panel'),
+    _streetLevelPanel: document.getElementById('street-level-panel'),
     _radioPanel: document.getElementById('radio-panel'),
     _contextRadioDock: document.getElementById('context-radio-dock'),
     _contextRadioToggleBtn: document.getElementById('context-radio-toggle-btn'),

src/ui/streetLevelControls.js

@@ -0,0 +1,637 @@
+import { syncChipGroup } from './chipGroup.js';
+import { isExplicitLayerStateOrigin } from '../data/layerState.js';
+import {
+  presentStreetLevelPanel,
+  SINCE_STOPS,
+} from './streetLevelPresentation.js';
+
+const RENDER_MODE_KEY = 'gev:street-level:render-mode';
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const RADIO_STEPS = Object.freeze({
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1,
+});
+
+// Renders run on every layer notification, and the rail's MutationObserver
+// relays out on each attribute write: write only what changed.
+const setProp = (node, key, value) => {
+  if (node && node[key] !== value) node[key] = value;
+};
+const setAttr = (node, key, value) => {
+  if (node && node.getAttribute(key) !== value) node.setAttribute(key, value);
+};
+
+/**
+ * Fills the Street Level panel body: provider chips, filters, legend and
+ * viewer. The panel chrome itself belongs to the application shell.
+ */
+export class StreetLevelControls {
+  constructor({ root, layer, actions }) {
+    this.root = root;
+    this.layer = layer;
+    this.actions = actions;
+    this.destroyed = false;
+    this.listeners = new AbortController();
+    this._unsubscribe = null;
+    this._state = null;
+    this._view = null;
+    this._wasEnabled = null;
+    this._wasStreetOpen = false;
+    // Until the user first touches the app, an off → on is the saved layer
+    // state being restored, not a user switching the layer on.
+    this._restoreWindow = true;
+    // Whether the last switch-on was explicit (user, voice, tool) rather than
+    // a restore; null when the shell does not report request origins.
+    this._explicitEnable = null;
+    this._unsubscribeEnableRequests = null;
+    this._resizeQueued = false;
+    this._wrapHome = null;
+    this._expandReturnFocus = null;
+    // Only the <body> children this class made inert are released again.
+    this._inerted = new Set();
+    this._modalObserver = null;
+    this._elements = this._collect();
+    this._bind();
+  }
+
+  _collect() {
+    const byId = (id) => this.root?.querySelector(`#${id}`) || null;
+    const all = (selector) => [
+      ...(this.root?.querySelectorAll(selector) || []),
+    ];
+    return {
+      status: byId('sl-status'),
+      controls: byId('sl-controls'),
+      providerChips: byId('sl-provider-chips'),
+      error: byId('sl-error'),
+      errorText: byId('sl-error-text'),
+      sinceRange: byId('sl-since'),
+      sinceLabel: byId('sl-since-label'),
+      legend: byId('sl-legend'),
+      followBtn: byId('sl-follow-btn'),
+      viewerWrap: byId('sl-viewer-wrap'),
+      viewerExpand: byId('sl-viewer-expand'),
+      viewerClose: byId('sl-viewer-close'),
+      viewerPlaceholder: byId('sl-viewer-placeholder'),
+      viewer: byId('sl-viewer'),
+      imageBy: byId('sl-image-by'),
+      imageWhen: byId('sl-image-when'),
+      imageLink: byId('sl-image-link'),
+      coverageMeta: byId('sl-coverage-meta'),
+      panoButtons: all('[data-sl-pano]'),
+      // Held, not re-queried: EXPAND moves them to <body> with the viewer.
+      renderButtons: all('[data-sl-render]'),
+    };
+  }
+
+  listen(target, type, handler, options = {}) {
+    target?.addEventListener(type, handler, {
+      ...options,
+      signal: this.listeners.signal,
+    });
+  }
+
+  _bind() {
+    const el = this._elements;
+    if (!this.root) return;
+    this.layer.attachViewerHost?.(el.viewer);
+
+    this.listen(el.status, 'click', () => this._toggleEnabled());
+    this.listen(el.providerChips, 'click', (event) => {
+      const button = event.target?.closest?.('.data-toggle-chip');
+      if (!button || button.disabled) return;
+      // Without a key the chips stay focusable for their tooltip; a click
+      // says the same thing rather than switching on a layer that cannot draw.
+      if (this._view?.controlsDisabled) {
+        if (button.title) this.actions.showToast?.(button.title);
+        return;
+      }
+      this._toggleProvider(button.dataset.chipId);
+    });
+    for (const button of el.panoButtons) {
+      this.listen(button, 'click', () =>
+        this._setParams({ pano: button.dataset.slPano }),
+      );
+    }
+    this._bindRadioGroup(el.panoButtons);
+    this._bindRadioGroup(el.renderButtons);
+    // The readout follows the thumb; coverage is rebuilt once, on release.
+    const sinceDays = () =>
+      SINCE_STOPS[Number(el.sinceRange?.value) || 0]?.days ?? 0;
+    this.listen(el.sinceRange, 'input', () => {
+      const label = SINCE_STOPS[Number(el.sinceRange.value) || 0].label;
+      if (el.sinceLabel) el.sinceLabel.textContent = label;
+      el.sinceRange.setAttribute('aria-valuetext', label);
+    });
+    this.listen(el.sinceRange, 'change', () =>
+      this._setParams({ sinceDays: sinceDays() }),
+    );
+    this.listen(el.followBtn, 'click', () => {
+      this.layer.setFollow?.(!(this._state?.street?.follow === true));
+    });
+    this.listen(el.viewerClose, 'click', () => this.layer.closeViewer?.());
+    this.listen(el.viewerExpand, 'click', () =>
+      this.setViewerExpanded(!this.isViewerExpanded(), { dock: true }),
+    );
+    for (const button of el.renderButtons) {
+      this.listen(button, 'click', () => {
+        const mode = button.dataset.slRender;
+        this.layer.setViewerRenderMode?.(mode);
+        try {
+          localStorage.setItem(RENDER_MODE_KEY, mode);
+        } catch {
+          /* storage unavailable */
+        }
+      });
+    }
+    try {
+      const stored = localStorage.getItem(RENDER_MODE_KEY);
+      if (stored === 'fill' || stored === 'letterbox')
+        this.layer.setViewerRenderMode?.(stored);
+    } catch {
+      /* storage unavailable */
+    }
+    // The expanded viewer is a dialog: Esc shrinks it, Tab stays inside.
+    // Listen on the document, ahead of everything else, so both still hold
+    // once focus has left it (a click on the globe) and Esc never reaches
+    // the map's own handler, which would clear the selected sequence.
+    this.listen(document, 'keydown', (event) => this._onDialogKey(event), {
+      capture: true,
+    });
+    const endRestoreWindow = () => {
+      this._restoreWindow = false;
+    };
+    for (const type of ['pointerdown', 'keydown'])
+      this.listen(document, type, endRestoreWindow, { capture: true });
+    // MapillaryJS only tracks window resizes; the panel resizes on its own.
+    if (typeof ResizeObserver === 'function' && el.viewer) {
+      this._resizeObserver = new ResizeObserver(() => this._requestResize());
+      this._resizeObserver.observe(el.viewer);
+    }
+  }
+
+  /** ARIA radio keys. Selecting clicks the radio, so keys and pointer share a path. */
+  _bindRadioGroup(buttons) {
+    buttons.forEach((button, index) => {
+      this.listen(button, 'keydown', (event) => {
+        let next = null;
+        if (event.key in RADIO_STEPS) {
+          const count = buttons.length;
+          next = buttons[(index + RADIO_STEPS[event.key] + count) % count];
+        } else if (event.key === 'Home') next = buttons[0];
+        else if (event.key === 'End') next = buttons[buttons.length - 1];
+        if (!next) return;
+        event.preventDefault();
+        next.focus();
+        if (next !== button) next.click();
+      });
+    });
+  }
+
+  /**
+   * Refit the viewer once per frame. Skips a hidden (0×0) viewer, which would
+   * ask for tiles at z=NaN; the observer fires again once it has a size.
+   */
+  _requestResize() {
+    if (this._resizeQueued) return;
+    this._resizeQueued = true;
+    requestAnimationFrame(() => {
+      this._resizeQueued = false;
+      const viewer = this._elements.viewer;
+      if (this.destroyed) return;
+      if (viewer && (viewer.clientWidth === 0 || viewer.clientHeight === 0))
+        return;
+      this.layer.resizeViewer?.();
+    });
+  }
+
+  async _ensureEnabled() {
+    if (this.actions.isEnabled?.()) return true;
+    try {
+      await this.actions.setEnabled?.(true);
+    } catch (error) {
+      this.actions.showToast?.(
+        error?.message || 'Street Level could not start',
+      );
+      return false;
+    }
+    return this.actions.isEnabled?.() === true;
+  }
+
+  async _toggleEnabled() {
+    const enabled = this.actions.isEnabled?.() === true;
+    try {
+      await this.actions.setEnabled?.(!enabled);
+    } catch (error) {
+      this.actions.showToast?.(error?.message || 'Street Level toggle failed');
+    }
+  }
+
+  /** Through the data manager, so saved state and share links record it. */
+  _setParams(params) {
+    if (this.actions.setParams)
+      this.actions.setParams(params, { origin: 'user' });
+    else this.layer.setParams?.(params);
+  }
+
+  /**
+   * Lighting a chip turns the layer on; darkening the last lit one turns the
+   * layer off but keeps the provider on, so the layer comes back with it.
+   */
+  async _toggleProvider(providerId) {
+    const chip = this._view?.providers.find((entry) => entry.id === providerId);
+    if (!chip) return;
+    if (!chip.active) {
+      this._setParams({ [providerId]: true });
+      await this._ensureEnabled();
+      return;
+    }
+    const othersLit = this._view.providers.some(
+      (entry) => entry.id !== providerId && entry.active,
+    );
+    if (othersLit) {
+      this._setParams({ [providerId]: false });
+      return;
+    }
+    try {
+      await this.actions.setEnabled?.(false);
+    } catch (error) {
+      this.actions.showToast?.(error?.message || 'Street Level toggle failed');
+    }
+  }
+
+  connect() {
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    if (this.destroyed || !this.root) return;
+    this._unsubscribeEnableRequests?.();
+    this._unsubscribeEnableRequests =
+      this.actions.subscribeEnableRequests?.((origin) => {
+        this._explicitEnable = isExplicitLayerStateOrigin(origin);
+      }) || null;
+    this._unsubscribe = this.layer.subscribe?.((state) => this.render(state));
+    if (this.layer.getUIState) this.render(this.layer.getUIState());
+  }
+
+  onPanelResized() {
+    this._requestResize();
+  }
+
+  setCollapsed(collapsed, options = {}) {
+    this.actions.setPanelCollapsed?.(collapsed, options);
+    if (!collapsed) this._requestResize();
+  }
+
+  isViewerExpanded() {
+    return (
+      this._elements.viewerWrap?.classList.contains(
+        'sl-viewer-wrap-expanded',
+      ) === true
+    );
+  }
+
+  /**
+   * A user's shrink (`dock`) also returns a floating panel to its rail, so the
+   * viewer does not land in a window over the globe.
+   */
+  setViewerExpanded(expanded, { dock = false } = {}) {
+    const wrap = this._elements.viewerWrap;
+    if (!wrap) return;
+    const on = expanded === true;
+    if (on === this.isViewerExpanded()) return;
+    if (on) {
+      // Lift the viewer out of the panel: the panel's backdrop-filter would
+      // otherwise pin a fixed-position child inside it.
+      this._wrapHome = { parent: wrap.parentNode, next: wrap.nextSibling };
+      this._expandReturnFocus = document.activeElement;
+      document.body.appendChild(wrap);
+      wrap.classList.add('sl-viewer-wrap-expanded');
+      wrap.setAttribute('role', 'dialog');
+      wrap.setAttribute('aria-modal', 'true');
+      wrap.setAttribute('aria-label', 'Street-level image');
+      wrap.tabIndex = -1;
+      wrap.focus({ preventScroll: true });
+      this._watchModal(true);
+    } else {
+      // Release the application first: the focus returned below may be in it.
+      this._watchModal(false);
+      wrap.classList.remove('sl-viewer-wrap-expanded');
+      wrap.removeAttribute('role');
+      wrap.removeAttribute('aria-modal');
+      wrap.removeAttribute('aria-label');
+      wrap.removeAttribute('tabindex');
+      if (this._wrapHome?.parent)
+        this._wrapHome.parent.insertBefore(wrap, this._wrapHome.next);
+      this._wrapHome = null;
+      const target = this._expandReturnFocus;
+      this._expandReturnFocus = null;
+      // A closed image hides the wrap: focus inside it would drop to <body>.
+      const reachable = (node) =>
+        node?.isConnected &&
+        typeof node.focus === 'function' &&
+        !(wrap.hidden && wrap.contains(node));
+      if (reachable(target)) target.focus({ preventScroll: true });
+      else if (reachable(this._elements.viewerExpand))
+        this._elements.viewerExpand.focus({ preventScroll: true });
+      else this._focusPanelControl();
+    }
+    const button = this._elements.viewerExpand;
+    if (button) {
+      const icon = button.querySelector('.sl-btn-icon');
+      const text = button.querySelector('.sl-btn-text');
+      if (icon) icon.textContent = on ? '⤡' : '⤢';
+      if (text) text.textContent = on ? 'SHRINK' : 'EXPAND';
+      button.setAttribute('aria-pressed', String(on));
+      button.setAttribute('aria-label', on ? 'Shrink' : 'Expand');
+    }
+    if (!on && dock) this.actions.dockPanel?.();
+    this._requestResize();
+  }
+
+  /** Park focus on a control that stays on screen while the viewer is hidden. */
+  _focusPanelControl() {
+    const el = this._elements;
+    const target =
+      el.status || el.providerChips?.querySelector('.data-toggle-chip');
+    target?.focus?.({ preventScroll: true });
+  }
+
+  /** Clean View, recording and the cockpit hide the expanded viewer with CSS. */
+  _isDialogShown() {
+    if (!this.isViewerExpanded()) return false;
+    const wrap = this._elements.viewerWrap;
+    return (
+      typeof wrap.checkVisibility !== 'function' ||
+      // `checkVisibilityCSS` is the option's name before Chrome 121.
+      wrap.checkVisibility({
+        visibilityProperty: true,
+        checkVisibilityCSS: true,
+      })
+    );
+  }
+
+  /**
+   * Make every other <body> child inert while the expanded viewer is shown.
+   * A CSS-hidden viewer releases them so a hidden modal never leaves the app
+   * dead. Returns whether the dialog is shown.
+   */
+  _syncModal() {
+    if (this.destroyed || !this._isDialogShown()) {
+      this._releaseModal();
+      return false;
+    }
+    const wrap = this._elements.viewerWrap;
+    for (const node of [...(document.body?.children || [])]) {
+      if (node === wrap || node.inert) continue;
+      node.inert = true;
+      this._inerted.add(node);
+    }
+    return true;
+  }
+
+  _releaseModal() {
+    for (const node of this._inerted) node.inert = false;
+    this._inerted.clear();
+  }
+
+  /** Re-check the modal when <body> changes class or gains a child. */
+  _watchModal(on) {
+    this._modalObserver?.disconnect();
+    this._modalObserver = null;
+    if (!on) return this._releaseModal();
+    if (typeof MutationObserver === 'function' && document.body) {
+      this._modalObserver = new MutationObserver(() => this._syncModal());
+      this._modalObserver.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class'],
+        childList: true,
+      });
+    }
+    this._syncModal();
+  }
+
+  _onDialogKey(event) {
+    if (event.key !== 'Escape' && event.key !== 'Tab') return;
+    if (!this._syncModal()) return;
+    // Only keys meant for the viewer: from inside it, from nowhere (<body>)
+    // or from the globe. A field elsewhere (search) keeps its Esc and Tab.
+    const target = event.target;
+    const wrap = this._elements.viewerWrap;
+    if (
+      !wrap.contains(target) &&
+      target !== document.body &&
+      target !== document.documentElement &&
+      !target?.closest?.('#cesiumContainer')
+    )
+      return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.setViewerExpanded(false, { dock: true });
+      return;
+    }
+    // A radio off the roving tab stop (tabindex -1) is not a stop either.
+    const focusable = [...wrap.querySelectorAll(FOCUSABLE)].filter(
+      (node) =>
+        node.getAttribute('tabindex') !== '-1' &&
+        (node.offsetParent !== null || node === document.activeElement),
+    );
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    } else if (!wrap.contains(document.activeElement)) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  render(state) {
+    if (this.destroyed || !state || !this.root) return;
+    this._state = state;
+    const view = presentStreetLevelPanel(state);
+    this._view = view;
+    this._renderHeader(view);
+    this._renderGate(view);
+    this._renderProviders(view);
+    this._renderError(view);
+    this._renderFilters(view);
+    this._renderViewer(view);
+    this._renderMeta(view);
+    this._reactToTransitions(view, state);
+  }
+
+  _renderHeader(view) {
+    const el = this._elements;
+    setProp(this.root.dataset, 'slEnabled', String(view.enabled));
+    if (el.status) {
+      setProp(el.status, 'textContent', view.status.text);
+      setProp(
+        el.status,
+        'className',
+        `sl-status${view.status.tone ? ` is-${view.status.tone}` : ''}`,
+      );
+      setAttr(el.status, 'aria-pressed', String(view.status.pressed));
+      setProp(el.status, 'title', view.status.title);
+    }
+  }
+
+  _renderGate(view) {
+    setProp(this._elements.controls, 'disabled', view.controlsDisabled);
+  }
+
+  _renderProviders(view) {
+    syncChipGroup(this._elements.providerChips, view.providers);
+  }
+
+  _renderError(view) {
+    const el = this._elements;
+    if (!el.error) return;
+    setProp(el.error, 'hidden', !view.error);
+    setProp(el.errorText, 'textContent', view.error || '');
+  }
+
+  _renderRadios(buttons, isChecked) {
+    for (const button of buttons) {
+      const checked = isChecked(button);
+      button.classList.toggle('is-active', checked);
+      setAttr(button, 'aria-checked', String(checked));
+      setAttr(button, 'tabindex', checked ? '0' : '-1');
+    }
+  }
+
+  _renderFilters(view) {
+    const el = this._elements;
+    this._renderRadios(
+      el.panoButtons,
+      (button) => button.dataset.slPano === view.filter.pano,
+    );
+    if (el.sinceRange) {
+      // Never move the thumb under the user's hand; once the committed value
+      // matches the thumb, show the full readout with its cut-off date.
+      const index = String(view.since.index);
+      if (
+        document.activeElement !== el.sinceRange &&
+        el.sinceRange.value !== index
+      )
+        el.sinceRange.value = index;
+      if (el.sinceRange.value === index) {
+        setProp(el.sinceLabel, 'textContent', view.since.label);
+        setAttr(el.sinceRange, 'aria-valuetext', view.since.label);
+      }
+    }
+    // Rebuild when the swatches change, not only their count: one provider
+    // can replace another with the same number of entries.
+    const legendKey = view.legend
+      .map((entry) => `${entry.key}:${entry.color}:${entry.label}`)
+      .join('|');
+    if (el.legend && this._legendKey !== legendKey) {
+      this._legendKey = legendKey;
+      el.legend.replaceChildren(
+        ...view.legend.map((entry) => {
+          const item = document.createElement('li');
+          const swatch = document.createElement('i');
+          swatch.className = 'sl-legend-swatch';
+          swatch.style.background = entry.color;
+          const label = document.createElement('span');
+          label.textContent = entry.label;
+          item.append(swatch, label);
+          return item;
+        }),
+      );
+    }
+  }
+
+  _renderViewer(view) {
+    const el = this._elements;
+    const { viewer } = view;
+    const wrap = el.viewerWrap;
+    if (wrap) {
+      // Closing the image (its × button) hides the wrap: move focus out
+      // first, or it drops to <body>. A shrink below returns it itself.
+      if (
+        !viewer.open &&
+        !wrap.hidden &&
+        !this.isViewerExpanded() &&
+        wrap.contains(document.activeElement)
+      )
+        this._focusPanelControl();
+      setProp(wrap, 'hidden', !viewer.open);
+    }
+    if (!viewer.open && this.isViewerExpanded()) this.setViewerExpanded(false);
+    setProp(el.viewerPlaceholder, 'hidden', !viewer.loading);
+    if (el.followBtn) {
+      setAttr(el.followBtn, 'aria-pressed', String(viewer.follow.pressed));
+      setProp(el.followBtn, 'disabled', viewer.follow.disabled);
+      setProp(el.followBtn, 'title', viewer.follow.title);
+    }
+    this._renderRadios(
+      el.renderButtons,
+      (button) => button.dataset.slRender === viewer.renderMode,
+    );
+    if (!viewer.open) return;
+    setProp(el.imageBy, 'textContent', viewer.captionLeft);
+    setProp(el.imageWhen, 'textContent', viewer.captionRight);
+    if (el.imageLink) {
+      setProp(el.imageLink, 'hidden', !viewer.link);
+      if (viewer.link) setAttr(el.imageLink, 'href', viewer.link);
+      if (viewer.linkLabel)
+        setProp(el.imageLink, 'textContent', viewer.linkLabel);
+    }
+  }
+
+  _renderMeta(view) {
+    setProp(this._elements.coverageMeta, 'textContent', view.meta);
+  }
+
+  /**
+   * Open the panel on a switch-on or when an image opens. Never persisted:
+   * the stored collapse state stays the user's own choice.
+   */
+  _reactToTransitions(view, state) {
+    const enabled = view.enabled;
+    if (enabled && this._wasEnabled === false) {
+      // A restore must not reopen a panel the user or a share link kept
+      // collapsed. Without request origins, the restore window decides.
+      const preference = this.root.dataset?.collapsedPreference;
+      const restoring =
+        this._explicitEnable === null
+          ? this._restoreWindow &&
+            (preference === 'stored' || preference === 'share')
+          : !this._explicitEnable;
+      if (!restoring) this.setCollapsed(false, { persist: false });
+      this._restoreWindow = false;
+      this._explicitEnable = this._explicitEnable === null ? null : false;
+    }
+    this._wasEnabled = enabled;
+    // Other size changes reach the viewer through the ResizeObserver; opening
+    // asks for one resize because the element may not have a size yet.
+    const open = state.street.open === true;
+    if (open && !this._wasStreetOpen)
+      this.setCollapsed(false, { persist: false });
+    this._wasStreetOpen = open;
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.setViewerExpanded(false);
+    this._watchModal(false);
+    this.listeners.abort();
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    this._unsubscribeEnableRequests?.();
+    this._unsubscribeEnableRequests = null;
+    this.layer.attachViewerHost?.(null);
+  }
+}

src/ui/streetLevelPresentation.js

@@ -0,0 +1,162 @@
+import { keySetupRequirement } from '../keySetupCore.mjs';
+
+// Street Level UI state to panel strings and flags. Pure, so it is testable.
+
+const DAY_MS = 86_400_000;
+
+/** SINCE slider stops, in relative days so a share link keeps its meaning. */
+export const SINCE_STOPS = Object.freeze([
+  Object.freeze({ days: 0, label: 'ANY DATE' }),
+  Object.freeze({ days: 3652, label: 'LAST 10 YEARS' }),
+  Object.freeze({ days: 1826, label: 'LAST 5 YEARS' }),
+  Object.freeze({ days: 1095, label: 'LAST 3 YEARS' }),
+  Object.freeze({ days: 730, label: 'LAST 2 YEARS' }),
+  Object.freeze({ days: 365, label: 'LAST YEAR' }),
+  Object.freeze({ days: 182, label: 'LAST 6 MONTHS' }),
+  Object.freeze({ days: 91, label: 'LAST 3 MONTHS' }),
+  Object.freeze({ days: 30, label: 'LAST MONTH' }),
+]);
+
+/** The exact stop for a day count, else the nearest one. */
+export function sinceStopIndex(days) {
+  const value = Number(days) || 0;
+  if (value <= 0) return 0;
+  let best = 1;
+  for (let i = 1; i < SINCE_STOPS.length; i++)
+    if (
+      Math.abs(SINCE_STOPS[i].days - value) <
+      Math.abs(SINCE_STOPS[best].days - value)
+    )
+      best = i;
+  return best;
+}
+
+function presentSince(days, now) {
+  const value = Number(days) || 0;
+  const index = sinceStopIndex(value);
+  if (value <= 0) return { index, days: 0, label: 'ANY DATE' };
+  const stop = SINCE_STOPS[index];
+  const window = stop.days === value ? stop.label : `LAST ${value} DAYS`;
+  return {
+    index,
+    days: value,
+    label: `${window} · SINCE ${formatDate(now - value * DAY_MS)}`,
+  };
+}
+
+function formatDate(ms) {
+  if (!Number.isFinite(ms)) return '';
+  try {
+    return new Date(ms).toISOString().slice(0, 10);
+  } catch {
+    return '';
+  }
+}
+
+function presentStatus(state) {
+  const pressed = state.enabled === true;
+  const title = pressed ? 'Turn Street Level off' : 'Turn Street Level on';
+  if (state.keyRejected)
+    return { text: 'KEY REJECTED', tone: 'warn', pressed, title };
+  if (state.keyRequired)
+    return { text: 'KEY REQUIRED', tone: 'warn', pressed, title };
+  if (state.coverage.loading)
+    return { text: 'LOADING', tone: 'busy', pressed, title };
+  return pressed
+    ? { text: 'ON', tone: 'on', pressed, title }
+    : { text: 'OFF', tone: '', pressed, title };
+}
+
+/** A chip is lit only while the layer and its provider are both on. */
+function presentProviders(state) {
+  const enabled = state.enabled === true;
+  return (state.providers || []).map((provider) => {
+    const keyRequired = provider.keyRequired === true;
+    const on = enabled && provider.on === true;
+    let title = `${provider.name} imagery ${on ? 'on' : 'off'}`;
+    if (provider.keyRejected && provider.error)
+      title = `${provider.name}: ${provider.error}`;
+    else if (keyRequired && provider.requiresKeyId)
+      title = `${provider.name}: ${keySetupRequirement(provider.requiresKeyId)}`;
+    else if (provider.error) title = `${provider.name}: ${provider.error}`;
+    return {
+      id: provider.id,
+      label: provider.label,
+      color: provider.color || null,
+      title,
+      active: on,
+      disabled: false,
+      state: keyRequired
+        ? 'error'
+        : on && provider.loading
+          ? 'loading'
+          : on
+            ? 'active'
+            : 'idle',
+      busy: on && provider.loading === true,
+    };
+  });
+}
+
+function presentViewer(state) {
+  const { street } = state;
+  const right = [];
+  if (street.isPano) right.push('360°');
+  if (Number.isFinite(street.bearing))
+    right.push(`${Math.round(street.bearing)}°`);
+  if (street.capturedAt) right.push(formatDate(street.capturedAt));
+  return {
+    open: street.open === true,
+    loading: street.loading === true && !street.imageId,
+    renderMode: street.renderMode === 'fill' ? 'fill' : 'letterbox',
+    captionLeft: street.creator ? `Image by ${street.creator}` : '',
+    captionRight: right.join(' · '),
+    link: street.externalUrl || null,
+    linkLabel: street.providerLabel ? `${street.providerLabel} ↗` : '',
+    follow: {
+      pressed: street.follow === true,
+      disabled: street.open !== true || street.followAvailable !== true,
+      title:
+        street.followAvailable === true
+          ? 'Camera follows view: move the globe camera wherever the street-level view looks'
+          : 'Camera follow needs the Google 3D map: choose Google 3D under MAP SOURCE',
+    },
+  };
+}
+
+function presentMeta(state) {
+  if (!state.enabled) return 'Switch a provider on to draw its coverage.';
+  if (state.sequence.selectedId)
+    return state.sequence.loading
+      ? 'Loading this sequence…'
+      : `${state.sequence.images.toLocaleString()} images in this sequence · Esc clears`;
+  if (state.coverage.count > 0)
+    return `${state.coverage.count.toLocaleString()} sequences in view · click a line for its photos`;
+  return state.coverage.hint || '';
+}
+
+/** @param {{now?: number}} [options] Clock for the SINCE readout. */
+export function presentStreetLevelPanel(state, { now = Date.now() } = {}) {
+  const enabled = state.enabled === true;
+  const keyRequired = state.keyRequired === true;
+  const filter = state.filter || { pano: 'all', sinceDays: 0 };
+  // A missing key is already shown by the status and chip tooltip; only a
+  // rejected key keeps its error line, since that message names the fix.
+  const keyMissing = keyRequired && state.keyRejected !== true;
+  return {
+    enabled,
+    keyRequired,
+    status: presentStatus(state),
+    controlsDisabled: keyRequired,
+    providers: presentProviders(state),
+    error: keyMissing
+      ? null
+      : state.street.error || state.coverage.error || null,
+    filter: { pano: filter.pano, sinceDays: Number(filter.sinceDays) || 0 },
+    since: presentSince(filter.sinceDays, now),
+    legend: state.legend || [],
+    viewer: presentViewer(state),
+    meta: presentMeta(state),
+    wantsOpen: state.street.open === true,
+  };
+}

src/ui/streetLevelPresentation.test.mjs

@@ -0,0 +1,390 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  presentStreetLevelPanel,
+  SINCE_STOPS,
+  sinceStopIndex,
+} from './streetLevelPresentation.js';
+import { providerSnapshot } from '../testSupport/streetLevelFakes.mjs';
+
+const provider = providerSnapshot;
+
+function snapshot(overrides = {}) {
+  const base = {
+    enabled: false,
+    keyRequired: false,
+    filter: { pano: 'all', sinceDays: 0 },
+    providers: [provider()],
+    coverage: { loading: false, count: 0, hint: '', error: null },
+    legend: [
+      { key: 'mapillary', label: 'Mapillary', color: '#05cb63' },
+      { key: 'selected', label: 'Selected', color: '#00d4ff' },
+    ],
+    sequence: { providerId: null, selectedId: null, images: 0, loading: false },
+    street: {
+      open: false,
+      follow: false,
+      loading: false,
+      error: null,
+      providerId: null,
+      providerName: null,
+      providerLabel: null,
+      imageId: null,
+      position: null,
+      bearing: null,
+      isPano: false,
+      capturedAt: null,
+      sequenceId: null,
+      creator: null,
+      externalUrl: null,
+      renderMode: 'letterbox',
+    },
+  };
+  return deepMerge(base, overrides);
+}
+
+function deepMerge(target, source) {
+  const out = { ...target };
+  for (const [key, value] of Object.entries(source)) {
+    out[key] =
+      value &&
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      target[key] &&
+      typeof target[key] === 'object'
+        ? deepMerge(target[key], value)
+        : value;
+  }
+  return out;
+}
+
+test('a key-gated layer disables every control and flags KEY REQUIRED', () => {
+  const view = presentStreetLevelPanel(snapshot({ keyRequired: true }));
+  assert.equal(view.controlsDisabled, true);
+  assert.equal(view.status.text, 'KEY REQUIRED');
+  assert.equal(view.status.tone, 'warn');
+});
+
+test('KEY REQUIRED shows no raw error code under the pill', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      keyRequired: true,
+      coverage: { error: 'no_key' },
+      providers: [provider({ keyRequired: true, error: 'no_key' })],
+    }),
+  );
+  assert.equal(view.status.text, 'KEY REQUIRED');
+  assert.equal(view.error, null);
+  // The chip still says how to add the key.
+  assert.match(view.providers[0].title, /^Mapillary: Needs /);
+});
+
+test('a key Mapillary rejected reads KEY REJECTED and names the fix', () => {
+  const error =
+    'Mapillary rejected MAPILLARY_CLIENT_TOKEN — replace it in Provider Settings';
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      keyRequired: true,
+      keyRejected: true,
+      coverage: { error },
+      providers: [provider({ keyRequired: true, keyRejected: true, error })],
+    }),
+  );
+  assert.equal(view.status.text, 'KEY REJECTED');
+  assert.equal(view.status.tone, 'warn');
+  assert.equal(view.controlsDisabled, true);
+  assert.equal(view.error, error);
+  assert.equal(view.providers[0].state, 'error');
+  assert.equal(view.providers[0].title, `Mapillary: ${error}`);
+});
+
+test('a key problem outranks loading on the pill: KEY REJECTED, then KEY REQUIRED (M65)', () => {
+  // A keyless provider can still report loading (its status check, a retry):
+  // the pill must say what is wrong, not that something is on its way.
+  const loading = { enabled: true, coverage: { loading: true } };
+  assert.equal(
+    presentStreetLevelPanel(snapshot({ ...loading, keyRequired: true })).status
+      .text,
+    'KEY REQUIRED',
+  );
+  assert.equal(
+    presentStreetLevelPanel(
+      snapshot({ ...loading, keyRequired: true, keyRejected: true }),
+    ).status.text,
+    'KEY REJECTED',
+  );
+});
+
+test('the header pill is the on/off switch and reads OFF, LOADING or ON', () => {
+  assert.deepEqual(presentStreetLevelPanel(snapshot()).status, {
+    text: 'OFF',
+    tone: '',
+    pressed: false,
+    title: 'Turn Street Level on',
+  });
+  assert.deepEqual(
+    presentStreetLevelPanel(
+      snapshot({ enabled: true, coverage: { loading: true } }),
+    ).status,
+    {
+      text: 'LOADING',
+      tone: 'busy',
+      pressed: true,
+      title: 'Turn Street Level off',
+    },
+  );
+  assert.deepEqual(
+    presentStreetLevelPanel(snapshot({ enabled: true })).status,
+    { text: 'ON', tone: 'on', pressed: true, title: 'Turn Street Level off' },
+  );
+  assert.equal(
+    presentStreetLevelPanel(snapshot({ enabled: true, keyRequired: true }))
+      .status.pressed,
+    true,
+    'a keyless layer that is on can still be switched off',
+  );
+});
+
+test('one chip per provider: on, off, loading, and keyless as an error chip', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      providers: [
+        provider(),
+        provider({
+          id: 'panoramax',
+          name: 'Panoramax',
+          label: 'PANORAMAX',
+          on: false,
+          requiresKeyId: null,
+        }),
+        provider({
+          id: 'kartaview',
+          name: 'KartaView',
+          label: 'KARTAVIEW',
+          loading: true,
+          requiresKeyId: null,
+        }),
+        provider({
+          id: 'google-street-view',
+          name: 'Google Street View',
+          label: 'STREET VIEW',
+          keyRequired: true,
+          requiresKeyId: 'google-maps',
+        }),
+      ],
+    }),
+  );
+  assert.deepEqual(
+    view.providers.map((chip) => [chip.id, chip.active, chip.state, chip.busy]),
+    [
+      ['mapillary', true, 'active', false],
+      ['panoramax', false, 'idle', false],
+      ['kartaview', true, 'loading', true],
+      ['google-street-view', true, 'error', false],
+    ],
+  );
+  assert.equal(view.providers[0].label, 'MAPILLARY');
+  assert.equal(view.providers[1].title, 'Panoramax imagery off');
+  assert.match(
+    view.providers[3].title,
+    /^Google Street View: Needs GOOGLE_MAPS_API_KEY/,
+  );
+  assert.ok(view.providers.every((chip) => chip.disabled === false));
+});
+
+test('a provider error is explained on its chip', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({ providers: [provider({ error: 'Tile HTTP 502' })] }),
+  );
+  assert.equal(view.providers[0].title, 'Mapillary: Tile HTTP 502');
+});
+
+test('errors from the viewer or the coverage web surface in one alert', () => {
+  assert.equal(presentStreetLevelPanel(snapshot()).error, null);
+  assert.equal(
+    presentStreetLevelPanel(
+      snapshot({ street: { error: 'Image could not be opened' } }),
+    ).error,
+    'Image could not be opened',
+  );
+  assert.equal(
+    presentStreetLevelPanel(snapshot({ coverage: { error: 'Tile HTTP 502' } }))
+      .error,
+    'Tile HTTP 502',
+  );
+});
+
+test('chips are dark while the layer is off, so the chip is the layer switch', () => {
+  const view = presentStreetLevelPanel(snapshot({ enabled: false }));
+  assert.deepEqual(
+    view.providers.map((chip) => [chip.id, chip.active, chip.state]),
+    [['mapillary', false, 'idle']],
+  );
+  assert.equal(view.providers[0].title, 'Mapillary imagery off');
+  assert.equal(view.enableButton, undefined, 'no separate ON/OFF button');
+  const keyless = presentStreetLevelPanel(
+    snapshot({ providers: [provider({ keyRequired: true })] }),
+  );
+  assert.equal(
+    keyless.providers[0].state,
+    'error',
+    'a keyless chip still says why',
+  );
+});
+
+test('the SINCE slider runs from any date on the left to the last month on the right', () => {
+  assert.deepEqual(
+    SINCE_STOPS.map((stop) => stop.days),
+    [0, 3652, 1826, 1095, 730, 365, 182, 91, 30],
+  );
+  assert.equal(sinceStopIndex(0), 0);
+  assert.equal(sinceStopIndex(365), 5);
+  assert.equal(
+    sinceStopIndex(400),
+    5,
+    'an off-stop link lands on the nearest stop',
+  );
+  assert.equal(sinceStopIndex(-4), 0);
+});
+
+test('the SINCE readout names the window and the cut-off date it means today', () => {
+  const now = Date.UTC(2026, 8, 25);
+  const any = presentStreetLevelPanel(snapshot(), { now });
+  assert.deepEqual(any.since, { index: 0, days: 0, label: 'ANY DATE' });
+  const year = presentStreetLevelPanel(
+    snapshot({ filter: { pano: 'pano', sinceDays: 365 } }),
+    { now },
+  );
+  assert.deepEqual(year.filter, { pano: 'pano', sinceDays: 365 });
+  assert.deepEqual(year.since, {
+    index: 5,
+    days: 365,
+    label: 'LAST YEAR · SINCE 2025-09-25',
+  });
+  const custom = presentStreetLevelPanel(
+    snapshot({ filter: { pano: 'all', sinceDays: 400 } }),
+    { now },
+  );
+  assert.equal(custom.since.index, 5);
+  assert.equal(custom.since.label, 'LAST 400 DAYS · SINCE 2025-08-21');
+});
+
+test('legend passes through in the layer’s order', () => {
+  const view = presentStreetLevelPanel(snapshot());
+  assert.deepEqual(
+    view.legend.map((entry) => entry.key),
+    ['mapillary', 'selected'],
+  );
+});
+
+test('each provider chip carries its source colour', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      providers: [
+        provider(),
+        provider({ id: 'panoramax', label: 'PANORAMAX', color: '#a66bff' }),
+      ],
+    }),
+  );
+  assert.deepEqual(
+    view.providers.map((chip) => [chip.id, chip.color]),
+    [
+      ['mapillary', '#05cb63'],
+      ['panoramax', '#a66bff'],
+    ],
+  );
+});
+
+test('the meta line never mixes the visible-sequence count with the selected sequence', () => {
+  assert.equal(
+    presentStreetLevelPanel(snapshot()).meta,
+    'Switch a provider on to draw its coverage.',
+  );
+  const browsing = presentStreetLevelPanel(
+    snapshot({ enabled: true, coverage: { count: 812 } }),
+  );
+  assert.match(browsing.meta, /^812 sequences in view · click a line/);
+  const selected = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      coverage: { count: 812 },
+      sequence: { selectedId: 'abc', images: 33 },
+    }),
+  );
+  assert.equal(selected.meta, '33 images in this sequence · Esc clears');
+  assert.doesNotMatch(selected.meta, /sequences in view/);
+  const hinted = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      coverage: { hint: 'Point the camera at the globe' },
+    }),
+  );
+  assert.equal(hinted.meta, 'Point the camera at the globe');
+});
+
+test('viewer caption reads "Image by" left, date right, and links to the provider', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      enabled: true,
+      street: {
+        open: true,
+        providerId: 'mapillary',
+        providerName: 'Mapillary',
+        providerLabel: 'MAPILLARY',
+        imageId: '1814275685699406',
+        creator: 'mapfool',
+        capturedAt: Date.UTC(2023, 9, 8),
+        bearing: 93.4,
+        isPano: true,
+        externalUrl:
+          'https://www.mapillary.com/app/?pKey=1814275685699406&focus=photo',
+        followAvailable: true,
+      },
+    }),
+  );
+  assert.equal(view.viewer.captionLeft, 'Image by mapfool');
+  assert.equal(view.viewer.captionRight, '360° · 93° · 2023-10-08');
+  assert.equal(
+    view.viewer.link,
+    'https://www.mapillary.com/app/?pKey=1814275685699406&focus=photo',
+  );
+  assert.equal(view.viewer.linkLabel, 'MAPILLARY ↗');
+  assert.equal(view.viewer.follow.disabled, false);
+  assert.equal(view.wantsOpen, true);
+});
+
+test('an image without a creator name leaves the left caption empty', () => {
+  const view = presentStreetLevelPanel(
+    snapshot({
+      street: { open: true, imageId: '1', capturedAt: Date.UTC(2024, 0, 2) },
+    }),
+  );
+  assert.equal(view.viewer.captionLeft, '');
+  assert.equal(view.viewer.captionRight, '2024-01-02');
+  assert.equal(view.viewer.link, null);
+  assert.equal(view.viewer.linkLabel, '');
+});
+
+test('FOLLOW is disabled off Google 3D and says where to switch', () => {
+  const open = { open: true, imageId: '1' };
+  const off3d = presentStreetLevelPanel(
+    snapshot({ street: { ...open, followAvailable: false } }),
+  );
+  assert.equal(off3d.viewer.follow.disabled, true);
+  assert.match(
+    off3d.viewer.follow.title,
+    /needs the Google 3D map.*MAP SOURCE/,
+  );
+  const on3d = presentStreetLevelPanel(
+    snapshot({ street: { ...open, followAvailable: true } }),
+  );
+  assert.equal(on3d.viewer.follow.disabled, false);
+  assert.match(on3d.viewer.follow.title, /^Camera follows view/);
+  const closed = presentStreetLevelPanel(
+    snapshot({ street: { open: false, followAvailable: true } }),
+  );
+  assert.equal(closed.viewer.follow.disabled, true, 'nothing to follow');
+});

src/ui/styles/cockpit.css

@@ -1942,7 +1942,8 @@ body.cockpit-mode
     #command-dock,
     #military-awareness-panel,
     #military-awareness-direction-overlay,
-    #cockpit-entry
+    #cockpit-entry,
+    .sl-viewer-wrap-expanded
   ) {
   display: none !important;
 }

src/ui/styles/controls.css

@@ -103,6 +103,115 @@
   opacity: 0.96;
 }
 
+/* ── Portable rail panels ────────────────────
+   Rail placement in layers.css is guarded with :not(.panel-floating), so
+   these rules only have to beat a panel's base placement (one id). */
+.panel-portable .panel-header {
+  cursor: grab;
+}
+.panel-portable.panel-dragging .panel-header {
+  cursor: grabbing;
+}
+#right-context-rail > .panel-floating {
+  position: fixed;
+  inset: auto;
+  /* Above every docked rail panel; keep in step with PANEL_Z_FLOATING_FLOOR. */
+  z-index: 111;
+  max-height: calc(100vh - 12px);
+  margin: 0;
+  flex: none;
+  pointer-events: auto;
+}
+/* A collapsed window shows only its header strip; its inline height stays. */
+#right-context-rail > .panel-floating.collapsed {
+  max-height: max-content;
+}
+.panel-floating[style*='height'] > .cctv-panel-inner {
+  box-sizing: border-box;
+  height: 100%;
+  max-height: none;
+}
+.panel-resize-edge,
+.panel-resize-grip {
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+}
+.panel-resize-edge[data-dir='n'],
+.panel-resize-edge[data-dir='s'] {
+  left: 10px;
+  right: 10px;
+  height: 7px;
+  cursor: ns-resize;
+}
+.panel-resize-edge[data-dir='n'] {
+  top: -3px;
+}
+.panel-resize-edge[data-dir='s'] {
+  bottom: -3px;
+}
+.panel-resize-edge[data-dir='e'],
+.panel-resize-edge[data-dir='w'] {
+  top: 10px;
+  bottom: 10px;
+  width: 7px;
+  cursor: ew-resize;
+}
+.panel-resize-edge[data-dir='e'] {
+  right: -3px;
+}
+.panel-resize-edge[data-dir='w'] {
+  left: -3px;
+}
+.panel-resize-edge[data-dir='ne'],
+.panel-resize-edge[data-dir='nw'],
+.panel-resize-edge[data-dir='sw'] {
+  width: 14px;
+  height: 14px;
+}
+.panel-resize-edge[data-dir='ne'] {
+  top: -3px;
+  right: -3px;
+  cursor: nesw-resize;
+}
+.panel-resize-edge[data-dir='nw'] {
+  top: -3px;
+  left: -3px;
+  cursor: nwse-resize;
+}
+.panel-resize-edge[data-dir='sw'] {
+  bottom: -3px;
+  left: -3px;
+  cursor: nesw-resize;
+}
+.panel-resize-grip {
+  right: 3px;
+  bottom: 3px;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  opacity: 0.55;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  background: repeating-linear-gradient(
+    135deg,
+    transparent 0 3px,
+    rgba(0, 212, 255, 0.6) 3px 4px
+  );
+  transition: opacity var(--transition-fast);
+}
+.panel-portable:hover .panel-resize-grip,
+.panel-resizing .panel-resize-grip {
+  opacity: 1;
+}
+.panel-collapsible.collapsed > .panel-resize-edge,
+.panel-collapsible.collapsed > .panel-resize-grip {
+  display: none;
+}
+.panel-resizing,
+.panel-resizing * {
+  user-select: none;
+}
+
 .panel-title {
   font-family: var(--font-mono);
   font-size: 9px;
@@ -996,7 +1105,9 @@ body.ui-clean-view #data-panel,
 body.ui-clean-view #cctv-panel,
 body.ui-clean-view #radio-panel,
 body.ui-clean-view #global-context-panel,
-body.ui-clean-view #scene-panel {
+body.ui-clean-view #scene-panel,
+/* The expanded viewer lives on <body>, outside every panel. */
+body.ui-clean-view .sl-viewer-wrap-expanded {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;

src/ui/styles/cyber.css

@@ -198,6 +198,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .scene-panel-inner,
     .global-context-panel-inner,
     .radio-panel-inner,
@@ -218,6 +219,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .scene-panel-inner,
     .global-context-panel-inner,
     .radio-panel-inner
@@ -239,6 +241,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .global-context-panel-inner
   ) {
   padding-right: 8px;
@@ -253,12 +256,14 @@
     #cctv-panel,
     #weather-panel,
     #recent-imagery-panel,
+    #street-level-panel,
     #global-context-panel
   ).collapsed
   > :is(
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .global-context-panel-inner
   ) {
   padding: 0;
@@ -270,12 +275,14 @@
     #cctv-panel,
     #weather-panel,
     #recent-imagery-panel,
+    #street-level-panel,
     #global-context-panel
   ).collapsed
   > :is(
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .global-context-panel-inner
   )
   > .panel-header {
@@ -294,6 +301,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .scene-panel-inner,
     .global-context-panel-inner,
     .radio-panel-inner
@@ -309,6 +317,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .scene-panel-inner,
     .global-context-panel-inner,
     .radio-panel-inner
@@ -332,6 +341,7 @@
     .cctv-panel-inner,
     .weather-panel-inner,
     .recent-imagery-panel-inner,
+    .street-level-panel-inner,
     .scene-panel-inner,
     .global-context-panel-inner,
     .radio-panel-inner
@@ -1718,6 +1728,7 @@
       #cctv-panel,
       #weather-panel,
       #recent-imagery-panel,
+      #street-level-panel,
       #global-context-panel
     ):not(.collapsed) {
     width: var(--cyber-right-panel-width);

src/ui/styles/layers.css

@@ -161,7 +161,8 @@
     max-height var(--transition-fast);
 }
 #right-context-rail > #pp-toggles,
-#right-context-rail > #cctv-panel,
+#right-context-rail > #cctv-panel:not(.panel-floating),
+#right-context-rail > #street-level-panel:not(.panel-floating),
 #right-context-rail > #weather-panel,
 #right-context-rail > #recent-imagery-panel,
 #right-context-rail > #global-context-panel {
@@ -175,7 +176,8 @@
   max-height: 100%;
   pointer-events: auto;
 }
-#right-context-rail #cctv-panel,
+#right-context-rail #cctv-panel:not(.panel-floating),
+#right-context-rail #street-level-panel:not(.panel-floating),
 #right-context-rail #weather-panel,
 #right-context-rail #recent-imagery-panel {
   width: 100%;
@@ -190,7 +192,8 @@
   flex-shrink: 1;
   min-height: 0;
 }
-#right-context-rail #cctv-panel.collapsed,
+#right-context-rail #cctv-panel.collapsed:not(.panel-floating),
+#right-context-rail #street-level-panel.collapsed:not(.panel-floating),
 #right-context-rail #weather-panel.collapsed,
 #right-context-rail #recent-imagery-panel.collapsed {
   width: var(--right-display-collapsed-width);
@@ -205,6 +208,7 @@
 }
 #right-context-rail > #pp-toggles.collapsed .pp-header-row,
 #right-context-rail #cctv-panel.collapsed .cctv-panel-inner,
+#right-context-rail #street-level-panel.collapsed .street-level-panel-inner,
 #right-context-rail #weather-panel.collapsed .weather-panel-inner,
 #right-context-rail #recent-imagery-panel.collapsed .recent-imagery-panel-inner,
 #right-context-rail
@@ -214,7 +218,10 @@
   min-height: 50px;
   box-sizing: border-box;
 }
-#right-context-rail #cctv-panel:not(.collapsed) .cctv-panel-inner {
+#right-context-rail #cctv-panel:not(.collapsed) .cctv-panel-inner,
+#right-context-rail
+  #street-level-panel:not(.collapsed)
+  .street-level-panel-inner {
   max-height: 100%;
   overflow-y: auto;
   scrollbar-gutter: stable;
@@ -250,18 +257,24 @@
 #right-context-rail.layout-focus {
   height: var(--right-stack-max-height);
 }
-#right-context-rail.layout-exclusive > [data-panel-id].collapsed {
+#right-context-rail.layout-exclusive
+  > [data-panel-id].collapsed:not(.panel-floating) {
   display: none;
 }
-#right-context-rail.layout-focus > [data-panel-id].collapsed {
+#right-context-rail.layout-focus
+  > [data-panel-id].collapsed:not(.panel-floating) {
   display: block;
   flex: 0 0 auto;
 }
-#right-context-rail.layout-focus.layout-exclusive > [data-panel-id].collapsed {
+#right-context-rail.layout-focus.layout-exclusive
+  > [data-panel-id].collapsed:not(.panel-floating) {
   display: none;
 }
 #right-context-rail.layout-focus > #pp-toggles:not(.collapsed),
-#right-context-rail.layout-focus > #cctv-panel:not(.collapsed),
+#right-context-rail.layout-focus
+  > #cctv-panel:not(.collapsed):not(.panel-floating),
+#right-context-rail.layout-focus
+  > #street-level-panel:not(.collapsed):not(.panel-floating),
 #right-context-rail.layout-focus > #weather-panel:not(.collapsed),
 #right-context-rail.layout-focus > #recent-imagery-panel:not(.collapsed),
 #right-context-rail.layout-focus > #global-context-panel:not(.collapsed) {
@@ -280,8 +293,11 @@
   > #weather-panel:not(.collapsed)
   .weather-panel-inner,
 #right-context-rail.layout-focus
-  > #cctv-panel:not(.collapsed)
+  > #cctv-panel:not(.collapsed):not(.panel-floating)
   .cctv-panel-inner,
+#right-context-rail.layout-focus
+  > #street-level-panel:not(.collapsed):not(.panel-floating)
+  .street-level-panel-inner,
 #right-context-rail.layout-focus
   > #recent-imagery-panel:not(.collapsed)
   .recent-imagery-panel-inner,
@@ -328,6 +344,9 @@
 #right-context-rail[data-rail-measuring]
   > [data-panel-id]:not(.collapsed)
   > .cctv-panel-inner,
+#right-context-rail[data-rail-measuring]
+  > [data-panel-id]:not(.collapsed)
+  > .street-level-panel-inner,
 #right-context-rail[data-rail-measuring]
   > [data-panel-id]:not(.collapsed)
   > .weather-panel-inner,

src/ui/styles/recording.css

@@ -15,7 +15,9 @@ body.recording-mode #cctv-panel,
 body.recording-mode #radio-panel,
 body.recording-mode #global-context-panel,
 body.recording-mode #gev-voice-control,
-body.recording-mode #scene-panel {
+body.recording-mode #scene-panel,
+/* The expanded viewer lives on <body>, outside every panel. */
+body.recording-mode .sl-viewer-wrap-expanded {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;

src/ui/styles/responsive.css

@@ -216,8 +216,10 @@
   }
 
   #right-context-rail #pp-toggles.collapsed .pp-header-row,
-  #right-context-rail #cctv-panel,
-  #right-context-rail #cctv-panel.collapsed,
+  #right-context-rail #cctv-panel:not(.panel-floating),
+  #right-context-rail #cctv-panel.collapsed:not(.panel-floating),
+  #right-context-rail #street-level-panel:not(.panel-floating),
+  #right-context-rail #street-level-panel.collapsed:not(.panel-floating),
   #right-context-rail #recent-imagery-panel,
   #right-context-rail #recent-imagery-panel.collapsed,
   #right-context-rail #radio-panel,
@@ -233,10 +235,12 @@
 
   #left-panel-stack > #data-panel,
   #left-panel-stack > #cctv-panel,
+  #left-panel-stack > #street-level-panel,
   #left-panel-stack > #global-context-panel,
   #left-panel-stack > #scene-panel,
   #left-panel-stack > #data-panel.collapsed,
   #left-panel-stack > #cctv-panel.collapsed,
+  #left-panel-stack > #street-level-panel.collapsed,
   #left-panel-stack > #global-context-panel.collapsed,
   #left-panel-stack > #scene-panel.collapsed {
     position: relative;

src/ui/styles/street-level.css

@@ -0,0 +1,606 @@
+/* ── Street Level panel ─────────────────────────────────────────
+   The rail owns position and width (layers.css). The expanded viewer is
+   re-parented to <body>, so it carries the tokens too. */
+#street-level-panel,
+.sl-viewer-wrap {
+  --sl-green: #05cb63;
+  --sl-text: 0.62rem;
+  --sl-text-small: 0.6rem;
+}
+
+#street-level-panel .panel-glow {
+  position: absolute;
+  inset: -18px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(5, 203, 99, 0.16) 0%,
+    transparent 65%
+  );
+  filter: blur(16px);
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.street-level-panel-inner {
+  position: relative;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--panel-radius);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
+    0 1px 0 rgba(255, 255, 255, 0.06) inset;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 212, 255, 0.46) rgba(255, 255, 255, 0.06);
+}
+
+/* Class-qualified, not id-qualified, so a theme's header rule still wins. */
+.street-level-panel-inner > .panel-header {
+  gap: 8px;
+}
+
+.sl-status {
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.1em;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--glass-border-hover);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+button.sl-status {
+  background: transparent;
+  font: inherit;
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+button.sl-status:hover,
+button.sl-status:focus-visible {
+  color: var(--text-primary);
+  border-color: var(--accent);
+  outline: none;
+}
+
+.sl-status.is-on {
+  color: var(--sl-green);
+  border-color: rgba(5, 203, 99, 0.55);
+}
+
+.sl-status.is-busy {
+  color: var(--accent);
+  border-color: rgba(0, 212, 255, 0.55);
+}
+
+.sl-status.is-warn {
+  color: #ffb300;
+  border-color: rgba(255, 179, 0, 0.55);
+}
+
+/* Collapsed strips hide the body entirely: nothing to paint or tab into. */
+#street-level-panel.collapsed .sl-body,
+#street-level-panel.collapsed .sl-status {
+  display: none;
+}
+
+.sl-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+
+.sl-main {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.sl-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.sl-controls:disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+/* In a resized window only this block scrolls; the viewer keeps its room. */
+.sl-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+
+/* ── Providers ───────────────────────────────────────────────────────────── */
+.sl-providers {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.sl-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* `--chip-color` comes from the provider. */
+.sl-chips .data-toggle-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.sl-chips .data-toggle-chip::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--chip-color, currentColor);
+  opacity: 0.45;
+  flex: none;
+}
+
+.sl-chips .data-toggle-chip.active {
+  color: var(--chip-color, var(--accent));
+  border-color: var(--chip-color, var(--accent));
+  background: color-mix(
+    in srgb,
+    var(--chip-color, var(--accent)) 14%,
+    transparent
+  );
+}
+
+.sl-chips .data-toggle-chip.active::before {
+  opacity: 1;
+}
+
+.sl-chips .data-toggle-chip.chip-error {
+  color: #ffb300;
+  border-color: rgba(255, 179, 0, 0.55);
+}
+
+/* ── Errors ──────────────────────────────────────────────────────────────── */
+.sl-error {
+  font-family: var(--font-sans);
+  font-size: 0.72rem;
+  line-height: 1.4;
+  color: #ff8a80;
+}
+
+/* ── Filters and legend ──────────────────────────────────────────────────── */
+.sl-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* No overflow clipping: it would cut off the buttons' focus ring. The end
+   buttons round themselves instead. */
+.sl-seg {
+  display: inline-flex;
+  border: 1px solid var(--glass-border-hover);
+  border-radius: 999px;
+}
+
+.sl-seg-btn {
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.08em;
+  padding: 4px 9px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.sl-seg-btn:first-child {
+  border-radius: 999px 0 0 999px;
+}
+
+.sl-seg-btn:last-child {
+  border-radius: 0 999px 999px 0;
+}
+
+.sl-seg-btn + .sl-seg-btn {
+  border-left: 1px solid var(--glass-border);
+}
+
+.sl-seg-btn:focus-visible {
+  position: relative;
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.sl-seg-btn.is-active {
+  background: rgba(5, 203, 99, 0.22);
+  color: var(--text-primary);
+}
+
+.sl-since {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 4px 10px;
+}
+
+.sl-range {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  accent-color: var(--sl-green);
+  cursor: pointer;
+}
+
+.sl-range:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.sl-since-label {
+  grid-column: 2;
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.08em;
+  color: var(--text-primary);
+}
+
+.sl-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sl-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+}
+
+.sl-legend-swatch {
+  width: 14px;
+  height: 3px;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+/* ── Embedded viewer ─────────────────────────────────────────────────────── */
+.sl-viewer-wrap {
+  position: relative;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--glass-border-hover);
+  background: #000;
+}
+
+.sl-viewer-wrap[hidden] {
+  display: none;
+}
+
+/* Nothing sits over the image, so the provider's own controls stay clear. */
+.sl-viewer-stage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.sl-viewer {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  min-height: 180px;
+}
+
+.sl-viewer-placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.sl-viewer-placeholder[hidden] {
+  display: none;
+}
+
+.sl-viewer-placeholder::after {
+  content: '';
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--sl-green);
+  animation: sl-spin 0.9s linear infinite;
+}
+
+@keyframes sl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sl-viewer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 5px 6px;
+  background: rgba(10, 10, 15, 0.85);
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.sl-viewer-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.sl-viewer-tools .scene-btn {
+  padding: 4px 8px;
+  font-size: var(--sl-text-small);
+  background: rgba(10, 10, 15, 0.75);
+  flex: none;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sl-viewer-tools .sl-seg {
+  background: rgba(10, 10, 15, 0.75);
+}
+
+@container (max-width: 380px) {
+  .sl-viewer-tools .sl-btn-text {
+    display: none;
+  }
+}
+
+.sl-viewer-x {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background: rgba(10, 10, 15, 0.8);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: all var(--transition-fast);
+}
+
+.sl-viewer-x:hover {
+  color: #0a0a0f;
+  background: #fff;
+  border-color: #fff;
+}
+
+.sl-image-meta {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2px 10px;
+  min-height: 26px;
+}
+
+.sl-image-by {
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.sl-image-by:empty {
+  display: none;
+}
+
+.sl-image-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.sl-image-link {
+  color: var(--sl-green);
+  text-decoration: none;
+  letter-spacing: 0.1em;
+}
+
+.sl-image-link[hidden] {
+  display: none;
+}
+
+.sl-image-link:hover {
+  text-decoration: underline;
+}
+
+.sl-meta {
+  font-family: var(--font-mono);
+  font-size: var(--sl-text-small);
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+}
+
+.sl-meta:empty {
+  display: none;
+}
+
+/* ── Floating window ─────────────────────────────────────────────────────── */
+/* A dragged window keeps its natural height, so bound it to the viewport:
+   the rail's max-height: 100% does not bind an auto-height parent.
+   Id-qualified to outrank that rule. */
+#right-context-rail > #street-level-panel.panel-floating > .street-level-panel-inner {
+  max-height: calc(100vh - 12px);
+  overflow-y: auto;
+}
+
+/* A resized window (inline height) gives its spare height to the viewer. */
+.panel-floating[style*='height'] > .street-level-panel-inner {
+  box-sizing: border-box;
+  height: 100%;
+  max-height: none;
+  overflow: hidden;
+}
+
+.panel-floating[style*='height'] .sl-body,
+.panel-floating[style*='height'] .sl-main {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.panel-floating[style*='height'] .sl-viewer-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.panel-floating[style*='height'] .sl-viewer-stage {
+  flex: 1 1 auto;
+  min-height: 140px;
+}
+
+.panel-floating[style*='height'] .sl-viewer {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+  aspect-ratio: auto;
+}
+
+.panel-floating[style*='height'] .sl-settings {
+  flex: 0 1 auto;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+/* ── Expanded viewer ─────────────────────────────────────────────────────── */
+/* Re-parented to <body>: the panel's backdrop-filter would contain a fixed
+   child. z-index sits above panels (≤139), below the voice pill (150). */
+.sl-viewer-wrap-expanded {
+  position: fixed;
+  left: 4vw;
+  right: 4vw;
+  top: 5vh;
+  bottom: 9vh;
+  z-index: 141;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-mono);
+  border-color: rgba(0, 212, 255, 0.55);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
+  outline: none;
+}
+
+.sl-viewer-wrap-expanded .sl-viewer-stage {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.sl-viewer-wrap-expanded .sl-viewer {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+  aspect-ratio: auto;
+}
+
+.sl-viewer-wrap-expanded .sl-image-meta {
+  font-size: 0.66rem;
+  padding: 10px 14px;
+}
+
+.sl-viewer-wrap-expanded .sl-viewer-bar {
+  padding: 8px 10px;
+}
+
+.sl-viewer-wrap-expanded .sl-viewer-tools .scene-btn {
+  padding: 8px 14px;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  color: var(--text-primary);
+  border-color: rgba(0, 212, 255, 0.6);
+  background: rgba(10, 10, 15, 0.82);
+}
+
+.sl-viewer-wrap-expanded #sl-viewer-expand::after {
+  content: ' · ESC';
+  color: var(--text-secondary);
+}
+
+.sl-viewer-wrap-expanded .sl-viewer-x {
+  width: 34px;
+  height: 34px;
+  font-size: 1.3rem;
+}
+
+/* ── Short viewports ─────────────────────────────────────────────────────── */
+@media (max-height: 640px) {
+  .street-level-panel-inner {
+    padding: 10px;
+    gap: 6px;
+  }
+
+  .sl-viewer {
+    min-height: 150px;
+  }
+}
+
+/* ── Phones ──────────────────────────────────────────────────────────────── */
+/* The phone rail spans 50vh + 8px to 2vh + 7.5rem from the bottom
+   (responsive.css). Size the photo to that band, less ~150px of panel chrome,
+   so it shows without scrolling. */
+@media (max-width: 720px) {
+  .sl-viewer {
+    aspect-ratio: auto;
+    height: clamp(110px, calc(48vh - 8px - 7.5rem - 150px), 320px);
+    min-height: 0;
+  }
+}

src/ui/styles/voice-card.css

@@ -0,0 +1,386 @@
+/* ------------------------------------------------------------------ *
+ * Voice card — captions, plan steps and the latest result, nested in
+ * #gev-voice-control beside its help and error trays. It shares their
+ * anchor and glass treatment, and it hides with the control in Clean-UI
+ * and recording mode because it lives inside it.
+ * ------------------------------------------------------------------ */
+#gev-voice-control .gev-voice-card {
+  position: absolute;
+  bottom: calc(100% + 0.7rem);
+  left: 50%;
+  z-index: 7;
+  display: flex;
+  flex-direction: column;
+  gap: 0.42rem;
+  box-sizing: border-box;
+  width: clamp(18rem, 26vw, 22rem);
+  max-height: min(24rem, 55vh);
+  overflow-y: auto;
+  padding: 0.62rem 0.72rem 0.7rem;
+  color: rgba(223, 245, 250, 0.92);
+  background: rgba(7, 22, 31, 0.96);
+  border: 1px solid rgba(54, 220, 255, 0.34);
+  border-radius: 0.38rem;
+  box-shadow:
+    0 0.85rem 2rem rgba(0, 0, 0, 0.58),
+    0 0 1.2rem rgba(0, 212, 255, 0.08);
+  backdrop-filter: blur(24px) saturate(1.3);
+  -webkit-backdrop-filter: blur(24px) saturate(1.3);
+  text-align: left;
+  transform: translateX(-50%);
+  transform-origin: bottom center;
+  animation: gev-voice-card-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* The visible card must clear the dock trays' parent stacking contexts. */
+#command-dock
+  > #gev-voice-control:not([data-status='error']):has(
+    .gev-voice-card:not([hidden])
+  ) {
+  z-index: 101;
+}
+
+#gev-voice-control .gev-voice-card[hidden],
+#gev-voice-control .gev-voice-card [hidden],
+#gev-voice-control[data-status='error'] .gev-voice-card {
+  display: none;
+}
+
+/* The card takes the tray slot; the hover hint yields to it. */
+#gev-voice-control:has(.gev-voice-card:not([hidden])) .gev-voice-help-tray {
+  display: none;
+}
+
+#command-dock.dock-has-pinned-tray .gev-voice-card {
+  bottom: calc(100% + 1.7rem + var(--dock-pinned-stack-height));
+}
+
+@keyframes gev-voice-card-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 0.45rem);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+.gev-voice-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.gev-voice-card-kicker,
+.gev-voice-card-phase,
+.gev-voice-card-who,
+.gev-voice-card-notes summary {
+  font-family: var(--font-mono);
+  font-size: 0.46rem;
+  font-weight: 600;
+  letter-spacing: 0.1rem;
+}
+
+.gev-voice-card-kicker {
+  color: rgba(54, 220, 255, 0.72);
+}
+
+.gev-voice-card-phase {
+  color: var(--text-dim);
+}
+
+.gev-voice-card[data-busy='true'] .gev-voice-card-phase {
+  color: #ffc46b;
+}
+
+.gev-voice-card-dismiss {
+  margin-left: auto;
+  width: 1.1rem;
+  height: 1.1rem;
+  padding: 0;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(54, 220, 255, 0.24);
+  border-radius: 0.2rem;
+  font-size: 0.72rem;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.gev-voice-card-dismiss:hover,
+.gev-voice-card-dismiss:focus-visible {
+  color: var(--text-primary);
+  border-color: rgba(54, 220, 255, 0.6);
+}
+
+.gev-voice-card-caption {
+  display: flex;
+  gap: 0.45rem;
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 0.72rem;
+  line-height: 1.38;
+}
+
+.gev-voice-card-who {
+  flex: 0 0 1.7rem;
+  padding-top: 0.14rem;
+  color: var(--text-dim);
+}
+
+.gev-voice-card-caption[data-role='assistant'] .gev-voice-card-who {
+  color: rgba(54, 220, 255, 0.72);
+}
+
+.gev-voice-card-caption[data-role='user'] .gev-voice-card-text {
+  color: var(--text-secondary);
+}
+
+/* What "this" / "here" resolved to at the start of the turn. */
+.gev-voice-card-pointer {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  letter-spacing: 0.03rem;
+}
+
+.gev-voice-card-pointer .gev-voice-card-who {
+  color: rgba(54, 220, 255, 0.72);
+}
+
+.gev-voice-card-pointer-label {
+  padding: 0.06rem 0.32rem;
+  color: var(--text-primary);
+  border: 1px solid rgba(54, 220, 255, 0.34);
+  border-radius: 0.18rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gev-voice-card-plan,
+.gev-voice-card-lines,
+.gev-voice-card-referents {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gev-voice-card-plan {
+  display: flex;
+  flex-direction: column;
+  gap: 0.22rem;
+  padding-top: 0.38rem;
+  border-top: 1px solid var(--glass-border);
+}
+
+.gev-voice-card-step {
+  display: grid;
+  grid-template-columns: 0.9rem 1fr;
+  column-gap: 0.3rem;
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  line-height: 1.4;
+  letter-spacing: 0.02rem;
+}
+
+.gev-voice-card-step::before {
+  content: '◻';
+  color: var(--text-dim);
+}
+
+.gev-voice-card-step[data-status='running']::before {
+  content: '◌';
+  color: #ffc46b;
+}
+
+.gev-voice-card-step[data-status='done']::before {
+  content: '✓';
+  color: var(--accent);
+}
+
+.gev-voice-card-step[data-status='failed']::before,
+.gev-voice-card-step[data-status='cancelled']::before {
+  content: '✕';
+  color: #ff8f9d;
+}
+
+.gev-voice-card-step-detail {
+  grid-column: 2;
+  color: var(--text-dim);
+  font-size: 0.52rem;
+}
+
+.gev-voice-card-result {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding-top: 0.42rem;
+  border-top: 1px solid var(--glass-border);
+}
+
+.gev-voice-card-result-title {
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.gev-voice-card-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.gev-voice-card-chip {
+  padding: 0.08rem 0.3rem;
+  color: var(--text-secondary);
+  border: 1px solid rgba(54, 220, 255, 0.3);
+  border-radius: 0.18rem;
+  font-family: var(--font-mono);
+  font-size: 0.44rem;
+  letter-spacing: 0.06rem;
+  text-transform: uppercase;
+}
+
+.gev-voice-card-chip:is(
+  [data-tone='stale'],
+  [data-tone='degraded'],
+  [data-tone='fallback'],
+  [data-tone='partial']
+) {
+  color: #ffc46b;
+  border-color: rgba(255, 196, 107, 0.45);
+}
+
+.gev-voice-card-chip[data-tone='unavailable'] {
+  color: #ff8f9d;
+  border-color: rgba(255, 143, 157, 0.45);
+}
+
+.gev-voice-card-lines li,
+.gev-voice-card-referents li {
+  font-family: var(--font-sans);
+  font-size: 0.66rem;
+  line-height: 1.4;
+  color: rgba(223, 245, 250, 0.82);
+}
+
+.gev-voice-card-referents {
+  counter-reset: gev-referent;
+}
+
+.gev-voice-card-referents li {
+  counter-increment: gev-referent;
+}
+
+.gev-voice-card-referents li::before {
+  content: counter(gev-referent);
+  display: inline-block;
+  min-width: 0.9rem;
+  margin-right: 0.3rem;
+  color: rgba(54, 220, 255, 0.72);
+  font-family: var(--font-mono);
+  font-size: 0.52rem;
+}
+
+.gev-voice-card-notes summary {
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.gev-voice-card-notes[open] summary {
+  margin-bottom: 0.2rem;
+}
+
+.gev-voice-card-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Point-and-ask reticle: a fixed overlay at the pointed pixel. */
+.gev-pointer-reticle {
+  position: fixed;
+  z-index: 6;
+  width: 1.9rem;
+  height: 1.9rem;
+  margin: -0.95rem 0 0 -0.95rem;
+  border: 1.5px solid rgba(120, 235, 255, 0.95);
+  border-radius: 50%;
+  box-shadow: 0 0 0.7rem rgba(0, 212, 255, 0.35);
+  pointer-events: none;
+  animation: gev-pointer-reticle-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.gev-pointer-reticle::before,
+.gev-pointer-reticle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background: rgba(54, 220, 255, 0.85);
+  transform: translate(-50%, -50%);
+}
+
+.gev-pointer-reticle::before {
+  width: 0.28rem;
+  height: 0.28rem;
+  border-radius: 50%;
+}
+
+.gev-pointer-reticle::after {
+  width: 2.6rem;
+  height: 2.6rem;
+  background: none;
+  border: 1px dashed rgba(54, 220, 255, 0.35);
+  border-radius: 50%;
+}
+
+.gev-pointer-reticle[data-target='ground'] {
+  border-color: rgba(255, 196, 107, 0.85);
+  box-shadow: 0 0 0.7rem rgba(255, 196, 107, 0.3);
+}
+
+.gev-pointer-reticle[data-target='ground']::before {
+  background: rgba(255, 196, 107, 0.9);
+}
+
+.gev-pointer-reticle[hidden],
+body.ui-clean-view .gev-pointer-reticle,
+body.recording-mode .gev-pointer-reticle {
+  display: none;
+}
+
+/* Scale only: a frame caught at the animation start still shows the mark. */
+@keyframes gev-pointer-reticle-in {
+  from {
+    transform: scale(1.6);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 900px) {
+  #gev-voice-control .gev-voice-card {
+    width: min(22rem, calc(100vw - 1.5rem));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #gev-voice-control .gev-voice-card,
+  .gev-pointer-reticle {
+    animation: none;
+  }
+}

src/ui/templates/layer-panels.html

@@ -71,6 +71,75 @@
     </div>
   </div>
 
+  <!-- Street Level Panel (moved into #right-context-rail at runtime) -->
+  <div id="street-level-panel" class="panel-collapsible collapsed" data-panel-id="street-level-panel">
+    <div class="panel-glow"></div>
+    <div class="street-level-panel-inner" data-rail-scroller>
+      <div class="panel-header">
+        <span class="panel-title">STREET LEVEL</span>
+        <span class="panel-divider"></span>
+        <button id="sl-status" class="sl-status" type="button" aria-pressed="false" title="Turn Street Level on or off">OFF</button>
+        <button class="panel-collapse-btn" data-collapse-target="street-level-panel" title="Expand panel">◀</button>
+      </div>
+      <div id="sl-body" class="sl-body">
+        <div class="sl-main">
+          <div id="sl-viewer-wrap" class="sl-viewer-wrap" hidden>
+            <div class="sl-viewer-bar">
+              <div class="sl-viewer-tools">
+                <button id="sl-viewer-expand" class="scene-btn" type="button" aria-pressed="false" title="Expand the street-level view (Esc shrinks it)"><span class="sl-btn-icon" aria-hidden="true">⤢</span><span class="sl-btn-text">EXPAND</span></button>
+                <div class="sl-seg" role="radiogroup" aria-label="Image fit">
+                  <button type="button" class="sl-seg-btn is-active" data-sl-render="letterbox" role="radio" aria-checked="true" title="Fit: show the whole photo, with dark bars where its shape differs from the frame">FIT</button>
+                  <button type="button" class="sl-seg-btn" data-sl-render="fill" role="radio" aria-checked="false" tabindex="-1" title="Fill: fill the frame edge to edge, cropping the photo">FILL</button>
+                </div>
+                <button id="sl-follow-btn" class="scene-btn" type="button" aria-pressed="false" aria-label="Camera follows view" title="Camera follows view: move the globe camera wherever the street-level view looks"><span class="sl-btn-icon" aria-hidden="true">⌖</span><span class="sl-btn-text">FOLLOW</span></button>
+              </div>
+              <div class="sl-viewer-tools sl-viewer-tools-right">
+                <button id="sl-viewer-close" class="sl-viewer-x" type="button" title="Close the image and deselect it on the map" aria-label="Close the street-level image">×</button>
+              </div>
+            </div>
+            <div class="sl-viewer-stage">
+              <div id="sl-viewer-placeholder" class="sl-viewer-placeholder" hidden></div>
+              <div id="sl-viewer" class="sl-viewer" aria-label="Street-level viewer"></div>
+            </div>
+            <div id="sl-image-meta" class="sl-image-meta">
+              <span id="sl-image-by" class="sl-image-by"></span>
+              <span class="sl-image-right">
+                <span id="sl-image-when" class="sl-image-when"></span>
+                <a id="sl-image-link" class="sl-image-link" href="#" target="_blank" rel="noopener noreferrer" title="Open this image on the provider's site" hidden></a>
+              </span>
+            </div>
+          </div>
+          <div class="sl-settings">
+            <div class="sl-providers" role="group" aria-label="Imagery providers">
+              <span class="cctv-summary-label">PROVIDERS</span>
+              <div id="sl-provider-chips" class="sl-chips"></div>
+            </div>
+            <div id="sl-error" class="sl-error" role="alert" hidden><span aria-hidden="true">⚠</span> <span id="sl-error-text"></span></div>
+            <!-- A missing key gates the filters only: the chips above stay
+                 focusable so their tooltip can say how to add the key. -->
+            <fieldset id="sl-controls" class="sl-controls">
+              <div class="sl-filters" role="group" aria-label="Imagery filters">
+                <span class="cctv-summary-label">IMAGERY</span>
+                <div class="sl-seg" role="radiogroup" aria-label="Panorama filter">
+                  <button type="button" class="sl-seg-btn is-active" data-sl-pano="all" role="radio" aria-checked="true">ALL</button>
+                  <button type="button" class="sl-seg-btn" data-sl-pano="pano" role="radio" aria-checked="false" tabindex="-1">360°</button>
+                  <button type="button" class="sl-seg-btn" data-sl-pano="flat" role="radio" aria-checked="false" tabindex="-1">FLAT</button>
+                </div>
+              </div>
+              <div class="sl-since">
+                <label class="cctv-summary-label" for="sl-since">SINCE</label>
+                <input id="sl-since" class="sl-range" type="range" min="0" max="8" step="1" value="0" aria-valuetext="ANY DATE" aria-describedby="sl-since-label" />
+                <output id="sl-since-label" class="sl-since-label" for="sl-since">ANY DATE</output>
+              </div>
+            </fieldset>
+            <ul id="sl-legend" class="sl-legend" aria-label="Coverage colours"></ul>
+            <div id="sl-coverage-meta" class="sl-meta"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Scene Director Panel -->
   <div id="scene-panel" class="panel-collapsible collapsed" data-panel-id="scene-panel">
     <div class="panel-glow"></div>