agent-loft 0.2.32 → 0.2.34

package/web/views/sidebar.js

@@ -1,4 +1,5 @@
 import { fill, h, icon, ICON, toast } from "../lib/dom.js";
+import { api } from "../lib/api.js";
 import { desktop, S, ui } from "../state.js";
 import { baseName } from "./topbar.js";
 import { newDraft, openConversation } from "./messages.js";
@@ -190,7 +191,7 @@ function agentShort(id) {
   return id === "claude" ? "Claude" : id === "codex" ? "Codex" : id;
 }
 
-/** 侧栏里展开 / 收起的状态：哪些项目目录展开了、「最近」和各目录是否显示全部 */
+/** 侧栏里展开 / 收起的状态：哪些项目目录展开了、哪些分组折叠了、目录的顺序（more 是老版本的，不再用） */
 export const sideState = { open: [], more: [], folded: [], order: [], ...JSON.parse(localStorage.getItem("aim.side") || "{}") };
 
 /**
@@ -249,6 +250,95 @@ function toggleSide(list, id) {
 let autoOpenedFor = null;
 const RECENT_LIMIT = 10;
 const PROJECT_LIMIT = 5;
+/** 「展开显示」一次多显示几条 */
+const MORE_STEP = 10;
+
+// ---------- 分页（服务端见 channels/web/conv-pages.ts） ----------
+// 打开页面只拿「最近」的前 10 条、展开着的目录各自的前 5 条（一条 = 主对话连同它的分叉），
+// 正在跑的、等你处理的、每个飞书机器人最近的一条也都在；点「展开显示」多显示 10 条，本地不够再按页拉。
+// 新出现的、变活跃的会话经 WebSocket 的 conv 消息补进 S.convs。
+// next：下一页的游标；null = 没有更多了；undefined = 这个目录还没拉过。
+
+/** full：老版本服务端一次给了全部，不用再拉 */
+const pages = { recent: { show: RECENT_LIMIT, next: null, loading: false }, dirs: new Map(), dirAt: new Map(), full: false };
+
+function dirState(dir) {
+  let st = pages.dirs.get(dir);
+  if (!st) pages.dirs.set(dir, (st = { show: PROJECT_LIMIT, next: pages.full ? null : undefined, loading: false }));
+  return st;
+}
+
+/** /api/bootstrap 的参数：按现在显示了多少条要（重连后整份换掉时，已经展开的不会缩回去） */
+export function bootstrapQuery() {
+  const q = new URLSearchParams({ recent: String(pages.recent.show), open: JSON.stringify(sideState.open.map((d) => [d, dirState(d).show])) });
+  // 正开着的会话；刚打开页面时是地址里带的那条（可能在后面几页）
+  const current = S.current ?? decodeURIComponent(location.hash.slice(1));
+  if (current) q.set("current", current);
+  return `?${q}`;
+}
+
+export function applyBootstrap(data) {
+  S.convs = new Map(data.conversations.map((c) => [c.key, c]));
+  pages.full = !data.sidebar;
+  pages.recent.next = data.sidebar?.recent.next ?? null;
+  pages.dirAt = new Map((data.sidebar?.dirs ?? []).map((d) => [d.dir, d.at]));
+  const fetched = new Map((data.sidebar?.dirs ?? []).filter((d) => "next" in d).map((d) => [d.dir, d.next]));
+  for (const [dir, st] of pages.dirs) {
+    // 这次要了的（展开着的）目录用新游标；没要的下次展开时重新拉
+    st.next = pages.full ? null : sideState.open.includes(dir) ? (fetched.get(dir) ?? null) : undefined;
+  }
+  for (const [dir, next] of fetched) dirState(dir).next = next;
+}
+
+/** 拉下一页，合进 S.convs。失败了不自动重试（否则每次重绘都去拉），点「展开显示」再试 */
+async function fetchPage(st, params) {
+  if (st.loading) return;
+  st.loading = true;
+  st.failed = false;
+  try {
+    const q = new URLSearchParams(params);
+    if (st.next) {
+      q.set("at", String(st.next.at));
+      q.set("key", st.next.key);
+    }
+    const data = await api(`/api/conversations/page?${q}`);
+    for (const c of data.conversations) S.convs.set(c.key, c);
+    st.next = data.next;
+  } catch (err) {
+    st.failed = true;
+    toast(`会话列表加载失败：${err.message}`);
+  } finally {
+    st.loading = false;
+    scheduleSidebar();
+  }
+}
+
+/**
+ * 只显示连续拉到的那一段：比下一页游标还旧的（正在跑的、地址里带的老会话先拉来了），
+ * 中间还隔着没拉的，先不显示，免得顺序看着跳
+ */
+const loadedPrefix = (st, list) => (st.next ? list.filter((x) => x.at >= st.next.at) : list);
+
+/** 「展开显示」「收起」：count 是能显示的条数，limit 是默认显示几条 */
+function moreButton(st, count, limit, load) {
+  if (st.loading) return h("button", { class: "conv-more", disabled: true }, "加载中…");
+  if (count > st.show || st.next) {
+    return h(
+      "button",
+      {
+        class: "conv-more",
+        onclick: () => {
+          st.show += MORE_STEP;
+          if (count < st.show && st.next) void load(Math.max(MORE_STEP, st.show - count));
+          renderSidebar();
+        },
+      },
+      "展开显示",
+    );
+  }
+  if (st.show > limit) return h("button", { class: "conv-more", onclick: () => ((st.show = limit), renderSidebar()) }, "收起");
+  return null;
+}
 
 /** 待处理的授权 / 提问和正在跑的会话，报给桌面端显示在菜单栏里 */
 export function reportDesktop() {
@@ -268,7 +358,6 @@ export function renderSidebar() {
   }
   sidebarStale = false;
   ui.tasksNav?.classList.toggle("active", S.view === "tasks");
-  ui.skillsNav?.classList.toggle("active", S.view === "skills");
   const askKeys = new Set([...S.pending.values()].filter((i) => !i.settled).map((i) => i.convKey));
   const visible = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt);
   const cur = S.current ? S.convs.get(S.current) : null;
