@danieltmn/tamnora 0.17.0 → 0.18.0

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

@@ -13,6 +13,7 @@ const state = {
   active: { provider: '', model: '' },
   pendingInput: null,
   permissionCards: new Map(),
+  questionCards: new Map(),
   attachments: [],
   home: null,
   cwd: '',
@@ -32,6 +33,8 @@ const state = {
   // del stream a proposito: un cliente sin stream abierto igual tiene que poder
   // ver que la IA esta esperando una autorizacion suya.
   pendingAsks: new Map(),
+  // Formularios interactivos (`ask_user`) esperando respuesta: askId -> { sessionId }.
+  pendingQuestions: new Map(),
   // Ponerlo en cola para reconciliar apenas termine la que esta en curso.
   reconcileAgain: false,
 };
@@ -196,7 +199,7 @@ function activateTab(name) {
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
   if (name === 'providers') refreshProviders();
-  if (name === 'ajustes') { refreshMcp(); refreshSkills(); refreshMemory(); refreshSchedules(); refreshChannels(); refreshLimits(); refreshVoz(); refreshAsesor(); refreshTranscribe(); refreshProfile(); }
+  if (name === 'ajustes') { refreshMcp(); refreshMcpCatalog(); refreshSkills(); refreshSkillCatalog(); refreshMemory(); refreshSchedules(); refreshChannels(); refreshLimits(); refreshVoz(); refreshAsesor(); refreshTranscribe(); refreshProfile(); }
 }
 
 document.querySelectorAll('.tab[data-tab]').forEach((t) =>
@@ -1021,6 +1024,7 @@ async function renderPane(id) {
   // borra. Hay que repintarlos aca: sin esto una tarjeta de permiso se ve y
   // al primer re-render (run_start, sweep, reconexion) desaparece para siempre.
   for (const ask of detail.permissions ?? []) showStandalonePermission(record, ask);
+  for (const ask of detail.questions ?? []) showStandaloneQuestion(record, ask);
   return detail;
 }
 
@@ -1521,6 +1525,152 @@ function resolvePermissionCard(entry, allow) {
   entry.verdict.textContent = allow ? 'aprobado desde otra ventana' : 'denegado desde otra ventana';
 }
 
+/* --- formularios interactivos (ask_user) ---------------------------------- */
+
+function liveQuestion(askId) {
+  const entry = state.questionCards.get(askId);
+  return entry && entry.card.isConnected ? entry : null;
+}
+
+/**
+ * Formulario que el modelo pide con `ask_user`: en vez de preguntas numeradas en
+ * el texto, la consola renderiza los campos y el usuario los contesta de una.
+ */
+function addQuestionCard(container, data) {
+  const previous = state.questionCards.get(data.askId);
+  if (previous && previous.card.isConnected) return previous.card;
+  const card = el('div', 'question-card');
+  if (data.title) card.appendChild(el('div', 'question-title', data.title));
+  const form = el('form', 'question-form');
+  const fields = [];
+  for (const q of data.questions ?? []) {
+    const field = el('label', 'question-field');
+    field.appendChild(el('span', 'question-label', q.label));
+    let input;
+    if (q.type === 'textarea') {
+      input = document.createElement('textarea');
+      input.rows = 3;
+    } else if (q.type === 'select' || q.type === 'confirm') {
+      input = document.createElement('select');
+      const options = q.type === 'confirm' ? ['sí', 'no'] : q.options ?? [];
+      for (const opt of options) {
+        const option = document.createElement('option');
+        option.value = opt;
+        option.textContent = opt;
+        input.appendChild(option);
+      }
+    } else {
+      input = document.createElement('input');
+      input.type = 'text';
+    }
+    if (q.placeholder && 'placeholder' in input) input.placeholder = q.placeholder;
+    input.name = q.id;
+    input.className = 'question-input';
+    field.appendChild(input);
+    form.appendChild(field);
+    fields.push({ q, input });
+  }
+  const actions = el('div', 'question-actions');
+  const status = el('span', 'muted', '');
+  const submit = button('enviar', () => {});
+  submit.type = 'submit';
+  submit.classList.add('btn', 'primary');
+  actions.append(status, el('span', 'spacer'), submit);
+  form.appendChild(actions);
+  card.appendChild(form);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  state.questionCards.set(data.askId, { card, fields, status });
+
+  const settle = (text, klass) => {
+    card.classList.add(klass);
+    status.textContent = text;
+    submit.disabled = true;
+    for (const { input } of fields) input.disabled = true;
+    state.pendingQuestions.delete(data.askId);
+    renderAlertSignals();
+  };
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const answers = {};
+    for (const { q, input } of fields) {
+      answers[q.id] = q.type === 'confirm' ? input.value === 'sí' : input.value;
+    }
+    submit.disabled = true;
+    try {
+      await api(`/api/questions/${encodeURIComponent(data.askId)}`, { method: 'POST', body: { answers } });
+      settle('enviado', 'answered');
+    } catch (error) {
+      if (error?.status === 404) {
+        settle('ya no aplica', 'answered');
+        reconcile({ immediate: true });
+        return;
+      }
+      submit.disabled = false;
+      status.textContent = `no se pudo enviar: ${error.message}`;
+    }
+  });
+  return card;
+}
+
+/** Formulario pendiente recreado tras un reload (no se reconstruye de mensajes). */
+function showStandaloneQuestion(record, ask) {
+  if (liveQuestion(ask.askId)) return;
+  record.el.querySelector('.empty')?.remove();
+  const holder = addMessage('assistant', '', record.el);
+  holder.textEl.remove();
+  addQuestionCard(holder, { askId: ask.askId, title: ask.title, questions: ask.questions });
+  state.pendingQuestions.set(ask.askId, { sessionId: record.id });
+  renderAlertSignals();
+}
+
+/* --- botones de opcion (offer_choices) ------------------------------------ */
+
+function sendChoice(label) {
+  chatInput.value = label;
+  sendMessage();
+}
+
+/** Botones tappables: al tocar uno se manda como mensaje del usuario. */
+function addChoiceCard(container, { question, options } = {}) {
+  const items = Array.isArray(options) ? options.map((o) => String(o).trim()).filter(Boolean).slice(0, 6) : [];
+  if (!items.length || !container) return null;
+  const card = el('div', 'choice-card');
+  if (question) card.appendChild(el('div', 'choice-question', question));
+  const row = el('div', 'choice-options');
+  for (const label of items) row.appendChild(button(label, () => sendChoice(label), 'btn choice-btn'));
+  card.appendChild(row);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  return card;
+}
+
+/* --- plan/checklist (show_plan) ------------------------------------------- */
+
+const PLAN_MARKS = { done: '✓', active: '◐', pending: '○' };
+
+/** Checklist interactivo: el modelo lo reemite para actualizar el estado. */
+function addPlanCard(container, { title, steps } = {}) {
+  const items = Array.isArray(steps)
+    ? steps.filter((s) => s && String(s.text ?? '').trim()).slice(0, 20)
+    : [];
+  if (!items.length || !container) return null;
+  const card = el('div', 'plan-card');
+  if (title) card.appendChild(el('div', 'plan-title', String(title)));
+  const list = el('ul', 'plan-steps');
+  for (const step of items) {
+    const status = ['done', 'active', 'pending'].includes(step.status) ? step.status : 'pending';
+    const li = el('li', `plan-step ${status}`);
+    li.append(el('span', 'plan-mark', PLAN_MARKS[status]), el('span', 'plan-text', String(step.text)));
+    list.appendChild(li);
+  }
+  card.appendChild(list);
+  (container.tools ?? container).appendChild(card);
+  scrollMessages(paneOf(container));
+  return card;
+}
+
 function userText(content) {
   if (typeof content === 'string') return content;
   if (Array.isArray(content)) {
@@ -1540,11 +1690,15 @@ function userImages(content) {
     .filter(Boolean);
 }
 
-function advisorGlyph(kind) {
-  if (kind === 'code') return '⚠';
-  if (kind === 'explain') return 'ℹ';
-  if (kind === 'summary') return '✎';
-  return '✦';
+const ADVISOR_KINDS = {
+  code: { label: 'Cuidado!', glyph: '⚠' },
+  explain: { label: 'Importante!', glyph: 'ℹ' },
+  advice: { label: 'Consejo', glyph: '✦' },
+  summary: { label: 'Resumen', glyph: '✎' },
+};
+
+function advisorMeta(kind) {
+  return ADVISOR_KINDS[kind] || { label: 'Asesor', glyph: '✦' };
 }
 
 /** Tarjeta del asesor: una capa de comentario, no un mensaje del agente. */
@@ -1553,9 +1707,15 @@ function addAdvisorCard(container, { text, kind } = {}) {
   if (!clean || !container) return null;
   const exists = [...container.querySelectorAll('.advisor-text')].some((node) => node.textContent === clean);
   if (exists) return null;
-  const card = el('div', `advisor-card${kind ? ` advisor-${kind}` : ''}`);
+  const meta = advisorMeta(kind);
+  const klass = ADVISOR_KINDS[kind] ? ` advisor-${kind}` : '';
+  const card = el('div', `advisor-card${klass}`);
   const head = el('div', 'advisor-head');
-  head.append(el('span', 'advisor-glyph', advisorGlyph(kind)), el('span', 'advisor-title', 'asesor'));
+  head.append(
+    el('span', 'advisor-glyph', meta.glyph),
+    el('span', 'advisor-title', 'asesor'),
+    el('span', `advisor-badge advisor-badge-${kind || 'advice'}`, meta.label)
+  );
   card.append(head, el('div', 'advisor-text', clean));
   container.appendChild(card);
   return card;
@@ -1586,11 +1746,14 @@ function renderStored(message, pane) {
     }
     for (const call of message.tool_calls ?? []) {
       const name = call.function?.name ?? call.name;
-      const tool = addToolCard(bubble, name, parseToolArgs(call), { callId: call.id, open: false });
+      const args = parseToolArgs(call);
+      const tool = addToolCard(bubble, name, args, { callId: call.id, open: false });
       tool.card.classList.remove('running');
       tool.card.classList.add('done');
       tool.glyph.textContent = '✓';
       if (call.id) toolCardIndex.set(call.id, tool);
+      if (name === 'offer_choices') addChoiceCard(bubble, { question: args.question, options: args.options });
+      if (name === 'show_plan') addPlanCard(bubble, { title: args.title, steps: args.steps });
     }
   } else if (message.role === 'tool') {
     const tool = toolCardIndex.get(message.tool_call_id);
@@ -1780,7 +1943,7 @@ async function removeProject(cwd, count) {
 
 /* --- session tabs --------------------------------------------------------- */
 
-function registerSession(session, messages = [], tokens = { in: 0, out: 0 }, running = false, permissions = []) {
+function registerSession(session, messages = [], tokens = { in: 0, out: 0 }, running = false, permissions = [], questions = []) {
   const id = session.id;
   if (state.panes.has(id)) return state.panes.get(id);
   const pane = document.createElement('div');
@@ -1807,6 +1970,7 @@ function registerSession(session, messages = [], tokens = { in: 0, out: 0 }, run
   // sesion. Sin esto, recargar con un permiso en el aire dejaba el run
   // bloqueado esperando una decision que no se podia tomar.
   for (const ask of permissions) showStandalonePermission(record, ask);
+  for (const ask of questions) showStandaloneQuestion(record, ask);
   return record;
 }
 
@@ -1868,7 +2032,7 @@ async function openTab(id) {
     return null;
   });
   if (!data) return;
-  registerSession(data.session, data.messages, data.tokens, data.running, data.permissions);
+  registerSession(data.session, data.messages, data.tokens, data.running, data.permissions, data.questions);
   activateSession(id);
 }
 
@@ -2005,7 +2169,7 @@ async function restoreTabs() {
   for (const id of ids) {
     if (state.panes.has(id)) continue;
     const data = await api(`/api/sessions/${id}`).catch(() => null);
-    if (data) registerSession(data.session, data.messages, data.tokens, data.running, data.permissions);
+    if (data) registerSession(data.session, data.messages, data.tokens, data.running, data.permissions, data.questions);
   }
   const active = saved?.active && state.panes.has(saved.active) ? saved.active : state.tabOrder[state.tabOrder.length - 1];
   if (active) activateSession(active);
@@ -2206,11 +2370,35 @@ function handleChatEvent(event, data, turn) {
     }
     if (turn.live && data.name === 'preview_url' && data.args?.url) {
       setExplorerMode('preview');
-      loadPreview(data.args.url);
+      // Desde otro dispositivo, 127.0.0.1 apunta al dispositivo: si el agente
+      // pidio una URL local, la publicamos por tailscale/tunel.
+      const port = isLocalHost() ? 0 : localPortOf(data.args.url);
+      if (port) openRemoteTunnel(port);
+      else loadPreview(data.args.url);
+    }
+    if (turn.live && data.name === 'offer_choices') {
+      addChoiceCard(target, { question: data.args?.question, options: data.args?.options });
+    }
+    if (turn.live && data.name === 'show_plan') {
+      addPlanCard(target, { title: data.args?.title, steps: data.args?.steps });
     }
   } else if (event === 'tool_result') {
     setActivity(turn.assistant(), 'thinking');
     finishToolCard(turn.lastTool, data);
+  } else if (event === 'question') {
+    if (!liveQuestion(data.askId)) addQuestionCard(turn.assistant(), data);
+    state.pendingQuestions.set(data.askId, { sessionId: data.sessionId ?? turn.sessionKey });
+    renderAlertSignals();
+    if (paneOf(turn.active) !== activePane) toast('Formulario pendiente en otra pestaña.');
+  } else if (event === 'question_answered') {
+    state.pendingQuestions.delete(data?.askId);
+    renderAlertSignals();
+    const entry = state.questionCards.get(data.askId);
+    if (entry && !entry.card.classList.contains('answered')) {
+      entry.card.classList.add('answered');
+      entry.status.textContent = data?.cancelled ? 'cancelado' : 'respondido en otra ventana';
+      for (const { input } of entry.fields) input.disabled = true;
+    }
   } else if (event === 'permission') {
     // Si la tarjeta ya esta en el DOM (la creo `renderPane` antes del replay, o
     // llego por el canal global) no hay que crear OTRO mensaje del asistente
@@ -3830,9 +4018,16 @@ providerModal.addEventListener('click', (event) => {
 /* --- ajustes: MCP + Skills ----------------------------------------------- */
 
 const mcpListEl = $('#mcp-list');
+const mcpSearchResultsEl = $('#mcp-search-results');
+const mcpCatalogEl = $('#mcp-catalog');
 const mcpModal = $('#mcp-modal');
 const mcpForm = $('#mcp-form');
+const mcpModeEl = $('#mcp-mode');
+const mcpCountEl = $('#mcp-count');
+const mcpPinnedEl = $('#mcp-pinned');
 const skillListEl = $('#skill-list');
+const skillSearchResultsEl = $('#skill-search-results');
+const skillCatalogEl = $('#skill-catalog');
 const skillModal = $('#skill-modal');
 const skillForm = $('#skill-form');
 const memoryListEl = $('#memory-list');
@@ -3927,6 +4122,16 @@ function setStatus(node, text, cls = '') {
 async function refreshMcp({ connect = false } = {}) {
   const data = await api(`/api/mcp${connect ? '?connect=1' : ''}`).catch(() => null);
   if (!data) return;
+  if (mcpModeEl && data.mode) mcpModeEl.value = data.mode;
+  if (mcpPinnedEl && Array.isArray(data.pinned) && document.activeElement !== mcpPinnedEl) {
+    mcpPinnedEl.value = data.pinned.join(', ');
+  }
+  if (mcpCountEl) {
+    mcpCountEl.textContent =
+      data.toolCount == null
+        ? ''
+        : `${data.toolCount} herramientas · ${data.lazy ? 'diferidas (mcp_call)' : 'completas en contexto'}`;
+  }
   clear(mcpListEl);
   if (!data.servers.length) {
     mcpListEl.appendChild(el('li', 'muted', 'sin servidores MCP'));
@@ -5020,6 +5225,137 @@ async function importSkill() {
   });
 }
 
+/* --- ajustes: biblioteca y buscador de MCP y skills ----------------------- */
+
+async function refreshMcpCatalog() {
+  if (!mcpCatalogEl) return;
+  const data = await api('/api/mcp/catalog').catch(() => null);
+  if (!data) return;
+  clear(mcpCatalogEl);
+  for (const entry of data.catalog) {
+    const li = el('li', entry.installed ? 'active' : '');
+    const main = el('div', 'grow');
+    main.append(el('div', '', entry.name), el('div', 'pmeta', entry.description || ''));
+    li.appendChild(main);
+    const actions = el('div', 'pactions');
+    if (entry.requiredEnv?.length) actions.appendChild(el('span', 'pmeta', `env: ${entry.requiredEnv.join(', ')}`));
+    if (entry.installed) actions.appendChild(el('span', 'pmeta', 'instalado'));
+    else actions.appendChild(button('agregar', (event) => { event.stopPropagation(); installCatalogMcp(entry.id); }));
+    li.appendChild(actions);
+    mcpCatalogEl.appendChild(li);
+  }
+}
+
+async function installCatalogMcp(id) {
+  setStatus('#mcp-import-status', `agregando ${id}…`);
+  const data = await api('/api/mcp/import', { method: 'POST', body: { catalog: id } }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#mcp-import-status', data.error, 'err');
+  setStatus('#mcp-import-status', `agregado ${id} (deshabilitado)`, 'ok');
+  await refreshMcp();
+  await refreshMcpCatalog();
+}
+
+async function searchMcp() {
+  const input = $('#mcp-search');
+  const q = input?.value.trim();
+  if (!q) return;
+  setStatus('#mcp-search-status', 'buscando…');
+  const data = await api(`/api/mcp/search?q=${encodeURIComponent(q)}`).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#mcp-search-status', data.error, 'err');
+  clear(mcpSearchResultsEl);
+  if (!data.results.length) {
+    setStatus('#mcp-search-status', 'sin resultados');
+    return;
+  }
+  setStatus('#mcp-search-status', `${data.results.length} resultado(s)`);
+  for (const r of data.results) {
+    const li = el('li', r.installed ? 'active' : '');
+    const main = el('div', 'grow');
+    main.append(el('div', '', r.name || r.id), el('div', 'pmeta', r.description || r.id));
+    li.appendChild(main);
+    const actions = el('div', 'pactions');
+    if (r.requiredEnv?.length) actions.appendChild(el('span', 'pmeta', `env: ${r.requiredEnv.join(', ')}`));
+    if (r.installed) actions.appendChild(el('span', 'pmeta', 'instalado'));
+    else actions.appendChild(button('instalar', (event) => { event.stopPropagation(); installMcpFromRegistry(r.registry || r.name); }));
+    li.appendChild(actions);
+    mcpSearchResultsEl.appendChild(li);
+  }
+}
+
+async function installMcpFromRegistry(name) {
+  setStatus('#mcp-search-status', `instalando ${name}…`);
+  const data = await api('/api/mcp/import', { method: 'POST', body: { name } }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#mcp-search-status', data.error, 'err');
+  const required = (data.requiredEnv ?? []).length ? ` · requiere env: ${data.requiredEnv.join(', ')}` : '';
+  setStatus('#mcp-search-status', `instalado ${data.imported}${required}`, 'ok');
+  await refreshMcp();
+  await refreshMcpCatalog();
+  await searchMcp();
+}
+
+async function refreshSkillCatalog() {
+  if (!skillCatalogEl) return;
+  const data = await api('/api/skills/catalog').catch(() => null);
+  if (!data) return;
+  clear(skillCatalogEl);
+  for (const entry of data.catalog) {
+    const li = el('li', entry.installed ? 'active' : '');
+    const main = el('div', 'grow');
+    main.append(el('div', '', entry.name), el('div', 'pmeta', entry.description || ''));
+    li.appendChild(main);
+    const actions = el('div', 'pactions');
+    if (entry.installed) actions.appendChild(el('span', 'pmeta', 'instalada'));
+    else actions.appendChild(button('instalar', (event) => { event.stopPropagation(); installCatalogSkill(entry.id); }));
+    li.appendChild(actions);
+    skillCatalogEl.appendChild(li);
+  }
+}
+
+async function installCatalogSkill(id) {
+  setStatus('#skill-import-status', `instalando ${id}…`);
+  const data = await api('/api/skills', { method: 'POST', body: { id } }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#skill-import-status', data.error, 'err');
+  setStatus('#skill-import-status', `instalada ${id} (deshabilitada)`, 'ok');
+  await refreshSkills();
+  await refreshSkillCatalog();
+}
+
+async function searchSkills() {
+  const input = $('#skill-search');
+  const q = input?.value.trim();
+  if (!q) return;
+  setStatus('#skill-search-status', 'buscando…');
+  const data = await api(`/api/skills/search?q=${encodeURIComponent(q)}`).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#skill-search-status', data.error, 'err');
+  clear(skillSearchResultsEl);
+  if (!data.results.length) {
+    setStatus('#skill-search-status', 'sin resultados');
+    return;
+  }
+  setStatus('#skill-search-status', `${data.results.length} resultado(s)`);
+  for (const r of data.results) {
+    const li = el('li', r.installed ? 'active' : '');
+    const main = el('div', 'grow');
+    main.append(el('div', '', r.source), el('div', 'pmeta', r.description || r.ref));
+    li.appendChild(main);
+    const actions = el('div', 'pactions');
+    if (r.installed) actions.appendChild(el('span', 'pmeta', 'instalada'));
+    else actions.appendChild(button('instalar', (event) => { event.stopPropagation(); installSkillRef(r.ref); }));
+    li.appendChild(actions);
+    skillSearchResultsEl.appendChild(li);
+  }
+}
+
+async function installSkillRef(ref) {
+  setStatus('#skill-search-status', `instalando ${ref}…`);
+  const data = await api('/api/skills/import', { method: 'POST', body: { ref } }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#skill-search-status', data.error, 'err');
+  setStatus('#skill-search-status', `instalada ${data.installed}`, 'ok');
+  await refreshSkills();
+  await refreshSkillCatalog();
+  await searchSkills();
+}
+
 if (mcpListEl) {
   $('#mcp-new').addEventListener('click', () => openMcpForm());
   $('#mcp-import-btn')?.addEventListener('click', importMcp);
@@ -5036,7 +5372,46 @@ if (mcpListEl) {
       importSkill();
     }
   });
+  $('#mcp-search-btn')?.addEventListener('click', searchMcp);
+  $('#mcp-search')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      searchMcp();
+    }
+  });
+  $('#skill-search-btn')?.addEventListener('click', searchSkills);
+  $('#skill-search')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      searchSkills();
+    }
+  });
+  refreshMcpCatalog();
+  refreshSkillCatalog();
   $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
+  mcpModeEl?.addEventListener('change', async () => {
+    try {
+      await api('/api/settings', { method: 'PUT', body: { mcpMode: mcpModeEl.value } });
+      await refreshMcp({ connect: true });
+    } catch (error) {
+      toast(error.message);
+    }
+  });
+  const savePinnedMcp = async () => {
+    try {
+      await api('/api/settings', { method: 'PUT', body: { mcpPinned: String(mcpPinnedEl.value || '') } });
+      await refreshMcp({ connect: true });
+    } catch (error) {
+      toast(error.message);
+    }
+  };
+  $('#mcp-pinned-save')?.addEventListener('click', savePinnedMcp);
+  mcpPinnedEl?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      savePinnedMcp();
+    }
+  });
   $('#tg-save')?.addEventListener('click', submitChannel);
   $('#tg-test')?.addEventListener('click', testChannel);
 $('#voz-save')?.addEventListener('click', submitVoz);
@@ -5523,6 +5898,7 @@ function refreshExplorerMode() {
   if (explorerMode === 'files') refreshExplorer();
   else if (explorerMode === 'procs') detectProcs();
   else if (explorerMode === 'git') refreshGit();
+  else if (explorerMode === 'preview') syncPreviewTunnel();
 }
 
 document.querySelectorAll('.xtab').forEach((tab) => tab.addEventListener('click', () => setExplorerMode(tab.dataset.xp)));
@@ -5575,16 +5951,75 @@ const previewTools = setupPreviewTools({
   teleport: true,
 });
 restorePreviewMax = () => previewTools.setMax(false);
-previewTools.applyDevice();
+
+const PREVIEW_URL_KEY = 'tamnora-preview-url';
+const PREVIEW_DEVICE_KEY = 'tamnora-preview-device';
+
+/** True si la consola corre en la misma maquina que el server (loopback). */
+function isLocalHost() {
+  const host = String(location.hostname || '').toLowerCase();
+  return host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]' || host.endsWith('.localhost');
+}
+
+/** Puerto si la URL apunta a loopback (127.0.0.1/localhost/::1). */
+function localPortOf(url) {
+  const match = String(url ?? '').match(/^https?:\/\/(?:localhost|127(?:\.\d+){3}|\[::1\]):(\d+)/i);
+  return match ? Number(match[1]) : 0;
+}
+
+function setTunnelUi(tunnel) {
+  const closeBtn = $('#preview-close');
+  if (closeBtn) closeBtn.hidden = !tunnel;
+  if (tunnel) {
+    const why = tunnel.provider === 'tailscale' ? 'privado (tailscale)' : tunnel.provider ? tunnel.provider : '';
+    setPreviewStatus(`acceso remoto activo: ${tunnel.url}${why ? ` · ${why}` : ''}`);
+  }
+}
+
+async function syncPreviewTunnel({ load = false } = {}) {
+  const data = await api('/api/preview').catch(() => null);
+  const tunnel = data?.tunnel || null;
+  setTunnelUi(tunnel);
+  if (tunnel?.url && load) loadPreview(tunnel.url);
+  return tunnel;
+}
+
+/** Espera a que el server confirme el tunel si la respuesta del POST se corto. */
+async function pollPreviewTunnel(tries = 5, delayMs = 1200) {
+  for (let i = 0; i < tries; i++) {
+    const data = await api('/api/preview').catch(() => null);
+    if (data?.tunnel?.url) return data.tunnel;
+    await new Promise((resolve) => setTimeout(resolve, delayMs));
+  }
+  return null;
+}
 
 function loadPreview(url) {
   const value = String(url ?? '').trim();
   if (!value) return setPreviewStatus('Poné una URL (p. ej. http://127.0.0.1:5173).', true);
   previewUrlInput.value = value;
   previewFrame.src = value;
+  storage.set(PREVIEW_URL_KEY, value);
   setPreviewStatus(`cargando ${value} …`);
 }
 
+/** Abre acceso remoto al puerto (tailscale privado o tunel publico). */
+async function openRemoteTunnel(port) {
+  const provider = $('#preview-provider')?.value || 'tailscale';
+  setPreviewStatus(`abriendo acceso remoto (${provider})…`);
+  const data = await api('/api/preview/tunnel', { method: 'POST', body: { port, provider } }).catch((e) => ({ error: e.message }));
+  if (data?.error) {
+    // La respuesta pudo cortarse (p. ej. la tablet en background): el server pudo
+    // haber abierto igual el tunel, asi que lo confirmamos antes de fallar.
+    const tunnel = await pollPreviewTunnel();
+    if (!tunnel) return setPreviewStatus(`error: ${data.error}`, true);
+    setTunnelUi(tunnel);
+    return loadPreview(tunnel.url);
+  }
+  setTunnelUi(data.tunnel);
+  loadPreview(data.tunnel.url);
+}
+
 $('#preview-open')?.addEventListener('click', () => loadPreview(previewUrlInput.value));
 previewUrlInput?.addEventListener('keydown', (event) => {
   if (event.key === 'Enter') {
@@ -5595,16 +6030,29 @@ previewUrlInput?.addEventListener('keydown', (event) => {
 previewFrame?.addEventListener('load', () => {
   if (previewFrame.src) setPreviewStatus(previewFrame.src);
 });
-$('#preview-tunnel')?.addEventListener('click', async () => {
+$('#preview-tunnel')?.addEventListener('click', () => {
   const match = String(previewUrlInput.value).match(/:(\d+)/);
   const port = match ? Number(match[1]) : 0;
   if (!port) return setPreviewStatus('Poné una URL con puerto (p. ej. http://127.0.0.1:5173).', true);
-  setPreviewStatus('abriendo túnel público…');
-  const data = await api('/api/preview/tunnel', { method: 'POST', body: { port } }).catch((e) => ({ error: e.message }));
-  if (data?.error) return setPreviewStatus(`error: ${data.error}`, true);
-  loadPreview(data.tunnel.url);
-  setPreviewStatus(`túnel público: ${data.tunnel.url}`);
+  openRemoteTunnel(port);
+});
+$('#preview-close')?.addEventListener('click', async () => {
+  await api('/api/preview/tunnel', { method: 'DELETE' }).catch(() => null);
+  setTunnelUi(null);
+  setPreviewStatus('acceso remoto cerrado.');
 });
+$('#preview-device')?.addEventListener('change', (event) => storage.set(PREVIEW_DEVICE_KEY, event.target.value));
+
+// Restaurar lo tipeado y el tamano elegido: en la tablet la pagina se recarga
+// sola (iOS la descarta en background) y antes se perdia todo el estado.
+(function restorePreview() {
+  const savedDevice = storage.get(PREVIEW_DEVICE_KEY, '');
+  if (savedDevice && $('#preview-device')) $('#preview-device').value = savedDevice;
+  previewTools.applyDevice();
+  const savedUrl = storage.get(PREVIEW_URL_KEY, '');
+  if (savedUrl) previewUrlInput.value = savedUrl;
+  syncPreviewTunnel({ load: true });
+})();
 
 /* procs: deteccion y dev servers */
 
@@ -5646,7 +6094,6 @@ async function refreshProcs() {
   }
   if (!data.procs.length) {
     procsListEl.appendChild(el('li', 'muted', 'sin procesos corriendo'));
-    return;
   }
   for (const proc of data.procs) {
     const li = el('li', proc.running ? 'active' : '');
@@ -5658,11 +6105,42 @@ async function refreshProcs() {
     li.appendChild(main);
     const actions = el('div', 'pactions');
     actions.appendChild(button('logs', () => { selectedProc = proc.id; refreshProcLog(); }));
-    if (proc.port) actions.appendChild(button('preview', () => { setExplorerMode('preview'); loadPreview(`http://127.0.0.1:${proc.port}`); }));
+    if (proc.port) actions.appendChild(button('preview', () => openProcPreview(proc.port)));
     if (proc.running) actions.appendChild(button('detener', () => stopProc(proc.id), 'btn danger'));
     li.appendChild(actions);
     procsListEl.appendChild(li);
   }
+  await renderTunnelRow();
+}
+
+/** Fila del tunel activo: no es un proc (lo maneja la ruta preview), pero
+ * conviene verlo y poder cerrarlo aca. */
+async function renderTunnelRow() {
+  const data = await api('/api/preview').catch(() => null);
+  const tunnel = data?.tunnel;
+  if (!tunnel?.url) return;
+  const li = el('li', 'active');
+  const main = el('div', 'grow');
+  main.append(
+    el('div', '', `túnel → puerto ${tunnel.port}`),
+    el('div', 'pmeta', `${tunnel.provider || ''} · ${tunnel.url}`)
+  );
+  li.appendChild(main);
+  const actions = el('div', 'pactions');
+  actions.appendChild(button('preview', () => { setExplorerMode('preview'); loadPreview(tunnel.url); }));
+  actions.appendChild(
+    button('detener', async () => { await api('/api/preview/tunnel', { method: 'DELETE' }).catch(() => null); refreshProcs(); }, 'btn danger')
+  );
+  li.appendChild(actions);
+  procsListEl.appendChild(li);
+}
+
+/** Preview de un proc: local si la consola corre en la misma maquina, remoto
+ * (tailscale/tunel) si se accede desde otro dispositivo. */
+async function openProcPreview(port) {
+  setExplorerMode('preview');
+  if (isLocalHost()) return loadPreview(`http://127.0.0.1:${port}`);
+  return openRemoteTunnel(port);
 }
 
 async function startProc(chip) {
@@ -5993,7 +6471,7 @@ let baseTitle = '';
  * tienen que marcar que hay un permiso esperando.
  */
 function renderAlertSignals() {
-  const pending = state.pendingAsks.size;
+  const pending = state.pendingAsks.size + state.pendingQuestions.size;
   if (!baseTitle) baseTitle = document.title;
   const clean = baseTitle.replace(/^\(⚠ \d+\) /, '');
   document.title = pending > 0 ? `(⚠ ${pending}) ${clean}` : clean;