newpr 0.1.3 → 0.3.0

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",
@@ -24,6 +24,13 @@ const RISK_DOT: Record<string, string> = {
 	critical: "bg-red-600",
 };
 
+const STATE_LABEL: Record<string, { text: string; class: string }> = {
+	open: { text: "Open", class: "text-green-600 dark:text-green-400" },
+	merged: { text: "Merged", class: "text-purple-600 dark:text-purple-400" },
+	closed: { text: "Closed", class: "text-red-600 dark:text-red-400" },
+	draft: { text: "Draft", class: "text-neutral-500" },
+};
+
 function formatTimeAgo(isoDate: string): string {
 	const diff = Date.now() - new Date(isoDate).getTime();
 	const minutes = Math.floor(diff / 60000);
@@ -43,6 +50,8 @@ export function AppShell({
 	onSessionSelect,
 	onNewAnalysis,
 	detailPanel,
+	bottomBar,
+	activeSessionId,
 	children,
 }: {
 	theme: Theme;
@@ -52,11 +61,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 +89,128 @@ 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>
+												{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>
 										</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 +218,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 && (

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

@@ -0,0 +1,427 @@
+import { 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";
+
+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[];
+}
+
+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);
+
+	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]);
+	return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
+}
+
+function ToolCallDisplay({ tc }: { tc: ChatToolCall }) {
+	const [open, setOpen] = useState(false);
+	const truncated = tc.result && tc.result.length > 200;
+	const displayResult = truncated && !open ? `${tc.result!.slice(0, 200)}…` : tc.result;
+
+	return (
+		<div className="text-[11px]">
+			<button
+				type="button"
+				onClick={() => setOpen(!open)}
+				className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent/60 text-muted-foreground/60 hover:text-foreground hover:bg-accent transition-colors text-left"
+			>
+				<ChevronRight className={`h-2.5 w-2.5 shrink-0 transition-transform ${open ? "rotate-90" : ""}`} />
+				<span className="font-mono">{tc.name}</span>
+				{Object.keys(tc.arguments).length > 0 && (
+					<span className="text-muted-foreground/30 truncate max-w-[200px]">
+						{Object.entries(tc.arguments).map(([k, v]) => `${k}: ${String(v)}`).join(", ")}
+					</span>
+				)}
+			</button>
+			{open && tc.result && (
+				<pre className="mt-1 ml-1 px-2.5 py-2 text-[10px] font-mono text-muted-foreground/50 whitespace-pre-wrap break-all max-h-48 overflow-y-auto rounded-md bg-accent/30">
+					{displayResult}
+				</pre>
+			)}
+		</div>
+	);
+}
+
+function segmentsFromMessage(msg: ChatMessage): ChatSegment[] {
+	if (msg.segments && msg.segments.length > 0) return msg.segments;
+	const segs: ChatSegment[] = [];
+	if (msg.toolCalls && msg.toolCalls.length > 0) {
+		for (const tc of msg.toolCalls) {
+			segs.push({ type: "tool_call", toolCall: tc });
+		}
+	}
+	if (msg.content) {
+		segs.push({ type: "text", content: msg.content });
+	}
+	return segs;
+}
+
+function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick, activeId }: {
+	segments: ChatSegment[];
+	activeToolName?: string;
+	isStreaming?: boolean;
+	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
+	activeId?: string | null;
+}) {
+	const hasContent = segments.some((s) => s.type === "text" && s.content);
+
+	return (
+		<div className="space-y-2">
+			{segments.map((seg, i) => {
+				if (seg.type === "tool_call") {
+					return <ToolCallDisplay key={seg.toolCall.id} tc={seg.toolCall} />;
+				}
+				return seg.content ? (
+					<div key={`text-${i}`} className="text-xs leading-relaxed">
+						<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">
+					<Loader2 className="h-2.5 w-2.5 animate-spin" />
+					<span className="font-mono">{activeToolName}</span>
+				</div>
+			)}
+			{isStreaming && !hasContent && !activeToolName && segments.length === 0 && (
+				<div className="flex items-center gap-1.5">
+					<span className="flex gap-1">
+						<span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/30 animate-pulse" />
+						<span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:150ms]" />
+						<span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:300ms]" />
+					</span>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export function ChatMessages({ onAnchorClick, activeId }: {
+	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
+	activeId?: string | null;
+}) {
+	const ctx = useContext(ChatContext);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const isNearBottomRef = useRef(true);
+	const mainElRef = useRef<HTMLElement | null>(null);
+	const scrollListenerRef = useRef<(() => void) | null>(null);
+
+	useEffect(() => {
+		if (scrollListenerRef.current) return;
+		const el = containerRef.current?.closest("main") as HTMLElement | null;
+		if (!el) return;
+		mainElRef.current = el;
+		const onScroll = () => {
+			isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+		};
+		scrollListenerRef.current = onScroll;
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			el.removeEventListener("scroll", onScroll);
+			scrollListenerRef.current = null;
+		};
+	});
+
+	useEffect(() => {
+		const el = mainElRef.current ?? containerRef.current?.closest("main") as HTMLElement | null;
+		if (el) {
+			mainElRef.current = el;
+			if (isNearBottomRef.current) {
+				el.scrollTop = el.scrollHeight;
+			}
+		}
+	}, [ctx?.state.messages, ctx?.state.streaming]);
+
+	if (!ctx) return null;
+	const { messages, streaming, loaded, loading } = ctx.state;
+	const hasMessages = messages.length > 0 || loading;
+
+	if (!hasMessages && loaded) {
+		return (
+			<div className="border-t mt-6 pt-6 text-center">
+				<p className="text-[11px] text-muted-foreground/40">Ask anything about this PR</p>
+				<p className="text-[10px] text-muted-foreground/20 mt-1">@ to reference files · / for commands</p>
+			</div>
+		);
+	}
+
+	if (!hasMessages) return null;
+
+	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) => {
+				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>
+						</div>
+					);
+				}
+				return (
+					<AssistantMessage
+						key={`assistant-${i}`}
+						segments={segmentsFromMessage(msg)}
+						onAnchorClick={onAnchorClick}
+						activeId={activeId}
+					/>
+				);
+			})}
+
+			{streaming && (
+				<AssistantMessage
+					segments={streaming.segments}
+					activeToolName={streaming.activeToolName}
+					onAnchorClick={onAnchorClick}
+					activeId={activeId}
+					isStreaming
+				/>
+			)}
+		</div>
+	);
+}
+
+export function ChatInput() {
+	const ctx = useContext(ChatContext);
+	const editorRef = useRef<ReturnType<typeof useEditor>>(null);
+
+	const handleSubmit = useCallback(() => {
+		if (!ctx) return;
+		const text = editorRef.current ? getTextWithAnchors(editorRef.current) : "";
+		if (!text) return;
+		editorRef.current?.commands.clearContent();
+		ctx.state.sendMessage(text);
+	}, [ctx]);
+
+	const chatCommands = useMemo<CommandItem[]>(() => [
+		{ id: "undo", label: "/undo", description: "Remove last exchange" },
+	], []);
+
+	if (!ctx) return null;
+	const { loading } = ctx.state;
+	const { anchorItems } = ctx;
+
+	return (
+		<div className="px-10 pb-3 pt-2 border-t bg-background">
+			<div className="mx-auto max-w-5xl">
+				<div className="relative rounded-xl border bg-background px-4 py-2.5 pr-12 focus-within:border-foreground/15 focus-within:shadow-sm transition-all">
+					<TipTapEditor
+						editorRef={editorRef}
+						placeholder="Ask about this PR..."
+						disabled={loading}
+						submitOnEnter
+						onSubmit={handleSubmit}
+						className="max-h-[120px] overflow-y-auto"
+						anchorItems={anchorItems}
+						commands={chatCommands}
+					/>
+					<button
+						type="button"
+						onClick={handleSubmit}
+						disabled={loading}
+						className="absolute right-2.5 bottom-2 flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background transition-opacity disabled:opacity-20 hover:opacity-80"
+					>
+						{loading ? (
+							<Loader2 className="h-3.5 w-3.5 animate-spin" />
+						) : (
+							<CornerDownLeft className="h-3.5 w-3.5" />
+						)}
+					</button>
+				</div>
+				<div className="flex items-center justify-between mt-1.5 px-1">
+					<span className="text-[10px] text-muted-foreground/25">
+						@ to reference · / for commands
+					</span>
+					<span className="text-[10px] text-muted-foreground/25">
+						Enter to send
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}