newpr 1.0.26 → 1.0.28

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { X, Check, Loader2, Search, ChevronDown } from "lucide-react";
 import { analytics, getConsent, setConsent } from "../lib/analytics.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 interface ConfigData {
 	model: string;
@@ -13,6 +14,7 @@ interface ConfigData {
 	has_github_token: boolean;
 	enabled_plugins: string[];
 	available_plugins: Array<{ id: string; name: string }>;
+	custom_prompt: string;
 	defaults: {
 		model: string;
 		language: string;
@@ -45,6 +47,7 @@ const LANGUAGES = [
 ];
 
 export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => void; onFeaturesChange?: () => void }) {
+	const { t, locale, setLocale } = useI18n();
 	const [config, setConfig] = useState<ConfigData | null>(null);
 	const [saving, setSaving] = useState(false);
 	const [saved, setSaved] = useState(false);
@@ -100,7 +103,7 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 	return (
 		<div>
 			<div className="flex items-center justify-between mb-6">
-				<h2 className="text-sm font-semibold">Settings</h2>
+				<h2 className="text-sm font-semibold">{t("settings.title")}</h2>
 				<div className="flex items-center gap-2">
 					{saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground/40" />}
 					{saved && <Check className="h-3 w-3 text-green-500" />}
@@ -115,8 +118,8 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 			</div>
 
 			<div className="space-y-6">
-				<Section title="Authentication">
-					<Row label="OpenRouter API Key">
+				<Section title={t("settings.authentication")}>
+					<Row label={t("settings.openrouterApiKey")}>
 						{showApiKeyField ? (
 							<div className="flex gap-1.5">
 								<input
@@ -148,37 +151,37 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 									}}
 									className="h-7 px-2.5 rounded-md bg-foreground text-background text-[11px] font-medium disabled:opacity-20 hover:opacity-80 transition-opacity"
 								>
-									Save
+									{t("common.save")}
 								</button>
 							</div>
 						) : (
 							<div className="flex items-center gap-2">
 								<span className={`h-1.5 w-1.5 rounded-full ${config.has_api_key ? "bg-green-500" : "bg-red-500"}`} />
 								<span className="text-[11px] text-muted-foreground/50">
-									{config.has_api_key ? "Configured" : "Not set"}
+									{config.has_api_key ? t("settings.configured") : t("settings.notSet")}
 								</span>
 								<button
 									type="button"
 									onClick={() => setShowApiKeyField(true)}
 									className="text-[11px] text-muted-foreground/40 hover:text-foreground transition-colors"
 								>
-									{config.has_api_key ? "Change" : "Set"}
+									{config.has_api_key ? t("settings.change") : t("settings.set")}
 								</button>
 							</div>
 						)}
 					</Row>
-					<Row label="GitHub Token">
+					<Row label={t("settings.githubToken")}>
 						<div className="flex items-center gap-2">
 							<span className={`h-1.5 w-1.5 rounded-full ${config.has_github_token ? "bg-green-500" : "bg-red-500"}`} />
 							<span className="text-[11px] text-muted-foreground/50">
-								{config.has_github_token ? "gh CLI" : "Not detected"}
+								{config.has_github_token ? t("settings.ghCli") : t("settings.notDetected")}
 							</span>
 						</div>
 					</Row>
 				</Section>
 
-				<Section title="Model">
-					<Row label="LLM">
+				<Section title={t("settings.model")}>
+					<Row label={t("settings.llm")}>
 						{config.has_api_key ? (
 							<ModelSelect
 								value={config.model}
@@ -186,10 +189,10 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 								onChange={(id: string) => save({ model: id })}
 							/>
 						) : (
-							<span className="text-[11px] text-muted-foreground/40">Set API key first</span>
+							<span className="text-[11px] text-muted-foreground/40">{t("settings.setApiKeyFirst")}</span>
 						)}
 					</Row>
-					<Row label="Agent">
+					<Row label={t("settings.agent")}>
 						<div className="flex gap-px rounded-md border p-0.5">
 							{AGENTS.map((a) => (
 								<button
@@ -207,36 +210,66 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 							))}
 						</div>
 					</Row>
-					<Row label="Language">
+					<Row label={t("settings.language")}>
 						<select
 							value={config.language}
 							onChange={(e) => save({ language: e.target.value })}
 							className="h-7 rounded-md border bg-background px-2 text-[11px] focus:outline-none focus:border-foreground/20 cursor-pointer"
 						>
 							{LANGUAGES.map((l) => (
-								<option key={l} value={l}>{l === "auto" ? "Auto-detect" : l}</option>
+								<option key={l} value={l}>{l === "auto" ? t("settings.autoDetect") : l}</option>
 							))}
 						</select>
 					</Row>
+					<Row label={t("settings.uiLanguage")}>
+						<div className="flex gap-px rounded-md border p-0.5">
+							{(["en", "ko"] as const).map((l) => (
+								<button
+									key={l}
+									type="button"
+									onClick={() => setLocale(l)}
+									className={`px-2.5 py-1 rounded text-[11px] transition-colors ${
+										locale === l
+											? "bg-accent text-foreground font-medium"
+											: "text-muted-foreground/50 hover:text-foreground"
+									}`}
+								>
+									{l === "en" ? "English" : "한국어"}
+								</button>
+							))}
+						</div>
+					</Row>
 				</Section>
 
-				<Section title="Limits">
-					<Row label="Max files">
+				<Section title={t("settings.limits")}>
+					<Row label={t("settings.maxFiles")}>
 						<NumberInput value={config.max_files} onChange={(v) => save({ max_files: v })} />
 					</Row>
-					<Row label="Timeout">
+					<Row label={t("settings.timeout")}>
 						<div className="flex items-center gap-1.5">
 							<NumberInput value={config.timeout} onChange={(v) => save({ timeout: v })} />
-							<span className="text-[10px] text-muted-foreground/30">sec</span>
+							<span className="text-[10px] text-muted-foreground/30">{t("settings.seconds")}</span>
 						</div>
 					</Row>
-					<Row label="Concurrency">
+					<Row label={t("settings.concurrency")}>
 						<NumberInput value={config.concurrency} onChange={(v) => save({ concurrency: v })} />
 					</Row>
 				</Section>
 
+			<Section title={t("settings.customPrompt")}>
+					<div className="space-y-2">
+						<p className="text-[10px] text-muted-foreground/40 leading-relaxed">
+							{t("settings.customPromptDesc")}
+						</p>
+						<CustomPromptInput
+							value={config.custom_prompt}
+							onSave={(v) => save({ custom_prompt: v })}
+						/>
+					</div>
+				</Section>
+
 				{config.available_plugins.length > 0 && (
-					<Section title="Plugins">
+				<Section title={t("settings.plugins")}>
 						<div className="space-y-1">
 							{config.available_plugins.map((p) => {
 								const enabled = config.enabled_plugins.includes(p.id);
@@ -268,7 +301,7 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 						</div>
 					</Section>
 				)}
-				<Section title="Privacy">
+				<Section title={t("settings.privacy")}>
 					<AnalyticsToggle />
 				</Section>
 			</div>
@@ -276,7 +309,48 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 	);
 }
 
+function CustomPromptInput({ value, onSave }: { value: string; onSave: (v: string) => void }) {
+	const { t } = useI18n();
+	const [local, setLocal] = useState(value);
+	const [focused, setFocused] = useState(false);
+
+	useEffect(() => { setLocal(value); }, [value]);
+
+	const dirty = local !== value;
+
+	function handleSave() {
+		if (dirty) onSave(local);
+	}
+
+	return (
+		<div className="space-y-1.5">
+			<textarea
+				value={local}
+				onChange={(e) => setLocal(e.target.value)}
+				onFocus={() => setFocused(true)}
+				onBlur={() => { setFocused(false); handleSave(); }}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+						e.preventDefault();
+						handleSave();
+						(e.target as HTMLTextAreaElement).blur();
+					}
+				}}
+				placeholder={t("settings.customPromptPlaceholder")}
+				rows={3}
+				className="w-full rounded-md border bg-background px-2.5 py-2 text-[11px] leading-relaxed placeholder:text-muted-foreground/30 focus:outline-none focus:border-foreground/20 resize-y min-h-[60px]"
+			/>
+			{focused && dirty && (
+				<p className="text-[10px] text-muted-foreground/30">
+					{t("settings.cmdEnterToSave")}
+				</p>
+			)}
+		</div>
+	);
+}
+
 function AnalyticsToggle() {
+	const { t } = useI18n();
 	const [consent, setLocal] = useState(() => getConsent());
 	const enabled = consent === "granted";
 
@@ -293,10 +367,10 @@ function AnalyticsToggle() {
 	};
 
 	return (
-		<Row label="Usage Analytics">
+		<Row label={t("settings.usageAnalytics")}>
 			<div className="flex items-center gap-2">
 				<span className="text-[11px] text-muted-foreground/50">
-					{enabled ? "Enabled" : "Disabled"}
+					{enabled ? t("common.enabled") : t("common.disabled")}
 				</span>
 				<button
 					type="button"
@@ -315,6 +389,7 @@ function AnalyticsToggle() {
 }
 
 function ModelSelect({ value, models: allModels, onChange }: { value: string; models: ModelInfo[]; onChange: (id: string) => void }) {
+	const { t } = useI18n();
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const ref = useRef<HTMLDivElement>(null);
@@ -363,14 +438,14 @@ function ModelSelect({ value, models: allModels, onChange }: { value: string; mo
 								type="text"
 								value={search}
 								onChange={(e) => setSearch(e.target.value)}
-								placeholder="Search models..."
+								placeholder={t("settings.searchModels")}
 								className="flex-1 bg-transparent text-[11px] focus:outline-none placeholder:text-muted-foreground/30"
 							/>
 					</div>
 				</div>
 				<div className="max-h-[280px] overflow-y-auto p-1">
 					{models.length === 0 && (
-							<div className="px-2 py-3 text-center text-[11px] text-muted-foreground/40">No models found</div>
+							<div className="px-2 py-3 text-center text-[11px] text-muted-foreground/40">{t("settings.noModelsFound")}</div>
 						)}
 						{models.slice(0, 80).map((m, i) => {
 							const isSelected = m.id === value;

package/src/web/client/lib/i18n/context.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react";
+import { en, type TranslationKeys } from "./en.ts";
+import { ko } from "./ko.ts";
+
+export type Locale = "en" | "ko";
+
+const LOCALES: Record<Locale, TranslationKeys> = { en, ko: ko as unknown as TranslationKeys };
+const STORAGE_KEY = "newpr-locale";
+
+function detectLocale(): Locale {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored === "en" || stored === "ko") return stored;
+	} catch {}
+	const nav = navigator.language.toLowerCase();
+	if (nav.startsWith("ko")) return "ko";
+	return "en";
+}
+
+type FlatKeys<T, Prefix extends string = ""> = T extends Record<string, unknown>
+	? { [K in keyof T & string]: T[K] extends string ? `${Prefix}${K}` : FlatKeys<T[K], `${Prefix}${K}.`> }[keyof T & string]
+	: never;
+
+export type TranslationKey = FlatKeys<TranslationKeys>;
+
+function getNestedValue(obj: unknown, path: string): string {
+	let current = obj;
+	for (const key of path.split(".")) {
+		if (current == null || typeof current !== "object") return path;
+		current = (current as Record<string, unknown>)[key];
+	}
+	return typeof current === "string" ? current : path;
+}
+
+function interpolate(template: string, params?: Record<string, string | number>): string {
+	if (!params) return template;
+	return template.replace(/\{(\w+)\}/g, (_, key: string) => {
+		const val = params[key];
+		return val !== undefined ? String(val) : `{${key}}`;
+	});
+}
+
+interface I18nContextValue {
+	locale: Locale;
+	setLocale: (locale: Locale) => void;
+	t: (key: TranslationKey, params?: Record<string, string | number>) => string;
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+	const [locale, setLocaleState] = useState<Locale>(detectLocale);
+
+	const setLocale = useCallback((next: Locale) => {
+		setLocaleState(next);
+		try { localStorage.setItem(STORAGE_KEY, next); } catch {}
+	}, []);
+
+	const t = useCallback(
+		(key: TranslationKey, params?: Record<string, string | number>) => {
+			const raw = getNestedValue(LOCALES[locale], key);
+			return interpolate(raw, params);
+		},
+		[locale],
+	);
+
+	const value = useMemo(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+
+	return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextValue {
+	const ctx = useContext(I18nContext);
+	if (!ctx) throw new Error("useI18n must be used within I18nProvider");
+	return ctx;
+}

package/src/web/client/lib/i18n/en.ts

@@ -0,0 +1,276 @@
+export const en = {
+	common: {
+		close: "Close",
+		cancel: "Cancel",
+		save: "Save",
+		retry: "Retry",
+		tryAgain: "Try again",
+		back: "Back",
+		submit: "Submit",
+		download: "Download",
+		regenerate: "Regenerate",
+		generate: "Generate",
+		enabled: "Enabled",
+		disabled: "Disabled",
+		refresh: "Refresh",
+		retrying: "Retrying...",
+	},
+
+	time: {
+		justNow: "just now",
+		minutes: "{n}m",
+		minutesAgo: "{n}m ago",
+		hours: "{n}h",
+		hoursAgo: "{n}h ago",
+		days: "{n}d",
+		daysAgo: "{n}d ago",
+		monthsAgo: "{n}mo ago",
+	},
+
+	appShell: {
+		noAnalysesYet: "No analyses yet",
+		newAnalysis: "New analysis",
+		restarting: "Restarting...",
+		versionAvailable: "v{version} available",
+		updating: "Updating...",
+		updateAndRestart: "Update & restart",
+		chatResponding: "Chat responding...",
+		switchToMode: "Switch to {mode} mode",
+		settings: "Settings",
+	},
+
+	input: {
+		tagline: "Turn PRs into navigable stories",
+		enterToAnalyze: "↵ Enter to analyze",
+		status: "status",
+		recent: "Recent",
+		placeholder: "https://github.com/owner/repo/pull/123",
+		sponsorTagline: "The Power of AI for Every Business",
+		ad: "Ad",
+	},
+
+	settings: {
+		title: "Settings",
+		authentication: "Authentication",
+		openrouterApiKey: "OpenRouter API Key",
+		githubToken: "GitHub Token",
+		configured: "Configured",
+		notSet: "Not set",
+		notDetected: "Not detected",
+		change: "Change",
+		set: "Set",
+		ghCli: "gh CLI",
+		model: "Model",
+		llm: "LLM",
+		setApiKeyFirst: "Set API key first",
+		agent: "Agent",
+		language: "Language",
+		autoDetect: "Auto-detect",
+		limits: "Limits",
+		maxFiles: "Max files",
+		timeout: "Timeout",
+		seconds: "sec",
+		concurrency: "Concurrency",
+		customPrompt: "Custom Prompt",
+		customPromptDesc: "Additional instructions for PR analysis. Applied to all analysis stages.",
+		customPromptPlaceholder: "e.g. Focus on security vulnerabilities and performance issues. Ignore style changes.",
+		cmdEnterToSave: "Press Cmd+Enter to save, or click outside",
+		plugins: "Plugins",
+		privacy: "Privacy",
+		usageAnalytics: "Usage Analytics",
+		searchModels: "Search models...",
+		noModelsFound: "No models found",
+		uiLanguage: "UI Language",
+		interface: "Interface",
+	},
+
+	review: {
+		submitReview: "Submit Review",
+		approve: "Approve",
+		requestChanges: "Request changes",
+		comment: "Comment",
+		approveDesc: "Submit approval for this PR",
+		requestChangesDesc: "Submit feedback that must be addressed",
+		commentDesc: "Submit general feedback",
+		reviewSubmitted: "Review submitted",
+		viewOnGithub: "View on GitHub",
+		message: "Message",
+		optionalMessage: "Optional message...",
+		describeChanges: "Describe the changes needed...",
+		ctrlEnterToSubmit: "{key}+Enter to submit",
+	},
+
+	loading: {
+		fetching: "Fetch PR data",
+		parsing: "Parse diff",
+		cloning: "Clone repository",
+		checkout: "Checkout branches",
+		exploring: "Explore codebase",
+		analyzing: "Analyze files",
+		grouping: "Group changes",
+		summarizing: "Generate summary",
+		narrating: "Write narrative",
+		done: "Complete",
+	},
+
+	error: {
+		rateLimitTitle: "Rate limit reached",
+		rateLimitHint: "The API rate limit has been exceeded. Wait a moment before retrying.",
+		timeoutTitle: "Request timed out",
+		timeoutHint: "The analysis took too long. This can happen with very large PRs.",
+		networkTitle: "Connection failed",
+		networkHint: "Could not reach the server. Check your network connection.",
+		authTitle: "Authentication error",
+		authHint: "Your GitHub token may be expired or invalid. Run `newpr auth` to reconfigure.",
+		notFoundTitle: "PR not found",
+		notFoundHint: "The pull request could not be found. Check the URL and make sure you have access.",
+		apiKeyTitle: "API key error",
+		apiKeyHint: "Your OpenRouter API key may be missing or invalid. Set OPENROUTER_API_KEY in your environment.",
+		defaultTitle: "Analysis failed",
+		defaultHint: "Something went wrong during the analysis.",
+		unknownError: "An unknown error occurred",
+	},
+
+	chat: {
+		title: "Chat",
+		askAnything: "Ask anything about this PR",
+		refAndCmds: "@ to reference files · / for commands",
+		askAboutPr: "Ask about this PR...",
+		atToRef: "@ to reference · / for commands",
+		enterToSend: "Enter to send",
+		previousAnalysis: "Previous analysis",
+		messagesCompacted: "{count} messages compacted",
+		conversationCompacted: "Conversation compacted",
+		thinking: "Thinking…",
+		done: "Done",
+		undoLabel: "/undo",
+		undoDesc: "Remove last exchange",
+	},
+
+	results: {
+		open: "Open",
+		merged: "Merged",
+		closed: "Closed",
+		draft: "Draft",
+		story: "Story",
+		discussion: "Discussion",
+		groups: "Groups",
+		files: "Files",
+		stack: "Stack",
+		slides: "Slides",
+		comic: "Comic",
+		review: "Review",
+		nFiles: "{n} files",
+		prUpdated: "This PR has been updated since this analysis was created.",
+		reAnalyze: "Re-analyze",
+	},
+
+	detail: {
+		keyChanges: "Key Changes",
+		risk: "Risk",
+		dependencies: "Dependencies",
+		nFiles: "{n} files",
+		loadingDiff: "Loading diff",
+	},
+
+	story: {
+		scope: "Scope",
+		impact: "Impact",
+		walkthrough: "Walkthrough",
+	},
+
+	discussion: {
+		noSession: "No session available",
+		loadingDiscussion: "Loading discussion",
+		description: "Description",
+		comments: "Comments",
+		noContent: "No description or comments",
+	},
+
+	groups: {
+		nGroups: "{n} groups",
+	},
+
+	files: {
+		nFiles: "{n} files",
+		tree: "Tree",
+		groups: "Groups",
+		changes: "Changes",
+		ungrouped: "Ungrouped",
+	},
+
+	cartoon: {
+		title: "Comic Strip",
+		description: "Generate a 4-panel comic strip that visualizes the key changes in this PR. Powered by Gemini.",
+		generating: "Generating comic...",
+		takesTime: "This may take 10-30 seconds",
+		failed: "Generation failed",
+		altText: "PR 4-panel comic",
+	},
+
+	slides: {
+		title: "Slide Deck",
+		description: "Generate a presentation that explains this PR to your team. The number of slides is automatically determined based on PR complexity.",
+		generateSlides: "Generate Slides",
+		failed: "Generation failed",
+		starting: "Starting...",
+		resuming: "Resuming failed slides...",
+		takesMinutes: "This may take a few minutes",
+		slidesFailed: "{n} slide(s) failed to generate",
+		retryFailed: "Retry failed",
+		slidesReady: "Slides ready",
+		nSlidesGenerated: "{n} slides generated",
+	},
+
+	stack: {
+		title: "PR Stacking",
+		subtitle: "Split into focused, reviewable PRs",
+		description: "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.",
+		maxPrs: "Max PRs",
+		startStacking: "Start Stacking",
+		partition: "Partition",
+		partitionDesc: "Assigning files to groups",
+		plan: "Plan",
+		planDesc: "Building stack plan",
+		execute: "Execute",
+		executeDesc: "Creating commits",
+		publish: "Publish",
+		publishDesc: "Pushing branches and creating draft PRs",
+		ready: "Ready",
+		published: "Published",
+		publishingInfo: "Uploading stack branches and opening draft PRs. Please wait until publish results appear below.",
+		publishAsDraft: "Publish as Draft PRs",
+		nPrs: "{n} PRs",
+		nFilesTotal: "{n} files total",
+		descriptionPreview: "Description Preview",
+		preparingPreview: "Preparing preview bodies...",
+		draftPublishResults: "Draft Publish Results",
+		nOfNCreated: "{created}/{total} created",
+		closeAll: "Close all",
+		closeDeleteBranches: "Close + delete branches",
+		confirmCloseAll: "Close all stacked draft PRs?",
+		confirmCloseDelete: "Close all stacked draft PRs and delete stack branches?",
+		noDraftPrUrls: "No draft PR URLs were returned.",
+		branchesPushedNotCreated: "Some branches were pushed but PR creation did not complete.",
+		envVars: "Environment Variables",
+		envVarsDesc: "Set env vars for quality gate scripts (e.g. NPM_TOKEN, CI tokens)",
+		addVariable: "Add variable",
+		treeEquivalenceVerified: "Tree equivalence verified",
+		verificationFailed: "Verification failed: {errors}",
+		qualityGate: "Quality gate",
+		qualityGateSkipped: "Quality gate skipped: {reason}",
+		qualityGateAllPassed: "all {n} groups passed",
+		qualityGatePartial: "{passed}/{total} groups passed",
+		groupsWithWarnings: "{n} group(s) with warnings (non-blocking)",
+	},
+
+	feasibility: {
+		feasible: "Feasible",
+		notFeasible: "Not feasible — dependency cycle",
+		unassignedFiles: "{n} unassigned file(s)",
+	},
+} as const;
+
+type DeepStringify<T> = { [K in keyof T]: T[K] extends string ? string : DeepStringify<T[K]> };
+export type Translations = DeepStringify<typeof en>;
+export type TranslationKeys = typeof en;

package/src/web/client/lib/i18n/index.ts

@@ -0,0 +1,3 @@
+export { I18nProvider, useI18n } from "./context.tsx";
+export type { Locale, TranslationKey } from "./context.tsx";
+export type { Translations, TranslationKeys } from "./en.ts";