cursor-guard 4.3.4 → 4.3.5

package/README.md

@@ -377,6 +377,12 @@ The skill activates on these signals:
 
 ## Changelog
 
+### v4.3.5
+
+- **Fix**: Backup summary now uses incremental `diff-tree` instead of `git status --porcelain` — previously summary always showed cumulative changes since HEAD, now correctly shows changes since the last auto-backup
+- **Improve**: Dashboard backup table "Changes" column uses stacked layout (file count + trigger / intent / detail on separate rows) for better readability
+- **Improve**: Refined color palette — deeper background contrast, softer status colors (green `#4ade80`, amber `#f59e0b`, red `#ef4444`), deeper brand blue `#3b82f6`, wider text hierarchy gap
+
 ### v4.3.4
 
 - **Improve**: Log rotation — `backup.log` now rotates at 1MB, keeping up to 3 old files (`backup.log.1`, `.2`, `.3`). Rotation runs on watcher startup and every 100 writes

package/README.zh-CN.md

@@ -377,6 +377,12 @@ node references\dashboard\server.js --path "D:\MyProject"
 
 ## 更新日志
 
+### v4.3.5
+
+- **修复**：备份摘要（Summary）现使用增量 `diff-tree` 替代 `git status --porcelain`——之前 summary 始终显示自 HEAD 以来的累计差异，现在正确显示自上次 auto-backup 以来的增量变化
+- **改进**：仪表盘备份表格"变更"列改为分层堆叠布局（文件数 + 触发方式 / 意图 / 明细分行显示），可读性更好
+- **改进**：配色优化——背景层级差距加大，状态色柔和（绿 `#4ade80`、琥珀 `#f59e0b`、红 `#ef4444`），品牌蓝加深 `#3b82f6`，文字层级对比更清晰
+
 ### v4.3.4
 
 - **改进**：日志轮转——`backup.log` 超过 1MB 自动轮转，保留最近 3 个旧文件。watcher 启动时和每 100 次写入时检查

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cursor-guard",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "description": "Protects code from accidental AI overwrite or deletion in Cursor IDE — mandatory pre-write snapshots, review-before-apply, local Git safety net, and deterministic recovery. | 保护代码免受 Cursor AI 代理意外覆写或删除——强制写前快照、预览再执行、本地 Git 安全网、确定性恢复。",
   "keywords": [
     "cursor",

package/references/dashboard/public/app.js

@@ -819,22 +819,28 @@ function translateSummary(raw) {
 }
 
 function formatSummaryCell(b) {
-  const parts = [];
-  if (b.filesChanged != null) parts.push(`<span class="text-sm">${b.filesChanged} ${t('summary.files')}</span>`);
-  if (b.trigger) parts.push(`<span class="badge badge-trigger">${t('trigger.' + b.trigger)}</span>`);
-  if (b.summary) {
-    const translated = translateSummary(b.summary);
-    const short = translated.length > 80 ? translated.substring(0, 77) + '...' : translated;
-    parts.push(`<span class="text-muted text-sm">${esc(short)}</span>`);
-  }
+  const line1 = [];
+  if (b.filesChanged != null) line1.push(`<span class="summary-files">${b.filesChanged} ${t('summary.files')}</span>`);
+  if (b.trigger) line1.push(`<span class="badge badge-trigger">${t('trigger.' + b.trigger)}</span>`);
+
+  let line2 = '';
   if (b.intent) {
-    const intentShort = b.intent.length > 60 ? b.intent.substring(0, 57) + '...' : b.intent;
-    parts.push(`<span class="badge badge-intent">${esc(intentShort)}</span>`);
+    const intentShort = b.intent.length > 70 ? b.intent.substring(0, 67) + '...' : b.intent;
+    line2 = `<div class="summary-intent">${esc(intentShort)}</div>`;
   } else if (b.message && !b.message.startsWith('guard:')) {
-    const msgShort = b.message.length > 50 ? b.message.substring(0, 47) + '...' : b.message;
-    parts.push(`<span class="text-muted text-sm">${esc(msgShort)}</span>`);
+    const msgShort = b.message.length > 70 ? b.message.substring(0, 67) + '...' : b.message;
+    line2 = `<div class="summary-message">${esc(msgShort)}</div>`;
   }
-  return parts.length > 0 ? parts.join(' ') : '<span class="text-muted text-sm">-</span>';
+
+  let line3 = '';
+  if (b.summary) {
+    const translated = translateSummary(b.summary);
+    const short = translated.length > 90 ? translated.substring(0, 87) + '...' : translated;
+    line3 = `<div class="summary-detail">${esc(short)}</div>`;
+  }
+
+  if (!line1.length && !line2 && !line3) return '<span class="text-muted text-sm">-</span>';
+  return `<div class="summary-stack">${line1.length ? '<div class="summary-meta">' + line1.join(' ') + '</div>' : ''}${line2}${line3}</div>`;
 }
 
 function renderBackupTable(backups) {

package/references/dashboard/public/style.css

@@ -1,37 +1,50 @@
 /* ═══════════════════════════════════════════════════════════════
-   Cursor Guard Dashboard — Ops Console Theme
+   Cursor Guard Dashboard — Ops Console Theme v2
    ═══════════════════════════════════════════════════════════════ */
 
 :root {
-  --bg-primary:   #0f172a;
-  --bg-secondary: #1e293b;
-  --bg-tertiary:  #334155;
-  --bg-hover:     rgba(148,163,184,.08);
-  --border:       #334155;
-  --border-subtle:#1e293b;
-
-  --text-primary:   #f1f5f9;
-  --text-secondary: #94a3b8;
-  --text-tertiary:  #64748b;
-
-  --green:    #22c55e;
-  --green-bg: rgba(34,197,94,.12);
-  --yellow:    #eab308;
-  --yellow-bg: rgba(234,179,8,.12);
+  --bg-primary:   #0a0f1a;
+  --bg-secondary: #141c2b;
+  --bg-tertiary:  #1e293b;
+  --bg-elevated:  #182030;
+  --bg-hover:     rgba(148,163,184,.06);
+
+  --border:       rgba(71,85,105,.5);
+  --border-subtle:rgba(71,85,105,.25);
+  --border-glow:  rgba(59,130,246,.2);
+
+  --text-primary:   #cbd5e1;
+  --text-secondary: #8b9cb7;
+  --text-tertiary:  #475569;
+  --text-heading:   #f8fafc;
+
+  --green:    #4ade80;
+  --green-bg: rgba(74,222,128,.12);
+  --green-glow: rgba(74,222,128,.2);
+  --yellow:    #f59e0b;
+  --yellow-bg: rgba(245,158,11,.12);
+  --yellow-glow: rgba(245,158,11,.2);
   --red:    #ef4444;
   --red-bg: rgba(239,68,68,.12);
+  --red-glow: rgba(239,68,68,.2);
   --blue:    #3b82f6;
   --blue-bg: rgba(59,130,246,.12);
-  --purple:    #a855f7;
-  --purple-bg: rgba(168,85,247,.12);
+  --blue-glow: rgba(59,130,246,.2);
+  --purple:    #a78bfa;
+  --purple-bg: rgba(167,139,250,.12);
   --amber:    #f59e0b;
   --amber-bg: rgba(245,158,11,.12);
   --gray:    #64748b;
   --gray-bg: rgba(100,116,139,.12);
 
-  --radius: 8px;
-  --topbar-h: 52px;
-  --drawer-w: 480px;
+  --radius: 10px;
+  --radius-sm: 6px;
+  --topbar-h: 56px;
+  --drawer-w: 500px;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
+  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
+  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
+  --transition: .2s cubic-bezier(.4,0,.2,1);
 }
 
 /* ── Reset ────────────────────────────────────────────────── */
@@ -39,13 +52,17 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.6;
   color: var(--text-primary);
   background: var(--bg-primary);
+  background-image:
+    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59,130,246,.06), transparent),
+    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(74,222,128,.03), transparent);
   padding-top: var(--topbar-h);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* ── Top Bar ──────────────────────────────────────────────── */
