newpr 0.3.0 → 0.5.0

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

@@ -1,9 +1,10 @@
 import { useState, useEffect, useMemo, useRef, useCallback, type ReactNode } from "react";
 import { type Highlighter, type ThemedToken } from "shiki";
-import { MessageSquare, Trash2, ExternalLink, CornerDownLeft, Pencil, Check, X } from "lucide-react";
+import { MessageSquare, Trash2, ExternalLink, CornerDownLeft, Pencil, Check, X, Sparkles, Loader2 } from "lucide-react";
 import { ensureHighlighter, getHighlighterSync, detectShikiLang, type ShikiLang } from "../lib/shiki.ts";
 import type { DiffComment } from "../../../types/output.ts";
 import { TipTapEditor } from "./TipTapEditor.tsx";
+import { Markdown } from "./Markdown.tsx";
 
 interface DiffLine {
 	type: "header" | "hunk" | "added" | "removed" | "context" | "binary";
@@ -375,6 +376,135 @@ function CommentForm({
 	);
 }
 
+function AskAiPanel({
+	sessionId,
+	filePath,
+	startLine,
+	endLine,
+	codeSnippet,
+	onClose,
+}: {
+	sessionId: string;
+	filePath: string;
+	startLine: number;
+	endLine: number;
+	codeSnippet: string;
+	onClose: () => void;
+}) {
+	const [question, setQuestion] = useState("");
+	const [response, setResponse] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [autoStarted, setAutoStarted] = useState(false);
+
+	const ask = useCallback(async (customQuestion?: string) => {
+		setLoading(true);
+		setResponse("");
+		const q = customQuestion ?? question.trim();
+		const prompt = q
+			? `Regarding this code in ${filePath} (lines ${startLine}-${endLine}):\n\`\`\`\n${codeSnippet}\n\`\`\`\n\nQuestion: ${q}`
+			: `Analyze this code in ${filePath} (lines ${startLine}-${endLine}). Explain what it does, identify any issues (bugs, performance, security, style), and suggest improvements:\n\`\`\`\n${codeSnippet}\n\`\`\``;
+
+		try {
+			const res = await fetch(`/api/sessions/${sessionId}/ask-inline`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ message: prompt }),
+			});
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+			const reader = res.body!.getReader();
+			const decoder = new TextDecoder();
+			let buffer = "";
+			let text = "";
+			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));
+						if (pendingEvent === "text") {
+							text += data.content ?? "";
+							setResponse(text);
+						}
+					} catch {}
+					pendingEvent = "";
+				}
+			}
+		} catch (err) {
+			setResponse(`Error: ${err instanceof Error ? err.message : String(err)}`);
+		} finally {
+			setLoading(false);
+		}
+	}, [sessionId, filePath, startLine, endLine, codeSnippet, question]);
+
+	useEffect(() => {
+		if (!autoStarted) {
+			setAutoStarted(true);
+			ask();
+		}
+	}, [autoStarted, ask]);
+
+	return (
+		<div className="px-3 py-2.5 font-sans">
+			<div className="space-y-2.5">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60">
+						<Sparkles className="h-3 w-3" />
+						<span>AI Analysis</span>
+						<span className="text-muted-foreground/30">L{startLine}{endLine !== startLine ? `-L${endLine}` : ""}</span>
+					</div>
+					<button type="button" onClick={onClose} className="h-5 w-5 flex items-center justify-center rounded text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors">
+						<X className="h-3 w-3" />
+					</button>
+				</div>
+
+				{loading && !response && (
+					<div className="flex items-center gap-1.5 py-2">
+						<Loader2 className="h-3 w-3 animate-spin text-muted-foreground/40" />
+						<span className="text-[11px] text-muted-foreground/40">Analyzing...</span>
+					</div>
+				)}
+
+				{response && (
+					<div className="text-xs leading-relaxed">
+						<Markdown>{response}</Markdown>
+					</div>
+				)}
+
+				{!loading && (
+					<div className="flex items-center gap-1.5">
+						<input
+							type="text"
+							value={question}
+							onChange={(e) => setQuestion(e.target.value)}
+							onKeyDown={(e) => { if (e.key === "Enter" && question.trim()) ask(); }}
+							placeholder="Ask a follow-up..."
+							className="flex-1 h-7 rounded-md border bg-background px-2.5 text-[11px] placeholder:text-muted-foreground/30 focus:outline-none focus:border-foreground/20"
+						/>
+						<button
+							type="button"
+							onClick={() => ask()}
+							disabled={loading}
+							className="h-7 px-2.5 rounded-md bg-foreground text-background text-[11px] font-medium disabled:opacity-30 hover:opacity-80 transition-opacity"
+						>
+							Ask
+						</button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
 function InlineComments({
 	comments,
 	currentUser,
@@ -383,6 +513,11 @@ function InlineComments({
 	formTarget,
 	onSubmit,
 	onCancel,
+	sessionId,
+	filePath,
+	startLine,
+	endLine,
+	codeSnippet,
 }: {
 	comments: DiffComment[];
 	currentUser: { login: string; avatar_url: string } | null;
@@ -391,16 +526,48 @@ function InlineComments({
 	formTarget: boolean;
 	onSubmit: (body: string) => Promise<void>;
 	onCancel: () => void;
+	sessionId?: string | null;
+	filePath: string;
+	startLine?: number;
+	endLine?: number;
+	codeSnippet?: string;
 }) {
+	const [showAi, setShowAi] = useState(false);
 	const hasComments = comments.length > 0;
-	if (!hasComments && !formTarget) return null;
+	if (!hasComments && !formTarget && !showAi) return null;
 
 	return (
 		<div className="border-y border-border/30 bg-card/80 font-sans divide-y divide-border/20">
 			{comments.map((c) => (
 				<CommentCard key={c.id} comment={c} currentLogin={currentUser?.login ?? null} onEdit={onEdit} onDelete={onDelete} />
 			))}
-			{formTarget && <CommentForm currentUser={currentUser} onSubmit={onSubmit} onCancel={onCancel} />}
+			{formTarget && (
+				<div>
+					<CommentForm currentUser={currentUser} onSubmit={onSubmit} onCancel={onCancel} />
+					{sessionId && startLine && endLine && codeSnippet && !showAi && (
+						<div className="px-3 pb-2">
+							<button
+								type="button"
+								onClick={() => setShowAi(true)}
+								className="flex items-center gap-1.5 text-[11px] text-muted-foreground/40 hover:text-foreground transition-colors"
+							>
+								<Sparkles className="h-3 w-3" />
+								Ask AI about this code
+							</button>
+						</div>
+					)}
+				</div>
+			)}
+			{showAi && sessionId && startLine && endLine && codeSnippet && (
+				<AskAiPanel
+					sessionId={sessionId}
+					filePath={filePath}
+					startLine={startLine}
+					endLine={endLine}
+					codeSnippet={codeSnippet}
+					onClose={() => setShowAi(false)}
+				/>
+			)}
 		</div>
 	);
 }
@@ -456,7 +623,19 @@ export function DiffViewer({
 					if (!scrollTarget) scrollTarget = el;
 				}
 			}
-			scrollTarget?.scrollIntoView({ behavior: "instant", block: "center" });
+			if (scrollTarget) {
+				let scrollParent = scrollTarget.parentElement;
+				while (scrollParent) {
+					const style = getComputedStyle(scrollParent);
+					if (style.overflowY === "auto" || style.overflowY === "scroll") break;
+					scrollParent = scrollParent.parentElement;
+				}
+				if (scrollParent) {
+					const parentRect = scrollParent.getBoundingClientRect();
+					const targetRect = scrollTarget.getBoundingClientRect();
+					scrollParent.scrollTop += targetRect.top - parentRect.top - parentRect.height / 2;
+				}
+			}
 		}, 100);
 		return () => clearTimeout(timer);
 	}, [scrollToLine, scrollToLineEnd, patch]);
@@ -583,6 +762,18 @@ export function DiffViewer({
 		return () => document.removeEventListener("mouseup", handleUp);
 	}, []);
 
+	const codeSnippetForRange = useMemo(() => {
+		if (!formRange) return "";
+		return lines
+			.filter((l) => {
+				const lk = lineKey(l);
+				if (!lk || lk.side !== formRange.side) return false;
+				return lk.num >= formRange.startLine && lk.num <= formRange.endLine;
+			})
+			.map((l) => l.content)
+			.join("\n");
+	}, [formRange, lines]);
+
 	const commentCount = comments.length;
 
 	return (
@@ -679,6 +870,11 @@ export function DiffViewer({
 										formTarget={!!isFormAnchor}
 										onSubmit={handleAddComment}
 										onCancel={() => setFormRange(null)}
+										sessionId={sessionId}
+										filePath={filePath}
+										startLine={formRange?.startLine}
+										endLine={formRange?.endLine}
+										codeSnippet={codeSnippetForRange}
 									/>
 									</div>
 								)}

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

@@ -82,10 +82,12 @@ export function InputScreen({
 	onSubmit,
 	sessions,
 	onSessionSelect,
+	version,
 }: {
 	onSubmit: (pr: string) => void;
 	sessions?: SessionRecord[];
 	onSessionSelect?: (id: string) => void;
+	version?: string;
 }) {
 	const [value, setValue] = useState("");
 	const [focused, setFocused] = useState(false);
@@ -112,6 +114,7 @@ export function InputScreen({
 				<div className="space-y-2">
 					<div className="flex items-baseline gap-2">
 						<h1 className="text-sm font-semibold tracking-tight font-mono">newpr</h1>
+						{version && <span className="text-[10px] text-muted-foreground/30">v{version}</span>}
 						<span className="text-[10px] text-muted-foreground/40">AI code review</span>
 					</div>
 					<p className="text-xs text-muted-foreground">

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

@@ -4,7 +4,6 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
-import "katex/dist/katex.min.css";
 import type { Components } from "react-markdown";
 import type { Highlighter } from "shiki";
 import { ensureHighlighter, getHighlighterSync, langFromClassName } from "../lib/shiki.ts";
@@ -96,8 +95,7 @@ function MediaEmbed({ src }: { src: string }) {
 }
 
 const ANCHOR_RE = /\[\[(group|file):([^\]]+)\]\]/g;
-const LINE_ANCHOR_WITH_TEXT_RE = /\[\[line:([^\]]+)\]\]\(([^)]+)\)/g;
-const LINE_ANCHOR_BARE_RE = /\[\[line:([^\]]+)\]\]/g;
+
 const BOLD_CJK_RE = /\*\*(.+?)\*\*/g;
 
 function hasCJK(text: string): boolean {
@@ -120,17 +118,65 @@ function inlineMarkdownToHtml(text: string): string {
 		.replace(/`([^`]+)`/g, "<code>$1</code>");
 }
 
+function replaceLineAnchors(text: string): string {
+	const OPEN = "[[line:";
+	let result = "";
+	let i = 0;
+	while (i < text.length) {
+		const start = text.indexOf(OPEN, i);
+		if (start === -1) {
+			result += text.slice(i);
+			break;
+		}
+		result += text.slice(i, start);
+
+		const idStart = start + OPEN.length;
+		const closeBracket = text.indexOf("]", idStart);
+		if (closeBracket === -1) {
+			result += text.slice(start);
+			break;
+		}
+
+		const id = text.slice(idStart, closeBracket);
+		let afterClose = closeBracket + 1;
+
+		if (text[afterClose] === "]") afterClose++;
+
+		let label: string | null = null;
+		if (text[afterClose] === "(") {
+			let depth = 1;
+			let end = afterClose + 1;
+			while (end < text.length && depth > 0) {
+				if (text[end] === "(") depth++;
+				else if (text[end] === ")") depth--;
+				end++;
+			}
+			if (depth === 0) {
+				label = text.slice(afterClose + 1, end - 1);
+				afterClose = end;
+			}
+		}
+
+		if (text[afterClose] === "]") afterClose++;
+
+		const encoded = encodeURIComponent(id);
+		if (label) {
+			result += `<span data-line-ref="${encoded}">${inlineMarkdownToHtml(label)}</span>`;
+		} else {
+			result += `<span data-line-ref="${encoded}">${formatLineLabel(id)}</span>`;
+		}
+		i = afterClose;
+	}
+	return result;
+}
+
 function preprocess(text: string): string {
-	return text
-		.replace(LINE_ANCHOR_WITH_TEXT_RE, (_, id, label) => {
-			const encoded = encodeURIComponent(id);
-			return `<span data-line-ref="${encoded}">${inlineMarkdownToHtml(label)}</span>`;
-		})
-		.replace(LINE_ANCHOR_BARE_RE, (_, id) => {
-			const encoded = encodeURIComponent(id);
-			const label = formatLineLabel(id);
-			return `<span data-line-ref="${encoded}">${label}</span>`;
-		})
+	const mathBlocks: string[] = [];
+	const preserved = text
+		.replace(/\$\$[\s\S]+?\$\$/g, (m) => { mathBlocks.push(m); return `\x00MATH_BLOCK_${mathBlocks.length - 1}\x00`; })
+		.replace(/\$(?!\$)(.+?)\$/g, (m) => { mathBlocks.push(m); return `\x00MATH_BLOCK_${mathBlocks.length - 1}\x00`; });
+
+	const processed = replaceLineAnchors(preserved)
 		.replace(ANCHOR_RE, (_, kind, id) => {
 			const encoded = encodeURIComponent(id);
 			return `![${kind}:${encoded}](newpr)`;
@@ -139,6 +185,8 @@ function preprocess(text: string): string {
 			if (hasCJK(inner)) return `<strong>${inner}</strong>`;
 			return match;
 		});
+
+	return processed.replace(/\x00MATH_BLOCK_(\d+)\x00/g, (_, idx) => mathBlocks[Number(idx)]!);
 }
 
 export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
@@ -178,7 +226,8 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 			<pre className="bg-muted rounded-lg p-4 overflow-x-auto mb-3 whitespace-pre text-xs font-mono [&>span>pre]:!bg-transparent [&>span>pre]:!p-0 [&>span>pre]:!m-0">{children}</pre>
 		),
 		span: ({ children, ...props }) => {
-			const lineRef = (props as Record<string, unknown>)["data-line-ref"] as string | undefined;
+			const allProps = props as Record<string, unknown>;
+			const lineRef = allProps["data-line-ref"] as string | undefined;
 			if (lineRef && onAnchorClick) {
 				const id = decodeURIComponent(lineRef);
 				const isActive = activeId === `line:${id}`;
@@ -201,7 +250,8 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 			if (lineRef) {
 				return <span className="underline decoration-foreground/10 decoration-1 underline-offset-[3px]">{children}</span>;
 			}
-			return <span>{children}</span>;
+			const { node, ...rest } = allProps as Record<string, unknown> & { node?: unknown };
+			return <span {...rest as React.HTMLAttributes<HTMLSpanElement>}>{children}</span>;
 		},
 		a: ({ href, children }) => {
 			if (href && isMediaUrl(href)) {
@@ -284,5 +334,5 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 		td: ({ children }) => <td className="border-b border-border px-3 py-1.5 text-sm">{children}</td>,
 	};
 
-	return <ReactMarkdown remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]} rehypePlugins={[[rehypeKatex, { throwOnError: false, strict: false }], rehypeRaw]} components={components}>{processed}</ReactMarkdown>;
+	return <ReactMarkdown remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]} rehypePlugins={[[rehypeRaw, { passThrough: ["math", "inlineMath"] }], [rehypeKatex, { throwOnError: false, strict: false, output: "html" }]]} components={components}>{processed}</ReactMarkdown>;
 }

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { ArrowLeft, Layers, FolderTree, BookOpen, MessageSquare, GitBranch, Sparkles, Check, ChevronDown } from "lucide-react";
+import { ArrowLeft, Layers, FolderTree, BookOpen, MessageSquare, GitBranch, Sparkles, Check, ChevronDown, AlertTriangle, RefreshCw, Presentation } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../components/ui/tabs.tsx";
 import type { NewprOutput } from "../../../types/output.ts";
 import { GroupsPanel } from "../panels/GroupsPanel.tsx";
@@ -7,9 +7,11 @@ import { FilesPanel } from "../panels/FilesPanel.tsx";
 import { StoryPanel } from "../panels/StoryPanel.tsx";
 import { DiscussionPanel } from "../panels/DiscussionPanel.tsx";
 import { CartoonPanel } from "../panels/CartoonPanel.tsx";
+import { SlidesPanel } from "../panels/SlidesPanel.tsx";
 import { ReviewModal } from "./ReviewModal.tsx";
+import { useOutdatedCheck } from "../hooks/useOutdatedCheck.ts";
 
-const VALID_TABS = ["story", "discussion", "groups", "files", "cartoon"] as const;
+const VALID_TABS = ["story", "discussion", "groups", "files", "slides", "cartoon"] as const;
 type TabValue = typeof VALID_TABS[number];
 
 function getInitialTab(): TabValue {
@@ -46,6 +48,7 @@ export function ResultsScreen({
 	cartoonEnabled,
 	sessionId,
 	onTabChange,
+	onReanalyze,
 }: {
 	data: NewprOutput;
 	onBack: () => void;
@@ -54,10 +57,12 @@ export function ResultsScreen({
 	cartoonEnabled?: boolean;
 	sessionId?: string | null;
 	onTabChange?: (tab: string) => void;
+	onReanalyze?: (prUrl: string) => void;
 }) {
 	const { meta, summary } = data;
 	const [tab, setTab] = useState<TabValue>(getInitialTab);
 	const [reviewOpen, setReviewOpen] = useState(false);
+	const outdated = useOutdatedCheck(sessionId);
 
 	const stickyRef = useRef<HTMLDivElement>(null);
 	const collapsibleRef = useRef<HTMLDivElement>(null);
@@ -173,6 +178,24 @@ export function ResultsScreen({
 							</div>
 						</div>
 					</div>
+					{outdated?.outdated && (
+						<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.
+							</span>
+							{onReanalyze && (
+								<button
+									type="button"
+									onClick={() => onReanalyze(meta.pr_url)}
+									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
+								</button>
+							)}
+						</div>
+					)}
 				</div>
 
 				<div ref={compactRef} className="overflow-hidden transition-[max-height,opacity] duration-200" style={{ maxHeight: 0, opacity: 0 }}>
@@ -211,6 +234,10 @@ export function ResultsScreen({
 						<FolderTree className="h-3 w-3 shrink-0" />
 						Files
 					</TabsTrigger>
+					<TabsTrigger value="slides">
+						<Presentation className="h-3 w-3 shrink-0" />
+						Slides
+					</TabsTrigger>
 					{cartoonEnabled && (
 						<TabsTrigger value="cartoon">
 							<Sparkles className="h-3 w-3 shrink-0" />
@@ -237,6 +264,9 @@ export function ResultsScreen({
 					onFileSelect={(path: string) => onAnchorClick("file", path)}
 				/>
 			</TabsContent>
+			<TabsContent value="slides">
+				<SlidesPanel data={data} sessionId={sessionId} />
+			</TabsContent>
 			{cartoonEnabled && (
 				<TabsContent value="cartoon">
 					<CartoonPanel data={data} sessionId={sessionId} />

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

@@ -20,7 +20,7 @@ interface ConfigData {
 }
 
 const MODELS = [
-	"anthropic/claude-sonnet-4.5",
+	"anthropic/claude-sonnet-4.6",
 	"anthropic/claude-sonnet-4-20250514",
 	"openai/gpt-4.1",
 	"openai/o3",

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

@@ -0,0 +1,152 @@
+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";
+
+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) => {
+					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) => {
+					sendNotification("Analysis complete", prInput);
+					return prev.map((a) =>
+						a.sessionId === sessionId ? { ...a, status: "done" as const } : 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 {}
+			sendNotification("Analysis failed", msg);
+			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 };
+}