newpr 0.6.5 → 1.0.0

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>
+	);
+}

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

@@ -0,0 +1,301 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import type { FeasibilityResult, StackWarning, StackGroupStats } from "../../../stack/types.ts";
+
+type StackPhase = "idle" | "partitioning" | "planning" | "executing" | "publishing" | "done" | "error";
+
+interface GroupData {
+	name: string;
+	type: string;
+	description: string;
+	files: string[];
+	key_changes?: string[];
+}
+
+interface PartitionData {
+	ownership: Record<string, string>;
+	reattributed: Array<{ path: string; from_groups: string[]; to_group: string; reason: string }>;
+	warnings: string[];
+	structured_warnings: StackWarning[];
+	forced_merges: Array<{ path: string; from_group: string; to_group: string }>;
+	groups?: GroupData[];
+}
+
+interface StackContext {
+	repo_path: string;
+	base_sha: string;
+	head_sha: string;
+	base_branch: string;
+	head_branch: string;
+	pr_number: number;
+	owner: string;
+	repo: string;
+}
+
+interface PlanData {
+	base_sha: string;
+	head_sha: string;
+	groups: Array<{
+		id: string;
+		name: string;
+		type: string;
+		description: string;
+		files: string[];
+		deps: string[];
+		order: number;
+		stats?: StackGroupStats;
+		pr_title?: string;
+	}>;
+	expected_trees: Record<string, string>;
+}
+
+interface ExecResultData {
+	run_id: string;
+	source_copy_branch: string;
+	group_commits: Array<{
+		group_id: string;
+		commit_sha: string;
+		tree_sha: string;
+		branch_name: string;
+		pr_title?: string;
+	}>;
+	final_tree_sha: string;
+	verified: boolean;
+}
+
+interface VerifyResultData {
+	verified: boolean;
+	errors: string[];
+	warnings: string[];
+	structured_warnings: StackWarning[];
+}
+
+interface PublishResultData {
+	branches: Array<{ name: string; pushed: boolean }>;
+	prs: Array<{
+		group_id: string;
+		number: number;
+		url: string;
+		title: string;
+		base_branch: string;
+		head_branch: string;
+	}>;
+}
+
+interface ServerStackState {
+	status: string;
+	phase: string | null;
+	error: string | null;
+	maxGroups: number | null;
+	context: StackContext | null;
+	partition: PartitionData | null;
+	feasibility: FeasibilityResult | null;
+	plan: PlanData | null;
+	execResult: ExecResultData | null;
+	verifyResult: VerifyResultData | null;
+	startedAt: number;
+	finishedAt: number | null;
+}
+
+export interface StackState {
+	phase: StackPhase;
+	error: string | null;
+	maxGroups: number | null;
+	partition: PartitionData | null;
+	feasibility: FeasibilityResult | null;
+	context: StackContext | null;
+	plan: PlanData | null;
+	execResult: ExecResultData | null;
+	verifyResult: VerifyResultData | null;
+	publishResult: PublishResultData | null;
+	progressMessage: string | null;
+}
+
+function serverPhaseToClient(status: string, phase: string | null): StackPhase {
+	if (status === "error" || status === "canceled") return "error";
+	if (status === "done") return "done";
+	if (phase === "partitioning") return "partitioning";
+	if (phase === "planning") return "planning";
+	if (phase === "executing") return "executing";
+	if (phase === "done") return "done";
+	return "idle";
+}
+
+function applyServerState(server: ServerStackState): Partial<StackState> {
+	return {
+		phase: serverPhaseToClient(server.status, server.phase),
+		error: server.error,
+		context: server.context,
+		partition: server.partition,
+		feasibility: server.feasibility,
+		plan: server.plan,
+		execResult: server.execResult,
+		verifyResult: server.verifyResult,
+	};
+}
+
+export function useStack(sessionId: string | null | undefined) {
+	const [state, setState] = useState<StackState>({
+		phase: "idle",
+		error: null,
+		maxGroups: null,
+		partition: null,
+		feasibility: null,
+		context: null,
+		plan: null,
+		execResult: null,
+		verifyResult: null,
+		publishResult: null,
+		progressMessage: null,
+	});
+
+	const eventSourceRef = useRef<EventSource | null>(null);
+
+	useEffect(() => {
+		if (!sessionId) return;
+
+		fetch(`/api/stack/${sessionId}`)
+			.then((res) => res.json())
+			.then((data: { state: ServerStackState | null }) => {
+				if (!data.state) return;
+				setState((s) => ({ ...s, ...applyServerState(data.state!) }));
+			})
+			.catch(() => {});
+	}, [sessionId]);
+
+	const setMaxGroups = useCallback((n: number | null) => {
+		setState((s) => ({ ...s, maxGroups: n }));
+	}, []);
+
+	const connectSSE = useCallback((id: string) => {
+		eventSourceRef.current?.close();
+
+		const es = new EventSource(`/api/stack/${id}/events`);
+		eventSourceRef.current = es;
+
+		es.addEventListener("progress", (e) => {
+			try {
+				const data = JSON.parse(e.data) as { phase: string; message: string; state: ServerStackState };
+				setState((s) => ({
+					...s,
+					...applyServerState(data.state),
+					progressMessage: data.message,
+				}));
+			} catch {}
+		});
+
+		es.addEventListener("done", (e) => {
+			try {
+				const data = JSON.parse(e.data) as { state: ServerStackState };
+				setState((s) => ({
+					...s,
+					...applyServerState(data.state),
+					progressMessage: null,
+				}));
+			} catch {}
+			es.close();
+			eventSourceRef.current = null;
+		});
+
+		es.addEventListener("stack_error", (e) => {
+			try {
+				const data = JSON.parse(e.data) as { message: string; state?: ServerStackState };
+				setState((s) => ({
+					...s,
+					phase: "error",
+					error: data.message,
+					...(data.state ? applyServerState(data.state) : {}),
+					progressMessage: null,
+				}));
+			} catch {}
+			es.close();
+			eventSourceRef.current = null;
+		});
+
+		es.onerror = () => {
+			es.close();
+			eventSourceRef.current = null;
+		};
+	}, []);
+
+	const runFullPipeline = useCallback(async () => {
+		if (!sessionId) return;
+
+		setState((s) => ({ ...s, phase: "partitioning", error: null, progressMessage: "Starting..." }));
+		try {
+			const res = await fetch("/api/stack/start", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ sessionId, maxGroups: state.maxGroups }),
+			});
+			const data = await res.json();
+			if (!res.ok) throw new Error(data.error ?? "Failed to start stack pipeline");
+
+			connectSSE(sessionId);
+		} catch (err) {
+			setState((s) => ({
+				...s,
+				phase: "error",
+				error: err instanceof Error ? err.message : String(err),
+				progressMessage: null,
+			}));
+		}
+	}, [sessionId, state.maxGroups, connectSSE]);
+
+	const startPublish = useCallback(async () => {
+		if (!sessionId) return;
+		setState((s) => ({ ...s, phase: "publishing" }));
+		try {
+			const res = await fetch("/api/stack/publish", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ sessionId }),
+			});
+			const data = await res.json();
+			if (!res.ok) throw new Error(data.error ?? "Publishing failed");
+
+			setState((s) => ({
+				...s,
+				phase: "done",
+				publishResult: data.publish_result,
+			}));
+		} catch (err) {
+			setState((s) => ({
+				...s,
+				phase: "error",
+				error: err instanceof Error ? err.message : String(err),
+			}));
+		}
+	}, [sessionId]);
+
+	const reset = useCallback(() => {
+		eventSourceRef.current?.close();
+		eventSourceRef.current = null;
+		setState((s) => ({
+			phase: "idle",
+			error: null,
+			maxGroups: s.maxGroups,
+			partition: null,
+			feasibility: null,
+			context: null,
+			plan: null,
+			execResult: null,
+			verifyResult: null,
+			publishResult: null,
+			progressMessage: null,
+		}));
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			eventSourceRef.current?.close();
+		};
+	}, []);
+
+	return {
+		...state,
+		setMaxGroups,
+		runFullPipeline,
+		startPublish,
+		reset,
+	};
+}