newpr 0.1.3 → 0.2.0

package/src/types/output.ts

@@ -14,6 +14,7 @@ export type RiskLevel = "low" | "medium" | "high";
 export interface PrMeta {
 	pr_number: number;
 	pr_title: string;
+	pr_body?: string;
 	pr_url: string;
 	base_branch: string;
 	head_branch: string;
@@ -56,6 +57,49 @@ export interface CartoonImage {
 	generatedAt: string;
 }
 
+export interface DiffComment {
+	id: string;
+	sessionId: string;
+	filePath: string;
+	line: number;
+	startLine?: number;
+	side: "old" | "new";
+	body: string;
+	author: string;
+	authorAvatar?: string;
+	createdAt: string;
+	githubUrl?: string;
+	githubCommentId?: number;
+}
+
+export interface PendingComment {
+	tempId: string;
+	filePath: string;
+	line: number;
+	side: "old" | "new";
+	body: string;
+}
+
+export interface ChatToolCall {
+	id: string;
+	name: string;
+	arguments: Record<string, unknown>;
+	result?: string;
+}
+
+export type ChatSegment =
+	| { type: "text"; content: string }
+	| { type: "tool_call"; toolCall: ChatToolCall };
+
+export interface ChatMessage {
+	role: "user" | "assistant" | "tool";
+	content: string;
+	toolCalls?: ChatToolCall[];
+	segments?: ChatSegment[];
+	toolCallId?: string;
+	timestamp: string;
+}
+
 export interface NewprOutput {
 	meta: PrMeta;
 	summary: PrSummary;

package/src/web/client/App.tsx

@@ -10,6 +10,8 @@ import { LoadingTimeline } from "./components/LoadingTimeline.tsx";
 import { ResultsScreen } from "./components/ResultsScreen.tsx";
 import { ErrorScreen } from "./components/ErrorScreen.tsx";
 import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
+import { useChatState, ChatProvider, ChatInput } from "./components/ChatSection.tsx";
+import type { AnchorItem } from "./components/TipTapEditor.tsx";
 
 function getUrlParam(key: string): string | null {
 	return new URLSearchParams(window.location.search).get(key);
@@ -80,11 +82,28 @@ export function App() {
 		analysis.reset();
 	}
 
+	const diffSessionId = analysis.historyId ?? analysis.sessionId;
+	const prUrl = analysis.result?.meta.pr_url;
 	const detailPanel = detailTarget ? (
-		<DetailPane target={detailTarget} onClose={() => setActiveId(null)} />
+		<DetailPane target={detailTarget} sessionId={diffSessionId} prUrl={prUrl} onClose={() => setActiveId(null)} />
 	) : null;
 
+	const chatState = useChatState(analysis.phase === "done" ? diffSessionId : null);
+
+	const anchorItems = useMemo<AnchorItem[]>(() => {
+		if (!analysis.result) return [];
+		const items: AnchorItem[] = [];
+		for (const g of analysis.result.groups) {
+			items.push({ kind: "group", id: g.name, label: g.name });
+		}
+		for (const f of analysis.result.files) {
+			items.push({ kind: "file", id: f.path, label: f.path });
+		}
+		return items;
+	}, [analysis.result]);
+
 	return (
+		<ChatProvider state={chatState} anchorItems={anchorItems}>
 		<AppShell
 			theme={themeCtx.theme}
 			onThemeChange={themeCtx.setTheme}
@@ -93,9 +112,15 @@ export function App() {
 			onSessionSelect={handleSessionSelect}
 			onNewAnalysis={handleNewAnalysis}
 			detailPanel={detailPanel}
+			bottomBar={analysis.phase === "done" ? <ChatInput /> : undefined}
+			activeSessionId={diffSessionId}
 		>
 			{analysis.phase === "idle" && (
-				<InputScreen onSubmit={(pr) => analysis.start(pr)} />
+				<InputScreen
+					onSubmit={(pr) => analysis.start(pr)}
+					sessions={sessions}
+					onSessionSelect={handleSessionSelect}
+				/>
 			)}
 			{analysis.phase === "loading" && (
 				<LoadingTimeline
@@ -110,7 +135,7 @@ export function App() {
 					activeId={activeId}
 					onAnchorClick={handleAnchorClick}
 					cartoonEnabled={features.cartoon}
-					sessionId={analysis.sessionId}
+					sessionId={diffSessionId}
 				/>
 			)}
 			{analysis.phase === "error" && (
@@ -121,5 +146,6 @@ export function App() {
 				/>
 			)}
 		</AppShell>
+		</ChatProvider>
 	);
 }

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

@@ -1,5 +1,5 @@
-import { useState, useCallback } from "react";
-import { Sun, Moon, Monitor, Plus, Clock, Settings } from "lucide-react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Sun, Moon, Monitor, Plus, Settings, ArrowUp } from "lucide-react";
 import type { SessionRecord } from "../../../history/types.ts";
 import type { GithubUser } from "../hooks/useGithubUser.ts";
 import { SettingsPanel } from "./SettingsPanel.tsx";
@@ -13,9 +13,9 @@ const THEME_ICON = { light: Sun, dark: Moon, system: Monitor };
 const LEFT_MIN = 180;
 const LEFT_MAX = 400;
 const LEFT_DEFAULT = 256;
-const RIGHT_MIN = 240;
-const RIGHT_MAX = 520;
-const RIGHT_DEFAULT = 320;
+const RIGHT_MIN = 400;
+const RIGHT_MAX = 1200;
+const RIGHT_DEFAULT = 560;
 
 const RISK_DOT: Record<string, string> = {
 	low: "bg-green-500",
@@ -43,6 +43,8 @@ export function AppShell({
 	onSessionSelect,
 	onNewAnalysis,
 	detailPanel,
+	bottomBar,
+	activeSessionId,
 	children,
 }: {
 	theme: Theme;
@@ -52,11 +54,27 @@ export function AppShell({
 	onSessionSelect: (sessionId: string) => void;
 	onNewAnalysis: () => void;
 	detailPanel?: React.ReactNode;
+	bottomBar?: React.ReactNode;
+	activeSessionId?: string | null;
 	children: React.ReactNode;
 }) {
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
 	const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
+	const [showScrollTop, setShowScrollTop] = useState(false);
+	const mainRef = useRef<HTMLElement>(null);
+	const prevDetailPanel = useRef(detailPanel);
+
+	useEffect(() => {
+		const wasNull = prevDetailPanel.current == null;
+		prevDetailPanel.current = detailPanel;
+		if (wasNull && detailPanel != null) {
+			const available = window.innerWidth - leftWidth - 2;
+			const half = Math.floor(available * 0.55);
+			setRightWidth(Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, half)));
+		}
+	}, [detailPanel, leftWidth]);
+
 	const Icon = THEME_ICON[theme];
 	const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length]!;
 
@@ -64,104 +82,122 @@ export function AppShell({
 		setLeftWidth((w) => Math.min(LEFT_MAX, Math.max(LEFT_MIN, w + delta)));
 	}, []);
 
+	const CENTER_MIN = 400;
+
 	const handleRightResize = useCallback((delta: number) => {
-		setRightWidth((w) => Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, w + delta)));
+		setRightWidth((w) => {
+			const available = window.innerWidth - leftWidth - 2;
+			const max = Math.min(RIGHT_MAX, available - CENTER_MIN);
+			return Math.min(max, Math.max(RIGHT_MIN, w + delta));
+		});
+	}, [leftWidth]);
+
+	useEffect(() => {
+		const el = mainRef.current;
+		if (!el) return;
+		const onScroll = () => setShowScrollTop(el.scrollTop > 300);
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => el.removeEventListener("scroll", onScroll);
+	}, []);
+
+	const scrollToTop = useCallback(() => {
+		mainRef.current?.scrollTo({ top: 0, behavior: "smooth" });
 	}, []);
 
 	return (
 		<div className="flex h-screen bg-background overflow-hidden">
 			<aside className="flex flex-col shrink-0 border-r bg-background" style={{ width: leftWidth }}>
-				<div className="flex h-14 items-center justify-between px-4 border-b">
+				<div className="flex h-12 items-center justify-between px-4 shrink-0">
 					<button
 						type="button"
 						onClick={onNewAnalysis}
-						className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+						className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
 					>
-						<span className="text-sm font-semibold tracking-tight">newpr</span>
-						<span className="text-[10px] text-muted-foreground">v0.1.0</span>
+						<span className="text-xs font-semibold tracking-tight font-mono">newpr</span>
 					</button>
 					<button
 						type="button"
 						onClick={onNewAnalysis}
-						className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+						className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/50 hover:bg-accent hover:text-foreground transition-colors"
 						title="New analysis"
 					>
-						<Plus className="h-4 w-4" />
+						<Plus className="h-3.5 w-3.5" />
 					</button>
 				</div>
 
-				<div className="flex-1 overflow-y-auto">
-					{sessions.length > 0 && (
-						<div className="px-2 py-3">
-							<div className="px-2 pb-2 text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
-								Recent
-							</div>
-							<div className="space-y-0.5">
-								{sessions.map((s) => (
+				<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 py-2 text-left hover:bg-accent/50 transition-colors group"
+										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-1.5 h-2 w-2 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
+										<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-sm truncate group-hover:text-foreground transition-colors">
+											<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.5 mt-0.5 text-[11px] text-muted-foreground">
-												<span className="truncate">{s.repo.split("/").pop()}</span>
-												<span>#{s.pr_number}</span>
-												<span className="text-muted-foreground/50">·</span>
-												<Clock className="h-2.5 w-2.5" />
+											<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>
+												<span className="text-muted-foreground/20 mx-0.5">·</span>
 												<span>{formatTimeAgo(s.analyzed_at)}</span>
 											</div>
 										</div>
 									</button>
-								))}
-							</div>
+								);
+							})}
+						</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>
 
-				<div className="border-t px-3 py-3 space-y-2">
+				<div className="shrink-0 border-t px-2 py-2 space-y-1">
 					{githubUser && (
 						<a
 							href={githubUser.html_url}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="flex items-center gap-2.5 rounded-md px-1.5 py-1.5 hover:bg-accent/50 transition-colors"
+							className="flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-accent/40 transition-colors"
 						>
 							<img
 								src={githubUser.avatar_url}
 								alt={githubUser.login}
-								className="h-6 w-6 rounded-full"
+								className="h-5 w-5 rounded-full"
 							/>
-							<div className="flex-1 min-w-0">
-								<div className="text-xs font-medium truncate">{githubUser.name ?? githubUser.login}</div>
-								{githubUser.name && (
-									<div className="text-[10px] text-muted-foreground truncate">@{githubUser.login}</div>
-								)}
-							</div>
+							<span className="text-[11px] font-medium truncate flex-1">{githubUser.name ?? githubUser.login}</span>
 						</a>
 					)}
-					<div className="flex items-center justify-between px-1.5">
+					<div className="flex items-center gap-1 px-1">
 						<button
 							type="button"
 							onClick={() => onThemeChange(next)}
-							className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+							className="flex items-center gap-1.5 px-1.5 py-1 rounded-md text-[11px] text-muted-foreground/50 hover:text-foreground hover:bg-accent/40 transition-colors"
 							title={`Switch to ${next} mode`}
 						>
-							<Icon className="h-3.5 w-3.5" />
+							<Icon className="h-3 w-3" />
 							<span className="capitalize">{theme}</span>
 						</button>
+						<div className="flex-1" />
 						<button
 							type="button"
 							onClick={() => setSettingsOpen(true)}
-							className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+							className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:bg-accent/40 hover:text-foreground transition-colors"
 							title="Settings"
 						>
-							<Settings className="h-3.5 w-3.5" />
+							<Settings className="h-3 w-3" />
 						</button>
 					</div>
 				</div>
@@ -169,12 +205,23 @@ export function AppShell({
 
 			<ResizeHandle onResize={handleLeftResize} side="right" />
 
-			<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-				<main className="flex-1 overflow-y-auto">
-					<div className="mx-auto max-w-4xl px-10 py-10">
+			<div className="flex-1 flex flex-col overflow-hidden relative" style={{ minWidth: 400 }}>
+				<main ref={mainRef} className="flex-1 overflow-y-auto">
+					<div className="mx-auto max-w-5xl px-10 py-10">
 						{children}
 					</div>
 				</main>
+				{bottomBar}
+				{showScrollTop && (
+					<button
+						type="button"
+						onClick={scrollToTop}
+						className="absolute bottom-3 right-4 z-20 flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+						style={{ bottom: bottomBar ? 76 : 12 }}
+					>
+						<ArrowUp className="h-3.5 w-3.5" />
+					</button>
+				)}
 			</div>
 
 			{detailPanel && (