agent-loft 0.2.23 → 0.2.24

package/README.md

@@ -46,7 +46,7 @@ Logo 就是这个意思：一大两小几颗星（多个 agent）站在同一张
   - 语音输入：用浏览器自带的语音识别（Chrome / Edge / Safari，需要 HTTPS）。
   - 新对话页：点大标题里的目录名，在目录树里逐层选工作目录；输入框上方选 agent，右下角选模型和思考程度。会话进行中用 `/agent` 切换 agent，模型和思考程度随时可换。
   - 输入框里的小圆环显示上下文窗口占用；模型按钮显示实际的模型和思考程度（如「Opus 5.5 high」）。
-  - 侧栏分「最近」和「项目」两组：Web 会话按工作目录归类，飞书机器人各占一行（右键看历史会话）；分叉出来的会话用虚线挂在原会话下面；会话标题由 agent 自动生成，双击重命名。
+  - 侧栏分「最近」和「项目」两组：Web 会话按工作目录归类（目录可以拖动排序，右键可置顶），飞书机器人各占一行（右键看历史会话）；分叉出来的会话用虚线挂在原会话下面；会话标题由 agent 自动生成，双击重命名。
   - 侧栏底部显示 Claude / Codex 的订阅额度（5 小时 / 7 天窗口，以及多久后重置）。
   - 「添加到主屏幕」后当 App 用；切到后台再回来会自动重连，补上错过的内容。
 - **系统通知**：Web 会话回复完成、出错、需要授权或提问时推送到手机 / 电脑（设置 → 通知 → 「在此设备开启通知」，可以发测试通知）。飞书会话由飞书提醒，正在前台看着的会话不推。需要 HTTPS 访问，iPhone 需 iOS 16.4+ 且从主屏幕图标打开。

package/package.json

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

package/web/app.js

@@ -273,7 +273,7 @@ const desktopQuota = typeof desktop?.onQuota === "function";
 // 桌面端里：顶栏、侧栏顶部可以按住拖动窗口（样式见 style.css 的 .in-desktop）
 if (desktop) document.documentElement.classList.add("in-desktop");
 /**
- * 新版桌面端顶栏的「更多」里能打开每台服务器的设置，额度也在它的菜单栏里：侧栏底部的额度和设置就不显示了。
+ * 新版桌面端顶栏的「更多」里能打开每台服务器的设置：侧栏底部的设置按钮就不显示了（额度照常显示，数据由桌面端推）。
  * 老版本桌面端没有这个入口，照旧显示，免得设置打不开。
  */
 const desktopSettings = typeof desktop?.onOpenSettings === "function";
@@ -633,6 +633,21 @@ function renderLayout() {
       showMenu({ x: e.clientX, y: e.clientY }, [{ label: "历史会话…", onclick: () => openBotConversations(bot) }]);
       return;
     }
