@toolr/ui-design 0.1.8 → 0.1.9

package/components/sections/{ai-tools-paths/tools-paths-panel.tsx → coding-agent-paths/agent-paths-panel.tsx}

@@ -1,25 +1,25 @@
 /**
- * ToolsPathsPanel — AI tool binary path configuration panel
+ * AgentPathsPanel — Coding agent binary path configuration panel
  *
- * Part of: Sections > AI Tools Paths
+ * Part of: Sections > Coding Agent Paths
  *
  * This is the main "drop in and it works" component. Provide an API adapter,
- * tool configs, and a change callback — it handles the full detection and
+ * agent configs, and a change callback — it handles the full detection and
  * configuration UI.
  *
  * Usage:
- *   <ToolsPathsPanel
- *     api={toolsPathsApi}
- *     tools={toolConfigs}
- *     onToolConfigChange={(id, partial) => updateTool(id, partial)}
+ *   <AgentPathsPanel
+ *     api={agentPathsApi}
+ *     agents={agentConfigs}
+ *     onAgentConfigChange={(id, partial) => updateAgent(id, partial)}
  *   />
  *
  * AI agent notes:
- * - Replicates the configr Settings > AI Tools > Paths page layout
- * - Each tool row shows: icon, name, status badge, toggle, path input, refresh
- * - The component manages detection state internally via useToolsPaths hook
- * - Tool configs (enabled, path, detected) are owned by the consumer
- * - The renderToolIcon prop allows each app to provide its own tool icons
+ * - Replicates the configr Settings > Coding Agents > Paths page layout
+ * - Each agent row shows: icon, name, status badge, toggle, path input, refresh
+ * - The component manages detection state internally via useAgentPaths hook
+ * - Agent configs (enabled, path, detected) are owned by the consumer
+ * - The renderAgentIcon prop allows each app to provide its own agent icons
  * - Uses ui-design components (Input, Toggle, IconButton, Tooltip)
  */
 
@@ -29,40 +29,47 @@ import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { Toggle } from '../../ui/toggle.tsx'
 import { IconButton } from '../../ui/icon-button.tsx'
-import { useToolsPaths } from './use-tools-paths.ts'
-import type { AiToolConfig, ToolsPathsApi } from './types.ts'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
+import { useAgentPaths } from './use-agent-paths.ts'
+import type { CodingAgentConfig, AgentPathsApi } from './types.ts'
 
