@co0ontty/wand 1.25.3 → 1.26.0

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

@@ -13537,11 +13537,296 @@
       margin-top: 4px;
     }
 
+    /* ── Quick-commit V2 layout ───────────────────────────────────── */
+    .quick-commit-modal .modal-body {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .qc-section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 12px 14px;
+      background: rgba(255, 255, 255, 0.6);
+      border: 1px solid rgba(125, 91, 57, 0.10);
+      border-radius: 14px;
+      box-shadow: 0 1px 2px rgba(125, 91, 57, 0.04);
+    }
+    .qc-section--repo {
+      background: linear-gradient(180deg, rgba(255, 250, 244, 0.7) 0%, rgba(255, 247, 238, 0.7) 100%);
+    }
+    .qc-section--empty {
+      background: rgba(245, 245, 245, 0.5);
+    }
+    .qc-section-head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .qc-section-title {
+      font-size: 0.78rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--text-muted);
+    }
+    .qc-section-meta {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      font-family: var(--font-mono, monospace);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    .qc-section-actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+      margin-top: 2px;
+      flex-wrap: wrap;
+    }
+    .qc-section-actions--secondary {
+      justify-content: space-between;
+    }
+
+    /* Empty state */
+    .qc-empty-state {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 6px 4px;
+    }
+    .qc-empty-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: rgba(60, 160, 90, 0.14);
+      color: rgba(40, 130, 70, 0.95);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 1rem;
+    }
+    .qc-empty-title {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .qc-empty-sub {
+      font-size: 0.78rem;
+      color: var(--text-muted);
+    }
+
+    /* HEAD card (last commit info) */
+    .qc-head-card {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      background: rgba(255, 255, 255, 0.7);
+      border: 1px solid rgba(125, 91, 57, 0.08);
+      border-radius: 10px;
+      min-height: 36px;
+    }
+    .qc-head-label {
+      flex-shrink: 0;
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+    .qc-head-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      font-family: var(--font-mono, monospace);
+      font-size: 0.78rem;
+      color: var(--text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background: transparent;
+      padding: 0;
+    }
+
+    /* Status chips (ahead/behind/tags) */
+    .qc-status-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .qc-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 9px;
+      border-radius: 999px;
+      font-size: 0.72rem;
+      font-weight: 600;
+      line-height: 1.4;
+      background: rgba(120, 120, 120, 0.08);
+      color: var(--text-secondary);
+      border: 1px solid rgba(120, 120, 120, 0.12);
+      white-space: nowrap;
+    }
+    .qc-chip--ahead {
+      background: rgba(60, 130, 200, 0.14);
+      color: rgba(40, 100, 170, 0.95);
+      border-color: rgba(60, 130, 200, 0.28);
+    }
+    .qc-chip--behind {
+      background: rgba(180, 100, 60, 0.14);
+      color: rgba(160, 90, 50, 0.95);
+      border-color: rgba(180, 100, 60, 0.28);
+    }
+    .qc-chip--tag {
+      background: rgba(140, 100, 200, 0.14);
+      color: rgba(110, 70, 180, 0.95);
+      border-color: rgba(140, 100, 200, 0.28);
+    }
+    .qc-chip--warn {
+      background: rgba(220, 150, 30, 0.14);
+      color: rgba(180, 110, 20, 0.95);
+      border-color: rgba(220, 150, 30, 0.32);
+    }
+    .qc-chip--clean {
+      background: rgba(60, 160, 90, 0.12);
+      color: rgba(40, 130, 70, 0.95);
+      border-color: rgba(60, 160, 90, 0.24);
+    }
+
+    /* Tag HEAD inline drawer */
+    .qc-tag-head-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 10px 12px;
+      background: rgba(255, 255, 255, 0.85);
+      border: 1px solid rgba(140, 100, 200, 0.18);
+      border-radius: 10px;
+    }
+    .qc-tag-head-row {
+      display: flex;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .qc-tag-head-row .field-input { flex: 1 1 auto; min-width: 0; }
+    .qc-tag-head-push {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.78rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      user-select: none;
+    }
+    .qc-tag-head-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+    }
+
+    /* Split button (primary action: commit / commit & push) */
+    .qc-split-button {
+      position: relative;
+      display: inline-flex;
+      align-items: stretch;
+      isolation: isolate;
+    }
+    .qc-split-main {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      padding-right: 12px;
+    }
+    .qc-split-caret {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding: 0 8px;
+      border-left: 1px solid rgba(255, 255, 255, 0.25);
+      min-width: 26px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .qc-split-caret svg {
+      transition: transform 0.16s ease;
+    }
+    .qc-split-caret.is-active svg {
+      transform: rotate(180deg);
+    }
+    .qc-split-button--secondary .qc-split-caret {
+      border-left-color: rgba(125, 91, 57, 0.12);
+    }
+
+    /* Dropdown menu (used by primary action + push) */
+    .qc-dropdown-menu {
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      min-width: 220px;
+      max-width: 320px;
+      background: rgba(255, 255, 255, 0.98);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(125, 91, 57, 0.16);
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+      padding: 4px;
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      animation: qcDropdownIn 0.14s ease-out;
+    }
+    .qc-dropdown-menu--right { right: 0; left: auto; }
+    @keyframes qcDropdownIn {
+      from { opacity: 0; transform: translateY(-4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .qc-dropdown-item {
+      all: unset;
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 8px 10px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.12s ease;
+    }
+    .qc-dropdown-item:hover:not(.is-disabled) {
+      background: rgba(197, 101, 61, 0.08);
+    }
+    .qc-dropdown-item.is-selected {
+      background: rgba(197, 101, 61, 0.12);
+    }
+    .qc-dropdown-item.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .qc-dropdown-item-title {
+      font-size: 0.84rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .qc-dropdown-item-desc {
+      font-size: 0.72rem;
+      color: var(--text-muted);
+      line-height: 1.4;
+    }
+
     @media (max-width: 720px) {
       .topbar-git-branch { max-width: 8em; }
       .topbar-git-badge { padding: 0 8px; font-size: 0.7rem; }
       .quick-commit-modal { max-width: 95vw; }
       .qc-files-wrap { max-height: 160px; }
+      .qc-section { padding: 10px 12px; }
+      .qc-dropdown-menu { min-width: 180px; }
     }
 
     /* ============================================================ */

package/dist/ws-broadcast.js

@@ -78,23 +78,46 @@ export class WsBroadcastManager {
         if (event.type === "output") {
             const existing = this.outputDebounceCache.get(event.sessionId);
             if (existing) {
-                clearTimeout(existing.timer);
-                // Merge prev + cur. Cur takes precedence for identically-named fields,
-                // but fields only present on prev (e.g. chunk while cur carries
-                // messages, or messages while cur carries chunk) survive — the old
-                // implementation silently dropped them.
                 const prevData = existing.event.data ?? {};
                 const curData = event.data ?? {};
-                const merged = { ...prevData, ...curData };
-                const prevChunk = prevData.chunk;
-                const curChunk = curData.chunk;
-                if (prevChunk && curChunk) {
-                    merged.chunk = prevChunk + curChunk;
+                // 跨"事件形状"不能简单 shallow-merge：
+                //   - 全量事件（带 messages）+ 增量事件（带 lastMessage，不带 messages）
+                //     合并后变成 { messages, incremental: true, lastMessage }。客户端
+                //     reducer 看到 incremental 就只读 lastMessage，把权威的 messages 丢掉，
+                //     表现是"刷新页面才出来的消失文字"。
+                //   - 反过来：增量在前，全量在后，cur 覆盖 prev 后 incremental 仍为 true
+                //     而 messages 来自 cur——这种顺序原本是安全的，但风险一致就一起处理。
+                // 形状不一致时 flush 上一条立即广播，新事件单独开窗口。这样客户端永远
+                // 不会在一条 WS 消息里同时看到 messages 和 lastMessage 两种语义。
+                const prevHasMessages = "messages" in prevData && prevData.messages !== undefined;
+                const prevHasLastMsg = "lastMessage" in prevData && prevData.lastMessage !== undefined;
+                const curHasMessages = "messages" in curData && curData.messages !== undefined;
+                const curHasLastMsg = "lastMessage" in curData && curData.lastMessage !== undefined;
+                const shapeMismatch = (prevHasMessages && curHasLastMsg && !curHasMessages) ||
+                    (prevHasLastMsg && curHasMessages && !curHasLastMsg);
+                if (shapeMismatch) {
+                    clearTimeout(existing.timer);
+                    this.outputDebounceCache.delete(event.sessionId);
+                    this.broadcast(existing.event);
+                    // Fall through to schedule cur on a fresh debounce window
                 }
-                else if (prevChunk && !curChunk) {
-                    merged.chunk = prevChunk;
+                else {
+                    clearTimeout(existing.timer);
+                    // Merge prev + cur. Cur takes precedence for identically-named fields,
+                    // but fields only present on prev (e.g. chunk while cur carries
+                    // messages, or messages while cur carries chunk) survive — the old
+                    // implementation silently dropped them.
+                    const merged = { ...prevData, ...curData };
+                    const prevChunk = prevData.chunk;
+                    const curChunk = curData.chunk;
+                    if (prevChunk && curChunk) {
+                        merged.chunk = prevChunk + curChunk;
+                    }
+                    else if (prevChunk && !curChunk) {
+                        merged.chunk = prevChunk;
+                    }
+                    event = { ...event, data: merged };
                 }
-                event = { ...event, data: merged };
             }
             const timer = setTimeout(() => {
                 this.outputDebounceCache.delete(event.sessionId);

package/package.json

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