@co0ontty/wand 1.5.5 → 1.6.0

package/dist/process-manager.d.ts

@@ -1,11 +1,7 @@
 import { EventEmitter } from "node:events";
 import { WandStorage } from "./storage.js";
-import { ExecutionMode, SessionSnapshot, WandConfig } from "./types.js";
-export interface ProcessEvent {
-    type: "output" | "status" | "started" | "ended" | "usage" | "task" | "notification";
-    sessionId: string;
-    data?: unknown;
-}
+import { ExecutionMode, ProcessEventHandler, SessionSnapshot, WandConfig } from "./types.js";
+export type { ProcessEvent, ProcessEventHandler } from "./types.js";
 /** Human-readable task information for the UI */
 export interface TaskInfo {
     title: string;
@@ -17,7 +13,6 @@ export declare class SessionInputError extends Error {
     readonly sessionStatus?: SessionSnapshot["status"] | undefined;
     constructor(message: string, code: "SESSION_NOT_FOUND" | "SESSION_NOT_RUNNING" | "SESSION_NO_PTY", sessionId: string, sessionStatus?: SessionSnapshot["status"] | undefined);
 }
-export type ProcessEventHandler = (event: ProcessEvent) => void;
 /** A Claude Code session discovered by scanning ~/.claude/projects/ directories. */
 export interface ClaudeHistorySession {
     claudeSessionId: string;

package/dist/process-manager.js

@@ -397,6 +397,24 @@ function getLatestClaudeTaskId(excludeIds) {
         return null;
     }
 }
+/** Derive a short summary for a session from user messages or current task. */
+function deriveSessionSummary(messages, currentTaskTitle) {
+    // Prefer first user message as summary
+    for (const msg of messages) {
+        if (msg.role !== "user")
+            continue;
+        for (const block of msg.content) {
+            if (block.type === "text" && block.text.trim()) {
+                return block.text.trim().slice(0, 120);
+            }
+        }
+        break; // only check the first user turn
+    }
+    // Fallback to current task title
+    if (currentTaskTitle)
+        return currentTaskTitle.slice(0, 120);
+    return undefined;
+}
 export class ProcessManager extends EventEmitter {
     config;
     storage;
@@ -1102,7 +1120,8 @@ export class ProcessManager extends EventEmitter {
             resumedToSessionId: record.resumedToSessionId ?? undefined,
             autoRecovered: record.autoRecovered ?? false,
             autoApprovePermissions: record.autoApprovePermissions || undefined,
-            approvalStats: record.approvalStats.total > 0 ? record.approvalStats : undefined
+            approvalStats: record.approvalStats.total > 0 ? record.approvalStats : undefined,
+            summary: deriveSessionSummary(messages, record.currentTask?.title ?? null),
         };
     }
     isPermissionBlocked(record) {

package/dist/structured-session-manager.d.ts

@@ -1,6 +1,5 @@
 import { WandStorage } from "./storage.js";
-import { ExecutionMode, SessionRunner, SessionSnapshot, WandConfig } from "./types.js";
-import { ProcessEvent } from "./ws-broadcast.js";
+import { ExecutionMode, ProcessEvent, SessionRunner, SessionSnapshot, WandConfig } from "./types.js";
 interface CreateStructuredSessionOptions {
     cwd: string;
     mode: ExecutionMode;

package/dist/structured-session-manager.js

@@ -4,6 +4,23 @@ const STREAM_EMIT_DEBOUNCE_MS = 16;
 function isRunningAsRoot() {
     return process.getuid?.() === 0 || process.geteuid?.() === 0;
 }
+/** Enrich a snapshot with a derived summary from the first user message. */
+function withSummary(snapshot) {
+    if (snapshot.summary)
+        return snapshot;
+    const messages = snapshot.messages ?? [];
+    for (const msg of messages) {
+        if (msg.role !== "user")
+            continue;
+        for (const block of msg.content) {
+            if (block.type === "text" && block.text.trim()) {
+                return { ...snapshot, summary: block.text.trim().slice(0, 120) };
+            }
+        }
+        break;
+    }
+    return snapshot;
+}
 /** Should we auto-approve permissions for this mode? */
 function shouldAutoApproveForMode(mode) {
     return mode === "full-access" || mode === "managed" || mode === "auto-edit";
@@ -46,10 +63,13 @@ export class StructuredSessionManager {
         this.emitEvent = emitEvent;
     }
     list() {
-        return Array.from(this.sessions.values()).sort((a, b) => b.startedAt.localeCompare(a.startedAt));
+        return Array.from(this.sessions.values())
+            .map(withSummary)
+            .sort((a, b) => b.startedAt.localeCompare(a.startedAt));
     }
     get(id) {
-        return this.sessions.get(id) ?? null;
+        const s = this.sessions.get(id);
+        return s ? withSummary(s) : null;
     }
     createSession(options) {
         const id = randomUUID();

package/dist/types.d.ts

@@ -8,6 +8,13 @@ export type EscalationScope = "write_file" | "run_command" | "network" | "outsid
 export type EscalationRunner = "json" | "pty";
 export type EscalationResolution = "approve_once" | "approve_turn" | "deny" | "fallback_manual";
 export type EscalationSource = "tool_permission_request" | "sandbox_hard_block" | "workspace_policy_limit" | "cli_capability_limit" | "unknown";
+/** WebSocket / ProcessManager event envelope used throughout the app. */
+export interface ProcessEvent {
+    type: "output" | "status" | "started" | "ended" | "usage" | "task" | "notification";
+    sessionId: string;
+    data?: unknown;
+}
+export type ProcessEventHandler = (event: ProcessEvent) => void;
 export interface EscalationRequest {
     requestId: string;
     scope: EscalationScope;
@@ -182,6 +189,8 @@ export interface SessionSnapshot {
         file: number;
         total: number;
     };
+    /** 会话摘要：从首条用户消息或当前任务提取 */
+    summary?: string;
 }
 export type SessionLifecycleState = "initializing" | "running" | "idle" | "thinking" | "waiting-input" | "archived";
 export interface SessionLifecycle {

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

@@ -678,7 +678,6 @@
                   '</div>' +
                   '<div class="todo-progress-body hidden" id="todo-progress-body">' +
                     '<ul class="todo-progress-list" id="todo-progress-list"></ul>' +
-                    '<div id="recent-actions" class="recent-actions"></div>' +
                   '</div>' +
                 '</div>' +
                 '<div class="input-composer">' +
@@ -804,31 +803,50 @@
 
               // General config tab
               '<div class="settings-panel" id="settings-tab-general">' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cfg-host">监听地址 (host)</label>' +
-                  '<input id="cfg-host" type="text" class="field-input" placeholder="127.0.0.1" />' +
-                '</div>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cfg-port">端口 (port)</label>' +
-                  '<input id="cfg-port" type="number" class="field-input" placeholder="8443" min="1" max="65535" />' +
+                '<div class="field-row">' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cfg-host">监听地址 (host)</label>' +
+                    '<input id="cfg-host" type="text" class="field-input" placeholder="127.0.0.1" />' +
+                  '</div>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cfg-port">端口 (port)</label>' +
+                    '<input id="cfg-port" type="number" class="field-input" placeholder="8443" min="1" max="65535" />' +
+                  '</div>' +
                 '</div>' +
                 '<div class="field field-inline">' +
-                  '<label class="field-label" for="cfg-https">启用 HTTPS</label>' +
                   '<input id="cfg-https" type="checkbox" class="field-checkbox" />' +
+                  '<label class="field-label" for="cfg-https">启用 HTTPS</label>' +
                 '</div>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cfg-mode">默认执行模式</label>' +
-                  '<select id="cfg-mode" class="field-input">' +
-                    '<option value="default">default</option>' +
-                    '<option value="assist">assist</option>' +
-                    '<option value="agent">agent</option>' +
-                    '<option value="agent-max">agent-max</option>' +
-                    '<option value="auto-edit">auto-edit</option>' +
-                    '<option value="full-access">full-access</option>' +
-                    '<option value="native">native</option>' +
-                    '<option value="managed">managed</option>' +
-                  '</select>' +
+                '<div class="field-row">' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cfg-mode">默认执行模式</label>' +
+                    '<select id="cfg-mode" class="field-input">' +
+                      '<option value="default">default</option>' +
+                      '<option value="assist">assist</option>' +
+                      '<option value="agent">agent</option>' +
+                      '<option value="agent-max">agent-max</option>' +
+                      '<option value="auto-edit">auto-edit</option>' +
+                      '<option value="full-access">full-access</option>' +
+                      '<option value="native">native</option>' +
+                      '<option value="managed">managed</option>' +
+                    '</select>' +
+                  '</div>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cfg-language">回复语言</label>' +
+                    '<select id="cfg-language" class="field-input">' +
+                      '<option value="">自动（不指定）</option>' +
+                      '<option value="中文">中文</option>' +
+                      '<option value="English">English</option>' +
+                      '<option value="日本語">日本語</option>' +
+                      '<option value="한국어">한국어</option>' +
+                      '<option value="Español">Español</option>' +
+                      '<option value="Français">Français</option>' +
+                      '<option value="Deutsch">Deutsch</option>' +
+                      '<option value="Русский">Русский</option>' +
+                    '</select>' +
+                  '</div>' +
                 '</div>' +
+                '<p class="field-hint" style="margin-top:-4px;">设置回复语言后，Claude 将尽量使用指定语言回复。</p>' +
                 '<div class="field">' +
                   '<label class="field-label" for="cfg-cwd">默认工作目录</label>' +
                   '<input id="cfg-cwd" type="text" class="field-input" placeholder="/home/user" />' +
@@ -837,52 +855,40 @@
                   '<label class="field-label" for="cfg-shell">Shell</label>' +
                   '<input id="cfg-shell" type="text" class="field-input" placeholder="/bin/bash" />' +
                 '</div>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cfg-language">回复语言</label>' +
-                  '<select id="cfg-language" class="field-input">' +
-                    '<option value="">自动（不指定）</option>' +
-                    '<option value="中文">中文</option>' +
-                    '<option value="English">English</option>' +
-                    '<option value="日本語">日本語</option>' +
-                    '<option value="한국어">한국어</option>' +
-                    '<option value="Español">Español</option>' +
-                    '<option value="Français">Français</option>' +
-                    '<option value="Deutsch">Deutsch</option>' +
-                    '<option value="Русский">Русский</option>' +
-                  '</select>' +
-                  '<p class="hint" style="margin-top:4px;margin-bottom:0;">设置后，Claude 将尽量使用指定语言回复。</p>' +
-                '</div>' +
                 '<button id="save-config-button" class="btn btn-primary btn-block">保存配置</button>' +
                 '<p id="config-message" class="hint hidden"></p>' +
               '</div>' +
 
               // Security tab
               '<div class="settings-panel" id="settings-tab-security">' +
-                '<h3 class="settings-section-title">修改密码</h3>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="new-password">新密码</label>' +
-                  '<input id="new-password" type="password" class="field-input" placeholder="输入新密码（至少 6 个字符）" autocomplete="new-password" />' +
-                '</div>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="confirm-password">确认密码</label>' +
-                  '<input id="confirm-password" type="password" class="field-input" placeholder="再次输入新密码" autocomplete="new-password" />' +
-                '</div>' +
-                '<button id="save-password-button" class="btn btn-primary btn-block">保存密码</button>' +
-                '<p id="settings-error" class="error-message hidden"></p>' +
-                '<p id="settings-success" class="hint hidden" style="color: var(--success);"></p>' +
-                '<hr class="settings-divider" />' +
-                '<h3 class="settings-section-title">SSL 证书</h3>' +
-                '<p class="settings-hint" id="cert-status">加载中...</p>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cert-key-file">私钥文件 (.key)</label>' +
-                  '<input id="cert-key-file" type="file" class="field-input field-file" accept=".key,.pem" />' +
+                '<div class="settings-card">' +
+                  '<h3 class="settings-section-title">\ud83d\udd12 修改密码</h3>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="new-password">新密码</label>' +
+                    '<input id="new-password" type="password" class="field-input" placeholder="输入新密码（至少 6 个字符）" autocomplete="new-password" />' +
+                  '</div>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="confirm-password">确认密码</label>' +
+                    '<input id="confirm-password" type="password" class="field-input" placeholder="再次输入新密码" autocomplete="new-password" />' +
+                  '</div>' +
+                  '<button id="save-password-button" class="btn btn-primary btn-block">保存密码</button>' +
+                  '<p id="settings-error" class="error-message hidden"></p>' +
+                  '<p id="settings-success" class="hint hidden" style="color: var(--success);"></p>' +
                 '</div>' +
-                '<div class="field">' +
-                  '<label class="field-label" for="cert-cert-file">证书文件 (.crt/.pem)</label>' +
-                  '<input id="cert-cert-file" type="file" class="field-input field-file" accept=".crt,.pem,.cert" />' +
+                '<div class="settings-card">' +
+                  '<h3 class="settings-section-title">\ud83d\udd10 SSL 证书</h3>' +
+                  '<p class="settings-hint" id="cert-status">加载中...</p>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cert-key-file">私钥文件 (.key)</label>' +
+                    '<input id="cert-key-file" type="file" class="field-input field-file" accept=".key,.pem" />' +
+                  '</div>' +
+                  '<div class="field">' +
+                    '<label class="field-label" for="cert-cert-file">证书文件 (.crt/.pem)</label>' +
+                    '<input id="cert-cert-file" type="file" class="field-input field-file" accept=".crt,.pem,.cert" />' +
+                  '</div>' +
+                  '<button id="upload-cert-button" class="btn btn-primary btn-block">上传证书</button>' +
+                  '<p id="cert-message" class="hint hidden"></p>' +
                 '</div>' +
-                '<button id="upload-cert-button" class="btn btn-primary btn-block">上传证书</button>' +
-                '<p id="cert-message" class="hint hidden"></p>' +
               '</div>' +
 
               // Command presets tab
@@ -1809,7 +1815,9 @@
             '<div class="session-item-row">' +
               checkbox +
               '<div class="session-main">' +
-                '<div class="session-command">' + escapeHtml(session.resumedFromSessionId ? session.command.replace(/\s+--resume\s+\S+/, '') : session.command) + '</div>' +
+                (session.summary
+                  ? '<div class="session-title">' + escapeHtml(session.summary) + '</div>'
+                  : '<div class="session-command">' + escapeHtml(session.resumedFromSessionId ? session.command.replace(/\s+--resume\s+\S+/, '') : session.command) + '</div>') +
                 '<div class="session-meta">' +
                   modeBadge +
                   '<span>' + escapeHtml(modeName) + '</span>' +
@@ -3943,15 +3951,23 @@
       function selectSession(id) {
         var foundSession = state.sessions.find(function(item) { return item.id === id; });
         console.log("[WAND] selectSession id:", id, "found:", !!foundSession, "sessionKind:", foundSession && foundSession.sessionKind, "runner:", foundSession && foundSession.runner, "isStructured:", isStructuredSession(foundSession));
+        if (!foundSession) {
+          console.warn("[WAND] selectSession: session not found, skipping", id);
+          return;
+        }
         state.selectedId = id;
         persistSelectedId();
+        // Clear queued inputs from the previous session to prevent cross-session leaks
+        state.messageQueue = [];
+        state.pendingMessages = [];
+        updateQueueCounter();
         resetChatRenderCache();
         state.currentMessages = [];
         if (chatRenderTimer) { clearTimeout(chatRenderTimer); chatRenderTimer = null; }
         // Reset todo progress bar
         var todoEl = document.getElementById("todo-progress");
         if (todoEl) todoEl.classList.add("hidden");
-        var session = state.sessions.find(function(item) { return item.id === id; });
+        var session = foundSession;
         state.preferredCommand = getPreferredTool();
         state.chatMode = getSafeModeForTool("claude", session && session.mode ? session.mode : state.chatMode);
         if (state.terminalInteractive && session && session.status !== "running") {
@@ -4010,6 +4026,8 @@
       var focusTrapHandler = null;
 
       function openSessionModal() {
+        // Close settings modal first if open (mutual exclusion)
+        closeSettingsModal();
         state.modalOpen = true;
         state.sessionsDrawerOpen = false;
         updateDrawerState();
@@ -4084,6 +4102,8 @@
       }
 
       function openSettingsModal() {
+        // Close session modal first if open (mutual exclusion)
+        closeSessionModal();
         var modal = document.getElementById("settings-modal");
         if (modal) {
           modal.classList.remove("hidden");
@@ -4240,7 +4260,7 @@
                   '<span class="preset-detail">' + escapeHtml(p.command) + (p.mode ? ' (' + escapeHtml(p.mode) + ')' : '') + '</span>' +
                 '</div>';
               }
-              if (!html) html = '<p class="settings-hint">没有命令预设。</p>';
+              if (!html) html = '<div class="empty-state-compact"><span class="empty-icon">\u2699</span><span>\u6ca1\u6709\u547d\u4ee4\u9884\u8bbe</span><span class="hint">\u5728 config.json \u7684 commandPresets \u4e2d\u914d\u7f6e</span></div>';
               presetsList.innerHTML = html;
             }
           })
@@ -4542,7 +4562,10 @@
         });
       }
 
+      var _sessionCreating = false;
+
       function runCommand() {
+        if (_sessionCreating) return;
         var cwdEl = document.getElementById("cwd");
         var errorEl = document.getElementById("modal-error");
         var command = getPreferredTool();
@@ -4564,6 +4587,7 @@
 
       function startStructuredSessionFromModal(cwd, mode, errorEl) {
         console.log("[WAND] startStructuredSessionFromModal cwd:", cwd, "mode:", mode);
+        _sessionCreating = true;
         state.modeValue = mode;
         state.chatMode = mode;
         state.sessionTool = "claude";
@@ -4579,11 +4603,13 @@
           .then(function() { focusInputBox(true); })
           .catch(function(error) {
             showError(errorEl, (error && error.message) || "无法启动结构化会话，请确认 Claude 已正确安装。");
-          });
+          })
+          .finally(function() { _sessionCreating = false; });
       }
 
       function runPtyCommandFromModal(command, cwd, mode, errorEl) {
         console.log("[WAND] runPtyCommandFromModal command:", command, "cwd:", cwd, "mode:", mode);
+        _sessionCreating = true;
         state.modeValue = mode;
         state.chatMode = mode;
         state.sessionTool = command;
@@ -4626,7 +4652,8 @@
         })
         .catch(function() {
           showError(errorEl, "无法启动会话，请确认 Claude 已正确安装。");
-        });
+        })
+        .finally(function() { _sessionCreating = false; });
       }
 
       function initBlankChatCwd() {
@@ -6012,9 +6039,12 @@
         });
       }
 
