newpr 0.1.0

package/src/tui/commands.ts

@@ -0,0 +1,75 @@
+import type { NewprConfig } from "../types/config.ts";
+import type { AgentToolName } from "../workspace/types.ts";
+import { writeStoredConfig } from "../config/store.ts";
+import { resolveLanguage } from "../config/index.ts";
+
+export interface SlashCmd {
+	name: string;
+	args?: string;
+	desc: string;
+}
+
+export const SLASH_CMDS: SlashCmd[] = [
+	{ name: "language", args: "<lang>", desc: "Set output language (auto, Korean, English, ...)" },
+	{ name: "agent", args: "<name>", desc: "Set exploration agent (auto, claude, opencode, codex)" },
+	{ name: "auth", args: "<key>", desc: "Set OpenRouter API key" },
+	{ name: "model", args: "<name>", desc: "Set LLM model" },
+];
+
+const VALID_AGENTS = new Set<string>(["claude", "opencode", "codex", "auto"]);
+
+export function filterCommands(input: string): SlashCmd[] {
+	const prefix = input.split(/\s/)[0]!.toLowerCase();
+	return SLASH_CMDS.filter((c) => `/${c.name}`.startsWith(prefix));
+}
+
+export interface CmdResult {
+	text: string;
+	ok: boolean;
+	configUpdate?: Partial<NewprConfig>;
+}
+
+export async function executeCommand(
+	input: string,
+	config: NewprConfig,
+): Promise<CmdResult> {
+	const parts = input.slice(1).split(/\s+/);
+	const cmd = parts[0]?.toLowerCase() ?? "";
+	const args = parts.slice(1).join(" ").trim();
+
+	switch (cmd) {
+		case "language":
+		case "lang": {
+			if (!args) return { text: `Language: ${config.language}`, ok: true };
+			const resolved = resolveLanguage(args);
+			await writeStoredConfig({ language: args });
+			return { text: `Language → ${resolved}`, ok: true, configUpdate: { language: resolved } };
+		}
+		case "agent": {
+			if (!args) return { text: `Agent: ${config.agent ?? "auto"}`, ok: true };
+			if (!VALID_AGENTS.has(args.toLowerCase())) {
+				return { text: `Unknown agent: ${args}. Use: auto, claude, opencode, codex`, ok: false };
+			}
+			const val = args.toLowerCase() === "auto" ? undefined : args.toLowerCase() as AgentToolName;
+			await writeStoredConfig({ agent: val });
+			return { text: `Agent → ${args.toLowerCase()}`, ok: true, configUpdate: { agent: val } };
+		}
+		case "auth": {
+			if (!args) {
+				const masked = config.openrouter_api_key
+					? `${config.openrouter_api_key.slice(0, 10)}${"*".repeat(8)}`
+					: "(not set)";
+				return { text: `API key: ${masked}`, ok: true };
+			}
+			await writeStoredConfig({ openrouter_api_key: args });
+			return { text: "API key updated", ok: true, configUpdate: { openrouter_api_key: args } };
+		}
+		case "model": {
+			if (!args) return { text: `Model: ${config.model}`, ok: true };
+			await writeStoredConfig({ model: args });
+			return { text: `Model → ${args}`, ok: true, configUpdate: { model: args } };
+		}
+		default:
+			return { text: `Unknown command: /${cmd}`, ok: false };
+	}
+}

package/src/tui/narrative-parser.ts

