@hanzlaa/rcode 4.1.2 → 4.3.0

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>
+  `;
+}

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

@@ -0,0 +1,80 @@
+/**
+ * ProjectHealth — progress mini-card used by the Sidebar.
+ *
+ * Reads `health { pct, label, points[] }` from the store. The scanner now
+ * emits real values only: pct is the story-completion percentage (null when
+ * nothing is tracked yet — shown as "—"), label is the real blocker count or
+ * "Not started", and points exist only when the project has recorded
+ * velocity_history. No sample fallback, no invented composite score.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads store only — no fetch.
+ *
+ * No inline style= attributes — all styling via .phealth-* classes in css.js.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+
+/**
+ * Tone class — driven by the real blocker count, not an invented score.
+ * Neutral when nothing is tracked yet.
+ */
+function healthTone(pct, blockerCount) {
+  if (pct == null) return 'phealth--none';
+  if (blockerCount >= 2) return 'phealth--risk';
+  if (blockerCount === 1) return 'phealth--warn';
+  return 'phealth--good';
+}
+
+/**
+ * Build an SVG polyline `points` string for the sparkline from a value series.
+ * Maps values into a 0..W × 0..H box, flipping Y so higher values sit higher.
+ */
+function sparkPoints(points, w, h) {
+  if (!points.length) return '';
+  const values = points.map(p => Number(p.value) || 0);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const step = points.length > 1 ? w / (points.length - 1) : 0;
+  return values
+    .map((v, i) => {
+      const x = i * step;
+      const y = h - ((v - min) / span) * h;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+}
+
+export function ProjectHealth() {
+  const S = useStore();
+  const health = (S && S.health) || {};
+  const blockerCount = Array.isArray(S.blockers) ? S.blockers.length : 0;
+  const hasPct = typeof health.pct === 'number';
+  const pct = hasPct ? Math.max(0, Math.min(100, Math.round(health.pct))) : null;
+  const label = health.label || (hasPct ? '' : 'Not tracked');
+  const points = Array.isArray(health.points) ? health.points : [];
+  const tone = healthTone(pct, blockerCount);
+
+  const W = 180;
+  const H = 36;
+  // Sparkline only from real recorded velocity — 2+ points or nothing.
+  const line = points.length >= 2 ? sparkPoints(points, W, H) : '';
+  // Close the polygon down to the baseline for a soft area fill.
+  const area = line ? `0,${H} ${line} ${W},${H}` : '';
+
+  return html`
+    <section class=${'phealth ' + tone}>
+      <p class="phealth-title">Progress</p>
+      <div class="phealth-head">
+        <span class="phealth-pct">${pct != null ? pct : '—'}${pct != null ? html`<span class="phealth-pct-sign">%</span>` : null}</span>
+        <span class="phealth-label">${label}</span>
+      </div>
+      ${line ? html`
+        <svg class="phealth-spark" viewBox=${'0 0 ' + W + ' ' + H} preserveAspectRatio="none" aria-hidden="true">
+          <polygon class="phealth-spark-area" points=${area} />
+          <polyline class="phealth-spark-line" points=${line} />
+        </svg>
+      ` : null}
+    </section>
+  `;
+}

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

@@ -0,0 +1,57 @@
+/**
+ * RecentDecisions — Overview redesign, Row 3 Card 1 (Recent Decisions list).
+ *
+ * "Recent Decisions" card + "View all" link. Each row is a decision title with
+ * a status badge (only when the decision actually records a status — no
+ * default "Approved") and the date on the right. An empty array renders an
+ * honest "No decisions recorded yet" state, never sample data.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads props/store only — no fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { humanDate, rowLink } from '../../util.js';
+
+// Map a free-form status string to a badge modifier class.
+function statusClass(status) {
+  const s = String(status || '').toLowerCase();
+  if (s === 'approved') return 'rd-badge--approved';
+  if (s === 'rejected') return 'rd-badge--rejected';
+  return 'rd-badge--proposed';
+}
+
+export function RecentDecisions() {
+  const S = useStore();
+  const decisions = Array.isArray(S.decisions) ? S.decisions : [];
+
+  return html`
+    <section class="dash-card">
+      <div class="rd-head">
+        <p class="dash-card-title">Recent Decisions</p>
+        <button class="rd-viewall" onClick=${() => { location.hash = 'decisions'; }}>
+          View all
+        </button>
+      </div>
+      ${decisions.length === 0
+        ? html`
+          <div class="dash-empty">
+            <span>No decisions recorded yet</span>
+            <code class="dash-empty-hint">/rcode-council</code>
+          </div>
+        `
+        : html`
+          <ul class="rd-list">
+            ${decisions.map((d, i) => html`
+              <li class="rd-row ovr-link" key=${d.title + i} ...${rowLink('decisions')}>
+                <span class="rd-title">${d.title}</span>
+                ${d.status
+                  ? html`<span class=${'rd-badge ' + statusClass(d.status)}>${d.status}</span>`
+                  : html`<span class="rd-status-none">—</span>`}
+                <span class="rd-date">${humanDate(d.date) || ''}</span>
+              </li>
+            `)}
+          </ul>
+        `}
+    </section>
+  `;
+}

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

@@ -0,0 +1,143 @@
+/**
+ * Timeline — Overview redesign, Row 1 Card 3.
+ *
+ * Target-launch card. With a configured launch date: countdown + a velocity
+ * sparkline drawn only from real recorded `velocity_history` + the real
+ * open-blocker count. Without one, the dead space becomes a "Milestone
+ * outlook": current milestone name, phases done/total, latest recorded
+ * velocity, and a hint that launch_date in .rcode/config.yaml enables the
+ * countdown — never a projected/invented date.
+ *
+ * Reads the `timeline { launchDate, onTrack, points[] }` slice plus
+ * `blockers`, `milestone`, and `phases` from the store. See DATA-CONTRACT.md.
+ * No fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+
+// SVG viewBox geometry for the sparkline.
+const VW = 280;
+const VH = 88;
+const PAD_X = 8;
+const PAD_Y = 12;
+
+/** Days from today until the launch date (>= 0; null when unparseable). */
+function daysUntil(launchDate) {
+  const target = new Date(launchDate);
+  if (isNaN(target.getTime())) return null;
+  const now = new Date();
+  const ms = target.setHours(0, 0, 0, 0) - now.setHours(0, 0, 0, 0);
+  return Math.max(0, Math.round(ms / 86400000));
+}
+
+/** Human display of an ISO date, falling back to the raw string. */
+function displayDate(launchDate) {
+  const d = new Date(launchDate);
+  if (isNaN(d.getTime())) return launchDate;
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+/** Map a value series to evenly-spaced SVG coordinates (y inverted). */
+function toCoords(points) {
+  const values = points.map(p => Number(p.value) || 0);
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const span = max - min || 1;
+  const innerW = VW - PAD_X * 2;
+  const innerH = VH - PAD_Y * 2;
+  const step = points.length > 1 ? innerW / (points.length - 1) : 0;
+  return values.map((v, i) => ({
+    x: PAD_X + step * i,
+    y: PAD_Y + innerH - ((v - min) / span) * innerH,
+  }));
+}
+
+export function Timeline() {
+  const S = useStore();
+  const timeline = (S && S.timeline) || {};
+  const points = Array.isArray(timeline.points) ? timeline.points : [];
+  const blockers = Array.isArray(S.blockers) ? S.blockers : [];
+
+  const hasDate = !!timeline.launchDate;
+  const days = hasDate ? daysUntil(timeline.launchDate) : null;
+  const daysLine = days == null ? 'Launch scheduled' : `In ${days} day${days === 1 ? '' : 's'}`;
+
+  let chart = null;
+  if (points.length >= 2) {
+    const coords = toCoords(points);
+    const linePath = coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ');
+    const areaPath = `${linePath} L ${coords[coords.length - 1].x.toFixed(1)} ${VH - PAD_Y} L ${coords[0].x.toFixed(1)} ${VH - PAD_Y} Z`;
+    chart = html`
+      <svg class="tl-chart" viewBox=${`0 0 ${VW} ${VH}`} preserveAspectRatio="none" role="img"
+        aria-label="Recorded sprint velocity trend">
+        <defs>
+          <linearGradient id="tlFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="var(--dash-teal)" stop-opacity="0.22"/>
+            <stop offset="100%" stop-color="var(--dash-teal)" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <path class="tl-area" d=${areaPath} fill="url(#tlFill)"/>
+        <path class="tl-line" d=${linePath} fill="none" stroke="var(--dash-teal)"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        ${coords.map(c => html`
+          <circle class="tl-dot" cx=${c.x.toFixed(1)} cy=${c.y.toFixed(1)} r="3"
+            fill="var(--dash-bg)" stroke="var(--dash-teal)" stroke-width="2"/>
+        `)}
+      </svg>
+    `;
+  } else {
+    chart = html`<div class="tl-nochart">${points.length === 1 ? 'Not enough velocity history to chart yet' : 'No velocity history recorded'}</div>`;
+  }
+
+  const blockerNote = blockers.length
+    ? `${blockers.length} open blocker${blockers.length === 1 ? '' : 's'}`
+    : 'No open blockers';
+
+  const footer = html`
+    <div class="tl-footer">
+      <span class=${'tl-status' + (blockers.length ? ' tl-status-risk' : '')}>
+        <span class="tl-dot-badge"></span>${blockerNote}
+      </span>
+    </div>
+  `;
+
+  if (!hasDate) {
+    // No launch date configured — show a milestone outlook built from real
+    // store data instead of a dead "—" date.
+    const phases = Array.isArray(S.phases) ? S.phases : [];
+    const phasesDone = phases.filter(p => String(p.state).toLowerCase() === 'done').length;
+    const latest = points.length ? points[points.length - 1] : null;
+    return html`
+      <section class="dash-card tl-card">
+        <p class="dash-card-sub tl-label">Milestone Outlook</p>
+        <p class="tl-outlook-name">${S.milestone || 'No milestone set'}</p>
+        <ul class="tl-outlook">
+          <li class="tl-outlook-row">
+            <span class="tl-outlook-key">Phases</span>
+            <span class="tl-outlook-val">${phases.length ? `${phasesDone}/${phases.length} done` : 'None planned'}</span>
+          </li>
+          <li class="tl-outlook-row">
+            <span class="tl-outlook-key">Latest velocity</span>
+            <span class="tl-outlook-val">${latest ? `${latest.value} pts (${latest.label})` : 'Not recorded'}</span>
+          </li>
+        </ul>
+        ${chart}
+        <p class="tl-outlook-hint">Set <code>launch_date</code> in <code>.rcode/config.yaml</code> to track a launch countdown</p>
+        ${footer}
+      </section>
+    `;
+  }
+
+  return html`
+    <section class="dash-card tl-card">
+      <p class="dash-card-sub tl-label">Target Launch</p>
+      <p class="tl-date">${displayDate(timeline.launchDate)}</p>
+      <p class="tl-days">${daysLine}</p>
+
+      ${chart}
+
+      ${footer}
+    </section>
+  `;
+}