newpr 0.1.3 → 0.3.0

package/src/web/client/hooks/useAnalysis.ts

@@ -7,6 +7,7 @@ type Phase = "idle" | "loading" | "done" | "error";
 interface AnalysisState {
 	phase: Phase;
 	sessionId: string | null;
+	historyId: string | null;
 	events: ProgressEvent[];
 	result: NewprOutput | null;
 	error: string | null;
@@ -18,6 +19,7 @@ export function useAnalysis() {
 	const [state, setState] = useState<AnalysisState>({
 		phase: "idle",
 		sessionId: null,
+		historyId: null,
 		events: [],
 		result: null,
 		error: null,
@@ -30,6 +32,7 @@ export function useAnalysis() {
 		setState({
 			phase: "loading",
 			sessionId: null,
+			historyId: null,
 			events: [],
 			result: null,
 			error: null,
@@ -75,11 +78,12 @@ export function useAnalysis() {
 				es.close();
 				eventSourceRef.current = null;
 				const resultRes = await fetch(`/api/analysis/${sessionId}`);
-				const data = await resultRes.json();
+				const data = await resultRes.json() as { result?: NewprOutput; historyId?: string };
 				setState((s) => ({
 					...s,
 					phase: "done",
 					result: data.result ?? null,
+					historyId: data.historyId ?? null,
 				}));
 			});
 
@@ -109,6 +113,7 @@ export function useAnalysis() {
 		setState((s) => ({
 			...s,
 			phase: "loading",
+			historyId: null,
 			events: [],
 			result: null,
 			error: null,
@@ -125,6 +130,7 @@ export function useAnalysis() {
 				phase: "done",
 				result: data,
 				sessionId,
+				historyId: sessionId,
 			}));
 		} catch (err) {
 			setState((s) => ({
@@ -141,6 +147,7 @@ export function useAnalysis() {
 		setState({
 			phase: "idle",
 			sessionId: null,
+			historyId: null,
 			events: [],
 			result: null,
 			error: null,

package/src/web/client/lib/shiki.ts

@@ -0,0 +1,63 @@
+import { createHighlighter, type Highlighter } from "shiki";
+
+export const SHIKI_LANGS = [
+	"typescript", "tsx", "javascript", "jsx",
+	"python", "go", "rust", "css", "json",
+	"yaml", "html", "bash", "java", "c",
+	"cpp", "ruby", "php", "swift", "kotlin",
+	"sql", "markdown", "toml", "xml",
+] as const;
+
+export type ShikiLang = (typeof SHIKI_LANGS)[number];
+
+let hlInstance: Highlighter | null = null;
+let hlLoading: Promise<Highlighter> | null = null;
+
+export function ensureHighlighter(): Promise<Highlighter> {
+	if (hlInstance) return Promise.resolve(hlInstance);
+	if (!hlLoading) {
+		hlLoading = createHighlighter({
+			themes: ["github-light", "github-dark"],
+			langs: [...SHIKI_LANGS],
+		}).then((hl) => { hlInstance = hl; return hl; });
+	}
+	return hlLoading;
+}
+
+ensureHighlighter().catch(() => {});
+
+export function getHighlighterSync(): Highlighter | null {
+	return hlInstance;
+}
+
+const EXT_TO_LANG: Record<string, string> = {
+	ts: "typescript", tsx: "tsx", mts: "typescript", cts: "typescript",
+	js: "javascript", jsx: "jsx", mjs: "javascript", cjs: "javascript",
+	py: "python", pyi: "python",
+	go: "go", rs: "rust",
+	css: "css", scss: "css", less: "css",
+	json: "json", jsonc: "json",
+	yaml: "yaml", yml: "yaml",
+	html: "html", htm: "html", vue: "html", svelte: "html",
+	sh: "bash", bash: "bash", zsh: "bash",
+	java: "java", kt: "kotlin",
+	c: "c", h: "c", cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp",
+	rb: "ruby", php: "php", swift: "swift",
+	sql: "sql", md: "markdown", mdx: "markdown",
+	toml: "toml",
+};
+
+export function detectShikiLang(filePath: string): ShikiLang | null {
+	const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+	return (EXT_TO_LANG[ext] as ShikiLang | undefined) ?? null;
+}
+
+export function langFromClassName(className: string | undefined): ShikiLang | null {
+	if (!className) return null;
+	const match = className.match(/language-(\w+)/);
+	if (!match) return null;
+	const raw = match[1]!.toLowerCase();
+	const mapped = EXT_TO_LANG[raw] ?? raw;
+	if ((SHIKI_LANGS as readonly string[]).includes(mapped)) return mapped as ShikiLang;
+	return null;
+}

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

@@ -1,6 +1,5 @@
-import { useState, useEffect } from "react";
-import { Loader2, Sparkles, RefreshCw } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { useState, useEffect, useCallback } from "react";
+import { Loader2, Sparkles, RefreshCw, Download, AlertCircle } from "lucide-react";
 import type { NewprOutput } from "../../../types/output.ts";
 
 export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId?: string | null }) {
@@ -12,10 +11,21 @@ export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId
 		if (data.cartoon) {
 			setImageUrl(`data:${data.cartoon.mimeType};base64,${data.cartoon.imageBase64}`);
 			setState("done");
+			return;
 		}
-	}, [data.cartoon]);
+		if (!sessionId) return;
+		fetch(`/api/sessions/${sessionId}/cartoon`)
+			.then((r) => r.json())
+			.then((cartoon) => {
+				if (cartoon?.imageBase64) {
+					setImageUrl(`data:${cartoon.mimeType};base64,${cartoon.imageBase64}`);
+					setState("done");
+				}
+			})
+			.catch(() => {});
+	}, [data.cartoon, sessionId]);
 
-	async function generate() {
+	const generate = useCallback(async () => {
 		setState("loading");
 		setError(null);
 		try {
@@ -36,61 +46,108 @@ export function CartoonPanel({ data, sessionId }: { data: NewprOutput; sessionId
 			setError(err instanceof Error ? err.message : String(err));
 			setState("error");
 		}
-	}
+	}, [data, sessionId]);
+
+	const download = useCallback(() => {
+		if (!imageUrl) return;
+		const a = document.createElement("a");
+		a.href = imageUrl;
+		a.download = `newpr-comic-${data.meta.pr_number}.png`;
+		a.click();
+	}, [imageUrl, data.meta.pr_number]);
 
 	if (state === "idle") {
 		return (
-			<div className="pt-6 flex flex-col items-center gap-6 py-20">
-				<Sparkles className="h-12 w-12 text-yellow-500/60" />
-				<div className="text-center space-y-2">
-					<h3 className="text-lg font-semibold">PR 4-Panel Comic</h3>
-					<p className="text-sm text-muted-foreground max-w-sm">
-						Turn this PR into a fun 4-panel comic strip. Powered by Gemini.
-					</p>
+			<div className="pt-8 flex flex-col items-center">
+				<div className="w-full max-w-sm space-y-6">
+					<div className="space-y-2">
+						<h3 className="text-xs font-medium">Comic Strip</h3>
+						<p className="text-[11px] text-muted-foreground/60 leading-relaxed">
+							Generate a 4-panel comic strip that visualizes the key changes in this PR. Powered by Gemini.
+						</p>
+					</div>
+					<button
+						type="button"
+						onClick={generate}
+						className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-foreground text-background text-xs font-medium hover:opacity-90 transition-opacity"
+					>
+						<Sparkles className="h-3.5 w-3.5" />
+						Generate
+					</button>
 				</div>
-				<Button onClick={generate} size="lg">
-					<Sparkles className="mr-2 h-4 w-4" />
-					Generate Comic
-				</Button>
 			</div>
 		);
 	}
 
 	if (state === "loading") {
 		return (
-			<div className="pt-6 flex flex-col items-center gap-4 py-20">
-				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-				<p className="text-sm text-muted-foreground">Drawing your PR comic...</p>
-				<p className="text-xs text-muted-foreground/60">This may take 10-30 seconds</p>
+			<div className="pt-8 flex flex-col items-center">
+				<div className="w-full max-w-sm space-y-4">
+					<div className="aspect-[4/3] rounded-lg border border-dashed border-border/60 flex flex-col items-center justify-center gap-3">
+						<Loader2 className="h-5 w-5 animate-spin text-muted-foreground/40" />
+						<div className="text-center space-y-1">
+							<p className="text-xs text-muted-foreground/60">Generating comic...</p>
+							<p className="text-[10px] text-muted-foreground/30">This may take 10-30 seconds</p>
+						</div>
+					</div>
+				</div>
 			</div>
 		);
 	}
 
 	if (state === "error") {
 		return (
-			<div className="pt-6 flex flex-col items-center gap-4 py-20">
-				<p className="text-sm text-destructive">{error}</p>
-				<Button variant="ghost" onClick={generate}>
-					<RefreshCw className="mr-2 h-3.5 w-3.5" />
-					Try again
-				</Button>
+			<div className="pt-8 flex flex-col items-center">
+				<div className="w-full max-w-sm space-y-4">
+					<div className="rounded-lg border border-destructive/20 bg-destructive/5 px-4 py-3 flex items-start gap-2.5">
+						<AlertCircle className="h-3.5 w-3.5 text-destructive shrink-0 mt-0.5" />
+						<div className="space-y-1 min-w-0">
+							<p className="text-xs text-destructive font-medium">Generation failed</p>
+							<p className="text-[11px] text-destructive/70 break-words">{error}</p>
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={generate}
+						className="w-full flex items-center justify-center gap-2 h-9 rounded-lg border text-xs text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
+					>
+						<RefreshCw className="h-3 w-3" />
+						Try again
+					</button>
+				</div>
 			</div>
 		);
 	}
 
 	return (
-		<div className="pt-6 flex flex-col items-center gap-4">
+		<div className="pt-6 space-y-3">
 			{imageUrl && (
-				<img
-					src={imageUrl}
-					alt="PR 4-panel comic"
-					className="max-w-full rounded-lg border shadow-sm"
-				/>
+				<div className="rounded-lg border overflow-hidden">
+					<img
+						src={imageUrl}
+						alt="PR 4-panel comic"
+						className="w-full"
+					/>
+				</div>
 			)}
-			<Button variant="ghost" size="sm" onClick={generate}>
-				<RefreshCw className="mr-2 h-3.5 w-3.5" />
-				Regenerate
-			</Button>
+			<div className="flex items-center justify-end gap-1.5">
+				<button
+					type="button"
+					onClick={download}
+					className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[11px] text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
+				>
+					<Download className="h-3 w-3" />
+					Download
+				</button>
+				<button
+					type="button"
+					onClick={generate}
+					className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[11px] text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
+				>
+					<RefreshCw className="h-3 w-3" />
+					Regenerate
+				</button>
+			</div>
 		</div>
 	);
 }

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

@@ -0,0 +1,158 @@
+import { useState, useEffect, useCallback } from "react";
+import { Markdown } from "../components/Markdown.tsx";
+import { RefreshCw, ExternalLink, AlertCircle, Loader2 } from "lucide-react";
+import type { PrComment } from "../../../types/github.ts";
+
+interface DiscussionData {
+	body: string;
+	comments: PrComment[];
+}
+
+function timeAgo(dateStr: string): string {
+	const diff = Date.now() - new Date(dateStr).getTime();
+	const mins = Math.floor(diff / 60_000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h ago`;
+	const days = Math.floor(hours / 24);
+	if (days < 30) return `${days}d ago`;
+	return new Date(dateStr).toLocaleDateString();
+}
+
+export function DiscussionPanel({ sessionId }: { sessionId?: string | null }) {
+	const [data, setData] = useState<DiscussionData | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const fetchDiscussion = useCallback(async () => {
+		if (!sessionId) return;
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`/api/sessions/${sessionId}/discussion`);
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({})) as { error?: string };
+				throw new Error(body.error ?? `HTTP ${res.status}`);
+			}
+			const json = await res.json() as DiscussionData;
+			setData(json);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setLoading(false);
+		}
+	}, [sessionId]);
+
+	useEffect(() => {
+		setData(null);
+		setError(null);
+		fetchDiscussion();
+	}, [fetchDiscussion]);
+
+	if (!sessionId) {
+		return (
+			<div className="flex flex-col items-center justify-center py-20">
+				<p className="text-xs text-muted-foreground/50">No session available</p>
+			</div>
+		);
+	}
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-20 gap-2">
+				<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground/40" />
+				<span className="text-xs text-muted-foreground/50">Loading discussion</span>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex flex-col items-center justify-center py-20 gap-3">
+				<div className="flex items-center gap-2 text-destructive">
+					<AlertCircle className="h-3.5 w-3.5" />
+					<p className="text-xs">{error}</p>
+				</div>
+				<button
+					type="button"
+					onClick={fetchDiscussion}
+					className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground/50 hover:text-foreground transition-colors"
+				>
+					<RefreshCw className="h-3 w-3" />
+					Retry
+				</button>
+			</div>
+		);
+	}
+
+	if (!data) return null;
+
+	const hasBody = data.body.trim().length > 0;
+	const hasComments = data.comments.length > 0;
+
+	return (
+		<div className="pt-5 space-y-6">
+			{hasBody && (
+				<div>
+					<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
+						Description
+					</div>
+					<div className="text-xs">
+						<Markdown>{data.body}</Markdown>
+					</div>
+				</div>
+			)}
+
+			{!hasBody && !hasComments && (
+				<div className="text-center py-12">
+					<p className="text-xs text-muted-foreground/40">No description or comments</p>
+				</div>
+			)}
+
+			{hasComments && (
+				<div>
+					<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
+						Comments
+						<span className="ml-1.5 text-muted-foreground/25">{data.comments.length}</span>
+					</div>
+					<div className="space-y-0">
+						{data.comments.map((comment, i) => (
+							<div
+								key={comment.id}
+								className={`py-4 ${i > 0 ? "border-t border-border/50" : ""}`}
+							>
+								<div className="flex items-center gap-2 mb-2.5">
+									{comment.author_avatar ? (
+										<img
+											src={comment.author_avatar}
+											alt={comment.author}
+											className="h-5 w-5 rounded-full"
+										/>
+									) : (
+										<div className="h-5 w-5 rounded-full bg-muted" />
+									)}
+									<span className="text-xs font-medium">{comment.author}</span>
+									<span className="text-[10px] text-muted-foreground/40">
+										{timeAgo(comment.created_at)}
+									</span>
+									<a
+										href={comment.html_url}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="ml-auto text-muted-foreground/20 hover:text-muted-foreground/60 transition-colors"
+									>
+										<ExternalLink className="h-3 w-3" />
+									</a>
+								</div>
+								<div className="pl-7 text-xs">
+									<Markdown>{comment.body}</Markdown>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}