@@ -54,12 +71,14 @@ body {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: var(--topbar-h);
-  background: var(--bg-secondary);
+  background: rgba(14,19,30,.85);
+  backdrop-filter: blur(16px) saturate(1.5);
+  -webkit-backdrop-filter: blur(16px) saturate(1.5);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 24px;
   z-index: 50;
   gap: 12px;
 }
@@ -70,67 +89,89 @@ body {
   gap: 10px;
 }
 
-.logo-icon { color: var(--green); flex-shrink: 0; }
-.logo-text { font-weight: 600; font-size: 15px; white-space: nowrap; }
+.logo-icon {
+  color: var(--green);
+  flex-shrink: 0;
+  filter: drop-shadow(0 0 6px var(--green-glow));
+}
+.logo-text {
+  font-weight: 700;
+  font-size: 15px;
+  white-space: nowrap;
+  letter-spacing: -.01em;
+  color: var(--text-heading);
+}
 
 #project-select {
   background: var(--bg-tertiary);
   color: var(--text-primary);
   border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
   font-size: 13px;
-  max-width: 200px;
+  max-width: 220px;
   cursor: pointer;
+  transition: border-color var(--transition);
 }
-#project-select:focus { outline: 1px solid var(--blue); }
+#project-select:hover { border-color: var(--blue); }
+#project-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
 
