@hanzlaa/rcode 4.1.1 → 4.3.0

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

@@ -1,83 +1,176 @@
 /**
- * AgentsView — Preact port of the #view-agents markup from shell.js.
+ * AgentsView — Team roster: category sections of rich agent cards plus an
+ * agent detail drawer (components/AgentCard.js).
  *
- * Renders Team (real agents) and AI Agents groups from the AGENTS roster
- * that was moved client-side into agents-data.js.
+ * Cards render from the client-side AGENTS roster (agents-data.js) plus a
+ * one-shot /api/agents call that returns frontmatter metadata (description,
+ * model, tools) per agent definition — small payload, so cards can show
+ * summaries and chips without touching prompt bodies.
  *
- * Clicking an agent sets store.requestedFile = skillSlug and navigates to
- * the Files view, replacing the legacy viewAgentSkill() setTimeout+DOM-poll
- * hack in shell.js. FilesView watches requestedFile and pre-fills the filter.
+ * Clicking a card opens the drawer with the agent's FULL prompt: the actual
+ * rcode/agents/<file> body fetched lazily through the existing /api/file
+ * handler and rendered as markdown. Prompts are fetched one at a time on
+ * click (never all at once) and cached per file for the session.
  */
 
-import { html, useState } from '../preact.js';
-import { setState } from '../store.js';
+import { html, useState, useEffect, useCallback, useMemo } from '../preact.js';
+import { AgentCard, AgentDrawer } from '../components/AgentCard.js';
 import { AGENTS } from '../agents-data.js';
 
-const REAL_AGENTS = AGENTS.filter(a => a.real);
-const AI_AGENTS   = AGENTS.filter(a => !a.real);
+// Category sections in display order. Roster `type` values not listed here
+// fall into Specialists so a future type can't silently drop agents.
+const SECTIONS = [
+  { label: 'Leadership',  types: ['leadership'] },
+  { label: 'Engineering', types: ['engineering'] },
+  { label: 'Product',     types: ['product'] },
+  { label: 'Design',      types: ['design'] },
+  { label: 'Quality',     types: ['quality'] },
+  { label: 'Specialists', types: ['support', 'system'] },
+];
+const KNOWN_TYPES = SECTIONS.flatMap(s => s.types);
 
