@hanzlaa/rcode 4.5.0 → 4.7.0

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

@@ -9,18 +9,34 @@
  *
  * Store field: state.terminal = { open, storyId, title, minimized, fullscreen }
  * Setting state.terminal via orchestrator.js triggers this component.
+ *
+ * Two mount points, one singleton terminal:
+ *   - App.js mounts one instance as a floating overlay (backdrop + sliding
+ *     panel + minimized pill) on every view.
+ *   - OrchestrationView.js mounts a second instance with `docked=true` to
+ *     embed the SAME xterm.js Terminal inline in its right column.
+ * Only one instance may touch the DOM at a time — App.js passes
+ * `suspend=${view === 'orchestration'}` so its overlay instance goes fully
+ * inert (renders null, effects no-op) while Orchestration's docked instance
+ * is mounted. `ensureTerm()` reparents the shared xterm DOM node into
+ * whichever container asks for it, so the buffer/connection survive the
+ * hand-off in both directions.
  */
 
 import { html, useEffect, useRef, useCallback } from '../preact.js';
 import { useStore, setState } from '../store.js';
-import { orchToken, stopSession, ORCH_WS } from '../orchestrator.js';
+import { orchToken, stopSession, orchWs } from '../orchestrator.js';
 
 // ── Internal state (module-scoped, one panel at a time) ──────────────────────
-// These refs are NOT component state because the xterm instance must persist
-// across panel open/close cycles and Preact re-renders.
-let _term    = null;
-let _termFit = null;
-let _termWs  = null;
+// These are NOT component state because the xterm instance (and the story it
+// is currently connected to) must persist across panel open/close cycles,
+// Preact re-renders, and — now — across the two XtermPanel mount points
+// (floating overlay vs. docked). Component-local refs would not be shared
+// between those two instances.
+let _term          = null;
+let _termFit       = null;
+let _termWs        = null;
+let _currentStory  = null;
 
 function setStatus(dotStatus) {
   // Propagate connection status via a store signal so the pill/header can react
@@ -34,9 +50,23 @@ function _resize() {
   }
 }
 
