agent-loft 0.2.32 → 0.2.34

package/web/css/topbar.css

@@ -155,6 +155,18 @@
   gap: 6px;
 }
 
+.top-title .conv-mode-icon {
+  display: inline-grid;
+  flex-shrink: 0;
+  margin-left: 4px;
+  color: var(--fg-soft);
+}
+
+.top-title .conv-mode-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
 .top-title .conv-name {
   font-size: 15px;
   font-weight: 500;
@@ -203,3 +215,122 @@
 .in-desktop .side-top :is(button, a, input, select, textarea, label) {
   -webkit-app-region: no-drag;
 }
+
+/* ---- 右上角「更多」：菜单项 + 当前会话的 token 用量 ---- */
+.top-menu {
+  min-width: 248px;
+}
+
+.top-menu .pop-item svg {
+  width: 16px;
+  height: 16px;
+  color: var(--fg-soft);
+}
+
+/* 分布的四种颜色：固定顺序（输入、缓存写入、缓存读取、输出），深色模式用为深色底挑的那一档 */
+.usage {
+  --usage-input: #2a78d6;
+  --usage-cwrite: #eb6834;
+  --usage-cread: #1baf7a;
+  --usage-output: #eda100;
+  padding: 6px 12px 8px;
+  font-size: 12px;
+  color: var(--fg-soft);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-color-scheme: dark) {
+  .usage {
+    --usage-input: #3987e5;
+    --usage-cwrite: #d95926;
+    --usage-cread: #199e70;
+    --usage-output: #c98500;
+  }
+}
+
+.usage .u-input {
+  background: var(--usage-input);
+}
+
+.usage .u-cwrite {
+  background: var(--usage-cwrite);
+}
+
+.usage .u-cread {
+  background: var(--usage-cread);
+}
+
+.usage .u-output {
+  background: var(--usage-output);
+}
+
+.usage-empty {
+  color: var(--fg-faint);
+}
+
+.usage-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+
+.usage-head b {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+/* 段与段之间留 2px 底色的缝，两端圆角；很小的一段也至少看得见 */
+.usage-bar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.usage-bar i {
+  flex: 1 1 0;
+  min-width: 3px;
+}
+
+.usage-row {
+  display: grid;
+  grid-template-columns: 8px 1fr auto 3.2em;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.usage-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.usage-name {
+  color: var(--fg);
+  min-width: 0;
+}
+
+.usage-name small {
+  margin-left: 6px;
+  color: var(--fg-faint);
+  font-size: 11px;
+}
+
+.usage-num {
+  color: var(--fg);
+}
+
+.usage-pct {
+  text-align: right;
+  color: var(--fg-faint);
+}
+
+.usage-foot {
+  margin-top: 6px;
+  color: var(--fg-faint);
+}

package/web/lib/dom.js

@@ -39,6 +39,7 @@ export const ICON = {
   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>',
+  chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 20.5l1.6-5A8.4 8.4 0 1 1 21 11.5Z"/></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>',
@@ -69,7 +70,7 @@ ICON.codex = ICON.logo;
 /**
  * 星星加载动画（回复末尾、打开会话时用）。开屏那个带台面的完整 logo 动画直接写在 index.html 里。
  * 每个实例的渐变 id 唯一，避免页面里有隐藏的同 id 渐变时画不出来。
- * 回复流式输出时整条消息会反复重建，动画按全局时钟设负的起始延迟，重建后接着播、不会一抖一抖地重来。
+ * 动画按全局时钟设负的起始延迟：回复被授权卡片分成几段时，新一段的动画接着播、不会一抖一抖地重来。
  */
 let loaderSeq = 0;
 

package/web/lib/markdown.js

@@ -8,29 +8,99 @@ import { h, toast } from "./dom.js";
 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")) {
+  const div = h("div", { class: "md" });
+  patchMarkdown(div, text);
+  return div;
+}
+
+/**
+ * 把 div 里的 markdown 更新成 text，只重画变了的块（段落、列表、代码块…）。
+ * 流式输出时前面的块不再变，每帧只需重画最后一两块；选中的文字、代码块的横向滚动也不会被冲掉。
+ * live = 还在输出：最后一块随时会变，先不高亮，等它定下来再高亮。
+ * 按块拼起来和整段解析的结果一样（marked 的 parser 本来就是逐块拼接的）。
+ */
+export function patchMarkdown(div, text, { live = false } = {}) {
+  const tokens = marked.lexer(text ?? "");
+  const links = JSON.stringify(tokens.links ?? {});
+  // 引用式链接的定义可能在后面才出现（流式输出时地址还会一点点变长），会影响前面的块：定义变了就整个重画
+  if (div._links !== links) {
+    div._links = links;
+    div._blocks = [];
+    div.replaceChildren();
+  }
+  // HTML 块（<details>、<div align> 之类）的开闭标签常常不在同一块里，分开解析会被浏览器提前补上结束标签：
+  // 从第一个 HTML 块起到结尾合成一块
+  const cut = tokens.findIndex((t) => t.type === "html");
+  const chunks = cut < 0 ? tokens.map((t) => [t]) : [...tokens.slice(0, cut).map((t) => [t]), tokens.slice(cut)];
+  const raws = chunks.map((c) => c.map((t) => t.raw).join(""));
+  const blocks = (div._blocks ??= []);
+  const last = chunks.length - 1;
+  let i = 0;
+  // 还在输出时画的块没高亮，只有它仍是正在输出的最后一块才能接着用
+  while (i < blocks.length && i <= last && blocks[i].raw === raws[i] && (blocks[i].final || (live && i === last))) i++;
+  for (const b of blocks.splice(i)) {
+    for (const n of b.nodes) {
+      if (n.nodeType === Node.ELEMENT_NODE) for (const code of n.querySelectorAll("pre code")) lazyHighlight.unobserve(code);
+      n.remove();
+    }
+  }
+  for (; i <= last; i++) {
+    const final = !(live && i === last);
+    const chunk = chunks[i];
+    chunk.links = tokens.links;
+    // 在本页的元素里解析（DOMPurify 直接返回的节点属于另一个 document，搬过来后 IntersectionObserver 就不灵了）
+    const box = document.createElement("div");
+    box.innerHTML = DOMPurify.sanitize(marked.parser(chunk), { ADD_ATTR: ["target"] });
+    decorate(box, final);
+    const nodes = [...box.childNodes];
+    div.append(...nodes);
+    blocks.push({ raw: raws[i], final, nodes });
+  }
+}
+
+/** 链接新窗口打开；代码块加上语言 + 复制按钮的头，滚到附近了再高亮 */
+function decorate(root, highlight) {
+  for (const a of root.querySelectorAll("a")) {
     a.target = "_blank";
     a.rel = "noopener noreferrer";
   }
-  for (const pre of div.querySelectorAll("pre")) {
+  for (const pre of root.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));
+    if (highlight) lazyHighlight.observe(code);
+  }
+}
+
+/**
+ * 高亮（尤其是自动识别语言）很慢：长会话一打开几十个代码块会卡住。
+ * 只在代码块快滚进视口时才高亮；高亮不改变文字和行高，不会让内容跳。
+ */
+const lazyHighlight = new IntersectionObserver(
+  (entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      lazyHighlight.unobserve(e.target);
+      highlight(e.target);
+    }
+  },
+  // 代码块在消息区这种滚动容器里：rootMargin 只放大视口，scrollMargin 才放大滚动容器的裁剪范围（不支持的浏览器忽略它）
+  { rootMargin: "800px 0px", scrollMargin: "800px 0px" },
+);
+
+function highlight(code) {
+  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 {
+    // 高亮失败就原样显示
   }
-  return div;
 }
 
 export async function copyText(text, btn) {

package/web/lib/ws.js

@@ -2,7 +2,7 @@ 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 { applyBootstrap, bootstrapQuery, 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";
@@ -92,13 +92,52 @@ export const WS = {
   },
 
   /** 告诉服务器我是否在前台、正看着哪条会话：正看着的会话不推系统通知 */
+  /**
+   * 告诉服务端「我正看着这条会话」：看着的时候不推送。要页面在前台、有焦点，而且最近还有人在动它 ——
+   * 窗口开着人走开了（电脑上停在这条会话、人在用手机），照样推
+   */
   presence() {
-    const visible = document.visibilityState === "visible" && document.hasFocus();
+    const visible = document.visibilityState === "visible" && document.hasFocus() && Date.now() - lastInput < IDLE_MS;
     this.raw({ t: "presence", visible, key: S.current ?? "" });
   },
 };
 
-for (const ev of ["focus", "blur"]) window.addEventListener(ev, () => WS.presence());
+// 切回窗口本身就算动了一下
+window.addEventListener("focus", () => (markActive(), WS.presence()));
+window.addEventListener("blur", () => WS.presence());
+
+// ---------- 有没有人在动页面 ----------
+// 超过 IDLE_MS 没点、没按键、没滚动，就当人不在了：报一次 presence，服务端照常推送；一动又报回来
+
+const IDLE_MS = 2 * 60_000;
+let lastInput = Date.now();
+let idle = false;
+let idleTimer = 0;
+function markActive() {
+  lastInput = Date.now();
+  idle = false;
+  armIdle();
+}
+function armIdle() {
+  clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => {
+    idle = true;
+    WS.presence();
+  }, IDLE_MS);
+}
+function onInput() {
+  const now = Date.now();
+  // 滚动一秒几十次，重设计时器不用那么勤
+  if (!idle && now - lastInput < 5000) return;
+  lastInput = now;
+  if (idle) {
+    idle = false;
+    WS.presence();
+  }
+  armIdle();
+}
+for (const ev of ["pointerdown", "keydown", "wheel", "touchstart", "scroll"]) window.addEventListener(ev, onInput, { capture: true, passive: true });
+armIdle();
 
 /** 打开 / 切回页面：清掉桌面图标角标和计数（计数由 sw.js 在收到推送时累加） */
 export function clearAppBadge() {
@@ -108,6 +147,7 @@ export function clearAppBadge() {
 }
 
 document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") markActive();
   WS.presence();
   clearAppBadge();
   // 手机切回前台：连接多半已经被系统掐了，立刻重连而不是等退避
@@ -120,8 +160,8 @@ document.addEventListener("visibilitychange", () => {
 /** 重连后：以服务器上的会话列表和待处理授权为准，清掉本地已失效的 */
 async function resync() {
   try {
-    const data = await api("/api/bootstrap");
-    S.convs = new Map(data.conversations.map((c) => [c.key, c]));
+    const data = await api(`/api/bootstrap${bootstrapQuery()}`);
+    applyBootstrap(data);
     const live = new Set(data.pending.map((i) => i.id));
     for (const ix of S.pending.values()) {
       // 快照生成之后才出现的授权，快照里当然没有，不能当成「已在别处处理」
@@ -202,7 +242,7 @@ function onWsMessage(msg) {
       document.dispatchEvent(new Event("aim:tasks"));
       return;
     case "skills":
-      // 技能变了（自己的、装了的、广场上的）：技能页重新拉，@ 补全的缓存作废
+      // 技能变了：设置里的技能页开着就重新拉，@ 补全的缓存作废
       document.dispatchEvent(new Event("aim:skills"));
       return;
     case "notice":

package/web/settings/index.js

@@ -9,19 +9,24 @@ import { agentsTab } from "./agents.js";
 import { feishuTab } from "./feishu.js";
 import { authTab, securityTab } from "./security.js";
 import { memoryTab } from "./memory.js";
+import { skillsTab } from "./skills.js";
+import { usageTab } from "./usage.js";
 import { systemTab, usersTab } from "./users.js";
 
 // ---------- 设置 ----------
 
-export async function openSettings() {
+/** tab：直接打开哪一页（标签名，如「技能」），不给就是第一页 */
+export async function openSettings(tab) {
   const nav = h("div", { class: "settings-nav" });
   const panel = h("div", { class: "settings-body" });
   // 设置弹窗高度固定，切标签页时不跟着内容一伸一缩
   modal({ title: "设置", wide: true, tall: true, body: h("div", { class: "settings" }, nav, panel) });
-  // 普通成员只能管自己的通知、密码和登录设备；其余设置都是管理员的
+  // 普通成员只能管自己的记忆、技能、用量、通知、密码和登录设备；其余设置都是管理员的
   if (!isAdmin()) {
     const tabs = [
       ["记忆", () => memoryTab(panel)],
+      ["技能", () => skillsTab(panel)],
+      ["用量", () => usageTab(panel)],
       ["通知", () => notifyTab(panel)],
       ["账号", () => securityTab(panel)],
     ];
@@ -31,7 +36,7 @@ export async function openSettings() {
       tabs[i][1]();
     };
     nav.append(...tabs.map(([name], i) => h("button", { onclick: () => select(i) }, name)));
-    select(0);
+    select(Math.max(0, tabs.findIndex(([name]) => name === tab)));
     return;
   }
   let cfg;
@@ -45,9 +50,11 @@ export async function openSettings() {
     ["通用", () => generalTab(cfg, panel)],
     ["Agent", () => agentsTab(cfg, panel)],
     ["命令", () => commandsTab(cfg, panel)],
+    ["技能", () => skillsTab(panel)],
     ["飞书机器人", () => feishuTab(cfg, panel)],
     ["授权", () => authTab(panel)],
     ["记忆", () => memoryTab(panel)],
+    ["用量", () => usageTab(panel)],
     ["通知", () => notifyTab(panel)],
     ["账号", () => securityTab(panel)],
     ["用户", () => usersTab(panel)],
@@ -59,5 +66,5 @@ export async function openSettings() {
     tabs[i][1]();
   };
   nav.append(...tabs.map(([name], i) => h("button", { onclick: () => select(i) }, name)));
-  select(0);
+  select(Math.max(0, tabs.findIndex(([name]) => name === tab)));
 }