diff --git a/apps/ui/src/components/command-palette/command-palette.tsx b/apps/ui/src/components/command-palette/command-palette.tsx new file mode 100644 index 00000000..fa7d36a1 --- /dev/null +++ b/apps/ui/src/components/command-palette/command-palette.tsx @@ -0,0 +1,163 @@ +import { useCallback, useEffect, useState } from 'react'; +import { useNavigate } from '@tanstack/react-router'; +import { useAppStore } from '@/store/app-store'; +import { + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, +} from '@/components/ui/command'; +import { + Plus, + Sparkles, + Play, + Square, + FileText, + FolderOpen, + Terminal, + Bot, + Settings, + Github, + BookOpen, + Wand2, + Search, + LayoutGrid, +} from 'lucide-react'; + +interface CommandPaletteProps { + open: boolean; + onOpenChange: (open: boolean) => void; +} + +export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) { + const navigate = useNavigate(); + const { currentProject, getAutoModeState, setAutoModeRunning } = useAppStore(); + + const autoModeState = currentProject ? getAutoModeState(currentProject.id) : null; + const isAutoModeRunning = autoModeState?.isRunning ?? false; + + const runCommand = useCallback( + (command: () => void) => { + onOpenChange(false); + command(); + }, + [onOpenChange] + ); + + const handleNavigate = useCallback( + (path: string) => { + runCommand(() => navigate({ to: path })); + }, + [navigate, runCommand] + ); + + const handleToggleAutoMode = useCallback(() => { + if (currentProject) { + runCommand(() => setAutoModeRunning(currentProject.id, !isAutoModeRunning)); + } + }, [currentProject, isAutoModeRunning, setAutoModeRunning, runCommand]); + + return ( + + + + No results found. + + {currentProject && ( + <> + + handleNavigate('/board')}> + + Add Feature + + handleNavigate('/ideation')}> + + Generate Ideas + + + {isAutoModeRunning ? ( + <> + + Stop Auto Mode + + ) : ( + <> + + Start Auto Mode + + )} + + + + + + + handleNavigate('/board')}> + + Kanban Board + + handleNavigate('/running-agents')}> + + Running Agents + + handleNavigate('/terminal')}> + + Terminal + + + + + + + handleNavigate('/spec')}> + + App Specification + + handleNavigate('/context')}> + + Context Files + + handleNavigate('/github-issues')}> + + GitHub Issues + + handleNavigate('/github-prs')}> + + Pull Requests + + + + + + )} + + + handleNavigate('/profiles')}> + + AI Profiles + + handleNavigate('/settings')}> + + Settings + + handleNavigate('/wiki')}> + + Documentation + + + + + + + handleNavigate('/dashboard')}> + + All Projects + + + + + ); +} diff --git a/apps/ui/src/components/command-palette/index.ts b/apps/ui/src/components/command-palette/index.ts new file mode 100644 index 00000000..8ec0f783 --- /dev/null +++ b/apps/ui/src/components/command-palette/index.ts @@ -0,0 +1 @@ +export { CommandPalette } from './command-palette'; diff --git a/apps/ui/src/components/dialogs/onboarding-wizard/index.ts b/apps/ui/src/components/dialogs/onboarding-wizard/index.ts new file mode 100644 index 00000000..77f9c55b --- /dev/null +++ b/apps/ui/src/components/dialogs/onboarding-wizard/index.ts @@ -0,0 +1 @@ +export { OnboardingWizard } from './onboarding-wizard'; diff --git a/apps/ui/src/components/dialogs/onboarding-wizard/onboarding-wizard.tsx b/apps/ui/src/components/dialogs/onboarding-wizard/onboarding-wizard.tsx new file mode 100644 index 00000000..2805aa6d --- /dev/null +++ b/apps/ui/src/components/dialogs/onboarding-wizard/onboarding-wizard.tsx @@ -0,0 +1,386 @@ +import { useState, useCallback } from 'react'; +import { useNavigate } from '@tanstack/react-router'; +import { cn } from '@/lib/utils'; +import { useAppStore, type ThemeMode } from '@/store/app-store'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { Switch } from '@/components/ui/switch'; +import { Slider } from '@/components/ui/slider'; +import { + FolderOpen, + FileText, + Sparkles, + ArrowRight, + ArrowLeft, + Check, + Loader2, +} from 'lucide-react'; +import { getElectronAPI } from '@/lib/electron'; +import { initializeProject, hasAutomakerDir, hasAppSpec } from '@/lib/project-init'; +import { toast } from 'sonner'; + +type OnboardingStep = 'select-folder' | 'project-name' | 'app-spec' | 'complete'; +type OnboardingMode = 'new' | 'existing'; + +interface OnboardingWizardProps { + open: boolean; + onOpenChange: (open: boolean) => void; + mode: OnboardingMode; + initialPath?: string; +} + +export function OnboardingWizard({ open, onOpenChange, mode, initialPath }: OnboardingWizardProps) { + const navigate = useNavigate(); + const { + upsertAndSetCurrentProject, + theme: globalTheme, + trashedProjects, + setSpecCreatingForProject, + } = useAppStore(); + + const [step, setStep] = useState(initialPath ? 'project-name' : 'select-folder'); + const [projectPath, setProjectPath] = useState(initialPath || ''); + const [projectName, setProjectName] = useState(''); + const [projectOverview, setProjectOverview] = useState(''); + const [generateFeatures, setGenerateFeatures] = useState(true); + const [featureCount, setFeatureCount] = useState(5); + const [isProcessing, setIsProcessing] = useState(false); + + const handleSelectFolder = useCallback(async () => { + const api = getElectronAPI(); + const result = await api.openDirectory(); + + if (!result.canceled && result.filePaths[0]) { + const path = result.filePaths[0]; + const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project'; + + setProjectPath(path); + setProjectName(name); + + // Check if it's an existing automaker project + const hadAutomakerDir = await hasAutomakerDir(path); + const specExists = await hasAppSpec(path); + + if (hadAutomakerDir && specExists) { + // Existing project with spec - skip to complete + try { + const initResult = await initializeProject(path); + if (initResult.success) { + const trashedProject = trashedProjects.find((p) => p.path === path); + const effectiveTheme = (trashedProject?.theme as ThemeMode | undefined) || globalTheme; + upsertAndSetCurrentProject(path, name, effectiveTheme); + toast.success('Project opened', { description: `Opened ${name}` }); + onOpenChange(false); + navigate({ to: '/board' }); + } + } catch (error) { + toast.error('Failed to open project'); + } + } else { + setStep('project-name'); + } + } + }, [trashedProjects, globalTheme, upsertAndSetCurrentProject, onOpenChange, navigate]); + + const handleNext = useCallback(() => { + if (step === 'project-name') { + setStep('app-spec'); + } + }, [step]); + + const handleBack = useCallback(() => { + if (step === 'app-spec') { + setStep('project-name'); + } else if (step === 'project-name') { + setStep('select-folder'); + } + }, [step]); + + const handleSkipSpec = useCallback(async () => { + setIsProcessing(true); + try { + const initResult = await initializeProject(projectPath); + if (!initResult.success) { + toast.error('Failed to initialize project'); + return; + } + + const trashedProject = trashedProjects.find((p) => p.path === projectPath); + const effectiveTheme = (trashedProject?.theme as ThemeMode | undefined) || globalTheme; + upsertAndSetCurrentProject(projectPath, projectName, effectiveTheme); + + toast.success('Project created', { description: `Created ${projectName}` }); + onOpenChange(false); + navigate({ to: '/board' }); + } finally { + setIsProcessing(false); + } + }, [ + projectPath, + projectName, + trashedProjects, + globalTheme, + upsertAndSetCurrentProject, + onOpenChange, + navigate, + ]); + + const handleGenerateSpec = useCallback(async () => { + setIsProcessing(true); + try { + const initResult = await initializeProject(projectPath); + if (!initResult.success) { + toast.error('Failed to initialize project'); + return; + } + + const trashedProject = trashedProjects.find((p) => p.path === projectPath); + const effectiveTheme = (trashedProject?.theme as ThemeMode | undefined) || globalTheme; + upsertAndSetCurrentProject(projectPath, projectName, effectiveTheme); + + // Start spec generation in background + setSpecCreatingForProject(projectPath); + + onOpenChange(false); + navigate({ to: '/board' }); + + // Use the spec regeneration API + const api = getElectronAPI(); + if (api.specRegeneration && projectOverview.trim()) { + const result = await api.specRegeneration.create( + projectPath, + projectOverview.trim(), + generateFeatures, + true, // analyzeProject + generateFeatures ? featureCount : undefined + ); + + if (!result.success) { + setSpecCreatingForProject(null); + toast.error('Failed to create specification', { + description: result.error, + }); + } else { + toast.info('Generating app specification...', { + description: "This may take a minute. You'll be notified when complete.", + }); + } + } else { + toast.success('Project created', { description: `Created ${projectName}` }); + setSpecCreatingForProject(null); + } + } catch (error) { + setSpecCreatingForProject(null); + toast.error('Failed to create project', { + description: error instanceof Error ? error.message : 'Unknown error', + }); + } finally { + setIsProcessing(false); + } + }, [ + projectPath, + projectName, + projectOverview, + generateFeatures, + featureCount, + trashedProjects, + globalTheme, + upsertAndSetCurrentProject, + setSpecCreatingForProject, + onOpenChange, + navigate, + ]); + + const renderStep = () => { + switch (step) { + case 'select-folder': + return ( +
+
+
+ +
+

Select Root Directory

+

+ Select the root directory of your project. This can be an empty directory for a new + project or an existing codebase. +

+
+ +
+ ); + + case 'project-name': + return ( +
+
+ + setProjectName(e.target.value)} + placeholder="My Awesome Project" + /> +
+
+ +

{projectPath}

+
+
+ + +
+
+ ); + + case 'app-spec': + return ( +
+
+ +