@@ -0,0 +1,143 @@
+import type { FileGroup, FileChange } from "../types/output.ts";
+
+export type AnchorKind = "group" | "file";
+
+export interface NarrativeAnchor {
+	kind: AnchorKind;
+	id: string;
+	lineIndex: number;
+	startCol: number;
+	endCol: number;
+}
+
+export interface NarrativeBlock {
+	lines: string[];
+	startLine: number;
+	anchors: NarrativeAnchor[];
+}
+
+export interface ParsedNarrative {
+	blocks: NarrativeBlock[];
+	allAnchors: NarrativeAnchor[];
+	displayLines: string[];
+}
+
+const ANCHOR_RE = /\[\[(group|file):(.+?)\]\]/g;
+
+export function parseNarrativeAnchors(narrative: string): ParsedNarrative {
+	const rawLines = narrative.split("\n");
+	const displayLines: string[] = [];
+	const allAnchors: NarrativeAnchor[] = [];
+
+	for (let i = 0; i < rawLines.length; i++) {
+		const raw = rawLines[i]!;
+		let display = "";
+		let lastIndex = 0;
+
+		ANCHOR_RE.lastIndex = 0;
+		let match: RegExpExecArray | null;
+
+		while ((match = ANCHOR_RE.exec(raw)) !== null) {
+			display += raw.slice(lastIndex, match.index);
+			const startCol = display.length;
+			const kind = match[1] as AnchorKind;
+			const id = match[2]!;
+			const label = kind === "file" ? id.split("/").pop()! : id;
+			display += label;
+
+			allAnchors.push({
+				kind,
+				id,
+				lineIndex: i,
+				startCol,
+				endCol: startCol + label.length,
+			});
+
+			lastIndex = match.index + match[0].length;
+		}
+
+		display += raw.slice(lastIndex);
+		displayLines.push(display);
+	}
+
+	const blocks = buildBlocks(displayLines, allAnchors);
+	return { blocks, allAnchors, displayLines };
+}
+
+function buildBlocks(lines: string[], anchors: NarrativeAnchor[]): NarrativeBlock[] {
+	const blocks: NarrativeBlock[] = [];
+	let current: NarrativeBlock | null = null;
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i]!;
+		const isEmpty = line.trim() === "";
+		const isHeading = /^#{1,3}\s/.test(line);
+
+		if ((isEmpty || isHeading) && current) {
+			blocks.push(current);
+			current = null;
+		}
+
+		if (isEmpty) continue;
+
+		if (!current) {
+			current = { lines: [], startLine: i, anchors: [] };
+		}
+
+		current.lines.push(line);
+		const lineAnchors = anchors.filter((a) => a.lineIndex === i);
+		current.anchors.push(...lineAnchors);
+	}
+
+	if (current) blocks.push(current);
+	return blocks;
+}
+
+export interface WalkthroughStep {
+	type: "narrative";
+	blockIndex: number;
+	block: NarrativeBlock;
+	relatedGroups: FileGroup[];
+	relatedFiles: FileChange[];
+}
+
+export function buildWalkthrough(
+	parsed: ParsedNarrative,
+	groups: FileGroup[],
+	files: FileChange[],
+): WalkthroughStep[] {
+	const groupMap = new Map(groups.map((g) => [g.name, g]));
+	const fileMap = new Map(files.map((f) => [f.path, f]));
+
+	return parsed.blocks.map((block, i) => {
+		const relatedGroups: FileGroup[] = [];
+		const relatedFiles: FileChange[] = [];
+		const seenGroups = new Set<string>();
+		const seenFiles = new Set<string>();
+
+		for (const anchor of block.anchors) {
+			if (anchor.kind === "group") {
+				const group = groupMap.get(anchor.id);
+				if (group && !seenGroups.has(anchor.id)) {
+					seenGroups.add(anchor.id);
+					relatedGroups.push(group);
+					for (const fp of group.files) {
+						if (!seenFiles.has(fp)) {
+							seenFiles.add(fp);
+							const file = fileMap.get(fp);
+							if (file) relatedFiles.push(file);
+						}
+					}
+				}
+			} else {
+				if (!seenFiles.has(anchor.id)) {
+					seenFiles.add(anchor.id);
+					const file = fileMap.get(anchor.id);
+					if (file) relatedFiles.push(file);
+				}
+			}
+		}
+
+		return { type: "narrative" as const, blockIndex: i, block, relatedGroups, relatedFiles };
+	});
+}

package/src/tui/panels/FilesPanel.tsx

