@danieltmn/tamnora 0.1.0 → 0.3.0

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

@@ -57,6 +57,7 @@ const ICON_PATHS = {
   'folder-open': ['m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'],
   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'],
 };
 
 function icon(name, size = 16, className = '') {
@@ -166,6 +167,7 @@ function activateTab(name) {
   hideMoreMenu();
   if (name === 'runs') refreshRuns();
   if (name === 'proveedores') refreshProviders();
+  if (name === 'ajustes') { refreshMcp(); refreshSkills(); }
 }
 
 document.querySelectorAll('.tab[data-tab]').forEach((t) =>
@@ -210,8 +212,10 @@ const PALETTE_COMMANDS = [
   { id: 'init', label: 'Analizar el proyecto y crear AGENTS.md', hint: '/init', run: () => runSlash('init') },
   { 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: () => settingsModal?.showModal() },
   { id: 'providers', label: 'Gestionar proveedores', run: () => activateTab('proveedores') },
+  { id: 'ajustes', label: 'MCP y Skills (ajustes)', run: () => activateTab('ajustes') },
   { id: 'explorer', label: 'Mostrar u ocultar archivos', run: () => setExplorerOpen(!state.explorerOpen) },
   { id: 'sidebar', label: 'Mostrar u ocultar sesiones', run: () => setSidebarOpen(!state.sidebarOpen) },
   { id: 'theme', label: 'Cambiar tema', run: () => applyTheme(document.documentElement.dataset.theme === 'paper' ? 'dark' : 'paper') },
@@ -369,14 +373,36 @@ async function loadModes() {
   updateStatus();
 }
 
-modeSelect.addEventListener('change', async () => {
-  await api('/api/settings', { method: 'PUT', body: { mode: modeSelect.value } }).catch(() => null);
+function modeLabel(id) {
+  const option = [...modeSelect.options].find((o) => o.value === id);
+  return option ? option.textContent : id;
+}
+
+async function setMode(id, { persist = true } = {}) {
+  if (![...modeSelect.options].some((o) => o.value === id)) return;
+  modeSelect.value = id;
+  if (persist) await api('/api/settings', { method: 'PUT', body: { mode: id } }).catch(() => null);
   updateStatus();
+}
+
+async function toggleMode() {
+  const next = modeSelect.value === 'plan' ? 'agent' : 'plan';
+  await setMode(next);
+  notify(`Modo **${modeLabel(next)}**${next === 'plan' ? ' (solo lectura)' : ''}`);
+}
+
+modeSelect.addEventListener('change', () => setMode(modeSelect.value));
+
+document.addEventListener('keydown', (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === '.') {
+    event.preventDefault();
+    toggleMode();
+  }
 });
 
 function updateStatus(extra = {}) {
   const p = state.providers.find((x) => x.id === state.active.provider);
-  $('#sb-mode').textContent = modeSelect.value || 'agent';
+  $('#sb-mode').textContent = modeLabel(modeSelect.value) || 'Build';
   $('#sb-provider').textContent = p ? `${p.id}` : state.active.provider || '—';
   $('#sb-model').textContent = state.active.model || '—';
   if (extra.rounds !== undefined) $('#sb-rounds').textContent = `${extra.rounds} rondas`;
@@ -948,6 +974,16 @@ async function refreshSessions() {
     twisty.appendChild(icon(collapsed ? 'chevron-right' : 'chevron-down', 14));
     head.append(twisty, icon('folder', 15, 'fi'), el('span', 'gname', key ? basename(key) : 'sin carpeta'), el('span', 'gcount', String(items.length)));
     head.title = key || 'sesiones sin carpeta';
+    const delGroup = el('button', 'group-del');
+    delGroup.type = 'button';
+    delGroup.title = 'eliminar proyecto (borra sus sesiones, no los archivos)';
+    delGroup.setAttribute('aria-label', 'eliminar proyecto');
+    delGroup.appendChild(icon('trash', 13));
+    delGroup.addEventListener('click', (event) => {
+      event.stopPropagation();
+      removeProject(key, items.length);
+    });
+    head.appendChild(delGroup);
     const list = el('ul', 'group-sessions');
     list.hidden = collapsed;
     head.addEventListener('click', () => {
@@ -961,8 +997,18 @@ async function refreshSessions() {
     });
     for (const session of items) {
       const li = el('li', `session-item${session.id === state.sessionId ? ' active' : ''}`);
-      li.appendChild(el('div', '', session.title || '(sin título)'));
+      li.appendChild(el('span', 'session-title', session.title || '(sin título)'));
       li.title = `${session.provider ?? ''}/${session.model ?? ''}${session.cwd ? ` · ${session.cwd}` : ''}`;
+      const del = el('button', 'session-del');
+      del.type = 'button';
+      del.title = 'eliminar sesión';
+      del.setAttribute('aria-label', `eliminar sesión ${session.title || ''}`);
+      del.appendChild(icon('trash', 13));
+      del.addEventListener('click', (event) => {
+        event.stopPropagation();
+        removeSession(session);
+      });
+      li.appendChild(del);
       li.addEventListener('click', () => {
   if (isMobile()) setSidebarOpen(false);
   openTab(session.id);
@@ -975,6 +1021,32 @@ async function refreshSessions() {
   if (!data.sessions.length) sessionsEl.appendChild(el('li', 'muted', 'sin sesiones'));
 }
 
+function closeSessionsOf(cwd) {
+  for (const [id, record] of [...state.panes]) {
+    if ((record.cwd || '') === (cwd || '')) closeTab(id);
+  }
+}
+
+async function removeSession(session) {
+  const name = session.title || '(sin título)';
+  if (!window.confirm(`¿Eliminar la sesión "${name}"? No se puede deshacer.`)) return;
+  const error = await api(`/api/sessions/${session.id}`, { method: 'DELETE' }).then(() => null).catch((e) => e);
+  if (error) return notify(`No se pudo eliminar: ${error.message}`, 'notice err');
+  if (state.panes.has(session.id)) closeTab(session.id);
+  refreshSessions();
+}
+
+async function removeProject(cwd, count) {
+  const label = cwd ? basename(cwd) : 'sin carpeta';
+  if (!window.confirm(`¿Eliminar ${count} sesión(es) del proyecto "${label}"? No se tocan los archivos del disco.`)) return;
+  const error = await api(`/api/projects?cwd=${encodeURIComponent(cwd ?? '')}`, { method: 'DELETE' })
+    .then(() => null)
+    .catch((e) => e);
+  if (error) return notify(`No se pudo eliminar el proyecto: ${error.message}`, 'notice err');
+  closeSessionsOf(cwd);
+  refreshSessions();
+}
+
 /* --- session tabs --------------------------------------------------------- */
 
 function registerSession(session, messages = [], tokens = { in: 0, out: 0 }) {
@@ -1847,6 +1919,275 @@ providerModal.addEventListener('click', (event) => {
   if (event.target === providerModal) closeProviderForm();
 });
 
+/* --- ajustes: MCP + Skills ----------------------------------------------- */
+
+const mcpListEl = $('#mcp-list');
+const mcpModal = $('#mcp-modal');
+const mcpForm = $('#mcp-form');
+const skillListEl = $('#skill-list');
+const skillModal = $('#skill-modal');
+const skillForm = $('#skill-form');
+
+function setStatus(node, text, cls = '') {
+  const elNode = $(node);
+  if (!elNode) return;
+  elNode.className = `summary ${cls}`.trim();
+  elNode.textContent = text;
+}
+
+async function refreshMcp({ connect = false } = {}) {
+  const data = await api(`/api/mcp${connect ? '?connect=1' : ''}`).catch(() => null);
+  if (!data) return;
+  clear(mcpListEl);
+  if (!data.servers.length) {
+    mcpListEl.appendChild(el('li', 'muted', 'sin servidores MCP'));
+    return;
+  }
+  for (const s of data.servers) {
+    const li = el('li', s.enabled ? 'active' : '');
+    li.appendChild(el('span', `pdot${s.ok !== false ? ' on' : ''}`));
+    const main = el('div', 'grow');
+    const title = el('div');
+    title.append(el('span', 'pid', s.id), document.createTextNode(' '), el('span', 'pmeta', s.name || ''));
+    const detail = s.transport === 'http' ? s.url || '' : `${s.command || ''} ${(s.args || []).join(' ')}`.trim();
+    const parts = [s.transport, detail || '(sin destino)', s.source === 'config' ? 'tamnora.json' : 'guardado'];
+    if (connect) {
+      if (s.ok === false) parts.push(`error: ${s.error}`);
+      else parts.push(`${(s.tools || []).length} tools`);
+    }
+    main.append(title, el('div', 'pmeta', parts.join(' · ')));
+    li.appendChild(main);
+    li.appendChild(button(s.enabled ? 'deshabilitar' : 'habilitar', (event) => { event.stopPropagation(); toggleMcp(s); }));
+    li.appendChild(button('editar', (event) => { event.stopPropagation(); openMcpForm(s); }));
+    if (s.source !== 'config') li.appendChild(button('borrar', (event) => { event.stopPropagation(); removeMcp(s.id); }, 'btn danger'));
+    li.addEventListener('click', () => openMcpForm(s));
+    mcpListEl.appendChild(li);
+  }
+}
+
+function syncMcpFormFields() {
+  const http = $('#mf-transport').value === 'http';
+  $('#mf-command-field').hidden = http;
+  $('#mf-args-field').hidden = http;
+  $('#mf-url-field').hidden = !http;
+}
+
+function openMcpForm(server = null) {
+  $('#mcp-title').textContent = server ? `editar ${server.id}` : 'nuevo servidor MCP';
+  $('#mf-id').value = server?.id ?? '';
+  $('#mf-id').readOnly = Boolean(server);
+  $('#mf-name').value = server?.name ?? '';
+  $('#mf-transport').value = server?.transport === 'http' ? 'http' : 'stdio';
+  $('#mf-command').value = server?.command ?? '';
+  $('#mf-args').value = (server?.args ?? []).join(' ');
+  $('#mf-url').value = server?.url ?? '';
+  $('#mf-enabled').checked = server ? server.enabled !== false : true;
+  syncMcpFormFields();
+  setStatus('#mf-status', '');
+  mcpModal.showModal();
+  if (!server) $('#mf-id').focus();
+}
+
+function closeMcpForm() {
+  if (mcpModal.open) mcpModal.close();
+}
+
+async function toggleMcp(server) {
+  await api(`/api/mcp/servers/${encodeURIComponent(server.id)}`, {
+    method: 'PUT',
+    body: {
+      name: server.name,
+      transport: server.transport,
+      command: server.command,
+      args: server.args,
+      url: server.url,
+      enabled: !server.enabled,
+    },
+  }).catch((error) => notify(`No se pudo actualizar MCP: ${error.message}`, 'notice err'));
+  refreshMcp();
+}
+
+async function removeMcp(id) {
+  if (!window.confirm(`¿Eliminar el servidor MCP "${id}"?`)) return;
+  const error = await api(`/api/mcp/servers/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    .then(() => null)
+    .catch((e) => e);
+  if (error) return notify(`No se pudo eliminar: ${error.message}`, 'notice err');
+  refreshMcp();
+}
+
+async function submitMcp(event) {
+  event.preventDefault();
+  const id = $('#mf-id').value.trim();
+  if (!id) return setStatus('#mf-status', 'Falta el id.', 'err');
+  const body = {
+    name: $('#mf-name').value.trim() || id,
+    transport: $('#mf-transport').value,
+    command: $('#mf-command').value.trim(),
+    args: $('#mf-args').value.trim(),
+    url: $('#mf-url').value.trim(),
+    enabled: $('#mf-enabled').checked,
+  };
+  try {
+    await api(`/api/mcp/servers/${encodeURIComponent(id)}`, { method: 'PUT', body });
+  } catch (error) {
+    return setStatus('#mf-status', error.message, 'err');
+  }
+  closeMcpForm();
+  refreshMcp();
+}
+
+async function refreshSkills() {
+  const data = await api('/api/skills').catch(() => null);
+  if (!data) return;
+  clear(skillListEl);
+  if (!data.skills.length) {
+    skillListEl.appendChild(el('li', 'muted', 'sin skills todavía'));
+    return;
+  }
+  for (const s of data.skills) {
+    const li = el('li', s.enabled ? 'active' : '');
+    li.appendChild(el('span', `pdot${s.enabled ? ' on' : ''}`));
+    const main = el('div', 'grow');
+    main.append(
+      el('div', '', s.name || s.id),
+      el('div', 'pmeta', s.description || s.when || '(sin descripción)')
+    );
+    li.appendChild(main);
+    li.appendChild(button(s.enabled ? 'deshabilitar' : 'habilitar', (event) => { event.stopPropagation(); toggleSkill(s.id); }));
+    li.appendChild(button('editar', (event) => { event.stopPropagation(); openSkillForm(s.id); }));
+    if (s.removable) li.appendChild(button('borrar', (event) => { event.stopPropagation(); removeSkill(s.id); }, 'btn danger'));
+    li.addEventListener('click', () => openSkillForm(s.id));
+    skillListEl.appendChild(li);
+  }
+}
+
+async function openSkillForm(id = null) {
+  $('#skill-title').textContent = id ? `editar ${id}` : 'nueva skill';
+  $('#sf-id').value = id ?? '';
+  $('#sf-id').readOnly = Boolean(id);
+  $('#sf-name').value = '';
+  $('#sf-description').value = '';
+  $('#sf-when').value = '';
+  $('#sf-body').value = '';
+  setStatus('#sf-status', '');
+  if (id) {
+    const data = await api(`/api/skills/${encodeURIComponent(id)}`).catch(() => null);
+    if (data?.skill) {
+      $('#sf-name').value = data.skill.name ?? '';
+      $('#sf-description').value = data.skill.description ?? '';
+      $('#sf-when').value = data.skill.when ?? '';
+      $('#sf-body').value = data.skill.body ?? '';
+    }
+  }
+  skillModal.showModal();
+  if (!id) $('#sf-id').focus();
+}
+
+function closeSkillForm() {
+  if (skillModal.open) skillModal.close();
+}
+
+async function toggleSkill(id) {
+  const error = await api(`/api/skills/${encodeURIComponent(id)}/toggle`, { method: 'POST' })
+    .then(() => null)
+    .catch((e) => e);
+  if (error) return notify(`No se pudo cambiar la skill: ${error.message}`, 'notice err');
+  refreshSkills();
+}
+
+async function removeSkill(id) {
+  if (!window.confirm(`¿Eliminar la skill "${id}"?`)) return;
+  const error = await api(`/api/skills/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    .then(() => null)
+    .catch((e) => e);
+  if (error) return notify(`No se pudo eliminar: ${error.message}`, 'notice err');
+  refreshSkills();
+}
+
+async function submitSkill(event) {
+  event.preventDefault();
+  const id = $('#sf-id').value.trim();
+  if (!id) return setStatus('#sf-status', 'Falta el id.', 'err');
+  const body = {
+    name: $('#sf-name').value.trim() || id,
+    description: $('#sf-description').value.trim(),
+    when: $('#sf-when').value.trim(),
+    body: $('#sf-body').value,
+  };
+  try {
+    await api(`/api/skills/${encodeURIComponent(id)}`, { method: 'PUT', body });
+  } catch (error) {
+    return setStatus('#sf-status', error.message, 'err');
+  }
+  closeSkillForm();
+  refreshSkills();
+}
+
+async function importMcp() {
+  const input = $('#mcp-import');
+  const value = input.value.trim();
+  if (!value) return;
+  setStatus('#mcp-import-status', 'importando…');
+  const payload = value.startsWith('{')
+    ? { json: value }
+    : /^https?:\/\//i.test(value)
+      ? { url: value }
+      : { name: value };
+  const data = await api('/api/mcp/import', { method: 'POST', body: payload }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#mcp-import-status', data.error, 'err');
+  input.value = '';
+  const required = (data.requiredEnv ?? []).length ? ` · requiere env: ${data.requiredEnv.join(', ')}` : '';
+  setStatus('#mcp-import-status', `Importado ${data.imported}${required}`, 'ok');
+  refreshMcp();
+}
+
+async function importSkill() {
+  const input = $('#skill-import');
+  const ref = input.value.trim();
+  if (!ref) return;
+  setStatus('#skill-import-status', 'importando desde GitHub…');
+  const data = await api('/api/skills/import', { method: 'POST', body: { ref } }).catch((e) => ({ error: e.message }));
+  if (data?.error) return setStatus('#skill-import-status', data.error, 'err');
+  input.value = '';
+  setStatus('#skill-import-status', `Importada ${data.installed} (${data.source})`, 'ok');
+  refreshSkills();
+}
+
+if (mcpListEl) {
+  $('#mcp-new').addEventListener('click', () => openMcpForm());
+  $('#mcp-import-btn')?.addEventListener('click', importMcp);
+  $('#mcp-import')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      importMcp();
+    }
+  });
+  $('#skill-import-btn')?.addEventListener('click', importSkill);
+  $('#skill-import')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      importSkill();
+    }
+  });
+  $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
+  $('#mcp-close').addEventListener('click', closeMcpForm);
+  $('#mf-cancel').addEventListener('click', closeMcpForm);
+  $('#mf-transport').addEventListener('change', syncMcpFormFields);
+  mcpForm.addEventListener('submit', submitMcp);
+  mcpModal.addEventListener('click', (event) => {
+    if (event.target === mcpModal) closeMcpForm();
+  });
+
+  $('#skill-new').addEventListener('click', () => openSkillForm());
+  $('#skill-close').addEventListener('click', closeSkillForm);
+  $('#sf-cancel').addEventListener('click', closeSkillForm);
+  skillForm.addEventListener('submit', submitSkill);
+  skillModal.addEventListener('click', (event) => {
+    if (event.target === skillModal) closeSkillForm();
+  });
+}
+
 /* --- eval ---------------------------------------------------------------- */
 
 const evalTasks = $('#eval-tasks');
@@ -2018,7 +2359,7 @@ function setExplorerOpen(open) {
   } catch {
     // storage unavailable
   }
-  if (open) refreshExplorer();
+  if (open) refreshExplorerMode();
 }
 
 function fileListUrl(relPath) {
@@ -2147,9 +2488,146 @@ async function openFilePreview(relPath, name) {
   $('#file-modal').showModal();
 }
 
+/* --- explorer panes: estructura / preview / procs ------------------------- */
+
+const xpPanes = { files: $('#xp-files'), preview: $('#xp-preview'), procs: $('#xp-procs') };
+let explorerMode = 'files';
+
+function setExplorerMode(mode) {
+  explorerMode = xpPanes[mode] ? mode : 'files';
+  for (const [name, pane] of Object.entries(xpPanes)) pane.hidden = name !== explorerMode;
+  document.querySelectorAll('.xtab').forEach((b) => b.classList.toggle('is-active', b.dataset.xp === explorerMode));
+  refreshExplorerMode();
+}
+
+function refreshExplorerMode() {
+  if (!state.explorerOpen) return;
+  if (explorerMode === 'files') refreshExplorer();
+  else if (explorerMode === 'procs') detectProcs();
+}
+
+document.querySelectorAll('.xtab').forEach((tab) => tab.addEventListener('click', () => setExplorerMode(tab.dataset.xp)));
+
+/* preview: iframe del dev server (local o por tunel) */
+
+const previewFrame = $('#preview-frame');
+const previewUrlInput = $('#preview-url');
+const previewStatusEl = $('#preview-status');
+
+function setPreviewStatus(text, isError = false) {
+  previewStatusEl.textContent = text;
+  previewStatusEl.classList.toggle('err', isError);
+}
+
+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;
+  setPreviewStatus(`cargando ${value} …`);
+}
+
+$('#preview-open')?.addEventListener('click', () => loadPreview(previewUrlInput.value));
+previewUrlInput?.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    loadPreview(previewUrlInput.value);
+  }
+});
+previewFrame?.addEventListener('load', () => {
+  if (previewFrame.src) setPreviewStatus(previewFrame.src);
+});
+$('#preview-tunnel')?.addEventListener('click', async () => {
+  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}`);
+});
+
+/* procs: deteccion y dev servers */
+
+const procsListEl = $('#procs-list');
+const procsChipsEl = $('#procs-chips');
+const procsCwdEl = $('#procs-cwd');
+const procsLogEl = $('#procs-log');
+let selectedProc = null;
+
+async function detectProcs() {
+  clear(procsChipsEl);
+  const cwd = state.cwd || '';
+  procsCwdEl.textContent = cwd ? `cwd: ${cwd}` : 'sin carpeta';
+  const data = await api(`/api/procs/detect?cwd=${encodeURIComponent(cwd)}`).catch(() => null);
+  if (!data) return;
+  for (const chip of data.chips) procsChipsEl.appendChild(button(chip.label, () => startProc(chip), 'xchip'));
+  if (!data.chips.length) procsChipsEl.appendChild(el('span', 'muted', 'no detecté comandos de dev'));
+  await refreshProcs();
+}
+
+async function refreshProcs() {
+  const data = await api('/api/procs').catch(() => null);
+  if (!data) return;
+  clear(procsListEl);
+  if (!data.enabled) {
+    procsListEl.appendChild(el('li', 'muted', 'procesos deshabilitados (processes.enabled = false)'));
+    return;
+  }
+  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' : '');
+    const main = el('div', 'grow');
+    main.append(
+      el('div', '', `${proc.command} ${(proc.args || []).join(' ')}`),
+      el('div', 'pmeta', `${proc.status}${proc.port ? ` · puerto ${proc.port}` : ''}`)
+    );
+    li.appendChild(main);
+    li.appendChild(button('logs', () => { selectedProc = proc.id; refreshProcLog(); }));
+    if (proc.port) li.appendChild(button('preview', () => { setExplorerMode('preview'); loadPreview(`http://127.0.0.1:${proc.port}`); }));
+    if (proc.running) li.appendChild(button('detener', () => stopProc(proc.id), 'btn danger'));
+    procsListEl.appendChild(li);
+  }
+}
+
+async function startProc(chip) {
+  const data = await api('/api/procs/start', {
+    method: 'POST',
+    body: { cwd: chip.cwd || state.cwd, command: chip.command, args: chip.args, port: chip.port },
+  }).catch((e) => ({ error: e.message }));
+  if (data?.error) {
+    procsCwdEl.classList.add('err');
+    procsCwdEl.textContent = `error: ${data.error}`;
+    return;
+  }
+  procsCwdEl.classList.remove('err');
+  selectedProc = data.proc.id;
+  await refreshProcs();
+  refreshProcLog();
+}
+
+async function stopProc(id) {
+  await api(`/api/procs/${id}/stop`, { method: 'POST' }).catch(() => null);
+  await refreshProcs();
+}
+
+async function refreshProcLog() {
+  if (!selectedProc) return;
+  const data = await api(`/api/procs/${selectedProc}/logs`).catch(() => null);
+  if (!data) return;
+  procsLogEl.textContent = (data.logs || []).map((l) => l.text).join('').slice(-4000) || '(sin salida)';
+  procsLogEl.scrollTop = procsLogEl.scrollHeight;
+}
+
+$('#procs-detect')?.addEventListener('click', detectProcs);
+
 explorerToggle.addEventListener('click', () => setExplorerOpen(!state.explorerOpen));
 $('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
-$('#explorer-refresh').addEventListener('click', refreshExplorer);
+$('#explorer-refresh').addEventListener('click', refreshExplorerMode);
 explorerFilter.addEventListener('input', applyTreeFilter);
 $('#file-close').addEventListener('click', () => $('#file-modal').close());
 $('#file-modal').addEventListener('click', (event) => {