karajan-code 3.0.0 → 3.2.0

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

@@ -26,6 +26,7 @@
       <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>
@@ -51,6 +52,26 @@
     <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/styles.css

@@ -244,6 +244,17 @@ a:hover {
   font-family: var(--font-mono);
 }
 
+.section-header__cost {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary, transparent);
+  cursor: help;
+}
+
 /* ---- Kanban Board ---- */
 .kanban {
   display: grid;
@@ -341,6 +352,12 @@ a:hover {
 .story-card__score--ok { color: var(--color-yellow); }
 .story-card__score--bad { color: var(--color-red); }
 
+.story-card__cost {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
 .quality-bar {
   display: inline-flex;
   gap: 1px;
@@ -939,3 +956,18 @@ body.scoped-mode .header__nav a[href="/pipeline.html"] {
 .rag-bar__label { color: var(--text-secondary, #cbd5e1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rag-bar__fill { display: block; height: 14px; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 3px; }
 .rag-bar__value { text-align: right; color: var(--text-primary, #f8fafc); font-variant-numeric: tabular-nums; }
+
+/* KJC-TSK-0508 — Wiki panel (QMD semantic search) */
+.wiki-search { padding: 1rem; }
+.wiki-form { display: grid; grid-template-columns: 1fr 220px auto auto; gap: .5rem; align-items: center; }
+.wiki-form input[type="search"], .wiki-form input[type="text"] { padding: .5rem .75rem; border-radius: 6px; border: 1px solid var(--border, #334155); background: var(--bg-secondary, #1e1e2e); color: var(--text-primary, #f8fafc); font-size: .9rem; }
+.wiki-fast { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-secondary, #94a3b8); }
+.wiki-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--text-secondary, #94a3b8); font-style: italic; }
+.wiki-results { display: grid; gap: .75rem; padding: 0 1rem 1rem; }
+.wiki-hit { background: var(--bg-secondary, #1e1e2e); border-radius: 8px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.wiki-hit__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
+.wiki-hit__src { font-family: ui-monospace, monospace; font-size: .85rem; color: #a78bfa; }
+.wiki-hit__score { font-size: .75rem; color: var(--text-secondary, #94a3b8); font-variant-numeric: tabular-nums; }
+.wiki-hit__snip { margin: 0; font-family: ui-monospace, monospace; font-size: .82rem; line-height: 1.45; color: var(--text-primary, #f8fafc); white-space: pre-wrap; word-break: break-word; }
+.wiki-code { background: #0f172a; color: #e2e8f0; padding: .5rem .75rem; border-radius: 6px; font-family: ui-monospace, monospace; font-size: .85rem; margin: .5rem 0; }
+@media (max-width: 720px) { .wiki-form { grid-template-columns: 1fr; } }

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

@@ -0,0 +1,139 @@
+// KJC-TSK-0501 — API + polling helpers extracted from app.js (step 3/8).
+// Loaded as a classic script before app.js (after modals.js) — all
+// top-level declarations hoist to global scope so app.js consumes them
+// transparently.
+//
+// Contents:
+//   - api(): thin JSON fetch wrapper used everywhere in the UI.
+//   - triggerSync(): POST /api/sync — fired on page load and the 🔄 button.
+//   - Standby banner: _standbyData state + refreshStandby() +
+//     _renderStandbyBanner() + _tickStandbyCountdowns() +
+//     startStandbyPolling() — KJC-TSK-0414 PR4.
+//   - Server-restart detector: pollServerVersion() + __versionBaseline +
+//     window.forceRefresh — KJC-TSK-0379.
+//
+// Dependencies: `esc()` from formatters.js (already global).
+// `setInterval(pollServerVersion, 30_000)` + initial call fire at the
+// bottom of the file so the detector starts as soon as the script loads.
+
+async function api(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}
+
+// KJC-TSK-0414 PR4: standby banner — sesiones hibernadas pendientes de resume.
+// Polleamos /api/standby cada 30s + tick countdown cada 1s.
+let _standbyData = { sessions: [] };
+let _standbyPollTimer = null;
+let _standbyTickTimer = null;
+
+function _fmtCountdown(ms) {
+  if (ms <= 0) return '✓ resume inmediato';
+  const s = Math.round(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
+}
+
+async function refreshStandby() {
+  try {
+    const r = await api('/api/standby');
+    _standbyData = r || { sessions: [] };
+    _renderStandbyBanner();
+  } catch { /* silencioso — endpoint nuevo, podría no existir en versiones viejas */ }
+}
+
+function _renderStandbyBanner() {
+  let banner = document.getElementById('standby-banner');
+  const sessions = _standbyData.sessions || [];
+  if (sessions.length === 0) {
+    if (banner) banner.remove();
+    return;
+  }
+  if (!banner) {
+    banner = document.createElement('div');
+    banner.id = 'standby-banner';
+    banner.style.cssText = 'background:rgba(251,191,36,0.12);border-left:4px solid #fbbf24;padding:10px 16px;margin:0 0 12px;font-size:0.85rem';
+    const app = document.getElementById('app');
+    if (app?.parentNode) app.parentNode.insertBefore(banner, app);
+  }
+  const now = Date.now();
+  banner.innerHTML = `
+    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
+      <strong>💤 ${sessions.length} sesión(es) hibernadas:</strong>
+      ${sessions.map((s) => {
+        const ms = new Date(s.cooldownUntil).getTime() - now;
+        const label = _fmtCountdown(ms);
+        const reason = s.reason || '?';
+        const planInfo = s.planId ? ` · ${s.planId}${s.huId ? '/' + s.huId : ''}` : '';
+        return `<span data-session="${esc(s.sessionId)}" data-cooldown="${esc(s.cooldownUntil)}" style="background:rgba(0,0,0,0.15);padding:4px 8px;border-radius:4px;font-family:monospace" title="${esc(reason)}${esc(planInfo)}">${esc(s.sessionId)} · <span class="standby-countdown">${label}</span></span>`;
+      }).join('')}
+      <span style="margin-left:auto;color:var(--text-muted);font-size:0.75rem">Auto-resume al llegar el cooldown (board) o <code>kj resume &lt;id&gt;</code></span>
+    </div>
+  `;
+}
+
+function _tickStandbyCountdowns() {
+  const banner = document.getElementById('standby-banner');
+  if (!banner) return;
+  const now = Date.now();
+  for (const chip of banner.querySelectorAll('[data-cooldown]')) {
+    const target = new Date(chip.getAttribute('data-cooldown')).getTime();
+    const span = chip.querySelector('.standby-countdown');
+    if (span) span.textContent = _fmtCountdown(target - now);
+  }
+}
+
+function startStandbyPolling() {
+  if (_standbyPollTimer || _standbyTickTimer) return;
+  refreshStandby();
+  _standbyPollTimer = setInterval(refreshStandby, 30_000);
+  _standbyTickTimer = setInterval(_tickStandbyCountdowns, 1000);
+}
+
+/**
+ * Trigger a full re-scan of disk data (hu-stories + sessions).
+ * Called on page load and via the sync button.
+ */
+async function triggerSync() {
+  try {
+    await fetch('/api/sync', { method: 'POST' });
+  } catch { /* ignore — board may not support sync yet */ }
+}
+
+// --- Server-restart detector (KJC-TSK-0379) ---------------------------
+// Poll /api/version every 30s. First response anchors the baseline; if
+// `boot_time` later differs, the server restarted (likely after a `kj
+// board start`) and the client reloads to pick up any new HTML/JS
+// served with `Cache-Control: no-store`. Avoids the "I killed the
+// server but the browser keeps showing stale UI" pain.
+let __versionBaseline = null;
+async function pollServerVersion() {
+  try {
+    const res = await api('/version');
+    if (!__versionBaseline) { __versionBaseline = res; return; }
+    if (res.boot_time !== __versionBaseline.boot_time) {
+      console.info('[hu-board] server restart detected, reloading...');
+      window.forceRefresh();
+    }
+  } catch (_) { /* network blip; try next tick */ }
+}
+setInterval(pollServerVersion, 30_000);
+pollServerVersion();
+
+// Manual escape hatch: bound to the 🔄 button in the header. Wipes all
+// caches the browser may be holding (Cache API + sessionStorage) and
+// hard-reloads. Useful when the user thinks something is wrong even
+// though the version-poll hasn't fired.
+window.forceRefresh = async function forceRefresh() {
+  try {
+    if ('caches' in window) {
+      const keys = await caches.keys();
+      await Promise.all(keys.map((k) => caches.delete(k)));
+    }
+    sessionStorage.clear();
+  } catch (_) { /* best effort */ }
+  window.location.reload();
+};