newpr 1.0.26 → 1.0.28

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

@@ -0,0 +1,274 @@
+import type { Translations } from "./en.ts";
+
+export const ko: Translations = {
+	common: {
+		close: "닫기",
+		cancel: "취소",
+		save: "저장",
+		retry: "재시도",
+		tryAgain: "다시 시도",
+		back: "뒤로",
+		submit: "제출",
+		download: "다운로드",
+		regenerate: "재생성",
+		generate: "생성",
+		enabled: "사용",
+		disabled: "사용 안함",
+		refresh: "새로고침",
+		retrying: "재시도 중...",
+	},
+
+	time: {
+		justNow: "방금",
+		minutes: "{n}분",
+		minutesAgo: "{n}분 전",
+		hours: "{n}시간",
+		hoursAgo: "{n}시간 전",
+		days: "{n}일",
+		daysAgo: "{n}일 전",
+		monthsAgo: "{n}개월 전",
+	},
+
+	appShell: {
+		noAnalysesYet: "분석 기록 없음",
+		newAnalysis: "새 분석",
+		restarting: "재시작 중...",
+		versionAvailable: "v{version} 사용 가능",
+		updating: "업데이트 중...",
+		updateAndRestart: "업데이트 및 재시작",
+		chatResponding: "채팅 응답 중...",
+		switchToMode: "{mode} 모드로 전환",
+		settings: "설정",
+	},
+
+	input: {
+		tagline: "PR을 읽기 쉬운 스토리로",
+		enterToAnalyze: "↵ Enter로 분석 시작",
+		status: "상태",
+		recent: "최근",
+		placeholder: "https://github.com/owner/repo/pull/123",
+		sponsorTagline: "The Power of AI for Every Business",
+		ad: "광고",
+	},
+
+	settings: {
+		title: "설정",
+		authentication: "인증",
+		openrouterApiKey: "OpenRouter API Key",
+		githubToken: "GitHub Token",
+		configured: "설정됨",
+		notSet: "미설정",
+		notDetected: "감지되지 않음",
+		change: "변경",
+		set: "설정",
+		ghCli: "gh CLI",
+		model: "Model",
+		llm: "LLM",
+		setApiKeyFirst: "API Key를 먼저 설정하세요",
+		agent: "Agent",
+		language: "Language",
+		autoDetect: "자동 감지",
+		limits: "제한",
+		maxFiles: "최대 파일 수",
+		timeout: "Timeout",
+		seconds: "초",
+		concurrency: "Concurrency",
+		customPrompt: "Custom Prompt",
+		customPromptDesc: "PR 분석에 적용될 추가 지침입니다. 모든 분석 단계에 적용됩니다.",
+		customPromptPlaceholder: "예: 보안 취약점과 성능 이슈에 집중해주세요. 스타일 변경은 무시해주세요.",
+		cmdEnterToSave: "Cmd+Enter로 저장하거나 바깥을 클릭하세요",
+		plugins: "Plugins",
+		privacy: "개인정보",
+		usageAnalytics: "Usage Analytics",
+		searchModels: "모델 검색...",
+		noModelsFound: "모델을 찾을 수 없습니다",
+		uiLanguage: "UI Language",
+		interface: "인터페이스",
+	},
+
+	review: {
+		submitReview: "Review 제출",
+		approve: "Approve",
+		requestChanges: "Request Changes",
+		comment: "Comment",
+		approveDesc: "이 PR을 승인합니다",
+		requestChangesDesc: "반드시 수정해야 할 피드백을 제출합니다",
+		commentDesc: "일반 피드백을 제출합니다",
+		reviewSubmitted: "Review가 제출되었습니다",
+		viewOnGithub: "GitHub에서 보기",
+		message: "메시지",
+		optionalMessage: "선택 사항...",
+		describeChanges: "필요한 변경 사항을 설명해주세요...",
+		ctrlEnterToSubmit: "{key}+Enter로 제출",
+	},
+
+	loading: {
+		fetching: "PR 데이터 가져오기",
+		parsing: "변경 내역 분석",
+		cloning: "리포지토리 복제",
+		checkout: "브랜치 체크아웃",
+		exploring: "코드베이스 탐색",
+		analyzing: "파일 분석",
+		grouping: "변경 그룹화",
+		summarizing: "요약 생성",
+		narrating: "내러티브 작성",
+		done: "완료",
+	},
+
+	error: {
+		rateLimitTitle: "요청 제한 초과",
+		rateLimitHint: "API 요청 제한이 초과되었습니다. 잠시 후 다시 시도해주세요.",
+		timeoutTitle: "요청 시간 초과",
+		timeoutHint: "분석 시간이 초과되었습니다. 매우 큰 PR에서 발생할 수 있습니다.",
+		networkTitle: "연결 실패",
+		networkHint: "서버에 연결할 수 없습니다. 네트워크 연결을 확인해주세요.",
+		authTitle: "인증 오류",
+		authHint: "GitHub 토큰이 만료되었거나 유효하지 않을 수 있습니다. `newpr auth`로 재설정해주세요.",
+		notFoundTitle: "PR을 찾을 수 없음",
+		notFoundHint: "PR을 찾을 수 없습니다. URL을 확인하고 접근 권한이 있는지 확인해주세요.",
+		apiKeyTitle: "API Key 오류",
+		apiKeyHint: "OpenRouter API Key가 없거나 유효하지 않을 수 있습니다. 환경 변수에 OPENROUTER_API_KEY를 설정해주세요.",
+		defaultTitle: "분석 실패",
+		defaultHint: "분석 중 오류가 발생했습니다.",
+		unknownError: "알 수 없는 오류가 발생했습니다",
+	},
+
+	chat: {
+		title: "채팅",
+		askAnything: "이 PR에 대해 무엇이든 물어보세요",
+		refAndCmds: "@로 파일 참조 · /로 명령어",
+		askAboutPr: "이 PR에 대해 질문하세요...",
+		atToRef: "@로 참조 · /로 명령어",
+		enterToSend: "Enter로 전송",
+		previousAnalysis: "이전 분석",
+		messagesCompacted: "{count}개의 메시지가 압축됨",
+		conversationCompacted: "대화가 압축됨",
+		thinking: "생각 중…",
+		done: "완료",
+		undoLabel: "/undo",
+		undoDesc: "마지막 대화 삭제",
+	},
+
+	results: {
+		open: "Open",
+		merged: "Merged",
+		closed: "Closed",
+		draft: "Draft",
+		story: "스토리",
+		discussion: "토론",
+		groups: "그룹",
+		files: "파일",
+		stack: "스택",
+		slides: "슬라이드",
+		comic: "만화",
+		review: "리뷰",
+		nFiles: "{n}개 파일",
+		prUpdated: "이 분석이 생성된 이후 PR이 업데이트되었습니다.",
+		reAnalyze: "재분석",
+	},
+
+	detail: {
+		keyChanges: "주요 변경 사항",
+		risk: "위험도",
+		dependencies: "의존성",
+		nFiles: "{n}개 파일",
+		loadingDiff: "변경 내역 불러오는 중",
+	},
+
+	story: {
+		scope: "범위",
+		impact: "영향",
+		walkthrough: "상세 설명",
+	},
+
+	discussion: {
+		noSession: "세션을 사용할 수 없습니다",
+		loadingDiscussion: "토론 불러오는 중",
+		description: "설명",
+		comments: "댓글",
+		noContent: "설명 또는 댓글이 없습니다",
+	},
+
+	groups: {
+		nGroups: "{n}개 그룹",
+	},
+
+	files: {
+		nFiles: "{n}개 파일",
+		tree: "트리",
+		groups: "그룹",
+		changes: "변경 사항",
+		ungrouped: "미분류",
+	},
+
+	cartoon: {
+		title: "만화 스트립",
+		description: "이 PR의 주요 변경 사항을 시각화하는 4컷 만화를 생성합니다. Gemini 기반.",
+		generating: "만화 생성 중...",
+		takesTime: "10-30초 소요될 수 있습니다",
+		failed: "생성 실패",
+		altText: "PR 4컷 만화",
+	},
+
+	slides: {
+		title: "슬라이드 덱",
+		description: "이 PR을 팀에 설명하는 프레젠테이션을 생성합니다. 슬라이드 수는 PR 복잡성에 따라 자동으로 결정됩니다.",
+		generateSlides: "슬라이드 생성",
+		failed: "생성 실패",
+		starting: "시작 중...",
+		resuming: "실패한 슬라이드 재생성 중...",
+		takesMinutes: "몇 분 소요될 수 있습니다",
+		slidesFailed: "{n}개 슬라이드 생성 실패",
+		retryFailed: "실패 항목 재시도",
+		slidesReady: "슬라이드 완료",
+		nSlidesGenerated: "{n}개 슬라이드 생성됨",
+	},
+
+	stack: {
+		title: "PR 스태킹",
+		subtitle: "집중적이고 리뷰 가능한 PR로 분할",
+		description: "분석 그룹을 기반으로 이 PR을 더 작은 초안 PR 스택으로 자동 분할합니다. 각 그룹은 적절한 의존성 순서로 독립된 PR이 됩니다.",
+		maxPrs: "최대 PR 수",
+		startStacking: "스태킹 시작",
+		partition: "파티션",
+		partitionDesc: "파일을 그룹에 할당 중",
+		plan: "계획",
+		planDesc: "스택 계획 수립 중",
+		execute: "실행",
+		executeDesc: "커밋 생성 중",
+		publish: "배포",
+		publishDesc: "브랜치 푸시 및 초안 PR 생성 중",
+		ready: "준비 완료",
+		published: "배포됨",
+		publishingInfo: "스택 브랜치를 업로드하고 초안 PR을 생성 중입니다. 아래에 결과가 나타날 때까지 기다려주세요.",
+		publishAsDraft: "초안 PR로 배포",
+		nPrs: "{n}개 PR",
+		nFilesTotal: "총 {n}개 파일",
+		descriptionPreview: "설명 미리보기",
+		preparingPreview: "미리보기 본문 준비 중...",
+		draftPublishResults: "초안 PR 배포 결과",
+		nOfNCreated: "{created}/{total} 생성됨",
+		closeAll: "모두 닫기",
+		closeDeleteBranches: "닫기 + 브랜치 삭제",
+		confirmCloseAll: "모든 스택 초안 PR을 닫으시겠습니까?",
+		confirmCloseDelete: "모든 스택 초안 PR을 닫고 브랜치를 삭제하시겠습니까?",
+		noDraftPrUrls: "초안 PR URL이 반환되지 않았습니다.",
+		branchesPushedNotCreated: "일부 브랜치가 푸시되었지만 PR 생성이 완료되지 않았습니다.",
+		envVars: "환경 변수",
+		envVarsDesc: "품질 게이트 스크립트를 위한 환경 변수 설정 (예: NPM_TOKEN, CI 토큰)",
+		addVariable: "변수 추가",
+		treeEquivalenceVerified: "트리 동등성 확인됨",
+		verificationFailed: "검증 실패: {errors}",
+		qualityGate: "Quality Gate",
+		qualityGateSkipped: "Quality Gate 건너뜀: {reason}",
+		qualityGateAllPassed: "모든 {n}개 그룹 통과",
+		qualityGatePartial: "{passed}/{total}개 그룹 통과",
+		groupsWithWarnings: "{n}개 그룹 경고 (비차단)",
+	},
+
+	feasibility: {
+		feasible: "실행 가능",
+		notFeasible: "실행 불가 — 순환 의존성",
+		unassignedFiles: "{n}개 미할당 파일",
+	},
+};

