@co0ontty/wand 1.21.19 → 1.23.0

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

@@ -1350,7 +1350,7 @@
                   ) +
                 '</div>' +
                 '<div class="topbar-right">' +
-                  (selectedSession && selectedSession.cwd ? '<button id="topbar-file-button" class="topbar-btn square' + (state.filePanelOpen ? ' active' : '') + '" type="button" aria-label="文件" title="文件"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>' : '') +
+                  '<button id="topbar-file-button" class="topbar-btn square' + (state.filePanelOpen ? ' active' : '') + '" type="button" aria-label="文件" title="查看文件（可修改路径）"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>' +
                   '<span id="topbar-git-slot" class="topbar-git-slot">' + renderTopbarGitBadgeHtml() + '</span>' +
                   (selectedSession ? renderTopbarMoreMenuHtml(selectedSession) : '') +
                 '</div>' +
@@ -1366,7 +1366,7 @@
                 '<div class="file-side-panel-body">' +
                   '<div class="file-explorer-header">' +
                     '<button class="file-explorer-up" id="file-explorer-up" type="button" title="返回上级目录" aria-label="返回上级目录">⬆</button>' +
-                    '<span class="file-explorer-path" id="file-explorer-cwd" title="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '">' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '</span>' +
+                    '<input type="text" class="file-explorer-path" id="file-explorer-cwd" value="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '" title="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '" placeholder="输入路径并回车..." spellcheck="false" autocomplete="off" autocapitalize="off" autocorrect="off" aria-label="当前路径，可直接修改后回车" />' +
                     '<button class="file-explorer-toggle-hidden' + (state.fileExplorerShowHidden ? ' active' : '') + '" id="file-explorer-toggle-hidden" type="button" title="' + (state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件") + '" aria-pressed="' + (state.fileExplorerShowHidden ? "true" : "false") + '">' + (state.fileExplorerShowHidden ? "👁" : "👁‍🗨") + '</button>' +
                     '<button class="file-explorer-refresh" id="file-explorer-refresh" title="刷新" aria-label="刷新文件列表">↻</button>' +
                   '</div>' +
@@ -1423,15 +1423,22 @@
                 '<div class="composer-top-row">' +
                   '<div id="todo-progress" class="todo-progress hidden">' +
                     '<div class="todo-progress-header" id="todo-progress-toggle">' +
-                      '<span class="todo-progress-spinner" aria-hidden="true"></span>' +
-                      '<span class="todo-progress-message" id="todo-progress-message"></span>' +
-                      '<span class="todo-progress-status" id="todo-progress-status">执行中</span>' +
-                      '<svg class="todo-progress-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>' +
-                    '</div>' +
-                    '<div class="todo-progress-body hidden" id="todo-progress-body">' +
-                      '<ul class="todo-progress-list" id="todo-progress-list"></ul>' +
+                      '<div class="todo-progress-left">' +
+                        '<span class="todo-progress-ring" id="todo-progress-ring" aria-hidden="true" style="--progress:0">' +
+                          '<svg width="16" height="16" viewBox="0 0 36 36">' +
+                            '<circle class="todo-ring-track" cx="18" cy="18" r="15.5" fill="none" stroke-width="4"/>' +
+                            '<circle class="todo-ring-fill" cx="18" cy="18" r="15.5" fill="none" stroke-width="4" stroke-linecap="round"/>' +
+                          '</svg>' +
+                        '</span>' +
+                        '<span class="todo-progress-counter" id="todo-progress-counter"></span>' +
+                        '<span class="todo-progress-task" id="todo-progress-task"></span>' +
+                      '</div>' +
+                      '<svg class="todo-progress-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg>' +
                     '</div>' +
                   '</div>' +
+                  '<div class="todo-progress-body hidden" id="todo-progress-body">' +
+                    '<ul class="todo-progress-list" id="todo-progress-list"></ul>' +
+                  '</div>' +
                 '</div>' +
                 '<div class="input-composer">' +
                   '<button id="prompt-optimize-btn" class="prompt-optimize-btn" type="button" title="提示词优化（AI）" aria-label="提示词优化">' +
@@ -2877,7 +2884,15 @@
         var cwdEl = document.getElementById("file-explorer-cwd");
         if (!cwdEl) return;
         var cwd = session && session.cwd ? session.cwd : getConfigCwd();
-        cwdEl.textContent = cwd;
+        // Don't clobber the user's in-progress edit when the input is focused.
+        if (cwdEl.tagName === "INPUT") {
+          if (document.activeElement !== cwdEl) {
+            cwdEl.value = cwd;
+          }
+        } else {
+          cwdEl.textContent = cwd;
+        }
+        cwdEl.title = cwd;
       }
 
       function closeFilePanel() {
@@ -3029,7 +3044,14 @@
         state.fileExplorerTotal = 0;
         explorer.innerHTML = '<div class="file-explorer"><div class="tree-loading" style="padding:12px;color:var(--text-muted);font-size:0.8125rem;">加载中…</div></div>';
         if (cwdEl) {
-          cwdEl.textContent = cwd;
+          if (cwdEl.tagName === "INPUT") {
+            // Avoid clobbering in-progress text while the user is typing.
+            if (document.activeElement !== cwdEl) {
+              cwdEl.value = cwd;
+            }
+          } else {
+            cwdEl.textContent = cwd;
+          }
           cwdEl.title = cwd;
         }
         var url = "/api/directory?q=" + encodeURIComponent(cwd) +
@@ -5084,6 +5106,56 @@
         var fileToggleHidden = document.getElementById("file-explorer-toggle-hidden");
         if (fileToggleHidden) fileToggleHidden.addEventListener("click", toggleExplorerHidden);
 
+        // 路径输入框：支持点击修改路径，回车跳转，Esc 撤销。
+        var fileCwdInput = document.getElementById("file-explorer-cwd");
+        if (fileCwdInput && fileCwdInput.tagName === "INPUT") {
+          var lastCommittedCwd = fileCwdInput.value;
+          var normalizeCwdInput = function(raw) {
+            var s = (raw || "").trim();
+            if (!s) return "";
+            // 折叠重复斜杠，去掉尾随斜杠（根目录除外）。
+            s = s.replace(/\/{2,}/g, "/");
+            if (s.length > 1) s = s.replace(/\/+$/, "");
+            return s;
+          };
+          fileCwdInput.addEventListener("focus", function() {
+            lastCommittedCwd = fileCwdInput.value;
+            // Select all on focus so the user can immediately overwrite.
+            setTimeout(function() {
+              try { fileCwdInput.select(); } catch (e) {}
+            }, 0);
+          });
+          fileCwdInput.addEventListener("keydown", function(e) {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              var next = normalizeCwdInput(fileCwdInput.value);
+              if (!next) return;
+              lastCommittedCwd = next;
+              fileCwdInput.value = next;
+              refreshFileExplorer({ cwd: next });
+              fileCwdInput.blur();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              fileCwdInput.value = lastCommittedCwd;
+              fileCwdInput.blur();
+            }
+          });
+          fileCwdInput.addEventListener("blur", function() {
+            var next = normalizeCwdInput(fileCwdInput.value);
+            if (!next) {
+              fileCwdInput.value = lastCommittedCwd;
+              return;
+            }
+            if (next === lastCommittedCwd) {
+              fileCwdInput.value = next;
+              return;
+            }
+            lastCommittedCwd = next;
+            fileCwdInput.value = next;
+            refreshFileExplorer({ cwd: next });
+          });
+        }
+
         // File search
         var fileSearchInput = document.getElementById("file-search-input");
         var fileSearchClear = document.getElementById("file-search-clear");
