agent-loft 0.2.11 → 0.2.13

package/README.md

@@ -73,6 +73,8 @@ agent-loft service install
 
 聊天里的命令（飞书和 Web 通用；Web 输入框打 `/` 会弹出命令补全，飞书里打 `/` 会弹出机器人的指令面板（agent-loft 自动注册，约 5～8 分钟生效；只发一个 `/` 也会回一张可点击的命令卡片），顺序和显示项在 设置 → 命令 里调整）：`/new` `/fork` `/sessions [all]` `/resume <id>` `/model [名称]` `/effort <程度>` `/agent [名称]`（或者直接发 `/claude`、`/codex`）`/stop` `/cd <目录>` `/pwd` `/status` `/approve <id> allow-once|allow-always|allow-session|deny` `/help`
 
+自定义命令：设置 → 命令 → 「添加命令」，填命令名、说明和一段提示词，之后发 `/命令名 参数` 就会把这段提示词发给 agent（提示词里的 `$ARGUMENTS` 换成参数，没写就把参数接在后面）。按 agent 分开存，可以编辑、删除，也会同步到飞书指令面板。
+
 ## 安全
 
 这个服务能让 agent 在你的机器上执行命令，等于一个远程 shell。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-loft",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "type": "module",
   "description": "多个 agent 的工作台：把本机 Claude Code / Codex 放到一处统一管理，用飞书和 Web 页面随时驱动——会话、审批、模型切换都共用",
   "keywords": [

package/src/agents/claude/driver.ts

@@ -136,12 +136,24 @@ export class ClaudeDriver implements AgentDriver {
       // 运行时带着 timestamp（ISO 字符串），类型声明里没有
       const ts = Date.parse((msg as { timestamp?: string }).timestamp ?? "");
       if (msg.type === "user") {
+        // Claude Code 自己塞进记录的「用户消息」不是人发的：后台命令跑完的 <task-notification> 等，
+        // 记录里 origin.kind 不是 human。老记录可能没有 origin，再按正文开头兜底
+        const origin = (msg as { origin?: { kind?: string } }).origin;
+        // 它触发的那轮回复仍单独成一条（和实时看到的一样），不并进上一条回复
+        if (origin?.kind && origin.kind !== "human") {
+          flush();
+          continue;
+        }
         const texts = blocks.filter((b) => b.type === "text" && b.text).map((b) => b.text!);
         if (texts.length === 0) continue; // 纯 tool_result
         // 我们自己拼进去的附件清单：从正文里拆出来，单独作为附件给前端展示
         const { text, attachments } = splitAttachmentNote(texts.join("\n"));
         if (!text && attachments.length === 0) continue;
         if (text.startsWith("<command-") || text.startsWith("<local-command")) continue;
+        if (text.startsWith("<task-notification>")) {
+          flush();
+          continue;
+        }
         flush();
         out.push({
           role: "user",

package/src/channels/feishu/cards.ts

@@ -255,7 +255,12 @@ export function commandListCard(params: {
     { tag: "hr" },
   ];
   for (const c of shown) {
-    const tag = c.source === "agent" ? ` <font color='grey'>· ${params.agentLabel}</font>` : "";
+    const tag =
+      c.source === "agent"
+        ? ` <font color='grey'>· ${params.agentLabel}</font>`
+        : c.source === "custom"
+          ? " <font color='grey'>· 自定义</font>"
+          : "";
     const text = `**${usageOf(c)}**${tag}\n<font color='grey'>${oneLine(c.description) || "（无说明）"}</font>`;
     elements.push({
       tag: "column_set",

package/src/channels/web/api.ts

@@ -4,6 +4,7 @@ import fs from "node:fs";
 import path from "node:path";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import { AGENT_IDS, config, listWorkspaceDirs, resolveWorkspacePath, saveConfig, type AppConfig } from "../../core/config.js";
+import { cleanCustomCommands } from "../../core/command-catalog.js";
 import { hub } from "../../core/hub.js";
 import { interactions } from "../../core/interactions.js";
 import { approve, listApproved, listPending, revoke } from "../../core/pairing.js";
@@ -183,11 +184,20 @@ function applyConfig(input: Partial<AppConfig>): void {
     const names = (v: unknown) =>
       Array.isArray(v) ? [...new Set(v.filter((s): s is string => typeof s === "string" && s.length > 0 && s.length < 128))] : null;
     for (const id of AGENT_IDS) {
-      const prefs = (input.commands as Record<string, { order?: unknown; hidden?: unknown } | undefined>)[id];
+      const prefs = (input.commands as Record<string, { order?: unknown; hidden?: unknown; custom?: unknown } | undefined>)[id];
       if (!prefs) continue;
+      let custom = next.commands[id].custom;
+      if (prefs.custom !== undefined) {
+        try {
+          custom = cleanCustomCommands(prefs.custom, true);
+        } catch (err) {
+          throw new HttpError(400, err instanceof Error ? err.message : String(err));
+        }
+      }
       next.commands[id] = {
         order: names(prefs.order) ?? next.commands[id].order,
         hidden: names(prefs.hidden) ?? next.commands[id].hidden,
+        custom,
       };
     }
   }

package/src/channels/web/server.ts

@@ -162,8 +162,8 @@ function watching(key: string): boolean {
   return false;
 }
 
-/** 通知正文用：去掉 markdown 记号，压成一行 */
-export function plainPreview(text: string, max = 120): string {
+/** 通知正文用：去掉 markdown 记号，压成一行。40 字在 iPhone 通知收起时能完整显示 */
+export function plainPreview(text: string, max = 40): string {
   const plain = text
     .replace(/```[\s\S]*?```/g, " [代码] ")
     .replace(/!\[[^\]]*\]\([^)]*\)/g, " [图片] ")

package/src/core/command-catalog.ts

@@ -1,7 +1,8 @@
 // 命令目录：输入「/」时给用户看的那张表。
 //
-// 两种来源：
+// 三种来源：
 //   - agent-loft 自己的命令（/new /status …），由 hub 拦下来执行，所有 agent 通用；
+//   - 用户自定义命令（设置 → 命令里添加）：一段预设的提示词，发送时展开成这段话交给 agent；
 //   - agent 原生命令（Claude 的 skills、/compact 之类），agent-loft 不认识，原样转给 agent。
 // 顺序和隐藏按 agent 分开存在配置里（设置 → 命令），用户自己排。
 
@@ -30,17 +31,88 @@ export const BUILTIN_COMMANDS: BuiltinSpec[] = [
 /** agent 自己报上来的命令 */
 export type AgentCommand = { name: string; description: string; args?: string };
 
+/**
+ * 用户自定义命令。prompt 里的 $ARGUMENTS 换成命令后面跟的参数；
+ * 没写 $ARGUMENTS 又带了参数，参数接在提示词后面另起一段。
+ */
+export type CustomCommand = { name: string; description: string; prompt: string };
+
+/** 自定义命令名：和飞书指令同样的规则（小写字母、数字、- _，最长 32），这样能原样同步到飞书 */
+export const CUSTOM_NAME = /^[a-z0-9][a-z0-9_-]{0,31}$/;
+
 export type CommandEntry = {
   name: string;
   args?: string;
   description: string;
-  source: "agent-loft" | "agent";
+  source: "agent-loft" | "custom" | "agent";
+  /** 自定义命令的提示词（设置页编辑用） */
+  prompt?: string;
   /** 不带参数就能直接执行（飞书卡片上给按钮、Web 里回车直接发） */
   runnable: boolean;
   hidden: boolean;
 };
 
-export type CommandPrefs = { order: string[]; hidden: string[] };
+export type CommandPrefs = { order: string[]; hidden: string[]; custom?: CustomCommand[] };
+
+/**
+ * 整理自定义命令列表。strict（Web 保存时）遇到不合规的直接报错，提示具体哪条；
+ * 否则（读配置文件时，可能是手改的）悄悄丢掉不合规的。
+ */
+export function cleanCustomCommands(list: unknown, strict = false): CustomCommand[] {
+  const fail = (msg: string) => {
+    if (strict) throw new Error(msg);
+  };
+  if (!Array.isArray(list)) {
+    fail("自定义命令格式不对");
+    return [];
+  }
+  const builtin = new Set(BUILTIN_COMMANDS.map((c) => c.name));
+  const out: CustomCommand[] = [];
+  for (const raw of list as Partial<CustomCommand>[]) {
+    const name = typeof raw?.name === "string" ? raw.name.trim().replace(/^[/／]/, "").toLowerCase() : "";
+    const prompt = typeof raw?.prompt === "string" ? raw.prompt.trim() : "";
+    const description = typeof raw?.description === "string" ? raw.description.trim().slice(0, 200) : "";
+    if (!CUSTOM_NAME.test(name)) {
+      fail(`命令名「${name || "（空）"}」不合规：只能用小写字母、数字、- 和 _，以字母或数字开头，最长 32 个字符`);
+      continue;
+    }
+    if (builtin.has(name)) {
+      fail(`/${name} 是 agent-loft 内置命令，换个名字`);
+      continue;
+    }
+    if (out.some((c) => c.name === name)) {
+      fail(`/${name} 重复了`);
+      continue;
+    }
+    if (!prompt) {
+      fail(`/${name} 的提示词不能为空`);
+      continue;
+    }
+    if (prompt.length > 20000) {
+      fail(`/${name} 的提示词太长（最多 20000 字）`);
+      continue;
+    }
+    out.push({ name, description, prompt });
+  }
+  return out;
+}
+
+/**
+ * 整条消息是一条自定义命令时，展开成它的提示词；不是就返回 null（照原样处理）。
+ * 和内置命令一样，只认「整条消息就是命令」：多行的、不认识的名字都不展开。
+ */
+export function expandCustomCommand(raw: string, custom: CustomCommand[] | undefined): string | null {
+  if (!custom?.length) return null;
+  const text = raw.trim().replace(/^／/, "/");
+  if (!text.startsWith("/") || text.includes("\n")) return null;
+  const m = /^\/(\S+)(?:\s+([\s\S]*))?$/.exec(text);
+  if (!m) return null;
+  const cmd = custom.find((c) => c.name === m[1]!.toLowerCase());
+  if (!cmd) return null;
+  const args = (m[2] ?? "").trim();
+  if (cmd.prompt.includes("$ARGUMENTS")) return cmd.prompt.split("$ARGUMENTS").join(args).trim();
+  return args ? `${cmd.prompt.trim()}\n\n${args}` : cmd.prompt.trim();
+}
 
 /** 参数里有必填项（尖括号）就不能一键执行 */
 function needsArgs(args: string | undefined): boolean {
@@ -73,6 +145,21 @@ export function buildCatalog(params: {
     hidden: false,
   }));
   const taken = new Set(BUILTIN_COMMANDS.map((c) => c.name));
+  // 自定义命令：和内置重名的不收（保存时已经拦过，这里兜底手改配置的情况）；原生命令和它重名时让给它
+  const custom: CommandEntry[] = [];
+  for (const c of params.prefs?.custom ?? []) {
+    if (!CUSTOM_NAME.test(c.name) || taken.has(c.name)) continue;
+    taken.add(c.name);
+    custom.push({
+      name: c.name,
+      ...(c.prompt.includes("$ARGUMENTS") ? { args: "[参数]" } : {}),
+      description: c.description,
+      source: "custom",
+      prompt: c.prompt,
+      runnable: true,
+      hidden: false,
+    });
+  }
   const seen = new Set<string>();
   const native: CommandEntry[] = [];
   for (const c of params.native) {
@@ -89,7 +176,7 @@ export function buildCatalog(params: {
     });
   }
 
-  const all = [...builtin, ...native];
+  const all = [...builtin, ...custom, ...native];
   const order = params.prefs?.order ?? [];
   const hidden = new Set(params.prefs?.hidden ?? []);
   const rank = new Map(order.map((name, i) => [name, i]));

package/src/core/config.ts

@@ -6,7 +6,7 @@ import fs from "node:fs";
 import path from "node:path";
 import crypto from "node:crypto";
 import { configPath, ensureDirs, readJson, writeJsonAtomic } from "../home.js";
-import type { CommandPrefs } from "./command-catalog.js";
+import { cleanCustomCommands, type CommandPrefs } from "./command-catalog.js";
 
 
 export type SandboxMode = "read-only" | "workspace-write" | "danger-full-access";
@@ -97,7 +97,7 @@ export function defaultConfig(): AppConfig {
       },
     },
     web: { enabled: true, host: "0.0.0.0", port: 8800, passwordHash: "", trustedProxies: ["127.0.0.1", "::1"], quotaRefreshMin: 10 },
-    commands: { claude: { order: [], hidden: [] }, codex: { order: [], hidden: [] } },
+    commands: { claude: { order: [], hidden: [], custom: [] }, codex: { order: [], hidden: [], custom: [] } },
     feishu: { watchdogMs: 10 * 60 * 1000, bots: [] },
   };
 }
@@ -132,6 +132,11 @@ function normalizeBot(raw: Partial<FeishuBotConfig>): FeishuBotConfig {
   };
 }
 
+/** 自定义命令可能是手改进配置文件的：不合规的丢掉，别让一条坏数据把命令列表搞崩 */
+function normalizeCommands(cfg: AppConfig): void {
+  for (const id of AGENT_IDS) cfg.commands[id].custom = cleanCustomCommands(cfg.commands[id].custom);
+}
+
 let current: AppConfig | null = null;
 const listeners = new Set<(next: AppConfig, prev: AppConfig) => void>();
 
@@ -142,6 +147,7 @@ export function loadConfig(): AppConfig {
   const merged = mergeDefaults(defaultConfig(), raw);
   merged.workspaceRoot = path.resolve(merged.workspaceRoot);
   merged.feishu.bots = merged.feishu.bots.map(normalizeBot);
+  normalizeCommands(merged);
   current = merged;
   if (!raw) writeJsonAtomic(configPath, merged);
   watchExternalEdits();
@@ -167,6 +173,7 @@ function watchExternalEdits(): void {
         const next = mergeDefaults(defaultConfig(), raw);
         next.workspaceRoot = path.resolve(next.workspaceRoot);
         next.feishu.bots = next.feishu.bots.map(normalizeBot);
+        normalizeCommands(next);
         if (JSON.stringify(next) === JSON.stringify(current)) return;
         const prev = current;
         current = next;

package/src/core/hub.ts

@@ -38,7 +38,7 @@ import type {
   StepKind,
   UserInput,
 } from "./types.js";
-import { buildCatalog, type AgentCommand, type CommandEntry, type CommandPrefs } from "./command-catalog.js";
+import { buildCatalog, expandCustomCommand, type AgentCommand, type CommandEntry, type CommandPrefs } from "./command-catalog.js";
 import { helpText, type ParsedCommand } from "./commands.js";
 
 // ---------- 事件 ----------
@@ -655,6 +655,10 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
   send(key: string, input: UserInput, origin: Origin, gen?: InputGen): void {
     const conv = getConversation(key);
     if (!conv) throw new Error(`会话不存在：${key}`);
+    // 用户自定义命令（设置 → 命令）：展开成预设的提示词再发，界面上和 agent 收到的都是展开后的内容
+    const custom = (config().commands as Record<string, CommandPrefs | undefined>)[conv.agent]?.custom;
+    const expanded = expandCustomCommand(input.text, custom);
+    if (expanded !== null) input = { ...input, text: expanded };
     const g = gen ?? this.generation(key);
     const cancelled = () => {
       if (this.stopGeneration(key) !== g.stop) {

package/web/app.js

@@ -45,6 +45,7 @@ const ICON = {
   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>',
@@ -68,6 +69,27 @@ ICON.claude = (() => {
 })();
 ICON.codex = ICON.logo;
 
+/**
+ * 星星加载动画（回复末尾、打开会话时用）。开屏那个带台面的完整 logo 动画直接写在 index.html 里。
+ * 每个实例的渐变 id 唯一，避免页面里有隐藏的同 id 渐变时画不出来。
+ * 回复流式输出时整条消息会反复重建，动画按全局时钟设负的起始延迟，重建后接着播、不会一抖一抖地重来。
+ */
+let loaderSeq = 0;
+
+/** 只有 logo 中间那颗大星，一边旋转一边放大缩小 */
+const STARS_MS = 1800;
+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;
+}
+
 function agentIcon(id, cls = "agent-icon") {
   return h("span", { class: cls, html: ICON[id] ?? ICON.laptop });
 }
@@ -120,6 +142,28 @@ function formatDuration(ms) {
   return `${m}分${s ? `${s}秒` : ""}`;
 }
 
+/** 回复进行中的实时用时：整秒跳动，12秒 / 3分05秒 / 1小时05分 */
+function liveDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hr = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (hr > 0) return `${hr}小时${String(m).padStart(2, "0")}分`;
+  if (m > 0) return `${m}分${String(s).padStart(2, "0")}秒`;
+  return `${s}秒`;
+}
+
+/** 服务端时间 - 本机时间。事件里的 ts 是服务端时钟，算用时要换算过来，免得两边时钟不准 */
+let clockSkew = 0;
+const serverNow = () => Date.now() + clockSkew;
+
+/** 所有进行中的用时一秒刷一次，只改文字，不重建消息 */
+setInterval(() => {
+  for (const el of document.querySelectorAll(".ai-elapsed[data-start]")) {
+    el.textContent = liveDuration(serverNow() - Number(el.dataset.start));
+  }
+}, 1000);
+
 /** 老版本记下的脚注是「用时 1234.5s」，显示时也换成时 / 分 / 秒 */
 function tidyFooter(footer) {
   return footer?.replace(/用时 ([\d.]+)s/, (_, s) => `用时 ${formatDuration(Number(s) * 1000)}`) ?? "";
@@ -478,7 +522,10 @@ async function boot() {
   WS.connect();
   void loadQuota();
   const fromHash = decodeURIComponent(location.hash.slice(1));
+  // 地址里带了会话就打开它；否则打开「最近」里最近活跃的那个对话，一个都没有才进新对话页
+  const latest = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt)[0];
   if (fromHash && S.convs.has(fromHash)) await openConversation(fromHash);
+  else if (latest) await openConversation(latest.key);
   else newDraft();
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker.register("/sw.js").catch(() => {});
@@ -1348,6 +1395,7 @@ function newDraft() {
   S.current = null;
   S.items = [];
   S.turnAi = null;
+  turnStartAt = null;
   S.uploads = [];
   setBusy(false);
   history.replaceState(null, "", location.pathname);
@@ -1387,13 +1435,14 @@ async function openConversation(key) {
   S.current = key;
   S.items = [];
   S.turnAi = null;
+  turnStartAt = null;
   S.uploads = [];
   renderChips();
   history.replaceState(null, "", `#${encodeURIComponent(key)}`);
   WS.presence();
   renderTopbar();
   renderSidebar();
-  fill(ui.msgInner, h("div", { class: "empty" }, h("span", { class: "spinner" })));
+  fill(ui.msgInner, h("div", { class: "empty" }, starsLoader("lg")));
   let data;
   for (let attempt = 0; ; attempt++) {
     try {
@@ -1414,6 +1463,7 @@ async function openConversation(key) {
   if (token !== S.loadToken) return; // 期间又切到别的会话了
   S.convs.set(key, data.info);
   S.allowedAgents = data.allowedAgents;
+  if (Number.isFinite(data.serverTime)) clockSkew = data.serverTime - Date.now();
   fill(ui.msgInner, );
   for (const m of data.messages) {
     if (m.role === "user") addItem({ type: "user", text: m.text, files: m.attachments ?? [], origin: null });
@@ -1629,7 +1679,19 @@ function renderAi(item) {
     "div",
     { class: "msg-ai" },
     steps,
-    body ? renderMarkdown(body) : working && item.steps.length === 0 ? h("div", { class: "thinking" }, h("span", { class: "shimmer" }, "思考中…")) : null,
+    body ? renderMarkdown(body) : null,
+    // 还在回复：末尾挂上星星动画和实时用时；什么都还没出来时旁边带一句「思考中…」
+    working
+      ? h(
+          "div",
+          { class: "thinking" },
+          starsLoader(),
+          !body && item.steps.length === 0 ? h("span", { class: "shimmer" }, "思考中…") : null,
+          item.startAt
+            ? h("span", { class: "ai-elapsed", "data-start": item.startAt }, liveDuration(serverNow() - item.startAt))
+            : null,
+        )
+      : null,
     item.error ? h("div", { class: "error-box" }, item.error) : null,
     item.done && !item.segment && (body || item.footer)
       ? h(
@@ -1647,9 +1709,17 @@ function renderAi(item) {
   );
 }
 
-function currentAi() {
+/**
+ * 这一轮的开始时间（服务端时钟）：从用户发出那条消息算起。中途插了授权 / 提问卡片、
+ * 回复拆成好几段时，后面的段接着这个时间算，显示的是整轮的总用时。
+ * 没有用户消息就开始的一轮（比如后台任务跑完 agent 自己接着干），从第一个事件算起。
+ */
+let turnStartAt = null;
+
+function currentAi(ts) {
   if (!S.turnAi || S.turnAi.done) {
-    S.turnAi = addItem({ type: "ai", steps: [], committed: "", partial: "", done: false });
+    turnStartAt ??= ts ?? serverNow();
+    S.turnAi = addItem({ type: "ai", steps: [], committed: "", partial: "", done: false, startAt: turnStartAt });
   }
   return S.turnAi;
 }
@@ -1668,31 +1738,33 @@ function applyEvent(env) {
         S.items = S.items.filter((i) => i !== S.turnAi);
         S.turnAi = null;
       }
+      // 上一轮还没结束时发的消息会排队，不改正在进行那一轮的开始时间
+      if (!S.turnAi || S.turnAi.done) turnStartAt = env.ts;
       addItem({ type: "user", text: ev.text, files: ev.files ?? ev.attachments, origin: ev.origin });
-      currentAi();
+      currentAi(env.ts);
       return;
     }
     case "step": {
-      const ai = currentAi();
+      const ai = currentAi(env.ts);
       ai.steps.push(ev.text);
       updateItem(ai);
       return;
     }
     case "delta": {
-      const ai = currentAi();
+      const ai = currentAi(env.ts);
       ai.partial += ev.text;
       updateItem(ai);
       return;
     }
     case "text": {
-      const ai = currentAi();
+      const ai = currentAi(env.ts);
       ai.committed += (ai.committed ? "\n\n" : "") + ev.text;
       ai.partial = "";
       updateItem(ai);
       return;
     }
     case "result": {
-      const ai = currentAi();
+      const ai = currentAi(env.ts);
       if (!ai.committed && ev.text) ai.committed = ev.text;
       ai.partial = "";
       ai.done = true;
@@ -1701,6 +1773,7 @@ function applyEvent(env) {
       ai.anchor = ev.anchor;
       updateItem(ai);
       S.turnAi = null;
+      turnStartAt = null;
       return;
     }
     case "error": {
@@ -1710,6 +1783,7 @@ function applyEvent(env) {
         updateItem(S.turnAi);
         S.turnAi = null;
       } else addItem({ type: "error", text: ev.message });
+      turnStartAt = null;
       return;
     }
     case "notice":
@@ -1722,6 +1796,7 @@ function applyEvent(env) {
         updateItem(S.turnAi);
         S.turnAi = null;
       }
+      if (!ev.busy) turnStartAt = null;
       return;
     case "meta":
       return;
@@ -2364,6 +2439,7 @@ function renderSlashMenu(items, error) {
           h("span", { class: "slash-name" }, `/${c.name}`),
           c.args ? h("span", { class: "slash-args" }, c.args) : null,
           c.source === "agent" ? h("span", { class: "badge" }, agentLabel(currentAgentId())) : null,
+          c.source === "custom" ? h("span", { class: "badge" }, "自定义") : null,
         ),
         h("div", { class: "slash-desc" }, oneLine(c.description, 120) || "（无说明）"),
       ),
@@ -3110,8 +3186,10 @@ async function saveConfig(cfg, patch) {
     renderTopbar();
     renderSidebar();
     renderContext();
+    return true;
   } catch (err) {
     toast(err.message);
+    return false;
   }
 }
 
@@ -3224,9 +3302,60 @@ function modelPicker(agent, model, effort, defaultLabel) {
   return { modelEl: modelSlot, effortEl: effortSlot, model: () => getModel(), effort: () => getEffort() };
 }
 
+/** agent-loft 内置命令名（和服务端 BUILTIN_COMMANDS 一致），自定义命令不能用 */
+const BUILTIN_NAMES = ["new", "status", "stop", "model", "effort", "sessions", "resume", "fork", "agent", "claude", "codex", "cd", "pwd", "autoedit", "approve", "help"];
+
+/**
+ * 添加 / 编辑一条自定义命令。onSave 返回 true 才关窗；失败（比如服务端校验没过）留着让用户改。
+ * 规则和服务端一致：名字只能小写字母、数字、- _（飞书指令同款规则），不能和其它命令重名。
+ */
+function customDialog({ agent, entry, taken }, onSave) {
+  const name = h("input", { value: entry?.name ?? "", placeholder: "比如 review", autocomplete: "off", spellcheck: "false" });
+  const desc = h("input", { value: entry?.description ?? "", placeholder: "在命令列表里显示的一句话说明（可选）", maxlength: 200 });
+  const prompt = h("textarea", { rows: 8, placeholder: "发送这条命令时，实际发给 agent 的内容" });
+  prompt.value = entry?.prompt ?? "";
+  const err = h("div", { class: "error-text" });
+  const ok = h("button", { class: "btn primary" }, entry ? "保存" : "添加");
+  const builtin = new Set(BUILTIN_NAMES);
+  const submit = async () => {
+    const n = name.value.trim().replace(/^[/／]/, "").toLowerCase();
+    const p = prompt.value.trim();
+    let problem = "";
+    if (!/^[a-z0-9][a-z0-9_-]{0,31}$/.test(n)) problem = "命令名只能用小写字母、数字、- 和 _，以字母或数字开头，最长 32 个字符";
+    else if (builtin.has(n)) problem = `/${n} 是 agent-loft 内置命令，换个名字`;
+    else if (taken.includes(n)) problem = `已经有 /${n} 这条命令了，换个名字`;
+    else if (!p) problem = "提示词不能为空";
+    err.textContent = problem;
+    if (problem) return;
+    ok.disabled = true;
+    const saved = await onSave({ name: n, description: desc.value.trim(), prompt: p });
+    ok.disabled = false;
+    if (saved) close();
+  };
+  ok.onclick = () => void submit();
+  const close = modal({
+    title: entry ? `编辑 /${entry.name}` : `添加命令 · ${agentLabel(agent)}`,
+    body: h(
+      "div",
+      { class: "modal-body" },
+      field("命令名", h("div", { class: "cmd-name-input" }, h("span", {}, "/"), name), "小写字母、数字、- 和 _，最长 32 个字符（和飞书指令规则一致，才能同步到飞书）"),
+      field("说明", desc),
+      field(
+        "提示词",
+        prompt,
+        "发送「/命令名 参数」时，把这段话发给 agent。提示词里写 $ARGUMENTS 会换成参数；不写的话，参数接在提示词后面。",
+      ),
+      err,
+    ),
+    foot: h("div", { class: "modal-foot" }, ok),
+  });
+  setTimeout(() => (entry ? prompt : name).focus(), 0);
+}
+
 /**
  * 设置 → 命令：每个 agent 一张表，拖动或用箭头排序，取消勾选就不在「/」列表里出现。
  * 保存时把整张表的顺序存下来；以后新装的 skill 不在表里，会自动接在最后。
+ * 用户可以自己添加命令（一段预设的提示词），自己加的可以编辑、删除，增删改后立即保存。
  */
 function commandsTab(cfg, panel) {
   const agentIds = Object.keys(cfg.agents);
@@ -3313,9 +3442,16 @@ function commandsTab(cfg, panel) {
               { class: "t" },
               h("code", {}, commandUsage(c)),
               c.source === "agent" ? h("span", { class: "badge" }, agentLabel(agent)) : null,
+              c.source === "custom" ? h("span", { class: "badge custom" }, "自定义") : null,
             ),
-            h("div", { class: "s" }, oneLine(c.description, 100) || "（无说明）"),
+            h("div", { class: "s" }, oneLine(c.description || c.prompt || "", 100) || "（无说明）"),
           ),
+          c.source === "custom"
+            ? [
+                h("button", { class: "icon-btn", title: "编辑", onclick: () => editCustom(c) }, icon("edit")),
+                h("button", { class: "icon-btn danger", title: "删除", onclick: () => deleteCustom(c) }, icon("trash")),
+              ]
+            : null,
           h("button", { class: "icon-btn", title: "置顶", onclick: () => move(i, 0) }, "⤒"),
           h("button", { class: "icon-btn", title: "上移", onclick: () => move(i, i - 1) }, "↑"),
           h("button", { class: "icon-btn", title: "下移", onclick: () => move(i, i + 1) }, "↓"),
@@ -3326,10 +3462,46 @@ function commandsTab(cfg, panel) {
   };
 
   const save = async (prefs) => {
-    await saveConfig(cfg, { commands: { [agent]: prefs } });
+    const ok = await saveConfig(cfg, { commands: { [agent]: prefs } });
     slash.cache.clear();
     // 服务端 3 秒防抖后才开始同步，稍等再看状态
-    setTimeout(() => void refreshFeishu(), 3500);
+    if (ok) setTimeout(() => void refreshFeishu(), 3500);
+    return ok;
+  };
+  const prefsOf = (rows) => ({
+    order: rows.map((c) => c.name),
+    hidden: rows.filter((c) => c.hidden).map((c) => c.name),
+    custom: rows.filter((c) => c.source === "custom").map(({ name, description, prompt }) => ({ name, description, prompt })),
+  });
+
+  // ---- 自定义命令：增删改都立即保存（连同当前的排序和显示），保存失败就不动列表 ----
+  const commit = async (rows) => {
+    if (!(await save(prefsOf(rows)))) return false;
+    list = rows;
+    renderList();
+    return true;
+  };
+  const addCustom = () =>
+    customDialog({ agent, taken: list.map((c) => c.name) }, async (entry) => {
+      // 新命令放在已有的自定义命令后面；还没有的话放在 agent-loft 内置命令后面
+      const rows = [...list];
+      const lastCustom = rows.findLastIndex((c) => c.source === "custom");
+      const at = lastCustom >= 0 ? lastCustom + 1 : rows.findLastIndex((c) => c.source === "agent-loft") + 1;
+      rows.splice(at, 0, { ...entry, source: "custom", runnable: true, hidden: false });
+      return commit(rows);
+    });
+  const editCustom = (c) =>
+    customDialog({ agent, entry: c, taken: list.filter((x) => x !== c).map((x) => x.name) }, (entry) =>
+      commit(list.map((x) => (x === c ? { ...x, ...entry } : x))),
+    );
+  const deleteCustom = async (c) => {
+    const sure = await confirmDialog({
+      title: `删除 /${c.name}？`,
+      message: "删除后在「/」列表和飞书指令面板里都不再出现。",
+      confirmText: "删除",
+      danger: true,
+    });
+    if (sure) await commit(list.filter((x) => x !== c));
   };
 
   // ---- 飞书指令面板同步状态 ----
@@ -3397,7 +3569,12 @@ function commandsTab(cfg, panel) {
         "在输入框里打「/」时弹出的命令，按这里的顺序排列；保存后会自动同步到飞书机器人的指令面板。取消勾选的不会出现在列表里，但照样可以手动输入。带 agent 名标记的是 agent 自己的命令（skills 等），会原样转给 agent。",
       ),
       tabs,
-      search,
+      h(
+        "div",
+        { class: "row cmd-tools" },
+        search,
+        h("button", { class: "btn", onclick: () => addCustom() }, icon("plus"), "添加命令"),
+      ),
       listBox,
       h(
         "div",
@@ -3406,7 +3583,7 @@ function commandsTab(cfg, panel) {
           "button",
           {
             class: "btn primary",
-            onclick: () => save({ order: list.map((c) => c.name), hidden: list.filter((c) => c.hidden).map((c) => c.name) }),
+            onclick: () => save(prefsOf(list)),
           },
           "保存",
         ),
@@ -3415,7 +3592,7 @@ function commandsTab(cfg, panel) {
           {
             class: "btn",
             onclick: async () => {
-              if (!(await confirmDialog({ title: "恢复默认？", message: `把 ${agentLabel(agent)} 的命令顺序和显示恢复成默认。`, confirmText: "恢复默认" }))) return;
+              if (!(await confirmDialog({ title: "恢复默认？", message: `把 ${agentLabel(agent)} 的命令顺序和显示恢复成默认（自定义命令保留）。`, confirmText: "恢复默认" }))) return;
               await save({ order: [], hidden: [] });
               await load(agent);
             },

package/web/index.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <div id="app"><div class="boot">加载中…</div></div>
+    <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>
     <script type="module" src="/app.js"></script>
   </body>
 </html>

package/web/style.css

@@ -1246,6 +1246,182 @@ a.att-file:hover {
   font-size: 14px;
 }
 
+/* 回复进行中的实时用时，跟在星星动画后面 */
+.ai-elapsed {
+  font-size: 13px;
+  color: var(--fg-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- logo 加载动画：三颗星依次跳起，台面跟着呼吸 ---------- */
+.loft-loader {
+  --size: 26px;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--size);
+  height: var(--size);
+  line-height: 0;
+}
+
+.loft-loader.xl {
+  --size: 72px;
+}
+
+.loft-loader svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.loft-loader path {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation-duration: 1.6s;
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
+  animation-fill-mode: both;
+  animation-delay: calc(var(--t, 0ms) + var(--d, 0ms));
+}
+
+.loft-loader .ll-star {
+  animation-name: loft-star;
+}
+
+.loft-loader .ll-l {
+  --d: 0ms;
+}
+
+.loft-loader .ll-c {
+  --d: 180ms;
+}
+
+.loft-loader .ll-r {
+  --d: 360ms;
+}
+
+.loft-loader .ll-plate {
+  animation-name: loft-plate;
+  --d: 260ms;
+}
+
+.loft-loader .ll-shadow {
+  animation-name: loft-shadow;
+  --d: 320ms;
+}
+
+@keyframes loft-star {
+  0%,
+  70%,
+  100% {
+    transform: translateY(0) scale(0.72);
+    opacity: 0.4;
+  }
+  28% {
+    transform: translateY(-22px) scale(1.06);
+    opacity: 1;
+  }
+  48% {
+    transform: translateY(0) scale(0.92);
+    opacity: 0.85;
+  }
+}
+
+@keyframes loft-plate {
+  0%,
+  100% {
+    opacity: 0.75;
+  }
+  45% {
+    opacity: 1;
+  }
+}
+
+@keyframes loft-shadow {
+  0%,
+  100% {
+    transform: translateY(-6px);
+    opacity: 0.32;
+  }
+  50% {
+    transform: translateY(6px);
+    opacity: 0.12;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loft-loader .ll-star {
+    animation-name: loft-star-calm;
+    animation-duration: 2.4s;
+  }
+  .loft-loader .ll-shadow {
+    animation: none;
+    opacity: 0.3;
+  }
+}
+
+/* 回复末尾的精简版：只有一颗星，旋转 + 放大缩小 */
+.loft-stars {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  line-height: 0;
+}
+
+/* 打开会话、读历史时用的大一号 */
+.loft-stars.lg {
+  width: 32px;
+  height: 32px;
+}
+
+.loft-stars svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.loft-stars path {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: loft-twirl 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite both;
+  animation-delay: var(--t, 0ms);
+}
+
+/* 四角星转 90° 正好回到原样，所以每轮转 180° 能无缝接上 */
+@keyframes loft-twirl {
+  0% {
+    transform: rotate(0deg) scale(0.6);
+    opacity: 0.55;
+  }
+  45% {
+    transform: rotate(110deg) scale(1.12);
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(180deg) scale(0.6);
+    opacity: 0.55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loft-stars path {
+    animation-name: loft-star-calm;
+    animation-duration: 2.4s;
+  }
+}
+
+@keyframes loft-star-calm {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
 .footer-note {
   font-size: 12px;
   color: var(--fg-faint);
@@ -2736,6 +2912,59 @@ button.list-item:hover {
   width: auto;
 }
 
+.cmd-row .icon-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.cmd-row .icon-btn.danger:hover {
+  color: var(--danger);
+}
+
+.cmd-row .badge.custom {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+}
+
+/* 筛选框 + 「添加命令」按钮一行 */
+.cmd-tools {
+  flex-wrap: nowrap;
+}
+
+.cmd-tools .input {
+  flex: 1;
+  min-width: 0;
+}
+
+.cmd-tools .btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cmd-tools .btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* 添加 / 编辑命令：命令名前面固定一个「/」 */
+.cmd-name-input {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cmd-name-input > span {
+  color: var(--fg-faint);
+  font-family: var(--mono);
+}
+
+.field .cmd-name-input input {
+  flex: 1;
+  font-family: var(--mono);
+}
+
 .brand-icon {
   display: inline-grid;
   width: 18px;