File created successfully at: C:\Users\MikeSwanson\claude-projects\Autocode-remix\Autocode-fork\frontend\src\components\FolderBrowser.tsx

import { useState, useEffect } from 'react'

interface DirectoryEntry {
  name: string
  path: string
  is_directory: boolean
  is_hidden: boolean
  has_children: boolean
}

interface DriveInfo {
  letter: string
  label: string
  available: boolean
}

interface DirectoryListResponse {
  current_path: string
  parent_path: string | null
  entries: DirectoryEntry[]
  drives: DriveInfo[] | null
}

interface FolderBrowserProps {
  onSelect: (path: string) => void
  onCancel: () => void
  initialPath?: string
  mode?: 'create' | 'import'
}

export function FolderBrowser({ onSelect, onCancel, initialPath, mode = 'create' }: FolderBrowserProps) {
  const [currentPath, setCurrentPath] = useState<string | null>(initialPath || null)
  const [entries, setEntries] = useState<DirectoryEntry[]>([])
  const [drives, setDrives] = useState<DriveInfo[] | null>(null)
  const [parentPath, setParentPath] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [newFolderName, setNewFolderName] = useState('')
  const [showNewFolder, setShowNewFolder] = useState(false)
  const [creatingFolder, setCreatingFolder] = useState(false)

  const isImportMode = mode === 'import'

  // Fetch directory listing
  const fetchDirectory = async (path?: string) => {
    setLoading(true)
    setError(null)

    try {
      const url = path
        ? `/api/filesystem/list?path=${encodeURIComponent(path)}`
        : '/api/filesystem/list'

      const res = await fetch(url)
      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.detail || 'Failed to load directory')
      }

      const data: DirectoryListResponse = await res.json()
      setCurrentPath(data.current_path)
      setEntries(data.entries)
      setDrives(data.drives)
      setParentPath(data.parent_path)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error')
    } finally {
      setLoading(false)
    }
  }

  // Load initial directory
  useEffect(() => {
    fetchDirectory(initialPath || undefined)
  }, [initialPath])

  const handleNavigate = (path: string) => {
    fetchDirectory(path)
    setShowNewFolder(false)
    setNewFolderName('')
  }

  const handleDriveSelect = (letter: string) => {
    handleNavigate(`${letter}:/`)
  }

  const handleGoUp = () => {
    if (parentPath) {
      handleNavigate(parentPath)
    }
  }

  const handleSelect = () => {
    if (currentPath) {
      onSelect(currentPath)
    }
  }

  const handleCreateFolder = async () => {
    if (!newFolderName.trim() || !currentPath) return

    setCreatingFolder(true)
    setError(null)

    try {
      const res = await fetch('/api/filesystem/create-directory', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          parent_path: currentPath,
          name: newFolderName.trim(),
        }),
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.detail || 'Failed to create folder')
      }

      const data = await res.json()
      // Navigate to the new folder
      handleNavigate(data.path)
      setShowNewFolder(false)
      setNewFolderName('')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error')
    } finally {
      setCreatingFolder(false)
    }
  }

  // Get breadcrumb segments
  const getBreadcrumbs = () => {
    if (!currentPath) return []

    const segments: { name: string; path: string }[] = []
    let path = currentPath

    // Handle Windows drive letters
    if (/^[A-Za-z]:/.test(path)) {
      const drive = path.slice(0, 2)
      segments.push({ name: drive, path: `${drive}/` })
      path = path.slice(3)
    } else if (path.startsWith('/')) {
      segments.push({ name: '/', path: '/' })
      path = path.slice(1)
    }

    // Split remaining path
    const parts = path.split('/').filter(Boolean)
    let buildPath = segments.length > 0 ? segments[0].path : ''

    for (const part of parts) {
      buildPath = buildPath.endsWith('/') ? buildPath + part : buildPath + '/' + part
      segments.push({ name: part, path: buildPath })
    }

    return segments
  }

  const breadcrumbs = getBreadcrumbs()

  return (

      {/* Header with breadcrumbs */}

          <svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
          </svg>

            {isImportMode ? 'Select Existing Project' : 'Select Project Location'}

        {/* Breadcrumb navigation */}

          {parentPath && (
            <button
              onClick={handleGoUp}
              className="p-1 hover:bg-surface-elevated rounded transition-colors"
              title="Go up"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
          )}

          {breadcrumbs.map((crumb, index) => (

              {index > 0 && (
                <svg className="w-4 h-4 text-text-secondary mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              )}
              <button
                onClick={() => handleNavigate(crumb.path)}
                className={`px-2 py-1 rounded hover:bg-surface-elevated transition-colors ${
                  index === breadcrumbs.length - 1 ? 'font-medium text-accent' : 'text-text-secondary'
                }`}
              >
                {crumb.name}
              </button>

          ))}

      {/* Drives selector (Windows) */}
      {drives && drives.length > 0 && (

            Drives:
            {drives.filter(d => d.available).map((drive) => (
              <button
                key={drive.letter}
                onClick={() => handleDriveSelect(drive.letter)}
                className={`px-2 py-1 text-xs rounded border transition-colors ${
                  currentPath?.startsWith(`${drive.letter}:`)
                    ? 'bg-accent text-white border-accent'
                    : 'border-border hover:bg-surface'
                }`}
              >
                {drive.letter}:
              </button>
            ))}

      )}

      {/* Directory listing */}

        {loading ? (

        ) : error ? (

            <svg className="w-8 h-8 mx-auto mb-2 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>

{error}

            <button
              onClick={() => fetchDirectory(currentPath || undefined)}
              className="mt-2 text-sm text-accent hover:underline"
            >
              Retry
            </button>

        ) : entries.length === 0 ? (

            <svg className="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
            </svg>

No subfolders

You can create a new folder or select this directory.

        ) : (

            {entries.map((entry) => (
              <button
                key={entry.path}
                onClick={() => handleNavigate(entry.path)}
                className="w-full flex items-center gap-2 p-2 rounded hover:bg-surface-elevated transition-colors text-left"
              >
                <svg className="w-5 h-5 text-warning flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                </svg>
                {entry.name}
                {entry.has_children && (
                  <svg className="w-4 h-4 text-text-secondary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                )}
              </button>
            ))}

        )}

        {/* New folder input */}
        {showNewFolder && (

              <svg className="w-5 h-5 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
              </svg>
              <input
                type="text"
                value={newFolderName}
                onChange={(e) => setNewFolderName(e.target.value)}
                placeholder="Folder name"
                className="flex-1 px-2 py-1 text-sm bg-surface border border-border rounded focus:outline-none focus:ring-1 focus:ring-accent"
                autoFocus
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleCreateFolder()
                  if (e.key === 'Escape') {
                    setShowNewFolder(false)
                    setNewFolderName('')
                  }
                }}
              />
              <button
                onClick={handleCreateFolder}
                disabled={!newFolderName.trim() || creatingFolder}
                className="px-2 py-1 text-sm bg-accent text-white rounded hover:bg-accent/80 disabled:opacity-50"
              >
                {creatingFolder ? '...' : 'Create'}
              </button>
              <button
                onClick={() => {
                  setShowNewFolder(false)
                  setNewFolderName('')
                }}
                className="px-2 py-1 text-sm border border-border rounded hover:bg-surface"
              >
                Cancel
              </button>

        )}

      {/* Footer with selected path and actions */}

        {/* Selected path display */}

Selected path:

{currentPath || 'No folder selected'}

        {/* Actions */}

          {!isImportMode && (
            <button
              onClick={() => setShowNewFolder(true)}
              disabled={showNewFolder || loading}
              className="flex items-center gap-1 px-3 py-2 text-sm border border-border rounded hover:bg-surface-elevated transition-colors disabled:opacity-50"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
              </svg>
              New Folder
            </button>
          )}

          <div className={`flex items-center gap-2 ${isImportMode ? 'w-full justify-end' : ''}`}>
            <button
              onClick={onCancel}
              className="px-4 py-2 text-sm border border-border rounded hover:bg-surface-elevated transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={handleSelect}
              disabled={!currentPath}
              className="px-4 py-2 text-sm bg-accent text-white rounded hover:bg-accent/80 transition-colors disabled:opacity-50"
            >
              {isImportMode ? 'Select This Folder' : 'Select Location'}
            </button>

  )
}

export default FolderBrowser


Now I need to update the CreateProjectModal to use the FolderBrowser component.


TodoWrite

Create filesystem router for backend

Create FolderBrowser component

Update CreateProjectModal to use picker


Todos have been modified successfully. Ensure that you continue to use the todo list to track your progress. Please proceed with the current tasks if applicable

Create filesystem router for backend

Create FolderBrowser component

Update CreateProjectModal to use picker

Create filesystem router for backend

Create FolderBrowser component

Update CreateProjectModal to use picker


Now I need to update the CreateProjectModal to integrate the FolderBrowser. I'll add a "Browse" button next to the path input fields that opens the folder browser.


1→import { useState } from 'react'
     2→import { useToast } from './ToastProvider'
     3→
     4→interface CodebaseAnalysis {
     5→  total_files: number
     6→  file_types: Record<string, number>
     7→  detected_stack: Record<string, string>
     8→  has_claude_md: boolean
     9→  claude_md_content: string | null
    10→  has_readme: boolean
    11→  readme_content: string | null
    12→  directories: string[]
    13→  entry_points: string[]
    14→  project_name: string
    15→}
    16→
    17→interface CreateProjectModalProps {
    18→  isOpen: boolean
    19→  onClose: () => void
    20→  onProjectCreated: () => void
    21→}
    22→
    23→type Mode = 'select' | 'create' | 'import'
    24→
    25→export function CreateProjectModal({ isOpen, onClose, onProjectCreated }: CreateProjectModalProps) {
    26→  const [mode, setMode] = useState<Mode>('select')
    27→  const [name, setName] = useState('')
    28→  const [path, setPath] = useState('')
    29→  const [description, setDescription] = useState('')
    30→  const [error, setError] = useState<string | null>(null)
    31→  const [loading, setLoading] = useState(false)
    32→  const [analysis, setAnalysis] = useState<CodebaseAnalysis | null>(null)
    33→  const { addToast } = useToast()
    34→
    35→  const handleCreateSubmit = async (e: React.FormEvent) => {
    36→    e.preventDefault()
    37→
    38→    if (!name.trim()) {
    39→      setError('Project name is required')
    40→      return
    41→    }
    42→    if (!path.trim()) {
    43→      setError('Project path is required')
    44→      return
    45→    }
    46→
    47→    try {
    48→      setLoading(true)
    49→      setError(null)
    50→
    51→      const res = await fetch('/api/projects', {
    52→        method: 'POST',
    53→        headers: { 'Content-Type': 'application/json' },
    54→        body: JSON.stringify({
    55→          name: name.trim(),
    56→          path: path.trim(),
    57→          description: description.trim() || undefined,
    58→        }),
    59→      })
    60→
    61→      if (!res.ok) {
    62→        const data = await res.json()
    63→        throw new Error(data.detail || 'Failed to create project')
    64→      }
    65→
    66→      addToast('success', `Project "${name.trim()}" created successfully`)
    67→      onProjectCreated()
    68→      handleClose()
    69→    } catch (err) {
    70→      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
    71→      setError(errorMessage)
    72→      addToast('error', `Failed to create project: ${errorMessage}`)
    73→    } finally {
    74→      setLoading(false)
    75→    }
    76→  }
    77→
    78→  const handleImportSubmit = async (e: React.FormEvent) => {
    79→    e.preventDefault()
    80→
    81→    if (!path.trim()) {
    82→      setError('Project path is required')
    83→      return
    84→    }
    85→
    86→    // Extract folder name from path if name is empty
    87→    const pathStr = path.trim().replace(/\\/g, '/')  // Normalize to forward slashes
    88→    const folderName = name.trim() || pathStr.split('/').filter(Boolean).pop() || 'imported-project'
    89→
    90→    try {
    91→      setLoading(true)
    92→      setError(null)
    93→
    94→      const res = await fetch('/api/projects/import', {
    95→        method: 'POST',
    96→        headers: { 'Content-Type': 'application/json' },
    97→        body: JSON.stringify({
    98→          name: folderName,
    99→          path: path.trim(),
   100→        }),
   101→      })
   102→
   103→      if (!res.ok) {
   104→        const data = await res.json()
   105→        // Handle FastAPI validation errors (array of errors) or simple detail string
   106→        let errorMsg = 'Failed to import project'
   107→        if (typeof data.detail === 'string') {
   108→          errorMsg = data.detail
   109→        } else if (Array.isArray(data.detail)) {
   110→          // FastAPI validation error format: [{loc: [...], msg: "...", type: "..."}]
   111→          errorMsg = data.detail.map((e: { msg: string }) => e.msg).join(', ')
   112→        } else if (data.detail && typeof data.detail === 'object') {
   113→          errorMsg = JSON.stringify(data.detail)
   114→        }
   115→        throw new Error(errorMsg)
   116→      }
   117→
   118→      const data = await res.json()
   119→      setAnalysis(data.analysis)
   120→
   121→      addToast('success', `Project "${data.project.name}" imported successfully`)
   122→      onProjectCreated()
   123→      handleClose()
   124→    } catch (err) {
   125→      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
   126→      setError(errorMessage)
   127→      addToast('error', `Failed to import project: ${errorMessage}`)
   128→    } finally {
   129→      setLoading(false)
   130→    }
   131→  }
   132→
   133→  const handleClose = () => {
   134→    setMode('select')
   135→    setName('')
   136→    setPath('')
   137→    setDescription('')
   138→    setError(null)
   139→    setAnalysis(null)
   140→    onClose()
   141→  }
   142→
   143→  const handleBack = () => {
   144→    setMode('select')
   145→    setError(null)
   146→    setAnalysis(null)
   147→  }
   148→
   149→  if (!isOpen) return null
   150→
   151→  // Mode selection screen
   152→  if (mode === 'select') {
   153→    return (
   154→

   155→

   156→

   157→
New Project

   158→            <button
   159→              onClick={handleClose}
   160→              className="text-text-secondary hover:text-text-primary transition-colors"
   161→            >
   162→              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   163→                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
   164→              </svg>
   165→            </button>
   166→

   167→
   168→

   169→
What would you like to do?

   170→
   171→            {/* Create New Option */}
   172→            <button
   173→              onClick={() => setMode('create')}
   174→              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
   175→            >
   176→

   177→

   178→                  <svg className="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   179→                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
   180→                  </svg>
   181→

   182→

   183→

   184→                    Create New Project
   185→                    Recommended
   186→

   187→

   188→                    Start fresh with a new project folder
   189→

   190→

   191→

   192→            </button>
   193→
   194→            {/* Import Existing Option */}
   195→            <button
   196→              onClick={() => setMode('import')}
   197→              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
   198→            >
   199→

   200→

   201→                  <svg className="w-6 h-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   202→                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
   203→                  </svg>
   204→

   205→

   206→                  Import Existing Project
   207→

   208→                    Import an existing codebase and analyze its structure
   209→

   210→

   211→

   212→            </button>
   213→

   214→

   215→

   216→    )
   217→  }
   218→
   219→  // Create form
   220→  if (mode === 'create') {
   221→    return (
   222→

   223→

   224→

   225→

   226→              <button
   227→                onClick={handleBack}
   228→                className="text-text-secondary hover:text-text-primary transition-colors"
   229→              >
   230→                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   231→                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
   232→                </svg>
   233→              </button>
   234→
Create New Project

   235→

   236→            <button
   237→              onClick={handleClose}
   238→              className="text-text-secondary hover:text-text-primary transition-colors"
   239→            >
   240→              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   241→                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
   242→              </svg>
   243→            </button>
   244→

   245→
   246→          <form onSubmit={handleCreateSubmit} className="p-6 space-y-4">
   247→            {error && (
   248→

   249→                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   250→                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   251→                </svg>
   252→                {error}
   253→

   254→            )}
   255→
   256→

   257→
   258→                Project Name *
   259→
   260→              <input
   261→                id="project-name"
   262→                type="text"
   263→                value={name}
   264→                onChange={(e) => setName(e.target.value)}
   265→                placeholder="my-awesome-project"
   266→                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
   267→                disabled={loading}
   268→              />
   269→

   270→
   271→

   272→
   273→                Project Path *
   274→
   275→              <input
   276→                id="project-path"
   277→                type="text"
   278→                value={path}
   279→                onChange={(e) => setPath(e.target.value)}
   280→                placeholder="C:/Projects/my-project"
   281→                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
   282→                disabled={loading}
   283→              />
   284→

   285→
   286→

   287→
   288→                Description (optional)
   289→
   290→              <textarea
   291→                id="project-description"
   292→                value={description}
   293→                onChange={(e) => setDescription(e.target.value)}
   294→                placeholder="Brief description of your project"
   295→                rows={3}
   296→                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
   297→                disabled={loading}
   298→              />
   299→

   300→
   301→

   302→              <button
   303→                type="button"
   304→                onClick={handleBack}
   305→                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
   306→                disabled={loading}
   307→              >
   308→                Back
   309→              </button>
   310→              <button
   311→                type="submit"
   312→                className="flex-1 px-4 py-2 bg-accent text-white rounded hover:bg-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
   313→                disabled={loading}
   314→              >
   315→                {loading ? (
   316→                  <>
   317→

   318→                    Creating...
   319→                  </>
   320→                ) : (
   321→                  'Create Project'
   322→                )}
   323→              </button>
   324→

   325→          </form>
   326→

   327→

   328→    )
   329→  }
   330→
   331→  // Import form
   332→  if (mode === 'import') {
   333→    return (
   334→

   335→

   336→

   337→

   338→              <button
   339→                onClick={handleBack}
   340→                className="text-text-secondary hover:text-text-primary transition-colors"
   341→              >
   342→                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   343→                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
   344→                </svg>
   345→              </button>
   346→
Import Existing Project

   347→

   348→            <button
   349→              onClick={handleClose}
   350→              className="text-text-secondary hover:text-text-primary transition-colors"
   351→            >
   352→              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   353→                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
   354→              </svg>
   355→            </button>
   356→

   357→
   358→          <form onSubmit={handleImportSubmit} className="p-6 space-y-4">
   359→            {error && (
   360→

   361→                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   362→                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   363→                </svg>
   364→                {error}
   365→

   366→            )}
   367→
   368→

   369→
Import analyzes existing code

   370→

   371→                The system will scan your project to detect its tech stack, file structure, and documentation.
   372→

   373→

   374→
   375→

   376→
   377→                Project Path *
   378→
   379→              <input
   380→                id="import-path"
   381→                type="text"
   382→                value={path}
   383→                onChange={(e) => setPath(e.target.value)}
   384→                placeholder="C:/Projects/existing-project"
   385→                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
   386→                disabled={loading}
   387→              />
   388→

   389→                Enter the full path to your existing project folder
   390→

   391→

   392→
   393→

   394→
   395→                Project Name (optional)
   396→
   397→              <input
   398→                id="import-name"
   399→                type="text"
   400→                value={name}
   401→                onChange={(e) => setName(e.target.value)}
   402→                placeholder="Leave empty to use folder name"
   403→                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
   404→                disabled={loading}
   405→              />
   406→

   407→
   408→            {/* Analysis results preview */}
   409→            {analysis && (
   410→

   411→
Analysis Complete

   412→

   413→
Files: {analysis.total_files}

   414→                  {Object.keys(analysis.detected_stack).length > 0 && (
   415→
Stack: {Object.values(analysis.detected_stack).join(', ')}

   416→                  )}
   417→                  {analysis.has_claude_md &&
✓ CLAUDE.md found
}
   418→                  {analysis.has_readme &&
✓ README.md found
}
   419→

   420→

   421→            )}
   422→
   423→

   424→              <button
   425→                type="button"
   426→                onClick={handleBack}
   427→                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
   428→                disabled={loading}
   429→              >
   430→                Back
   431→              </button>
   432→              <button
   433→                type="submit"
   434→                className="flex-1 px-4 py-2 bg-warning text-black font-medium rounded hover:bg-warning/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
   435→                disabled={loading}
   436→              >
   437→                {loading ? (
   438→                  <>
   439→

   440→                    Analyzing...
   441→                  </>
   442→                ) : (
   443→                  'Import Project'
   444→                )}
   445→              </button>
   446→

   447→          </form>
   448→

   449→

   450→    )
   451→  }
   452→
   453→  return null
   454→}
   455→
   456→export default CreateProjectModal
   457→

<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>

import { useState } from 'react'
import { useToast } from './ToastProvider'

interface CodebaseAnalysis {
  total_files: number
  file_types: Record<string, number>
  detected_stack: Record<string, string>
  has_claude_md: boolean
  claude_md_content: string | null
  has_readme: boolean
  readme_content: string | null
  directories: string[]
  entry_points: string[]
  project_name: string
}

interface CreateProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: () => void
}

