newpr 0.4.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>
 	);
 }
@@ -595,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 (
@@ -691,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/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/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/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 {}
+}