export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('name')
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'


The file C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\autocoder-master\ui\src\components\NewProjectModal.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
    25→  onClose: () => void
    26→  onProjectCreated: (projectName: string) => void
    27→}
    28→
    29→export function NewProjectModal({
    30→  isOpen,
    31→  onClose,
    32→  onProjectCreated,
    33→}: NewProjectModalProps) {
    34→  const [step, setStep] = useState<Step>('mode')
    35→  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
    36→  const [projectName, setProjectName] = useState('')
    37→  const [projectPath, setProjectPath] = useState<string | null>(null)
    38→  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
    39→  const [error, setError] = useState<string | null>(null)
    40→  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
    41→  const [initializerError, setInitializerError] = useState<string | null>(null)
    42→  const [yoloModeSelected, setYoloModeSelected] = useState(false)
    43→  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)
    44→
    45→  // Suppress unused variable warning - specMethod may be used in future
    46→  void _specMethod
    47→
    48→  const createProject = useCreateProject()
    49→  const importProject = useImportProject()
    50→
    51→  const isImportMode = projectMode === 'import'
    52→
    53→  if (!isOpen) return null
    54→
    55→  const handleNameSubmit = (e: React.FormEvent) => {

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'

/**
 * New Project Modal Component
 *
 * Multi-step modal for creating new projects:
 * 1. Choose mode (Create New or Import Existing)
 * 2a. Create: Enter project name -> Select folder -> Choose spec method -> Chat/Complete
 * 2b. Import: Select folder -> Name (default from folder) -> Claude interview with analysis
 */

import { useState } from 'react'
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder, FolderUp, Plus } from 'lucide-react'
import { useCreateProject, useImportProject } from '../hooks/useProjects'
import { SpecCreationChat } from './SpecCreationChat'
import { FolderBrowser } from './FolderBrowser'
import { startAgent, CodebaseAnalysis } from '../lib/api'

type InitializerStatus = 'idle' | 'starting' | 'error'

type Step = 'mode' | 'name' | 'folder' | 'method' | 'chat' | 'complete'
type SpecMethod = 'claude' | 'manual'
type ProjectMode = 'create' | 'import'

interface NewProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: (projectName: string) => void
}

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('name')
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()

  if (!isOpen) return null

  const handleNameSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const trimmed = projectName.trim()

    if (!trimmed) {
      setError('Please enter a project name')
      return
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
      setError('Project name can only contain letters, numbers, hyphens, and underscores')
      return
    }

    setError(null)
    setStep('folder')
  }

  const handleFolderSelect = (path: string) => {
    // Append project name to the selected path
    const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
    setProjectPath(fullPath)
    setStep('method')
  }

  const handleFolderCancel = () => {
    setStep('name')
  }

  const handleMethodSelect = async (method: SpecMethod) => {
    setSpecMethod(method)

    if (!projectPath) {
      setError('Please select a project folder first')
      setStep('folder')
      return
    }

    if (method === 'manual') {
      // Create project immediately with manual method
      try {
        const project = await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'manual',
        })
        setStep('complete')
        setTimeout(() => {
          onProjectCreated(project.name)
          handleClose()
        }, 1500)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    } else {
      // Create project then show chat
      try {
        await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'claude',
        })
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    }
  }

  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
    // Save yoloMode for retry
    setYoloModeSelected(yoloMode)
    // Auto-start the initializer agent
    setInitializerStatus('starting')
    try {
      await startAgent(projectName.trim(), yoloMode)
      // Success - navigate to project
      setStep('complete')
      setTimeout(() => {
        onProjectCreated(projectName.trim())
        handleClose()
      }, 1500)
    } catch (err) {
      setInitializerStatus('error')
      setInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
    }
  }

  const handleRetryInitializer = () => {
    setInitializerError(null)
    setInitializerStatus('idle')
    handleSpecComplete('', yoloModeSelected)
  }

  const handleChatCancel = () => {
    // Go back to method selection but keep the project
    setStep('method')
    setSpecMethod(null)
  }

  const handleExitToProject = () => {
    // Exit chat and go directly to project - user can start agent manually
    onProjectCreated(projectName.trim())
    handleClose()
  }

  const handleClose = () => {
    setStep('name')
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    onClose()
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      setStep('name')
      setProjectPath(null)
    }
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (

        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />

    )
  }

  // Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <Bot size={24} className="text-white" />

                        Create with Claude

                          Recommended

                        Interactive conversation to define features and generate your app specification automatically.

                </button>

                {/* Manual option */}
                <button
                  onClick={() => handleMethodSelect('manual')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <FileEdit size={24} />

                      Edit Templates Manually

                        Edit the template files directly. Best for developers who want full control.

                </button>

              {error && (

                  {error}

              )}

              {createProject.isPending && (

                  <Loader2 size={16} className="animate-spin" />
                  Creating project...

              )}

                <button
                  onClick={handleBack}
                  className="neo-btn neo-btn-ghost"
                  disabled={createProject.isPending}
                >
                  <ArrowLeft size={16} />
                  Back
                </button>

          )}

          {/* Step 3: Complete */}
          {step === 'complete' && (

                <CheckCircle2 size={32} />

                {projectName}

                Your project has been created successfully!

                <Loader2 size={16} className="animate-spin" />
                Redirecting...

          )}

  )
}

-  const [step, setStep] = useState<Step>('name')

+  const [step, setStep] = useState<Step>('mode')

+  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)

+  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

+  const importProject = useImportProject()

+  const isImportMode = projectMode === 'import'


