@hanzlaa/rcode 4.1.2 → 4.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzlaa/rcode",
-  "version": "4.1.2",
+  "version": "4.3.1",
   "description": "rcode — the AI team that never forgets. Persistent memory, specialist agents, and slash commands for AI IDEs. Works in Claude Code, Cursor, Gemini, VS Code, and Antigravity.",
   "main": "cli/index.js",
   "bin": {

package/rcode/references/auto-init-guard.md

@@ -25,8 +25,8 @@ rcode isn't configured for this project yet. Let me set it up — takes 30 secon
 **1. Bootstrap local tooling** — copy bin from the global install:
 
 ```bash
-GLOBAL_RIHAL="$HOME/.rcode"
-TOOLS_SRC="$GLOBAL_RIHAL/bin/rcode-tools.cjs"
+GLOBAL_RCODE="$HOME/.rcode"
+TOOLS_SRC="$GLOBAL_RCODE/bin/rcode-tools.cjs"
 
 if [ ! -f "$TOOLS_SRC" ]; then
   echo "ERROR: Global rcode tools not found at $TOOLS_SRC"

package/rcode/references/output-format.md

@@ -42,7 +42,7 @@ Use for major workflow transitions.
 
 ```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- RIHAL ► {STAGE NAME}
+ RCODE ► {STAGE NAME}
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ```
 
@@ -69,7 +69,7 @@ Use this when a router command dispatches to another command:
 
 ```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- RIHAL ► ROUTING
+ RCODE ► ROUTING
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Input: {user's question or intent}
@@ -328,7 +328,7 @@ Use standard markdown pipe tables with status symbols:
 **Majlis banner** (multi-agent council):
 ```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- RIHAL ► MAJLIS CONVENING
+ RCODE ► MAJLIS CONVENING
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ```
 
@@ -354,7 +354,7 @@ the banner, not inside it.
 
 ```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- RIHAL ► PLANNING SPRINT 01.1
+ RCODE ► PLANNING SPRINT 01.1
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 التخطيط للسباق 01.1 — يرجى الانتظار
 ```
@@ -389,7 +389,7 @@ translated prose goes outside the art, on its own line(s).
 
 - Varying box/banner widths within same output
 - Mixing banner styles (`===`, `---`, `***`)
-- Skipping `RIHAL ►` prefix in stage banners
+- Skipping `RCODE ►` prefix in stage banners
 - Random emoji (`🚀`, `✨`, `💫`) outside the approved set
 - Missing Next Up block after workflow completions
 - Hardcoding references to other methodologies in rcode's UX

package/rcode/skills/actions/2-plan/rcode-create-milestone/steps/step-10-complete.md

@@ -16,7 +16,7 @@ Append `step-10-complete` to `stepsCompleted`. Add `completedAt: {ISO date}`.
 
 ```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- RIHAL ► ROADMAP CREATED
+ RCODE ► ROADMAP CREATED
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Source PRD:     {inputFile}

package/server/dashboard.js

@@ -31,7 +31,7 @@ const { spawn } = require('child_process');
 const CLIENT_DIR = path.join(__dirname, 'lib', 'html', 'client');
 
 const { scanState } = require('./lib/scanner');
-const { handleApiState, handleApiFiles, handleApiFile, handleApiHierarchy, handleApiMemory } = require('./lib/api');
+const { handleApiState, handleApiFiles, handleApiFile, handleApiHierarchy, handleApiMemory, handleApiAgents } = require('./lib/api');
 const { renderHtml } = require('./lib/html/shell');
 
 // ---------- Configuration ----------
@@ -60,7 +60,20 @@ function loadOrchToken() {
 const ORCH_TOKEN = loadOrchToken();
 
 // ---------- HTTP Server ----------
+// Every request runs through a try/catch so an unanticipated throw inside a
+// handler (e.g. a pathological .planning tree in the scanner) returns a 500
+// instead of crashing the whole server process.
 const server = http.createServer((req, res) => {
+  try {
+    handleRequest(req, res);
+  } catch (err) {
+    console.error('[dashboard] request handler failed:', err && err.stack || err);
+    if (!res.headersSent) res.writeHead(500, { 'Content-Type': 'text/plain' });
+    res.end('Internal server error');
+  }
+});
+
+function handleRequest(req, res) {
   const url = req.url || '/';
 
   if (url === '/health') {
@@ -79,6 +92,11 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  if (url === '/api/agents') {
+    handleApiAgents(req, res, PROJECT_ROOT);
+    return;
+  }
+
   if (url.startsWith('/api/file')) {
     handleApiFile(req, res, PROJECT_ROOT);
     return;
@@ -104,10 +122,12 @@ const server = http.createServer((req, res) => {
 
   if (url.startsWith('/js/')) {
     const name = url.slice(4).split('?')[0];
-    // Allow exactly one optional subdirectory (e.g. components/App.js, views/Foo.js)
-    // while still rejecting traversal attempts. The regex blocks `..`, encoded
-    // separators, and anything other than word chars, dots, hyphens, and one `/`.
-    if (!/^(?:[\w.-]+\/)?[\w.-]+\.js$/.test(name)) { res.writeHead(404); res.end('Not found'); return; }
+    // Allow nested subdirectories (e.g. components/App.js, views/Foo.js,
+    // components/dashboard/ProgressDonut.js) while still rejecting traversal.
+    // The regex limits each segment to word chars, dots, and hyphens; the
+    // resolved-path check below is the real traversal guard (a `..` segment
+    // would pass this pattern but fail the CLIENT_DIR containment check).
+    if (!/^(?:[\w.-]+\/)*[\w.-]+\.js$/.test(name)) { res.writeHead(404); res.end('Not found'); return; }
     // Defense-in-depth: resolved path must stay inside CLIENT_DIR even after
     // any OS-level resolution (handles encoded traversal the regex might miss).
     const resolved = path.resolve(CLIENT_DIR, name);
@@ -135,17 +155,17 @@ const server = http.createServer((req, res) => {
 
   res.writeHead(404);
   res.end('Not found');
-});
+}
 
 server.listen(PORT, '127.0.0.1', () => {
   console.log(`\n🕌 Majlis (مجلس) — rcode Dashboard`);
   console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
-  console.log(`   Mode:       view-only`);
-  console.log(`   URL:        http://localhost:${PORT}`);
-  console.log(`   Scanning:   ${RCODE_DIR}`);
-  console.log(`   Refresh:    30s soft poll`);
-  console.log(`   Keys:       R=refresh  1-9=views  F=filter`);
-  console.log(`   Stop:       kill $(ss -ltnp 'sport = :${PORT}' | awk 'NR>1{match($6,/pid=([0-9]+)/,m); print m[1]}')`);
+  console.log(`   👉 OPEN THIS:  http://localhost:${PORT}`);
+  console.log(`   Mode:          view-only`);
+  console.log(`   Scanning:      ${RCODE_DIR}`);
+  console.log(`   Refresh:       30s soft poll`);
+  console.log(`   Note:          port ${PORT + 1} is the internal orchestrator API — not for the browser`);
+  console.log(`   Stop:          kill $(ss -ltnp 'sport = :${PORT}' | awk 'NR>1{match($6,/pid=([0-9]+)/,m); print m[1]}')`);
   console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`);
 });
 
@@ -205,7 +225,7 @@ function spawnOrchestrator() {
   try {
     _orchProc = spawn(process.execPath, [ORCH_BIN], {
       cwd: path.join(__dirname, '..'),
-      env: { ...process.env, ORCH_TOKEN, RCODE_DIR, PROJECT_ROOT },
+      env: { ...process.env, ORCH_TOKEN, RCODE_DIR, PROJECT_ROOT, DASH_PORT: String(PORT) },
       stdio: 'pipe',
     });
     _orchProc.stdout.on('data', chunk => {

package/server/lib/api.js

@@ -8,7 +8,8 @@ const { scanState, scanMemoryBank } = require('./scanner');
 function handleApiState(req, res, rcodeDir) {
   const state = scanState(rcodeDir);
   res.writeHead(200, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify(state, null, 2));
+  // Compact JSON — pretty-printing roughly doubled the polled payload.
+  res.end(JSON.stringify(state));
 }
 
 function handleApiFiles(req, res, projectRoot) {
@@ -192,13 +193,70 @@ function handleApiHierarchy(req, res, rcodeDir) {
     })),
   };
   res.writeHead(200, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify(hierarchy, null, 2));
+  res.end(JSON.stringify(hierarchy));
 }
 
 function handleApiMemory(req, res, rcodeDir) {
   const memory = scanMemoryBank(rcodeDir);
   res.writeHead(200, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify(memory, null, 2));
+  res.end(JSON.stringify(memory));
 }
 
-module.exports = { handleApiState, handleApiFiles, handleApiFile, handleApiHierarchy, handleApiMemory };
+// Parse the keys we surface on agent cards out of an agent definition's
+// YAML frontmatter. Deliberately not a YAML parser: top-level `key: value`
+// scalar lines are read directly; for `description` (usually a `|` block
+// scalar) the first two indented lines are captured as a card-sized summary.
+function parseAgentFrontmatter(raw) {
+  const meta = { name: null, model: null, tools: [], color: null, description: null };
+  if (!raw.startsWith('---')) return meta;
+  const end = raw.indexOf('\n---', 3);
+  if (end === -1) return meta;
+  let inDescription = false;
+  const descLines = [];
+  for (const line of raw.slice(3, end).split('\n')) {
+    const m = line.match(/^([A-Za-z][\w-]*):\s*(.*)$/);
+    if (m) {
+      inDescription = false;
+      const key = m[1].toLowerCase();
+      const value = m[2].trim();
+      if (key === 'description') {
+        if (value && value !== '|' && value !== '>') descLines.push(value);
+        else inDescription = true;
+        continue;
+      }
+      if (!value || value === '|' || value === '>') continue;
+      if (key === 'name')  meta.name  = value;
+      if (key === 'model') meta.model = value;
+      if (key === 'color') meta.color = value;
+      if (key === 'tools') meta.tools = value.split(',').map(t => t.trim()).filter(Boolean);
+    } else if (inDescription && descLines.length < 2 && /^\s+\S/.test(line)) {
+      descLines.push(line.trim());
+    }
+  }
+  meta.description = descLines.join(' ') || null;
+  return meta;
+}
+
+// Read-only roster metadata for the Agents view. Scans the fixed
+// rcode/agents/ directory (no user-supplied paths — nothing to contain) and
+// returns one small frontmatter summary per agent .md file. Full prompt
+// bodies are NOT included; the client fetches those lazily per agent via the
+// existing /api/file handler when a card is opened.
+function handleApiAgents(req, res, projectRoot) {
+  const agentsDir = path.join(projectRoot, 'rcode', 'agents');
+  let entries = [];
+  try { entries = fs.readdirSync(agentsDir, { withFileTypes: true }); }
+  catch { /* no agents dir — return an empty roster */ }
+  const agents = [];
+  for (const e of entries) {
+    if (!e.isFile() || !e.name.endsWith('.md')) continue;
+    let raw;
+    try { raw = fs.readFileSync(path.join(agentsDir, e.name), 'utf8'); }
+    catch { continue; }
+    agents.push({ file: e.name, ...parseAgentFrontmatter(raw) });
+  }
+  res.writeHead(200, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(agents));
+}
+
+module.exports = { handleApiState, handleApiFiles, handleApiFile, handleApiHierarchy, handleApiMemory, handleApiAgents };

package/server/lib/html/client/agents-data.js

@@ -3,25 +3,29 @@
  *
  * Previously lived in shell.js:17-36 as a server-rendered array.
  * Now exported as a pure ESM constant so AgentsView can render it.
+ *
+ * `file` is the agent's definition under rcode/agents/ — fetched lazily by
+ * AgentsView when a card is opened. null = no prompt file on disk (system
+ * entries like Raees/Majlis/Diwan are skills, not agent definitions).
  */
 
 export const AGENTS = [
-  { name: 'Sadiq Damani',         arabic: 'صادق',         role: 'Director of Strategy',              real: true, type: 'leadership' },
-  { name: 'Waleed Al Harthi',     arabic: 'وليد',         role: 'CTO',                               real: true, type: 'leadership' },
-  { name: 'Ahmed Al Hassani',     arabic: 'أحمد الحسني',  role: 'Technology & Development Director', real: true, type: 'leadership' },
-  { name: 'Nasser',               arabic: 'ناصر',         role: 'Engineering Manager',               real: true, type: 'leadership' },
-  { name: 'Hussain',              arabic: 'حسين',         role: 'PM + Scrum Master',                                type: 'product' },
-  { name: 'Layla',                arabic: 'ليلى',         role: 'Lead UX Designer',                                 type: 'design' },
-  { name: 'Zahra',                arabic: 'زهرة',         role: 'Branding & Creative Director',                    type: 'design' },
-  { name: 'Omar',                 arabic: 'عمر',          role: 'Full-Stack Engineer',                              type: 'engineering' },
-  { name: 'Haitham Al Khamiyasi', arabic: 'هيثم',        role: 'Senior Frontend',                   real: true, type: 'engineering' },
-  { name: 'Yousef',               arabic: 'يوسف',         role: 'Senior Backend',                                   type: 'engineering' },
-  { name: 'Zayd',                 arabic: 'زيد',          role: 'ML Engineer',                                      type: 'engineering' },
-  { name: 'Fatima',               arabic: 'فاطمة',        role: 'QA Lead',                                          type: 'quality' },
-  { name: 'Khalid',               arabic: 'خالد',         role: 'DevOps',                                           type: 'engineering' },
-  { name: 'Noor',                 arabic: 'نور',          role: 'Scribe',                                           type: 'support' },
-  { name: 'Mariam',               arabic: 'مريم',         role: 'Marketing Lead',                                   type: 'product' },
-  { name: 'Raees',                arabic: 'رئيس',         role: 'Orchestration Director',                          type: 'system' },
-  { name: 'Majlis',               arabic: 'مجلس',         role: 'Consulting Council',                               type: 'system' },
-  { name: 'Diwan',                arabic: 'ديوان',        role: 'Dashboard Registry',                               type: 'system' },
+  { name: 'Sadiq Damani',         arabic: 'صادق',         role: 'Director of Strategy',              real: true, type: 'leadership',  file: 'rcode-sadiq.md' },
+  { name: 'Waleed Al Harthi',     arabic: 'وليد',         role: 'CTO',                               real: true, type: 'leadership',  file: 'rcode-waleed.md' },
+  { name: 'Ahmed Al Hassani',     arabic: 'أحمد الحسني',  role: 'Technology & Development Director', real: true, type: 'leadership',  file: 'rcode-ahmed.md' },
+  { name: 'Nasser',               arabic: 'ناصر',         role: 'Engineering Manager',               real: true, type: 'leadership',  file: 'rcode-nasser.md' },
+  { name: 'Hussain',              arabic: 'حسين',         role: 'PM + Scrum Master',                                type: 'product',     file: 'rcode-hussain-pm.md' },
+  { name: 'Layla',                arabic: 'ليلى',         role: 'Lead UX Designer',                                 type: 'design',      file: 'rcode-layla.md' },
+  { name: 'Zahra',                arabic: 'زهرة',         role: 'Branding & Creative Director',                    type: 'design',      file: 'rcode-zahra.md' },
+  { name: 'Omar',                 arabic: 'عمر',          role: 'Full-Stack Engineer',                              type: 'engineering', file: 'rcode-omar.md' },
+  { name: 'Haitham Al Khamiyasi', arabic: 'هيثم',        role: 'Senior Frontend',                   real: true, type: 'engineering', file: 'rcode-haitham.md' },
+  { name: 'Yousef',               arabic: 'يوسف',         role: 'Senior Backend',                                   type: 'engineering', file: 'rcode-yousef.md' },
+  { name: 'Zayd',                 arabic: 'زيد',          role: 'ML Engineer',                                      type: 'engineering', file: 'rcode-zayd.md' },
+  { name: 'Fatima',               arabic: 'فاطمة',        role: 'QA Lead',                                          type: 'quality',     file: 'rcode-fatima.md' },
+  { name: 'Khalid',               arabic: 'خالد',         role: 'DevOps',                                           type: 'engineering', file: 'rcode-khalid.md' },
+  { name: 'Noor',                 arabic: 'نور',          role: 'Scribe',                                           type: 'support',     file: 'rcode-noor.md' },
+  { name: 'Mariam',               arabic: 'مريم',         role: 'Marketing Lead',                                   type: 'product',     file: 'rcode-mariam.md' },
+  { name: 'Raees',                arabic: 'رئيس',         role: 'Orchestration Director',                          type: 'system',      file: null },
+  { name: 'Majlis',               arabic: 'مجلس',         role: 'Consulting Council',                               type: 'system',      file: null },
+  { name: 'Diwan',                arabic: 'ديوان',        role: 'Dashboard Registry',                               type: 'system',      file: null },
 ];

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

@@ -11,5 +11,8 @@ import { App } from './components/App.js';
 
 const root = document.getElementById('app-root');
 if (root) {
+  // Drop the SSR loading shell — Preact diffs against existing children,
+  // so the spinner must be gone before the first render.
+  root.textContent = '';
   render(html`<${App}/>`, root);
 }

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

@@ -0,0 +1,127 @@
+/**
+ * AgentCard — card, avatar, chips, and detail drawer for the Agents view.
+ *
+ * Extracted from AgentsView so the view module stays focused on grouping,
+ * search, and fetch state. Per-role accent colors are driven by a single
+ * `agent-accent--<type>` class on the card/drawer root: it sets the
+ * --agent-accent custom property that the avatar, role badge, and hover
+ * border all read (see the AGENTS VIEW block at the end of css.js).
+ */
+
+import { html } from '../preact.js';
+import { setState } from '../store.js';
+import { pressable, showToast } from './shared.js';
+import { renderMd } from '../util.js';
+
+const MAX_CARD_TOOL_CHIPS = 4;
+
+/** "Sadiq Damani" -> "SD", "Hussain" -> "H". */
+function initialsOf(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase();
+}
+
+/** Per-role accent class — types map 1:1 to the CSS accent variants. */
+export function accentClass(agent) {
+  return 'agent-accent--' + (agent.type || 'system');
+}
+
+// ---- Avatar circle with initials ----
+function Avatar({ agent, large }) {
+  return html`<span class=${'agent-avatar' + (large ? ' agent-avatar--lg' : '')} aria-hidden="true">${initialsOf(agent.name)}</span>`;
+}
+
+// ---- Metadata chips (model + tools), shared by card and drawer ----
+export function MetaChips({ meta, maxTools }) {
+  if (!meta) return null;
+  const tools = meta.tools || [];
+  const shown = maxTools ? tools.slice(0, maxTools) : tools;
+  const extra = tools.length - shown.length;
+  if (!meta.model && !shown.length) return null;
+  return html`
+    <div class="agent-chips">
+      ${meta.model ? html`<span class="agent-chip agent-chip--model">${meta.model}</span>` : null}
+      ${shown.map(t => html`<span class="agent-chip" key=${t}>${t}</span>`)}
+      ${extra > 0 ? html`<span class="agent-chip agent-chip--more">+${extra}</span>` : null}
+    </div>
+  `;
+}
+
+// ---- Single agent card ----
+export function AgentCard({ agent, meta, onOpen }) {
+  return html`
+    <div class=${'agent-card ' + accentClass(agent)} ...${pressable(() => onOpen(agent))}>
+      <div class="agent-card-top">
+        <${Avatar} agent=${agent} />
+        <div class="agent-card-id">
+          <div class="agent-card-name">
+            ${agent.name}
+            ${agent.real ? html`<span class="real-badge">real</span>` : null}
+          </div>
+          <span class="role-badge">${agent.role}</span>
+        </div>
+        <span class="agent-card-arabic">${agent.arabic}</span>
+      </div>
+      ${meta && meta.description ? html`<p class="agent-card-desc">${meta.description}</p>` : null}
+      <${MetaChips} meta=${meta} maxTools=${MAX_CARD_TOOL_CHIPS} />
+    </div>
+  `;
+}
+
+// ---- Detail drawer ----
+export function AgentDrawer({ agent, meta, prompt, onClose }) {
+  const filePath = agent.file ? 'rcode/agents/' + agent.file : null;
+
+  function copyPath() {
+    navigator.clipboard.writeText(filePath).then(() => {
+      showToast('Path copied!');
+    }).catch(() => {});
+  }
+
+  function openInFiles() {
+    setState({ requestedFile: filePath });
+    window.location.hash = 'files';
+  }
+
+  let body;
+  if (!agent.file) {
+    body = html`<div class="agent-drawer-empty">No prompt file on disk — this is a system entry without an agent definition.</div>`;
+  } else if (prompt.loading) {
+    body = html`
+      <div class="skeleton"></div>
+      <div class="agent-drawer-skeleton skeleton"></div>
+    `;
+  } else if (prompt.error) {
+    body = html`<div class="agent-drawer-error">${prompt.error}</div>`;
+  } else if (prompt.text) {
+    body = html`<div class="md-render" dangerouslySetInnerHTML=${{ __html: renderMd(prompt.text) }} />`;
+  } else {
+    body = null;
+  }
+
+  return html`
+    <div class="agent-drawer-backdrop" onClick=${onClose}></div>
+    <aside class=${'agent-drawer ' + accentClass(agent)} role="dialog" aria-modal="true" aria-label="${agent.name} — full prompt">
+      <div class="agent-drawer-head">
+        <${Avatar} agent=${agent} large />
+        <div class="agent-drawer-titles">
+          <div class="agent-drawer-name">
+            ${agent.name}
+            <span class="agent-drawer-arabic">${agent.arabic}</span>
+            ${agent.real ? html`<span class="real-badge">real</span>` : null}
+          </div>
+          <span class="role-badge">${agent.role}</span>
+          <${MetaChips} meta=${meta} />
+        </div>
+        <button class="agent-drawer-close" onClick=${onClose} aria-label="Close">×</button>
+      </div>
+      ${filePath ? html`
+        <div class="agent-drawer-meta">
+          <span class="agent-drawer-meta-path">${filePath}</span>
+          <button class="agent-drawer-btn" onClick=${copyPath}>Copy path</button>
+          <button class="agent-drawer-btn agent-drawer-btn--link" onClick=${openInFiles}>View in Files →</button>
+        </div>
+      ` : null}
+      <div class="agent-drawer-body">${body}</div>
+    </aside>
+  `;
+}