newpr 1.0.27 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newpr",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "AI-powered large PR review tool - understand PRs with 1000+ lines of changes",
   "module": "src/cli/index.ts",
   "type": "module",

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

@@ -8,6 +8,7 @@ import type { GithubUser } from "../hooks/useGithubUser.ts";
 import { SettingsPanel } from "./SettingsPanel.tsx";
 import { ResizeHandle } from "./ResizeHandle.tsx";
 import { analytics } from "../lib/analytics.ts";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 type Theme = "light" | "dark" | "system";
 
@@ -28,22 +29,22 @@ const RISK_DOT: Record<string, string> = {
 	critical: "bg-red-600",
 };
 
-const STATE_LABEL: Record<string, { text: string; class: string }> = {
-	open: { text: "Open", class: "text-green-600 dark:text-green-400" },
-	merged: { text: "Merged", class: "text-purple-600 dark:text-purple-400" },
-	closed: { text: "Closed", class: "text-red-600 dark:text-red-400" },
-	draft: { text: "Draft", class: "text-neutral-500" },
+const STATE_CLASS: Record<string, string> = {
+	open: "text-green-600 dark:text-green-400",
+	merged: "text-purple-600 dark:text-purple-400",
+	closed: "text-red-600 dark:text-red-400",
+	draft: "text-neutral-500",
 };
 
-function formatTimeAgo(isoDate: string): string {
+function formatTimeAgo(isoDate: string, t: (key: TranslationKey, params?: Record<string, string | number>) => string): string {
 	const diff = Date.now() - new Date(isoDate).getTime();
 	const minutes = Math.floor(diff / 60000);
-	if (minutes < 1) return "just now";
-	if (minutes < 60) return `${minutes}m`;
+	if (minutes < 1) return t("time.justNow");
+	if (minutes < 60) return t("time.minutes", { n: minutes });
 	const hours = Math.floor(minutes / 60);
-	if (hours < 24) return `${hours}h`;
+	if (hours < 24) return t("time.hours", { n: hours });
 	const days = Math.floor(hours / 24);
-	return `${days}d`;
+	return t("time.days", { n: days });
 }
 
 interface RepoGroup {
@@ -78,8 +79,13 @@ function SessionList({
 	activeSessionId?: string | null;
 	onSessionSelect: (id: string) => void;
 }) {
+	const { t } = useI18n();
 	const groups = useMemo(() => groupByRepo(sessions), [sessions]);
 	const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+	const stateLabels: Record<string, string> = {
+		open: t("results.open"), merged: t("results.merged"),
+		closed: t("results.closed"), draft: t("results.draft"),
+	};
 
 	const toggle = useCallback((repo: string) => {
 		setCollapsed((prev) => {
@@ -92,7 +98,7 @@ function SessionList({
 	if (sessions.length === 0) {
 		return (
 			<div className="flex-1 overflow-y-auto px-2 flex flex-col items-center justify-center text-center gap-2 opacity-40">
-				<p className="text-[11px] text-muted-foreground">No analyses yet</p>
+				<p className="text-[11px] text-muted-foreground">{t("appShell.noAnalysesYet")}</p>
 			</div>
 		);
 	}
@@ -132,14 +138,14 @@ function SessionList({
 												</div>
 												<div className="flex items-center gap-1 mt-0.5 text-[10px] text-muted-foreground/40">
 													<span className="font-mono">#{s.pr_number}</span>
-													{s.pr_state && STATE_LABEL[s.pr_state] && (
+													{s.pr_state && STATE_CLASS[s.pr_state] && (
 														<>
 															<span className="text-muted-foreground/15">·</span>
-															<span className={STATE_LABEL[s.pr_state]!.class}>{STATE_LABEL[s.pr_state]!.text}</span>
+															<span className={STATE_CLASS[s.pr_state]!}>{stateLabels[s.pr_state]}</span>
 														</>
 													)}
 													<span className="text-muted-foreground/15">·</span>
-													<span>{formatTimeAgo(s.analyzed_at)}</span>
+													<span>{formatTimeAgo(s.analyzed_at, t)}</span>
 												</div>
 											</div>
 										</button>
@@ -187,6 +193,7 @@ export function AppShell({
 	onFeaturesChange?: () => void;
 	children: React.ReactNode;
 }) {
+	const { t } = useI18n();
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
 	const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
@@ -251,7 +258,7 @@ export function AppShell({
 						type="button"
 						onClick={onNewAnalysis}
 						className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/50 hover:bg-accent hover:text-foreground transition-colors"
-						title="New analysis"
+						title={t("appShell.newAnalysis")}
 					>
 						<Plus className="h-3.5 w-3.5" />
 					</button>
@@ -263,7 +270,7 @@ export function AppShell({
 							<div className="flex items-center gap-2">
 								<Loader2 className="h-3 w-3 animate-spin text-blue-500 shrink-0" />
 								<span className="text-[11px] text-blue-600 dark:text-blue-400">
-									Restarting...
+									{t("appShell.restarting")}
 								</span>
 							</div>
 						) : (
@@ -271,7 +278,7 @@ export function AppShell({
 								<div className="flex items-center gap-2 mb-2">
 									<Download className="h-3 w-3 text-blue-500 shrink-0" />
 									<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
-										v{update.latest} available
+										{t("appShell.versionAvailable", { version: update.latest ?? "" })}
 									</span>
 								</div>
 								<button
@@ -281,9 +288,9 @@ export function AppShell({
 									className="w-full flex items-center justify-center gap-1.5 rounded-md bg-blue-500 hover:bg-blue-600 text-white text-[11px] font-medium py-1.5 transition-colors disabled:opacity-50"
 								>
 									{update.updating ? (
-										<><Loader2 className="h-3 w-3 animate-spin" /> Updating...</>
+										<><Loader2 className="h-3 w-3 animate-spin" /> {t("appShell.updating")}</>
 									) : (
-										<><Download className="h-3 w-3" /> Update &amp; restart</>
+										<><Download className="h-3 w-3" /> {t("appShell.updateAndRestart")}</>
 									)}
 								</button>
 								{update.error && (
@@ -341,7 +348,7 @@ export function AppShell({
 						{chatLoading.map(({ sessionId: sid }) => (
 							<div key={sid} className="flex items-center gap-2 rounded-md px-2.5 py-1.5">
 								<Loader2 className="h-3 w-3 animate-spin text-blue-500/60 shrink-0" />
-								<span className="text-[11px] text-muted-foreground/50 truncate">Chat responding...</span>
+								<span className="text-[11px] text-muted-foreground/50 truncate">{t("appShell.chatResponding")}</span>
 							</div>
 						))}
 					</div>
@@ -368,7 +375,7 @@ export function AppShell({
 							type="button"
 							onClick={() => onThemeChange(next)}
 							className="flex items-center gap-1.5 px-1.5 py-1 rounded-md text-[11px] text-muted-foreground/50 hover:text-foreground hover:bg-accent/40 transition-colors"
-							title={`Switch to ${next} mode`}
+							title={t("appShell.switchToMode", { mode: next })}
 						>
 							<Icon className="h-3 w-3" />
 							<span className="capitalize">{theme}</span>
@@ -378,7 +385,7 @@ export function AppShell({
 							type="button"
 							onClick={() => { analytics.settingsOpened(); setSettingsOpen(true); }}
 							className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:bg-accent/40 hover:text-foreground transition-colors"
-							title="Settings"
+							title={t("appShell.settings")}
 						>
 							<Settings className="h-3 w-3" />
 						</button>

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

@@ -5,6 +5,7 @@ import { Markdown } from "./Markdown.tsx";
 import { TipTapEditor, getTextWithAnchors, type AnchorItem, type CommandItem } from "./TipTapEditor.tsx";
 import type { useEditor } from "@tiptap/react";
 import { useChatStore } from "../hooks/useChatStore.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 export interface ChatState {
 	messages: ChatMessage[];
@@ -39,11 +40,12 @@ function formatDuration(ms: number): string {
 }
 
 function CompletionFooter({ durationMs }: { durationMs: number }) {
+	const { t } = useI18n();
 	return (
 		<div className="flex items-center gap-1.5 mt-1.5 animate-in fade-in duration-300">
 			<Check className="h-3 w-3 text-emerald-500/70" />
 			<span className="text-[10px] text-muted-foreground/40">
-				Done · {formatDuration(durationMs)}
+				{t("chat.done")} · {formatDuration(durationMs)}
 			</span>
 		</div>
 	);
@@ -99,6 +101,7 @@ function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick
 	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
 	activeId?: string | null;
 }) {
+	const { t } = useI18n();
 	const hasContent = segments.some((s) => s.type === "text" && s.content);
 
 	return (
@@ -124,7 +127,7 @@ function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick
 				<div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-accent/40 text-[11px] text-muted-foreground/50">
 					<Loader2 className="h-2.5 w-2.5 animate-spin" />
 					{activeToolName === "thinking" ? (
-						<span>Thinking…</span>
+						<span>{t("chat.thinking")}</span>
 					) : (
 						<span className="font-mono">{activeToolName}</span>
 					)}
@@ -145,6 +148,7 @@ function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick
 
 function CompactSummary({ message }: { message: ChatMessage }) {
 	const [expanded, setExpanded] = useState(false);
+	const { t } = useI18n();
 	return (
 		<div className="rounded-lg border border-dashed bg-muted/30 px-3 py-2">
 			<button
@@ -154,7 +158,7 @@ function CompactSummary({ message }: { message: ChatMessage }) {
 			>
 				<FoldVertical className="h-3 w-3 text-muted-foreground/40 shrink-0" />
 				<span className="text-[10px] text-muted-foreground/50 flex-1">
-					{message.compactedCount ? `${message.compactedCount} messages compacted` : "Conversation compacted"}
+					{message.compactedCount ? t("chat.messagesCompacted", { count: message.compactedCount }) : t("chat.conversationCompacted")}
 				</span>
 				{expanded ? (
 					<ChevronDown className="h-3 w-3 text-muted-foreground/30 shrink-0" />
@@ -180,6 +184,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 	const isNearBottomRef = useRef(true);
 	const mainElRef = useRef<HTMLElement | null>(null);
 	const scrollListenerRef = useRef<(() => void) | null>(null);
+	const { t } = useI18n();
 
 	useEffect(() => {
 		if (scrollListenerRef.current) return;
@@ -215,8 +220,8 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 	if (!hasMessages && loaded) {
 		return (
 			<div className="border-t mt-6 pt-6 text-center">
-				<p className="text-[11px] text-muted-foreground/40">Ask anything about this PR</p>
-				<p className="text-[10px] text-muted-foreground/20 mt-1">@ to reference files · / for commands</p>
+				<p className="text-[11px] text-muted-foreground/40">{t("chat.askAnything")}</p>
+				<p className="text-[10px] text-muted-foreground/20 mt-1">{t("chat.refAndCmds")}</p>
 			</div>
 		);
 	}
@@ -227,7 +232,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 
 	return (
 		<div ref={containerRef} className="border-t mt-6 pt-5 space-y-5">
-			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">Chat</div>
+			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">{t("chat.title")}</div>
 			{messages.map((msg, i) => {
 				if (msg.isCompactSummary) {
 					return <CompactSummary key={`compact-${i}`} message={msg} />;
@@ -239,7 +244,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 					divider = (
 						<div className="flex items-center gap-2 py-1">
 							<div className="flex-1 h-px bg-yellow-500/20" />
-							<span className="text-[10px] text-yellow-600/60 dark:text-yellow-400/50 shrink-0">Previous analysis</span>
+							<span className="text-[10px] text-yellow-600/60 dark:text-yellow-400/50 shrink-0">{t("chat.previousAnalysis")}</span>
 							<div className="flex-1 h-px bg-yellow-500/20" />
 						</div>
 					);
@@ -294,6 +299,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 export function ChatInput() {
 	const ctx = useContext(ChatContext);
 	const editorRef = useRef<ReturnType<typeof useEditor>>(null);
+	const { t } = useI18n();
 
 	const handleSubmit = useCallback(() => {
 		if (!ctx) return;
@@ -304,8 +310,8 @@ export function ChatInput() {
 	}, [ctx]);
 
 	const chatCommands = useMemo<CommandItem[]>(() => [
-		{ id: "undo", label: "/undo", description: "Remove last exchange" },
-	], []);
+		{ id: "undo", label: t("chat.undoLabel"), description: t("chat.undoDesc") },
+	], [t]);
 
 	if (!ctx) return null;
 	const { loading } = ctx.state;
@@ -317,7 +323,7 @@ export function ChatInput() {
 				<div className="relative rounded-xl border bg-background px-4 py-2.5 pr-12 focus-within:border-foreground/15 focus-within:shadow-sm transition-all">
 					<TipTapEditor
 						editorRef={editorRef}
-						placeholder="Ask about this PR..."
+						placeholder={t("chat.askAboutPr")}
 						disabled={loading}
 						submitOnEnter
 						onSubmit={handleSubmit}
@@ -340,10 +346,10 @@ export function ChatInput() {
 				</div>
 				<div className="flex items-center justify-between mt-1.5 px-1">
 					<span className="text-[10px] text-muted-foreground/25">
-						@ to reference · / for commands
+						{t("chat.atToRef")}
 					</span>
 					<span className="text-[10px] text-muted-foreground/25">
-						Enter to send
+						{t("chat.enterToSend")}
 					</span>
 				</div>
 			</div>

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { Plus, Pencil, Trash2, ArrowRight, X, Loader2, AlertCircle } from "lucide-react";
 import type { FileGroup, FileChange, FileStatus } from "../../../types/output.ts";
 import { DiffViewer } from "./DiffViewer.tsx";
+import { useI18n } from "../lib/i18n/index.ts";
 
 export interface DetailTarget {
 	kind: "group" | "file" | "line";
@@ -117,6 +118,7 @@ function FileDetail({
 	const Icon = STATUS_ICON[file.status];
 	const { patch, loading, error, fetchPatch } = usePatchFetcher(sessionId, file.path);
 	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const { t } = useI18n();
 
 	useEffect(() => {
 		if (sessionId && !patch && !loading && !error) {
@@ -146,7 +148,7 @@ function FileDetail({
 				{loading && (
 					<div className="flex items-center justify-center py-16 gap-2">
 						<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground/40" />
-						<span className="text-sm text-muted-foreground/50">Loading diff</span>
+						<span className="text-sm text-muted-foreground/50">{t("detail.loadingDiff")}</span>
 					</div>
 				)}
 				{error && (
@@ -160,7 +162,7 @@ function FileDetail({
 						onClick={fetchPatch}
 						className="text-xs text-muted-foreground/50 hover:text-foreground transition-colors"
 						>
-							Retry
+							{t("common.retry")}
 						</button>
 					</div>
 				)}
@@ -193,6 +195,8 @@ export function DetailPane({
 }) {
 	if (!target) return null;
 
+	const { t } = useI18n();
+
 	if (target.kind === "group" && target.group) {
 		const g = target.group;
 		const totalAdd = target.files.reduce((s, f) => s + f.additions, 0);
@@ -218,7 +222,7 @@ export function DetailPane({
 
 					{g.key_changes && g.key_changes.length > 0 && (
 						<div>
-							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-2">Key Changes</div>
+							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-2">{t("detail.keyChanges")}</div>
 							<ul className="space-y-1.5">
 								{g.key_changes.map((change, i) => (
 									<li key={i} className="flex gap-2 text-[11px] text-muted-foreground/70 leading-relaxed">
@@ -232,14 +236,14 @@ export function DetailPane({
 
 					{g.risk && (
 						<div>
-							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1.5">Risk</div>
+							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1.5">{t("detail.risk")}</div>
 							<p className="text-[11px] text-muted-foreground/60 leading-relaxed">{g.risk}</p>
 						</div>
 					)}
 
 					{g.dependencies && g.dependencies.length > 0 && (
 						<div>
-							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1.5">Dependencies</div>
+							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1.5">{t("detail.dependencies")}</div>
 							<div className="flex flex-wrap gap-1.5">
 								{g.dependencies.map((dep) => (
 									<span key={dep} className="text-[10px] px-1.5 py-0.5 rounded-md bg-accent/60 text-muted-foreground/60">{dep}</span>
@@ -250,7 +254,7 @@ export function DetailPane({
 
 					<div>
 						<div className="flex items-center gap-2 mb-2.5">
-							<span className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">{target.files.length} files</span>
+							<span className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">{t("detail.nFiles", { n: target.files.length })}</span>
 							<span className="text-[10px] tabular-nums text-green-600 dark:text-green-400">+{totalAdd}</span>
 							<span className="text-[10px] tabular-nums text-red-600 dark:text-red-400">-{totalDel}</span>
 						</div>

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

@@ -1,58 +1,31 @@
 import { useState } from "react";
 import { AlertCircle, RotateCcw, ArrowLeft } from "lucide-react";
 import { Button } from "../../components/ui/button.tsx";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
-function categorizeError(message: string): { title: string; hint: string; retryable: boolean } {
+function categorizeError(message: string): { titleKey: TranslationKey; hintKey: TranslationKey; retryable: boolean } {
 	const lower = message.toLowerCase();
 
 	if (lower.includes("rate limit") || lower.includes("429")) {
-		return {
-			title: "Rate limit reached",
-			hint: "The API rate limit has been exceeded. Wait a moment before retrying.",
-			retryable: true,
-		};
+		return { titleKey: "error.rateLimitTitle", hintKey: "error.rateLimitHint", retryable: true };
 	}
 	if (lower.includes("timeout") || lower.includes("timed out")) {
-		return {
-			title: "Request timed out",
-			hint: "The analysis took too long. This can happen with very large PRs.",
-			retryable: true,
-		};
+		return { titleKey: "error.timeoutTitle", hintKey: "error.timeoutHint", retryable: true };
 	}
 	if (lower.includes("network") || lower.includes("fetch") || lower.includes("econnrefused")) {
-		return {
-			title: "Connection failed",
-			hint: "Could not reach the server. Check your network connection.",
-			retryable: true,
-		};
+		return { titleKey: "error.networkTitle", hintKey: "error.networkHint", retryable: true };
 	}
 	if (lower.includes("401") || lower.includes("unauthorized") || lower.includes("token")) {
-		return {
-			title: "Authentication error",
-			hint: "Your GitHub token may be expired or invalid. Run `newpr auth` to reconfigure.",
-			retryable: false,
-		};
+		return { titleKey: "error.authTitle", hintKey: "error.authHint", retryable: false };
 	}
 	if (lower.includes("404") || lower.includes("not found")) {
-		return {
-			title: "PR not found",
-			hint: "The pull request could not be found. Check the URL and make sure you have access.",
-			retryable: false,
-		};
+		return { titleKey: "error.notFoundTitle", hintKey: "error.notFoundHint", retryable: false };
 	}
 	if (lower.includes("openrouter") || lower.includes("api key")) {
-		return {
-			title: "API key error",
-			hint: "Your OpenRouter API key may be missing or invalid. Set OPENROUTER_API_KEY in your environment.",
-			retryable: false,
-		};
+		return { titleKey: "error.apiKeyTitle", hintKey: "error.apiKeyHint", retryable: false };
 	}
 
-	return {
-		title: "Analysis failed",
-		hint: "Something went wrong during the analysis.",
-		retryable: true,
-	};
+	return { titleKey: "error.defaultTitle", hintKey: "error.defaultHint", retryable: true };
 }
 
 export function ErrorScreen({
@@ -65,7 +38,8 @@ export function ErrorScreen({
 	onBack: () => void;
 }) {
 	const [retrying, setRetrying] = useState(false);
-	const { title, hint, retryable } = categorizeError(error);
+	const { t } = useI18n();
+	const { titleKey, hintKey, retryable } = categorizeError(error);
 
 	function handleRetry() {
 		if (!onRetry) return;
@@ -81,9 +55,9 @@ export function ErrorScreen({
 				</div>
 
 				<div className="flex flex-col items-center gap-2 text-center">
-					<h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+					<h2 className="text-lg font-semibold tracking-tight">{t(titleKey)}</h2>
 					<p className="text-base text-muted-foreground leading-relaxed max-w-sm">
-						{hint}
+						{t(hintKey)}
 					</p>
 				</div>
 
@@ -101,7 +75,7 @@ export function ErrorScreen({
 							size="default"
 						>
 							<RotateCcw className={`mr-2 h-3.5 w-3.5 ${retrying ? "animate-spin" : ""}`} />
-							{retrying ? "Retrying..." : "Try again"}
+							{retrying ? t("common.retrying") : t("common.tryAgain")}
 						</Button>
 					)}
 					<Button
@@ -110,7 +84,7 @@ export function ErrorScreen({
 						size="default"
 					>
 						<ArrowLeft className="mr-2 h-3.5 w-3.5" />
-						Back
+						{t("common.back")}
 					</Button>
 				</div>
 			</div>

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

@@ -1,15 +1,17 @@
 import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";
 import { useState } from "react";
 import type { FeasibilityResult } from "../../../stack/types.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 export function FeasibilityAlert({ result }: { result: FeasibilityResult }) {
 	const [expanded, setExpanded] = useState(false);
+	const { t } = useI18n();
 
 	if (result.feasible) {
 		return (
 			<div className="flex items-center gap-2 px-3 py-2 rounded-md bg-green-500/[0.04]">
 				<CheckCircle2 className="h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" />
-				<span className="text-[11px] text-green-700/70 dark:text-green-300/70 font-medium">Feasible</span>
+				<span className="text-[11px] text-green-700/70 dark:text-green-300/70 font-medium">{t("feasibility.feasible")}</span>
 				{result.ordered_group_ids && (
 					<span className="text-[10px] text-muted-foreground/25 truncate">
 						{result.ordered_group_ids.join(" → ")}
@@ -30,7 +32,7 @@ export function FeasibilityAlert({ result }: { result: FeasibilityResult }) {
 			>
 				<XCircle className="h-3.5 w-3.5 text-red-500/60 shrink-0" />
 				<span className="text-[11px] text-red-600/80 dark:text-red-400/80 font-medium flex-1">
-					Not feasible — dependency cycle
+					{t("feasibility.notFeasible")}
 				</span>
 				{hasCycleDetails && (
 					<ChevronRight className={`h-3 w-3 text-red-500/30 shrink-0 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`} />
@@ -56,7 +58,7 @@ export function FeasibilityAlert({ result }: { result: FeasibilityResult }) {
 
 			{result.unassigned_paths && result.unassigned_paths.length > 0 && (
 				<p className="text-[10px] text-red-500/40 pl-5.5">
-					{result.unassigned_paths.length} unassigned file(s)
+					{t("feasibility.unassignedFiles", { n: result.unassigned_paths.length })}
 				</p>
 			)}
 		</div>

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

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { CornerDownLeft, GitPullRequest, ExternalLink, ChevronUp } from "lucide-react";
 import type { SessionRecord } from "../../../history/types.ts";
 import { analytics } from "../lib/analytics.ts";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 interface ToolStatus {
 	name: string;
@@ -23,16 +24,16 @@ const RISK_DOT: Record<string, string> = {
 	critical: "bg-red-600",
 };
 
-function timeAgo(date: string): string {
+function timeAgo(date: string, t: (key: TranslationKey, params?: Record<string, string | number>) => string): string {
 	const s = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
-	if (s < 60) return "just now";
+	if (s < 60) return t("time.justNow");
 	const m = Math.floor(s / 60);
-	if (m < 60) return `${m}m ago`;
+	if (m < 60) return t("time.minutesAgo", { n: m });
 	const h = Math.floor(m / 60);
-	if (h < 24) return `${h}h ago`;
+	if (h < 24) return t("time.hoursAgo", { n: h });
 	const d = Math.floor(h / 24);
-	if (d < 30) return `${d}d ago`;
-	return `${Math.floor(d / 30)}mo ago`;
+	if (d < 30) return t("time.daysAgo", { n: d });
+	return t("time.monthsAgo", { n: Math.floor(d / 30) });
 }
 
 function StatusDot({ ok, optional }: { ok: boolean; optional?: boolean }) {
@@ -42,6 +43,7 @@ function StatusDot({ ok, optional }: { ok: boolean; optional?: boolean }) {
 }
 
 function CompactStatus({ data }: { data: PreflightData }) {
+	const { t } = useI18n();
 	const [open, setOpen] = useState(false);
 	const gh = data.github;
 	const allOk = gh.installed && gh.authenticated && data.openrouterKey;
@@ -53,7 +55,7 @@ function CompactStatus({ data }: { data: PreflightData }) {
 				className="flex items-center gap-1.5 hover:opacity-70 transition-opacity"
 			>
 				<StatusDot ok={allOk} />
-				<span className="text-[10px] font-mono text-muted-foreground/30">status</span>
+				<span className="text-[10px] font-mono text-muted-foreground/30">{t("input.status")}</span>
 				<ChevronUp className={`h-2.5 w-2.5 text-muted-foreground/20 transition-transform ${open ? "" : "rotate-180"}`} />
 			</button>
 			{open && (
@@ -94,6 +96,7 @@ export function InputScreen({
 	onSessionSelect?: (id: string) => void;
 	version?: string;
 }) {
+	const { t } = useI18n();
 	const [value, setValue] = useState("");
 	const [focused, setFocused] = useState(false);
 	const [preflight, setPreflight] = useState<PreflightData | null>(null);
@@ -126,9 +129,9 @@ export function InputScreen({
 							</span>
 						)}
 					</div>
-					<p className="text-base text-muted-foreground/50">
-						Turn PRs into navigable stories
-					</p>
+				<p className="text-base text-muted-foreground/50">
+					{t("input.tagline")}
+				</p>
 				</div>
 
 				<div>
@@ -157,7 +160,7 @@ export function InputScreen({
 						</div>
 						<div className="flex justify-center mt-2.5">
 							<span className="text-[10px] text-muted-foreground/20 font-mono">
-								↵ Enter to analyze
+								{t("input.enterToAnalyze")}
 							</span>
 						</div>
 					</form>
@@ -168,9 +171,9 @@ export function InputScreen({
 
 				{recents.length > 0 && (
 					<div className="space-y-3">
-						<div className="text-[10px] font-medium text-muted-foreground/25 uppercase tracking-[0.15em] text-center">
-							Recent
-						</div>
+					<div className="text-[10px] font-medium text-muted-foreground/25 uppercase tracking-[0.15em] text-center">
+						{t("input.recent")}
+					</div>
 						<div className="space-y-px">
 							{recents.map((s) => (
 								<button
@@ -189,7 +192,7 @@ export function InputScreen({
 										<span className="font-mono">{s.repo.split("/").pop()}</span>
 										<span className="font-mono">#{s.pr_number}</span>
 										<span className="text-muted-foreground/15">·</span>
-										<span>{timeAgo(s.analyzed_at)}</span>
+										<span>{timeAgo(s.analyzed_at, t)}</span>
 									</div>
 								</button>
 							))}
@@ -211,6 +214,7 @@ export function InputScreen({
 const SIONIC_HERO_BG = "https://www.sionic.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmain-intro-bg.1455295d.png&w=1920&q=75";
 
 function SponsorBanner() {
+	const { t } = useI18n();
 	return (
 		<a
 			href="https://www.sionic.ai"
@@ -234,11 +238,11 @@ function SponsorBanner() {
 				/>
 				<div className="h-3 w-px bg-white/15 shrink-0" />
 				<span className="text-[10px] text-white/45 truncate">
-					The Power of AI for Every Business
+					{t("input.sponsorTagline")}
 				</span>
 			</div>
 			<div className="relative flex items-center gap-1.5 shrink-0">
-				<span className="text-[8px] text-white/20 uppercase tracking-widest">Ad</span>
+				<span className="text-[8px] text-white/20 uppercase tracking-widest">{t("input.ad")}</span>
 				<ExternalLink className="h-2.5 w-2.5 text-white/15 group-hover:text-white/40 transition-colors" />
 			</div>
 		</a>