opencode-subagent-magazine 1.5.2 → 1.5.3

package/README.md

@@ -56,7 +56,8 @@
 - **TTL 自动清理**：可配置数据保留期限（3/7/14/30 天/无期限），每次访问自动续期，过期自动清除
 - **手动清除条目**：`/subagent-clear-entries` 清除当前会话所有记录，防止历史条目扫描重建
 - **语言适配**：支持 `/subagent-lang` 运行时切换中/英文，偏好持久化
-- **斜杠命令**：`/subagent-lang` `/subagent-max` `/subagent-order` `/subagent-scroll` `/subagent-ttl` `/subagent-clear-entries` `/subagent-session` `/subagent-version` `/subagent-clear-running` 动态配置
+- **可切换边框**：`/subagent-border` 控制面板外边框显隐（默认隐藏），开启后与缓存统计面板风格统一
+- **斜杠命令**：`/subagent-lang` `/subagent-max` `/subagent-order` `/subagent-scroll` `/subagent-ttl` `/subagent-clear-entries` `/subagent-session` `/subagent-version` `/subagent-clear-running` `/subagent-border` 动态配置
 
 ---
 
@@ -114,6 +115,7 @@ npm install -g opencode-subagent-magazine@latest
 | `/subagent-session` | 查看当前会话 ID | 弹出当前 OpenCode 会话 ID |
 | `/subagent-version` | 查看插件版本 | 弹出当前插件版本号 |
 | `/subagent-clear-running` | 批量清理僵尸条目 | 一键将所有运行中的条目标记为完成，清理卡住的旧数据 |
+| `/subagent-border` | 开关面板边框 | 切换面板外边框显隐（默认隐藏），即时生效并持久化 |
 
 <div align="center">
   <img src="https://raw.githubusercontent.com/Hotakus/opencode-subagent-magazine/master/assets/slash_cmds.png" alt="斜杠命令" width="49%"></img>

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.5.2";
+export declare const PLUGIN_VERSION = "1.5.3";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.5.2";
+export const PLUGIN_VERSION = "1.5.3";

package/dist/i18n.d.ts

