newpr 0.1.3 → 0.2.0

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

@@ -1,9 +1,37 @@
 import { useState } from "react";
-import { ArrowRight } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { CornerDownLeft, Clock, GitPullRequest } from "lucide-react";
+import type { SessionRecord } from "../../../history/types.ts";
 
-export function InputScreen({ onSubmit }: { onSubmit: (pr: string) => void }) {
+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`;
+}
+
+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);
 
 	function handleSubmit(e: React.FormEvent) {
 		e.preventDefault();
@@ -11,31 +39,87 @@ 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>
+				)}
+			</div>
 		</div>
 	);
 }

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

@@ -1,6 +1,13 @@
+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;
@@ -8,17 +15,109 @@ interface MarkdownProps {
 	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 BOLD_CJK_RE = /\*\*(.+?)\*\*/g;
+
+function hasCJK(text: string): boolean {
+	return /[가-힣ぁ-ヿ一-鿿]/.test(text);
+}
 
 function preprocess(text: string): string {
-	return text.replace(ANCHOR_RE, (_, kind, id) => {
-		const encoded = encodeURIComponent(id);
-		return `![${kind}:${encoded}](newpr)`;
-	});
+	return text
+		.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 +131,96 @@ 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>
+		),
+		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 }) => {
+		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 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 (!onAnchorClick) {
 			if (kind === "group") {
-				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 ${
-							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"
-						}`}
-					>
-						{id}
-					</span>
-				);
+				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 +231,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>;
 }

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

@@ -1,16 +1,14 @@
 import { useState, useCallback, useEffect, useRef } from "react";
-import { ArrowLeft, FileText, Layers, FolderTree, BookOpen, LayoutList, GitBranch, User, Files, Bot, Sparkles } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { ArrowLeft, Layers, FolderTree, BookOpen, MessageSquare, GitBranch, Sparkles } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../components/ui/tabs.tsx";
 import type { NewprOutput } from "../../../types/output.ts";
-import { SummaryPanel } from "../panels/SummaryPanel.tsx";
 import { GroupsPanel } from "../panels/GroupsPanel.tsx";
 import { FilesPanel } from "../panels/FilesPanel.tsx";
-import { NarrativePanel } from "../panels/NarrativePanel.tsx";
 import { StoryPanel } from "../panels/StoryPanel.tsx";
+import { DiscussionPanel } from "../panels/DiscussionPanel.tsx";
 import { CartoonPanel } from "../panels/CartoonPanel.tsx";
 
