feat: release version 4.0.1 with UI fixes and conversion tests

Medalcode · Medalcode · commit 78f137bb085c · 2026-04-10T12:00:00.000-04:00
diff --git a/Bitacora.md b/Bitacora.md
@@ -5,6 +5,20 @@ Todos los cambios notables en este proyecto serán documentados en este archivo.
 El formato está basado en [Keep a Changelog](https://keepachangelog.com/es-ES/1.0.0/),
 y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
+## [4.0.1] - 2026-05-21
+
+### Añadido ✨
+
+- ✅ **Suite de Tests de Conversión**: Creado `tests/converters.test.js` para probar la lógica de `src/core/convert.js`.
+- ✅ **Soporte de Refresh de IP**: Vinculado el botón de actualización `#refresh-ip` en el widget de IP pública para re-consultar la dirección IP.
+
+### Corregido 🐛
+
+- 🐛 **Navegación y Estructura HTML (`index.html`)**: Se restableció el contenedor `<div id="view-vlsm">` que rodea la calculadora VLSM y el widget de IP, corrigiendo el error donde la calculadora se mostraba de manera persistente al navegar hacia otras herramientas.
+- 🐛 **Widget de IP en Arranque (`main.js`)**: Se modificó la inicialización para importar e iniciar el widget de IP pública en segundo plano sin alterar la vista activa inicial.
+- 🐛 **Widgets de Herramientas (`bandwidth.js`, `base-converter.js`, `ip_reference.js`)**: Corregidos para renderizar e inicializar su HTML de manera dinámica dentro del contenedor que les provee el gestor de vistas, resolviendo fallos donde las herramientas se cargaban vacías por buscar elementos estáticos ausentes.
+- 🐛 **Manifest de Agentes (`docs/agent.md`)**: Corregidas las referencias obsoletas a rutas antiguas de archivos (`src/js/`) remanentes de la refactorización v4.0.0.
+
 ## [4.0.0] - 2026-02-25
 
 ### Refactorización: "Lean Architecture" 💎
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# 🛡️ NetOps Toolkit v4.0.0 — Lean Architecture Edition
+# 🛡️ NetOps Toolkit v4.0.1 — Lean Architecture Edition
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Status](https://img.shields.io/badge/Status-Stable-green)](https://github.com/Medalcode/NetOpsToolkit)
 [![Deploy](https://img.shields.io/badge/Deploy-Netlify-00C7B7)](https://netops-toolkit.netlify.app)
-[![Tests](https://img.shields.io/badge/Tests-32%20passing-success)](https://github.com/Medalcode/NetOpsToolkit)
+[![Tests](https://img.shields.io/badge/Tests-34%20passing-success)](https://github.com/Medalcode/NetOpsToolkit)
 [![CI](https://github.com/Medalcode/NetOpsToolkit/actions/workflows/ci.yml/badge.svg)](https://github.com/Medalcode/NetOpsToolkit/actions)
 
 > **"La Navaja Suiza para Ingenieros de Red"**
@@ -20,7 +20,7 @@
 - ✅ **PWA Ready** - Instalable como aplicación
 - ✅ **Internationalization** - Soporte nativo Español 🇪🇸 / Inglés 🇺🇸
 - ✅ **Secure** - CSP headers, XSS prevention
-- ✅ **Tested** - 32 tests unitarios pasando (Validators + VLSM Logic)
+- ✅ **Tested** - 34 tests unitarios pasando (Validators + VLSM Logic + Converters + DNS Core)
 - ✅ **Open Source** - MIT License
 
 ## 🎯 Herramientas Disponibles
@@ -112,7 +112,12 @@ npm run test:watch
 npm run test:coverage
 ```
 
-**Estado actual**: 3 test suites, 32 tests pasando (añadidos tests para `dns-core` el 2026-01-27)
+**Estado actual**: 4 test suites, 34 tests pasando (añadidos tests de conversión el 2026-05-21)
+
+### Cambios Recientes (v4.0.1 - 2026-05-21)
+- **Widgets de UI Auto-Contenidos**: Corregidos fallos de carga en `bandwidth.js`, `base-converter.js`, y `ip_reference.js` que impedían su renderizado al buscar elementos estáticos ausentes.
+- **Estructura e HTML de Navegación**: Corregido el bug de visibilidad persistente de la calculadora al restablecer el contenedor `#view-vlsm`.
+- **Testing**: Añadido soporte de pruebas unitarias para el módulo de conversiones `src/core/convert.js` (34 tests pasando en total).
 
 ### Cambios Recientes (v4.0.0 - 2026-05-17)
 - **3 herramientas rescatadas**: Base Converter, Bandwidth Calculator e IP Reference estaban huérfanas (registradas en JS pero sin HTML). Se inyecta su HTML al contenedor dinámicamente.
diff --git a/docs/agent.md b/docs/agent.md
@@ -18,8 +18,8 @@ descubrir, validar e invocar las capacidades (`skills`) del proyecto.
 
 ## Arquitectura (resumen)
 
-- Frontend SPA construido con Vite, Tailwind y módulos ES (entry: `src/js/main.js`).
-- Herramientas organizadas en `src/js/tools/` y wrappers de plataforma en `src/js/platform/`.
+- Frontend SPA construido con Vite, Tailwind y módulos ES (entry: `src/ui/main.js`).
+- Herramientas organizadas en `src/ui/components/` y wrappers de plataforma en `src/platform/`.
 - Serverless: Netlify Functions en `netlify/functions/` (ej. `geo-ip.js`).
 - Tests: Jest (`tests/`).
 
@@ -34,7 +34,7 @@ implementación adecuada (módulo lazy-loaded o función serverless).
 1) Invocar skill en cliente (módulo JS):
 
 ```js
-import('./src/js/tools/ip-lookup.js').then(({run})=>{
+import('./src/ui/components/public_ip.js').then(({run})=>{
   return run({clientIp: '1.2.3.4'})
 })
 ```
@@ -65,7 +65,7 @@ Response esperado (estándar):
 ## Observabilidad y errores
 
 - Integrar Sentry/Roweball para errores client-side si se decide.
-- Enviar métricas vitales y eventos de uso desde `src/js/analytics.js`.
+- Enviar métricas vitales y eventos de uso desde `src/ui/shared/analytics.js`.
 
 ## Seguridad
 
@@ -81,5 +81,5 @@ Response esperado (estándar):
 
 ## Onboarding para contributors
 
-- Añadir nueva herramienta: crear module en `src/js/tools/`, tests en `tests/`, y entry en `docs/skills.md`.
+- Añadir nueva herramienta: crear module en `src/ui/components/`, tests en `tests/`, y entry en `docs/skills.md`.
 - Seguir Conv. Commits y abrir PR con descripción y screenshots si aplica.
diff --git a/index.html b/index.html
@@ -220,7 +220,8 @@ <h3 class="text-xl font-bold text-white uppercase tracking-wider" id="dynamic-to
                         <!-- Tool logic will inject content here -->
                     </div>
                 </div>
-                    
+                
+                <div id="view-vlsm" class="grid grid-cols-12 gap-6">
                     <!-- Public IP Widget -->
                     <div class="col-span-12 lg:col-span-4 flex flex-col gap-4">
                         <div class="bg-surface-dark cyber-border rounded p-4 terminal-glow flex flex-col h-full min-h-[220px]">
@@ -311,7 +312,7 @@ <h3 class="text-xs font-bold tracking-[0.2em] uppercase text-white" data-i18n="v
             <div class="flex items-center gap-4">
                 <div class="flex items-center gap-1.5">
                     <div class="size-2 bg-signal-green rounded-full animate-pulse"></div>
-                    <span class="text-[10px] text-slate-500 uppercase font-bold tracking-tighter" data-i18n="footer.ready">System Ready — v3.0.0-cyber</span>
+                    <span class="text-[10px] text-slate-500 uppercase font-bold tracking-tighter" data-i18n="footer.ready">System Ready — v4.0.1-cyber</span>
                 </div>
             </div>
             <div class="flex items-center gap-4 mono-data text-[10px] text-slate-500">
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "netops-toolkit",
   "private": true,
-  "version": "3.0.1",
+  "version": "4.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/ui/components/bandwidth.js b/src/ui/components/bandwidth.js
@@ -1,45 +1,56 @@
 export function initBandwidthTool(container) {
+  if (!container) return;
+
   container.innerHTML = `
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <div class="space-y-4">
-        <div>
-          <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">File Size</label>
-          <div class="flex gap-2">
-            <input id="bw-size" type="number" placeholder="100" class="flex-1 bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white placeholder-slate-700 focus:border-primary transition-colors">
-            <select id="bw-size-unit" class="bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white cursor-pointer">
-              <option value="1">Bytes</option>
-              <option value="1024" selected>KB</option>
-              <option value="1048576">MB</option>
-              <option value="1073741824">GB</option>
-            </select>
-          </div>
-        </div>
-        <div>
-          <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Transfer Speed</label>
-          <div class="flex gap-2">
-            <input id="bw-speed" type="number" placeholder="50" class="flex-1 bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white placeholder-slate-700 focus:border-primary transition-colors">
-            <select id="bw-speed-unit" class="bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white cursor-pointer">
-              <option value="1">bps</option>
-              <option value="1000">Kbps</option>
-              <option value="1000000" selected>Mbps</option>
-              <option value="1000000000">Gbps</option>
-            </select>
-          </div>
+    <div class="max-w-xl mx-auto space-y-6">
+        <div class="bg-surface-dark cyber-border rounded p-6">
+            <h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Bandwidth Calculator</h4>
+            <div class="space-y-4">
+                <div class="grid grid-cols-3 gap-2">
+                    <div class="col-span-2">
+                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">File Size</label>
+                        <input id="bw-size" type="number" step="any" placeholder="100" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white focus:border-primary transition-colors">
+                    </div>
+                    <div>
+                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Unit</label>
+                        <select id="bw-size-unit" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white cursor-pointer focus:border-primary transition-colors">
+                            <option value="KB">KB</option>
+                            <option value="MB" selected>MB</option>
+                            <option value="GB">GB</option>
+                            <option value="TB">TB</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="grid grid-cols-3 gap-2">
+                    <div class="col-span-2">
+                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Network Speed</label>
+                        <input id="bw-speed" type="number" step="any" placeholder="10" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white focus:border-primary transition-colors">
+                    </div>
+                    <div>
+                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Unit</label>
+                        <select id="bw-speed-unit" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white cursor-pointer focus:border-primary transition-colors">
+                            <option value="Kbps">Kbps</option>
+                            <option value="Mbps" selected>Mbps</option>
+                            <option value="Gbps">Gbps</option>
+                        </select>
+                    </div>
+                </div>
+                <button id="btn-bw-calc" class="w-full bg-primary hover:bg-primary/80 text-white text-xs font-bold uppercase tracking-widest py-3 rounded transition-colors shadow-lg shadow-primary/20 mt-2">
+                    Calculate Time
+                </button>
+            </div>
         </div>
-        <button id="btn-bw-calc" class="bg-primary hover:bg-primary/80 text-white text-xs font-bold uppercase tracking-widest px-4 py-2 rounded transition-colors">Calculate</button>
-      </div>
-      <div id="bw-results" class="bg-surface-dark cyber-border rounded p-4 text-slate-400 text-sm">
-        Enter a file size and speed to calculate transfer time.
-      </div>
+        
+        <div id="bw-results"></div>
     </div>
   `;
 
-  const sizeInput = document.getElementById("bw-size");
-  const sizeUnit = document.getElementById("bw-size-unit");
-  const speedInput = document.getElementById("bw-speed");
-  const speedUnit = document.getElementById("bw-speed-unit");
-  const btnCalc = document.getElementById("btn-bw-calc");
-  const resultContainer = document.getElementById("bw-results");
+  const sizeInput = container.querySelector("#bw-size");
+  const sizeUnit = container.querySelector("#bw-size-unit");
+  const speedInput = container.querySelector("#bw-speed");
+  const speedUnit = container.querySelector("#bw-speed-unit");
+  const btnCalc = container.querySelector("#btn-bw-calc");
+  const resultContainer = container.querySelector("#bw-results");
 
   if (!sizeInput || !resultContainer) return;
 
diff --git a/src/ui/components/base-converter.js b/src/ui/components/base-converter.js
@@ -4,35 +4,47 @@
  */
 
 export function initConverter(container) {
+  if (!container) return;
+
   container.innerHTML = `
-    <div class="space-y-4">
-      <div>
-        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Enter a number (with or without prefix):</label>
-        <input id="converter-input" type="text" placeholder="e.g. 255, 0xFF, 0b11111111" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white placeholder-slate-700 focus:border-primary transition-colors">
-      </div>
-      <div class="grid grid-cols-3 gap-4">
-        <div class="bg-surface-dark cyber-border rounded p-4">
-          <div class="text-[10px] text-slate-500 uppercase font-bold mb-1">Decimal</div>
-          <div id="res-dec" class="text-2xl font-bold text-white mono-data">—</div>
-        </div>
-        <div class="bg-surface-dark cyber-border rounded p-4">
-          <div class="text-[10px] text-slate-500 uppercase font-bold mb-1">Binary</div>
-          <div id="res-bin" class="text-2xl font-bold text-white mono-data break-all">—</div>
+    <div class="max-w-xl mx-auto space-y-6">
+        <div class="bg-surface-dark cyber-border rounded p-6">
+            <h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Hex / Dec / Bin Converter</h4>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Input Value</label>
+                    <input id="converter-input" type="text" placeholder="e.g. 255, 0xFF, or 0b11111111" class="w-full bg-black border border-border-dark rounded px-3 py-2 text-sm mono-data text-white focus:border-primary transition-colors">
+                    <span class="text-[9px] text-slate-500 mt-1 block">Supports decimal, hexadecimal (0x prefix), or binary (0b prefix)</span>
+                </div>
+            </div>
         </div>
-        <div class="bg-surface-dark cyber-border rounded p-4">
-          <div class="text-[10px] text-slate-500 uppercase font-bold mb-1">Hexadecimal</div>
-          <div id="res-hex" class="text-2xl font-bold text-white mono-data">—</div>
+
+        <div class="bg-surface-dark cyber-border rounded p-6 space-y-4">
+            <h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 border-b border-border-dark pb-2">Results</h4>
+            <div class="grid grid-cols-1 gap-4">
+                <div>
+                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Decimal</label>
+                    <input id="res-dec" type="text" readonly class="w-full bg-slate-900 border border-border-dark rounded px-3 py-2 text-sm mono-data text-white">
+                </div>
+                <div>
+                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Binary</label>
+                    <input id="res-bin" type="text" readonly class="w-full bg-slate-900 border border-border-dark rounded px-3 py-2 text-sm mono-data text-white">
+                </div>
+                <div>
+                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Hexadecimal</label>
+                    <input id="res-hex" type="text" readonly class="w-full bg-slate-900 border border-border-dark rounded px-3 py-2 text-sm mono-data text-white">
+                </div>
+            </div>
         </div>
-      </div>
     </div>
   `;
 
-  const input = document.getElementById("converter-input");
-  if (!input) return;
+  const input = container.querySelector("#converter-input");
+  const resDec = container.querySelector("#res-dec");
+  const resBin = container.querySelector("#res-bin");
+  const resHex = container.querySelector("#res-hex");
 
-  const resDec = document.getElementById("res-dec");
-  const resBin = document.getElementById("res-bin");
-  const resHex = document.getElementById("res-hex");
+  if (!input) return;
 
   input.addEventListener("input", () => {
     const rawVal = input.value.trim();
diff --git a/src/ui/components/ip_reference.js b/src/ui/components/ip_reference.js
@@ -1,6 +1,7 @@
 export function initIpRefTool(container) {
+  if (!container) return;
   container.innerHTML = '<div id="ip-ref-content"></div>';
-  const content = document.getElementById("ip-ref-content");
+  const content = container.querySelector("#ip-ref-content");
   if (!content) return;
 
   // Function to generate HTML for a table
diff --git a/src/ui/components/public_ip.js b/src/ui/components/public_ip.js
@@ -38,6 +38,12 @@ export function initPublicIpWidget() {
     `;
   }
 
+  // Wire refresh button if it exists
+  const refreshBtn = document.getElementById("refresh-ip");
+  if (refreshBtn) {
+    refreshBtn.addEventListener("click", fetchIp);
+  }
+
   // Initial load
   fetchIp();
 }
diff --git a/src/ui/main.js b/src/ui/main.js
@@ -91,7 +91,9 @@ async function init() {
     console.log("✅ VLSM Core Logic");
 
     // 6. Initialize Public IP Widget (Always on dashboard)
-    loadToolLogic("tool-public-ip");
+    import("./components/public_ip.js").then(module => {
+      module.initPublicIpWidget();
+    });
 
     console.log("🏁 Initialization Complete");
   } catch (e) {
diff --git a/src/ui/shared/i18n.js b/src/ui/shared/i18n.js
@@ -6,8 +6,8 @@ const translations = {
     "header.bc.vlsm": "CALCULADORA VLSM",
     "header.btn.vlsm": "VLSM",
     "header.btn.tools": "HERRAMIENTAS",
-    "header.ver": "v3.0.1",
-    "footer.ready": "Sistema Listo — v3.0.1-cyber",
+    "header.ver": "v4.0.1",
+    "footer.ready": "Sistema Listo — v4.0.1-cyber",
     "footer.medalcode": "MEDALCODE",
     "footer.secure": "SEGURO",
     "tools.back": "Volver al Grid",
@@ -106,8 +106,8 @@ const translations = {
     "header.bc.vlsm": "VLSM CALCULATOR",
     "header.btn.vlsm": "VLSM",
     "header.btn.tools": "TOOLS",
-    "header.ver": "v3.0.1",
-    "footer.ready": "System Ready — v3.0.1-cyber",
+    "header.ver": "v4.0.1",
+    "footer.ready": "System Ready — v4.0.1-cyber",
     "footer.medalcode": "MEDALCODE",
     "footer.secure": "SECURE",
     "tools.back": "Back to Grid",
diff --git a/tests/converters.test.js b/tests/converters.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "netops-toolkit",`
`3`	`3`	`"private": true,`
`4`		`- "version": "3.0.1",`
	`4`	`+ "version": "4.0.1",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,12 @@ export function initPublicIpWidget() {`
`38`	`38`	`;
`39`	`39`	`}`
`40`	`40`
	`41`	`+ // Wire refresh button if it exists`
	`42`	`+ const refreshBtn = document.getElementById("refresh-ip");`
	`43`	`+ if (refreshBtn) {`
	`44`	`+ refreshBtn.addEventListener("click", fetchIp);`
	`45`	`+ }`
	`46`	`+`
`41`	`47`	`// Initial load`
`42`	`48`	`fetchIp();`
`43`	`49`	`}`