refactor(ui): migrate to shadcn/ui components and fix scroll issues

Migrate UI component library from custom implementations to shadcn/ui:
- Add shadcn/ui primitives (Button, Card, Dialog, Input, etc.)
- Replace custom styles with Tailwind CSS v4 theme configuration
- Remove custom-theme.css in favor of globals.css with @theme directive

Fix scroll overflow issues in multiple components:
- ProjectSelector: "New Project" button no longer overlays project list
- FolderBrowser: folder list now scrolls properly within modal
- AgentCard: log modal content stays within bounds
- ConversationHistory: conversation list scrolls correctly
- KanbanColumn: feature cards scroll within fixed height
- ScheduleModal: schedule form content scrolls properly

Key technical changes:
- Replace ScrollArea component with native overflow-y-auto divs
- Add min-h-0 to flex containers to allow proper shrinking
- Restructure dropdown layouts with flex-col for fixed footers

New files:
- ui/components.json (shadcn/ui configuration)
- ui/src/components/ui/* (20 UI primitive components)
- ui/src/lib/utils.ts (cn utility for class merging)
- ui/tsconfig.app.json (app-specific TypeScript config)

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

ui/src/App.tsx

@@ -27,6 +27,9 @@ import { KeyboardShortcutsHelp } from './components/KeyboardShortcutsHelp'
 import { getDependencyGraph } from './lib/api'
 import { Loader2, Settings, Moon, Sun } from 'lucide-react'
 import type { Feature } from './lib/types'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 const STORAGE_KEY = 'autocoder-selected-project'
 const DARK_MODE_KEY = 'autocoder-dark-mode'
@@ -256,9 +259,9 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-neo-bg">
+    <div className="min-h-screen bg-background">
       {/* Header */}
-      <header className="bg-neo-card text-neo-text border-b-4 border-neo-border">
+      <header className="bg-card text-foreground border-b-2 border-border">
         <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Logo and Title */}
@@ -289,47 +292,49 @@ function App() {
                     url={wsState.devServerUrl}
                   />
 
-                  <button
+                  <Button
                     onClick={() => setShowSettings(true)}
-                    className="neo-btn text-sm py-2 px-3"
+                    variant="outline"
+                    size="sm"
                     title="Settings (,)"
                     aria-label="Open Settings"
                   >
                     <Settings size={18} />
-                  </button>
+                  </Button>
 
                   {/* Ollama Mode Indicator */}
                   {settings?.ollama_mode && (
                     <div
-                      className="flex items-center gap-1.5 px-2 py-1 bg-white rounded border-2 border-neo-border shadow-neo-sm"
+                      className="flex items-center gap-1.5 px-2 py-1 bg-card rounded border-2 border-border shadow-sm"
                       title="Using Ollama local models (configured via .env)"
                     >
                       <img src="/ollama.png" alt="Ollama" className="w-5 h-5" />
-                      <span className="text-xs font-bold text-neo-text">Ollama</span>
+                      <span className="text-xs font-bold text-foreground">Ollama</span>
                     </div>
                   )}
 
                   {/* GLM Mode Badge */}
                   {settings?.glm_mode && (
-                    <span
-                      className="px-2 py-1 text-xs font-bold bg-[var(--color-neo-glm)] text-white rounded border-2 border-neo-border shadow-neo-sm"
+                    <Badge
+                      className="bg-purple-500 text-white hover:bg-purple-600"
                       title="Using GLM API (configured via .env)"
                     >
                       GLM
-                    </span>
+                    </Badge>
                   )}
                 </>
               )}
 
               {/* Dark mode toggle - always visible */}
-              <button
+              <Button
                 onClick={() => setDarkMode(!darkMode)}
-                className="neo-btn text-sm py-2 px-3"
+                variant="outline"
+                size="sm"
                 title="Toggle dark mode"
                 aria-label="Toggle dark mode"
               >
                 {darkMode ? <Sun size={18} /> : <Moon size={18} />}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -341,11 +346,11 @@ function App() {
         style={{ paddingBottom: debugOpen ? debugPanelHeight + 32 : undefined }}
       >
         {!selectedProject ? (
-          <div className="neo-empty-state mt-12">
+          <div className="text-center mt-12">
             <h2 className="font-display text-2xl font-bold mb-2">
               Welcome to AutoCoder
             </h2>
-            <p className="text-neo-text-secondary mb-4">
+            <p className="text-muted-foreground mb-4">
               Select a project from the dropdown above or create a new one to get started.
             </p>
           </div>
@@ -381,15 +386,17 @@ function App() {
              features.in_progress.length === 0 &&
              features.done.length === 0 &&
              wsState.agentStatus === 'running' && (
-              <div className="neo-card p-8 text-center">
-                <Loader2 size={32} className="animate-spin mx-auto mb-4 text-neo-progress" />
-                <h3 className="font-display font-bold text-xl mb-2">
-                  Initializing Features...
-                </h3>
-                <p className="text-neo-text-secondary">
-                  The agent is reading your spec and creating features. This may take a moment.
-                </p>
-              </div>
+              <Card className="p-8 text-center">
+                <CardContent className="p-0">
+                  <Loader2 size={32} className="animate-spin mx-auto mb-4 text-primary" />
+                  <h3 className="font-display font-bold text-xl mb-2">
+                    Initializing Features...
+                  </h3>
+                  <p className="text-muted-foreground">
+                    The agent is reading your spec and creating features. This may take a moment.
+                  </p>
+                </CardContent>
+              </Card>
             )}
 
             {/* View Toggle - only show when there are features */}
@@ -411,7 +418,7 @@ function App() {
                 hasSpec={hasSpec}
               />
             ) : (
-              <div className="neo-card overflow-hidden" style={{ height: '600px' }}>
+              <Card className="overflow-hidden" style={{ height: '600px' }}>
                 {graphData ? (
                   <DependencyGraph
                     graphData={graphData}
@@ -420,10 +427,10 @@ function App() {
                   />
                 ) : (
                   <div className="h-full flex items-center justify-center">
-                    <Loader2 size={32} className="animate-spin text-neo-progress" />
+                    <Loader2 size={32} className="animate-spin text-primary" />
                   </div>
                 )}
-              </div>
+              </Card>
             )}
           </div>
         )}
@@ -461,7 +468,7 @@ function App() {
 
       {/* Spec Creation Chat - for creating spec from empty kanban */}
       {showSpecChat && selectedProject && (
-        <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
+        <div className="fixed inset-0 z-50 bg-background">
           <SpecCreationChat
             projectName={selectedProject}
             onComplete={() => {
@@ -508,14 +515,10 @@ function App() {
       )}
 
       {/* Settings Modal */}
-      {showSettings && (
-        <SettingsModal onClose={() => setShowSettings(false)} />
-      )}
+      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
 
       {/* Keyboard Shortcuts Help */}
-      {showKeyboardHelp && (
-        <KeyboardShortcutsHelp onClose={() => setShowKeyboardHelp(false)} />
-      )}
+      <KeyboardShortcutsHelp isOpen={showKeyboardHelp} onClose={() => setShowKeyboardHelp(false)} />
 
       {/* Celebration Overlay - shows when a feature is completed by an agent */}
       {wsState.celebration && (