newpr 0.1.0

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

@@ -0,0 +1,179 @@
+import { useState, useEffect, useRef } from "react";
+import { CheckCircle2, Circle, Loader2 } from "lucide-react";
+import type { ProgressEvent, ProgressStage } from "../../../analyzer/progress.ts";
+import { stageIndex, allStages } from "../../../analyzer/progress.ts";
+
+const STAGE_LABELS: Record<ProgressStage, string> = {
+	fetching: "Fetch PR data",
+	parsing: "Parse diff",
+	cloning: "Clone repository",
+	checkout: "Checkout branches",
+	exploring: "Explore codebase",
+	analyzing: "Analyze files",
+	grouping: "Group changes",
+	summarizing: "Generate summary",
+	narrating: "Write narrative",
+	done: "Complete",
+};
+
+const MAX_LOG_LINES = 8;
+
+interface StepInfo {
+	stage: ProgressStage;
+	message: string;
+	done: boolean;
+	active: boolean;
+	durationMs?: number;
+	current?: number;
+	total?: number;
+	log: string[];
+}
+
+function buildSteps(events: ProgressEvent[]): StepInfo[] {
+	const stages = allStages();
+	const lastByStage = new Map<ProgressStage, ProgressEvent>();
+	const firstTs = new Map<ProgressStage, number>();
+	const logByStage = new Map<ProgressStage, string[]>();
+	let maxIdx = -1;
+
+	for (const e of events) {
+		lastByStage.set(e.stage, e);
+		if (e.timestamp && !firstTs.has(e.stage)) firstTs.set(e.stage, e.timestamp);
+		const idx = stageIndex(e.stage);
+		if (idx > maxIdx) maxIdx = idx;
+
+		if (e.message && !e.partial_content) {
+			const existing = logByStage.get(e.stage) ?? [];
+			const last = existing[existing.length - 1];
+			if (e.message !== last) {
+				existing.push(e.message);
+				logByStage.set(e.stage, existing);
+			}
+		}
+	}
+
+	return stages
+		.filter((_, i) => i <= maxIdx + 1 && i < stages.length - 1)
+		.map((stage) => {
+			const event = lastByStage.get(stage);
+			const idx = stageIndex(stage);
+			const done = idx < maxIdx;
+			const active = idx === maxIdx;
+			const log = logByStage.get(stage) ?? [];
+
+			let durationMs: number | undefined;
+			if (done) {
+				const start = firstTs.get(stage);
+				const nextStart = stages
+					.filter((_, i) => i > idx)
+					.reduce<number | undefined>((f, s) => f ?? firstTs.get(s), undefined);
+				if (start && nextStart) durationMs = nextStart - start;
+			}
+
+			return {
+				stage,
+				message: event?.message ?? STAGE_LABELS[stage],
+				done,
+				active,
+				durationMs,
+				current: event?.current,
+				total: event?.total,
+				log,
+			};
+		});
+}
+
+function formatDuration(ms: number): string {
+	if (ms < 1000) return `${ms}ms`;
+	return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export function LoadingTimeline({
+	events,
+	startedAt,
+}: {
+	events: ProgressEvent[];
+	startedAt: number;
+}) {
+	const [elapsed, setElapsed] = useState(0);
+	const logEndRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const timer = setInterval(() => setElapsed(Date.now() - startedAt), 500);
+		return () => clearInterval(timer);
+	}, [startedAt]);
+
+	useEffect(() => {
+		logEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+	}, [events.length]);
+
+	const steps = buildSteps(events);
+	const seconds = Math.floor(elapsed / 1000);
+
+	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>
+
+				<div className="space-y-3">
+					{steps.map((step) => {
+						const completionDetail = step.message !== STAGE_LABELS[step.stage] ? step.message : "";
+						const progress = step.current !== undefined && step.total !== undefined
+							? ` (${step.current}/${step.total})`
+							: "";
+						const recentLog = step.log.slice(-MAX_LOG_LINES);
+
+						return (
+							<div key={step.stage} className="flex items-start gap-3">
+								{step.done ? (
+									<CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 shrink-0" />
+								) : step.active ? (
+									<Loader2 className="h-5 w-5 text-primary animate-spin mt-0.5 shrink-0" />
+								) : (
+									<Circle className="h-5 w-5 text-muted-foreground/30 mt-0.5 shrink-0" />
+								)}
+								<div className="min-w-0 flex-1">
+									<div className="flex items-center gap-2">
+										<span className={`text-sm font-medium ${step.done ? "text-muted-foreground" : step.active ? "text-foreground" : "text-muted-foreground/50"}`}>
+											{STAGE_LABELS[step.stage]}{progress}
+										</span>
+										{step.done && step.durationMs !== undefined && (
+											<span className="text-xs text-muted-foreground/60">
+												{formatDuration(step.durationMs)}
+											</span>
+										)}
+									</div>
+									{step.done && completionDetail && (
+										<p className="text-xs text-muted-foreground/60 mt-0.5 truncate">{completionDetail}</p>
+									)}
+									{step.active && recentLog.length > 0 && (
+										<div className="mt-1.5 space-y-0.5 max-h-40 overflow-y-auto">
+											{recentLog.map((line, j) => {
+												const isLast = j === recentLog.length - 1;
+												return (
+													<p
+														key={`${step.stage}-${j}`}
+														className={`text-xs font-mono truncate ${isLast ? "text-muted-foreground" : "text-muted-foreground/40"}`}
+													>
+														{line}
+													</p>
+												);
+											})}
+											<div ref={logEndRef} />
+										</div>
+									)}
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,109 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Components } from "react-markdown";
+
+interface MarkdownProps {
+	children: string;
+	onAnchorClick?: (kind: "group" | "file", id: string) => void;
+	activeId?: string | null;
+}
+
+const ANCHOR_RE = /\[\[(group|file):([^\]]+)\]\]/g;
+
+function preprocess(text: string): string {
+	return text.replace(ANCHOR_RE, (_, kind, id) => {
+		const encoded = encodeURIComponent(id);
+		return `![${kind}:${encoded}](newpr)`;
+	});
+}
+
+export function Markdown({ children, onAnchorClick, activeId }: MarkdownProps) {
+	const processed = preprocess(children);
+
+	const components: Components = {
+		h1: ({ children }) => <h1 className="text-xl font-bold mt-6 mb-3 break-words">{children}</h1>,
+		h2: ({ children }) => <h2 className="text-lg font-semibold mt-6 mb-2 break-words">{children}</h2>,
+		h3: ({ children }) => <h3 className="text-base font-medium mt-4 mb-1 break-words">{children}</h3>,
+		h4: ({ children }) => <h4 className="text-sm font-medium mt-3 mb-1 break-words">{children}</h4>,
+		p: ({ children }) => <p className="text-sm leading-relaxed text-foreground/90 break-words mb-3">{children}</p>,
+		ul: ({ children }) => <ul className="space-y-1 mb-3">{children}</ul>,
+		ol: ({ children }) => <ol className="list-decimal pl-5 space-y-1 mb-3 text-sm text-foreground/90">{children}</ol>,
+		li: ({ children }) => <li className="text-sm text-muted-foreground ml-4 break-words leading-relaxed">{children}</li>,
+		strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
+		em: ({ children }) => <em className="italic">{children}</em>,
+		code: ({ children, className }) => {
+			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="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>
+		),
+		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") {
+				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
+					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 ${
+						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"
+					}`}
+				>
+					{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>
+		),
+		hr: () => <hr className="border-border my-4" />,
+		table: ({ children }) => (
+			<div className="overflow-x-auto mb-3">
+				<table className="text-sm w-full border-collapse">{children}</table>
+			</div>
+		),
+		th: ({ children }) => <th className="border-b border-border px-3 py-1.5 text-left text-xs font-medium text-muted-foreground">{children}</th>,
+		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>;
+}

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

@@ -0,0 +1,45 @@
+import { useCallback, useRef } from "react";
+
+export function ResizeHandle({
+	onResize,
+	side = "right",
+}: {
+	onResize: (delta: number) => void;
+	side?: "left" | "right";
+}) {
+	const dragging = useRef(false);
+	const startX = useRef(0);
+
+	const onMouseDown = useCallback((e: React.MouseEvent) => {
+		e.preventDefault();
+		dragging.current = true;
+		startX.current = e.clientX;
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+
+		const onMouseMove = (ev: MouseEvent) => {
+			if (!dragging.current) return;
+			const delta = ev.clientX - startX.current;
+			startX.current = ev.clientX;
+			onResize(side === "right" ? delta : -delta);
+		};
+
+		const onMouseUp = () => {
+			dragging.current = false;
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		};
+
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	}, [onResize, side]);
+
+	return (
+		<div
+			onMouseDown={onMouseDown}
+			className="w-1 shrink-0 cursor-col-resize hover:bg-blue-500/30 active:bg-blue-500/50 transition-colors"
+		/>
+	);
+}

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

@@ -0,0 +1,185 @@
+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 { 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";
+
+const VALID_TABS = ["story", "summary", "groups", "files", "narrative"] as const;
+type TabValue = typeof VALID_TABS[number];
+
+function getInitialTab(): TabValue {
+	const param = new URLSearchParams(window.location.search).get("tab");
+	if (param && VALID_TABS.includes(param as TabValue)) return param as TabValue;
+	return "story";
+}
+
+function setTabParam(tab: string) {
+	const url = new URL(window.location.href);
+	url.searchParams.set("tab", tab);
+	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",
+};
+
+export function ResultsScreen({
+	data,
+	onBack,
+	activeId,
+	onAnchorClick,
+}: {
+	data: NewprOutput;
+	onBack: () => void;
+	activeId: string | null;
+	onAnchorClick: (kind: "group" | "file", id: string) => void;
+}) {
+	const { meta, summary } = data;
+	const [tab, setTab] = useState<TabValue>(getInitialTab);
+	const [scrolled, setScrolled] = useState(false);
+	const sentinelRef = 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();
+	}, []);
+
+	function handleTabChange(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>
+							<a
+								href={meta.pr_url}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-muted-foreground font-mono text-sm 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>
+						</div>
+
+						<h1 className="text-2xl font-bold tracking-tight mb-5" style={{ textWrap: "balance" }}>{meta.pr_title}</h1>
+
+						<div className="flex flex-wrap gap-x-5 gap-y-2 mb-6">
+							<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"
+							>
+								{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>
+							</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>
+							</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}>
+							<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>
+					</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
+						</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>
+			</div>
+		</div>
+	);
+}