merge(feat): Galaxy VIEW Slice 2 — Navbar chrome locks

src/main.js

@@ -54,6 +54,11 @@ import { wireFieldInfo } from './ui/fieldInfo.js';
 import {
   DEFAULT_VIEW_MODE,
 } from './ui/appViewDefaults.js';
+import {
+  enterGalaxyChrome,
+  isGalaxyView,
+  leaveGalaxyChrome,
+} from './ui/galaxyChrome.js';
 import {
   loadArithmeticSettings,
   saveArithmeticSettings,
@@ -87,6 +92,9 @@ class VHectorLabApp {
 
     // 3. View Mode State — startup ARITHMETIC | ANALYSIS | POINTS
     this.viewMode = DEFAULT_VIEW_MODE;
+    /** @type {{ workspaceMode: string, viewMode: string, renderMode: string }|null} */
+    this._preGalaxyTriad = null;
+    this.galaxyMethod = 'umap';
 
     // 4. UI Components (Modal, HUD, Navbar, Sidebar, ComparePanel, ThreadLabels)
     // Bottom HUD is always visible (roadmap D3) — not hosted in a collapsible dock.
@@ -109,18 +117,22 @@ class VHectorLabApp {
     this.navbar = new Navbar(
       this.appContainer,
       (renderMode) => {
+        if (isGalaxyView(this.viewMode)) return;
         state.setRenderMode(renderMode);
         this.applyContextViewDefaults();
         this.refreshRender();
       },
       (viewMode) => {
-        this.viewMode = viewMode;
-        this.applyContextViewDefaults();
-        this.refreshRender();
+        this.handleViewModeChange(viewMode);
       },
       (workspaceMode) => {
+        if (isGalaxyView(this.viewMode)) return;
         this.handleWorkspaceModeChange(workspaceMode);
-      }
+      },
+      (method) => {
+        this.galaxyMethod = method;
+        // Projection pipeline wires in later Galaxy slices.
+      },
     );
 
     // Tap/click "i" tips on editable fields (mobile-friendly; one tip at a time).
@@ -345,6 +357,72 @@ class VHectorLabApp {
     }
   }
 
+  /**
+   * VIEW triad: Galaxy locks MODE=COMPARE + RENDER=POINTS; leaving restores snapshot.
+   * @param {string} nextView
+   */
+  handleViewModeChange(nextView) {
+    const wasGalaxy = isGalaxyView(this.viewMode);
+    const entering = isGalaxyView(nextView);
+
+    if (entering && !wasGalaxy) {
+      const entered = enterGalaxyChrome({
+        workspaceMode: state.workspaceMode,
+        viewMode: this.viewMode,
+        renderMode: state.renderMode,
+      });
+      this._preGalaxyTriad = entered.restore;
+      this.viewMode = entered.viewMode;
+      this.galaxyMethod = entered.method;
+      this.navbar.setModeRenderLocked(true);
+      this.navbar.setGalaxyMethod(entered.method);
+      this.navbar.setViewMode(entered.viewMode);
+
+      if (state.renderMode !== entered.renderMode) {
+        state.setRenderMode(entered.renderMode);
+      }
+      this.navbar.setRenderMode(entered.renderMode);
+
+      if (state.workspaceMode !== entered.workspaceMode) {
+        this.navbar.setWorkspaceMode(entered.workspaceMode);
+        this.handleWorkspaceModeChange(entered.workspaceMode);
+      } else {
+        this.navbar.setWorkspaceMode(entered.workspaceMode);
+        this.applyContextViewDefaults();
+        this.refreshRender();
+      }
+      return;
+    }
+
+    if (!entering && wasGalaxy) {
+      const left = leaveGalaxyChrome(this._preGalaxyTriad, nextView);
+      this._preGalaxyTriad = null;
+      this.viewMode = left.viewMode;
+      this.navbar.setModeRenderLocked(false);
+      this.navbar.setViewMode(left.viewMode);
+
+      if (state.renderMode !== left.renderMode) {
+        state.setRenderMode(left.renderMode);
+      }
+      this.navbar.setRenderMode(left.renderMode);
+
+      if (state.workspaceMode !== left.workspaceMode) {
+        this.navbar.setWorkspaceMode(left.workspaceMode);
+        this.handleWorkspaceModeChange(left.workspaceMode);
+      } else {
+        this.navbar.setWorkspaceMode(left.workspaceMode);
+        this.applyContextViewDefaults();
+        this.refreshRender();
+      }
+      return;
+    }
+
+    this.viewMode = nextView;
+    this.navbar.setViewMode(nextView);
+    this.applyContextViewDefaults();
+    this.refreshRender();
+  }
+
   refreshRender() {
     if (state.workspaceMode === 'COMPARE') {
       if (state.compareData) {

src/style.css

@@ -174,6 +174,64 @@ canvas {
   box-shadow: 0 0 12px rgba(0, 255, 170, 0.4);
 }
 
+.mode-tab:disabled,
+.workspace-tab:disabled,
+.mode-tab.tab-locked,
+.workspace-tab.tab-locked {
+  opacity: 0.45;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.mode-tab:disabled.active,
+.workspace-tab:disabled.active,
+.mode-tab.tab-locked.active,
+.workspace-tab.tab-locked.active {
+  opacity: 0.75;
+}
+
+.galaxy-view-cluster {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 3px;
+}
+
+.galaxy-method-chips {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+}
+
+.galaxy-method-chips[hidden] {
+  display: none !important;
+}
+
+.galaxy-method-chip {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-muted);
+  padding: 1px 6px;
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 1.3;
+}
+
+.galaxy-method-chip.active {
+  background: rgba(0, 255, 170, 0.25);
+  border-color: rgba(0, 255, 170, 0.55);
+  color: var(--text-main);
+}
+
+.galaxy-method-chip:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
 .hidden {
   display: none !important;
 }
@@ -2001,6 +2059,19 @@ canvas {
     line-height: 1;
   }
 
+  /* Keep Galaxy method chips in the single slim row */
+  .galaxy-view-cluster {
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .galaxy-method-chip {
+    padding: 0 4px;
+    font-size: 0.5rem;
+    min-height: 16px;
+  }
+
   .status-indicator {
     margin-left: 0;
     flex-shrink: 0;

src/ui/Navbar.js

@@ -1,5 +1,6 @@
 /**
- * Top Navbar component with title, status indicator, View Mode tabs (ANALYSIS | NAVIGATION), and Render Mode selector tabs (POINTS | RIBBONS).
+ * Top Navbar: MODE | VIEW (ANALYSIS | NAVIGATION | GALAXY) | RENDER.
+ * Galaxy: method chips (UMAP active; PCA/t-SNE disabled) + MODE/RENDER lock.
  * Mobile: overflow tab strip gets ◀ ▶ scroll arrows.
  */
 import { getTabsScrollState, nextTabsScrollLeft } from './navbarTabsScroll.js';
@@ -8,18 +9,42 @@ import {
   DEFAULT_VIEW_MODE,
   DEFAULT_WORKSPACE_MODE,
 } from './appViewDefaults.js';
+import {
+  DEFAULT_GALAXY_METHOD,
+  GALAXY_METHODS,
+  GALAXY_VIEW,
+  isGalaxyView,
+} from './galaxyChrome.js';
 
 export class Navbar {
-  constructor(containerElement, onRenderModeChangeCallback, onViewModeChangeCallback, onWorkspaceModeChangeCallback) {
+  constructor(
+    containerElement,
+    onRenderModeChangeCallback,
+    onViewModeChangeCallback,
+    onWorkspaceModeChangeCallback,
+    onGalaxyMethodChangeCallback,
+  ) {
     this.container = containerElement || document.body;
     this.onRenderModeChange = onRenderModeChangeCallback;
     this.onViewModeChange = onViewModeChangeCallback;
     this.onWorkspaceModeChange = onWorkspaceModeChangeCallback;
+    this.onGalaxyMethodChange = onGalaxyMethodChangeCallback;
+    this._modeRenderLocked = false;
+    this._galaxyMethod = DEFAULT_GALAXY_METHOD;
 
     const workspaceActive = (mode) => (mode === DEFAULT_WORKSPACE_MODE ? ' active' : '');
     const viewActive = (mode) => (mode === DEFAULT_VIEW_MODE ? ' active' : '');
     const renderActive = (mode) => (mode === DEFAULT_RENDER_MODE ? ' active' : '');
 
+    const methodChipsHtml = Object.values(GALAXY_METHODS)
+      .map((m) => {
+        const disabled = m.enabled ? '' : ' disabled';
+        const title = m.title ? ` title="${m.title}"` : '';
+        const active = m.id === DEFAULT_GALAXY_METHOD ? ' active' : '';
+        return `<button type="button" data-galaxy-method="${m.id}" class="galaxy-method-chip${active}"${disabled}${title}>${m.label}</button>`;
+      })
+      .join('');
+
     this.element = document.createElement('header');
     this.element.id = 'top-navbar';
     this.element.className = 'glass-navbar';
@@ -45,6 +70,12 @@ export class Navbar {
             <span class="tab-label">VIEW:</span>
             <button data-view="ANALYSIS" class="view-tab${viewActive('ANALYSIS')}">ANALYSIS</button>
             <button data-view="NAVIGATION" class="view-tab${viewActive('NAVIGATION')}">NAVIGATION</button>
+            <div class="galaxy-view-cluster">
+              <button data-view="${GALAXY_VIEW}" class="view-tab${viewActive(GALAXY_VIEW)}">GALAXY</button>
+              <div class="galaxy-method-chips" hidden aria-label="Galaxy projection method">
+                ${methodChipsHtml}
+              </div>
+            </div>
           </div>
 
           <div class="render-mode-tabs">
@@ -67,6 +98,8 @@ export class Navbar {
     this.renderTabs = this.element.querySelectorAll('.mode-tab');
     this.viewTabs = this.element.querySelectorAll('.view-tab');
     this.workspaceTabs = this.element.querySelectorAll('.workspace-tab');
+    this.galaxyMethodChips = this.element.querySelector('.galaxy-method-chips');
+    this.galaxyMethodButtons = this.element.querySelectorAll('[data-galaxy-method]');
     this.statusDot = this.element.querySelector('#backend-status-dot');
     this.statusText = this.element.querySelector('#backend-status-text');
     this.tabsTrack = this.element.querySelector('.navbar-center-controls');
@@ -79,41 +112,48 @@ export class Navbar {
   }
 
   initEventListeners() {
-    this.workspaceTabs.forEach(tab => {
+    this.workspaceTabs.forEach((tab) => {
       tab.addEventListener('click', (e) => {
-        const mode = e.target.getAttribute('data-workspace');
-        this.workspaceTabs.forEach(t => t.classList.remove('active'));
-        e.target.classList.add('active');
-
+        if (this._modeRenderLocked || tab.disabled) return;
+        const mode = e.currentTarget.getAttribute('data-workspace');
+        this.setWorkspaceMode(mode);
         if (this.onWorkspaceModeChange) {
           this.onWorkspaceModeChange(mode);
         }
       });
     });
 
-    this.renderTabs.forEach(tab => {
+    this.renderTabs.forEach((tab) => {
       tab.addEventListener('click', (e) => {
-        const mode = e.target.getAttribute('data-mode');
-        this.renderTabs.forEach(t => t.classList.remove('active'));
-        e.target.classList.add('active');
-
+        if (this._modeRenderLocked || tab.disabled) return;
+        const mode = e.currentTarget.getAttribute('data-mode');
+        this.setRenderMode(mode);
         if (this.onRenderModeChange) {
           this.onRenderModeChange(mode);
         }
       });
     });
 
-    this.viewTabs.forEach(tab => {
+    this.viewTabs.forEach((tab) => {
       tab.addEventListener('click', (e) => {
-        const view = e.target.getAttribute('data-view');
-        this.viewTabs.forEach(t => t.classList.remove('active'));
-        e.target.classList.add('active');
-
+        const view = e.currentTarget.getAttribute('data-view');
+        this.setViewMode(view);
         if (this.onViewModeChange) {
           this.onViewModeChange(view);
         }
       });
     });
+
+    this.galaxyMethodButtons.forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        if (btn.disabled) return;
+        const method = e.currentTarget.getAttribute('data-galaxy-method');
+        this.setGalaxyMethod(method);
+        if (this.onGalaxyMethodChange) {
+          this.onGalaxyMethodChange(method);
+        }
+      });
+    });
   }
 
   initTabsScroll() {
@@ -137,7 +177,6 @@ export class Navbar {
       this._tabsResizeObserver.observe(this.tabsScroller);
     }
 
-    // Layout may settle after fonts / first paint
     requestAnimationFrame(sync);
     window.addEventListener('resize', sync);
     this._tabsResizeHandler = sync;
@@ -173,17 +212,18 @@ export class Navbar {
   }
 
   setViewMode(viewMode) {
-    this.viewTabs.forEach(t => {
+    this.viewTabs.forEach((t) => {
       if (t.getAttribute('data-view') === viewMode) {
         t.classList.add('active');
       } else {
         t.classList.remove('active');
       }
     });
+    this.setGalaxyMethodChipsVisible(isGalaxyView(viewMode));
   }
 
   setWorkspaceMode(workspaceMode) {
-    this.workspaceTabs.forEach(t => {
+    this.workspaceTabs.forEach((t) => {
       if (t.getAttribute('data-workspace') === workspaceMode) {
         t.classList.add('active');
       } else {
@@ -192,10 +232,54 @@ export class Navbar {
     });
   }
 
+  setRenderMode(renderMode) {
+    this.renderTabs.forEach((t) => {
+      if (t.getAttribute('data-mode') === renderMode) {
+        t.classList.add('active');
+      } else {
+        t.classList.remove('active');
+      }
+    });
+  }
+
+  /**
+   * Lock MODE + RENDER while in Galaxy (COMPARE + POINTS forced).
+   * @param {boolean} locked
+   */
+  setModeRenderLocked(locked) {
+    this._modeRenderLocked = !!locked;
+    this.workspaceTabs.forEach((t) => {
+      t.disabled = this._modeRenderLocked;
+      t.classList.toggle('tab-locked', this._modeRenderLocked);
+      t.setAttribute('aria-disabled', this._modeRenderLocked ? 'true' : 'false');
+    });
+    this.renderTabs.forEach((t) => {
+      t.disabled = this._modeRenderLocked;
+      t.classList.toggle('tab-locked', this._modeRenderLocked);
+      t.setAttribute('aria-disabled', this._modeRenderLocked ? 'true' : 'false');
+    });
+  }
+
+  setGalaxyMethodChipsVisible(visible) {
+    if (!this.galaxyMethodChips) return;
+    if (visible) {
+      this.galaxyMethodChips.removeAttribute('hidden');
+    } else {
+      this.galaxyMethodChips.setAttribute('hidden', '');
+    }
+  }
+
+  setGalaxyMethod(method) {
+    this._galaxyMethod = method || DEFAULT_GALAXY_METHOD;
+    this.galaxyMethodButtons.forEach((btn) => {
+      const id = btn.getAttribute('data-galaxy-method');
+      btn.classList.toggle('active', id === this._galaxyMethod);
+    });
+  }
+
   setStatus(online, modelName = '', device = '') {
     if (online) {
       this.statusDot.className = 'status-dot online';
-      // Inline format keeps Navbar free of circular imports with arithmeticDefaults
       const model = String(modelName || '').trim();
       const dev = String(device || '').trim().toLowerCase();
       let label = 'ONLINE';

src/ui/galaxyChrome.js

@@ -0,0 +1,97 @@
+/**
+ * Galaxy VIEW chrome — triad lock/restore (no layout / no /project).
+ * Entering Galaxy forces COMPARE + POINTS; leaving restores the pre-Galaxy triad.
+ */
+
+export const GALAXY_VIEW = 'GALAXY';
+export const DEFAULT_GALAXY_METHOD = 'umap';
+
+/** Methods shown under GALAXY; only umap is enabled in v1. */
+export const GALAXY_METHODS = Object.freeze({
+  umap: { id: 'umap', label: 'UMAP', enabled: true },
+  pca: {
+    id: 'pca',
+    label: 'PCA',
+    enabled: false,
+    title: 'Coming next — PCA / t-SNE projection',
+  },
+  tsne: {
+    id: 'tsne',
+    label: 't-SNE',
+    enabled: false,
+    title: 'Coming next — PCA / t-SNE projection',
+  },
+});
+
+/**
+ * @param {string} [viewMode]
+ * @returns {boolean}
+ */
+export function isGalaxyView(viewMode) {
+  return viewMode === GALAXY_VIEW;
+}
+
+/**
+ * @param {{ workspaceMode?: string, viewMode?: string, renderMode?: string }} triad
+ * @returns {{ workspaceMode: string, viewMode: string, renderMode: string }}
+ */
+export function snapshotTriad(triad = {}) {
+  return {
+    workspaceMode: triad.workspaceMode || 'ARITHMETIC',
+    viewMode: triad.viewMode || 'ANALYSIS',
+    renderMode: triad.renderMode || 'POINTS',
+  };
+}
+
+/**
+ * @param {{ workspaceMode?: string, viewMode?: string, renderMode?: string }} prev
+ * @returns {{
+ *   viewMode: string,
+ *   workspaceMode: string,
+ *   renderMode: string,
+ *   method: string,
+ *   modeRenderLocked: boolean,
+ *   restore: { workspaceMode: string, viewMode: string, renderMode: string },
+ * }}
+ */
+export function enterGalaxyChrome(prev = {}) {
+  const restore = snapshotTriad(prev);
+  return {
+    viewMode: GALAXY_VIEW,
+    workspaceMode: 'COMPARE',
+    renderMode: 'POINTS',
+    method: DEFAULT_GALAXY_METHOD,
+    modeRenderLocked: true,
+    restore,
+  };
+}
+
+/**
+ * @param {{ workspaceMode?: string, viewMode?: string, renderMode?: string }|null|undefined} restore
+ * @param {string} nextView ANALYSIS | NAVIGATION (or anything non-GALAXY)
+ * @returns {{
+ *   viewMode: string,
+ *   workspaceMode: string,
+ *   renderMode: string,
+ *   modeRenderLocked: boolean,
+ * }}
+ */
+export function leaveGalaxyChrome(restore, nextView) {
+  const snap = snapshotTriad(restore || {});
+  const viewMode = nextView === GALAXY_VIEW ? 'ANALYSIS' : nextView;
+  return {
+    viewMode,
+    workspaceMode: snap.workspaceMode,
+    renderMode: snap.renderMode,
+    modeRenderLocked: false,
+  };
+}
+
+/**
+ * @param {string} [method]
+ * @returns {boolean}
+ */
+export function isGalaxyMethodEnabled(method) {
+  const m = GALAXY_METHODS[method];
+  return !!(m && m.enabled);
+}

tests/galaxyChrome.test.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import {
+  DEFAULT_GALAXY_METHOD,
+  GALAXY_METHODS,
+  GALAXY_VIEW,
+  enterGalaxyChrome,
+  isGalaxyMethodEnabled,
+  isGalaxyView,
+  leaveGalaxyChrome,
+  snapshotTriad,
+} from '../src/ui/galaxyChrome.js';
+import {
+  DEFAULT_RENDER_MODE,
+  DEFAULT_VIEW_MODE,
+  DEFAULT_WORKSPACE_MODE,
+} from '../src/ui/appViewDefaults.js';
+
+describe('galaxyChrome', () => {
+  it('isGalaxyView only for GALAXY', () => {
+    expect(isGalaxyView(GALAXY_VIEW)).toBe(true);
+    expect(isGalaxyView('ANALYSIS')).toBe(false);
+    expect(isGalaxyView('NAVIGATION')).toBe(false);
+  });
+
+  it('enterGalaxyChrome forces COMPARE + POINTS and locks MODE/RENDER', () => {
+    const entered = enterGalaxyChrome({
+      workspaceMode: 'ARITHMETIC',
+      viewMode: 'ANALYSIS',
+      renderMode: 'RIBBONS',
+    });
+    expect(entered.viewMode).toBe(GALAXY_VIEW);
+    expect(entered.workspaceMode).toBe('COMPARE');
+    expect(entered.renderMode).toBe('POINTS');
+    expect(entered.method).toBe(DEFAULT_GALAXY_METHOD);
+    expect(entered.modeRenderLocked).toBe(true);
+    expect(entered.restore).toEqual({
+      workspaceMode: 'ARITHMETIC',
+      viewMode: 'ANALYSIS',
+      renderMode: 'RIBBONS',
+    });
+  });
+
+  it('leaveGalaxyChrome restores pre-Galaxy triad and unlocks', () => {
+    const entered = enterGalaxyChrome({
+      workspaceMode: 'COMPARE',
+      viewMode: 'NAVIGATION',
+      renderMode: 'RIBBONS',
+    });
+    const left = leaveGalaxyChrome(entered.restore, 'ANALYSIS');
+    expect(left.viewMode).toBe('ANALYSIS');
+    expect(left.workspaceMode).toBe('COMPARE');
+    expect(left.renderMode).toBe('RIBBONS');
+    expect(left.modeRenderLocked).toBe(false);
+  });
+
+  it('leaveGalaxyChrome to NAVIGATION keeps restored MODE/RENDER', () => {
+    const left = leaveGalaxyChrome(
+      {
+        workspaceMode: 'ARITHMETIC',
+        viewMode: 'ANALYSIS',
+        renderMode: 'POINTS',
+      },
+      'NAVIGATION',
+    );
+    expect(left.viewMode).toBe('NAVIGATION');
+    expect(left.workspaceMode).toBe('ARITHMETIC');
+    expect(left.renderMode).toBe('POINTS');
+  });
+
+  it('PCA and t-SNE chips are disabled with coming-next title; UMAP enabled', () => {
+    expect(isGalaxyMethodEnabled('umap')).toBe(true);
+    expect(isGalaxyMethodEnabled('pca')).toBe(false);
+    expect(isGalaxyMethodEnabled('tsne')).toBe(false);
+    expect(GALAXY_METHODS.pca.title).toMatch(/Coming next/i);
+    expect(GALAXY_METHODS.tsne.title).toMatch(/Coming next/i);
+  });
+
+  it('startup defaults stay ARITHMETIC | ANALYSIS | POINTS (Galaxy is opt-in)', () => {
+    expect(DEFAULT_WORKSPACE_MODE).toBe('ARITHMETIC');
+    expect(DEFAULT_VIEW_MODE).toBe('ANALYSIS');
+    expect(DEFAULT_RENDER_MODE).toBe('POINTS');
+    expect(snapshotTriad({})).toEqual({
+      workspaceMode: 'ARITHMETIC',
+      viewMode: 'ANALYSIS',
+      renderMode: 'POINTS',
+    });
+  });
+});