oh-my-agent-web 0.2.0 → 0.4.0

package/dist/server/http/aux-routes.js

@@ -0,0 +1,24 @@
+import { registerCatalogRoutes, registerImportRoutes } from "../providers/import-routes.js";
+import { createCatalogLookup } from "../providers/catalog.js";
+import { testModel } from "../providers/model-test.js";
+import { registerSkillRoutes } from "../skills/skill-routes.js";
+import { registerProjectActions, registerTerminalRoutes } from "../terminal/terminal-routes.js";
+import { registerDirRoutes } from "../files/dir-routes.js";
+import { registerFileRoutes } from "../files/files-routes.js";
+import { registerSessionRoutes } from "../sessions/session-routes.js";
+import { registerPushRoutes } from "../push/push-routes.js";
+export function registerAuxRoutes(app, options) {
+    registerSessionRoutes(app, { deleteSession: options.deleteSession });
+    registerPushRoutes(app, { store: options.pushStore });
+    registerFileRoutes(app, { workspaceOf: options.workspaceOf });
+    registerTerminalRoutes(app, { workspaceOf: options.workspaceOf });
+    registerProjectActions(app, { workspaceOf: options.workspaceOf });
+    registerDirRoutes(app, { workspaceOf: options.workspaceOf });
+    registerSkillRoutes(app);
+    registerImportRoutes(app, { store: options.providerStore, onChange: options.onChange });
+    registerCatalogRoutes(app, {
+        store: options.providerStore,
+        catalog: createCatalogLookup(),
+        testModel: (input) => testModel(input),
+    });
+}

package/dist/server/http/compress.js

@@ -0,0 +1,75 @@
+/**
+ * 文本响应压缩（gzip）+ 静态资源长缓存。
+ *
+ * 为什么自己写而不是引 `compression` 包：依赖预算（ADR-0008/0029）已经很紧，
+ * 而这里只需要「把 text/json/js/css/svg 的响应体 gzip 一下」这一件事，zlib 就够。
+ *
+ * 实测背景：外网打开慢，主包 1.0MB 且**未压缩**、`Cache-Control: public, max-age=0`，
+ * 每次访问都要重新拉一遍 —— 这两条一起改，首屏传输量降到 1/3 左右。
+ */
+import { gzipSync } from "node:zlib";
+const TEXT_TYPE = /text|javascript|json|svg|css|xml/i;
+export function compressText() {
+    return (request, response, next) => {
+        const accept = String(request.headers["accept-encoding"] ?? "");
+        // SSE 与文件字节流不能攒也不能压：
+        //   - SSE 攒着等于永远不发送（终端输出同理）；
+        //   - 视频/音频要支持 Range 拖动，整块进内存会直接把进程吃爆。
+        const streamy = request.path === "/api/events" ||
+            request.path.startsWith("/api/terminal/stream") ||
+            request.path === "/api/files/media" ||
+            request.path === "/api/files/raw";
+        if (!/gzip/i.test(accept) || streamy) {
+            next();
+            return;
+        }
+        const chunks = [];
+        const originalEnd = response.end.bind(response);
+        let handled = false;
+        // 先把响应体攒起来，结束时统一压（单用户工作台，内存里攒一个包没问题）
+        response.write = ((chunk, ...rest) => {
+            if (chunk)
+                chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk)));
+            const callback = rest.find((item) => typeof item === "function");
+            callback?.();
+            return true;
+        });
+        response.end = ((chunk, ...rest) => {
+            if (handled)
+                return response;
+            handled = true;
+            if (chunk && typeof chunk !== "function") {
+                chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk)));
+            }
+            const body = Buffer.concat(chunks);
+            const type = String(response.getHeader("content-type") ?? "");
+            const alreadyEncoded = response.getHeader("content-encoding") !== undefined;
+            // HEAD / 204 / 304 没有实体：不能把 content-length 改成 0（那是在撒谎，
+            // 也会让 HEAD 拿不到真实长度）；express.static 已经设好的长度要留着。
+            const status = response.statusCode;
+            const noBody = request.method === "HEAD" || status === 204 || status === 304;
+            const hadLength = response.getHeader("content-length") !== undefined;
+            if (noBody || alreadyEncoded || !TEXT_TYPE.test(type) || body.length < 1024) {
+                if (!noBody && !(body.length === 0 && hadLength)) {
+                    response.setHeader("content-length", String(body.length));
+                }
+                return originalEnd(body, ...rest);
+            }
+            const gzipped = gzipSync(body, { level: 6 });
+            response.setHeader("content-encoding", "gzip");
+            response.setHeader("vary", "accept-encoding");
+            response.setHeader("content-length", String(gzipped.length));
+            return originalEnd(gzipped, ...rest);
+        });
+        next();
+    };
+}
+/** 带哈希的构建产物可以长缓存：文件名变了 URL 就变，不会读到旧内容 */
+export function immutableAssets() {
+    return (request, response, next) => {
+        if (request.path.startsWith("/assets/")) {
+            response.setHeader("cache-control", "public, max-age=31536000, immutable");
+        }
+        next();
+    };
+}

