newpr 0.4.0 → 0.5.1

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 { 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";
@@ -17,7 +18,8 @@ const RENDER_CAP = 2000;
 const TOTAL_CAP = 3000;
 
 function parseLines(patch: string): DiffLine[] {
-	const raw = patch.split("\n");
+	let raw = patch.split("\n");
+	while (raw.length > 0 && raw[raw.length - 1] === "") raw.pop();
 	const lines: DiffLine[] = [];
 	let oldNum = 0;
 	let newNum = 0;
@@ -60,6 +62,8 @@ function parseLines(patch: string): DiffLine[] {
 			oldNum++;
 		} else if (line.startsWith("\\")) {
 			lines.push({ type: "context", content: line, oldNum: null, newNum: null });
+		} else if (line === "" && (oldNum === 0 && newNum === 0)) {
+			continue;
 		} else {
 			const text = line.startsWith(" ") ? line.slice(1) : line;
 			if (oldNum > 0 || newNum > 0) {
@@ -106,27 +110,48 @@ function useTokenizedLines(
 	return useMemo(() => {
 		if (!hl || !lang) return null;
 
-		const codeIndices: number[] = [];
-		const codeLines: string[] = [];
+		const newIndices: number[] = [];
+		const newLines: string[] = [];
+		const oldIndices: number[] = [];
+		const oldLines: string[] = [];
+
 		for (let i = 0; i < lines.length; i++) {
 			const t = lines[i]!.type;
-			if (t === "added" || t === "removed" || t === "context") {
-				codeIndices.push(i);
-				codeLines.push(lines[i]!.content);
+			if (t === "added" || t === "context") {
+				newIndices.push(i);
+				newLines.push(lines[i]!.content);
+			}
+			if (t === "removed") {
+				oldIndices.push(i);
+				oldLines.push(lines[i]!.content);
+			}
+			if (t === "context") {
+				oldIndices.push(i);
+				oldLines.push(lines[i]!.content);
 			}
 		}
 
-		if (codeLines.length === 0) return null;
+		const map: TokenMap = new Map();
+		const theme = dark ? "github-dark" : "github-light";
 
 		try {
-			const theme = dark ? "github-dark" : "github-light";
-			const result = hl.codeToTokens(codeLines.join("\n"), { lang, theme });
-			const map: TokenMap = new Map();
-			for (let j = 0; j < codeIndices.length; j++) {
-				const tokens = result.tokens[j];
-				if (tokens) map.set(codeIndices[j]!, tokens);
+			if (newLines.length > 0) {
+				const result = hl.codeToTokens(newLines.join("\n"), { lang, theme });
+				for (let j = 0; j < newIndices.length; j++) {
+					const tokens = result.tokens[j];
+					if (tokens) map.set(newIndices[j]!, tokens);
+				}
+			}
+			if (oldLines.length > 0) {
+				const result = hl.codeToTokens(oldLines.join("\n"), { lang, theme });
+				for (let j = 0; j < oldIndices.length; j++) {
+					if (!map.has(oldIndices[j]!)) {
+						const tokens = result.tokens[j];
+						if (tokens) map.set(oldIndices[j]!, tokens);
+					}
+				}
 			}
-			return map;
+			return map.size > 0 ? map : null;
 		} catch {
 			return null;
 		}
@@ -375,6 +400,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 +537,11 @@ function InlineComments({
 	formTarget,
 	onSubmit,
 	onCancel,
+	sessionId,
+	filePath,
+	startLine,
+	endLine,
+	codeSnippet,
 }: {
 	comments: DiffComment[];
 	currentUser: { login: string; avatar_url: string } | null;
@@ -391,16 +550,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>
 	);
 }
@@ -412,6 +603,7 @@ export function DiffViewer({
 	githubUrl,
 	scrollToLine,
 	scrollToLineEnd,
+	scrollContainerRef,
 }: {
 	patch: string;
 	filePath: string;
@@ -419,6 +611,7 @@ export function DiffViewer({
 	githubUrl?: string;
 	scrollToLine?: number;
 	scrollToLineEnd?: number;
+	scrollContainerRef?: React.RefObject<HTMLElement | null>;
 }) {
 	const [showAll, setShowAll] = useState(false);
 	const hl = useHighlighter();
@@ -428,15 +621,18 @@ export function DiffViewer({
 	const tokenMap = useTokenizedLines(hl, allLines, lang, dark);
 	const isCapped = !showAll && allLines.length > TOTAL_CAP;
 	const lines = isCapped ? allLines.slice(0, RENDER_CAP) : allLines;
-	const fileName = filePath.split("/").pop() ?? filePath;
 
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [visibleWidth, setVisibleWidth] = useState(0);
 
 	const highlightedRef = useRef<HTMLElement[]>([]);
+	const scrollKeyRef = useRef(0);
 
 	useEffect(() => {
+		scrollKeyRef.current++;
+		const currentKey = scrollKeyRef.current;
+
 		for (const el of highlightedRef.current) {
 			el.style.boxShadow = "";
 		}
@@ -445,6 +641,7 @@ export function DiffViewer({
 		if (!scrollToLine || !containerRef.current) return;
 		const endLine = scrollToLineEnd ?? scrollToLine;
 		const timer = setTimeout(() => {
+			if (scrollKeyRef.current !== currentKey) return;
 			const container = containerRef.current;
 			if (!container) return;
 			let scrollTarget: HTMLElement | null = null;
@@ -457,11 +654,14 @@ export function DiffViewer({
 				}
 			}
 			if (scrollTarget) {
-				let scrollParent = scrollTarget.parentElement;
-				while (scrollParent) {
-					const style = getComputedStyle(scrollParent);
-					if (style.overflowY === "auto" || style.overflowY === "scroll") break;
-					scrollParent = scrollParent.parentElement;
+				let scrollParent: HTMLElement | null = scrollContainerRef?.current ?? null;
+				if (!scrollParent) {
+					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();
@@ -469,7 +669,7 @@ export function DiffViewer({
 					scrollParent.scrollTop += targetRect.top - parentRect.top - parentRect.height / 2;
 				}
 			}
-		}, 100);
+		}, 50);
 		return () => clearTimeout(timer);
 	}, [scrollToLine, scrollToLineEnd, patch]);
 	const [comments, setComments] = useState<DiffComment[]>([]);
@@ -595,21 +795,20 @@ export function DiffViewer({
 		return () => document.removeEventListener("mouseup", handleUp);
 	}, []);
 
-	const commentCount = comments.length;
+	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]);
 
 	return (
-		<div ref={containerRef} className="rounded-lg border overflow-hidden">
-			<div className="sticky top-0 z-10 bg-muted px-3 py-1.5 border-b flex items-center gap-2">
-				<span className="text-xs font-mono font-medium truncate flex-1" title={filePath}>
-					{fileName}
-				</span>
-				{commentCount > 0 && (
-					<span className="flex items-center gap-1 text-[10px] text-muted-foreground shrink-0">
-						<MessageSquare className="h-3 w-3" />
-						{commentCount}
-					</span>
-				)}
-			</div>
+		<div ref={containerRef} className="overflow-hidden">
 			<div ref={scrollRef} className="overflow-x-auto">
 				<div className="min-w-max font-mono text-xs leading-5 select-text">
 					{lines.map((line, i) => {
@@ -691,6 +890,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/Markdown.tsx

@@ -240,7 +240,7 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 						className={`underline decoration-1 underline-offset-[3px] cursor-pointer transition-colors ${
 							isActive
 								? "decoration-blue-500 dark:decoration-blue-400 bg-blue-500/5 rounded-sm"
-								: "decoration-foreground/15 hover:decoration-foreground/40"
+								: "decoration-foreground/30 hover:decoration-foreground/60"
 						}`}
 					>
 						{children}
@@ -248,7 +248,7 @@ 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 className="underline decoration-foreground/25 decoration-1 underline-offset-[3px]">{children}</span>;
 			}
 			const { node, ...rest } = allProps as Record<string, unknown> & { node?: unknown };
 			return <span {...rest as React.HTMLAttributes<HTMLSpanElement>}>{children}</span>;

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,8 @@ export function ResultsScreen({
 	cartoonEnabled,
 	sessionId,
 	onTabChange,
+	onReanalyze,
+	enabledPlugins,
 }: {
 	data: NewprOutput;
 	onBack: () => void;
@@ -54,10 +58,13 @@ export function ResultsScreen({
 	cartoonEnabled?: boolean;
 	sessionId?: string | null;
 	onTabChange?: (tab: string) => void;
+	onReanalyze?: (prUrl: string) => void;
+	enabledPlugins?: string[];
 }) {
 	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 +180,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,7 +236,13 @@ export function ResultsScreen({
 						<FolderTree className="h-3 w-3 shrink-0" />
 						Files
 					</TabsTrigger>
-					{cartoonEnabled && (
+					{(!enabledPlugins || enabledPlugins.includes("slides")) && (
+						<TabsTrigger value="slides">
+							<Presentation className="h-3 w-3 shrink-0" />
+							Slides
+						</TabsTrigger>
+					)}
+					{(!enabledPlugins || enabledPlugins.includes("cartoon")) && (
 						<TabsTrigger value="cartoon">
 							<Sparkles className="h-3 w-3 shrink-0" />
 							Comic
@@ -237,6 +268,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} />