@hanzlaa/rcode 4.1.2 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzlaa/rcode",
-  "version": "4.1.2",
+  "version": "4.3.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": {

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,7 +155,7 @@ 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`);
@@ -144,7 +164,6 @@ server.listen(PORT, '127.0.0.1', () => {
   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(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`);
 });

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>
+  `;
+}

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

@@ -13,12 +13,16 @@
  */
 
 import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
+import { parseFilters } from '../filter-state.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';
 import { XtermPanel } from './XtermPanel.js';
 import { OrchPanel } from './OrchPanel.js';
+import { RunnerPicker } from './RunnerPicker.js';
+import { CommandPalette } from './CommandPalette.js';
+import { BlockedToasts } from './NotifyCenter.js';
 import { OverviewView } from '../views/OverviewView.js';
 import { DecisionsView } from '../views/DecisionsView.js';
 import { RoadmapView } from '../views/RoadmapView.js';
@@ -54,41 +58,59 @@ 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. */
+/** Parse location.hash into { view, subId, filters } — 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);
+  // Strip ?query suffix before routing so it never leaks into view/subId.
+  const qIdx  = raw.indexOf('?');
+  const path  = qIdx === -1 ? raw : raw.slice(0, qIdx);
+  const slash = path.indexOf('/');
+  const view  = slash === -1 ? path : path.slice(0, slash);
+  // subId must not include the ?query portion.
+  const subId = slash === -1 ? null : path.slice(slash + 1);
   // #263: unknown hash falls back to overview
   const resolvedView = ALL_VIEWS.includes(view) ? view : 'overview';
-  return { view: resolvedView, subId };
+  const filters = parseFilters(location.hash);
+  return { view: resolvedView, subId, filters };
 }
 
 /** 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>`;
+  return html`<div class="offline-banner" role="alert">⚠ Dashboard offline — retrying every 30s…</div>`;
+}
+
+/** Dismissible banner shown when .rcode/state.json failed to parse. */
+function ParseErrorBanner({ error, dismissed }) {
+  if (!error || dismissed) return null;
+  return html`
+    <div class="parse-error-banner" role="alert">
+      <span>⚠ .rcode/state.json is corrupted — data shown may be stale or empty (${error})</span>
+      <button class="banner-dismiss" aria-label="Dismiss"
+        onClick=${() => setState({ parseErrorDismissed: true })}>✕</button>
+    </div>
+  `;
+}
+
+/** Close the mobile slide-in sidebar (no-op on desktop where it is static). */
+function closeMobileSidebar() {
+  const sidebar  = document.querySelector('.sidebar');
+  const backdrop = document.getElementById('sidebar-backdrop');
+  if (sidebar) sidebar.classList.remove('open');
+  if (backdrop) backdrop.classList.remove('show');
 }
 
 /** 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';
+  const dotCls = 'statusbar-dot'
+    + (offline ? ' statusbar-dot--offline' : '')
+    + (refreshing ? ' statusbar-dot--busy' : '');
   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>
+    <footer class="statusbar">
+      <span class=${dotCls}></span>
+      <span class="statusbar-path" title=${path}>${path}</span>
+      <span class="statusbar-version">rcode v${version || '?'}</span>
       <span>${offline ? 'offline' : refreshing ? 'syncing…' : 'updated ' + updatedAgo}</span>
     </footer>
   `;
@@ -97,10 +119,13 @@ function StatusBar({ projectRoot, projectName, version, updatedAgo, offline, ref
 /** Root App component. No props needed — reads everything from the store. */
 export function App() {
   // ---- Router state ----
-  const [{ view, subId }, setRoute] = useState(parseHash);
+  const [{ view, subId, filters }, setRoute] = useState(parseHash);
 
   useEffect(() => {
-    function onHashChange() { setRoute(parseHash()); }
+    function onHashChange() {
+      setRoute(parseHash());
+      closeMobileSidebar(); // navigating from the mobile nav should reveal the view
+    }
     window.addEventListener('hashchange', onHashChange);
     return () => window.removeEventListener('hashchange', onHashChange);
   }, []);
@@ -129,13 +154,13 @@ export function App() {
   }, [theme]);
 
   // ---- Sidebar collapse ----
+  // Class names match the mobile CSS contract: .sidebar.open + #sidebar-backdrop.show
   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);
