@hanzlaa/rcode 4.1.2 → 4.3.0

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

@@ -2,46 +2,17 @@
  * FilesView — Preact port of the Files view from client-main.js.
  *
  * On mount: fetches /api/files to build the grouped file tree.
- * Clicking a file: fetches /api/file?path=... and renders markdown via the
- * global `marked` CDN lib (stays a CDN global — unchanged from legacy).
+ * Clicking a file: opens the shared FileReader slide-over, which fetches
+ * /api/file?path=... and renders markdown via the global `marked` CDN lib.
  *
  * Agent-jump bridge: when the store field `requestedFile` is set (by
  * AgentsView), FilesView picks it up and pre-fills the search filter, then
  * clears the field so subsequent renders don't re-trigger.
  */
 
-import { html, useState, useEffect, useCallback } from '../preact.js';
+import { html, useState, useEffect } from '../preact.js';
 import { useStore, setState } from '../store.js';
-import { showToast } from '../components/shared.js';
-
-// ---- Markdown helpers (ported from client-main.js:287-294) ----
-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(html) {
-  return String(html)
-    .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');
-}
-
-function renderMd(md) {
-  const clean = stripFrontmatter(md);
-  if (typeof marked === 'undefined') {
-    return '<pre>' + clean.replace(/</g, '&lt;') + '</pre>';
-  }
-  return sanitizeHtml(marked.parse(clean));
-}
+import { FileReader } from '../components/FileReader.js';
 
 // ---- File tree components ----
 function FileEntry({ file, extraText, onSelect, isSelected }) {
@@ -117,51 +88,14 @@ function FileGroup({ group, onSelect, selectedPath, filter }) {
   return null;
 }
 
-// ---- File content pane ----
-function FileContent({ path, html: htmlContent, loading, error }) {
-  if (loading) {
-    return html`
-      <div id="file-view">
-        <div class="skeleton"></div>
-        <div class="skeleton" style="height:200px;"></div>
-      </div>
-    `;
-  }
-  if (error) {
-    return html`
-      <div id="file-view">
-        <div style="color:var(--accent-red);padding:16px;">${error}</div>
-      </div>
-    `;
-  }
-  if (!path || !htmlContent) return html`<div id="file-view"></div>`;
-
-  function copyPath() {
-    navigator.clipboard.writeText(path).then(() => {
-      showToast('Path copied!');
-    }).catch(() => {});
-  }
-
-  return html`
-    <div id="file-view">
-      <div class="file-path-header">
-        <span>${path}</span>
-        <button class="copy-btn" onClick=${copyPath}>Copy</button>
-      </div>
-      <div class="md-render" dangerouslySetInnerHTML=${{ __html: htmlContent }} />
-    </div>
-  `;
-}
-
 // ---- Root FilesView ----
 export function FilesView() {
   const { requestedFile } = useStore();
 
-  const [groups, setGroups]         = useState([]);
-  const [loading, setLoading]       = useState(true);
-  const [filter, setFilter]         = useState('');
-  const [selectedPath, setSelectedPath] = useState(null);
-  const [fileContent, setFileContent]   = useState({ html: null, loading: false, error: null });
+  const [groups, setGroups]     = useState([]);
+  const [loading, setLoading]   = useState(true);
+  const [filter, setFilter]     = useState('');
+  const [selected, setSelected] = useState(null); // { path, label } | null
 
   // Fetch file tree on mount
   useEffect(() => {
@@ -173,33 +107,15 @@ export function FilesView() {
       .finally(() => setLoading(false));
   }, []);
 
-  // Agent-jump bridge: requestedFile set by AgentsView
+  // Agent-jump bridge: the agent drawer's "View file in Files" sets
+  // requestedFile to a project-relative path — open it in the reader.
   useEffect(() => {
     if (!requestedFile) return;
-    setFilter(requestedFile);
+    setSelected({ path: requestedFile, label: requestedFile.split('/').pop() });
     // Clear the bridge field so this doesn't re-trigger
     setState({ requestedFile: null });
   }, [requestedFile]);
 
-  const loadFile = useCallback(async (file) => {
-    setSelectedPath(file.path);
-    setFileContent({ html: null, loading: true, error: null });
-    try {
-      const resp = await fetch('/api/file?path=' + encodeURIComponent(file.path));
-      if (!resp.ok) {
-        const msg = resp.status === 404
-          ? 'File not found: ' + file.path
-          : 'Failed to load file (HTTP ' + resp.status + ').';
-        setFileContent({ html: null, loading: false, error: msg });
-        return;
-      }
-      const text = await resp.text();
-      setFileContent({ html: renderMd(text), loading: false, error: null });
-    } catch {
-      setFileContent({ html: null, loading: false, error: 'Network error.' });
-    }
-  }, []);
-
   return html`
     <div class="view active" id="view-files">
       <div class="view-title">Files</div>
@@ -222,20 +138,21 @@ export function FilesView() {
                   <${FileGroup}
                     key=${g.group}
                     group=${g}
-                    onSelect=${loadFile}
-                    selectedPath=${selectedPath}
+                    onSelect=${setSelected}
+                    selectedPath=${selected && selected.path}
                     filter=${filter}
                   />
                 `)
           }
         </div>
       </div>
-      <${FileContent}
-        path=${selectedPath}
-        html=${fileContent.html}
-        loading=${fileContent.loading}
-        error=${fileContent.error}
-      />
+      ${selected && html`
+        <${FileReader}
+          path=${selected.path}
+          title=${selected.label}
+          onClose=${() => setSelected(null)}
+        />
+      `}
     </div>
   `;
 }

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

@@ -9,8 +9,9 @@
 
 import { html, useState, useCallback } from '../preact.js';
 import { useStore, refresh } from '../store.js';
-import { allTasks } from '../util.js';
-import { runStory, stopStory, openOrchPanel } from '../orchestrator.js';
+import { allTasks, currentPhaseName } from '../util.js';
+import { stopStory, openOrchPanel } from '../orchestrator.js';
+import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { showToast } from '../components/shared.js';
 
 // ---- Column descriptors ----
@@ -30,26 +31,26 @@ function kanbanCol(status) {
 }
 
 /** Return the effective column, hoisting to in_progress if a live session exists. */
-function effCol(task, activeSessions) {
-  const running = Array.isArray(activeSessions)
-    ? activeSessions.some(s => s.storyId === task.id && s.status === 'running')
-    : false;
-  return (task.id && running) ? 'in_progress' : kanbanCol(task.status);
+function effCol(task, runningByStory) {
+  const running = !!(task.id && runningByStory && runningByStory[task.id]);
+  return running ? 'in_progress' : kanbanCol(task.status);
 }
 
 // ---- Card component ----
-function KanbanCard({ task, col, onDragStart, onDragEnd }) {
+function KanbanCard({ task, col, live, orchDown, onDragStart, onDragEnd }) {
   const sid    = task.id || '';
   const c      = col;
-  const isRunning = c === 'in_progress';
-  const canRun    = c === 'todo' || c === 'blocked';
+  const isRunning = !!live; // live orchestrator session, not just status
+  const canRun    = !isRunning && (c === 'todo' || c === 'blocked');
   const pts       = task.points ? task.points + 'p' : null;
   const phase     = task.phaseId ? 'P' + task.phaseId : null;
   const sprintMeta = [pts, phase].filter(Boolean).join(' · ');
 
   function handleRun(e) {
     e.stopPropagation();
-    runStory(sid);
+    openRunnerPicker(e.currentTarget, {
+      kind: 'session', storyId: sid, cmd: '/rcode-dev-story ' + sid, title: sid,
+    });
   }
   function handleStop(e) {
     e.stopPropagation();
@@ -80,13 +81,15 @@ function KanbanCard({ task, col, onDragStart, onDragEnd }) {
       ` : null}
       ${isRunning ? html`
         <div class="card-run-indicator" id=${'run-ind-' + sid}>
-          <span class="run-pulse"></span>running
+          <span class="live-dot"></span>running
         </div>
       ` : null}
       ${sid ? html`
         <div class="kanban-card-actions">
           ${canRun ? html`
-            <button class="kanban-run-btn" onClick=${handleRun}>▶ Run</button>
+            <button class="kanban-run-btn" disabled=${orchDown}
+              title=${orchDown ? 'Orchestrator unreachable' : 'Run ' + sid}
+              onClick=${handleRun}>▶ Run</button>
           ` : isRunning ? html`
             <button class="kanban-stop-btn" onClick=${handleStop}>■ Stop</button>
             <button class="kanban-view-btn" onClick=${handleView}>↗ View</button>
@@ -99,8 +102,19 @@ function KanbanCard({ task, col, onDragStart, onDragEnd }) {
   `;
 }
 
+/**
+ * Orchestrator status dot — reflects the 4s session-poll reachability.
+ * up (green pulse) / down (red) / neutral until the first poll lands.
+ */
+function OrchDot({ online }) {
+  const cls = 'orch-status-dot' + (online === false ? ' down' : online ? ' up' : '');
+  const label = online === false ? 'Orchestrator unreachable'
+    : online ? 'Orchestrator online' : 'Orchestrator status unknown';
+  return html`<span class=${cls} id="orch-dot" title=${label} role="img" aria-label=${label}></span>`;
+}
+
 // ---- Column component ----
-function KanbanColumn({ col, cards, onDragStart, onDragEnd, onDragOver, onDrop }) {
+function KanbanColumn({ col, cards, runningByStory, orchDown, onDragStart, onDragEnd, onDragOver, onDrop }) {
   return html`
     <div class=${'kanban-col ' + col.cssClass} data-col=${col.id}>
       <div class="kanban-col-head">
@@ -120,6 +134,8 @@ function KanbanColumn({ col, cards, onDragStart, onDragEnd, onDragOver, onDrop }
             key=${t.id || t.title}
             task=${t}
             col=${col.id}
+            live=${!!(t.id && runningByStory && runningByStory[t.id])}
+            orchDown=${orchDown}
             onDragStart=${e => onDragStart(e, t)}
             onDragEnd=${onDragEnd}
           />
@@ -131,8 +147,9 @@ function KanbanColumn({ col, cards, onDragStart, onDragEnd, onDragOver, onDrop }
 
 // ---- Root KanbanView ----
 export function KanbanView() {
-  const { phases, activeSessions, currentPhase, milestone } = useStore();
+  const { phases, runningByStory, currentPhase, milestone, orchOnline } = useStore();
   const tasks = allTasks(phases);
+  const orchDown = orchOnline === false;
 
   // ---- Local column state (visual DnD overrides) ----
   // Map<taskId, colId> — overrides the store-derived column for visual-only moves.
@@ -141,7 +158,7 @@ export function KanbanView() {
 
   function getColFor(task) {
     if (visualMoves[task.id]) return visualMoves[task.id];
-    return effCol(task, activeSessions);
+    return effCol(task, runningByStory);
   }
 
   // Build buckets
@@ -190,7 +207,7 @@ export function KanbanView() {
       <div class="view active" id="view-kanban">
         <div class="kanban-topbar">
           <div class="kanban-topbar-title">
-            <span class="orch-status-dot" id="orch-dot"></span>
+            <${OrchDot} online=${orchOnline} />
             Kanban
           </div>
           <div class="kanban-topbar-actions">
@@ -200,11 +217,11 @@ export function KanbanView() {
         </div>
         <div class="empty" style="margin:24px;">
           No stories yet.
-          ${(milestone || currentPhase) ? html`
+          ${(milestone || currentPhaseName(currentPhase)) ? html`
             <div class="empty-action">
               ${milestone ? html`Milestone <strong>${milestone}</strong>` : null}
-              ${milestone && currentPhase ? ' · ' : null}
-              ${currentPhase ? html`Phase <strong>${currentPhase}</strong>` : null}
+              ${milestone && currentPhaseName(currentPhase) ? ' · ' : null}
+              ${currentPhaseName(currentPhase) ? html`Phase <strong>${currentPhaseName(currentPhase)}</strong>` : null}
               ${' is active.'}
             </div>
           ` : null}
@@ -221,7 +238,7 @@ export function KanbanView() {
     <div class="view active" id="view-kanban">
       <div class="kanban-topbar">
         <div class="kanban-topbar-title">
-          <span class="orch-status-dot" id="orch-dot"></span>
+          <${OrchDot} online=${orchOnline} />
           Kanban
         </div>
         <div class="kanban-topbar-actions">
@@ -235,6 +252,8 @@ export function KanbanView() {
             key=${col.id}
             col=${col}
             cards=${buckets[col.id] || []}
+            runningByStory=${runningByStory}
+            orchDown=${orchDown}
             onDragStart=${handleDragStart}
             onDragEnd=${handleDragEnd}
             onDragOver=${handleDragOver}

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

@@ -7,9 +7,13 @@
  *   populated     — sections map + distillates / change records / archive / post-mortems
  *
  * Command hints accordion mirrors the legacy cmdAccordion() output.
+ *
+ * Clicking an existing entry opens its content in the shared FileReader
+ * slide-over (same component the Files view uses).
  */
 
 import { html, useState, useEffect } from '../preact.js';
+import { FileReader } from '../components/FileReader.js';
 
 // ---- Command hints accordion ----
 const MEMORY_HINTS = [
@@ -39,7 +43,7 @@ function CmdAccordion({ hints }) {
 }
 
 // ---- Section file list ----
-function SectionGroup({ section, files }) {
+function SectionGroup({ section, files, onOpen }) {
   return html`
     <div>
       <div class="memory-group-header">${section}</div>
@@ -47,8 +51,13 @@ function SectionGroup({ section, files }) {
         ${files.map(f => {
           const status = f.exists ? (f.populated ? '✓' : '○') : '✗';
           const meta   = f.exists ? (f.populated ? 'populated' : 'template only') : 'missing';
+          // Only existing files are openable — missing entries stay inert.
           return html`
-            <div class="item" key=${f.name}>
+            <div
+              class=${'item' + (f.exists ? ' item-clickable' : '')}
+              key=${f.name}
+              onClick=${f.exists ? () => onOpen(f) : undefined}
+            >
               <div class="item-title">${status} ${f.name}</div>
               <div class="item-meta">${meta} · ${f.bytes || 0} bytes</div>
             </div>
@@ -60,14 +69,14 @@ function SectionGroup({ section, files }) {
 }
 
 // ---- Generic list group (distillates, change records, etc.) ----
-function ListGroup({ label, items }) {
+function ListGroup({ label, items, onOpen }) {
   if (!items || !items.length) return null;
   return html`
     <div>
       <div class="memory-group-header">${label} (${items.length})</div>
       <div class="decision-list">
         ${items.map(f => html`
-          <div class="item" key=${f.name}>
+          <div class="item item-clickable" key=${f.name} onClick=${() => onOpen(f)}>
             <div class="item-title">${f.name}</div>
           </div>
         `)}
@@ -81,6 +90,7 @@ export function MemoryView() {
   const [memory, setMemory]   = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError]     = useState(null);
+  const [reader, setReader]   = useState(null); // { path, name } | null
 
   useEffect(() => {
     setLoading(true);
@@ -144,14 +154,21 @@ export function MemoryView() {
       </div>
       <div id="memory-sections">
         ${Object.entries(sections).map(([section, files]) => html`
-          <${SectionGroup} key=${section} section=${section} files=${files} />
+          <${SectionGroup} key=${section} section=${section} files=${files} onOpen=${setReader} />
         `)}
-        <${ListGroup} label="Distillates" items=${memory.distillates} />
-        <${ListGroup} label="Change Records" items=${memory.changeRecords} />
-        <${ListGroup} label="Milestone Archive" items=${memory.archive} />
-        <${ListGroup} label="Post-mortems" items=${memory.postMortems} />
+        <${ListGroup} label="Distillates" items=${memory.distillates} onOpen=${setReader} />
+        <${ListGroup} label="Change Records" items=${memory.changeRecords} onOpen=${setReader} />
+        <${ListGroup} label="Milestone Archive" items=${memory.archive} onOpen=${setReader} />
+        <${ListGroup} label="Post-mortems" items=${memory.postMortems} onOpen=${setReader} />
       </div>
       <${CmdAccordion} hints=${MEMORY_HINTS} />
+      ${reader && html`
+        <${FileReader}
+          path=${reader.path}
+          title=${reader.name}
+          onClose=${() => setReader(null)}
+        />
+      `}
     </div>
   `;
 }

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

@@ -9,8 +9,8 @@
 
 import { html } from '../preact.js';
 import { useStore } from '../store.js';
-import { pct, humanDate, allSprints, allTasks } from '../util.js';
-import { CompletionRing, Breadcrumb, Tag, PhaseCard } from '../components/shared.js';
+import { pct, humanDate, allSprints, allTasks, currentPhaseName } from '../util.js';
+import { CompletionRing, Breadcrumb, Tag, PhaseCard, pressable } from '../components/shared.js';
 import { runningTotal } from '../orchestrator.js';
 import { Icon } from '../icons-client.js';
 
@@ -94,7 +94,7 @@ export function MilestonesView({ subId }) {
           <div class="attr-grid">
             <${AttrItem} label="Total Phases" value=${phases.length}/>
             <${AttrItem} label="Completed Phases" value=${doneP}/>
-            <${AttrItem} label="Current Phase" value=${S.currentPhase || '—'}/>
+            <${AttrItem} label="Current Phase" value=${currentPhaseName(S.currentPhase) || '—'}/>
             <${AttrItem} label="Current Sprint" value=${S.currentSprint || '—'}/>
             <${AttrItem} label="Tasks Done" value=${done.length + '/' + total.length}/>
             <${AttrItem} label="Progress" value=${pct(done.length, total.length)}/>
@@ -116,7 +116,7 @@ export function MilestonesView({ subId }) {
     <div id="view-milestones" class="view active">
       <div class="view-title">Milestones</div>
       <div class="phase-list">
-        <div class="item item-clickable" onClick=${() => { location.hash = 'milestones/M1'; }}>
+        <div class="item item-clickable" ...${pressable(() => { location.hash = 'milestones/M1'; })}>
           <div style="display:flex;align-items:center;gap:var(--space-4);">
             <${CompletionRing} done=${done.length} total=${total.length}/>
             <div>