newpr 0.3.0 → 0.4.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

@@ -4,14 +4,13 @@ import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/outp
 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;
 }
 
@@ -22,174 +21,7 @@ interface ChatContextValue {
 
 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 { useChatStore as useChatState };
 
 export function ChatProvider({ state, anchorItems, children }: { state: ChatState; anchorItems?: AnchorItem[]; children: React.ReactNode }) {
 	const value = useMemo(() => ({ state, anchorItems }), [state, anchorItems]);

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}

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

@@ -456,7 +456,19 @@ export function DiffViewer({
 					if (!scrollTarget) scrollTarget = el;
 				}
 			}
-			scrollTarget?.scrollIntoView({ behavior: "instant", block: "center" });
+			if (scrollTarget) {
+				let 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();
+					const targetRect = scrollTarget.getBoundingClientRect();
+					scrollParent.scrollTop += targetRect.top - parentRect.top - parentRect.height / 2;
+				}
+			}
 		}, 100);
 		return () => clearTimeout(timer);
 	}, [scrollToLine, scrollToLineEnd, patch]);

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

@@ -82,10 +82,12 @@ export function InputScreen({
 	onSubmit,
 	sessions,
 	onSessionSelect,
+	version,
 }: {
 	onSubmit: (pr: string) => void;
 	sessions?: SessionRecord[];
 	onSessionSelect?: (id: string) => void;
+	version?: string;
 }) {
 	const [value, setValue] = useState("");
 	const [focused, setFocused] = useState(false);
@@ -112,6 +114,7 @@ export function InputScreen({
 				<div className="space-y-2">
 					<div className="flex items-baseline gap-2">
 						<h1 className="text-sm font-semibold tracking-tight font-mono">newpr</h1>
+						{version && <span className="text-[10px] text-muted-foreground/30">v{version}</span>}
 						<span className="text-[10px] text-muted-foreground/40">AI code review</span>
 					</div>
 					<p className="text-xs text-muted-foreground">

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

@@ -4,7 +4,6 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
-import "katex/dist/katex.min.css";
 import type { Components } from "react-markdown";
 import type { Highlighter } from "shiki";
 import { ensureHighlighter, getHighlighterSync, langFromClassName } from "../lib/shiki.ts";
@@ -96,8 +95,7 @@ function MediaEmbed({ src }: { src: string }) {
 }
 
 const ANCHOR_RE = /\[\[(group|file):([^\]]+)\]\]/g;
-const LINE_ANCHOR_WITH_TEXT_RE = /\[\[line:([^\]]+)\]\]\(([^)]+)\)/g;
-const LINE_ANCHOR_BARE_RE = /\[\[line:([^\]]+)\]\]/g;
+
 const BOLD_CJK_RE = /\*\*(.+?)\*\*/g;
 
 function hasCJK(text: string): boolean {
@@ -120,17 +118,65 @@ function inlineMarkdownToHtml(text: string): string {
 		.replace(/`([^`]+)`/g, "<code>$1</code>");
 }
 
+function replaceLineAnchors(text: string): string {
+	const OPEN = "[[line:";
+	let result = "";
+	let i = 0;
+	while (i < text.length) {
+		const start = text.indexOf(OPEN, i);
+		if (start === -1) {
+			result += text.slice(i);
+			break;
+		}
+		result += text.slice(i, start);
+
+		const idStart = start + OPEN.length;
+		const closeBracket = text.indexOf("]", idStart);
+		if (closeBracket === -1) {
+			result += text.slice(start);
+			break;
+		}
+
+		const id = text.slice(idStart, closeBracket);
+		let afterClose = closeBracket + 1;
+
+		if (text[afterClose] === "]") afterClose++;
+
+		let label: string | null = null;
+		if (text[afterClose] === "(") {
+			let depth = 1;
+			let end = afterClose + 1;
+			while (end < text.length && depth > 0) {
+				if (text[end] === "(") depth++;
+				else if (text[end] === ")") depth--;
+				end++;
+			}
+			if (depth === 0) {
+				label = text.slice(afterClose + 1, end - 1);
+				afterClose = end;
+			}
+		}
+
+		if (text[afterClose] === "]") afterClose++;
+
+		const encoded = encodeURIComponent(id);
+		if (label) {
+			result += `<span data-line-ref="${encoded}">${inlineMarkdownToHtml(label)}</span>`;
+		} else {
+			result += `<span data-line-ref="${encoded}">${formatLineLabel(id)}</span>`;
+		}
+		i = afterClose;
+	}
+	return result;
+}
+
 function preprocess(text: string): string {
-	return text
-		.replace(LINE_ANCHOR_WITH_TEXT_RE, (_, id, label) => {
-			const encoded = encodeURIComponent(id);
-			return `<span data-line-ref="${encoded}">${inlineMarkdownToHtml(label)}</span>`;
-		})
-		.replace(LINE_ANCHOR_BARE_RE, (_, id) => {
-			const encoded = encodeURIComponent(id);
-			const label = formatLineLabel(id);
-			return `<span data-line-ref="${encoded}">${label}</span>`;
-		})
+	const mathBlocks: string[] = [];
+	const preserved = text
+		.replace(/\$\$[\s\S]+?\$\$/g, (m) => { mathBlocks.push(m); return `\x00MATH_BLOCK_${mathBlocks.length - 1}\x00`; })
+		.replace(/\$(?!\$)(.+?)\$/g, (m) => { mathBlocks.push(m); return `\x00MATH_BLOCK_${mathBlocks.length - 1}\x00`; });
+
+	const processed = replaceLineAnchors(preserved)
 		.replace(ANCHOR_RE, (_, kind, id) => {
 			const encoded = encodeURIComponent(id);
 			return `![${kind}:${encoded}](newpr)`;
@@ -139,6 +185,8 @@ function preprocess(text: string): string {
 			if (hasCJK(inner)) return `<strong>${inner}</strong>`;
 			return match;
 		});
+
+	return processed.replace(/\x00MATH_BLOCK_(\d+)\x00/g, (_, idx) => mathBlocks[Number(idx)]!);
 }
 
 export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
@@ -178,7 +226,8 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 			<pre className="bg-muted rounded-lg p-4 overflow-x-auto mb-3 whitespace-pre text-xs font-mono [&>span>pre]:!bg-transparent [&>span>pre]:!p-0 [&>span>pre]:!m-0">{children}</pre>
 		),
 		span: ({ children, ...props }) => {
-			const lineRef = (props as Record<string, unknown>)["data-line-ref"] as string | undefined;
+			const allProps = props as Record<string, unknown>;
+			const lineRef = allProps["data-line-ref"] as string | undefined;
 			if (lineRef && onAnchorClick) {
 				const id = decodeURIComponent(lineRef);
 				const isActive = activeId === `line:${id}`;
@@ -201,7 +250,8 @@ 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>{children}</span>;
+			const { node, ...rest } = allProps as Record<string, unknown> & { node?: unknown };
+			return <span {...rest as React.HTMLAttributes<HTMLSpanElement>}>{children}</span>;
 		},
 		a: ({ href, children }) => {
 			if (href && isMediaUrl(href)) {
@@ -284,5 +334,5 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 		td: ({ children }) => <td className="border-b border-border px-3 py-1.5 text-sm">{children}</td>,
 	};
 
-	return <ReactMarkdown remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]} rehypePlugins={[[rehypeKatex, { throwOnError: false, strict: false }], rehypeRaw]} components={components}>{processed}</ReactMarkdown>;
+	return <ReactMarkdown remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]} rehypePlugins={[[rehypeRaw, { passThrough: ["math", "inlineMath"] }], [rehypeKatex, { throwOnError: false, strict: false, output: "html" }]]} components={components}>{processed}</ReactMarkdown>;
 }

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

@@ -20,7 +20,7 @@ interface ConfigData {
 }
 
 const MODELS = [
-	"anthropic/claude-sonnet-4.5",
+	"anthropic/claude-sonnet-4.6",
 	"anthropic/claude-sonnet-4-20250514",
 	"openai/gpt-4.1",
 	"openai/o3",