agent-loft 0.2.36 → 0.2.38

package/README.md

@@ -48,7 +48,7 @@ Logo 就是这个意思：一大两小几颗星（多个 agent）站在同一张
   - 输入框里的小圆环显示上下文窗口占用；模型按钮显示实际的模型和思考程度（如「Opus 5.5 high」）。
   - 滚动和 ChatGPT 一样：发出的问题顶到最上面、下面留白，回复长到屏幕底部才跟着往下滚；回复过程中自己滚动了就不再自动滚，下次发消息再恢复。
   - 定时发送：右上角「更多」→「定时发送」，默认排在 5 小时额度重置后 5 分钟（弹窗里提示 5 小时 / 7 天额度的重置时间），由服务端到点发出，关掉页面也会发。适合额度用完、要等刷新才能接着干活的时候。
-  - 侧栏分「最近」和「项目」两组：Web 会话按工作目录归类（目录可以拖动排序，右键可置顶），飞书机器人各占一行（右键看历史会话）；分叉出来的会话用虚线挂在原会话下面；会话标题由 agent 自动生成，双击重命名。
+  - 侧栏分「最近」和「项目」两组：Web 会话按工作目录归类（目录可以拖动排序，右键可置顶；排好的顺序跟着账号走、各设备一致，新消息不会打乱），飞书机器人各占一行（右键看历史会话）；分叉出来的会话用虚线挂在原会话下面；会话标题由 agent 自动生成，双击重命名。
   - 回复过程中接着发的消息排队，标着「排队中」，上一条回复完自动接着处理；点「打断并发送」停掉正在进行的回复、马上处理这条；点停止则连排着的一起取消（标「没有发出」）。
   - 太长的消息先收起，点「展开显示」看全文；对话里有 3 条以上消息时，右边有一列快速定位，鼠标移上去列出每条消息的开头，点一下跳过去。
   - 侧栏按页加载：「最近」先显示 10 条、每个项目目录先显示 5 条，点「展开显示」每次再拉 10 条。

package/package.json

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

package/src/channels/web/api.ts

@@ -26,6 +26,7 @@ import {
 } from "../../core/users.js";
 import type { SavedAttachment } from "../../core/types.js";
 import { dailyUsage } from "../../core/usage.js";
+import { appendDirOrder, getDirOrder, setDirOrder } from "../../core/ui-prefs.js";
 import {
   addMemoryItem,
   clearMemory,
@@ -558,6 +559,8 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
         // 展开着的目录带上翻页游标（没带 next 的目录前端还没拉过）
         dirs: dirsOf(all).map((d) => (dirPages.has(d.dir) ? { ...d, next: dirPages.get(d.dir)!.next } : d)),
       },
+      // 「项目」目录的顺序（拖拽排的），跟着账号走；null = 还没存过
+      dirOrder: getDirOrder(user.id) ?? null,
       pending,
       user: publicMe(user),
       remote: remoteStatus(user),
@@ -566,6 +569,14 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
     return;
   }
 
