@hanzlaa/rcode 3.5.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzlaa/rcode",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "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": {
@@ -74,5 +74,11 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "ws": "^8.20.1"
+  },
+  "optionalDependencies": {
+    "@lydell/node-pty": "1.2.0-beta.12"
   }
 }

package/server/dashboard.js

@@ -22,9 +22,14 @@
 
 const http    = require('http');
 const path    = require('path');
+const fs      = require('fs');
+const os      = require('os');
 const crypto  = require('crypto');
 const { spawn } = require('child_process');
 
+// Client JS modules live here and are served verbatim at /js/<name>.js
+const CLIENT_DIR = path.join(__dirname, 'lib', 'html', 'client');
+
 const { scanState } = require('./lib/scanner');
 const { handleApiState, handleApiFiles, handleApiFile, handleApiHierarchy, handleApiMemory } = require('./lib/api');
 const { renderHtml } = require('./lib/html/shell');
@@ -34,8 +39,25 @@ const PORT = parseInt(process.env.PORT || '7717', 10);
 const RIHAL_DIR = process.env.RIHAL_DIR || path.join(process.cwd(), '.rihal');
 const PROJECT_ROOT = path.dirname(RIHAL_DIR);
 
-// Shared orchestrator token — generated once, passed to orchestrator via env and embedded in HTML
-const ORCH_TOKEN = process.env.ORCH_TOKEN || crypto.randomBytes(24).toString('hex');
+// Shared orchestrator token — passed to the orchestrator via env and embedded
+// in the HTML. Persisted to ~/.rihal/orch-token so it stays STABLE across
+// dashboard restarts; otherwise every restart invalidates the token baked
+// into already-open browser tabs and their API calls 401.
+function loadOrchToken() {
+  if (process.env.ORCH_TOKEN) return process.env.ORCH_TOKEN;
+  const tokenFile = path.join(os.homedir(), '.rihal', 'orch-token');
+  try {
+    const existing = fs.readFileSync(tokenFile, 'utf8').trim();
+    if (existing) return existing;
+  } catch { /* not yet created */ }
+  const token = crypto.randomBytes(24).toString('hex');
+  try {
+    fs.mkdirSync(path.dirname(tokenFile), { recursive: true });
+    fs.writeFileSync(tokenFile, token, { mode: 0o600 });
+  } catch { /* non-fatal — fall back to an in-memory token */ }
+  return token;
+}
+const ORCH_TOKEN = loadOrchToken();
 
 // ---------- HTTP Server ----------
 const server = http.createServer((req, res) => {
@@ -72,6 +94,37 @@ const server = http.createServer((req, res) => {
     return;
   }
 
+  // Lets the client fetch the current orchestrator token at runtime, so a
+  // long-open tab can self-heal instead of 401'ing if the token ever drifts.
+  if (url === '/api/orch-token') {
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ token: ORCH_TOKEN }));
+    return;
+  }
+
+  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; }
+    // 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);
+    if (!resolved.startsWith(CLIENT_DIR + path.sep) && resolved !== CLIENT_DIR) {
+      res.writeHead(403); res.end('Forbidden'); return;
+    }
+    fs.readFile(resolved, (err, data) => {
+      if (err) { res.writeHead(404); res.end('Not found'); return; }
+      res.writeHead(200, {
+        'Content-Type':  'application/javascript; charset=utf-8',
+        'Cache-Control': 'no-cache',
+      });
+      res.end(data);
+    });
+    return;
+  }
+
   if (url === '/' || url === '/index.html') {
     const state = scanState(RIHAL_DIR);
     const html = renderHtml(state, ORCH_TOKEN);
@@ -96,6 +149,54 @@ server.listen(PORT, '127.0.0.1', () => {
   console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`);
 });
 
+// ── Ensure interactive-terminal native module is present ─────────
+// @lydell/node-pty is an optionalDependency, so it can be absent if the
+// package was installed with --omit=optional or a partial CI install.
+// It ships prebuilt binaries (no node-gyp), so fetching it is a fast,
+// no-compile, one-time step. Runs async — the dashboard never blocks; the
+// orchestrator is spawned via the callback once the install settles.
+// Failure is non-fatal: the terminal just degrades with a clear message.
+function ensurePty(done) {
+  try { require.resolve('@lydell/node-pty'); done(); return; } catch {}
+
+  const pkgRoot = path.join(__dirname, '..');
+
+  // @lydell/node-pty is already declared in optionalDependencies, so a plain
+  // lockfile-respecting `install` pulls it in without mutating package.json.
+  // Use pnpm when the repo is pnpm-managed — `npm install` fights pnpm's
+  // symlinked node_modules and stalls. End-user installs use npm.
+  const usePnpm = fs.existsSync(path.join(pkgRoot, 'pnpm-lock.yaml'));
+  const cmd  = usePnpm ? 'pnpm' : 'npm';
+  const args = usePnpm
+    ? ['install', '--ignore-scripts']
+    : ['install', '--ignore-scripts', '--no-audit', '--no-fund'];
+
+  console.log('[setup] Installing interactive-terminal support (@lydell/node-pty)…');
+  let settled = false;
+  const finish = (ok) => {
+    if (settled) return;
+    settled = true;
+    console.log(ok ? '[setup] Interactive terminal ready.'
+                    : '[setup] node-pty install incomplete — terminal stays unavailable.');
+    done();
+  };
+
+  let child;
+  try {
+    child = spawn(cmd, args, {
+      cwd: pkgRoot, stdio: 'inherit', shell: process.platform === 'win32',
+    });
+  } catch (err) {
+    console.log('[setup] node-pty install could not start:', err.message);
+    finish(false);
+    return;
+  }
+  const timer = setTimeout(() => { try { child.kill(); } catch {} }, 180000);
+  child.on('exit',  code => { clearTimeout(timer); finish(code === 0); });
+  child.on('error', err  => { clearTimeout(timer);
+    console.log('[setup] node-pty install error:', err.message); finish(false); });
+}
+
 // ── Auto-spawn orchestrator (port 7718) ──────────────────────────
 const ORCH_BIN = path.join(__dirname, 'orchestrator.js');
 let _orchProc = null;
@@ -132,7 +233,8 @@ function spawnOrchestrator() {
   }
 }
 
-spawnOrchestrator();
+// Orchestrator spawns only once node-pty is settled (present or installed).
+ensurePty(spawnOrchestrator);
 
 // Graceful shutdown
 function shutdown() {

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

@@ -0,0 +1,27 @@
+/**
+ * agents-data.js — the 18-agent roster, moved client-side from shell.js.
+ *
+ * Previously lived in shell.js:17-36 as a server-rendered array.
+ * Now exported as a pure ESM constant so AgentsView can render it.
+ */
+
+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' },
+];

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

@@ -0,0 +1,15 @@
+/**
+ * ESM entry point — mounts the Preact App into #app-root.
+ *
+ * Loaded via <script type="module" src="/js/app.js"> from client.js,
+ * AFTER the legacy <script src> modules (which fill the 10 un-migrated
+ * view host divs). Legacy modules remain active during coexistence phase.
+ */
+
+import { render, html } from './preact.js';
+import { App } from './components/App.js';
+
+const root = document.getElementById('app-root');
+if (root) {
+  render(html`<${App}/>`, root);
+}

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

@@ -0,0 +1,211 @@
+/**
+ * App — root Preact component.
+ *
+ * Owns:
+ *   - Hash router (view + subId state, hashchange listener)
+ *   - Layout: Sidebar + content area + Topbar + all 12 Preact view components
+ *   - 30s auto-refresh: polls /api/state, diffs lastScanned, calls setState
+ *   - Theme toggle: reads/persists localStorage('majlis-theme')
+ *
+ * Sprint 31.4 completed the Preact migration. All 12 views are Preact
+ * components. Legacy client-main.js, client-render.js, and client-kanban.js
+ * are deleted. No coexistence seam remains.
+ */
+
+import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
+import { getState, setState, subscribe } from '../store.js';
+import { startSessionsPoll, refreshOrchToken } from '../orchestrator.js';
+import { Sidebar } from './Sidebar.js';
+import { Topbar } from './Topbar.js';
+import { XtermPanel } from './XtermPanel.js';
+import { OrchPanel } from './OrchPanel.js';
+import { OverviewView } from '../views/OverviewView.js';
+import { DecisionsView } from '../views/DecisionsView.js';
+import { RoadmapView } from '../views/RoadmapView.js';
+import { MilestonesView } from '../views/MilestonesView.js';
+import { PhasesView } from '../views/PhasesView.js';
+import { SprintsView } from '../views/SprintsView.js';
+import { TasksView } from '../views/TasksView.js';
+import { KanbanView } from '../views/KanbanView.js';
+import { FilesView } from '../views/FilesView.js';
+import { AgentsView } from '../views/AgentsView.js';
+import { MemoryView } from '../views/MemoryView.js';
+import { OrchestrationView } from '../views/OrchestrationView.js';
+
+// Views served by Preact components (migrated)
+// Sprint 31.4: +orchestration → all 12 views Preact. Migration complete.
+const PREACT_VIEWS = {
+  overview:      OverviewView,
+  decisions:     DecisionsView,
+  roadmap:       RoadmapView,
+  milestones:    MilestonesView,
+  phases:        PhasesView,
+  sprints:       SprintsView,
+  tasks:         TasksView,
+  kanban:        KanbanView,
+  files:         FilesView,
+  agents:        AgentsView,
+  memory:        MemoryView,
+  orchestration: OrchestrationView,
+};
+
+// All views are now Preact — no legacy placeholder hosts needed.
+const LEGACY_VIEWS = [];
+
+const ALL_VIEWS = Object.keys(PREACT_VIEWS).concat(LEGACY_VIEWS);
+
+/** Parse location.hash into { view, subId } — port of client-main.js:45-49. */
+function parseHash() {
+  const raw = location.hash.slice(1) || 'overview';
+  const slash = raw.indexOf('/');
+  const view  = slash === -1 ? raw : raw.slice(0, slash);
+  const subId = slash === -1 ? null : raw.slice(slash + 1);
+  // #263: unknown hash falls back to overview
+  const resolvedView = ALL_VIEWS.includes(view) ? view : 'overview';
+  return { view: resolvedView, subId };
+}
+
+/** Root App component. No props needed — reads everything from the store. */
+export function App() {
+  // ---- Router state ----
+  const [{ view, subId }, setRoute] = useState(parseHash);
+
+  useEffect(() => {
+    function onHashChange() { setRoute(parseHash()); }
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
+  // ---- Store state (for projectName and pass-through to views) ----
+  const [storeState, setStoreState] = useState(getState);
+  useEffect(() => {
+    const unsub = subscribe(newState => setStoreState({ ...newState }));
+    return unsub;
+  }, []);
+
+  // ---- Theme ----
+  const [theme, setTheme] = useState(() => {
+    const saved = localStorage.getItem('majlis-theme') || 'dark';
+    if (saved === 'light') {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+    return saved;
+  });
+
+  const toggleTheme = useCallback(() => {
+    const next = theme === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next === 'dark' ? '' : next);
+    localStorage.setItem('majlis-theme', next);
+    setTheme(next);
+  }, [theme]);
+
+  // ---- Sidebar collapse ----
+  const toggleSidebar = useCallback(() => {
+    const sidebar  = document.querySelector('.sidebar');
+    const backdrop = document.getElementById('sidebar-backdrop');
+    if (!sidebar) return;
+    const open = sidebar.classList.toggle('sidebar-open');
+    if (backdrop) backdrop.classList.toggle('active', open);
+    document.body.classList.toggle('sidebar-visible', open);
+  }, []);
+
+  // ---- Updated-ago display ----
+  const [updatedAgo, setUpdatedAgo] = useState('just now');
+  const scanTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      const s = Math.floor((Date.now() - scanTimeRef.current) / 1000);
+      setUpdatedAgo(s < 5 ? 'just now' : s < 60 ? s + 's ago' : Math.floor(s / 60) + 'm ago');
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  // ---- Manual refresh ----
+  const lastScannedRef = useRef(null);
+
+  const fetchAndRerender = useCallback(async () => {
+    const btn = document.getElementById('refresh-btn');
+    if (btn) btn.textContent = '↺ …';
+    try {
+      const r = await fetch('/api/state');
+      if (!r.ok) return;
+      const newState = await r.json();
+      lastScannedRef.current = newState.lastScanned;
+      scanTimeRef.current = Date.now();
+      setUpdatedAgo('just now');
+      if (newState.raw) {
+        setState({
+          phases:           newState.phaseTree            || newState.raw.phases || [],
+          milestone:        newState.raw.milestone        || '',
+          currentPhase:     newState.raw.current_phase    || null,
+          currentSprint:    newState.raw.current_sprint   || null,
+          decisions:        newState.raw.decisions        || [],
+          blockers:         newState.raw.blockers         || [],
+          council_sessions: newState.raw.council_sessions || [],
+          last_session:     newState.raw.last_session     || null,
+        });
+      }
+    } catch { /* network errors ignored */ }
+    if (btn) btn.textContent = '↺ Refresh';
+  }, []);
+
+  // ---- 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.lastScanned !== lastScannedRef.current) await fetchAndRerender();
+      } catch { /* ignore */ }
+    }, 30000);
+    return () => clearInterval(id);
+  }, [fetchAndRerender]);
+
+  // Expose manualRefresh globally for any legacy onclick="manualRefresh()" callers
+  useEffect(() => {
+    window._preactRefresh = fetchAndRerender;
+  }, [fetchAndRerender]);
+
+  // Start the global session poll and refresh the orchestrator token on boot.
+  useEffect(() => {
+    refreshOrchToken();
+    startSessionsPoll();
+  }, []);
+
+  // ---- View rendering ----
+  const PreactView = PREACT_VIEWS[view] || null;
+
+  return html`
+    <div class="app-shell">
+      <${Sidebar} activeView=${view} projectName=${storeState.projectName || ''} />
+
+      <div id="sidebar-backdrop" onClick=${() => {
+        const sidebar  = document.querySelector('.sidebar');
+        const backdrop = document.getElementById('sidebar-backdrop');
+        if (sidebar) sidebar.classList.remove('sidebar-open');
+        if (backdrop) backdrop.classList.remove('active');
+        document.body.classList.remove('sidebar-visible');
+      }}></div>
+
+      <div class="content-area" id="main-content">
+        <${Topbar}
+          projectName=${storeState.projectName || ''}
+          updatedAgo=${updatedAgo}
+          onRefresh=${fetchAndRerender}
+          onToggleTheme=${toggleTheme}
+          onToggleSidebar=${toggleSidebar}
+          themeLabel=${theme}
+        />
+
+        <div class="main-scroll" id="main-scroll">
+          ${PreactView ? html`<${PreactView} subId=${subId} />` : null}
+        </div>
+      </div>
+
+      <${XtermPanel} />
+      <${OrchPanel} />
+    </div>
+  `;
+}