karajan-code 3.0.0 → 3.2.0

package/packages/hu-board/public/utils/hu-actions.js

@@ -0,0 +1,224 @@
+// KJC-TSK-0501 step 8a/8 — HU action handlers (per-card and per-modal actions).
+//
+// Classic script (no exports). Loaded by index.html before app.js so the
+// `window.*` assignments are in place by the time the kanban mounts.
+// Inline `onclick="..."` attributes emitted by board-view.js / dashboard-
+// view.js / story-detail-view.js resolve these handlers via `window`.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - showConfirm()              (utils/modals.js)
+//   - showError()                (utils/modals.js)
+//   - closeModal()               (app.js → window.closeModal)
+//   - renderBoard()              (app.js)
+//   - openGenericLogPanel()      (utils/log-panel.js)
+//   - lastOpenedLog              (mutable in app.js — assignment crosses scripts
+//                                 transparently because both share the same realm)
+
+/**
+ * PR4: launch a single HU from the per-card ▶ button. Confirms with
+ * the user (so an accidental click doesn't kick a run) and POSTs to
+ * the new /api/hus/:huId/run endpoint, which resolves the planId
+ * server-side from the SQLite row.
+ *
+ * Exposed on `window` because the inline onclick on the card calls it.
+ */
+window.runSingleHuFromCard = async function runSingleHuFromCard(huId, title) {
+  const friendlyTitle = (title || huId).replace(/'/g, "'");
+  const ok = await showConfirm(
+    `¿Lanzar solo esta HU?\n\n${friendlyTitle}\n\nKarajan ejecutará únicamente esta HU; las demás del plan no se tocarán.`,
+    { title: 'Lanzar HU individual', okLabel: 'Lanzar', cancelLabel: 'Cancelar' }
+  );
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/hus/${encodeURIComponent(huId)}/run`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudo lanzar la HU' });
+      return;
+    }
+    const body = await res.json();
+    // Surface the log path so the user can tail it from the View log button
+    // AND auto-open the viewer so the click produces visible feedback. Without
+    // the open, the user clicks Lanzar, sees nothing change, and concludes the
+    // run never started — the run IS started, the log IS being written, the
+    // UI just wasn't showing it.
+    //
+    // The tail URL must be derived from body.logPath, not constructed from
+    // huId. When `kj run --plan ... --hu <id>` is launched, runPlan writes to
+    //   <runsDir>/<planId>--hu-<localHuId>.log
+    // — not <runsDir>/hu-<huId>.log. The previous code guessed the wrong
+    // filename and the viewer would have hit a non-existent file even if
+    // it had been opened.
+    if (body.logPath) {
+      const logBasename = body.logPath.split('/').pop().replace(/\.log$/, '');
+      const tailUrl = (offset) => `/api/runs/${encodeURIComponent(logBasename)}/log?offset=${offset || 0}`;
+      lastOpenedLog = { id: `hu-${huId}`, label: `HU ${huId}`, tailUrl };
+      openGenericLogPanel({ id: logBasename, label: `HU ${huId}`, tailUrl });
+    }
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo al lanzar la HU' });
+  }
+};
+
+/**
+ * KJC-TSK-0394 step 2: devolver una HU al estado `pending` desde
+ * cualquier estado no-terminal (coding/reviewing/blocked zombi) o
+ * terminal (done/failed) que el usuario quiera relanzar limpio.
+ *
+ * No tocamos el campo `result`: si una HU acaba en done+fail y el
+ * usuario hace Reset → status: pending, result: fail (badge ✗ persiste
+ * como historial). El siguiente run sobreescribirá result cuando
+ * termine.
+ *
+ * El backend ya acepta {status: 'pending'} en ALLOWED_STORY_STATUSES
+ * (ver routes/api.js); plan-mutations::setHuStatus refleja el cambio
+ * al fichero del plan y resincroniza la BBDD.
+ */
+/**
+ * Cambio libre de status desde el dropdown del modal. PATCH al backend
+ * con el status nuevo + confirmación (algunos targets como `done` /
+ * `failed` son blast-radius alto: no se puede deshacer sin Reset).
+ *
+ * El propio backend valida que `newStatus` esté en ALLOWED_STORY_
+ * STATUSES, así que si el dropdown trae basura el servidor rechaza con
+ * 400 — no necesitamos re-validar aquí.
+ */
+window.changeHuStatusFromModal = async function changeHuStatusFromModal(storyId, newStatus, oldStatus) {
+  // Opción "Cambiar a…" placeholder: el usuario abrió el dropdown sin
+  // elegir nada. Selecciona el placeholder otra vez para no quedar en
+  // un estado ambiguo.
+  if (!newStatus) return;
+  const select = document.getElementById('hu-status-select');
+  const ok = await showConfirm(
+    `Cambiar el status de esta HU de "${oldStatus}" a "${newStatus}"?\n\nEl plan file y el board se actualizan al instante. El campo result (badge ✓/✗) se conserva como historial.`,
+    { title: 'Cambiar status', okLabel: 'Cambiar', cancelLabel: 'Cancelar' }
+  );
+  if (!ok) { if (select) select.value = ''; return; }
+  try {
+    const res = await fetch(`/api/stories/${encodeURIComponent(storyId)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: newStatus }),
+    });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudo cambiar el status' });
+      if (select) select.value = '';
+      return;
+    }
+    closeModal();
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo al cambiar el status' });
+    if (select) select.value = '';
+  }
+};
+
+// KJC-TSK-0406: persist coder_model + reviewer_model overrides from the
+// modal. Vacío → null (re-asignación automática por triage en siguiente
+// run). Cada modelo es independiente.
+window.saveHuModels = async function saveHuModels(storyId) {
+  const coderInput = document.getElementById('hu-coder-model');
+  const reviewerInput = document.getElementById('hu-reviewer-model');
+  const patch = {
+    coder_model: coderInput?.value?.trim() || null,
+    reviewer_model: reviewerInput?.value?.trim() || null,
+  };
+  try {
+    const res = await fetch(`/api/stories/${encodeURIComponent(storyId)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudieron guardar los modelos' });
+      return;
+    }
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo guardando modelos' });
+  }
+};
+
+// KJC-PRP-0002 PR6: persist `hu.assignee` (free-form handle of whoever owns
+// this HU on a team-shared board). Empty string → null so the API knows to
+// clear, not store "". The modal only renders the input when the project is
+// `is_shared = 1`, so non-team boards never trigger this path.
+window.saveHuAssignee = async function saveHuAssignee(storyId) {
+  const input = document.getElementById('hu-assignee');
+  const value = input?.value?.trim() || null;
+  try {
+    const res = await fetch(`/api/stories/${encodeURIComponent(storyId)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ assignee: value }),
+    });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudo guardar el asignado' });
+      return;
+    }
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo guardando asignado' });
+  }
+};
+
+// KJC-TSK-0408: deshace los cambios de una HU restaurando el snapshot
+// git tomado pre-run. ATENCIÓN: es destructivo (git reset --hard) —
+// confirmamos siempre antes de invocar.
+window.undoHuChanges = async function undoHuChanges(storyId) {
+  const ok = await showConfirm(
+    '⚠️ Esta acción es destructiva.\n\nSe descartan los cambios de ficheros que esta HU hizo durante su última ejecución y se restaura el estado pre-run. La HU vuelve a pending y podrás relanzarla con otros modelos.\n\n¿Continuar?',
+    { title: 'Deshacer cambios de la HU', okLabel: 'Deshacer', cancelLabel: 'Cancelar' }
+  );
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/stories/${encodeURIComponent(storyId)}/undo`, { method: 'POST' });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudo deshacer la HU' });
+      return;
+    }
+    closeModal();
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo al deshacer la HU' });
+  }
+};
+
+window.resetHuToPending = async function resetHuToPending(storyId) {
+  const ok = await showConfirm(
+    '¿Devolver esta HU a pending?\n\nEl estado se cambia a pending y se podrá relanzar. El resultado de la última ejecución (✓/✗/~) se conserva como historial hasta que vuelvas a ejecutarla.',
+    { title: 'Reset HU', okLabel: 'Reset', cancelLabel: 'Cancelar' }
+  );
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/stories/${encodeURIComponent(storyId)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: 'pending' }),
+    });
+    if (!res.ok) {
+      const msg = (await res.json().catch(() => ({}))).error || `HTTP ${res.status}`;
+      await showError(msg, { title: 'No se pudo resetear la HU' });
+      return;
+    }
+    closeModal();
+    await fetch('/api/sync', { method: 'POST' }).catch(() => {});
+    await renderBoard();
+  } catch (err) {
+    await showError(err.message || String(err), { title: 'Fallo al resetear la HU' });
+  }
+};

package/packages/hu-board/public/utils/init-listeners.js

@@ -0,0 +1,180 @@
+// KJC-TSK-0501 step 8h/8 — Initialization listeners + boot sequence.
+//
+// Classic script (no exports). Loaded by index.html AFTER all other
+// utils/*.js (including utils/server-push.js) so every globally
+// declared function and `let` is available when these handlers and
+// the boot block run.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - navigate(), render(), handleRoute(),
+//     populateProjectSelect()         (app.js)
+//   - showCommandLauncher(),
+//     nextIsTestValue()               (utils/command-launcher.js)
+//   - showHelp(), showConfirm(),
+//     showError(), closeModal()       (utils/modals.js)
+//   - showConfigEditor()              (utils/config-editor.js)
+//   - showStoryDetail()               (utils/story-detail-view.js)
+//   - showSessionDetail()             (utils/sessions-view.js)
+//   - selectProject()                 (app.js)
+//   - triggerSync(),
+//     startStandbyPolling()           (utils/api.js)
+//   - subscribeToServerEvents(),
+//     smartRefresh()                  (utils/server-push.js)
+//   - selectedProject, currentView,
+//     refreshInterval                 (mutable `let` in app.js —
+//                                      assignment crosses scripts via
+//                                      shared-realm hoisting)
+
+// ---- Initialization ----
+
+// Nav button clicks
+document.querySelectorAll('.nav-btn').forEach((btn) => {
+  btn.addEventListener('click', () => navigate(btn.dataset.view));
+});
+
+// Project selector
+document.getElementById('project-select').addEventListener('change', (e) => {
+  selectedProject = e.target.value;
+  window.location.hash = selectedProject ? `${currentView}/${selectedProject}` : currentView;
+  render();
+});
+
+// Sync button — re-scan disk for new batches
+document.getElementById('sync-btn').addEventListener('click', async () => {
+  const btn = document.getElementById('sync-btn');
+  btn.disabled = true;
+  btn.textContent = '⏳';
+  try {
+    await fetch('/api/sync', { method: 'POST' });
+    await populateProjectSelect();
+    render();
+  } catch { /* ignore */ }
+  btn.textContent = '🔄';
+  btn.disabled = false;
+});
+
+// Commands button — opens the launcher modal so the user can run
+// `kj plan`, `kj architect`, `kj clean` (and more later) without
+// dropping to a terminal. Output streams to the existing log panel.
+document.getElementById('commands-btn').addEventListener('click', () => {
+  showCommandLauncher();
+});
+
+// Help button — KJC-TSK-0372. Quick reference modal for the 5 views.
+// Hover tooltips on each tab cover the 1-line case; this modal is
+// for users who arrive cold and want "ok, what does each one do?".
+document.getElementById('help-btn').addEventListener('click', () => {
+  showHelp();
+});
+
+// PR5: Settings button — opens the kj.config.yml editor modal.
+// User picks coder/reviewer providers, model strategy, iteration
+// caps, etc. in plain Spanish. Save writes the yml atomically;
+// next `kj run` picks up the new config (no restart needed).
+document.getElementById('config-btn').addEventListener('click', () => {
+  showConfigEditor();
+});
+
+// Restart button — respawn the board server in place. The page's
+// EventSource auto-reconnects so the user sees a brief "connecting…"
+// blip and the board comes back live.
+document.getElementById('restart-btn').addEventListener('click', async () => {
+  const ok = await showConfirm(
+    'Restart the HU Board server now? The page will reconnect automatically.',
+    { title: 'Restart board', okLabel: 'Restart' }
+  );
+  if (!ok) return;
+  try {
+    await fetch('/api/board/restart', { method: 'POST' });
+  } catch { /* the server is going down; the catch is expected */ }
+  // Give the new server a beat to bind, then reload the page.
+  setTimeout(() => window.location.reload(), 1200);
+});
+
+document.addEventListener('click', async (e) => {
+  const btn = e.target.closest('.project-card__is-test');
+  if (!btn) return;
+  e.stopPropagation();
+  e.preventDefault();
+  const projectId = btn.dataset.projectId;
+  const next = nextIsTestValue(btn.dataset.isTest);
+  try {
+    const res = await fetch(`/api/projects/${encodeURIComponent(projectId)}/is-test`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ is_test: next }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    // Re-render the project list so the badge reflects the new value.
+    await populateProjectSelect();
+    render();
+  } catch (err) {
+    await showError(err.message, { title: 'Failed to update is_test' });
+  }
+});
+
+// Delete project (cascade) — delegated handler on the dashboard grid
+document.addEventListener('click', async (e) => {
+  const btn = e.target.closest('.project-card__delete');
+  if (!btn) return;
+  e.stopPropagation();
+  e.preventDefault();
+  const projectId = btn.dataset.projectId;
+  const projectName = btn.dataset.projectName || projectId;
+  const ok = await showConfirm(
+    `Delete project "${projectName}" and all its stories + sessions?\n\n`
+    + `Also removes ~/.karajan/hu-stories/${projectId}/ from disk.`,
+    { title: 'Delete project', okLabel: 'Delete', destructive: true }
+  );
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/projects/${encodeURIComponent(projectId)}`, { method: 'DELETE' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    await populateProjectSelect();
+    render();
+  } catch (err) {
+    await showError(err.message, { title: 'Failed to delete project' });
+  }
+});
+
+// Modal close on backdrop click
+document.getElementById('modal-backdrop').addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeModal();
+});
+
+// ESC to close modal
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeModal();
+});
+
+// Hash routing
+window.addEventListener('hashchange', handleRoute);
+
+// Make functions available globally for onclick handlers
+window.showStoryDetail = showStoryDetail;
+window.showSessionDetail = showSessionDetail;
+window.closeModal = closeModal;
+window.selectProject = selectProject;
+
+// KJC-TSK-0414 PR4: arranca el polling del banner de standby al cargar la página.
+startStandbyPolling();
+
+// Initial load — sync disk data first so new batches are visible
+triggerSync().then(() => {
+  populateProjectSelect();
+  handleRoute();
+  subscribeToServerEvents();
+});
+
+// Auto-refresh every 60 seconds as a SAFETY NET only — the board is
+// SSE-driven (push from server) so this should rarely fire. We keep
+// it at low frequency to recover from missed events on hibernation /
+// network blip without flickering the UI every 10s like before.
+// Uses smartRefresh too so it patches the DOM instead of full rerender.
+refreshInterval = setInterval(async () => {
+  if (document.getElementById('modal-backdrop').classList.contains('hidden')) {
+    await triggerSync();
+    await populateProjectSelect();
+    await smartRefresh(null);
+  }
+}, 60_000);

