@co0ontty/wand 1.18.1 → 1.20.4

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

@@ -188,6 +188,10 @@
       min-height: 100dvh;
       height: 100vh;
       height: 100dvh;
+      /* 软键盘弹起时由 JS 注入 --app-viewport-height = visualViewport.height，
+         整体 flex column 自动收缩，让底部 input-panel 上移贴键盘上沿；
+         没注入时退回 100dvh 行为。 */
+      height: var(--app-viewport-height, 100dvh);
       line-height: var(--line-height-base);
       overflow: hidden;
     }
@@ -236,6 +240,8 @@
       min-height: 100dvh;
       height: 100vh;
       height: 100dvh;
+      /* 与 body 同步：键盘弹起时跟随可见视口收缩。 */
+      height: var(--app-viewport-height, 100dvh);
       overflow: hidden;
     }
 
@@ -1054,16 +1060,16 @@
     }
     .claude-history-item:hover {
       opacity: 1;
-      background: rgba(150, 118, 85, 0.06);
+      background: rgba(255, 253, 250, 0.96);
     }
 
     /* ===== 会话卡片项 ===== */
     .session-item {
       width: 100%;
       text-align: left;
-      background: var(--bg-surface);
-      border: 1px solid transparent;
-      border-radius: var(--radius-md);
+      background: rgba(255, 252, 247, 0.92);
+      border: 1px solid var(--border-subtle);
+      border-radius: 10px;
       color: var(--text-primary);
       padding: 10px 12px;
       cursor: pointer;
@@ -1097,6 +1103,7 @@
       position: relative;
       z-index: 2;
       background: inherit;
+      border-radius: inherit;
       transition: transform 0.3s var(--ease-out-expo);
       will-change: transform;
     }
@@ -1148,7 +1155,7 @@
 
     .session-item.selected {
       border-color: rgba(197, 101, 61, 0.35);
-      background: rgba(197, 101, 61, 0.08);
+      background: rgba(255, 245, 238, 0.96);
     }
 
     .session-item.selected::before {
@@ -1803,9 +1810,9 @@
 
     /* ===== 会话卡片交互效果 ===== */
     .session-item:hover {
-      background: rgba(150, 118, 85, 0.06);
-      border-color: var(--border-subtle);
-      box-shadow: 0 1px 4px rgba(89, 58, 32, 0.04);
+      background: rgba(255, 253, 250, 0.96);
+      border-color: var(--border-default);
+      box-shadow: 0 2px 8px rgba(89, 58, 32, 0.07);
     }
 
     .session-item:hover::before {
@@ -1814,9 +1821,9 @@
     }
 
     .session-item.active {
-      background: rgba(197, 101, 61, 0.08);
-      border-color: rgba(197, 101, 61, 0.2);
-      box-shadow: 0 1px 6px rgba(197, 101, 61, 0.08);
+      background: rgba(255, 247, 240, 0.96);
+      border-color: rgba(197, 101, 61, 0.3);
+      box-shadow: 0 2px 8px rgba(197, 101, 61, 0.1);
     }
 
     .session-item.active::before {
@@ -1884,7 +1891,7 @@
 
     .session-status.running .session-status-dot {
       background: var(--success);
-      box-shadow: 0 0 8px var(--success-glow);
+      box-shadow: 0 0 5px var(--success-glow);
       animation: status-pulse 2s ease-in-out infinite;
     }
 
@@ -2219,15 +2226,92 @@
 
     .terminal-info { font-size: 0.625rem; color: var(--text-muted); font-weight: 500; }
 
-    /* ===== 主内容区顶部行 ===== */
+    /* ===== 主内容区顶部行（三段式） ===== */
     .main-header-row {
       display: flex;
       align-items: center;
-      justify-content: flex-start;
       padding: 6px 10px;
       flex-shrink: 0;
       min-height: 44px;
       gap: 8px;
+      position: relative;
+    }
+    .topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    .topbar-center {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      overflow: hidden;
+    }
+    .topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+
+    /* 左段品牌徽标 */
+    .topbar-brand {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-active));
+      color: #fff;
+      font-weight: 700;
+      font-size: 0.85rem;
+      letter-spacing: 0.02em;
+      box-shadow: 0 1px 3px rgba(89, 58, 32, 0.18);
+      user-select: none;
+      flex-shrink: 0;
+    }
+
+    /* 中段：会话标题 / cwd / 标语 */
+    .topbar-session-title {
+      font-weight: 600;
+      font-size: 0.85rem;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+      max-width: 240px;
+    }
+    .topbar-cwd {
+      color: var(--text-muted);
+      font-size: 0.72rem;
+      font-family: var(--font-mono, monospace);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      flex: 1 1 0;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 6px;
+      direction: rtl;
+      text-align: left;
+      transition: background var(--transition-fast), color var(--transition-fast);
+    }
+    .topbar-cwd:hover {
+      background: rgba(255, 255, 255, 0.55);
+      color: var(--text-secondary);
+    }
+    .topbar-tagline {
+      color: var(--text-muted);
+      font-size: 0.78rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     /* PWA 模式额外留出顶部缓冲,避免与 iPadOS Stage Manager 等系统浮动控件视觉粘连 */
@@ -2240,7 +2324,65 @@
       padding-top: 10px;
     }
 
