@nemo-cli/ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,10 +1,10 @@
 import { createRequire } from "node:module";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ProgressBar, Spinner, ThemeProvider, defaultTheme, extendTheme } from "@inkjs/ui";
 import { Box, Static, Text, render, useApp, useInput } from "ink";
 import InkBigText from "ink-big-text";
 import Gradient from "ink-gradient";
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { x, xASync } from "@nemo-cli/shared";
-import { ProgressBar, Spinner, ThemeProvider, defaultTheme, extendTheme } from "@inkjs/ui";
 
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
@@ -219,46 +219,1365 @@ var require_react_jsx_runtime_development = /* @__PURE__ */ __commonJSMin(((expo
 		function validateChildKeys(node) {
 			isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
 		}
-		function isValidElement(object) {
-			return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+		function isValidElement(object) {
+			return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+		}
+		var React = __require("react"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		React = { react_stack_bottom_frame: function(callStackForError) {
+			return callStackForError();
+		} };
+		var specialPropKeyWarningShown;
+		var didWarnAboutElementRef = {};
+		var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(React, UnknownOwner)();
+		var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+		var didWarnAboutKeySpread = {};
+		exports.Fragment = REACT_FRAGMENT_TYPE;
+		exports.jsx = function(type, config, maybeKey) {
+			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+			return jsxDEVImpl(type, config, maybeKey, !1, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+		};
+		exports.jsxs = function(type, config, maybeKey) {
+			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+			return jsxDEVImpl(type, config, maybeKey, !0, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+		};
+	})();
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-runtime.js
+var require_jsx_runtime = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	if (process.env.NODE_ENV === "production") module.exports = require_react_jsx_runtime_production();
+	else module.exports = require_react_jsx_runtime_development();
+}));
+
+//#endregion
+//#region src/components/provider/index.tsx
+var import_jsx_runtime = require_jsx_runtime();
+const customTheme = extendTheme(defaultTheme, { components: {
+	ProgressBar: { styles: {
+		completed: () => ({ color: "green" }),
+		remaining: () => ({ backgroundColor: "#fff" })
+	} },
+	Spinner: { styles: { frame: () => ({ color: "#fff" }) } }
+} });
+const Provider = ({ children }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProvider, {
+		theme: customTheme,
+		children
+	});
+};
+
+//#endregion
+//#region src/components/ai-progress-viewer.tsx
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const renderBar = (completed, total, width) => {
+	if (total <= 0) return "[----------]";
+	const ratio = clamp(completed / total, 0, 1);
+	const filled = Math.round(ratio * width);
+	const empty = Math.max(0, width - filled);
+	return `[${"#".repeat(filled)}${"-".repeat(empty)}]`;
+};
+const AiProgressViewer = ({ title, onStart, onExit }) => {
+	const [update, setUpdate] = useState({
+		total: 0,
+		completed: 0,
+		status: "pending"
+	});
+	const [messages, setMessages] = useState([]);
+	const [error, setError] = useState(null);
+	const [done, setDone] = useState(false);
+	const controllerRef = useRef(null);
+	const { exit } = useApp();
+	useEffect(() => {
+		const controller = new AbortController();
+		controllerRef.current = controller;
+		const emit = (next) => {
+			setUpdate(next);
+			if (next.message) setMessages((prev) => [...prev.slice(-4), next.message ?? ""]);
+		};
+		const start = async () => {
+			try {
+				await onStart(emit, controller.signal);
+				setDone(true);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Unknown error");
+			}
+		};
+		start();
+	}, [onStart]);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			controllerRef.current?.abort();
+			onExit?.();
+			exit();
+		}
+	});
+	useEffect(() => {
+		if (!done) return;
+		const timer = setTimeout(() => {
+			onExit?.();
+			exit();
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [
+		done,
+		exit,
+		onExit
+	]);
+	const barWidth = useMemo(() => {
+		return clamp((process.stdout.columns || 80) - 20, 10, 40);
+	}, []);
+	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			color: "red",
+			children: ["Error: ", error]
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		borderStyle: "single",
+		flexDirection: "column",
+		width: "100%",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					bold: true,
+					color: "cyan",
+					children: title
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				paddingX: 1,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						alignItems: "center",
+						gap: 1,
+						children: [!done ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "green",
+							children: "Done"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: update.current ?? "Preparing..." })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						marginTop: 1,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
+							renderBar(update.completed, update.total, barWidth),
+							" ",
+							update.completed,
+							"/",
+							update.total
+						] })
+					}),
+					messages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						flexDirection: "column",
+						marginTop: 1,
+						children: messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							dimColor: true,
+							children: message
+						}, index))
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderBottom: false,
+				borderColor: "gray",
+				borderLeft: false,
+				borderRight: false,
+				borderStyle: "single",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					dimColor: true,
+					children: " q: Quit"
+				})
+			})
+		]
+	}) });
+};
+const renderAiProgressViewer = (props) => {
+	return new Promise((resolve) => {
+		const { unmount, waitUntilExit } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AiProgressViewer, { ...props }));
+		waitUntilExit().then(() => {
+			unmount();
+			resolve();
+		});
+	});
+};
+
+//#endregion
+//#region src/components/big-text.tsx
+const BigText = ({ text }) => render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradient, {
+	name: "passion",
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InkBigText, { text })
+}));
+
+//#endregion
+//#region src/hooks/useRawMode.ts
+/**
+* Hook to manage stdin raw mode for interactive terminal components.
+*
+* Raw mode is required for proper keyboard input handling (like j/k navigation).
+* This hook automatically enables raw mode when mounted and restores normal mode on unmount.
+*
+* @example
+* ```tsx
+* export const MyComponent: FC = () => {
+*   useRawMode() // Enable raw mode
+*
+*   useInput((input, key) => {
+*     if (input === 'q') {
+*       exit()
+*     }
+*   })
+*
+*   return <Box>...</Box>
+* }
+* ```
+*/
+const useRawMode = () => {
+	const stdin = useApp().stdin;
+	useEffect(() => {
+		if (stdin && typeof stdin.setRawMode === "function") {
+			stdin.setRawMode(true);
+			return () => {
+				stdin.setRawMode(false);
+			};
+		}
+	}, [stdin]);
+};
+
+//#endregion
+//#region src/components/branch-viewer.tsx
+const TERMINAL_HEIGHT_RESERVED$1 = 8;
+const MIN_VIEW_HEIGHT$1 = 10;
+const PANEL_LOCAL = "local";
+const PANEL_REMOTE = "remote";
+const formatBranchName = (branch) => branch.trim().replace(/^origin\//, "");
+const cleanBranchList = (lines) => lines.filter((line) => line.trim() && !line.includes("->")).map((line) => line.trim().replace(/^\*\s*/, "").trim());
+/**
+* BranchViewer Component
+*
+* Displays local and remote git branches in a dual-panel interactive viewer.
+* Supports vim-style keyboard navigation and independent panel scrolling.
+*
+* @param maxCount - Optional limit on the number of branches to display
+*
+* @example
+* ```tsx
+* <BranchViewer maxCount={20} />
+* ```
+*/
+const BranchViewer = ({ maxCount }) => {
+	const [localBranchData, setLocalBranchData] = useState({
+		branches: [],
+		currentBranch: "",
+		loading: true,
+		error: null
+	});
+	const [remoteBranchData, setRemoteBranchData] = useState({
+		branches: [],
+		currentBranch: "",
+		loading: true,
+		error: null
+	});
+	const [focusPanel, setFocusPanel] = useState("local");
+	const [localScrollTop, setLocalScrollTop] = useState(0);
+	const [remoteScrollTop, setRemoteScrollTop] = useState(0);
+	const { exit } = useApp();
+	useRawMode();
+	const terminalHeight = process.stdout.rows || 24;
+	const viewHeight = Math.max(MIN_VIEW_HEIGHT$1, terminalHeight - TERMINAL_HEIGHT_RESERVED$1);
+	useEffect(() => {
+		const fetchLocalBranches = async () => {
+			try {
+				const args = ["branch", "--sort=-committerdate"];
+				if (maxCount) args.push(`-${maxCount}`);
+				const [error, result] = await xASync("git", args, { quiet: true });
+				if (error) {
+					setLocalBranchData({
+						branches: [],
+						currentBranch: "",
+						loading: false,
+						error: `Failed to fetch local branches: ${error.message || "Unknown error"}`
+					});
+					return;
+				}
+				const lines = result.stdout.split("\n");
+				const currentBranch = (lines.find((line) => line.includes("*")) || "*").replace(/^\*\s*/, "").trim();
+				setLocalBranchData({
+					branches: cleanBranchList(lines),
+					currentBranch,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				setLocalBranchData({
+					branches: [],
+					currentBranch: "",
+					loading: false,
+					error: err instanceof Error ? err.message : "Unknown error"
+				});
+			}
+		};
+		fetchLocalBranches();
+	}, [maxCount]);
+	useEffect(() => {
+		const fetchRemoteBranches = async () => {
+			try {
+				const args = [
+					"branch",
+					"-r",
+					"--sort=-committerdate"
+				];
+				if (maxCount) args.push(`-${maxCount}`);
+				const [error, result] = await xASync("git", args, { quiet: true });
+				if (error) {
+					setRemoteBranchData({
+						branches: [],
+						currentBranch: "",
+						loading: false,
+						error: `Failed to fetch remote branches: ${error.message || "Unknown error"}`
+					});
+					return;
+				}
+				setRemoteBranchData({
+					branches: result.stdout.split("\n").filter((line) => line.trim() && !line.includes("->")).map(formatBranchName),
+					currentBranch: "",
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				setRemoteBranchData({
+					branches: [],
+					currentBranch: "",
+					loading: false,
+					error: err instanceof Error ? err.message : "Unknown error"
+				});
+			}
+		};
+		fetchRemoteBranches();
+	}, [maxCount]);
+	useInput((input, key) => {
+		if (key.return || input === "q") {
+			exit();
+			return;
+		}
+		if (key.leftArrow || input === "h") {
+			if (focusPanel === "remote") setFocusPanel("local");
+			return;
+		}
+		if (key.rightArrow || input === "l") {
+			if (focusPanel === "local") setFocusPanel("remote");
+			return;
+		}
+		if (focusPanel === "local") {
+			const maxScroll = Math.max(0, localBranchData.branches.length - viewHeight);
+			if (key.upArrow || input === "k") setLocalScrollTop((prev) => Math.max(0, prev - 1));
+			else if (key.downArrow || input === "j") setLocalScrollTop((prev) => Math.min(maxScroll, prev + 1));
+			else if (key.pageUp) setLocalScrollTop((prev) => Math.max(0, prev - viewHeight));
+			else if (key.pageDown) setLocalScrollTop((prev) => Math.min(maxScroll, prev + viewHeight));
+		} else {
+			const maxScroll = Math.max(0, remoteBranchData.branches.length - viewHeight);
+			if (key.upArrow || input === "k") setRemoteScrollTop((prev) => Math.max(0, prev - 1));
+			else if (key.downArrow || input === "j") setRemoteScrollTop((prev) => Math.min(maxScroll, prev + 1));
+			else if (key.pageUp) setRemoteScrollTop((prev) => Math.max(0, prev - viewHeight));
+			else if (key.pageDown) setRemoteScrollTop((prev) => Math.min(maxScroll, prev + viewHeight));
+		}
+	});
+	const renderBranchList = (data, scrollTop, panelType) => {
+		const title = panelType === PANEL_LOCAL ? "Local" : "Remote";
+		if (data.loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dimColor: true,
+				children: "Loading..."
+			})
+		});
+		if (data.error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: "red",
+				children: ["Error: ", data.error]
+			})
+		});
+		if (data.branches.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "yellow",
+				children: "No branches found"
+			})
+		});
+		const visibleBranches = data.branches.slice(scrollTop, scrollTop + viewHeight);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					marginBottom: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						bold: true,
+						color: focusPanel === panelType ? "green" : "blue",
+						children: [
+							title,
+							" Branches (",
+							data.branches.length,
+							")",
+							focusPanel === panelType && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								dimColor: true,
+								children: " ◀"
+							})
+						]
+					})
+				}),
+				visibleBranches.map((branch, index) => {
+					const isCurrent = branch === data.currentBranch;
+					scrollTop + index;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						backgroundColor: isCurrent ? "gray" : void 0,
+						marginBottom: index < visibleBranches.length - 1 ? 1 : 0,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: isCurrent ? "green" : "white",
+							children: [isCurrent ? "* " : "  ", branch]
+						})
+					}, branch);
+				}),
+				scrollTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "gray",
+					dimColor: true,
+					children: "▲"
+				}),
+				scrollTop + viewHeight < data.branches.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "gray",
+					dimColor: true,
+					children: "▼"
+				})
+			]
+		});
+	};
+	if (localBranchData.loading || remoteBranchData.loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "Loading branch information..."
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		height: terminalHeight,
+		width: "100%",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "row",
+			flexGrow: 1,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderColor: focusPanel === "local" ? "green" : "gray",
+				borderStyle: "single",
+				flexDirection: "column",
+				width: "50%",
+				children: renderBranchList(localBranchData, localScrollTop, PANEL_LOCAL)
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderColor: focusPanel === "remote" ? "green" : "gray",
+				borderStyle: "single",
+				flexDirection: "column",
+				width: "50%",
+				children: renderBranchList(remoteBranchData, remoteScrollTop, PANEL_REMOTE)
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			borderBottom: false,
+			borderColor: "gray",
+			borderLeft: false,
+			borderRight: false,
+			borderStyle: "single",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				dimColor: true,
+				children: [
+					" ",
+					"←→/hl: Switch Panel | ↑↓/jk: Scroll | PgUp/PgDn | q: Quit | Local: ",
+					localScrollTop + 1,
+					"-",
+					Math.min(localScrollTop + viewHeight, localBranchData.branches.length),
+					"/",
+					localBranchData.branches.length,
+					" ",
+					"Remote: ",
+					remoteScrollTop + 1,
+					"-",
+					Math.min(remoteScrollTop + viewHeight, remoteBranchData.branches.length),
+					"/",
+					remoteBranchData.branches.length
+				]
+			})
+		})]
+	});
+};
+/**
+* Renders the BranchViewer component using Ink's render function.
+*
+* @param maxCount - Optional limit on the number of branches to display
+* @returns A promise that resolves when the viewer exits
+*
+* @example
+* ```typescript
+* await renderBranchViewer(20)
+* ```
+*/
+const renderBranchViewer = (maxCount) => {
+	const { waitUntilExit } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BranchViewer, { maxCount }));
+	return waitUntilExit();
+};
+
+//#endregion
+//#region src/components/commit-detail.tsx
+const DiffViewer$2 = ({ commitHash, filePath, scrollTop, visibleLines }) => {
+	const [diffLines, setDiffLines] = useState([]);
+	const [loading, setLoading] = useState(true);
+	useEffect(() => {
+		const fetchDiff = async () => {
+			try {
+				const [error, result] = await xASync("git", [
+					"show",
+					commitHash,
+					"--",
+					filePath
+				], { quiet: true });
+				if (error) {
+					setDiffLines(["Error loading diff"]);
+					setLoading(false);
+					return;
+				}
+				setDiffLines(result.stdout.split("\n"));
+			} catch (error) {
+				console.error("Failed to fetch diff:", error);
+				setDiffLines(["Error loading diff"]);
+			} finally {
+				setLoading(false);
+			}
+		};
+		fetchDiff();
+	}, [commitHash, filePath]);
+	if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "Loading diff..."
+		})
+	});
+	if (diffLines.length === 0 || diffLines.length === 1 && diffLines[0] === "") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "No diff available"
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			diffLines.slice(scrollTop, scrollTop + visibleLines).map((line, index) => {
+				let color = "white";
+				if (line.startsWith("+") && !line.startsWith("+++")) color = "green";
+				else if (line.startsWith("-") && !line.startsWith("---")) color = "red";
+				else if (line.startsWith("@@")) color = "cyan";
+				else if (line.startsWith("diff")) color = "yellow";
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color,
+					children: line
+				}, index);
+			}),
+			scrollTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "gray",
+				dimColor: true,
+				children: "▲"
+			}),
+			scrollTop + visibleLines < diffLines.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "gray",
+				dimColor: true,
+				children: "▼"
+			})
+		]
+	});
+};
+const CommitDetail = ({ commitHash, onExit }) => {
+	const [commitInfo, setCommitInfo] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [focusPanel, setFocusPanel] = useState("files");
+	const [diffScrollTop, setDiffScrollTop] = useState(0);
+	const app = useApp();
+	const { exit } = app;
+	useRawMode();
+	const terminalHeight = app.stdout?.rows || 24;
+	const visibleLines = Math.max(10, terminalHeight - 6);
+	const fileVisibleCount = Math.max(5, terminalHeight - 4);
+	useEffect(() => {
+		const fetchCommitDetail = async () => {
+			try {
+				const [gitError, result] = await xASync("git", [
+					"show",
+					commitHash,
+					"--name-only",
+					"--pretty=format:%H|%an|%ad|%s"
+				], { quiet: true });
+				if (gitError) {
+					setError(`Failed to fetch commit ${commitHash}`);
+					setLoading(false);
+					return;
+				}
+				const lines = result.stdout.split("\n");
+				const firstLine = lines[0];
+				if (!firstLine) {
+					setError("Invalid git output: missing commit info");
+					setLoading(false);
+					return;
+				}
+				const parts = firstLine.split("|");
+				if (parts.length < 4) {
+					setError("Invalid git output: malformed commit info");
+					setLoading(false);
+					return;
+				}
+				const [hash, author, date, message] = parts;
+				const files = lines.slice(1).filter(Boolean).map((path) => ({
+					path,
+					status: "M"
+				}));
+				setCommitInfo({
+					hash,
+					shortHash: hash.slice(0, 7),
+					author,
+					date,
+					message,
+					files
+				});
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Unknown error");
+			} finally {
+				setLoading(false);
+			}
+		};
+		fetchCommitDetail();
+	}, [commitHash]);
+	useEffect(() => {
+		setDiffScrollTop(0);
+	}, [selectedIndex]);
+	const getVisibleFiles = useCallback(() => {
+		if (!commitInfo) return [];
+		const start = Math.max(0, selectedIndex - Math.floor(fileVisibleCount / 2));
+		const end = Math.min(commitInfo.files.length, start + fileVisibleCount);
+		return commitInfo.files.slice(start, end);
+	}, [
+		commitInfo,
+		selectedIndex,
+		fileVisibleCount
+	]);
+	useInput((input, key) => {
+		if (key.return || input === "q") {
+			onExit();
+			exit();
+			return;
+		}
+		if (loading || !commitInfo || commitInfo.files.length === 0) return;
+		if (focusPanel === "files") {
+			if (key.upArrow || input === "k") setSelectedIndex((prev) => Math.max(0, prev - 1));
+			else if (key.downArrow || input === "j") setSelectedIndex((prev) => Math.min(commitInfo.files.length - 1, prev + 1));
+			else if (key.rightArrow || input === "l") setFocusPanel("diff");
+		} else if (key.upArrow || input === "k") setDiffScrollTop((prev) => Math.max(0, prev - 1));
+		else if (key.downArrow || input === "j") setDiffScrollTop((prev) => prev + 1);
+		else if (key.leftArrow || input === "h") setFocusPanel("files");
+	});
+	if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "Loading commit detail..."
+		})
+	});
+	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			color: "red",
+			children: ["Error: ", error]
+		})
+	});
+	if (!commitInfo) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			color: "red",
+			children: "Error: No commit info loaded"
+		})
+	});
+	if (commitInfo.files.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		paddingY: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			color: "green",
+			children: "✓ No files changed in this commit"
+		})
+	});
+	const selectedFile = commitInfo.files[selectedIndex];
+	const visibleFiles = getVisibleFiles();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "row",
+		height: terminalHeight,
+		width: "100%",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			borderColor: focusPanel === "files" ? "green" : "gray",
+			borderStyle: "single",
+			flexDirection: "column",
+			paddingX: 1,
+			width: "30%",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					marginBottom: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						bold: true,
+						color: focusPanel === "files" ? "green" : "blue",
+						children: [
+							"Changed Files (",
+							commitInfo.files.length,
+							")",
+							focusPanel === "files" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								dimColor: true,
+								children: " ◀"
+							})
+						]
+					})
+				}),
+				visibleFiles.map((file, index) => {
+					const isSelected = commitInfo.files.indexOf(file) === selectedIndex;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						backgroundColor: isSelected ? "gray" : void 0,
+						marginBottom: index < visibleFiles.length - 1 ? 1 : 0,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: isSelected ? "white" : "yellow",
+							children: [isSelected ? "●" : " ", " "]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: isSelected ? "white" : "white",
+							children: file.path
+						})]
+					}, file.path);
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					marginTop: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						dimColor: true,
+						children: focusPanel === "files" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "↑↓/jk Navigate | →/l Diff | Enter/q Quit" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "↑↓/jk Scroll | ←/h Files | Enter/q Quit" })
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			borderColor: focusPanel === "diff" ? "green" : "blue",
+			borderStyle: "single",
+			flexDirection: "column",
+			width: "70%",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				borderBottom: true,
+				borderColor: focusPanel === "diff" ? "green" : "blue",
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					bold: true,
+					color: "cyan",
+					children: [
+						commitInfo.shortHash,
+						" ",
+						commitInfo.message
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					dimColor: true,
+					children: [
+						" ",
+						"(",
+						commitInfo.author,
+						", ",
+						commitInfo.date,
+						")",
+						focusPanel === "diff" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							dimColor: true,
+							children: " ▶"
+						})
+					]
+				})]
+			}), selectedFile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffViewer$2, {
+				commitHash,
+				filePath: selectedFile.path,
+				scrollTop: diffScrollTop,
+				visibleLines
+			})]
+		})]
+	});
+};
+const renderCommitDetail = (commitHash) => {
+	const { waitUntilExit } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitDetail, {
+		commitHash,
+		onExit: () => {}
+	}));
+	return waitUntilExit();
+};
+
+//#endregion
+//#region src/components/commit-viewer.tsx
+const CommitViewer = ({ maxCount = 20, onSelect, onExit }) => {
+	const [commits, setCommits] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollTop, setScrollTop] = useState(0);
+	const { exit } = useApp();
+	useRawMode();
+	const terminalHeight = process.stdout.rows || 24;
+	const viewHeight = Math.max(5, terminalHeight - 4);
+	useEffect(() => {
+		const fetchCommits = async () => {
+			try {
+				const [gitError, result] = await xASync("git", [
+					"log",
+					`-n ${maxCount}`,
+					"--pretty=format:%H|%an|%ad|%s",
+					"--date=relative"
+				], { quiet: true });
+				if (gitError) {
+					setError(`Failed to fetch commit history: ${gitError.message || "Unknown error"}`);
+					setLoading(false);
+					return;
+				}
+				setCommits(result.stdout.split("\n").filter(Boolean).map((line) => {
+					const parts = line.split("|");
+					if (parts.length < 4) return {
+						hash: line,
+						shortHash: line.slice(0, 7),
+						author: "Unknown",
+						date: "",
+						message: line
+					};
+					const [hash, author, date, message] = parts;
+					return {
+						hash,
+						shortHash: hash.slice(0, 7),
+						author,
+						date,
+						message
+					};
+				}));
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Unknown error");
+			} finally {
+				setLoading(false);
+			}
+		};
+		fetchCommits();
+	}, [maxCount]);
+	useEffect(() => {
+		if (commits.length === 0) return;
+		Math.floor(viewHeight / 2);
+		if (selectedIndex < scrollTop + 2) setScrollTop(Math.max(0, selectedIndex - 2));
+		else if (selectedIndex > scrollTop + viewHeight - 3) setScrollTop(Math.min(commits.length - viewHeight, selectedIndex - viewHeight + 3));
+	}, [
+		selectedIndex,
+		commits.length,
+		viewHeight
+	]);
+	const visibleCommits = useMemo(() => {
+		if (commits.length === 0) return [];
+		return commits.slice(scrollTop, scrollTop + viewHeight);
+	}, [
+		commits,
+		scrollTop,
+		viewHeight
+	]);
+	useInput((input, key) => {
+		if (input === "q") {
+			onExit();
+			exit();
+			return;
+		}
+		if (loading || commits.length === 0) return;
+		if (key.return) {
+			if (commits[selectedIndex]) onSelect(commits[selectedIndex].hash);
+			return;
+		}
+		if (key.upArrow || input === "k") setSelectedIndex((prev) => Math.max(0, prev - 1));
+		else if (key.downArrow || input === "j") setSelectedIndex((prev) => Math.min(commits.length - 1, prev + 1));
+	});
+	if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "Loading commit history..."
+		})
+	});
+	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			color: "red",
+			children: ["Error: ", error]
+		})
+	});
+	if (commits.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			color: "yellow",
+			children: "No commits found."
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		borderStyle: "single",
+		flexDirection: "column",
+		width: "100%",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					bold: true,
+					color: "cyan",
+					children: [
+						"Recent Commits (",
+						commits.length,
+						")"
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexDirection: "column",
+				height: viewHeight,
+				paddingX: 1,
+				children: visibleCommits.map((commit) => {
+					const isSelected = commits.indexOf(commit) === selectedIndex;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						backgroundColor: isSelected ? "gray" : void 0,
+						marginBottom: 1,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: isSelected ? "white" : "yellow",
+								children: [isSelected ? "●" : " ", " "]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								bold: true,
+								color: isSelected ? "white" : "cyan",
+								children: commit.shortHash
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								color: isSelected ? "white" : "green",
+								children: commit.message
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								dimColor: true,
+								children: [
+									" ",
+									"(",
+									commit.author,
+									", ",
+									commit.date,
+									")"
+								]
+							})
+						]
+					}, commit.hash);
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderBottom: false,
+				borderColor: "gray",
+				borderLeft: false,
+				borderRight: false,
+				borderStyle: "single",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					dimColor: true,
+					children: " ↑↓/jk: Navigate | Enter: Select | q: Quit"
+				})
+			})
+		]
+	});
+};
+const renderCommitViewer = (maxCount) => {
+	return new Promise((resolve) => {
+		const { unmount } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitViewer, {
+			maxCount,
+			onExit: () => {
+				unmount();
+				resolve(void 0);
+			},
+			onSelect: (hash) => {
+				unmount();
+				resolve(hash);
+			}
+		}));
+	});
+};
+
+//#endregion
+//#region src/components/diff-viewer.tsx
+const TERMINAL_HEIGHT_RESERVED = 8;
+const MIN_VIEW_HEIGHT = 10;
+const PANEL_FILES = "files";
+const PANEL_DIFF = "diff";
+const PANEL_WIDTH = "50%";
+const COLOR_FOCUSED = "green";
+const COLOR_UNFOCUSED = "blue";
+const COLOR_SELECTED = "green";
+const COLOR_NORMAL = "white";
+const COLOR_ADDED = "green";
+const COLOR_REMOVED = "red";
+const COLOR_HUNK_HEADER = "cyan";
+const COLOR_BORDER_FOCUSED = "green";
+const COLOR_BORDER_UNFOCUSED = "gray";
+const COLOR_SCROLL_INDICATOR = "gray";
+/**
+* DiffViewer Component
+*
+* Displays git diff in a dual-panel interactive viewer.
+* Left panel shows changed files, right panel shows diff content for selected file.
+* Supports vim-style keyboard navigation and independent panel scrolling.
+*
+* @param targetBranch - Optional target branch to diff against (defaults to working directory)
+*
+* @example
+* ```tsx
+* <DiffViewer targetBranch="main" />
+* ```
+*/
+const DiffViewer = ({ targetBranch }) => {
+	const [fileData, setFileData] = useState({
+		files: [],
+		loading: true,
+		error: null
+	});
+	const [selectedFileIndex, setSelectedFileIndex] = useState(0);
+	const [diffContent, setDiffContent] = useState("");
+	const [diffLoading, setDiffLoading] = useState(false);
+	const [focusPanel, setFocusPanel] = useState("files");
+	const [filesScrollTop, setFilesScrollTop] = useState(0);
+	const [diffScrollTop, setDiffScrollTop] = useState(0);
+	const { exit } = useApp();
+	useRawMode();
+	const terminalHeight = process.stdout.rows || 24;
+	const viewHeight = Math.max(MIN_VIEW_HEIGHT, terminalHeight - TERMINAL_HEIGHT_RESERVED);
+	useEffect(() => {
+		if (fileData.files.length === 0) {
+			setSelectedFileIndex(0);
+			return;
+		}
+		const clampedIndex = Math.min(selectedFileIndex, fileData.files.length - 1);
+		if (clampedIndex !== selectedFileIndex) {
+			setSelectedFileIndex(clampedIndex);
+			return;
 		}
-		var React = __require("react"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
-			return null;
+		const maxScroll = Math.max(0, fileData.files.length - viewHeight);
+		const padding = 2;
+		const minVisible = filesScrollTop + padding;
+		const maxVisible = filesScrollTop + viewHeight - padding - 1;
+		if (selectedFileIndex < minVisible) setFilesScrollTop((_prev) => Math.max(0, selectedFileIndex - padding));
+		else if (selectedFileIndex > maxVisible) setFilesScrollTop((_prev) => Math.min(maxScroll, selectedFileIndex - viewHeight + padding + 1));
+	}, [
+		selectedFileIndex,
+		fileData.files.length,
+		viewHeight,
+		filesScrollTop
+	]);
+	useEffect(() => {
+		let cancelled = false;
+		const fetchFiles = async () => {
+			try {
+				const [error, result] = await xASync("git", targetBranch ? [
+					"diff",
+					"--name-only",
+					`${targetBranch}...HEAD`
+				] : ["diff", "--name-only"], { quiet: true });
+				if (cancelled) return;
+				if (error) {
+					setFileData({
+						files: [],
+						loading: false,
+						error: `Failed to fetch changed files: ${error.message || "Unknown error"}`
+					});
+					return;
+				}
+				const files = result.stdout.split("\n").filter((line) => line.trim()).map((line) => line.trim());
+				if (cancelled) return;
+				setFileData({
+					files,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (cancelled) return;
+				setFileData({
+					files: [],
+					loading: false,
+					error: err instanceof Error ? err.message : "Unknown error"
+				});
+			}
 		};
-		React = { react_stack_bottom_frame: function(callStackForError) {
-			return callStackForError();
-		} };
-		var specialPropKeyWarningShown;
-		var didWarnAboutElementRef = {};
-		var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(React, UnknownOwner)();
-		var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-		var didWarnAboutKeySpread = {};
-		exports.Fragment = REACT_FRAGMENT_TYPE;
-		exports.jsx = function(type, config, maybeKey) {
-			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-			return jsxDEVImpl(type, config, maybeKey, !1, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+		fetchFiles();
+		return () => {
+			cancelled = true;
 		};
-		exports.jsxs = function(type, config, maybeKey) {
-			var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-			return jsxDEVImpl(type, config, maybeKey, !0, trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack, trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask);
+	}, [targetBranch]);
+	useEffect(() => {
+		let cancelled = false;
+		const fetchDiff = async () => {
+			if (fileData.files.length === 0 || selectedFileIndex >= fileData.files.length) {
+				setDiffContent("");
+				return;
+			}
+			const selectedFile = fileData.files[selectedFileIndex];
+			if (!selectedFile) {
+				setDiffContent("");
+				return;
+			}
+			setDiffLoading(true);
+			try {
+				const [error, result] = await xASync("git", targetBranch ? [
+					"diff",
+					`${targetBranch}...HEAD`,
+					"--",
+					selectedFile
+				] : [
+					"diff",
+					"--",
+					selectedFile
+				], { quiet: true });
+				if (cancelled) return;
+				if (error) {
+					setDiffContent(`Error loading diff for "${selectedFile}": ${error.message || "Unknown error"}`);
+					return;
+				}
+				setDiffContent(result.stdout || "No changes in this file");
+			} catch (err) {
+				if (cancelled) return;
+				setDiffContent(`Error loading diff for "${selectedFile}": ${err instanceof Error ? err.message : "Unknown error"}`);
+			} finally {
+				if (!cancelled) setDiffLoading(false);
+			}
 		};
-	})();
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-runtime.js
-var require_jsx_runtime = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	if (process.env.NODE_ENV === "production") module.exports = require_react_jsx_runtime_production();
-	else module.exports = require_react_jsx_runtime_development();
-}));
-
-//#endregion
-//#region src/components/big-text.tsx
-var import_jsx_runtime = require_jsx_runtime();
-const BigText = ({ text }) => render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradient, {
-	name: "passion",
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InkBigText, { text })
-}));
+		fetchDiff();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		selectedFileIndex,
+		fileData.files,
+		targetBranch
+	]);
+	const diffLines = useMemo(() => {
+		if (!diffContent) return [];
+		return diffContent.split("\n");
+	}, [diffContent]);
+	Math.max(0, fileData.files.length - viewHeight);
+	const maxDiffScroll = Math.max(0, diffLines.length - viewHeight);
+	useInput((input, key) => {
+		if (key.return || input === "q") {
+			exit();
+			return;
+		}
+		if (fileData.loading || fileData.files.length === 0) return;
+		if (key.leftArrow || input === "h") {
+			if (focusPanel === "diff") setFocusPanel("files");
+			return;
+		}
+		if (key.rightArrow || input === "l") {
+			if (focusPanel === "files" && fileData.files.length > 0) setFocusPanel("diff");
+			return;
+		}
+		if (focusPanel === "files") {
+			if (key.upArrow || input === "k") setSelectedFileIndex((prev) => Math.max(0, prev - 1));
+			else if (key.downArrow || input === "j") setSelectedFileIndex((prev) => Math.min(fileData.files.length - 1, prev + 1));
+			else if (key.pageUp) setSelectedFileIndex((prev) => Math.max(0, prev - viewHeight));
+			else if (key.pageDown) setSelectedFileIndex((prev) => Math.min(fileData.files.length - 1, prev + viewHeight));
+		} else if (key.upArrow || input === "k") setDiffScrollTop((prev) => Math.max(0, prev - 1));
+		else if (key.downArrow || input === "j") setDiffScrollTop((prev) => Math.min(maxDiffScroll, prev + 1));
+		else if (key.pageUp) setDiffScrollTop((prev) => Math.max(0, prev - viewHeight));
+		else if (key.pageDown) setDiffScrollTop((prev) => Math.min(maxDiffScroll, prev + viewHeight));
+	});
+	if (fileData.loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dimColor: true,
+			children: "Loading changed files..."
+		})
+	});
+	if (fileData.error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			color: "red",
+			children: ["Error: ", fileData.error]
+		})
+	});
+	if (fileData.files.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			color: "yellow",
+			children: "No changed files found."
+		})
+	});
+	const renderFileList = () => {
+		const visibleFiles = fileData.files.slice(filesScrollTop, filesScrollTop + viewHeight);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					marginBottom: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						bold: true,
+						color: focusPanel === PANEL_FILES ? COLOR_FOCUSED : COLOR_UNFOCUSED,
+						children: [
+							"Changed Files (",
+							fileData.files.length,
+							")",
+							focusPanel === PANEL_FILES && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								dimColor: true,
+								children: " ◀"
+							})
+						]
+					})
+				}),
+				visibleFiles.map((file, index) => {
+					const isSelected = filesScrollTop + index === selectedFileIndex;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						backgroundColor: isSelected ? "gray" : void 0,
+						marginBottom: index < visibleFiles.length - 1 ? 1 : 0,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: isSelected ? COLOR_SELECTED : COLOR_NORMAL,
+							children: isSelected ? "> " : "  "
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: isSelected ? COLOR_SELECTED : COLOR_NORMAL,
+							children: file
+						})]
+					}, file);
+				}),
+				filesScrollTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: COLOR_SCROLL_INDICATOR,
+					dimColor: true,
+					children: "▲"
+				}),
+				filesScrollTop + viewHeight < fileData.files.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: COLOR_SCROLL_INDICATOR,
+					dimColor: true,
+					children: "▼"
+				})
+			]
+		});
+	};
+	const renderDiffContent = () => {
+		if (diffLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dimColor: true,
+				children: "Loading diff..."
+			})
+		});
+		if (!diffContent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dimColor: true,
+				children: "Select a file to view diff"
+			})
+		});
+		const visibleLines = diffLines.slice(diffScrollTop, diffScrollTop + viewHeight);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					marginBottom: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						bold: true,
+						color: focusPanel === PANEL_DIFF ? COLOR_FOCUSED : COLOR_UNFOCUSED,
+						children: ["Diff Content", focusPanel === PANEL_DIFF && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							dimColor: true,
+							children: " ◀"
+						})]
+					})
+				}),
+				visibleLines.map((line, index) => {
+					let lineColor = COLOR_NORMAL;
+					if (line.startsWith("+") && !line.startsWith("+++")) lineColor = COLOR_ADDED;
+					else if (line.startsWith("-") && !line.startsWith("---")) lineColor = COLOR_REMOVED;
+					else if (line.startsWith("@@")) lineColor = COLOR_HUNK_HEADER;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: lineColor,
+						children: line || " "
+					}, index);
+				}),
+				diffScrollTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: COLOR_SCROLL_INDICATOR,
+					dimColor: true,
+					children: "▲"
+				}),
+				diffScrollTop + viewHeight < diffLines.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: COLOR_SCROLL_INDICATOR,
+					dimColor: true,
+					children: "▼"
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		height: terminalHeight,
+		width: "100%",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "row",
+			flexGrow: 1,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderColor: focusPanel === "files" ? COLOR_BORDER_FOCUSED : COLOR_BORDER_UNFOCUSED,
+				borderStyle: "single",
+				flexDirection: "column",
+				width: PANEL_WIDTH,
+				children: renderFileList()
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderColor: focusPanel === "diff" ? COLOR_BORDER_FOCUSED : COLOR_BORDER_UNFOCUSED,
+				borderStyle: "single",
+				flexDirection: "column",
+				width: PANEL_WIDTH,
+				children: renderDiffContent()
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			borderBottom: false,
+			borderColor: COLOR_BORDER_UNFOCUSED,
+			borderLeft: false,
+			borderRight: false,
+			borderStyle: "single",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				dimColor: true,
+				children: [
+					" ",
+					"←→/hl: Switch Panel | ↑↓/jk: Scroll | PgUp/PgDn | q: Quit | Files ",
+					filesScrollTop + 1,
+					"-",
+					Math.min(filesScrollTop + viewHeight, fileData.files.length),
+					"/",
+					fileData.files.length,
+					" Diff",
+					" ",
+					diffScrollTop + 1,
+					"-",
+					Math.min(diffScrollTop + viewHeight, diffLines.length),
+					"/",
+					diffLines.length
+				]
+			})
+		})]
+	});
+};
+/**
+* Renders the DiffViewer component using Ink's render function.
+*
+* @param targetBranch - Optional target branch to diff against
+* @returns A promise that resolves when the viewer exits
+*
+* @example
+* ```typescript
+* await renderDiffViewer('main')
+* ```
+*/
+const renderDiffViewer = (targetBranch) => {
+	const { waitUntilExit } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffViewer, { targetBranch }));
+	return waitUntilExit();
+};
 
 //#endregion
 //#region src/components/hist-viewer.tsx
