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

package/README.md

@@ -4,7 +4,7 @@
 
 [简体中文](docs/README.zh-CN.md)
 
-Choose which service answers the model's web searches, set request limits, and let the model read public web pages — all from one settings page, with a tab each for search, page reading, and request limits.
+Pick which service answers the model's web searches, set request limits, and let it read public pages — from one settings page with separate tabs for search, page reading, and request limits.
 
 ## Install
 
@@ -12,39 +12,39 @@ Choose which service answers the model's web searches, set request limits, and l
 dsh plugin --profile web add @klarkxy/dsh-web-search-manager
 ```
 
-Replace `web` with your profile name, restart DSH Web, and open **Plugins → Web Search**. Restart DSH after plugin updates too; refreshing the page alone does not load updated search code.
+Replace `web` with your profile name. Restart DSH Web, then open **Plugins → Web Search**. Restart after plugin updates too; refreshing the page alone does not load new search code.
 
 ## Set up search
 
-DuckDuckGo works out of the box with no key. You can also enable DeepSeek Search, Exa, Brave, Bocha, Serper, Firecrawl, Tavily, Perplexity, or You.com by entering their API keys. Drag the list to set the order; each search uses the first ready service. Search services added by other plugins, such as Zhihu, appear in the same list. New services are not enabled automatically.
+DuckDuckGo works out of the box, no key needed. To use DeepSeek Search, Exa, Brave, Bocha, Serper, Firecrawl, Tavily, Perplexity, or You.com, enter its API key. Drag the list to reorder: each search uses the first ready service. Search services from other plugins, such as Zhihu, appear in the same list. New services are not enabled automatically.
 
-The **Settings** tab sets the number of results, queries per call, the total timeout, and the maximum page length.
+The **Settings** tab sets the number of results, queries per call, total timeout, and maximum page length.
 
 ## Read web pages
 
-Turn on **Read web pages**, enable the services you want to use, and drag them or use the up/down arrow keys to set their priority. Each fetch uses the first configured, available service. Fetch services connected by other plugins also appear in the list; new services need to be enabled manually. Services that are temporarily unloaded keep their selection and position.
+Turn on **Read web pages**, enable the services you want, then drag them or use the up/down arrow keys to set priority. Each fetch uses the first configured, available service. Fetch services from other plugins also appear; new ones must be enabled manually. Temporarily unloaded services keep their selection and position.
 
-Your previously selected fetch service is kept as the first entry. The bundled **Read web pages** service uses the free Jina Reader, falling back to one direct request if that fails. Services supplied by the host or other plugins use their own fetching method.
+Your previously selected fetch service stays first. The bundled **Read web pages** service uses the free Jina Reader and falls back to one direct request if that fails; services from the host or other plugins use their own fetching method.
 
-You can also enable **Firecrawl** to read Markdown pages with the same API key as Firecrawl search. Search and page reads are billed separately. Newly added services stay outside your priority lists until you enable them. Perplexity uses its Search API without generating answers; You.com returns web and news snippets without requesting extra full-page extraction.
+**Firecrawl** can also read Markdown pages with the same API key as Firecrawl search; search and page reads are billed separately. Newly added services stay outside your priority lists until you enable them. Perplexity uses its Search API without generating answers; You.com returns web and news snippets without extra full-page extraction.
 
 ## Give the tools to the model
 
-Add this to the plugin list of the `agent.cordis.yml` you use:
+Add this to the plugin list of your `agent.cordis.yml`:
 
 ```yaml
 - name: '@klarkxy/dsh-web-search-manager/tools'
 ```
 
-The model then gets `web_search` and `web_fetch` while search and fetch are turned on.
+The model then gets `web_search` and `web_fetch` while search and fetch are on.
 
 ## Limits
 
-- Paid services may charge for search or fetch requests; the plugin's counts are not a bill.
-- When using the bundled Jina Reader, page addresses are sent to Jina; do not fetch URLs containing private tokens.
-- Firecrawl page reads require a page status code and final URL in the service response; missing metadata produces an error. Its page content may come from the service's cache. URLs are sent to the selected fetch service.
-- Failed search or fetch requests do not switch to another service in the list automatically.
-- Cancellation and timeouts ask the active service to stop and wait for it to finish cleaning up. A third-party service that ignores cancellation can delay the result and plugin unloading; the plugin cannot forcibly stop code running inside DSH.
+- Paid services may charge per search or fetch; the plugin's counts are not a bill.
+- The bundled Jina Reader sends page addresses to Jina; do not fetch URLs with private tokens.
+- Firecrawl page reads require a page status code and final URL in the response; missing metadata errors out. Its page content may come from the service's cache. URLs go to the selected fetch service.
+- Failed search or fetch requests do not switch to another service automatically.
+- Cancellation and timeouts ask the active service to stop and wait for it to finish cleaning up. A third-party service that ignores cancellation can delay results and plugin unloading; the plugin cannot forcibly stop code running inside DSH.
 
 ## License
 

package/docs/README.zh-CN.md

@@ -4,7 +4,7 @@
 
 [English](../README.md)
 
-在一个设置页里选择由哪个服务回答模型的网络搜索、设置请求限制，并让模型读取公开网页。搜索服务、网页读取和请求限制各占一个页签。
+在一个设置页里选择由哪个服务回答模型的网络搜索、设置请求限制，并让模型读取公开网页。搜索服务、网页读取、请求限制各占一个页签。
 
 ## 安装
 
@@ -12,21 +12,21 @@
 dsh plugin --profile web add @klarkxy/dsh-web-search-manager
 ```
 
