dsh-web-search-plugin 0.2.0 → 0.2.1

package/lib/client.js

@@ -38,11 +38,39 @@ window.__ModuleLoader__.load({
 		/** Form field the DeepSeek write-only credential control stages under. */
 		const DEEPSEEK_API_KEY_FIELD = "deepseekApiKey";
 		const SECRET_FIELDS = new Set([TAVILY_API_KEY_FIELD, BRAVE_API_KEY_FIELD, DEEPSEEK_API_KEY_FIELD]);
+		const DRAFT_KEY = "dsh-web-search-plugin:settings-draft";
+
+		function readDraft() {
+			try {
+				const raw = sessionStorage.getItem(DRAFT_KEY);
+				if (!raw) return null;
+				const parsed = JSON.parse(raw);
+				if (parsed === null || typeof parsed !== "object" || parsed.staged === null || typeof parsed.staged !== "object") return null;
+				return parsed;
+			} catch {
+				return null;
+			}
+		}
+		function writeDraft(form) {
+			try {
+				const staged = {};
+				for (const [field, edit] of form.staged) {
+					if (SECRET_FIELDS.has(field)) continue;
+					staged[field] = { text: String(edit?.text ?? ""), clear: edit?.clear === true };
+				}
+				if (Object.keys(staged).length === 0 && form.failed !== true) {
+					sessionStorage.removeItem(DRAFT_KEY);
+					return;
+				}
+				sessionStorage.setItem(DRAFT_KEY, JSON.stringify({ staged, failed: form.failed === true }));
+			} catch {
+				/* private mode / quota */
+			}
+		}
 
 		/** Locale bundles for the card. */
 		const en = {
 			nav: "Web search",
-			description: "Tavily (keyless by default) or Brave Search. Switching engines here is enough — web.searchProvider stays dsh-web-search.",
 			provider: "Search engine",
 			providerTavily: "Tavily",
 			providerBrave: "Brave Search",
@@ -63,7 +91,6 @@ window.__ModuleLoader__.load({
 			braveBaseURL: "Endpoint",
 			braveBaseURLHint: "Leave blank to use the Brave Search API default.",
 			maxResults: "Max results",
-			maxResultsHint: "Sources returned per search (1-20).",
 			searchDepth: "Search depth",
 			searchDepthBasic: "Basic (faster)",
 			searchDepthAdvanced: "Advanced (slower, deeper)",
@@ -73,9 +100,9 @@ window.__ModuleLoader__.load({
 			topicGeneral: "General",
 			topicNews: "News",
 			country: "Country",
-			countryHint: "ISO 2-letter code (e.g. cn). Leave blank for Brave's default.",
+			countryHint: "ISO 2-letter code (e.g. cn).",
 			searchLang: "Search language",
-			searchLangHint: "e.g. zh-hans or en. Leave blank for Brave's default.",
+			searchLangHint: "e.g. zh-hans or en.",
 			freshness: "Freshness",
 			freshnessAny: "Any time",
 			freshnessDay: "Past day",
@@ -83,7 +110,7 @@ window.__ModuleLoader__.load({
 			freshnessMonth: "Past month",
 			freshnessYear: "Past year",
 			proxy: "Proxy",
-			proxyHint: "HTTP(S) proxy URL. Leave blank to use HTTPS_PROXY / HTTP_PROXY.",
+			proxyPlaceholder: "Leave blank to use HTTPS_PROXY / HTTP_PROXY.",
 			deepseekApiKeyEnv: "Credential reference",
 			deepseekApiKeyEnvHint: "Name of the credential/env var resolved for DeepSeek search.",
 			deepseekBaseURL: "Endpoint",
@@ -102,14 +129,40 @@ window.__ModuleLoader__.load({
 			saving: "Saving…",
 			discard: "Discard",
 			unsaved: "Unsaved",
+			overridden: "Overridden",
+			reset: "Restore default",
 			saveFailed: "The deployment did not accept these values; they were left for you to correct.",
+			savedToast: "✓ Settings saved and applied",
+			nothingToSave: "No changes to save",
+			invalidToast: "Fix the highlighted fields before saving.",
 			readOnly: "This deployment stores settings read-only.",
-			invalidNumber: "Enter a number, or leave blank to use the default."
+			invalidNumber: "Enter a whole number of at least 1, or leave blank for the default.",
+			quotaTitle: "Quota",
+			quotaPlan: "Plan {plan}",
+			quotaUsed: "Used {used} / {limit}",
+			quotaUsedOnly: "Used {used}",
+			quotaRemaining: "{remaining} left",
+			quotaUnlimited: "No published limit",
+			quotaResets: "Resets {time}",
+			quotaCycle: "Resets with the billing cycle",
+			quotaBurst: "Burst {remaining}/{limit}",
+			quotaBraveCapacity: "Capacity",
+			quotaBraveRps: "{limit} requests per second",
+			quotaBraveRpsWindow: "Per-second window",
+			braveDefaultPlaceholder: "Leave blank for Brave's default.",
+			quotaEmpty: "Usage appears after the next search.",
+			quotaKeyedHint: "Keyed Tavily: local deductions vs periodic /usage, whichever is higher.",
+			quotaBraveUnlimited: "No monthly request cap",
+			quotaRefresh: "Refresh usage",
+			quotaRefreshing: "Refreshing…",
+			quotaError: "Usage unavailable: {error}",
+			quotaWarn: "Remaining quota is low.",
+			quotaDanger: "Remaining quota is critical.",
+			quotaPaygo: "Pay-as-you-go {used}/{limit}"
 		};
 		/** Simplified Chinese copy. */
 		const zh = {
 			nav: "网页搜索",
-			description: "Tavily（默认 keyless）或 Brave Search。在此切换引擎即可，不必改 web.searchProvider。",
 			provider: "搜索引擎",
 			providerTavily: "Tavily",
 			providerBrave: "Brave Search",
@@ -130,7 +183,6 @@ window.__ModuleLoader__.load({
 			braveBaseURL: "接口地址",
 			braveBaseURLHint: "留空则使用 Brave Search API 默认地址。",
 			maxResults: "结果数量",
-			maxResultsHint: "每次搜索返回的源数量（1-20）。",
 			searchDepth: "搜索深度",
 			searchDepthBasic: "Basic（较快）",
 			searchDepthAdvanced: "Advanced（较慢、更深）",
@@ -140,9 +192,9 @@ window.__ModuleLoader__.load({
 			topicGeneral: "通用",
 			topicNews: "新闻",
 			country: "国家/地区",
-			countryHint: "ISO 两位码（如 cn）。留空使用 Brave 默认。",
+			countryHint: "ISO 两位码（如 cn）。",
 			searchLang: "搜索语言",
-			searchLangHint: "如 zh-hans、en。留空使用 Brave 默认。",
+			searchLangHint: "如 zh-hans、en。",
 			freshness: "时效",
 			freshnessAny: "不限",
 			freshnessDay: "过去一天",
@@ -150,7 +202,7 @@ window.__ModuleLoader__.load({
 			freshnessMonth: "过去一月",
 			freshnessYear: "过去一年",
 			proxy: "代理",
-			proxyHint: "HTTP(S) 代理 URL。留空则使用 HTTPS_PROXY / HTTP_PROXY。",
+			proxyPlaceholder: "留空使用 HTTPS_PROXY / HTTP_PROXY环境变量",
 			deepseekApiKeyEnv: "凭据引用名",
 			deepseekApiKeyEnvHint: "DeepSeek 搜索解析的凭据/环境变量名。",
 			deepseekBaseURL: "接口地址",
@@ -169,21 +221,53 @@ window.__ModuleLoader__.load({
 			saving: "保存中…",
 			discard: "放弃修改",
 			unsaved: "未保存",
+			overridden: "已覆盖",
+			reset: "恢复默认",
 			saveFailed: "本部署没有接受这些值，已保留供你修改。",
+			savedToast: "✓ 设置已保存并立即生效",
+			nothingToSave: "没有需要保存的更改",
+			invalidToast: "请先修正标红的字段再保存。",
 			readOnly: "本部署的设置为只读。",
-			invalidNumber: "请填数字；留空表示使用默认值。"
+			invalidNumber: "请输入不小于 1 的整数；留空表示使用默认值。",
+			quotaTitle: "额度",
+			quotaPlan: "计划 {plan}",
+			quotaUsed: "已用 {used} / {limit}",
+			quotaUsedOnly: "已用 {used}",
+			quotaRemaining: "剩余 {remaining}",
+			quotaUnlimited: "未公布限额",
+			quotaResets: "{time} 重置",
+			quotaCycle: "按计费周期重置",
+			quotaBurst: "突发 {remaining}/{limit}",
+			quotaBraveCapacity: "容量",
+			quotaBraveRps: "{limit} 次/秒",
+			quotaBraveRpsWindow: "每秒窗口",
+			braveDefaultPlaceholder: "留空使用 Brave 默认。",
+			quotaEmpty: "下次搜索后显示用量。",
+			quotaKeyedHint: "Tavily keyed：本地扣费与定时 /usage 取较高值。",
+			quotaBraveUnlimited: "月请求不限额",
+			quotaRefresh: "刷新额度",
+			quotaRefreshing: "刷新中…",
+			quotaError: "额度不可用：{error}",
+			quotaWarn: "剩余额度偏低。",
+			quotaDanger: "剩余额度告急。",
+			quotaPaygo: "按量 {used}/{limit}"
 		};
 
-		/** A whole-number field spec: empty draft clears, any other invalid draft blocks save. */
-		function numberField(field) {
+		const MAX_RESULTS_CAP = 20;
+		/** A whole-number field spec: empty draft clears; non-digits block save; max is clamped. */
+		function numberField(field, bounds) {
 			return {
 				field,
 				format: (value) => typeof value === "number" ? String(value) : "",
 				parse: (text) => {
 					const trimmed = text.trim();
 					if (trimmed === "") return { kind: "clear" };
-					const parsed = Number(trimmed);
-					return Number.isFinite(parsed) ? { kind: "set", value: parsed } : void 0;
+					if (!/^[0-9]+$/u.test(trimmed)) return void 0;
+					let parsed = Number(trimmed);
+					if (!Number.isInteger(parsed) || parsed < 1) return void 0;
+					if (bounds?.min != null && parsed < bounds.min) parsed = bounds.min;
+					if (bounds?.max != null && parsed > bounds.max) parsed = bounds.max;
+					return { kind: "set", value: parsed };
 				}
 			};
 		}
@@ -227,7 +311,7 @@ window.__ModuleLoader__.load({
 				this.specs = new Map([
 					choiceField("provider"),
 					choiceField("mode"),
-					numberField("maxResults"),
+					numberField("maxResults", { min: 1, max: MAX_RESULTS_CAP }),
 					textField("apiKeyEnv"),
 					textField("baseURL"),
 					choiceField("searchDepth"),
@@ -243,14 +327,24 @@ window.__ModuleLoader__.load({
 					textField("deepseekBaseURL"),
 					textField("model"),
 					textField("apiVersion"),
-					numberField("maxTokens"),
-					numberField("maxUses")
+					numberField("maxTokens", { min: 1 }),
+					numberField("maxUses", { min: 1 })
 				].map((spec) => [spec.field, spec]));
 				this.staged = new Map();
 				this.saving = false;
 				this.failed = false;
 				this.credential = { ref: "", configured: false, writable: true };
+				this.toastKey = null;
+				this.toastTimer = 0;
 				this.listeners = new Set();
+				const draft = readDraft();
+				if (draft?.staged) {
+					for (const [field, edit] of Object.entries(draft.staged)) {
+						if (!this.specs.has(field) || edit === null || typeof edit !== "object") continue;
+						this.staged.set(field, { text: String(edit.text ?? ""), clear: edit.clear === true });
+					}
+					if (draft.failed === true) this.failed = true;
+				}
 				scope.subscribe(() => {
 					this.publish();
 				});
@@ -272,7 +366,8 @@ window.__ModuleLoader__.load({
 					dirty: plan.length > 0,
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
-					failed: this.failed
+					failed: this.failed,
+					toastKey: this.toastKey
 				};
 			}
 			field(field) {
@@ -316,19 +411,41 @@ window.__ModuleLoader__.load({
 				}
 				return plan;
 			}
+			showToast(key) {
+				this.toastKey = key;
+				if (this.toastTimer) clearTimeout(this.toastTimer);
+				this.toastTimer = setTimeout(() => {
+					this.toastKey = null;
+					this.toastTimer = 0;
+					this.publish();
+				}, 2500);
+				this.publish();
+			}
 			async save() {
 				const plan = this.plan();
 				const writes = plan.flatMap((item) => item.run === void 0 ? [] : [item.run]);
-				if (plan.length === 0 || this.saving || writes.length !== plan.length) return;
+				if (this.saving) return;
+				if (plan.length === 0) {
+					this.showToast("nothing");
+					return;
+				}
+				if (writes.length !== plan.length) {
+					this.showToast("invalid");
+					return;
+				}
 				this.saving = true;
 				this.failed = false;
 				this.publish();
 				let landed = true;
-				for (const write of writes) landed = await write() && landed;
+				try {
+					for (const write of writes) landed = await write() && landed;
+				} catch (_saveFailure) {
+					landed = false;
+				}
 				if (landed) this.staged.clear();
 				this.saving = false;
 				this.failed = !landed;
-				this.publish();
+				this.showToast(landed ? "saved" : "failed");
 			}
 			actions() {
 				return {
@@ -350,18 +467,26 @@ window.__ModuleLoader__.load({
 				};
 			}
 			async clear(field) {
-				await this.scope.unset(field);
-				return !this.stored(field);
+				try {
+					await this.scope.unset(field);
+					return true;
+				} catch (_clearFailure) {
+					return false;
+				}
 			}
 			async store(field, value) {
-				await this.scope.set(field, value);
-				return this.userLayer()?.[field] === value;
+				try {
+					await this.scope.set(field, value);
+					return true;
+				} catch (_storeFailure) {
+					return false;
+				}
 			}
 			stage(field, edit) {
 				this.staged.set(field, edit);
 				this.failed = false;
 				this.publish();
-				if (field === "provider" || field === "apiKeyEnv" || field === "braveApiKeyEnv") this.readCredential();
+				if (field === "provider" || field === "apiKeyEnv" || field === "braveApiKeyEnv" || field === "deepseekApiKeyEnv") this.readCredential();
 			}
 			snapshotOf() {
 				return this.scope.getSnapshot();
@@ -380,6 +505,7 @@ window.__ModuleLoader__.load({
 				return user !== void 0 && Object.hasOwn(user, field);
 			}
 			publish() {
+				writeDraft(this);
 				for (const listener of this.listeners) listener();
 			}
 			/** Draft-aware engine: staged `provider` wins over the saved section. */
@@ -481,7 +607,8 @@ window.__ModuleLoader__.load({
 					maxTokens: this.form.field("maxTokens"),
 					maxUses: this.form.field("maxUses"),
 					apiKeyConfigured: this.form.credential.configured,
-					apiKeyWritable: this.form.credential.writable
+					apiKeyWritable: this.form.credential.writable,
+					toastKey: this.form.toastKey
 				};
 			}
 			inject() {
@@ -492,79 +619,398 @@ window.__ModuleLoader__.load({
 			}
 		};
 
-		/** Row style: one labelled field with label, hint, and staged input. */
-		const fieldRow = (label, hint, children) => react.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px", padding: "12px 0", borderTop: "1px solid var(--dsw-alias-border-l2)" } },
-			react.createElement("label", { style: { color: "var(--dsw-alias-label-primary)", fontSize: "13px", fontWeight: 500, lineHeight: "1.5" } }, label),
+		/** Row style: one labelled field with optional override badge and restore-default. */
+		const fieldRow = (label, hint, children, meta) => react.createElement("div", { className: "dshws_field" },
+			react.createElement("div", { className: "dshws_field_head" },
+				react.createElement("label", { className: "dshws_field_label" }, label),
+				meta?.overridden ? react.createElement("span", { className: "dshws_field_badges" },
+					react.createElement("span", { className: "dshws_badge" }, meta.t("overridden")),
+					react.createElement("button", { type: "button", className: "dshws_reset", disabled: meta.disabled === true, onClick: meta.onReset }, meta.t("reset"))) : null),
 			children,
-			hint ? react.createElement("p", { style: { color: "var(--dsw-alias-label-tertiary)", margin: 0, fontSize: "12px", lineHeight: "1.5" } }, hint) : null);
-		const textInput = (props) => react.createElement("input", { style: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", height: "34px", font: "inherit", color: "var(--dsw-alias-label-primary)", borderRadius: "8px", padding: "0 12px", fontSize: "13px", lineHeight: "1.5" }, type: "text", ...props.numeric ? { inputMode: "numeric" } : {}, ...props });
-		const secretInput = (props) => react.createElement("input", { style: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", height: "34px", font: "inherit", color: "var(--dsw-alias-label-primary)", borderRadius: "8px", padding: "0 12px", fontSize: "13px", lineHeight: "1.5" }, type: "password", autoComplete: "off", ...props });
-		const selectInput = (props) => react.createElement("select", { style: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", height: "34px", font: "inherit", color: "var(--dsw-alias-label-primary)", borderRadius: "8px", padding: "0 12px", fontSize: "13px", lineHeight: "1.5" }, ...props });
+			meta?.invalid ? react.createElement("p", { className: "dshws_field_error" }, meta.t("invalidNumber")) : hint ? react.createElement("p", { className: "dshws_field_hint" }, hint) : null);
+		const pair = (left, right) => {
+			if (!left && !right) return null;
+			if (!left) return right;
+			if (!right) return left;
+			return react.createElement("div", { className: "dshws_pair" }, left, right);
+		};
+		const controlStyle = { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", height: "34px", font: "inherit", color: "var(--dsw-alias-label-primary)", borderRadius: "8px", padding: "0 12px", fontSize: "13px", lineHeight: "1.5", width: "100%", boxSizing: "border-box" };
+		const textInput = (props) => react.createElement("input", { style: controlStyle, type: "text", ...props });
+		const numberInput = (props) => react.createElement("input", {
+			style: controlStyle,
+			type: "text",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			autoComplete: "off",
+			...props,
+			onChange: (event) => {
+				props.onChange?.({ target: { value: String(event.target.value ?? "").replace(/\D/g, "") } });
+			}
+		});
+		const secretInput = (props) => react.createElement("input", { style: controlStyle, type: "password", autoComplete: "off", ...props });
+		const selectInput = (props) => react.createElement("select", { style: controlStyle, ...props });
 		const checkboxInput = (props) => react.createElement("input", { type: "checkbox", style: { width: "16px", height: "16px", accentColor: "var(--dsw-alias-brand-primary)" }, ...props });
 
+		const CSS_ID = "dsh-web-search-plugin/styles.css#maxresults";
+		const GLOBE_MASK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM2.1 8.75h2.55c.12 1.58.48 3 1 4.12A6.02 6.02 0 0 1 2.1 8.75zm8.25 4.12c.52-1.12.88-2.54 1-4.12H13.9a6.02 6.02 0 0 1-3.55 4.12zM13.9 7.25h-2.55c-.12-1.58-.48-3-1-4.12A6.02 6.02 0 0 1 13.9 7.25zM5.65 3.13c-.52 1.12-.88 2.54-1 4.12H2.1a6.02 6.02 0 0 1 3.55-4.12zM8 2.2c.82 1.12 1.36 2.82 1.5 4.95H6.5C6.64 5.02 7.18 3.32 8 2.2zm0 11.6c-.82-1.12-1.36-2.82-1.5-4.95h3C9.36 10.98 8.82 12.68 8 13.8z'/%3E%3C/svg%3E\") 50%/contain no-repeat";
+		if (typeof document !== "undefined") {
+			for (const old of document.querySelectorAll('style[data-plugin="dsh-web-search-plugin"]')) old.remove();
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-web-search-plugin";
+			tag.dataset.pluginCss = CSS_ID;
+			tag.textContent = [
+				"@keyframes dshws-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}",
+				".dshws_quota{border:1px solid var(--dsw-alias-border-l3,rgba(128,128,128,0.12));background:var(--dsw-alias-bg-layer-2,rgba(128,128,128,0.04));border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}",
+				".dshws_quota_head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}",
+				".dshws_quota_title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary)}",
+				".dshws_quota_pct{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary);background:transparent;border:none;padding:0;font:inherit;font-weight:600;cursor:pointer}",
+				".dshws_quota_pct:disabled{cursor:wait;opacity:.7}",
+				".dshws_quota_track{height:6px;border-radius:999px;background:var(--dsw-alias-bg-layer-1,rgba(128,128,128,0.14));overflow:hidden}",
+				".dshws_quota_fill{height:100%;border-radius:999px;background:var(--dsw-alias-state-success-primary,#10b981);transition:width .2s ease}",
+				".dshws_quota_fill_warning{background:var(--dsw-alias-state-warn-primary,var(--dsw-alias-state-warning-primary,#f59e0b))}",
+				".dshws_quota_fill_danger{background:var(--dsw-alias-state-error-primary,#ef4444)}",
+				".dshws_quota_meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}",
+				".dshws_quota_hint{font-size:11px;color:var(--dsw-alias-label-tertiary);line-height:1.45;margin:0}",
+				".dshws_quota_alert{font-size:11.5px;margin:0;line-height:1.45}",
+				".dshws_quota_alert_warning{color:var(--dsw-alias-state-warn-primary,#f59e0b)}",
+				".dshws_quota_alert_danger{color:var(--dsw-alias-state-error-primary,#ef4444)}",
+				".dshws_btn{appearance:none;font:inherit;cursor:pointer;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s ease,opacity .15s ease}",
+				".dshws_btn:disabled{cursor:not-allowed;opacity:.45}",
+				".dshws_btn_primary{border:1px solid transparent;color:var(--dsw-alias-label-on-brand,#fff);background:var(--dsw-alias-bg-brand-solid,var(--dsw-alias-brand-primary,#3b82f6));font-weight:600}",
+				".dshws_btn_primary:hover:not(:disabled){filter:brightness(1.08)}",
+				".dshws_btn_outline{border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:transparent}",
+				".dshws_toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--dsw-alias-state-success-primary,#10b981);color:#fff;padding:8px 18px;border-radius:999px;box-shadow:var(--dsw-shadow-lv3,0 8px 24px rgba(0,0,0,.3));font-size:12.5px;font-weight:500;z-index:100000;animation:dshws-toast-in .2s ease-out}",
+				".dshws_toast_error{background:var(--dsw-alias-state-error-primary,#ef4444)}",
+				".dshws_toast_info{background:var(--dsw-alias-label-secondary,#6b7280)}",
+				".dshws_card_header{display:flex;align-items:flex-start;gap:12px;padding:6px 0 2px}",
+				".dshws_card_headText{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}",
+				".dshws_card_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}",
+				".dshws_card_desc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}",
+				".dshws_pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,0.12));color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}",
+				".dshws_form{display:flex;flex-direction:column;gap:0}",
+				".dshws_field{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid var(--dsw-alias-border-l2);min-width:0}",
+				".dshws_field_head{display:flex;align-items:center;gap:8px}",
+				".dshws_field_label{min-width:0;flex:1;color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:1.5}",
+				".dshws_field_badges{display:inline-flex;align-items:center;gap:8px;flex:none}",
+				".dshws_field_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.45}",
+				".dshws_field_error{color:var(--dsw-alias-state-error-primary,#ef4444)!important;margin:0;font-size:12px;line-height:1.45;font-weight:500}",
+				".dshws_pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;border-top:1px solid var(--dsw-alias-border-l2)}",
+				".dshws_pair>.dshws_field{border-top:none;padding:10px 0}",
+				".dshws_badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,0.12));color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}",
+				".dshws_reset{appearance:none;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:transparent;border:none;padding:0;font-size:12px;line-height:1.5}",
+				".dshws_reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}",
+				".dshws_reset:disabled{cursor:default;opacity:.45}",
+				".dshws_input_invalid{border-color:var(--dsw-alias-state-error-primary,#ef4444)!important}",
+				"[data-dshws-nav]>[class*='_navIcon']{display:none}",
+				"[data-dshws-nav]:before{content:'';background:currentColor;flex:none;width:16px;height:16px;-webkit-mask:" + GLOBE_MASK + ";mask:" + GLOBE_MASK + "}"
+			].join("\n");
+			document.head.appendChild(tag);
+		}
+
+		function interpolate(template, vars) {
+			return String(template ?? "").replace(/\{(\w+)\}/g, (_, key) => vars[key] == null ? "" : String(vars[key]));
+		}
+		function tFill(t, key, vars) {
+			return interpolate(t(key), vars);
+		}
+		function formatResetTime(ms) {
+			if (!Number.isFinite(ms) || ms <= 0) return "—";
+			const date = new Date(ms);
+			return Number.isNaN(date.getTime()) ? "—" : date.toLocaleString();
+		}
+		function usedPercent(used, limit) {
+			if (!Number.isFinite(limit) || limit <= 0 || !Number.isFinite(used)) return 0;
+			return Math.max(0, Math.min(100, (100 * used) / limit));
+		}
+		function remainingLevel(used, limit) {
+			if (!Number.isFinite(limit) || limit <= 0) return "unknown";
+			const remainingPct = Math.max(0, (100 * (limit - used)) / limit);
+			if (remainingPct <= 10) return "danger";
+			if (remainingPct <= 20) return "warning";
+			return "success";
+		}
+
+		const USAGE_POLL_MS = 15000;
+		function createUsageClientStore() {
+			let snap = { status: "idle", payload: null, refreshing: false };
+			const listeners = new Set();
+			const publish = () => {
+				for (const listener of listeners) listener();
+			};
+			const load = async (force) => {
+				if (force) {
+					snap = { ...snap, refreshing: true };
+					publish();
+				}
+				try {
+					const response = await fetch(force ? "/dsh-web-search/usage?force=1" : "/dsh-web-search/usage", { cache: "no-store" });
+					const payload = await response.json();
+					snap = { status: "ok", payload, refreshing: false };
+				} catch (error) {
+					snap = { status: "error", payload: snap.payload, refreshing: false, error: String(error?.message ?? error) };
+				}
+				publish();
+				return snap;
+			};
+			return {
+				subscribe(listener) {
+					listeners.add(listener);
+					return () => listeners.delete(listener);
+				},
+				getSnapshot() {
+					return snap;
+				},
+				refresh: () => load(true),
+				start() {
+					void load(true);
+					const timer = setInterval(() => {
+						void load(false);
+					}, USAGE_POLL_MS);
+					return () => clearInterval(timer);
+				}
+			};
+		}
+		const usageStore = createUsageClientStore();
+
+		function QuotaBar(props) {
+			const { name, used, limit, remainingText, resetText, level, onRefresh, refreshing, t, extra } = props;
+			const pct = usedPercent(used, limit);
+			const hasLimit = Number.isFinite(limit) && limit > 0;
+			const fillClass = "dshws_quota_fill" + (level === "danger" ? " dshws_quota_fill_danger" : level === "warning" ? " dshws_quota_fill_warning" : "");
+			return react.createElement("div", { className: "dshws_quota" },
+				react.createElement("div", { className: "dshws_quota_head" },
+					react.createElement("span", { className: "dshws_quota_title" }, name),
+					react.createElement("button", {
+						type: "button",
+						className: "dshws_quota_pct",
+						disabled: refreshing,
+						title: refreshing ? t("quotaRefreshing") : t("quotaRefresh"),
+						onClick: onRefresh
+					}, hasLimit ? Math.round(pct) + "%" : (Number.isFinite(used) && used > 0 ? String(used) : "—"))),
+				react.createElement("div", { className: "dshws_quota_track" },
+					react.createElement("div", { className: fillClass, style: { width: (hasLimit ? pct : 0) + "%" } })),
+				react.createElement("div", { className: "dshws_quota_meta" },
+					react.createElement("span", null, remainingText),
+					react.createElement("span", null, resetText)),
+				level === "warning" || level === "danger"
+					? react.createElement("p", { className: "dshws_quota_alert dshws_quota_alert_" + level }, t(level === "danger" ? "quotaDanger" : "quotaWarn"))
+					: null,
+				extra);
+		}
+
+		function QuotaCard(props) {
+			const { t, provider, keyed } = props;
+			const usage = react.useSyncExternalStore(usageStore.subscribe, usageStore.getSnapshot, usageStore.getSnapshot);
+			const showTavily = provider === "tavily" && keyed;
+			const showBrave = provider === "brave";
+			if (!showTavily && !showBrave) return null;
+			const payload = usage.payload;
+			const refreshing = usage.refreshing === true;
+			const onRefresh = (event) => {
+				event.preventDefault();
+				void usageStore.refresh();
+			};
+			if (showTavily) {
+				const info = payload?.tavily;
+				const error = info?.error || (usage.status === "error" ? usage.error : null);
+				if (!info || info.fetchedAt === 0 && info.used === 0 && !error) {
+					return react.createElement("div", { className: "dshws_quota" },
+						react.createElement("div", { className: "dshws_quota_head" },
+							react.createElement("span", { className: "dshws_quota_title" }, t("quotaTitle")),
+							react.createElement("button", { type: "button", className: "dshws_quota_pct", disabled: refreshing, onClick: onRefresh }, refreshing ? t("quotaRefreshing") : t("quotaRefresh"))),
+						react.createElement("p", { className: "dshws_quota_hint" }, t("quotaEmpty")),
+						react.createElement("p", { className: "dshws_quota_hint" }, t("quotaKeyedHint")));
+				}
+				const used = Number(info.used) || 0;
+				const limit = info.limit;
+				const remaining = info.remaining;
+				const level = remainingLevel(used, limit);
+				const name = info.plan ? tFill(t, "quotaPlan", { plan: info.plan }) : t("quotaTitle");
+				const remainingText = Number.isFinite(limit) && limit > 0
+					? tFill(t, "quotaUsed", { used, limit }) + " · " + tFill(t, "quotaRemaining", { remaining: remaining ?? Math.max(0, limit - used) })
+					: used > 0
+						? tFill(t, "quotaUsedOnly", { used }) + " · " + t("quotaUnlimited")
+						: t("quotaUnlimited");
+				return react.createElement(QuotaBar, {
+						name,
+						used,
+						limit,
+						remainingText,
+						resetText: t("quotaCycle"),
+						level,
+						onRefresh,
+						refreshing,
+						t,
+						extra: [
+							info.paygoUsed > 0 ? react.createElement("p", { className: "dshws_quota_hint", key: "paygo" }, tFill(t, "quotaPaygo", { used: info.paygoUsed, limit: info.paygoLimit ?? "—" })) : null,
+							error ? react.createElement("p", { className: "dshws_quota_hint", key: "err" }, tFill(t, "quotaError", { error })) : react.createElement("p", { className: "dshws_quota_hint", key: "hint" }, t("quotaKeyedHint"))
+						]
+					});
+			}
+			const brave = payload?.brave;
+			const monthly = brave?.monthly;
+			const burst = brave?.burst;
+			if (!monthly && !burst) {
+				return react.createElement("div", { className: "dshws_quota" },
+					react.createElement("span", { className: "dshws_quota_title" }, t("quotaTitle")),
+					react.createElement("p", { className: "dshws_quota_hint" }, t("quotaEmpty")));
+			}
+			const monthlyCapped = Number.isFinite(monthly?.limit) && monthly.limit > 0;
+			const primary = monthlyCapped ? monthly : (burst ?? monthly);
+			const used = Number(primary.used) || 0;
+			const limit = primary.limit;
+			const remaining = primary.remaining;
+			const level = remainingLevel(used, limit);
+			return react.createElement(QuotaBar, {
+					name: monthlyCapped ? t("quotaTitle") : t("quotaBraveCapacity"),
+					used,
+					limit,
+					remainingText: monthlyCapped
+						? tFill(t, "quotaUsed", { used, limit }) + " · " + tFill(t, "quotaRemaining", { remaining: remaining ?? Math.max(0, limit - used) })
+						: tFill(t, "quotaBraveRps", { limit: limit ?? 0 }) + " · " + tFill(t, "quotaRemaining", { remaining: remaining ?? 0 }),
+					resetText: monthlyCapped
+						? tFill(t, "quotaResets", { time: formatResetTime(monthly.resetAt) })
+						: t("quotaBraveUnlimited") + (monthly?.resetAt ? " · " + tFill(t, "quotaResets", { time: formatResetTime(monthly.resetAt) }) : ""),
+					level,
+					onRefresh,
+					refreshing,
+					t,
+					extra: monthlyCapped && burst
+						? react.createElement("p", { className: "dshws_quota_hint", key: "burst" }, tFill(t, "quotaBurst", { remaining: burst.remaining, limit: burst.limit }))
+						: null
+				});
+		}
+
+		function toastCopy(t, key) {
+			if (key === "saved") return t("savedToast");
+			if (key === "nothing") return t("nothingToSave");
+			if (key === "invalid") return t("invalidToast");
+			if (key === "failed") return t("saveFailed");
+			return "";
+		}
+
 		/** Render the provider selector plus the backend-specific staged form. */
 		function WebSearchCard(props) {
 			const { t, state, actions } = props;
 			if (!state.available) return null;
 			const disabled = !state.writable;
-			const blocked = !state.dirty || state.invalid || state.saving;
 			const provider = state.provider.text === "brave" ? "brave" : state.provider.text === "deepseek-official" ? "deepseek-official" : "tavily";
 			const brave = provider === "brave";
 			const deepseek = provider === "deepseek-official";
 			const keyed = state.mode.text === "keyed";
-			return react.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } },
-				!state.writable ? react.createElement("p", { style: { color: "var(--dsw-alias-label-tertiary)", margin: "0", fontSize: "12px", lineHeight: "1.5" } }, t("readOnly")) : null,
-				fieldRow(t("provider"), null, selectInput({ id: "ws-provider", value: provider, disabled, onChange: (e) => actions.edit("provider", e.target.value), children: [
-					react.createElement("option", { value: "tavily", key: "tavily" }, t("providerTavily")),
-					react.createElement("option", { value: "brave", key: "brave" }, t("providerBrave")),
-					react.createElement("option", { value: "deepseek-official", key: "deepseek-official" }, t("providerDeepseek"))
-				] })),
-				deepseek ? null : brave ? null : fieldRow(t("mode"), null, selectInput({ id: "ws-mode", value: state.mode.text, disabled, onChange: (e) => actions.edit("mode", e.target.value), children: [
-					react.createElement("option", { value: "keyless", key: "keyless" }, t("modeKeyless")),
-					react.createElement("option", { value: "keyed", key: "keyed" }, t("modeKeyed"))
-				] })),
-				// API key + credential reference for the visible backend.
-				deepseek ? fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-deepseek-key", value: state.deepseekApiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(DEEPSEEK_API_KEY_FIELD, e.target.value) })) : null,
-				deepseek ? fieldRow(t("deepseekApiKeyEnv"), t("deepseekApiKeyEnvHint"), textInput({ id: "ws-deepseek-keyref", value: state.deepseekApiKeyEnv.text, disabled, onChange: (e) => actions.edit("deepseekApiKeyEnv", e.target.value), onReset: () => actions.resetField("deepseekApiKeyEnv") })) : null,
-				brave ? fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-brave-key", value: state.braveApiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(BRAVE_API_KEY_FIELD, e.target.value) })) : null,
-				brave ? fieldRow(t("braveApiKeyEnv"), t("braveApiKeyEnvHint"), textInput({ id: "ws-brave-keyref", value: state.braveApiKeyEnv.text, disabled, onChange: (e) => actions.edit("braveApiKeyEnv", e.target.value), onReset: () => actions.resetField("braveApiKeyEnv") })) : null,
-				(!brave && !deepseek && keyed) ? fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-tavily-key", value: state.apiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(TAVILY_API_KEY_FIELD, e.target.value) })) : null,
-				(!brave && !deepseek && keyed) ? fieldRow(t("apiKeyEnv"), t("apiKeyEnvHint"), textInput({ id: "ws-tavily-keyref", value: state.apiKeyEnv.text, disabled, onChange: (e) => actions.edit("apiKeyEnv", e.target.value), onReset: () => actions.resetField("apiKeyEnv") })) : null,
-				// Endpoint.
-				deepseek ? fieldRow(t("deepseekBaseURL"), t("deepseekBaseURLHint"), textInput({ id: "ws-deepseek-base", value: state.deepseekBaseURL.text, disabled, onChange: (e) => actions.edit("deepseekBaseURL", e.target.value), onReset: () => actions.resetField("deepseekBaseURL") })) : null,
-				brave ? fieldRow(t("braveBaseURL"), t("braveBaseURLHint"), textInput({ id: "ws-brave-base", value: state.braveBaseURL.text, disabled, onChange: (e) => actions.edit("braveBaseURL", e.target.value), onReset: () => actions.resetField("braveBaseURL") })) : null,
-				(!brave && !deepseek) ? fieldRow(t("baseURL"), t("baseURLHint"), textInput({ id: "ws-tavily-base", value: state.baseURL.text, disabled, onChange: (e) => actions.edit("baseURL", e.target.value), onReset: () => actions.resetField("baseURL") })) : null,
-				// DeepSeek options.
-				deepseek ? fieldRow(t("model"), t("modelHint"), textInput({ id: "ws-model", value: state.model.text, disabled, onChange: (e) => actions.edit("model", e.target.value), onReset: () => actions.resetField("model") })) : null,
-				deepseek ? fieldRow(t("apiVersion"), t("apiVersionHint"), textInput({ id: "ws-apiversion", value: state.apiVersion.text, disabled, onChange: (e) => actions.edit("apiVersion", e.target.value), onReset: () => actions.resetField("apiVersion") })) : null,
-				deepseek ? fieldRow(t("maxTokens"), t("maxTokensHint"), textInput({ id: "ws-maxtokens", numeric: true, value: state.maxTokens.text, disabled, onChange: (e) => actions.edit("maxTokens", e.target.value), onReset: () => actions.resetField("maxTokens") })) : null,
-				deepseek ? fieldRow(t("maxUses"), t("maxUsesHint"), textInput({ id: "ws-maxuses", numeric: true, value: state.maxUses.text, disabled, onChange: (e) => actions.edit("maxUses", e.target.value), onReset: () => actions.resetField("maxUses") })) : null,
-				// Tavily options.
-				(!brave && !deepseek) ? fieldRow(t("searchDepth"), null, selectInput({ id: "ws-depth", value: state.searchDepth.text, disabled, onChange: (e) => actions.edit("searchDepth", e.target.value), children: [
-					react.createElement("option", { value: "basic", key: "basic" }, t("searchDepthBasic")),
-					react.createElement("option", { value: "advanced", key: "advanced" }, t("searchDepthAdvanced"))
-				] })) : null,
-				(!brave && !deepseek) ? fieldRow(t("topic"), null, selectInput({ id: "ws-topic", value: state.topic.text, disabled, onChange: (e) => actions.edit("topic", e.target.value), children: [
-					react.createElement("option", { value: "general", key: "general" }, t("topicGeneral")),
-					react.createElement("option", { value: "news", key: "news" }, t("topicNews"))
-				] })) : null,
-				(!brave && !deepseek) ? fieldRow(t("includeAnswer"), t("includeAnswerHint"), checkboxInput({ id: "ws-answer", checked: state.includeAnswer.text === "true", disabled, onChange: (e) => actions.edit("includeAnswer", e.target.checked ? "true" : "") })) : null,
-				// Brave options.
-				brave ? fieldRow(t("country"), t("countryHint"), textInput({ id: "ws-country", value: state.country.text, disabled, onChange: (e) => actions.edit("country", e.target.value), onReset: () => actions.resetField("country") })) : null,
-				brave ? fieldRow(t("searchLang"), t("searchLangHint"), textInput({ id: "ws-lang", value: state.searchLang.text, disabled, onChange: (e) => actions.edit("searchLang", e.target.value), onReset: () => actions.resetField("searchLang") })) : null,
-				brave ? fieldRow(t("freshness"), null, selectInput({ id: "ws-freshness", value: state.freshness.text, disabled, onChange: (e) => actions.edit("freshness", e.target.value), children: [
-					react.createElement("option", { value: "", key: "any" }, t("freshnessAny")),
-					react.createElement("option", { value: "pd", key: "pd" }, t("freshnessDay")),
-					react.createElement("option", { value: "pw", key: "pw" }, t("freshnessWeek")),
-					react.createElement("option", { value: "pm", key: "pm" }, t("freshnessMonth")),
-					react.createElement("option", { value: "py", key: "py" }, t("freshnessYear"))
-				] })) : null,
-				brave ? fieldRow(t("proxy"), t("proxyHint"), textInput({ id: "ws-proxy", value: state.proxy.text, disabled, onChange: (e) => actions.edit("proxy", e.target.value), onReset: () => actions.resetField("proxy") })) : null,
-				fieldRow(t("maxResults"), t("maxResultsHint"), textInput({ id: "ws-max", numeric: true, value: state.maxResults.text, disabled, onChange: (e) => actions.edit("maxResults", e.target.value), onReset: () => actions.resetField("maxResults") })),
+			const toastText = toastCopy(t, state.toastKey);
+			const toastTone = state.toastKey === "failed" || state.toastKey === "invalid" ? "error" : state.toastKey === "nothing" ? "info" : "success";
+			const row = (field, label, hint, children) => fieldRow(label, hint, children, {
+				t,
+				overridden: state[field]?.overridden === true,
+				invalid: state[field]?.invalid === true,
+				disabled,
+				onReset: () => actions.resetField(field)
+			});
+			const maxResultsWrite = numberField("maxResults", { min: 1, max: MAX_RESULTS_CAP }).parse(String(state.maxResults.text ?? "").trim());
+			const maxResultsValue = maxResultsWrite?.kind === "set" ? String(maxResultsWrite.value) : "8";
+			const maxResultsRow = row("maxResults", t("maxResults"), null, selectInput({
+				id: "ws-max",
+				value: maxResultsValue,
+				disabled,
+				className: state.maxResults.invalid ? "dshws_input_invalid" : void 0,
+				onChange: (e) => actions.edit("maxResults", e.target.value),
+				children: Array.from({ length: MAX_RESULTS_CAP }, (_, index) => {
+					const n = String(index + 1);
+					return react.createElement("option", { value: n, key: n }, n);
+				})
+			}));
+			return react.createElement("div", { className: "dshws_form" },
+				react.createElement("div", { className: "dshws_card_header" },
+					react.createElement("div", { className: "dshws_card_headText" },
+						react.createElement("span", { className: "dshws_card_name" }, t("nav"))),
+					state.dirty || state.failed ? react.createElement("span", { className: "dshws_pending" }, t("unsaved")) : null),
+				!state.writable ? react.createElement("p", { className: "dshws_field_hint", style: { padding: "8px 0 0" } }, t("readOnly")) : null,
+				pair(
+					row("provider", t("provider"), null, selectInput({ id: "ws-provider", value: provider, disabled, onChange: (e) => actions.edit("provider", e.target.value), children: [
+						react.createElement("option", { value: "tavily", key: "tavily" }, t("providerTavily")),
+						react.createElement("option", { value: "brave", key: "brave" }, t("providerBrave")),
+						react.createElement("option", { value: "deepseek-official", key: "deepseek-official" }, t("providerDeepseek"))
+					] })),
+					deepseek || brave ? null : row("mode", t("mode"), null, selectInput({ id: "ws-mode", value: state.mode.text, disabled, onChange: (e) => actions.edit("mode", e.target.value), children: [
+						react.createElement("option", { value: "keyless", key: "keyless" }, t("modeKeyless")),
+						react.createElement("option", { value: "keyed", key: "keyed" }, t("modeKeyed"))
+					] }))
+				),
+				react.createElement(QuotaCard, { t, provider, keyed }),
+				deepseek ? pair(
+					fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-deepseek-key", value: state.deepseekApiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(DEEPSEEK_API_KEY_FIELD, e.target.value) })),
+					row("deepseekApiKeyEnv", t("deepseekApiKeyEnv"), t("deepseekApiKeyEnvHint"), textInput({ id: "ws-deepseek-keyref", value: state.deepseekApiKeyEnv.text, disabled, onChange: (e) => actions.edit("deepseekApiKeyEnv", e.target.value) }))
+				) : null,
+				brave ? pair(
+					fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-brave-key", value: state.braveApiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(BRAVE_API_KEY_FIELD, e.target.value) })),
+					row("braveApiKeyEnv", t("braveApiKeyEnv"), t("braveApiKeyEnvHint"), textInput({ id: "ws-brave-keyref", value: state.braveApiKeyEnv.text, disabled, onChange: (e) => actions.edit("braveApiKeyEnv", e.target.value) }))
+				) : null,
+				(!brave && !deepseek && keyed) ? pair(
+					fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "ws-tavily-key", value: state.apiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => actions.edit(TAVILY_API_KEY_FIELD, e.target.value) })),
+					row("apiKeyEnv", t("apiKeyEnv"), t("apiKeyEnvHint"), textInput({ id: "ws-tavily-keyref", value: state.apiKeyEnv.text, disabled, onChange: (e) => actions.edit("apiKeyEnv", e.target.value) }))
+				) : null,
+				deepseek ? row("deepseekBaseURL", t("deepseekBaseURL"), t("deepseekBaseURLHint"), textInput({ id: "ws-deepseek-base", value: state.deepseekBaseURL.text, disabled, onChange: (e) => actions.edit("deepseekBaseURL", e.target.value) })) : null,
+				brave ? row("braveBaseURL", t("braveBaseURL"), t("braveBaseURLHint"), textInput({ id: "ws-brave-base", value: state.braveBaseURL.text, disabled, onChange: (e) => actions.edit("braveBaseURL", e.target.value) })) : null,
+				(!brave && !deepseek) ? row("baseURL", t("baseURL"), t("baseURLHint"), textInput({ id: "ws-tavily-base", value: state.baseURL.text, disabled, onChange: (e) => actions.edit("baseURL", e.target.value) })) : null,
+				deepseek ? pair(
+					row("model", t("model"), t("modelHint"), textInput({ id: "ws-model", value: state.model.text, disabled, onChange: (e) => actions.edit("model", e.target.value) })),
+					row("apiVersion", t("apiVersion"), t("apiVersionHint"), textInput({ id: "ws-apiversion", value: state.apiVersion.text, disabled, onChange: (e) => actions.edit("apiVersion", e.target.value) }))
+				) : null,
+				deepseek ? pair(
+					row("maxTokens", t("maxTokens"), t("maxTokensHint"), numberInput({ id: "ws-maxtokens", value: state.maxTokens.text, disabled, onChange: (e) => actions.edit("maxTokens", e.target.value), className: state.maxTokens.invalid ? "dshws_input_invalid" : void 0 })),
+					row("maxUses", t("maxUses"), t("maxUsesHint"), numberInput({ id: "ws-maxuses", value: state.maxUses.text, disabled, onChange: (e) => actions.edit("maxUses", e.target.value), className: state.maxUses.invalid ? "dshws_input_invalid" : void 0 }))
+				) : null,
+				(!brave && !deepseek) ? pair(
+					row("searchDepth", t("searchDepth"), null, selectInput({ id: "ws-depth", value: state.searchDepth.text, disabled, onChange: (e) => actions.edit("searchDepth", e.target.value), children: [
+						react.createElement("option", { value: "basic", key: "basic" }, t("searchDepthBasic")),
+						react.createElement("option", { value: "advanced", key: "advanced" }, t("searchDepthAdvanced"))
+					] })),
+					row("topic", t("topic"), null, selectInput({ id: "ws-topic", value: state.topic.text, disabled, onChange: (e) => actions.edit("topic", e.target.value), children: [
+						react.createElement("option", { value: "general", key: "general" }, t("topicGeneral")),
+						react.createElement("option", { value: "news", key: "news" }, t("topicNews"))
+					] }))
+				) : null,
+				(!brave && !deepseek) ? pair(
+					row("includeAnswer", t("includeAnswer"), t("includeAnswerHint"), checkboxInput({ id: "ws-answer", checked: state.includeAnswer.text === "true", disabled, onChange: (e) => actions.edit("includeAnswer", e.target.checked ? "true" : "") })),
+					maxResultsRow
+				) : null,
+				brave ? pair(
+					row("country", t("country"), t("countryHint"), textInput({ id: "ws-country", value: state.country.text, disabled, placeholder: t("braveDefaultPlaceholder"), onChange: (e) => actions.edit("country", e.target.value) })),
+					row("searchLang", t("searchLang"), t("searchLangHint"), textInput({ id: "ws-lang", value: state.searchLang.text, disabled, placeholder: t("braveDefaultPlaceholder"), onChange: (e) => actions.edit("searchLang", e.target.value) }))
+				) : null,
+				brave ? pair(
+					row("freshness", t("freshness"), null, selectInput({ id: "ws-freshness", value: state.freshness.text, disabled, onChange: (e) => actions.edit("freshness", e.target.value), children: [
+						react.createElement("option", { value: "", key: "any" }, t("freshnessAny")),
+						react.createElement("option", { value: "pd", key: "pd" }, t("freshnessDay")),
+						react.createElement("option", { value: "pw", key: "pw" }, t("freshnessWeek")),
+						react.createElement("option", { value: "pm", key: "pm" }, t("freshnessMonth")),
+						react.createElement("option", { value: "py", key: "py" }, t("freshnessYear"))
+					] })),
+					maxResultsRow
+				) : null,
+				brave ? row("proxy", t("proxy"), null, textInput({ id: "ws-proxy", value: state.proxy.text, disabled, placeholder: t("proxyPlaceholder"), onChange: (e) => actions.edit("proxy", e.target.value) })) : null,
+				deepseek ? maxResultsRow : null,
 				react.createElement("div", { style: { borderTop: "1px solid var(--dsw-alias-border-l2)", justifyContent: "flex-end", alignItems: "center", gap: "8px", padding: "12px 0 4px", display: "flex" } },
-					state.failed ? react.createElement("p", { role: "status", style: { minWidth: 0, color: "var(--dsw-alias-label-error)", flex: 1, margin: 0, fontSize: "12px", lineHeight: "1.5" } }, t("saveFailed")) : null,
-					react.createElement("button", { type: "button", disabled: !state.dirty || state.saving, onClick: actions.discard, style: { appearance: "none", font: "inherit", cursor: "pointer", border: "1px solid var(--dsw-alias-border-l2)", borderRadius: "8px", padding: "5px 14px", fontSize: "13px", lineHeight: "1.5", color: "var(--dsw-alias-label-secondary)", background: "0 0" } }, t("discard")),
-					react.createElement("button", { type: "button", disabled: blocked, onClick: actions.save, style: { appearance: "none", font: "inherit", cursor: "pointer", border: "1px solid transparent", borderRadius: "8px", padding: "5px 14px", fontSize: "13px", lineHeight: "1.5", color: "var(--dsw-alias-label-on-brand)", background: "var(--dsw-alias-bg-brand-solid)" } }, t(state.saving ? "saving" : "save"))));
+					react.createElement("button", {
+						type: "button",
+						className: "dshws_btn dshws_btn_outline",
+						disabled: (!state.dirty && !state.failed) || state.saving,
+						onClick: (event) => {
+							event.preventDefault();
+							actions.discard();
+						}
+					}, t("discard")),
+					react.createElement("button", {
+						type: "button",
+						className: "dshws_btn dshws_btn_primary",
+						disabled: state.saving || !state.writable,
+						onClick: (event) => {
+							event.preventDefault();
+							void actions.save();
+						}
+					}, t(state.saving ? "saving" : "save"))),
+				toastText ? react.createElement("div", { className: "dshws_toast" + (toastTone === "error" ? " dshws_toast_error" : toastTone === "info" ? " dshws_toast_info" : ""), role: "status" }, toastText) : null);
 		}
 
 		/** Section component: the "Web search" page body, driven by useSyncExternalStore. */
@@ -579,6 +1025,32 @@ window.__ModuleLoader__.load({
 			};
 		}
 
+		function syncSettingsNavIcon() {
+			if (typeof document === "undefined" || typeof document.querySelectorAll !== "function") return;
+			const lists = document.querySelectorAll("[class*='_navList']");
+			for (const list of lists) {
+				const cells = list.querySelectorAll(":scope > [class*='_navCell']");
+				for (const cell of cells) {
+					const text = String(cell.textContent ?? "").replace(/\s+/g, " ").trim();
+					if (text === "网页搜索" || text === "Web search") cell.setAttribute("data-dshws-nav", "web-search");
+					else cell.removeAttribute("data-dshws-nav");
+				}
+			}
+		}
+		function startSettingsNavIconSync() {
+			if (typeof document === "undefined") return () => {};
+			const run = () => {
+				try { syncSettingsNavIcon(); } catch { /* settings sheet not mounted yet */ }
+			};
+			run();
+			if (typeof MutationObserver !== "function") return () => {};
+			const root = document.body || document.documentElement;
+			if (!root) return () => {};
+			const observer = new MutationObserver(run);
+			observer.observe(root, { childList: true, subtree: true, characterData: true });
+			return () => observer.disconnect();
+		}
+
 		/** Mount the top-level "Web search" settings section. */
 		function apply(ctx) {
 			const { api } = ctx.get("connection");
@@ -588,6 +1060,8 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => ctx.remote.$on("credentials/updated", (ref) => {
 				controller.form.refreshCredential(ref);
 			}), "dsh-web-search-plugin: credential invalidations");
+			ctx.effect(() => usageStore.start(), "dsh-web-search-plugin: usage poll");
+			ctx.effect(() => startSettingsNavIconSync(), "dsh-web-search-plugin: settings nav icon");
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "web-search",