@@ -269,6 +1588,7 @@ const HistViewer = ({ maxCount }) => {
 	const [scrollTop, setScrollTop] = useState(0);
 	const [lastKey, setLastKey] = useState("");
 	const { exit } = useApp();
+	useRawMode();
 	const terminalHeight = process.stdout.rows || 24;
 	const viewHeight = Math.max(10, terminalHeight - 8);
 	useEffect(() => {
@@ -457,22 +1777,6 @@ const ErrorMessage = ({ text, colors, ...props }) => {
 	}));
 };
 
-//#endregion
-//#region src/components/provider/index.tsx
-const customTheme = extendTheme(defaultTheme, { components: {
-	ProgressBar: { styles: {
-		completed: () => ({ color: "green" }),
-		remaining: () => ({ backgroundColor: "#fff" })
-	} },
-	Spinner: { styles: { frame: () => ({ color: "#fff" }) } }
-} });
-const Provider = ({ children }) => {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProvider, {
-		theme: customTheme,
-		children
-	});
-};
-
 //#endregion
 //#region src/components/process-message.tsx
 const ProcessMessageUI = ({ command, commandArgs, onSuccess, onError }) => {
@@ -544,6 +1848,146 @@ const ProcessMessage = ({ command, commandArgs, onSuccess, onError }) => {
 	}));
 };
 