-    /* Current task indicator */
+    /* 会话状态徽标（静态） */
+    .session-status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 0.7rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-subtle);
+      border-radius: 20px;
+      padding: 2px 9px 2px 7px;
+      flex-shrink: 0;
+      max-width: 140px;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .session-status-pill .session-status-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--text-muted);
+      flex-shrink: 0;
+    }
+    .session-status-pill .session-status-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .session-status-pill.running {
+      background: var(--success-muted);
+      border-color: rgba(79, 122, 88, 0.3);
+      color: var(--success);
+    }
+    .session-status-pill.running .session-status-dot {
+      background: var(--success);
+      animation: task-pulse 1.2s ease-in-out infinite;
+    }
+    .session-status-pill.permission-blocked {
+      background: var(--warning-muted);
+      border-color: rgba(169, 106, 47, 0.35);
+      color: var(--warning);
+    }
+    .session-status-pill.permission-blocked .session-status-dot {
+      background: var(--warning);
+      animation: task-pulse 1.2s ease-in-out infinite;
+    }
+    .session-status-pill.exited,
+    .session-status-pill.stopped {
+      color: var(--text-muted);
+    }
+    .session-status-pill.failed {
+      background: var(--danger-muted);
+      border-color: rgba(178, 79, 69, 0.3);
+      color: var(--danger);
+    }
+    .session-status-pill.failed .session-status-dot { background: var(--danger); }
+    .session-status-pill.archived { opacity: 0.7; }
+
+    /* Current task indicator（动态活动徽标，由 updateTaskDisplay 管理） */
     .current-task {
       display: flex;
       align-items: center;
@@ -2252,7 +2394,7 @@
       border-radius: 20px;
       padding: 2px 8px 2px 5px;
       font-weight: 500;
-      max-width: 280px;
+      max-width: 240px;
       min-width: 0;
       overflow: hidden;
       flex-shrink: 1;
@@ -2274,6 +2416,50 @@
       50% { opacity: 0.5; transform: scale(0.8); }
     }
 
