CommiTea foundation + P3 UI: gitea client, e2e harness, all product screens #35
@@ -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. */
|
||||
|
||||
@@ -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 expect(window.getByRole('heading', { name: 'States' })).toBeVisible()
|
||||
await expect(window.getByText('The pot is empty')).toBeVisible()
|
||||
await app.screenshot('shell-states')
|
||||
await window.getByPlaceholder(/Search the pot/).fill('lifecycle')
|
||||
await expect(window.getByText('Fix lifecycle inference on merge events')).toBeVisible()
|
||||
await expect(window.getByText('Dark theme: cone fill too faint')).toBeHidden()
|
||||
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()
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
130
apps/desktop/src/renderer/src/components/screens/deps-graph.tsx
Normal file
130
apps/desktop/src/renderer/src/components/screens/deps-graph.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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' }}
|
||||
>
|
||||
|
||||
105
apps/desktop/src/renderer/src/components/screens/gantt-view.tsx
Normal file
105
apps/desktop/src/renderer/src/components/screens/gantt-view.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
@@ -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 (
|
||||
<PlaceholderScreen
|
||||
title={TITLE[view] ?? view}
|
||||
phase={PHASE[view] ?? 'a later phase'}
|
||||
onOpenIssue={() => openIssue(1)}
|
||||
/>
|
||||
)
|
||||
return <PlaceholderScreen title={TITLE[view] ?? view} phase={PHASE[view] ?? 'a later phase'} />
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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.',
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user