@@ -7523,6 +7595,14 @@
         // Reset todo progress bar
         var todoEl = document.getElementById("todo-progress");
         if (todoEl) todoEl.classList.add("hidden");
+        // 同时清掉上一会话残留的 "回复中 N.Ns" 状态条以及它的计时器/glow。
+        // 不清就会出现：切到新建的空会话，底部仍显示前一会话的 todolist + 回复中。
+        var staleStatusBar = document.querySelector(".structured-status-bar");
+        if (staleStatusBar) staleStatusBar.remove();
+        if (_statusBarTimerId) { clearInterval(_statusBarTimerId); _statusBarTimerId = null; }
+        _statusBarStartTime = 0;
+        var staleComposer = document.querySelector(".input-composer");
+        if (staleComposer) staleComposer.classList.remove("in-flight");
         var session = foundSession;
         state.preferredCommand = getPreferredTool();
         state.chatMode = getSafeModeForTool("claude", session && session.mode ? session.mode : state.chatMode);
@@ -13730,6 +13810,10 @@
             state.lastRenderedEmpty = "empty";
             state.lastRenderedMsgCount = 0;
           }
+          // 空会话进入空状态前，把上一会话残留的状态条 / todo 进度条清掉。
+          // 这里是 selectSession 之外的兜底：WS init 等异步路径也会落到这条空分支。
+          renderStructuredStatusBar(null, selectedSession);
+          updateTodoProgress([]);
           return;
         }
 
