newpr 0.6.6 → 1.0.1

package/src/stack/verify.ts

@@ -0,0 +1,201 @@
+import type { StackExecResult, StackWarning } from "./types.ts";
+
+export interface VerifyInput {
+	repo_path: string;
+	base_sha: string;
+	head_sha: string;
+	exec_result: StackExecResult;
+	ownership: Map<string, string>;
+}
+
+export interface VerifyResult {
+	verified: boolean;
+	errors: string[];
+	warnings: string[];
+	structured_warnings: StackWarning[];
+}
+
+export async function verifyStack(input: VerifyInput): Promise<VerifyResult> {
+	const { repo_path, base_sha, head_sha, exec_result, ownership } = input;
+	const errors: string[] = [];
+	const warnings: string[] = [];
+	const structuredWarnings: StackWarning[] = [];
+
+	const scopeLeaks: string[] = [];
+	const unionMissing: string[] = [];
+	const unionExtra: string[] = [];
+
+	await verifyPerGroupDiffScope(repo_path, base_sha, exec_result, ownership, warnings, scopeLeaks);
+	await verifyUnionCompleteness(repo_path, base_sha, head_sha, exec_result, warnings, unionMissing, unionExtra);
+	await verifyFinalTreeEquivalence(repo_path, head_sha, exec_result, errors);
+
+	if (scopeLeaks.length > 0) {
+		structuredWarnings.push({
+			category: "verification.scope",
+			severity: "warn",
+			title: `${scopeLeaks.length} file(s) appear in wrong group's diff`,
+			message: "Some files changed in a group's commit but are owned by a different group — usually harmless with merge commits",
+			details: scopeLeaks,
+		});
+	}
+	if (unionMissing.length > 0) {
+		structuredWarnings.push({
+			category: "verification.completeness",
+			severity: "warn",
+			title: `${unionMissing.length} file(s) in original diff but missing from stack`,
+			message: "These files were changed in the original PR but don't appear in the stacked commits",
+			details: unionMissing,
+		});
+	}
+	if (unionExtra.length > 0) {
+		structuredWarnings.push({
+			category: "verification.completeness",
+			severity: "warn",
+			title: `${unionExtra.length} extra file(s) in stack not in original diff`,
+			message: "The stacked commits touch files not in the original PR diff — usually transient changes from merge commits",
+			details: unionExtra,
+		});
+	}
+
+	return {
+		verified: errors.length === 0,
+		errors,
+		warnings,
+		structured_warnings: structuredWarnings,
+	};
+}
+
+async function verifyPerGroupDiffScope(
+	repoPath: string,
+	baseSha: string,
+	execResult: StackExecResult,
+	ownership: Map<string, string>,
+	warnings: string[],
+	scopeLeaks: string[],
+): Promise<void> {
+	let prevCommitSha = baseSha;
+
+	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();
+
+		if (diffResult.exitCode !== 0) {
+			warnings.push(`Failed to diff group "${gc.group_id}": ${diffResult.stderr.toString().trim()}`);
+			prevCommitSha = gc.commit_sha;
+			continue;
+		}
+
+		const changedPaths = extractPathsFromRawDiff(diffResult.stdout);
+
+		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);
+			}
+		}
+
+		prevCommitSha = gc.commit_sha;
+	}
+}
+
+async function verifyUnionCompleteness(
+	repoPath: string,
+	baseSha: string,
+	headSha: string,
+	execResult: StackExecResult,
+	warnings: string[],
+	unionMissing: string[],
+	unionExtra: string[],
+): Promise<void> {
+	const expectedResult = await Bun.$`git -C ${repoPath} diff-tree -r --raw -z --no-commit-id ${baseSha} ${headSha}`.quiet().nothrow();
+
+	if (expectedResult.exitCode !== 0) {
+		warnings.push(`Failed to get expected diff: ${expectedResult.stderr.toString().trim()}`);
+		return;
+	}
+
+	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;
+	}
+
+	for (const path of expectedPaths) {
+		if (!actualPaths.has(path)) {
+			warnings.push(`File "${path}" present in original diff but missing from stack`);
+			unionMissing.push(path);
+		}
+	}
+
+	for (const path of actualPaths) {
+		if (!expectedPaths.has(path)) {
+			warnings.push(`File "${path}" present in stack but not in original diff`);
+			unionExtra.push(path);
+		}
+	}
+}
+
+async function verifyFinalTreeEquivalence(
+	repoPath: string,
+	headSha: string,
+	execResult: StackExecResult,
+	errors: string[],
+): Promise<void> {
+	const headTreeResult = await Bun.$`git -C ${repoPath} rev-parse ${headSha}^{tree}`.quiet().nothrow();
+
+	if (headTreeResult.exitCode !== 0) {
+		errors.push(`Failed to get HEAD tree: ${headTreeResult.stderr.toString().trim()}`);
+		return;
+	}
+
+	const headTree = headTreeResult.stdout.toString().trim();
+
+	if (execResult.final_tree_sha !== headTree) {
+		errors.push(
+			`Final tree mismatch: stack top = ${execResult.final_tree_sha}, HEAD = ${headTree}`,
+		);
+	}
+}
+
+function extractPathsFromRawDiff(output: Buffer): string[] {
+	const paths: string[] = [];
+	const entries = output.toString("utf-8").split("\0").filter((s) => s.length > 0);
+
+	for (let i = 0; i < entries.length; i++) {
+		const entry = entries[i];
+		if (!entry) continue;
+		if (!entry.startsWith(":")) continue;
+
+		const match = entry.match(/^:(\d+) (\d+) ([0-9a-f]+) ([0-9a-f]+) ([AMDRC])(\d*)$/);
+		if (!match) continue;
+
+		const status = match[5];
+		const pathEntry = entries[i + 1];
+		if (!pathEntry) continue;
+		i++;
+
+		if (status === "R") {
+			const newPath = entries[i + 1];
+			if (newPath) {
+				paths.push(newPath);
+				i++;
+			}
+		} else {
+			paths.push(pathEntry);
+		}
+	}
+
+	return paths;
+}

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

