@co0ontty/wand 1.18.12 → 1.21.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;
     }
 
@@ -376,8 +382,9 @@
     /* .sidebar-open class toggled for semantic purposes only; sidebar overlays without resizing main layout */
     .sidebar-open:not(.sidebar-pinned) .input-panel {
       opacity: 0;
+      visibility: hidden;
       pointer-events: none;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.2s ease, visibility 0s linear 0.2s;
     }
 
     /* ===== 侧边栏常驻 ===== */
@@ -2230,6 +2237,52 @@
       gap: 8px;
       position: relative;
     }
+
+    /* 顶部细进度条：会话运行中时流动 */
+    .main-header-row::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      pointer-events: none;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(var(--accent-rgb, 197, 101, 61), 0.85) 35%,
+        rgba(var(--accent-rgb, 197, 101, 61), 1) 50%,
+        rgba(var(--accent-rgb, 197, 101, 61), 0.85) 65%,
+        transparent 100%
+      );
+      background-size: 220% 100%;
+      background-position: 100% center;
+      opacity: 0;
+      transition: opacity 0.25s ease;
+    }
+    .main-header-row.is-running::after {
+      opacity: 1;
+      animation: topbarProgressFlow 1.6s linear infinite;
+    }
+    .main-header-row.is-permission-blocked::after {
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(169, 106, 47, 0.85) 35%,
+        rgba(169, 106, 47, 1) 50%,
+        rgba(169, 106, 47, 0.85) 65%,
+        transparent 100%
+      );
+      background-size: 220% 100%;
+      animation-duration: 2.4s;
+    }
+    @keyframes topbarProgressFlow {
+      0%   { background-position: 100% center; }
+      100% { background-position: -100% center; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .main-header-row.is-running::after { animation: none; opacity: 0.7; }
+    }
     .topbar-left {
       display: flex;
       align-items: center;
@@ -2375,6 +2428,18 @@
     }
     .session-status-pill.failed .session-status-dot { background: var(--danger); }
     .session-status-pill.archived { opacity: 0.7; }
+    /* 运行/思考中状态的累计耗时 */
+    .session-status-pill .session-status-elapsed {
+      flex-shrink: 0;
+      margin-left: 4px;
+      padding-left: 6px;
+      border-left: 1px solid currentColor;
+      opacity: 0.75;
+      font-variant-numeric: tabular-nums;
+      font-family: var(--font-mono, monospace);
+      font-size: 0.65rem;
+      letter-spacing: -0.01em;
+    }
 
     /* Current task indicator（动态活动徽标，由 updateTaskDisplay 管理） */
     .current-task {
@@ -2495,13 +2560,31 @@
       padding: 12px;
       border-radius: 0;
       box-shadow: none;
+      /* PC 端（Windows 125%/150% 缩放、Linux 1× DPR 等）字符渲染特别敏感：
+       * 1) 默认子像素抗锯齿在彩色终端背景下视觉发虚 → 强制灰度抗锯齿；
+       * 2) 等宽字体的连字（liga/calt）和 kerning 会让 ">=" / "->" 等
+       *    字符相邻时实际宽度变化，破坏 wterm 用 "W" 单字符测出的等宽
+       *    假设，累积下来就是字符错列；
+       * 3) text-rendering: geometricPrecision 让浏览器按字形几何排版，
+       *    不再做 optimizeSpeed 的整数像素吸附，配合下面的整数 row-height
+       *    让网格对齐稳定。 */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-rendering: geometricPrecision;
+      font-variant-ligatures: none;
+      font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
+      font-kerning: none;
       --term-fg: #f5eadc;
       --term-bg: transparent;
       --term-cursor: #d67b52;
       --term-font-family: "Geist Mono", "SF Mono", monospace;
       --term-font-size: 13px;
-      --term-line-height: 1.5;
-      --term-row-height: calc(13px * 1.5);
+      /* 行高直接给整数像素，避免 13×1.5=19.5 的亚像素行：PC 端 1× DPR 时
+       * 浏览器把 19.5 四舍五入成 19 或 20，相邻行的吸附方向不一致就会
+       * 出现错位。20px 是 wterm 既定的 cell 高度基线，移动端高 DPR 也
+       * 完全不变。 */
+      --term-line-height: 1.54;
+      --term-row-height: 20px;
       --term-color-0: #1f1b17;
       --term-color-1: #d27766;
       --term-color-2: #7fa36f;
@@ -4858,6 +4941,7 @@
       overscroll-behavior: contain;
       touch-action: pan-y;
       border-top: 1px solid var(--border-subtle);
+      transition: opacity 0.2s ease, visibility 0s;
     }
 
     .input-composer {
@@ -5215,6 +5299,18 @@
     .input-label { font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }
     .input-textarea-wrap { position: relative; width: 100%; }
 
+    /* Composer top row: holds todo collapse bar (left) + reply status bar (right) on one line */
+    .composer-top-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      min-width: 0;
+    }
+    .composer-top-row:has(> .todo-progress:not(.hidden)),
+    .composer-top-row:has(> .structured-status-bar) {
+      margin-bottom: 6px;
+    }
+
     /* Todo progress bar */
     .todo-progress {
       margin-bottom: 6px;
@@ -5223,6 +5319,11 @@
       transition: all var(--transition-fast);
     }
     .todo-progress.hidden { display: none; }
+    .composer-top-row > .todo-progress {
+      flex: 1;
+      min-width: 0;
+      margin-bottom: 0;
+    }
     .todo-progress-header {
       display: flex;
       align-items: center;
@@ -5719,7 +5820,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;
@@ -5758,6 +5859,16 @@
       padding-bottom: 28px;
       min-height: 60px;
     }
+    /* 终端交互模式下 textarea 设为 readonly，按键透传到 PTY。
+       视觉上给一个降饱和度 + 斜体 placeholder，让用户感知到"这里
+       不再录字、键被直接送到终端"，避免疑惑为什么打字没字落下来。 */
+    .input-textarea.is-terminal-passthrough {
+      opacity: 0.7;
+      cursor: default;
+    }
+    .input-textarea.is-terminal-passthrough::placeholder {
+      font-style: italic;
+    }
 
     .input-inline-controls {
     }
@@ -5847,6 +5958,148 @@
       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; }
