@fonlan/dsh-web-auth 0.1.0 → 0.1.2

package/README.md

@@ -6,11 +6,11 @@
 
 - **登录页 + HttpOnly 签名 Cookie**（HMAC-SHA256，7 天滑动续期），浏览器自动携带，HTTP / WebSocket / SSE / 静态资源全覆盖
 - **首次设置**：未配置密码时，登录页显示「设置访问密码」表单（引导流程，见下文安全说明）
-- **GUI 改密**：设置 → 插件配置 →「访问认证」卡片，需旧密码；改密后**轮换签名密钥，所有已登录会话立即下线**
+- **GUI 改密**：设置 → 插件 →「访问认证」卡片（插件配置 tab），需旧密码；改密后**轮换签名密钥，所有已登录会话立即下线**
 - **退出登录**：设置卡片按钮，或访问 `/logout`
 - **防爆破**：登录与改密接口按客户端 IP 限速（连续 5 次失败锁 1 分钟起，指数退避至 30 分钟；15 分钟内累计）
 - **反代友好**：Cookie `Secure` 自动跟随 `x-forwarded-proto`；限速信任回环对端的 `X-Forwarded-For`
-- **监听地址切换**：设置卡片可一键把 dsh 的监听地址在 `127.0.0.1`（仅本机）与 `0.0.0.0`（所有网卡 / 局域网可访问）之间切换，热生效、无需重启进程（写入 patch 层由 HMR 应用，webserver 自动重新绑定）
+- **监听地址切换**：设置卡片可一键把 dsh 的监听地址在 `127.0.0.1`（仅本机）与 `0.0.0.0`（所有网卡 / 局域网可访问）之间切换，热生效、无需重启进程（写入 `web-auth` settings 命名空间 → host 半区应用 patch → HMR 重绑 webserver）
 - 密码以 **scrypt 加盐哈希**存储（`$DSH_HOME/web-auth/password.hash`，0600），永不回显、不落明文配置
 
 ## 安装
@@ -34,7 +34,7 @@ dsh plugin --profile web update @fonlan/dsh-web-auth
 1. 未设置过密码时，登录页显示「设置访问密码」——输入 **≥8 位**的新密码并确认
 2. 设置成功后立即签发会话并跳回原页面；此后每次访问都要输密码
 
-改密入口在 **设置 → 插件配置 → 访问认证**（需先登录）。
+改密入口在 **设置 → 插件 → 插件配置 → 访问认证**（需先登录）。
 
 ## 行为细节
 
@@ -49,15 +49,15 @@ dsh plugin --profile web update @fonlan/dsh-web-auth
 | 连续失败 | 按 IP 限速，提示「尝试过于频繁」 |
 | 会话过期 | 跳回登录页；滑动续期：剩余不足 24h 自动刷新 |
 | 修改密码 | 校验旧密码 → 轮换签名密钥 → **全员下线**，跳转登录页 |
-| 切换监听地址（设置卡片） | 校验取值（仅 `127.0.0.1` / `0.0.0.0`）→ 写 patch 层（profile 优先，home 兜底）→ HMR 热重载 webserver 重新绑定；**WebSocket 短暂断连后自动重连** |
+| 切换监听地址（设置卡片） | 校验取值（仅 `127.0.0.1` / `0.0.0.0`）→ 写入 `web-auth` settings 命名空间（revision 设栅）→ host 半区应用 patch（profile 优先，home 兜底）→ HMR 热重载 webserver 重新绑定；**WebSocket 短暂断连后自动重连** |
 | `/logout` | 清除 Cookie，跳转登录页 |
 
 ### 切换监听地址
 
-dsh 默认只监听 `127.0.0.1`。在 **设置 → 插件配置 → 访问认证** 卡片底部可以把它切换为 `0.0.0.0`（所有网卡，局域网可访问），或切回仅本机——无需重启 dsh 进程：
+dsh 默认只监听 `127.0.0.1`。在 **设置 → 插件 → 插件配置 → 访问认证** 卡片底部可以把它切换为 `0.0.0.0`（所有网卡，局域网可访问），或切回仅本机——无需重启 dsh 进程：
 