@@ -0,0 +1,64 @@
+import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import type { FeasibilityResult } from "../../../stack/types.ts";
+
+export function FeasibilityAlert({ result }: { result: FeasibilityResult }) {
+	const [expanded, setExpanded] = useState(false);
+
+	if (result.feasible) {
+		return (
+			<div className="flex items-center gap-2 px-3 py-2 rounded-md bg-green-500/[0.04]">
+				<CheckCircle2 className="h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" />
+				<span className="text-[11px] text-green-700/70 dark:text-green-300/70 font-medium">Feasible</span>
+				{result.ordered_group_ids && (
+					<span className="text-[10px] text-muted-foreground/25 truncate">
+						{result.ordered_group_ids.join(" → ")}
+					</span>
+				)}
+			</div>
+		);
+	}
+
+	const hasCycleDetails = result.cycle && result.cycle.edge_cycle.length > 0;
+
+	return (
+		<div className="rounded-md bg-red-500/[0.04] px-3 py-2.5 space-y-2">
+			<button
+				type="button"
+				onClick={() => hasCycleDetails && setExpanded(!expanded)}
+				className={`flex items-center gap-2 w-full text-left ${hasCycleDetails ? "cursor-pointer" : "cursor-default"}`}
+			>
+				<XCircle className="h-3.5 w-3.5 text-red-500/60 shrink-0" />
+				<span className="text-[11px] text-red-600/80 dark:text-red-400/80 font-medium flex-1">
+					Not feasible — dependency cycle
+				</span>
+				{hasCycleDetails && (
+					<ChevronRight className={`h-3 w-3 text-red-500/30 shrink-0 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`} />
+				)}
+			</button>
+
+			{result.cycle && (
+				<p className="text-[10px] text-red-500/50 pl-5.5">
+					{result.cycle.group_cycle.join(" → ")} → {result.cycle.group_cycle[0]}
+				</p>
+			)}
+
+			{expanded && result.cycle && (
+				<div className="pl-5.5 space-y-1">
+					{result.cycle.edge_cycle.map((edge, i) => (
+						<div key={i} className="text-[10px] text-red-500/40">
+							{edge.from} → {edge.to}
+							<span className="text-red-500/25"> ({edge.kind}{edge.evidence?.path ? `: ${edge.evidence.path}` : ""})</span>
+						</div>
+					))}
+				</div>
+			)}
+
+			{result.unassigned_paths && result.unassigned_paths.length > 0 && (
+				<p className="text-[10px] text-red-500/40 pl-5.5">
+					{result.unassigned_paths.length} unassigned file(s)
+				</p>
+			)}
+		</div>
+	);
+}

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { ArrowLeft, Layers, FolderTree, BookOpen, MessageSquare, GitBranch, Sparkles, Check, ChevronDown, AlertTriangle, RefreshCw, Presentation } from "lucide-react";
+import { ArrowLeft, Layers, FolderTree, BookOpen, MessageSquare, GitBranch, Sparkles, Check, ChevronDown, AlertTriangle, RefreshCw, Presentation, GitPullRequestArrow } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../components/ui/tabs.tsx";
 import type { NewprOutput } from "../../../types/output.ts";
 import { GroupsPanel } from "../panels/GroupsPanel.tsx";
