@lihengxi20/dsh-tabs 0.1.0 → 0.1.2

package/README.md

@@ -20,9 +20,10 @@ DSH（DeepSeek Harness）Web GUI 的**顶部会话标签页**插件：在会话
 - **标签文案**：`工作区 / 会话标题`；工作区取侧边栏的工作区标题（缺省回退目录名），空白会话显示 `工作区 / 新会话`。
 - **切换与关闭**：点击切换；悬停出现 `×`（单个标签也可关闭）；中键点击关闭。关闭只移除标签，不归档、不停止任务；关闭最后一个标签会回到「未选中会话」的空白页。
 - **右键菜单**：重命名 / 关闭 / 关闭其他 (n) / 全部关闭 (n)；重命名走 Host 的 `session/rename`，空白会话禁用。
+- **固定标签**：鼠标移入标签时，关闭按钮左侧出现图钉；点击可固定/取消固定。固定标签始终排在标签栏最左侧（按固定先后排列），刷新后保留；固定只影响显示顺序，不改变关闭语义。
 - **状态圆点**：运行中（蓝/脉冲）、等待审批或回答（橙）、完成未读（绿）。
 - **持久化**：标签顺序、活动标签、标题与工作区缓存存在浏览器 `localStorage`（键 `dsh-session-tabs.v1`），刷新/重开客户端后恢复。
-- **跟随主题**：全部使用 DSH 主题变量，深浅色、字体大小自动适配。
+- **跟随主题**：文字、边框、背景、右键菜单与重命名弹层全部使用 DSH 主题变量；标签文字浅色下纯黑、深色下纯白；激活标签下划线深色为暖金 `#E6CCA0`，浅色自动换成对比度更高的 `#A67C2E`。
 
 标签是导航状态：DSH 同一时刻仍只渲染一个会话，后台任务照常运行。
 
