newpr 0.1.3 → 0.3.0

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

@@ -1,16 +1,15 @@
 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, Check, ChevronDown } 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";
+import { ReviewModal } from "./ReviewModal.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 +24,18 @@ 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",
+};
+
+const STATE_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+	open: { bg: "bg-green-500/10", text: "text-green-600 dark:text-green-400", label: "Open" },
+	merged: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400", label: "Merged" },
+	closed: { bg: "bg-red-500/10", text: "text-red-600 dark:text-red-400", label: "Closed" },
+	draft: { bg: "bg-neutral-500/10", text: "text-neutral-500", label: "Draft" },
 };
 
 export function ResultsScreen({
@@ -39,16 +45,19 @@ export function ResultsScreen({
 	onAnchorClick,
 	cartoonEnabled,
 	sessionId,
+	onTabChange,
 }: {
 	data: NewprOutput;
 	onBack: () => void;
 	activeId: string | null;
-	onAnchorClick: (kind: "group" | "file", id: string) => void;
+	onAnchorClick: (kind: "group" | "file" | "line", id: string) => void;
 	cartoonEnabled?: boolean;
 	sessionId?: string | null;
+	onTabChange?: (tab: string) => void;
 }) {
 	const { meta, summary } = data;
 	const [tab, setTab] = useState<TabValue>(getInitialTab);
+	const [reviewOpen, setReviewOpen] = useState(false);
 
 	const stickyRef = useRef<HTMLDivElement>(null);
 	const collapsibleRef = useRef<HTMLDivElement>(null);
@@ -84,106 +93,127 @@ export function ResultsScreen({
 	const handleTabChange = useCallback((value: string) => {
 		setTab(value as TabValue);
 		setTabParam(value);
-	}, []);
+		onTabChange?.(value);
+	}, [onTabChange]);
 
 	const repoSlug = meta.pr_url.replace(/^https?:\/\/github\.com\//, "").replace(/\/pull\//, "#");
 
 	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>
+							{meta.pr_state && (() => {
+								const s = STATE_STYLES[meta.pr_state] ?? STATE_STYLES.open!;
+								return (
+									<span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-md ${s!.bg} ${s!.text}`}>
+										{s!.label}
+									</span>
+								);
+							})()}
+							<span className={`h-1.5 w-1.5 rounded-full shrink-0 ${RISK_DOT[summary.risk_level] ?? RISK_DOT.medium}`} />
+							<div className="flex-1" />
+							{meta.pr_state !== "merged" && meta.pr_state !== "closed" && (
+								<button
+									type="button"
+									onClick={() => setReviewOpen(true)}
+									className="flex items-center gap-1.5 h-7 px-3 rounded-md border text-[11px] font-medium text-foreground hover:bg-accent/40 transition-colors shrink-0"
+								>
+									<Check className="h-3 w-3" />
+									Review
+									<ChevronDown className="h-3 w-3 text-muted-foreground/40" />
+								</button>
+							)}
 						</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}`} />
+						{meta.pr_state && (() => {
+							const s = STATE_STYLES[meta.pr_state]!;
+							return <span className={`text-[9px] font-medium px-1 py-px rounded ${s.bg} ${s.text} shrink-0`}>{s.label}</span>;
+						})()}
+						<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 +223,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">
@@ -211,5 +243,9 @@ export function ResultsScreen({
 				</TabsContent>
 			)}
 		</Tabs>
+		{reviewOpen && (
+			<ReviewModal prUrl={meta.pr_url} onClose={() => setReviewOpen(false)} />
+		)}
+		</>
 	);
 }

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

@@ -0,0 +1,187 @@
+import { useState, useRef, useCallback } from "react";
+import { X, Check, MessageSquare, Loader2, AlertCircle, ExternalLink } from "lucide-react";
+import { TipTapEditor, getTextWithAnchors } from "./TipTapEditor.tsx";
+import type { useEditor } from "@tiptap/react";
+
+type ReviewEvent = "APPROVE" | "REQUEST_CHANGES" | "COMMENT";
+
+const EVENTS: { value: ReviewEvent; label: string; description: string; class: string; activeClass: string }[] = [
+	{
+		value: "APPROVE",
+		label: "Approve",
+		description: "Submit approval for this PR",
+		class: "text-green-600 dark:text-green-400 hover:bg-green-500/10",
+		activeClass: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30",
+	},
+	{
+		value: "REQUEST_CHANGES",
+		label: "Request changes",
+		description: "Submit feedback that must be addressed",
+		class: "text-red-600 dark:text-red-400 hover:bg-red-500/10",
+		activeClass: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30",
+	},
+	{
+		value: "COMMENT",
+		label: "Comment",
+		description: "Submit general feedback",
+		class: "text-muted-foreground hover:bg-accent/50",
+		activeClass: "bg-accent text-foreground border-border",
+	},
+];
+
+interface ReviewModalProps {
+	prUrl: string;
+	onClose: () => void;
+}
+
+export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
+	const [event, setEvent] = useState<ReviewEvent>("APPROVE");
+	const [submitting, setSubmitting] = useState(false);
+	const [result, setResult] = useState<{ ok: boolean; html_url?: string; error?: string } | null>(null);
+	const editorRef = useRef<ReturnType<typeof useEditor>>(null);
+
+	const handleSubmit = useCallback(async () => {
+		if (submitting) return;
+		setSubmitting(true);
+		setResult(null);
+		try {
+			const body = editorRef.current ? getTextWithAnchors(editorRef.current) : "";
+			const res = await fetch("/api/review", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ pr_url: prUrl, event, body }),
+			});
+			const data = await res.json() as { ok?: boolean; html_url?: string; error?: string };
+			if (data.ok) {
+				setResult({ ok: true, html_url: data.html_url });
+			} else {
+				setResult({ ok: false, error: data.error ?? "Failed to submit review" });
+			}
+		} catch (err) {
+			setResult({ ok: false, error: err instanceof Error ? err.message : String(err) });
+		} finally {
+			setSubmitting(false);
+		}
+	}, [prUrl, event, submitting]);
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]" onClick={onClose}>
+			<div className="fixed inset-0 bg-background/60 backdrop-blur-sm" />
+			<div
+				className="relative z-10 w-full max-w-md rounded-xl border bg-background shadow-lg"
+				onClick={(e) => e.stopPropagation()}
+			>
+				<div className="flex items-center justify-between px-4 h-11 border-b">
+					<span className="text-xs font-medium">Submit Review</span>
+					<button
+						type="button"
+						onClick={onClose}
+						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"
+					>
+						<X className="h-3.5 w-3.5" />
+					</button>
+				</div>
+
+				<div className="px-4 py-4 space-y-4">
+					{result?.ok ? (
+						<div className="space-y-4 py-2">
+							<div className="flex items-center gap-2 text-green-600 dark:text-green-400">
+								<Check className="h-4 w-4" />
+								<span className="text-xs font-medium">Review submitted</span>
+							</div>
+							{result.html_url && (
+								<a
+									href={result.html_url}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground/60 hover:text-foreground transition-colors"
+								>
+									<ExternalLink className="h-3 w-3" />
+									View on GitHub
+								</a>
+							)}
+							<div className="flex justify-end">
+								<button
+									type="button"
+									onClick={onClose}
+									className="text-[11px] text-muted-foreground/50 hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent/40 transition-colors"
+								>
+									Close
+								</button>
+							</div>
+						</div>
+					) : (
+						<>
+							<div className="flex gap-1.5 p-0.5 rounded-lg border">
+								{EVENTS.map((e) => (
+									<button
+										key={e.value}
+										type="button"
+										onClick={() => setEvent(e.value)}
+										className={`flex-1 text-[11px] font-medium px-2 py-1.5 rounded-md transition-colors border border-transparent ${
+											event === e.value ? e.activeClass : e.class
+										}`}
+									>
+										{e.label}
+									</button>
+								))}
+							</div>
+
+							<div>
+								<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-2">
+									Message {event !== "APPROVE" && <span className="text-red-500/60 normal-case">*</span>}
+								</div>
+								<div className="rounded-lg border px-3 py-2.5 min-h-[80px] focus-within:border-foreground/15 transition-colors">
+									<TipTapEditor
+										editorRef={editorRef}
+										placeholder={event === "APPROVE" ? "Optional message..." : "Describe the changes needed..."}
+										autoFocus
+										submitOnModEnter
+										onSubmit={handleSubmit}
+									/>
+								</div>
+							</div>
+
+							{result?.error && (
+								<div className="flex items-start gap-2 px-3 py-2 rounded-md bg-red-500/5 border border-red-500/20">
+									<AlertCircle className="h-3.5 w-3.5 text-red-500 shrink-0 mt-0.5" />
+									<p className="text-[11px] text-red-600 dark:text-red-400">{result.error}</p>
+								</div>
+							)}
+
+							<div className="flex items-center justify-between pt-1">
+								<span className="text-[10px] text-muted-foreground/25">
+									{navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to submit
+								</span>
+								<div className="flex gap-2">
+									<button
+										type="button"
+										onClick={onClose}
+										className="text-[11px] text-muted-foreground/50 hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent/40 transition-colors"
+									>
+										Cancel
+									</button>
+									<button
+										type="button"
+										onClick={handleSubmit}
+										disabled={submitting}
+										className="flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-md bg-foreground text-background hover:opacity-80 disabled:opacity-30 transition-opacity"
+									>
+										{submitting ? (
+											<Loader2 className="h-3 w-3 animate-spin" />
+										) : event === "APPROVE" ? (
+											<Check className="h-3 w-3" />
+										) : (
+											<MessageSquare className="h-3 w-3" />
+										)}
+										Submit
+									</button>
+								</div>
+							</div>
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}