+    const open = sidebar.classList.toggle('open');
+    if (backdrop) backdrop.classList.toggle('show', open);
   }, []);
 
   // ---- Updated-ago display ----
@@ -159,18 +184,43 @@ export function App() {
       const r = await fetch('/api/state');
       if (!r.ok) { setState({ refreshing: false, offline: true }); return; }
       const newState = await r.json();
+      // The server's scan cache keeps lastScanned stable while nothing on
+      // disk changed — same stamp means identical data, so skip the patch
+      // entirely instead of committing fresh object identities that would
+      // re-render every subscribed component.
+      if (lastScannedRef.current && lastScannedRef.current === newState.lastScanned) {
+        scanTimeRef.current = Date.now();
+        setUpdatedAgo('just now');
+        setState({ refreshing: false, offline: false });
+        return;
+      }
       lastScannedRef.current = newState.lastScanned;
       scanTimeRef.current = Date.now();
       setUpdatedAgo('just now');
-      const patch = { refreshing: false, offline: false, lastRefresh: Date.now() };
+      const patch = {
+        refreshing: false, offline: false, lastRefresh: Date.now(),
+        // Surface state.json corruption (§1.4) — also clears the banner once fixed.
+        rawParseError: newState.rawParseError || null,
+      };
+      // Redesign contract slices (DATA-CONTRACT.md) — derived server-side and
+      // returned under newState.dashboard. Keep them fresh on every poll.
+      const d = newState.dashboard || {};
+      Object.assign(patch, {
+        initialized: newState.exists !== false,
+        project:   d.project   || null,
+        progress:  d.progress  || null,
+        timeline:  d.timeline  || null,
+        tasks:     d.tasks     || null,
+        health:    d.health    || null,
+      });
       if (newState.raw) {
         Object.assign(patch, {
-          phases:           newState.phaseTree            || newState.raw.phases || [],
+          phases:           d.phases       || newState.phaseTree || newState.raw.phases || [],
           milestone:        newState.raw.milestone        || '',
-          currentPhase:     newState.raw.current_phase    || null,
+          currentPhase:     d.currentPhase || newState.raw.current_phase || null,
           currentSprint:    newState.raw.current_sprint   || null,
-          decisions:        newState.raw.decisions        || [],
-          blockers:         newState.raw.blockers         || [],
+          decisions:        d.decisions    || newState.raw.decisions || [],
+          blockers:         d.blockers     || newState.raw.blockers  || [],
           council_sessions: newState.raw.council_sessions || [],
           last_session:     newState.raw.last_session     || null,
         });
@@ -200,6 +250,20 @@ export function App() {
     startSessionsPoll();
   }, []);
 
+  // ---- Command palette ----
+  const [paletteOpen, setPaletteOpen] = useState(false);
+
+  useEffect(() => {
+    function onKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+        e.preventDefault();
+        setPaletteOpen(o => !o);
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
   // ---- View rendering ----
   const PreactView = PREACT_VIEWS[view] || null;
 
@@ -207,15 +271,9 @@ export function App() {
     <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 id="sidebar-backdrop" onClick=${closeMobileSidebar}></div>
 
-      <div class="content-area" id="main-content" style="grid-template-rows:44px 1fr auto;">
+      <div class="content-area" id="main-content">
         <${Topbar}
           projectName=${storeState.projectName || ''}
           updatedAgo=${updatedAgo}
@@ -228,7 +286,11 @@ export function App() {
 
         <div class="main-scroll" id="main-scroll">
           <${OfflineBanner} offline=${storeState.offline} />
-          ${PreactView ? html`<${PreactView} subId=${subId} />` : null}
+          <${ParseErrorBanner}
+            error=${storeState.rawParseError}
+            dismissed=${storeState.parseErrorDismissed}
+          />
+          ${PreactView ? html`<${PreactView} subId=${subId} filters=${filters} />` : null}
         </div>
 
         <${StatusBar}
@@ -243,6 +305,9 @@ export function App() {
 
       <${XtermPanel} />
       <${OrchPanel} />
+      <${BlockedToasts} />
+      <${RunnerPicker} />
+      <${CommandPalette} open=${paletteOpen} onClose=${() => setPaletteOpen(false)} />
     </div>
   `;
 }