@hanzlaa/rcode 4.1.1 → 4.3.0

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

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

@@ -16,7 +16,9 @@ import { html, useState, useEffect } from '../preact.js';
 import { useStore } from '../store.js';
 import { pctNum, sprintHints, phaseHints } from '../util.js';
 import { Chip, ProgressBar, CmdHints, RunBtn, RunningBadge } from '../components/shared.js';
-import { runningInPhase, runAndOpenTerm } from '../orchestrator.js';
+import { runningInPhase } from '../orchestrator.js';
+import { openRunnerPicker } from '../components/RunnerPicker.js';
+import { PhaseGraph } from '../components/PhaseGraph.js';
 import { Icon } from '../icons-client.js';
 
 /**
@@ -202,6 +204,7 @@ export function RoadmapView() {
   return html`
     <div id="view-roadmap" class="view active">
       <div class="view-title">Roadmap</div>
+      <${PhaseGraph} phases=${phases}/>
       <div class="filter-bar">
         <input class="filter-input" type="text" placeholder="Filter roadmap…"
           value=${filterQuery}
@@ -218,11 +221,11 @@ export function RoadmapView() {
             </span>
             <span class="ms-actions">
               <button class="card-run-btn" title="Execute every remaining phase (autonomous run — pauses at checkpoints)"
-                onClick=${e => { e.stopPropagation(); runAndOpenTerm('milestone-execute-all', '/rcode-autonomous', 'Execute all phases'); }}>
+                onClick=${e => { e.stopPropagation(); openRunnerPicker(e.currentTarget, { kind: 'session', storyId: 'milestone-execute-all', cmd: '/rcode-autonomous', title: 'Execute all phases' }); }}>
                 <${Icon} name="play" size=${12}/> Run All
               </button>
               <button class="card-run-btn ms-audit-btn" title="Audit the whole milestone"
-                onClick=${e => { e.stopPropagation(); runAndOpenTerm('milestone-audit', '/rcode-audit-milestone', 'Audit milestone'); }}>
+                onClick=${e => { e.stopPropagation(); openRunnerPicker(e.currentTarget, { kind: 'session', storyId: 'milestone-audit', cmd: '/rcode-audit-milestone', title: 'Audit milestone' }); }}>
                 <${Icon} name="clipboard-list" size=${12}/> Audit
               </button>
             </span>

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

@@ -10,12 +10,15 @@
 
 import { html, useState } from '../preact.js';
 import { useStore } from '../store.js';
-import { pct, humanDate, allSprints, sprintHints } from '../util.js';
+import { pct, humanDate, allSprints, sprintHints, chip } from '../util.js';
 import {
   Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, TaskCard,
 } from '../components/shared.js';
-import { runAndOpenTerm, openTermPanel, runningInSprint } from '../orchestrator.js';
+import { openTermPanel, runningInSprint } 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`
@@ -49,7 +52,9 @@ function SprintDetail({ sprint: s, S }) {
 
   function handleRun(e) {
     e.stopPropagation();
-    runAndOpenTerm('sprint-' + s.id, '/rcode-execute-sprint ' + s.id, 'Sprint ' + s.id);
+    openRunnerPicker(e.currentTarget, {
+      kind: 'session', storyId: 'sprint-' + s.id, cmd: '/rcode-execute-sprint ' + s.id, title: 'Sprint ' + s.id,
+    });
   }
   function handleTerm(e) {
     e.stopPropagation();
@@ -113,7 +118,18 @@ function SprintDetail({ sprint: s, S }) {
   `;
 }
 
-export function SprintsView({ 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 SprintsView({ subId, filters }) {
   const S = useStore();
   const sprints = allSprints(S.phases || []);
   const [filter, setFilter] = useState('');
@@ -135,7 +151,22 @@ export function SprintsView({ subId }) {
     `;
   }
 
-  // List mode
+  // List mode — normalise incoming filter prop
+  const f = filters || { status: '', milestone: '', date: '' };
+
+  // Build option lists for FilterChips
+  const distinctStatus = [...new Set(sprints.map(s => chip(s.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 curSp = sprints.find(sp => sp.id === S.currentSprint);
   const slHints = [
     ['/rcode-sprint-planning','Plan a new sprint'],
@@ -147,7 +178,7 @@ export function SprintsView({ subId }) {
   }
 
   const q = filter.toLowerCase();
-  const filtered = q
+  let filtered = q
     ? sprints.filter(s =>
         String(s.id).includes(q) ||
         (s.goal || '').toLowerCase().includes(q) ||
@@ -155,9 +186,22 @@ export function SprintsView({ subId }) {
       )
     : sprints;
 
+  // Apply chip filters
+  if (f.status)    filtered = filtered.filter(s => chip(s.status).cls === f.status);
+  if (f.milestone) filtered = filtered.filter(s => phaseMilestone(s.phaseId) === f.milestone);
+  if (f.date === 'has-completed') filtered = filtered.filter(s => !!s.completed_at);
+  if (f.date === 'no-completed')  filtered = filtered.filter(s => !s.completed_at);
+
   return html`
     <div id="view-sprints" class="view active">
       <div class="view-title">Sprints</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)}/>

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

@@ -8,7 +8,7 @@
 
 import { html, useState, useMemo } from '../preact.js';
 import { useStore } from '../store.js';
-import { allTasks } from '../util.js';
+import { allTasks, currentPhaseId } from '../util.js';
 import { CmdHints, TaskCard } from '../components/shared.js';
 
 function TaskGrouped({ tasks }) {
@@ -96,8 +96,9 @@ export function TasksView() {
     tHints.push(['/rcode-correct-course','Course-correct blockers']);
   }
 
-  // Empty state
-  const phaseHint = S.currentPhase ? ' ' + S.currentPhase : '';
+  // Empty state — currentPhase is the contract object (or legacy string).
+  const cpId = currentPhaseId(S.currentPhase);
+  const phaseHint = cpId ? ' ' + cpId : '';
 
   return html`
     <div id="view-tasks" class="view active">

package/server/lib/html/client.js

@@ -21,22 +21,39 @@ try { RCODE_VERSION = require('../../../package.json').version || ''; } catch {
 // Fields the client needs from the scanned state. Kept in sync with
 // store.js initial state and the view components that read it.
 function clientState(state) {
+  // Redesign dashboard contract (.planning/campaign/DATA-CONTRACT.md), derived
+  // by scanner.buildDashboard. Always present and correctly typed.
+  const d = state.dashboard || {};
   return JSON.stringify({
-    phases:           state.phaseTree           || state.raw?.phases || [],
+    // First-run signal: false when the scanned .rcode dir does not exist, so
+    // the Overview shows a "run /rcode-init" state instead of empty cards.
+    initialized:      state.exists !== false,
+    // Redesign contract keys (read by the Overview slot components).
+    project:          d.project      || null,
+    progress:         d.progress     || null,
+    timeline:         d.timeline     || null,
+    tasks:            d.tasks        || null,
+    health:           d.health       || null,
+    // 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 || [],
+    decisions:        d.decisions    || state.raw?.decisions || [],
+    blockers:         d.blockers     || state.raw?.blockers  || [],
+    currentPhase:     d.currentPhase || state.raw?.current_phase || null,
+    // Existing fields kept working for the legacy views.
     projectName:      state.projectName         || '',
     projectRoot:      state.projectRoot         || '',
     version:          RCODE_VERSION,
     milestone:        state.raw?.milestone      || '',
-    currentPhase:     state.raw?.current_phase  || null,
     currentSprint:    state.raw?.current_sprint || null,
-    decisions:        state.raw?.decisions      || [],
-    blockers:         state.raw?.blockers       || [],
     council_sessions: state.raw?.council_sessions || [],
     last_session:     state.raw?.last_session   || null,
     chains:           state.raw?.chains         || [],
     workstreams:      state.raw?.workstreams    || [],
     pendingHandoff:   state.pendingHandoff      || null,
     memoryBank:       state.memoryBank          || null,
+    // state.json corruption signal — App.js renders a dismissible banner.
+    rawParseError:    state.rawParseError       || null,
   })
     // Prevent a stray "</script>" inside any string from closing the inline
     // <script> early. Escaping "<" keeps the JSON valid and inert.