opencode-subagent-magazine 1.1.2 → 1.2.0

package/README.md

@@ -20,6 +20,10 @@
 
 ---
 
+对 Token 缓存可视化感兴趣吗？可以试试 [opencode-visual-cache](https://github.com/Hotakus/opencode-visual-cache) 这个插件！
+
+---
+
 ## 1. 图片展示
 
 <div align="center"> 
@@ -45,10 +49,12 @@
 - **手动标记完成**：展开区右侧 `- 标记完成` 按钮可手动终结卡住的僵尸条目；`/subagent-clear-running` 批量清理
 - **状态字段显示**：展开区 `状态: 运行中/已完成/错误`，颜色与圆点一致，一目了然
 - **折叠面板**：标题栏点击折叠/展开，状态持久化，重启后保持
-- **滚动回顶**：列表底部 `↑ 回顶` 按钮一键回到顶部
+- **滚动回顶/回底**：列表底部 `↑ 回顶` / `↓ 回底` 按钮一键跳转到最新条目位置，方向随排序自适应
+- **可配置排序**：`/subagent-order` 支持「降序（最新在前）」和「升序（最早在前）」两种排列方式
+- **翻页模式切换**：`/subagent-scroll` 可选「滚轮翻页」或「点击 more 翻页」，解决侧边栏与全局滚动冲突
 - **TTL 自动清理**：超过 3 天的旧数据自动从 KV 中清除
 - **语言适配**：支持 `/subagent-lang` 运行时切换中/英文，偏好持久化
-- **斜杠命令**：`/subagent-lang` `/subagent-max` `/subagent-session` `/subagent-version` `/subagent-clear-running` 动态配置
+- **斜杠命令**：`/subagent-lang` `/subagent-max` `/subagent-order` `/subagent-scroll` `/subagent-session` `/subagent-version` `/subagent-clear-running` 动态配置
 
 ---
 
@@ -99,6 +105,8 @@ npm install -g opencode-subagent-magazine@latest
 |------|------|---------|
 | `/subagent-lang` | 切换显示语言 | 从列表选择中文或 English，界面即时切换，无需重启 |
 | `/subagent-max` | 调整最大可见条目数 | 输入数字（默认 10），控制面板最多显示多少个子代理条目 |
+| `/subagent-order` | 切换排序方式 | 选择「降序（最新在前）」或「升序（最早在前）」，即时重排并跳转到最新条目 |
+| `/subagent-scroll` | 切换翻页模式 | 选择「滚轮翻页」或「点击 more 翻页」，解决与全局滚动冲突 |
 | `/subagent-session` | 查看当前会话 ID | 弹出当前 OpenCode 会话 ID |
 | `/subagent-version` | 查看插件版本 | 弹出当前插件版本号 |
 | `/subagent-clear-running` | 批量清理僵尸条目 | 一键将所有运行中的条目标记为完成，清理卡住的旧数据 |
@@ -114,8 +122,8 @@ npm install -g opencode-subagent-magazine@latest
 |------|------|
 | 点击标题栏 | 折叠 / 展开面板 |
 | 点击条目行 | 展开 / 收起详情 |
-| 滚动列表 | 翻页查看更多子代理 |
-| 点击 `↑ 回顶` | 跳转到列表顶部 |
+| 滚轮 / 点击 `↑ more` `↓ more` | 翻页查看更多子代理（`/subagent-scroll` 切换翻页模式） |
+| 点击 `↑ 回顶` / `↓ 回底` | 跳转到最新条目位置（方向随排序自适应） |
 | 点击 `→ 进入会话` | 跳转子代理完整对话 |
 | 点击 `- 标记完成` | 手动终结该条目（仅运行中时显示） |
 

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.1.2";
+export declare const PLUGIN_VERSION = "1.2.0";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.1.2";
+export const PLUGIN_VERSION = "1.2.0";

package/dist/index.js

@@ -21,10 +21,15 @@ const I18N = {
         "cost.label": "费用",
         "scroll.more": "更多",
         "scroll.top": "回顶",
+        "scroll.bottom": "回底",
         "dismiss.label": "标记完成",
         "status.running": "运行中",
         "status.done": "已完成",
         "status.error": "错误",
+        "order.desc": "降序（最新在前）",
+        "order.asc": "升序（最早在前）",
+        "scroll.wheel": "滚轮翻页",
+        "scroll.click": "点击翻页",
     },
     en: {
         "panel.title": "SubAgent",
@@ -40,10 +45,15 @@ const I18N = {
         "cost.label": "cost",
         "scroll.more": "more",
         "scroll.top": "Top",
+        "scroll.bottom": "Bottom",
         "dismiss.label": "dismiss",
         "status.running": "running",
         "status.done": "done",
         "status.error": "error",
+        "order.desc": "Desc (newest first)",
+        "order.asc": "Asc (oldest first)",
+        "scroll.wheel": "Wheel Scroll",
+        "scroll.click": "Click Scroll",
     },
 };
 function detectLang() {
@@ -198,8 +208,7 @@ function safeErrorMsg(err) {
 // ===================================================================
 // Sidebar component
 // ===================================================================
-// 模块级缓存：保留各 session 的最新 entryMap，不随组件内 session 切换而丢失。
-// 当用户在子 session 内部时，handleSessionEnd 可通过此缓存找到父 session 的 entries。
+// 模块级缓存：各 session 的 entry 状态独立存储，不随当前视图切换而清除。
 const globalEntryCache = new Map();
 function SubAgentPanel(props) {
     const t = (key) => I18N[props.lang()][key] ?? key;
@@ -283,8 +292,8 @@ function SubAgentPanel(props) {
     const setEntryMap = (arg) => {
         setEntryMapRaw((prev) => {
             const next = typeof arg === "function" ? arg(prev) : arg;
-            // 检测是否有 entry 从 running 变为 done/error → 立即写 KV
-            // 避免 session 切换时 KV 仍是旧状态，导致 scan 用 Date.now() 覆盖正确的 endedAt
+            // entry 状态落定（done/error）时立即持久化到 KV，跳过常规 debounce，
+            // 确保跨视图的状态一致性。
             let needsImmediateFlush = false;
             for (const [id, entry] of next) {
                 const prevEntry = prev.get(id);
@@ -305,7 +314,7 @@ function SubAgentPanel(props) {
             else {
                 persistEntries(props.sessionId, next);
             }
-            // 同步到全局缓存，确保跨 session 查找时数据可用
+            // 同步到模块级缓存，供其他视图读取当前 session 的最新状态
             globalEntryCache.set(props.sessionId, new Map(next));
             return next;
         });
@@ -326,6 +335,8 @@ function SubAgentPanel(props) {
     const [hoveredOpen, setHoveredOpen] = createSignal(undefined);
     const [hoveredDismiss, setHoveredDismiss] = createSignal(undefined);
     const [hoveredTop, setHoveredTop] = createSignal(false);
+    const [hoveredMoreAbove, setHoveredMoreAbove] = createSignal(false);
+    const [hoveredMoreBelow, setHoveredMoreBelow] = createSignal(false);
     const [scrollOffset, setScrollOffset] = createSignal((() => { try {
         return loadSessionData()[props.sessionId]?.scroll ?? 0;
     }
@@ -678,21 +689,20 @@ function SubAgentPanel(props) {
             }
             return changed ? next : prev;
         });
-        // 跨 session 完成事件：用户正在查看子 session 内部时，其他子代理 done。
-        // 上面的 setEntryMap 在子 session 的 entries 中找不到父 session 的 entry。
-        // 通过全局缓存（切换前保留的父 session entries）查找并更新，再同步回 KV。
+        // 当子代理所属的父 session 与当前视图不同时，通过模块级缓存定位
+        // 并更新父 session 的 entry 状态，随后写回 KV。
         try {
             const sessionObj = props.api.state.session.get(sid);
             const parentSid = sessionObj?.parentID;
             if (parentSid && parentSid !== props.sessionId) {
-                // 优先全局缓存——切换 session 时不会被替换，始终保留父 session 的最新 entries
+                // 优先从模块级缓存获取父 session 的 entries，不受当前视图切换影响
                 const parentCache = globalEntryCache.get(parentSid);
                 const nowTs = Date.now();
                 let found = false;
                 if (parentCache) {
                     found = tryMatchAndUpdate(parentCache, sid, status, nowTs);
                 }
-                // 缓存未命中时回退到 KV（极端情况：session 切换前缓存未建立）
+                // 缓存未命中时回退到 KV 读取
                 if (!found) {
                     const data = loadSessionData();
                     const rec = data[parentSid];
@@ -700,14 +710,14 @@ function SubAgentPanel(props) {
                         const fallbackMap = new Map(rec.entries.map((e) => [e.id, e]));
                         found = tryMatchAndUpdate(fallbackMap, sid, status, nowTs);
                         if (found) {
-                            // 回退命中了也要写回 KV，并回填缓存
+                            // 回退命中后写入 KV 并回填缓存
                             data[parentSid] = { ...rec, ts: nowTs, entries: [...fallbackMap.values()] };
                             saveSessionData(data);
                             globalEntryCache.set(parentSid, fallbackMap);
                         }
                     }
                 }
-                // KV 同步：以全局缓存（最新的内存状态）为准写回 KV
+                // 将模块级缓存中的最新状态同步到 KV
                 if (found && parentCache) {
                     const data = loadSessionData();
                     data[parentSid] = { ...data[parentSid], ts: nowTs, entries: [...parentCache.values()] };
@@ -838,7 +848,7 @@ function SubAgentPanel(props) {
                 // scan uses setEntryMapRaw — ephemeral data, not persisted to kv.
                 // Only event-driven changes (handlePartUpdated, handleSessionEnd) persist.
                 setEntryMapRaw((prev) => {
-                    // 优先全局缓存——handleSessionEnd 修复2 已同步更新，无 KV 读写延迟
+                    // 优先从模块级缓存加载，KV 仅作缓存未命中时的回退
                     const next = switched
                         ? new Map(globalEntryCache.get(sid) ?? loadEntries(sid))
                         : new Map(prev);
@@ -984,7 +994,11 @@ function SubAgentPanel(props) {
     // ── derived signals ──
     // Stable list — only changes when entryMap changes
     const entryList = createMemo(() => {
-        return [...entryMap().values()].sort((a, b) => b.startedAt - a.startedAt);
+        const entries = [...entryMap().values()];
+        if (props.sortOrder() === "desc") {
+            return entries.sort((a, b) => b.startedAt - a.startedAt);
+        }
+        return entries.sort((a, b) => a.startedAt - b.startedAt);
     });
     const max = props.maxEntries;
     const clampedOffset = createMemo(() => {
@@ -997,6 +1011,56 @@ function SubAgentPanel(props) {
     const visibleList = createMemo(() => entryList().slice(clampedOffset(), clampedOffset() + max()));
     const hiddenAbove = createMemo(() => clampedOffset());
     const hiddenBelow = createMemo(() => Math.max(0, entryList().length - clampedOffset() - max()));
+    // Drop hover state when ↑ more disappears (hiddenAbove hits zero)
+    createEffect(() => {
+        if (hiddenAbove() === 0)
+            setHoveredMoreAbove(false);
+    });
+    // Reset scroll on sort order change: jump to newest in view
+    let sortInitialized = false;
+    createEffect(() => {
+        props.sortOrder();
+        if (!sortInitialized) {
+            sortInitialized = true;
+            return;
+        }
+        const total = untrack(() => entryList().length);
+        const m = untrack(() => max());
+        const target = props.sortOrder() === "desc" ? 0 : Math.max(0, total - m);
+        setScrollOffset(target);
+        setTimeout(() => {
+            try {
+                persistScroll(props.sessionId, target);
+            }
+            catch { }
+        }, 0);
+    });
+    // When new entries arrive while viewing the newest end, keep the view at newest
+    let prevEntryCount = 0;
+    createEffect(() => {
+        const total = entryList().length;
+        if (prevEntryCount === 0) {
+            prevEntryCount = total;
+            return;
+        }
+        if (total === prevEntryCount)
+            return;
+        const m = max();
+        const wasAtNewest = props.sortOrder() === "desc"
+            ? untrack(() => scrollOffset() === 0)
+            : untrack(() => scrollOffset() >= prevEntryCount - m);
+        prevEntryCount = total;
+        if (wasAtNewest) {
+            const target = props.sortOrder() === "desc" ? 0 : Math.max(0, total - m);
+            setScrollOffset(target);
+            setTimeout(() => {
+                try {
+                    persistScroll(props.sessionId, target);
+                }
+                catch { }
+            }, 0);
+        }
+    });
     const entries = createMemo(() => {
         const nowVal = now();
         return entryList().map((e) => ({
@@ -1109,6 +1173,8 @@ function SubAgentPanel(props) {
                     });
                     bump();
                 }, children: [_jsx("span", { style: { fg: pal().muted }, children: renderTick() >= 0 && open() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: t("panel.title") }), _jsx(Show, { when: showVersion(), children: _jsx("span", { style: { fg: dimColor(pal().muted, 0.75) }, children: versionText }) }), anyEntry() ? (_jsxs(_Fragment, { children: [_jsx("span", { style: { fg: pal().muted }, children: " ".repeat(spacerCols()) }), _jsx("span", { style: { fg: pal().success }, children: summaryParts().done }), runningCount() > 0 && (_jsxs("span", { style: { fg: pal().warning }, children: [" ", summaryParts().running] })), errCount() > 0 && (_jsxs("span", { style: { fg: pal().error }, children: [" ", summaryParts().err] })), summaryParts().duration ? (_jsxs("span", { style: { fg: pal().muted }, children: [" ", summaryParts().duration] })) : null, summaryParts().cost ? (_jsxs("span", { style: { fg: pal().warning }, children: [" ", summaryParts().cost] })) : null] })) : null] }), _jsxs(Show, { when: open(), children: [_jsx("text", { fg: pal().muted, children: sep() }), _jsx(Show, { when: anyEntry(), fallback: _jsxs("text", { style: { fg: pal().muted }, children: ["  ", "> ", t("status.none"), "  "] }), children: _jsxs("box", { onMouseScroll: (e) => {
+                                if (props.scrollMode() === "click")
+                                    return;
                                 const total = entryList().length;
                                 const m = max();
                                 if (total <= m)
@@ -1122,7 +1188,29 @@ function SubAgentPanel(props) {
                                     catch { }
                                     return next;
                                 });
-                            }, children: [_jsx(Show, { when: hiddenAbove() > 0, children: _jsxs("text", { style: { fg: pal().muted }, children: ["  ", "\u2191 ", hiddenAbove(), " ", t("scroll.more")] }) }), _jsx(For, { each: visibleList(), children: (entry) => {
+                            }, children: [_jsx(Show, { when: hiddenAbove() > 0, children: _jsx("text", { onMouseOver: () => setHoveredMoreAbove(true), onMouseOut: () => setHoveredMoreAbove(false), onMouseUp: () => {
+                                            const total = entryList().length;
+                                            const m = max();
+                                            if (total <= m)
+                                                return;
+                                            const next = Math.max(0, scrollOffset() - m);
+                                            if (next === 0) {
+                                                setTimeout(() => {
+                                                    setScrollOffset(next);
+                                                    try {
+                                                        persistScroll(props.sessionId, next);
+                                                    }
+                                                    catch { }
+                                                }, 0);
+                                            }
+                                            else {
+                                                setScrollOffset(next);
+                                                try {
+                                                    persistScroll(props.sessionId, next);
+                                                }
+                                                catch { }
+                                            }
+                                        }, children: _jsxs("span", { style: { fg: hoveredMoreAbove() ? pal().warning : pal().muted }, children: ["  ", "\u2191 ", hiddenAbove(), " ", t("scroll.more")] }) }) }), _jsx(For, { each: visibleList(), children: (entry) => {
                                         const isExpanded = () => expanded() === entry.id;
                                         const isRunning = entry.status === "running";
                                         const isError = entry.status === "error";
@@ -1180,13 +1268,40 @@ function SubAgentPanel(props) {
                                                                                             upsertEntry({ id: entry.id, title: entry.title, agent: entry.agent, prompt: entry.prompt, status: "done" });
                                                                                         }, children: _jsx("span", { style: { fg: hoveredDismiss() === entry.id ? pal().warning : pal().muted }, children: dismissLabel() }) })] }) })] }));
                                                             })() })] })] }));
-                                    } }), _jsx(Show, { when: hiddenBelow() > 0 || scrollOffset() > 0, children: (() => {
+                                    } }), _jsx(Show, { when: hiddenBelow() > 0 || (props.sortOrder() === "desc" ? scrollOffset() > 0 : entryList().length > max() && clampedOffset() < entryList().length - max()), children: (() => {
                                         const showMore = hiddenBelow() > 0;
-                                        const showTop = scrollOffset() > 0;
+                                        const showTop = props.sortOrder() === "desc"
+                                            ? scrollOffset() > 0
+                                            : entryList().length > max() && clampedOffset() < entryList().length - max();
                                         const left = showMore ? `  \u2193 ${hiddenBelow()} ${t("scroll.more")}` : "  ";
-                                        const right = `\u2191 ${t("scroll.top")}`;
+                                        const right = props.sortOrder() === "desc"
+                                            ? `\u2191 ${t("scroll.top")}`
+                                            : `\u2193 ${t("scroll.bottom")}`;
                                         const pad = showTop ? Math.max(1, panelWidth() - visualWidth(left) - visualWidth(right)) : 0;
-                                        return (_jsxs("box", { flexDirection: "row", children: [_jsx("text", { style: { fg: pal().muted }, children: left }), showTop ? (_jsxs(_Fragment, { children: [_jsx("text", { style: { fg: pal().muted }, children: " ".repeat(pad) }), _jsx("text", { onMouseOver: () => setHoveredTop(true), onMouseOut: () => setHoveredTop(false), onMouseUp: () => { setScrollOffset(0); setHoveredTop(false); }, children: _jsx("span", { style: { fg: hoveredTop() ? pal().warning : pal().muted }, children: right }) })] })) : null] }));
+                                        return (_jsxs("box", { flexDirection: "row", children: [_jsx("text", { onMouseOver: () => showMore && setHoveredMoreBelow(true), onMouseOut: () => setHoveredMoreBelow(false), onMouseUp: () => {
+                                                        if (!showMore)
+                                                            return;
+                                                        const total = entryList().length;
+                                                        const m = max();
+                                                        if (total <= m)
+                                                            return;
+                                                        setScrollOffset((prev) => Math.min(total - m, prev + m));
+                                                        try {
+                                                            persistScroll(props.sessionId, scrollOffset());
+                                                        }
+                                                        catch { }
+                                                        setHoveredMoreBelow(false);
+                                                    }, children: _jsx("span", { style: { fg: showMore && hoveredMoreBelow() ? pal().warning : pal().muted }, children: left }) }), showTop ? (_jsxs(_Fragment, { children: [_jsx("text", { style: { fg: pal().muted }, children: " ".repeat(pad) }), _jsx("text", { onMouseOver: () => setHoveredTop(true), onMouseOut: () => setHoveredTop(false), onMouseUp: () => {
+                                                                const total = entryList().length;
+                                                                const m = max();
+                                                                if (props.sortOrder() === "desc") {
+                                                                    setScrollOffset(0);
+                                                                }
+                                                                else {
+                                                                    setScrollOffset(Math.max(0, total - m));
+                                                                }
+                                                                setHoveredTop(false);
+                                                            }, children: _jsx("span", { style: { fg: hoveredTop() ? pal().warning : pal().muted }, children: right }) })] })) : null] }));
                                     })() })] }) })] })] }));
 }
 function createSidebarSlot(api, sig) {
@@ -1195,7 +1310,7 @@ function createSidebarSlot(api, sig) {
         slots: {
             sidebar_content(ctx, input) {
                 sig.sessionId = input.session_id;
-                return (_jsx(SubAgentPanel, { theme: ctx.theme.current, api: api, lang: sig.lang, maxEntries: sig.maxEntries, sessionId: input.session_id }));
+                return (_jsx(SubAgentPanel, { theme: ctx.theme.current, api: api, lang: sig.lang, maxEntries: sig.maxEntries, sortOrder: sig.sortOrder, scrollMode: sig.scrollMode, sessionId: input.session_id }));
             },
         },
     };
@@ -1207,7 +1322,9 @@ const tui = async (api) => {
     const initialLang = stored === "zh" || stored === "en" ? stored : detectLang();
     const [lang, setLang] = createSignal(initialLang);
     const [maxEntries, setMaxEntries] = createSignal(parseInt(String(api.kv.get(`${KV_PREFIX}.max_entries`, "10")), 10) || 10);
-    const signals = { lang, setLang, maxEntries, setMaxEntries, sessionId: "" };
+    const [sortOrder, setSortOrder] = createSignal(String(api.kv.get(`${KV_PREFIX}.order`, "desc")) === "asc" ? "asc" : "desc");
+    const [scrollMode, setScrollMode] = createSignal(String(api.kv.get(`${KV_PREFIX}.scroll_mode`, "wheel")) === "click" ? "click" : "wheel");
+    const signals = { lang, setLang, maxEntries, setMaxEntries, sortOrder, setSortOrder, scrollMode, setScrollMode, sessionId: "" };
     api.slots.register(createSidebarSlot(api, signals));
     // ── slash command: /subagent-lang ──
     api.command?.register(() => [
@@ -1231,6 +1348,48 @@ const tui = async (api) => {
                     } })));
             },
         },
