@co0ontty/wand 1.22.0 → 1.23.0

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

@@ -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="提示词优化">' +
@@ -7588,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);
@@ -13795,6 +13810,10 @@
             state.lastRenderedEmpty = "empty";
             state.lastRenderedMsgCount = 0;
           }
+          // 空会话进入空状态前，把上一会话残留的状态条 / todo 进度条清掉。
+          // 这里是 selectSession 之外的兜底：WS init 等异步路径也会落到这条空分支。
+          renderStructuredStatusBar(null, selectedSession);
+          updateTodoProgress([]);
           return;
         }
 
@@ -14132,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");
           }
         }
       });
@@ -14157,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;
@@ -14186,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");
@@ -14197,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

@@ -5345,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;
     }
@@ -5391,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;
@@ -5432,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); }
@@ -12015,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;
@@ -12028,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.22.0",
+  "version": "1.23.0",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {