feat(F-129): completed feature

work/artifacts/F-129/architect.md

@@ -0,0 +1,94 @@
+# F-129 — Logs viewer: orden DESC + quitar autoscroll
+
+## Diagnóstico
+
+El operador reporta que el visor de logs (`/admin/logs`) muestra los eventos en orden ASC (más antiguo arriba, más reciente abajo). Con el `autoScroll` activo, el usuario ve el stream llegando por abajo, pero si hace scroll arriba para buscar un evento anterior, **el stream salta automáticamente hacia abajo cada vez que llega un nuevo log**, lo que resulta molesto.
+
+Solicitud:
+1. Orden **DESC** (evento más reciente arriba)
+2. Quitar el autoscroll (no hace falta porque el último evento siempre está arriba visible)
+
+## Diseño
+
+Usar `flex-direction: column-reverse` sobre el contenedor del log para invertir visualmente el orden DOM sin tocar el array. Esto preserva:
+- Estado del array en orden de llegada (cronológico) — fácil de gestionar
+- Cap de 200 líneas: `next.slice(-200)` mantiene las 200 más recientes, que con column-reverse quedan al inicio visible
+- Sin `bottomRef`, sin `handleScroll`, sin `scrollToBottom`, sin `autoScroll` state
+
+### Cambios
+
+`apps/admin/src/components/ServerLogViewer.tsx`:
+
+```diff
+- const [autoScroll, setAutoScroll] = useState(true);
+- const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+- const isAtBottomRef = useRef(true);
+
+- const scrollToBottom = useCallback(() => {
+-   if (autoScroll) bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+- }, [autoScroll]);
+-
+- const handleScroll = useCallback(() => {
+-   const el = containerRef.current;
+-   if (!el) return;
+-   const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+-   isAtBottomRef.current = distFromBottom < 50;
+-   setAutoScroll(isAtBottomRef.current);
+- }, []);
+
+- useEffect(() => {
+-   if (status === 'live') scrollToBottom();
+- }, [logs, scrollToBottom, status]);
+```
+
+Toolbar:
+```diff
+ <div className="flex items-center gap-2">
+-  <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
+-    <input type="checkbox" checked={autoScroll} onChange={...} ... />
+-    Auto-scroll
+-  </label>
+   <button onClick={() => setLogs([])} ... >Limpiar</button>
+ </div>
+```
+
+Contenedor de logs:
+```diff
+ <div
+   ref={containerRef}
+-  onScroll={handleScroll}
+   className="flex-1 overflow-y-auto bg-[#0d1117] font-mono text-xs leading-relaxed"
++  className="flex-1 overflow-y-auto bg-[#0d1117] font-mono text-xs leading-relaxed flex flex-col-reverse"
+   style={{ minHeight: 0 }}
+ >
+   <table className="w-full table-fixed">
+     <tbody>
+       {logs.map((entry, i) => ...)}
+     </tbody>
+   </table>
+-  <div ref={bottomRef} />
+ </div>
+```
+
+### Cap de 200 líneas
+
+Se mantiene: `next.slice(-200)` (las 200 más recientes). Con `column-reverse`, las más recientes se ven arriba automáticamente. El usuario puede hacer scroll hacia abajo para ver las más antiguas.
+
+### Sin autoscroll: por qué es OK
+
+Con `column-reverse` y array en orden cronológico:
+- Posición 0 (DOM top) = log más reciente
+- El usuario SIEMPRE ve el log más reciente arriba sin necesidad de scroll
+- No hay "salto" del stream que moleste al hacer scroll arriba
+
+## Sin cambios en backend
+
+El SSE `GET /admin/logs/stream` sigue emitiendo en orden cronológico. Solo cambiamos la presentación.
+
+## Plan
+
+1. Editar `apps/admin/src/components/ServerLogViewer.tsx` — quitar `autoScroll` state, `bottomRef`, `handleScroll`, `scrollToBottom`, useEffect de scroll. Quitar checkbox. Añadir `flex flex-col-reverse` al contenedor.
+2. `cd apps/admin && npx tsc --noEmit`.
+3. `cd apps/admin && npm run build`.
+4. Cerrar gates.