@klarkxy/dsh-web-search-manager 0.2.5 → 0.3.1

package/lib/client.inner.cjs

@@ -219,6 +219,17 @@ ${scope} {
 /* --- Layout scaffolding. --- */
 & .dsh-ui-stack { display: flex; flex-direction: column; gap: 12px; }
 & .dsh-ui-stack-lg { display: flex; flex-direction: column; gap: 20px; }
+/* Plugin detail pages share one reading column. These are layout recipes;
+ * controls keep their own primitive styles. Form spacing follows the host's
+ * settings-form/fields.module.css and SettingsForm.module.css. */
+& .dsh-ui-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; min-width: 0; }
+& .dsh-ui-form { display: flex; flex-direction: column; gap: 0; min-width: 0; }
+&.dsh-ui-form > .dsh-ui-field, & .dsh-ui-form > .dsh-ui-field { padding: 12px 0; }
+& .dsh-ui-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; min-width: 0; }
+& .dsh-ui-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
+@media (max-width: 560px) {
+  & .dsh-ui-fields-grid { grid-template-columns: minmax(0, 1fr); }
+}
 & .dsh-ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
 & .dsh-ui-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 & .dsh-ui-spacer { flex: 1; min-width: 0; }
@@ -246,6 +257,9 @@ ${scope} {
  * official primitive, so this only owns the vertical rhythm. --- */
 & .dsh-ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 & .dsh-ui-field + .dsh-ui-field { border-top: 0.5px solid var(--dsw-alias-border-l2); padding-top: 12px; }
+/* Grid fields share a row, so the stacked-field divider must not win later in
+ * the cascade. Reset it here, after the field recipe. */
+& .dsh-ui-fields-grid > .dsh-ui-field { padding: 0; border: 0; }
 & .dsh-ui-label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); }
 & .dsh-ui-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 & .dsh-ui-help { font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
@@ -436,9 +450,87 @@ ${scope} {
   & *, & *::before, & *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
 }
 }
-`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?![+>~])/gm, (_match, className) => `&${className}, & ${className}`);
+`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?=\s*\{)/gm, (_match, className) => `&${className}, & ${className}`);
 }
 //#endregion
