merge(feat): English-only product UI copy into main

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

@@ -174,6 +174,12 @@ Para lecturas de alta visibilidad y ligera carga computacional, implementar la p
 
 ---
 
+### 4.7. Product copy = English; identifiers stay
+- **Invariante**: Visible UI copy (navbar, panels, sliders, landscape gate, aria/titles/placeholders) is English-only. Internal keys (`data-view="ANALYSIS"`, `threadAmplitudeY`, CSS classes) are not renamed for i18n. No i18n framework — single-language product surface.
+- **Compare 3D labels** remain raw input tokens (§4.6); panel chrome uses EN glossary.
+
+---
+
 ## 5. Protocolo de Mantenimiento de Lecciones Aprendidas
 
 1. **Consulta Obligatoria**: El agente **DEBE** leer este archivo al iniciar cualquier tarea de implementación, diseño de shaders, navegación o refactorización.

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to VectorLab 3D will be documented in this file.
 ## [Unreleased]
 
 ### Changed
+- **English-only product UI** (`feat/english-user-facing-copy`): Navbar VIEW/ANALYSIS/NAVIGATION, spatial slider labels, Arithmetic/Compare buttons, Compare empty/sort/copy + EN auto-parts presets, landscape gate. Internal `data-view` / mode keys unchanged. Test titles and in-scope `src/` comments translated to EN; historical CHANGELOG entries left in Spanish.
 - **Docs: English-only UI roadmap** — glossary + D6–D8 closed (EN Compare vocab; EN test titles/comments; keep historical CHANGELOG in Spanish). See `roadmap/english-ui-i18n.md` + `roadmap/PROMPT-english-ui.md`.
 - **ThreadLabels cortas** (`feat/short-thread-labels` + `fix/compare-labels-full-tokens`):
   - Arithmetic 3D: `WORD_A` / `WORD_B` / `WORD_C` / `RES` / `TOP1` (sin badge de tipo).

roadmap/english-ui-i18n.md

@@ -41,6 +41,9 @@
 | Mayor → menor / Ordenar… | Highest → lowest / Sort descending \| ascending |
 | Girá el teléfono… | Rotate your phone for a better experience. You can stay in portrait if you prefer. |
 | VECTOR ARITHMETIC / MODE / RENDER / POINTS / WORD_A / RES / TOP1 | keep (already EN) |
+| VISTA: | VIEW: |
+| Mejor en horizontal | Better in landscape |
+| Entendido | Got it |
 
 > **GATE B:** glosario y D6–D8 **cerrados**. El agente puede pasar A → C/D sin re-preguntar salvo términos nuevos del audit.
 
@@ -118,8 +121,8 @@ Humano confirmó D6–D8 + tabla §0.1. **No re-preguntar** salvo strings nuevos
 - `CHANGELOG` Unreleased corto; lesson § nueva solo si hay invariante (“product copy = EN; identifiers stay”).
 
 ### C.2 Criterios
-- [ ] Smoke UI: ninguna cadena ES visible en Arithmetic / Compare / Análisis / Navegación / POINTS·MESH·RIBBONS / landscape gate.
-- [ ] Vitest verde; asserts de copy actualizados.
+- [x] Smoke UI: ninguna cadena ES visible en Arithmetic / Compare / Análisis / Navegación / POINTS·MESH·RIBBONS / landscape gate.
+- [x] Vitest verde; asserts de copy actualizados.
 - [ ] Approval gate → merge.
 
 **Rama:** `feat/english-user-facing-copy`
@@ -136,7 +139,7 @@ Humano confirmó D6–D8 + tabla §0.1. **No re-preguntar** salvo strings nuevos
 - CHANGELOG: solo **Unreleased / entradas nuevas** en EN; dejar secciones históricas en español (D8).
 
 ### D.2 Criterios
-- [ ] D7/D8 cumplidos; exclusiones D3 intactas.
+- [x] D7/D8 cumplidos; exclusiones D3 intactas.
 - [ ] Suite verde; approval gate → merge.
 
 **Rama:** puede ir en `feat/english-user-facing-copy` si el agente hace C+D juntos, o `feat/english-dev-strings`.

src/engine/Navigation.js