Now I need to:
1. Update handleFolderSelect to handle import mode
2. Update handleClose to reset all state including mode
3. Update handleBack to go back properly
4. Add the mode selection UI5. Update the folder step to handle import mode differentlyLet me update handleFolderSelect first.


Edit

  const handleFolderSelect = (path: string) => {
    // Append project name to the selected path
    const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
    setProjectPath(fullPath)
    setStep('method')
  }

  const handleFolderCancel = () => {
    setStep('name')
  }

  const handleFolderSelect = async (path: string) => {
    if (isImportMode) {
      // Import mode: use path as-is and import project
      // Extract folder name for project name
      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
      setProjectName(folderName)
      setProjectPath(path)

      // Call import API to analyze the codebase
      try {
        const result = await importProject.mutateAsync({
          name: folderName,
          path: path,
        })
        setCodebaseAnalysis(result.analysis)
        // Go straight to Claude chat for import
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to import project')
      }
    } else {
      // Create mode: append project name to the selected path
      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
      setProjectPath(fullPath)
      setStep('method')
    }
  }

  const handleFolderCancel = () => {
    if (isImportMode) {
      setStep('mode')
    } else {
      setStep('name')
    }
  }


The file C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\autocoder-master\ui\src\components\NewProjectModal.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
    69→    setError(null)
    70→    setStep('folder')
    71→  }
    72→
    73→  const handleFolderSelect = async (path: string) => {
    74→    if (isImportMode) {
    75→      // Import mode: use path as-is and import project
    76→      // Extract folder name for project name
    77→      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
    78→      setProjectName(folderName)
    79→      setProjectPath(path)
    80→
    81→      // Call import API to analyze the codebase
    82→      try {
    83→        const result = await importProject.mutateAsync({
    84→          name: folderName,
    85→          path: path,
    86→        })
    87→        setCodebaseAnalysis(result.analysis)
    88→        // Go straight to Claude chat for import
    89→        setStep('chat')
    90→      } catch (err: unknown) {
    91→        setError(err instanceof Error ? err.message : 'Failed to import project')
    92→      }
    93→    } else {
    94→      // Create mode: append project name to the selected path
    95→      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
    96→      setProjectPath(fullPath)
    97→      setStep('method')
    98→    }
    99→  }
   100→
   101→  const handleFolderCancel = () => {
   102→    if (isImportMode) {
   103→      setStep('mode')
   104→    } else {
   105→      setStep('name')
   106→    }
   107→  }
   108→
   109→  const handleMethodSelect = async (method: SpecMethod) => {
   110→    setSpecMethod(method)
   111→

  const handleFolderSelect = async (path: string) => {
    if (isImportMode) {
      // Import mode: use path as-is and import project
      // Extract folder name for project name
      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
      setProjectName(folderName)
      setProjectPath(path)

      // Call import API to analyze the codebase
      try {
        const result = await importProject.mutateAsync({
          name: folderName,
          path: path,
        })
        setCodebaseAnalysis(result.analysis)
        // Go straight to Claude chat for import
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to import project')
      }
    } else {
      // Create mode: append project name to the selected path
      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
      setProjectPath(fullPath)
      setStep('method')
    }
  }

  const handleFolderCancel = () => {
    if (isImportMode) {
      setStep('mode')
    } else {
      setStep('name')
    }
  }

/**
 * New Project Modal Component
 *
 * Multi-step modal for creating new projects:
 * 1. Choose mode (Create New or Import Existing)
 * 2a. Create: Enter project name -> Select folder -> Choose spec method -> Chat/Complete
 * 2b. Import: Select folder -> Name (default from folder) -> Claude interview with analysis
 */

import { useState } from 'react'
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder, FolderUp, Plus } from 'lucide-react'
import { useCreateProject, useImportProject } from '../hooks/useProjects'
import { SpecCreationChat } from './SpecCreationChat'
import { FolderBrowser } from './FolderBrowser'
import { startAgent, CodebaseAnalysis } from '../lib/api'

type InitializerStatus = 'idle' | 'starting' | 'error'

type Step = 'mode' | 'name' | 'folder' | 'method' | 'chat' | 'complete'
type SpecMethod = 'claude' | 'manual'
type ProjectMode = 'create' | 'import'

