diff --git a/ui/index.html b/ui/index.html index e566b9a..afbdba2 100644 --- a/ui/index.html +++ b/ui/index.html @@ -7,7 +7,7 @@ AutoCoder - +
diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 50b0297..0ddcbbe 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -6,6 +6,7 @@ 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' @@ -20,7 +21,7 @@ import { AssistantPanel } from './components/AssistantPanel' import { ExpandProjectModal } from './components/ExpandProjectModal' import { SettingsModal } from './components/SettingsModal' import { DevServerControl } from './components/DevServerControl' -import { Loader2, Settings } from 'lucide-react' +import { Loader2, Settings, Moon, Sun } from 'lucide-react' import type { Feature } from './lib/types' function App() { @@ -42,6 +43,13 @@ function App() { const [assistantOpen, setAssistantOpen] = useState(false) const [showSettings, setShowSettings] = useState(false) const [isSpecCreating, setIsSpecCreating] = useState(false) + const [darkMode, setDarkMode] = useState(() => { + try { + return localStorage.getItem(DARK_MODE_KEY) === 'true' + } catch { + return false + } + }) const queryClient = useQueryClient() const { data: projects, isLoading: projectsLoading } = useProjects() @@ -50,6 +58,20 @@ function App() { useAgentStatus(selectedProject) // Keep polling for status updates const wsState = useProjectWebSocket(selectedProject) + // Apply dark mode class to document + useEffect(() => { + if (darkMode) { + document.documentElement.classList.add('dark') + } else { + document.documentElement.classList.remove('dark') + } + try { + localStorage.setItem(DARK_MODE_KEY, String(darkMode)) + } catch { + // localStorage not available + } + }, [darkMode]) + // Play sounds when features move between columns useFeatureSound(features) @@ -170,9 +192,9 @@ function App() { } return ( -
+
{/* Header */} -
+
{/* Logo and Title */} @@ -215,7 +237,7 @@ function App() { {/* GLM Mode Badge */} {settings?.glm_mode && ( GLM @@ -223,6 +245,16 @@ function App() { )} )} + + {/* Dark mode toggle - always visible */} +
@@ -238,7 +270,7 @@ function App() {

Welcome to AutoCoder

-

+

Select a project from the dropdown above or create a new one to get started.

@@ -265,11 +297,11 @@ function App() { features.done.length === 0 && wsState.agentStatus === 'running' && (
- +

Initializing Features...

-

+

The agent is reading your spec and creating features. This may take a moment.

diff --git a/ui/src/components/AddFeatureForm.tsx b/ui/src/components/AddFeatureForm.tsx index 16e7b7e..834022c 100644 --- a/ui/src/components/AddFeatureForm.tsx +++ b/ui/src/components/AddFeatureForm.tsx @@ -87,13 +87,13 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
{/* Error Message */} {error && ( -
+
{error} @@ -166,8 +166,11 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
{steps.map((step, index) => ( -
- +
+ {index + 1} +