@hanzlaa/rcode 3.6.14 → 3.6.16

package/rihal/workflows/validate-prd.md

@@ -20,12 +20,12 @@ Skill not installed — run: npx @hanzlaa/rcode install
 
 ## On Completion
 
-/rihal-create-milestone — build the roadmap from the validated PRD
+/rihal-new-milestone — build the roadmap from the validated PRD
 /rihal-edit-prd — fix validation findings
 /rihal-council — escalate ambiguous requirements to the council
 
 ## ▶ Next Up
 
-- /rihal-create-milestone
+- /rihal-new-milestone
 - /rihal-edit-prd
 - /rihal-council {prd-question}

package/rihal/workflows/verify-work.md

@@ -50,7 +50,7 @@ If $ARGUMENTS contains a phase number, load context:
 INIT=$(node ".rihal/bin/rihal-tools.cjs" init verify-work "${PHASE_ARG}" 2>/dev/null)
 if [[ "$INIT" == @file:* ]]; then INIT=$(cat "${INIT#@file:}"); fi
 AGENT_SKILLS_PLANNER=$(node ".rihal/bin/rihal-tools.cjs" agent-skills rihal-planner 2>/dev/null)
-AGENT_SKILLS_CHECKER=$(node ".rihal/bin/rihal-tools.cjs" agent-skills rihal-checker 2>/dev/null)
+AGENT_SKILLS_CHECKER=$(node ".rihal/bin/rihal-tools.cjs" agent-skills rihal-sprint-checker 2>/dev/null)
 ```
 
 Parse JSON for: `planner_model`, `checker_model`, `commit_docs`, `phase_found`, `phase_dir`, `phase_number`, `phase_name`, `has_verification`, `uat_path`.

package/server/lib/html/client/components/App.js

@@ -13,7 +13,7 @@
  */
 
 import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
-import { getState, setState, subscribe } from '../store.js';
+import { getState, setState, subscribe, registerRefresh } from '../store.js';
 import { startSessionsPoll, refreshOrchToken } from '../orchestrator.js';
 import { Sidebar } from './Sidebar.js';
 import { Topbar } from './Topbar.js';
@@ -65,6 +65,35 @@ function parseHash() {
   return { view: resolvedView, subId };
 }
 
+/** Full-width banner shown when /api/state polling is failing. */
+function OfflineBanner({ offline }) {
+  if (!offline) return null;
+  const s = 'display:flex;align-items:center;gap:var(--space-2);'
+    + 'padding:var(--space-2) var(--space-4);background:var(--red,#eb5757);'
+    + 'color:#fff;font-size:var(--text-sm);font-weight:600;';
+  return html`<div style=${s}>⚠ Dashboard offline — retrying every 30s…</div>`;
+}
+
+/** Thin IDE-style status bar: project path · rcode version · last refresh. */
+function StatusBar({ projectRoot, projectName, version, updatedAgo, offline, refreshing }) {
+  const bar = 'display:flex;align-items:center;gap:var(--space-4);height:24px;'
+    + 'padding:0 var(--space-4);background:var(--bg-elev-1);'
+    + 'border-top:1px solid var(--border-subtle);font-family:var(--font-mono);'
+    + 'font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;';
+  const dot = 'width:6px;height:6px;border-radius:50%;flex-shrink:0;background:'
+    + (offline ? 'var(--red,#eb5757)' : 'var(--accent-green)') + ';'
+    + (refreshing ? 'animation:pulse-dot 1s ease-in-out infinite;' : '');
+  const path = projectRoot || projectName || 'no project';
+  return html`
+    <footer style=${bar}>
+      <span style=${dot}></span>
+      <span style="overflow:hidden;text-overflow:ellipsis;" title=${path}>${path}</span>
+      <span style="margin-left:auto;">rcode v${version || '?'}</span>
+      <span>${offline ? 'offline' : refreshing ? 'syncing…' : 'updated ' + updatedAgo}</span>
+    </footer>
+  `;
+}
+
 /** Root App component. No props needed — reads everything from the store. */
 export function App() {
   // ---- Router state ----
@@ -121,21 +150,21 @@ export function App() {
     return () => clearInterval(id);
   }, []);
 
-  // ---- Manual refresh ----
+  // ---- Refresh (manual + 30s poll share this) ----
   const lastScannedRef = useRef(null);
 
   const fetchAndRerender = useCallback(async () => {
-    const btn = document.getElementById('refresh-btn');
-    if (btn) btn.textContent = '↺ …';
+    setState({ refreshing: true });
     try {
       const r = await fetch('/api/state');
-      if (!r.ok) return;
+      if (!r.ok) { setState({ refreshing: false, offline: true }); return; }
       const newState = await r.json();
       lastScannedRef.current = newState.lastScanned;
       scanTimeRef.current = Date.now();
       setUpdatedAgo('just now');
+      const patch = { refreshing: false, offline: false, lastRefresh: Date.now() };
       if (newState.raw) {
-        setState({
+        Object.assign(patch, {
           phases:           newState.phaseTree            || newState.raw.phases || [],
           milestone:        newState.raw.milestone        || '',
           currentPhase:     newState.raw.current_phase    || null,
@@ -146,26 +175,23 @@ export function App() {
           last_session:     newState.raw.last_session     || null,
         });
       }
-    } catch { /* network errors ignored */ }
-    if (btn) btn.textContent = '↺ Refresh';
+      setState(patch);
+    } catch {
+      // Network failure → mark offline so the banner shows; the poll keeps retrying.
+      setState({ refreshing: false, offline: true });
+    }
   }, []);
 
   // ---- 30s auto-refresh ----
   useEffect(() => {
-    const id = setInterval(async () => {
-      try {
-        const r = await fetch('/api/state');
-        if (!r.ok) return;
-        const s = await r.json();
-        if (s && s.lastScanned !== lastScannedRef.current) await fetchAndRerender();
-      } catch { /* ignore */ }
-    }, 30000);
+    const id = setInterval(fetchAndRerender, 30000);
     return () => clearInterval(id);
   }, [fetchAndRerender]);
 
-  // Expose manualRefresh globally for any legacy onclick="manualRefresh()" callers
+  // Register the refresh handler with the store so any component can call
+  // refresh() directly. Also keeps window._preactRefresh in sync for legacy.
   useEffect(() => {
-    window._preactRefresh = fetchAndRerender;
+    registerRefresh(fetchAndRerender);
   }, [fetchAndRerender]);
 
   // Start the global session poll and refresh the orchestrator token on boot.
@@ -189,10 +215,11 @@ export function App() {
         document.body.classList.remove('sidebar-visible');
       }}></div>
 
-      <div class="content-area" id="main-content">
+      <div class="content-area" id="main-content" style="grid-template-rows:44px 1fr auto;">
         <${Topbar}
           projectName=${storeState.projectName || ''}
           updatedAgo=${updatedAgo}
+          refreshing=${storeState.refreshing}
           onRefresh=${fetchAndRerender}
           onToggleTheme=${toggleTheme}
           onToggleSidebar=${toggleSidebar}
@@ -200,8 +227,18 @@ export function App() {
         />
 
         <div class="main-scroll" id="main-scroll">
+          <${OfflineBanner} offline=${storeState.offline} />
           ${PreactView ? html`<${PreactView} subId=${subId} />` : null}
         </div>
+
+        <${StatusBar}
+          projectRoot=${storeState.projectRoot}
+          projectName=${storeState.projectName}
+          version=${storeState.version}
+          updatedAgo=${updatedAgo}
+          offline=${storeState.offline}
+          refreshing=${storeState.refreshing}
+        />
       </div>
 
       <${XtermPanel} />

package/server/lib/html/client/components/Sidebar.js

@@ -7,6 +7,9 @@
 
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
+import { useStore } from '../store.js';
+import { allSprints, allTasks } from '../util.js';
+import { AGENTS } from '../agents-data.js';
 
 // Nav structure: [ { section, links: [ { view, icon, label } ] } ]
 const NAV_SECTIONS = [
@@ -47,6 +50,15 @@ const NAV_SECTIONS = [
  *   projectName {string}  — displayed under the "Rihal" label
  */
 export function Sidebar({ activeView, projectName }) {
+  const S = useStore();
+  const counts = {
+    phases:    (S.phases || []).length,
+    sprints:   allSprints(S.phases).length,
+    tasks:     allTasks(S.phases).length,
+    decisions: (S.decisions || []).length,
+    agents:    AGENTS.length,
+  };
+
   return html`
     <aside class="sidebar" id="sidebar">
       <div class="sidebar-project">
