@karajan-family/code 4.21.0

package/packages/hu-board/public/pipeline.js

@@ -0,0 +1,200 @@
+/**
+ * Pipeline observability client (TSK-0325).
+ *
+ * - Polls /api/pipeline/sessions for the session list (on refresh).
+ * - Polls /api/pipeline/sessions/:id every 2 s for the selected session.
+ * - Renders role cards, Solomon arbitrations, iteration log, summary.
+ *
+ * Zero dependencies, native fetch + DOM. Runs as ES module.
+ */
+
+const POLL_INTERVAL_MS = 2000;
+
+const els = {
+  sessionSelect: document.getElementById("sessionSelect"),
+  refreshBtn: document.getElementById("refreshBtn"),
+  roleGrid: document.getElementById("roleGrid"),
+  solomonList: document.getElementById("solomonList"),
+  iterationList: document.getElementById("iterationList"),
+  summaryBlock: document.getElementById("summaryBlock"),
+  lastRefresh: document.getElementById("lastRefresh"),
+};
+
+// Fixed set of pipeline roles we always render, even if the journal has not
+// mentioned them yet. Mirrors src/orchestrator/stages/ + src/roles/.
+const KNOWN_ROLES = [
+  "triage",
+  "discover",
+  "domain-curator",
+  "researcher",
+  "architect",
+  "planner",
+  "coder",
+  "refactorer",
+  "sonar",
+  "reviewer",
+  "tester",
+  "security",
+  "impeccable",
+  "audit",
+];
+
+let pollTimer = null;
+let currentSessionId = null;
+
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  }[c]));
+}
+
+async function api(path) {
+  const res = await fetch(path, { headers: { accept: "application/json" } });
+  if (!res.ok) throw new Error(`${path} → ${res.status}`);
+  return res.json();
+}
+
+/**
+ * Walk the iteration list and derive {status, lastIteration, retries} per
+ * role. A role is "done" if it appears in any iteration; "running" if it
+ * appears in the latest iteration and has no "error" marker; "error" if the
+ * body of its latest stage contains /error|failed/i.
+ */
+function deriveRoleStatus(iterations) {
+  const summary = new Map();
+  iterations.forEach((it) => {
+    it.stages.forEach((stage) => {
+      const name = String(stage.name || "").toLowerCase();
+      const prev = summary.get(name) || { count: 0, lastIteration: 0, lastBody: "" };
+      prev.count += 1;
+      prev.lastIteration = Math.max(prev.lastIteration, it.number);
+      prev.lastBody = stage.body;
+      summary.set(name, prev);
+    });
+  });
+  return summary;
+}
+
+function renderRoleGrid(iterations) {
+  const status = deriveRoleStatus(iterations);
+  const latest = iterations.reduce((m, it) => Math.max(m, it.number), 0);
+  const rendered = new Set();
+  const cards = [];
+  const makeCard = (roleName) => {
+    const info = status.get(roleName.toLowerCase());
+    let state = "idle";
+    let meta = "not run yet";
+    if (info) {
+      const errored = /error|failed|✗|blocked/i.test(info.lastBody);
+      const isLatest = info.lastIteration === latest && latest > 0;
+      state = errored ? "error" : (isLatest ? "running" : "done");
+      meta = `iter #${info.lastIteration} · ${info.count} run${info.count > 1 ? "s" : ""}`;
+    }
+    rendered.add(roleName.toLowerCase());
+    return `<article class="role-card" data-status="${state}"><span class="name">${escapeHtml(roleName)}</span><span class="meta">${escapeHtml(meta)}</span></article>`;
+  };
+  for (const r of KNOWN_ROLES) cards.push(makeCard(r));
+  // Render any journal-observed role we did not know about (future roles).
+  for (const [name] of status) {
+    if (!rendered.has(name)) cards.push(makeCard(name));
+  }
+  els.roleGrid.innerHTML = cards.join("");
+}
+
+function renderSolomon(decisions) {
+  const solomon = decisions.filter((d) => /solomon/i.test(d.heading));
+  if (solomon.length === 0) {
+    els.solomonList.innerHTML = `<li><em>No Solomon arbitrations in this session yet.</em></li>`;
+    return;
+  }
+  els.solomonList.innerHTML = solomon
+    .map((s) => `<li><strong>${escapeHtml(s.heading)}</strong><pre>${escapeHtml(s.body)}</pre></li>`)
+    .join("");
+}
+
+function renderIterations(iterations) {
+  if (iterations.length === 0) {
+    els.iterationList.innerHTML = `<li><em>Session has not produced iterations yet.</em></li>`;
+    return;
+  }
+  els.iterationList.innerHTML = iterations
+    .slice()
+    .reverse() // latest on top
+    .map((it) => {
+      const stages = it.stages
+        .map((st) => `<div><strong>${escapeHtml(st.name)}</strong><pre>${escapeHtml(st.body)}</pre></div>`)
+        .join("");
+      const dur = it.duration ? ` — ${escapeHtml(it.duration)}` : "";
+      return `<li><strong>${escapeHtml(it.title)}${dur}</strong>${stages}</li>`;
+    })
+    .join("");
+}
+
+function renderSummary(summary) {
+  if (!summary) { els.summaryBlock.textContent = ""; return; }
+  const body = [summary.preamble, ...summary.sections.map((s) => `## ${s.heading}\n${s.body}`)]
+    .filter(Boolean).join("\n\n");
+  els.summaryBlock.textContent = body.trim() || "(empty summary.md)";
+}
+
+async function refreshOnce() {
+  if (!currentSessionId) return;
+  try {
+    const journal = await api(`/api/pipeline/sessions/${encodeURIComponent(currentSessionId)}`);
+    renderRoleGrid(journal.iterations);
+    renderSolomon(journal.decisions);
+    renderIterations(journal.iterations);
+    renderSummary(journal.summary);
+    els.lastRefresh.textContent = `Last refresh: ${new Date().toLocaleTimeString()}`;
+  } catch (err) {
+    els.lastRefresh.textContent = `Error: ${err.message}`;
+  }
+}
+
+async function loadSessions() {
+  const { sessions } = await api("/api/pipeline/sessions");
+  els.sessionSelect.innerHTML = sessions
+    .map((s) => `<option value="${escapeHtml(s.id)}">${escapeHtml(s.id)} (${new Date(s.mtime).toLocaleString()})</option>`)
+    .join("");
+  if (sessions.length > 0 && !currentSessionId) {
+    currentSessionId = sessions[0].id;
+  }
+  if (currentSessionId) {
+    els.sessionSelect.value = currentSessionId;
+  }
+}
+
+function startPolling() {
+  if (pollTimer) clearInterval(pollTimer);
+  pollTimer = setInterval(refreshOnce, POLL_INTERVAL_MS);
+}
+
+function stopPolling() {
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+}
+
+els.sessionSelect.addEventListener("change", (e) => {
+  currentSessionId = e.target.value || null;
+  refreshOnce();
+});
+
+els.refreshBtn.addEventListener("click", async () => {
+  await loadSessions();
+  await refreshOnce();
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) stopPolling();
+  else startPolling();
+});
+
+// Boot
+(async () => {
+  await loadSessions();
+  await refreshOnce();
+  startPolling();
+})();