+    /* 右段更多菜单 */
+    .topbar-more-wrap {
+      position: relative;
+      display: inline-flex;
+    }
+    .topbar-more-menu {
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      min-width: 168px;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      padding: 4px;
+      box-shadow: var(--shadow-lg);
+      z-index: 60;
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+    .topbar-more-menu.hidden { display: none; }
+    .topbar-more-item {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      width: 100%;
+      padding: 8px 12px;
+      border: 0;
+      background: transparent;
+      color: var(--text-primary);
+      font-family: var(--font-sans);
+      font-size: 0.82rem;
+      font-weight: 500;
+      cursor: pointer;
+      border-radius: 8px;
+      text-align: left;
+      transition: background var(--transition-fast), color var(--transition-fast);
+    }
+    .topbar-more-item:hover { background: var(--accent-muted); color: var(--accent); }
+    .topbar-more-item svg { flex-shrink: 0; opacity: 0.85; }
+    .topbar-more-item.topbar-more-item-danger { color: var(--danger); }
+    .topbar-more-item.topbar-more-item-danger:hover { background: var(--danger-muted); color: var(--danger-hover); }
+    .topbar-more-item.hidden { display: none; }
+
     /* 桌面端显示所有按钮 */
     .terminal-scale-toggle { display: flex; }
     .terminal-tool-btn { display: inline-flex; }
@@ -5539,7 +5725,7 @@
       background: transparent;
       border: none;
       color: var(--text-primary);
-      padding: 8px 10px 3px;
+      padding: 8px 34px 3px 10px;
       outline: none;
       resize: none;
       min-height: 32px;
@@ -5667,6 +5853,159 @@
       transform: scale(0.95);
     }
 