interface NewProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: (projectName: string) => void
}

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'

  if (!isOpen) return null

  const handleNameSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const trimmed = projectName.trim()

    if (!trimmed) {
      setError('Please enter a project name')
      return
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
      setError('Project name can only contain letters, numbers, hyphens, and underscores')
      return
    }

    setError(null)
    setStep('folder')
  }

  const handleFolderSelect = (path: string) => {
    // Append project name to the selected path
    const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
    setProjectPath(fullPath)
    setStep('method')
  }

  const handleFolderCancel = () => {
    setStep('name')
  }

  const handleMethodSelect = async (method: SpecMethod) => {
    setSpecMethod(method)

    if (!projectPath) {
      setError('Please select a project folder first')
      setStep('folder')
      return
    }

    if (method === 'manual') {
      // Create project immediately with manual method
      try {
        const project = await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'manual',
        })
        setStep('complete')
        setTimeout(() => {
          onProjectCreated(project.name)
          handleClose()
        }, 1500)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    } else {
      // Create project then show chat
      try {
        await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'claude',
        })
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    }
  }

  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
    // Save yoloMode for retry
    setYoloModeSelected(yoloMode)
    // Auto-start the initializer agent
    setInitializerStatus('starting')
    try {
      await startAgent(projectName.trim(), yoloMode)
      // Success - navigate to project
      setStep('complete')
      setTimeout(() => {
        onProjectCreated(projectName.trim())
        handleClose()
      }, 1500)
    } catch (err) {
      setInitializerStatus('error')
      setInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
    }
  }

  const handleRetryInitializer = () => {
    setInitializerError(null)
    setInitializerStatus('idle')
    handleSpecComplete('', yoloModeSelected)
  }

  const handleChatCancel = () => {
    // Go back to method selection but keep the project
    setStep('method')
    setSpecMethod(null)
  }

  const handleExitToProject = () => {
    // Exit chat and go directly to project - user can start agent manually
    onProjectCreated(projectName.trim())
    handleClose()
  }

  const handleClose = () => {
    setStep('name')
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    onClose()
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      setStep('name')
      setProjectPath(null)
    }
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (

        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />

    )
  }

  // Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <Bot size={24} className="text-white" />

                        Create with Claude

                          Recommended

                        Interactive conversation to define features and generate your app specification automatically.

                </button>

                {/* Manual option */}
                <button
                  onClick={() => handleMethodSelect('manual')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <FileEdit size={24} />

                      Edit Templates Manually

                        Edit the template files directly. Best for developers who want full control.

                </button>

              {error && (

                  {error}

              )}

              {createProject.isPending && (

                  <Loader2 size={16} className="animate-spin" />
                  Creating project...

              )}

                <button
                  onClick={handleBack}
                  className="neo-btn neo-btn-ghost"
                  disabled={createProject.isPending}
                >
                  <ArrowLeft size={16} />
                  Back
                </button>

          )}

          {/* Step 3: Complete */}
          {step === 'complete' && (

                <CheckCircle2 size={32} />

                {projectName}

                Your project has been created successfully!

                <Loader2 size={16} className="animate-spin" />
                Redirecting...

          )}

  )
}

-  const handleFolderSelect = (path: string) => {

-    // Append project name to the selected path

-    const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`

+  const handleFolderSelect = async (path: string) => {

+      // Import mode: use path as-is and import project

+      // Extract folder name for project name

+      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'

+      // Call import API to analyze the codebase

+        const result = await importProject.mutateAsync({

+        setCodebaseAnalysis(result.analysis)

+        // Go straight to Claude chat for import

+        setError(err instanceof Error ? err.message : 'Failed to import project')

+      // Create mode: append project name to the selected path

+      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`


Now let me update handleClose to reset the new state variables, and handleBack to handle the mode step.


  const handleClose = () => {
    setStep('name')
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    onClose()
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      setStep('name')
      setProjectPath(null)
    }
  }

  const handleClose = () => {
    setStep('mode')
    setProjectMode(null)
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    setCodebaseAnalysis(null)
    onClose()
  }

  const handleModeSelect = (mode: ProjectMode) => {
    setProjectMode(mode)
    if (mode === 'import') {
      // Import: go straight to folder selection
      setStep('folder')
    } else {
      // Create: go to name entry first
      setStep('name')
    }
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      if (isImportMode) {
        setStep('mode')
        setProjectMode(null)
      } else {
        setStep('name')
      }
      setProjectPath(null)
    } else if (step === 'name') {
      setStep('mode')
      setProjectMode(null)
    }
  }


The file C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\autocoder-master\ui\src\components\NewProjectModal.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   182→    onProjectCreated(projectName.trim())
   183→    handleClose()
   184→  }
   185→
   186→  const handleClose = () => {
   187→    setStep('mode')
   188→    setProjectMode(null)
   189→    setProjectName('')
   190→    setProjectPath(null)
   191→    setSpecMethod(null)
   192→    setError(null)
   193→    setInitializerStatus('idle')
   194→    setInitializerError(null)
   195→    setYoloModeSelected(false)
   196→    setCodebaseAnalysis(null)
   197→    onClose()
   198→  }
   199→
   200→  const handleModeSelect = (mode: ProjectMode) => {
   201→    setProjectMode(mode)
   202→    if (mode === 'import') {
   203→      // Import: go straight to folder selection
   204→      setStep('folder')
   205→    } else {
   206→      // Create: go to name entry first
   207→      setStep('name')
   208→    }
   209→  }
   210→
   211→  const handleBack = () => {
   212→    if (step === 'method') {
   213→      setStep('folder')
   214→      setSpecMethod(null)
   215→    } else if (step === 'folder') {
   216→      if (isImportMode) {
   217→        setStep('mode')
   218→        setProjectMode(null)
   219→      } else {
   220→        setStep('name')
   221→      }
   222→      setProjectPath(null)
   223→    } else if (step === 'name') {
   224→      setStep('mode')
   225→      setProjectMode(null)
   226→    }
   227→  }
   228→
   229→  // Full-screen chat view
   230→  if (step === 'chat') {
   231→    return (

  const handleClose = () => {
    setStep('mode')
    setProjectMode(null)
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    setCodebaseAnalysis(null)
    onClose()
  }

  const handleModeSelect = (mode: ProjectMode) => {
    setProjectMode(mode)
    if (mode === 'import') {
      // Import: go straight to folder selection
      setStep('folder')
    } else {
      // Create: go to name entry first
      setStep('name')
    }
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      if (isImportMode) {
        setStep('mode')
        setProjectMode(null)
      } else {
        setStep('name')
      }
      setProjectPath(null)
    } else if (step === 'name') {
      setStep('mode')
      setProjectMode(null)
    }
  }

/**
 * New Project Modal Component
 *
 * Multi-step modal for creating new projects:
 * 1. Choose mode (Create New or Import Existing)
 * 2a. Create: Enter project name -> Select folder -> Choose spec method -> Chat/Complete
 * 2b. Import: Select folder -> Name (default from folder) -> Claude interview with analysis
 */

import { useState } from 'react'
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder, FolderUp, Plus } from 'lucide-react'
import { useCreateProject, useImportProject } from '../hooks/useProjects'
import { SpecCreationChat } from './SpecCreationChat'
import { FolderBrowser } from './FolderBrowser'
import { startAgent, CodebaseAnalysis } from '../lib/api'

