@danieltmn/tamnora 0.7.0 → 0.8.0

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

@@ -20,13 +20,14 @@ const state = {
   tabOrder: [],
   activeTab: null,
   collapsedGroups: new Set(),
+  queues: new Map(),
 };
 
 function setCwd(value) {
   if (!value) return;
   state.cwd = value;
   $('#rail-cwd').textContent = value;
-  if (state.explorerOpen) refreshExplorer();
+  if (state.explorerOpen) refreshExplorerMode();
 }
 
 /* --- DOM helpers --------------------------------------------------------- */
@@ -58,6 +59,9 @@ const ICON_PATHS = {
   file: ['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z', 'M14 2v4a2 2 0 0 0 2 2h4'],
   'refresh-cw': ['M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8', 'M21 3v5h-5', 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16', 'M8 16H3v5'],
   trash: ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M10 11v6', 'M14 11v6'],
+  'dots-vertical': ['M12 5h.01', 'M12 12h.01', 'M12 19h.01'],
+  copy: ['M8 8V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3', 'M5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z'],
+  pencil: ['M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z', 'm15 5 4 4'],
 };
 
 function icon(name, size = 16, className = '') {
@@ -523,11 +527,13 @@ function persistLayout() {
   } catch {
     // storage unavailable
   }
+  scheduleScrollNav();
 }
 
 function applyPanelWidths() {
   panels.sidebar.el.style.width = `${panels.sidebar.width}px`;
   panels.explorer.el.style.width = `${panels.explorer.width}px`;
+  scheduleScrollNav();
 }
 
 function attachResizer(panel) {
@@ -609,6 +615,10 @@ function initLayout() {
   mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
 }
 
+// `scrollNavFrame` debe existir antes de `initLayout()`: `applyPanelWidths`
+// llama a `scheduleScrollNav()` durante el arranque (evita el TDZ).
+let scrollNavFrame = 0;
+
 initLayout();
 
 function formatK(n) {
@@ -627,11 +637,13 @@ function renderTokens() {
   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;
+  // El contexto es la ultima ronda (prompt+completion), no el acumulado del run.
+  const used = lastTurn.prompt + lastTurn.completion;
+  const hasContext = context > 0 && used > 0;
+  const pct = hasContext ? 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) {
+  if (!total && !used) {
     if (wrap) wrap.className = 'ctx muted';
     node.textContent = 'tokens —';
     node.title = '';
@@ -640,16 +652,30 @@ function renderTokens() {
   }
   const parts =
     `entrada ${formatK(tokens.in)} · salida ${formatK(tokens.out)}` +
-    (context ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
-  if (context) {
+    (hasContext ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
+  if (hasContext) {
     node.textContent = `contexto ${pct}% · ${formatK(used)}/${formatK(context)}`;
     if (wrap) wrap.className = `ctx ${tone}`;
+  } else if (context) {
+    node.textContent = `contexto — · ${formatK(context)}`;
+    if (wrap) wrap.className = 'ctx muted';
   } else {
     node.textContent = `tokens ${formatK(total)}`;
     if (wrap) wrap.className = 'ctx muted';
   }
   node.title = parts;
-  if (fill) fill.style.width = `${context ? pct : 0}%`;
+  if (fill) fill.style.width = `${hasContext ? pct : 0}%`;
+}
+
+function setContextUsage(tokens) {
+  const record = state.panes.get(state.sessionId);
+  if (record && tokens) {
+    record.lastTurn = {
+      prompt: tokens.last_prompt_tokens ?? 0,
+      completion: tokens.last_completion_tokens ?? 0,
+    };
+    renderTokens();
+  }
 }
 
 function addTokens(tokens) {
@@ -733,12 +759,50 @@ const controllers = new Map();
 const sessionsEl = $('#sessions');
 
 let activePane = blankPane;
+let restorePreviewMax = null;
 const paneOf = (message) => message?.bubble?.closest('.messages') ?? activePane;
 
 const scrollMessages = (pane = activePane) => {
   if (pane) pane.scrollTop = pane.scrollHeight;
 };
 
+const scrollNav = $('#scroll-nav');
+const scrollTopBtn = $('#scroll-top');
+const scrollDownBtn = $('#scroll-down');
+
+/** Muestra/oculta los saltos de scroll según el pane activo. */
+function updateScrollNav() {
+  const pane = activePane;
+  if (!pane) return;
+  const max = pane.scrollHeight - pane.clientHeight;
+  const visible = max > 40;
+  scrollNav.hidden = !visible;
+  if (!visible) return;
+  scrollTopBtn.disabled = pane.scrollTop < 40;
+  scrollDownBtn.disabled = max - pane.scrollTop < 40;
+}
+
+function scheduleScrollNav() {
+  if (scrollNavFrame) return;
+  scrollNavFrame = requestAnimationFrame(() => {
+    scrollNavFrame = 0;
+    updateScrollNav();
+  });
+}
+
+scrollTopBtn.addEventListener('click', () => activePane?.scrollTo({ top: 0, behavior: 'smooth' }));
+scrollDownBtn.addEventListener('click', () =>
+  activePane?.scrollTo({ top: activePane.scrollHeight, behavior: 'smooth' })
+);
+// `scroll` no burbujea: se escucha en captura desde el contenedor de los panes.
+panesEl.addEventListener('scroll', scheduleScrollNav, true);
+window.addEventListener('resize', scheduleScrollNav);
+new MutationObserver(scheduleScrollNav).observe(panesEl, {
+  childList: true,
+  characterData: true,
+  subtree: true,
+});
+
 function addMessage(role, text = '', pane = activePane) {
   pane.querySelector('.empty')?.remove();
   const wrap = el('div', `msg ${role}`);
@@ -755,12 +819,10 @@ function addMessage(role, text = '', pane = activePane) {
   const bubble = el('div', 'bubble');
   const textEl = el('div', 'text');
   const tools = el('div', 'tools');
-  const activity = el('div', 'activity');
-  activity.hidden = true;
-  bubble.append(textEl, tools, activity);
+  bubble.append(textEl, tools);
   wrap.append(label, bubble);
   pane.appendChild(wrap);
-  const message = { role, wrap, bubble, label, modeEl, textEl, tools, activity, reasoningEl: null, id: null };
+  const message = { role, wrap, bubble, label, modeEl, textEl, tools, reasoningEl: null, id: null };
   addMessageActions(message);
   if (text) setText(message, text);
   scrollMessages(pane);
@@ -775,18 +837,90 @@ function setMessageMode(message, modeId) {
   message.modeEl.hidden = false;
 }
 
+let openMessageMenu = null;
+
+/** El menu flota (position: fixed) para no quedar recortado por el scroll. */
+function positionMessageMenu() {
+  if (!openMessageMenu) return;
+  const { menu, trigger } = openMessageMenu;
+  const rect = trigger.getBoundingClientRect();
+  const size = menu.getBoundingClientRect();
+  let top = rect.bottom + 4;
+  if (top + size.height > window.innerHeight - 8) top = Math.max(8, rect.top - size.height - 4);
+  let left = rect.left;
+  if (left + size.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - size.width - 8);
+  menu.style.top = `${top}px`;
+  menu.style.left = `${left}px`;
+}
+
+function closeMessageMenus() {
+  if (!openMessageMenu) return;
+  const current = openMessageMenu;
+  openMessageMenu = null;
+  current.menu.hidden = true;
+  current.trigger.setAttribute('aria-expanded', 'false');
+  current.actions?.appendChild(current.menu);
+}
+
+function toggleMessageMenu(message) {
+  const wasOpen = openMessageMenu === message;
+  closeMessageMenus();
+  if (wasOpen) return;
+  document.body.appendChild(message.menu);
+  message.menu.hidden = false;
+  message.trigger.setAttribute('aria-expanded', 'true');
+  openMessageMenu = message;
+  positionMessageMenu();
+}
+
+document.addEventListener('click', (event) => {
+  if (!openMessageMenu) return;
+  if (event.target.closest('.msg-menu') || event.target.closest('.msg-menu-btn')) return;
+  closeMessageMenus();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeMessageMenus();
+});
+window.addEventListener('resize', positionMessageMenu);
+document.addEventListener('scroll', positionMessageMenu, true);
+
 function addMessageActions(message) {
   const actions = el('div', 'msg-actions');
-  actions.appendChild(button('copiar', () => copyMessage(message), 'msg-act'));
-  if (message.role === 'assistant') {
-    actions.appendChild(button('regenerar', () => regenerate(message), 'msg-act'));
-  }
-  if (message.role === 'user') {
-    actions.appendChild(button('editar', () => editMessage(message), 'msg-act'));
-  }
-  actions.appendChild(button('borrar desde acá', () => deleteFrom(message), 'msg-act danger'));
+  const trigger = el('button', 'msg-menu-btn');
+  trigger.type = 'button';
+  trigger.appendChild(icon('dots-vertical', 16));
+  trigger.title = 'opciones del mensaje';
+  trigger.setAttribute('aria-haspopup', 'menu');
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-label', 'opciones del mensaje');
+  trigger.addEventListener('click', () => toggleMessageMenu(message));
+
+  const menu = el('div', 'msg-menu');
+  menu.hidden = true;
+  menu.setAttribute('role', 'menu');
+  const addItem = (label, run, iconName, cls = 'msg-act') => {
+    const item = el('button', cls);
+    item.type = 'button';
+    item.setAttribute('role', 'menuitem');
+    if (iconName) item.appendChild(icon(iconName, 15, 'mi'));
+    item.appendChild(el('span', 'mlabel', label));
+    item.addEventListener('click', () => {
+      closeMessageMenus();
+      run();
+    });
+    menu.appendChild(item);
+  };
+  addItem('copiar', () => copyMessage(message), 'copy');
+  if (message.role === 'assistant') addItem('regenerar', () => regenerate(message), 'refresh-cw');
+  if (message.role === 'user') addItem('editar', () => editMessage(message), 'pencil');
+  menu.appendChild(el('div', 'msg-menu-sep'));
+  addItem('borrar desde acá', () => deleteFrom(message), 'trash', 'msg-act danger');
+
+  actions.append(trigger, menu);
   message.bubble.appendChild(actions);
   message.actions = actions;
+  message.menu = menu;
+  message.trigger = trigger;
 }
 
 function messageId(message) {
@@ -857,17 +991,25 @@ const ACTIVITY = {
   waiting: { cls: 'loader-thinking', label: 'esperando aprobación…' },
 };
 
-function setActivity(message, kind) {
-  if (!message.activity) return;
+const footerActivityEl = $('#sb-activity');
+
+/** El indicador de "pensando/trabajando" vive en el footer (una sola vez). */
+function renderFooterActivity(kind) {
+  if (!footerActivityEl) return;
   if (!kind) {
-    message.activity.hidden = true;
-    message.activity.replaceChildren();
+    footerActivityEl.hidden = true;
+    footerActivityEl.replaceChildren();
     return;
   }
-  const def = ACTIVITY[kind];
-  message.activity.hidden = false;
-  message.activity.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
-  scrollMessages(paneOf(message));
+  const def = ACTIVITY[kind] ?? ACTIVITY.thinking;
+  footerActivityEl.hidden = false;
+  footerActivityEl.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
+}
+
+function setActivity(message, kind) {
+  // Solo el turno de la sesion activa refleja su actividad en el footer.
+  if (paneOf(message) !== activePane) return;
+  renderFooterActivity(kind);
 }
 
 function setText(message, text) {
@@ -1336,6 +1478,8 @@ function showPane(id) {
   for (const item of state.panes.values()) item.el.hidden = item.id !== id;
   blankPane.hidden = Boolean(record);
   activePane = record ? record.el : blankPane;
+  renderFooterActivity(record?.working ? 'thinking' : null);
+  scheduleScrollNav();
 }
 
 function renderTabs() {
@@ -1387,16 +1531,25 @@ function activateSession(id) {
   auditStatus(record);
   updateStatus();
   renderTokens();
+  renderQueue(id);
   renderTabs();
   refreshSessions();
   persistTabs();
   chatInput.focus();
 }
 
+function updateSubmitLabel(working) {
+  if (!submitBtn) return;
+  submitBtn.textContent = working ? 'encolar' : 'enviar';
+  submitBtn.title = working ? 'El agente está trabajando: se envía al terminar' : '';
+}
+
 function auditStatus(record) {
-  submitBtn.disabled = record.working;
-  $('#sb-rounds').textContent = record.working ? 'pensando…' : 'listo';
+  submitBtn.disabled = false;
+  updateSubmitLabel(record.working);
+  $('#sb-rounds').textContent = record.working ? '' : 'listo';
   $('#sb-rounds').classList.toggle('running', record.working);
+  renderFooterActivity(record.working ? 'thinking' : null);
 }
 
 function closeTab(id) {
@@ -1404,6 +1557,7 @@ function closeTab(id) {
   if (!record) return;
   record.el.remove();
   state.panes.delete(id);
+  state.queues.delete(id);
   state.tabOrder = state.tabOrder.filter((item) => item !== id);
   if (state.activeTab === id) {
     const next = state.tabOrder[state.tabOrder.length - 1] ?? null;
@@ -1428,6 +1582,7 @@ function refreshTokensDefaults() {
   $('#sb-rounds').textContent = 'listo';
   $('#sb-rounds').classList.remove('running');
   submitBtn.disabled = false;
+  updateSubmitLabel(false);
 }
 
 function setWorking(id, working) {
@@ -1435,10 +1590,12 @@ function setWorking(id, working) {
   if (record) record.working = working;
   renderTabs();
   if (id === state.sessionId) {
-    submitBtn.disabled = working;
+    submitBtn.disabled = false;
+    updateSubmitLabel(working);
     if (stopBtn) stopBtn.hidden = !working;
-    $('#sb-rounds').textContent = working ? 'pensando.' : 'listo';
+    $('#sb-rounds').textContent = working ? '' : 'listo';
     $('#sb-rounds').classList.toggle('running', working);
+    renderFooterActivity(working ? 'thinking' : null);
   }
 }
 
@@ -1665,6 +1822,8 @@ function handleChatEvent(event, data, turn) {
     turn.assistant().tools.appendChild(el('div', 'chip', `✂ contexto recortado (${data.trimmed} resultados, ${data.dropped} mensajes)`));
   } else if (event === 'repeat') {
     turn.assistant().tools.appendChild(el('div', 'chip warn', `↻ ${data.name} repetida sin cambios`));
+  } else if (event === 'usage') {
+    setContextUsage(data.tokens);
   } else if (event === 'warning') {
     turn.assistant().tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
   } else if (event === 'error') {
@@ -1731,46 +1890,14 @@ async function attachRun(sessionKey, pane) {
   }
 }
 
-async function sendMessage() {
-  const current = state.panes.get(state.sessionId);
-  if (current?.working) return;
-  hideSlashMenu();
-  let input = chatInput.value.trim();
-  const images = state.attachments.slice();
-  if (input.startsWith('/') && !images.length) {
-    const name = input.slice(1).split(/\s+/)[0].toLowerCase();
-    const arg = input.slice(1 + name.length).trim();
-    const outcome = await runCommand(name, arg);
-    if (!outcome || outcome.handled) {
-      chatInput.value = '';
-      return;
-    }
-    input = outcome.input ?? input;
-  }
-  if (!input && !images.length) return;
-  if (!state.sessionId) {
-    state.pendingInput = input;
-    openFolderPicker();
-    return;
-  }
-
-  if (state.pendingEdit) {
-    await api(`/api/sessions/${state.sessionId}/truncate`, {
-      method: 'POST',
-      body: { fromId: state.pendingEdit.fromId },
-    }).catch(() => {});
-    await reloadPane(state.sessionId);
-    state.pendingEdit = null;
-  }
+function contextTokensForRequest() {
+  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+  return context ? Math.floor(context * 0.8) : undefined;
+}
 
-  const pane = activePane;
-  const sessionKey = state.sessionId;
+async function startTurn(sessionKey, pane, input, images) {
   const user = addMessage('user', input || `(${images.length} imagen${images.length > 1 ? 'es' : ''})`, pane);
   appendImages(user, images);
-  chatInput.value = '';
-  state.attachments = [];
-  renderAttachments();
-
   const turn = createChatTurn(pane, sessionKey);
   turn.active = addMessage('assistant', '', pane);
   setMessageMode(turn.active, turn.turnMode);
@@ -1784,15 +1911,12 @@ async function sendMessage() {
       {
         input: input || '(imagen adjunta)',
         images: images.length ? images : undefined,
-        sessionId: state.sessionId || undefined,
+        sessionId: sessionKey,
         provider: providerSelect.value || undefined,
         model: modelSelect.value || undefined,
         mode: modeSelect.value || undefined,
         yes: yesInput.checked ? true : undefined,
-        contextTokens: (() => {
-          const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
-          return context ? Math.floor(context * 0.8) : undefined;
-        })(),
+        contextTokens: contextTokensForRequest(),
       },
       (event, data) => handleChatEvent(event, data, turn),
       controller.signal
@@ -1817,7 +1941,140 @@ async function sendMessage() {
     setActivity(turn.active, null);
     setWorking(sessionKey, false);
     refreshSessions();
+    drainQueue(sessionKey);
+  }
+}
+
+/* --- cola de mensajes (enviar mientras el agente trabaja) ----------------- */
+
+function queueFor(sessionKey, create = false) {
+  if (!state.queues.has(sessionKey)) {
+    if (!create) return [];
+    state.queues.set(sessionKey, []);
+  }
+  return state.queues.get(sessionKey);
+}
+
+function enqueueMessage(sessionKey, input, images) {
+  queueFor(sessionKey, true).push({ id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, input, images });
+  renderQueue(sessionKey);
+}
+
+function renderQueue(sessionKey = state.sessionId) {
+  const queueEl = $('#chat-queue');
+  if (!queueEl || sessionKey !== state.sessionId) return;
+  clear(queueEl);
+  const items = queueFor(sessionKey);
+  queueEl.hidden = !items.length;
+  if (!items.length) return;
+  queueEl.appendChild(el('div', 'queue-label', `en cola (${items.length})`));
+  for (const item of items) {
+    const row = el('div', 'queue-item');
+    const text = item.input || `(${item.images.length} imagen${item.images.length > 1 ? 'es' : ''})`;
+    row.append(el('span', 'queue-text', text));
+    row.appendChild(
+      button('✕', () => {
+        const list = queueFor(sessionKey);
+        const index = list.findIndex((entry) => entry.id === item.id);
+        if (index >= 0) list.splice(index, 1);
+        renderQueue(sessionKey);
+      }, 'queue-remove')
+    );
+    queueEl.appendChild(row);
+  }
+}
+
+function drainQueue(sessionKey) {
+  const record = state.panes.get(sessionKey);
+  if (!record || record.working) return;
+  const list = queueFor(sessionKey);
+  if (!list.length) return;
+  const next = list.shift();
+  renderQueue(sessionKey);
+  startTurn(sessionKey, record.el, next.input, next.images);
+}
+
+/* --- shell directo con "!" ------------------------------------------------ */
+
+async function runShell(command) {
+  const record = state.panes.get(state.sessionId);
+  const pane = activePane ?? record?.el;
+  if (!pane) return;
+  addMessage('user', `! ${command}`, pane);
+  const message = addMessage('assistant', '', pane);
+  message.textEl.appendChild(el('pre', 'shell-out', 'ejecutando…'));
+  const data = await api('/api/shell', {
+    method: 'POST',
+    body: { command, cwd: record?.cwd || state.cwd || undefined },
+  }).catch((error) => ({ error: error.message }));
+  if (data?.error) {
+    message.textEl.textContent = '';
+    message.textEl.classList.add('notice', 'err');
+    message.textEl.textContent = data.error;
+    return;
   }
+  message.textEl.textContent = '';
+  const pre = el('pre', 'shell-out');
+  pre.textContent = (data.output || '').trim() || '(sin salida)';
+  message.textEl.appendChild(pre);
+  scheduleScrollNav();
+}
+
+async function sendMessage() {
+  const current = state.panes.get(state.sessionId);
+  hideSlashMenu();
+  let input = chatInput.value.trim();
+  const images = state.attachments.slice();
+
+  // "!" ejecuta un comando de shell directo, sin pasar por el modelo.
+  if (input.startsWith('!')) {
+    const command = input.slice(1).trim();
+    chatInput.value = '';
+    state.attachments = [];
+    renderAttachments();
+    if (command) runShell(command);
+    return;
+  }
+
+  if (input.startsWith('/') && !images.length) {
+    const name = input.slice(1).split(/\s+/)[0].toLowerCase();
+    const arg = input.slice(1 + name.length).trim();
+    const outcome = await runCommand(name, arg);
+    if (!outcome || outcome.handled) {
+      chatInput.value = '';
+      return;
+    }
+    input = outcome.input ?? input;
+  }
+  if (!input && !images.length) return;
+  if (!state.sessionId) {
+    state.pendingInput = input;
+    openFolderPicker();
+    return;
+  }
+
+  // Si el agente está trabajando, el mensaje queda en cola y se envía solo.
+  if (current?.working) {
+    enqueueMessage(state.sessionId, input, images);
+    chatInput.value = '';
+    state.attachments = [];
+    renderAttachments();
+    return;
+  }
+
+  if (state.pendingEdit) {
+    await api(`/api/sessions/${state.sessionId}/truncate`, {
+      method: 'POST',
+      body: { fromId: state.pendingEdit.fromId },
+    }).catch(() => {});
+    await reloadPane(state.sessionId);
+    state.pendingEdit = null;
+  }
+
+  chatInput.value = '';
+  state.attachments = [];
+  renderAttachments();
+  await startTurn(state.sessionId, activePane, input, images);
 }
 
 if (stopBtn) {
@@ -1937,6 +2194,7 @@ const COMMANDS = [
   ['/compact', 'resumir la conversación y liberar contexto'],
   ['/clear', 'borrar los mensajes de esta sesión'],
   ['/cwd', 'mostrar la carpeta de trabajo'],
+  ['/kill <puerto>', 'matar el proceso que escucha en un puerto'],
   ['/help', 'mostrar esta ayuda'],
 ];
 
@@ -1977,6 +2235,21 @@ async function runCommand(name, arg) {
       notify(`Carpeta de trabajo: \`${cwd}\``);
       return { handled: true };
     }
+    case 'kill': {
+      const port = Number(arg);
+      if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        notify('Uso: `/kill <puerto>`, por ejemplo `/kill 3000`.', 'notice err');
+        return { handled: true };
+      }
+      const out = await api('/api/procs/kill', { method: 'POST', body: { port } }).catch((error) => ({
+        error: error.message,
+      }));
+      if (out.error) notify(`No se pudo matar el puerto ${port}: ${out.error}`, 'notice err');
+      else if (!out.pids.length) notify(`No hay ningún proceso escuchando en el puerto ${port}.`);
+      else if (out.killed.length) notify(`Puerto ${port}: maté el PID ${out.killed.join(', ')}.`);
+      else notify(`Puerto ${port}: no se pudo matar (PID ${out.errors.join(', ')}).`, 'notice err');
+      return { handled: true };
+    }
     case 'clear':
     case 'limpiar': {
       if (!state.sessionId) return needSession();
@@ -3096,6 +3369,7 @@ function setExplorerOpen(open) {
   state.explorerOpen = open;
   explorer.hidden = !open;
   panels.explorer.resizer.hidden = !open;
+  if (!open) restorePreviewMax?.();
   const handle = $('#explorer-handle');
   if (handle) {
     handle.hidden = open;
@@ -3333,7 +3607,7 @@ $('#file-preview-toggle')?.addEventListener('click', async () => {
 
 /* --- explorer panes: estructura / preview / procs ------------------------- */
 
-const xpPanes = { files: $('#xp-files'), preview: $('#xp-preview'), procs: $('#xp-procs') };
+const xpPanes = { files: $('#xp-files'), preview: $('#xp-preview'), procs: $('#xp-procs'), git: $('#xp-git') };
 let explorerMode = 'files';
 
 function setExplorerMode(mode) {
@@ -3347,6 +3621,7 @@ function refreshExplorerMode() {
   if (!state.explorerOpen) return;
   if (explorerMode === 'files') refreshExplorer();
   else if (explorerMode === 'procs') detectProcs();
+  else if (explorerMode === 'git') refreshGit();
 }
 
 document.querySelectorAll('.xtab').forEach((tab) => tab.addEventListener('click', () => setExplorerMode(tab.dataset.xp)));
@@ -3363,14 +3638,23 @@ function setPreviewStatus(text, isError = false) {
 }
 
 /* Ancho por dispositivo + maximizar, compartido por preview y visor de archivos. */
-function setupPreviewTools({ container, stage, frame, select, maxButton }) {
+function setupPreviewTools({ container, stage, frame, select, maxButton, teleport = false }) {
   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);
+  // El panel del explorador usa `backdrop-filter`, que crea un containing block
+  // y dejaria el `position: fixed` encerrado en la barra. Al maximizar movemos
+  // el contenedor a `body` y lo devolvemos a su lugar al restaurar.
+  const home = teleport ? container?.parentNode : null;
+  const homeAfter = teleport ? container?.nextSibling : null;
   const setMax = (on) => {
+    if (teleport && container && home) {
+      if (on) document.body.appendChild(container);
+      else if (!home.contains(container)) home.insertBefore(container, homeAfter ?? null);
+    }
     container?.classList.toggle('preview-maximized', on);
     maxButton?.setAttribute('aria-pressed', String(on));
     if (maxButton) maxButton.title = on ? 'restaurar' : 'maximizar';
@@ -3388,7 +3672,9 @@ const previewTools = setupPreviewTools({
   frame: previewFrame,
   select: $('#preview-device'),
   maxButton: $('#preview-max'),
+  teleport: true,
 });
+restorePreviewMax = () => previewTools.setMax(false);
 previewTools.applyDevice();
 
 function loadPreview(url) {
@@ -3497,6 +3783,150 @@ async function refreshProcLog() {
 
 $('#procs-detect')?.addEventListener('click', detectProcs);
 
+/* git: estado del árbol de trabajo y diffs */
+
+const gitListEl = $('#git-list');
+const gitBranchEl = $('#git-branch');
+const gitSyncEl = $('#git-sync');
+const gitStatusEl = $('#git-status');
+const gitFilterEl = $('#git-filter');
+const gitModalEl = $('#git-modal');
+const gitDiffEl = $('#git-diff');
+const gitTitleEl = $('#git-title');
+const gitMetaEl = $('#git-meta');
+let gitEntries = [];
+
+const GIT_BADGES = {
+  modified: { letter: 'M', cls: 'mod' },
+  added: { letter: 'A', cls: 'add' },
+  deleted: { letter: 'D', cls: 'del' },
+  renamed: { letter: 'R', cls: 'ren' },
+  untracked: { letter: 'U', cls: 'new' },
+  conflicted: { letter: 'C', cls: 'conf' },
+  ignored: { letter: 'I', cls: 'ign' },
+};
+
+function setGitStatus(text, isError = false) {
+  gitStatusEl.textContent = text;
+  gitStatusEl.classList.toggle('err', isError);
+}
+
+function gitGroup(entry) {
+  const staged = entry.index !== ' ' && entry.index !== '?' && entry.index !== '!';
+  const changed =
+    entry.status === 'untracked' ||
+    (entry.worktree !== ' ' && entry.worktree !== '?' && entry.worktree !== '!');
+  return { staged, changed };
+}
+
+async function refreshGit() {
+  clear(gitListEl);
+  gitBranchEl.textContent = '…';
+  gitSyncEl.textContent = '';
+  if (!state.cwd) return setGitStatus('sin carpeta de trabajo', true);
+  setGitStatus('cargando…');
+  const data = await api(`/api/git/status?cwd=${encodeURIComponent(state.cwd)}`).catch((error) => {
+    setGitStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  gitEntries = data.isRepo ? data.entries : [];
+  if (!data.isRepo) {
+    gitBranchEl.textContent = 'git';
+    gitListEl.appendChild(el('li', 'tree-empty muted', 'no es un repositorio git'));
+    setGitStatus('sin repositorio');
+    return;
+  }
+  gitBranchEl.textContent = data.branch ?? '(sin rama)';
+  gitSyncEl.textContent = [data.ahead ? `↑${data.ahead}` : '', data.behind ? `↓${data.behind}` : '']
+    .filter(Boolean)
+    .join(' ');
+  renderGitList();
+}
+
+function renderGitList() {
+  clear(gitListEl);
+  const query = gitFilterEl.value.trim().toLowerCase();
+  const entries = gitEntries.filter(
+    (entry) =>
+      !query ||
+      entry.path.toLowerCase().includes(query) ||
+      (entry.origPath ?? '').toLowerCase().includes(query)
+  );
+  const staged = entries.filter((entry) => gitGroup(entry).staged);
+  const changed = entries.filter((entry) => gitGroup(entry).changed);
+  if (!entries.length) {
+    gitListEl.appendChild(el('li', 'tree-empty muted', gitEntries.length ? 'sin coincidencias' : 'sin cambios'));
+  } else {
+    renderGitGroup('Preparados', staged, true);
+    renderGitGroup('Cambios', changed, false);
+  }
+  const files = new Set(entries.map((entry) => entry.path)).size;
+  setGitStatus(
+    entries.length ? `${files} archivo(s) · ${staged.length} preparado(s) · ${changed.length} cambio(s)` : 'sin cambios'
+  );
+}
+
+function renderGitGroup(title, entries, staged) {
+  if (!entries.length) return;
+  gitListEl.appendChild(el('li', 'git-group', `${title} (${entries.length})`));
+  for (const entry of entries) gitListEl.appendChild(gitRow(entry, staged));
+}
+
+function gitRow(entry, staged) {
+  const li = el('li', 'git-item');
+  const row = el('div', 'git-row');
+  const badge = GIT_BADGES[entry.status] ?? GIT_BADGES.modified;
+  row.append(
+    el('span', `git-badge ${badge.cls}`, badge.letter),
+    el('span', 'git-path', entry.origPath ? `${entry.origPath} → ${entry.path}` : entry.path)
+  );
+  row.addEventListener('click', () => openGitDiff(entry, staged));
+  li.appendChild(row);
+  return li;
+}
+
+async function openGitDiff(entry, staged) {
+  if (!gitModalEl) return;
+  gitTitleEl.textContent = entry.origPath ? `${entry.origPath} → ${entry.path}` : entry.path;
+  gitMetaEl.textContent =
+    entry.status === 'untracked' ? 'sin seguimiento' : staged ? 'preparado' : 'cambios';
+  gitDiffEl.classList.remove('err');
+  gitDiffEl.textContent = 'cargando…';
+  gitModalEl.showModal();
+  const params = new URLSearchParams({ cwd: state.cwd, path: entry.path });
+  if (staged) params.set('staged', '1');
+  const data = await api(`/api/git/diff?${params}`).catch((error) => ({ error: error.message }));
+  if (data?.error) {
+    gitDiffEl.classList.add('err');
+    gitDiffEl.textContent = data.error;
+    setGitStatus(data.error, true);
+    return;
+  }
+  renderGitDiff(gitDiffEl, data.diff);
+}
+
+function renderGitDiff(node, text) {
+  const content = String(text ?? '').trimEnd();
+  node.textContent = '';
+  if (!content) {
+    node.textContent = '(sin cambios)';
+    return;
+  }
+  for (const line of content.split('\n')) {
+    let cls = 'diff-eq';
+    if (line.startsWith('@@')) cls = 'diff-sep';
+    else if (/^(diff |index |new file|deleted file|rename |similarity |old mode|new mode|\+\+\+|---)/.test(line)) cls = 'diff-meta';
+    else if (line.startsWith('+')) cls = 'diff-add';
+    else if (line.startsWith('-')) cls = 'diff-del';
+    node.appendChild(el('span', `diff-line ${cls}`, line));
+  }
+}
+
+gitFilterEl?.addEventListener('input', () => {
+  if (explorerMode === 'git' && gitEntries.length) renderGitList();
+});
+
 $('#explorer-handle')?.addEventListener('click', () => setExplorerOpen(true));
 $('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
 $('#explorer-refresh').addEventListener('click', refreshExplorerMode);
@@ -3505,6 +3935,10 @@ $('#file-close').addEventListener('click', () => $('#file-modal').close());
 $('#file-modal').addEventListener('click', (event) => {
   if (event.target === $('#file-modal')) $('#file-modal').close();
 });
+$('#git-close')?.addEventListener('click', () => gitModalEl?.close());
+gitModalEl?.addEventListener('click', (event) => {
+  if (event.target === gitModalEl) gitModalEl.close();
+});
 
 try {
   setExplorerOpen(localStorage.getItem('tamnora-explorer-open') === '1');