package/dist/server/http/health-and-static.js

@@ -0,0 +1,33 @@
+/**
+ * HTTP 的「非 API」部分（从 index.ts 抽出：400 行护栏）：健康检查 + 前端静态资源。
+ */
+import express, {} from "express";
+import { PROTOCOL_VERSION } from "../protocol.js";
+import { webVersion } from "../util/version.js";
+export function registerHealthAndStatic(app, options) {
+    // 压缩 + 缓存头由 index.ts 在**注册 API 路由之前**挂（见那里的注释）：
+    // 在这里挂只会覆盖它之后注册的路由，`/api/rpc` 那些大包就永远压不到。
+    app.get("/api/health", (_request, response) => {
+        const counts = options.counts();
+        response.json({
+            ok: true,
+            protocolVersion: PROTOCOL_VERSION,
+            // 跑着的这个进程的版本（omaw status 用它和磁盘上的 package.json 对比）
+            version: webVersion(),
+            workspace: options.workspace,
+            engine: options.engine,
+            // 会话事实源是 pi 的会话存储（ADR-0021 §2）→ 报它的数量
+            sessions: counts.sessions,
+            conversations: counts.conversations,
+        });
+    });
+    if (options.webDist) {
+        app.use(express.static(options.webDist));
+        return;
+    }
+    app.get("/", (_request, response) => {
+        response
+            .type("text/plain")
+            .send(`agent-web 服务已启动\n\n前端开发态请用：npm run dev（vite 在 http://127.0.0.1:${options.devWebPort}）\n`);
+    });
+}

package/dist/server/http/live-routes.js

