@danieltmn/tamnora 0.6.2 → 0.7.1

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

@@ -58,6 +58,7 @@ 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'],
 };
 
 function icon(name, size = 16, className = '') {
@@ -178,7 +179,7 @@ function activateTab(name) {
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
   if (name === 'providers') refreshProviders();
-  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshChannels(); }
+  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshChannels(); refreshLimits(); }
 }
 
 document.querySelectorAll('.tab[data-tab]').forEach((t) =>
@@ -203,27 +204,61 @@ document.addEventListener('keydown', (event) => {
 /* --- settings modal (modo / proveedor / modelo / auto) -------------------- */
 
 const settingsModal = $('#settings-modal');
+const agentControls = $('#agent-settings-controls');
+const agentControlsSlot = $('#agent-controls-slot');
+const settingsControlsSlot = $('#settings-controls-slot');
+
+/** Los controles modo/proveedor/modelo/auto se comparten entre el tab Agente
+ *  y el modal: se mueven de un slot al otro para no duplicar IDs ni estado. */
+function moveAgentControls(target) {
+  if (agentControls && target) target.appendChild(agentControls);
+}
+
+function openSettingsModal() {
+  if (!settingsModal) return;
+  moveAgentControls(settingsControlsSlot);
+  syncDefaultCwd();
+  settingsModal.showModal();
+}
+
+function closeSettingsModal() {
+  moveAgentControls(agentControlsSlot);
+  settingsModal?.close();
+}
+
 if (settingsModal) {
-  $('#settings-toggle')?.addEventListener('click', () => {
-    syncDefaultCwd();
-    settingsModal.showModal();
-  });
-  $('#settings-close')?.addEventListener('click', () => settingsModal.close());
-  $('#settings-done')?.addEventListener('click', () => settingsModal.close());
+  $('#settings-toggle')?.addEventListener('click', openSettingsModal);
+  $('#settings-close')?.addEventListener('click', closeSettingsModal);
+  $('#settings-done')?.addEventListener('click', closeSettingsModal);
   $('#settings-providers')?.addEventListener('click', () => {
-    settingsModal.close();
+    closeSettingsModal();
     activateTab('providers');
   });
-  $('#default-cwd-pick')?.addEventListener('click', () => {
-    settingsModal.close();
-    openFolderPicker('default');
-  });
+  $('#agent-settings-open')?.addEventListener('click', openSettingsModal);
+  $('#agent-providers')?.addEventListener('click', () => activateTab('providers'));
+  $('#default-cwd-pick')?.addEventListener('click', () => openFolderPicker('default'));
   $('#default-cwd-clear')?.addEventListener('click', () => {
     writeDefaultCwd('');
     syncDefaultCwd();
   });
   settingsModal.addEventListener('click', (event) => {
-    if (event.target === settingsModal) settingsModal.close();
+    if (event.target === settingsModal) closeSettingsModal();
+  });
+  settingsModal.addEventListener('close', () => moveAgentControls(agentControlsSlot));
+}
+
+// El footer (modo · proveedor · modelo · estado) abre el modal de ajustes.
+const statusbarEl = $('#statusbar');
+if (statusbarEl) {
+  statusbarEl.addEventListener('click', (event) => {
+    if (event.target.closest('#sb-context')) return;
+    openSettingsModal();
+  });
+  statusbarEl.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openSettingsModal();
+    }
   });
 }
 