-export interface ToolsPathsPanelProps {
+export interface AgentPathsPanelProps {
   /** API adapter for backend operations (detection, validation) */
-  api: ToolsPathsApi
-  /** Current tool configurations */
-  tools: AiToolConfig[]
-  /** Called when a tool's config changes. Consumer updates their state. */
-  onToolConfigChange: (toolId: string, config: Partial<AiToolConfig>) => void
-  /** Optional render function for tool icons. Receives tool ID, returns ReactNode. */
-  renderToolIcon?: (toolId: string) => ReactNode
+  api: AgentPathsApi
+  /** Current agent configurations */
+  agents: CodingAgentConfig[]
+  /** Called when an agent's config changes. Consumer updates their state. */
+  onAgentConfigChange: (agentId: string, config: Partial<CodingAgentConfig>) => void
+  /** Optional render function for agent icons. Receives agent ID, returns ReactNode. */
+  renderAgentIcon?: (agentId: string) => ReactNode
+  accentColor?: FormColor
   className?: string
 }
 
-export function ToolsPathsPanel({
+export function AgentPathsPanel({
   api,
-  tools,
-  onToolConfigChange,
-  renderToolIcon,
+  agents,
+  onAgentConfigChange,
+  renderAgentIcon,
+  accentColor,
   className,
-}: ToolsPathsPanelProps) {
+}: AgentPathsPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const {
     isDetecting,
     hasScanned,
-    refreshingTools,
-    scannedTools,
+    refreshingAgents,
+    scannedAgents,
     detectAll,
-    detectTool,
+    detectAgent,
     validateAndUpdatePath,
     toggleEnabled,
-  } = useToolsPaths({ api, tools, onToolConfigChange })
+  } = useAgentPaths({ api, agents, onAgentConfigChange })
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('w-full', className)}>
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
@@ -83,40 +90,40 @@ export function ToolsPathsPanel({
           onClick={detectAll}
           disabled={isDetecting}
           size="sm"
-          color={hasScanned ? 'green' : 'neutral'}
+          accentColor={hasScanned ? 'green' : 'neutral'}
           tooltip={{
-            title: hasScanned ? 'Scan complete' : 'Scan for tools',
-            description: hasScanned ? 'CLI tools detected' : 'Auto-detect CLI tool locations',
+            title: hasScanned ? 'Scan complete' : 'Scan for agents',
+            description: hasScanned ? 'CLI agents detected' : 'Auto-detect CLI agent locations',
           }}
         />
       </div>
 
-      {/* Tool list */}
-      <div className="bg-neutral-900 border border-neutral-700 rounded-lg divide-y divide-neutral-700">
-        {tools.map((tool) => {
-          const isRefreshing = refreshingTools.has(tool.id)
-          const isEnabled = tool.enabled
-          const displayPath = tool.binaryPath || tool.detectedPath || ''
-          const hasBeenScanned = scannedTools.has(tool.id) && tool.detected
+      {/* Agent list */}
+      <div className="bg-neutral-980 border border-neutral-700 rounded-lg divide-y divide-neutral-700">
+        {agents.map((agent) => {
+          const isRefreshing = refreshingAgents.has(agent.id)
+          const isEnabled = agent.enabled
+          const displayPath = agent.binaryPath || agent.detectedPath || ''
+          const hasBeenScanned = scannedAgents.has(agent.id) && agent.detected
 
           return (
             <div
-              key={tool.id}
-              className={cn('p-4 space-y-2', !tool.detected && 'opacity-60')}
+              key={agent.id}
+              className={cn('p-4 space-y-2', !agent.detected && 'opacity-60')}
             >
               {/* Name + status + toggle row */}
               <div className="flex items-center justify-between">
                 <div className="relative flex items-center gap-2">
-                  {renderToolIcon?.(tool.id)}
+                  {renderAgentIcon?.(agent.id)}
                   <span
                     className={cn(
                       'font-medium',
-                      tool.detected && !isEnabled ? 'text-neutral-500' : 'text-neutral-300',
+                      agent.detected && !isEnabled ? 'text-neutral-500' : 'text-neutral-300',
                     )}
                   >
-                    {tool.name}
+                    {agent.name}
                   </span>
-                  {tool.detected && !isEnabled && (
+                  {agent.detected && !isEnabled && (
                     <div
                       className="absolute inset-0 flex items-center pointer-events-none"
                       aria-hidden="true"
@@ -126,7 +133,7 @@ export function ToolsPathsPanel({
                   )}
                 </div>
                 <div className="flex items-center gap-3">
-                  {tool.detected ? (
+                  {agent.detected ? (
                     <span className="flex items-center gap-1 text-sm text-green-400">
                       <Check className="w-3.5 h-3.5" />
                       Installed
@@ -137,10 +144,10 @@ export function ToolsPathsPanel({
                       Not Found
                     </span>
                   )}
-                  {tool.detected && (
+                  {agent.detected && (
                     <Toggle
                       checked={isEnabled}
-                      onChange={() => toggleEnabled(tool.id)}
+                      onChange={() => toggleEnabled(agent.id)}
                     />
                   )}
                 </div>
@@ -153,8 +160,8 @@ export function ToolsPathsPanel({
                   <div className="flex-1">
                     <Input
                       value={displayPath}
-                      onChange={(newPath) => validateAndUpdatePath(tool.id, newPath)}
-                      placeholder={`/usr/local/bin/${tool.id}`}
+                      onChange={(newPath) => validateAndUpdatePath(agent.id, newPath)}
+                      placeholder={`/usr/local/bin/${agent.id}`}
                       size="sm"
                       className={displayPath ? 'text-white' : 'text-neutral-400'}
                     />
@@ -169,38 +176,38 @@ export function ToolsPathsPanel({
                         <RefreshCw className="w-3 h-3 text-neutral-300" />
                       )
                     }
-                    onClick={() => detectTool(tool.id)}
+                    onClick={() => detectAgent(agent.id)}
                     disabled={isRefreshing}
-                    color={hasBeenScanned ? 'green' : 'neutral'}
+                    accentColor={hasBeenScanned ? 'green' : 'neutral'}
                     size="sm"
                     tooltipPosition="bottom"
                     tooltip={{
-                      title: hasBeenScanned ? 'Scan complete' : `Scan for ${tool.name}`,
-                      description: hasBeenScanned ? 'Click to re-scan' : 'Check if CLI tool is installed',
+                      title: hasBeenScanned ? 'Scan complete' : `Scan for ${agent.name}`,
+                      description: hasBeenScanned ? 'Click to re-scan' : 'Check if CLI agent is installed',
                     }}
                   />
                 </div>
 
                 {/* Helper text */}
-                {isEnabled && !displayPath?.includes('/') && !tool.detected && (
+                {isEnabled && !displayPath?.includes('/') && !agent.detected && (
                   <p className="text-sm text-red-400 pl-5">
                     Path required when enabled. Enter full path to binary.
                   </p>
                 )}
-                {tool.detected && !tool.binaryPath && (
+                {agent.detected && !agent.binaryPath && (
                   <p className="text-sm text-neutral-500 pl-5">Using auto-detected path</p>
                 )}
-                {!isEnabled && !displayPath?.includes('/') && !tool.detected && (
+                {!isEnabled && !displayPath?.includes('/') && !agent.detected && (
                   <p className="text-sm text-neutral-500 pl-5">
-                    Tool disabled. Enter path to enable.
+                    Agent disabled. Enter path to enable.
                   </p>
                 )}
               </div>
 
               {/* Disabled warning */}
-              {tool.detected && !isEnabled && (
+              {agent.detected && !isEnabled && (
                 <p className="text-sm text-yellow-500">
-                  Tool disabled — enable to use in your workflow
+                  Agent disabled — enable to use in your workflow
                 </p>
               )}
             </div>
@@ -208,5 +215,6 @@ export function ToolsPathsPanel({
         })}
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/sections/coding-agent-paths/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Coding Agent Paths — Section barrel export
+ *
+ * This section provides a complete, reusable coding agent binary path configuration
+ * panel. It handles agent detection, path validation, enable/disable toggles,
+ * and per-agent refresh — all via an API adapter interface.
+ *
+ * File structure:
+ * - agent-paths-panel.tsx — Main panel component (drop-in usage)
+ * - use-agent-paths.ts    — Detection state & actions hook (used by panel, also standalone)
+ * - types.ts              — Shared types and API adapter interface
+ *
+ * Quick start for consuming apps:
+ *   import { AgentPathsPanel, type AgentPathsApi, type CodingAgentConfig } from '@toolr/ui-design'
+ *
+ *   const api: AgentPathsApi = {
+ *     detectAll: () => invoke('detect_all_agents'),
+ *     detectAgent: (id) => invoke('detect_agent', { agentId: id }),
+ *     validatePath: (path) => invoke('validate_binary_path', { path }),
+ *   }
+ *
+ *   <AgentPathsPanel
+ *     api={api}
+ *     agents={agentConfigs}
+ *     onAgentConfigChange={(id, partial) => updateAgent(id, partial)}
+ *     renderAgentIcon={(id) => <CodingAgentIcon agent={id} size={20} />}
+ *   />
+ */
+
+// Main panel component
+export { AgentPathsPanel, type AgentPathsPanelProps } from './agent-paths-panel.tsx'
+
+// Hook for custom UIs
+export { useAgentPaths, type UseAgentPathsOptions, type UseAgentPathsReturn } from './use-agent-paths.ts'
+
+// Types and API interface
+export type { CodingAgentConfig, AgentDetectionResult, AgentPathsApi } from './types.ts'

package/components/sections/{ai-tools-paths → coding-agent-paths}/types.ts

@@ -1,7 +1,7 @@
 /**
- * AI Tools Paths — Shared type definitions
+ * Coding Agent Paths — Shared type definitions
  *
- * Part of: Sections > AI Tools Paths
+ * Part of: Sections > Coding Agent Paths
  *
  * These types define the CONTRACT between the UI layer (this package) and
  * the Rust/Tauri backend that each app must implement. Every type here has
@@ -13,27 +13,27 @@
  * to match these TypeScript interfaces.
  *
  * Generic design:
- * - Tools are keyed by string ID (not hardcoded to specific tools)
+ * - Agents are keyed by string ID (not hardcoded to specific agents)
  * - Configr uses: "claude", "gemini", "copilot", "codex", "opencode"
- * - Other apps can define their own tool sets
- * - The UI renders whatever tools the consumer provides
+ * - Other apps can define their own agent sets
+ * - The UI renders whatever agents the consumer provides
  */
 
 // ---------------------------------------------------------------------------
-// Tool configuration
+// Agent configuration
 // ---------------------------------------------------------------------------
 
-/** Per-tool configuration state */
-export interface AiToolConfig {
-  /** Unique identifier for the tool (e.g. "claude", "gemini") */
+/** Per-agent configuration state */
+export interface CodingAgentConfig {
+  /** Unique identifier for the agent (e.g. "claude", "gemini") */
   id: string
   /** Display name (e.g. "Claude Code", "Gemini CLI") */
   name: string
-  /** Whether the tool is enabled for use */
+  /** Whether the agent is enabled for use */
   enabled: boolean
   /** User-configured or auto-detected binary path */
   binaryPath: string
-  /** Whether the tool was found during detection */
+  /** Whether the agent was found during detection */
   detected: boolean
   /** Path found by auto-detection (may differ from binaryPath if user overrode it) */
   detectedPath?: string
@@ -43,8 +43,8 @@ export interface AiToolConfig {
 // Detection results
 // ---------------------------------------------------------------------------
 
-/** Result of detecting a single tool's binary */
-export interface ToolDetectionResult {
+/** Result of detecting a single agent's binary */
+export interface AgentDetectionResult {
   /** Whether the binary was found */
   detected: boolean
   /** Resolved path to the binary, if found */
@@ -56,7 +56,7 @@ export interface ToolDetectionResult {
 // ---------------------------------------------------------------------------
 
 /**
- * ToolsPathsApi — The callback interface that each app must implement.
+ * AgentPathsApi — The callback interface that each app must implement.
  *
  * This is the bridge between the shared UI and the app-specific backend.
  * Each function maps to a Tauri command (or any other backend).
@@ -73,12 +73,12 @@ export interface ToolDetectionResult {
  * │ REQUIRED Tauri commands for full functionality:                      │
  * │                                                                     │
  * │ DETECTION:                                                          │
- * │   detect_all_tools() → Record<string, ToolDetectionResult>          │
- * │     Scans PATH and known install locations for all tool binaries.    │
- * │     Returns a map of tool ID → detection result.                    │
+ * │   detect_all_agents() → Record<string, AgentDetectionResult>        │
+ * │     Scans PATH and known install locations for all agent binaries.   │
+ * │     Returns a map of agent ID → detection result.                   │
  * │                                                                     │
- * │   detect_tool(toolId) → ToolDetectionResult                         │
- * │     Scans for a single tool binary. Used for per-tool refresh.      │
+ * │   detect_agent(agentId) → AgentDetectionResult                      │
+ * │     Scans for a single agent binary. Used for per-agent refresh.    │
  * │                                                                     │
  * │ VALIDATION:                                                         │
  * │   validate_binary_path(path) → bool                                 │
@@ -86,25 +86,25 @@ export interface ToolDetectionResult {
  * │     Typically: fs::metadata(path).is_ok() && is_executable(path)    │
  * │                                                                     │
  * │ DETECTION STRATEGY (Rust backend should implement):                 │
- * │ 1. Check PATH environment variable (which <tool-binary>)            │
+ * │ 1. Check PATH environment variable (which <agent-binary>)           │
  * │ 2. Check common install locations:                                  │
  * │    - /usr/local/bin/<binary>                                        │
  * │    - /opt/homebrew/bin/<binary>                                      │
  * │    - ~/.local/bin/<binary>                                           │
- * │    - ~/.cargo/bin/<binary> (for Rust-based tools)                    │
- * │    - ~/.npm/bin/<binary> (for npm-based tools)                       │
- * │ 3. Check tool-specific locations:                                   │
+ * │    - ~/.cargo/bin/<binary> (for Rust-based agents)                   │
+ * │    - ~/.npm/bin/<binary> (for npm-based agents)                      │
+ * │ 3. Check agent-specific locations:                                  │
  * │    - Claude: ~/.claude/bin/claude                                    │
  * │    - Copilot: gh extension path                                     │
  * │ 4. Return first valid path found, or detected: false                │
  * └─────────────────────────────────────────────────────────────────────┘
  */
-export interface ToolsPathsApi {
-  /** Scan all tools and return detection results keyed by tool ID */
-  detectAll: () => Promise<Record<string, ToolDetectionResult>>
+export interface AgentPathsApi {
+  /** Scan all agents and return detection results keyed by agent ID */
+  detectAll: () => Promise<Record<string, AgentDetectionResult>>
 
-  /** Scan a single tool and return its detection result */
-  detectTool: (toolId: string) => Promise<ToolDetectionResult>
+  /** Scan a single agent and return its detection result */
+  detectAgent: (agentId: string) => Promise<AgentDetectionResult>
 
   /** Check if a given binary path is valid (exists and is executable) */
   validatePath: (path: string) => Promise<boolean>

package/components/sections/coding-agent-paths/use-agent-paths.ts

@@ -0,0 +1,159 @@
+/**
+ * useAgentPaths — Agent detection and configuration state hook
+ *
+ * Part of: Sections > Coding Agent Paths
+ *
+ * Manages agent detection state, per-agent refresh tracking, and path validation.
+ * Used internally by AgentPathsPanel but can also be used standalone for
+ * custom UIs.
+ *
+ * AI agent notes:
+ * - This hook does NOT store agent configs — the consumer owns that state.
+ *   It only manages detection/scanning ephemeral state.
+ * - The hook tracks which agents have been scanned, which are currently
+ *   refreshing, and whether a full scan has completed.
+ * - Path validation is debounced by the consumer (typically on blur or
+ *   after typing stops).
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+import type { CodingAgentConfig, AgentPathsApi, AgentDetectionResult } from './types.ts'
+
+export interface UseAgentPathsOptions {
+  api: AgentPathsApi
+  agents: CodingAgentConfig[]
+  onAgentConfigChange: (agentId: string, config: Partial<CodingAgentConfig>) => void
+}
+
+export interface UseAgentPathsReturn {
+  /** Whether a full scan is in progress */
+  isDetecting: boolean
+  /** Whether a full scan has completed at least once */
+  hasScanned: boolean
+  /** Set of agent IDs currently being individually refreshed */
+  refreshingAgents: Set<string>
+  /** Set of agent IDs that were found during the last scan */
+  scannedAgents: Set<string>
+  /** Run detection for all agents */
+  detectAll: () => Promise<void>
+  /** Run detection for a single agent */
+  detectAgent: (agentId: string) => Promise<void>
+  /** Validate and update an agent's binary path */
+  validateAndUpdatePath: (agentId: string, path: string) => Promise<void>
+  /** Toggle an agent's enabled state */
+  toggleEnabled: (agentId: string) => void
+}
+
+export function useAgentPaths({ api, agents, onAgentConfigChange }: UseAgentPathsOptions): UseAgentPathsReturn {
+  const [isDetecting, setIsDetecting] = useState(false)
+  const [hasScanned, setHasScanned] = useState(false)
+  const [refreshingAgents, setRefreshingAgents] = useState<Set<string>>(new Set())
+  const [scannedAgents, setScannedAgents] = useState<Set<string>>(new Set())
+  const wasDetectingRef = useRef(false)
+
+  // Track when full detection completes
+  useEffect(() => {
+    if (wasDetectingRef.current && !isDetecting) {
+      setHasScanned(true)
+    }
+    wasDetectingRef.current = isDetecting
+  }, [isDetecting])
+
+  const detectAll = useCallback(async () => {
+    setIsDetecting(true)
+    try {
+      const results = await api.detectAll()
+      const detected = new Set<string>()
+
+      for (const agent of agents) {
+        const result = results[agent.id]
+        if (result) {
+          onAgentConfigChange(agent.id, {
+            detected: result.detected,
+            detectedPath: result.path,
+            binaryPath: result.path || agent.binaryPath,
+          })
+          if (result.detected) {
+            detected.add(agent.id)
+          }
+        }
+      }
+
+      setScannedAgents(detected)
+    } finally {
+      setIsDetecting(false)
+    }
+  }, [api, agents, onAgentConfigChange])
+
+  const detectAgent = useCallback(async (agentId: string) => {
+    setRefreshingAgents((prev) => new Set(prev).add(agentId))
+    try {
+      const result: AgentDetectionResult = await api.detectAgent(agentId)
+      onAgentConfigChange(agentId, {
+        detected: result.detected,
+        detectedPath: result.path,
+        binaryPath: result.path || '',
+      })
+      setScannedAgents((prev) => {
+        const next = new Set(prev)
+        if (result.detected) {
+          next.add(agentId)
+        } else {
+          next.delete(agentId)
+        }
+        return next
+      })
+    } finally {
+      setRefreshingAgents((prev) => {
+        const next = new Set(prev)
+        next.delete(agentId)
+        return next
+      })
+    }
+  }, [api, onAgentConfigChange])
+
+  const validateAndUpdatePath = useCallback(async (agentId: string, path: string) => {
+    onAgentConfigChange(agentId, { binaryPath: path })
+    setScannedAgents((prev) => {
+      const next = new Set(prev)
+      next.delete(agentId)
+      return next
+    })
+    setHasScanned(false)
+
+    if (path.trim()) {
+      try {
+        const isValid = await api.validatePath(path.trim())
+        onAgentConfigChange(agentId, {
+          binaryPath: path.trim(),
+          detected: isValid,
+          detectedPath: isValid ? path.trim() : undefined,
+        })
+      } catch {
+        onAgentConfigChange(agentId, {
+          binaryPath: path.trim(),
+          detected: false,
+          detectedPath: undefined,
+        })
+      }
+    }
+  }, [api, onAgentConfigChange])
+
+  const toggleEnabled = useCallback((agentId: string) => {
+    const agent = agents.find((a) => a.id === agentId)
+    if (agent) {
+      onAgentConfigChange(agentId, { enabled: !agent.enabled })
+    }
+  }, [agents, onAgentConfigChange])
+
+  return {
+    isDetecting,
+    hasScanned,
+    refreshingAgents,
+    scannedAgents,
+    detectAll,
+    detectAgent,
+    validateAndUpdatePath,
+    toggleEnabled,
+  }
+}

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -81,7 +81,7 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
   return (
     <div
       className={`flex items-center transition-colors ${
-        isSelected ? 'bg-neutral-700' : 'hover:bg-neutral-850'
+        isSelected ? 'bg-neutral-700' : 'hover:bg-neutral-970'
       }`}
     >
       <button
@@ -105,7 +105,7 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
             onClick={() => onReset(file)}
             disabled={anyResetting}
             size="xs"
-            color="orange"
+            accentColor="orange"
             tooltip={{ title: 'Reset file', description: 'Reset this file to golden' }}
           />
         </div>
@@ -166,7 +166,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
     // Root-level nodes get colored styling, nested folders get muted styling
     const headerClasses = isRoot
       ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-md font-medium`
-      : 'text-neutral-500 hover:bg-neutral-850 px-3 py-1.5'
+      : 'text-neutral-500 hover:bg-neutral-970 px-3 py-1.5'
 
     const chevronSize = isRoot ? 'w-4 h-4' : 'w-3 h-3'
 
@@ -219,7 +219,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
   }
 
   return (
-    <div className="w-72 flex-shrink-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
+    <div className="w-72 flex-shrink-0 bg-neutral-980 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
       {/* Summary Header */}
       <div className="p-3 border-b border-neutral-700 flex-shrink-0">
         <div className="flex gap-3 text-sm">
@@ -252,7 +252,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
             icon={allExpanded ? <ChevronsDownUp className="w-3.5 h-3.5" /> : <ChevronsUpDown className="w-3.5 h-3.5" />}
             onClick={allExpanded ? handleCollapseAll : handleExpandAll}
             size="sm"
-            color="neutral"
+            accentColor="neutral"
             tooltip={{
               title: allExpanded ? 'Collapse All' : 'Expand All',
               description: allExpanded ? 'Collapse all folders' : 'Expand all folders',
@@ -294,7 +294,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
 
   if (!selectedDiffFile) {
     return (
-      <div className="flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
+      <div className="flex-1 min-w-0 bg-neutral-980 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
         <div className="flex items-center justify-center h-full text-md text-neutral-500">
           Select a file from the tree to view differences
         </div>
@@ -305,7 +305,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
   const compLabel = componentLabels?.[selectedDiffFile.component] ?? selectedDiffFile.component
 
   return (
-    <div className="flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
+    <div className="flex-1 min-w-0 bg-neutral-980 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
       {/* File Header */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-neutral-700 flex-shrink-0">
         <div className="flex items-center gap-2">
@@ -386,7 +386,7 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
               <IconButton
                 icon={diffSideBySide ? <Rows2 /> : <Columns2 />}
                 onClick={() => setDiffSideBySide((prev: boolean) => !prev)}
-                color="blue"
+                accentColor="neutral"
                 tooltip={{ title: diffSideBySide ? 'Inline view' : 'Side by side', description: 'Toggle diff display mode' }}
               />
               {devtools && hasUnsavedChanges && (
@@ -394,7 +394,7 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
                   icon={<Save className={saving ? 'animate-spin' : ''} />}
                   onClick={handleSaveLiveFile}
                   disabled={saving}
-                  color="amber"
+                  accentColor="green"
                   tooltip={{ title: 'Save changes', description: 'Save edited content to live file' }}
                 />
               )}
@@ -404,6 +404,7 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
       </div>
 
       {diffLoading ? (
+        /* py-8: empty/loading states need extra vertical breathing room beyond the p-6 scale max */
         <div className="text-md text-neutral-500 text-center py-8">Loading diff...</div>
       ) : diff ? (
         <div className="flex gap-4 flex-1 min-h-[400px]">