@@ -14067,10 +14151,10 @@
         if (prog && body) {
           if (todoExpanded) {
             prog.classList.add("expanded");
-            body.classList.remove("hidden");
+            body.classList.add("expanded");
           } else {
             prog.classList.remove("expanded");
-            body.classList.add("hidden");
+            body.classList.remove("expanded");
           }
         }
       });
@@ -14092,14 +14176,17 @@
         }
 
         var container = document.getElementById("todo-progress");
+        var bodyEl = document.getElementById("todo-progress-body");
         if (!container) return;
 
         if (!todos || todos.length === 0) {
           container.classList.add("hidden");
+          if (bodyEl) bodyEl.classList.add("hidden");
           return;
         }
 
         container.classList.remove("hidden");
+        if (bodyEl) bodyEl.classList.remove("hidden");
 
         var completed = 0;
         var inProgress = 0;
@@ -14121,6 +14208,7 @@
         if (allDone) {
           // Hide todo when all tasks are completed
           container.classList.add("hidden");
+          if (bodyEl) bodyEl.classList.add("hidden");
           return;
         } else {
           container.classList.remove("all-done");
@@ -14132,6 +14220,14 @@
         var task = document.getElementById("todo-progress-task");
         if (task) task.textContent = activeTask;
 
+        // Drive the circular progress ring with the honest "completed / total" fraction
+        // (counter text shows the 1-indexed current step, ring shows actual done ratio).
+        var ring = document.getElementById("todo-progress-ring");
+        if (ring) {
+          var ratio = todos.length > 0 ? completed / todos.length : 0;
+          ring.style.setProperty("--progress", ratio.toFixed(3));
+        }
+
         // Render expanded list
         var list = document.getElementById("todo-progress-list");
         if (list) {

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

@@ -685,6 +685,40 @@
       font-weight: 500;
     }
 
+    /* When rendered as <input> (editable path) keep the same look but reveal
+       an editable affordance on hover/focus. */
+    input.file-explorer-path {
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--radius-sm);
+      padding: 4px 8px;
+      height: 28px;
+      line-height: 1.2;
+      cursor: text;
+      transition: background-color var(--transition-fast),
+                  border-color var(--transition-fast),
+                  color var(--transition-fast);
+      outline: none;
+      text-overflow: ellipsis;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    input.file-explorer-path::placeholder {
+      color: var(--text-muted);
+      opacity: 0.6;
+    }
+    input.file-explorer-path:hover {
+      background: rgba(255, 255, 255, 0.5);
+      border-color: var(--border);
+      color: var(--text-secondary);
+    }
+    input.file-explorer-path:focus {
+      background: var(--bg-primary);
+      border-color: var(--accent);
+      color: var(--text-primary);
+      text-overflow: clip;
+    }
+
     .file-explorer-actions { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
 
     .file-explorer-refresh {
@@ -5311,10 +5345,12 @@
     .input-label { font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }
     .input-textarea-wrap { position: relative; width: 100%; }
 
-    /* Composer top row: holds todo collapse bar (left) + reply status bar (right) on one line */
+    /* Composer top row: holds todo collapse bar (left) + reply status bar (right) on one line.
+       position: relative anchors the upward-floating .todo-progress-body to the full row width. */
     .composer-top-row {
+      position: relative;
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: 8px;
       min-width: 0;
     }
@@ -5357,31 +5393,52 @@
       min-width: 0;
       flex: 1;
     }
-    .todo-progress-spinner {
-      width: 14px;
-      height: 14px;
-      min-width: 14px;
-      border: 2px solid var(--accent-muted);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
+    /* Circular progress ring (replaces the old plain spinner) */
+    .todo-progress-ring {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      flex-shrink: 0;
     }
-    .todo-progress.all-done .todo-progress-spinner {
-      display: none;
+    .todo-progress-ring svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
     }
-    .todo-progress.all-done .todo-progress-left::before {
-      content: "✓";
-      font-size: 0.8125rem;
-      font-weight: 700;
-      color: #4a7a4f;
-      width: 14px;
-      text-align: center;
+    .todo-ring-track {
+      stroke: rgba(197, 101, 61, 0.18);
+    }
+    .todo-ring-fill {
+      stroke: var(--accent);
+      /* circumference = 2 * π * 15.5 ≈ 97.39 */
+      stroke-dasharray: 97.39;
+      stroke-dashoffset: calc(97.39 * (1 - var(--progress, 0)));
+      transition: stroke-dashoffset 0.35s ease;
+    }
+    .todo-progress-ring::after {
+      content: "";
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--accent);
+      opacity: 0.6;
+      animation: ringPulse 1.4s ease-in-out infinite;
+    }
+    @keyframes ringPulse {
+      0%, 100% { opacity: 0.35; transform: scale(0.85); }
+      50%      { opacity: 0.95; transform: scale(1.05); }
     }
     .todo-progress-counter {
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-primary);
       white-space: nowrap;
+      font-variant-numeric: tabular-nums;
     }
     .todo-progress-task {
       font-size: 0.75rem;
@@ -5398,44 +5455,84 @@
     .todo-progress.expanded .todo-progress-chevron {
       transform: rotate(180deg);
     }
+
+    /* Expanded body floats UPWARD above the composer, spans the full row width,
+       and is decoupled from the flex row so the status bar on the right does not
+       animate together with the expansion. */
     .todo-progress-body {
-      border-top: 1px solid var(--border-subtle);
-      padding: 6px 10px 8px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(100% + 6px);
+      background: rgba(255, 251, 246, 0.98);
+      border: 1px solid var(--border-default);
+      border-radius: 12px;
+      padding: 8px 10px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      max-height: 320px;
+      overflow-y: auto;
+      z-index: 30;
+      opacity: 0;
+      transform: translateY(6px);
+      pointer-events: none;
+      transition: opacity 0.18s ease, transform 0.18s ease;
     }
     .todo-progress-body.hidden { display: none; }
+    .todo-progress-body.expanded {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
     .todo-progress-list {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: 3px;
+      gap: 1px;
     }
     .todo-progress-item {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 3px 4px;
-      border-radius: 6px;
-      font-size: 0.75rem;
+      gap: 10px;
+      padding: 6px 8px;
+      border-radius: 8px;
+      font-size: 0.8125rem;
       color: var(--text-secondary);
+      line-height: 1.35;
       transition: background var(--transition-fast);
     }
+    .todo-progress-item + .todo-progress-item {
+      border-top: 1px solid var(--border-subtle);
+      border-radius: 0;
+    }
+    .todo-progress-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
+    .todo-progress-item:last-child  { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
     .todo-progress-item.active {
       color: var(--text-primary);
       font-weight: 500;
-      background: rgba(197, 101, 61, 0.06);
+      background: rgba(197, 101, 61, 0.07);
     }
     .todo-progress-item.done {
       color: var(--text-muted);
       text-decoration: line-through;
       text-decoration-color: var(--text-muted);
     }
+    .todo-progress-item > span:last-child {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     .todo-item-icon {
       width: 16px;
       min-width: 16px;
       text-align: center;
-      font-size: 0.6875rem;
+      font-size: 0.75rem;
+      flex-shrink: 0;
     }
     .todo-item-icon.pending { color: var(--text-muted); }
     .todo-item-icon.active { color: var(--accent); }
@@ -10473,7 +10570,10 @@
     }
 
     .file-preview-modal {
-      width: min(90vw, calc(100vw - 380px));
+      /* 桌面端：留出侧边栏空间，但保证最小宽度，避免在窄视口上塌成一条缝。
+         之前是 min(90vw, calc(100vw - 380px))，当 100vw < 380px 时整个值为负，
+         元素直接被收成 0 宽。这里用 max() 兜底一个最小宽度。 */
+      width: min(90vw, max(640px, calc(100vw - 380px)));
       max-width: 1000px;
       height: 80vh;
       max-height: 85vh;
@@ -10492,6 +10592,65 @@
       to { opacity: 1; transform: translateY(0) scale(1); }
     }
 
+    /* 移动端（含竖屏手机）：铺满整个视口，去掉圆角和边框，
+       使用 dvh 兼容浏览器地址栏占用。 */
+    @media (max-width: 768px) {
+      .file-preview-overlay {
+        padding: 0;
+        align-items: stretch;
+        justify-content: stretch;
+      }
+      .file-preview-modal {
+        width: 100vw;
+        max-width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+        max-height: 100vh;
+        max-height: 100dvh;
+        border-radius: 0;
+        border: none;
+        box-shadow: none;
+        animation: fade-in 0.18s ease;
+      }
+      .file-preview-header {
+        padding: 10px 12px;
+        gap: 8px;
+        /* 给安全区让位，例如带刘海的设备 */
+        padding-top: max(10px, env(safe-area-inset-top));
+        padding-left: max(12px, env(safe-area-inset-left));
+        padding-right: max(12px, env(safe-area-inset-right));
+      }
+      .file-preview-title {
+        font-size: 0.875rem;
+        gap: 6px;
+        min-width: 0;
+        flex: 1;
+      }
+      .file-preview-filename {
+        max-width: 100%;
+      }
+      /* 路径在窄屏上极易抢空间，直接隐藏，hover/长按文件名仍可看到完整路径。 */
+      .file-preview-path {
+        display: none;
+      }
+      .file-preview-toolbar {
+        gap: 4px;
+        flex-shrink: 0;
+      }
+      .file-preview-toolbar-btn {
+        padding: 4px 6px;
+        font-size: 0.75rem;
+      }
+      .file-preview-close {
+        font-size: 1.375rem;
+        padding: 6px 10px;
+      }
+      /* 底部安全区（小白条 / 圆角） */
+      .file-preview-body {
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
     .file-preview-header {
       display: flex;
       align-items: center;
@@ -11919,7 +12078,9 @@
       100% { background-position: 100% center; }
     }
 
-    /* ── 结构化会话状态条（与 todo 折叠栏共处一行，靠右） ── */
+    /* ── 结构化会话状态条（与 todo 折叠栏共处一行，靠右） ──
+       Only opacity/color transition — `transition: all` would cause this bar to
+       animate together with the todo bar's expansion, which looks broken. */
     .structured-status-bar {
       display: flex;
       align-items: center;
@@ -11932,7 +12093,7 @@
       border: none;
       font-size: 0.6875rem;
       color: var(--text-muted);
-      transition: all 0.3s ease;
+      transition: opacity 0.3s ease, color 0.3s ease;
       overflow: hidden;
       flex-shrink: 0;
     }

package/package.json

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