type InitializerStatus = 'idle' | 'starting' | 'error'

type Step = 'mode' | 'name' | 'folder' | 'method' | 'chat' | 'complete'
type SpecMethod = 'claude' | 'manual'
type ProjectMode = 'create' | 'import'

interface NewProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: (projectName: string) => void
}

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'

  if (!isOpen) return null

  const handleNameSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const trimmed = projectName.trim()

    if (!trimmed) {
      setError('Please enter a project name')
      return
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
      setError('Project name can only contain letters, numbers, hyphens, and underscores')
      return
    }

    setError(null)
    setStep('folder')
  }

  const handleFolderSelect = async (path: string) => {
    if (isImportMode) {
      // Import mode: use path as-is and import project
      // Extract folder name for project name
      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
      setProjectName(folderName)
      setProjectPath(path)

      // Call import API to analyze the codebase
      try {
        const result = await importProject.mutateAsync({
          name: folderName,
          path: path,
        })
        setCodebaseAnalysis(result.analysis)
        // Go straight to Claude chat for import
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to import project')
      }
    } else {
      // Create mode: append project name to the selected path
      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
      setProjectPath(fullPath)
      setStep('method')
    }
  }

  const handleFolderCancel = () => {
    if (isImportMode) {
      setStep('mode')
    } else {
      setStep('name')
    }
  }

  const handleMethodSelect = async (method: SpecMethod) => {
    setSpecMethod(method)

    if (!projectPath) {
      setError('Please select a project folder first')
      setStep('folder')
      return
    }

    if (method === 'manual') {
      // Create project immediately with manual method
      try {
        const project = await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'manual',
        })
        setStep('complete')
        setTimeout(() => {
          onProjectCreated(project.name)
          handleClose()
        }, 1500)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    } else {
      // Create project then show chat
      try {
        await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'claude',
        })
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    }
  }

  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
    // Save yoloMode for retry
    setYoloModeSelected(yoloMode)
    // Auto-start the initializer agent
    setInitializerStatus('starting')
    try {
      await startAgent(projectName.trim(), yoloMode)
      // Success - navigate to project
      setStep('complete')
      setTimeout(() => {
        onProjectCreated(projectName.trim())
        handleClose()
      }, 1500)
    } catch (err) {
      setInitializerStatus('error')
      setInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
    }
  }

  const handleRetryInitializer = () => {
    setInitializerError(null)
    setInitializerStatus('idle')
    handleSpecComplete('', yoloModeSelected)
  }

  const handleChatCancel = () => {
    // Go back to method selection but keep the project
    setStep('method')
    setSpecMethod(null)
  }

  const handleExitToProject = () => {
    // Exit chat and go directly to project - user can start agent manually
    onProjectCreated(projectName.trim())
    handleClose()
  }

  const handleClose = () => {
    setStep('name')
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    onClose()
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      setStep('name')
      setProjectPath(null)
    }
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (

        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />

    )
  }

  // Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <Bot size={24} className="text-white" />

                        Create with Claude

                          Recommended

                        Interactive conversation to define features and generate your app specification automatically.

                </button>

                {/* Manual option */}
                <button
                  onClick={() => handleMethodSelect('manual')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <FileEdit size={24} />

                      Edit Templates Manually

                        Edit the template files directly. Best for developers who want full control.

                </button>

              {error && (

                  {error}

              )}

              {createProject.isPending && (

                  <Loader2 size={16} className="animate-spin" />
                  Creating project...

              )}

                <button
                  onClick={handleBack}
                  className="neo-btn neo-btn-ghost"
                  disabled={createProject.isPending}
                >
                  <ArrowLeft size={16} />
                  Back
                </button>

          )}

          {/* Step 3: Complete */}
          {step === 'complete' && (

                <CheckCircle2 size={32} />

                {projectName}

                Your project has been created successfully!

                <Loader2 size={16} className="animate-spin" />
                Redirecting...

          )}

  )
}

}
const handleClose = () => {
-    setStep('name')
+    setStep('mode')
+    setProjectMode(null)
setProjectName('')
setProjectPath(null)
setSpecMethod(null)

+  const handleModeSelect = (mode: ProjectMode) => {

+      // Import: go straight to folder selection

+      // Create: go to name entry first


Now I need to update the SpecCreationChat component call to pass the import context. Let me find and update that part.


  // Full-screen chat view
  if (step === 'chat') {
    return (
      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />
      </div>
    )
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (
      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
          isImport={isImportMode}
          codebaseAnalysis={codebaseAnalysis}
        />
      </div>
    )
  }


The file C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\autocoder-master\ui\src\components\NewProjectModal.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   225→      setProjectMode(null)
   226→    }
   227→  }
   228→
   229→  // Full-screen chat view
   230→  if (step === 'chat') {
   231→    return (
   232→      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
   233→        <SpecCreationChat
   234→          projectName={projectName.trim()}
   235→          onComplete={handleSpecComplete}
   236→          onCancel={handleChatCancel}
   237→          onExitToProject={handleExitToProject}
   238→          initializerStatus={initializerStatus}
   239→          initializerError={initializerError}
   240→          onRetryInitializer={handleRetryInitializer}
   241→          isImport={isImportMode}
   242→          codebaseAnalysis={codebaseAnalysis}
   243→        />
   244→      </div>
   245→    )
   246→  }
   247→
   248→  // Folder step uses larger modal
   249→  if (step === 'folder') {
   250→    return (

  // Full-screen chat view
  if (step === 'chat') {
    return (
      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />
      </div>
    )
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (
      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
          isImport={isImportMode}
          codebaseAnalysis={codebaseAnalysis}
        />
      </div>
    )
  }

/**
 * New Project Modal Component
 *
 * Multi-step modal for creating new projects:
 * 1. Choose mode (Create New or Import Existing)
 * 2a. Create: Enter project name -> Select folder -> Choose spec method -> Chat/Complete
 * 2b. Import: Select folder -> Name (default from folder) -> Claude interview with analysis
 */

import { useState } from 'react'
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder, FolderUp, Plus } from 'lucide-react'
import { useCreateProject, useImportProject } from '../hooks/useProjects'
import { SpecCreationChat } from './SpecCreationChat'
import { FolderBrowser } from './FolderBrowser'
import { startAgent, CodebaseAnalysis } from '../lib/api'

type InitializerStatus = 'idle' | 'starting' | 'error'

type Step = 'mode' | 'name' | 'folder' | 'method' | 'chat' | 'complete'
type SpecMethod = 'claude' | 'manual'
type ProjectMode = 'create' | 'import'

interface NewProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: (projectName: string) => void
}

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'

  if (!isOpen) return null

  const handleNameSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const trimmed = projectName.trim()

    if (!trimmed) {
      setError('Please enter a project name')
      return
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
      setError('Project name can only contain letters, numbers, hyphens, and underscores')
      return
    }

    setError(null)
    setStep('folder')
  }

  const handleFolderSelect = async (path: string) => {
    if (isImportMode) {
      // Import mode: use path as-is and import project
      // Extract folder name for project name
      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
      setProjectName(folderName)
      setProjectPath(path)

      // Call import API to analyze the codebase
      try {
        const result = await importProject.mutateAsync({
          name: folderName,
          path: path,
        })
        setCodebaseAnalysis(result.analysis)
        // Go straight to Claude chat for import
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to import project')
      }
    } else {
      // Create mode: append project name to the selected path
      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
      setProjectPath(fullPath)
      setStep('method')
    }
  }

  const handleFolderCancel = () => {
    if (isImportMode) {
      setStep('mode')
    } else {
      setStep('name')
    }
  }

  const handleMethodSelect = async (method: SpecMethod) => {
    setSpecMethod(method)

    if (!projectPath) {
      setError('Please select a project folder first')
      setStep('folder')
      return
    }

    if (method === 'manual') {
      // Create project immediately with manual method
      try {
        const project = await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'manual',
        })
        setStep('complete')
        setTimeout(() => {
          onProjectCreated(project.name)
          handleClose()
        }, 1500)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    } else {
      // Create project then show chat
      try {
        await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'claude',
        })
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    }
  }

  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
    // Save yoloMode for retry
    setYoloModeSelected(yoloMode)
    // Auto-start the initializer agent
    setInitializerStatus('starting')
    try {
      await startAgent(projectName.trim(), yoloMode)
      // Success - navigate to project
      setStep('complete')
      setTimeout(() => {
        onProjectCreated(projectName.trim())
        handleClose()
      }, 1500)
    } catch (err) {
      setInitializerStatus('error')
      setInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
    }
  }

  const handleRetryInitializer = () => {
    setInitializerError(null)
    setInitializerStatus('idle')
    handleSpecComplete('', yoloModeSelected)
  }

  const handleChatCancel = () => {
    // Go back to method selection but keep the project
    setStep('method')
    setSpecMethod(null)
  }

  const handleExitToProject = () => {
    // Exit chat and go directly to project - user can start agent manually
    onProjectCreated(projectName.trim())
    handleClose()
  }

  const handleClose = () => {
    setStep('mode')
    setProjectMode(null)
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    setCodebaseAnalysis(null)
    onClose()
  }

  const handleModeSelect = (mode: ProjectMode) => {
    setProjectMode(mode)
    if (mode === 'import') {
      // Import: go straight to folder selection
      setStep('folder')
    } else {
      // Create: go to name entry first
      setStep('name')
    }
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      if (isImportMode) {
        setStep('mode')
        setProjectMode(null)
      } else {
        setStep('name')
      }
      setProjectPath(null)
    } else if (step === 'name') {
      setStep('mode')
      setProjectMode(null)
    }
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (

        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
        />

    )
  }

  // Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <Bot size={24} className="text-white" />

                        Create with Claude

                          Recommended

                        Interactive conversation to define features and generate your app specification automatically.

                </button>

                {/* Manual option */}
                <button
                  onClick={() => handleMethodSelect('manual')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <FileEdit size={24} />

                      Edit Templates Manually

                        Edit the template files directly. Best for developers who want full control.

                </button>

              {error && (

                  {error}

              )}

              {createProject.isPending && (

                  <Loader2 size={16} className="animate-spin" />
                  Creating project...

              )}

                <button
                  onClick={handleBack}
                  className="neo-btn neo-btn-ghost"
                  disabled={createProject.isPending}
                >
                  <ArrowLeft size={16} />
                  Back
                </button>

          )}

          {/* Step 3: Complete */}
          {step === 'complete' && (

                <CheckCircle2 size={32} />

                {projectName}

                Your project has been created successfully!

                <Loader2 size={16} className="animate-spin" />
                Redirecting...

          )}

  )
}

