agent-loft 0.2.29 → 0.2.31

package/web/lib/dom.js

@@ -0,0 +1,101 @@
+// ---------- 小工具 ----------
+
+export const $app = document.getElementById("app");
+export const isTouch = matchMedia("(pointer: coarse)").matches;
+
+export function h(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs ?? {})) {
+    if (v === undefined || v === null || v === false) continue;
+    if (k === "class") el.className = v;
+    else if (k === "html") el.innerHTML = v;
+    else if (k.startsWith("on") && typeof v === "function") el.addEventListener(k.slice(2), v);
+    else if (k === "style" && typeof v === "object") Object.assign(el.style, v);
+    else el.setAttribute(k, v === true ? "" : v);
+  }
+  for (const c of children.flat(Infinity)) {
+    if (c === null || c === undefined || c === false) continue;
+    el.append(c instanceof Node ? c : document.createTextNode(String(c)));
+  }
+  return el;
+}
+
+/** replaceChildren 会把 null 变成字面量 "null"，统一过滤掉 */
+export function fill(el, ...kids) {
+  el.replaceChildren(...kids.flat(Infinity).filter((k) => k !== null && k !== undefined && k !== false));
+}
+
+export const ICON = {
+  menu: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
+  edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',
+  compose: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/><path d="M18.4 2.6a2 2 0 0 1 2.9 2.9L12.5 14.3 9 15l.7-3.5Z"/></svg>',
+  send: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>',
+  stop: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="1.5"/></svg>',
+  clip: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg>',
+  mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>',
+  more: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>',
+  clock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
+  down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>',
+  gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>',
+  fork: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="7" r="2"/><path d="M6 7v10"/><path d="M18 9c0 5-6 4-11.2 8.6"/></svg>',
+  copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
+  x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>',
+  plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
+  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>',
+  folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h3.6l2 2.2h7.4A2.5 2.5 0 0 1 21 9.7v7.8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5Z"/><path d="M3 10h18"/></svg>',
+  folderOpen: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17.5V7.5A2.5 2.5 0 0 1 5.5 5h3.6l2 2.2h6.4A2.5 2.5 0 0 1 20 9.7V11"/><path d="M3 17.5 5.6 12a2 2 0 0 1 1.8-1.1h13a1 1 0 0 1 .9 1.4l-2.4 6.2a2.2 2.2 0 0 1-2 1.5H5.5A2.5 2.5 0 0 1 3 17.5Z"/></svg>',
+  laptop: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="11" rx="1.5"/><path d="M2 19h20"/></svg>',
+  logo: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 8.5a8 8 0 0 1 13.2 0 8 8 0 0 1 9 9.4 8 8 0 0 1 0 12.2 8 8 0 0 1-9 9.4 8 8 0 0 1-13.2 0 8 8 0 0 1-9-9.4 8 8 0 0 1 0-12.2 8 8 0 0 1 9-9.4Z"/><path d="m17 18 5 5-5 5M25 30h7"/></svg>',
+  feishu:
+    '<svg viewBox="2 4 44 40"><path fill="#00D6B9" d="M11.6 7H27.6C30.9 9.9 32.8 14.7 33.6 17C30.9 18.3 29 20.6 27 24C22.6 16.4 15.6 11 11.6 7Z"/><path fill="#133C9A" d="M17 29C21 29 25 26.9 28 23.4C36 14 41.4 16.8 44 18C38.5 21 40.5 29.6 33 36C27.5 34.8 21.8 32.2 17 29Z"/><path fill="#3370FF" d="M4 16.2C7.2 20.8 12.4 26 17.4 29.4C23 33.2 28.6 35.7 34 35.2C28.9 39.8 23.8 41 19 41C12.5 41 6.9 37.8 4 35.4Z"/></svg>',
+};
+
+/** Claude 的放射状标志：长短不一的圆头射线 */
+ICON.claude = (() => {
+  const lens = [10, 8.2, 9.4, 7.6, 10.4, 8.4, 9.2, 7.8, 10, 8.6, 9.6, 7.4];
+  const rays = lens
+    .map((len, i) => {
+      const a = (i / lens.length) * Math.PI * 2 + 0.12;
+      const x = (r) => (12 + Math.cos(a) * r).toFixed(2);
+      const y = (r) => (12 + Math.sin(a) * r).toFixed(2);
+      return `M${x(1.6)} ${y(1.6)}L${x(len)} ${y(len)}`;
+    })
+    .join("");
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="#D97757" stroke-width="2.3" stroke-linecap="round"><path d="${rays}"/></svg>`;
+})();
+ICON.codex = ICON.logo;
+
+/**
+ * 星星加载动画（回复末尾、打开会话时用）。开屏那个带台面的完整 logo 动画直接写在 index.html 里。
+ * 每个实例的渐变 id 唯一，避免页面里有隐藏的同 id 渐变时画不出来。
+ * 回复流式输出时整条消息会反复重建，动画按全局时钟设负的起始延迟，重建后接着播、不会一抖一抖地重来。
+ */
+let loaderSeq = 0;
+
+/** 只有 logo 中间那颗大星，一边旋转一边放大缩小 */
+const STARS_MS = 1800;
+export function starsLoader(cls = "") {
+  const id = `loft-g${++loaderSeq}`;
+  const el = h("span", {
+    class: `loft-stars${cls ? ` ${cls}` : ""}`,
+    role: "img",
+    "aria-label": "回复中",
+    html: `<svg viewBox="180 82 152 152" aria-hidden="true"><defs><linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="180" y1="82" x2="332" y2="234"><stop offset="0" stop-color="#3b82f6"/><stop offset="1" stop-color="#06b6d4"/></linearGradient></defs><path d="M256 82C268.92 145.08 268.92 145.08 332 158C268.92 170.92 268.92 170.92 256 234C243.08 170.92 243.08 170.92 180 158C243.08 145.08 243.08 145.08 256 82Z" fill="url(#${id})"/></svg>`,
+  });
+  el.style.setProperty("--t", `${-(performance.now() % STARS_MS).toFixed(0)}ms`);
+  return el;
+}
+
+export function agentIcon(id, cls = "agent-icon") {
+  return h("span", { class: cls, html: ICON[id] ?? ICON.laptop });
+}
+
+export function icon(name) {
+  return h("span", { html: ICON[name], style: { display: "inline-grid" } });
+}
+
+export function toast(text, ms = 2600) {
+  const el = h("div", { class: "toast" }, text);
+  document.body.append(el);
+  setTimeout(() => el.remove(), ms);
+}

package/web/lib/markdown.js

@@ -0,0 +1,52 @@
+import DOMPurify from "/vendor/purify.js";
+import hljs from "/vendor/hljs.js";
+import { marked } from "/vendor/marked.js";
+import { h, toast } from "./dom.js";
+
+// ---------- markdown ----------
+
+marked.setOptions({ gfm: true, breaks: true });
+
+export function renderMarkdown(text) {
+  const html = DOMPurify.sanitize(marked.parse(text ?? ""), { ADD_ATTR: ["target"] });
+  const div = h("div", { class: "md", html });
+  for (const a of div.querySelectorAll("a")) {
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+  }
+  for (const pre of div.querySelectorAll("pre")) {
+    const code = pre.querySelector("code");
+    if (!code) continue;
+    const lang = /language-([\w+-]+)/.exec(code.className)?.[1] ?? "";
+    try {
+      if (lang && hljs.getLanguage(lang)) hljs.highlightElement(code);
+      else if (code.textContent.length < 20000) {
+        code.innerHTML = hljs.highlightAuto(code.textContent).value;
+        code.classList.add("hljs");
+      }
+    } catch {
+      // 高亮失败就原样显示
+    }
+    const copy = h("button", { class: "copy-btn", onclick: () => copyText(code.textContent, copy) }, "复制");
+    pre.prepend(h("div", { class: "code-head" }, h("span", {}, lang || "code"), copy));
+  }
+  return div;
+}
+
+export async function copyText(text, btn) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const ta = h("textarea", { style: { position: "fixed", opacity: "0" } });
+    ta.value = text;
+    document.body.append(ta);
+    ta.select();
+    document.execCommand("copy");
+    ta.remove();
+  }
+  if (btn) {
+    const old = btn.textContent;
+    btn.textContent = "已复制";
+    setTimeout(() => (btn.textContent = old), 1200);
+  } else toast("已复制");
+}

package/web/lib/overlay.js

@@ -0,0 +1,144 @@
+import { h, icon } from "./dom.js";
+import { ui } from "../state.js";
+
+export function showMenu(anchor, items) {
+  closeMenu();
+  const menu = h(
+    "div",
+    { class: "menu" },
+    items.map((it) =>
+      it === "sep"
+        ? h("div", { class: "sep" })
+        : h(
+            "button",
+            {
+              class: it.danger ? "danger" : "",
+              onclick: () => {
+                closeMenu();
+                it.onclick();
+              },
+            },
+            it.label,
+          ),
+    ),
+  );
+  document.body.append(menu);
+  // anchor 可以是元素（贴着它下沿弹出），也可以是 {x, y}（右键菜单，贴着鼠标弹出）
+  const r = anchor instanceof Element ? anchor.getBoundingClientRect() : { left: anchor.x, bottom: anchor.y };
+  const w = menu.offsetWidth;
+  menu.style.top = `${Math.max(8, Math.min(r.bottom + (anchor instanceof Element ? 4 : 0), innerHeight - menu.offsetHeight - 8))}px`;
+  menu.style.left = `${Math.max(8, Math.min(r.left, innerWidth - w - 8))}px`;
+  ui.menu = menu;
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onOutsideMenu);
+    document.addEventListener("keydown", onMenuKey);
+    addEventListener("blur", closeMenu);
+  }, 0);
+}
+
+function onMenuKey(e) {
+  if (e.key === "Escape") closeMenu();
+}
+
+function onOutsideMenu(e) {
+  // 点的是打开它的那个按钮：交给按钮自己的 onclick 去收起，免得先关再开
+  if (ui.menu && !ui.menu.contains(e.target) && !ui.menu.anchor?.contains(e.target)) closeMenu();
+}
+
+export function closeMenu() {
+  ui.menu?.remove();
+  ui.menu = null;
+  document.removeEventListener("pointerdown", onOutsideMenu);
+  document.removeEventListener("keydown", onMenuKey);
+  removeEventListener("blur", closeMenu);
+}
+
+export function modal({ title, body, foot, wide, tall }) {
+  const close = () => overlay.remove();
+  const overlay = h(
+    "div",
+    { class: "overlay", onclick: (e) => e.target === overlay && close() },
+    h(
+      "div",
+      { class: `modal${wide ? " wide" : ""}${tall ? " tall" : ""}` },
+      h("div", { class: "modal-head" }, h("h3", {}, title), h("button", { class: "icon-btn", onclick: close }, icon("x"))),
+      body,
+      foot ?? null,
+    ),
+  );
+  document.body.append(overlay);
+  return close;
+}
+
+/** 贴着按钮弹出的小面板（默认在按钮上方、右对齐），点外面关闭。复用 .menu 的关闭逻辑 */
+export function showPopover(anchor, { place = "above", align = "right" } = {}) {
+  closeMenu();
+  const pop = h("div", { class: "menu popover" });
+  pop.anchor = anchor;
+  pop.dataset.place = place;
+  pop.dataset.align = align;
+  document.body.append(pop);
+  ui.menu = pop;
+  setTimeout(() => document.addEventListener("pointerdown", onOutsideMenu), 0);
+  return pop;
+}
+
+export function placePopover(pop, anchor) {
+  if (!pop.isConnected || !anchor.isConnected) return;
+  const r = anchor.getBoundingClientRect();
+  const w = pop.offsetWidth;
+  const left = pop.dataset.align === "left" ? r.left : r.right - w;
+  pop.style.left = `${Math.max(8, Math.min(left, innerWidth - w - 8))}px`;
+  if (pop.dataset.place === "below") {
+    pop.style.top = `${Math.min(r.bottom + 6, innerHeight - pop.offsetHeight - 8)}px`;
+    pop.style.bottom = "";
+  } else {
+    pop.style.bottom = `${innerHeight - r.top + 6}px`;
+    pop.style.top = "";
+  }
+}
+
+/**
+ * 确认弹窗（替代浏览器自带的 confirm），样式和重命名弹窗一致。
+ * 回车确认、Esc / 点外面取消；resolve 成 true / false
+ */
+/** altText：给了就多一个按钮，点它返回 "alt"（确定返回 true，取消返回 false） */
+export function confirmDialog({ title, message, sub, confirmText = "确定", danger = false, altText }) {
+  return new Promise((resolve) => {
+    const ok = h("button", { class: `btn ${danger ? "danger-fill" : "primary"}` }, confirmText);
+    const cancel = h("button", { class: "btn ghost" }, "取消");
+    const alt = altText ? h("button", { class: "btn", onclick: () => done("alt") }, altText) : null;
+    const done = (v) => {
+      overlay.classList.add("leaving");
+      setTimeout(() => overlay.remove(), 120);
+      document.removeEventListener("keydown", onKey, true);
+      resolve(v);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        done(false);
+      } else if (e.key === "Enter" && !e.isComposing) {
+        e.preventDefault();
+        done(true);
+      }
+    };
+    ok.onclick = () => done(true);
+    cancel.onclick = () => done(false);
+    const overlay = h(
+      "div",
+      { class: "overlay dialog-overlay", onclick: (e) => e.target === overlay && done(false) },
+      h(
+        "div",
+        { class: "dialog confirm-dialog" },
+        h("h3", {}, title),
+        sub ? h("p", { class: "dialog-sub" }, sub) : null,
+        message ? h("p", { class: "dialog-msg" }, message) : null,
+        h("div", { class: "dialog-foot" }, cancel, alt, ok),
+      ),
+    );
+    document.body.append(overlay);
+    document.addEventListener("keydown", onKey, true);
+    ok.focus();
+  });
+}

package/web/lib/push.js

@@ -0,0 +1,70 @@
+import { api } from "./api.js";
+import { desktop } from "../state.js";
+
+// ---------- 系统通知（Web Push） ----------
+
+export function pushSupport() {
+  const ios = /iPhone|iPad|iPod/.test(navigator.userAgent);
+  const standalone = window.matchMedia("(display-mode: standalone)").matches || navigator.standalone === true;
+  if (desktop) return { ok: false, why: "桌面端会直接弹出 macOS 系统通知，不需要在这里开启。" };
+  if (!window.isSecureContext) return { ok: false, why: "通知需要 HTTPS 访问（localhost 除外）。请通过 HTTPS 的反向代理地址打开。" };
+  if (ios && !standalone) {
+    return { ok: false, why: "iPhone / iPad 上要先在 Safari 里点「分享 → 添加到主屏幕」，再从桌面图标打开，才能开启通知（需 iOS 16.4+）。" };
+  }
+  if (!("serviceWorker" in navigator) || !("PushManager" in window) || !("Notification" in window)) {
+    return { ok: false, why: "这个浏览器不支持网页推送通知。" };
+  }
+  return { ok: true };
+}
+
+function swReady(ms = 8000) {
+  return Promise.race([
+    navigator.serviceWorker.ready,
+    new Promise((_, reject) => setTimeout(() => reject(new Error("Service Worker 没有就绪，刷新页面再试")), ms)),
+  ]);
+}
+
+export async function currentPushSub() {
+  if (!pushSupport().ok) return null;
+  try {
+    return await (await swReady()).pushManager.getSubscription();
+  } catch {
+    return null;
+  }
+}
+
+export async function enablePush() {
+  // 必须在点击里直接请求权限，iOS 不认异步之后再弹的
+  const permission = await Notification.requestPermission();
+  if (permission !== "granted") throw new Error(permission === "denied" ? "通知权限被拒绝了，请到系统设置里给这个应用打开通知" : "没有授予通知权限");
+  const { publicKey } = await api("/api/push");
+  const reg = await swReady();
+  let sub = await reg.pushManager.getSubscription();
+  if (!sub) {
+    const raw = atob(publicKey.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(publicKey.length / 4) * 4, "="));
+    sub = await reg.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: Uint8Array.from(raw, (c) => c.charCodeAt(0)),
+    });
+  }
+  await api("/api/push/subscribe", { method: "POST", body: { subscription: sub.toJSON() } });
+}
+
+/** 这台设备不再收通知：服务端删掉订阅，浏览器也退订 */
+export async function dropPushSub() {
+  const sub = await currentPushSub();
+  if (!sub) return;
+  await api("/api/push/unsubscribe", { method: "POST", body: { endpoint: sub.endpoint } }).catch(() => {});
+  await sub.unsubscribe().catch(() => {});
+}
+
+/**
+ * 登录后：这个浏览器上的通知订阅如果不是当前账号的（上一个人没退出就换了账号），
+ * 退订掉 —— 推送服务随后会让服务端那条订阅失效，上一个人的通知就不会再推到这里。
+ */
+export async function releaseForeignPushSub() {
+  const sub = await currentPushSub();
+  if (!sub) return;
+  const { subscriptions } = await api("/api/push");
+  if (!subscriptions.some((d) => d.endpoint === sub.endpoint)) await sub.unsubscribe().catch(() => {});
+}

package/web/lib/time.js

@@ -0,0 +1,60 @@
+/** 用时按大小换单位：12.3秒 / 3分12秒 / 1小时5分（和服务端 formatDuration 一致） */
+function formatDuration(ms) {
+  const sec = ms / 1000;
+  if (sec < 60) return `${sec.toFixed(1)}秒`;
+  const total = Math.round(sec);
+  const hr = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (hr > 0) return `${hr}小时${m ? `${m}分` : ""}`;
+  return `${m}分${s ? `${s}秒` : ""}`;
+}
+
+/** 回复进行中的实时用时：整秒跳动，12秒 / 3分05秒 / 1小时05分 */
+export function liveDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hr = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (hr > 0) return `${hr}小时${String(m).padStart(2, "0")}分`;
+  if (m > 0) return `${m}分${String(s).padStart(2, "0")}秒`;
+  return `${s}秒`;
+}
+
+/** 服务端时间 - 本机时间。事件里的 ts 是服务端时钟，算用时要换算过来，免得两边时钟不准 */
+let clockSkew = 0;
+export const serverNow = () => Date.now() + clockSkew;
+export const setServerTime = (serverTime) => (clockSkew = serverTime - Date.now());
+
+/** 所有进行中的用时一秒刷一次，只改文字，不重建消息 */
+setInterval(() => {
+  for (const el of document.querySelectorAll(".ai-elapsed[data-start]")) {
+    el.textContent = liveDuration(serverNow() - Number(el.dataset.start));
+  }
+}, 1000);
+
+/** 老版本记下的脚注是「用时 1234.5s」，显示时也换成时 / 分 / 秒 */
+export function tidyFooter(footer) {
+  return footer?.replace(/用时 ([\d.]+)s/, (_, s) => `用时 ${formatDuration(Number(s) * 1000)}`) ?? "";
+}
+
+/** 回复下面的时间：今天只显示时分，今年显示月日，再早带上年份 */
+export function clockTime(ts) {
+  const d = new Date(ts);
+  const now = new Date();
+  const hm = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  if (d.toDateString() === now.toDateString()) return hm;
+  const md = `${d.getMonth() + 1}月${d.getDate()}日`;
+  return d.getFullYear() === now.getFullYear() ? `${md} ${hm}` : `${d.getFullYear()}年${md} ${hm}`;
+}
+
+export function relTime(ts) {
+  const m = Math.floor((Date.now() - ts) / 60000);
+  if (m < 1) return "刚刚";
+  if (m < 60) return `${m} 分钟前`;
+  const hr = Math.floor(m / 60);
+  if (hr < 24) return `${hr} 小时前`;
+  const d = Math.floor(hr / 24);
+  if (d < 30) return `${d} 天前`;
+  return new Date(ts).toLocaleDateString("zh-CN");
+}

package/web/lib/ws.js

@@ -0,0 +1,236 @@
+import { h } from "./dom.js";
+import { api } from "./api.js";
+import { desktop, S, ui } from "../state.js";
+import { showAuth } from "../views/auth.js";
+import { renderSidebar, scheduleSidebar } from "../views/sidebar.js";
+import { scheduleQuota } from "../views/quota.js";
+import { renderTopbar } from "../views/topbar.js";
+import { applyEvent, openConversation } from "../views/messages.js";
+import { upsertInteraction } from "../views/interaction.js";
+import { setBusy } from "../views/composer.js";
+import { renderScheduled } from "../views/schedule.js";
+
+// ---------- WebSocket ----------
+
+export const WS = {
+  sock: null,
+  rid: 0,
+  waiters: new Map(),
+  backoff: 500,
+  connected: false,
+  pingTimer: null,
+
+  stopped: false,
+  epoch: null,
+  hellos: 0,
+
+  connect() {
+    if (this.stopped) return;
+    if (this.sock && (this.sock.readyState === 0 || this.sock.readyState === 1)) return;
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    const sock = new WebSocket(`${proto}://${location.host}/ws`);
+    this.sock = sock;
+    sock.onopen = () => {
+      this.connected = true;
+      this.backoff = 500;
+      setConnBanner(null);
+      clearInterval(this.pingTimer);
+      this.pingTimer = setInterval(() => this.raw({ t: "ping" }), 25000);
+    };
+    sock.onmessage = (e) => onWsMessage(JSON.parse(e.data));
+    sock.onclose = async (e) => {
+      this.connected = false;
+      clearInterval(this.pingTimer);
+      for (const w of this.waiters.values()) w.reject(new Error("连接已断开"));
+      this.waiters.clear();
+      if (this.sock !== sock) return;
+      // 登录已失效（改了密码、被踢下线）：回登录页，不再重连
+      if (e.code === 4401) {
+        this.stopped = true;
+        showAuth();
+        return;
+      }
+      if (this.stopped) return;
+      // 握手被拒（401）在浏览器里只表现为 1006：问一下是不是登录态没了
+      try {
+        const me = await (await fetch("/api/me", { credentials: "same-origin" })).json();
+        if (!me.authed) {
+          this.stopped = true;
+          showAuth();
+          return;
+        }
+      } catch {
+        // 网络不通，照常重连
+      }
+      if (document.visibilityState === "visible") setConnBanner("连接已断开，正在重连…");
+      setTimeout(() => this.connect(), this.backoff);
+      this.backoff = Math.min(this.backoff * 2, 10000);
+    };
+  },
+
+  raw(msg) {
+    if (this.sock?.readyState === 1) this.sock.send(JSON.stringify(msg));
+  },
+
+  request(msg, timeoutMs = 15000) {
+    return new Promise((resolve, reject) => {
+      if (this.sock?.readyState !== 1) {
+        reject(new Error("还没连上服务器，稍等再试"));
+        return;
+      }
+      const rid = ++this.rid;
+      this.waiters.set(rid, { resolve, reject });
+      this.sock.send(JSON.stringify({ ...msg, rid }));
+      setTimeout(() => {
+        if (this.waiters.delete(rid)) reject(new Error("服务器没有响应"));
+      }, timeoutMs);
+    });
+  },
+
+  subscribe(key, since) {
+    this.raw({ t: "sub", key, since, epoch: this.epoch });
+  },
+
+  /** 告诉服务器我是否在前台、正看着哪条会话：正看着的会话不推系统通知 */
+  presence() {
+    const visible = document.visibilityState === "visible" && document.hasFocus();
+    this.raw({ t: "presence", visible, key: S.current ?? "" });
+  },
+};
+
+for (const ev of ["focus", "blur"]) window.addEventListener(ev, () => WS.presence());
+
+/** 打开 / 切回页面：清掉桌面图标角标和计数（计数由 sw.js 在收到推送时累加） */
+export function clearAppBadge() {
+  if (document.visibilityState !== "visible") return;
+  navigator.clearAppBadge?.().catch(() => {});
+  if ("caches" in window) caches.delete("aim-badge").catch(() => {});
+}
+
+document.addEventListener("visibilitychange", () => {
+  WS.presence();
+  clearAppBadge();
+  // 手机切回前台：连接多半已经被系统掐了，立刻重连而不是等退避
+  if (document.visibilityState === "visible" && WS.sock?.readyState !== 1) {
+    WS.backoff = 300;
+    WS.connect();
+  }
+});
+
+/** 重连后：以服务器上的会话列表和待处理授权为准，清掉本地已失效的 */
+async function resync() {
+  try {
+    const data = await api("/api/bootstrap");
+    S.convs = new Map(data.conversations.map((c) => [c.key, c]));
+    const live = new Set(data.pending.map((i) => i.id));
+    for (const ix of S.pending.values()) {
+      // 快照生成之后才出现的授权，快照里当然没有，不能当成「已在别处处理」
+      if (!ix.settled && !live.has(ix.id) && ix.createdAt <= data.serverTime) markGone(ix);
+    }
+    for (const ix of data.pending) upsertInteraction(ix);
+    renderSidebar();
+  } catch {
+    // 下次重连再说
+  }
+}
+
+/** 本地以为还挂着、服务器上已经没了的授权：断线期间在别处处理掉了，或者服务重启过 */
+function markGone(ix) {
+  upsertInteraction({ ...ix, settled: { settlement: "gone", by: "已在别处处理或已失效", at: Date.now() } });
+}
+
+function onWsMessage(msg) {
+  switch (msg.t) {
+    case "hello": {
+      if (checkServerVersion(msg.version)) return;
+      const restarted = WS.epoch && WS.epoch !== msg.epoch;
+      WS.epoch = msg.epoch;
+      WS.hellos += 1;
+      WS.presence();
+      if (restarted) {
+        // 服务重启过：seq 从头计数了，旧游标全部作废，当前会话整页重拉
+        S.seq.clear();
+        if (S.current) void openConversation(S.current);
+      } else if (S.current) {
+        WS.subscribe(S.current, S.seq.get(S.current) ?? 0);
+      }
+      if (WS.hellos > 1 || restarted) void resync();
+      return;
+    }
+    case "ack": {
+      const w = WS.waiters.get(msg.rid);
+      if (!w) return;
+      WS.waiters.delete(msg.rid);
+      if (msg.ok) w.resolve(msg);
+      else w.reject(new Error(msg.error ?? "操作失败"));
+      return;
+    }
+    case "ev":
+      applyEvent(msg);
+      return;
+    case "replay":
+      if (msg.key !== S.current) return;
+      if (msg.reset) {
+        void openConversation(msg.key);
+        return;
+      }
+      for (const env of msg.events) applyEvent(env);
+      {
+        const live = new Set(msg.pending.map((i) => i.id));
+        for (const ix of S.pending.values()) {
+          if (ix.convKey === msg.key && !ix.settled && !live.has(ix.id)) markGone(ix);
+        }
+      }
+      for (const ix of msg.pending) upsertInteraction(ix);
+      setBusy(msg.busy);
+      return;
+    case "conv":
+      if (S.convs.get(msg.info.key)?.busy && !msg.info.busy) scheduleQuota();
+      S.convs.set(msg.info.key, msg.info);
+      if (msg.info.key === S.current) {
+        renderTopbar();
+        setBusy(msg.info.busy);
+        renderScheduled();
+      }
+      scheduleSidebar();
+      return;
+    case "ix":
+      upsertInteraction(msg.interaction);
+      return;
+    case "tasks":
+      // 自己的定时任务变了：定时任务页开着的话会去重新拉（views/tasks.js）
+      document.dispatchEvent(new Event("aim:tasks"));
+      return;
+    case "notice":
+      // 正看着这条会话就不打扰；普通网页靠 Web Push，这里只给桌面端
+      if (!desktop) return;
+      if (document.visibilityState === "visible" && document.hasFocus() && msg.key === S.current) return;
+      desktop.notify({ key: msg.key, title: msg.title, body: msg.body, tag: msg.tag });
+      return;
+  }
+}
+
+function setConnBanner(text, onclick) {
+  ui.banner?.remove();
+  ui.banner = null;
+  if (!text || !ui.main) return;
+  ui.banner = onclick ? h("button", { class: "conn-banner clickable", onclick }, text) : h("div", { class: "conn-banner" }, text);
+  ui.main.append(ui.banner);
+}
+
+/** 页面加载时连上的服务端版本。服务端升级重启后版本变了，页面上跑的还是旧前端，得刷新 */
+let loadedServerVersion = null;
+
+/** 服务端换了版本：刷新页面换上新前端。返回 true 表示已经在刷新了，后面不用再处理 */
+function checkServerVersion(version) {
+  if (!version) return false;
+  if (!loadedServerVersion) loadedServerVersion = version;
+  if (version === loadedServerVersion) return false;
+  // 输入框里有没发出去的字：别直接刷掉，提示一下让用户自己点
+  if (ui.input?.value.trim()) {
+    setConnBanner(`服务端已升级到 ${version}，点这里刷新页面`, () => location.reload());
+    return false;
+  }
+  location.reload();
+  return true;
+}