@danieltmn/tamnora 0.21.1 → 0.22.0

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

@@ -0,0 +1,625 @@
+import { restorePreviewMax } from './app.js';
+import { panels, setStatusText } from './chrome.js';
+import { $, api, button, clear, el, icon, state, storage } from './core.js';
+import { highlight } from './markdown.js';
+
+/* --- explorer (right panel) ----------------------------------------------- */
+
+export const explorer = $('#explorer');
+export const explorerTree = $('#explorer-tree');
+export const explorerRoot = $('#explorer-root');
+export const explorerFilter = $('#explorer-filter');
+export const explorerStatus = $('#explorer-status');
+
+export function setExplorerStatus(text, isError = false) {
+  setStatusText(explorerStatus, text, isError);
+}
+
+export 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;
+    handle.setAttribute('aria-pressed', String(open));
+  }
+  storage.set('tamnora-explorer-open', open ? '1' : '0');
+  if (open) refreshExplorerMode();
+}
+
+export function fileListUrl(relPath) {
+  const params = new URLSearchParams({ root: state.cwd, path: relPath });
+  return `/api/files?${params}`;
+}
+
+export async function loadTreeDir(relPath, container) {
+  clear(container);
+  const placeholder = el('li', 'tree-empty muted', 'cargando…');
+  container.appendChild(placeholder);
+  const data = await api(fileListUrl(relPath)).catch((error) => {
+    placeholder.textContent = error.message;
+    return null;
+  });
+  if (!data) return;
+  clear(container);
+  if (!data.entries.length) {
+    container.appendChild(el('li', 'tree-empty muted', '(vacío)'));
+    return;
+  }
+  for (const entry of data.entries) container.appendChild(treeRow(entry, relPath));
+  applyTreeFilter();
+}
+
+export function joinPath(base, name) {
+  return base ? `${base}/${name}` : name;
+}
+
+export function treeRow(entry, parentPath) {
+  const full = joinPath(parentPath, entry.name);
+  const li = el('li');
+  const row = el('div', `tree-row ${entry.type}`);
+  const twisty = el('span', 'tw');
+  const iconName = entry.type === 'dir' ? 'folder' : 'file';
+  row.append(twisty, icon(iconName, 15, 'fi'), el('span', 'tree-name', entry.name));
+  li.appendChild(row);
+
+  if (entry.type === 'dir') {
+    twisty.appendChild(icon('chevron-right', 14));
+    let children = null;
+    row.addEventListener('click', async () => {
+      const open = !li.classList.contains('open');
+      li.classList.toggle('open', open);
+      clear(twisty);
+      twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
+      if (open && !children) {
+        children = el('ul', 'tree');
+        li.appendChild(children);
+        await loadTreeDir(full, children);
+      }
+    });
+  } else {
+    row.addEventListener('click', () => openFilePreview(full, entry.name));
+  }
+  return li;
+}
+
+export async function refreshExplorer() {
+  if (!state.explorerOpen) return;
+  explorerRoot.textContent = state.cwd || '—';
+  explorerRoot.title = state.cwd || '';
+  explorerFilter.value = '';
+  if (!state.cwd) {
+    clear(explorerTree);
+    setExplorerStatus('sin carpeta de trabajo', true);
+    return;
+  }
+  setExplorerStatus('cargando…');
+  const data = await api(fileListUrl('')).catch((error) => {
+    setExplorerStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  clear(explorerTree);
+  if (!data.entries.length) explorerTree.appendChild(el('li', 'tree-empty muted', '(vacío)'));
+  for (const entry of data.entries) explorerTree.appendChild(treeRow(entry, ''));
+  const dirs = data.entries.filter((e) => e.type === 'dir').length;
+  const files = data.entries.length - dirs;
+  setExplorerStatus(`${files} archivos · ${dirs} carpetas`);
+}
+
+export function matchesFilter(name, query) {
+  return name.toLowerCase().includes(query);
+}
+
+export function applyTreeFilter() {
+  const query = explorerFilter.value.trim().toLowerCase();
+  const walk = (ul) => {
+    let visible = false;
+    for (const li of ul.children) {
+      if (!li.querySelector(':scope > .tree-row')) continue;
+      const name = li.querySelector(':scope > .tree-row .tree-name')?.textContent ?? '';
+      const childUl = li.querySelector(':scope > .tree');
+      const childVisible = childUl ? walk(childUl) : false;
+      const show = !query || matchesFilter(name, query) || childVisible;
+      li.hidden = !show;
+      if (show && query && childUl && childVisible && !li.classList.contains('open')) {
+        li.classList.add('open');
+        refreshTwisty(li, true);
+      }
+      visible = visible || show;
+    }
+    return visible;
+  };
+  walk(explorerTree);
+}
+
+export function refreshTwisty(li, open) {
+  const twisty = li.querySelector(':scope > .tree-row .tw');
+  if (!twisty) return;
+  clear(twisty);
+  twisty.appendChild(icon(open ? 'chevron-down' : 'chevron-right', 14));
+}
+
+export const filePreviewState = { current: null, kind: null, lang: null, loaded: false, open: false, content: '' };
+
+export const filePreviewTools = setupPreviewTools({
+  container: $('#file-modal'),
+  stage: $('#file-stage'),
+  frame: $('#file-frame'),
+  select: $('#file-device'),
+  maxButton: $('#file-max'),
+});
+
+export function filePreviewKind(name) {
+  if (/\.(html?|svg)$/i.test(name)) return 'frame';
+  if (/\.(md|markdown)$/i.test(name)) return 'markdown';
+  return null;
+}
+
+export const CODE_LANGS = {
+  js: 'js', mjs: 'js', cjs: 'js', jsx: 'js',
+  ts: 'ts', tsx: 'ts',
+  json: 'json',
+  css: 'css',
+  html: 'html', htm: 'html',
+  xml: 'xml', svg: 'xml',
+  yml: 'yaml', yaml: 'yaml',
+  sh: 'bash', bash: 'bash',
+  py: 'python',
+};
+
+export function filePreviewLang(name) {
+  const ext = String(name ?? '').split('.').pop().toLowerCase();
+  return CODE_LANGS[ext] || null;
+}
+
+export function renderCodeView(content, lang) {
+  const gutter = $('#file-gutter');
+  const node = $('#file-content');
+  if (!lang) {
+    node.textContent = content;
+    if (gutter) gutter.textContent = '';
+    return;
+  }
+  const lines = content.replace(/\r\n?/g, '\n').split('\n');
+  if (gutter) gutter.textContent = lines.map((_, i) => i + 1).join('\n');
+  node.innerHTML = highlight(content, lang);
+}
+
+export async function openFilePreview(relPath, name) {
+  const params = new URLSearchParams({ root: state.cwd, path: relPath });
+  const data = await api(`/api/files/content?${params}`).catch((error) => {
+    setExplorerStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  const code = $('#file-code');
+  const lang = filePreviewLang(name);
+  filePreviewState.current = { relPath, name };
+  filePreviewState.kind = filePreviewKind(name);
+  filePreviewState.lang = lang;
+  filePreviewState.loaded = false;
+  filePreviewState.open = false;
+  filePreviewState.content = data.content;
+
+  $('#file-title').textContent = name;
+  $('#file-meta').textContent = lang ? `${data.size} bytes · ${lang}` : `${data.size} bytes`;
+  renderCodeView(data.content, lang);
+  code.classList.toggle('has-lang', Boolean(lang));
+
+  const toggle = $('#file-preview-toggle');
+  const device = $('#file-device');
+  const maxButton = $('#file-max');
+  const modal = $('#file-modal');
+
+  toggle.hidden = !filePreviewState.kind;
+  toggle.textContent = 'vista previa';
+  device.hidden = true;
+  device.value = 'auto';
+  maxButton.hidden = false;
+  $('#file-frame').src = 'about:blank';
+  $('#file-stage').hidden = true;
+  $('#file-render').hidden = true;
+  $('#file-render').innerHTML = '';
+  code.hidden = false;
+  filePreviewTools.setMax(false);
+  filePreviewTools.applyDevice();
+
+  modal.showModal();
+}
+
+/* --- explorer panes: estructura / preview / procs ------------------------- */
+
+export const xpPanes = { files: $('#xp-files'), preview: $('#xp-preview'), procs: $('#xp-procs'), git: $('#xp-git') };
+export let explorerMode = 'files';
+
+export 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();
+}
+
+export function refreshExplorerMode() {
+  if (!state.explorerOpen) return;
+  if (explorerMode === 'files') refreshExplorer();
+  else if (explorerMode === 'procs') detectProcs();
+  else if (explorerMode === 'git') refreshGit();
+  else if (explorerMode === 'preview') syncPreviewTunnel();
+}
+
+/* preview: iframe del dev server (local o por tunel) */
+
+export const previewFrame = $('#preview-frame');
+export const previewUrlInput = $('#preview-url');
+export const previewStatusEl = $('#preview-status');
+
+export function setPreviewStatus(text, isError = false) {
+  setStatusText(previewStatusEl, text, isError);
+}
+
+/* Ancho por dispositivo + maximizar, compartido por preview y visor de archivos. */
+export 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';
+  };
+  maxButton?.addEventListener('click', () => setMax(!container?.classList.contains('preview-maximized')));
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && container?.classList.contains('preview-maximized')) setMax(false);
+  });
+  return { applyDevice, setMax };
+}
+
+export const previewTools = setupPreviewTools({
+  container: $('#xp-preview'),
+  stage: $('#preview-stage'),
+  frame: previewFrame,
+  select: $('#preview-device'),
+  maxButton: $('#preview-max'),
+  teleport: true,
+});
+
+export const PREVIEW_URL_KEY = 'tamnora-preview-url';
+export const PREVIEW_DEVICE_KEY = 'tamnora-preview-device';
+
+/** True si la consola corre en la misma maquina que el server (loopback). */
+export 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). */
+export function localPortOf(url) {
+  const match = String(url ?? '').match(/^https?:\/\/(?:localhost|127(?:\.\d+){3}|\[::1\]):(\d+)/i);
+  return match ? Number(match[1]) : 0;
+}
+
+export 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}` : ''}`);
+  }
+}
+
+export 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. */
+export 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;
+}
+
+export 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). */
+export 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);
+}
+
+/* procs: deteccion y dev servers */
+
+export const procsListEl = $('#procs-list');
+export const procsChipsEl = $('#procs-chips');
+export const procsCwdEl = $('#procs-cwd');
+export const procsLogEl = $('#procs-log');
+export let selectedProc = null;
+
+export 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) {
+    const node = button(chip.label, () => startProc(chip), 'xchip');
+    if (chip.source === 'project') node.title = 'definido en .tamnora/procs.json';
+    if (chip.allowed === false) {
+      node.disabled = true;
+      node.title = `"${chip.command}" no está en processes.allow`;
+    }
+    procsChipsEl.appendChild(node);
+  }
+  if (!data.chips.length) procsChipsEl.appendChild(el('span', 'muted', 'no detecté comandos de dev'));
+  else if (data.chips.some((c) => c.source === 'project')) {
+    procsChipsEl.appendChild(el('span', 'muted', '· desde .tamnora/procs.json'));
+  }
+  await refreshProcs();
+}
+
+export 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'));
+  }
+  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);
+    const actions = el('div', 'pactions');
+    actions.appendChild(button('logs', () => { selectedProc = proc.id; refreshProcLog(); }));
+    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. */
+export 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. */
+export async function openProcPreview(port) {
+  setExplorerMode('preview');
+  if (isLocalHost()) return loadPreview(`http://127.0.0.1:${port}`);
+  return openRemoteTunnel(port);
+}
+
+export 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();
+}
+
+export async function stopProc(id) {
+  await api(`/api/procs/${id}/stop`, { method: 'POST' }).catch(() => null);
+  await refreshProcs();
+}
+
+export 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;
+}
+
+/* git: estado del árbol de trabajo y diffs */
+
+export const gitListEl = $('#git-list');
+export const gitBranchEl = $('#git-branch');
+export const gitSyncEl = $('#git-sync');
+export const gitStatusEl = $('#git-status');
+export const gitFilterEl = $('#git-filter');
+export const gitModalEl = $('#git-modal');
+export const gitDiffEl = $('#git-diff');
+export const gitTitleEl = $('#git-title');
+export const gitMetaEl = $('#git-meta');
+export let gitEntries = [];
+
+export const GIT_BADGES = {
+  modified: { letter: 'M', cls: 'mod' },
+  added: { letter: 'A', cls: 'add' },
+  deleted: { letter: 'D', cls: 'del' },
+  renamed: { letter: 'R', cls: 'ren' },
+  untracked: { letter: 'U', cls: 'new' },
+  conflicted: { letter: 'C', cls: 'conf' },
+  ignored: { letter: 'I', cls: 'ign' },
+};
+
+export function setGitStatus(text, isError = false) {
+  setStatusText(gitStatusEl, text, isError);
+}
+
+export function gitGroup(entry) {
+  const staged = entry.index !== ' ' && entry.index !== '?' && entry.index !== '!';
+  const changed =
+    entry.status === 'untracked' ||
+    (entry.worktree !== ' ' && entry.worktree !== '?' && entry.worktree !== '!');
+  return { staged, changed };
+}
+
+export async function refreshGit() {
+  clear(gitListEl);
+  gitBranchEl.textContent = '…';
+  gitSyncEl.textContent = '';
+  if (!state.cwd) return setGitStatus('sin carpeta de trabajo', true);
+  setGitStatus('cargando…');
+  const data = await api(`/api/git/status?cwd=${encodeURIComponent(state.cwd)}`).catch((error) => {
+    setGitStatus(error.message, true);
+    return null;
+  });
+  if (!data) return;
+  gitEntries = data.isRepo ? data.entries : [];
+  if (!data.isRepo) {
+    gitBranchEl.textContent = 'git';
+    gitListEl.appendChild(el('li', 'tree-empty muted', 'no es un repositorio git'));
+    setGitStatus('sin repositorio');
+    return;
+  }
+  gitBranchEl.textContent = data.branch ?? '(sin rama)';
+  gitSyncEl.textContent = [data.ahead ? `↑${data.ahead}` : '', data.behind ? `↓${data.behind}` : '']
+    .filter(Boolean)
+    .join(' ');
+  renderGitList();
+}
+
+export function renderGitList() {
+  clear(gitListEl);
+  const query = gitFilterEl.value.trim().toLowerCase();
+  const entries = gitEntries.filter(
+    (entry) =>
+      !query ||
+      entry.path.toLowerCase().includes(query) ||
+      (entry.origPath ?? '').toLowerCase().includes(query)
+  );
+  const staged = entries.filter((entry) => gitGroup(entry).staged);
+  const changed = entries.filter((entry) => gitGroup(entry).changed);
+  if (!entries.length) {
+    gitListEl.appendChild(el('li', 'tree-empty muted', gitEntries.length ? 'sin coincidencias' : 'sin cambios'));
+  } else {
+    renderGitGroup('Preparados', staged, true);
+    renderGitGroup('Cambios', changed, false);
+  }
+  const files = new Set(entries.map((entry) => entry.path)).size;
+  setGitStatus(
+    entries.length ? `${files} archivo(s) · ${staged.length} preparado(s) · ${changed.length} cambio(s)` : 'sin cambios'
+  );
+}
+
+export function renderGitGroup(title, entries, staged) {
+  if (!entries.length) return;
+  gitListEl.appendChild(el('li', 'git-group', `${title} (${entries.length})`));
+  for (const entry of entries) gitListEl.appendChild(gitRow(entry, staged));
+}
+
+export function gitRow(entry, staged) {
+  const li = el('li', 'git-item');
+  const row = el('div', 'git-row');
+  const badge = GIT_BADGES[entry.status] ?? GIT_BADGES.modified;
+  row.append(
+    el('span', `git-badge ${badge.cls}`, badge.letter),
+    el('span', 'git-path', entry.origPath ? `${entry.origPath} → ${entry.path}` : entry.path)
+  );
+  row.addEventListener('click', () => openGitDiff(entry, staged));
+  li.appendChild(row);
+  return li;
+}
+
+export async function openGitDiff(entry, staged) {
+  if (!gitModalEl) return;
+  gitTitleEl.textContent = entry.origPath ? `${entry.origPath} → ${entry.path}` : entry.path;
+  gitMetaEl.textContent =
+    entry.status === 'untracked' ? 'sin seguimiento' : staged ? 'preparado' : 'cambios';
+  gitDiffEl.classList.remove('err');
+  gitDiffEl.textContent = 'cargando…';
+  gitModalEl.showModal();
+  const params = new URLSearchParams({ cwd: state.cwd, path: entry.path });
+  if (staged) params.set('staged', '1');
+  const data = await api(`/api/git/diff?${params}`).catch((error) => ({ error: error.message }));
+  if (data?.error) {
+    gitDiffEl.classList.add('err');
+    gitDiffEl.textContent = data.error;
+    setGitStatus(data.error, true);
+    return;
+  }
+  renderGitDiff(gitDiffEl, data.diff);
+}
+
+export function renderGitDiff(node, text) {
+  const content = String(text ?? '').trimEnd();
+  node.textContent = '';
+  if (!content) {
+    node.textContent = '(sin cambios)';
+    return;
+  }
+  for (const line of content.split('\n')) {
+    let cls = 'diff-eq';
+    if (line.startsWith('@@')) cls = 'diff-sep';
+    else if (/^(diff |index |new file|deleted file|rename |similarity |old mode|new mode|\+\+\+|---)/.test(line)) cls = 'diff-meta';
+    else if (line.startsWith('+')) cls = 'diff-add';
+    else if (line.startsWith('-')) cls = 'diff-del';
+    node.appendChild(el('span', `diff-line ${cls}`, line));
+  }
+}
+