newpr 0.1.3 → 0.2.0

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

@@ -0,0 +1,405 @@
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
+import { useEditor, EditorContent, ReactRenderer } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Mention from "@tiptap/extension-mention";
+import { PluginKey } from "@tiptap/pm/state";
+import type { SuggestionProps, SuggestionKeyDownProps } from "@tiptap/suggestion";
+
+export interface AnchorItem {
+	kind: "group" | "file";
+	id: string;
+	label: string;
+}
+
+export interface CommandItem {
+	id: string;
+	label: string;
+	description: string;
+}
+
+interface SuggestionEntry {
+	id: string;
+	label: string;
+	badge?: string;
+	badgeClass?: string;
+	description?: string;
+	mono?: boolean;
+}
+
+interface TipTapEditorProps {
+	content?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	className?: string;
+	onSubmit?: () => void;
+	onChange?: (text: string) => void;
+	submitOnEnter?: boolean;
+	submitOnModEnter?: boolean;
+	onEscape?: () => void;
+	editorRef?: React.MutableRefObject<ReturnType<typeof useEditor> | null>;
+	anchorItems?: AnchorItem[];
+	commands?: CommandItem[];
+}
+
+function SuggestionList({
+	items,
+	command,
+	selectedIndex,
+	setSelectedIndex,
+}: {
+	items: SuggestionEntry[];
+	command: (item: SuggestionEntry) => void;
+	selectedIndex: number;
+	setSelectedIndex: (i: number) => void;
+}) {
+	const listRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const el = listRef.current?.children[selectedIndex] as HTMLElement | undefined;
+		el?.scrollIntoView({ block: "nearest" });
+	}, [selectedIndex]);
+
+	if (items.length === 0) return null;
+
+	return (
+		<div
+			ref={listRef}
+			className="z-50 min-w-[200px] max-w-[340px] max-h-[200px] overflow-y-auto rounded-lg border bg-background shadow-lg py-1"
+		>
+			{items.map((item, i) => (
+				<button
+					key={item.id}
+					type="button"
+					onClick={() => command(item)}
+					onMouseEnter={() => setSelectedIndex(i)}
+					className={`w-full flex items-center gap-2 px-3 py-1.5 text-left transition-colors ${
+						i === selectedIndex ? "bg-accent" : "hover:bg-accent/50"
+					}`}
+				>
+					{item.badge && (
+						<span className={`shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded ${item.badgeClass ?? "bg-muted text-muted-foreground"}`}>
+							{item.badge}
+						</span>
+					)}
+					<span className={`truncate text-xs ${item.mono ? "font-mono" : ""}`}>
+						{item.label}
+					</span>
+					{item.description && (
+						<span className="ml-auto shrink-0 text-[10px] text-muted-foreground/50">
+							{item.description}
+						</span>
+					)}
+				</button>
+			))}
+		</div>
+	);
+}
+
+interface SuggestionListRef {
+	onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+}
+
+const SuggestionListWrapper = forwardRef<SuggestionListRef, SuggestionProps<SuggestionEntry>>(
+	(props, ref) => {
+		const [selectedIndex, setSelectedIndex] = useState(0);
+
+		useEffect(() => {
+			setSelectedIndex(0);
+		}, [props.items]);
+
+		useImperativeHandle(ref, () => ({
+			onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+				if (event.key === "ArrowUp") {
+					setSelectedIndex((i) => (i + props.items.length - 1) % props.items.length);
+					return true;
+				}
+				if (event.key === "ArrowDown") {
+					setSelectedIndex((i) => (i + 1) % props.items.length);
+					return true;
+				}
+				if (event.key === "Enter") {
+					const item = props.items[selectedIndex];
+					if (item) props.command(item);
+					return true;
+				}
+				if (event.key === "Escape") {
+					return true;
+				}
+				return false;
+			},
+		}));
+
+		return (
+			<SuggestionList
+				items={props.items}
+				command={props.command}
+				selectedIndex={selectedIndex}
+				setSelectedIndex={setSelectedIndex}
+			/>
+		);
+	},
+);
+
+function createSuggestionRender(suggestionOpenRef: React.MutableRefObject<boolean>) {
+	return () => {
+		let renderer: ReactRenderer<SuggestionListRef> | null = null;
+		let popup: HTMLDivElement | null = null;
+
+		const positionPopup = (rect: DOMRect | null) => {
+			if (!rect || !popup) return;
+			const menuHeight = popup.offsetHeight || 200;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const fitsBelow = spaceBelow > menuHeight + 8;
+			popup.style.left = `${rect.left}px`;
+			if (fitsBelow) {
+				popup.style.top = `${rect.bottom + 4}px`;
+				popup.style.bottom = "";
+			} else {
+				popup.style.top = "";
+				popup.style.bottom = `${window.innerHeight - rect.top + 4}px`;
+			}
+		};
+
+		return {
+			onStart: (props: SuggestionProps<SuggestionEntry>) => {
+				suggestionOpenRef.current = true;
+				popup = document.createElement("div");
+				popup.style.position = "fixed";
+				popup.style.zIndex = "50";
+				document.body.appendChild(popup);
+
+				renderer = new ReactRenderer(SuggestionListWrapper, {
+					props,
+					editor: props.editor,
+				});
+				popup.appendChild(renderer.element);
+				positionPopup(props.clientRect?.() ?? null);
+			},
+			onUpdate: (props: SuggestionProps<SuggestionEntry>) => {
+				renderer?.updateProps(props);
+				positionPopup(props.clientRect?.() ?? null);
+			},
+			onKeyDown: (props: SuggestionKeyDownProps) => {
+				if (props.event.key === "Escape") {
+					popup?.remove();
+					renderer?.destroy();
+					popup = null;
+					renderer = null;
+					suggestionOpenRef.current = false;
+					return true;
+				}
+				return renderer?.ref?.onKeyDown(props) ?? false;
+			},
+			onExit: () => {
+				popup?.remove();
+				renderer?.destroy();
+				popup = null;
+				renderer = null;
+				suggestionOpenRef.current = false;
+			},
+		};
+	};
+}
+
+function getTextWithAnchors(editor: ReturnType<typeof useEditor>): string {
+	if (!editor) return "";
+	const doc = editor.state.doc;
+	const parts: string[] = [];
+
+	doc.descendants((node) => {
+		if (node.type.name === "anchorMention") {
+			const kind = node.attrs.kind ?? "file";
+			const id = node.attrs.id ?? node.attrs.label ?? "";
+			parts.push(`[[${kind}:${id}]]`);
+			return false;
+		}
+		if (node.type.name === "slashCommand") {
+			parts.push(`/${node.attrs.id ?? node.attrs.label ?? ""}`);
+			return false;
+		}
+		if (node.isText) {
+			parts.push(node.text ?? "");
+		}
+		if (node.type.name === "paragraph" && parts.length > 0) {
+			const last = parts[parts.length - 1];
+			if (last !== "\n") parts.push("\n");
+		}
+		return true;
+	});
+
+	return parts.join("").trim();
+}
+
+const AnchorMention = Mention.extend({ name: "anchorMention" });
+const SlashCommand = Mention.extend({ name: "slashCommand" });
+
+export function TipTapEditor({
+	content,
+	placeholder: placeholderText = "",
+	disabled = false,
+	autoFocus = false,
+	className = "",
+	onSubmit,
+	onChange,
+	submitOnEnter = false,
+	submitOnModEnter = false,
+	onEscape,
+	editorRef,
+	anchorItems,
+	commands,
+}: TipTapEditorProps) {
+	const callbacksRef = useRef({ onSubmit, onChange, onEscape });
+	callbacksRef.current = { onSubmit, onChange, onEscape };
+	const anchorItemsRef = useRef(anchorItems);
+	anchorItemsRef.current = anchorItems;
+	const commandsRef = useRef(commands);
+	commandsRef.current = commands;
+	const suggestionOpenRef = useRef(false);
+
+	const editor = useEditor({
+		extensions: [
+			StarterKit.configure({
+				heading: false,
+				horizontalRule: false,
+				blockquote: false,
+			}),
+			Placeholder.configure({ placeholder: placeholderText }),
+			...(anchorItems
+				? [
+						AnchorMention.configure({
+							HTMLAttributes: { class: "mention-anchor" },
+							suggestion: {
+								char: "@",
+								pluginKey: new PluginKey("anchorMention"),
+								allowSpaces: true,
+								items: ({ query }: { query: string }) => {
+									const all = (anchorItemsRef.current ?? []).map((a) => ({
+										id: a.id,
+										label: a.label,
+										badge: a.kind === "group" ? "group" : "file",
+										badgeClass: a.kind === "group"
+											? "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+											: "bg-muted text-muted-foreground",
+										mono: a.kind === "file",
+										kind: a.kind,
+									}));
+									if (!query) return all.slice(0, 12);
+									const q = query.toLowerCase();
+									return all.filter((item) => item.label.toLowerCase().includes(q)).slice(0, 12);
+								},
+								render: createSuggestionRender(suggestionOpenRef),
+								command: ({ editor: ed, range, props: attrs }) => {
+									const item = attrs as unknown as AnchorItem & SuggestionEntry;
+									ed.chain()
+										.focus()
+										.insertContentAt(range, [
+											{
+												type: "anchorMention",
+												attrs: { id: item.id, label: item.label, kind: item.kind ?? "file" },
+											},
+											{ type: "text", text: " " },
+										])
+										.run();
+								},
+							},
+						}).extend({
+							addAttributes() {
+								return {
+									...this.parent?.(),
+									kind: { default: "file" },
+								};
+							},
+						}),
+					]
+				: []),
+			...(commands && commands.length > 0
+				? [
+						SlashCommand.configure({
+							HTMLAttributes: { class: "mention-command" },
+							suggestion: {
+								char: "/",
+								pluginKey: new PluginKey("slashCommand"),
+								startOfLine: true,
+								items: ({ query }: { query: string }) => {
+									const all = (commandsRef.current ?? []).map((c) => ({
+										id: c.id,
+										label: `/${c.id}`,
+										description: c.description,
+									}));
+									if (!query) return all;
+									const q = query.toLowerCase();
+									return all.filter((item) => item.id.toLowerCase().includes(q));
+								},
+								render: createSuggestionRender(suggestionOpenRef),
+								command: ({ editor: ed, range, props: attrs }) => {
+									ed.chain()
+										.focus()
+										.deleteRange(range)
+										.insertContent(`/${attrs.id} `)
+										.run();
+								},
+							},
+						}),
+					]
+				: []),
+		],
+		editorProps: {
+			attributes: {
+				class: `outline-none min-h-[20px] ${className}`,
+			},
+			handleKeyDown: (_view, event) => {
+				if (suggestionOpenRef.current) return false;
+				if (event.key === "Escape" && callbacksRef.current.onEscape) {
+					event.preventDefault();
+					callbacksRef.current.onEscape();
+					return true;
+				}
+				if (submitOnEnter && event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+					event.preventDefault();
+					callbacksRef.current.onSubmit?.();
+					return true;
+				}
+				if (submitOnModEnter && event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+					event.preventDefault();
+					callbacksRef.current.onSubmit?.();
+					return true;
+				}
+				return false;
+			},
+		},
+		content: content ?? "",
+		editable: !disabled,
+		onUpdate: ({ editor: ed }) => {
+			callbacksRef.current.onChange?.(ed.getText());
+		},
+	});
+
+	useEffect(() => {
+		if (editorRef) editorRef.current = editor;
+	}, [editor, editorRef]);
+
+	useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(!disabled);
+	}, [editor, disabled]);
+
+	useEffect(() => {
+		if (!editor || content === undefined) return;
+		const current = editor.getText();
+		if (content !== current) {
+			editor.commands.setContent(content ? `<p>${content.replace(/\n/g, "<br>")}</p>` : "");
+		}
+	}, [editor, content]);
+
+	useEffect(() => {
+		if (autoFocus && editor) {
+			setTimeout(() => editor.commands.focus("end"), 0);
+		}
+	}, [autoFocus, editor]);
+
+	return <EditorContent editor={editor} />;
+}
+
+export { getTextWithAnchors };

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

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

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

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

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

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