+          codebaseAnalysis={codebaseAnalysis}


Now I need to update the folder step to handle import mode differently (no project name message, different FolderBrowser mode), and add the mode selection step. Let me update the folder step first.


// Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

// Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              {isImportMode ? (
                <FolderUp size={24} className="text-[var(--color-neo-progress)]" />
              ) : (
                <Folder size={24} className="text-[var(--color-neo-progress)]" />
              )}

                  {isImportMode ? 'Select Project to Import' : 'Select Project Location'}

                  {isImportMode
                    ? 'Select an existing project folder to import'
                    : <>A folder named {projectName} will be created inside the selected directory</>
                  }

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Error display */}
          {error && (

              {error}

          )}

          {/* Loading state for import */}
          {importProject.isPending && (

              <Loader2 size={20} className="animate-spin" />
              Analyzing project...

          )}

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
              mode={isImportMode ? 'import' : 'create'}
            />

    )
  }


The file C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\autocoder-master\ui\src\components\NewProjectModal.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   244→

   245→    )
   246→  }
   247→
   248→  // Folder step uses larger modal
   249→  if (step === 'folder') {
   250→    return (
   251→

   252→
 e.stopPropagation()}
   255→        >
   256→          {/* Header */}
   257→

   258→

   259→              {isImportMode ? (
   260→                <FolderUp size={24} className="text-[var(--color-neo-progress)]" />
   261→              ) : (
   262→                <Folder size={24} className="text-[var(--color-neo-progress)]" />
   263→              )}
   264→

   265→

   266→                  {isImportMode ? 'Select Project to Import' : 'Select Project Location'}
   267→

   268→

   269→                  {isImportMode
   270→                    ? 'Select an existing project folder to import'
   271→                    : <>A folder named {projectName} will be created inside the selected directory</>
   272→                  }
   273→

   274→

   275→

   276→            <button
   277→              onClick={handleClose}
   278→              className="neo-btn neo-btn-ghost p-2"
   279→            >
   280→              <X size={20} />
   281→            </button>
   282→

   283→
   284→          {/* Error display */}
   285→          {error && (
   286→

   287→              {error}
   288→

   289→          )}
   290→
   291→          {/* Loading state for import */}
   292→          {importProject.isPending && (
   293→

   294→              <Loader2 size={20} className="animate-spin" />
   295→              Analyzing project...
   296→

   297→          )}
   298→
   299→          {/* Folder Browser */}
   300→

   301→            <FolderBrowser
   302→              onSelect={handleFolderSelect}
   303→              onCancel={handleFolderCancel}
   304→              mode={isImportMode ? 'import' : 'create'}
   305→            />
   306→

   307→

   308→

   309→    )
   310→  }
   311→
   312→  return (
   313→

   314→      <div

// Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              {isImportMode ? (
                <FolderUp size={24} className="text-[var(--color-neo-progress)]" />
              ) : (
                <Folder size={24} className="text-[var(--color-neo-progress)]" />
              )}

                  {isImportMode ? 'Select Project to Import' : 'Select Project Location'}

                  {isImportMode
                    ? 'Select an existing project folder to import'
                    : <>A folder named {projectName} will be created inside the selected directory</>
                  }

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Error display */}
          {error && (

              {error}

          )}

          {/* Loading state for import */}
          {importProject.isPending && (

              <Loader2 size={20} className="animate-spin" />
              Analyzing project...

          )}

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
              mode={isImportMode ? 'import' : 'create'}
            />

    )
  }

