newpr 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newpr",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "AI-powered large PR review tool - understand PRs with 1000+ lines of changes",
   "module": "src/cli/index.ts",
   "type": "module",
@@ -53,7 +53,7 @@
     "@types/react-dom": "^19.2.3"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/analyzer/pipeline.ts

@@ -5,6 +5,46 @@ import type { FileChange, FileGroup, NewprOutput, PrSummary } from "../types/out
 import type { ExplorationResult } from "../workspace/types.ts";
 import type { AgentToolName } from "../workspace/types.ts";
 import { parseDiff } from "../diff/parser.ts";
+
+function annotateDiffWithLineNumbers(rawDiff: string): string {
+	const lines = rawDiff.split("\n");
+	const result: string[] = [];
+	let oldNum = 0;
+	let newNum = 0;
+
+	for (const line of lines) {
+		const hunkMatch = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+		if (hunkMatch) {
+			oldNum = Number(hunkMatch[1]);
+			newNum = Number(hunkMatch[2]);
+			result.push(line);
+			continue;
+		}
+
+		if (line.startsWith("diff --git") || line.startsWith("index ") || line.startsWith("--- ") || line.startsWith("+++ ") || line.startsWith("\\")) {
+			result.push(line);
+			continue;
+		}
+
+		if (line.startsWith("+")) {
+			result.push(`L${newNum} + ${line.slice(1)}`);
+			newNum++;
+		} else if (line.startsWith("-")) {
+			result.push(`     - ${line.slice(1)}`);
+			oldNum++;
+		} else {
+			const text = line.startsWith(" ") ? line.slice(1) : line;
+			if (oldNum > 0 || newNum > 0) {
+				result.push(`L${newNum}   ${text}`);
+				oldNum++;
+				newNum++;
+			} else {
+				result.push(line);
+			}
+		}
+	}
+	return result.join("\n");
+}
 import { chunkDiff } from "../diff/chunker.ts";
 import { fetchPrData, fetchPrComments } from "../github/fetch-pr.ts";
 import { fetchPrDiff } from "../github/fetch-diff.ts";
@@ -257,7 +297,7 @@ export async function analyzePr(options: PipelineOptions): Promise<NewprOutput>
 	progress({ stage: "narrating", message: `Writing narrative${enrichedTag}...` });
 	const fileDiffs = chunks.slice(0, 30).map((c) => ({
 		path: c.file_path,
-		diff: c.diff_content.length > 3000 ? `${c.diff_content.slice(0, 3000)}\n... (truncated)` : c.diff_content,
+		diff: annotateDiffWithLineNumbers(c.diff_content.length > 3000 ? c.diff_content.slice(0, 3000) : c.diff_content),
 	}));
 	const narrativePrompt = exploration
 		? buildEnrichedNarrativePrompt(prData.title, summary, groups, exploration, promptCtx, fileDiffs)
@@ -298,6 +338,7 @@ export async function analyzePr(options: PipelineOptions): Promise<NewprOutput>
 			pr_body: prData.body || undefined,
 			pr_url: prData.url,
 			pr_state: prData.state,
+			pr_updated_at: prData.updated_at,
 			base_branch: prData.base_branch,
 			head_branch: prData.head_branch,
 			author: prData.author,

package/src/config/store.ts

@@ -13,6 +13,7 @@ export interface StoredConfig {
 	concurrency?: number;
 	language?: string;
 	agent?: string;
+	enabled_plugins?: string[];
 }
 
 function ensureDir(): void {

package/src/github/fetch-pr.ts

@@ -20,6 +20,7 @@ export function mapPrResponse(json: Record<string, unknown>): Omit<GithubPrData,
 		body: (json.body as string) ?? "",
 		url: json.html_url as string,
 		state,
+		updated_at: (json.updated_at as string) ?? new Date().toISOString(),
 		base_branch: (base?.ref as string) ?? "unknown",
 		head_branch: (head?.ref as string) ?? "unknown",
 		author: (user?.login as string) ?? "unknown",

package/src/history/store.ts

@@ -2,7 +2,7 @@ import { homedir } from "node:os";
 import { join } from "node:path";
 import { mkdirSync, rmSync, existsSync } from "node:fs";
 import { randomBytes } from "node:crypto";
-import type { NewprOutput, DiffComment, ChatMessage, CartoonImage } from "../types/output.ts";
+import type { NewprOutput, DiffComment, ChatMessage, CartoonImage, SlideDeck } from "../types/output.ts";
 import type { SessionRecord } from "./types.ts";
 
 const HISTORY_DIR = join(homedir(), ".newpr", "history");
@@ -197,6 +197,30 @@ export async function loadCartoonSidecar(
 	}
 }
 
