@danieltmn/tamnora 0.11.2 → 0.12.0

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();
@@ -427,6 +431,7 @@ const providerSelect = $('#provider');
 const modelSelect = $('#model');
 const modeSelect = $('#mode');
 const yesInput = $('#yes');
+const strictInput = $('#strict-scope');
 
 async function loadModes() {
   const data = await api('/api/modes').catch(() => ({ modes: [] }));
@@ -441,6 +446,7 @@ async function loadModes() {
   const settings = await api('/api/settings').catch(() => null);
   const active = settings?.settings?.mode || 'agent';
   if ([...modeSelect.options].some((o) => o.value === active)) modeSelect.value = active;
+  if (strictInput) strictInput.checked = settings?.settings?.strictScope === true;
   defaultCwdCache = settings?.settings?.defaultCwd || '';
   if (!defaultCwdCache) {
     // Migración: la carpeta predeterminada vivía en localStorage; la subimos al
@@ -545,6 +551,9 @@ document.addEventListener('keydown', (event) => {
 });
 modelPill?.addEventListener('click', () => openSettingsModal());
 yesInput?.addEventListener('change', renderModePill);
+strictInput?.addEventListener('change', () =>
+  api('/api/settings', { method: 'PUT', body: { strictScope: strictInput.checked } }).catch(() => null)
+);
 
 function updateStatus(extra = {}) {
   renderModePill();
@@ -663,7 +672,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);
@@ -1053,6 +1061,7 @@ const ACTIVITY = {
   thinking: { cls: 'loader-thinking', label: 'pensando…' },
   working: { cls: 'loader-working', label: 'trabajando…' },
   reconnecting: { cls: 'loader-working', label: 'reconectando…' },
+  stopping: { cls: 'loader-working', label: 'deteniendo…' },
 };
 
 const footerActivityEl = $('#sb-activity');
@@ -1573,10 +1582,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 +1616,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 +1633,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
@@ -2522,11 +2532,21 @@ async function sendMessage() {
 }
 
 if (stopBtn) {
-  stopBtn.addEventListener('click', () => {
+  stopBtn.addEventListener('click', async () => {
     const id = state.sessionId;
-    if (id) api(`/api/sessions/${id}/stop`, { method: 'POST' }).catch(() => {});
-    const controller = controllers.get(id);
-    if (controller) controller.abort();
+    if (!id || stopBtn.disabled) return;
+    stopBtn.disabled = true;
+    renderFooterActivity('stopping');
+    // Abortamos el stream local (corta el seguimiento ya) y pedimos al server que
+    // aborte el run: sin esto el run es durable y seguiria generando.
+    controllers.get(id)?.abort();
+    try {
+      await api(`/api/sessions/${id}/stop`, { method: 'POST' });
+    } catch (error) {
+      toast(`No se pudo detener el run: ${error.message}`);
+    } finally {
+      stopBtn.disabled = false;
+    }
   });
 }
 
@@ -4931,7 +4951,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 +4967,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 +5004,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 +5041,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 +5053,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 +5090,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.2</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.12.0</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>
@@ -483,6 +486,9 @@
               <label class="check" title="aprobar automáticamente tools con permiso ask">
                 <input id="yes" type="checkbox" /> Aprobar automáticamente las tools (auto)
               </label>
+              <label class="check" title="el agente hace exactamente lo pedido, sin mejoras ni cambios fuera del pedido">
+                <input id="strict-scope" type="checkbox" /> Hacer solo lo pedido (estricto)
+              </label>
             </div>
           </div>
           <div class="row">

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/src/lib/agentRun.js

@@ -2,7 +2,7 @@
 // subagentes). La creacion de tools y el onEvent de cada canal siguen siendo
 // propios (los canales de salida son distintos); lo combinable vive aca.
 
-import { summarizeToolCall, previewToolResult } from './core.js';
+import { summarizeToolCall, previewToolResult, liveHistory } from './core.js';
 
 const FAILED_RE = /^Error|^Permiso denegado/i;
 
@@ -21,16 +21,15 @@ export function toolCallPayload(event) {
  * `approve` es el callback de aprobacion de las tools de administraación.
  */
 export function combineToolset({ local, admin = null, tasks = null, exposeAdmin = false, approve = null }) {
+  const adminAllowed = (name) => Boolean(admin?.handles(name)) && (exposeAdmin || admin.readOnly?.has(name));
   const definitions = [
     ...local.definitions,
-    ...(exposeAdmin && admin ? admin.definitions : []),
+    ...(admin ? admin.definitions.filter((d) => adminAllowed(d.function.name)) : []),
     ...(tasks ? tasks.definitions : []),
   ];
   const execute = (name, args, context) => {
     if (tasks?.handles(name)) return tasks.execute(name, args);
-    if (exposeAdmin && admin?.handles(name)) {
-      return admin.execute(name, args, approve ? { approve } : undefined);
-    }
+    if (adminAllowed(name)) return admin.execute(name, args, approve ? { approve } : undefined);
     return local.execute(name, args, context);
   };
   return { definitions, execute };
@@ -67,12 +66,13 @@ export async function composeAgentMessages({ ctx, cwd, mode, history = [], userM
   const basePrompt = await ctx.systemPromptFor(cwd);
   const goal = sessionRecord?.meta?.goal;
   const summary = sessionRecord?.meta?.summary;
+  // Historial vigente: sin el asesor y sin lo ya resumido (si hay cursor).
+  const live = liveHistory(history, sessionRecord?.meta?.summaryCursor ?? null);
   return [
     { role: 'system', content: mode.systemPrompt ? `${basePrompt}\n\n${mode.systemPrompt}` : basePrompt },
     ...(goal ? [{ role: 'system', content: `Objetivo de la sesión: ${goal}` }] : []),
     ...(summary ? [{ role: 'system', content: `Resumen de la conversación anterior:\n${summary}` }] : []),
-    // El asesor no contamina el contexto del modelo: es una capa de comentario.
-    ...history.filter((message) => message.name !== 'advisor'),
+    ...live,
     userMessage,
   ];
 }