@@ -49,6 +49,8 @@ declare const ZH_T: {
     readonly "cancel.status_error": "无法查询会话状态";
     readonly "cancel.sent": "已发送取消指令";
     readonly "cancel.failed": "取消失败";
+    readonly borderShown: "面板边框 已显示";
+    readonly borderHidden: "面板边框 已隐藏";
 };
 /** 结构约束：值放宽为 string，键集合来自中文表（新增语言缺 key 会编译报错）。 */
 export type Translation = {

package/dist/i18n.js

@@ -53,6 +53,8 @@ const ZH_T = {
     "cancel.status_error": "无法查询会话状态",
     "cancel.sent": "已发送取消指令",
     "cancel.failed": "取消失败",
+    "borderShown": "面板边框 已显示",
+    "borderHidden": "面板边框 已隐藏",
 };
 const EN_T = {
     "panel.title": "SubAgent",
@@ -104,6 +106,8 @@ const EN_T = {
     "cancel.status_error": "Cannot query session status",
     "cancel.sent": "Cancel instruction sent",
     "cancel.failed": "Cancellation failed",
+    "borderShown": "Panel border shown",
+    "borderHidden": "Panel border hidden",
 };
 const JA_T = {
     "panel.title": "サブエージェント",
@@ -155,6 +159,8 @@ const JA_T = {
     "cancel.status_error": "セッション状態を照会できません",
     "cancel.sent": "キャンセル指示を送信しました",
     "cancel.failed": "キャンセルに失敗しました",
+    "borderShown": "パネル枠線 表示",
+    "borderHidden": "パネル枠線 非表示",
 };
 const KO_T = {
     "panel.title": "서브 에이전트",
@@ -206,6 +212,8 @@ const KO_T = {
     "cancel.status_error": "세션 상태를 조회할 수 없습니다",
     "cancel.sent": "취소 지시를 보냈습니다",
     "cancel.failed": "취소에 실패했습니다",
+    "borderShown": "패널 테두리 표시",
+    "borderHidden": "패널 테두리 숨김",
 };
 export const LANGS = { zh: ZH_T, en: EN_T, ja: JA_T, ko: KO_T };
 /** 语言元数据：/subagent-lang 选项与自动检测共用。 */

package/dist/index.js

@@ -1252,7 +1252,19 @@ function SubAgentPanel(props) {
             return next;
         });
     };
-    const sep = () => "\u2500".repeat(Math.max(1, panelWidth()));
+    /** Horizontal space eaten by the panel border (1+1) and its padding (2+2). */
+    const gutter = createMemo(() => (props.borderVisible() ? 6 : 0));
+    const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - gutter()));
+    // The border toggling shifts the box dimensions, which may not reliably
+    // re-fire onSizeChange across (re)mount cycles; re-sync panelWidth with the
+    // live box so the content width stays correct.
+    createEffect(() => {
+        props.borderVisible();
+        if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+            const w = Math.max(20, boxEl.width);
+            setPanelWidth((prev) => (prev === w ? prev : w));
+        }
+    });
     // ── expanded detail right-align ──
     const expandedMaxLabelW = createMemo(() => {
         const labels = [
@@ -1262,7 +1274,7 @@ function SubAgentPanel(props) {
         return Math.max(...labels.map(l => visualWidth(l + ": ")));
     });
     const expandedPad = (label) => Math.max(0, expandedMaxLabelW() - visualWidth(label + ": "));
-    const expandedValAvail = () => Math.max(6, panelWidth() - INDENT - expandedMaxLabelW());
+    const expandedValAvail = () => Math.max(6, panelWidth() - gutter() - INDENT - expandedMaxLabelW());
     // ── header parts for colored spans ──
     const summaryParts = createMemo(() => {
         if (!anyEntry())
@@ -1297,7 +1309,7 @@ function SubAgentPanel(props) {
             return false;
         const icon = "\u25bc";
         const need = visualWidth(icon) + 1 + visualWidth(t("panel.title")) + versionW + summaryCols();
-        return need <= panelWidth();
+        return need <= panelWidth() - gutter();
     });
     const leftCols = createMemo(() => {
         const icon = open() ? "\u25bc" : "\u25b6";
@@ -1309,11 +1321,11 @@ function SubAgentPanel(props) {
     const spacerCols = createMemo(() => {
         if (!anyEntry())
             return 0;
-        return Math.max(0, panelWidth() - leftCols() - summaryCols());
+        return Math.max(0, panelWidth() - gutter() - leftCols() - summaryCols());
     });
-    const valueCols = (label) => Math.max(4, panelWidth() - INDENT - visualWidth(label + ": "));
+    const valueCols = (label) => Math.max(4, panelWidth() - gutter() - INDENT - visualWidth(label + ": "));
     // ── render ──
-    return (_jsxs("box", { border: false, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0, flexDirection: "column", gap: 0, ref: boxEl, onSizeChange: () => {
+    return (_jsxs("box", { border: props.borderVisible(), ...(props.borderVisible() ? { borderColor: pal().border } : {}), paddingTop: 0, paddingBottom: 0, paddingLeft: props.borderVisible() ? 2 : 0, paddingRight: props.borderVisible() ? 2 : 0, flexDirection: "column", gap: 0, ref: boxEl, onSizeChange: () => {
             const w = boxEl ? Math.max(20, boxEl.width ?? 0) : 28;
             setPanelWidth((prev) => (prev === w ? prev : w));
         }, children: [_jsxs("text", { onMouseUp: () => {
@@ -1405,7 +1417,7 @@ function SubAgentPanel(props) {
                                                 w += visualWidth(tk);
                                             return w;
                                         };
-                                        const labelAvail = () => Math.max(6, panelWidth() - LEFT_PAD - suffixW());
+                                        const labelAvail = () => Math.max(6, panelWidth() - gutter() - LEFT_PAD - suffixW());
                                         const labelText = () => {
                                             const max = labelAvail();
                                             const text = entry.title || entry.agent;
@@ -1443,7 +1455,7 @@ function SubAgentPanel(props) {
                                                                 const cancelLabel = () => ` ${t("cancel.label")}`;
                                                                 const dismissLabel = () => ` ${t("dismiss.label")}`;
                                                                 const rightW = (isRunning ? visualWidth(dismissLabel()) : 0) + (isRunning && entry.sessionId ? visualWidth(cancelLabel()) : 0);
-                                                                const spacerW = () => Math.max(1, panelWidth() - openW() - rightW - 2);
+                                                                const spacerW = () => Math.max(1, panelWidth() - gutter() - openW() - rightW - 2);
                                                                 return (_jsxs("box", { flexDirection: "row", children: [_jsx(Show, { when: entry.sessionId, children: _jsxs("text", { onMouseOver: () => setHoveredOpen(entry.id), onMouseOut: () => setHoveredOpen(undefined), onMouseUp: () => {
                                                                                     if (entry.sessionId) {
                                                                                         props.api.route.navigate("session", { sessionID: entry.sessionId });
@@ -1461,7 +1473,7 @@ function SubAgentPanel(props) {
                                         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;
+                                        const pad = showTop ? Math.max(1, panelWidth() - gutter() - visualWidth(left) - visualWidth(right)) : 0;
                                         return (_jsxs("box", { flexDirection: "row", children: [_jsx("text", { onMouseOver: () => showMore && setHoveredMoreBelow(true), onMouseOut: () => setHoveredMoreBelow(false), onMouseUp: () => {
                                                         if (!showMore)
                                                             return;
@@ -1494,7 +1506,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, sortOrder: sig.sortOrder, scrollMode: sig.scrollMode, 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, borderVisible: sig.borderVisible, sessionId: input.session_id }));
             },
         },
     };
@@ -1508,7 +1520,8 @@ const tui = async (api) => {
     const [maxEntries, setMaxEntries] = createSignal(parseInt(String(api.kv.get(`${KV_PREFIX}.max_entries`, "10")), 10) || 10);
     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: "" };
+    const [borderVisible, setBorderVisible] = createSignal(api.kv.get(`${KV_PREFIX}.border`, false) === true);
+    const signals = { lang, setLang, maxEntries, setMaxEntries, sortOrder, setSortOrder, scrollMode, setScrollMode, borderVisible, setBorderVisible, sessionId: "" };
     api.slots.register(createSidebarSlot(api, signals));
     // ── slash command: /subagent-lang ──
     api.command?.register(() => [
@@ -1752,6 +1765,20 @@ const tui = async (api) => {
                     } })));
             },
         },
+        {
+            title: "SubAgent Magazine: Border",
+            value: "subagent-border",
+            description: "Show or hide the panel border",
+            slash: { name: "subagent-border" },
+            onSelect: (dialog) => {
+                const t = createT(() => signals.lang());
+                const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, false));
+                api.kv.set(`${KV_PREFIX}.border`, !cur);
+                signals.setBorderVisible(!cur);
+                api.ui.toast({ message: !cur ? t("borderShown") : t("borderHidden") });
+                dialog?.clear();
+            },
+        },
     ]);
 };
 const mod = {

package/dist/tui.js

@@ -4,14 +4,16 @@ import { insertNode as _$insertNode } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
-import { memo as _$memo } from "@opentui/solid";
-import { use as _$use } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { spread as _$spread } from "@opentui/solid";
+import { mergeProps as _$mergeProps } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { createMemo, createSignal, createEffect, onMount, onCleanup, untrack, Show, For } from "solid-js";
 
 // src/_version.ts
-var PLUGIN_VERSION = "1.5.2";
+var PLUGIN_VERSION = "1.5.3";
 
 // src/clipboard.ts
 import { spawn } from "node:child_process";
@@ -159,7 +161,9 @@ var ZH_T = {
   "cancel.already_ended": "\u4F1A\u8BDD\u5DF2\u7ED3\u675F\uFF0C\u65E0\u9700\u53D6\u6D88",
   "cancel.status_error": "\u65E0\u6CD5\u67E5\u8BE2\u4F1A\u8BDD\u72B6\u6001",
   "cancel.sent": "\u5DF2\u53D1\u9001\u53D6\u6D88\u6307\u4EE4",
-  "cancel.failed": "\u53D6\u6D88\u5931\u8D25"
+  "cancel.failed": "\u53D6\u6D88\u5931\u8D25",
+  "borderShown": "\u9762\u677F\u8FB9\u6846 \u5DF2\u663E\u793A",
+  "borderHidden": "\u9762\u677F\u8FB9\u6846 \u5DF2\u9690\u85CF"
 };
 var EN_T = {
   "panel.title": "SubAgent",
@@ -210,7 +214,9 @@ var EN_T = {
   "cancel.already_ended": "Session already ended, no need to cancel",
   "cancel.status_error": "Cannot query session status",
   "cancel.sent": "Cancel instruction sent",
-  "cancel.failed": "Cancellation failed"
+  "cancel.failed": "Cancellation failed",
+  "borderShown": "Panel border shown",
+  "borderHidden": "Panel border hidden"
 };
 var JA_T = {
   "panel.title": "\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
@@ -261,7 +267,9 @@ var JA_T = {
   "cancel.already_ended": "\u30BB\u30C3\u30B7\u30E7\u30F3\u306F\u65E2\u306B\u7D42\u4E86\u3057\u3066\u3044\u307E\u3059",
   "cancel.status_error": "\u30BB\u30C3\u30B7\u30E7\u30F3\u72B6\u614B\u3092\u7167\u4F1A\u3067\u304D\u307E\u305B\u3093",
   "cancel.sent": "\u30AD\u30E3\u30F3\u30BB\u30EB\u6307\u793A\u3092\u9001\u4FE1\u3057\u307E\u3057\u305F",
-  "cancel.failed": "\u30AD\u30E3\u30F3\u30BB\u30EB\u306B\u5931\u6557\u3057\u307E\u3057\u305F"
+  "cancel.failed": "\u30AD\u30E3\u30F3\u30BB\u30EB\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+  "borderShown": "\u30D1\u30CD\u30EB\u67A0\u7DDA \u8868\u793A",
+  "borderHidden": "\u30D1\u30CD\u30EB\u67A0\u7DDA \u975E\u8868\u793A"
 };
 var KO_T = {
   "panel.title": "\uC11C\uBE0C \uC5D0\uC774\uC804\uD2B8",
@@ -312,7 +320,9 @@ var KO_T = {
   "cancel.already_ended": "\uC138\uC158\uC774 \uC774\uBBF8 \uC885\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4",
   "cancel.status_error": "\uC138\uC158 \uC0C1\uD0DC\uB97C \uC870\uD68C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4",
   "cancel.sent": "\uCDE8\uC18C \uC9C0\uC2DC\uB97C \uBCF4\uB0C8\uC2B5\uB2C8\uB2E4",
-  "cancel.failed": "\uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"
+  "cancel.failed": "\uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4",
+  "borderShown": "\uD328\uB110 \uD14C\uB450\uB9AC \uD45C\uC2DC",
+  "borderHidden": "\uD328\uB110 \uD14C\uB450\uB9AC \uC228\uAE40"
 };
 var LANGS = { zh: ZH_T, en: EN_T, ja: JA_T, ko: KO_T };
 var LANG_META = [
@@ -1568,13 +1578,21 @@ function SubAgentPanel(props) {
       return next;
     });
   };
-  const sep = () => "\u2500".repeat(Math.max(1, panelWidth()));
+  const gutter = createMemo(() => props.borderVisible() ? 6 : 0);
+  const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - gutter()));
+  createEffect(() => {
+    props.borderVisible();
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      const w = Math.max(20, boxEl.width);
+      setPanelWidth((prev) => prev === w ? prev : w);
+    }
+  });
   const expandedMaxLabelW = createMemo(() => {
     const labels = [t("agent.label"), t("status.label"), t("time.label"), t("tokens.label"), t("error.label"), t("cost.label"), t("model.label"), t("todo.label"), t("session.label")];
     return Math.max(...labels.map((l) => visualWidth(l + ": ")));
   });
   const expandedPad = (label) => Math.max(0, expandedMaxLabelW() - visualWidth(label + ": "));
-  const expandedValAvail = () => Math.max(6, panelWidth() - INDENT - expandedMaxLabelW());
+  const expandedValAvail = () => Math.max(6, panelWidth() - gutter() - INDENT - expandedMaxLabelW());
   const summaryParts = createMemo(() => {
     if (!anyEntry()) return null;
     const dot = "\u25CF";
@@ -1603,7 +1621,7 @@ function SubAgentPanel(props) {
     if (!open()) return false;
     const icon = "\u25BC";
     const need = visualWidth(icon) + 1 + visualWidth(t("panel.title")) + versionW + summaryCols();
-    return need <= panelWidth();
+    return need <= panelWidth() - gutter();
   });
   const leftCols = createMemo(() => {
     const icon = open() ? "\u25BC" : "\u25B6";
@@ -1613,25 +1631,36 @@ function SubAgentPanel(props) {
   });
   const spacerCols = createMemo(() => {
     if (!anyEntry()) return 0;
-    return Math.max(0, panelWidth() - leftCols() - summaryCols());
+    return Math.max(0, panelWidth() - gutter() - leftCols() - summaryCols());
   });
-  const valueCols = (label) => Math.max(4, panelWidth() - INDENT - visualWidth(label + ": "));
+  const valueCols = (label) => Math.max(4, panelWidth() - gutter() - INDENT - visualWidth(label + ": "));
   return (() => {
     var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$3 = _$createElement("span"), _el$4 = _$createElement("span");
     _$insertNode(_el$, _el$2);
     var _ref$ = boxEl;
     typeof _ref$ === "function" ? _$use(_ref$, _el$) : boxEl = _el$;
-    _$setProp(_el$, "border", false);
-    _$setProp(_el$, "paddingTop", 0);
-    _$setProp(_el$, "paddingBottom", 0);
-    _$setProp(_el$, "paddingLeft", 0);
-    _$setProp(_el$, "paddingRight", 0);
-    _$setProp(_el$, "flexDirection", "column");
-    _$setProp(_el$, "gap", 0);
-    _$setProp(_el$, "onSizeChange", () => {
-      const w = boxEl ? Math.max(20, boxEl.width ?? 0) : 28;
-      setPanelWidth((prev) => prev === w ? prev : w);
-    });
+    _$spread(_el$, _$mergeProps({
+      get border() {
+        return props.borderVisible();
+      }
+    }, () => props.borderVisible() ? {
+      borderColor: pal().border
+    } : {}, {
+      "paddingTop": 0,
+      "paddingBottom": 0,
+      get paddingLeft() {
+        return props.borderVisible() ? 2 : 0;
+      },
+      get paddingRight() {
+        return props.borderVisible() ? 2 : 0;
+      },
+      "flexDirection": "column",
+      "gap": 0,
+      "onSizeChange": () => {
+        const w = boxEl ? Math.max(20, boxEl.width ?? 0) : 28;
+        setPanelWidth((prev) => prev === w ? prev : w);
+      }
+    }), true);
     _$insertNode(_el$2, _el$3);
     _$insertNode(_el$2, _el$4);
     _$setProp(_el$2, "onMouseUp", () => {
@@ -1828,7 +1857,7 @@ function SubAgentPanel(props) {
                   if (tk) w += visualWidth(tk);
                   return w;
                 };
-                const labelAvail = () => Math.max(6, panelWidth() - LEFT_PAD - suffixW());
+                const labelAvail = () => Math.max(6, panelWidth() - gutter() - LEFT_PAD - suffixW());
                 const labelText = () => {
                   const max2 = labelAvail();
                   const text = entry.title || entry.agent;
@@ -2227,7 +2256,7 @@ ${t("session.toast.copy_failed")}`,
                           const cancelLabel = () => ` ${t("cancel.label")}`;
                           const dismissLabel = () => ` ${t("dismiss.label")}`;
                           const rightW = (isRunning ? visualWidth(dismissLabel()) : 0) + (isRunning && entry.sessionId ? visualWidth(cancelLabel()) : 0);
-                          const spacerW = () => Math.max(1, panelWidth() - openW() - rightW - 2);
+                          const spacerW = () => Math.max(1, panelWidth() - gutter() - openW() - rightW - 2);
                           return (() => {
                             var _el$91 = _$createElement("box"), _el$95 = _$createElement("text");
                             _$insertNode(_el$91, _el$95);
@@ -2330,7 +2359,7 @@ ${t("session.toast.copy_failed")}`,
                   const showTop = props.sortOrder() === "desc" ? scrollOffset() > 0 : entryList().length > max() && clampedOffset() < entryList().length - max();
                   const left = showMore ? `  \u2193 ${hiddenBelow()} ${t("scroll.more")}` : "  ";
                   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;
+                  const pad = showTop ? Math.max(1, panelWidth() - gutter() - visualWidth(left) - visualWidth(right)) : 0;
                   return (() => {
                     var _el$100 = _$createElement("box"), _el$101 = _$createElement("text"), _el$102 = _$createElement("span");
                     _$insertNode(_el$100, _el$101);
@@ -2431,6 +2460,9 @@ function createSidebarSlot(api, sig) {
           get scrollMode() {
             return sig.scrollMode;
           },
+          get borderVisible() {
+            return sig.borderVisible;
+          },
           get sessionId() {
             return input.session_id;
           }
@@ -2447,6 +2479,7 @@ var tui = async (api) => {
   const [maxEntries, setMaxEntries] = createSignal(parseInt(String(api.kv.get(`${KV_PREFIX}.max_entries`, "10")), 10) || 10);
   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 [borderVisible, setBorderVisible] = createSignal(api.kv.get(`${KV_PREFIX}.border`, false) === true);
   const signals = {
     lang,
     setLang,
@@ -2456,6 +2489,8 @@ var tui = async (api) => {
     setSortOrder,
     scrollMode,
     setScrollMode,
+    borderVisible,
+    setBorderVisible,
     sessionId: ""
   };
   api.slots.register(createSidebarSlot(api, signals));
@@ -2789,6 +2824,23 @@ var tui = async (api) => {
         }
       }));
     }
+  }, {
+    title: "SubAgent Magazine: Border",
+    value: "subagent-border",
+    description: "Show or hide the panel border",
+    slash: {
+      name: "subagent-border"
+    },
+    onSelect: (dialog) => {
+      const t = createT(() => signals.lang());
+      const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, false));
+      api.kv.set(`${KV_PREFIX}.border`, !cur);
+      signals.setBorderVisible(!cur);
+      api.ui.toast({
+        message: !cur ? t("borderShown") : t("borderHidden")
+      });
+      dialog?.clear();
+    }
   }]);
 };
 var mod = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-subagent-magazine",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "OpenCode TUI plugin monitoring sub-agent invocation status in real time",
   "type": "module",
   "types": "dist/index.d.ts",

package/src/_version.ts

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION="1.5.2";
+export const PLUGIN_VERSION="1.5.3";

package/src/i18n.ts

@@ -56,6 +56,8 @@ const ZH_T = {
   "cancel.status_error": "无法查询会话状态",
   "cancel.sent": "已发送取消指令",
   "cancel.failed": "取消失败",
+  "borderShown": "面板边框 已显示",
+  "borderHidden": "面板边框 已隐藏",
 } as const
 
 /** 结构约束：值放宽为 string，键集合来自中文表（新增语言缺 key 会编译报错）。 */
@@ -111,6 +113,8 @@ const EN_T: Translation = {
   "cancel.status_error": "Cannot query session status",
   "cancel.sent": "Cancel instruction sent",
   "cancel.failed": "Cancellation failed",
+  "borderShown": "Panel border shown",
+  "borderHidden": "Panel border hidden",
 }
 
 const JA_T: Translation = {
@@ -163,6 +167,8 @@ const JA_T: Translation = {
   "cancel.status_error": "セッション状態を照会できません",
   "cancel.sent": "キャンセル指示を送信しました",
   "cancel.failed": "キャンセルに失敗しました",
+  "borderShown": "パネル枠線 表示",
+  "borderHidden": "パネル枠線 非表示",
 }
 
 const KO_T: Translation = {
@@ -215,6 +221,8 @@ const KO_T: Translation = {
   "cancel.status_error": "세션 상태를 조회할 수 없습니다",
   "cancel.sent": "취소 지시를 보냈습니다",
   "cancel.failed": "취소에 실패했습니다",
+  "borderShown": "패널 테두리 표시",
+  "borderHidden": "패널 테두리 숨김",
 }
 
 export const LANGS: Record<LangCode, Translation> = { zh: ZH_T, en: EN_T, ja: JA_T, ko: KO_T }

package/src/index.tsx

@@ -214,6 +214,7 @@ function SubAgentPanel(props: {
   maxEntries: () => number
   sortOrder: () => SortOrder
   scrollMode: () => ScrollMode
+  borderVisible: () => boolean
   sessionId: string
 }): JSX.Element {
   const t = createT(() => props.lang())
@@ -1281,7 +1282,21 @@ function SubAgentPanel(props: {
     })
   }
 
-  const sep = () => "\u2500".repeat(Math.max(1, panelWidth()))
+  /** Horizontal space eaten by the panel border (1+1) and its padding (2+2). */
+  const gutter = createMemo(() => (props.borderVisible() ? 6 : 0))
+
+  const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - gutter()))
+
+  // The border toggling shifts the box dimensions, which may not reliably
+  // re-fire onSizeChange across (re)mount cycles; re-sync panelWidth with the
+  // live box so the content width stays correct.
+  createEffect(() => {
+    props.borderVisible()
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      const w = Math.max(20, boxEl.width)
+      setPanelWidth((prev) => (prev === w ? prev : w))
+    }
+  })
 
   // ── expanded detail right-align ──
   const expandedMaxLabelW = createMemo(() => {
@@ -1294,7 +1309,7 @@ function SubAgentPanel(props: {
 
   const expandedPad = (label: string) => Math.max(0, expandedMaxLabelW() - visualWidth(label + ": "))
 
-  const expandedValAvail = () => Math.max(6, panelWidth() - INDENT - expandedMaxLabelW())
+  const expandedValAvail = () => Math.max(6, panelWidth() - gutter() - INDENT - expandedMaxLabelW())
 
   // ── header parts for colored spans ──
   const summaryParts = createMemo(() => {
@@ -1328,7 +1343,7 @@ function SubAgentPanel(props: {
     if (!open()) return false
     const icon = "\u25bc"
     const need = visualWidth(icon) + 1 + visualWidth(t("panel.title")) + versionW + summaryCols()
-    return need <= panelWidth()
+    return need <= panelWidth() - gutter()
   })
 
   const leftCols = createMemo(() => {
@@ -1340,17 +1355,19 @@ function SubAgentPanel(props: {
 
   const spacerCols = createMemo(() => {
     if (!anyEntry()) return 0
-    return Math.max(0, panelWidth() - leftCols() - summaryCols())
+    return Math.max(0, panelWidth() - gutter() - leftCols() - summaryCols())
   })
 
   const valueCols = (label: string) =>
-    Math.max(4, panelWidth() - INDENT - visualWidth(label + ": "))
+    Math.max(4, panelWidth() - gutter() - INDENT - visualWidth(label + ": "))
 
   // ── render ──
   return (
     <box
-      border={false}
-      paddingTop={0} paddingBottom={0} paddingLeft={0} paddingRight={0}
+      border={props.borderVisible()}
+      {...(props.borderVisible() ? { borderColor: pal().border } : {})}
+      paddingTop={0} paddingBottom={0}
+      paddingLeft={props.borderVisible() ? 2 : 0} paddingRight={props.borderVisible() ? 2 : 0}
       flexDirection="column" gap={0}
       ref={boxEl}
       onSizeChange={() => {
@@ -1487,7 +1504,7 @@ function SubAgentPanel(props: {
                 if (tk) w += visualWidth(tk)
                 return w
               }
-              const labelAvail = () => Math.max(6, panelWidth() - LEFT_PAD - suffixW())
+              const labelAvail = () => Math.max(6, panelWidth() - gutter() - LEFT_PAD - suffixW())
               const labelText = () => {
                 const max = labelAvail()
                 const text = entry.title || entry.agent
@@ -1631,7 +1648,7 @@ function SubAgentPanel(props: {
                         const cancelLabel = () => ` ${t("cancel.label")}`
                         const dismissLabel = () => ` ${t("dismiss.label")}`
                         const rightW = (isRunning ? visualWidth(dismissLabel()) : 0) + (isRunning && entry.sessionId ? visualWidth(cancelLabel()) : 0)
-                        const spacerW = () => Math.max(1, panelWidth() - openW() - rightW - 2)
+                        const spacerW = () => Math.max(1, panelWidth() - gutter() - openW() - rightW - 2)
                         return (
                           <box flexDirection="row">
                             <Show when={entry.sessionId}>
@@ -1688,7 +1705,7 @@ function SubAgentPanel(props: {
                 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
+                const pad = showTop ? Math.max(1, panelWidth() - gutter() - visualWidth(left) - visualWidth(right)) : 0
                 return (
                   <box flexDirection="row">
                     <text
@@ -1753,6 +1770,8 @@ interface SharedSignals {
   setSortOrder: (o: SortOrder) => void
   scrollMode: () => ScrollMode
   setScrollMode: (m: ScrollMode) => void
+  borderVisible: () => boolean
+  setBorderVisible: (v: boolean) => void
   sessionId: string
 }
 
@@ -1770,6 +1789,7 @@ function createSidebarSlot(api: TuiPluginApi, sig: SharedSignals): TuiSlotPlugin
             maxEntries={sig.maxEntries}
             sortOrder={sig.sortOrder}
             scrollMode={sig.scrollMode}
+            borderVisible={sig.borderVisible}
             sessionId={input.session_id}
           />
         )
@@ -1795,8 +1815,11 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
   const [scrollMode, setScrollMode] = createSignal<ScrollMode>(
     String(api.kv.get(`${KV_PREFIX}.scroll_mode`, "wheel")) === "click" ? "click" : "wheel"
   )
+  const [borderVisible, setBorderVisible] = createSignal<boolean>(
+    (api.kv.get(`${KV_PREFIX}.border`, false) as boolean) === true
+  )
 
-  const signals: SharedSignals = { lang, setLang, maxEntries, setMaxEntries, sortOrder, setSortOrder, scrollMode, setScrollMode, sessionId: "" }
+  const signals: SharedSignals = { lang, setLang, maxEntries, setMaxEntries, sortOrder, setSortOrder, scrollMode, setScrollMode, borderVisible, setBorderVisible, sessionId: "" }
 
   api.slots.register(createSidebarSlot(api, signals))
 
@@ -2070,6 +2093,20 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
         ))
       },
     },
+    {
+      title: "SubAgent Magazine: Border",
+      value: "subagent-border",
+      description: "Show or hide the panel border",
+      slash: { name: "subagent-border" },
+      onSelect: (dialog) => {
+        const t = createT(() => signals.lang())
+        const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, false))
+        api.kv.set(`${KV_PREFIX}.border`, !cur)
+        signals.setBorderVisible(!cur)
+        api.ui.toast({ message: !cur ? t("borderShown") : t("borderHidden") })
+        dialog?.clear()
+      },
+    },
   ])
 }