-#last-refresh { font-size: 12px; white-space: nowrap; }
+#last-refresh { font-size: 12px; white-space: nowrap; opacity: .7; }
 
 /* ── Buttons ──────────────────────────────────────────────── */
 
 .btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  padding: 6px 12px;
+  gap: 6px;
+  padding: 7px 14px;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--bg-tertiary);
   color: var(--text-primary);
   font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
-  transition: background .15s;
+  transition: all var(--transition);
   white-space: nowrap;
 }
-.btn:hover { background: var(--bg-hover); }
+.btn:hover {
+  background: rgba(59,130,246,.1);
+  border-color: rgba(59,130,246,.3);
+  color: var(--text-heading);
+}
+.btn:active { transform: scale(.97); }
 
 .btn-ghost {
   background: transparent;
   border-color: transparent;
 }
-.btn-ghost:hover { background: var(--bg-hover); }
+.btn-ghost:hover {
+  background: var(--bg-hover);
+  border-color: transparent;
+}
 
-.btn-sm { padding: 3px 8px; font-size: 12px; }
+.btn-sm { padding: 4px 10px; font-size: 12px; }
 
 /* ── Main ─────────────────────────────────────────────────── */
 
 main {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 24px 20px 60px;
+  padding: 28px 24px 60px;
 }
 
 /* ── Sections ─────────────────────────────────────────────── */
 
-.screen { margin-bottom: 40px; }
+.screen { margin-bottom: 44px; }
 
 .section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 16px;
-  letter-spacing: .02em;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-tertiary);
+  margin-bottom: 18px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
 }
 
 /* ── Card Grid ────────────────────────────────────────────── */
@@ -138,45 +179,66 @@ main {
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 14px;
+  gap: 16px;
 }
 
 .card {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 16px 20px;
-  transition: transform .15s, box-shadow .15s;
+  padding: 18px 22px;
+  transition: all var(--transition);
+  position: relative;
+  overflow: hidden;
+}
+.card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius);
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(59,130,246,.1), transparent 50%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition);
 }
 .card:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,.25);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-glow);
 }