+//#region src/client-styles.ts
+/**
+* The shared contract paints this page: the type tiers, the card, the field,
+* the button row, the notice, the focus ring and the state colours. What is
+* left here is only the geometry the contract does not cover — the reading
+* width of the panel, the ranked three-column row, the drag affordance, the
+* drop indicator, the screen-reader-only announcer and the limits grid.
+*
+* Nothing below declares a colour of its own beyond naming a host token, and
+* nothing carries a literal fallback: the host publishes both themes and a
+* literal would pin one of them.
+*
+* Every plugin rule nests under the plugin root, as the contract does, so a
+* .ws-* or .web-search-* class never paints a neighbouring plugin. Selectors
+* that start with an element name keep an explicit `&`, the form every
+* nesting implementation accepts.
+*/
+const webSearchClientStyles = `${officialUiCss("ws-root")}
+.ws-root {
+
+.ws-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; }
+.ws-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.ws-provider-note { display: flex; align-items: center; gap: 6px; }
+.web-search-provider { display: grid; gap: 8px; min-width: 0; }
+.web-search-provider-info { display: grid; gap: 3px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.web-search-provider-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; }
+& a { color: var(--dsw-alias-state-business-primary); font-size: 12px; line-height: 18px; text-underline-offset: 3px; }
+/* The primitive renders a 32px control in an inline-flex wrapper; a settings
+ * field needs it to fill the column it sits in. */
+.ws-input { width: 100%; }
+.web-search-rank { margin: 0; padding: 0; list-style: none; }
+.web-search-rank li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+  padding: 14px 0;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+& button.web-search-drag-handle {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0;
+  cursor: grab;
+  opacity: 0.65;
+}
+& button.web-search-drag-handle:hover { opacity: 1; }
+& button.web-search-drag-handle:active { cursor: grabbing; }
+& button.web-search-drag-handle[aria-disabled='true'] { cursor: wait; opacity: 0.4; }
+.web-search-rank li[data-dragging] { opacity: 0.45; }
+.web-search-rank li[data-drop]::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--dsw-alias-state-business-primary); pointer-events: none; }
+.web-search-rank li[data-drop='before']::after { top: -1px; }
+.web-search-rank li[data-drop='after']::after { bottom: -1px; }
+.web-search-rank-index { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; line-height: 24px; }
+.web-search-rank-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 2px; }
+.ws-danger:hover:not(:disabled),
+.ws-danger[data-armed] { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
+.ws-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); }
+@media (max-width: 560px) {
+  .web-search-rank-move { flex-direction: column; align-items: flex-end; }
+}
+}
+`;
+//#endregion
 //#region ../dsh-plugin-kit/src/client-utils.ts
 /** Fixed pause for failing background reads; manual work is never replayed. */
 function createPluginReadGate(now = Date.now) {
@@ -467,8 +559,8 @@ function createPluginReadGate(now = Date.now) {
 //#endregion
 //#region src/contracts.ts
 const WEB_SEARCH_RPC_CHANNEL = "/web-search-manager";
-function pickActiveSearch(order, configured) {
-	return order.find(configured) ?? "";
+function providerKey(kind, id) {
+	return `${kind}:${id}`;
 }
 function safeConfigurationUrl(value) {
 	if (typeof value !== "string" || !value || /[\u0000-\u0020\\]/.test(value)) return;
@@ -485,6 +577,21 @@ function safeConfigurationUrl(value) {
 //#region src/provider-info.ts
 const PROVIDER_PRICING_CHECKED = "2026-09-21";
 const providerInfo = {
+	perplexity: {
+		description: "通过 Perplexity Search API 获取网页来源，不生成回答。",
+		pricing: "按 Search API 请求计费；实际价格与额度以官方账户为准。",
+		pricingUrl: "https://docs.perplexity.ai/docs/getting-started/pricing"
+	},
+	you: {
+		description: "通过 You.com 获取网页与新闻结果，不请求额外全文提取。",
+		pricing: "按 Web Search API 请求计费；实际价格与额度以官方账户为准。",
+		pricingUrl: "https://you.com/docs/administration/billing"
+	},
+	"firecrawl-fetch": {
+		description: "读取网页 Markdown；与 Firecrawl 搜索共用 Key。",
+		pricing: "网页读取使用 Firecrawl 积分，与搜索分别计费；实际消耗以官方账户为准。",
+		pricingUrl: "https://www.firecrawl.dev/pricing"
+	},
 	ddg: {
 		description: "搜索 DuckDuckGo 公开网页，无需注册或 API Key。",
 		pricing: "免费使用，不产生搜索 API 费用。",
@@ -527,6 +634,18 @@ const providerInfo = {
 	}
 };
 const englishInfo = {
+	perplexity: {
+		description: "Get web sources through the Perplexity Search API without generating an answer.",
+		pricing: "Charged per Search API request; current prices and credits depend on your official account."
+	},
+	you: {
+		description: "Get web and news results through You.com without requesting extra full-page extraction.",
+		pricing: "Charged per Web Search API request; current prices and credits depend on your official account."
+	},
+	"firecrawl-fetch": {
+		description: "Read page Markdown using the same key as Firecrawl search.",
+		pricing: "Page reads use Firecrawl credits and are charged separately from search; your official account determines usage."
+	},
 	ddg: {
 		description: "Search public DuckDuckGo pages without registration or an API key.",
 		pricing: "Free to use; no search API fees."
@@ -561,6 +680,9 @@ const englishInfo = {
 	}
 };
 const bundledDescriptions = {
+	perplexity: ["Search API；返回网页来源，不生成回答。", "Search API returning web sources without generating an answer."],
+	you: ["网页与新闻搜索；不额外提取全文。", "Web and news search without extra full-page extraction."],
+	"firecrawl-fetch": ["读取网页 Markdown；与 Firecrawl 搜索共用 Key。", "Read page Markdown using the same key as Firecrawl search."],
 	ddg: ["无需注册。默认后端。", "No registration required. Default backend."],
 	"deepseek-official": ["使用已配置的 DeepSeek API Key，可能产生额外搜索费用。", "Uses the configured DeepSeek API key; additional search fees may apply."],
 	exa: ["独立 Search API。", "Independent Search API."],
@@ -580,6 +702,7 @@ function providerDisplayLabel(provider, locale) {
 }
 function bundledCatalogId(provider) {
 	if (!(typeof provider.configurationOwned === "boolean" ? provider.configurationOwned : !provider.configurationOwner || provider.configurationOwner === "@klarkxy/dsh-web-search-manager")) return;
+	if (provider.kind === "fetch" && provider.id === "firecrawl") return "firecrawl-fetch";
 	return provider.id === "deepseek-managed" ? "deepseek-official" : provider.id;
 }
 function missingPricing(locale) {
@@ -588,7 +711,11 @@ function missingPricing(locale) {
 function usesBundledPricing(provider) {
 	if (provider.pricing?.trim()) return false;
 	const catalogId = bundledCatalogId(provider);
-	return Boolean(catalogId && Object.hasOwn(providerInfo, catalogId));
+	return Boolean(catalogId && ![
+		"perplexity",
+		"you",
+		"firecrawl-fetch"
+	].includes(catalogId) && Object.hasOwn(providerInfo, catalogId));
 }
 function searchProviderInfo(provider, locale = "zh") {
 	const catalogId = bundledCatalogId(provider);
@@ -685,52 +812,61 @@ function bindStatusRefresh(options) {
 	};
 }
 function isProviderOn(status, provider) {
-	if (provider.kind === "fetch") return status.fetchActive && status.settings.fetchProvider === provider.id && provider.configured;
+	if (provider.kind === "fetch") return status.fetchActive && selectedBackend(status, "fetch")?.id === provider.id;
 	return status.searchActive && selectedSearchBackend(status)?.id === provider.id;
 }
 function dormantSearchPlaceholder(id) {
+	return dormantPlaceholder(id, "search");
+}
+function dormantPlaceholder(id, kind) {
 	return {
 		id,
 		label: id,
 		description: "",
 		billing: "unknown",
-		kind: "search",
+		kind,
 		configured: false,
 		calls: 0,
 		failures: 0,
 		configurationOwned: false
 	};
 }
+function isRegistered(status, id, kind) {
+	return status.providers.some((provider) => provider.kind === kind && provider.id === id);
+}
 function isRegisteredSearch(status, id) {
-	return status.providers.some((provider) => provider.kind === "search" && provider.id === id);
+	return isRegistered(status, id, "search");
 }
-function catalogSearchBackends(status) {
-	const byId = new Map(status.providers.filter((provider) => provider.kind === "search").map((provider) => [provider.id, provider]));
+function providerOrder(settings, kind) {
+	return kind === "search" ? settings.searchOrder : settings.fetchOrder;
+}
+function catalogBackends(status, kind) {
+	const byId = new Map(status.providers.filter((provider) => provider.kind === kind).map((provider) => [provider.id, provider]));
 	const rows = [];
 	const seen = /* @__PURE__ */ new Set();
-	for (const id of status.settings.searchOrder) {
+	for (const id of providerOrder(status.settings, kind)) {
 		if (!id || seen.has(id)) continue;
 		seen.add(id);
-		rows.push(byId.get(id) ?? dormantSearchPlaceholder(id));
-	}
-	for (const provider of status.providers) {
-		if (provider.kind !== "search" || seen.has(provider.id)) continue;
-		rows.push(provider);
+		rows.push(byId.get(id) ?? dormantPlaceholder(id, kind));
 	}
+	for (const provider of byId.values()) if (!seen.has(provider.id)) rows.push(provider);
 	return rows;
 }
+function catalogSearchBackends(status) {
+	return catalogBackends(status, "search");
+}
 function searchBackends(status) {
-	const participating = new Set(status.settings.searchOrder);
-	return catalogSearchBackends(status).filter((provider) => participating.has(provider.id));
+	return catalogSearchBackends(status).filter((provider) => status.settings.searchOrder.includes(provider.id));
+}
+function selectedBackend(status, kind) {
+	return providerOrder(status.settings, kind).flatMap((id) => status.providers.find((provider) => provider.kind === kind && provider.id === id) ?? []).find((provider) => provider.configured);
 }
 function selectedSearchBackend(status) {
-	const backends = searchBackends(status).filter((provider) => isRegisteredSearch(status, provider.id));
-	const id = pickActiveSearch(backends.map((provider) => provider.id), (id) => Boolean(backends.find((provider) => provider.id === id)?.configured));
-	return backends.find((provider) => provider.id === id);
+	return selectedBackend(status, "search");
 }
-function droppedDormantIds(settings, order, providers) {
-	const known = new Set(providers.filter((provider) => provider.kind === "search").map((provider) => provider.id));
-	return [...new Set(settings.searchOrder.filter((id) => id && !known.has(id) && !order.includes(id)))];
+function droppedDormantIds(settings, order, providers, kind = "search") {
+	const known = new Set(providers.filter((provider) => provider.kind === kind).map((provider) => provider.id));
+	return [...new Set(providerOrder(settings, kind).filter((id) => id && !known.has(id) && !order.includes(id)))];
 }
 function configurationAccess(provider) {
 	if (ownsProviderConfiguration(provider)) return { kind: "owned" };
@@ -811,8 +947,9 @@ function ConfirmButton(props) {
 const copy = {
 	zh: {
 		tabsLabel: "网络搜索设置",
-		tabProviders: "搜索服务",
-		tabLimits: "请求限制",
+		tabSearch: "web-search",
+		tabFetch: "web-fetch",
+		tabLimits: "设置",
 		loading: "正在读取设置…",
 		loadFailed: "读取设置失败：",
 		reconnect: "重新连接",
@@ -853,13 +990,16 @@ const copy = {
 		maxFetchChars: "正文字符上限",
 		fetchTitle: "网页读取",
 		fetchProvider: "读取服务",
+		fetchBackends: "读取后端",
+		needFetchBackend: "需选择并配置读取服务。",
 		ownerSettings: "配置入口：",
 		unknownOwner: "请在服务所属插件中配置"
 	},
 	en: {
 		tabsLabel: "Web search settings",
-		tabProviders: "Search services",
-		tabLimits: "Request limits",
+		tabSearch: "web-search",
+		tabFetch: "web-fetch",
+		tabLimits: "Settings",
 		loading: "Loading settings…",
 		loadFailed: "Could not load settings: ",
 		reconnect: "Reconnect",
@@ -900,6 +1040,8 @@ const copy = {
 		maxFetchChars: "Max text chars",
 		fetchTitle: "Read web pages",
 		fetchProvider: "Fetch service",
+		fetchBackends: "Fetch backends",
+		needFetchBackend: "Choose and configure a fetch service.",
 		ownerSettings: "Configure in: ",
 		unknownOwner: "Configure this service in its plugin"
 	}
@@ -916,7 +1058,7 @@ function uiMessage(message, locale, providers = []) {
 	if ("key" in message) return copy[locale][message.key];
 	if ("sources" in message) return testOkText(locale, message.sources);
 	if ("moved" in message) {
-		const provider = providers.find((item) => item.id === message.moved);
+		const provider = providers.find((item) => item.id === message.moved && item.kind === message.kind);
 		return movedText(locale, provider ? providerDisplayLabel(provider, locale) : message.moved, message.position);
 	}
 	return message.invalid.map((key) => {
@@ -969,15 +1111,15 @@ function parseLimit(raw, min, max) {
 * Settings written by an immediate action (a switch or a reorder). It keeps the
 * saved limits and never includes typed-but-unsaved keys or limit drafts.
 */
-function immediateUpdate(settings, on, order, providers, remove = []) {
+function immediateUpdate(settings, on, order, providers, remove = [], kind = "search") {
 	let searchOrder = order;
 	if (providers) {
-		const known = new Set(providers.filter((provider) => provider.kind === "search").map((provider) => provider.id));
+		const known = new Set(providers.filter((provider) => provider.kind === kind).map((provider) => provider.id));
 		const removed = new Set(remove);
 		const following = order.filter((id) => !removed.has(id));
 		if (following.some((id) => !known.has(id))) searchOrder = following;
 		else {
-			searchOrder = settings.searchOrder.flatMap((id) => {
+			searchOrder = providerOrder(settings, kind).flatMap((id) => {
 				if (removed.has(id)) return [];
 				return known.has(id) ? following.splice(0, 1) : [id];
 			});
@@ -986,8 +1128,13 @@ function immediateUpdate(settings, on, order, providers, remove = []) {
 	}
 	return {
 		...editable(settings),
-		searchOrder,
-		searchEnabled: on
+		...kind === "search" ? {
+			searchOrder,
+			searchEnabled: on
+		} : {
+			fetchOrder: searchOrder,
+			fetchEnabled: on
+		}
 	};
 }
 function limitTexts(settings) {
@@ -1009,7 +1156,7 @@ function NetworkSearchSettings({ client, hidden }) {
 	const locale = useHostLocale(client);
 	const text = copy[locale];
 	const tabsId = (0, react.useId)();
-	const [tab, setTab] = (0, react.useState)("providers");
+	const [tab, setTab] = (0, react.useState)("search");
 	const [status, setStatus] = (0, react.useState)();
 	const [limitDraft, setLimitDraft] = (0, react.useState)();
 	const [invalid, setInvalid] = (0, react.useState)({});
@@ -1026,6 +1173,7 @@ function NetworkSearchSettings({ client, hidden }) {
 	const statusRef = (0, react.useRef)(status);
 	statusRef.current = status;
 	const pendingRef = (0, react.useRef)(null);
+	const dragRef = (0, react.useRef)(null);
 	const timerRef = (0, react.useRef)(void 0);
 	const handleRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const refocusRef = (0, react.useRef)(null);
@@ -1061,7 +1209,7 @@ function NetworkSearchSettings({ client, hidden }) {
 			mounted: mountedRef.current,
 			hidden: isPageHidden(hiddenRef.current),
 			busy: busyRef.current,
-			reordering: pendingRef.current !== null,
+			reordering: pendingRef.current !== null || dragRef.current !== null,
 			reading: readingRef.current
 		});
 	}
@@ -1098,7 +1246,7 @@ function NetworkSearchSettings({ client, hidden }) {
 				requestId: mine,
 				latestRequestId: requestSeq.current,
 				busy: busyRef.current,
-				reordering: pendingRef.current !== null,
+				reordering: pendingRef.current !== null || dragRef.current !== null,
 				hidden: isPageHidden(hiddenRef.current),
 				currentRevision: statusRef.current?.settings.revision,
 				incomingRevision: next.settings.revision
@@ -1148,7 +1296,7 @@ function NetworkSearchSettings({ client, hidden }) {
 			const current = statusRef.current;
 			const next = pendingRef.current;
 			if (current && next) call("update", {
-				settings: immediateUpdate(current.settings, current.settings.searchEnabled, next, current.providers),
+				settings: immediateUpdate(current.settings, next.kind === "search" ? current.settings.searchEnabled : current.settings.fetchEnabled, next.order, current.providers, [], next.kind),
 				expectedRevision: current.settings.revision
 			}).catch(() => {});
 		};
@@ -1166,6 +1314,7 @@ function NetworkSearchSettings({ client, hidden }) {
 		if (handle && document.activeElement !== handle) handle.focus();
 	});
 	async function action(run) {
+		if (busyRef.current) return;
 		readGate.reset();
 		requestSeq.current += 1;
 		busyRef.current = true;
@@ -1183,18 +1332,17 @@ function NetworkSearchSettings({ client, hidden }) {
 		}
 	}
 	/** Switches and reorders: settings only, applied at once. */
-	function runImmediate(on, order, remove = []) {
+	function runImmediate(on, order, remove = [], kind = "search") {
 		clearTimeout(timerRef.current);
 		timerRef.current = void 0;
 		pendingRef.current = null;
 		action(async () => {
 			const current = statusRef.current;
 			if (!current) return;
-			const next = await call("update", {
-				settings: immediateUpdate(current.settings, on, order, current.providers, remove),
+			adopt(await call("update", {
+				settings: immediateUpdate(current.settings, on, order, current.providers, remove, kind),
 				expectedRevision: current.settings.revision
-			});
-			setStatus(next);
+			}));
 			await load();
 		}).then(() => {
 			if (pendingRef.current === null) setPendingOrder(null);
@@ -1204,30 +1352,33 @@ function NetworkSearchSettings({ client, hidden }) {
 	async function saveKeys(only) {
 		if (!status) return;
 		for (const provider of status.providers) {
-			if (provider.kind !== "search" || only && provider.id !== only.id) continue;
-			const snapshot = keys[provider.id] ?? "";
+			if (only && providerKey(provider.kind, provider.id) !== providerKey(only.kind, only.id)) continue;
+			const snapshot = keys[providerKey(provider.kind, provider.id)] ?? "";
 			const typed = snapshot.trim();
 			if (!ownsProviderConfiguration(provider) || !provider.credentialRef || !typed) continue;
 			if (writable[provider.credentialRef] === false) throw new UiError("readOnly");
 			unwrap(await client.remote.credentials.set(provider.credentialRef, typed));
-			setKeys((current) => current[provider.id] === snapshot ? {
+			setKeys((current) => current[providerKey(provider.kind, provider.id)] === snapshot ? {
 				...current,
-				[provider.id]: ""
+				[providerKey(provider.kind, provider.id)]: ""
 			} : current);
 		}
 	}
+	async function saveKeysForKind(kind) {
+		for (const provider of statusRef.current?.providers ?? []) if (provider.kind === kind) await saveKeys(provider);
+	}
 	async function removeKey(provider) {
 		if (!ownsProviderConfiguration(provider) || !provider.credentialRef || provider.credentialShared || !status) return;
 		unwrap(await client.remote.credentials.unset(provider.credentialRef));
 		setKeys((current) => ({
 			...current,
-			[provider.id]: ""
+			[providerKey(provider.kind, provider.id)]: ""
 		}));
 		await load();
 		setNote({ key: "keyDeleted" });
 	}
 	if (!status || !limitDraft) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "web-search-settings ws-root dsh-ui-panel",
+		className: "web-search-settings ws-root dsh-ui-page",
 		children: [loadError ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 			role: "alert",
 			className: "dsh-ui-error",
@@ -1250,28 +1401,30 @@ function NetworkSearchSettings({ client, hidden }) {
 		}) : null]
 	});
 	const saved = status;
-	const savedOrder = searchBackends(saved).map((provider) => provider.id);
-	const order = pendingOrder ?? savedOrder;
-	const catalog = catalogSearchBackends(saved);
-	const backends = [...order.flatMap((id) => catalog.find((provider) => provider.id === id) ?? []), ...catalog.filter((provider) => !order.includes(provider.id))];
-	const selected = selectedSearchBackend(saved);
-	const on = saved.settings.searchEnabled;
-	const canEnable = canEnableSearch(order, saved.providers, {}, writable);
 	const savedLimits = limitTexts(saved.settings);
 	const limitsDirty = LIMITS.some(([key]) => limitDraft[key] !== savedLimits[key]);
 	const keysDirty = Object.values(keys).some((value) => value.trim());
-	const reordering = pendingOrder !== null;
-	function move(id, nextIndex, keyboard = false) {
+	const reordering = pendingOrder !== null || dragSource !== null;
+	function move(kind, id, nextIndex, keyboard = false) {
+		if (pendingRef.current && pendingRef.current.kind !== kind) return;
+		const order = pendingRef.current?.order ?? providerOrder(statusRef.current.settings, kind);
 		const index = order.indexOf(id);
 		if (busy || index < 0 || nextIndex < 0 || nextIndex >= order.length || index === nextIndex) return;
 		const next = [...order];
 		const [item] = next.splice(index, 1);
 		next.splice(nextIndex, 0, item);
-		pendingRef.current = next;
-		setPendingOrder(next);
-		if (keyboard) refocusRef.current = id;
+		pendingRef.current = {
+			kind,
+			order: next
+		};
+		setPendingOrder({
+			kind,
+			order: next
+		});
+		if (keyboard) refocusRef.current = providerKey(kind, id);
 		setSortAnnouncement({
 			moved: id,
+			kind,
 			position: nextIndex + 1
 		});
 		clearTimeout(timerRef.current);
@@ -1279,10 +1432,11 @@ function NetworkSearchSettings({ client, hidden }) {
 			timerRef.current = void 0;
 			const batched = pendingRef.current;
 			const current = statusRef.current;
-			if (batched && current) runImmediate(current.settings.searchEnabled, batched);
+			if (batched && current) runImmediate(batched.kind === "search" ? current.settings.searchEnabled : current.settings.fetchEnabled, batched.order, [], batched.kind);
 		}, keyboard ? REORDER_DEBOUNCE_MS : 0);
 	}
 	function endDrag() {
+		dragRef.current = null;
 		setDragSource(null);
 		setDropTarget(null);
 	}
@@ -1318,24 +1472,33 @@ function NetworkSearchSettings({ client, hidden }) {
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "web-search-settings ws-root dsh-ui-panel",
+		className: "web-search-settings ws-root dsh-ui-page",
 		"data-testid": "web-search-settings",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
 				value: tab,
 				onChange: setTab,
 				label: text.tabsLabel,
-				items: [{
-					value: "providers",
-					label: text.tabProviders,
-					id: tabsId + "-providers-tab",
-					panelId: tabsId + "-providers-panel"
-				}, {
-					value: "limits",
-					label: text.tabLimits,
-					id: tabsId + "-limits-tab",
-					panelId: tabsId + "-limits-panel"
-				}]
+				items: [
+					{
+						value: "search",
+						label: text.tabSearch,
+						id: tabsId + "-search-tab",
+						panelId: tabsId + "-search-panel"
+					},
+					{
+						value: "fetch",
+						label: text.tabFetch,
+						id: tabsId + "-fetch-tab",
+						panelId: tabsId + "-fetch-panel"
+					},
+					{
+						value: "limits",
+						label: text.tabLimits,
+						id: tabsId + "-limits-tab",
+						panelId: tabsId + "-limits-panel"
+					}
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "ws-sr-only",
@@ -1374,374 +1537,294 @@ function NetworkSearchSettings({ client, hidden }) {
 				className: "dsh-ui-banner dsh-ui-banner--danger",
 				children: text.storageFailed
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				role: "tabpanel",
-				id: tabsId + "-providers-panel",
-				"aria-labelledby": tabsId + "-providers-tab",
-				hidden: tab !== "providers",
-				tabIndex: 0,
-				children: [backends.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "dsh-ui-empty",
-					children: text.empty
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
-					className: "web-search-card dsh-ui-card dsh-ui-card--flat",
-					"data-testid": "web-search-tool",
-					"data-on": on ? "true" : "false",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-							className: "ws-card-head",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "dsh-ui-title",
-								children: text.toolTitle
-							}), !canEnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsh-ui-hint",
-								children: text.needBackend
-							})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
-								checked: on,
-								label: text.toolTitle,
-								disabled: busy || !on && !canEnable,
-								onChange: (next) => runImmediate(next, order)
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-							className: "web-search-rank",
-							"aria-label": text.backends,
-							children: backends.map((provider) => {
-								const participating = order.includes(provider.id);
-								const rank = order.indexOf(provider.id);
-								const dormant = !isRegisteredSearch(saved, provider.id);
-								const active = !dormant && saved.searchActive && selected?.id === provider.id;
-								const info = searchProviderInfo(provider, locale);
-								const owned = ownsProviderConfiguration(provider);
-								const access = configurationAccess(provider);
-								const needsKey = owned && Boolean(provider.credentialRef);
-								const shared = Boolean(provider.credentialShared);
-								const showKey = !dormant && needsKey && participating && (!shared || !provider.configured);
-								const canSort = participating && order.length > 1;
-								const readOnly = writable[provider.credentialRef ?? ""] === false;
-								const typedKey = (keys[provider.id] ?? "").trim();
-								const availability = dormant ? "dormant" : provider.configured ? "available" : "unavailable";
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-									className: active ? "is-active" : void 0,
-									"data-testid": `web-search-rank-${provider.id}`,
-									"data-availability": availability,
-									"data-in-use": active || void 0,
-									"data-dragging": dragSource === provider.id || void 0,
-									"data-drop": dropTarget === provider.id && dragSource ? order.indexOf(dragSource) < rank ? "after" : "before" : void 0,
-									onDragOver: (event) => {
-										if (busy || !canSort || !dragSource || dragSource === provider.id) return;
-										event.preventDefault();
-										event.dataTransfer.dropEffect = "move";
-										setDropTarget(provider.id);
-									},
-									onDragLeave: (event) => {
-										if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
-									},
-									onDrop: (event) => {
-										if (busy || !canSort || !dragSource) return;
-										event.preventDefault();
-										move(dragSource, rank);
-										endDrag();
-									},
-									children: [
-										canSort ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-											variant: "ghost",
-											size: "sm",
-											className: "web-search-drag-handle",
-											ref: (element) => {
-												if (element) handleRefs.current.set(provider.id, element);
-												else handleRefs.current.delete(provider.id);
-											},
-											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-												width: "16",
-												height: "20",
-												viewBox: "0 0 16 20",
-												fill: "currentColor",
-												"aria-hidden": "true",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "5",
-														cy: "5",
-														r: "1.5"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "11",
-														cy: "5",
-														r: "1.5"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "5",
-														cy: "10",
-														r: "1.5"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "11",
-														cy: "10",
-														r: "1.5"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "5",
-														cy: "15",
-														r: "1.5"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-														cx: "11",
-														cy: "15",
-														r: "1.5"
-													})
-												]
-											}),
-											draggable: !busy,
-											"aria-disabled": busy,
-											"aria-label": text.dragPrefix + providerDisplayLabel(provider, locale),
-											title: text.dragHint,
-											onDragStart: (event) => {
-												if (busy) {
-													event.preventDefault();
-													return;
-												}
-												event.dataTransfer.effectAllowed = "move";
-												event.dataTransfer.setData("application/x-dsh-search-provider", provider.id);
-												const row = event.currentTarget.closest("li");
-												if (row) event.dataTransfer.setDragImage(row, 16, 16);
-												setDragSource(provider.id);
-												setSortAnnouncement("");
-											},
-											onDragEnd: endDrag,
-											onKeyDown: (event) => {
-												if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
-												event.preventDefault();
-												move(provider.id, rank + (event.key === "ArrowUp" ? -1 : 1), true);
-											}
-										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "web-search-rank-index",
-											children: participating ? rank + 1 : "—"
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "web-search-provider",
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "web-search-provider-heading",
-													children: [
-														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-															className: "dsh-ui-heading",
-															children: providerDisplayLabel(provider, locale)
-														}),
-														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															className: "ws-provider-note",
-															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: dormant ? "idle" : provider.configured ? "done" : "warning" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: dormant ? text.dormant : provider.configured ? text.available : text.unavailable })]
-														}),
-														active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
-															tone: "success",
-															children: text.inUse
-														}),
-														provider.signupUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
-															url: provider.signupUrl,
-															label: providerDisplayLabel(provider, locale) + " " + text.signup,
-															children: text.signup
-														})
-													]
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "web-search-provider-info",
-													children: [info.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: info.description }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [info.pricing, info.pricingUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
-														url: info.pricingUrl,
-														label: providerDisplayLabel(provider, locale) + " " + text.pricing,
-														children: provider.id === "ddg" ? text.website : text.pricing
-													})] })] })]
-												}),
-												access.kind === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-													className: "dsh-ui-hint",
-													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
-														url: access.url,
-														label: text.openConfig,
-														children: text.openConfig
-													})
-												}) : access.kind === "owner" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-													className: "dsh-ui-hint",
-													children: [text.ownerSettings, access.name]
-												}) : access.kind === "unknown" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-													className: "dsh-ui-hint",
-													children: text.unknownOwner
-												}) : null,
-												shared && participating && owned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-													className: "dsh-ui-meta",
-													children: provider.credentialHint === "与模型设置共用 Key" ? locale === "zh" ? provider.credentialHint : "Shares a key with model settings" : provider.credentialHint ?? text.sharedKey
-												}) : null,
-												showKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-													className: "dsh-ui-field",
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "dsh-ui-label",
-														children: "API Key"
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-														className: "ws-input",
-														type: "password",
-														autoComplete: "off",
-														spellCheck: false,
-														disabled: busy || readOnly,
-														value: keys[provider.id] ?? "",
-														placeholder: provider.configured ? text.keyConfigured : text.keyPlaceholder,
-														onChange: (event) => setKeys((current) => ({
-															...current,
-															[provider.id]: event.target.value
-														}))
-													})]
-												}) : null,
-												showKey || needsKey && !shared && provider.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													className: "dsh-ui-actions",
-													children: [showKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-														variant: "outline",
-														size: "sm",
-														disabled: busy || readOnly || !typedKey,
-														onClick: () => void action(async () => {
-															await saveKeys(provider);
-															await load();
-															setNote({ key: "keySaved" });
-														}),
-														children: text.saveKey
-													}) : null, needsKey && !shared && provider.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmButton, {
-														disabled: busy || readOnly,
-														label: text.deleteKey,
-														confirmLabel: text.confirmDelete,
-														onConfirm: () => void action(() => removeKey(provider))
-													}) : null]
-												}) : null
-											]
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "web-search-rank-move",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
-												checked: participating,
-												label: providerDisplayLabel(provider, locale),
-												disabled: busy,
-												onChange: (next) => {
-													const following = next ? [...order, provider.id] : order.filter((id) => id !== provider.id);
-													runImmediate(nextSearchEnabled(saved.settings.searchEnabled, following, saved.providers, {}, writable), following, droppedDormantIds(saved.settings, following, saved.providers));
-												}
-											})
-										})
-									]
-								}, provider.id);
-							})
-						}),
-						backends.some(usesBundledPricing) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dsh-ui-hint",
-							children: pricingCheckedText(locale, PROVIDER_PRICING_CHECKED)
-						}) : null,
-						on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dsh-ui-actions",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								variant: "outline",
-								size: "md",
-								disabled: busy || reordering,
-								onClick: () => void action(async () => {
-									await saveKeys();
-									const result = await call("test");
-									await load();
-									setNote({ sources: result.sources });
-								}),
-								children: text.test
-							})
-						}) : null
-					]
-				}), (saved.providers.some((provider) => provider.kind === "fetch") || saved.settings.fetchProvider) && (() => {
-					const fetchId = saved.settings.fetchProvider;
-					const fetchSelected = saved.providers.find((provider) => provider.kind === "fetch" && provider.id === fetchId);
-					const fetchDormant = Boolean(fetchId) && !fetchSelected;
-					const fetchActive = Boolean(fetchSelected && saved.fetchActive && fetchSelected.configured);
-					const fetchAccess = fetchSelected ? configurationAccess(fetchSelected) : fetchDormant ? { kind: "unknown" } : void 0;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
-						className: "dsh-ui-card dsh-ui-card--flat",
-						"data-testid": "web-search-fetch",
-						"data-availability": fetchDormant ? "dormant" : fetchSelected?.configured ? "available" : "unavailable",
-						"data-in-use": fetchActive || void 0,
+			["search", "fetch"].map((kind) => {
+				const order = pendingOrder?.kind === kind ? pendingOrder.order : providerOrder(saved.settings, kind);
+				const catalog = catalogBackends(saved, kind);
+				const backends = [...order.flatMap((id) => catalog.find((provider) => provider.id === id) ?? []), ...catalog.filter((provider) => !order.includes(provider.id))];
+				const selected = selectedBackend(saved, kind);
+				const on = kind === "search" ? saved.settings.searchEnabled : saved.settings.fetchEnabled;
+				const canEnable = order.some((id) => saved.providers.some((provider) => provider.kind === kind && provider.id === id && provider.configured));
+				const sortingOther = pendingOrder !== null && pendingOrder.kind !== kind;
+				const locked = busy || sortingOther || Boolean(dragSource && !dragSource.startsWith(kind + ":"));
+				const title = kind === "search" ? text.toolTitle : text.fetchTitle;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					role: "tabpanel",
+					id: tabsId + "-" + kind + "-panel",
+					"aria-labelledby": tabsId + "-" + kind + "-tab",
+					hidden: tab !== kind,
+					tabIndex: 0,
+					children: backends.length === 0 ? kind === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-empty",
+						children: text.empty
+					}) : null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+						className: "web-search-card dsh-ui-card dsh-ui-card--flat",
+						"data-testid": kind === "search" ? "web-search-tool" : "web-search-fetch",
+						"data-on": on ? "true" : "false",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 								className: "ws-card-head",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 									className: "dsh-ui-title",
-									children: text.fetchTitle
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-									className: "ws-provider-note",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: fetchDormant ? "idle" : fetchSelected?.configured ? "done" : "warning" }),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: fetchDormant ? text.dormant : fetchSelected?.configured ? text.available : text.unavailable }),
-										fetchActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
-											tone: "success",
-											children: text.inUse
-										}) : null
-									]
+									children: title
+								}), !canEnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsh-ui-hint",
+									children: kind === "search" ? text.needBackend : text.needFetchBackend
 								})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