@@ -0,0 +1,134 @@
+import { useState, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { FileChange } from "../../types/output.ts";
+import { T, STATUS_STYLE } from "../theme.ts";
+
+export function FilesPanel({
+	files,
+	isFocused,
+	viewportHeight,
+}: { files: FileChange[]; isFocused: boolean; viewportHeight: number }) {
+	const [selected, setSelected] = useState(0);
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const [filterMode, setFilterMode] = useState(false);
+	const [filterText, setFilterText] = useState("");
+
+	const filtered = useMemo(() => {
+		if (!filterText) return files;
+		const lower = filterText.toLowerCase();
+		return files.filter(
+			(f) => f.path.toLowerCase().includes(lower) || f.summary.toLowerCase().includes(lower),
+		);
+	}, [files, filterText]);
+
+	const linesPerFile = 2;
+	const headerLines = (filterMode || filterText) ? 1 : 0;
+	const maxVisible = Math.max(1, Math.floor((viewportHeight - 2 - headerLines) / linesPerFile));
+
+	function ensureVisible(idx: number) {
+		if (idx < scrollOffset) {
+			setScrollOffset(idx);
+		} else if (idx >= scrollOffset + maxVisible) {
+			setScrollOffset(idx - maxVisible + 1);
+		}
+	}
+
+	useInput(
+		(input, key) => {
+			if (filterMode) {
+				if (key.escape || key.return) {
+					setFilterMode(false);
+					setSelected(0);
+					setScrollOffset(0);
+					return;
+				}
+				if (key.backspace || key.delete) {
+					setFilterText((t) => t.slice(0, -1));
+					return;
+				}
+				if (input && !key.ctrl && !key.meta) {
+					setFilterText((t) => t + input);
+					return;
+				}
+				return;
+			}
+
+			if (input === "/") {
+				setFilterMode(true);
+				setFilterText("");
+				return;
+			}
+			if (key.escape) {
+				setFilterText("");
+				setSelected(0);
+				setScrollOffset(0);
+				return;
+			}
+			if (key.upArrow || input === "k") {
+				setSelected((s) => {
+					const next = Math.max(0, s - 1);
+					ensureVisible(next);
+					return next;
+				});
+			} else if (key.downArrow || input === "j") {
+				setSelected((s) => {
+					const next = Math.min(filtered.length - 1, s + 1);
+					ensureVisible(next);
+					return next;
+				});
+			}
+		},
+		{ isActive: isFocused },
+	);
+
+	const visible = filtered.slice(scrollOffset, scrollOffset + maxVisible);
+	const canScrollUp = scrollOffset > 0;
+	const canScrollDown = scrollOffset + maxVisible < filtered.length;
+
+	return (
+		<Box flexDirection="column" paddingX={1}>
+			{filterMode && (
+				<Box>
+					<Text color={T.primary} bold>/ </Text>
+					<Text color={T.text}>{filterText}</Text>
+					<Text color={T.primary}>█</Text>
+				</Box>
+			)}
+			{!filterMode && filterText && (
+				<Text color={T.muted}>
+					Filtered: <Text color={T.accent}>"{filterText}"</Text> ({filtered.length}/{files.length}) — <Text color={T.primaryBold}>Esc</Text> to clear
+				</Text>
+			)}
+
+			{canScrollUp && <Text color={T.faint}> ↑ {scrollOffset} more above</Text>}
+
+			{filtered.length === 0 && (
+				<Text color={T.muted}>No files {filterText ? "matching filter" : "found"}.</Text>
+			)}
+
+			{visible.map((file, vi) => {
+				const isSelected = scrollOffset + vi === selected;
+				const ss = STATUS_STYLE[file.status] ?? { icon: "?", color: T.muted };
+				return (
+					<Box key={file.path} flexDirection="column">
+						<Text inverse={isSelected && isFocused} bold={isSelected}>
+							{" "}
+							<Text color={isSelected && isFocused ? undefined : ss.color} bold>{ss.icon}</Text>
+							{" "}
+							<Text color={isSelected && isFocused ? undefined : T.text}>{file.path}</Text>
+							{" "}
+							<Text color={isSelected && isFocused ? undefined : T.added}>+{file.additions}</Text>
+							<Text color={isSelected && isFocused ? undefined : T.deleted}>-{file.deletions}</Text>
+						</Text>
+						<Box paddingLeft={4}>
+							<Text color={T.muted}>{file.summary}</Text>
+							<Text color={T.faint}> [{file.groups.join(", ")}]</Text>
+						</Box>
+					</Box>
+				);
+			})}
+
+			{canScrollDown && <Text color={T.faint}> ↓ {filtered.length - scrollOffset - maxVisible} more below</Text>}
+		</Box>
+	);
+}

package/src/tui/panels/GroupsPanel.tsx

@@ -0,0 +1,140 @@
+import { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import type { FileGroup, FileChange } from "../../types/output.ts";
+import { T, TYPE_STYLE, STATUS_STYLE } from "../theme.ts";
+
+interface RenderedLine {
+	key: string;
+	node: React.ReactNode;
+	groupIndex: number;
+}
+
+export function GroupsPanel({
+	groups,
+	files,
+	isFocused,
+	viewportHeight,
+}: { groups: FileGroup[]; files: FileChange[]; isFocused: boolean; viewportHeight: number }) {
+	const [selected, setSelected] = useState(0);
+	const [expanded, setExpanded] = useState<Set<number>>(new Set());
+	const [scrollOffset, setScrollOffset] = useState(0);
+
+	const toggle = useCallback(() => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(selected)) next.delete(selected);
+			else next.add(selected);
+			return next;
+		});
+	}, [selected]);
+
+	const allLines = useMemo(() => {
+		const lines: RenderedLine[] = [];
+		for (let gi = 0; gi < groups.length; gi++) {
+			const group = groups[gi]!;
+			const isExpanded = expanded.has(gi);
+			const style = TYPE_STYLE[group.type] ?? { icon: "•", color: T.muted };
+			const arrow = isExpanded ? "▼" : "▶";
+			const isSelected = gi === selected;
+
+			lines.push({
+				key: `g-${gi}`,
+				groupIndex: gi,
+				node: (
+					<Text inverse={isSelected && isFocused} bold={isSelected}>
+						{" "}<Text color={isSelected && isFocused ? undefined : T.faint}>{arrow}</Text>
+						{" "}<Text color={isSelected && isFocused ? undefined : style.color}>{style.icon}</Text>
+						{" "}{group.name}
+						{" "}<Text color={isSelected && isFocused ? undefined : T.muted}>({group.files.length})</Text>
+						{" "}<Text color={isSelected && isFocused ? undefined : T.faint} dimColor>{group.type}</Text>
+					</Text>
+				),
+			});
+
+			if (!isExpanded) {
+				lines.push({
+					key: `g-${gi}-desc`,
+					groupIndex: gi,
+					node: <Text color={T.muted}>     {group.description}</Text>,
+				});
+			} else {
+				lines.push({
+					key: `g-${gi}-desc-e`,
+					groupIndex: gi,
+					node: <Text color={T.muted} italic>     {group.description}</Text>,
+				});
+				const groupFiles = files.filter((f) => group.files.includes(f.path));
+				for (const f of groupFiles) {
+					const fs = STATUS_STYLE[f.status] ?? { icon: "?", color: T.muted };
+					lines.push({
+						key: `g-${gi}-f-${f.path}`,
+						groupIndex: gi,
+						node: (
+							<Box gap={1} marginLeft={4}>
+								<Text color={fs.color} bold>{fs.icon}</Text>
+								<Text color={T.text}>{f.path}</Text>
+								<Text color={T.added}>+{f.additions}</Text>
+								<Text color={T.deleted}>-{f.deletions}</Text>
+							</Box>
+						),
+					});
+				}
+			}
+		}
+		return lines;
+	}, [groups, files, expanded, selected, isFocused]);
+
+	useInput(
+		(input, key) => {
+			if (key.upArrow || input === "k") {
+				setSelected((s) => {
+					const next = Math.max(0, s - 1);
+					ensureVisible(next);
+					return next;
+				});
+			} else if (key.downArrow || input === "j") {
+				setSelected((s) => {
+					const next = Math.min(groups.length - 1, s + 1);
+					ensureVisible(next);
+					return next;
+				});
+			} else if (key.return) {
+				toggle();
+			}
+		},
+		{ isActive: isFocused },
+	);
+
+	function ensureVisible(groupIdx: number) {
+		const firstLineIdx = allLines.findIndex((l) => l.groupIndex === groupIdx);
+		if (firstLineIdx === -1) return;
+
+		if (firstLineIdx < scrollOffset) {
+			setScrollOffset(firstLineIdx);
+		} else if (firstLineIdx >= scrollOffset + viewportHeight - 2) {
+			setScrollOffset(Math.max(0, firstLineIdx - viewportHeight + 4));
+		}
+	}
+
+	if (groups.length === 0) {
+		return (
+			<Box paddingX={2} paddingY={1}>
+				<Text dimColor>No change groups found.</Text>
+			</Box>
+		);
+	}
+
+	const visible = allLines.slice(scrollOffset, scrollOffset + viewportHeight - 2);
+	const canScrollUp = scrollOffset > 0;
+	const canScrollDown = scrollOffset + viewportHeight - 2 < allLines.length;
+
+	return (
+		<Box flexDirection="column" paddingX={1}>
+			{canScrollUp && <Text color={T.faint}> ↑ more above</Text>}
+			{visible.map((line) => (
+				<Box key={line.key}>{line.node}</Box>
+			))}
+			{canScrollDown && <Text color={T.faint}> ↓ more below</Text>}
+		</Box>
+	);
+}

