@danieltmn/tamnora 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -5,6 +5,45 @@ Todos los cambios relevantes de este proyecto se documentan en este archivo.
 El formato sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/)
 y el proyecto usa [Versionado Semantico](https://semver.org/lang/es/).
 
+## [0.5.0] - 2026-10-02
+
+### Agregado
+
+- Preview de **sitios estáticos**: si la carpeta del proyecto tiene un `index.html`
+  (o `public/index.html`) y no hay comando de dev, `detectar` en la pestaña *procs*
+  ofrece un chip "sitio estático (8080)" que lo sirve con un servidor local sin
+  dependencias (`harness/scripts/static-server.mjs`). Desde *preview* se ve embebido
+  y con *túnel* se abre la URL pública para verlo desde el celular.
+- El **visor de archivos** agrega un botón "vista previa": para `.html`/`.svg` sirve
+  el workspace con el servidor estático en un iframe (con sus CSS, JS e imágenes
+  relativas) y para `.md` renderiza el markdown.
+- La vista previa (pestaña *preview* y visor de archivos) suma selector de tamaño
+  **móvil/tablet/laptop/pc/adaptable** y botón **maximizar** (con `Esc` para salir).
+- Los botones para mostrar/ocultar los paneles laterales pasan a estar dentro de
+  cada panel: *sesiones* tiene su botón de colapsar y, al ocultarse, aparece un
+  tirador en el borde para volver a mostrarlo (igual para *archivos*).
+- `/new` con una sesión activa abre otra sesión en la **misma carpeta**; el botón
+  "+ nueva sesión" (y `/new` sin sesión) abre el selector de carpetas.
+- **Carpeta predeterminada** configurable en Ajustes: el selector de carpetas abre
+  ahí por defecto (fallback a la casa si la ruta ya no existe).
+- El **pie del chat** muestra el uso de contexto del último turno (`contexto 12% ·
+  53k/1.0M`) con una **barra de porcentaje** que cambia de color (verde/ámbar/rojo).
+
+### Cambiado
+
+- Las pestañas (chat, proveedores, ajustes) quedan **centradas** en la barra superior.
+  `eval` y `runs` salen del topbar y quedan en el menú "más" (los tres puntitos, visible
+  en desktop), para des-énfasis en la consola; el CLI y la API siguen igual. En mobile
+  el menú "más" agrupa las cinco y muestra la pestaña activa.
+
+### Corregido
+
+- `normalizeModel` no leía `context_window`, el campo que usa DeepSeek para informar
+  la ventana de contexto (y que sí trae `context_length` en otros proveedores). Sin
+  esto, el footer nunca mostraba el porcentaje de contexto.
+- "Gestionar proveedores" (Ajustes y paleta) abría una vista inexistente por usar
+  `proveedores` en vez de `providers`; ahora entran al panel correcto y lo refrescan.
+
 ## [0.4.1] - 2026-10-02
 
 ### Corregido

package/README.md

@@ -63,6 +63,31 @@ Tamnora (override con `--home` o `TAMNORA_HOME`):
 - macOS: `~/Library/Application Support/tamnora`
 - Linux: `~/.config/tamnora`
 
+### Consola web
+
+`tamnora serve` sirve la consola en `http://127.0.0.1:4517`. Las pestanas
+principales son `chat`, `proveedores` y `ajustes`; `eval` y `runs` viven en el
+menu "mas" (los tres puntitos). En el chat:
+
+- **Paneles laterales** de sesiones y archivos, colapsables desde cada panel (con
+  un tirador en el borde para reabrirlos).
+- **Pie** con modo, proveedor, modelo, estado y el **uso de contexto** del ultimo
+  turno (`contexto 44% · 464k/1.0M`) con una barra que cambia de color.
+- **`/new`** abre otra sesion en la **misma carpeta** de la sesion activa; el boton
+  "+ nueva sesion" (y `/new` sin sesion) abre el selector de carpetas. La
+  **carpeta predeterminada** se elige en Ajustes.
+
+### Preview
+
+La consola puede levantar un dev server (deteccion de scripts `dev`/`start`,
+Laravel, PHP) y abrir un tunel al puerto para verlo desde el celular. Para sitios
+**estaticos** (un `index.html` sin script de dev) ofrece un chip "sitio estatico"
+que los sirve con un servidor sin dependencias (`harness/scripts/static-server.mjs`).
+
+El visor de archivos tiene **vista previa**: `.html`/`.svg` se sirven con sus CSS,
+JS e imagenes relativas, y `.md` se renderiza como markdown. Ambas vistas suman
+selector de tamano (movil/tablet/laptop/pc/adaptable) y boton para maximizar.
+
 ### Login
 
 ```bash

package/harness/packages/core/src/index.js

@@ -80,5 +80,5 @@ export {
   normalizeMcpConfig,
 } from './mcp/registry.js';
 export { parseTunnelmoleUrls, startTunnelmole, startTunnel } from './tunnel.js';
-export { detectProcs, packageManager, DEFAULT_PROCESS_ALLOW } from './procs/detect.js';
+export { detectProcs, packageManager, DEFAULT_PROCESS_ALLOW, staticServerChip } from './procs/detect.js';
 export { readPackageVersion } from './version.js';

package/harness/packages/core/src/procs/detect.js

@@ -2,6 +2,7 @@
 // package.json, composer/artisan y entrypoints PHP.
 
 import { existsSync, readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 
 export const DEFAULT_PROCESS_ALLOW = [
@@ -20,6 +21,26 @@ export const DEFAULT_PROCESS_ALLOW = [
 
 const SCRIPT_ORDER = ['dev', 'start', 'serve', 'preview'];
 
+const STATIC_SERVER = fileURLToPath(new URL('../../../../scripts/static-server.mjs', import.meta.url));
+const STATIC_PORT = 8080;
+
+function findStaticRoot(dir) {
+  if (existsSync(path.join(dir, 'index.html'))) return '.';
+  if (existsSync(path.join(dir, 'public', 'index.html'))) return 'public';
+  return null;
+}
+
+/** Chip para servir `dir` como sitio estático con el servidor sin dependencias. */
+export function staticServerChip(dir, { port = STATIC_PORT, label } = {}) {
+  return {
+    label: label ?? `sitio estático (${port})`,
+    command: process.execPath,
+    args: [STATIC_SERVER, dir, String(port)],
+    cwd: dir,
+    port,
+  };
+}
+
 function readJson(file) {
   try {
     return JSON.parse(readFileSync(file, 'utf8'));
@@ -65,5 +86,13 @@ export function detectProcs(dir) {
     break;
   }
 
+  if (!chips.length) {
+    const staticRoot = findStaticRoot(dir);
+    if (staticRoot) {
+      const target = staticRoot === '.' ? dir : path.join(dir, staticRoot);
+      chips.push(staticServerChip(target));
+    }
+  }
+
   return chips;
 }

package/harness/packages/core/src/providers/utils.js

@@ -99,8 +99,14 @@ export function normalizeModel(model) {
     (typeof modality === 'string' && modality.includes('image')) ||
     (Array.isArray(model.input_modalities) && model.input_modalities.includes('image'));
   const context =
-    Number(model.context_length ?? model.context_length_tokens ?? model.max_context_length ?? model.context ?? 0) ||
-    null;
+    Number(
+      model.context_length ??
+        model.context_length_tokens ??
+        model.max_context_length ??
+        model.context_window ??
+        model.context ??
+        0
+    ) || null;
   return { id, label, vision, context };
 }
 

package/harness/packages/core/test/procs.test.js

@@ -32,3 +32,20 @@ test('detectProcs falls back to npm and detects php entrypoints', async () => {
   assert.ok(php);
   assert.equal(php.args[0], '-S');
 });
+
+test('detectProcs offers a static server for plain HTML sites', async () => {
+  const dir = await mkdtemp(path.join(tmpdir(), 'tamnora-proc-'));
+  await writeFile(path.join(dir, 'index.html'), '<h1>hola</h1>');
+  const chips = detectProcs(dir);
+  const staticChip = chips.find((c) => c.port && c.args.some((a) => a.endsWith('static-server.mjs')));
+  assert.ok(staticChip);
+  assert.equal(staticChip.cwd, dir);
+  assert.ok(staticChip.args.includes(dir));
+});
+
+test('detectProcs does not add the static chip when there is a dev script', async () => {
+  const dir = await mkdtemp(path.join(tmpdir(), 'tamnora-proc-'));
+  await writeFile(path.join(dir, 'index.html'), '<h1>hola</h1>');
+  await writeFile(path.join(dir, 'package.json'), JSON.stringify({ scripts: { dev: 'vite' } }));
+  assert.ok(!detectProcs(dir).some((c) => c.args.some((a) => String(a).endsWith('static-server.mjs'))));
+});

package/harness/packages/core/test/providers.test.js

@@ -3,9 +3,16 @@ import assert from 'node:assert/strict';
 import { Store } from '../src/storage/sqlite.js';
 import { composeProviderSettings } from '../src/config/providers.js';
 import { toOllamaMessages } from '../src/providers/ollama.js';
-import { providerFetch } from '../src/providers/utils.js';
+import { providerFetch, normalizeModel } from '../src/providers/utils.js';
 import { isRetryableError } from '../src/providers/resilience.js';
 
+test('normalizeModel reads the context window across provider shapes', () => {
+  assert.equal(normalizeModel({ id: 'a', context_window: 1048576 }).context, 1048576);
+  assert.equal(normalizeModel({ id: 'b', context_length: 128000 }).context, 128000);
+  assert.equal(normalizeModel({ id: 'c', max_context_length: 64000 }).context, 64000);
+  assert.equal(normalizeModel({ id: 'd' }).context, null);
+});
+
 test('Store persists providers and settings', () => {
   const store = new Store(':memory:');
   try {

package/harness/packages/server/public/app.js

@@ -154,6 +154,9 @@ async function streamPost(url, body, onEvent, signal) {
 
 const moreTab = $('#more-tab');
 const moreMenu = $('#more-menu');
+const moreTabLabel = $('#more-tab-label');
+
+const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
 
 function hideMoreMenu() {
   moreMenu.hidden = true;
@@ -161,12 +164,15 @@ function hideMoreMenu() {
 }
 
 function activateTab(name) {
-  document.querySelectorAll('.tab[data-tab]').forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
+  document
+    .querySelectorAll('.tab[data-tab], #more-menu button[data-tab]')
+    .forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
+  if (moreTabLabel) moreTabLabel.textContent = TAB_LABELS[name] || name;
   moreTab.classList.toggle('active', name === 'eval' || name === 'runs');
   document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
-  if (name === 'proveedores') refreshProviders();
+  if (name === 'providers') refreshProviders();
   if (name === 'ajustes') { refreshMcp(); refreshSkills(); }
 }
 
@@ -193,12 +199,23 @@ document.addEventListener('keydown', (event) => {
 
 const settingsModal = $('#settings-modal');
 if (settingsModal) {
-  $('#settings-toggle')?.addEventListener('click', () => settingsModal.showModal());
+  $('#settings-toggle')?.addEventListener('click', () => {
+    syncDefaultCwd();
+    settingsModal.showModal();
+  });
   $('#settings-close')?.addEventListener('click', () => settingsModal.close());
   $('#settings-done')?.addEventListener('click', () => settingsModal.close());
   $('#settings-providers')?.addEventListener('click', () => {
     settingsModal.close();
-    activateTab('proveedores');
+    activateTab('providers');
+  });
+  $('#default-cwd-pick')?.addEventListener('click', () => {
+    settingsModal.close();
+    openFolderPicker('default');
+  });
+  $('#default-cwd-clear')?.addEventListener('click', () => {
+    writeDefaultCwd('');
+    syncDefaultCwd();
   });
   settingsModal.addEventListener('click', (event) => {
     if (event.target === settingsModal) settingsModal.close();
@@ -213,8 +230,8 @@ const PALETTE_COMMANDS = [
   { id: 'compact', label: 'Compactar la conversación', hint: '/compact', run: () => runSlash('compact') },
   { id: 'clear', label: 'Limpiar la conversación', hint: '/clear', run: () => runSlash('clear') },
   { id: 'mode', label: 'Cambiar Plan / Build', hint: 'Ctrl+.', run: () => toggleMode() },
-  { id: 'settings', label: 'Ajustes del agente (modelo, modo, auto)', run: () => settingsModal?.showModal() },
-  { id: 'providers', label: 'Gestionar proveedores', run: () => activateTab('proveedores') },
+  { id: 'settings', label: 'Ajustes del agente (modelo, modo, auto)', run: () => { syncDefaultCwd(); settingsModal?.showModal(); } },
+  { id: 'providers', label: 'Gestionar proveedores', run: () => activateTab('providers') },
   { id: 'ajustes', label: 'MCP y Skills (ajustes)', run: () => activateTab('ajustes') },
   { id: 'explorer', label: 'Mostrar u ocultar archivos', run: () => setExplorerOpen(!state.explorerOpen) },
   { id: 'sidebar', label: 'Mostrar u ocultar sesiones', run: () => setSidebarOpen(!state.sidebarOpen) },
@@ -514,7 +531,11 @@ function setSidebarOpen(open) {
     panels.sidebar.resizer.hidden = !open;
     if (sidebarBackdrop) sidebarBackdrop.hidden = true;
   }
-  $('#sidebar-toggle').setAttribute('aria-pressed', String(open));
+  const handle = $('#sidebar-handle');
+  if (handle) {
+    handle.hidden = open;
+    handle.setAttribute('aria-pressed', String(open));
+  }
   if (!isMobile()) {
     try {
       localStorage.setItem('tamnora-sidebar-open', open ? '1' : '0');
@@ -543,7 +564,8 @@ function initLayout() {
   attachResizer(panels.sidebar);
   attachResizer(panels.explorer);
   setSidebarOpen(isMobile() ? false : readSidebarPref());
-  $('#sidebar-toggle').addEventListener('click', () => setSidebarOpen(!state.sidebarOpen));
+  $('#sidebar-collapse')?.addEventListener('click', () => setSidebarOpen(false));
+  $('#sidebar-handle')?.addEventListener('click', () => setSidebarOpen(true));
   if (sidebarBackdrop) sidebarBackdrop.addEventListener('click', () => setSidebarOpen(false));
   mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
 }
@@ -558,29 +580,37 @@ function formatK(n) {
 }
 
 function renderTokens() {
+  const wrap = $('#sb-context');
   const node = $('#sb-tokens');
+  const fill = $('#sb-context-fill');
   const record = state.panes.get(state.sessionId);
   const tokens = record?.tokens ?? { in: 0, out: 0 };
   const lastTurn = record?.lastTurn ?? { prompt: 0, completion: 0 };
   const total = tokens.in + tokens.out;
+  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+  const used = lastTurn.prompt + lastTurn.completion || total;
+  const pct = context ? Math.min(100, Math.round((used / context) * 100)) : 0;
+  const tone = pct >= 75 ? 'ctx-danger' : pct >= 50 ? 'ctx-warn' : pct >= 25 ? 'ctx-mid' : 'ctx-ok';
+
   if (!total) {
-    node.textContent = 'tokens 0';
-    node.className = 'muted';
+    if (wrap) wrap.className = 'ctx muted';
+    node.textContent = 'tokens —';
     node.title = '';
+    if (fill) fill.style.width = '0%';
     return;
   }
-  node.textContent = `tokens ${formatK(total)}`;
-  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
-  const used = lastTurn.prompt + lastTurn.completion || total;
-  node.title =
+  const parts =
     `entrada ${formatK(tokens.in)} · salida ${formatK(tokens.out)}` +
     (context ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
-  if (!context) {
-    node.className = 'muted';
-    return;
+  if (context) {
+    node.textContent = `contexto ${pct}% · ${formatK(used)}/${formatK(context)}`;
+    if (wrap) wrap.className = `ctx ${tone}`;
+  } else {
+    node.textContent = `tokens ${formatK(total)}`;
+    if (wrap) wrap.className = 'ctx muted';
   }
-  const pct = (used / context) * 100;
-  node.className = pct >= 75 ? 'ctx-danger' : pct >= 50 ? 'ctx-warn' : pct >= 25 ? 'ctx-mid' : 'ctx-ok';
+  node.title = parts;
+  if (fill) fill.style.width = `${context ? pct : 0}%`;
 }
 
 function addTokens(tokens) {
@@ -1511,9 +1541,16 @@ async function runCommand(name, arg) {
       notify(`### Comandos\n${COMMANDS.map(([cmd, desc]) => `- \`${cmd}\` — ${desc}`).join('\n')}`);
       return { handled: true };
     case 'new':
-    case 'nueva':
-      openFolderPicker();
+    case 'nueva': {
+      const cwd = state.sessionId ? state.cwd : '';
+      if (cwd) {
+        const created = await createSessionIn(cwd);
+        if (created?.error) notify(`No se pudo crear la sesión: ${created.error}`, 'notice err');
+      } else {
+        openFolderPicker();
+      }
       return { handled: true };
+    }
     case 'init':
       return { handled: false, input: INIT_PROMPT };
     case 'cwd': {
@@ -1572,6 +1609,31 @@ let folderListPath = null;
 let folderParent = null;
 let folderDirs = [];
 
+const DEFAULT_CWD_KEY = 'tamnora-default-cwd';
+let folderPickerMode = 'session';
+
+function readDefaultCwd() {
+  try {
+    return localStorage.getItem(DEFAULT_CWD_KEY) || '';
+  } catch {
+    return '';
+  }
+}
+
+function writeDefaultCwd(value) {
+  try {
+    if (value) localStorage.setItem(DEFAULT_CWD_KEY, value);
+    else localStorage.removeItem(DEFAULT_CWD_KEY);
+  } catch {
+    // storage unavailable
+  }
+}
+
+function syncDefaultCwd() {
+  const input = $('#default-cwd');
+  if (input) input.value = readDefaultCwd();
+}
+
 const FOLDER_PATH = 'M3.5 6.3A1.3 1.3 0 0 1 4.8 5h3.1l1.5 1.7h7.8a1.3 1.3 0 0 1 1.3 1.3v7.7a1.3 1.3 0 0 1-1.3 1.3H4.8a1.3 1.3 0 0 1-1.3-1.3z';
 
 function folderIcon() {
@@ -1597,11 +1659,20 @@ function closeFolderPicker() {
   if (folderModal.open) folderModal.close();
 }
 
-function openFolderPicker() {
+function openFolderPicker(mode = 'session') {
+  folderPickerMode = mode === 'default' ? 'default' : 'session';
   folderGoto.value = '';
   setFolderStatus('');
   folderModal.showModal();
-  loadFolders(state.home || '');
+  const def = readDefaultCwd();
+  if (!def) return loadFolders(state.home || '');
+  api(`/api/folders?path=${encodeURIComponent(def)}`)
+    .then(() => loadFolders(def))
+    .catch(() => {
+      writeDefaultCwd('');
+      syncDefaultCwd();
+      loadFolders(state.home || '');
+    });
 }
 
 function renderCrumbs(pathStr) {
@@ -1667,21 +1738,21 @@ async function loadFolders(target = '') {
   $('#folder-up').disabled = !data.path;
   $('#folder-new').disabled = !data.path;
   folderUseBtn.disabled = !data.path;
-  folderUseBtn.textContent = data.path ? `usar «${basename(data.path)}»` : 'usar esta carpeta';
+  if (folderPickerMode === 'default') {
+    folderUseBtn.textContent = data.path ? `predeterminada: «${basename(data.path)}»` : 'usar como predeterminada';
+  } else {
+    folderUseBtn.textContent = data.path ? `usar «${basename(data.path)}»` : 'usar esta carpeta';
+  }
   renderFolderList(folderDirs);
   const count = data.path ? `${folderDirs.length} subcarpetas` : `${folderDirs.length} unidades`;
   setFolderStatus(data.path ? `${count} · clic para entrar` : 'elegí una unidad');
 }
 
-async function useFolder() {
-  const cwd = folderListPath;
-  if (!cwd) return setFolderStatus('Entrá a una carpeta primero (clic para navegar).', 'err');
-  const created = await api('/api/sessions', { method: 'POST', body: { title: 'Nueva sesión', cwd } }).catch((error) => {
-    setFolderStatus(error.message, 'err');
-    return null;
-  });
-  if (!created) return;
-  closeFolderPicker();
+async function createSessionIn(cwd, { title = 'Nueva sesión' } = {}) {
+  const created = await api('/api/sessions', { method: 'POST', body: { title, cwd } }).catch((error) => ({
+    error: error.message,
+  }));
+  if (created?.error) return created;
   registerSession(created.session, []);
   activateSession(created.session.id);
   const pending = state.pendingInput;
@@ -1690,6 +1761,21 @@ async function useFolder() {
     chatInput.value = pending;
     sendMessage();
   }
+  return created;
+}
+
+async function useFolder() {
+  const cwd = folderListPath;
+  if (!cwd) return setFolderStatus('Entrá a una carpeta primero (clic para navegar).', 'err');
+  if (folderPickerMode === 'default') {
+    writeDefaultCwd(cwd);
+    syncDefaultCwd();
+    closeFolderPicker();
+    return;
+  }
+  const created = await createSessionIn(cwd);
+  if (created?.error) return setFolderStatus(created.error, 'err');
+  closeFolderPicker();
 }
 
 function filterFolders() {
@@ -2380,7 +2466,6 @@ const explorerTree = $('#explorer-tree');
 const explorerRoot = $('#explorer-root');
 const explorerFilter = $('#explorer-filter');
 const explorerStatus = $('#explorer-status');
-const explorerToggle = $('#explorer-toggle');
 
 function setExplorerStatus(text, isError = false) {
   explorerStatus.textContent = text;
@@ -2391,8 +2476,11 @@ function setExplorerOpen(open) {
   state.explorerOpen = open;
   explorer.hidden = !open;
   panels.explorer.resizer.hidden = !open;
-  explorerToggle.setAttribute('aria-pressed', String(open));
-  explorerToggle.classList.toggle('active', open);
+  const handle = $('#explorer-handle');
+  if (handle) {
+    handle.hidden = open;
+    handle.setAttribute('aria-pressed', String(open));
+  }
   try {
     localStorage.setItem('tamnora-explorer-open', open ? '1' : '0');
   } catch {
@@ -2514,6 +2602,22 @@ function refreshTwisty(li, open) {
   twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
 }
 
+const filePreviewState = { current: null, kind: null, loaded: false, open: false, content: '' };
+
+const filePreviewTools = setupPreviewTools({
+  container: $('#file-modal'),
+  stage: $('#file-stage'),
+  frame: $('#file-frame'),
+  select: $('#file-device'),
+  maxButton: $('#file-max'),
+});
+
+function filePreviewKind(name) {
+  if (/\.(html?|svg)$/i.test(name)) return 'frame';
+  if (/\.(md|markdown)$/i.test(name)) return 'markdown';
+  return null;
+}
+
 async function openFilePreview(relPath, name) {
   const params = new URLSearchParams({ root: state.cwd, path: relPath });
   const data = await api(`/api/files/content?${params}`).catch((error) => {
@@ -2524,8 +2628,88 @@ async function openFilePreview(relPath, name) {
   $('#file-title').textContent = name;
   $('#file-meta').textContent = `${data.size} bytes`;
   $('#file-content').textContent = data.content;
-  $('#file-modal').showModal();
-}
+
+  const toggle = $('#file-preview-toggle');
+  const device = $('#file-device');
+  const maxButton = $('#file-max');
+  const modal = $('#file-modal');
+  filePreviewState.current = { relPath, name };
+  filePreviewState.kind = filePreviewKind(name);
+  filePreviewState.loaded = false;
+  filePreviewState.open = false;
+  filePreviewState.content = data.content;
+
+  toggle.hidden = !filePreviewState.kind;
+  toggle.textContent = 'vista previa';
+  device.hidden = true;
+  device.value = 'auto';
+  maxButton.hidden = true;
+  $('#file-frame').src = 'about:blank';
+  $('#file-stage').hidden = true;
+  $('#file-render').hidden = true;
+  $('#file-render').innerHTML = '';
+  $('#file-content').hidden = false;
+  modal.classList.remove('preview-maximized');
+  filePreviewTools.applyDevice();
+
+  modal.showModal();
+}
+
+$('#file-preview-toggle')?.addEventListener('click', async () => {
+  const toggle = $('#file-preview-toggle');
+  const content = $('#file-content');
+  const stage = $('#file-stage');
+  const frame = $('#file-frame');
+  const render = $('#file-render');
+  const device = $('#file-device');
+  const maxButton = $('#file-max');
+  const current = filePreviewState.current;
+  if (!current) return;
+
+  filePreviewState.open = !filePreviewState.open;
+  const off = () => {
+    toggle.textContent = 'vista previa';
+    content.hidden = false;
+    stage.hidden = true;
+    render.hidden = true;
+    device.hidden = true;
+    maxButton.hidden = true;
+    $('#file-modal').classList.remove('preview-maximized');
+  };
+  if (!filePreviewState.open) return off();
+
+  if (filePreviewState.kind === 'markdown') {
+    render.innerHTML = renderMarkdown(filePreviewState.content);
+    content.hidden = true;
+    stage.hidden = true;
+    render.hidden = false;
+    device.hidden = true;
+    maxButton.hidden = true;
+    toggle.textContent = 'ver código';
+    return;
+  }
+
+  device.hidden = false;
+  maxButton.hidden = false;
+  if (!filePreviewState.loaded) {
+    const data = await api('/api/files/preview', {
+      method: 'POST',
+      body: { root: state.cwd, path: current.relPath },
+    }).catch((error) => ({ error: error.message }));
+    if (data?.error) {
+      setExplorerStatus(data.error, true);
+      filePreviewState.open = false;
+      return off();
+    }
+    frame.src = data.url;
+    filePreviewState.loaded = true;
+    filePreviewTools.applyDevice();
+  }
+  toggle.textContent = 'ver código';
+  content.hidden = true;
+  render.hidden = true;
+  stage.hidden = false;
+});
 
 /* --- explorer panes: estructura / preview / procs ------------------------- */
 
@@ -2558,6 +2742,35 @@ function setPreviewStatus(text, isError = false) {
   previewStatusEl.classList.toggle('err', isError);
 }
 
+/* Ancho por dispositivo + maximizar, compartido por preview y visor de archivos. */
+function setupPreviewTools({ container, stage, frame, select, maxButton }) {
+  const applyDevice = () => {
+    const value = select?.value || 'auto';
+    if (stage) stage.dataset.device = value;
+    frame.style.width = value === 'auto' ? '100%' : `${value}px`;
+  };
+  select?.addEventListener('change', applyDevice);
+  const setMax = (on) => {
+    container?.classList.toggle('preview-maximized', on);
+    maxButton?.setAttribute('aria-pressed', String(on));
+    if (maxButton) maxButton.title = on ? 'restaurar' : 'maximizar';
+  };
+  maxButton?.addEventListener('click', () => setMax(!container?.classList.contains('preview-maximized')));
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && container?.classList.contains('preview-maximized')) setMax(false);
+  });
+  return { applyDevice, setMax };
+}
+
+const previewTools = setupPreviewTools({
+  container: $('#xp-preview'),
+  stage: $('#preview-stage'),
+  frame: previewFrame,
+  select: $('#preview-device'),
+  maxButton: $('#preview-max'),
+});
+previewTools.applyDevice();
+
 function loadPreview(url) {
   const value = String(url ?? '').trim();
   if (!value) return setPreviewStatus('Poné una URL (p. ej. http://127.0.0.1:5173).', true);
@@ -2664,7 +2877,7 @@ async function refreshProcLog() {
 
 $('#procs-detect')?.addEventListener('click', detectProcs);
 
-explorerToggle.addEventListener('click', () => setExplorerOpen(!state.explorerOpen));
+$('#explorer-handle')?.addEventListener('click', () => setExplorerOpen(true));
 $('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
 $('#explorer-refresh').addEventListener('click', refreshExplorerMode);
 explorerFilter.addEventListener('input', applyTreeFilter);

package/harness/packages/server/public/index.html

@@ -33,7 +33,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo">T</span> tamnora <span class="ver">v0.4.1</span></div>
+      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.5.0</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -45,8 +45,12 @@
               <circle cx="19" cy="12" r="1" />
               <circle cx="5" cy="12" r="1" />
             </svg>
+            <span id="more-tab-label">chat</span>
           </button>
           <div id="more-menu" class="menu-pop" hidden>
+            <button type="button" class="menu-primary" data-tab="chat">chat</button>
+            <button type="button" class="menu-primary" data-tab="providers">proveedores</button>
+            <button type="button" class="menu-primary" data-tab="ajustes">ajustes</button>
             <button type="button" data-tab="eval">eval</button>
             <button type="button" data-tab="runs">runs</button>
           </div>
@@ -65,18 +69,6 @@
             <path d="M14 2v4M8 10v4M16 18v4" />
           </svg>
         </button>
-        <button id="sidebar-toggle" type="button" class="btn icon" title="mostrar/ocultar sesiones" aria-label="mostrar u ocultar el panel de sesiones" aria-pressed="true">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <rect width="18" height="18" x="3" y="3" rx="2" />
-            <path d="M9 3v18" />
-          </svg>
-        </button>
-        <button id="explorer-toggle" type="button" class="btn icon" title="mostrar/ocultar archivos" aria-label="mostrar u ocultar el panel de archivos" aria-pressed="false">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <rect width="18" height="18" x="3" y="3" rx="2" />
-            <path d="M15 3v18" />
-          </svg>
-        </button>
         <button id="theme-toggle" type="button" class="btn icon" title="cambiar tema" aria-label="cambiar tema">
           <svg class="ico-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="4" />
@@ -92,6 +84,14 @@
     <main>
       <section id="view-chat" class="view active">
         <aside id="sidebar" class="sidebar">
+          <div class="panel-head">
+            <span class="panel-head-title">sesiones</span>
+            <button id="sidebar-collapse" type="button" class="btn icon" title="ocultar panel de sesiones" aria-label="ocultar panel de sesiones">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            </button>
+          </div>
           <button id="new-session" class="btn block">+ nueva sesión</button>
           <ul id="sessions" class="sessions"></ul>
           <div class="rail-footer">
@@ -143,7 +143,10 @@
             <span class="dot">·</span>
             <span id="sb-rounds">listo</span>
             <span class="spacer"></span>
-            <span id="sb-tokens" class="muted">tokens —</span>
+            <span id="sb-context" class="ctx muted" title="uso del contexto del modelo">
+              <span id="sb-tokens">tokens —</span>
+              <span class="ctx-bar" aria-hidden="true"><span id="sb-context-fill" class="ctx-fill"></span></span>
+            </span>
           </div>
         </div>
 
@@ -187,8 +190,25 @@
               <button id="preview-open" class="btn" type="button">abrir</button>
               <button id="preview-tunnel" class="btn" type="button" title="Abrir un túnel público al puerto (para el celular)">túnel</button>
             </div>
+            <div class="preview-tools">
+              <select id="preview-device" title="tamaño de pantalla" aria-label="tamaño de pantalla">
+                <option value="auto">adaptable</option>
+                <option value="390">móvil</option>
+                <option value="768">tablet</option>
+                <option value="1280">laptop</option>
+                <option value="1600">pc</option>
+              </select>
+              <span class="spacer"></span>
+              <button id="preview-max" class="btn icon" type="button" title="maximizar" aria-pressed="false" aria-label="maximizar la vista previa">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" />
+                </svg>
+              </button>
+            </div>
             <div id="preview-status" class="explorer-status"></div>
-            <iframe id="preview-frame" class="preview-frame" title="vista previa" referrerpolicy="no-referrer"></iframe>
+            <div id="preview-stage" class="preview-stage" data-device="auto">
+              <iframe id="preview-frame" class="preview-frame" title="vista previa" referrerpolicy="no-referrer"></iframe>
+            </div>
           </div>
 
           <div id="xp-procs" class="xp-pane" hidden>
@@ -202,12 +222,36 @@
           </div>
         </aside>
 
+        <button id="sidebar-handle" type="button" class="panel-handle panel-handle-left" title="mostrar sesiones" aria-label="mostrar panel de sesiones" aria-pressed="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+        <button id="explorer-handle" type="button" class="panel-handle panel-handle-right" title="mostrar archivos" aria-label="mostrar panel de archivos" aria-pressed="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+
         <dialog id="file-modal" class="modal file-modal">
           <div class="modal-card">
             <div class="row between">
               <h3 id="file-title">archivo</h3>
               <div class="file-actions">
                 <span id="file-meta" class="muted"></span>
+                <select id="file-device" class="file-device" title="tamaño de pantalla" aria-label="tamaño de pantalla" hidden>
+                  <option value="auto">adaptable</option>
+                  <option value="390">móvil</option>
+                  <option value="768">tablet</option>
+                  <option value="1280">laptop</option>
+                  <option value="1600">pc</option>
+                </select>
+                <button id="file-max" type="button" class="btn icon" title="maximizar" aria-pressed="false" aria-label="maximizar la vista previa" hidden>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" />
+                  </svg>
+                </button>
+                <button id="file-preview-toggle" type="button" class="btn" hidden>vista previa</button>
                 <button id="file-close" type="button" class="btn icon" title="cerrar" aria-label="cerrar">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <path d="M18 6 6 18M6 6l12 12" />
@@ -216,6 +260,10 @@
               </div>
             </div>
             <pre id="file-content" class="file-preview"></pre>
+            <div id="file-render" class="file-render text" hidden></div>
+            <div id="file-stage" class="preview-stage" data-device="auto" hidden>
+              <iframe id="file-frame" class="file-frame" title="vista previa del archivo"></iframe>
+            </div>
           </div>
         </dialog>
       </section>
@@ -404,6 +452,16 @@
         <select id="provider" title="proveedor"></select>
         <label for="model">Modelo</label>
         <select id="model" title="modelo"></select>
+        <label for="default-cwd">Carpeta predeterminada para nuevas sesiones</label>
+        <div class="row default-cwd-row">
+          <input id="default-cwd" type="text" readonly placeholder="(la casa del usuario)" title="carpeta donde se abre el selector y /new sin sesión" />
+          <button type="button" id="default-cwd-pick" class="btn">elegir</button>
+          <button type="button" id="default-cwd-clear" class="btn icon" title="quitar la carpeta predeterminada" aria-label="quitar la carpeta predeterminada">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
         <label class="check" title="aprobar automáticamente tools con permiso ask">
           <input id="yes" type="checkbox" /> Aprobar automáticamente las tools (auto)
         </label>

package/harness/packages/server/public/styles.css

@@ -83,7 +83,10 @@ pre, code, kbd, samp { font-family: var(--mono); }
 
 /* topbar ------------------------------------------------------------------ */
 .topbar {
-  display: flex;
+  position: relative;
+  z-index: 40;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
   padding: 10px 16px;
@@ -92,6 +95,8 @@ pre, code, kbd, samp { font-family: var(--mono); }
   backdrop-filter: blur(14px);
 }
 .brand {
+  grid-column: 1;
+  justify-self: start;
   font-family: var(--serif);
   font-weight: 700;
   font-size: 15px;
@@ -101,18 +106,23 @@ pre, code, kbd, samp { font-family: var(--mono); }
   gap: 9px;
 }
 .brand .logo {
-  width: 26px;
+  min-width: 26px;
   height: 26px;
+  padding: 0 8px;
   border: 1px solid var(--border);
   border-radius: 8px;
-  display: grid;
-  place-items: center;
-  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
   font: 700 14px var(--serif);
+  letter-spacing: -0.03em;
   flex: 0 0 auto;
 }
+.brand .logo .logo-t { color: var(--text); -webkit-text-stroke: 0.3px var(--text); }
+.brand .logo .logo-h { color: var(--accent); -webkit-text-stroke: 0.3px var(--accent); }
 .brand .ver { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; }
-.tabs { display: flex; gap: 2px; }
+.tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; }
 .tab {
   background: transparent;
   color: var(--muted);
@@ -125,9 +135,13 @@ pre, code, kbd, samp { font-family: var(--mono); }
 .tab:hover { color: var(--text); }
 .tab.active { color: var(--text); background: var(--theirs); border-color: var(--border); }
 
-.menu { position: relative; }
-#more-tab { display: grid; place-items: center; padding: 6px 10px; }
+.menu { position: relative; display: block; }
+#more-tab { display: inline-flex; align-items: center; gap: 6px; }
 #more-tab svg { width: 18px; height: 18px; display: block; }
+#more-tab-label { display: none; font: 600 12.5px var(--sans); }
+@media (min-width: 821px) {
+  #more-menu button.menu-primary { display: none; }
+}
 
 #theme-toggle .ico-moon { display: none; }
 html[data-theme='dark'] #theme-toggle .ico-sun { display: none; }
@@ -136,7 +150,7 @@ html[data-theme='dark'] #theme-toggle .ico-moon { display: block; }
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
-  z-index: 20;
+  z-index: 60;
   min-width: 130px;
   display: flex;
   flex-direction: column;
@@ -159,7 +173,8 @@ html[data-theme='dark'] #theme-toggle .ico-moon { display: block; }
   font: inherit;
 }
 .menu-pop button:hover { background: var(--theirs); }
-.settings { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.menu-pop button.active { background: var(--theirs); color: var(--accent); }
+.settings { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
 .settings select { max-width: 220px; }
 .check { color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
 
@@ -176,7 +191,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--accent); box-sha
 
 /* layout ------------------------------------------------------------------ */
 main { flex: 1; min-height: 0; min-width: 0; display: flex; }
-.view { display: none; flex: 1; min-height: 0; min-width: 0; }
+.view { display: none; flex: 1; min-height: 0; min-width: 0; position: relative; }
 .view.active { display: flex; min-width: 0; }
 
 .btn {
@@ -599,9 +614,12 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
 }
 .statusbar .dot { opacity: 0.5; }
 .statusbar .spacer { flex: 1; }
+.ctx { display: inline-flex; align-items: center; gap: 8px; }
+.ctx-bar { width: 76px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
+.ctx-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: currentColor; transition: width 0.35s ease; }
 
 /* providers / eval / runs ------------------------------------------------- */
-.panel { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
+.panel { flex: 1; overflow-y: auto; width: 100%; max-width: 920px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
 .panel h2 { margin: 0; font: 700 20px var(--serif); letter-spacing: -0.02em; }
 .field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
 .field.grow { flex: 1; }
@@ -766,7 +784,34 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
 .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
 .xchip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 500 11px var(--mono); cursor: pointer; }
 .xchip:hover { border-color: var(--accent); color: var(--accent); }
-.preview-frame { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; }
+.preview-tools { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
+.preview-tools .spacer { flex: 1; }
+.preview-tools select { flex: 0 0 auto; }
+.preview-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  overflow: auto;
+  background: var(--theirs);
+}
+.preview-frame { border: 0; background: #fff; height: 100%; width: 100%; min-height: 0; }
+.preview-stage[data-device]:not([data-device='auto']) .preview-frame {
+  height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 14px 36px rgba(40, 36, 26, 0.18);
+}
+#xp-preview.preview-maximized {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  padding: 10px;
+  background: var(--panel);
+  border: 0;
+}
+#xp-preview.preview-maximized .preview-stage { border-radius: 10px; }
 #procs-list { flex: 1; min-height: 0; overflow-y: auto; }
 .procs-log { margin: 0; padding: 8px 12px; height: 150px; overflow: auto; background: var(--theirs); border-top: 1px solid var(--border); font: 500 11px var(--mono); white-space: pre-wrap; word-break: break-word; }
 .import-bar { display: flex; gap: 6px; margin: 4px 0 10px; }
@@ -786,6 +831,72 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
   white-space: pre;
 }
 
+.file-render {
+  margin: 0;
+  padding: 14px 16px;
+  max-height: 62vh;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  line-height: 1.65;
+}
+
+.file-stage {
+  height: 62vh;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  overflow: auto;
+  background: var(--theirs);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.file-frame { border: 0; background: #fff; height: 100%; width: 100%; }
+
+dialog.file-modal.preview-maximized {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+.file-modal.preview-maximized .modal-card { height: 100vh; }
+.file-modal.preview-maximized .file-stage,
+.file-modal.preview-maximized .file-render,
+.file-modal.preview-maximized .file-preview {
+  flex: 1;
+  height: auto;
+  max-height: none;
+}
+
+/* panel heads + collapsed handles ----------------------------------------- */
+.panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
+.panel-head-title { flex: 1; font: 700 13px var(--serif); letter-spacing: -0.02em; color: var(--muted); text-transform: lowercase; }
+.panel-handle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 30;
+  width: 22px;
+  height: 54px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.panel-handle:hover { color: var(--accent); background: var(--theirs); }
+.panel-handle svg { width: 16px; height: 16px; }
+.panel-handle-left { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
+.panel-handle-right { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
+
 .drawer-backdrop {
   position: fixed;
   inset: 0;
@@ -794,6 +905,7 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
   backdrop-filter: blur(2px);
 }
 
+
 @media (max-width: 900px) {
   .explorer {
     position: fixed;
@@ -809,6 +921,8 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
 /* mobile / angosto -------------------------------------------------------- */
 @media (max-width: 820px) {
   .topbar {
+    position: relative;
+    display: flex;
     flex-wrap: wrap;
     gap: 8px 10px;
     padding: 8px 12px;
@@ -817,10 +931,27 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
     display: none;
   }
   .tabs {
-    overflow-x: auto;
+    margin-left: auto;
     max-width: 100%;
   }
+  .tabs > .tab[data-tab] {
+    display: none;
+  }
+  #more-tab-label {
+    display: inline;
+  }
+  .menu-pop {
+    top: calc(100% + 2px);
+    left: auto;
+    right: 0;
+    min-width: 200px;
+    padding: 6px;
+  }
+  .menu-pop button {
+    padding: 11px 12px;
+  }
   .settings {
+    grid-column: auto;
     margin-left: 0;
     flex: 1 1 100%;
     flex-wrap: wrap;
@@ -915,6 +1046,9 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
   text-transform: none;
 }
 .settings-actions { margin-top: 10px; }
+.default-cwd-row { align-items: center; }
+.default-cwd-row #default-cwd { flex: 1; min-width: 0; }
+.default-cwd-row .btn { flex: 0 0 auto; }
 
 /* command palette --------------------------------------------------------- */
 .palette-modal { width: min(560px, calc(100vw - 24px)); }

package/harness/packages/server/src/routes/files.js

@@ -1,7 +1,8 @@
 import fs from 'node:fs';
 import fsp from 'node:fs/promises';
 import path from 'node:path';
-import { sendJson, sendError } from '../lib/http.js';
+import { readJson, sendJson, sendError } from '../lib/http.js';
+import { staticServerChip } from '../lib/core.js';
 import { isLoopback, resolveExistingDir } from '../lib/workspace.js';
 
 const MAX_PREVIEW = 200 * 1024;
@@ -114,4 +115,37 @@ export function registerFiles(route, ctx) {
       content: buffer.toString('utf8'),
     });
   });
+
+  route('POST', '/api/files/preview', async ({ req, res }) => {
+    if (!isLoopback(req.socket.localAddress)) {
+      return sendError(res, 403, 'La vista previa solo está disponible en conexiones locales.');
+    }
+    if (!ctx.procsEnabled) {
+      return sendError(res, 403, 'Los procesos están deshabilitados (processes.enabled = false).');
+    }
+    const body = await readJson(req);
+    let root;
+    try {
+      root = resolveExistingDir(body.root || ctx.cwd);
+    } catch (error) {
+      return sendError(res, 400, error.message);
+    }
+    const rel = String(body.path ?? '').replace(/^[/\\]+/, '');
+    const target = path.resolve(root, rel);
+    if (!isInside(root, target)) return sendError(res, 400, 'La ruta queda fuera del workspace.');
+
+    let proc = ctx.procs.list().find((p) => p.running && p.port && path.resolve(p.cwd) === root);
+    if (!proc) {
+      const chip = staticServerChip(root);
+      try {
+        proc = ctx.procs.start({ cwd: root, command: chip.command, args: chip.args, port: chip.port });
+      } catch (error) {
+        return sendError(res, 400, error.message);
+      }
+    }
+    sendJson(res, 200, {
+      url: `http://127.0.0.1:${proc.port}/${toPosix(path.relative(root, target))}`,
+      port: proc.port,
+    });
+  });
 }

package/harness/packages/server/test/server.test.js

@@ -531,6 +531,32 @@ test('lists and previews workspace files, confining to the root', async () => {
   }
 });
 
+test('previews an HTML file through a static server', async () => {
+  const root = await mkdtemp(path.join(tmpdir(), 'tamnora-html-'));
+  await writeFile(path.join(root, 'index.html'), '<h1>hola</h1>');
+  const { instance, base } = await startServer();
+  const json = { 'Content-Type': 'application/json' };
+  try {
+    const res = await fetch(`${base}/api/files/preview`, {
+      method: 'POST',
+      headers: json,
+      body: JSON.stringify({ root, path: 'index.html' }),
+    });
+    assert.equal(res.status, 200);
+    const data = await res.json();
+    assert.match(data.url, /^http:\/\/127\.0\.0\.1:\d+\/index\.html$/);
+
+    const outside = await fetch(`${base}/api/files/preview`, {
+      method: 'POST',
+      headers: json,
+      body: JSON.stringify({ root, path: '../secret.txt' }),
+    });
+    assert.equal(outside.status, 400);
+  } finally {
+    await instance.close();
+  }
+});
+
 test('lists workspace folders and rejects invalid paths', async () => {
   const root = await mkdtemp(path.join(tmpdir(), 'tamnora-folders-'));
   await mkdir(path.join(root, 'beta'));

package/harness/scripts/static-server.mjs

@@ -0,0 +1,94 @@
+// Servidor estatico minimo (sin dependencias) para previsualizar sitios hechos
+// con HTML/CSS/JS planos desde la consola y exponerlos con un tunel.
+//
+// Uso: node static-server.mjs <dir> [puerto]
+
+import http from 'node:http';
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import path from 'node:path';
+
+const root = path.resolve(process.argv[2] || '.');
+const port = Number(process.argv[3] || 8000);
+const host = '127.0.0.1';
+
+const TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.htm': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.txt': 'text/plain; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.pdf': 'application/pdf',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+  '.mp3': 'audio/mpeg',
+};
+
+function resolveRequest(urlPath) {
+  let decoded;
+  try {
+    decoded = decodeURIComponent(String(urlPath || '/').split('?')[0].split('#')[0]);
+  } catch {
+    return null;
+  }
+  const abs = path.resolve(root, decoded.replace(/^\/+/, ''));
+  if (abs !== root && !abs.startsWith(root + path.sep)) return null;
+  return abs;
+}
+
+const server = http.createServer((req, res) => {
+  let abs = resolveRequest(req.url);
+  if (abs === null) {
+    res.writeHead(403, { 'content-type': 'text/plain; charset=utf-8' });
+    res.end('403');
+    return;
+  }
+  try {
+    if (existsSync(abs) && statSync(abs).isDirectory()) abs = path.join(abs, 'index.html');
+    if (!existsSync(abs) || !statSync(abs).isFile()) {
+      res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
+      res.end('404');
+      return;
+    }
+  } catch {
+    res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
+    res.end('500');
+    return;
+  }
+  res.writeHead(200, {
+    'content-type': TYPES[path.extname(abs).toLowerCase()] || 'application/octet-stream',
+    'cache-control': 'no-cache',
+  });
+  createReadStream(abs).on('error', () => res.destroy()).pipe(res);
+});
+
+server.on('error', (error) => {
+  if (error.code === 'EADDRINUSE') {
+    console.error(`[static] el puerto ${port} esta ocupado; pasá otro: node static-server.mjs <dir> <puerto>`);
+  } else {
+    console.error(`[static] ${error.message}`);
+  }
+  process.exit(1);
+});
+
+server.listen(port, host, () => {
+  console.log(`[static] http://${host}:${port} → ${root}`);
+});
+
+const shutdown = () => server.close(() => process.exit(0));
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/tamnora",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Harness local para IAs: agente CLI-first con TUI, consola web y evaluacion. Node puro, sin dependencias.",
   "type": "module",
   "packageManager": "pnpm@11.25.0",