@@ -64,6 +76,7 @@ export function Sidebar({ activeView, projectName }) {
             >
               <${Icon} name=${icon} size=${14} />
               ${' ' + label}
+              ${counts[view] ? html`<span class="nav-count">${counts[view]}</span>` : null}
             </button>
           `)}
         `)}

package/server/lib/html/client/components/Topbar.js

@@ -15,7 +15,7 @@
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
 
-export function Topbar({ projectName, updatedAgo, onRefresh, onToggleTheme, onToggleSidebar, themeLabel }) {
+export function Topbar({ projectName, updatedAgo, refreshing, onRefresh, onToggleTheme, onToggleSidebar, themeLabel }) {
   return html`
     <header>
       <div class="topbar-start-group">
@@ -36,8 +36,11 @@ export function Topbar({ projectName, updatedAgo, onRefresh, onToggleTheme, onTo
         </div>
       </div>
       <div class="header-actions">
-        <span class="live" id="live-dot" title="Live"></span>
-        <span id="updated-ago" class="updated-ago">${updatedAgo || 'just now'}</span>
+        <span class="live" id="live-dot" title="Live"
+          style=${refreshing ? 'animation-duration:0.7s;background:var(--accent-blue);' : ''}></span>
+        <span id="updated-ago" class="updated-ago">
+          ${refreshing ? '⟳ syncing…' : (updatedAgo || 'just now')}
+        </span>
         <button class="header-btn" id="refresh-btn" onClick=${onRefresh}>↺ Refresh</button>
         <!-- icon shows TARGET state (not current): dark→sun means "click to go light"; light→moon means "click to go dark" -->
         <button class="header-btn" id="theme-btn" onClick=${onToggleTheme} title="Toggle theme"><${Icon} name=${themeLabel === 'light' ? 'moon' : 'sun'} size=${14}/></button>

package/server/lib/html/client/store.js

@@ -27,6 +27,16 @@ let _state = {
   workstreams:      _seed.workstreams      || [],
   pendingHandoff:   _seed.pendingHandoff   || null,
   memoryBank:       _seed.memoryBank       || null,
+  // Environment info — surfaced in the bottom status bar.
+  projectName:      _seed.projectName      || '',
+  projectRoot:      _seed.projectRoot      || '',
+  version:          _seed.version          || '',
+  // Refresh lifecycle: refreshing flips true during a poll/fetch; offline is
+  // true when /api/state fails; lastRefresh is the ms timestamp of the last
+  // successful fetch (null until the first one completes).
+  refreshing:       false,
+  offline:          false,
+  lastRefresh:      null,
   // Live orchestrator sessions (populated by startSessionsPoll in orchestrator.js)
   activeSessions:   [],
   // File jump bridge: AgentsView sets this to a slug so FilesView opens it.
@@ -75,6 +85,26 @@ export function subscribe(fn) {
   return () => _subscribers.delete(fn);
 }
 
+/**
+ * Refresh handler bridge.
+ *
+ * App owns the actual /api/state fetch (fetchAndRerender). It registers that
+ * function here on mount so any component can trigger a refresh via refresh()
+ * without reaching for a window global. `window._preactRefresh` is kept in
+ * sync for any legacy inline-onclick callers.
+ */
+let _refreshHandler = null;
+
+export function registerRefresh(fn) {
+  _refreshHandler = typeof fn === 'function' ? fn : null;
+  if (typeof window !== 'undefined') window._preactRefresh = _refreshHandler;
+}
+
+/** Trigger a data refresh, if a handler has been registered. */
+export function refresh() {
+  if (typeof _refreshHandler === 'function') return _refreshHandler();
+}
+
 /**
  * Preact hook. Subscribes the calling component to the store and
  * returns the current state. The component re-renders on every setState().

package/server/lib/html/client/util.js

@@ -7,16 +7,6 @@
  * Import here; do NOT duplicate in component files.
  */
 
-/** HTML-escape a value for safe rendering. */
-export function esc(s) {
-  return String(s || '')
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
-
 /** Percentage string. Returns '—' if total is 0. */
 export function pct(done, total) {
   return total > 0 ? Math.round(done / total * 100) + '%' : '—';

package/server/lib/html/client/views/FilesView.js

@@ -172,7 +172,10 @@ export function FilesView() {
     try {
       const resp = await fetch('/api/file?path=' + encodeURIComponent(file.path));
       if (!resp.ok) {
-        setFileContent({ html: null, loading: false, error: 'Failed to load file.' });
+        const msg = resp.status === 404
+          ? 'File not found: ' + file.path
+          : 'Failed to load file (HTTP ' + resp.status + ').';
+        setFileContent({ html: null, loading: false, error: msg });
         return;
       }
       const text = await resp.text();

package/server/lib/html/client/views/KanbanView.js

@@ -8,7 +8,7 @@
  */
 
 import { html, useState, useCallback } from '../preact.js';
-import { useStore } from '../store.js';
+import { useStore, refresh } from '../store.js';
 import { allTasks } from '../util.js';
 import { runStory, stopStory, openOrchPanel } from '../orchestrator.js';
 import { showToast } from '../components/shared.js';
@@ -131,7 +131,7 @@ function KanbanColumn({ col, cards, onDragStart, onDragEnd, onDragOver, onDrop }
 
 // ---- Root KanbanView ----
 export function KanbanView() {
-  const { phases, activeSessions } = useStore();
+  const { phases, activeSessions, currentPhase, milestone } = useStore();
   const tasks = allTasks(phases);
 
   // ---- Local column state (visual DnD overrides) ----
@@ -178,7 +178,7 @@ export function KanbanView() {
 
   // ---- Manual refresh ----
   function handleSync() {
-    if (typeof window._preactRefresh === 'function') window._preactRefresh();
+    refresh();
   }
 
   function handleSessions() {
@@ -200,7 +200,18 @@ export function KanbanView() {
         </div>
         <div class="empty" style="margin:24px;">
           No stories yet.
-          <div class="empty-action">/rihal-plan to generate tasks</div>
+          ${(milestone || currentPhase) ? html`
+            <div class="empty-action">
+              ${milestone ? html`Milestone <strong>${milestone}</strong>` : null}
+              ${milestone && currentPhase ? ' · ' : null}
+              ${currentPhase ? html`Phase <strong>${currentPhase}</strong>` : null}
+              ${' is active.'}
+            </div>
+          ` : null}
+          <div class="empty-action">
+            Run <code>/rihal-plan</code> to generate sprint stories, or browse
+            planning docs in the <a href="#files">Files</a> view.
+          </div>
         </div>
       </div>
     `;

package/server/lib/html/client/views/MemoryView.js

@@ -13,10 +13,10 @@ import { html, useState, useEffect } from '../preact.js';
 
 // ---- Command hints accordion ----
 const MEMORY_HINTS = [
-  ['/rcode:memory-init',    'Bootstrap the Memory Bank'],
-  ['/rcode:memory-update',  'Append a decision, issue, or stakeholder entry'],
-  ['/rcode:memory-distill', 'Regenerate fast-load distillates'],
-  ['/rcode:memory-audit',   'Find stale entries and gaps'],
+  ['/rihal-memory-init',    'Bootstrap the Memory Bank'],
+  ['/rihal-memory-update',  'Append a decision, issue, or stakeholder entry'],
+  ['/rihal-memory-distill', 'Regenerate fast-load distillates'],
+  ['/rihal-memory-audit',   'Find stale entries and gaps'],
 ];
 
 function CmdAccordion({ hints }) {
@@ -117,7 +117,7 @@ export function MemoryView() {
         <div class="empty">
           <h3 style="color:var(--rihal-gold);">Not initialised</h3>
           <p>The Memory Bank is rcode's structured project context.</p>
-          <div class="empty-action">Run <code>/rcode:memory-init</code> to bootstrap</div>
+          <div class="empty-action">Run <code>/rihal-memory-init</code> to bootstrap</div>
         </div>
       </div>
     `;
@@ -128,7 +128,7 @@ export function MemoryView() {
       <div class="view active" id="view-memory">
         <div class="view-title">Memory Bank</div>
         <div class="empty">
-          <p>Directory exists but INDEX.md is missing — re-run <code>/rcode:memory-init</code></p>
+          <p>Directory exists but INDEX.md is missing — re-run <code>/rihal-memory-init</code></p>
         </div>
       </div>
     `;

package/server/lib/html/client/views/OrchestrationView.js

@@ -131,6 +131,13 @@ function CommandRunner() {
               : html`<${Icon} name="play" size=${14}/> Run`}
         </button>
       </div>
+      <div class="cmd-runner-hint">
+        ${isRunning
+          ? html`Command is running — output is streaming to the terminal panel.`
+          : busy
+            ? html`Starting — the terminal panel will open shortly.`
+            : html`Select a command and press Run. Output streams live to the terminal panel.`}
+      </div>
     </div>
   `;
 }
@@ -152,8 +159,11 @@ export function OrchestrationView() {
 
       ${sessions.length === 0 ? html`
         <div class="empty">
-          No agent sessions yet.
-          <div class="empty-action">Run a phase or sprint to start one</div>
+          No active execution.
+          <div class="empty-action">
+            Use the Command Runner above, or run <code>/rihal-execute</code> to
+            start a phase or sprint.
+          </div>
         </div>
       ` : html`
         <div class="orch-grid">

package/server/lib/html/client/views/OverviewView.js

@@ -7,8 +7,8 @@
 
 import { html } from '../preact.js';
 import { useStore } from '../store.js';
-import { pct, humanDate, allSprints, chip, sprintHints as getSprintHints } from '../util.js';
-import { ProgressBar, CmdHints } from '../components/shared.js';
+import { pct, humanDate, allSprints, allTasks, chip, sprintHints as getSprintHints } from '../util.js';
+import { ProgressBar, CmdHints, Chip } from '../components/shared.js';
 import { Icon } from '../icons-client.js';
 
 // ---- OverviewView ----
@@ -38,6 +38,41 @@ export function OverviewView() {
     hints = [['/rihal-resume-work','Resume from the pending handoff'], ...hints];
   }
 
+  // At-a-glance status tiles — phase, sprint, blocked, last execution.
+  function StatusSummary() {
+    const curPhase = (S.phases || []).find(
+      p => String(p.id) === String(S.currentPhase),
+    ) || null;
+    const blockedCount = allTasks(S.phases).filter(t => t.status === 'blocked').length;
+    const lastExec = S.last_session
+      ? humanDate(S.last_session.date || S.last_session.timestamp)
+      : null;
+    return html`
+      <div class="stat">
+        <div class="label">Current Phase</div>
+        <div class="value">${curPhase ? 'P' + curPhase.id : '—'}</div>
+        <div class="sub">
+          ${curPhase ? html`${curPhase.name} · <${Chip} status=${curPhase.status}/>` : 'No phase set'}
+        </div>
+      </div>
+      <div class="stat">
+        <div class="label">Active Sprint</div>
+        <div class="value">${curSprint ? curSprint.id : '—'}</div>
+        <div class="sub">${curSprint ? (curSprint.goal || curSprint.status || 'in progress') : 'No active sprint'}</div>
+      </div>
+      <div class="stat" style=${blockedCount ? 'border-left-color:var(--red,#eb5757)' : ''}>
+        <div class="label">Blocked Tasks</div>
+        <div class="value" style=${blockedCount ? 'color:var(--red,#eb5757)' : ''}>${blockedCount}</div>
+        <div class="sub">${blockedCount ? 'needs attention' : 'all clear'}</div>
+      </div>
+      <div class="stat">
+        <div class="label">Last Execution</div>
+        <div class="value" style="font-size:var(--text-lg,1rem);">${lastExec || '—'}</div>
+        <div class="sub">${lastExec ? 'most recent session' : 'no sessions yet'}</div>
+      </div>
+    `;
+  }
+
   // Current sprint progress
   function SprintProgress() {
     if (!curSprint) return null;
@@ -175,8 +210,12 @@ export function OverviewView() {
     if (!S.memoryBank || !S.memoryBank.active) return null;
     const m = S.memoryBank.active;
     return html`
-      <section>
-        <h2 class="section-icon"><${Icon} name="brain" size=${16}/> Memory Bank</h2>
+      <section
+        class="item-clickable"
+        style="cursor:pointer;"
+        onClick=${() => { location.hash = 'memory'; }}
+      >
+        <h2 class="section-icon"><${Icon} name="brain" size=${16}/> Memory Bank →</h2>
         <div class="body">
           <div class="attr-grid">
             <div class="attr-item">
@@ -207,6 +246,7 @@ export function OverviewView() {
   return html`
     <div id="view-overview" class="view active">
       <div class="stats">
+        <${StatusSummary}/>
         <${VelocitySpark}/>
       </div>
       <${HandoffBanner}/>

package/server/lib/html/client.js

@@ -14,11 +14,18 @@
 
 const { ICONS } = require('./icons');
 
+// rcode version — read once at module load; surfaced in the dashboard status bar.
+let RCODE_VERSION = '';
+try { RCODE_VERSION = require('../../../package.json').version || ''; } catch { /* version unknown */ }
+
 // Fields the client needs from the scanned state. Kept in sync with
 // store.js initial state and the view components that read it.
 function clientState(state) {
   return JSON.stringify({
     phases:           state.phaseTree           || state.raw?.phases || [],
+    projectName:      state.projectName         || '',
+    projectRoot:      state.projectRoot         || '',
+    version:          RCODE_VERSION,
     milestone:        state.raw?.milestone      || '',
     currentPhase:     state.raw?.current_phase  || null,
     currentSprint:    state.raw?.current_sprint || null,

package/server/lib/html/css.js

@@ -226,6 +226,16 @@ html, body {
 }
 .nav-link:hover { background: var(--bg-hover); color: var(--text-secondary); }
 .nav-link.active { background: var(--bg-elev-2); color: var(--text-primary); }
+.nav-count {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-elev-2);
+  padding: 1px 6px;
+  border-radius: var(--radius-2);
+}
+.nav-link.active .nav-count { color: var(--text-secondary); background: var(--bg-hover); }
 
 /* Mobile hamburger */
 .hamburger-btn {
@@ -2230,6 +2240,12 @@ footer {
   gap: var(--space-3);
   align-items: center;
 }
+.cmd-runner-hint {
+  margin-top: var(--space-3);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  line-height: 1.5;
+}
 .cmd-runner-select {
   flex: 1;
   background: var(--bg-input, var(--bg-elev-2));

package/server/lib/scanner.js

@@ -85,11 +85,14 @@ function buildPhaseTree(projectDir, rawPhases) {
       while ((tm = taskRe.exec(text))) {
         const idM    = tm[1].match(/id="([^"]+)"/);
         const titleM = tm[2].match(/<title>([\s\S]*?)<\/title>/);
-        stories.push({
+        const acM    = tm[2].match(/<acceptance_criteria>\s*([\s\S]*?)\s*<\/acceptance_criteria>/);
+        const story = {
           id:     idM ? idM[1] : `${sid}-task-${stories.length + 1}`,
           title:  titleM ? titleM[1].trim() : `Task ${stories.length + 1}`,
           status: phaseComplete ? 'done' : 'todo',
-        });
+        };
+        if (acM && acM[1].trim()) story.acceptance = acM[1].trim();
+        stories.push(story);
       }
       // Fallback for pre-<task> SPRINT.md format (phases 20-30 era):
       // "### Story 20.01.01 — title" / "### Task X — title" headings.
@@ -156,6 +159,8 @@ function scanState(rihalDir) {
     || state.raw?.project
     || (dirName !== '.' ? dirName : 'Unknown project');
 
+  state.projectRoot = projectDir;
+
   state.currentPhase   = state.raw?.current_phase  || null;
   state.currentSprint  = state.raw?.current_sprint || null;
   state.milestone      = state.raw?.milestone       || null;