@co0ontty/wand 1.10.0 → 1.14.3

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

@@ -1080,6 +1080,46 @@
       padding-right: 64px;
     }
 
+    .session-title-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .session-title-row .session-title,
+    .session-title-row .session-command {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .session-time {
+      flex-shrink: 0;
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+      white-space: nowrap;
+      line-height: 1.4;
+      padding-top: 1px;
+    }
+
+    .session-activity {
+      font-size: 0.6875rem;
+      color: var(--accent);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.3;
+      opacity: 0.85;
+    }
+
+    .session-recovery-hint {
+      font-size: 0.625rem;
+      color: var(--text-muted);
+      background: rgba(150, 118, 85, 0.08);
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
+
     /* ===== 会话操作按钮 ===== */
     .session-actions {
       position: absolute;
@@ -2102,6 +2142,7 @@
       padding: 10px;
       overflow: hidden;
       min-height: 0;
+      min-width: 0;
       margin: 0 6px 6px;
       border-radius: var(--radius-md);
       border: 1px solid rgba(140, 110, 85, 0.35);
@@ -2118,22 +2159,16 @@
       align-items: stretch;
     }
 
-    .terminal-container > #output {
-      flex: 1;
-      min-height: 0;
-      position: relative;
-    }
-
-    .terminal-container > #output .xterm {
+    .terminal-container > .xterm {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-    }
-
-    .terminal-container > #output .xterm-viewport {
-      background: transparent !important;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
     }
 
     .terminal-container .xterm-viewport {
@@ -2144,8 +2179,9 @@
       display: none;
     }
 
-    .terminal-container .xterm {
-      padding: 0;
+    .terminal-container .xterm-screen {
+      max-width: 100%;
+      overflow: hidden;
     }
 
     /* ===== 自定义终端滚动条 ===== */
@@ -2847,6 +2883,28 @@
       scrollbar-gutter: stable;
     }
 
+    /* ===== 历史消息懒加载 ===== */
+    .chat-load-more {
+      display: flex;
+      justify-content: center;
+      padding: 8px 0;
+    }
+    .chat-load-more-btn {
+      background: var(--bg-hover);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-md);
+      color: var(--text-secondary);
+      font-size: 0.75rem;
+      padding: 6px 16px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .chat-load-more-btn:hover {
+      background: var(--accent-muted);
+      color: var(--accent);
+      border-color: var(--accent);
+    }
+
     /* ===== 消息动画 ===== */
     @keyframes messageSlide {
       from {
@@ -3878,6 +3936,38 @@
       font-style: italic;
     }
 
+    /* ── Tool content lazy-load states ── */
+    .tool-content-loading {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      font-style: italic;
+      padding: 8px 0;
+    }
+    .tool-content-loading::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--text-muted);
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: tool-content-spin 0.6s linear infinite;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+    @keyframes tool-content-spin {
+      to { transform: rotate(360deg); }
+    }
+    .tool-content-error {
+      font-size: 0.75rem;
+      color: var(--error);
+      padding: 8px 0;
+      cursor: pointer;
+    }
+    .tool-content-error:hover {
+      text-decoration: underline;
+    }
+
     /* ── Inline Terminal Display (Bash) ── */
     .inline-terminal {
       margin: 3px 0;
@@ -5506,9 +5596,19 @@
     }
     .session-modal .modal-body {
       padding-top: 16px;
+      padding-bottom: 8px;
     }
     .session-modal .field:last-of-type {
-      margin-bottom: 14px;
+      margin-bottom: 6px;
+    }
+    .session-modal .modal-footer {
+      flex-shrink: 0;
+      padding: 12px 22px 18px;
+      border-top: 1px solid var(--border-subtle);
+    }
+    .session-modal .modal-footer .error-message {
+      margin-top: 8px;
+      margin-bottom: 0;
     }
     .mode-cards {
       display: flex;
@@ -6068,8 +6168,8 @@
         gap: 1px;
       }
       .terminal-scale-overlay-btn {
-        min-width: 20px;
-        height: 20px;
+        min-width: 26px;
+        height: 26px;
         font-size: 0.75rem;
       }
       .terminal-scale-overlay-label {
@@ -6268,8 +6368,8 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 22px;
-        height: 22px;
+        width: 28px;
+        height: 28px;
         border: none;
         border-radius: 50%;
         background: transparent;
@@ -6303,14 +6403,14 @@
         display: none;
       }
       .inline-shortcuts-expanded-row .shortcut-key {
-        height: 22px;
-        min-width: 22px;
+        height: 28px;
+        min-width: 28px;
         font-size: 0.5625rem;
         padding: 0 4px;
         flex: 0 0 auto;
       }
       .inline-shortcuts-expanded-row .shortcut-key.shortcut-dir {
-        min-width: 20px;
+        min-width: 24px;
       }
 
       /* 回到底部按钮 - 紧凑 */
