newpr 0.4.0 → 0.5.1

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

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
-import { X, Check, Loader2 } from "lucide-react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { X, Check, Loader2, Search, ChevronDown } from "lucide-react";
 
 interface ConfigData {
 	model: string;
@@ -10,6 +10,8 @@ interface ConfigData {
 	concurrency: number;
 	has_api_key: boolean;
 	has_github_token: boolean;
+	enabled_plugins: string[];
+	available_plugins: Array<{ id: string; name: string }>;
 	defaults: {
 		model: string;
 		language: string;
@@ -19,13 +21,13 @@ interface ConfigData {
 	};
 }
 
-const MODELS = [
-	"anthropic/claude-sonnet-4.6",
-	"anthropic/claude-sonnet-4-20250514",
-	"openai/gpt-4.1",
-	"openai/o3",
-	"google/gemini-2.5-pro-preview-06-05",
-];
+interface ModelInfo {
+	id: string;
+	name: string;
+	provider?: string;
+	created?: number;
+	contextLength?: number;
+}
 
 const AGENTS = [
 	{ value: "", label: "Auto" },
@@ -39,17 +41,26 @@ const LANGUAGES = [
 	"Spanish", "French", "German", "Portuguese",
 ];
 
-export function SettingsPanel({ onClose }: { onClose: () => void }) {
+export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => void; onFeaturesChange?: () => 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);
+	const [models, setModels] = useState<ModelInfo[]>([]);
 
 	useEffect(() => {
 		fetch("/api/config")
 			.then((r) => r.json())
-			.then((data) => setConfig(data as ConfigData))
+			.then((data) => {
+				setConfig(data as ConfigData);
+				if ((data as ConfigData).has_api_key) {
+					fetch("/api/models")
+						.then((r) => r.json())
+						.then((m) => setModels(m as ModelInfo[]))
+						.catch(() => {});
+				}
+			})
 			.catch(() => {});
 	}, []);
 
@@ -67,10 +78,11 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 			setConfig(data as ConfigData);
 			setSaved(true);
 			setTimeout(() => setSaved(false), 2000);
+			if (update.enabled_plugins !== undefined) onFeaturesChange?.();
 		} finally {
 			setSaving(false);
 		}
-	}, []);
+	}, [onFeaturesChange]);
 
 	if (!config) {
 		return (
@@ -162,15 +174,15 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 
 				<Section title="Model">
 					<Row label="LLM">
-						<select
-							value={config.model}
-							onChange={(e) => save({ model: e.target.value })}
-							className="h-7 rounded-md border bg-background px-2 text-[11px] font-mono focus:outline-none focus:border-foreground/20 cursor-pointer"
-						>
-							{MODELS.map((m) => (
-								<option key={m} value={m}>{m.split("/").pop()}</option>
-							))}
-						</select>
+						{config.has_api_key ? (
+							<ModelSelect
+								value={config.model}
+								models={models}
+								onChange={(id: string) => save({ model: id })}
+							/>
+						) : (
+							<span className="text-[11px] text-muted-foreground/40">Set API key first</span>
+						)}
 					</Row>
 					<Row label="Agent">
 						<div className="flex gap-px rounded-md border p-0.5">
@@ -217,11 +229,151 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 						<NumberInput value={config.concurrency} onChange={(v) => save({ concurrency: v })} />
 					</Row>
 				</Section>
+
+				{config.available_plugins.length > 0 && (
+					<Section title="Plugins">
+						<div className="space-y-1">
+							{config.available_plugins.map((p) => {
+								const enabled = config.enabled_plugins.includes(p.id);
+								return (
+									<div key={p.id} className="flex items-center justify-between gap-3 py-1.5">
+										<div className="flex items-center gap-2 min-w-0">
+											<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${enabled ? "bg-green-500" : "bg-muted-foreground/20"}`} />
+											<span className="text-[11px] truncate">{p.name}</span>
+										</div>
+										<button
+											type="button"
+											onClick={() => {
+												const next = enabled
+													? config.enabled_plugins.filter((id) => id !== p.id)
+													: [...config.enabled_plugins, p.id];
+												save({ enabled_plugins: next });
+											}}
+											className={`relative inline-flex h-4 w-7 items-center rounded-full shrink-0 transition-colors ${
+												enabled ? "bg-foreground" : "bg-muted"
+											}`}
+										>
+											<span className={`inline-block h-3 w-3 rounded-full bg-background transition-transform ${
+												enabled ? "translate-x-3.5" : "translate-x-0.5"
+											}`} />
+										</button>
+									</div>
+								);
+							})}
+						</div>
+					</Section>
+				)}
 			</div>
 		</div>
 	);
 }
 
+function ModelSelect({ value, models: initialModels, onChange }: { value: string; models: ModelInfo[]; onChange: (id: string) => void }) {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [models, setModels] = useState<ModelInfo[]>(initialModels);
+	const [loading, setLoading] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => { setModels(initialModels); }, [initialModels]);
+
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [open]);
+
+	const fetchModels = useCallback((q: string) => {
+		setLoading(true);
+		fetch(`/api/models${q ? `?q=${encodeURIComponent(q)}` : ""}`)
+			.then((r) => r.json())
+			.then((data) => setModels(data as ModelInfo[]))
+			.catch(() => {})
+			.finally(() => setLoading(false));
+	}, []);
+
+	useEffect(() => {
+		if (open) {
+			setSearch("");
+			fetchModels("");
+			setTimeout(() => inputRef.current?.focus(), 0);
+		}
+	}, [open, fetchModels]);
+
+	const handleSearch = useCallback((q: string) => {
+		setSearch(q);
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => fetchModels(q), 300);
+	}, [fetchModels]);
+
+	const displayName = value.split("/").pop() ?? value;
+
+	return (
+		<div ref={ref} className="relative">
+			<button
+				type="button"
+				onClick={() => setOpen(!open)}
+				className="flex items-center gap-1.5 h-7 rounded-md border bg-background px-2.5 text-[11px] font-mono hover:border-foreground/20 transition-colors max-w-[220px]"
+			>
+				<span className="truncate flex-1 text-left">{displayName}</span>
+				<ChevronDown className={`h-3 w-3 text-muted-foreground/40 shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+			</button>
+			{open && (
+				<div className="absolute right-0 top-8 z-50 w-[320px] rounded-lg border bg-background shadow-lg">
+					<div className="p-1.5 border-b">
+						<div className="flex items-center gap-1.5 px-2 h-7 rounded-md bg-muted/50">
+							<Search className="h-3 w-3 text-muted-foreground/40 shrink-0" />
+							<input
+								ref={inputRef}
+								type="text"
+								value={search}
+								onChange={(e) => handleSearch(e.target.value)}
+								placeholder="Search models..."
+								className="flex-1 bg-transparent text-[11px] focus:outline-none placeholder:text-muted-foreground/30"
+							/>
+							{loading && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground/30 shrink-0" />}
+						</div>
+					</div>
+					<div className="max-h-[280px] overflow-y-auto p-1">
+						{models.length === 0 && !loading && (
+							<div className="px-2 py-3 text-center text-[11px] text-muted-foreground/40">No models found</div>
+						)}
+						{models.slice(0, 80).map((m, i) => {
+							const isSelected = m.id === value;
+							const provider = m.id.split("/")[0] ?? "";
+							const name = m.id.split("/").slice(1).join("/");
+							const prevProvider = i > 0 ? models[i - 1]!.id.split("/")[0] : null;
+							const showHeader = provider !== prevProvider;
+							return (
+								<div key={m.id}>
+									{showHeader && (
+										<div className="px-2 pt-2 pb-1 text-[10px] font-medium text-muted-foreground/30 uppercase tracking-wider">{provider}</div>
+									)}
+									<button
+										type="button"
+										onClick={() => { onChange(m.id); setOpen(false); }}
+										className={`w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors ${
+											isSelected ? "bg-accent" : "hover:bg-accent/50"
+										}`}
+									>
+										<span className="text-[11px] font-mono truncate flex-1">{name}</span>
+										{isSelected && <Check className="h-3 w-3 text-foreground shrink-0" />}
+									</button>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
 	return (
 		<div>

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

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import type { ProgressEvent } from "../../../analyzer/progress.ts";
 import type { NewprOutput } from "../../../types/output.ts";
+import { sendNotification } from "../lib/notify.ts";
 
 export type BgStatus = "running" | "done" | "error";
 
@@ -89,19 +90,22 @@ export function useBackgroundAnalyses() {
 			try {
 				const res = await fetch(`/api/analysis/${sessionId}`);
 				const data = (await res.json()) as { result?: NewprOutput; historyId?: string };
-				setAnalyses((prev) =>
-					prev.map((a) =>
-						a.sessionId === sessionId
-							? { ...a, status: "done", result: data.result, historyId: data.historyId }
-							: a,
-					),
-				);
+				setAnalyses((prev) => {
+					const a = prev.find((x) => x.sessionId === sessionId);
+					sendNotification("Analysis complete", a?.prTitle ?? prInput);
+					return prev.map((x) =>
+						x.sessionId === sessionId
+							? { ...x, status: "done" as const, result: data.result, historyId: data.historyId }
+							: x,
+					);
+				});
 			} catch {
-				setAnalyses((prev) =>
-					prev.map((a) =>
-						a.sessionId === sessionId ? { ...a, status: "done" } : a,
-					),
-				);
+				setAnalyses((prev) => {
+					sendNotification("Analysis complete", prInput);
+					return prev.map((a) =>
+						a.sessionId === sessionId ? { ...a, status: "done" as const } : a,
+					);
+				});
 			}
 		});
 
@@ -110,6 +114,7 @@ export function useBackgroundAnalyses() {
 			eventSourcesRef.current.delete(sessionId);
 			let msg = "Analysis failed";
 			try { msg = JSON.parse((e as MessageEvent).data).message ?? msg; } catch {}
+			sendNotification("Analysis failed", msg);
 			setAnalyses((prev) =>
 				prev.map((a) =>
 					a.sessionId === sessionId ? { ...a, status: "error", error: msg } : a,

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

@@ -1,4 +1,5 @@
 import { useEffect, useCallback, useSyncExternalStore } from "react";
+import { sendNotification } from "../lib/notify.ts";
 import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/output.ts";
 
 interface ChatSessionState {
@@ -24,6 +25,12 @@ class ChatStore {
 		return s;
 	}
 
+	private update(sessionId: string, patch: Partial<ChatSessionState>) {
+		const s = this.getOrCreate(sessionId);
+		this.sessions.set(sessionId, { ...s, ...patch });
+		this.notify();
+	}
+
 	private notify() {
 		for (const l of this.listeners) l();
 	}
@@ -55,12 +62,10 @@ class ChatStore {
 		try {
 			const res = await fetch(`/api/sessions/${sessionId}/chat`);
 			const data = await res.json() as ChatMessage[];
-			s.messages = data;
-			s.loaded = true;
+			this.update(sessionId, { messages: data, loaded: true });
 		} catch {
-			s.loaded = true;
+			this.update(sessionId, { loaded: true });
 		}
-		this.notify();
 	}
 
 	async sendMessage(sessionId: string, text: string): Promise<void> {
@@ -68,10 +73,7 @@ class ChatStore {
 		if (s.loading) return;
 
 		const userMsg: ChatMessage = { role: "user", content: text, timestamp: new Date().toISOString() };
-		s.messages = [...s.messages, userMsg];
-		s.loading = true;
-		s.streaming = { segments: [] };
-		this.notify();
+		this.update(sessionId, { messages: [...s.messages, userMsg], loading: true, streaming: { segments: [] } });
 
 		const controller = new AbortController();
 		this.abortControllers.set(sessionId, controller);
@@ -122,23 +124,20 @@ class ChatStore {
 								} else {
 									orderedSegments.push({ type: "text", content: data.content ?? "" });
 								}
-								s.streaming = { segments: [...orderedSegments] };
-								this.notify();
+								this.update(sessionId, { streaming: { segments: [...orderedSegments] } });
 								break;
 							}
 							case "tool_call": {
 								const tc: ChatToolCall = { id: data.id, name: data.name, arguments: data.arguments ?? {} };
 								allToolCalls.push(tc);
 								orderedSegments.push({ type: "tool_call", toolCall: tc });
-								s.streaming = { segments: [...orderedSegments], activeToolName: data.name };
-								this.notify();
+								this.update(sessionId, { streaming: { segments: [...orderedSegments], activeToolName: data.name } });
 								break;
 							}
 							case "tool_result": {
 								const tc = allToolCalls.find((c) => c.id === data.id);
 								if (tc) tc.result = data.result;
-								s.streaming = { segments: [...orderedSegments] };
-								this.notify();
+								this.update(sessionId, { streaming: { segments: [...orderedSegments] } });
 								break;
 							}
 							case "done": break;
@@ -151,26 +150,31 @@ class ChatStore {
 				}
 			}
 
-			s.messages = [...s.messages, {
-				role: "assistant",
-				content: fullText,
-				toolCalls: allToolCalls.length > 0 ? allToolCalls : undefined,
-				segments: orderedSegments.length > 0 ? orderedSegments : undefined,
-				timestamp: new Date().toISOString(),
-			}];
-		} catch (err) {
-			if ((err as Error).name !== "AbortError") {
-				s.messages = [...s.messages, {
+			const cur = this.getOrCreate(sessionId);
+			this.update(sessionId, {
+				messages: [...cur.messages, {
 					role: "assistant",
-					content: `Error: ${err instanceof Error ? err.message : String(err)}`,
+					content: fullText,
+					toolCalls: allToolCalls.length > 0 ? allToolCalls : undefined,
+					segments: orderedSegments.length > 0 ? orderedSegments : undefined,
 					timestamp: new Date().toISOString(),
-				}];
+				}],
+			});
+			sendNotification("Chat response ready", fullText.slice(0, 100));
+		} catch (err) {
+			if ((err as Error).name !== "AbortError") {
+				const cur = this.getOrCreate(sessionId);
+				this.update(sessionId, {
+					messages: [...cur.messages, {
+						role: "assistant",
+						content: `Error: ${err instanceof Error ? err.message : String(err)}`,
+						timestamp: new Date().toISOString(),
+					}],
+				});
 			}
 		} finally {
-			s.loading = false;
-			s.streaming = null;
+			this.update(sessionId, { loading: false, streaming: null });
 			this.abortControllers.delete(sessionId);
-			this.notify();
 		}
 	}
 
@@ -180,8 +184,7 @@ class ChatStore {
 		if (lastAssistantIdx === -1) return;
 		const lastUserIdx = s.messages.slice(0, lastAssistantIdx).findLastIndex((m) => m.role === "user");
 		const removeFrom = lastUserIdx >= 0 ? lastUserIdx : lastAssistantIdx;
-		s.messages = s.messages.slice(0, removeFrom);
-		this.notify();
+		this.update(sessionId, { messages: s.messages.slice(0, removeFrom) });
 		await fetch(`/api/sessions/${sessionId}/chat/undo`, { method: "POST" }).catch(() => {});
 	}
 }

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

@@ -1,19 +1,22 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 interface Features {
 	cartoon: boolean;
 	version: string;
+	enabledPlugins: string[];
 }
 
-export function useFeatures(): Features {
-	const [features, setFeatures] = useState<Features>({ cartoon: false, version: "" });
+export function useFeatures(): Features & { refresh: () => void } {
+	const [features, setFeatures] = useState<Features>({ cartoon: false, version: "", enabledPlugins: [] });
 
-	useEffect(() => {
+	const refresh = useCallback(() => {
 		fetch("/api/features")
 			.then((r) => r.json())
 			.then((data) => setFeatures(data as Features))
 			.catch(() => {});
 	}, []);
 
-	return features;
+	useEffect(() => { refresh(); }, [refresh]);
+
+	return { ...features, refresh };
 }

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

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+
+export interface OutdatedInfo {
+	outdated: boolean;
+	currentTitle?: string;
+	currentState?: string;
+	analyzedAt?: string;
+	currentUpdatedAt?: string;
+}
+
+export function useOutdatedCheck(sessionId?: string | null): OutdatedInfo | null {
+	const [info, setInfo] = useState<OutdatedInfo | null>(null);
+
+	useEffect(() => {
+		setInfo(null);
+		if (!sessionId) return;
+		fetch(`/api/sessions/${sessionId}/outdated`)
+			.then((r) => r.json())
+			.then((data) => {
+				const d = data as {
+					outdated?: boolean;
+					current_title?: string;
+					current_state?: string;
+					analyzed_at?: string;
+					current_updated_at?: string;
+				};
+				if (d.outdated !== undefined) {
+					setInfo({
+						outdated: d.outdated,
+						currentTitle: d.current_title,
+						currentState: d.current_state,
+						analyzedAt: d.analyzed_at,
+						currentUpdatedAt: d.current_updated_at,
+					});
+				}
+			})
+			.catch(() => {});
+	}, [sessionId]);
+
+	return info;
+}

package/src/web/client/lib/notify.ts

@@ -0,0 +1,21 @@
+let permissionRequested = false;
+
+export function requestNotificationPermission(): void {
+	if (permissionRequested || typeof Notification === "undefined") return;
+	permissionRequested = true;
+	if (Notification.permission === "default") {
+		Notification.requestPermission();
+	}
+}
+
+export function sendNotification(title: string, body?: string): void {
+	if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
+	if (document.hasFocus()) return;
+	try {
+		new Notification(title, {
+			body,
+			icon: "/favicon.ico",
+			tag: "newpr",
+		});
+	} catch {}
+}

package/src/web/client/lib/shiki.ts

@@ -6,6 +6,10 @@ export const SHIKI_LANGS = [
 	"yaml", "html", "bash", "java", "c",
 	"cpp", "ruby", "php", "swift", "kotlin",
 	"sql", "markdown", "toml", "xml",
+	"csharp", "dart", "lua", "zig", "graphql",
+	"dockerfile", "prisma", "svelte", "vue",
+	"scss", "less", "r", "scala", "elixir",
+	"haskell", "ocaml", "perl",
 ] as const;
 
 export type ShikiLang = (typeof SHIKI_LANGS)[number];
@@ -35,20 +39,41 @@ const EXT_TO_LANG: Record<string, string> = {
 	js: "javascript", jsx: "jsx", mjs: "javascript", cjs: "javascript",
 	py: "python", pyi: "python",
 	go: "go", rs: "rust",
-	css: "css", scss: "css", less: "css",
+	css: "css", scss: "scss", less: "less",
 	json: "json", jsonc: "json",
 	yaml: "yaml", yml: "yaml",
-	html: "html", htm: "html", vue: "html", svelte: "html",
+	html: "html", htm: "html",
+	vue: "vue", svelte: "svelte",
 	sh: "bash", bash: "bash", zsh: "bash",
 	java: "java", kt: "kotlin",
 	c: "c", h: "c", cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp",
+	cs: "csharp",
 	rb: "ruby", php: "php", swift: "swift",
 	sql: "sql", md: "markdown", mdx: "markdown",
-	toml: "toml",
+	toml: "toml", xml: "xml",
+	dart: "dart", lua: "lua", zig: "zig",
+	graphql: "graphql", gql: "graphql",
+	prisma: "prisma",
+	dockerfile: "dockerfile",
+	r: "r", R: "r",
+	scala: "scala", sc: "scala",
+	ex: "elixir", exs: "elixir",
+	hs: "haskell", ml: "ocaml",
+	pl: "perl", pm: "perl",
+};
+
+const NAME_TO_LANG: Record<string, string> = {
+	Dockerfile: "dockerfile",
+	Makefile: "bash",
+	Gemfile: "ruby",
+	Rakefile: "ruby",
 };
 
 export function detectShikiLang(filePath: string): ShikiLang | null {
-	const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+	const fileName = filePath.split("/").pop() ?? "";
+	const nameLang = NAME_TO_LANG[fileName];
+	if (nameLang) return nameLang as ShikiLang;
+	const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
 	return (EXT_TO_LANG[ext] as ShikiLang | undefined) ?? null;
 }