+.card:hover::before { opacity: 1; }
 
 .card-health {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 18px;
   flex-wrap: wrap;
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
 }
 
 .card-label {
-  font-size: 11px;
-  font-weight: 600;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: .06em;
+  letter-spacing: .1em;
   color: var(--text-tertiary);
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .card-value {
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1.2;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -.02em;
+  color: var(--text-heading);
 }
 
-.card-detail { margin-top: 6px; }
+.card-detail { margin-top: 8px; }
 
 .card-empty {
   color: var(--text-tertiary);
@@ -192,22 +254,27 @@ main {
   display: inline-block;
   width: 10px; height: 10px;
   border-radius: 50%;
-  margin-right: 6px;
+  margin-right: 8px;
   flex-shrink: 0;
 }
-.status-dot.status-healthy  { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.status-dot.status-warning  { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
-.status-dot.status-critical { background: var(--red); box-shadow: 0 0 6px var(--red); }
-.status-dot.status-unknown  { background: var(--gray); }
-.status-dot.status-running  { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.status-dot.status-stopped  { background: var(--gray); }
-.status-dot.status-stale    { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
+.status-dot.status-healthy  { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
+.status-dot.status-warning  { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow), 0 0 2px var(--yellow); animation: pulse-yellow 2s ease-in-out infinite; }
+.status-dot.status-critical { background: var(--red); box-shadow: 0 0 8px var(--red-glow), 0 0 2px var(--red); animation: pulse-red 1.5s ease-in-out infinite; }
+.status-dot.status-unknown  { background: var(--gray); opacity: .6; }
+.status-dot.status-running  { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
+.status-dot.status-stopped  { background: var(--gray); opacity: .6; }
+.status-dot.status-stale    { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow); }
+
+@keyframes pulse-green  { 0%,100%{ box-shadow: 0 0 4px var(--green-glow); } 50%{ box-shadow: 0 0 12px var(--green-glow), 0 0 4px var(--green); } }
+@keyframes pulse-yellow { 0%,100%{ box-shadow: 0 0 4px var(--yellow-glow); } 50%{ box-shadow: 0 0 12px var(--yellow-glow), 0 0 4px var(--yellow); } }
+@keyframes pulse-red    { 0%,100%{ box-shadow: 0 0 4px var(--red-glow); } 50%{ box-shadow: 0 0 14px var(--red-glow), 0 0 6px var(--red); } }
 
 .card-status {
   display: flex;
   align-items: center;
-  font-size: 18px;
-  font-weight: 700;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -.01em;
 }
 
 .status-text.status-healthy  { color: var(--green); }
@@ -217,13 +284,21 @@ main {
 
 .issue-list {
   list-style: none;
-  margin-top: 8px;
-  padding-left: 16px;
+  margin-top: 10px;
+  padding-left: 18px;
+}
+.issue-list li {
+  position: relative;
+  padding: 2px 0;
+  font-size: 13px;
 }
 .issue-list li::before {
-  content: '•';
-  color: var(--yellow);
-  margin-right: 6px;
+  content: '';
+  position: absolute;
+  left: -14px; top: 10px;
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  background: var(--yellow);
 }
 
 /* ── Badges ───────────────────────────────────────────────── */
@@ -231,57 +306,92 @@ main {
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
-  border-radius: 10px;
+  padding: 3px 10px;
+  border-radius: 12px;
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: .03em;
+  letter-spacing: .02em;
+  border: 1px solid transparent;
 }
 
-.badge-strategy { background: var(--blue-bg); color: var(--blue); }
+.badge-strategy { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
 
-.badge-pass { background: var(--green-bg); color: var(--green); }
-.badge-warn { background: var(--yellow-bg); color: var(--yellow); }
-.badge-fail { background: var(--red-bg); color: var(--red); }
+.badge-pass { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.18); }
+.badge-warn { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(245,158,11,.18); }
+.badge-fail { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,.18); }
 
-.badge-git     { background: var(--blue-bg); color: var(--blue); }
-.badge-shadow  { background: var(--amber-bg); color: var(--amber); }
-.badge-pre     { background: var(--purple-bg); color: var(--purple); }
-.badge-trigger { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.7rem; }
-.badge-intent  { background: var(--blue-bg); color: var(--blue); font-size: 0.7rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
+.badge-git     { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
+.badge-shadow  { background: var(--amber-bg); color: var(--amber); border-color: rgba(245,158,11,.18); }
+.badge-pre     { background: var(--purple-bg); color: var(--purple); border-color: rgba(167,139,250,.18); }
+.badge-trigger { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.7rem; border-color: var(--border-subtle); }
+.badge-intent  { background: var(--blue-bg); color: var(--blue); font-size: 0.7rem; border-color: rgba(59,130,246,.18); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
 
-.backup-summary-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.backup-summary-cell .badge-trigger { margin-right: 4px; }
-.backup-summary-cell .badge-intent  { margin-left: 4px; }
-.backup-summary-cell .text-sm { font-size: 0.75rem; }
+.backup-summary-cell { max-width: 400px; }
+
+.summary-stack { display: flex; flex-direction: column; gap: 4px; }
+.summary-meta { display: flex; align-items: center; gap: 6px; }
+.summary-files { font-size: 13px; font-weight: 600; color: var(--text-heading); }
+.summary-intent {
+  font-size: 12px;
+  color: var(--blue);
+  background: var(--blue-bg);
+  padding: 2px 8px;
+  border-radius: 3px;
+  border-left: 2px solid var(--blue);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 380px;
+}
+.summary-message {
+  font-size: 12px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 380px;
+}
+.summary-detail {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 380px;
+}
 
 /* ── Stats Row ────────────────────────────────────────────── */
 
 .stats-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 16px;
+  gap: 14px;
+  margin-bottom: 18px;
 }
 
 .stat-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 12px 16px;
-  min-width: 140px;
+  padding: 14px 18px;
+  min-width: 150px;
   flex: 1;
+  transition: border-color var(--transition);
 }
+.stat-card:hover { border-color: var(--border-glow); }
 .stat-label {
-  font-size: 11px;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: .05em;
+  letter-spacing: .08em;
   color: var(--text-tertiary);
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 .stat-value {
-  font-size: 20px;
-  font-weight: 700;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -.02em;
+  color: var(--text-heading);
 }
 
 /* ── Filter Bar ───────────────────────────────────────────── */
@@ -289,25 +399,31 @@ main {
 .filter-bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 14px;
 }
 
 .filter-btn {
-  padding: 4px 10px;
+  padding: 5px 14px;
   border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: 16px;
   background: transparent;
   color: var(--text-secondary);
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
-  transition: all .15s;
+  transition: all var(--transition);
+}
+.filter-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: rgba(100,116,139,.3);
 }
-.filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
 .filter-btn.active {
   background: var(--blue-bg);
   color: var(--blue);
-  border-color: var(--blue);
+  border-color: rgba(59,130,246,.35);
+  font-weight: 600;
 }
 
 /* ── Table ────────────────────────────────────────────────── */
@@ -317,7 +433,7 @@ main {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: auto;
-  max-height: 420px;
+  max-height: 440px;
 }
 
 .data-table {
@@ -327,115 +443,140 @@ main {
 }
 .data-table th {
   text-align: left;
-  padding: 10px 14px;
-  font-weight: 600;
-  font-size: 11px;
+  padding: 12px 16px;
+  font-weight: 700;
+  font-size: 10px;
   text-transform: uppercase;
-  letter-spacing: .05em;
+  letter-spacing: .08em;
   color: var(--text-tertiary);
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
-  background: var(--bg-secondary);
+  background: var(--bg-elevated);
+  z-index: 2;
 }
 .data-table td {
-  padding: 8px 14px;
-  border-bottom: 1px solid rgba(51,65,85,.4);
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
   vertical-align: top;
 }
-.data-table tbody tr { cursor: pointer; transition: background .1s; }
-.data-table tbody tr:hover { background: var(--bg-hover); }
+.data-table tbody tr {
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.data-table tbody tr:hover {
+  background: rgba(59,130,246,.05);
+}
+.data-table tbody tr:nth-child(even) {
+  background: rgba(255,255,255,.015);
+}
+.data-table tbody tr:nth-child(even):hover {
+  background: rgba(59,130,246,.05);
+}
 
 /* ── Protection ───────────────────────────────────────────── */
 
 .protection-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
+  gap: 16px;
 }
 
 .pattern-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 16px;
+  padding: 18px;
+  transition: border-color var(--transition);
 }
+.pattern-card:hover { border-color: var(--border-glow); }
 .pattern-card h4 {
-  font-size: 12px;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: .05em;
+  letter-spacing: .08em;
   color: var(--text-tertiary);
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .pattern-list {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 .pattern-item {
-  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   font-size: 12px;
   background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: 3px;
-  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  padding: 3px 10px;
+  border-radius: 4px;
+  color: var(--blue);
+  transition: border-color var(--transition);
 }
+.pattern-item:hover { border-color: var(--blue); }
 
 .protection-note {
-  margin-top: 14px;
+  margin-top: 16px;
   font-size: 12px;
   color: var(--text-tertiary);
   font-style: italic;
+  line-height: 1.5;
 }
 
 .protection-count {
-  margin-top: 12px;
+  margin-top: 14px;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
+  color: var(--text-heading);
 }
 
 /* ── Diagnostics Summary ──────────────────────────────────── */
 
 .diag-summary {
-  background: var(--bg-secondary);
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 16px 20px;
+  padding: 20px 24px;
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 24px;
   cursor: pointer;
-  transition: transform .15s, box-shadow .15s;
+  transition: all var(--transition);
 }
 .diag-summary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,.25);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--border-glow);
 }
 
 .diag-counts {
   display: flex;
-  gap: 12px;
+  gap: 16px;
 }
 .diag-count {
   text-align: center;
+  min-width: 48px;
 }
 .diag-count .num {
-  font-size: 24px;
-  font-weight: 700;
+  font-size: 26px;
+  font-weight: 800;
   display: block;
+  letter-spacing: -.02em;
 }
 .diag-count .label {
-  font-size: 11px;
+  font-size: 10px;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: .04em;
+  letter-spacing: .06em;
 }
 
 .diag-hint {
   margin-left: auto;
   font-size: 12px;
   color: var(--text-tertiary);
+  opacity: .7;
 }
 
 /* ── Drawer ───────────────────────────────────────────────── */
@@ -443,11 +584,12 @@ main {
 .drawer-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,.5);
+  background: rgba(0,0,0,.6);
+  backdrop-filter: blur(4px);
   z-index: 100;
   opacity: 0;
   visibility: hidden;
-  transition: opacity .2s, visibility .2s;
+  transition: opacity .25s, visibility .25s;
 }
 .drawer-overlay.active {
   opacity: 1;
@@ -461,12 +603,13 @@ main {
   max-width: 92vw;
   background: var(--bg-secondary);
   border-left: 1px solid var(--border);
+  box-shadow: -8px 0 32px rgba(0,0,0,.4);
   z-index: 101;
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   visibility: hidden;
-  transition: transform .25s ease, visibility .25s;
+  transition: transform .3s cubic-bezier(.32,.72,0,1), visibility .3s;
 }
 .drawer.active {
   transform: translateX(0);
@@ -477,99 +620,113 @@ main {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
+  padding: 18px 24px;
   border-bottom: 1px solid var(--border);
 }
-.drawer-header h3 { font-size: 15px; font-weight: 600; }
+.drawer-header h3 {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-heading);
+}
 
 .drawer-close {
   background: none;
   border: none;
-  color: var(--text-secondary);
-  font-size: 22px;
+  color: var(--text-tertiary);
+  font-size: 24px;
   cursor: pointer;
   padding: 0 4px;
   line-height: 1;
+  transition: color var(--transition);
+  border-radius: 4px;
 }
-.drawer-close:hover { color: var(--text-primary); }
+.drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
 
 .drawer-body {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 24px;
 }
 
 /* ── Drawer: Restore Point ────────────────────────────────── */
 
 .restore-field {
-  margin-bottom: 14px;
+  margin-bottom: 16px;
 }
 .restore-field-label {
-  font-size: 11px;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: .05em;
+  letter-spacing: .08em;
   color: var(--text-tertiary);
-  margin-bottom: 3px;
+  margin-bottom: 4px;
 }
 .restore-field-value {
   font-size: 14px;
   word-break: break-all;
+  line-height: 1.5;
 }
 
 .restore-actions {
   display: flex;
   gap: 8px;
-  margin-top: 20px;
-  padding-top: 16px;
+  margin-top: 24px;
+  padding-top: 18px;
   border-top: 1px solid var(--border);
 }
 
 .json-preview {
   margin-top: 16px;
-  padding: 12px;
+  padding: 14px;
   background: var(--bg-primary);
-  border-radius: 4px;
-  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-all;
   max-height: 300px;
   overflow: auto;
   color: var(--text-secondary);
+  line-height: 1.6;
 }
 
 /* ── Drawer: Doctor Checks ────────────────────────────────── */
 
 .check-item {
-  border-bottom: 1px solid rgba(51,65,85,.4);
+  border-bottom: 1px solid var(--border-subtle);
 }
 .check-item:last-child { border-bottom: none; }
 
 .check-item summary {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 0;
+  gap: 10px;
+  padding: 12px 0;
   cursor: pointer;
   list-style: none;
   font-size: 13px;
+  transition: color var(--transition);
 }
+.check-item summary:hover { color: var(--text-heading); }
 .check-item summary::-webkit-details-marker { display: none; }
 .check-item summary::before {
   content: '▸';
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-tertiary);
-  transition: transform .15s;
-  width: 12px;
+  transition: transform .2s ease;
+  width: 14px;
   text-align: center;
+  flex-shrink: 0;
 }
 .check-item[open] summary::before { transform: rotate(90deg); }
 
-.check-name { flex: 1; }
+.check-name { flex: 1; font-weight: 500; }
 .check-detail {
-  padding: 0 0 10px 20px;
+  padding: 0 0 12px 24px;
   font-size: 12px;
   color: var(--text-secondary);
+  line-height: 1.6;
 }
 
 /* ── State panels ─────────────────────────────────────────── */
@@ -579,27 +736,28 @@ main {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  min-height: 320px;
   text-align: center;
   color: var(--text-secondary);
 }
 
 .error-icon {
-  font-size: 36px;
-  margin-bottom: 12px;
+  font-size: 40px;
+  margin-bottom: 14px;
   color: var(--yellow);
+  filter: drop-shadow(0 0 8px var(--yellow-glow));
 }
 
 .error-panel {
   text-align: center;
-  padding: 40px 20px;
+  padding: 48px 24px;
   color: var(--text-tertiary);
 }
-.error-panel .error-icon { font-size: 28px; margin-bottom: 8px; }
+.error-panel .error-icon { font-size: 32px; margin-bottom: 10px; }
 
 .empty-state {
   text-align: center;
-  padding: 32px 16px;
+  padding: 36px 20px;
   color: var(--text-tertiary);
   font-style: italic;
 }
@@ -607,12 +765,12 @@ main {
 /* ── Spinner ──────────────────────────────────────────────── */
 
 .spinner {
-  width: 32px; height: 32px;
+  width: 36px; height: 36px;
   border: 3px solid var(--border);
   border-top-color: var(--blue);
   border-radius: 50%;
-  animation: spin .8s linear infinite;
-  margin-bottom: 12px;
+  animation: spin .7s linear infinite;
+  margin-bottom: 14px;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
@@ -624,7 +782,7 @@ main {
 
 .text-muted { color: var(--text-secondary); }
 .text-sm    { font-size: 12px; }
-.text-mono  { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
+.text-mono  { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
 
 .flex-between { display: flex; align-items: center; justify-content: space-between; }
 .gap-4 { gap: 4px; }
@@ -632,19 +790,20 @@ main {
 
 .copy-toast {
   position: fixed;
-  bottom: 24px;
+  bottom: 28px;
   left: 50%;
   transform: translateX(-50%) translateY(20px);
   background: var(--green);
   color: #000;
-  padding: 6px 16px;
-  border-radius: 4px;
+  padding: 8px 20px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 700;
   opacity: 0;
-  transition: opacity .2s, transform .2s;
+  transition: opacity .25s, transform .25s;
   z-index: 200;
   pointer-events: none;
+  box-shadow: 0 4px 16px rgba(74,222,128,.3);
 }
 .copy-toast.show {
   opacity: 1;
@@ -658,12 +817,19 @@ main {
 ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
 
+/* ── Selection ───────────────────────────────────────────── */
+
+::selection {
+  background: rgba(59,130,246,.3);
+  color: var(--text-heading);
+}
+
 /* ── Responsive ───────────────────────────────────────────── */
 
 @media (max-width: 768px) {
-  #topbar { padding: 0 12px; gap: 8px; }
+  #topbar { padding: 0 14px; gap: 8px; }
   .logo-text { display: none; }
-  main { padding: 16px 12px 40px; }
+  main { padding: 18px 14px 40px; }
   .card-grid { grid-template-columns: 1fr; }
   .card-health { grid-column: auto; }
   .protection-grid { grid-template-columns: 1fr; }

package/references/lib/auto-backup.js

@@ -276,39 +276,6 @@ async function runBackup(projectDir, intervalOverride) {
     // Git snapshot via Core
     if ((cfg.backup_strategy === 'git' || cfg.backup_strategy === 'both') && repo) {
       const context = { trigger: 'auto', changedFileCount };
-      if (porcelain) {
-        let pLines = porcelain.split('\n').filter(Boolean);
-        if (cfg.protect.length > 0 || cfg.ignore.length > 0) {
-          pLines = pLines.filter(line => {
-            const filePart = line.substring(3);
-            const arrowIdx = filePart.indexOf(' -> ');
-            const raw = arrowIdx >= 0 ? filePart.substring(arrowIdx + 4) : filePart;
-            const rel = unquoteGitPath(raw);
-            const fakeFile = { rel, full: path.join(projectDir, rel) };
-            return filterFiles([fakeFile], cfg).length > 0;
-          });
-        }
-        if (pLines.length > 0) {
-          const groups = { M: [], A: [], D: [], R: [] };
-          for (const l of pLines) {
-            const code = l.substring(0, 2).trim();
-            const filePart = l.substring(3);
-            const arrowIdx = filePart.indexOf(' -> ');
-            const file = arrowIdx >= 0 ? filePart.substring(arrowIdx + 4) : filePart;
-            const key = code.startsWith('R') ? 'R'
-              : code.includes('D') ? 'D'
-              : code.includes('A') || code === '??' ? 'A'
-              : 'M';
-            groups[key].push(file);
-          }
-          const parts = [];
-          if (groups.M.length) parts.push(`Modified ${groups.M.length}: ${groups.M.slice(0, 5).join(', ')}`);
-          if (groups.A.length) parts.push(`Added ${groups.A.length}: ${groups.A.slice(0, 5).join(', ')}`);
-          if (groups.D.length) parts.push(`Deleted ${groups.D.length}: ${groups.D.slice(0, 5).join(', ')}`);
-          if (groups.R.length) parts.push(`Renamed ${groups.R.length}: ${groups.R.slice(0, 5).join(', ')}`);
-          context.summary = parts.join('; ');
-        }
-      }
       const snapResult = createGitSnapshot(projectDir, cfg, { branchRef, context });
       if (snapResult.status === 'created') {
         let msg = `Git snapshot ${snapResult.shortHash} (${snapResult.fileCount} files)`;

package/references/lib/core/snapshot.js

@@ -138,6 +138,46 @@ function createGitSnapshot(projectDir, cfg, opts = {}) {
       return { status: 'skipped', reason: 'tree unchanged' };
     }
 
+    // Build incremental summary from actual tree diff (not working-dir status)
+    let changedCount;
+    let incrementalSummary;
+    if (parentTree) {
+      const diffOut = git(['diff-tree', '--no-commit-id', '--name-status', '-r', parentTree, newTree], { cwd, allowFail: true });
+      if (diffOut) {
+        const diffLines = diffOut.split('\n').filter(Boolean);
+        changedCount = diffLines.length;
+        const groups = { M: [], A: [], D: [], R: [] };
+        for (const line of diffLines) {
+          const tab = line.indexOf('\t');
+          if (tab < 0) continue;
+          const code = line.substring(0, tab).trim();
+          const filePart = line.substring(tab + 1);
+          const key = code.startsWith('R') ? 'R'
+            : code === 'D' ? 'D'
+            : code === 'A' ? 'A'
+            : 'M';
+          const fileName = filePart.split('\t').pop();
+          groups[key].push(fileName);
+        }
+        const parts = [];
+        if (groups.M.length) parts.push(`Modified ${groups.M.length}: ${groups.M.slice(0, 5).join(', ')}`);
+        if (groups.A.length) parts.push(`Added ${groups.A.length}: ${groups.A.slice(0, 5).join(', ')}`);
+        if (groups.D.length) parts.push(`Deleted ${groups.D.length}: ${groups.D.slice(0, 5).join(', ')}`);
+        if (groups.R.length) parts.push(`Renamed ${groups.R.length}: ${groups.R.slice(0, 5).join(', ')}`);
+        if (parts.length) incrementalSummary = parts.join('; ');
+      }
+    }
+
+    // Override context summary with the accurate incremental one
+    if (incrementalSummary && opts.context) {
+      opts.context.summary = incrementalSummary;
+    } else if (incrementalSummary && !opts.context) {
+      opts.context = { summary: incrementalSummary };
+    }
+    if (changedCount != null && opts.context) {
+      opts.context.changedFileCount = changedCount;
+    }
+
     const ts = formatTimestamp(new Date());
     const msg = buildCommitMessage(ts, opts);
     const commitArgs = parentHash
@@ -154,18 +194,13 @@ function createGitSnapshot(projectDir, cfg, opts = {}) {
     const lsOut = git(['ls-tree', '--name-only', '-r', newTree], { cwd, allowFail: true });
     const fileCount = lsOut ? lsOut.split('\n').filter(Boolean).length : 0;
 
-    let changedCount;
-    if (parentTree) {
-      const diff = git(['diff-tree', '--no-commit-id', '--name-only', '-r', parentTree, newTree], { cwd, allowFail: true });
-      changedCount = diff ? diff.split('\n').filter(Boolean).length : 0;
-    }
-
     return {
       status: 'created',
       commitHash,
       shortHash: commitHash.substring(0, 7),
       fileCount,
       changedCount,
+      incrementalSummary,
       secretsExcluded: secretsExcluded.length > 0 ? secretsExcluded : undefined,
     };
   } catch (e) {