newpr 1.0.26 → 1.0.28

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>

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

@@ -2,18 +2,19 @@ import { useState, useEffect, useRef } from "react";
 import { CheckCircle2, Circle, Loader2 } from "lucide-react";
 import type { ProgressEvent, ProgressStage } from "../../../analyzer/progress.ts";
 import { stageIndex, allStages } from "../../../analyzer/progress.ts";
-
-const STAGE_LABELS: Record<ProgressStage, string> = {
-	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",
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
+
+const STAGE_KEYS: Record<ProgressStage, TranslationKey> = {
+	fetching: "loading.fetching",
+	parsing: "loading.parsing",
+	cloning: "loading.cloning",
+	checkout: "loading.checkout",
+	exploring: "loading.exploring",
+	analyzing: "loading.analyzing",
+	grouping: "loading.grouping",
+	summarizing: "loading.summarizing",
+	narrating: "loading.narrating",
+	done: "loading.done",
 };
 
 const MAX_LOG_LINES = 8;
@@ -29,7 +30,7 @@ interface StepInfo {
 	log: string[];
 }
 
-function buildSteps(events: ProgressEvent[]): StepInfo[] {
+function buildSteps(events: ProgressEvent[], stageLabels: Record<ProgressStage, string>): StepInfo[] {
 	const stages = allStages();
 	const lastByStage = new Map<ProgressStage, ProgressEvent>();
 	const firstTs = new Map<ProgressStage, number>();
@@ -72,7 +73,7 @@ function buildSteps(events: ProgressEvent[]): StepInfo[] {
 
 			return {
 				stage,
-				message: event?.message ?? STAGE_LABELS[stage],
+				message: event?.message ?? stageLabels[stage],
 				done,
 				active,
 				durationMs,
@@ -107,7 +108,11 @@ export function LoadingTimeline({
 		logEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
 	}, [events.length]);
 
-	const steps = buildSteps(events);
+	const { t } = useI18n();
+	const stageLabels = Object.fromEntries(
+		Object.entries(STAGE_KEYS).map(([stage, key]) => [stage, t(key)]),
+	) as Record<ProgressStage, string>;
+	const steps = buildSteps(events, stageLabels);
 	const seconds = Math.floor(elapsed / 1000);
 
 	const prInfo = events.find((e) => e.pr_title);
@@ -136,7 +141,7 @@ export function LoadingTimeline({
 
 				<div className="space-y-3">
 					{steps.map((step) => {
-						const completionDetail = step.message !== STAGE_LABELS[step.stage] ? step.message : "";
+						const completionDetail = step.message !== stageLabels[step.stage] ? step.message : "";
 						const progress = step.current !== undefined && step.total !== undefined
 							? ` (${step.current}/${step.total})`
 							: "";
@@ -154,7 +159,7 @@ export function LoadingTimeline({
 								<div className="min-w-0 flex-1">
 									<div className="flex items-center gap-2">
 								<span className={`text-base font-medium ${step.done ? "text-muted-foreground" : step.active ? "text-foreground" : "text-muted-foreground/50"}`}>
-										{STAGE_LABELS[step.stage]}{progress}
+										{stageLabels[step.stage]}{progress}
 									</span>
 									{step.done && step.durationMs !== undefined && (
 										<span className="text-sm text-muted-foreground/60">

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

@@ -11,6 +11,7 @@ import { SlidesPanel } from "../panels/SlidesPanel.tsx";
 import { StackPanel } from "../panels/StackPanel.tsx";
 import { ReviewModal } from "./ReviewModal.tsx";
 import { useOutdatedCheck } from "../hooks/useOutdatedCheck.ts";
+import { useI18n, type TranslationKey } from "../lib/i18n/index.ts";
 
 const VALID_TABS = ["story", "discussion", "groups", "files", "stack", "slides", "cartoon"] as const;
 type TabValue = typeof VALID_TABS[number];
@@ -34,11 +35,18 @@ const RISK_DOT: Record<string, string> = {
 	critical: "bg-red-600",
 };
 
-const STATE_STYLES: Record<string, { bg: string; text: string; label: string }> = {
-	open: { bg: "bg-green-500/10", text: "text-green-600 dark:text-green-400", label: "Open" },
-	merged: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400", label: "Merged" },
-	closed: { bg: "bg-red-500/10", text: "text-red-600 dark:text-red-400", label: "Closed" },
-	draft: { bg: "bg-neutral-500/10", text: "text-neutral-500", label: "Draft" },
+const STATE_STYLE_CLASS: Record<string, { bg: string; text: string }> = {
+	open: { bg: "bg-green-500/10", text: "text-green-600 dark:text-green-400" },
+	merged: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
+	closed: { bg: "bg-red-500/10", text: "text-red-600 dark:text-red-400" },
+	draft: { bg: "bg-neutral-500/10", text: "text-neutral-500" },
+};
+
+const STATE_LABEL_KEYS: Record<string, TranslationKey> = {
+	open: "results.open",
+	merged: "results.merged",
+	closed: "results.closed",
+	draft: "results.draft",
 };
 
 export function ResultsScreen({
@@ -68,6 +76,7 @@ export function ResultsScreen({
 	const [tab, setTab] = useState<TabValue>(getInitialTab);
 	const [reviewOpen, setReviewOpen] = useState(false);
 	const outdated = useOutdatedCheck(sessionId);
+	const { t } = useI18n();
 
 	useEffect(() => {
 		onTabChange?.(tab);
@@ -135,10 +144,11 @@ export function ResultsScreen({
 								{repoSlug}
 							</a>
 							{meta.pr_state && (() => {
-								const s = STATE_STYLES[meta.pr_state] ?? STATE_STYLES.open!;
+								const s = STATE_STYLE_CLASS[meta.pr_state] ?? STATE_STYLE_CLASS.open!;
+								const labelKey = STATE_LABEL_KEYS[meta.pr_state] ?? STATE_LABEL_KEYS.open!;
 								return (
 									<span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-md ${s!.bg} ${s!.text}`}>
-										{s!.label}
+										{t(labelKey)}
 									</span>
 								);
 							})()}
@@ -151,7 +161,7 @@ export function ResultsScreen({
 									className="flex items-center gap-1.5 h-7 px-3 rounded-md border text-[11px] font-medium text-foreground hover:bg-accent/40 transition-colors shrink-0"
 								>
 									<Check className="h-3 w-3" />
-									Review
+									{t("results.review")}
 									<ChevronDown className="h-3 w-3 text-muted-foreground/40" />
 								</button>
 							)}
@@ -183,7 +193,7 @@ export function ResultsScreen({
 								<span className="text-green-600 dark:text-green-400 tabular-nums">+{meta.total_additions}</span>
 								<span className="text-red-600 dark:text-red-400 tabular-nums">-{meta.total_deletions}</span>
 								<span className="text-muted-foreground/25">·</span>
-								<span className="tabular-nums">{meta.total_files_changed} files</span>
+								<span className="tabular-nums">{t("results.nFiles", { n: meta.total_files_changed })}</span>
 							</div>
 						</div>
 					</div>
@@ -191,7 +201,7 @@ export function ResultsScreen({
 						<div className="flex items-center gap-2 mt-3 px-3 py-2 rounded-lg border border-yellow-500/20 bg-yellow-500/5">
 							<AlertTriangle 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">
-								This PR has been updated since this analysis was created.
+								{t("results.prUpdated")}
 							</span>
 							{onReanalyze && (
 								<button
@@ -200,7 +210,7 @@ export function ResultsScreen({
 									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" />
-									Re-analyze
+									{t("results.reAnalyze")}
 								</button>
 							)}
 						</div>
@@ -218,8 +228,9 @@ export function ResultsScreen({
 						</button>
 						<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${RISK_DOT[summary.risk_level] ?? RISK_DOT.medium}`} />
 						{meta.pr_state && (() => {
-							const s = STATE_STYLES[meta.pr_state]!;
-							return <span className={`text-[9px] font-medium px-1 py-px rounded ${s.bg} ${s.text} shrink-0`}>{s.label}</span>;
+							const s = STATE_STYLE_CLASS[meta.pr_state]!;
+							const labelKey = STATE_LABEL_KEYS[meta.pr_state] ?? STATE_LABEL_KEYS.open!;
+							return <span className={`text-[9px] font-medium px-1 py-px rounded ${s.bg} ${s.text} shrink-0`}>{t(labelKey)}</span>;
 						})()}
 					<span className="text-sm font-medium truncate flex-1">{meta.pr_title}</span>
 					<span className="text-xs text-muted-foreground/30 font-mono shrink-0">{repoSlug}</span>
@@ -229,34 +240,34 @@ export function ResultsScreen({
 				<TabsList className="w-full justify-start">
 					<TabsTrigger value="story">
 						<BookOpen className="h-3 w-3 shrink-0" />
-						Story
+						{t("results.story")}
 					</TabsTrigger>
 					<TabsTrigger value="discussion">
 						<MessageSquare className="h-3 w-3 shrink-0" />
-						Discussion
+						{t("results.discussion")}
 					</TabsTrigger>
 					<TabsTrigger value="groups">
 						<Layers className="h-3 w-3 shrink-0" />
-						Groups
+						{t("results.groups")}
 					</TabsTrigger>
 					<TabsTrigger value="files">
 						<FolderTree className="h-3 w-3 shrink-0" />
-						Files
+						{t("results.files")}
 					</TabsTrigger>
 					<TabsTrigger value="stack">
 						<GitPullRequestArrow className="h-3 w-3 shrink-0" />
-						Stack
+						{t("results.stack")}
 					</TabsTrigger>
 					{(!enabledPlugins || enabledPlugins.includes("slides")) && (
 						<TabsTrigger value="slides">
 							<Presentation className="h-3 w-3 shrink-0" />
-							Slides
+							{t("results.slides")}
 						</TabsTrigger>
 					)}
 					{(!enabledPlugins || enabledPlugins.includes("cartoon")) && (
 						<TabsTrigger value="cartoon">
 							<Sparkles className="h-3 w-3 shrink-0" />
-							Comic
+							{t("results.comic")}
 						</TabsTrigger>
 					)}
 				</TabsList>

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

@@ -3,6 +3,7 @@ import { X, Check, MessageSquare, Loader2, AlertCircle, ExternalLink } from "luc
 import { TipTapEditor, getTextWithAnchors } from "./TipTapEditor.tsx";
 import type { useEditor } from "@tiptap/react";
 import { analytics } from "../lib/analytics.ts";
+import { useI18n } from "../lib/i18n/index.ts";
 
 type ReviewEvent = "APPROVE" | "REQUEST_CHANGES" | "COMMENT";
 
@@ -36,11 +37,18 @@ interface ReviewModalProps {
 }
 
 export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
+	const { t } = useI18n();
 	const [event, setEvent] = useState<ReviewEvent>("APPROVE");
 	const [submitting, setSubmitting] = useState(false);
 	const [result, setResult] = useState<{ ok: boolean; html_url?: string; error?: string } | null>(null);
 	const editorRef = useRef<ReturnType<typeof useEditor>>(null);
 
+	const eventLabels: Record<ReviewEvent, string> = {
+		APPROVE: t("review.approve"),
+		REQUEST_CHANGES: t("review.requestChanges"),
+		COMMENT: t("review.comment"),
+	};
+
 	const handleSubmit = useCallback(async () => {
 		if (submitting) return;
 		setSubmitting(true);
@@ -74,7 +82,7 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 				onClick={(e) => e.stopPropagation()}
 			>
 				<div className="flex items-center justify-between px-4 h-11 border-b">
-					<span className="text-sm font-medium">Submit Review</span>
+					<span className="text-sm font-medium">{t("review.submitReview")}</span>
 					<button
 						type="button"
 						onClick={onClose}
@@ -89,7 +97,7 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 						<div className="space-y-4 py-2">
 							<div className="flex items-center gap-2 text-green-600 dark:text-green-400">
 								<Check className="h-4 w-4" />
-								<span className="text-sm font-medium">Review submitted</span>
+								<span className="text-sm font-medium">{t("review.reviewSubmitted")}</span>
 							</div>
 							{result.html_url && (
 								<a
@@ -98,8 +106,8 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 									rel="noopener noreferrer"
 									className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground/60 hover:text-foreground transition-colors"
 								>
-									<ExternalLink className="h-3 w-3" />
-									View on GitHub
+								<ExternalLink className="h-3 w-3" />
+								{t("review.viewOnGithub")}
 								</a>
 							)}
 							<div className="flex justify-end">
@@ -108,7 +116,7 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 									onClick={onClose}
 									className="text-[11px] text-muted-foreground/50 hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent/40 transition-colors"
 								>
-									Close
+									{t("common.close")}
 								</button>
 							</div>
 						</div>
@@ -124,19 +132,19 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 											event === e.value ? e.activeClass : e.class
 										}`}
 									>
-										{e.label}
+										{eventLabels[e.value]}
 									</button>
 								))}
 							</div>
 
 							<div>
 								<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-2">
-									Message {event !== "APPROVE" && <span className="text-red-500/60 normal-case">*</span>}
+									{t("review.message")} {event !== "APPROVE" && <span className="text-red-500/60 normal-case">*</span>}
 								</div>
 								<div className="rounded-lg border px-3 py-2.5 min-h-[80px] focus-within:border-foreground/15 transition-colors">
 									<TipTapEditor
 										editorRef={editorRef}
-										placeholder={event === "APPROVE" ? "Optional message..." : "Describe the changes needed..."}
+										placeholder={event === "APPROVE" ? t("review.optionalMessage") : t("review.describeChanges")}
 										autoFocus
 										submitOnModEnter
 										onSubmit={handleSubmit}
@@ -152,17 +160,17 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 							)}
 
 							<div className="flex items-center justify-between pt-1">
-								<span className="text-[10px] text-muted-foreground/25">
-									{navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to submit
-								</span>
+							<span className="text-[10px] text-muted-foreground/25">
+								{t("review.ctrlEnterToSubmit", { key: navigator.platform.includes("Mac") ? "⌘" : "Ctrl" })}
+							</span>
 								<div className="flex gap-2">
 									<button
 										type="button"
 										onClick={onClose}
 										className="text-[11px] text-muted-foreground/50 hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent/40 transition-colors"
-									>
-										Cancel
-									</button>
+								>
+									{t("common.cancel")}
+								</button>
 									<button
 										type="button"
 										onClick={handleSubmit}
@@ -176,7 +184,7 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 										) : (
 											<MessageSquare className="h-3 w-3" />
 										)}
-										Submit
+										{t("common.submit")}
 									</button>
 								</div>
 							</div>