Merge pull request 'feat: Runway complete — per-milestone forecasts + real milestone drill-in' (#48) from feat/runway-real into main

Reviewed-on: #48

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

@@ -41,6 +41,18 @@ 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' })
+
+    // Milestone drill-in — clicking a real milestone opens its real detail
+    await win.getByText(/P2 — Scheduler/).click()
+    await expect(win.getByRole('heading', { name: 'P2 — Scheduler + Monte Carlo' })).toBeVisible()
+    await expect(win.getByText(/\d+ issues · est \d+d/)).toBeVisible()
+    await win.screenshot({ path: join(here, '.artifacts', 'screens', 'live-milestone.png'), fullPage: true, animations: 'disabled' })
+    await rail.getByRole('button', { name: 'Runway' }).click()
+
     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/e2e/live-persistence.spec.ts

@@ -0,0 +1,37 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { _electron as electron, expect, test } from '@playwright/test'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const MAIN = join(here, '..', 'out', 'main', 'index.js')
+
+// Opt-in (GITEA_LIVE=1). A real launch persists the snapshot; a second launch with
+// gitea unreachable must still show the board + real scheduler output from the
+// persisted cache (offline reads). No model needed.
+test.describe('live persistence', () => {
+  test('offline: serves the persisted snapshot', async () => {
+    test.skip(!process.env.GITEA_LIVE, 'GITEA_LIVE not set — opt-in live test')
+    test.setTimeout(120_000)
+
+    // launch 1 — real reconcile writes the snapshot to disk
+    const app1 = await electron.launch({ args: [MAIN], env: { ...process.env } })
+    const w1 = await app1.firstWindow()
+    await w1.waitForLoadState('domcontentloaded')
+    // a scheduler-only phrase confirms real data reconciled (never emitted by fixtures)
+    await expect(w1.getByText(/on the critical path|unblocks #|waits on #|· ready/).first()).toBeVisible({ timeout: 30000 })
+    await app1.close()
+
+    // launch 2 — gitea unreachable; the reconcile must fall back to the persisted snapshot
+    const app2 = await electron.launch({
+      args: [MAIN],
+      env: { ...process.env, GITEA_BASE_URL: 'http://127.0.0.1:9' },
+    })
+    const w2 = await app2.firstWindow()
+    await w2.waitForLoadState('domcontentloaded')
+    // Focus still renders real scheduler output — proving it came from the cache, offline
+    await expect(w2.getByText(/on the critical path|unblocks #|waits on #|· ready/).first()).toBeVisible({ timeout: 20000 })
+    await w2.screenshot({ path: join(here, '.artifacts', 'screens', 'live-offline.png'), fullPage: true, animations: 'disabled' })
+    await app2.close()
+  })
+})

apps/desktop/src/main/gitea.ts

@@ -27,6 +27,8 @@ import {
 } from '@commitea/core'
 import { ipcMain } from 'electron'
 
+import { loadSnapshot, saveSnapshot } from './snapshot-store.js'
+
 /** Walk up from cwd looking for a .env.local with a GITEA_TOKEN (dev convenience). */
 function loadEnvLocalToken(): string | undefined {
   let dir = process.cwd()
@@ -126,16 +128,81 @@ export async function reconcileSnapshot(
   return { issues, milestones, deps, timelines }
 }
 
+type Snapshot = Awaited<ReturnType<typeof reconcileSnapshot>>
+
+/**
+ * A single in-memory reconcile cache shared across the app. A full reconcile is
+ * ~2N gitea calls (deps + timelines per issue); without this, every agent tool
+ * call refetched the whole repo. Reads within `maxAgeMs` reuse the cache;
+ * `getSnapshot({ maxAgeMs: 0 })` forces a fresh pull (the explicit UI reconcile),
+ * and any write calls `invalidateSnapshot()` so the next read sees it. The cache
+ * is rebuildable — the durable truth stays in gitea (the purity split, D4).
+ */
+let snapshotCache: { snap: Snapshot; at: number } | null = null
+
+export async function getSnapshot(client: GiteaClient, opts?: { maxAgeMs?: number }): Promise<Snapshot> {
+  const maxAgeMs = opts?.maxAgeMs ?? 0
+  if (snapshotCache && maxAgeMs > 0 && Date.now() - snapshotCache.at <= maxAgeMs) {
+    return snapshotCache.snap
+  }
+  const snap = await reconcileSnapshot(client)
+  snapshotCache = { snap, at: Date.now() }
+  saveSnapshot(snap, new Date().toISOString()) // persist for instant boot + offline
+  return snap
+}
+
+/** Drop the cache so the next read reflects a just-made write. */
+export function invalidateSnapshot(): void {
+  snapshotCache = null
+}
+
+/**
+ * The last persisted snapshot (from a previous session), for instant boot. The
+ * renderer shows it immediately, then a real reconcile supersedes it
+ * (stale-while-revalidate). Returns null when there's nothing on disk; its
+ * `savedAt` marks staleness. It does NOT seed the cache — agent tool calls
+ * always reconcile fresh so they never reason over stale data.
+ */
+export function bootSnapshot(): (Snapshot & { savedAt: string }) | null {
+  const persisted = loadSnapshot()
+  if (!persisted) return null
+  return {
+    issues: persisted.issues,
+    milestones: persisted.milestones,
+    deps: persisted.deps,
+    timelines: persisted.timelines,
+    savedAt: persisted.savedAt,
+  } as unknown as Snapshot & { savedAt: string }
+}
+
+/** Agent tool calls tolerate a slightly stale snapshot (seconds) to stay responsive. */
+export const AGENT_SNAPSHOT_TTL_MS = 30_000
+
 export function registerGiteaIpc(): void {
   const client = getGiteaClient()
   const repo = client ? `${process.env.GITEA_OWNER ?? 'christian'}/${process.env.GITEA_REPO ?? 'commitea'}` : null
 
   ipcMain.handle('gitea:status', () => ({ configured: !!client, repo }))
 
+  // Instant boot: the last persisted snapshot, shown before the fresh reconcile lands.
+  ipcMain.handle('gitea:boot', () => {
+    if (!client) return { configured: false }
+    const persisted = bootSnapshot()
+    return persisted ? { configured: true, cached: true, ...persisted } : { configured: true, cached: false }
+  })
+
   ipcMain.handle('gitea:reconcile', async () => {
     if (!client) return { configured: false, issues: [], milestones: [], deps: [], timelines: {} }
-    const snap = await reconcileSnapshot(client)
+    try {
-    return { configured: true, ...snap }
+      // explicit UI sync — force fresh, and warm the cache for agent tool calls
+      const snap = await getSnapshot(client, { maxAgeMs: 0 })
+      return { configured: true, stale: false, ...snap }
+    } catch (e) {
+      // offline / gitea down — serve the last persisted snapshot rather than error out
+      const persisted = bootSnapshot()
+      if (persisted) return { configured: true, stale: true, ...persisted }
+      throw e
+    }
   })
 
   ipcMain.handle('gitea:getIssue', async (_event, index: number) => {
@@ -167,6 +234,7 @@ export function registerGiteaIpc(): void {
     const ids = await resolveLabelIds(plan.labels)
     await client.setIssueLabels(change.issue, ids)
     const issue = await client.getIssue(change.issue)
+    invalidateSnapshot() // the board + forecast must reflect the label change
     return { ok: true as const, plan, issue }
   })
 
@@ -183,6 +251,7 @@ export function registerGiteaIpc(): void {
         const issue = await client.createIssue({ title: it.title, body: it.body, labelIds })
         created.push({ number: issue.number, title: issue.title })
       }
+      if (created.length) invalidateSnapshot() // new issues enter the board/scope
       return { ok: true as const, created }
     },
   )

apps/desktop/src/main/model.ts

@@ -26,7 +26,13 @@ import {
 } from '@commitea/core'
 import { ipcMain } from 'electron'
 
-import { appendDirectiveEntry, getGiteaClient, getPmStateClient, reconcileSnapshot } from './gitea.js'
+import {
+  AGENT_SNAPSHOT_TTL_MS,
+  appendDirectiveEntry,
+  getGiteaClient,
+  getPmStateClient,
+  getSnapshot,
+} from './gitea.js'
 
 /** Small local model for prose + the read tool; big model reserved for later decomposition. */
 function resolveModelRouter(): ModelRouter | null {
@@ -93,7 +99,8 @@ export function registerModelIpc(): void {
     const execute = async (name: string, args: unknown) => {
       if (!client) return { error: 'gitea is not configured' }
       if (name === 'query_project') {
-        const snap = await reconcileSnapshot(client)
+        // reuse a recent reconcile — a multi-tool turn shouldn't refetch the repo each call
+        const snap = await getSnapshot(client, { maxAgeMs: AGENT_SNAPSHOT_TTL_MS })
         const a = (args ?? {}) as { view: ProjectView; filters?: QueryFilters }
         return buildProjectView(a.view, a.filters, snap, new Date())
       }

apps/desktop/src/main/snapshot-store.ts

@@ -0,0 +1,47 @@
+/**
+ * Durable snapshot store — the reconcile cache, persisted to disk. On boot the
+ * app shows the last snapshot instantly (stale-while-revalidate) instead of a
+ * blank board while ~2N gitea calls run; if gitea is unreachable, reads fall
+ * back to it (offline). It's a rebuildable mirror — the durable truth stays in
+ * gitea (the purity split, D4). A plain JSON file: the whole snapshot fits in
+ * memory at this scale, so indexed SQL buys nothing yet (see the PR).
+ */
+
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { app } from 'electron'
+
+/** The shape we persist — kept loose so a schema drift degrades to "no cache", not a crash. */
+export interface PersistedSnapshot {
+  issues: unknown[]
+  milestones: unknown[]
+  deps: unknown[]
+  timelines: Record<number, unknown[]>
+  /** ISO time the snapshot was reconciled — shown as "cached since". */
+  savedAt: string
+}
+
+function snapshotPath(): string {
+  return join(app.getPath('userData'), 'commitea-snapshot.json')
+}
+
+/** Load the last persisted snapshot, or null if absent/corrupt. Never throws. */
+export function loadSnapshot(): PersistedSnapshot | null {
+  try {
+    const parsed = JSON.parse(readFileSync(snapshotPath(), 'utf8')) as PersistedSnapshot
+    if (parsed && Array.isArray(parsed.issues)) return parsed
+    return null
+  } catch {
+    return null // missing file, bad JSON, or drift — treat as no cache
+  }
+}
+
+/** Persist a freshly reconciled snapshot. Best-effort — a write failure never breaks a reconcile. */
+export function saveSnapshot(snap: Omit<PersistedSnapshot, 'savedAt'>, savedAt: string): void {
+  try {
+    writeFileSync(snapshotPath(), JSON.stringify({ ...snap, savedAt }), 'utf8')
+  } catch {
+    // disk full / permissions — the in-memory cache still works this session
+  }
+}

apps/desktop/src/preload/index.ts

@@ -5,6 +5,8 @@ const api = {
   gitea: {
     /** Whether the main process has a gitea token + target repo configured. */
     status: () => ipcRenderer.invoke('gitea:status'),
+    /** The last persisted snapshot, for instant boot before the fresh reconcile. */
+    boot: () => ipcRenderer.invoke('gitea:boot'),
     /** Full read of the managed repo — every issue + milestone. */
     reconcile: () => ipcRenderer.invoke('gitea:reconcile'),
     /** One issue by index, normalized (or null if unconfigured). */

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

@@ -1,22 +1,44 @@
 import React from 'react'
 
 import { COLUMNS, type IssueRef } from '../../data/fixtures.js'
+import { type MilestoneView } from '../../lib/backlog.js'
 import { BurnUpCone } from '../charts/chart.js'
 import { Badge, Button, Card, Icon, Tag } from '../ui/index.js'
 
-// Milestone detail — scope, cone, issues; forecasts stay ranges
+// Milestone detail — scope, cone, issues; forecasts stay ranges.
-export function MilestoneScreen({ onBack, onOpenIssue }: { onBack: () => void; onOpenIssue: (issue: IssueRef) => void }) {
+// `data` (real milestone forecast) overrides the demo fixture when present.
+export function MilestoneScreen({
+  onBack,
+  onOpenIssue,
+  data,
+}: {
+  onBack: () => void
+  onOpenIssue: (issue: IssueRef) => void
+  data?: MilestoneView
+}) {
   const cols = COLUMNS
   const byState = (ids: number[]) =>
     cols.flatMap((c) => c.issues.map((i) => ({ ...i, col: c.label }))).filter((i) => ids.includes(i.id))
 
-  const groups = [
+  const fixtureGroups = [
     { label: 'Steeping', issues: byState([87, 84]) },
     { label: 'In review', issues: byState([92]) },
     { label: 'Queued', issues: byState([102, 103, 99, 96, 78]) },
     { label: 'Done', issues: byState([71, 69, 65]), muted: true },
   ]
 
+  // real or demo, in one shape the render loop understands
+  const groups = data
+    ? data.groups.map((g) => ({ label: g.label, issues: g.issues, muted: g.label === 'Done' }))
+    : fixtureGroups
+  const name = data ? data.name : 'Beta'
+  const dueLine = data
+    ? `milestone · due ${data.due} · ${data.soft ? 'soft — scope may flex' : 'hard deadline'}`
+    : 'milestone · due Mar 15 · soft — scope may flex'
+  const forecastLabel = data ? (data.forecastRange ? `80% ${data.forecastRange}` : 'all shipped') : '80% Mar 3–12'
+  const scopeStat = data ? `${data.scopeCount} issues · est ${data.scopeEstDays}d` : '42 issues · est 61d'
+  const doneStat = data ? `${data.doneCount} · ${data.donePct}%` : '24 · 57%'
+
   const Stat = ({ label, value, tone }: { label: string; value: string; tone?: string }) => (
     <div style={{ flex: 1, padding: '12px 18px', borderRight: '1px solid var(--line-1)' }}>
       <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 5 }}>{label}</div>
@@ -36,12 +58,12 @@ export function MilestoneScreen({ onBack, onOpenIssue }: { onBack: () => void; o
         <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'flex-start', gap: 16 }}>
           <div style={{ flex: 1, minWidth: 0 }}>
             <p style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-3)', margin: '0 0 6px', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
-              <Icon name="milestone" size={13} /> milestone · due Mar 15 · soft — scope may flex
+              <Icon name="milestone" size={13} /> {dueLine}
             </p>
-            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Beta</h1>
+            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>{name}</h1>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
-              <Badge tone="ok" dot>ahead of forecast</Badge>
+              <Badge tone="ok" dot>{data ? `${data.doneCount}/${data.scopeCount} done` : 'ahead of forecast'}</Badge>
-              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>80% Mar 3–12</span>
+              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{forecastLabel}</span>
             </div>
           </div>
           <Button variant="secondary" icon="arrow-up-right">Open in Gitea</Button>
@@ -51,21 +73,25 @@ export function MilestoneScreen({ onBack, onOpenIssue }: { onBack: () => void; o
       {/* stats strip */}
       <Card flush>
         <div style={{ display: 'flex' }}>
-          <Stat label="Scope" value="42 issues · est 61d" />
+          <Stat label="Scope" value={scopeStat} />
-          <Stat label="Done" value="24 · 57%" />
+          <Stat label="Done" value={doneStat} />
-          <Stat label="Forecast" value="80% Mar 3–12" />
+          <Stat label="Forecast" value={forecastLabel} />
           <div style={{ flex: 1, padding: '12px 18px' }}>
-            <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 5 }}>Drift · 7d</div>
+            <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 5 }}>Remaining</div>
-            <div style={{ font: '500 14px var(--font-mono)', color: 'var(--ok)', whiteSpace: 'nowrap' }}>−2d · cone narrowed</div>
+            <div style={{ font: '500 14px var(--font-mono)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{data ? `${data.scopeCount - data.doneCount} open` : '−2d · cone narrowed'}</div>
           </div>
         </div>
       </Card>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14, alignItems: 'start' }}>
-        <Card overline="Burn-up" title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>Mar 3–12</span></>} jade>
+        <Card overline="Burn-up" title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>{data ? (data.forecastRange ?? 'shipped') : 'Mar 3–12'}</span></>} jade>
-          <BurnUpCone />
+          <BurnUpCone data={data?.cone ?? undefined} />
           <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
-            Comfortably ahead. Beta needs #87 more than it needs my commentary.
+            {data
+              ? data.cone
+                ? `${data.scopeCount - data.doneCount} open of ${data.scopeCount}. Cone over what's left.`
+                : 'Everything here has shipped.'
+              : 'Comfortably ahead. Beta needs #87 more than it needs my commentary.'}
           </p>
         </Card>
 

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
+  onOpenMilestone: (id?: number) => 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,8 +32,8 @@ export function RunwayScreen({
 
       <Card overline="Milestones" flush>
         <div>
-          {RUNWAY.map((m, i) => (
+          {rows.map((m, i) => (
-            <div key={m.name} onClick={onOpenMilestone} style={{
+            <div key={m.name} onClick={() => onOpenMilestone(m.id)} 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,14 @@ 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,
+  milestoneView,
+  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'
@@ -87,6 +94,7 @@ export function AppShell() {
   const [offline, setOffline] = useState(false)
   const [issue, setIssue] = useState<IssueRef | null>(null)
   const [readIds, setReadIds] = useState<number[]>([])
+  const [milestoneId, setMilestoneId] = useState<number | null>(null)
   const [backlog, refetchBacklog] = useBacklog()
   const boardColumns =
     backlog.status === 'ready' ? issuesToBoardColumns(backlog.issues, backlog.timelines) : undefined
@@ -98,6 +106,19 @@ 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
+  const milestone =
+    backlog.status === 'ready' && milestoneId != null
+      ? (milestoneView(
+          milestoneId,
+          backlog.issues,
+          backlog.milestones,
+          backlog.deps,
+          backlog.timelines,
+          calibration?.model,
+        ) ?? undefined)
+      : undefined
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
@@ -194,14 +215,18 @@ export function AppShell() {
         return (
           <RunwayScreen
             onOpenCalibration={() => setView('calibration')}
-            onOpenMilestone={() => setView('milestone')}
+            onOpenMilestone={(id) => {
+              setMilestoneId(id ?? null)
+              setView('milestone')
+            }}
             calibration={calibration ? { n: calibration.model.n, coldStart: calibration.model.coldStart } : undefined}
+            milestones={runwayMilestones}
           />
         )
       case 'calibration':
         return <CalibrationScreen onBack={() => setView('runway')} data={calibration?.data} />
       case 'milestone':
-        return <MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} />
+        return <MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} data={milestone} />
       case 'inbox':
         return (
           <InboxScreen

apps/desktop/src/renderer/src/data/fixtures.ts

@@ -315,6 +315,8 @@ export interface RunwayMilestone {
   spread: number
   tone: 'ok' | 'warn'
   note: string
+  /** gitea milestone id, for the drill-in (absent on the demo fixture). */
+  id?: number
 }
 
 export const RUNWAY: RunwayMilestone[] = [

apps/desktop/src/renderer/src/global.d.ts

@@ -28,17 +28,31 @@ export type CaptureResult =
   | { ok: false; reason: 'unconfigured' | 'error'; message?: string }
   | ({ ok: true } & CaptureProposal)
 
+/** A reconciled snapshot as it crosses the bridge. */
+export interface SnapshotPayload {
+  configured: boolean
+  issues: GiteaIssue[]
+  milestones: GiteaMilestone[]
+  deps: DependencyEdge[]
+  /** Normalized lifecycle events keyed by issue number. */
+  timelines: Record<number, LifecycleEvent[]>
+  /** true when served from the persisted cache (offline / instant boot). */
+  stale?: boolean
+  /** ISO time the persisted snapshot was reconciled (present on cached reads). */
+  savedAt?: string
+}
+
+/** Boot payload — the persisted snapshot, or a marker that there's none yet. */
+export type BootPayload =
+  | { configured: false }
+  | { configured: true; cached: false }
+  | ({ configured: true; cached: true } & Omit<SnapshotPayload, 'configured'>)
+
 /** The gitea bridge exposed by the preload over IPC (main-process backed). */
 export interface GiteaBridge {
   status(): Promise<{ configured: boolean; repo: string | null }>
-  reconcile(): Promise<{
+  boot(): Promise<BootPayload>
-    configured: boolean
+  reconcile(): Promise<SnapshotPayload>
-    issues: GiteaIssue[]
-    milestones: GiteaMilestone[]
-    deps: DependencyEdge[]
-    /** Normalized lifecycle events keyed by issue number. */
-    timelines: Record<number, LifecycleEvent[]>
-  }>
   getIssue(index: number): Promise<GiteaIssue | null>
   applyChange(change: IssueChange): Promise<ApplyChangeResult>
   createIssues(issues: ProposedIssue[]): Promise<CreateIssuesResult>

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 {
-import { type BurnUpData, buildBurnUpData } from './dates.js'
+  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,133 @@ 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 {
+      id: m.id,
+      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',
+    }
+  })
+}
+
+export interface MilestoneGroup {
+  label: string
+  issues: { id: number; title: string; labels: string[]; days?: string }[]
+}
+
+export interface MilestoneView {
+  name: string
+  due: string
+  soft: boolean
+  scopeCount: number
+  scopeEstDays: number
+  doneCount: number
+  donePct: number
+  /** p50..p90 landing range for the remaining open scope; null when nothing's open. */
+  forecastRange: string | null
+  cone: BurnUpData | null
+  groups: MilestoneGroup[]
+}
+
+/**
+ * The Milestone drill-in: real scope, done %, a Monte Carlo cone over the
+ * milestone's remaining open work, and its issues grouped by lifecycle column.
+ * Returns null for an unknown id — the screen then shows the demo fixture.
+ */
+export function milestoneView(
+  id: number,
+  issues: GiteaIssue[],
+  milestones: GiteaMilestone[],
+  deps: DependencyEdge[],
+  timelines: Timelines = {},
+  calibration?: CalibrationModel,
+  today: Date = new Date(),
+): MilestoneView | null {
+  const m = milestones.find((x) => x.id === id)
+  if (!m) return null
+  const all = issues.filter((i) => i.milestone?.id === id)
+  const open = all.filter((i) => i.state === 'open')
+  const done = all.filter((i) => i.state === 'closed')
+  const scopeEstDays = all.reduce((sum, i) => sum + (i.facts.estimateDays ?? 2), 0)
+
+  const model = calibration ? toDurationModel(calibration) : undefined
+  const f = forecast(
+    open.map((i) => ({
+      number: i.number,
+      title: i.title,
+      labels: i.labels,
+      estimateDays: i.facts.estimateDays,
+      priority: i.facts.priority,
+    })),
+    deps,
+    model ? { model } : {},
+  )
+  const cone = buildBurnUpData(f, today)
+
+  const inf = inferAll(all, timelines, today)
+  const groups: MilestoneGroup[] = COLUMN_ORDER.map((key) => ({
+    label: COLUMN_LABELS[key],
+    issues: all
+      .filter((i) => inf.get(i.number)!.column === key)
+      .map((i) => {
+        const days = inf.get(i.number)!.steepingDays
+        return { id: i.number, title: i.title, labels: i.labels, days: days != null ? `${days}d` : undefined }
+      }),
+  })).filter((g) => g.issues.length > 0)
+
+  return {
+    name: m.title,
+    due: m.dueOn ? formatShort(new Date(m.dueOn)) : 'no date',
+    soft: true,
+    scopeCount: all.length,
+    scopeEstDays,
+    doneCount: done.length,
+    donePct: all.length ? Math.round((done.length / all.length) * 100) : 0,
+    forecastRange: cone ? cone.rangeLabel : null,
+    cone,
+    groups,
+  }
+}

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

@@ -12,13 +12,18 @@ export type BacklogState =
       milestones: GiteaMilestone[]
       deps: DependencyEdge[]
       timelines: Record<number, LifecycleEvent[]>
+      /** true while showing the persisted snapshot (instant boot / offline). */
+      stale: boolean
+      /** ISO time the shown snapshot was reconciled, when stale. */
+      savedAt?: string
     }
 
 /**
- * Reconcile the managed repo through the main-process bridge. Runs once on
+ * Reconcile the managed repo through the main-process bridge, stale-while-
- * mount; the returned `refetch` re-reconciles after a write so the board and
+ * revalidate: on mount it shows the persisted snapshot instantly (marked stale),
- * forecast reflect the change. `unconfigured` means no token — the UI falls
+ * then a fresh reconcile supersedes it. If gitea is unreachable, the fresh
- * back to demo fixtures. Errors (network, bad token) surface as `error`.
+ * reconcile falls back to the persisted snapshot (offline). `refetch` re-syncs
+ * after a write. `unconfigured` means no token — the UI uses demo fixtures.
  */
 export function useBacklog(): [BacklogState, () => void] {
   const [state, setState] = useState<BacklogState>({ status: 'loading' })
@@ -27,6 +32,30 @@ export function useBacklog(): [BacklogState, () => void] {
 
   useEffect(() => {
     let alive = true
+
+    // instant boot from the persisted snapshot (only on first mount, not refetch)
+    if (nonce === 0) {
+      window.commitea.gitea
+        .boot()
+        .then((b) => {
+          if (!alive || !('cached' in b) || !b.cached) return
+          setState((prev) =>
+            prev.status === 'ready' && !prev.stale
+              ? prev // a fresh reconcile already won the race
+              : {
+                  status: 'ready',
+                  issues: b.issues,
+                  milestones: b.milestones,
+                  deps: b.deps,
+                  timelines: b.timelines,
+                  stale: true,
+                  savedAt: b.savedAt,
+                },
+          )
+        })
+        .catch(() => {})
+    }
+
     window.commitea.gitea
       .reconcile()
       .then((r) => {
@@ -39,12 +68,19 @@ export function useBacklog(): [BacklogState, () => void] {
                 milestones: r.milestones,
                 deps: r.deps,
                 timelines: r.timelines,
+                stale: r.stale ?? false,
+                savedAt: r.savedAt,
               }
             : { status: 'unconfigured' },
         )
       })
       .catch((e: unknown) => {
-        if (alive) setState({ status: 'error', message: e instanceof Error ? e.message : String(e) })
+        if (alive) {
+          // keep a shown boot snapshot rather than clobbering it with an error
+          setState((prev) =>
+            prev.status === 'ready' ? prev : { status: 'error', message: e instanceof Error ? e.message : String(e) },
+          )
+        }
       })
     return () => {
       alive = false