type Mode = 'select' | 'create' | 'import'

export function CreateProjectModal({ isOpen, onClose, onProjectCreated }: CreateProjectModalProps) {
  const [mode, setMode] = useState<Mode>('select')
  const [name, setName] = useState('')
  const [path, setPath] = useState('')
  const [description, setDescription] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [analysis, setAnalysis] = useState<CodebaseAnalysis | null>(null)
  const { addToast } = useToast()

  const handleCreateSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!name.trim()) {
      setError('Project name is required')
      return
    }
    if (!path.trim()) {
      setError('Project path is required')
      return
    }

    try {
      setLoading(true)
      setError(null)

      const res = await fetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim(),
          path: path.trim(),
          description: description.trim() || undefined,
        }),
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.detail || 'Failed to create project')
      }

      addToast('success', `Project "${name.trim()}" created successfully`)
      onProjectCreated()
      handleClose()
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
      setError(errorMessage)
      addToast('error', `Failed to create project: ${errorMessage}`)
    } finally {
      setLoading(false)
    }
  }

  const handleImportSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!path.trim()) {
      setError('Project path is required')
      return
    }

    // Extract folder name from path if name is empty
    const pathStr = path.trim().replace(/\\/g, '/')  // Normalize to forward slashes
    const folderName = name.trim() || pathStr.split('/').filter(Boolean).pop() || 'imported-project'

    try {
      setLoading(true)
      setError(null)

      const res = await fetch('/api/projects/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: folderName,
          path: path.trim(),
        }),
      })

      if (!res.ok) {
        const data = await res.json()
        // Handle FastAPI validation errors (array of errors) or simple detail string
        let errorMsg = 'Failed to import project'
        if (typeof data.detail === 'string') {
          errorMsg = data.detail
        } else if (Array.isArray(data.detail)) {
          // FastAPI validation error format: [{loc: [...], msg: "...", type: "..."}]
          errorMsg = data.detail.map((e: { msg: string }) => e.msg).join(', ')
        } else if (data.detail && typeof data.detail === 'object') {
          errorMsg = JSON.stringify(data.detail)
        }
        throw new Error(errorMsg)
      }

      const data = await res.json()
      setAnalysis(data.analysis)

      addToast('success', `Project "${data.project.name}" imported successfully`)
      onProjectCreated()
      handleClose()
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
      setError(errorMessage)
      addToast('error', `Failed to import project: ${errorMessage}`)
    } finally {
      setLoading(false)
    }
  }

  const handleClose = () => {
    setMode('select')
    setName('')
    setPath('')
    setDescription('')
    setError(null)
    setAnalysis(null)
    onClose()
  }

  const handleBack = () => {
    setMode('select')
    setError(null)
    setAnalysis(null)
  }

  if (!isOpen) return null

  // Mode selection screen
  if (mode === 'select') {
    return (

New Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

What would you like to do?

            {/* Create New Option */}
            <button
              onClick={() => setMode('create')}
              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
            >

                  <svg className="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>

                    Create New Project
                    Recommended

                    Start fresh with a new project folder

            </button>

            {/* Import Existing Option */}
            <button
              onClick={() => setMode('import')}
              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
            >

                  <svg className="w-6 h-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                  </svg>

                  Import Existing Project

                    Import an existing codebase and analyze its structure

            </button>

    )
  }

  // Create form
  if (mode === 'create') {
    return (

              <button
                onClick={handleBack}
                className="text-text-secondary hover:text-text-primary transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </button>

Create New Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

          <form onSubmit={handleCreateSubmit} className="p-6 space-y-4">
            {error && (

                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {error}

            )}

                Project Name *

              <input
                id="project-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="my-awesome-project"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

                Project Path *

              <input
                id="project-path"
                type="text"
                value={path}
                onChange={(e) => setPath(e.target.value)}
                placeholder="C:/Projects/my-project"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

                Description (optional)

              <textarea
                id="project-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Brief description of your project"
                rows={3}
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                disabled={loading}
              />

              <button
                type="button"
                onClick={handleBack}
                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                disabled={loading}
              >
                Back
              </button>
              <button
                type="submit"
                className="flex-1 px-4 py-2 bg-accent text-white rounded hover:bg-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                disabled={loading}
              >
                {loading ? (
                  <>

                    Creating...
                  </>
                ) : (
                  'Create Project'
                )}
              </button>

          </form>

    )
  }

  // Import form
  if (mode === 'import') {
    return (

              <button
                onClick={handleBack}
                className="text-text-secondary hover:text-text-primary transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </button>

Import Existing Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

          <form onSubmit={handleImportSubmit} className="p-6 space-y-4">
            {error && (

                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {error}

            )}

Import analyzes existing code

                The system will scan your project to detect its tech stack, file structure, and documentation.

                Project Path *

              <input
                id="import-path"
                type="text"
                value={path}
                onChange={(e) => setPath(e.target.value)}
                placeholder="C:/Projects/existing-project"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

                Enter the full path to your existing project folder

                Project Name (optional)

              <input
                id="import-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Leave empty to use folder name"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

            {/* Analysis results preview */}
            {analysis && (

Analysis Complete

Files: {analysis.total_files}

                  {Object.keys(analysis.detected_stack).length > 0 && (

Stack: {Object.values(analysis.detected_stack).join(', ')}

                  )}
                  {analysis.has_claude_md &&
✓ CLAUDE.md found
}
                  {analysis.has_readme &&
✓ README.md found
}

            )}

              <button
                type="button"
                onClick={handleBack}
                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                disabled={loading}
              >
                Back
              </button>
              <button
                type="submit"
                className="flex-1 px-4 py-2 bg-warning text-black font-medium rounded hover:bg-warning/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                disabled={loading}
              >
                {loading ? (
                  <>

                    Analyzing...
                  </>
                ) : (
                  'Import Project'
                )}
              </button>

          </form>

    )
  }

  return null
}

