newpr 0.3.0 → 0.4.0

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

@@ -0,0 +1,147 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import type { ProgressEvent } from "../../../analyzer/progress.ts";
+import type { NewprOutput } from "../../../types/output.ts";
+
+export type BgStatus = "running" | "done" | "error";
+
+export interface BackgroundAnalysis {
+	sessionId: string;
+	prInput: string;
+	prTitle?: string;
+	prNumber?: number;
+	status: BgStatus;
+	startedAt: number;
+	lastStage?: string;
+	lastMessage?: string;
+	result?: NewprOutput;
+	historyId?: string;
+	error?: string;
+}
+
+export function useBackgroundAnalyses() {
+	const [analyses, setAnalyses] = useState<BackgroundAnalysis[]>([]);
+	const eventSourcesRef = useRef<Map<string, EventSource>>(new Map());
+	const restoredRef = useRef(false);
+
+	useEffect(() => {
+		if (restoredRef.current) return;
+		restoredRef.current = true;
+		fetch("/api/active-analyses")
+			.then((r) => r.json())
+			.then((data) => {
+				const active = data as Array<{
+					id: string;
+					prInput: string;
+					status: string;
+					startedAt: number;
+					prTitle?: string;
+					prNumber?: number;
+					lastStage?: string;
+					lastMessage?: string;
+				}>;
+				for (const a of active) {
+					if (!eventSourcesRef.current.has(a.id)) {
+						trackInternal(a.id, a.prInput, a.prTitle, a.prNumber, a.lastMessage);
+					}
+				}
+			})
+			.catch(() => {});
+	}, []);
+
+	const trackInternal = useCallback((sessionId: string, prInput: string, initTitle?: string, initNumber?: number, initMessage?: string) => {
+		if (eventSourcesRef.current.has(sessionId)) return;
+
+		const entry: BackgroundAnalysis = {
+			sessionId,
+			prInput,
+			status: "running",
+			startedAt: Date.now(),
+			prTitle: initTitle,
+			prNumber: initNumber,
+			lastMessage: initMessage,
+		};
+
+		setAnalyses((prev) => [...prev.filter((a) => a.sessionId !== sessionId), entry]);
+
+		const es = new EventSource(`/api/analysis/${sessionId}/events`);
+		eventSourcesRef.current.set(sessionId, es);
+
+		es.addEventListener("progress", (e) => {
+			const event = JSON.parse(e.data) as ProgressEvent;
+			setAnalyses((prev) =>
+				prev.map((a) =>
+					a.sessionId === sessionId
+						? {
+								...a,
+								lastStage: event.stage,
+								lastMessage: event.message,
+								prTitle: event.pr_title ?? a.prTitle,
+								prNumber: event.pr_number ?? a.prNumber,
+							}
+						: a,
+				),
+			);
+		});
+
+		es.addEventListener("done", async () => {
+			es.close();
+			eventSourcesRef.current.delete(sessionId);
+			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,
+					),
+				);
+			} catch {
+				setAnalyses((prev) =>
+					prev.map((a) =>
+						a.sessionId === sessionId ? { ...a, status: "done" } : a,
+					),
+				);
+			}
+		});
+
+		es.addEventListener("analysis_error", (e) => {
+			es.close();
+			eventSourcesRef.current.delete(sessionId);
+			let msg = "Analysis failed";
+			try { msg = JSON.parse((e as MessageEvent).data).message ?? msg; } catch {}
+			setAnalyses((prev) =>
+				prev.map((a) =>
+					a.sessionId === sessionId ? { ...a, status: "error", error: msg } : a,
+				),
+			);
+		});
+
+		es.onerror = () => {
+			if (es.readyState === EventSource.CLOSED) {
+				eventSourcesRef.current.delete(sessionId);
+			}
+		};
+	}, []);
+
+	const dismiss = useCallback((sessionId: string) => {
+		const es = eventSourcesRef.current.get(sessionId);
+		if (es) {
+			es.close();
+			eventSourcesRef.current.delete(sessionId);
+		}
+		setAnalyses((prev) => prev.filter((a) => a.sessionId !== sessionId));
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			for (const es of eventSourcesRef.current.values()) es.close();
+		};
+	}, []);
+
+	const track = useCallback((sessionId: string, prInput: string) => {
+		trackInternal(sessionId, prInput);
+	}, [trackInternal]);
+
+	return { analyses, track, dismiss };
+}

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

