newpr 1.0.21 → 1.0.23

package/src/stack/verify.ts

@@ -6,6 +6,7 @@ export interface VerifyInput {
 	head_sha: string;
 	exec_result: StackExecResult;
 	ownership: Map<string, string>;
+	group_deps?: Map<string, string[]>;
 }
 
 export interface VerifyResult {
@@ -16,7 +17,7 @@ export interface VerifyResult {
 }
 
 export async function verifyStack(input: VerifyInput): Promise<VerifyResult> {
-	const { repo_path, base_sha, head_sha, exec_result, ownership } = input;
+	const { repo_path, base_sha, head_sha, exec_result, ownership, group_deps } = input;
 	const errors: string[] = [];
 	const warnings: string[] = [];
 	const structuredWarnings: StackWarning[] = [];
@@ -25,7 +26,7 @@ export async function verifyStack(input: VerifyInput): Promise<VerifyResult> {
 	const unionMissing: string[] = [];
 	const unionExtra: string[] = [];
 
-	await verifyPerGroupDiffScope(repo_path, base_sha, exec_result, ownership, warnings, scopeLeaks);
+	await verifyPerGroupDiffScope(repo_path, base_sha, exec_result, ownership, group_deps ?? new Map(), warnings, scopeLeaks);
 	await verifyUnionCompleteness(repo_path, base_sha, head_sha, exec_result, warnings, unionMissing, unionExtra);
 	await verifyFinalTreeEquivalence(repo_path, head_sha, exec_result, errors);
 
@@ -70,17 +71,26 @@ async function verifyPerGroupDiffScope(
 	baseSha: string,
 	execResult: StackExecResult,
 	ownership: Map<string, string>,
+	groupDeps: Map<string, string[]>,
 	warnings: string[],
 	scopeLeaks: string[],
 ): Promise<void> {
-	let prevCommitSha = baseSha;
+	const commitByGroupId = new Map<string, string>();
+	for (const gc of execResult.group_commits) {
+		commitByGroupId.set(gc.group_id, gc.commit_sha);
+	}
 
 	for (const gc of execResult.group_commits) {
-		const diffResult = await Bun.$`git -C ${repoPath} diff-tree -r --raw -z --no-commit-id ${prevCommitSha} ${gc.commit_sha}`.quiet().nothrow();
+		const parentTree = await resolveScopeParentTree(repoPath, baseSha, gc.group_id, groupDeps, commitByGroupId);
+		if (!parentTree) {
+			warnings.push(`Failed to resolve parent tree for group "${gc.group_id}"`);
+			continue;
+		}
+
+		const diffResult = await Bun.$`git -C ${repoPath} diff-tree -r --raw -z --no-commit-id ${parentTree} ${gc.tree_sha}`.quiet().nothrow();
 
 		if (diffResult.exitCode !== 0) {
 			warnings.push(`Failed to diff group "${gc.group_id}": ${diffResult.stderr.toString().trim()}`);
-			prevCommitSha = gc.commit_sha;
 			continue;
 		}
 
@@ -89,16 +99,62 @@ async function verifyPerGroupDiffScope(
 		for (const path of changedPaths) {
 			const fileOwner = ownership.get(path);
 			if (fileOwner !== gc.group_id) {
-				const detail = `"${path}" in "${gc.group_id}" diff, owned by "${fileOwner ?? "unassigned"}"`;
 				warnings.push(
 					`Group "${gc.group_id}" diff contains file "${path}" owned by "${fileOwner ?? "unassigned"}"`,
 				);
-				scopeLeaks.push(detail);
+				scopeLeaks.push(`"${path}" in "${gc.group_id}" diff, owned by "${fileOwner ?? "unassigned"}"`);
 			}
 		}
+	}
+}
+
+async function resolveScopeParentTree(
+	repoPath: string,
+	baseSha: string,
+	groupId: string,
+	groupDeps: Map<string, string[]>,
+	commitByGroupId: Map<string, string>,
+): Promise<string | null> {
+	const deps = groupDeps.get(groupId) ?? [];
+	if (deps.length === 0) {
+		return resolveTreeForRef(repoPath, baseSha);
+	}
+
+	const parentCommits: string[] = [];
+	for (const dep of deps) {
+		const depCommit = commitByGroupId.get(dep);
+		if (!depCommit) continue;
+		parentCommits.push(depCommit);
+	}
+
+	if (parentCommits.length === 0) return resolveTreeForRef(repoPath, baseSha);
+	if (parentCommits.length === 1) return resolveTreeForRef(repoPath, parentCommits[0]!);
+
+	let mergedCommit = parentCommits[0]!;
+	let mergedTree: string | null = null;
+	for (let i = 1; i < parentCommits.length; i++) {
+		const nextParentCommit = parentCommits[i]!;
+		const mergeResult = await Bun.$`git -C ${repoPath} merge-tree --write-tree --allow-unrelated-histories ${mergedCommit} ${nextParentCommit}`.quiet().nothrow();
+		if (mergeResult.exitCode !== 0) return null;
+		const nextTree = mergeResult.stdout.toString().trim().split("\n")[0]?.trim();
+		if (!nextTree) return null;
+		mergedTree = nextTree;
 
-		prevCommitSha = gc.commit_sha;
+		const mergedCommitResult = await Bun.$`git -C ${repoPath} commit-tree ${mergedTree} -p ${mergedCommit} -p ${nextParentCommit} -m "newpr synthetic verify merged parent"`.quiet().nothrow();
+		if (mergedCommitResult.exitCode !== 0) return null;
+		mergedCommit = mergedCommitResult.stdout.toString().trim();
+		if (!mergedCommit) return null;
 	}
+
+	if (!mergedTree) return resolveTreeForRef(repoPath, mergedCommit);
+	return mergedTree;
+}
+
+async function resolveTreeForRef(repoPath: string, ref: string): Promise<string | null> {
+	const result = await Bun.$`git -C ${repoPath} rev-parse ${ref}^{tree}`.quiet().nothrow();
+	if (result.exitCode !== 0) return null;
+	const tree = result.stdout.toString().trim();
+	return tree.length > 0 ? tree : null;
 }
 
 async function verifyUnionCompleteness(
@@ -119,18 +175,19 @@ async function verifyUnionCompleteness(
 
 	const expectedPaths = new Set(extractPathsFromRawDiff(expectedResult.stdout));
 
-	const actualPaths = new Set<string>();
-	let prevSha = baseSha;
-	for (const gc of execResult.group_commits) {
-		const diffResult = await Bun.$`git -C ${repoPath} diff-tree -r --raw -z --no-commit-id ${prevSha} ${gc.commit_sha}`.quiet().nothrow();
-
-		if (diffResult.exitCode === 0) {
-			for (const path of extractPathsFromRawDiff(diffResult.stdout)) {
-				actualPaths.add(path);
-			}
-		}
-		prevSha = gc.commit_sha;
+	const baseTreeResult = await Bun.$`git -C ${repoPath} rev-parse ${baseSha}^{tree}`.quiet().nothrow();
+	if (baseTreeResult.exitCode !== 0) {
+		warnings.push(`Failed to get base tree: ${baseTreeResult.stderr.toString().trim()}`);
+		return;
 	}
+	const baseTree = baseTreeResult.stdout.toString().trim();
+	const finalTree = execResult.final_tree_sha;
+	if (!finalTree) return;
+
+	const actualResult = await Bun.$`git -C ${repoPath} diff-tree -r --raw -z ${baseTree} ${finalTree}`.quiet().nothrow();
+	const actualPaths = actualResult.exitCode === 0
+		? new Set(extractPathsFromRawDiff(actualResult.stdout))
+		: new Set<string>();
 
 	for (const path of expectedPaths) {
 		if (!actualPaths.has(path)) {

package/src/web/client/App.tsx

@@ -14,8 +14,7 @@ import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
 import { useChatState, ChatProvider, ChatInput } from "./components/ChatSection.tsx";
 import type { AnchorItem } from "./components/TipTapEditor.tsx";
 import { requestNotificationPermission } from "./lib/notify.ts";
-import { analytics, initAnalytics, getConsent } from "./lib/analytics.ts";
-import { AnalyticsConsent } from "./components/AnalyticsConsent.tsx";
+import { analytics, initAnalytics } from "./lib/analytics.ts";
 
 function getUrlParam(key: string): string | null {
 	return new URLSearchParams(window.location.search).get(key);
@@ -41,7 +40,7 @@ export function App() {
 	const features = useFeatures();
 	const bgAnalyses = useBackgroundAnalyses();
 	const initialLoadDone = useRef(false);
-	const [showConsent, setShowConsent] = useState(() => getConsent() === "pending");
+
 
 	useEffect(() => {
 		requestNotificationPermission();
@@ -160,7 +159,6 @@ export function App() {
 
 	return (
 		<ChatProvider state={chatState} anchorItems={anchorItems} analyzedAt={analysis.result?.meta.analyzed_at}>
-		{showConsent && <AnalyticsConsent onDone={() => setShowConsent(false)} />}
 		<AppShell
 			theme={themeCtx.theme}
 			onThemeChange={themeCtx.setTheme}

package/src/web/client/components/AnalyticsConsent.tsx

@@ -1,98 +1 @@
-import { useState } from "react";
-import { BarChart3, Shield } from "lucide-react";
-import { getConsent, setConsent, type ConsentState } from "../lib/analytics.ts";
-
-export function AnalyticsConsent({ onDone }: { onDone: () => void }) {
-	const [state] = useState<ConsentState>(() => getConsent());
-
-	if (state !== "pending") return null;
-
-	const syncServer = (consent: "granted" | "denied") => {
-		fetch("/api/config", {
-			method: "PUT",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ telemetry_consent: consent }),
-		}).catch(() => {});
-	};
-
-	const handleAccept = () => {
-		setConsent("granted");
-		syncServer("granted");
-		onDone();
-	};
-
-	const handleDecline = () => {
-		setConsent("denied");
-		syncServer("denied");
-		onDone();
-	};
-
-	return (
-		<div className="fixed inset-0 z-[100] flex items-center justify-center">
-			<div className="fixed inset-0 bg-background/70 backdrop-blur-sm" />
-			<div className="relative z-10 w-full max-w-md mx-4 rounded-2xl border bg-background shadow-2xl overflow-hidden">
-				<div className="px-6 pt-6 pb-4">
-					<div className="flex items-center gap-3 mb-4">
-						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10">
-							<BarChart3 className="h-5 w-5 text-blue-500" />
-						</div>
-						<div>
-						<h2 className="text-base font-semibold">Help improve newpr</h2>
-						<p className="text-xs text-muted-foreground">Anonymous usage analytics</p>
-					</div>
-				</div>
-
-				<p className="text-sm text-muted-foreground leading-relaxed mb-3">
-						We'd like to collect anonymous usage data to understand how newpr is used and improve the experience.
-					</p>
-
-					<div className="rounded-lg bg-muted/40 px-3.5 py-2.5 space-y-1.5 mb-4">
-						<div className="flex items-start gap-2">
-							<Shield className="h-3.5 w-3.5 text-emerald-500 mt-0.5 shrink-0" />
-						<div className="text-xs text-muted-foreground leading-relaxed">
-							<p className="font-medium text-foreground/80 mb-1">What we collect:</p>
-							<ul className="space-y-0.5 list-disc list-inside text-xs">
-									<li>Feature usage (which tabs, buttons, and actions you use)</li>
-									<li>Performance metrics (analysis duration, error rates)</li>
-									<li>Basic device info (browser, screen size)</li>
-								</ul>
-							</div>
-						</div>
-						<div className="flex items-start gap-2 pt-1">
-							<Shield className="h-3.5 w-3.5 text-emerald-500 mt-0.5 shrink-0" />
-						<div className="text-xs text-muted-foreground leading-relaxed">
-							<p className="font-medium text-foreground/80 mb-1">What we never collect:</p>
-							<ul className="space-y-0.5 list-disc list-inside text-xs">
-									<li>PR content, code, or commit messages</li>
-									<li>Chat messages or review comments</li>
-									<li>API keys, tokens, or personal data</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-
-					<p className="text-xs text-muted-foreground/50 mb-4">
-						Powered by Google Analytics. You can change this anytime in Settings.
-					</p>
-				</div>
-
-				<div className="flex border-t">
-					<button
-						type="button"
-						onClick={handleDecline}
-						className="flex-1 px-4 py-3 text-sm text-muted-foreground hover:bg-muted/50 transition-colors"
-					>
-						Decline
-					</button>
-					<button
-						type="button"
-						onClick={handleAccept}
-						className="flex-1 px-4 py-3 text-sm font-medium bg-foreground text-background hover:opacity-90 transition-opacity"
-					>
-						Accept
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-}
+export {};

package/src/web/client/components/AppShell.tsx

@@ -389,11 +389,11 @@ export function AppShell({
 			<ResizeHandle onResize={handleLeftResize} side="right" />
 
 			<div className="flex-1 flex flex-col overflow-hidden relative" style={{ minWidth: 400 }}>
-				<main ref={mainRef} className="flex-1 overflow-y-auto">
-					<div className="mx-auto max-w-5xl px-10 py-10">
-						{children}
-					</div>
-				</main>
+			<main ref={mainRef} className="flex-1 overflow-y-auto">
+				<div className="mx-auto max-w-5xl px-10 pt-10 pb-24">
+					{children}
+				</div>
+			</main>
 				{bottomBar}
 				{showScrollTop && (
 					<button

package/src/web/client/components/StackDagView.tsx

@@ -0,0 +1,387 @@
+import { ChevronRight, GitBranch, ExternalLink, Plus, Minus, GitMerge } from "lucide-react";
+import { useState, useRef, useLayoutEffect } from "react";
+import type { StackGroupStats } from "../../../stack/types.ts";
+
+const TYPE_COLORS: Record<string, { dot: string; badge: string; text: string }> = {
+	feature:  { dot: "bg-blue-500",    badge: "bg-blue-500/10",    text: "text-blue-600 dark:text-blue-400" },
+	refactor: { dot: "bg-purple-500",  badge: "bg-purple-500/10",  text: "text-purple-600 dark:text-purple-400" },
+	bugfix:   { dot: "bg-red-500",     badge: "bg-red-500/10",     text: "text-red-600 dark:text-red-400" },
+	chore:    { dot: "bg-neutral-400", badge: "bg-neutral-500/10", text: "text-neutral-500" },
+	docs:     { dot: "bg-teal-500",    badge: "bg-teal-500/10",    text: "text-teal-600 dark:text-teal-400" },
+	test:     { dot: "bg-yellow-500",  badge: "bg-yellow-500/10",  text: "text-yellow-600 dark:text-yellow-400" },
+	config:   { dot: "bg-orange-500",  badge: "bg-orange-500/10",  text: "text-orange-600 dark:text-orange-400" },
+};
+
+function formatStat(n: number): string {
+	if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+	return String(n);
+}
+
+function normalizeFilePath(path: string): string {
+	return path
+		.replace(/\\/g, "/")
+		.replace(/^\.\//, "")
+		.replace(/^a\//, "")
+		.replace(/^b\//, "");
+}
+
+export interface DagGroup {
+	id: string;
+	name: string;
+	type: string;
+	description: string;
+	files: string[];
+	deps: string[];
+	explicit_deps?: string[];
+	order: number;
+	stats?: StackGroupStats;
+	file_stats?: Record<string, { additions: number; deletions: number }>;
+	pr_title?: string;
+}
+
+interface DagCommit {
+	group_id: string;
+	commit_sha: string;
+	branch_name: string;
+}
+
+interface DagPr {
+	group_id: string;
+	number: number;
+	url: string;
+	title: string;
+}
+
+interface DagNode {
+	group: DagGroup;
+	indent: number;
+	isLastChild: boolean;
+	parentId: string | null;
+	childIds: string[];
+}
+
+const INDENT = 18;
+const DOT_CX = 8;
+const DOT_RADIUS = 2.5;
+const ROW_HEIGHT = 36;
+
+function buildDagNodes(groups: DagGroup[]): DagNode[] {
+	const byId = new Map(groups.map((g) => [g.id, g]));
+
+	const childrenOf = new Map<string, string[]>();
+	for (const g of groups) {
+		for (const dep of (g.explicit_deps ?? g.deps ?? [])) {
+			if (!byId.has(dep)) continue;
+			const arr = childrenOf.get(dep) ?? [];
+			arr.push(g.id);
+			childrenOf.set(dep, arr);
+		}
+	}
+
+	const hasIncomingEdge = new Set<string>();
+	for (const g of groups) {
+		for (const dep of (g.explicit_deps ?? g.deps ?? [])) {
+			if (byId.has(dep)) hasIncomingEdge.add(g.id);
+		}
+	}
+
+	const roots = groups.filter((g) => !hasIncomingEdge.has(g.id)).sort((a, b) => a.order - b.order);
+	const result: DagNode[] = [];
+	const visited = new Set<string>();
+
+	const dfs = (id: string, indent: number, parentId: string | null, siblingIndex: number, siblingCount: number) => {
+		if (visited.has(id)) return;
+		visited.add(id);
+
+		const g = byId.get(id)!;
+		const children = (childrenOf.get(id) ?? []).sort((a, b) => {
+			return (byId.get(a)?.order ?? 0) - (byId.get(b)?.order ?? 0);
+		});
+
+		result.push({
+			group: g,
+			indent,
+			isLastChild: siblingIndex === siblingCount - 1,
+			parentId,
+			childIds: children,
+		});
+
+		children.forEach((childId, i) => dfs(childId, indent + 1, id, i, children.length));
+	};
+
+	roots.forEach((root, i) => dfs(root.id, 0, null, i, roots.length));
+
+	for (const g of groups) {
+		if (!visited.has(g.id)) {
+			result.push({ group: g, indent: 0, isLastChild: true, parentId: null, childIds: childrenOf.get(g.id) ?? [] });
+		}
+	}
+
+	return result;
+}
+
+const BUTTON_HEIGHT = 36;
+const DOT_TOP_OFFSET = BUTTON_HEIGHT / 2;
+
+function buildPaths(nodes: DagNode[], rowHeights: number[]): string[] {
+	let cumulativeY = 0;
+	const dotY = nodes.map((_, i) => {
+		const y = cumulativeY + DOT_TOP_OFFSET;
+		cumulativeY += rowHeights[i] ?? ROW_HEIGHT;
+		return y;
+	});
+
+	const idToIndex = new Map(nodes.map((n, i) => [n.group.id, i]));
+	const paths: string[] = [];
+
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i]!;
+		const parentIdx = node.parentId !== null ? idToIndex.get(node.parentId) : undefined;
+		if (parentIdx === undefined) continue;
+
+		const parentX = (node.indent - 1) * INDENT + DOT_CX;
+		const childX = node.indent * INDENT + DOT_CX;
+		const parentY = dotY[parentIdx]!;
+		const childY = dotY[i]!;
+
+		paths.push(`M ${parentX} ${parentY + DOT_RADIUS} L ${parentX} ${childY} L ${childX - DOT_RADIUS} ${childY}`);
+	}
+
+	return paths;
+}
+
+function DagNodeCard({
+	node,
+	commit,
+	pr,
+	fileStatsByPath,
+	rowRef,
+}: {
+	node: DagNode;
+	commit?: DagCommit;
+	pr?: DagPr;
+	fileStatsByPath?: Record<string, { additions: number; deletions: number }>;
+	allGroups?: DagGroup[];
+	rowRef: (el: HTMLDivElement | null) => void;
+}) {
+	const [expanded, setExpanded] = useState(false);
+	const { group } = node;
+	const resolveFileStats = (file: string): { additions: number; deletions: number } => {
+		const normalizedPath = normalizeFilePath(file);
+		const fallbackStats = fileStatsByPath?.[file]
+			?? fileStatsByPath?.[normalizedPath]
+			?? { additions: 0, deletions: 0 };
+		const fromGroup = group.file_stats?.[file]
+			?? group.file_stats?.[normalizedPath];
+		if (fromGroup && (fromGroup.additions > 0 || fromGroup.deletions > 0)) return fromGroup;
+		if (fallbackStats.additions > 0 || fallbackStats.deletions > 0) return fallbackStats;
+		return fromGroup ?? fallbackStats;
+	};
+
+	const fileRows = group.files.map((file) => ({
+		path: file,
+		stats: resolveFileStats(file),
+	}));
+	const fileTotals = fileRows.reduce(
+		(acc, row) => ({ additions: acc.additions + row.stats.additions, deletions: acc.deletions + row.stats.deletions }),
+		{ additions: 0, deletions: 0 },
+	);
+	const hasFileTotals = fileRows.some((row) => row.stats.additions > 0 || row.stats.deletions > 0);
+	const stats = hasFileTotals
+		? {
+			additions: fileTotals.additions,
+			deletions: fileTotals.deletions,
+			files_added: group.stats?.files_added ?? 0,
+			files_modified: group.stats?.files_modified ?? 0,
+			files_deleted: group.stats?.files_deleted ?? 0,
+		}
+		: group.stats;
+	const colors = TYPE_COLORS[group.type] ?? TYPE_COLORS.chore!;
+	const leftPad = node.indent * INDENT + DOT_CX * 2 + 4;
+
+	return (
+		<div ref={rowRef}>
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="w-full flex items-center gap-2 py-1.5 text-left hover:bg-accent/20 transition-colors rounded-md pr-2"
+				style={{ paddingLeft: leftPad }}
+			>
+				<span className={`text-[9px] font-medium px-1.5 py-px rounded ${colors.badge} ${colors.text} shrink-0 leading-none`}>
+					{group.type}
+				</span>
+				<span className="text-[11.5px] font-medium text-foreground/90 flex-1 min-w-0 truncate">
+					{group.pr_title ?? group.name}
+				</span>
+				<span className="shrink-0 flex items-center gap-1.5">
+					{stats ? (
+						<>
+							<span className="text-[10px] text-green-600/60 dark:text-green-400/60 tabular-nums">+{formatStat(stats.additions)}</span>
+							<span className="text-[10px] text-red-500/60 tabular-nums">−{formatStat(stats.deletions)}</span>
+						</>
+					) : (
+						<span className="text-[9px] text-muted-foreground/20 tabular-nums">{group.files.length}f</span>
+					)}
+					<ChevronRight className={`h-3 w-3 text-muted-foreground/20 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`} />
+				</span>
+			</button>
+
+			{expanded && (
+				<div className="pb-2 space-y-2" style={{ paddingLeft: leftPad }}>
+					{group.description && (
+						<p className="text-[10.5px] text-muted-foreground/45 leading-[1.55]">{group.description}</p>
+					)}
+					{stats && (
+						<div className="flex items-center gap-3 text-[9.5px] text-muted-foreground/30 tabular-nums">
+							<span>{group.files.length} files</span>
+							<span className="flex items-center gap-0.5">
+								<Plus className="h-2 w-2 text-green-600/50 dark:text-green-400/50" />
+								{stats.additions.toLocaleString()}
+							</span>
+							<span className="flex items-center gap-0.5">
+								<Minus className="h-2 w-2 text-red-500/50" />
+								{stats.deletions.toLocaleString()}
+							</span>
+							{(stats.files_added > 0 || stats.files_modified > 0 || stats.files_deleted > 0) && (
+								<span>
+									{stats.files_added > 0 && `${stats.files_added}A `}
+									{stats.files_modified > 0 && `${stats.files_modified}M `}
+									{stats.files_deleted > 0 && `${stats.files_deleted}D`}
+								</span>
+							)}
+						</div>
+					)}
+					{commit && (
+						<div className="flex items-center gap-1.5 text-[9.5px] text-muted-foreground/25">
+							<GitBranch className="h-2.5 w-2.5 shrink-0" />
+							<span className="font-mono truncate">{commit.branch_name}</span>
+							<span className="text-muted-foreground/15">·</span>
+							<span className="font-mono shrink-0">{commit.commit_sha.slice(0, 7)}</span>
+						</div>
+					)}
+					{pr && (
+						<a href={pr.url} target="_blank" rel="noopener noreferrer"
+							className="inline-flex items-center gap-1 text-[9.5px] text-foreground/40 hover:text-foreground/70 transition-colors">
+							<ExternalLink className="h-2.5 w-2.5 shrink-0" />
+							<span className="tabular-nums">#{pr.number}</span>
+							<span className="truncate max-w-[180px]">{pr.title}</span>
+						</a>
+					)}
+					<div className="space-y-0 pt-0.5">
+						{fileRows.map(({ path, stats: fileStats }) => {
+							return (
+								<div key={path} className="flex items-center gap-2 text-[9px] font-mono text-muted-foreground/20 py-[1px]">
+									<span className="truncate flex-1 min-w-0">{path}</span>
+									<span className="tabular-nums text-green-600/60 dark:text-green-400/60 shrink-0">+{fileStats.additions}</span>
+									<span className="tabular-nums text-red-500/60 shrink-0">-{fileStats.deletions}</span>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export function StackDagView({
+	groups,
+	groupCommits,
+	publishedPrs,
+	fileStatsByPath,
+}: {
+	groups: DagGroup[];
+	groupCommits?: DagCommit[];
+	publishedPrs?: DagPr[];
+	fileStatsByPath?: Record<string, { additions: number; deletions: number }>;
+}) {
+	const nodes = buildDagNodes(groups);
+	const isLinear = nodes.every((n) => n.indent === 0);
+	const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
+	const [rowHeights, setRowHeights] = useState<number[]>([]);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [svgHeight, setSvgHeight] = useState(0);
+	const maxIndent = Math.max(...nodes.map((n) => n.indent), 0);
+	const svgWidth = (maxIndent + 1) * INDENT + DOT_CX * 2;
+
+	useLayoutEffect(() => {
+		const measure = () => {
+			const heights = rowRefs.current.map((el) => el?.getBoundingClientRect().height ?? ROW_HEIGHT);
+			const total = heights.reduce((a, b) => a + b, 0);
+			setRowHeights((prev) => {
+				if (prev.length === heights.length && prev.every((h, i) => h === heights[i])) return prev;
+				return heights;
+			});
+			setSvgHeight((prev) => prev === total ? prev : total);
+		};
+
+		measure();
+
+		const ro = new ResizeObserver(measure);
+		const container = containerRef.current;
+		if (container) ro.observe(container);
+		return () => ro.disconnect();
+	}, [nodes.length]);
+
+	const paths = rowHeights.length === nodes.length ? buildPaths(nodes, rowHeights) : [];
+
+	let cumulativeY = 0;
+	const dotPositions = nodes.map((node, i) => {
+		const h = rowHeights[i] ?? ROW_HEIGHT;
+		const y = cumulativeY + DOT_TOP_OFFSET;
+		cumulativeY += h;
+		return { y, cx: node.indent * INDENT + DOT_CX, node };
+	});
+
+	return (
+		<div className="relative" ref={containerRef}>
+			{!isLinear && (
+				<div className="flex items-center gap-1.5 mb-1 px-1">
+					<GitMerge className="h-3 w-3 text-muted-foreground/25" />
+					<span className="text-[9px] text-muted-foreground/25 uppercase tracking-wider">DAG</span>
+				</div>
+			)}
+
+			<div className="relative">
+				{svgHeight > 0 && (
+					<svg
+						className="absolute top-0 left-0 pointer-events-none overflow-visible"
+						width={svgWidth}
+						height={svgHeight}
+					>
+						{paths.map((d, i) => (
+							<path key={i} d={d}
+								stroke="currentColor" strokeOpacity="0.35" strokeWidth="1.5"
+								fill="none" strokeLinejoin="round"
+								className="text-border" />
+						))}
+						{dotPositions.map(({ y, cx, node }) => {
+							const colors = TYPE_COLORS[node.group.type] ?? TYPE_COLORS.chore!;
+							const colorClass = colors.dot;
+							return (
+							<circle key={node.group.id} cx={cx} cy={y} r={DOT_RADIUS}
+								className={colorClass} fill="currentColor" fillOpacity="0.7" />
+							);
+						})}
+					</svg>
+				)}
+
+				{nodes.map((node, i) => {
+					const commit = groupCommits?.find((c) => c.group_id === node.group.id);
+					const pr = publishedPrs?.find((p) => p.group_id === node.group.id);
+					return (
+						<DagNodeCard
+							key={node.group.id}
+							node={node}
+							commit={commit}
+							pr={pr}
+							fileStatsByPath={fileStatsByPath}
+							allGroups={groups}
+							rowRef={(el) => { rowRefs.current[i] = el; }}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
+}