export default CreateProjectModal


I'll update the CreateProjectModal to add a browse button and integrate the FolderBrowser component. I'll add a new mode for browsing and include the FolderBrowser.


Write

import { useState } from 'react'
import { useToast } from './ToastProvider'
import { FolderBrowser } from './FolderBrowser'

interface CodebaseAnalysis {
  total_files: number
  file_types: Record<string, number>
  detected_stack: Record<string, string>
  has_claude_md: boolean
  claude_md_content: string | null
  has_readme: boolean
  readme_content: string | null
  directories: string[]
  entry_points: string[]
  project_name: string
}

interface CreateProjectModalProps {
  isOpen: boolean
  onClose: () => void
  onProjectCreated: () => void
}

type Mode = 'select' | 'create' | 'import' | 'browse-create' | 'browse-import'

export function CreateProjectModal({ isOpen, onClose, onProjectCreated }: CreateProjectModalProps) {
  const [mode, setMode] = useState<Mode>('select')
  const [name, setName] = useState('')
  const [path, setPath] = useState('')
  const [description, setDescription] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [analysis, setAnalysis] = useState<CodebaseAnalysis | null>(null)
  const { addToast } = useToast()

  const handleCreateSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!name.trim()) {
      setError('Project name is required')
      return
    }
    if (!path.trim()) {
      setError('Project path is required')
      return
    }

    try {
      setLoading(true)
      setError(null)

      const res = await fetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim(),
          path: path.trim(),
          description: description.trim() || undefined,
        }),
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.detail || 'Failed to create project')
      }

      addToast('success', `Project "${name.trim()}" created successfully`)
      onProjectCreated()
      handleClose()
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
      setError(errorMessage)
      addToast('error', `Failed to create project: ${errorMessage}`)
    } finally {
      setLoading(false)
    }
  }

  const handleImportSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!path.trim()) {
      setError('Project path is required')
      return
    }

    // Extract folder name from path if name is empty
    const pathStr = path.trim().replace(/\\/g, '/')
    const folderName = name.trim() || pathStr.split('/').filter(Boolean).pop() || 'imported-project'

    try {
      setLoading(true)
      setError(null)

      const res = await fetch('/api/projects/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: folderName,
          path: path.trim(),
        }),
      })

      if (!res.ok) {
        const data = await res.json()
        let errorMsg = 'Failed to import project'
        if (typeof data.detail === 'string') {
          errorMsg = data.detail
        } else if (Array.isArray(data.detail)) {
          errorMsg = data.detail.map((e: { msg: string }) => e.msg).join(', ')
        } else if (data.detail && typeof data.detail === 'object') {
          errorMsg = JSON.stringify(data.detail)
        }
        throw new Error(errorMsg)
      }

      const data = await res.json()
      setAnalysis(data.analysis)

      addToast('success', `Project "${data.project.name}" imported successfully`)
      onProjectCreated()
      handleClose()
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
      setError(errorMessage)
      addToast('error', `Failed to import project: ${errorMessage}`)
    } finally {
      setLoading(false)
    }
  }

  const handleClose = () => {
    setMode('select')
    setName('')
    setPath('')
    setDescription('')
    setError(null)
    setAnalysis(null)
    onClose()
  }

  const handleBack = () => {
    if (mode === 'browse-create') {
      setMode('create')
    } else if (mode === 'browse-import') {
      setMode('import')
    } else {
      setMode('select')
    }
    setError(null)
    setAnalysis(null)
  }

  const handleFolderSelect = (selectedPath: string) => {
    setPath(selectedPath)
    if (mode === 'browse-create') {
      setMode('create')
    } else if (mode === 'browse-import') {
      setMode('import')
      // Auto-fill name from folder
      const folderName = selectedPath.replace(/\\/g, '/').split('/').filter(Boolean).pop() || ''
      if (!name.trim()) {
        setName(folderName)
      }
    }
  }

  if (!isOpen) return null

  // Folder browser mode
  if (mode === 'browse-create' || mode === 'browse-import') {
    return (

          <FolderBrowser
            onSelect={handleFolderSelect}
            onCancel={handleBack}
            initialPath={path || undefined}
            mode={mode === 'browse-import' ? 'import' : 'create'}
          />

    )
  }

  // Mode selection screen
  if (mode === 'select') {
    return (

New Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

What would you like to do?

            {/* Create New Option */}
            <button
              onClick={() => setMode('create')}
              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
            >

                  <svg className="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                  </svg>

                    Create New Project
                    Recommended

                    Start fresh with a new project folder

            </button>

            {/* Import Existing Option */}
            <button
              onClick={() => setMode('import')}
              className="w-full text-left p-4 border border-border rounded-lg hover:bg-surface-elevated transition-colors group"
            >

                  <svg className="w-6 h-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                  </svg>

                  Import Existing Project

                    Import an existing codebase and analyze its structure

            </button>

    )
  }

  // Create form
  if (mode === 'create') {
    return (

              <button
                onClick={handleBack}
                className="text-text-secondary hover:text-text-primary transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </button>

Create New Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

          <form onSubmit={handleCreateSubmit} className="p-6 space-y-4">
            {error && (

                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {error}

            )}

                Project Name *

              <input
                id="project-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="my-awesome-project"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

                Project Path *

                <input
                  id="project-path"
                  type="text"
                  value={path}
                  onChange={(e) => setPath(e.target.value)}
                  placeholder="C:/Projects/my-project"
                  className="flex-1 px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                  disabled={loading}
                />
                <button
                  type="button"
                  onClick={() => setMode('browse-create')}
                  className="px-3 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                  disabled={loading}
                  title="Browse folders"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                  </svg>
                </button>

                Description (optional)

              <textarea
                id="project-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Brief description of your project"
                rows={3}
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                disabled={loading}
              />

              <button
                type="button"
                onClick={handleBack}
                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                disabled={loading}
              >
                Back
              </button>
              <button
                type="submit"
                className="flex-1 px-4 py-2 bg-accent text-white rounded hover:bg-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                disabled={loading}
              >
                {loading ? (
                  <>

                    Creating...
                  </>
                ) : (
                  'Create Project'
                )}
              </button>

          </form>

    )
  }

  // Import form
  if (mode === 'import') {
    return (

              <button
                onClick={handleBack}
                className="text-text-secondary hover:text-text-primary transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </button>

Import Existing Project

            <button
              onClick={handleClose}
              className="text-text-secondary hover:text-text-primary transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

          <form onSubmit={handleImportSubmit} className="p-6 space-y-4">
            {error && (

                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {error}

            )}

Import analyzes existing code

                The system will scan your project to detect its tech stack, file structure, and documentation.

                Project Path *

                <input
                  id="import-path"
                  type="text"
                  value={path}
                  onChange={(e) => setPath(e.target.value)}
                  placeholder="C:/Projects/existing-project"
                  className="flex-1 px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                  disabled={loading}
                />
                <button
                  type="button"
                  onClick={() => setMode('browse-import')}
                  className="px-3 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                  disabled={loading}
                  title="Browse folders"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                  </svg>
                </button>

                Select the folder containing your existing project

                Project Name (optional)

              <input
                id="import-name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Leave empty to use folder name"
                className="w-full px-3 py-2 bg-surface-elevated border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                disabled={loading}
              />

            {/* Analysis results preview */}
            {analysis && (

Analysis Complete

Files: {analysis.total_files}

                  {Object.keys(analysis.detected_stack).length > 0 && (

Stack: {Object.values(analysis.detected_stack).join(', ')}

                  )}
                  {analysis.has_claude_md &&
✓ CLAUDE.md found
}
                  {analysis.has_readme &&
✓ README.md found
}

            )}

              <button
                type="button"
                onClick={handleBack}
                className="flex-1 px-4 py-2 border border-border rounded hover:bg-surface-elevated transition-colors"
                disabled={loading}
              >
                Back
              </button>
              <button
                type="submit"
                className="flex-1 px-4 py-2 bg-warning text-black font-medium rounded hover:bg-warning/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                disabled={loading}
              >
                {loading ? (
                  <>

                    Analyzing...
                  </>
                ) : (
                  'Import Project'
                )}
              </button>

          </form>

    )
  }

  return null
}

export default CreateProjectModal