Recalculates as you change the assumptions above.
-
+
+
+ Assumed auto-merge share
+
+
setSharePct(Number(e.target.value))}
+ className="accent-primary mt-3 w-full"
+ />
+
+ {SHARE_MIN}%
+ {SHARE_MAX}%
+
- Auto-merge is only safe if the analysis understands what changed. Research found that 67% of Dependabot PRs lack
- any compatibility scoring beyond the version bump itself
-
-
-
);
}
-function MidReportCta() {
+function CompareCard({
+ label,
+ value,
+ sub,
+ testId,
+ accent = false,
+ footnote = false,
+}: {
+ label: string;
+ value: string;
+ sub: string;
+ testId: string;
+ accent?: boolean;
+ footnote?: boolean;
+}) {
return (
-
);
}
+
+function quarterHoursLabel(costUsd: number, hourlyRateUsd: number): string {
+ const hours = Math.round(costUsd / hourlyRateUsd / 4);
+ if (hours <= 0) return 'under an hour of engineer time per quarter';
+ return `~${hours.toLocaleString()} ${hours === 1 ? 'hour' : 'hours'} of engineer time per quarter`;
+}
+
+function quarterHoursSavedLabel(savingsUsd: number, hourlyRateUsd: number): string {
+ const hours = Math.round(savingsUsd / hourlyRateUsd / 4);
+ if (hours <= 0) return 'under an hour of engineer time saved per quarter';
+ return `~${hours.toLocaleString()} ${hours === 1 ? 'hour' : 'hours'} of engineer time saved per quarter`;
+}
diff --git a/src/report/web/acts/CallToAction.tsx b/src/report/web/acts/CallToAction.tsx
index c882396..adc2f82 100644
--- a/src/report/web/acts/CallToAction.tsx
+++ b/src/report/web/acts/CallToAction.tsx
@@ -1,13 +1,17 @@
import { useAnalytics } from '../analytics/AnalyticsContext.tsx';
+import { Button } from '../components/ui/button.tsx';
export const callToActionTestIds = {
section: 'call-to-action-section',
- link: 'call-to-action-link',
+ cta: 'call-to-action-cta',
} as const;
export const callToActionCopy = {
heading: 'Get on the waitlist',
- linkLabel: 'patchwave.ai →',
+ pitch:
+ 'PatchWave reviews each Dependabot PR, auto-merges the safe updates, and gives engineers context for the few that need judgment.',
+ earlyAccess: "Early access, plus a heads-up when the public beta opens. That's all we'll email you about.",
+ ctaLabel: 'Join the waitlist →',
} as const;
export function CallToAction() {
@@ -17,18 +21,17 @@ export function CallToAction() {
{callToActionCopy.heading}
-
- Early access notifications, plus a heads-up when we open the public beta. No newsletter, no upsell email
- sequence.
-
-
analytics.capture('cta_clicked', { which: 'call_to_action' })}
- className="bg-foreground text-background mt-6 inline-flex items-center rounded-md px-5 py-2.5 text-sm font-medium no-underline hover:opacity-90"
- >
- {callToActionCopy.linkLabel}
-
+
{callToActionCopy.pitch}
+
{callToActionCopy.earlyAccess}
+
+ analytics.capture('cta_clicked', { which: 'call_to_action_primary' })}
+ >
+ {callToActionCopy.ctaLabel}
+
+
);
}
diff --git a/src/report/web/acts/CostStory.tsx b/src/report/web/acts/CostStory.tsx
index ccd5b0e..99c88cc 100644
--- a/src/report/web/acts/CostStory.tsx
+++ b/src/report/web/acts/CostStory.tsx
@@ -1,9 +1,8 @@
+import { useState } from 'react';
import { useEmbeddedData } from '../data/EmbeddedDataContext.tsx';
-import { fmtDaysShort } from '../format/days.ts';
import { fmtUsd } from '../format/money.ts';
import { useAssumptions } from '../hooks/useAssumptions.tsx';
-import { AssumptionInput } from '../primitives/AssumptionInput.tsx';
-import { BarChart } from '../primitives/BarChart.tsx';
+import { AssumptionsFootnote } from '../primitives/AssumptionsFootnote.tsx';
import { Citation } from '../primitives/Citation.tsx';
import { PersonRow } from '../primitives/PersonRow.tsx';
@@ -13,12 +12,14 @@ export const costStoryTestIds = {
monthlyCost: 'cost-story-monthly-cost',
annualCost: 'cost-story-annual-cost',
peopleTable: 'cost-story-people-table',
+ peopleToggle: 'cost-story-people-toggle',
} as const;
+const INITIAL_PEOPLE_COUNT = 5;
+
export const costStoryCopy = {
eyebrow: 'Cost of dependency toil',
heading: 'How that number is built',
- ageHeading: 'Open PRs by age',
} as const;
export function CostStory() {
@@ -26,7 +27,6 @@ export function CostStory() {
const { assumptions, derived } = useAssumptions();
const merged = data.costEstimate.mergedInWindow;
- const ttm = data.prBacklog;
return (
@@ -39,10 +39,11 @@ export function CostStory() {
Your team merged {merged.toLocaleString()} Dependabot PRs in
- the last {data.meta.windowDays} days. At{' '}
- {assumptions.minutesPerPr} minutes per PR for triage and
- review and a ${assumptions.hourlyRateUsd}/hr loaded engineer
- rate, that comes out to:
+ the last {data.meta.windowDays} days. Using adjustable
+ {assumptions.minutesPerPr} minutes per PR and{' '}
+ ${assumptions.hourlyRateUsd}/hr engineer cost, that comes
+ out to:
@@ -64,33 +65,15 @@ export function CostStory() {
/>
-
+
- The 5 min/PR default sits at the low end of Mend's published 15–60 min/week per developer range for
- Dependabot triage
- {fmtDaysShort(ttm.timeToMergeP50Days)} , p90{' '}
- {fmtDaysShort(ttm.timeToMergeP90Days)} .
-
-
-
- {costStoryCopy.ageHeading}
-
-
- ({ label: b.label, value: b.count }))}
- emptyLabel="No open Dependabot PRs."
- />
-
-
-
- Volume is trending up, not down. GitHub-published CVEs rose 476% year-to-date in 2026
-
+ The adjustable
+
+
);
@@ -117,9 +100,13 @@ function CostCell({
);
}
-function PeopleTable() {
+function PeopleTable({ windowDays }: { windowDays: number }) {
const { derived } = useAssumptions();
- const hasAny = derived.topMergers.length + derived.topReviewers.length > 0;
+ const [expanded, setExpanded] = useState(false);
+ const people = combinedPeopleRows(derived.mergers, derived.reviewers);
+ const visiblePeople = expanded ? people : people.slice(0, INITIAL_PEOPLE_COUNT);
+ const hiddenCount = people.length - visiblePeople.length;
+ const hasAny = people.length > 0;
if (!hasAny) {
return (
@@ -130,9 +117,6 @@ function PeopleTable() {
return (
Who's bearing this cost
-
- Bot accounts excluded. Annualized = cost projected to a full year.
-
Person
Count
-
Cost in window
+
Cost over last {windowDays} days
Annualized
- {derived.topMergers.map((m) => (
+ {visiblePeople.map((r) => (
+
+ setExpanded((open) => !open)}
+ className="text-muted-foreground hover:text-foreground text-sm font-medium underline-offset-4 hover:underline"
+ >
+ {expanded ? 'Show top 5' : `Show ${hiddenCount.toLocaleString()} more`}
+
+
+
+ ) : null}
);
}
+
+interface ActivityCost {
+ login: string;
+ count: number;
+ windowCostUsd: number;
+ annualCostUsd: number;
+}
+
+interface CombinedPersonRow {
+ login: string;
+ mergedCount: number;
+ reviewedCount: number;
+ windowCostUsd: number;
+ annualCostUsd: number;
+}
+
+function combinedPeopleRows(mergers: readonly ActivityCost[], reviewers: readonly ActivityCost[]): CombinedPersonRow[] {
+ const rows = new Map
();
+ for (const m of mergers) {
+ rows.set(m.login, {
+ login: m.login,
+ mergedCount: m.count,
+ reviewedCount: 0,
+ windowCostUsd: m.windowCostUsd,
+ annualCostUsd: m.annualCostUsd,
+ });
+ }
+ for (const r of reviewers) {
+ const row =
+ rows.get(r.login) ??
+ ({
+ login: r.login,
+ mergedCount: 0,
+ reviewedCount: 0,
+ windowCostUsd: 0,
+ annualCostUsd: 0,
+ } satisfies CombinedPersonRow);
+ row.reviewedCount += r.count;
+ row.windowCostUsd += r.windowCostUsd;
+ row.annualCostUsd += r.annualCostUsd;
+ rows.set(r.login, row);
+ }
+ return [...rows.values()].sort(
+ (a, b) => b.annualCostUsd - a.annualCostUsd || b.windowCostUsd - a.windowCostUsd || a.login.localeCompare(b.login),
+ );
+}
diff --git a/src/report/web/acts/MethodologyAppendix.tsx b/src/report/web/acts/MethodologyAppendix.tsx
index 4a19a71..a7df842 100644
--- a/src/report/web/acts/MethodologyAppendix.tsx
+++ b/src/report/web/acts/MethodologyAppendix.tsx
@@ -1,106 +1,487 @@
+import type { ReactNode } from 'react';
import { useEmbeddedData } from '../data/EmbeddedDataContext.tsx';
import { fmtBytes } from '../format/bytes.ts';
+import { fmtUsd } from '../format/money.ts';
import { useAssumptions } from '../hooks/useAssumptions.tsx';
+import { type MethodologyTab, useAssumptionsDisclosure } from '../hooks/useAssumptionsDisclosure.tsx';
+import { useRegisteredFootnotes } from '../hooks/useFootnotes.tsx';
+import { AssumptionInput } from '../primitives/AssumptionInput.tsx';
+import { AssumptionsFootnote, assumptionsPanelId } from '../primitives/AssumptionsFootnote.tsx';
import { Citation } from '../primitives/Citation.tsx';
+import { reposWithoutSecurityAlertsId } from './RiskStory.tsx';
+
+export const methodologyAppendixTestIds = {
+ section: 'methodology-appendix-section',
+ tabList: 'methodology-tab-list',
+ tabPanel: 'methodology-tab-panel',
+ sources: 'methodology-sources-and-notes',
+ rawData: 'methodology-raw-data',
+ disabledAlertsRepos: 'methodology-disabled-alerts-repos',
+} as const;
+
+const appendixTabs: Array<{ id: MethodologyTab; label: string }> = [
+ { id: 'calculation', label: 'Calculation' },
+ { id: 'data', label: 'Raw data' },
+];
export function MethodologyAppendix() {
const data = useEmbeddedData();
const { assumptions } = useAssumptions();
+ const { open, setOpen, activeTab, setActiveTab } = useAssumptionsDisclosure();
const org = data.orgOverview;
const cov = data.dependabotCoverage;
+ const pr = data.prBacklog;
+ const stalled = data.stalledSignals;
+ const cve = data.cve;
return (
-
-
+
+ setOpen(e.currentTarget.open)}>
How this report was calculated
-
-
-
Cost math
-
-
- Cost in window = merged PRs × minutes per PR ÷ 60 × hourly rate. Currently:{' '}
- {data.costEstimate.mergedInWindow} PRs × {assumptions.minutesPerPr} min ÷ 60 × $
- {assumptions.hourlyRateUsd}/hr.
-
-
- Monthly run rate scales the window cost by (365 / 12) / windowDays. Annualized = monthly × 12.
-
-
- The 5 min/PR default sits at the low end of Mend's published 15–60 min/week per developer
-
- Savings scenarios multiply the monthly cost by the auto-merge share (50%, 60%, 70%, 80%).
- Bot accounts are excluded from merger and reviewer counts.
-
+
+
+ {appendixTabs.map((tab) => (
+ setActiveTab(tab.id)}
+ className={`rounded px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors ${
+ activeTab === tab.id ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground'
+ }`}
+ >
+ {tab.label}
+
+ ))}
-
-
Data window and scope
-
-
- Window: {data.meta.windowDays} days ending {data.meta.generatedAt.slice(0, 10)}.
-
-
- Repos scanned: {org.repoCount} active ({org.publicCount} public, {org.privateCount} private,{' '}
- {org.internalCount} internal)
- {org.archivedExcluded > 0 ? `; ${org.archivedExcluded} archived repos excluded` : ''}.
-
-
- Dependabot coverage: {cov.reposWithConfig} repos ({cov.reposWithConfigPercentage}%) have a config;{' '}
- {cov.reposWithSecurityUpdates} ({cov.reposWithSecurityUpdatesPercentage}%) have security updates
- enabled.
-
- {org.activeHumanCommitters} distinct human committers active in window.
-
-
+
+ {activeTab === 'calculation' && (
+
+
+ Cost assumptions
+
+ Every cost and time figure in this report is modeled from these two inputs. Change them and the
+ numbers throughout recalculate. The defaults are intentionally conservative.
+
+
+
- {org.topLanguages.length > 0 && (
-
-
Language mix
-
- {org.topLanguages.slice(0, 5).map((l) => (
-
- {l.language}: {fmtBytes(l.bytes)} ({l.percentage}%)
-
- ))}
-
-
- )}
-
-
-
Caveats
-
- Estimates only; real savings vary by team. The defaults are intentionally conservative
-
-
+
+ Calculation model
+
+
+
+
+ Merged PRs × minutes per PR ÷ 60 × hourly rate. Currently using
+ adjustable
+
+
+
+ The adjustable
+
+
+ Estimates only; real savings vary by team. The defaults are intentionally conservative
+
+
+
+ )}
+
+ {activeTab === 'data' && (
+
+ Raw investigation data
+
+
+
+
+
+
+
+
+
-
-
Raw data
-
- The accompanying{' '}
- patchwave-report.zip ships the
- full per-repo dataset as JSON. Open{' '}
- data/aggregated.json for the
- rolled-up metrics this page renders.
-
+
+ `${r.repo} (${r.openPrs} open)`)}
+ />
+
+
+
+
+
+
+
+
+ {org.topLanguages.length > 0 && (
+
+
+ {org.topLanguages.map((l) => (
+
+ {l.language}
+
+ {fmtBytes(l.bytes)} ({l.percentage}%)
+
+
+ ))}
+
+
+ )}
+
+
+ )}
);
}
+
+function SectionHeading({ children }: { children: string }) {
+ return
{children} ;
+}
+
+function FormulaRow({ label, value }: { label: string; value: ReactNode }) {
+ return (
+
+
+ {label}
+
+ {value}
+
+ );
+}
+
+function DataPanel({ title, children }: { title: string; children: ReactNode }) {
+ return (
+
+ );
+}
+
+function MetricList({ rows }: { rows: Array<[string, string]> }) {
+ return (
+
+ {rows.map(([label, value]) => (
+
+
{label}
+ {value}
+
+ ))}
+
+ );
+}
+
+function InlineBreakdown
({
+ label,
+ rows,
+ nameKey,
+ valueKey,
+}: {
+ label: string;
+ rows: readonly T[];
+ nameKey: keyof T;
+ valueKey: keyof T;
+}) {
+ if (rows.length === 0) return null;
+ return (
+
+
{label}
+
+ {rows.map((row) => (
+
+ {String(row[nameKey])}
+ {String(row[valueKey])}
+
+ ))}
+
+
+ {notes.map((note) => (
+
+ ))}
+
+ );
+}
+
+function RepoList({
+ id,
+ testId,
+ label,
+ empty,
+ repos,
+}: {
+ id?: string;
+ testId?: string;
+ label: string;
+ empty: string;
+ repos: readonly string[];
+}) {
+ return (
+
+
{label}
+ {repos.length === 0 ? (
+
{empty}
+ ) : (
+
+ {repos.map((repo) => (
+
+ {repo}
+
+ ))}
+
+ )}
+
+
+ Top repos by severity
+
+
+
+
+
+ Repo
+ C
+ H
+ M
+ L
+
+
+
+ {repos.map((repo) => (
+
+ {repo.repo}
+ {repo.critical || ''}
+ {repo.high || ''}
+ {repo.medium || ''}
+ {repo.low || ''}
+
+ ))}
+
+
+
+
+
{label}
+ {rows.length === 0 ? (
+
No {countLabel} activity in the window.
+ ) : (
+
+ {rows.map((row) => (
+
+ {row.login}
+
+ {row.count} {countLabel}
+ {row.annualCostUsd !== undefined ? `, ${fmtUsd(row.annualCostUsd)}/yr` : ''}
+
+
+ ))}
+
+ )}
+
+
+ {openPrAgeStoryCopy.eyebrow}
+
+
+ {hasOpenPrs ? openPrAgeStoryCopy.heading : openPrAgeStoryCopy.emptyHeading}
+
+
+
+ {hasOpenPrs ? (
+ <>
+ Volume is trending up, not down. GitHub-published CVEs rose 476% year-to-date in 2026
+
+ {' '}
+ and every new CVE in your stack eventually becomes a Dependabot PR.
+
+ ) : (
+ 'You have no open Dependabot PRs right now. Keep security updates enabled so new CVE-driven updates keep flowing into this queue.'
+ )}
+
+
+
+ {!hasOpenPrs ? (
+
+ You have no open Dependabot PRs right now.
+
+ ) : (
+
+ {pr.openAgeBuckets.map((bucket) => (
+
+ ))}
+
+ Time-to-merge in your data: p50{' '}
+ {fmtDaysShort(pr.timeToMergeP50Days)} ,
+ p90{' '}
+ {fmtDaysShort(pr.timeToMergeP90Days)} .
+
+
+ )}
+
+ );
+}
+
+function AgeBucketRow({ label, count, total }: { label: string; count: number; total: number }) {
+ const pct = total === 0 ? 0 : Math.round((count / total) * 100);
+ return (
+
+
{label}
+
+
{count.toLocaleString()}
+
@@ -65,7 +77,6 @@ export function RiskStory() {
);
}
- const topRepos = cve.topReposBySeverity.slice(0, 3);
const hasOldest = cve.oldestCriticalDays !== null || cve.oldestHighDays !== null;
return (
@@ -77,9 +88,14 @@ export function RiskStory() {
data-testid={riskStoryTestIds.heading}
className="text-foreground mt-2 text-3xl leading-tight font-medium tracking-tight sm:text-4xl"
>
- {cve.totalOpenAlerts.toLocaleString()} open alerts, and how long they've been sitting
+ {cve.totalOpenAlerts.toLocaleString()} open security alerts
+
+ Not every CVE is exploitable, so treat this as exposure, not breach risk. For triage, age is what matters: how
+ long each alert has sat open.
+
+
)}
- {topRepos.length > 0 && (
+ {cve.topReposBySeverity.length > 0 && (
<>
Top repos by severity
-
-
-
-
- Repo
- Critical
- High
- Medium
- Low
-
-
-
- {topRepos.map((r) => (
-
- {r.repo}
- {r.critical || ''}
- {r.high || ''}
- {r.medium || ''}
- {r.low || ''}
-
- ))}
-
-
- {cve.topReposBySeverity.length > topRepos.length && (
-
- {cve.topReposBySeverity.length - topRepos.length} more repos in the appendix data.
-
- )}
-
- {cve.reposWithSecurityAlertsDisabled.length} repos have Dependabot security alerts turned off (or the feature
- isn't available there). New CVEs in those repos won't appear here.
+
+ Did you know: {' '}
+
+ {cve.reposWithSecurityAlertsDisabled.length}
+ {' '}
+ of your {orgOverview.repoCount} repos{' '}
+ {cve.reposWithSecurityAlertsDisabled.length === 1 ? 'does' : 'do'} not have Dependabot security alerts enabled
+
)}
- Not every CVE is exploitable. This counts exposure, not breach risk. The number that matters for prioritization
- is age: industry data shows Dependabot security PRs hit just 13% adoption in JavaScript open-source projects
+ Just 13% of Dependabot security PRs get merged in open-source JavaScript projects
);
}
+interface RepoSeverityRow {
+ repo: string;
+ critical: number;
+ high: number;
+ medium: number;
+ low: number;
+}
+
+function TopReposBySeverityTable({ repos }: { repos: readonly RepoSeverityRow[] }) {
+ const [expanded, setExpanded] = useState(false);
+ const visibleRepos = expanded ? repos : repos.slice(0, INITIAL_REPO_COUNT);
+ const hiddenCount = repos.length - visibleRepos.length;
+
+ return (
+
+
+
+
+ Repo
+ Critical
+ High
+ Medium
+ Low
+
+
+
+ {visibleRepos.map((r) => (
+
+ {r.repo}
+ {r.critical || ''}
+ {r.high || ''}
+ {r.medium || ''}
+ {r.low || ''}
+
+ ))}
+ {hiddenCount > 0 || expanded ? (
+
+
+ setExpanded((open) => !open)}
+ className="text-muted-foreground hover:text-foreground text-sm font-medium underline-offset-4 hover:underline"
+ >
+ {expanded ? 'Show top 5' : `Show ${hiddenCount.toLocaleString()} more`}
+
+
+
+ ) : null}
+
+
+
-
- Adjust the assumptions
-
-
-
-
- Numbers throughout the report recalculate as you change these. Defaults are conservative.
-
-
+// One dense line under the headline: volume and time first, the alert count as a
+// tail signal. The CVE fragment also carries the not-measured state so the
+// report never silently drops the security signal.
+function SupportingFacts() {
+ const { prBacklog: pr } = useEmbeddedData();
+ const oldestSuffix = pr.oldestOpenDays !== null ? ` (oldest ${pr.oldestOpenDays} days)` : '';
-
- Generated {generatedDate}. {data.meta.windowDays}-day rolling window. {data.meta.totalReposScanned} repos
- scanned.
-
-
+ return (
+
+
+ {pr.mergedInWindowCount.toLocaleString()} Dependabot PRs
+ merged
+
+
+ {pr.openCount.toLocaleString()} still open{oldestSuffix}
+
+
);
}
-function CveLineItem() {
+function CveFact() {
const cve = useEmbeddedData().cve;
if (cve.status === 'scope-missing') {
return (
-
+
{verdictCopy.cveScopeMissing}
-
- );
- }
- if (cve.status === 'no-data') {
- return (
-
- {verdictCopy.cveNoData}
-
+
);
}
return (
-
- {cve.totalOpenAlerts.toLocaleString()} open security alerts:{' '}
- {cve.bySeverity.critical} critical ,{' '}
- {cve.bySeverity.high} high
-
+
+ {cve.totalOpenAlerts.toLocaleString()} open security alerts
+
+ );
+}
+
+function Dot() {
+ return (
+
+ ·
+
);
}
diff --git a/src/report/web/assumptionFields.ts b/src/report/web/assumptionFields.ts
new file mode 100644
index 0000000..fd4f34e
--- /dev/null
+++ b/src/report/web/assumptionFields.ts
@@ -0,0 +1,18 @@
+// Single source of truth for the user-adjustable cost assumptions: the labels,
+// affixes, and editable bounds the UI exposes. The runtime defaults live with the
+// shared math in `../costFormulas.ts` and reach the report via the embedded data;
+// this module owns only what the input control and its clamp need.
+
+export interface AssumptionField {
+ label: string;
+ prefix?: string;
+ suffix?: string;
+ min: number;
+ max: number;
+ step: number;
+}
+
+export const assumptionFields = {
+ hourlyRateUsd: { label: 'Loaded hourly rate', prefix: '$', suffix: '/hr', min: 1, max: 1000, step: 5 },
+ minutesPerPr: { label: 'Minutes per PR', min: 1, max: 240, step: 1 },
+} as const satisfies Record;
diff --git a/src/report/web/components/ui/button.tsx b/src/report/web/components/ui/button.tsx
new file mode 100644
index 0000000..2cf2697
--- /dev/null
+++ b/src/report/web/components/ui/button.tsx
@@ -0,0 +1,61 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../../lib/utils.ts';
+
+const buttonVariants = cva(
+ "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+ outline:
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+ icon: 'size-9',
+ 'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+ 'icon-sm': 'size-8',
+ 'icon-lg': 'size-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
+
+function Button({
+ className,
+ variant = 'default',
+ size = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot.Root : 'button';
+
+ return (
+ (defaults);
const setHourlyRate = useCallback(
- (n: number) => setAssumptions((prev) => ({ ...prev, hourlyRateUsd: clamp(n, 1, 1000) })),
+ (next: ValueUpdate) =>
+ setAssumptions((prev) => ({
+ ...prev,
+ hourlyRateUsd: clamp(
+ resolve(next, prev.hourlyRateUsd),
+ assumptionFields.hourlyRateUsd.min,
+ assumptionFields.hourlyRateUsd.max,
+ ),
+ })),
[],
);
const setMinutesPerPr = useCallback(
- (n: number) => setAssumptions((prev) => ({ ...prev, minutesPerPr: clamp(n, 1, 240) })),
+ (next: ValueUpdate) =>
+ setAssumptions((prev) => ({
+ ...prev,
+ minutesPerPr: clamp(
+ resolve(next, prev.minutesPerPr),
+ assumptionFields.minutesPerPr.min,
+ assumptionFields.minutesPerPr.max,
+ ),
+ })),
[],
);
const reset = useCallback(() => setAssumptions(defaults), [defaults.hourlyRateUsd, defaults.minutesPerPr]);
@@ -49,8 +68,8 @@ export function AssumptionsProvider({ data, children }: { data: EmbeddedReportDa
const cost = deriveCostEstimate(merged, windowDays, assumptions);
return {
...cost,
- topMergers: derivePersonCosts(data.people.topMergers, windowDays, minutesPerPr, hourlyRateUsd),
- topReviewers: derivePersonCosts(data.people.topReviewers, windowDays, ASSUMED_MIN_PER_REVIEW, hourlyRateUsd),
+ mergers: derivePersonCosts(data.people.mergers, windowDays, minutesPerPr, hourlyRateUsd),
+ reviewers: derivePersonCosts(data.people.reviewers, windowDays, ASSUMED_MIN_PER_REVIEW, hourlyRateUsd),
};
}, [assumptions, data]);
@@ -66,6 +85,10 @@ export function useAssumptions(): ContextValue {
return v;
}
+function resolve(next: ValueUpdate, prev: number): number {
+ return typeof next === 'function' ? next(prev) : next;
+}
+
function clamp(n: number, min: number, max: number): number {
if (!Number.isFinite(n)) return min;
return Math.max(min, Math.min(max, Math.round(n)));
diff --git a/src/report/web/hooks/useAssumptionsDisclosure.tsx b/src/report/web/hooks/useAssumptionsDisclosure.tsx
new file mode 100644
index 0000000..9bb3e40
--- /dev/null
+++ b/src/report/web/hooks/useAssumptionsDisclosure.tsx
@@ -0,0 +1,52 @@
+import { type ReactNode, createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+export type MethodologyTab = 'calculation' | 'data';
+
+// The cost assumptions panel lives in the methodology appendix, behind a collapsed
+// . Footnote links use normal hash anchors; this context only opens the
+// disclosure and selects the tab containing the target.
+interface ContextValue {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ activeTab: MethodologyTab;
+ setActiveTab: (tab: MethodologyTab) => void;
+ reveal: (tab?: MethodologyTab) => void;
+}
+
+const Ctx = createContext(null);
+
+export function AssumptionsDisclosureProvider({ children }: { children: ReactNode }) {
+ const [open, setOpen] = useState(false);
+ const [activeTab, setActiveTab] = useState('calculation');
+
+ const reveal = useCallback((tab: MethodologyTab = 'calculation') => {
+ setActiveTab(tab);
+ setOpen(true);
+ }, []);
+
+ useEffect(() => {
+ const revealHashTarget = () => {
+ if (window.location.hash.length <= 1) return;
+ const target = decodeURIComponent(window.location.hash.slice(1));
+ if (target === 'appendix-assumptions') {
+ reveal('calculation');
+ }
+ if (target === 'appendix-sources' || target.startsWith('footnote-')) {
+ setOpen(true);
+ }
+ };
+ revealHashTarget();
+ window.addEventListener('hashchange', revealHashTarget);
+ return () => window.removeEventListener('hashchange', revealHashTarget);
+ }, []);
+
+ return {children} ;
+}
+
+export function useAssumptionsDisclosure(): ContextValue {
+ const v = useContext(Ctx);
+ if (!v) {
+ throw new Error('useAssumptionsDisclosure called outside AssumptionsDisclosureProvider');
+ }
+ return v;
+}
diff --git a/src/report/web/hooks/useFootnotes.tsx b/src/report/web/hooks/useFootnotes.tsx
new file mode 100644
index 0000000..c7e4837
--- /dev/null
+++ b/src/report/web/hooks/useFootnotes.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode, createContext, useContext, useMemo, useRef } from 'react';
+
+export interface FootnoteRegistration {
+ id: string;
+ title: string;
+ body: ReactNode;
+}
+
+export interface RegisteredFootnote extends FootnoteRegistration {
+ number: number;
+}
+
+interface FootnoteContextValue {
+ register: (footnote: FootnoteRegistration) => number;
+ list: () => RegisteredFootnote[];
+}
+
+const FootnoteContext = createContext(null);
+
+export function FootnoteProvider({ children }: { children: ReactNode }) {
+ const footnotes = useRef(new Map());
+ const value = useMemo(
+ () => ({
+ register: (footnote) => {
+ const existing = footnotes.current.get(footnote.id);
+ if (existing !== undefined) return existing.number;
+ const registered = { ...footnote, number: footnotes.current.size + 1 };
+ footnotes.current.set(footnote.id, registered);
+ return registered.number;
+ },
+ list: () => [...footnotes.current.values()].sort((a, b) => a.number - b.number),
+ }),
+ [],
+ );
+
+ return {children} ;
+}
+
+export function useFootnote(footnote: FootnoteRegistration): number {
+ const registry = useContext(FootnoteContext);
+ if (registry === null) {
+ throw new Error('useFootnote must be used within FootnoteProvider');
+ }
+ return registry.register(footnote);
+}
+
+export function useRegisteredFootnotes(): RegisteredFootnote[] {
+ const registry = useContext(FootnoteContext);
+ if (registry === null) {
+ throw new Error('useRegisteredFootnotes must be used within FootnoteProvider');
+ }
+ return registry.list();
+}
diff --git a/src/report/web/index.dev.html b/src/report/web/index.dev.html
index cdaedc3..7de2677 100644
--- a/src/report/web/index.dev.html
+++ b/src/report/web/index.dev.html
@@ -3,7 +3,7 @@
Patchwave diagnostic report dev
+ PatchWave diagnostic report dev
Patchwave diagnostic report
+ PatchWave diagnostic report
This report needs JavaScript
- The Patchwave report renders in your browser. Turn JavaScript on and reload, or open the accompanying
- patchwave-report.zip for the raw JSON data.
+ The PatchWave report renders in your browser. Turn JavaScript on and reload to view the embedded report data.
diff --git a/src/report/web/lib/utils.ts b/src/report/web/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/src/report/web/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/report/web/primitives/AssumptionInput.tsx b/src/report/web/primitives/AssumptionInput.tsx
index d10c7fb..e78f105 100644
--- a/src/report/web/primitives/AssumptionInput.tsx
+++ b/src/report/web/primitives/AssumptionInput.tsx
@@ -1,9 +1,8 @@
import { useAnalytics } from '../analytics/AnalyticsContext.tsx';
+import { assumptionFields } from '../assumptionFields.ts';
+import { Button } from '../components/ui/button.tsx';
import { useAssumptions } from '../hooks/useAssumptions.tsx';
-
-interface Props {
- variant?: 'inline' | 'panel';
-}
+import { NumberStepper } from './NumberStepper.tsx';
export const assumptionInputTestIds = {
container: 'assumption-input-container',
@@ -12,88 +11,40 @@ export const assumptionInputTestIds = {
reset: 'assumption-input-reset',
} as const;
-export function AssumptionInput({ variant = 'inline' }: Props) {
+export function AssumptionInput() {
const { assumptions, setHourlyRate, setMinutesPerPr, reset } = useAssumptions();
const analytics = useAnalytics();
- const isPanel = variant === 'panel';
return (
- analytics.capture('assumption_changed', { field: 'hourly_rate', value })}
- min={1}
- max={1000}
- step={5}
+ {...assumptionFields.hourlyRateUsd}
/>
- analytics.capture('assumption_changed', { field: 'minutes_per_pr', value })}
- min={1}
- max={240}
- step={1}
+ {...assumptionFields.minutesPerPr}
/>
- {
reset();
analytics.capture('assumptions_reset');
}}
- className="text-muted-foreground decoration-border hover:text-foreground text-xs font-medium underline underline-offset-2 no-print"
+ className="text-muted-foreground hover:text-foreground mb-1 h-auto p-0 text-xs no-print"
>
reset
-
+
);
}
-
-interface FieldProps {
- label: string;
- value: number;
- onChange: (n: number) => void;
- onCommit?: (n: number) => void;
- prefix?: string;
- suffix?: string;
- min: number;
- max: number;
- step: number;
- testId: string;
-}
-
-function NumberField({ label, value, onChange, onCommit, prefix, suffix, min, max, step, testId }: FieldProps) {
- return (
-
- {label}
-
- {prefix && {prefix} }
- {suffix} }
-
-
- );
-}
diff --git a/src/report/web/primitives/AssumptionsFootnote.tsx b/src/report/web/primitives/AssumptionsFootnote.tsx
new file mode 100644
index 0000000..7576e5a
--- /dev/null
+++ b/src/report/web/primitives/AssumptionsFootnote.tsx
@@ -0,0 +1,22 @@
+import { useAnalytics } from '../analytics/AnalyticsContext.tsx';
+import { FootnoteReference } from './FootnoteReference.tsx';
+
+export const assumptionsFootnoteTestId = 'assumptions-footnote';
+export const assumptionsFootnoteId = 'assumptions';
+export const assumptionsPanelId = 'appendix-assumptions';
+
+export function AssumptionsFootnote({ from, className }: { from: string; className?: string }) {
+ const analytics = useAnalytics();
+ return (
+