package/packages/hu-board/public/rag.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Karajan RAG · Retrieval Dashboard</title>
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header__logo"><div><div class="header__title">Karajan RAG</div><div class="header__subtitle">retrieval-quality dashboard</div></div></div>
+    <nav class="header__nav">
+      <a class="nav-btn" href="/">← Board</a>
+      <button class="nav-btn active">RAG</button>
+      <div class="header__controls"><button class="control-btn" id="rag-refresh" title="Reload stats">🔄</button></div>
+    </nav>
+  </header>
+  <main class="main" id="rag-app"><div class="loading"><div class="loading__spinner"></div><p>Loading…</p></div></main>
+  <script src="/rag.js"></script>
+</body>
+</html>

package/packages/hu-board/public/rag.js

@@ -0,0 +1,39 @@
+// KJC-TSK-0445 — Retrieval dashboard frontend. Fetches /api/rag/stats and
+// renders chunk counts per project/kind, embedder, DB size and last-index.
+const TOKEN = new URLSearchParams(location.search).get("token") || localStorage.getItem("kj_board_token") || "";
+const HEADERS = TOKEN ? { Authorization: `Bearer ${TOKEN}` } : {};
+const ESC = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+
+function bytes(n) { for (const u of ["B", "KB", "MB", "GB"]) { if (n < 1024) return `${u === "B" ? n : n.toFixed(1)} ${u}`; n /= 1024; } return `${n.toFixed(2)} TB`; }
+
+function bars(rows, lab, val, max) {
+  if (!rows.length) return '<p class="rag-empty">no data</p>';
+  return rows.map((r) => `<div class="rag-bar"><span class="rag-bar__label">${ESC(lab(r))}</span><span class="rag-bar__fill" style="width:${Math.round((val(r) / max) * 100)}%"></span><span class="rag-bar__value">${val(r).toLocaleString()}</span></div>`).join("");
+}
+
+function embedderCard(e) {
+  return e ? `<div class="rag-card"><h3>Embedder</h3><p class="rag-stat-big">${ESC(e.provider)}</p><p class="rag-stat-sub">${ESC(e.model || "default model")} · dim ${e.dim ?? "?"}</p></div>` : "";
+}
+
+function render(root, data) {
+  if (!data.initialized) { root.innerHTML = `<section class="rag-grid"><div class="rag-card"><h3>RAG DB</h3><p class="rag-empty">${ESC(data.message || "not initialized")}</p></div>${embedderCard(data.embedder)}</section>`; return; }
+  const lastIdx = data.last_indexed ? new Date(data.last_indexed).toLocaleString() : "never";
+  const mk = Math.max(1, ...data.by_kind.map((r) => r.n));
+  const mp = Math.max(1, ...data.by_project.map((r) => r.n));
+  root.innerHTML = `<section class="rag-grid">
+    <div class="rag-card"><h3>Totals</h3><p class="rag-stat-big">${data.total_chunks.toLocaleString()}</p><p class="rag-stat-sub">chunks · ${bytes(data.db_size_bytes)} · last indexed ${ESC(lastIdx)}</p></div>
+    ${embedderCard(data.embedder)}
+    <div class="rag-card rag-card--wide"><h3>By kind</h3>${bars(data.by_kind, (r) => r.kind, (r) => r.n, mk)}</div>
+    <div class="rag-card rag-card--wide"><h3>By project (top 20)</h3>${bars(data.by_project, (r) => r.project, (r) => r.n, mp)}</div>
+  </section>`;
+}
+
+async function load() {
+  const app = document.getElementById("rag-app");
+  app.innerHTML = '<div class="loading"><div class="loading__spinner"></div><p>Loading…</p></div>';
+  try { const r = await fetch("/api/rag/stats", { headers: HEADERS }); if (!r.ok) throw new Error(`HTTP ${r.status}`); render(app, await r.json()); }
+  catch (e) { app.innerHTML = `<div class="rag-card rag-card--error"><strong>Error:</strong> ${ESC(e.message)}</div>`; }
+}
+
+document.getElementById("rag-refresh").addEventListener("click", load);
+load();