agent-loft 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-loft",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "description": "多个 agent 的工作台：把本机 Claude Code / Codex 放到一处统一管理，用飞书和 Web 页面随时驱动——会话、审批、模型切换都共用",
   "keywords": [

package/src/agents/claude/driver.ts

@@ -116,6 +116,13 @@ export class ClaudeDriver implements AgentDriver {
     }
   }
 
+  async sessionTitle(id: string, cwd: string): Promise<string | undefined> {
+    if (!SESSION_ID.test(id)) return undefined;
+    // SDK 的 customTitle 已经是「手动改的名 || 自动生成的 aiTitle」，不含首条消息兜底
+    const info = await getSessionInfo(id, { dir: cwd });
+    return info?.customTitle?.replace(/\s+/g, " ").trim() || undefined;
+  }
+
   /**
    * 把会话记录整理成「一问一答」：用户一条，助手把这一轮所有文本拼成一条，
    * 中间的工具调用作为过程摘要挂在助手那条上。工具结果（type=user 的 tool_result）

package/src/agents/codex/driver.ts

@@ -102,6 +102,11 @@ export class CodexDriver implements AgentDriver {
     }
   }
 
+  async sessionTitle(id: string): Promise<string | undefined> {
+    const res = await appServer.call<{ thread: Thread }>("thread/read", { threadId: id, includeTurns: false });
+    return res.thread.name?.replace(/\s+/g, " ").trim() || undefined;
+  }
+
   async readHistory(id: string): Promise<HistoryMessage[]> {
     const res = await appServer.call<{
       thread: { turns?: { id?: string; items?: HistoryItem[]; startedAt?: number | null; completedAt?: number | null }[] };

package/src/channels/feishu/cards.ts

@@ -61,8 +61,8 @@ export function approvalCard(interaction: Interaction, ctx: CardCtx) {
   const id = interaction.id;
   const buttons = [
     button("允许一次", { a: "approval", r: id, d: "allow-once" }, ctx, "primary"),
-    ...(spec.alwaysLabel ? [button(spec.alwaysLabel, { a: "approval", r: id, d: "allow-always" }, ctx)] : []),
     ...(spec.allowSession ? [button("本会话全部允许", { a: "approval", r: id, d: "allow-session" }, ctx)] : []),
+    ...(spec.alwaysLabel ? [button(spec.alwaysLabel, { a: "approval", r: id, d: "allow-always" }, ctx)] : []),
     button("拒绝", { a: "approval", r: id, d: "deny" }, ctx, "danger"),
   ];
   return card(

package/src/channels/web/api.ts

@@ -15,6 +15,7 @@ import { listAllowlist, setAllowlist } from "../../agents/claude/permissions.js"
 import { agentAvailability, agentHealth, invalidateHealth } from "../../agents/health.js";
 import { installCodex, upgrade, useInstalledCodex, versionInfo } from "../../core/upgrade.js";
 import { feishuBots } from "../feishu/index.js";
+import { fromThisMachine, isLoopbackHost, lanAddresses, listening, rebind } from "./listen.js";
 import { beginRegistration, initRegistration, pollRegistration, qrSvg } from "../feishu/register.js";
 import { FeishuClient } from "../feishu/client.js";
 import {
@@ -176,8 +177,11 @@ function applyConfig(input: Partial<AppConfig>): void {
   }
   if (input.web) {
     // 密码只能走专门的接口改
-    const { passwordHash: _ignored, ...web } = input.web as AppConfig["web"];
+    // 监听地址、端口已经在 applyListen 里校验并换好了，这里只收形状对的
+    const { passwordHash: _ignored, host, port, ...web } = input.web as AppConfig["web"];
     next.web = { ...next.web, ...web, passwordHash: current.web.passwordHash };
+    if (typeof host === "string" && host.trim()) next.web.host = host.trim();
+    if (Number.isInteger(Number(port)) && Number(port) >= 1 && Number(port) <= 65535) next.web.port = Number(port);
     const q = Number(next.web.quotaRefreshMin);
     next.web.quotaRefreshMin = Number.isFinite(q) ? Math.max(0, Math.min(1440, Math.round(q))) : 10;
   }
@@ -217,6 +221,38 @@ function applyConfig(input: Partial<AppConfig>): void {
   saveConfig(next);
 }
 
+// ---------- 监听地址（局域网访问、端口） ----------
+
+/** 设置页「网络访问」要显示的：这台机器的局域网地址、当前请求是不是从本机来的 */
+function networkInfo(req: IncomingMessage) {
+  return { lan: lanAddresses(), local: fromThisMachine(req.socket.remoteAddress), listening: listening() };
+}
+
+/**
+ * 改了监听地址 / 端口：先真的换过去，成功了配置才保存（applyConfig 里只是照抄）。
+ * 端口被占用之类的失败直接报给页面，旧地址照常工作。
+ */
+async function applyListen(req: IncomingMessage, web: Partial<AppConfig["web"]> | undefined): Promise<void> {
+  if (!web || (web.host === undefined && web.port === undefined)) return;
+  const current = config().web;
+  const host = web.host === undefined ? current.host : String(web.host).trim();
+  const port = web.port === undefined ? current.port : Number(web.port);
+  if (!host) throw new HttpError(400, "监听地址不能为空");
+  if (!Number.isInteger(port) || port < 1 || port > 65535) throw new HttpError(400, "端口要是 1 到 65535 之间的整数");
+  if (host === current.host && port === current.port) return;
+  // 从局域网里的另一台设备上关掉局域网访问：这个页面马上就连不上了，而且没法在这台设备上改回来
+  if (isLoopbackHost(host) && !isLoopbackHost(current.host) && !fromThisMachine(req.socket.remoteAddress)) {
+    throw new HttpError(400, "你现在是从局域网里的另一台设备访问的，关掉局域网访问后这个页面会立刻断开、也没法再改回来。请在运行 agent-loft 的这台机器上操作。");
+  }
+  if (config().web.enabled) {
+    try {
+      await rebind(host, port);
+    } catch (err) {
+      throw new HttpError(400, err instanceof Error ? err.message : String(err));
+    }
+  }
+}
+
 // ---------- 鉴权 ----------
 
 function setCookie(req: IncomingMessage, res: ServerResponse, token: string, maxAgeSec: number): void {
@@ -398,7 +434,8 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
     if (!sub && method === "PATCH") {
       const body = await readJsonBody<{ title?: string; hidden?: boolean }>(req);
       updateConversation(key, {
-        ...(typeof body.title === "string" ? { title: body.title.trim().slice(0, 80) } : {}),
+        // 手动改过名，就不再拿 agent 生成的标题覆盖
+        ...(typeof body.title === "string" ? { title: body.title.trim().slice(0, 80), titleAuto: false } : {}),
         ...(typeof body.hidden === "boolean" ? { hidden: body.hidden } : {}),
       });
       hub.emitEvent(key, { type: "meta" });
@@ -534,12 +571,14 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
 
   // ----- 设置 -----
   if (p === "/api/config" && method === "GET") {
-    sendJson(res, 200, publicConfig());
+    sendJson(res, 200, { ...(publicConfig() as object), network: networkInfo(req) });
     return;
   }
   if (p === "/api/config" && method === "PUT") {
-    applyConfig(await readJsonBody<Partial<AppConfig>>(req));
-    sendJson(res, 200, publicConfig());
+    const input = await readJsonBody<Partial<AppConfig>>(req);
+    await applyListen(req, input.web);
+    applyConfig(input);
+    sendJson(res, 200, { ...(publicConfig() as object), network: networkInfo(req) });
     return;
   }
   // 侧栏的账号额度：各 agent 自己缓存（60 秒），这里并发问一遍，单个失败 / 超时不影响别的

package/src/channels/web/listen.ts

@@ -0,0 +1,120 @@
+// Web 服务监听在哪个地址、哪个端口，以及不重启进程就换地址。
+//
+// http.Server 自己不 listen，由一个 net.Server 收连接再交给它（emit "connection"）。
+// 这样换地址时可以先在新地址上监听成功、再关掉旧的监听：
+//   - 新端口被占用 / 没权限：直接报错，旧的照常工作，配置也不改；
+//   - 已经连着的页面、WebSocket 属于 http.Server，关掉旧监听不影响它们（只是不再接新连接）。
+import net from "node:net";
+import os from "node:os";
+import type http from "node:http";
+
+let target: http.Server | null = null;
+let listener: net.Server | null = null;
+let bound: { host: string; port: number } | null = null;
+
+/** 只有本机能连的地址 */
+export function isLoopbackHost(host: string): boolean {
+  const h = host.trim().toLowerCase().replace(/^\[|\]$/g, "");
+  return h === "localhost" || h === "::1" || /^127\./.test(h);
+}
+
+/** 这条连接是不是从本机来的（直连本机，或者经由本机上的反代 / 隧道） */
+export function fromThisMachine(remote: string | undefined): boolean {
+  if (!remote) return false;
+  return isLoopbackHost(remote.replace(/^::ffff:/, ""));
+}
+
+function open(host: string, port: number): Promise<net.Server> {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer((socket) => target?.emit("connection", socket));
+    const onError = (err: NodeJS.ErrnoException) => {
+      srv.close();
+      if (err.code === "EADDRINUSE") reject(new Error(`端口 ${port} 已经被别的程序占用了`));
+      else if (err.code === "EACCES") reject(new Error(`没有权限监听端口 ${port}（1024 以下的端口一般需要管理员权限）`));
+      else if (err.code === "EADDRNOTAVAIL") reject(new Error(`这台机器上没有地址 ${host}`));
+      else reject(err);
+    };
+    srv.once("error", onError);
+    srv.listen(port, host, () => {
+      srv.off("error", onError);
+      srv.on("error", (err) => console.error("[web] 监听出错:", err));
+      resolve(srv);
+    });
+  });
+}
+
+/**
+ * 关掉监听。不等 close 的回调：它要等这个监听接过的所有连接都断开才回调，
+ * 而连接已经交给 http.Server 了（包括正在请求改地址的这一条），等它会卡死。
+ */
+function shut(srv: net.Server): void {
+  srv.close();
+}
+
+/** 刚关掉的端口要等一下才真正放出来：被占用就稍等重试几次 */
+async function openRetry(host: string, port: number): Promise<net.Server> {
+  for (let i = 0; ; i++) {
+    try {
+      return await open(host, port);
+    } catch (err) {
+      if (i >= 20 || !String((err as Error).message).includes("占用")) throw err;
+      await new Promise((r) => setTimeout(r, 50));
+    }
+  }
+}
+
+/** 启动时第一次监听 */
+export async function listen(server: http.Server, host: string, port: number): Promise<void> {
+  target = server;
+  listener = await open(host, port);
+  bound = { host, port };
+}
+
+/** 换到新的地址 / 端口：新的监听成功了才关旧的；失败抛出能直接给人看的错误 */
+export async function rebind(host: string, port: number): Promise<void> {
+  if (!target) throw new Error("Web 服务没有在运行");
+  if (bound && bound.host === host && bound.port === port) return;
+  const old = listener;
+  // 同一个端口只换地址（比如 0.0.0.0 → 127.0.0.1）：两个监听会冲突，只能先关旧的；
+  // 新的失败了再把旧的开回来
+  if (old && bound?.port === port) {
+    const prev = bound;
+    shut(old);
+    try {
+      listener = await openRetry(host, port);
+    } catch (err) {
+      listener = await openRetry(prev.host, prev.port);
+      throw err;
+    }
+  } else {
+    listener = await open(host, port);
+    if (old) shut(old);
+  }
+  bound = { host, port };
+  console.log(`[web] 已改为监听 http://${host}:${port}`);
+}
+
+export function listening(): { host: string; port: number } | null {
+  return bound;
+}
+
+export function closeListener(): void {
+  const l = listener;
+  listener = null;
+  bound = null;
+  target = null;
+  if (l) shut(l);
+}
+
+/** 这台机器在局域网里的 IPv4 地址（给设置页显示「其他设备用这个地址访问」） */
+export function lanAddresses(): string[] {
+  const out: string[] = [];
+  for (const list of Object.values(os.networkInterfaces())) {
+    for (const a of list ?? []) {
+      // 169.254：没拿到地址时的自分配地址；198.18/15：Clash、Surge 等代理软件虚拟网卡用的，都不是真的局域网地址
+      if (a.family !== "IPv4" || a.internal || /^169\.254\.|^198\.1[89]\./.test(a.address)) continue;
+      out.push(a.address);
+    }
+  }
+  return [...new Set(out)];
+}

