karajan-code 3.0.0 → 3.2.0

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

@@ -0,0 +1,290 @@
+// KJC-TSK-0501 — Modal helpers extracted from app.js (step 2/8).
+// Loaded as a classic script before app.js (after formatters.js) — all
+// declarations hoist to global scope so app.js consumes them transparently.
+// No ES module syntax here on purpose: app.js still has 16+ inline
+// `onclick="closeModal()"` handlers that rely on global functions.
+//
+// Contents:
+//   - closeModal(): legacy backdrop modal (#modal-backdrop).
+//   - ensureDialog(): singleton <dialog id="app-dialog"> creator.
+//   - showError() / showConfirm() / showHelp(): native <dialog> wrappers
+//     (project convention forbids alert/confirm/prompt).
+//   - Prompt modal: activePromptId state + showPromptModal() +
+//     closePromptModalIfMatches() — surface the runner's askQuestion
+//     prompts when there's no TTY.
+//
+// Dependencies: `esc()` from formatters.js (already global) and `fetch`.
+
+function closeModal() {
+  document.getElementById('modal-backdrop').classList.add('hidden');
+}
+
+// ---- Native dialog helpers ----
+//
+// Project convention (and common sense): no window.alert / confirm / prompt.
+// These use the browser's built-in modal chrome, steal focus, block script
+// execution, and look foreign on every site. We use <dialog> instead —
+// same blocking semantics without any of the downsides, and it composes
+// with our own CSS variables so it matches the rest of the board.
+//
+// `showError` is the replacement for alert(); `showConfirm` for confirm().
+
+function ensureDialog() {
+  let dlg = document.getElementById('app-dialog');
+  if (dlg) return dlg;
+  dlg = document.createElement('dialog');
+  dlg.id = 'app-dialog';
+  // Position explicitly: showModal() defaults to centered, but when
+  // inner content (a wide textarea, the command launcher's form,
+  // etc.) pushes past the dialog's natural width Chrome falls back
+  // to top-left. Pinning position+transform here makes centering
+  // robust regardless of inner content size. We also reset the
+  // browser's default 1em margin on <dialog> which would otherwise
+  // offset the transform.
+  dlg.style.cssText = [
+    'position: fixed',
+    'top: 50%',
+    'left: 50%',
+    'transform: translate(-50%, -50%)',
+    'margin: 0',
+    'border: 1px solid var(--border)',
+    'border-radius: var(--radius-sm)',
+    'padding: 0',
+    'min-width: 320px',
+    'max-width: min(720px, 92vw)',
+    'max-height: 90vh',
+    'overflow: auto',
+    'background: var(--bg-secondary)',
+    'color: var(--text)',
+    'box-shadow: 0 10px 40px rgba(0,0,0,0.45)',
+  ].join(';');
+  // Inject a backdrop dim rule once. Inline styles can't target the
+  // ::backdrop pseudo-element, so we use a one-off <style> tag.
+  if (!document.getElementById('app-dialog-style')) {
+    const styleEl = document.createElement('style');
+    styleEl.id = 'app-dialog-style';
+    styleEl.textContent =
+      '#app-dialog::backdrop { background: rgba(0,0,0,0.55); }';
+    document.head.appendChild(styleEl);
+  }
+  document.body.appendChild(dlg);
+  return dlg;
+}
+
+function showError(message, opts = {}) {
+  return new Promise((resolve) => {
+    const dlg = ensureDialog();
+    const title = opts.title || 'Error';
+    dlg.innerHTML = `
+      <div style="padding:14px 18px;border-bottom:1px solid var(--border);
+                  font-weight:600;color:var(--color-red,#ef4444)">
+        ${esc(title)}
+      </div>
+      <div style="padding:16px 18px;font-size:0.9rem;line-height:1.5;
+                  white-space:pre-wrap">${esc(message)}</div>
+      <div style="padding:12px 18px;border-top:1px solid var(--border);
+                  text-align:right">
+        <button id="app-dialog-ok" class="control-btn"
+                style="padding:6px 16px;border:1px solid var(--border);
+                       background:var(--bg-primary);color:var(--text);
+                       border-radius:var(--radius-sm);cursor:pointer">
+          OK
+        </button>
+      </div>
+    `;
+    const done = () => {
+      if (dlg.open) dlg.close();
+      resolve();
+    };
+    dlg.addEventListener('close', done, { once: true });
+    dlg.querySelector('#app-dialog-ok').addEventListener('click', done, { once: true });
+    dlg.showModal();
+  });
+}
+
+function showHelp() {
+  return new Promise((resolve) => {
+    const dlg = ensureDialog();
+    const sections = [
+      ['📋 Board',
+       'Kanban with every HU of the selected project, grouped by status (Pending → Certified → Done). Click a card to open its detail panel; cards highlight when blocked-by another HU.'],
+      ['🌐 Graph',
+       'Dependency graph of the selected project — who blocks whom. Useful before scheduling work to spot critical paths or orphan HUs.'],
+      ['📊 Dashboard',
+       'Per-project landing: stats grid (total / certified / done) + project list. Click a project card to focus the kanban / graph on that project.'],
+      ['📚 Sessions',
+       'Every kj run that has touched the board, newest first. Filter by project; click a session to inspect its iterations, commits and checkpoints.'],
+      ['⚙️ Pipeline',
+       'Live observability of pipeline runs (Karajan v2.7+): stage timings, agent calls, decision logs. Opens in a separate page since the data is per-run, not per-project.'],
+    ];
+    const sectionHtml = sections
+      .map(([title, body]) => `
+        <div style="padding:10px 0;border-bottom:1px solid var(--border)">
+          <div style="font-weight:600;color:var(--accent-purple);margin-bottom:4px">${esc(title)}</div>
+          <div style="font-size:0.85rem;line-height:1.5;color:var(--text-secondary)">${esc(body)}</div>
+        </div>`)
+      .join('');
+    dlg.innerHTML = `
+      <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600">
+        HU Board — what does each view do?
+      </div>
+      <div style="padding:8px 18px 4px 18px">${sectionHtml}</div>
+      <div style="padding:10px 18px;border-top:1px solid var(--border);
+                  font-size:0.78rem;color:var(--text-muted)">
+        Tip: hover any tab in the header for ~1 second to see a one-line summary.
+      </div>
+      <div style="padding:12px 18px;border-top:1px solid var(--border);text-align:right">
+        <button id="app-dialog-close" class="control-btn"
+                style="padding:6px 16px;border:1px solid var(--border);
+                       background:var(--bg-primary);color:var(--text);
+                       border-radius:var(--radius-sm);cursor:pointer">
+          Close
+        </button>
+      </div>
+    `;
+    const done = () => {
+      if (dlg.open) dlg.close();
+      resolve();
+    };
+    dlg.addEventListener('close', done, { once: true });
+    dlg.querySelector('#app-dialog-close').addEventListener('click', done, { once: true });
+    dlg.showModal();
+  });
+}
+
+function showConfirm(message, opts = {}) {
+  return new Promise((resolve) => {
+    const dlg = ensureDialog();
+    const title = opts.title || 'Confirm';
+    const okLabel = opts.okLabel || 'OK';
+    const cancelLabel = opts.cancelLabel || 'Cancel';
+    const okColor = opts.destructive ? 'var(--color-red,#ef4444)' : 'var(--color-green)';
+    dlg.innerHTML = `
+      <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600">
+        ${esc(title)}
+      </div>
+      <div style="padding:16px 18px;font-size:0.9rem;line-height:1.5;
+                  white-space:pre-wrap">${esc(message)}</div>
+      <div style="padding:12px 18px;border-top:1px solid var(--border);
+                  display:flex;justify-content:flex-end;gap:8px">
+        <button id="app-dialog-cancel" class="control-btn"
+                style="padding:6px 14px;border:1px solid var(--border);
+                       background:var(--bg-primary);color:var(--text);
+                       border-radius:var(--radius-sm);cursor:pointer">
+          ${esc(cancelLabel)}
+        </button>
+        <button id="app-dialog-ok" class="control-btn"
+                style="padding:6px 14px;border:none;background:${okColor};
+                       color:#fff;border-radius:var(--radius-sm);cursor:pointer">
+          ${esc(okLabel)}
+        </button>
+      </div>
+    `;
+    let answer = false;
+    const finish = () => {
+      if (dlg.open) dlg.close();
+      resolve(answer);
+    };
+    dlg.addEventListener('close', finish, { once: true });
+    dlg.querySelector('#app-dialog-ok').addEventListener('click', () => { answer = true; finish(); }, { once: true });
+    dlg.querySelector('#app-dialog-cancel').addEventListener('click', () => { answer = false; finish(); }, { once: true });
+    dlg.showModal();
+  });
+}
+
+// ---- Prompt modal ----
+//
+// The runner publishes a prompt JSON file when it needs an answer
+// (Solomon escalations, max-iterations decisions, anything wired to
+// askQuestion) and there's no TTY to ask through. The board surfaces
+// the prompt as a modal dialog with a text input. When the user
+// answers, we POST back; the runner sees the answer file and
+// resolves.
+
+let activePromptId = null;
+
+function showPromptModal(prompt) {
+  if (!prompt?.promptId) return;
+  if (activePromptId === prompt.promptId) return;
+  activePromptId = prompt.promptId;
+  const dlg = ensureDialog();
+  const ctxBlock = prompt.context
+    ? `<details style="margin-top:8px">
+         <summary style="cursor:pointer;color:var(--text-muted);font-size:0.85rem">Context</summary>
+         <pre style="white-space:pre-wrap;font-size:0.78rem;background:var(--bg-primary);padding:8px;border-radius:var(--radius-sm);overflow:auto;max-height:240px">${esc(JSON.stringify(prompt.context, null, 2))}</pre>
+       </details>`
+    : '';
+  dlg.innerHTML = `
+    <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;display:flex;align-items:center;gap:10px">
+      <span>❓ Karajan needs an answer</span>
+      ${prompt.sessionId ? `<span style="font-family:var(--font-mono, monospace);font-size:0.75rem;color:var(--text-muted)">${esc(prompt.sessionId)}</span>` : ''}
+    </div>
+    <div style="padding:14px 18px">
+      <div style="white-space:pre-wrap;font-size:0.95rem;line-height:1.55">${esc(prompt.question)}</div>
+      ${ctxBlock}
+      <textarea id="prompt-answer" rows="3"
+                placeholder="Type your answer (or 'stop' to abort the run)"
+                style="margin-top:12px;width:100%;padding:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);font-family:inherit;font-size:0.9rem;line-height:1.5;resize:vertical;box-sizing:border-box"></textarea>
+    </div>
+    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-top:1px solid var(--border);gap:8px">
+      <span style="font-size:0.75rem;color:var(--text-muted)">
+        The runner is blocked waiting for this answer. Closing the dialog without answering aborts the prompt (run stops).
+      </span>
+      <div style="display:flex;gap:8px">
+        <button id="prompt-stop" type="button" class="control-btn"
+                style="padding:6px 14px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);cursor:pointer">
+          Stop
+        </button>
+        <button id="prompt-send" type="button" class="control-btn"
+                style="padding:6px 14px;border:none;background:var(--color-green);color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-weight:600">
+          Send
+        </button>
+      </div>
+    </div>
+  `;
+
+  const send = async (rawAnswer) => {
+    const answer = String(rawAnswer ?? '');
+    try {
+      await fetch(`/api/prompts/${encodeURIComponent(prompt.promptId)}/answer`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ answer }),
+      });
+    } catch (err) {
+      await showError(`Could not deliver answer: ${err.message}`, { title: 'Prompt delivery failed' });
+      return;
+    }
+    activePromptId = null;
+    if (dlg.open) dlg.close();
+  };
+
+  dlg.querySelector('#prompt-send').addEventListener('click', () => {
+    send(dlg.querySelector('#prompt-answer').value.trim());
+  });
+  dlg.querySelector('#prompt-stop').addEventListener('click', () => send('stop'));
+
+  // Esc / backdrop click also count as Stop so the user can't accidentally
+  // leave the runner blocked.
+  dlg.addEventListener('close', () => {
+    if (activePromptId === prompt.promptId) {
+      activePromptId = null;
+      // Best-effort stop; ignore errors if the runner already moved on.
+      fetch(`/api/prompts/${encodeURIComponent(prompt.promptId)}/answer`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ answer: 'stop' }),
+      }).catch(() => {});
+    }
+  }, { once: true });
+
+  dlg.showModal();
+  setTimeout(() => dlg.querySelector('#prompt-answer')?.focus(), 50);
+}
+
+function closePromptModalIfMatches(promptId) {
+  if (activePromptId !== promptId) return;
+  activePromptId = null;
+  const dlg = document.getElementById('app-dialog');
+  if (dlg && dlg.open) dlg.close();
+}