package/src/tui/panels/NarrativePanel.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { T } from "../theme.ts";
+
+function renderMarkdownLine(line: string) {
+	if (line.startsWith("### ")) {
+		return <Text bold color={T.primaryBold}>{line.slice(4)}</Text>;
+	}
+	if (line.startsWith("## ")) {
+		return <Text bold color={T.primary} underline>{line.slice(3)}</Text>;
+	}
+	if (line.startsWith("# ")) {
+		return <Text bold color={T.primary} underline>{line.slice(2)}</Text>;
+	}
+	if (line.startsWith("- ") || line.startsWith("* ")) {
+		return <Text><Text color={T.primary}>  •</Text> {line.slice(2)}</Text>;
+	}
+	if (line.trim() === "") {
+		return <Text> </Text>;
+	}
+
+	const parts: React.JSX.Element[] = [];
+	let remaining = line;
+	let keyIdx = 0;
+
+	while (remaining.length > 0) {
+		const boldMatch = remaining.match(/\*\*(.+?)\*\*/);
+		const codeMatch = remaining.match(/`(.+?)`/);
+
+		let firstMatch: { index: number; full: string; content: string; type: "bold" | "code" } | null = null;
+
+		if (boldMatch?.index !== undefined) {
+			firstMatch = { index: boldMatch.index, full: boldMatch[0], content: boldMatch[1]!, type: "bold" };
+		}
+		if (codeMatch?.index !== undefined) {
+			if (!firstMatch || codeMatch.index < firstMatch.index) {
+				firstMatch = { index: codeMatch.index, full: codeMatch[0], content: codeMatch[1]!, type: "code" };
+			}
+		}
+
+		if (!firstMatch) {
+			parts.push(<Text key={keyIdx++} color={T.text}>{remaining}</Text>);
+			break;
+		}
+
+		if (firstMatch.index > 0) {
+			parts.push(<Text key={keyIdx++} color={T.text}>{remaining.slice(0, firstMatch.index)}</Text>);
+		}
+
+		if (firstMatch.type === "bold") {
+			parts.push(<Text key={keyIdx++} bold color={T.textBold}>{firstMatch.content}</Text>);
+		} else {
+			parts.push(<Text key={keyIdx++} color={T.accent}>{firstMatch.content}</Text>);
+		}
+
+		remaining = remaining.slice(firstMatch.index + firstMatch.full.length);
+	}
+
+	return <Text>{...parts}</Text>;
+}
+
+export function NarrativePanel({
+	narrative,
+	isFocused,
+	viewportHeight,
+}: { narrative: string; isFocused: boolean; viewportHeight: number }) {
+	const lines = narrative.split("\n");
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const maxScroll = Math.max(0, lines.length - viewportHeight + 3);
+
+	useInput(
+		(input, key) => {
+			if (key.upArrow || input === "k") {
+				setScrollOffset((s) => Math.max(0, s - 1));
+			} else if (key.downArrow || input === "j") {
+				setScrollOffset((s) => Math.min(maxScroll, s + 1));
+			}
+		},
+		{ isActive: isFocused },
+	);
+
+	const visibleCount = Math.max(1, viewportHeight - 3);
+	const visible = lines.slice(scrollOffset, scrollOffset + visibleCount);
+	const canScrollUp = scrollOffset > 0;
+	const canScrollDown = scrollOffset < maxScroll;
+
+	return (
+		<Box flexDirection="column" paddingX={2}>
+			<Box gap={1}>
+				<Text bold color={T.primary}>¶ Change Narrative</Text>
+				{(canScrollUp || canScrollDown) && (
+					<Text color={T.faint}>({scrollOffset + 1}-{Math.min(scrollOffset + visibleCount, lines.length)}/{lines.length})</Text>
+				)}
+			</Box>
+			{canScrollUp && <Text color={T.faint}>↑</Text>}
+			{visible.map((line, i) => (
+				<Box key={scrollOffset + i}>{renderMarkdownLine(line)}</Box>
+			))}
+			{canScrollDown && <Text color={T.faint}>↓</Text>}
+		</Box>
+	);
+}