@@ -0,0 +1,113 @@
+/**
+ * 纯 HTTP 的实时通道（SSE + RPC）。ADR-0032 定通道，ADR-0033 定「每客户端一份会话视图」。
+ *
+ * 两个端点：
+ *   - `GET  /api/events`   SSE 长连接：服务端 → 客户端（快照 / 事件）
+ *   - `POST /api/rpc`      一问一答：客户端 → 服务端（协议不变，还是 ClientRequest）
+ *
+ * 客户端身份：`agent-web-client` cookie。有了它，快照才能按「这个客户端在看哪个会话」生成
+ * （否则两个标签页会互相拽着切换）。cookie 不存在时由 `/api/events` 发一个。
+ */
+import { randomUUID } from "node:crypto";
+import { constants as zlibConstants, createGzip } from "node:zlib";
+export const CLIENT_COOKIE = "agent-web-client";
+/** 每个标签页自己的标识（cookie 是同浏览器共享的，不能用来区分标签页） */
+export const CLIENT_HEADER = "x-agent-client";
+/** 客户端标识：优先请求头 / 查询参数（每个标签页不一样），最后才回落到 cookie */
+export function clientIdOf(input) {
+    const fromHeader = Array.isArray(input.header) ? input.header[0] : input.header;
+    if (typeof fromHeader === "string" && fromHeader.trim() !== "")
+        return fromHeader.trim();
+    if (typeof input.query === "string" && input.query.trim() !== "")
+        return input.query.trim();
+    return clientIdFromCookie(input.cookie);
+}
+/** 从 Cookie 头里取客户端标识 */
+export function clientIdFromCookie(header) {
+    if (!header)
+        return null;
+    for (const part of header.split(";")) {
+        const [name, ...rest] = part.trim().split("=");
+        if (name === CLIENT_COOKIE) {
+            const value = rest.join("=").trim();
+            return value === "" ? null : value;
+        }
+    }
+    return null;
+}
+export function registerLiveRoutes(app, deps) {
+    app.get("/api/events", (request, response) => {
+        const existing = clientIdOf({
+            header: request.headers[CLIENT_HEADER],
+            query: request.query?.client,
+            cookie: request.headers.cookie,
+        });
+        const clientId = existing ?? randomUUID();
+        if (!existing) {
+            response.setHeader("Set-Cookie", `${CLIENT_COOKIE}=${clientId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=31536000`);
+        }
+        // SSE 首帧快照 ~136KB，wifi/外网下很慢；能 gzip 就流式压（不能攒，必须边压边发）
+        const gzip = /gzip/i.test(String(request.headers["accept-encoding"] ?? ""));
+        response.writeHead(200, {
+            "content-type": "text/event-stream; charset=utf-8",
+            // no-store：**不能让任何代理/缓存重放这条响应**。曾经怀疑过反向代理把
+            // 首个客户端的 `Set-Cookie` 或首帧快照缓存后重放给别人（那会让两个设备拿到同一个
+            // 客户端标识 → 互相拽着切会话）。no-transform 顺带禁掉压缩二次加工。
+            "cache-control": "no-store, no-transform",
+            connection: "keep-alive",
+            // nginx 默认会缓冲响应体，SSE 必须显式关掉，否则事件全卡在缓冲里
+            "x-accel-buffering": "no",
+            ...(gzip ? { "content-encoding": "gzip", vary: "accept-encoding" } : {}),
+        });
+        response.flushHeaders?.();
+        // `flush: Z_SYNC_FLUSH` 是必需的，不是调优项：SSE 每一帧都得**立刻**落地。
+        // 默认模式（Z_NO_FLUSH）下 zlib 会把小帧攒在内部缓冲区里，几 KB～几十 KB 的快照
+        // 要等下一大块数据才被推出去 —— 表现就是「切会话 / 新建会话页面不跳、快照像停了」。
+        const compressor = gzip ? createGzip({ level: 6, flush: zlibConstants.Z_SYNC_FLUSH }) : null;
+        compressor?.on("data", (chunk) => response.write(chunk));
+        const send = (text) => (compressor ? compressor.write(text) : response.write(text));
+        const sink = (payload) => send(`data: ${payload}\n\n`);
+        deps.sinks.set(clientId, sink);
+        // 能力协商：带 slim=1 的客户端由服务端决定「会话清单只在变化时带」
+        deps.clientTracker?.setSlim(clientId, request.query?.slim === "1");
+        // 带上客户端标识前缀：排查「两个设备互相拽着切会话」时，一眼能看出它们是不是同一个 id
+        deps.logger.info("SSE 已连接", {
+            clients: deps.sinks.size,
+            slim: request.query?.slim === "1",
+            client: clientId.slice(0, 8),
+            from: existing ? (request.query?.client ? "query" : "cookie") : "new",
+        });
+        // 首屏：立刻给这个客户端一份「属于它自己」的快照
+        sink(JSON.stringify({ type: "event", event: "snapshot", snapshot: deps.snapshotFor(clientId) }));
+        // 心跳：中间代理一般 60s 掐空闲连接，25s 发一次注释行足够保活
+        const beat = setInterval(() => send(": ping\n\n"), 25_000);
+        request.on("close", () => {
+            clearInterval(beat);
+            compressor?.end();
+            // 只删**自己**那条：同一个 clientId 重连时，新连接会覆盖 map 里的条目，
+            // 旧连接的 close 若照删不误，就会把新连接一起干掉（心跳还在、但再也收不到快照/事件）。
+            if (deps.sinks.get(clientId) === sink) {
+                deps.sinks.delete(clientId);
+                deps.clientTracker?.drop(clientId);
+            }
+            deps.logger.info("SSE 已断开", { clients: deps.sinks.size });
+        });
+    });
+    app.post("/api/rpc", async (request, response) => {
+        // 同上：RPC 的结果里带快照，绝不能被缓存重放
+        response.setHeader("cache-control", "no-store");
+        const clientId = clientIdOf({ header: request.headers[CLIENT_HEADER], cookie: request.headers.cookie }) ?? "anonymous";
+        const frames = [];
+        const shim = { send: (payload) => frames.push(payload) };
+        try {
+            await deps.handleMessage(clientId, shim, JSON.stringify(request.body));
+        }
+        catch (error) {
+            deps.logger.info("RPC 处理失败", { message: error instanceof Error ? error.message : String(error) });
+            response.status(500).json({ frames, error: "handler_failed" });
+            return;
+        }
+        // 同步产生的帧（reply / notice）随响应带回；异步事件走 SSE
+        response.json({ frames });
+    });
+}

package/dist/server/http/login-page.js