@@ -8,10 +8,11 @@ import { StoryPanel } from "../panels/StoryPanel.tsx";
 import { DiscussionPanel } from "../panels/DiscussionPanel.tsx";
 import { CartoonPanel } from "../panels/CartoonPanel.tsx";
 import { SlidesPanel } from "../panels/SlidesPanel.tsx";
+import { StackPanel } from "../panels/StackPanel.tsx";
 import { ReviewModal } from "./ReviewModal.tsx";
 import { useOutdatedCheck } from "../hooks/useOutdatedCheck.ts";
 
-const VALID_TABS = ["story", "discussion", "groups", "files", "slides", "cartoon"] as const;
+const VALID_TABS = ["story", "discussion", "groups", "files", "stack", "slides", "cartoon"] as const;
 type TabValue = typeof VALID_TABS[number];
 
 function getInitialTab(): TabValue {
@@ -236,6 +237,10 @@ export function ResultsScreen({
 						<FolderTree className="h-3 w-3 shrink-0" />
 						Files
 					</TabsTrigger>
+					<TabsTrigger value="stack">
+						<GitPullRequestArrow className="h-3 w-3 shrink-0" />
+						Stack
+					</TabsTrigger>
 					{(!enabledPlugins || enabledPlugins.includes("slides")) && (
 						<TabsTrigger value="slides">
 							<Presentation className="h-3 w-3 shrink-0" />
@@ -268,6 +273,9 @@ export function ResultsScreen({
 					onFileSelect={(path: string) => onAnchorClick("file", path)}
 				/>
 			</TabsContent>
+			<TabsContent value="stack">
+				<StackPanel sessionId={sessionId} />
+			</TabsContent>
 			<TabsContent value="slides">
 				<SlidesPanel data={data} sessionId={sessionId} />
 			</TabsContent>

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

@@ -0,0 +1,171 @@
+import { ChevronRight, GitBranch, ExternalLink, Plus, Minus } from "lucide-react";
+import { useState } from "react";
+import type { StackGroupStats } from "../../../stack/types.ts";
+
+const TYPE_COLORS: Record<string, { bg: string; text: string }> = {
+	feature: { bg: "bg-blue-500/10", text: "text-blue-600 dark:text-blue-400" },
+	refactor: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
+	bugfix: { bg: "bg-red-500/10", text: "text-red-600 dark:text-red-400" },
+	chore: { bg: "bg-neutral-500/10", text: "text-neutral-500" },
+	docs: { bg: "bg-teal-500/10", text: "text-teal-600 dark:text-teal-400" },
+	test: { bg: "bg-yellow-500/10", text: "text-yellow-600 dark:text-yellow-400" },
+	config: { bg: "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 SizeBar({ stats }: { stats: StackGroupStats }) {
+	const total = stats.additions + stats.deletions;
+	if (total === 0) return null;
+	const addPct = Math.round((stats.additions / total) * 100);
+	const segments = 5;
+	const addSegs = Math.round((addPct / 100) * segments);
+	const delSegs = segments - addSegs;
+
+	return (
+		<div className="flex items-center gap-[2px]">
+			{Array.from({ length: addSegs }).map((_, i) => (
+				<div key={`a${i}`} className="h-[6px] w-[6px] rounded-[1px] bg-green-500/70" />
+			))}
+			{Array.from({ length: delSegs }).map((_, i) => (
+				<div key={`d${i}`} className="h-[6px] w-[6px] rounded-[1px] bg-red-500/70" />
+			))}
+		</div>
+	);
+}
+
+interface StackGroupCardProps {
+	group: {
+		id: string;
+		name: string;
+		type: string;
+		description: string;
+		files: string[];
+		order: number;
+		stats?: StackGroupStats;
+		pr_title?: string;
+	};
+	commit?: {
+		commit_sha: string;
+		branch_name: string;
+	};
+	pr?: {
+		number: number;
+		url: string;
+		title: string;
+	};
+}
+
+export function StackGroupCard({ group, commit, pr }: StackGroupCardProps) {
+	const [expanded, setExpanded] = useState(false);
+	const stats = group.stats;
+	const colors = TYPE_COLORS[group.type] ?? TYPE_COLORS.chore!;
+
+	return (
+		<div className="group/card">
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="w-full flex items-center gap-2.5 px-3 py-2.5 text-left hover:bg-accent/20 transition-colors rounded-md"
+			>
+				<span className="text-[10px] text-muted-foreground/20 tabular-nums w-4 shrink-0 text-right">
+					{group.order + 1}
+				</span>
+
+				<ChevronRight className={`h-3 w-3 text-muted-foreground/25 shrink-0 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`} />
+
+				<span className={`text-[9px] font-medium px-1.5 py-px rounded ${colors.bg} ${colors.text} shrink-0`}>
+					{group.type}
+				</span>
+
+				<span className="text-[12px] font-medium flex-1 min-w-0 truncate text-foreground/90">
+					{group.pr_title ?? group.name}
+				</span>
+
+				{stats ? (
+					<span className="flex items-center gap-2 shrink-0">
+						<span className="text-[10px] text-green-600/70 dark:text-green-400/70 tabular-nums">
+							+{formatStat(stats.additions)}
+						</span>
+						<span className="text-[10px] text-red-500/70 tabular-nums">
+							−{formatStat(stats.deletions)}
+						</span>
+						<SizeBar stats={stats} />
+					</span>
+				) : (
+					<span className="text-[10px] text-muted-foreground/25 shrink-0 tabular-nums">
+						{group.files.length}f
+					</span>
+				)}
+			</button>
+
+			{expanded && (
+				<div className="ml-[26px] pl-5 pb-3 space-y-2.5 border-l border-border/50">
+					{group.pr_title && (
+						<div className="flex items-center gap-1.5">
+							<span className="text-[10px] text-muted-foreground/30">{group.name}</span>
+						</div>
+					)}
+
+					<p className="text-[11px] text-muted-foreground/50 leading-[1.6]">
+						{group.description}
+					</p>
+
+					{stats && (
+						<div className="flex items-center gap-4 text-[10px]">
+							<span className="text-muted-foreground/30 tabular-nums">
+								{group.files.length} files
+							</span>
+							<span className="flex items-center gap-1">
+								<Plus className="h-2.5 w-2.5 text-green-600/60 dark:text-green-400/60" />
+								<span className="tabular-nums text-green-600/60 dark:text-green-400/60">{stats.additions.toLocaleString()}</span>
+							</span>
+							<span className="flex items-center gap-1">
+								<Minus className="h-2.5 w-2.5 text-red-500/60" />
+								<span className="tabular-nums text-red-500/60">{stats.deletions.toLocaleString()}</span>
+							</span>
+							<span className="text-muted-foreground/20 tabular-nums">
+								{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-[10px] text-muted-foreground/30">
+							<GitBranch className="h-3 w-3 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.5 text-[10px] text-foreground/50 hover:text-foreground transition-colors"
+						>
+							<ExternalLink className="h-3 w-3 shrink-0" />
+							<span className="tabular-nums">#{pr.number}</span>
+							<span className="truncate">{pr.title}</span>
+						</a>
+					)}
+
+					<div className="space-y-0">
+						{group.files.map((file) => (
+							<div key={file} className="text-[10px] font-mono text-muted-foreground/25 py-[2px] truncate">
+								{file}
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { ChevronRight, AlertTriangle, Info } from "lucide-react";
+import type { StackWarning, StackWarningCategory } from "../../../stack/types.ts";
+
+const CATEGORY_LABELS: Record<StackWarningCategory, string> = {
+	assignment: "File Assignment",
+	grouping: "Group Changes",
+	coupling: "Coupling Rules",
+	"verification.scope": "Scope Check",
+	"verification.completeness": "Completeness Check",
+	system: "System",
+};
+
+const CATEGORY_ORDER: StackWarningCategory[] = [
+	"system",
+	"assignment",
+	"coupling",
+	"grouping",
+	"verification.scope",
+	"verification.completeness",
+];
+
+function groupByCategory(warnings: StackWarning[]): Map<StackWarningCategory, StackWarning[]> {
+	const map = new Map<StackWarningCategory, StackWarning[]>();
+	for (const w of warnings) {
+		const existing = map.get(w.category) ?? [];
+		existing.push(w);
+		map.set(w.category, existing);
+	}
+	return map;
+}
+
+function WarningGroup({ category, items, defaultOpen }: {
+	category: StackWarningCategory;
+	items: StackWarning[];
+	defaultOpen: boolean;
+}) {
+	const [expanded, setExpanded] = useState(defaultOpen);
+	const hasWarn = items.some((w) => w.severity === "warn");
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="w-full flex items-center gap-2 px-2.5 py-2 text-left hover:bg-accent/20 transition-colors rounded-md"
+			>
+				<ChevronRight className={`h-3 w-3 text-muted-foreground/20 shrink-0 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`} />
+				{hasWarn
+					? <AlertTriangle className="h-3 w-3 text-yellow-500/60 shrink-0" />
+					: <Info className="h-3 w-3 text-muted-foreground/30 shrink-0" />
+				}
+				<span className="text-[11px] font-medium text-muted-foreground/50 flex-1">
+					{CATEGORY_LABELS[category]}
+				</span>
+				<span className={`text-[9px] font-medium tabular-nums px-1.5 py-0.5 rounded-full ${
+					hasWarn
+						? "bg-yellow-500/8 text-yellow-600/70 dark:text-yellow-400/70"
+						: "bg-foreground/[0.04] text-muted-foreground/30"
+				}`}>
+					{items.length}
+				</span>
+			</button>
+
+			{expanded && (
+				<div className="ml-5 pl-3 border-l border-border/40 space-y-1.5 pb-2">
+					{items.map((w, i) => (
+						<WarningItem key={i} warning={w} />
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function WarningItem({ warning }: { warning: StackWarning }) {
+	const [detailsOpen, setDetailsOpen] = useState(false);
+	const hasDetails = warning.details && warning.details.length > 0;
+
+	return (
+		<div className="py-1">
+			<div className="flex items-start gap-1.5">
+				<span className={`mt-[5px] h-1 w-1 rounded-full shrink-0 ${
+					warning.severity === "warn" ? "bg-yellow-500/60" : "bg-muted-foreground/20"
+				}`} />
+				<div className="flex-1 min-w-0">
+					<div className="text-[11px] font-medium text-foreground/60">{warning.title}</div>
+					<div className="text-[10px] text-muted-foreground/35 leading-relaxed">{warning.message}</div>
+					{hasDetails && (
+						<button
+							type="button"
+							onClick={() => setDetailsOpen(!detailsOpen)}
+							className="text-[10px] text-muted-foreground/25 hover:text-muted-foreground/50 mt-0.5 transition-colors"
+						>
+							{detailsOpen ? "Hide" : `${warning.details!.length} details`}
+						</button>
+					)}
+					{detailsOpen && hasDetails && (
+						<div className="mt-1.5 space-y-0">
+							{warning.details!.map((d, i) => (
+								<div key={i} className="text-[9px] font-mono text-muted-foreground/25 py-[1px] truncate">
+									{d}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function StackWarnings({ warnings, defaultCollapsed }: {
+	warnings: StackWarning[];
+	defaultCollapsed?: boolean;
+}) {
+	if (warnings.length === 0) return null;
+
+	const grouped = groupByCategory(warnings);
+	const sortedCategories = CATEGORY_ORDER.filter((c) => grouped.has(c));
+	const hasAnyWarn = warnings.some((w) => w.severity === "warn");
+
+	return (
+		<div className="space-y-0">
+			{sortedCategories.map((category) => (
+				<WarningGroup
+					key={category}
+					category={category}
+					items={grouped.get(category)!}
+					defaultOpen={!defaultCollapsed && hasAnyWarn}
+				/>
+			))}
+		</div>
+	);
+}