+  // ----- 侧栏「项目」目录顺序：order 整份换掉，append 只把新目录接在最后 -----
+  if (p === "/api/ui/dir-order" && method === "PUT") {
+    const body = await readJsonBody<{ order?: unknown; append?: unknown }>(req);
+    const order = body.order !== undefined ? setDirOrder(user.id, body.order) : appendDirOrder(user.id, body.append);
+    sendJson(res, 200, { order });
+    return;
+  }
+
   // ----- 系统通知（Web Push） -----
   if (p === "/api/push" && method === "GET") {
     sendJson(res, 200, { publicKey: vapidPublicKey(), subscriptions: listSubscriptions(pushOwnedBy(user.id)) });

package/src/core/personal.ts

@@ -6,6 +6,7 @@ import { deleteUserTasks } from "./tasks.js";
 import { purgeUserSkills } from "./skills.js";
 import type { Conversation } from "./store.js";
 import { getUser, legacyOwnerId } from "./users.js";
+import { deleteUiPrefs } from "./ui-prefs.js";
 
 /**
  * 这条对话该用谁的记忆。比会话列表的归属规则（users.ts 的 ownedBy）更严：
@@ -45,4 +46,5 @@ export function purgeUserData(userId: string): void {
   unlinkUser(userId);
   deleteUserTasks(userId);
   purgeUserSkills(userId);
+  deleteUiPrefs(userId);
 }

package/src/core/ui-prefs.ts

@@ -0,0 +1,65 @@
+// 每个用户的界面偏好，跟着账号走（换手机、换浏览器、桌面端都一样）。
+// 现在只有侧栏「项目」目录的顺序：用户拖过的顺序是固定的，新消息不会把目录顶到前面。
+import path from "node:path";
+import { dataDir, readJson, writeJsonAtomic } from "../home.js";
+
+type Prefs = { dirOrder?: string[] };
+
+const prefsPath = path.join(dataDir, "ui-prefs.json");
+let cache: Record<string, Prefs> | null = null;
+
+function load(): Record<string, Prefs> {
+  if (!cache) {
+    const raw = readJson<unknown>(prefsPath, {});
+    cache = raw && typeof raw === "object" && !Array.isArray(raw) ? (raw as Record<string, Prefs>) : {};
+  }
+  return cache;
+}
+
+function save(): void {
+  writeJsonAtomic(prefsPath, cache ?? {});
+}
+
+const MAX_DIRS = 2000;
+
+function cleanDirs(list: unknown): string[] {
+  if (!Array.isArray(list)) return [];
+  return [...new Set(list.filter((d): d is string => typeof d === "string" && d.length > 0 && d.length < 4096))].slice(0, MAX_DIRS);
+}
+
+/** 目录顺序；undefined = 这个用户还没在服务端存过（前端可以把本地的迁上来） */
+export function getDirOrder(userId: string): string[] | undefined {
+  return load()[userId]?.dirOrder;
+}
+
+/** 整份换掉（拖拽、置顶、按活跃重排） */
+export function setDirOrder(userId: string, order: unknown): string[] {
+  const all = load();
+  const dirOrder = cleanDirs(order);
+  all[userId] = { ...all[userId], dirOrder };
+  save();
+  return dirOrder;
+}
+
+/** 新出现的目录接在最后。只追加没有的，不动已有的名次 —— 别的设备同时在拖也不会被盖掉 */
+export function appendDirOrder(userId: string, dirs: unknown): string[] {
+  const all = load();
+  const cur = all[userId]?.dirOrder ?? [];
+  const add = cleanDirs(dirs).filter((d) => !cur.includes(d));
+  if (add.length === 0 && all[userId]?.dirOrder) return cur;
+  const dirOrder = [...cur, ...add].slice(0, MAX_DIRS);
+  all[userId] = { ...all[userId], dirOrder };
+  save();
+  return dirOrder;
+}
+
+export function deleteUiPrefs(userId: string): void {
+  const all = load();
+  if (!(userId in all)) return;
+  delete all[userId];
+  save();
+}
+
+export function resetUiPrefsForTest(): void {
+  cache = null;
+}

package/web/css/mobile.css

@@ -49,6 +49,35 @@
     display: none;
   }
 
+  /* 「/」「@」补全：键盘弹出后屏幕只剩一半，菜单改成一行一条、最多露出五条多一点，
+     露出半条好让人知道还能往下滑 */
+  .slash-menu {
+    bottom: calc(100% + 4px);
+    max-height: min(196px, 30vh);
+    padding: 4px;
+  }
+
+  .slash-item {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 7px 8px;
+  }
+
+  .slash-head {
+    flex: none;
+    max-width: 60%;
+  }
+
+  .slash-args {
+    display: none;
+  }
+
+  .slash-desc {
+    flex: 1;
+    min-width: 0;
+  }
+
   .ctx-bar {
     margin: 0 10px -22px;
     font-size: 13px;

package/web/css/remote.css

@@ -53,6 +53,17 @@
   }
 }
 
+/* 顶栏下沿的渐变、模糊是给滚动的聊天内容用的：远程控制页下面是工具栏，会被它盖住一截 */
+.main.remote-view .topbar {
+  padding-bottom: 8px;
+  background: var(--bg);
+}
+
+.main.remote-view .topbar::before,
+.main.remote-view .topbar::after {
+  display: none;
+}
+
 .remote-head {
   display: flex;
   align-items: center;
@@ -313,18 +324,48 @@
   opacity: 0.4;
 }
 
