@karajan-family/code 4.21.0

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

@@ -0,0 +1,259 @@
+/**
+ * Karajan HU Board - Frontend Application
+ * Vanilla JS single-page app with hash-based routing.
+ */
+
+/**
+ * Scoped-project mode: when the server serves `/p/<slug>`, the UI boots
+ * pre-filtered to that project. Multi-project affordances (project
+ * dropdown, Sessions tab, Pipeline link, Dashboard card grid) are hidden
+ * because they make no sense here. Driven by dogfood feedback: the user
+ * wanted one board per project, not a global view with 2 000 stories.
+ */
+const SCOPED_PREFIX = '/p/';
+const scopedProjectSlug = window.location.pathname.startsWith(SCOPED_PREFIX)
+  ? decodeURIComponent(window.location.pathname.slice(SCOPED_PREFIX.length)).replace(/\/+$/, '')
+  : null;
+
+if (scopedProjectSlug) {
+  document.body.classList.add('scoped-mode');
+}
+
+/**
+ * Current view — Board is the default everywhere, not just in scoped mode.
+ * Dogfood quote: "Board vista por defecto. Dashboard es algo extra que a
+ * priori no me interesa, pq me interesan los proyectos." The Kanban is
+ * the thing the user wants to see first; Dashboard stays accessible via
+ * its nav button for the (rare) multi-project overview case but is never
+ * the landing view.
+ */
+let currentView = 'board';
+
+/** @type {string} Selected project ID (empty = all) */
+let selectedProject = scopedProjectSlug || '';
+
+/** @type {number | null} Auto-refresh interval ID */
+let refreshInterval = null;
+
+
+// ---- Human-friendly story IDs ----
+//
+// Internal story IDs look like
+//   home_manu_ws_ai_linux-assistant-orchestrator::hu_plan-20260424182640-4icc_003
+// which is fine for disk and logs but terrible for humans. The UI shows a
+// short form like `lao-003` (project initials + HU sequence) so the user
+// can say "take a look at `lao-003`" instead of pasting the 82-char blob.
+// The full ID stays accessible as a tooltip (and in the underlying data-id).
+
+const projectInitialsCache = {};
+const projectNameCache = {};
+// KJC-PRP-0002 PR6: cache project.is_shared so the HU modal can gate the
+// "Asignado a" field without re-fetching /api/projects/:id each open.
+// 0/1 mirror what sqlite stores; undefined = not yet hydrated.
+const projectIsSharedCache = {};
+
+
+/**
+ * Fetch-and-cache a project's metadata. Populates initialsCache and
+ * nameCache in one trip so neither renderStoryCard nor the section
+ * header has to await again. Falls back to the project id on any
+ * failure so the UI never blocks on a network error.
+ * @param {string} projectId
+ * @returns {Promise<{ initials: string, name: string }>}
+ */
+async function resolveProjectMeta(projectId) {
+  if (!projectId) return { initials: 'kj', name: '' };
+  if (projectInitialsCache[projectId]) {
+    return { initials: projectInitialsCache[projectId], name: projectNameCache[projectId] };
+  }
+  try {
+    const project = await api(`/api/projects/${encodeURIComponent(projectId)}`);
+    const rawName = project.name || humaniseProjectName(projectId);
+    const initials = deriveInitialsFromName(rawName);
+    projectInitialsCache[projectId] = initials;
+    projectNameCache[projectId] = rawName;
+    projectIsSharedCache[projectId] = project.is_shared === 1 ? 1 : 0;
+    return { initials, name: rawName };
+  } catch {
+    const fallbackName = humaniseProjectName(projectId);
+    projectInitialsCache[projectId] = deriveInitialsFromName(fallbackName);
+    projectNameCache[projectId] = fallbackName;
+    projectIsSharedCache[projectId] = 0;
+    return { initials: projectInitialsCache[projectId], name: fallbackName };
+  }
+}
+
+/** Back-compat helper kept so existing callers don't break. */
+async function resolveProjectInitials(projectId) {
+  const meta = await resolveProjectMeta(projectId);
+  return meta.initials;
+}
+
+
+
+/**
+ * "Pick a project" view shown by the Board tab when nothing is
+ * selected. Lists every project that has at least one HU with the
+ * pending / running / done / failed counts — clicking takes the
+ * user into that project's kanban (`#board/<slug>`).
+ *
+ * Why this instead of an "All projects" merged kanban: HU short ids
+ * collide across projects (every project has a `*-001`), the column
+ * counts become meaningless, and "missing test contract" warnings
+ * apply to whatever-project so the user can't tell what to act on.
+ * Forcing a project pick before the kanban is the cheapest way to
+ * keep every other UI invariant honest.
+ */
+
+/**
+ * Renders an empty state component.
+ * @param {string} title
+ * @param {string} text
+ * @returns {string}
+ */
+function renderEmptyState(title, text) {
+  return `
+    <div class="empty-state">
+      <div class="empty-state__title">${title || 'No data yet'}</div>
+      <div class="empty-state__text">${text || 'HU stories and sessions will appear here as Karajan processes them.'}</div>
+      <div class="empty-state__path">~/.karajan/hu-stories/</div>
+    </div>
+  `;
+}
+
+// ---- Plan execution ----
+//
+// The board delegates execution to the CLI via `POST /api/projects/:id/run`.
+// There's no more intermediate "certify" step: the user reviews HUs
+// (editing inline if needed — see edit-in-place PR), and when happy
+// clicks "Run plan", which spawns `kj run --plan <id>` as a detached
+// child on the server. Status updates flow back through the plan JSON
+// watcher without any manual refresh.
+//
+// We still expose a per-HU status PATCH endpoint for corrective moves
+// (e.g. retry a failed HU manually), but it's no longer the primary
+// action on the card.
+
+/**
+ * Launch the pipeline over every plan of a project. Returns when the
+ * spawn ack is received — not when the run completes. Live progress is
+ * reflected automatically by the plans-dir watcher on the server, so
+ * the board re-renders without us having to poll.
+ * @param {string} projectId
+ */
+// Track the most recently launched planId so the "View log" button in
+// the section header can re-open the viewer without the user hunting
+// through plan ids.
+let lastLaunchedPlanId = null;
+
+// Generalised across plan runs AND ⚡ launcher commands: the ▶ Run
+// plan button populates this with the run's logPath, and the
+// command launcher does the same with its own commandId. The 📜
+// View log button in the section header reads from here so it
+// re-opens whichever was most recently launched.
+let lastOpenedLog = null;     // { id, label, tailUrl(offset) }
+
+
+
+// ---- Navigation ----
+
+/**
+ * Navigates to a specific view.
+ * @param {string} view - 'dashboard', 'board', or 'sessions'
+ */
+function navigate(view) {
+  currentView = view;
+  window.location.hash = selectedProject ? `${view}/${selectedProject}` : view;
+
+  // Update active nav button
+  document.querySelectorAll('.nav-btn').forEach((btn) => {
+    btn.classList.toggle('active', btn.dataset.view === view);
+  });
+
+  render();
+}
+
+/**
+ * Selects a project and navigates to the board view.
+ * @param {string} projectId
+ */
+function selectProject(projectId) {
+  selectedProject = projectId;
+  document.getElementById('project-select').value = projectId;
+  navigate('board');
+}
+
+/**
+ * Renders the current view.
+ */
+function render() {
+  switch (currentView) {
+    case 'dashboard': return renderDashboard();
+    case 'board': return renderBoard();
+    case 'sessions': return renderSessions();
+    case 'graph': return renderGraph();
+    default: return renderDashboard();
+  }
+}
+
+/**
+ * Populates the project selector dropdown.
+ */
+async function populateProjectSelect() {
+  try {
+    const projects = await api('/api/projects');
+    const select = document.getElementById('project-select');
+    // Which project should appear pre-selected? Order:
+    //   1. scopedProjectSlug (URL is /p/<slug>)  — locked, never changes
+    //   2. selectedProject (route state, ej. #board/<slug>)
+    //   3. ""                                    — "All Projects"
+    // PR-D: the previous version cleared innerHTML and never marked
+    // any option as selected, so the dropdown showed "All Projects"
+    // even when scoped to one. handleRoute() set .value separately
+    // BUT the value was lost in the race because the matching option
+    // didn't exist yet when handleRoute ran. Setting .selected on
+    // the option directly avoids the race.
+    const desired = scopedProjectSlug || selectedProject || '';
+    select.innerHTML = '';
+    const all = document.createElement('option');
+    all.value = '';
+    all.textContent = 'All Projects';
+    if (desired === '') all.selected = true;
+    select.appendChild(all);
+    for (const p of projects) {
+      const opt = document.createElement('option');
+      opt.value = p.id;
+      opt.textContent = p.name || p.id;
+      if (p.id === desired) opt.selected = true;
+      select.appendChild(opt);
+    }
+    // Final guard: if `desired` did not match any rendered option
+    // (project not on the board yet), still set the value so
+    // handleRoute's expectation holds.
+    if (desired) select.value = desired;
+  } catch {
+    // Silently fail — project list will be empty
+  }
+}
+
+/**
+ * Parses the hash route and renders.
+ */
+function handleRoute() {
+  // Board-first: the default landing view is always the Kanban. Dashboard
+  // is only shown when the user explicitly navigates to `#dashboard`.
+  const hash = window.location.hash.slice(1) || 'board';
+  const parts = hash.split('/');
+  // In scoped mode the project is locked — the hash controls the view
+  // only. `board/<slug>` becomes `board` and the slug stays fixed.
+  currentView = parts[0] || 'board';
+  selectedProject = scopedProjectSlug || parts[1] || '';
+
+  document.querySelectorAll('.nav-btn').forEach((btn) => {
+    btn.classList.toggle('active', btn.dataset.view === currentView);
+  });
+
+  document.getElementById('project-select').value = selectedProject;
+  render();
+}
+

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

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Karajan HU Board</title>
+  <link rel="stylesheet" href="/styles.css">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%237c3aed'/><text x='16' y='22' text-anchor='middle' fill='white' font-size='16' font-family='sans-serif' font-weight='bold'>K</text></svg>">
+</head>
+<body>
+  <header class="header">
+    <div class="header__logo">
+      <svg viewBox="0 0 32 32" width="32" height="32">
+        <rect width="32" height="32" rx="6" fill="#7c3aed"/>
+        <text x="16" y="22" text-anchor="middle" fill="white" font-size="16" font-family="sans-serif" font-weight="bold">K</text>
+      </svg>
+      <div>
+        <div class="header__title">Karajan HU Board</div>
+        <div class="header__subtitle">story management dashboard</div>
+      </div>
+    </div>
+    <nav class="header__nav">
+      <button class="nav-btn active" data-view="board" title="Kanban board: every HU of the selected project, grouped by status (Pending → Certified → Done). Click an HU card to expand the detail panel.">Board</button>
+      <button class="nav-btn" data-view="graph" title="Dependency graph of the selected project's HUs — who blocks whom. Useful before scheduling work.">Graph</button>
+      <button class="nav-btn" data-view="dashboard" title="Per-project landing: stats grid + project list. Click a project card to focus the kanban / graph on that project.">Dashboard</button>
+      <button class="nav-btn" data-view="sessions" title="Every kj run that has touched the board, newest first. Filter by project; click a session to inspect its iterations, commits and checkpoints.">Sessions</button>
+      <a class="nav-btn" href="/pipeline.html" title="Live observability of pipeline runs (Karajan v2.7+): stage timings, agent calls, decision logs.">Pipeline</a>
+      <a class="nav-btn" href="/rag.html" title="RAG retrieval-quality dashboard: chunk counts, embedder provider, db size.">RAG</a>
+      <a class="nav-btn" href="/wiki.html" title="Search the per-project QMD semantic wiki (docs, plans, reviews).">Wiki</a>
+      <select class="project-select" id="project-select">
+        <option value="">All Projects</option>
+      </select>
+      <div class="header__controls">
+        <button class="control-btn" id="help-btn" title="What does each view do? Quick reference for Board / Graph / Dashboard / Sessions / Pipeline.">?</button>
+        <button class="control-btn" id="config-btn" title="Configurar Karajan (modelos, agentes, tope de iteraciones, …)">⚙</button>
+        <button class="control-btn" id="commands-btn" title="Launch a Karajan CLI command (kj plan, kj architect, kj clean…)">⚡</button>
+        <button class="control-btn" id="restart-btn" title="Restart the HU Board server (preserves URL, the page reconnects automatically)">🔁</button>
+        <button class="control-btn" id="sync-btn" title="Re-scan disk for new batches">🔄</button>
+        <button class="control-btn" id="force-refresh-btn" title="Force a clean reload — wipes browser caches and reloads. Use when the UI looks stale and a normal refresh isn't fixing it." onclick="window.forceRefresh()">🧹</button>
+      </div>
+    </nav>
+  </header>
+
+  <main class="main" id="app">
+    <div class="loading">
+      <div class="loading__spinner"></div>
+      <p>Loading...</p>
+    </div>
+  </main>
+
+  <div class="modal-backdrop hidden" id="modal-backdrop">
+    <div class="modal" id="modal-content"></div>
+  </div>
+
+  <script src="/utils/formatters.js"></script>
+  <script src="/utils/modals.js"></script>
+  <script src="/utils/api.js"></script>
+  <script src="/utils/sessions-view.js"></script>
+  <script src="/utils/board-view.js"></script>
+  <script src="/utils/dashboard-view.js"></script>
+  <script src="/utils/graph-view.js"></script>
+  <script src="/utils/project-picker-view.js"></script>
+  <script src="/utils/story-detail-view.js"></script>
+  <script src="/utils/preflight-view.js"></script>
+  <script src="/utils/plan-rollup-view.js"></script>
+  <script src="/utils/log-panel.js"></script>
+  <script src="/utils/hu-actions.js"></script>
+  <script src="/utils/project-actions.js"></script>
+  <script src="/utils/story-edit-form.js"></script>
+  <script src="/utils/config-editor.js"></script>
+  <script src="/utils/command-launcher.js"></script>
+  <script src="/utils/run-launcher.js"></script>
+  <script src="/utils/server-push.js"></script>
+  <script src="/app.js"></script>
+  <script src="/utils/init-listeners.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,132 @@
+/* Pipeline observability view (TSK-0325). */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #2a3a4e;
+  background: #0f1420;
+}
+.topbar h1 { font-size: 1.125rem; margin: 0; color: #e1e8f2; }
+.topbar .brand {
+  color: #7d9ebc;
+  text-decoration: none;
+  font-weight: 500;
+}
+.topbar .brand:hover { color: #e1e8f2; }
+
+.session-picker {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #94a4ac;
+}
+.session-picker select {
+  background: #1a2332;
+  color: #e1e8f2;
+  border: 1px solid #2a3a4e;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  min-width: 220px;
+}
+.session-picker button {
+  background: #1a2332;
+  color: #e1e8f2;
+  border: 1px solid #2a3a4e;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.session-picker button:hover { background: #2a3a4e; }
+
+main {
+  padding: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.role-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.75rem;
+}
+
+.role-card {
+  border: 1px solid #2a3a4e;
+  border-radius: 6px;
+  padding: 0.75rem;
+  background: #0f1420;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.role-card .name {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #e1e8f2;
+}
+.role-card .meta {
+  font-size: 0.75rem;
+  color: #7d9ebc;
+}
+.role-card[data-status="done"] { border-color: #4caf50; }
+.role-card[data-status="running"] { border-color: #f4b63f; }
+.role-card[data-status="error"] { border-color: #e74c3c; }
+.role-card[data-status="idle"] { opacity: 0.65; }
+
+.panel {
+  border: 1px solid #2a3a4e;
+  border-radius: 6px;
+  padding: 1rem 1.25rem;
+  background: #0f1420;
+}
+.panel h2 {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  color: #e1e8f2;
+}
+.event-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 420px;
+  overflow-y: auto;
+  display: grid;
+  gap: 0.5rem;
+}
+.event-list li {
+  border-left: 2px solid #2a3a4e;
+  padding: 0.5rem 0.75rem;
+  background: #0a0e18;
+  border-radius: 3px;
+}
+.event-list li strong { color: #e1e8f2; display: block; margin-bottom: 0.25rem; }
+.event-list li pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 0.8125rem;
+  color: #94a4ac;
+}
+
+.summary {
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.8125rem;
+  color: #94a4ac;
+  margin: 0;
+  max-height: 520px;
+  overflow-y: auto;
+}
+
+footer {
+  text-align: center;
+  font-size: 0.75rem;
+  color: #7d9ebc;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid #2a3a4e;
+}
+footer .sep { margin: 0 0.5rem; opacity: 0.5; }

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

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Karajan — Pipeline Observability</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <link rel="stylesheet" href="/pipeline.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="/">← HU Board</a>
+      <h1>Pipeline Observability</h1>
+      <div class="session-picker">
+        <label for="sessionSelect">Session:</label>
+        <select id="sessionSelect" aria-label="Active session"></select>
+        <button id="refreshBtn" type="button" title="Refresh now">⟳</button>
+      </div>
+    </header>
+
+    <main>
+      <section id="roleGrid" class="role-grid" aria-label="Pipeline roles"></section>
+
+      <section class="panel">
+        <h2>Solomon arbitrations</h2>
+        <ol id="solomonList" class="event-list"></ol>
+      </section>
+
+      <section class="panel">
+        <h2>Iterations</h2>
+        <ol id="iterationList" class="event-list"></ol>
+      </section>
+
+      <section class="panel">
+        <h2>Summary</h2>
+        <pre id="summaryBlock" class="summary"></pre>
+      </section>
+    </main>
+
+    <footer>
+      <span id="lastRefresh">—</span>
+      <span class="sep">·</span>
+      <span>Auto-refresh every 2 s (click ⟳ to force)</span>
+    </footer>
+
+    <script src="/pipeline.js" type="module"></script>
+  </body>
+</html>