OrganiLAB 1.6.1: organizador, actualizador, interfaz 1.6 y publicación

Primer commit del proyecto. Incluye el rediseño 1.6 (riel de pasos en la barra
lateral), el actualizador con reintentos y respaldo, publicar.sh y la nueva
opción de desconectar carpetas (1.6.1).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Este commit está contenido en:
Labstream
2026-09-15 14:26:02 -05:00
commit 8c5153e8ed
Se han modificado 20 ficheros con 6481 adiciones y 0 borrados

235
PLAN-INTERFAZ-2026-09-15.html Archivo normal
Ver fichero

@@ -0,0 +1,235 @@
<title>OrganiLAB, rediseño de interfaz</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
<style>
:root{
--bg:#f6f7f5; --panel:#ffffff; --ink:#1c2733; --ink-2:#4a5561; --ink-3:#7a8490;
--line:#dde2e0; --accent:#2457b8; --accent-soft:#e6eefb; --warn:#b85a0c; --warn-soft:#fdeee0;
--ok:#2f7a4a; --ok-soft:#e4f3e9;
--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
--sans:"IBM Plex Sans",system-ui,Segoe UI,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--bg:#151a1f; --panel:#1d242b; --ink:#e7ebee; --ink-2:#b4bcc5; --ink-3:#7f8994;
--line:#2e373f; --accent:#7ea6f0; --accent-soft:#1f2c42; --warn:#f0a35c; --warn-soft:#3a2a18;
--ok:#7fce9a; --ok-soft:#1c3324;
}}
:root[data-theme="dark"]{
--bg:#151a1f; --panel:#1d242b; --ink:#e7ebee; --ink-2:#b4bcc5; --ink-3:#7f8994;
--line:#2e373f; --accent:#7ea6f0; --accent-soft:#1f2c42; --warn:#f0a35c; --warn-soft:#3a2a18;
--ok:#7fce9a; --ok-soft:#1c3324;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;padding:0 20px;padding-block:32px 64px}
.wrap{max-width:820px;margin:0 auto}
h1{font-size:28px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:18px;font-weight:600;margin:40px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
h3{font-size:15px;font-weight:600;margin:18px 0 6px}
p{margin:0 0 12px;max-width:68ch}
.meta{color:var(--ink-2);font-size:14px;margin-bottom:20px}
code{font-family:var(--mono);font-size:13px;background:var(--accent-soft);padding:1px 5px;border-radius:3px}
.verdict{background:var(--accent-soft);border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 6px 6px 0;margin:16px 0}
.verdict p:last-child{margin:0}
ul,ol{padding-left:22px;margin:0 0 12px} li{margin-bottom:6px}
table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0 16px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.tw{overflow-x:auto}
.obs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 16px}
.obs div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-size:14px}
.obs b{display:block;margin-bottom:4px}
.obs .vi{color:var(--ink-2)} .obs .pq{color:var(--warn)}
.fase{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.fase:last-child{border-bottom:0}
.fase .k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;padding-top:3px}
.fase .k b{display:block;font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600;margin-bottom:2px}
.fase ul{margin:0}
.fase p{font-size:14px;color:var(--ink-2);margin:0 0 6px}
.wire{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px;margin:12px 0 16px;overflow-x:auto}
.wire svg{display:block;width:100%;max-width:760px;height:auto;font-family:var(--sans)}
.cap{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.pill{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;background:var(--ok-soft);color:var(--ok);vertical-align:middle;margin-left:6px}
@media (max-width:560px){.obs{grid-template-columns:1fr}.fase{grid-template-columns:1fr;gap:6px}}
</style>
<div class="wrap">
<h1>OrganiLAB, rediseño de interfaz</h1>
<p class="meta">Diagnóstico de la versión 1.4.3 recorriendo las ocho pantallas en vivo, puntos de mejora y plan por fases. 15 sep 2026.</p>
<div class="verdict">
<p><strong>El problema de fondo.</strong> La app está organizada por <em>funciones internas</em> (Plan, Nombres, Aligerar, Copia, Ajustes) y no por lo que una persona quiere hacer con una carpeta de cliente. Cada pestaña es una herramienta suelta, sin orden entre ellas, y ninguna dice en qué punto del proceso estás ni qué falta para poder seguir. El asistente paso a paso ya existe, pero solo se llega a él arrastrando la carpeta sobre el .exe: la interfaz principal no lo ofrece.</p>
</div>
<h2>Lo que vi al recorrerla</h2>
<div class="obs">
<div><b>Inicio con carpeta elegida dice «Elige una carpeta»</b><span class="vi">David Reyes está seleccionado y hay inventario de 4.667 archivos, pero el título pide elegir, hay un recuadro gris vacío y dice «Escanea para ver el diagnóstico».</span><br><span class="pq">Es la primera pantalla y contradice el estado real. Ahí nace la confusión.</span></div>
<div><b>Ocho pestañas, cinco escondidas tras «Más»</b><span class="vi">Inicio, Qué hay, Historial visibles. Nombres, Plan detallado, Aligerar a 10 bits, Copia de seguridad y Ajustes ocultas.</span><br><span class="pq">Lo que hace el trabajo de verdad (Plan, Aligerar) está oculto. Lo visible es lo que no actúa.</span></div>
<div><b>Nada dice el orden</b><span class="vi">¿Primero Nombres o primero Plan? ¿Aligerar antes o después de organizar? ¿Copia de seguridad requiere haber aligerado?</span><br><span class="pq">El README explica un flujo de cinco pasos. La interfaz no lo refleja en ningún sitio.</span></div>
<div><b>Botones sin estado</b><span class="vi">«Copiar» aparece verde sin haber calculado. «Aplicar seleccionadas» gris sin decir por qué. «Volver a escanear» sin saber si hace falta.</span><br><span class="pq">No hay forma de saber qué está habilitado, por qué, ni qué desbloquea.</span></div>
<div><b>Procesos largos sin superficie</b><span class="vi">Escanear, analizar, convertir y copiar corren en segundo plano. Solo se ven si estás en la pestaña correcta en ese momento.</span><br><span class="pq">Es lo que describes como «no es visual qué hace». No hay barra global de tareas.</span></div>
<div><b>Vocabulario cruzado</b><span class="vi">Raíz, cliente, carpeta, lote, cubeta, confianza, contexto, rol, «Nombres que usamos», «Aligerar».</span><br><span class="pq">Términos del código llegan a pantalla. Una persona ve «raíz» y no sabe que es su carpeta de cliente.</span></div>
<div><b>Aligerar mezcla cuatro herramientas en una pantalla</b><span class="vi">Filtros, analizar, candidatos, cola de conversión, verificar, reemplazar y debajo el stock de Envato.</span><br><span class="pq">Seis botones numerados del 1 al 5 más «Marcar todos» en un mismo bloque, sin separación de etapas.</span></div>
<div><b>El tour es texto en un modal</b><span class="vi">Ocho ventanas seguidas explicando cada pestaña la primera vez.</span><br><span class="pq">Se lee una vez y se olvida. La ayuda debe vivir en la pantalla, en el momento en que hace falta.</span></div>
</div>
<h2>Principios para el rediseño</h2>
<ol>
<li><strong>Una carpeta, un recorrido.</strong> La unidad de trabajo es la carpeta de cliente. Todo lo demás cuelga de ella y sigue un orden fijo: escanear, revisar, ordenar, aligerar, respaldar.</li>
<li><strong>El estado siempre visible.</strong> En cada momento se ve en qué paso está esa carpeta, qué está hecho, qué está en curso y qué falta para el siguiente paso.</li>
<li><strong>Un botón principal por pantalla.</strong> El resto son secundarios. Un botón deshabilitado siempre explica por qué al lado.</li>
<li><strong>Las tareas largas tienen su propio sitio.</strong> Una barra de tareas global en la parte inferior muestra escaneos, análisis, conversiones y copias, con progreso y desde cualquier pantalla.</li>
<li><strong>Hablar como en el estudio.</strong> «Carpeta del cliente» en vez de raíz. «Qué va a pasar» en vez de plan. «Convertir a 10 bits» en vez de aligerar. «Reglas de carpetas» en vez de nombres.</li>
</ol>
<h2>Estructura propuesta</h2>
<div class="tw"><table>
<tr><th>Hoy (8 pestañas)</th><th>Propuesta (5 vistas)</th><th>Qué cambia</th></tr>
<tr><td>Inicio</td><td><strong>Carpeta</strong> · el recorrido</td><td>Pasa a ser el panel de estado y el camino de cinco pasos. Incluye el asistente paso a paso como opción principal.</td></tr>
<tr><td>Qué hay + Plan detallado + Nombres</td><td><strong>Revisar y ordenar</strong></td><td>Diagnóstico arriba, plan abajo, en la misma vista. «Nombres» se convierte en un panel lateral que aparece solo para las carpetas no reconocidas que bloquean el plan.</td></tr>
<tr><td>Aligerar a 10 bits (con stock incluido)</td><td><strong>Convertir</strong></td><td>Tres etapas claras y separadas: elegir clips, convertir, verificar y reemplazar. El stock de Envato pasa a ser un paso del recorrido, no un apéndice.</td></tr>
<tr><td>Copia de seguridad</td><td><strong>Respaldar</strong></td><td>Igual, pero bloqueada con explicación hasta que haya conversiones verificadas.</td></tr>
<tr><td>Historial</td><td><strong>Historial</strong></td><td>Se mantiene. Se añade filtro por carpeta y el lote muestra «qué se hizo» en palabras, no solo rutas.</td></tr>
<tr><td>Ajustes</td><td>Ajustes (icono de engranaje)</td><td>Fuera de la navegación principal.</td></tr>
</table></div>
<h3>Cómo se vería la vista «Carpeta»</h3>
<div class="wire">
<svg viewBox="0 0 760 330" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Boceto de la vista Carpeta con recorrido de cinco pasos y barra de tareas">
<style>
.t{font-size:11px;fill:var(--ink)} .s{font-size:9.5px;fill:var(--ink-3)} .b{font-size:12px;font-weight:600;fill:var(--ink)}
.box{fill:var(--panel);stroke:var(--line)} .side{fill:var(--bg);stroke:var(--line)}
.done{fill:var(--ok-soft);stroke:var(--ok)} .cur{fill:var(--accent-soft);stroke:var(--accent)} .todo{fill:var(--panel);stroke:var(--line);stroke-dasharray:3 3}
.btn{fill:var(--accent)} .btnt{font-size:10px;fill:#fff;font-weight:600}
</style>
<rect class="side" x="0.5" y="0.5" width="150" height="329"/>
<text class="b" x="12" y="22">Carpetas</text>
<rect class="cur" x="8" y="34" width="134" height="26" rx="4"/><text class="t" x="16" y="51">David Reyes · 1,36 TB</text>
<text class="t" x="16" y="82">Danney Gómez · 3,14 TB</text>
<text class="t" x="16" y="106">Camilo Ortega · 3,10 TB</text>
<rect class="todo" x="8" y="122" width="134" height="30" rx="4"/><text class="s" x="22" y="141">+ Añadir carpeta de cliente</text>
<text class="b" x="170" y="24">David Reyes</text>
<text class="s" x="170" y="40">Z:\Dermatologas\David Reyes · escaneada hoy 10:17 · 4.667 archivos · 1,36 TB</text>
<rect class="done" x="170" y="56" width="108" height="58" rx="5"/><text class="b" x="180" y="74">1 Escanear</text><text class="s" x="180" y="90">Hecho hoy</text><text class="s" x="180" y="103">Volver a escanear</text>
<rect class="done" x="286" y="56" width="108" height="58" rx="5"/><text class="b" x="296" y="74">2 Revisar</text><text class="s" x="296" y="90">6 avisos, 301 basura</text><text class="s" x="296" y="103">Ver diagnóstico</text>
<rect class="cur" x="402" y="56" width="108" height="58" rx="5"/><text class="b" x="412" y="74">3 Ordenar</text><text class="s" x="412" y="90">Plan listo: 42 movimientos</text><text class="s" x="412" y="103">4 carpetas por nombrar</text>
<rect class="todo" x="518" y="56" width="108" height="58" rx="5"/><text class="b" x="528" y="74">4 Convertir</text><text class="s" x="528" y="90">723 GB en BRAW</text><text class="s" x="528" y="103">Después de ordenar</text>
<rect class="todo" x="634" y="56" width="108" height="58" rx="5"/><text class="b" x="644" y="74">5 Respaldar</text><text class="s" x="644" y="90">Sin destino</text><text class="s" x="644" y="103">Requiere paso 4</text>
<rect class="box" x="170" y="128" width="572" height="120" rx="5"/>
<text class="b" x="184" y="150">Siguiente: ordenar la carpeta</text>
<text class="t" x="184" y="170">El plan mueve 42 cosas dentro de la misma carpeta. Nada se borra: la basura y los proxies van a _Para borrar.</text>
<text class="t" x="184" y="188">Antes de aplicar, dime qué son 4 carpetas que no reconozco: «Material», «Render», «Osmo», «Reels».</text>
<rect class="btn" x="184" y="206" width="132" height="26" rx="4"/><text class="btnt" x="196" y="223">Nombrar las 4 carpetas</text>
<rect class="box" x="326" y="206" width="112" height="26" rx="4"/><text class="t" x="338" y="223">Ver el plan completo</text>
<rect class="box" x="448" y="206" width="132" height="26" rx="4"/><text class="t" x="460" y="223">Asistente paso a paso</text>
<rect class="side" x="150.5" y="288" width="609" height="41"/>
<text class="s" x="170" y="303">TAREAS EN CURSO</text>
<rect class="box" x="170" y="308" width="360" height="14" rx="3"/><rect class="btn" x="170" y="308" width="216" height="14" rx="3"/>
<text class="t" x="540" y="319">Analizando clips · 60 % · 12 min</text>
</svg>
<p class="cap">Recorrido de cinco pasos con estado por paso, un bloque «Siguiente» con un solo botón principal, y una barra de tareas en curso siempre visible.</p>
</div>
<h2>Puntos de mejora concretos</h2>
<h3>Estado y orientación</h3>
<ul>
<li>Corregir Inicio: si hay carpeta seleccionada, el título es el nombre del cliente y la ruta. «Elige una carpeta» solo cuando no hay ninguna. Hoy la clave de la carpeta no se normaliza y por eso aparece «no escaneada» aunque lo esté.</li>
<li>Recorrido de cinco pasos con tres estados (hecho, en curso, pendiente) y el motivo cuando está bloqueado.</li>
<li>Bloque «Siguiente» que dice en una frase qué conviene hacer ahora y ofrece un botón principal.</li>
<li>Sidebar con el estado de cada carpeta de un vistazo (última acción, pendientes).</li>
</ul>
<h3>Tareas en curso</h3>
<ul>
<li>Barra inferior global con cada tarea: qué es, sobre qué carpeta, porcentaje, tiempo estimado, botón de cancelar.</li>
<li>Al terminar, aviso no intrusivo con resultado y enlace («Se movieron 42 elementos. Ver en Historial»).</li>
<li>Mientras corre una tarea sobre una carpeta, los botones que la afectarían quedan deshabilitados con el motivo visible.</li>
</ul>
<h3>Acciones y botones</h3>
<ul>
<li>Un botón principal por pantalla, en color. Secundarios en borde. Destructivos (mover a _Para borrar) con confirmación que resume «qué, cuánto y a dónde».</li>
<li>Botón deshabilitado siempre con texto al lado: «Calcula primero», «Requiere conversiones verificadas».</li>
<li>Quitar la numeración 1-5 de Aligerar y separar en tres bloques con título: Elegir clips, Convertir, Verificar y reemplazar.</li>
<li>Eliminar el doble clic accidental: deshabilitar mientras la petición está en vuelo.</li>
</ul>
<h3>Lenguaje</h3>
<div class="tw"><table>
<tr><th>Hoy</th><th>Propuesta</th></tr>
<tr><td>Raíz</td><td>Carpeta del cliente</td></tr>
<tr><td>Plan detallado / Generar plan</td><td>Qué va a pasar / Calcular</td></tr>
<tr><td>Nombres que usamos</td><td>Reglas de carpetas (qué es cada carpeta)</td></tr>
<tr><td>Aligerar a 10 bits</td><td>Convertir a 10 bits</td></tr>
<tr><td>Confianza alta / media / baja</td><td>Seguro / Revisar / Dudoso</td></tr>
<tr><td>Lote</td><td>Cambio del 12 sep 5:35 (con «Deshacer»)</td></tr>
<tr><td>Cubeta, contexto, rol</td><td>No aparecen en pantalla</td></tr>
</table></div>
<h3>Tablas y datos</h3>
<ul>
<li>Plan: agrupar por tipo de movimiento (basura, proxies, grabación, exportados) con conteo y peso por grupo, colapsados por defecto. Hoy son cientos de filas sueltas.</li>
<li>Historial: primera columna en palabras («Apartó 84 stock viejos», «Ordenó grabación de marzo») y las rutas al desplegar.</li>
<li>Qué hay: el mapa de peso sirve, pero las alertas deben enlazar al paso que las resuelve.</li>
</ul>
<h3>Ayuda</h3>
<ul>
<li>Sustituir el tour de ocho modales por una línea de ayuda contextual bajo el título de cada vista, y un «¿Qué hace esto?» al lado de cada botón principal.</li>
<li>Mantener la frase «Nada se borra» visible junto a cualquier botón que mueva archivos.</li>
</ul>
<h2>Plan para seguir</h2>
<div class="fase"><div class="k"><b>Fase 0</b>1 a 2 días</div><div>
<p>Arreglos rápidos sin tocar la estructura. Cambian la percepción de inmediato.</p>
<ul>
<li>Inicio muestra el estado real de la carpeta seleccionada (normalizar claves de raíz).</li>
<li>Renombrar pestañas y textos según la tabla de lenguaje.</li>
<li>Botones deshabilitados con motivo al lado; deshabilitar durante peticiones en vuelo.</li>
<li>Manejo de errores en la interfaz: los fallos del servidor se muestran, no revientan la pantalla.</li>
</ul></div></div>
<div class="fase"><div class="k"><b>Fase 1</b>1 semana</div><div>
<p>La vista «Carpeta» con el recorrido de cinco pasos y el bloque «Siguiente». Es la pieza que resuelve la confusión.</p>
<ul>
<li>Definir el estado de cada paso a partir de los datos que ya tiene el servidor (escaneo, plan, cola, respaldo).</li>
<li>Nuevo endpoint <code>/api/carpeta/estado</code> que devuelva ese resumen de una vez.</li>
<li>Integrar el asistente paso a paso como botón desde la interfaz, no solo desde el .exe.</li>
</ul></div></div>
<div class="fase"><div class="k"><b>Fase 2</b>1 semana</div><div>
<p>Barra de tareas global.</p>
<ul>
<li>Un solo sondeo de estado que alimente la barra y todas las vistas, en vez de tres bucles paralelos.</li>
<li>Progreso, tiempo estimado y cancelar para escaneo, análisis, conversión y copia.</li>
<li>Avisos al terminar con enlace al resultado.</li>
</ul></div></div>
<div class="fase"><div class="k"><b>Fase 3</b>1 a 2 semanas</div><div>
<p>Consolidar las pestañas en las cinco vistas propuestas.</p>
<ul>
<li>«Revisar y ordenar»: diagnóstico y plan juntos, plan agrupado por tipo, reglas de carpetas como panel lateral.</li>
<li>«Convertir»: tres bloques separados; el stock de Envato como paso propio del recorrido.</li>
<li>Historial en palabras con filtro por carpeta.</li>
</ul></div></div>
<div class="fase"><div class="k"><b>En paralelo</b>desde hoy</div><div>
<p>Los cuatro hallazgos críticos de la auditoría de código van antes o junto con la fase 1, porque el rediseño va a poner el «Convertir» y el «Aplicar» más a mano de más gente.</p>
<ul>
<li>Salidas de conversión sin colisión MP4/MOV.</li>
<li>Cerrar el API local (Host, token, claves permitidas en config).</li>
<li>No renombrar con «(2)»; reconocer el XML de Sony.</li>
<li>Contención de rutas dentro de la carpeta del cliente.</li>
</ul></div></div>
<h2>Cómo saber si funcionó</h2>
<ul>
<li>Una persona nueva del estudio abre la app con una carpeta ya escaneada y dice en menos de un minuto qué paso toca y qué botón pulsar.</li>
<li>Nadie pregunta «¿está haciendo algo?» durante una conversión: la barra lo dice.</li>
<li>Ningún botón gris sin explicación.</li>
<li>Cero clics en «Más» para hacer el trabajo diario.</li>
</ul>
</div>