@rexvane/piweb 0.3.1

package/src/components/FullDiff.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+/**
+ * 整文件行内 diff（文件查看器「变更」模式）：全文都在，改动行红绿穿插在原位；
+ * 未改动的长段可折成「··· n 行未改动 ···」；双列行号；右侧刻度条标出改动位置；上一处 / 下一处跳转；
+ * 行数多时窗口化渲染，只对可见行做语法高亮。
+ */
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type Ref } from "react";
+import type { DiffLine } from "@/components/DiffView";
+import { useI18n } from "@/i18n";
+import { highlightLine } from "@/lib/highlight";
+
+const ROW_H = 20;
+const OVERSCAN = 20;
+const CONTEXT = 3;
+const HIGHLIGHT_MAX_ROWS = 6000;
+
+type Row = { kind: "line"; line: DiffLine; index: number } | { kind: "fold"; from: number; count: number };
+
+/** 行号栏宽度用的最大行号；不能用 Math.max(...spread)，十几万行的 patch 会把实参展开撑爆调用栈 */
+export function maxLineNumber(lines: DiffLine[]): number {
+	let max = 1;
+	for (const l of lines) {
+		const n = l.new ?? l.old ?? 0;
+		if (n > max) max = n;
+	}
+	return max;
+}
+
+export interface FullDiffHandle {
+	nextChange(): void;
+	prevChange(): void;
+}
+
+function buildRows(lines: DiffLine[], folded: boolean, unfolded: Set<number>): { rows: Row[]; blocks: number[] } {
+	const rows: Row[] = [];
+	const blocks: number[] = [];
+	const isChange = (l: DiffLine) => l.kind === "add" || l.kind === "del";
+	// 首尾改动行的位置只算一次：原来每个未改动段都扫一遍前后缀，大文件上是 O(行数 × 段数)
+	let firstChange = -1;
+	let lastChange = -1;
+	for (let k = 0; k < lines.length; k += 1) {
+		if (!isChange(lines[k])) continue;
+		if (firstChange < 0) firstChange = k;
+		lastChange = k;
+	}
+	let i = 0;
+	let prevChange = false;
+	while (i < lines.length) {
+		const l = lines[i];
+		if (l.kind === "hunk" || l.kind === "file") {
+			i += 1;
+			continue;
+		}
+		if (isChange(l)) {
+			if (!prevChange) blocks.push(rows.length);
+			rows.push({ kind: "line", line: l, index: i });
+			prevChange = true;
+			i += 1;
+			continue;
+		}
+		prevChange = false;
+		// 一段连续未改动行
+		let j = i;
+		while (j < lines.length && lines[j].kind === "ctx") j += 1;
+		const runLen = j - i;
+		const atStart = firstChange < 0 || firstChange >= i;
+		const atEnd = lastChange < j;
+		const keepHead = atStart ? 0 : CONTEXT;
+		const keepTail = atEnd ? 0 : CONTEXT;
+		if (!folded || unfolded.has(i) || runLen <= keepHead + keepTail + 2) {
+			for (let k = i; k < j; k += 1) rows.push({ kind: "line", line: lines[k], index: k });
+		} else {
+			for (let k = i; k < i + keepHead; k += 1) rows.push({ kind: "line", line: lines[k], index: k });
+			rows.push({ kind: "fold", from: i, count: runLen - keepHead - keepTail });
+			for (let k = j - keepTail; k < j; k += 1) rows.push({ kind: "line", line: lines[k], index: k });
+		}
+		i = j;
+	}
+	return { rows, blocks };
+}
+
+export const FullDiff = memo(function FullDiff({
+	lines,
+	language,
+	folded,
+	handle,
+	initialChange,
+}: {
+	lines: DiffLine[];
+	language?: string;
+	folded: boolean;
+	handle?: Ref<FullDiffHandle>;
+	/** 首次渲染滚到第一处改动 */
+	initialChange?: boolean;
+}) {
+	const { t } = useI18n();
+	const [unfolded, setUnfolded] = useState<Set<number>>(() => new Set());
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [viewport, setViewport] = useState({ top: 0, height: 800 });
+	const [current, setCurrent] = useState(-1);
+	const cache = useRef(new Map<string, string | null>());
+
+	useEffect(() => setUnfolded(new Set()), [lines]);
+	const { rows, blocks } = useMemo(() => buildRows(lines, folded, unfolded), [lines, folded, unfolded]);
+	const width = useMemo(() => String(maxLineNumber(lines)).length, [lines]);
+	const canHighlight = Boolean(language) && rows.length <= HIGHLIGHT_MAX_ROWS;
+
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const update = () => setViewport({ top: el.scrollTop, height: el.clientHeight });
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => {
+			el.removeEventListener("scroll", update);
+			ro.disconnect();
+		};
+	}, []);
+
+	const scrollToBlock = useCallback(
+		(b: number) => {
+			const el = scrollRef.current;
+			const rowIndex = blocks[b];
+			if (!el || rowIndex === undefined) return;
+			setCurrent(b);
+			el.scrollTo({ top: Math.max(0, rowIndex * ROW_H - el.clientHeight / 3), behavior: "smooth" });
+		},
+		[blocks],
+	);
+	useImperativeHandle(handle, () => ({
+		nextChange: () => scrollToBlock(Math.min(blocks.length - 1, current + 1)),
+		prevChange: () => scrollToBlock(Math.max(0, current - 1)),
+	}), [blocks.length, current, scrollToBlock]);
+
+	// 首次：滚到第一处改动
+	const initialDone = useRef(false);
+	useEffect(() => {
+		initialDone.current = false;
+	}, [lines]);
+	useEffect(() => {
+		if (initialDone.current || !initialChange || !blocks.length) return;
+		initialDone.current = true;
+		const el = scrollRef.current;
+		if (!el) return;
+		el.scrollTop = Math.max(0, blocks[0] * ROW_H - el.clientHeight / 3);
+		setCurrent(0);
+	}, [blocks, initialChange, rows]);
+
+	const start = Math.max(0, Math.floor(viewport.top / ROW_H) - OVERSCAN);
+	const end = Math.min(rows.length, Math.ceil((viewport.top + viewport.height) / ROW_H) + OVERSCAN);
+	const html = (text: string): string | null => {
+		if (!canHighlight || !text.trim()) return null;
+		const k = text;
+		const cached = cache.current.get(k);
+		if (cached !== undefined) return cached;
+		const h = highlightLine(text, language!);
+		if (cache.current.size > 5000) cache.current.clear();
+		cache.current.set(k, h);
+		return h;
+	};
+
+	return (
+		<div className="pw-fdiff relative min-h-0 flex-1">
+			<div ref={scrollRef} className="pw-fdiff-scroll h-full overflow-auto">
+				<div style={{ height: rows.length * ROW_H, position: "relative", minWidth: "100%" }}>
+					{rows.slice(start, end).map((row, i) => {
+						const top = (start + i) * ROW_H;
+						if (row.kind === "fold") {
+							return (
+								<button
+									key={`f${row.from}`}
+									type="button"
+									className="pw-fdiff-fold"
+									style={{ top }}
+									onClick={() => setUnfolded((s) => new Set(s).add(row.from))}
+								>
+									{t.viewerFoldedLines.replace("{n}", String(row.count))}
+								</button>
+							);
+						}
+						const l = row.line;
+						const h = html(l.text);
+						return (
+							<div key={row.index} className="pw-fdiff-row" data-kind={l.kind} style={{ top }}>
+								<span className="pw-fdiff-gutter" style={{ width: `${width * 2 + 3}ch` }}>
+									<span>{l.kind === "add" ? "" : String(l.old ?? "").padStart(width)}</span>
+									<span>{l.kind === "del" ? "" : String(l.new ?? "").padStart(width)}</span>
+								</span>
+								<span className="pw-fdiff-sign">{l.kind === "add" ? "+" : l.kind === "del" ? "−" : " "}</span>
+								<span className="pw-fdiff-text hljs">{h ? <span dangerouslySetInnerHTML={{ __html: h }} /> : l.text}</span>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+			{/* 改动位置刻度条 */}
+			{rows.length > 0 && blocks.length > 0 && (
+				<div className="pw-fdiff-ticks" aria-hidden>
+					{blocks.map((rowIndex, b) => {
+						const line = rows[rowIndex];
+						const kind = line?.kind === "line" ? line.line.kind : "add";
+						return (
+							<span
+								key={b}
+								className="pw-fdiff-tick"
+								data-kind={kind}
+								data-current={b === current || undefined}
+								style={{ top: `${(rowIndex / rows.length) * 100}%` }}
+								onClick={() => scrollToBlock(b)}
+							/>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+});

package/src/components/GitPanel.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+/**
+ * Git 面板（详情栏）：分支 / 上游 / ahead-behind、按状态分组的变更文件、最近提交；
+ * 点文件看差异（暂存 / 工作区 / 未跟踪整文件），点提交看该次提交的内容。
+ * 只读——提交、推送走对话让 pi 做（「让 pi 提交」会把请求填进输入框）。
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DiffView, diffStats, parseUnifiedDiff } from "@/components/DiffView";
+import { languageForPath } from "@/lib/highlight";
+import { IconChevronLeft14, IconCloseOutline14, IconFileOutline16, IconGitOutline16, IconRefreshOutline14 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+
+interface GitFileEntry {
+	path: string;
+	indexStatus: string;
+	workStatus: string;
+	kind: "modified" | "added" | "deleted" | "renamed" | "untracked" | "conflict";
+}
+
+interface GitCommit {
+	hash: string;
+	subject: string;
+	author: string;
+	relative: string;
+}
+
+interface GitInfo {
+	available: boolean;
+	isRepo: boolean;
+	root: string | null;
+	branch: string | null;
+	upstream: string | null;
+	ahead: number;
+	behind: number;
+	detached: boolean;
+	files: GitFileEntry[];
+	commits: GitCommit[];
+	statusError?: string;
+}
+
+interface DiffResult {
+	patch: string;
+	truncated: boolean;
+	binary: boolean;
+	title?: string;
+}
+
+type View = { kind: "file"; path: string; mode: "staged" | "worktree" | "untracked"; label: string } | { kind: "commit"; hash: string };
+
+const KIND_COLOR: Record<GitFileEntry["kind"], string> = {
+	modified: "var(--dsw-warn)",
+	added: "var(--dsw-success)",
+	deleted: "var(--dsw-danger)",
+	renamed: "var(--dsw-accent)",
+	untracked: "var(--dsw-label-caption)",
+	conflict: "var(--dsw-danger)",
+};
+
+export function GitPanel({
+	cwd,
+	onClose,
+	refreshKey = 0,
+	onAskCommit,
+	onOpenFile,
+}: {
+	cwd: string;
+	onClose: () => void;
+	/** 外部触发刷新（回合结束 / pi 改了文件） */
+	refreshKey?: number;
+	/** 把「请提交当前变更」填进输入框 */
+	onAskCommit?: () => void;
+	/** 在本机编辑器打开（相对仓库根的路径） */
+	onOpenFile?: (absPath: string) => void;
+}) {
+	const { t } = useI18n();
+	const [info, setInfo] = useState<GitInfo | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [statusError, setStatusError] = useState("");
+	const [diffError, setDiffError] = useState("");
+	const [view, setView] = useState<View | null>(null);
+	const [diff, setDiff] = useState<DiffResult | null>(null);
+	const [diffLoading, setDiffLoading] = useState(false);
+	const statusRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
+	const diffRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
+
+	const load = useCallback(async () => {
+		statusRequest.current.controller?.abort();
+		const controller = new AbortController();
+		const version = ++statusRequest.current.version;
+		statusRequest.current.controller = controller;
+		const isCurrent = () => !controller.signal.aborted && statusRequest.current.version === version;
+		if (!cwd) return;
+		setLoading(true);
+		setStatusError("");
+		try {
+			const r = await fetch(`/api/git?cwd=${encodeURIComponent(cwd)}`, { signal: controller.signal });
+			const j = await r.json();
+			if (!r.ok || !j.success) throw new Error(j.error || "failed to load git status");
+			if (isCurrent()) setInfo(j.data as GitInfo);
+		} catch (e) {
+			if (isCurrent()) setStatusError(e instanceof Error ? e.message : "failed to load git status");
+		} finally {
+			if (isCurrent()) setLoading(false);
+		}
+	}, [cwd]);
+
+	useEffect(() => {
+		setInfo(null);
+		setView(null);
+		setDiff(null);
+		setDiffError("");
+		setStatusError("");
+		setLoading(false);
+		return () => {
+			statusRequest.current.controller?.abort();
+			statusRequest.current.version += 1;
+			diffRequest.current.controller?.abort();
+			diffRequest.current.version += 1;
+		};
+	}, [cwd]);
+	useEffect(() => { void load(); }, [load, refreshKey]);
+
+	const loadDiff = useCallback(async (target: View) => {
+		diffRequest.current.controller?.abort();
+		const controller = new AbortController();
+		const version = ++diffRequest.current.version;
+		diffRequest.current.controller = controller;
+		const isCurrent = () => !controller.signal.aborted && diffRequest.current.version === version;
+		setDiffLoading(true);
+		setDiff(null);
+		setDiffError("");
+		try {
+			const url = target.kind === "file"
+				? `/api/git?cwd=${encodeURIComponent(cwd)}&diff=${encodeURIComponent(target.path)}&mode=${target.mode}`
+				: `/api/git?cwd=${encodeURIComponent(cwd)}&show=${encodeURIComponent(target.hash)}`;
+			const r = await fetch(url, { signal: controller.signal });
+			const j = await r.json();
+			if (!r.ok || !j.success) throw new Error(j.error || "failed to load diff");
+			if (isCurrent()) setDiff(j.data as DiffResult);
+		} catch (e) {
+			if (isCurrent()) setDiffError(e instanceof Error ? e.message : "failed to load diff");
+		} finally {
+			if (isCurrent()) setDiffLoading(false);
+		}
+	}, [cwd]);
+
+	useEffect(() => {
+		setDiff(null);
+		setDiffError("");
+		setDiffLoading(false);
+		if (view) void loadDiff(view);
+		return () => {
+			diffRequest.current.controller?.abort();
+			diffRequest.current.version += 1;
+		};
+	}, [view, loadDiff, refreshKey]);
+	const changeView = (next: View | null) => {
+		diffRequest.current.controller?.abort();
+		diffRequest.current.version += 1;
+		setDiff(null);
+		setDiffError("");
+		setView(next);
+	};
+	const error = view ? diffError : statusError || info?.statusError || "";
+
+	const parsed = useMemo(() => (diff?.patch ? parseUnifiedDiff(diff.patch) : null), [diff]);
+	const stats = parsed ? diffStats(parsed) : null;
+
+	const conflicts = info?.files.filter((f) => f.kind === "conflict") ?? [];
+	const staged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.indexStatus !== " ") ?? [];
+	const unstaged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.workStatus !== " ") ?? [];
+	const untracked = info?.files.filter((f) => f.kind === "untracked") ?? [];
+
+	const openFile = (f: GitFileEntry, mode: "staged" | "worktree" | "untracked", label: string) => changeView({ kind: "file", path: f.path, mode, label });
+
+	const headerTitle = view
+		? view.kind === "file"
+			? view.path.split("/").pop() ?? view.path
+			: diff?.title?.split("\n")[0] ?? view.hash
+		: t.gitPanel;
+
+	return (
+		<div className="flex h-full min-h-0 flex-col p-4">
+			<div className="mb-3 flex items-center gap-2">
+				{view ? (
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.gitBack} onClick={() => changeView(null)}>
+						<IconChevronLeft14 size={13} />
+					</button>
+				) : (
+					<IconGitOutline16 size={15} style={{ flex: "none" }} />
+				)}
+				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }} title={view?.kind === "file" ? view.path : undefined}>
+					{headerTitle}
+				</span>
+				{view?.kind === "file" && onOpenFile && info?.root && (
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.fileOpenEditor} onClick={() => onOpenFile(`${info.root}/${view.path}`)}>
+						<IconFileOutline16 size={13} />
+					</button>
+				)}
+				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.panelRefresh} onClick={() => (view ? void loadDiff(view) : void load())}>
+					<IconRefreshOutline14 size={13} />
+				</button>
+				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} onClick={onClose}>
+					<IconCloseOutline14 size={13} />
+				</button>
+			</div>
+
+			{error && (
+				<div className="mb-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-danger)", color: "white" }} role="alert">
+					{!view && <div>{t.gitStatusUnknown}</div>}
+					{error}
+				</div>
+			)}
+
+			<div className="min-h-0 flex-1 overflow-y-auto">
+				{/* ---------- 差异视图 ---------- */}
+				{view && (
+					<div>
+						<div className="mb-2 flex flex-wrap items-center gap-2" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+							{view.kind === "file" ? <span>{view.label}</span> : diff?.title?.split("\n")[1] ? <span>{diff.title.split("\n")[1]}</span> : null}
+							{stats && (
+								<span style={{ fontFamily: "var(--font-mono)" }}>
+									<span style={{ color: "var(--dsw-success)" }}>+{stats.add}</span> <span style={{ color: "var(--dsw-danger)" }}>−{stats.del}</span>
+								</span>
+							)}
+							{diff?.truncated && <span style={{ color: "var(--dsw-warn)" }}>{t.gitDiffTruncated}</span>}
+						</div>
+						{diffLoading && !diff && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
+						{diff?.binary && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitBinary}</div>}
+						{diff && !diff.binary && !parsed && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitDiffEmpty}</div>}
+						{parsed && (
+							<div className="overflow-x-auto rounded-xl px-2 py-1.5" style={{ background: "var(--dsw-hover)" }}>
+								<DiffView lines={parsed} language={view?.kind === "file" ? languageForPath(view.path) : undefined} />
+							</div>
+						)}
+					</div>
+				)}
+
+				{/* ---------- 状态列表 ---------- */}
+				{!view && loading && !info && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
+				{!view && !loading && info && !info.available && (
+					<div style={{ fontSize: 12.5, color: "var(--dsw-danger)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitUnavailable}</div>
+				)}
+				{!view && !loading && info && info.available && !info.isRepo && (
+					<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitNotRepo}</div>
+				)}
+				{!view && info?.isRepo && (
+					<div className="flex flex-col gap-4">
+						{/* 分支行 */}
+						<div className="flex flex-wrap items-center gap-2" style={{ fontSize: 12.5 }}>
+							<span
+								className="flex items-center gap-1.5 rounded-full px-2.5 py-1"
+								style={{ background: "var(--dsw-accent-soft)", color: "var(--dsw-accent)", fontWeight: 500 }}
+							>
+								<IconGitOutline16 size={12} />
+								{info.detached ? t.gitDetached : info.branch ?? "—"}
+							</span>
+							{info.ahead > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↑ {t.gitAhead.replace("{n}", String(info.ahead))}</span>}
+							{info.behind > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↓ {t.gitBehind.replace("{n}", String(info.behind))}</span>}
+							<span className="min-w-0 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={info.upstream ?? undefined}>
+								{info.upstream ? t.gitUpstream.replace("{name}", info.upstream) : info.detached ? "" : t.gitNoUpstream}
+							</span>
+						</div>
+
+						{/* 让 pi 提交 */}
+						{!error && info.files.length > 0 && onAskCommit && (
+							<button
+								type="button"
+								className="btn-outline self-start"
+								style={{ height: 28, padding: "0 12px", fontSize: 12 }}
+								onClick={onAskCommit}
+								title={t.gitAskCommitPrompt}
+							>
+								{t.gitAskCommit}
+							</button>
+						)}
+
+						{/* 变更文件 */}
+						{error ? null : info.files.length === 0 ? (
+							<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.gitNoChanges}</div>
+						) : (
+							[
+								{ label: t.gitConflict, list: conflicts, mode: "worktree" as const },
+								{ label: t.gitStaged, list: staged, mode: "staged" as const },
+								{ label: t.gitUnstaged, list: unstaged, mode: "worktree" as const },
+								{ label: t.gitUntracked, list: untracked, mode: "untracked" as const },
+							].map(
+								(group) =>
+									group.list.length > 0 && (
+										<div key={group.label}>
+											<div className="mb-1 flex items-center gap-2" style={{ fontSize: 11.5, color: group.mode === "worktree" && group.label === t.gitConflict ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
+												<span style={{ fontWeight: 600 }}>{group.label}</span>
+												<span>{group.list.length}</span>
+											</div>
+											<div className="flex flex-col">
+												{group.list.map((f) => (
+													<button
+														key={`${group.label}:${f.path}`}
+														type="button"
+														className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors"
+														title={f.path}
+														onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+														onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+														onClick={() => openFile(f, group.mode, group.mode === "staged" ? t.gitStagedDiff : group.mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
+													>
+														<span
+															className="flex-none rounded px-1 text-center"
+															style={{ minWidth: 16, fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: KIND_COLOR[f.kind], background: "var(--dsw-hover)" }}
+														>
+															{f.kind === "untracked" ? "?" : f.kind === "conflict" ? "!" : group.mode === "staged" ? f.indexStatus : f.workStatus !== " " ? f.workStatus : f.indexStatus}
+														</span>
+														<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--dsw-label-secondary)" }}>
+															{f.path}
+														</span>
+													</button>
+												))}
+											</div>
+										</div>
+									),
+							)
+						)}
+
+						{/* 最近提交 */}
+						<div className="hairline-t pt-3">
+							<div className="mb-1" style={{ fontSize: 11.5, fontWeight: 600, color: "var(--dsw-label-caption)" }}>{t.gitRecentCommits}</div>
+							{info.commits.length === 0 ? (
+								<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitNoCommits}</div>
+							) : (
+								<div className="flex flex-col">
+									{info.commits.map((c) => (
+										<button
+											key={c.hash}
+											type="button"
+											className="flex w-full flex-col items-stretch rounded-lg px-2 py-1 text-left transition-colors"
+											onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+											onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+											onClick={() => changeView({ kind: "commit", hash: c.hash })}
+										>
+											<span className="flex items-baseline gap-2">
+												<span className="flex-none" style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--dsw-accent)" }}>{c.hash}</span>
+												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, color: "var(--dsw-label-secondary)" }} title={c.subject}>{c.subject}</span>
+											</span>
+											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", paddingLeft: 0 }}>
+												{c.author} · {c.relative}
+											</span>
+										</button>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}