@rexvane/piweb 0.3.20 → 0.3.22

package/src/components/SettingsPanel.tsx

@@ -23,6 +23,7 @@ import {
 	IconShieldOutline16,
 	IconSkillOutline16,
 	IconTrashOutline16,
+	IconWarningOutline16,
 } from "@/components/icons";
 import { ProviderBrand } from "@/components/ProviderBrand";
 import {
@@ -32,10 +33,38 @@ import {
 	type CustomProviderSetup,
 } from "@/components/ProviderSetupModal";
 import { RemoteSection } from "@/components/RemoteSection";
+import { CopyCommand } from "@/components/update/CopyCommand";
+import { checkUpdate, loadUpdates, runUpdate, useUpdates, type UpdateTarget } from "@/components/update/update-store";
 import { useI18n } from "@/i18n";
+import { fmtTokens } from "@/lib/format";
 import { applyPebrelTheme, loadPebrelTheme, loadThemeMode, type PebrelTheme, type ThemeMode } from "@/lib/theme";
 import { applyFontChoice, CUSTOM_PREFIX, FONT_PRESETS, loadFontChoice } from "@/lib/font";
-import { modelDraftFromConfig, serializeProviderDraft, validateModelDrafts, type ModelDraft } from "@/lib/model-draft";
+import {
+	DEFAULT_STREAM_SETTINGS,
+	getStreamSettings,
+	setStreamSettings,
+	STREAM_SPEED_MAX,
+	STREAM_SPEED_MIN,
+	STREAM_STYLES,
+	type StreamSettings,
+	type StreamStyle,
+} from "@/lib/chat/stream-settings";
+import {
+	customModelGaps,
+	fillModelFields,
+	formatCapacity,
+	isInertProviderConfig,
+	modelDraftFromCatalog,
+	modelDraftFromConfig,
+	modelDraftsFromProviderConfig,
+	parseCapacity,
+	PI_MODEL_FALLBACKS,
+	serializeProviderDraft,
+	validateModelDrafts,
+	type CustomModelGap,
+	type ModelDraft,
+	type ModelFieldFill,
+} from "@/lib/model-draft";
 import { customApiOptions } from "@/lib/provider-display";
 import { quotaWindowKind, supportsUsageProbe, type BalanceAmount, type BalanceDetailKey, type ProviderUsage, type QuotaWindow, type XaiUsage } from "@/lib/provider-usage";
 import type { ProviderView } from "@/lib/models-service";
@@ -174,6 +203,7 @@ function GeneralSection({
 	const [themeMode, setThemeMode] = useState<ThemeMode>("system");
 	const [fontSize, setFontSize] = useState(14);
 	const [chatFontSize, setChatFontSize] = useState(14);
+	const [stream, setStream] = useState<StreamSettings>(DEFAULT_STREAM_SETTINGS);
 	const [enterBehavior, setEnterBehavior] = useState<EnterBehavior>("steer");
 	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);
@@ -222,6 +252,8 @@ function GeneralSection({
 		if (!Number.isNaN(fs)) setFontSize(fs);
 		const chatFs = parseInt(localStorage.getItem("piweb.chatFontSize") ?? "14", 10);
 		if (!Number.isNaN(chatFs)) setChatFontSize(chatFs);
+		// 流式输出偏好与主题/字体同源（localStorage），同样等挂载后再读，避免水合不一致
+		setStream(getStreamSettings());
 		setEnterBehavior(getEnterBehavior());
 		void loadRemoteSettings();
 	}, []);
@@ -254,6 +286,9 @@ function GeneralSection({
 		document.documentElement.style.setProperty("--piweb-chat-font-size", `${v}px`);
 	};
 
+	/** 流式输出：样式 / 速度 / 光标。改完即持久化，正在流出的回答下一帧就换（订阅在 MarkdownBlock 里） */
+	const pickStream = (patch: Partial<StreamSettings>) => setStream(setStreamSettings(patch));
+
 	const pickEnter = (v: EnterBehavior) => {
 		setEnterBehavior(v);
 		saveEnterBehavior(v);
@@ -316,6 +351,20 @@ function GeneralSection({
 		{ id: "pebrel", label: t.themePebrel, light: "#F3F4F6", dark: "#0F111A", accent: "#52A8FF" },
 	];
 
+	const streamStyleText: Record<StreamStyle, { label: string; desc: string }> = {
+		smooth: { label: t.streamStyleSmooth, desc: t.streamStyleSmoothDesc },
+		typewriter: { label: t.streamStyleTypewriter, desc: t.streamStyleTypewriterDesc },
+		fade: { label: t.streamStyleFade, desc: t.streamStyleFadeDesc },
+		instant: { label: t.streamStyleInstant, desc: t.streamStyleInstantDesc },
+	};
+	const streamSpeedText: Record<number, string> = {
+		1: t.streamSpeed1,
+		2: t.streamSpeed2,
+		3: t.streamSpeed3,
+		4: t.streamSpeed4,
+		5: t.streamSpeed5,
+	};
+
 	return (
 		<div className="flex flex-col gap-6">
 			{(settingsLoading || settingsError) && (
@@ -405,6 +454,79 @@ function GeneralSection({
 			<Row title={t.fontMonoFamily} desc={t.fontMonoFamilyDesc}>
 				<FontFamilyPicker scope="mono" />
 			</Row>
+			<RowColumn title={t.streamStyleTitle} desc={t.streamStyleDesc}>
+				<div className="flex w-full flex-wrap gap-2">
+					{STREAM_STYLES.map((id) => {
+						const active = stream.style === id;
+						return (
+							<button
+								key={id}
+								type="button"
+								className="flex flex-col items-start gap-1 text-left transition-colors"
+								style={{
+									flex: "1 1 150px",
+									padding: "12px 16px",
+									borderRadius: 14,
+									border: `0.5px solid ${active ? "var(--dsw-border-strong)" : "var(--dsw-border-l4)"}`,
+									background: active ? "var(--dsw-module-platform)" : "transparent",
+									color: "var(--dsw-label-primary)",
+									lineHeight: "18px",
+								}}
+								aria-pressed={active}
+								onClick={() => pickStream({ style: id })}
+							>
+								<span className="flex items-center gap-1.5" style={{ fontSize: 14 }}>
+									{active ? <IconCheckOutline14 size={13} /> : null}
+									{streamStyleText[id].label}
+								</span>
+								<span style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{streamStyleText[id].desc}</span>
+							</button>
+						);
+					})}
+				</div>
+			</RowColumn>
+			<RowColumn title={t.streamSpeedTitle} desc={t.streamSpeedDesc}>
+				<div className="flex w-full flex-wrap gap-2">
+					{Array.from({ length: STREAM_SPEED_MAX - STREAM_SPEED_MIN + 1 }, (_, i) => STREAM_SPEED_MIN + i).map((level) => {
+						const active = stream.speed === level;
+						return (
+							<button
+								key={level}
+								type="button"
+								className="transition-colors disabled:opacity-50"
+								// 即时样式不排队，速度对它没有意义：置灰，免得以为调了没反应
+								disabled={stream.style === "instant"}
+								style={{
+									flex: "1 1 84px",
+									padding: "10px 8px",
+									borderRadius: 12,
+									border: `0.5px solid ${active ? "var(--dsw-border-strong)" : "var(--dsw-border-l4)"}`,
+									background: active ? "var(--dsw-module-platform)" : "transparent",
+									color: active ? "var(--dsw-label-primary)" : "var(--dsw-label-secondary)",
+									fontSize: 13,
+								}}
+								aria-pressed={active}
+								onClick={() => pickStream({ speed: level })}
+							>
+								{streamSpeedText[level]}
+							</button>
+						);
+					})}
+				</div>
+			</RowColumn>
+			<Row title={t.streamCaretTitle} desc={t.streamCaretDesc}>
+				<button
+					type="button"
+					className="relative h-5 w-9 flex-none rounded-full transition-colors"
+					style={{ background: stream.caret ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }}
+					role="switch"
+					aria-checked={stream.caret}
+					aria-label={t.streamCaretTitle}
+					onClick={() => pickStream({ caret: !stream.caret })}
+				>
+					<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: stream.caret ? 18 : 2 }} />
+				</button>
+			</Row>
 			<Row title={t.enterBehavior} desc={t.enterBehaviorDesc}>
 				<SelectOption
 				value={enterBehavior}
@@ -479,61 +601,20 @@ function VersionLink({ href, value }: { href: string; value?: string }) {
 	);
 }
 
-type UpdatePhase = "idle" | "checking" | "available" | "updating" | "latest" | "updated" | "error";
-
 /** 检查更新 / 更新控件：npm 安装的 piweb 走 npm install -g @rexvane/piweb@latest（服务端固定参数），
- *  Git 检出仍走 git pull + 本地构建；pi 走 npm install @latest。 */
-function UpdateControl({ target }: { target: "piweb" | "pi" }) {
+ *  Git 检出仍走 git pull + 本地构建；pi 走 npm install @latest（npm 安装只换依赖、不重建）。
+ *  状态和右下角提示条共用（update-store）：启动检查的结果一到，这里直接显示「更新到 vX」或「已是最新」。 */
+function UpdateControl({ target }: { target: UpdateTarget }) {
 	const { t } = useI18n();
-	const [phase, setPhase] = useState<UpdatePhase>("idle");
-	const [latest, setLatest] = useState("");
-	const [command, setCommand] = useState("");
-	const [error, setError] = useState("");
+	const { phase, latest, command, error, busy: sessionBusy } = useUpdates().targets[target];
 	const busy = phase === "checking" || phase === "updating";
 
-	const post = async (action: "check" | "update") => {
-		const r = await fetch("/api/update", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ target, action }),
-		});
-		return r.json();
-	};
-
-	const check = async () => {
-		setPhase("checking");
-		setError("");
-		try {
-			const j = await post("check");
-			if (!j.success) throw new Error(j.error);
-			if (j.data.canUpdate) {
-				setLatest(j.data.latest);
-				setCommand(j.data.command ?? "");
-				setPhase("available");
-			} else {
-				setPhase("latest");
-			}
-		} catch (e: any) {
-			setError(String(e?.message ?? e));
-			setPhase("error");
-		}
-	};
-
-	const run = async () => {
-		setPhase("updating");
-		try {
-			const j = await post("update");
-			if (!j.success) throw new Error(j.error);
-			setLatest(j.data.version ?? latest);
-			setPhase("updated");
-		} catch (e: any) {
-			setError(String(e?.message ?? e));
-			setPhase("error");
-		}
-	};
+	useEffect(() => {
+		void loadUpdates();
+	}, []);
 
 	if (phase === "idle" || phase === "latest" || phase === "error") {
-		const label = phase === "latest" ? t.upToDate : phase === "error" ? t.updateFailed : t.checkUpdate;
+		const label = phase === "latest" ? t.upToDate : phase === "error" ? (sessionBusy ? t.updateBusy : t.updateFailed) : t.checkUpdate;
 		const color = phase === "latest" ? "var(--dsw-label-tertiary)" : phase === "error" ? "var(--dsw-danger)" : "var(--dsw-label-primary)";
 		return (
 			<button
@@ -542,7 +623,7 @@ function UpdateControl({ target }: { target: "piweb" | "pi" }) {
 				style={{ height: 26, padding: "0 10px", fontSize: 12, color }}
 				title={error || undefined}
 				disabled={busy}
-				onClick={() => void check()}
+				onClick={() => void checkUpdate(target)}
 			>
 				{label}
 			</button>
@@ -553,19 +634,24 @@ function UpdateControl({ target }: { target: "piweb" | "pi" }) {
 		if (command) {
 			return (
 				<span className="flex flex-col items-end gap-0.5" style={{ maxWidth: 300 }}>
-					<code style={{ fontSize: 11, color: "var(--dsw-label-primary)", whiteSpace: "nowrap", overflowX: "auto", maxWidth: "100%" }}>{command}</code>
+					<CopyCommand command={command} />
 					<span style={{ fontSize: 11, color: "var(--dsw-label-tertiary)", textAlign: "right" }}>{t.updateManualHint}</span>
 				</span>
 			);
 		}
 		return (
-			<button type="button" className="btn-primary-white" style={{ height: 26, padding: "0 12px", fontSize: 12 }} onClick={() => void run()}>
+			<button type="button" className="btn-primary-white" style={{ height: 26, padding: "0 12px", fontSize: 12 }} onClick={() => void runUpdate(target)}>
 				{t.updateTo.replace("{v}", latest)}
 			</button>
 		);
 	}
 	if (phase === "updated") {
-		return <span style={{ fontSize: 12, color: "var(--dsw-success)", maxWidth: 260, textAlign: "right" }}>{t.updatedTo.replace("{v}", latest)}</span>;
+		return (
+			<span className="flex flex-col items-end gap-0.5" style={{ maxWidth: 280, textAlign: "right" }}>
+				<span style={{ fontSize: 12, color: "var(--dsw-success)" }}>{t.updatedTo.replace("{v}", latest)}</span>
+				<span style={{ fontSize: 11, color: "var(--dsw-label-tertiary)" }}>{t.updateRestartHint}</span>
+			</span>
+		);
 	}
 	return (
 		<span className="flex items-center gap-1.5" style={{ fontSize: 12, color: "var(--dsw-label-tertiary)" }}>
@@ -802,12 +888,163 @@ function FontFamilyPicker({ scope }: { scope: "ui" | "mono" }) {
 
 // ---------- Models ----------
 
+type AuditRow = { contextWindow: string; maxTokens: string; vision: "" | "image" | "text" };
+const EMPTY_AUDIT_ROW: AuditRow = { contextWindow: "", maxTokens: "", vision: "" };
+
+/**
+ * 模型配置体检：models[] 里有字段没写的模型，pi 会按 PI_MODEL_FALLBACKS / 纯文本处理。
+ * 不替用户猜——空着的格子由用户填（支持 256K / 1M 写法），保存时只补空字段，已写的值不改。
+ */
+function ModelFieldAudit({ gaps, providerLabel, busy, onSave }: {
+	gaps: CustomModelGap[];
+	providerLabel: (id: string) => string;
+	busy: boolean;
+	/** 保存成功返回 true（之后清空填写） */
+	onSave: (fills: ModelFieldFill[]) => Promise<boolean>;
+}) {
+	const { t } = useI18n();
+	const [rows, setRows] = useState<Record<string, AuditRow>>({});
+	const keyOf = (gap: CustomModelGap) => `${gap.provider}\u0000${gap.index}`;
+	const rowOf = (gap: CustomModelGap) => rows[keyOf(gap)] ?? EMPTY_AUDIT_ROW;
+	const edit = (gap: CustomModelGap, patch: Partial<AuditRow>) =>
+		setRows((current) => ({ ...current, [keyOf(gap)]: { ...(current[keyOf(gap)] ?? EMPTY_AUDIT_ROW), ...patch } }));
+	const visionGaps = gaps.filter((gap) => gap.missing.includes("input"));
+	const markVision = (vision: "image" | "text") =>
+		setRows((current) => {
+			const next = { ...current };
+			for (const gap of visionGaps) next[keyOf(gap)] = { ...(next[keyOf(gap)] ?? EMPTY_AUDIT_ROW), vision };
+			return next;
+		});
+
+	// 每行填的文本 → 要写的值；有一格格式不对就不让保存（那一格标红）
+	let invalid = false;
+	const fills: ModelFieldFill[] = [];
+	for (const gap of gaps) {
+		const row = rows[keyOf(gap)];
+		if (!row) continue;
+		const contextWindow = gap.missing.includes("contextWindow") ? parseCapacity(row.contextWindow) : undefined;
+		const maxTokens = gap.missing.includes("maxTokens") ? parseCapacity(row.maxTokens) : undefined;
+		if (Number.isNaN(contextWindow) || Number.isNaN(maxTokens)) {
+			invalid = true;
+			continue;
+		}
+		const vision = gap.missing.includes("input") && row.vision ? row.vision === "image" : undefined;
+		if (contextWindow === undefined && maxTokens === undefined && vision === undefined) continue;
+		fills.push({ provider: gap.provider, index: gap.index, id: gap.id, contextWindow, maxTokens, vision });
+	}
+
+	const save = async () => {
+		if (await onSave(fills)) setRows({});
+	};
+
+	const capacityCell = (gap: CustomModelGap, field: "contextWindow" | "maxTokens", label: string) => {
+		if (!gap.missing.includes(field)) {
+			return (
+				<span className="truncate" style={{ fontFamily: "var(--font-mono)", color: "var(--dsw-label-secondary)" }}>
+					<span className="sm:hidden" style={{ color: "var(--dsw-label-caption)" }}>{label} </span>
+					{formatCapacity(gap[field]) || "—"}
+				</span>
+			);
+		}
+		const text = rowOf(gap)[field];
+		return (
+			<input
+				className="pw-audit-field"
+				style={{ fontFamily: "var(--font-mono)" }}
+				value={text}
+				onChange={(event) => edit(gap, { [field]: event.target.value })}
+				placeholder={label}
+				aria-label={`${gap.id} ${label}`}
+				aria-invalid={Number.isNaN(parseCapacity(text)) || undefined}
+				disabled={busy}
+			/>
+		);
+	};
+
+	return (
+		<section className="flex flex-col gap-3 rounded-2xl p-4" style={{ border: "0.5px solid var(--dsw-border-l3)", background: "var(--dsw-hover)" }} data-testid="model-audit">
+			<div className="flex items-start gap-2.5">
+				<IconWarningOutline16 size={16} style={{ flex: "none", marginTop: 1, color: "var(--dsw-warn)" }} />
+				<div className="min-w-0 flex-1">
+					<div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.modelAuditTitle.replace("{n}", String(gaps.length))}</div>
+					<div className="mt-1" style={{ fontSize: 12, color: "var(--dsw-label-caption)", lineHeight: 1.65 }}>
+						{t.modelAuditDesc
+							.replace("{ctx}", formatCapacity(PI_MODEL_FALLBACKS.contextWindow))
+							.replace("{out}", formatCapacity(PI_MODEL_FALLBACKS.maxTokens))}
+					</div>
+				</div>
+			</div>
+
+			<div style={{ fontSize: 12.5 }} role="table" aria-label={t.modelAuditTitle.replace("{n}", String(gaps.length))}>
+				<div role="row" className="hidden gap-x-2 px-1 pb-1.5 sm:grid sm:grid-cols-[minmax(0,1fr)_92px_92px_108px]" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+					<span role="columnheader">{t.modelAuditColModel}</span>
+					<span role="columnheader">{t.modelAuditColContext}</span>
+					<span role="columnheader">{t.modelAuditColOutput}</span>
+					<span role="columnheader">{t.modelAuditColVision}</span>
+				</div>
+				<div className="max-h-[320px] overflow-y-auto" style={{ borderTop: "0.5px solid var(--dsw-border-l2)" }}>
+					{gaps.map((gap) => (
+						<div
+							key={keyOf(gap)}
+							role="row"
+							className="grid grid-cols-3 items-center gap-x-2 gap-y-1.5 px-1 py-2 sm:grid-cols-[minmax(0,1fr)_92px_92px_108px]"
+							style={{ borderBottom: "0.5px solid var(--dsw-border-l1)" }}
+						>
+							<div role="cell" className="col-span-3 min-w-0 sm:col-span-1" title={`${gap.provider} / ${gap.id}`}>
+								<div className="truncate" style={{ fontWeight: 500 }}>{gap.name ?? gap.id}</div>
+								<div className="truncate" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
+									{providerLabel(gap.provider)} / {gap.id}
+								</div>
+							</div>
+							<div role="cell" className="min-w-0">{capacityCell(gap, "contextWindow", t.modelAuditColContext)}</div>
+							<div role="cell" className="min-w-0">{capacityCell(gap, "maxTokens", t.modelAuditColOutput)}</div>
+							<div role="cell" className="min-w-0">
+								{gap.missing.includes("input") ? (
+									<select
+										className="pw-audit-field"
+										value={rowOf(gap).vision}
+										onChange={(event) => edit(gap, { vision: event.target.value as AuditRow["vision"] })}
+										aria-label={`${gap.id} ${t.modelAuditColVision}`}
+										disabled={busy}
+									>
+										<option value="">{t.visionUnset}</option>
+										<option value="image">{t.visionOn}</option>
+										<option value="text">{t.visionOff}</option>
+									</select>
+								) : (
+									<span style={{ color: "var(--dsw-label-secondary)" }}>{gap.vision ? t.visionOn : t.visionOff}</span>
+								)}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<div className="flex flex-wrap items-center gap-2">
+				{visionGaps.length > 0 ? (
+					<>
+						<span style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{t.modelAuditVisionQuick}</span>
+						<button className="btn-outline" style={{ height: 28, padding: "0 11px", fontSize: 12.5 }} disabled={busy} onClick={() => markVision("image")}>{t.modelAuditVisionOn}</button>
+						<button className="btn-outline" style={{ height: 28, padding: "0 11px", fontSize: 12.5 }} disabled={busy} onClick={() => markVision("text")}>{t.modelAuditVisionOff}</button>
+					</>
+				) : null}
+				<span className="flex-1" />
+				<button className="btn-primary-white" style={{ height: 32 }} disabled={busy || invalid || fills.length === 0} onClick={() => void save()}>
+					{busy ? t.saving : fills.length ? t.modelAuditSave.replace("{n}", String(fills.length)) : t.modelAuditSaveIdle}
+				</button>
+			</div>
+		</section>
+	);
+}
+
 function ModelsSection() {
 	const { t } = useI18n();
 	const [providers, setProviders] = useState<ProviderView[]>([]);
 	const [custom, setCustom] = useState<{ providers: Record<string, any>; [key: string]: unknown }>({ providers: {} });
 	const [customRevision, setCustomRevision] = useState<string | null>(null);
 	const [secretProviderIds, setSecretProviderIds] = useState<Set<string>>(new Set());
+	// 内置 provider → 目录里的模型 ID：编辑时同 ID 的行写 modelOverrides，「获取可用模型」里不再可选
+	const [catalogModelIds, setCatalogModelIds] = useState<Record<string, string[]>>({});
 	const [editing, setEditing] = useState<string | null>(null);
 	const [keyDraft, setKeyDraft] = useState("");
 	const [adding, setAdding] = useState<"builtin" | "custom" | null>(null);
@@ -886,6 +1123,7 @@ function ModelsSection() {
 				throw new Error("invalid model configuration");
 			}
 			setProviders(j.data.providers);
+			setCatalogModelIds(j.data.catalogModelIds ?? {});
 			setSecretProviderIds(new Set(j.data.customProviders?.secretProviderIds ?? []));
 			setCustom({ ...parsed, providers: parsed.providers ?? {} });
 			setCustomRevision(typeof j.data.customProviders?.revision === "string" ? j.data.customProviders.revision : null);
@@ -1068,6 +1306,10 @@ function ModelsSection() {
 		}
 	};
 
+	// 体检：直接从已载入的配置算（不另发请求），每次保存后 load() 重新载入就自动刷新
+	const gaps = useMemo(() => customModelGaps(custom.providers ?? {}), [custom]);
+	const [auditBusy, setAuditBusy] = useState(false);
+
 	const call = async (body: Record<string, unknown>) => {
 		const j = await request(body);
 		notify(j.success, j.success && j.data?.requiresSessionReopen ? t.modelConfigReopen : j.error);
@@ -1112,6 +1354,18 @@ function ModelsSection() {
 		return call({ action: "saveCustomProviders", revision: customRevision, content: JSON.stringify({ ...custom, providers: content }, null, 2) });
 	};
 
+	/** 体检卡片的保存：只补空字段，走与编辑 provider 同一条写入（revision 乐观锁、密钥由服务端从原文件恢复） */
+	const saveAuditFills = async (fills: ModelFieldFill[]): Promise<boolean> => {
+		const { providers: next, filled } = fillModelFields(custom.providers ?? {}, fills);
+		if (!filled) return true;
+		setAuditBusy(true);
+		try {
+			return Boolean((await saveCustom(next)).success);
+		} finally {
+			setAuditBusy(false);
+		}
+	};
+
 	const providerName = (id: string) => providers.find((p) => p.id === id)?.name ?? id;
 	const credentialSource = (provider: ProviderView) => {
 		const source = provider.authSource;
@@ -1141,10 +1395,28 @@ function ModelsSection() {
 			setCName(typeof override?.name === "string" ? override.name : "");
 			setCModels((override?.models ?? []).map(modelDraftFromConfig));
 		} else {
-			// 内置 provider：从 models.json 覆盖层初始化（若有）
+			// 内置 provider：从 models.json 覆盖层初始化（若有），models[] 定义和 modelOverrides 覆盖都作为行
 			setBBaseUrl(typeof override?.baseUrl === "string" ? override.baseUrl : "");
-			setBModels((override?.models ?? []).map(modelDraftFromConfig));
+			setBModels(modelDraftsFromProviderConfig(override));
+		}
+	};
+
+	const catalogIdsOf = (providerId: string): ReadonlySet<string> => new Set(catalogModelIds[providerId] ?? []);
+
+	/**
+	 * 内置 provider 的条目写回：什么都没覆盖时删掉条目（SDK 不认空条目，会让整份 models.json 存不进去）。
+	 * 前端拿到的配置不含 apiKey，存了密钥的条目不能当成空的删掉。
+	 * 返回 null = models.json 不用动（原本就没有条目、这次也没覆盖任何东西，比如只填了密钥）。
+	 */
+	const withBuiltinEntry = (providerId: string, config: Record<string, unknown>): Record<string, any> | null => {
+		const next = { ...custom.providers };
+		if (isInertProviderConfig(config) && !secretProviderIds.has(providerId)) {
+			if (!Object.prototype.hasOwnProperty.call(next, providerId)) return null;
+			delete next[providerId];
+		} else {
+			next[providerId] = config;
 		}
+		return next;
 	};
 
 	const saveCustomEdit = async () => {
@@ -1178,12 +1450,12 @@ function ModelsSection() {
 		if (invalid) return;
 		setEditBusy(true);
 		try {
-			const next = { ...custom.providers };
-			next[provider.id] = serializeProviderDraft(next[provider.id] ?? {}, {
+			const config = serializeProviderDraft(custom.providers[provider.id] ?? {}, {
 				baseUrl: bBaseUrl,
 				models: bModels,
-			}, provider.apis[0] ?? "openai-completions");
-			const j = await saveCustom(next);
+			}, provider.apis[0] ?? "openai-completions", catalogIdsOf(provider.id));
+			const next = withBuiltinEntry(provider.id, config);
+			const j = next ? await saveCustom(next) : { success: true };
 			if (j.success && keyDraft.trim()) {
 				void call({ action: "setKey", providerId: provider.id, apiKey: keyDraft.trim() });
 				setOauthDone(null);
@@ -1214,8 +1486,9 @@ function ModelsSection() {
 	};
 
 	const saveBuiltinSetup = async ({ providerId, apiKey, config }: BuiltinProviderSetup) => {
-		const next = { ...custom.providers, [providerId]: { ...custom.providers[providerId], ...config } };
-		const result = await saveCustom(next);
+		const next = withBuiltinEntry(providerId, { ...custom.providers[providerId], ...config });
+		// 只填了密钥：models.json 不需要条目，直接去存密钥
+		const result = next ? await saveCustom(next) : { success: true };
 		if (result.success && apiKey) {
 			// 多步认证（Vertex/Bedrock/Cloudflare 等）的后续提示经登录弹窗应答；
 			// 不能 await setKey —— 它会挂起到全部提示答完。
@@ -1398,7 +1671,7 @@ function ModelsSection() {
 													});
 													const result = await response.json();
 													if (!result.success) throw new Error(result.error || t.toastError);
-													return (result.data.models ?? []).map((model: { id: string; name?: string }) => ({ id: model.id, name: model.name ?? "" }));
+													return (result.data.models ?? []).map(modelDraftFromCatalog);
 												}}
 												discoverDisabled={!cBaseUrl.trim()}
 											/>
@@ -1445,6 +1718,7 @@ function ModelsSection() {
 															setModels={setBModels}
 															updateModel={(index, patch) => setBModels((current) => current.map((model, at) => (at === index ? { ...model, ...patch } : model)))}
 															inheritedCount={p.modelCount}
+															catalogIds={catalogIdsOf(p.id)}
 															discover={async (allowPrivate) => {
 																const response = await fetch("/api/models", {
 																	method: "POST",
@@ -1454,7 +1728,7 @@ function ModelsSection() {
 																});
 																const result = await response.json();
 																if (!result.success) throw new Error(result.error || t.toastError);
-																return (result.data.models ?? []).map((model: { id: string; name?: string }) => ({ id: model.id, name: model.name ?? "" }));
+																return (result.data.models ?? []).map(modelDraftFromCatalog);
 															}}
 															discoverDisabled={!(bBaseUrl.trim() || p.baseUrl)}
 														/>
@@ -1497,6 +1771,11 @@ function ModelsSection() {
 				})}
 			</div>
 
+			{/* 模型配置体检：没写的字段 pi 会按缺省处理；由用户填，不替他猜 */}
+			{gaps.length > 0 ? (
+				<ModelFieldAudit gaps={gaps} providerLabel={providerName} busy={auditBusy || customRevision === null} onSave={saveAuditFills} />
+			) : null}
+
 			{/* 两个添加按钮 */}
 			<div className="flex gap-3">
 				<button
@@ -1525,6 +1804,7 @@ function ModelsSection() {
 				<ProviderSetupModal
 					mode={adding}
 					providers={addable}
+					catalogModelIds={catalogModelIds}
 					existingIds={providers.map((provider) => provider.id)}
 					onClose={() => setAdding(null)}
 					onSaveBuiltin={saveBuiltinSetup}
@@ -1651,12 +1931,13 @@ function ModelsSection() {
 
 		</div>
 	);
-}const fieldCls = "w-full rounded-xl px-3 py-2";
+}
 
-/** 配额展示：token 数转 M（53,000,000 → 53M），小数值原样 */
+const fieldCls = "w-full rounded-xl px-3 py-2";
+
+/** 配额展示：token 数转换单位（53,000,000 → 53.00M），与统计条 / 上下文弹窗口径一致 */
 function fmtQuotaTokens(value: number): string {
-	if (value >= 1_000_000) return `${Math.round(value / 100_000) / 10}M`;
-	return value.toLocaleString();
+	return fmtTokens(value);
 }
 
 /** 套餐值来自服务端声明（如 "pro"/"plus"），首字母大写后直接跟在标签后显示。 */
@@ -1925,7 +2206,8 @@ function SkillsSection({ cwd, onOpenFileContent }: { cwd: string; onOpenFileCont
 
 // ---------- Plugins ----------
 
-function PluginsSection({ cwd }: { cwd: string }) {
+/** 导出仅供测试（其余 section 不导出） */
+export function PluginsSection({ cwd }: { cwd: string }) {
 	const { t, lang } = useI18n();
 	const confirmUninstall = (source: string) => window.confirm(t.confirmUninstallPackage.replace("{source}", source));
 	const [tab, setTab] = useState<"config" | "list">("config");
@@ -2042,13 +2324,19 @@ function PluginsSection({ cwd }: { cwd: string }) {
 		})),
 	].filter((x) => !query || x.name.toLowerCase().includes(query));
 
-	const badge = (
+	/** 扩展卡片的启用状态：每张卡只在头部显示这一处，展开区不重复 */
+	const stateBadge = (disabled: boolean) => (
 		<span
 			className="flex flex-none items-center gap-1.5 rounded-md px-1.5 py-0.5"
-			style={{ fontSize: 10.5, background: "rgba(34,197,94,.12)", color: "var(--dsw-success)" }}
+			style={{
+				fontSize: 10.5,
+				...(disabled
+					? { background: "var(--dsw-selector)", color: "var(--dsw-label-tertiary)" }
+					: { background: "rgba(34,197,94,.12)", color: "var(--dsw-success)" }),
+			}}
 		>
-			<span className="h-1.5 w-1.5 rounded-full" style={{ background: "var(--dsw-success)" }} />
-			{t.enabled}
+			<span className="h-1.5 w-1.5 rounded-full" style={{ background: disabled ? "var(--dsw-label-tertiary)" : "var(--dsw-success)" }} />
+			{disabled ? t.disabled : t.enabled}
 		</span>
 	);
 
@@ -2165,9 +2453,7 @@ function PluginsSection({ cwd }: { cwd: string }) {
 											{e.error && (
 												<span className="rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-danger)", background: "var(--pw-danger-soft, rgba(236,19,19,.12))" }}>{t.extensionLoadError}</span>
 											)}
-											{e.disabled && !e.error && (
-												<span className="rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)", background: "var(--dsw-selector)" }}>{t.disabled}</span>
-											)}
+											{!e.error && stateBadge(e.disabled === true)}
 										</div>
 										<div className="truncate" style={{ fontSize: 12, color: e.error ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }} title={e.error ?? e.path}>
 											{e.error ?? e.path}
@@ -2189,7 +2475,6 @@ function PluginsSection({ cwd }: { cwd: string }) {
 											>
 												{scopeLabel(scope)}
 											</span>
-											{badge}
 										</div>
 										<div className="break-all" style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 											{e.path}
@@ -2272,7 +2557,7 @@ function PluginsSection({ cwd }: { cwd: string }) {
 														<span className="h-3 w-3 flex-none animate-spin rounded-full border border-[var(--dsw-label-tertiary)] border-t-transparent" />
 													) : !isDisabled ? (
 														<span
-																	className="h-2 w-2 flex-none rounded-full"
+															className="h-2 w-2 flex-none rounded-full"
 															style={{ background: "#22c55e", boxShadow: "0 0 5px rgba(34, 197, 94, 0.4)" }}
 														/>
 													) : null}
@@ -2286,8 +2571,8 @@ function PluginsSection({ cwd }: { cwd: string }) {
 													>
 														{isDisabled ? t.disabled : t.enabled}
 													</span>
-														<IconChevronDown14
-															size={13}
+													<IconChevronDown14
+														size={13}
 														style={{
 															color: "var(--dsw-label-tertiary)",
 															transform: isMenuOpen ? "rotate(180deg)" : "none",