newpr 0.4.0 → 0.5.1

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/types/github.ts

@@ -30,6 +30,7 @@ export interface GithubPrData {
 	body: string;
 	url: string;
 	state: PrState;
+	updated_at: string;
 	base_branch: string;
 	head_branch: string;
 	author: string;

package/src/types/output.ts

@@ -19,6 +19,7 @@ export interface PrMeta {
 	pr_body?: string;
 	pr_url: string;
 	pr_state?: PrStateLabel;
+	pr_updated_at?: string;
 	base_branch: string;
 	head_branch: string;
 	author: string;
@@ -106,6 +107,31 @@ export interface ChatMessage {
 	timestamp: string;
 }
 
+export interface SlideImage {
+	index: number;
+	imageBase64: string;
+	mimeType: string;
+	title: string;
+}
+
+export interface SlideSpec {
+	index: number;
+	title: string;
+	contentPrompt: string;
+}
+
+export interface SlidePlan {
+	stylePrompt: string;
+	slides: SlideSpec[];
+}
+
+export interface SlideDeck {
+	slides: SlideImage[];
+	plan?: SlidePlan;
+	failedIndices?: number[];
+	generatedAt: string;
+}
+
 export interface NewprOutput {
 	meta: PrMeta;
 	summary: PrSummary;

package/src/web/client/App.tsx

@@ -13,6 +13,7 @@ import { ErrorScreen } from "./components/ErrorScreen.tsx";
 import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
 import { useChatState, ChatProvider, ChatInput } from "./components/ChatSection.tsx";
 import type { AnchorItem } from "./components/TipTapEditor.tsx";
+import { requestNotificationPermission } from "./lib/notify.ts";
 
 function getUrlParam(key: string): string | null {
 	return new URLSearchParams(window.location.search).get(key);
@@ -38,6 +39,8 @@ export function App() {
 	const features = useFeatures();
 	const bgAnalyses = useBackgroundAnalyses();
 	const initialLoadDone = useRef(false);
+
+	useEffect(() => { requestNotificationPermission(); }, []);
 	const [activeId, setActiveId] = useState<string | null>(null);
 
 	useEffect(() => {
@@ -145,7 +148,7 @@ export function App() {
 	}, [analysis.result]);
 
 	return (
-		<ChatProvider state={chatState} anchorItems={anchorItems}>
+		<ChatProvider state={chatState} anchorItems={anchorItems} analyzedAt={analysis.result?.meta.analyzed_at}>
 		<AppShell
 			theme={themeCtx.theme}
 			onThemeChange={themeCtx.setTheme}
@@ -160,6 +163,7 @@ export function App() {
 			bgAnalyses={bgAnalyses.analyses}
 			onBgClick={handleBgClick}
 			onBgDismiss={bgAnalyses.dismiss}
+			onFeaturesChange={features.refresh}
 		>
 			{analysis.phase === "idle" && (
 				<InputScreen
@@ -184,6 +188,8 @@ export function App() {
 					cartoonEnabled={features.cartoon}
 					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/ChatSection.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } from "react";
+import React, { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } from "react";
 import { Loader2, ChevronRight, CornerDownLeft } from "lucide-react";
 import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/output.ts";
 import { Markdown } from "./Markdown.tsx";
@@ -17,14 +17,15 @@ export interface ChatState {
 interface ChatContextValue {
 	state: ChatState;
 	anchorItems?: AnchorItem[];
+	analyzedAt?: string;
 }
 
 const ChatContext = createContext<ChatContextValue | null>(null);
 
 export { useChatStore as useChatState };
 
-export function ChatProvider({ state, anchorItems, children }: { state: ChatState; anchorItems?: AnchorItem[]; children: React.ReactNode }) {
-	const value = useMemo(() => ({ state, anchorItems }), [state, anchorItems]);
+export function ChatProvider({ state, anchorItems, analyzedAt, children }: { state: ChatState; anchorItems?: AnchorItem[]; analyzedAt?: string; children: React.ReactNode }) {
+	const value = useMemo(() => ({ state, anchorItems, analyzedAt }), [state, anchorItems, analyzedAt]);
 	return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 }
 
@@ -71,6 +72,33 @@ function segmentsFromMessage(msg: ChatMessage): ChatSegment[] {
 	return segs;
 }
 
+function ThrottledMarkdown({ content, onAnchorClick, activeId }: {
+	content: string;
+	onAnchorClick?: (kind: "group" | "file" | "line", id: string) => void;
+	activeId?: string | null;
+}) {
+	const [rendered, setRendered] = useState(content);
+	const pendingRef = useRef(content);
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		pendingRef.current = content;
+		if (!timerRef.current) {
+			timerRef.current = setTimeout(() => {
+				setRendered(pendingRef.current);
+				timerRef.current = null;
+			}, 150);
+		}
+		return () => {};
+	}, [content]);
+
+	useEffect(() => {
+		return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+	}, []);
+
+	return <Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{rendered}</Markdown>;
+}
+
 function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick, activeId }: {
 	segments: ChatSegment[];
 	activeToolName?: string;
@@ -86,11 +114,16 @@ function AssistantMessage({ segments, activeToolName, isStreaming, onAnchorClick
 				if (seg.type === "tool_call") {
 					return <ToolCallDisplay key={seg.toolCall.id} tc={seg.toolCall} />;
 				}
-				return seg.content ? (
+				if (!seg.content) return null;
+				return (
 					<div key={`text-${i}`} className="text-xs leading-relaxed">
-						<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{seg.content}</Markdown>
+						{isStreaming ? (
+							<ThrottledMarkdown content={seg.content} onAnchorClick={onAnchorClick} activeId={activeId} />
+						) : (
+							<Markdown onAnchorClick={onAnchorClick} activeId={activeId}>{seg.content}</Markdown>
+						)}
 					</div>
-				) : null;
+				);
 			})}
 			{activeToolName && (
 				<div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-accent/40 text-[11px] text-muted-foreground/50">
@@ -149,6 +182,7 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 
 	if (!ctx) return null;
 	const { messages, streaming, loaded, loading } = ctx.state;
+	const { analyzedAt } = ctx;
 	const hasMessages = messages.length > 0 || loading;
 
 	if (!hasMessages && loaded) {
@@ -162,26 +196,51 @@ export function ChatMessages({ onAnchorClick, activeId }: {
 
 	if (!hasMessages) return null;
 
+	let shownOutdatedDivider = false;
+
 	return (
 		<div ref={containerRef} className="border-t mt-6 pt-5 space-y-5">
 			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider">Chat</div>
 			{messages.map((msg, i) => {
+				const isFromPreviousAnalysis = analyzedAt && msg.timestamp && msg.timestamp < analyzedAt;
+				let divider = null;
+				if (isFromPreviousAnalysis && !shownOutdatedDivider) {
+					shownOutdatedDivider = true;
+					divider = (
+						<div className="flex items-center gap-2 py-1">
+							<div className="flex-1 h-px bg-yellow-500/20" />
+							<span className="text-[10px] text-yellow-600/60 dark:text-yellow-400/50 shrink-0">Previous analysis</span>
+							<div className="flex-1 h-px bg-yellow-500/20" />
+						</div>
+					);
+				}
 				if (msg.role === "user") {
 					return (
-						<div key={`user-${i}`} className="flex justify-end">
-							<div className="max-w-[80%] rounded-xl rounded-br-sm bg-foreground text-background px-3.5 py-2 text-[11px] leading-relaxed">
-								{msg.content}
+						<div key={`user-${i}`}>
+							{divider}
+							<div className="flex justify-end">
+								<div className={`max-w-[80%] rounded-xl rounded-br-sm px-3.5 py-2 text-[11px] leading-relaxed ${
+									isFromPreviousAnalysis
+										? "bg-foreground/60 text-background"
+										: "bg-foreground text-background"
+								}`}>
+									{msg.content}
+								</div>
 							</div>
 						</div>
 					);
 				}
 				return (
-					<AssistantMessage
-						key={`assistant-${i}`}
-						segments={segmentsFromMessage(msg)}
-						onAnchorClick={onAnchorClick}
-						activeId={activeId}
-					/>
+					<div key={`assistant-${i}`}>
+						{divider}
+						<div className={isFromPreviousAnalysis ? "opacity-60" : ""}>
+							<AssistantMessage
+								segments={segmentsFromMessage(msg)}
+								onAnchorClick={onAnchorClick}
+								activeId={activeId}
+							/>
+						</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>