@danieltmn/tamnora 0.6.1 → 0.7.0

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

@@ -178,7 +178,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 +203,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 +269,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) },
@@ -1545,11 +1579,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 +1663,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 +1675,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 +1693,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 +1734,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 +1834,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 +2014,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');
@@ -2399,8 +2550,53 @@ const skillForm = $('#skill-form');
 const tgTokenEl = $('#tg-token');
 const tgChatsEl = $('#tg-chats');
 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;
@@ -2442,6 +2638,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;
 }
 
@@ -2457,6 +2655,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', '');
@@ -2516,6 +2715,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 {
@@ -2631,6 +2831,9 @@ async function refreshChannels() {
   if (tgTranscribeEl && document.activeElement !== tgTranscribeEl) {
     tgTranscribeEl.value = tg.transcribeModel ?? 'whisper-1';
   }
+  if (tgTranscribeProviderEl && document.activeElement !== tgTranscribeProviderEl) {
+    tgTranscribeProviderEl.value = tg.transcribeProvider ?? '';
+  }
   if (tgTokenEl && document.activeElement !== tgTokenEl) {
     tgTokenEl.value = '';
     tgTokenEl.placeholder = tg.tokenHint ? `${tg.tokenHint} (dejar vacío para no cambiar)` : '123456:ABC…';
@@ -2643,6 +2846,7 @@ async function submitChannel() {
   const body = {
     allowedChatIds: tgChatsEl?.value ?? '',
     transcribeModel: tgTranscribeEl?.value.trim() || 'whisper-1',
+    transcribeProvider: tgTranscribeProviderEl?.value.trim() || '',
   };
   const token = tgTokenEl.value.trim();
   if (token) body.token = token;

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.6.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.7.0</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -118,6 +118,7 @@
             </div>
           </div>
           <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 class="composer-row">
               <span class="prompt-mark">❯</span>
@@ -134,7 +135,7 @@
               <button class="btn" type="button" id="stop-btn" title="Detener la respuesta" hidden>parar</button>
             </div>
           </form>
-          <div class="statusbar">
+          <div id="statusbar" class="statusbar" title="cambiar modo, proveedor y modelo" role="button" tabindex="0">
             <span id="sb-mode">agent</span>
             <span class="dot">·</span>
             <span id="sb-provider">—</span>
@@ -343,7 +344,62 @@
       </section>
 
       <section id="view-ajustes" class="view">
-        <div class="panel">
+        <div class="ajustes-wrap">
+          <nav class="ajustes-tabs" role="tablist" aria-label="secciones de ajustes">
+            <button type="button" class="ajustes-tab active" data-panel="agente" role="tab">Agente</button>
+            <button type="button" class="ajustes-tab" data-panel="sesiones" role="tab">Sesiones</button>
+            <button type="button" class="ajustes-tab" data-panel="mcp" role="tab">MCP</button>
+            <button type="button" class="ajustes-tab" data-panel="skills" role="tab">Skills</button>
+            <button type="button" class="ajustes-tab" data-panel="telegram" role="tab">Telegram</button>
+            <button type="button" class="ajustes-tab" data-panel="limites" role="tab">Límites</button>
+          </nav>
+
+        <div class="panel ajustes-panel active" data-panel="agente">
+          <div class="row between">
+            <h2>Agente</h2>
+          </div>
+          <p class="muted verify-line">
+            Modo, proveedor, modelo y aprobación automática del agente.
+          </p>
+          <div id="agent-controls-slot">
+            <div id="agent-settings-controls">
+              <label for="mode">Modo</label>
+              <select id="mode" title="modo de agente"></select>
+              <label for="provider">Proveedor</label>
+              <select id="provider" title="proveedor"></select>
+              <label for="model">Modelo</label>
+              <select id="model" title="modelo"></select>
+              <label class="check" title="aprobar automáticamente tools con permiso ask">
+                <input id="yes" type="checkbox" /> Aprobar automáticamente las tools (auto)
+              </label>
+            </div>
+          </div>
+          <div class="row">
+            <button type="button" id="agent-settings-open" class="btn">abrir en ventana</button>
+            <button type="button" id="agent-providers" class="btn">gestionar proveedores</button>
+          </div>
+        </div>
+
+        <div class="panel ajustes-panel" data-panel="sesiones">
+          <div class="row between">
+            <h2>Sesiones</h2>
+          </div>
+          <p class="muted verify-line">
+            Carpeta donde se abre el selector de carpetas y <code>/new</code> cuando no hay sesión.
+          </p>
+          <label for="default-cwd">Carpeta predeterminada para nuevas sesiones</label>
+          <div class="row default-cwd-row">
+            <input id="default-cwd" type="text" readonly placeholder="(la casa del usuario)" title="carpeta donde se abre el selector y /new sin sesión" />
+            <button type="button" id="default-cwd-pick" class="btn">elegir</button>
+            <button type="button" id="default-cwd-clear" class="btn icon" title="quitar la carpeta predeterminada" aria-label="quitar la carpeta predeterminada">
+              <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>
+
+        <div class="panel ajustes-panel" data-panel="mcp">
           <div class="row between">
             <h2>Servidores MCP</h2>
             <div class="row">
@@ -362,7 +418,7 @@
           <ul id="mcp-list" class="providers"></ul>
         </div>
 
-        <div class="panel">
+        <div class="panel ajustes-panel" data-panel="skills">
           <div class="row between">
             <h2>Skills</h2>
             <button id="skill-new" class="btn">+ nueva</button>
@@ -378,7 +434,7 @@
           <ul id="skill-list" class="providers"></ul>
         </div>
 
-        <div class="panel">
+        <div class="panel ajustes-panel" data-panel="telegram">
           <div class="row between">
             <h2>Telegram</h2>
             <span id="tg-status" class="summary">cargando…</span>
@@ -394,6 +450,10 @@
           <label class="field"><span>chats autorizados (ids separados por coma)</span>
             <input id="tg-chats" spellcheck="false" placeholder="123456789, -1001234567890" />
           </label>
+          <label class="field"><span>proveedor de transcripción (voz, opcional)</span>
+            <input id="tg-transcribe-provider" spellcheck="false"
+              placeholder="openai · groq — vacío = proveedor activo" />
+          </label>
           <label class="field"><span>modelo de transcripción (voz)</span>
             <input id="tg-transcribe" spellcheck="false" placeholder="whisper-1" />
           </label>
@@ -412,6 +472,30 @@
             <span id="tg-msg" class="summary"></span>
           </div>
         </div>
+
+        <div class="panel ajustes-panel" data-panel="limites">
+          <div class="row between">
+            <h2>Límites del agente</h2>
+          </div>
+          <p class="muted verify-line">
+            El agente trabaja hasta terminar solo (<code>end_turn</code>). Estos topes son
+            opcionales: <code>0</code> = sin límite. Al cortarse, cierra con un resumen.
+          </p>
+          <label class="field"><span>máximo de rondas de herramientas (0 = sin límite)</span>
+            <input id="limits-rounds" type="number" min="0" step="1" placeholder="0" />
+          </label>
+          <label class="field"><span>presupuesto de tokens (0 = sin límite)</span>
+            <input id="limits-tokens" type="number" min="0" step="1000" placeholder="0" />
+          </label>
+          <label class="field"><span>presupuesto de tiempo en segundos (0 = sin límite)</span>
+            <input id="limits-duration" type="number" min="0" step="1" placeholder="0" />
+          </label>
+          <div class="row">
+            <button id="limits-save" class="btn primary" type="button">guardar</button>
+            <span id="limits-msg" class="summary"></span>
+          </div>
+        </div>
+        </div>
       </section>
 
       <dialog id="folder-modal" class="modal folder-modal">
@@ -481,25 +565,7 @@
             </svg>
           </button>
         </div>
-        <label for="mode">Modo</label>
-        <select id="mode" title="modo de agente"></select>
-        <label for="provider">Proveedor</label>
-        <select id="provider" title="proveedor"></select>
-        <label for="model">Modelo</label>
-        <select id="model" title="modelo"></select>
-        <label for="default-cwd">Carpeta predeterminada para nuevas sesiones</label>
-        <div class="row default-cwd-row">
-          <input id="default-cwd" type="text" readonly placeholder="(la casa del usuario)" title="carpeta donde se abre el selector y /new sin sesión" />
-          <button type="button" id="default-cwd-pick" class="btn">elegir</button>
-          <button type="button" id="default-cwd-clear" class="btn icon" title="quitar la carpeta predeterminada" aria-label="quitar la carpeta predeterminada">
-            <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>
-        <label class="check" title="aprobar automáticamente tools con permiso ask">
-          <input id="yes" type="checkbox" /> Aprobar automáticamente las tools (auto)
-        </label>
+        <div id="settings-controls-slot"></div>
         <div class="row between settings-actions">
           <button type="button" id="settings-providers" class="btn">gestionar proveedores</button>
           <button type="button" id="settings-done" class="btn primary">listo</button>
@@ -534,9 +600,10 @@
         <div class="row">
           <label class="field grow" id="mf-args-field"><span>args (separados por espacio)</span><input id="mf-args" spellcheck="false" placeholder="harness/scripts/mcp-echo-server.mjs" /></label>
         </div>
-        <label class="field"><span>env (KEY=valor por línea)</span>
-          <textarea id="mf-env" rows="3" spellcheck="false" placeholder="API_KEY=..."></textarea>
+        <label class="field" id="mf-env-field"><span>env (KEY=valor por línea · usá <code>env:VAR</code> para no hardcodear secretos)</span>
+          <textarea id="mf-env" rows="3" spellcheck="false" placeholder="API_KEY=env:MY_API_KEY"></textarea>
         </label>
+        <label class="check" id="mf-inherit-field"><input id="mf-inherit-env" type="checkbox" /> heredar todo el entorno (<code>inheritEnv</code>, solo MCPs de confianza)</label>
         <label class="check"><input id="mf-enabled" type="checkbox" checked /> habilitado</label>
         <div class="row between settings-actions">
           <button type="button" id="mf-cancel" class="btn">cancelar</button>

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

@@ -621,7 +621,7 @@ details.reasoning .body { color: var(--muted); white-space: pre-wrap; margin-top
 
 @keyframes pulse { 50% { opacity: 0.35; } }
 
-.composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); }
+.composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); }
 .composer.dragging { outline: 1px dashed var(--accent); outline-offset: -4px; }
 .composer-row { display: flex; align-items: flex-end; gap: 8px; }
 .prompt-mark { color: var(--mine); font-weight: 700; padding-bottom: 8px; }
@@ -707,6 +707,46 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
 }
 .statusbar .dot { opacity: 0.5; }
 .statusbar .spacer { flex: 1; }
