@co0ontty/wand 1.3.4 → 1.4.0

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

@@ -269,8 +269,9 @@
     }
 
     .floating-sidebar-toggle.active {
-      background: rgba(197, 101, 61, 0.1);
-      border-color: rgba(197, 101, 61, 0.2);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease;
     }
 
     .floating-sidebar-toggle:active {
@@ -3224,7 +3225,8 @@
     }
 
     /* Markdown Content */
-    .markdown-content { color: inherit; }
+    .markdown-content { color: inherit; white-space: normal; overflow-x: hidden; }
+    .markdown-content .code-block pre { overflow-x: auto; }
     .markdown-content p { margin: 0 0 8px 0; }
     .markdown-content p:last-child { margin-bottom: 0; }
     .markdown-content strong { font-weight: 600; }
@@ -3429,6 +3431,138 @@
       to { opacity: 1; transform: translateX(0); }
     }
 
+    /* Auto-approve indicator */
+    .auto-approve-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      font-size: 0.65rem;
+      color: var(--muted);
+      cursor: pointer;
+      padding: 1px 4px;
+      border-radius: 4px;
+      transition: color 0.15s, background 0.15s;
+      user-select: none;
+      white-space: nowrap;
+    }
+    .auto-approve-indicator:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+    .auto-approve-indicator.active {
+      color: #22c55e;
+    }
+    .auto-approve-indicator.active:hover {
+      background: rgba(34, 197, 94, 0.1);
+    }
+
+    /* Approval stats badge */
+    .approval-stats {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+    }
+    .approval-stats.hidden {
+      display: none;
+    }
+    .approval-stats-divider {
+      width: 1px;
+      height: 16px;
+      background: var(--border);
+      margin: 0 4px 0 2px;
+    }
+    .approval-stats-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 1px 7px 1px 5px;
+      border-radius: 10px;
+      background: rgba(34, 197, 94, 0.1);
+      color: #22c55e;
+      font-size: 0.68rem;
+      font-weight: 600;
+      cursor: default;
+      transition: background 0.15s;
+      line-height: 1.5;
+    }
+    .approval-stats-badge:hover {
+      background: rgba(34, 197, 94, 0.18);
+    }
+    .approval-stats-icon {
+      stroke: #22c55e;
+      flex-shrink: 0;
+    }
+    .approval-stats-total {
+      font-variant-numeric: tabular-nums;
+    }
+    @keyframes approval-pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.15); }
+      100% { transform: scale(1); }
+    }
+    .approval-stats-pulse {
+      animation: approval-pulse 0.3s ease-out;
+    }
+    /* Popup tooltip */
+    .approval-stats-popup {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--bg-elevated, #1e1e2e);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 8px 10px;
+      min-width: 140px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+      z-index: 100;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .approval-stats:hover .approval-stats-popup {
+      display: flex;
+    }
+    .approval-stats-popup-title {
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      font-weight: 500;
+      margin-bottom: 2px;
+      white-space: nowrap;
+    }
+    .approval-stats-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.7rem;
+      color: var(--text-secondary, #ccc);
+      white-space: nowrap;
+    }
+    .approval-stats-row-icon {
+      width: 16px;
+      text-align: center;
+      flex-shrink: 0;
+      font-size: 0.72rem;
+    }
+    .approval-stats-row-label {
+      flex: 1;
+    }
+    .approval-stats-row-count {
+      font-weight: 600;
+      color: var(--text-primary, #eee);
+      font-variant-numeric: tabular-nums;
+      min-width: 20px;
+      text-align: right;
+    }
+    .approval-stats-row-total {
+      border-top: 1px solid var(--border);
+      padding-top: 4px;
+      margin-top: 2px;
+      color: #22c55e;
+    }
+    .approval-stats-row-total .approval-stats-row-count {
+      color: #22c55e;
+    }
+
     .composer-interactive-toggle {
       display: inline-flex;
       align-items: center;
@@ -4462,11 +4596,11 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 1px;
-      padding: 8px 4px;
-      border: 1.5px solid rgba(125, 91, 57, 0.15);
+      gap: 3px;
+      padding: 10px 8px;
+      border: 1.5px solid rgba(125, 91, 57, 0.2);
       border-radius: 10px;
-      background: rgba(255, 255, 255, 0.55);
+      background: rgba(255, 255, 255, 0.6);
       cursor: pointer;
       transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
       text-align: center;
@@ -4486,13 +4620,13 @@
       box-shadow: 0 0 0 1.5px var(--accent-muted);
     }
     .mode-card-label {
-      font-size: 0.75rem;
+      font-size: 0.8rem;
       font-weight: 600;
       color: var(--text-primary);
       line-height: 1.3;
     }
     .mode-card-desc {
-      font-size: 0.625rem;
+      font-size: 0.68rem;
       color: var(--text-muted);
       line-height: 1.3;
     }
@@ -5570,6 +5704,53 @@
       }
     }
 
