Tauri + React + Typescript

+ runAndClose(() => openPath(item.path))} + > + Open {item.kind === "directory" ? "folder" : "file"} + + runAndClose(() => revealPath(item.path))} + > + Reveal in folder + +

+ runAndClose(() => stagePath(item.path))} + > + Stage + + runAndClose(() => unstagePath(item.path))} + > + Unstage + + runAndClose(() => discardPath(item.path))} + variant="destructive" + > + Discard changes + +

+ ); + }; + + useEffect(() => { + void diffRevision; + + if (repoPath == null) { + setPatch(""); + return; + } + + let cancelled = false; + + async function loadSelectedDiff() { + setDiffLoading(true); + setPatch(""); + setError(null); + + try { + const nextPatch = await loadFileDiff(repoPath, selectedPath); + + if (!cancelled) { + setPatch(nextPatch); + } + } catch (nextError) { + if (!cancelled) { + setPatch(""); + setError( + nextError instanceof Error ? nextError.message : String(nextError), + ); + } + } finally { + if (!cancelled) { + setDiffLoading(false); + } + } + } + + loadSelectedDiff(); + + return () => { + cancelled = true; + }; + }, [repoPath, selectedPath, diffRevision]); + + const sidebarHeader = ( +

+ + + +

+ {status ? ( +

+ + + {status.branch} + + {status.head ? ( + {status.head} + ) : null} +

+ + + +

+ {status.rootPath} +

+ ) : null} +

+ ); + + const sidebarFooter = ( +

+ {selectedPath == null ? "All changes" : basename(selectedPath)} +

+ {selectedExactEntry ? ( + + ) : null} +

+ + + +

setCommitMessage(event.target.value)}
+					placeholder="Commit message"
+					value={commitMessage}
+				/>
+				<div className="mt-2 flex items-center gap-2">
+					<p className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+						{status ? `${status.summary.staged} staged files` : "No repository"}
+					</p>
+					<Button
+						disabled={
+							!hasRepository ||
+							!hasStagedChanges ||
+							commitMessage.trim().length === 0 ||
+							actionPending === "commit"
+						}
+						size="sm"
+						type="submit"
+					>
+						{actionPending === "commit" ? (
+							<RefreshCw className="size-3.5 animate-spin" />
+						) : (
+							<Check className="size-3.5" />
+						)}
+						Commit
+					</Button>
+				</div>
+			</form>
+		</div>
+	);
+
+	return (
+		<div className="flex min-h-0 w-full flex-1">
+			<Sidebar
+				// footer={sidebarFooter}
+				gitStatus={gitStatus}
+				header={sidebarHeader}
+				initialExpansion={2}
+				onActivePathChange={setSelectedPath}
+				onOpenFile={setSelectedPath}
+				onSelectionChange={(paths) => setSelectedPath(paths.at(-1) ?? null)}
+				paths={changedPaths}
+				renderContextMenu={renderContextMenu}
+				renderRowDecoration={renderRowDecoration}
+				selectedPaths={selectedPath ? [selectedPath] : []}
+			/>
+
+			<section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+				<section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+					<header className="shrink-0 border-b bg-background">
+						<div className="flex min-h-12 items-center gap-2 px-3 py-2">
+							<div className="min-w-0 flex-1">
+								<div className="flex min-w-0 items-center gap-2">
+									<p className="min-w-0 truncate text-sm font-semibold">
+										{selectedLabel}
+									</p>
+									{selectedExactEntry ? (
+										<StatusBadge entry={selectedExactEntry} />
+									) : null}
+								</div>
+								<div className="mt-1 flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+									{status ? (
+										<>
+											<span className="inline-flex min-w-0 items-center gap-1">
+												<GitBranch className="size-3.5 shrink-0" />
+												<span className="truncate">{status.branch}</span>
+											</span>
+											{status.ahead > 0 ? (
+												<span>ahead {status.ahead}</span>
+											) : null}
+											{status.behind > 0 ? (
+												<span>behind {status.behind}</span>
+											) : null}
+										</>
+									) : (
+										<span>Open a repository to start reviewing changes.</span>
+									)}
+									{diffLoading ? <span>Loading diff...</span> : null}
+								</div>
+							</div>
+							<div className="flex shrink-0 items-center gap-1">
+								<ActionButton
+									busy={actionPending === "stage-selection"}
+									disabled={!hasRepository || !hasSelectedChanges}
+									icon={<Plus className="size-3.5" />}
+									onClick={stageSelection}
+									title="Stage current selection"
+								>
+									Stage
+								</ActionButton>
+								<ActionButton
+									busy={actionPending === "unstage-selection"}
+									disabled={!hasRepository || !hasSelectedChanges}
+									icon={<Minus className="size-3.5" />}
+									onClick={unstageSelection}
+									title="Unstage current selection"
+								>
+									Unstage
+								</ActionButton>
+								<Button
+									aria-label="Discard current selection"
+									disabled={
+										!hasRepository ||
+										selectedPath == null ||
+										!hasSelectedChanges ||
+										actionPending === "discard-selection"
+									}
+									onClick={discardSelection}
+									size="icon-sm"
+									title="Discard current selection"
+									type="button"
+									variant="destructive"
+								>
+									{actionPending === "discard-selection" ? (
+										<RefreshCw className="size-3.5 animate-spin" />
+									) : (
+										<RotateCcw className="size-3.5" />
+									)}
+								</Button>
+							</div>
+						</div>
+
+						{hasRepository ? (
+							<div className="flex min-h-9 items-center gap-2 border-t bg-muted/30 px-3 py-1.5">
+								<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+									<SummaryPill
+										label="changed"
+										value={status?.entries.length ?? 0}
+									/>
+									<SummaryPill
+										label="staged"
+										value={status?.summary.staged ?? 0}
+									/>
+									<SummaryPill
+										label="unstaged"
+										value={status?.summary.unstaged ?? 0}
+									/>
+									{currentDirectory ? (
+										<span className="truncate text-xs text-muted-foreground">
+											in {currentDirectory}
+										</span>
+									) : null}
+								</div>
+								<Button
+									disabled={!hasChanges || actionPending === "stage-selection"}
+									onClick={() =>
+										runGitAction(
+											"stage-selection",
+											() => stagePaths(repoPath),
+											"Staged all changes.",
+										)
+									}
+									size="xs"
+									type="button"
+									variant="outline"
+								>
+									<Plus className="size-3" />
+									Stage all
+								</Button>
+								<Button
+									disabled={
+										!hasStagedChanges || actionPending === "unstage-selection"
+									}
+									onClick={() =>
+										runGitAction(
+											"unstage-selection",
+											() => unstagePaths(repoPath),
+											"Unstaged all changes.",
+										)
+									}
+									size="xs"
+									type="button"
+									variant="outline"
+								>
+									<Minus className="size-3" />
+									Unstage all
+								</Button>
+							</div>
+						) : null}
+					</header>
+
+					{error ? (
+						<div className="flex shrink-0 items-center gap-2 border-b bg-destructive/10 px-3 py-2 text-sm text-destructive">
+							<FileWarning className="size-4 shrink-0" />
+							<p className="min-w-0 flex-1 truncate">{error}</p>
+						</div>
+					) : null}
+					{notice ? (
+						<div className="flex shrink-0 items-center gap-2 border-b bg-muted/60 px-3 py-2 text-sm text-muted-foreground">
+							<Circle className="size-3 shrink-0 fill-current" />
+							<p className="min-w-0 flex-1 truncate">{notice}</p>
+						</div>
+					) : null}
+
+					<div className="min-h-0 flex-1 overflow-hidden">
+						<MyPatchDiff
+							emptyMessage={
+								loadState === "idle"
+									? "Open a Git repository to see changed files and diffs."
+									: status?.entries.length === 0
+										? "Working tree is clean."
+										: "No diff for this selection."
+							}
+							patch={patch}
+						/>
+					</div>
+
+					{status?.recentCommits.length ? (
+						<div className="flex h-24 shrink-0 items-stretch gap-3 overflow-x-auto border-t bg-background px-3 py-2">
+							<div className="flex w-28 shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground">
+								<Clock3 className="size-3.5" />
+								History
+							</div>
+							{status.recentCommits.map((commit) => (
+								<div
+									className="flex w-64 shrink-0 flex-col justify-center border-l pl-3"
+									key={commit.hash}
+								>
+									<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+										<GitCommitHorizontal className="size-3.5" />
+										<span>{commit.hash}</span>
+										<span className="truncate">{commit.relativeTime}</span>
+									</div>
+									<p className="mt-1 truncate text-sm font-medium">
+										{commit.subject}
+									</p>
+									<p className="mt-0.5 truncate text-xs text-muted-foreground">
+										{commit.author}
+									</p>
+								</div>
+							))}
+						</div>
+					) : null}
+				</section>
+
+				<Terminal />
+			</section>
+		</div>
+	);
+}
+
+export default GitClient;
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..21ddc2e
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,42 @@
+import {
+	Menubar,
+	MenubarContent,
+	MenubarGroup,
+	MenubarItem,
+	MenubarMenu,
+	MenubarSeparator,
+	MenubarTrigger,
+} from "@/components/ui/menubar";
+import { Link } from "@tanstack/react-router";
+
+export default function Header() {
+	return (
+		<header className="flex flex-row px-2 mb-2">
+			<Menubar className="border-0">
+				<MenubarMenu>
+					<MenubarTrigger>
+						<img src="/logo.svg" alt="Logo" width="16" height="16" />
+					</MenubarTrigger>
+					<MenubarContent>
+						<MenubarGroup>
+							<MenubarItem>New repository...</MenubarItem>
+						</MenubarGroup>
+						<MenubarSeparator />
+						<MenubarGroup>
+							<MenubarItem>Add local repository...</MenubarItem>
+							<MenubarItem>Clone repository...</MenubarItem>
+						</MenubarGroup>
+						<MenubarSeparator />
+						<MenubarGroup>
+							<MenubarItem asChild><Link to="/settings">Settings</Link></MenubarItem>
+						</MenubarGroup>
+						<MenubarSeparator />
+						<MenubarGroup>
+							<MenubarItem>Exit</MenubarItem>
+						</MenubarGroup>
+					</MenubarContent>
+				</MenubarMenu>
+			</Menubar>
+		</header>
+	);
+}
diff --git a/src/components/sidebar/fileTree.tsx b/src/components/sidebar/fileTree.tsx
new file mode 100644
index 0000000..c743fe9
--- /dev/null
+++ b/src/components/sidebar/fileTree.tsx
@@ -0,0 +1,234 @@
+import type {
+	ContextMenuItem,
+	ContextMenuOpenContext,
+	FileTreeDensity,
+	FileTreeInitialExpansion,
+	FileTreeRowDecorationRenderer,
+	FileTreeSearchMode,
+	GitStatusEntry,
+} from "@pierre/trees";
+import { FileTree as PierreFileTree, useFileTree } from "@pierre/trees/react";
+import type {
+	CSSProperties,
+	KeyboardEvent,
+	MouseEvent,
+	ReactNode,
+} from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { cn } from "#/lib/utils";
+
+export type FileTreeProps = {
+	className?: string;
+	density?: FileTreeDensity;
+	footer?: ReactNode;
+	gitStatus?: readonly GitStatusEntry[];
+	header?: ReactNode;
+	initialExpansion?: FileTreeInitialExpansion;
+	initialSelectedPaths?: readonly string[];
+	onOpenFile?: (path: string) => void;
+	onActivePathChange?: (path: string) => void;
+	onSelectionChange?: (selectedPaths: readonly string[]) => void;
+	paths?: readonly string[];
+	renderContextMenu?: (
+		item: ContextMenuItem,
+		context: ContextMenuOpenContext,
+	) => ReactNode;
+	renderRowDecoration?: FileTreeRowDecorationRenderer;
+	search?: boolean;
+	searchMode?: FileTreeSearchMode;
+	selectedPaths?: readonly string[];
+	style?: CSSProperties;
+};
+
+const DEFAULT_PATHS = [
+	"src/routes/index.tsx",
+	"src/components/diff.tsx",
+	"src/components/sidebar/index.tsx",
+	"src/components/sidebar/fileTree.tsx",
+	"src/components/terminal/base.tsx",
+	"src/components/terminal/tab.tsx",
+	"src/styles.css",
+	"src-tauri/tauri.conf.json",
+	"package.json",
+] as const;
+
+const TREE_CSS = `
+	button[data-type='item'] {
+		border-radius: 6px;
+	}
+
+	button[data-type='item'][data-item-selected] {
+		font-weight: 600;
+	}
+
+	button[data-type='item'][data-item-focused] {
+		outline-offset: -2px;
+	}
+`;
+
+function findEventItemPath(event: MouseEvent<HTMLElement>) {
+	for (const item of event.nativeEvent.composedPath()) {
+		if (item instanceof HTMLElement && item.dataset.itemPath != null) {
+			return item.dataset.itemPath;
+		}
+	}
+
+	return null;
+}
+
+function useLatestRef<TValue>(value: TValue) {
+	const ref = useRef(value);
+
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+
+	return ref;
+}
+
+export function FileTree({
+	className,
+	density = "compact",
+	footer,
+	gitStatus,
+	header,
+	initialExpansion = 1,
+	initialSelectedPaths,
+	onActivePathChange,
+	onOpenFile,
+	onSelectionChange,
+	paths = DEFAULT_PATHS,
+	renderContextMenu,
+	renderRowDecoration,
+	search = true,
+	searchMode = "expand-matches",
+	selectedPaths,
+	style,
+}: FileTreeProps) {
+	const didMountPathsRef = useRef(false);
+	const onActivePathChangeRef = useLatestRef(onActivePathChange);
+	const onSelectionChangeRef = useLatestRef(onSelectionChange);
+	const renderRowDecorationRef = useLatestRef(renderRowDecoration);
+	const normalizedPaths = useMemo(
+		() => [...paths].filter((path) => path.trim().length > 0),
+		[paths],
+	);
+
+	const { model } = useFileTree({
+		density,
+		fileTreeSearchMode: searchMode,
+		flattenEmptyDirectories: true,
+		gitStatus,
+		initialExpansion,
+		initialSelectedPaths,
+		paths: normalizedPaths,
+		search,
+		stickyFolders: true,
+		unsafeCSS: TREE_CSS,
+		onSelectionChange: (nextSelectedPaths) => {
+			onSelectionChangeRef.current?.(nextSelectedPaths);
+		},
+		renderRowDecoration: (context) =>
+			renderRowDecorationRef.current?.(context) ?? null,
+	});
+
+	useEffect(() => {
+		if (!didMountPathsRef.current) {
+			didMountPathsRef.current = true;
+			return;
+		}
+
+		model.resetPaths(normalizedPaths);
+	}, [model, normalizedPaths]);
+
+	useEffect(() => {
+		model.setGitStatus(gitStatus);
+	}, [model, gitStatus]);
+
+	useEffect(() => {
+		if (selectedPaths == null) {
+			return;
+		}
+
+		const nextSelectedPaths = new Set(selectedPaths);
+
+		for (const path of model.getSelectedPaths()) {
+			if (!nextSelectedPaths.has(path)) {
+				model.getItem(path)?.deselect();
+			}
+		}
+
+		for (const path of selectedPaths) {
+			model.getItem(path)?.select();
+		}
+	}, [model, selectedPaths]);
+
+	const activatePath = (path: string | null) => {
+		if (path == null) {
+			return;
+		}
+
+		onActivePathChangeRef.current?.(path);
+		onSelectionChangeRef.current?.([path]);
+	};
+
+	const openPath = (path: string | null) => {
+		if (path == null) {
+			return;
+		}
+
+		activatePath(path);
+
+		const item = model.getItem(path);
+
+		if (item == null || item.isDirectory()) {
+			return;
+		}
+
+		onOpenFile?.(path);
+	};
+
+	const handleClick = (event: MouseEvent<HTMLElement>) => {
+		activatePath(findEventItemPath(event));
+	};
+
+	const handleDoubleClick = (event: MouseEvent<HTMLElement>) => {
+		openPath(findEventItemPath(event));
+	};
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+		if (event.key !== "Enter") {
+			return;
+		}
+
+		activatePath(model.getFocusedPath());
+		openPath(model.getFocusedPath());
+	};
+
+	const treeStyle = {
+		"--trees-bg-override": "#fcf8f9",
+		"--trees-fg-override": "#191017",
+		"--trees-border-color-override": "#e7dfe4",
+		"--trees-selected-bg-override": "#f1d9e3",
+		"--trees-focus-ring-color-override": "#9d5670",
+		...style,
+	} as CSSProperties;
+
+	return (
+		<div className={cn("flex h-full min-h-0 w-full flex-col", className)}>
+			{header}
+			<PierreFileTree
+				className="min-h-0 flex-1"
+				model={model}
+				onClick={handleClick}
+				onDoubleClick={handleDoubleClick}
+				onKeyDown={handleKeyDown}
+				renderContextMenu={renderContextMenu}
+				style={treeStyle}
+			/>
+			{footer}
+		</div>
+	);
+}
+
+export default FileTree;
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
new file mode 100644
index 0000000..385bff5
--- /dev/null
+++ b/src/components/sidebar/index.tsx
@@ -0,0 +1,117 @@
+import { type PointerEvent, useCallback, useState } from "react";
+import { cn } from "#/lib/utils";
+import FileTree, { type FileTreeProps } from "./fileTree";
+
+type SidebarProps = Pick<
+	FileTreeProps,
+	| "footer"
+	| "gitStatus"
+	| "header"
+	| "initialExpansion"
+	| "onActivePathChange"
+	| "onOpenFile"
+	| "onSelectionChange"
+	| "paths"
+	| "renderContextMenu"
+	| "renderRowDecoration"
+	| "selectedPaths"
+> & {
+	className?: string;
+	defaultWidth?: number;
+	maxWidth?: number;
+	minEditorWidth?: number;
+	minWidth?: number;
+};
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(Math.max(value, min), max);
+}
+
+export function Sidebar({
+	className,
+	defaultWidth = 260,
+	footer,
+	gitStatus,
+	header,
+	initialExpansion,
+	maxWidth = 520,
+	minEditorWidth = 320,
+	minWidth = 180,
+	onActivePathChange,
+	onOpenFile,
+	onSelectionChange,
+	paths,
+	renderContextMenu,
+	renderRowDecoration,
+	selectedPaths,
+}: SidebarProps) {
+	const [width, setWidth] = useState(defaultWidth);
+
+	const handleResizeStart = useCallback(
+		(event: PointerEvent<HTMLHRElement>) => {
+			const containerWidth =
+				event.currentTarget.parentElement?.getBoundingClientRect().width ??
+				window.innerWidth;
+			const resizeMaxWidth = Math.min(
+				maxWidth,
+				containerWidth - minEditorWidth,
+			);
+			const previousUserSelect = document.body.style.userSelect;
+
+			event.preventDefault();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			document.body.style.userSelect = "none";
+
+			const handleMove = (moveEvent: globalThis.PointerEvent) => {
+				setWidth(clamp(moveEvent.clientX, minWidth, resizeMaxWidth));
+			};
+
+			const stopResize = () => {
+				document.body.style.userSelect = previousUserSelect;
+				window.removeEventListener("pointermove", handleMove);
+				window.removeEventListener("pointerup", stopResize);
+				window.removeEventListener("pointercancel", stopResize);
+			};
+
+			window.addEventListener("pointermove", handleMove);
+			window.addEventListener("pointerup", stopResize);
+			window.addEventListener("pointercancel", stopResize);
+		},
+		[maxWidth, minEditorWidth, minWidth],
+	);
+
+	return (
+		<section className={cn("contents", className)}>
+			<aside
+				className="min-h-0 shrink-0 overflow-hidden border-r bg-background"
+				style={{ width }}
+			>
+				<FileTree
+					footer={footer}
+					gitStatus={gitStatus}
+					header={header}
+					initialExpansion={initialExpansion}
+					onActivePathChange={onActivePathChange}
+					onOpenFile={onOpenFile}
+					onSelectionChange={onSelectionChange}
+					paths={paths}
+					renderContextMenu={renderContextMenu}
+					renderRowDecoration={renderRowDecoration}
+					selectedPaths={selectedPaths}
+				/>
+			</aside>
+			<hr
+				aria-label="Resize sidebar"
+				aria-orientation="vertical"
+				aria-valuemax={maxWidth}
+				aria-valuemin={minWidth}
+				aria-valuenow={width}
+				className="relative z-10 m-0 w-1.5 shrink-0 cursor-col-resize border-0 bg-border/70 outline-none hover:bg-ring/35 focus-visible:bg-ring/45"
+				onPointerDown={handleResizeStart}
+				tabIndex={0}
+			/>
+		</section>
+	);
+}
+
+export default Sidebar;
diff --git a/src/components/terminal/base.tsx b/src/components/terminal/base.tsx
new file mode 100644
index 0000000..ecba851
--- /dev/null
+++ b/src/components/terminal/base.tsx
@@ -0,0 +1,188 @@
+import { useTerminal, Terminal as WTermTerminal } from "@wterm/react";
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "#/lib/utils";
+
+type BaseTerminalProps = {
+	active?: boolean;
+	className?: string;
+	onInput?: (data: string) => void;
+};
+
+type Invoke = <T>(
+	command: string,
+	args?: Record<string, unknown>,
+) => Promise<T>;
+
+type Unlisten = () => void;
+
+type TerminalOutputEvent = {
+	id: string;
+	data: string;
+};
+
+type TerminalExitEvent = {
+	id: string;
+	code: number;
+	signal?: string | null;
+};
+
+function createTerminalId() {
+	if (globalThis.crypto?.randomUUID) {
+		return globalThis.crypto.randomUUID();
+	}
+
+	return `terminal-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+export function BaseTerminal({
+	active = true,
+	className,
+	onInput,
+}: BaseTerminalProps) {
+	const { ref, write, focus } = useTerminal();
+
+	const terminalIdRef = useRef(createTerminalId());
+	const invokeRef = useRef<Invoke | null>(null);
+	const sizeRef = useRef({ cols: 80, rows: 24 });
+	const unlistenRef = useRef<Unlisten[]>([]);
+	const connectionStartedRef = useRef(false);
+	const mountedRef = useRef(false);
+
+	const handleData = useCallback(
+		(data: string) => {
+			onInput?.(data);
+
+			invokeRef.current?.("write_terminal", {
+				id: terminalIdRef.current,
+				data,
+			});
+		},
+		[onInput],
+	);
+
+	const handleReady = useCallback(() => {
+		if (connectionStartedRef.current) {
+			focus();
+			return;
+		}
+
+		connectionStartedRef.current = true;
+
+		async function connectTerminal() {
+			try {
+				const [{ isTauri, invoke }, { listen }] = await Promise.all([
+					import("@tauri-apps/api/core"),
+					import("@tauri-apps/api/event"),
+				]);
+
+				if (!mountedRef.current) {
+					return;
+				}
+
+				if (!isTauri()) {
+					write("This component only works inside Tauri.\r\n");
+					return;
+				}
+
+				invokeRef.current = invoke as Invoke;
+
+				const unlistenOutput = await listen<TerminalOutputEvent>(
+					"terminal-output",
+					({ payload }) => {
+						if (payload.id !== terminalIdRef.current) {
+							return;
+						}
+
+						write(payload.data);
+					},
+				);
+
+				const unlistenExit = await listen<TerminalExitEvent>(
+					"terminal-exit",
+					({ payload }) => {
+						if (payload.id !== terminalIdRef.current) {
+							return;
+						}
+
+						const reason = payload.signal
+							? `signal ${payload.signal}`
+							: `code ${payload.code}`;
+
+						write(`\r\n[process exited: ${reason}]\r\n`);
+					},
+				);
+
+				unlistenRef.current.push(unlistenOutput, unlistenExit);
+
+				await invoke("spawn_terminal", {
+					id: terminalIdRef.current,
+					cols: sizeRef.current.cols,
+					rows: sizeRef.current.rows,
+					cwd: null,
+					shell: null,
+				});
+
+				focus();
+			} catch (error) {
+				console.error("Failed to start terminal", error);
+				connectionStartedRef.current = false;
+				write("Failed to start terminal.\r\n");
+			}
+		}
+
+		connectTerminal();
+	}, [focus, write]);
+
+	const handleResize = useCallback((cols: number, rows: number) => {
+		sizeRef.current = { cols, rows };
+
+		invokeRef.current?.("resize_terminal", {
+			id: terminalIdRef.current,
+			cols,
+			rows,
+		});
+	}, []);
+
+	useEffect(() => {
+		mountedRef.current = true;
+
+		return () => {
+			mountedRef.current = false;
+
+			for (const unlisten of unlistenRef.current) {
+				unlisten();
+			}
+
+			unlistenRef.current = [];
+
+			invokeRef.current?.("kill_terminal", {
+				id: terminalIdRef.current,
+			});
+
+			connectionStartedRef.current = false;
+		};
+	}, []);
+
+	useEffect(() => {
+		if (active) {
+			focus();
+		}
+	}, [active, focus]);
+
+	return (
+		<section className={cn("h-full min-h-0", className)}>
+			<WTermTerminal
+				ref={ref}
+				autoResize
+				className="!h-full !rounded-none !border-0 !font-code !shadow-none"
+				cursorBlink
+				onData={handleData}
+				onReady={handleReady}
+				onResize={handleResize}
+				theme="kanade"
+			/>
+		</section>
+	);
+}
+
+export default BaseTerminal;
diff --git a/src/components/terminal/index.tsx b/src/components/terminal/index.tsx
new file mode 100644
index 0000000..6e7154d
--- /dev/null
+++ b/src/components/terminal/index.tsx
@@ -0,0 +1,2 @@
+export { BaseTerminal } from "./base";
+export { default, Terminal } from "./tab";
diff --git a/src/components/terminal/tab.tsx b/src/components/terminal/tab.tsx
new file mode 100644
index 0000000..25cc86a
--- /dev/null
+++ b/src/components/terminal/tab.tsx
@@ -0,0 +1,194 @@
+import { Plus, X } from "lucide-react";
+import { type PointerEvent, useCallback, useState } from "react";
+import { Button } from "#/components/ui/button";
+import { cn } from "#/lib/utils";
+import { BaseTerminal } from "./base";
+
+type TerminalProps = {
+	className?: string;
+	defaultHeight?: number;
+	maxHeight?: number;
+	minHeight?: number;
+	minWorkspaceHeight?: number;
+};
+
+type TerminalTab = {
+	id: string;
+	title: string;
+};
+
+function createTabId() {
+	if (globalThis.crypto?.randomUUID) {
+		return globalThis.crypto.randomUUID();
+	}
+
+	return `terminal-tab-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(Math.max(value, min), max);
+}
+
+export function Terminal({
+	className,
+	defaultHeight = 220,
+	maxHeight = 520,
+	minHeight = 120,
+	minWorkspaceHeight = 220,
+}: TerminalProps) {
+	const [height, setHeight] = useState(defaultHeight);
+	const [tabs, setTabs] = useState<TerminalTab[]>([
+		{ id: createTabId(), title: "Terminal 1" },
+	]);
+	const [activeTabId, setActiveTabId] = useState(tabs[0].id);
+
+	const handleResizeStart = useCallback(
+		(event: PointerEvent<HTMLHRElement>) => {
+			const startY = event.clientY;
+			const startHeight = height;
+			const resizeMaxHeight = Math.min(
+				maxHeight,
+				window.innerHeight - minWorkspaceHeight,
+			);
+			const previousUserSelect = document.body.style.userSelect;
+
+			event.preventDefault();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			document.body.style.userSelect = "none";
+
+			const handleMove = (moveEvent: globalThis.PointerEvent) => {
+				setHeight(
+					clamp(
+						startHeight + startY - moveEvent.clientY,
+						minHeight,
+						resizeMaxHeight,
+					),
+				);
+			};
+
+			const stopResize = () => {
+				document.body.style.userSelect = previousUserSelect;
+				window.removeEventListener("pointermove", handleMove);
+				window.removeEventListener("pointerup", stopResize);
+				window.removeEventListener("pointercancel", stopResize);
+			};
+
+			window.addEventListener("pointermove", handleMove);
+			window.addEventListener("pointerup", stopResize);
+			window.addEventListener("pointercancel", stopResize);
+		},
+		[height, maxHeight, minHeight, minWorkspaceHeight],
+	);
+
+	const addTab = () => {
+		const id = createTabId();
+
+		setTabs((currentTabs) => [
+			...currentTabs,
+			{ id, title: `Terminal ${currentTabs.length + 1}` },
+		]);
+		setActiveTabId(id);
+	};
+
+	const closeTab = (tabId: string) => {
+		setTabs((currentTabs) => {
+			if (currentTabs.length === 1) {
+				return currentTabs;
+			}
+
+			const closingIndex = currentTabs.findIndex((tab) => tab.id === tabId);
+			const nextTabs = currentTabs.filter((tab) => tab.id !== tabId);
+
+			if (activeTabId === tabId) {
+				const nextActiveTab = nextTabs[Math.max(0, closingIndex - 1)];
+
+				setActiveTabId(nextActiveTab.id);
+			}
+
+			return nextTabs;
+		});
+	};
+
+	return (
+		<section className={cn("contents", className)}>
+			<hr
+				aria-label="Resize terminal"
+				aria-orientation="horizontal"
+				aria-valuemax={maxHeight}
+				aria-valuemin={minHeight}
+				aria-valuenow={height}
+				className="relative m-0 h-1.5 shrink-0 cursor-row-resize border-0 bg-border/70 outline-none hover:bg-ring/35 focus-visible:bg-ring/45"
+				onPointerDown={handleResizeStart}
+				tabIndex={0}
+			/>
+
+			<section
+				className="flex min-h-0 shrink-0 flex-col border-t bg-background"
+				style={{ height }}
+			>
+				<div className="flex h-9v items-center gap-1 border-b bg-muted/40 px-2">
+					<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto select-none">
+						{tabs.map((tab) => (
+							<div
+								className={cn(
+									"flex h-7 max-w-44 shrink-0 items-center rounded-md text-xs outline-none transition-colors",
+									tab.id === activeTabId
+										? "bg-background text-foreground shadow-sm"
+										: "text-muted-foreground hover:bg-background/70 hover:text-foreground",
+								)}
+								key={tab.id}
+							>
+								<button
+									className="min-w-0 flex-1 truncate px-2 text-left outline-none"
+									onClick={() => setActiveTabId(tab.id)}
+									type="button"
+								>
+									{tab.title}
+								</button>
+								<button
+									aria-label={`Close ${tab.title}`}
+									className={cn(
+										"mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-sm hover:bg-muted",
+										tabs.length === 1 && "cursor-not-allowed opacity-40",
+									)}
+									disabled={tabs.length === 1}
+									onClick={(event) => {
+										event.stopPropagation();
+										closeTab(tab.id);
+									}}
+									type="button"
+								>
+									<X className="size-3" />
+								</button>
+							</div>
+						))}
+						<Button
+							aria-label="New terminal"
+							className="shrink-0"
+							onClick={addTab}
+							size="icon-xs"
+							type="button"
+							variant="ghost"
+						>
+							<Plus className="size-3.5" />
+						</Button>
+					</div>
+				</div>
+				<div className="relative min-h-0 flex-1 overflow-hidden">
+					{tabs.map((tab) => (
+						<BaseTerminal
+							active={tab.id === activeTabId}
+							className={cn(
+								"absolute inset-0",
+								tab.id !== activeTabId && "pointer-events-none invisible",
+							)}
+							key={tab.id}
+						/>
+					))}
+				</div>
+			</section>
+		</section>
+	);
+}
+
+export default Terminal;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..75b8c3d
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
new file mode 100644
index 0000000..e9d9ec0
--- /dev/null
+++ b/src/components/ui/menubar.tsx
@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/src/lib/git.ts b/src/lib/git.ts
new file mode 100644
index 0000000..d4863c6
--- /dev/null
+++ b/src/lib/git.ts
@@ -0,0 +1,135 @@
+import type { GitStatusEntry as TreeGitStatusEntry } from "@pierre/trees";
+
+export type GitFileStatus =
+	| "added"
+	| "deleted"
+	| "ignored"
+	| "modified"
+	| "renamed"
+	| "untracked";
+
+export type GitStatusEntry = {
+	path: string;
+	status: GitFileStatus;
+	indexStatus: string;
+	worktreeStatus: string;
+	oldPath?: string | null;
+};
+
+export type GitStatusSummary = {
+	staged: number;
+	unstaged: number;
+	untracked: number;
+};
+
+export type GitRecentCommit = {
+	hash: string;
+	subject: string;
+	author: string;
+	relativeTime: string;
+};
+
+export type GitRepositoryStatus = {
+	rootPath: string;
+	branch: string;
+	head?: string | null;
+	ahead: number;
+	behind: number;
+	entries: GitStatusEntry[];
+	summary: GitStatusSummary;
+	recentCommits: GitRecentCommit[];
+};
+
+type Invoke = <T>(
+	command: string,
+	args?: Record<string, unknown>,
+) => Promise<T>;
+
+async function getTauriInvoke() {
+	const { invoke, isTauri } = await import("@tauri-apps/api/core");
+
+	if (!isTauri()) {
+		throw new Error("Git client only works inside Tauri.");
+	}
+
+	return invoke as Invoke;
+}
+
+export async function openRepositoryFolder() {
+	const { open } = await import("@tauri-apps/plugin-dialog");
+	const selected = await open({
+		directory: true,
+		multiple: false,
+		title: "Open Git Repository",
+	});
+
+	return typeof selected === "string" ? selected : null;
+}
+
+export async function loadRepositoryStatus(repoPath: string) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<GitRepositoryStatus>("git_repository_status", { repoPath });
+}
+
+export async function loadFileDiff(repoPath: string, filePath?: string | null) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<string>("git_diff_file", { repoPath, filePath });
+}
+
+export async function stagePaths(repoPath: string, paths?: readonly string[]) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_stage_paths", { repoPath, paths });
+}
+
+export async function unstagePaths(
+	repoPath: string,
+	paths?: readonly string[],
+) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_unstage_paths", { repoPath, paths });
+}
+
+export async function discardPaths(repoPath: string, paths: readonly string[]) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_discard_paths", { repoPath, paths });
+}
+
+export async function commitChanges(repoPath: string, message: string) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_commit", { repoPath, message });
+}
+
+export async function openRepositoryFile(repoPath: string, path: string) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_open_path", {
+		repoPath,
+		filePath: path,
+		reveal: false,
+	});
+}
+
+export async function revealRepositoryFile(repoPath: string, path: string) {
+	const invoke = await getTauriInvoke();
+
+	return invoke<void>("git_open_path", {
+		repoPath,
+		filePath: path,
+		reveal: true,
+	});
+}
+
+export function toTreeGitStatus(
+	entries: readonly GitStatusEntry[],
+): TreeGitStatusEntry[] {
+	return entries.map((entry) => ({
+		path: entry.path,
+		status: entry.status,
+	}));
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
new file mode 100644
index 0000000..13bba59
--- /dev/null
+++ b/src/routeTree.gen.ts
@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SettingsRouteImport } from './routes/settings'
+import { Route as IndexRouteImport } from './routes/index'
+
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/settings'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/settings'
+  id: '__root__' | '/' | '/settings'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SettingsRoute: typeof SettingsRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SettingsRoute: SettingsRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..e7b1c4d
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,19 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
new file mode 100644
index 0000000..7d9f8ee
--- /dev/null
+++ b/src/routes/__root.tsx
@@ -0,0 +1,58 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import appCss from '../styles.css?url'
+import Header from '#/components/header'
+
+const THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        <HeadContent />
+      </head>
+      <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
+        <Header />
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..25b8151
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { GitClient } from "#/components/gitClient";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+	return (
+		<main className="flex h-[calc(100vh-2.5rem)] w-screen min-w-0 flex-row overflow-hidden">
+			<GitClient />
+		</main>
+	);
+}
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
new file mode 100644
index 0000000..41456d0
--- /dev/null
+++ b/src/routes/settings.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/settings')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/settings"!</div>
+}
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..797e991
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,168 @@
+@import "@wterm/react/css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+
+@custom-variant dark (&:is(.dark *));
+@plugin "@tailwindcss/typography";
+
+.wterm.theme-kanade {
+  --term-bg: #fcf8f9;
+  --term-fg: #191017;
+  --term-cursor: #301d23;
+
+  --term-color-0: #5c5f77;
+  --term-color-1: #d20f39;
+  --term-color-2: #40a02b;
+  --term-color-3: #df8e1d;
+  --term-color-4: #1e66f5;
+  --term-color-5: #ea76cb;
+  --term-color-6: #179299;
+  --term-color-7: #acb0be;
+  --term-color-8: #6c6f85;
+  --term-color-9: #d20f39;
+  --term-color-10: #40a02b;
+  --term-color-11: #df8e1d;
+  --term-color-12: #1e66f5;
+  --term-color-13: #ea76cb;
+  --term-color-14: #179299;
+  --term-color-15: #bcc0cc;
+
+  --term-font-family: "JetBrainsMono Nerd Font Mono", monospace;
+}
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: 'Inter Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+
+:root {
+  --background: hsl(340 40% 98%);
+  --foreground: hsl(315 21% 8%);
+  --card: hsl(340 40% 98%);
+  --card-foreground: hsl(315 21% 8%);
+  --popover: hsl(340 40% 98%);
+  --popover-foreground: hsl(315 21% 8%);
+  --primary: hsl(340 25% 15%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(340 25% 95%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --muted: hsl(340 20% 95%);
+  --muted-foreground: hsl(340 10% 60%);
+  --accent: hsl(340 25% 94%);
+  --accent-foreground: hsl(240 5.9% 10%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(340 25% 90%);
+  --input: hsl(340 25% 90%);
+  --ring: hsl(315 21% 8%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.625rem;
+  --sidebar-background: hsl(340 25% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(340 20% 95%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(340 20% 90%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  --scrollbar: hsla(340 10% 60% / 0.5);
+  --scrollbar-hover: hsla(340 10% 60% / 0.8);
+  --sidebar: hsl(0 0% 98%);
+}
+
+.dark {
+  --background: hsl(315 21% 8%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(315 21% 8%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(315 21% 8%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(240 5.9% 10%);
+  --secondary: hsl(296, 18%, 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(296, 18%, 15%);
+  --muted-foreground: hsl(240 5% 68%);
+  --accent: hsl(296, 18%, 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(296, 18%, 15%);
+  --input: hsl(296, 18%, 15%);
+  --ring: hsl(240 4.9% 83.9%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(296, 18%, 15%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(296, 18%, 15%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --sidebar: hsl(240 5.9% 10%);
+
+  --scrollbar: hsla(340 10% 60% / 0.5);
+  --scrollbar-hover: hsla(340 10% 60% / 0.8);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..14525f4
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "paths": {
+      "#/*": ["./src/*"],
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  }
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/tsr.config.json b/tsr.config.json
new file mode 100644
index 0000000..8b6b6ed
--- /dev/null
+++ b/tsr.config.json
@@ -0,0 +1,3 @@
+{
+  "target": "react"
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b0f53d3
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+const config = defineConfig({
+  resolve: { tsconfigPaths: true },
+  plugins: [devtools(), tailwindcss(), tanstackStart(), viteReact()],
+})
+
+export default config