/**
 * New Project Modal Component
 *
 * Multi-step modal for creating new projects:
 * 1. Choose mode (Create New or Import Existing)
 * 2a. Create: Enter project name -> Select folder -> Choose spec method -> Chat/Complete
 * 2b. Import: Select folder -> Name (default from folder) -> Claude interview with analysis
 */

import { useState } from 'react'
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder, FolderUp, Plus } from 'lucide-react'
import { useCreateProject, useImportProject } from '../hooks/useProjects'
import { SpecCreationChat } from './SpecCreationChat'
import { FolderBrowser } from './FolderBrowser'
import { startAgent, CodebaseAnalysis } from '../lib/api'

type InitializerStatus = 'idle' | 'starting' | 'error'

type Step = 'mode' | 'name' | 'folder' | 'method' | 'chat' | 'complete'
type SpecMethod = 'claude' | 'manual'
type ProjectMode = 'create' | 'import'

interface NewProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: (projectName: string) => void
}

export function NewProjectModal({
  isOpen,
  onClose,
  onProjectCreated,
}: NewProjectModalProps) {
  const [step, setStep] = useState<Step>('mode')
  const [projectMode, setProjectMode] = useState<ProjectMode | null>(null)
  const [projectName, setProjectName] = useState('')
  const [projectPath, setProjectPath] = useState<string | null>(null)
  const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
  const [initializerError, setInitializerError] = useState<string | null>(null)
  const [yoloModeSelected, setYoloModeSelected] = useState(false)
  const [codebaseAnalysis, setCodebaseAnalysis] = useState<CodebaseAnalysis | null>(null)

  // Suppress unused variable warning - specMethod may be used in future
  void _specMethod

  const createProject = useCreateProject()
  const importProject = useImportProject()

  const isImportMode = projectMode === 'import'

  if (!isOpen) return null

  const handleNameSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const trimmed = projectName.trim()

    if (!trimmed) {
      setError('Please enter a project name')
      return
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
      setError('Project name can only contain letters, numbers, hyphens, and underscores')
      return
    }

    setError(null)
    setStep('folder')
  }

  const handleFolderSelect = async (path: string) => {
    if (isImportMode) {
      // Import mode: use path as-is and import project
      // Extract folder name for project name
      const folderName = path.split('/').filter(Boolean).pop() || 'imported-project'
      setProjectName(folderName)
      setProjectPath(path)

      // Call import API to analyze the codebase
      try {
        const result = await importProject.mutateAsync({
          name: folderName,
          path: path,
        })
        setCodebaseAnalysis(result.analysis)
        // Go straight to Claude chat for import
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to import project')
      }
    } else {
      // Create mode: append project name to the selected path
      const fullPath = path.endsWith('/') ? `${path}${projectName.trim()}` : `${path}/${projectName.trim()}`
      setProjectPath(fullPath)
      setStep('method')
    }
  }

  const handleFolderCancel = () => {
    if (isImportMode) {
      setStep('mode')
    } else {
      setStep('name')
    }
  }

  const handleMethodSelect = async (method: SpecMethod) => {
    setSpecMethod(method)

    if (!projectPath) {
      setError('Please select a project folder first')
      setStep('folder')
      return
    }

    if (method === 'manual') {
      // Create project immediately with manual method
      try {
        const project = await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'manual',
        })
        setStep('complete')
        setTimeout(() => {
          onProjectCreated(project.name)
          handleClose()
        }, 1500)
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    } else {
      // Create project then show chat
      try {
        await createProject.mutateAsync({
          name: projectName.trim(),
          path: projectPath,
          specMethod: 'claude',
        })
        setStep('chat')
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : 'Failed to create project')
      }
    }
  }

  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
    // Save yoloMode for retry
    setYoloModeSelected(yoloMode)
    // Auto-start the initializer agent
    setInitializerStatus('starting')
    try {
      await startAgent(projectName.trim(), yoloMode)
      // Success - navigate to project
      setStep('complete')
      setTimeout(() => {
        onProjectCreated(projectName.trim())
        handleClose()
      }, 1500)
    } catch (err) {
      setInitializerStatus('error')
      setInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
    }
  }

  const handleRetryInitializer = () => {
    setInitializerError(null)
    setInitializerStatus('idle')
    handleSpecComplete('', yoloModeSelected)
  }

  const handleChatCancel = () => {
    // Go back to method selection but keep the project
    setStep('method')
    setSpecMethod(null)
  }

  const handleExitToProject = () => {
    // Exit chat and go directly to project - user can start agent manually
    onProjectCreated(projectName.trim())
    handleClose()
  }

  const handleClose = () => {
    setStep('mode')
    setProjectMode(null)
    setProjectName('')
    setProjectPath(null)
    setSpecMethod(null)
    setError(null)
    setInitializerStatus('idle')
    setInitializerError(null)
    setYoloModeSelected(false)
    setCodebaseAnalysis(null)
    onClose()
  }

  const handleModeSelect = (mode: ProjectMode) => {
    setProjectMode(mode)
    if (mode === 'import') {
      // Import: go straight to folder selection
      setStep('folder')
    } else {
      // Create: go to name entry first
      setStep('name')
    }
  }

  const handleBack = () => {
    if (step === 'method') {
      setStep('folder')
      setSpecMethod(null)
    } else if (step === 'folder') {
      if (isImportMode) {
        setStep('mode')
        setProjectMode(null)
      } else {
        setStep('name')
      }
      setProjectPath(null)
    } else if (step === 'name') {
      setStep('mode')
      setProjectMode(null)
    }
  }

  // Full-screen chat view
  if (step === 'chat') {
    return (

        <SpecCreationChat
          projectName={projectName.trim()}
          onComplete={handleSpecComplete}
          onCancel={handleChatCancel}
          onExitToProject={handleExitToProject}
          initializerStatus={initializerStatus}
          initializerError={initializerError}
          onRetryInitializer={handleRetryInitializer}
          isImport={isImportMode}
          codebaseAnalysis={codebaseAnalysis}
        />

    )
  }

  // Folder step uses larger modal
  if (step === 'folder') {
    return (

 e.stopPropagation()}
        >
          {/* Header */}

              <Folder size={24} className="text-[var(--color-neo-progress)]" />

                  Select Project Location

                  A folder named {projectName} will be created inside the selected directory

            <button
              onClick={handleClose}
              className="neo-btn neo-btn-ghost p-2"
            >
              <X size={20} />
            </button>

          {/* Folder Browser */}

            <FolderBrowser
              onSelect={handleFolderSelect}
              onCancel={handleFolderCancel}
            />

    )
  }

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <Bot size={24} className="text-white" />

                        Create with Claude

                          Recommended

                        Interactive conversation to define features and generate your app specification automatically.

                </button>

                {/* Manual option */}
                <button
                  onClick={() => handleMethodSelect('manual')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                    disabled:opacity-50 disabled:cursor-not-allowed
                  `}
                >

                      <FileEdit size={24} />

                      Edit Templates Manually

                        Edit the template files directly. Best for developers who want full control.

                </button>

              {error && (

                  {error}

              )}

              {createProject.isPending && (

                  <Loader2 size={16} className="animate-spin" />
                  Creating project...

              )}

                <button
                  onClick={handleBack}
                  className="neo-btn neo-btn-ghost"
                  disabled={createProject.isPending}
                >
                  <ArrowLeft size={16} />
                  Back
                </button>

          )}

          {/* Step 3: Complete */}
          {step === 'complete' && (

                <CheckCircle2 size={32} />

                {projectName}

                Your project has been created successfully!

                <Loader2 size={16} className="animate-spin" />
                Redirecting...

          )}

  )
}

<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">

<div className="flex items-center gap-3">

-              <Folder size={24} className="text-[var(--color-neo-progress)]" />

+                <FolderUp size={24} className="text-[var(--color-neo-progress)]" />

+                <Folder size={24} className="text-[var(--color-neo-progress)]" />

<h2 className="font-display font-bold text-xl text-[#1a1a1a]">

-                  Select Project Location

+                  {isImportMode ? 'Select Project to Import' : 'Select Project Location'}

-                  A folder named {projectName} will be created inside the selected directory

+                    ? 'Select an existing project folder to import'

+                    : <>A folder named {projectName} will be created inside the selected directory</>

+            <div className="mx-4 mt-4 p-3 bg-[var(--color-neo-danger)] text-white text-sm border-2 border-[var(--color-neo-border)]">

+          {/* Loading state for import */}

+          {importProject.isPending && (

+            <div className="mx-4 mt-4 p-4 flex items-center justify-center gap-2 text-[var(--color-neo-text-secondary)] bg-[var(--color-neo-bg)] border-2 border-[var(--color-neo-border)]">

+              <Loader2 size={20} className="animate-spin" />

+              mode={isImportMode ? 'import' : 'create'}


Now I need to add the mode selection step to the main return statement. Let me find the right place and add it.


310→  }
   311→
   312→  return (
   313→

   314→
 e.stopPropagation()}
   317→      >
   318→        {/* Header */}
   319→

   320→

   321→            {step === 'name' && 'Create New Project'}
   322→            {step === 'method' && 'Choose Setup Method'}
   323→            {step === 'complete' && 'Project Created!'}
   324→

   325→          <button
   326→            onClick={handleClose}
   327→            className="neo-btn neo-btn-ghost p-2"
   328→          >
   329→            <X size={20} />
   330→          </button>
   331→

   332→
   333→        {/* Content */}
   334→

   335→          {/* Step 1: Project Name */}
   336→          {step === 'name' && (
   337→            <form onSubmit={handleNameSubmit}>
   338→

   339→
   340→                  Project Name
   341→
   342→                <input
   343→                  type="text"
   344→                  value={projectName}
   345→                  onChange={(e) => setProjectName(e.target.value)}
   346→                  placeholder="my-awesome-app"
   347→                  className="neo-input"
   348→                  pattern="^[a-zA-Z0-9_-]+$"
   349→                  autoFocus
   350→                />
   351→

   352→                  Use letters, numbers, hyphens, and underscores only.
   353→

   354→

   355→
   356→              {error && (
   357→

   358→                  {error}
   359→

   360→              )}
   361→
   362→

   363→                <button
   364→                  type="submit"
   365→                  className="neo-btn neo-btn-primary"
   366→                  disabled={!projectName.trim()}
   367→                >
   368→                  Next
   369→                  <ArrowRight size={16} />
   370→                </button>
   371→

   372→            </form>
   373→          )}
   374→
   375→          {/* Step 2: Spec Method */}
   376→          {step === 'method' && (
   377→

   378→

   379→                How would you like to define your project?
   380→

   381→
   382→

   383→                {/* Claude option */}
   384→                <button
   385→                  onClick={() => handleMethodSelect('claude')}
   386→                  disabled={createProject.isPending}
   387→                  className={`
   388→                    w-full text-left p-4
   389→                    border-3 border-[var(--color-neo-border)]

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

}

  return (

 e.stopPropagation()}
      >
        {/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (
            <form onSubmit={handleNameSubmit}>

                  Project Name

                <input
                  type="text"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                  placeholder="my-awesome-app"
                  className="neo-input"
                  pattern="^[a-zA-Z0-9_-]+$"
                  autoFocus
                />

                  Use letters, numbers, hyphens, and underscores only.

              {error && (

                  {error}

              )}

                <button
                  type="submit"
                  className="neo-btn neo-btn-primary"
                  disabled={!projectName.trim()}
                >
                  Next
                  <ArrowRight size={16} />
                </button>

            </form>
          )}

          {/* Step 2: Spec Method */}
          {step === 'method' && (

                How would you like to define your project?

                {/* Claude option */}
                <button
                  onClick={() => handleMethodSelect('claude')}
                  disabled={createProject.isPending}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]


I need to add the mode step and update the header to include 'mode'. Let me update the header first, then add the mode step.


{/* Header */}

            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Step 1: Project Name */}
          {step === 'name' && (

{/* Header */}

            {step === 'mode' && 'New Project'}
            {step === 'name' && 'Create New Project'}
            {step === 'method' && 'Choose Setup Method'}
            {step === 'complete' && 'Project Created!'}

          <button
            onClick={handleClose}
            className="neo-btn neo-btn-ghost p-2"
          >
            <X size={20} />
          </button>

        {/* Content */}

          {/* Mode Selection */}
          {step === 'mode' && (

                What would you like to do?

                {/* Create New option */}
                <button
                  onClick={() => handleModeSelect('create')}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                  `}
                >

                      <Plus size={24} className="text-white" />

                        Create New Project

                          Recommended

                        Start fresh with a new project folder. Define your app with Claude.

                </button>

                {/* Import Existing option */}
                <button
                  onClick={() => handleModeSelect('import')}
                  className={`
                    w-full text-left p-4
                    border-3 border-[var(--color-neo-border)]
                    bg-white
                    shadow-[4px_4px_0px_rgba(0,0,0,1)]
                    hover:translate-x-[-2px] hover:translate-y-[-2px]
                    hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
                    transition-all duration-150
                  `}
                >

                      <FolderUp size={24} />

                      Import Existing Project

                        Import an existing codebase. Claude will analyze it and help document features.

                </button>

          )}

          {/* Project Name */}
          {step === 'name' && (