@rexvane/piweb 0.3.15 → 0.3.16

package/src/components/SettingsPanel.tsx

@@ -95,57 +95,80 @@ export function SettingsPanel({
 			}}
 		>
 			<div
-				className="settings-dialog glass-modal flex overflow-hidden"
+				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"
 				style={{
-					width: 800,
-					maxWidth: "calc(100vw - 48px)",
-					height: "min(800px, calc(100vh - 48px))",
-					borderRadius: 32,
-					boxShadow: "var(--dsw-elevation-prominent)",
+					width: 960,
+					maxWidth: "calc(100vw - 32px)",
+					height: "min(840px, calc(100vh - 48px))",
+					borderRadius: 36,
 				}}
 			>
-				{/* 左导航（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}
+				{/* 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>
 					</div>
-					{navItems.map((n) => (
+					<div className="flex items-center gap-2">
 						<button
-							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)}
+							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")}
 						>
-							{section === n.id ? <span style={{ color: "var(--dsw-accent)" }}>{n.icon}</span> : n.icon}
-							{n.label}
-						</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}
+							<IconDownloadOutline16 size={14} className="text-sky-500" />
+							<span>{t.openConfigFile}</span>
 						</button>
-						<button className="icon-btn" onClick={onClose}>
+						<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}
+						>
 							<IconCloseOutline14 size={15} />
 						</button>
 					</div>
-					<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+				</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>
+
+					{/* 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">
 						{section === "general" && <GeneralSection lang={lang} setLang={setLang} />}
 						{section === "models" && <ModelsSection />}
 						{section === "skills" && <SkillsSection cwd={cwd} onOpenFileContent={onOpenFileContent} />}
@@ -161,6 +184,16 @@ 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,
@@ -169,7 +202,7 @@ function GeneralSection({
 	setLang: (l: "zh" | "en") => void;
 }) {
 	const { t } = useI18n();
-	const [theme, setTheme] = useState<PebrelTheme>("dsh");
+	const [theme, setTheme] = useState<PebrelTheme>("piweb");
 	const [themeMode, setThemeMode] = useState<ThemeMode>("system");
 	const [fontSize, setFontSize] = useState(14);
 	const [chatFontSize, setChatFontSize] = useState(14);
@@ -179,6 +212,8 @@ 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);
@@ -333,14 +368,17 @@ function GeneralSection({
 		}
 	};
 
-	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" },
-	];
+	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],
+	);
 
 	return (
 		<div className="flex flex-col gap-6">
@@ -361,38 +399,34 @@ function GeneralSection({
 			/>
 			</Row>
 			<RowColumn title={t.appearance}>
-				<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 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>
 			</RowColumn>
 			<RowColumn title={t.appearanceMode}>
-				<div className="flex w-full flex-wrap gap-2">
+				<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">
 					{([
 						{ id: "light", label: t.themeLight },
 						{ id: "dark", label: t.themeDark },
@@ -400,17 +434,12 @@ function GeneralSection({
 					] as { id: ThemeMode; label: string }[]).map((mode) => (
 						<button
 							key={mode.id}
-							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",
-							}}
+							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"
+							}`}
 							aria-pressed={themeMode === mode.id}
 							onClick={() => pickThemeMode(mode.id)}
 						>
@@ -437,7 +466,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-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-label={t.autoCompact} 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)}
@@ -446,7 +475,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-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-label={t.autoRetry} 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)}
@@ -479,12 +508,24 @@ 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 () => {
-							await fetch("/api/web-auth", { method: "DELETE" }).catch(() => {});
-							window.location.href = "/login";
+							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);
+							}
 						}}
 					>
 						{t.logout}
@@ -695,7 +736,7 @@ function SelectOption({
 
 function Row({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) {
 	return (
-		<div className="hairline-b flex items-center justify-between gap-6 pb-5">
+		<div className="settings-row 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 && (
@@ -704,7 +745,7 @@ function Row({ title, desc, children }: { title: string; desc?: string; children
 					</div>
 				)}
 			</div>
-			<div className="flex-none">{children}</div>
+			<div className="settings-row-control flex-none">{children}</div>
 		</div>
 	);
 }
@@ -729,10 +770,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="flex items-center gap-2">
+		<div className="clay-inset flex items-center gap-1.5 p-1 rounded-2xl bg-slate-100 dark:bg-slate-900">
 			<button
-				className="icon-btn"
-				style={{ width: 26, height: 26, border: "0.5px solid var(--dsw-border-l3)", borderRadius: 8 }}
+				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"
 				disabled={value <= 12}
 				onClick={() => onChange(value - 1)}
 				aria-label="decrease font size"
@@ -740,15 +781,16 @@ function FontSizeStepper({ value, onChange, max }: { value: number; onChange: (v
 				−
 			</button>
 			<button
-				style={{ minWidth: 48, textAlign: "center", fontSize: 13, color: value === 14 ? "var(--dsw-label-tertiary)" : "var(--dsw-label-primary)" }}
-				title="reset"
+				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"
 				onClick={() => onChange(14)}
 			>
 				{value} px
 			</button>
 			<button
-				className="icon-btn"
-				style={{ width: 26, height: 26, border: "0.5px solid var(--dsw-border-l3)", borderRadius: 8 }}
+				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"
 				disabled={value >= max}
 				onClick={() => onChange(value + 1)}
 				aria-label="increase font size"
@@ -1203,13 +1245,19 @@ function ModelsSection() {
 
 	return (
 		<div className="flex flex-col gap-5">
-			<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}
+			{/* 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 className="mt-1" style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>
-					{t.customModelIdentityNotice}
+				<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>
 			</div>
 
@@ -1233,8 +1281,8 @@ function ModelsSection() {
 					const editingThis = editing === p.id;
 					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="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 items-center gap-3">
 									<ProviderBrand id={p.id} name={providerName(p.id)} size={34} />
 									<div className="min-w-0 flex-1">
@@ -1452,30 +1500,39 @@ function ModelsSection() {
 				})}
 			</div>
 
-			{/* 两个添加按钮 */}
-			<div className="flex gap-3">
+			{/* 两个添加按钮: Large Tactile Extruded Clay Buttons (Screen 6) */}
+			<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
 				<button
