newpr 0.1.0

package/src/web/client/panels/StoryPanel.tsx

@@ -0,0 +1,54 @@
+import type { NewprOutput } from "../../../types/output.ts";
+import { Markdown } from "../components/Markdown.tsx";
+
+export function StoryPanel({
+	data,
+	activeId,
+	onAnchorClick,
+}: {
+	data: NewprOutput;
+	activeId: string | null;
+	onAnchorClick: (kind: "group" | "file", id: string) => void;
+}) {
+	const { summary, groups, narrative } = data;
+
+	return (
+		<div className="pt-4 space-y-5">
+			<div className="space-y-3">
+				<p className="text-xs text-muted-foreground leading-relaxed">{summary.purpose}</p>
+				<div className="grid grid-cols-2 gap-4">
+					<div>
+						<span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">Scope</span>
+						<p className="text-xs text-muted-foreground mt-0.5">{summary.scope}</p>
+					</div>
+					<div>
+						<span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">Impact</span>
+						<p className="text-xs text-muted-foreground mt-0.5">{summary.impact}</p>
+					</div>
+				</div>
+				<div className="flex flex-wrap gap-1.5">
+					{groups.map((g) => (
+						<button
+							key={g.name}
+							type="button"
+							onClick={() => onAnchorClick("group", g.name)}
+							className={`text-[11px] px-2 py-0.5 rounded-full font-medium transition-colors ${
+								activeId === `group:${g.name}`
+									? "bg-blue-500/20 text-blue-500 dark:text-blue-300 ring-1 ring-blue-500/40"
+									: "bg-muted hover:bg-muted/80"
+							}`}
+						>
+							{g.name}
+						</button>
+					))}
+				</div>
+			</div>
+
+			<div className="border-t pt-5">
+				<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>
+					{narrative}
+				</Markdown>
+			</div>
+		</div>
+	);
+}

package/src/web/client/panels/SummaryPanel.tsx

@@ -0,0 +1,20 @@
+import type { PrSummary } from "../../../types/output.ts";
+
+export function SummaryPanel({ summary }: { summary: PrSummary }) {
+	return (
+		<div className="pt-6 divide-y">
+			<div className="pb-6">
+				<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">Purpose</h3>
+				<p className="text-sm leading-relaxed">{summary.purpose}</p>
+			</div>
+			<div className="py-6">
+				<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">Scope</h3>
+				<p className="text-sm leading-relaxed">{summary.scope}</p>
+			</div>
+			<div className="pt-6">
+				<h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">Impact</h3>
+				<p className="text-sm leading-relaxed">{summary.impact}</p>
+			</div>
+		</div>
+	);
+}

package/src/web/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils.ts";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/web/components/ui/card.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.ts";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)} {...props} />
+	),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+	),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+	),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+	),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

package/src/web/components/ui/scroll-area.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/utils.ts";
+
+const ScrollArea = React.forwardRef<
+	React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/web/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils.ts";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/web/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>newpr</title>
+	<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
+	<script>document.head.appendChild(Object.assign(document.createElement("link"),{rel:"stylesheet",href:"/styles.css"}))</script>
+</head>
+<body>
+	<div id="root"></div>
+	<script type="module" src="./client/main.tsx"></script>
+</body>
+</html>

package/src/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/web/server/routes.ts

