newpr 1.0.26 → 1.0.28

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { Loader2, Presentation, RefreshCw, Download, AlertCircle, ChevronLeft, ChevronRight } from "lucide-react";
 import type { NewprOutput, SlideDeck } from "../../../types/output.ts";
 import { sendNotification } from "../lib/notify.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?: string | null }) {
 	const [state, setState] = useState<"idle" | "loading" | "done" | "error">("idle");
@@ -11,6 +12,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 	const [progressDetail, setProgressDetail] = useState<{ current: number; total: number } | null>(null);
 	const [currentSlide, setCurrentSlide] = useState(0);
 	const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const { t } = useI18n();
 
 	const stopPolling = useCallback(() => {
 		if (pollRef.current) {
@@ -53,11 +55,11 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 					if (partial?.slides?.length) {
 						setDeck(partial);
 						setState("done");
-						sendNotification("Slides ready", `${partial.slides.length} slides generated`);
+						sendNotification(t("slides.slidesReady"), t("slides.nSlidesGenerated", { n: partial.slides.length }));
 					}
 				} else if (job.status === "error") {
 					stopPolling();
-					setError(job.message ?? "Generation failed");
+					setError(job.message ?? t("slides.failed"));
 					if (partial?.slides?.length) {
 						setDeck(partial);
 						setState("done");
@@ -67,13 +69,13 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 				}
 			} catch {}
 		}, 1000);
-	}, [sessionId, stopPolling]);
+	}, [sessionId, stopPolling, t]);
 
 	const generate = useCallback(async (resume = false) => {
 		if (!sessionId) return;
 		setState("loading");
 		setError(null);
-		setProgress(resume ? "Resuming failed slides..." : "Starting...");
+		setProgress(resume ? t("slides.resuming") : t("slides.starting"));
 		setProgressDetail(null);
 
 		try {
@@ -91,7 +93,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 			setError(err instanceof Error ? err.message : String(err));
 			setState("error");
 		}
-	}, [sessionId, startPolling]);
+	}, [sessionId, startPolling, t]);
 
 	useEffect(() => {
 		if (!sessionId || state !== "idle") return;
@@ -122,9 +124,9 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 			<div className="pt-8 flex flex-col items-center">
 				<div className="w-full max-w-sm space-y-6">
 					<div className="space-y-2">
-						<h3 className="text-xs font-medium">Slide Deck</h3>
+						<h3 className="text-xs font-medium">{t("slides.title")}</h3>
 						<p className="text-[11px] text-muted-foreground/60 leading-relaxed">
-							Generate a presentation that explains this PR to your team. The number of slides is automatically determined based on PR complexity.
+							{t("slides.description")}
 						</p>
 					</div>
 					<button
@@ -133,7 +135,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 						className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-foreground text-background text-xs font-medium hover:opacity-90 transition-opacity"
 					>
 						<Presentation className="h-3.5 w-3.5" />
-						Generate Slides
+						{t("slides.generateSlides")}
 					</button>
 				</div>
 			</div>
@@ -183,7 +185,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 					</div>
 				)}
 				{partialSlides.length === 0 && !progressDetail && (
-					<p className="text-[10px] text-muted-foreground/30 text-center">This may take a few minutes</p>
+					<p className="text-[10px] text-muted-foreground/30 text-center">{t("slides.takesMinutes")}</p>
 				)}
 			</div>
 		);
@@ -196,7 +198,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 					<div className="rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3 flex items-start gap-2.5">
 						<AlertCircle className="h-3.5 w-3.5 text-destructive shrink-0 mt-0.5" />
 						<div className="space-y-1 min-w-0">
-							<p className="text-xs text-destructive font-medium">Generation failed</p>
+							<p className="text-xs text-destructive font-medium">{t("slides.failed")}</p>
 							<p className="text-[11px] text-destructive/70 break-words">{error}</p>
 						</div>
 					</div>
@@ -206,7 +208,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 						className="w-full flex items-center justify-center gap-2 h-9 rounded-lg border text-xs text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
 					>
 						<RefreshCw className="h-3 w-3" />
