@rexvane/piweb 0.3.18 → 0.3.20

package/src/components/SettingsPanel.tsx

@@ -31,16 +31,17 @@ import {
 	type BuiltinProviderSetup,
 	type CustomProviderSetup,
 } from "@/components/ProviderSetupModal";
-import { SessionImportSection } from "@/components/SessionImportSection";
+import { RemoteSection } from "@/components/RemoteSection";
 import { useI18n } from "@/i18n";
 import { applyPebrelTheme, loadPebrelTheme, loadThemeMode, type PebrelTheme, type ThemeMode } from "@/lib/theme";
+import { applyFontChoice, CUSTOM_PREFIX, FONT_PRESETS, loadFontChoice } from "@/lib/font";
 import { modelDraftFromConfig, serializeProviderDraft, validateModelDrafts, type ModelDraft } from "@/lib/model-draft";
 import { customApiOptions } from "@/lib/provider-display";
 import { quotaWindowKind, supportsUsageProbe, type BalanceAmount, type BalanceDetailKey, type ProviderUsage, type QuotaWindow, type XaiUsage } from "@/lib/provider-usage";
 import type { ProviderView } from "@/lib/models-service";
 import type { ToolPreset } from "@/lib/types";
 
-type Section = "general" | "models" | "tools" | "skills" | "plugins" | "import";
+type Section = "general" | "models" | "tools" | "skills" | "plugins" | "remote";
 
 export function SettingsPanel({
 	open,
@@ -84,7 +85,7 @@ export function SettingsPanel({
 		{ id: "tools", label: t.toolsSection, icon: <IconAgentPresetOutline16 size={15} /> },
 		{ id: "plugins", label: t.setPlugins, icon: <IconPluginOutline16 size={15} /> },
 		{ id: "skills", label: t.setSkills, icon: <IconSkillOutline16 size={15} /> },
-		{ id: "import", label: t.importSessions, icon: <IconDownloadOutline16 size={15} /> },
+		{ id: "remote", label: t.setRemote, icon: <IconShieldOutline16 size={15} /> },
 	];
 
 	return (
@@ -151,7 +152,7 @@ export function SettingsPanel({
 						{section === "skills" && <SkillsSection cwd={cwd} onOpenFileContent={onOpenFileContent} />}
 						{section === "tools" && <ToolsSection toolPreset={toolPreset} onToolPresetChange={onToolPresetChange} tools={tools} onSetTools={onSetTools} />}
 						{section === "plugins" && <PluginsSection cwd={cwd} />}
-						{section === "import" && <SessionImportSection cwd={cwd} />}
+						{section === "remote" && <RemoteSection />}
 					</div>
 				</div>
 			</div>
@@ -174,8 +175,6 @@ function GeneralSection({
 	const [fontSize, setFontSize] = useState(14);
 	const [chatFontSize, setChatFontSize] = useState(14);
 	const [enterBehavior, setEnterBehavior] = useState<EnterBehavior>("steer");
-	const [trust, setTrust] = useState<"ask" | "always" | "never">("ask");
-	const [trustLoaded, setTrustLoaded] = useState(false);
 	const [piSettings, setPiSettings] = useState<{ compaction: { enabled: boolean; reserveTokens: number; keepRecentTokens: number }; retry: { enabled: boolean; maxRetries: number; baseDelayMs: number } } | null>(null);
 	const [versions, setVersions] = useState<{ piWeb: string; piEngine: string } | null>(null);
 	const [webAuth, setWebAuth] = useState<{ enabled: boolean; authenticated: boolean } | null>(null);
@@ -187,7 +186,6 @@ function GeneralSection({
 	const loadRemoteSettings = async () => {
 		setSettingsLoading(true);
 		setSettingsError(null);
-		setTrustLoaded(false);
 		const request = async (url: string) => {
 			const response = await fetch(url);
 			const json = await response.json();
@@ -200,10 +198,6 @@ function GeneralSection({
 			request("/api/version"),
 			request("/api/web-auth"),
 		]);
-		if (sec.status === "fulfilled") {
-			setTrust(sec.value.defaultProjectTrust);
-			setTrustLoaded(true);
-		}
 		if (ps.status === "fulfilled") {
 			setPiSettings(ps.value);
 			setNumberDrafts({
@@ -313,26 +307,6 @@ function GeneralSection({
 		/>
 	);
 
-	const pickTrust = async (v: "ask" | "always" | "never") => {
-		if (!trustLoaded || settingsSaving) return;
-		setSettingsSaving(true);
-		setSettingsError(null);
-		try {
-			const response = await fetch("/api/security", {
-				method: "PUT",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ defaultProjectTrust: v }),
-			});
-			const result = await response.json();
-			if (!response.ok || !result.success) throw new Error(result.error || "save failed");
-			setTrust(v);
-		} catch {
-			setSettingsError("save");
-		} finally {
-			setSettingsSaving(false);
-		}
-	};
-
 	const themes: { id: PebrelTheme; label: string; light: string; dark: string; accent: string }[] = [
 		{ id: "dsh", label: t.themeDsh, light: "#F9FAFB", dark: "#151517", accent: "#4176E6" },
 		{ id: "silver-steel", label: t.themeSilverSteel, light: "#F3F4F6", dark: "#1A1C24", accent: "#94A3B8" },
@@ -425,6 +399,12 @@ function GeneralSection({
 			<Row title={t.fontChatSize} desc={t.fontChatSizeDesc}>
 				<FontSizeStepper value={chatFontSize} onChange={pickChatFont} max={20} />
 			</Row>
+			<Row title={t.fontUiFamily} desc={t.fontUiFamilyDesc}>
+				<FontFamilyPicker scope="ui" />
+			</Row>
+			<Row title={t.fontMonoFamily} desc={t.fontMonoFamilyDesc}>
+				<FontFamilyPicker scope="mono" />
+			</Row>
 			<Row title={t.enterBehavior} desc={t.enterBehaviorDesc}>
 				<SelectOption
 				value={enterBehavior}
@@ -453,18 +433,6 @@ function GeneralSection({
 					{numberInput("retry", "baseDelayMs", t.baseDelayMs)}
 				</div>
 			</Row>
-			<Row title={t.securityTrust} desc={t.securityTrustDesc}>
-				<SelectOption
-				value={trust}
-				disabled={!trustLoaded || settingsLoading || settingsSaving}
-				options={[
-					{ value: "ask", label: t.trustAsk },
-					{ value: "always", label: t.trustAlways },
-					{ value: "never", label: t.trustNever },
-				]}
-				onChange={(v) => pickTrust(v as "ask" | "always" | "never")}
-			/>
-			</Row>
 			<Row title={t.versionPiweb} desc={t.versionPiwebDesc}>
 				<div className="flex items-center gap-2.5">
 					<VersionLink href="https://github.com/RexVane/PiWeb" value={versions?.piWeb} />
@@ -478,7 +446,7 @@ function GeneralSection({
 				</div>
 			</Row>
 			{webAuth?.enabled ? (
-				<Row title={t.webAuth} desc={t.webAuthOn}>
+				<Row title={t.webAuth} desc={t.webAuthTokenOn}>
 					<button
 						className="btn-outline"
 						style={{ height: 30, padding: "0 14px", fontSize: 12.5 }}
@@ -759,6 +727,79 @@ function FontSizeStepper({ value, onChange, max }: { value: number; onChange: (v
 	);
 }
 
+/** 字体族选择：预设下拉 + 「自定义」文本框。改动即生效并持久化。 */
+function FontFamilyPicker({ scope }: { scope: "ui" | "mono" }) {
+	const { t, lang } = useI18n();
+	const [stored, setStored] = useState<string | null>(null);
+	const [custom, setCustom] = useState("");
+	// 「自定义」是下拉自己的选中状态，不能从输入框内容推断：删空输入框不该把下拉弹回预设、
+	// 连输入框一起收掉；选回预设也不该因为输入框里还留着字而停在「自定义」
+	const [customMode, setCustomMode] = useState(false);
+
+	useEffect(() => {
+		const saved = loadFontChoice(scope);
+		const savedCustom = saved?.startsWith(CUSTOM_PREFIX) ? saved.slice(CUSTOM_PREFIX.length) : null;
+		setStored(saved);
+		setCustomMode(savedCustom !== null);
+		setCustom(savedCustom ?? "");
+	}, [scope]);
+
+	const applyCustom = (v: string) => {
+		setCustom(v);
+		const next = v.trim() ? CUSTOM_PREFIX + v.trim() : null;
+		setStored(next);
+		applyFontChoice(scope, next);
+	};
+
+	const pick = (v: string) => {
+		if (v === CUSTOM_PREFIX) {
+			setCustomMode(true);
+			// 输入框里留着上次的字体栈就接着用；空的先回落默认，等你输入
+			applyCustom(custom);
+			return;
+		}
+		setCustomMode(false);
+		setStored(v);
+		applyFontChoice(scope, v);
+	};
+
+	const selectValue = customMode ? CUSTOM_PREFIX : stored ?? FONT_PRESETS[scope][0].id;
+
+	return (
+		<div className="flex flex-col items-end gap-2">
+			<SelectOption
+				value={selectValue}
+				width={220}
+				options={[
+					...FONT_PRESETS[scope].map((p) => ({
+						value: p.id,
+						label: lang === "zh" ? p.label.zh : p.label.en,
+					})),
+					{ value: CUSTOM_PREFIX, label: t.fontCustom },
+				]}
+				onChange={pick}
+			/>
+			{customMode && (
+				<input
+					value={custom}
+					onChange={(e) => applyCustom(e.target.value)}
+					placeholder={t.fontCustomPlaceholder}
+					style={{
+						height: 30,
+						width: 260,
+						padding: "0 10px",
+						fontSize: 13,
+						background: "var(--dsw-input-major)",
+						border: "0.5px solid var(--dsw-border-l3)",
+						borderRadius: 8,
+						color: "var(--dsw-label-primary)",
+					}}
+				/>
+			)}
+		</div>
+	);
+}
+
 // ---------- Models ----------
 
 function ModelsSection() {
@@ -1234,10 +1275,12 @@ function ModelsSection() {
 					return (
 						<div key={p.id}>
 							{/* 卡片：身份/操作行在上，额度显示放在同一个框内的第二段（分隔线区分） */}
-							<div className="flex flex-col rounded-2xl px-4 py-3" style={{ border: "0.5px solid var(--dsw-border-l2)" }}>
-								<div className="flex items-center gap-3">
+							<div className="flex min-w-0 flex-col overflow-hidden rounded-2xl px-4 py-3" style={{ border: "0.5px solid var(--dsw-border-l2)" }}>
+								{/* 空间不够时整行换行,而不是把按钮压窄——中文按钮被压窄会一个字一行 */}
+								<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
 									<ProviderBrand id={p.id} name={providerName(p.id)} size={34} />
-									<div className="min-w-0 flex-1">
+									{/* 名称列给最小宽度:窄屏时宁可换行,也不要把名字压成几个像素 */}
+									<div className="min-w-[132px] flex-1">
 										<div className="truncate" style={{ fontSize: 14, fontWeight: 500 }}>{providerName(p.id)}</div>
 										<div className="truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 											{p.id}{p.baseUrl ? ` · ${p.baseUrl}` : ""}
@@ -1245,28 +1288,30 @@ function ModelsSection() {
 									</div>
 									{isCustom && (
 										<span
-											className="rounded-md px-1.5 py-0.5"
+											className="flex-none rounded-md px-1.5 py-0.5"
 											style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}
 										>
 											{t.customBadge}
 										</span>
 									)}
 									<span
-										className="inline-block h-2 w-2 rounded-full"
+										className="inline-block h-2 w-2 flex-none rounded-full"
 										style={{ background: p.authReady ? "var(--dsw-success)" : "var(--dsw-danger)" }}
 										title={p.authError || (p.authReady ? t.providerReady : t.authUnavailable)}
 									/>
 									<span
-										className="rounded-md px-1.5 py-0.5"
+										className="flex-none rounded-md px-1.5 py-0.5"
 										style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}
 									>
 										{t.credentialSource.replace("{source}", credentialSource(p))}
 									</span>
-									<button className="btn-outline" style={{ height: 28, padding: "0 12px", fontSize: 12 }} onClick={() => startEdit(p.id)}>
+									{/* 操作组整体不压缩:按钮加 whitespace-nowrap,中文标签永不竖排 */}
+									<button className="btn-outline flex-none whitespace-nowrap" style={{ height: 28, padding: "0 12px", fontSize: 12 }} onClick={() => startEdit(p.id)}>
 										{t.edit}
 									</button>
 									{p.storedAuthType === "oauth" && (
 										<button
+											className="flex-none whitespace-nowrap"
 											style={{ height: 28, padding: "0 12px", fontSize: 12, color: "var(--dsw-danger)" }}
 											onClick={async () => {
 												if (!window.confirm(t.confirmRemoveOAuth.replace("{name}", providerName(p.id)))) return;
@@ -1278,7 +1323,7 @@ function ModelsSection() {
 									)}
 									{p.authTypes?.includes("oauth") && (
 										<button
-											className="btn-outline"
+											className="btn-outline flex-none whitespace-nowrap"
 											style={{ height: 28, padding: "0 12px", fontSize: 12 }}
 											onClick={() => {
 												setOauthDone(null);
@@ -1290,7 +1335,7 @@ function ModelsSection() {
 										</button>
 									)}
 									{customIds.has(p.id) && (
-										<button style={{ fontSize: 12.5, color: "var(--dsw-danger)" }} onClick={() => deleteCustom(p.id)}>
+										<button className="flex-none whitespace-nowrap" style={{ fontSize: 12.5, color: "var(--dsw-danger)" }} onClick={() => deleteCustom(p.id)}>
 											{t.delete}
 										</button>
 									)}
@@ -1965,7 +2010,9 @@ function PluginsSection({ cwd }: { cwd: string }) {
 			return next;
 		});
 
-	const classify = (path: string): "global" | "project" | "package" => {
+	const classify = (path: string): "global" | "project" | "package" | "builtin" => {
+		// SDK 内置扩展（MCP / codemode / tool_search）没有文件路径，只有 builtin:<name>
+		if (path.startsWith("builtin:")) return "builtin";
 		const norm = path.replace(/\\/g, "/");
 		if (norm.includes("/.pi/agent/npm/") || norm.includes("/.pi/agent/git/")) return "package";
 		if (norm.includes("/.pi/agent/")) return "global";
@@ -1973,8 +2020,8 @@ function PluginsSection({ cwd }: { cwd: string }) {
 		return "project";
 	};
 
-	const scopeLabel = (s: "global" | "project" | "package") =>
-		s === "global" ? t.scopeGlobal : s === "project" ? t.scopeProject : t.scopePackage;
+	const scopeLabel = (s: "global" | "project" | "package" | "builtin") =>
+		s === "global" ? t.scopeGlobal : s === "project" ? t.scopeProject : s === "builtin" ? t.promptToolBuiltin : t.scopePackage;
 
 	// 独立扩展 = 排除随包安装的（包已在 packages 里展示）
 	const standalone = extensions.filter((e: any) => classify(e.path) !== "package");
@@ -2194,7 +2241,7 @@ function PluginsSection({ cwd }: { cwd: string }) {
 											border: "0.5px solid var(--dsw-border-l2)",
 										}}
 									>
-										<div className="flex h-11 items-center justify-between px-3.5 gap-2">
+										<div className="flex min-w-0 items-center justify-between gap-2 px-3.5" style={{ height: 44 }}>
 											<span
 												className="min-w-0 flex-1 truncate font-medium text-[var(--dsw-label-primary)] cursor-pointer select-none"
 												style={{ fontSize: 13.5 }}

package/src/components/icons.tsx

@@ -51,6 +51,11 @@ export const IconPanelLeftOutline16 = ({ size = 16, ...rest }: P) => (
 	</svg>
 );
 
+/** ic_ds_panel_right_outline_16 — 面板在右（左面板图标水平镜像）；右侧抽屉开关用 */
+export const IconPanelRightOutline16 = ({ size = 16, style, ...rest }: P) => (
+	<IconPanelLeftOutline16 size={size} style={{ transform: "scaleX(-1)", ...style }} {...rest} />
+);
+
 /** ic_ds_plus_outline_16 */
 export const IconPlusOutline16 = ({ size = 16, ...rest }: P) => (
 	<svg width={size} height={size} viewBox="0 0 16 16" fill="none" {...rest}>
@@ -108,6 +113,24 @@ export const IconBranchOutline16 = ({ size = 16, ...rest }: P) => (
 	</svg>
 );
 
+/** 引用到输入框:@ 号(描边画法,11px 小尺寸下也清晰) */
+export const IconAtOutline16 = ({ size = 16, ...rest }: P) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth={2}
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		{...rest}
+	>
+		<circle cx="12" cy="12" r="4" />
+		<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
+	</svg>
+);
+
 /** ic_ds_edit_outline_16 */
 export const IconEditOutline16 = ({ size = 16, ...rest }: P) => (
 	<svg width={size} height={size} viewBox="0 0 16 16" fill="none" {...rest}>

package/src/hooks/useGrowth.ts

@@ -2,8 +2,12 @@
 
 /**
  * useGrowth：项目生长视图的状态（每轮一个 git commit）。
- * 时间轴（拉取 + 实时 commit 去重合并）、轮次导航 / 默认跟随、范围（本轮 / 本会话累计）、
+ * 时间轴（拉取 + 实时 commit 去重合并）、轮次导航:选中某个具体轮次,不再有「跟随」这层含义、范围（本轮 / 本会话累计）、
  * 所选轮的文件与变更、当前磁盘全量目录懒加载、展开状态与新变更动画。
+ *
+ * 选中语义:selectedCommit 永远是一个具体 commit(不再用 null 表示「跟随最新」)。
+ * 新轮次到来时不动选中——用户停在他正在看的那轮;要回到最新轮由调用方显式 selectLatest()
+ * (打开面板时就是这么做的)。
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { allDirPaths, buildTree, dirsToReveal, graftLazy, type TreeNode } from "@/lib/growth-tree";
@@ -28,8 +32,8 @@ export interface GrowthApi {
 	error: string | null;
 	/** 本会话的时间轴（时间正序，不含工作区基线） */
 	rounds: GrowthEntry[];
+	/** 所选轮:永远是具体一轮;选中的 commit 不在当前列表里时回落最新一轮 */
 	selected: GrowthEntry | null;
-	following: boolean;
 	scope: GrowthScope;
 	/** 所选范围的 from/to tree（查看器取 diff 用） */
 	range: { from: string; to: string } | null;
@@ -41,8 +45,9 @@ export interface GrowthApi {
 	expanded: Set<string>;
 	/** 最新一轮刚改动的路径（入场动画） */
 	fresh: Set<string>;
-	follow(): void;
-	/** 选中某一轮（时间轴柱）；选到最后一轮等于回到跟随 */
+	/** 显式选中最新一轮(打开面板时落在最新轮);没有轮次时不动 */
+	selectLatest(): void;
+	/** 选中某一轮（时间轴柱）；选中最新一轮也只是普通选中,不再是「回到跟随」 */
 	select(commit: string): void;
 	prev(): void;
 	next(): void;
@@ -239,7 +244,7 @@ export function useGrowth({
 		[cwd],
 	);
 
-	// 切会话：回到跟随、清实时相关状态
+	// 切会话：清空选中(selected 会回落到新会话的最新一轮)、清实时相关状态
 	useEffect(() => {
 		setSelectedCommit(null);
 		setFresh(new Set());
@@ -342,13 +347,21 @@ export function useGrowth({
 		};
 	}, [active, cwd, diskPulse, beginRequest, isCurrent, requestScope, updateLazy]);
 
-	const following = selectedCommit === null;
+	// 选中永远是一个具体轮次;选中的 commit 不在当前列表里(被截断 / 换了会话)时回落最新一轮
 	const selected = useMemo(
-		() => (following ? latest : rounds.find((round) => round.commit === selectedCommit) ?? latest) ?? null,
-		[following, latest, rounds, selectedCommit],
+		() => (rounds.find((round) => round.commit === selectedCommit) ?? latest) ?? null,
+		[latest, rounds, selectedCommit],
 	);
 	const sessionStart = rounds[0]?.parentTree ?? null;
 
+	// 把「回落来的」选中固化成具体一轮:selectedCommit 为空(null,还没选过)或指向的 commit
+	// 已不在列表里时,selected 走的是 ?? latest 兜底。若不在下一拍把它写实,之后新的一轮到来
+	// 会让兜底跟着 latest 一起往前跳——用户正看着旧的一轮却被拽走。写实一次之后,新轮次就不再影响选中。
+	useEffect(() => {
+		if (!selected || selectedCommit === selected.commit) return;
+		setSelectedCommit(selected.commit);
+	}, [selected, selectedCommit]);
+
 	// 所选轮的文件清单；缓存身份包含工作区与会话，迟到结果不写缓存。
 	useEffect(() => {
 		if (!active) return;
@@ -440,11 +453,13 @@ export function useGrowth({
 		return [...paths];
 	}, [files, selected, lazyChildren, key]);
 
-	// 新的一轮到来（跟随中）：自动展开改动路径上的目录（用户手动收起过的除外）+ 入场动画
+	// 新的一轮到来（不再跟随）：用户正看着最新这轮时,自动展开改动路径上的目录（用户手动收起过的除外）+ 入场动画
 	useEffect(() => {
-		if (!latest || !following || latest.commit === lastRevealed.current) return;
+		if (!latest || latest.commit === lastRevealed.current) return;
 		const first = lastRevealed.current === "";
 		lastRevealed.current = latest.commit;
+		// 用户停在旧的一轮看历史时,新轮次不打扰他:不展开、不改选中
+		if (selected && selected.commit !== latest.commit) return;
 		// 打开面板时已有的历史不播动画，只对之后新提交的一轮
 		if (first && !liveRounds.some((round) => round.commit === latest.commit)) return;
 		const list = latest.changes;
@@ -461,14 +476,16 @@ export function useGrowth({
 		setFresh(new Set(list.map((c) => c.path)));
 		if (freshTimer.current) clearTimeout(freshTimer.current);
 		freshTimer.current = setTimeout(() => setFresh(new Set()), FRESH_MS);
-	}, [latest, following, liveRounds, persistExpanded]);
+	}, [latest, selected, liveRounds, persistExpanded]);
+	/** 用户主动选中的那一轮(决定是否自动展开目录);打开面板落到最新轮不写它 */
+	const expandCommit = useRef<string | null>(null);
 	useEffect(() => () => {
 		if (freshTimer.current) clearTimeout(freshTimer.current);
 	}, []);
 
-	// 手动选轮：展开这一轮改动的目录
+	// 手动选轮（用户主动点选）：展开这一轮改动的目录
 	useEffect(() => {
-		if (following || !selected) return;
+		if (!selected || expandCommit.current !== selected.commit) return;
 		const list = changes.slice(0, REVEAL_LIMIT);
 		if (!list.length) return;
 		const dirs = dirsToReveal(list);
@@ -478,25 +495,31 @@ export function useGrowth({
 			for (const d of dirs) next.add(d);
 			return next;
 		});
-	}, [following, selected, changes]);
-
-	const follow = useCallback(() => {
-		setSelectedCommit(null);
+	}, [selected, changes]);
+
+	/** 显式选到最新一轮:打开面板时用,不触发上面的目录自动展开 */
+	const selectLatest = useCallback(() => {
+		const last = rounds[rounds.length - 1];
+		if (last) setSelectedCommit(last.commit);
+	}, [rounds]);
+	const select = useCallback((commit: string) => {
+		expandCommit.current = commit;
+		setSelectedCommit(commit);
 	}, []);
-	const select = useCallback(
-		(commit: string) => setSelectedCommit(rounds.length && rounds[rounds.length - 1].commit === commit ? null : commit),
-		[rounds],
-	);
 	const prev = useCallback(() => {
 		if (!selected) return;
 		const idx = rounds.findIndex((round) => round.commit === selected.commit);
-		if (idx > 0) setSelectedCommit(rounds[idx - 1].commit);
+		if (idx > 0) {
+			expandCommit.current = rounds[idx - 1].commit;
+			setSelectedCommit(rounds[idx - 1].commit);
+		}
 	}, [selected, rounds]);
 	const next = useCallback(() => {
 		if (!selected) return;
 		const idx = rounds.findIndex((round) => round.commit === selected.commit);
 		if (idx < 0 || idx >= rounds.length - 1) return;
-		setSelectedCommit(idx + 1 === rounds.length - 1 ? null : rounds[idx + 1].commit);
+		expandCommit.current = rounds[idx + 1].commit;
+		setSelectedCommit(rounds[idx + 1].commit);
 	}, [selected, rounds]);
 
 	const toggleDir = useCallback(
@@ -592,7 +615,6 @@ export function useGrowth({
 		error: runtimeError ?? (fetched.key === key ? fetched.error : null) ?? (range && rangeChanges?.key === `${key}|${range.from}..${range.to}` ? rangeChanges.error : null) ?? null,
 		rounds,
 		selected,
-		following,
 		scope,
 		range,
 		changes,
@@ -600,7 +622,7 @@ export function useGrowth({
 		filePaths,
 		expanded,
 		fresh,
-		follow,
+		selectLatest,
 		select,
 		prev,
 		next,