@hanzlaa/rcode 4.1.2 → 4.3.0

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

@@ -12,18 +12,37 @@
 
 import { html, useState, useEffect } from '../preact.js';
 import { useStore } from '../store.js';
-import { stopSession, openTermPanel, runCommandFromUI, ALLOWED_COMMANDS, isSessionRunning } from '../orchestrator.js';
-import { orchElapsed } from '../util.js';
+import { stopSession, openTermPanel, ALLOWED_COMMANDS, isSessionRunning, mergeSessionsAndHistory } from '../orchestrator.js';
+import { openRunnerPicker } from '../components/RunnerPicker.js';
+import { RejectDialog } from '../components/RejectDialog.js';
+import { orchElapsed, humanDate } from '../util.js';
 import { Icon } from '../icons-client.js';
 
 // ── Session card ──────────────────────────────────────────────────────────────
 
+// Tooltip text per session status — shown on the colored status dot.
+const DOT_TITLES = {
+  running: 'Running — output streaming',
+  blocked: 'Blocked — waiting for your input',
+  done:    'Done — exited cleanly',
+  exited:  'Exited',
+  stopped: 'Stopped',
+  error:   'Error',
+};
+
 function OrchCard({ session: s }) {
-  const running = s.status === 'running';
-  const waiting = !!s.waiting;
+  const blocked = s.status === 'blocked';
+  // 'blocked' is a live PTY (server-side classification of running) — keep
+  // the Stop button available for it.
+  const running = s.status === 'running' || blocked;
+  const waiting = blocked || !!s.waiting;
+  const [showReject, setShowReject] = useState(false);
   const cardCls = 'orch-card orch-' + s.status + (waiting ? ' orch-waiting' : '');
-  const badge   = waiting ? html`<${Icon} name="hourglass" size=${12}/> waiting for input` : s.status;
-  const dotCls  = 'term-status-dot ' + (waiting ? 'waiting' : s.status);
+  const badge   = blocked
+    ? html`<${Icon} name="alert-triangle" size=${12}/> blocked — needs input`
+    : waiting ? html`<${Icon} name="hourglass" size=${12}/> waiting for input` : s.status;
+  const dotCls  = 'term-status-dot ' + (blocked ? 'blocked' : waiting ? 'waiting' : s.status);
+  const dotTitle = DOT_TITLES[s.status] || s.status;
 
   function handleTerminal(e) {
     e.stopPropagation();
@@ -38,8 +57,13 @@ function OrchCard({ session: s }) {
   return html`
     <div class=${cardCls}>
       <div class="orch-card-head">
-        <span class=${dotCls}></span>
+        <span class=${dotCls} title=${dotTitle}></span>
         <span class="orch-card-id">${s.storyId}</span>
+        ${s.runner ? html`
+          <span class="runner-badge" title=${'Launched with ' + s.runner + (s.model ? ' (' + s.model + ')' : '')}>
+            ${s.runner}${s.model ? ' · ' + s.model : ''}
+          </span>
+        ` : null}
         <span class="orch-card-badge">${badge}</span>
       </div>
       <div class="orch-card-cmd">${s.cmd || ''}</div>
@@ -49,6 +73,11 @@ function OrchCard({ session: s }) {
         ${' · '}<${Icon} name="eye" size=${12}/> ${s.clients || 0}
         ${s.pid ? html` · pid ${s.pid}` : null}
       </div>
+      ${s.rejection ? html`
+        <div class="orch-card-rejection">
+          Rejected: ${s.rejection.reason}
+        </div>
+      ` : null}
       <div class="orch-card-actions">
         <button class="term-run-btn outline" onClick=${handleTerminal}>
           <${Icon} name="monitor" size=${14}/> Terminal
@@ -56,7 +85,13 @@ function OrchCard({ session: s }) {
         ${running ? html`
           <button class="term-run-btn danger" onClick=${handleStop}>■ Stop</button>
         ` : null}
+        ${waiting ? html`
+          <button class="term-run-btn danger" onClick=${e => { e.stopPropagation(); setShowReject(true); }}>
+            <${Icon} name="alert-triangle" size=${14}/> Reject
+          </button>
+        ` : null}
       </div>
+      ${showReject ? html`<${RejectDialog} session=${s} onClose=${() => setShowReject(false)}/>` : null}
     </div>
   `;
 }
@@ -65,7 +100,11 @@ function OrchCard({ session: s }) {
 
 function sortSessions(sessions) {
   return [...sessions].sort((a, b) => {
-    // Waiting-for-input first (needs attention)
+    // Blocked-on-input first (needs immediate attention)
+    if ((a.status === 'blocked') !== (b.status === 'blocked')) {
+      return a.status === 'blocked' ? -1 : 1;
+    }
+    // Then idle-waiting
     if (!!a.waiting !== !!b.waiting) return a.waiting ? -1 : 1;
     // Then running
     if ((a.status === 'running') !== (b.status === 'running')) {
@@ -84,14 +123,16 @@ function sortSessions(sessions) {
  * all session and terminal state via runCommandFromUI → runSession.
  */
 function CommandRunner() {
-  useStore(); // subscribe to store updates so isSessionRunning() re-evaluates on each poll
+  // Subscribe to store updates so isSessionRunning() + orchOnline re-evaluate on each poll.
+  const { orchOnline } = useStore();
   const [selected, setSelected] = useState(ALLOWED_COMMANDS[0]?.cmd || '');
   const [busy, setBusy] = useState(false);
 
   const slug      = selected ? selected.replace(/^\//, '').replace(/\//g, '-') : '';
   const sessionId = slug ? 'cmd-' + slug : '';
   const isRunning = sessionId ? isSessionRunning(sessionId) : false;
-  const disabled  = busy || isRunning;
+  const orchDown  = orchOnline === false;
+  const disabled  = busy || isRunning || orchDown;
 
   // Reset busy 2 s after a Run click — the terminal panel is now open and the
   // session is streaming. Managed via useEffect so the timer is cancelled if
@@ -102,10 +143,10 @@ function CommandRunner() {
     return () => clearTimeout(t);
   }, [busy]);
 
-  function handleRun() {
+  function handleRun(e) {
     if (!selected || disabled) return;
     setBusy(true);
-    runCommandFromUI(selected);
+    openRunnerPicker(e.currentTarget, { kind: 'command', cmd: selected, title: selected });
   }
 
   return html`
@@ -132,12 +173,96 @@ function CommandRunner() {
         </button>
       </div>
       <div class="cmd-runner-hint">
-        ${isRunning
-          ? html`Command is running — output is streaming to the terminal panel.`
-          : busy
-            ? html`Starting — the terminal panel will open shortly.`
-            : html`Select a command and press Run. Output streams live to the terminal panel.`}
+        ${orchDown
+          ? html`Orchestrator is unreachable — commands cannot run until it is back.`
+          : isRunning
+            ? html`Command is running — output is streaming to the terminal panel.`
+            : busy
+              ? html`Starting — the terminal panel will open shortly.`
+              : html`Select a command and press Run. Output streams live to the terminal panel.`}
+      </div>
+    </div>
+  `;
+}
+
+// ── Run history panel ─────────────────────────────────────────────────────────
+
+function durationLabel(ms) {
+  if (!ms || !isFinite(ms) || ms <= 0) return '—';
+  if (ms < 60000) return Math.round(ms / 1000) + 's';
+  if (ms < 3600000) return Math.floor(ms / 60000) + 'm ' + Math.round((ms % 60000) / 1000) + 's';
+  return Math.floor(ms / 3600000) + 'h ' + Math.floor((ms % 3600000) / 60000) + 'm';
+}
+
+function HistoryRow({ run }) {
+  return html`
+    <div class="hist-row" key=${run.storyId}>
+      <span class=${'term-status-dot ' + run.status}></span>
+      <span class="hist-row-id">${run.storyId}</span>
+      <span class="hist-row-cmd">${run.cmd}</span>
+      <span class="hist-row-duration"><${Icon} name="clock" size=${12}/> ${durationLabel(run.durationMs)}</span>
+      <span class="hist-row-status">${run.status}</span>
+    </div>
+  `;
+}
+
+const STATUS_ORDER = ['done', 'exited', 'stopped', 'error'];
+
+function HistoryPanel() {
+  const { activeSessions, history } = useStore();
+  const merged = mergeSessionsAndHistory(activeSessions, history);
+  // 'blocked' is a live session (waiting for input), not an ended run.
+  const ended = merged.filter(r => r.status !== 'running' && r.status !== 'blocked');
+
+  if (ended.length === 0) {
+    return html`
+      <div class="hist-panel">
+        <div class="hist-panel-title">
+          <${Icon} name="history" size=${16}/> Run History
+        </div>
+        <div class="empty">No past runs yet.</div>
+      </div>
+    `;
+  }
+
+  // Group by status (STATUS_ORDER), then within each group by date label
+  const byStatus = new Map();
+  for (const status of STATUS_ORDER) byStatus.set(status, new Map());
+
+  for (const run of ended) {
+    const bucket = byStatus.get(run.status) || byStatus.get('error');
+    const dateKey = humanDate(run.endTime || run.startTime) || 'Unknown date';
+    if (!bucket.has(dateKey)) bucket.set(dateKey, []);
+    bucket.get(dateKey).push(run);
+  }
+
+  // Sort runs within each date group: newest first
+  for (const dateMap of byStatus.values()) {
+    for (const runs of dateMap.values()) {
+      runs.sort((a, b) => String(b.endTime || b.startTime || '').localeCompare(String(a.endTime || a.startTime || '')));
+    }
+  }
+
+  return html`
+    <div class="hist-panel">
+      <div class="hist-panel-title">
+        <${Icon} name="history" size=${16}/> Run History
       </div>
+      ${STATUS_ORDER.map(status => {
+        const dateMap = byStatus.get(status);
+        if (!dateMap || dateMap.size === 0) return null;
+        return html`
+          <div class="hist-group" key=${status}>
+            <div class="hist-group-title">${status}</div>
+            ${[...dateMap.entries()].map(([dateKey, runs]) => html`
+              <div key=${dateKey}>
+                <div class="hist-date">${dateKey}</div>
+                ${runs.map(run => html`<${HistoryRow} key=${run.storyId} run=${run}/>`)}
+              </div>
+            `)}
+          </div>
+        `;
+      })}
     </div>
   `;
 }
@@ -145,8 +270,9 @@ function CommandRunner() {
 // ── Root view ─────────────────────────────────────────────────────────────────
 
 export function OrchestrationView() {
-  const { activeSessions } = useStore();
+  const { activeSessions, orchOnline } = useStore();
   const sessions = sortSessions(activeSessions || []);
+  const orchDown = orchOnline === false;
 
   return html`
     <div class="view active" id="view-orchestration">
@@ -155,11 +281,18 @@ export function OrchestrationView() {
         Live agent sessions — run, watch, communicate, stop.
       </div>
 
+      ${orchDown ? html`
+        <div class="orch-down-banner" role="alert">
+          ⚠ Orchestrator unreachable (port 7718) — Run buttons are disabled.
+          Restart the dashboard, or set ORCH_PORT if the port is in use.
+        </div>
+      ` : null}
+
       <${CommandRunner}/>
 
       ${sessions.length === 0 ? html`
         <div class="empty">
-          No active execution.
+          ${orchDown ? 'Session status unavailable while the orchestrator is down.' : 'No active execution.'}
           <div class="empty-action">
             Use the Command Runner above, or run <code>/rcode-execute</code> to
             start a phase or sprint.
@@ -172,6 +305,8 @@ export function OrchestrationView() {
           `)}
         </div>
       `}
+
+      <${HistoryPanel}/>
     </div>
   `;
 }

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

@@ -1,261 +1,69 @@
 /**
- * OverviewView — Preact component.
+ * OverviewView — Preact component (dashboard redesign).
  *
- * Ports renderOverview() from client-render.js to a component tree.
- * Reads state via useStore(). Keeps every existing CSS class.
+ * Retargeted onto the mockup: a 12-col, 3-row card grid that composes the nine
+ * dashboard slot components. The components are empty placeholders for now —
+ * other agents fill each one with real content. Layout follows
+ * .planning/campaign/MOCKUP-SPEC.md:
+ *   Row 1: ProgressDonut · CurrentPhase · Timeline
+ *   Row 2: CompletedTasks · InProgress · Blockers
+ *   Row 3: RecentDecisions · ProgressTimeline
+ *
+ * State is read via useStore() and flows down to the slot components as they
+ * are filled in; none of them fetch (see DATA-CONTRACT.md).
+ *
+ * First run: when the server scanned and found no .rcode directory
+ * (store.initialized === false) the card grid is replaced by an honest
+ * get-started state pointing at /rcode-init — no fabricated dashboard.
  */
 
 import { html } from '../preact.js';
 import { useStore } from '../store.js';
-import { pct, humanDate, allSprints, allTasks, chip, sprintHints as getSprintHints } from '../util.js';
-import { ProgressBar, CmdHints, Chip } from '../components/shared.js';
-import { Icon } from '../icons-client.js';
-
-// ---- OverviewView ----
+import { ProgressDonut } from '../components/dashboard/ProgressDonut.js';
+import { CurrentPhase } from '../components/dashboard/CurrentPhase.js';
+import { Timeline } from '../components/dashboard/Timeline.js';
+import { CompletedTasks } from '../components/dashboard/CompletedTasks.js';
+import { InProgress } from '../components/dashboard/InProgress.js';
+import { Blockers } from '../components/dashboard/Blockers.js';
+import { RecentDecisions } from '../components/dashboard/RecentDecisions.js';
+import { ProgressTimeline } from '../components/dashboard/ProgressTimeline.js';
 
 export function OverviewView() {
+  // Subscribe to the store so this view re-renders on state changes; the slot
+  // components will read their slices from it as they are built out.
   const S = useStore();
-  const sprints = allSprints(S.phases);
-  const curSprint = sprints.find(s => s.id === S.currentSprint) || null;
-
-  // Velocity sparkline data
-  const completedSprints = sprints.filter(s => s.velocity_actual != null);
-  const showVelocity = completedSprints.length > 1;
-
-  // Chains & workstreams
-  const chains = S.chains || [];
-  const workstreams = S.workstreams || [];
-
-  // Cmd hints
-  const baseHints = [
-    ['/rcode-next',   'What should I do next?'],
-    ['/rcode-status', 'Quick project status'],
-    ['/rcode-council','Ask the team a question'],
-  ];
-  const sprintHints = getSprintHints(curSprint);
-  let hints = [...sprintHints, ...baseHints];
-  if (S.pendingHandoff) {
-    hints = [['/rcode-resume-work','Resume from the pending handoff'], ...hints];
-  }
 
-  // At-a-glance status tiles — phase, sprint, blocked, last execution.
-  function StatusSummary() {
-    const curPhase = (S.phases || []).find(
-      p => String(p.id) === String(S.currentPhase),
-    ) || null;
-    const blockedCount = allTasks(S.phases).filter(t => t.status === 'blocked').length;
-    const lastExec = S.last_session
-      ? humanDate(S.last_session.date || S.last_session.timestamp)
-      : null;
+  if (S.initialized === false) {
     return html`
-      <div class="stat">
-        <div class="label">Current Phase</div>
-        <div class="value">${curPhase ? 'P' + curPhase.id : '—'}</div>
-        <div class="sub">
-          ${curPhase ? html`${curPhase.name} · <${Chip} status=${curPhase.status}/>` : 'No phase set'}
+      <div id="view-overview" class="view active">
+        <div class="firstrun">
+          <div class="firstrun-badge" aria-hidden="true">r</div>
+          <h2 class="firstrun-title">No project initialized</h2>
+          <p class="firstrun-sub">
+            This directory has no <code>.rcode</code> project yet, so there is
+            no data to show. Initialize one to start tracking phases, sprints,
+            and decisions.
+          </p>
+          <code class="firstrun-cmd">/rcode-init</code>
         </div>
       </div>
-      <div class="stat">
-        <div class="label">Active Sprint</div>
-        <div class="value">${curSprint ? curSprint.id : '—'}</div>
-        <div class="sub">${curSprint ? (curSprint.goal || curSprint.status || 'in progress') : 'No active sprint'}</div>
-      </div>
-      <div class="stat" style=${blockedCount ? 'border-left-color:var(--red,#eb5757)' : ''}>
-        <div class="label">Blocked Tasks</div>
-        <div class="value" style=${blockedCount ? 'color:var(--red,#eb5757)' : ''}>${blockedCount}</div>
-        <div class="sub">${blockedCount ? 'needs attention' : 'all clear'}</div>
-      </div>
-      <div class="stat">
-        <div class="label">Last Execution</div>
-        <div class="value" style="font-size:var(--text-lg,1rem);">${lastExec || '—'}</div>
-        <div class="sub">${lastExec ? 'most recent session' : 'no sessions yet'}</div>
-      </div>
-    `;
-  }
-
-  // Current sprint progress
-  function SprintProgress() {
-    if (!curSprint) return null;
-    const sts = curSprint.stories || [];
-    const d = sts.filter(t => t.status === 'done' || t.status === 'completed').length;
-    return html`
-      <section>
-        <h2 class="section-icon"><${Icon} name="zap" size=${16}/> Current Sprint — ${curSprint.id}</h2>
-        <div class="body">
-          <div style="margin-bottom:8px;font-size:var(--text-sm);color:var(--text-secondary);">
-            ${curSprint.goal || ''}
-          </div>
-          <div style="display:flex;align-items:center;gap:var(--space-3);">
-            <div style="flex:1;"><${ProgressBar} done=${d} total=${sts.length}/></div>
-            <span style="font-size:var(--text-sm);font-weight:600;">
-              ${d}/${sts.length} (${pct(d, sts.length)})
-            </span>
-          </div>
-        </div>
-      </section>
-    `;
-  }
-
-  // Velocity sparkline (inline SVG, same as client-render.js:267-272)
-  function VelocitySpark() {
-    if (!showVelocity) return null;
-    const vals = completedSprints.map(s => s.velocity_actual);
-    const max = Math.max(...vals, 1);
-    const w = 200, h = 40, step = w / (vals.length - 1);
-    const points = vals.map((v, i) => (i * step) + ',' + (h - (v / max) * h)).join(' ');
-    return html`
-      <div class="stat">
-        <div class="label">Sprint Velocity</div>
-        <svg width=${w} height=${h + 4} style="margin-top:8px;">
-          <polyline points=${points} fill="none" stroke="var(--accent-blue)" stroke-width="2"/>
-        </svg>
-        <div class="sub">Last ${vals.length} sprints</div>
-      </div>
-    `;
-  }
-
-  // Council sessions
-  function CouncilSessions() {
-    if (!Array.isArray(S.council_sessions) || !S.council_sessions.length) return null;
-    return html`
-      <section>
-        <h2 class="section-icon"><${Icon} name="building" size=${16}/> Council Sessions</h2>
-        <div class="body">
-          <div class="phase-list">
-            ${S.council_sessions.slice(-5).reverse().map((cs, i) => html`
-              <div key=${i} class="item">
-                <div class="item-title">${cs.topic || cs.title || 'Session'}</div>
-                <div class="item-meta">
-                  ${cs.date ? humanDate(cs.date) : ''}
-                  ${cs.participants ? ' · ' + cs.participants.join(', ') : ''}
-                </div>
-              </div>
-            `)}
-          </div>
-        </div>
-      </section>
-    `;
-  }
-
-  // Chains & workstreams
-  function ChainsSection() {
-    if (!chains.length && !workstreams.length) return null;
-    const { cls, label } = chip('active');
-    return html`
-      <section>
-        <h2 class="section-icon"><${Icon} name="link" size=${16}/> Chains &amp; Workstreams</h2>
-        <div class="body">
-          ${chains.length ? html`
-            <div style="margin-bottom:var(--space-4);">
-              <strong>Chains</strong>
-              <div class="phase-list" style="margin-top:var(--space-2);">
-                ${chains.map((c, i) => html`
-                  <div key=${i} class="item">
-                    <div class="item-title">${c.name || c.id || 'Chain'}</div>
-                  </div>
-                `)}
-              </div>
-            </div>
-          ` : null}
-          ${workstreams.length ? html`
-            <div>
-              <strong>Workstreams</strong>
-              <div class="phase-list" style="margin-top:var(--space-2);">
-                ${workstreams.map((w, i) => {
-                  const wChip = chip(w.status || 'active');
-                  return html`
-                    <div key=${i} class="item">
-                      <div class="item-title">
-                        ${w.name || w.id || 'Workstream'}
-                        ${' '}<span class=${'status-chip ' + wChip.cls}>● ${wChip.label}</span>
-                      </div>
-                    </div>
-                  `;
-                })}
-              </div>
-            </div>
-          ` : null}
-        </div>
-      </section>
-    `;
-  }
-
-  // Pending handoff banner
-  function HandoffBanner() {
-    if (!S.pendingHandoff) return null;
-    const ho = S.pendingHandoff;
-    const when = ho.ts ? humanDate(ho.ts) : '';
-    const summary = ho.summary ? ' — ' + String(ho.summary).slice(0, 120) : '';
-    const where = ho.sprint ? ' [sprint ' + ho.sprint + ']' : ho.phase ? ' [phase ' + ho.phase + ']' : '';
-    return html`
-      <section style="border-left:4px solid var(--accent-orange,#f59e0b);padding-left:var(--space-3);">
-        <h2 class="section-icon"><${Icon} name="alert-triangle" size=${16}/> Pending Handoff</h2>
-        <div class="body">
-          <div>${when}${where}${summary}</div>
-          ${ho.resume_hint ? html`
-            <div style="margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);">
-              ${ho.resume_hint}
-            </div>
-          ` : null}
-          <div style="margin-top:var(--space-3);font-size:var(--text-sm);">
-            <code>/rcode-resume-work</code>
-          </div>
-        </div>
-      </section>
-    `;
-  }
-
-  // Memory bank summary
-  function MemorySection() {
-    if (!S.memoryBank || !S.memoryBank.active) return null;
-    const m = S.memoryBank.active;
-    return html`
-      <section
-        class="item-clickable"
-        style="cursor:pointer;"
-        onClick=${() => { location.hash = 'memory'; }}
-      >
-        <h2 class="section-icon"><${Icon} name="brain" size=${16}/> Memory Bank →</h2>
-        <div class="body">
-          <div class="attr-grid">
-            <div class="attr-item">
-              <span class="attr-label">active.md</span>
-              <span class="attr-value">${m.lines} lines · ${Math.round(m.bytes / 1024 * 10) / 10} KB</span>
-            </div>
-            <div class="attr-item">
-              <span class="attr-label">Updated</span>
-              <span class="attr-value">${humanDate(m.updated)}</span>
-            </div>
-          </div>
-        </div>
-      </section>
-    `;
-  }
-
-  // Last session line
-  function LastSession() {
-    if (!S.last_session) return null;
-    const ls = S.last_session;
-    return html`
-      <span style="color:var(--text-muted);font-size:var(--text-xs);margin-left:var(--space-3);">
-        Last session: ${humanDate(ls.date || ls.timestamp) || '—'}
-      </span>
     `;
   }
 
   return html`
     <div id="view-overview" class="view active">
-      <div class="stats">
-        <${StatusSummary}/>
-        <${VelocitySpark}/>
+      <div class="dash-grid">
+        <div class="col-4"><${ProgressDonut}/></div>
+        <div class="col-4"><${CurrentPhase}/></div>
+        <div class="col-4"><${Timeline}/></div>
+
+        <div class="col-4"><${CompletedTasks}/></div>
+        <div class="col-4"><${InProgress}/></div>
+        <div class="col-4"><${Blockers}/></div>
+
+        <div class="col-6"><${RecentDecisions}/></div>
+        <div class="col-6"><${ProgressTimeline}/></div>
       </div>
-      <${HandoffBanner}/>
-      <${SprintProgress}/>
-      <${MemorySection}/>
-      <${CouncilSessions}/>
-      <${ChainsSection}/>
-      <${LastSession}/>
-      <${CmdHints} hints=${hints}/>
     </div>
   `;
 }

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

@@ -9,12 +9,15 @@
 
 import { html, useState } from '../preact.js';
 import { useStore } from '../store.js';
-import { pct, humanDate, phaseHints } from '../util.js';
+import { pct, humanDate, phaseHints, chip } from '../util.js';
 import {
   Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, PhaseCard,
 } from '../components/shared.js';
-import { runAndOpenTerm, openTermPanel, runningInPhase } from '../orchestrator.js';
+import { openTermPanel, runningInPhase } from '../orchestrator.js';
+import { openRunnerPicker } from '../components/RunnerPicker.js';
 import { Icon } from '../icons-client.js';
+import { StatusSummaryBar } from '../components/StatusSummaryBar.js';
+import { FilterChips } from '../components/FilterChips.js';
 
 function AttrItem({ label, value }) {
   return html`
@@ -60,7 +63,9 @@ function PhaseDetail({ phase: p, S }) {
 
   function handleRun(e) {
     e.stopPropagation();
-    runAndOpenTerm('phase-' + p.id, '/rcode-execute ' + p.id, 'Phase ' + p.id);
+    openRunnerPicker(e.currentTarget, {
+      kind: 'session', storyId: 'phase-' + p.id, cmd: '/rcode-execute ' + p.id, title: 'Phase ' + p.id,
+    });
   }
   function handleTerm(e) {
     e.stopPropagation();
@@ -117,7 +122,18 @@ function PhaseDetail({ phase: p, S }) {
   `;
 }
 
-export function PhasesView({ subId }) {
+/**
+ * Map a numeric phase id to its milestone bucket.
+ * M1 = phases 1–19, M2 = 20–33, M3 = 34+.
+ */
+function phaseMilestone(id) {
+  const n = Number(id);
+  if (n <= 19) return 'M1';
+  if (n <= 33) return 'M2';
+  return 'M3';
+}
+
+export function PhasesView({ subId, filters }) {
   const S = useStore();
   const phases = S.phases || [];
   const [filter, setFilter] = useState('');
@@ -141,7 +157,22 @@ export function PhasesView({ subId }) {
     `;
   }
 
-  // List mode
+  // List mode — normalise incoming filter prop
+  const f = filters || { status: '', milestone: '', date: '' };
+
+  // Build option lists for FilterChips
+  const distinctStatus = [...new Set(phases.map(p => chip(p.status).cls))].filter(Boolean);
+  const statusOptions = distinctStatus.map(cls => ({ value: cls, label: cls }));
+  const milestoneOptions = [
+    { value: 'M1', label: 'M1' },
+    { value: 'M2', label: 'M2' },
+    { value: 'M3', label: 'M3' },
+  ];
+  const dateOptions = [
+    { value: 'has-completed', label: 'Completed' },
+    { value: 'no-completed', label: 'In progress' },
+  ];
+
   const allComplete =
     phases.length > 0 &&
     phases.every(ph => ph.status === 'complete' || ph.status === 'completed' || ph.status === 'done');
@@ -157,13 +188,26 @@ export function PhasesView({ subId }) {
   }
 
   const q = filter.toLowerCase();
-  const filtered = q
+  let filtered = q
     ? phases.filter(p => (p.name || '').toLowerCase().includes(q) || String(p.id).includes(q))
     : phases;
 
+  // Apply chip filters
+  if (f.status)    filtered = filtered.filter(p => chip(p.status).cls === f.status);
+  if (f.milestone) filtered = filtered.filter(p => phaseMilestone(p.id) === f.milestone);
+  if (f.date === 'has-completed') filtered = filtered.filter(p => !!p.completed_at);
+  if (f.date === 'no-completed')  filtered = filtered.filter(p => !p.completed_at);
+
   return html`
     <div id="view-phases" class="view active">
       <div class="view-title">Phases</div>
+      <${StatusSummaryBar}/>
+      <${FilterChips}
+        filters=${f}
+        statusOptions=${statusOptions}
+        milestoneOptions=${milestoneOptions}
+        dateOptions=${dateOptions}
+      />
       <div class="filter-bar">
         <input class="filter-input" type="text" placeholder="Filter…"
           value=${filter} onInput=${e => setFilter(e.target.value)}/>