@karajan-family/code 4.21.0

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

@@ -0,0 +1,300 @@
+// 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 formatCost(costUsd) {
+  if (costUsd === null || costUsd === undefined) return null;
+  const n = Number(costUsd);
+  if (!Number.isFinite(n)) return null;
+  return {
+    label: `$${n.toFixed(2)}`,
+    tooltip: `Estimated cost: $${n.toFixed(4)}`,
+  };
+}
+
+// Φ0-G (KJC-TSK-0525): mirror of formatCacheRatio in src/format.js.
+// Kept duplicated because this file is a classic script loaded into
+// the browser, while src/format.js uses ES modules and is consumed by
+// Node tests. See KJC-TSK-0501 header notes above.
+function formatCacheRatio(cachedTokens, tokensIn) {
+  if (cachedTokens === null || cachedTokens === undefined) return null;
+  if (tokensIn === null || tokensIn === undefined) return null;
+  const c = Number(cachedTokens);
+  const t = Number(tokensIn);
+  if (!Number.isFinite(c) || !Number.isFinite(t)) return null;
+  if (t <= 0 || c < 0) return null;
+  const pct = Math.round((c / t) * 1000) / 10;
+  const num = c.toLocaleString("en-US");
+  const den = t.toLocaleString("en-US");
+  return {
+    label: `🎯 ${pct}%`,
+    tooltip: `Cache hits: ${num} / ${den} input tokens (${pct}%)`,
+  };
+}
+
+function formatProjectCostSummary(cost) {
+  if (!cost || typeof cost !== "object") return null;
+  const total = Number(cost.totalUsd);
+  if (!Number.isFinite(total)) return null;
+  const byPlan = Array.isArray(cost.byPlan) ? cost.byPlan : [];
+  if (total === 0 && byPlan.length === 0) return null;
+
+  const lines = [`Total: $${total.toFixed(4)}`];
+  // Φ0-G (KJC-TSK-0525): aggregate cache hits line + per-plan suffix.
+  const projCache = formatCacheRatio(cost.cachedTokens, cost.tokensIn);
+  if (projCache) lines.push(`Cache: ${projCache.tooltip.split(": ")[1]}`);
+  if (byPlan.length > 0) {
+    lines.push("By plan:");
+    for (const p of byPlan) {
+      const planTotal = Number(p?.totalUsd);
+      if (!Number.isFinite(planTotal)) continue;
+      const huCount = Number.isFinite(p?.huCount) ? p.huCount : 0;
+      const planLabel = p?.planId || "unassigned";
+      const cachePct = p?.cachedRatioPct;
+      const cacheSuffix = (cachePct !== null && cachePct !== undefined && Number.isFinite(Number(cachePct)))
+        ? ` 🎯 ${cachePct}%`
+        : "";
+      lines.push(`  ${planLabel}: $${planTotal.toFixed(2)} (${huCount} HU${huCount === 1 ? "" : "s"})${cacheSuffix}`);
+    }
+  }
+  const unk = cost.unknownModelTokens;
+  if (unk && Number.isFinite(unk.tokensIn) && Number.isFinite(unk.tokensOut)) {
+    const unkTotal = unk.tokensIn + unk.tokensOut;
+    if (unkTotal > 0) {
+      lines.push(`(${unkTotal} tokens with unknown pricing not included)`);
+    }
+  }
+  return {
+    label: `Total: $${total.toFixed(2)}`,
+    tooltip: lines.join("\n"),
+  };
+}
+
+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>`;
+  }
+}