newpr 0.4.0 → 0.5.0

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

@@ -0,0 +1,316 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Loader2, Presentation, RefreshCw, Download, AlertCircle, ChevronLeft, ChevronRight } from "lucide-react";
+import type { NewprOutput, SlideDeck } from "../../../types/output.ts";
+import { sendNotification } from "../lib/notify.ts";
+
+export function SlidesPanel({ data, sessionId }: { data: NewprOutput; sessionId?: string | null }) {
+	const [state, setState] = useState<"idle" | "loading" | "done" | "error">("idle");
+	const [deck, setDeck] = useState<SlideDeck | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [progress, setProgress] = useState("");
+	const [progressDetail, setProgressDetail] = useState<{ current: number; total: number } | null>(null);
+	const [currentSlide, setCurrentSlide] = useState(0);
+	const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+	const stopPolling = useCallback(() => {
+		if (pollRef.current) {
+			clearInterval(pollRef.current);
+			pollRef.current = null;
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!sessionId) return;
+		fetch(`/api/sessions/${sessionId}/slides`)
+			.then((r) => r.json())
+			.then((d) => {
+				if (d?.slides?.length > 0) {
+					setDeck(d as SlideDeck);
+					setState("done");
+				}
+			})
+			.catch(() => {});
+		return stopPolling;
+	}, [sessionId, stopPolling]);
+
+	const startPolling = useCallback(() => {
+		if (!sessionId || pollRef.current) return;
+		pollRef.current = setInterval(async () => {
+			try {
+				const [statusRes, slidesRes] = await Promise.all([
+					fetch(`/api/slides/status?sessionId=${sessionId}`),
+					fetch(`/api/sessions/${sessionId}/slides`),
+				]);
+				const job = await statusRes.json() as { status: string; message?: string; current?: number; total?: number };
+				if (job.message) setProgress(job.message);
+				if (job.total && job.total > 0) setProgressDetail({ current: job.current ?? 0, total: job.total });
+
+				const partial = slidesRes.ok ? await slidesRes.json() as SlideDeck | null : null;
+				if (partial?.slides?.length) setDeck(partial);
+
+				if (job.status === "done") {
+					stopPolling();
+					if (partial?.slides?.length) {
+						setDeck(partial);
+						setState("done");
+						sendNotification("Slides ready", `${partial.slides.length} slides generated`);
+					}
+				} else if (job.status === "error") {
+					stopPolling();
+					setError(job.message ?? "Generation failed");
+					if (partial?.slides?.length) {
+						setDeck(partial);
+						setState("done");
+					} else {
+						setState("error");
+					}
+				}
+			} catch {}
+		}, 1000);
+	}, [sessionId, stopPolling]);
+
+	const generate = useCallback(async (resume = false) => {
+		if (!sessionId) return;
+		setState("loading");
+		setError(null);
+		setProgress(resume ? "Resuming failed slides..." : "Starting...");
+		setProgressDetail(null);
+
+		try {
+			const res = await fetch("/api/slides", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ sessionId, resume }),
+			});
+			if (!res.ok) {
+				const body = await res.json() as { error?: string };
+				throw new Error(body.error ?? `HTTP ${res.status}`);
+			}
+			startPolling();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+			setState("error");
+		}
+	}, [sessionId, startPolling]);
+
+	useEffect(() => {
+		if (!sessionId || state !== "idle") return;
+		fetch(`/api/slides/status?sessionId=${sessionId}`)
+			.then((r) => r.json())
+			.then((job) => {
+				if ((job as { status: string }).status === "running") {
+					setState("loading");
+					setProgress((job as { message?: string }).message ?? "");
+					startPolling();
+				}
+			})
+			.catch(() => {});
+	}, [sessionId, state, startPolling]);
+
+	const downloadAll = useCallback(() => {
+		if (!deck) return;
+		for (const slide of deck.slides) {
+			const a = document.createElement("a");
+			a.href = `data:${slide.mimeType};base64,${slide.imageBase64}`;
+			a.download = `newpr-slide-${slide.index + 1}-${data.meta.pr_number}.png`;
+			a.click();
+		}
+	}, [deck, data.meta.pr_number]);
+
+	if (state === "idle") {
+		return (
+			<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">Slide Deck</h3>
+						<p className="text-[11px] text-muted-foreground/60 leading-relaxed">
+							Generate a presentation that explains this PR to your team. The number of slides is automatically determined based on PR complexity.
+						</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"
+					>
+						<Presentation className="h-3.5 w-3.5" />
+						Generate Slides
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	if (state === "loading") {
+		const pct = progressDetail && progressDetail.total > 0 ? Math.round((progressDetail.current / progressDetail.total) * 100) : 0;
+		const partialSlides = deck?.slides ?? [];
+		return (
+			<div className="pt-5 space-y-4">
+				<div className="flex items-center gap-3">
+					<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground/40 shrink-0" />
+					<p className="text-xs text-muted-foreground/60 line-clamp-1 flex-1">{progress}</p>
+					{progressDetail && progressDetail.total > 0 && (
+						<span className="text-[10px] text-muted-foreground/30 tabular-nums shrink-0">{progressDetail.current}/{progressDetail.total}</span>
+					)}
+				</div>
+				{progressDetail && progressDetail.total > 0 && (
+					<div className="h-1 rounded-full bg-muted overflow-hidden">
+						<div className="h-full bg-foreground/40 rounded-full transition-all duration-500" style={{ width: `${pct}%` }} />
+					</div>
+				)}
+				{partialSlides.length > 0 && (
+					<div className="space-y-3">
+						<div className="rounded-lg border overflow-hidden bg-black">
+							<img
+								src={`data:${partialSlides[currentSlide >= partialSlides.length ? 0 : currentSlide]!.mimeType};base64,${partialSlides[currentSlide >= partialSlides.length ? 0 : currentSlide]!.imageBase64}`}
+								alt={partialSlides[currentSlide >= partialSlides.length ? 0 : currentSlide]!.title}
+								className="w-full aspect-video object-contain"
+							/>
+						</div>
+						<div className="flex gap-1.5 overflow-x-auto pb-1">
+							{partialSlides.map((s, i) => (
+								<button
+									key={s.index}
+									type="button"
+									onClick={() => setCurrentSlide(i)}
+									className={`shrink-0 rounded-md overflow-hidden border-2 transition-colors ${
+										i === (currentSlide >= partialSlides.length ? 0 : currentSlide) ? "border-foreground" : "border-transparent hover:border-border"
+									}`}
+								>
+									<img src={`data:${s.mimeType};base64,${s.imageBase64}`} alt={s.title} className="h-12 aspect-video object-cover" />
+								</button>
+							))}
+						</div>
+					</div>
+				)}
+				{partialSlides.length === 0 && !progressDetail && (
+					<p className="text-[10px] text-muted-foreground/30 text-center">This may take a few minutes</p>
+				)}
+			</div>
+		);
+	}
+
+	if (state === "error") {
+		return (
+			<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(true)}
+						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>
+		);
+	}
+
+	if (!deck || deck.slides.length === 0) return null;
+	const slide = deck.slides[currentSlide];
+	if (!slide) return null;
+	const total = deck.slides.length;
+	const hasFailed = deck.failedIndices && deck.failedIndices.length > 0;
+
+	return (
+		<div className="pt-5 space-y-3">
+			{hasFailed && (
+				<div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-yellow-500/20 bg-yellow-500/5">
+					<AlertCircle className="h-3.5 w-3.5 text-yellow-600 dark:text-yellow-400 shrink-0" />
+					<span className="text-[11px] text-yellow-700 dark:text-yellow-300 flex-1">
+						{deck.failedIndices!.length} slide{deck.failedIndices!.length > 1 ? "s" : ""} failed to generate
+					</span>
+					<button
+						type="button"
+						onClick={() => generate(true)}
+						className="flex items-center gap-1 text-[11px] font-medium text-yellow-700 dark:text-yellow-300 hover:text-yellow-900 dark:hover:text-yellow-100 shrink-0 transition-colors"
+					>
+						<RefreshCw className="h-3 w-3" />
+						Retry failed
+					</button>
+				</div>
+			)}
+
+			<div className="rounded-lg border overflow-hidden bg-black">
+				<img
+					src={`data:${slide.mimeType};base64,${slide.imageBase64}`}
+					alt={slide.title}
+					className="w-full aspect-video object-contain"
+				/>
+			</div>
+
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						onClick={() => setCurrentSlide((i) => Math.max(0, i - 1))}
+						disabled={currentSlide === 0}
+						className="flex h-7 w-7 items-center justify-center rounded-md border text-muted-foreground/60 hover:text-foreground hover:border-foreground/20 disabled:opacity-20 transition-colors"
+					>
+						<ChevronLeft className="h-3.5 w-3.5" />
+					</button>
+					<span className="text-[11px] text-muted-foreground/50 tabular-nums min-w-[60px] text-center">
+						{currentSlide + 1} / {total}
+					</span>
+					<button
+						type="button"
+						onClick={() => setCurrentSlide((i) => Math.min(total - 1, i + 1))}
+						disabled={currentSlide === total - 1}
+						className="flex h-7 w-7 items-center justify-center rounded-md border text-muted-foreground/60 hover:text-foreground hover:border-foreground/20 disabled:opacity-20 transition-colors"
+					>
+						<ChevronRight className="h-3.5 w-3.5" />
+					</button>
+				</div>
+
+				<div className="text-[11px] text-muted-foreground/40 truncate max-w-[50%]">
+					{slide.title}
+				</div>
+
+				<div className="flex items-center gap-1.5">
+					<button
+						type="button"
+						onClick={downloadAll}
+						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>
+
+			<div className="flex gap-1.5 overflow-x-auto pb-1">
+				{deck.slides.map((s, i) => (
+					<button
+						key={s.index}
+						type="button"
+						onClick={() => setCurrentSlide(i)}
+						className={`shrink-0 rounded-md overflow-hidden border-2 transition-colors ${
+							i === currentSlide ? "border-foreground" : "border-transparent hover:border-border"
+						}`}
+					>
+						<img
+							src={`data:${s.mimeType};base64,${s.imageBase64}`}
+							alt={s.title}
+							className="h-12 aspect-video object-cover"
+						/>
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/web/server/routes.ts

@@ -1,7 +1,7 @@
 import type { NewprConfig } from "../../types/config.ts";
 import type { NewprOutput, ChatMessage, ChatToolCall, ChatSegment } from "../../types/output.ts";
 import { DEFAULT_CONFIG } from "../../types/config.ts";
-import { listSessions, loadSession, loadSinglePatch, savePatchesSidecar, loadCommentsSidecar, saveCommentsSidecar, loadChatSidecar, saveChatSidecar, loadPatchesSidecar, saveCartoonSidecar, loadCartoonSidecar } from "../../history/store.ts";
+import { listSessions, loadSession, loadSinglePatch, savePatchesSidecar, loadCommentsSidecar, saveCommentsSidecar, loadChatSidecar, saveChatSidecar, loadPatchesSidecar, saveCartoonSidecar, loadCartoonSidecar, saveSlidesSidecar, loadSlidesSidecar } from "../../history/store.ts";
 import type { DiffComment } from "../../types/output.ts";
 import { fetchPrDiff } from "../../github/fetch-diff.ts";
 import { fetchPrBody, fetchPrComments } from "../../github/fetch-pr.ts";
@@ -10,6 +10,7 @@ import { parsePrInput } from "../../github/parse-pr.ts";
 import { writeStoredConfig, type StoredConfig } from "../../config/store.ts";
 import { startAnalysis, getSession, cancelAnalysis, subscribe, listActiveSessions } from "./session-manager.ts";
 import { generateCartoon } from "../../llm/cartoon.ts";
+import { generateSlides } from "../../llm/slides.ts";
 import { chatWithTools, type ChatTool, type ChatStreamEvent } from "../../llm/client.ts";
 import { detectAgents, runAgent } from "../../workspace/agent.ts";
 import { randomBytes } from "node:crypto";
@@ -70,6 +71,16 @@ export function createRoutes(token: string, config: NewprConfig, options: RouteO
 		return { login: "anonymous" };
 	}
 
+	interface SlideJob {
+		status: "running" | "done" | "error";
+		message: string;
+		current: number;
+		total: number;
+		plan?: { stylePrompt: string; slides: Array<{ index: number; title: string; contentPrompt: string }> };
+		imagePrompts?: Array<{ index: number; prompt: string }>;
+	}
+	const slideJobs = new Map<string, SlideJob>();
+
 	function buildChatSystemPrompt(data: NewprOutput): string {
 		const fileSummaries = data.files
 			.map((f) => `- ${f.path} (${f.status}, +${f.additions}/-${f.deletions}): ${f.summary}`)
@@ -223,7 +234,7 @@ $$
 
 	return {
 		"POST /api/analysis": async (req: Request) => {
-			const body = await req.json() as { pr: string };
+			const body = await req.json() as { pr: string; reuseSessionId?: string };
 			if (!body.pr) return json({ error: "Missing 'pr' field" }, 400);
 
 			const result = startAnalysis(body.pr, token, config);
@@ -231,6 +242,7 @@ $$
 
 			return json({
 				sessionId: result.sessionId,
+				reuseSessionId: body.reuseSessionId,
 				eventsUrl: `/api/analysis/${result.sessionId}/events`,
 			});
 		},
@@ -726,6 +738,107 @@ $$
 			return json({ ok: true });
 		},
 
+		"POST /api/sessions/:id/ask-inline": async (req: Request) => {
+			const url = new URL(req.url);
+			const segments = url.pathname.split("/");
+			const sessionId = segments[3]!;
+
+			if (!config.openrouter_api_key) {
+				return json({ error: "OpenRouter API key required" }, 400);
+			}
+
+			const body = await req.json() as { message: string };
+			if (!body.message?.trim()) return json({ error: "Missing message" }, 400);
+
+			const sessionData = await loadSession(sessionId);
+			if (!sessionData) return json({ error: "Session not found" }, 404);
+
+			const systemPrompt = buildChatSystemPrompt(sessionData);
+			const apiMessages = [
+				{ role: "system" as const, content: systemPrompt },
+				{ role: "user" as const, content: body.message.trim() },
+			];
+
+			const encoder = new TextEncoder();
+			const stream = new ReadableStream({
+				async start(controller) {
+					const send = (eventType: string, data: string) => {
+						controller.enqueue(encoder.encode(`event: ${eventType}\ndata: ${data}\n\n`));
+					};
+					try {
+						await chatWithTools(
+							{ api_key: config.openrouter_api_key, model: config.model, timeout: config.timeout },
+							apiMessages as Parameters<typeof chatWithTools>[1],
+							buildChatTools(),
+							async (name: string, args: Record<string, unknown>): Promise<string> => {
+								if (name === "get_file_diff") {
+									const filePath = args.path as string;
+									if (!filePath) return "Error: path required";
+									const patches = await loadPatchesSidecar(sessionId);
+									if (patches?.[filePath]) return patches[filePath];
+									const patch = await loadSinglePatch(sessionId, filePath);
+									if (patch) return patch;
+									return `File "${filePath}" not found`;
+								}
+								if (name === "list_files") {
+									return sessionData.files.map((f) => `${f.path} (${f.status}): ${f.summary}`).join("\n");
+								}
+								return `Tool ${name} not available in inline mode`;
+							},
+							(event: ChatStreamEvent) => {
+								if (event.type === "text") send("text", JSON.stringify({ content: event.content }));
+								else if (event.type === "error") send("chat_error", JSON.stringify({ message: event.error }));
+								else if (event.type === "done") send("done", JSON.stringify({}));
+							},
+						);
+						send("done", JSON.stringify({}));
+					} catch (err) {
+						send("chat_error", JSON.stringify({ message: err instanceof Error ? err.message : String(err) }));
+					} finally {
+						controller.close();
+					}
+				},
+			});
+
+			return new Response(stream, {
+				headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive" },
+			});
+		},
+
+		"GET /api/sessions/:id/outdated": async (req: Request) => {
+			const url = new URL(req.url);
+			const segments = url.pathname.split("/");
+			const id = segments[3]!;
+			const sessionData = await loadSession(id);
+			if (!sessionData) return json({ error: "Session not found" }, 404);
+
+			const prUrl = sessionData.meta.pr_url;
+			const analyzedUpdatedAt = sessionData.meta.pr_updated_at;
+			if (!analyzedUpdatedAt) return json({ outdated: false, reason: "no_baseline" });
+
+			try {
+				const pr = parsePrInput(prUrl);
+				const res = await fetch(
+					`https://api.github.com/repos/${pr.owner}/${pr.repo}/pulls/${pr.number}`,
+					{ headers: ghHeaders },
+				);
+				if (!res.ok) return json({ outdated: false, reason: "api_error" });
+				const data = await res.json() as { updated_at?: string; title?: string; state?: string; merged?: boolean; draft?: boolean };
+				const currentUpdatedAt = data.updated_at ?? "";
+				const outdated = currentUpdatedAt !== analyzedUpdatedAt;
+				return json({
+					outdated,
+					analyzed_at: sessionData.meta.analyzed_at,
+					analyzed_updated_at: analyzedUpdatedAt,
+					current_updated_at: currentUpdatedAt,
+					current_title: data.title,
+					current_state: data.draft ? "draft" : data.merged ? "merged" : data.state === "closed" ? "closed" : "open",
+				});
+			} catch {
+				return json({ outdated: false, reason: "fetch_error" });
+			}
+		},
+
 		"GET /api/sessions/:id/chat": async (req: Request) => {
 			const url = new URL(req.url);
 			const segments = url.pathname.split("/");
@@ -1127,5 +1240,75 @@ $$
 				return json({ error: msg }, 500);
 			}
 		},
+		"GET /api/sessions/:id/slides": async (req: Request) => {
+			const url = new URL(req.url);
+			const segments = url.pathname.split("/");
+			const id = segments[3]!;
+			const deck = await loadSlidesSidecar(id);
+			if (!deck) return json(null);
+			return json(deck);
+		},
+
+		"POST /api/slides": async (req: Request) => {
+			if (!config.openrouter_api_key) return json({ error: "OpenRouter API key required" }, 400);
+
+			const body = await req.json() as { sessionId?: string; language?: string; resume?: boolean };
+			const sessionId = body.sessionId;
+			if (!sessionId) return json({ error: "Missing sessionId" }, 400);
+
+			const data = await loadSession(sessionId);
+			if (!data) return json({ error: "Session not found" }, 404);
+
+			if (slideJobs.has(sessionId) && slideJobs.get(sessionId)!.status === "running") {
+				return json({ status: "already_running" });
+			}
+
+			const existingDeck = body.resume ? await loadSlidesSidecar(sessionId) : null;
+			const job: SlideJob = { status: "running", message: "Planning slide deck...", current: 0, total: 0 };
+			slideJobs.set(sessionId, job);
+
+			(async () => {
+				try {
+					const deck = await generateSlides(
+						config.openrouter_api_key,
+						data,
+						config.model,
+						body.language ?? config.language,
+						(msg, current, total) => {
+							job.message = msg;
+							job.current = current;
+							job.total = total;
+						},
+						existingDeck,
+						(plan, prompts) => {
+							job.plan = plan;
+							job.imagePrompts = prompts;
+						},
+						(partialDeck) => {
+							saveSlidesSidecar(sessionId, partialDeck).catch(() => {});
+						},
+					);
+					await saveSlidesSidecar(sessionId, deck);
+					job.status = "done";
+					job.message = `Generated ${deck.slides.length} slides`;
+					job.total = deck.slides.length;
+					job.current = deck.slides.length;
+				} catch (err) {
+					job.status = "error";
+					job.message = err instanceof Error ? err.message : String(err);
+				}
+			})();
+
+			return json({ status: "started" });
+		},
+
+		"GET /api/slides/status": async (req: Request) => {
+			const url = new URL(req.url);
+			const sessionId = url.searchParams.get("sessionId");
+			if (!sessionId) return json({ error: "Missing sessionId" }, 400);
+			const job = slideJobs.get(sessionId);
+			if (!job) return json({ status: "idle" });
+			return json(job);
+		},
 	};
 }

package/src/web/server.ts

@@ -102,6 +102,12 @@ export async function startWebServer(options: WebServerOptions): Promise<void> {
 			if (path.match(/^\/api\/sessions\/[^/]+\/comments$/) && req.method === "POST") {
 				return routes["POST /api/sessions/:id/comments"](req);
 			}
+			if (path.match(/^\/api\/sessions\/[^/]+\/ask-inline$/) && req.method === "POST") {
+				return routes["POST /api/sessions/:id/ask-inline"](req);
+			}
+			if (path.match(/^\/api\/sessions\/[^/]+\/outdated$/) && req.method === "GET") {
+				return routes["GET /api/sessions/:id/outdated"](req);
+			}
 			if (path.match(/^\/api\/sessions\/[^/]+\/chat\/undo$/) && req.method === "POST") {
 				return routes["POST /api/sessions/:id/chat/undo"](req);
 			}
@@ -132,6 +138,15 @@ export async function startWebServer(options: WebServerOptions): Promise<void> {
 			if (path === "/api/cartoon" && req.method === "POST") {
 				return routes["POST /api/cartoon"](req);
 			}
+			if (path.match(/^\/api\/sessions\/[^/]+\/slides$/) && req.method === "GET") {
+				return routes["GET /api/sessions/:id/slides"](req);
+			}
+			if (path === "/api/slides" && req.method === "POST") {
+				return routes["POST /api/slides"](req);
+			}
+			if (path === "/api/slides/status" && req.method === "GET") {
+				return routes["GET /api/slides/status"](req);
+			}
 			if (path === "/api/review" && req.method === "POST") {
 				return routes["POST /api/review"](req);
 			}