agent-loft 0.2.32 → 0.2.34

package/web/settings/usage.js

@@ -0,0 +1,272 @@
+import { fill, h } from "../lib/dom.js";
+import { api } from "../lib/api.js";
+import { S } from "../state.js";
+
+// ---------- 用量：按日 / 月 / 年统计 token 和费用（数据见 src/core/usage.ts 按天的账） ----------
+
+/** 各项的顺序和颜色跟「更多」菜单里本会话的用量一致 */
+const 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" },
+];
+
+const UNITS = [
+  ["day", "按日"],
+  ["month", "按月"],
+  ["year", "按年"],
+];
+
+const pad = (n) => String(n).padStart(2, "0");
+const ymd = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+/** 1234 → 1.2k，1234567 → 1.23M */
+function fmtCount(n) {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(2)}B`;
+  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 exact = (n) => n.toLocaleString("en-US");
+const fmtCost = (n) => `$${n >= 100 ? n.toFixed(0) : n.toFixed(2)}`;
+const tokensOf = (r) => r.input + r.cacheRead + r.cacheWrite + r.output;
+
+/** 某个周期的起止（含两头）、标题、趋势图的格子 */
+function periodOf(unit, anchor) {
+  const y = anchor.getFullYear();
+  const m = anchor.getMonth();
+  if (unit === "day") {
+    const d = ymd(anchor);
+    return { from: d, to: d, title: `${y}年${m + 1}月${anchor.getDate()}日`, buckets: null };
+  }
+  if (unit === "year") {
+    const buckets = Array.from({ length: 12 }, (_, i) => ({ key: `${y}-${pad(i + 1)}`, label: `${i + 1}月` }));
+    return { from: `${y}-01-01`, to: `${y}-12-31`, title: `${y}年`, buckets, slice: 7 };
+  }
+  const days = new Date(y, m + 1, 0).getDate();
+  const buckets = Array.from({ length: days }, (_, i) => ({ key: `${y}-${pad(m + 1)}-${pad(i + 1)}`, label: `${m + 1}月${i + 1}日` }));
+  return { from: buckets[0].key, to: buckets[days - 1].key, title: `${y}年${m + 1}月`, buckets, slice: 10 };
+}
+
+function shift(unit, anchor, step) {
+  const d = new Date(anchor);
+  if (unit === "day") d.setDate(d.getDate() + step);
+  else if (unit === "month") d.setMonth(d.getMonth() + step, 1);
+  else d.setFullYear(d.getFullYear() + step, 0, 1);
+  return d;
+}
+
+function sum(rows) {
+  const t = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, reasoning: 0, costUsd: 0 };
+  for (const r of rows) {
+    for (const k of Object.keys(t)) t[k] += r[k] ?? 0;
+  }
+  return t;
+}
+
+/** 按 keyOf 分组合计，Token 多的在前 */
+function groupBy(rows, keyOf) {
+  const m = new Map();
+  for (const r of rows) {
+    const k = keyOf(r);
+    if (!m.has(k)) m.set(k, []);
+    m.get(k).push(r);
+  }
+  return [...m].map(([k, list]) => ({ key: k, ...sum(list) })).sort((a, b) => tokensOf(b) - tokensOf(a));
+}
+
+export async function usageTab(panel) {
+  let unit = "month";
+  let anchor = new Date();
+  const box = h("div", { class: "section usage-stats" });
+  fill(panel, box);
+
+  const render = async () => {
+    const period = periodOf(unit, anchor);
+    const isCurrent = period.to >= ymd(new Date());
+    const seg = h(
+      "div",
+      { class: "seg" },
+      UNITS.map(([u, label]) =>
+        h(
+          "button",
+          {
+            class: u === unit ? "on" : "",
+            onclick: () => {
+              if (u === unit) return;
+              unit = u;
+              anchor = new Date();
+              void render();
+            },
+          },
+          label,
+        ),
+      ),
+    );
+    const nav = h(
+      "div",
+      { class: "us-nav" },
+      h("button", { class: "btn small", "aria-label": "上一个", onclick: () => ((anchor = shift(unit, anchor, -1)), void render()) }, "‹"),
+      h("span", { class: "us-title" }, period.title),
+      h(
+        "button",
+        { class: "btn small", "aria-label": "下一个", disabled: isCurrent, onclick: () => ((anchor = shift(unit, anchor, 1)), void render()) },
+        "›",
+      ),
+      isCurrent ? null : h("button", { class: "btn small", onclick: () => ((anchor = new Date()), void render()) }, unit === "day" ? "今天" : unit === "month" ? "本月" : "今年"),
+    );
+    const head = h("div", { class: "us-head" }, h("h4", {}, "Token 与费用"), seg, nav);
+    fill(box, head, h("span", { class: "spinner" }));
+
+    let data;
+    try {
+      data = await api(`/api/usage?from=${period.from}&to=${period.to}`);
+    } catch (err) {
+      fill(box, head, h("div", { class: "error-text" }, err.message));
+      return;
+    }
+    const rows = data.rows;
+    const total = sum(rows);
+    const tokens = tokensOf(total);
+    // 估算的金额、没能算金额的 Token（认不出模型，或者是升级前没记模型的 Codex 用量）
+    const estimated = rows.reduce((n, r) => n + (r.estimated ? r.costUsd : 0), 0);
+    const unpriced = rows.reduce((n, r) => n + (r.costUsd ? 0 : tokensOf(r)), 0);
+    const note = h(
+      "div",
+      { class: "muted" },
+      "金额都是按 API 价格算的参考值，订阅用户实际不按这个扣费：Claude 用它自己报的费用；Codex 不报费用，按模型单价（LiteLLM 公开价格表，每天更新）× Token 估算，不含长上下文加价。从这个版本开始记录，之前的用量没有日期，不计入。",
+      unpriced ? ` 有 ${fmtCount(unpriced)} Token 认不出模型单价，没算进金额。` : "",
+    );
+    if (!tokens) {
+      fill(box, head, h("div", { class: "muted us-empty" }, `${period.title}没有用量记录`), note);
+      return;
+    }
+
+    const days = unit === "day" ? 1 : new Set(rows.map((r) => r.day)).size;
+    const tiles = h(
+      "div",
+      { class: "us-tiles" },
+      tile("Token 合计", fmtCount(tokens), `${exact(tokens)} tokens`),
+      tile(
+        "费用（约）",
+        total.costUsd ? fmtCost(total.costUsd) : "—",
+        total.costUsd
+          ? `$${total.costUsd.toFixed(4)}${estimated ? `，其中按单价估算 $${estimated.toFixed(4)}` : ""}`
+          : "这段时间没有能算金额的用量",
+      ),
+      unit === "day"
+        ? tile("输出", fmtCount(total.output), `${exact(total.output)} tokens`)
+        : tile("日均 Token", fmtCount(Math.round(tokens / days)), `有用量的 ${days} 天平均`),
+    );
+
+    const parts = PARTS.map((p) => ({ ...p, n: total[p.key] })).filter((p) => p.n > 0);
+    const composition = h(
+      "div",
+      { class: "usage" },
+      h("div", { class: "usage-bar", "aria-hidden": "true" }, parts.map((p) => h("i", { class: p.cls, style: `flex-grow:${p.n}` }))),
+      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" && total.reasoning ? h("small", {}, `含推理 ${fmtCount(total.reasoning)}`) : null),
+          h("span", { class: "usage-num" }, fmtCount(p.n)),
+          h("span", { class: "usage-pct" }, pct(p.n, tokens)),
+        ),
+      ),
+    );
+
+    const agentName = (id) => S.agents.find((a) => a.id === id)?.label ?? id;
+    const byAgent = groupBy(rows, (r) => r.agent).map((g) => ({ ...g, label: agentName(g.key) }));
+    const byModel = groupBy(rows, (r) => r.model ?? "").map((g) => ({ ...g, label: g.key || "未记录模型" }));
+    const byUser = data.admin
+      ? groupBy(rows, (r) => r.owner ?? "").map((g) => ({ ...g, label: g.key ? data.users[g.key] : "未归属（飞书等）" }))
+      : [];
+
+    fill(
+      box,
+      head,
+      tiles,
+      period.buckets ? trend(period, rows) : null,
+      h("h5", {}, "构成"),
+      composition,
+      h("h5", {}, "按 Agent"),
+      breakdown(byAgent, tokens),
+      h("h5", {}, "按模型"),
+      breakdown(byModel, tokens),
+      byUser.length > 1 || (byUser.length === 1 && byUser[0].key) ? [h("h5", {}, "按用户"), breakdown(byUser, tokens)] : null,
+      note,
+    );
+  };
+  await render();
+}
+
+function tile(label, value, title) {
+  return h("div", { class: "us-tile", title }, h("span", {}, label), h("b", {}, value));
+}
+
+function pct(n, total) {
+  const p = (n / total) * 100;
+  return p > 0 && p < 1 ? "<1%" : `${Math.round(p)}%`;
+}
+
+/** 趋势：月视图每天一根，年视图每月一根。悬停看具体数字 */
+function trend(period, rows) {
+  const byKey = new Map();
+  for (const r of rows) {
+    const k = r.day.slice(0, period.slice);
+    const t = byKey.get(k) ?? { tokens: 0, cost: 0 };
+    t.tokens += tokensOf(r);
+    t.cost += r.costUsd ?? 0;
+    byKey.set(k, t);
+  }
+  const max = Math.max(...[...byKey.values()].map((t) => t.tokens), 1);
+  const today = ymd(new Date()).slice(0, period.slice);
+  const n = period.buckets.length;
+  return h(
+    "div",
+    { class: "us-trend", role: "img", "aria-label": `${period.title}每${period.slice === 7 ? "月" : "天"}的 Token 用量` },
+    h(
+      "div",
+      { class: "us-bars", style: `grid-template-columns:repeat(${n},1fr)` },
+      period.buckets.map((b) => {
+        const t = byKey.get(b.key);
+        const tip = t ? `${b.label}　${exact(t.tokens)} tokens${t.cost ? `　约 ${fmtCost(t.cost)}` : ""}` : `${b.label}　没有用量`;
+        return h(
+          "div",
+          { class: `us-col${b.key > today ? " future" : ""}`, title: tip },
+          t ? h("i", { style: `height:${Math.max(2, (t.tokens / max) * 100)}%` }) : null,
+        );
+      }),
+    ),
+    h(
+      "div",
+      { class: "us-axis", style: `grid-template-columns:repeat(${n},1fr)` },
+      period.buckets.map((b, i) => {
+        // 月视图只标 1、5、10…号，免得挤
+        const show = period.slice === 7 || i === 0 || (i + 1) % 5 === 0;
+        return h("span", {}, show ? String(i + 1) : "");
+      }),
+    ),
+    h("div", { class: "us-max" }, `最高 ${fmtCount(max)}`),
+  );
+}
+
+function breakdown(groups, tokens) {
+  return h(
+    "div",
+    { class: "us-list" },
+    groups.map((g) => {
+      const n = tokensOf(g);
+      return h(
+        "div",
+        { class: "us-item", title: `${exact(n)} tokens` },
+        h("span", { class: "us-name" }, g.label),
+        h("span", { class: "us-meter", "aria-hidden": "true" }, h("i", { style: `width:${(n / tokens) * 100}%` })),
+        h("span", { class: "us-num" }, fmtCount(n)),
+        h("span", { class: "us-cost" }, g.costUsd ? fmtCost(g.costUsd) : "—"),
+      );
+    }),
+  );
+}

package/web/state.js

@@ -21,7 +21,7 @@ export const S = {
   loadToken: 0,
   /** 登录的用户 { id, name, role } */
   user: null,
-  /** 主区域在显示什么：null 是对话（或新对话），"tasks" 是定时任务页，"skills" 是技能页 */
+  /** 主区域在显示什么：null 是对话（或新对话），"tasks" 是定时任务页 */
   view: null,
 };
 
@@ -39,8 +39,9 @@ export const desktopQuota = typeof desktop?.onQuota === "function";
 // 桌面端里：顶栏、侧栏顶部可以按住拖动窗口（样式见 css/topbar.css 的 .in-desktop）
 if (desktop) document.documentElement.classList.add("in-desktop");
 /**
- * 新版桌面端顶栏的「更多」里能打开每台服务器的设置：侧栏底部的设置按钮就不显示了（额度照常显示，数据由桌面端推）。
- * 老版本桌面端没有这个入口，照旧显示，免得设置打不开。
+ * 新版桌面端顶栏的「更多」里能打开每台服务器的设置：页面「更多」里的设置就不放了。
+ * 老版本桌面端没有这个入口，照旧放，免得设置打不开。
  */
 export const desktopSettings = typeof desktop?.onOpenSettings === "function";
-if (desktopSettings) document.documentElement.classList.add("desktop-settings");
+/** 更新的桌面端：页面右上角的「更多」整个交给桌面端顶栏的「更多」（排在最上面），页面上不显示这个按钮 */
+export const desktopMenu = typeof desktop?.setMenu === "function";

package/web/views/composer.js

@@ -10,6 +10,7 @@ import { cancelVoice, SpeechRec, toggleVoice } from "./voice.js";
 import { closeSlashMenu, commandUsage, oneLine, slashKeydown, updateSlashMenu } from "./slash.js";
 import { attachMention } from "./mention.js";
 import { doAction, openModelPicker, openSessions } from "./conv-actions.js";
+import { openSettings } from "./layout.js";
 
 // ---------- 输入框 ----------
 
@@ -70,7 +71,7 @@ export function renderComposer() {
   ui.slashMenu = h("div", { class: "slash-menu", hidden: true });
   ui.mentionMenu = h("div", { class: "slash-menu", hidden: true });
   ui.mention = attachMention(ui.input, ui.mentionMenu, {
-    onEmpty: () => import("./skills.js").then((m) => m.openSkills()),
+    onEmpty: () => openSettings("技能"),
   });
   ui.composer = h(
     "div",

package/web/views/interaction.js

@@ -28,7 +28,13 @@ export function upsertInteraction(ix) {
     return;
   }
   if (ix.settled) return;
-  // 卡片插在这一轮中间：之前的输出先封口，之后的输出接在卡片下面，顺序才对
+  insertCard(ix);
+  notifyIfHidden(ix);
+}
+
+/** 把卡片放进对话：插在这一轮中间的话，之前的输出先封口，之后的输出接在卡片下面，顺序才对 */
+export function insertCard(ix) {
+  if (S.items.some((i) => i.type === "ix" && i.id === ix.id)) return;
   if (S.turnAi && !S.turnAi.done) {
     S.turnAi.done = true;
     S.turnAi.segment = true;
@@ -36,9 +42,11 @@ export function upsertInteraction(ix) {
     S.turnAi = null;
   }
   addItem({ type: "ix", id: ix.id, ix });
-  notifyIfHidden(ix);
 }
 
+/** 已处理：「已回答 · 已在 Web 处理」。从会话记录里还原的不知道是谁处理的，只写结果 */
+const settledText = (s) => [SETTLE_LABEL[s.settlement] ?? s.settlement, s.by].filter(Boolean).join(" · ");
+
 function notifyIfHidden(ix) {
   // 桌面端由服务端的 notice 统一弹，这里再弹就重复了
   if (desktop || document.visibilityState === "visible" || !("Notification" in window)) return;
@@ -82,7 +90,7 @@ export function renderInteraction(item) {
       h("div", { class: "ix-title" }, settled ? "" : "⚠️", spec.title),
       h("div", { class: "ix-detail" }, renderMarkdown(spec.detail)),
       settled
-        ? h("div", { class: "ix-meta" }, `${SETTLE_LABEL[settled.settlement] ?? settled.settlement} · ${settled.by}`)
+        ? h("div", { class: "ix-meta" }, settledText(settled))
         : h(
             "div",
             { class: "ix-buttons" },
@@ -128,7 +136,7 @@ export function renderInteraction(item) {
       );
     }),
     settled
-      ? h("div", { class: "ix-meta" }, `${SETTLE_LABEL[settled.settlement] ?? settled.settlement} · ${settled.by}`)
+      ? h("div", { class: "ix-meta" }, settledText(settled))
       : h(
           "div",
           { class: "ix-buttons" },

package/web/views/layout.js

@@ -1,9 +1,11 @@
 import { $app, fill, h, icon, toast } from "../lib/dom.js";
 import { api } from "../lib/api.js";
-import { desktop, desktopQuota, desktopSettings, S, ui } from "../state.js";
+import { desktop, desktopMenu, desktopQuota, desktopSettings, S, ui } from "../state.js";
 import { clearAppBadge, WS } from "../lib/ws.js";
 import { showAuth } from "./auth.js";
 import {
+  applyBootstrap,
+  bootstrapQuery,
   closeSide,
   marquee,
   moveProjectDir,
@@ -18,10 +20,11 @@ import {
   stopMarquee,
 } from "./sidebar.js";
 import { applyDesktopQuota, loadQuota, renderQuota } from "./quota.js";
-import { openBotConversations, openConvContextMenu, usableAgents } from "./topbar.js";
+import { openBotConversations, openConvContextMenu, runDesktopMenu, usableAgents } from "./topbar.js";
 import { showMenu } from "../lib/overlay.js";
 import { bindScrollWatch, newDraft, openConversation, scrollToBottom } from "./messages.js";
 import { renderComposer } from "./composer.js";
+import { createNav } from "./msg-nav.js";
 import { renameConv } from "./conv-actions.js";
 import { releaseForeignPushSub } from "../lib/push.js";
 
@@ -32,13 +35,14 @@ import { releaseForeignPushSub } from "../lib/push.js";
  * 加载期间弹窗还没出来，连点 / 桌面端重复触发都会再开一层，所以加载中的再调用直接忽略。
  */
 let settingsLoading = false;
-function openSettings() {
+/** tab：直接打开哪一页，如「技能」 */
+export function openSettings(tab) {
   if (settingsLoading) return;
   settingsLoading = true;
   import("../settings/index.js").then(
     (m) => {
       settingsLoading = false;
-      return m.openSettings();
+      return m.openSettings(tab);
     },
     (err) => {
       settingsLoading = false;
@@ -47,14 +51,6 @@ function openSettings() {
   );
 }
 
-/** 技能页：第一次打开时才加载 */
-export function openSkillsView() {
-  import("./skills.js").then(
-    (m) => m.openSkills(),
-    (err) => toast(`技能页加载失败，刷新页面再试：${err.message}`),
-  );
-}
-
 /** 定时任务页：第一次打开时才加载 */
 export function openTasksView() {
   import("./tasks.js").then(
@@ -69,14 +65,14 @@ export async function boot() {
   WS.stopped = false;
   WS.epoch = null;
   WS.hellos = 0;
-  const data = await api("/api/bootstrap");
+  const data = await api(`/api/bootstrap${bootstrapQuery()}`);
   S.user = data.user ?? me.user ?? null;
   S.agents = data.agents;
   S.bots = data.bots;
   S.workspaceRoot = data.workspaceRoot;
   S.quotaRefreshMin = data.quotaRefreshMin ?? 10;
   S.quotaEnabled = data.quotaEnabled !== false;
-  S.convs = new Map(data.conversations.map((c) => [c.key, c]));
+  applyBootstrap(data);
   S.pending = new Map(data.pending.map((i) => [i.id, i]));
   const enabled = usableAgents().map((a) => a.id);
   if (!S.draftAgent || !enabled.includes(S.draftAgent)) S.draftAgent = enabled[0] ?? null;
@@ -89,14 +85,18 @@ export async function boot() {
   // 地址里带了会话就打开它；否则打开「最近」里最近活跃的那个对话，一个都没有才进新对话页
   const latest = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt)[0];
   if (fromHash === "tasks") openTasksView();
-  else if (fromHash === "skills") openSkillsView();
   else if (fromHash && S.convs.has(fromHash)) await openConversation(fromHash);
   else if (latest) await openConversation(latest.key);
   else newDraft();
+  // 以前的技能页地址：技能现在在设置里
+  if (fromHash === "skills") openSettings("技能");
   // 点了桌面端的系统通知 / 菜单栏里的待处理项：跳到对应会话
   desktop?.onOpen((key) => {
-    if (key && S.convs.has(key) && key !== S.current) void openConversation(key);
+    // 不要求在 S.convs 里：侧栏分页，那条可能还没拉到；openConversation 会去服务端拿
+    if (key && key !== S.current) void openConversation(key);
   });
+  // 页面的「更多」菜单在桌面端顶栏的「更多」里：点了哪项
+  if (desktopMenu) desktop.onMenu(runDesktopMenu);
   // 桌面端「更多」里点了这台服务器的设置；已经开着就不再叠一层
   if (desktopSettings) {
     desktop.onOpenSettings(() => {
@@ -111,7 +111,7 @@ export async function boot() {
     navigator.serviceWorker.addEventListener("message", (e) => {
       if (e.data?.type !== "open") return;
       const key = decodeURIComponent(new URL(e.data.url, location.origin).hash.slice(1));
-      if (key && S.convs.has(key) && key !== S.current) void openConversation(key);
+      if (key && key !== S.current) void openConversation(key);
     });
   }
 }
@@ -179,19 +179,16 @@ function renderLayout() {
     ),
     // 「最近」上面的入口，像 ChatGPT 的 Tasks。当前在任务页时高亮（renderSidebar 里切换）
     (ui.tasksNav = h("button", { class: "btn new-chat side-nav", onclick: () => openTasksView() }, icon("clock"), "定时任务")),
-    (ui.skillsNav = h("button", { class: "btn new-chat side-nav", onclick: () => openSkillsView() }, icon("spark"), "技能")),
     ui.convList,
-    h(
+    // 底部只有额度：没有额度可显示（关了查询、还没查到）时整块藏起来，连分隔线一起
+    (ui.sideBottom = h(
       "div",
-      { class: "side-bottom" },
+      { class: "side-bottom", hidden: true },
       (ui.quota = h("div", { class: "quota", onpointerenter: () => renderQuota() })),
-      h("button", { class: "icon-btn side-gear", title: "设置", onclick: () => (openSettings(), closeSide()) }, icon("gear")),
-    ),
+    )),
     h("div", { class: "side-resizer", title: "拖动调整宽度，双击恢复默认", onpointerdown: startSideResize, ondblclick: () => setSideWidth(null) }),
   );
   ui.topbar = h("div", { class: "topbar" });
-  // 聊天 / 工作切换在顶栏右上角；先建好，renderTopbar 每次把它放回去
-  ui.modeSlot = h("span", { class: "mode-slot" });
   ui.msgInner = h("div", { class: "messages-inner" });
   ui.spacer = h("div", { class: "messages-spacer", "aria-hidden": "true" });
   ui.messages = h("div", { class: "messages", tabindex: "-1" }, ui.msgInner, ui.spacer);
@@ -199,7 +196,7 @@ function renderLayout() {
   ui.follow = true;
   bindScrollWatch();
   ui.composerWrap = h("div", { class: "composer-wrap" });
-  ui.main = h("main", { class: "main" }, ui.topbar, ui.messages, ui.composerWrap);
+  ui.main = h("main", { class: "main" }, ui.topbar, ui.messages, createNav(), ui.composerWrap);
   ui.layout = h("div", { class: "layout" }, ui.sidebar, h("div", { class: "scrim", onclick: closeSide }), ui.main);
   fill($app, ui.layout, h("div", { class: "edge-strip", "aria-hidden": "true" }));
   renderComposer();

package/web/views/mention.js

@@ -40,7 +40,7 @@ function match(list, q) {
 
 /**
  * 给一个输入框挂上 @ 补全。menu 是放菜单的元素（调用方决定放哪、怎么定位，样式用 .slash-menu）。
- * onEmpty：一个技能都没有时，菜单里给个入口（去技能页）。返回 { update, keydown, close }：
+ * onEmpty：一个技能都没有时，菜单里给个入口（去设置里的技能页）。返回 { update, keydown, close }：
  * 输入框的 input / keydown / blur 里分别调用。
  */
 export function attachMention(input, menu, { onEmpty, onPicked } = {}) {
@@ -146,7 +146,7 @@ export function attachMention(input, menu, { onEmpty, onPicked } = {}) {
             },
           },
           h("div", { class: "slash-head" }, h("span", { class: "slash-name" }, "还没有技能")),
-          h("div", { class: "slash-desc" }, "去「技能」页新建、上传，或者从技能广场安装"),
+          h("div", { class: "slash-desc" }, "去「设置 → 技能」新建、上传"),
         ),
       );
       return;