-/* 浏览器全屏时只剩画面 */
-.remote-body:fullscreen .desk-status {
+/* 全屏时只剩画面 */
+.remote-body.full .desk-status {
   display: none;
 }
 
-/* 不支持元素全屏（iPhone）：铺满整个页面，盖住顶栏、侧栏，弹窗和提示还在上面 */
+/* 不支持元素全屏（iPhone）：铺满整个页面，盖住顶栏、侧栏，弹窗和提示还在上面。
+   左右不留安全区：画面本来就居中、两边是黑边，刘海落在黑边里 */
 .remote-body.desk-full {
   position: fixed;
   inset: 0;
   z-index: 35;
   background: #111;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + var(--kb-inset, 0px)) env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) 0 var(--kb-inset, 0px);
+}
+
+/* 全屏时下面那排键默认收起，左上角的按钮拉出来；拉出来时是深色、矮一点的一条 */
+.remote-body.full .desk-keys {
+  padding: 4px max(8px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
+  border-top: none;
+  background: #111;
+}
+
+.remote-body.full:not(.keys-open) .desk-keys {
+  display: none;
+}
+
+/* 有软键盘垫着时不用再让出底部安全区 */
+.remote-body.desk-full .desk-keys {
+  padding-bottom: calc(4px + max(0px, env(safe-area-inset-bottom) - var(--kb-inset, 0px)));
+}
+
+.remote-body.full .desk-keys .term-key {
+  height: 30px;
+  border-color: #333;
+  background: #262626;
+  color: #eee;
+}
+
+.remote-body.full .desk-keys .term-key.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
 }
 
 /* 没连着时画面中间的「连接桌面」 */
@@ -341,7 +382,7 @@
 }
 
 .desk-idle[hidden],
-.desk-exitfull[hidden] {
+.desk-fbtn[hidden] {
   display: none;
 }
 
@@ -362,12 +403,26 @@
   height: 16px;
 }
 
