feat(viz): group contrast paint, high-range zero coverage, HUD dim

Add Shared noise / Sign conflict controls for Compare groups, Zero coverage
On/Off with 30–99.9999% range, and DIM readout in hover telemetry.

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

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

@@ -255,7 +255,10 @@ Portable findings from VHectorLab 3D `v2.1.0` — apply if the older app shares
 | Expectation vs math | RAW G1↔G2 centroid cosine ~0.55 (not antipodal); SAE can improve (~0.22) but paint still hides it | Fix paint/order first; wider SAE train is L3, not required for readability |
 | Layout axes (ANALYSIS) | X=dim, Y=thread stack + val×amp, Z=0 | Soft Y gap between `GROUP_*` blocks (+1× spacing) aids domain reading |
 
-**Modules shipped (reference):** `saeFilterBridge.js`, `groupStackLayout.js`, `dimContrastSort.js`; wiring in Compare panel + Instancer layout. Diagnosis: `scripts/diagnose_group_separation.py`. Roadmap: `roadmap/compare-group-contrast-viz.md`.
+### 4.11b. Group contrast paint (shared noise / sign conflict)
+- **Problema**: En Compare con ≥2 `GROUP_*`, dims del mismo signo en ambos grupos son ruido compartido; dims de signo opuesto son señal — sin controles de paint dedicados.
+- **Solución**: Deep module `groupDimContrast.js` — means raw G1↔G2; `sim = 1−|Δ|/(|a|+|b|)`; cancel ZC-style sobre metric alta → negro; opposite → highlight color × strength×diff + conflict coverage independiente. Solo paint (Y intacto). UI gated (`setGroupContrastControlsEnabled`) hasta ≥2 grupos.
+- **Invariante**: Zero coverage global y Group contrast son independientes; On habilita sliders (Off = grisado); shader POINTS usa `aCancel`/`aHighlight` + `uColorHighlight`.
 
 ### 4.12. Bottom HUD hover activation (POINTS / RIBBONS)
 - **Problema**: `ACTIVATION` siempre `0.0000` — `Interaction` pasaba `userData` del mesh (`{ pointsData }`), y el HUD leía `userData.val` / `data.activation` (inexistentes).

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to VHectorLab 3D will be documented in this file.
 ## [Unreleased]
 
 ### Added
+- **Group contrast (Visualization panel)**: Compare ≥2 groups — Shared noise (same-sign → black by similarity %, ZC-style) + Sign conflict (opposite-sign highlight color × |Δ|, plus conflict coverage to black). Paint-only; gated until groups exist. Panel densified (~300px).
 - **Public lab release hygiene**: MIT `LICENSE` (© 2026 Hector Bauzan); root README frames VHectorLab as a study/laboratory tool (not SaaS), links the live HF Space demo, and documents shared cpu-basic limits; `backend/README.md` aligned in English.
 
 ### Fixed

CONTEXT.md

@@ -47,7 +47,7 @@ Compact tap “i” control next to an editable field; shows a short English pop
 Quad-strip mesh with real lateral width following a thread centerline, colored by activation; used by `RENDER: RIBBONS`. Distinct from 1px WebGL lines.
 
 ### Visualization Controls
-Right-dock glass panel for global sign filter and divergent color anchors (below 3D Spatial Controls).
+Bottom-HUD glass panel for global sign filter, divergent color anchors, Zero Coverage, and Group contrast (Compare ≥2 groups).
 
 ### Sign Filter
 Global show mode `all | positive | negative` over **normalized** activations (post z-score/tanh); near-zero `|t| < 0.01` is treated as neutral and hidden by +/− only.
@@ -58,6 +58,12 @@ User-editable hex for normalized activations at +1, 0, and −1; replaces the fo
 ### Zero Coverage
 Percent of the |t| range held at the zero color (default black) before blending toward ±1 anchors; capped at 90%.
 
+### Group Contrast
+Visualization paint for Compare with ≥2 groups: **Shared noise** blackens same-sign dims by similarity; **Sign conflict** highlights opposite-sign dims (custom color × |Δ|) and can blacken them by difference. Uses group means on raw embeddings; geometry Y unchanged.
+
+### Shared Noise Similarity
+`1 − |mean_G1 − mean_G2| / (|mean_G1| + |mean_G2|)` per dimension — high values mean shared-sign “noise” between groups.
+
 ### Top‑K SAE
 Trained sparse autoencoder with exactly K active latents per input (ReLU + Top‑K, no L1 shrinkage). Trained on the **current workspace scope** (Compare/Arithmetic batch); ephemeral in-RAM session model. Default caps 768 → 8192 with K=32 (auto-scaled for small N).
 

src/main.js

@@ -32,11 +32,13 @@ import {
   vizPanelLayoutForViewport,
   resolveVisualizationMountParent,
   setVisualizationPanelLayout,
+  setGroupContrastControlsEnabled,
 } from './ui/VisualizationControls.js';
 import {
   loadVisualizationSettings,
   saveVisualizationSettings,
 } from './ui/visualizationControlsDefaults.js';
+import { hasGroupsForDimContrast } from './visualizer/groupDimContrast.js';
 import {
   snapshotFilterForSae,
   filterModeForSaeOn,
@@ -249,6 +251,7 @@ class VHectorLabApp {
       this.refreshRender();
     });
     this.threadLabels.setVisible(this.vizConfig.labelsVisible);
+    this.syncGroupContrastGate();
 
     if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
       this._vizLayoutMq = window.matchMedia(MOBILE_MQ);
@@ -385,6 +388,18 @@ class VHectorLabApp {
         this.threadLabels.setLabels(labels);
       }
     }
+    this.syncGroupContrastGate();
+  }
+
+  /**
+   * Enable Group contrast viz controls only for compare ≥2 groups.
+   */
+  syncGroupContrastGate() {
+    if (!this.vizEl || !this.vizConfig) return;
+    const items = state.workspaceMode === 'COMPARE'
+      ? (this.rawCompareData?.items || state.compareData?.items || [])
+      : [];
+    setGroupContrastControlsEnabled(this.vizEl, hasGroupsForDimContrast(items), this.vizConfig);
   }
 
   /**

src/style.css

@@ -985,6 +985,11 @@ canvas {
 }
 
 .hud-val { font-family: monospace; font-weight: 600; color: var(--text-main); }
+#hud-dim {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  min-width: 4.5ch;
+}
 .hud-badge {
   background: rgba(0, 255, 170, 0.15);
   color: var(--accent-cyan);
@@ -1229,9 +1234,9 @@ canvas {
   Collapse only hides the body — the short left dock-tab stays parked on the HUD.
 */
 #visualization-controls-container.viz-panel {
-  --viz-width: 260px;
-  --viz-tab-size: 28px;
-  --viz-tab-h: 72px;
+  --viz-width: 300px;
+  --viz-tab-size: 26px;
+  --viz-tab-h: 64px;
   position: absolute;
   right: var(--hud-pad);
   bottom: calc(var(--hud-bottom) + var(--hud-height) - 1px);
@@ -1276,11 +1281,11 @@ canvas {
 #visualization-controls-container .viz-panel-body {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px 12px 12px;
+  gap: 6px;
+  padding: 8px 10px 10px;
   width: var(--viz-width);
   max-width: var(--viz-width);
-  max-height: min(48vh, 420px);
+  max-height: min(56vh, 520px);
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
@@ -1333,49 +1338,111 @@ canvas {
 
 /* Compact Visualization internals */
 #visualization-controls-container .sliders-title {
-  font-size: 0.85rem;
-  padding-bottom: 6px;
+  font-size: 0.8rem;
+  padding-bottom: 4px;
   margin: 0;
 }
 
 #visualization-controls-container .viz-filter-group {
-  gap: 6px;
+  gap: 4px;
 }
 
 #visualization-controls-container .viz-filter-label {
-  font-size: 0.72rem;
+  font-size: 0.68rem;
 }
 
 #visualization-controls-container .viz-colors-section {
-  gap: 6px;
+  gap: 4px;
 }
 
 #visualization-controls-container .viz-colors-title {
-  font-size: 0.72rem;
+  font-size: 0.68rem;
 }
 
 #visualization-controls-container .viz-color-row {
-  gap: 6px;
+  gap: 4px;
 }
 
 #visualization-controls-container .viz-color-row label {
-  font-size: 0.72rem;
-  min-width: 2.4rem;
+  font-size: 0.68rem;
+  min-width: 2.1rem;
 }
 
 #visualization-controls-container .viz-color-hex {
-  font-size: 0.72rem;
-  padding: 4px 6px;
+  font-size: 0.68rem;
+  padding: 3px 5px;
 }
 
 #visualization-controls-container .viz-coverage-row {
-  gap: 4px;
+  gap: 2px;
 }
 
 #visualization-controls-container .viz-labels-toggle,
 #visualization-controls-container .viz-reset-btn {
-  padding: 6px 10px;
+  padding: 4px 8px;
+  font-size: 0.68rem;
+}
+
+#visualization-controls-container .viz-group-contrast {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding-top: 4px;
+  border-top: 1px solid var(--panel-border);
+}
+
+#visualization-controls-container .viz-group-contrast-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
   font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent-cyan);
+}
+
+#visualization-controls-container .viz-group-contrast-hint {
+  margin: 0;
+  font-size: 0.62rem;
+  color: var(--text-muted);
+  line-height: 1.25;
+}
+
+#visualization-controls-container .viz-group-fx-block {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+#visualization-controls-container .viz-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+#visualization-controls-container .viz-toggle-row input[type="checkbox"] {
+  accent-color: var(--accent-cyan);
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+#visualization-controls-container .viz-fx-slider.is-inert,
+#visualization-controls-container .viz-group-contrast.is-disabled {
+  opacity: 0.45;
+}
+
+#visualization-controls-container .viz-group-contrast.is-disabled .viz-group-contrast-hint {
+  opacity: 1;
+}
+
+#visualization-controls-container .viz-fx-slider.is-inert input,
+#visualization-controls-container .viz-group-contrast.is-disabled input {
+  cursor: not-allowed;
 }
 
 #axis-gizmo-container {
