@co0ontty/wand 1.39.1 → 1.40.0

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

@@ -547,8 +547,8 @@
     }
     .sidebar.pinned.collapsed .sidebar-header-main,
     .sidebar.pinned.collapsed .sidebar-header-more,
-    .sidebar.pinned.collapsed .sidebar-footer,
-    .sidebar.pinned.collapsed .sidebar-history-region {
+    .sidebar.pinned.collapsed .sidebar-pin-toggle,
+    .sidebar.pinned.collapsed .sidebar-footer {
       display: none;
     }
     .sidebar.pinned.collapsed .sidebar-header-actions {
@@ -695,6 +695,17 @@
     .sidebar-collapse-toggle.collapsed {
       color: var(--primary);
     }
+    /* 常驻（图钉）开关：默认描边态；常驻时图钉「按下」，用 accent 高亮 + 45° 旋转。 */
+    .sidebar-pin-toggle {
+      flex-shrink: 0;
+      transition: background 0.16s ease, color var(--transition-fast),
+        transform 0.3s var(--ease-out-expo);
+    }
+    .sidebar-pin-toggle.pinned {
+      background: rgba(197, 101, 61, 0.12);
+      color: var(--accent);
+      transform: rotate(45deg);
+    }
 
     /* ===== 侧边栏头部 ===== */
     .sidebar-header {
@@ -724,11 +735,9 @@
       flex-shrink: 0;
     }
 
-    /* On desktop pinned mode the close (X) button is redundant — the hamburger
-       toggle in the topbar already opens/closes the sidebar. Hide it to declutter. */
-    .sidebar.pinned .sidebar-header-actions .sidebar-close {
-      display: none;
-    }
+    /* The close (X) is the deliberate "hide the sidebar" control on desktop —
+       the pin only toggles 常驻 lock and never hides. Keep X visible while docked
+       (it's still hidden in the narrow/collapsed strip via the rule above). */
 
     .sidebar-header-more {
       position: relative;
@@ -825,6 +834,8 @@
       font-weight: 600;
       color: var(--text-primary);
       letter-spacing: -0.01em;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
 
     .session-count {
@@ -1034,6 +1045,8 @@
         opacity: 1;
         pointer-events: auto;
       }
+      /* 常驻（图钉）只在桌面有意义——手机端隐藏这个按钮，避免死按钮。 */
+      .sidebar-pin-toggle { display: none; }
     }
 
     .file-side-panel-header {
@@ -1276,6 +1289,7 @@
       flex: 1;
       min-height: 0;
       overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
       position: relative;
     }
 
@@ -1287,12 +1301,26 @@
 
     /* ===== 会话列表 ===== */
     .sessions-list {
-      flex: 1;
+      /* Flex column that fills the scroll body so the 历史会话 group can pin to
+         the very bottom (margin-top:auto) when the list is short, yet flow
+         naturally and scroll when it's long. #sessions-panel is display:contents
+         so this is effectively a direct child of the scrolling .sidebar-body. */
+      flex: 1 0 auto;
       min-height: 0;
-      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      /* No own scroll: .sidebar-body is the scroll container. overflow:visible
+         lets the manage bar's position:sticky bind to .sidebar-body. */
+      overflow: visible;
       padding: 10px 10px 12px;
     }
 
+    /* Unwrap the panel so .sessions-list is a direct flex child of the
+       scrolling .sidebar-body (enables fill + bottom-pin). */
+    #sessions-panel {
+      display: contents;
+    }
+
     .sessions-list:empty::before {
       content: '暂无会话';
       display: flex;
@@ -1304,7 +1332,7 @@
     }
 
     /* ===== 会话分组 ===== */
-    .session-group { margin-bottom: 20px; }
+    .session-group { margin-bottom: 14px; }
     .session-group:last-child { margin-bottom: 0; }
 
     /* Legacy .session-manage-bar / .session-manage-toggle / .session-manage-btn
@@ -1382,10 +1410,17 @@
     }
     .claude-history-directory-title {
       font-size: 0.6875rem;
-      padding: 6px 8px;
+      padding: 6px 8px 6px 12px;
       opacity: 0.8;
       justify-content: space-between;
     }
+    /* No accent bar on nested directory rows — the 3px bar stays on top-level
+       groups (历史会话 / 已归档) only, so the hierarchy reads as group → folder
+       → items instead of a column of identical orange ticks. The chevron +
+       slight indent already signal the sub-level. */
+    .claude-history-directory-header .claude-history-directory-title::before {
+      display: none;
+    }
     .claude-history-directory-label {
       min-width: 0;
       overflow: hidden;
@@ -1557,8 +1592,8 @@
       min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: 4px;
-      padding-right: 64px;
+      gap: 3px;
+      padding-right: 60px;
     }
 
     .session-title-row {
@@ -2249,11 +2284,18 @@
     .session-status.stopped .session-status-dot { background: var(--warning); }
 
     .session-status.running { background: var(--success-muted); color: var(--success); }
-    .session-status.exited { background: rgba(150, 118, 85, 0.1); color: var(--text-tertiary); }
     .session-status.failed { background: var(--danger-muted); color: var(--danger); }
     .session-status.stopped { background: var(--warning-muted); color: var(--warning); }
     .session-status.permission-blocked { background: rgba(240, 165, 0, 0.14); color: #d18b00; }
-    .session-status.archived { background: rgba(95, 74, 57, 0.08); color: var(--text-tertiary); }
+    /* Quiet "done" states — no filled pill, just a dot + muted text, so a long
+       list of finished sessions doesn't read as a stack of grey boxes. */
+    .session-status.exited,
+    .session-status.archived {
+      background: transparent;
+      color: var(--text-muted);
+      padding-left: 0;
+      padding-right: 0;
+    }
 
     @keyframes status-pulse {
       0%, 100% { opacity: 1; }
@@ -2270,126 +2312,36 @@
       font-weight: 500;
     }
 
-    /* ===== Sidebar: docked Claude history region =====
-       Lives between .sidebar-body and .sidebar-footer. Collapsed by default —
-       only a slim header row ("历史消息" + 数字气泡) is visible, so the main
-       scrolling area focuses on recent / archived sessions. Expanding it
-       grows the region with a 40% max-height cap so it can never eat the
-       sessions list above. */
-    .sidebar-history-region {
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      max-height: 40%;
-      border-top: 1px solid var(--border-subtle);
-      background: rgba(255, 251, 245, 0.66);
-      transition: max-height 0.28s var(--ease-out-expo);
-    }
-
-    .sidebar-history-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: 9px 14px;
-      min-height: 38px;
-      flex-shrink: 0;
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      cursor: pointer;
-      text-align: left;
-      font-family: var(--font-sans);
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.005em;
-      color: var(--text-secondary);
-      transition: background var(--transition-fast), color var(--transition-fast);
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    .sidebar-history-header:hover {
-      background: rgba(150, 118, 85, 0.06);
-      color: var(--text-primary);
-    }
-
-    .sidebar-history-header:active {
-      background: rgba(150, 118, 85, 0.1);
-    }
-
-    .sidebar-history-header.expanded {
-      background: rgba(255, 251, 245, 0.85);
-      color: var(--text-primary);
-      border-bottom: 1px solid var(--border-subtle);
-    }
-
-    .sidebar-history-label {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .sidebar-history-right {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-
-    /* Count bubble — pill shape, tabular numerals, accent-tinted when there
-       are items, muted when empty/loading. */
-    .history-bubble {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 22px;
-      height: 18px;
-      padding: 0 7px;
-      border-radius: 999px;
-      background: var(--accent-muted);
-      color: var(--accent);
-      font-size: 0.6875rem;
-      font-weight: 700;
-      font-variant-numeric: tabular-nums;
-      line-height: 1;
-      letter-spacing: 0;
+    /* ===== Sidebar: inline 历史会话 group =====
+       History (older Claude + Codex CLI sessions) is the final collapsible
+       group of #sessions-list — same scroll, same idiom as 已归档. No docked
+       region, no 40% cap, no stranded bar above the footer: when the list is
+       short the empty space simply falls below the content, as a list should. */
+    /* Pin the history group to the very bottom of the sidebar (just above the
+       footer). margin-top:auto eats the free space when the list is short;
+       when the list overflows there is no free space, so history simply
+       follows the content and scrolls. Collapsed + minimized by default. */
+    .session-group--history {
+      margin-top: auto;
+      padding-top: 6px;
     }
 
-    .history-bubble.empty {
-      background: var(--bg-tertiary);
+    /* Toggle header reuses .session-group-title + .claude-history-toggle.
+       The count chip turns into a quiet ellipsis while history is still
+       scanning, then settles to the real number. */
+    .session-history-toggle .history-count.loading {
+      letter-spacing: 0.12em;
       color: var(--text-muted);
-      opacity: 0.65;
-    }
-
-    .history-bubble.loading {
       background: transparent;
-      color: var(--text-muted);
-      letter-spacing: 0.1em;
-      padding: 0 4px;
-      font-weight: 600;
-    }
-
-    .sidebar-history-chevron {
-      flex-shrink: 0;
-      color: var(--text-muted);
-      transition: transform 0.22s var(--ease-out-expo), color var(--transition-fast);
-    }
-
-    .sidebar-history-header.expanded .sidebar-history-chevron {
-      transform: rotate(180deg);
-      color: var(--text-secondary);
+      padding-left: 2px;
+      padding-right: 2px;
     }
 
-    /* Expanded body — scrollable, capped via parent max-height. */
-    .sidebar-history-body {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      padding: 6px 8px 10px;
+    .session-history-body {
       display: flex;
       flex-direction: column;
       gap: 4px;
+      padding: 2px 0 4px;
       animation: historyBodyFadeIn 0.22s var(--ease-out-expo);
     }
 
@@ -9467,11 +9419,16 @@
       transform: scale(0.98);
     }
 
-    /* ── Manage bar — Linear-style toolbar ── */
+    /* ── Manage bar ──
+       Normal: a quiet sub-header ("最近的会话记录" + 管理 toggle).
+       Active: the SAME row morphs IN PLACE to a flat selection toolbar —
+       no card, no shadow, no layout jump — and sticks to the top of the
+       scroll so the count + 删除 stay reachable while selecting rows below. */
     .session-manage-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 8px;
       padding: 4px 4px 4px 10px;
       border-radius: 10px;
       margin-bottom: 10px;
@@ -9487,22 +9444,53 @@
       letter-spacing: 0.005em;
     }
 
-    /* Active toolbar — iOS toolbar look: card with hairline + summary + actions */
     .session-manage-bar.active {
-      flex-direction: column;
-      align-items: stretch;
-      gap: 10px;
-      padding: 10px 12px;
-      background: rgba(255, 255, 255, 0.6);
-      border: 1px solid rgba(125, 91, 57, 0.1);
-      border-radius: 14px;
-      box-shadow: 0 1px 2px rgba(125, 91, 57, 0.03);
+      position: sticky;
+      top: 0;
+      z-index: 6;
+      /* bleed to the list edges and cancel the #sessions-list top padding so
+         the bar sits flush at the scroll top — a flat header, not a card. */
+      margin: -10px -10px 8px;
+      padding: 9px 10px 9px 6px;
+      border-radius: 0;
+      background: rgba(255, 251, 245, 0.94);
+      -webkit-backdrop-filter: saturate(1.2) blur(8px);
+      backdrop-filter: saturate(1.2) blur(8px);
+      border-bottom: 1px solid var(--border-subtle);
+      box-shadow: none;
+    }
+    .session-manage-bar.active:hover {
+      background: rgba(255, 251, 245, 0.94);
+    }
+
+    /* Exit (✕) — the in-place "leave manage mode" affordance on the left. */
+    .session-manage-exit {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: background 0.14s ease, color 0.14s ease;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .session-manage-exit:hover {
+      background: rgba(125, 91, 57, 0.1);
+      color: var(--text-primary);
     }
 
     .session-manage-summary {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
+      min-width: 0;
+      flex: 1;
       font-size: 0.75rem;
       color: var(--text-secondary);
       font-weight: 500;
@@ -9511,33 +9499,29 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 22px;
-      height: 22px;
-      padding: 0 7px;
+      min-width: 20px;
+      height: 18px;
+      padding: 0 6px;
       background: var(--accent);
       color: var(--text-inverse);
       font-size: 0.6875rem;
       font-weight: 700;
       border-radius: 999px;
       font-variant-numeric: tabular-nums;
-      box-shadow: 0 1px 2px rgba(197, 101, 61, 0.32);
     }
     .session-manage-summary-label {
       color: var(--text-secondary);
       font-weight: 600;
     }
+    .session-manage-summary-label.muted {
+      color: var(--text-muted);
+      font-weight: 500;
+    }
 
     .session-manage-actions {
       display: flex;
       align-items: center;
-      gap: 4px;
-      flex-wrap: wrap;
-    }
-    .session-manage-divider {
-      width: 1px;
-      height: 16px;
-      background: rgba(125, 91, 57, 0.16);
-      margin: 0 4px;
+      gap: 6px;
       flex-shrink: 0;
     }
 
@@ -9568,73 +9552,53 @@
       opacity: 1;
     }
 
-    /* ── Session item — clean card on glass ──
-       克制原则：基础态用 hairline 描边 + 极轻顶部高光让卡片「贴」在侧栏上，
-       不给每张卡都加漂浮投影；hover/active 才升起一层柔和投影。避免多层
-       box-shadow 在半透明侧栏里互相叠加显脏。 */
+    /* ── Session item — flat list row, not a floating card ──
+       克制原则：基础态完全透明，让侧栏读起来是「一列」而不是「一摞卡片」；
+       仅 hover / active 才用填充背景区分。去掉每行的边框/渐变/投影/抬升，
+       避免在半透明侧栏里多层叠加显脏、以及 hover 抬升导致邻项跳动。 */
     .session-item {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 252, 247, 0.38) 100%);
-      border: 1px solid rgba(125, 91, 57, 0.08);
-      border-radius: 13px;
-      padding: 11px 14px;
-      margin-bottom: 6px;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-      transition:
-        background 0.2s ease,
-        border-color 0.2s ease,
-        box-shadow 0.22s ease,
-        transform 0.22s var(--ease-out-expo);
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 11px;
+      padding: 9px 12px;
+      margin-bottom: 2px;
+      box-shadow: none;
+      transition: background 0.16s ease, border-color 0.16s ease;
     }
     .session-item::before {
       left: 4px;
-      top: 10px;
-      bottom: 10px;
+      top: 9px;
+      bottom: 9px;
       width: 3px;
       border-radius: 2px;
       background: linear-gradient(180deg, var(--accent), rgba(197, 101, 61, 0.5));
     }
     .session-item:hover {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 253, 248, 0.62) 100%);
-      border-color: rgba(125, 91, 57, 0.14);
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px -4px rgba(125, 91, 57, 0.16);
-    }
-    .session-item:hover::before {
-      opacity: 0.5;
-      transform: scaleY(1);
+      background: rgba(125, 91, 57, 0.06);
+      border-color: transparent;
     }
-    /* Selected (active) — accent ring 用边框表达，再叠一层柔和暖投影 + 顶高光。
-       去掉原先的 6 层叠加（外环/光晕/底影/三向 inset），层数过多在玻璃上显脏。 */
+    /* Left accent bar marks the *active* row only — not hover — to keep scanning calm. */
+    .session-item:hover::before { opacity: 0; }
     .session-item.active {
-      background:
-        linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.78) 100%);
-      border: 1px solid rgba(197, 101, 61, 0.32);
-      transform: translateY(-1px);
-      backdrop-filter: blur(20px) saturate(180%);
-      -webkit-backdrop-filter: blur(20px) saturate(180%);
-      box-shadow:
-        0 4px 14px -4px rgba(197, 101, 61, 0.24),
-        inset 0 1px 0 rgba(255, 255, 255, 0.7);
+      background: linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.74) 100%);
+      border-color: rgba(197, 101, 61, 0.28);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
     }