-/* 全屏时左上角「退出全屏」 */
-.desk-exitfull {
+/* 全屏时左上角「退出全屏」「按键」 */
+.desk-fullbar {
   position: absolute;
-  left: 10px;
+  left: max(10px, env(safe-area-inset-left));
   top: 10px;
   z-index: 3;
+  display: flex;
+  gap: 8px;
+}
+
+.desk-fullbar[hidden] {
+  display: none;
+}
+
+.desk-fbtn.on {
+  background: var(--accent);
+  color: var(--accent-fg);
+}
+
+.desk-fbtn {
   display: grid;
   place-items: center;
   width: 34px;
@@ -378,7 +433,7 @@
   color: #fff;
 }
 
-.desk-exitfull svg {
+.desk-fbtn svg {
   width: 18px;
   height: 18px;
 }

package/web/views/desktop.js

@@ -57,8 +57,12 @@ export function showDesktop(pane, tools) {
       h("div", { class: "muted" }, "远程桌面未连接"),
       h("button", { class: "btn primary", onclick: reconnect }, icon("plug"), "连接桌面"),
     );
-    D.exitFull = h("button", { class: "desk-exitfull", hidden: true, title: "退出全屏", "aria-label": "退出全屏", onclick: () => setFull(false) }, icon("shrink"));
-    D.viewport = h("div", { class: "desk-viewport" }, D.screen, D.zoomBadge, D.hint, D.idle, D.exitFull);
+    D.keysBtn = isTouch
+      ? h("button", { class: "desk-fbtn", title: "按键", "aria-label": "按键", onclick: () => toggleFullKeys() }, icon("keyboard"))
+      : null;
+    D.exitFull = h("button", { class: "desk-fbtn", title: "退出全屏", "aria-label": "退出全屏", onclick: () => setFull(false) }, icon("shrink"));
+    D.fullBar = h("div", { class: "desk-fullbar", hidden: true }, D.exitFull, D.keysBtn);
+    D.viewport = h("div", { class: "desk-viewport" }, D.screen, D.zoomBadge, D.hint, D.idle, D.fullBar);
     D.keyInput = isTouch ? mobileKeyInput() : null;
     D.keyRow = isTouch ? keyRow() : null;
     fill(pane, D.status, D.viewport, D.keyRow, D.keyInput);
@@ -104,6 +108,8 @@ async function connect() {
   rfb.resizeSession = false;
   rfb.viewOnly = D.viewOnly;
   rfb.showDotCursor = true;
+  // 画面没铺满时的边：和外框一个颜色，别再多出一圈灰
+  rfb.background = "#111";
   rfb.qualityLevel = 6;
   rfb.compressionLevel = 2;
   rfb.addEventListener("connect", () => {
@@ -282,11 +288,25 @@ function setFull(on) {
   syncFull();
 }
 
-/** 全屏时画面上一个「退出全屏」（手机上没有 Esc；真全屏在电脑上按 Esc 就行，不显示） */
+/**
+ * 全屏时画面左上角「退出全屏」（手机上没有 Esc；真全屏在电脑上按 Esc 就行，不显示）。
+ * 手机上全屏时下面那排键先收起来，左上角的「按键」拉出来
+ */
 function syncFull() {
   if (!D.pane) return;
   const pseudo = D.pane.classList.contains("desk-full");
-  D.exitFull.hidden = !(pseudo || (isTouch && fsElement() === D.pane));
+  const full = pseudo || fsElement() === D.pane;
+  if (full !== D.pane.classList.contains("full")) {
+    D.pane.classList.toggle("full", full);
+    toggleFullKeys(false);
+  }
+  D.fullBar.hidden = !(pseudo || (isTouch && full));
+}
+
+function toggleFullKeys(open = !D.pane.classList.contains("keys-open")) {
+  D.pane.classList.toggle("keys-open", open);
+  D.keysBtn?.classList.toggle("on", open);
+  if (!open && document.activeElement === D.keyInput) D.keyInput.blur();
 }
 document.addEventListener("fullscreenchange", syncFull);
 document.addEventListener("webkitfullscreenchange", syncFull);

package/web/views/layout.js

@@ -14,7 +14,6 @@ import {
   reportDesktop,
   resetProjectOrder,
   setSideWidth,
-  sideState,
   startMarquee,
   startSideResize,
   stopMarquee,
@@ -197,7 +196,7 @@ function renderLayout() {
         ...(i > 0 ? [{ label: "置顶", onclick: () => moveProjectDir(dir, null) }, { label: "上移", onclick: () => moveProjectDir(dir, projDirs[i - 1]) }] : []),
         ...(i >= 0 && i < projDirs.length - 1 ? [{ label: "下移", onclick: () => moveProjectDir(dir, projDirs[i + 1], true) }] : []),
       ];
-      const reset = sideState.order.length ? [{ label: "恢复按最近活跃排序", onclick: resetProjectOrder }] : [];
+      const reset = projDirs.length > 1 ? [{ label: "按最近活跃重排", onclick: resetProjectOrder }] : [];
       const items = moves.length && reset.length ? [...moves, "sep", ...reset] : [...moves, ...reset];
       if (!items.length) return;
       e.preventDefault();

package/web/views/sidebar.js

@@ -195,17 +195,47 @@ function agentShort(id) {
 export const sideState = { open: [], more: [], folded: [], order: [], ...JSON.parse(localStorage.getItem("aim.side") || "{}") };
 
 /**
- * 「项目」目录的顺序：没手动排过时按最近活跃；拖过之后按 sideState.order，
- * 之后新出现的目录排在已排好的后面（同样按活跃），不会挤掉用户置顶的目录
+ * 「项目」目录的顺序固定按 sideState.order，新消息不会把目录顶到前面。
+ * 顺序存在服务端、跟着账号走（换设备也一样）；新出现的目录接在最后（几个一起出现时按活跃排），
+ * 接上之后名次也就定了
  */
 function orderProjectDirs(dirs) {
   const rank = new Map(sideState.order.map((d, i) => [d, i]));
   const ranked = dirs.filter((d) => rank.has(d)).sort((a, b) => rank.get(a) - rank.get(b));
-  return [...ranked, ...dirs.filter((d) => !rank.has(d))];
+  const fresh = dirs.filter((d) => !rank.has(d));
+  if (fresh.length && orderSynced) {
+    sideState.order = [...sideState.order, ...fresh];
+    saveSideState();
+    void putDirOrder({ append: fresh });
+  }
+  return [...ranked, ...fresh];
+}
+
+/** 拿到服务端存的顺序之前不往上写，免得这台设备本地的旧顺序盖掉别处排好的 */
+let orderSynced = false;
+
+function saveSideState() {
+  localStorage.setItem("aim.side", JSON.stringify(sideState));
+}
+
+async function putDirOrder(body) {
+  try {
+    const data = await api("/api/ui/dir-order", { method: "PUT", body });
+    // 追加时以服务端的为准（别的设备可能刚排过）
+    if (body.append && data?.order && data.order.join("\n") !== sideState.order.join("\n")) {
+      sideState.order = data.order;
+      saveSideState();
+      scheduleSidebar();
+    }
+  } catch (err) {
+    toast(`保存目录顺序失败：${err.message}`);
+  }
 }
 
 /** 当前侧栏里显示的目录顺序（renderSidebar 时记下，拖拽 / 右键菜单用） */
 export let projDirs = [];
+/** 同一批目录按最近活跃的顺序（「按最近活跃重排」用） */
+let projDirsByActivity = [];
 
 /** 把目录 dir 挪到 target 前面（after 为 true 时挪到后面）；target 为 null 表示挪到最前 */
 export function moveProjectDir(dir, target, after = false) {
@@ -215,14 +245,18 @@ export function moveProjectDir(dir, target, after = false) {
   if (idx < 0) return;
   list.splice(idx + (after ? 1 : 0), 0, dir);
   // 暂时没显示出来的目录（会话都被隐藏了之类）保留原来的名次，排在后面
-  sideState.order = [...list, ...sideState.order.filter((d) => !list.includes(d))];
-  localStorage.setItem("aim.side", JSON.stringify(sideState));
-  renderSidebar();
+  setProjectOrder([...list, ...sideState.order.filter((d) => !list.includes(d))]);
 }
 
+/** 按最近活跃重排一次，之后照样固定 */
 export function resetProjectOrder() {
-  sideState.order = [];
-  localStorage.setItem("aim.side", JSON.stringify(sideState));
+  setProjectOrder([...projDirsByActivity, ...sideState.order.filter((d) => !projDirsByActivity.includes(d))]);
+}
+
+function setProjectOrder(order) {
+  sideState.order = order;
+  saveSideState();
+  if (orderSynced) void putDirOrder({ order });
   renderSidebar();
 }
 
@@ -288,6 +322,17 @@ export function applyBootstrap(data) {
     st.next = pages.full ? null : sideState.open.includes(dir) ? (fetched.get(dir) ?? null) : undefined;
   }
   for (const [dir, next] of fetched) dirState(dir).next = next;
+  // 老版本服务端没有这个字段：顺序只存在本地
+  if ("dirOrder" in data) {
+    if (data.dirOrder) {
+      sideState.order = data.dirOrder;
+      saveSideState();
+    } else if (sideState.order.length) {
+      // 以前只存在这台设备上的顺序，第一次搬到服务端
+      void putDirOrder({ order: sideState.order });
+    }
+    orderSynced = true;
+  }
 }
 
 /** 拉下一页，合进 S.convs。失败了不自动重试（否则每次重绘都去拉），点「展开显示」再试 */
@@ -433,7 +478,7 @@ export function renderSidebar() {
     if (btn) nodes.push(btn);
   }
 
-  // ---- 项目：Web 会话按工作目录分组，目录按最近活跃排序 ----
+  // ---- 项目：Web 会话按工作目录分组，目录按用户排的顺序（见 orderProjectDirs） ----
   const byDir = new Map();
   for (const c of visible.filter((c) => c.channel === "web")) {
     if (!byDir.has(c.cwd)) byDir.set(c.cwd, []);
@@ -452,7 +497,8 @@ export function renderSidebar() {
   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 (dirAt.size) nodes.push(groupHead("项目", "@projects", projFolded));
-  projDirs = orderProjectDirs([...dirAt.keys()].sort((a, b) => dirAt.get(b) - dirAt.get(a)));
+  projDirsByActivity = [...dirAt.keys()].sort((a, b) => dirAt.get(b) - dirAt.get(a));
+  projDirs = orderProjectDirs(projDirsByActivity);
   if (dirAt.size && !projFolded) {
     const clearDrop = () => ui.convList.querySelectorAll(".drop-before, .drop-after").forEach((el) => el.classList.remove("drop-before", "drop-after"));
     const endDrag = () => {