@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/PromptPanel.tsx

@@ -6,7 +6,7 @@
  * 技能 / 提示模板，含扩展与 npm 包提供的那些）；热会话额外给出"组装后的系统提示词"
  * 与每个工具的定义，它们不是文件、没有路径，直接在本面板内展开查看。
  */
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useI18n } from "@/i18n";
 import { fmtBytes } from "@/lib/format";
 import { IconRefreshOutline14, IconCloseOutline14 } from "@/components/icons";
@@ -69,8 +69,11 @@ export function PromptPanel({
 	const [error, setError] = useState<string | null>(null);
 	const [busy, setBusy] = useState(false);
 	const [opening, setOpening] = useState<string | null>(null);
+	/** 只认最后一次请求：快速切会话时，先发的请求后回来会把上一个会话的提示词盖到当前会话上 */
+	const latestRequest = useRef(0);
 
 	const load = useCallback(async () => {
+		const request = ++latestRequest.current;
 		setBusy(true);
 		setError(null);
 		try {
@@ -78,15 +81,21 @@ export function PromptPanel({
 			if (sessionId) query.set("session", sessionId);
 			const response = await fetch(`/api/prompts?${query.toString()}`);
 			const body = await response.json();
+			if (request !== latestRequest.current) return;
 			if (!response.ok || !body.success) throw new Error(body.error || `request failed (${response.status})`);
 			setData(body.data as PromptSourcesData);
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			if (request === latestRequest.current) setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			setBusy(false);
+			if (request === latestRequest.current) setBusy(false);
 		}
 	}, [cwd, sessionId]);
 
+	// 换了工作区/会话：先清掉上一个的内容，别在加载期间把旧会话的提示词当成当前的
+	useEffect(() => {
+		setData(null);
+	}, [cwd, sessionId]);
+
 	useEffect(() => {
 		void load();
 	}, [load, refreshKey]);
@@ -165,19 +174,33 @@ export function PromptPanel({
 				{groups.map((group) => (
 					<section key={group.kind} className="mb-3">
 						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{kindLabel(group.kind)}</div>
-						<div className="flex flex-col gap-1">
+						<div className="flex flex-col gap-1.5">
 							{group.items.map((source) => (
 								<button
 									key={`${source.kind}:${source.path ?? source.name}`}
 									type="button"
-									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
-									style={{ background: opening === source.path ? "var(--dsw-active)" : "transparent", border: "0.5px solid var(--dsw-border-l2)" }}
+									className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left transition-all"
+									style={{
+										background: opening === source.path ? "var(--dsw-active)" : "var(--dsw-bg-elevated)",
+										border: "1px solid var(--dsw-border-l2)",
+										transition: "all 0.2s var(--isx-ease)",
+									}}
 									title={source.path ?? source.name}
+									onMouseEnter={(e) => {
+										e.currentTarget.style.borderColor = "var(--dsw-border-l3)";
+										e.currentTarget.style.background = "var(--dsw-hover)";
+										e.currentTarget.style.transform = "translateY(-1px)";
+									}}
+									onMouseLeave={(e) => {
+										e.currentTarget.style.borderColor = "var(--dsw-border-l2)";
+										e.currentTarget.style.background = opening === source.path ? "var(--dsw-active)" : "var(--dsw-bg-elevated)";
+										e.currentTarget.style.transform = "none";
+									}}
 									onClick={() => void openFile(source)}
 								>
-									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{source.name}</span>
-									<span className="flex-none" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)" }}>{formatBytes(source.bytes)}</span>
-									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
+									<span className="min-w-0 flex-1 truncate font-medium" style={{ color: "var(--dsw-label-primary)" }}>{source.name}</span>
+									<span className="flex-none font-mono" style={{ fontSize: 10.5, color: "var(--dsw-label-tertiary)" }}>{formatBytes(source.bytes)}</span>
+									<span className="flex-none rounded-full px-2 py-0.5" style={{ fontSize: 10.5, border: "1px solid var(--dsw-border-l2)", color: "var(--dsw-label-tertiary)", background: "var(--dsw-bg-base)" }}>
 										{originLabel(source.origin)}
 									</span>
 								</button>
@@ -189,14 +212,28 @@ export function PromptPanel({
 				{hasTools && (
 					<section className="mb-3">
 						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindTool}</div>
-						<div className="flex flex-col gap-1">
+						<div className="flex flex-col gap-1.5">
 							{data!.tools!.map((tool) => (
 								<button
 									key={`tool:${tool.name}`}
 									type="button"
-									className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left"
-									style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+									className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left transition-all"
+									style={{
+										border: "1px solid var(--dsw-border-l2)",
+										background: "var(--dsw-bg-elevated)",
+										transition: "all 0.2s var(--isx-ease)",
+									}}
 									title={tool.name}
+									onMouseEnter={(e) => {
+										e.currentTarget.style.borderColor = "var(--dsw-border-l3)";
+										e.currentTarget.style.background = "var(--dsw-hover)";
+										e.currentTarget.style.transform = "translateY(-1px)";
+									}}
+									onMouseLeave={(e) => {
+										e.currentTarget.style.borderColor = "var(--dsw-border-l2)";
+										e.currentTarget.style.background = "var(--dsw-bg-elevated)";
+										e.currentTarget.style.transform = "none";
+									}}
 									onClick={() =>
 										onOpenContent?.(
 											`tool-${tool.name}.md`,
@@ -212,8 +249,8 @@ export function PromptPanel({
 										)
 									}
 								>
-									<span className="min-w-0 flex-1 truncate" style={{ color: "var(--dsw-label-primary)" }}>{tool.name}</span>
-									<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, border: "0.5px solid var(--dsw-border-l3)", color: "var(--dsw-label-tertiary)" }}>
+									<span className="min-w-0 flex-1 truncate font-mono text-[12px] font-semibold" style={{ color: "var(--dsw-label-primary)" }}>{tool.name}</span>
+									<span className="flex-none rounded-full px-2 py-0.5" style={{ fontSize: 10.5, border: "1px solid var(--dsw-border-l2)", color: "var(--dsw-label-tertiary)", background: "var(--dsw-bg-base)" }}>
 										{tool.source === "builtin" ? t.promptToolBuiltin : t.promptToolExtension}
 									</span>
 								</button>
@@ -227,12 +264,26 @@ export function PromptPanel({
 						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindAssembled}</div>
 						<button
 							type="button"
-							className="w-full rounded-lg px-2 py-1.5 text-left"
-							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+							className="w-full rounded-xl px-2.5 py-2 text-left transition-all"
+							style={{
+								border: "1px solid var(--dsw-border-l2)",
+								background: "var(--dsw-bg-elevated)",
+								transition: "all 0.2s var(--isx-ease)",
+							}}
 							title={t.promptAssembledKey}
+							onMouseEnter={(e) => {
+								e.currentTarget.style.borderColor = "var(--dsw-border-l3)";
+								e.currentTarget.style.background = "var(--dsw-hover)";
+								e.currentTarget.style.transform = "translateY(-1px)";
+							}}
+							onMouseLeave={(e) => {
+								e.currentTarget.style.borderColor = "var(--dsw-border-l2)";
+								e.currentTarget.style.background = "var(--dsw-bg-elevated)";
+								e.currentTarget.style.transform = "none";
+							}}
 							onClick={() => onOpenContent?.("system-prompt.md", data.assembledSystemPrompt ?? "")}
 						>
-							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptAssembledKey}</span>
+							<span className="truncate font-medium" style={{ color: "var(--dsw-label-primary)" }}>{t.promptAssembledKey}</span>
 						</button>
 					</section>
 				)}
@@ -242,12 +293,26 @@ export function PromptPanel({
 						<div className="mb-1 px-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>{t.promptKindCompacted}</div>
 						<button
 							type="button"
-							className="w-full rounded-lg px-2 py-1.5 text-left"
-							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+							className="w-full rounded-xl px-2.5 py-2 text-left transition-all"
+							style={{
+								border: "1px solid var(--dsw-border-l2)",
+								background: "var(--dsw-bg-elevated)",
+								transition: "all 0.2s var(--isx-ease)",
+							}}
 							title={t.promptCompactedKey}
+							onMouseEnter={(e) => {
+								e.currentTarget.style.borderColor = "var(--dsw-border-l3)";
+								e.currentTarget.style.background = "var(--dsw-hover)";
+								e.currentTarget.style.transform = "translateY(-1px)";
+							}}
+							onMouseLeave={(e) => {
+								e.currentTarget.style.borderColor = "var(--dsw-border-l2)";
+								e.currentTarget.style.background = "var(--dsw-bg-elevated)";
+								e.currentTarget.style.transform = "none";
+							}}
 							onClick={() => onOpenContent?.("compacted-summary.md", data.compactedSummary ?? "")}
 						>
-							<span className="truncate" style={{ color: "var(--dsw-label-primary)" }}>{t.promptCompactedKey}</span>
+							<span className="truncate font-medium" style={{ color: "var(--dsw-label-primary)" }}>{t.promptCompactedKey}</span>
 						</button>
 					</section>
 				)}

package/src/components/ProviderSetupModal.module.css

@@ -278,17 +278,6 @@
 	gap: 12px;
 }
 
-.allowPrivate {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	font-size: 11.5px;
-	color: var(--dsw-label-caption);
-	cursor: pointer;
-	user-select: none;
-	white-space: nowrap;
-}
-
 .modelEmpty {
 	margin-top: 13px;
 	padding: 17px;
@@ -307,6 +296,18 @@
 	margin-top: 13px;
 }
 
+/* 自定义请求头：名字 | 值 | 删除 */
+.headerRow {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 34px;
+	gap: 8px;
+	align-items: center;
+}
+
+.headerRow + .headerRow {
+	margin-top: 8px;
+}
+
 .modelRow {
 	display: grid;
 	/* 折叠箭头 | 模型 ID | 名称 | 删除 */

package/src/components/ProviderSetupModal.tsx

@@ -10,10 +10,11 @@ import {
 	IconTrashOutline16,
 } from "@/components/icons";
 import { ProviderBrand } from "@/components/ProviderBrand";
+import { CustomSelect } from "@/components/CustomSelect";
 import { useI18n } from "@/i18n";
 import { looksPrivateEndpoint } from "@/lib/model-endpoint";
 import { CUSTOM_PROVIDER_ID_PATTERN, customApiOptions } from "@/lib/provider-display";
-import { formatCapacity, modelDraftFromCatalog, parseCapacity, serializeModelDraft, serializeProviderDraft, validateModelDrafts, type ModelDraft } from "@/lib/model-draft";
+import { formatCapacity, modelDraftFromCatalog, parseCapacity, serializeModelDraft, serializeProviderDraft, validateHeaderEntries, validateModelDrafts, type ModelDraft } from "@/lib/model-draft";
 import type { ProviderView } from "@/lib/models-service";
 import styles from "./ProviderSetupModal.module.css";
 
@@ -66,6 +67,10 @@ export function ProviderSetupModal({
 	const allApis = customApiOptions(providers.flatMap((provider) => provider.apis));
 	const [api, setApi] = useState(allApis.includes("openai-completions") ? "openai-completions" : (allApis[0] ?? "openai-completions"));
 	const [models, setModels] = useState<ModelDraft[]>([]);
+	// 自定义请求头（models.json 的 headers）：只对自定义 provider 开放。
+	// null = 尚未载入（不表态，保存时不碰原文件里的 headers）；对象 = 用户编辑中。
+	// 载入时把源里的头读进表单，保存时整体替换。
+	const [headers, setHeaders] = useState<Array<{ name: string; value: string }> | null>(null);
 	// 自定义 provider 的自动识别只在地址 / 密钥输入完（失焦）或换协议时触发：
 	// 还没有任何模型行，且 URL（+ 密钥，本机网关可省）都填了，这次失焦才算数
 	const autoReady = models.length === 0 && Boolean(baseUrl.trim()) && Boolean(apiKey.trim() || looksPrivateEndpoint(baseUrl));
@@ -131,6 +136,8 @@ export function ProviderSetupModal({
 					result = await onSaveBuiltin({ providerId: selected.id, apiKey: apiKey.trim(), config });
 				}
 			} else {
+				// 表单里非空的头才写下去；一条都没有就不带这个键，免得留个空对象在文件里
+				const headerEntries = (headers ?? []).map(({ name, value }) => [name.trim(), value.trim()] as [string, string]).filter(([name, value]) => name && value);
 				result = await onSaveCustom({
 					providerId: normalizedId,
 					config: {
@@ -138,6 +145,7 @@ export function ProviderSetupModal({
 						baseUrl: baseUrl.trim(),
 						api,
 						...(apiKey.trim() ? { apiKey: apiKey.trim() } : {}),
+						...(headerEntries.length ? { headers: Object.fromEntries(headerEntries) } : {}),
 						models: models.map((model) => serializeModelDraft(model)),
 					},
 				});
@@ -155,11 +163,23 @@ export function ProviderSetupModal({
 	/** 供 ModelCatalog 的候选对话框调用：用表单当前值（含未保存的 key）探测远端目录 */
 	const discoverAvailableModels = async (allowPrivate: boolean): Promise<ModelDraft[]> => {
 		if (!baseUrl.trim()) throw new Error(t.apiAddress);
+		// 自定义头要跟着发现请求一起发：网关要求自定义头时，不带就永远拿不到模型目录
+		const headerEntries = (headers ?? []).map(({ name, value }) => [name.trim(), value.trim()] as [string, string]).filter(([name, value]) => name && value);
+		const headerError = validateHeaderEntries(headerEntries);
+		if (headerError) throw new Error(headerError);
 		const response = await fetch("/api/models", {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			// builtin 模式带 providerId：表单 key 为空时后端回退到已存密钥 / OAuth 令牌
-			body: JSON.stringify({ action: "discoverModels", baseUrl: baseUrl.trim(), api: mode === "builtin" ? selected?.apis[0] : api, apiKey: apiKey.trim(), providerId: mode === "builtin" ? selected?.id : undefined, allowPrivate }),
+			body: JSON.stringify({
+				action: "discoverModels",
+				baseUrl: baseUrl.trim(),
+				api: mode === "builtin" ? selected?.apis[0] : api,
+				apiKey: apiKey.trim(),
+				providerId: mode === "builtin" ? selected?.id : undefined,
+				allowPrivate,
+				...(headerEntries.length && mode !== "builtin" ? { headers: Object.fromEntries(headerEntries) } : {}),
+			}),
 		});
 		const result = await response.json();
 		if (!response.ok || !result.success) throw new Error(result.error || t.toastError);
@@ -238,10 +258,15 @@ export function ProviderSetupModal({
 							{selected?.authTypes.includes("oauth") && onOAuthLogin ? (
 								<div className={styles.field}>
 									<label className={styles.label}>{t.authMethod}</label>
-									<select className={styles.select} value={authMethod} onChange={(event) => setAuthMethod(event.target.value as "api_key" | "oauth")}>
-										<option value="api_key">{t.authMethodApiKey}</option>
-										<option value="oauth">{t.oauthLogin}</option>
-									</select>
+									<CustomSelect
+										value={authMethod}
+										onChange={(val) => setAuthMethod(val as "api_key" | "oauth")}
+										options={[
+											{ value: "api_key", label: t.authMethodApiKey },
+											{ value: "oauth", label: t.oauthLogin },
+										]}
+										aria-label={t.authMethod}
+									/>
 								</div>
 							) : null}
 
@@ -287,22 +312,58 @@ export function ProviderSetupModal({
 							</div>
 							<div className={styles.field}>
 								<label className={styles.label}>{t.apiProtocol}</label>
-								<select className={styles.select} value={api} onChange={(event) => { setApi(event.target.value); requestAutoDiscover(); }}>
-									{allApis.map((value) => <option key={value} value={value}>{value}</option>)}
-								</select>
+								<CustomSelect
+									value={api}
+									onChange={(val) => { setApi(val); requestAutoDiscover(); }}
+									options={allApis.map((value) => ({ value, label: value }))}
+									aria-label={t.apiProtocol}
+								/>
 							</div>
 							<div className={styles.field}>
 								<label className={styles.label}>{t.apiKey}</label>
 								<input className={styles.input} type="password" value={apiKey} onChange={(event) => setApiKey(event.target.value)} onBlur={requestAutoDiscover} placeholder={t.apiKeyOptional} />
 								<div className={styles.hint}>{t.customApiKeyHint}</div>
 							</div>
+							{/* 自定义请求头：网关常要求额外认证头，探测模型目录与发消息都会带上 */}
+							<div className={styles.field}>
+								<label className={styles.label}>{t.customHeaders}</label>
+								{(headers ?? []).map((entry, index) => (
+									<div key={index} className={styles.headerRow}>
+										<input
+											className={styles.input}
+											value={entry.name}
+											placeholder={t.customHeaderName}
+											onChange={(event) => setHeaders((current) => (current ?? []).map((item, i) => (i === index ? { ...item, name: event.target.value } : item)))}
+										/>
+										<input
+											className={styles.input}
+											value={entry.value}
+											placeholder={t.customHeaderValue}
+											onChange={(event) => setHeaders((current) => (current ?? []).map((item, i) => (i === index ? { ...item, value: event.target.value } : item)))}
+										/>
+										<button
+											type="button"
+											className={styles.removeModel}
+											title={t.delete}
+											aria-label={`${t.delete} ${entry.name || index + 1}`}
+											onClick={() => setHeaders((current) => (current ?? []).filter((_, i) => i !== index))}
+										>
+											<IconTrashOutline16 size={15} />
+										</button>
+									</div>
+								))}
+								<button type="button" className={styles.addModel} onClick={() => setHeaders((current) => [...(current ?? []), { name: "", value: "" }])}>
+									<IconPlusOutline16 size={14} /> {t.customHeaderAdd}
+								</button>
+								<div className={styles.hint}>{t.customHeadersHint}</div>
+							</div>
 							<ModelCatalog
 								models={models}
 								setModels={setModels}
 								updateModel={updateModel}
 								discover={discoverAvailableModels}
 								discoverDisabled={!baseUrl.trim()}
-								autoDiscover={autoReady ? { signature: `${baseUrl.trim()}|${api}|${apiKey.trim()}`, privateHost: looksPrivateEndpoint(baseUrl), trigger: autoTrigger } : undefined}
+								autoDiscover={autoReady ? { signature: `${baseUrl.trim()}|${api}|${apiKey.trim()}`, trigger: autoTrigger } : undefined}
 							/>
 						</>
 					)}
@@ -345,21 +406,19 @@ export function ModelCatalog({
 	inheritedCount?: number;
 	/** 内置 provider 的目录模型 ID：候选里已在目录中的不能勾选（本来就能选），同 ID 的行只覆盖填写的字段 */
 	catalogIds?: ReadonlySet<string>;
-	/** 用表单当前值探测远端目录（allowPrivate：用户勾选了允许访问本机/私网地址）；抛错时错误显示在目录内 */
+	/** 用表单当前值探测远端目录；本机 / 私网地址一律放行（服务端仍会自己再判一次）；抛错时错误显示在目录内 */
 	discover?: (allowPrivate: boolean) => Promise<ModelDraft[]>;
 	discoverDisabled?: boolean;
 	/**
 	 * 自动识别：trigger 变了（地址 / 密钥失焦、换协议）就按当前签名（URL + 协议 + 密钥）拉一次模型目录。
 	 * 只在「还没有任何模型行」时给出；同一签名只跑一次，清空模型行后不会自己又加回来。
 	 */
-	autoDiscover?: { signature: string; privateHost: boolean; trigger: number };
+	autoDiscover?: { signature: string; trigger: number };
 }) {
 	const { t } = useI18n();
 	const [expanded, setExpanded] = useState<ReadonlySet<number>>(new Set());
 	const [discovering, setDiscovering] = useState(false);
 	const [discoverError, setDiscoverError] = useState("");
-	// 本地网关（Ollama 等）在私网/回环地址上，探测需要用户显式授权
-	const [allowPrivate, setAllowPrivate] = useState(false);
 	// 候选对话框：null = 关闭
 	const [candidates, setCandidates] = useState<ModelDraft[] | null>(null);
 	const [picked, setPicked] = useState<ReadonlySet<string>>(new Set());
@@ -434,8 +493,8 @@ export function ModelCatalog({
 			setAutoStatus(status);
 			return true;
 		};
-		// 本机/私网地址自动允许（服务端仍会自己再判一次）
-		discover(allowPrivate || auto.privateHost).then(
+		// 本机/私网地址一并放行：探测模型目录本来就是本机使用，服务端仍会自己再判一次
+		discover(true).then(
 			(found) => {
 				if (!settle(found.length ? "done" : "empty")) return;
 				setAutoFound(found.length);
@@ -460,7 +519,7 @@ export function ModelCatalog({
 		setDiscovering(true);
 		setDiscoverError("");
 		try {
-			const found = await discover(allowPrivate);
+			const found = await discover(true);
 			if (!found.length) {
 				setDiscoverError(t.discoverEmpty);
 				return;
@@ -527,14 +586,6 @@ export function ModelCatalog({
 				</div>
 				{discover ? (
 					<div className={styles.discoverControls}>
-						<label className={styles.allowPrivate} title={t.allowPrivateHint}>
-							<input
-								type="checkbox"
-								checked={allowPrivate}
-								onChange={(event) => setAllowPrivate(event.target.checked)}
-							/>
-							{t.allowPrivateDiscovery}
-						</label>
 						<button className={styles.discoverButton} disabled={discoverDisabled || discovering} onClick={() => void startDiscover()}>
 							{discovering ? t.discoveringModels : t.discoverModels}
 						</button>
@@ -592,22 +643,42 @@ export function ModelCatalog({
 												placeholder="16K"
 											/>
 										</label>
-										<label className={styles.capacityField} title={t.visionHint}>
+										<div className={styles.capacityField} title={t.visionHint}>
 											<span>{t.visionLabel}</span>
-											<select
-												className={styles.input}
+											<CustomSelect
+												size="sm"
+												style={{ width: 104 }}
 												value={model.vision === undefined ? "unset" : model.vision ? "image" : "text"}
-												onChange={(event) => {
-													const choice = event.target.value;
+												onChange={(choice) => {
 													// 未声明 = 不写 input：pi 按纯文本处理，体检卡片会列出来提醒
 													updateModel(index, { vision: choice === "unset" ? undefined : choice === "image" });
 												}}
-											>
-												<option value="unset">{t.visionUnset}</option>
-												<option value="image">{t.visionOn}</option>
-												<option value="text">{t.visionOff}</option>
-											</select>
-										</label>
+												options={[
+													{ value: "unset", label: t.visionUnset },
+													{ value: "image", label: t.visionOn },
+													{ value: "text", label: t.visionOff },
+												]}
+												aria-label={t.visionLabel}
+											/>
+										</div>
+										<div className={styles.capacityField} title={t.reasoningHint}>
+											<span>{t.reasoningLabel}</span>
+											<CustomSelect
+												size="sm"
+												style={{ width: 104 }}
+												value={model.reasoning === undefined ? "unset" : model.reasoning ? "on" : "off"}
+												onChange={(choice) => {
+													// 未声明 = 不写 reasoning：pi 按 false 处理，思考档位会消失，体检卡片会提醒
+													updateModel(index, { reasoning: choice === "unset" ? undefined : choice === "on" });
+												}}
+												options={[
+													{ value: "unset", label: t.reasoningUnset },
+													{ value: "on", label: t.reasoningOn },
+													{ value: "off", label: t.reasoningOff },
+												]}
+												aria-label={t.reasoningLabel}
+											/>
+										</div>
 										<span className={styles.capacityHint}>{t.capacityHint}</span>
 									</div>
 								) : null}

package/src/components/RemoteSection.tsx

@@ -21,6 +21,8 @@ interface LanState {
 	running: boolean;
 	port: number | null;
 	urls: string[];
+	/** 是否在注入手机排版；插件关闭时为 false。旧服务端的响应里可能没有这个字段 */
+	styled?: boolean;
 	error: string | null;
 }
 
@@ -35,6 +37,9 @@ interface PublicState {
 
 interface RemoteStatus {
 	plugin: string;
+	/** 内置插件总开关；关闭后局域网入口仍在（纯转发），但没有手机排版与公网入口。
+	 *  旧服务端的响应里可能没有这个字段，界面按「已启用」处理 */
+	pluginEnabled?: boolean;
 	targetPort: number;
 	/** 非空时服务端拒绝开任何入口（没开认证 / 开发模式） */
 	blocked: "auth" | "dev" | null;
@@ -181,12 +186,35 @@ export function RemoteSection() {
 	const lan = status?.lan;
 	const pub = status?.public;
 	const blocked = status?.blocked ?? null;
+	// 开关未取到状态前按「已启用」显示，避免首帧闪一下「已关闭」
+	const pluginOn = status?.pluginEnabled ?? true;
 	const lanTone: "on" | "off" = lan?.running ? "on" : "off";
 	const pubTone: "on" | "pending" | "off" = pub?.running ? (pub.ready ? "on" : "pending") : "off";
 
+	/** 切换内置插件总开关；局域网入口照旧（关掉后退化成纯转发），公网入口会一并停掉 */
+	const togglePlugin = async () => {
+		if (busy) return;
+		setBusy(true);
+		setError("");
+		try {
+			const response = await fetch("/api/remote", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ action: "set-plugin", enabled: !pluginOn }),
+			});
+			const result = await response.json();
+			if (result?.success) setStatus(result.data as RemoteStatus);
+			else setError(result?.error ?? t.remoteFailed);
+		} catch {
+			setError(t.remoteFailed);
+		} finally {
+			if (alive.current) setBusy(false);
+		}
+	};
+
 	return (
 		<div className="flex flex-col gap-6">
-			{/* 插件抬头 */}
+			{/* 插件抬头 + 总开关 */}
 			<div className="flex items-center gap-2.5">
 				<div style={{ fontSize: 15, fontWeight: 500 }}>{t.setRemote}</div>
 				<span
@@ -195,7 +223,24 @@ export function RemoteSection() {
 				>
 					{t.remoteBuiltin}
 				</span>
+				<div className="flex-1" />
+				<span style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>{pluginOn ? t.remotePluginOn : t.remotePluginOff}</span>
+				<button
+					type="button"
+					className="relative h-5 w-9 flex-none rounded-full transition-colors"
+					style={{ background: pluginOn ? "var(--dsw-accent)" : "var(--dsw-border-l3)" }}
+					role="switch"
+					aria-checked={pluginOn}
+					aria-label={t.remotePluginToggle}
+					title={t.remotePluginHint}
+					// 被拦住（没开认证 / 开发模式）时入口一律开不出来，开关拨了也没有意义
+					disabled={busy || !status || blocked !== null}
+					onClick={() => void togglePlugin()}
+				>
+					<span className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all" style={{ left: pluginOn ? 18 : 2 }} />
+				</button>
 			</div>
+			<div style={{ fontSize: 12, color: "var(--dsw-label-secondary)", lineHeight: 1.6, marginTop: -12 }}>{t.remotePluginHint}</div>
 
 			{/* 局域网入口 */}
 			<Row title={t.remoteLanTitle} hint={t.remoteLanHint}>
@@ -205,6 +250,11 @@ export function RemoteSection() {
 						<span style={{ color: lan?.running ? "var(--dsw-label-primary)" : "var(--dsw-label-caption)" }}>
 							{lan?.running ? t.remoteRunning : t.remoteStopped}
 						</span>
+						{/* 只在服务端明确回了 styled:false 时才说「纯转发」：
+						    字段缺失（旧服务端、缓存的响应）不能当成关闭，否则会误报 */}
+						{lan?.running && lan.styled === false ? (
+							<span style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>· {t.remoteLanPlain}</span>
+						) : null}
 					</div>
 					{(lan?.urls ?? []).map((url) => (
 						<EntryLink key={url} url={url} token={status?.loginToken} />
@@ -229,11 +279,12 @@ export function RemoteSection() {
 								{t.remoteStop}
 							</button>
 						) : (
-							<button className="btn-primary-white" style={{ height: 30, fontSize: 13 }} disabled={busy || blocked !== null} onClick={() => void act("start")}>
+							<button className="btn-primary-white" style={{ height: 30, fontSize: 13 }} disabled={busy || blocked !== null || !pluginOn} onClick={() => void act("start")}>
 								{busy ? t.remoteWorking : t.remoteStart}
 							</button>
 						)}
 					</div>
+					{!pluginOn ? <div style={{ fontSize: 11.5, color: "var(--dsw-label-caption)", textAlign: "right" }}>{t.remotePublicNeedsPlugin}</div> : null}
 				</div>
 			</Row>