+    }
+
+    /* 优化中：输入框整体出现柔和的边框光晕 + textarea 区域
+       的横向流光，文字保持原样，不打扰用户阅读。 */
+    .input-composer.is-optimizing {
+      border-color: rgba(197, 101, 61, 0.42);
+      box-shadow:
+        0 0 0 2px rgba(197, 101, 61, 0.10),
+        0 0 18px rgba(197, 101, 61, 0.14);
+    }
+    .input-composer.is-optimizing .input-textarea-wrap::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(
+        100deg,
+        transparent 0%,
+        transparent 38%,
+        rgba(214, 123, 82, 0.16) 50%,
+        transparent 62%,
+        transparent 100%
+      );
+      background-size: 220% 100%;
+      background-repeat: no-repeat;
+      background-position: 220% 0;
+      animation: prompt-optimize-flow 1.6s linear infinite;
+      z-index: 0;
+    }
+    @keyframes prompt-optimize-flow {
+      from { background-position: 220% 0; }
+      to { background-position: -120% 0; }
+    }
+    .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;
@@ -6930,7 +7183,7 @@
 
       .input-textarea {
         min-height: 32px;
-        padding: 6px 8px 3px;
+        padding: 6px 30px 3px 8px;
         font-size: 16px;
         line-height: 1.35;
       }
@@ -7256,7 +7509,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; }
 
@@ -9871,20 +10124,22 @@
       100% { background-position: 100% center; }
     }
 
-    /* ── 结构化会话状态条（输入框右上角） ── */
+    /* ── 结构化会话状态条（与 todo 折叠栏共处一行，靠右） ── */
     .structured-status-bar {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 5px;
-      margin: 0 4px 2px 0;
-      padding: 0;
+      margin: 0;
+      margin-left: auto;
+      padding: 4px 8px;
       background: transparent;
       border: none;
       font-size: 0.6875rem;
       color: var(--text-muted);
       transition: all 0.3s ease;
       overflow: hidden;
+      flex-shrink: 0;
     }
 
     .structured-status-bar .status-bar-dot {
@@ -10425,4 +10680,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; }
+    }
+
     /* 结束标记 */