newpr 0.1.1 → 0.2.0

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

@@ -1,15 +1,14 @@
-import { useState, useRef, useEffect } from "react";
-import { ArrowLeft, FileText, Layers, FolderTree, BookOpen, LayoutList, GitBranch, User, Files, Bot } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { useState, useCallback, useEffect, useRef } from "react";
+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"] as const;
+const VALID_TABS = ["story", "discussion", "groups", "files", "cartoon"] as const;
 type TabValue = typeof VALID_TABS[number];
 
 function getInitialTab(): TabValue {
@@ -24,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({
@@ -36,150 +35,176 @@ export function ResultsScreen({
 	onBack,
 	activeId,
 	onAnchorClick,
+	cartoonEnabled,
+	sessionId,
 }: {
 	data: NewprOutput;
 	onBack: () => void;
 	activeId: string | null;
 	onAnchorClick: (kind: "group" | "file", id: string) => void;
+	cartoonEnabled?: boolean;
+	sessionId?: string | null;
 }) {
 	const { meta, summary } = data;
 	const [tab, setTab] = useState<TabValue>(getInitialTab);
-	const [scrolled, setScrolled] = useState(false);
-	const sentinelRef = useRef<HTMLDivElement>(null);
+
+	const stickyRef = useRef<HTMLDivElement>(null);
+	const collapsibleRef = useRef<HTMLDivElement>(null);
+	const compactRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		const sentinel = sentinelRef.current;
-		if (!sentinel) return;
-		const observer = new IntersectionObserver(
-			([entry]) => setScrolled(!entry!.isIntersecting),
-			{ threshold: 0 },
-		);
-		observer.observe(sentinel);
-		return () => observer.disconnect();
+		const sticky = stickyRef.current;
+		const collapsible = collapsibleRef.current;
+		const compact = compactRef.current;
+		if (!sticky || !collapsible || !compact) return;
+
+		const scrollParent = sticky.closest("main") ?? sticky.closest("[class*=overflow-y-auto]");
+		if (!scrollParent) return;
+
+		let wasScrolled = false;
+
+		const onScroll = () => {
+			const scrolled = scrollParent.scrollTop > 0;
+			if (scrolled === wasScrolled) return;
+			wasScrolled = scrolled;
+
+			collapsible.style.maxHeight = scrolled ? "0px" : "none";
+			collapsible.style.opacity = scrolled ? "0" : "1";
+			compact.style.maxHeight = scrolled ? "40px" : "0px";
+			compact.style.opacity = scrolled ? "1" : "0";
+			sticky.classList.toggle("border-b", scrolled);
+		};
+
+		scrollParent.addEventListener("scroll", onScroll, { passive: true });
+		return () => scrollParent.removeEventListener("scroll", onScroll);
 	}, []);
 
-	function handleTabChange(value: string) {
+	const handleTabChange = useCallback((value: string) => {
 		setTab(value as TabValue);
 		setTabParam(value);
-	}
+	}, []);
 
 	const repoSlug = meta.pr_url.replace(/^https?:\/\/github\.com\//, "").replace(/\/pull\//, "#");
 
 	return (
-		<div className="flex flex-col">
-			<div ref={sentinelRef} />
-
-			<div className={`sticky top-0 z-10 bg-background transition-all ${scrolled ? "pb-3 pt-1 border-b" : "pb-6 pt-0"}`}>
-				{!scrolled && (
-					<>
-						<div className="flex items-center gap-3 mb-4">
-							<Button variant="ghost" size="icon" className="shrink-0 -ml-2" onClick={onBack}>
-								<ArrowLeft className="h-4 w-4" />
-							</Button>
+		<Tabs value={tab} onValueChange={handleTabChange} className="flex flex-col">
+			<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-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-2xl font-bold tracking-tight mb-5" style={{ textWrap: "balance" }}>{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-5 gap-y-2 mb-6">
+						<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-sm text-muted-foreground hover:text-foreground transition-colors"
+								className="flex items-center gap-1.5 hover:text-foreground transition-colors"
 							>
-								{meta.author_avatar ? (
+								{meta.author_avatar && (
 									<img src={meta.author_avatar} alt={meta.author} className="h-4 w-4 rounded-full" />
-								) : (
-									<User className="h-3.5 w-3.5" />
 								)}
 								<span>{meta.author}</span>
 							</a>
-							<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-								<GitBranch className="h-3.5 w-3.5" />
-								<span className="font-mono text-xs">{meta.base_branch}</span>
-								<span className="text-muted-foreground/50">←</span>
-								<span className="font-mono text-xs">{meta.head_branch}</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-sm text-muted-foreground">
-								<Files className="h-3.5 w-3.5" />
-								<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-sm text-muted-foreground">
-								<Bot className="h-3.5 w-3.5" />
-								<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>
 
-				{scrolled && (
-					<div className="flex items-center gap-3 min-w-0">
-						<Button variant="ghost" size="icon" className="shrink-0 -ml-2 h-7 w-7" onClick={onBack}>
+				<div ref={compactRef} className="overflow-hidden transition-[max-height,opacity] duration-200" style={{ maxHeight: 0, opacity: 0 }}>
+					<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>
 
-				<Tabs value={tab} onValueChange={handleTabChange} className="w-full">
-					<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" />
-							Story
-						</TabsTrigger>
-						<TabsTrigger value="summary" className="gap-1.5">
-							<LayoutList className="h-3.5 w-3.5 shrink-0" />
-							Summary
-						</TabsTrigger>
-						<TabsTrigger value="groups" className="gap-1.5">
-							<Layers className="h-3.5 w-3.5 shrink-0" />
-							Groups
+				<TabsList className="w-full justify-start">
+					<TabsTrigger value="story">
+						<BookOpen className="h-3 w-3 shrink-0" />
+						Story
+					</TabsTrigger>
+					<TabsTrigger value="discussion">
+						<MessageSquare className="h-3 w-3 shrink-0" />
+						Discussion
+					</TabsTrigger>
+					<TabsTrigger value="groups">
+						<Layers className="h-3 w-3 shrink-0" />
+						Groups
+					</TabsTrigger>
+					<TabsTrigger value="files">
+						<FolderTree className="h-3 w-3 shrink-0" />
+						Files
+					</TabsTrigger>
+					{cartoonEnabled && (
+						<TabsTrigger value="cartoon">
+							<Sparkles className="h-3 w-3 shrink-0" />
+							Comic
 						</TabsTrigger>
-						<TabsTrigger value="files" className="gap-1.5">
-							<FolderTree className="h-3.5 w-3.5 shrink-0" />
-							Files
-						</TabsTrigger>
-						<TabsTrigger value="narrative" className="gap-1.5">
-							<FileText className="h-3.5 w-3.5 shrink-0" />
-							Narrative
-						</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="story">
-						<StoryPanel data={data} activeId={activeId} onAnchorClick={onAnchorClick} />
-					</TabsContent>
-					<TabsContent value="summary">
-						<SummaryPanel summary={data.summary} />
-					</TabsContent>
-					<TabsContent value="groups">
-						<GroupsPanel groups={data.groups} />
-					</TabsContent>
-					<TabsContent value="files">
-						<FilesPanel files={data.files} />
-					</TabsContent>
-					<TabsContent value="narrative">
-						<NarrativePanel narrative={data.narrative} />
-					</TabsContent>
-				</Tabs>
+					)}
+				</TabsList>
 			</div>
-		</div>
+
+			<TabsContent value="story">
+				<StoryPanel data={data} activeId={activeId} onAnchorClick={onAnchorClick} />
+			</TabsContent>
+			<TabsContent value="discussion">
+				<DiscussionPanel sessionId={sessionId} />
+			</TabsContent>
+			<TabsContent value="groups">
+				<GroupsPanel groups={data.groups} />
+			</TabsContent>
+			<TabsContent value="files">
+				<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">
+					<CartoonPanel data={data} sessionId={sessionId} />
+				</TabsContent>
+			)}
+		</Tabs>
 	);
 }