@@ -235,7 +270,7 @@ const PALETTE_COMMANDS = [
   { id: 'compact', label: 'Compactar la conversación', hint: '/compact', run: () => runSlash('compact') },
   { id: 'clear', label: 'Limpiar la conversación', hint: '/clear', run: () => runSlash('clear') },
   { id: 'mode', label: 'Cambiar Plan / Build', hint: 'Ctrl+.', run: () => toggleMode() },
-  { id: 'settings', label: 'Ajustes del agente (modelo, modo, auto)', run: () => { syncDefaultCwd(); settingsModal?.showModal(); } },
+  { id: 'settings', label: 'Ajustes del agente (modelo, modo, auto)', run: () => openSettingsModal() },
   { id: 'providers', label: 'Gestionar proveedores', run: () => activateTab('providers') },
   { id: 'ajustes', label: 'MCP y Skills (ajustes)', run: () => activateTab('ajustes') },
   { id: 'explorer', label: 'Mostrar u ocultar archivos', run: () => setExplorerOpen(!state.explorerOpen) },
@@ -489,11 +524,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) {
@@ -575,6 +612,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) {
@@ -699,12 +740,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}`);
@@ -721,12 +800,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);
@@ -741,18 +818,79 @@ 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 = button('Opciones...', () => toggleMessageMenu(message), 'msg-menu-btn');
+  trigger.title = 'opciones';
+  trigger.setAttribute('aria-haspopup', 'menu');
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-label', 'opciones del mensaje');
+
+  const menu = el('div', 'msg-menu');
+  menu.hidden = true;
+  const addItem = (label, run, cls = 'msg-act') => {
+    menu.appendChild(button(label, () => {
+      closeMessageMenus();
+      run();
+    }, cls));
+  };
+  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');
+
+  actions.append(trigger, menu);
   message.bubble.appendChild(actions);
   message.actions = actions;
+  message.menu = menu;
+  message.trigger = trigger;
 }
 
 function messageId(message) {
@@ -823,17 +961,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) {
@@ -1302,6 +1448,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() {
@@ -1361,8 +1509,9 @@ function activateSession(id) {
 
 function auditStatus(record) {
   submitBtn.disabled = record.working;
-  $('#sb-rounds').textContent = record.working ? 'pensando…' : 'listo';
+  $('#sb-rounds').textContent = record.working ? '' : 'listo';
   $('#sb-rounds').classList.toggle('running', record.working);
+  renderFooterActivity(record.working ? 'thinking' : null);
 }
 
 function closeTab(id) {
@@ -1403,8 +1552,9 @@ function setWorking(id, working) {
   if (id === state.sessionId) {
     submitBtn.disabled = 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);
   }
 }
 
@@ -1545,11 +1695,25 @@ function renderCompletion(message, data) {
   const duration = formatDuration(data.durationMs);
   if (duration) parts.push(duration);
   if (data.tokens?.total_tokens) parts.push(`${Number(data.tokens.total_tokens).toLocaleString('es')} tokens`);
-  const maxed = data.stopReason === 'max_rounds';
-  message.tools.appendChild(el('div', maxed ? 'chip warn' : 'chip ok', `${maxed ? '⚠ máximo de rondas' : '✓ terminado'} · ${parts.join(' · ')}`));
+  const cut = ['max_rounds', 'no_progress', 'budget'].includes(data.stopReason);
+  const label = cut ? (data.wrappedUp ? '⚠ corte de seguridad · resumen' : '⚠ corte de seguridad') : '✓ terminado';
+  message.tools.appendChild(el('div', cut ? 'chip warn' : 'chip ok', `${label} · ${parts.join(' · ')}`));
   scrollMessages(paneOf(message));
 }
 
+/** Retoma un turno cortado por límite/bucle sin tener que escribir "continúa". */
+function addContinueButton(turn, data) {
+  const btn = el('button', 'chip', data.wrappedUp ? '↻ Continuar el trabajo' : '↻ Continuar');
+  btn.type = 'button';
+  btn.addEventListener('click', () => {
+    if (state.panes.get(turn.sessionKey)?.working) return;
+    chatInput.value = 'Continuá donde quedaste.';
+    sendMessage();
+  });
+  turn.assistant().tools.appendChild(btn);
+  scrollMessages(paneOf(turn.assistant()));
+}
+
 function handleChatEvent(event, data, turn) {
   if (handleAgentEvent(event, data, turn)) return;
   if (event === 'agent_start') {
@@ -1615,6 +1779,8 @@ function handleChatEvent(event, data, turn) {
     if (!turn.sawText) setText(turn.assistant(), `↻ reintentando (${data.attempt}) en ${Math.round((data.delayMs || 0) / 1000)} s...`);
   } else if (event === 'trim') {
     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 === 'warning') {
     turn.assistant().tools.appendChild(el('div', 'chip', `⚠ ${data.message}`));
   } else if (event === 'error') {
@@ -1625,12 +1791,16 @@ function handleChatEvent(event, data, turn) {
     const finalText = (turn.active?.textEl?.textContent ?? '').trim();
     const tools = Number(data.toolCalls) || 0;
     if (!finalText) {
-      if (data.stopReason === 'max_rounds') {
+      if (data.stopReason === 'no_progress') {
+        setText(turn.assistant(), '⚠ El agente se quedó repitiendo las mismas herramientas sin avanzar.');
+      } else if (data.stopReason === 'budget') {
+        setText(turn.assistant(), '⚠ El agente alcanzó el presupuesto de tokens/tiempo sin respuesta final.');
+      } else if (data.stopReason === 'max_rounds') {
         setText(
           turn.assistant(),
           `⚠ El agente alcanzó el máximo de rondas (${data.rounds ?? '?'}) sin dejar una respuesta final.${
             tools ? ` Hizo ${tools} llamadas a herramientas.` : ''
-          } Pedile que continúe o subí \`maxRounds\`.`
+          }`
         );
       } else if (tools) {
         setText(turn.assistant(), '✓ El agente terminó sus herramientas, pero no devolvió un mensaje final.');
@@ -1639,6 +1809,7 @@ function handleChatEvent(event, data, turn) {
       }
     }
     renderCompletion(turn.active, data);
+    if (data.continuable) addContinueButton(turn, data);
     updateStatus({ rounds: data.rounds, stopReason: data.stopReason });
     addTokens(data.tokens);
   } else if (event === 'aborted') {
@@ -1679,6 +1850,7 @@ 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) {
@@ -1778,11 +1950,13 @@ chatForm.addEventListener('submit', (event) => {
   sendMessage();
 });
 chatInput.addEventListener('keydown', (event) => {
+  if (handleSlashKey(event)) return;
   if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault();
     sendMessage();
   }
 });
+chatInput.addEventListener('input', onChatInputChanged);
 
 /* --- image attachments ---------------------------------------------------- */
 
@@ -1956,6 +2130,99 @@ async function runCommand(name, arg) {
   }
 }
 
+/* --- menú de comandos "/" ------------------------------------------------- */
+
+const slashMenuEl = $('#slash-menu');
+let slashMatches = [];
+let slashIndex = 0;
+
+function slashCommandEntries() {
+  return COMMANDS.map(([cmd, desc]) => {
+    const name = cmd.split(' ')[0];
+    const takesArgs = cmd.includes(' ');
+    return { name, desc, insert: takesArgs ? `${name} ` : name, takesArgs };
+  });
+}
+
+function hideSlashMenu() {
+  if (!slashMenuEl) return;
+  slashMenuEl.hidden = true;
+  slashMenuEl.replaceChildren();
+  slashMatches = [];
+  slashIndex = 0;
+}
+
+function renderSlashMenu() {
+  if (!slashMenuEl) return;
+  slashMenuEl.replaceChildren();
+  slashMatches.forEach((entry, index) => {
+    const item = el('button', `slash-item${index === slashIndex ? ' active' : ''}`);
+    item.type = 'button';
+    item.append(el('span', 'slash-cmd', entry.name), el('span', 'slash-desc', entry.desc));
+    // mousedown (no click) para no perder el foco del textarea antes de elegir.
+    item.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+      chooseSlash(index);
+    });
+    slashMenuEl.appendChild(item);
+  });
+  slashMenuEl.hidden = false;
+}
+
+function updateSlashMenu() {
+  if (!slashMenuEl) return;
+  const value = chatInput.value;
+  if (!value.startsWith('/') || /\s/.test(value)) return hideSlashMenu();
+  const query = value.slice(1).toLowerCase();
+  slashMatches = slashCommandEntries().filter((entry) => entry.name.slice(1).toLowerCase().startsWith(query));
+  if (!slashMatches.length) return hideSlashMenu();
+  if (slashIndex >= slashMatches.length) slashIndex = 0;
+  renderSlashMenu();
+}
+
+function chooseSlash(index) {
+  const entry = slashMatches[index];
+  if (!entry) return;
+  chatInput.value = entry.insert;
+  chatInput.focus();
+  hideSlashMenu();
+  if (!entry.takesArgs) sendMessage();
+}
+
+function handleSlashKey(event) {
+  if (!slashMenuEl || slashMenuEl.hidden || !slashMatches.length) return false;
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    slashIndex = (slashIndex + 1) % slashMatches.length;
+    renderSlashMenu();
+    return true;
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    slashIndex = (slashIndex - 1 + slashMatches.length) % slashMatches.length;
+    renderSlashMenu();
+    return true;
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    hideSlashMenu();
+    return true;
+  }
+  if (event.key === 'Enter' || event.key === 'Tab') {
+    event.preventDefault();
+    chooseSlash(slashIndex);
+    return true;
+  }
+  return false;
+}
+
+function onChatInputChanged() {
+  slashIndex = 0;
+  updateSlashMenu();
+}
+
+chatInput.addEventListener('blur', () => setTimeout(hideSlashMenu, 120));
+
 /* --- folder picker -------------------------------------------------------- */
 
 const folderModal = $('#folder-modal');
@@ -2402,6 +2669,50 @@ const tgTranscribeEl = $('#tg-transcribe');
 const tgTranscribeProviderEl = $('#tg-transcribe-provider');
 const tgStatusEl = $('#tg-status');
 
+/* --- ajustes: pestañas internas + límites del agente --------------------- */
+
+const ajustesTabs = document.querySelectorAll('.ajustes-tab');
+
+function activateAjustesPanel(name) {
+  ajustesTabs.forEach((tab) => tab.classList.toggle('active', tab.dataset.panel === name));
+  document
+    .querySelectorAll('.ajustes-panel')
+    .forEach((panel) => panel.classList.toggle('active', panel.dataset.panel === name));
+  if (name === 'agente') moveAgentControls(agentControlsSlot);
+}
+
+ajustesTabs.forEach((tab) =>
+  tab.addEventListener('click', () => activateAjustesPanel(tab.dataset.panel))
+);
+
+const limitsRoundsEl = $('#limits-rounds');
+const limitsTokensEl = $('#limits-tokens');
+const limitsDurationEl = $('#limits-duration');
+
+async function refreshLimits() {
+  const data = await api('/api/settings').catch(() => null);
+  const settings = data?.settings;
+  if (!settings) return;
+  if (limitsRoundsEl) limitsRoundsEl.value = settings.maxRounds ?? 0;
+  if (limitsTokensEl) limitsTokensEl.value = settings.maxTokens ?? 0;
+  if (limitsDurationEl) limitsDurationEl.value = Math.round((settings.maxDurationMs ?? 0) / 1000);
+}
+
+$('#limits-save')?.addEventListener('click', async () => {
+  const body = {
+    maxRounds: Math.max(0, Number(limitsRoundsEl?.value) || 0),
+    maxTokens: Math.max(0, Number(limitsTokensEl?.value) || 0),
+    maxDurationMs: Math.max(0, Math.round((Number(limitsDurationEl?.value) || 0) * 1000)),
+  };
+  try {
+    await api('/api/settings', { method: 'PUT', body });
+    refreshLimits();
+    setStatus('#limits-msg', 'guardado', 'ok');
+  } catch (error) {
+    setStatus('#limits-msg', error.message, 'err');
+  }
+});
+
 function setStatus(node, text, cls = '') {
   const elNode = $(node);
   if (!elNode) return;
@@ -2443,6 +2754,8 @@ function syncMcpFormFields() {
   const http = $('#mf-transport').value === 'http';
   $('#mf-command-field').hidden = http;
   $('#mf-args-field').hidden = http;
+  $('#mf-env-field').hidden = http;
+  $('#mf-inherit-field').hidden = http;
   $('#mf-url-field').hidden = !http;
 }
 
@@ -2458,6 +2771,7 @@ function openMcpForm(server = null) {
   $('#mf-env').value = Object.entries(server?.env ?? {})
     .map(([key, value]) => `${key}=${value ?? ''}`)
     .join('\n');
+  $('#mf-inherit-env').checked = server?.inheritEnv === true;
   $('#mf-enabled').checked = server ? server.enabled !== false : true;
   syncMcpFormFields();
   setStatus('#mf-status', '');
@@ -2517,6 +2831,7 @@ async function submitMcp(event) {
     args: $('#mf-args').value.trim(),
     url: $('#mf-url').value.trim(),
     env: parseEnv($('#mf-env').value),
+    inheritEnv: $('#mf-inherit-env').checked,
     enabled: $('#mf-enabled').checked,
   };
   try {
@@ -2897,6 +3212,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;
@@ -3164,14 +3480,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';
@@ -3189,7 +3514,9 @@ const previewTools = setupPreviewTools({
   frame: previewFrame,
   select: $('#preview-device'),
   maxButton: $('#preview-max'),
+  teleport: true,
 });
+restorePreviewMax = () => previewTools.setMax(false);
 previewTools.applyDevice();
 
 function loadPreview(url) {