@danieltmn/tamnora 0.7.1 → 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 --------------------------------------------------------- */
@@ -59,6 +60,8 @@ const ICON_PATHS = {
   '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 = '') {
@@ -634,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 = '';
@@ -647,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) {
@@ -867,24 +886,35 @@ document.addEventListener('scroll', positionMessageMenu, true);
 
 function addMessageActions(message) {
   const actions = el('div', 'msg-actions');
-  const trigger = button('Opciones...', () => toggleMessageMenu(message), 'msg-menu-btn');
-  trigger.title = 'opciones';
+  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;
-  const addItem = (label, run, cls = 'msg-act') => {
-    menu.appendChild(button(label, () => {
+  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();
-    }, cls));
+    });
+    menu.appendChild(item);
   };
-  addItem('copiar', () => copyMessage(message));
-  if (message.role === 'assistant') addItem('regenerar', () => regenerate(message));
-  if (message.role === 'user') addItem('editar', () => editMessage(message));
-  addItem('borrar desde acá', () => deleteFrom(message), 'msg-act danger');
+  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);
@@ -1501,14 +1531,22 @@ 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;
+  submitBtn.disabled = false;
+  updateSubmitLabel(record.working);
   $('#sb-rounds').textContent = record.working ? '' : 'listo';
   $('#sb-rounds').classList.toggle('running', record.working);
   renderFooterActivity(record.working ? 'thinking' : null);
@@ -1519,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;
@@ -1543,6 +1582,7 @@ function refreshTokensDefaults() {
   $('#sb-rounds').textContent = 'listo';
   $('#sb-rounds').classList.remove('running');
   submitBtn.disabled = false;
+  updateSubmitLabel(false);
 }
 
 function setWorking(id, working) {
@@ -1550,7 +1590,8 @@ 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 ? '' : 'listo';
     $('#sb-rounds').classList.toggle('running', working);
@@ -1781,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') {
@@ -1847,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);
@@ -1900,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
@@ -1933,9 +1941,142 @@ 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) {
   stopBtn.addEventListener('click', () => {
     const id = state.sessionId;
@@ -2053,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'],
 ];
 
@@ -2093,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();
@@ -3450,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) {
@@ -3464,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)));
@@ -3625,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);
@@ -3633,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');

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

@@ -33,7 +33,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.7.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.8.0</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -132,6 +132,7 @@
           <form id="chat-form" class="composer">
             <div id="slash-menu" class="slash-menu" hidden></div>
             <div id="attach-preview" class="attach-preview" hidden></div>
+            <div id="chat-queue" class="chat-queue" hidden></div>
             <div class="composer-row">
               <span class="prompt-mark">❯</span>
               <button type="button" id="attach-image" class="btn icon" title="Adjuntar imagen (o pegala / arrastrala)" aria-label="adjuntar imagen">
@@ -172,6 +173,7 @@
               <button type="button" class="xtab is-active" data-xp="files">estructura</button>
               <button type="button" class="xtab" data-xp="preview">preview</button>
               <button type="button" class="xtab" data-xp="procs">procs</button>
+              <button type="button" class="xtab" data-xp="git">git</button>
             </div>
             <span class="spacer"></span>
             <button id="explorer-refresh" type="button" class="btn icon" title="refrescar" aria-label="refrescar">
@@ -234,6 +236,18 @@
             <ul id="procs-list" class="providers"></ul>
             <pre id="procs-log" class="procs-log"></pre>
           </div>
+
+          <div id="xp-git" class="xp-pane" hidden>
+            <div class="xp-bar">
+              <span id="git-branch" class="git-branch">…</span>
+              <span id="git-sync" class="muted grow"></span>
+            </div>
+            <div class="explorer-filter">
+              <input id="git-filter" placeholder="filtrar por nombre…" spellcheck="false" />
+            </div>
+            <ul id="git-list" class="git-list"></ul>
+            <div id="git-status" class="explorer-status"></div>
+          </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">
@@ -280,6 +294,23 @@
             </div>
           </div>
         </dialog>
+
+        <dialog id="git-modal" class="modal file-modal">
+          <div class="modal-card">
+            <div class="row between">
+              <h3 id="git-title">cambios</h3>
+              <div class="file-actions">
+                <span id="git-meta" class="muted"></span>
+                <button id="git-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" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <pre id="git-diff" class="file-preview git-diff"></pre>
+          </div>
+        </dialog>
       </section>
 
       <section id="view-providers" class="view">