feat: real Milestone drill-in — completes the Runway story

Clicking a milestone on Runway now opens its real detail: scope + done %, a Monte Carlo cone over the remaining open work, and the milestone's issues grouped by lifecycle column. Threaded the gitea milestone id through the Runway row → AppShell → a milestoneView(). - backlog.ts: milestoneView(id, ...) → { name, due, scope/done, forecast cone + range, groups by lifecycle column }. Reuses forecast + buildBurnUpData + lifecycle inference. null for an unknown id → the screen shows the demo fixture. - RunwayMilestone gains an `id`; runwayView sets it; RunwayScreen.onOpenMilestone(id). - MilestoneScreen takes optional `data`; renders real header/stats/cone/issue-groups when present, fixture otherwise. Verified: desktop typecheck clean, 14 fixture e2e green. Live: clicking "P2 — Scheduler + Monte Carlo" opens a real detail — 7 issues · est 20d, 0/7 done, cone "80% Aug 17–26", issues in Triage/In-review from the real event stream (screenshot). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-09 00:12:11 -04:00
parent ae46cb99b3
commit 57595852a4
6 changed files with 151 additions and 19 deletions
--- a/apps/desktop/src/renderer/src/components/screens/milestone-screen.tsx
+++ b/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
-export function MilestoneScreen({ onBack, onOpenIssue }: { onBack: () => void; onOpenIssue: (issue: IssueRef) => void }) {
+// Milestone detail — scope, cone, issues; forecasts stay ranges.
+// `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>
-              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>80% Mar 3–12</span>
+              <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' }}>{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="Done" value="24 · 57%" />
-          <Stat label="Forecast" value="80% Mar 3–12" />
+          <Stat label="Scope" value={scopeStat} />
+          <Stat label="Done" value={doneStat} />
+          <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: '500 14px var(--font-mono)', color: 'var(--ok)', whiteSpace: 'nowrap' }}>−2d · cone narrowed</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(--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>
-          <BurnUpCone />
+        <Card overline="Burn-up" title={<>80% this lands <span style={{ whiteSpace: 'nowrap' }}>{data ? (data.forecastRange ?? 'shipped') : 'Mar 3–12'}</span></>} jade>
+          <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>

--- a/apps/desktop/src/renderer/src/components/screens/runway-screen.tsx
+++ b/apps/desktop/src/renderer/src/components/screens/runway-screen.tsx
@@ -13,7 +13,7 @@ export function RunwayScreen({
  milestones,
 }: {
  onOpenCalibration: () => void
-  onOpenMilestone: () => void
+  onOpenMilestone: (id?: number) => void
  calibration?: { n: number; coldStart: boolean }
  milestones?: RunwayMilestone[]
 }) {
@@ -33,7 +33,7 @@ export function RunwayScreen({
      <Card overline="Milestones" flush>
        <div>
          {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)',
            }}
--- a/apps/desktop/src/renderer/src/components/shell/app-shell.tsx
+++ b/apps/desktop/src/renderer/src/components/shell/app-shell.tsx
@@ -8,6 +8,7 @@ import {
  backlogCalibration,
  forecastBacklog,
  issuesToBoardColumns,
+  milestoneView,
  runwayView,
  scheduleFocus,
 } from '../../lib/backlog.js'
@@ -93,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
@@ -106,6 +108,17 @@ export function AppShell() {
      : 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')
@@ -202,7 +215,10 @@ 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}
          />
@@ -210,7 +226,7 @@ export function AppShell() {
      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
--- a/apps/desktop/src/renderer/src/data/fixtures.ts
+++ b/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[] = [
--- a/apps/desktop/src/renderer/src/lib/backlog.ts
+++ b/apps/desktop/src/renderer/src/lib/backlog.ts
@@ -279,6 +279,7 @@ export function runwayView(
  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,
@@ -290,3 +291,82 @@ export function runwayView(
    }
  })
 }
+
+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,
+  }
+}