-						Try again
+						{t("common.tryAgain")}
 					</button>
 				</div>
 			</div>
@@ -225,7 +227,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 				<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-yellow-500/20 bg-yellow-500/5">
 					<AlertCircle className="h-3.5 w-3.5 text-yellow-600 dark:text-yellow-400 shrink-0" />
 					<span className="text-[11px] text-yellow-700 dark:text-yellow-300 flex-1">
-						{deck.failedIndices!.length} slide{deck.failedIndices!.length > 1 ? "s" : ""} failed to generate
+						{t("slides.slidesFailed", { n: deck.failedIndices!.length })}
 					</span>
 					<button
 						type="button"
@@ -233,7 +235,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 						className="flex items-center gap-1 text-[11px] font-medium text-yellow-700 dark:text-yellow-300 hover:text-yellow-900 dark:hover:text-yellow-100 shrink-0 transition-colors"
 					>
 						<RefreshCw className="h-3 w-3" />
-						Retry failed
+						{t("slides.retryFailed")}
 					</button>
 				</div>
 			)}
@@ -280,7 +282,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[11px] text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
 					>
 						<Download className="h-3 w-3" />
-						Download
+						{t("common.download")}
 					</button>
 					<button
 						type="button"
@@ -288,7 +290,7 @@ export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?
 						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[11px] text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
 					>
 						<RefreshCw className="h-3 w-3" />
-						Regenerate
+						{t("common.regenerate")}
 					</button>
 				</div>
 			</div>

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

@@ -4,15 +4,16 @@ import { useStack } from "../hooks/useStack.ts";
 import { FeasibilityAlert } from "../components/FeasibilityAlert.tsx";
 import { StackDagView } from "../components/StackDagView.tsx";
 import { StackWarnings } from "../components/StackWarnings.tsx";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 type StackPhase = "idle" | "partitioning" | "planning" | "executing" | "publishing" | "done" | "error";
 
