@rexvane/piweb 0.3.16 → 0.3.17

package/src/components/SettingsPanel.tsx

@@ -95,80 +95,57 @@ export function SettingsPanel({
 			}}
 		>
 			<div
-				className="settings-dialog clay-card relative flex flex-col gap-4 overflow-hidden bg-white/95 dark:bg-slate-900/95 p-6 shadow-2xl backdrop-blur-md"
+				className="settings-dialog glass-modal flex overflow-hidden"
 				style={{
-					width: 960,
-					maxWidth: "calc(100vw - 32px)",
-					height: "min(840px, calc(100vh - 48px))",
-					borderRadius: 36,
+					width: 800,
+					maxWidth: "calc(100vw - 48px)",
+					height: "min(800px, calc(100vh - 48px))",
+					borderRadius: 32,
+					boxShadow: "var(--dsw-elevation-prominent)",
 				}}
 			>
-				{/* Top Header Bar (Screen 4-7) */}
-				<div className="flex items-center justify-between pb-3 border-b border-slate-200/60 dark:border-slate-800/60 shrink-0">
-					<div className="flex items-center gap-3">
-						<div className="w-10 h-10 rounded-2xl clay-inset flex items-center justify-center text-emerald-600 dark:text-emerald-400 flex-none">
-							<IconSettingsOutline16 size={20} />
-						</div>
-						<div className="flex flex-col">
-							<div className="flex items-center gap-2">
-								<h1 className="text-base sm:text-lg font-extrabold text-slate-800 dark:text-slate-100 tracking-tight">全局设置中心</h1>
-								<span className="px-2.5 py-0.5 rounded-full clay-inset text-emerald-600 dark:text-emerald-400 font-mono text-[11px] font-semibold">config.json</span>
-							</div>
-							<p className="text-xs text-slate-400 hidden sm:block">管理工作台外观基调、语言偏好、模型调度与集成插件环境</p>
-						</div>
+				{/* 左导航（dsh trigger：h42 r12，active 填充） */}
+				<div className="settings-nav flex w-52 flex-none flex-col gap-0.5 py-4 pl-4 pr-3">
+					<div className="settings-title px-2 pb-3" style={{ fontSize: 16, fontWeight: 500 }}>
+						{t.settings}
 					</div>
-					<div className="flex items-center gap-2">
+					{navItems.map((n) => (
 						<button
-							type="button"
-							className="clay-btn clay-btn-soft px-3 py-1.5 text-xs text-slate-700 dark:text-slate-200 flex items-center gap-1.5"
-							onClick={() => window.open("/api/config", "_blank")}
-						>
-							<IconDownloadOutline16 size={14} className="text-sky-500" />
-							<span>{t.openConfigFile}</span>
-						</button>
-						<button
-							type="button"
-							className="clay-btn clay-btn-soft w-8 h-8 rounded-full text-slate-500 hover:text-rose-500 transition-colors"
-							aria-label={t.close}
-							onClick={onClose}
+							key={n.id}
+							className="flex h-[42px] items-center gap-2 rounded-xl px-3 text-left transition-colors"
+							style={{
+								paddingLeft: 8,
+								paddingRight: 10,
+								fontSize: 14,
+								background: section === n.id ? "var(--dsw-active)" : "transparent",
+								color: section === n.id ? "var(--dsw-label-primary)" : "var(--dsw-label-secondary)",
+							}}
+							onMouseEnter={(e) => {
+								if (section !== n.id) e.currentTarget.style.background = "var(--dsw-hover)";
+							}}
+							onMouseLeave={(e) => {
+								if (section !== n.id) e.currentTarget.style.background = "transparent";
+							}}
+							onClick={() => setSection(n.id)}
 						>
-							<IconCloseOutline14 size={15} />
+							{section === n.id ? <span style={{ color: "var(--dsw-accent)" }}>{n.icon}</span> : n.icon}
+							{n.label}
 						</button>
-					</div>
+					))}
 				</div>
 
