agent-loft 0.2.29 → 0.2.30

package/web/css/topbar.css

@@ -0,0 +1,205 @@
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
+  min-height: 52px;
+  /*
+   * iOS 26+ 的主屏 PWA 会在页面顶端叠一层系统的模糊渐变（Liquid Glass 边缘效果），CSS 关不掉。
+   * WebKit 只在顶端有「fixed / sticky、铺满宽度、高于 10px、纯色不透明」的元素时跳过它，
+   * 并改用这个颜色延伸到状态栏。所以顶栏要 sticky + 不透明底色，不能是普通的流式元素。
+   */
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+/* 保险：主屏 PWA 里再在最顶端放一条 fixed 的纯色细条（同样是为了让 WebKit 跳过边缘模糊）。
+   层级低于顶栏和侧栏，和顶栏同色，看不出来 */
+.edge-strip {
+  display: none;
+}
+
+@media (display-mode: standalone) and (max-width: 768px) {
+  .edge-strip {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: max(12px, env(safe-area-inset-top));
+    background: var(--bg);
+    pointer-events: none;
+    z-index: 4;
+  }
+}
+
+/* 顶栏下沿：渐变 + 模糊，聊天内容滚上去时柔和地消失在顶栏后面 */
+/*
+ * 顶栏浮在聊天内容上面：内容一直滚到窗口顶端，经过顶栏时先变模糊、再淡出到底色，
+ * 没有分界线（参考 Claude 桌面端）。顶栏自身比按钮行高出一截，多出来的部分就是过渡带。
+ * iOS 主屏 PWA 例外，见下面的媒体查询。
+ */
+.topbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding-bottom: 20px;
+  background: linear-gradient(
+    to bottom,
+    var(--bg) 0%,
+    var(--bg) calc(100% - 22px),
+    color-mix(in srgb, var(--bg) 75%, transparent) calc(100% - 13px),
+    color-mix(in srgb, var(--bg) 30%, transparent) calc(100% - 5px),
+    color-mix(in srgb, var(--bg) 0%, transparent) 100%
+  );
+  pointer-events: none;
+}
+
+.topbar > * {
+  pointer-events: auto;
+}
+
+/* 模糊层：上实下虚，越往下越清楚，和渐变叠在一起 */
+.topbar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  pointer-events: none;
+}
+
+/* 内容让出顶栏按钮行的高度（.main 前缀是为了压过手机端的 padding 简写） */
+.main .messages-inner {
+  padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+.messages {
+  scroll-padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+/* iOS 主屏 PWA：顶端必须是不透明的 sticky 元素才能避开系统的边缘模糊，回到普通顶栏 + 下方淡出 */
+@media (display-mode: standalone) and (max-width: 768px) {
+  .topbar {
+    position: sticky;
+    padding-bottom: 8px;
+    background: var(--bg);
+  }
+
+  .topbar::before {
+    display: none;
+  }
+
+  .topbar::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    height: 24px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      var(--bg),
+      color-mix(in srgb, var(--bg) 60%, transparent) 40%,
+      color-mix(in srgb, var(--bg) 0%, transparent)
+    );
+  }
+
+  .main .messages-inner {
+    padding-top: 16px;
+  }
+}
+
+.topbar .menu-btn {
+  display: none;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  flex-shrink: 0;
+  color: var(--fg-soft);
+}
+
+.icon-btn:hover {
+  background: var(--bg-hover);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.top-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top-title .conv-name {
+  font-size: 15px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 100%;
+  white-space: nowrap;
+}
+
+.pill:hover {
+  background: var(--bg-hover);
+}
+
+
+.pill .sub {
+  color: var(--fg-faint);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pill svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* 桌面端（Agent Loft for macOS）里：顶栏和侧栏顶部按住能拖动窗口，里面的按钮照常能点 */
+.in-desktop .topbar,
+.in-desktop .side-top {
+  -webkit-app-region: drag;
+}
+.in-desktop .topbar :is(button, a, input, select, textarea, label, .conv-name),
+.in-desktop .side-top :is(button, a, input, select, textarea, label) {
+  -webkit-app-region: no-drag;
+}

package/web/index.html

@@ -14,7 +14,17 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="stylesheet" href="/vendor/hljs-light.css" media="(prefers-color-scheme: light)" />
     <link rel="stylesheet" href="/vendor/hljs-dark.css" media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet" href="/style.css" />
+    <!-- 顺序就是层叠顺序，不要随意调换 -->
+    <link rel="stylesheet" href="/css/base.css" />
+    <link rel="stylesheet" href="/css/sidebar.css" />
+    <link rel="stylesheet" href="/css/topbar.css" />
+    <link rel="stylesheet" href="/css/messages.css" />
+    <link rel="stylesheet" href="/css/loader.css" />
+    <link rel="stylesheet" href="/css/composer.css" />
+    <link rel="stylesheet" href="/css/overlay.css" />
+    <link rel="stylesheet" href="/css/settings.css" />
+    <link rel="stylesheet" href="/css/schedule.css" />
+    <link rel="stylesheet" href="/css/mobile.css" />
   </head>
   <body>
     <div id="app"><div class="boot"><span class="loft-loader xl" role="img" aria-label="加载中"><svg viewBox="96 56 320 388" aria-hidden="true"><defs><linearGradient id="boot-g" gradientUnits="userSpaceOnUse" x1="104" y1="104" x2="408" y2="408"><stop offset="0" stop-color="#3b82f6"/><stop offset="1" stop-color="#06b6d4"/></linearGradient></defs><path class="ll-shadow" d="M256 296L404 364L256 432L108 364Z" fill="url(#boot-g)"/><path class="ll-plate" d="M256 252L404 320L256 388L108 320Z" fill="url(#boot-g)"/><path class="ll-star ll-l" d="M152 186C158.46 217.54 158.46 217.54 190 224C158.46 230.46 158.46 230.46 152 262C145.54 230.46 145.54 230.46 114 224C145.54 217.54 145.54 217.54 152 186Z" fill="url(#boot-g)"/><path class="ll-star ll-c" 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(#boot-g)"/><path class="ll-star ll-r" d="M360 186C366.46 217.54 366.46 217.54 398 224C366.46 230.46 366.46 230.46 360 262C353.54 230.46 353.54 230.46 322 224C353.54 217.54 353.54 217.54 360 186Z" fill="url(#boot-g)"/></svg></span></div></div>

package/web/lib/api.js

@@ -0,0 +1,26 @@
+import { showAuth } from "../views/auth.js";
+
+export async function api(path, opts = {}) {
+  const res = await fetch(path, {
+    method: opts.method ?? "GET",
+    credentials: "same-origin",
+    headers: opts.body !== undefined && !(opts.body instanceof Blob) ? { "Content-Type": "application/json" } : opts.headers,
+    body: opts.body === undefined ? undefined : opts.body instanceof Blob ? opts.body : JSON.stringify(opts.body),
+  });
+  let data = null;
+  try {
+    data = await res.json();
+  } catch {
+    // 没有 body
+  }
+  if (res.status === 401 && !path.startsWith("/api/me") && !path.startsWith("/api/login")) {
+    showAuth();
+    throw new Error("请先登录");
+  }
+  if (!res.ok) {
+    const err = new Error(data?.error ?? `请求失败（${res.status}）`);
+    err.status = res.status;
+    throw err;
+  }
+  return data;
+}

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(() => {});
+}