@@ -0,0 +1,244 @@
+import { useEffect, useCallback, useSyncExternalStore } from "react";
+import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/output.ts";
+
+interface ChatSessionState {
+	messages: ChatMessage[];
+	loading: boolean;
+	streaming: { segments: ChatSegment[]; activeToolName?: string } | null;
+	loaded: boolean;
+}
+
+type Listener = () => void;
+
+class ChatStore {
+	private sessions = new Map<string, ChatSessionState>();
+	private listeners = new Set<Listener>();
+	private abortControllers = new Map<string, AbortController>();
+
+	private getOrCreate(sessionId: string): ChatSessionState {
+		let s = this.sessions.get(sessionId);
+		if (!s) {
+			s = { messages: [], loading: false, streaming: null, loaded: false };
+			this.sessions.set(sessionId, s);
+		}
+		return s;
+	}
+
+	private notify() {
+		for (const l of this.listeners) l();
+	}
+
+	subscribe(listener: Listener): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
+
+	getState(sessionId: string): ChatSessionState | null {
+		return this.sessions.get(sessionId) ?? null;
+	}
+
+	isLoading(sessionId: string): boolean {
+		return this.sessions.get(sessionId)?.loading ?? false;
+	}
+
+	getLoadingSessions(): Array<{ sessionId: string; streaming: ChatSessionState["streaming"] }> {
+		const result: Array<{ sessionId: string; streaming: ChatSessionState["streaming"] }> = [];
+		for (const [id, s] of this.sessions) {
+			if (s.loading) result.push({ sessionId: id, streaming: s.streaming });
+		}
+		return result;
+	}
+
+	async loadHistory(sessionId: string): Promise<void> {
+		const s = this.getOrCreate(sessionId);
+		if (s.loaded) return;
+		try {
+			const res = await fetch(`/api/sessions/${sessionId}/chat`);
+			const data = await res.json() as ChatMessage[];
+			s.messages = data;
+			s.loaded = true;
+		} catch {
+			s.loaded = true;
+		}
+		this.notify();
+	}
+
+	async sendMessage(sessionId: string, text: string): Promise<void> {
+		const s = this.getOrCreate(sessionId);
+		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();
+
+		const controller = new AbortController();
+		this.abortControllers.set(sessionId, controller);
+
+		try {
+			const res = await fetch(`/api/sessions/${sessionId}/chat`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ message: text }),
+				signal: controller.signal,
+			});
+
+			if (!res.ok) {
+				const err = await res.json() as { error?: string };
+				throw new Error(err.error ?? `HTTP ${res.status}`);
+			}
+
+			const reader = res.body!.getReader();
+			const decoder = new TextDecoder();
+			let buffer = "";
+			let fullText = "";
+			const orderedSegments: ChatSegment[] = [];
+			const allToolCalls: ChatToolCall[] = [];
+			let pendingEvent = "";
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+
+				buffer += decoder.decode(value, { stream: true });
+				const lines = buffer.split("\n");
+				buffer = lines.pop() ?? "";
+
+				for (const line of lines) {
+					const trimmed = line.trim();
+					if (!trimmed) { pendingEvent = ""; continue; }
+					if (trimmed.startsWith("event: ")) { pendingEvent = trimmed.slice(7); continue; }
+					if (!trimmed.startsWith("data: ")) continue;
+
+					try {
+						const data = JSON.parse(trimmed.slice(6));
+						switch (pendingEvent) {
+							case "text": {
+								fullText += data.content ?? "";
+								const lastSeg = orderedSegments[orderedSegments.length - 1];
+								if (lastSeg && lastSeg.type === "text") {
+									lastSeg.content += data.content ?? "";
+								} else {
+									orderedSegments.push({ type: "text", content: data.content ?? "" });
+								}
+								s.streaming = { segments: [...orderedSegments] };
+								this.notify();
+								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();
+								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();
+								break;
+							}
+							case "done": break;
+							case "chat_error": throw new Error(data.message ?? "Chat error");
+						}
+					} catch (parseErr) {
+						if (parseErr instanceof Error && parseErr.message === "Chat error") throw parseErr;
+					}
+					pendingEvent = "";
+				}
+			}
+
+			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, {
+					role: "assistant",
+					content: `Error: ${err instanceof Error ? err.message : String(err)}`,
+					timestamp: new Date().toISOString(),
+				}];
+			}
+		} finally {
+			s.loading = false;
+			s.streaming = null;
+			this.abortControllers.delete(sessionId);
+			this.notify();
+		}
+	}
+
+	async undo(sessionId: string): Promise<void> {
+		const s = this.getOrCreate(sessionId);
+		const lastAssistantIdx = s.messages.findLastIndex((m) => m.role === "assistant");
+		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();
+		await fetch(`/api/sessions/${sessionId}/chat/undo`, { method: "POST" }).catch(() => {});
+	}
+}
+
+export const chatStore = new ChatStore();
+
+const subscribeFn = (cb: () => void) => chatStore.subscribe(cb);
+
+const EMPTY_STATE: ChatSessionState = { messages: [], loading: false, streaming: null, loaded: false };
+const EMPTY_LOADING: Array<{ sessionId: string; streaming: ChatSessionState["streaming"] }> = [];
+
+export function useChatStore(sessionId?: string | null) {
+	const stableId = sessionId ?? "";
+
+	const getSnapshot = useCallback(
+		() => (stableId ? chatStore.getState(stableId) : null) ?? EMPTY_STATE,
+		[stableId],
+	);
+
+	const state = useSyncExternalStore(subscribeFn, getSnapshot);
+
+	useEffect(() => {
+		if (stableId) chatStore.loadHistory(stableId);
+	}, [stableId]);
+
+	const sendMessage = useCallback((text?: string) => {
+		const msg = text?.trim();
+		if (!stableId || !msg) return;
+		if (msg.replace(/\n/g, "").trim() === "/undo") {
+			chatStore.undo(stableId);
+			return;
+		}
+		chatStore.sendMessage(stableId, msg);
+	}, [stableId]);
+
+	return {
+		messages: state.messages,
+		loading: state.loading,
+		streaming: state.streaming,
+		loaded: state.loaded,
+		sendMessage,
+	};
+}
+
+let lastLoadingSnapshot: Array<{ sessionId: string; streaming: ChatSessionState["streaming"] }> = EMPTY_LOADING;
+
+function getLoadingSnapshot() {
+	const current = chatStore.getLoadingSessions();
+	if (current.length === 0 && lastLoadingSnapshot.length === 0) return lastLoadingSnapshot;
+	if (
+		current.length === lastLoadingSnapshot.length &&
+		current.every((c, i) => c.sessionId === lastLoadingSnapshot[i]?.sessionId)
+	) return lastLoadingSnapshot;
+	lastLoadingSnapshot = current;
+	return lastLoadingSnapshot;
+}
+
+export function useChatLoadingIndicator(): Array<{ sessionId: string; streaming: ChatSessionState["streaming"] }> {
+	return useSyncExternalStore(subscribeFn, getLoadingSnapshot);
+}

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

