@hanzlaa/rcode 4.6.0 → 4.7.0

package/README.md

@@ -23,7 +23,7 @@ pnpm dlx @hanzlaa/rcode install
 [![CI](https://github.com/hanzlahabib/rcode/actions/workflows/test.yml/badge.svg)](https://github.com/hanzlahabib/rcode/actions/workflows/test.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-Status: `@hanzlaa/rcode` v4.4.4 on npm. 45 agents · 117 commands · 129 workflows · **1 runtime dependency**. Test status tracked by CI badge above. Actively dogfooded on real projects every week.
+Status: `@hanzlaa/rcode` v4.7.0 on npm. 45 agents · 117 commands · 129 workflows · **1 runtime dependency**. Test status tracked by CI badge above. Actively dogfooded on real projects every week.
 
 ---
 
@@ -49,7 +49,19 @@ If you're a solo dev or small team using Claude Code (or Cursor, Codex, VS Code)
 
 <p align="center"><img src="brand/hero-org-in-folder.png" alt="rcode is an engineering org in a folder: agents, commands, workflows, and skills as plain markdown" width="760"></p>
 
-Three layers, specialised for software delivery:
+In plain words: **rcode is a folder of instructions your AI already knows how to read.** No new app to install, no server to run, no separate "agent brain" — just files. Your IDE (Claude Code, Cursor, whichever) is already an agent; rcode just hands it a really good playbook and a notebook that never forgets.
+
+```mermaid
+flowchart LR
+    A["You type a command<br/>/rcode-plan"] --> B["rcode's files answer:<br/>what to do, in what order"]
+    B --> C["Your IDE's own agent<br/>does the actual work"]
+    C --> D["Result gets saved to<br/>.rcode/memory/"]
+    D -.->|"next session starts here"| A
+```
+
+That loop — command in, memory out, memory feeds the next command — is the whole idea. Everything else in this repo is detail on top of that loop.
+
+Three layers make it up:
 
 | Layer | What lives here | Example |
 |-------|-----------------|---------|
@@ -63,15 +75,26 @@ Single agent navigates the structure. No LangChain, no AutoGen, no orchestrator
 
 ## Why I built it
 
-I've shipped products solo for years and watched the same failure repeat in every project:
-
-- **Session 1:** Productive — agent helps me design auth, picks Postgres, plans the schema.
-- **Session 5:** Agent has no idea I picked Postgres. Suggests Mongo. We argue. I copy-paste the decision back in.
-- **Session 20:** I'm pasting in 4K tokens of "here's what we decided" every session. The agent never learns. The project file structure isn't enough — decisions live in chat.
+I've shipped products solo for years and watched the same failure repeat in every project. In one sentence: **the AI forgets everything the moment the chat window closes, so I kept re-explaining the same decisions forever.**
+
+```mermaid
+flowchart LR
+    subgraph without["😩 Without rcode"]
+        direction TB
+        w1["Session 1 — pick Postgres"] --> w2["Session 5 — agent forgot,<br/>suggests Mongo, you argue"]
+        w2 --> w3["Session 20 — you're pasting<br/>4K tokens of 'here's what<br/>we decided' every time"]
+    end
+    subgraph with["✅ With rcode"]
+        direction TB
+        r1["Session 1 — pick Postgres"] --> r2["Decision saved once to<br/>.rcode/memory/decisions.md"]
+        r2 --> r3["Session 20 — agent reads it<br/>automatically, no re-explaining"]
+    end
+    without ~~~ with
+```
 
-rcode is the answer I built for myself. **The decision lives in `.rcode/memory/decisions.md`. The agent reads it. Done.**
+That's it. That's the whole pitch. **Write the decision down once, in a file. The agent reads the file. Done.**
 
-Same problem at team scale: onboarding takes 30 minutes of archaeology. Late requirements shift goalposts with no audit trail. MVPs work but can't be revamped because the original "why" is gone. rcode checks the context in, so the next person (or session) starts oriented.
+The same problem shows up at team scale, just wearing a different costume: onboarding a new hire takes 30 minutes of Slack archaeology, a late requirement quietly shifts the goalposts with no record of why, and six months later nobody remembers why the MVP was built the way it was. rcode's fix is the same either way — write the context down where the agent (and the next human) will actually see it.
 
 ---
 
@@ -81,6 +104,7 @@ What you'll feel in week one:
 
 - **No more re-explaining.** Decisions, blockers, conventions live in `.rcode/memory/` — agent reads them at session start automatically (~5K tokens, fully oriented).
 - **Phased delivery without ceremony.** `/rcode-new-project` produces a roadmap with phases → sprints → tasks. `/rcode-plan` produces SPRINT.md files. `/rcode-execute` runs them with atomic commits. No Jira required.
+- **No blank-page starts.** Already know you're building an API, a SaaS product, or a mobile app? `/rcode-from-template api-backend` seeds a real roadmap + requirements doc for that project type — edit it down instead of writing it up from nothing.
 - **Specialist review on tap.** Want a Karpathy-style review of your last commit? `/rcode-review --karpathy`. Want a council debate on a decision? `/rcode-council should I rewrite auth?` — 5 agents answer in parallel, round 2 they challenge each other.
 - **Intent guards.** Run the wrong command and get a one-line redirect, not a useless output.
 - **Health check.** `rcode-tools health` returns JSON — milestone health, state snapshot, project status. Wire it into your dashboard.
@@ -159,12 +183,21 @@ pnpm dlx @hanzlaa/rcode install
 
 ### The full loop
 
+Four commands cover most of a real week of work — decide, plan, build, check in:
+
+```mermaid
+flowchart LR
+    A["🗣️ /rcode-council<br/>should I rewrite auth?"] --> B["📋 /rcode-plan --research<br/>build a rental app"]
+    B --> C["⚙️ /rcode-execute<br/>PLAN.md"]
+    C --> D["📊 /rcode-status<br/>phases · decisions · blockers"]
 ```
-/rcode-council should I rewrite auth?        → 5 agents debate, 2 rounds
-/rcode-plan --research build a rental app    → researcher grounds, sprint-checker verifies
-/rcode-execute .planning/plans/01/PLAN.md    → atomic commits + post-gates
-/rcode-status                                → phases, decisions, blockers, sessions
-```
+
+| Command | What it does |
+|---|---|
+| `/rcode-council should I rewrite auth?` | 5 specialist agents debate it, 2 rounds — you get a decision, not a monologue |
+| `/rcode-plan --research build a rental app` | A researcher grounds the plan in your real codebase, a checker verifies it before you build anything |
+| `/rcode-execute .planning/plans/01/PLAN.md` | Runs the plan as atomic git commits, with pass/fail gates between steps |
+| `/rcode-status` | One glance at phases, decisions, and blockers — no digging through chat history |
 
 Full install flavors and IDE options: [`docs/install.md`](docs/install.md). Step-by-step first project: [`docs/getting-started.md`](docs/getting-started.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzlaa/rcode",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "rcode — the AI team that never forgets. Persistent memory, specialist agents, and slash commands for AI IDEs. Works in Claude Code, Cursor, Gemini, VS Code, and Antigravity.",
   "main": "cli/index.js",
   "bin": {

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

@@ -14,7 +14,9 @@
 
 import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
 import { parseFilters } from '../filter-state.js';
-import { getState, setState, subscribe, registerRefresh } from '../store.js';
+import { getState, setState, subscribe, registerRefresh, closeFileViewer, closeDecisionViewer, closeBlockerViewer } from '../store.js';
+import { FileReader } from './FileReader.js';
+import { DecisionDrawer, BlockerDrawer } from './shared.js';
 import { startSessionsPoll, refreshOrchToken } from '../orchestrator.js';
 import { Sidebar } from './Sidebar.js';
 import { Topbar } from './Topbar.js';
@@ -32,6 +34,7 @@ import { PhasesView } from '../views/PhasesView.js';
 import { SprintsView } from '../views/SprintsView.js';
 import { TasksView } from '../views/TasksView.js';
 import { KanbanView } from '../views/KanbanView.js';
+import { BacklogView } from '../views/BacklogView.js';
 import { FilesView } from '../views/FilesView.js';
 import { AgentsView } from '../views/AgentsView.js';
 import { MemoryView } from '../views/MemoryView.js';
@@ -48,6 +51,7 @@ const PREACT_VIEWS = {
   sprints:       SprintsView,
   tasks:         TasksView,
   kanban:        KanbanView,
+  backlog:       BacklogView,
   files:         FilesView,
   agents:        AgentsView,
   memory:        MemoryView,
@@ -213,6 +217,7 @@ export function App() {
         timeline:  d.timeline  || null,
         tasks:     d.tasks     || null,
         health:    d.health    || null,
+        backlog:   d.backlog   || [],
       });
       if (newState.raw) {
         Object.assign(patch, {
@@ -310,6 +315,15 @@ export function App() {
       <${RunnerPicker} />
       <${RunConfirmDialog} pending=${storeState.runConfirm} />
       <${CommandPalette} open=${paletteOpen} onClose=${() => setPaletteOpen(false)} />
+      ${storeState.fileViewer && html`
+        <${FileReader}
+          path=${storeState.fileViewer.path}
+          title=${storeState.fileViewer.title}
+          onClose=${closeFileViewer}
+        />
+      `}
+      <${DecisionDrawer} decision=${storeState.decisionViewer} onClose=${closeDecisionViewer} />
+      <${BlockerDrawer} blocker=${storeState.blockerViewer} onClose=${closeBlockerViewer} />
     </div>
   `;
 }

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

@@ -171,25 +171,33 @@ function Tooltip({ phase, nodePos, canvasW, canvasH }) {
   `;
 }
 
-/** Wrapped flow row of chips — the honest no-dependencies presentation. */
+/**
+ * Sequence row — the honest no-dependencies presentation. There is nothing
+ * to lay out as a DAG (no edges), so this doesn't pretend to be a graph: a
+ * connected left-to-right chain of small status pills in roadmap order,
+ * joined by arrows. Reads as "the order things ship in", not "broken nodes".
+ */
 function FlowRow({ phases }) {
   return html`
-    <div class="pg-flow">
-      ${phases.map(p => {
+    <div class="pg-hint pg-hint-top">No cross-phase dependencies declared — phases shown in roadmap order.</div>
+    <div class="pg-seq">
+      ${phases.map((p, i) => {
         const kind = statusKind(p.status);
         const sprints = (p.sprints || []).length;
         return html`
-          <button key=${p.id} type="button"
-            class=${'pg-chip pg-' + kind}
-            title=${(p.name || '') + ' — ' + sprints + (sprints === 1 ? ' sprint' : ' sprints')}
-            onClick=${() => goToPhase(p.id)}>
-            <span class="pg-chip-id">P${p.id}</span>
-            <span class="pg-chip-name">${truncate(p.name, 24)}</span>
-          </button>
+          <span key=${p.id} class="pg-seq-item">
+            <button type="button"
+              class=${'pg-seq-chip pg-' + kind}
+              title=${(p.name || '') + ' — ' + sprints + (sprints === 1 ? ' sprint' : ' sprints')}
+              onClick=${() => goToPhase(p.id)}>
+              <span class="pg-seq-id">P${p.id}</span>
+              <span class="pg-seq-name">${truncate(p.name, 22)}</span>
+            </button>
+            ${i < phases.length - 1 ? html`<span class="pg-seq-arrow" aria-hidden="true">›</span>` : null}
+          </span>
         `;
       })}
     </div>
-    <div class="pg-hint">No cross-phase dependencies declared — phases shown in roadmap order.</div>
   `;
 }
 
@@ -280,7 +288,7 @@ export function PhaseGraph({ phases }) {
   return html`
     <details class="pg-panel" open>
       <summary>
-        <${Icon} name="layers" size=${14}/> Dependency Graph
+        <${Icon} name="layers" size=${14}/> ${hasDeps ? 'Dependency Graph' : 'Phases'}
         <span class="pg-count">${list.length} ${list.length === 1 ? 'phase' : 'phases'}</span>
       </summary>
       <div class="pg-legend">

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

@@ -33,6 +33,7 @@ const NAV_LINKS = [
   { view: 'sprints',       icon: 'zap',         label: 'Sprints'       },
   { view: 'tasks',         icon: 'checkSquare', label: 'Tasks'         },
   { view: 'kanban',        icon: 'kanban',      label: 'Kanban'        },
+  { view: 'backlog',       icon: 'hourglass',   label: 'Backlog'       },
   { view: 'decisions',     icon: 'scale',       label: 'Decisions'     },
   { view: 'files',         icon: 'file-text',   label: 'Files'         },
   { view: 'agents',        icon: 'users',       label: 'Agents'        },

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

@@ -92,10 +92,10 @@ export function Topbar({ projectName, updatedAgo, refreshing, onRefresh, onToggl
           class="tb-btn tb-btn--icon"
           type="button"
           onClick=${onToggleTheme}
-          title=${'More — switch to ' + (themeLabel === 'light' ? 'dark' : 'light') + ' theme'}
-          aria-label="More options"
+          title=${'Switch to ' + (themeLabel === 'light' ? 'dark' : 'light') + ' theme'}
+          aria-label="Toggle theme"
         >
-          <span class="tb-kebab">⋯</span>
+          <${Icon} name=${themeLabel === 'light' ? 'moon' : 'sun'} size=${15} />
         </button>
       </div>
     </header>

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

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

@@ -75,7 +75,7 @@ export function allSprints(phases) {
 export function allTasks(phases) {
   return (phases || []).flatMap(p =>
     (p.sprints || []).flatMap(s =>
-      (s.stories || []).map(t => Object.assign({}, t, { sprintId: s.id, phaseId: p.id, phaseName: p.name }))
+      (s.stories || []).map(t => Object.assign({}, t, { sprintId: s.id, phaseId: p.id, phaseName: p.name, file: s.file || null }))
     )
   );
 }
@@ -139,27 +139,6 @@ export function sessionChip(status) {
   return { cls, label: status };
 }
 
-/**
- * Props for a clickable card row that navigates to a hash route.
- * Spread onto a list row (`<li ...${rowLink('tasks')}>`) to make it act like
- * a link: pointer + keyboard activation and an accessible role. Pair with the
- * `ovr-link` class for the hover/focus affordance.
- *
- * @param {string} hash — target hash route without the leading '#'.
- * @returns {object} Preact props (role, tabindex, onClick, onKeyDown).
- */
-export function rowLink(hash) {
-  const go = () => { location.hash = hash; };
-  return {
-    role: 'link',
-    tabindex: 0,
-    onClick: go,
-    onKeyDown: (e) => {
-      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
-    },
-  };
-}
-
 /**
  * Human-readable elapsed time since an ISO timestamp.
  * Ported from _orchElapsed() in client-main.js.

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

@@ -0,0 +1,44 @@
+/**
+ * BacklogView — Preact component.
+ *
+ * Lists phases that haven't started yet (state.dashboard.backlog, derived
+ * server-side in scanner.js from phases with state === 'todo'). Each row
+ * links to that phase's detail page — same navigation PhaseCard/SprintCard
+ * already use elsewhere, no new routing concept.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { pressable } from '../components/shared.js';
+import { Icon } from '../icons-client.js';
+
+export function BacklogView() {
+  const S = useStore();
+  const backlog = S.backlog || [];
+
+  return html`
+    <div id="view-backlog" class="view active">
+      <div class="view-title">Backlog</div>
+      ${backlog.length === 0
+        ? html`
+          <div class="empty">
+            No phases waiting in the backlog.
+            <div class="empty-action">Run /rcode-add-phase to queue up new work</div>
+          </div>
+        `
+        : html`
+          <div class="phase-list">
+            ${backlog.map(p => html`
+              <div key=${p.id} class="item item-clickable"
+                ...${pressable(() => { location.hash = 'phases/' + p.id; })}>
+                <div class="item-title">
+                  <${Icon} name="clipboard-list" size=${16}/> Phase ${p.id} — ${p.name}
+                </div>
+                ${p.range ? html`<div class="item-meta">${p.range}</div>` : null}
+              </div>
+            `)}
+          </div>
+        `}
+    </div>
+  `;
+}

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

@@ -7,9 +7,9 @@
  */
 
 import { html, useState } from '../preact.js';
-import { useStore } from '../store.js';
+import { useStore, openDecisionViewer } from '../store.js';
 import { humanDate } from '../util.js';
-import { CmdHint, CmdHints, showToast } from '../components/shared.js';
+import { CmdHint, CmdHints, showToast, pressable } from '../components/shared.js';
 
 const CMD_HINTS = [
   ['/rcode-council',                   'Convene the council for a new decision'],
@@ -83,8 +83,9 @@ export function DecisionsView() {
                   const rationale = (typeof d === 'object' && d.rationale)
                     ? html`<div style="color:var(--text-secondary);font-size:var(--text-sm);margin-top:4px;">${d.rationale}</div>`
                     : null;
+                  const decisionObj = typeof d === 'object' ? d : { title: d };
                   return html`
-                    <div key=${i} class="item">
+                    <div key=${i} class="item item-clickable" ...${pressable(() => openDecisionViewer(decisionObj))}>
                       <div class="item-title">${title}${dateInfo}</div>
                       <div class="item-meta">${phaseInfo}</div>
                       ${rationale}

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

@@ -10,20 +10,27 @@
  * clears the field so subsequent renders don't re-trigger.
  */
 
-import { html, useState, useEffect } from '../preact.js';
+import { html, useState, useEffect, useMemo } from '../preact.js';
 import { useStore, setState } from '../store.js';
 import { FileReader } from '../components/FileReader.js';
+import { Icon } from '../icons-client.js';
+
+// File-type icon — markdown gets its own glyph, everything else a plain file.
+function fileIcon(label) {
+  return /\.md$/i.test(label || '') ? 'file-text' : 'file';
+}
 
 // ---- File tree components ----
-function FileEntry({ file, extraText, onSelect, isSelected }) {
+function FileEntry({ file, onSelect, isSelected }) {
   return html`
     <div
-      class=${'item item-clickable inline-file-entry' + (isSelected ? ' selected' : '')}
+      class=${'inline-file-entry' + (isSelected ? ' selected' : '')}
       data-path=${file.path}
+      title=${file.path}
       onClick=${() => onSelect(file)}
-      style="padding:var(--space-2) var(--space-3);font-family:'SF Mono',Monaco,Consolas,monospace;font-size:var(--text-xs);"
     >
-      ${file.label}
+      <${Icon} name=${fileIcon(file.label)} size=${13}/>
+      <span class="inline-file-label">${file.label}</span>
     </div>
   `;
 }
@@ -36,31 +43,31 @@ function FileGroup({ group, onSelect, selectedPath, filter }) {
   }
 
   if (group.subGroups) {
+    const subGroupsVisible = group.subGroups
+      .map(sg => ({ sg, visible: sg.files.filter(f => matchesFilter(f, sg.subGroup)) }))
+      .filter(x => x.visible.length);
+    if (!subGroupsVisible.length) return null;
+    const total = subGroupsVisible.reduce((n, x) => n + x.visible.length, 0);
     return html`
-      <div class="inline-file-group" style="margin-bottom:var(--space-3);">
-        <div style="font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;padding:var(--space-1) var(--space-3);">
-          ${group.group}
+      <div class="inline-file-group">
+        <div class="inline-file-group-title">
+          ${group.group} <span class="inline-file-group-count">${total}</span>
         </div>
-        ${group.subGroups.map(sg => {
-          const visible = sg.files.filter(f => matchesFilter(f, sg.subGroup));
-          if (!visible.length) return null;
-          return html`
-            <details class="inline-subgroup" open style="margin-left:var(--space-2);margin-bottom:var(--space-1);">
-              <summary style="font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);cursor:pointer;padding:var(--space-1) var(--space-3);user-select:none;">
-                ${sg.subGroup} <span style="color:var(--text-muted);font-weight:400;">(${visible.length})</span>
-              </summary>
-              ${visible.map(f => html`
-                <${FileEntry}
-                  key=${f.path}
-                  file=${f}
-                  extraText=${sg.subGroup}
-                  onSelect=${onSelect}
-                  isSelected=${selectedPath === f.path}
-                />
-              `)}
-            </details>
-          `;
-        })}
+        ${subGroupsVisible.map(({ sg, visible }) => html`
+          <details class="inline-subgroup" open>
+            <summary class="inline-subgroup-summary">
+              ${sg.subGroup} <span class="inline-file-group-count">${visible.length}</span>
+            </summary>
+            ${visible.map(f => html`
+              <${FileEntry}
+                key=${f.path}
+                file=${f}
+                onSelect=${onSelect}
+                isSelected=${selectedPath === f.path}
+              />
+            `)}
+          </details>
+        `)}
       </div>
     `;
   }
@@ -69,9 +76,9 @@ function FileGroup({ group, onSelect, selectedPath, filter }) {
     const visible = group.files.filter(f => matchesFilter(f, ''));
     if (!visible.length) return null;
     return html`
-      <div class="inline-file-group" style="margin-bottom:var(--space-3);">
-        <div style="font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;padding:var(--space-1) var(--space-3);">
-          ${group.group}
+      <div class="inline-file-group">
+        <div class="inline-file-group-title">
+          ${group.group} <span class="inline-file-group-count">${visible.length}</span>
         </div>
         ${visible.map(f => html`
           <${FileEntry}
@@ -116,9 +123,15 @@ export function FilesView() {
     setState({ requestedFile: null });
   }, [requestedFile]);
 
+  const total = useMemo(() => groups.reduce((n, g) =>
+    n + (g.files ? g.files.length : (g.subGroups || []).reduce((m, sg) => m + sg.files.length, 0)), 0),
+    [groups]);
+
   return html`
     <div class="view active" id="view-files">
-      <div class="view-title">Files</div>
+      <div class="view-title">
+        Files ${total > 0 ? html`<span class="inline-file-total">${total}</span>` : null}
+      </div>
       <div id="file-list-inline">
         <div class="filter-bar">
           <input
@@ -131,9 +144,9 @@ export function FilesView() {
         </div>
         <div id="inline-file-items" class="phase-list">
           ${loading
-            ? html`<div class="empty" style="margin:16px;">Loading…</div>`
+            ? html`<div class="empty">Loading…</div>`
             : groups.length === 0
-              ? html`<div class="empty" style="margin:16px;">No files found.</div>`
+              ? html`<div class="empty">No files found.</div>`
               : groups.map(g => html`
                   <${FileGroup}
                     key=${g.group}

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

@@ -11,6 +11,7 @@ import { html, useState, useCallback } from '../preact.js';
 import { useStore, refresh } from '../store.js';
 import { allTasks, currentPhaseName } from '../util.js';
 import { stopStory, openOrchPanel, openTermPanel, setTaskStatus } from '../orchestrator.js';
+import { openFileViewer } from '../store.js';
 import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { showToast } from '../components/shared.js';
 
@@ -66,6 +67,10 @@ function KanbanCard({ task, col, live, orchDown, onDragStart, onDragEnd }) {
     e.stopPropagation();
     openOrchPanel(sid);
   }
+  function handleViewFile(e) {
+    e.stopPropagation();
+    openFileViewer(task.file, task.title || sid);
+  }
 
   return html`
     <div
@@ -92,6 +97,9 @@ function KanbanCard({ task, col, live, orchDown, onDragStart, onDragEnd }) {
       ` : null}
       ${sid ? html`
         <div class="kanban-card-actions">
+          ${task.file ? html`
+            <button class="kanban-view-btn" title=${'View ' + task.file} onClick=${handleViewFile}>📄 File</button>
+          ` : null}
           ${canRun ? html`
             <button class="kanban-run-btn" disabled=${orchDown}
               title=${orchDown ? 'Orchestrator unreachable' : 'Run ' + sid}

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

@@ -14,6 +14,7 @@ import {
   Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, PhaseCard,
 } from '../components/shared.js';
 import { openTermPanel, runningInPhase } from '../orchestrator.js';
+import { openFileViewer } from '../store.js';
 import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { Icon } from '../icons-client.js';
 import { StatusSummaryBar } from '../components/StatusSummaryBar.js';
@@ -71,10 +72,12 @@ function PhaseDetail({ phase: p, S }) {
     e.stopPropagation();
     openTermPanel('phase-' + p.id, 'Phase ' + p.id);
   }
+  // First sprint that has a resolved SPRINT.md path — the phase-level "view
+  // plan" entry point; each SprintCard below also gets its own precise button.
+  const planFile = (sps.find(s => s.file) || {}).file || null;
   function handleViewPlan(e) {
     e.stopPropagation();
-    // Navigate to files view — viewPlanFile was a legacy DOM function
-    window.location.hash = 'files';
+    openFileViewer(planFile, 'Phase ' + p.id + ' plan');
   }
 
   return html`
@@ -99,7 +102,9 @@ function PhaseDetail({ phase: p, S }) {
       <div class="term-action-bar">
         <button class="term-run-btn" onClick=${handleRun}>▶ Run Phase</button>
         <button class="term-run-btn outline" onClick=${handleTerm}><${Icon} name="monitor" size=${14}/> Terminal</button>
-        <button class="back-btn" onClick=${handleViewPlan}><${Icon} name="file-text" size=${14}/> View plan file →</button>
+        ${planFile ? html`
+          <button class="back-btn" onClick=${handleViewPlan}><${Icon} name="file-text" size=${14}/> View plan file →</button>
+        ` : null}
       </div>
       <${VelocityBars} sprints=${sps}/>
       <div class="view-title" style="margin-top:var(--space-6)">Sprints</div>

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

@@ -15,6 +15,7 @@ import {
   Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, TaskCard,
 } from '../components/shared.js';
 import { openTermPanel, runningInSprint } from '../orchestrator.js';
+import { openFileViewer } from '../store.js';
 import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { Icon } from '../icons-client.js';
 import { StatusSummaryBar } from '../components/StatusSummaryBar.js';
@@ -37,6 +38,7 @@ function SprintDetail({ sprint: s, S }) {
       sprintGoal: s.goal || '',
       phaseId: s.phaseId,
       phaseName: s.phaseName,
+      file: s.file || null,
     }),
   );
   const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
@@ -60,6 +62,10 @@ function SprintDetail({ sprint: s, S }) {
     e.stopPropagation();
     openTermPanel('sprint-' + s.id, 'Sprint ' + s.id);
   }
+  function handleViewPlan(e) {
+    e.stopPropagation();
+    openFileViewer(s.file, 'Sprint ' + s.id);
+  }
 
   return html`
     <div>
@@ -88,6 +94,9 @@ function SprintDetail({ sprint: s, S }) {
       <div class="term-action-bar">
         <button class="term-run-btn" onClick=${handleRun}>▶ Run Sprint</button>
         <button class="term-run-btn outline" onClick=${handleTerm}><${Icon} name="monitor" size=${14}/> Terminal</button>
+        ${s.file ? html`
+          <button class="back-btn" onClick=${handleViewPlan}><${Icon} name="file-text" size=${14}/> View plan file →</button>
+        ` : null}
       </div>
       <div class="view-title" style="margin-top:var(--space-4)">Tasks</div>
       <div class="phase-list">

package/server/lib/html/client.js

@@ -34,6 +34,7 @@ function clientState(state) {
     timeline:         d.timeline     || null,
     tasks:            d.tasks        || null,
     health:           d.health       || null,
+    backlog:          d.backlog      || [],
     // Colliding keys — the contract shapes are supersets, so legacy views and
     // the redesign read the same field. currentPhase becomes the contract object.
     phases:           d.phases       || state.phaseTree || state.raw?.phases || [],

package/server/lib/html/css.js

@@ -997,6 +997,7 @@ section .body {
 .inline-file-entry {
   display: flex;
   align-items: center;
+  gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
   font-family: var(--font-mono);
   font-size: var(--text-xs);
@@ -1009,8 +1010,49 @@ section .body {
 .inline-file-entry:last-child { border-bottom: none; }
 .inline-file-entry:hover { background: var(--bg-hover); color: var(--text-primary); }
 .inline-file-entry.selected { background: rgba(34,182,207,0.1); color: var(--accent-primary); }
+.inline-file-entry svg { flex-shrink: 0; opacity: 0.7; }
+.inline-file-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .inline-file-group { margin-bottom: var(--space-3); }
-.inline-subgroup { padding-left: var(--space-4); }
+.inline-file-group-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  padding: var(--space-1) var(--space-3);
+}
+.inline-file-group-count {
+  font-size: var(--text-2xs);
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.inline-subgroup { padding-left: var(--space-4); margin-bottom: var(--space-1); }
+.inline-subgroup-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: var(--space-1) var(--space-3);
+  user-select: none;
+}
+.inline-file-total {
+  margin-left: var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: 400;
+  color: var(--text-muted);
+}
 .file-path-header {
   font-size: var(--text-2xs);
   color: var(--text-muted);
@@ -2254,6 +2296,27 @@ footer {
               color var(--t-fast) var(--ease),
               border-color var(--t-fast) var(--ease);
 }
+.card-file-btn {
+  float: right;
+  margin-left: var(--space-3);
+  height: 20px;
+  padding: 0 var(--space-3);
+  background: transparent;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-2);
+  color: var(--text-tertiary);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--t-fast) var(--ease),
+              color var(--t-fast) var(--ease),
+              border-color var(--t-fast) var(--ease);
+}
+.card-file-btn:hover {
+  background: var(--accent-blue);
+  border-color: var(--accent-blue);
+  color: #fff;
+}
 .card-run-btn:hover {
   background: var(--accent-green);
   border-color: var(--accent-green);
@@ -2879,7 +2942,6 @@ footer {
 }
 .tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
 .tb-btn--icon { padding: 8px 11px; }
-.tb-kebab { font-size: 16px; line-height: 1; letter-spacing: 1px; }
 
 @media (max-width: 760px) {
   .tb-sub { display: none; }
@@ -3718,7 +3780,6 @@ footer {
 }
 .tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
 .tb-btn--icon { padding: 8px 11px; }
-.tb-kebab { font-size: 16px; line-height: 1; letter-spacing: 1px; }
 
 @media (max-width: 760px) {
   .tb-sub { display: none; }
@@ -5436,21 +5497,32 @@ summary:focus-visible,
 .pg-tip text { font-size: var(--text-2xs); fill: var(--text-secondary); pointer-events: none; }
 .pg-tip .pg-tip-title { fill: var(--text-primary); font-weight: 600; }
 
-/* Flow-row mode — no cross-phase dependencies: wrapped chip sequence. */
-.pg-flow {
+/* Sequence mode — no cross-phase dependencies: a connected chain of small
+   pills in roadmap order (arrows imply order, not a graph edge). */
+.pg-hint-top {
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-3);
+}
+.pg-seq {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-3);
-  padding: 0 var(--space-5) var(--space-2);
+  align-items: center;
+  row-gap: var(--space-2);
+  padding: 0 var(--space-5) var(--space-4);
 }
-.pg-chip {
+.pg-seq-item {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
-  max-width: 220px;
-  padding: var(--space-2) var(--space-3);
-  border: 1.5px solid var(--pg-todo);
-  border-radius: var(--radius-3);
+}
+.pg-seq-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 190px;
+  padding: 3px var(--space-3);
+  border: 1px solid var(--border-default);
+  border-left: 3px solid var(--pg-todo);
+  border-radius: var(--radius-full, 999px);
   background: var(--bg-elev-2);
   color: var(--text-secondary);
   font-size: var(--text-2xs);
@@ -5458,20 +5530,25 @@ summary:focus-visible,
   cursor: pointer;
   transition: background var(--t-fast) var(--ease);
 }
-.pg-chip:hover { background: var(--bg-hover); }
-.pg-chip.pg-done    { border-color: var(--pg-done); }
-.pg-chip.pg-active  { border-color: var(--pg-active); animation: pg-chip-pulse 2s var(--ease) infinite; }
-.pg-chip.pg-blocked { border-color: var(--pg-blocked); }
+.pg-seq-chip:hover { background: var(--bg-hover); }
+.pg-seq-chip.pg-done    { border-left-color: var(--pg-done); }
+.pg-seq-chip.pg-active  { border-left-color: var(--pg-active); animation: pg-chip-pulse 2s var(--ease) infinite; }
+.pg-seq-chip.pg-blocked { border-left-color: var(--pg-blocked); }
 @keyframes pg-chip-pulse {
   0%, 100% { box-shadow: 0 0 0 0 transparent; }
   50%      { box-shadow: 0 0 6px 0 var(--pg-active); }
 }
-.pg-chip-id { font-weight: 600; color: var(--text-primary); }
-.pg-chip-name {
+.pg-seq-id { font-weight: 600; color: var(--text-primary); }
+.pg-seq-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.pg-seq-arrow {
+  padding: 0 var(--space-2);
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
 .pg-hint, .pg-empty {
   padding: 0 var(--space-5) var(--space-3);
   font-size: var(--text-2xs);

package/server/lib/scanner.js

@@ -195,7 +195,13 @@ function buildPhaseTree(projectDir, rawPhases, listCached, overrides) {
         : (p.status === 'active' || p.status === 'in_progress') ? 'in_progress'
         : 'planned';
 
-      return { id: sid, number: num, goal: goal || `Sprint ${num}`, status, stories, dependsOn };
+      // Project-relative path to this sprint's SPRINT.md — same shape as the
+      // sprintFile computed below for roadmap cards, so /api/file?path=...
+      // resolves it identically. Lets task rows (which point at a specific
+      // sprint, not just "latest file in the phase") open the right file.
+      const file = path.join('.planning', 'phases', dir.name, f).split(path.sep).join('/');
+
+      return { id: sid, number: num, goal: goal || `Sprint ${num}`, status, stories, dependsOn, file };
     });
 
     // Derive phase-level depends_on by aggregating sprint-level depends_on entries.
@@ -366,11 +372,15 @@ function buildDashboard(state) {
       const stories = Array.isArray(s.stories) ? s.stories : [];
       for (const st of stories) {
         if (/done|complete/i.test(st.status || '')) {
-          completedTasks.push({ title: st.title || st.id, date: fmtISODate(p.completed || s.completed_at || p.created) });
+          completedTasks.push({
+            title: st.title || st.id,
+            date: fmtISODate(p.completed || s.completed_at || p.created),
+            file: s.file || null,
+          });
         } else if (p.state === 'active') {
           // No per-task progress tracking exists — pct stays null and the UI
           // omits the percent pill rather than inventing a number.
-          inProgressTasks.push({ title: st.title || st.id, pct: null });
+          inProgressTasks.push({ title: st.title || st.id, pct: null, file: s.file || null });
         }
       }
     }
@@ -378,10 +388,10 @@ function buildDashboard(state) {
   // Fallbacks so the cards are never empty when stories are unregistered in state.json.
   if (!completedTasks.length) {
     phases.filter(p => p.state === 'done').slice(-6).forEach(p =>
-      completedTasks.push({ title: p.name, date: fmtISODate(p.completed || p.created) }));
+      completedTasks.push({ title: p.name, date: fmtISODate(p.completed || p.created), file: null }));
   }
   if (!inProgressTasks.length && activePhase && activePhase.state === 'active') {
-    inProgressTasks.push({ title: activePhase.name, pct: null });
+    inProgressTasks.push({ title: activePhase.name, pct: null, file: null });
   }
   const tasks = {
     completed:  completedTasks.slice(-8).reverse(),
@@ -419,6 +429,11 @@ function buildDashboard(state) {
     .sort((a, b) => String(b.date).localeCompare(String(a.date)))
     .slice(0, 8);
 
+  // ---- backlog (phases not yet started — real state.json data, no invented rows) ----
+  const backlog = phases
+    .filter(p => p.state === 'todo')
+    .map(p => ({ id: p.id, name: p.name, range: p.range }));
+
   // ---- project (identity + current user) ----
   // User comes from config, else the real OS account running the server;
   // null when neither exists (UI greets generically, hides the profile row).
@@ -430,7 +445,7 @@ function buildDashboard(state) {
     user: { name: userName, email: cfg.user_email || '' },
   };
 
-  return { project, progress, currentPhase, timeline: { launchDate, onTrack: blockers.length === 0, points }, tasks, blockers, health, decisions, phases };
+  return { project, progress, currentPhase, timeline: { launchDate, onTrack: blockers.length === 0, points }, tasks, blockers, health, decisions, phases, backlog };
 }
 
 function scanStateUncached(rcodeDir) {