@@ -2032,9 +2099,9 @@ canvas {
     Collapsed tab stays on top of the HUD (not a side orphan).
   */
   #visualization-controls-container.viz-panel {
-    --viz-width: min(260px, calc(100vw - 64px));
-    --viz-tab-size: 28px;
-    --viz-tab-h: 56px;
+    --viz-width: min(300px, calc(100vw - 56px));
+    --viz-tab-size: 26px;
+    --viz-tab-h: 52px;
     position: fixed;
     left: auto;
     right: var(--hud-pad);
@@ -2056,9 +2123,9 @@ canvas {
   #visualization-controls-container .viz-panel-body {
     width: var(--viz-width);
     max-width: var(--viz-width);
-    padding: 8px 10px 10px;
-    gap: 7px;
-    max-height: min(38dvh, 260px);
+    padding: 7px 8px 8px;
+    gap: 5px;
+    max-height: min(42dvh, 340px);
     overflow-y: auto;
     border-radius: 0 10px 0 0;
   }

src/ui/HUD.js

@@ -29,6 +29,7 @@ export class HUD {
       <div class="hud-center">
         <span class="hud-label">HOVER TELEMETRY:</span>
         <span id="hud-segment" class="hud-badge">RESULT VECTOR</span>
+        <span id="hud-dim" class="hud-val">DIM: --</span>
         <span id="hud-activation" class="hud-highlight">ACTIVATION: --</span>
       </div>
       <div class="hud-right">
@@ -41,11 +42,13 @@ export class HUD {
 
     this.coordsEl = this.element.querySelector('#hud-coords');
     this.segmentEl = this.element.querySelector('#hud-segment');
+    this.dimEl = this.element.querySelector('#hud-dim');
     this.activationEl = this.element.querySelector('#hud-activation');
     this.tokenEl = this.element.querySelector('#hud-token');
     this.centerEl = this.element.querySelector('.hud-center');
 
     this._lastActivation = null;
+    this._lastDim = null;
     this._resizeObserver = null;
 
     if (typeof ResizeObserver !== 'undefined' && this.centerEl) {
@@ -53,6 +56,7 @@ export class HUD {
         if (this._lastActivation != null) {
           this._renderActivation(this._lastActivation);
         }
+        this._renderDim(this._lastDim);
       });
       this._resizeObserver.observe(this.centerEl);
     }
@@ -108,8 +112,10 @@ export class HUD {
     const t = resolveHoverTelemetry(data);
     if (!t) {
       this._lastActivation = null;
+      this._lastDim = null;
       this.coordsEl.textContent = 'X: -- | Y: -- | Z: --';
       this.segmentEl.textContent = 'NEUTRAL SPACE';
+      this._renderDim(null);
       this.activationEl.textContent = 'ACTIVATION: --';
       this.activationEl.style.color = '#888888';
       this.activationEl.removeAttribute('title');
@@ -121,12 +127,30 @@ export class HUD {
     this.coordsEl.textContent = `X: ${Math.round(pos.x)} | Y: ${Math.round(pos.y)} | Z: ${Math.round(pos.z)}`;
 
     this._lastActivation = t.activation;
+    this._lastDim = t.dim;
+    this._renderDim(t.dim);
     this._renderActivation(t.activation);
 
     this.segmentEl.textContent = t.type;
     this.tokenEl.textContent = t.token;
   }
 
+  /**
+   * @param {number|null|undefined} dim
+   * @private
+   */
+  _renderDim(dim) {
+    if (!this.dimEl) return;
+    if (dim == null || !Number.isFinite(dim)) {
+      this.dimEl.textContent = 'DIM: --';
+      this.dimEl.removeAttribute?.('title');
+      return;
+    }
+    const n = Math.trunc(dim);
+    this.dimEl.textContent = `DIM: ${n}`;
+    this.dimEl.title = `dim: ${n}`;
+  }
+
   /**
    * @param {number} val
    * @private
@@ -149,11 +173,12 @@ export class HUD {
     const centerW = this.centerEl.clientWidth || 160;
     const labelW = this.centerEl.querySelector('.hud-label')?.offsetWidth || 0;
     const badgeW = this.segmentEl?.offsetWidth || 0;
-    const gap = 16;
-    const available = centerW - labelW - badgeW - gap;
+    const dimW = this.dimEl?.offsetWidth || 0;
+    const gap = 20;
+    const available = centerW - labelW - badgeW - dimW - gap;
     // Mobile wrap: if center is tight, allow activation to use most of the bar
     if (available < 64 && this.element?.clientWidth) {
-      return Math.max(72, Math.floor(this.element.clientWidth * 0.45));
+      return Math.max(72, Math.floor(this.element.clientWidth * 0.4));
     }
     return Math.max(64, available);
   }

src/ui/VisualizationControls.js

@@ -8,13 +8,20 @@ import {
   DEFAULT_VISUALIZATION_SETTINGS,
   normalizeHex,
   normalizeFilterMode,
-  normalizeZeroCoverage,
+  normalizeConflictCover,
+  normalizeHighlightStrength,
   resolveVisualizationSettings,
   saveVisualizationSettings,
   resetVisualizationSettings,
   VIZ_STORAGE_PREFIX,
-  ZERO_COVERAGE_MIN,
-  ZERO_COVERAGE_MAX,
+  CONFLICT_COVER_MIN,
+  CONFLICT_COVER_MAX,
+  HIGH_COVERAGE_SLIDER_MAX,
+  HIGHLIGHT_STRENGTH_MIN,
+  HIGHLIGHT_STRENGTH_MAX,
+  highCoverageFromSlider,
+  highCoverageToSlider,
+  formatHighCoverage,
 } from './visualizationControlsDefaults.js';
 import {
   readCollapsedPreference,
@@ -150,12 +157,65 @@ export function visualizationControlsMarkup(config = DEFAULT_VISUALIZATION_SETTI
       </div>
     </div>
 
-    <div class="viz-coverage-row slider-group">
-      <div class="slider-header">
-        <label for="viz-zero-coverage-slider"><span class="field-label-text">Zero coverage:</span>${infoTipMarkup(FIELD_INFO.zeroCoverage)}</label>
-        <span id="viz-zero-coverage-val" class="slider-val">${s.zeroCoverage}%</span>
+    <div class="viz-group-fx-block viz-zero-coverage-block">
+      <label class="viz-toggle-row">
+        <input type="checkbox" id="viz-zero-coverage-enabled" ${s.zeroCoverageEnabled ? 'checked' : ''}>
+        <span class="field-label-text">Zero coverage</span>${infoTipMarkup(FIELD_INFO.zeroCoverage)}
+      </label>
+      <div class="viz-coverage-row slider-group viz-fx-slider" data-requires="zero-coverage">
+        <div class="slider-header">
+          <label for="viz-zero-coverage-slider"><span class="field-label-text">Coverage:</span>${infoTipMarkup(FIELD_INFO.zeroCoverageAmount)}</label>
+          <span id="viz-zero-coverage-val" class="slider-val">${formatHighCoverage(s.zeroCoverage)}</span>
+        </div>
+        <input type="range" id="viz-zero-coverage-slider" min="0" max="${HIGH_COVERAGE_SLIDER_MAX}" step="1" value="${highCoverageToSlider(s.zeroCoverage)}" ${s.zeroCoverageEnabled ? '' : 'disabled'} title="30% … 99.9999% held at zero color">
+      </div>
+    </div>
+
+    <div id="viz-group-contrast" class="viz-group-contrast is-disabled" aria-disabled="true">
+      <div class="viz-group-contrast-title">
+        <span class="field-label-text">Group contrast</span>${infoTipMarkup(FIELD_INFO.groupContrast)}
+      </div>
+      <p class="viz-group-contrast-hint">Requires ≥2 compare groups.</p>
+
+      <div class="viz-group-fx-block" data-fx="same-sign">
+        <label class="viz-toggle-row">
+          <input type="checkbox" id="viz-same-sign-enabled" ${s.sameSignCancelEnabled ? 'checked' : ''}>
+          <span class="field-label-text">Shared noise</span>${infoTipMarkup(FIELD_INFO.sameSignCancel)}
+        </label>
+        <div class="viz-coverage-row slider-group viz-fx-slider" data-requires="same-sign">
+          <div class="slider-header">
+            <label for="viz-same-sign-coverage"><span class="field-label-text">Similarity:</span>${infoTipMarkup(FIELD_INFO.sameSignCoverage)}</label>
+            <span id="viz-same-sign-coverage-val" class="slider-val">${formatHighCoverage(s.sameSignCancelCoverage)}</span>
+          </div>
+          <input type="range" id="viz-same-sign-coverage" min="0" max="${HIGH_COVERAGE_SLIDER_MAX}" step="1" value="${highCoverageToSlider(s.sameSignCancelCoverage)}" ${s.sameSignCancelEnabled ? '' : 'disabled'}>
+        </div>
+      </div>
+
+      <div class="viz-group-fx-block" data-fx="opposite">
+        <label class="viz-toggle-row">
+          <input type="checkbox" id="viz-opposite-enabled" ${s.oppositeHighlightEnabled ? 'checked' : ''}>
+          <span class="field-label-text">Sign conflict</span>${infoTipMarkup(FIELD_INFO.oppositeHighlight)}
+        </label>
+        <div class="viz-color-row viz-fx-slider" data-requires="opposite">
+          <label for="viz-opposite-hex"><span class="field-label-text">Hi</span>${infoTipMarkup(FIELD_INFO.oppositeColor)}</label>
+          <input type="color" id="viz-opposite-swatch" class="viz-color-swatch" value="${s.oppositeHighlightColor}" ${s.oppositeHighlightEnabled ? '' : 'disabled'} title="Opposite-sign highlight" aria-label="Opposite highlight swatch">
+          <input type="text" id="viz-opposite-hex" class="viz-color-hex" value="${s.oppositeHighlightColor}" maxlength="7" spellcheck="false" ${s.oppositeHighlightEnabled ? '' : 'disabled'} placeholder="#00E5FF">
+        </div>
+        <div class="viz-coverage-row slider-group viz-fx-slider" data-requires="opposite">
+          <div class="slider-header">
+            <label for="viz-opposite-strength"><span class="field-label-text">Highlight:</span>${infoTipMarkup(FIELD_INFO.oppositeStrength)}</label>
+            <span id="viz-opposite-strength-val" class="slider-val">${s.oppositeHighlightStrength}%</span>
+          </div>
+          <input type="range" id="viz-opposite-strength" min="${HIGHLIGHT_STRENGTH_MIN}" max="${HIGHLIGHT_STRENGTH_MAX}" step="1" value="${s.oppositeHighlightStrength}" ${s.oppositeHighlightEnabled ? '' : 'disabled'}>
+        </div>
+        <div class="viz-coverage-row slider-group viz-fx-slider" data-requires="opposite">
+          <div class="slider-header">
+            <label for="viz-opposite-coverage"><span class="field-label-text">Conflict cover:</span>${infoTipMarkup(FIELD_INFO.oppositeCancel)}</label>
+            <span id="viz-opposite-coverage-val" class="slider-val">${s.oppositeCancelCoverage}%</span>
+          </div>
+          <input type="range" id="viz-opposite-coverage" min="${CONFLICT_COVER_MIN}" max="${CONFLICT_COVER_MAX}" step="1" value="${s.oppositeCancelCoverage}" ${s.oppositeHighlightEnabled ? '' : 'disabled'}>
+        </div>
       </div>
-      <input type="range" id="viz-zero-coverage-slider" min="${ZERO_COVERAGE_MIN}" max="${ZERO_COVERAGE_MAX}" step="1" value="${s.zeroCoverage}" title="How much of ± range stays at the zero color before blending to +1/−1">
     </div>
 
     <div class="viz-labels-row">
@@ -193,10 +253,36 @@ export function syncVisualizationControlsFromConfig(container, config) {
     if (swatch) swatch.value = hex;
     if (text) text.value = hex;
   }
+  const zeroOn = container.querySelector('#viz-zero-coverage-enabled');
+  if (zeroOn) zeroOn.checked = s.zeroCoverageEnabled;
   const covInput = container.querySelector('#viz-zero-coverage-slider');
   const covLabel = container.querySelector('#viz-zero-coverage-val');
-  if (covInput) covInput.value = String(s.zeroCoverage);
-  if (covLabel) covLabel.textContent = `${s.zeroCoverage}%`;
+  if (covInput) covInput.value = String(highCoverageToSlider(s.zeroCoverage));
+  if (covLabel) covLabel.textContent = formatHighCoverage(s.zeroCoverage);
+
+  const sameOn = container.querySelector('#viz-same-sign-enabled');
+  if (sameOn) sameOn.checked = s.sameSignCancelEnabled;
+  const sameCov = container.querySelector('#viz-same-sign-coverage');
+  const sameCovVal = container.querySelector('#viz-same-sign-coverage-val');
+  if (sameCov) sameCov.value = String(highCoverageToSlider(s.sameSignCancelCoverage));
+  if (sameCovVal) sameCovVal.textContent = formatHighCoverage(s.sameSignCancelCoverage);
+
+  const oppOn = container.querySelector('#viz-opposite-enabled');
+  if (oppOn) oppOn.checked = s.oppositeHighlightEnabled;
+  const oppSwatch = container.querySelector('#viz-opposite-swatch');
+  const oppHex = container.querySelector('#viz-opposite-hex');
+  if (oppSwatch) oppSwatch.value = s.oppositeHighlightColor;
+  if (oppHex) oppHex.value = s.oppositeHighlightColor;
+  const oppStr = container.querySelector('#viz-opposite-strength');
+  const oppStrVal = container.querySelector('#viz-opposite-strength-val');
+  if (oppStr) oppStr.value = String(s.oppositeHighlightStrength);
+  if (oppStrVal) oppStrVal.textContent = `${s.oppositeHighlightStrength}%`;
+  const oppCov = container.querySelector('#viz-opposite-coverage');
+  const oppCovVal = container.querySelector('#viz-opposite-coverage-val');
+  if (oppCov) oppCov.value = String(s.oppositeCancelCoverage);
+  if (oppCovVal) oppCovVal.textContent = `${s.oppositeCancelCoverage}%`;
+
+  syncGroupFxSliderEnabled(container, s);
 
   const labelsBtn = container.querySelector('#viz-labels-toggle');
   if (labelsBtn) {
@@ -205,6 +291,66 @@ export function syncVisualizationControlsFromConfig(container, config) {
   }
 }
 
+/**
+ * Enable/disable dependent sliders when parent toggles change (and when groups gate is off).
+ * @param {HTMLElement} container
+ * @param {import('./visualizationControlsDefaults.js').VisualizationSettings} settings
+ */
+export function syncGroupFxSliderEnabled(container, settings) {
+  if (!container) return;
+  const section = container.querySelector('#viz-group-contrast');
+  const groupsOk = section ? !section.classList.contains('is-disabled') : false;
+  const s = resolveVisualizationSettings(settings);
+
+  const setDisabled = (el, disabled) => {
+    if (!el) return;
+    el.disabled = disabled;
+  };
+
+  setDisabled(container.querySelector('#viz-zero-coverage-enabled'), false);
+  const zeroSlidersOn = s.zeroCoverageEnabled;
+  setDisabled(container.querySelector('#viz-zero-coverage-slider'), !zeroSlidersOn);
+  for (const row of container.querySelectorAll('.viz-fx-slider[data-requires="zero-coverage"]')) {
+    row.classList.toggle('is-inert', !zeroSlidersOn);
+  }
+
+  setDisabled(container.querySelector('#viz-same-sign-enabled'), !groupsOk);
+  setDisabled(container.querySelector('#viz-opposite-enabled'), !groupsOk);
+
+  const sameSlidersOn = groupsOk && s.sameSignCancelEnabled;
+  setDisabled(container.querySelector('#viz-same-sign-coverage'), !sameSlidersOn);
+
+  const oppSlidersOn = groupsOk && s.oppositeHighlightEnabled;
+  setDisabled(container.querySelector('#viz-opposite-swatch'), !oppSlidersOn);
+  setDisabled(container.querySelector('#viz-opposite-hex'), !oppSlidersOn);
+  setDisabled(container.querySelector('#viz-opposite-strength'), !oppSlidersOn);
+  setDisabled(container.querySelector('#viz-opposite-coverage'), !oppSlidersOn);
+
+  for (const row of container.querySelectorAll('.viz-fx-slider[data-requires="same-sign"]')) {
+    row.classList.toggle('is-inert', !sameSlidersOn);
+  }
+  for (const row of container.querySelectorAll('.viz-fx-slider[data-requires="opposite"]')) {
+    row.classList.toggle('is-inert', !oppSlidersOn);
+  }
+}
+
+/**
+ * Gate Group contrast controls: usable only with ≥2 compare groups.
+ * @param {HTMLElement|null|undefined} container
+ * @param {boolean} enabled
+ * @param {import('./visualizationControlsDefaults.js').VisualizationSettings} [config]
+ */
+export function setGroupContrastControlsEnabled(container, enabled, config = null) {
+  if (!container) return;
+  const section = container.querySelector('#viz-group-contrast');
+  if (!section) return;
+  const on = Boolean(enabled);
+  section.classList.toggle('is-disabled', !on);
+  section.setAttribute('aria-disabled', on ? 'false' : 'true');
+  const settings = config || resolveVisualizationSettings(null);
+  syncGroupFxSliderEnabled(container, settings);
+}
+
 /**
  * Apply collapsed visual state to the Visualization panel host.
  * @param {HTMLElement} container
@@ -308,16 +454,103 @@ export function wireVisualizationControls(container, config, onChangeCallback =
   bindColor('zero', 'colorZero');
   bindColor('negative', 'colorNegative');
 
+  const zeroOn = container.querySelector('#viz-zero-coverage-enabled');
+  if (zeroOn) {
+    zeroOn.addEventListener('change', () => {
+      config.zeroCoverageEnabled = Boolean(zeroOn.checked);
+      syncGroupFxSliderEnabled(container, config);
+      emit();
+    });
+  }
   const covInput = container.querySelector('#viz-zero-coverage-slider');
   const covLabel = container.querySelector('#viz-zero-coverage-val');
   if (covInput) {
     covInput.addEventListener('input', () => {
-      const next = normalizeZeroCoverage(covInput.value);
+      const next = highCoverageFromSlider(covInput.value);
       config.zeroCoverage = next;
-      if (covLabel) covLabel.textContent = `${next}%`;
+      if (covLabel) covLabel.textContent = formatHighCoverage(next);
+      emit();
+    });
+  }
+
+  const sameOn = container.querySelector('#viz-same-sign-enabled');
+  if (sameOn) {
+    sameOn.addEventListener('change', () => {
+      config.sameSignCancelEnabled = Boolean(sameOn.checked);
+      syncGroupFxSliderEnabled(container, config);
+      emit();
+    });
+  }
+  const sameCov = container.querySelector('#viz-same-sign-coverage');
+  const sameCovVal = container.querySelector('#viz-same-sign-coverage-val');
+  if (sameCov) {
+    sameCov.addEventListener('input', () => {
+      const next = highCoverageFromSlider(sameCov.value);
+      config.sameSignCancelCoverage = next;
+      if (sameCovVal) sameCovVal.textContent = formatHighCoverage(next);
+      emit();
+    });
+  }
+
+  const oppOn = container.querySelector('#viz-opposite-enabled');
+  if (oppOn) {
+    oppOn.addEventListener('change', () => {
+      config.oppositeHighlightEnabled = Boolean(oppOn.checked);
+      syncGroupFxSliderEnabled(container, config);
+      emit();
+    });
+  }
+  const oppSwatch = container.querySelector('#viz-opposite-swatch');
+  const oppHex = container.querySelector('#viz-opposite-hex');
+  if (oppSwatch && oppHex) {
+    oppSwatch.addEventListener('input', () => {
+      const hex = normalizeHex(oppSwatch.value);
+      if (!hex) return;
+      config.oppositeHighlightColor = hex;
+      oppHex.value = hex;
+      emit();
+    });
+    const commitOppHex = () => {
+      const hex = normalizeHex(oppHex.value);
+      if (!hex) {
+        oppHex.value = config.oppositeHighlightColor;
+        return;
+      }
+      config.oppositeHighlightColor = hex;
+      oppSwatch.value = hex;
+      oppHex.value = hex;
+      emit();
+    };
+    oppHex.addEventListener('change', commitOppHex);
+    oppHex.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        commitOppHex();
+      }
+    });
+  }
+  const oppStr = container.querySelector('#viz-opposite-strength');
+  const oppStrVal = container.querySelector('#viz-opposite-strength-val');
+  if (oppStr) {
+    oppStr.addEventListener('input', () => {
+      const next = normalizeHighlightStrength(oppStr.value);
+      config.oppositeHighlightStrength = next;
+      if (oppStrVal) oppStrVal.textContent = `${next}%`;
       emit();
     });
   }
+  const oppCov = container.querySelector('#viz-opposite-coverage');
+  const oppCovVal = container.querySelector('#viz-opposite-coverage-val');
+  if (oppCov) {
+    oppCov.addEventListener('input', () => {
+      const next = normalizeConflictCover(oppCov.value);
+      config.oppositeCancelCoverage = next;
+      if (oppCovVal) oppCovVal.textContent = `${next}%`;
+      emit();
+    });
+  }
+
+  syncGroupFxSliderEnabled(container, config);
 
   const labelsBtn = container.querySelector('#viz-labels-toggle');
   if (labelsBtn) {

src/ui/fieldInfo.js

@@ -31,8 +31,16 @@ export const FIELD_INFO = Object.freeze({
   colorPos: 'Color at +1.',
   colorZero: 'Color at 0.',
   colorNeg: 'Color at −1.',
-  zeroCoverage: '% held at zero.',
+  zeroCoverage: 'Hold range at zero.',
+  zeroCoverageAmount: '30%…99.9999% band.',
   labelsToggle: 'Floating names.',
+  groupContrast: 'Groups only (G1↔G2).',
+  sameSignCancel: 'Blacken same-sign dims.',
+  sameSignCoverage: '30%…99.9999% sim.',
+  oppositeHighlight: 'Mark opposite signs.',
+  oppositeColor: 'Conflict color.',
+  oppositeStrength: 'Highlight × |Δ|.',
+  oppositeCancel: 'Fade conflicts black.',
 });
 
 /**

src/ui/hoverTelemetry.js

@@ -36,8 +36,11 @@ export function resolveHoverTelemetry(data) {
     const actIdx = resolveActivationIndex(data, ud);
     if (actIdx != null && actIdx >= 0 && actIdx < ud.activations.length) {
       activation = ud.activations[actIdx];
+      const sourceDim = Array.isArray(ud.sourceDims) && ud.sourceDims[actIdx] != null
+        ? Number(ud.sourceDims[actIdx])
+        : actIdx;
       meta = {
-        dim: actIdx,
+        dim: sourceDim,
         token: ud.token,
         type: ud.type,
         val: activation,

src/ui/visualizationControlsDefaults.js

@@ -10,8 +10,15 @@
  *   colorPositive: string,
  *   colorZero: string,
  *   colorNegative: string,
+ *   zeroCoverageEnabled: boolean,
  *   zeroCoverage: number,
  *   labelsVisible: boolean,
+ *   sameSignCancelEnabled: boolean,
+ *   sameSignCancelCoverage: number,
+ *   oppositeHighlightEnabled: boolean,
+ *   oppositeHighlightColor: string,
+ *   oppositeHighlightStrength: number,
+ *   oppositeCancelCoverage: number,
  * }} VisualizationSettings */
 
 export const VIZ_STORAGE_PREFIX = 'vl3d.viz.';
@@ -21,8 +28,15 @@ export const VIZ_STORAGE_KEYS = Object.freeze({
   colorPositive: `${VIZ_STORAGE_PREFIX}colorPositive`,
   colorZero: `${VIZ_STORAGE_PREFIX}colorZero`,
   colorNegative: `${VIZ_STORAGE_PREFIX}colorNegative`,
+  zeroCoverageEnabled: `${VIZ_STORAGE_PREFIX}zeroCoverageEnabled`,
   zeroCoverage: `${VIZ_STORAGE_PREFIX}zeroCoverage`,
   labelsVisible: `${VIZ_STORAGE_PREFIX}labelsVisible`,
+  sameSignCancelEnabled: `${VIZ_STORAGE_PREFIX}sameSignCancelEnabled`,
+  sameSignCancelCoverage: `${VIZ_STORAGE_PREFIX}sameSignCancelCoverage`,
+  oppositeHighlightEnabled: `${VIZ_STORAGE_PREFIX}oppositeHighlightEnabled`,
+  oppositeHighlightColor: `${VIZ_STORAGE_PREFIX}oppositeHighlightColor`,
+  oppositeHighlightStrength: `${VIZ_STORAGE_PREFIX}oppositeHighlightStrength`,
+  oppositeCancelCoverage: `${VIZ_STORAGE_PREFIX}oppositeCancelCoverage`,
 });
 
 /** Default anchors match former ramp endpoints (§0.2). */
@@ -32,25 +46,54 @@ export const DEFAULT_VIZ_COLORS = Object.freeze({
   colorNegative: '#9900E6',
 });
 
-export const DEFAULT_VIZ_FILTER = /** @type {VizFilterMode} */ ('all');
+/** Default highlight for opposite-sign dims (cyan). */
+export const DEFAULT_OPPOSITE_HIGHLIGHT_COLOR = '#00E5FF';
 
-/** Zero-color coverage % of |t| before lerp toward ±1 (0 = linear). */
-export const DEFAULT_ZERO_COVERAGE = 0;
+export const DEFAULT_VIZ_FILTER = /** @type {VizFilterMode} */ ('all');
 
 /** Thread / group floating labels visible by default. */
 export const DEFAULT_LABELS_VISIBLE = true;
 
-export const ZERO_COVERAGE_MIN = 0;
-export const ZERO_COVERAGE_MAX = 90;
+/**
+ * Zero coverage + Shared noise similarity: 30% … 99.9999%.
+ * Slider uses 0…10000 positions for usable fine control near the top.
+ */
+export const HIGH_COVERAGE_MIN = 30;
+export const HIGH_COVERAGE_MAX = 99.9999;
+export const HIGH_COVERAGE_SLIDER_MAX = 10000;
+export const DEFAULT_HIGH_COVERAGE = HIGH_COVERAGE_MIN;
+export const COVERAGE_UNIT_MAX = HIGH_COVERAGE_MAX / 100;
+
+/** Conflict cover only: 0–90% linear. */
+export const CONFLICT_COVER_MIN = 0;
+export const CONFLICT_COVER_MAX = 90;
+export const DEFAULT_CONFLICT_COVER = 0;
+
+/** @deprecated Use CONFLICT_COVER_* or HIGH_COVERAGE_* */
+export const ZERO_COVERAGE_MIN = CONFLICT_COVER_MIN;
+/** @deprecated */
+export const ZERO_COVERAGE_MAX = CONFLICT_COVER_MAX;
+/** @deprecated */
+export const DEFAULT_ZERO_COVERAGE = DEFAULT_HIGH_COVERAGE;
+
+export const HIGHLIGHT_STRENGTH_MIN = 0;
+export const HIGHLIGHT_STRENGTH_MAX = 100;
+export const DEFAULT_OPPOSITE_HIGHLIGHT_STRENGTH = 70;
 
 /** @type {VisualizationSettings} */
 export const DEFAULT_VISUALIZATION_SETTINGS = Object.freeze({
   vizFilterMode: DEFAULT_VIZ_FILTER,
   ...DEFAULT_VIZ_COLORS,
-  zeroCoverage: DEFAULT_ZERO_COVERAGE,
+  zeroCoverageEnabled: false,
+  zeroCoverage: DEFAULT_HIGH_COVERAGE,
   labelsVisible: DEFAULT_LABELS_VISIBLE,
+  sameSignCancelEnabled: false,
+  sameSignCancelCoverage: DEFAULT_HIGH_COVERAGE,
+  oppositeHighlightEnabled: false,
+  oppositeHighlightColor: DEFAULT_OPPOSITE_HIGHLIGHT_COLOR,
+  oppositeHighlightStrength: DEFAULT_OPPOSITE_HIGHLIGHT_STRENGTH,
+  oppositeCancelCoverage: DEFAULT_CONFLICT_COVER,
 });
-
 const HEX_RE = /^#([0-9A-Fa-f]{6})$/;
 
 /**
@@ -111,23 +154,136 @@ export function normalizeLabelsVisible(value) {
 }
 
 /**
- * Clamp zero-coverage percent to [0, 90]. Invalid → default.
+ * @param {unknown} value
+ * @param {boolean} [fallback=false]
+ * @returns {boolean}
+ */
+export function normalizeBoolFlag(value, fallback = false) {
+  if (value === false || value === 'false' || value === '0') return false;
+  if (value === true || value === 'true' || value === '1') return true;
+  if (value == null || value === '') return fallback;
+  return fallback;
+}
+
+/**
+ * Clamp highlight strength % to [0, 100].
+ * @param {unknown} value
+ * @returns {number}
+ */
+export function normalizeHighlightStrength(value) {
+  const n = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(n)) return DEFAULT_OPPOSITE_HIGHLIGHT_STRENGTH;
+  return Math.max(HIGHLIGHT_STRENGTH_MIN, Math.min(HIGHLIGHT_STRENGTH_MAX, Math.round(n)));
+}
+
+/**
+ * Clamp conflict-cover percent to [0, 90]. Invalid → default.
+ * @param {unknown} value
+ * @returns {number}
+ */
+export function normalizeConflictCover(value) {
+  const n = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(n)) return DEFAULT_CONFLICT_COVER;
+  return Math.max(CONFLICT_COVER_MIN, Math.min(CONFLICT_COVER_MAX, Math.round(n)));
+}
+
+/**
+ * @deprecated Prefer normalizeConflictCover or normalizeHighCoverage
  * @param {unknown} value
  * @returns {number}
  */
 export function normalizeZeroCoverage(value) {
+  return normalizeConflictCover(value);
+}
+
+/**
+ * Clamp Zero coverage / Shared noise percent to [30, 99.9999].
+ * @param {unknown} value
+ * @returns {number}
+ */
+export function normalizeHighCoverage(value) {
   const n = typeof value === 'number' ? value : Number(value);
-  if (!Number.isFinite(n)) return DEFAULT_ZERO_COVERAGE;
-  return Math.max(ZERO_COVERAGE_MIN, Math.min(ZERO_COVERAGE_MAX, Math.round(n)));
+  if (!Number.isFinite(n)) return DEFAULT_HIGH_COVERAGE;
+  const clamped = Math.max(HIGH_COVERAGE_MIN, Math.min(HIGH_COVERAGE_MAX, n));
+  // Keep up to 4 decimal places (matches 99.9999)
+  return Math.round(clamped * 10000) / 10000;
+}
+
+/**
+ * Linear map slider position 0…10000 → high coverage %.
+ * @param {unknown} pos
+ * @returns {number}
+ */
+export function highCoverageFromSlider(pos) {
+  const p = typeof pos === 'number' ? pos : Number(pos);
+  if (!Number.isFinite(p)) return DEFAULT_HIGH_COVERAGE;
+  const t = Math.max(0, Math.min(1, p / HIGH_COVERAGE_SLIDER_MAX));
+  return normalizeHighCoverage(
+    HIGH_COVERAGE_MIN + t * (HIGH_COVERAGE_MAX - HIGH_COVERAGE_MIN)
+  );
+}
+
+/**
+ * Inverse: high coverage % → slider position 0…10000.
+ * @param {unknown} percent
+ * @returns {number}
+ */
+export function highCoverageToSlider(percent) {
+  const v = normalizeHighCoverage(percent);
+  const t = (v - HIGH_COVERAGE_MIN) / (HIGH_COVERAGE_MAX - HIGH_COVERAGE_MIN);
+  return Math.round(Math.max(0, Math.min(1, t)) * HIGH_COVERAGE_SLIDER_MAX);
+}
+
+/**
+ * Display label for high coverage (trim trailing zeros, up to 4 decimals).
+ * @param {unknown} percent
+ * @returns {string}
+ */
+export function formatHighCoverage(percent) {
+  const v = normalizeHighCoverage(percent);
+  const rounded = Math.round(v * 10000) / 10000;
+  if (Math.abs(rounded - Math.round(rounded)) < 1e-9) {
+    return `${Math.round(rounded)}%`;
+  }
+  return `${parseFloat(rounded.toFixed(4))}%`;
+}
+
+/**
+ * Coverage % → unit fraction for ramp remapping (supports up to ~0.999999).
+ * @param {number} percent
+ * @returns {number}
+ */
+export function coveragePercentToUnit(percent) {
+  const n = typeof percent === 'number' ? percent : Number(percent);
+  if (!Number.isFinite(n) || n <= 0) return 0;
+  return Math.max(0, Math.min(COVERAGE_UNIT_MAX, n / 100));
 }
 
 /**
- * Coverage % → unit fraction in [0, 0.9] for ramp remapping.
  * @param {number} percent
  * @returns {number}
  */
 export function zeroCoverageToUnit(percent) {
-  return normalizeZeroCoverage(percent) / 100;
+  return coveragePercentToUnit(percent);
+}
+
+/**
+ * High coverage unit for Zero coverage / Shared noise.
+ * @param {number} percent
+ * @returns {number}
+ */
+export function highCoverageToUnit(percent) {
+  return coveragePercentToUnit(normalizeHighCoverage(percent));
+}
+
+/**
+ * Effective Zero coverage % (0 when toggle Off).
+ * @param {{ zeroCoverageEnabled?: boolean, zeroCoverage?: number }|null|undefined} settings
+ * @returns {number}
+ */
+export function effectiveZeroCoveragePercent(settings) {
+  if (!settings || !settings.zeroCoverageEnabled) return 0;
+  return normalizeHighCoverage(settings.zeroCoverage);
 }
 
 /**
@@ -135,15 +291,15 @@ export function zeroCoverageToUnit(percent) {
  * coverage=0 → identity; coverage=0.5 → |t|≤0.5 stays zero, then stretches 0.5→1 onto 0→1.
  *
  * @param {number} absT - Absolute normalized activation in [0, 1]
- * @param {number} coverage01 - Fraction in [0, 0.9]
+ * @param {number} coverage01 - Fraction in [0, COVERAGE_UNIT_MAX]
  * @returns {number} Blend factor in [0, 1]
  */
 export function remapAbsTWithZeroCoverage(absT, coverage01 = 0) {
   const a = Math.max(0, Math.min(1, absT));
-  const c = Math.max(0, Math.min(0.9, coverage01));
-  if (c <= 1e-9) return a;
+  const c = Math.max(0, Math.min(COVERAGE_UNIT_MAX, coverage01));
+  if (c <= 1e-12) return a;
   if (a <= c) return 0;
-  return (a - c) / (1 - c);
+  return (a - c) / Math.max(1 - c, 1e-12);
 }
 
 /**
@@ -157,19 +313,47 @@ export function resolveVisualizationSettings(partial = null) {
     colorPositive: normalizeHex(src.colorPositive) || DEFAULT_VIZ_COLORS.colorPositive,
     colorZero: normalizeHex(src.colorZero) || DEFAULT_VIZ_COLORS.colorZero,
     colorNegative: normalizeHex(src.colorNegative) || DEFAULT_VIZ_COLORS.colorNegative,
-    zeroCoverage: normalizeZeroCoverage(
+    zeroCoverageEnabled: normalizeBoolFlag(
+      src.zeroCoverageEnabled,
+      DEFAULT_VISUALIZATION_SETTINGS.zeroCoverageEnabled
+    ),
+    zeroCoverage: normalizeHighCoverage(
       src.zeroCoverage !== undefined && src.zeroCoverage !== null
         ? src.zeroCoverage
-        : DEFAULT_ZERO_COVERAGE
+        : DEFAULT_HIGH_COVERAGE
     ),
     labelsVisible: normalizeLabelsVisible(
       src.labelsVisible !== undefined && src.labelsVisible !== null
         ? src.labelsVisible
         : DEFAULT_LABELS_VISIBLE
     ),
+    sameSignCancelEnabled: normalizeBoolFlag(
+      src.sameSignCancelEnabled,
+      DEFAULT_VISUALIZATION_SETTINGS.sameSignCancelEnabled
+    ),
+    sameSignCancelCoverage: normalizeHighCoverage(
+      src.sameSignCancelCoverage !== undefined && src.sameSignCancelCoverage !== null
+        ? src.sameSignCancelCoverage
+        : DEFAULT_HIGH_COVERAGE
+    ),
+    oppositeHighlightEnabled: normalizeBoolFlag(
+      src.oppositeHighlightEnabled,
+      DEFAULT_VISUALIZATION_SETTINGS.oppositeHighlightEnabled
+    ),
+    oppositeHighlightColor:
+      normalizeHex(src.oppositeHighlightColor) || DEFAULT_OPPOSITE_HIGHLIGHT_COLOR,
+    oppositeHighlightStrength: normalizeHighlightStrength(
+      src.oppositeHighlightStrength !== undefined && src.oppositeHighlightStrength !== null
+        ? src.oppositeHighlightStrength
+        : DEFAULT_OPPOSITE_HIGHLIGHT_STRENGTH
+    ),
+    oppositeCancelCoverage: normalizeConflictCover(
+      src.oppositeCancelCoverage !== undefined && src.oppositeCancelCoverage !== null
+        ? src.oppositeCancelCoverage
+        : DEFAULT_CONFLICT_COVER
+    ),
   };
 }
-
 /**
  * @param {Storage|null|undefined} storage
  * @returns {VisualizationSettings}
@@ -182,14 +366,20 @@ export function loadVisualizationSettings(storage = typeof localStorage !== 'und
       colorPositive: storage.getItem(VIZ_STORAGE_KEYS.colorPositive),
       colorZero: storage.getItem(VIZ_STORAGE_KEYS.colorZero),
       colorNegative: storage.getItem(VIZ_STORAGE_KEYS.colorNegative),
+      zeroCoverageEnabled: storage.getItem(VIZ_STORAGE_KEYS.zeroCoverageEnabled),
       zeroCoverage: storage.getItem(VIZ_STORAGE_KEYS.zeroCoverage),
       labelsVisible: storage.getItem(VIZ_STORAGE_KEYS.labelsVisible),
+      sameSignCancelEnabled: storage.getItem(VIZ_STORAGE_KEYS.sameSignCancelEnabled),
+      sameSignCancelCoverage: storage.getItem(VIZ_STORAGE_KEYS.sameSignCancelCoverage),
+      oppositeHighlightEnabled: storage.getItem(VIZ_STORAGE_KEYS.oppositeHighlightEnabled),
+      oppositeHighlightColor: storage.getItem(VIZ_STORAGE_KEYS.oppositeHighlightColor),
+      oppositeHighlightStrength: storage.getItem(VIZ_STORAGE_KEYS.oppositeHighlightStrength),
+      oppositeCancelCoverage: storage.getItem(VIZ_STORAGE_KEYS.oppositeCancelCoverage),
     });
   } catch {
     return { ...DEFAULT_VISUALIZATION_SETTINGS };
   }
 }
-
 /**
  * @param {VisualizationSettings} settings
  * @param {Storage|null|undefined} storage
@@ -202,8 +392,15 @@ export function saveVisualizationSettings(settings, storage = typeof localStorag
     storage.setItem(VIZ_STORAGE_KEYS.colorPositive, resolved.colorPositive);
     storage.setItem(VIZ_STORAGE_KEYS.colorZero, resolved.colorZero);
     storage.setItem(VIZ_STORAGE_KEYS.colorNegative, resolved.colorNegative);
+    storage.setItem(VIZ_STORAGE_KEYS.zeroCoverageEnabled, String(resolved.zeroCoverageEnabled));
     storage.setItem(VIZ_STORAGE_KEYS.zeroCoverage, String(resolved.zeroCoverage));
     storage.setItem(VIZ_STORAGE_KEYS.labelsVisible, String(resolved.labelsVisible));
+    storage.setItem(VIZ_STORAGE_KEYS.sameSignCancelEnabled, String(resolved.sameSignCancelEnabled));
+    storage.setItem(VIZ_STORAGE_KEYS.sameSignCancelCoverage, String(resolved.sameSignCancelCoverage));
+    storage.setItem(VIZ_STORAGE_KEYS.oppositeHighlightEnabled, String(resolved.oppositeHighlightEnabled));
+    storage.setItem(VIZ_STORAGE_KEYS.oppositeHighlightColor, resolved.oppositeHighlightColor);
+    storage.setItem(VIZ_STORAGE_KEYS.oppositeHighlightStrength, String(resolved.oppositeHighlightStrength));
+    storage.setItem(VIZ_STORAGE_KEYS.oppositeCancelCoverage, String(resolved.oppositeCancelCoverage));
   } catch {
     // Quota / private mode — ignore
   }

src/v25/canvasHost.js

@@ -56,7 +56,7 @@ export function resolveCanvasSize(el) {
 /**
  * Map Interaction hover payload → footer HUD strings (minimal telemetry).
  * @param {object|null|undefined} hoverData
- * @returns {{ coords: string, segment: string, activation: string, token: string }}
+ * @returns {{ coords: string, segment: string, dim: string, activation: string, token: string }}
  */
 export function formatHoverForFooter(hoverData) {
   const t = resolveHoverTelemetry(hoverData);
@@ -64,14 +64,17 @@ export function formatHoverForFooter(hoverData) {
     return {
       coords: 'X: -- | Y: -- | Z: --',
       segment: 'NEUTRAL SPACE',
+      dim: 'DIM: --',
       activation: 'ACTIVATION: --',
       token: 'NONE',
     };
   }
   const pos = t.point || { x: 0, y: 0, z: 0 };
+  const dimLabel = t.dim != null && Number.isFinite(t.dim) ? `DIM: ${Math.trunc(t.dim)}` : 'DIM: --';
   return {
     coords: `X: ${Math.round(pos.x)} | Y: ${Math.round(pos.y)} | Z: ${Math.round(pos.z)}`,
     segment: t.type,
+    dim: dimLabel,
     activation: `ACTIVATION: ${formatActivationValue(t.activation, { maxChars: 16 })}`,
     token: t.token,
   };

src/v25/main.js

@@ -53,6 +53,7 @@ if (app) {
       footer.setCoords(payload.coords);
       footer.setTelemetry({
         segment: payload.segment,
+        dim: payload.dim,
         activation: payload.activation,
         token: payload.token,
       });

src/v25/ui/footerHud.js

@@ -5,6 +5,7 @@
 export const HUD_PLACEHOLDERS = Object.freeze({
   coords: 'X: 0 | Y: 0 | Z: 0',
   segment: 'RESULT VECTOR',
+  dim: 'DIM: --',
   activation: 'ACTIVATION: --',
   token: '--',
 });
@@ -19,6 +20,7 @@ export function footerHudMarkup() {
       <div class="lab-hud__block lab-hud__block--center">
         <span class="lab-hud__label">HOVER TELEMETRY</span>
         <span id="lab-hud-segment" class="lab-hud__badge">${HUD_PLACEHOLDERS.segment}</span>
+        <span id="lab-hud-dim" class="lab-hud__val lab-mono">${HUD_PLACEHOLDERS.dim}</span>
         <span id="lab-hud-activation" class="lab-hud__val lab-mono">${HUD_PLACEHOLDERS.activation}</span>
       </div>
       <div class="lab-hud__block">
@@ -40,11 +42,13 @@ export function mountFooterHud(container) {
       const el = container.querySelector('#lab-hud-coords');
       if (el) el.textContent = text;
     },
-    setTelemetry({ segment, activation, token } = {}) {
+    setTelemetry({ segment, dim, activation, token } = {}) {
       const seg = container.querySelector('#lab-hud-segment');
+      const dimEl = container.querySelector('#lab-hud-dim');
       const act = container.querySelector('#lab-hud-activation');
       const tok = container.querySelector('#lab-hud-token');
       if (seg && segment != null) seg.textContent = segment;
+      if (dimEl && dim != null) dimEl.textContent = dim;
       if (act && activation != null) act.textContent = activation;
       if (tok && token != null) tok.textContent = token;
     },

src/visualizer/DivergentShading.js

@@ -132,11 +132,17 @@ export function getDivergentColor(val, absMax = 1.0, anchors = null, zeroCoverag
  */
 export const divergentVertexShader = `
 attribute float intensity;
+attribute float aCancel;
+attribute float aHighlight;
 varying float vIntensity;
+varying float vCancel;
+varying float vHighlight;
 uniform float pointSize;
 
 void main() {
     vIntensity = intensity;
+    vCancel = aCancel;
+    vHighlight = aHighlight;
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
     float dist = length(mvPosition.xyz);
     gl_PointSize = clamp(pointSize * (300.0 / max(dist, 0.01)), 4.0, 80.0);
@@ -148,13 +154,17 @@ void main() {
  * GLSL Fragment Shader: three color anchors via uniforms + optional sign filter.
  * Filter modes: 0=all, 1=positive only, 2=negative only (ε = uNearZeroEps).
  * uZeroCoverage: fraction of |t| held at zero color before lerp to ±1.
+ * aCancel / aHighlight: group-dim paint (shared-noise cancel + opposite highlight).
  */
 export const divergentFragmentShader = `
 varying float vIntensity;
+varying float vCancel;
+varying float vHighlight;
 uniform float baseOpacity;
 uniform vec3 uColorPos;
 uniform vec3 uColorNeg;
 uniform vec3 uColorZero;
+uniform vec3 uColorHighlight;
 uniform int uFilterMode;
 uniform float uNearZeroEps;
 uniform float uZeroCoverage;
@@ -182,10 +192,10 @@ void main() {
         return;
     }
 
-    float c = clamp(uZeroCoverage, 0.0, 0.9);
+    float c = clamp(uZeroCoverage, 0.0, 0.999999);
     float k = absT;
-    if (c > 1e-5) {
-        k = absT <= c ? 0.0 : (absT - c) / max(1.0 - c, 1e-5);
+    if (c > 1e-8) {
+        k = absT <= c ? 0.0 : (absT - c) / max(1.0 - c, 1e-8);
     }
 
     float dynamicAlpha = clamp(pow(max(k, absT * 0.15), 1.1), 0.05, 1.0) * baseOpacity;
@@ -194,6 +204,12 @@ void main() {
         ? mix(uColorZero, uColorPos, k)
         : mix(uColorZero, uColorNeg, k);
 
+    float hi = clamp(vHighlight, 0.0, 1.0);
+    float cancel = clamp(vCancel, 0.0, 1.0);
+    color = mix(color, uColorHighlight, hi);
+    color = mix(color, uColorZero, cancel);
+    dynamicAlpha = max(0.05, dynamicAlpha * (1.0 - 0.85 * cancel));
+
     vec3 finalColor = color * solidEdge;
     float alpha = dynamicAlpha * solidEdge;
 
@@ -221,12 +237,21 @@ export function filterModeToUniform(mode) {
  *   anchors?: object,
  *   filterMode?: 'all'|'positive'|'negative',
  *   zeroCoverage?: number,
+ *   highlightColor?: {r:number,g:number,b:number}|string,
  * }} [options]
  * @returns {THREE.ShaderMaterial}
  */
 export function createDivergentMaterial(pointSize = 10.0, baseOpacity = 0.7, options = {}) {
   const A = resolveColorAnchors(options.anchors ?? null);
   const coverage01 = resolveZeroCoverage01(options.anchors, options.zeroCoverage);
+  let hi = { r: 0, g: 229 / 255, b: 1 };
+  if (options.highlightColor) {
+    if (typeof options.highlightColor === 'string') {
+      hi = hexToRgb01(options.highlightColor) || hi;
+    } else if (options.highlightColor.r != null) {
+      hi = options.highlightColor;
+    }
+  }
   return new THREE.ShaderMaterial({
     uniforms: {
       pointSize: { value: pointSize },
@@ -234,6 +259,7 @@ export function createDivergentMaterial(pointSize = 10.0, baseOpacity = 0.7, opt
       uColorPos: { value: new THREE.Vector3(A.positive.r, A.positive.g, A.positive.b) },
       uColorNeg: { value: new THREE.Vector3(A.negative.r, A.negative.g, A.negative.b) },
       uColorZero: { value: new THREE.Vector3(A.zero.r, A.zero.g, A.zero.b) },
+      uColorHighlight: { value: new THREE.Vector3(hi.r, hi.g, hi.b) },
       uFilterMode: { value: filterModeToUniform(options.filterMode) },
       uNearZeroEps: { value: NEAR_ZERO_EPS },
       uZeroCoverage: { value: coverage01 },
@@ -249,7 +275,7 @@ export function createDivergentMaterial(pointSize = 10.0, baseOpacity = 0.7, opt
 /**
  * Update live color/filter uniforms without rebuilding the shader string.
  * @param {THREE.ShaderMaterial} material
- * @param {{ anchors?: object, filterMode?: string, zeroCoverage?: number }} options
+ * @param {{ anchors?: object, filterMode?: string, zeroCoverage?: number, highlightColor?: object|string }} options
  */
 export function updateDivergentMaterialUniforms(material, options = {}) {
   if (!material?.uniforms) return;
@@ -265,6 +291,11 @@ export function updateDivergentMaterialUniforms(material, options = {}) {
   if (options.zeroCoverage !== undefined || (options.anchors && options.anchors.zeroCoverage !== undefined)) {
     material.uniforms.uZeroCoverage.value = resolveZeroCoverage01(options.anchors, options.zeroCoverage);
   }
+  if (options.highlightColor && material.uniforms.uColorHighlight) {
+    let hi = options.highlightColor;
+    if (typeof hi === 'string') hi = hexToRgb01(hi);
+    if (hi) material.uniforms.uColorHighlight.value.set(hi.r, hi.g, hi.b);
+  }
 }
 
 export { hexToRgb01, remapAbsTWithZeroCoverage };

src/visualizer/Instancer.js

@@ -9,6 +9,10 @@ import {
   computeDimContrastPermutation,
   hasEnoughGroupsForDimSort,
 } from './dimContrastSort.js';
+import {
+  computeDimRelationMetrics,
+  hasGroupsForDimContrast,
+} from './groupDimContrast.js';
 
 /**
  * Instancer Manager for rendering vector points, ribbons, and highlights in the Three.js scene.
@@ -273,6 +277,13 @@ export class Instancer {
     const { slots: ySlots, span: ySlotSpan } = computeGroupAwareYSlots(items, { gapSlots: 1 });
     const dimSortOn = options.dimSortByContrast === true && hasEnoughGroupsForDimSort(items);
     const dimPerm = dimSortOn ? computeDimContrastPermutation(items) : null;
+    const groupDimMetrics = hasGroupsForDimContrast(items)
+      ? computeDimRelationMetrics(items)
+      : null;
+    const sourceDimsForVec = (len) => {
+      if (dimPerm && dimPerm.length === len) return dimPerm.slice();
+      return Array.from({ length: len }, (_, i) => i);
+    };
 
     const pointsData = [];
     const threadLabelItems = [];
@@ -286,6 +297,7 @@ export class Instancer {
       if (!rawVec || !rawVec.length) return;
 
       const vec = dimPerm ? applyDimPermutation(rawVec, dimPerm) : rawVec;
+      const sourceDims = sourceDimsForVec(vec.length);
       const threadId = item.id || `tok_${idx}`;
       const layoutOpts = { ySlot: ySlots[idx] ?? idx, ySlotSpan };
       const vec3D = this.layoutEngine.mapVectorTo3DPoints(
@@ -301,7 +313,7 @@ export class Instancer {
 
       vec3D.forEach((p, dimIdx) => {
         const val = vec[dimIdx];
-        const sourceDim = dimPerm ? dimPerm[dimIdx] : dimIdx;
+        const sourceDim = sourceDims[dimIdx];
         pointsData.push({
           position: p,
           activation: val,
@@ -313,7 +325,10 @@ export class Instancer {
 
       surfaceRows.push({ points: vec3D, activations });
 
-      const vizOpts = vizConfig ? { vizConfig } : {};
+      const vizOpts = {
+        ...(vizConfig ? { vizConfig } : {}),
+        ...(groupDimMetrics?.length ? { groupDimMetrics, sourceDims } : {}),
+      };
       let ribbonMesh = null;
       if (renderMode === "RIBBONS") {
         const ribbonWidth = Math.max(2.0, 14.0 * thicknessFactor);
@@ -328,6 +343,7 @@ export class Instancer {
         ribbonMesh.userData.threadId = threadId;
         ribbonMesh.userData.token = item.text;
         ribbonMesh.userData.type = 'compare';
+        ribbonMesh.userData.sourceDims = sourceDims;
         this.activeGroup.add(ribbonMesh);
       }
 
@@ -374,6 +390,7 @@ export class Instancer {
       pointsMesh = MeshFactory.createPointsMesh(pointsData, {
         pointSize: 15.0 * thicknessFactor,
         ...(vizConfig ? { vizConfig } : {}),
+        ...(groupDimMetrics?.length ? { groupDimMetrics } : {}),
       });
       pointsMesh.userData = { pointsData };
       this.activeGroup.add(pointsMesh);

src/visualizer/MeshFactory.js

@@ -1,7 +1,11 @@
 import * as THREE from 'three';
 import { createDivergentMaterial, getDivergentColor, calculateZScoreNormalized } from './DivergentShading.js';
-import { anchorsFromSettings, resolveVisualizationSettings } from '../ui/visualizationControlsDefaults.js';
+import { anchorsFromSettings, resolveVisualizationSettings, hexToRgb01, effectiveZeroCoveragePercent } from '../ui/visualizationControlsDefaults.js';
 import { lineSegmentIndices, wideRibbonQuadIndices } from './activationFilter.js';
+import {
+  applyGroupDimPaint,
+  buildPointGroupPaintAttributes,
+} from './groupDimContrast.js';
 
 /**
  * Resolve optional vizConfig from MeshFactory options into filter mode + RGB anchors.
@@ -14,11 +18,29 @@ function resolveVizOptions(options = {}) {
   return {
     filterMode: viz.vizFilterMode,
     anchors: anchorsFromSettings(viz),
-    zeroCoverage: viz.zeroCoverage,
+    zeroCoverage: effectiveZeroCoveragePercent(viz),
     viz,
+    groupDimMetrics: options.groupDimMetrics || null,
+    sourceDims: options.sourceDims || null,
   };
 }
 
+/**
+ * Paint one activation with divergent + optional group-dim contrast.
+ * @param {number} normVal
+ * @param {number|undefined} sourceDim
+ * @param {ReturnType<typeof resolveVizOptions>} resolved
+ */
+function colorForActivation(normVal, sourceDim, resolved) {
+  const base = getDivergentColor(normVal, 1.0, resolved.anchors, resolved.zeroCoverage);
+  const metrics = resolved.groupDimMetrics;
+  if (!metrics?.length || sourceDim == null) return base;
+  const metric = metrics[sourceDim];
+  const zero = resolved.anchors.zero;
+  const hi = hexToRgb01(resolved.viz.oppositeHighlightColor);
+  return applyGroupDimPaint(base, metric, resolved.viz, zero, hi);
+}
+
 /**
  * Factory for creating 3D Vector Point Cloud Geometries and Ribbon Lines using Divergent Activation Shading.
  */
@@ -32,7 +54,7 @@ export class MeshFactory {
     const geometry = new THREE.BufferGeometry();
     const positions = [];
     const rawActivations = [];
-    const { filterMode, anchors, zeroCoverage } = resolveVizOptions(options);
+    const { filterMode, anchors, zeroCoverage, viz, groupDimMetrics } = resolveVizOptions(options);
 
     pointsData.forEach((item) => {
       const pos = item.position;
@@ -41,15 +63,19 @@ export class MeshFactory {
     });
 
     const normIntensities = calculateZScoreNormalized(rawActivations, 0.85);
+    const { cancel, highlight } = buildPointGroupPaintAttributes(pointsData, groupDimMetrics, viz);
 
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
     geometry.setAttribute('intensity', new THREE.Float32BufferAttribute(normIntensities, 1));
+    geometry.setAttribute('aCancel', new THREE.Float32BufferAttribute(cancel, 1));
+    geometry.setAttribute('aHighlight', new THREE.Float32BufferAttribute(highlight, 1));
 
     const pointSize = options.pointSize || 14.0;
     const material = createDivergentMaterial(pointSize, 1.0, {
       anchors,
       filterMode,
       zeroCoverage,
+      highlightColor: viz.oppositeHighlightColor,
     });
 
     const pointsMesh = new THREE.Points(geometry, material);
@@ -66,7 +92,8 @@ export class MeshFactory {
    * Full vertex buffer retained for in-situ compare reorder position updates.
    */
   static createRibbonMesh(points, activations = null, options = {}) {
-    const { filterMode, anchors, zeroCoverage } = resolveVizOptions(options);
+    const resolved = resolveVizOptions(options);
+    const { filterMode, sourceDims } = resolved;
     const geometry = new THREE.BufferGeometry().setFromPoints(points);
 
     let normActivations = null;
@@ -74,7 +101,8 @@ export class MeshFactory {
       normActivations = calculateZScoreNormalized(activations, 0.85);
       const colors = new Float32Array(points.length * 3);
       for (let idx = 0; idx < normActivations.length; idx++) {
-        const col = getDivergentColor(normActivations[idx], 1.0, anchors, zeroCoverage);
+        const srcDim = sourceDims ? sourceDims[idx] : idx;
+        const col = colorForActivation(normActivations[idx], srcDim, resolved);
         colors[idx * 3 + 0] = col.r;
         colors[idx * 3 + 1] = col.g;
         colors[idx * 3 + 2] = col.b;
@@ -146,7 +174,8 @@ export class MeshFactory {
    */
   static createWideRibbonMesh(points, activations = null, options = {}) {
     if (!points || points.length < 2) return null;
-    const { filterMode, anchors, zeroCoverage } = resolveVizOptions(options);
+    const resolved = resolveVizOptions(options);
+    const { filterMode, sourceDims } = resolved;
     const width = options.width ?? 3.0;
     const half = width * 0.5;
     const n = points.length;
@@ -182,7 +211,8 @@ export class MeshFactory {
       positions[iR * 3 + 1] = p.y + side.y;
       positions[iR * 3 + 2] = p.z + side.z;
 
-      const col = getDivergentColor(norm[i], 1.0, anchors, zeroCoverage);
+      const srcDim = sourceDims ? sourceDims[i] : i;
+      const col = colorForActivation(norm[i], srcDim, resolved);
       for (const vi of [iL, iR]) {
         colors[vi * 3] = col.r;
         colors[vi * 3 + 1] = col.g;

src/visualizer/groupDimContrast.js

@@ -0,0 +1,270 @@
+/**
+ * Group-dim shared-noise cancel + opposite-sign highlight (paint only).
+ * Means from raw embeddings; cancel/highlight applied in color space after divergent shading.
+ * Active only when ≥2 groups (first two distinct groupIds = G1 vs G2).
+ */
+
+import { countDistinctGroups, listDistinctGroupIds } from './groupStackLayout.js';
+import { hexToRgb01, normalizeConflictCover, highCoverageToUnit } from '../ui/visualizationControlsDefaults.js';
+
+/**
+ * @typedef {{
+ *   meanA: number,
+ *   meanB: number,
+ *   sameSign: boolean,
+ *   similarity: number,
+ *   difference: number,
+ *   conflictBalance: number,
+ * }} DimRelationMetric
+ */
+
+/**
+ * @param {number} v
+ * @returns {number} Always ±1 (0 treated as +).
+ */
+export function signedUnit(v) {
+  return v >= 0 ? 1 : -1;
+}
+
+/**
+ * Shared-noise similarity: 1 − |a−b|/(|a|+|b|). Exact zeros → 1.
+ * @param {number} a
+ * @param {number} b
+ * @returns {number} [0, 1]
+ */
+export function sharedNoiseSimilarity(a, b) {
+  const aa = Math.abs(Number(a) || 0);
+  const bb = Math.abs(Number(b) || 0);
+  const den = aa + bb;
+  if (den <= 1e-12) return 1;
+  return Math.max(0, Math.min(1, 1 - Math.abs(a - b) / den));
+}
+
+/**
+ * Relative magnitude difference |a−b|/(|a|+|b|). Exact zeros → 0.
+ * Note: for opposite signs this is always ~1 — do not use for gradual cover.
+ * @param {number} a
+ * @param {number} b
+ * @returns {number} [0, 1]
+ */
+export function relativeDifference(a, b) {
+  const aa = Math.abs(Number(a) || 0);
+  const bb = Math.abs(Number(b) || 0);
+  const den = aa + bb;
+  if (den <= 1e-12) return 0;
+  return Math.max(0, Math.min(1, Math.abs(a - b) / den));
+}
+
+/**
+ * How balanced an opposite-sign pair is: 2·min(|a|,|b|)/(|a|+|b|).
+ * 1 = equal magnitude opposition; 0 = one side near zero.
+ * @param {number} a
+ * @param {number} b
+ * @returns {number} [0, 1]
+ */
+export function oppositeConflictBalance(a, b) {
+  const aa = Math.abs(Number(a) || 0);
+  const bb = Math.abs(Number(b) || 0);
+  const den = aa + bb;
+  if (den <= 1e-12) return 0;
+  return Math.max(0, Math.min(1, (2 * Math.min(aa, bb)) / den));
+}
+
+/**
+ * Linear cover toward black for opposite-sign dims (0–90% → 0–1).
+ * Avoids cancelAmountFromMetric(|Δ|) which is always 1 when signs differ.
+ * @param {number} coveragePercent - 0–90
+ * @returns {number} [0, 1]
+ */
+export function oppositeCoverCancel(coveragePercent) {
+  const c = normalizeConflictCover(coveragePercent) / 100;
+  if (c <= 1e-9) return 0;
+  return Math.max(0, Math.min(1, c / 0.9));
+}
+
+/**
+ * High-metric → black, Zero-coverage style.
+ * coverage=0 → never; coverage=0.5 → metric≤0.5 untouched, metric→1 fully cancelled.
+ *
+ * @param {number} metric01
+ * @param {number} coverage01 - [0, 0.9]
+ * @returns {number} cancel amount [0, 1]
+ */
+export function cancelAmountFromMetric(metric01, coverage01) {
+  const m = Math.max(0, Math.min(1, Number(metric01) || 0));
+  const c = Math.max(0, Math.min(0.999999, Number(coverage01) || 0));
+  if (c <= 1e-12) return 0;
+  const floor = 1 - c;
+  if (m <= floor) return 0;
+  return (m - floor) / Math.max(c, 1e-12);
+}
+
+/**
+ * @param {Array<{ groupId?: string, embedding?: number[] }|null|undefined>|null|undefined} items
+ * @returns {boolean}
+ */
+export function hasGroupsForDimContrast(items) {
+  return countDistinctGroups(items) >= 2;
+}
+
+/**
+ * Per-dim G1 vs G2 means (first two distinct groupIds in encounter order).
+ * @param {Array<{ groupId?: string, embedding?: number[] }|null|undefined>|null|undefined} items
+ * @returns {DimRelationMetric[]}
+ */
+export function computeDimRelationMetrics(items) {
+  const list = (items || []).filter(
+    (it) => it?.groupId && Array.isArray(it.embedding) && it.embedding.length
+  );
+  const groupIds = listDistinctGroupIds(list);
+  if (groupIds.length < 2) return [];
+
+  const idA = groupIds[0];
+  const idB = groupIds[1];
+  const dim = list[0].embedding.length;
+  if (!list.every((it) => it.embedding.length === dim)) return [];
+
+  const sumA = new Float64Array(dim);
+  const sumB = new Float64Array(dim);
+  let countA = 0;
+  let countB = 0;
+
+  for (const it of list) {
+    if (it.groupId === idA) {
+      for (let d = 0; d < dim; d++) sumA[d] += it.embedding[d];
+      countA += 1;
+    } else if (it.groupId === idB) {
+      for (let d = 0; d < dim; d++) sumB[d] += it.embedding[d];
+      countB += 1;
+    }
+  }
+  if (countA < 1 || countB < 1) return [];
+
+  /** @type {DimRelationMetric[]} */
+  const out = new Array(dim);
+  for (let d = 0; d < dim; d++) {
+    const meanA = sumA[d] / countA;
+    const meanB = sumB[d] / countB;
+    const sameSign = signedUnit(meanA) === signedUnit(meanB);
+    out[d] = {
+      meanA,
+      meanB,
+      sameSign,
+      similarity: sharedNoiseSimilarity(meanA, meanB),
+      difference: relativeDifference(meanA, meanB),
+      conflictBalance: oppositeConflictBalance(meanA, meanB),
+    };
+  }
+  return out;
+}
+
+/**
+ * Paint weights for one dim given resolved viz settings.
+ * @param {DimRelationMetric|null|undefined} metric
+ * @param {{
+ *   sameSignCancelEnabled?: boolean,
+ *   sameSignCancelCoverage?: number,
+ *   oppositeHighlightEnabled?: boolean,
+ *   oppositeHighlightStrength?: number,
+ *   oppositeCancelCoverage?: number,
+ * }} settings
+ * @returns {{ cancel: number, highlight: number }}
+ */
+export function paintWeightsForDim(metric, settings = {}) {
+  if (!metric) return { cancel: 0, highlight: 0 };
+
+  let cancel = 0;
+  let highlight = 0;
+
+  if (metric.sameSign && settings.sameSignCancelEnabled) {
+    const c = highCoverageToUnit(settings.sameSignCancelCoverage ?? 30);
+    cancel = Math.max(cancel, cancelAmountFromMetric(metric.similarity, c));
+  }
+
+  if (!metric.sameSign && settings.oppositeHighlightEnabled) {
+    const strength = Math.max(0, Math.min(100, Number(settings.oppositeHighlightStrength) || 0)) / 100;
+    const balance = metric.conflictBalance != null
+      ? metric.conflictBalance
+      : oppositeConflictBalance(metric.meanA, metric.meanB);
+    highlight = Math.max(0, Math.min(1, strength * balance));
+    cancel = Math.max(cancel, oppositeCoverCancel(settings.oppositeCancelCoverage ?? 0));
+  }
+
+  return { cancel, highlight };
+}
+
+/**
+ * @param {{ r: number, g: number, b: number, alpha?: number }} color
+ * @param {{ r: number, g: number, b: number }} target
+ * @param {number} k
+ */
+function lerpRgb(color, target, k) {
+  const t = Math.max(0, Math.min(1, k));
+  return {
+    r: color.r + (target.r - color.r) * t,
+    g: color.g + (target.g - color.g) * t,
+    b: color.b + (target.b - color.b) * t,
+    alpha: color.alpha,
+  };
+}
+
+/**
+ * Apply group-dim paint on top of a divergent CPU color (Y/geometry untouched).
+ *
+ * @param {{ r: number, g: number, b: number, alpha?: number }} baseColor
+ * @param {DimRelationMetric|null|undefined} metric
+ * @param {object} settings - VisualizationSettings-like
+ * @param {{ r: number, g: number, b: number }|null} [zeroRgb]
+ * @param {{ r: number, g: number, b: number }|null} [highlightRgb]
+ * @returns {{ r: number, g: number, b: number, alpha?: number }}
+ */
+export function applyGroupDimPaint(baseColor, metric, settings, zeroRgb = null, highlightRgb = null) {
+  const weights = paintWeightsForDim(metric, settings);
+  if (weights.cancel <= 1e-9 && weights.highlight <= 1e-9) {
+    return { ...baseColor };
+  }
+
+  const zero = zeroRgb || { r: 0, g: 0, b: 0 };
+  let out = { ...baseColor };
+
+  if (weights.highlight > 1e-9) {
+    const hi = highlightRgb
+      || hexToRgb01(settings?.oppositeHighlightColor)
+      || { r: 0, g: 229 / 255, b: 1 };
+    out = lerpRgb(out, hi, weights.highlight);
+  }
+  if (weights.cancel > 1e-9) {
+    out = lerpRgb(out, zero, weights.cancel);
+    if (typeof out.alpha === 'number') {
+      out.alpha = Math.max(0.05, out.alpha * (1 - 0.85 * weights.cancel));
+    }
+  }
+  return out;
+}
+
+/**
+ * Build parallel cancel/highlight attribute arrays for POINTS (length = points).
+ *
+ * @param {Array<{ meta?: { dim?: number } }>} pointsData
+ * @param {DimRelationMetric[]|null|undefined} metrics
+ * @param {object} settings
+ * @returns {{ cancel: Float32Array, highlight: Float32Array }}
+ */
+export function buildPointGroupPaintAttributes(pointsData, metrics, settings) {
+  const n = pointsData?.length || 0;
+  const cancel = new Float32Array(n);
+  const highlight = new Float32Array(n);
+  if (!n || !metrics?.length) return { cancel, highlight };
+
+  const groupFxOn = settings?.sameSignCancelEnabled || settings?.oppositeHighlightEnabled;
+  if (!groupFxOn) return { cancel, highlight };
+
+  for (let i = 0; i < n; i++) {
+    const dim = pointsData[i]?.meta?.dim;
+    const metric = typeof dim === 'number' ? metrics[dim] : null;
+    const w = paintWeightsForDim(metric, settings);
+    cancel[i] = w.cancel;
+    highlight[i] = w.highlight;
+  }
+  return { cancel, highlight };
+}

tests/HUD.test.js

@@ -101,15 +101,18 @@ describe('HUD activation telemetry', () => {
     Object.defineProperty(segment, 'offsetWidth', { get: () => 70 });
 
     const activation = document.createElement('span');
+    const dim = document.createElement('span');
     const coords = document.createElement('span');
     const token = document.createElement('span');
 
     center.appendChild(label);
     center.appendChild(segment);
+    center.appendChild(dim);
     center.appendChild(activation);
 
     hud.centerEl = center;
     hud.segmentEl = segment;
+    hud.dimEl = dim;
     hud.activationEl = activation;
     hud.coordsEl = coords;
     hud.tokenEl = token;
@@ -127,6 +130,7 @@ describe('HUD activation telemetry', () => {
 
     expect(activation.textContent).not.toMatch(/0\.0000$/);
     expect(activation.textContent).toMatch(/0\.0000421|4\.21e-/i);
+    expect(dim.textContent).toBe('DIM: 3');
     expect(token.textContent).toBe('alpha');
     expect(segment.textContent).toBe('COMPARE');
   });
@@ -134,6 +138,7 @@ describe('HUD activation telemetry', () => {
   it('clears to -- when hover leaves', () => {
     const hud = new HUD(root);
     hud.activationEl = document.createElement('span');
+    hud.dimEl = document.createElement('span');
     hud.coordsEl = document.createElement('span');
     hud.segmentEl = document.createElement('span');
     hud.tokenEl = document.createElement('span');
@@ -142,6 +147,7 @@ describe('HUD activation telemetry', () => {
 
     hud.updateTelemetry(null);
     expect(hud.activationEl.textContent).toBe('ACTIVATION: --');
+    expect(hud.dimEl.textContent).toBe('DIM: --');
     expect(hud.segmentEl.textContent).toBe('NEUTRAL SPACE');
   });
 });

tests/fieldInfo.test.js

@@ -14,7 +14,9 @@ describe('FIELD_INFO catalog', () => {
       'compareTokens', 'dimSort',
       'saeToggle', 'saeHidden', 'saeK', 'saeEpochs', 'saeLr', 'saeBatch',
       'spacingX', 'vectorDistY', 'amplitudeY', 'lengthZ', 'thickness',
-      'vizFilter', 'colorPos', 'colorZero', 'colorNeg', 'zeroCoverage', 'labelsToggle',
+      'vizFilter', 'colorPos', 'colorZero', 'colorNeg', 'zeroCoverage', 'zeroCoverageAmount', 'labelsToggle',
+      'groupContrast', 'sameSignCancel', 'sameSignCoverage',
+      'oppositeHighlight', 'oppositeColor', 'oppositeStrength', 'oppositeCancel',
     ];
     for (const key of required) {
       expect(FIELD_INFO[key], key).toBeTruthy();

tests/groupDimContrast.test.js

@@ -0,0 +1,185 @@
+import { describe, it, expect } from 'vitest';
+import {
+  signedUnit,
+  sharedNoiseSimilarity,
+  relativeDifference,
+  oppositeConflictBalance,
+  cancelAmountFromMetric,
+  hasGroupsForDimContrast,
+  computeDimRelationMetrics,
+  paintWeightsForDim,
+  applyGroupDimPaint,
+  buildPointGroupPaintAttributes,
+} from '../src/visualizer/groupDimContrast.js';
+
+describe('groupDimContrast math', () => {
+  it('signedUnit treats 0 as positive', () => {
+    expect(signedUnit(0)).toBe(1);
+    expect(signedUnit(0.002)).toBe(1);
+    expect(signedUnit(-0.018)).toBe(-1);
+  });
+
+  it('sharedNoiseSimilarity is formula (b)', () => {
+    // a=0.002, b=0.018 → 1 - 0.016/0.020 = 0.2
+    expect(sharedNoiseSimilarity(0.002, 0.018)).toBeCloseTo(0.2, 5);
+    expect(sharedNoiseSimilarity(0.1, 0.1)).toBeCloseTo(1, 5);
+    expect(sharedNoiseSimilarity(0, 0)).toBe(1);
+  });
+
+  it('relativeDifference complements similarity on same magnitudes', () => {
+    expect(relativeDifference(0.002, 0.018)).toBeCloseTo(0.8, 5);
+    expect(relativeDifference(0.1, -0.1)).toBeCloseTo(1, 5);
+  });
+
+  it('cancelAmountFromMetric mirrors zero-coverage on high metric', () => {
+    expect(cancelAmountFromMetric(0.4, 0)).toBe(0);
+    expect(cancelAmountFromMetric(0.4, 0.5)).toBe(0); // floor=0.5
+    expect(cancelAmountFromMetric(0.75, 0.5)).toBeCloseTo(0.5, 5);
+    expect(cancelAmountFromMetric(1, 0.5)).toBeCloseTo(1, 5);
+  });
+});
+
+describe('computeDimRelationMetrics', () => {
+  it('requires ≥2 groups', () => {
+    expect(hasGroupsForDimContrast([{ groupId: 'G1', embedding: [1] }])).toBe(false);
+    expect(computeDimRelationMetrics([{ groupId: 'G1', embedding: [1] }])).toEqual([]);
+  });
+
+  it('uses group means and classifies same vs opposite sign', () => {
+    const items = [
+      { groupId: 'G1', embedding: [0.002, 0.1, -0.05] },
+      { groupId: 'G1', embedding: [0.002, 0.1, -0.05] },
+      { groupId: 'G2', embedding: [0.018, -0.1, -0.05] },
+      { groupId: 'G2', embedding: [0.018, -0.1, -0.05] },
+    ];
+    const m = computeDimRelationMetrics(items);
+    expect(m).toHaveLength(3);
+    expect(m[0].sameSign).toBe(true);
+    expect(m[0].similarity).toBeCloseTo(0.2, 5);
+    expect(m[1].sameSign).toBe(false);
+    expect(m[1].difference).toBeCloseTo(1, 5);
+    expect(m[2].sameSign).toBe(true);
+    expect(m[2].similarity).toBeCloseTo(1, 5);
+  });
+});
+
+describe('paintWeightsForDim / applyGroupDimPaint', () => {
+  it('same-sign cancel only when enabled', () => {
+    const metric = {
+      meanA: 0.1,
+      meanB: 0.1,
+      sameSign: true,
+      similarity: 1,
+      difference: 0,
+    };
+    expect(paintWeightsForDim(metric, { sameSignCancelEnabled: false, sameSignCancelCoverage: 90 })).toEqual({
+      cancel: 0,
+      highlight: 0,
+    });
+    const on = paintWeightsForDim(metric, { sameSignCancelEnabled: true, sameSignCancelCoverage: 90 });
+    expect(on.cancel).toBeGreaterThan(0.9);
+    expect(on.highlight).toBe(0);
+  });
+
+  it('opposite highlight scales by strength × conflict balance', () => {
+    const metric = {
+      meanA: 0.1,
+      meanB: -0.1,
+      sameSign: false,
+      similarity: 0,
+      difference: 1,
+      conflictBalance: 1,
+    };
+    const w = paintWeightsForDim(metric, {
+      oppositeHighlightEnabled: true,
+      oppositeHighlightStrength: 50,
+      oppositeCancelCoverage: 0,
+    });
+    expect(w.highlight).toBeCloseTo(0.5, 5);
+    expect(w.cancel).toBe(0);
+  });
+
+  it('conflict cover fades opposite dims linearly (not all-or-nothing)', () => {
+    const metric = {
+      meanA: 0.1,
+      meanB: -0.1,
+      sameSign: false,
+      similarity: 0,
+      difference: 1,
+      conflictBalance: 1,
+    };
+    const at0 = paintWeightsForDim(metric, {
+      oppositeHighlightEnabled: true,
+      oppositeHighlightStrength: 100,
+      oppositeCancelCoverage: 0,
+    });
+    expect(at0.cancel).toBe(0);
+    expect(at0.highlight).toBeCloseTo(1, 5);
+
+    const at45 = paintWeightsForDim(metric, {
+      oppositeHighlightEnabled: true,
+      oppositeHighlightStrength: 100,
+      oppositeCancelCoverage: 45,
+    });
+    expect(at45.cancel).toBeCloseTo(0.5, 5);
+    expect(at45.highlight).toBeCloseTo(1, 5);
+
+    const at90 = paintWeightsForDim(metric, {
+      oppositeHighlightEnabled: true,
+      oppositeHighlightStrength: 100,
+      oppositeCancelCoverage: 90,
+    });
+    expect(at90.cancel).toBeCloseTo(1, 5);
+  });
+
+  it('oppositeConflictBalance is 1 for equal mags, lower when unbalanced', () => {
+    expect(oppositeConflictBalance(0.1, -0.1)).toBeCloseTo(1, 5);
+    expect(oppositeConflictBalance(0.1, -0.01)).toBeCloseTo(2 * 0.01 / 0.11, 5);
+  });
+
+  it('replaces toward highlight then blackens', () => {
+    const base = { r: 1, g: 1, b: 0, alpha: 1 };
+    const metric = {
+      meanA: 1,
+      meanB: -1,
+      sameSign: false,
+      similarity: 0,
+      difference: 1,
+    };
+    const painted = applyGroupDimPaint(
+      base,
+      metric,
+      {
+        oppositeHighlightEnabled: true,
+        oppositeHighlightStrength: 100,
+        oppositeCancelCoverage: 0,
+        oppositeHighlightColor: '#00E5FF',
+      },
+      { r: 0, g: 0, b: 0 },
+      { r: 0, g: 229 / 255, b: 1 }
+    );
+    expect(painted.r).toBeCloseTo(0, 5);
+    expect(painted.b).toBeCloseTo(1, 5);
+  });
+
+  it('buildPointGroupPaintAttributes uses meta.dim', () => {
+    const metrics = computeDimRelationMetrics([
+      { groupId: 'G1', embedding: [0.1, -0.1] },
+      { groupId: 'G2', embedding: [0.1, 0.1] },
+    ]);
+    const points = [
+      { meta: { dim: 0 } },
+      { meta: { dim: 1 } },
+    ];
+    const { cancel, highlight } = buildPointGroupPaintAttributes(points, metrics, {
+      sameSignCancelEnabled: true,
+      sameSignCancelCoverage: 90,
+      oppositeHighlightEnabled: true,
+      oppositeHighlightStrength: 100,
+      oppositeCancelCoverage: 0,
+    });
+    expect(cancel[0]).toBeGreaterThan(0.5); // same-sign dim0
+    expect(highlight[0]).toBe(0);
+    expect(highlight[1]).toBeGreaterThan(0.5); // opposite dim1
+  });
+});

tests/hoverTelemetry.test.js

@@ -32,6 +32,23 @@ describe('resolveHoverTelemetry', () => {
     expect(t.point).toEqual({ x: 10, y: 2, z: 0 });
   });
 
+  it('maps ribbon actIdx through sourceDims when present', () => {
+    const data = {
+      index: 4,
+      face: { a: 6, b: 7, c: 8 },
+      userData: {
+        kind: 'wideRibbon',
+        activations: [0.1, 0.2, 0.3, 0.4],
+        sourceDims: [10, 20, 30, 40],
+        token: 'dog',
+        type: 'compare',
+      },
+    };
+    const t = resolveHoverTelemetry(data);
+    expect(t.activation).toBe(0.4);
+    expect(t.dim).toBe(40);
+  });
+
   it('does not fall back to 0 when pointsData has a real value (regression)', () => {
     // Legacy HUD read userData.val / data.activation — both missing on Points meshes
     const data = {

tests/v25CanvasWire.test.js

@@ -40,6 +40,7 @@ describe('v25 canvasHost helpers', () => {
     const cleared = formatHoverForFooter(null);
     expect(cleared.coords).toContain('--');
     expect(cleared.segment).toBe('NEUTRAL SPACE');
+    expect(cleared.dim).toBe('DIM: --');
     expect(cleared.activation).toMatch(/ACTIVATION:\s*--/);
     expect(cleared.token).toBe('NONE');
   });
@@ -52,13 +53,14 @@ describe('v25 canvasHost helpers', () => {
         pointsData: [
           {
             activation: 0.55,
-            meta: { type: 'res', token: 'queen', dim: 0 },
+            meta: { type: 'res', token: 'queen', dim: 7 },
           },
         ],
       },
     });
     expect(formatted.coords).toBe('X: 12 | Y: -3 | Z: 91');
     expect(formatted.segment).toBe('RES');
+    expect(formatted.dim).toBe('DIM: 7');
     expect(formatted.token).toBe('queen');
     expect(formatted.activation).toMatch(/ACTIVATION:/);
     expect(formatted.activation).toContain('0.55');

tests/v25RightHudChrome.test.js

@@ -41,9 +41,11 @@ describe('v25 right + HUD chrome', () => {
   it('footer HUD exposes coords / telemetry / token placeholders', () => {
     const html = footerHudMarkup();
     expect(html).toContain('id="lab-hud-coords"');
+    expect(html).toContain('id="lab-hud-dim"');
     expect(html).toContain('id="lab-hud-activation"');
     expect(html).toContain('id="lab-hud-token"');
     expect(html).toContain(HUD_PLACEHOLDERS.coords);
+    expect(html).toContain(HUD_PLACEHOLDERS.dim);
     expect(html).toContain('COORDS');
   });
 });

tests/visualizationControls.test.js

@@ -14,6 +14,14 @@ import {
   anchorsFromSettings,
   remapAbsTWithZeroCoverage,
   normalizeZeroCoverage,
+  normalizeHighCoverage,
+  highCoverageFromSlider,
+  highCoverageToSlider,
+  formatHighCoverage,
+  effectiveZeroCoveragePercent,
+  HIGH_COVERAGE_MIN,
+  HIGH_COVERAGE_MAX,
+  HIGH_COVERAGE_SLIDER_MAX,
 } from '../src/ui/visualizationControlsDefaults.js';
 import {
   visualizationControlsMarkup,
@@ -53,8 +61,15 @@ describe('visualizationControlsDefaults', () => {
       colorPositive: '#FFE600',
       colorZero: '#000000',
       colorNegative: '#9900E6',
-      zeroCoverage: 0,
+      zeroCoverageEnabled: false,
+      zeroCoverage: 30,
       labelsVisible: true,
+      sameSignCancelEnabled: false,
+      sameSignCancelCoverage: 30,
+      oppositeHighlightEnabled: false,
+      oppositeHighlightColor: '#00E5FF',
+      oppositeHighlightStrength: 70,
+      oppositeCancelCoverage: 0,
     });
   });
 
@@ -149,12 +164,18 @@ describe('Visualization panel collapse tab', () => {
     expect(html).toContain('aria-expanded="true"');
     expect(html).toContain('▼');
     expect(html).toContain('viz-zero-coverage-slider');
+    expect(html).toContain('viz-zero-coverage-enabled');
     expect(html).toContain('Zero coverage');
+    expect(html).toContain('viz-group-contrast');
+    expect(html).toContain('Group contrast');
+    expect(html).toContain('viz-same-sign-enabled');
+    expect(html).toContain('viz-opposite-enabled');
     expect(html).toContain('viz-labels-toggle');
     expect(html).toContain('Hide labels');
     expect(html).toContain('field-info-btn');
     expect(html).toContain('data-field-info="Which signs show."');
-    expect(html).toContain('data-field-info="% held at zero."');
+    expect(html).toContain('data-field-info="Hold range at zero."');
+    expect(html).toContain('data-field-info="Groups only (G1↔G2)."');
   });
 
   it('collapse tab is a sibling of viz-panel-body (outside card chrome)', () => {
@@ -365,9 +386,34 @@ describe('remapAbsTWithZeroCoverage', () => {
     expect(remapAbsTWithZeroCoverage(1, 0.5)).toBeCloseTo(1, 5);
   });
 
-  it('normalizeZeroCoverage clamps', () => {
+  it('supports near-100% coverage', () => {
+    const c = HIGH_COVERAGE_MAX / 100;
+    expect(remapAbsTWithZeroCoverage(0.99, c)).toBe(0);
+    expect(remapAbsTWithZeroCoverage(1, c)).toBeCloseTo(1, 5);
+  });
+
+  it('normalizeZeroCoverage clamps conflict cover 0–90', () => {
     expect(normalizeZeroCoverage(150)).toBe(90);
     expect(normalizeZeroCoverage(-3)).toBe(0);
     expect(normalizeZeroCoverage('40')).toBe(40);
   });
+
+  it('normalizeHighCoverage clamps 30…99.9999', () => {
+    expect(normalizeHighCoverage(10)).toBe(HIGH_COVERAGE_MIN);
+    expect(normalizeHighCoverage(100)).toBe(HIGH_COVERAGE_MAX);
+    expect(normalizeHighCoverage(50.12345)).toBeCloseTo(50.1235, 4);
+  });
+
+  it('highCoverage slider maps endpoints', () => {
+    expect(highCoverageFromSlider(0)).toBe(HIGH_COVERAGE_MIN);
+    expect(highCoverageFromSlider(HIGH_COVERAGE_SLIDER_MAX)).toBe(HIGH_COVERAGE_MAX);
+    expect(highCoverageToSlider(HIGH_COVERAGE_MIN)).toBe(0);
+    expect(highCoverageToSlider(HIGH_COVERAGE_MAX)).toBe(HIGH_COVERAGE_SLIDER_MAX);
+    expect(formatHighCoverage(HIGH_COVERAGE_MAX)).toBe('99.9999%');
+  });
+
+  it('effectiveZeroCoveragePercent is 0 when Off', () => {
+    expect(effectiveZeroCoveragePercent({ zeroCoverageEnabled: false, zeroCoverage: 80 })).toBe(0);
+    expect(effectiveZeroCoveragePercent({ zeroCoverageEnabled: true, zeroCoverage: 80 })).toBe(80);
+  });
 });