agent-loft 0.2.32 → 0.2.34

package/src/core/usage.ts

@@ -0,0 +1,144 @@
+// 每个 agent 会话累计消耗的 token（页面右上角「更多」里显示分布）。
+//
+// Claude 每轮结束报一次这个会话的累计值（恢复 / 分叉来的会话也接着原来的总数算）；Codex 每次模型请求报一次增量。
+// 都按会话 id 记在这里：页面重新加载、服务重启后还在。
+// 按 agent 会话算，不按对话：/new、恢复旧会话、切 agent 之后显示的都是现在这个会话的。
+// Codex 升级前跑过的轮次没有记录，从升级后开始算。
+//
+// 另外按天记一本账（usage-daily.json，设置 →「用量」按日 / 月 / 年统计）：每次报上来的增量记到当天、
+// 按「谁的对话 + 哪个 agent + 什么模型」分开。只从有这本账开始算，之前的用量没有日期，不补。
+// 没报费用的（Codex）查的时候按模型单价估一个（见 pricing.ts）。
+import path from "node:path";
+import { dataDir, readJson, writeJsonAtomic } from "../home.js";
+import { estimateCost } from "./pricing.js";
+import type { TokenUsage } from "./types.js";
+
+export type UsageTotals = Required<Omit<TokenUsage, "costUsd">> & { costUsd?: number; at: number };
+type Store = Record<string, UsageTotals>;
+
+/** 一天里某个人用某个 agent 的合计 */
+export type DailyTotals = Required<Omit<TokenUsage, "costUsd">> & { costUsd?: number };
+/** 按天的账：日期（服务器本地时间 YYYY-MM-DD）→「owner\tagent\tmodel」→ 合计。没有主人、不知道模型的是空串 */
+type Ledger = Record<string, Record<string, DailyTotals>>;
+/** 查询结果的一行。estimated：costUsd 是按单价估的，不是 agent 报的 */
+export type DailyRow = DailyTotals & { day: string; owner?: string; agent: string; model?: string; estimated?: true };
+
+const FILE = () => path.join(dataDir, "usage.json");
+const DAILY_FILE = () => path.join(dataDir, "usage-daily.json");
+const MAX_SESSIONS = 1000;
+/** 按天的账留多久（天） */
+const MAX_DAYS = 3 * 366;
+
+let store: Store | null = null;
+let ledger: Ledger | null = null;
+let timer: NodeJS.Timeout | null = null;
+
+function load(): Store {
+  return (store ??= readJson<Store>(FILE(), {}));
+}
+
+function loadLedger(): Ledger {
+  return (ledger ??= readJson<Ledger>(DAILY_FILE(), {}));
+}
+
+function write(): void {
+  const s = load();
+  // 只留最近用过的会话
+  const keys = Object.keys(s).sort((a, b) => s[b]!.at - s[a]!.at);
+  for (const k of keys.slice(MAX_SESSIONS)) delete s[k];
+  writeJsonAtomic(FILE(), s);
+  const l = loadLedger();
+  const days = Object.keys(l).sort();
+  for (const d of days.slice(0, Math.max(0, days.length - MAX_DAYS))) delete l[d];
+  writeJsonAtomic(DAILY_FILE(), l);
+}
+
+/** 本地时间的 YYYY-MM-DD */
+export function dayOf(ms: number): string {
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+function persistSoon(): void {
+  if (timer) return;
+  timer = setTimeout(() => {
+    timer = null;
+    write();
+  }, 1000);
+  timer.unref();
+}
+
+/** 退出前把还没写的落盘 */
+export function flushUsage(): void {
+  if (!timer) return;
+  clearTimeout(timer);
+  timer = null;
+  write();
+}
+
+const num = (v: unknown): number => (typeof v === "number" && Number.isFinite(v) && v > 0 ? v : 0);
+
+const FIELDS = ["input", "cacheRead", "cacheWrite", "output", "reasoning"] as const;
+
+/**
+ * cumulative：报的是累计值，每项取较大的（累计值只增不减；恢复的会话万一没从原来的总数接着算，
+ * 宁可先少算，也不把之前的再加一遍）。否则是增量，加上去。
+ * by：这次用量算谁的、哪个 agent 的（记进按天的账；不给就只记会话的）
+ */
+export function recordUsage(
+  sessionId: string | undefined,
+  usage: TokenUsage,
+  cumulative = false,
+  by?: { owner?: string; agent: string; model?: string },
+): void {
+  if (!sessionId) return;
+  const s = load();
+  const t = (s[sessionId] ??= { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, reasoning: 0, at: 0 });
+  const delta: DailyTotals = { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, reasoning: 0 };
+  for (const f of FIELDS) {
+    const next = cumulative ? Math.max(t[f], num(usage[f])) : t[f] + num(usage[f]);
+    delta[f] = next - t[f];
+    t[f] = next;
+  }
+  const cost = num(usage.costUsd);
+  if (cost) {
+    const next = cumulative ? Math.max(t.costUsd ?? 0, cost) : (t.costUsd ?? 0) + cost;
+    if (next > (t.costUsd ?? 0)) delta.costUsd = next - (t.costUsd ?? 0);
+    t.costUsd = next;
+  }
+  t.at = Date.now();
+  if (by) addDaily(t.at, by, delta);
+  persistSoon();
+}
+
+function addDaily(at: number, by: { owner?: string; agent: string; model?: string }, delta: DailyTotals): void {
+  if (!FIELDS.some((f) => delta[f] > 0) && !delta.costUsd) return;
+  const day = (loadLedger()[dayOf(at)] ??= {});
+  const d = (day[`${by.owner ?? ""}\t${by.agent}\t${by.model ?? ""}`] ??= { input: 0, cacheRead: 0, cacheWrite: 0, output: 0, reasoning: 0 });
+  for (const f of FIELDS) d[f] += delta[f];
+  if (delta.costUsd) d.costUsd = (d.costUsd ?? 0) + delta.costUsd;
+}
+
+/** 按天的账里 from ~ to（含两头，YYYY-MM-DD）的行；visible 按主人过滤 */
+export function dailyUsage(from: string, to: string, visible?: (owner: string | undefined) => boolean): DailyRow[] {
+  const rows: DailyRow[] = [];
+  for (const [day, buckets] of Object.entries(loadLedger())) {
+    if (day < from || day > to) continue;
+    for (const [k, v] of Object.entries(buckets)) {
+      const [o = "", agent = "", model = ""] = k.split("\t");
+      const owner = o || undefined;
+      if (visible && !visible(owner)) continue;
+      const row: DailyRow = { day, ...(owner ? { owner } : {}), agent, ...(model ? { model } : {}), ...v };
+      if (!row.costUsd) {
+        const est = estimateCost(model, row);
+        if (est) Object.assign(row, { costUsd: est, estimated: true });
+      }
+      rows.push(row);
+    }
+  }
+  return rows.sort((a, b) => a.day.localeCompare(b.day));
+}
+
+export function usageOf(sessionId: string | undefined): UsageTotals | undefined {
+  return sessionId ? load()[sessionId] : undefined;
+}

package/web/css/composer.css

@@ -167,31 +167,6 @@ button.ctx-item:hover {
   flex-shrink: 0;
 }
 
-.mode-pill {
-  display: inline-flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 10px;
-  border-radius: 999px;
-  font-size: 13px;
-  color: var(--fg-faint);
-  white-space: nowrap;
-}
-
-.mode-pill:hover {
-  background: var(--bg-hover);
-  color: var(--fg);
-}
-
-.mode-pill.chat {
-  color: var(--accent);
-}
-
-.topbar .mode-slot {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
 .topbar .top-more svg {
   width: 20px;
   height: 20px;

package/web/css/messages.css

@@ -227,6 +227,26 @@ a.att-file:hover {
   word-break: break-word;
 }
 
+/* 太长的用户消息：收起到约 10 行，底部淡出，下面一个「展开显示」 */
+.msg-user.clamped {
+  max-height: 260px;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
+}
+
+.msg-more {
+  margin-top: -2px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--fg-faint);
+}
+
+.msg-more:hover {
+  color: var(--fg);
+}
+
 .msg-user .origin {
   display: block;
   font-size: 12px;
@@ -732,3 +752,152 @@ a.att-file:hover {
 .lightbox-dl:hover {
   background: rgba(255, 255, 255, 0.26);
 }
+
+/* ---------- 右边的快速定位：每条用户消息一道横线，鼠标移上去展开成列表 ---------- */
+.msg-nav {
+  position: absolute;
+  right: 14px;
+  top: 45%;
+  transform: translateY(-50%);
+  z-index: 4;
+  display: flex;
+  align-items: center;
+}
+
+.msg-nav[hidden],
+.main.tasks-view .msg-nav {
+  display: none;
+}
+
+.msg-nav-ticks {
+  display: flex;
+  flex-direction: column;
+  max-height: 50vh;
+  overflow-y: auto;
+  scrollbar-width: none;
+  opacity: 0.55;
+  transition: opacity 0.2s;
+}
+
+.msg-nav-ticks::-webkit-scrollbar {
+  display: none;
+}
+
+.msg-nav.scrolling .msg-nav-ticks,
+.msg-nav:hover .msg-nav-ticks {
+  opacity: 1;
+}
+
+/* 点击范围比横线大：整个 20×10 都能点 */
+.msg-nav-tick {
+  flex-shrink: 0;
+  width: 20px;
+  height: 10px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.msg-nav-tick i {
+  display: block;
+  width: 10px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--fg-faint);
+  transition: width 0.15s, background 0.15s;
+}
+
+.msg-nav-tick:hover i {
+  background: var(--fg-soft);
+}
+
+.msg-nav-tick.on i {
+  width: 16px;
+  background: var(--fg);
+}
+
+/* 展开的列表：在横线左边，鼠标移开就收起 */
+.msg-nav-panel {
+  position: absolute;
+  right: calc(100% + 4px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 260px;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.12s, visibility 0.12s;
+}
+
+/* 键盘 Tab 进来时也展开；鼠标点过之后不因为焦点还在就一直开着 */
+.msg-nav:hover .msg-nav-panel,
+.msg-nav:has(:focus-visible) .msg-nav-panel {
+  opacity: 1;
+  visibility: visible;
+}
+
+.msg-nav-row {
+  flex-shrink: 0;
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--fg-soft);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.msg-nav-row:hover {
+  background: var(--bg-hover);
+  color: var(--fg);
+}
+
+.msg-nav-row.on {
+  color: var(--fg);
+  font-weight: 500;
+}
+
+/* 手机上没地方放，也没有悬停 */
+@media (max-width: 768px) {
+  .msg-nav {
+    display: none;
+  }
+}
+
+/* 排队中的消息：「排队中 · 打断并发送」 */
+.queue-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: -2px;
+  font-size: 12px;
+  color: var(--fg-faint);
+}
+
+.queue-note.dropped {
+  color: var(--danger);
+}
+
+.queue-jump {
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--fg-soft);
+  border: 1px solid var(--border);
+}
+
+.queue-jump:hover {
+  color: var(--fg);
+  background: var(--bg-hover);
+}

package/web/css/settings.css

@@ -333,3 +333,197 @@
   background: var(--code-bg);
   font-size: 12px;
 }
+
+/* ---------- 用量（按日 / 月 / 年统计 Token 和费用） ---------- */
+
+.usage-stats h5 {
+  margin: 4px 0 -4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg-soft);
+}
+
+.us-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.us-head h4 {
+  flex: 1;
+}
+
+.us-head .seg {
+  display: inline-flex;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--bg-soft);
+}
+
+.us-head .seg button {
+  padding: 5px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.us-head .seg button.on {
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.us-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.us-title {
+  min-width: 7.5em;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.us-empty {
+  padding: 24px 0;
+  text-align: center;
+}
+
+.us-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.us-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--bg-soft);
+}
+
+.us-tile span {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.us-tile b {
+  font-size: 20px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 趋势：单一系列，用主题前景色；没用量的格子留空，悬停看数字 */
+.us-trend {
+  position: relative;
+  padding-top: 16px;
+}
+
+.us-bars {
+  display: grid;
+  gap: 2px;
+  height: 120px;
+  align-items: end;
+  border-bottom: 1px solid var(--border);
+}
+
+.us-col {
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  border-radius: 4px 4px 0 0;
+}
+
+.us-col:hover {
+  background: var(--bg-soft);
+}
+
+.us-col i {
+  width: 100%;
+  background: var(--fg);
+  opacity: 0.78;
+  border-radius: 4px 4px 0 0;
+}
+
+.us-col:hover i {
+  opacity: 1;
+}
+
+.us-axis {
+  display: grid;
+  gap: 2px;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--fg-faint);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.us-max {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 11px;
+  color: var(--fg-faint);
+}
+
+.usage-stats .usage {
+  padding: 0;
+  font-size: 13px;
+}
+
+.us-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.us-item {
+  display: grid;
+  grid-template-columns: minmax(5em, 9em) 1fr 4.5em 4.5em;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.us-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.us-meter {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-soft);
+  overflow: hidden;
+}
+
+.us-meter i {
+  display: block;
+  height: 100%;
+  background: var(--fg-soft);
+  border-radius: 3px;
+}
+
+.us-num,
+.us-cost {
+  text-align: right;
+}
+
+.us-cost {
+  color: var(--fg-soft);
+}
+
+@media (max-width: 640px) {
+  .us-tiles {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/web/css/sidebar.css

@@ -324,13 +324,13 @@ button.conv-group:hover {
   min-height: 48px;
 }
 
-.side-gear {
-  margin-left: auto;
+/* 没有额度可显示：连上面的分隔线一起藏起来 */
+.side-bottom[hidden] {
+  display: none;
 }
 
-/* 桌面端里：设置在顶栏「更多」里，侧栏底部只留额度（额度由桌面端统一查好推过来） */
-.desktop-settings .side-gear {
-  display: none;
+.conv-item .chat-mark {
+  color: var(--fg-soft);
 }
 
 /* ---- 侧栏底部的额度 ---- */

package/web/css/skills.css

@@ -1,4 +1,4 @@
-/* ---------- 技能页（版式沿用定时任务页的 .tasks-page / .task-card） ---------- */
+/* ---------- 技能（设置里的一页，卡片沿用定时任务页的 .task-card） ---------- */
 
 .skill-head-btns {
   display: flex;
@@ -366,3 +366,20 @@
     flex: 1 1 100%;
   }
 }
+
+/* 设置里的技能页 */
+.skills-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.skills-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.skills-head .skill-note {
+  flex: 1;
+}