@@ -0,0 +1,200 @@
+/**
+ * 非本机访问时的登录页（ADR-0031 修订）：自包含单页，不依赖前端构建产物。
+ *
+ * 为什么不再用浏览器原生 Basic 弹窗：
+ *   1. 各处实现不一致（有的不显示中文提示、有的不记住密码、手机上弹出体验很差）；
+ *   2. 弹窗无法表达「登录状态保存 7 天」这类产品语义；
+ *   3. 它只是一张表单 —— 自己渲染 20 行 HTML 就够了，还能顺手控制视觉。
+ *
+ * 约定：
+ *   - 无 JS 时也能用：表单 `method=post` 直接打到 `/api/auth/login`，服务端 303 回 `/`；
+ *   - 页面里不出现任何用户数据（只有品牌名），所以未登录时返回它并不扩大攻击面。
+ */
+import { BRAND_NAME } from "../brand.js";
+/** 极简转义：这里只会插品牌名与错误文案，但仍然按不可信对待 */
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+const STYLES = `
+:root { color-scheme: light; }
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #fff;
+	color: #1b2530;
+	font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+	padding: 24px clamp(20px, 8vw, 48px);
+}
+.login { width: 100%; max-width: 520px; }
+.head { display: flex; align-items: center; gap: 18px; }
+.mark {
+	width: 60px;
+	height: 60px;
+	flex: none;
+	border: 1px solid #e8e8e8;
+	border-radius: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #fff;
+}
+.mark img { width: 44px; height: 44px; display: block; }
+h1 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 500; }
+.sub { margin: 2px 0 0; font-size: 14px; color: #8b95a1; }
+.field {
+	margin-top: 28px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	border: 1px solid #e4e7ec;
+	border-radius: 16px;
+	padding: 5px 5px 5px 18px;
+	background: #fff;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.field:focus-within { border-color: #d3d8df; box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.04); }
+input {
+	flex: 1 1 auto;
+	min-width: 0;
+	height: 44px;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	background: transparent;
+	font: inherit;
+	font-size: 17px;
+	color: inherit;
+}
+input::placeholder { color: #a8b0ba; }
+button {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 44px;
+	padding: 0 16px;
+	border: 0;
+	border-radius: 12px;
+	background: #f1f2f4;
+	color: #2b3440;
+	font: inherit;
+	font-size: 16px;
+	cursor: pointer;
+}
+button:hover { background: #e8eaed; }
+button:active { background: #e0e3e7; }
+button[disabled] { opacity: 0.6; cursor: default; }
+.arrow { font-size: 15px; line-height: 1; }
+.error { margin: 10px 4px 0; font-size: 14px; color: #c62828; }
+.error[hidden] { display: none; }
+`;
+/** 登录页脚本：只做「提交 → 成功就原地刷新 → 失败显示原因」，不引入任何依赖 */
+const SCRIPT = `
+(function () {
+	var form = document.getElementById("form");
+	var input = document.getElementById("password");
+	var button = document.getElementById("submit");
+	var error = document.getElementById("error");
+	if (!form || !input || !button || !error) return;
+
+	function showError(text) {
+		error.textContent = text;
+		error.hidden = false;
+	}
+
+	function fail(text) {
+		showError(text);
+		button.disabled = false;
+		input.select();
+	}
+
+	form.addEventListener("submit", function (event) {
+		event.preventDefault();
+		if (button.disabled) return;
+		var password = input.value;
+		if (!password) {
+			showError("请输入密码");
+			input.focus();
+			return;
+		}
+		error.hidden = true;
+		button.disabled = true;
+		fetch("/api/auth/login", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ password: password }),
+			credentials: "same-origin",
+		})
+			.then(function (response) {
+				if (response.ok) {
+					location.replace(location.pathname + location.search);
+					return;
+				}
+				return response
+					.json()
+					.catch(function () {
+						return null;
+					})
+					.then(function (body) {
+						fail((body && body.error) || "密码不正确");
+					});
+			})
+			.catch(function () {
+				fail("网络异常，请重试");
+			});
+	});
+})();
+`;
+export function renderLoginPage(options = {}) {
+    const brand = escapeHtml(options.brandName ?? BRAND_NAME);
+    const error = options.error ? escapeHtml(options.error) : "";
+    return `<!doctype html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="robots" content="noindex, nofollow" />
+		<title>登录 · ${brand}</title>
+		<link rel="icon" href="/favicon.ico?v=4" sizes="16x16 32x32 48x48" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=4" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png?v=4" />
+		<meta name="theme-color" content="#ffffff" />
+		<style>${STYLES}</style>
+	</head>
+	<body>
+		<main class="login">
+			<div class="head">
+				<span class="mark"><img src="/favicon.svg?v=4" alt="" width="44" height="44" /></span>
+				<div>
+					<h1>${brand}</h1>
+					<p class="sub">登录后继续使用</p>
+				</div>
+			</div>
+			<form class="field" id="form" method="post" action="/api/auth/login">
+				<input
+					id="password"
+					name="password"
+					type="password"
+					placeholder="密码"
+					autocomplete="current-password"
+					aria-label="访问密码"
+					autofocus
+					required
+				/>
+				<button type="submit" id="submit"><span class="arrow" aria-hidden="true">→</span>登录</button>
+			</form>
+			<p class="error" id="error" role="alert"${error ? "" : " hidden"}>${error}</p>
+		</main>
+		<script>${SCRIPT}</script>
+	</body>
+</html>
+`;
+}