newpr 0.1.3 → 0.3.0

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

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { X, Check, Loader2, Key, Bot, Globe, Settings2 } from "lucide-react";
-import { Button } from "../../components/ui/button.tsx";
+import { X, Check, Loader2 } from "lucide-react";
 
 interface ConfigData {
 	model: string;
@@ -30,7 +29,7 @@ const MODELS = [
 
 const AGENTS = [
 	{ value: "", label: "Auto" },
-	{ value: "claude", label: "Claude Code" },
+	{ value: "claude", label: "Claude" },
 	{ value: "opencode", label: "OpenCode" },
 	{ value: "codex", label: "Codex" },
 ];
@@ -76,109 +75,114 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 	if (!config) {
 		return (
 			<div className="flex items-center justify-center py-20">
-				<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+				<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground/40" />
 			</div>
 		);
 	}
 
 	return (
-		<div className="flex flex-col gap-0">
-			<div className="flex items-center justify-between pb-6">
-				<h2 className="text-lg font-semibold tracking-tight">Settings</h2>
+		<div>
+			<div className="flex items-center justify-between mb-6">
+				<h2 className="text-xs font-semibold">Settings</h2>
 				<div className="flex items-center gap-2">
-					{saving && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
-					{saved && <Check className="h-3.5 w-3.5 text-green-500" />}
+					{saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground/40" />}
+					{saved && <Check className="h-3 w-3 text-green-500" />}
 					<button
 						type="button"
 						onClick={onClose}
-						className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+						className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-accent/40 transition-colors"
 					>
-						<X className="h-4 w-4" />
+						<X className="h-3.5 w-3.5" />
 					</button>
 				</div>
 			</div>
 
-			<div className="space-y-8">
-				<Section icon={Key} title="Authentication">
+			<div className="space-y-6">
+				<Section title="Authentication">
 					<Row label="OpenRouter API Key">
 						{showApiKeyField ? (
-							<div className="flex gap-2">
+							<div className="flex gap-1.5">
 								<input
 									type="password"
 									value={apiKeyInput}
 									onChange={(e) => setApiKeyInput(e.target.value)}
 									placeholder="sk-or-..."
-									className="flex-1 h-8 rounded-md border bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+									className="flex-1 h-7 rounded-md border bg-background px-2.5 text-[11px] font-mono placeholder:text-muted-foreground/40 focus:outline-none focus:border-foreground/20"
 									autoFocus
+									onKeyDown={(e) => {
+										if (e.key === "Enter" && apiKeyInput.trim()) {
+											save({ openrouter_api_key: apiKeyInput.trim() });
+											setApiKeyInput("");
+											setShowApiKeyField(false);
+										}
+										if (e.key === "Escape") {
+											setShowApiKeyField(false);
+											setApiKeyInput("");
+										}
+									}}
 								/>
-								<Button
-									size="sm"
+								<button
+									type="button"
 									disabled={!apiKeyInput.trim()}
 									onClick={() => {
 										save({ openrouter_api_key: apiKeyInput.trim() });
 										setApiKeyInput("");
 										setShowApiKeyField(false);
 									}}
+									className="h-7 px-2.5 rounded-md bg-foreground text-background text-[11px] font-medium disabled:opacity-20 hover:opacity-80 transition-opacity"
 								>
 									Save
-								</Button>
-								<Button
-									variant="ghost"
-									size="sm"
-									onClick={() => { setShowApiKeyField(false); setApiKeyInput(""); }}
-								>
-									Cancel
-								</Button>
+								</button>
 							</div>
 						) : (
-							<div className="flex items-center gap-3">
-								<StatusDot ok={config.has_api_key} />
-								<span className="text-sm text-muted-foreground">
+							<div className="flex items-center gap-2">
+								<span className={`h-1.5 w-1.5 rounded-full ${config.has_api_key ? "bg-green-500" : "bg-red-500"}`} />
+								<span className="text-[11px] text-muted-foreground/50">
 									{config.has_api_key ? "Configured" : "Not set"}
 								</span>
 								<button
 									type="button"
 									onClick={() => setShowApiKeyField(true)}
-									className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
+									className="text-[11px] text-muted-foreground/40 hover:text-foreground transition-colors"
 								>
-									{config.has_api_key ? "Change" : "Set key"}
+									{config.has_api_key ? "Change" : "Set"}
 								</button>
 							</div>
 						)}
 					</Row>
 					<Row label="GitHub Token">
-						<div className="flex items-center gap-3">
-							<StatusDot ok={config.has_github_token} />
-							<span className="text-sm text-muted-foreground">
-								{config.has_github_token ? "Detected from gh CLI" : "Not detected"}
+						<div className="flex items-center gap-2">
+							<span className={`h-1.5 w-1.5 rounded-full ${config.has_github_token ? "bg-green-500" : "bg-red-500"}`} />
+							<span className="text-[11px] text-muted-foreground/50">
+								{config.has_github_token ? "gh CLI" : "Not detected"}
 							</span>
 						</div>
 					</Row>
 				</Section>
 
-				<Section icon={Bot} title="Model & Agent">
-					<Row label="Model">
+				<Section title="Model">
+					<Row label="LLM">
 						<select
 							value={config.model}
 							onChange={(e) => save({ model: e.target.value })}
-							className="h-8 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
+							className="h-7 rounded-md border bg-background px-2 text-[11px] font-mono focus:outline-none focus:border-foreground/20 cursor-pointer"
 						>
 							{MODELS.map((m) => (
 								<option key={m} value={m}>{m.split("/").pop()}</option>
 							))}
 						</select>
 					</Row>
-					<Row label="Exploration Agent">
-						<div className="flex gap-1.5">
+					<Row label="Agent">
+						<div className="flex gap-px rounded-md border p-0.5">
 							{AGENTS.map((a) => (
 								<button
 									key={a.value}
 									type="button"
 									onClick={() => save({ agent: a.value })}
-									className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
+									className={`px-2.5 py-1 rounded text-[11px] transition-colors ${
 										(config.agent ?? "") === a.value
-											? "bg-primary text-primary-foreground"
-											: "bg-muted text-muted-foreground hover:text-foreground"
+											? "bg-accent text-foreground font-medium"
+											: "text-muted-foreground/50 hover:text-foreground"
 									}`}
 								>
 									{a.label}
@@ -186,14 +190,11 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 							))}
 						</div>
 					</Row>
-				</Section>
-
-				<Section icon={Globe} title="Language">
-					<Row label="Output Language">
+					<Row label="Language">
 						<select
 							value={config.language}
 							onChange={(e) => save({ language: e.target.value })}
-							className="h-8 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
+							className="h-7 rounded-md border bg-background px-2 text-[11px] focus:outline-none focus:border-foreground/20 cursor-pointer"
 						>
 							{LANGUAGES.map((l) => (
 								<option key={l} value={l}>{l === "auto" ? "Auto-detect" : l}</option>
@@ -202,27 +203,18 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 					</Row>
 				</Section>
 
-				<Section icon={Settings2} title="Advanced">
+				<Section title="Limits">
 					<Row label="Max files">
-						<NumberInput
-							value={config.max_files}
-							defaultValue={config.defaults.max_files}
-							onChange={(v) => save({ max_files: v })}
-						/>
+						<NumberInput value={config.max_files} onChange={(v) => save({ max_files: v })} />
 					</Row>
-					<Row label="Timeout (sec)">
-						<NumberInput
-							value={config.timeout}
-							defaultValue={config.defaults.timeout}
-							onChange={(v) => save({ timeout: v })}
-						/>
+					<Row label="Timeout">
+						<div className="flex items-center gap-1.5">
+							<NumberInput value={config.timeout} onChange={(v) => save({ timeout: v })} />
+							<span className="text-[10px] text-muted-foreground/30">sec</span>
+						</div>
 					</Row>
 					<Row label="Concurrency">
-						<NumberInput
-							value={config.concurrency}
-							defaultValue={config.defaults.concurrency}
-							onChange={(v) => save({ concurrency: v })}
-						/>
+						<NumberInput value={config.concurrency} onChange={(v) => save({ concurrency: v })} />
 					</Row>
 				</Section>
 			</div>
@@ -230,22 +222,13 @@ export function SettingsPanel({ onClose }: { onClose: () => void }) {
 	);
 }
 
-function Section({
-	icon: Icon,
-	title,
-	children,
-}: {
-	icon: typeof Key;
-	title: string;
-	children: React.ReactNode;
-}) {
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
 	return (
 		<div>
-			<div className="flex items-center gap-2 mb-4">
-				<Icon className="h-4 w-4 text-muted-foreground" />
-				<h3 className="text-sm font-medium">{title}</h3>
+			<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-3">
+				{title}
 			</div>
-			<div className="space-y-4 pl-6">{children}</div>
+			<div className="space-y-3">{children}</div>
 		</div>
 	);
 }
@@ -253,24 +236,17 @@ function Section({
 function Row({ label, children }: { label: string; children: React.ReactNode }) {
 	return (
 		<div className="flex items-center justify-between gap-4">
-			<label className="text-sm text-muted-foreground shrink-0">{label}</label>
+			<label className="text-[11px] text-muted-foreground/60 shrink-0">{label}</label>
 			<div className="flex-1 flex justify-end">{children}</div>
 		</div>
 	);
 }
 
-function StatusDot({ ok }: { ok: boolean }) {
-	return (
-		<span className={`h-2 w-2 rounded-full ${ok ? "bg-green-500" : "bg-red-500"}`} />
-	);
-}
-
 function NumberInput({
 	value,
 	onChange,
 }: {
 	value: number;
-	defaultValue?: number;
 	onChange: (v: number) => void;
 }) {
 	const [local, setLocal] = useState(String(value));
@@ -293,7 +269,7 @@ function NumberInput({
 			onChange={(e) => setLocal(e.target.value)}
 			onBlur={handleBlur}
 			onKeyDown={(e) => { if (e.key === "Enter") handleBlur(); }}
-			className="w-20 h-8 rounded-md border bg-background px-3 text-sm text-right font-mono focus:outline-none focus:ring-1 focus:ring-ring"
+			className="w-16 h-7 rounded-md border bg-background px-2 text-[11px] text-right font-mono tabular-nums focus:outline-none focus:border-foreground/20"
 		/>
 	);
 }

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 };