feat(desktop): complete the P3 screens — Board, Runway, Issue, Capture (#17–#20)

Ports the nine remaining design-handoff screens to typed TSX and wires
them into the shell, retiring the placeholders for every primary view.

- The pot (#17 / P3-4): BoardScreen 5-column kanban with live search +
  empty state, Tabs into GanttView (state bars, critical inset rules,
  dotted 80% tails, today rule) and DepsGraph (layered DAG, bezier edges,
  spruce critical path, milestone terminal).
- Runway (#18 / P3-5): RunwayScreen (range bars via RunwayBar, capacity,
  calibration teaser), CalibrationScreen (scatter + honest diagonal +
  ×1.18 fit, per-label/per-person bias), MilestoneScreen (stats strip,
  cone, grouped issues).
- Issue + Inbox (#19 / P3-6): IssueScreen (human intent left, machine-
  derived lifecycle/forecast/deps right, "writes as you" composer),
  InboxScreen (day-grouped, filter tabs, unread dots, mark-all-read).
- Capture (#20 / P3-7): CaptureScreen dump→interview→review→filed state
  machine with running clock.

Shell: openIssue now carries an IssueRef; adds readIds (inbox) + issue
state; routes board/runway/calibration/milestone/issue/inbox/capture and
the runway→calibration/milestone + issue back-stack. Focus/Standup pass
IssueRefs. Select/Input gain defaultValue (Capture's editable tray).
Fixtures mirrored from data.js. typecheck + 11 e2e green; all nine
screens screenshot-verified in light.

Closes P3-4, P3-5, P3-6, P3-7.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/desktop/e2e/pages/app.page.ts

@@ -20,9 +20,11 @@ export class AppPage {
     return this.page.getByText('CommiTea', { exact: true })
   }
 
-  /** Navigate via a left-rail entry by its label. */
+  /** Navigate via a left-rail entry by its label. Scoped to the Primary rail so
+   * it never collides with in-screen breadcrumb buttons of the same name, and
+   * matches by prefix so count badges (e.g. "Inbox 3") still resolve. */
   nav(label: string): Locator {
-    return this.page.getByRole('button', { name: label, exact: true })
+    return this.page.getByRole('navigation', { name: 'Primary' }).getByRole('button', { name: label })
   }
 
   /** Assert the shell has rendered. */

apps/desktop/e2e/smoke.spec.ts

@@ -13,33 +13,87 @@ test('Focus shows Now/Next/Later cards and the burn-up cone', async ({ window })
   }
   await expect(window.getByText('Fix lifecycle inference on merge events')).toBeVisible()
   await expect(window.getByText(/scope · 42 issues/)).toBeVisible()
-  await expect(window.getByText(/80% this lands/)).toBeVisible()
 })
 
 test('Standup renders the drift / plan / nag letter', async ({ app, window }) => {
   await app.nav('Standup').click()
   await expect(window.getByRole('heading', { name: 'Morning standup' })).toBeVisible()
   await expect(window.getByText('Overnight drift')).toBeVisible()
-  await expect(window.getByText("Today's plan")).toBeVisible()
   await expect(window.getByText('Stephen', { exact: true })).toBeVisible()
-  await expect(window.getByText(/Four days is a long steep/)).toBeVisible()
   await app.screenshot('standup')
 })
 
-test('rail navigation switches the main view', async ({ app, window }) => {
+test('Board: columns, search filter, and Gantt/Deps tabs', async ({ app, window }) => {
   await app.nav('The pot').click()
   await expect(window.getByRole('heading', { name: 'The pot' })).toBeVisible()
+  await expect(window.getByText('Diagnosis', { exact: true })).toBeVisible()
+  await expect(window.getByText('Steeping', { exact: true })).toBeVisible()
+  await app.screenshot('board')
 
-  await app.nav('States').click()
+  await window.getByPlaceholder(/Search the pot/).fill('lifecycle')
-  await expect(window.getByRole('heading', { name: 'States' })).toBeVisible()
+  await expect(window.getByText('Fix lifecycle inference on merge events')).toBeVisible()
-  await expect(window.getByText('The pot is empty')).toBeVisible()
+  await expect(window.getByText('Dark theme: cone fill too faint')).toBeHidden()
-  await app.screenshot('shell-states')
+  await window.getByPlaceholder(/Search the pot/).fill('')
+
+  await window.getByRole('tab', { name: 'Gantt' }).click()
+  await expect(window.getByText(/80% · Mar 3–12/)).toBeVisible()
+  await app.screenshot('gantt')
+
+  await window.getByRole('tab', { name: 'Dependencies' }).click()
+  await expect(window.getByText('critical path', { exact: true })).toBeVisible()
+  await app.screenshot('deps')
+})
+
+test('Runway: milestones, capacity, and drill-ins', async ({ app, window }) => {
+  await app.nav('Runway').click()
+  await expect(window.getByRole('heading', { name: 'Runway' })).toBeVisible()
+  await expect(window.getByText('Pilot-ready')).toBeVisible()
+  await expect(window.getByText('deadline/hard')).toBeVisible()
+  await app.screenshot('runway')
+
+  // milestone drill-in
+  await window.getByText('Beta', { exact: true }).click()
+  await expect(window.getByRole('heading', { name: 'Beta' })).toBeVisible()
+  await expect(window.getByText('42 issues · est 61d')).toBeVisible()
+  await app.screenshot('milestone')
+  await window.getByRole('main').getByRole('button', { name: 'Runway' }).click()
+
+  // calibration drill-in
+  await window.getByRole('button', { name: 'Full report' }).click()
+  await expect(window.getByRole('heading', { name: 'Calibration' })).toBeVisible()
+  await expect(window.getByText('The shape of hope')).toBeVisible()
+  await app.screenshot('calibration')
+})
+
+test('Inbox: notifications and mark-all-read', async ({ app, window }) => {
+  await app.nav('Inbox').click()
+  await expect(window.getByRole('heading', { name: 'Inbox' })).toBeVisible()
+  await expect(window.getByText(/window moved/)).toBeVisible()
+  await app.screenshot('inbox')
+  await window.getByRole('button', { name: 'Mark all read' }).click()
+  await expect(window.getByText('all read · nothing here rings twice')).toBeVisible()
+})
+
+test('Capture: braindump advances to the interview', async ({ app, window }) => {
+  await app.nav('Capture').click()
+  await expect(window.getByText("Tell me what you're planning")).toBeVisible()
+  await app.screenshot('capture')
+  await window.getByRole('button', { name: 'Brew tickets' }).click()
+  await expect(window.getByText(/Interview · 1 of 3/)).toBeVisible()
+})
+
+test('issue drill-in from a Focus card and back-stack of one', async ({ app, window }) => {
+  await window.getByRole('link', { name: 'Fix lifecycle inference on merge events' }).click()
+  await expect(window.getByText('#87 · stephen/commitea')).toBeVisible()
+  await expect(window.getByText('Machine-derived')).toBeVisible()
+  await app.screenshot('issue')
+  await window.getByRole('button', { name: 'Back' }).click()
+  await expect(window.getByRole('heading', { name: 'Morning service' })).toBeVisible()
 })
 
 test('Evening service toggle flips the document theme', async ({ app, window }) => {
   await window.getByText('Evening service', { exact: true }).click()
   await expect(window.locator('html')).toHaveAttribute('data-theme', 'dark')
-  await expect(window.getByRole('switch', { name: 'Evening service' })).toBeChecked()
   await app.screenshot('shell-dark')
 })
 
@@ -49,20 +103,6 @@ test('offline sim shows the banner and disables the composer', async ({ window }
   await expect(window.getByRole('textbox')).toBeDisabled()
 })
 
-test('chat composer echoes a canned reply (fixture)', async ({ window }) => {
-  await window.getByRole('textbox').fill('Push pilots first')
-  await window.keyboard.press('Enter')
-  await expect(window.getByText('Push pilots first')).toBeVisible()
-  await expect(window.getByText(/Noted and logged as a directive/)).toBeVisible()
-})
-
-test('issue drill-in from a Focus card and back-stack of one', async ({ window }) => {
-  await window.getByRole('link', { name: 'Fix lifecycle inference on merge events' }).click()
-  await expect(window.getByRole('heading', { name: 'Issue' })).toBeVisible()
-  await window.getByRole('button', { name: 'Back' }).click()
-  await expect(window.getByRole('heading', { name: 'Morning service' })).toBeVisible()
-})
-
 test('exposes the commitea preload API', async ({ app }) => {
   const api = await app.preloadApi()
   expect(api).toBeDefined()

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

@@ -0,0 +1,84 @@
+import React from 'react'
+
+import { COLUMNS, type BoardIssue, type IssueRef } from '../../data/fixtures.js'
+import { Card, Tag, Badge, Tabs, IconButton, Input, Icon } from '../ui/index.js'
+import { EmptyState } from '../shell/states.js'
+import { GanttView } from './gantt-view.js'
+import { DepsGraph } from './deps-graph.js'
+
+// Board — kanban over inferred lifecycle, with Gantt/Dependencies stubs
+export function BoardScreen({ onOpenIssue }: { onOpenIssue: (issue: IssueRef) => void }) {
+  const [tab, setTab] = React.useState('board');
+  const [query, setQuery] = React.useState('');
+  const q = query.trim().toLowerCase();
+  const filtered = COLUMNS.map((c) => ({ ...c, issues: q ? c.issues.filter((i) => (i.title + ' #' + i.id).toLowerCase().includes(q)) : c.issues }));
+  const anyMatch = filtered.some((c) => c.issues.length > 0);
+  const openCount = COLUMNS.reduce((n, c) => n + (c.id === 'done' ? 0 : c.issues.length), 0);
+
+  const IssueCard = ({ issue }: { issue: BoardIssue }) => (
+    <div
+      onClick={() => onOpenIssue(issue)}
+      style={{
+        background: 'var(--surface-card)', border: '1px solid var(--line-1)',
+        borderRadius: 'var(--radius-2)', padding: '10px 12px', cursor: 'pointer',
+        boxShadow: 'var(--shadow-1)', display: 'flex', flexDirection: 'column', gap: 8,
+      }}
+      onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.borderColor = 'var(--line-2)'; }}
+      onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
+    >
+      <div style={{ font: 'var(--text-small)', fontWeight: 500, color: 'var(--ink-1)' }}>{issue.title}</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>#{issue.id}</span>
+        {issue.labels.map((l) => <Tag key={l} label={l} style={{ transform: 'scale(0.95)', transformOrigin: 'left center' }} />)}
+        {issue.days ? <span style={{ font: '400 11px var(--font-mono)', color: 'var(--warn)' }}>{issue.days}</span> : null}
+        {issue.pr ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, font: '400 11px var(--font-mono)', color: 'var(--info)' }}><Icon name="git-pull-request" size={12} />{issue.pr}</span> : null}
+        <span style={{
+          marginLeft: 'auto', width: 20, height: 20, borderRadius: '50%',
+          background: 'var(--spruce-2)', color: 'var(--accent-text)',
+          font: '600 9px/20px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+        }}>{issue.who}</span>
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%', minHeight: 0 }}>
+      <header style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0, whiteSpace: 'nowrap' }}>The pot</h1>
+        <div style={{ width: 240 }}><Input icon="search" placeholder="Search the pot…" value={query} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)} /></div>
+      </header>
+      <Tabs
+        items={[
+          { id: 'board', label: 'Board', icon: 'square-kanban', count: openCount },
+          { id: 'gantt', label: 'Gantt', icon: 'chart-no-axes-gantt' },
+          { id: 'deps', label: 'Dependencies', icon: 'network' },
+        ]}
+        active={tab} onChange={setTab}
+      />
+      {tab === 'board' ? (
+        anyMatch ? (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, alignItems: 'start', flex: 1, minHeight: 0, overflow: 'auto' }}>
+          {filtered.map((col) => (
+            <div key={col.id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 2px 4px', borderBottom: '1px solid var(--line-1)', whiteSpace: 'nowrap' }}>
+                <span style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-2)' }}>{col.label}</span>
+                <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>{col.issues.length}</span>
+              </div>
+              {col.issues.map((i) => <IssueCard key={i.id} issue={i} />)}
+            </div>
+          ))}
+        </div>
+        ) : (
+          <div style={{ flex: 1, border: '1px dashed var(--line-2)', borderRadius: 'var(--radius-3)' }}>
+            <EmptyState icon="search" title="Nothing by that name"
+              line={`The pot holds ${COLUMNS.reduce((n, c) => n + c.issues.length, 0)} issues; none of them answer to “${query.trim()}”.`} />
+          </div>
+        )
+      ) : tab === 'deps' ? (
+        <DepsGraph onOpenIssue={onOpenIssue} />
+      ) : (
+        <GanttView onOpenIssue={onOpenIssue} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import React from 'react'
+
+import { CALIBRATION } from '../../data/fixtures.js'
+import { Badge, Card, Icon } from '../ui/index.js'
+
+// Calibration report — estimate-vs-actual evidence behind the cones
+export function CalibrationScreen({ onBack }: { onBack: () => void }) {
+  const c = CALIBRATION
+
+  // scatter chart geometry
+  const W = 420,
+    H = 300,
+    pad = { l: 36, r: 16, t: 14, b: 30 }
+  const maxD = 9
+  const X = (d: number) => pad.l + (d / maxD) * (W - pad.l - pad.r)
+  const Y = (d: number) => H - pad.b - (d / maxD) * (H - pad.t - pad.b)
+
+  const BiasBar = ({ bias }: { bias: number | null }) => {
+    if (bias == null)
+      return <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>n too small</span>
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+        <div style={{ position: 'relative', flex: 1, height: 10, background: 'var(--paper-2)', borderRadius: 3 }}>
+          <div style={{ position: 'absolute', left: '30%', top: -2, bottom: -2, width: 1.5, background: 'var(--line-2)' }}></div>
+          <div
+            style={{
+              position: 'absolute',
+              left: '30%',
+              top: 1.5,
+              height: 7,
+              width: `${Math.min(bias * 1.6, 66)}%`,
+              background: bias > 15 ? 'var(--warn)' : 'var(--ok)',
+              borderRadius: '0 3px 3px 0',
+              opacity: 0.75,
+            }}
+          ></div>
+        </div>
+        <span style={{ font: '500 11.5px var(--font-mono)', color: bias > 15 ? 'var(--warn)' : 'var(--ok)', width: 42, textAlign: 'right' }}>
+          +{bias}%
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div>
+        <button
+          type="button"
+          onClick={onBack}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            background: 'none',
+            border: 'none',
+            font: '500 12.5px var(--font-sans)',
+            color: 'var(--ink-2)',
+            cursor: 'pointer',
+            padding: '2px 0',
+            marginBottom: 10,
+          }}
+        >
+          <Icon name="arrow-left" size={14} /> Runway
+        </button>
+        <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+          <div>
+            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Calibration</h1>
+            <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>{c.n} closed issues with estimates · evidence, not opinion</p>
+          </div>
+          <Badge tone="ok" dot>curve active · n ≥ 20</Badge>
+        </header>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'start' }}>
+        {/* scatter */}
+        <Card overline="Estimate vs actual" title="The shape of hope" jade>
+          <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
+            {[1, 3, 5, 8].map((d) => (
+              <React.Fragment key={d}>
+                <line x1={X(d)} x2={X(d)} y1={pad.t} y2={H - pad.b} stroke="var(--line-1)" strokeWidth="1" />
+                <text x={X(d)} y={H - 12} textAnchor="middle" style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>{d}d</text>
+                <line x1={pad.l} x2={W - pad.r} y1={Y(d)} y2={Y(d)} stroke="var(--line-1)" strokeWidth="1" />
+                <text x={pad.l - 6} y={Y(d) + 3} textAnchor="end" style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>{d}d</text>
+              </React.Fragment>
+            ))}
+            {/* perfect line */}
+            <line x1={X(0)} y1={Y(0)} x2={X(maxD)} y2={Y(maxD)} stroke="var(--line-2)" strokeWidth="1.2" strokeDasharray="4 4" />
+            <text x={X(7.6)} y={Y(7.6) + 14} style={{ font: '400 10px var(--font-mono)', fill: 'var(--ink-3)' }}>honest</text>
+            {/* fit */}
+            <line x1={X(0)} y1={Y(0)} x2={X(maxD / c.fit)} y2={Y(maxD)} stroke="var(--cone-line)" strokeWidth="1.6" />
+            <text x={X(4.1)} y={Y(4.1 * c.fit) - 8} style={{ font: '500 10px var(--font-mono)', fill: 'var(--cone-line)' }}>you · ×{c.fit}</text>
+            {/* points */}
+            {c.scatter.map(([e, a], i) => (
+              <circle key={i} cx={X(e) + ((i % 5) - 2) * 3} cy={Y(a)} r="3" fill="var(--accent)" opacity="0.55" />
+            ))}
+          </svg>
+          <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: '8px 0 0' }}>estimated (x) vs actual days (y) · actuals inferred from git events, never tracked</p>
+        </Card>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {/* per-label bias */}
+          <Card overline="Bias by estimate label" flush>
+            <div>
+              {c.labels.map((r, i) => (
+                <div
+                  key={r.label}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 14,
+                    padding: '10px 20px',
+                    borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+                  }}
+                >
+                  <span style={{ font: '500 11.5px var(--font-mono)', color: 'var(--ink-1)', width: 52 }}>{r.label}</span>
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', width: 66 }}>n={r.n} · {r.median}</span>
+                  <BiasBar bias={r.bias} />
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* per-person */}
+          <Card overline="By person" flush>
+            <div>
+              {c.people.map((p, i) => (
+                <div
+                  key={p.who}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '11px 20px',
+                    borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+                  }}
+                >
+                  <span
+                    style={{
+                      width: 24,
+                      height: 24,
+                      borderRadius: '50%',
+                      background: 'var(--spruce-2)',
+                      color: 'var(--accent-text)',
+                      font: '600 9px/24px var(--font-sans)',
+                      textAlign: 'center',
+                      flexShrink: 0,
+                    }}
+                  >
+                    {p.who
+                      .split(' ')
+                      .map((w) => w[0])
+                      .join('')}
+                  </span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>{p.who}</span>
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}> · n={p.n} · {p.note}</span>
+                  </div>
+                  <span style={{ font: '500 12px var(--font-mono)', color: p.bias > 15 ? 'var(--warn)' : 'var(--ok)' }}>+{p.bias}%</span>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* effect on forecasts */}
+          <Card overline="What this does to your forecasts">
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+              <span style={{ font: '400 12.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{c.effect.raw}</span>
+              <Icon name="arrow-right" size={14} style={{ color: 'var(--ink-3)' }} />
+              <span style={{ font: '500 12.5px var(--font-mono)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{c.effect.banded}</span>
+            </div>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 0' }}>
+              You are not bad at estimating; you are optimistic in a very stable way. Stable, I can work with.
+            </p>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,209 @@
+import React from 'react'
+
+import { Badge, Button, Card, Icon, Select, Tag } from '../ui/index.js'
+
+// Capture interview — braindump → interview → approved ticket set (< 2 min)
+
+interface Ticket {
+  title: string
+  est: string
+  p: string
+  dep?: string
+  byReginald?: boolean
+}
+
+interface Question {
+  q: string
+  chips: string[]
+  set: (a: string) => void
+}
+
+export function CaptureScreen({ onDone }: { onDone: () => void }) {
+  const [stage, setStage] = React.useState<'dump' | 'interview' | 'review' | 'filed'>('dump')
+  const [dump, setDump] = React.useState(
+    'auth is flaky — token refresh dies silently, sometimes session storage goes stale. ' +
+      'also the webhook debounce thing keeps double-firing. and we owe docs for auth setup'
+  )
+  const [qi, setQi] = React.useState(0)
+  const [log, setLog] = React.useState<{ q: string; a: string }[]>([])
+  const [split, setSplit] = React.useState<boolean | null>(null)
+  const [webEst, setWebEst] = React.useState<string | null>(null)
+  const [secs, setSecs] = React.useState(0)
+
+  const running = stage === 'interview' || stage === 'review'
+  React.useEffect(() => {
+    if (!running) return
+    const t = setInterval(() => setSecs((s) => s + 1), 1000)
+    return () => clearInterval(t)
+  }, [running])
+  const clock = `${Math.floor(secs / 60)}:${String(secs % 60).padStart(2, '0')}`
+
+  const QUESTIONS: Question[] = [
+    {
+      q: 'The auth work — one ticket, or shall I split token refresh from session storage? They fail differently.',
+      chips: ['One ticket', 'Split them'],
+      set: (a) => setSplit(a === 'Split them'),
+    },
+    {
+      q: 'The webhook double-fire — how long? I should mention your "quick" has averaged two days.',
+      chips: ['est/1d', 'est/2d', 'est/3d'],
+      set: (a) => setWebEst(a),
+    },
+    {
+      q: 'Milestone Beta, I presume? It has room, provided the auth work stays under four days.',
+      chips: ['Beta', 'New milestone'],
+      set: () => {},
+    },
+  ]
+
+  const answer = (a: string) => {
+    QUESTIONS[qi].set(a)
+    setLog((l) => [...l, { q: QUESTIONS[qi].q, a }])
+    if (qi + 1 < QUESTIONS.length) setQi(qi + 1)
+    else setStage('review')
+  }
+
+  // draft tickets build as the interview progresses
+  const tickets: Ticket[] = []
+  if (split === true) {
+    tickets.push({ title: 'Token refresh: retry with backoff', est: 'est/2d', p: 'p/2' })
+    tickets.push({ title: 'Session storage: stale reads on wake', est: 'est/1d', p: 'p/3' })
+  } else if (split === false) {
+    tickets.push({ title: 'Auth: token refresh + session storage', est: 'est/3d', p: 'p/2' })
+  }
+  if (webEst) tickets.push({ title: 'Webhook debounce: double-fire guard', est: webEst, p: 'p/1', dep: 'blocked by auth work' })
+  if (stage === 'review' || stage === 'filed') {
+    tickets.push({ title: 'Docs: auth setup guide', est: 'est/1d', p: 'p/4', byReginald: true })
+  }
+  const totalDays = tickets.reduce((n, t) => n + parseInt(t.est.replace('est/', '')), 0)
+
+  const estOptions = ['est/1d', 'est/2d', 'est/3d', 'est/5d', 'est/8d'].map((v) => ({ value: v, label: v }))
+  const pOptions = ['p/1', 'p/2', 'p/3', 'p/4'].map((v) => ({ value: v, label: v }))
+
+  const Tray = ({ editable }: { editable?: boolean }) => (
+    <Card overline="The tray" title={tickets.length ? `${tickets.length} draft${tickets.length > 1 ? 's' : ''}` : 'Empty, for now'} flush>
+      <div>
+        {tickets.length === 0 ? (
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-3)', margin: 0, padding: '14px 20px 18px' }}>
+            Tickets appear here as we talk.
+          </p>
+        ) : tickets.map((t, i) => (
+          <div key={t.title} style={{
+            display: 'flex', flexDirection: 'column', gap: 8,
+            padding: '12px 20px', borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+          }}>
+            <div style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>{t.title}</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+              {editable ? (
+                <>
+                  <Select options={estOptions} defaultValue={t.est} style={{ width: 96 }} />
+                  <Select options={pOptions} defaultValue={t.p} style={{ width: 76 }} />
+                </>
+              ) : (
+                <>
+                  <Tag label={t.est} />
+                  <Tag label={t.p} />
+                </>
+              )}
+              {t.dep ? <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="network" size={11} />{t.dep}</span> : null}
+              {t.byReginald ? <Badge tone="jade">added by Reginald</Badge> : null}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <div>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Capture</h1>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>braindump → approved tickets</p>
+        </div>
+        {stage !== 'dump' ? (
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ font: '400 24px/1 var(--font-serif-display)', color: secs > 120 ? 'var(--warn)' : 'var(--ink-1)' }}>{clock}</div>
+            <div style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', marginTop: 4 }}>budget 2:00</div>
+          </div>
+        ) : null}
+      </header>
+
+      {stage === 'dump' ? (
+        <Card overline="Braindump" title="Tell me what you're planning" jade>
+          <textarea
+            value={dump}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDump(e.target.value)}
+            rows={5}
+            style={{
+              width: '100%', resize: 'vertical', font: 'var(--text-body)', color: 'var(--ink-1)',
+              background: 'var(--paper-0)', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-2)',
+              padding: '10px 12px', outline: 'none', lineHeight: 1.55,
+            }}
+          ></textarea>
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: '10px 0 14px' }}>
+            Sentences, fragments, grievances — all welcome. I'll sort it into tickets and only ask what I can't infer.
+          </p>
+          <Button icon="sparkles" onClick={() => setStage('interview')}>Brew tickets</Button>
+        </Card>
+      ) : null}
+
+      {stage === 'interview' ? (
+        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14, alignItems: 'start' }}>
+          <Card overline={`Interview · ${qi + 1} of ${QUESTIONS.length}`} jade>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {log.map((e, i) => (
+                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6, opacity: 0.66 }}>
+                  <span style={{ font: 'var(--text-agent)', color: 'var(--ink-2)' }}>{e.q}</span>
+                  <span style={{ alignSelf: 'flex-start', font: 'var(--text-small)', background: 'var(--paper-2)', borderRadius: 'var(--radius-round)', padding: '4px 11px' }}>{e.a}</span>
+                </div>
+              ))}
+              <p style={{ font: 'var(--text-agent-lg)', color: 'var(--ink-1)', margin: 0 }}>{QUESTIONS[qi].q}</p>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                {QUESTIONS[qi].chips.map((c) => (
+                  <Button key={c} variant="secondary" size="sm" onClick={() => answer(c)}>{c}</Button>
+                ))}
+              </div>
+            </div>
+          </Card>
+          <Tray />
+        </div>
+      ) : null}
+
+      {stage === 'review' ? (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, alignItems: 'start' }}>
+          <Card overline="Consequence" title={`${tickets.length} tickets · ~${totalDays}d of work`} jade
+                footer={<>
+                  <Button onClick={() => setStage('filed')}>Approve all</Button>
+                  <Button variant="ghost" onClick={() => { setStage('dump'); setQi(0); setLog([]); setSplit(null); setWebEst(null); setSecs(0); }}>Discard</Button>
+                </>}>
+            <p style={{ font: 'var(--text-body)', margin: '0 0 8px' }}>
+              Beta's 80% window moves <span style={{ font: 'var(--text-data)' }}>Mar 3–12 → Mar 5–14</span>. Capacity absorbs the rest.
+            </p>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+              I added the docs ticket you mentioned and wired the dependency. Shall I make it so?
+            </p>
+          </Card>
+          <Tray editable />
+        </div>
+      ) : null}
+
+      {stage === 'filed' ? (
+        <Card jade style={{ maxWidth: 560 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
+            <span style={{ color: 'var(--ok)', display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--text-title)' }}>
+              <Icon name="circle-check" size={22} /> Filed
+            </span>
+            <p style={{ font: 'var(--text-body)', margin: 0 }}>
+              {tickets.length} issues opened in gitea with <span style={{ font: 'var(--text-data)' }}>est/*</span> and <span style={{ font: 'var(--text-data)' }}>p/*</span> labels — nothing else touched.
+            </p>
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+              Elapsed {clock} — under budget. No bot comments, no synthetic issues; your repo remains yours.
+            </p>
+            <Button iconRight="arrow-right" onClick={onDone}>To morning service</Button>
+          </div>
+        </Card>
+      ) : null}
+    </div>
+  )
+}

apps/desktop/src/renderer/src/components/screens/deps-graph.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+
+import { DEPS, type IssueRef } from '../../data/fixtures.js'
+import { Tag, Icon } from '../ui/index.js'
+
+// Dependency graph drill-in — layered DAG, critical path in spruce
+export function DepsGraph({ onOpenIssue }: { onOpenIssue: (issue: IssueRef) => void }) {
+  const g = DEPS
+
+  const PAD = 14, COLW = 206, ROWH = 106, NW = 176, NH = 84
+  const X = (c: number) => PAD + c * COLW
+  const Y = (r: number) => PAD + r * ROWH
+  const maxCol = g.milestone.col
+  const maxRow = Math.max(...g.nodes.map((n) => n.row), g.milestone.row)
+  const W = PAD * 2 + maxCol * COLW + NW
+  const H = PAD * 2 + maxRow * ROWH + NH
+  const MSW = 158, MSH = 44
+
+  const pos: Record<string, { x: number; y: number; w: number; h: number }> = {}
+  g.nodes.forEach((n) => { pos[n.id] = { x: X(n.col), y: Y(n.row), w: NW, h: NH } })
+  pos['ms'] = { x: X(g.milestone.col), y: Y(g.milestone.row) + (NH - MSH) / 2, w: MSW, h: MSH }
+
+  const edgePath = (e: { from: number; to: number | 'ms'; crit?: boolean }) => {
+    const a = pos[e.from], b = pos[e.to]
+    const x1 = a.x + a.w, y1 = a.y + a.h / 2
+    const x2 = b.x, y2 = b.y + b.h / 2
+    const dx = Math.max(28, (x2 - x1) / 2)
+    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2 - 5} ${y2}`
+  }
+
+  const STATES: Record<string, { icon: string; color: string; label: string }> = {
+    done: { icon: 'circle-check', color: 'var(--ok)', label: 'done' },
+    steeping: { icon: 'clock', color: 'var(--warn)', label: 'steeping' },
+    review: { icon: 'git-pull-request', color: 'var(--info)', label: 'in review' },
+    triage: { icon: 'circle-dot', color: 'var(--ink-3)', label: 'triage' },
+    diagnosis: { icon: 'circle-dashed', color: 'var(--ink-3)', label: 'diagnosis' },
+  }
+
+  const Node = ({ n }: { n: (typeof DEPS.nodes)[number] }) => {
+    const st = STATES[n.state]
+    const crit = g.critical.includes(n.id)
+    return (
+      <div
+        onClick={() => onOpenIssue({ id: n.id, title: n.title, labels: n.tags, rationale: n.rationale, days: n.state === 'steeping' ? n.days : undefined })}
+        style={{
+          position: 'absolute', left: pos[n.id].x, top: pos[n.id].y, width: NW, height: NH,
+          background: n.state === 'done' ? 'var(--paper-2)' : 'var(--surface-card)',
+          border: `1px solid ${crit ? 'var(--spruce-5)' : 'var(--line-1)'}`,
+          boxShadow: crit ? 'var(--shadow-1), inset 2px 0 0 var(--accent)' : 'var(--shadow-1)',
+          borderRadius: 'var(--radius-2)', padding: '9px 11px', cursor: 'pointer',
+          display: 'flex', flexDirection: 'column', gap: 6,
+          opacity: n.state === 'done' ? 0.72 : 1,
+          transition: 'border-color var(--duration-fast) var(--ease-out)',
+        }}
+        onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.borderColor = crit ? 'var(--accent)' : 'var(--line-2)' }}
+        onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.borderColor = crit ? 'var(--spruce-5)' : 'var(--line-1)' }}
+      >
+        <div style={{
+          font: '500 12px/1.3 var(--font-sans)', color: 'var(--ink-1)',
+          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
+        }}>{n.title}</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>
+          <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>#{n.id}</span>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '400 10.5px var(--font-mono)', color: st.color, whiteSpace: 'nowrap' }}>
+            <Icon name={st.icon} size={11} />
+            {st.label}{n.state === 'steeping' && n.days ? ` ${n.days}` : ''}
+          </span>
+          {n.tags.filter((t) => t.startsWith('p/')).map((t) => (
+            <span key={t} style={{ font: '500 10.5px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>{t}</span>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
+      {/* legend */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 18, font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+          <span style={{ width: 22, height: 2, background: 'var(--accent)', display: 'inline-block' }}></span>critical path
+        </span>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+          <span style={{ width: 22, height: 0, borderTop: '1.5px solid var(--line-2)', display: 'inline-block' }}></span>blocks
+        </span>
+        <span style={{ marginLeft: 'auto', color: 'var(--ink-3)' }}>unattached: {g.unattached.map((i) => `#${i}`).join(' · ')}</span>
+      </div>
+
+      {/* graph canvas */}
+      <div style={{ overflow: 'auto', flex: 1, minHeight: 0, border: '1px solid var(--line-1)', borderRadius: 'var(--radius-3)', background: 'var(--surface-app)' }}>
+        <div style={{ position: 'relative', width: W, height: H }}>
+          <svg width={W} height={H} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+            <defs>
+              <marker id="dg-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                <path d="M 0 0.5 L 7.5 4 L 0 7.5 z" fill="var(--line-2)"></path>
+              </marker>
+              <marker id="dg-arrow-crit" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                <path d="M 0 0.5 L 7.5 4 L 0 7.5 z" fill="var(--accent)"></path>
+              </marker>
+            </defs>
+            {g.edges.map((e, i) => (
+              <path key={i} d={edgePath(e)} fill="none"
+                    stroke={e.crit ? 'var(--accent)' : 'var(--line-2)'}
+                    strokeWidth={e.crit ? 2 : 1.5}
+                    markerEnd={`url(#${e.crit ? 'dg-arrow-crit' : 'dg-arrow'})`} />
+            ))}
+          </svg>
+          {g.nodes.map((n) => <Node key={n.id} n={n} />)}
+          {/* milestone terminal */}
+          <div style={{
+            position: 'absolute', left: pos['ms'].x, top: pos['ms'].y, width: MSW, height: MSH,
+            display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px',
+            background: 'var(--accent)', color: 'var(--ink-inverse)',
+            borderRadius: 'var(--radius-round)', boxShadow: 'var(--shadow-2)',
+          }}>
+            <Icon name="milestone" size={15} />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <span style={{ font: '600 12.5px/1.2 var(--font-sans)' }}>{g.milestone.name}</span>
+              <span style={{ font: '400 10.5px/1.2 var(--font-mono)', opacity: 0.8 }}>due {g.milestone.due}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        Four issues sit on the critical path, and #87 is the cork in the bottle. Remove it and everything pours.
+      </p>
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { FOCUS, type FocusIssue, TODAY } from '../../data/fixtures.js'
+import { FOCUS, type FocusIssue, type IssueRef, TODAY } from '../../data/fixtures.js'
 import { BurnUpCone } from '../charts/chart.js'
 import { Badge, Button, Card, IconButton, Tag } from '../ui/index.js'
 
@@ -8,7 +8,7 @@ import { Badge, Button, Card, IconButton, Tag } from '../ui/index.js'
  * Morning service — the Now/Next/Later focus cards + the milestone burn-up cone.
  * Data is fixture (data.js) until P2's scheduler + Monte Carlo feed it.
  */
-export function FocusScreen({ onOpenIssue }: { onOpenIssue: (id: number) => void }) {
+export function FocusScreen({ onOpenIssue }: { onOpenIssue: (issue: IssueRef) => void }) {
   const FocusRow = ({ slot, issue, jade }: { slot: string; issue: FocusIssue; jade?: boolean }) => (
     <Card
       overline={slot}
@@ -18,7 +18,7 @@ export function FocusScreen({ onOpenIssue }: { onOpenIssue: (id: number) => void
           href="#"
           onClick={(e) => {
             e.preventDefault()
-            onOpenIssue(issue.id)
+            onOpenIssue({ id: issue.id, title: issue.title, labels: issue.labels })
           }}
           style={{ color: 'inherit', border: 'none' }}
         >

apps/desktop/src/renderer/src/components/screens/gantt-view.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+
+import { GANTT, type IssueRef } from '../../data/fixtures.js'
+import { Icon } from '../ui/index.js'
+
+// Gantt drill-in — scheduler-derived bars, critical chain, 80% forecast tails
+export function GanttView({ onOpenIssue }: { onOpenIssue: (issue: IssueRef) => void }) {
+  const g = GANTT;
+
+  const LABELW = 232, DAYW = 21, ROWH = 36, HEADH = 30;
+  const chartW = g.days * DAYW;
+  const W = LABELW + chartW;
+  const H = HEADH + g.rows.length * ROWH;
+  const X = (d: number) => LABELW + d * DAYW;
+
+  const BAR: Record<string, { bg: string; border: string; text: string }> = {
+    done: { bg: 'var(--paper-3)', border: 'transparent', text: 'var(--ink-3)' },
+    steeping: { bg: 'var(--accent)', border: 'transparent', text: 'var(--ink-inverse)' },
+    review: { bg: 'var(--info-tint)', border: 'var(--info)', text: 'var(--info)' },
+    scheduled: { bg: 'var(--spruce-2)', border: 'var(--spruce-3)', text: 'var(--accent-text)' },
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, minHeight: 0 }}>
+      {/* legend */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', whiteSpace: 'nowrap', flexWrap: 'wrap' }}>
+        {[['steeping', 'in work'], ['review', 'in review'], ['scheduled', 'scheduled'], ['done', 'done']].map(([k, label]) => (
+          <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ width: 16, height: 9, borderRadius: 3, background: BAR[k].bg, border: `1px solid ${BAR[k].border}`, display: 'inline-block' }}></span>{label}
+          </span>
+        ))}
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 18, height: 0, borderTop: '2px dotted var(--cone-line)', display: 'inline-block' }}></span>80% tail
+        </span>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 2, height: 12, background: 'var(--jade)', display: 'inline-block' }}></span>today
+        </span>
+      </div>
+
+      {/* chart */}
+      <div style={{ overflow: 'auto', flex: 1, minHeight: 0, border: '1px solid var(--line-1)', borderRadius: 'var(--radius-3)', background: 'var(--surface-card)' }}>
+        <div style={{ position: 'relative', width: W, height: H }}>
+          {/* week gridlines + labels */}
+          {g.weeks.map((w) => (
+            <React.Fragment key={w.at}>
+              <div style={{ position: 'absolute', left: X(w.at), top: HEADH, bottom: 0, width: 1, background: 'var(--line-1)' }}></div>
+              <span style={{ position: 'absolute', left: X(w.at) + 5, top: 8, font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{w.label}</span>
+            </React.Fragment>
+          ))}
+          {/* milestone 80% band */}
+          <div style={{ position: 'absolute', left: X(g.band.from), width: (g.band.to - g.band.from) * DAYW, top: HEADH, bottom: 0, background: 'var(--cone-fill)' }}></div>
+          <span style={{ position: 'absolute', left: X(g.band.from) + 5, bottom: 6, font: '500 10.5px var(--font-mono)', color: 'var(--cone-line)', whiteSpace: 'nowrap' }}>{g.band.label}</span>
+          {/* due marker */}
+          <div style={{ position: 'absolute', left: X(g.due.at) - 1, top: HEADH, bottom: 0, width: 2, background: 'var(--ink-1)' }}></div>
+          <span style={{ position: 'absolute', left: X(g.due.at) - 4, top: HEADH - 12, width: 8, height: 8, background: 'var(--ink-1)', transform: 'rotate(45deg)' }}></span>
+          {/* today rule */}
+          <div style={{ position: 'absolute', left: X(g.today), top: HEADH, bottom: 0, width: 2, background: 'var(--jade)' }}></div>
+
+          {/* rows */}
+          {g.rows.map((r, i) => {
+            const top = HEADH + i * ROWH;
+            const st = BAR[r.state];
+            return (
+              <React.Fragment key={r.id}>
+                {/* row hairline */}
+                <div style={{ position: 'absolute', left: 0, right: 0, top: top, height: 1, background: 'var(--line-1)', opacity: 0.6 }}></div>
+                {/* label cell (sticky) */}
+                <div
+                  onClick={() => onOpenIssue({ id: r.id, title: r.title, labels: [], days: r.state === 'steeping' ? '4d' : undefined })}
+                  style={{
+                    position: 'absolute', left: 0, width: LABELW, height: ROWH, top: top, zIndex: 2, cursor: 'pointer',
+                    display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px 0 14px', background: 'var(--surface-card)',
+                    borderRight: '1px solid var(--line-1)',
+                    boxShadow: r.crit ? 'inset 2px 0 0 var(--accent)' : 'none',
+                  }}
+                >
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', flexShrink: 0 }}>#{r.id}</span>
+                  <span style={{ font: '500 12px/1.3 var(--font-sans)', color: 'var(--ink-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+                  <span style={{ font: '600 8.5px/16px var(--font-sans)', color: 'var(--accent-text)', background: 'var(--spruce-2)', width: 16, height: 16, borderRadius: '50%', textAlign: 'center', flexShrink: 0, marginLeft: 'auto' }}>{r.who}</span>
+                </div>
+                {/* bar */}
+                <div style={{
+                  position: 'absolute', left: X(r.start), width: (r.end - r.start) * DAYW, top: top + 9, height: 18,
+                  background: st.bg, border: `1px solid ${st.border}`, borderRadius: 4,
+                  boxShadow: r.crit && r.state !== 'steeping' ? 'inset 0 -2px 0 var(--accent)' : 'none',
+                }}></div>
+                {/* 80% tail */}
+                {r.p80 ? (
+                  <>
+                    <div style={{ position: 'absolute', left: X(r.end), width: (r.p80 - r.end) * DAYW, top: top + 17, height: 0, borderTop: '2px dotted var(--cone-line)' }}></div>
+                    <div style={{ position: 'absolute', left: X(r.p80) - 1, top: top + 13, width: 2, height: 10, background: 'var(--cone-line)' }}></div>
+                  </>
+                ) : null}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </div>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        The path holds if #87 lands by Wednesday. The dotted tails are your own history, wagging.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import React from 'react'
+
+import { INBOX, type InboxItem, type IssueRef } from '../../data/fixtures.js'
+import { Button, Card, Icon, Tabs } from '../ui/index.js'
+
+// Inbox — Reginald only rings the bell when it matters
+export function InboxScreen({
+  onOpenIssue,
+  onOpenDirectives,
+  readIds,
+  setReadIds,
+}: {
+  onOpenIssue: (issue: IssueRef) => void
+  onOpenDirectives: () => void
+  readIds: number[]
+  setReadIds: React.Dispatch<React.SetStateAction<number[]>>
+}) {
+  const all = INBOX
+  const [tab, setTab] = React.useState('all')
+
+  const isRead = (n: InboxItem) => !n.unread || readIds.includes(n.id)
+  const unreadCount = all.filter((n) => !isRead(n)).length
+
+  const FILTERS: Record<string, (n: InboxItem) => boolean> = {
+    all: () => true,
+    mentions: (n) => n.type === 'mention' || n.type === 'assignment',
+    drift: (n) => n.type === 'drift' || n.type === 'nag' || n.type === 'milestone',
+    system: (n) => n.type === 'system' || n.type === 'review',
+  }
+  const items = all.filter(FILTERS[tab])
+  const days = [...new Set(items.map((n) => n.day))]
+
+  const toneColor: Record<string, string> = { ok: 'var(--ok)', warn: 'var(--warn)', info: 'var(--info)', neutral: 'var(--ink-3)' }
+
+  const open = (n: InboxItem) => {
+    setReadIds((r) => (r.includes(n.id) ? r : [...r, n.id]))
+    if (n.issue) onOpenIssue(n.issue)
+    else if (n.to === 'directives') onOpenDirectives()
+  }
+
+  return (
+    <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+        <div>
+          <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Inbox</h1>
+          <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0', whiteSpace: 'nowrap' }}>
+            {unreadCount ? `${unreadCount} unread` : 'all read'} · nothing here rings twice
+          </p>
+        </div>
+        {unreadCount ? (
+          <Button variant="ghost" size="sm" onClick={() => setReadIds(all.map((n) => n.id))}>Mark all read</Button>
+        ) : null}
+      </header>
+
+      <Tabs
+        items={[
+          { id: 'all', label: 'All', count: all.length },
+          { id: 'mentions', label: 'Mentions', icon: 'message-square' },
+          { id: 'drift', label: 'Drift', icon: 'chart-line' },
+          { id: 'system', label: 'System', icon: 'refresh-cw' },
+        ]}
+        active={tab} onChange={setTab}
+      />
+
+      <Card flush>
+        <div>
+          {days.map((day) => (
+            <div key={day}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', padding: '12px 20px 4px' }}>{day}</div>
+              {items.filter((n) => n.day === day).map((n) => {
+                const read = isRead(n)
+                return (
+                  <div key={n.id}
+                    onClick={() => open(n)}
+                    style={{
+                      display: 'flex', alignItems: 'flex-start', gap: 12, padding: '11px 20px',
+                      cursor: n.issue || n.to ? 'pointer' : 'default',
+                      opacity: read ? 0.72 : 1,
+                    }}
+                    onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'var(--paper-2)' }}
+                    onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'transparent' }}
+                  >
+                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: read ? 'transparent' : 'var(--accent)', flexShrink: 0, marginTop: 7 }}></span>
+                    <span style={{ color: toneColor[n.tone], display: 'inline-flex', marginTop: 1, flexShrink: 0 }}>
+                      <Icon name={n.icon} size={15} />
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ font: read ? 'var(--text-body)' : 'var(--text-body-strong)', color: 'var(--ink-1)' }}>
+                        {n.who ? <span style={{ fontWeight: 600 }}>{n.who} </span> : null}{n.text}
+                      </div>
+                      <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-2)', marginTop: 2 }}>{n.detail}</div>
+                    </div>
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap', marginTop: 2 }}>{n.time}</span>
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+        I only ring the bell when it matters. The rest can wait for morning service.
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,184 @@
+// Issue detail — human intent (gitea) on the left, machine-derived (pm-state) on the right
+import React from 'react'
+
+import { ISSUE_DETAIL, type IssueDetail, type IssueRef } from '../../data/fixtures.js'
+import { Badge, Button, Card, Icon, Tag } from '../ui/index.js'
+
+export function IssueScreen({
+  issue,
+  onBack,
+  onOpenIssue,
+}: {
+  issue: IssueRef
+  onBack: () => void
+  onOpenIssue: (issue: IssueRef) => void
+}) {
+  const det: IssueDetail = ISSUE_DETAIL[issue.id] || {
+    state: 'triage',
+    assignee: 'Stephen',
+    milestone: 'Beta',
+    body: '',
+    comments: [],
+    lifecycle: [
+      { stage: 'Diagnosis', event: 'issue opened', when: 'Feb 4 · 10:20', icon: 'circle-dot', done: true },
+      { stage: 'Triage', event: 'labeled · milestoned Beta', when: 'Feb 5 · 09:12', icon: 'tag', done: true },
+      { stage: 'Work start', event: 'first branch or commit ref', when: 'pending', icon: 'git-commit-horizontal', done: false },
+      { stage: 'Deploy', event: 'PR merged', when: 'pending', icon: 'git-merge', done: false },
+      { stage: 'Complete', event: 'issue closed', when: 'pending', icon: 'circle-check', done: false },
+    ],
+    forecast: { p80: 'starts wk of Feb 16', note: 'queue position from scheduler' },
+    blocks: [],
+    blockedBy: [],
+    note: '',
+  }
+  const stateBadge = (
+    {
+      steeping: { tone: 'warn', label: `steeping${issue.days ? ' ' + issue.days : ''}` },
+      triage: { tone: 'neutral', label: 'triage' },
+      review: { tone: 'info', label: 'in review' },
+      done: { tone: 'ok', label: 'done' },
+    } as Record<string, { tone: 'warn' | 'neutral' | 'info' | 'ok'; label: string }>
+  )[det.state] || { tone: 'neutral', label: det.state }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* breadcrumb + header */}
+      <div>
+        <button type="button" onClick={onBack} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+          font: '500 12.5px var(--font-sans)', color: 'var(--ink-2)', cursor: 'pointer', padding: '2px 0', marginBottom: 10,
+        }}>
+          <Icon name="arrow-left" size={14} /> Back
+        </button>
+        <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 13px var(--font-mono)', color: 'var(--ink-3)', margin: '0 0 6px' }}>#{issue.id} · stephen/commitea</p>
+            <h1 style={{ font: 'var(--text-title)', color: 'var(--ink-1)', margin: 0 }}>{issue.title}</h1>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
+              <Badge tone={stateBadge.tone} dot>{stateBadge.label}</Badge>
+              {(issue.labels || []).map((l) => <Tag key={l} label={l} />)}
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                <Icon name="milestone" size={12} />{det.milestone}
+              </span>
+              <span style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                <Icon name="user" size={12} />{det.assignee}
+              </span>
+            </div>
+          </div>
+          <Button variant="secondary" icon="arrow-up-right">Open in Gitea</Button>
+        </header>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 16, alignItems: 'start' }}>
+        {/* left: human intent */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <Card overline="Description">
+            {det.body ? (
+              <p style={{ font: 'var(--text-body)', color: 'var(--ink-1)', margin: 0, lineHeight: 1.6 }}>{det.body}</p>
+            ) : (
+              <p style={{ font: 'var(--text-agent)', color: 'var(--ink-3)', margin: 0 }}>
+                No description was written. I have opinions about that, but I'll keep them warm.
+              </p>
+            )}
+          </Card>
+
+          <Card overline={`Comments · ${det.comments.length}`} flush>
+            <div>
+              {det.comments.map((c, i) => (
+                <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 20px', borderBottom: '1px solid var(--line-1)' }}>
+                  <span style={{
+                    width: 24, height: 24, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                    font: '600 9px/24px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                  }}>{c.who.split(' ').map((w) => w[0]).join('')}</span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
+                      <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', whiteSpace: 'nowrap' }}>{c.who}</span>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{c.when}</span>
+                    </div>
+                    <p style={{ font: 'var(--text-body)', color: 'var(--ink-1)', margin: '4px 0 0' }}>{c.text}</p>
+                  </div>
+                </div>
+              ))}
+              <div style={{ display: 'flex', gap: 8, padding: '14px 20px', alignItems: 'flex-end' }}>
+                <textarea placeholder="Comment — this writes to gitea, as you" rows={2} style={{
+                  flex: 1, resize: 'none', font: 'var(--text-body)', color: 'var(--ink-1)', lineHeight: 1.5,
+                  background: 'var(--paper-0)', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-2)',
+                  padding: '8px 11px', outline: 'none',
+                }}></textarea>
+                <Button size="sm" variant="secondary">Comment</Button>
+              </div>
+            </div>
+          </Card>
+
+          {det.note ? (
+            <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0, padding: '0 2px' }}>{det.note}</p>
+          ) : null}
+        </div>
+
+        {/* right: machine-derived sidecar */}
+        <Card overline="Machine-derived" flush>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* lifecycle */}
+            <div style={{ padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: 0 }}>
+              {det.lifecycle.map((s, i) => (
+                <div key={s.stage} style={{ display: 'flex', gap: 10 }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <span style={{ display: 'inline-flex', color: s.done ? 'var(--ok)' : 'var(--ink-3)', padding: '2px 0' }}>
+                      <Icon name={s.icon} size={14} />
+                    </span>
+                    {i < det.lifecycle.length - 1 ? <span style={{ width: 1, flex: 1, minHeight: 14, background: s.done ? 'var(--spruce-3)' : 'var(--line-1)' }}></span> : null}
+                  </div>
+                  <div style={{ paddingBottom: i < det.lifecycle.length - 1 ? 12 : 0 }}>
+                    <div style={{ font: `500 12px var(--font-sans)`, color: s.done ? 'var(--ink-1)' : 'var(--ink-3)' }}>{s.stage}</div>
+                    <div style={{ font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 2, whiteSpace: 'nowrap' }}>{s.event}</div>
+                    <div style={{ font: '400 10.5px var(--font-mono)', color: s.done ? 'var(--ink-2)' : 'var(--ink-3)', whiteSpace: 'nowrap' }}>{s.when}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* forecast */}
+            <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line-1)' }}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>Forecast</div>
+              <div style={{ font: '500 13px var(--font-mono)', color: 'var(--ink-1)' }}>80% {det.forecast.p80}</div>
+              <div style={{ font: '400 10.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 3 }}>{det.forecast.note}</div>
+            </div>
+            {/* dependencies */}
+            <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line-1)' }}>
+              <div style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>Dependencies</div>
+              {det.blocks.length === 0 && det.blockedBy.length === 0 ? (
+                <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)' }}>none</div>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  {det.blocks.length ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>blocks</span>
+                      {det.blocks.map((b) => (
+                        <button key={b} type="button"
+                          onClick={() => onOpenIssue({ id: b, title: b === 91 ? 'Webhook listener: reconcile on reconnect' : 'Monte Carlo engine: percentile bands', labels: b === 91 ? ['est/3d', 'p/2'] : ['est/5d', 'p/1'] })}
+                          style={{ font: '500 11px var(--font-mono)', color: 'var(--accent-text)', background: 'var(--spruce-1)', border: '1px solid var(--spruce-2)', borderRadius: 'var(--radius-1)', padding: '2px 7px', cursor: 'pointer' }}>
+                          #{b}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                  {det.blockedBy.length ? (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                      <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>blocked by</span>
+                      {det.blockedBy.map((b) => <span key={b} style={{ font: '500 11px var(--font-mono)', color: 'var(--ink-2)' }}>#{b}</span>)}
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </div>
+            {/* provenance note */}
+            <div style={{ padding: '10px 20px 14px', borderTop: '1px solid var(--line-1)' }}>
+              <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: 0 }}>
+                Lives in pm-state. Your repo never sees any of it.
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,102 @@
+import React from 'react'
+
+import { COLUMNS, type IssueRef } from '../../data/fixtures.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 }) {
+  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 = [
+    { 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 },
+  ]
+
+  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>
+      <div style={{ font: `500 14px var(--font-mono)`, color: tone || 'var(--ink-1)', whiteSpace: 'nowrap' }}>{value}</div>
+    </div>
+  )
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div>
+        <button type="button" onClick={onBack} style={{
+          display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+          font: '500 12.5px var(--font-sans)', color: 'var(--ink-2)', cursor: 'pointer', padding: '2px 0', marginBottom: 10,
+        }}>
+          <Icon name="arrow-left" size={14} /> Runway
+        </button>
+        <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
+            </p>
+            <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Beta</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>
+            </div>
+          </div>
+          <Button variant="secondary" icon="arrow-up-right">Open in Gitea</Button>
+        </header>
+      </div>
+
+      {/* 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" />
+          <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>
+        </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 />
+          <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.
+          </p>
+        </Card>
+
+        <Card overline="Issues" flush>
+          <div>
+            {groups.map((g) => (
+              <div key={g.label}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '10px 20px 6px' }}>
+                  <span style={{ font: 'var(--text-overline)', letterSpacing: 'var(--letter-spacing-wide)', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{g.label}</span>
+                  <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)' }}>{g.issues.length}</span>
+                </div>
+                {g.issues.map((i) => (
+                  <div key={i.id}
+                    onClick={() => onOpenIssue({ id: i.id, title: i.title, labels: i.labels, days: i.days })}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8, padding: '7px 20px', cursor: 'pointer',
+                      opacity: g.muted ? 0.6 : 1,
+                    }}
+                    onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
+                    onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'transparent'; }}
+                  >
+                    <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', width: 34, flexShrink: 0 }}>#{i.id}</span>
+                    <span style={{ font: 'var(--text-small)', color: 'var(--ink-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{i.title}</span>
+                    {(i.labels || []).filter((l) => l.startsWith('est/')).map((l) => <Tag key={l} label={l} />)}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+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'
+
+// Runway — capacity vs milestone dates; ranges, never points
+export function RunwayScreen({
+  onOpenCalibration,
+  onOpenMilestone,
+}: {
+  onOpenCalibration: () => void
+  onOpenMilestone: () => void
+}) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <header style={{ borderBottom: 'var(--rule-double)', paddingBottom: 14 }}>
+        <h1 style={{ font: 'var(--text-display)', color: 'var(--ink-1)', margin: 0 }}>Runway</h1>
+        <p style={{ font: 'var(--text-data)', color: 'var(--ink-3)', margin: '6px 0 0' }}>capacity vs milestone dates · calibrated on 27 closed issues</p>
+      </header>
+
+      <Card overline="Milestones" flush>
+        <div>
+          {RUNWAY.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)',
+            }}
+            onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
+            onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => { e.currentTarget.style.background = 'transparent'; }}>
+              <div>
+                <div style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)', display: 'flex', alignItems: 'center', gap: 7 }}>
+                  <Icon name="milestone" size={14} style={{ color: 'var(--ink-3)' }} />{m.name}
+                </div>
+                <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 3 }}>
+                  due {m.due}{m.hard ? ' ' : ''}
+                </div>
+                {m.hard ? <Tag label="deadline/hard" style={{ marginTop: 5 }} /> : null}
+              </div>
+              <RunwayBar m={m} />
+              <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>80% {m.p80}</span>
+              <Badge tone={m.tone} dot>{m.note}</Badge>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'start' }}>
+        <Card overline="Capacity" flush>
+          <div>
+            {CAPACITY.map((p, i) => (
+              <div key={p.who} style={{
+                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px',
+                borderTop: i === 0 ? 'none' : '1px solid var(--line-1)',
+              }}>
+                <span style={{
+                  width: 26, height: 26, borderRadius: '50%', background: 'var(--spruce-2)', color: 'var(--accent-text)',
+                  font: '600 10px/26px var(--font-sans)', textAlign: 'center', flexShrink: 0,
+                }}>{p.who.split(' ').map((w: string) => w[0]).join('')}</span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ font: 'var(--text-body-strong)' }}>{p.who}</div>
+                  <div style={{ font: '400 11.5px var(--font-mono)', color: 'var(--ink-3)', marginTop: 2 }}>{p.slices}</div>
+                </div>
+                <span style={{ font: '400 12px var(--font-mono)', color: 'var(--ink-2)' }}>{p.hours}</span>
+              </div>
+            ))}
+          </div>
+        </Card>
+        <Card overline="Calibration" actions={<IconButton icon="arrow-up-right" label="Full report" size="sm" onClick={onOpenCalibration} />}>
+          <p style={{ font: 'var(--text-body)', margin: '0 0 8px' }}>
+            Your estimates run <strong>18% optimistic</strong> on <code>est/3d</code> and above. Smaller tickets are honest.
+          </p>
+          <p style={{ font: 'var(--text-agent)', color: 'var(--ink-2)', margin: 0 }}>
+            I widen the cone accordingly. No judgement — it's the most common shape of hope.
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { STANDUP } from '../../data/fixtures.js'
+import { type IssueRef, STANDUP } from '../../data/fixtures.js'
 import { Badge, Button, Icon } from '../ui/index.js'
 
 const standupCSS = `
@@ -38,9 +38,15 @@ export function StandupScreen({
   onOpenIssue,
 }: {
   onBegin: () => void
-  onOpenIssue: (id: number) => void
+  onOpenIssue: (issue: IssueRef) => void
 }) {
   const s = STANDUP
+  const NAG_REF: IssueRef = {
+    id: s.nag.id,
+    title: 'Fix lifecycle inference on merge events',
+    labels: ['est/2d', 'p/1'],
+    days: s.nag.days,
+  }
 
   const Section = ({ overline, order, children }: { overline: string; order: number; children: React.ReactNode }) => (
     <section
@@ -147,9 +153,9 @@ export function StandupScreen({
           <div
             role="button"
             tabIndex={0}
-            onClick={() => onOpenIssue(s.nag.id)}
+            onClick={() => onOpenIssue(NAG_REF)}
             onKeyDown={(e) => {
-              if (e.key === 'Enter') onOpenIssue(s.nag.id)
+              if (e.key === 'Enter') onOpenIssue(NAG_REF)
             }}
             style={{
               display: 'flex',

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

@@ -1,8 +1,16 @@
 import React, { useEffect, useState } from 'react'
 
 import logoIcon from '../../design/assets/logo-icon.png'
+import type { IssueRef } from '../../data/fixtures.js'
 import { PrimitivesGallery } from '../gallery.js'
+import { BoardScreen } from '../screens/board-screen.js'
+import { CalibrationScreen } from '../screens/calibration-screen.js'
+import { CaptureScreen } from '../screens/capture-screen.js'
 import { FocusScreen } from '../screens/focus-screen.js'
+import { InboxScreen } from '../screens/inbox-screen.js'
+import { IssueScreen } from '../screens/issue-screen.js'
+import { MilestoneScreen } from '../screens/milestone-screen.js'
+import { RunwayScreen } from '../screens/runway-screen.js'
 import { StandupScreen } from '../screens/standup-screen.js'
 import { Icon, Switch } from '../ui/index.js'
 import { ChatPanel } from './chat-panel.js'
@@ -70,14 +78,16 @@ export function AppShell() {
   const [prevView, setPrevView] = useState<View>('focus')
   const [dark, setDark] = useState(false)
   const [offline, setOffline] = useState(false)
+  const [issue, setIssue] = useState<IssueRef | null>(null)
+  const [readIds, setReadIds] = useState<number[]>([])
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
   }, [dark])
 
-  const openIssue = (n: number) => {
+  const openIssue = (ref: IssueRef) => {
     if (view !== 'issue') setPrevView(view)
-    void n
+    setIssue(ref)
     setView('issue')
   }
 
@@ -143,42 +153,40 @@ export function AppShell() {
         return <FocusScreen onOpenIssue={openIssue} />
       case 'standup':
         return <StandupScreen onBegin={() => setView('focus')} onOpenIssue={openIssue} />
+      case 'board':
+        return <BoardScreen onOpenIssue={openIssue} />
+      case 'runway':
+        return (
+          <RunwayScreen
+            onOpenCalibration={() => setView('calibration')}
+            onOpenMilestone={() => setView('milestone')}
+          />
+        )
+      case 'calibration':
+        return <CalibrationScreen onBack={() => setView('runway')} />
+      case 'milestone':
+        return <MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} />
+      case 'inbox':
+        return (
+          <InboxScreen
+            onOpenIssue={openIssue}
+            onOpenDirectives={() => setView('directives')}
+            readIds={readIds}
+            setReadIds={setReadIds}
+          />
+        )
+      case 'capture':
+        return <CaptureScreen onDone={() => setView('focus')} />
+      case 'issue':
+        return issue ? (
+          <IssueScreen issue={issue} onBack={() => setView(prevView)} onOpenIssue={openIssue} />
+        ) : null
       case 'states':
         return <StatesScreen onCapture={() => setView('capture')} />
       case 'primitives':
         return <PrimitivesGallery />
-      case 'issue':
-        return (
-          <div>
-            <button
-              type="button"
-              onClick={() => setView(prevView)}
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 6,
-                font: 'var(--text-small)',
-                color: 'var(--ink-2)',
-                background: 'none',
-                border: 'none',
-                padding: 0,
-                cursor: 'pointer',
-                marginBottom: 12,
-              }}
-            >
-              <Icon name="arrow-left" size={15} /> Back
-            </button>
-            <PlaceholderScreen title={TITLE.issue!} phase={PHASE.issue!} />
-          </div>
-        )
       default:
-        return (
+        return <PlaceholderScreen title={TITLE[view] ?? view} phase={PHASE[view] ?? 'a later phase'} />
-          <PlaceholderScreen
-            title={TITLE[view] ?? view}
-            phase={PHASE[view] ?? 'a later phase'}
-            onOpenIssue={() => openIssue(1)}
-          />
-        )
     }
   }
 

apps/desktop/src/renderer/src/components/ui/input.tsx

@@ -16,6 +16,7 @@ export interface InputProps {
   mono?: boolean;
   placeholder?: string;
   value?: string;
+  defaultValue?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   type?: string;

apps/desktop/src/renderer/src/components/ui/select.tsx

@@ -13,6 +13,7 @@ export interface SelectProps {
   label?: string;
   options: SelectOption[];
   value?: string;
+  defaultValue?: string;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
   disabled?: boolean;
   style?: React.CSSProperties;

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

@@ -118,3 +118,357 @@ export const STANDUP: StandupData = {
     text: 'Four days is a long steep. It blocks #91 and #92 — worth a look before it stains.',
   },
 }
+
+/** Lightweight issue reference handed to the shell's drill-in from any screen. */
+export interface IssueRef {
+  id: number
+  title?: string
+  labels?: string[]
+  days?: string
+  rationale?: string
+}
+
+// ---- Board (The pot) ----
+
+export interface BoardIssue {
+  id: number
+  title: string
+  labels: string[]
+  who: string
+  blocked?: boolean
+  days?: string
+  pr?: string
+}
+
+export interface BoardColumn {
+  id: string
+  label: string
+  issues: BoardIssue[]
+}
+
+export const COLUMNS: BoardColumn[] = [
+  {
+    id: 'diagnosis',
+    label: 'Diagnosis',
+    issues: [
+      { id: 102, title: 'Scheduler ignores standing allocation slices', labels: ['p/2'], who: 'SM' },
+      { id: 103, title: 'Dark theme: cone fill too faint', labels: ['p/4'], who: 'SM' },
+    ],
+  },
+  {
+    id: 'triage',
+    label: 'Triage',
+    issues: [
+      { id: 99, title: 'Directive log: conflict-free merge test', labels: ['est/1d', 'p/2'], who: 'SM' },
+      { id: 96, title: 'Label schema bootstrap for new repos', labels: ['est/2d', 'p/3'], who: 'AK' },
+      { id: 78, title: 'Calibration store cold-start distributions', labels: ['est/5d', 'p/3'], who: 'SM' },
+    ],
+  },
+  {
+    id: 'steeping',
+    label: 'Steeping',
+    issues: [
+      { id: 87, title: 'Fix lifecycle inference on merge events', labels: ['est/2d', 'p/1'], who: 'SM', blocked: false, days: '4d' },
+      { id: 84, title: 'Capacity model: focus factor per person', labels: ['est/3d', 'p/2'], who: 'AK', days: '1d' },
+    ],
+  },
+  {
+    id: 'review',
+    label: 'In review',
+    issues: [{ id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'], who: 'SM', pr: '#141' }],
+  },
+  {
+    id: 'done',
+    label: 'Done',
+    issues: [
+      { id: 71, title: 'Gitea client: token auth + retries', labels: ['est/2d', 'p/2'], who: 'SM' },
+      { id: 69, title: 'pm-state repo bootstrap', labels: ['est/1d', 'p/1'], who: 'SM' },
+      { id: 65, title: 'Electron shell + window state', labels: ['est/3d', 'p/2'], who: 'AK' },
+    ],
+  },
+]
+
+// ---- Gantt ----
+
+export interface GanttWeek {
+  at: number
+  label: string
+}
+
+export interface GanttRow {
+  id: number
+  title: string
+  who: string
+  state: 'done' | 'steeping' | 'review' | 'scheduled'
+  start: number
+  end: number
+  p80?: number
+  crit?: boolean
+}
+
+export interface GanttData {
+  days: number
+  weeks: GanttWeek[]
+  today: number
+  band: { from: number; to: number; label: string }
+  due: { at: number; label: string }
+  rows: GanttRow[]
+}
+
+export const GANTT: GanttData = {
+  days: 42,
+  weeks: [
+    { at: 0, label: 'Feb 2' },
+    { at: 7, label: 'Feb 9' },
+    { at: 14, label: 'Feb 16' },
+    { at: 21, label: 'Feb 23' },
+    { at: 28, label: 'Mar 2' },
+    { at: 35, label: 'Mar 9' },
+    { at: 41, label: 'Mar 15' },
+  ],
+  today: 8,
+  band: { from: 29, to: 38, label: '80% · Mar 3–12' },
+  due: { at: 41, label: 'Beta due' },
+  rows: [
+    { id: 71, title: 'Gitea client: token auth + retries', who: 'SM', state: 'done', start: 0, end: 4 },
+    { id: 69, title: 'pm-state repo bootstrap', who: 'SM', state: 'done', start: 0, end: 1 },
+    { id: 87, title: 'Fix lifecycle inference on merge events', who: 'SM', state: 'steeping', start: 4, end: 9, p80: 11, crit: true },
+    { id: 92, title: 'Monte Carlo engine: percentile bands', who: 'SM', state: 'review', start: 9, end: 18, p80: 21, crit: true },
+    { id: 91, title: 'Webhook listener: reconcile on reconnect', who: 'AK', state: 'scheduled', start: 9, end: 14, p80: 16 },
+    { id: 99, title: 'Directive log: conflict-free merge test', who: 'SM', state: 'scheduled', start: 10, end: 11 },
+    { id: 96, title: 'Label schema bootstrap for new repos', who: 'AK', state: 'scheduled', start: 14, end: 16 },
+    { id: 84, title: 'Capacity model: focus factor per person', who: 'AK', state: 'scheduled', start: 18, end: 23, p80: 26, crit: true },
+    { id: 102, title: 'Scheduler ignores standing allocation slices', who: 'SM', state: 'scheduled', start: 23, end: 25, p80: 28, crit: true },
+    { id: 78, title: 'Calibration store cold-start distributions', who: 'SM', state: 'scheduled', start: 25, end: 30 },
+  ],
+}
+
+// ---- Dependencies ----
+
+export interface DepNode {
+  id: number
+  title: string
+  tags: string[]
+  state: 'done' | 'steeping' | 'review' | 'triage' | 'diagnosis'
+  days?: string
+  col: number
+  row: number
+  rationale?: string
+}
+
+export interface DepEdge {
+  from: number
+  to: number | 'ms'
+  crit?: boolean
+}
+
+export interface DepsData {
+  nodes: DepNode[]
+  milestone: { name: string; due: string; col: number; row: number }
+  edges: DepEdge[]
+  critical: number[]
+  unattached: number[]
+}
+
+export const DEPS: DepsData = {
+  nodes: [
+    { id: 71, title: 'Gitea client: token auth + retries', tags: ['est/2d'], state: 'done', col: 0, row: 0.2 },
+    { id: 69, title: 'pm-state repo bootstrap', tags: ['est/1d'], state: 'done', col: 0, row: 1.9 },
+    {
+      id: 87,
+      title: 'Fix lifecycle inference on merge events',
+      tags: ['est/2d', 'p/1'],
+      state: 'steeping',
+      days: '4d',
+      col: 1,
+      row: 0.7,
+      rationale: 'It blocks #91 and #92. I’d take it first — the critical path agrees with me.',
+    },
+    { id: 99, title: 'Directive log: conflict-free merge test', tags: ['est/1d', 'p/2'], state: 'triage', col: 1, row: 1.9 },
+    { id: 91, title: 'Webhook listener: reconcile on reconnect', tags: ['est/3d', 'p/2'], state: 'triage', col: 2, row: 0 },
+    { id: 92, title: 'Monte Carlo engine: percentile bands', tags: ['est/5d', 'p/1'], state: 'review', col: 2, row: 1.4 },
+    { id: 84, title: 'Capacity model: focus factor per person', tags: ['est/3d', 'p/2'], state: 'steeping', days: '1d', col: 3, row: 1.4 },
+    { id: 102, title: 'Scheduler ignores standing allocation slices', tags: ['p/2'], state: 'diagnosis', col: 4, row: 1.4 },
+  ],
+  milestone: { name: 'Beta', due: 'Mar 15', col: 5, row: 1.4 },
+  edges: [
+    { from: 71, to: 87 },
+    { from: 69, to: 99 },
+    { from: 87, to: 91 },
+    { from: 87, to: 92, crit: true },
+    { from: 92, to: 84, crit: true },
+    { from: 84, to: 102, crit: true },
+    { from: 102, to: 'ms', crit: true },
+  ],
+  critical: [87, 92, 84, 102],
+  unattached: [78, 96, 103, 65],
+}
+
+// ---- Runway ----
+
+export interface RunwayMilestone {
+  name: string
+  due: string
+  hard: boolean
+  p80: string
+  pos: number
+  spread: number
+  tone: 'ok' | 'warn'
+  note: string
+}
+
+export const RUNWAY: RunwayMilestone[] = [
+  { name: 'Beta', due: 'Mar 15', hard: false, p80: 'Mar 3–12', pos: 0.62, spread: 0.18, tone: 'ok', note: 'ahead' },
+  { name: 'Pilot-ready', due: 'Apr 30', hard: true, p80: 'Apr 21 – May 9', pos: 0.94, spread: 0.26, tone: 'warn', note: 'drifting' },
+  { name: 'v1.0', due: 'Jun 12', hard: false, p80: 'May 30 – Jun 20', pos: 0.88, spread: 0.3, tone: 'ok', note: 'on watch' },
+]
+
+export interface CapacityMember {
+  who: string
+  hours: string
+  focus: number
+  slices: string
+}
+
+export const CAPACITY: CapacityMember[] = [
+  { who: 'Stephen', hours: '5.2h/day', focus: 0.65, slices: 'dev 70% · pilots 20% · compliance 10%' },
+  { who: 'Ana K.', hours: '3.8h/day', focus: 0.8, slices: 'dev 100%' },
+]
+
+// ---- Calibration ----
+
+export interface CalLabel {
+  label: string
+  n: number
+  median: string
+  bias: number | null
+}
+
+export interface CalPerson {
+  who: string
+  n: number
+  bias: number
+  note: string
+}
+
+export interface CalibrationData {
+  n: number
+  active: boolean
+  labels: CalLabel[]
+  people: CalPerson[]
+  scatter: number[][]
+  fit: number
+  effect: { raw: string; banded: string; p50: string }
+}
+
+export const CALIBRATION: CalibrationData = {
+  n: 27,
+  active: true,
+  labels: [
+    { label: 'est/1d', n: 8, median: '1.1d', bias: 8 },
+    { label: 'est/2d', n: 9, median: '2.4d', bias: 18 },
+    { label: 'est/3d', n: 6, median: '3.7d', bias: 22 },
+    { label: 'est/5d', n: 3, median: '6.5d', bias: 30 },
+    { label: 'est/8d', n: 1, median: '8.5d', bias: null },
+  ],
+  people: [
+    { who: 'Stephen', n: 19, bias: 21, note: 'optimism grows with ticket size' },
+    { who: 'Ana K.', n: 8, bias: 9, note: 'close to honest — suspicious' },
+  ],
+  scatter: [
+    [1, 1], [1, 1.2], [1, 0.9], [1, 1.5], [1, 1.1], [1, 0.8], [1, 1.3], [1, 1.2],
+    [2, 2], [2, 2.5], [2, 3.1], [2, 2.2], [2, 2.6], [2, 1.8], [2, 2.4], [2, 2.9], [2, 2.3],
+    [3, 3.5], [3, 4.1], [3, 3.1], [3, 4.6], [3, 3.6], [3, 3.9],
+    [5, 6.1], [5, 7.2], [5, 6.4],
+    [8, 8.5],
+  ],
+  fit: 1.18,
+  effect: { raw: '42d of estimates', banded: '80% band 46–53d', p50: '48d' },
+}
+
+// ---- Inbox ----
+
+export interface InboxIssueRef {
+  id: number
+  title: string
+  labels: string[]
+  days?: string
+}
+
+export interface InboxItem {
+  id: number
+  day: string
+  type: string
+  icon: string
+  tone: 'ok' | 'warn' | 'info' | 'neutral'
+  who?: string
+  text: string
+  detail: string
+  time: string
+  unread: boolean
+  to?: string
+  issue?: InboxIssueRef
+}
+
+export const INBOX: InboxItem[] = [
+  { id: 1, day: 'Today', type: 'drift', icon: 'chart-line', tone: 'warn', text: 'Beta’s 80% window moved', detail: 'Mar 3–12 → Mar 5–14 · directive #007', time: '09:14', unread: true, to: 'directives' },
+  { id: 2, day: 'Today', type: 'mention', icon: 'message-square', tone: 'info', who: 'Ana K.', text: 'mentioned you on #92', detail: '“percentile bands ready for a second pair of eyes”', time: '08:52', unread: true, issue: { id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'] } },
+  { id: 3, day: 'Today', type: 'nag', icon: 'clock', tone: 'warn', text: '#87 is steeping · 4d', detail: 'blocks #91 and #92 — worth a look before it stains', time: '07:00', unread: true, issue: { id: 87, title: 'Fix lifecycle inference on merge events', labels: ['est/2d', 'p/1'], days: '4d' } },
+  { id: 4, day: 'Yesterday', type: 'review', icon: 'git-pull-request', tone: 'info', text: 'PR #141 awaits review', detail: '#92 · idle two days', time: '16:20', unread: false, issue: { id: 92, title: 'Monte Carlo engine: percentile bands', labels: ['est/5d', 'p/1'] } },
+  { id: 5, day: 'Yesterday', type: 'assignment', icon: 'user', tone: 'neutral', who: 'Ana K.', text: 'took #96 from the pot', detail: 'Label schema bootstrap for new repos', time: '11:03', unread: false, issue: { id: 96, title: 'Label schema bootstrap for new repos', labels: ['est/2d', 'p/3'] } },
+  { id: 6, day: 'Yesterday', type: 'system', icon: 'refresh-cw', tone: 'ok', text: 'Webhook outage 02:14–02:31', detail: 'full reconcile ran · nothing lost', time: '02:31', unread: false },
+  { id: 7, day: 'Yesterday', type: 'milestone', icon: 'milestone', tone: 'ok', text: 'P2 — Scheduler closed two days early', detail: 'the calibration noticed. So did I.', time: '09:40', unread: false },
+]
+
+// ---- Issue detail ----
+
+export interface IssueComment {
+  who: string
+  when: string
+  text: string
+}
+
+export interface IssueLifecycleStage {
+  stage: string
+  event: string
+  when: string
+  icon: string
+  done: boolean
+}
+
+export interface IssueDetail {
+  state: string
+  assignee: string
+  milestone: string
+  body: string
+  comments: IssueComment[]
+  lifecycle: IssueLifecycleStage[]
+  forecast: { p80: string; note: string }
+  blocks: number[]
+  blockedBy: number[]
+  note: string
+}
+
+export const ISSUE_DETAIL: Record<number, IssueDetail> = {
+  87: {
+    state: 'steeping',
+    assignee: 'Stephen',
+    milestone: 'Beta',
+    body: 'Squash-merges emit events out of order when CI runs long: the PR-closed webhook lands before the merge event, so lifecycle inference marks deploy before work-end and the actuals go negative. Regular merges infer correctly.',
+    comments: [
+      { who: 'Ana K.', when: 'Feb 8 · 14:12', text: 'Repro: squash-merge only. Regular merges infer fine.' },
+      { who: 'Stephen', when: 'Feb 9 · 09:30', text: 'Confirmed — the event order flips whenever CI takes more than ~5 minutes.' },
+    ],
+    lifecycle: [
+      { stage: 'Diagnosis', event: 'issue opened', when: 'Feb 2 · 09:14', icon: 'circle-dot', done: true },
+      { stage: 'Triage', event: 'labeled est/2d · milestoned Beta', when: 'Feb 3 · 10:02', icon: 'tag', done: true },
+      { stage: 'Work start', event: 'first commit ref a41f09', when: 'Feb 6 · 11:47', icon: 'git-commit-horizontal', done: true },
+      { stage: 'Deploy', event: 'PR merged', when: 'pending', icon: 'git-merge', done: false },
+      { stage: 'Complete', event: 'issue closed', when: 'pending', icon: 'circle-check', done: false },
+    ],
+    forecast: { p80: 'done Feb 11–13', note: 'from your est/2d history · n=14' },
+    blocks: [91, 92],
+    blockedBy: [],
+    note: 'It blocks #91 and #92. I’d take it first — the critical path agrees with me.',
+  },
+}