@danieltmn/tamnora 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -5,6 +5,22 @@ 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.11.3] - 2026-10-09
+
+### Cambios
+
+- feat(consola): sidebar, estructura y vista previa de codigo
+- docs(website): iconos y logo en la landing (favicon + header/footer)
+
+## [0.11.2] - 2026-10-09
+
+### Arreglado
+
+- **CI en Node 22**: el backoff de `withRetry` usaba un timer `unref`, que dejaba
+  que el event loop se vaciara y `node:test` cancelara los tests de
+  `resilience.test.js` ("Promise resolution is still pending..."). Se quito el
+  `unref`: ahora el reintento mantiene el loop vivo y la suite pasa en Node 22.
+
 ## [0.11.1] - 2026-10-09
 
 ### Arreglado

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

@@ -26,8 +26,10 @@ export function isRetryableError(err) {
 
 function sleep(ms, signal) {
   return new Promise((resolve, reject) => {
+    // Sin `unref`: en Node 22 un timer sin referencias deja que el event loop se
+    // vacíe y `node:test` cancela los tests ("Promise resolution is still
+    // pending..."). Si abortan, el listener de abajo lo limpia.
     const timer = setTimeout(resolve, ms);
-    timer.unref?.();
     if (!signal) return;
     if (signal.aborted) {
       clearTimeout(timer);

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

@@ -1,6 +1,6 @@
 // Tamnora console — dependency-free client for the harness server (terminal theme).
 
-import { renderMarkdown, speechText } from './markdown.js';
+import { renderMarkdown, speechText, highlight } from './markdown.js';
 import { streamSse, followRun } from './runStream.js';
 import { diffState, pollDelayMs, localState, summarizeArgs } from './reconcile.js';
 
@@ -21,8 +21,10 @@ const state = {
   panes: new Map(),
   tabOrder: [],
   activeTab: null,
-  collapsedGroups: new Set(),
   queues: new Map(),
+  // Grupos de sesiones abiertos a mano. Arranca vacio y NO se persiste: el
+  // sidebar siempre empieza con todas las carpetas sin expandir.
+  expandedGroups: new Set(),
   // Sesiones con un run vivo segun el canal global de eventos. El sidebar lo
   // usa para el punto de actividad antes de abrir la sesion.
   remoteActive: new Set(),
@@ -173,6 +175,7 @@ const storage = {
 const moreTab = $('#more-tab');
 const moreMenu = $('#more-menu');
 const moreTabLabel = $('#more-tab-label');
+const topbarSection = $('#topbar-section');
 
 const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
 
@@ -186,6 +189,7 @@ function activateTab(name) {
     .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;
+  if (topbarSection) topbarSection.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();
@@ -663,7 +667,6 @@ function initLayout() {
   const widths = storage.getJson('tamnora-panel-widths', {}) || {};
   if (Number(widths.sidebar)) panels.sidebar.width = Math.min(panels.sidebar.max, Math.max(panels.sidebar.min, widths.sidebar));
   if (Number(widths.explorer)) panels.explorer.width = Math.min(panels.explorer.max, Math.max(panels.explorer.min, widths.explorer));
-  state.collapsedGroups = new Set(storage.getJson('tamnora-collapsed-groups', []) || []);
   // En movil el panel arranca cerrado (drawer); en desktop, la preferencia guardada.
   applyPanelWidths();
   attachResizer(panels.sidebar);
@@ -1573,10 +1576,6 @@ function basename(p) {
   return text.split(/[\\/]/).pop() || text;
 }
 
-function persistCollapsedGroups() {
-  storage.setJson('tamnora-collapsed-groups', [...state.collapsedGroups]);
-}
-
 // Pestañas cerradas desde el último reporte: para que el server las olvide ya,
 // sin esperar el TTL de presencia.
 const presenceClosed = new Set();
@@ -1611,9 +1610,10 @@ function renderSessions(sessions) {
   for (const [key, items] of groups) {
     const groupLi = el('li', 'session-group');
     const head = el('div', 'group-head');
-    const collapsed = state.collapsedGroups.has(key);
+    const open = state.expandedGroups.has(key);
+    head.classList.toggle('open', open);
     const twisty = el('span', 'tw');
-    twisty.appendChild(icon(collapsed ? 'chevron-right' : 'chevron-down', 14));
+    twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
     head.append(twisty, icon('folder', 15, 'fi'), el('span', 'gname', key ? basename(key) : 'sin carpeta'), el('span', 'gcount', String(items.length)));
     head.title = key || 'sesiones sin carpeta';
     const delGroup = el('button', 'group-del');
@@ -1627,19 +1627,23 @@ function renderSessions(sessions) {
     });
     head.appendChild(delGroup);
     const list = el('ul', 'group-sessions');
-    list.hidden = collapsed;
+    list.hidden = !open;
     head.addEventListener('click', () => {
-      const nowCollapsed = !state.collapsedGroups.has(key);
-      if (nowCollapsed) state.collapsedGroups.add(key);
-      else state.collapsedGroups.delete(key);
-      persistCollapsedGroups();
-      list.hidden = nowCollapsed;
+      const nowOpen = !state.expandedGroups.has(key);
+      if (nowOpen) state.expandedGroups.add(key);
+      else state.expandedGroups.delete(key);
+      head.classList.toggle('open', nowOpen);
+      list.hidden = !nowOpen;
       clear(twisty);
-      twisty.appendChild(icon(nowCollapsed ? 'chevron-right' : 'chevron-down', 14));
+      twisty.appendChild(icon(nowOpen ? 'chevron-down' : 'chevron-right', 14));
     });
     for (const session of items) {
       const li = el('li', `session-item${session.id === state.sessionId ? ' active' : ''}`);
-      li.appendChild(el('span', 'session-title', session.title || '(sin título)'));
+      const main = el('div', 'session-main');
+      main.appendChild(el('span', 'session-title', session.title || '(sin título)'));
+      const meta = [session.provider, session.model].filter(Boolean).join(' / ');
+      if (meta) main.appendChild(el('span', 'session-sub', meta));
+      li.appendChild(main);
       // Punto de actividad: el server lo dice en el listado, y el reconciliador
       // lo mantiene al dia si el run arranca despues de este render. El estado
       // "esperandote a vos" tiene su propio color: un run trabajando en otra
@@ -4931,7 +4935,7 @@ 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 filePreviewState = { current: null, kind: null, lang: null, loaded: false, open: false, content: '' };
 
 const filePreviewTools = setupPreviewTools({
   container: $('#file-modal'),
@@ -4947,6 +4951,36 @@ function filePreviewKind(name) {
   return null;
 }
 
+const CODE_LANGS = {
+  js: 'js', mjs: 'js', cjs: 'js', jsx: 'js',
+  ts: 'ts', tsx: 'ts',
+  json: 'json',
+  css: 'css',
+  html: 'html', htm: 'html',
+  xml: 'xml', svg: 'xml',
+  yml: 'yaml', yaml: 'yaml',
+  sh: 'bash', bash: 'bash',
+  py: 'python',
+};
+
+function filePreviewLang(name) {
+  const ext = String(name ?? '').split('.').pop().toLowerCase();
+  return CODE_LANGS[ext] || null;
+}
+
+function renderCodeView(content, lang) {
+  const gutter = $('#file-gutter');
+  const node = $('#file-content');
+  if (!lang) {
+    node.textContent = content;
+    if (gutter) gutter.textContent = '';
+    return;
+  }
+  const lines = content.replace(/\r\n?/g, '\n').split('\n');
+  if (gutter) gutter.textContent = lines.map((_, i) => i + 1).join('\n');
+  node.innerHTML = highlight(content, lang);
+}
+
 async function openFilePreview(relPath, name) {
   const params = new URLSearchParams({ root: state.cwd, path: relPath });
   const data = await api(`/api/files/content?${params}`).catch((error) => {
@@ -4954,31 +4988,36 @@ async function openFilePreview(relPath, name) {
     return null;
   });
   if (!data) return;
+  const code = $('#file-code');
+  const lang = filePreviewLang(name);
+  filePreviewState.current = { relPath, name };
+  filePreviewState.kind = filePreviewKind(name);
+  filePreviewState.lang = lang;
+  filePreviewState.loaded = false;
+  filePreviewState.open = false;
+  filePreviewState.content = data.content;
+
   $('#file-title').textContent = name;
-  $('#file-meta').textContent = `${data.size} bytes`;
-  $('#file-content').textContent = data.content;
+  $('#file-meta').textContent = lang ? `${data.size} bytes · ${lang}` : `${data.size} bytes`;
+  renderCodeView(data.content, lang);
+  code.classList.toggle('has-lang', Boolean(lang));
 
   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;
+  maxButton.hidden = false;
   $('#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');
+  code.hidden = false;
+  filePreviewTools.setMax(false);
   filePreviewTools.applyDevice();
 
   modal.showModal();
@@ -4986,7 +5025,7 @@ async function openFilePreview(relPath, name) {
 
 $('#file-preview-toggle')?.addEventListener('click', async () => {
   const toggle = $('#file-preview-toggle');
-  const content = $('#file-content');
+  const code = $('#file-code');
   const stage = $('#file-stage');
   const frame = $('#file-frame');
   const render = $('#file-render');
@@ -4998,22 +5037,22 @@ $('#file-preview-toggle')?.addEventListener('click', async () => {
   filePreviewState.open = !filePreviewState.open;
   const off = () => {
     toggle.textContent = 'vista previa';
-    content.hidden = false;
+    code.hidden = false;
     stage.hidden = true;
     render.hidden = true;
     device.hidden = true;
-    maxButton.hidden = true;
+    maxButton.hidden = false;
     $('#file-modal').classList.remove('preview-maximized');
   };
   if (!filePreviewState.open) return off();
 
   if (filePreviewState.kind === 'markdown') {
     render.innerHTML = renderMarkdown(filePreviewState.content);
-    content.hidden = true;
+    code.hidden = true;
     stage.hidden = true;
     render.hidden = false;
     device.hidden = true;
-    maxButton.hidden = true;
+    maxButton.hidden = false;
     toggle.textContent = 'ver código';
     return;
   }
@@ -5035,7 +5074,7 @@ $('#file-preview-toggle')?.addEventListener('click', async () => {
     filePreviewTools.applyDevice();
   }
   toggle.textContent = 'ver código';
-  content.hidden = true;
+  code.hidden = true;
   render.hidden = true;
   stage.hidden = false;
 });

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

@@ -37,7 +37,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span class="ver">v0.11.1</span></div>
+      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.11.3</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -350,7 +350,10 @@
                 </button>
               </div>
             </div>
-            <pre id="file-content" class="file-preview"></pre>
+            <div id="file-code" class="code-view">
+              <pre id="file-gutter" class="code-gutter" aria-hidden="true"></pre>
+              <pre id="file-content" class="file-preview"></pre>
+            </div>
             <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>

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

@@ -25,6 +25,9 @@ function normalizeLang(lang) {
   if (value === 'javascript' || value === 'mjs' || value === 'cjs') return 'js';
   if (value === 'shell' || value === 'zsh' || value === 'console') return 'bash';
   if (value === 'yml' || value === 'yaml') return 'yaml';
+  if (value === 'htm') return 'html';
+  if (value === 'svg') return 'xml';
+  if (value === 'scss' || value === 'less') return 'css';
   return value;
 }
 
@@ -32,9 +35,8 @@ function wrap(cls, text) {
   return `<span class="${cls}">${escapeHtml(text)}</span>`;
 }
 
-/** Minimal tokenizer: comments, strings, numbers and keywords. Best effort. */
-export function highlight(code, lang) {
-  const language = normalizeLang(lang);
+/** Tokenizer generico: comentarios, strings, numeros y keywords. Best effort. */
+function highlightCode(code, language) {
   const keywords = new Set((KEYWORDS[language] ?? '').split(/\s+/).filter(Boolean));
   const pattern =
     /(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d[\d._]*\b)|([A-Za-z_$][\w$]*)/g;
@@ -55,6 +57,58 @@ export function highlight(code, lang) {
   return out + escapeHtml(code.slice(last));
 }
 
+/** Resaltado de HTML/XML: comentarios, tags, atributos y strings. */
+function highlightMarkup(code) {
+  const pattern =
+    /(<!--[\s\S]*?-->)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(<\/?)([A-Za-z][\w:.-]*)|([A-Za-z_:][-A-Za-z0-9_:.]*)(?=\s*=)|(\/?>)/g;
+  let out = '';
+  let last = 0;
+  let match;
+  while ((match = pattern.exec(code))) {
+    out += escapeHtml(code.slice(last, match.index));
+    const [full, comment, str, bracket, tag, attr, close] = match;
+    if (comment) out += wrap('tok-comment', comment);
+    else if (str) out += wrap('tok-string', str);
+    else if (bracket) out += wrap('tok-punct', bracket) + (tag ? wrap('tok-tag', tag) : '');
+    else if (attr) out += wrap('tok-attr', attr);
+    else if (close) out += wrap('tok-punct', close);
+    else out += escapeHtml(full);
+    last = match.index + full.length;
+  }
+  return out + escapeHtml(code.slice(last));
+}
+
+/** Resaltado de CSS: comentarios, selectores, propiedades, at-rules y valores. */
+function highlightCss(code) {
+  const pattern =
+    /(\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(@[A-Za-z-]+)|(#[0-9a-fA-F]{3,8}\b)|(\b-?\d[\d.]*(?:px|em|rem|%|vh|vw|vmin|vmax|s|ms|fr|deg|ch|pt|ex)?\b)|([.#][A-Za-z_][\w-]*)|([-\w]+)(?=\s*:)/g;
+  let out = '';
+  let last = 0;
+  let match;
+  while ((match = pattern.exec(code))) {
+    out += escapeHtml(code.slice(last, match.index));
+    const [full, comment, str, at, color, num, selector, prop] = match;
+    if (comment) out += wrap('tok-comment', full);
+    else if (str) out += wrap('tok-string', full);
+    else if (at) out += wrap('tok-tag', full);
+    else if (color) out += wrap('tok-number', full);
+    else if (num) out += wrap('tok-number', full);
+    else if (selector) out += wrap('tok-selector', full);
+    else if (prop) out += wrap('tok-attr', full);
+    else out += escapeHtml(full);
+    last = match.index + full.length;
+  }
+  return out + escapeHtml(code.slice(last));
+}
+
+/** Minimal highlighter: best effort, always HTML-escaped. */
+export function highlight(code, lang) {
+  const language = normalizeLang(lang);
+  if (language === 'html' || language === 'xml') return highlightMarkup(code);
+  if (language === 'css') return highlightCss(code);
+  return highlightCode(code, language);
+}
+
 function inline(text) {
   let out = escapeHtml(text);
   const codes = [];

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

@@ -54,6 +54,10 @@ html[data-theme='paper'] .tok-comment { color: #7a7669; }
 html[data-theme='paper'] .tok-string { color: #7a4a2c; }
 html[data-theme='paper'] .tok-number { color: #8a5a00; }
 html[data-theme='paper'] .tok-keyword { color: #a3341f; }
+html[data-theme='paper'] .tok-tag { color: #a3341f; }
+html[data-theme='paper'] .tok-attr { color: #4f6b46; }
+html[data-theme='paper'] .tok-selector { color: #8a5a00; }
+html[data-theme='paper'] .tok-punct { color: #7a7669; }
 html[data-theme='paper'] .btn.primary { color: #fbf6ec; }
 
 * { box-sizing: border-box; }
@@ -118,6 +122,7 @@ pre, code, kbd, samp { font-family: var(--mono); }
 }
 .brand .logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
 .brand .ver { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; }
+.brand .topbar-section { display: none; }
 .tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; }
 .tab {
   background: transparent;
@@ -245,13 +250,16 @@ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
   display: flex;
   align-items: center;
   gap: 7px;
-  padding: 5px 7px;
-  border-radius: 7px;
+  padding: 7px 9px;
+  border-radius: 8px;
   cursor: pointer;
-  color: var(--muted);
+  color: var(--text);
+  border: 1px solid transparent;
+  transition: background 0.12s ease, border-color 0.12s ease;
 }
-.group-head:hover { background: var(--panel); color: var(--text); }
-.group-head .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; }
+.group-head:hover { background: var(--panel); border-color: var(--border); }
+.group-head .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
+.group-head .tw svg { transition: transform 0.15s ease; }
 .group-head .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
 .group-head .gname {
   flex: 1;
@@ -259,27 +267,65 @@ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font: 600 11px var(--sans);
+  font: 600 11.5px var(--sans);
   letter-spacing: 0.02em;
 }
-.group-head .gcount { font: 500 10px var(--mono); opacity: 0.65; }
-.group-sessions { list-style: none; margin: 0; padding: 3px 0 0 15px; display: flex; flex-direction: column; gap: 2px; }
+.group-head .gcount {
+  flex: 0 0 auto;
+  min-width: 18px;
+  padding: 1px 6px;
+  text-align: center;
+  border-radius: 999px;
+  background: var(--theirs);
+  border: 1px solid var(--border);
+  font: 600 10px var(--mono);
+  color: var(--muted);
+}
+.group-sessions {
+  list-style: none;
+  margin: 3px 0 5px 9px;
+  padding: 0 0 0 11px;
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
 .session-item {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 9px;
-  border-radius: 6px;
+  padding: 7px 9px;
+  border-radius: 7px;
   cursor: pointer;
   color: var(--muted);
   white-space: nowrap;
   overflow: hidden;
   border: 1px solid transparent;
+  transition: background 0.12s ease, color 0.12s ease;
 }
 .session-item:hover { background: var(--panel); color: var(--text); }
 .session-item.active { background: var(--theirs); color: var(--text); border-color: var(--border); }
+.session-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 7px;
+  bottom: 7px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--accent);
+}
 .session-item .sub { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
-.session-item .session-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.session-item .session-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.session-item .session-sub {
+  color: var(--muted);
+  font: 500 10.5px var(--mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0.75;
+}
 .session-live {
   flex: none;
   width: 6px;
@@ -1108,6 +1154,10 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
 .tok-string { color: #c2a878; }
 .tok-number { color: #e0a05c; }
 .tok-keyword { color: #e0794f; }
+.tok-tag { color: #e0794f; }
+.tok-attr { color: #8fae7f; }
+.tok-selector { color: #d9a441; }
+.tok-punct { color: #9c9789; }
 
 .composer-status {
   display: flex;
@@ -1343,10 +1393,14 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
 .explorer-filter input { width: 100%; }
 
 .tree { list-style: none; margin: 0; padding: 2px 8px 12px; overflow-y: auto; flex: 1; min-height: 0; }
-.tree .tree { padding: 0 0 0 13px; overflow: visible; }
+/* El subárbol queda oculto salvo que su carpeta esté abierta (clase .open que
+   mantiene el JS). Sin esto, expandir no tenía vuelta atrás. */
+.tree .tree { padding: 0 0 0 13px; overflow: visible; display: none; }
+.tree li.open > .tree { display: block; }
 .tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
 .tree-row:hover { background: var(--theirs); }
 .tree-row .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
+.tree-row .tw svg { transition: transform 0.15s ease; }
 .tree-row .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
 .tree-row.dir .fi { color: var(--accent); }
 .tree-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@@ -1431,6 +1485,42 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
   white-space: pre;
 }
 
+/* Visor de codigo: gutter con numeros de linea + resaltado (estilo VSCode). */
+.code-view {
+  display: flex;
+  align-items: stretch;
+  max-height: 62vh;
+  overflow: auto;
+  background: var(--theirs);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.code-view .file-preview {
+  flex: 1;
+  min-width: 0;
+  max-height: none;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.code-gutter {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 12px 8px 12px 10px;
+  text-align: right;
+  color: var(--muted);
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  font: 12px/1.55 var(--mono);
+  white-space: pre;
+  user-select: none;
+}
+.code-view:not(.has-lang) .code-gutter { display: none; }
+
 .file-render {
   margin: 0;
   padding: 14px 16px;
@@ -1467,10 +1557,12 @@ dialog.file-modal.preview-maximized {
 .file-modal.preview-maximized .modal-card { height: 100vh; }
 .file-modal.preview-maximized .file-stage,
 .file-modal.preview-maximized .file-render,
+.file-modal.preview-maximized .code-view,
 .file-modal.preview-maximized .file-preview {
   flex: 1;
   height: auto;
   max-height: none;
+  min-height: 0;
 }
 
 /* panel heads + collapsed handles ----------------------------------------- */
@@ -1541,6 +1633,18 @@ dialog.file-modal.preview-maximized {
   .brand .ver {
     display: none;
   }
+  .brand .topbar-section {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--accent-soft);
+    color: var(--accent);
+    font: 700 10px var(--sans);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    white-space: nowrap;
+  }
   .tabs {
     margin-left: auto;
     max-width: 100%;
@@ -1549,7 +1653,7 @@ dialog.file-modal.preview-maximized {
     display: none;
   }
   #more-tab-label {
-    display: inline;
+    display: none;
   }
   .menu-pop {
     top: calc(100% + 2px);

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

@@ -64,8 +64,25 @@ test('a lone pipe line without a delimiter row stays a paragraph', () => {
   assert.equal(html, '<p>foo | bar</p>');
 });
 
-test('highlight escapes code content', () => {
-  assert.equal(highlight('a < b', 'bash'), 'a &lt; b');
+test('highlight escapes code content', () => {
+  assert.equal(highlight('a < b', 'bash'), 'a &lt; b');
+});
+
+test('highlight resalta html: tags, atributos, strings y comentarios', () => {
+  const html = highlight('<a href="/x">hola</a><!-- nota -->', 'html');
+  assert.match(html, /tok-tag">a</);
+  assert.match(html, /tok-attr">href</);
+  assert.match(html, /tok-string">&quot;\/x&quot;</);
+  assert.match(html, /tok-comment">&lt;!-- nota --&gt;</);
+  assert.ok(!html.includes('<a '));
+});
+
+test('highlight resalta css: selectores, propiedades, colores y medidas', () => {
+  const css = highlight('.btn { color: #fff; width: 10px; }', 'css');
+  assert.match(css, /tok-selector">\.btn</);
+  assert.match(css, /tok-attr">color</);
+  assert.match(css, /tok-number">#fff</);
+  assert.match(css, /tok-number">10px</);
 });
 
 test('speechText saca bloques de codigo y tablas', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/tamnora",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "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",