apps/desktop/e2e/live-backlog.spec.ts

@@ -41,6 +41,10 @@ test.describe('live backlog', () => {
     await expect(
       win.getByText(/cold-start priors · \d+\/20 closed issues estimated|calibrated on \d+ closed/),
     ).toBeVisible()
+    // Real per-milestone forecasts — these milestone names come from gitea, not the
+    // fixture (which lists Beta / Pilot-ready / v1.0).
+    await expect(win.getByText(/P2 — Scheduler/)).toBeVisible()
+    await win.screenshot({ path: join(here, '.artifacts', 'screens', 'live-runway.png'), fullPage: true, animations: 'disabled' })
     await win.getByRole('button', { name: 'Full report' }).click()
     await expect(win.getByText(/cold-start · \d+\/20|curve active · n ≥ 20/)).toBeVisible()
     await win.screenshot({ path: join(here, '.artifacts', 'screens', 'live-calibration.png'), fullPage: true, animations: 'disabled' })

apps/desktop/src/renderer/src/components/screens/runway-screen.tsx

@@ -2,18 +2,22 @@ import React from 'react'
 
 import { RunwayBar } from '../charts/chart.js'
 import { Card, Badge, Tag, Icon, IconButton } from '../ui/index.js'
-import { RUNWAY, CAPACITY } from '../../data/fixtures.js'
+import { RUNWAY, CAPACITY, type RunwayMilestone } from '../../data/fixtures.js'
 
-// Runway — capacity vs milestone dates; ranges, never points
+// Runway — capacity vs milestone dates; ranges, never points.
+// `milestones` (real per-milestone forecasts) overrides the demo when present.
 export function RunwayScreen({
   onOpenCalibration,
   onOpenMilestone,
   calibration,
+  milestones,
 }: {
   onOpenCalibration: () => void
   onOpenMilestone: () => void
   calibration?: { n: number; coldStart: boolean }
+  milestones?: RunwayMilestone[]
 }) {
+  const rows = milestones && milestones.length ? milestones : RUNWAY
   const calibNote = calibration
     ? calibration.coldStart
       ? `cold-start priors · ${calibration.n}/20 closed issues estimated`
@@ -28,7 +32,7 @@ export function RunwayScreen({
 
       <Card overline="Milestones" flush>
         <div>
-          {RUNWAY.map((m, i) => (
+          {rows.map((m, i) => (
             <div key={m.name} onClick={onOpenMilestone} style={{
               display: 'grid', gridTemplateColumns: '160px 1fr 150px 90px', gap: 16, alignItems: 'center', cursor: 'pointer',
               padding: '14px 20px', borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',

apps/desktop/src/renderer/src/components/shell/app-shell.tsx

@@ -4,7 +4,13 @@ import logoIcon from '../../design/assets/logo-icon.png'
 import type { IssueChange } from '@commitea/core'
 
 import type { IssueRef } from '../../data/fixtures.js'
-import { backlogCalibration, forecastBacklog, issuesToBoardColumns, scheduleFocus } from '../../lib/backlog.js'
+import {
+  backlogCalibration,
+  forecastBacklog,
+  issuesToBoardColumns,
+  runwayView,
+  scheduleFocus,
+} from '../../lib/backlog.js'
 import { useBacklog } from '../../lib/use-backlog.js'
 import { PrimitivesGallery } from '../gallery.js'
 import { BoardScreen } from '../screens/board-screen.js'
@@ -98,6 +104,8 @@ export function AppShell() {
     backlog.status === 'ready'
       ? (forecastBacklog(backlog.issues, backlog.deps, new Date(), calibration?.model) ?? undefined)
       : undefined
+  const runwayMilestones =
+    backlog.status === 'ready' ? runwayView(backlog.issues, backlog.milestones, backlog.deps) : undefined
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
@@ -196,6 +204,7 @@ export function AppShell() {
             onOpenCalibration={() => setView('calibration')}
             onOpenMilestone={() => setView('milestone')}
             calibration={calibration ? { n: calibration.model.n, coldStart: calibration.model.coldStart } : undefined}
+            milestones={runwayMilestones}
           />
         )
       case 'calibration':

apps/desktop/src/renderer/src/lib/backlog.ts

@@ -7,6 +7,7 @@ import {
   fitCalibration,
   forecast,
   type GiteaIssue,
+  type GiteaMilestone,
   inferLifecycle,
   type LifecycleColumn,
   type LifecycleEvent,
@@ -16,10 +17,17 @@ import {
   type ScheduledItem,
   selectFocus,
   toDurationModel,
+  workingDaysBetween,
 } from '@commitea/core'
 
-import { type BoardColumn, type BoardIssue, type CalibrationData, type FocusIssue } from '../data/fixtures.js'
-import { type BurnUpData, buildBurnUpData } from './dates.js'
+import {
+  type BoardColumn,
+  type BoardIssue,
+  type CalibrationData,
+  type FocusIssue,
+  type RunwayMilestone,
+} from '../data/fixtures.js'
+import { addWorkingDays, type BurnUpData, buildBurnUpData, formatRange, formatShort } from './dates.js'
 
 type Timelines = Record<number, LifecycleEvent[]>
 
@@ -232,3 +240,53 @@ export function scheduleFocus(
     later: toFocusIssue(f.later, inf),
   }
 }
+
+/**
+ * Per-milestone Monte Carlo forecast for the Runway screen — each open milestone's
+ * open scope gets its own cone, and the p80 landing is compared to the milestone's
+ * due date (ok/at-risk). Ranges, never point dates. Milestones with no open scope
+ * (already shipped) are omitted. Falls back to the demo when there's nothing real.
+ */
+export function runwayView(
+  issues: GiteaIssue[],
+  milestones: GiteaMilestone[],
+  deps: DependencyEdge[],
+  today: Date = new Date(),
+): RunwayMilestone[] {
+  const open = issues.filter((i) => i.state === 'open')
+  const rows = milestones
+    .filter((m) => m.state === 'open')
+    .map((m) => ({ m, scope: open.filter((i) => i.milestone?.id === m.id) }))
+    .filter((x) => x.scope.length > 0)
+    .map(({ m, scope }) => {
+      const f = forecast(
+        scope.map((i) => ({
+          number: i.number,
+          title: i.title,
+          labels: i.labels,
+          estimateDays: i.facts.estimateDays,
+          priority: i.facts.priority,
+        })),
+        deps,
+      )
+      const p90 = f.curve.length ? f.curve[f.curve.length - 1].p90Day : f.p95Day
+      const dueDay = m.dueOn ? workingDaysBetween(today, new Date(m.dueOn)) : null
+      return { m, p50: f.p50Day, p80: f.p80Day, p90, dueDay }
+    })
+
+  const horizon = Math.max(1, ...rows.map((r) => Math.max(r.p90, r.dueDay ?? 0)))
+
+  return rows.map(({ m, p50, p80, p90, dueDay }) => {
+    const onTrack = dueDay == null || p80 <= dueDay
+    return {
+      name: m.title,
+      due: m.dueOn ? formatShort(new Date(m.dueOn)) : 'no date',
+      hard: false,
+      p80: formatRange(addWorkingDays(today, p50), addWorkingDays(today, p90)),
+      pos: p80 / horizon,
+      spread: Math.min(0.6, (p90 - p50) / horizon),
+      tone: onTrack ? ('ok' as const) : ('warn' as const),
+      note: dueDay == null ? `${Math.ceil(p80)}d of work` : onTrack ? 'on track' : 'at risk',
+    }
+  })
+}