@co0ontty/wand 1.3.6 → 1.4.0

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

@@ -3225,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; }
@@ -3430,6 +3431,30 @@
       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;
@@ -4571,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;
@@ -4595,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;
     }
@@ -5679,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;
@@ -5688,6 +5760,7 @@
       min-height: 0;
       overflow: auto;
     }
+
     .blank-chat-inner {
       width: 100%;
       max-width: 560px;
@@ -7396,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.6",
+  "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"