@@ -164,7 +164,7 @@ export class Navigation {
   }
 
   setAnalysisView() {
-    // Captured ARITHMETIC + ANÁLISIS + POINTS framing (POS / ROT from CAM POSE overlay)
+    // Captured ARITHMETIC + ANALYSIS + POINTS framing (POS / ROT from CAM POSE overlay)
     this.camera.position.set(-75.2, -0.8, 62.5);
     this.euler.set(0, 0, 0, 'YXZ');
     this.camera.quaternion.setFromEuler(this.euler);
@@ -172,7 +172,7 @@ export class Navigation {
   }
 
   setNavigationView() {
-    // Captured default corridor view (king-man+woman @ Separación 0.4 / Amplitud 7)
+    // Captured default corridor view (king-man+woman @ Spacing 0.4 / Amplitude 7)
     this.camera.position.set(-178.3, 13.5, 52.2);
     const deg2rad = Math.PI / 180;
     this.euler.set(-5.4 * deg2rad, -51.5 * deg2rad, 0, 'YXZ');

src/main.js

@@ -151,8 +151,8 @@ class VectorLabApp {
   }
 
   /**
-   * Apply resolved spatial defaults for current MODE/VISTA/RENDER and sync slider UI.
-   * Called when context changes so each combo can keep its own dulce point.
+   * Apply resolved spatial defaults for current MODE/VIEW/RENDER and sync slider UI.
+   * Called when context changes so each combo can keep its own sweet spot.
    */
   applyContextSpatialDefaults() {
     const defaults = resolveSpatialDefaults({

src/ui/ComparePanel.js

@@ -1,60 +1,59 @@
 import { reorderCompareItems, sortCompareItemsByCosine } from './compareCosine.js';
 
 /**
- * Vocabulario típico de un manual de automóvil en español (piezas, fluidos, sistemas).
- * Tokens simples (sin espacios) para el splitter de COMPARE.
+ * Typical auto-manual lexicon in English (parts, fluids, systems).
+ * Simple tokens (no spaces) for the COMPARE splitter.
  */
-export const AUTO_MANUAL_VOCAB_ES = [
-  // Rodado
-  'rueda', 'ruedas', 'llanta', 'llantas', 'neumático', 'neumáticos', 'rin', 'goma',
-  'caucho', 'cubierta', 'aro', 'buje', 'eje', 'ejes', 'rodamiento', 'balero',
-  // Frenos y pedales
-  'freno', 'frenos', 'pastilla', 'pastillas', 'disco', 'tambor', 'abs', 'pedal',
-  'acelerador', 'embrague',
-  // Motor y escape
-  'motor', 'pistón', 'pistones', 'cilindro', 'cilindros', 'bujía', 'bujías',
-  'inyector', 'inyectores', 'culata', 'cigüeñal', 'leva', 'turbo', 'compresor',
-  'escape', 'catalizador', 'silenciador', 'colector', 'admisión',
-  // Refrigeración / lubricación / correas
-  'radiador', 'refrigerante', 'anticongelante', 'aceite', 'filtro', 'filtros',
-  'correa', 'correas', 'bomba', 'termostato', 'ventilador',
-  // Eléctrico
-  'batería', 'alternador', 'arranque', 'bobina', 'fusible', 'fusibles', 'relé',
-  'sensor', 'sensores', 'cable', 'cables',
-  // Transmisión
-  'transmisión', 'caja', 'marcha', 'marchas', 'diferencial', 'cardán',
-  'sincronizador', 'convertidor',
-  // Dirección y suspensión
-  'volante', 'dirección', 'suspensión', 'amortiguador', 'amortiguadores',
-  'muelle', 'muelles', 'ballesta', 'brazo', 'rótula', 'terminal',
-  // Carrocería e iluminación
-  'chasis', 'carrocería', 'capó', 'maletero', 'puerta', 'puertas', 'ventanilla',
-  'parabrisas', 'espejo', 'espejos', 'faro', 'faros', 'piloto', 'pilotos',
-  'paragolpes', 'guardabarros', 'techo', 'aleta',
-  // Habitáculo / seguridad
-  'asiento', 'asientos', 'cinturón', 'airbag', 'airbags', 'tablero',
-  'velocímetro', 'cuentakilómetros', 'claxon', 'limpiaparabrisas', 'guantera',
-  // Fluidos y combustible
-  'combustible', 'gasolina', 'diésel', 'diesel', 'líquido', 'hidráulico',
-  // Fijaciones / varios de taller
-  'junta', 'juntas', 'tornillo', 'tornillos', 'tuerca', 'tuercas', 'arandela',
-  'manguera', 'mangueras', 'depósito', 'tanque', 'tapón',
-  // Vehículo
-  'vehículo', 'automóvil', 'coche', 'auto', 'camioneta',
+export const AUTO_MANUAL_VOCAB_EN = [
+  // Wheels / tires
+  'wheel', 'wheels', 'tire', 'tires', 'rim', 'rims', 'hub', 'axle', 'axles',
+  'bearing', 'bearings', 'rubber', 'cover', 'spoke',
+  // Brakes and pedals
+  'brake', 'brakes', 'pad', 'pads', 'disc', 'rotor', 'drum', 'abs', 'pedal',
+  'accelerator', 'throttle', 'clutch',
+  // Engine and exhaust
+  'engine', 'piston', 'pistons', 'cylinder', 'cylinders', 'spark', 'plug',
+  'injector', 'injectors', 'head', 'crankshaft', 'camshaft', 'turbo', 'compressor',
+  'exhaust', 'catalytic', 'muffler', 'manifold', 'intake',
+  // Cooling / lubrication / belts
+  'radiator', 'coolant', 'antifreeze', 'oil', 'filter', 'filters',
+  'belt', 'belts', 'pump', 'thermostat', 'fan',
+  // Electrical
+  'battery', 'alternator', 'starter', 'coil', 'fuse', 'fuses', 'relay',
+  'sensor', 'sensors', 'cable', 'cables', 'wiring',
+  // Transmission
+  'transmission', 'gearbox', 'gear', 'gears', 'differential', 'driveshaft',
+  'synchronizer', 'converter',
+  // Steering and suspension
+  'steering', 'suspension', 'shock', 'shocks', 'spring', 'springs',
+  'leaf', 'arm', 'balljoint', 'tie',
+  // Body and lighting
+  'chassis', 'body', 'hood', 'trunk', 'door', 'doors', 'window',
+  'windshield', 'mirror', 'mirrors', 'headlight', 'headlights', 'taillight',
+  'bumper', 'fender', 'roof', 'panel',
+  // Cabin / safety
+  'seat', 'seats', 'seatbelt', 'airbag', 'airbags', 'dashboard',
+  'speedometer', 'odometer', 'horn', 'wiper', 'wipers', 'glovebox',
+  // Fluids and fuel
+  'fuel', 'gasoline', 'diesel', 'fluid', 'hydraulic',
+  // Fasteners / shop misc
+  'gasket', 'gaskets', 'bolt', 'bolts', 'nut', 'nuts', 'washer',
+  'hose', 'hoses', 'tank', 'cap',
+  // Vehicle
+  'vehicle', 'automobile', 'car', 'truck', 'van',
 ];
 
-/** Deduplicated Spanish auto-manual lexicon (stable order). */
-export const AUTO_MANUAL_UNIQUE_ES = [...new Set(AUTO_MANUAL_VOCAB_ES)];
+/** Deduplicated English auto-manual lexicon (stable order). */
+export const AUTO_MANUAL_UNIQUE_EN = [...new Set(AUTO_MANUAL_VOCAB_EN)];
 
 /**
- * COMPARE presets built from Spanish auto-manual vocabulary.
- * @deprecated alias — prefer COMPARE_AUTO_PRESETS
+ * COMPARE presets built from English auto-manual vocabulary.
  */
 export const COMPARE_AUTO_PRESETS = {
-  sample5: ['rueda', 'motor', 'freno', 'volante', 'embrague'],
-  default: AUTO_MANUAL_UNIQUE_ES,
-  sample20: AUTO_MANUAL_UNIQUE_ES.slice(0, 20),
-  sample50: AUTO_MANUAL_UNIQUE_ES.slice(0, 50),
+  sample5: ['wheel', 'engine', 'brake', 'steering', 'clutch'],
+  default: AUTO_MANUAL_UNIQUE_EN,
+  sample20: AUTO_MANUAL_UNIQUE_EN.slice(0, 20),
+  sample50: AUTO_MANUAL_UNIQUE_EN.slice(0, 50),
 };
 
 /** @deprecated Use COMPARE_AUTO_PRESETS */
@@ -85,7 +84,7 @@ export class ComparePanel {
       <form id="compare-form" class="sidebar-form">
         <div class="input-group">
           <label for="compare-tokens">Tokens / Words (separated by comma, space, or newline)</label>
-          <textarea id="compare-tokens" rows="6" placeholder="e.g. rueda, motor, freno, volante, embrague..." required></textarea>
+          <textarea id="compare-tokens" rows="6" placeholder="e.g. wheel, engine, brake, steering, clutch..." required></textarea>
         </div>
 
         <div class="preset-buttons-row">
@@ -95,7 +94,7 @@ export class ComparePanel {
         </div>
 
         <button type="submit" id="btn-compare-submit" class="btn-primary">
-          🔍 VISUALIZAR SECUENCIA (3D)
+          🔍 VISUALIZE SEQUENCE (3D)
         </button>
       </form>
 
@@ -106,14 +105,14 @@ export class ComparePanel {
         </div>
 
         <div class="compare-cosine-header">
-          <h3 id="compare-cosine-subtitle" class="compare-cosine-subtitle">SIMILITUD COSENO vs —</h3>
+          <h3 id="compare-cosine-subtitle" class="compare-cosine-subtitle">COSINE SIMILARITY vs —</h3>
           <span class="compare-sort-btns">
-            <button type="button" id="btn-sort-desc" class="btn-sort-cosine" data-sort="desc" disabled title="Mayor → menor" aria-label="Ordenar de mayor a menor">▼</button>
-            <button type="button" id="btn-sort-asc" class="btn-sort-cosine" data-sort="asc" disabled title="Menor → mayor" aria-label="Ordenar de menor a mayor">▲</button>
+            <button type="button" id="btn-sort-desc" class="btn-sort-cosine" data-sort="desc" disabled title="Highest → lowest" aria-label="Sort descending">▼</button>
+            <button type="button" id="btn-sort-asc" class="btn-sort-cosine" data-sort="asc" disabled title="Lowest → highest" aria-label="Sort ascending">▲</button>
           </span>
         </div>
         <ul id="compare-cosine-list" class="compare-cosine-list">
-          <li class="empty-state">Visualizá una secuencia para ver similitud vs el ancla...</li>
+          <li class="empty-state">Visualize a sequence to see similarity vs the anchor...</li>
         </ul>
       </div>
     `;
@@ -129,7 +128,7 @@ export class ComparePanel {
     this.btnSortDesc = this.element.querySelector('#btn-sort-desc');
     this.btnSortAsc = this.element.querySelector('#btn-sort-asc');
 
-    // Default: full Spanish auto-manual parts lexicon
+    // Default: full English auto-manual parts lexicon
     this.textarea.value = COMPARE_AUTO_PRESETS.default.join(", ");
 
     this.initEventListeners();
@@ -234,7 +233,7 @@ export class ComparePanel {
       this.btnSubmit.textContent = '⏳ COMPUTING SEQUENCE EMBEDDINGS...';
     } else {
       this.btnSubmit.disabled = false;
-      this.btnSubmit.textContent = '🔍 VISUALIZAR SECUENCIA (3D)';
+      this.btnSubmit.textContent = '🔍 VISUALIZE SEQUENCE (3D)';
     }
   }
 
@@ -252,8 +251,8 @@ export class ComparePanel {
     if (!data || !data.items) {
       this.items = null;
       this.updateMetrics(0);
-      this.cosineSubtitle.textContent = 'SIMILITUD COSENO vs —';
-      this.cosineList.innerHTML = '<li class="empty-state">Visualizá una secuencia para ver similitud vs el ancla...</li>';
+      this.cosineSubtitle.textContent = 'COSINE SIMILARITY vs —';
+      this.cosineList.innerHTML = '<li class="empty-state">Visualize a sequence to see similarity vs the anchor...</li>';
       this.setReorderLocked(false);
       return;
     }
@@ -266,7 +265,7 @@ export class ComparePanel {
 
   renderCosineList(anchor, items) {
     const anchorWord = anchor?.text ?? items[0]?.text ?? '—';
-    this.cosineSubtitle.textContent = `SIMILITUD COSENO vs «${anchorWord}»`;
+    this.cosineSubtitle.textContent = `COSINE SIMILARITY vs "${anchorWord}"`;
 
     this.cosineList.innerHTML = '';
     if (!items || items.length === 0) {

src/ui/LandscapeGate.js

@@ -85,9 +85,9 @@ export class LandscapeGate {
     this.overlay.innerHTML = `
       <div class="landscape-gate-card">
         <div class="landscape-gate-icon" aria-hidden="true">↻</div>
-        <h2 id="landscape-gate-title">Mejor en horizontal</h2>
-        <p class="landscape-gate-copy">Girá el teléfono para una mejor experiencia. Podés seguir en vertical si preferís.</p>
-        <button type="button" class="btn-primary landscape-gate-dismiss">Entendido</button>
+        <h2 id="landscape-gate-title">Better in landscape</h2>
+        <p class="landscape-gate-copy">Rotate your phone for a better experience. You can stay in portrait if you prefer.</p>
+        <button type="button" class="btn-primary landscape-gate-dismiss">Got it</button>
       </div>
     `;
 

src/ui/Navbar.js

@@ -1,5 +1,5 @@
 /**
- * Top Navbar component with title, status indicator, View Mode tabs (ANÁLISIS | NAVEGACIÓN), and Render Mode selector tabs (POINTS | MESH | RIBBONS).
+ * Top Navbar component with title, status indicator, View Mode tabs (ANALYSIS | NAVIGATION), and Render Mode selector tabs (POINTS | MESH | RIBBONS).
  */
 export class Navbar {
   constructor(containerElement, onRenderModeChangeCallback, onViewModeChangeCallback, onWorkspaceModeChangeCallback) {
@@ -28,9 +28,9 @@ export class Navbar {
         </div>
 
         <div class="view-mode-tabs">
-          <span class="tab-label">VISTA:</span>
-          <button data-view="ANALYSIS" class="view-tab">ANÁLISIS</button>
-          <button data-view="NAVIGATION" class="view-tab active">NAVEGACIÓN</button>
+          <span class="tab-label">VIEW:</span>
+          <button data-view="ANALYSIS" class="view-tab">ANALYSIS</button>
+          <button data-view="NAVIGATION" class="view-tab active">NAVIGATION</button>
         </div>
 
         <div class="render-mode-tabs">

src/ui/Sidebar.js

@@ -32,7 +32,7 @@ export class Sidebar {
         </div>
 
         <button type="submit" id="btn-calculate" class="btn-primary">
-          ⚡ CALCULAR VECTOR
+          ⚡ CALCULATE VECTOR
         </button>
       </form>
 
@@ -75,7 +75,7 @@ export class Sidebar {
       this.btnCalculate.textContent = '⏳ COMPUTING EMBEDDINGS...';
     } else {
       this.btnCalculate.disabled = false;
-      this.btnCalculate.textContent = '⚡ CALCULAR VECTOR';
+      this.btnCalculate.textContent = '⚡ CALCULATE VECTOR';
     }
   }
 

src/ui/ThreadSliders.js

@@ -20,51 +20,51 @@ export function threadSlidersMarkup(config = {}) {
 
   return `
 <div id="thread-sliders-container" class="section-card">
-  <h3 class="sliders-title">📐 Control Espacial 3D</h3>
+  <h3 class="sliders-title">📐 3D Spatial Controls</h3>
 
   <!-- Slider 1: Spacing X -->
   <div class="slider-group">
     <div class="slider-header">
-      <label for="thread-spacing-slider">Separación (X):</label>
+      <label for="thread-spacing-slider">Spacing (X):</label>
       <span id="thread-spacing-val" class="slider-val">${spacing.toFixed(2)}</span>
     </div>
-    <input type="range" id="thread-spacing-slider" min="0.1" max="0.7" step="0.05" value="${spacing}" title="Doble clic: restaurar default">
+    <input type="range" id="thread-spacing-slider" min="0.1" max="0.7" step="0.05" value="${spacing}" title="Double-click: restore default">
   </div>
 
   <!-- Slider 2: Vector Distance Y -->
   <div class="slider-group">
     <div class="slider-header">
-      <label for="thread-vector-dist-slider">Distancia Vectores (Y):</label>
+      <label for="thread-vector-dist-slider">Vector Distance (Y):</label>
       <span id="thread-vector-dist-val" class="slider-val">${vectorDist.toFixed(1)}</span>
     </div>
-    <input type="range" id="thread-vector-dist-slider" min="1.0" max="19.0" step="0.1" value="${vectorDist}" title="Doble clic: restaurar default">
+    <input type="range" id="thread-vector-dist-slider" min="1.0" max="19.0" step="0.1" value="${vectorDist}" title="Double-click: restore default">
   </div>
 
   <!-- Slider 3: Amplitude Y -->
   <div class="slider-group">
     <div class="slider-header">
-      <label for="thread-amplitude-y-slider">Amplitud (Y):</label>
+      <label for="thread-amplitude-y-slider">Amplitude (Y):</label>
       <span id="thread-amplitude-y-val" class="slider-val">${amplitudeY.toFixed(1)}</span>
     </div>
-    <input type="range" id="thread-amplitude-y-slider" min="1.0" max="40.0" step="0.1" value="${amplitudeY}" title="Doble clic: restaurar default">
+    <input type="range" id="thread-amplitude-y-slider" min="1.0" max="40.0" step="0.1" value="${amplitudeY}" title="Double-click: restore default">
   </div>
 
   <!-- Slider 4: Width Z -->
   <div class="slider-group">
     <div class="slider-header">
-      <label for="thread-width-slider">Longitud (Z):</label>
+      <label for="thread-width-slider">Length (Z):</label>
       <span id="thread-width-val" class="slider-val">${width.toFixed(2)}</span>
     </div>
-    <input type="range" id="thread-width-slider" min="0.1" max="0.3" step="0.01" value="${width}" title="Doble clic: restaurar default">
+    <input type="range" id="thread-width-slider" min="0.1" max="0.3" step="0.01" value="${width}" title="Double-click: restore default">
   </div>
 
   <!-- Slider 5: Thickness -->
   <div class="slider-group">
     <div class="slider-header">
-      <label for="thread-thickness-slider">Grosor Puntos:</label>
+      <label for="thread-thickness-slider">Point Thickness:</label>
       <span id="thread-thickness-val" class="slider-val">${thickness.toFixed(2)}</span>
     </div>
-    <input type="range" id="thread-thickness-slider" min="0.01" max="0.09" step="0.01" value="${thickness}" title="Doble clic: restaurar default">
+    <input type="range" id="thread-thickness-slider" min="0.01" max="0.09" step="0.01" value="${thickness}" title="Double-click: restore default">
   </div>
 </div>
 `;
@@ -91,7 +91,7 @@ export function syncThreadSlidersFromConfig(container, config) {
 /**
  * Binds real-time event listeners to sliders for immediate 60fps spatial updates.
  * Double-click on a range input restores that slider's default for the current
- * MODE/VISTA/RENDER context (via resolveSpatialDefaults).
+ * MODE/VIEW/RENDER context (via resolveSpatialDefaults).
  *
  * @param {HTMLElement} container - DOM container containing slider elements
  * @param {Array<Object>|null} threads - Synthetic threads array (optional)

src/ui/spatialSliderDefaults.js

@@ -1,7 +1,7 @@
 /**
- * Spatial slider defaults for Control Espacial 3D.
+ * Spatial slider defaults for 3D Spatial Controls.
  *
- * Today every MODE / VISTA / RENDER shares GLOBAL_SPATIAL_DEFAULTS.
+ * Today every MODE / VIEW / RENDER shares GLOBAL_SPATIAL_DEFAULTS.
  * Fill SPATIAL_DEFAULT_OVERRIDES as you define per-context presets;
  * resolveSpatialDefaults merges GLOBAL → workspace → view → render
  * (more specific keys win).
@@ -30,7 +30,7 @@ export const GLOBAL_SPATIAL_DEFAULTS = Object.freeze({
  * @type {Record<string, Partial<SpatialSliderValues>>}
  */
 export const SPATIAL_DEFAULT_OVERRIDES = {
-  // Captured ARITHMETIC + ANÁLISIS + POINTS (Control Espacial + framing dulce)
+  // Captured ARITHMETIC + ANALYSIS + POINTS (Spatial Controls + sweet-spot framing)
   'ARITHMETIC|ANALYSIS|POINTS': {
     threadSpacing: 0.4,
     threadVectorDistance: 10.0,

src/visualizer/DivergentShading.js

@@ -34,8 +34,8 @@ export function calculateZScoreNormalized(values, scaleFactor = 1.2) {
  * Calculates CPU color and dynamic opacity based on activation value.
  *
  * Color Ramps:
- * Positive (0 to +1): Negro (0.0) -> Naranja (+0.50) -> Amarillo (+1.00)
- * Negative (0 to -1): Negro (0.0) -> Azul Eléctrico (-0.50) -> Violeta (-1.00)
+ * Positive (0 to +1): Black (0.0) -> Orange (+0.50) -> Yellow (+1.00)
+ * Negative (0 to -1): Black (0.0) -> Electric Blue (-0.50) -> Violet (-1.00)
  *
  * @param {number} val - Activation value (v)
  * @param {number} [absMax=1.0] - Maximum absolute value for normalization
@@ -46,7 +46,7 @@ export function getDivergentColor(val, absMax = 1.0) {
   let t = Math.max(-1.0, Math.min(1.0, val / denom));
   const absT = Math.abs(t);
 
-  // Optimización computacional para |t| < 0.01
+  // Computational short-circuit for |t| < 0.01
   if (absT < 0.01) {
     return { r: 0.0, g: 0.0, b: 0.0, alpha: 0.05 };
   }
@@ -56,7 +56,7 @@ export function getDivergentColor(val, absMax = 1.0) {
   let r = 0.0, g = 0.0, b = 0.0;
 
   if (t > 0) {
-    // Positivo (0 a +1): Negro (0.0) -> Naranja (+0.50) -> Amarillo Incandescente (+1.00)
+    // Positive (0 to +1): Black (0.0) -> Orange (+0.50) -> Incandescent Yellow (+1.00)
     if (t < 0.50) {
       const k = t / 0.50;
       r = 1.0 * k;
@@ -69,7 +69,7 @@ export function getDivergentColor(val, absMax = 1.0) {
       b = 0.0;
     }
   } else {
-    // Negativo (0 a -1): Negro (0.0) -> Azul Eléctrico (-0.50) -> Violeta Neón (-1.00)
+    // Negative (0 to -1): Black (0.0) -> Electric Blue (-0.50) -> Neon Violet (-1.00)
     const f = -t;
     if (f < 0.50) {
       const k = f / 0.50;
@@ -106,8 +106,8 @@ void main() {
 
 /**
  * GLSL Fragment Shader for Dual Divergent Color Ramps (Solid Circular Points):
- * Positivo (0 a +1): Negro (0.0) -> Naranja (+0.50) -> Amarillo Incandescente (+1.00)
- * Negativo (0 a -1): Negro (0.0) -> Azul Eléctrico (-0.50) -> Violeta Neón (-1.00)
+ * Positive (0 to +1): Black (0.0) -> Orange (+0.50) -> Incandescent Yellow (+1.00)
+ * Negative (0 to -1): Black (0.0) -> Electric Blue (-0.50) -> Neon Violet (-1.00)
  */
 export const divergentFragmentShader = `
 varying float vIntensity;
@@ -123,7 +123,7 @@ void main() {
     float t = clamp(vIntensity, -1.0, 1.0);
     float absT = abs(t);
 
-    // Optimización computacional para |t| < 0.01: retorno directo sin interpolación
+    // Computational short-circuit for |t| < 0.01: early return without interpolation
     if (absT < 0.01) {
         gl_FragColor = vec4(vec3(0.0), 0.05 * baseOpacity * solidEdge);
         return;
@@ -134,7 +134,7 @@ void main() {
     vec3 color = vec3(0.0);
 
     if (t > 0.0) {
-        // Positivo (0 a +1): Negro -> Naranja (#FF8000) -> Amarillo (#FFE600)
+        // Positive (0 to +1): Black -> Orange (#FF8000) -> Yellow (#FFE600)
         if (t < 0.50) {
             float k = t / 0.50;
             color = mix(vec3(0.0), vec3(1.0, 0.5, 0.0), k);
@@ -143,7 +143,7 @@ void main() {
             color = mix(vec3(1.0, 0.5, 0.0), vec3(1.0, 0.95, 0.0), k);
         }
     } else {
-        // Negativo (0 a -1): Negro -> Azul Eléctrico (#0040FF) -> Violeta Neón (#9900E6)
+        // Negative (0 to -1): Black -> Electric Blue (#0040FF) -> Neon Violet (#9900E6)
         float f = -t;
         if (f < 0.50) {
             float k = f / 0.50;

tests/CompareMode.test.js

@@ -3,7 +3,7 @@ import * as THREE from 'three';
 import { Instancer } from '../src/visualizer/Instancer.js';
 
 describe('Compare Mode Sequence Engine', () => {
-  it('debe procesar e instanciar secuencias de tokens de 1 a 1024 elementos', () => {
+  it('processes and instantiates token sequences from 1 to 1024', () => {
     const scene = new THREE.Scene();
     const instancer = new Instancer(scene);
 
@@ -29,7 +29,7 @@ describe('Compare Mode Sequence Engine', () => {
     expect(instancer.activeGroup.children.length).toBeGreaterThanOrEqual(5);
   });
 
-  it('debe retornar lista vacía si la respuesta de compare es nula o vacía', () => {
+  it('returns an empty list when compare response is null or empty', () => {
     const scene = new THREE.Scene();
     const instancer = new Instancer(scene);
 
@@ -38,7 +38,7 @@ describe('Compare Mode Sequence Engine', () => {
     expect(instancer.activeGroup.children.length).toBe(0);
   });
 
-  it('debe soportar secuencias grandes (ej. 50 tokens)', () => {
+  it('supports large sequences (e.g. 50 tokens)', () => {
     const scene = new THREE.Scene();
     const instancer = new Instancer(scene);
 
@@ -59,7 +59,7 @@ describe('Compare Mode Sequence Engine', () => {
     expect(labels[49].text).toBe('token_49');
   });
 
-  it('debe reordenar hilos 3D con tween in-situ (reuse meshes, nuevo sequenceIndex)', async () => {
+  it('reorders 3D threads with in-place tween (reuse meshes, new sequenceIndex)', async () => {
     const scene = new THREE.Scene();
     const instancer = new Instancer(scene);
 

tests/DivergentShading.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { getDivergentColor } from '../src/visualizer/DivergentShading.js';
 
 describe('Divergent Shading CPU Algorithm', () => {
-  it('debe mapear valores positivos pico (+1.0) a Amarillo Incandescente', () => {
+  it('maps peak positive (+1.0) to incandescent yellow', () => {
     const { r, g, b, alpha } = getDivergentColor(1.0, 1.0);
     expect(r).toBeCloseTo(1.0, 5);
     expect(g).toBeCloseTo(0.95, 5);
@@ -10,14 +10,14 @@ describe('Divergent Shading CPU Algorithm', () => {
     expect(alpha).toBeCloseTo(1.0, 5);
   });
 
-  it('debe mapear valores positivos intermedios (+0.5) a Naranja', () => {
+  it('maps mid positive (+0.5) to orange', () => {
     const { r, g, b } = getDivergentColor(0.5, 1.0);
     expect(r).toBeCloseTo(1.0, 5);
     expect(g).toBeCloseTo(0.5, 5);
     expect(b).toBe(0.0);
   });
 
-  it('debe mapear el valor cero (0) a Negro con opacidad mínima (~0.05)', () => {
+  it('maps zero to black with minimum opacity (~0.05)', () => {
     const { r, g, b, alpha } = getDivergentColor(0.0, 1.0);
     expect(r).toBe(0.0);
     expect(g).toBe(0.0);
@@ -25,7 +25,7 @@ describe('Divergent Shading CPU Algorithm', () => {
     expect(alpha).toBeCloseTo(0.05, 5);
   });
 
-  it('debe optimizar y mapear valores con |t| < 0.01 directamente a Negro con opacidad mínima (~0.05)', () => {
+  it('short-circuits |t| < 0.01 to black with minimum opacity (~0.05)', () => {
     const { r, g, b, alpha } = getDivergentColor(0.005, 1.0);
     expect(r).toBe(0.0);
     expect(g).toBe(0.0);
@@ -33,14 +33,14 @@ describe('Divergent Shading CPU Algorithm', () => {
     expect(alpha).toBeCloseTo(0.05, 5);
   });
 
-  it('debe mapear valores negativos intermedios (-0.5) a Azul Eléctrico', () => {
+  it('maps mid negative (-0.5) to electric blue', () => {
     const { r, g, b } = getDivergentColor(-0.5, 1.0);
     expect(r).toBeCloseTo(0.0, 5);
     expect(g).toBeCloseTo(0.25, 5);
     expect(b).toBeCloseTo(1.0, 5);
   });
 
-  it('debe mapear valores negativos pico (-1.0) a Violeta Neón', () => {
+  it('maps peak negative (-1.0) to neon violet', () => {
     const { r, g, b, alpha } = getDivergentColor(-1.0, 1.0);
     expect(r).toBeCloseTo(0.6, 5);
     expect(g).toBeCloseTo(0.0, 5);

tests/LayoutEngine.test.js

@@ -2,14 +2,14 @@ import { describe, it, expect } from 'vitest';
 import { executeLayoutMath, LayoutEngine } from '../src/visualizer/LayoutEngine.js';
 
 describe('LayoutEngine Math Tests', () => {
-  it('debe calcular la coordenada X correcta según el índice e intervalo', () => {
+  it('computes X from index and interval', () => {
     const threadIndex = 3;
     const spacingX = 2.5;
     const posX = executeLayoutMath.calculateX(threadIndex, spacingX);
     expect(posX).toBe(7.5);
   });
 
-  it('debe escalar las posiciones Z según el factor de ancho Z', () => {
+  it('scales Z positions by width factor', () => {
     const pointIndex = 10;
     const baseSpacing = 0.1;
     const zWidth = 2.0;
@@ -17,12 +17,12 @@ describe('LayoutEngine Math Tests', () => {
     expect(posZ).toBeCloseTo(2.0, 5);
   });
 
-  it('debe instanciar LayoutEngine con valores por defecto y actualizar posiciones', () => {
+  it('constructs LayoutEngine with defaults and updates positions', () => {
     const engine = new LayoutEngine();
     expect(engine).toBeDefined();
   });
 
-  it('debe mapear puntos 3D en modo ANÁLISIS alineados en Z=0 con apilamiento vertical Y', () => {
+  it('maps 3D points in ANALYSIS mode aligned at Z=0 with vertical Y stack', () => {
     const engine = new LayoutEngine({ scaleX: 1.0 });
     const vector = [1.0, -1.0, 0.0];
     // sequenceIndex = 0 (Thread 1) vs sequenceIndex = 1 (Thread 2)
@@ -35,7 +35,7 @@ describe('LayoutEngine Math Tests', () => {
     expect(pointsSlot0[0].y).toBeGreaterThan(pointsSlot1[0].y);
   });
 
-  it('debe ajustar dinámicamente la separación vertical Y al cambiar spacingY', () => {
+  it('dynamically adjusts vertical Y spacing when spacingY changes', () => {
     const engine = new LayoutEngine({ scaleX: 1.0 });
     const vector = [0.0, 0.0];
     const pointsDefaultY = engine.mapVectorTo3DPoints(vector, 0, 'ANALYSIS', 5, 40.0);

tests/ThreadLabels.test.js

@@ -68,12 +68,12 @@ describe('ThreadLabels Component Tests', () => {
     threadLabels = new ThreadLabels(container);
   });
 
-  it('debe inicializar el contenedor overlay de etiquetas', () => {
+  it('initializes the labels overlay container', () => {
     const overlay = container.querySelector('#thread-labels-container');
     expect(overlay).not.toBeNull();
   });
 
-  it('debe registrar tarjetas de etiquetas para cada hilo', () => {
+  it('registers label cards for each thread', () => {
     const mockItems = [
       { id: 'vec_a', text: 'KING', type: 'word_a', origin3D: new THREE.Vector3(0, 50, 0) },
       { id: 'res', text: 'RESULT', type: 'res', origin3D: new THREE.Vector3(0, -50, 0) }
@@ -87,7 +87,7 @@ describe('ThreadLabels Component Tests', () => {
     expect(cards[1].classList.contains('res-label')).toBe(true);
   });
 
-  it('debe limpiar las etiquetas registradas', () => {
+  it('clears registered labels', () => {
     const mockItems = [
       { id: 'vec_a', text: 'KING', type: 'word_a', origin3D: new THREE.Vector3(0, 50, 0) }
     ];
@@ -101,7 +101,7 @@ describe('ThreadLabels Component Tests', () => {
     expect(cards.length).toBe(0);
   });
 
-  it('debe actualizar origins in-situ durante tween de reorder', () => {
+  it('updates origins in-place during reorder tween', () => {
     threadLabels.setLabels([
       { id: 'tok_0', text: 'king', type: 'compare', origin3D: new THREE.Vector3(0, 10, 0) },
       { id: 'tok_1', text: 'queen', type: 'compare', origin3D: new THREE.Vector3(0, 0, 0) },

tests/ThreadSliders.test.js

@@ -27,7 +27,7 @@ function parseRangeInput(html, id) {
 
 /**
  * Defaults + ranges. Most stay linearly centered (defaultMid === (min+max)/2).
- * Amplitud Y keeps default 7 (no scene regression) with max 40 → asymmetric by design.
+ * Amplitude Y keeps default 7 (no scene regression) with max 40 → asymmetric by design.
  */
 const SPATIAL_SLIDER_SPECS = [
   { id: 'thread-spacing-slider', defaultMid: 0.4, min: 0.1, max: 0.7, step: 0.05, centered: true },
@@ -169,7 +169,7 @@ describe('wireThreadSliders — dblclick reset', () => {
     expect(changeCount).toBe(1);
   });
 
-  it('uses context override when defined for current MODE/VISTA/RENDER', () => {
+  it('uses context override when defined for current MODE/VIEW/RENDER', () => {
     SPATIAL_DEFAULT_OVERRIDES['COMPARE|ANALYSIS|MESH'] = { threadSpacing: 0.6 };
     overrideKeys.push('COMPARE|ANALYSIS|MESH');
 

tests/spatialSliderDefaults.test.js

@@ -60,7 +60,7 @@ describe('resolveSpatialDefaults', () => {
     expect(d.threadWidth).toBe(GLOBAL_SPATIAL_DEFAULTS.threadWidth);
   });
 
-  it('applies captured ARITHMETIC|ANALYSIS|POINTS preset (Amplitud 40)', () => {
+  it('applies captured ARITHMETIC|ANALYSIS|POINTS preset (Amplitude 40)', () => {
     // Production override lives in SPATIAL_DEFAULT_OVERRIDES — assert the seam.
     const d = resolveSpatialDefaults({
       workspaceMode: 'ARITHMETIC',