-    /* ::before 的左侧高亮条受父级 overflow:hidden 裁切，原来的 box-shadow 光晕
-       根本显示不出来，移除以省一次绘制。 */
     .session-item.active::before {
       opacity: 1;
       transform: scaleY(1);
     }
-    /* Multi-select state — quieter glass tint, no accent halo */
+    /* Multi-select state — quieter accent tint */
     .session-item.selected {
-      background:
-        linear-gradient(180deg, rgba(255, 250, 244, 0.85) 0%, rgba(255, 246, 236, 0.65) 100%);
-      border: 1px solid rgba(197, 101, 61, 0.2);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      background: rgba(197, 101, 61, 0.09);
+      border-color: rgba(197, 101, 61, 0.18);
     }
     .session-item.selected::before {
       opacity: 0.7;
       transform: scaleY(1);
     }
     .session-item:active {
-      transform: translateY(0) scale(0.99);
+      transform: scale(0.992);
       transition-duration: 0.08s;
     }
 
@@ -10333,13 +10297,15 @@
       }
 
       .sessions-list {
-        display: block;
-        flex: 1;
+        /* Match desktop: flex column that fills the scroll body so 历史会话
+           bottom-pins and the manage bar stays sticky. .sidebar-body owns the
+           scroll (and momentum) on mobile, so this stays overflow:visible. */
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 auto;
         min-height: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: visible;
         padding: 4px;
-        -webkit-overflow-scrolling: touch;
       }
 
       /* 移动端会话项 - 紧凑 */