@@ -0,0 +1,202 @@
+import type { NewprConfig } from "../../types/config.ts";
+import { DEFAULT_CONFIG } from "../../types/config.ts";
+import { listSessions, loadSession } from "../../history/store.ts";
+import { writeStoredConfig, type StoredConfig } from "../../config/store.ts";
+import { startAnalysis, getSession, cancelAnalysis, subscribe } from "./session-manager.ts";
+
+function json(data: unknown, status = 200): Response {
+	return new Response(JSON.stringify(data), {
+		status,
+		headers: { "Content-Type": "application/json" },
+	});
+}
+
+export function createRoutes(token: string, config: NewprConfig) {
+	return {
+		"POST /api/analysis": async (req: Request) => {
+			const body = await req.json() as { pr: string };
+			if (!body.pr) return json({ error: "Missing 'pr' field" }, 400);
+
+			const result = startAnalysis(body.pr, token, config);
+			if ("error" in result) return json({ error: result.error }, result.status);
+
+			return json({
+				sessionId: result.sessionId,
+				eventsUrl: `/api/analysis/${result.sessionId}/events`,
+			});
+		},
+
+		"GET /api/analysis/:id": (req: Request) => {
+			const url = new URL(req.url);
+			const id = url.pathname.split("/").pop()!;
+			const session = getSession(id);
+			if (!session) return json({ error: "Session not found" }, 404);
+
+			return json({
+				id: session.id,
+				status: session.status,
+				startedAt: session.startedAt,
+				finishedAt: session.finishedAt,
+				error: session.error,
+				result: session.result,
+			});
+		},
+
+		"GET /api/analysis/:id/events": (req: Request) => {
+			const url = new URL(req.url);
+			const segments = url.pathname.split("/");
+			const id = segments[segments.length - 2]!;
+
+			const session = getSession(id);
+			if (!session) return json({ error: "Session not found" }, 404);
+
+			const stream = new ReadableStream({
+				start(controller) {
+					const encoder = new TextEncoder();
+					const send = (eventType: string, data: string) => {
+						controller.enqueue(encoder.encode(`event: ${eventType}\ndata: ${data}\n\n`));
+					};
+
+					const unsubscribe = subscribe(id, (event) => {
+						try {
+							if ("type" in event && event.type === "done") {
+								send("done", JSON.stringify({}));
+								controller.close();
+							} else if ("type" in event && event.type === "error") {
+								send("analysis_error", JSON.stringify({ message: event.data ?? "Unknown error" }));
+								controller.close();
+							} else {
+								send("progress", JSON.stringify(event));
+							}
+						} catch {
+							controller.close();
+						}
+					});
+
+					if (!unsubscribe) {
+						send("analysis_error", JSON.stringify({ message: "Session not found" }));
+						controller.close();
+					}
+
+					req.signal.addEventListener("abort", () => {
+						unsubscribe?.();
+						try { controller.close(); } catch {}
+					});
+				},
+			});
+
+			return new Response(stream, {
+				headers: {
+					"Content-Type": "text/event-stream",
+					"Cache-Control": "no-cache",
+					"Connection": "keep-alive",
+				},
+			});
+		},
+
+		"POST /api/analysis/:id/cancel": (req: Request) => {
+			const url = new URL(req.url);
+			const segments = url.pathname.split("/");
+			const id = segments[segments.length - 2]!;
+			const ok = cancelAnalysis(id);
+			return json({ ok });
+		},
+
+		"GET /api/sessions": async () => {
+			const sessions = await listSessions(50);
+			return json(sessions);
+		},
+
+		"GET /api/sessions/:id": async (req: Request) => {
+			const url = new URL(req.url);
+			const id = url.pathname.split("/").pop()!;
+			const data = await loadSession(id);
+			if (!data) return json({ error: "Session not found" }, 404);
+			return json(data);
+		},
+
+		"GET /api/me": async () => {
+			try {
+				const res = await fetch("https://api.github.com/user", {
+					headers: {
+						Authorization: `token ${token}`,
+						Accept: "application/vnd.github.v3+json",
+						"User-Agent": "newpr-cli",
+					},
+				});
+				if (!res.ok) return json({ login: null });
+				const user = await res.json() as Record<string, unknown>;
+				return json({
+					login: user.login as string,
+					avatar_url: user.avatar_url as string,
+					html_url: user.html_url as string,
+					name: (user.name as string) ?? null,
+				});
+			} catch {
+				return json({ login: null });
+			}
+		},
+
+		"GET /api/config": async () => {
+			return json({
+				model: config.model,
+				agent: config.agent ?? null,
+				language: config.language,
+				max_files: config.max_files,
+				timeout: config.timeout,
+				concurrency: config.concurrency,
+				has_api_key: !!config.openrouter_api_key,
+				has_github_token: !!token,
+				defaults: {
+					model: DEFAULT_CONFIG.model,
+					language: DEFAULT_CONFIG.language,
+					max_files: DEFAULT_CONFIG.max_files,
+					timeout: DEFAULT_CONFIG.timeout,
+					concurrency: DEFAULT_CONFIG.concurrency,
+				},
+			});
+		},
+
+		"PUT /api/config": async (req: Request) => {
+			const body = await req.json() as Partial<StoredConfig>;
+			const update: StoredConfig = {};
+
+			if (body.openrouter_api_key !== undefined) update.openrouter_api_key = body.openrouter_api_key;
+			if (body.model !== undefined) {
+				update.model = body.model;
+				config.model = body.model;
+			}
+			if (body.agent !== undefined) {
+				const val = body.agent as string;
+				if (val === "claude" || val === "opencode" || val === "codex") {
+					update.agent = val;
+					config.agent = val;
+				} else if (val === "" || val === "auto") {
+					update.agent = undefined;
+					config.agent = undefined;
+				}
+			}
+			if (body.language !== undefined) {
+				update.language = body.language;
+				config.language = body.language === "auto"
+					? (await import("../../config/index.ts")).detectLanguage()
+					: body.language;
+			}
+			if (body.max_files !== undefined) {
+				update.max_files = body.max_files;
+				config.max_files = body.max_files;
+			}
+			if (body.timeout !== undefined) {
+				update.timeout = body.timeout;
+				config.timeout = body.timeout;
+			}
+			if (body.concurrency !== undefined) {
+				update.concurrency = body.concurrency;
+				config.concurrency = body.concurrency;
+			}
+
+			await writeStoredConfig(update);
+			return json({ ok: true });
+		},
+	};
+}