-把 `web` 换成你的 profile 名，重启 DSH Web 后打开「插件 → 网页搜索」。更新插件后也需要重启 DSH；仅刷新页面不会加载新版搜索代码。
+把 `web` 换成你的 profile 名。重启 DSH Web 后打开「插件 → 网页搜索」。更新插件后也要重启；仅刷新页面不会加载新版搜索代码。
 
 ## 配置搜索
 
-DuckDuckGo 默认可用，无需密钥。也可以填写 API Key 启用 DeepSeek 搜索、Exa、Brave、博查、Serper、Firecrawl、Tavily、Perplexity 或 You.com。拖拽列表调整顺序，每次搜索使用第一个就绪的服务。其他插件提供的搜索服务（例如知乎）也会出现在同一列表中。新服务不会自动开启。
+DuckDuckGo 默认可用，无需密钥。要用 DeepSeek 搜索、Exa、Brave、博查、Serper、Firecrawl、Tavily、Perplexity 或 You.com，填写对应 API Key。拖拽列表调整顺序：每次搜索使用第一个就绪的服务。其他插件提供的搜索服务（例如知乎）也在同一列表中。新服务不会自动开启。
 
-「设置」页签用于设置结果条数、每次调用的查询数、总超时和网页正文长度上限。
+「设置」页签设置结果条数、每次调用的查询数、总超时和网页正文长度上限。
 
 ## 读取网页
 
-打开「网页读取」后，选择参与读取的服务，拖拽或用上下方向键调整优先顺序。每次读取使用第一个已配置且可用的服务；其他插件接入的网页读取服务也会出现在列表中，新服务需要手动开启。暂时未加载的服务会保留原有选择和顺序。
+打开「网页读取」，选择参与的服务，拖拽或用上下方向键调整优先级。每次读取使用第一个已配置且可用的服务。其他插件接入的读取服务也会出现在列表中，新服务需手动开启；暂时未加载的服务保留原有选择和顺序。
 
-原先选中的读取服务会保留为列表中的首项。内置「网页读取」通过免费的 Jina Reader 读取，失败时改为直接请求一次；如果使用宿主或其他插件的服务，则按该服务的方式读取。
+原先选中的读取服务保留在首位。内置「网页读取」走免费的 Jina Reader，失败时改为直接请求一次；宿主或其他插件的服务按各自方式读取。
 
-也可以开启 **Firecrawl** 读取 Markdown 网页，与 Firecrawl 搜索共用 API Key；搜索与网页读取分别计费。新增服务需要手动加入优先列表。Perplexity 使用 Search API，不生成回答；You.com 返回网页与新闻摘要，不额外请求全文提取。
+也可开启 **Firecrawl** 读取 Markdown 网页，与 Firecrawl 搜索共用 API Key；搜索与网页读取分别计费。新增服务需手动加入优先列表。Perplexity 使用 Search API，不生成回答；You.com 返回网页与新闻摘要，不额外请求全文提取。
 
 ## 让模型使用
 
@@ -36,15 +36,15 @@ DuckDuckGo 默认可用，无需密钥。也可以填写 API Key 启用 DeepSeek
 - name: '@klarkxy/dsh-web-search-manager/tools'
 ```
 
-搜索和网页读取开启时，模型会获得 `web_search` 与 `web_fetch` 工具。
+搜索和网页读取开启时，模型获得 `web_search` 与 `web_fetch` 工具。
 
 ## 限制
 
 - 付费服务可能按次收费；插件的计数不是账单。
-- 使用内置 Jina Reader 时，网址会发送给 Jina，请勿读取包含私密令牌的链接。
-- Firecrawl 网页读取要求服务返回网页状态码和最终网址，缺失时会报错；正文可能来自服务缓存。读取的网址会发送给所选服务。
-- 搜索或网页读取请求失败时，不会自动换用列表中的其他服务。
-- 取消与超时会请求当前服务停止，并等待其完成清理。忽略取消的第三方服务可能延迟结果返回和插件卸载；插件无法强制终止 DSH 进程内运行的代码。
+- 内置 Jina Reader 会把网址发送给 Jina，请勿读取含私密令牌的链接。
+- Firecrawl 网页读取要求服务返回网页状态码和最终网址，缺失时报错；正文可能来自服务缓存。网址会发送给所选服务。
+- 搜索或网页读取失败时，不会自动换用列表中的其他服务。
+- 取消与超时会请求当前服务停止并等待其完成清理。忽略取消的第三方服务可能延迟结果返回和插件卸载；插件无法强制终止 DSH 进程内运行的代码。
 
 ## 许可证
 

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) {
@@ -1286,7 +1378,7 @@ function NetworkSearchSettings({ client, hidden }) {
 		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",
@@ -1380,7 +1472,7 @@ 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, {
@@ -1741,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",
@@ -1784,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
@@ -1799,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();