agent-loft 0.2.15 → 0.2.17

package/package.json

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

package/src/agents/claude/account.ts

@@ -5,6 +5,7 @@
 //
 // 注意：SDK 把它标成了 EXPERIMENTAL，方法名以后会改。改了的话这里只会读失败，
 // /status 少几行而已，不影响别的。
+import { accountKey } from "../../core/account-key.js";
 import type { QuotaInfo } from "../../core/types.js";
 import { cachedProbe, withProbe } from "./probe.js";
 
@@ -22,6 +23,8 @@ type LimitRow = {
 export type ClaudeUsage = {
   subscriptionType: string | null;
   rows: { label: string; short: string; percent: number; resetsAt: string | null; severity?: string }[];
+  /** 账号标识（见 core/account-key.ts）；读不到账号信息时没有 */
+  account?: string;
 };
 
 function labelOf(row: LimitRow): string {
@@ -70,10 +73,16 @@ function normalize(res: {
 }
 
 async function fetchUsage(): Promise<ClaudeUsage | null> {
-  const res = await withProbe((q) =>
-    q.usage_EXPERIMENTAL_MAY_CHANGE_DO_NOT_RELY_ON_THIS_API_YET({ skipBehaviors: true }),
+  // 账号信息顺带在同一个探针进程里问，不多起进程；读不到不影响额度
+  const [res, info] = await withProbe((q) =>
+    Promise.all([
+      q.usage_EXPERIMENTAL_MAY_CHANGE_DO_NOT_RELY_ON_THIS_API_YET({ skipBehaviors: true }),
+      q.accountInfo().catch(() => null),
+    ]),
   );
-  return normalize(res as Parameters<typeof normalize>[0]);
+  const usage = normalize(res as Parameters<typeof normalize>[0]);
+  const account = info?.email ? accountKey("claude", info.email, info.organization) : undefined;
+  return usage && account ? { ...usage, account } : usage;
 }
 
 /**
@@ -107,6 +116,7 @@ export function toQuota(usage: ClaudeUsage | null): QuotaInfo | null {
       return { label: r.label, short: r.short, percent: r.percent, ...(Number.isNaN(at) ? {} : { resetsAt: at }) };
     }),
     ...(usage.rows.some((r) => r.percent >= 100) ? { reached: true } : {}),
+    ...(usage.account ? { account: usage.account } : {}),
   };
 }
 

package/src/agents/codex/account.ts

@@ -4,6 +4,7 @@
 // 而agent-loft的 `/status` 是另一条命令（同名而已），本来只报会话和目录。
 // 用的人不会关心这个区别，他只知道「同样敲 /status，这边少了额度」。
 // 与其解释，不如把它显示出来 —— app-server 本来就给了。
+import { accountKey } from "../../core/account-key.js";
 import type { QuotaInfo } from "../../core/types.js";
 import { appServer } from "./app-server.js";
 
@@ -47,6 +48,28 @@ export async function readRateLimits(): Promise<RateLimits | null> {
   return cache.value;
 }
 
+type Account = { type: "chatgpt"; email: string | null; planType?: string | null } | { type: string } | null;
+
+let accountCache: { at: number; value: string | undefined } | null = null;
+
+/**
+ * 账号标识（见 core/account-key.ts）：只有 ChatGPT 登录、拿得到邮箱时才有。
+ * app-server 常驻着，问一下很便宜；和额度同样缓存 60 秒，换了账号一分钟内就能反映出来。
+ */
+export async function readAccountKey(): Promise<string | undefined> {
+  if (accountCache && Date.now() - accountCache.at < CACHE_MS) return accountCache.value;
+  let value: string | undefined;
+  try {
+    const res = await appServer.call<{ account?: Account }>("account/read", {});
+    const acc = res.account;
+    if (acc?.type === "chatgpt" && "email" in acc) value = accountKey("codex", acc.email, acc.planType);
+  } catch (err) {
+    console.error("[账号] 读取失败:", err instanceof Error ? err.message : err);
+  }
+  accountCache = { at: Date.now(), value };
+  return value;
+}
+
 /** 300 → 「5h」，10080 → 「7d」 */
 function windowShort(mins: number): string {
   if (mins % (60 * 24) === 0) return `${mins / (60 * 24)}d`;
@@ -55,7 +78,7 @@ function windowShort(mins: number): string {
 }
 
 /** 侧栏用的结构化额度 */
-export function toQuota(limits: RateLimits | null): QuotaInfo | null {
+export function toQuota(limits: RateLimits | null, account?: string): QuotaInfo | null {
   if (!limits) return null;
   const windows = [limits.primary, limits.secondary]
     .filter((w): w is UsageWindow => !!w)
@@ -73,6 +96,7 @@ export function toQuota(limits: RateLimits | null): QuotaInfo | null {
     windows,
     ...(extra ? { extra } : {}),
     ...(limits.rateLimitReachedType ? { reached: true } : {}),
+    ...(account ? { account } : {}),
   };
 }
 

package/src/agents/codex/driver.ts

@@ -2,7 +2,7 @@
 //
 // 不用 @openai/codex-sdk：它是 `codex exec --json` 的薄封装，没有任何审批回调。
 import { appServer } from "./app-server.js";
-import { describeRateLimits, readRateLimits, toQuota } from "./account.js";
+import { describeRateLimits, readAccountKey, readRateLimits, toQuota } from "./account.js";
 import { diagnose } from "./errors.js";
 import { CodexSession, summarize } from "./session.js";
 import { config, onConfigChange } from "../../core/config.js";
@@ -209,7 +209,8 @@ export class CodexDriver implements AgentDriver {
   }
 
   async quota(): Promise<QuotaInfo | null> {
-    return toQuota(await readRateLimits());
+    const [limits, account] = await Promise.all([readRateLimits(), readAccountKey()]);
+    return toQuota(limits, account);
   }
 
   diagnose(err: unknown) {

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 {
@@ -534,12 +570,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 秒），这里并发问一遍，单个失败 / 超时不影响别的
@@ -565,8 +603,10 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
     return;
   }
   if (p === "/api/quota" && method === "GET") {
+    // ?agent=claude,codex：只问这几个。桌面端连着多台同账号的服务器时，同一个账号只在一台上问
+    const only = url.searchParams.get("agent")?.split(",").filter(Boolean);
     const results = await Promise.all(
-      hub.enabledAgents().map(async (d) => {
+      hub.enabledAgents().filter((d) => !only || only.includes(d.id)).map(async (d) => {
         if (!d.quota) return null;
         try {
           const quota = await Promise.race([

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/account-key.ts

@@ -0,0 +1,13 @@
+// 额度对应的账号标识：桌面端连着多台服务器时，靠它认出「这几台登的是同一个账号」，
+// 同一个账号只问一台，结果分给其他几台（额度是跟着账号走的，问哪台都一样）。
+//
+// 只给哈希、不给原文：接口返回里不出现邮箱。不同服务器上同一个账号算出来的值相同，
+// 这正是要的效果，所以不加盐。
+import { createHash } from "node:crypto";
+
+/** 没有能认出账号的信息（API key、第三方云之类）时返回 undefined，桌面端就照旧逐台去问 */
+export function accountKey(agent: string, ...parts: (string | null | undefined)[]): string | undefined {
+  if (!parts[0]) return undefined;
+  const text = [agent, ...parts.map((p) => (p ?? "").trim().toLowerCase())].join("\n");
+  return createHash("sha256").update(text).digest("hex").slice(0, 16);
+}

package/src/core/types.ts

@@ -116,6 +116,11 @@ export type QuotaInfo = {
   extra?: string;
   /** 已撞上限 */
   reached?: boolean;
+  /**
+   * 账号标识（邮箱等信息的哈希，见 core/account-key.ts）。多台服务器登的同一个账号时相同，
+   * 桌面端据此只问其中一台。认不出账号时不给。
+   */
+  account?: string;
 };
 
 // ---------- agent ----------

package/web/app.js

@@ -265,6 +265,8 @@ const ui = {};
  * 桌面端收不到 Web Push，系统通知、Dock 角标、菜单栏的待处理数都交给它。
  */
 const desktop = window.agentLoftDesktop ?? null;
+/** 新版桌面端：额度由它统一查好推过来，页面自己不查（老版本桌面端没有 onQuota，照旧自己查） */
+const desktopQuota = typeof desktop?.onQuota === "function";
 // 桌面端里：顶栏、侧栏顶部可以按住拖动窗口（样式见 style.css 的 .in-desktop）
 if (desktop) document.documentElement.classList.add("in-desktop");
 
@@ -535,7 +537,8 @@ async function boot() {
   renderLayout();
   reportDesktop();
   WS.connect();
-  void loadQuota();
+  if (desktopQuota) desktop.onQuota(applyDesktopQuota);
+  else void loadQuota();
   const fromHash = decodeURIComponent(location.hash.slice(1));
   // 地址里带了会话就打开它；否则打开「最近」里最近活跃的那个对话，一个都没有才进新对话页
   const latest = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt)[0];
@@ -666,12 +669,19 @@ function stopMarquee() {
 //   - 有会话跑完一轮：10 秒后拉；若那时服务端缓存还没过期，就推迟到过期之后，保证拿到新数据；
 //   - 切回前台：距上次超过一个刷新间隔就拉；
 //   - 点一下额度区域：立刻拉（可能拿到 60 秒内的缓存）。
+// 在桌面端里（desktopQuota）以上全都不做：桌面端统一去查（同一个账号的多台服务器只问一台），
+// 查好推过来；点一下额度区域是请桌面端去刷新。
 
 const quotaState = { data: null, at: 0, loading: false, timer: 0, idle: 0 };
 const QUOTA_SERVER_CACHE = 60_000;
 const quotaInterval = () => (S.quotaRefreshMin ?? 10) * 60_000;
 
 async function loadQuota() {
+  if (desktopQuota) {
+    ui.quota?.classList.add("loading");
+    desktop.refreshQuota();
+    return;
+  }
   if (quotaState.loading) return;
   quotaState.loading = true;
   ui.quota?.classList.add("loading");
@@ -690,10 +700,20 @@ async function loadQuota() {
   }
 }
 
+/** 桌面端推来的额度。查失败（error）时保留旧数据 */
+function applyDesktopQuota(payload) {
+  if (Array.isArray(payload?.quotas) && !payload.error) {
+    quotaState.data = payload.quotas;
+    quotaState.at = payload.at || Date.now();
+  }
+  ui.quota?.classList.remove("loading");
+  renderQuota();
+}
+
 /** 空闲定时：每次拉完重新计时，所以刚因为跑完一轮拉过，就不会紧接着又拉 */
 function scheduleIdleQuota() {
   clearTimeout(quotaState.idle);
-  if (!quotaInterval()) return;
+  if (desktopQuota || !quotaInterval()) return;
   quotaState.idle = setTimeout(() => {
     // 页面不可见就先不拉，等切回来再说
     if (document.visibilityState === "visible") void loadQuota();
@@ -702,13 +722,15 @@ function scheduleIdleQuota() {
 
 /** 一轮跑完：10 秒后拉；服务端缓存那时还没过期就推迟到过期之后 */
 function scheduleQuota() {
+  // 桌面端里：它从页面报的运行数看出跑完了一轮，自己会去查
+  if (desktopQuota) return;
   const wait = Math.max(10_000, quotaState.at + QUOTA_SERVER_CACHE + 1000 - Date.now());
   clearTimeout(quotaState.timer);
   quotaState.timer = setTimeout(() => void loadQuota(), wait);
 }
 
 document.addEventListener("visibilitychange", () => {
-  if (document.visibilityState !== "visible" || !ui.quota || !quotaInterval()) return;
+  if (desktopQuota || document.visibilityState !== "visible" || !ui.quota || !quotaInterval()) return;
   if (Date.now() - quotaState.at >= quotaInterval()) void loadQuota();
 });
 
@@ -3308,7 +3330,13 @@ function generalTab(cfg, panel) {
       field("工作目录（workspace）", root, "所有会话的默认目录，/cd 只能在它之内"),
       field("授权等待超时（分钟）", approval, "超时按拒绝处理"),
       field("会话闲置多久自动开新会话（小时）", ttl, "0 表示永不过期"),
-      field("额度自动刷新间隔（分钟）", quotaMin, "侧栏底部的额度，空闲时多久刷新一次；0 表示不自动刷新（跑完一轮、点击额度区域仍会刷新）"),
+      field(
+        "额度自动刷新间隔（分钟）",
+        quotaMin,
+        desktopQuota
+          ? "在桌面端里额度由桌面端统一刷新，以桌面端设置里的间隔为准；这里只对浏览器打开的页面生效"
+          : "侧栏底部的额度，空闲时多久刷新一次；0 表示不自动刷新（跑完一轮、点击额度区域仍会刷新）",
+      ),
       h(
         "div",
         { class: "row" },
@@ -3329,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;
 }
 
 /**