newpr 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newpr",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "AI-powered large PR review tool - understand PRs with 1000+ lines of changes",
   "module": "src/cli/index.ts",
   "type": "module",

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)

package/src/cli/update-check.ts

@@ -1,5 +1,4 @@
 const PACKAGE_NAME = "newpr";
-const CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000;
 
 interface UpdateInfo {
 	current: string;
@@ -7,27 +6,32 @@ interface UpdateInfo {
 	needsUpdate: boolean;
 }
 
-async function getLastCheckTime(): Promise<number> {
+interface CachedCheck {
+	latest: string;
+	checkedAt: number;
+}
+
+async function readCache(): Promise<CachedCheck | null> {
 	try {
-		const file = Bun.file(`${process.env.HOME}/.newpr/last-update-check`);
-		const text = await file.text();
-		return Number.parseInt(text.trim(), 10) || 0;
+		const file = Bun.file(`${process.env.HOME}/.newpr/update-cache.json`);
+		if (!(await file.exists())) return null;
+		return JSON.parse(await file.text()) as CachedCheck;
 	} catch {
-		return 0;
+		return null;
 	}
 }
 
-async function setLastCheckTime(): Promise<void> {
+async function writeCache(latest: string): Promise<void> {
 	const dir = `${process.env.HOME}/.newpr`;
 	const { mkdirSync } = await import("node:fs");
 	try { mkdirSync(dir, { recursive: true }); } catch {}
-	await Bun.write(`${dir}/last-update-check`, String(Date.now()));
+	await Bun.write(`${dir}/update-cache.json`, JSON.stringify({ latest, checkedAt: Date.now() }));
 }
 
 async function fetchLatestVersion(): Promise<string | null> {
 	try {
 		const controller = new AbortController();
-		const timeout = setTimeout(() => controller.abort(), 3000);
+		const timeout = setTimeout(() => controller.abort(), 5000);
 		const res = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
 			signal: controller.signal,
 			headers: { Accept: "application/json" },
@@ -53,23 +57,20 @@ function compareVersions(current: string, latest: string): boolean {
 }
 
 export async function checkForUpdate(currentVersion: string): Promise<UpdateInfo | null> {
-	const lastCheck = await getLastCheckTime();
-	if (Date.now() - lastCheck < CHECK_INTERVAL_MS) return null;
-
 	const latest = await fetchLatestVersion();
-	await setLastCheckTime();
-
-	if (!latest) return null;
-	if (!compareVersions(currentVersion, latest)) return null;
+	if (latest) await writeCache(latest);
 
-	return { current: currentVersion, latest, needsUpdate: true };
+	const version = latest ?? (await readCache())?.latest;
+	if (!version) return null;
+	if (!compareVersions(currentVersion, version)) return null;
+	return { current: currentVersion, latest: version, needsUpdate: true };
 }
 
 export function printUpdateNotice(info: UpdateInfo): void {
 	const msg = [
 		"",
-		`  Update available: ${info.current} → \x1b[32m${info.latest}\x1b[0m`,
-		`  Run \x1b[36mbun add -g ${PACKAGE_NAME}\x1b[0m to update`,
+		`  \x1b[33m⚡\x1b[0m Update available: \x1b[2m${info.current}\x1b[0m → \x1b[32m${info.latest}\x1b[0m`,
+		`    Run \x1b[36mbun add -g ${PACKAGE_NAME}\x1b[0m to update`,
 		"",
 	].join("\n");
 	process.stderr.write(msg);

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/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/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);
+}

package/src/plugins/slides.ts

@@ -0,0 +1,39 @@
+import type { GeneratorPlugin, PluginContext, PluginProgressCallback, PluginResult } from "./types.ts";
+import type { SlideDeck } from "../types/output.ts";
+import { generateSlides } from "../llm/slides.ts";
+import { saveSlidesSidecar, loadSlidesSidecar } from "../history/store.ts";
+
+export const slidesPlugin: GeneratorPlugin = {
+	id: "slides",
+	name: "Slide Deck",
+	description: "Generate a presentation that explains this PR to your team.",
+	icon: "Presentation",
+	tabLabel: "Slides",
+
+	isAvailable: (ctx) => !!ctx.apiKey,
+
+	async generate(ctx: PluginContext, onProgress?: PluginProgressCallback, existingData?: unknown): Promise<PluginResult> {
+		const existing = existingData as SlideDeck | null | undefined;
+		const deck = await generateSlides(
+			ctx.apiKey,
+			ctx.data,
+			undefined,
+			ctx.language,
+			(msg, current, total) => onProgress?.({ message: msg, current, total }),
+			existing,
+			undefined,
+			(partialDeck) => {
+				saveSlidesSidecar(ctx.sessionId, partialDeck).catch(() => {});
+			},
+		);
+		return { type: "slides", data: deck };
+	},
+
+	async save(sessionId: string, data: unknown): Promise<void> {
+		await saveSlidesSidecar(sessionId, data as SlideDeck);
+	},
+
+	async load(sessionId: string): Promise<SlideDeck | null> {
+		return loadSlidesSidecar(sessionId);
+	},
+};

package/src/plugins/types.ts

@@ -0,0 +1,33 @@
+import type { NewprOutput } from "../types/output.ts";
+
+export interface PluginContext {
+	apiKey: string;
+	sessionId: string;
+	data: NewprOutput;
+	language: string;
+}
+
+export interface PluginProgressEvent {
+	message: string;
+	current: number;
+	total: number;
+}
+
+export type PluginProgressCallback = (event: PluginProgressEvent) => void;
+
+export interface PluginResult {
+	type: string;
+	data: unknown;
+}
+
+export interface GeneratorPlugin {
+	id: string;
+	name: string;
+	description: string;
+	icon: string;
+	tabLabel: string;
+	isAvailable: (ctx: PluginContext) => boolean;
+	generate: (ctx: PluginContext, onProgress?: PluginProgressCallback, existingData?: unknown) => Promise<PluginResult>;
+	save: (sessionId: string, data: unknown) => Promise<void>;
+	load: (sessionId: string) => Promise<unknown | null>;
+}

package/src/web/client/App.tsx

@@ -163,6 +163,7 @@ export function App() {
 			bgAnalyses={bgAnalyses.analyses}
 			onBgClick={handleBgClick}
 			onBgDismiss={bgAnalyses.dismiss}
+			onFeaturesChange={features.refresh}
 		>
 			{analysis.phase === "idle" && (
 				<InputScreen
@@ -188,6 +189,7 @@ export function App() {
 					sessionId={diffSessionId}
 					onTabChange={setActiveTab}
 					onReanalyze={(prUrl: string) => { analysis.start(prUrl); }}
+					enabledPlugins={features.enabledPlugins}
 				/>
 			)}
 			{analysis.phase === "error" && (

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

@@ -166,6 +166,7 @@ export function AppShell({
 	bgAnalyses,
 	onBgClick,
 	onBgDismiss,
+	onFeaturesChange,
 	children,
 }: {
 	theme: Theme;
@@ -181,6 +182,7 @@ export function AppShell({
 	bgAnalyses?: BackgroundAnalysis[];
 	onBgClick?: (sessionId: string) => void;
 	onBgDismiss?: (sessionId: string) => void;
+	onFeaturesChange?: () => void;
 	children: React.ReactNode;
 }) {
 	const [settingsOpen, setSettingsOpen] = useState(false);
@@ -382,7 +384,7 @@ export function AppShell({
 						onKeyDown={(e) => { if (e.key === "Escape") setSettingsOpen(false); }}
 					/>
 					<div className="relative z-10 w-full max-w-lg max-h-[85vh] overflow-y-auto rounded-xl border bg-background p-6 shadow-lg">
-						<SettingsPanel onClose={() => setSettingsOpen(false)} />
+						<SettingsPanel onClose={() => setSettingsOpen(false)} onFeaturesChange={onFeaturesChange} />
 					</div>
 				</div>
 			)}

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Plus, Pencil, Trash2, ArrowRight, X, Loader2, AlertCircle } from "lucide-react";
 import type { FileGroup, FileChange, FileStatus } from "../../../types/output.ts";
 import { DiffViewer } from "./DiffViewer.tsx";
@@ -43,7 +43,8 @@ export function resolveDetail(
 	files: FileChange[],
 ): DetailTarget | null {
 	if (kind === "group") {
-		const group = groups.find((g) => g.name === id);
+		const cleanId = id.replace(/\s*\([^)]*\)\s*$/, "").trim();
+		const group = groups.find((g) => g.name === id || g.name === cleanId || g.name.toLowerCase() === cleanId.toLowerCase());
 		if (!group) return null;
 		const groupFiles = files.filter((f) => group.files.includes(f.path));
 		return { kind: "group", group, files: groupFiles };
@@ -115,6 +116,7 @@ function FileDetail({
 }) {
 	const Icon = STATUS_ICON[file.status];
 	const { patch, loading, error, fetchPatch } = usePatchFetcher(sessionId, file.path);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		if (sessionId && !patch && !loading && !error) {
@@ -140,7 +142,7 @@ function FileDetail({
 				</div>
 			</div>
 
-			<div className="flex-1 overflow-y-auto">
+			<div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
 				{loading && (
 					<div className="flex items-center justify-center py-16 gap-2">
 						<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground/40" />
@@ -164,13 +166,13 @@ function FileDetail({
 				)}
 				{patch && (
 					<DiffViewer
-						key={`${file.path}-${scrollToLine ?? 0}-${scrollToLineEnd ?? 0}`}
 						patch={patch}
 						filePath={file.path}
 						sessionId={sessionId}
 						githubUrl={prUrl ? `${prUrl}/files` : undefined}
 						scrollToLine={scrollToLine}
 						scrollToLineEnd={scrollToLineEnd}
+						scrollContainerRef={scrollContainerRef}
 					/>
 				)}
 			</div>

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef, useCallback, type ReactNode } from "react";
 import { type Highlighter, type ThemedToken } from "shiki";
-import { MessageSquare, Trash2, ExternalLink, CornerDownLeft, Pencil, Check, X, Sparkles, Loader2 } from "lucide-react";
+import { Trash2, ExternalLink, CornerDownLeft, Pencil, Check, X, Sparkles, Loader2 } from "lucide-react";
 import { ensureHighlighter, getHighlighterSync, detectShikiLang, type ShikiLang } from "../lib/shiki.ts";
 import type { DiffComment } from "../../../types/output.ts";
 import { TipTapEditor } from "./TipTapEditor.tsx";
@@ -18,7 +18,8 @@ const RENDER_CAP = 2000;
 const TOTAL_CAP = 3000;
 
 function parseLines(patch: string): DiffLine[] {
-	const raw = patch.split("\n");
+	let raw = patch.split("\n");
+	while (raw.length > 0 && raw[raw.length - 1] === "") raw.pop();
 	const lines: DiffLine[] = [];
 	let oldNum = 0;
 	let newNum = 0;
@@ -61,6 +62,8 @@ function parseLines(patch: string): DiffLine[] {
 			oldNum++;
 		} else if (line.startsWith("\\")) {
 			lines.push({ type: "context", content: line, oldNum: null, newNum: null });
+		} else if (line === "" && (oldNum === 0 && newNum === 0)) {
+			continue;
 		} else {
 			const text = line.startsWith(" ") ? line.slice(1) : line;
 			if (oldNum > 0 || newNum > 0) {
@@ -107,27 +110,48 @@ function useTokenizedLines(
 	return useMemo(() => {
 		if (!hl || !lang) return null;
 
-		const codeIndices: number[] = [];
-		const codeLines: string[] = [];
+		const newIndices: number[] = [];
+		const newLines: string[] = [];
+		const oldIndices: number[] = [];
+		const oldLines: string[] = [];
+
 		for (let i = 0; i < lines.length; i++) {
 			const t = lines[i]!.type;
-			if (t === "added" || t === "removed" || t === "context") {
-				codeIndices.push(i);
-				codeLines.push(lines[i]!.content);
+			if (t === "added" || t === "context") {
+				newIndices.push(i);
+				newLines.push(lines[i]!.content);
+			}
+			if (t === "removed") {
+				oldIndices.push(i);
+				oldLines.push(lines[i]!.content);
+			}
+			if (t === "context") {
+				oldIndices.push(i);
+				oldLines.push(lines[i]!.content);
 			}
 		}
 
-		if (codeLines.length === 0) return null;
+		const map: TokenMap = new Map();
+		const theme = dark ? "github-dark" : "github-light";
 
 		try {
-			const theme = dark ? "github-dark" : "github-light";
-			const result = hl.codeToTokens(codeLines.join("\n"), { lang, theme });
-			const map: TokenMap = new Map();
-			for (let j = 0; j < codeIndices.length; j++) {
-				const tokens = result.tokens[j];
-				if (tokens) map.set(codeIndices[j]!, tokens);
+			if (newLines.length > 0) {
+				const result = hl.codeToTokens(newLines.join("\n"), { lang, theme });
+				for (let j = 0; j < newIndices.length; j++) {
+					const tokens = result.tokens[j];
+					if (tokens) map.set(newIndices[j]!, tokens);
+				}
 			}
-			return map;
+			if (oldLines.length > 0) {
+				const result = hl.codeToTokens(oldLines.join("\n"), { lang, theme });
+				for (let j = 0; j < oldIndices.length; j++) {
+					if (!map.has(oldIndices[j]!)) {
+						const tokens = result.tokens[j];
+						if (tokens) map.set(oldIndices[j]!, tokens);
+					}
+				}
+			}
+			return map.size > 0 ? map : null;
 		} catch {
 			return null;
 		}
@@ -579,6 +603,7 @@ export function DiffViewer({
 	githubUrl,
 	scrollToLine,
 	scrollToLineEnd,
+	scrollContainerRef,
 }: {
 	patch: string;
 	filePath: string;
@@ -586,6 +611,7 @@ export function DiffViewer({
 	githubUrl?: string;
 	scrollToLine?: number;
 	scrollToLineEnd?: number;
+	scrollContainerRef?: React.RefObject<HTMLElement | null>;
 }) {
 	const [showAll, setShowAll] = useState(false);
 	const hl = useHighlighter();
@@ -595,15 +621,18 @@ export function DiffViewer({
 	const tokenMap = useTokenizedLines(hl, allLines, lang, dark);
 	const isCapped = !showAll && allLines.length > TOTAL_CAP;
 	const lines = isCapped ? allLines.slice(0, RENDER_CAP) : allLines;
-	const fileName = filePath.split("/").pop() ?? filePath;
 
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [visibleWidth, setVisibleWidth] = useState(0);
 
 	const highlightedRef = useRef<HTMLElement[]>([]);
+	const scrollKeyRef = useRef(0);
 
 	useEffect(() => {
+		scrollKeyRef.current++;
+		const currentKey = scrollKeyRef.current;
+
 		for (const el of highlightedRef.current) {
 			el.style.boxShadow = "";
 		}
@@ -612,6 +641,7 @@ export function DiffViewer({
 		if (!scrollToLine || !containerRef.current) return;
 		const endLine = scrollToLineEnd ?? scrollToLine;
 		const timer = setTimeout(() => {
+			if (scrollKeyRef.current !== currentKey) return;
 			const container = containerRef.current;
 			if (!container) return;
 			let scrollTarget: HTMLElement | null = null;
@@ -624,11 +654,14 @@ export function DiffViewer({
 				}
 			}
 			if (scrollTarget) {
-				let scrollParent = scrollTarget.parentElement;
-				while (scrollParent) {
-					const style = getComputedStyle(scrollParent);
-					if (style.overflowY === "auto" || style.overflowY === "scroll") break;
-					scrollParent = scrollParent.parentElement;
+				let scrollParent: HTMLElement | null = scrollContainerRef?.current ?? null;
+				if (!scrollParent) {
+					scrollParent = scrollTarget.parentElement;
+					while (scrollParent) {
+						const style = getComputedStyle(scrollParent);
+						if (style.overflowY === "auto" || style.overflowY === "scroll") break;
+						scrollParent = scrollParent.parentElement;
+					}
 				}
 				if (scrollParent) {
 					const parentRect = scrollParent.getBoundingClientRect();
@@ -636,7 +669,7 @@ export function DiffViewer({
 					scrollParent.scrollTop += targetRect.top - parentRect.top - parentRect.height / 2;
 				}
 			}
-		}, 100);
+		}, 50);
 		return () => clearTimeout(timer);
 	}, [scrollToLine, scrollToLineEnd, patch]);
 	const [comments, setComments] = useState<DiffComment[]>([]);
@@ -774,21 +807,8 @@ export function DiffViewer({
 			.join("\n");
 	}, [formRange, lines]);
 
-	const commentCount = comments.length;
-
 	return (
-		<div ref={containerRef} className="rounded-lg border overflow-hidden">
-			<div className="sticky top-0 z-10 bg-muted px-3 py-1.5 border-b flex items-center gap-2">
-				<span className="text-xs font-mono font-medium truncate flex-1" title={filePath}>
-					{fileName}
-				</span>
-				{commentCount > 0 && (
-					<span className="flex items-center gap-1 text-[10px] text-muted-foreground shrink-0">
-						<MessageSquare className="h-3 w-3" />
-						{commentCount}
-					</span>
-				)}
-			</div>
+		<div ref={containerRef} className="overflow-hidden">
 			<div ref={scrollRef} className="overflow-x-auto">
 				<div className="min-w-max font-mono text-xs leading-5 select-text">
 					{lines.map((line, i) => {