newpr 0.1.0

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

@@ -0,0 +1,299 @@
+import { useState, useEffect, useCallback } from "react";
+import { X, Check, Loader2, Key, Bot, Globe, Settings2 } from "lucide-react";
+import { Button } from "../../components/ui/button.tsx";
+
+interface ConfigData {
+	model: string;
+	agent: string | null;
+	language: string;
+	max_files: number;
+	timeout: number;
+	concurrency: number;
+	has_api_key: boolean;
+	has_github_token: boolean;
+	defaults: {
+		model: string;
+		language: string;
+		max_files: number;
+		timeout: number;
+		concurrency: number;
+	};
+}
+
+const MODELS = [
+	"anthropic/claude-sonnet-4.5",
+	"anthropic/claude-sonnet-4-20250514",
+	"openai/gpt-4.1",
+	"openai/o3",
+	"google/gemini-2.5-pro-preview-06-05",
+];
+
+const AGENTS = [
+	{ value: "", label: "Auto" },
+	{ value: "claude", label: "Claude Code" },
+	{ value: "opencode", label: "OpenCode" },
+	{ value: "codex", label: "Codex" },
+];
+
+const LANGUAGES = [
+	"auto", "English", "Korean", "Japanese", "Chinese",
+	"Spanish", "French", "German", "Portuguese",
+];
+
+export function SettingsPanel({ onClose }: { onClose: () => void }) {
+	const [config, setConfig] = useState<ConfigData | null>(null);
+	const [saving, setSaving] = useState(false);
+	const [saved, setSaved] = useState(false);
+	const [apiKeyInput, setApiKeyInput] = useState("");
+	const [showApiKeyField, setShowApiKeyField] = useState(false);
+
+	useEffect(() => {
+		fetch("/api/config")
+			.then((r) => r.json())
+			.then((data) => setConfig(data as ConfigData))
+			.catch(() => {});
+	}, []);
+
+	const save = useCallback(async (update: Record<string, unknown>) => {
+		setSaving(true);
+		setSaved(false);
+		try {
+			await fetch("/api/config", {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(update),
+			});
+			const res = await fetch("/api/config");
+			const data = await res.json();
+			setConfig(data as ConfigData);
+			setSaved(true);
+			setTimeout(() => setSaved(false), 2000);
+		} finally {
+			setSaving(false);
+		}
+	}, []);
+
+	if (!config) {
+		return (
+			<div className="flex items-center justify-center py-20">
+				<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-0">
+			<div className="flex items-center justify-between pb-6">
+				<h2 className="text-lg font-semibold tracking-tight">Settings</h2>
+				<div className="flex items-center gap-2">
+					{saving && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+					{saved && <Check className="h-3.5 w-3.5 text-green-500" />}
+					<button
+						type="button"
+						onClick={onClose}
+						className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+					>
+						<X className="h-4 w-4" />
+					</button>
+				</div>
+			</div>
+
+			<div className="space-y-8">
+				<Section icon={Key} title="Authentication">
+					<Row label="OpenRouter API Key">
+						{showApiKeyField ? (
+							<div className="flex gap-2">
+								<input
+									type="password"
+									value={apiKeyInput}
+									onChange={(e) => setApiKeyInput(e.target.value)}
+									placeholder="sk-or-..."
+									className="flex-1 h-8 rounded-md border bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+									autoFocus
+								/>
+								<Button
+									size="sm"
+									disabled={!apiKeyInput.trim()}
+									onClick={() => {
+										save({ openrouter_api_key: apiKeyInput.trim() });
+										setApiKeyInput("");
+										setShowApiKeyField(false);
+									}}
+								>
+									Save
+								</Button>
+								<Button
+									variant="ghost"
+									size="sm"
+									onClick={() => { setShowApiKeyField(false); setApiKeyInput(""); }}
+								>
+									Cancel
+								</Button>
+							</div>
+						) : (
+							<div className="flex items-center gap-3">
+								<StatusDot ok={config.has_api_key} />
+								<span className="text-sm text-muted-foreground">
+									{config.has_api_key ? "Configured" : "Not set"}
+								</span>
+								<button
+									type="button"
+									onClick={() => setShowApiKeyField(true)}
+									className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
+								>
+									{config.has_api_key ? "Change" : "Set key"}
+								</button>
+							</div>
+						)}
+					</Row>
+					<Row label="GitHub Token">
+						<div className="flex items-center gap-3">
+							<StatusDot ok={config.has_github_token} />
+							<span className="text-sm text-muted-foreground">
+								{config.has_github_token ? "Detected from gh CLI" : "Not detected"}
+							</span>
+						</div>
+					</Row>
+				</Section>
+
+				<Section icon={Bot} title="Model & Agent">
+					<Row label="Model">
+						<select
+							value={config.model}
+							onChange={(e) => save({ model: e.target.value })}
+							className="h-8 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
+						>
+							{MODELS.map((m) => (
+								<option key={m} value={m}>{m.split("/").pop()}</option>
+							))}
+						</select>
+					</Row>
+					<Row label="Exploration Agent">
+						<div className="flex gap-1.5">
+							{AGENTS.map((a) => (
+								<button
+									key={a.value}
+									type="button"
+									onClick={() => save({ agent: a.value })}
+									className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
+										(config.agent ?? "") === a.value
+											? "bg-primary text-primary-foreground"
+											: "bg-muted text-muted-foreground hover:text-foreground"
+									}`}
+								>
+									{a.label}
+								</button>
+							))}
+						</div>
+					</Row>
+				</Section>
+
+				<Section icon={Globe} title="Language">
+					<Row label="Output Language">
+						<select
+							value={config.language}
+							onChange={(e) => save({ language: e.target.value })}
+							className="h-8 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
+						>
+							{LANGUAGES.map((l) => (
+								<option key={l} value={l}>{l === "auto" ? "Auto-detect" : l}</option>
+							))}
+						</select>
+					</Row>
+				</Section>
+
+				<Section icon={Settings2} title="Advanced">
+					<Row label="Max files">
+						<NumberInput
+							value={config.max_files}
+							defaultValue={config.defaults.max_files}
+							onChange={(v) => save({ max_files: v })}
+						/>
+					</Row>
+					<Row label="Timeout (sec)">
+						<NumberInput
+							value={config.timeout}
+							defaultValue={config.defaults.timeout}
+							onChange={(v) => save({ timeout: v })}
+						/>
+					</Row>
+					<Row label="Concurrency">
+						<NumberInput
+							value={config.concurrency}
+							defaultValue={config.defaults.concurrency}
+							onChange={(v) => save({ concurrency: v })}
+						/>
+					</Row>
+				</Section>
+			</div>
+		</div>
+	);
+}
+
+function Section({
+	icon: Icon,
+	title,
+	children,
+}: {
+	icon: typeof Key;
+	title: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div>
+			<div className="flex items-center gap-2 mb-4">
+				<Icon className="h-4 w-4 text-muted-foreground" />
+				<h3 className="text-sm font-medium">{title}</h3>
+			</div>
+			<div className="space-y-4 pl-6">{children}</div>
+		</div>
+	);
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+	return (
+		<div className="flex items-center justify-between gap-4">
+			<label className="text-sm text-muted-foreground shrink-0">{label}</label>
+			<div className="flex-1 flex justify-end">{children}</div>
+		</div>
+	);
+}
+
+function StatusDot({ ok }: { ok: boolean }) {
+	return (
+		<span className={`h-2 w-2 rounded-full ${ok ? "bg-green-500" : "bg-red-500"}`} />
+	);
+}
+
+function NumberInput({
+	value,
+	onChange,
+}: {
+	value: number;
+	defaultValue?: number;
+	onChange: (v: number) => void;
+}) {
+	const [local, setLocal] = useState(String(value));
+
+	useEffect(() => { setLocal(String(value)); }, [value]);
+
+	function handleBlur() {
+		const parsed = Number.parseInt(local, 10);
+		if (!Number.isNaN(parsed) && parsed > 0 && parsed !== value) {
+			onChange(parsed);
+		} else {
+			setLocal(String(value));
+		}
+	}
+
+	return (
+		<input
+			type="number"
+			value={local}
+			onChange={(e) => setLocal(e.target.value)}
+			onBlur={handleBlur}
+			onKeyDown={(e) => { if (e.key === "Enter") handleBlur(); }}
+			className="w-20 h-8 rounded-md border bg-background px-3 text-sm text-right font-mono focus:outline-none focus:ring-1 focus:ring-ring"
+		/>
+	);
+}

package/src/web/client/hooks/useAnalysis.ts

@@ -0,0 +1,153 @@
+import { useState, useCallback, useRef } from "react";
+import type { ProgressEvent } from "../../../analyzer/progress.ts";
+import type { NewprOutput } from "../../../types/output.ts";
+
+type Phase = "idle" | "loading" | "done" | "error";
+
+interface AnalysisState {
+	phase: Phase;
+	sessionId: string | null;
+	events: ProgressEvent[];
+	result: NewprOutput | null;
+	error: string | null;
+	startedAt: number | null;
+	lastPrInput: string | null;
+}
+
+export function useAnalysis() {
+	const [state, setState] = useState<AnalysisState>({
+		phase: "idle",
+		sessionId: null,
+		events: [],
+		result: null,
+		error: null,
+		startedAt: null,
+		lastPrInput: null,
+	});
+	const eventSourceRef = useRef<EventSource | null>(null);
+
+	const start = useCallback(async (prInput: string) => {
+		setState({
+			phase: "loading",
+			sessionId: null,
+			events: [],
+			result: null,
+			error: null,
+			startedAt: Date.now(),
+			lastPrInput: prInput,
+		});
+
+		try {
+			const res = await fetch("/api/analysis", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ pr: prInput }),
+			});
+			const body = await res.json();
+			if (!res.ok) throw new Error(body.error ?? "Failed to start analysis");
+
+			const { sessionId, eventsUrl } = body as { sessionId: string; eventsUrl: string };
+			setState((s) => ({ ...s, sessionId }));
+
+			const es = new EventSource(eventsUrl);
+			eventSourceRef.current = es;
+
+			es.addEventListener("progress", (e) => {
+				const event = JSON.parse(e.data) as ProgressEvent;
+				setState((s) => {
+					const events = [...s.events];
+					const lastIdx = events.length - 1;
+					if (
+						lastIdx >= 0 &&
+						events[lastIdx]!.stage === event.stage &&
+						event.partial_content &&
+						events[lastIdx]!.partial_content
+					) {
+						events[lastIdx] = event;
+					} else {
+						events.push(event);
+					}
+					return { ...s, events };
+				});
+			});
+
+			es.addEventListener("done", async () => {
+				es.close();
+				eventSourceRef.current = null;
+				const resultRes = await fetch(`/api/analysis/${sessionId}`);
+				const data = await resultRes.json();
+				setState((s) => ({
+					...s,
+					phase: "done",
+					result: data.result ?? null,
+				}));
+			});
+
+			es.addEventListener("analysis_error", (e) => {
+				es.close();
+				eventSourceRef.current = null;
+				let msg = "Analysis failed";
+				try { msg = JSON.parse((e as MessageEvent).data).message ?? msg; } catch {}
+				setState((s) => ({ ...s, phase: "error", error: msg }));
+			});
+
+			es.onerror = () => {
+				if (es.readyState === EventSource.CLOSED) {
+					eventSourceRef.current = null;
+				}
+			};
+		} catch (err) {
+			setState((s) => ({
+				...s,
+				phase: "error",
+				error: err instanceof Error ? err.message : String(err),
+			}));
+		}
+	}, []);
+
+	const loadStoredSession = useCallback(async (sessionId: string) => {
+		setState((s) => ({
+			...s,
+			phase: "loading",
+			events: [],
+			result: null,
+			error: null,
+			startedAt: Date.now(),
+			lastPrInput: null,
+		}));
+
+		try {
+			const res = await fetch(`/api/sessions/${sessionId}`);
+			if (!res.ok) throw new Error("Session not found");
+			const data = await res.json() as NewprOutput;
+			setState((s) => ({
+				...s,
+				phase: "done",
+				result: data,
+				sessionId,
+			}));
+		} catch (err) {
+			setState((s) => ({
+				...s,
+				phase: "error",
+				error: err instanceof Error ? err.message : String(err),
+			}));
+		}
+	}, []);
+
+	const reset = useCallback(() => {
+		eventSourceRef.current?.close();
+		eventSourceRef.current = null;
+		setState({
+			phase: "idle",
+			sessionId: null,
+			events: [],
+			result: null,
+			error: null,
+			startedAt: null,
+			lastPrInput: null,
+		});
+	}, []);
+
+	return { ...state, start, loadStoredSession, reset };
+}

package/src/web/client/hooks/useGithubUser.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export interface GithubUser {
+	login: string;
+	avatar_url: string;
+	html_url: string;
+	name: string | null;
+}
+
+export function useGithubUser() {
+	const [user, setUser] = useState<GithubUser | null>(null);
+
+	useEffect(() => {
+		fetch("/api/me")
+			.then((r) => r.json())
+			.then((data) => {
+				const d = data as Record<string, unknown>;
+				if (d.login) setUser(d as unknown as GithubUser);
+			})
+			.catch(() => {});
+	}, []);
+
+	return user;
+}

package/src/web/client/hooks/useSessions.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect, useCallback } from "react";
+import type { SessionRecord } from "../../../history/types.ts";
+
+export function useSessions() {
+	const [sessions, setSessions] = useState<SessionRecord[]>([]);
+
+	const refresh = useCallback(() => {
+		fetch("/api/sessions")
+			.then((r) => r.json())
+			.then((data) => setSessions(data as SessionRecord[]))
+			.catch(() => {});
+	}, []);
+
+	useEffect(() => { refresh(); }, [refresh]);
+
+	return { sessions, refresh };
+}

package/src/web/client/hooks/useTheme.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect, useCallback } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+function getSystemTheme(): "light" | "dark" {
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(theme: Theme) {
+	const resolved = theme === "system" ? getSystemTheme() : theme;
+	document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+
+export function useTheme() {
+	const [theme, setThemeState] = useState<Theme>(() => {
+		const stored = localStorage.getItem("newpr-theme");
+		return (stored as Theme) ?? "system";
+	});
+
+	useEffect(() => {
+		applyTheme(theme);
+		const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		const handler = () => { if (theme === "system") applyTheme("system"); };
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, [theme]);
+
+	const setTheme = useCallback((t: Theme) => {
+		localStorage.setItem("newpr-theme", t);
+		setThemeState(t);
+	}, []);
+
+	return { theme, setTheme };
+}

package/src/web/client/main.tsx

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

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

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { ChevronDown, ChevronRight, Plus, Pencil, Trash2, ArrowRight } from "lucide-react";
+import type { FileChange, FileStatus } from "../../../types/output.ts";
+
+const STATUS_ICON: Record<FileStatus, typeof Plus> = {
+	added: Plus,
+	modified: Pencil,
+	deleted: Trash2,
+	renamed: ArrowRight,
+};
+
+const STATUS_COLOR: Record<FileStatus, string> = {
+	added: "text-green-500",
+	modified: "text-yellow-500",
+	deleted: "text-red-500",
+	renamed: "text-blue-500",
+};
+
+function splitPath(fullPath: string): { dir: string; name: string } {
+	const lastSlash = fullPath.lastIndexOf("/");
+	if (lastSlash === -1) return { dir: "", name: fullPath };
+	return { dir: fullPath.slice(0, lastSlash + 1), name: fullPath.slice(lastSlash + 1) };
+}
+
+export function FilesPanel({ files }: { files: FileChange[] }) {
+	const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+	function toggle(path: string) {
+		setExpanded((s) => {
+			const next = new Set(s);
+			next.has(path) ? next.delete(path) : next.add(path);
+			return next;
+		});
+	}
+
+	return (
+		<div className="pt-6">
+			<div className="text-xs text-muted-foreground mb-3">
+				{files.length} files changed
+			</div>
+			<div className="divide-y">
+				{files.map((file) => {
+					const Icon = STATUS_ICON[file.status];
+					const open = expanded.has(file.path);
+					const { dir, name } = splitPath(file.path);
+
+					return (
+						<div key={file.path}>
+							<button
+								type="button"
+								onClick={() => toggle(file.path)}
+								className="w-full flex items-center gap-3 py-2.5 text-left hover:bg-accent/30 transition-colors min-w-0 -mx-1 px-1 rounded"
+							>
+								{open ? (
+									<ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+								) : (
+									<ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+								)}
+								<Icon className={`h-3.5 w-3.5 shrink-0 ${STATUS_COLOR[file.status]}`} />
+								<span className="flex-1 min-w-0 flex items-baseline overflow-hidden" title={file.path}>
+									<span className="text-xs text-muted-foreground/50 font-mono truncate shrink">{dir}</span>
+									<span className="text-sm font-mono font-medium shrink-0">{name}</span>
+								</span>
+								<span className="text-xs tabular-nums text-green-500 shrink-0 w-10 text-right">+{file.additions}</span>
+								<span className="text-xs tabular-nums text-red-500 shrink-0 w-10 text-right">−{file.deletions}</span>
+							</button>
+							{open && (
+								<div className="pb-3 pl-12">
+									<p className="text-xs text-muted-foreground leading-relaxed break-words">{file.summary}</p>
+									{file.groups.length > 0 && (
+										<div className="flex flex-wrap gap-1.5 mt-2">
+											{file.groups.map((g) => (
+												<span key={g} className="text-[11px] bg-muted px-2 py-0.5 rounded-full">{g}</span>
+											))}
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { FileGroup } from "../../../types/output.ts";
+
+const TYPE_COLORS: Record<string, string> = {
+	feature: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+	refactor: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+	bugfix: "bg-red-500/10 text-red-600 dark:text-red-400",
+	chore: "bg-gray-500/10 text-gray-600 dark:text-gray-400",
+	docs: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+	test: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+	config: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
+};
+
+export function GroupsPanel({ groups }: { groups: FileGroup[] }) {
+	const [expanded, setExpanded] = useState<Set<number>>(new Set([0]));
+
+	function toggle(idx: number) {
+		setExpanded((s) => {
+			const next = new Set(s);
+			next.has(idx) ? next.delete(idx) : next.add(idx);
+			return next;
+		});
+	}
+
+	return (
+		<div className="pt-6 divide-y">
+			{groups.map((group, i) => (
+				<div key={group.name}>
+					<button
+						type="button"
+						className="w-full flex items-center gap-3 min-w-0 py-4 text-left hover:bg-accent/30 transition-colors -mx-2 px-2 rounded-md"
+						onClick={() => toggle(i)}
+					>
+						{expanded.has(i) ? (
+							<ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+						) : (
+							<ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+						)}
+						<span className="text-sm font-medium flex-1 min-w-0 truncate">{group.name}</span>
+						<span className={`text-xs font-medium px-2 py-0.5 rounded-full shrink-0 ${TYPE_COLORS[group.type] ?? TYPE_COLORS.chore}`}>
+							{group.type}
+						</span>
+						<span className="text-xs text-muted-foreground shrink-0">{group.files.length} files</span>
+					</button>
+					{expanded.has(i) && (
+						<div className="pb-4 pl-8">
+							<p className="text-sm text-muted-foreground mb-3 break-words">{group.description}</p>
+							<div className="space-y-1">
+								{group.files.map((f) => (
+									<div key={f} className="text-xs font-mono text-muted-foreground pl-2 border-l-2 border-border truncate" title={f}>
+										{f}
+									</div>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,9 @@
+import { Markdown } from "../components/Markdown.tsx";
+
+export function NarrativePanel({ narrative }: { narrative: string }) {
+	return (
+		<div className="pt-6">
+			<Markdown>{narrative}</Markdown>
+		</div>
+	);
+}