-- 切换写入当前部署的 patch 层：profile 的 `cordis.patch.yml`；若 home 层（`$DSH_HOME/cordis.patch.yml`）已声明 webserver 行则写 home 层（home 优先级更高，改在低层会被覆盖）。文件里其余内容（注释、`!!js` 端口表达式）原样保留。
-- dsh 的 HMR 会监听到 patch 文件变化并热重载 webserver 行：**关闭旧监听、按新地址重新绑定**，全程无需重启进程。重启进程后该设置依然生效（它就在 patch 文件里）。
+- 切换写入 `web-auth` settings 命名空间（`$DSH_HOME/settings.yaml`，revision 设栅）；host 半区监听到提交后应用到当前部署的 patch 层：profile 的 `cordis.patch.yml`；若 home 层（`$DSH_HOME/cordis.patch.yml`）已声明 webserver 行则写 home 层（home 优先级更高，改在低层会被覆盖）。文件里其余内容（注释、`!!js` 端口表达式）原样保留。
+- dsh 的 HMR 会监听到 patch 文件变化并热重载 webserver 行：**关闭旧监听、按新地址重新绑定**，全程无需重启进程。重启进程后该设置依然生效（settings 命名空间 + patch 文件都在）。
 - 切换瞬间所有连接（包括当前页面与 WebSocket）会断开重连，属正常现象；卡片会轮询状态确认新地址生效。
 - 注意：若你正通过**局域网 IP**（`0.0.0.0` 模式）访问并切回 `127.0.0.1`，切回后只能在本机访问，请改用 `127.0.0.1` 重新打开页面。
 
@@ -86,8 +86,9 @@ npm run test       # 32 项单元 + 集成测试（node:test，真实 HTTP/WS
 - `src/gate.ts` — 把认证闸门包到 node:http 服务器的 request/upgrade 监听器外层
 - `src/handlers.ts` — 登录页/登录/登出/改密/状态/监听切换 路由处理
 - `src/profile-patch.ts` — 监听地址切换：webserver 行的 patch 层文本改写（保留注释与 `!!js` 表达式）
+- `src/settings.ts` — `web-auth` settings 命名空间注册 + listenHost 变更应用（卡片的分发键与数据源）
 - `src/index.ts` — cordis 插件装配（host 半区）
-- `src/client/index.tsx` — 设置卡片（浏览器半区，settings.section 插槽）
+- `src/client/index.tsx` — 设置卡片（浏览器半区，`settings.plugin.item` 插槽，keyed by `web-auth` 命名空间）
 - `cordis.patch.yml` — bundle 补丁层（insert 插件行）
 
 ## License

package/cordis.patch.yml

@@ -11,7 +11,10 @@
 # the auth gate wraps the HTTP listener after it is bound.
 #
 # The package also declares `dsh.client` (see package.json), so the web app
-# loads the browser half (the settings section card) automatically.
+# loads the browser half (the plugin's own Settings Card) automatically. The
+# card registers on the `settings.plugin.item` slot keyed by the `web-auth`
+# settings namespace (see src/settings.ts) — the 设置 → 插件 → 插件配置 tab
+# pairs the two.
 #
 # There is intentionally NO password here: passwords are maintained through
 # the GUI (login page first setup / settings card change), stored hashed

package/lib/client/index.d.ts

@@ -1,8 +1,14 @@
 import type { Context } from '@deepseek-ai/cordis';
-/** Services provided by other browser plugins before this one mounts. */
+/** Services provided by other browser plugins before this one mounts.
+ *
+ * `connection` and `remote` are required by `settingsScope.bind` (it resolves
+ * the settings transport and the forwarded-invalidation subscription through
+ * `ctx.get`), so the fiber must wait for them — exactly like
+ * dsh-client-ui-settings-plugins does for its own cards.
+ */
 export declare const inject: string[];
 /**
- * Client plugin body: register the settings section. The shell's declaration
+ * Client plugin body: register the settings card. The shell's declaration
  * may not be on the ledger yet, so the registration waits via slots.inject.
  * @param ctx - the client cordis context.
  */

package/lib/client.js