package/src/web/client/main.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App.tsx";
+import { I18nProvider } from "./lib/i18n/index.ts";
 
 const el = document.getElementById("root");
 if (el) {
 	createRoot(el).render(
 		<React.StrictMode>
-			<App />
+			<I18nProvider>
+				<App />
+			</I18nProvider>
 		</React.StrictMode>,
 	);
 }

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

@@ -1,11 +1,13 @@
 import { useState, useEffect, useCallback } from "react";
 import { Loader2, Sparkles, RefreshCw, Download, AlertCircle } from "lucide-react";
 import type { NewprOutput } from "../../../types/output.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId?: string | null }) {
 	const [state, setState] = useState<"idle" | "loading" | "done" | "error">("idle");
 	const [imageUrl, setImageUrl] = useState<string | null>(null);
 	const [error, setError] = useState<string | null>(null);
+	const { t } = useI18n();
 
 	useEffect(() => {
 		if (data.cartoon) {
@@ -61,9 +63,9 @@ export function CartoonPanel({ 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">Comic Strip</h3>
+						<h3 className="text-xs font-medium">{t("cartoon.title")}</h3>
 						<p className="text-[11px] text-muted-foreground/60 leading-relaxed">
-							Generate a 4-panel comic strip that visualizes the key changes in this PR. Powered by Gemini.
+							{t("cartoon.description")}
 						</p>
 					</div>
 					<button
@@ -72,7 +74,7 @@ export function CartoonPanel({ 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"
 					>
 						<Sparkles className="h-3.5 w-3.5" />
-						Generate
+						{t("common.generate")}
 					</button>
 				</div>
 			</div>
@@ -86,8 +88,8 @@ export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId
 					<div className="aspect-[4/3] rounded-lg border border-dashed border-border/60 flex flex-col items-center justify-center gap-3">
 						<Loader2 className="h-5 w-5 animate-spin text-muted-foreground/40" />
 						<div className="text-center space-y-1">
-							<p className="text-xs text-muted-foreground/60">Generating comic...</p>
-							<p className="text-[10px] text-muted-foreground/30">This may take 10-30 seconds</p>
+							<p className="text-xs text-muted-foreground/60">{t("cartoon.generating")}</p>
+							<p className="text-[10px] text-muted-foreground/30">{t("cartoon.takesTime")}</p>
 						</div>
 					</div>
 				</div>
@@ -102,7 +104,7 @@ export function CartoonPanel({ 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("cartoon.failed")}</p>
 							<p className="text-[11px] text-destructive/70 break-words">{error}</p>
 						</div>
 					</div>
@@ -112,7 +114,7 @@ export function CartoonPanel({ 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>
@@ -125,7 +127,7 @@ export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId
 				<div className="rounded-lg border overflow-hidden">
 					<img
 						src={imageUrl}
-						alt="PR 4-panel comic"
+						alt={t("cartoon.altText")}
 						className="w-full"
 					/>
 				</div>
@@ -137,7 +139,7 @@ export function CartoonPanel({ 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"
@@ -145,7 +147,7 @@ export function CartoonPanel({ 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/DiscussionPanel.tsx

@@ -2,21 +2,22 @@ import { useState, useEffect, useCallback } from "react";
 import { Markdown } from "../components/Markdown.tsx";
 import { RefreshCw, ExternalLink, AlertCircle, Loader2 } from "lucide-react";
 import type { PrComment } from "../../../types/github.ts";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 interface DiscussionData {
 	body: string;
 	comments: PrComment[];
 }
 
-function timeAgo(dateStr: string): string {
+function timeAgo(dateStr: string, t: (key: TranslationKey, params?: Record<string, string | number>) => string): string {
 	const diff = Date.now() - new Date(dateStr).getTime();
 	const mins = Math.floor(diff / 60_000);
-	if (mins < 1) return "just now";
-	if (mins < 60) return `${mins}m ago`;
+	if (mins < 1) return t("time.justNow");
+	if (mins < 60) return t("time.minutesAgo", { n: mins });
 	const hours = Math.floor(mins / 60);
-	if (hours < 24) return `${hours}h ago`;
+	if (hours < 24) return t("time.hoursAgo", { n: hours });
 	const days = Math.floor(hours / 24);
-	if (days < 30) return `${days}d ago`;
+	if (days < 30) return t("time.daysAgo", { n: days });
 	return new Date(dateStr).toLocaleDateString();
 }
 
@@ -24,6 +25,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 	const [data, setData] = useState<DiscussionData | null>(null);
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
+	const { t } = useI18n();
 
 	const fetchDiscussion = useCallback(async () => {
 		if (!sessionId) return;
@@ -53,7 +55,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 	if (!sessionId) {
 		return (
 			<div className="flex flex-col items-center justify-center py-20">
-				<p className="text-sm text-muted-foreground/50">No session available</p>
+				<p className="text-sm text-muted-foreground/50">{t("discussion.noSession")}</p>
 			</div>
 		);
 	}
@@ -62,7 +64,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 		return (
 			<div className="flex items-center justify-center py-20 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 discussion</span>
+				<span className="text-sm text-muted-foreground/50">{t("discussion.loadingDiscussion")}</span>
 			</div>
 		);
 	}
@@ -80,7 +82,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 				className="inline-flex items-center gap-1.5 text-xs text-muted-foreground/50 hover:text-foreground transition-colors"
 				>
 					<RefreshCw className="h-3 w-3" />
-					Retry
+					{t("common.retry")}
 				</button>
 			</div>
 		);
@@ -96,7 +98,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 			{hasBody && (
 				<div>
 				<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
-					Description
+					{t("discussion.description")}
 				</div>
 				<div className="text-sm">
 					<Markdown>{data.body}</Markdown>
@@ -106,14 +108,14 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 
 			{!hasBody && !hasComments && (
 				<div className="text-center py-12">
-					<p className="text-sm text-muted-foreground/40">No description or comments</p>
+					<p className="text-sm text-muted-foreground/40">{t("discussion.noContent")}</p>
 				</div>
 			)}
 
 			{hasComments && (
 				<div>
 				<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
-					Comments
+					{t("discussion.comments")}
 					<span className="ml-1.5 text-muted-foreground/25">{data.comments.length}</span>
 				</div>
 					<div className="space-y-0">
@@ -134,7 +136,7 @@ export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
 									)}
 								<span className="text-sm font-medium">{comment.author}</span>
 								<span className="text-xs text-muted-foreground/40">
-										{timeAgo(comment.created_at)}
+										{timeAgo(comment.created_at, t)}
 									</span>
 									<a
 										href={comment.html_url}

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

@@ -1,6 +1,7 @@
 import { useState, useMemo } from "react";
 import { ChevronRight, Plus, Pencil, Trash2, ArrowRight, FolderTree, Layers, ArrowDownWideNarrow } from "lucide-react";
 import type { FileChange, FileGroup, FileStatus } from "../../../types/output.ts";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 type ViewMode = "tree" | "group" | "changes";
 
@@ -212,6 +213,7 @@ function GroupView({
 	onFileSelect,
 	expanded,
 	onToggleExpand,
+	ungroupedLabel,
 }: {
 	files: FileChange[];
 	groups: FileGroup[];
@@ -219,6 +221,7 @@ function GroupView({
 	onFileSelect?: (path: string) => void;
 	expanded: Set<string>;
 	onToggleExpand: (e: React.MouseEvent, path: string) => void;
+	ungroupedLabel: string;
 }) {
 	const [openGroups, setOpenGroups] = useState<Set<string>>(() => new Set(groups.map((g) => g.name)));
 
@@ -253,7 +256,7 @@ function GroupView({
 			{[...filesByGroup.entries()].map(([groupName, groupFiles]) => {
 				const isOpen = openGroups.has(groupName);
 				const meta = groupMeta.get(groupName);
-				const displayName = groupName === "_ungrouped" ? "Ungrouped" : groupName;
+				const displayName = groupName === "_ungrouped" ? ungroupedLabel : groupName;
 				const totalAdd = groupFiles.reduce((s, f) => s + f.additions, 0);
 				const totalDel = groupFiles.reduce((s, f) => s + f.deletions, 0);
 
@@ -347,10 +350,10 @@ function ChangesView({
 	);
 }
 
-const VIEW_MODES: { value: ViewMode; icon: typeof FolderTree; label: string }[] = [
-	{ value: "tree", icon: FolderTree, label: "Tree" },
-	{ value: "group", icon: Layers, label: "Groups" },
-	{ value: "changes", icon: ArrowDownWideNarrow, label: "Changes" },
+const VIEW_MODE_KEYS: { value: ViewMode; icon: typeof FolderTree; labelKey: TranslationKey }[] = [
+	{ value: "tree", icon: FolderTree, labelKey: "files.tree" },
+	{ value: "group", icon: Layers, labelKey: "files.groups" },
+	{ value: "changes", icon: ArrowDownWideNarrow, labelKey: "files.changes" },
 ];
 
 export function FilesPanel({
@@ -376,6 +379,7 @@ export function FilesPanel({
 		}
 		return dirs;
 	});
+	const { t } = useI18n();
 
 	const tree = useMemo(() => collapseTree(buildTree(files)), [files]);
 
@@ -403,17 +407,17 @@ export function FilesPanel({
 		<div className="pt-5">
 			<div className="flex items-center justify-between mb-3">
 				<div className="flex items-center gap-2">
-				<span className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider">{files.length} files</span>
+				<span className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider">{t("files.nFiles", { n: files.length })}</span>
 				<span className="text-xs tabular-nums text-green-600 dark:text-green-400">+{totalAdd}</span>
 				<span className="text-xs tabular-nums text-red-600 dark:text-red-400">-{totalDel}</span>
 				</div>
 				<div className="flex items-center gap-px rounded-md border p-0.5">
-					{VIEW_MODES.map(({ value, icon: ModeIcon, label }) => (
+					{VIEW_MODE_KEYS.map(({ value, icon: ModeIcon, labelKey }) => (
 						<button
 							key={value}
 							type="button"
 							onClick={() => setViewMode(value)}
-							title={label}
+							title={t(labelKey)}
 							className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
 								viewMode === value
 									? "bg-accent text-foreground font-medium"
@@ -421,7 +425,7 @@ export function FilesPanel({
 							}`}
 						>
 							<ModeIcon className="h-3 w-3" />
-							<span className="hidden sm:inline">{label}</span>
+							<span className="hidden sm:inline">{t(labelKey)}</span>
 						</button>
 					))}
 				</div>
@@ -449,6 +453,7 @@ export function FilesPanel({
 					onFileSelect={onFileSelect}
 					expanded={expanded}
 					onToggleExpand={toggleExpand}
+					ungroupedLabel={t("files.ungrouped")}
 				/>
 			)}
 

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { ChevronRight } from "lucide-react";
 import type { FileGroup } from "../../../types/output.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 const TYPE_DOT: Record<string, string> = {
 	feature: "bg-blue-500",
@@ -14,6 +15,7 @@ const TYPE_DOT: Record<string, string> = {
 
 export function GroupsPanel({ groups }: { groups: FileGroup[] }) {
 	const [expanded, setExpanded] = useState<Set<number>>(new Set([0]));
+	const { t } = useI18n();
 
 	function toggle(idx: number) {
 		setExpanded((s) => {
@@ -26,7 +28,7 @@ export function GroupsPanel({ groups }: { groups: FileGroup[] }) {
 	return (
 		<div className="pt-5">
 		<div className="text-xs font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
-			{groups.length} groups
+			{t("groups.nGroups", { n: groups.length })}
 		</div>
 			<div className="space-y-px">
 				{groups.map((group, i) => {