@@ -15339,7 +15305,7 @@
 
     /* ── 快捷提交模态框 ── */
     .quick-commit-modal {
-      max-width: 560px;
+      max-width: 540px;
     }
     .quick-commit-modal .modal-body {
       display: flex;
@@ -15347,17 +15313,17 @@
       gap: 12px;
     }
     .qc-files-wrap {
-      max-height: 200px;
+      max-height: 190px;
       overflow-y: auto;
-      padding: 8px 10px;
-      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
-      border-radius: 6px;
-      background: rgba(255, 255, 255, 0.45);
+      padding: 6px 8px;
+      border: 1px solid rgba(125, 91, 57, 0.10);
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.4);
       font-family: var(--font-mono, monospace);
       font-size: 0.78rem;
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      gap: 1px;
     }
     .qc-empty {
       color: var(--text-muted);
@@ -15368,30 +15334,45 @@
     .qc-file-row {
       display: flex;
       align-items: center;
-      gap: 8px;
-      line-height: 1.5;
+      gap: 9px;
+      line-height: 1.6;
+      padding: 1px 2px;
+      border-radius: 5px;
+    }
+    .qc-file-row:hover {
+      background: rgba(125, 91, 57, 0.06);
     }
-    .qc-flag {
+    /* Single-letter status badge, VS Code style */
+    .qc-file-badge {
       flex-shrink: 0;
-      width: 24px;
-      text-align: center;
-      font-weight: 700;
-      color: var(--text-muted);
+      width: 17px;
+      height: 17px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      font-size: 0.66rem;
+      font-weight: 800;
       letter-spacing: 0;
+      line-height: 1;
+      font-family: var(--font-sans);
     }
-    .qc-flag-add { color: rgba(60, 160, 90, 0.95); }
-    .qc-flag-mod { color: rgba(220, 150, 30, 0.95); }
-    .qc-flag-del { color: rgba(200, 70, 70, 0.95); }
-    .qc-flag-ren { color: rgba(110, 130, 200, 0.95); }
-    .qc-flag-untracked { color: rgba(140, 140, 140, 0.95); }
+    .qc-badge-add { color: rgba(34, 128, 66, 0.98); background: rgba(60, 160, 90, 0.16); }
+    .qc-badge-mod { color: rgba(170, 110, 14, 0.98); background: rgba(220, 150, 30, 0.16); }
+    .qc-badge-del { color: rgba(190, 56, 56, 0.98); background: rgba(200, 70, 70, 0.15); }
+    .qc-badge-ren { color: rgba(78, 100, 188, 0.98); background: rgba(110, 130, 200, 0.16); }
+    .qc-badge-untracked { color: rgba(34, 128, 66, 0.95); background: rgba(60, 160, 90, 0.12); }
+    .qc-badge-ignored,
+    .qc-badge-other { color: var(--text-muted); background: rgba(120, 120, 120, 0.12); }
     .qc-file-path {
-      color: var(--text-secondary);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       flex: 1 1 auto;
       min-width: 0;
     }
+    .qc-file-dir { color: var(--text-muted); }
+    .qc-file-name { color: var(--text-primary); font-weight: 500; }
     .qc-submodule-badge {
       flex-shrink: 0;
       padding: 1px 6px;
@@ -15403,20 +15384,12 @@
       letter-spacing: 0.02em;
       white-space: nowrap;
     }
-    .qc-switch {
-      flex-shrink: 0;
-      display: inline-flex;
-      align-items: center;
-      cursor: pointer;
-    }
-    .qc-message-row,
-    .qc-tag-row {
+    .qc-message-row {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 6px;
     }
-    .qc-message-row.hidden,
-    .qc-tag-row.hidden {
+    .qc-message-row.hidden {
       display: none;
     }
     .qc-message-header {
@@ -15424,68 +15397,75 @@
       align-items: center;
       justify-content: space-between;
       gap: 8px;
-      flex-wrap: wrap;
     }
-    .qc-ai-controls {
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 7px;
-      margin-left: auto;
-      flex: 0 0 auto;
+    .qc-message-label {
+      margin-bottom: 0;
     }
-    .qc-ai-tag-toggle {
+    /* AI generate button: icon + text */
+    .qc-ai-btn {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      min-height: 30px;
-      padding: 3px 7px 3px 9px;
-      border: 1px solid rgba(125, 91, 57, 0.12);
-      border-radius: 999px;
-      background: rgba(255, 255, 255, 0.58);
-      color: var(--text-muted);
-      font-size: 0.74rem;
-      font-weight: 700;
-      line-height: 1;
-      user-select: none;
-      cursor: pointer;
-      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
-    }
-    .qc-ai-tag-toggle:hover {
-      background: rgba(255, 255, 255, 0.82);
-      border-color: rgba(125, 91, 57, 0.20);
+      gap: 5px;
+      color: var(--accent);
     }
-    .qc-ai-tag-toggle:has(.switch-toggle:checked) {
-      color: rgba(170, 79, 42, 0.98);
-      background: linear-gradient(180deg, #fff8f1 0%, #fff1e3 100%);
-      border-color: rgba(197, 101, 61, 0.32);
-      box-shadow: 0 1px 4px rgba(197, 101, 61, 0.10);
+    .qc-ai-btn svg {
+      color: var(--accent);
+      flex-shrink: 0;
     }
-    .qc-ai-tag-toggle:has(.switch-toggle:disabled) {
-      cursor: default;
-      opacity: 0.68;
+    .qc-ai-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      color: var(--text-muted);
     }
-    .qc-ai-tag-label {
-      white-space: nowrap;
+    .qc-ai-btn:disabled svg { color: var(--text-muted); }
+    .qc-message-input {
+      resize: vertical;
+      min-height: 68px;
+      font-family: var(--font-mono, monospace);
+      font-size: 0.84rem;
+      line-height: 1.55;
     }
-    .qc-switch--compact .switch-slider {
-      width: 34px;
-      min-width: 34px;
-      height: 20px;
-      border-radius: 999px;
+
+    /* Tag field — single line: [Tag] [version input] */
+    .qc-tag-field {
+      display: flex;
+      align-items: center;
+      gap: 10px;
     }
-    .qc-switch--compact .switch-slider::after {
-      width: 16px;
-      height: 16px;
+    .qc-tag-field-label {
+      flex-shrink: 0;
+      width: 2.4em;
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--accent);
     }
-    .qc-switch--compact .switch-toggle:checked + .switch-slider::after {
-      transform: translateX(14px);
+    .qc-tag-field.is-off .qc-tag-field-label {
+      color: var(--text-muted);
     }
-    .qc-message-row textarea {
-      resize: vertical;
-      min-height: 56px;
+    .qc-tag-field-input {
+      flex: 1 1 auto;
+      min-width: 0;
       font-family: var(--font-mono, monospace);
-      font-size: 0.85rem;
+      font-size: 0.82rem;
+    }
+    /* "Commit only" state: show the suggested tag greyed, as a non-editable preview. */
+    .qc-tag-field-input:disabled {
+      color: var(--text-muted);
+      background: rgba(125, 91, 57, 0.04);
+      border-color: rgba(125, 91, 57, 0.08);
+      cursor: default;
+      box-shadow: none;
+    }
+    .qc-tag-field-note {
+      flex-shrink: 0;
+      font-size: 0.7rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: rgba(125, 91, 57, 0.08);
     }
     .quick-commit-modal .worktree-merge-actions {
       display: flex;
@@ -15500,21 +15480,17 @@
       flex-direction: column;
       gap: 14px;
     }
+    /* Flat sections — no nested cards. Sections are just grouped rows,
+       separated by a hairline divider rather than boxed in their own card. */
     .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);
+      gap: 12px;
     }
+    /* The repo/sync block sits below a divider instead of inside its own card. */
     .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);
+      padding-top: 16px;
+      border-top: 1px solid rgba(125, 91, 57, 0.12);
     }
     .qc-section-head {
       display: flex;
@@ -15523,14 +15499,14 @@
       gap: 8px;
     }
     .qc-section-title {
-      font-size: 0.78rem;
+      font-size: 0.72rem;
       font-weight: 700;
       text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--text-muted);
+      letter-spacing: 0.07em;
+      color: var(--text-secondary);
     }
     .qc-section-meta {
-      font-size: 0.75rem;
+      font-size: 0.74rem;
       color: var(--text-muted);
       font-family: var(--font-mono, monospace);
       overflow: hidden;
@@ -15549,55 +15525,46 @@
     .qc-section-actions--secondary {
       justify-content: space-between;
     }
-
-    /* Empty state */
-    .qc-empty-state {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 6px 4px;
+    /* Groups the Commit split-button + standalone Push button in the footer. */
+    .qc-action-group {
+      display: inline-flex;
+      align-items: stretch;
+      gap: 8px;
     }
-    .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;
+
+    /* Small "工作区干净" badge shown inline in the modal subtitle. */
+    .qc-clean-badge {
+      display: inline-flex;
       align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 1rem;
-    }
-    .qc-empty-title {
-      font-size: 0.9rem;
+      gap: 3px;
+      margin-left: 8px;
+      padding: 1px 8px;
+      border-radius: 999px;
+      font-size: 0.7rem;
       font-weight: 600;
-      color: var(--text-primary);
-    }
-    .qc-empty-sub {
-      font-size: 0.78rem;
-      color: var(--text-muted);
+      color: rgba(40, 130, 70, 0.95);
+      background: rgba(60, 160, 90, 0.12);
+      border: 1px solid rgba(60, 160, 90, 0.22);
+      vertical-align: 1px;
     }
+    .qc-clean-badge svg { flex-shrink: 0; }
 
-    /* HEAD card (last commit info) */
+    /* HEAD — a plain inline line (no nested box). */
     .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;
+      gap: 8px;
     }
     .qc-head-label {
       flex-shrink: 0;
-      font-size: 0.7rem;
+      font-size: 0.66rem;
       font-weight: 700;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.06em;
       color: var(--text-muted);
       text-transform: uppercase;
+      padding: 1px 6px;
+      border-radius: 5px;
+      background: rgba(125, 91, 57, 0.08);
     }
     .qc-head-text {
       flex: 1 1 auto;
@@ -15642,11 +15609,6 @@
       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);
@@ -15658,16 +15620,34 @@
       border-color: rgba(60, 160, 90, 0.24);
     }
 
+    /* "为当前提交打 Tag" button (icon + text, balances the push button) */
+    .qc-tag-head-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .qc-tag-head-btn svg { flex-shrink: 0; opacity: 0.8; }
+    .qc-tag-head-btn.is-open {
+      background: rgba(140, 100, 200, 0.12);
+      border-color: rgba(140, 100, 200, 0.28);
+      color: rgba(96, 60, 160, 0.98);
+    }
+
     /* Tag HEAD inline drawer */
     .qc-tag-head-panel {
       display: flex;
       flex-direction: column;
       gap: 8px;
-      padding: 10px 12px;
+      padding: 11px 12px;
       background: rgba(255, 255, 255, 0.85);
       border: 1px solid rgba(140, 100, 200, 0.18);
       border-radius: 10px;
     }
+    .qc-tag-head-hint {
+      font-size: 0.74rem;
+      color: var(--text-muted);
+      line-height: 1.4;
+    }
     .qc-tag-head-row {
       display: flex;
       gap: 6px;
@@ -15750,7 +15730,7 @@
       all: unset;
       display: flex;
       flex-direction: column;
-      gap: 1px;
+      gap: 2px;
       padding: 8px 10px;
       border-radius: 8px;
       cursor: pointer;
@@ -15760,12 +15740,26 @@
       background: rgba(197, 101, 61, 0.08);
     }
     .qc-dropdown-item.is-selected {
-      background: rgba(197, 101, 61, 0.12);
+      background: rgba(197, 101, 61, 0.10);
     }
     .qc-dropdown-item.is-disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
+    .qc-dropdown-item-main {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .qc-dropdown-check {
+      flex-shrink: 0;
+      width: 13px;
+      height: 13px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+    }
     .qc-dropdown-item-title {
       font-size: 0.84rem;
       font-weight: 600;
@@ -15775,6 +15769,7 @@
       font-size: 0.72rem;
       color: var(--text-muted);
       line-height: 1.4;
+      padding-left: 19px;
     }
 
     @media (max-width: 720px) {
@@ -15782,12 +15777,11 @@
       .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; }
-      .qc-ai-controls {
-        width: 100%;
-        justify-content: flex-end;
-      }
+      .qc-section-actions--secondary { flex-wrap: wrap; gap: 8px; }
+      .qc-section-actions--secondary .qc-tag-head-btn { flex: 1 1 auto; justify-content: center; }
+      /* Keep the commit footer one row, but let the two button groups share width. */
+      .qc-action-group { flex: 1 1 auto; justify-content: flex-end; }
     }
 
     /* ============================================================ */