@@ -1,5 +1,5 @@
 window.__ModuleLoader__.load({
-	id: "dsh-web-auth",
+	id: "@fonlan/dsh-web-auth",
 	factory: (require) => {
 		var module = { exports: {} };
 		var exports = module.exports;
@@ -37,9 +37,36 @@ var dshWebAuthModule = (() => {
   });
   var import_react = __require("react");
   var import_jsx_runtime = __require("react/jsx-runtime");
-  var inject = ["slots"];
+  var inject = ["slots", "settingsScope", "connection", "remote"];
+  var WEB_AUTH_NS = "web-auth";
   var CSS = `
-.dwa-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
+.dwa-card {
+  border: 1px solid var(--dsw-alias-border-l2, #2a3346);
+  background: var(--dsw-alias-bg-layer-3, #0d1017);
+  border-radius: 12px;
+  list-style: none;
+  transition: border-color .16s, background .16s;
+}
+.dwa-card:hover { border-color: var(--dsw-alias-label-dimmed, #4a5468); }
+.dwa-card[data-open] {
+  background: var(--dsw-alias-bg-layer-2, #141a26);
+  border-color: var(--dsw-alias-label-dimmed, #4a5468);
+}
+.dwa-head {
+  appearance: none; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
+  background: transparent; border: 0; border-radius: 12px;
+  align-items: center; gap: 12px; padding: 14px 16px; display: flex;
+}
+.dwa-head:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #4f8cff); outline-offset: -2px; }
+.dwa-headText { flex-direction: column; flex: 1; gap: 4px; min-width: 0; display: flex; }
+.dwa-title { color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 15px; font-weight: 600; line-height: 1.4; }
+.dwa-sub { color: var(--dsw-alias-label-tertiary, #8b93a7); font-size: 13px; line-height: 1.5; }
+.dwa-chevron {
+  color: var(--dsw-alias-label-tertiary, #8b93a7); flex: none;
+  transition: transform .16s; display: flex; align-items: center; justify-content: center;
+}
+.dwa-chevron[data-open] { transform: rotate(180deg); }
+.dwa-body { border-top: 1px solid var(--dsw-alias-border-l2, #2a3346); margin: 0 16px; padding: 12px 0 8px; display: flex; flex-direction: column; gap: 12px; }
 .dwa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .dwa-status { font-size: 13px; line-height: 1.6; }
 .dwa-status[data-on] { color: var(--dsw-alias-label-primary, #e6e6e6); }
@@ -104,33 +131,48 @@ var dshWebAuthModule = (() => {
   function isListenHost(value) {
     return value === "127.0.0.1" || value === "0.0.0.0";
   }
-  function PasswordSection(_props) {
+  async function fetchStatus() {
+    try {
+      const response = await fetch("/api/web-auth/status");
+      if (!response.ok) return null;
+      const data = await response.json();
+      return { configured: data.configured === true, host: isListenHost(data.host) ? data.host : void 0 };
+    } catch {
+      return null;
+    }
+  }
+  function AuthCard(props) {
+    const { scope } = props;
+    const snapshot = (0, import_react.useSyncExternalStore)(
+      (listener) => scope.subscribe(listener),
+      () => scope.getSnapshot()
+    );
     const [configured, setConfigured] = (0, import_react.useState)(null);
+    const [host, setHost] = (0, import_react.useState)(null);
     const [oldPassword, setOldPassword] = (0, import_react.useState)("");
     const [newPassword, setNewPassword] = (0, import_react.useState)("");
     const [confirm, setConfirm] = (0, import_react.useState)("");
     const [busy, setBusy] = (0, import_react.useState)(false);
     const [message, setMessage] = (0, import_react.useState)(null);
-    const [listenHost, setListenHost] = (0, import_react.useState)(null);
     const [listenPick, setListenPick] = (0, import_react.useState)("127.0.0.1");
     const [listenBusy, setListenBusy] = (0, import_react.useState)(false);
     const [listenMsg, setListenMsg] = (0, import_react.useState)(null);
+    const [open, setOpen] = (0, import_react.useState)(false);
     (0, import_react.useEffect)(() => {
       let alive = true;
-      void fetch("/api/web-auth/status").then((response) => response.ok ? response.json() : null).then((data) => {
-        if (!alive) return;
-        setConfigured(data?.configured === true);
-        if (isListenHost(data?.host)) {
-          setListenHost(data.host);
-          setListenPick(data.host);
+      void fetchStatus().then((status) => {
+        if (!alive || status === null) return;
+        setConfigured(status.configured);
+        if (status.host !== void 0) {
+          setHost(status.host);
+          setListenPick(status.host);
         }
-      }).catch(() => {
-        if (alive) setConfigured(null);
       });
       return () => {
         alive = false;
       };
     }, []);
+    if (snapshot.status === "unavailable") return null;
     const submit = async () => {
       if (newPassword.length < 8) {
         setMessage({ kind: "err", text: "\u65B0\u5BC6\u7801\u81F3\u5C11 8 \u4F4D\u3002" });
@@ -156,144 +198,150 @@ var dshWebAuthModule = (() => {
       }
     };
     const applyListen = async () => {
-      if (listenHost === listenPick) return;
+      if (host === listenPick) return;
       setListenBusy(true);
       setListenMsg(null);
       try {
-        const response = await fetch("/api/web-auth/listen", {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ host: listenPick })
-        });
-        const data = await response.json();
-        if (response.ok && data.ok === true) {
-          if (data.applying === true) {
-            setListenMsg({ kind: "ok", text: "\u5DF2\u5207\u6362\uFF0C\u6B63\u5728\u91CD\u65B0\u7ED1\u5B9A\u76D1\u542C\u7AEF\u53E3\uFF0C\u9875\u9762\u5C06\u77ED\u6682\u65AD\u8FDE\u2026" });
-            for (let i = 0; i < 15; i++) {
-              await new Promise((resolve) => setTimeout(resolve, 600));
-              try {
-                const check = await fetch("/api/web-auth/status");
-                const status = await check.json();
-                if (isListenHost(status.host) && status.host === listenPick) {
-                  setListenHost(listenPick);
-                  setListenMsg({ kind: "ok", text: "\u5DF2\u751F\u6548\uFF1A\u76D1\u542C\u5730\u5740\u4E3A " + listenPick + "\u3002" });
-                  return;
-                }
-              } catch {
-              }
-            }
-            setListenMsg({ kind: "ok", text: "\u5DF2\u5E94\u7528\uFF0C\u82E5\u9875\u9762\u8FDE\u63A5\u4E2D\u65AD\u8BF7\u7A0D\u5019\u5237\u65B0\uFF08\u76D1\u542C\u5730\u5740\uFF1A" + listenPick + "\uFF09\u3002" });
-          } else {
-            setListenHost(listenPick);
-            setListenMsg({ kind: "ok", text: "\u76D1\u542C\u5730\u5740\u672A\u53D8\u5316\u3002" });
+        await scope.set("listenHost", listenPick);
+        setListenMsg({ kind: "ok", text: "\u5DF2\u5207\u6362\uFF0C\u6B63\u5728\u91CD\u65B0\u7ED1\u5B9A\u76D1\u542C\u7AEF\u53E3\uFF0C\u9875\u9762\u5C06\u77ED\u6682\u65AD\u8FDE\u2026" });
+        for (let i = 0; i < 15; i++) {
+          await new Promise((resolve) => setTimeout(resolve, 600));
+          const status = await fetchStatus();
+          if (status?.host === listenPick) {
+            setHost(listenPick);
+            setListenMsg({ kind: "ok", text: "\u5DF2\u751F\u6548\uFF1A\u76D1\u542C\u5730\u5740\u4E3A " + listenPick + "\u3002" });
+            return;
           }
-        } else {
-          const text = data.error === "invalid-host" ? "\u65E0\u6548\u7684\u76D1\u542C\u5730\u5740\u3002" : data.error === "unsupported" ? "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301\u4FEE\u6539\u76D1\u542C\u5730\u5740\u3002" : "\u5207\u6362\u5931\u8D25\uFF1A" + String(data.error ?? response.status);
-          setListenMsg({ kind: "err", text });
         }
+        setListenMsg({ kind: "ok", text: "\u5DF2\u5E94\u7528\uFF0C\u82E5\u9875\u9762\u8FDE\u63A5\u4E2D\u65AD\u8BF7\u7A0D\u5019\u5237\u65B0\uFF08\u76D1\u542C\u5730\u5740\uFF1A" + listenPick + "\uFF09\u3002" });
       } catch {
-        setListenMsg({ kind: "err", text: "\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5\u3002" });
+        setListenMsg({ kind: "err", text: "\u5199\u5165\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002" });
       } finally {
         setListenBusy(false);
       }
     };
-    if (configured === null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dwa-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-hint", children: "\u52A0\u8F7D\u4E2D\u2026" }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dwa-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-status", "data-on": configured ? void 0 : "", "data-off": configured ? "" : void 0, children: configured ? "\u8BBF\u95EE\u8BA4\u8BC1\uFF1A\u5DF2\u542F\u7528" : "\u8BBF\u95EE\u8BA4\u8BC1\uFF1A\u672A\u8BBE\u7F6E\u5BC6\u7801\uFF08\u5F53\u524D\u672A\u542F\u7528\uFF09" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-hint", children: "\u8BBE\u7F6E\u540E\uFF0C\u8BBF\u95EE\u672C\u670D\u52A1\u9700\u8981\u8F93\u5165\u5BC6\u7801\uFF1B\u4F1A\u8BDD\u6709\u6548\u671F 7 \u5929\uFF08\u6D3B\u52A8\u81EA\u52A8\u7EED\u671F\uFF09\u3002\u4FEE\u6539\u5BC6\u7801\u4F1A\u4F7F\u6240\u6709\u5DF2\u767B\u5F55\u4F1A\u8BDD\u7ACB\u5373\u5931\u6548\u3002" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "dwa-divider" }),
-      configured && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-old", children: "\u65E7\u5BC6\u7801" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
-          {
-            id: "dwa-old",
-            className: "dwa-input",
-            type: "password",
-            autoComplete: "current-password",
-            value: oldPassword,
-            onChange: (e) => setOldPassword(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-new", children: "\u65B0\u5BC6\u7801\uFF08\u81F3\u5C11 8 \u4F4D\uFF09" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
-          {
-            id: "dwa-new",
-            className: "dwa-input",
-            type: "password",
-            autoComplete: "new-password",
-            value: newPassword,
-            onChange: (e) => setNewPassword(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-confirm", children: "\u786E\u8BA4\u65B0\u5BC6\u7801" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
-          {
-            id: "dwa-confirm",
-            className: "dwa-input",
-            type: "password",
-            autoComplete: "new-password",
-            value: confirm,
-            onChange: (e) => setConfirm(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dwa-btn", disabled: busy, onClick: () => void submit(), children: "\u4FEE\u6539\u5BC6\u7801" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dwa-btn", "data-ghost": "", onClick: () => {
-          window.location.href = "/logout";
-        }, children: "\u9000\u51FA\u767B\u5F55" })
-      ] }),
-      message !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-msg", "data-kind": message.kind, role: "alert", children: message.text }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "dwa-divider" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-listen", children: "\u76D1\u542C\u5730\u5740" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "select",
-          {
-            id: "dwa-listen",
-            className: "dwa-input",
-            value: listenPick,
-            disabled: listenBusy || listenHost === null,
-            onChange: (e) => setListenPick(e.target.value),
-            children: LISTEN_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dwa-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-card", "data-open": open ? "" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "button",
         {
-          className: "dwa-btn",
-          disabled: listenBusy || listenHost === null || listenHost === listenPick,
-          onClick: () => void applyListen(),
-          children: "\u5E94\u7528\u76D1\u542C\u5730\u5740"
+          type: "button",
+          className: "dwa-head",
+          "aria-expanded": open,
+          "aria-label": (open ? "\u6536\u8D77" : "\u5C55\u5F00") + "\uFF1A\u8BBF\u95EE\u8BA4\u8BC1",
+          onClick: () => setOpen(!open),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dwa-headText", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dwa-title", children: "\u8BBF\u95EE\u8BA4\u8BC1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dwa-sub", children: "Web \u8BBF\u95EE\u5BC6\u7801\u4E0E\u76D1\u542C\u5730\u5740" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dwa-chevron", "data-open": open ? "" : void 0, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: "M3.5 5.25L7 8.75L10.5 5.25",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-hint", children: "\u5207\u6362\u540E dsh \u4F1A\u7ACB\u5373\u91CD\u65B0\u7ED1\u5B9A\u76D1\u542C\u7AEF\u53E3\uFF08WebSocket \u77ED\u6682\u65AD\u8FDE\u540E\u81EA\u52A8\u91CD\u8FDE\uFF09\u3002\u6CE8\u610F\uFF1A\u82E5\u5F53\u524D\u901A\u8FC7\u5C40\u57DF\u7F51 IP \u8BBF\u95EE\uFF0C\u5207\u56DE 127.0.0.1 \u540E\u53EA\u80FD\u5728\u672C\u673A\u8BBF\u95EE\u3002" }),
-      listenMsg !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-msg", "data-kind": listenMsg.kind, role: "alert", children: listenMsg.text })
+      ),
+      open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dwa-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-status", "data-on": configured ? void 0 : "", "data-off": configured ? "" : void 0, children: configured === null ? "\u52A0\u8F7D\u4E2D\u2026" : configured ? "\u8BBF\u95EE\u8BA4\u8BC1\uFF1A\u5DF2\u542F\u7528" : "\u8BBF\u95EE\u8BA4\u8BC1\uFF1A\u672A\u8BBE\u7F6E\u5BC6\u7801\uFF08\u5F53\u524D\u672A\u542F\u7528\uFF09" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-hint", children: "\u8BBE\u7F6E\u540E\uFF0C\u8BBF\u95EE\u672C\u670D\u52A1\u9700\u8981\u8F93\u5165\u5BC6\u7801\uFF1B\u4F1A\u8BDD\u6709\u6548\u671F 7 \u5929\uFF08\u6D3B\u52A8\u81EA\u52A8\u7EED\u671F\uFF09\u3002\u4FEE\u6539\u5BC6\u7801\u4F1A\u4F7F\u6240\u6709\u5DF2\u767B\u5F55\u4F1A\u8BDD\u7ACB\u5373\u5931\u6548\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "dwa-divider" }),
+        configured && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-old", children: "\u65E7\u5BC6\u7801" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              id: "dwa-old",
+              className: "dwa-input",
+              type: "password",
+              autoComplete: "current-password",
+              value: oldPassword,
+              onChange: (e) => setOldPassword(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-new", children: "\u65B0\u5BC6\u7801\uFF08\u81F3\u5C11 8 \u4F4D\uFF09" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              id: "dwa-new",
+              className: "dwa-input",
+              type: "password",
+              autoComplete: "new-password",
+              value: newPassword,
+              onChange: (e) => setNewPassword(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-confirm", children: "\u786E\u8BA4\u65B0\u5BC6\u7801" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              id: "dwa-confirm",
+              className: "dwa-input",
+              type: "password",
+              autoComplete: "new-password",
+              value: confirm,
+              onChange: (e) => setConfirm(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dwa-btn", disabled: busy, onClick: () => void submit(), children: "\u4FEE\u6539\u5BC6\u7801" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dwa-btn", "data-ghost": "", onClick: () => {
+            window.location.href = "/logout";
+          }, children: "\u9000\u51FA\u767B\u5F55" })
+        ] }),
+        message !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-msg", "data-kind": message.kind, role: "alert", children: message.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "dwa-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dwa-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "dwa-label", htmlFor: "dwa-listen", children: "\u76D1\u542C\u5730\u5740" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "select",
+            {
+              id: "dwa-listen",
+              className: "dwa-input",
+              value: listenPick,
+              disabled: listenBusy || host === null || !snapshot.writable,
+              onChange: (e) => setListenPick(e.target.value),
+              children: LISTEN_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dwa-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "dwa-btn",
+            disabled: listenBusy || host === null || host === listenPick || !snapshot.writable,
+            onClick: () => void applyListen(),
+            children: "\u5E94\u7528\u76D1\u542C\u5730\u5740"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-hint", children: "\u5207\u6362\u540E dsh \u4F1A\u7ACB\u5373\u91CD\u65B0\u7ED1\u5B9A\u76D1\u542C\u7AEF\u53E3\uFF08WebSocket \u77ED\u6682\u65AD\u8FDE\u540E\u81EA\u52A8\u91CD\u8FDE\uFF09\u3002\u6CE8\u610F\uFF1A\u82E5\u5F53\u524D\u901A\u8FC7\u5C40\u57DF\u7F51 IP \u8BBF\u95EE\uFF0C\u5207\u56DE 127.0.0.1 \u540E\u53EA\u80FD\u5728\u672C\u673A\u8BBF\u95EE\u3002" }),
+        listenMsg !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dwa-msg", "data-kind": listenMsg.kind, role: "alert", children: listenMsg.text })
+      ] })
     ] });
   }
   function apply(ctx) {
     injectStyle();
-    const slots = ctx.slots;
-    slots.inject(
-      "settings.section",
-      () => slots.register(
+    const services = ctx;
+    const scope = services.settingsScope.bind({ namespace: WEB_AUTH_NS });
+    services.slots.inject(
+      "settings.plugin.item",
+      () => services.slots.register(
         {
-          name: "settings.section",
-          id: "web-auth",
-          order: 120,
-          label: () => "\u8BBF\u95EE\u8BA4\u8BC1"
+          name: "settings.plugin.item",
+          key: WEB_AUTH_NS,
+          inject: () => ({ scope })
         },
-        PasswordSection
+        AuthCard
       )
     );
   }

package/lib/context-types.d.ts

@@ -34,4 +34,11 @@ export interface PluginContext {
      * boot anchors on — the loader inherits it down the whole tree).
      */
     baseUrl: string;
+    /**
+     * Attach a callback when listed services are ready (cordis registry,
+     * mixed onto every context). Used to attach the settings namespace
+     * opportunistically: the callback only runs where a settings service
+     * exists (web profiles), so CLI/headless profiles skip it.
+     */
+    inject(deps: string[], callback: (sctx: PluginContext) => void): unknown;
 }

package/lib/index.js

@@ -17,6 +17,7 @@ import { RateLimiter } from "./auth-core.js";
 import { readSecret, readPasswordHash, resolveDshHome, rotateSecret, writePasswordHash } from "./state.js";
 import { createGate, handleChangePassword, handleListenChange, handleLoginPage, handleLoginPost, handleLogout, handleStatus } from "./handlers.js";
 import { LISTEN_APPLY_DELAY_MS, prepareWebserverHostPatch, resolveListenPatchPath, writeWebserverHostPatch } from "./profile-patch.js";
+import { installWebAuthSettings } from "./settings.js";
 import { fileURLToPath } from 'node:url';
 import { join } from 'node:path';
 /** Stable Cordis plugin name. */
@@ -56,6 +57,11 @@ export function apply(ctx) {
         // away; failures are logged, never thrown — the client was confirmed.
         listen: buildListenController(ctx)
     };
+    // The plugin's own Settings Card (设置 → 插件配置 → web-auth) rides the
+    // `web-auth` settings namespace: registering it makes the tab dispatch the
+    // card, and committed listenHost changes are applied here. Attaches only
+    // when a settings service exists (CLI/headless profiles skip it).
+    installWebAuthSettings(ctx, env.listen);
     if (state.readHash() === undefined) {
         // console.error, not ctx.logger.warn: the cordis default logger level
         // suppresses warn (level 2) unless the deployment raises it, and this

package/lib/settings.d.ts

@@ -0,0 +1,62 @@
+/**
+ * dsh-web-auth — the `web-auth` settings namespace.
+ *
+ * The namespace exists so the plugin's browser half can register its own
+ * Settings Card: the settings section ("插件配置" tab) dispatches
+ * `settings.plugin.item` for every namespace the Host serves, keyed by the
+ * namespace string, and the client registers its card under the same key.
+ * The namespace carries the one genuine configuration value the plugin owns:
+ * the web server's bind host (`listenHost`). The password is deliberately
+ * NOT here — it is a secret stored hashed under `$DSH_HOME/web-auth/` and
+ * changed through a dedicated API, never through the settings document.
+ *
+ * Applying `listenHost` still goes through the profile patch layer (the
+ * webserver's bind host is composition config; the patch is how it is
+ * changed, and HMR hot-applies it). The settings document is the user-facing
+ * source of intent; this module translates a committed change into the same
+ * prepare → deferred-commit path the REST API used before.
+ */
+import z from '@deepseek-ai/schemastery';
+import { type ListenHost } from './profile-patch.ts';
+import type { ListenController } from './handlers.ts';
+/** The settings namespace string (the card's dispatch key, spelled the same client-side). */
+export declare const WEB_AUTH_NS = "web-auth";
+/** Branded namespace for the settings provider. */
+export declare const NS: import("@deepseek-ai/dsh-settings").SettingsNamespace;
+/** The namespace's resolved shape. */
+export interface WebAuthSettings {
+    /** The web server's bind host. */
+    listenHost: ListenHost;
+}
+/** Schema resolving the namespace (schemastery, matching the webserver's own).
+ *
+ * Deliberately NO `.default(...)`: an invalid user-layer value (e.g. `null`
+ * written by an out-of-band client) must REJECT the write — keeping the last
+ * good resolved value — rather than silently resolving to the default. A
+ * default would look like a genuine user change to the watch below and could
+ * rebind the webserver off a value nobody actually chose.
+ */
+export declare const WebAuthSettingsSchema: z<WebAuthSettings>;
+/**
+ * Register the `web-auth` settings namespace and translate committed
+ * `listenHost` changes into the live bind-host switch.
+ *
+ * The registration rides the plugin fiber and attaches only when a settings
+ * service exists (`ctx.inject(['settings'])`), so CLI/headless profiles —
+ * which have no web surface and no card — keep working without one. The
+ * composition `base` is the webserver's host at boot: the patch layer IS the
+ * deployment's composition, and seeding it this way makes the resolved value
+ * match reality with no user layer and no settings-document write.
+ *
+ * The watch callback applies a changed host through the same
+ * prepare → deferred-commit controller the REST API uses; a change that is a
+ * no-op against the current runtime host is skipped, and a commit that did
+ * not actually change the resolved value (invalid writes keep the last good
+ * value; document reloads re-resolve) never touches the webserver. This also
+ * makes the initial attach harmless — the resolved value equals the runtime
+ * host.
+ *
+ * @param ctx - the plugin context (must expose `settings` when available).
+ * @param listen - the live listen-host controller (prepare/commit).
+ */
+export declare function installWebAuthSettings(ctx: import('./context-types.ts').PluginContext, listen: ListenController): void;

package/lib/settings.js

@@ -0,0 +1,88 @@
+/**
+ * dsh-web-auth — the `web-auth` settings namespace.
+ *
+ * The namespace exists so the plugin's browser half can register its own
+ * Settings Card: the settings section ("插件配置" tab) dispatches
+ * `settings.plugin.item` for every namespace the Host serves, keyed by the
+ * namespace string, and the client registers its card under the same key.
+ * The namespace carries the one genuine configuration value the plugin owns:
+ * the web server's bind host (`listenHost`). The password is deliberately
+ * NOT here — it is a secret stored hashed under `$DSH_HOME/web-auth/` and
+ * changed through a dedicated API, never through the settings document.
+ *
+ * Applying `listenHost` still goes through the profile patch layer (the
+ * webserver's bind host is composition config; the patch is how it is
+ * changed, and HMR hot-applies it). The settings document is the user-facing
+ * source of intent; this module translates a committed change into the same
+ * prepare → deferred-commit path the REST API used before.
+ */
+import z from '@deepseek-ai/schemastery';
+import { settingsNamespace } from '@deepseek-ai/dsh-settings';
+import { isAllowedListenHost } from "./profile-patch.js";
+/** The settings namespace string (the card's dispatch key, spelled the same client-side). */
+export const WEB_AUTH_NS = 'web-auth';
+/** Branded namespace for the settings provider. */
+export const NS = settingsNamespace(WEB_AUTH_NS);
+/** Schema resolving the namespace (schemastery, matching the webserver's own).
+ *
+ * Deliberately NO `.default(...)`: an invalid user-layer value (e.g. `null`
+ * written by an out-of-band client) must REJECT the write — keeping the last
+ * good resolved value — rather than silently resolving to the default. A
+ * default would look like a genuine user change to the watch below and could
+ * rebind the webserver off a value nobody actually chose.
+ */
+export const WebAuthSettingsSchema = z.object({
+    listenHost: z.union([z.const('127.0.0.1'), z.const('0.0.0.0')])
+});
+/**
+ * Register the `web-auth` settings namespace and translate committed
+ * `listenHost` changes into the live bind-host switch.
+ *
+ * The registration rides the plugin fiber and attaches only when a settings
+ * service exists (`ctx.inject(['settings'])`), so CLI/headless profiles —
+ * which have no web surface and no card — keep working without one. The
+ * composition `base` is the webserver's host at boot: the patch layer IS the
+ * deployment's composition, and seeding it this way makes the resolved value
+ * match reality with no user layer and no settings-document write.
+ *
+ * The watch callback applies a changed host through the same
+ * prepare → deferred-commit controller the REST API uses; a change that is a
+ * no-op against the current runtime host is skipped, and a commit that did
+ * not actually change the resolved value (invalid writes keep the last good
+ * value; document reloads re-resolve) never touches the webserver. This also
+ * makes the initial attach harmless — the resolved value equals the runtime
+ * host.
+ *
+ * @param ctx - the plugin context (must expose `settings` when available).
+ * @param listen - the live listen-host controller (prepare/commit).
+ */
+export function installWebAuthSettings(ctx, listen) {
+    ctx.inject(['settings'], (sctx) => {
+        const current = listen.current();
+        const base = {
+            listenHost: isAllowedListenHost(current) ? current : '127.0.0.1'
+        };
+        const scope = sctx.settings.register(NS, WebAuthSettingsSchema, { base });
+        const dispose = scope.watch((next, prev) => {
+            const desired = next.listenHost;
+            // Only a real resolved-value change is a user gesture worth applying:
+            // a commit that re-resolves to the same value (document reloads, a
+            // rejected patch keeping the last good value) must not touch the
+            // webserver. Combined with the no-default schema, an invalid write
+            // cannot masquerade as a change.
+            if (desired === prev.listenHost)
+                return;
+            if (desired === listen.current())
+                return;
+            try {
+                listen.commit(listen.prepare(desired));
+            }
+            catch (error) {
+                // The settings document already committed; the apply is best-effort
+                // (failures logged, never thrown — the client was already confirmed).
+                console.error('[dsh-web-auth] failed to apply listenHost from settings:', error);
+            }
+        });
+        sctx.effect(() => dispose, 'web-auth: listen host settings watcher');
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fonlan/dsh-web-auth",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "DSH web plugin: password-gate authentication (login page + HttpOnly signed cookie) for exposing dsh web behind a reverse proxy",
   "type": "module",
   "license": "MIT",
@@ -31,6 +31,7 @@
   },
   "scripts": {
     "build": "rm -rf lib && tsc -p tsconfig.build.json && node scripts/build-client.mjs",
+    "prepare": "npm run build",
     "typecheck": "tsc --noEmit",
     "test": "npm run build && tsc -p tsconfig.test.json && node --test --test-force-exit 'lib-test/*.test.js'",
     "test:only": "tsc -p tsconfig.test.json && node --test --test-force-exit 'lib-test/*.test.js'",
@@ -46,21 +47,32 @@
     "client": {
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-ui-slots"
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-api-remotes"
       ],
       "platform": "web"
     }
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "dependencies": {
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.1"
+  },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.1",
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "esbuild": "^0.24.0",