package/src/web/server/session-manager.ts

@@ -0,0 +1,147 @@
+import type { NewprConfig } from "../../types/config.ts";
+import type { NewprOutput } from "../../types/output.ts";
+import type { ProgressEvent } from "../../analyzer/progress.ts";
+import { analyzePr } from "../../analyzer/pipeline.ts";
+import { parsePrInput } from "../../github/parse-pr.ts";
+import { saveSession } from "../../history/store.ts";
+
+type SessionStatus = "running" | "done" | "error" | "canceled";
+
+interface AnalysisSession {
+	id: string;
+	status: SessionStatus;
+	events: ProgressEvent[];
+	result?: NewprOutput;
+	error?: string;
+	startedAt: number;
+	finishedAt?: number;
+	abortController: AbortController;
+	subscribers: Set<(event: ProgressEvent | { type: "done" | "error"; data?: string }) => void>;
+}
+
+const sessions = new Map<string, AnalysisSession>();
+const MAX_CONCURRENT = 4;
+
+function generateId(): string {
+	return `s_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function runningCount(): number {
+	let count = 0;
+	for (const s of sessions.values()) {
+		if (s.status === "running") count++;
+	}
+	return count;
+}
+
+export function getSession(id: string): AnalysisSession | undefined {
+	return sessions.get(id);
+}
+
+export function startAnalysis(
+	prInput: string,
+	token: string,
+	config: NewprConfig,
+): { sessionId: string } | { error: string; status: number } {
+	if (runningCount() >= MAX_CONCURRENT) {
+		return { error: "Too many concurrent analyses. Try again later.", status: 429 };
+	}
+
+	const id = generateId();
+	const abortController = new AbortController();
+
+	const session: AnalysisSession = {
+		id,
+		status: "running",
+		events: [],
+		startedAt: Date.now(),
+		abortController,
+		subscribers: new Set(),
+	};
+	sessions.set(id, session);
+
+	runPipeline(session, prInput, token, config);
+
+	return { sessionId: id };
+}
+
+async function runPipeline(
+	session: AnalysisSession,
+	prInput: string,
+	token: string,
+	config: NewprConfig,
+): Promise<void> {
+	try {
+		const pr = parsePrInput(prInput);
+		const result = await analyzePr({
+			pr,
+			token,
+			config,
+			preferredAgent: config.agent,
+			onProgress: (event: ProgressEvent) => {
+				const stamped = { ...event, timestamp: event.timestamp ?? Date.now() };
+				session.events.push(stamped);
+				for (const sub of session.subscribers) {
+					sub(stamped);
+				}
+			},
+		});
+
+		session.status = "done";
+		session.result = result;
+		session.finishedAt = Date.now();
+
+		for (const sub of session.subscribers) {
+			sub({ type: "done" });
+		}
+		session.subscribers.clear();
+
+		await saveSession(result).catch(() => {});
+	} catch (err) {
+		const msg = err instanceof Error ? err.message : String(err);
+		session.status = "error";
+		session.error = msg;
+		session.finishedAt = Date.now();
+
+		for (const sub of session.subscribers) {
+			sub({ type: "error", data: msg });
+		}
+		session.subscribers.clear();
+	}
+}
+
+export function cancelAnalysis(id: string): boolean {
+	const session = sessions.get(id);
+	if (!session || session.status !== "running") return false;
+	session.abortController.abort();
+	session.status = "canceled";
+	session.finishedAt = Date.now();
+	session.subscribers.clear();
+	return true;
+}
+
+export function subscribe(
+	id: string,
+	callback: (event: ProgressEvent | { type: "done" | "error"; data?: string }) => void,
+): (() => void) | null {
+	const session = sessions.get(id);
+	if (!session) return null;
+
+	for (const past of session.events) {
+		callback(past);
+	}
+
+	if (session.status === "done") {
+		callback({ type: "done" });
+		return () => {};
+	}
+	if (session.status === "error") {
+		callback({ type: "error", data: session.error });
+		return () => {};
+	}
+
+	session.subscribers.add(callback);
+	return () => {
+		session.subscribers.delete(callback);
+	};
+}