+    .session-kind-badge {
+      display: inline-flex;
+      align-items: center;
+      height: 18px;
+      padding: 0 6px;
+      border-radius: 999px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      border: 1px solid transparent;
+      flex-shrink: 0;
+    }
+
+    .session-kind-badge.pty {
+      color: var(--text-secondary);
+      background: rgba(120, 128, 140, 0.12);
+      border-color: rgba(120, 128, 140, 0.18);
+    }
+
+    .session-kind-badge.structured {
+      color: #d18b52;
+      background: rgba(215, 122, 82, 0.10);
+      border-color: rgba(215, 122, 82, 0.22);
+    }
+
+    .session-kind-display {
+      display: inline-flex;
+      align-items: center;
+      padding: 1px 6px;
+      border-radius: 999px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      color: #8a4b24;
+      background: rgba(215, 122, 82, 0.12);
+      border: 1px solid rgba(215, 122, 82, 0.2);
+    }
+
+    .structured-tool-hint {
+      margin: 4px 0 8px;
+      padding: 6px 10px;
+      border-radius: 10px;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      background: rgba(215, 122, 82, 0.08);
+      border: 1px dashed rgba(215, 122, 82, 0.18);
+    }
+
     .blank-chat {
       display: flex;
       align-items: center;
@@ -5579,6 +5760,7 @@
       min-height: 0;
       overflow: auto;
     }
+
     .blank-chat-inner {
       width: 100%;
       max-width: 560px;
@@ -7287,4 +7469,88 @@
       z-index: 20;
     }
 
+    /* ── 结构化会话状态条 ── */
+    .structured-status-bar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 8px 0 4px;
+      padding: 8px 12px;
+      border-radius: var(--radius-sm);
+      background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
+      border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.12);
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      transition: all 0.3s ease;
+      overflow: hidden;
+    }
+
+    .structured-status-bar .status-bar-label {
+      flex-shrink: 0;
+      font-weight: 600;
+      color: var(--accent-soft);
+    }
+
+    .structured-status-bar .status-bar-track {
+      flex: 1;
+      height: 3px;
+      border-radius: 2px;
+      background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
+      overflow: hidden;
+      position: relative;
+    }
+
+    .structured-status-bar .status-bar-fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 40%;
+      height: 100%;
+      border-radius: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
+      animation: marqueeScroll 1.5s ease-in-out infinite;
+    }
+
+    @keyframes marqueeScroll {
+      0%   { left: -40%; }
+      100% { left: 100%; }
+    }
+
+    .structured-status-bar .status-bar-timer {
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+    }
+
+    /* 完成态 */
+    .structured-status-bar.completed {
+      background: rgba(79, 122, 88, 0.06);
+      border-color: rgba(79, 122, 88, 0.15);
+      animation: statusBarFadeOut 2s ease-out 1s forwards;
+    }
+
+    .structured-status-bar.completed .status-bar-label {
+      color: var(--success);
+    }
+
+    .structured-status-bar.completed .status-bar-track {
+      background: rgba(79, 122, 88, 0.1);
+    }
+
+    .structured-status-bar.completed .status-bar-fill {
+      width: 100%;
+      background: var(--success);
+      opacity: 0.5;
+      animation: none;
+      left: 0;
+    }
+
+    @keyframes statusBarFadeOut {
+      0%   { opacity: 1; max-height: 50px; margin: 8px 0 4px; padding: 8px 12px; }
+      70%  { opacity: 0; max-height: 50px; margin: 8px 0 4px; padding: 8px 12px; }
+      100% { opacity: 0; max-height: 0; margin: 0; padding: 0 12px; border-width: 0; }
+    }
+
     /* 结束标记 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@co0ontty/wand",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {
@@ -37,6 +37,7 @@
     "@xterm/addon-fit": "^0.11.0",
     "express": "^4.21.2",
     "node-pty": "^1.1.0",
+    "puppeteer": "^24.40.0",
     "ws": "^8.19.0",
     "xterm": "^5.3.0",
     "xterm-addon-serialize": "^0.11.0"