-const VALID_TABS = ["story", "summary", "groups", "files", "narrative", "cartoon"] as const;
+const VALID_TABS = ["story", "discussion", "groups", "files", "cartoon"] as const;
 type TabValue = typeof VALID_TABS[number];
 
 function getInitialTab(): TabValue {
@@ -25,11 +23,11 @@ function setTabParam(tab: string) {
 	window.history.replaceState(null, "", url.toString());
 }
 
-const RISK_COLORS: Record<string, string> = {
-	low: "bg-green-500/10 text-green-600 dark:text-green-400",
-	medium: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-	high: "bg-red-500/10 text-red-600 dark:text-red-400",
-	critical: "bg-red-500/20 text-red-700 dark:text-red-300",
+const RISK_DOT: Record<string, string> = {
+	low: "bg-green-500",
+	medium: "bg-yellow-500",
+	high: "bg-red-500",
+	critical: "bg-red-600",
 };
 
 export function ResultsScreen({
@@ -90,100 +88,95 @@ export function ResultsScreen({
 
 	return (
 		<Tabs value={tab} onValueChange={handleTabChange} className="flex flex-col">
-			<div ref={stickyRef} className="sticky top-0 z-10 bg-background pb-2 -mx-10 px-10">
+			<div ref={stickyRef} className="sticky top-0 z-10 bg-background -mx-10 px-10">
 				<div ref={collapsibleRef} className="overflow-hidden transition-[max-height,opacity] duration-200">
-					<div className="pb-3 pt-1">
-						<div className="flex items-center gap-3 mb-3">
-							<Button variant="ghost" size="icon" className="shrink-0 -ml-2" onClick={onBack}>
-								<ArrowLeft className="h-4 w-4" />
-							</Button>
+					<div className="pb-4 pt-1">
+						<div className="flex items-center gap-2 mb-3">
+							<button
+								type="button"
+								onClick={onBack}
+								className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-accent/40 transition-colors shrink-0 -ml-1"
+							>
+								<ArrowLeft className="h-3.5 w-3.5" />
+							</button>
 							<a
 								href={meta.pr_url}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="text-muted-foreground font-mono text-sm hover:text-foreground transition-colors"
+								className="text-[11px] text-muted-foreground/50 font-mono hover:text-foreground transition-colors"
 							>
 								{repoSlug}
 							</a>
-							<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${RISK_COLORS[summary.risk_level] ?? RISK_COLORS.medium}`}>
-								{summary.risk_level}
-							</span>
+							<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${RISK_DOT[summary.risk_level] ?? RISK_DOT.medium}`} />
 						</div>
 
-						<h1 className="text-lg font-bold tracking-tight mb-2 line-clamp-2">{meta.pr_title}</h1>
+						<h1 className="text-sm font-semibold tracking-tight mb-3 line-clamp-2">{meta.pr_title}</h1>
 
-						<div className="flex flex-wrap gap-x-4 gap-y-1">
+						<div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-muted-foreground/50">
 							<a
 								href={meta.author_url ?? `https://github.com/${meta.author}`}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+								className="flex items-center gap-1.5 hover:text-foreground transition-colors"
 							>
-								{meta.author_avatar ? (
-									<img src={meta.author_avatar} alt={meta.author} className="h-3.5 w-3.5 rounded-full" />
-								) : (
-									<User className="h-3 w-3" />
+								{meta.author_avatar && (
+									<img src={meta.author_avatar} alt={meta.author} className="h-4 w-4 rounded-full" />
 								)}
 								<span>{meta.author}</span>
 							</a>
-							<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-								<GitBranch className="h-3 w-3" />
-								<span className="font-mono">{meta.base_branch}</span>
-								<span className="text-muted-foreground/50">←</span>
+							<span className="text-muted-foreground/15">|</span>
+							<div className="flex items-center gap-1">
+								<GitBranch className="h-3 w-3 text-muted-foreground/30" />
 								<span className="font-mono">{meta.head_branch}</span>
+								<span className="text-muted-foreground/25">→</span>
+								<span className="font-mono">{meta.base_branch}</span>
 							</div>
-							<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-								<Files className="h-3 w-3" />
-								<span className="text-green-500">+{meta.total_additions}</span>
-								<span className="text-red-500">−{meta.total_deletions}</span>
-								<span className="text-muted-foreground/50">·</span>
-								<span>{meta.total_files_changed} files</span>
-							</div>
-							<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-								<Bot className="h-3 w-3" />
-								<span>{meta.model_used.split("/").pop()}</span>
+							<span className="text-muted-foreground/15">|</span>
+							<div className="flex items-center gap-1.5">
+								<span className="text-green-600 dark:text-green-400 tabular-nums">+{meta.total_additions}</span>
+								<span className="text-red-600 dark:text-red-400 tabular-nums">-{meta.total_deletions}</span>
+								<span className="text-muted-foreground/25">·</span>
+								<span className="tabular-nums">{meta.total_files_changed} files</span>
 							</div>
 						</div>
 					</div>
 				</div>
 
 				<div ref={compactRef} className="overflow-hidden transition-[max-height,opacity] duration-200" style={{ maxHeight: 0, opacity: 0 }}>
-					<div className="flex items-center gap-3 min-w-0 pb-2">
-						<Button variant="ghost" size="icon" className="shrink-0 -ml-2 h-7 w-7" onClick={onBack}>
+					<div className="flex items-center gap-2.5 min-w-0 pb-2.5">
+						<button
+							type="button"
+							onClick={onBack}
+							className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-accent/40 transition-colors shrink-0 -ml-1"
+						>
 							<ArrowLeft className="h-3.5 w-3.5" />
-						</Button>
-						<span className="text-sm font-semibold truncate flex-1">{meta.pr_title}</span>
-						<span className="text-xs text-muted-foreground font-mono shrink-0">{repoSlug}</span>
-						<span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full shrink-0 ${RISK_COLORS[summary.risk_level] ?? RISK_COLORS.medium}`}>
-							{summary.risk_level}
-						</span>
+						</button>
+						<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${RISK_DOT[summary.risk_level] ?? RISK_DOT.medium}`} />
+						<span className="text-xs font-medium truncate flex-1">{meta.pr_title}</span>
+						<span className="text-[10px] text-muted-foreground/30 font-mono shrink-0">{repoSlug}</span>
 					</div>
 				</div>
 
-				<TabsList className="w-full justify-start overflow-x-auto">
-					<TabsTrigger value="story" className="gap-1.5">
-						<BookOpen className="h-3.5 w-3.5 shrink-0" />
+				<TabsList className="w-full justify-start">
+					<TabsTrigger value="story">
+						<BookOpen className="h-3 w-3 shrink-0" />
 						Story
 					</TabsTrigger>
-					<TabsTrigger value="summary" className="gap-1.5">
-						<LayoutList className="h-3.5 w-3.5 shrink-0" />
-						Summary
+					<TabsTrigger value="discussion">
+						<MessageSquare className="h-3 w-3 shrink-0" />
+						Discussion
 					</TabsTrigger>
-					<TabsTrigger value="groups" className="gap-1.5">
-						<Layers className="h-3.5 w-3.5 shrink-0" />
+					<TabsTrigger value="groups">
+						<Layers className="h-3 w-3 shrink-0" />
 						Groups
 					</TabsTrigger>
-					<TabsTrigger value="files" className="gap-1.5">
-						<FolderTree className="h-3.5 w-3.5 shrink-0" />
+					<TabsTrigger value="files">
+						<FolderTree className="h-3 w-3 shrink-0" />
 						Files
 					</TabsTrigger>
-					<TabsTrigger value="narrative" className="gap-1.5">
-						<FileText className="h-3.5 w-3.5 shrink-0" />
-						Narrative
-					</TabsTrigger>
 					{cartoonEnabled && (
-						<TabsTrigger value="cartoon" className="gap-1.5">
-							<Sparkles className="h-3.5 w-3.5 shrink-0" />
+						<TabsTrigger value="cartoon">
+							<Sparkles className="h-3 w-3 shrink-0" />
 							Comic
 						</TabsTrigger>
 					)}
@@ -193,17 +186,19 @@ export function ResultsScreen({
 			<TabsContent value="story">
 				<StoryPanel data={data} activeId={activeId} onAnchorClick={onAnchorClick} />
 			</TabsContent>
-			<TabsContent value="summary">
-				<SummaryPanel summary={data.summary} />
+			<TabsContent value="discussion">
+				<DiscussionPanel sessionId={sessionId} />
 			</TabsContent>
 			<TabsContent value="groups">
 				<GroupsPanel groups={data.groups} />
 			</TabsContent>
 			<TabsContent value="files">
-				<FilesPanel files={data.files} />
-			</TabsContent>
-			<TabsContent value="narrative">
-				<NarrativePanel narrative={data.narrative} />
+				<FilesPanel
+					files={data.files}
+					groups={data.groups}
+					selectedPath={activeId?.startsWith("file:") ? activeId.slice(5) : null}
+					onFileSelect={(path: string) => onAnchorClick("file", path)}
+				/>
 			</TabsContent>
 			{cartoonEnabled && (
 				<TabsContent value="cartoon">