+    /* Prompt optimize button — top-right of the input composer */
+    .prompt-optimize-btn {
+      position: absolute;
+      top: 5px;
+      right: 6px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid rgba(197, 101, 61, 0.22);
+      padding: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, rgba(255, 250, 242, 0.95) 0%, rgba(232, 197, 174, 0.35) 100%);
+      color: var(--accent);
+      z-index: 4;
+      box-shadow: 0 1px 4px rgba(197, 101, 61, 0.10);
+      transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
+    }
+    .prompt-optimize-btn:hover {
+      background: linear-gradient(135deg, rgba(255, 250, 242, 1) 0%, rgba(232, 197, 174, 0.55) 100%);
+      color: var(--accent-hover);
+      transform: scale(1.12);
+      border-color: rgba(197, 101, 61, 0.35);
+      box-shadow: 0 2px 10px rgba(197, 101, 61, 0.22), 0 0 0 3px rgba(197, 101, 61, 0.06);
+    }
+    .prompt-optimize-btn:active {
+      transform: scale(0.92);
+      box-shadow: 0 1px 3px rgba(197, 101, 61, 0.15);
+    }
+    .prompt-optimize-btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+    .prompt-optimize-btn:disabled:hover {
+      transform: none;
+      background: linear-gradient(135deg, rgba(255, 250, 242, 0.95) 0%, rgba(232, 197, 174, 0.35) 100%);
+      box-shadow: 0 1px 4px rgba(197, 101, 61, 0.10);
+      border-color: rgba(197, 101, 61, 0.22);
+    }
+    .prompt-optimize-icon {
+      transition: transform 0.25s ease, opacity 0.2s ease;
+      transform-origin: center;
+      filter: drop-shadow(0 0 1px rgba(197, 101, 61, 0.3));
+    }
+    .prompt-optimize-btn:hover .prompt-optimize-icon {
+      animation: prompt-optimize-twinkle 1.4s ease-in-out infinite;
+      filter: drop-shadow(0 0 3px rgba(197, 101, 61, 0.4));
+    }
+    @keyframes prompt-optimize-twinkle {
+      0%, 100% { transform: rotate(0deg) scale(1); }
+      50% { transform: rotate(12deg) scale(1.12); }
+    }
+    .prompt-optimize-spinner {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      pointer-events: none;
+      opacity: 0;
+      background: conic-gradient(from 0deg, transparent 0deg, var(--accent) 270deg, transparent 360deg);
+      mask: radial-gradient(circle, transparent 10px, black 11px);
+      -webkit-mask: radial-gradient(circle, transparent 10px, black 11px);
+      transition: opacity 0.15s ease;
+    }
+    .prompt-optimize-btn.is-loading {
+      color: var(--accent);
+      background: linear-gradient(135deg, rgba(255, 250, 242, 1) 0%, rgba(232, 197, 174, 0.5) 100%);
+      border-color: rgba(197, 101, 61, 0.4);
+      box-shadow: 0 2px 12px rgba(197, 101, 61, 0.25), 0 0 0 3px rgba(197, 101, 61, 0.08);
+    }
+    .prompt-optimize-btn.is-loading .prompt-optimize-icon {
+      animation: prompt-optimize-pulse 1.1s ease-in-out infinite;
+    }
+    .prompt-optimize-btn.is-loading .prompt-optimize-spinner {
+      opacity: 1;
+      animation: prompt-optimize-spin 0.9s linear infinite;
+    }
+    @keyframes prompt-optimize-spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes prompt-optimize-pulse {
+      0%, 100% { transform: scale(0.88); opacity: 0.8; }
+      50% { transform: scale(1.15); opacity: 1; }
+    }
+
+    /* 优化中的"魔法橡皮擦"：mirror 元素叠在 textarea 上，
+       通过 background-clip: text + color: transparent 让渐变只在
+       字符形状内显示，光斑从左到右滚过文字本身。空白处完全透明，
+       所以观感是"几个字本身在被光扫过"，而不是整个输入框背景在闪。 */
+    .prompt-optimize-shimmer-overlay {
+      position: absolute;
+      pointer-events: none;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      color: transparent;
+      background-image: linear-gradient(
+        100deg,
+        rgba(140, 90, 55, 0.55) 0%,
+        rgba(214, 123, 82, 0.95) 35%,
+        rgba(255, 240, 210, 1) 50%,
+        rgba(214, 123, 82, 0.95) 65%,
+        rgba(140, 90, 55, 0.55) 100%
+      );
+      background-size: 250% 100%;
+      background-repeat: no-repeat;
+      background-position: 250% 0;
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: prompt-optimize-shimmer 1.4s linear infinite;
+      z-index: 2;
+    }
+    @keyframes prompt-optimize-shimmer {
+      from { background-position: 250% 0; }
+      to { background-position: -150% 0; }
+    }
+    /* 优化中保留 textarea 文字原色，让 mirror 在其上扫过；不再整体
+       灰化输入框，避免"整个书窗一起动"的观感。 */
+    .input-textarea.optimize-flash {
+      animation: prompt-optimize-flash 0.85s ease-out;
+    }
+    @keyframes prompt-optimize-flash {
+      0% { background: rgba(197, 101, 61, 0.18); }
+      100% { background: transparent; }
+    }
+    .prompt-optimize-btn.is-shake {
+      animation: prompt-optimize-shake 0.4s ease-out;
+      color: var(--danger);
+    }
+    @keyframes prompt-optimize-shake {
+      0%, 100% { transform: translateX(0); }
+      20% { transform: translateX(-3px); }
+      40% { transform: translateX(3px); }
+      60% { transform: translateX(-2px); }
+      80% { transform: translateX(2px); }
+    }
+
+    @media (max-width: 720px) {
+      .prompt-optimize-btn {
+        width: 26px;
+        height: 26px;
+        top: 3px;
+        right: 4px;
+      }
+      .prompt-optimize-icon {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
     .attachment-preview {
       display: flex;
       gap: 6px;
@@ -6565,6 +6904,12 @@
       .current-task { font-size: 0.5625rem; padding: 1px 6px 1px 4px; gap: 3px; }
 
       .main-header-row { padding: 2px 6px; gap: 4px; }
+      .topbar-brand,
+      .topbar-cwd { display: none; }
+      .topbar-session-title { max-width: 140px; font-size: 0.78rem; }
+      .session-status-pill { font-size: 0.625rem; padding: 1px 7px 1px 5px; max-width: 110px; }
+      .session-status-pill .session-status-dot { width: 5px; height: 5px; }
+      .topbar-more-menu { min-width: 156px; }
 
       /* 视图切换按钮 - 紧凑 */
       .view-toggle { height: 28px; padding: 2px; gap: 1px; }
@@ -6744,7 +7089,7 @@
 
       .input-textarea {
         min-height: 32px;
-        padding: 6px 8px 3px;
+        padding: 6px 30px 3px 8px;
         font-size: 16px;
         line-height: 1.35;
       }
@@ -7070,7 +7415,7 @@
       }
 
       .input-composer { border-radius: 8px; }
-      .input-textarea { min-height: 28px; padding: 5px 6px 2px; font-size: 16px; }
+      .input-textarea { min-height: 28px; padding: 5px 28px 2px 6px; font-size: 16px; }
 
       .btn-circle { width: 28px; height: 28px; min-width: 28px; }
 
@@ -10239,4 +10584,176 @@
       }
     }
 