-									checked: saved.settings.fetchEnabled,
-									label: text.fetchTitle,
-									disabled: busy || reordering,
-									onChange: (next) => void action(async () => {
-										const current = statusRef.current;
-										adopt(await call("update", {
-											settings: {
-												...editable(current.settings),
-												fetchEnabled: next
-											},
-											expectedRevision: current.settings.revision
-										}));
-										await load();
-									})
+									checked: on,
+									label: title,
+									disabled: locked || dragSource !== null || !on && !canEnable,
+									onChange: (next) => runImmediate(next, order, [], kind)
 								})]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-								className: "dsh-ui-field",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-ui-label",
-									children: text.fetchProvider
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-									className: "dsh-ui-select",
-									"aria-label": text.fetchProvider,
-									value: fetchId,
-									disabled: busy || reordering,
-									onChange: (event) => {
-										const id = event.target.value;
-										action(async () => {
-											const current = statusRef.current;
-											adopt(await call("update", {
-												settings: {
-													...editable(current.settings),
-													fetchProvider: id
-												},
-												expectedRevision: current.settings.revision
-											}));
-											await load();
-										});
-									},
-									children: [fetchDormant && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-										value: fetchId,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+								className: "web-search-rank",
+								"aria-label": kind === "search" ? text.backends : text.fetchBackends,
+								children: backends.map((provider) => {
+									const participating = order.includes(provider.id);
+									const rank = order.indexOf(provider.id);
+									const dormant = !isRegistered(saved, provider.id, kind);
+									const active = !dormant && (kind === "search" ? saved.searchActive : saved.fetchActive) && selected?.id === provider.id;
+									const info = kind === "search" || ownsProviderConfiguration(provider) && provider.id === "firecrawl" ? searchProviderInfo(provider, locale) : {
+										description: ownsProviderConfiguration(provider) && provider.id === "http-managed" && provider.description === "优先匿名 Jina Reader 读取，失败后本机 HTTP 直连；无需 Key。" && locale === "en" ? "Reads with anonymous Jina Reader first, then direct HTTP if needed; no key required." : provider.description,
+										pricing: provider.pricing ?? "",
+										pricingUrl: provider.pricingUrl
+									};
+									const owned = ownsProviderConfiguration(provider);
+									const access = configurationAccess(provider);
+									const needsKey = owned && Boolean(provider.credentialRef);
+									const shared = Boolean(provider.credentialShared);
+									const showKey = !dormant && needsKey && participating && (!shared || !provider.configured);
+									const canSort = participating && order.length > 1;
+									const readOnly = writable[provider.credentialRef ?? ""] === false;
+									const typedKey = (keys[providerKey(provider.kind, provider.id)] ?? "").trim();
+									const availability = dormant ? "dormant" : provider.configured ? "available" : "unavailable";
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+										className: active ? "is-active" : void 0,
+										"data-testid": `web-${kind}-rank-${provider.id}`,
+										"data-availability": availability,
+										"data-in-use": active || void 0,
+										"data-dragging": dragSource === providerKey(kind, provider.id) || void 0,
+										"data-drop": dropTarget === providerKey(kind, provider.id) && dragSource ? order.indexOf(dragSource.slice(kind.length + 1)) < rank ? "after" : "before" : void 0,
+										onDragOver: (event) => {
+											if (locked || !canSort || !dragSource?.startsWith(kind + ":") || dragSource === providerKey(kind, provider.id)) return;
+											event.preventDefault();
+											event.dataTransfer.dropEffect = "move";
+											setDropTarget(providerKey(kind, provider.id));
+										},
+										onDragLeave: (event) => {
+											if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
+										},
+										onDrop: (event) => {
+											if (locked || !canSort || !dragSource?.startsWith(kind + ":")) return;
+											event.preventDefault();
+											move(kind, dragSource.slice(kind.length + 1), rank);
+											endDrag();
+										},
 										children: [
-											fetchId,
-											" · ",
-											text.dormant
+											canSort ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+												variant: "ghost",
+												size: "sm",
+												className: "web-search-drag-handle",
+												ref: (element) => {
+													if (element) handleRefs.current.set(providerKey(kind, provider.id), element);
+													else handleRefs.current.delete(providerKey(kind, provider.id));
+												},
+												icon: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+													width: "16",
+													height: "20",
+													viewBox: "0 0 16 20",
+													fill: "currentColor",
+													"aria-hidden": "true",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "5",
+															cy: "5",
+															r: "1.5"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "11",
+															cy: "5",
+															r: "1.5"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "5",
+															cy: "10",
+															r: "1.5"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "11",
+															cy: "10",
+															r: "1.5"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "5",
+															cy: "15",
+															r: "1.5"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "11",
+															cy: "15",
+															r: "1.5"
+														})
+													]
+												}),
+												draggable: !locked,
+												"aria-disabled": locked,
+												"aria-label": text.dragPrefix + providerDisplayLabel(provider, locale),
+												title: text.dragHint,
+												onDragStart: (event) => {
+													if (locked || pendingRef.current && pendingRef.current.kind !== kind) {
+														event.preventDefault();
+														return;
+													}
+													event.dataTransfer.effectAllowed = "move";
+													event.dataTransfer.setData(`application/x-dsh-${kind}-provider`, provider.id);
+													const row = event.currentTarget.closest("li");
+													if (row) event.dataTransfer.setDragImage(row, 16, 16);
+													dragRef.current = providerKey(kind, provider.id);
+													requestSeq.current += 1;
+													setDragSource(providerKey(kind, provider.id));
+													setSortAnnouncement("");
+												},
+												onDragEnd: endDrag,
+												onKeyDown: (event) => {
+													if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+													event.preventDefault();
+													move(kind, provider.id, rank + (event.key === "ArrowUp" ? -1 : 1), true);
+												}
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "web-search-rank-index",
+												children: participating ? rank + 1 : "—"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "web-search-provider",
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "web-search-provider-heading",
+														children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+																className: "dsh-ui-heading",
+																children: providerDisplayLabel(provider, locale)
+															}),
+															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																className: "ws-provider-note",
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: dormant ? "idle" : provider.configured ? "done" : "warning" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: dormant ? text.dormant : provider.configured ? text.available : text.unavailable })]
+															}),
+															active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+																tone: "success",
+																children: text.inUse
+															}),
+															provider.signupUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
+																url: provider.signupUrl,
+																label: providerDisplayLabel(provider, locale) + " " + text.signup,
+																children: text.signup
+															})
+														]
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "web-search-provider-info",
+														children: [info.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: info.description }) : null, info.pricing || info.pricingUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [info.pricing, info.pricingUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
+															url: info.pricingUrl,
+															label: providerDisplayLabel(provider, locale) + " " + text.pricing,
+															children: provider.id === "ddg" ? text.website : text.pricing
+														})] })] }) : null]
+													}),
+													access.kind === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+														className: "dsh-ui-hint",
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
+															url: access.url,
+															label: text.openConfig,
+															children: text.openConfig
+														})
+													}) : access.kind === "owner" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+														className: "dsh-ui-hint",
+														children: [text.ownerSettings, access.name]
+													}) : access.kind === "unknown" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+														className: "dsh-ui-hint",
+														children: text.unknownOwner
+													}) : null,
+													shared && participating && owned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
+														className: "dsh-ui-meta",
+														children: provider.credentialHint === "与模型设置共用 Key" ? locale === "zh" ? provider.credentialHint : "Shares a key with model settings" : owned && provider.id === "firecrawl" && locale === "en" ? "Search and page reads share a Firecrawl key" : provider.credentialHint ?? text.sharedKey
+													}) : null,
+													showKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														className: "dsh-ui-field",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "dsh-ui-label",
+															children: "API Key"
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+															className: "ws-input",
+															type: "password",
+															autoComplete: "off",
+															spellCheck: false,
+															disabled: busy || reordering || readOnly,
+															value: keys[providerKey(provider.kind, provider.id)] ?? "",
+															placeholder: provider.configured ? text.keyConfigured : text.keyPlaceholder,
+															onChange: (event) => setKeys((current) => ({
+																...current,
+																[providerKey(provider.kind, provider.id)]: event.target.value
+															}))
+														})]
+													}) : null,
+													showKey || needsKey && !shared && provider.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														className: "dsh-ui-actions",
+														children: [showKey ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+															variant: "outline",
+															size: "sm",
+															disabled: busy || reordering || readOnly || !typedKey,
+															onClick: () => void action(async () => {
+																await saveKeys(provider);
+																await load();
+																setNote({ key: "keySaved" });
+															}),
+															children: text.saveKey
+														}) : null, needsKey && !shared && provider.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmButton, {
+															disabled: busy || reordering || readOnly,
+															label: text.deleteKey,
+															confirmLabel: text.confirmDelete,
+															onConfirm: () => void action(() => removeKey(provider))
+														}) : null]
+													}) : null
+												]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "web-search-rank-move",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+													checked: participating,
+													label: providerDisplayLabel(provider, locale),
+													disabled: locked || dragSource !== null,
+													onChange: (next) => {
+														const following = next ? [...order, provider.id] : order.filter((id) => id !== provider.id);
+														runImmediate(on && following.some((id) => saved.providers.some((item) => item.kind === kind && item.id === id && item.configured)), following, droppedDormantIds(saved.settings, following, saved.providers, kind), kind);
+													}
+												})
+											})
 										]
