fix(ui): compact mobile chrome and Visualization bottom sheet

Shrink navbar/HUD on phone and re-host Visualization on the app root as an upward sheet so it is reachable outside the transformed right dock.

Co-authored-by: Cursor <cursoragent@cursor.com>

.agents/skills/dev-protocol/lessons-learned.md

@@ -211,6 +211,8 @@ User-editable hex anchors replace the former fixed dual ramp (no product mid-sto
 - **Color anchors**: user hex +1 / 0 / −1 replace fixed mid-stop ramps; lerp `0↔+1` and `0↔−1`. POINTS shader uses uniforms `uColorPos` / `uColorNeg` / `uColorZero` (never hardcode ramp in GLSL).
 - **Zero coverage %**: slider **below Colors, above Reset**. Remaps `|t|` so zero color occupies `coverage` of the ± range before lerp (`remapAbsTWithZeroCoverage`); CPU + `uZeroCoverage` share math. Cap 90% so ±1 remains reachable. Persist `vl3d.viz.*` including `zeroCoverage`.
 - **Collapse tab**: Visualization has its own edge tab (dock-tab affordance) independent of the right-dock host; key `vl3d.viz.panelCollapsed`. **Chrome del card va en `.viz-panel-body`, no en el host** — el tab es hermano del body (afuera del glass), igual que `.dock-tab` vs `.dock-body`. No poner `overflow:hidden` / `max-width:280px` / border en el host o el tab queda “adentro”.
+- **Mobile sheet**: en `≤768px` el panel **sale del right dock** (`resolveVisualizationMountParent` → app root). Un ancestor con `transform` (dock colapsado) atrapa `position:fixed`. Layout `data-viz-layout="sheet"`: handle arriba, body abre hacia arriba; glifos ▲/▼. Touch blocklist incluye `#visualization-controls-container`.
+- **Mobile chrome density**: navbar tabs ~28px / ~0.62rem; HUD strip ~26px / ~0.58rem single-line — no forzar 44px en chrome decorativo (inputs/CTAs del panel sí mantienen 44px / 16px iOS zoom guard).
 - **SemVer**: if `main` already shipped a MINOR (e.g. groups `1.7.0`), the next capability must take the **next** MINOR (`1.8.0`) — never reuse a version number already on `main`.
 - **Invariante**: filter-on-normalized-t; F4 = geometry not points-only; anchors always drive ramp in v1; no backend for viz controls.
 

src/main.js

@@ -29,6 +29,9 @@ import {
   wireVisualizationControls,
   syncVisualizationControlsFromConfig,
   readVisualizationPanelCollapsed,
+  vizPanelLayoutForViewport,
+  resolveVisualizationMountParent,
+  setVisualizationPanelLayout,
 } from './ui/VisualizationControls.js';
 import {
   loadVisualizationSettings,
@@ -46,7 +49,7 @@ import {
   formatSaeTrainProgress,
 } from './ui/saeControlsDefaults.js';
 import { ComparePanel, getCompareBootstrap } from './ui/ComparePanel.js';
-import { CollapsibleDock, isMobileViewport } from './ui/CollapsibleDock.js';
+import { CollapsibleDock, isMobileViewport, MOBILE_MQ } from './ui/CollapsibleDock.js';
 import { LandscapeGate } from './ui/LandscapeGate.js';
 import { TouchControls } from './ui/TouchControls.js';
 import {
@@ -213,26 +216,67 @@ class VHectorLabApp {
   }
 
   /**
-   * Visualization panel (sign filter + color anchors) below Spatial Controls.
+   * Visualization panel: desktop = under Spatial Controls in right dock;
+   * phone = bottom sheet on app root (must leave transformed dock host).
    */
   mountVisualizationControlsUI() {
     this.vizConfig = loadVisualizationSettings();
     const storage = typeof localStorage !== 'undefined' ? localStorage : null;
+    const mobile = isMobileViewport();
+    const layout = vizPanelLayoutForViewport(mobile);
     const collapsed = readVisualizationPanelCollapsed(storage, {
-      isMobile: isMobileViewport(),
+      isMobile: mobile,
     });
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = visualizationControlsMarkup(this.vizConfig, { collapsed });
+    wrapper.innerHTML = visualizationControlsMarkup(this.vizConfig, { collapsed, layout });
     const vizEl = wrapper.firstElementChild;
     this.vizEl = vizEl;
-    // Below sliders, above AxisGizmo (V1).
-    this.rightDock.body.insertBefore(vizEl, this.axisGizmo.container);
+    this.placeVisualizationControls(vizEl, mobile);
 
     wireVisualizationControls(vizEl, this.vizConfig, () => {
       this.threadLabels.setVisible(this.vizConfig.labelsVisible);
       this.refreshRender();
     });
     this.threadLabels.setVisible(this.vizConfig.labelsVisible);
+
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      this._vizLayoutMq = window.matchMedia(MOBILE_MQ);
+      this._onVizLayoutMq = () => this.syncVisualizationPanelHost();
+      if (typeof this._vizLayoutMq.addEventListener === 'function') {
+        this._vizLayoutMq.addEventListener('change', this._onVizLayoutMq);
+      } else if (typeof this._vizLayoutMq.addListener === 'function') {
+        this._vizLayoutMq.addListener(this._onVizLayoutMq);
+      }
+    }
+  }
+
+  /**
+   * @param {HTMLElement} vizEl
+   * @param {boolean} [isMobile]
+   */
+  placeVisualizationControls(vizEl, isMobile = isMobileViewport()) {
+    const parent = resolveVisualizationMountParent({
+      isMobile,
+      dockBody: this.rightDock.body,
+      appRoot: this.appContainer,
+    });
+    if (isMobile) {
+      parent.appendChild(vizEl);
+      return;
+    }
+    // Below sliders, above AxisGizmo (desktop).
+    if (vizEl.parentElement !== parent || vizEl.nextElementSibling !== this.axisGizmo.container) {
+      parent.insertBefore(vizEl, this.axisGizmo.container);
+    }
+  }
+
+  /** Re-host + retarget glyphs when crossing the phone breakpoint. */
+  syncVisualizationPanelHost() {
+    if (!this.vizEl) return;
+    const mobile = isMobileViewport();
+    const layout = vizPanelLayoutForViewport(mobile);
+    setVisualizationPanelLayout(this.vizEl, layout);
+    this.placeVisualizationControls(this.vizEl, mobile);
   }
 
   /**

src/style.css

@@ -1552,13 +1552,14 @@ canvas {
       env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
 
+  /* Compact top chrome — denser than 44px HIG so the canvas keeps air */
   .glass-navbar {
     height: auto;
-    min-height: 48px;
+    min-height: 36px;
     flex-wrap: wrap;
-    gap: 6px;
-    padding: 6px 10px;
-    align-items: flex-start;
+    gap: 4px;
+    padding: 4px 8px;
+    align-items: center;
   }
 
   .navbar-brand .version-tag,
@@ -1567,12 +1568,13 @@ canvas {
   }
 
   .title-group h1 {
-    font-size: 0.95rem;
+    font-size: 0.82rem;
+    letter-spacing: 0.5px;
   }
 
   .navbar-center-controls {
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 4px;
     order: 3;
     width: 100%;
     justify-content: flex-start;
@@ -1581,8 +1583,8 @@ canvas {
   .view-mode-tabs,
   .render-mode-tabs,
   .workspace-mode-tabs {
-    gap: 4px;
-    padding: 2px;
+    gap: 2px;
+    padding: 1px;
   }
 
   .tab-label {
@@ -1592,10 +1594,11 @@ canvas {
   .mode-tab,
   .view-tab,
   .workspace-tab {
-    min-height: 44px;
-    min-width: 44px;
-    padding: 8px 10px;
-    font-size: 0.72rem;
+    min-height: 28px;
+    min-width: 0;
+    padding: 3px 7px;
+    font-size: 0.62rem;
+    border-radius: 4px;
   }
 
   .status-indicator {
@@ -1603,8 +1606,8 @@ canvas {
   }
 
   .status-text {
-    font-size: 0.65rem;
-    max-width: 90px;
+    font-size: 0.58rem;
+    max-width: 72px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1612,7 +1615,7 @@ canvas {
 
   /* Docks as overlay drawers — do not push canvas layout */
   .collapsible-dock {
-    top: 96px;
+    top: 72px;
     z-index: 80;
   }
 
@@ -1622,7 +1625,7 @@ canvas {
 
   .dock-right {
     right: max(8px, env(safe-area-inset-right));
-    bottom: max(64px, env(safe-area-inset-bottom));
+    bottom: max(56px, env(safe-area-inset-bottom));
   }
 
   .collapsible-dock:not(.is-collapsed) .dock-body {
@@ -1630,14 +1633,14 @@ canvas {
   }
 
   .dock-tab {
-    min-height: 44px;
-    min-width: 44px;
-    width: 44px;
-    flex-basis: 44px;
+    min-height: 40px;
+    min-width: 36px;
+    width: 36px;
+    flex-basis: 36px;
   }
 
   .collapsible-dock {
-    --dock-tab-size: 44px;
+    --dock-tab-size: 36px;
   }
 
   .glass-sidebar {
@@ -1686,58 +1689,132 @@ canvas {
     gap: 10px;
   }
 
+  /*
+    Visualization bottom sheet (phone): host on app root, open upward.
+    data-viz-layout="sheet" is set from JS; CSS also scopes under max-width.
+  */
   #visualization-controls-container.viz-panel {
+    position: fixed;
+    left: max(8px, env(safe-area-inset-left));
+    right: max(8px, env(safe-area-inset-right));
+    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 30px);
+    z-index: 90;
+    flex-direction: column;
+    align-items: stretch;
     width: auto;
+    max-width: none;
+    min-width: 0;
     padding: 0;
+    gap: 0;
+    transition: transform 250ms ease;
+  }
+
+  #visualization-controls-container .viz-panel-tab {
+    flex: 0 0 26px;
+    width: 100%;
+    min-height: 26px;
+    height: 26px;
+    margin: 0;
+    padding: 0;
+    align-self: stretch;
+    border-radius: 10px 10px 0 0;
+    border: 1px solid var(--panel-border);
+    border-bottom: none;
+    font-size: 0.7rem;
   }
 
   #visualization-controls-container .viz-panel-body {
-    width: min(260px, calc(100vw - 64px));
-    padding: 12px;
+    width: 100%;
+    max-height: min(42dvh, 320px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 10px 12px;
     gap: 10px;
+    border-radius: 0 0 10px 10px;
+  }
+
+  #visualization-controls-container.is-collapsed {
+    width: auto;
+    min-width: 0;
+    max-width: none;
+  }
+
+  #visualization-controls-container.is-collapsed .viz-panel-body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(10px);
+    width: auto;
+    height: 0;
+    max-height: 0;
+    padding: 0;
+    overflow: hidden;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  #visualization-controls-container.is-collapsed .viz-panel-tab {
+    margin: 0;
+    border-radius: 10px;
+    border: 1px solid var(--panel-border);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   }
 
   .slider-group input[type="range"] {
     min-height: 44px;
   }
 
+  /* Delicate bottom telemetry strip */
   .glass-hud {
-    left: max(8px, env(safe-area-inset-left));
-    right: max(8px, env(safe-area-inset-right));
-    bottom: max(8px, env(safe-area-inset-bottom));
+    left: max(6px, env(safe-area-inset-left));
+    right: max(6px, env(safe-area-inset-right));
+    bottom: max(4px, env(safe-area-inset-bottom));
     height: auto;
-    min-height: 44px;
-    padding: 8px 12px;
-    font-size: 0.7rem;
-    flex-wrap: wrap;
-    gap: 4px 8px;
+    min-height: 26px;
+    padding: 3px 8px;
+    font-size: 0.58rem;
+    flex-wrap: nowrap;
+    gap: 6px;
+    border-radius: 8px;
   }
 
-  .hud-left, .hud-right {
-    flex: 1 1 40%;
+  .hud-left, .hud-right, .hud-center {
+    flex: 0 1 auto;
+    gap: 4px;
   }
 
   .hud-center {
-    flex: 1 1 100%;
-    order: 3;
-    justify-content: flex-start;
+    flex: 1 1 auto;
+    order: 0;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .hud-label {
+    font-size: 0.52rem;
   }
 
   .hud-badge {
-    max-width: 36vw;
+    max-width: 28vw;
+    padding: 1px 5px;
+    font-size: 0.55rem;
   }
 
   .hud-token-text {
-    max-width: 40vw;
+    max-width: 28vw;
   }
 
   .hud-highlight {
-    font-size: 0.72rem;
+    font-size: 0.58rem;
   }
 
   #axis-gizmo-container {
-    width: 72px;
-    height: 72px;
+    width: 64px;
+    height: 64px;
   }
 
   #compare-panel .compare-cosine-list {

src/ui/TouchControls.js

@@ -11,6 +11,7 @@ const UI_BLOCK_SELECTOR = [
   '#right-dock',
   '#bottom-hud',
   '#top-navbar',
+  '#visualization-controls-container',
   '#landscape-gate',
   '#touch-controls',
   '.glass-modal',

src/ui/VisualizationControls.js

@@ -1,6 +1,7 @@
 /**
- * Visualization panel: sign filter + divergent color anchors (right dock).
- * Includes an edge collapse tab (same affordance as CollapsibleDock).
+ * Visualization panel: sign filter + divergent color anchors.
+ * Desktop: edge collapse tab in the right dock (sibling outside card chrome).
+ * Phone: bottom sheet on app root (open upward; must leave transformed dock).
  */
 
 import {
@@ -23,22 +24,61 @@ import {
 
 export const VIZ_PANEL_COLLAPSE_KEY = `${VIZ_STORAGE_PREFIX}panelCollapsed`;
 
+/** @typedef {'edge' | 'sheet'} VizPanelLayout */
+
+/**
+ * Desktop = side edge tab; phone = bottom sheet (open upward).
+ * @param {boolean} isMobile
+ * @returns {VizPanelLayout}
+ */
+export function vizPanelLayoutForViewport(isMobile) {
+  return isMobile ? 'sheet' : 'edge';
+}
+
+/**
+ * Where to mount the Visualization host (sheet must leave the right dock —
+ * a transformed ancestor traps `position: fixed`).
+ * @param {{ isMobile: boolean, dockBody: HTMLElement, appRoot: HTMLElement }} opts
+ * @returns {HTMLElement}
+ */
+export function resolveVisualizationMountParent(opts) {
+  if (!opts || !opts.dockBody || !opts.appRoot) {
+    throw new Error('resolveVisualizationMountParent requires dockBody and appRoot');
+  }
+  return opts.isMobile ? opts.appRoot : opts.dockBody;
+}
+
 /**
  * @param {boolean} collapsed
+ * @param {VizPanelLayout} [layout='edge']
  * @returns {string}
  */
-export function vizPanelTabGlyph(collapsed) {
+export function vizPanelTabGlyph(collapsed, layout = 'edge') {
+  if (layout === 'sheet') return collapsed ? '▲' : '▼';
   return collapsed ? '◀' : '▶';
 }
 
 /**
  * @param {boolean} collapsed
+ * @param {VizPanelLayout} [layout='edge']
  * @returns {string}
  */
-export function vizPanelTabLabel(collapsed) {
+export function vizPanelTabLabel(collapsed, layout = 'edge') {
+  if (layout === 'sheet') {
+    return collapsed ? 'Expand Visualization sheet' : 'Collapse Visualization sheet';
+  }
   return collapsed ? 'Expand Visualization panel' : 'Collapse Visualization panel';
 }
 
+/**
+ * @param {HTMLElement | null | undefined} container
+ * @returns {VizPanelLayout}
+ */
+export function readVizPanelLayout(container) {
+  const raw = container && container.dataset ? container.dataset.vizLayout : null;
+  return raw === 'sheet' ? 'sheet' : 'edge';
+}
+
 /**
  * Button label for thread-labels visibility toggle.
  * @param {boolean} labelsVisible
@@ -50,19 +90,20 @@ export function labelsToggleButtonText(labelsVisible) {
 
 /**
  * @param {import('./visualizationControlsDefaults.js').VisualizationSettings} [config]
- * @param {{ collapsed?: boolean }} [opts]
+ * @param {{ collapsed?: boolean, layout?: VizPanelLayout }} [opts]
  * @returns {string}
  */
 export function visualizationControlsMarkup(config = DEFAULT_VISUALIZATION_SETTINGS, opts = {}) {
   const s = resolveVisualizationSettings(config);
   const collapsed = opts.collapsed === true;
+  const layout = opts.layout === 'sheet' ? 'sheet' : 'edge';
   const checked = (mode) => (s.vizFilterMode === mode ? 'checked' : '');
   const collapsedClass = collapsed ? ' is-collapsed' : '';
-  const glyph = vizPanelTabGlyph(collapsed);
-  const label = vizPanelTabLabel(collapsed);
+  const glyph = vizPanelTabGlyph(collapsed, layout);
+  const label = vizPanelTabLabel(collapsed, layout);
 
   return `
-<div id="visualization-controls-container" class="section-card viz-panel${collapsedClass}">
+<div id="visualization-controls-container" class="section-card viz-panel${collapsedClass}" data-viz-layout="${layout}">
   <button type="button" class="viz-panel-tab dock-tab" aria-expanded="${collapsed ? 'false' : 'true'}" aria-controls="viz-panel-body" title="${label}" aria-label="${label}">${glyph}</button>
   <div id="viz-panel-body" class="viz-panel-body">
     <h3 class="sliders-title">Visualization</h3>
@@ -164,17 +205,30 @@ export function syncVisualizationControlsFromConfig(container, config) {
 export function setVisualizationPanelCollapsed(container, collapsed) {
   if (!container) return;
   const next = Boolean(collapsed);
+  const layout = readVizPanelLayout(container);
   container.classList.toggle('is-collapsed', next);
   const tab = container.querySelector('.viz-panel-tab');
   if (tab) {
-    const label = vizPanelTabLabel(next);
+    const label = vizPanelTabLabel(next, layout);
     tab.setAttribute('aria-expanded', next ? 'false' : 'true');
     tab.setAttribute('aria-label', label);
     tab.setAttribute('title', label);
-    tab.textContent = vizPanelTabGlyph(next);
+    tab.textContent = vizPanelTabGlyph(next, layout);
   }
 }
 
+/**
+ * Sync layout attribute + tab glyphs for the current viewport mode.
+ * @param {HTMLElement} container
+ * @param {VizPanelLayout} layout
+ */
+export function setVisualizationPanelLayout(container, layout) {
+  if (!container) return;
+  const next = layout === 'sheet' ? 'sheet' : 'edge';
+  container.dataset.vizLayout = next;
+  setVisualizationPanelCollapsed(container, container.classList.contains('is-collapsed'));
+}
+
 /**
  * Wire filter radios, hex/swatch inputs, Reset, and edge collapse tab.
  * Mutates `config` in place; persists to localStorage; calls onChange.

tests/TouchControls.test.js

@@ -27,6 +27,16 @@ describe('isUiTouchTarget', () => {
     expect(isUiTouchTarget(child)).toBe(true);
   });
 
+  it('treats Visualization sheet as UI', () => {
+    const sheet = {
+      id: 'visualization-controls-container',
+      tagName: 'DIV',
+      closest: (sel) => (sel.includes('#visualization-controls-container') ? sheet : null),
+    };
+    const child = { tagName: 'BUTTON', closest: (sel) => sheet.closest(sel) };
+    expect(isUiTouchTarget(child)).toBe(true);
+  });
+
   it('allows bare canvas', () => {
     const canvas = { tagName: 'CANVAS', closest: () => null };
     expect(isUiTouchTarget(canvas)).toBe(false);

tests/visualizationControls.test.js

@@ -18,6 +18,10 @@ import {
 import {
   visualizationControlsMarkup,
   setVisualizationPanelCollapsed,
+  setVisualizationPanelLayout,
+  vizPanelTabGlyph,
+  vizPanelLayoutForViewport,
+  resolveVisualizationMountParent,
 } from '../src/ui/VisualizationControls.js';
 import {
   NEAR_ZERO_EPS,
@@ -124,6 +128,7 @@ describe('Visualization panel collapse tab', () => {
   it('markup includes edge tab and aria-expanded', () => {
     const html = visualizationControlsMarkup(DEFAULT_VISUALIZATION_SETTINGS, { collapsed: false });
     expect(html).toContain('viz-panel-tab');
+    expect(html).toContain('data-viz-layout="edge"');
     expect(html).toContain('aria-expanded="true"');
     expect(html).toContain('▶');
     expect(html).toContain('viz-zero-coverage-slider');
@@ -154,6 +159,35 @@ describe('Visualization panel collapse tab', () => {
     expect(html).toContain('◀');
   });
 
+  it('sheet layout uses up/down glyphs and layout attribute', () => {
+    expect(vizPanelLayoutForViewport(true)).toBe('sheet');
+    expect(vizPanelLayoutForViewport(false)).toBe('edge');
+    expect(vizPanelTabGlyph(true, 'sheet')).toBe('▲');
+    expect(vizPanelTabGlyph(false, 'sheet')).toBe('▼');
+    const html = visualizationControlsMarkup(DEFAULT_VISUALIZATION_SETTINGS, {
+      collapsed: true,
+      layout: 'sheet',
+    });
+    expect(html).toContain('data-viz-layout="sheet"');
+    expect(html).toContain('▲');
+    expect(html).toContain('Expand Visualization sheet');
+  });
+
+  it('resolveVisualizationMountParent leaves the dock on phone', () => {
+    const dockBody = { id: 'dock' };
+    const appRoot = { id: 'app' };
+    expect(resolveVisualizationMountParent({
+      isMobile: true,
+      dockBody,
+      appRoot,
+    })).toBe(appRoot);
+    expect(resolveVisualizationMountParent({
+      isMobile: false,
+      dockBody,
+      appRoot,
+    })).toBe(dockBody);
+  });
+
   it('setVisualizationPanelCollapsed toggles class and glyph', () => {
     const classList = new Set(['section-card', 'viz-panel']);
     const tab = {
@@ -162,6 +196,7 @@ describe('Visualization panel collapse tab', () => {
       setAttribute(k, v) { this.attrs[k] = String(v); },
     };
     const el = {
+      dataset: { vizLayout: 'edge' },
       classList: {
         toggle: (cls, force) => {
           if (force) classList.add(cls);
@@ -179,6 +214,29 @@ describe('Visualization panel collapse tab', () => {
     expect(classList.has('is-collapsed')).toBe(false);
     expect(tab.textContent).toBe('▶');
   });
+
+  it('setVisualizationPanelLayout switches sheet glyphs', () => {
+    const classList = new Set(['section-card', 'viz-panel', 'is-collapsed']);
+    const tab = {
+      textContent: '◀',
+      attrs: {},
+      setAttribute(k, v) { this.attrs[k] = String(v); },
+    };
+    const el = {
+      dataset: { vizLayout: 'edge' },
+      classList: {
+        toggle: (cls, force) => {
+          if (force) classList.add(cls);
+          else classList.delete(cls);
+        },
+        contains: (cls) => classList.has(cls),
+      },
+      querySelector: (sel) => (sel === '.viz-panel-tab' ? tab : null),
+    };
+    setVisualizationPanelLayout(el, 'sheet');
+    expect(el.dataset.vizLayout).toBe('sheet');
+    expect(tab.textContent).toBe('▲');
+  });
 });
 
 describe('shouldShowActivation / filter helpers', () => {