+.statusbar[role="button"] { cursor: pointer; }
+.statusbar[role="button"]:hover { color: var(--fg); }
+
+/* menú de comandos "/" en el composer */
+.slash-menu {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: calc(100% - 6px);
+  max-height: 260px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
+  z-index: 30;
+}
+.slash-menu[hidden] { display: none; }
+.slash-item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--fg);
+  text-align: left;
+  cursor: pointer;
+  font: 500 13px var(--mono);
+}
+.slash-item.active,
+.slash-item:hover { background: var(--theirs); }
+.slash-cmd { color: var(--accent); font-weight: 700; }
+.slash-desc { color: var(--muted); font: 400 12px var(--serif); }
 .ctx { display: inline-flex; align-items: center; gap: 8px; }
 .ctx-bar { width: 76px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
 .ctx-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: currentColor; transition: width 0.35s ease; }
@@ -724,6 +764,26 @@ pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
 
 .card { border: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
 
+/* ajustes: pestañas internas ---------------------------------------------- */
+#view-ajustes.active { display: block; overflow-y: auto; }
+.ajustes-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
+.ajustes-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
+.ajustes-tab {
+  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
+  padding: 8px 14px; margin-bottom: -1px; color: var(--muted); cursor: pointer;
+  font: 600 13px var(--serif); letter-spacing: 0.01em;
+}
+.ajustes-tab:hover { color: var(--fg); }
+.ajustes-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
+.ajustes-panel { display: none; }
+.ajustes-panel.active { display: flex; }
+.ajustes-panel.panel { flex: none; max-width: none; overflow: visible; padding: 6px 2px 18px; }
+.ajustes-panel .verify-line code { font-size: 11px; }
+#agent-settings-controls { display: flex; flex-direction: column; gap: 7px; }
+#agent-settings-controls label { color: var(--muted); font-size: 12px; }
+#agent-settings-controls select { width: 100%; }
+#agent-controls-slot:empty { display: none; }
+
 .providers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
 .providers li {
   display: flex;