@hanzlaa/rcode 3.4.33 → 3.6.0

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

@@ -0,0 +1,184 @@
+/**
+ * PhasesView — Preact component.
+ *
+ * Ports renderPhases(subId) from client-render.js.
+ * List mode: filter + phase cards.
+ * Detail mode: entity header, attr grid, progress bar, Run/Terminal/View-plan
+ *   buttons, sprint velocity bars, sprint cards, command hints accordion.
+ */
+
+import { html, useState } from '../preact.js';
+import { useStore } from '../store.js';
+import { pct, humanDate, phaseHints } from '../util.js';
+import {
+  Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, PhaseCard,
+} from '../components/shared.js';
+import { runAndOpenTerm, openTermPanel, runningInPhase } from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+function AttrItem({ label, value }) {
+  return html`
+    <div class="attr-item">
+      <span class="attr-label">${label}</span>
+      <span class="attr-value">${value}</span>
+    </div>
+  `;
+}
+
+function VelocityBars({ sprints }) {
+  const sprintsWithVel = sprints.filter(s => s.velocity_actual != null || s.velocity_target != null);
+  if (!sprintsWithVel.length) return null;
+  const maxV = Math.max(
+    ...sprintsWithVel.map(s => Math.max(s.velocity_actual || 0, s.velocity_target || 0)),
+    1,
+  );
+  return html`
+    <div>
+      <div class="view-title" style="margin-top:var(--space-6)">Sprint Velocity</div>
+      <div style="max-width:600px;">
+        ${sprintsWithVel.map(s => html`
+          <div key=${s.id} class="velocity-bar">
+            <div class="velocity-bar-label">S${s.id}</div>
+            <div class="velocity-bar-track">
+              <div class="velocity-bar-fill"
+                style=${'width:' + ((s.velocity_actual || 0) / maxV * 100) + '%;'}></div>
+            </div>
+            <div class="velocity-bar-val">${s.velocity_actual || 0}/${s.velocity_target || '—'}</div>
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+
+function PhaseDetail({ phase: p, S }) {
+  const sps = Array.isArray(p.sprints) ? p.sprints : [];
+  const stories = sps.flatMap(s => (Array.isArray(s.stories) ? s.stories : []));
+  const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
+  const running = runningInPhase(p);
+  const hints = phaseHints(p);
+
+  function handleRun(e) {
+    e.stopPropagation();
+    runAndOpenTerm('phase-' + p.id, '/rihal-execute ' + p.id, 'Phase ' + p.id);
+  }
+  function handleTerm(e) {
+    e.stopPropagation();
+    openTermPanel('phase-' + p.id, 'Phase ' + p.id);
+  }
+  function handleViewPlan(e) {
+    e.stopPropagation();
+    // Navigate to files view — viewPlanFile was a legacy DOM function
+    window.location.hash = 'files';
+  }
+
+  return html`
+    <div>
+      <${Breadcrumb} items=${[{ label: 'All Phases', hash: 'phases' }]}/>
+      <div class="entity-header">
+        <div class="entity-title">
+          <${Icon} name="clipboard-list" size=${18}/> Phase ${p.id} — ${p.name}
+          <${RunningBadge} count=${running}/>
+        </div>
+        <div class="attr-grid">
+          <${AttrItem} label="Status" value=${html`<${Chip} status=${p.status}/>`}/>
+          <${AttrItem} label="Sprints" value=${sps.length}/>
+          <${AttrItem} label="Tasks Done" value=${done + '/' + stories.length}/>
+          <${AttrItem} label="Progress" value=${pct(done, stories.length)}/>
+          ${p.completed_at ? html`<${AttrItem} label="Completed" value=${humanDate(p.completed_at)}/>` : null}
+        </div>
+      </div>
+      <div style="margin-bottom:var(--space-4);">
+        <${ProgressBar} done=${done} total=${stories.length}/>
+      </div>
+      <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>
+      </div>
+      <${VelocityBars} sprints=${sps}/>
+      <div class="view-title" style="margin-top:var(--space-6)">Sprints</div>
+      <div class="phase-list">
+        ${sps.length
+          ? sps.map(s => html`
+              <${SprintCard} key=${s.id}
+                sprint=${Object.assign({}, s, { phaseId: p.id, phaseName: p.name })}
+                S=${S}/>
+            `)
+          : html`
+              <div class="empty">
+                No sprints in this phase yet.
+                <div class="empty-action">Run /rihal-plan to create sprints</div>
+              </div>
+            `}
+      </div>
+      <${CmdHints} hints=${hints}/>
+    </div>
+  `;
+}
+
+export function PhasesView({ subId }) {
+  const S = useStore();
+  const phases = S.phases || [];
+  const [filter, setFilter] = useState('');
+
+  if (subId) {
+    const p = phases.find(
+      ph => String(ph.id) === String(subId) || String(ph.number) === String(subId),
+    );
+    if (!p) {
+      return html`
+        <div id="view-phases" class="view active">
+          <${Breadcrumb} items=${[{ label: 'Phases', hash: 'phases' }]}/>
+          <div class="empty">Phase not found.</div>
+        </div>
+      `;
+    }
+    return html`
+      <div id="view-phases" class="view active">
+        <${PhaseDetail} phase=${p} S=${S}/>
+      </div>
+    `;
+  }
+
+  // List mode
+  const allComplete =
+    phases.length > 0 &&
+    phases.every(ph => ph.status === 'complete' || ph.status === 'completed' || ph.status === 'done');
+  const plHints = [
+    ['/rihal-add-phase', 'Add a new phase'],
+    ['/rihal-stats',     'Project statistics'],
+    ['/rihal-progress',  'Overall progress'],
+  ];
+  if (allComplete) {
+    plHints.push(['/rihal-audit-milestone',    'Audit milestone completion']);
+    plHints.push(['/rihal-complete-milestone', 'Complete and archive milestone']);
+    plHints.push(['/rihal-ship',               'Create PR and ship']);
+  }
+
+  const q = filter.toLowerCase();
+  const filtered = q
+    ? phases.filter(p => p.name.toLowerCase().includes(q) || String(p.id).includes(q))
+    : phases;
+
+  return html`
+    <div id="view-phases" class="view active">
+      <div class="view-title">Phases</div>
+      <div class="filter-bar">
+        <input class="filter-input" type="text" placeholder="Filter…"
+          value=${filter} onInput=${e => setFilter(e.target.value)}/>
+      </div>
+      <div id="phases-inner" class="phase-list">
+        ${filtered.length
+          ? filtered.map(p => html`<${PhaseCard} key=${p.id} phase=${p} S=${S}/>`)
+          : html`
+              <div class="empty">
+                No phases yet.
+                <div class="empty-action">Run /rihal-new-project to start</div>
+              </div>
+            `}
+      </div>
+      <${CmdHints} hints=${plHints}/>
+    </div>
+  `;
+}

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

@@ -0,0 +1,238 @@
+/**
+ * RoadmapView — Preact component.
+ *
+ * Ports renderRoadmap() + filterRoadmap() + toggleNode/toggleAllRoadmap
+ * from client-render.js / client-main.js to a Preact component tree.
+ *
+ * Key differences from legacy:
+ *   - Tree expansion is component useState per node — no DOM style.display hacks.
+ *   - Filter is component useState — no querySelectorAll style.display hacks.
+ *   - Keyboard E/C (expand/collapse-all) fires a CustomEvent on the roadmap tree
+ *     container; PhaseNode and SprintNode listen and update their open state.
+ *     Shortcuts only fire when the Roadmap view is active (view root is mounted).
+ */
+
+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 { Icon } from '../icons-client.js';
+
+/**
+ * Recursive tree node with local expansion state.
+ * expandSignal: { key: number, open: boolean } — when key changes, force open state.
+ */
+function TreeNode({ label, icon, badge, status, children, defaultOpen, onDoubleClick, expandSignal }) {
+  const [open, setOpen] = useState(defaultOpen || false);
+  const toggle = () => setOpen(o => !o);
+
+  useEffect(() => {
+    if (expandSignal && expandSignal.key > 0) setOpen(expandSignal.open);
+  }, [expandSignal && expandSignal.key]);
+
+  return html`
+    <div class="tree-node">
+      <div class="tree-row" onClick=${toggle} onDblClick=${onDoubleClick}>
+        <span class="tree-chevron">${open ? '▼' : '▶'}</span>
+        <span class="tree-icon">${icon}</span>
+        <span class="tree-label">${label}</span>
+        ${status ? html`<${Chip} status=${status}/>` : null}
+        ${badge ? html`<span class="tree-badge">${badge}</span>` : null}
+      </div>
+      ${open ? html`<div class="tree-children">${children}</div>` : null}
+    </div>
+  `;
+}
+
+/** Leaf node (task row — no expand). */
+function TaskLeaf({ task: t }) {
+  const done = t.status === 'done' || t.status === 'completed';
+  return html`
+    <div class="tree-node task-leaf">
+      <div class="tree-row">
+        <span class="tree-icon">${done ? '✓' : '○'}</span>
+        <span class="tree-label" style=${done ? 'opacity:.6;text-decoration:line-through' : ''}>
+          ${t.title}
+        </span>
+        <${Chip} status=${t.status}/>
+        ${t.points ? html`<span class="tree-badge">${t.points}pts</span>` : null}
+      </div>
+    </div>
+  `;
+}
+
+/** Phase row with inline mini progress bar. */
+function PhaseNode({ phase: p, filterQuery, expandSignal }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (expandSignal && expandSignal.key > 0) setOpen(expandSignal.open);
+  }, [expandSignal && expandSignal.key]);
+  const sps = p.sprints || [];
+  const pStories = sps.flatMap(s => s.stories || []);
+  const pDone = pStories.filter(t => t.status === 'done' || t.status === 'completed').length;
+  const pp = pctNum(pDone, pStories.length);
+  const running = runningInPhase(p);
+
+  // Filter: hide this node if query doesn't match phase name
+  if (filterQuery && !p.name.toLowerCase().includes(filterQuery)) return null;
+
+  function handleDblClick(e) {
+    e.stopPropagation();
+    location.hash = 'phases/' + p.id;
+  }
+
+  return html`
+    <div class="tree-node" data-filter-text=${p.name.toLowerCase()}>
+      <div class="tree-row" onClick=${() => setOpen(o => !o)} onDblClick=${handleDblClick}>
+        <span class="tree-chevron">${open ? '▼' : '▶'}</span>
+        <span class="tree-icon"><${Icon} name="clipboard-list" size=${14}/></span>
+        ${sps.length ? html`<${RunBtn} storyId=${'phase-' + p.id} cmd=${'/rihal-execute ' + p.id} label=${'Phase ' + p.id}/>` : null}
+        <span class="tree-label">P${p.id} — ${p.name}</span>
+        <${Chip} status=${p.status}/>
+        <${RunningBadge} count=${running}/>
+        <span style="width:60px;display:inline-block;margin:0 8px;">
+          <div class="progress-bar" style="height:4px;">
+            <div class="progress-bar-fill" style=${'width:' + pp + '%;height:100%;'}></div>
+          </div>
+        </span>
+        <span class="tree-badge">${sps.length} sprints · ${pDone}/${pStories.length}</span>
+      </div>
+      ${open ? html`
+        <div class="tree-children">
+          ${sps.length ? sps.map(s => html`<${SprintNode} key=${s.id} sprint=${s} expandSignal=${expandSignal}/>`) : html`
+            <div style="padding:var(--space-2) var(--space-6);">
+              <div style="color:var(--text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);">
+                No sprints yet — plan this phase:
+              </div>
+              <${CmdHints} hints=${phaseHints(p)}/>
+            </div>
+          `}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
+/** Sprint row inside roadmap. */
+function SprintNode({ sprint: s, expandSignal }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (expandSignal && expandSignal.key > 0) setOpen(expandSignal.open);
+  }, [expandSignal && expandSignal.key]);
+  const sts = s.stories || [];
+  const sDone = sts.filter(t => t.status === 'done' || t.status === 'completed').length;
+
+  return html`
+    <div class="tree-node">
+      <div class="tree-row" onClick=${() => setOpen(o => !o)}>
+        <span class="tree-chevron">${open ? '▼' : '▶'}</span>
+        <span class="tree-icon"><${Icon} name="zap" size=${14}/></span>
+        <${RunBtn} storyId=${'sprint-' + s.id} cmd=${'/rihal-execute-sprint ' + s.id} label=${'Sprint ' + s.id}/>
+        <span class="tree-label">Sprint ${s.id} — ${s.goal || 'No goal'}</span>
+        <${Chip} status=${s.status}/>
+        <span class="tree-badge">${sDone}/${sts.length}</span>
+      </div>
+      ${open ? html`
+        <div class="tree-children">
+          ${sts.length ? sts.map(t => html`<${TaskLeaf} key=${t.id || t.title} task=${t}/>`) : html`
+            <div style="padding:var(--space-2) var(--space-6);">
+              <div style="color:var(--text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);">
+                No tasks yet — add them:
+              </div>
+              <${CmdHints} hints=${sprintHints(s)}/>
+            </div>
+          `}
+        </div>
+      ` : null}
+    </div>
+  `;
+}
+
+export function RoadmapView() {
+  const S = useStore();
+  const phases = S.phases || [];
+  const ms = S.milestone || 'M1';
+  const [filterQuery, setFilterQuery] = useState('');
+  // rootOpen is always true (the milestone root stays expanded)
+  const [rootOpen] = useState(true);
+
+  // expandSignal drives E/C keyboard shortcuts.
+  // { key: number, open: boolean } — incrementing key triggers child useEffects.
+  const [expandSignal, setExpandSignal] = useState({ key: 0, open: false });
+
+  // E = expand all, C = collapse all — only active while this view is mounted.
+  useEffect(() => {
+    function onKeyDown(e) {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      if (e.key === 'e' || e.key === 'E') {
+        setExpandSignal(prev => ({ key: prev.key + 1, open: true }));
+      } else if (e.key === 'c' || e.key === 'C') {
+        setExpandSignal(prev => ({ key: prev.key + 1, open: false }));
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  // Total stats for root badge
+  const totalTasks = phases.flatMap(p => (p.sprints || []).flatMap(s => s.stories || []));
+  const doneTasks = totalTasks.filter(t => t.status === 'done' || t.status === 'completed');
+
+  // Roadmap command hints
+  const allPDone = phases.length > 0 && phases.every(
+    ph => ph.status === 'complete' || ph.status === 'completed' || ph.status === 'done'
+  );
+  const rmHints = [
+    ['/rihal-autonomous',       'Execute all remaining phases (autonomous)'],
+    ['/rihal-audit',            'Audit the project'],
+    ['/rihal-add-phase',        'Add a new phase'],
+    ['/rihal-milestone-summary','View milestone summary'],
+    ['/rihal-new-milestone',    'Start a new milestone'],
+  ];
+  if (allPDone) {
+    rmHints.push(['/rihal-audit-milestone',    'Audit milestone completion']);
+    rmHints.push(['/rihal-complete-milestone', 'Complete and archive milestone']);
+  }
+
+  const q = filterQuery.toLowerCase().trim();
+
+  return html`
+    <div id="view-roadmap" class="view active">
+      <div class="view-title">Roadmap</div>
+      <div class="filter-bar">
+        <input class="filter-input" type="text" placeholder="Filter roadmap…"
+          value=${filterQuery}
+          onInput=${e => setFilterQuery(e.target.value)}/>
+      </div>
+      <div class="tree-container" id="roadmap-tree">
+        <div class="tree-node tree-ms">
+          <div class="tree-row tree-header">
+            <span class="tree-chevron">▼</span>
+            <span class="tree-icon"><${Icon} name="flag" size=${14}/></span>
+            <span class="tree-label">${ms}</span>
+            <span class="tree-badge">
+              ${phases.length} phases · ${doneTasks.length}/${totalTasks.length} tasks
+            </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', '/rihal-autonomous', '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', '/rihal-audit-milestone', 'Audit milestone'); }}>
+                <${Icon} name="clipboard-list" size=${12}/> Audit
+              </button>
+            </span>
+          </div>
+          <div class="tree-children">
+            ${phases.map(p => html`<${PhaseNode} key=${p.id} phase=${p} filterQuery=${q} expandSignal=${expandSignal}/>`)}
+          </div>
+        </div>
+      </div>
+      <${CmdHints} hints=${rmHints}/>
+    </div>
+  `;
+}

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

@@ -0,0 +1,178 @@
+/**
+ * SprintsView — Preact component.
+ *
+ * Ports renderSprints(subId) from client-render.js.
+ * List mode: filter + sprint cards.
+ * Detail mode: breadcrumb chain, entity header, attr grid, progress bar,
+ *   Run/Terminal action bar, task cards, acceptance-criteria section,
+ *   command hints.
+ */
+
+import { html, useState } from '../preact.js';
+import { useStore } from '../store.js';
+import { pct, humanDate, allSprints, sprintHints } from '../util.js';
+import {
+  Chip, ProgressBar, Breadcrumb, CmdHints, RunningBadge, SprintCard, TaskCard,
+} from '../components/shared.js';
+import { runAndOpenTerm, openTermPanel, runningInSprint } from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+function AttrItem({ label, value }) {
+  return html`
+    <div class="attr-item">
+      <span class="attr-label">${label}</span>
+      <span class="attr-value">${value}</span>
+    </div>
+  `;
+}
+
+function SprintDetail({ sprint: s, S }) {
+  const rawStories = Array.isArray(s.stories) ? s.stories : [];
+  const stories = rawStories.map(t =>
+    Object.assign({}, t, {
+      sprintId: s.id,
+      sprintGoal: s.goal || '',
+      phaseId: s.phaseId,
+      phaseName: s.phaseName,
+    }),
+  );
+  const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
+  const running = runningInSprint(s);
+  const hints = sprintHints(s);
+
+  // Acceptance criteria section
+  const storiesWithAc = stories.filter(t => t.acceptance);
+
+  // Breadcrumb includes both "All Sprints" and optional "Phase N" link
+  const breadcrumbItems = [{ label: 'All Sprints', hash: 'sprints' }];
+  if (s.phaseId) breadcrumbItems.push({ label: 'Phase ' + s.phaseId, hash: 'phases/' + s.phaseId });
+
+  function handleRun(e) {
+    e.stopPropagation();
+    runAndOpenTerm('sprint-' + s.id, '/rihal-execute-sprint ' + s.id, 'Sprint ' + s.id);
+  }
+  function handleTerm(e) {
+    e.stopPropagation();
+    openTermPanel('sprint-' + s.id, 'Sprint ' + s.id);
+  }
+
+  return html`
+    <div>
+      <${Breadcrumb} items=${breadcrumbItems}/>
+      <div class="entity-header">
+        <div class="entity-title">
+          <${Icon} name="zap" size=${18}/> Sprint ${s.id}
+          <${RunningBadge} count=${running}/>
+        </div>
+        <div class="attr-grid">
+          <${AttrItem} label="Goal" value=${s.goal || '—'}/>
+          <${AttrItem} label="Status" value=${html`<${Chip} status=${s.status}/>`}/>
+          <${AttrItem} label="Phase" value=${'P' + s.phaseId + (s.phaseName ? ' — ' + s.phaseName : '')}/>
+          <${AttrItem} label="Velocity"
+            value=${(s.velocity_actual != null ? s.velocity_actual : '—') + ' / ' +
+                    (s.velocity_target != null ? s.velocity_target : '—') + ' pts'}/>
+          <${AttrItem} label="Tasks Done" value=${done + '/' + stories.length}/>
+          <${AttrItem} label="Progress" value=${pct(done, stories.length)}/>
+          ${s.started_at ? html`<${AttrItem} label="Started" value=${humanDate(s.started_at)}/>` : null}
+          ${s.completed_at ? html`<${AttrItem} label="Completed" value=${humanDate(s.completed_at)}/>` : null}
+        </div>
+      </div>
+      <div style="margin-bottom:var(--space-4);">
+        <${ProgressBar} done=${done} total=${stories.length}/>
+      </div>
+      <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>
+      </div>
+      <div class="view-title" style="margin-top:var(--space-4)">Tasks</div>
+      <div class="phase-list">
+        ${stories.length
+          ? stories.map(t => html`<${TaskCard} key=${t.id || t.title} task=${t}/>`)
+          : html`
+              <div class="empty">
+                No tasks in this sprint yet.
+                <div class="empty-action">Run /rihal-create-story to add tasks</div>
+              </div>
+            `}
+      </div>
+      ${storiesWithAc.length ? html`
+        <div class="view-title" style="margin-top:var(--space-6)">Acceptance Criteria</div>
+        <div class="phase-list">
+          ${storiesWithAc.map(t => html`
+            <div key=${t.id || t.title} class="item">
+              <div class="item-title">${t.title}</div>
+              <div style="color:var(--text-secondary);font-size:var(--text-sm);margin-top:4px;">
+                ✓ ${t.acceptance}
+              </div>
+            </div>
+          `)}
+        </div>
+      ` : null}
+      <${CmdHints} hints=${hints}/>
+    </div>
+  `;
+}
+
+export function SprintsView({ subId }) {
+  const S = useStore();
+  const sprints = allSprints(S.phases || []);
+  const [filter, setFilter] = useState('');
+
+  if (subId) {
+    const s = sprints.find(sp => String(sp.id) === String(subId));
+    if (!s) {
+      return html`
+        <div id="view-sprints" class="view active">
+          <${Breadcrumb} items=${[{ label: 'All Sprints', hash: 'sprints' }]}/>
+          <div class="empty">Sprint not found.</div>
+        </div>
+      `;
+    }
+    return html`
+      <div id="view-sprints" class="view active">
+        <${SprintDetail} sprint=${s} S=${S}/>
+      </div>
+    `;
+  }
+
+  // List mode
+  const curSp = sprints.find(sp => sp.id === S.currentSprint);
+  const slHints = [
+    ['/rihal-sprint-planning','Plan a new sprint'],
+    ['/rihal-stats',          'Project statistics'],
+  ];
+  if (curSp) {
+    slHints.push(['/rihal-execute',      'Execute current sprint ' + curSp.id]);
+    slHints.push(['/rihal-sprint-status','Status of Sprint ' + curSp.id]);
+  }
+
+  const q = filter.toLowerCase();
+  const filtered = q
+    ? sprints.filter(s =>
+        String(s.id).includes(q) ||
+        (s.goal || '').toLowerCase().includes(q) ||
+        (s.phaseName || '').toLowerCase().includes(q),
+      )
+    : sprints;
+
+  return html`
+    <div id="view-sprints" class="view active">
+      <div class="view-title">Sprints</div>
+      <div class="filter-bar">
+        <input class="filter-input" type="text" placeholder="Filter…"
+          value=${filter} onInput=${e => setFilter(e.target.value)}/>
+      </div>
+      <div id="sprints-inner" class="phase-list">
+        ${filtered.length
+          ? filtered.map(s => html`<${SprintCard} key=${s.id} sprint=${s} S=${S}/>`)
+          : html`
+              <div class="empty">
+                No sprints yet.
+                <div class="empty-action">Run /rihal-plan to create sprints</div>
+              </div>
+            `}
+      </div>
+      <${CmdHints} hints=${slHints}/>
+    </div>
+  `;
+}