package/packages/hu-board/public/utils/log-panel.js

@@ -0,0 +1,222 @@
+// KJC-TSK-0501 step 7/8 — Floating run-log panel + window controls.
+//
+// Classic script (no exports). Loaded by index.html before app.js so
+// the function declarations hoist and inline onclick="openLogViewer(...)"
+// handlers emitted by board-view / dashboard-view resolve transparently.
+// `logPollTimer` and `logViewerState` are top-level `let` bindings in
+// this classic script — same realm as app.js, so the cross-script
+// references keep working unchanged.
+//
+// Globals consumed from earlier scripts:
+//   - esc()                       (app.js)
+//   - ansiToHtml()                (utils/formatters.js)
+
+// `logPollTimer` survives multiple sessions because the panel is a
+// singleton — opening a second log tears the first one down. `panel`
+// is kept on `logViewerState` so the close handler can null it out
+// from inside the tail loop (without it, `tick()` would keep firing
+// HTTP requests against a dead panel).
+let logPollTimer = null;
+let logViewerState = { planId: null, panel: null, offset: 0, isMax: false, isMin: false };
+
+/**
+ * Open (or refocus) the run-log panel for the given plan. Thin shim
+ * over `openGenericLogPanel` — the original entry point used for
+ * `kj run --plan` runs that the Run-plan button kicks off.
+ */
+function openLogViewer(planId) {
+  return openGenericLogPanel({
+    id: planId,
+    label: 'Run log',
+    tailUrl: (offset) => `/api/plans/${encodeURIComponent(planId)}/log?offset=${offset}`,
+  });
+}
+
+/**
+ * Generic floating log panel anchored bottom-right. Used by:
+ *   - openLogViewer(planId)         → /api/plans/:planId/log
+ *   - openCommandLogViewer(cmd, id) → /api/runs/:commandId/log
+ *
+ * The only thing that changes between callers is the tail URL +
+ * the label; the window controls (min/max/close), polling, and ANSI
+ * rendering are identical.
+ *
+ * @param {object} args
+ * @param {string} args.id        - opaque id (planId or commandId), shown in header
+ * @param {string} args.label     - "Run log", "kj plan", …
+ * @param {(offset:number)=>string} args.tailUrl - returns the URL to GET each tick
+ */
+function openGenericLogPanel({ id, label, tailUrl }) {
+  // Tearing down the previous panel cleanly avoids two timers running
+  // when the user opens a second log while the first is still tailing.
+  if (logPollTimer) { clearTimeout(logPollTimer); logPollTimer = null; }
+  if (logViewerState.panel && logViewerState.panel.parentNode) {
+    logViewerState.panel.remove();
+  }
+
+  const panel = document.createElement('section');
+  panel.id = 'kj-log-panel';
+  panel.dataset.state = 'normal';
+  panel.style.cssText = [
+    'position:fixed',
+    'right:16px',
+    'bottom:16px',
+    'width:min(720px, calc(100vw - 32px))',
+    'height:min(420px, calc(100vh - 80px))',
+    'display:flex',
+    'flex-direction:column',
+    'border:1px solid var(--border)',
+    'border-radius:var(--radius-sm)',
+    'background:var(--bg-secondary)',
+    'box-shadow:0 12px 40px rgba(0,0,0,0.45)',
+    'z-index:9999',
+    'overflow:hidden',
+  ].join(';');
+
+  panel.innerHTML = `
+    <header style="display:flex;align-items:center;justify-content:space-between;
+                   padding:8px 12px;background:var(--bg-primary);
+                   border-bottom:1px solid var(--border);
+                   user-select:none;flex-shrink:0">
+      <div style="display:flex;align-items:baseline;gap:10px;min-width:0">
+        <strong style="color:var(--text)">${esc(label)}</strong>
+        <span style="font-family:var(--font-mono, monospace);font-size:0.78rem;
+                     color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;
+                     white-space:nowrap">${esc(id)}</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
+        <span id="log-status" style="font-size:0.75rem;color:var(--text-muted);margin-right:8px">connecting…</span>
+        <button id="log-min" type="button" title="Minimize (run keeps going)"
+                style="${winBtnStyle('#facc15')}">_</button>
+        <button id="log-max" type="button" title="Maximize / Restore"
+                style="${winBtnStyle('#34d399')}">▢</button>
+        <button id="log-close" type="button" title="Close panel — the run keeps going in the background. Re-open anytime via the “📜 View log” button on the board."
+                style="${winBtnStyle('#f87171')}">✕</button>
+      </div>
+    </header>
+    <pre id="log-body"
+         style="margin:0;padding:12px 16px;flex:1 1 auto;overflow:auto;
+                font-family:var(--font-mono, monospace);font-size:0.8rem;
+                line-height:1.45;background:#0b0b0c;color:#e6e6e6;
+                white-space:pre-wrap;word-break:break-word"></pre>
+    <footer style="padding:6px 12px;border-top:1px solid var(--border);
+                   font-size:0.7rem;color:var(--text-muted);flex-shrink:0">
+      Closing this panel does NOT stop the run. It keeps going in the background;
+      reopen with the 📜 View log button on the board.
+    </footer>
+  `;
+
+  document.body.appendChild(panel);
+  logViewerState = { planId: id, panel, offset: 0, isMax: false, isMin: false };
+
+  const bodyEl = panel.querySelector('#log-body');
+  const statusEl = panel.querySelector('#log-status');
+  const footerEl = panel.querySelector('footer');
+  const minBtn = panel.querySelector('#log-min');
+  const maxBtn = panel.querySelector('#log-max');
+  const closeBtn = panel.querySelector('#log-close');
+
+  // ---- Window controls ----
+  closeBtn.addEventListener('click', () => {
+    if (logPollTimer) { clearTimeout(logPollTimer); logPollTimer = null; }
+    panel.remove();
+    logViewerState = { planId: null, panel: null, offset: 0, isMax: false, isMin: false };
+  });
+
+  minBtn.addEventListener('click', () => {
+    logViewerState.isMin = !logViewerState.isMin;
+    if (logViewerState.isMin) {
+      // Collapse to header-only pill anchored at bottom-right. Polling
+      // continues so the kB counter stays live; click min again to expand.
+      panel.style.height = 'auto';
+      panel.style.width = 'auto';
+      bodyEl.style.display = 'none';
+      footerEl.style.display = 'none';
+      panel.dataset.state = 'min';
+    } else {
+      panel.style.height = logViewerState.isMax ? 'calc(100vh - 32px)' : 'min(420px, calc(100vh - 80px))';
+      panel.style.width = logViewerState.isMax ? 'calc(100vw - 32px)' : 'min(720px, calc(100vw - 32px))';
+      bodyEl.style.display = '';
+      footerEl.style.display = '';
+      panel.dataset.state = logViewerState.isMax ? 'max' : 'normal';
+    }
+  });
+
+  maxBtn.addEventListener('click', () => {
+    logViewerState.isMin = false;
+    logViewerState.isMax = !logViewerState.isMax;
+    bodyEl.style.display = '';
+    footerEl.style.display = '';
+    if (logViewerState.isMax) {
+      panel.style.top = '16px';
+      panel.style.left = '16px';
+      panel.style.right = '16px';
+      panel.style.bottom = '16px';
+      panel.style.width = 'auto';
+      panel.style.height = 'auto';
+      panel.dataset.state = 'max';
+    } else {
+      panel.style.top = '';
+      panel.style.left = '';
+      panel.style.right = '16px';
+      panel.style.bottom = '16px';
+      panel.style.width = 'min(720px, calc(100vw - 32px))';
+      panel.style.height = 'min(420px, calc(100vh - 80px))';
+      panel.dataset.state = 'normal';
+    }
+  });
+
+  // ---- Tail loop ----
+  async function tick() {
+    if (!logViewerState.panel) return;        // user closed
+    try {
+      const res = await fetch(tailUrl(logViewerState.offset));
+      if (!res.ok) {
+        statusEl.textContent = `error: HTTP ${res.status}`;
+        logPollTimer = setTimeout(tick, 4000);
+        return;
+      }
+      const body = await res.json();
+      if (!body.exists) {
+        statusEl.textContent = 'waiting for run to start…';
+      } else {
+        if (body.content) {
+          // Append rendered HTML so ANSI escape codes show as colour
+          // instead of literal `[1m…[0m` noise (the user's complaint).
+          // Auto-scroll only when the user was already at the bottom,
+          // so manual scrollback doesn't fight the tail.
+          const atBottom = bodyEl.scrollTop + bodyEl.clientHeight >= bodyEl.scrollHeight - 8;
+          bodyEl.insertAdjacentHTML('beforeend', ansiToHtml(body.content));
+          if (atBottom) bodyEl.scrollTop = bodyEl.scrollHeight;
+        }
+        logViewerState.offset = body.size;
+        statusEl.textContent = `${(body.size / 1024).toFixed(1)} KB — live`;
+      }
+    } catch (err) {
+      statusEl.textContent = `error: ${err.message}`;
+    }
+    logPollTimer = setTimeout(tick, 2000);
+  }
+
+  tick();
+}
+
+/** Inline style for the three window-control buttons in the log panel. */
+function winBtnStyle(accentColor) {
+  return [
+    'width:22px',
+    'height:22px',
+    'padding:0',
+    'border:1px solid var(--border)',
+    `background:${accentColor}`,
+    'color:#0b0b0c',
+    'font-weight:700',
+    'font-size:0.78rem',
+    'line-height:20px',
+    'border-radius:50%',
+    'cursor:pointer',
+    'display:inline-flex',
+    'align-items:center',
+    'justify-content:center',
+  ].join(';');
+}