+    // 项目目录那一行：调整顺序（触屏上拖不动，靠这个菜单）
+    const dir = e.target.closest?.("[data-dir]")?.dataset.dir;
+    if (dir) {
+      const i = projDirs.indexOf(dir);
+      const moves = [
+        ...(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 items = moves.length && reset.length ? [...moves, "sep", ...reset] : [...moves, ...reset];
+      if (!items.length) return;
+      e.preventDefault();
+      showMenu({ x: e.clientX, y: e.clientY }, items);
+      return;
+    }
     const key = e.target.closest?.("[data-key]")?.dataset.key;
     if (!key || !S.convs.has(key)) return;
     e.preventDefault();
@@ -997,7 +1012,43 @@ function agentShort(id) {
 }
 
 /** 侧栏里展开 / 收起的状态：哪些项目目录展开了、「最近」和各目录是否显示全部 */
-const sideState = { open: [], more: [], folded: [], ...JSON.parse(localStorage.getItem("aim.side") || "{}") };
+const sideState = { open: [], more: [], folded: [], order: [], ...JSON.parse(localStorage.getItem("aim.side") || "{}") };
+
+/**
+ * 「项目」目录的顺序：没手动排过时按最近活跃；拖过之后按 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))];
+}
+
+/** 当前侧栏里显示的目录顺序（renderSidebar 时记下，拖拽 / 右键菜单用） */
+let projDirs = [];
+
+/** 把目录 dir 挪到 target 前面（after 为 true 时挪到后面）；target 为 null 表示挪到最前 */
+function moveProjectDir(dir, target, after = false) {
+  if (dir === target) return;
+  const list = projDirs.filter((d) => d !== dir);
+  const idx = target === null ? 0 : list.indexOf(target);
+  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();
+}
+
+function resetProjectOrder() {
+  sideState.order = [];
+  localStorage.setItem("aim.side", JSON.stringify(sideState));
+  renderSidebar();
+}
+
+/** 正在拖的目录。拖的过程中侧栏不重绘（重绘会换掉被拖的元素，拖拽就断了），松手后补一次 */
+let dirDrag = null;
+let sidebarStale = false;
 
 /** 「最近」「项目」分组标题：点击折叠 / 展开，hover 时显示箭头 */
 function groupHead(label, id, folded) {
@@ -1032,6 +1083,11 @@ function reportDesktop() {
 
 function renderSidebar() {
   if (!ui.convList) return;
+  if (dirDrag) {
+    sidebarStale = true;
+    return;
+  }
+  sidebarStale = false;
   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;
@@ -1115,17 +1171,68 @@ function renderSidebar() {
   }
   const projFolded = sideState.folded.includes("@projects");
   if (byDir.size) nodes.push(groupHead("项目", "@projects", projFolded));
+  projDirs = orderProjectDirs([...byDir.keys()]);
   if (byDir.size && !projFolded) {
-    for (const [dir, convs] of byDir) {
+    const clearDrop = () => ui.convList.querySelectorAll(".drop-before, .drop-after").forEach((el) => el.classList.remove("drop-before", "drop-after"));
+    const endDrag = () => {
+      dirDrag = null;
+      clearDrop();
+      if (sidebarStale) renderSidebar();
+    };
+    for (const dir of projDirs) {
+      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();
+        return e.clientY > r.top + r.height / 2;
+      };
       nodes.push(
         h(
           "div",
-          { class: "proj-row" },
+          {
+            class: "proj-row",
+            "data-dir": dir,
+            draggable: "true",
+            ondragstart: (e) => {
+              dirDrag = dir;
+              e.dataTransfer.effectAllowed = "move";
+              e.dataTransfer.setData("text/plain", dir);
+              e.currentTarget.classList.add("dragging");
+              stopMarquee();
+            },
+            ondragend: (e) => {
+              e.currentTarget.classList.remove("dragging");
+              endDrag();
+            },
+            ondragover: (e) => {
+              if (!dirDrag) return;
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "move";
+              const after = isAfter(e, e.currentTarget);
+              if (!e.currentTarget.classList.contains(after ? "drop-after" : "drop-before")) {
+                clearDrop();
+                if (dirDrag !== dir) e.currentTarget.classList.add(after ? "drop-after" : "drop-before");
+              }
+            },
+            ondragleave: (e) => {
+              if (!e.currentTarget.contains(e.relatedTarget)) e.currentTarget.classList.remove("drop-before", "drop-after");
+            },
+            ondrop: (e) => {
+              if (!dirDrag) return;
+              e.preventDefault();
+              const from = dirDrag;
+              const after = isAfter(e, e.currentTarget);
+              dirDrag = null;
+              clearDrop();
+              if (from !== dir) moveProjectDir(from, dir, after);
+              else if (sidebarStale) renderSidebar();
+            },
+          },
           h(
             "button",
-            { class: "conv-item proj", title: dir, onclick: () => toggleSide("open", dir) },
+            { class: "conv-item proj", title: `${dir}\n拖动可调整顺序，右键可置顶`, onclick: () => toggleSide("open", dir) },
             h("span", { class: "proj-icon", html: expanded ? ICON.folderOpen : ICON.folder }),
             h("span", { class: "title" }, baseName(dir)),
             expanded ? null : status(convs.map((c) => c.key)),

package/web/style.css

@@ -431,6 +431,32 @@ button.conv-group:hover {
   gap: 10px;
 }
 
+/* 拖动目录排序：被拖的行变淡，落点处画一条横线 */
+.proj-row.dragging {
+  opacity: 0.4;
+}
+
+.proj-row.drop-before::before,
+.proj-row.drop-after::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--accent, #3b82f6);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.proj-row.drop-before::before {
+  top: -2px;
+}
+
+.proj-row.drop-after::after {
+  bottom: -2px;
+}
+
 .proj-icon {
   display: inline-grid;
   color: var(--fg-soft);
@@ -559,8 +585,8 @@ button.conv-group:hover {
   margin-left: auto;
 }
 
-/* 桌面端里：额度在菜单栏、设置在顶栏「更多」里，侧栏底部整条不要 */
-.desktop-settings .side-bottom {
+/* 桌面端里：设置在顶栏「更多」里，侧栏底部只留额度（额度由桌面端统一查好推过来） */
+.desktop-settings .side-gear {
   display: none;
 }