-const PIPELINE_STEPS = [
-	{ phase: "partitioning" as const, label: "Partition", description: "Assigning files to groups" },
-	{ phase: "planning" as const, label: "Plan", description: "Building stack plan" },
-	{ phase: "executing" as const, label: "Execute", description: "Creating commits" },
-	{ phase: "publishing" as const, label: "Publish", description: "Pushing branches and creating draft PRs" },
-] as const;
+const PIPELINE_STEP_KEYS: Array<{ phase: string; labelKey: TranslationKey; descKey: TranslationKey }> = [
+	{ phase: "partitioning", labelKey: "stack.partition", descKey: "stack.partitionDesc" },
+	{ phase: "planning", labelKey: "stack.plan", descKey: "stack.planDesc" },
+	{ phase: "executing", labelKey: "stack.execute", descKey: "stack.executeDesc" },
+	{ phase: "publishing", labelKey: "stack.publish", descKey: "stack.publishDesc" },
+];
 
 function getStepState(stepPhase: string, currentPhase: StackPhase, isDone: boolean) {
 	const order = ["partitioning", "planning", "executing", "publishing"];
@@ -26,12 +27,13 @@ function getStepState(stepPhase: string, currentPhase: StackPhase, isDone: boole
 
 function PipelineTimeline({ phase }: { phase: StackPhase }) {
 	const isDone = phase === "done";
+	const { t } = useI18n();
 
 	return (
 		<div className="relative flex flex-col gap-0 py-1">
-			{PIPELINE_STEPS.map((step, i) => {
+			{PIPELINE_STEP_KEYS.map((step, i) => {
 				const state = getStepState(step.phase, phase, isDone);
-				const isLast = i === PIPELINE_STEPS.length - 1;
+				const isLast = i === PIPELINE_STEP_KEYS.length - 1;
 
 				return (
 					<div key={step.phase} className="relative flex items-start gap-3">
@@ -57,10 +59,10 @@ function PipelineTimeline({ phase }: { phase: StackPhase }) {
 									: state === "active" ? "text-foreground"
 										: "text-muted-foreground/40"
 							}`}>
-								{step.label}
+								{t(step.labelKey)}
 							</span>
 							{state === "active" && (
-								<p className="text-[11px] text-muted-foreground/50 mt-0.5">{step.description}</p>
+								<p className="text-[11px] text-muted-foreground/50 mt-0.5">{t(step.descKey)}</p>
 							)}
 						</div>
 					</div>
@@ -75,6 +77,7 @@ function EnvVarsInput({ envVars, setEnvVars }: { envVars: Record<string, string>
 		const entries = Object.entries(envVars);
 		return entries.length > 0 ? entries.map(([key, value]) => ({ key, value })) : [];
 	});
+	const { t } = useI18n();
 
 	useEffect(() => {
 		const record: Record<string, string> = {};
@@ -97,14 +100,14 @@ function EnvVarsInput({ envVars, setEnvVars }: { envVars: Record<string, string>
 		<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>
+				<span>{t("stack.envVars")}</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)
+					{t("stack.envVarsDesc")}
 				</p>
 				{rows.map((row, idx) => (
 					<div key={idx} className="flex items-center gap-1.5">
@@ -137,7 +140,7 @@ function EnvVarsInput({ envVars, setEnvVars }: { envVars: Record<string, string>
 					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
+					{t("stack.addVariable")}
 				</button>
 			</div>
 		</details>
@@ -156,12 +159,14 @@ interface QualityGateResultData {
 }
 
 function QualityGateResults({ result }: { result: QualityGateResultData }) {
+	const { t } = useI18n();
+
 	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}
+					{t("stack.qualityGateSkipped", { reason: result.skippedReason })}
 				</span>
 			</div>
 		);
@@ -188,9 +193,9 @@ function QualityGateResults({ result }: { result: QualityGateResultData }) {
 						? "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`
+					{t("stack.qualityGate")}: {allPassed
+						? t("stack.qualityGateAllPassed", { n: totalGroups })
+						: t("stack.qualityGatePartial", { passed: passedGroups, total: totalGroups })
 					}
 				</span>
 			</div>
@@ -198,7 +203,7 @@ function QualityGateResults({ result }: { result: QualityGateResultData }) {
 			{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)
+						{t("stack.groupsWithWarnings", { n: failedGroups.length })}
 					</summary>
 					<div className="px-3.5 pb-3 space-y-2.5">
 						{failedGroups.map((group) => (
@@ -233,6 +238,7 @@ interface StackPanelProps {
 
 export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 	const stack = useStack(sessionId, { onTrackAnalysis });
+	const { t } = useI18n();
 	const publishedCount = stack.publishResult?.prs.length ?? 0;
 	const pushedCount = stack.publishResult?.branches.filter((b) => b.pushed).length ?? 0;
 	const publishFailures = stack.publishResult
@@ -255,17 +261,17 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 						<Layers className="h-4 w-4 text-foreground/50" />
 					</div>
 					<div>
-						<h3 className="text-[13px] font-semibold text-foreground">PR Stacking</h3>
-						<p className="text-[11px] text-muted-foreground/50">Split into focused, reviewable PRs</p>
+						<h3 className="text-[13px] font-semibold text-foreground">{t("stack.title")}</h3>
+						<p className="text-[11px] text-muted-foreground/50">{t("stack.subtitle")}</p>
 					</div>
 				</div>
 
 				<p className="text-[11px] text-muted-foreground/40 leading-[1.6] mb-5">
-					Automatically split this PR into a stack of smaller draft PRs based on the analysis groups. Each group becomes its own PR with proper dependency ordering.
+					{t("stack.description")}
 				</p>
 
 				<div className="flex items-center gap-3 mb-5">
-					<span className="text-[11px] text-muted-foreground/50">Max PRs</span>
+					<span className="text-[11px] text-muted-foreground/50">{t("stack.maxPrs")}</span>
 					<div className="flex items-center">
 						<button
 							type="button"
@@ -300,7 +306,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					className="w-full flex items-center justify-center gap-2 rounded-lg bg-foreground text-background px-4 py-2.5 text-[12px] font-medium hover:bg-foreground/90 transition-colors"
 				>
 					<Play className="h-3.5 w-3.5" />
-					Start Stacking
+					{t("stack.startStacking")}
 				</button>
 			</div>
 		);
@@ -313,12 +319,12 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 			<div className="flex items-center gap-2">
 				<div className="flex items-center gap-2 flex-1 min-w-0">
 					<Layers className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" />
-					<span className="text-[12px] font-semibold text-foreground">PR Stacking</span>
+					<span className="text-[12px] font-semibold text-foreground">{t("stack.title")}</span>
 					{stack.phase === "done" && !stack.publishResult && (
-						<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-foreground/[0.06] text-muted-foreground/60">Ready</span>
+						<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-foreground/[0.06] text-muted-foreground/60">{t("stack.ready")}</span>
 					)}
 					{stack.publishResult && (
-						<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-green-500/10 text-green-600 dark:text-green-400">Published</span>
+						<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-green-500/10 text-green-600 dark:text-green-400">{t("stack.published")}</span>
 					)}
 				</div>
 				{stack.phase === "done" && (
@@ -338,7 +344,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					{stack.phase === "publishing" && (
 						<div className="rounded-lg bg-blue-500/[0.05] px-3.5 py-2.5">
 							<p className="text-[10px] text-blue-700/80 dark:text-blue-300/80 leading-relaxed">
-								Uploading stack branches and opening draft PRs. Please wait until publish results appear below.
+								{t("stack.publishingInfo")}
 							</p>
 						</div>
 					)}
@@ -362,7 +368,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 						className="flex items-center gap-1.5 text-[11px] text-muted-foreground/40 hover:text-foreground transition-colors"
 					>
 						<RotateCcw className="h-3 w-3" />
-						Try again
+						{t("common.tryAgain")}
 					</button>
 				</div>
 			)}
@@ -379,11 +385,11 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 				<div className="space-y-1">
 					<div className="flex items-center justify-between mb-2">
 						<span className="text-[11px] font-medium text-muted-foreground/40">
-							{stack.plan.groups.length} PRs
+							{t("stack.nPrs", { n: stack.plan.groups.length })}
 						</span>
 						{stack.plan.groups.length > 0 && (
 							<span className="text-[10px] text-muted-foreground/25 tabular-nums">
-								{stack.plan.groups.reduce((sum, g) => sum + g.files.length, 0)} files total
+								{t("stack.nFilesTotal", { n: stack.plan.groups.reduce((sum, g) => sum + g.files.length, 0) })}
 							</span>
 						)}
 					</div>
@@ -412,8 +418,8 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 								: "text-red-600/80 dark:text-red-400/80"
 						}`}>
 							{stack.verifyResult.verified
-								? "Tree equivalence verified"
-								: `Verification failed: ${stack.verifyResult.errors.join(", ")}`
+								? t("stack.treeEquivalenceVerified")
+								: t("stack.verificationFailed", { errors: stack.verifyResult.errors.join(", ") })
 							}
 						</span>
 					</div>
@@ -432,7 +438,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					<div className="flex items-center justify-between px-1">
 						<div className="flex items-center gap-2">
 							<FileText className="h-3.5 w-3.5 text-muted-foreground/60" />
-							<span className="text-[11px] font-medium text-foreground/80">Description Preview</span>
+							<span className="text-[11px] font-medium text-foreground/80">{t("stack.descriptionPreview")}</span>
 						</div>
 						<button
 							type="button"
@@ -440,7 +446,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 							className="inline-flex items-center gap-1 text-[10px] text-muted-foreground/45 hover:text-foreground/70 transition-colors"
 						>
 							<RefreshCw className="h-3 w-3" />
-							Refresh
+							{t("common.refresh")}
 						</button>
 					</div>
 
@@ -451,7 +457,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					{stack.publishPreviewLoading && (
 						<div className="flex items-center gap-2 px-2.5 py-2 text-[10px] text-muted-foreground/45">
 							<Loader2 className="h-3 w-3 animate-spin" />
-							Preparing preview bodies...
+							{t("stack.preparingPreview")}
 						</div>
 					)}
 
@@ -495,7 +501,7 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					className="w-full flex items-center justify-center gap-2 rounded-lg bg-foreground text-background px-4 py-2.5 text-[12px] font-medium hover:bg-foreground/90 transition-colors"
 				>
 					<Upload className="h-3.5 w-3.5" />
-					Publish as Draft PRs
+					{t("stack.publishAsDraft")}
 				</button>
 			)}
 
@@ -504,35 +510,35 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 					<div className="flex items-center justify-between px-1">
 						<div className="flex items-center gap-2">
 							<GitPullRequestArrow className="h-3.5 w-3.5 text-green-600/70 dark:text-green-400/70" />
-							<span className="text-[11px] font-medium text-foreground/80">Draft Publish Results</span>
+							<span className="text-[11px] font-medium text-foreground/80">{t("stack.draftPublishResults")}</span>
 						</div>
-						<span className="text-[10px] text-muted-foreground/35 tabular-nums">{publishedCount}/{pushedCount} created</span>
+						<span className="text-[10px] text-muted-foreground/35 tabular-nums">{t("stack.nOfNCreated", { created: publishedCount, total: pushedCount })}</span>
 					</div>
 
 					<div className="flex flex-wrap items-center gap-2 px-1">
 						<button
 							type="button"
 							onClick={() => {
-								if (!confirm("Close all stacked draft PRs?")) return;
+								if (!confirm(t("stack.confirmCloseAll"))) return;
 								stack.cleanupPublished("close");
 							}}
 							disabled={stack.publishCleanupLoading}
 							className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md border border-border text-[10px] text-foreground/70 hover:bg-accent/30 transition-colors disabled:opacity-50"
 						>
 							{stack.publishCleanupLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <XCircle className="h-3 w-3" />}
-							Close all
+							{t("stack.closeAll")}
 						</button>
 						<button
 							type="button"
 							onClick={() => {
-								if (!confirm("Close all stacked draft PRs and delete stack branches?")) return;
+								if (!confirm(t("stack.confirmCloseDelete"))) return;
 								stack.cleanupPublished("delete");
 							}}
 							disabled={stack.publishCleanupLoading}
 							className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md border border-red-500/25 text-[10px] text-red-600/80 dark:text-red-300/80 hover:bg-red-500/10 transition-colors disabled:opacity-50"
 						>
 							{stack.publishCleanupLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}
-							Close + delete branches
+							{t("stack.closeDeleteBranches")}
 						</button>
 					</div>
 
@@ -582,13 +588,13 @@ export function StackPanel({ sessionId, onTrackAnalysis }: StackPanelProps) {
 							))}
 						</div>
 					) : (
-						<p className="text-[10px] text-muted-foreground/35 px-2.5 py-2">No draft PR URLs were returned.</p>
+						<p className="text-[10px] text-muted-foreground/35 px-2.5 py-2">{t("stack.noDraftPrUrls")}</p>
 					)}
 
 					{publishFailures.length > 0 && (
 						<div className="rounded-md bg-yellow-500/[0.06] px-2.5 py-2 space-y-1">
 							<p className="text-[10px] text-yellow-700/80 dark:text-yellow-300/80">
-								Some branches were pushed but PR creation did not complete.
+								{t("stack.branchesPushedNotCreated")}
 							</p>
 							{publishFailures.map((branch) => (
 								<div key={branch.name} className="text-[10px] font-mono text-yellow-700/70 dark:text-yellow-300/70 truncate">

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

@@ -1,6 +1,7 @@
 import type { NewprOutput } from "../../../types/output.ts";
 import { Markdown } from "../components/Markdown.tsx";
 import { ChatMessages } from "../components/ChatSection.tsx";
+import { useI18n } from "../lib/i18n/index.ts";
 
 const TYPE_DOT: Record<string, string> = {
 	feature: "bg-blue-500",
@@ -22,6 +23,7 @@ export function StoryPanel({
 	onAnchorClick: (kind: "group" | "file" | "line", id: string) => void;
 }) {
 	const { summary, groups, narrative } = data;
+	const { t } = useI18n();
 
 	return (
 		<div className="pt-5 space-y-6">
@@ -30,11 +32,11 @@ export function StoryPanel({
 
 			<div className="grid grid-cols-2 gap-x-6 gap-y-3">
 				<div>
-					<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">Scope</div>
+					<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">{t("story.scope")}</div>
 					<p className="text-sm text-muted-foreground/70 leading-relaxed">{summary.scope}</p>
 				</div>
 				<div>
-					<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">Impact</div>
+					<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">{t("story.impact")}</div>
 					<p className="text-sm text-muted-foreground/70 leading-relaxed">{summary.impact}</p>
 				</div>
 			</div>
@@ -62,7 +64,7 @@ export function StoryPanel({
 			</div>
 
 			<div className="border-t pt-5">
-				<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-4">Walkthrough</div>
+				<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-4">{t("story.walkthrough")}</div>
 				<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>
 					{narrative}
 				</Markdown>

package/src/web/server/routes.ts

@@ -669,27 +669,28 @@ Before posting an inline comment, ALWAYS call \`get_file_diff\` first to find th
 			const enabledPlugins = stored.enabled_plugins ?? pluginList.map((p) => p.id);
 			const agents = await detectAgents();
 			const telemetryConsent = await getTelemetryConsent();
-			return json({
-				model: config.model,
-				agent: config.agent ?? null,
-				language: config.language,
-				max_files: config.max_files,
-				timeout: config.timeout,
-				concurrency: config.concurrency,
-				has_api_key: !!config.openrouter_api_key,
-				has_agent_fallback: agents.length > 0,
-				has_github_token: !!token,
-				enabled_plugins: enabledPlugins,
-				available_plugins: pluginList,
-				telemetry_consent: telemetryConsent,
-				defaults: {
-					model: DEFAULT_CONFIG.model,
-					language: DEFAULT_CONFIG.language,
-					max_files: DEFAULT_CONFIG.max_files,
-					timeout: DEFAULT_CONFIG.timeout,
-					concurrency: DEFAULT_CONFIG.concurrency,
-				},
-			});
+		return json({
+			model: config.model,
+			agent: config.agent ?? null,
+			language: config.language,
+			max_files: config.max_files,
+			timeout: config.timeout,
+			concurrency: config.concurrency,
+			has_api_key: !!config.openrouter_api_key,
+			has_agent_fallback: agents.length > 0,
+			has_github_token: !!token,
+			enabled_plugins: enabledPlugins,
+			available_plugins: pluginList,
+			telemetry_consent: telemetryConsent,
+			custom_prompt: config.custom_prompt ?? "",
+			defaults: {
+				model: DEFAULT_CONFIG.model,
+				language: DEFAULT_CONFIG.language,
+				max_files: DEFAULT_CONFIG.max_files,
+				timeout: DEFAULT_CONFIG.timeout,
+				concurrency: DEFAULT_CONFIG.concurrency,
+			},
+		});
 		},
 
 		"PUT /api/config": async (req: Request) => {
@@ -732,6 +733,11 @@ Before posting an inline comment, ALWAYS call \`get_file_diff\` first to find th
 			if ((body as Record<string, unknown>).enabled_plugins !== undefined) {
 				update.enabled_plugins = (body as Record<string, unknown>).enabled_plugins as string[];
 			}
+			if ((body as Record<string, unknown>).custom_prompt !== undefined) {
+				const val = (body as Record<string, unknown>).custom_prompt as string;
+				update.custom_prompt = val || undefined;
+				config.custom_prompt = val || undefined;
+			}
 
 			const telemetryConsentVal = (body as Record<string, unknown>).telemetry_consent as string | undefined;
 			if (telemetryConsentVal === "granted" || telemetryConsentVal === "denied") {