@@ -6342,7 +6442,7 @@
       .mini-keyboard-header { padding: 6px 10px 4px; }
       .mini-keyboard-body { padding: 6px; gap: 4px; }
       .mk-row { gap: 3px; }
-      .mk-key { min-width: 36px; height: 32px; font-size: 0.625rem; border-radius: 6px; }
+      .mk-key { min-width: 38px; height: 34px; font-size: 0.625rem; border-radius: 6px; }
 
       .floating-pad {
         right: 0;
@@ -6482,6 +6582,7 @@
       .modal-header { padding: 10px 12px; min-height: 40px; }
       .modal-body { padding: 10px 12px; }
       .modal-footer { padding: 8px 12px; }
+      .session-modal .modal-footer { padding: 10px 12px 14px; }
 
       .tool-card {
         padding: 10px;
@@ -6511,6 +6612,11 @@
       .blank-chat-hint { font-size: 0.6875rem; }
       .mode-btn-group { gap: 4px; margin-top: 8px; }
       .mode-btn { padding: 5px 10px; font-size: 0.6875rem; min-height: 36px; }
+
+      /* 防止小屏溢出 */
+      .notification-bubble { max-width: calc(100vw - 24px); }
+      .blank-chat-cwd-dropdown { min-width: 0; width: calc(100vw - 32px); max-width: 320px; }
+      .toast-message { max-width: calc(100vw - 32px); }
     }
 
     /* iPhone 14/15 等标准屏幕 (390px - 420px) - 使用基础移动端样式，略微调整 */
@@ -6532,8 +6638,8 @@
     @media (max-width: 390px) {
       /* 继承 max-width: 640px 的样式，此处仅做小屏微调 */
       .floating-sidebar-toggle {
-        width: 26px;
-        height: 26px;
+        width: 28px;
+        height: 28px;
       }
       .floating-sidebar-toggle .hamburger-icon { width: 11px; height: 8px; }
 
@@ -6555,21 +6661,22 @@
       }
 
       .input-composer { border-radius: 8px; }
-      .input-textarea { min-height: 28px; padding: 5px 6px 2px; font-size: 15px; }
+      .input-textarea { min-height: 28px; padding: 5px 6px 2px; font-size: 16px; }
 
-      .btn-circle { width: 24px; height: 24px; min-width: 24px; }
+      .btn-circle { width: 28px; height: 28px; min-width: 28px; }
 
       .session-item {
         padding: 6px 8px;
         min-height: 40px;
       }
-      .session-action-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
+      .session-action-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
 
       .sidebar { top: 0; width: min(240px, calc(100vw - 10px)); }
 
       .modal { max-height: 80vh; }
       .modal-header { padding: 8px 10px; min-height: 36px; }
       .modal-body { padding: 8px 10px; }
+      .session-modal .modal-footer { padding: 8px 10px 12px; }
       .field-row { grid-template-columns: 1fr; gap: 0; }
 
       .btn { min-height: 36px; padding: 8px 12px; }
@@ -7031,6 +7138,11 @@
       color: var(--fg-secondary);
       line-height: 1.4;
       margin-bottom: 0;
+      max-height: 4.2em;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
     }
     .notification-bubble-actions {
       margin-top: 6px;
@@ -7267,6 +7379,27 @@
       margin-top: 10px;
     }
 
+    .settings-connect-url-box {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--bg-primary);
+      border: 1px solid var(--border-subtle);
+      border-radius: 6px;
+      padding: 6px 10px;
+      margin-top: 6px;
+    }
+
+    .settings-connect-url-text {
+      flex: 1;
+      font-family: var(--font-mono, monospace);
+      font-size: 13px;
+      color: var(--text-primary);
+      word-break: break-all;
+      user-select: all;
+      -webkit-user-select: all;
+    }
+
     .settings-divider {
       border: none;
       border-top: 1px solid var(--border-subtle);
@@ -7340,6 +7473,93 @@
       cursor: pointer;
     }
 