-					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")}
+					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"
 					onClick={() => setAdding("builtin")}
 				>
-					<IconPlusOutline16 size={15} />
-					{t.addProvider}
+					<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>
 				</button>
 				<button
-					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")}
+					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"
 					onClick={() => setAdding("custom")}
 				>
-					<IconPlusOutline16 size={15} />
-					{t.addCustomProvider}
+					<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>
 				</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}
@@ -1686,59 +1743,115 @@ function ToolsSection({
 	return (
 		<div className="flex flex-col gap-5">
 			<div>
-				<div style={{ fontSize: 14, fontWeight: 400 }}>{t.toolsSection}</div>
+				<div style={{ fontSize: 16, fontWeight: 600, color: "var(--dsw-label-primary)" }}>{t.toolsSection}</div>
 				<div className="mt-0.5" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>
-					{t.toolsSectionDesc}
+					当前会话生效的工具与权限预设；主会话不提供系统级沙盒隔离
 				</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>
+			{/* 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>
+				</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>
 
 			{all.length === 0 ? (
-				<div className="rounded-2xl p-4" style={{ border: "0.5px dashed var(--dsw-border-l3)", fontSize: 12.5, color: "var(--dsw-label-caption)" }}>
+				<div className="clay-card rounded-2xl p-6 text-center text-xs text-slate-400">
 					{t.toolsNoSession}
 				</div>
 			) : (
-				<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>
+				<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>
 						<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="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>
+							<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>
 									{desc && (
-										<div className="truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+										<div className="truncate text-xs text-slate-500 mt-1">
 											{desc}
 										</div>
 									)}
 								</div>
 								<button
-									className="relative h-5 w-9 flex-none rounded-full transition-colors"
-									style={{ background: on ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }}
+									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"
+									}`}
 									role="switch"
 									aria-checked={on}
 									aria-label={tool.name}
 									disabled={!onSetTools || (on && active.size <= 1)}
 									onClick={() => toggle(tool.name)}
 								>
-									<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: on ? 18 : 2 }} />
+									<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>
 								</button>
-						</div>
+							</div>
 						);
 					})}
 				</div>
@@ -1760,49 +1873,54 @@ 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 () => {
-		const r = await fetch(`/api/skills${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
-		const j = await r.json();
-		if (j.success) setSkills(j.data.skills);
-	}, [cwd]);
+		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]);
 
 	useEffect(() => {
 		void load();
 	}, [load]);
 
-	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();
+	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);
+		}
 	};
 
 	// 查看技能文档：弹大窗口查看器（与项目文件查看器同款，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;
-		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);
+		await action(s, "delete");
 	};
 
 	const scopeLabel = (s: SkillRow["scope"]) => (s === "global" ? t.scopeGlobal : s === "project" ? t.scopeProject : t.scopePackage);
@@ -1810,13 +1928,15 @@ 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>
-			{deleteError && (
+			{error && (
 				<div role="alert" className="rounded-lg px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-hover)", color: "var(--dsw-danger)" }}>
-					{deleteError}
+					{error} <button type="button" className="underline" onClick={() => void load()}>{t.settingsRetry}</button>
 				</div>
 			)}
-			{skills.length === 0 && (
-				<div style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>—</div>
+			{!error && skills.length === 0 && (
+				<div role="status" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
+					{loading ? t.skillsLoading : t.skillsEmpty}
+				</div>
 			)}
 			<div className="flex flex-col gap-2">
 				{skills.map((s) => (
@@ -1839,7 +1959,8 @@ 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)" }}
-								onClick={() => view(s)}
+								disabled={busyFile !== null}
+								onClick={() => void action(s, "read")}
 							>
 								{t.viewSkillFile}
 							</button>
@@ -1848,6 +1969,7 @@ 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}
@@ -1862,8 +1984,10 @@ 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}
-								onClick={() => toggle(s)}
+								disabled={busyFile !== null}
+								onClick={() => void action(s, "toggle")}
 							>
 							<span
 								className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
@@ -1893,6 +2017,7 @@ 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);
 
@@ -1906,13 +2031,17 @@ function PluginsSection({ cwd }: { cwd: string }) {
 	}, []);
 
 	const load = useCallback(async () => {
-		const r = await fetch(`/api/plugins${cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""}`);
-		const j = await r.json();
-		if (j.success) {
+		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);
 			setPackages(j.data.packages);
 			setExtensions(j.data.extensions);
+			setLoadError(null);
+		} catch (error) {
+			setLoadError(error instanceof Error ? error.message : t.toastError);
 		}
-	}, [cwd]);
+	}, [cwd, t.toastError]);
 
 	useEffect(() => {
 		void load();
@@ -2012,6 +2141,11 @@ 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 && (
@@ -2092,8 +2226,11 @@ 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();
-									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();
+									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);
 								} finally {
 									setBusy(false);
 								}