newpr 1.0.24 → 1.0.26

package/src/stack/quality-gate.ts

@@ -13,6 +13,7 @@ const LOCKFILES = [
 interface QualityGateInput {
 	repo_path: string;
 	exec_result: StackExecResult;
+	custom_env?: Record<string, string>;
 	onProgress?: (message: string) => void;
 	checkAborted?: () => void;
 }
@@ -24,12 +25,12 @@ interface PackageJson {
 
 type PackageManager = "bun" | "pnpm" | "yarn" | "npm";
 
-async function runProcess(args: string[], cwd: string): Promise<{ exitCode: number; stdout: string; stderr: string }> {
+async function runProcess(args: string[], cwd: string, extraEnv?: Record<string, string>): Promise<{ exitCode: number; stdout: string; stderr: string }> {
 	const proc = Bun.spawn(args, {
 		cwd,
 		stdout: "pipe",
 		stderr: "pipe",
-		env: { ...process.env, CI: "true" },
+		env: { ...process.env, CI: "true", ...extraEnv },
 	});
 	const [exitCode, stdout, stderr] = await Promise.all([
 		proc.exited,
@@ -98,7 +99,9 @@ function runScriptCommand(manager: PackageManager, script: string): string[] {
 function selectRequiredScripts(pkg: PackageJson): string[] {
 	const scripts = pkg.scripts ?? {};
 	const required: string[] = [];
+	if (typeof scripts.typecheck === "string" && scripts.typecheck.trim()) required.push("typecheck");
 	if (typeof scripts.lint === "string" && scripts.lint.trim()) required.push("lint");
+	if (typeof scripts.test === "string" && scripts.test.trim()) required.push("test");
 	if (typeof scripts.build === "string" && scripts.build.trim()) required.push("build");
 	return required;
 }
@@ -115,11 +118,11 @@ async function depsChanged(repoPath: string, prevCommit: string, nextCommit: str
 	return result.stdout.toString().trim().length > 0;
 }
 
-async function installDependencies(worktreePath: string, manager: PackageManager): Promise<boolean> {
+async function installDependencies(worktreePath: string, manager: PackageManager, extraEnv?: Record<string, string>): Promise<boolean> {
 	const candidates = installCommandCandidates(manager);
 
 	for (const cmd of candidates) {
-		const install = await runProcess(cmd, worktreePath);
+		const install = await runProcess(cmd, worktreePath, extraEnv);
 		if (install.exitCode === 0) return true;
 	}
 
@@ -138,7 +141,7 @@ export interface QualityGateResult {
 }
 
 export async function runStackQualityGate(input: QualityGateInput): Promise<QualityGateResult> {
-	const { repo_path, exec_result, onProgress, checkAborted } = input;
+	const { repo_path, exec_result, custom_env, onProgress, checkAborted } = input;
 	if (exec_result.group_commits.length === 0) {
 		return { ran: false, skippedReason: "No group commits", groupResults: [] };
 	}
@@ -206,7 +209,7 @@ export async function runStackQualityGate(input: QualityGateInput): Promise<Qual
 
 			if (!installReady || await depsChanged(repo_path, prevCommit, commit.commit_sha)) {
 				onProgress?.(`${label}: installing dependencies with ${manager}...`);
-				const installed = await installDependencies(worktreePath, manager);
+				const installed = await installDependencies(worktreePath, manager, custom_env);
 				if (!installed) {
 					onProgress?.(`${label}: dependency install failed (${manager}) — skipping quality gate for remaining groups`);
 					for (let j = i; j < exec_result.group_commits.length; j++) {
@@ -231,7 +234,7 @@ export async function runStackQualityGate(input: QualityGateInput): Promise<Qual
 				checkAborted?.();
 				const runCmd = runScriptCommand(manager, script);
 				onProgress?.(`${label}: ${runCmd.join(" ")}`);
-				const run = await runProcess(runCmd, worktreePath);
+				const run = await runProcess(runCmd, worktreePath, custom_env);
 				if (run.exitCode !== 0) {
 					const output = trimOutput(`${run.stdout}\n${run.stderr}`.trim());
 					scriptResults.push({ name: script, passed: false, error: output });
@@ -249,16 +252,5 @@ export async function runStackQualityGate(input: QualityGateInput): Promise<Qual
 		await Bun.$`rm -rf ${worktreePath}`.quiet().nothrow();
 	}
 
-	const anyFailed = groupResults.some((g) => !g.passed && !g.skipped);
-	if (anyFailed) {
-		const failures = groupResults
-			.filter((g) => !g.passed && !g.skipped)
-			.map((g) => {
-				const failedScripts = g.scripts.filter((s) => !s.passed).map((s) => s.name).join(", ");
-				return `${g.group_id} (${failedScripts})`;
-			});
-		throw new Error(`Quality gate failed: ${failures.join("; ")}`);
-	}
-
 	return { ran: true, groupResults };
 }

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

@@ -1,4 +1,4 @@
-import { memo, useState, useEffect, useMemo } from "react";
+import { memo, useState, useEffect, useMemo, isValidElement } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -211,6 +211,75 @@ function preprocess(text: string): string {
 	return processed.replace(/\x00MATH_BLOCK_(\d+)\x00/g, (_, idx) => mathBlocks[Number(idx)]!);
 }
 
+let mermaidCounter = 0;
+let mermaidModule: typeof import("mermaid") | null = null;
+let mermaidLoading: Promise<typeof import("mermaid")> | null = null;
+
+function loadMermaid(): Promise<typeof import("mermaid")> {
+	if (mermaidModule) return Promise.resolve(mermaidModule);
+	if (!mermaidLoading) {
+		mermaidLoading = import("mermaid").then((m) => {
+			mermaidModule = m;
+			return m;
+		});
+	}
+	return mermaidLoading;
+}
+
+function MermaidBlock({ code, dark }: { code: string; dark: boolean }) {
+	const [svg, setSvg] = useState<string>("");
+	const [error, setError] = useState(false);
+
+	useEffect(() => {
+		let cancelled = false;
+		const id = `mermaid-${++mermaidCounter}`;
+
+		loadMermaid()
+			.then(({ default: mermaid }) => {
+				if (cancelled) return;
+				mermaid.initialize({
+					startOnLoad: false,
+					theme: dark ? "dark" : "default",
+					securityLevel: "loose",
+					fontFamily: "inherit",
+				});
+				return mermaid.render(id, code);
+			})
+			.then((result) => {
+				if (!cancelled && result) {
+					setSvg(result.svg);
+					setError(false);
+				}
+			})
+			.catch(() => {
+				if (!cancelled) setError(true);
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [code, dark]);
+
+	if (error) {
+		return <code className="text-xs font-mono whitespace-pre-wrap">{code}</code>;
+	}
+
+	if (!svg) {
+		return (
+			<div className="flex items-center justify-center py-6 text-xs text-muted-foreground/40">
+				Rendering diagram…
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className="my-2 overflow-x-auto [&>svg]:mx-auto [&>svg]:max-w-full"
+			dangerouslySetInnerHTML={{ __html: svg }}
+		/>
+	);
+}
+
 export const Markdown = memo(function Markdown({ children, onAnchorClick, activeId, streaming = false }: MarkdownProps) {
 	const processed = useMemo(() => preprocess(children), [children]);
 	const hl = useHighlighter();
@@ -234,6 +303,10 @@ export const Markdown = memo(function Markdown({ children, onAnchorClick, active
 				}
 				return <code className="px-1.5 py-0.5 rounded bg-muted text-xs font-mono">{children}</code>;
 			}
+			if (className?.includes("language-mermaid")) {
+				const raw = String(children).replace(/\n$/, "");
+				return <MermaidBlock code={raw} dark={dark} />;
+			}
 			const lang = langFromClassName(className);
 			if (lang && hl) {
 				const code = String(children).replace(/\n$/, "");
@@ -250,9 +323,14 @@ export const Markdown = memo(function Markdown({ children, onAnchorClick, active
 			}
 			return <code className="px-1.5 py-0.5 rounded bg-muted text-xs font-mono">{children}</code>;
 		},
-		pre: ({ children }) => (
-			<pre className="bg-muted rounded-lg p-4 overflow-x-auto mb-3 whitespace-pre text-xs font-mono [&>span>pre]:!bg-transparent [&>span>pre]:!p-0 [&>span>pre]:!m-0">{children}</pre>
-		),
+		pre: ({ children }) => {
+			if (isValidElement(children) && children.type === MermaidBlock) {
+				return <div className="rounded-lg border border-border/50 bg-muted/30 p-4 mb-3 overflow-x-auto">{children}</div>;
+			}
+			return (
+				<pre className="bg-muted rounded-lg p-4 overflow-x-auto mb-3 whitespace-pre text-xs font-mono [&>span>pre]:!bg-transparent [&>span>pre]:!p-0 [&>span>pre]:!m-0">{children}</pre>
+			);
+		},
 		span: ({ children, ...props }) => {
 			const allProps = props as Record<string, unknown>;
 			const lineRef = allProps["data-line-ref"] as string | undefined;

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

@@ -154,13 +154,11 @@ 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;
 }) {
@@ -168,34 +166,16 @@ function DagNodeCard({
 	const { group } = node;
 	const resolveFileStats = (file: string): { additions: number; deletions: number } => {
 		const normalizedPath = normalizeFilePath(file);
-		const fallbackStats = fileStatsByPath?.[file]
-			?? fileStatsByPath?.[normalizedPath]
+		return group.file_stats?.[file]
+			?? group.file_stats?.[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 stats = group.stats;
 	const colors = TYPE_COLORS[group.type] ?? TYPE_COLORS.chore!;
 	const leftPad = node.indent * INDENT + DOT_CX * 2 + 4;
 
@@ -284,18 +264,55 @@ function DagNodeCard({
 	);
 }
 
+function filterEmptyGroups(groups: DagGroup[]): DagGroup[] {
+	const emptyIds = new Set(
+		groups.filter((g) => g.stats && g.stats.additions === 0 && g.stats.deletions === 0).map((g) => g.id),
+	);
+	if (emptyIds.size === 0) return groups;
+
+	const byId = new Map(groups.map((g) => [g.id, g]));
+
+	const resolveParents = (id: string, visited = new Set<string>()): string[] => {
+		if (visited.has(id)) return [];
+		visited.add(id);
+		const g = byId.get(id);
+		if (!g) return [];
+		const parents = g.explicit_deps ?? g.deps ?? [];
+		const resolved: string[] = [];
+		for (const p of parents) {
+			if (emptyIds.has(p)) {
+				resolved.push(...resolveParents(p, visited));
+			} else {
+				resolved.push(p);
+			}
+		}
+		return resolved;
+	};
+
+	return groups
+		.filter((g) => !emptyIds.has(g.id))
+		.map((g, i) => {
+			const newDeps = resolveParents(g.id);
+			return {
+				...g,
+				deps: [...new Set(newDeps)],
+				explicit_deps: g.explicit_deps ? [...new Set(newDeps)] : undefined,
+				order: i,
+			};
+		});
+}
+
 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 filteredGroups = filterEmptyGroups(groups);
+	const nodes = buildDagNodes(filteredGroups);
 	const isLinear = nodes.every((n) => n.indent === 0);
 	const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
 	const [rowHeights, setRowHeights] = useState<number[]>([]);
@@ -370,15 +387,14 @@ export function StackDagView({
 					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; }}
-						/>
+					<DagNodeCard
+						key={node.group.id}
+						node={node}
+						commit={commit}
+						pr={pr}
+						allGroups={filteredGroups}
+						rowRef={(el) => { rowRefs.current[i] = el; }}
+					/>
 					);
 				})}
 			</div>

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

@@ -105,6 +105,17 @@ interface PublishResultData {
 	};
 }
 
+interface QualityGateResultData {
+	ran: boolean;
+	skippedReason?: string;
+	groupResults: Array<{
+		group_id: string;
+		passed: boolean;
+		skipped: boolean;
+		scripts: Array<{ name: string; passed: boolean; error?: string }>;
+	}>;
+}
+
 interface PublishPreviewData {
 	template_path: string | null;
 	generatedAt?: number;
@@ -130,6 +141,7 @@ interface ServerStackState {
 	plan: PlanData | null;
 	execResult: ExecResultData | null;
 	verifyResult: VerifyResultData | null;
+	qualityGateResult: QualityGateResultData | null;
 	publishResult: PublishResultData | null;
 	publishPreview: PublishPreviewData | null;
 	startedAt: number;
@@ -146,6 +158,7 @@ export interface StackState {
 	plan: PlanData | null;
 	execResult: ExecResultData | null;
 	verifyResult: VerifyResultData | null;
+	qualityGateResult: QualityGateResultData | null;
 	publishResult: PublishResultData | null;
 	publishPreview: PublishPreviewData | null;
 	publishPreviewLoading: boolean;
@@ -154,6 +167,7 @@ export interface StackState {
 	publishCleanupError: string | null;
 	progressMessage: string | null;
 	analysisFileStatsByPath: Record<string, { additions: number; deletions: number }>;
+	envVars: Record<string, string>;
 }
 
 function normalizeFilePath(path: string): string {
@@ -195,6 +209,7 @@ function applyServerState(server: ServerStackState): Partial<StackState> {
 		plan: server.plan,
 		execResult: server.execResult,
 		verifyResult: server.verifyResult,
+		qualityGateResult: server.qualityGateResult ?? null,
 		publishResult: server.publishResult,
 		publishPreview: server.publishPreview,
 	};
@@ -215,6 +230,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 		plan: null,
 		execResult: null,
 		verifyResult: null,
+		qualityGateResult: null,
 		publishResult: null,
 		publishPreview: null,
 		publishPreviewLoading: false,
@@ -223,6 +239,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 		publishCleanupError: null,
 		progressMessage: null,
 		analysisFileStatsByPath: {},
+		envVars: {},
 	});
 
 	const eventSourceRef = useRef<EventSource | null>(null);
@@ -305,15 +322,20 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 		};
 	}, []);
 
+	const setEnvVars = useCallback((envVars: Record<string, string>) => {
+		setState((s) => ({ ...s, envVars }));
+	}, []);
+
 	const runFullPipeline = useCallback(async () => {
 		if (!sessionId) return;
 
 		setState((s) => ({ ...s, phase: "partitioning", error: null, progressMessage: "Starting..." }));
 		try {
+			const envVars = Object.keys(state.envVars).length > 0 ? state.envVars : undefined;
 			const res = await fetch("/api/stack/start", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ sessionId, maxGroups: state.maxGroups }),
+				body: JSON.stringify({ sessionId, maxGroups: state.maxGroups, envVars }),
 			});
 			const data = await res.json();
 			if (!res.ok) throw new Error(data.error ?? "Failed to start stack pipeline");
@@ -327,7 +349,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 				progressMessage: null,
 			}));
 		}
-	}, [sessionId, state.maxGroups, connectSSE]);
+	}, [sessionId, state.maxGroups, state.envVars, connectSSE]);
 
 	const startPublish = useCallback(async () => {
 		if (!sessionId) return;
@@ -514,6 +536,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 			plan: null,
 			execResult: null,
 			verifyResult: null,
+			qualityGateResult: null,
 			publishResult: null,
 			publishPreview: null,
 			publishPreviewLoading: false,
@@ -522,6 +545,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 			publishCleanupError: null,
 			progressMessage: null,
 			analysisFileStatsByPath: s.analysisFileStatsByPath,
+			envVars: s.envVars,
 		}));
 	}, []);
 
@@ -534,6 +558,7 @@ export function useStack(sessionId: string | null | undefined, options?: UseStac
 	return {
 		...state,
 		setMaxGroups,
+		setEnvVars,
 		runFullPipeline,
 		startPublish,
 		loadPublishPreview,

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

@@ -1,4 +1,5 @@
-import { Loader2, Play, Upload, RotateCcw, CheckCircle2, AlertTriangle, Circle, GitPullRequestArrow, ArrowRight, Layers, FileText, RefreshCw, XCircle, Trash2 } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Loader2, Play, Upload, RotateCcw, CheckCircle2, AlertTriangle, Circle, GitPullRequestArrow, ArrowRight, Layers, FileText, RefreshCw, XCircle, Trash2, Plus, KeyRound } from "lucide-react";
 import { useStack } from "../hooks/useStack.ts";
 import { FeasibilityAlert } from "../components/FeasibilityAlert.tsx";
 import { StackDagView } from "../components/StackDagView.tsx";
@@ -69,6 +70,162 @@ function PipelineTimeline({ phase }: { phase: StackPhase }) {
 	);
 }
 
+function EnvVarsInput({ envVars, setEnvVars }: { envVars: Record<string, string>; setEnvVars: (v: Record<string, string>) => void }) {
+	const [rows, setRows] = useState<Array<{ key: string; value: string }>>(() => {
+		const entries = Object.entries(envVars);
+		return entries.length > 0 ? entries.map(([key, value]) => ({ key, value })) : [];
+	});
+
+	useEffect(() => {
+		const record: Record<string, string> = {};
+		for (const row of rows) {
+			const k = row.key.trim();
+			if (k) record[k] = row.value;
+		}
+		setEnvVars(record);
+	}, [rows, setEnvVars]);
+
+	const addRow = () => setRows((r) => [...r, { key: "", value: "" }]);
+
+	const updateRow = (idx: number, field: "key" | "value", val: string) => {
+		setRows((r) => r.map((row, i) => i === idx ? { ...row, [field]: val } : row));
+	};
+
+	const removeRow = (idx: number) => setRows((r) => r.filter((_, i) => i !== idx));
+
+	return (
+		<details className="mb-5 group">
+			<summary className="cursor-pointer list-none flex items-center gap-2 text-[11px] text-muted-foreground/40 hover:text-muted-foreground/60 transition-colors select-none">
+				<KeyRound className="h-3 w-3" />
+				<span>Environment Variables</span>
+				{rows.length > 0 && (
+					<span className="text-[10px] tabular-nums text-muted-foreground/25">({rows.length})</span>
+				)}
+			</summary>
+			<div className="mt-2.5 space-y-2">
+				<p className="text-[10px] text-muted-foreground/30 leading-relaxed">
+					Set env vars for quality gate scripts (e.g. NPM_TOKEN, CI tokens)
+				</p>
+				{rows.map((row, idx) => (
+					<div key={idx} className="flex items-center gap-1.5">
+						<input
+							type="text"
+							placeholder="KEY"
+							value={row.key}
+							onChange={(e) => updateRow(idx, "key", e.target.value.toUpperCase())}
+							className="h-7 flex-1 min-w-0 rounded-md border bg-transparent px-2 text-[10px] font-mono placeholder:text-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-foreground/20"
+						/>
+						<input
+							type="text"
+							placeholder="value"
+							value={row.value}
+							onChange={(e) => updateRow(idx, "value", e.target.value)}
+							className="h-7 flex-[2] min-w-0 rounded-md border bg-transparent px-2 text-[10px] font-mono placeholder:text-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-foreground/20"
+						/>
+						<button
+							type="button"
+							onClick={() => removeRow(idx)}
+							className="h-7 w-7 shrink-0 flex items-center justify-center rounded-md text-muted-foreground/25 hover:text-foreground/60 hover:bg-accent/30 transition-colors"
+						>
+							<XCircle className="h-3 w-3" />
+						</button>
+					</div>
+				))}
+				<button
+					type="button"
+					onClick={addRow}
+					className="flex items-center gap-1.5 text-[10px] text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors"
+				>
+					<Plus className="h-3 w-3" />
+					Add variable
+				</button>
+			</div>
+		</details>
+	);
+}
+
+interface QualityGateResultData {
+	ran: boolean;
+	skippedReason?: string;
+	groupResults: Array<{
+		group_id: string;
+		passed: boolean;
+		skipped: boolean;
+		scripts: Array<{ name: string; passed: boolean; error?: string }>;
+	}>;
+}
+
+function QualityGateResults({ result }: { result: QualityGateResultData }) {
+	if (!result.ran && result.skippedReason) {
+		return (
+			<div className="flex items-center gap-2.5 rounded-lg bg-foreground/[0.03] px-3.5 py-2.5">
+				<Circle className="h-3.5 w-3.5 text-muted-foreground/30 shrink-0" />
+				<span className="text-[11px] text-muted-foreground/40">
+					Quality gate skipped: {result.skippedReason}
+				</span>
+			</div>
+		);
+	}
+
+	if (!result.ran) return null;
+
+	const totalGroups = result.groupResults.filter((g) => !g.skipped).length;
+	const passedGroups = result.groupResults.filter((g) => g.passed && !g.skipped).length;
+	const failedGroups = result.groupResults.filter((g) => !g.passed && !g.skipped);
+	const allPassed = failedGroups.length === 0;
+
+	return (
+		<div className="space-y-2">
+			<div className={`flex items-center gap-2.5 rounded-lg px-3.5 py-2.5 ${
+				allPassed ? "bg-green-500/[0.04]" : "bg-yellow-500/[0.06]"
+			}`}>
+				{allPassed
+					? <CheckCircle2 className="h-3.5 w-3.5 text-green-600/70 dark:text-green-400/70 shrink-0" />
+					: <AlertTriangle className="h-3.5 w-3.5 text-yellow-600/70 dark:text-yellow-400/70 shrink-0" />
+				}
+				<span className={`text-[11px] ${
+					allPassed
+						? "text-green-700/70 dark:text-green-300/70"
+						: "text-yellow-700/70 dark:text-yellow-300/70"
+				}`}>
+					Quality gate: {allPassed
+						? `all ${totalGroups} groups passed`
+						: `${passedGroups}/${totalGroups} groups passed`
+					}
+				</span>
+			</div>
+
+			{failedGroups.length > 0 && (
+				<details className="rounded-lg border border-yellow-500/20 bg-yellow-500/[0.03]">
+					<summary className="cursor-pointer list-none px-3.5 py-2.5 text-[11px] text-yellow-700/70 dark:text-yellow-300/70 hover:bg-yellow-500/[0.04] transition-colors select-none">
+						{failedGroups.length} group(s) with warnings (non-blocking)
+					</summary>
+					<div className="px-3.5 pb-3 space-y-2.5">
+						{failedGroups.map((group) => (
+							<div key={group.group_id} className="space-y-1.5">
+								<div className="flex items-center gap-2">
+									<AlertTriangle className="h-3 w-3 text-yellow-600/60 dark:text-yellow-400/60 shrink-0" />
+									<span className="text-[10px] font-medium text-foreground/70">{group.group_id}</span>
+								</div>
+								{group.scripts.filter((s) => !s.passed).map((script) => (
+									<div key={script.name} className="ml-5 space-y-1">
+										<span className="text-[10px] text-yellow-700/60 dark:text-yellow-300/60 font-mono">{script.name}</span>
+										{script.error && (
+											<pre className="whitespace-pre-wrap break-words text-[9px] leading-relaxed text-foreground/50 bg-foreground/[0.03] rounded-md p-2 overflow-x-auto max-h-32 overflow-y-auto">
+												{script.error}
+											</pre>
+										)}
+									</div>
+								))}
+							</div>
+						))}
+					</div>
+				</details>
+			)}
+		</div>
+	);
+}
+
 interface StackPanelProps {
 	sessionId?: string | null;
 	onTrackAnalysis?: (analysisSessionId: string, prUrl: string) => void;
@@ -135,6 +292,8 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					</div>
 				</div>
 
+				<EnvVarsInput envVars={stack.envVars} setEnvVars={stack.setEnvVars} />
+
 				<button
 					type="button"
 					onClick={stack.runFullPipeline}
@@ -232,7 +391,6 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					groups={stack.plan.groups}
 					groupCommits={stack.execResult?.group_commits}
 					publishedPrs={stack.publishResult?.prs}
-					fileStatsByPath={stack.analysisFileStatsByPath}
 				/>
 				</div>
 			)}
@@ -259,12 +417,16 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 							}
 						</span>
 					</div>
-					{stack.verifyResult.structured_warnings.length > 0 && (
-						<StackWarnings warnings={stack.verifyResult.structured_warnings} defaultCollapsed={stack.verifyResult.verified} />
-					)}
+				{stack.verifyResult.structured_warnings.length > 0 && (
+					<StackWarnings warnings={stack.verifyResult.structured_warnings} defaultCollapsed={stack.verifyResult.verified} />
+				)}
 				</div>
 			)}
 
+			{stack.qualityGateResult && (
+				<QualityGateResults result={stack.qualityGateResult} />
+			)}
+
 			{stack.phase === "done" && stack.execResult && !stack.publishResult && (
 				<div className="space-y-2 rounded-lg border border-border/70 bg-foreground/[0.015] p-2.5">
 					<div className="flex items-center justify-between px-1">

package/src/web/server/routes.ts

@@ -1801,9 +1801,10 @@ Before posting an inline comment, ALWAYS call \`get_file_diff\` first to find th
 
 		"POST /api/stack/start": async (req: Request) => {
 			try {
-				const body = await req.json() as { sessionId: string; maxGroups?: number };
+				const body = await req.json() as { sessionId: string; maxGroups?: number; envVars?: Record<string, string> };
 				if (!body.sessionId) return json({ error: "Missing sessionId" }, 400);
-				const result = startStack(body.sessionId, body.maxGroups ?? null, token, config);
+				const customEnv = body.envVars && Object.keys(body.envVars).length > 0 ? body.envVars : null;
+				const result = startStack(body.sessionId, body.maxGroups ?? null, token, config, customEnv);
 				if ("error" in result) return json({ error: result.error }, result.status);
 				return json({ ok: true });
 			} catch (err) {