+    /* Switch card list */
+    .switch-card-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .switch-card {
+      display: block;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 12px 14px;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+      user-select: none;
+    }
+    .switch-card:hover {
+      border-color: var(--text-muted);
+    }
+    .switch-card-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .switch-card-title {
+      flex: 1;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .switch-card-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: 0;
+      max-height: 0;
+      overflow: hidden;
+      opacity: 0;
+      transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
+    }
+    /* When switch is ON, expand the description */
+    .switch-card:has(.switch-toggle:checked) .switch-card-desc {
+      max-height: 40px;
+      opacity: 1;
+      margin-top: 8px;
+    }
+    .switch-card:has(.switch-toggle:checked) {
+      border-color: var(--accent);
+      background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary));
+    }
+
+    /* Switch toggle (iOS style) */
+    .switch-toggle {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+    .switch-slider {
+      position: relative;
+      display: inline-block;
+      width: 40px;
+      height: 22px;
+      min-width: 40px;
+      background: #c4b8a8;
+      border-radius: 11px;
+      transition: background 0.25s;
+    }
+    .switch-slider::after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 16px;
+      height: 16px;
+      background: #fff;
+      border-radius: 50%;
+      transition: transform 0.25s;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+    .switch-toggle:checked + .switch-slider {
+      background: var(--accent);
+    }
+    .switch-toggle:checked + .switch-slider::after {
+      transform: translateX(18px);
+    }
+
     .field-file {
       font-size: 0.8rem;
       padding: 6px;

package/dist/ws-broadcast.d.ts

@@ -3,14 +3,15 @@
  * Handles debounced output events, backpressure control, and client subscriptions.
  */
 import { WebSocketServer } from "ws";
-import type { SessionSnapshot, ProcessEvent } from "./types.js";
+import type { CardExpandDefaults, SessionSnapshot, ProcessEvent } from "./types.js";
 export type { ProcessEvent } from "./types.js";
 export declare class WsBroadcastManager {
     private wss;
     private clients;
     private outputDebounceCache;
     private eventEmitter;
-    constructor(wss: WebSocketServer);
+    private getCardDefaults;
+    constructor(wss: WebSocketServer, getCardDefaults?: () => CardExpandDefaults);
     /** Set up connection handling. Should be called once during server startup. */
     setup(getSession: (id: string) => SessionSnapshot | null): void;
     /** Emit a process event to all subscribed WebSocket clients. */

package/dist/ws-broadcast.js

@@ -5,6 +5,7 @@
 import { WebSocket } from "ws";
 import { EventEmitter } from "node:events";
 import { validateSession } from "./auth.js";
+import { truncateMessagesForTransport } from "./message-truncator.js";
 // ── Constants ──
 const MAX_QUEUE_SIZE = 500;
 const OUTPUT_DEBOUNCE_MS = 16;
@@ -14,8 +15,10 @@ export class WsBroadcastManager {
     clients = new Set();
     outputDebounceCache = new Map();
     eventEmitter = new EventEmitter();
-    constructor(wss) {
+    getCardDefaults;
+    constructor(wss, getCardDefaults) {
         this.wss = wss;
+        this.getCardDefaults = getCardDefaults ?? (() => ({}));
     }
     /** Set up connection handling. Should be called once during server startup. */
     setup(getSession) {
@@ -45,10 +48,13 @@ export class WsBroadcastManager {
                     if (msg.type === "subscribe" && msg.sessionId) {
                         const snapshot = getSession(msg.sessionId);
                         if (snapshot) {
+                            const truncatedMessages = snapshot.messages
+                                ? truncateMessagesForTransport(snapshot.messages, this.getCardDefaults())
+                                : undefined;
                             ws.send(JSON.stringify({
                                 type: "init",
                                 sessionId: msg.sessionId,
-                                data: { ...snapshot, messages: snapshot.messages, output: snapshot.output },
+                                data: { ...snapshot, messages: truncatedMessages, output: snapshot.output },
                             }));
                         }
                         else {

package/package.json

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