@co0ontty/wand 1.33.0 → 1.34.0

package/dist/web-ui/content/scripts.js

@@ -1390,7 +1390,7 @@
                 checkDmgAutoUpdate();
               }
               if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
-                loadClaudeHistory();
+                ensureClaudeHistoryLoaded();
               }
             });
           })
@@ -1462,8 +1462,11 @@
         // Suppress CSS transitions during initial DOM build
         document.documentElement.classList.add("no-transition");
 
-        // Apply persisted pin state before rendering
-        if (state.sidebarPinned && !isMobileLayout()) {
+        // Apply persisted pin state before rendering.
+        // 窄条（collapsed）形态不靠 .open 显示，靠 .pinned.collapsed 的 width:56px
+        // 常驻；此时强制 sessionsDrawerOpen=true 会与 toggleSidebarCollapsed 里设的
+        // false 打架，并在手机端误触发背景遮罩。窄条态下不强制 open。
+        if (state.sidebarPinned && !state.sidebarCollapsed && !isMobileLayout()) {
           state.sessionsDrawerOpen = true;
         }
         app.innerHTML = isLoggedIn ? renderAppShell() : renderLogin();
@@ -3558,6 +3561,11 @@
 
       function toggleManageMode(force) {
         state.sessionsManageMode = typeof force === "boolean" ? force : !state.sessionsManageMode;
+        if (state.sessionsManageMode && !state.claudeHistoryLoaded) {
+          // 进入管理模式即后台补齐 Claude 历史，让「已选 N」「全选」计数从一开始
+          // 就覆盖全部历史，而不是只统计已加载的那部分。
+          ensureClaudeHistoryLoaded().then(updateSessionsList);
+        }
         if (!state.sessionsManageMode) {
           clearManageSelections();
           closeSwipedItem();
@@ -3574,6 +3582,16 @@
       }
 
       function selectAllVisibleItems() {
+        // 全选语义 = 选中所有可管理项（会话 + 全部 Claude 历史）。历史在登录后
+        // 异步扫描，若用户在扫描完成前点「全选」，state.claudeHistory 仍为空会漏选，
+        // 删除时表现为"只删了已加载的，跨目录/未扫完的历史还在"。这里先确保历史
+        // 加载完成再全选。
+        if (!state.claudeHistoryLoaded) {
+          ensureClaudeHistoryLoaded().then(selectAllVisibleItems);
+          return;
+        }
+        // 展开 Claude 历史分组，让用户能直观看到这些历史项也被选中了。
+        state.claudeHistoryExpanded = true;
         var nextSessionIds = {};
         getSelectableSessions().forEach(function(session) {
           nextSessionIds[session.id] = true;
@@ -3782,6 +3800,21 @@
           });
       }
 
+      // 去重包装：登录后历史会异步扫描，多个入口（管理模式、全选、展开分组）
+      // 可能同时想确保历史就绪。共享同一个 in-flight Promise，避免重复 fetch，
+      // 且在已加载时立即 resolve。
+      var _claudeHistoryLoadingPromise = null;
+      function ensureClaudeHistoryLoaded() {
+        if (state.claudeHistoryLoaded) return Promise.resolve();
+        if (_claudeHistoryLoadingPromise) return _claudeHistoryLoadingPromise;
+        _claudeHistoryLoadingPromise = loadClaudeHistory().then(function() {
+          _claudeHistoryLoadingPromise = null;
+        }, function() {
+          _claudeHistoryLoadingPromise = null;
+        });
+        return _claudeHistoryLoadingPromise;
+      }
+
       function isMobileLayout() {
         return window.innerWidth <= 768;
       }
@@ -5892,11 +5925,17 @@
         if (sidebarMoreBtn && sidebarOverflow) {
           sidebarMoreBtn.addEventListener("click", function(e) {
             e.stopPropagation();
-            sidebarOverflow.classList.toggle("open");
+            var willOpen = !sidebarOverflow.classList.contains("open");
+            sidebarOverflow.classList.toggle("open", willOpen);
+            if (willOpen) positionSidebarOverflowMenu(sidebarOverflow);
           });
           document.addEventListener("click", function() {
             sidebarOverflow.classList.remove("open");
           });
+          // 视口尺寸变化时关闭，避免 clamp 后的定位与新尺寸不符。
+          window.addEventListener("resize", function() {
+            sidebarOverflow.classList.remove("open");
+          });
         }
         var homeBtn = document.getElementById("sidebar-home-btn");
         if (homeBtn) homeBtn.addEventListener("click", function() {
@@ -6964,7 +7003,7 @@
           event.stopPropagation();
           state.claudeHistoryExpanded = !state.claudeHistoryExpanded;
           if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
-            loadClaudeHistory();
+            ensureClaudeHistoryLoaded();
           }
           updateSessionsList();
           return;
@@ -9588,10 +9627,55 @@
           // 桌面端展开窄条 → 300px 全栏常驻。
           state.sessionsDrawerOpen = true;
         }
-        render();
+        // 轻量更新而非全量 render()：render() 会 teardown 并重建整个终端 DOM，
+        // 导致收窄/展开时终端闪烁、丢失滚动与渲染状态。这里只切布局 class
+        // （宽度 56↔300 走 CSS width transition）、重渲侧栏列表内容、刷新
+        // 收窄按钮自身的图标/文案，终端区保持不动。
+        updateLayoutState();
+        updateSessionsList();
+        updateSidebarCollapseButton();
+        hideCollapsedTileBubble();
         scheduleTerminalRefitAfterPaddingTransition();
       }
 
+      // 收窄按钮的图标/title/状态随 collapsed 切换。抽出来给轻量更新路径用，
+      // 避免为了换一个箭头方向就走全量 render()。
+      function updateSidebarCollapseButton() {
+        var btn = document.getElementById("sidebar-collapse-btn");
+        if (!btn) return;
+        var isCollapsed = !!state.sidebarPinned && !!state.sidebarCollapsed;
+        btn.classList.toggle("collapsed", isCollapsed);
+        btn.title = isCollapsed ? "展开侧栏" : "收起为窄条";
+        btn.setAttribute("aria-label", isCollapsed ? "展开侧栏" : "收起为窄条");
+        btn.innerHTML = isCollapsed
+          ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="10 6 16 12 10 18"/><line x1="20" y1="5" x2="20" y2="19"/></svg>'
+          : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="14 6 8 12 14 18"/><line x1="4" y1="5" x2="4" y2="19"/></svg>';
+      }
+
+      // 「更多操作」下拉默认 right:0 贴 more 按钮右沿向左展开。手机窄屏下这条会把
+      // 菜单左缘顶出屏幕外。打开时按视口边界 clamp：先保持 CSS 默认右对齐，仅当
+      // 真的越界才改写 left/right 把菜单拉回视口内（留 8px 边距）。
+      function positionSidebarOverflowMenu(menu) {
+        if (!menu) return;
+        menu.style.left = "";
+        menu.style.right = "";
+        var parent = menu.offsetParent || menu.parentElement;
+        if (!parent) return;
+        var margin = 8;
+        var parentRect = parent.getBoundingClientRect();
+        var rect = menu.getBoundingClientRect();
+        var vw = window.innerWidth;
+        if (rect.left < margin) {
+          // 左缘越界：改用 left 定位，把左缘顶到视口左 margin。
+          menu.style.right = "auto";
+          menu.style.left = (margin - parentRect.left) + "px";
+        } else if (rect.right > vw - margin) {
+          // 右缘越界：拉回视口右 margin（桌面右对齐时几乎不会触发）。
+          menu.style.left = "auto";
+          menu.style.right = (parentRect.right - (vw - margin)) + "px";
+        }
+      }
+
 
       // Store last focused element for focus trap
       var lastFocusedElement = null;

package/dist/web-ui/content/styles.css

@@ -574,9 +574,8 @@
       justify-content: center;
       padding: 0;
       box-shadow:
-        0 1px 3px rgba(184, 92, 55, 0.28),
-        inset 0 1px 0 rgba(255, 255, 255, 0.28),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
+        0 1px 2px rgba(184, 92, 55, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.28);
       transition:
         filter var(--transition-fast),
         box-shadow 0.22s ease,
@@ -586,40 +585,31 @@
       filter: brightness(1.06);
       transform: translateY(-1px);
       box-shadow:
-        0 4px 12px -2px rgba(184, 92, 55, 0.42),
-        inset 0 1px 0 rgba(255, 255, 255, 0.35),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
+        0 4px 10px -3px rgba(184, 92, 55, 0.36),
+        inset 0 1px 0 rgba(255, 255, 255, 0.32);
     }
     /* History tile — softer cream tone to distinguish from active sessions */
     .sidebar-collapsed-tile.history {
       background: linear-gradient(145deg, #e8d3c0 0%, #d3b69d 50%, #b89478 100%);
       color: rgba(89, 58, 32, 0.88);
       box-shadow:
-        0 1px 3px rgba(120, 88, 56, 0.22),
-        inset 0 1px 0 rgba(255, 255, 255, 0.45),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
+        0 1px 2px rgba(120, 88, 56, 0.18),
+        inset 0 1px 0 rgba(255, 255, 255, 0.42);
     }
     .sidebar-collapsed-tile.history:hover {
       box-shadow:
-        0 4px 12px -2px rgba(120, 88, 56, 0.34),
-        inset 0 1px 0 rgba(255, 255, 255, 0.5),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
+        0 4px 10px -3px rgba(120, 88, 56, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.48);
     }
-    /* Active — liquid glass crown: outer ring + warm halo + crisp top sheen */
+    /* Active — accent ring + 一层柔和暖投影 + 顶高光。原先 7 层叠加在 36px 小块上
+       糊成一团，精简到 3 层即可表达「升起 + 选中」。 */
     .sidebar-collapsed-tile.active {
       background: linear-gradient(145deg, #d27358 0%, #b35434 50%, #934128 100%);
       transform: translateY(-1px);
       box-shadow:
-        /* outer glow halo */
-        0 0 0 1px rgba(255, 255, 255, 0.7),
-        0 0 0 3px rgba(197, 101, 61, 0.32),
-        0 8px 22px -4px rgba(160, 74, 46, 0.55),
-        0 3px 8px -2px rgba(160, 74, 46, 0.32),
-        /* top sheen */
-        inset 0 1px 0 rgba(255, 255, 255, 0.45),
-        inset 1px 0 0 rgba(255, 255, 255, 0.18),
-        /* bottom depth */
-        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
+        0 0 0 2px rgba(197, 101, 61, 0.3),
+        0 5px 14px -4px rgba(160, 74, 46, 0.45),
+        inset 0 1px 0 rgba(255, 255, 255, 0.4);
     }
     .sidebar-collapsed-tile:active {
       transform: translateY(0) scale(0.94);
@@ -9034,7 +9024,6 @@
       background: rgba(178, 79, 69, 0.12);
       color: var(--danger);
       transform: rotate(90deg);
-      box-shadow: 0 2px 8px rgba(178, 79, 69, 0.16);
     }
     .drawer-close-btn:active {
       background: rgba(178, 79, 69, 0.2);
@@ -9184,17 +9173,17 @@
       opacity: 1;
     }
 
-    /* ── Session item — clean card on glass ── */
+    /* ── Session item — clean card on glass ──
+       克制原则：基础态用 hairline 描边 + 极轻顶部高光让卡片「贴」在侧栏上，
+       不给每张卡都加漂浮投影；hover/active 才升起一层柔和投影。避免多层
+       box-shadow 在半透明侧栏里互相叠加显脏。 */
     .session-item {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 252, 247, 0.42) 100%);
-      border: 0.5px solid rgba(255, 255, 255, 0.55);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 252, 247, 0.38) 100%);
+      border: 1px solid rgba(125, 91, 57, 0.08);
       border-radius: 13px;
       padding: 11px 14px;
       margin-bottom: 6px;