@@ -282,9 +371,6 @@ export function renderSidebar() {
     closeSide();
     if (key !== S.current) void openConversation(key);
   };
-  const more = (list, id, expanded) =>
-    h("button", { class: "conv-more", onclick: () => toggleSide(list, id) }, expanded ? "收起" : "展开显示");
-
   // 一行会话。orphan：是分叉出来的、但父对话不在这一组里（删了 / 在别的目录），没有连线可画，用图标标一下
   const convRow = (c, cls, detail, orphan) =>
     h(
@@ -298,6 +384,8 @@ export function renderSidebar() {
       orphan ? h("span", { class: "brand-icon lead fork-mark", html: ICON.fork }) : null,
       // 定时任务的专用对话
       c.taskId ? h("span", { class: "brand-icon lead task-mark", title: "定时任务的对话", html: ICON.clock }) : null,
+      // 聊天模式的对话
+      c.mode === "chat" ? h("span", { class: "brand-icon lead chat-mark", title: "聊天模式", html: ICON.chat }) : null,
       h("span", { class: "title" }, convTitle(c)),
       status([c.key]),
     );
@@ -329,13 +417,15 @@ export function renderSidebar() {
     });
   }
   recent.sort((a, b) => b.at - a.at);
-  const recentAll = sideState.more.includes("@recent");
   const recentFolded = sideState.folded.includes("@recent");
   const nodes = [groupHead("最近", "@recent", recentFolded)];
   if (!recentFolded) {
-    if (recent.length === 0) nodes.push(h("div", { class: "conv-empty" }, "还没有会话"));
-    nodes.push(...recent.slice(0, recentAll ? recent.length : RECENT_LIMIT).map((r) => r.el));
-    if (recent.length > RECENT_LIMIT) nodes.push(more("more", "@recent", recentAll));
+    const rs = pages.recent;
+    const shown = loadedPrefix(rs, recent);
+    if (shown.length === 0 && !rs.loading) nodes.push(h("div", { class: "conv-empty" }, "还没有会话"));
+    nodes.push(...shown.slice(0, rs.show).map((r) => r.el));
+    const btn = moreButton(rs, shown.length, RECENT_LIMIT, (limit) => fetchPage(rs, { scope: "recent", limit: String(limit) }));
+    if (btn) nodes.push(btn);
   }
 
   // ---- 项目：Web 会话按工作目录分组，目录按最近活跃排序 ----
@@ -352,10 +442,13 @@ export function renderSidebar() {
       localStorage.setItem("aim.side", JSON.stringify(sideState));
     }
   }
+  // 目录行要全部显示：服务端给了每个目录最近的活跃时间，加上本地已有的（刚建的、刚变活跃的）
+  const dirAt = new Map(pages.dirAt);
+  for (const [dir, convs] of byDir) dirAt.set(dir, Math.max(dirAt.get(dir) ?? 0, convs[0].activeAt));
   const projFolded = sideState.folded.includes("@projects");
-  if (byDir.size) nodes.push(groupHead("项目", "@projects", projFolded));
-  projDirs = orderProjectDirs([...byDir.keys()]);
-  if (byDir.size && !projFolded) {
+  if (dirAt.size) nodes.push(groupHead("项目", "@projects", projFolded));
+  projDirs = orderProjectDirs([...dirAt.keys()].sort((a, b) => dirAt.get(b) - dirAt.get(a)));
+  if (dirAt.size && !projFolded) {
     const clearDrop = () => ui.convList.querySelectorAll(".drop-before, .drop-after").forEach((el) => el.classList.remove("drop-before", "drop-after"));
     const endDrag = () => {
       dirDrag = null;
@@ -363,9 +456,8 @@ export function renderSidebar() {
       if (sidebarStale) renderSidebar();
     };
     for (const dir of projDirs) {
-      const convs = byDir.get(dir);
+      const convs = byDir.get(dir) ?? [];
       const expanded = sideState.open.includes(dir);
-      const showAll = sideState.more.includes(dir);
       // 鼠标在目标行的上半截就插到它前面，下半截插到后面
       const isAfter = (e, row) => {
         const r = row.getBoundingClientRect();
@@ -436,12 +528,17 @@ export function renderSidebar() {
         ),
       );
       if (!expanded) continue;
+      // 刚展开、还没拉过这个目录：去拉第一页（本地可能已经有几条正在跑的，先显示着）
+      const st = dirState(dir);
+      const load = (limit) => fetchPage(st, { scope: "dir", dir, limit: String(limit) });
+      if (st.next === undefined && !st.loading && !st.failed) void load(st.show);
       // 「展开显示」按主对话算条数，分叉跟着主对话一起出现
-      const forest = forkForest(convs);
-      for (const node of forest.slice(0, showAll ? forest.length : PROJECT_LIMIT)) {
+      const forest = loadedPrefix(st, forkForest(convs));
+      for (const node of forest.slice(0, st.show)) {
         nodes.push(renderForkNode(node, (c, orphan) => convRow(c, " sub", agentLabel(c.agent), orphan), " in-proj"));
       }
-      if (forest.length > PROJECT_LIMIT) nodes.push(h("div", { class: "sub-more" }, more("more", dir, showAll)));
+      const btn = moreButton(st, forest.length, PROJECT_LIMIT, load);
+      if (btn) nodes.push(h("div", { class: "sub-more" }, btn));
     }
   }
   // 重绘会换掉 DOM：如果鼠标正停在某个标题上，重绘后接着滚

package/web/views/topbar.js

@@ -1,10 +1,11 @@
 import { agentIcon, fill, h, icon, ICON, toast } from "../lib/dom.js";
 import { api } from "../lib/api.js";
 import { relTime } from "../lib/time.js";
-import { S, ui } from "../state.js";
+import { desktop, desktopMenu, desktopSettings, S, ui } from "../state.js";
 import { agentLabel, convTitle, openSide } from "./sidebar.js";
 import { closeMenu, confirmDialog, modal, placePopover, showMenu, showPopover } from "../lib/overlay.js";
 import { newDraft, openConversation } from "./messages.js";
+import { openSettings } from "./layout.js";
 import { openSchedule } from "./schedule.js";
 import { changeCwd, deleteConv, doAction, forkConversation, openModelPicker, renameConv, switchAgent } from "./conv-actions.js";
 
@@ -12,29 +13,168 @@ import { changeCwd, deleteConv, doAction, forkConversation, openModelPicker, ren
 
 export function renderTopbar() {
   const c = S.current ? S.convs.get(S.current) : null;
-  // 定时任务页、技能页：只有标题，模式切换、「更多」都是对话用的
-  const tasks = S.view === "tasks" || S.view === "skills";
+  const tasks = S.view === "tasks";
   fill(ui.topbar,
     h("button", { class: "icon-btn menu-btn", onclick: openSide, title: "会话列表" }, icon("menu")),
     h(
       "div",
       { class: "top-title" },
-      tasks ? h("span", { class: "conv-name" }, S.view === "skills" ? "技能" : "定时任务") : c ? h("span", { class: "conv-name", title: convTitle(c) }, convTitle(c)) : null,
+      tasks
+        ? h("span", { class: "conv-name" }, "定时任务")
+        : c
+          ? [
+              // 聊天模式的对话：标题前面挂个聊天图标
+              c.mode === "chat" ? h("span", { class: "conv-mode-icon", title: "聊天模式", html: ICON.chat }) : null,
+              h("span", { class: "conv-name", title: convTitle(c) }, convTitle(c)),
+            ]
+          : null,
     ),
-    tasks ? null : ui.modeSlot,
-    tasks ? null : h("button", { class: "icon-btn top-more", title: "更多", onclick: (e) => openTopMore(e.currentTarget) }, icon("more")),
+    // 桌面端里这个菜单放到桌面端顶栏的「更多」里了
+    desktopMenu ? null : h("button", { class: "icon-btn top-more", title: "更多", onclick: (e) => openTopMore(e.currentTarget) }, icon("more")),
   );
   renderContext();
+  syncDesktopMenu();
 }
 
-/** 顶栏右上角「更多」 */
+/**
+ * 右上角「更多」里的项。对话页（含新对话）有聊天模式、定时发送；设置哪个页面都有，
+ * 桌面端自己的「更多」里已经有每台服务器的设置时不放
+ */
+function topMenuItems() {
+  const items = [];
+  if (!S.view) {
+    const c = S.current ? S.convs.get(S.current) : null;
+    const chat = (c ? (c.mode ?? "work") : S.draftMode) === "chat";
+    items.push({ id: "mode", label: "聊天模式", icon: "chat", checked: chat, onclick: () => void toggleMode() });
+    items.push({ id: "schedule", label: "定时发送", icon: "clock", onclick: () => openSchedule() });
+  }
+  if (!desktopSettings) {
+    if (items.length) items.push("sep");
+    items.push({ id: "settings", label: "设置", icon: "gear", onclick: () => openSettings() });
+  }
+  return items;
+}
+
+/** 顶栏右上角「更多」：菜单项 + 最下面当前会话的 token 用量 */
 function openTopMore(anchor) {
   if (ui.menu?.anchor === anchor) return closeMenu();
-  showMenu(anchor, [{ label: "定时发送…", onclick: () => openSchedule() }]);
-  ui.menu.anchor = anchor;
-  // 贴着按钮右边对齐，别超出屏幕
-  const r = anchor.getBoundingClientRect();
-  ui.menu.style.left = `${Math.max(8, r.right - ui.menu.offsetWidth)}px`;
+  const pop = showPopover(anchor, { place: "below", align: "right" });
+  pop.classList.add("top-menu");
+  const usage = renderUsage();
+  fill(
+    pop,
+    topMenuItems().map((it) =>
+      it === "sep"
+        ? h("div", { class: "sep" })
+        : h(
+            "button",
+            { class: `pop-item${it.checked ? " on" : ""}`, onclick: () => (closeMenu(), it.onclick()) },
+            icon(it.icon),
+            h("span", { class: "grow" }, it.label),
+            it.checked ? h("span", { class: "check" }, "✓") : null,
+          ),
+    ),
+    usage ? [h("div", { class: "sep" }), usage] : null,
+  );
+  placePopover(pop, anchor);
+}
+
+// ---------- 当前会话的 token 用量（「更多」菜单底部） ----------
+
+/** 分布的各项，顺序和颜色固定（颜色见 css/topbar.css 的 --usage-*） */
+const USAGE_PARTS = [
+  { key: "input", label: "输入", cls: "u-input" },
+  { key: "cacheWrite", label: "缓存写入", cls: "u-cwrite" },
+  { key: "cacheRead", label: "缓存读取", cls: "u-cread" },
+  { key: "output", label: "输出", cls: "u-output" },
+];
+
+/** 1234 → 1.2k，1234567 → 1.23M */
+function fmtCount(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(n >= 1e8 ? 0 : n >= 1e7 ? 1 : 2)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(n >= 1e5 ? 0 : 1)}k`;
+  return String(n);
+}
+
+const pctText = (n, total) => {
+  const p = (n / total) * 100;
+  return p > 0 && p < 1 ? "<1%" : `${Math.round(p)}%`;
+};
+
+/** 对话页才有：{ total, parts（为 0 的不列）, usage }；还没有记录时 total 为 0。新对话、任务页返回 null */
+function usageSummary() {
+  if (S.view || !S.current) return null;
+  const u = S.convs.get(S.current)?.usage;
+  const parts = USAGE_PARTS.map((p) => ({ ...p, n: u?.[p.key] ?? 0 })).filter((p) => p.n > 0);
+  return { total: parts.reduce((sum, p) => sum + p.n, 0), parts, usage: u };
+}
+
+function renderUsage() {
+  const sum = usageSummary();
+  if (!sum) return null;
+  if (!sum.total) return h("div", { class: "usage" }, h("div", { class: "usage-empty" }, "本会话还没有 token 用量记录"));
+  const { total, parts, usage } = sum;
+  const exact = (n) => n.toLocaleString();
+  return h(
+    "div",
+    { class: "usage", role: "group", "aria-label": "本会话的 token 用量" },
+    h("div", { class: "usage-head" }, h("span", {}, "本会话 Token"), h("b", { title: `${exact(total)} tokens` }, fmtCount(total))),
+    h(
+      "div",
+      { class: "usage-bar", "aria-hidden": "true" },
+      parts.map((p) => h("i", { class: p.cls, style: { flexGrow: String(p.n) }, title: `${p.label} ${exact(p.n)}（${pctText(p.n, total)}）` })),
+    ),
+    parts.map((p) =>
+      h(
+        "div",
+        { class: "usage-row", title: `${exact(p.n)} tokens` },
+        h("span", { class: `usage-dot ${p.cls}` }),
+        h("span", { class: "usage-name" }, p.label, p.key === "output" && usage.reasoning ? h("small", {}, `含推理 ${fmtCount(usage.reasoning)}`) : null),
+        h("span", { class: "usage-num" }, fmtCount(p.n)),
+        h("span", { class: "usage-pct" }, pctText(p.n, total)),
+      ),
+    ),
+    usage.costUsd ? h("div", { class: "usage-foot" }, `按 API 价格约 $${usage.costUsd.toFixed(2)}`) : null,
+  );
+}
+
+/** 桌面端原生菜单里只能放文字：用量写成几行 */
+function usageLines() {
+  const sum = usageSummary();
+  if (!sum) return [];
+  if (!sum.total) return ["本会话还没有 token 用量记录"];
+  const { total, parts, usage } = sum;
+  return [
+    `本会话 Token 共 ${fmtCount(total)}${usage.costUsd ? `（按 API 价格约 $${usage.costUsd.toFixed(2)}）` : ""}`,
+    ...parts.map(
+      (p) => `　${p.label} ${fmtCount(p.n)}　${pctText(p.n, total)}${p.key === "output" && usage.reasoning ? `（含推理 ${fmtCount(usage.reasoning)}）` : ""}`,
+    ),
+  ];
+}
+
+// ---------- 桌面端：菜单交给它的顶栏「更多」 ----------
+
+let desktopActions = new Map();
+let desktopMenuSig = "";
+
+/** 菜单（模式、用量…）变了就报给桌面端 */
+function syncDesktopMenu() {
+  if (!desktopMenu) return;
+  const items = topMenuItems();
+  desktopActions = new Map(items.filter((it) => it !== "sep").map((it) => [it.id, it.onclick]));
+  const menu = {
+    items: items.map((it) => (it === "sep" ? { type: "separator" } : { id: it.id, label: it.label, ...(it.checked !== undefined ? { checked: it.checked } : {}) })),
+    usage: usageLines(),
+  };
+  const sig = JSON.stringify(menu);
+  if (sig === desktopMenuSig) return;
+  desktopMenuSig = sig;
+  desktop.setMenu(menu);
+}
+
+/** 桌面端「更多」里点了页面的菜单项 */
+export function runDesktopMenu(id) {
+  desktopActions.get(id)?.();
 }
 
 export function baseName(p) {
@@ -180,7 +320,6 @@ export function renderContext() {
     effort = (c ? (c.runtimeEffort ?? c.effort) : pick.effort) ?? defaults.effort;
   }
   renderCtxRing();
-  renderModePill(c);
   fill(
     ui.modelSlot,
     model
@@ -195,34 +334,18 @@ export function renderContext() {
   );
 }
 
-/** 输入框里的「聊天 / 工作」切换。会话里切换走服务端（同一条对话接着聊），新对话里只是记下选择 */
-function renderModePill(c) {
-  if (!ui.modeSlot) return;
-  const mode = c ? (c.mode ?? "work") : S.draftMode;
-  const chat = mode === "chat";
-  fill(
-    ui.modeSlot,
-    h(
-      "button",
-      {
-        class: `mode-pill${chat ? " chat" : ""}`,
-        title: chat
-          ? "聊天模式：精简的系统提示，只能联网搜索，不执行命令、不读写文件，每轮开销小很多。点击切到工作模式"
-          : "工作模式：agent 原装的全部能力。点击切到聊天模式（更省、更快，适合日常聊天和查资料）",
-        onclick: () => void toggleMode(),
-      },
-      chat ? "💬 聊天" : "🛠 工作",
-    ),
-  );
-}
-
+/**
+ * 「更多」里的聊天模式开关。聊天模式：精简的系统提示，只能联网搜索，不执行命令、不读写文件，每轮开销小很多；
+ * 工作模式：agent 原装的全部能力。会话里切换走服务端（同一条对话接着聊），新对话里只是记下选择
+ */
 async function toggleMode() {
   const c = S.current ? S.convs.get(S.current) : null;
   const next = (c ? (c.mode ?? "work") : S.draftMode) === "chat" ? "work" : "chat";
   if (!c) {
     S.draftMode = next;
     localStorage.setItem("aim.mode", next);
-    renderContext();
+    renderTopbar();
+    toast(next === "chat" ? "新对话用聊天模式：更省、更快，只能联网搜索，不执行命令、不读写文件" : "新对话用工作模式");
     return;
   }
   // 聊过的聊天对话切到工作模式：工作模式会在对话里留下一大段 Claude Code / Codex 的背景，
@@ -365,14 +488,19 @@ async function continueInFeishu(key) {
   );
 }
 
-/** 飞书机器人的历史会话：这个机器人的所有聊天，按活跃时间排，点一下打开 */
-export function openBotConversations(botId) {
+/** 飞书机器人的历史会话：这个机器人的所有聊天（侧栏只拿了最近的一条，这里去服务端拉全），按活跃时间排，点一下打开 */
+export async function openBotConversations(botId) {
   const bot = S.bots.find((b) => b.id === botId);
-  const convs = [...S.convs.values()]
-    .filter((c) => c.channel === "feishu" && c.channelId === botId && !c.hidden)
-    .sort((a, b) => b.activeAt - a.activeAt);
-  const body = h("div", { class: "modal-body" });
+  const body = h("div", { class: "modal-body" }, h("span", { class: "spinner" }));
   const close = modal({ title: `历史会话${bot ? ` · ${bot.name}` : ""}`, body });
+  let convs;
+  try {
+    convs = (await api(`/api/conversations/page?${new URLSearchParams({ scope: "bot", bot: botId })}`)).conversations;
+  } catch (err) {
+    fill(body, h("div", { class: "error-text" }, err.message));
+    return;
+  }
+  for (const c of convs) S.convs.set(c.key, c);
   fill(
     body,
     ...(convs.length === 0