newpr 0.3.0 → 0.5.0

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

@@ -1,5 +1,7 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import { Sun, Moon, Monitor, Plus, Settings, ArrowUp } from "lucide-react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { Sun, Moon, Monitor, Plus, Settings, ArrowUp, Loader2, X, Check, AlertCircle, ChevronRight } from "lucide-react";
+import type { BackgroundAnalysis } from "../hooks/useBackgroundAnalyses.ts";
+import { useChatLoadingIndicator } from "../hooks/useChatStore.ts";
 import type { SessionRecord } from "../../../history/types.ts";
 import type { GithubUser } from "../hooks/useGithubUser.ts";
 import { SettingsPanel } from "./SettingsPanel.tsx";
@@ -42,6 +44,114 @@ function formatTimeAgo(isoDate: string): string {
 	return `${days}d`;
 }
 
+interface RepoGroup {
+	repo: string;
+	repoShort: string;
+	sessions: SessionRecord[];
+	latestAt: number;
+}
+
+function groupByRepo(sessions: SessionRecord[]): RepoGroup[] {
+	const map = new Map<string, SessionRecord[]>();
+	for (const s of sessions) {
+		const list = map.get(s.repo) ?? [];
+		list.push(s);
+		map.set(s.repo, list);
+	}
+	const groups: RepoGroup[] = [];
+	for (const [repo, list] of map) {
+		const latestAt = Math.max(...list.map((s) => new Date(s.analyzed_at).getTime()));
+		groups.push({ repo, repoShort: repo.split("/").pop() ?? repo, sessions: list, latestAt });
+	}
+	groups.sort((a, b) => b.latestAt - a.latestAt);
+	return groups;
+}
+
+function SessionList({
+	sessions,
+	activeSessionId,
+	onSessionSelect,
+}: {
+	sessions: SessionRecord[];
+	activeSessionId?: string | null;
+	onSessionSelect: (id: string) => void;
+}) {
+	const groups = useMemo(() => groupByRepo(sessions), [sessions]);
+	const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+
+	const toggle = useCallback((repo: string) => {
+		setCollapsed((prev) => {
+			const next = new Set(prev);
+			next.has(repo) ? next.delete(repo) : next.add(repo);
+			return next;
+		});
+	}, []);
+
+	if (sessions.length === 0) {
+		return (
+			<div className="flex-1 overflow-y-auto px-2 flex flex-col items-center justify-center text-center gap-2 opacity-40">
+				<p className="text-[11px] text-muted-foreground">No analyses yet</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex-1 overflow-y-auto px-2 py-1">
+			{groups.map((g) => {
+				const isCollapsed = collapsed.has(g.repo);
+				return (
+					<div key={g.repo} className="mb-1">
+						<button
+							type="button"
+							onClick={() => toggle(g.repo)}
+							className="w-full flex items-center gap-1.5 px-1.5 py-1 rounded-md hover:bg-accent/30 transition-colors"
+						>
+							<ChevronRight className={`h-2.5 w-2.5 text-muted-foreground/30 shrink-0 transition-transform ${isCollapsed ? "" : "rotate-90"}`} />
+							<span className="text-[11px] font-mono text-muted-foreground/60 truncate">{g.repoShort}</span>
+							<span className="text-[10px] text-muted-foreground/25 shrink-0">{g.sessions.length}</span>
+						</button>
+						{!isCollapsed && (
+							<div className="space-y-px mt-px">
+								{g.sessions.map((s) => {
+									const isActive = activeSessionId === s.id;
+									return (
+										<button
+											key={s.id}
+											type="button"
+											onClick={() => onSessionSelect(s.id)}
+											className={`w-full flex items-start gap-2 rounded-md pl-5 pr-2.5 py-1.5 text-left transition-colors group ${
+												isActive ? "bg-accent text-foreground" : "hover:bg-accent/40"
+											}`}
+										>
+											<span className={`mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
+											<div className="flex-1 min-w-0">
+												<div className={`text-[11px] truncate leading-tight ${isActive ? "font-medium" : "text-foreground/80 group-hover:text-foreground"} transition-colors`}>
+													{s.pr_title}
+												</div>
+												<div className="flex items-center gap-1 mt-0.5 text-[10px] text-muted-foreground/40">
+													<span className="font-mono">#{s.pr_number}</span>
+													{s.pr_state && STATE_LABEL[s.pr_state] && (
+														<>
+															<span className="text-muted-foreground/15">·</span>
+															<span className={STATE_LABEL[s.pr_state]!.class}>{STATE_LABEL[s.pr_state]!.text}</span>
+														</>
+													)}
+													<span className="text-muted-foreground/15">·</span>
+													<span>{formatTimeAgo(s.analyzed_at)}</span>
+												</div>
+											</div>
+										</button>
+									);
+								})}
+							</div>
+						)}
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
 export function AppShell({
 	theme,
 	onThemeChange,
@@ -52,6 +162,10 @@ export function AppShell({
 	detailPanel,
 	bottomBar,
 	activeSessionId,
+	version,
+	bgAnalyses,
+	onBgClick,
+	onBgDismiss,
 	children,
 }: {
 	theme: Theme;
@@ -63,6 +177,10 @@ export function AppShell({
 	detailPanel?: React.ReactNode;
 	bottomBar?: React.ReactNode;
 	activeSessionId?: string | null;
+	version?: string;
+	bgAnalyses?: BackgroundAnalysis[];
+	onBgClick?: (sessionId: string) => void;
+	onBgDismiss?: (sessionId: string) => void;
 	children: React.ReactNode;
 }) {
 	const [settingsOpen, setSettingsOpen] = useState(false);
@@ -71,6 +189,7 @@ export function AppShell({
 	const [showScrollTop, setShowScrollTop] = useState(false);
 	const mainRef = useRef<HTMLElement>(null);
 	const prevDetailPanel = useRef(detailPanel);
+	const chatLoading = useChatLoadingIndicator();
 
 	useEffect(() => {
 		const wasNull = prevDetailPanel.current == null;
@@ -121,6 +240,7 @@ export function AppShell({
 						className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
 					>
 						<span className="text-xs font-semibold tracking-tight font-mono">newpr</span>
+						{version && <span className="text-[10px] text-muted-foreground/30">v{version}</span>}
 					</button>
 					<button
 						type="button"
@@ -132,50 +252,58 @@ export function AppShell({
 					</button>
 				</div>
 
-				<div className="flex-1 overflow-y-auto px-2">
-					{sessions.length > 0 ? (
-						<div className="space-y-px">
-							{sessions.map((s) => {
-								const isActive = activeSessionId === s.id;
-								return (
-									<button
-										key={s.id}
-										type="button"
-										onClick={() => onSessionSelect(s.id)}
-										className={`w-full flex items-start gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors group ${
-											isActive
-												? "bg-accent text-foreground"
-												: "hover:bg-accent/40"
-										}`}
-									>
-										<span className={`mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
-										<div className="flex-1 min-w-0">
-											<div className={`text-xs truncate leading-tight ${isActive ? "font-medium" : "text-foreground/80 group-hover:text-foreground"} transition-colors`}>
-												{s.pr_title}
-											</div>
-											<div className="flex items-center gap-1 mt-1 text-[10px] text-muted-foreground/50">
-												<span className="font-mono truncate">{s.repo.split("/").pop()}</span>
-												<span className="font-mono">#{s.pr_number}</span>
-												{s.pr_state && STATE_LABEL[s.pr_state] && (
-													<>
-														<span className="text-muted-foreground/20 mx-0.5">·</span>
-														<span className={STATE_LABEL[s.pr_state]!.class}>{STATE_LABEL[s.pr_state]!.text}</span>
-													</>
-												)}
-												<span className="text-muted-foreground/20 mx-0.5">·</span>
-												<span>{formatTimeAgo(s.analyzed_at)}</span>
-											</div>
+				<SessionList
+					sessions={sessions}
+					activeSessionId={activeSessionId}
+					onSessionSelect={onSessionSelect}
+				/>
+
+				{bgAnalyses && bgAnalyses.length > 0 && (
+					<div className="shrink-0 border-t px-2 py-2 space-y-px">
+						{bgAnalyses.map((bg) => (
+							<div
+								key={bg.sessionId}
+								className="flex items-center gap-2 rounded-md px-2.5 py-1.5 group"
+							>
+								{bg.status === "running" && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground/40 shrink-0" />}
+								{bg.status === "done" && <Check className="h-3 w-3 text-green-500 shrink-0" />}
+								{bg.status === "error" && <AlertCircle className="h-3 w-3 text-red-500 shrink-0" />}
+								<button
+									type="button"
+									onClick={() => onBgClick?.(bg.sessionId)}
+									className="flex-1 min-w-0 text-left"
+								>
+									<div className="text-[11px] truncate text-muted-foreground/70">
+										{bg.prTitle ?? bg.prInput}
+									</div>
+									{bg.status === "running" && bg.lastMessage && (
+										<div className="text-[10px] text-muted-foreground/30 truncate font-mono mt-0.5">
+											{bg.lastMessage}
 										</div>
-									</button>
-								);
-							})}
-						</div>
-					) : (
-						<div className="flex flex-col items-center justify-center h-full text-center px-4 gap-2 opacity-40">
-							<p className="text-[11px] text-muted-foreground">No analyses yet</p>
-						</div>
-					)}
-				</div>
+									)}
+								</button>
+								<button
+									type="button"
+									onClick={(e) => { e.stopPropagation(); onBgDismiss?.(bg.sessionId); }}
+									className="h-4 w-4 flex items-center justify-center rounded text-muted-foreground/20 hover:text-muted-foreground/60 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+								>
+									<X className="h-2.5 w-2.5" />
+								</button>
+							</div>
+						))}
+					</div>
+				)}
+
+				{chatLoading.length > 0 && (
+					<div className="shrink-0 border-t px-2 py-2 space-y-px">
+						{chatLoading.map(({ sessionId: sid }) => (
+							<div key={sid} className="flex items-center gap-2 rounded-md px-2.5 py-1.5">
+								<Loader2 className="h-3 w-3 animate-spin text-blue-500/60 shrink-0" />
+								<span className="text-[11px] text-muted-foreground/50 truncate">Chat responding...</span>
+							</div>
+						))}
+					</div>
+				)}
 
 				<div className="shrink-0 border-t px-2 py-2 space-y-1">
 					{githubUser && (

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

@@ -1,198 +1,31 @@
-import { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } from "react";
+import React, { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } from "react";
 import { Loader2, ChevronRight, CornerDownLeft } from "lucide-react";
 import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/output.ts";
 import { Markdown } from "./Markdown.tsx";
 import { TipTapEditor, getTextWithAnchors, type AnchorItem, type CommandItem } from "./TipTapEditor.tsx";
 import type { useEditor } from "@tiptap/react";
+import { useChatStore } from "../hooks/useChatStore.ts";
 
 export interface ChatState {
 	messages: ChatMessage[];
-	input: string;
 	loading: boolean;
 	streaming: { segments: ChatSegment[]; activeToolName?: string } | null;
 	loaded: boolean;
-	setInput: (v: string) => void;
 	sendMessage: (text?: string) => void;
 }
 
 interface ChatContextValue {
 	state: ChatState;
 	anchorItems?: AnchorItem[];
+	analyzedAt?: string;
 }
 
 const ChatContext = createContext<ChatContextValue | null>(null);
 
-export function useChatState(sessionId?: string | null): ChatState {
-	const [messages, setMessages] = useState<ChatMessage[]>([]);
-	const [input, setInput] = useState("");
-	const [loading, setLoading] = useState(false);
-	const [streaming, setStreaming] = useState<ChatState["streaming"]>(null);
-	const [loaded, setLoaded] = useState(false);
-	const prevSessionId = useRef(sessionId);
+export { useChatStore as useChatState };
 
-	useEffect(() => {
-		if (prevSessionId.current !== sessionId) {
-			setMessages([]);
-			setInput("");
-			setLoading(false);
-			setStreaming(null);
-			setLoaded(false);
-			prevSessionId.current = sessionId;
-		}
-		if (!sessionId) return;
-		fetch(`/api/sessions/${sessionId}/chat`)
-			.then((r) => r.json())
-			.then((data) => {
-				setMessages(data as ChatMessage[]);
-				setLoaded(true);
-			})
-			.catch(() => setLoaded(true));
-	}, [sessionId]);
-
-	const undoLast = useCallback(async () => {
-		if (!sessionId) return;
-		setMessages((prev) => {
-			const lastAssistantIdx = prev.findLastIndex((m) => m.role === "assistant");
-			if (lastAssistantIdx === -1) return prev;
-			const lastUserIdx = prev.slice(0, lastAssistantIdx).findLastIndex((m) => m.role === "user");
-			const removeFrom = lastUserIdx >= 0 ? lastUserIdx : lastAssistantIdx;
-			return prev.slice(0, removeFrom);
-		});
-		await fetch(`/api/sessions/${sessionId}/chat/undo`, { method: "POST" }).catch(() => {});
-	}, [sessionId]);
-
-	const sendMessage = useCallback(async (text?: string) => {
-		const messageText = text?.trim() || input.trim();
-		if (!sessionId || !messageText || loading) return;
-
-		if (messageText.replace(/\n/g, "").trim() === "/undo") {
-			setInput("");
-			await undoLast();
-			return;
-		}
-
-		const userMessage = messageText;
-		setInput("");
-		setLoading(true);
-		setStreaming({ segments: [] });
-
-		setMessages((prev) => [...prev, {
-			role: "user",
-			content: userMessage,
-			timestamp: new Date().toISOString(),
-		}]);
-
-		try {
-			const res = await fetch(`/api/sessions/${sessionId}/chat`, {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ message: userMessage }),
-			});
-
-			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 ?? "" });
-								}
-								setStreaming({ 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 });
-								setStreaming({ segments: [...orderedSegments], activeToolName: data.name });
-								break;
-							}
-							case "tool_result": {
-								const tc = allToolCalls.find((c) => c.id === data.id);
-								if (tc) tc.result = data.result;
-								setStreaming({ segments: [...orderedSegments] });
-								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 = "";
-				}
-			}
-
-			setMessages((prev) => [...prev, {
-				role: "assistant",
-				content: fullText,
-				toolCalls: allToolCalls.length > 0 ? allToolCalls : undefined,
-				segments: orderedSegments.length > 0 ? orderedSegments : undefined,
-				timestamp: new Date().toISOString(),
-			}]);
-		} catch (err) {
-			setMessages((prev) => [...prev, {
-				role: "assistant",
-				content: `Error: ${err instanceof Error ? err.message : String(err)}`,
-				timestamp: new Date().toISOString(),
-			}]);
-		} finally {
-			setLoading(false);
-			setStreaming(null);
-		}
-	}, [sessionId, input, loading, undoLast]);
-
-	return { messages, input, loading, streaming, loaded, setInput, sendMessage };
-}
-
-export function ChatProvider({ state, anchorItems, children }: { state: ChatState; anchorItems?: AnchorItem[]; children: React.ReactNode }) {
-	const value = useMemo(() => ({ state, anchorItems }), [state, anchorItems]);
+export function ChatProvider({ state, anchorItems, analyzedAt, children }: { state: ChatState; anchorItems?: AnchorItem[]; analyzedAt?: string; children: React.ReactNode }) {
+	const value = useMemo(() => ({ state, anchorItems, analyzedAt }), [state, anchorItems, analyzedAt]);
 	return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 }
 
@@ -239,6 +72,33 @@ function segmentsFromMessage(msg: ChatMessage): ChatSegment[] {
 	return segs;
 }
 
+function ThrottledMarkdown({ content, onAnchorClick, activeId }: {
+	content: string;
+	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
+	activeId?: string | null;
+}) {
+	const [rendered, setRendered] = useState(content);
+	const pendingRef = useRef(content);
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		pendingRef.current = content;
+		if (!timerRef.current) {
+			timerRef.current = setTimeout(() => {
+				setRendered(pendingRef.current);
+				timerRef.current = null;
+			}, 150);
+		}
+		return () => {};
+	}, [content]);
+
+	useEffect(() => {
+		return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+	}, []);
+
+	return <Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{rendered}</Markdown>;
+}
+
 function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick, activeId }: {
 	segments: ChatSegment[];
 	activeToolName?: string;
@@ -254,11 +114,16 @@ function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick
 				if (seg.type === "tool_call") {
 					return <ToolCallDisplay key={seg.toolCall.id} tc={seg.toolCall} />;
 				}
-				return seg.content ? (
+				if (!seg.content) return null;
+				return (
 					<div key={`text-${i}`} className="text-xs leading-relaxed">
-						<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{seg.content}</Markdown>
+						{isStreaming ? (
+							<ThrottledMarkdown content={seg.content} onAnchorClick={onAnchorClick} activeId={activeId} />
+						) : (
+							<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{seg.content}</Markdown>
+						)}
 					</div>
-				) : null;
+				);
 			})}
 			{activeToolName && (
 				<div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-accent/40 text-[11px] text-muted-foreground/50">
@@ -317,6 +182,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 
 	if (!ctx) return null;
 	const { messages, streaming, loaded, loading } = ctx.state;
+	const { analyzedAt } = ctx;
 	const hasMessages = messages.length > 0 || loading;
 
 	if (!hasMessages && loaded) {
@@ -330,26 +196,51 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 
 	if (!hasMessages) return null;
 
+	let shownOutdatedDivider = false;
+
 	return (
 		<div ref={containerRef} className="border-t mt-6 pt-5 space-y-5">
 			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">Chat</div>
 			{messages.map((msg, i) => {
+				const isFromPreviousAnalysis = analyzedAt && msg.timestamp && msg.timestamp < analyzedAt;
+				let divider = null;
+				if (isFromPreviousAnalysis && !shownOutdatedDivider) {
+					shownOutdatedDivider = true;
+					divider = (
+						<div className="flex items-center gap-2 py-1">
+							<div className="flex-1 h-px bg-yellow-500/20" />
+							<span className="text-[10px] text-yellow-600/60 dark:text-yellow-400/50 shrink-0">Previous analysis</span>
+							<div className="flex-1 h-px bg-yellow-500/20" />
+						</div>
+					);
+				}
 				if (msg.role === "user") {
 					return (
-						<div key={`user-${i}`} className="flex justify-end">
-							<div className="max-w-[80%] rounded-xl rounded-br-sm bg-foreground text-background px-3.5 py-2 text-[11px] leading-relaxed">
-								{msg.content}
+						<div key={`user-${i}`}>
+							{divider}
+							<div className="flex justify-end">
+								<div className={`max-w-[80%] rounded-xl rounded-br-sm px-3.5 py-2 text-[11px] leading-relaxed ${
+									isFromPreviousAnalysis
+										? "bg-foreground/60 text-background"
+										: "bg-foreground text-background"
+								}`}>
+									{msg.content}
+								</div>
 							</div>
 						</div>
 					);
 				}
 				return (
-					<AssistantMessage
-						key={`assistant-${i}`}
-						segments={segmentsFromMessage(msg)}
-						onAnchorClick={onAnchorClick}
-						activeId={activeId}
-					/>
+					<div key={`assistant-${i}`}>
+						{divider}
+						<div className={isFromPreviousAnalysis ? "opacity-60" : ""}>
+							<AssistantMessage
+								segments={segmentsFromMessage(msg)}
+								onAnchorClick={onAnchorClick}
+								activeId={activeId}
+							/>
+						</div>
+					</div>
 				);
 			})}
 

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

@@ -164,6 +164,7 @@ function FileDetail({
 				)}
 				{patch && (
 					<DiffViewer
+						key={`${file.path}-${scrollToLine ?? 0}-${scrollToLineEnd ?? 0}`}
 						patch={patch}
 						filePath={file.path}
 						sessionId={sessionId}