christian/commitea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/streaming-chat

Browse Source
This commit is contained in:
christian
2026-07-09 04:43:51 +00:00
parent dbcdcda5e7 69106b603d
commit cf03827cd5
6 changed files with 232 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

31
apps/desktop/src/renderer/src/components/shell/app-shell.tsx
View File

@@ -4,7 +4,14 @@ import logoIcon from '../../design/assets/logo-icon.png'
import type { IssueChange } from '@commitea/core'
import type { IssueRef } from '../../data/fixtures.js'
import { backlogCalibration, forecastBacklog, issuesToBoardColumns, scheduleFocus } from '../../lib/backlog.js'
import {
backlogCalibration,
forecastBacklog,
issuesToBoardColumns,
milestoneView,
runwayView,
scheduleFocus,
} from '../../lib/backlog.js'
import { useBacklog } from '../../lib/use-backlog.js'
import { PrimitivesGallery } from '../gallery.js'
import { BoardScreen } from '../screens/board-screen.js'
@@ -87,6 +94,7 @@ export function AppShell() {
const [offline, setOffline] = useState(false)
const [issue, setIssue] = useState<IssueRef | null>(null)
const [readIds, setReadIds] = useState<number[]>([])
const [milestoneId, setMilestoneId] = useState<number | null>(null)
const [backlog, refetchBacklog] = useBacklog()
const boardColumns =
backlog.status === 'ready' ? issuesToBoardColumns(backlog.issues, backlog.timelines) : undefined
@@ -98,6 +106,19 @@ export function AppShell() {
backlog.status === 'ready'
? (forecastBacklog(backlog.issues, backlog.deps, new Date(), calibration?.model) ?? undefined)
: undefined
const runwayMilestones =
backlog.status === 'ready' ? runwayView(backlog.issues, backlog.milestones, backlog.deps) : undefined
const milestone =
backlog.status === 'ready' && milestoneId != null
? (milestoneView(
milestoneId,
backlog.issues,
backlog.milestones,
backlog.deps,
backlog.timelines,
calibration?.model,
) ?? undefined)
: undefined
useEffect(() => {
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
@@ -194,14 +215,18 @@ export function AppShell() {
return (
<RunwayScreen
onOpenCalibration={() => setView('calibration')}
onOpenMilestone={() => setView('milestone')}
onOpenMilestone={(id) => {
setMilestoneId(id ?? null)
setView('milestone')
}}
calibration={calibration ? { n: calibration.model.n, coldStart: calibration.model.coldStart } : undefined}
milestones={runwayMilestones}
/>
)
case 'calibration':
return <CalibrationScreen onBack={() => setView('runway')} data={calibration?.data} />
case 'milestone':
return <MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} />
return <MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} data={milestone} />
case 'inbox':
return (
<InboxScreen

2
apps/desktop/src/renderer/src/data/fixtures.ts
View File

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

142
apps/desktop/src/renderer/src/lib/backlog.ts
View File

@@ -7,6 +7,7 @@ import {
fitCalibration,
forecast,
type GiteaIssue,
type GiteaMilestone,
inferLifecycle,
type LifecycleColumn,
type LifecycleEvent,
@@ -16,10 +17,17 @@ import {
type ScheduledItem,
selectFocus,
toDurationModel,
workingDaysBetween,
} from '@commitea/core'
import { type BoardColumn, type BoardIssue, type CalibrationData, type FocusIssue } from '../data/fixtures.js'
import { type BurnUpData, buildBurnUpData } from './dates.js'
import {
type BoardColumn,
type BoardIssue,
type CalibrationData,
type FocusIssue,
type RunwayMilestone,
} from '../data/fixtures.js'
import { addWorkingDays, type BurnUpData, buildBurnUpData, formatRange, formatShort } from './dates.js'
type Timelines = Record<number, LifecycleEvent[]>
@@ -232,3 +240,133 @@ export function scheduleFocus(
later: toFocusIssue(f.later, inf),
}
}
/**
* Per-milestone Monte Carlo forecast for the Runway screen — each open milestone's
* open scope gets its own cone, and the p80 landing is compared to the milestone's
* due date (ok/at-risk). Ranges, never point dates. Milestones with no open scope
* (already shipped) are omitted. Falls back to the demo when there's nothing real.
*/
export function runwayView(
issues: GiteaIssue[],
milestones: GiteaMilestone[],
deps: DependencyEdge[],
today: Date = new Date(),
): RunwayMilestone[] {
const open = issues.filter((i) => i.state === 'open')
const rows = milestones
.filter((m) => m.state === 'open')
.map((m) => ({ m, scope: open.filter((i) => i.milestone?.id === m.id) }))
.filter((x) => x.scope.length > 0)
.map(({ m, scope }) => {
const f = forecast(
scope.map((i) => ({
number: i.number,
title: i.title,
labels: i.labels,
estimateDays: i.facts.estimateDays,
priority: i.facts.priority,
})),
deps,
)
const p90 = f.curve.length ? f.curve[f.curve.length - 1].p90Day : f.p95Day
const dueDay = m.dueOn ? workingDaysBetween(today, new Date(m.dueOn)) : null
return { m, p50: f.p50Day, p80: f.p80Day, p90, dueDay }
})
const horizon = Math.max(1, ...rows.map((r) => Math.max(r.p90, r.dueDay ?? 0)))
return rows.map(({ m, p50, p80, p90, dueDay }) => {
const onTrack = dueDay == null || p80 <= dueDay
return {
id: m.id,
name: m.title,
due: m.dueOn ? formatShort(new Date(m.dueOn)) : 'no date',
hard: false,
p80: formatRange(addWorkingDays(today, p50), addWorkingDays(today, p90)),
pos: p80 / horizon,
spread: Math.min(0.6, (p90 - p50) / horizon),
tone: onTrack ? ('ok' as const) : ('warn' as const),
note: dueDay == null ? `${Math.ceil(p80)}d of work` : onTrack ? 'on track' : 'at risk',
}
})
}
export interface MilestoneGroup {
label: string
issues: { id: number; title: string; labels: string[]; days?: string }[]
}
export interface MilestoneView {
name: string
due: string
soft: boolean
scopeCount: number
scopeEstDays: number
doneCount: number
donePct: number
/** p50..p90 landing range for the remaining open scope; null when nothing's open. */
forecastRange: string | null
cone: BurnUpData | null
groups: MilestoneGroup[]
}
/**
* The Milestone drill-in: real scope, done %, a Monte Carlo cone over the
* milestone's remaining open work, and its issues grouped by lifecycle column.
* Returns null for an unknown id — the screen then shows the demo fixture.
*/
export function milestoneView(
id: number,
issues: GiteaIssue[],
milestones: GiteaMilestone[],
deps: DependencyEdge[],
timelines: Timelines = {},
calibration?: CalibrationModel,
today: Date = new Date(),
): MilestoneView | null {
const m = milestones.find((x) => x.id === id)
if (!m) return null
const all = issues.filter((i) => i.milestone?.id === id)
const open = all.filter((i) => i.state === 'open')
const done = all.filter((i) => i.state === 'closed')
const scopeEstDays = all.reduce((sum, i) => sum + (i.facts.estimateDays ?? 2), 0)
const model = calibration ? toDurationModel(calibration) : undefined
const f = forecast(
open.map((i) => ({
number: i.number,
title: i.title,
labels: i.labels,
estimateDays: i.facts.estimateDays,
priority: i.facts.priority,
})),
deps,
model ? { model } : {},
)
const cone = buildBurnUpData(f, today)
const inf = inferAll(all, timelines, today)
const groups: MilestoneGroup[] = COLUMN_ORDER.map((key) => ({
label: COLUMN_LABELS[key],
issues: all
.filter((i) => inf.get(i.number)!.column === key)
.map((i) => {
const days = inf.get(i.number)!.steepingDays
return { id: i.number, title: i.title, labels: i.labels, days: days != null ? `${days}d` : undefined }
}),
})).filter((g) => g.issues.length > 0)
return {
name: m.title,
due: m.dueOn ? formatShort(new Date(m.dueOn)) : 'no date',
soft: true,
scopeCount: all.length,
scopeEstDays,
doneCount: done.length,
donePct: all.length ? Math.round((done.length / all.length) * 100) : 0,
forecastRange: cone ? cone.rangeLabel : null,
cone,
groups,
}
}