@hanzlaa/rcode 4.1.1 → 4.3.0

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

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

@@ -0,0 +1,133 @@
+/**
+ * CommandPalette — Cmd+K / Ctrl+K searchable command overlay.
+ *
+ * Reads the allowlisted commands directly from ALLOWED_COMMANDS (orchestrator.js)
+ * and executes selections through runCommandFromUI — no second command list.
+ *
+ * Props:
+ *   open    {boolean} — whether the palette is visible
+ *   onClose {function} — called when the palette should close (Escape, backdrop click)
+ *
+ * Added in sprint 36.1 — DSH-4 command palette.
+ */
+
+import { html, useState, useEffect, useRef, useMemo } from '../preact.js';
+import { ALLOWED_COMMANDS, runCommandFromUI } from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+/**
+ * Build an ordered group list and a flat navigation list from a filtered
+ * commands array. Group order matches first-seen category order.
+ *
+ * @param {Array<{cmd,label,category}>} items
+ * @returns {{ groups: Array<{category, items}>, flat: Array<{cmd,label,category}> }}
+ */
+function groupCommands(items) {
+  const seen = [];
+  const map = {};
+  for (const item of items) {
+    if (!map[item.category]) {
+      map[item.category] = [];
+      seen.push(item.category);
+    }
+    map[item.category].push(item);
+  }
+  const groups = seen.map(cat => ({ category: cat, items: map[cat] }));
+  const flat = groups.flatMap(g => g.items);
+  return { groups, flat };
+}
+
+export function CommandPalette({ open, onClose }) {
+  const [query, setQuery] = useState('');
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef(null);
+
+  // Focus and reset when opened.
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIdx(0);
+      // Defer by one tick so the element is in the DOM and visible.
+      requestAnimationFrame(() => {
+        if (inputRef.current) inputRef.current.focus();
+      });
+    }
+  }, [open]);
+
+  // Filter commands by query substring (label or cmd).
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return ALLOWED_COMMANDS;
+    return ALLOWED_COMMANDS.filter(
+      ({ cmd, label }) =>
+        cmd.toLowerCase().includes(q) || label.toLowerCase().includes(q)
+    );
+  }, [query]);
+
+  const { groups, flat } = useMemo(() => groupCommands(results), [results]);
+
+  function choose(cmd) {
+    runCommandFromUI(cmd);
+    onClose();
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx(i => Math.min(i + 1, flat.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      if (flat[activeIdx]) choose(flat[activeIdx].cmd);
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  }
+
+  if (!open) return null;
+
+  // Running flat index counter across groups so activeIdx maps correctly.
+  let flatIdx = 0;
+
+  return html`
+    <div class="cmd-palette-overlay" onClick=${onClose}>
+      <div class="cmd-palette" onClick=${e => e.stopPropagation()} onKeyDown=${handleKeyDown}>
+
+        <div class="cmd-palette-search">
+          <${Icon} name="search" size=${16} cls="cmd-palette-search-icon" />
+          <input
+            class="cmd-palette-input"
+            ref=${inputRef}
+            value=${query}
+            onInput=${e => { setQuery(e.target.value); setActiveIdx(0); }}
+            placeholder="Search commands…"
+          />
+        </div>
+
+        <div class="cmd-palette-list">
+          ${flat.length === 0
+            ? html`<div class="cmd-palette-empty">No commands match</div>`
+            : groups.map(({ category, items }) => html`
+              <div class="cmd-palette-group" key=${category}>${category}</div>
+              ${items.map(item => {
+                const idx = flatIdx++;
+                return html`
+                  <button
+                    class=${'cmd-palette-item' + (idx === activeIdx ? ' active' : '')}
+                    key=${item.cmd}
+                    onClick=${() => choose(item.cmd)}
+                  >
+                    <span>${item.label}</span>
+                    <span class="cmd-palette-cmd">${item.cmd}</span>
+                  </button>
+                `;
+              })}
+            `)
+          }
+        </div>
+
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,116 @@
+/**
+ * FileReader — shared markdown reader used by FilesView and MemoryView.
+ *
+ * Renders as a right-side slide-over (backdrop + panel) so it works on top
+ * of any list layout. Fetches /api/file?path=... itself whenever `path`
+ * changes, so callers only manage which file is open. Markdown renders via
+ * the global `marked` CDN lib with the same sanitizer the legacy Files view
+ * used; falls back to escaped <pre> when marked is unavailable.
+ *
+ * Props:
+ *   path    — project-relative file path to fetch (required; null hides)
+ *   title   — display name shown in the header (falls back to basename)
+ *   onClose — called when the user dismisses the reader (backdrop, ×, Esc)
+ */
+
+import { html, useState, useEffect, useCallback } from '../preact.js';
+import { showToast } from './shared.js';
+
+// ---- Markdown helpers (moved from FilesView so both views share one copy) ----
+function stripFrontmatter(md) {
+  if (!md.startsWith('---')) return md;
+  const end = md.indexOf('\n---', 3);
+  return end === -1 ? md : md.slice(end + 4).trimStart();
+}
+
+// Minimal HTML sanitizer for rendered markdown. No DOMPurify dependency on the
+// client, so we strip the dangerous primitives via regex after marked emits
+// HTML: script/iframe/object/embed tags, inline event handlers, and
+// javascript:/data: URLs in href/src. Markdown content comes from the project
+// dir (semi-trusted) but may include attacker-controlled text checked into a
+// repo, so we cannot trust raw HTML passthrough.
+function sanitizeHtml(raw) {
+  return String(raw)
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*\/?>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/(href|src|xlink:href)\s*=\s*(["'])\s*(?:javascript|data|vbscript):[^"']*\2/gi, '$1=$2#blocked$2');
+}
+
+export function renderMd(md) {
+  const clean = stripFrontmatter(md);
+  if (typeof marked === 'undefined') {
+    return '<pre>' + clean.replace(/</g, '&lt;') + '</pre>';
+  }
+  return sanitizeHtml(marked.parse(clean));
+}
+
+export function FileReader({ path, title, onClose }) {
+  const [content, setContent] = useState({ html: null, loading: true, error: null });
+
+  useEffect(() => {
+    if (!path) return;
+    let cancelled = false;
+    setContent({ html: null, loading: true, error: null });
+    fetch('/api/file?path=' + encodeURIComponent(path))
+      .then(async resp => {
+        if (cancelled) return;
+        if (!resp.ok) {
+          const msg = resp.status === 404
+            ? 'File not found: ' + path
+            : 'Failed to load file (HTTP ' + resp.status + ').';
+          setContent({ html: null, loading: false, error: msg });
+          return;
+        }
+        const text = await resp.text();
+        if (!cancelled) setContent({ html: renderMd(text), loading: false, error: null });
+      })
+      .catch(() => {
+        if (!cancelled) setContent({ html: null, loading: false, error: 'Network error.' });
+      });
+    return () => { cancelled = true; };
+  }, [path]);
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape' && onClose) onClose();
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const copyPath = useCallback(() => {
+    navigator.clipboard.writeText(path).then(() => {
+      showToast('Path copied!');
+    }).catch(() => {});
+  }, [path]);
+
+  if (!path) return null;
+  const name = title || path.split('/').pop();
+
+  return html`
+    <div class="reader-backdrop" onClick=${onClose}></div>
+    <div class="reader-panel" role="dialog" aria-label=${name}>
+      <div class="reader-header">
+        <div class="reader-heading">
+          <div class="reader-title">${name}</div>
+          <div class="reader-path">${path}</div>
+        </div>
+        <div class="reader-actions">
+          <button class="reader-copy" onClick=${copyPath}>Copy path</button>
+          <button class="reader-close" aria-label="Close reader" onClick=${onClose}>×</button>
+        </div>
+      </div>
+      <div class="reader-body">
+        ${content.loading && html`
+          <div class="skeleton reader-skel-line"></div>
+          <div class="skeleton reader-skel-block"></div>
+        `}
+        ${content.error && html`<div class="reader-error">${content.error}</div>`}
+        ${!content.loading && !content.error && content.html != null && html`
+          <div class="md-render" dangerouslySetInnerHTML=${{ __html: content.html }} />
+        `}
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,94 @@
+/**
+ * FilterChips — interactive filter chip component.
+ *
+ * Renders three groups of toggle chips (status / milestone / date).
+ * Clicking a chip writes the updated filter set into location.hash via
+ * applyFilters() from filter-state.js. The App.js hashchange listener then
+ * re-renders the active view with the new filters prop.
+ *
+ * Props:
+ *   filters        — route filter object { status, milestone, date }
+ *   statusOptions  — Array<{ value, label }>
+ *   milestoneOptions — Array<{ value, label }>
+ *   dateOptions    — Array<{ value, label }>
+ */
+
+import { html } from '../preact.js';
+import { applyFilters } from '../filter-state.js';
+
+/** @returns {string} — current view path segment from location.hash */
+function viewPath() {
+  return location.hash.slice(1).split('?')[0] || 'overview';
+}
+
+/**
+ * A single group of chips for one filter dimension.
+ *
+ * @param {{ label: string, dimension: string, options: Array<{value,label}>, active: string, filters: object }} props
+ */
+function ChipGroup({ dimension, options, active, filters }) {
+  if (!options || options.length === 0) return null;
+
+  function handleClick(value) {
+    const next = Object.assign({}, filters, {
+      [dimension]: active === value ? '' : value,
+    });
+    location.hash = applyFilters(viewPath(), next);
+  }
+
+  return html`
+    <div class="filter-chip-group">
+      ${options.map(opt => {
+        const isActive = opt.value === active;
+        return html`
+          <button
+            key=${opt.value}
+            class=${'filter-chip' + (isActive ? ' active' : '')}
+            onClick=${() => handleClick(opt.value)}
+          >${opt.label}</button>
+        `;
+      })}
+    </div>
+  `;
+}
+
+/**
+ * FilterChips — interactive filter chip row with a clear button.
+ */
+export function FilterChips({ filters, statusOptions, milestoneOptions, dateOptions }) {
+  const f = filters || { status: '', milestone: '', date: '' };
+
+  const hasActive = f.status !== '' || f.milestone !== '' || f.date !== '';
+
+  function handleClear() {
+    location.hash = applyFilters(viewPath(), { status: '', milestone: '', date: '' });
+  }
+
+  return html`
+    <div class="filter-chips">
+      <${ChipGroup}
+        dimension="status"
+        options=${statusOptions}
+        active=${f.status}
+        filters=${f}
+      />
+      <${ChipGroup}
+        dimension="milestone"
+        options=${milestoneOptions}
+        active=${f.milestone}
+        filters=${f}
+      />
+      <${ChipGroup}
+        dimension="date"
+        options=${dateOptions}
+        active=${f.date}
+        filters=${f}
+      />
+      <button
+        class="filter-chip-clear"
+        disabled=${!hasActive}
+        onClick=${hasActive ? handleClear : undefined}
+      >Clear</button>
+    </div>
+  `;
+}