package/src/channels/web/server.ts

@@ -8,7 +8,7 @@ import path from "node:path";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import { WebSocketServer, type WebSocket } from "ws";
-import { config } from "../../core/config.js";
+import { config, onConfigChange } from "../../core/config.js";
 import { parseCommand } from "../../core/commands.js";
 import { hub, type EventEnvelope } from "../../core/hub.js";
 import { interactions, type Interaction } from "../../core/interactions.js";
@@ -20,6 +20,7 @@ import { cookies } from "./http.js";
 import { COOKIE } from "./api.js";
 import { HttpError, sameOrigin, SECURITY_HEADERS, sendJson } from "./http.js";
 import { hasSubscriptions, pushToAll } from "./push.js";
+import { closeListener, listen, listening, rebind } from "./listen.js";
 
 const require = createRequire(import.meta.url);
 const webRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../../../web");
@@ -336,6 +337,7 @@ function handleClientMessage(client: Client, raw: string): void {
 let server: http.Server | null = null;
 let wss: WebSocketServer | null = null;
 let heartbeat: NodeJS.Timeout | null = null;
+let stopWatchingListen: (() => void) | null = null;
 
 export async function startWeb(): Promise<void> {
   const { host, port } = config().web;
@@ -426,11 +428,14 @@ export async function startWeb(): Promise<void> {
   interactions.on("updated", broadcastInteraction);
   interactions.on("settled", broadcastInteraction);
 
-  await new Promise<void>((resolve, reject) => {
-    server!.once("error", reject);
-    server!.listen(port, host, () => resolve());
-  });
+  await listen(server, host, port);
   console.log(`[web] 已监听 http://${host}:${port}`);
+  // 配置文件被手改了地址 / 端口：跟着换（设置页保存时已经先换好了，这里会直接跳过）
+  stopWatchingListen = onConfigChange((next) => {
+    const now = listening();
+    if (!now || (now.host === next.web.host && now.port === next.web.port)) return;
+    rebind(next.web.host, next.web.port).catch((err) => console.error("[web] 换监听地址失败:", err instanceof Error ? err.message : err));
+  });
   const token = ensureSetupToken();
   if (token) {
     console.log("=".repeat(56));
@@ -455,6 +460,11 @@ export async function stopWeb(): Promise<void> {
   for (const client of clients) client.ws.close(1001, "服务重启");
   clients.clear();
   wss?.close();
+  stopWatchingListen?.();
+  stopWatchingListen = null;
+  closeListener();
+  // http.Server 自己没有 listen（连接是 listen.ts 交过来的），close 只为断开还连着的
   await new Promise<void>((resolve) => (server ? server.close(() => resolve()) : resolve()));
+  server?.closeAllConnections();
   server = null;
 }

package/src/core/hub.ts

@@ -159,6 +159,8 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
   private locks = new Map<string, Promise<unknown>>();
   /** 最近一次点停止的时间：紧接着冒出来的「被打断」错误是预期内的，不当错误显示 */
   private stoppedAt = new Map<string, number>();
+  /** 正在等 agent 标题的对话，避免一轮轮叠加重试 */
+  private titleSyncing = new Set<string>();
   /**
    * 每条会话的「生命周期代次」：开新会话、分叉、恢复、切 agent、切目录时加一。
    * 渠道收到消息后还要先做异步的事（飞书下载附件），期间会话被换掉了的话，
@@ -497,6 +499,7 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
           recordFooter(holder.session?.sessionId ?? (conv ? agentBinding(conv, agent).sessionId : undefined), result.text, footer);
           this.setInflight(key, (this.inflight.get(key) ?? 1) - 1);
           this.refreshRuntimeOnce(key, liveId);
+          this.syncTitle(key, agent);
         },
         onError: (err) => {
           if (!alive()) return;
@@ -555,6 +558,47 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
     return session;
   }
 
+  /**
+   * 自动标题换成 agent 自己起的。agent 的标题是异步生成的，一轮结束时未必已经有了，
+   * 所以隔一会儿再问几次。每轮结束都会再同步一次：agent 后来改了标题（比如在终端里 /rename）也能跟上。
+   */
+  private syncTitle(key: string, agent: string, attempt = 0): void {
+    const delays = [1_000, 5_000, 15_000, 45_000];
+    const driver = this.drivers.get(agent);
+    if (!driver?.sessionTitle) return;
+    if (attempt === 0) {
+      if (this.titleSyncing.has(key)) return; // 上一轮的重试还在跑
+      this.titleSyncing.add(key);
+    }
+    if (attempt >= delays.length) {
+      this.titleSyncing.delete(key);
+      return;
+    }
+    setTimeout(() => {
+      void (async () => {
+        const conv = getConversation(key);
+        const sessionId = conv && conv.agent === agent ? agentBinding(conv, agent).sessionId : undefined;
+        if (!conv?.titleAuto || !sessionId) return this.titleSyncing.delete(key);
+        const title = await driver.sessionTitle!(sessionId, conv.cwd).catch((err) => {
+          console.error(`[${agent}] 读取会话标题失败:`, err instanceof Error ? err.message : err);
+          return undefined;
+        });
+        // 等待期间用户可能改了名、切了会话
+        const now = getConversation(key);
+        if (!now?.titleAuto || now.agent !== agent || agentBinding(now, agent).sessionId !== sessionId) {
+          return this.titleSyncing.delete(key);
+        }
+        if (!title) return this.syncTitle(key, agent, attempt + 1);
+        this.titleSyncing.delete(key);
+        const clipped = title.slice(0, 80);
+        if (clipped !== now.title) {
+          updateConversation(key, { title: clipped });
+          this.emitEvent(key, { type: "meta" });
+        }
+      })();
+    }, delays[attempt]);
+  }
+
   /** 丢掉活着的会话（不动绑定）。挂着的审批一并取消，否则阻塞的那一轮永远走不完。 */
   async drop(key: string, note: string): Promise<void> {
     interactions.cancelAll(key, note);
@@ -713,7 +757,8 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
     const lastActive = conv.activeAt;
     touchConversation(key);
     if (!conv.title && conv.channel === "web" && input.text.trim()) {
-      updateConversation(key, { title: input.text.trim().replace(/\s+/g, " ").slice(0, 40) });
+      // 先用首条消息占位，第一轮结束后换成 agent 自己生成的短标题（syncTitle）
+      updateConversation(key, { title: input.text.trim().replace(/\s+/g, " ").slice(0, 40), titleAuto: true });
       this.emitEvent(key, { type: "meta" });
     }
     this.emitEvent(key, shown);

package/src/core/store.ts

@@ -28,6 +28,11 @@ export type Conversation = {
   /** 渠道实例：飞书是机器人 id，Web 固定 web */
   channelId: string;
   title?: string;
+  /**
+   * 标题是自动起的（先用首条消息占位，之后换成 agent 生成的标题），可以继续被 agent 的标题覆盖。
+   * 用户手动改过名就清掉，之后不再动它。
+   */
+  titleAuto?: boolean;
   agent: string;
   cwd: string;
   /** cwd 是否用户显式指定。没指定过的跟随 workspaceRoot 变化 */

package/src/core/types.ts

@@ -201,6 +201,8 @@ export interface AgentDriver {
   /** cwd 为 undefined 时列全部目录 */
   listSessions(cwd: string | undefined, limit?: number): Promise<SessionSummary[]>;
   sessionExists(id: string, cwd: string): Promise<boolean>;
+  /** agent 自己给会话起的标题（模型总结的或在别处改过的）；还没生成就返回 undefined，不拿首条消息凑数 */
+  sessionTitle?(id: string, cwd: string): Promise<string | undefined>;
   readHistory(id: string, cwd: string): Promise<HistoryMessage[]>;
   /**
    * 把会话复制出一条新的、返回新会话 id。anchor（HistoryMessage / TurnResult 里的）给了就只保留到

package/web/app.js

@@ -1948,12 +1948,12 @@ function renderInteraction(item) {
             "div",
             { class: "ix-buttons" },
             h("button", { class: "btn accent", onclick: () => ixOp(ix.id, "decide", { decision: "allow-once" }) }, "允许一次"),
-            spec.alwaysLabel
-              ? h("button", { class: "btn", onclick: () => ixOp(ix.id, "decide", { decision: "allow-always" }) }, spec.alwaysLabel)
-              : null,
             spec.allowSession
               ? h("button", { class: "btn", onclick: () => ixOp(ix.id, "decide", { decision: "allow-session" }) }, "本会话全部允许")
               : null,
+            spec.alwaysLabel
+              ? h("button", { class: "btn", onclick: () => ixOp(ix.id, "decide", { decision: "allow-always" }) }, spec.alwaysLabel)
+              : null,
             h("button", { class: "btn danger", onclick: () => ixOp(ix.id, "decide", { decision: "deny" }) }, "拒绝"),
           ),
     );
@@ -3357,6 +3357,89 @@ function generalTab(cfg, panel) {
       ),
     ),
   );
+  panel.append(networkSection(cfg));
+}
+
+/** 只有本机能连的监听地址（和服务端 listen.ts 的判断一致） */
+function loopbackHost(host) {
+  const v = String(host ?? "").trim().toLowerCase().replace(/^\[|\]$/g, "");
+  return v === "localhost" || v === "::1" || /^127\./.test(v);
+}
+
+/**
+ * 网络访问：要不要让局域网里的其他设备打开、监听哪个端口。保存后服务端当场换过去，不用重启；
+ * 端口被占用之类的失败会直接报出来，原来的照常工作。
+ */
+function networkSection(cfg) {
+  const net = cfg.network ?? { lan: [], local: true, listening: null };
+  const box = h("div", { class: "section" });
+  const lanOn = h("input", { type: "checkbox", checked: !loopbackHost(cfg.web.host) });
+  const port = h("input", { type: "number", min: 1, max: 65535, value: cfg.web.port });
+  const hint = h("small", {});
+  // 现在这个页面是不是直接连的这个端口（不是经由反代 / 隧道）
+  const pagePort = Number(location.port || (location.protocol === "https:" ? 443 : 80));
+  const direct = pagePort === cfg.web.port;
+
+  const update = () => {
+    const p = Number(port.value) || cfg.web.port;
+    const lines = [];
+    if (lanOn.checked) {
+      lines.push(
+        net.lan.length
+          ? `局域网里的其他设备用 ${net.lan.map((ip) => `http://${ip}:${p}`).join(" 或 ")} 打开`
+          : "这台机器现在没连局域网，连上后其他设备可以用它的局域网地址打开",
+      );
+    } else {
+      lines.push("只有这台机器自己能打开。这台机器上的反向代理、Cloudflare Tunnel 之类不受影响");
+    }
+    if (!net.local && !lanOn.checked && !loopbackHost(cfg.web.host)) {
+      lines.push("⚠️ 你现在是从局域网里的另一台设备访问的，不能在这里关掉，请到运行 agent-loft 的机器上操作");
+    }
+    if (!direct && p !== cfg.web.port) lines.push(`⚠️ 你是经由反向代理 / 隧道访问的，改端口后要把它指向新端口 ${p}，否则这个页面会打不开`);
+    fill(hint, lines.map((l, i) => [i ? h("br") : null, l]));
+  };
+  lanOn.addEventListener("change", update);
+  port.addEventListener("input", update);
+  update();
+
+  const save = async () => {
+    const p = Number(port.value);
+    if (!Number.isInteger(p) || p < 1 || p > 65535) return toast("端口要是 1 到 65535 之间的整数");
+    // 打开：原来是本机地址就改成所有网卡；原来就是某个具体地址（手改过配置）就保留
+    const host = lanOn.checked ? (loopbackHost(cfg.web.host) ? "0.0.0.0" : cfg.web.host) : "127.0.0.1";
+    if (host === cfg.web.host && p === cfg.web.port) return toast("没有改动");
+    const oldPort = cfg.web.port;
+    let next;
+    try {
+      next = await api("/api/config", { method: "PUT", body: { web: { host, port: p } } });
+    } catch (err) {
+      toast(err.message, 5000);
+      return;
+    }
+    Object.assign(cfg, next);
+    if (p !== oldPort && direct) {
+      // 旧端口已经不再接新连接：带着当前会话跳到新端口
+      const url = new URL(location.href);
+      url.port = String(p);
+      toast(`已改为端口 ${p}，正在跳转…`);
+      // 桌面端里由它改掉存着的服务器地址再重新打开（直接跳过去会被当成外部链接）
+      if (typeof desktop?.serverMoved === "function") desktop.serverMoved(url.origin);
+      else setTimeout(() => (location.href = url.href), 600);
+      return;
+    }
+    toast(p !== oldPort ? `已改为端口 ${p}，记得把反向代理 / 隧道也指向它` : "已保存", p !== oldPort ? 6000 : 2600);
+    box.replaceWith(networkSection(cfg));
+  };
+
+  fill(
+    box,
+    h("h4", {}, "网络访问"),
+    h("label", { class: "check" }, lanOn, "允许局域网内的其他设备访问"),
+    hint,
+    field("端口", port, "改了立即生效，不用重启"),
+    h("div", { class: "row" }, h("button", { class: "btn primary", onclick: () => void save() }, "保存")),
+  );
+  return box;
 }
 
 /**