+//#endregion
+//#region src/components/route-viewer.tsx
+const RouteViewer = ({ routes, onSelect, onExit }) => {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [selectedRoutes, setSelectedRoutes] = useState(/* @__PURE__ */ new Set());
+	const [scrollTop, setScrollTop] = useState(0);
+	const { exit } = useApp();
+	useRawMode();
+	const terminalHeight = process.stdout.rows || 24;
+	const viewHeight = Math.max(5, terminalHeight - 4);
+	useEffect(() => {
+		if (routes.length === 0) return;
+		if (selectedIndex < scrollTop + 2) setScrollTop(Math.max(0, selectedIndex - 2));
+		else if (selectedIndex > scrollTop + viewHeight - 3) setScrollTop(Math.min(routes.length - viewHeight, selectedIndex - viewHeight + 3));
+	}, [
+		selectedIndex,
+		routes.length,
+		viewHeight,
+		scrollTop
+	]);
+	const visibleRoutes = useMemo(() => {
+		if (routes.length === 0) return [];
+		return routes.slice(scrollTop, scrollTop + viewHeight);
+	}, [
+		routes,
+		scrollTop,
+		viewHeight
+	]);
+	useInput((input, key) => {
+		if (input === "q") {
+			onExit();
+			exit();
+			return;
+		}
+		if (routes.length === 0) return;
+		if (key.return) {
+			const selected = Array.from(selectedRoutes);
+			if (selected.length > 0) {
+				onSelect(routes.filter((route) => selected.includes(route)));
+				return;
+			}
+			if (routes[selectedIndex]) onSelect([routes[selectedIndex]]);
+			return;
+		}
+		if (key.upArrow || input === "k") setSelectedIndex((prev) => Math.max(0, prev - 1));
+		else if (key.downArrow || input === "j") setSelectedIndex((prev) => Math.min(routes.length - 1, prev + 1));
+		else if (input === " ") {
+			const route = routes[selectedIndex];
+			if (!route) return;
+			setSelectedRoutes((prev) => {
+				const next = new Set(prev);
+				if (next.has(route)) next.delete(route);
+				else next.add(route);
+				return next;
+			});
+		} else if (input === "a") setSelectedRoutes((prev) => {
+			if (prev.size === routes.length) return /* @__PURE__ */ new Set();
+			return new Set(routes);
+		});
+	});
+	if (routes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			color: "yellow",
+			children: "No routes found."
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		borderStyle: "single",
+		flexDirection: "column",
+		width: "100%",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					bold: true,
+					color: "cyan",
+					children: [
+						"Select Page Route (",
+						routes.length,
+						")"
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexDirection: "column",
+				height: viewHeight,
+				paddingX: 1,
+				children: visibleRoutes.map((route, visibleIndex) => {
+					const isSelected = scrollTop + visibleIndex === selectedIndex;
+					const isChecked = selectedRoutes.has(route);
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						backgroundColor: isSelected ? "gray" : void 0,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: isSelected ? "white" : "yellow",
+								children: [isSelected ? ">" : " ", " "]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: isChecked ? "green" : "gray",
+								children: [isChecked ? "[x]" : "[ ]", " "]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								color: isSelected ? "white" : "green",
+								children: route
+							})
+						]
+					}, route);
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderBottom: false,
+				borderColor: "gray",
+				borderLeft: false,
+				borderRight: false,
+				borderStyle: "single",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					dimColor: true,
+					children: " ↑↓/jk: Navigate | Space: Toggle | a: All | Enter: Confirm | q: Quit"
+				})
+			})
+		]
+	});
+};
+const renderRouteViewer = (routes) => {
+	return new Promise((resolve) => {
+		const { unmount } = render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouteViewer, {
+			onExit: () => {
+				unmount();
+				resolve(void 0);
+			},
+			onSelect: (route) => {
+				unmount();
+				resolve(route);
+			},
+			routes
+		}));
+	});
+};
+
 //#endregion
 //#region src/components/stash-list.tsx
 const StashCard = ({ stash, index }) => {
@@ -646,7 +2090,7 @@ const renderStashList = (stashes) => {
 
 //#endregion
 //#region src/components/status-viewer.tsx
-const DiffViewer = ({ filePath, scrollTop, visibleLines }) => {
+const DiffViewer$1 = ({ filePath, scrollTop, visibleLines }) => {
 	const [diffLines, setDiffLines] = useState([]);
 	const [loading, setLoading] = useState(true);
 	useEffect(() => {
@@ -716,15 +2160,7 @@ const StatusViewer = ({ files, onExit }) => {
 	const [diffScrollTop, setDiffScrollTop] = useState(0);
 	const app = useApp();
 	const { exit } = app;
-	const stdin = app.stdin;
-	useEffect(() => {
-		if (stdin && typeof stdin.setRawMode === "function") {
-			stdin.setRawMode(true);
-			return () => {
-				stdin.setRawMode(false);
-			};
-		}
-	}, [stdin]);
+	useRawMode();
 	const terminalHeight = app.stdout?.rows || 24;
 	const visibleLines = Math.max(10, terminalHeight - 6);
 	const fileVisibleCount = Math.max(5, terminalHeight - 4);
@@ -847,7 +2283,7 @@ const StatusViewer = ({ files, onExit }) => {
 						})
 					]
 				})]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffViewer, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffViewer$1, {
 				filePath: selectedFile.path,
 				scrollTop: diffScrollTop,
 				visibleLines
@@ -867,5 +2303,5 @@ const renderStatusViewer = (files) => {
 };
 
 //#endregion
-export { BigText, ErrorMessage, HistViewer, Message, ProcessMessage, StashList, StatusViewer, renderHistViewer, renderList, renderStashList, renderStatusViewer };
+export { AiProgressViewer, BigText, BranchViewer, CommitDetail, CommitViewer, DiffViewer, ErrorMessage, HistViewer, Message, ProcessMessage, RouteViewer, StashList, StatusViewer, renderAiProgressViewer, renderBranchViewer, renderCommitDetail, renderCommitViewer, renderDiffViewer, renderHistViewer, renderList, renderRouteViewer, renderStashList, renderStatusViewer };
 //# sourceMappingURL=index.js.map