package/packages/hu-board/public/utils/plan-rollup-view.js

@@ -0,0 +1,53 @@
+// KJC-TSK-0501 step 7/8 — Plan rollup banner (post-run summary).
+//
+// Classic script (no exports). Loaded by index.html before app.js so
+// the function hoists into the script-level lexical environment and
+// app.js (handleRoute → kanban view) can call renderPlanRollup().
+//
+// Globals consumed from earlier scripts / app.js:
+//   - esc()                       (app.js)
+//   - formatDuration()            (utils/formatters.js)
+
+/**
+ * Compact "what just happened" banner shown above the kanban when the
+ * most recently finished plan has an outcome. Renders status colour,
+ * counts (done / failed / blocked), duration, and any PR links.
+ * No-op when the banner slot isn't mounted or when no plan has
+ * finished yet for this project.
+ */
+async function renderPlanRollup(projectId) {
+  const slot = document.getElementById('plan-rollup-banner');
+  if (!slot) return;
+  let data;
+  try {
+    const r = await fetch(`/api/projects/${encodeURIComponent(projectId)}/plans-outcome`);
+    if (!r.ok) return;
+    data = await r.json();
+  } catch { return; }
+  const finished = (data.plans || []).filter(p => p.outcome);
+  if (finished.length === 0) { slot.innerHTML = ''; return; }
+  // Aggregate the most recent plan first — non-tech user usually
+  // cares about "what happened just now", not historical sums.
+  finished.sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || ''));
+  const recent = finished[0];
+  const o = recent.outcome;
+  const c = o.counts || {};
+  const summaryColor = o.status === 'done' ? 'var(--color-green)'
+    : o.status === 'failed' ? 'var(--color-red,#ef4444)'
+    : 'var(--color-yellow,#eab308)';
+  const headline = o.status === 'done' ? 'Plan finalizado correctamente'
+    : o.status === 'failed' ? 'Plan terminado con errores'
+    : 'Plan terminado parcialmente';
+  const durationText = o.duration_ms != null ? formatDuration(o.duration_ms) : '—';
+  slot.innerHTML = `
+    <div style="margin:8px 0;padding:10px 14px;background:var(--bg-primary);border:1px solid var(--border);border-left:4px solid ${summaryColor};border-radius:var(--radius-sm);font-size:0.85rem;display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
+      <span style="color:${summaryColor};font-weight:700;">${esc(headline)}</span>
+      <span style="color:var(--text-muted);">${esc(recent.name || recent.planId)}</span>
+      <span style="color:var(--text);">✓ ${c.done || 0} hechas</span>
+      ${c.failed ? `<span style="color:var(--color-red,#ef4444)">✗ ${c.failed} fallidas</span>` : ''}
+      ${c.blocked ? `<span style="color:var(--color-yellow,#eab308)">⏸ ${c.blocked} bloqueadas</span>` : ''}
+      <span style="color:var(--text-muted);">⏱ ${esc(durationText)}</span>
+      ${(o.prs || []).length > 0 ? `<span style="color:var(--text-muted);">${o.prs.length} PR(s):</span> ${o.prs.map(u => `<a href="${esc(u)}" target="_blank" rel="noopener" style="color:var(--color-green);">abrir</a>`).join(' · ')}` : ''}
+    </div>
+  `;
+}

