newpr 0.1.3 → 0.3.0

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

@@ -1,9 +1,102 @@
-import { useState } from "react";
-import { ArrowRight } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { useState, useEffect } from "react";
+import { CornerDownLeft, Clock, GitPullRequest, Check, X, Minus } from "lucide-react";
+import type { SessionRecord } from "../../../history/types.ts";
 
-export function InputScreen({ onSubmit }: { onSubmit: (pr: string) => void }) {
+interface ToolStatus {
+	name: string;
+	installed: boolean;
+	version?: string;
+	detail?: string;
+}
+
+interface PreflightData {
+	github: ToolStatus & { authenticated: boolean; user?: string };
+	agents: ToolStatus[];
+	openrouterKey: boolean;
+}
+
+const RISK_DOT: Record<string, string> = {
+	low: "bg-green-500",
+	medium: "bg-yellow-500",
+	high: "bg-red-500",
+	critical: "bg-red-600",
+};
+
+function timeAgo(date: string): string {
+	const s = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
+	if (s < 60) return "just now";
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.floor(m / 60);
+	if (h < 24) return `${h}h ago`;
+	const d = Math.floor(h / 24);
+	if (d < 30) return `${d}d ago`;
+	return `${Math.floor(d / 30)}mo ago`;
+}
+
+function StatusIcon({ ok, optional }: { ok: boolean; optional?: boolean }) {
+	if (ok) return <Check className="h-3 w-3 text-green-500" />;
+	if (optional) return <Minus className="h-3 w-3 text-muted-foreground/30" />;
+	return <X className="h-3 w-3 text-red-500" />;
+}
+
+function PreflightStatus({ data }: { data: PreflightData }) {
+	const gh = data.github;
+	return (
+		<div className="space-y-1.5">
+			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-2">Status</div>
+			<div className="flex items-center gap-2">
+				<StatusIcon ok={gh.installed && gh.authenticated} />
+				<span className="text-[11px] font-mono">gh</span>
+				{gh.installed && gh.authenticated && gh.user && (
+					<span className="text-[10px] text-muted-foreground/40">{gh.user}</span>
+				)}
+				{gh.installed && !gh.authenticated && (
+					<span className="text-[10px] text-red-500/70">not authenticated</span>
+				)}
+				{!gh.installed && (
+					<span className="text-[10px] text-red-500/70">not installed</span>
+				)}
+			</div>
+			{data.agents.map((agent) => (
+				<div key={agent.name} className="flex items-center gap-2">
+					<StatusIcon ok={agent.installed} optional />
+					<span className={`text-[11px] font-mono ${agent.installed ? "" : "text-muted-foreground/30"}`}>{agent.name}</span>
+					{agent.installed && agent.version && (
+						<span className="text-[10px] text-muted-foreground/30">{agent.version}</span>
+					)}
+				</div>
+			))}
+			<div className="flex items-center gap-2">
+				<StatusIcon ok={data.openrouterKey} />
+				<span className="text-[11px]">OpenRouter</span>
+				{!data.openrouterKey && (
+					<span className="text-[10px] text-red-500/70">run newpr auth</span>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function InputScreen({
+	onSubmit,
+	sessions,
+	onSessionSelect,
+}: {
+	onSubmit: (pr: string) => void;
+	sessions?: SessionRecord[];
+	onSessionSelect?: (id: string) => void;
+}) {
 	const [value, setValue] = useState("");
+	const [focused, setFocused] = useState(false);
+	const [preflight, setPreflight] = useState<PreflightData | null>(null);
+
+	useEffect(() => {
+		fetch("/api/preflight")
+			.then((r) => r.json())
+			.then((data) => { if (data) setPreflight(data as PreflightData); })
+			.catch(() => {});
+	}, []);
 
 	function handleSubmit(e: React.FormEvent) {
 		e.preventDefault();
@@ -11,31 +104,89 @@ export function InputScreen({ onSubmit }: { onSubmit: (pr: string) => void }) {
 		if (trimmed) onSubmit(trimmed);
 	}
 
-	return (
-		<div className="flex flex-col items-center gap-12 py-24">
-			<div className="flex flex-col items-center gap-3">
-				<h1 className="text-4xl font-bold tracking-tight">newpr</h1>
-				<p className="text-muted-foreground text-center max-w-md">
-					AI-powered PR review tool. Paste a PR URL to get a comprehensive analysis.
-				</p>
-			</div>
+	const recents = sessions?.slice(0, 5) ?? [];
 
-			<form onSubmit={handleSubmit} className="w-full max-w-xl">
-				<div className="flex gap-2">
-					<input
-						type="text"
-						value={value}
-						onChange={(e) => setValue(e.target.value)}
-						placeholder="https://github.com/owner/repo/pull/123"
-						className="flex-1 h-11 rounded-lg border bg-background px-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-						autoFocus
-					/>
-					<Button type="submit" size="lg" disabled={!value.trim()}>
-						Analyze
-						<ArrowRight className="ml-2 h-4 w-4" />
-					</Button>
+	return (
+		<div className="flex flex-col items-center justify-center min-h-[60vh]">
+			<div className="w-full max-w-lg space-y-8">
+				<div className="space-y-2">
+					<div className="flex items-baseline gap-2">
+						<h1 className="text-sm font-semibold tracking-tight font-mono">newpr</h1>
+						<span className="text-[10px] text-muted-foreground/40">AI code review</span>
+					</div>
+					<p className="text-xs text-muted-foreground">
+						Paste a GitHub PR URL to start analysis
+					</p>
 				</div>
-			</form>
+
+				<form onSubmit={handleSubmit}>
+					<div className={`flex items-center rounded-xl border bg-background transition-all ${
+						focused ? "ring-1 ring-ring border-foreground/15 shadow-sm" : "border-border"
+					}`}>
+						<GitPullRequest className="h-3.5 w-3.5 text-muted-foreground/40 ml-4 shrink-0" />
+						<input
+							type="text"
+							value={value}
+							onChange={(e) => setValue(e.target.value)}
+							onFocus={() => setFocused(true)}
+							onBlur={() => setFocused(false)}
+							placeholder="https://github.com/owner/repo/pull/123"
+							className="flex-1 h-11 bg-transparent px-3 text-xs font-mono placeholder:text-muted-foreground/40 focus:outline-none"
+							autoFocus
+						/>
+						<button
+							type="submit"
+							disabled={!value.trim()}
+							className="flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background mr-2 transition-opacity disabled:opacity-20 hover:opacity-80"
+						>
+							<CornerDownLeft className="h-3.5 w-3.5" />
+						</button>
+					</div>
+					<div className="flex justify-end mt-2 pr-1">
+						<span className="text-[10px] text-muted-foreground/30">
+							Enter to analyze
+						</span>
+					</div>
+				</form>
+
+				{recents.length > 0 && (
+					<div className="space-y-2 pt-2">
+						<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider px-0.5">
+							Recent
+						</div>
+						<div className="space-y-px">
+							{recents.map((s) => (
+								<button
+									key={s.id}
+									type="button"
+									onClick={() => onSessionSelect?.(s.id)}
+									className="w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left hover:bg-accent/50 transition-colors group"
+								>
+									<span className={`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 group-hover:text-foreground transition-colors">
+											{s.pr_title}
+										</div>
+										<div className="flex items-center gap-1.5 mt-0.5 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">·</span>
+											<span className="text-green-600 dark:text-green-400">+{s.total_additions}</span>
+											<span className="text-red-600 dark:text-red-400">-{s.total_deletions}</span>
+										</div>
+									</div>
+									<div className="flex items-center gap-1 text-[10px] text-muted-foreground/30 shrink-0">
+										<Clock className="h-2.5 w-2.5" />
+										<span>{timeAgo(s.analyzed_at)}</span>
+									</div>
+								</button>
+							))}
+						</div>
+					</div>
+				)}
+
+				{preflight && <PreflightStatus data={preflight} />}
+			</div>
 		</div>
 	);
 }

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

@@ -110,15 +110,28 @@ export function LoadingTimeline({
 	const steps = buildSteps(events);
 	const seconds = Math.floor(elapsed / 1000);
 
+	const prInfo = events.find((e) => e.pr_title);
+	const title = prInfo?.pr_title;
+	const prNum = prInfo?.pr_number;
+
 	return (
 		<div className="flex flex-col items-center py-16">
 			<div className="w-full max-w-lg">
-				<div className="flex items-center gap-2 mb-8">
-					<span className="text-lg font-bold">newpr</span>
-					<span className="text-muted-foreground">·</span>
-					<span className="text-sm text-muted-foreground">
-						{seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`}
-					</span>
+				<div className="mb-8">
+					<div className="flex items-center gap-2">
+						{title ? (
+							<span className="text-sm font-semibold truncate">{title}</span>
+						) : (
+							<span className="text-sm font-semibold font-mono">newpr</span>
+						)}
+						<span className="text-muted-foreground/30">·</span>
+						<span className="text-xs text-muted-foreground/50 tabular-nums shrink-0">
+							{seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`}
+						</span>
+					</div>
+					{prNum && (
+						<span className="text-[11px] text-muted-foreground/40 font-mono">#{prNum}</span>
+					)}
 				</div>
 
 				<div className="space-y-3">

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

@@ -1,24 +1,150 @@
+import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 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";
 
 interface MarkdownProps {
 	children: string;
-	onAnchorClick?: (kind: "group" | "file", id: string) => void;
+	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
 	activeId?: string | null;
 }
 
+function useHighlighter(): Highlighter | null {
+	const [hl, setHl] = useState<Highlighter | null>(getHighlighterSync());
+	useEffect(() => {
+		if (!hl) ensureHighlighter().then(setHl).catch(() => {});
+	}, [hl]);
+	return hl;
+}
+
+function useDarkMode(): boolean {
+	const [dark, setDark] = useState(() => document.documentElement.classList.contains("dark"));
+	useEffect(() => {
+		const observer = new MutationObserver(() => {
+			setDark(document.documentElement.classList.contains("dark"));
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+		return () => observer.disconnect();
+	}, []);
+	return dark;
+}
+
+const GITHUB_ATTACHMENT_RE = /^https:\/\/github\.com\/user-attachments\/assets\//;
+const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?|$)/i;
+const IMAGE_EXT_RE = /\.(png|jpe?g|gif|webp|svg|bmp|ico)(\?|$)/i;
+
+function isMediaUrl(href: string): boolean {
+	return GITHUB_ATTACHMENT_RE.test(href) || VIDEO_EXT_RE.test(href) || IMAGE_EXT_RE.test(href);
+}
+
+function isLikelyVideo(href: string): boolean {
+	return VIDEO_EXT_RE.test(href);
+}
+
+function proxied(url: string): string {
+	if (GITHUB_ATTACHMENT_RE.test(url) || url.startsWith("https://user-images.githubusercontent.com/")) {
+		return `/api/proxy?url=${encodeURIComponent(url)}`;
+	}
+	return url;
+}
+
+function MediaEmbed({ src }: { src: string }) {
+	const url = proxied(src);
+	const [mode, setMode] = useState<"img" | "video" | "link">(isLikelyVideo(src) ? "video" : "img");
+	const triedRef = useState(() => new Set<string>())[0];
+
+	function fallback(from: "img" | "video") {
+		triedRef.add(from);
+		const next = from === "img" ? "video" : "img";
+		if (triedRef.has(next)) {
+			setMode("link");
+		} else {
+			setMode(next);
+		}
+	}
+
+	if (mode === "link") {
+		return <a href={src} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline break-all text-sm">{src}</a>;
+	}
+
+	if (mode === "video") {
+		return (
+			<video
+				src={url}
+				controls
+				playsInline
+				className="max-w-full rounded-lg my-2"
+				onError={() => fallback("video")}
+			/>
+		);
+	}
+
+	return (
+		<img
+			src={url}
+			alt=""
+			className="max-w-full rounded-lg my-2"
+			onError={() => fallback("img")}
+		/>
+	);
+}
+
 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 {
+	return /[가-힣ぁ-ヿ一-鿿]/.test(text);
+}
+
+function formatLineLabel(id: string): string {
+	const hashIdx = id.indexOf("#");
+	if (hashIdx < 0) return id;
+	const file = id.slice(0, hashIdx);
+	const lineRef = id.slice(hashIdx + 1);
+	const fileName = file.split("/").pop() ?? file;
+	return `${fileName}:${lineRef}`;
+}
+
+function inlineMarkdownToHtml(text: string): string {
+	return text
+		.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+		.replace(/\*(.+?)\*/g, "<em>$1</em>")
+		.replace(/`([^`]+)`/g, "<code>$1</code>");
+}
 
 function preprocess(text: string): string {
-	return text.replace(ANCHOR_RE, (_, kind, id) => {
-		const encoded = encodeURIComponent(id);
-		return `![${kind}:${encoded}](newpr)`;
-	});
+	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>`;
+		})
+		.replace(ANCHOR_RE, (_, kind, id) => {
+			const encoded = encodeURIComponent(id);
+			return `![${kind}:${encoded}](newpr)`;
+		})
+		.replace(BOLD_CJK_RE, (match, inner) => {
+			if (hasCJK(inner)) return `<strong>${inner}</strong>`;
+			return match;
+		});
 }
 
 export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 	const processed = preprocess(children);
+	const hl = useHighlighter();
+	const dark = useDarkMode();
 
 	const components: Components = {
 		h1: ({ children }) => <h1 className="text-xl font-bold mt-6 mb-3 break-words">{children}</h1>,
@@ -32,69 +158,122 @@ export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
 		strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
 		em: ({ children }) => <em className="italic">{children}</em>,
 		code: ({ children, className }) => {
+			const lang = langFromClassName(className);
+			if (lang && hl) {
+				const code = String(children).replace(/\n$/, "");
+				const theme = dark ? "github-dark" : "github-light";
+				try {
+					const html = hl.codeToHtml(code, { lang, theme });
+					return <span dangerouslySetInnerHTML={{ __html: html }} />;
+				} catch {
+					return <code className="text-xs font-mono">{children}</code>;
+				}
+			}
 			if (className?.includes("language-")) {
-				return (
-					<pre className="bg-muted rounded-lg p-4 overflow-x-auto mb-3">
-						<code className="text-xs font-mono">{children}</code>
-					</pre>
-				);
+				return <code className="text-xs font-mono">{children}</code>;
 			}
 			return <code className="px-1.5 py-0.5 rounded bg-muted text-xs font-mono">{children}</code>;
 		},
-		pre: ({ children }) => <>{children}</>,
-		a: ({ href, children }) => (
-			<a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">{children}</a>
+		pre: ({ children }) => (
+			<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>
 		),
-		img: ({ alt }) => {
-			if (!alt?.includes(":")) return null;
-			const colonIdx = alt.indexOf(":");
-			const kind = alt.slice(0, colonIdx) as "group" | "file";
-			const id = decodeURIComponent(alt.slice(colonIdx + 1));
-
-			if (!onAnchorClick) {
-				if (kind === "group") {
-					return <span className="inline-flex items-center px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-medium">{id}</span>;
-				}
-				return <code className="px-1.5 py-0.5 rounded bg-muted text-xs font-mono text-blue-600 dark:text-blue-400">{id.split("/").pop()}</code>;
-			}
-
-			const isActive = activeId === `${kind}:${id}`;
-			if (kind === "group") {
+		span: ({ children, ...props }) => {
+			const lineRef = (props as Record<string, unknown>)["data-line-ref"] as string | undefined;
+			if (lineRef && onAnchorClick) {
+				const id = decodeURIComponent(lineRef);
+				const isActive = activeId === `line:${id}`;
 				return (
 					<span
 						role="button"
 						tabIndex={0}
-						onClick={(e) => { e.stopPropagation(); onAnchorClick("group", id); }}
-						onKeyDown={(e) => { if (e.key === "Enter") onAnchorClick("group", id); }}
-						className={`inline px-1.5 py-0.5 rounded text-xs font-medium transition-colors cursor-pointer ${
+						onClick={(e) => { e.stopPropagation(); onAnchorClick("line", id); }}
+						onKeyDown={(e) => { if (e.key === "Enter") onAnchorClick("line", id); }}
+						className={`underline decoration-1 underline-offset-[3px] cursor-pointer transition-colors ${
 							isActive
-								? "bg-blue-500/20 text-blue-500 dark:text-blue-300 ring-1 ring-blue-500/40"
-								: "bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20"
+								? "decoration-blue-500 dark:decoration-blue-400 bg-blue-500/5 rounded-sm"
+								: "decoration-foreground/15 hover:decoration-foreground/40"
 						}`}
 					>
-						{id}
+						{children}
 					</span>
 				);
 			}
+			if (lineRef) {
+				return <span className="underline decoration-foreground/10 decoration-1 underline-offset-[3px]">{children}</span>;
+			}
+			return <span>{children}</span>;
+		},
+		a: ({ href, children }) => {
+			if (href && isMediaUrl(href)) {
+				const textContent = String(children ?? "");
+				if (textContent === href || !textContent.trim()) {
+					return <MediaEmbed src={href} />;
+				}
+			}
+			return <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">{children}</a>;
+		},
+		video: ({ src, ...rest }: React.ComponentProps<"video">) => (
+			src ? <video src={src} controls playsInline className="max-w-full rounded-lg my-2" {...rest} /> : null
+		),
+		img: ({ alt, src, ...rest }) => {
+			if (src !== "newpr") {
+				return <img alt={alt} src={src ? proxied(src) : src} {...rest} className="max-w-full rounded-lg my-2" />;
+			}
+			if (!alt?.includes(":")) return null;
+			const colonIdx = alt.indexOf(":");
+			const kind = alt.slice(0, colonIdx) as "group" | "file";
+			const id = decodeURIComponent(alt.slice(colonIdx + 1));
+
+		if (!onAnchorClick) {
+			if (kind === "group") {
+				return <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-accent text-[11px] font-medium text-foreground/80">{id}</span>;
+			}
+			return <code className="px-1.5 py-0.5 rounded-md bg-accent text-[11px] font-mono text-foreground/70">{id.split("/").pop()}</code>;
+		}
+
+		const isActive = activeId === `${kind}:${id}`;
+		if (kind === "group") {
 			return (
 				<span
 					role="button"
 					tabIndex={0}
-					onClick={(e) => { e.stopPropagation(); onAnchorClick("file", id); }}
-					onKeyDown={(e) => { if (e.key === "Enter") onAnchorClick("file", id); }}
-					className={`inline px-1.5 py-0.5 rounded text-xs font-mono transition-colors cursor-pointer ${
+					onClick={(e) => { e.stopPropagation(); onAnchorClick("group", id); }}
+					onKeyDown={(e) => { if (e.key === "Enter") onAnchorClick("group", id); }}
+					className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[11px] font-medium transition-colors cursor-pointer border ${
 						isActive
-							? "bg-muted ring-1 ring-blue-500/40 text-blue-500 dark:text-blue-300"
-							: "bg-muted text-blue-600 dark:text-blue-400 hover:bg-blue-500/10"
+							? "bg-blue-600 text-white border-blue-600 dark:bg-blue-500 dark:border-blue-500"
+							: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 hover:border-blue-300 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30 dark:hover:bg-blue-500/20 dark:hover:border-blue-500/40"
 					}`}
 				>
-					{id.split("/").pop()}
+					{id}
 				</span>
 			);
+		}
+		return (
+			<span
+				role="button"
+				tabIndex={0}
+				onClick={(e) => { e.stopPropagation(); onAnchorClick("file", id); }}
+				onKeyDown={(e) => { if (e.key === "Enter") onAnchorClick("file", id); }}
+				className={`inline px-1.5 py-0.5 rounded-md text-[11px] font-mono transition-colors cursor-pointer border ${
+					isActive
+						? "bg-blue-600 text-white border-blue-600 dark:bg-blue-500 dark:border-blue-500"
+						: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 hover:border-blue-300 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30 dark:hover:bg-blue-500/20 dark:hover:border-blue-500/40"
+				}`}
+			>
+				{id.split("/").pop()}
+			</span>
+		);
 		},
 		blockquote: ({ children }) => (
 			<blockquote className="border-l-2 border-muted-foreground/30 pl-4 text-sm text-muted-foreground italic mb-3">{children}</blockquote>
 		),
+		details: ({ children, ...rest }) => (
+			<details className="rounded-lg border border-border mb-3 open:pb-2" {...rest}>{children}</details>
+		),
+		summary: ({ children }) => (
+			<summary className="px-3 py-2 text-sm font-medium cursor-pointer select-none hover:bg-muted/50 rounded-lg">{children}</summary>
+		),
 		hr: () => <hr className="border-border my-4" />,
 		table: ({ children }) => (
 			<div className="overflow-x-auto mb-3">
@@ -105,5 +284,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={[remarkGfm]} components={components}>{processed}</ReactMarkdown>;
+	return <ReactMarkdown remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]} rehypePlugins={[[rehypeKatex, { throwOnError: false, strict: false }], rehypeRaw]} components={components}>{processed}</ReactMarkdown>;
 }