@hanzlaa/rcode 4.1.2 → 4.3.1

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

@@ -1,55 +1,102 @@
 /**
- * Topbar component — brand, live dot, updated-ago, action buttons.
+ * Topbar component — redesigned header chrome to match the mockup.
  *
- * Reuses existing CSS classes: header-actions, header-btn, live, hamburger-btn.
+ * Public API is UNCHANGED — App.js still calls:
+ *   <${Topbar} projectName updatedAgo refreshing onRefresh
+ *              onToggleTheme onToggleSidebar themeLabel />
  *
- * Props:
- *   projectName   {string}   — shown in the brand subtitle
- *   updatedAgo    {string}   — text for the "updated N ago" span
- *   onRefresh     {function} — called when Refresh button is clicked
- *   onToggleTheme {function} — called when theme button is clicked
- *   onToggleSidebar {function} — called when hamburger is clicked
- *   themeLabel    {string}   — 'light' or 'dark' — controls which icon the theme button shows
+ * Layout:
+ *   - hamburger (mobile sidebar toggle)
+ *   - greeting: "Welcome back, {user.name}! 👋" + subtitle with project name
+ *   - right group: "Auto-synced {ago}" status dot (click = refresh),
+ *     [Ask rcode] (primary, runs /rcode-next via orchestrator), [Share]
+ *     (copy URL + toast), [...] (more / theme toggle)
+ *
+ * Reads `project { name, user { name } }` from the store; falls back to the
+ * projectName prop. No sample data — without a configured user the greeting
+ * is generic, and without a project name the subtitle stays generic too.
+ * No inline style= attributes — all styling via .tb-* classes in css.js.
  */
 
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
+import { useStore } from '../store.js';
+import { runCommandFromUI } from '../orchestrator.js';
+import { showToast } from './shared.js';
+import { BlockedBell } from './NotifyCenter.js';
+
+/**
+ * Ask rcode — reuse the existing orchestrator command runner (token-guarded
+ * POST /api/run via window.__ORCH_TOKEN__). "/rcode-next" asks rcode for the
+ * suggested next action and streams it into the terminal panel. No new endpoint.
+ */
+function askRcode() {
+  runCommandFromUI('/rcode-next');
+}
+
+/** Share — copy the dashboard URL to the clipboard and confirm via toast. */
+function shareDashboard() {
+  const url = location.href;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(url)
+      .then(() => showToast('Dashboard link copied'))
+      .catch(() => showToast(url));
+  } else {
+    showToast(url);
+  }
+}
 
 export function Topbar({ projectName, updatedAgo, refreshing, onRefresh, onToggleTheme, onToggleSidebar, themeLabel }) {
+  const S = useStore();
+  const project = (S && S.project) || {};
+  const name = project.name || projectName || '';
+  const firstName = (project.user && project.user.name) || '';
+
   return html`
-    <header>
-      <div class="topbar-start-group">
+    <header class="topbar">
+      <button
+        class="hamburger-btn"
+        id="hamburger-btn"
+        onClick=${onToggleSidebar}
+        aria-label="Toggle menu"
+      >
+        <span></span><span></span><span></span>
+      </button>
+
+      <div class="tb-greeting">
+        <h1 class="tb-welcome">${firstName ? 'Welcome back, ' + firstName + '!' : 'Welcome back!'} <span class="tb-wave" aria-hidden="true">👋</span></h1>
+        <p class="tb-sub">${name ? "Here's what's happening with " + name : "Here's what's happening with your project"}</p>
+      </div>
+
+      <div class="tb-actions">
         <button
-          class="hamburger-btn"
-          id="hamburger-btn"
-          onClick=${onToggleSidebar}
-          aria-label="Toggle menu"
+          class=${'tb-synced' + (refreshing ? ' tb-synced--busy' : '')}
+          onClick=${onRefresh}
+          title="Click to refresh"
         >
-          <span></span><span></span><span></span>
+          <span class="tb-dot"></span>
+          ${refreshing ? 'Syncing…' : 'Auto-synced ' + (updatedAgo || 'just now')}
+        </button>
+
+        <${BlockedBell} />
+
+        <button class="tb-btn tb-btn--primary" type="button" onClick=${askRcode} title="Ask rcode for the next action">
+          <${Icon} name="brain" size=${15} /> Ask rcode
+        </button>
+
+        <button class="tb-btn tb-btn--share" type="button" onClick=${shareDashboard} title="Copy dashboard link">
+          <${Icon} name="link" size=${15} /> Share
+        </button>
+
+        <button
+          class="tb-btn tb-btn--icon"
+          type="button"
+          onClick=${onToggleTheme}
+          title=${'More — switch to ' + (themeLabel === 'light' ? 'dark' : 'light') + ' theme'}
+          aria-label="More options"
+        >
+          <span class="tb-kebab">⋯</span>
         </button>
-        <div class="brand">
-          <div class="icon"><${Icon} name="building" size=${16} cls="brand-icon"/></div>
-          <div>
-            <h1>Majlis — The Council</h1>
-            <div class="arabic">مجلس · ${projectName || ''}</div>
-          </div>
-        </div>
-      </div>
-      <div class="header-actions">
-        <span class="live" id="live-dot" title="Live"
-          style=${refreshing ? 'animation-duration:0.7s;background:var(--accent-blue);' : ''}></span>
-        <span id="updated-ago" class="updated-ago">
-          ${refreshing ? '⟳ syncing…' : (updatedAgo || 'just now')}
-        </span>
-        <button class="header-btn" id="refresh-btn" onClick=${onRefresh}>↺ Refresh</button>
-        <!-- icon shows TARGET state (not current): dark→sun means "click to go light"; light→moon means "click to go dark" -->
-        <button class="header-btn" id="theme-btn" onClick=${onToggleTheme} title="Toggle theme"><${Icon} name=${themeLabel === 'light' ? 'moon' : 'sun'} size=${14}/></button>
-        <button class="header-btn" onClick=${() => {
-          navigator.clipboard.writeText(location.href);
-          // Show a toast if available
-          const toast = document.getElementById('toast');
-          if (toast) { toast.textContent = 'URL copied!'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2500); }
-        }} title="Copy URL">⎘ Link</button>
       </div>
     </header>
   `;

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

@@ -0,0 +1,57 @@
+/**
+ * Blockers — Overview redesign, Row 2 Card 3 (Blockers list by severity).
+ *
+ * Reads `blockers[{ title, desc, severity }]` from the store (severity one of
+ * high | medium | low). Each row: warning icon + bold title, a right-aligned
+ * severity pill (High = red, Medium = amber, Low = gray), and a muted one-line
+ * description below. "View all" sits top-right in the card header.
+ * An empty array is the real, good state — rendered as "No blockers 🎉",
+ * never substituted with sample data.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads store only — no fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { rowLink } from '../../util.js';
+
+// Severity → pill label (lowercase enum to human-facing label).
+const SEV_LABEL = { high: 'High', medium: 'Medium', low: 'Low' };
+
+export function Blockers() {
+  const S = useStore();
+  const blockers = Array.isArray(S.blockers) ? S.blockers : [];
+
+  return html`
+    <section class="dash-card">
+      <div class="bk-head">
+        <p class="dash-card-title">Blockers</p>
+        <button class="bk-viewall" type="button"
+          onClick=${() => { location.hash = 'tasks'; }}>View all</button>
+      </div>
+      ${blockers.length === 0
+        ? html`
+          <div class="dash-empty">
+            <span class="dash-empty-emoji" aria-hidden="true">🎉</span>
+            <span>No blockers</span>
+          </div>
+        `
+        : html`
+          <ul class="bk-list">
+            ${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')}>
+                  <span class=${'bk-icon bk-sev-' + sev} aria-hidden="true">⚠</span>
+                  <div class="bk-body">
+                    <p class="bk-title">${b.title}</p>
+                    <p class="bk-desc">${b.desc}</p>
+                  </div>
+                  <span class=${'bk-pill bk-sev-' + sev}>${SEV_LABEL[sev]}</span>
+                </li>
+              `;
+            })}
+          </ul>
+        `}
+    </section>
+  `;
+}

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

@@ -0,0 +1,47 @@
+/**
+ * CompletedTasks — Overview redesign, Row 2 Card 1.
+ *
+ * "Completed Tasks" card with a "View all" link top-right and a list of rows,
+ * each = green check icon + task title + right-aligned date.
+ *
+ * Reads `tasks.completed[{ title, date }]` from the store. Pure — never fetches.
+ * An absent or empty slice renders an honest "No completed tasks yet" state —
+ * never sample data. See .planning/campaign/DATA-CONTRACT.md.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { humanDate } from '../../util.js';
+
+export function CompletedTasks() {
+  const S = useStore();
+  const items = (S.tasks && Array.isArray(S.tasks.completed)) ? S.tasks.completed : [];
+
+  return html`
+    <section class="dash-card ct-card">
+      <div class="ct-head">
+        <p class="dash-card-title">Completed Tasks</p>
+        <button class="ct-viewall" onClick=${() => { location.hash = 'tasks'; }}>
+          View all
+        </button>
+      </div>
+      ${items.length === 0
+        ? html`<p class="dash-card-sub">No completed tasks yet</p>`
+        : html`
+          <ul class="ct-list">
+            ${items.map((t, i) => html`
+              <li class="ct-row" key=${t.title + i}>
+                <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">
+                  <polyline points="20 6 9 17 4 12"/>
+                </svg>
+                <span class="ct-title">${t.title}</span>
+                <span class="ct-date">${humanDate(t.date)}</span>
+              </li>
+            `)}
+          </ul>
+        `}
+    </section>
+  `;
+}

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

@@ -0,0 +1,107 @@
+/**
+ * CurrentPhase — Overview redesign, Row 1 Card 2 (Current Phase stepper).
+ *
+ * Reads `currentPhase { id, name, status, next, startedDaysAgo, currentTask,
+ * milestones[{name,state}] }` from the store (null when the project has no
+ * phases; a legacy plain string from old state.json is tolerated). Renders a
+ * rocket tile, the phase name with a status pill ("Up Next" when nothing is
+ * active and this is the upcoming phase), the in-flight sprint goal as
+ * subtitle, a completion line, then a horizontal milestone stepper built from
+ * the phase's real sprints.
+ *
+ * Honest states: null phase → "No active phase" + command hint; a phase with
+ * no sprints → "No sprints planned yet" instead of a fabricated stepper.
+ * Pure: reads props/store only — never fetches. See DATA-CONTRACT.md.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+
+// Humanise a free-form status into a short pill label.
+function statusLabel(status) {
+  if (!status) return 'Planned';
+  return String(status)
+    .replace(/[_-]+/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+// Subtitle derived from the real phase status — never claims "active" for a
+// phase that isn't. "executing" is what /rcode-execute writes mid-phase.
+function statusSubtitle(status) {
+  const s = String(status || '').toLowerCase();
+  if (/complete|done/.test(s)) return 'Completed phase';
+  if (/active|progress|executing/.test(s)) return 'Active development phase';
+  return 'Not started yet';
+}
+
+export function CurrentPhase() {
+  const S = useStore();
+  const cp = S.currentPhase;
+  // Tolerate the legacy plain-string shape from old state.json snapshots.
+  const phase = cp == null ? null : (typeof cp === 'object' ? cp : { name: String(cp), status: '' });
+
+  if (!phase || !phase.name) {
+    return html`
+      <section class="dash-card cp-card">
+        <p class="dash-card-title">Current Phase</p>
+        <div class="dash-empty">
+          <span>No active phase</span>
+          <code class="dash-empty-hint">/rcode-plan</code>
+        </div>
+      </section>
+    `;
+  }
+
+  const milestones = Array.isArray(phase.milestones) ? phase.milestones : [];
+  const done = milestones.filter(m => m.state === 'done').length;
+  const pct = milestones.length
+    ? Math.round((done / milestones.length) * 100)
+    : null;
+  const days = phase.startedDaysAgo;
+
+  return html`
+    <section class="dash-card cp-card">
+      <p class="dash-card-title">Current Phase</p>
+
+      <div class="cp-head">
+        <div class="cp-rocket" aria-hidden="true">${phase.next ? '🧭' : '🚀'}</div>
+        <div class="cp-headtext">
+          <div class="cp-titlerow">
+            <span class="cp-name">${phase.name}</span>
+            <span class=${'cp-pill' + (phase.next ? ' cp-pill--next' : '')}>
+              ● ${phase.next ? 'Up Next' : statusLabel(phase.status)}
+            </span>
+          </div>
+          <p class="cp-sub">${phase.next
+            ? 'No phase is active yet — this one is next in line'
+            : (phase.currentTask || statusSubtitle(phase.status))}</p>
+        </div>
+      </div>
+
+      ${pct != null ? html`
+        <p class="cp-progress">
+          ${days != null ? html`${days === 0 ? 'Started today' : `Started ${days} day${days === 1 ? '' : 's'} ago`}<span class="cp-dot">•</span>` : null}
+          <span class="cp-pct">${done}/${milestones.length} sprints done<span class="cp-dot">•</span>${pct}% complete</span>
+        </p>
+      ` : null}
+
+      ${milestones.length
+        ? html`
+          <ol class="cp-stepper">
+            ${milestones.map((m, i) => html`
+              <li class=${'cp-step cp-' + (m.state || 'todo')} key=${i}>
+                <span class="cp-node">${m.state === 'done' ? '✓' : ''}</span>
+                <span class="cp-label">${m.name}</span>
+              </li>
+            `)}
+          </ol>
+        `
+        : html`
+          <div class="dash-empty">
+            <span>No sprints planned yet</span>
+            <code class="dash-empty-hint">/rcode-sprint-planning</code>
+          </div>
+        `}
+    </section>
+  `;
+}

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

@@ -0,0 +1,72 @@
+/**
+ * InProgress — Overview redesign, Row 2 Card 2.
+ *
+ * "In Progress" card with a "View all" link top-right and a list of rows.
+ *
+ * Two sources, live first:
+ *   1. Live orchestrator sessions (store.activeSessions, status==='running') —
+ *      pulsing dot, title from storyId (or the command for cmd-* runs),
+ *      elapsed time since startTime; clicking opens the session's orchestrator
+ *      panel (existing openOrchPanel mechanism).
+ *   2. Scanned tasks from `tasks.inProgress[{ title, pct }]` (pct null → the
+ *      percent pill is omitted).
+ *
+ * Pure — never fetches; the 4s session poll keeps the store fresh. An absent
+ * or empty slice renders an honest "Nothing in progress" state — never sample
+ * data. See .planning/campaign/DATA-CONTRACT.md.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { orchElapsed, rowLink } from '../../util.js';
+import { openOrchPanel } from '../../orchestrator.js';
+import { pressable } from '../shared.js';
+import { TaskPipeline } from '../TaskPipeline.js';
+
+/** Display title for a live session row — command runs show the command. */
+function sessionTitle(s) {
+  if (String(s.storyId || '').startsWith('cmd-')) return s.cmd || s.storyId;
+  return s.storyId;
+}
+
+function LiveRow({ session: s }) {
+  return html`
+    <li class="ip-row ip-live-row" title=${'Open session ' + s.storyId}
+      ...${pressable(() => openOrchPanel(s.storyId))}>
+      <span class="live-dot"></span>
+      <span class="ip-title ip-live-title">${sessionTitle(s)}</span>
+      <span class="ip-live-elapsed">${orchElapsed(s.startTime)}</span>
+    </li>
+  `;
+}
+
+export function InProgress() {
+  const S = useStore();
+  const items = (S.tasks && Array.isArray(S.tasks.inProgress)) ? S.tasks.inProgress : [];
+  const live = (S.activeSessions || []).filter(s => s.status === 'running' || s.status === 'blocked');
+
+  return html`
+    <section class="dash-card ip-card">
+      <div class="ip-head">
+        <p class="dash-card-title">In Progress</p>
+        <button class="ip-viewall" onClick=${() => { location.hash = 'tasks'; }}>
+          View all
+        </button>
+      </div>
+      ${live.length === 0 && items.length === 0
+        ? html`<p class="dash-card-sub">Nothing in progress</p>`
+        : html`
+          <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')}>
+                <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}
+              </li>
+            `)}
+          </ul>
+        `}
+    </section>
+  `;
+}

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

@@ -0,0 +1,101 @@
+/**
+ * ProgressDonut — Overview redesign, Row 1 Card 1 (Project Progress donut).
+ *
+ * Reads the `progress { completed, inProgress, notStarted, total, pct }` slice
+ * from the store and renders a teal-gradient donut ring with the percentage
+ * centered, a colored-dot legend, and a thin segmented progress bar.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads store only — no fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+
+function pctOf(n, total) {
+  return total > 0 ? Math.round((n / total) * 100) : 0;
+}
+
+export function ProgressDonut() {
+  const S = useStore();
+  const p = S.progress;
+  // Live orchestrator sessions (derived map, refreshed by the 4s poll).
+  const liveCount = Object.keys(S.runningByStory || {}).length;
+
+  // No tracked work yet (or no project) — honest empty state, no sample donut.
+  if (!p || !p.total) {
+    return html`
+      <section class="dash-card donut-card">
+        <p class="dash-card-title">Project Progress</p>
+        <div class="dash-empty">
+          <span>No tasks tracked yet</span>
+          <code class="dash-empty-hint">/rcode-plan</code>
+        </div>
+      </section>
+    `;
+  }
+  const completed = p.completed ?? 0;
+  const inProgress = p.inProgress ?? 0;
+  const notStarted = p.notStarted ?? 0;
+  const total = p.total ?? (completed + inProgress + notStarted);
+  const pct = p.pct ?? pctOf(completed, total);
+
+  // Donut geometry — track + teal-gradient arc for the completed percentage.
+  const r = 52;
+  const c = 2 * Math.PI * r;
+  const offset = c - (pct / 100) * c;
+
+  const legend = [
+    { label: 'Completed',   cls: 'donut-dot--done',  pct: pctOf(completed, total) },
+    { label: 'In Progress', cls: 'donut-dot--prog',  pct: pctOf(inProgress, total) },
+    { label: 'Not Started', cls: 'donut-dot--idle',  pct: pctOf(notStarted, total) },
+  ];
+
+  // Segmented bar widths — teal (completed) then purple (in progress).
+  const tealW = pctOf(completed, total);
+  const purpleW = pctOf(inProgress, total);
+
+  return html`
+    <section class="dash-card donut-card">
+      <p class="dash-card-title">Project Progress</p>
+      <div class="donut-body">
+        <div class="donut-ring">
+          <svg width="132" height="132" viewBox="0 0 132 132">
+            <defs>
+              <linearGradient id="donutTeal" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="var(--dash-teal)"/>
+                <stop offset="100%" stop-color="var(--dash-purple)"/>
+              </linearGradient>
+            </defs>
+            <circle cx="66" cy="66" r=${r} fill="none"
+              stroke="var(--dash-border)" stroke-width="10"/>
+            <circle cx="66" cy="66" r=${r} fill="none"
+              stroke="url(#donutTeal)" stroke-width="10" stroke-linecap="round"
+              stroke-dasharray=${c} stroke-dashoffset=${offset}
+              transform="rotate(-90 66 66)"/>
+          </svg>
+          <div class="donut-center">
+            <span class="donut-pct">${pct}%</span>
+            <span class="donut-pct-label">complete</span>
+          </div>
+        </div>
+        <ul class="donut-legend">
+          ${legend.map(item => html`
+            <li class="donut-legend-row" key=${item.label}>
+              <span class=${'donut-dot ' + item.cls}></span>
+              <span class="donut-legend-label">${item.label}</span>
+              <span class="donut-legend-pct">${item.pct}%</span>
+            </li>
+          `)}
+        </ul>
+      </div>
+      <p class="donut-summary">
+        <strong>${completed}/${total}</strong> tasks completed
+        ${liveCount > 0 ? html` <span class="donut-live">· ${liveCount} running now</span>` : null}
+      </p>
+      <svg class="donut-bar" width="100%" height="6" viewBox="0 0 100 6" preserveAspectRatio="none">
+        <rect x="0" y="0" width="100" height="6" rx="3" fill="var(--dash-border)"/>
+        <rect x="0" y="0" width=${tealW} height="6" fill="var(--dash-teal)"/>
+        <rect x=${tealW} y="0" width=${purpleW} height="6" fill="var(--dash-purple)"/>
+      </svg>
+    </section>
+  `;
+}

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

@@ -0,0 +1,101 @@
+/**
+ * ProgressTimeline — Overview redesign, Row 3 Card 2 (horizontal phases).
+ *
+ * "Progress Timeline" card + "View full timeline" link. A horizontal track with
+ * date ticks across the top and one segment per phase (Planning, Design,
+ * Development, Testing, Launch). Each segment shows its date range and a state
+ * badge: Completed → green, In Progress → purple, Upcoming → gray.
+ * Reads `phases[{ name, range, state }]` from the store. An empty array is
+ * real data — rendered as an honest "No phases yet" state with a command hint,
+ * never substituted with sample phases.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads props/store only — no fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { rowLink } from '../../util.js';
+
+// Map phase state → label + badge/segment modifier.
+function stateMeta(state) {
+  const s = String(state || '').toLowerCase();
+  if (s === 'done')   return { label: 'Completed',   mod: 'pt-seg--done'   };
+  if (s === 'active') return { label: 'In Progress', mod: 'pt-seg--active' };
+  return { label: 'Upcoming', mod: 'pt-seg--todo' };
+}
+
+// Max segments shown at once — the mockup track is designed for ~5; real
+// projects can have 20+ phases, which would cram into unreadable slivers.
+const MAX_SEGMENTS = 6;
+
+/** Window of at most MAX_SEGMENTS phases centered on the active one (or the
+ *  done/todo boundary when nothing is active), so the card shows where the
+ *  project currently is. "View full timeline" covers the rest. */
+function visibleWindow(phases) {
+  if (phases.length <= MAX_SEGMENTS) return phases;
+  let center = phases.findIndex(p => String(p.state).toLowerCase() === 'active');
+  if (center === -1) {
+    const firstTodo = phases.findIndex(p => String(p.state).toLowerCase() !== 'done');
+    center = firstTodo === -1 ? phases.length - 1 : firstTodo;
+  }
+  let start = Math.max(0, center - Math.floor(MAX_SEGMENTS / 2));
+  start = Math.min(start, phases.length - MAX_SEGMENTS);
+  return phases.slice(start, start + MAX_SEGMENTS);
+}
+
+export function ProgressTimeline() {
+  const S = useStore();
+  const all = Array.isArray(S.phases) ? S.phases : [];
+
+  if (!all.length) {
+    return html`
+      <section class="dash-card">
+        <div class="pt-head">
+          <p class="dash-card-title">Progress Timeline</p>
+        </div>
+        <div class="dash-empty">
+          <span>No phases yet</span>
+          <code class="dash-empty-hint">/rcode-plan</code>
+        </div>
+      </section>
+    `;
+  }
+
+  const phases = visibleWindow(all);
+
+  // Date ticks across the top — the start of each visible phase range, plus
+  // the end of the last range, so the axis brackets the visible window.
+  const ticks = phases.map(p => String(p.range || '').split('–')[0].trim());
+  const lastEnd = String(phases[phases.length - 1]?.range || '').split('–')[1];
+  if (lastEnd) ticks.push(lastEnd.trim());
+
+  return html`
+    <section class="dash-card">
+      <div class="pt-head">
+        <p class="dash-card-title">Progress Timeline</p>
+        <button class="pt-viewall" onClick=${() => { location.hash = 'phases'; }}>
+          View full timeline
+        </button>
+      </div>
+
+      <div class="pt-ticks">
+        ${ticks.map((t, i) => html`<span class="pt-tick" key=${'tick' + i}>${t}</span>`)}
+      </div>
+
+      <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';
+          return html`
+            <div class=${'pt-seg ovr-link ' + m.mod} key=${p.name + i} ...${rowLink(target)}>
+              <span class="pt-seg-name">${p.name}</span>
+              <span class="pt-seg-range">${p.range || ''}</span>
+              <span class="pt-seg-badge">${m.label}</span>
+            </div>
+          `;
+        })}
+      </div>
+    </section>
+  `;
+}