dsh-session-curator 0.1.0 → 0.1.1

package/lib/client.js

@@ -24,6 +24,8 @@ window.__ModuleLoader__.load({
 			Menu,
 			MenuItemButton,
 			Modal,
+			SegmentedControl,
+			Switch,
 			IconChevronDownOutlineRegular,
 			IconChevronRightOutlineRegular,
 			IconEllipsisOutlineRegular,
@@ -123,7 +125,41 @@ window.__ModuleLoader__.load({
 			selectAllShort: "全选",
 			clearShort: "取消",
 			collapse: "折叠",
-			expand: "展开"
+			expand: "展开",
+			titleConfig: "配置",
+			configTitle: "基础设置",
+			configTab: "默认页签",
+			configTabHint: "打开这里时先显示哪个页签",
+			configGrouping: "按工作区分组",
+			configGroupingHint: "关掉就是平铺列表；顶部的「分组」按钮改的是同一个值",
+			configSidebarArchived: "侧边栏显示已归档会话",
+			configSidebarArchivedHint: "对应侧边栏「视图选项」里的「隐藏已归档 / 全部对话（显示已归档）」；存的是官方那份设置，改完要刷新页面才生效",
+			configSidebarRefreshHint: "已写入官方设置，但侧边栏要刷新页面才会跟着变。",
+			refreshPage: "刷新页面",
+			configMeta: "行内显示体积与文件数",
+			configMetaHint: "关掉后每行只留标题（平铺时仍会显示文件夹）",
+			configOrder: "排序",
+			configOrderHint: "原顺序就是宿主给的顺序（回收站里是最近删除在前）",
+			orderHost: "原顺序",
+			orderTitle: "标题",
+			orderBytes: "体积",
+			configAutoUpdate: "自动检查更新",
+			configAutoUpdateHint: "打开这个页面时问一次 npm registry（10 分钟内有缓存）",
+			configReset: "恢复默认",
+			configResetDone: "已恢复默认设置",
+			configSaved: "已保存",
+			aboutTitle: "关于",
+			versionLabel: "版本",
+			updateChecking: "正在检查更新…",
+			updateLatest: "已是最新版本",
+			updateAvailable: "有新版本 {latest}（当前 {current}）",
+			updateFailed: "检查更新失败：{reason}",
+			updateRetry: "重新检查",
+			updateCheckNow: "检查更新",
+			updateStepsTitle: "升级步骤",
+			updateStepOne: "在终端里升级包（按你自己的 profile 名替换 desktop）：",
+			updateStepTwo: "重启 DSH 让宿主半区生效；只改了客户端半区的话刷新页面就够。",
+			updateOpen: "打开 npm 页面"
 		};
 		const en = {
 			sectionLabel: "Session manager",
@@ -173,7 +209,41 @@ window.__ModuleLoader__.load({
 			selectAllShort: "Select all",
 			clearShort: "Clear",
 			collapse: "Collapse",
-			expand: "Expand"
+			expand: "Expand",
+			titleConfig: "Settings",
+			configTitle: "Basics",
+			configTab: "Default tab",
+			configTabHint: "Which tab the panel opens on",
+			configGrouping: "Group by workspace",
+			configGroupingHint: "Off renders a flat list; the top “Grouped” button edits the same value",
+			configSidebarArchived: "Show archived sessions in the sidebar",
+			configSidebarArchivedHint: "Mirrors “Hide archived / All conversations” in the sidebar's view options; it is the official setting, so a page refresh applies it",
+			configSidebarRefreshHint: "Written to the official setting — the sidebar only follows it after a page refresh.",
+			refreshPage: "Refresh page",
+			configMeta: "Show size and file count per row",
+			configMetaHint: "Off leaves only the title (the folder still shows in the flat list)",
+			configOrder: "Order",
+			configOrderHint: "Host order is what the host sent (the trash is most-recently-deleted first)",
+			orderHost: "Host",
+			orderTitle: "Title",
+			orderBytes: "Size",
+			configAutoUpdate: "Check for updates automatically",
+			configAutoUpdateHint: "Asks the npm registry when this page opens (cached for 10 minutes)",
+			configReset: "Reset to defaults",
+			configResetDone: "Defaults restored",
+			configSaved: "Saved",
+			aboutTitle: "About",
+			versionLabel: "Version",
+			updateChecking: "Checking for updates…",
+			updateLatest: "You are on the latest version",
+			updateAvailable: "Version {latest} is available (you have {current})",
+			updateFailed: "Update check failed: {reason}",
+			updateRetry: "Check again",
+			updateCheckNow: "Check for updates",
+			updateStepsTitle: "How to upgrade",
+			updateStepOne: "Upgrade the package in a terminal (replace desktop with your profile name):",
+			updateStepTwo: "Restart DSH so the host half reloads; a client-half change only needs a page refresh.",
+			updateOpen: "Open the npm page"
 		};
 
 		// ── 两个模块级小 store（弹窗宿主与设置面板共享） ─────────────────────
@@ -202,8 +272,100 @@ window.__ModuleLoader__.load({
 		const dialogStore = createStore(null);
 		/** 每次写操作成功后自增，让设置面板重新拉快照。 */
 		const mutationStore = createStore(0);
-		/** "按工作区分组"开关；模块级，切走设置页再回来仍然记得。 */
-		const groupingStore = createStore(true);
+
+		// ── 面板设置：localStorage 持久化，拿不到就只在内存里生效 ─────────────
+		const SETTINGS_KEY = "dsh-session-curator.settings";
+		/** `tab` 只允许三个数据页签：配置页不能当"默认页签"。 */
+		const DEFAULT_SETTINGS = { tab: "archived", grouping: true, showMeta: true, order: "host", autoUpdate: true };
+
+		function readSettings() {
+			try {
+				const raw = globalThis.localStorage ? globalThis.localStorage.getItem(SETTINGS_KEY) : null;
+				if (typeof raw !== "string" || raw === "") return { ...DEFAULT_SETTINGS };
+				const parsed = JSON.parse(raw);
+				const next = { ...DEFAULT_SETTINGS };
+				for (const key of Object.keys(DEFAULT_SETTINGS)) {
+					// 类型不符（手改过的 localStorage / 老版本留下的键）一律退回默认值。
+					if (typeof parsed[key] === typeof DEFAULT_SETTINGS[key]) next[key] = parsed[key];
+				}
+				if (next.tab === "config") next.tab = DEFAULT_SETTINGS.tab;
+				return next;
+			} catch {
+				return { ...DEFAULT_SETTINGS };
+			}
+		}
+
+		const settingsStore = createStore(readSettings());
+		function updateSettings(patch) {
+			const next = { ...settingsStore.get(), ...patch };
+			settingsStore.set(next);
+			try {
+				if (globalThis.localStorage) globalThis.localStorage.setItem(SETTINGS_KEY, JSON.stringify(next));
+			} catch {
+				// 隐私模式 / 配额满：设置本次会话内有效。
+			}
+			return next;
+		}
+
+		/** "按工作区分组"开关；初值来自设置，工具条上改它也会写回设置。 */
+		const groupingStore = createStore(settingsStore.get().grouping);
+
+		// ── 官方侧边栏的"显示已归档" ─────────────────────────────────────────
+		/**
+		 * 官方那份"视图"存储的 localStorage 键：`@deepseek-ai/dsh-client-ui-workspace` 里
+		 * `defineStore({ …, persist: "dsh.workspace.view.v5" })`，整份 JSON 形如
+		 * `{ groupBy, orderBy, groupExpansion, sessionOrderByAccount, archivedFilter }`。
+		 * 侧边栏「视图选项」菜单里的 隐藏已归档 / 全部对话（显示已归档）/ 仅显示已归档
+		 * 写的就是 `archivedFilter`（`default` / `show` / `only`）。
+		 */
+		const SIDEBAR_VIEW_KEY = "dsh.workspace.view.v5";
+
+		function readSidebarArchived() {
+			try {
+				const raw = globalThis.localStorage ? globalThis.localStorage.getItem(SIDEBAR_VIEW_KEY) : null;
+				if (typeof raw !== "string" || raw === "") return "default";
+				const parsed = JSON.parse(raw);
+				const value = parsed !== null && typeof parsed === "object" ? parsed.archivedFilter : null;
+				return value === "show" || value === "only" ? value : "default";
+			} catch {
+				return "default";
+			}
+		}
+
+		/**
+		 * 只改 `archivedFilter` 一个字段，其余（分组方式 / 排序 / 折叠 / 手动顺序）原样保留。
+		 *
+		 * 为什么只能"写存储 + 刷新页面"：`@deepseek-ai/dsh-client-store` 的 `attachPersistence()`
+		 * **只在 store 创建时读一次** localStorage（之后只在自己变更时写），不监听 `storage` 事件；
+		 * 而那个实例活在官方 bundle 内部（`@deepseek-ai/dsh-client-ui-workspace` 只导出
+		 * `apply` / `inject`），插件既拿不到实例也拿不到它的写接口。刷新页面后官方 store 才会
+		 * 带着新值重建，侧边栏跟着变。
+		 */
+		function writeSidebarArchived(show) {
+			try {
+				if (!globalThis.localStorage) return false;
+				const raw = globalThis.localStorage.getItem(SIDEBAR_VIEW_KEY);
+				let parsed = raw === null || raw === "" ? null : JSON.parse(raw);
+				if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) parsed = {};
+				parsed.archivedFilter = show ? "show" : "default";
+				globalThis.localStorage.setItem(SIDEBAR_VIEW_KEY, JSON.stringify(parsed));
+				return true;
+			} catch {
+				return false;
+			}
+		}
+
+		/** 更新检查状态：`{ state: idle|checking|done|failed, value, error }`。 */
+		const updateStore = createStore({ state: "idle", value: null, error: null });
+		async function checkUpdate(force) {
+			updateStore.set({ state: "checking", value: updateStore.get().value, error: null });
+			try {
+				const value = await call("check-update", force === true ? { force: true } : {});
+				updateStore.set({ state: "done", value, error: null });
+			} catch (error) {
+				updateStore.set({ state: "failed", value: updateStore.get().value, error: reportError(error) });
+			}
+		}
 
 		function requestTrash(ids, title) {
 			dialogStore.set({ kind: "trash", ids, title });
@@ -462,7 +624,59 @@ window.__ModuleLoader__.load({
 			error: { color: "var(--dsw-alias-state-error-primary)", fontSize: "12px" },
 			footer: { color: "var(--dsw-alias-label-secondary)", fontSize: "11px", display: "flex", gap: "10px", flexWrap: "wrap" },
 			mono: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
-			ack: { display: "flex", alignItems: "center", gap: "8px", fontSize: "12px", color: "var(--dsw-alias-label-primary)" }
+			ack: { display: "flex", alignItems: "center", gap: "8px", fontSize: "12px", color: "var(--dsw-alias-label-primary)" },
+			/** 顶部条：页签在左，动作靠 `marginInlineStart: auto` 推到右边。 */
+			header: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" },
+			headerActions: { display: "flex", alignItems: "center", gap: "8px", marginInlineStart: "auto" },
+			/** 配置页的一行：左边标签 + 说明，右边控件。 */
+			configRow: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: "12px",
+				padding: "10px 12px",
+				borderTop: "1px solid var(--dsw-alias-border-l1)"
+			},
+			configMain: { display: "flex", flexDirection: "column", gap: "2px", minWidth: 0 },
+			configLabel: { color: "var(--dsw-alias-label-primary)", fontSize: "13px" },
+			configHint: { color: "var(--dsw-alias-label-tertiary)", fontSize: "11px" },
+			configControl: { display: "flex", alignItems: "center", gap: "8px", flex: "0 0 auto" },
+			configFoot: {
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				flexWrap: "wrap",
+				padding: "10px 12px",
+				borderTop: "1px solid var(--dsw-alias-border-l1)"
+			},
+			/** 版本号：浅色小字。 */
+			version: { color: "var(--dsw-alias-label-tertiary)", fontSize: "11px" },
+			/**
+			 * 升级提示块。底色用带 alpha 的 `interactive-bg-active` —— 浅色主题里
+			 * base / layer-1 / layer-2 / layer-3 是同一个颜色，铺上去等于没铺。
+			 */
+			updateBox: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px",
+				padding: "10px 12px",
+				borderTop: "1px solid var(--dsw-alias-border-l1)",
+				background: "var(--dsw-alias-interactive-bg-active)"
+			},
+			updateTitle: { color: "var(--dsw-alias-label-primary)", fontSize: "12px", fontWeight: 600 },
+			updateSteps: { color: "var(--dsw-alias-label-secondary)", fontSize: "11px", display: "flex", flexDirection: "column", gap: "4px" },
+			code: {
+				display: "block",
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+				fontSize: "11px",
+				color: "var(--dsw-alias-label-primary)",
+				background: "var(--dsw-alias-interactive-bg-active)",
+				borderRadius: "6px",
+				padding: "6px 8px",
+				overflowX: "auto",
+				whiteSpace: "pre"
+			},
+			link: { color: "var(--dsw-alias-label-primary)", fontSize: "11px" }
 		};
 
 		// ── 会话行 ──────────────────────────────────────────────────────────
@@ -479,8 +693,11 @@ window.__ModuleLoader__.load({
 			const t = props.t;
 			const meta = [];
 			if (props.showCwd) meta.push(row.cwd ? row.cwd : t("noProject"));
-			if (row.bytes) meta.push(formatBytes(row.bytes));
-			if (row.files) meta.push(text(t, "files", { n: row.files }));
+			// 体积 / 文件数可以在配置页关掉（默认开）；文件夹那一段不受影响。
+			if (props.showMeta !== false) {
+				if (row.bytes) meta.push(formatBytes(row.bytes));
+				if (row.files) meta.push(text(t, "files", { n: row.files }));
+			}
 			const time = props.showDeletedAt ? formatTime(row.deletedAt) : formatTime(row.createdAt);
 			if (time !== "") meta.push(time);
 
@@ -573,7 +790,9 @@ window.__ModuleLoader__.load({
 		// ── 设置面板 ────────────────────────────────────────────────────────
 		function SessionManagerPanel(props) {
 			const t = props.t;
-			const [tab, setTab] = React.useState("archived");
+			const settings = useStore(settingsStore);
+			/** 初始页签来自配置页的"默认页签"。 */
+			const [tab, setTab] = React.useState(settings.tab);
 			const [snapshot, setSnapshot] = React.useState(null);
 			const [error, setError] = React.useState(null);
 			const [loading, setLoading] = React.useState(true);
@@ -585,6 +804,11 @@ window.__ModuleLoader__.load({
 			const [menuFor, setMenuFor] = React.useState(null);
 			const grouping = useStore(groupingStore);
 			const revision = useStore(mutationStore);
+			const update = useStore(updateStore);
+			// 官方侧边栏的"显示已归档"：初值从它自己的 localStorage 读；改完要刷新页面才生效，
+			// 所以另外记住"挂载时是什么"，两者不一致时才提示刷新。
+			const [sidebarArchived, setSidebarArchived] = React.useState(readSidebarArchived);
+			const [sidebarAtMount] = React.useState(readSidebarArchived);
 
 			const applyResult = (value) => {
 				if (value && value.archived) setSnapshot(value);
@@ -606,6 +830,12 @@ window.__ModuleLoader__.load({
 				void refresh();
 			}, [refresh, revision]);
 
+			// 打开配置页时自动查一次更新（可以在配置页关掉；宿主那边 10 分钟内复用缓存）。
+			React.useEffect(() => {
+				if (tab !== "config" || !settings.autoUpdate || update.state !== "idle") return;
+				void checkUpdate(false);
+			}, [tab, settings.autoUpdate, update.state]);
+
 			// 换页签时清空选择，避免把上一个页签的 id 带到下一个页签的操作里。
 			React.useEffect(() => {
 				setSelected([]);
@@ -643,7 +873,17 @@ window.__ModuleLoader__.load({
 			const archived = snapshot ? snapshot.archived : [];
 			const pinned = snapshot ? snapshot.pinned : [];
 			const trashed = snapshot ? snapshot.trashed : [];
-			const rows = tab === "archived" ? archived : tab === "pinned" ? pinned : trashed;
+			/** 排序是显示层的事：`host` 就是宿主给的顺序（回收站是最近删除在前）。 */
+			const sortRows = (list) => {
+				if (settings.order === "title") {
+					return [...list].sort((left, right) => String(left.title ?? "").localeCompare(String(right.title ?? "")));
+				}
+				if (settings.order === "bytes") {
+					return [...list].sort((left, right) => (right.bytes ?? 0) - (left.bytes ?? 0));
+				}
+				return list;
+			};
+			const rows = sortRows(tab === "archived" ? archived : tab === "pinned" ? pinned : tab === "trash" ? trashed : []);
 			const selectedRows = rows.filter((row) => selected.includes(row.sessionId));
 
 			// 分组只是显示层：选择、批量操作、计数仍然按整个页签的行来算。
@@ -657,7 +897,8 @@ window.__ModuleLoader__.load({
 			const tabs = [
 				{ id: "archived", label: t("titleArchived"), count: archived.length },
 				{ id: "pinned", label: t("titlePinned"), count: pinned.length },
-				{ id: "trash", label: t("titleTrash"), count: trashed.length }
+				{ id: "trash", label: t("titleTrash"), count: trashed.length },
+				{ id: "config", label: t("titleConfig"), count: 0 }
 			];
 
 			/**
@@ -767,6 +1008,7 @@ window.__ModuleLoader__.load({
 						first,
 						busy,
 						showCwd: block.group === null,
+						showMeta: settings.showMeta,
 						showDeletedAt: tab === "trash",
 						checked: selected.includes(row.sessionId),
 						onToggle: () => toggle(row.sessionId),
@@ -779,12 +1021,178 @@ window.__ModuleLoader__.load({
 				}
 			}
 
+			const isConfig = tab === "config";
+
+			/** 配置页的一行：左边"标签 + 说明"，右边控件。 */
+			const configRow = (key, label, hint, control, firstRow) => h(
+				"div",
+				{ key, style: firstRow ? { ...S.configRow, borderTop: "none" } : S.configRow },
+				h(
+					"div",
+					{ style: S.configMain },
+					h("span", { style: S.configLabel }, label),
+					hint === null ? null : h("span", { style: S.configHint }, hint)
+				),
+				h("div", { style: S.configControl }, control)
+			);
+
+			/** 版本号优先用宿主报的（快照里带 `version`），其次用更新检查回来的当前版本。 */
+			const version = typeof (snapshot && snapshot.version) === "string"
+				? snapshot.version
+				: (update.value && typeof update.value.current === "string" ? update.value.current : null);
+			const outdated = update.state === "done" && update.value !== null && update.value.outdated === true;
+			/** 状态行：检查中 / 失败 / 已是最新。有新版本时改用下面的升级块。 */
+			const updateLine = update.state === "checking"
+				? h("span", { style: S.configHint }, t("updateChecking"))
+				: update.state === "failed"
+					? h("span", { style: S.error }, text(t, "updateFailed", { reason: update.error === null ? "?" : update.error }))
+					: update.value !== null && typeof update.value.error === "string"
+						? h("span", { style: S.configHint }, text(t, "updateFailed", { reason: update.value.error }))
+						: update.state === "done" && !outdated
+							? h("span", { style: S.configHint }, t("updateLatest"))
+							: null;
+
+			const configPage = h(
+				"div",
+				{ style: S.column },
+				h(
+					"div",
+					{ style: S.card },
+					configRow("config:tab", t("configTab"), t("configTabHint"), h(SegmentedControl, {
+						id: "session-curator-default-tab",
+						value: settings.tab,
+						options: [
+							{ value: "archived", label: t("titleArchived") },
+							{ value: "pinned", label: t("titlePinned") },
+							{ value: "trash", label: t("titleTrash") }
+						],
+						label: t("configTab"),
+						onChange: (next) => void updateSettings({ tab: next })
+					}), true),
+					configRow("config:grouping", t("configGrouping"), t("configGroupingHint"), h(Switch, {
+						checked: settings.grouping,
+						label: t("configGrouping"),
+						onChange: (next) => {
+							updateSettings({ grouping: next });
+							groupingStore.set(next);
+						}
+					})),
+					configRow("config:sidebar-archived", t("configSidebarArchived"), t("configSidebarArchivedHint"), h(Switch, {
+						checked: sidebarArchived !== "default",
+						label: t("configSidebarArchived"),
+						onChange: (next) => {
+							writeSidebarArchived(next);
+							setSidebarArchived(next ? "show" : "default");
+						}
+					})),
+					// 官方 store 只在创建时读一次 localStorage，所以改完必须刷新页面。
+					sidebarArchived === sidebarAtMount ? null : h(
+						"div",
+						{ key: "config:sidebar-refresh", style: S.configFoot },
+						h("span", { style: S.configHint }, t("configSidebarRefreshHint")),
+						h(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								try {
+									globalThis.location.reload();
+								} catch {
+									// 没有 location（自检环境）时只保留提示
+								}
+							}
+						}, t("refreshPage"))
+					),
+					configRow("config:meta", t("configMeta"), t("configMetaHint"), h(Switch, {
+						checked: settings.showMeta,
+						label: t("configMeta"),
+						onChange: (next) => void updateSettings({ showMeta: next })
+					})),
+					configRow("config:order", t("configOrder"), t("configOrderHint"), h(SegmentedControl, {
+						id: "session-curator-order",
+						value: settings.order,
+						options: [
+							{ value: "host", label: t("orderHost") },
+							{ value: "title", label: t("orderTitle") },
+							{ value: "bytes", label: t("orderBytes") }
+						],
+						label: t("configOrder"),
+						onChange: (next) => void updateSettings({ order: next })
+					})),
+					configRow("config:auto", t("configAutoUpdate"), t("configAutoUpdateHint"), h(Switch, {
+						checked: settings.autoUpdate,
+						label: t("configAutoUpdate"),
+						onChange: (next) => void updateSettings({ autoUpdate: next })
+					})),
+					h(
+						"div",
+						{ key: "config:reset", style: { ...S.configFoot, justifyContent: "flex-end" } },
+						h(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								updateSettings({ ...DEFAULT_SETTINGS });
+								groupingStore.set(DEFAULT_SETTINGS.grouping);
+							}
+						}, t("configReset"))
+					)
+				),
+
+				h(
+					"div",
+					{ style: S.card },
+					h(
+						"div",
+						{ style: { ...S.configRow, borderTop: "none" } },
+						h(
+							"div",
+							{ style: S.configMain },
+							h("span", { style: S.configLabel }, t("aboutTitle")),
+							h("span", { style: S.configHint }, "dsh-session-curator")
+						),
+						h(
+							"div",
+							{ style: S.configControl },
+							// 版本号：浅色小字。
+							h("span", { style: S.version }, `${t("versionLabel")} ${version === null ? "—" : `v${version}`}`),
+							h(Button, {
+								size: "sm",
+								variant: "outline",
+								disabled: update.state === "checking",
+								onClick: () => void checkUpdate(true)
+							}, t("updateCheckNow"))
+						)
+					),
+					updateLine === null ? null : h("div", { key: "config:update", style: S.configFoot }, updateLine),
+					outdated
+						? h(
+							"div",
+							{ key: "config:upgrade", style: S.updateBox },
+							h("span", { style: S.updateTitle }, text(t, "updateAvailable", { latest: update.value.latest, current: version === null ? "?" : version })),
+							h(
+								"span",
+								{ style: S.updateSteps },
+								h("span", null, t("updateStepsTitle")),
+								h("span", null, t("updateStepOne")),
+								h("code", { style: S.code }, "dsh plugin --profile desktop add dsh-session-curator@latest"),
+								h("span", null, t("updateStepTwo"))
+							),
+							h("a", {
+								style: S.link,
+								href: "https://www.npmjs.com/package/dsh-session-curator",
+								target: "_blank",
+								rel: "noreferrer"
+							}, t("updateOpen"))
+						)
+						: null
+				)
+			);
+
 			return h(
 				"div",
 				{ style: S.column },
 				h(
 					"div",
-					{ style: S.rowLine },
+					{ style: S.header },
 					h(
 						"div",
 						{ style: S.tabBar },
@@ -795,18 +1203,27 @@ window.__ModuleLoader__.load({
 							onClick: () => setTab(entry.id)
 						}, `${entry.label}${entry.count > 0 ? ` (${entry.count})` : ""}`))
 					),
-					h(Button, {
-						size: "sm",
-						variant: "ghost",
-						title: t("groupHint"),
-						onClick: () => groupingStore.set(!grouping)
-					}, grouping ? t("groupingOn") : t("groupingOff")),
-					h(Button, { size: "sm", variant: "ghost", disabled: loading || busy, onClick: () => void refresh() }, t("refresh"))
+					// 分组与刷新推到右边；配置页上没有它们。
+					isConfig ? null : h(
+						"div",
+						{ style: S.headerActions },
+						h(Button, {
+							size: "sm",
+							variant: "outline",
+							title: t("groupHint"),
+							onClick: () => {
+								const next = !grouping;
+								groupingStore.set(next);
+								updateSettings({ grouping: next });
+							}
+						}, grouping ? t("groupingOn") : t("groupingOff")),
+						h(Button, { size: "sm", variant: "outline", disabled: loading || busy, onClick: () => void refresh() }, t("refresh"))
+					)
 				),
 
 				error ? h("div", { style: S.error }, error) : null,
 
-				h(
+				isConfig ? null : h(
 					"div",
 					{ style: S.card },
 					loading && !snapshot
@@ -816,7 +1233,7 @@ window.__ModuleLoader__.load({
 							: h("div", { style: S.list }, nodes)
 				),
 
-				h(
+				isConfig ? null : h(
 					"div",
 					{ style: S.rowLine },
 					h(Button, {
@@ -843,7 +1260,9 @@ window.__ModuleLoader__.load({
 					busy ? h("span", { style: S.footer }, t("working")) : null
 				),
 
-				h(
+				isConfig ? configPage : null,
+
+				isConfig ? null : h(
 					"div",
 					{ style: S.footer },
 					h("span", null, text(t, "total", { n: rows.length, size: formatBytes(totalBytes) })),