-/** Build the xterm instance exactly once; attach to `containerEl`. */
+/**
+ * Build the xterm instance exactly once; attach to `containerEl`.
+ * If the instance already exists but lives under a DIFFERENT container
+ * (e.g. the overlay panel had it, and the docked panel is now asking), move
+ * its root DOM node into `containerEl` instead of no-oping. xterm.js's root
+ * element is a plain DOM node — reparenting it is safe and preserves the
+ * scrollback buffer and any live WebSocket connection.
+ */
 function ensureTerm(containerEl) {
-  if (_term || typeof Terminal === 'undefined') return;
+  if (_term) {
+    if (_term.element && _term.element.parentElement !== containerEl) {
+      containerEl.appendChild(_term.element);
+      if (_termFit) { try { _termFit.fit(); } catch (_e) {} }
+    }
+    return;
+  }
+  if (typeof Terminal === 'undefined') return;
   _term = new Terminal({
     theme: {
       background: '#0c0c0e', foreground: '#c9d1d9',
@@ -74,7 +104,7 @@ function connectWs(storyId) {
     return;
   }
   setStatus('connecting');
-  const url = ORCH_WS + '/ws/' + encodeURIComponent(storyId) + '?token=' + encodeURIComponent(tok);
+  const url = orchWs() + '/ws/' + encodeURIComponent(storyId) + '?token=' + encodeURIComponent(tok);
   const ws = new WebSocket(url);
   _termWs = ws;
 
@@ -98,10 +128,9 @@ function connectWs(storyId) {
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
-export function XtermPanel() {
+export function XtermPanel({ docked = false, suspend = false } = {}) {
   const { terminal, termStatus } = useStore();
   const containerRef = useRef(null);
-  const currentStoryRef = useRef(null);
 
   const t = terminal || {};
   const open       = !!t.open;
@@ -110,28 +139,37 @@ export function XtermPanel() {
   const storyId    = t.storyId || '';
   const title      = t.title   || 'Terminal';
 
-  // Build xterm instance on first open; reconnect when storyId changes.
-  // The resize listener is registered here (not inside ensureTerm) so the
-  // cleanup return can mirror it on unmount.
+  // Build/attach the xterm instance on open; (re)connect only when the
+  // focused storyId actually changes. `_currentStory` is module-scoped (not
+  // a per-instance ref) so that handing the terminal off between the
+  // floating overlay and the docked panel — same storyId, different
+  // container — reparents via ensureTerm() without tearing down the
+  // connection or clearing the buffer. `suspend` is in the dep array so the
+  // OTHER (un-suspending) instance re-runs this effect and reclaims the
+  // terminal DOM node when the user navigates away from Orchestration.
   useEffect(() => {
-    if (!open || !containerRef.current) return;
+    if (suspend || !open || !containerRef.current) return;
     ensureTerm(containerRef.current);
-    if (_term) { _term.clear(); _resize(); }
-    if (storyId && storyId !== currentStoryRef.current) {
-      currentStoryRef.current = storyId;
+    const isNewSession = storyId && storyId !== _currentStory;
+    if (isNewSession) {
+      _currentStory = storyId;
+      if (_term) _term.clear();
       connectWs(storyId);
     }
+    _resize();
     window.addEventListener('resize', _resize);
     return () => window.removeEventListener('resize', _resize);
-  }, [open, storyId]);
+  }, [open, storyId, suspend]);
 
   // Resize when entering/leaving fullscreen or on open
   useEffect(() => {
-    if (open) { setTimeout(_resize, 50); }
-  }, [open, fullscreen]);
+    if (!suspend && open) { setTimeout(_resize, 50); }
+  }, [open, fullscreen, suspend]);
 
-  // Escape key closes
+  // Escape key closes (docked panel has no "close" concept — it just shows
+  // the empty state when store.terminal is cleared elsewhere)
   useEffect(() => {
+    if (suspend || docked) return;
     function onKey(e) {
       if (e.key === 'Escape' && open && !minimized) {
         setState({ terminal: { ...t, open: false } });
@@ -139,9 +177,11 @@ export function XtermPanel() {
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open, minimized, t]);
+  }, [open, minimized, t, suspend, docked]);
 
   const dotCls = 'term-status-dot ' + (termStatus || '');
+  // Statuses that mean "output is actively streaming" for the docked live pulse.
+  const isLive = open && ['running', 'connecting', 'blocked', 'waiting'].includes(termStatus);
 
   // ── Actions ──
   const handleMinimize = useCallback(() => {
@@ -167,6 +207,41 @@ export function XtermPanel() {
     setTimeout(_resize, 50);
   }, [t, fullscreen]);
 
+  // Fully inert while the sibling instance owns the terminal DOM — no
+  // backdrop, no panel, no pill, nothing rendered at all.
+  if (suspend) return null;
+
+  // ── Docked render (Orchestration view's right column) ──
+  if (docked) {
+    return html`
+      <div class="orch-term-dock">
+        <div class="orch-term-dock-header">
+          <span class="orch-term-dot red"></span>
+          <span class="orch-term-dot amber"></span>
+          <span class="orch-term-dot green"></span>
+          <span class="orch-term-dock-label">xterm${open ? ' · ' + title : ''}</span>
+          ${isLive ? html`
+            <span class="orch-term-dock-live">
+              <span class="orch-term-dock-live-dot"></span>live
+            </span>
+          ` : null}
+          ${open ? html`
+            <button class="orch-term-dock-stop" onClick=${handleStop} title="End the agent session">Stop</button>
+          ` : null}
+        </div>
+        <div class="orch-term-dock-body">
+          ${open
+            ? html`<div ref=${containerRef} class="orch-term-dock-container"></div>`
+            : html`
+              <div class="orch-term-dock-empty">
+                No active execution. Select a command from the Runner picker to begin.
+              </div>
+            `}
+        </div>
+      </div>
+    `;
+  }
+
   // ── Pill (minimized state) ──
   const pill = html`
     <div

package/server/lib/html/client/components/dashboard/Blockers.js

@@ -11,8 +11,8 @@
  */
 
 import { html } from '../../preact.js';
-import { useStore } from '../../store.js';
-import { rowLink } from '../../util.js';
+import { useStore, openBlockerViewer } from '../../store.js';
+import { pressable } from '../shared.js';
 
 // Severity → pill label (lowercase enum to human-facing label).
 const SEV_LABEL = { high: 'High', medium: 'Medium', low: 'Low' };
@@ -40,7 +40,7 @@ export function Blockers() {
             ${blockers.map((b) => {
               const sev = SEV_LABEL[b.severity] ? b.severity : 'low';
               return html`
-                <li class="bk-row ovr-link" key=${b.title} ...${rowLink('tasks')}>
+                <li class="bk-row ovr-link" key=${b.title} ...${pressable(() => openBlockerViewer(b))}>
                   <span class=${'bk-icon bk-sev-' + sev} aria-hidden="true">⚠</span>
                   <div class="bk-body">
                     <p class="bk-title">${b.title}</p>

package/server/lib/html/client/components/dashboard/CompletedTasks.js

@@ -10,8 +10,9 @@
  */
 
 import { html } from '../../preact.js';
-import { useStore } from '../../store.js';
+import { useStore, openFileViewer } from '../../store.js';
 import { humanDate } from '../../util.js';
+import { pressable } from '../shared.js';
 
 export function CompletedTasks() {
   const S = useStore();
@@ -30,7 +31,8 @@ export function CompletedTasks() {
         : html`
           <ul class="ct-list">
             ${items.map((t, i) => html`
-              <li class="ct-row" key=${t.title + i}>
+              <li class=${'ct-row' + (t.file ? ' ovr-link' : '')} key=${t.title + i}
+                ...${t.file ? pressable(() => openFileViewer(t.file, t.title)) : {}}>
                 <svg class="ct-check" width="16" height="16" viewBox="0 0 24 24"
                   fill="none" stroke="currentColor" stroke-width="2.5"
                   stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

package/server/lib/html/client/components/dashboard/InProgress.js

@@ -18,8 +18,8 @@
  */
 
 import { html } from '../../preact.js';
-import { useStore } from '../../store.js';
-import { orchElapsed, rowLink } from '../../util.js';
+import { useStore, openFileViewer } from '../../store.js';
+import { orchElapsed } from '../../util.js';
 import { openTermPanel } from '../../orchestrator.js';
 import { pressable } from '../shared.js';
 import { TaskPipeline } from '../TaskPipeline.js';
@@ -60,7 +60,8 @@ export function InProgress() {
           <ul class="ip-list">
             ${live.map(s => html`<${LiveRow} key=${'live-' + s.storyId} session=${s}/>`)}
             ${items.map((t, i) => html`
-              <li class="ip-row ovr-link" key=${t.title + i} ...${rowLink('tasks')}>
+              <li class=${'ip-row' + (t.file ? ' ovr-link' : '')} key=${t.title + i}
+                ...${t.file ? pressable(() => openFileViewer(t.file, t.title)) : {}}>
                 <span class="ip-title">${t.title}</span>
                 <${TaskPipeline} task=${t} mini=${true}/>
                 ${Number.isFinite(t.pct) ? html`<span class="ip-badge">${t.pct}%</span>` : null}

package/server/lib/html/client/components/dashboard/ProgressTimeline.js

@@ -12,8 +12,8 @@
  */
 
 import { html } from '../../preact.js';
-import { useStore } from '../../store.js';
-import { rowLink } from '../../util.js';
+import { useStore, openFileViewer } from '../../store.js';
+import { pressable } from '../shared.js';
 
 // Map phase state → label + badge/segment modifier.
 function stateMeta(state) {
@@ -84,11 +84,16 @@ export function ProgressTimeline() {
       <div class="pt-track">
         ${phases.map((p, i) => {
           const m = stateMeta(p.state);
-          // Segment deep-links to its phase detail; fall back to the list
-          // when the phase has no id.
-          const target = p.id != null ? 'phases/' + p.id : 'phases';
+          // Same "first sprint with a resolved file" lookup PhasesView uses
+          // for its "View plan file" button. Falls back to the phase detail
+          // page when nothing resolved (e.g. phase has no SPRINT.md yet).
+          const sps = Array.isArray(p.sprints) ? p.sprints : [];
+          const planFile = (sps.find(s => s.file) || {}).file || null;
+          const onActivate = planFile
+            ? () => openFileViewer(planFile, 'Phase ' + (p.id != null ? p.id : '') + ' plan')
+            : () => { location.hash = p.id != null ? 'phases/' + p.id : 'phases'; };
           return html`
-            <div class=${'pt-seg ovr-link ' + m.mod} key=${p.name + i} ...${rowLink(target)}>
+            <div class=${'pt-seg ovr-link ' + m.mod} key=${p.name + i} ...${pressable(onActivate)}>
               <span class="pt-seg-name">${p.name}</span>
               <span class="pt-seg-range">${p.range || ''}</span>
               <span class="pt-seg-badge">${m.label}</span>

package/server/lib/html/client/components/dashboard/RecentDecisions.js

@@ -9,8 +9,9 @@
  */
 
 import { html } from '../../preact.js';
-import { useStore } from '../../store.js';
-import { humanDate, rowLink } from '../../util.js';
+import { useStore, openDecisionViewer } from '../../store.js';
+import { humanDate } from '../../util.js';
+import { pressable } from '../shared.js';
 
 // Map a free-form status string to a badge modifier class.
 function statusClass(status) {
@@ -42,7 +43,7 @@ export function RecentDecisions() {
         : html`
           <ul class="rd-list">
             ${decisions.map((d, i) => html`
-              <li class="rd-row ovr-link" key=${d.title + i} ...${rowLink('decisions')}>
+              <li class="rd-row ovr-link" key=${d.title + i} ...${pressable(() => openDecisionViewer(d))}>
                 <span class="rd-title">${d.title}</span>
                 ${d.status
                   ? html`<span class=${'rd-badge ' + statusClass(d.status)}>${d.status}</span>`

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

@@ -7,12 +7,12 @@
  * Import from here; do NOT inline these in view modules.
  */
 
-import { html, useState } from '../preact.js';
+import { html, useState, useEffect } from '../preact.js';
 import { pctNum, chip as chipDesc, humanDate, pct, currentPhaseId } from '../util.js';
 import {
   isSessionRunning, runningInSprint, runningInPhase,
 } from '../orchestrator.js';
-import { getState } from '../store.js';
+import { getState, openFileViewer } from '../store.js';
 import { Icon } from '../icons-client.js';
 import { TaskPipeline } from './TaskPipeline.js';
 import { openRunnerPicker } from './RunnerPicker.js';
@@ -264,11 +264,20 @@ export function SprintCard({ sprint: s, S }) {
   const borderStyle = isCur
     ? 'border-left-color:var(--accent-amber);background:rgba(245,158,11,0.04)'
     : '';
+  function handleViewFile(e) {
+    e.stopPropagation();
+    openFileViewer(s.file, 'Sprint ' + s.id);
+  }
   return html`
     <div class=${'item item-clickable' + (isCur ? ' sprint-current' : '')} style=${borderStyle}
       ...${pressable(() => { location.hash = 'sprints/' + s.id; })}>
       <div class="item-title">
         <${RunBtn} storyId=${'sprint-' + s.id} cmd=${'/rcode-execute-sprint ' + s.id} label=${'Sprint ' + s.id}/>
+        ${s.file ? html`
+          <button class="card-file-btn" title=${'View ' + s.file} onClick=${handleViewFile}>
+            <${Icon} name="file-text" size=${11}/> File
+          </button>
+        ` : null}
         Sprint ${s.id} — ${s.goal || 'No goal'}
         ${isCur ? html`<${Tag}>current</${Tag}>` : null}
         <${Chip} status=${s.status}/>
@@ -321,6 +330,10 @@ export function TaskCard({ task: t }) {
     }
   }
 
+  function handleViewFile(e) {
+    e.stopPropagation();
+    openFileViewer(t.file, t.title);
+  }
   return html`
     <div class="item item-clickable" data-status=${t.status || ''}
       style=${done ? 'opacity:.65' : ''}
@@ -328,6 +341,11 @@ export function TaskCard({ task: t }) {
       ...${pressable(() => setExpanded(e => !e))}>
       <div class="item-title" style=${done ? 'text-decoration:line-through' : ''}>
         ${t.id && !done ? html`<${RunBtn} storyId=${t.id} cmd=${'/rcode-dev-story ' + t.id} label=${'Story ' + t.id}/>` : null}
+        ${t.file ? html`
+          <button class="card-file-btn" title=${'View ' + t.file} onClick=${handleViewFile}>
+            <${Icon} name="file-text" size=${11}/> File
+          </button>
+        ` : null}
         ${done ? '✓ ' : ''}${t.title}
         <${Chip} status=${t.status}/>
         <span class="task-expand-icon">${expanded ? '▼' : '▶'}</span>
@@ -378,3 +396,94 @@ export function TaskCard({ task: t }) {
     </div>
   `;
 }
+
+// ---- DecisionDrawer ----
+/**
+ * Same slide-over shell as FileReader (.reader-*) but shows a decision
+ * record's own fields instead of fetching a file — decisions have no
+ * backing markdown file, only whatever state.json recorded for them.
+ * @param {{ decision: object|null, onClose: function }} props
+ */
+export function DecisionDrawer({ decision: d, onClose }) {
+  // Hooks run unconditionally (Rules of Hooks) even though the component
+  // renders null below when there's nothing open.
+  useEffect(() => {
+    function onKey(e) { if (e.key === 'Escape' && onClose) onClose(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  if (!d) return null;
+  const title = d.title || d.summary || d.decision || 'Decision';
+
+  // state.json only records a short summary + a few fields for each entry —
+  // the full write-up (rationale, alternatives considered) lives in the
+  // separate, manually-curated decision log. There's no reliable way to
+  // match this specific record to one entry in that file, so this opens the
+  // whole log rather than pretending to jump to the right spot.
+  function handleOpenLog(e) {
+    e.stopPropagation();
+    onClose();
+    openFileViewer('.rcode/memory/project/decisions.md', 'Decision Log');
+  }
+
+  return html`
+    <div class="reader-backdrop" onClick=${onClose}></div>
+    <div class="reader-panel" role="dialog" aria-label=${title}>
+      <div class="reader-header">
+        <div class="reader-heading">
+          <div class="reader-title">${title}</div>
+          ${d.phase ? html`<div class="reader-path">Phase ${d.phase}</div>` : null}
+        </div>
+        <div class="reader-actions">
+          <button class="reader-copy" onClick=${handleOpenLog}>View decision log →</button>
+          <button class="reader-close" aria-label="Close" onClick=${onClose}>×</button>
+        </div>
+      </div>
+      <div class="reader-body">
+        ${d.status ? html`<div class="task-detail-row"><strong>Status:</strong> <${Chip} status=${d.status}/></div>` : null}
+        ${d.date ? html`<div class="task-detail-row"><strong>Date:</strong> ${humanDate(d.date)}</div>` : null}
+        ${d.plan != null ? html`<div class="task-detail-row"><strong>Plan:</strong> ${d.plan}</div>` : null}
+        ${d.rationale ? html`<div class="task-detail-row"><strong>Rationale:</strong> ${d.rationale}</div>` : null}
+        <div class="dash-empty">
+          <span>This is everything state.json recorded for this entry. Full rationale and alternatives (when written up) live in the decision log.</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ---- BlockerDrawer ----
+/**
+ * Same slide-over shell as DecisionDrawer — blockers are plain
+ * { title, desc, severity } records in state.json, no backing file.
+ * @param {{ blocker: object|null, onClose: function }} props
+ */
+export function BlockerDrawer({ blocker: b, onClose }) {
+  useEffect(() => {
+    function onKey(e) { if (e.key === 'Escape' && onClose) onClose(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  if (!b) return null;
+  const sev = ['high', 'medium', 'low'].includes(b.severity) ? b.severity : 'low';
+
+  return html`
+    <div class="reader-backdrop" onClick=${onClose}></div>
+    <div class="reader-panel" role="dialog" aria-label=${b.title}>
+      <div class="reader-header">
+        <div class="reader-heading">
+          <div class="reader-title">${b.title}</div>
+        </div>
+        <div class="reader-actions">
+          <button class="reader-close" aria-label="Close" onClick=${onClose}>×</button>
+        </div>
+      </div>
+      <div class="reader-body">
+        <div class="task-detail-row"><strong>Severity:</strong> <span class=${'bk-pill bk-sev-' + sev}>${sev}</span></div>
+        ${b.desc ? html`<div class="task-detail-row"><strong>Details:</strong> ${b.desc}</div>` : null}
+      </div>
+    </div>
+  `;
+}

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

@@ -5,17 +5,27 @@
  * Preact store (activeSessions field). Components import these functions
  * directly; no window.* globals needed after Sprint 31.4.
  *
- * Constants
- *   ORCH_HTTP — base URL for orchestrator REST API
- *   ORCH_WS   — base URL for orchestrator WebSocket
+ * Functions
+ *   orchHttp() — base URL for orchestrator REST API
+ *   orchWs()   — base URL for orchestrator WebSocket
  */
 
 import { getState, setState } from './store.js';
 import { showToast } from './components/shared.js';
 import { trackBlocked } from './notify.js';
 
-export const ORCH_HTTP = 'http://localhost:7718';
-export const ORCH_WS   = 'ws://localhost:7718';
+// #969 — the orchestrator port is injected by the server (see shell.js) as
+// window.__ORCH_PORT__, since a dashboard started with ORCH_PORT set (e.g. a
+// second instance under test) spawns its orchestrator on a non-default port.
+// A hardcoded 7718 here would silently drive the wrong orchestrator process.
+// Resolved per-call (not cached at module load) so it works even if a caller
+// loads this module before the inline bootstrap script has run.
+function orchPort() {
+  return (typeof window !== 'undefined' && window.__ORCH_PORT__) || 7718;
+}
+
+export function orchHttp() { return 'http://localhost:' + orchPort(); }
+export function orchWs()   { return 'ws://localhost:' + orchPort(); }
 
 // ── Token helpers ─────────────────────────────────────────────────────────────
 
@@ -31,7 +41,10 @@ export function orchToken() {
 export function refreshOrchToken() {
   return fetch('/api/orch-token')
     .then(r => r.json())
-    .then(d => { if (d && d.token) window.__ORCH_TOKEN__ = d.token; })
+    .then(d => {
+      if (d && d.token) window.__ORCH_TOKEN__ = d.token;
+      if (d && d.orchPort) window.__ORCH_PORT__ = d.orchPort;
+    })
     .catch(() => {});
 }
 
@@ -50,7 +63,7 @@ export function runSession(storyId, cmd, opts) {
     body.runner = opts.runner;
     if (opts.model) body.model = opts.model;
   }
-  return fetch(ORCH_HTTP + '/api/run', {
+  return fetch(orchHttp() + '/api/run', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
@@ -67,7 +80,7 @@ let _runnersPromise = null;
 export function fetchRunners() {
   if (_runnersPromise) return _runnersPromise;
   const tok = orchToken();
-  _runnersPromise = fetch(ORCH_HTTP + '/api/runners', {
+  _runnersPromise = fetch(orchHttp() + '/api/runners', {
     headers: { 'Authorization': 'Bearer ' + tok },
   })
     .then(r => r.json())
@@ -81,7 +94,7 @@ export function fetchRunners() {
  */
 export function stopSession(storyId) {
   const tok = orchToken();
-  return fetch(ORCH_HTTP + '/api/stop', {
+  return fetch(orchHttp() + '/api/stop', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
     body: JSON.stringify({ storyId }),
@@ -96,7 +109,7 @@ export function stopSession(storyId) {
 function fetchSessionsWithStatus() {
   const tok = orchToken();
   if (!tok) return Promise.resolve({ ok: false, sessions: [] });
-  return fetch(ORCH_HTTP + '/api/sessions', {
+  return fetch(orchHttp() + '/api/sessions', {
     headers: { 'Authorization': 'Bearer ' + tok },
   })
     .then(r => {
@@ -119,7 +132,7 @@ export function fetchSessions() {
 export function fetchHistory() {
   const tok = orchToken();
   if (!tok) return Promise.resolve([]);
-  return fetch(ORCH_HTTP + '/api/history', { headers: { 'Authorization': 'Bearer ' + tok } })
+  return fetch(orchHttp() + '/api/history', { headers: { 'Authorization': 'Bearer ' + tok } })
     .then(r => {
       if (r.status === 401) { refreshOrchToken(); return []; }
       return r.json().then(d => (d && d.history) || []);
@@ -160,7 +173,7 @@ export function isOrchOnline() {
  */
 export function submitRejection(storyId, reason, phase) {
   const tok = orchToken();
-  return fetch(ORCH_HTTP + '/api/reject', {
+  return fetch(orchHttp() + '/api/reject', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
     body: JSON.stringify({ storyId, reason, phase: phase || null }),
@@ -173,7 +186,7 @@ export function submitRejection(storyId, reason, phase) {
 export function fetchRejections() {
   const tok = orchToken();
   if (!tok) return Promise.resolve([]);
-  return fetch(ORCH_HTTP + '/api/rejections', { headers: { 'Authorization': 'Bearer ' + tok } })
+  return fetch(orchHttp() + '/api/rejections', { headers: { 'Authorization': 'Bearer ' + tok } })
     .then(r => r.ok ? r.json().then(d => (d && d.rejections) || []) : [])
     .catch(() => []);
 }
@@ -184,7 +197,7 @@ export function fetchRejections() {
  */
 export function setTaskStatus(storyId, status) {
   const tok = orchToken();
-  return fetch(ORCH_HTTP + '/api/task-status', {
+  return fetch(orchHttp() + '/api/task-status', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
     body: JSON.stringify({ storyId, status }),
@@ -197,7 +210,7 @@ export function setTaskStatus(storyId, status) {
  */
 export function cleanSessions(olderThanDays = 0) {
   const tok = orchToken();
-  return fetch(ORCH_HTTP + '/api/clean-sessions', {
+  return fetch(orchHttp() + '/api/clean-sessions', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
     body: JSON.stringify({ olderThanDays }),

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

@@ -23,6 +23,7 @@ let _state = {
   timeline:         _seed.timeline         || null,
   tasks:            _seed.tasks            || null,
   health:           _seed.health           || null,
+  backlog:          _seed.backlog          || [],
   // Fields injected by client.js / window.__S__
   phases:           _seed.phases           || [],
   milestone:        _seed.milestone        || '',
@@ -81,11 +82,57 @@ let _state = {
   // renders and the spawn waits for explicit user approval.
   // { kind: 'story'|'command', storyId?, cmd, title, opts }
   runConfirm:       null,
+  // Global file-viewer drawer state — opens FileReader over whatever view is
+  // currently active (Overview, Phases, Sprints, Tasks, Roadmap, ...) without
+  // navigating away, unlike the older requestedFile→Files-view bridge above.
+  // { path, title } | null. Driven by openFileViewer()/closeFileViewer() below.
+  fileViewer:       null,
+  // Global decision-detail drawer state. Decisions have no backing file (they
+  // live as plain records in state.json), so this shows the record's own
+  // fields rather than fetching anything. The raw decision object | null.
+  decisionViewer:   null,
+  // Global blocker-detail drawer state — same reasoning as decisionViewer:
+  // blockers are plain { title, desc, severity } records with no backing
+  // file. The raw blocker object | null.
+  blockerViewer:    null,
 };
 
 /** Registered subscriber functions. */
 const _subscribers = new Set();
 
+/** Open the global file-viewer drawer over the current view. No-op when path is falsy. */
+export function openFileViewer(path, title) {
+  if (!path) return;
+  setState({ fileViewer: { path, title: title || path.split('/').pop() } });
+}
+
+/** Close the global file-viewer drawer. */
+export function closeFileViewer() {
+  setState({ fileViewer: null });
+}
+
+/** Open the global decision-detail drawer. No-op when decision is falsy. */
+export function openDecisionViewer(decision) {
+  if (!decision) return;
+  setState({ decisionViewer: decision });
+}
+
+/** Close the global decision-detail drawer. */
+export function closeDecisionViewer() {
+  setState({ decisionViewer: null });
+}
+
+/** Open the global blocker-detail drawer. No-op when blocker is falsy. */
+export function openBlockerViewer(blocker) {
+  if (!blocker) return;
+  setState({ blockerViewer: blocker });
+}
+
+/** Close the global blocker-detail drawer. */
+export function closeBlockerViewer() {
+  setState({ blockerViewer: null });
+}
+
 /** Return a shallow copy of the current state. */
 export function getState() {
   return { ..._state };