fix(ui): address code review feedback

- ChatMessage: use CSS variable syntax for bg-neo-accent and text consistency
- DebugLogViewer: fix info log level to use --color-neo-log-info
- TerminalTabs: use neo-hover-subtle for hover states instead of text color
- globals.css: fix shimmer effect selector to target .neo-progress-fill
- globals.css: fix loading spinner visibility with explicit border color
- globals.css: add will-change for .neo-btn-yolo performance
- App.tsx: group constants after imports
- NewProjectModal: remove redundant styling (neo-card provides these)
- Add tsconfig.tsbuildinfo to .gitignore and remove from tracking

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -128,6 +128,11 @@ pnpm-lock.yaml
 poetry.lock
 Pipfile.lock
 
+# ===================
+# TypeScript
+# ===================
+*.tsbuildinfo
+
 # ===================
 # Misc
 # ===================

ui/src/App.tsx

@@ -4,9 +4,6 @@ import { useProjects, useFeatures, useAgentStatus, useSettings } from './hooks/u
 import { useProjectWebSocket } from './hooks/useWebSocket'
 import { useFeatureSound } from './hooks/useFeatureSound'
 import { useCelebration } from './hooks/useCelebration'
-
-const STORAGE_KEY = 'autocoder-selected-project'
-const DARK_MODE_KEY = 'autocoder-dark-mode'
 import { ProjectSelector } from './components/ProjectSelector'
 import { KanbanBoard } from './components/KanbanBoard'
 import { AgentControl } from './components/AgentControl'
@@ -24,6 +21,9 @@ import { DevServerControl } from './components/DevServerControl'
 import { Loader2, Settings, Moon, Sun } from 'lucide-react'
 import type { Feature } from './lib/types'
 
+const STORAGE_KEY = 'autocoder-selected-project'
+const DARK_MODE_KEY = 'autocoder-dark-mode'
+
 function App() {
   // Initialize selected project from localStorage
   const [selectedProject, setSelectedProject] = useState<string | null>(() => {

ui/src/components/ChatMessage.tsx

@@ -160,7 +160,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
                       onClick={() => window.open(attachment.previewUrl, '_blank')}
                       title={`${attachment.filename} (click to enlarge)`}
                     />
-                    <span className="text-xs text-neo-text-secondary block mt-1 text-center">
+                    <span className="text-xs text-[var(--color-neo-text-secondary)] block mt-1 text-center">
                       {attachment.filename}
                     </span>
                   </div>
@@ -170,7 +170,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
 
             {/* Streaming indicator */}
             {isStreaming && (
-              <span className="inline-block w-2 h-4 bg-neo-accent ml-1 animate-pulse" />
+              <span className="inline-block w-2 h-4 bg-[var(--color-neo-accent)] ml-1 animate-pulse" />
             )}
           </div>
 

ui/src/components/DebugLogViewer.tsx

@@ -284,7 +284,7 @@ export function DebugLogViewer({
         return 'text-[var(--color-neo-log-debug)]'
       case 'info':
       default:
-        return 'text-[var(--color-neo-log-success)]'
+        return 'text-[var(--color-neo-log-info)]'
     }
   }
 

ui/src/components/NewProjectModal.tsx

@@ -317,8 +317,6 @@ export function NewProjectModal({
                   disabled={createProject.isPending}
                   className="
                     w-full text-left p-4
-                    border-3 border-[var(--color-neo-border)]
-                    bg-[var(--color-neo-card)]
                     hover:translate-x-[-2px] hover:translate-y-[-2px]
                     transition-all duration-150
                     disabled:opacity-50 disabled:cursor-not-allowed
@@ -352,8 +350,6 @@ export function NewProjectModal({
                   disabled={createProject.isPending}
                   className="
                     w-full text-left p-4
-                    border-3 border-[var(--color-neo-border)]
-                    bg-[var(--color-neo-card)]
                     hover:translate-x-[-2px] hover:translate-y-[-2px]
                     transition-all duration-150
                     disabled:opacity-50 disabled:cursor-not-allowed

ui/src/components/TerminalTabs.tsx

@@ -165,7 +165,7 @@ export function TerminalTabs({
             ${
               activeTerminalId === terminal.id
                 ? 'bg-neo-progress text-black'
-                : 'bg-[#3a3a3a] text-white hover:bg-neo-text-secondary'
+                : 'bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)]'
             }
           `}
           onClick={() => onSelect(terminal.id)}
@@ -212,7 +212,7 @@ export function TerminalTabs({
       {/* Add new terminal button */}
       <button
         onClick={onCreate}
-        className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-neo-text-secondary transition-colors"
+        className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)] transition-colors"
         title="New terminal"
       >
         <Plus className="w-4 h-4" />

ui/src/styles/globals.css

@@ -320,7 +320,7 @@
     margin: auto;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid currentColor;
+    border: 2px solid var(--color-neo-border);
     border-right-color: transparent;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
@@ -362,6 +362,7 @@
   /* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
   .neo-btn-yolo {
     position: relative;
+    will-change: transform, filter;
     background:
       radial-gradient(ellipse at 20% 80%, rgba(255, 200, 0, 0.4) 0%, transparent 50%),
       radial-gradient(ellipse at 80% 80%, rgba(255, 150, 0, 0.3) 0%, transparent 50%),
@@ -548,7 +549,7 @@
   }
 
   /* Progress Bar Shimmer Effect */
-  .neo-progress-bar::after {
+  .neo-progress-fill::after {
     content: '';
     position: absolute;
     top: 0;

ui/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AddFeatureForm.tsx","./src/components/AgentControl.tsx","./src/components/AgentThought.tsx","./src/components/AssistantChat.tsx","./src/components/AssistantFAB.tsx","./src/components/AssistantPanel.tsx","./src/components/ChatMessage.tsx","./src/components/ConfirmDialog.tsx","./src/components/DebugLogViewer.tsx","./src/components/DevServerControl.tsx","./src/components/EditFeatureForm.tsx","./src/components/ExpandProjectChat.tsx","./src/components/ExpandProjectModal.tsx","./src/components/FeatureCard.tsx","./src/components/FeatureModal.tsx","./src/components/FolderBrowser.tsx","./src/components/KanbanBoard.tsx","./src/components/KanbanColumn.tsx","./src/components/NewProjectModal.tsx","./src/components/ProgressDashboard.tsx","./src/components/ProjectSelector.tsx","./src/components/QuestionOptions.tsx","./src/components/SettingsModal.tsx","./src/components/SetupWizard.tsx","./src/components/SpecCreationChat.tsx","./src/components/Terminal.tsx","./src/components/TerminalTabs.tsx","./src/components/TypingIndicator.tsx","./src/hooks/useAssistantChat.ts","./src/hooks/useCelebration.ts","./src/hooks/useExpandChat.ts","./src/hooks/useFeatureSound.ts","./src/hooks/useProjects.ts","./src/hooks/useSpecChat.ts","./src/hooks/useWebSocket.ts","./src/lib/api.ts","./src/lib/types.ts"],"version":"5.6.3"}