-									}), saved.providers.filter((provider) => provider.kind === "fetch").map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-										value: provider.id,
-										children: [providerDisplayLabel(provider, locale), provider.configured ? "" : " · " + text.unavailable]
-									}, provider.id))]
-								})]
+									}, provider.id);
+								})
 							}),
-							fetchAccess?.kind === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							kind === "search" && backends.some(usesBundledPricing) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "dsh-ui-hint",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppLink, {
-									url: fetchAccess.url,
-									label: text.openConfig,
-									children: text.openConfig
+								children: pricingCheckedText(locale, PROVIDER_PRICING_CHECKED)
+							}) : null,
+							on && kind === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dsh-ui-actions",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "outline",
+									size: "md",
+									disabled: busy || reordering,
+									onClick: () => void action(async () => {
+										await saveKeysForKind("search");
+										const result = await call("test");
+										await load();
+										setNote({ sources: result.sources });
+									}),
+									children: text.test
 								})
-							}) : fetchAccess?.kind === "owner" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: "dsh-ui-hint",
-								children: [text.ownerSettings, fetchAccess.name]
-							}) : fetchAccess?.kind === "unknown" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "dsh-ui-hint",
-								children: text.unknownOwner
 							}) : null
 						]
-					});
-				})()]
+					})
+				}, kind);
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "tabpanel",
@@ -1750,11 +1833,11 @@ function NetworkSearchSettings({ client, hidden }) {
 				hidden: tab !== "limits",
 				tabIndex: 0,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
-					className: "web-search-limits",
+					className: "dsh-ui-fields-grid",
 					disabled: busy || reordering,
 					"aria-label": text.tabLimits,
 					children: LIMITS.map(([key, min, max]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "ws-limit",
+						className: "dsh-ui-field",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-ui-label",
@@ -1793,7 +1876,7 @@ function NetworkSearchSettings({ client, hidden }) {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-ui-actions dsh-ui-actions-end",
+				className: "dsh-ui-form-footer dsh-ui-actions-end",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "dsh-ui-meta",
 					children: limitsDirty || keysDirty ? text.unsaved : text.saveHint
@@ -1808,74 +1891,13 @@ function NetworkSearchSettings({ client, hidden }) {
 		]
 	});
 }
-const styles = `${officialUiCss("ws-root")}
-.ws-root { max-width: 760px; }
-.ws-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; }
-.ws-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-.ws-provider-note { display: flex; align-items: center; gap: 6px; }
-.web-search-provider { display: grid; gap: 8px; min-width: 0; }
-.web-search-provider-info { display: grid; gap: 3px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
-.web-search-provider-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; }
-.web-search-settings a { color: var(--dsw-alias-state-business-primary); font-size: 12px; line-height: 18px; text-underline-offset: 3px; }
-/* The primitive renders a 32px control in an inline-flex wrapper; a settings
- * field needs it to fill the column it sits in. */
-.ws-input { width: 100%; }
-.web-search-rank { margin: 0; padding: 0; list-style: none; }
-.web-search-rank li {
-  position: relative;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: start;
-  padding: 14px 0;
-  border-top: 0.5px solid var(--dsw-alias-border-l2);
-}
-.web-search-settings button.web-search-drag-handle {
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  min-height: 24px;
-  padding: 0;
-  cursor: grab;
-  opacity: 0.65;
-}
-.web-search-settings button.web-search-drag-handle:hover { opacity: 1; }
-.web-search-settings button.web-search-drag-handle:active { cursor: grabbing; }
-.web-search-settings button.web-search-drag-handle[aria-disabled='true'] { cursor: wait; opacity: 0.4; }
-.web-search-rank li[data-dragging] { opacity: 0.45; }
-.web-search-rank li[data-drop]::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--dsw-alias-state-business-primary); pointer-events: none; }
-.web-search-rank li[data-drop='before']::after { top: -1px; }
-.web-search-rank li[data-drop='after']::after { bottom: -1px; }
-.web-search-rank-index { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; line-height: 24px; }
-.web-search-rank-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 2px; }
-.web-search-limits { margin: 0; border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
-/* A two-column grid, so these fields keep the contract's caption and the
- * primitive's control and only own their vertical rhythm — a stacked list is
- * what draws the hairline between fields, and there is nothing to separate. */
-.ws-limit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-.ws-danger:hover:not(:disabled),
-.ws-danger[data-armed] { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
-.ws-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); }
-@media (max-width: 560px) { .web-search-rank-move { flex-direction: column; align-items: flex-end; } .web-search-limits { grid-template-columns: minmax(0, 1fr); } }
-`;
 function apply(ctx) {
 	const client = ctx;
 	ctx.effect(() => {
 		if (typeof document === "undefined") return () => {};
 		const style = document.createElement("style");
 		style.setAttribute("data-plugin", "@klarkxy/dsh-web-search-manager");
-		style.textContent = styles;
+		style.textContent = webSearchClientStyles;
 		style.dataset.dshWebSearch = "";
 		document.head.appendChild(style);
 		return () => style.remove();