+        {
+            title: "SubAgent Magazine: Sort Order",
+            value: "subagent-order",
+            description: "Set sub-agent entry sort order (desc / asc)",
+            slash: { name: "subagent-order" },
+            onSelect: (dialog) => {
+                const t = (k) => I18N[lang()][k] ?? k;
+                dialog?.replace(() => (_jsx(api.ui.DialogSelect, { title: "Sort Order / \u6392\u5E8F\u65B9\u5F0F", options: [
+                        { title: t("order.desc"), value: "desc" },
+                        { title: t("order.asc"), value: "asc" },
+                    ], onSelect: (opt) => {
+                        const o = opt.value;
+                        setSortOrder(o);
+                        api.kv.set(`${KV_PREFIX}.order`, o);
+                        api.ui.toast({
+                            message: o === "desc" ? t("order.desc") : t("order.asc"),
+                        });
+                        dialog?.clear();
+                    } })));
+            },
+        },
+        {
+            title: "SubAgent Magazine: Scroll Mode",
+            value: "subagent-scroll",
+            description: "Set scroll mode (wheel / click)",
+            slash: { name: "subagent-scroll" },
+            onSelect: (dialog) => {
+                const t = (k) => I18N[lang()][k] ?? k;
+                dialog?.replace(() => (_jsx(api.ui.DialogSelect, { title: "Scroll Mode / \u6EDA\u52A8\u6A21\u5F0F", options: [
+                        { title: t("scroll.wheel"), value: "wheel" },
+                        { title: t("scroll.click"), value: "click" },
+                    ], onSelect: (opt) => {
+                        const m = opt.value;
+                        setScrollMode(m);
+                        api.kv.set(`${KV_PREFIX}.scroll_mode`, m);
+                        api.ui.toast({
+                            message: m === "wheel" ? t("scroll.wheel") : t("scroll.click"),
+                        });
+                        dialog?.clear();
+                    } })));
+            },
+        },
         {
             title: "SubAgent Magazine: Max Entries",
             value: "subagent-max",