package/packages/hu-board/public/utils/preflight-view.js

@@ -0,0 +1,89 @@
+// KJC-TSK-0501 step 7/8 — Preflight panel (compact run-readiness banner).
+//
+// Classic script (no exports). Loaded by index.html before app.js so
+// the function hoists into the script-level lexical environment and
+// app.js (handleRoute → kanban view) can call renderPreflightPanel().
+//
+// The companion helpers fetchPreflight(), preflightStatusIcon(),
+// preflightStatusColor() and the mutable `preflightCache` are kept in
+// app.js because the confirmRunWithPreflight() modal also reads them;
+// extracting both would force a forward-reference dance we don't need
+// at this stage.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - esc()                       (app.js)
+//   - fetchPreflight()            (app.js)
+//   - preflightStatusIcon()       (app.js)
+//   - preflightStatusColor()      (app.js)
+//   - preflightCache              (mutable, app.js — we assign to it)
+
+/**
+ * Render the compact preflight banner above the kanban. Shows a single
+ * summary chip (ok / warn / fail) plus a click-to-expand grid of every
+ * deterministic check the backend ran. No-op if the panel slot isn't
+ * in the DOM yet (the kanban hasn't mounted).
+ */
+async function renderPreflightPanel(projectId) {
+  const panel = document.getElementById('preflight-panel');
+  if (!panel) return;
+  const data = await fetchPreflight(projectId);
+  preflightCache = data;
+  if (!data) {
+    panel.innerHTML = `<div style="font-size:0.8rem;color:var(--text-muted);padding:6px 10px;">Estado del proyecto: no disponible.</div>`;
+    return;
+  }
+  const blockerCount = data.blockers?.length || 0;
+  const warningCount = data.warnings?.length || 0;
+  const okCount = (data.checks || []).filter(c => c.status === 'ok').length;
+  let summaryColor, summaryIcon, summaryText;
+  if (blockerCount > 0) {
+    summaryColor = 'var(--color-red,#ef4444)';
+    summaryIcon = '✗';
+    summaryText = `${blockerCount} problema(s) bloqueante(s) — la ejecución no funcionará correctamente`;
+  } else if (warningCount > 0) {
+    summaryColor = 'var(--color-yellow,#eab308)';
+    summaryIcon = '⚠';
+    summaryText = `${warningCount} aviso(s) — la ejecución funcionará pero con limitaciones`;
+  } else {
+    summaryColor = 'var(--color-green)';
+    summaryIcon = '✓';
+    summaryText = `Todo listo · ${okCount} comprobaciones OK`;
+  }
+
+  // Compact header (always visible) + collapsed details (toggleable).
+  panel.innerHTML = `
+    <div class="preflight-panel__header"
+         style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border);border-left:3px solid ${summaryColor};border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;"
+         data-toggle>
+      <span style="color:${summaryColor};font-weight:700;font-size:1rem;">${summaryIcon}</span>
+      <span style="color:var(--text);">${esc(summaryText)}</span>
+      <span style="margin-left:auto;color:var(--text-muted);font-size:0.78rem;" data-arrow>▼ ver detalles</span>
+    </div>
+    <div class="preflight-panel__details" style="display:none;margin-top:6px;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);">
+      <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:8px;">
+        ${(data.checks || []).map((c) => `
+          <div style="display:flex;align-items:flex-start;gap:8px;padding:6px 8px;background:var(--bg-secondary,var(--bg));border-radius:var(--radius-sm);"
+               title="${esc(c.consequence || '')}">
+            <span style="color:${preflightStatusColor(c.status)};font-weight:700;font-size:0.95rem;flex-shrink:0;">${preflightStatusIcon(c.status)}</span>
+            <div style="flex:1;min-width:0;">
+              <div style="font-size:0.8rem;font-weight:600;color:var(--text);">${esc(c.label)}</div>
+              <div style="font-size:0.72rem;color:var(--text-muted);word-break:break-all;">${esc(c.detail || '')}</div>
+              ${c.consequence ? `<div style="font-size:0.7rem;color:${preflightStatusColor(c.status)};margin-top:2px;">${esc(c.consequence)}</div>` : ''}
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  `;
+  // Toggle expand/collapse without rerender.
+  const header = panel.querySelector('[data-toggle]');
+  const details = panel.querySelector('.preflight-panel__details');
+  const arrow = panel.querySelector('[data-arrow]');
+  if (header && details && arrow) {
+    header.addEventListener('click', () => {
+      const open = details.style.display !== 'none';
+      details.style.display = open ? 'none' : 'block';
+      arrow.textContent = open ? '▼ ver detalles' : '▲ ocultar detalles';
+    });
+  }
+}

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

@@ -0,0 +1,143 @@
+// KJC-TSK-0501 step 8b/8 — Project-level dialogs (rename + outcome).
+//
+// 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 (rename ✎ button in the header,
+// outcome chip in board-view.js) resolve these handlers via `window`.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - esc()                       (app.js)
+//   - ensureDialog()              (app.js)
+//   - formatDuration()            (utils/formatters.js)
+//   - projectNameCache            (mutable in app.js — assignment crosses
+//                                  scripts transparently)
+//   - populateProjectSelect()     (app.js)
+//   - renderBoard()               (app.js)
+
+/**
+ * PR-G: rename a project from the header ✎ button. Opens a small
+ * dialog with the current name pre-filled, validates length, PUTs
+ * to /api/projects/:id/name, and re-renders the board so the new
+ * name shows up everywhere (header, dropdown, picker).
+ */
+window.renameProjectModal = function renameProjectModal(projectId, currentName) {
+  const dlg = document.getElementById('app-dialog') || ensureDialog();
+  const safeCurrent = String(currentName || '').replace(/'/g, "'");
+  dlg.innerHTML = `
+    <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;gap:10px;">
+      <span style="font-size:1.1rem;">✎</span>
+      <span>Renombrar proyecto</span>
+    </div>
+    <div style="padding:14px 18px;">
+      <label for="rename-input" style="display:block;font-size:0.85rem;color:var(--text);margin-bottom:6px;">
+        Nombre del proyecto
+      </label>
+      <input type="text" id="rename-input" value="${esc(safeCurrent)}" maxlength="120"
+             style="width:100%;padding:8px 10px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);font-size:0.95rem;" />
+      <p style="margin:8px 0 0;font-size:0.75rem;color:var(--text-muted);">
+        Se actualizará el campo <code>name</code> en cada plan JSON de este proyecto y la fila en la base de datos del board.
+      </p>
+      <p id="rename-error" style="margin:8px 0 0;font-size:0.78rem;color:var(--color-red,#ef4444);display:none;"></p>
+    </div>
+    <div style="padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;">
+      <button id="rename-cancel" style="padding:8px 16px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;">Cancelar</button>
+      <button id="rename-save"   style="padding:8px 16px;background:var(--color-green);border:none;color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;">Guardar</button>
+    </div>
+  `;
+  if (typeof dlg.showModal === 'function' && !dlg.open) dlg.showModal();
+  const input = dlg.querySelector('#rename-input');
+  const errorEl = dlg.querySelector('#rename-error');
+  input?.focus();
+  input?.select();
+  dlg.querySelector('#rename-cancel')?.addEventListener('click', () => { try { dlg.close(); } catch { /* ignore */ } }, { once: true });
+  dlg.querySelector('#rename-save')?.addEventListener('click', async () => {
+    const newName = input?.value?.trim() || '';
+    if (!newName) { errorEl.style.display = 'block'; errorEl.textContent = 'El nombre no puede estar vacío.'; return; }
+    if (newName === safeCurrent) { try { dlg.close(); } catch { /* ignore */ } return; }
+    try {
+      const r = await fetch(`/api/projects/${encodeURIComponent(projectId)}/name`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName }),
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        errorEl.style.display = 'block';
+        errorEl.textContent = body?.error || `HTTP ${r.status}`;
+        return;
+      }
+      // Update the cached display name + refresh the board so the
+      // header, dropdown and project picker all show the new value.
+      projectNameCache[projectId] = newName;
+      try { dlg.close(); } catch { /* ignore */ }
+      await populateProjectSelect();
+      await renderBoard();
+    } catch (err) {
+      errorEl.style.display = 'block';
+      errorEl.textContent = err.message || String(err);
+    }
+  }, { once: true });
+};
+
+/**
+ * Open the outcome detail modal for a single HU. The chip on each
+ * card calls this with the JSON-stringified outcome (escaped for the
+ * inline onclick attribute) — we parse and render the breakdown.
+ *
+ * Surfaces the per-HU + plan-level execution outcome the orchestrator
+ * stamps on the plan JSON. Plain Spanish, no jargon.
+ */
+window.showOutcomeModal = function showOutcomeModal(escapedJson) {
+  let outcome;
+  try { outcome = JSON.parse(String(escapedJson).replace(/&#39;/g, "'")); }
+  catch { return; }
+  const dlg = document.getElementById('app-dialog') || ensureDialog();
+  const status = outcome.status || 'desconocido';
+  const headerColor = status === 'done' ? 'var(--color-green)'
+    : status === 'failed' ? 'var(--color-red,#ef4444)'
+    : 'var(--color-yellow,#eab308)';
+  const headerLabel = status === 'done' ? 'HU completada'
+    : status === 'failed' ? 'HU fallida'
+    : status === 'blocked' ? 'HU bloqueada'
+    : `HU · ${status}`;
+  const durationText = outcome.duration_ms != null ? formatDuration(outcome.duration_ms) : '—';
+  const blockersHtml = (outcome.blockers || []).length === 0 ? '' : `
+    <div style="margin-top:10px;">
+      <div style="font-weight:600;color:var(--color-red,#ef4444);font-size:0.85rem;">Problemas detectados</div>
+      <ul style="margin:4px 0 0 18px;padding:0;color:var(--text);">
+        ${outcome.blockers.map(b => `<li style="font-size:0.8rem;margin-top:4px;">${esc(b)}</li>`).join('')}
+      </ul>
+    </div>
+  `;
+  const commitsHtml = (outcome.commits || []).length === 0 ? '' : `
+    <div style="margin-top:10px;">
+      <div style="font-weight:600;color:var(--text);font-size:0.85rem;">Commits</div>
+      <ul style="margin:4px 0 0 18px;padding:0;color:var(--text-muted);">
+        ${outcome.commits.map(c => `<li style="font-family:var(--font-mono,monospace);font-size:0.78rem;">${esc(c)}</li>`).join('')}
+      </ul>
+    </div>
+  `;
+  dlg.innerHTML = `
+    <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;gap:10px;background:${headerColor};color:#000;">
+      <span style="font-size:1.2rem;">📄</span>
+      <span>${esc(headerLabel)}</span>
+    </div>
+    <div style="padding:14px 18px;max-height:65vh;overflow:auto;">
+      <p style="margin:0 0 10px;color:var(--text);">${esc(outcome.summary || '(sin resumen disponible)')}</p>
+      <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:8px;font-size:0.8rem;">
+        <div><strong>Iteraciones</strong>: ${outcome.iterations ?? '—'}</div>
+        <div><strong>Duración</strong>: ${durationText}</div>
+        <div><strong>Rama</strong>: <span style="font-family:var(--font-mono,monospace)">${esc(outcome.branch || '—')}</span></div>
+        <div><strong>Pull Request</strong>: ${outcome.pr_url ? `<a href="${esc(outcome.pr_url)}" target="_blank" rel="noopener">abrir</a>` : '—'}</div>
+        <div><strong>Terminada</strong>: ${esc(outcome.finishedAt || '—')}</div>
+      </div>
+      ${blockersHtml}
+      ${commitsHtml}
+    </div>
+    <div style="padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;">
+      <button id="outcome-close" style="padding:8px 16px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;">Cerrar</button>
+    </div>
+  `;
+  if (typeof dlg.showModal === 'function' && !dlg.open) dlg.showModal();
+  dlg.querySelector('#outcome-close')?.addEventListener('click', () => { try { dlg.close(); } catch { /* ignore */ } }, { once: true });
+};