-// ---- Single agent card ----
-function AgentCard({ agent }) {
-  const skillSlug = agent.name.split(' ')[0].toLowerCase();
-
-  function handleClick() {
-    // Navigate to Files view and pre-fill search with the agent's skill slug.
-    // FilesView watches requestedFile in the store and responds via useEffect.
-    setState({ requestedFile: skillSlug });
-    window.location.hash = 'files';
-  }
+function agentsForSection(section) {
+  return AGENTS.filter(a =>
+    section.types.includes(a.type) ||
+    (section.label === 'Specialists' && !KNOWN_TYPES.includes(a.type))
+  );
+}
 
-  return html`
-    <div
-      class="agent-card"
-      onClick=${handleClick}
-      style="cursor:pointer;"
-    >
-      <div class="name">
-        ${agent.name}
-        ${agent.real ? html` <span class="real-badge">real</span>` : null}
-        ${' '}<span class="type-badge">${agent.type}</span>
-      </div>
-      <div class="arabic">${agent.arabic}</div>
-      <div class="role">${agent.role}</div>
-    </div>
-  `;
+function matchesFilter(agent, meta, filter) {
+  if (!filter) return true;
+  const haystack = [
+    agent.name, agent.role, agent.arabic, agent.type,
+    meta && meta.model, meta && meta.description, meta && (meta.tools || []).join(' '),
+  ].filter(Boolean).join(' ');
+  return haystack.toLowerCase().includes(filter.toLowerCase());
 }
 
-// ---- Agent group ----
-function AgentGroup({ label, agents, filter }) {
-  const visible = agents.filter(a => {
-    if (!filter) return true;
-    const q = filter.toLowerCase();
-    return (a.name + ' ' + a.role + ' ' + a.arabic + ' ' + a.type).toLowerCase().includes(q);
-  });
-  if (!visible.length) return null;
+// Session-local prompt cache: file name -> raw markdown. Re-opening a card
+// renders from here instead of refetching.
+const promptCache = new Map();
+
+// ---- Section: sticky header + card grid ----
+function AgentSection({ section, agents, metaByFile, onOpen }) {
+  if (!agents.length) return null;
   return html`
-    <div class="memory-group-header">${label} (${visible.length})</div>
-    <div class="agent-list">
-      ${visible.map(a => html`<${AgentCard} key=${a.name} agent=${a} />`)}
+    <div class="agent-section">
+      <div class="agent-section-head">
+        ${section.label}
+        <span class="agent-section-count">${agents.length}</span>
+      </div>
+      <div class="agent-grid">
+        ${agents.map(a => html`
+          <${AgentCard}
+            key=${a.name}
+            agent=${a}
+            meta=${a.file ? metaByFile[a.file] : null}
+            onOpen=${onOpen}
+          />
+        `)}
+      </div>
     </div>
   `;
 }
 
 // ---- Root AgentsView ----
 export function AgentsView() {
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter]         = useState('');
+  const [metaByFile, setMetaByFile] = useState({});
+  const [selected, setSelected]     = useState(null);
+  const [prompt, setPrompt]         = useState({ loading: false, error: null, text: null });
+
+  // One-shot roster metadata fetch — frontmatter summaries only, no bodies.
+  useEffect(() => {
+    fetch('/api/agents')
+      .then(r => r.json())
+      .then(list => {
+        const map = {};
+        for (const a of (Array.isArray(list) ? list : [])) map[a.file] = a;
+        setMetaByFile(map);
+      })
+      .catch(() => { /* chips/summaries are progressive enhancement — cards still render */ });
+  }, []);
+
+  const openAgent = useCallback(async (agent) => {
+    setSelected(agent);
+    if (!agent.file) {
+      setPrompt({ loading: false, error: null, text: null });
+      return;
+    }
+    if (promptCache.has(agent.file)) {
+      setPrompt({ loading: false, error: null, text: promptCache.get(agent.file) });
+      return;
+    }
+    setPrompt({ loading: true, error: null, text: null });
+    try {
+      const resp = await fetch('/api/file?path=' + encodeURIComponent('rcode/agents/' + agent.file));
+      if (!resp.ok) {
+        const msg = resp.status === 404
+          ? 'Prompt file not found: rcode/agents/' + agent.file
+          : 'Failed to load prompt (HTTP ' + resp.status + ').';
+        setPrompt({ loading: false, error: msg, text: null });
+        return;
+      }
+      const text = await resp.text();
+      promptCache.set(agent.file, text);
+      setPrompt({ loading: false, error: null, text });
+    } catch {
+      setPrompt({ loading: false, error: 'Network error.', text: null });
+    }
+  }, []);
+
+  const closeDrawer = useCallback(() => setSelected(null), []);
+
+  // Escape closes the drawer while it is open.
+  useEffect(() => {
+    if (!selected) return;
+    const onKey = (e) => { if (e.key === 'Escape') closeDrawer(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [selected, closeDrawer]);
+
+  const sections = useMemo(() =>
+    SECTIONS.map(s => ({
+      section: s,
+      agents: agentsForSection(s).filter(a =>
+        matchesFilter(a, a.file ? metaByFile[a.file] : null, filter)),
+    })),
+  [filter, metaByFile]);
+
+  const visibleCount = sections.reduce((n, s) => n + s.agents.length, 0);
 
   return html`
     <div class="view active" id="view-agents">
       <div class="view-title">Team</div>
-      <div class="filter-bar">
+      <div class="filter-bar agent-filter-bar">
         <input
           class="filter-input"
           type="text"
-          placeholder="Filter agents…"
+          placeholder="Search agents by name, role, model, or tool…"
           value=${filter}
           onInput=${e => setFilter(e.target.value)}
         />
+        <span class="agent-count">${visibleCount} agent${visibleCount === 1 ? '' : 's'}</span>
       </div>
-      <${AgentGroup} label="Team" agents=${REAL_AGENTS} filter=${filter} />
-      <${AgentGroup} label="AI Agents" agents=${AI_AGENTS} filter=${filter} />
+      ${visibleCount === 0
+        ? html`<div class="empty">No agents match “${filter}”.</div>`
+        : sections.map(({ section, agents }) => html`
+            <${AgentSection}
+              key=${section.label}
+              section=${section}
+              agents=${agents}
+              metaByFile=${metaByFile}
+              onOpen=${openAgent}
+            />
+          `)}
+      ${selected ? html`
+        <${AgentDrawer}
+          agent=${selected}
+          meta=${selected.file ? metaByFile[selected.file] : null}
+          prompt=${prompt}
+          onClose=${closeDrawer}
+        />
+      ` : null}
     </div>
   `;
 }

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