-      box-shadow:
-        0 0 0 0.5px rgba(125, 91, 57, 0.05),
-        0 1px 2px rgba(125, 91, 57, 0.03),
-        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
       transition:
         background 0.2s ease,
         border-color 0.2s ease,
@@ -9211,53 +9200,39 @@
     }
     .session-item:hover {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 253, 248, 0.62) 100%);
-      border-color: rgba(255, 255, 255, 0.7);
+      border-color: rgba(125, 91, 57, 0.14);
       transform: translateY(-1px);
-      box-shadow:
-        0 0 0 0.5px rgba(125, 91, 57, 0.08),
-        0 6px 16px -6px rgba(125, 91, 57, 0.18),
-        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      box-shadow: 0 4px 12px -4px rgba(125, 91, 57, 0.16);
     }
     .session-item:hover::before {
       opacity: 0.5;
       transform: scaleY(1);
     }
-    /* Selected (active) — true liquid glass pill with depth + accent glow */
+    /* Selected (active) — accent ring 用边框表达，再叠一层柔和暖投影 + 顶高光。
+       去掉原先的 6 层叠加（外环/光晕/底影/三向 inset），层数过多在玻璃上显脏。 */
     .session-item.active {
       background:
         linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.78) 100%);
-      border: 0.5px solid rgba(255, 255, 255, 0.85);
+      border: 1px solid rgba(197, 101, 61, 0.32);
       transform: translateY(-1px);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       box-shadow:
-        /* outer accent ring (soft) */
-        0 0 0 1px rgba(197, 101, 61, 0.28),
-        /* warm glow halo */
-        0 8px 28px -6px rgba(197, 101, 61, 0.32),
-        /* base elevation */
-        0 2px 6px -1px rgba(125, 91, 57, 0.1),
-        /* top inner highlight — light from above */
-        inset 0 1px 0 rgba(255, 255, 255, 0.95),
-        /* bottom inner shadow — depth at base */
-        inset 0 -1px 0 rgba(197, 101, 61, 0.08),
-        /* left inner glint */
-        inset 1px 0 0 rgba(255, 255, 255, 0.4);
+        0 4px 14px -4px rgba(197, 101, 61, 0.24),
+        inset 0 1px 0 rgba(255, 255, 255, 0.7);
     }
+    /* ::before 的左侧高亮条受父级 overflow:hidden 裁切，原来的 box-shadow 光晕
+       根本显示不出来，移除以省一次绘制。 */
     .session-item.active::before {
       opacity: 1;
       transform: scaleY(1);
-      box-shadow: 0 0 8px rgba(197, 101, 61, 0.5);
     }
     /* Multi-select state — quieter glass tint, no accent halo */
     .session-item.selected {
       background:
         linear-gradient(180deg, rgba(255, 250, 244, 0.85) 0%, rgba(255, 246, 236, 0.65) 100%);
-      border: 0.5px solid rgba(255, 255, 255, 0.7);
-      box-shadow:
-        0 0 0 1px rgba(197, 101, 61, 0.18),
-        0 4px 14px -4px rgba(125, 91, 57, 0.14),
-        inset 0 1px 0 rgba(255, 255, 255, 0.85);
+      border: 1px solid rgba(197, 101, 61, 0.2);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
     }
     .session-item.selected::before {
       opacity: 0.7;
@@ -9402,21 +9377,19 @@
       transform: scale(0.96);
       transition-duration: 0.06s;
     }
-    /* Footer tab active — same liquid glass language as .session-item.active */
+    /* Footer tab active — same liquid glass language as .session-item.active
+       （同步精简为 accent 边框 + 1 层柔和投影 + 顶高光） */
     .sidebar-footer-actions .btn.active {
       background:
         linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 242, 228, 0.78) 100%);
-      border: 0.5px solid rgba(255, 255, 255, 0.85);
+      border: 1px solid rgba(197, 101, 61, 0.28);
       color: var(--accent);
       transform: translateY(-1px);
       backdrop-filter: blur(16px) saturate(180%);
       -webkit-backdrop-filter: blur(16px) saturate(180%);
       box-shadow:
-        0 0 0 1px rgba(197, 101, 61, 0.28),
-        0 6px 18px -4px rgba(197, 101, 61, 0.32),
-        0 2px 4px -1px rgba(125, 91, 57, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.95),
-        inset 0 -1px 0 rgba(197, 101, 61, 0.08);
+        0 3px 10px -3px rgba(197, 101, 61, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.7);
     }
     .sidebar-footer-actions .btn.sidebar-logout:hover {
       background: rgba(178, 79, 69, 0.08);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@co0ontty/wand",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {