karajan-code 3.0.0 → 3.1.0

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

@@ -0,0 +1,232 @@
+// KJC-TSK-0501 — Pure formatters extracted from app.js (step 1/8).
+// Loaded as a classic script before app.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="fn(...)"`
+// handlers that rely on global functions. Conversion to `type="module"`
+// will land in a later PR of this split alongside event delegation.
+//
+// Functions here are side-effect-free (no DOM mutation beyond
+// `document.createElement('span')` for HTML-escape, no fetch, no
+// module-level mutable state). Unit-tested directly via
+// packages/hu-board/tests/format.test.js for the three shared helpers.
+
+function formatHHMM(iso) {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+
+function shortTask(text, max = 60) {
+  if (!text) return "";
+  const collapsed = String(text).replace(/\s+/g, " ").trim();
+  if (collapsed.length <= max) return collapsed;
+  return collapsed.slice(0, max - 1).trimEnd() + "…";
+}
+
+function formatSessionLabel(session) {
+  if (!session || !session.id) {
+    return { title: "(no session)", subtitle: "", idChip: "" };
+  }
+  const projectName = (session.project_name || "").trim();
+  const time = formatHHMM(session.created_at);
+  const projectPart = projectName
+    ? projectName.length > 40
+      ? projectName.slice(0, 39) + "…"
+      : projectName
+    : session.id;
+  const title = time !== "—" ? `${projectPart} · ${time}` : projectPart;
+  return {
+    title,
+    subtitle: shortTask(session.task, 60),
+    idChip: session.id,
+  };
+}
+
+function humaniseProjectName(id) {
+  if (!id || typeof id !== 'string') return id || '';
+  const tail = id.split(/[/_]/).filter(Boolean).pop() || id;
+  const words = tail
+    .split(/[\s\-]+/)
+    .map((w) => w.replace(/[^\p{L}\p{N}]/gu, ''))
+    .filter((w) => w.length > 0);
+  if (words.length === 0) return id;
+  return words.map((w) => w[0].toUpperCase() + w.slice(1).toLowerCase()).join(' ');
+}
+
+function deriveInitialsFromName(name) {
+  const words = String(name || '')
+    .split(/[\s\-_/]+/)
+    .map((w) => w.replace(/[^\p{L}\p{N}]/gu, ''))
+    .filter((w) => w.length > 1);
+  return words.map((w) => w[0].toLowerCase()).join('').slice(0, 5) || 'kj';
+}
+
+function shortStoryId(story, initials) {
+  const id = story?.id || '';
+  const m = /_(\d+)(?!.*\d)/.exec(id);
+  const num = m ? m[1] : '?';
+  return `${initials || 'kj'}-${num}`;
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} min ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function formatDuration(ms) {
+  if (!ms) return '--';
+  const totalSec = Math.floor(ms / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  if (min === 0) return `${sec}s`;
+  return `${min}m ${sec.toString().padStart(2, '0')}s`;
+}
+
+function scoreClass(score, max = 60) {
+  if (score === null || score === undefined) return '';
+  const pct = score / max;
+  if (pct >= 0.7) return 'story-card__score--good';
+  if (pct >= 0.4) return 'story-card__score--ok';
+  return 'story-card__score--bad';
+}
+
+function qualityBar(score, max = 60) {
+  if (score === null || score === undefined) return '';
+  const filled = Math.round((score / max) * 10);
+  let html = '<span class="quality-bar">';
+  for (let i = 0; i < 10; i++) {
+    html += `<span class="quality-bar__segment${i < filled ? ' quality-bar__segment--filled' : ''}"></span>`;
+  }
+  html += '</span>';
+  return html;
+}
+
+function esc(str) {
+  if (!str) return '';
+  const el = document.createElement('span');
+  el.textContent = str;
+  return el.innerHTML;
+}
+
+const EPHEMERAL_HEURISTIC_RE = /^(auto-)?(tmp_|test_|demo_|kj-test-)/i;
+
+function isTestIcon(p) {
+  if (p.is_test === 1) return '🧪';
+  if (p.is_test === 0) return '📌';
+  return EPHEMERAL_HEURISTIC_RE.test(p.id || '') ? '🧪?' : '·';
+}
+
+function isTestTitle(p) {
+  if (p.is_test === 1) return 'Marked as test — auto-cleans 24h after last activity. Click to pin.';
+  if (p.is_test === 0) return 'Pinned — never auto-cleans. Click to clear.';
+  if (EPHEMERAL_HEURISTIC_RE.test(p.id || '')) {
+    return 'Looks ephemeral by id heuristic — will auto-clean after 24h. Click to pin.';
+  }
+  return 'Real project — never auto-cleans. Click to mark as test.';
+}
+
+function truncate(text, max = 100) {
+  if (!text) return '';
+  return text.length > max ? text.slice(0, max) + '...' : text;
+}
+
+function ansi256ToCss(n) {
+  if (n < 0 || n > 255) return 'inherit';
+  const std = [
+    '#000000', '#800000', '#008000', '#808000', '#000080', '#800080', '#008080', '#c0c0c0',
+    '#808080', '#ff0000', '#00ff00', '#ffff00', '#0000ff', '#ff00ff', '#00ffff', '#ffffff',
+  ];
+  if (n < 16) return std[n];
+  if (n < 232) {
+    const idx = n - 16;
+    const r = Math.floor(idx / 36);
+    const g = Math.floor(idx / 6) % 6;
+    const b = idx % 6;
+    const v = (c) => (c === 0 ? 0 : 55 + c * 40);
+    return `rgb(${v(r)},${v(g)},${v(b)})`;
+  }
+  const v = 8 + (n - 232) * 10;
+  return `rgb(${v},${v},${v})`;
+}
+
+const ANSI_SGR = {
+  1: 'font-weight:bold',
+  2: 'opacity:0.65',
+  3: 'font-style:italic',
+  4: 'text-decoration:underline',
+  30: 'color:#1f2937', 31: 'color:#f87171', 32: 'color:#4ade80',
+  33: 'color:#fbbf24', 34: 'color:#60a5fa', 35: 'color:#c084fc',
+  36: 'color:#22d3ee', 37: 'color:#e5e7eb',
+  90: 'color:#9ca3af', 91: 'color:#fca5a5', 92: 'color:#86efac',
+  93: 'color:#fde68a', 94: 'color:#93c5fd', 95: 'color:#d8b4fe',
+  96: 'color:#67e8f9', 97: 'color:#f3f4f6',
+};
+
+const ESC_CHARS = new Set([0x1B, 0x241B]);
+const HTML_ESC = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+function ansiToHtml(text) {
+  const src = String(text);
+  const N = src.length;
+  let out = '';
+  let openSpans = 0;
+  let i = 0;
+
+  while (i < N) {
+    const code = src.charCodeAt(i);
+    if (!ESC_CHARS.has(code)) {
+      let j = i + 1;
+      while (j < N && !ESC_CHARS.has(src.charCodeAt(j))) j += 1;
+      out += HTML_ESC(src.slice(i, j));
+      i = j;
+      continue;
+    }
+    if (src[i + 1] !== '[') { i += 1; continue; }
+    const endM = src.indexOf('m', i + 2);
+    if (endM === -1) { i += 1; continue; }
+    const params = src.slice(i + 2, endM).split(';').map((n) => Number(n) || 0);
+    let k = 0;
+    while (k < params.length) {
+      const c = params[k];
+      if (c === 0) {
+        while (openSpans > 0) { out += '</span>'; openSpans -= 1; }
+        k += 1;
+      } else if ((c === 38 || c === 48) && params[k + 1] === 2 && params.length >= k + 5) {
+        const r = params[k + 2], g = params[k + 3], b = params[k + 4];
+        const prop = c === 38 ? 'color' : 'background-color';
+        out += `<span style="${prop}:rgb(${r},${g},${b})">`;
+        openSpans += 1;
+        k += 5;
+      } else if ((c === 38 || c === 48) && params[k + 1] === 5 && params.length >= k + 3) {
+        const prop = c === 38 ? 'color' : 'background-color';
+        out += `<span style="${prop}:${ansi256ToCss(params[k + 2])}">`;
+        openSpans += 1;
+        k += 3;
+      } else if (ANSI_SGR[c]) {
+        out += `<span style="${ANSI_SGR[c]}">`;
+        openSpans += 1;
+        k += 1;
+      } else {
+        k += 1;
+      }
+    }
+    i = endM + 1;
+  }
+  while (openSpans > 0) { out += '</span>'; openSpans -= 1; }
+  return out;
+}
+
+function cssEscape(str) {
+  return (window.CSS && CSS.escape) ? CSS.escape(str) : String(str).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+}

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

@@ -0,0 +1,216 @@
+// KJC-TSK-0501 step 6/8 — Graph (DAG) view: layout helpers + renderer.
+//
+// Classic script (no exports). Loaded by index.html before app.js so
+// function declarations hoist to the script-level lexical environment
+// and app.js can call renderGraph() from the view router.
+//
+// The kanban answers "what's the status of each HU"; the graph answers
+// "what depends on what, and what could run in parallel". It's a
+// leveled topological layout drawn as vanilla SVG — no Cytoscape /
+// D3 / Mermaid dependency because the board ships as a local
+// dashboard and every KB of JS saved is one less thing that can
+// mis-fetch behind a corporate proxy. The layout is basic but honest:
+// roots at the top, children below, siblings side-by-side, curved
+// bezier arrows. Good enough for plans up to ~30 HUs — beyond that
+// we'd want a real DAG library, but that's a problem for another day.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - api()                       (utils/api.js)
+//   - esc()                       (app.js)
+//   - renderEmptyState()          (app.js)
+//   - resolveProjectMeta()        (app.js)
+//   - projectNameCache, projectInitialsCache (mutable, app.js)
+//   - humaniseProjectName(), shortStoryId(), truncate() (app.js)
+//   - showStoryDetail()           (app.js)
+//   - selectedProject (mutable global, app.js)
+
+const DAG_NODE_W = 170;
+const DAG_NODE_H = 62;
+const DAG_H_GAP = 28;
+const DAG_V_GAP = 72;
+const DAG_PAD = 32;
+
+/**
+ * Resolve `hu.blocked_by` HU-ids (e.g. "plan-xxx_001") to full story
+ * ids ("<project>::plan-xxx_001") so we can join by the board's row id.
+ * Ids that don't resolve are dropped silently — they usually signal a
+ * cross-plan dep which we don't render.
+ */
+function resolveBlockedBy(rawIds, storyIds) {
+  if (!Array.isArray(rawIds) || rawIds.length === 0) return [];
+  const resolved = [];
+  for (const raw of rawIds) {
+    const match = storyIds.find((id) => id.endsWith(`::${raw}`)) || (storyIds.includes(raw) ? raw : null);
+    if (match) resolved.push(match);
+  }
+  return resolved;
+}
+
+/**
+ * Assign each story a level = 1 + max(level of its deps). Roots get 0.
+ * Cycle-guarded with a visited set — KJ's planner shouldn't emit one
+ * but a hand-edited plan JSON might.
+ */
+function computeDagLevels(stories) {
+  const storyIds = stories.map((s) => s.id);
+  const byId = new Map();
+  for (const s of stories) {
+    const rawBlockedBy = s.blocked_by ? JSON.parse(s.blocked_by) : [];
+    byId.set(s.id, {
+      ...s,
+      resolvedBlockedBy: resolveBlockedBy(rawBlockedBy, storyIds),
+    });
+  }
+
+  const levels = new Map();
+  const visiting = new Set();
+  function levelOf(id) {
+    if (levels.has(id)) return levels.get(id);
+    if (visiting.has(id)) return 0;                // cycle → break
+    const s = byId.get(id);
+    if (!s || s.resolvedBlockedBy.length === 0) { levels.set(id, 0); return 0; }
+    visiting.add(id);
+    const l = 1 + Math.max(...s.resolvedBlockedBy.map(levelOf));
+    visiting.delete(id);
+    levels.set(id, l);
+    return l;
+  }
+  for (const id of byId.keys()) levelOf(id);
+
+  const byLevel = new Map();
+  for (const [id, lvl] of levels) {
+    if (!byLevel.has(lvl)) byLevel.set(lvl, []);
+    byLevel.get(lvl).push(id);
+  }
+
+  return { byId, levels, byLevel };
+}
+
+/**
+ * Render the graph view. If no project is selected we show a prompt
+ * — drawing every project's HUs in one DAG is visual garbage. If the
+ * current project has no stories or no blocked_by edges, we show a
+ * friendly empty state explaining what the view is for.
+ */
+async function renderGraph() {
+  const app = document.getElementById('app');
+  app.innerHTML = '<div class="loading"><div class="loading__spinner"></div><p>Loading graph…</p></div>';
+
+  if (!selectedProject) {
+    app.innerHTML = renderEmptyState(
+      'Pick a project first',
+      'The dependency graph is per-project. Choose one in the dropdown above and I will draw its HU DAG.'
+    );
+    return;
+  }
+
+  try {
+    const stories = await api(`/api/projects/${encodeURIComponent(selectedProject)}/stories`);
+    if (stories.length === 0) {
+      app.innerHTML = renderEmptyState('No HUs in this project', 'Run kj plan to generate some.');
+      return;
+    }
+    // Preload initials so node labels can use short ids synchronously.
+    await resolveProjectMeta(selectedProject);
+    const projectDisplayName = projectNameCache[selectedProject] || humaniseProjectName(selectedProject);
+    const initials = projectInitialsCache[selectedProject] || 'kj';
+
+    const { byId, byLevel } = computeDagLevels(stories);
+    const maxLevel = Math.max(0, ...Array.from(byLevel.keys()));
+    const widestLevel = Math.max(0, ...Array.from(byLevel.values()).map((ids) => ids.length));
+    const width = widestLevel * (DAG_NODE_W + DAG_H_GAP) + DAG_PAD * 2;
+    const height = (maxLevel + 1) * (DAG_NODE_H + DAG_V_GAP) + DAG_PAD * 2;
+
+    // Assign x,y to each node. Within a level we distribute horizontally
+    // evenly; we make no effort to minimise edge crossings (the naive
+    // layout is fine for ~20 HUs, which is the realistic ceiling for a
+    // single plan).
+    const positions = new Map();
+    for (const [lvl, ids] of byLevel) {
+      const y = DAG_PAD + lvl * (DAG_NODE_H + DAG_V_GAP);
+      const rowW = ids.length * DAG_NODE_W + (ids.length - 1) * DAG_H_GAP;
+      const xStart = (width - rowW) / 2;
+      ids.forEach((id, i) => {
+        positions.set(id, { x: xStart + i * (DAG_NODE_W + DAG_H_GAP), y });
+      });
+    }
+
+    const edges = [];
+    for (const s of byId.values()) {
+      for (const parentId of s.resolvedBlockedBy) {
+        if (positions.has(parentId) && positions.has(s.id)) {
+          edges.push({ from: parentId, to: s.id });
+        }
+      }
+    }
+
+    const anyEdges = edges.length > 0;
+
+    const svg = `
+      <svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"
+           xmlns="http://www.w3.org/2000/svg"
+           style="display:block;margin:0 auto;max-width:100%;overflow:visible">
+        <defs>
+          <marker id="dag-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+            <path d="M0,0 L7,4 L0,8 Z" fill="var(--text-muted)"/>
+          </marker>
+        </defs>
+        ${edges.map((e) => {
+          const p1 = positions.get(e.from);
+          const p2 = positions.get(e.to);
+          const x1 = p1.x + DAG_NODE_W / 2;
+          const y1 = p1.y + DAG_NODE_H;
+          const x2 = p2.x + DAG_NODE_W / 2;
+          const y2 = p2.y;
+          const cy = (y1 + y2) / 2;
+          return `<path d="M${x1},${y1} C${x1},${cy} ${x2},${cy} ${x2},${y2}"
+                        stroke="var(--text-muted)" stroke-width="1.5" fill="none"
+                        marker-end="url(#dag-arrow)" opacity="0.7"/>`;
+        }).join('')}
+        ${Array.from(byId.values()).map((s) => {
+          const p = positions.get(s.id);
+          const shortId = shortStoryId(s, initials);
+          const title = truncate(s.title || s.original_text || '', 26);
+          return `
+            <g transform="translate(${p.x},${p.y})"
+               class="dag-node status--${s.status}"
+               style="cursor:pointer"
+               onclick="showStoryDetail('${esc(s.id)}')">
+              <title>${esc(s.id)}</title>
+              <rect width="${DAG_NODE_W}" height="${DAG_NODE_H}" rx="6"
+                    fill="var(--bg-secondary)" stroke="var(--border)" stroke-width="1.2"/>
+              <rect width="4" height="${DAG_NODE_H}" rx="2" fill="currentColor"/>
+              <text x="12" y="20" font-size="11" font-weight="600" fill="var(--text)">
+                ${esc(shortId)}
+              </text>
+              <text x="${DAG_NODE_W - 10}" y="20" text-anchor="end" font-size="10"
+                    fill="var(--text-muted)">${esc(s.status)}</text>
+              <text x="12" y="40" font-size="10.5" fill="var(--text-muted)">
+                ${esc(title)}
+              </text>
+            </g>
+          `;
+        }).join('')}
+      </svg>
+    `;
+
+    app.innerHTML = `
+      <div class="section-header">
+        <span class="section-header__title">Dependency graph — ${esc(projectDisplayName)}</span>
+        <span class="section-header__count">${stories.length} HUs${anyEdges ? ` · ${edges.length} dep${edges.length === 1 ? '' : 's'}` : ' · no dependencies declared'}</span>
+      </div>
+      <div style="padding:8px;overflow:auto;max-height:calc(100vh - 140px)">
+        ${svg}
+      </div>
+      ${!anyEdges ? `
+        <div style="padding:14px 20px;color:var(--text-muted);font-size:0.85rem;max-width:720px;margin:12px auto">
+          No HU in this plan declares <code>blocked_by</code>, so the DAG degenerates to a row of isolated nodes.
+          Add dependencies via <code>kj plan</code> on generation or the modal <em>Edit</em> form
+          (blocked_by editing is on the roadmap).
+        </div>
+      ` : ''}
+    `;
+  } catch (err) {
+    app.innerHTML = `<div class="empty-state"><div class="empty-state__title">Error loading graph</div><div class="empty-state__text">${esc(err.message)}</div></div>`;
+  }
+}

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' });
+  }
+};