feat(staged): add purple diff comment theme

apps/staged/src/app.css

@@ -57,7 +57,11 @@
   --diff-modified-bg: rgba(227, 179, 65, 0.08);
   --diff-modified-inline-bg: rgba(227, 179, 65, 0.25);
   --diff-range-border: #524d58;
-  --diff-comment-highlight: rgba(88, 166, 255, 0.5);
+  --diff-comment-highlight: rgba(167, 139, 250, 0.55);
+  --diff-comment-bg: #1b181f;
+  --diff-comment-bg-emphasis: #221e27;
+  --diff-comment-border: rgba(167, 139, 250, 0.56);
+  --diff-comment-accent: #a78bfa;
 
   --search-match-bg: rgba(250, 200, 50, 0.35);
   --search-current-match-bg: rgba(255, 150, 50, 0.5);

apps/staged/src/lib/features/diff/DiffCommentsSection.svelte

@@ -250,7 +250,7 @@
   }
 
   .comment-icon.agent-icon {
-    color: var(--text-faint);
+    color: var(--diff-comment-accent);
   }
 
   .comment-icon.comment-icon-warning {

apps/staged/src/lib/features/diff/DiffModal.svelte

@@ -795,4 +795,41 @@
     min-width: 0;
     overflow: hidden;
   }
+
+  :global(.diff-viewer-container .comment-editor) {
+    background: var(--diff-comment-bg);
+    border-color: var(--diff-comment-border);
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 18%, transparent),
+      0 0 0 3px color-mix(in srgb, var(--diff-comment-accent) 8%, transparent),
+      var(--shadow-elevated);
+  }
+
+  :global(.diff-viewer-container .comment-editor-hint) {
+    background-color: color-mix(in srgb, var(--diff-comment-bg-emphasis) 88%, var(--bg-chrome));
+    border-top: 1px solid color-mix(in srgb, var(--border-muted) 88%, transparent);
+  }
+
+  :global(.diff-viewer-container .comment-textarea::placeholder) {
+    color: color-mix(in srgb, var(--diff-comment-accent) 55%, var(--text-muted));
+  }
+
+  :global(.diff-viewer-container .range-toolbar),
+  :global(.diff-viewer-container .line-selection-toolbar) {
+    background-color: var(--diff-comment-bg);
+    border: 1px solid color-mix(in srgb, var(--diff-comment-border) 88%, transparent);
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--diff-comment-accent) 10%, transparent),
+      var(--shadow-elevated);
+  }
+
+  :global(.diff-viewer-container .range-btn.comment-btn),
+  :global(.diff-viewer-container .selection-info) {
+    color: var(--diff-comment-accent);
+  }
+
+  :global(.diff-viewer-container .range-btn.comment-btn:hover) {
+    color: var(--text-primary);
+    background-color: color-mix(in srgb, var(--diff-comment-accent) 14%, var(--diff-comment-bg));
+  }
 </style>

apps/staged/src/lib/theme.ts

@@ -57,6 +57,10 @@ export interface Theme {
     changedBg: string; // Neutral background for changed lines (not add/remove specific)
     rangeBorder: string; // Border color for change range markers
     commentHighlight: string; // Highlight color for commented regions in spine
+    commentBg: string; // Floating comment editor background
+    commentBgEmphasis: string; // Stronger tint for comment controls
+    commentBorder: string; // Border color for comment surfaces
+    commentAccent: string; // Accent color for comment affordances
   };
 
   // Search highlight colors
@@ -336,12 +340,14 @@ export function createAdaptiveTheme(
   const fallbackGreen = isDark ? '#3fb950' : '#1a7f37';
   const fallbackRed = isDark ? '#f85149' : '#cf222e';
   const fallbackOrange = isDark ? '#d29922' : '#9a6700';
+  const fallbackPurple = isDark ? '#a78bfa' : '#8250df';
 
   // Use theme git colors when available, fallback otherwise
   const accentGreen = gitColors?.added ?? fallbackGreen;
   const accentRed = gitColors?.deleted ?? fallbackRed;
   const accentBlue = gitColors?.modified ?? fallbackBlue;
   const accentOrange = fallbackOrange; // Used for warnings/caution UI elements
+  const accentPurple = fallbackPurple;
 
   // Border that's visible but not harsh
   const borderBase = mix(primaryBg, syntaxFg, isDark ? 0.15 : 0.12);
@@ -386,8 +392,12 @@ export function createAdaptiveTheme(
       changedBg: overlay(syntaxFg, isDark ? 0.08 : 0.1),
       // Range borders need to be visible but not distracting
       rangeBorder: mix(primaryBg, syntaxFg, isDark ? 0.2 : 0.15),
-      // Comment highlight - uses blue accent for "annotation" semantic
-      commentHighlight: overlay(accentBlue, isDark ? 0.5 : 0.4),
+      // Comments use a dedicated purple accent, with mostly neutral surfaces so the border carries the theme.
+      commentHighlight: overlay(accentPurple, isDark ? 0.55 : 0.42),
+      commentBg: mix(chromeColor, accentPurple, isDark ? 0.04 : 0.02),
+      commentBgEmphasis: mix(chromeColor, accentPurple, isDark ? 0.08 : 0.04),
+      commentBorder: mix(primaryBg, accentPurple, isDark ? 0.68 : 0.5),
+      commentAccent: accentPurple,
     },
 
     search: {
@@ -485,6 +495,10 @@ export function themeToVarMap(t: Theme): Record<string, string> {
     '--diff-changed-bg': t.diff.changedBg,
     '--diff-range-border': t.diff.rangeBorder,
     '--diff-comment-highlight': t.diff.commentHighlight,
+    '--diff-comment-bg': t.diff.commentBg,
+    '--diff-comment-bg-emphasis': t.diff.commentBgEmphasis,
+    '--diff-comment-border': t.diff.commentBorder,
+    '--diff-comment-accent': t.diff.commentAccent,
 
     '--search-match-bg': t.search.matchBg,
     '--search-current-match-bg': t.search.currentMatchBg,