+    /* ── 顶栏 git 徽章 ── */
+    .topbar-git-slot {
+      display: inline-flex;
+      align-items: center;
+    }
+    .topbar-git-slot:empty {
+      display: none;
+    }
+    .topbar-git-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      height: 32px;
+      padding: 0 10px;
+      font-family: var(--font-sans);
+      font-size: 0.72rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all var(--transition-fast);
+      box-sizing: border-box;
+      line-height: 1;
+    }
+    .topbar-git-badge:hover {
+      background: rgba(255, 255, 255, 0.5);
+      color: var(--text-primary);
+    }
+    .topbar-git-badge:active {
+      transform: scale(0.96);
+    }
+    .topbar-git-icon {
+      flex-shrink: 0;
+      opacity: 0.85;
+    }
+    .topbar-git-branch {
+      font-family: var(--font-mono, monospace);
+      font-weight: 600;
+      max-width: 12em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .topbar-git-count {
+      color: var(--accent);
+      font-weight: 700;
+      font-family: var(--font-mono, monospace);
+    }
+    .topbar-git-clean {
+      color: rgba(60, 160, 90, 0.85);
+      font-weight: 700;
+      font-size: 0.78rem;
+    }
+
+    /* ── 快捷提交模态框 ── */
+    .quick-commit-modal {
+      max-width: 560px;
+    }
+    .quick-commit-modal .modal-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .qc-files-wrap {
+      max-height: 200px;
+      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);
+      font-family: var(--font-mono, monospace);
+      font-size: 0.78rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .qc-empty {
+      color: var(--text-muted);
+      padding: 6px 0;
+      text-align: center;
+      font-style: italic;
+    }
+    .qc-file-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      line-height: 1.5;
+    }
+    .qc-flag {
+      flex-shrink: 0;
+      width: 24px;
+      text-align: center;
+      font-weight: 700;
+      color: var(--text-muted);
+      letter-spacing: 0;
+    }
+    .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-file-path {
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .qc-submodule-badge {
+      flex-shrink: 0;
+      padding: 1px 6px;
+      border-radius: 8px;
+      background: rgba(140, 100, 200, 0.16);
+      color: rgba(110, 70, 180, 0.95);
+      font-size: 0.68rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+    }
+    .qc-checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.85rem;
+      color: var(--text-primary);
+      cursor: pointer;
+      user-select: none;
+    }
+    .qc-checkbox-row input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+    .qc-message-row,
+    .qc-tag-row {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .qc-message-row.hidden,
+    .qc-tag-row.hidden {
+      display: none;
+    }
+    .qc-message-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .qc-message-row textarea {
+      resize: vertical;
+      min-height: 56px;
+      font-family: var(--font-mono, monospace);
+      font-size: 0.85rem;
+    }
+    .quick-commit-modal .worktree-merge-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 4px;
+    }
+
+    @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; }
+    }
+
     /* 结束标记 */