dsh-web-search-plugin 0.1.1 → 0.2.0

package/lib/client.js

@@ -1,7 +1,9 @@
 /**
- * Browser half of `dsh-web-search-plugin`: a plugin card under the
- * "settings → Plugins → Plugin configuration" surface that edits the
- * `dsh-web-search-plugin` settings namespace and its `TAVILY_API_KEY` credential.
+ * Browser half of `dsh-web-search-plugin`: a top-level "Web search" settings
+ * section (settings → Web search) that edits the `dsh-web-search-plugin`
+ * settings namespace. The card switches the DeepSeek / Tavily / Brave backend
+ * and writes each engine's credential through the credentials domain
+ * (`DEEPSEEK_API_KEY` / `TAVILY_API_KEY` / `BRAVE_API_KEY` by default).
  *
  * This bundle is a self-contained hand-written module in the exact wire format
  * the client module system expects: one `window.__ModuleLoader__.load` call
@@ -21,28 +23,45 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 
-		/** Settings namespace of the Tavily search provider. */
+		/** Settings namespace of this plugin. */
 		const NS = "dsh-web-search-plugin";
-		/** Credential reference the provider resolves when the section names none. */
-		const DEFAULT_API_KEY_REF = "TAVILY_API_KEY";
-		/** Form field the credential control stages under. */
-		const API_KEY_FIELD = "apiKey";
+		/** Credential reference Tavily keyed mode resolves when the section names none. */
+		const DEFAULT_TAVILY_KEY_REF = "TAVILY_API_KEY";
+		/** Credential reference Brave resolves when the section names none. */
+		const DEFAULT_BRAVE_KEY_REF = "BRAVE_API_KEY";
+		/** Credential reference DeepSeek resolves when the section names none. */
+		const DEFAULT_DEEPSEEK_KEY_REF = "DEEPSEEK_API_KEY";
+		/** Form field the Tavily write-only credential control stages under. */
+		const TAVILY_API_KEY_FIELD = "apiKey";
+		/** Form field the Brave write-only credential control stages under. */
+		const BRAVE_API_KEY_FIELD = "braveApiKey";
+		/** 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]);
 
 		/** Locale bundles for the card. */
 		const en = {
-			nav: "Web search (Tavily)",
-			description: "The Tavily search provider. Keyless by default; switch to keyed and add a Tavily API key for higher limits.",
+			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",
+			providerDeepseek: "DeepSeek (official)",
 			mode: "Auth mode",
 			modeKeyless: "Keyless (free, rate-limited)",
 			modeKeyed: "API key",
 			apiKey: "API key",
 			apiKeyHint: "Stored outside the settings file. Leave blank to keep the current key.",
 			apiKeySet: "A key is configured.",
-			apiKeyUnset: "No key is configured; keyed search is unavailable until one is.",
+			apiKeyUnset: "No key is configured; keyed / Brave search is unavailable until one is.",
 			apiKeyEnv: "Credential reference",
-			apiKeyEnvHint: "Name of the credential/env var resolved for keyed search.",
+			apiKeyEnvHint: "Name of the credential/env var resolved for keyed Tavily search.",
+			braveApiKeyEnv: "Credential reference",
+			braveApiKeyEnvHint: "Name of the credential/env var resolved for Brave search.",
 			baseURL: "Endpoint",
 			baseURLHint: "Leave blank to use the provider default.",
+			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",
@@ -53,6 +72,30 @@ window.__ModuleLoader__.load({
 			topic: "Topic",
 			topicGeneral: "General",
 			topicNews: "News",
+			country: "Country",
+			countryHint: "ISO 2-letter code (e.g. cn). Leave blank for Brave's default.",
+			searchLang: "Search language",
+			searchLangHint: "e.g. zh-hans or en. Leave blank for Brave's default.",
+			freshness: "Freshness",
+			freshnessAny: "Any time",
+			freshnessDay: "Past day",
+			freshnessWeek: "Past week",
+			freshnessMonth: "Past month",
+			freshnessYear: "Past year",
+			proxy: "Proxy",
+			proxyHint: "HTTP(S) proxy URL. Leave blank to use HTTPS_PROXY / HTTP_PROXY.",
+			deepseekApiKeyEnv: "Credential reference",
+			deepseekApiKeyEnvHint: "Name of the credential/env var resolved for DeepSeek search.",
+			deepseekBaseURL: "Endpoint",
+			deepseekBaseURLHint: "Leave blank to use the DeepSeek Anthropic-compatible API default.",
+			model: "Model",
+			modelHint: "Anthropic-format model name for the search request.",
+			apiVersion: "API version",
+			apiVersionHint: "anthropic-version header value.",
+			maxTokens: "Max tokens",
+			maxTokensHint: "Upper bound on generated tokens for the search request.",
+			maxUses: "Max uses",
+			maxUsesHint: "Maximum web_search server-tool uses per request.",
 			expand: "Show settings",
 			collapse: "Hide settings",
 			save: "Save",
@@ -65,19 +108,27 @@ window.__ModuleLoader__.load({
 		};
 		/** Simplified Chinese copy. */
 		const zh = {
-			nav: "网页搜索（Tavily）",
-			description: "Tavily 搜索提供方。默认 keyless 免费使用；切换到 API key 并填入 Tavily key 可提高限额。",
+			nav: "网页搜索",
+			description: "Tavily（默认 keyless）或 Brave Search。在此切换引擎即可，不必改 web.searchProvider。",
+			provider: "搜索引擎",
+			providerTavily: "Tavily",
+			providerBrave: "Brave Search",
+			providerDeepseek: "DeepSeek（官方）",
 			mode: "认证模式",
 			modeKeyless: "Keyless（免费、限流）",
 			modeKeyed: "API key",
 			apiKey: "API Key",
 			apiKeyHint: "不写入设置文件。留空表示保持当前密钥。",
 			apiKeySet: "已配置密钥。",
-			apiKeyUnset: "未配置密钥；keyed 模式下搜索不可用。",
+			apiKeyUnset: "未配置密钥；keyed / Brave 模式下搜索不可用。",
 			apiKeyEnv: "凭据引用名",
 			apiKeyEnvHint: "keyed 模式解析的凭据/环境变量名。",
+			braveApiKeyEnv: "凭据引用名",
+			braveApiKeyEnvHint: "Brave 搜索解析的凭据/环境变量名。",
 			baseURL: "接口地址",
 			baseURLHint: "留空则使用提供方默认地址。",
+			braveBaseURL: "接口地址",
+			braveBaseURLHint: "留空则使用 Brave Search API 默认地址。",
 			maxResults: "结果数量",
 			maxResultsHint: "每次搜索返回的源数量（1-20）。",
 			searchDepth: "搜索深度",
@@ -88,6 +139,30 @@ window.__ModuleLoader__.load({
 			topic: "主题",
 			topicGeneral: "通用",
 			topicNews: "新闻",
+			country: "国家/地区",
+			countryHint: "ISO 两位码（如 cn）。留空使用 Brave 默认。",
+			searchLang: "搜索语言",
+			searchLangHint: "如 zh-hans、en。留空使用 Brave 默认。",
+			freshness: "时效",
+			freshnessAny: "不限",
+			freshnessDay: "过去一天",
+			freshnessWeek: "过去一周",
+			freshnessMonth: "过去一月",
+			freshnessYear: "过去一年",
+			proxy: "代理",
+			proxyHint: "HTTP(S) 代理 URL。留空则使用 HTTPS_PROXY / HTTP_PROXY。",
+			deepseekApiKeyEnv: "凭据引用名",
+			deepseekApiKeyEnvHint: "DeepSeek 搜索解析的凭据/环境变量名。",
+			deepseekBaseURL: "接口地址",
+			deepseekBaseURLHint: "留空则使用 DeepSeek Anthropic 兼容 API 默认地址。",
+			model: "模型",
+			modelHint: "搜索请求使用的 Anthropic 格式模型名。",
+			apiVersion: "API 版本",
+			apiVersionHint: "anthropic-version 请求头值。",
+			maxTokens: "最大 token",
+			maxTokensHint: "搜索请求生成 token 的上限。",
+			maxUses: "最大调用次数",
+			maxUsesHint: "每次请求 web_search 服务端工具的最大调用次数。",
 			expand: "展开设置",
 			collapse: "收起设置",
 			save: "保存",
@@ -123,7 +198,7 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
-		/** A choice field spec (mode/searchDepth/topic): staged as its raw string. */
+		/** A choice field spec: staged as its raw string. */
 		function choiceField(field) {
 			return {
 				field,
@@ -141,16 +216,36 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * Staged form over the `dsh-web-search-plugin` settings namespace. Modeled on
-		 * the official cards' `CardForm` contract: a draft map, save writes every
-		 * staged edit once, and the API key is written through the credentials
-		 * domain addressed by the reference the section names.
+		 * Staged form over the `dsh-web-search-plugin` settings namespace.
+		 * Write-only credential fields (`apiKey`, `braveApiKey`) have no section
+		 * spec and are written through the credentials domain.
 		 */
-		var TavilyCardForm = class {
+		var SearchCardForm = class {
 			constructor(scope, api) {
 				this.scope = scope;
 				this.api = api;
-				this.specs = new Map([numberField("maxResults"), textField("apiKeyEnv"), textField("baseURL"), choiceField("mode"), choiceField("searchDepth"), choiceField("topic"), booleanField("includeAnswer")].map((spec) => [spec.field, spec]));
+				this.specs = new Map([
+					choiceField("provider"),
+					choiceField("mode"),
+					numberField("maxResults"),
+					textField("apiKeyEnv"),
+					textField("baseURL"),
+					choiceField("searchDepth"),
+					choiceField("topic"),
+					booleanField("includeAnswer"),
+					textField("braveApiKeyEnv"),
+					textField("braveBaseURL"),
+					textField("country"),
+					textField("searchLang"),
+					choiceField("freshness"),
+					textField("proxy"),
+					textField("deepseekApiKeyEnv"),
+					textField("deepseekBaseURL"),
+					textField("model"),
+					textField("apiVersion"),
+					numberField("maxTokens"),
+					numberField("maxUses")
+				].map((spec) => [spec.field, spec]));
 				this.staged = new Map();
 				this.saving = false;
 				this.failed = false;
@@ -182,10 +277,7 @@ window.__ModuleLoader__.load({
 			}
 			field(field) {
 				const staged = this.staged.get(field);
-				// Write-only credential controls have no section spec; they
-				// report only their staged draft (mirroring the official
-				// cards' secret-field branch in CardForm.field).
-				if (field === API_KEY_FIELD) return {
+				if (SECRET_FIELDS.has(field)) return {
 					text: staged?.text ?? "",
 					overridden: false,
 					invalid: false
@@ -206,9 +298,9 @@ window.__ModuleLoader__.load({
 			plan() {
 				const plan = [];
 				for (const [field, staged] of this.staged) {
-					if (field === API_KEY_FIELD) {
+					if (SECRET_FIELDS.has(field)) {
 						const value = staged.text.trim();
-						if (value !== "") plan.push({ field, run: () => this.writeKey(value) });
+						if (value !== "") plan.push({ field, run: () => this.writeKey(field, value) });
 						continue;
 					}
 					const spec = this.specs.get(field);
@@ -269,6 +361,7 @@ window.__ModuleLoader__.load({
 				this.staged.set(field, edit);
 				this.failed = false;
 				this.publish();
+				if (field === "provider" || field === "apiKeyEnv" || field === "braveApiKeyEnv") this.readCredential();
 			}
 			snapshotOf() {
 				return this.scope.getSnapshot();
@@ -289,12 +382,30 @@ window.__ModuleLoader__.load({
 			publish() {
 				for (const listener of this.listeners) listener();
 			}
-			/** The credential reference the section names, or the provider default. */
-			refOf() {
+			/** Draft-aware engine: staged `provider` wins over the saved section. */
+			providerOf() {
+				const staged = this.staged.get("provider");
+				if (staged !== void 0 && !staged.clear && staged.text.trim() !== "") return staged.text.trim();
+				const declared = this.sectionValue("provider");
+				return declared === "brave" || declared === "deepseek-official" ? declared : "tavily";
+			}
+			tavilyRef() {
 				const declared = this.sectionValue("apiKeyEnv");
-				return declared !== void 0 && declared.length > 0 ? declared : DEFAULT_API_KEY_REF;
+				return declared !== void 0 && declared.length > 0 ? declared : DEFAULT_TAVILY_KEY_REF;
+			}
+			braveRef() {
+				const declared = this.sectionValue("braveApiKeyEnv");
+				return declared !== void 0 && declared.length > 0 ? declared : DEFAULT_BRAVE_KEY_REF;
+			}
+			deepseekRef() {
+				const declared = this.sectionValue("deepseekApiKeyEnv");
+				return declared !== void 0 && declared.length > 0 ? declared : DEFAULT_DEEPSEEK_KEY_REF;
+			}
+			/** The credential reference the currently visible engine uses. */
+			refOf() {
+				const provider = this.providerOf();
+				return provider === "brave" ? this.braveRef() : provider === "deepseek-official" ? this.deepseekRef() : this.tavilyRef();
 			}
-			/** Ask the credentials domain about the reference the section currently names. */
 			async readCredential() {
 				const ref = this.refOf();
 				if (ref !== this.credential.ref) {
@@ -318,27 +429,26 @@ window.__ModuleLoader__.load({
 				this.credential = next;
 				this.publish();
 			}
-			/** Re-read after the Host reports a change to the reference this card watches. */
 			refreshCredential(ref) {
 				if (ref !== this.credential.ref) return;
 				this.readCredential();
 			}
-			/** Write the staged key, then re-read whether the Host now holds one. */
-			async writeKey(value) {
+			async writeKey(field, value) {
+				const ref = field === BRAVE_API_KEY_FIELD ? this.braveRef() : field === DEEPSEEK_API_KEY_FIELD ? this.deepseekRef() : this.tavilyRef();
 				try {
-					await this.api.credentials.set({ ref: this.refOf(), value });
+					await this.api.credentials.set({ ref, value });
 				} catch (_credentialWriteFailure) {}
 				await this.readCredential();
-				return this.credential.configured;
+				return this.credential.ref === ref ? this.credential.configured : true;
 			}
 		};
 
-		/** Bridges the `dsh-web-search-plugin` scope and the credentials domain onto the card. */
-		var TavilyCardController = class {
+		/** Bridges the plugin scope and the credentials domain onto the card. */
+		var SearchCardController = class {
 			constructor(scope, api) {
 				this.scope = scope;
 				this.api = api;
-				this.form = new TavilyCardForm(scope, api);
+				this.form = new SearchCardForm(scope, api);
 				this.store = this.form.bind(() => this.projection());
 				scope.subscribe(() => {
 					this.form.readCredential();
@@ -347,21 +457,36 @@ window.__ModuleLoader__.load({
 			projection() {
 				return {
 					...this.form.shell(),
+					provider: this.form.field("provider"),
 					mode: this.form.field("mode"),
-					apiKey: this.form.field(API_KEY_FIELD),
+					apiKey: this.form.field(TAVILY_API_KEY_FIELD),
 					apiKeyEnv: this.form.field("apiKeyEnv"),
 					baseURL: this.form.field("baseURL"),
 					maxResults: this.form.field("maxResults"),
 					searchDepth: this.form.field("searchDepth"),
 					includeAnswer: this.form.field("includeAnswer"),
 					topic: this.form.field("topic"),
+					braveApiKey: this.form.field(BRAVE_API_KEY_FIELD),
+					braveApiKeyEnv: this.form.field("braveApiKeyEnv"),
+					braveBaseURL: this.form.field("braveBaseURL"),
+					country: this.form.field("country"),
+					searchLang: this.form.field("searchLang"),
+					freshness: this.form.field("freshness"),
+					proxy: this.form.field("proxy"),
+					deepseekApiKey: this.form.field(DEEPSEEK_API_KEY_FIELD),
+					deepseekApiKeyEnv: this.form.field("deepseekApiKeyEnv"),
+					deepseekBaseURL: this.form.field("deepseekBaseURL"),
+					model: this.form.field("model"),
+					apiVersion: this.form.field("apiVersion"),
+					maxTokens: this.form.field("maxTokens"),
+					maxUses: this.form.field("maxUses"),
 					apiKeyConfigured: this.form.credential.configured,
 					apiKeyWritable: this.form.credential.writable
 				};
 			}
 			inject() {
 				return {
-					hooks: { tavilySearchCard: this.store },
+					hooks: { pluginSearchCard: this.store },
 					...this.form.actions()
 				};
 			}
@@ -372,75 +497,106 @@ window.__ModuleLoader__.load({
 			react.createElement("label", { style: { color: "var(--dsw-alias-label-primary)", fontSize: "13px", fontWeight: 500, lineHeight: "1.5" } }, label),
 			children,
 			hint ? react.createElement("p", { style: { color: "var(--dsw-alias-label-tertiary)", margin: 0, fontSize: "12px", lineHeight: "1.5" } }, hint) : null);
-		/** Text/number input. */
 		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 });
-		/** Password input for the write-only credential. */
 		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 });
-		/** Choice select. */
 		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 });
-		/** Checkbox for booleans. */
 		const checkboxInput = (props) => react.createElement("input", { type: "checkbox", style: { width: "16px", height: "16px", accentColor: "var(--dsw-alias-brand-primary)" }, ...props });
 
-		/** Render one plugin card: header disclosure plus the staged form. */
-		function TavilyCard(props) {
-			const { t } = props;
-			const state = props.useTavilySearchCard((snapshot) => snapshot);
-			const [open, setOpen] = react.useState(false);
+		/** 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;
-			return react.createElement("li", { style: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", borderRadius: "12px", listStyle: "none" } },
-				react.createElement("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(!open), style: { appearance: "none", width: "100%", font: "inherit", color: "inherit", textAlign: "left", cursor: "pointer", background: "0 0", border: "0", borderRadius: "12px", alignItems: "center", gap: "12px", padding: "14px 16px", display: "flex" } },
-					react.createElement("span", { style: { flexDirection: "column", flex: 1, gap: "4px", minWidth: 0, display: "flex" } },
-						react.createElement("span", { style: { color: "var(--dsw-alias-label-primary)", fontSize: "15px", fontWeight: 600, lineHeight: "1.4" } }, t("nav")),
-						react.createElement("span", { style: { color: "var(--dsw-alias-label-tertiary)", fontSize: "13px", lineHeight: "1.5" } }, t("description"))),
-					state.dirty ? react.createElement("span", { style: { whiteSpace: "nowrap", background: "var(--dsw-alias-bg-module-platform)", color: "var(--dsw-alias-label-secondary)", borderRadius: "999px", flex: "none", padding: "1px 8px", fontSize: "11px", fontWeight: 500, lineHeight: "17px" } }, t("unsaved")) : null,
-					react.createElement("span", { style: { color: "var(--dsw-alias-label-tertiary)", flex: "none" } }, open ? "▾" : "▸")),
-				open ? react.createElement("div", { style: { borderTop: "1px solid var(--dsw-alias-border-l2)", margin: "0 16px", paddingBottom: "8px" } },
-					!state.writable ? react.createElement("p", { style: { color: "var(--dsw-alias-label-tertiary)", margin: "12px 0 0", fontSize: "12px", lineHeight: "1.5" } }, t("readOnly")) : null,
-					fieldRow(t("mode"), null, selectInput({ id: "plugin-config-web-search-mode", value: state.mode.text, disabled, onChange: (e) => props.edit("mode", e.target.value), children: [
-						react.createElement("option", { value: "keyless", key: "keyless" }, t("modeKeyless")),
-						react.createElement("option", { value: "keyed", key: "keyed" }, t("modeKeyed"))
-					] })),
-					state.mode.text === "keyed" ? fieldRow(t("apiKey"), t("apiKeyHint"), secretInput({ id: "plugin-config-web-search-key", value: state.apiKey.text, disabled: !state.apiKeyWritable, placeholder: state.apiKeyConfigured ? t("apiKeySet") : t("apiKeyUnset"), onChange: (e) => props.edit("apiKey", e.target.value) })) : null,
-					state.mode.text === "keyed" ? fieldRow(t("apiKeyEnv"), t("apiKeyEnvHint"), textInput({ id: "plugin-config-web-search-keyref", value: state.apiKeyEnv.text, disabled, onChange: (e) => props.edit("apiKeyEnv", e.target.value), onReset: () => props.resetField("apiKeyEnv") })) : null,
-					fieldRow(t("baseURL"), t("baseURLHint"), textInput({ id: "plugin-config-web-search-base", value: state.baseURL.text, disabled, onChange: (e) => props.edit("baseURL", e.target.value), onReset: () => props.resetField("baseURL") })),
-					fieldRow(t("searchDepth"), null, selectInput({ id: "plugin-config-web-search-depth", value: state.searchDepth.text, disabled, onChange: (e) => props.edit("searchDepth", e.target.value), children: [
-						react.createElement("option", { value: "basic", key: "basic" }, t("searchDepthBasic")),
-						react.createElement("option", { value: "advanced", key: "advanced" }, t("searchDepthAdvanced"))
-					] })),
-					fieldRow(t("topic"), null, selectInput({ id: "plugin-config-web-search-topic", value: state.topic.text, disabled, onChange: (e) => props.edit("topic", e.target.value), children: [
-						react.createElement("option", { value: "general", key: "general" }, t("topicGeneral")),
-						react.createElement("option", { value: "news", key: "news" }, t("topicNews"))
-					] })),
-					fieldRow(t("includeAnswer"), t("includeAnswerHint"), checkboxInput({ id: "plugin-config-web-search-answer", checked: state.includeAnswer.text === "true", disabled, onChange: (e) => props.edit("includeAnswer", e.target.checked ? "true" : "") })),
-					fieldRow(t("maxResults"), t("maxResultsHint"), textInput({ id: "plugin-config-web-search-max", numeric: true, value: state.maxResults.text, disabled, onChange: (e) => props.edit("maxResults", e.target.value), onReset: () => props.resetField("maxResults") })),
-					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: props.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: props.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")))) : null);
+			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") })),
+				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"))));
+		}
+
+		/** Section component: the "Web search" page body, driven by useSyncExternalStore. */
+		function makeSection(ctx, controller) {
+			return function WebSearchSection() {
+				const state = react.useSyncExternalStore(controller.store.subscribe, controller.store.getSnapshot);
+				const t = ctx.locale.bind(NS);
+				if (!state.available) return react.createElement("p", { style: { padding: "16px" } }, t("readOnly"));
+				return react.createElement("div", { style: { padding: "16px" } },
+					react.createElement("div", { style: { border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", borderRadius: "12px", padding: "4px 16px" } },
+						react.createElement(WebSearchCard, { t: t, state: state, actions: controller.form.actions() })));
+			};
 		}
 
-		/** Mount the Tavily card into the plugin configuration surface. */
+		/** Mount the top-level "Web search" settings section. */
 		function apply(ctx) {
 			const { api } = ctx.get("connection");
 			const t = ctx.locale.bind(NS);
 			ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-web-search-plugin: card dictionaries");
-			const controller = new TavilyCardController(ctx.settingsScope.bind({ namespace: NS }), api);
+			const controller = new SearchCardController(ctx.settingsScope.bind({ namespace: NS }), api);
 			ctx.effect(() => ctx.remote.$on("credentials/updated", (ref) => {
 				controller.form.refreshCredential(ref);
 			}), "dsh-web-search-plugin: credential invalidations");
-			ctx.slots.inject("settings.plugin.item", function* () {
-				yield ctx.slots.register({
-					name: "settings.plugin.item",
-					key: "dsh-web-search-plugin",
-					locale: NS,
-					inject: () => controller.inject()
-				}, TavilyCard);
-			});
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "web-search",
+				order: 10,
+				label: () => t("nav"),
+				locale: NS
+			}, makeSection(ctx, controller)));
 		}
 
-		/** Cordis service names this browser plugin's apply reads (fiber inject). */
 		const inject = ["slots", "locale", "connection", "remote", "settingsScope"];
 
 		exports.apply = apply;
@@ -448,4 +604,3 @@ window.__ModuleLoader__.load({
 		return module.exports;
 	}
 });
-//# sourceMappingURL=client.js.map