+      var _resumeInProgress = false;
+
       function resumeSession(sessionId, errorEl) {
         console.log("[WAND] resumeSession sessionId:", sessionId);
-        if (!sessionId) return Promise.resolve(null);
+        if (!sessionId || _resumeInProgress) return Promise.resolve(null);
+        _resumeInProgress = true;
         return fetch("/api/sessions/" + encodeURIComponent(sessionId) + "/resume", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -6040,7 +6070,8 @@
           if (errorEl) showError(errorEl, message);
           else showToast(message, "error");
           return null;
-        });
+        })
+        .finally(function() { _resumeInProgress = false; });
       }
 
       function resumeClaudeSessionById(claudeSessionId, errorEl) {
@@ -8177,12 +8208,16 @@
             smartScrollToBottom(chatMessages);
           });
         } else if (msgCount === existingCount && outputHash !== prevHash) {
-          // Same message count but content changed (streaming update). Re-render in place
-          // by index so assistant growth, tool cards, and retroactive message fixes all show up.
+          // Same message count but content changed (streaming update).
+          // Optimization: only re-render the newest N messages (column-reverse: first children)
+          // that actually differ, starting from the top (newest). Most streaming updates only
+          // touch the latest assistant turn, so we can skip scanning all older messages.
           var existingEls = Array.from(chatMessages.querySelectorAll(".chat-message"));
           var reversedMessages = messages.slice().reverse();
           var replacedAny = false;
-          for (var mi = 0; mi < reversedMessages.length && mi < existingEls.length; mi++) {
+          // Scan from newest (index 0 in reversed) up to MAX_STREAMING_SCAN messages
+          var MAX_STREAMING_SCAN = Math.min(4, reversedMessages.length, existingEls.length);
+          for (var mi = 0; mi < MAX_STREAMING_SCAN; mi++) {
             var currentEl = existingEls[mi];
             var tmpWrap = document.createElement("div");
             var srOrigIdx = reversedMessages.length - 1 - mi;
@@ -8193,8 +8228,16 @@
               chatMessages.replaceChild(replacementEl, currentEl);
               attachCopyHandler(replacementEl);
               replacedAny = true;
+            } else if (mi > 0) {
+              // Once we hit an unchanged older message, stop scanning
+              break;
             }
           }
+          // Fallback: if hash changed but no visible diff found in the top N messages,
+          // the change is deeper — trigger a full render to avoid stale display.
+          if (!replacedAny && reversedMessages.length > MAX_STREAMING_SCAN) {
+            fullRenderChat();
+          }
           if (replacedAny) {
             requestAnimationFrame(function() {
               smartScrollToBottom(chatMessages);
@@ -8333,40 +8376,6 @@
           list.innerHTML = html;
         }
 
-        // Extract recent important actions for key points summary
-        var recentActions = [];
-        var actionTools = ["Write", "Edit", "Bash", "WebFetch", "WebSearch"];
-        var msgCount = messages.length;
-        for (var ai = 0; ai < msgCount && recentActions.length < 5; ai++) {
-          var m = messages[ai];
-          if (!m.content || !Array.isArray(m.content)) continue;
-          for (var bi = 0; bi < m.content.length && recentActions.length < 5; bi++) {
-            var blk = m.content[bi];
-            if (blk.type !== "tool_use") continue;
-            var toolName = blk.name || "";
-            if (actionTools.indexOf(toolName) === -1) continue;
-            var desc = blk.description || generateInputSummary(toolName, blk.input) || toolName;
-            if (desc && desc.length > 50) desc = desc.slice(0, 47) + "...";
-            var icon = getToolIcon(toolName);
-            recentActions.push({ icon: icon, text: desc });
-          }
-        }
-
-        var actionsEl = document.getElementById("recent-actions");
-        if (actionsEl) {
-          if (recentActions.length > 0) {
-            var actionsHtml = '<div class="recent-actions-label">最近操作</div>';
-            actionsHtml += '<div class="recent-actions-list">';
-            for (var ri = 0; ri < recentActions.length; ri++) {
-              var a = recentActions[ri];
-              actionsHtml += '<span class="recent-action-pill">' + a.icon + ' ' + escapeHtml(a.text) + '</span>';
-            }
-            actionsHtml += '</div>';
-            actionsEl.innerHTML = actionsHtml;
-          } else {
-            actionsEl.innerHTML = '';
-          }
-        }
       }
 
       function updateQueueCounter() {
@@ -8902,6 +8911,67 @@
         return messages;
       }
 
+      // ── 像素风猫咪头像 ──
+      var PIXEL_AVATAR = (function() {
+        var _ = "transparent";
+        function buildSvg(grid, size) {
+          var s = size || 3;
+          var w = grid[0].length * s;
+          var h = grid.length * s;
+          var rects = "";
+          for (var y = 0; y < grid.length; y++) {
+            for (var x = 0; x < grid[y].length; x++) {
+              if (grid[y][x] !== _) {
+                rects += '<rect x="' + (x * s) + '" y="' + (y * s) + '" width="' + s + '" height="' + s + '" fill="' + grid[y][x] + '"/>';
+              }
+            }
+          }
+          return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + w + ' ' + h + '" class="pixel-avatar-svg">' + rects + '</svg>';
+        }
+        // 加菲猫 (勤劳初二 / AI) — 橙色系
+        var o = "#F0923A", d = "#C46A1A", w = "#FFFFFF", k = "#2D2D2D", p = "#F28B9A", n = "#E87D5A";
+        var garfield = [
+          [_,d,_,_,_,_,_,_,d,_],
+          [d,o,d,_,_,_,_,d,o,d],
+          [d,o,o,o,o,o,o,o,o,d],
+          [o,o,w,k,o,o,w,k,o,o],
+          [o,o,w,w,o,o,w,w,o,o],
+          [o,o,o,o,p,p,o,o,o,o],
+          [o,d,o,n,o,o,n,o,d,o],
+          [_,o,o,o,o,o,o,o,o,_],
+          [_,_,o,d,o,o,d,o,_,_],
+          [_,_,_,o,_,_,o,_,_,_],
+        ];
+        // 美短 (赛博虎妞 / 用户) — 灰色系
+        var g = "#9EAAB8", dg = "#6B7B8D", lg = "#C5CED8", gn = "#7EC88B";
+        var shorthair = [
+          [_,dg,_,_,_,_,_,_,dg,_],
+          [dg,g,dg,_,_,_,_,dg,g,dg],
+          [dg,g,g,g,g,g,g,g,g,dg],
+          [g,g,w,gn,g,g,w,gn,g,g],
+          [g,g,w,w,g,g,w,w,g,g],
+          [g,g,g,g,p,p,g,g,g,g],
+          [g,dg,g,lg,g,g,lg,g,dg,g],
+          [_,g,g,g,g,g,g,g,g,_],
+          [_,_,g,dg,g,g,dg,g,_,_],
+          [_,_,_,g,_,_,g,_,_,_],
+        ];
+        return {
+          assistant: buildSvg(garfield),
+          user: buildSvg(shorthair)
+        };
+      })();
+
+      function chatAvatar(role) {
+        var isUser = role === "user";
+        var svg = isUser ? PIXEL_AVATAR.user : PIXEL_AVATAR.assistant;
+        var name = isUser ? "赛博虎妞" : "勤劳初二";
+        return '<div class="chat-message-avatar ' + role + '">' +
+          '<div class="pixel-avatar">' + svg + '</div>' +
+          '<span class="avatar-name">' + name + '</span>' +
+        '</div>';
+      }
+
       function renderChatMessage(msg, roundUsage) {
         // Thinking card (deep thought) — from PTY parsing
         if (msg.role === "thinking") {
@@ -8930,7 +9000,7 @@
         }
 
         // Legacy string content (from PTY parsing)
-        var avatar = msg.role === "assistant" ? '<div class="chat-message-avatar">赛博虎妞</div>' : "";
+        var avatar = chatAvatar(msg.role);
         var bubbleContent = msg.role === "assistant" ? renderMarkdown(msg.content) : escapeHtml(msg.content);
         return '<div class="chat-message ' + msg.role + '">' +
           avatar +
@@ -9075,7 +9145,7 @@
 
       function renderStructuredMessage(msg, roundUsage) {
         var role = msg.role;
-        var avatar = role === "assistant" ? '<div class="chat-message-avatar">赛博虎妞</div>' : "";
+        var avatar = chatAvatar(role);
 
         if (!msg.content || msg.content.length === 0) {
           if (role === "assistant") {

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

@@ -1162,6 +1162,17 @@
       letter-spacing: -0.01em;
     }
 
+    .session-title {
+      font-weight: 600;
+      font-size: 0.8125rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text-primary);
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+    }
+
     /* ===== 会话元信息 ===== */
     .session-meta {
       display: flex;
@@ -2292,16 +2303,51 @@
     }
 
     /* ===== 消息头像 ===== */
-    .chat-message.user .chat-message-avatar {
-      display: none;
+    .chat-message-avatar {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0 2px 4px 2px;
     }
 
-    .chat-message.assistant .chat-message-avatar {
-      font-size: 0.75rem;
+    .chat-message-avatar.assistant {
+      flex-direction: row;
+    }
+
+    .chat-message-avatar.user {
+      flex-direction: row-reverse;
+    }
+
+    .pixel-avatar {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      border-radius: 6px;
+      overflow: hidden;
+      background: var(--bg-tertiary);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    }
+
+    .pixel-avatar-svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      image-rendering: pixelated;
+    }
+
+    .avatar-name {
+      font-size: 0.7rem;
       font-weight: 600;
-      color: var(--accent);
-      padding: 0 2px 4px 2px;
       letter-spacing: 0.03em;
+      line-height: 1;
+    }
+
+    .chat-message.assistant .avatar-name {
+      color: var(--accent);
+    }
+
+    .chat-message.user .avatar-name {
+      color: var(--text-tertiary);
     }
 
     /* ===== 消息气泡 ===== */
@@ -3904,39 +3950,6 @@
     .todo-item-icon.active { color: var(--accent); }
     .todo-item-icon.done { color: #4a7a4f; }
 
-    /* Recent actions key points section */
-    .recent-actions {
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border-subtle);
-    }
-    .recent-actions-label {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-      margin-bottom: 6px;
-    }
-    .recent-actions-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-    }
-    .recent-action-pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 3px;
-      padding: 3px 8px;
-      font-size: 0.6875rem;
-      color: var(--text-secondary);
-      background: rgba(79, 122, 88, 0.08);
-      border-radius: 10px;
-      white-space: nowrap;
-      max-width: 220px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
 
     @keyframes spin {
       to { transform: rotate(360deg); }
@@ -4802,7 +4815,7 @@
     .modal-backdrop {
       position: fixed;
       inset: 0;
-      z-index: 100;
+      z-index: 500;
       background: rgba(42, 28, 18, 0.52);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
@@ -5684,6 +5697,7 @@
       .modal { max-height: 80vh; }
       .modal-header { padding: 8px 10px; min-height: 36px; }
       .modal-body { padding: 8px 10px; }
+      .field-row { grid-template-columns: 1fr; gap: 0; }
 
       .btn { min-height: 36px; padding: 8px 12px; }
       .btn-sm { min-height: 28px; padding: 4px 8px; }
@@ -6287,18 +6301,21 @@
       background: none;
       border: none;
       border-bottom: 2px solid transparent;
+      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
       cursor: pointer;
-      transition: color 0.15s, border-color 0.15s;
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
       white-space: nowrap;
     }
 
     .settings-tab:hover {
       color: var(--text-primary);
+      background: rgba(197, 101, 61, 0.06);
     }
 
     .settings-tab.active {
       color: var(--accent);
       border-bottom-color: var(--accent);
+      background: var(--accent-muted);
     }
 
     .settings-panel {
@@ -6312,8 +6329,11 @@
     .settings-about-info {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 0;
       margin-bottom: 18px;
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      padding: 2px 14px;
     }
 
     .settings-about-row {
@@ -6321,6 +6341,12 @@
       justify-content: space-between;
       align-items: center;
       font-size: 0.8125rem;
+      padding: 9px 0;
+      border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .settings-about-row:last-child {
+      border-bottom: none;
     }
 
     .settings-label {
@@ -6356,8 +6382,8 @@
     .settings-section-title {
       font-size: 0.8125rem;
       font-weight: 600;
-      color: var(--fg-primary);
-      margin-bottom: 10px;
+      color: var(--text-primary);
+      margin: 0 0 12px 0;
       letter-spacing: 0.02em;
     }
 
@@ -6367,13 +6393,6 @@
       margin-top: 10px;
     }
 
-    .settings-section-title {
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--text-primary);
-      margin: 0 0 12px 0;
-    }
-
     .settings-divider {
       border: none;
       border-top: 1px solid var(--border-subtle);
@@ -6397,6 +6416,49 @@
       margin-bottom: 0;
     }
 
+    .field-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-bottom: 14px;
+    }
+    .field-row .field {
+      margin-bottom: 0;
+    }
+
+    .settings-card {
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      padding: 16px;
+      margin-bottom: 14px;
+    }
+    .settings-card .field:last-of-type {
+      margin-bottom: 12px;
+    }
+    .settings-card .settings-section-title {
+      margin-top: 0;
+    }
+    .settings-card .field-input {
+      background: rgba(255, 255, 255, 0.6);
+    }
+    .settings-card .btn-block {
+      margin-bottom: 0;
+    }
+
+    .empty-state-compact {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      padding: 32px 16px;
+      color: var(--text-muted);
+      font-size: 0.8125rem;
+    }
+    .empty-state-compact .empty-icon {
+      font-size: 1.5rem;
+      opacity: 0.5;
+    }
+
     .field-checkbox {
       width: 18px;
       height: 18px;

package/dist/ws-broadcast.d.ts

@@ -3,12 +3,8 @@
  * Handles debounced output events, backpressure control, and client subscriptions.
  */
 import { WebSocketServer } from "ws";
-import type { SessionSnapshot } from "./types.js";
-export interface ProcessEvent {
-    type: "output" | "status" | "started" | "ended" | "usage" | "task" | "notification";
-    sessionId: string;
-    data?: unknown;
-}
+import type { SessionSnapshot, ProcessEvent } from "./types.js";
+export type { ProcessEvent } from "./types.js";
 export declare class WsBroadcastManager {
     private wss;
     private clients;

package/package.json

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