-				{/* 12-Column Grid Body */}
-				<div className="grid grid-cols-12 gap-5 min-h-0 flex-1 overflow-hidden">
-					{/* Left Sub-Navigation Menu (3 cols) */}
-					<div className="col-span-12 md:col-span-3 flex flex-col gap-3 min-h-0 overflow-y-auto">
-						<div className="clay-inset p-2 rounded-2xl flex flex-col gap-1.5 shrink-0">
-							{navItems.map((n) => {
-								const isSelected = section === n.id;
-								return (
-									<button
-										key={n.id}
-										type="button"
-										className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-semibold transition-all ${
-											isSelected
-												? "clay-card text-emerald-700 dark:text-emerald-300 font-bold bg-white dark:bg-slate-800 shadow-sm"
-												: "text-slate-600 dark:text-slate-300 hover:bg-white/60 dark:hover:bg-slate-800/60"
-										}`}
-										onClick={() => setSection(n.id)}
-									>
-										<div className="flex items-center gap-2.5">
-											<span className={isSelected ? "text-emerald-500" : "text-slate-400"}>{n.icon}</span>
-											<span>{n.label}</span>
-										</div>
-										{isSelected && <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />}
-									</button>
-								);
-							})}
-						</div>
-
+				{/* 右侧内容 */}
+				<div className="flex min-w-0 flex-1 flex-col">
+					<div className="flex items-center gap-2 px-6 py-3.5">
+						<div className="flex-1" />
+						<button className="btn-outline" style={{ height: 32, fontSize: 13 }} onClick={() => window.open("/api/config", "_blank")}>
+							<IconDownloadOutline16 size={14} /> {t.openConfigFile}
+						</button>
+						<button className="icon-btn" onClick={onClose}>
+							<IconCloseOutline14 size={15} />
+						</button>
 					</div>
-
-					{/* Right Configuration Content Area (9 cols) */}
-					<div className="col-span-12 md:col-span-9 min-h-0 flex-1 overflow-y-auto pr-2">
+					<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
 						{section === "general" && <GeneralSection lang={lang} setLang={setLang} />}
 						{section === "models" && <ModelsSection />}
 						{section === "skills" && <SkillsSection cwd={cwd} onOpenFileContent={onOpenFileContent} />}
@@ -184,16 +161,6 @@ export function SettingsPanel({
 
 // ---------- General ----------
 
-const THEME_OPTIONS: Array<{ id: PebrelTheme; labelKey: string; nameZh: string; nameEn: string; light: string; dark: string; accent: string }> = [
-	{ id: "piweb", labelKey: "themePiWeb", nameZh: "PiWeb · 工作台", nameEn: "PiWeb · Workbench", light: "#34D399", dark: "#A7F3D0", accent: "#34D399" },
-	{ id: "ocean-ink", labelKey: "themeOceanInk", nameZh: "海与墨", nameEn: "Ocean Ink", light: "#38BDF8", dark: "#0284C7", accent: "#38BDF8" },
-	{ id: "silver-steel", labelKey: "themeSilverSteel", nameZh: "银钢", nameEn: "Silver Steel", light: "#E2E8F0", dark: "#475569", accent: "#94A3B8" },
-	{ id: "limestone-coal", labelKey: "themeLimestoneCoal", nameZh: "石灰与煤炭", nameEn: "Limestone & Coal", light: "#FB923C", dark: "#1E293B", accent: "#FB923C" },
-	{ id: "linen-moss", labelKey: "themeLinenMoss", nameZh: "亚麻与苔绿", nameEn: "Linen & Moss", light: "#FFDCC5", dark: "#006C4B", accent: "#006C4B" },
-	{ id: "nord-paper", labelKey: "themeNordPaper", nameZh: "北欧纸墨", nameEn: "Nordic Paper", light: "#F6FAFE", dark: "#00668A", accent: "#00668A" },
-	{ id: "pebrel", labelKey: "themePebrel", nameZh: "Pebrel", nameEn: "Pebrel", light: "#818CF8", dark: "#EEF2FF", accent: "#818CF8" },
-];
-
 function GeneralSection({
 	lang,
 	setLang,
@@ -202,7 +169,7 @@ function GeneralSection({
 	setLang: (l: "zh" | "en") => void;
 }) {
 	const { t } = useI18n();
-	const [theme, setTheme] = useState<PebrelTheme>("piweb");
+	const [theme, setTheme] = useState<PebrelTheme>("dsh");
 	const [themeMode, setThemeMode] = useState<ThemeMode>("system");
 	const [fontSize, setFontSize] = useState(14);
 	const [chatFontSize, setChatFontSize] = useState(14);
@@ -212,8 +179,6 @@ function GeneralSection({
 	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);
-	const [logoutPending, setLogoutPending] = useState(false);
-	const [logoutError, setLogoutError] = useState(false);
 	const [settingsLoading, setSettingsLoading] = useState(true);
 	const [settingsSaving, setSettingsSaving] = useState(false);
 	const [settingsError, setSettingsError] = useState<"load" | "save" | null>(null);
@@ -368,17 +333,14 @@ function GeneralSection({
 		}
 	};
 
-	const themes = useMemo(
-		() =>
-			THEME_OPTIONS.map((th) => ({
-				id: th.id,
-				label: (t as Record<string, string>)[th.labelKey] || (lang === "zh" ? th.nameZh : th.nameEn),
-				light: th.light,
-				dark: th.dark,
-				accent: th.accent,
-			})),
-		[lang, t],
-	);
+	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" },
+		{ id: "limestone-coal", label: t.themeLimestoneCoal, light: "#F0EFEB", dark: "#171717", accent: "#CEB27E" },
+		{ id: "linen-moss", label: t.themeLinenMoss, light: "#F2F2EC", dark: "#1E211E", accent: "#A3B3A3" },
+		{ id: "nord-paper", label: t.themeNordPaper, light: "#FCFBF9", dark: "#2E3440", accent: "#88C0D0" },
+		{ id: "pebrel", label: t.themePebrel, light: "#F3F4F6", dark: "#0F111A", accent: "#52A8FF" },
+	];
 
 	return (
 		<div className="flex flex-col gap-6">
@@ -399,34 +361,38 @@ function GeneralSection({
 			/>
 			</Row>
 			<RowColumn title={t.appearance}>
-				<div className="settings-theme-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2.5 w-full">
-					{themes.map((th) => {
-						const isSelected = theme === th.id;
-						return (
-							<button
-								key={th.id}
-								type="button"
-								className={`clay-card flex flex-col items-center justify-center p-3.5 rounded-2xl transition-all hover:-translate-y-0.5 ${
-									isSelected ? "ring-2 ring-emerald-500 shadow-md bg-white dark:bg-slate-800" : "bg-white/70 dark:bg-slate-900/60 opacity-80 hover:opacity-100"
-								}`}
-								aria-pressed={isSelected}
-								onClick={() => pickTheme(th.id)}
-							>
-								<div className="flex items-center overflow-hidden rounded-lg mb-2 shadow-inner border border-slate-200/50 dark:border-slate-700/50" style={{ width: 48, height: 22 }}>
-									<span style={{ background: th.light, flex: 1, height: "100%" }} />
-									<span style={{ background: th.dark, flex: 1, height: "100%" }} />
-								</div>
-								<div className="flex items-center gap-1.5 text-xs font-medium text-slate-800 dark:text-slate-100">
-									<span className="w-2 h-2 rounded-full inline-block flex-none" style={{ background: th.accent }} />
-									<span className="truncate">{th.label}</span>
-								</div>
-							</button>
-						);
-					})}
+				<div className="flex w-full flex-wrap gap-2">
+					{themes.map((th) => (
+						<button
+							key={th.id}
+							className="flex flex-col items-center justify-center gap-1 transition-colors"
+							style={{
+								flex: "1 1 150px",
+								padding: "20px 32px",
+								borderRadius: 20,
+								border: `0.5px solid ${theme === th.id ? "var(--dsw-border-strong)" : "var(--dsw-border-l4)"}`,
+								background: theme === th.id ? "var(--dsw-module-platform)" : "transparent",
+								color: "var(--dsw-label-primary)",
+								fontSize: 14,
+								lineHeight: "22px",
+							}}
+							aria-pressed={theme === th.id}
+							onClick={() => pickTheme(th.id)}
+						>
+							<span className="flex items-center overflow-hidden rounded-md" style={{ border: "0.5px solid var(--dsw-border-l3)", width: 42, height: 20 }}>
+								<span style={{ background: th.light, flex: 1, height: "100%" }} />
+								<span style={{ background: th.dark, flex: 1, height: "100%" }} />
+							</span>
+							<span className="flex items-center gap-1.5">
+								<span className="inline-block rounded-full" style={{ width: 8, height: 8, background: th.accent }} />
+								{th.label}
+							</span>
+						</button>
+					))}
 				</div>
 			</RowColumn>
 			<RowColumn title={t.appearanceMode}>
-				<div className="clay-inset flex p-1 rounded-2xl bg-slate-100/90 dark:bg-slate-900/80 gap-1 w-full max-w-sm">
+				<div className="flex w-full flex-wrap gap-2">
 					{([
 						{ id: "light", label: t.themeLight },
 						{ id: "dark", label: t.themeDark },
@@ -434,12 +400,17 @@ function GeneralSection({
 					] as { id: ThemeMode; label: string }[]).map((mode) => (
 						<button
 							key={mode.id}
-							type="button"
-							className={`flex-1 py-1.5 px-3 rounded-xl text-xs font-semibold transition-all ${
-								themeMode === mode.id
-									? "clay-btn-soft text-slate-800 dark:text-slate-100 shadow-sm"
-									: "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
-							}`}
+							className="flex flex-col items-center justify-center gap-1 transition-colors"
+							style={{
+								flex: "1 1 120px",
+								padding: "16px 24px",
+								borderRadius: 20,
+								border: `0.5px solid ${themeMode === mode.id ? "var(--dsw-border-strong)" : "var(--dsw-border-l4)"}`,
+								background: themeMode === mode.id ? "var(--dsw-module-platform)" : "transparent",
+								color: "var(--dsw-label-primary)",
+								fontSize: 14,
+								lineHeight: "22px",
+							}}
 							aria-pressed={themeMode === mode.id}
 							onClick={() => pickThemeMode(mode.id)}
 						>
@@ -466,7 +437,7 @@ function GeneralSection({
 			</Row>
 			<Row title={t.autoCompact} desc={t.autoCompactDesc}>
 				<div className="flex items-center gap-2">
-					<button disabled={!piSettings || settingsSaving} className="relative h-5 w-9 flex-none rounded-full transition-colors" style={{ background: piSettings?.compaction.enabled ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }} role="switch" aria-label={t.autoCompact} aria-checked={piSettings?.compaction.enabled ?? false} onClick={() => void patchPiSettings({ compaction: { enabled: !piSettings?.compaction.enabled } })}>
+					<button disabled={!piSettings || settingsSaving} className="relative h-5 w-9 flex-none rounded-full transition-colors" style={{ background: piSettings?.compaction.enabled ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }} role="switch" aria-checked={piSettings?.compaction.enabled ?? false} onClick={() => void patchPiSettings({ compaction: { enabled: !piSettings?.compaction.enabled } })}>
 						<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: piSettings?.compaction.enabled ? 18 : 2 }} />
 					</button>
 					{numberInput("compaction", "reserveTokens", t.reserveTokens)}
@@ -475,7 +446,7 @@ function GeneralSection({
 			</Row>
 			<Row title={t.autoRetry} desc={t.autoRetryDesc}>
 				<div className="flex items-center gap-2">
-					<button disabled={!piSettings || settingsSaving} className="relative h-5 w-9 flex-none rounded-full transition-colors" style={{ background: piSettings?.retry.enabled ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }} role="switch" aria-label={t.autoRetry} aria-checked={piSettings?.retry.enabled ?? false} onClick={() => void patchPiSettings({ retry: { enabled: !piSettings?.retry.enabled } })}>
+					<button disabled={!piSettings || settingsSaving} className="relative h-5 w-9 flex-none rounded-full transition-colors" style={{ background: piSettings?.retry.enabled ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }} role="switch" aria-checked={piSettings?.retry.enabled ?? false} onClick={() => void patchPiSettings({ retry: { enabled: !piSettings?.retry.enabled } })}>
 						<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: piSettings?.retry.enabled ? 18 : 2 }} />
 					</button>
 					{numberInput("retry", "maxRetries", t.maxRetries)}
@@ -508,24 +479,12 @@ function GeneralSection({
 			</Row>
 			{webAuth?.enabled ? (
 				<Row title={t.webAuth} desc={t.webAuthOn}>
-					{logoutError && <span role="alert" style={{ color: "var(--dsw-danger)", fontSize: 12 }}>{t.logoutFailed}</span>}
 					<button
 						className="btn-outline"
 						style={{ height: 30, padding: "0 14px", fontSize: 12.5 }}
-						disabled={logoutPending}
 						onClick={async () => {
-							if (logoutPending) return;
-							setLogoutPending(true);
-							setLogoutError(false);
-							try {
-								const response = await fetch("/api/web-auth", { method: "DELETE" });
-								const result = await response.json();
-								if (!response.ok || !result.success) throw new Error("logout failed");
-								window.location.href = "/login";
-							} catch {
-								setLogoutError(true);
-								setLogoutPending(false);
-							}
+							await fetch("/api/web-auth", { method: "DELETE" }).catch(() => {});
+							window.location.href = "/login";
 						}}
 					>
 						{t.logout}
@@ -736,7 +695,7 @@ function SelectOption({
 
 function Row({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) {
 	return (
-		<div className="settings-row hairline-b flex items-center justify-between gap-6 pb-5">
+		<div className="hairline-b flex items-center justify-between gap-6 pb-5">
 			<div className="min-w-0">
 				<div style={{ fontSize: 14, fontWeight: 400 }}>{title}</div>
 				{desc && (
@@ -745,7 +704,7 @@ function Row({ title, desc, children }: { title: string; desc?: string; children
 					</div>
 				)}
 			</div>
-			<div className="settings-row-control flex-none">{children}</div>
+			<div className="flex-none">{children}</div>
 		</div>
 	);
 }
@@ -770,10 +729,10 @@ function RowColumn({ title, desc, children }: { title: string; desc?: string; ch
 /** 字号步进器：− 值 ＋（越界禁用；点中间数值回到 14 默认） */
 function FontSizeStepper({ value, onChange, max }: { value: number; onChange: (v: number) => void; max: number }) {
 	return (
-		<div className="clay-inset flex items-center gap-1.5 p-1 rounded-2xl bg-slate-100 dark:bg-slate-900">
+		<div className="flex items-center gap-2">
 			<button
-				type="button"
-				className="clay-btn clay-btn-soft w-7 h-7 rounded-xl text-xs font-bold text-slate-700 dark:text-slate-200 disabled:opacity-40"
+				className="icon-btn"
+				style={{ width: 26, height: 26, border: "0.5px solid var(--dsw-border-l3)", borderRadius: 8 }}
 				disabled={value <= 12}
 				onClick={() => onChange(value - 1)}
 				aria-label="decrease font size"
@@ -781,16 +740,15 @@ function FontSizeStepper({ value, onChange, max }: { value: number; onChange: (v
 				−
 			</button>
 			<button
-				type="button"
-				className="px-2 text-center text-xs font-semibold text-slate-700 dark:text-slate-200 hover:text-emerald-500 transition-colors"
-				title="reset to 14px"
+				style={{ minWidth: 48, textAlign: "center", fontSize: 13, color: value === 14 ? "var(--dsw-label-tertiary)" : "var(--dsw-label-primary)" }}
+				title="reset"
 				onClick={() => onChange(14)}
 			>
 				{value} px
 			</button>
 			<button
-				type="button"
-				className="clay-btn clay-btn-soft w-7 h-7 rounded-xl text-xs font-bold text-slate-700 dark:text-slate-200 disabled:opacity-40"
+				className="icon-btn"
+				style={{ width: 26, height: 26, border: "0.5px solid var(--dsw-border-l3)", borderRadius: 8 }}
 				disabled={value >= max}
 				onClick={() => onChange(value + 1)}
 				aria-label="increase font size"
@@ -1245,19 +1203,13 @@ function ModelsSection() {
 
 	return (
 		<div className="flex flex-col gap-5">
-			{/* Notice Banner (Screen 6 Soft Claymorphism) */}
-			<div className="p-4 rounded-2xl bg-emerald-50/80 dark:bg-emerald-950/30 border border-emerald-200/50 dark:border-emerald-800/40 flex items-start gap-3">
-				<div className="w-8 h-8 rounded-full bg-white dark:bg-slate-800 text-emerald-600 clay-card flex-shrink-0 flex items-center justify-center mt-0.5 shadow-sm">
-					<IconModelOutline16 size={16} />
+			<div>
+				<div style={{ fontSize: 14, fontWeight: 400 }}>{t.modelsTitle}</div>
+				<div className="mt-0.5" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>
+					{t.modelsDesc}
 				</div>
-				<div className="flex flex-col gap-1 min-w-0">
-					<span className="font-bold text-slate-800 dark:text-slate-100 text-sm">{t.modelsTitle}</span>
-					<p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
-						{t.modelsDesc}
-					</p>
-					<p className="text-[11px] text-slate-400 dark:text-slate-400">
-						{t.customModelIdentityNotice}
-					</p>
+				<div className="mt-1" style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>
+					{t.customModelIdentityNotice}
 				</div>
 			</div>
 
@@ -1281,8 +1233,8 @@ function ModelsSection() {
 					const editingThis = editing === p.id;
 					return (
 						<div key={p.id}>
-							{/* 卡片：身份/操作行在上，额度显示放在同一个框内的第二段（柔和粘土拟物风格） */}
-							<div className="clay-card flex flex-col rounded-2xl px-4 py-3 bg-white/80 dark:bg-slate-900/80 shadow-sm transition-all hover:shadow-md" style={{ border: "0.5px solid var(--dsw-border-l2)" }}>
+							{/* 卡片：身份/操作行在上，额度显示放在同一个框内的第二段（分隔线区分） */}
+							<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">
 									<ProviderBrand id={p.id} name={providerName(p.id)} size={34} />
 									<div className="min-w-0 flex-1">
@@ -1500,39 +1452,30 @@ function ModelsSection() {
 				})}
 			</div>
 
-			{/* 两个添加按钮: Large Tactile Extruded Clay Buttons (Screen 6) */}
-			<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
+			{/* 两个添加按钮 */}
+			<div className="flex gap-3">
 				<button
-					type="button"
-					className="py-3.5 px-5 rounded-2xl clay-card text-slate-800 dark:text-slate-100 font-bold flex items-center justify-center gap-2 hover:-translate-y-0.5 active:translate-y-0.5 transition-all cursor-pointer group shadow-sm hover:shadow"
+					className="flex flex-1 items-center justify-center gap-2 rounded-2xl px-4 py-3.5 transition-colors"
+					style={{ border: "0.5px solid var(--dsw-border-l3)", fontSize: 14 }}
+					onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+					onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 					onClick={() => setAdding("builtin")}
 				>
-					<div className="w-7 h-7 rounded-full clay-inset flex items-center justify-center text-emerald-600 group-hover:scale-110 transition-transform">
-						<IconPlusOutline16 size={15} />
-					</div>
-					<span>{t.addProvider}</span>
+					<IconPlusOutline16 size={15} />
+					{t.addProvider}
 				</button>
 				<button
-					type="button"
-					className="py-3.5 px-5 rounded-2xl clay-card text-slate-800 dark:text-slate-100 font-bold flex items-center justify-center gap-2 hover:-translate-y-0.5 active:translate-y-0.5 transition-all cursor-pointer group shadow-sm hover:shadow"
+					className="flex flex-1 items-center justify-center gap-2 rounded-2xl px-4 py-3.5 transition-colors"
+					style={{ border: "0.5px solid var(--dsw-border-l3)", fontSize: 14 }}
+					onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+					onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 					onClick={() => setAdding("custom")}
 				>
-					<div className="w-7 h-7 rounded-full clay-inset flex items-center justify-center text-orange-600 group-hover:scale-110 transition-transform">
-						<IconPlusOutline16 size={15} />
-					</div>
-					<span>{t.addCustomProvider}</span>
+					<IconPlusOutline16 size={15} />
+					{t.addCustomProvider}
 				</button>
 			</div>
 
-			{/* 路由状态提示 */}
-			<div className="clay-card p-4 rounded-2xl flex items-center gap-3 bg-gradient-to-r from-emerald-50/50 to-sky-50/50 dark:from-emerald-950/20 dark:to-sky-950/20 text-xs text-slate-600 dark:text-slate-300 border border-emerald-100/60 dark:border-emerald-950/40">
-				<span className="text-emerald-500 font-bold flex items-center gap-1.5 flex-none">
-					<span className="w-2 h-2 rounded-full bg-emerald-500 inline-block" />
-					路由提示:
-				</span>
-				<span>请求使用当前选定的模型与供应商；此处未配置自动故障转移。</span>
-			</div>
-
 			{adding ? (
 				<ProviderSetupModal
 					mode={adding}
@@ -1743,115 +1686,59 @@ function ToolsSection({
 	return (
 		<div className="flex flex-col gap-5">
 			<div>
-				<div style={{ fontSize: 16, fontWeight: 600, color: "var(--dsw-label-primary)" }}>{t.toolsSection}</div>
+				<div style={{ fontSize: 14, fontWeight: 400 }}>{t.toolsSection}</div>
 				<div className="mt-0.5" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>
-					当前会话生效的工具与权限预设；主会话不提供系统级沙盒隔离
-				</div>
-			</div>
-
-			{/* 3-tier permission modes (Screen 5) */}
-			<div className="flex flex-col gap-2">
-				<div className="text-xs font-medium text-slate-500">运行权限预设</div>
-				<div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
-					<button
-						type="button"
-						className={`clay-card p-3 rounded-2xl text-left transition-all ${
-							toolPreset === "readonly" ? "ring-2 ring-emerald-500 bg-white dark:bg-slate-800 shadow-md" : "bg-white/70 dark:bg-slate-900/60 opacity-85 hover:opacity-100"
-						}`}
-						onClick={() => onToolPresetChange("readonly")}
-					>
-						<div className="font-semibold text-xs text-slate-800 dark:text-slate-100 flex items-center justify-between">
-							<span>{t.toolReadonly}</span>
-							{toolPreset === "readonly" && <IconCheckOutline14 className="text-emerald-500" size={13} />}
-						</div>
-						<div className="text-[11px] text-slate-500 mt-1 leading-relaxed">仅读取文件与搜索，禁止修改系统或执行命令</div>
-					</button>
-
-					<button
-						type="button"
-						className={`clay-card p-3 rounded-2xl text-left transition-all ${
-							toolPreset === "standard" ? "ring-2 ring-emerald-500 bg-white dark:bg-slate-800 shadow-md" : "bg-white/70 dark:bg-slate-900/60 opacity-85 hover:opacity-100"
-						}`}
-						onClick={() => onToolPresetChange("standard")}
-					>
-						<div className="font-semibold text-xs text-slate-800 dark:text-slate-100 flex items-center justify-between">
-							<span>{t.toolStandard}</span>
-							{toolPreset === "standard" && <IconCheckOutline14 className="text-emerald-500" size={13} />}
-						</div>
-						<div className="text-[11px] text-slate-500 mt-1 leading-relaxed">常规开发工具集，终端执行与高危修改需确认</div>
-					</button>
-
-					<button
-						type="button"
-						className={`clay-card p-3 rounded-2xl text-left transition-all ${
-							toolPreset === "full" ? "ring-2 ring-emerald-500 bg-white dark:bg-slate-800 shadow-md" : "bg-white/70 dark:bg-slate-900/60 opacity-85 hover:opacity-100"
-						}`}
-						onClick={() => onToolPresetChange("full")}
-					>
-						<div className="font-semibold text-xs text-slate-800 dark:text-slate-100 flex items-center justify-between">
-							<span>{t.toolFull}</span>
-							{toolPreset === "full" && <IconCheckOutline14 className="text-emerald-500" size={13} />}
-						</div>
-						<div className="text-[11px] text-slate-500 mt-1 leading-relaxed">允许所有内置与扩展工具无障碍全自动调用</div>
-					</button>
+					{t.toolsSectionDesc}
 				</div>
 			</div>
 
-			{/* Telemetry card / Context caching widget */}
-			<div className="clay-card p-3 rounded-2xl bg-emerald-50/40 dark:bg-emerald-950/20 border border-emerald-200/50 dark:border-emerald-900/40 flex items-center justify-between text-xs">
-				<div className="flex items-center gap-2">
-					<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-					<span className="font-medium text-slate-700 dark:text-slate-200">会话工具:</span>
-					<span className="text-emerald-600 dark:text-emerald-400 font-semibold">{active.size}/{all.length} 已启用</span>
-				</div>
-				<div className="text-slate-400 text-[11px] font-mono">
-					按当前会话工具清单统计
-				</div>
-			</div>
+			<Row title={t.securityToolPreset} desc={t.securityToolPresetDesc}>
+				<SelectOption
+					value={toolPreset}
+					options={[
+						{ value: "readonly", label: t.toolReadonly },
+						{ value: "standard", label: t.toolStandard },
+						{ value: "full", label: t.toolFull },
+					]}
+					onChange={(value) => onToolPresetChange(value as ToolPreset)}
+				/>
+			</Row>
 
 			{all.length === 0 ? (
-				<div className="clay-card rounded-2xl p-6 text-center text-xs text-slate-400">
+				<div className="rounded-2xl p-4" style={{ border: "0.5px dashed var(--dsw-border-l3)", fontSize: 12.5, color: "var(--dsw-label-caption)" }}>
 					{t.toolsNoSession}
 				</div>
 			) : (
-				<div className="flex flex-col gap-2">
-					<div className="flex items-center justify-between text-xs text-slate-500 px-1">
-						<span className="font-medium">{t.toolsCurrentSession}</span>
+				<div className="flex flex-col gap-2.5">
+					<div className="flex items-center gap-2" style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>
+						<span style={{ fontWeight: 600 }}>{t.toolsCurrentSession}</span>
 						<span>{t.toolsActiveCount.replace("{n}", String(active.size)).replace("{total}", String(all.length))}</span>
 					</div>
 					{all.map((tool) => {
 						const on = active.has(tool.name);
 						const desc = tool.description || describe(tool.name);
 						return (
-							<div key={tool.name} className="clay-card flex items-center justify-between p-3 rounded-2xl transition-all hover:translate-x-0.5">
-								<div className="min-w-0 flex-1 pr-3">
-									<div className="flex items-center gap-2">
-										<span className="clay-code-pill px-2.5 py-0.5 text-xs font-mono font-bold text-slate-800 dark:text-slate-200">
-											{tool.name}
-										</span>
-									</div>
+							<div key={tool.name} className="flex items-center gap-3 rounded-2xl px-4 py-2.5" style={{ border: "0.5px solid var(--dsw-border-l2)" }}>
+								<div className="min-w-0 flex-1">
+									<div style={{ fontSize: 13.5, fontWeight: 500, fontFamily: "var(--font-mono)" }}>{tool.name}</div>
 									{desc && (
-										<div className="truncate text-xs text-slate-500 mt-1">
+										<div className="truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 											{desc}
 										</div>
 									)}
 								</div>
 								<button
-									type="button"
-									className={`clay-btn w-12 h-6 rounded-full transition-all duration-200 p-0.5 flex items-center ${
-										on ? "clay-btn-mint justify-end" : "bg-slate-200 dark:bg-slate-700 text-slate-400 justify-start"
-									}`}
+									className="relative h-5 w-9 flex-none rounded-full transition-colors"
+									style={{ background: on ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }}
 									role="switch"
 									aria-checked={on}
 									aria-label={tool.name}
 									disabled={!onSetTools || (on && active.size <= 1)}
 									onClick={() => toggle(tool.name)}
 								>
-									<span className="w-5 h-5 rounded-full bg-white shadow-md flex items-center justify-center text-[10px] font-bold text-emerald-600">
-										{on ? "✓" : "−"}
-									</span>
+									<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: on ? 18 : 2 }} />
 								</button>
-							</div>
+						</div>
 						);
 					})}
 				</div>
@@ -1873,54 +1760,49 @@ interface SkillRow {
 function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileContent?: (path: string, content: string) => void }) {
 	const { t } = useI18n();
 	const [skills, setSkills] = useState<SkillRow[]>([]);
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [busyFile, setBusyFile] = useState<string | null>(null);
 
 	const load = useCallback(async () => {
-		setLoading(true);
-		try {
-			const r = await fetch(`/api/skills${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
-			const j = await r.json();
-			if (!r.ok || !j.success) throw new Error(j.error || t.toastError);
-			setSkills(j.data.skills);
-			setError(null);
-		} catch (cause) {
-			setError(cause instanceof Error ? cause.message : t.toastError);
-		} finally {
-			setLoading(false);
-		}
-	}, [cwd, t.toastError]);
+		const r = await fetch(`/api/skills${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
+		const j = await r.json();
+		if (j.success) setSkills(j.data.skills);
+	}, [cwd]);
 
 	useEffect(() => {
 		void load();
 	}, [load]);
 
-	const action = async (s: SkillRow, kind: "toggle" | "read" | "delete") => {
-		if (busyFile) return;
-		setBusyFile(s.filePath);
-		setError(null);
-		try {
-			const r = await fetch("/api/skills", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ action: kind, filePath: s.filePath, ...(kind === "toggle" ? { disabled: !s.disabled } : {}), cwd }),
-			});
-			const j = await r.json();
-			if (!r.ok || !j.success) throw new Error(j.error || t.toastError);
-			if (kind === "read") onOpenFileContent?.(s.filePath, j.data.content);
-			else await load();
-		} catch (cause) {
-			setError(cause instanceof Error ? cause.message : t.toastError);
-		} finally {
-			setBusyFile(null);
-		}
+	const toggle = async (s: SkillRow) => {
+		const r = await fetch("/api/skills", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ action: "toggle", filePath: s.filePath, disabled: !s.disabled, cwd }),
+		});
+		if ((await r.json()).success) void load();
 	};
 
 	// 查看技能文档：弹大窗口查看器（与项目文件查看器同款，Markdown 可切渲染/源码）
+	const view = async (s: SkillRow) => {
+		const r = await fetch("/api/skills", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ action: "read", filePath: s.filePath, cwd }),
+		});
+		const j = await r.json();
+		if (j.success) onOpenFileContent?.(s.filePath, j.data.content);
+	};
+
+	const [deleteError, setDeleteError] = useState<string | null>(null);
 	const remove = async (s: SkillRow) => {
 		if (!window.confirm(t.confirmDeleteSkill.replace("{name}", s.name))) return;
-		await action(s, "delete");
+		setDeleteError(null);
+		const r = await fetch("/api/skills", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ action: "delete", filePath: s.filePath, cwd }),
+		});
+		const j = await r.json();
+		if (j.success) void load();
+		else setDeleteError(j.error || t.toastError);
 	};
 
 	const scopeLabel = (s: SkillRow["scope"]) => (s === "global" ? t.scopeGlobal : s === "project" ? t.scopeProject : t.scopePackage);
@@ -1928,15 +1810,13 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 	return (
 		<div className="flex flex-col gap-4">
 			<div style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.skillsDesc}</div>
-			{error && (
+			{deleteError && (
 				<div role="alert" className="rounded-lg px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", color: "var(--dsw-danger)" }}>
-					{error} <button type="button" className="underline" onClick={() => void load()}>{t.settingsRetry}</button>
+					{deleteError}
 				</div>
 			)}
-			{!error && skills.length === 0 && (
-				<div role="status" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
-					{loading ? t.skillsLoading : t.skillsEmpty}
-				</div>
+			{skills.length === 0 && (
+				<div style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>—</div>
 			)}
 			<div className="flex flex-col gap-2">
 				{skills.map((s) => (
@@ -1959,8 +1839,7 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 							<button
 								className="rounded-lg px-2.5 py-1"
 								style={{ fontSize: 11.5, color: "var(--dsw-label-tertiary)" }}
-								disabled={busyFile !== null}
-								onClick={() => void action(s, "read")}
+								onClick={() => view(s)}
 							>
 								{t.viewSkillFile}
 							</button>
@@ -1969,7 +1848,6 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 									className="rounded-lg px-2.5 py-1"
 									style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}
 									title={t.deleteSkillHint}
-									disabled={busyFile !== null}
 									onClick={() => void remove(s)}
 								>
 									{t.delete}
@@ -1984,10 +1862,8 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 								className="relative h-5 w-9 flex-none rounded-full transition-colors"
 								style={{ background: s.disabled ? "var(--dsw-border-l3)" : "var(--dsw-accent)" }}
 								role="switch"
-								aria-label={s.name}
 								aria-checked={!s.disabled}
-								disabled={busyFile !== null}
-								onClick={() => void action(s, "toggle")}
+								onClick={() => toggle(s)}
 							>
 							<span
 								className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
@@ -2017,7 +1893,6 @@ function PluginsSection({ cwd }: { cwd: string }) {
 	const [busy, setBusy] = useState(false);
 	const [busyKey, setBusyKey] = useState<string | null>(null);
 	const [toast, setToast] = useState<{ ok: boolean; msg: string; loading?: boolean } | null>(null);
-	const [loadError, setLoadError] = useState<string | null>(null);
 	const [menuKey, setMenuKey] = useState<string | null>(null);
 	const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -2031,17 +1906,13 @@ function PluginsSection({ cwd }: { cwd: string }) {
 	}, []);
 
 	const load = useCallback(async () => {
-		try {
-			const r = await fetch(`/api/plugins${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
-			const j = await r.json();
-			if (!r.ok || !j.success) throw new Error(j.error || t.toastError);
+		const r = await fetch(`/api/plugins${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
+		const j = await r.json();
+		if (j.success) {
 			setPackages(j.data.packages);
 			setExtensions(j.data.extensions);
-			setLoadError(null);
-		} catch (error) {
-			setLoadError(error instanceof Error ? error.message : t.toastError);
 		}
-	}, [cwd, t.toastError]);
+	}, [cwd]);
 
 	useEffect(() => {
 		void load();
@@ -2141,11 +2012,6 @@ function PluginsSection({ cwd }: { cwd: string }) {
 				<div className="mt-1" style={{ fontSize: 13, color: "var(--dsw-label-tertiary)" }}>
 					{t.pluginPageDesc}
 				</div>
-				{loadError && (
-					<div role="alert" className="mt-3 rounded-xl px-3 py-2" style={{ fontSize: 12.5, color: "var(--dsw-danger)", background: "var(--dsw-hover)" }}>
-						{loadError} <button type="button" className="underline" onClick={() => void load()}>{t.settingsRetry}</button>
-					</div>
-				)}
 			</div>
 
 			{toast && (
@@ -2226,11 +2092,8 @@ function PluginsSection({ cwd }: { cwd: string }) {
 								try {
 									const r = await fetch("/api/plugins", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "reload", cwd }) });
 									const j = await r.json();
-									if (!r.ok || !j.success) throw new Error(j.error || t.toastError);
-									notify(true, t.reloadedSessions.replace("{loaders}", String(j.data?.loaders ?? 0)).replace("{sessions}", String(j.data?.sessions ?? 0)));
-									await load();
-								} catch (error) {
-									notify(false, error instanceof Error ? error.message : t.toastError);
+									notify(j.success, j.success ? t.reloadedSessions.replace("{loaders}", String(j.data?.loaders ?? 0)).replace("{sessions}", String(j.data?.sessions ?? 0)) : j.error);
+									if (j.success) await load();
 								} finally {
 									setBusy(false);
 								}