@@ -2,10 +2,11 @@ import { useState, useEffect } from "react";
 
 interface Features {
 	cartoon: boolean;
+	version: string;
 }
 
 export function useFeatures(): Features {
-	const [features, setFeatures] = useState<Features>({ cartoon: false });
+	const [features, setFeatures] = useState<Features>({ cartoon: false, version: "" });
 
 	useEffect(() => {
 		fetch("/api/features")

package/src/web/index.html

@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>newpr</title>
 	<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.28/dist/katex.min.css" crossorigin />
 	<script>document.head.appendChild(Object.assign(document.createElement("link"),{rel:"stylesheet",href:"/styles.css"}))</script>
 </head>
 <body>

package/src/web/server/routes.ts

@@ -8,7 +8,7 @@ import { fetchPrBody, fetchPrComments } from "../../github/fetch-pr.ts";
 import { parseDiff } from "../../diff/parser.ts";
 import { parsePrInput } from "../../github/parse-pr.ts";
 import { writeStoredConfig, type StoredConfig } from "../../config/store.ts";
-import { startAnalysis, getSession, cancelAnalysis, subscribe } from "./session-manager.ts";
+import { startAnalysis, getSession, cancelAnalysis, subscribe, listActiveSessions } from "./session-manager.ts";
 import { generateCartoon } from "../../llm/cartoon.ts";
 import { chatWithTools, type ChatTool, type ChatStreamEvent } from "../../llm/client.ts";
 import { detectAgents, runAgent } from "../../workspace/agent.ts";
@@ -182,6 +182,14 @@ $$
 					parameters: { type: "object", properties: {} },
 				},
 			},
+			{
+				type: "function",
+				function: {
+					name: "run_react_doctor",
+					description: "Run react-doctor on the PR's codebase to get a React code quality score (0-100) and diagnostics for security, performance, correctness, and architecture issues. Only useful for React/JSX/TSX projects.",
+					parameters: { type: "object", properties: {} },
+				},
+			},
 			{
 				type: "function",
 				function: {
@@ -526,7 +534,8 @@ $$
 		},
 
 		"GET /api/features": () => {
-			return json({ cartoon: !!options.cartoon });
+			const { getVersion } = require("../../version.ts");
+			return json({ cartoon: !!options.cartoon, version: getVersion() });
 		},
 
 		"POST /api/review": async (req: Request) => {
@@ -564,6 +573,10 @@ $$
 			return json(options.preflight ?? null);
 		},
 
+		"GET /api/active-analyses": () => {
+			return json(listActiveSessions());
+		},
+
 		"GET /api/sessions/:id/comments": async (req: Request) => {
 			const url = new URL(req.url);
 			const segments = url.pathname.split("/");
@@ -875,6 +888,32 @@ $$
 							return `Error: ${err instanceof Error ? err.message : String(err)}`;
 						}
 					}
+					case "run_react_doctor": {
+						const agents = await detectAgents();
+						if (agents.length > 0) {
+							try {
+								const result = await runAgent(
+									agents[0]!,
+									process.cwd(),
+									"Run react-doctor on this project:\n\nnpx -y react-doctor@latest . --verbose\n\nReturn the FULL output including the score and all diagnostics.",
+									{ timeout: 60_000 },
+								);
+								if (result.answer.trim()) return result.answer;
+							} catch {}
+						}
+						try {
+							const proc = Bun.spawn(["npx", "-y", "react-doctor@latest", ".", "--verbose"], {
+								cwd: process.cwd(),
+								stdout: "pipe",
+								stderr: "pipe",
+							});
+							const output = await new Response(proc.stdout).text();
+							const stderr = await new Response(proc.stderr).text();
+							return output.trim() || stderr.trim() || "react-doctor produced no output";
+						} catch (err) {
+							return `Error running react-doctor: ${err instanceof Error ? err.message : String(err)}`;
+						}
+					}
 					case "web_search": {
 						const query = args.query as string;
 						if (!query) return "Error: query argument required";

package/src/web/server/session-manager.ts

@@ -9,6 +9,7 @@ type SessionStatus = "running" | "done" | "error" | "canceled";
 
 interface AnalysisSession {
 	id: string;
+	prInput: string;
 	status: SessionStatus;
 	events: ProgressEvent[];
 	result?: NewprOutput;
@@ -16,6 +17,8 @@ interface AnalysisSession {
 	error?: string;
 	startedAt: number;
 	finishedAt?: number;
+	prTitle?: string;
+	prNumber?: number;
 	abortController: AbortController;
 	subscribers: Set<(event: ProgressEvent | { type: "done" | "error"; data?: string }) => void>;
 }
@@ -53,6 +56,7 @@ export function startAnalysis(
 
 	const session: AnalysisSession = {
 		id,
+		prInput,
 		status: "running",
 		events: [],
 		startedAt: Date.now(),
@@ -84,6 +88,8 @@ async function runPipeline(
 			onProgress: (event: ProgressEvent) => {
 				const stamped = { ...event, timestamp: event.timestamp ?? Date.now() };
 				session.events.push(stamped);
+				if (event.pr_title) session.prTitle = event.pr_title;
+				if (event.pr_number) session.prNumber = event.pr_number;
 				for (const sub of session.subscribers) {
 					sub(stamped);
 				}
@@ -129,6 +135,34 @@ export function cancelAnalysis(id: string): boolean {
 	return true;
 }
 
+export function listActiveSessions(): Array<{
+	id: string;
+	prInput: string;
+	status: SessionStatus;
+	startedAt: number;
+	prTitle?: string;
+	prNumber?: number;
+	lastStage?: string;
+	lastMessage?: string;
+}> {
+	const result: ReturnType<typeof listActiveSessions> = [];
+	for (const s of sessions.values()) {
+		if (s.status !== "running") continue;
+		const lastEvent = s.events[s.events.length - 1];
+		result.push({
+			id: s.id,
+			prInput: s.prInput,
+			status: s.status,
+			startedAt: s.startedAt,
+			prTitle: s.prTitle,
+			prNumber: s.prNumber,
+			lastStage: lastEvent?.stage,
+			lastMessage: lastEvent?.message,
+		});
+	}
+	return result;
+}
+
 export function subscribe(
 	id: string,
 	callback: (event: ProgressEvent | { type: "done" | "error"; data?: string }) => void,

package/src/web/server.ts

@@ -4,6 +4,7 @@ import { createRoutes } from "./server/routes.ts";
 import index from "./index.html";
 
 import type { PreflightResult } from "../cli/preflight.ts";
+import { getVersion } from "../version.ts";
 
 interface WebServerOptions {
 	port: number;
@@ -125,6 +126,9 @@ export async function startWebServer(options: WebServerOptions): Promise<void> {
 			if (path === "/api/preflight" && req.method === "GET") {
 				return routes["GET /api/preflight"]();
 			}
+			if (path === "/api/active-analyses" && req.method === "GET") {
+				return routes["GET /api/active-analyses"]();
+			}
 			if (path === "/api/cartoon" && req.method === "POST") {
 				return routes["POST /api/cartoon"](req);
 			}
@@ -148,7 +152,7 @@ export async function startWebServer(options: WebServerOptions): Promise<void> {
 	const green = (s: string) => `\x1b[32m${s}\x1b[0m`;
 
 	console.log("");
-	console.log(`  ${bold("newpr")} ${dim("v0.3.0")}`);
+	console.log(`  ${bold("newpr")} ${dim(`v${getVersion()}`)}`);
 	console.log("");
 	console.log(`  ${dim("→")} Local    ${cyan(url)}`);
 	console.log(`  ${dim("→")} Model    ${dim(config.model)}`);