newpr 1.0.22 → 1.0.23

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

@@ -1,5 +1,5 @@
 import { ChevronRight, GitBranch, ExternalLink, Plus, Minus, GitMerge } from "lucide-react";
-import { useState } from "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 }> = {
@@ -17,6 +17,14 @@ function formatStat(n: number): string {
 	return String(n);
 }
 
+function normalizeFilePath(path: string): string {
+	return path
+		.replace(/\\/g, "/")
+		.replace(/^\.\//, "")
+		.replace(/^a\//, "")
+		.replace(/^b\//, "");
+}
+
 export interface DagGroup {
 	id: string;
 	name: string;
@@ -24,8 +32,10 @@ export interface DagGroup {
 	description: string;
 	files: string[];
 	deps: string[];
+	explicit_deps?: string[];
 	order: number;
 	stats?: StackGroupStats;
+	file_stats?: Record<string, { additions: number; deletions: number }>;
 	pr_title?: string;
 }
 
@@ -44,227 +54,232 @@ interface DagPr {
 
 interface DagNode {
 	group: DagGroup;
-	level: number;
-	isLastAtLevel: boolean;
-	parentIds: string[];
+	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 levels = new Map<string, number>();
-	const inDegree = new Map(groups.map((g) => [g.id, 0]));
+	const childrenOf = new Map<string, string[]>();
 	for (const g of groups) {
-		for (const dep of (g.deps ?? [])) {
-			if (byId.has(dep)) inDegree.set(g.id, (inDegree.get(g.id) ?? 0) + 1);
+		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 queue = groups.filter((g) => (inDegree.get(g.id) ?? 0) === 0).map((g) => g.id);
-	for (const id of queue) levels.set(id, 0);
-
-	while (queue.length > 0) {
-		const id = queue.shift()!;
-		const level = levels.get(id) ?? 0;
-		for (const g of groups) {
-			if ((g.deps ?? []).includes(id)) {
-				const newLevel = Math.max(levels.get(g.id) ?? 0, level + 1);
-				levels.set(g.id, newLevel);
-				const remaining = (inDegree.get(g.id) ?? 1) - 1;
-				inDegree.set(g.id, remaining);
-				if (remaining === 0) queue.push(g.id);
-			}
+	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 levelCount = new Map<number, number>();
-	const levelSeen = new Map<number, number>();
-	for (const [, l] of levels) levelCount.set(l, (levelCount.get(l) ?? 0) + 1);
+	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));
 
-	const childrenOf = new Map<string, string[]>();
 	for (const g of groups) {
-		for (const dep of (g.deps ?? [])) {
-			const arr = childrenOf.get(dep) ?? [];
-			arr.push(g.id);
-			childrenOf.set(dep, arr);
+		if (!visited.has(g.id)) {
+			result.push({ group: g, indent: 0, isLastChild: true, parentId: null, childIds: childrenOf.get(g.id) ?? [] });
 		}
 	}
 
-	const sorted = [...groups].sort((a, b) => {
-		const la = levels.get(a.id) ?? 0;
-		const lb = levels.get(b.id) ?? 0;
-		if (la !== lb) return la - lb;
-		return a.order - b.order;
-	});
+	return result;
+}
 
-	return sorted.map((g) => {
-		const level = levels.get(g.id) ?? 0;
-		const seenAtLevel = levelSeen.get(level) ?? 0;
-		const countAtLevel = levelCount.get(level) ?? 1;
-		levelSeen.set(level, seenAtLevel + 1);
-		return {
-			group: g,
-			level,
-			isLastAtLevel: seenAtLevel === countAtLevel - 1,
-			parentIds: (g.deps ?? []).filter((d) => byId.has(d)),
-			childIds: childrenOf.get(g.id) ?? [],
-		};
+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,
-	allGroups,
+	fileStatsByPath,
+	rowRef,
 }: {
 	node: DagNode;
 	commit?: DagCommit;
 	pr?: DagPr;
-	allGroups: DagGroup[];
+	fileStatsByPath?: Record<string, { additions: number; deletions: number }>;
+	allGroups?: DagGroup[];
+	rowRef: (el: HTMLDivElement | null) => void;
 }) {
 	const [expanded, setExpanded] = useState(false);
-	const { group, level } = node;
-	const stats = group.stats;
+	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 depNames = (group.deps ?? []).map((depId) => {
-		const found = allGroups.find((g) => g.id === depId);
-		return found?.pr_title ?? found?.name ?? depId;
-	});
-
-	const isParallel = node.parentIds.length === 0
-		? false
-		: allGroups.filter((g) => {
-			const gDeps = g.deps ?? [];
-			return node.parentIds.every((p) => gDeps.includes(p)) && g.id !== group.id;
-		}).length > 0;
+	const leftPad = node.indent * INDENT + DOT_CX * 2 + 4;
 
 	return (
-		<div className="relative" style={{ marginLeft: `${level * 20}px` }}>
-			{level > 0 && (
-				<div
-					className="absolute top-[18px] h-px bg-border/30"
-					style={{ left: `-${20 - 9}px`, width: `${20 - 9}px` }}
-				/>
-			)}
-
-			<div className="group/card relative">
-				<button
-					type="button"
-					onClick={() => setExpanded(!expanded)}
-					className="w-full flex items-start gap-2 px-2.5 py-2 text-left hover:bg-accent/20 transition-colors rounded-md"
-				>
-					<div className="flex-shrink-0 mt-[5px] flex flex-col items-center gap-[3px]">
-						<div className={`h-2 w-2 rounded-full ${colors.dot} ring-2 ring-background`} />
-						{node.childIds.length > 1 && (
-							<GitMerge className="h-2.5 w-2.5 text-muted-foreground/25 mt-0.5" />
-						)}
-					</div>
-
-					<div className="flex-1 min-w-0">
-						<div className="flex items-center gap-1.5 flex-wrap">
-							<span className={`text-[9px] font-medium px-1.5 py-px rounded ${colors.badge} ${colors.text} shrink-0`}>
-								{group.type}
+		<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>
-							{isParallel && (
-								<span className="text-[9px] text-muted-foreground/25 shrink-0">∥</span>
-							)}
-							<span className="text-[11.5px] font-medium text-foreground/90 truncate">
-								{group.pr_title ?? group.name}
+							<span className="flex items-center gap-0.5">
+								<Minus className="h-2 w-2 text-red-500/50" />
+								{stats.deletions.toLocaleString()}
 							</span>
-						</div>
-
-						{depNames.length > 0 && (
-							<div className="flex items-center gap-1 mt-0.5 flex-wrap">
-								<span className="text-[9px] text-muted-foreground/20">after</span>
-								{depNames.map((name, i) => (
-									<span key={i} className="text-[9px] text-muted-foreground/25 font-mono truncate max-w-[120px]">
-										{name}
-									</span>
-								))}
-							</div>
-						)}
-					</div>
-
-					<div className="flex-shrink-0 flex items-center gap-2 mt-[3px]">
-						{stats ? (
-							<span className="flex items-center gap-1.5">
-								<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>
-						) : (
-							<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" : ""}`} />
-					</div>
-				</button>
-
-				{expanded && (
-					<div className="ml-4 pl-3 pb-3 pt-1 space-y-2 border-l border-border/30">
-						{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()}
+							{(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>
-								{(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">
-							{group.files.map((file) => (
-								<div key={file} className="text-[9px] font-mono text-muted-foreground/20 py-[1px] truncate">
-									{file}
-								</div>
-							))}
+							)}
 						</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>
+			)}
 		</div>
 	);
 }
@@ -273,25 +288,85 @@ 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.level === n.group.order);
+	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">
+		<div className="relative" ref={containerRef}>
 			{!isLinear && (
-				<div className="flex items-center gap-1.5 mb-2 px-1">
+				<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 space-y-0.5">
-				{nodes.map((node) => {
+			<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 (
@@ -300,17 +375,12 @@ export function StackDagView({
 							node={node}
 							commit={commit}
 							pr={pr}
+							fileStatsByPath={fileStatsByPath}
 							allGroups={groups}
+							rowRef={(el) => { rowRefs.current[i] = el; }}
 						/>
 					);
 				})}
-
-				{nodes.length > 0 && (
-					<div
-						className="absolute top-[14px] bottom-[14px] w-px bg-border/15 pointer-events-none"
-						style={{ left: "8px" }}
-					/>
-				)}
 			</div>
 		</div>
 	);

package/src/web/client/hooks/useStack.ts

@@ -43,11 +43,22 @@ interface PlanData {
 		deps: string[];
 		order: number;
 		stats?: StackGroupStats;
+		file_stats?: Record<string, { additions: number; deletions: number }>;
 		pr_title?: string;
 	}>;
 	expected_trees: Record<string, string>;
 }
 
+interface SessionFileStat {
+	path: string;
+	additions: number;
+	deletions: number;
+}
+
+interface SessionDataForStats {
+	files?: SessionFileStat[];
+}
+
 interface ExecResultData {
 	run_id: string;
 	source_copy_branch: string;
@@ -142,6 +153,26 @@ export interface StackState {
 	publishCleanupLoading: boolean;
 	publishCleanupError: string | null;
 	progressMessage: string | null;
+	analysisFileStatsByPath: Record<string, { additions: number; deletions: number }>;
+}
+
+function normalizeFilePath(path: string): string {
+	return path
+		.replace(/\\/g, "/")
+		.replace(/^\.\//, "")
+		.replace(/^a\//, "")
+		.replace(/^b\//, "");
+}
+
+function buildAnalysisFileStatsByPath(files: SessionFileStat[] | undefined): Record<string, { additions: number; deletions: number }> {
+	const map: Record<string, { additions: number; deletions: number }> = {};
+	for (const file of files ?? []) {
+		const stats = { additions: file.additions, deletions: file.deletions };
+		map[file.path] = stats;
+		const normalized = normalizeFilePath(file.path);
+		if (!map[normalized]) map[normalized] = stats;
+	}
+	return map;
 }
 
 function serverPhaseToClient(status: string, phase: string | null): StackPhase {
@@ -191,6 +222,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 		publishCleanupLoading: false,
 		publishCleanupError: null,
 		progressMessage: null,
+		analysisFileStatsByPath: {},
 	});
 
 	const eventSourceRef = useRef<EventSource | null>(null);
@@ -205,6 +237,16 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 				setState((s) => ({ ...s, ...applyServerState(data.state!) }));
 			})
 			.catch(() => {});
+
+		fetch(`/api/sessions/${sessionId}`)
+			.then((res) => res.json())
+			.then((data: SessionDataForStats) => {
+				setState((s) => ({
+					...s,
+					analysisFileStatsByPath: buildAnalysisFileStatsByPath(data.files),
+				}));
+			})
+			.catch(() => {});
 	}, [sessionId]);
 
 	const setMaxGroups = useCallback((n: number | null) => {
@@ -479,6 +521,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 			publishCleanupLoading: false,
 			publishCleanupError: null,
 			progressMessage: null,
+			analysisFileStatsByPath: s.analysisFileStatsByPath,
 		}));
 	}, []);
 

package/src/web/client/panels/StackPanel.tsx

@@ -232,6 +232,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					groups={stack.plan.groups}
 					groupCommits={stack.execResult?.group_commits}
 					publishedPrs={stack.publishResult?.prs}
+					fileStatsByPath={stack.analysisFileStatsByPath}
 				/>
 				</div>
 			)}

package/src/web/server/routes.ts

@@ -17,7 +17,7 @@ import { createResilientLlmClient } from "../../llm/resilient-client.ts";
 import { detectAgents, runAgent } from "../../workspace/agent.ts";
 import { randomBytes } from "node:crypto";
 import { publishStack, buildStackPublishPreview } from "../../stack/publish.ts";
-import { startStack, getStackState, cancelStack, subscribeStack, restoreCompletedStacks, setStackPublishResult, setStackPublishPreview, setStackPublishCleanupResult } from "./stack-manager.ts";
+import { startStack, getStackState, cancelStack, subscribeStack, restoreCompletedStacks, setStackPublishResult, setStackPublishPreview, setStackPublishCleanupResult, recomputeStackPlanStatsIfNeeded } from "./stack-manager.ts";
 import { getTelemetryConsent, setTelemetryConsent, telemetry } from "../../telemetry/index.ts";
 
 function json(data: unknown, status = 200): Response {
@@ -1820,6 +1820,10 @@ Before posting an inline comment, ALWAYS call \`get_file_diff\` first to find th
 				await restoreCompletedStacks([id]);
 				state = getStackState(id);
 			}
+			if (state?.plan && state.context) {
+				await recomputeStackPlanStatsIfNeeded(id);
+				state = getStackState(id);
+			}
 			if (!state) return json({ state: null });
 			return json({ state });
 		},