@@ -36,7 +37,7 @@ DSH（DeepSeek Harness）Web GUI 的**顶部会话标签页**插件：在会话
 通过 DSH 自带插件管理器添加：
 
 ```sh
-# npm（发布后）
+# npm
 dsh plugin --profile desktop add @lihengxi20/dsh-tabs
 
 # 或直接从 GitHub 仓库安装（始终跟最新代码）

package/lib/client.js

@@ -59,6 +59,8 @@
           "menu.close": "关闭",
           "menu.closeOthers": "关闭其他",
           "menu.closeAll": "全部关闭",
+          "pin": "固定标签",
+          "unpin": "取消固定标签",
           "rename.title": "重命名会话",
           "rename.placeholder": "输入会话标题",
           "rename.cancel": "取消",
@@ -76,6 +78,8 @@
           "menu.close": "Close",
           "menu.closeOthers": "Close Others",
           "menu.closeAll": "Close All",
+          "pin": "Pin tab",
+          "unpin": "Unpin tab",
           "rename.title": "Rename session",
           "rename.placeholder": "Session title",
           "rename.cancel": "Cancel",
@@ -90,6 +94,7 @@
       // ─────────────────────────────────────────────────────────────────────
       var state = {
         tabs: [],        // session ids, opening order
+        pinned: [],      // session ids, pinned order (shown first, left side)
         titles: {},      // sessionId -> last known durable title
         wsTitles: {},    // sessionId -> workspace display title
         currentId: null, // the session the header is actually showing
@@ -119,7 +124,7 @@
       var lastPersisted = null;
       function persist() {
         try {
-          var payload = JSON.stringify({ tabs: state.tabs, titles: state.titles, wsTitles: state.wsTitles, active: state.active });
+          var payload = JSON.stringify({ tabs: state.tabs, pinned: state.pinned, titles: state.titles, wsTitles: state.wsTitles, active: state.active });
           if (payload === lastPersisted) return;
           root.localStorage.setItem(LS_KEY, payload);
           lastPersisted = payload;
@@ -149,8 +154,15 @@
               if (typeof value === "string") wsTitles[id] = value;
             });
           }
+          var pinned = [];
+          if (Array.isArray(parsed.pinned)) {
+            parsed.pinned.forEach(function (id) {
+              if (typeof id === "string" && tabs.indexOf(id) >= 0 && pinned.indexOf(id) < 0) pinned.push(id);
+            });
+          }
           state = Object.assign({}, state, {
             tabs: tabs,
+            pinned: pinned,
             titles: titles,
             wsTitles: wsTitles,
             active: typeof parsed.active === "string" ? parsed.active : null
@@ -178,6 +190,29 @@
         return "";
       }
 
+      /** Visible tab order: pinned group (pin order) first, then unpinned tabs (open order). */
+      function displayOrder(tabs, pinned) {
+        var pinnedIds = [];
+        (pinned || []).forEach(function (id) {
+          if (tabs.indexOf(id) >= 0 && pinnedIds.indexOf(id) < 0) pinnedIds.push(id);
+        });
+        return pinnedIds.concat(tabs.filter(function (id) { return pinnedIds.indexOf(id) < 0; }));
+      }
+
+      /** Enforce MAX_TABS by trimming the oldest unpinned tabs; pinned tabs survive. */
+      function trimTabs(tabs) {
+        if (tabs.length <= MAX_TABS) return tabs;
+        var pinnedSet = {};
+        (state.pinned || []).forEach(function (id) { pinnedSet[id] = true; });
+        var out = tabs.slice();
+        var i = 0;
+        while (out.length > MAX_TABS && i < out.length) {
+          if (pinnedSet[out[i]] === true) i++;
+          else out.splice(i, 1);
+        }
+        return out.length > MAX_TABS ? out.slice(out.length - MAX_TABS) : out;
+      }
+
       function syncFromList(list) {
         if (!list) return;
         var tabs = state.tabs.slice();
@@ -207,19 +242,22 @@
 
         // Prune tabs whose session vanished (deleted / archived away / no
         // longer catalogued). Never prune the currently open session.
+        var pinned = state.pinned.slice();
         if (ready) {
           var kept = tabs.filter(function (id) {
             return id === current || Object.prototype.hasOwnProperty.call(byId, id);
           });
           if (kept.length !== tabs.length) { tabs = kept; changed = true; }
         }
+        var validPinned = pinned.filter(function (id) { return tabs.indexOf(id) >= 0; });
+        if (validPinned.length !== pinned.length) { pinned = validPinned; changed = true; }
 
         // Opening a session (sidebar / search / new session / tab click) adds
         // it. The current session is always present, so even the first session
         // of a fresh window gets exactly one tab.
         if (current && tabs.indexOf(current) < 0 && !isSuppressed(current)) {
           tabs.push(current);
-          if (tabs.length > MAX_TABS) tabs = tabs.slice(tabs.length - MAX_TABS);
+          tabs = trimTabs(tabs);
           changed = true;
         }
 
@@ -229,6 +267,7 @@
         state = Object.assign({}, state, {
           list: list,
           tabs: tabs,
+          pinned: pinned,
           titles: titles,
           active: active,
           ready: state.ready || ready
@@ -293,7 +332,7 @@
         var titles = Object.assign({}, state.titles);
         if (id && tabs.indexOf(id) < 0 && !isSuppressed(id)) {
           tabs.push(id);
-          if (tabs.length > MAX_TABS) tabs = tabs.slice(tabs.length - MAX_TABS);
+          tabs = trimTabs(tabs);
         }
         state = Object.assign({}, state, {
           currentId: id,
@@ -354,10 +393,15 @@
         tabs.splice(idx, 1);
         var titles = Object.assign({}, state.titles);
         delete titles[id];
+        var pinned = state.pinned.filter(function (pid) { return pid !== id; });
         var wasCurrent = (state.currentId || currentSessionId(state.list)) === id;
-        var nextActive = tabs[Math.min(idx, tabs.length - 1)] || null;
+        var order = displayOrder(state.tabs, state.pinned);
+        var orderIdx = order.indexOf(id);
+        var remaining = order.filter(function (tid) { return tid !== id; });
+        var nextActive = remaining[Math.min(Math.max(orderIdx, 0), remaining.length - 1)] || null;
         state = Object.assign({}, state, {
           tabs: tabs,
+          pinned: pinned,
           titles: titles,
           active: nextActive,
           closed: { id: id, at: Date.now() }
@@ -372,8 +416,10 @@
         openSession(ctx, keepId);
         var titles = {};
         if (state.titles[keepId]) titles[keepId] = state.titles[keepId];
+        var pinned = state.pinned.indexOf(keepId) >= 0 ? [keepId] : [];
         state = Object.assign({}, state, {
           tabs: [keepId],
+          pinned: pinned,
           titles: titles,
           active: keepId,
           currentId: keepId,
@@ -387,6 +433,7 @@
         if (state.tabs.length === 0) return;
         state = Object.assign({}, state, {
           tabs: [],
+          pinned: [],
           titles: {},
           active: null,
           currentId: null,
@@ -405,6 +452,17 @@
         }
       }
 
+      function togglePin(ctx, id) {
+        if (state.tabs.indexOf(id) < 0) return;
+        var pinned = state.pinned.slice();
+        var idx = pinned.indexOf(id);
+        if (idx >= 0) pinned.splice(idx, 1);
+        else pinned.push(id);
+        state = Object.assign({}, state, { pinned: pinned });
+        persist();
+        emit();
+      }
+
       function renameSession(ctx, id, title) {
         var sessions = null;
         try { sessions = ctx.get("sessions"); } catch (e) { sessions = null; }
@@ -441,6 +499,16 @@
         }));
       }
 
+      function PinIcon(pinned) {
+        return h("svg", {
+          width: 11, height: 11, viewBox: "0 0 24 24", fill: pinned ? "currentColor" : "none",
+          "aria-hidden": "true"
+        }, h("path", {
+          d: "M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
+          stroke: "currentColor", strokeWidth: 1.6, strokeLinejoin: "round", strokeLinecap: "round"
+        }));
+      }
+
       // ─────────────────────────────────────────────────────────────────────
       // components
       // ─────────────────────────────────────────────────────────────────────
@@ -480,6 +548,9 @@
             event.stopPropagation();
             closeTab(props.ctx, props.id);
           },
+          onAuxClick: function (event) {
+            event.stopPropagation();
+          },
           onContextMenu: function (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -487,6 +558,30 @@
         }, CloseIcon());
       }
 
+      function PinButton(props) {
+        var pinned = props.pinned === true;
+        var label = props.t(pinned ? "unpin" : "pin");
+        return h("button", {
+          type: "button",
+          className: "dshst-pin",
+          title: label,
+          "aria-label": label,
+          "aria-pressed": pinned ? "true" : "false",
+          "data-pinned": pinned ? "true" : "false",
+          onClick: function (event) {
+            event.stopPropagation();
+            togglePin(props.ctx, props.id);
+          },
+          onAuxClick: function (event) {
+            event.stopPropagation();
+          },
+          onContextMenu: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }, PinIcon(pinned));
+      }
+
       function useMenuPosition(x, y, width, height) {
         var ref = React.useRef(null);
         var posState = React.useState({ x: x, y: y });
@@ -721,6 +816,8 @@
         var store = props.store;
         var list = store.list || { byId: {} };
         var tabs = store.tabs || [];
+        var pinned = store.pinned || [];
+        var displayTabs = displayOrder(tabs, pinned);
         var ctx = props.ctx;
         var t = props.t;
         var current = store.currentId || currentSessionId(list) || store.active;
@@ -743,7 +840,7 @@
           className: "dshst-tabs",
           role: "tablist",
           "aria-label": t("tabs.aria")
-        }, tabs.map(function (id) {
+        }, displayTabs.map(function (id) {
           var row = list.byId ? list.byId[id] : undefined;
           var label;
           if (row && row.blank) label = t("newSession");
@@ -752,6 +849,7 @@
           else label = t("untitled");
           var workspace = workspaceTitleFor(store, id, row);
           var active = id === current;
+          var isPinned = pinned.indexOf(id) >= 0;
           var status = row ? statusOf(store, row) : "idle";
           var title = (workspace ? workspace + " / " : "") + label + (row && row.cwd ? "\n" + row.cwd : "");
           return h("div", {
@@ -761,6 +859,7 @@
             tabIndex: active ? 0 : -1,
             "aria-selected": active ? "true" : "false",
             "data-active": active ? "true" : "false",
+            "data-pinned": isPinned ? "true" : "false",
             "data-status": status,
             "data-session-id": id,
             "data-menu-target": menu !== null && menu.id === id ? "true" : "false",
@@ -785,6 +884,7 @@
               ? h("span", { className: "dshst-sep", "aria-hidden": "true" }, "/")
               : null,
             h("span", { className: "dshst-label" }, label),
+            h(PinButton, { ctx: ctx, id: id, t: t, pinned: isPinned }),
             h(CloseButton, { ctx: ctx, id: id, t: t })
           );
         }));
@@ -917,20 +1017,22 @@
       // styles
       // ─────────────────────────────────────────────────────────────────────
       var CSS = [
+        "body{--dshst-tab-accent:#a67c2e;--dshst-tab-text:#000;--dshst-tab-text-hover:#000}",
+        "body[data-ds-dark-theme]{--dshst-tab-accent:#e6cca0;--dshst-tab-text:#fff;--dshst-tab-text-hover:#fff}",
         ".dshst-leading{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--dsw-alias-label-tertiary);font-size:14px;line-height:20px;-webkit-app-region:no-drag}",
         ".dshst-icon{flex:none;opacity:.9}",
         ".dshst-ws{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
         ".dshst-leading .dshst-ws{max-width:180px}",
         ".dshst-sep{color:var(--dsw-alias-label-caption);flex:none}",
-        ".dshst-row{--dshst-tab-accent:#e6cca0;grid-column:1/-1;min-width:0;padding-left:8px;margin-top:0;display:flex;align-items:flex-start;-webkit-app-region:no-drag}",
+        ".dshst-row{grid-column:1/-1;min-width:0;padding-left:8px;margin-top:0;display:flex;align-items:flex-start;-webkit-app-region:no-drag}",
         "header:has(> [data-dsh-session-tabs]){padding-bottom:0}",
         ".dshst-tabs{display:flex;align-items:center;gap:0;min-width:0;width:100%;overflow-x:auto;scrollbar-width:none;padding:0}",
         ".dshst-tabs::-webkit-scrollbar{display:none}",
-        ".dshst-tab{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:300px;min-width:0;min-height:24px;padding:4px 10px 7px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:13px;font-weight:500;line-height:16px;cursor:pointer;position:relative;-webkit-app-region:no-drag}",
+        ".dshst-tab{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:300px;min-width:0;min-height:24px;padding:4px 10px 7px;border:0;border-radius:6px;background:transparent;color:var(--dshst-tab-text);font:inherit;font-size:13px;font-weight:500;line-height:16px;cursor:pointer;position:relative;-webkit-app-region:no-drag}",
         ".dshst-tab:before{content:\"\";position:absolute;inset:0;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;pointer-events:none}",
-        ".dshst-tab .dshst-ws{max-width:110px;flex:none;color:var(--dsw-alias-label-caption);font-size:12px;font-weight:500;line-height:16px}",
-        ".dshst-tab .dshst-sep{font-size:12px;opacity:.9}",
-        "@media (hover:hover){.dshst-tab:hover{color:var(--dsw-alias-label-secondary)}.dshst-tab:hover:before{border-color:var(--dsw-alias-border-l3)}}",
+        ".dshst-tab .dshst-ws{max-width:110px;flex:none;color:var(--dshst-tab-text);opacity:.65;font-size:12px;font-weight:500;line-height:16px}",
+        ".dshst-tab .dshst-sep{color:var(--dshst-tab-text);font-size:12px;opacity:.6}",
+        "@media (hover:hover){.dshst-tab:hover{color:var(--dshst-tab-text-hover)}.dshst-tab:hover:before{border-color:var(--dsw-alias-border-l3)}}",
         ".dshst-tab:focus-visible:before{border-color:var(--dsw-alias-border-l3)}",
         ".dshst-tab[data-active=\"true\"]{color:var(--dsw-alias-state-business-primary)}",
         ".dshst-tab[data-active=\"true\"]:before{border-color:var(--dsw-alias-border-l4)}",
@@ -945,15 +1047,18 @@
         ".dshst-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:14px;margin-left:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;opacity:0}",
         ".dshst-tab:hover .dshst-close,.dshst-tab:focus-within .dshst-close{opacity:1}",
         "@media (hover:hover){.dshst-close:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}}",
+        ".dshst-pin{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:14px;margin-left:2px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;opacity:0}",
+        ".dshst-tab:hover .dshst-pin,.dshst-tab:focus-within .dshst-pin{opacity:1}",
+        ".dshst-tab[data-pinned=\"true\"] .dshst-pin{opacity:1;color:var(--dsw-alias-label-secondary)}",
+        "@media (hover:hover){.dshst-pin:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.dshst-tab[data-pinned=\"true\"] .dshst-pin:hover{color:var(--dshst-tab-text)}}",
         "@media (prefers-reduced-motion:reduce){.dshst-tab[data-status=\"running\"] .dshst-dot{animation:none}}",
         ".dshst-tab[data-menu-target=\"true\"]{background:var(--dsw-alias-interactive-bg-hover)}",
-        ".dshst-menu{position:fixed;z-index:1200;min-width:180px;box-sizing:border-box;padding:4px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l3);box-shadow:0 10px 30px rgba(0,0,0,.35);outline:none;-webkit-app-region:no-drag}",
-        ".dshst-menu-item{display:flex;align-items:center;justify-content:space-between;gap:18px;height:32px;padding:0 10px;border-radius:5px;color:var(--dsw-alias-label-primary);font-size:13px;line-height:16px;cursor:pointer;white-space:nowrap;user-select:none}",
+        ".dshst-menu{position:fixed;z-index:1200;min-width:180px;box-sizing:border-box;padding:4px;border:0;border-radius:var(--dsw-radius-lg);background:var(--dsw-specific-menu);backdrop-filter:var(--dsw-menu-backdrop-filter);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent);outline:none;-webkit-app-region:no-drag}",
+        ".dshst-menu-item{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:34px;padding:6px 10px;border-radius:var(--dsw-radius-md);color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;cursor:pointer;white-space:nowrap;user-select:none}",
         ".dshst-menu-item[data-hovered=\"true\"]{background:var(--dsw-alias-interactive-bg-hover)}",
-        ".dshst-menu-item[data-disabled=\"true\"]{color:var(--dsw-alias-label-dimmed);cursor:default;background:transparent}",
+        ".dshst-menu-item[data-disabled=\"true\"]{opacity:.4;cursor:default;background:transparent}",
         ".dshst-menu-count{color:var(--dsw-alias-label-caption);font-size:12px;font-variant-numeric:tabular-nums}",
-        ".dshst-menu-item[data-disabled=\"true\"] .dshst-menu-count{color:var(--dsw-alias-label-dimmed)}",
-        ".dshst-rename{position:fixed;z-index:1201;width:280px;box-sizing:border-box;padding:12px;border-radius:10px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l3);box-shadow:0 12px 32px rgba(0,0,0,.4);-webkit-app-region:no-drag}",
+        ".dshst-rename{position:fixed;z-index:1201;width:280px;box-sizing:border-box;padding:14px;border:0;border-radius:var(--dsw-radius-lg);background:var(--dsw-specific-menu);backdrop-filter:var(--dsw-menu-backdrop-filter);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent);-webkit-app-region:no-drag}",
         ".dshst-rename-title{margin-bottom:8px;color:var(--dsw-alias-label-caption);font-size:12px;line-height:16px}",
         ".dshst-rename-input{width:100%;box-sizing:border-box;height:32px;padding:0 9px;border:1px solid var(--dsw-alias-border-l3);border-radius:6px;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;outline:none}",
         ".dshst-rename-input:focus{border-color:var(--dsw-alias-state-business-primary)}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lihengxi20/dsh-tabs",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Session tabs in the DSH conversation header: switch, close, rename and persist open sessions, with workspace/title labels and live status.",
   "license": "MIT",
   "type": "module",