+export async function saveSlidesSidecar(
+	id: string,
+	deck: SlideDeck,
+): Promise<void> {
+	ensureDirs();
+	await Bun.write(
+		join(SESSIONS_DIR, `${id}.slides.json`),
+		JSON.stringify(deck),
+	);
+}
+
+export async function loadSlidesSidecar(
+	id: string,
+): Promise<SlideDeck | null> {
+	try {
+		const filePath = join(SESSIONS_DIR, `${id}.slides.json`);
+		const file = Bun.file(filePath);
+		if (!(await file.exists())) return null;
+		return JSON.parse(await file.text()) as SlideDeck;
+	} catch {
+		return null;
+	}
+}
+
 export function getHistoryPath(): string {
 	return HISTORY_DIR;
 }

package/src/llm/prompts.ts

@@ -145,7 +145,12 @@ export function buildNarrativePrompt(
 		.join("\n\n");
 
 	const diffContext = fileDiffs && fileDiffs.length > 0
-		? `\n\n--- FILE DIFFS (use these line numbers for [[line:...]] anchors) ---\n${fileDiffs.map((f) => `File: ${f.path}\n${f.diff}`).join("\n\n---\n\n")}`
+		? `\n\n--- FILE DIFFS (LINE NUMBERS ARE PRE-COMPUTED — use them directly for [[line:...]] anchors) ---
+Each line is prefixed with its new-file line number:
+  "L42 + code"  = added line at L42
+  "     - code"  = removed line (no new line number)
+  "L42   code"  = unchanged context at L42
+Use the L-numbers EXACTLY as shown. Do NOT compute line numbers yourself.\n\n${fileDiffs.map((f) => `File: ${f.path}\n${f.diff}`).join("\n\n---\n\n")}`
 		: "";
 
 	const commitCtx = ctx?.commits ? formatCommitHistory(ctx.commits) : "";
@@ -178,6 +183,7 @@ There are THREE anchor types. You MUST use ALL of them.
 - Format: [[group:Exact Group Name]]
 - Renders as a clickable blue chip.
 - You MUST reference EVERY group from the Change Groups list at least once. No exceptions.
+- Use the EXACT group name ONLY — do NOT append the type in parentheses. Write [[group:Auth Flow]], NOT [[group:Auth Flow (refactor)]].
 - Use group anchors when introducing a topic area or explaining what a set of changes accomplishes together.
 - Example: "The [[group:Auth Flow]] group introduces session management."
 
@@ -196,24 +202,37 @@ There are THREE anchor types. You MUST use ALL of them.
 ### Usage Rules:
 - ALWAYS use [[line:path#Lstart-Lend]](text) with BOTH start and end lines. Single lines: [[line:path#L42-L42]](text).
 - The (text) must describe WHAT the code does, not WHERE it is. Bad: "lines 42-50". Good: "the new rate limiter middleware".
-- Wrap EVERY specific code mention in a line anchor. If you mention a function, class, type, constant, config change, or import — anchor it.
-- Interleave anchors naturally within sentences. They should feel like hyperlinks in a wiki article.
 - Do NOT pair [[file:...]] with [[line:...]] for the same file. The line anchor already opens the file.
 - Use the diff context provided to find accurate line numbers. If unsure of exact lines, use [[file:...]] instead.
 
-### Anchor Density — TWO levels:
-When describing a function or class, use anchors at TWO granularity levels:
+### ANCHOR DENSITY — THIS IS THE MOST IMPORTANT RULE
 
-**Level 1 — Declaration**: Anchor the function/class name itself to its full definition range.
-**Level 2 — Implementation details**: When explaining what the code does, anchor EACH distinct piece of logic to its specific lines within the function.
+Every sentence that describes code MUST contain at least one [[line:...]](...) anchor. A sentence without an anchor is a FAILURE.
 
-Example with two levels:
+Think of this like writing a Wikipedia article: almost every claim links to its source. In your narrative, the "source" is the specific line range in the diff.
+
+**What MUST be anchored:**
+- Every function, method, or class mentioned → anchor its declaration
+- Every implementation detail (what a function does) → anchor the specific lines
+- Every type, interface, or schema → anchor its definition
+- Every config change, constant, or environment variable → anchor it
+- Every import, export, or wiring between modules → anchor it
+- Every conditional logic, error handling, or edge case → anchor the specific branch
+- Every before/after comparison → anchor both the old and new code
+
+**Two-level anchoring for functions:**
+- Level 1: Anchor the function/class NAME to its full range (e.g., L15-L50)
+- Level 2: Inside the same paragraph, anchor EACH logical step to its sub-range (e.g., L18-L22, L24-L30, L32-L40)
+- A function description without Level 2 sub-anchors is TOO SPARSE
+
+**Target density: 3-6 line anchors per paragraph.** If a paragraph has fewer than 2 line anchors, you are not anchoring enough.
+
+Example (CORRECT density — 5 anchors in one paragraph):
 "[[line:src/auth/session.ts#L15-L50]](The validateToken function) handles the full JWT lifecycle. It [[line:src/auth/session.ts#L18-L22]](extracts the token from the Authorization header), [[line:src/auth/session.ts#L24-L30]](verifies the signature against the configured secret), and [[line:src/auth/session.ts#L32-L40]](checks the expiration timestamp). If validation fails, [[line:src/auth/session.ts#L42-L48]](it throws a typed AuthError with a specific error code)."
 
-Key principles:
-- The first anchor covers the entire function (L15-L50). Subsequent anchors zoom into specific parts within it.
-- Each sub-anchor should cover 2-10 lines — one logical step.
-- Descriptive text for sub-anchors should explain the step, not name the function again.
+Example (TOO SPARSE — only 1 anchor, rest is unlinked prose):
+"[[line:src/auth/session.ts#L15-L50]](The validateToken function) handles JWT parsing. It extracts the token, verifies the signature, and checks expiration. If validation fails, it throws an error."
+→ This is BAD because "extracts the token", "verifies the signature", "checks expiration", and "throws an error" should ALL be separate line anchors.
 
 ### Line Anchor Granularity:
 - Anchor individual functions, not entire files: [[line:auth.ts#L15-L30]](validateToken) not [[line:auth.ts#L1-L200]](auth module)
@@ -222,14 +241,15 @@ Key principles:
 - Anchor imports and exports that wire things together: [[line:index.ts#L3-L3]](re-exported from the barrel file)
 - For multi-part changes, anchor each part separately
 
-GOOD example (uses all 3 anchor types + two-level density):
+GOOD example (all 3 anchor types + high density):
 "The [[group:Auth Flow]] group introduces session management. [[line:src/auth/session.ts#L15-L50]](The new validateToken function) handles JWT parsing: [[line:src/auth/session.ts#L18-L22]](it extracts the token from the header), then [[line:src/auth/session.ts#L24-L35]](verifies the signature and checks expiration). [[line:src/auth/middleware.ts#L8-L20]](The auth middleware) invokes it on every request, [[line:src/auth/middleware.ts#L15-L18]](rejecting invalid tokens with a 401). Supporting configuration lives in [[file:src/auth/constants.ts]]."
 
 BAD examples:
-- No group anchors: "The auth changes introduce session management." (MUST use [[group:Auth Flow]])
-- No anchors in implementation details: "The validateToken function extracts the token, verifies the signature, and checks expiration." (MUST anchor each step separately)
-- One big anchor for everything: "[[line:session.ts#L15-L50]](The function extracts tokens, verifies signatures, and checks expiration)" (MUST split into sub-anchors)
-- Bare line anchor: "[[line:src/auth/session.ts#L15-L30]]" (MUST have (text) after it)
+- Unanchored prose: "The function extracts the token, verifies the signature, and checks expiration." → MUST anchor EACH action
+- No group anchors: "The auth changes introduce session management." → MUST use [[group:Auth Flow]]
+- One big anchor: "[[line:session.ts#L15-L50]](The function extracts tokens, verifies signatures, and checks expiration)" → MUST split into sub-anchors
+- Bare line anchor: "[[line:src/auth/session.ts#L15-L30]]" → MUST have (text) after it
+- Low density paragraph: A paragraph with only 1 line anchor and 4+ sentences of plain text → MUST add more anchors
 
 ${lang ? `CRITICAL: Write the ENTIRE narrative in ${lang}. Every sentence must be in ${lang}. Do NOT use English except for code identifiers, file paths, and anchor tokens.` : "If the PR title is in a non-English language, write the narrative in that same language."}`,
 		user: `PR Title: ${prTitle}\n\nSummary:\n- Purpose: ${summary.purpose}\n- Scope: ${summary.scope}\n- Impact: ${summary.impact}\n- Risk: ${summary.risk_level}\n\nChange Groups:\n${groupDetails}${commitCtx}${discussionCtx}${diffContext}`,

package/src/llm/slides.ts

@@ -0,0 +1,381 @@
+import type { NewprOutput, SlideImage, SlideDeck, SlidePlan, SlideSpec } from "../types/output.ts";
+
+function getSystemLanguage(): string {
+	const env = process.env.LANG ?? process.env.LANGUAGE ?? process.env.LC_ALL ?? "";
+	if (env.startsWith("ko")) return "Korean";
+	if (env.startsWith("ja")) return "Japanese";
+	if (env.startsWith("zh")) return "Chinese";
+	if (env.startsWith("es")) return "Spanish";
+	if (env.startsWith("fr")) return "French";
+	if (env.startsWith("de")) return "German";
+	return "English";
+}
+
+function buildPrContext(data: NewprOutput): string {
+	const groupDetails = data.groups.map((g) => `- ${g.name} (${g.type}): ${g.description}\n  Files: ${g.files.join(", ")}${g.key_changes ? `\n  Key changes: ${g.key_changes.join("; ")}` : ""}${g.risk ? `\n  Risk: ${g.risk}` : ""}`).join("\n");
+	const fileSummaries = data.files.slice(0, 30).map((f) => `- ${f.path} (${f.status}, +${f.additions}/-${f.deletions}): ${f.summary}`).join("\n");
+
+	return `PR: #${data.meta.pr_number} "${data.meta.pr_title}"
+Author: ${data.meta.author}
+Repo: ${data.meta.pr_url.split("/pull/")[0]?.split("github.com/")[1] ?? ""}
+Branches: ${data.meta.head_branch} → ${data.meta.base_branch}
+Stats: ${data.meta.total_files_changed} files, +${data.meta.total_additions} -${data.meta.total_deletions}
+Risk: ${data.summary.risk_level}
+State: ${data.meta.pr_state ?? "open"}
+
+Purpose: ${data.summary.purpose}
+Scope: ${data.summary.scope}
+Impact: ${data.summary.impact}
+
+Change Groups:
+${groupDetails}
+
+File Summaries:
+${fileSummaries}
+
+Narrative:
+${data.narrative.slice(0, 3000)}`;
+}
+
+function buildStylePrompt(data: NewprOutput): { system: string; user: string } {
+	return {
+		system: `You are a world-class presentation designer specializing in technical presentations for software engineering teams.
+
+Your task is to design a comprehensive visual style system for a slide deck about a Pull Request. This style will be used as a prompt for an image generation model (Gemini) to render each slide, so you must be EXTREMELY specific and detailed.
+
+Output a single string — the style prompt. It must cover ALL of the following in exhaustive detail:
+
+## Color System
+- Exact hex codes for: primary background, secondary background, text primary, text secondary, accent color, code block background, code text, highlight/emphasis, success (green), warning (yellow), danger (red)
+- Gradient specifications if any (direction, stops)
+- How colors interact (contrast ratios, when to use each)
+
+## Typography
+- Primary font family (suggest a specific well-known font)
+- Title: exact size in px, weight, letter-spacing, color
+- Subtitle: exact size, weight, color
+- Body text: exact size, line-height, color
+- Code/monospace: font family, size, color, background
+- Captions/labels: size, weight, color, text-transform
+- Bullet points: style, indentation, spacing between items
+
+## Layout Grid
+- Slide dimensions: 1920x1080 (16:9)
+- Margins: top, bottom, left, right in px
+- Title position: x, y coordinates and alignment
+- Content area: bounds in px
+- Column layouts: when to use 1-col, 2-col, 3-col, and exact widths
+- Spacing between elements in px
+
+## Visual Elements
+- Code blocks: border-radius, padding, syntax highlighting theme, line numbers yes/no
+- Diagrams/flowcharts: node style, arrow style, colors
+- Icons: style (outline/filled), size, color
+- Dividers/separators: style, color, thickness
+- Cards/boxes: background, border, border-radius, shadow, padding
+- Badges/tags: shape, colors for different types (feature, bugfix, refactor, etc.)
+
+## Slide-Type Templates
+- Title slide: layout, where logo/branding goes, title size, subtitle placement
+- Content slide: title bar height, content area layout
+- Code slide: how to display code with explanations
+- Comparison slide: before/after or side-by-side layout
+- Summary slide: key points layout, call-to-action area
+
+## Mood & Aesthetic
+- Overall feel (e.g., "modern dark engineering dashboard", "clean Apple keynote", "Linear-inspired minimal")
+- What to AVOID (e.g., no clip art, no heavy shadows, no busy backgrounds)
+- Professional tone appropriate for engineering team review
+
+The style prompt should be a single continuous text paragraph (not JSON, not markdown) that an image generation AI can follow. Be specific enough that any slide generated with this style will look like it belongs to the same deck.
+
+Respond with ONLY the style prompt string. No JSON wrapping, no explanation.`,
+		user: buildPrContext(data),
+	};
+}
+
+function buildSlidesPrompt(data: NewprOutput, stylePrompt: string, language?: string): { system: string; user: string } {
+	const lang = language ?? getSystemLanguage();
+	return {
+		system: `You are a presentation content planner. You will receive a PR analysis and a visual style description. Your job is to plan the CONTENT of each slide.
+
+Output a JSON object with:
+- "slides": An array of slide specifications. Each slide has:
+  - "index": slide number (0-based)
+  - "title": slide title text (in ${lang})
+  - "contentPrompt": A VERY detailed description of what should be on this slide — exact text content, layout within the slide, visual elements, code snippets if any. All visible text must be in ${lang}. Be extremely specific about positioning, what goes where, and what text to show.
+
+Decide the number of slides based on the PR complexity:
+- Small PR (1-3 groups, <10 files): 4-6 slides
+- Medium PR (3-6 groups, 10-30 files): 6-10 slides
+- Large PR (6+ groups, 30+ files): 8-14 slides
+
+Typical slide structure:
+- Slide 0: Title slide with PR name, author, repo, key stats
+- Slide 1: Overview/motivation — why this PR exists
+- Middle slides: One or more slides per major change group, showing key changes with specific code examples
+- Near-end: Architecture/dependency impact if relevant
+- Final slide: Summary with risk assessment and review notes
+
+Each contentPrompt should be detailed enough that an image generation model can render the slide given the style guide. Include exact text, numbers, file paths, and code snippets to display.
+
+Respond ONLY with the JSON object. No markdown, no explanation.`,
+		user: `Visual Style:\n${stylePrompt}\n\n${buildPrContext(data)}`,
+	};
+}
+
+function buildImagePrompt(stylePrompt: string, slide: SlideSpec): string {
+	return `Generate a presentation slide image. 16:9 aspect ratio (1920x1080 pixels).
+
+VISUAL STYLE (apply consistently):
+${stylePrompt}
+
+THIS SLIDE (slide ${slide.index + 1}):
+Title: "${slide.title}"
+
+CONTENT AND LAYOUT:
+${slide.contentPrompt}
+
+CRITICAL REQUIREMENTS:
+- This is a real presentation slide, not an illustration or diagram
+- All text must be clearly readable
+- Use proper text hierarchy (title, subtitle, body, captions)
+- Maintain consistent margins and alignment
+- The slide should look professional and polished
+- Render all text exactly as specified — do not paraphrase or translate`;
+}
+
+async function callOpenRouter(apiKey: string, model: string, system: string, user: string, maxTokens: number, timeoutMs: number): Promise<string> {
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), timeoutMs);
+	try {
+		const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+			method: "POST",
+			signal: controller.signal,
+			headers: {
+				Authorization: `Bearer ${apiKey}`,
+				"Content-Type": "application/json",
+				"HTTP-Referer": "https://github.com/jiwonMe/newpr",
+				"X-Title": "newpr",
+			},
+			body: JSON.stringify({
+				model,
+				messages: [
+					{ role: "system", content: system },
+					{ role: "user", content: user },
+				],
+				temperature: 0.4,
+				max_tokens: maxTokens,
+			}),
+		});
+		if (!res.ok) {
+			const body = await res.text().catch(() => "");
+			throw new Error(`OpenRouter API ${res.status}: ${body.slice(0, 200)}`);
+		}
+		const json = await res.json() as { choices: Array<{ message: { content: string } }> };
+		return json.choices[0]?.message?.content ?? "";
+	} catch (err) {
+		if ((err as Error).name === "AbortError") throw new Error(`Request timed out after ${timeoutMs / 1000}s`);
+		throw err;
+	} finally {
+		clearTimeout(timer);
+	}
+}
+
+async function renderSlides(
+	apiKey: string,
+	plan: SlidePlan,
+	specsToRender: SlideSpec[],
+	onProgress?: (msg: string, current: number, total: number) => void,
+	onSlideComplete?: (completed: SlideImage[]) => void,
+): Promise<{ completed: SlideImage[]; failed: number[] }> {
+	const totalPlan = plan.slides.length;
+	const completed: SlideImage[] = [];
+	const failed: number[] = [];
+
+	const conversationHistory: Array<{ role: string; content: string }> = [
+		{
+			role: "user",
+			content: `You are generating a series of ${totalPlan} presentation slides. All slides MUST follow this exact visual style consistently:\n\n${plan.stylePrompt}\n\nI will now ask you to generate each slide one by one. Maintain EXACTLY the same visual style, colors, fonts, and layout principles across every slide. Respond with the slide image for each request.`,
+		},
+	];
+
+	for (const spec of specsToRender) {
+		onProgress?.(`Rendering slide ${spec.index + 1}/${totalPlan}: "${spec.title}"`, completed.length, specsToRender.length);
+
+		const slidePrompt = `Generate slide ${spec.index + 1} of ${totalPlan}. 16:9 aspect ratio (1920x1080).
+
+Title: "${spec.title}"
+
+CONTENT AND LAYOUT:
+${spec.contentPrompt}
+
+IMPORTANT: Use the EXACT SAME visual style as all previous slides. Same colors, fonts, spacing, background.`;
+
+		conversationHistory.push({ role: "user", content: slidePrompt });
+
+		try {
+			const controller = new AbortController();
+			const timeout = setTimeout(() => controller.abort(), 120_000);
+
+			try {
+				const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+					method: "POST",
+					signal: controller.signal,
+					headers: {
+						Authorization: `Bearer ${apiKey}`,
+						"Content-Type": "application/json",
+						"HTTP-Referer": "https://github.com/jiwonMe/newpr",
+						"X-Title": "newpr",
+					},
+					body: JSON.stringify({
+						model: "google/gemini-3-pro-image-preview",
+						messages: conversationHistory,
+						modalities: ["image", "text"],
+					}),
+				});
+
+				if (!res.ok) {
+					const body = await res.text();
+					throw new Error(`Gemini API ${res.status}: ${body.slice(0, 200)}`);
+				}
+
+				const json = await res.json() as {
+					choices?: Array<{
+						message?: {
+							content?: string | Array<{ type?: string; image_url?: { url?: string }; text?: string }>;
+							images?: Array<{ image_url?: { url?: string } }>;
+						};
+					}>;
+				};
+
+				const msg = json.choices?.[0]?.message;
+				let imageData: { base64: string; mimeType: string } | null = null;
+
+				if (msg?.images) {
+					for (const img of msg.images) {
+						if (img.image_url?.url) {
+							const match = img.image_url.url.match(/data:([^;]+);base64,(.+)/s);
+							if (match) { imageData = { mimeType: match[1]!, base64: match[2]! }; break; }
+						}
+					}
+				}
+
+				if (!imageData) {
+					const content = msg?.content;
+					if (typeof content === "string") {
+						const match = content.match(/data:([^;]+);base64,(.+)/s);
+						if (match) imageData = { mimeType: match[1]!, base64: match[2]! };
+					}
+					if (!imageData && Array.isArray(content)) {
+						for (const part of content) {
+							if (part.type === "image_url" && part.image_url?.url) {
+								const match = part.image_url.url.match(/data:([^;]+);base64,(.+)/s);
+								if (match) { imageData = { mimeType: match[1]!, base64: match[2]! }; break; }
+							}
+						}
+					}
+				}
+
+				if (!imageData) throw new Error(`No image in response for slide ${spec.index + 1}`);
+
+				conversationHistory.push({ role: "assistant", content: `[Slide ${spec.index + 1} image generated successfully]` });
+
+				completed.push({
+					index: spec.index,
+					imageBase64: imageData.base64,
+					mimeType: imageData.mimeType,
+					title: spec.title,
+				});
+				onProgress?.(`Slide ${spec.index + 1}/${totalPlan} done (${completed.length}/${specsToRender.length})`, completed.length, specsToRender.length);
+				onSlideComplete?.([...completed]);
+			} finally {
+				clearTimeout(timeout);
+			}
+		} catch (err) {
+			failed.push(spec.index);
+			conversationHistory.push({ role: "assistant", content: `[Slide ${spec.index + 1} failed]` });
+			onProgress?.(`Slide ${spec.index + 1}/${totalPlan} failed: ${err instanceof Error ? err.message : String(err)}`, completed.length + failed.length, specsToRender.length);
+		}
+	}
+
+	return { completed, failed };
+}
+
+export async function generateSlides(
+	apiKey: string,
+	data: NewprOutput,
+	_planModel?: string,
+	language?: string,
+	onProgress?: (msg: string, current: number, total: number) => void,
+	existingDeck?: SlideDeck | null,
+	onPlan?: (plan: SlidePlan, imagePrompts: Array<{ index: number; prompt: string }>) => void,
+	onSlideComplete?: (partialDeck: SlideDeck) => void,
+): Promise<SlideDeck> {
+	let plan: SlidePlan;
+
+	if (existingDeck?.plan && existingDeck.plan.slides.length > 0) {
+		plan = existingDeck.plan;
+		onProgress?.(`Resuming with existing plan (${plan.slides.length} slides)...`, 0, plan.slides.length);
+	} else {
+		const OPUS_MODEL = "anthropic/claude-opus-4.6";
+
+		onProgress?.("Step 1/2: Designing visual style (Opus)...", 0, 1);
+		const styleP = buildStylePrompt(data);
+		const styleContent = await callOpenRouter(apiKey, OPUS_MODEL, styleP.system, styleP.user, 4096, 120_000);
+		const stylePrompt = styleContent.trim();
+		onProgress?.(`Style designed (${stylePrompt.length} chars)`, 0, 1);
+
+		onProgress?.("Step 2/2: Planning slide content (Opus)...", 0, 1);
+		const slidesP = buildSlidesPrompt(data, stylePrompt, language);
+		const slidesContent = await callOpenRouter(apiKey, OPUS_MODEL, slidesP.system, slidesP.user, 8192, 120_000);
+
+		let rawContent = slidesContent.replace(/```json\s*/g, "").replace(/```\s*/g, "").trim();
+		const jsonStart = rawContent.indexOf("{");
+		const jsonEnd = rawContent.lastIndexOf("}");
+		if (jsonStart >= 0 && jsonEnd > jsonStart) {
+			rawContent = rawContent.slice(jsonStart, jsonEnd + 1);
+		}
+		const parsed = JSON.parse(rawContent) as { slides: SlideSpec[] };
+		if (!parsed.slides || parsed.slides.length === 0) throw new Error("Empty slide plan");
+
+		plan = { stylePrompt, slides: parsed.slides };
+		onProgress?.(`Plan ready: ${plan.slides.length} slides`, 0, plan.slides.length);
+	}
+
+	const imagePrompts = plan.slides.map((spec) => ({
+		index: spec.index,
+		prompt: buildImagePrompt(plan.stylePrompt, spec),
+	}));
+	onPlan?.(plan, imagePrompts);
+
+	const existingSlides = existingDeck?.slides ?? [];
+	const existingIndices = new Set(existingSlides.map((s) => s.index));
+	const specsToRender = existingDeck?.failedIndices && existingDeck.failedIndices.length > 0
+		? plan.slides.filter((s) => existingDeck.failedIndices!.includes(s.index))
+		: plan.slides.filter((s) => !existingIndices.has(s.index));
+
+	if (specsToRender.length === 0 && existingSlides.length > 0) {
+		onProgress?.("All slides already generated", existingSlides.length, existingSlides.length);
+		return { slides: existingSlides.sort((a, b) => a.index - b.index), plan, generatedAt: existingDeck?.generatedAt ?? new Date().toISOString() };
+	}
+
+	onProgress?.(`Generating ${specsToRender.length} slide${specsToRender.length > 1 ? "s" : ""}...`, 0, specsToRender.length);
+	const { completed, failed } = await renderSlides(apiKey, plan, specsToRender, onProgress, (partialCompleted) => {
+		const allSlides = [...existingSlides.filter((s) => !partialCompleted.some((c) => c.index === s.index)), ...partialCompleted].sort((a, b) => a.index - b.index);
+		const remaining = specsToRender.filter((s) => !partialCompleted.some((c) => c.index === s.index)).map((s) => s.index);
+		onSlideComplete?.({ slides: allSlides, plan, failedIndices: remaining.length > 0 ? remaining : undefined, generatedAt: new Date().toISOString() });
+	});
+
+	const allSlides = [...existingSlides.filter((s) => !completed.some((c) => c.index === s.index)), ...completed]
+		.sort((a, b) => a.index - b.index);
+
+	if (allSlides.length === 0) throw new Error("All slide generations failed");
+
+	return {
+		slides: allSlides,
+		plan,
+		failedIndices: failed.length > 0 ? failed : undefined,
+		generatedAt: new Date().toISOString(),
+	};
+}

package/src/plugins/cartoon.ts

@@ -0,0 +1,34 @@
+import type { GeneratorPlugin, PluginContext, PluginProgressCallback, PluginResult } from "./types.ts";
+import type { CartoonImage } from "../types/output.ts";
+import { generateCartoon } from "../llm/cartoon.ts";
+import { saveCartoonSidecar, loadCartoonSidecar } from "../history/store.ts";
+
+export const cartoonPlugin: GeneratorPlugin = {
+	id: "cartoon",
+	name: "Comic Strip",
+	description: "Generate a 4-panel comic strip that visualizes the key changes in this PR.",
+	icon: "Sparkles",
+	tabLabel: "Comic",
+
+	isAvailable: (ctx) => !!ctx.apiKey,
+
+	async generate(ctx: PluginContext, onProgress?: PluginProgressCallback): Promise<PluginResult> {
+		onProgress?.({ message: "Generating comic strip...", current: 0, total: 1 });
+		const result = await generateCartoon(ctx.apiKey, ctx.data, ctx.language);
+		const cartoon: CartoonImage = {
+			imageBase64: result.imageBase64,
+			mimeType: result.mimeType,
+			generatedAt: new Date().toISOString(),
+		};
+		onProgress?.({ message: "Comic strip done", current: 1, total: 1 });
+		return { type: "cartoon", data: cartoon };
+	},
+
+	async save(sessionId: string, data: unknown): Promise<void> {
+		await saveCartoonSidecar(sessionId, data as CartoonImage);
+	},
+
+	async load(sessionId: string): Promise<CartoonImage | null> {
+		return loadCartoonSidecar(sessionId);
+	},
+};

package/src/plugins/registry.ts

@@ -0,0 +1,20 @@
+import type { GeneratorPlugin } from "./types.ts";
+import { cartoonPlugin } from "./cartoon.ts";
+import { slidesPlugin } from "./slides.ts";
+
+const plugins: GeneratorPlugin[] = [
+	slidesPlugin,
+	cartoonPlugin,
+];
+
+export function getPlugin(id: string): GeneratorPlugin | undefined {
+	return plugins.find((p) => p.id === id);
+}
+
+export function getAllPlugins(): GeneratorPlugin[] {
+	return plugins;
+}
+
+export function getPluginIds(): string[] {
+	return plugins.map((p) => p.id);
+}