The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\MemoryManager.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   645→

   646→  )
   647→}
   648→
   649→function InfrastructureCard({
   650→  id: _id,
   651→  name,
   652→  type,
   653→  config,
   654→  createdAt,
   655→  onDelete,
   656→}: {
   657→  id: number
   658→  name: string
   659→  type: string
   660→  config: Record<string, unknown>
   661→  createdAt: string
   662→  onDelete: () => void
   663→}) {
   664→  return (
   665→

   666→

   667→

   668→

   669→
{name}

   670→
   671→              {type}
   672→
   673→

   674→

   675→            {JSON.stringify(config, null, 2)}
   676→

   677→

   678→            Created: {new Date(createdAt).toLocaleString()}
   679→

   680→

   681→        <button
   682→          onClick={onDelete}
   683→          className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
   684→          title="Delete"
   685→        >
   686→          <Trash2 size={16} />
   687→        </button>
   688→

   689→

   690→  )
   691→}
   692→
   693→function EmptyState({
   694→  title,
   695→  description,

function InfrastructureCard({
  id: _id,
  name,
  type,
  config,
  createdAt,
  onDelete,
}: {
  id: number
  name: string
  type: string
  config: Record<string, unknown>
  createdAt: string
  onDelete: () => void
}) {
  return (

{name}

              {type}

            {JSON.stringify(config, null, 2)}

            Created: {new Date(createdAt).toLocaleString()}

        <button
          onClick={onDelete}
          className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
          title="Delete"
        >
          <Trash2 size={16} />
        </button>

  )
}

import { useState, useEffect } from 'react'
import { Brain, Globe, Server, Plus, Search, Trash2, X, Pencil } from 'lucide-react'
import * as Dialog from '@radix-ui/react-dialog'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import { useProjectStore } from '../stores/projectStore'

type MemoryTab = 'project' | 'global' | 'infrastructure'

interface ProjectMemoryItem {
  id: number
  project_id: number
  type: string
  content: string
  metadata: Record<string, unknown> | null
  created_at: string
}

interface GlobalMemoryItem {
  id: number
  type: string
  content: string
  metadata: Record<string, unknown> | null
  usage_count: number
  created_at: string
}

interface InfrastructureItem {
  id: number
  name: string
  type: string
  config: Record<string, unknown>
  projects: number[] | null
  created_at: string
  updated_at: string
}

const API_BASE = 'http://localhost:8000/api/memory'

export default function MemoryManager() {
  const { currentProject } = useProjectStore()
  const [activeTab, setActiveTab] = useState<MemoryTab>('project')
  const [searchQuery, setSearchQuery] = useState('')

  // Data states
  const [projectMemory, setProjectMemory] = useState<ProjectMemoryItem[]>([])
  const [globalMemory, setGlobalMemory] = useState<GlobalMemoryItem[]>([])
  const [infrastructure, setInfrastructure] = useState<InfrastructureItem[]>([])
  const [isLoading, setIsLoading] = useState(false)

  // Dialog states
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newItemType, setNewItemType] = useState('')
  const [newItemContent, setNewItemContent] = useState('')
  const [newItemName, setNewItemName] = useState('')
  const [isSaving, setIsSaving] = useState(false)

  // Delete dialog states
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [itemToDelete, setItemToDelete] = useState<{ id: number; type: MemoryTab } | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

  // Edit dialog states
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editItem, setEditItem] = useState<{ id: number; type: string; content: string; memoryType: MemoryTab } | null>(null)
  const [editItemType, setEditItemType] = useState('')
  const [editItemContent, setEditItemContent] = useState('')
  const [isEditing, setIsEditing] = useState(false)

  const tabs = [
    { id: 'project' as const, label: 'Project Memory', icon: Brain },
    { id: 'global' as const, label: 'Global Memory', icon: Globe },
    { id: 'infrastructure' as const, label: 'Infrastructure', icon: Server },
  ]

  // Fetch data based on active tab
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        if (activeTab === 'project' && currentProject) {
          const response = await fetch(`${API_BASE}/project/${currentProject.id}`)
          if (response.ok) {
            const data = await response.json()
            setProjectMemory(data)
          }
        } else if (activeTab === 'global') {
          const response = await fetch(`${API_BASE}/global`)
          if (response.ok) {
            const data = await response.json()
            setGlobalMemory(data)
          }
        } else if (activeTab === 'infrastructure') {
          const response = await fetch(`${API_BASE}/infrastructure`)
          if (response.ok) {
            const data = await response.json()
            setInfrastructure(data)
          }
        }
      } catch (error) {
        console.error('Failed to fetch memory items:', error)
      } finally {
        setIsLoading(false)
      }
    }
    fetchData()
  }, [activeTab, currentProject])

  const getTypeOptions = () => {
    switch (activeTab) {
      case 'project':
        return ['insight', 'pattern', 'gotcha', 'codebase_map']
      case 'global':
        return ['preference', 'pattern', 'solution']
      case 'infrastructure':
        return ['server', 'docker', 'database', 'deployment']
      default:
        return []
    }
  }

  const handleOpenAddDialog = () => {
    setNewItemType(getTypeOptions()[0] || '')
    setNewItemContent('')
    setNewItemName('')
    setShowAddDialog(true)
  }

  const handleAddItem = async () => {
    if (!newItemType || (!newItemContent.trim() && activeTab !== 'infrastructure')) return
    if (activeTab === 'infrastructure' && !newItemName.trim()) return

    setIsSaving(true)
    try {
      let response: Response

      if (activeTab === 'project' && currentProject) {
        response = await fetch(`${API_BASE}/project/${currentProject.id}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: newItemType, content: newItemContent.trim() }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setProjectMemory([...projectMemory, newItem])
        }
      } else if (activeTab === 'global') {
        response = await fetch(`${API_BASE}/global`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: newItemType, content: newItemContent.trim() }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setGlobalMemory([...globalMemory, newItem])
        }
      } else if (activeTab === 'infrastructure') {
        response = await fetch(`${API_BASE}/infrastructure`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: newItemName.trim(),
            type: newItemType,
            config: { content: newItemContent.trim() }
          }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setInfrastructure([...infrastructure, newItem])
        }
      }

      setShowAddDialog(false)
    } catch (error) {
      console.error('Failed to add memory item:', error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleDeleteClick = (id: number, type: MemoryTab) => {
    setItemToDelete({ id, type })
    setShowDeleteDialog(true)
  }

  const handleDeleteConfirm = async () => {
    if (!itemToDelete) return

    setIsDeleting(true)
    try {
      let endpoint: string

      if (itemToDelete.type === 'project' && currentProject) {
        endpoint = `${API_BASE}/project/${currentProject.id}/${itemToDelete.id}`
      } else if (itemToDelete.type === 'global') {
        endpoint = `${API_BASE}/global/${itemToDelete.id}`
      } else {
        endpoint = `${API_BASE}/infrastructure/${itemToDelete.id}`
      }

      const response = await fetch(endpoint, { method: 'DELETE' })

      if (response.ok || response.status === 204) {
        if (itemToDelete.type === 'project') {
          setProjectMemory(projectMemory.filter(item => item.id !== itemToDelete.id))
        } else if (itemToDelete.type === 'global') {
          setGlobalMemory(globalMemory.filter(item => item.id !== itemToDelete.id))
        } else {
          setInfrastructure(infrastructure.filter(item => item.id !== itemToDelete.id))
        }
      }

      setShowDeleteDialog(false)
      setItemToDelete(null)
    } catch (error) {
      console.error('Failed to delete memory item:', error)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleEditClick = (id: number, type: string, content: string, memoryType: MemoryTab) => {
    setEditItem({ id, type, content, memoryType })
    setEditItemType(type)
    setEditItemContent(content)
    setShowEditDialog(true)
  }

  const handleEditSave = async () => {
    if (!editItem || !editItemContent.trim()) return

    setIsEditing(true)
    try {
      let endpoint: string
      let body: Record<string, unknown>

      if (editItem.memoryType === 'project' && currentProject) {
        endpoint = `${API_BASE}/project/${currentProject.id}/${editItem.id}`
        body = { type: editItemType, content: editItemContent.trim() }
      } else if (editItem.memoryType === 'global') {
        endpoint = `${API_BASE}/global/${editItem.id}`
        body = { type: editItemType, content: editItemContent.trim() }
      } else {
        // Infrastructure uses different update endpoint
        setShowEditDialog(false)
        setEditItem(null)
        return
      }

      const response = await fetch(endpoint, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      })

      if (response.ok) {
        const updatedItem = await response.json()
        if (editItem.memoryType === 'project') {
          setProjectMemory(projectMemory.map(item =>
            item.id === editItem.id ? updatedItem : item
          ))
        } else if (editItem.memoryType === 'global') {
          setGlobalMemory(globalMemory.map(item =>
            item.id === editItem.id ? updatedItem : item
          ))
        }
      }

      setShowEditDialog(false)
      setEditItem(null)
    } catch (error) {
      console.error('Failed to update memory item:', error)
    } finally {
      setIsEditing(false)
    }
  }

  const filterItems = <T extends { content?: string; name?: string; type: string }>(items: T[]) => {
    if (!searchQuery) return items
    const query = searchQuery.toLowerCase()
    return items.filter(item =>
      item.content?.toLowerCase().includes(query) ||
      item.name?.toLowerCase().includes(query) ||
      item.type.toLowerCase().includes(query)
    )
  }

  const filteredProjectMemory = filterItems(projectMemory)
  const filteredGlobalMemory = filterItems(globalMemory)
  const filteredInfrastructure = filterItems(infrastructure)

  return (

      {/* Header */}

Memory Manager

        <button
          onClick={handleOpenAddDialog}
          className="btn-accent flex items-center gap-2"
        >
          <Plus size={18} />
          Add Memory Item
        </button>

      {/* Tabs */}

        {tabs.map((tab) => {
          const Icon = tab.icon
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2 rounded-md transition-colors ${
                activeTab === tab.id
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              <Icon size={16} />
              {tab.label}
            </button>
          )
        })}

      {/* Search */}

        <Search
          size={18}
          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
        />
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search memory items..."
          className="w-full pl-10 pr-4 py-2 bg-card border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
        />

      {/* Content */}

        {isLoading ? (

Loading...

        ) : (
          <>
            {activeTab === 'project' && (

                {filteredProjectMemory.length === 0 ? (
                  <EmptyState
                    title="No Project Memory"
                    description="Memory items from your current project will appear here."
                  />
                ) : (
                  filteredProjectMemory.map(item => (
                    <MemoryCard
                      key={item.id}
                      id={item.id}
                      type={item.type}
                      content={item.content}
                      createdAt={item.created_at}
                      onDelete={() => handleDeleteClick(item.id, 'project')}
                      onEdit={() => handleEditClick(item.id, item.type, item.content, 'project')}
                    />
                  ))
                )}

            )}

            {activeTab === 'global' && (

                {filteredGlobalMemory.length === 0 ? (
                  <EmptyState
                    title="No Global Memory"
                    description="Cross-project patterns and preferences will appear here."
                  />
                ) : (
                  filteredGlobalMemory.map(item => (
                    <MemoryCard
                      key={item.id}
                      id={item.id}
                      type={item.type}
                      content={item.content}
                      createdAt={item.created_at}
                      usageCount={item.usage_count}
                      onDelete={() => handleDeleteClick(item.id, 'global')}
                      onEdit={() => handleEditClick(item.id, item.type, item.content, 'global')}
                    />
                  ))
                )}

            )}

            {activeTab === 'infrastructure' && (

                {filteredInfrastructure.length === 0 ? (
                  <EmptyState
                    title="No Infrastructure Config"
                    description="Server and deployment configurations will appear here."
                  />
                ) : (
                  filteredInfrastructure.map(item => (
                    <InfrastructureCard
                      key={item.id}
                      id={item.id}
                      name={item.name}
                      type={item.type}
                      config={item.config}
                      createdAt={item.created_at}
                      onDelete={() => handleDeleteClick(item.id, 'infrastructure')}
                    />
                  ))
                )}

            )}
          </>
        )}

      {/* Add Memory Dialog */}
      <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">

              <Dialog.Title className="text-xl font-semibold text-foreground">
                Add {activeTab === 'project' ? 'Project' : activeTab === 'global' ? 'Global' : 'Infrastructure'} Memory
              </Dialog.Title>
              <Dialog.Close asChild>
                <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">
                  <X size={20} />
                </button>
              </Dialog.Close>

              {activeTab === 'infrastructure' && (

                  Name *
                  <input
                    type="text"
                    value={newItemName}
                    onChange={(e) => setNewItemName(e.target.value)}
                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    placeholder="Enter config name"
                  />

              )}

                Type *
                <select
                  value={newItemType}
                  onChange={(e) => setNewItemType(e.target.value)}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                >
                  {getTypeOptions().map(type => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>

                Content *
                <textarea
                  value={newItemContent}
                  onChange={(e) => setNewItemContent(e.target.value)}
                  rows={4}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent resize-none"
                  placeholder="Enter memory content..."
                />

              <Dialog.Close asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </Dialog.Close>
              <button
                onClick={handleAddItem}
                disabled={isSaving || !newItemContent.trim() || (activeTab === 'infrastructure' && !newItemName.trim())}
                className="px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
              >
                {isSaving ? 'Saving...' : 'Add Item'}
              </button>

          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

      {/* Delete Confirmation Dialog */}
      <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialog.Portal>
          <AlertDialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <AlertDialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">
            <AlertDialog.Title className="text-xl font-semibold text-foreground">
              Delete Memory Item
            </AlertDialog.Title>
            <AlertDialog.Description className="mt-3 text-muted-foreground">
              Are you sure you want to delete this memory item? This action cannot be undone.
            </AlertDialog.Description>

              <AlertDialog.Cancel asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </AlertDialog.Cancel>
              <AlertDialog.Action asChild>
                <button
                  onClick={handleDeleteConfirm}
                  disabled={isDeleting}
                  className="px-4 py-2 text-sm bg-destructive hover:bg-destructive/80 text-white rounded-lg transition-colors disabled:opacity-50"
                >
                  {isDeleting ? 'Deleting...' : 'Delete'}
                </button>
              </AlertDialog.Action>

          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>

      {/* Edit Memory Dialog */}
      <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">

              <Dialog.Title className="text-xl font-semibold text-foreground">
                Edit Memory Item
              </Dialog.Title>
              <Dialog.Close asChild>
                <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">
                  <X size={20} />
                </button>
              </Dialog.Close>

                Type *
                <select
                  value={editItemType}
                  onChange={(e) => setEditItemType(e.target.value)}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                >
                  {(editItem?.memoryType === 'project'
                    ? ['insight', 'pattern', 'gotcha', 'codebase_map']
                    : ['preference', 'pattern', 'solution']
                  ).map(type => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>

                Content *
                <textarea
                  value={editItemContent}
                  onChange={(e) => setEditItemContent(e.target.value)}
                  rows={4}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent resize-none"
                  placeholder="Enter memory content..."
                />

              <Dialog.Close asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </Dialog.Close>
              <button
                onClick={handleEditSave}
                disabled={isEditing || !editItemContent.trim()}
                className="px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
              >
                {isEditing ? 'Saving...' : 'Save Changes'}
              </button>

          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

  )
}

function MemoryCard({
  id: _id,
  type,
  content,
  createdAt,
  usageCount,
  onDelete,
  onEdit,
}: {
  id: number
  type: string
  content: string
  createdAt: string
  usageCount?: number
  onDelete: () => void
  onEdit?: () => void
}) {
  return (

              {type}

            {usageCount !== undefined && (
              Used {usageCount} times
            )}

{content}

            Created: {new Date(createdAt).toLocaleString()}

          {onEdit && (
            <button
              onClick={onEdit}
              className="p-2 text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
              title="Edit"
              aria-label="Edit memory item"
            >
              <Pencil size={16} />
            </button>
          )}
          <button
            onClick={onDelete}
            className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
            title="Delete"
            aria-label="Delete memory item"
          >
            <Trash2 size={16} />
          </button>

  )
}

function InfrastructureCard({
  id: _id,
  name,
  type,
  config,
  createdAt,
  onDelete,
}: {
  id: number
  name: string
  type: string
  config: Record<string, unknown>
  createdAt: string
  onDelete: () => void
}) {
  return (

{name}

              {type}

            {JSON.stringify(config, null, 2)}

            Created: {new Date(createdAt).toLocaleString()}

        <button
          onClick={onDelete}
          className="p-2 text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
          title="Delete"
        >
          <Trash2 size={16} />
        </button>

  )
}

function EmptyState({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (

      <Brain size={48} className="text-slate-600 mx-auto mb-4" />

{title}

{description}

  )
}

<span className="px-2 py-0.5 bg-accent/20 text-accent text-xs rounded-full">

-          <pre className="text-slate-400 text-sm bg-slate-900 p-2 rounded overflow-auto max-h-32">

+          <pre className="text-muted-foreground text-sm bg-background p-2 rounded overflow-auto max-h-32">

-          className="p-2 text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"

+          className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"


Edit

function EmptyState({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (

      <Brain size={48} className="text-slate-600 mx-auto mb-4" />

{title}

{description}

  )
}

function EmptyState({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (

      <Brain size={48} className="text-muted-foreground mx-auto mb-4" />

{title}

{description}

  )
}


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\MemoryManager.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   689→

   690→  )
   691→}
   692→
   693→function EmptyState({
   694→  title,
   695→  description,
   696→}: {
   697→  title: string
   698→  description: string
   699→}) {
   700→  return (
   701→

   702→      <Brain size={48} className="text-muted-foreground mx-auto mb-4" />
   703→
{title}

   704→
{description}

   705→

   706→  )
   707→}
   708→

function EmptyState({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (

      <Brain size={48} className="text-muted-foreground mx-auto mb-4" />

{title}

{description}

  )
}

import { useState, useEffect } from 'react'
import { Brain, Globe, Server, Plus, Search, Trash2, X, Pencil } from 'lucide-react'
import * as Dialog from '@radix-ui/react-dialog'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import { useProjectStore } from '../stores/projectStore'

type MemoryTab = 'project' | 'global' | 'infrastructure'

interface ProjectMemoryItem {
  id: number
  project_id: number
  type: string
  content: string
  metadata: Record<string, unknown> | null
  created_at: string
}

interface GlobalMemoryItem {
  id: number
  type: string
  content: string
  metadata: Record<string, unknown> | null
  usage_count: number
  created_at: string
}

interface InfrastructureItem {
  id: number
  name: string
  type: string
  config: Record<string, unknown>
  projects: number[] | null
  created_at: string
  updated_at: string
}

const API_BASE = 'http://localhost:8000/api/memory'

export default function MemoryManager() {
  const { currentProject } = useProjectStore()
  const [activeTab, setActiveTab] = useState<MemoryTab>('project')
  const [searchQuery, setSearchQuery] = useState('')

  // Data states
  const [projectMemory, setProjectMemory] = useState<ProjectMemoryItem[]>([])
  const [globalMemory, setGlobalMemory] = useState<GlobalMemoryItem[]>([])
  const [infrastructure, setInfrastructure] = useState<InfrastructureItem[]>([])
  const [isLoading, setIsLoading] = useState(false)

  // Dialog states
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newItemType, setNewItemType] = useState('')
  const [newItemContent, setNewItemContent] = useState('')
  const [newItemName, setNewItemName] = useState('')
  const [isSaving, setIsSaving] = useState(false)

  // Delete dialog states
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [itemToDelete, setItemToDelete] = useState<{ id: number; type: MemoryTab } | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

  // Edit dialog states
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editItem, setEditItem] = useState<{ id: number; type: string; content: string; memoryType: MemoryTab } | null>(null)
  const [editItemType, setEditItemType] = useState('')
  const [editItemContent, setEditItemContent] = useState('')
  const [isEditing, setIsEditing] = useState(false)

  const tabs = [
    { id: 'project' as const, label: 'Project Memory', icon: Brain },
    { id: 'global' as const, label: 'Global Memory', icon: Globe },
    { id: 'infrastructure' as const, label: 'Infrastructure', icon: Server },
  ]

  // Fetch data based on active tab
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        if (activeTab === 'project' && currentProject) {
          const response = await fetch(`${API_BASE}/project/${currentProject.id}`)
          if (response.ok) {
            const data = await response.json()
            setProjectMemory(data)
          }
        } else if (activeTab === 'global') {
          const response = await fetch(`${API_BASE}/global`)
          if (response.ok) {
            const data = await response.json()
            setGlobalMemory(data)
          }
        } else if (activeTab === 'infrastructure') {
          const response = await fetch(`${API_BASE}/infrastructure`)
          if (response.ok) {
            const data = await response.json()
            setInfrastructure(data)
          }
        }
      } catch (error) {
        console.error('Failed to fetch memory items:', error)
      } finally {
        setIsLoading(false)
      }
    }
    fetchData()
  }, [activeTab, currentProject])

  const getTypeOptions = () => {
    switch (activeTab) {
      case 'project':
        return ['insight', 'pattern', 'gotcha', 'codebase_map']
      case 'global':
        return ['preference', 'pattern', 'solution']
      case 'infrastructure':
        return ['server', 'docker', 'database', 'deployment']
      default:
        return []
    }
  }

  const handleOpenAddDialog = () => {
    setNewItemType(getTypeOptions()[0] || '')
    setNewItemContent('')
    setNewItemName('')
    setShowAddDialog(true)
  }

  const handleAddItem = async () => {
    if (!newItemType || (!newItemContent.trim() && activeTab !== 'infrastructure')) return
    if (activeTab === 'infrastructure' && !newItemName.trim()) return

    setIsSaving(true)
    try {
      let response: Response

      if (activeTab === 'project' && currentProject) {
        response = await fetch(`${API_BASE}/project/${currentProject.id}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: newItemType, content: newItemContent.trim() }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setProjectMemory([...projectMemory, newItem])
        }
      } else if (activeTab === 'global') {
        response = await fetch(`${API_BASE}/global`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: newItemType, content: newItemContent.trim() }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setGlobalMemory([...globalMemory, newItem])
        }
      } else if (activeTab === 'infrastructure') {
        response = await fetch(`${API_BASE}/infrastructure`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: newItemName.trim(),
            type: newItemType,
            config: { content: newItemContent.trim() }
          }),
        })
        if (response.ok) {
          const newItem = await response.json()
          setInfrastructure([...infrastructure, newItem])
        }
      }

      setShowAddDialog(false)
    } catch (error) {
      console.error('Failed to add memory item:', error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleDeleteClick = (id: number, type: MemoryTab) => {
    setItemToDelete({ id, type })
    setShowDeleteDialog(true)
  }

  const handleDeleteConfirm = async () => {
    if (!itemToDelete) return

    setIsDeleting(true)
    try {
      let endpoint: string

      if (itemToDelete.type === 'project' && currentProject) {
        endpoint = `${API_BASE}/project/${currentProject.id}/${itemToDelete.id}`
      } else if (itemToDelete.type === 'global') {
        endpoint = `${API_BASE}/global/${itemToDelete.id}`
      } else {
        endpoint = `${API_BASE}/infrastructure/${itemToDelete.id}`
      }

      const response = await fetch(endpoint, { method: 'DELETE' })

      if (response.ok || response.status === 204) {
        if (itemToDelete.type === 'project') {
          setProjectMemory(projectMemory.filter(item => item.id !== itemToDelete.id))
        } else if (itemToDelete.type === 'global') {
          setGlobalMemory(globalMemory.filter(item => item.id !== itemToDelete.id))
        } else {
          setInfrastructure(infrastructure.filter(item => item.id !== itemToDelete.id))
        }
      }

      setShowDeleteDialog(false)
      setItemToDelete(null)
    } catch (error) {
      console.error('Failed to delete memory item:', error)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleEditClick = (id: number, type: string, content: string, memoryType: MemoryTab) => {
    setEditItem({ id, type, content, memoryType })
    setEditItemType(type)
    setEditItemContent(content)
    setShowEditDialog(true)
  }

  const handleEditSave = async () => {
    if (!editItem || !editItemContent.trim()) return

    setIsEditing(true)
    try {
      let endpoint: string
      let body: Record<string, unknown>

      if (editItem.memoryType === 'project' && currentProject) {
        endpoint = `${API_BASE}/project/${currentProject.id}/${editItem.id}`
        body = { type: editItemType, content: editItemContent.trim() }
      } else if (editItem.memoryType === 'global') {
        endpoint = `${API_BASE}/global/${editItem.id}`
        body = { type: editItemType, content: editItemContent.trim() }
      } else {
        // Infrastructure uses different update endpoint
        setShowEditDialog(false)
        setEditItem(null)
        return
      }

      const response = await fetch(endpoint, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      })

      if (response.ok) {
        const updatedItem = await response.json()
        if (editItem.memoryType === 'project') {
          setProjectMemory(projectMemory.map(item =>
            item.id === editItem.id ? updatedItem : item
          ))
        } else if (editItem.memoryType === 'global') {
          setGlobalMemory(globalMemory.map(item =>
            item.id === editItem.id ? updatedItem : item
          ))
        }
      }

      setShowEditDialog(false)
      setEditItem(null)
    } catch (error) {
      console.error('Failed to update memory item:', error)
    } finally {
      setIsEditing(false)
    }
  }

  const filterItems = <T extends { content?: string; name?: string; type: string }>(items: T[]) => {
    if (!searchQuery) return items
    const query = searchQuery.toLowerCase()
    return items.filter(item =>
      item.content?.toLowerCase().includes(query) ||
      item.name?.toLowerCase().includes(query) ||
      item.type.toLowerCase().includes(query)
    )
  }

  const filteredProjectMemory = filterItems(projectMemory)
  const filteredGlobalMemory = filterItems(globalMemory)
  const filteredInfrastructure = filterItems(infrastructure)

  return (

      {/* Header */}

Memory Manager

        <button
          onClick={handleOpenAddDialog}
          className="btn-accent flex items-center gap-2"
        >
          <Plus size={18} />
          Add Memory Item
        </button>

      {/* Tabs */}

        {tabs.map((tab) => {
          const Icon = tab.icon
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2 rounded-md transition-colors ${
                activeTab === tab.id
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              <Icon size={16} />
              {tab.label}
            </button>
          )
        })}

      {/* Search */}

        <Search
          size={18}
          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
        />
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search memory items..."
          className="w-full pl-10 pr-4 py-2 bg-card border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
        />

      {/* Content */}

        {isLoading ? (

Loading...

        ) : (
          <>
            {activeTab === 'project' && (

                {filteredProjectMemory.length === 0 ? (
                  <EmptyState
                    title="No Project Memory"
                    description="Memory items from your current project will appear here."
                  />
                ) : (
                  filteredProjectMemory.map(item => (
                    <MemoryCard
                      key={item.id}
                      id={item.id}
                      type={item.type}
                      content={item.content}
                      createdAt={item.created_at}
                      onDelete={() => handleDeleteClick(item.id, 'project')}
                      onEdit={() => handleEditClick(item.id, item.type, item.content, 'project')}
                    />
                  ))
                )}

            )}

            {activeTab === 'global' && (

                {filteredGlobalMemory.length === 0 ? (
                  <EmptyState
                    title="No Global Memory"
                    description="Cross-project patterns and preferences will appear here."
                  />
                ) : (
                  filteredGlobalMemory.map(item => (
                    <MemoryCard
                      key={item.id}
                      id={item.id}
                      type={item.type}
                      content={item.content}
                      createdAt={item.created_at}
                      usageCount={item.usage_count}
                      onDelete={() => handleDeleteClick(item.id, 'global')}
                      onEdit={() => handleEditClick(item.id, item.type, item.content, 'global')}
                    />
                  ))
                )}

            )}

            {activeTab === 'infrastructure' && (

                {filteredInfrastructure.length === 0 ? (
                  <EmptyState
                    title="No Infrastructure Config"
                    description="Server and deployment configurations will appear here."
                  />
                ) : (
                  filteredInfrastructure.map(item => (
                    <InfrastructureCard
                      key={item.id}
                      id={item.id}
                      name={item.name}
                      type={item.type}
                      config={item.config}
                      createdAt={item.created_at}
                      onDelete={() => handleDeleteClick(item.id, 'infrastructure')}
                    />
                  ))
                )}

            )}
          </>
        )}

      {/* Add Memory Dialog */}
      <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">

              <Dialog.Title className="text-xl font-semibold text-foreground">
                Add {activeTab === 'project' ? 'Project' : activeTab === 'global' ? 'Global' : 'Infrastructure'} Memory
              </Dialog.Title>
              <Dialog.Close asChild>
                <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">
                  <X size={20} />
                </button>
              </Dialog.Close>

              {activeTab === 'infrastructure' && (

                  Name *
                  <input
                    type="text"
                    value={newItemName}
                    onChange={(e) => setNewItemName(e.target.value)}
                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    placeholder="Enter config name"
                  />

              )}

                Type *
                <select
                  value={newItemType}
                  onChange={(e) => setNewItemType(e.target.value)}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                >
                  {getTypeOptions().map(type => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>

                Content *
                <textarea
                  value={newItemContent}
                  onChange={(e) => setNewItemContent(e.target.value)}
                  rows={4}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent resize-none"
                  placeholder="Enter memory content..."
                />

              <Dialog.Close asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </Dialog.Close>
              <button
                onClick={handleAddItem}
                disabled={isSaving || !newItemContent.trim() || (activeTab === 'infrastructure' && !newItemName.trim())}
                className="px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
              >
                {isSaving ? 'Saving...' : 'Add Item'}
              </button>

          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

      {/* Delete Confirmation Dialog */}
      <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialog.Portal>
          <AlertDialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <AlertDialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">
            <AlertDialog.Title className="text-xl font-semibold text-foreground">
              Delete Memory Item
            </AlertDialog.Title>
            <AlertDialog.Description className="mt-3 text-muted-foreground">
              Are you sure you want to delete this memory item? This action cannot be undone.
            </AlertDialog.Description>

              <AlertDialog.Cancel asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </AlertDialog.Cancel>
              <AlertDialog.Action asChild>
                <button
                  onClick={handleDeleteConfirm}
                  disabled={isDeleting}
                  className="px-4 py-2 text-sm bg-destructive hover:bg-destructive/80 text-white rounded-lg transition-colors disabled:opacity-50"
                >
                  {isDeleting ? 'Deleting...' : 'Delete'}
                </button>
              </AlertDialog.Action>

          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>

      {/* Edit Memory Dialog */}
      <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
          <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg p-4 md:p-6 w-[calc(100%-2rem)] max-w-md max-h-[calc(100vh-2rem)] overflow-y-auto z-50 shadow-xl">

              <Dialog.Title className="text-xl font-semibold text-foreground">
                Edit Memory Item
              </Dialog.Title>
              <Dialog.Close asChild>
                <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">
                  <X size={20} />
                </button>
              </Dialog.Close>

                Type *
                <select
                  value={editItemType}
                  onChange={(e) => setEditItemType(e.target.value)}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                >
                  {(editItem?.memoryType === 'project'
                    ? ['insight', 'pattern', 'gotcha', 'codebase_map']
                    : ['preference', 'pattern', 'solution']
                  ).map(type => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>

                Content *
                <textarea
                  value={editItemContent}
                  onChange={(e) => setEditItemContent(e.target.value)}
                  rows={4}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent resize-none"
                  placeholder="Enter memory content..."
                />

              <Dialog.Close asChild>
                <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
                  Cancel
                </button>
              </Dialog.Close>
              <button
                onClick={handleEditSave}
                disabled={isEditing || !editItemContent.trim()}
                className="px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
              >
                {isEditing ? 'Saving...' : 'Save Changes'}
              </button>

          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

  )
}

function MemoryCard({
  id: _id,
  type,
  content,
  createdAt,
  usageCount,
  onDelete,
  onEdit,
}: {
  id: number
  type: string
  content: string
  createdAt: string
  usageCount?: number
  onDelete: () => void
  onEdit?: () => void
}) {
  return (

              {type}

            {usageCount !== undefined && (
              Used {usageCount} times
            )}

{content}

            Created: {new Date(createdAt).toLocaleString()}

          {onEdit && (
            <button
              onClick={onEdit}
              className="p-2 text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
              title="Edit"
              aria-label="Edit memory item"
            >
              <Pencil size={16} />
            </button>
          )}
          <button
            onClick={onDelete}
            className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
            title="Delete"
            aria-label="Delete memory item"
          >
            <Trash2 size={16} />
          </button>

  )
}

function InfrastructureCard({
  id: _id,
  name,
  type,
  config,
  createdAt,
  onDelete,
}: {
  id: number
  name: string
  type: string
  config: Record<string, unknown>
  createdAt: string
  onDelete: () => void
}) {
  return (

{name}

              {type}

            {JSON.stringify(config, null, 2)}

            Created: {new Date(createdAt).toLocaleString()}

        <button
          onClick={onDelete}
          className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
          title="Delete"
        >
          <Trash2 size={16} />
        </button>

  )
}

function EmptyState({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (

      <Brain size={48} className="text-slate-600 mx-auto mb-4" />

{title}

{description}

  )
}

-    <div className="text-center py-12 bg-slate-800 rounded-lg border border-slate-700">

-      <Brain size={48} className="text-slate-600 mx-auto mb-4" />

+    <div className="text-center py-12 bg-card rounded-lg border border-border">

+      <Brain size={48} className="text-muted-foreground mx-auto mb-4" />


MemoryManager.tsx is done. Now let me update the remaining files in parallel:


TodoWrite

Update Dashboard.tsx theme colors

Update KanbanBoard.tsx theme colors

Update MemoryManager.tsx theme colors

Update InfrastructureConfig.tsx theme colors

Updating InfrastructureConfig.tsx theme colors

Update ProjectWizard.tsx theme colors

Update AgentTerminals.tsx theme colors

Updating AgentTerminals.tsx theme colors

Verify light theme in browser


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

Update Dashboard.tsx theme colors

Update KanbanBoard.tsx theme colors

Update MemoryManager.tsx theme colors

Update InfrastructureConfig.tsx theme colors

Updating InfrastructureConfig.tsx theme colors

Update ProjectWizard.tsx theme colors

Update AgentTerminals.tsx theme colors

Updating AgentTerminals.tsx theme colors

Verify light theme in browser

Update Dashboard.tsx theme colors

Update KanbanBoard.tsx theme colors

Update MemoryManager.tsx theme colors

Update ProjectWizard.tsx theme colors

Update AgentTerminals.tsx theme colors

Verify light theme in browser


Edit

Infrastructure Configuration

            Manage servers, Docker hosts, and deployment targets

Infrastructure Configuration

            Manage servers, Docker hosts, and deployment targets


{/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-slate-600 mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-slate-400" />
                  </button>
                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-error" />
                  </button>

            ))}

        )}

  )

{/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-muted-foreground mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-secondary rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-muted-foreground" />
                  </button>
                  <button className="p-2 hover:bg-secondary rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-destructive" />
                  </button>

            ))}

        )}

  )


function ConfigTypeCard({
  icon: Icon,
  title,
  count,
  color,
}: {
  icon: typeof Server
  title: string
  count: number
  color: string
}) {
  return (

        <Icon className={color} size={24} />

{title}

{count}

  )
}

function ConfigTypeCard({
  icon: Icon,
  title,
  count,
  color,
}: {
  icon: typeof Server
  title: string
  count: number
  color: string
}) {
  return (

        <Icon className={color} size={24} />

{title}

{count}

  )
}


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\InfrastructureConfig.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
     7→  return (
     8→

     9→      {/* Header */}
    10→

    11→

    12→
Infrastructure Configuration

    13→

    14→            Manage servers, Docker hosts, and deployment targets
    15→

    16→

    17→        <button className="btn-accent flex items-center gap-2">
    18→          <Plus size={18} />
    19→          Add Configuration
    20→        </button>

import { useState } from 'react'
import { Server, Database, Cloud, Plus, Edit, Trash2 } from 'lucide-react'

export default function InfrastructureConfig() {
  const [configs] = useState<any[]>([])

  return (

      {/* Header */}

Infrastructure Configuration

            Manage servers, Docker hosts, and deployment targets

        <button className="btn-accent flex items-center gap-2">
          <Plus size={18} />
          Add Configuration
        </button>

      {/* Config Types */}

        <ConfigTypeCard
          icon={Server}
          title="Servers"
          count={configs.filter((c) => c.type === 'server').length}
          color="text-primary-400"
        />
        <ConfigTypeCard
          icon={Database}
          title="Docker Hosts"
          count={configs.filter((c) => c.type === 'docker').length}
          color="text-accent"
        />
        <ConfigTypeCard
          icon={Cloud}
          title="Deployment Targets"
          count={configs.filter((c) => c.type === 'deployment').length}
          color="text-warning"
        />

      {/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-slate-600 mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-slate-400" />
                  </button>
                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-error" />
                  </button>

            ))}

        )}

  )
}

function ConfigTypeCard({
  icon: Icon,
  title,
  count,
  color,
}: {
  icon: typeof Server
  title: string
  count: number
  color: string
}) {
  return (

        <Icon className={color} size={24} />

{title}

{count}

  )
}

<div className="flex items-center justify-between mb-6">

-          <p className="text-slate-400 mt-1">

+          <p className="text-muted-foreground mt-1">


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\InfrastructureConfig.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
    41→          color="text-warning"
    42→        />
    43→

    44→
    45→      {/* Config List */}
    46→

    47→        {configs.length === 0 ? (
    48→

    49→            <Server size={48} className="text-muted-foreground mx-auto mb-4" />
    50→

    51→              No Infrastructure Configured
    52→

    53→

    54→              Add servers, Docker hosts, or deployment targets to get started.
    55→

    56→

    57→        ) : (
    58→

    59→            {configs.map((config) => (
    60→

    64→

    65→

    74→                    {config.type === 'server' ? (
    75→                      <Server size={20} className="text-primary-400" />
    76→                    ) : config.type === 'docker' ? (
    77→                      <Database size={20} className="text-accent" />
    78→                    ) : (
    79→                      <Cloud size={20} className="text-warning" />
    80→                    )}
    81→

    82→

    83→
{config.name}

    84→

    85→                      {config.type}
    86→

    87→

    88→

    89→

    90→                  <button className="p-2 hover:bg-secondary rounded" aria-label="Edit configuration">
    91→                    <Edit size={16} className="text-muted-foreground" />
    92→                  </button>
    93→                  <button className="p-2 hover:bg-secondary rounded" aria-label="Delete configuration">
    94→                    <Trash2 size={16} className="text-destructive" />
    95→                  </button>
    96→

    97→

    98→            ))}
    99→

   100→        )}
   101→

   102→

   103→  )
   104→}
   105→
   106→function ConfigTypeCard({
   107→  icon: Icon,

{/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-slate-600 mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-slate-400" />
                  </button>
                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-error" />
                  </button>

            ))}

        )}

  )

{/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-muted-foreground mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-secondary rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-muted-foreground" />
                  </button>
                  <button className="p-2 hover:bg-secondary rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-destructive" />
                  </button>

            ))}

        )}

  )

-          <div className="text-center py-12 bg-slate-800 rounded-lg border border-slate-700">

-            <Server size={48} className="text-slate-600 mx-auto mb-4" />

-            <h3 className="text-lg font-semibold text-slate-400">

+          <div className="text-center py-12 bg-card rounded-lg border border-border">

+            <Server size={48} className="text-muted-foreground mx-auto mb-4" />

+            <h3 className="text-lg font-semibold text-muted-foreground">

-            <p className="text-slate-500 mt-2">

+            <p className="text-muted-foreground mt-2">

-                className="bg-slate-800 rounded-lg p-4 border border-slate-700 flex items-center justify-between"

+                className="bg-card rounded-lg p-4 border border-border flex items-center justify-between"

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

+                        ? 'bg-primary/20'

-                    <p className="text-sm text-slate-400 capitalize">

+                    <p className="text-sm text-muted-foreground capitalize">

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

-                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Edit configuration">

-                    <Edit size={16} className="text-slate-400" />

+                  <button className="p-2 hover:bg-secondary rounded" aria-label="Edit configuration">

+                    <Edit size={16} className="text-muted-foreground" />

-                  <button className="p-2 hover:bg-slate-700 rounded" aria-label="Delete configuration">

-                    <Trash2 size={16} className="text-error" />

+                  <button className="p-2 hover:bg-secondary rounded" aria-label="Delete configuration">

+                    <Trash2 size={16} className="text-destructive" />


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\InfrastructureConfig.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   102→

   103→  )
   104→}
   105→
   106→function ConfigTypeCard({
   107→  icon: Icon,
   108→  title,
   109→  count,
   110→  color,
   111→}: {
   112→  icon: typeof Server
   113→  title: string
   114→  count: number
   115→  color: string
   116→}) {
   117→  return (
   118→

   119→

   120→        <Icon className={color} size={24} />
   121→

   122→
{title}

   123→
{count}

   124→

   125→

   126→

   127→  )
   128→}
   129→

import { useState } from 'react'
import { Server, Database, Cloud, Plus, Edit, Trash2 } from 'lucide-react'

export default function InfrastructureConfig() {
  const [configs] = useState<any[]>([])

  return (

      {/* Header */}

Infrastructure Configuration

            Manage servers, Docker hosts, and deployment targets

        <button className="btn-accent flex items-center gap-2">
          <Plus size={18} />
          Add Configuration
        </button>

      {/* Config Types */}

        <ConfigTypeCard
          icon={Server}
          title="Servers"
          count={configs.filter((c) => c.type === 'server').length}
          color="text-primary-400"
        />
        <ConfigTypeCard
          icon={Database}
          title="Docker Hosts"
          count={configs.filter((c) => c.type === 'docker').length}
          color="text-accent"
        />
        <ConfigTypeCard
          icon={Cloud}
          title="Deployment Targets"
          count={configs.filter((c) => c.type === 'deployment').length}
          color="text-warning"
        />

      {/* Config List */}

        {configs.length === 0 ? (

            <Server size={48} className="text-muted-foreground mx-auto mb-4" />

              No Infrastructure Configured

              Add servers, Docker hosts, or deployment targets to get started.

        ) : (

            {configs.map((config) => (

                    {config.type === 'server' ? (
                      <Server size={20} className="text-primary-400" />
                    ) : config.type === 'docker' ? (
                      <Database size={20} className="text-accent" />
                    ) : (
                      <Cloud size={20} className="text-warning" />
                    )}

{config.name}

                      {config.type}

                  <button className="p-2 hover:bg-secondary rounded" aria-label="Edit configuration">
                    <Edit size={16} className="text-muted-foreground" />
                  </button>
                  <button className="p-2 hover:bg-secondary rounded" aria-label="Delete configuration">
                    <Trash2 size={16} className="text-destructive" />
                  </button>

            ))}

        )}

  )
}

function ConfigTypeCard({
  icon: Icon,
  title,
  count,
  color,
}: {
  icon: typeof Server
  title: string
  count: number
  color: string
}) {
  return (

        <Icon className={color} size={24} />

{title}

{count}

  )
}

-    <div className="bg-slate-800 rounded-lg p-4 border border-slate-700">

+    <div className="bg-card rounded-lg p-4 border border-border">

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


Now let me update ProjectWizard.tsx:


{/* Progress */}

            Step {step} of {totalSteps}

            {Math.round((step / totalSteps) * 100)}% complete

          <div
            className="h-full bg-accent transition-all duration-300"
            style={{ width: `${(step / totalSteps) * 100}%` }}
          />

{/* Progress */}

            Step {step} of {totalSteps}

            {Math.round((step / totalSteps) * 100)}% complete

          <div
            className="h-full bg-accent transition-all duration-300"
            style={{ width: `${(step / totalSteps) * 100}%` }}
          />


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\ProjectWizard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
    91→  }
    92→
    93→  return (
    94→

    95→      {/* Progress */}
    96→

    97→

    98→
    99→            Step {step} of {totalSteps}
   100→
   101→
   102→            {Math.round((step / totalSteps) * 100)}% complete
   103→
   104→

   105→

   106→          <div
   107→            className="h-full bg-accent transition-all duration-300"
   108→            style={{ width: `${(step / totalSteps) * 100}%` }}
   109→          />
   110→

   111→

   112→
   113→      {/* Step Content */}
   114→

   115→        {step === 1 && (

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useProjectStore } from '../stores/projectStore'
import { ArrowLeft, ArrowRight, Check, Loader2, Plus, X } from 'lucide-react'

interface TechStack {
  frontend: string[]
  backend: string[]
  database: string[]
  other: string[]
}

interface DesignPreferences {
  theme: 'light' | 'dark' | 'system'
  primaryColor: string
  style: 'minimal' | 'modern' | 'classic'
  designMode: 'mvp' | 'finished'
}

export default function ProjectWizard() {
  const navigate = useNavigate()
  const { createProject, isLoading } = useProjectStore()
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    complexity: 'medium',
    path: '',
  })
  const [techStack, setTechStack] = useState<TechStack>({
    frontend: [],
    backend: [],
    database: [],
    other: [],
  })
  const [features, setFeatures] = useState<string[]>([])
  const [newFeature, setNewFeature] = useState('')
  const [designPreferences, setDesignPreferences] = useState<DesignPreferences>({
    theme: 'dark',
    primaryColor: '#0d9488',
    style: 'modern',
    designMode: 'mvp',
  })
  const [errors, setErrors] = useState<{ name?: string }>({})
  const [touched, setTouched] = useState<{ name?: boolean }>({})

  const totalSteps = 5

  const validateName = (name: string): string | undefined => {
    if (!name.trim()) {
      return 'Project name is required'
    }
    if (name.trim().length < 2) {
      return 'Project name must be at least 2 characters'
    }
    if (name.trim().length > 100) {
      return 'Project name must be less than 100 characters'
    }
    return undefined
  }

  const handleNext = () => {
    if (step === 1) {
      const nameError = validateName(formData.name)
      setTouched({ ...touched, name: true })
      setErrors({ ...errors, name: nameError })
      if (nameError) return
    }
    if (step < totalSteps) {
      setStep(step + 1)
    }
  }

  const handleBack = () => {
    if (step > 1) {
      setStep(step - 1)
    }
  }

  const handleSubmit = async () => {
    try {
      await createProject({
        name: formData.name,
        description: formData.description,
        design_mode: designPreferences.designMode,
      })
      navigate('/')
    } catch (error) {
      console.error('Failed to create project:', error)
    }
  }

  return (

      {/* Progress */}

            Step {step} of {totalSteps}

            {Math.round((step / totalSteps) * 100)}% complete

          <div
            className="h-full bg-accent transition-all duration-300"
            style={{ width: `${(step / totalSteps) * 100}%` }}
          />

      {/* Step Content */}

        {step === 1 && (

Project Basics

                  Project Name *

                <input
                  id="project-name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => {
                    const newName = e.target.value
                    setFormData({ ...formData, name: newName })
                    if (touched.name) {
                      setErrors({ ...errors, name: validateName(newName) })
                    }
                  }}
                  onBlur={() => {
                    setTouched({ ...touched, name: true })
                    setErrors({ ...errors, name: validateName(formData.name) })
                  }}
                  placeholder="My Awesome Project"
                  className={`w-full px-4 py-2 bg-slate-700 border rounded-lg focus:outline-none focus:ring-2 ${
                    touched.name && errors.name
                      ? 'border-red-500 focus:ring-red-500'
                      : 'border-slate-600 focus:ring-accent'
                  }`}
                />
                {touched.name && errors.name && (

{errors.name}

                )}

                  Description

                <textarea
                  id="project-description"
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  placeholder="A brief description of your project..."
                  rows={3}
                  className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent"
                />

        )}

        {step === 2 && (

Technology Stack

              {/* Frontend Technologies */}

                Frontend

                  {['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'HTML/CSS'].map((tech) => (
                    <button
                      key={tech}
                      onClick={() => {
                        const current = techStack.frontend
                        setTechStack({
                          ...techStack,
                          frontend: current.includes(tech)
                            ? current.filter((t) => t !== tech)
                            : [...current, tech],
                        })
                      }}
                      className={`px-3 py-1.5 rounded-lg border text-sm transition-colors ${
                        techStack.frontend.includes(tech)
                          ? 'border-accent bg-accent/20 text-accent'
                          : 'border-slate-600 hover:border-slate-500'
                      }`}
                    >
                      {tech}
                    </button>
                  ))}

              {/* Backend Technologies */}

                Backend

                  {['Python', 'Node.js', 'Go', 'Rust', 'Java', 'Ruby', 'PHP'].map((tech) => (
                    <button
                      key={tech}
                      onClick={() => {
                        const current = techStack.backend
                        setTechStack({
                          ...techStack,
                          backend: current.includes(tech)
                            ? current.filter((t) => t !== tech)
                            : [...current, tech],
                        })
                      }}
                      className={`px-3 py-1.5 rounded-lg border text-sm transition-colors ${
                        techStack.backend.includes(tech)
                          ? 'border-accent bg-accent/20 text-accent'
                          : 'border-slate-600 hover:border-slate-500'
                      }`}
                    >
                      {tech}
                    </button>
                  ))}

              {/* Database */}

                Database

                  {['PostgreSQL', 'MySQL', 'SQLite', 'MongoDB', 'Redis', 'Firebase'].map((tech) => (
                    <button
                      key={tech}
                      onClick={() => {
                        const current = techStack.database
                        setTechStack({
                          ...techStack,
                          database: current.includes(tech)
                            ? current.filter((t) => t !== tech)
                            : [...current, tech],
                        })
                      }}
                      className={`px-3 py-1.5 rounded-lg border text-sm transition-colors ${
                        techStack.database.includes(tech)
                          ? 'border-accent bg-accent/20 text-accent'
                          : 'border-slate-600 hover:border-slate-500'
                      }`}
                    >
                      {tech}
                    </button>
                  ))}

        )}

        {step === 3 && (

Features

              Add the main features you want your project to have.

              {/* Add feature input */}

                Add a feature
                <input
                  id="new-feature"
                  type="text"
                  value={newFeature}
                  onChange={(e) => setNewFeature(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && newFeature.trim()) {
                      setFeatures([...features, newFeature.trim()])
                      setNewFeature('')
                    }
                  }}
                  placeholder="Enter a feature..."
                  className="flex-1 px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent"
                />
                <button
                  onClick={() => {
                    if (newFeature.trim()) {
                      setFeatures([...features, newFeature.trim()])
                      setNewFeature('')
                    }
                  }}
                  disabled={!newFeature.trim()}
                  className="btn-accent disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Plus size={18} />
                </button>

              {/* Feature list */}

                {features.length === 0 ? (

No features added yet

                ) : (
                  features.map((feature, index) => (

                      {feature}
                      <button
                        onClick={() => setFeatures(features.filter((_, i) => i !== index))}
                        className="text-slate-400 hover:text-destructive transition-colors"
                      >
                        <X size={16} />
                      </button>

                  ))
                )}

        )}

        {step === 4 && (

Design Preferences

              {/* Design Mode - MVP vs Finished */}

                Design Mode

                  Choose how strictly design requirements should be applied.

                  <button
                    onClick={() => setDesignPreferences({ ...designPreferences, designMode: 'mvp' })}
                    className={`w-full p-4 rounded-lg border text-left transition-colors ${
                      designPreferences.designMode === 'mvp'
                        ? 'border-accent bg-accent/10'
                        : 'border-slate-600 hover:border-slate-500'
                    }`}
                  >

MVP Mode

                      {designPreferences.designMode === 'mvp' && (
                        Selected
                      )}

                      Functional drafts are acceptable. Focus on getting features working first,
                      with polished design coming later. Best for rapid prototyping and early development.

                  </button>
                  <button
                    onClick={() => setDesignPreferences({ ...designPreferences, designMode: 'finished' })}
                    className={`w-full p-4 rounded-lg border text-left transition-colors ${
                      designPreferences.designMode === 'finished'
                        ? 'border-accent bg-accent/10'
                        : 'border-slate-600 hover:border-slate-500'
                    }`}
                  >

Finished Mode

                      {designPreferences.designMode === 'finished' && (
                        Selected
                      )}

                      Stricter design requirements apply. All frontend work must meet polish standards
                      with proper typography, color, motion, and spatial composition. Best for production-ready builds.

                  </button>

              {/* Theme */}

                Theme

                  {(['light', 'dark', 'system'] as const).map((theme) => (
                    <button
                      key={theme}
                      onClick={() => setDesignPreferences({ ...designPreferences, theme })}
                      className={`flex-1 p-3 rounded-lg border text-center capitalize transition-colors ${
                        designPreferences.theme === theme
                          ? 'border-accent bg-accent/10'
                          : 'border-slate-600 hover:border-slate-500'
                      }`}
                    >
                      {theme}
                    </button>
                  ))}

              {/* Style */}

                UI Style

                  {(['minimal', 'modern', 'classic'] as const).map((style) => (
                    <button
                      key={style}
                      onClick={() => setDesignPreferences({ ...designPreferences, style })}
                      className={`w-full p-3 rounded-lg border text-left transition-colors ${
                        designPreferences.style === style
                          ? 'border-accent bg-accent/10'
                          : 'border-slate-600 hover:border-slate-500'
                      }`}
                    >

{style}

                        {style === 'minimal' && 'Clean and simple design'}
                        {style === 'modern' && 'Contemporary with subtle effects'}
                        {style === 'classic' && 'Traditional and familiar layout'}

                    </button>
                  ))}

              {/* Primary Color */}

                Primary Color

                  {['#0d9488', '#3b82f6', '#8b5cf6', '#ef4444', '#f59e0b'].map((color) => (
                    <button
                      key={color}
                      onClick={() => setDesignPreferences({ ...designPreferences, primaryColor: color })}
                      className={`w-10 h-10 rounded-lg border-2 transition-transform ${
                        designPreferences.primaryColor === color
                          ? 'border-white scale-110'
                          : 'border-transparent hover:scale-105'
                      }`}
                      style={{ backgroundColor: color }}
                    />
                  ))}

        )}

        {step === 5 && (

Review & Create

              {/* Project Basics */}

Project Name

{formData.name || 'Not set'}

Description

                  {formData.description || 'No description'}

              {/* Technology Stack */}

Technology Stack

                  {techStack.frontend.length > 0 && (

Frontend: {techStack.frontend.join(', ')}

                  )}
                  {techStack.backend.length > 0 && (

Backend: {techStack.backend.join(', ')}

                  )}
                  {techStack.database.length > 0 && (

Database: {techStack.database.join(', ')}

                  )}
                  {techStack.frontend.length === 0 && techStack.backend.length === 0 && techStack.database.length === 0 && (

No technologies selected

                  )}

              {/* Features */}

Features

                {features.length > 0 ? (

                    {features.map((feature, i) => (

{feature}

                    ))}

                ) : (

No features added

                )}

              {/* Design Preferences */}

Design Preferences

                    Design Mode:{' '}

                      {designPreferences.designMode === 'mvp' ? 'MVP (Functional Drafts)' : 'Finished (Polished)'}

Theme: {designPreferences.theme}

Style: {designPreferences.style}

                    Primary Color:

        )}

      {/* Navigation */}

        <button
          onClick={step === 1 ? () => navigate('/') : handleBack}
          className="btn-secondary flex items-center gap-2"
        >
          <ArrowLeft size={18} />
          {step === 1 ? 'Cancel' : 'Back'}
        </button>

        {step < totalSteps ? (
          <button
            onClick={handleNext}
            disabled={step === 1 && !formData.name.trim()}
            className="btn-accent flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Next
            <ArrowRight size={18} />
          </button>
        ) : (
          <button
            onClick={handleSubmit}
            disabled={isLoading || !formData.name.trim()}
            className="btn-accent flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? (
              <>
                <Loader2 size={18} className="animate-spin" />
                Creating...
              </>
            ) : (
              <>
                <Check size={18} />
                Create Project
              </>
            )}
          </button>
        )}

  )
}

<div className="flex items-center justify-between mb-2">

-          <span className="text-sm text-slate-400">

+          <span className="text-sm text-muted-foreground">

-        <div className="w-full h-2 bg-slate-700 rounded-full overflow-hidden">

+        <div className="w-full h-2 bg-secondary rounded-full overflow-hidden">


      {/* Step Content */}
      <div className="bg-slate-800 rounded-lg p-6 border border-slate-700 mb-6">

      {/* Step Content */}
      <div className="bg-card rounded-lg p-6 border border-border mb-6">


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\ProjectWizard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   109→          />
   110→

   111→

   112→
   113→      {/* Step Content */}
   114→

   115→        {step === 1 && (
   116→

   117→
Project Basics

   118→

      {/* Step Content */}
      <div className="bg-slate-800 rounded-lg p-6 border border-slate-700 mb-6">

      {/* Step Content */}
      <div className="bg-card rounded-lg p-6 border border-border mb-6">

-      <div className="bg-slate-800 rounded-lg p-6 border border-slate-700 mb-6">

+      <div className="bg-card rounded-lg p-6 border border-border mb-6">


                <input
                  id="project-name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => {
                    const newName = e.target.value
                    setFormData({ ...formData, name: newName })
                    if (touched.name) {
                      setErrors({ ...errors, name: validateName(newName) })
                    }
                  }}
                  onBlur={() => {
                    setTouched({ ...touched, name: true })
                    setErrors({ ...errors, name: validateName(formData.name) })
                  }}
                  placeholder="My Awesome Project"
                  className={`w-full px-4 py-2 bg-slate-700 border rounded-lg focus:outline-none focus:ring-2 ${
                    touched.name && errors.name
                      ? 'border-red-500 focus:ring-red-500'
                      : 'border-slate-600 focus:ring-accent'
                  }`}
                />

                <input
                  id="project-name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => {
                    const newName = e.target.value
                    setFormData({ ...formData, name: newName })
                    if (touched.name) {
                      setErrors({ ...errors, name: validateName(newName) })
                    }
                  }}
                  onBlur={() => {
                    setTouched({ ...touched, name: true })
                    setErrors({ ...errors, name: validateName(formData.name) })
                  }}
                  placeholder="My Awesome Project"
                  className={`w-full px-4 py-2 bg-secondary border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 ${
                    touched.name && errors.name
                      ? 'border-red-500 focus:ring-red-500'
                      : 'border-border focus:ring-accent'
                  }`}
                />


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\ProjectWizard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   119→

   120→
   121→                  Project Name *
   122→
   123→                <input
   124→                  id="project-name"
   125→                  type="text"
   126→                  value={formData.name}
   127→                  onChange={(e) => {
   128→                    const newName = e.target.value
   129→                    setFormData({ ...formData, name: newName })
   130→                    if (touched.name) {
   131→                      setErrors({ ...errors, name: validateName(newName) })
   132→                    }
   133→                  }}
   134→                  onBlur={() => {
   135→                    setTouched({ ...touched, name: true })
   136→                    setErrors({ ...errors, name: validateName(formData.name) })
   137→                  }}
   138→                  placeholder="My Awesome Project"
   139→                  className={`w-full px-4 py-2 bg-secondary border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 ${
   140→                    touched.name && errors.name
   141→                      ? 'border-red-500 focus:ring-red-500'
   142→                      : 'border-border focus:ring-accent'
   143→                  }`}
   144→                />
   145→                {touched.name && errors.name && (
   146→
{errors.name}

   147→                )}
   148→

                <input
                  id="project-name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => {
                    const newName = e.target.value
                    setFormData({ ...formData, name: newName })
                    if (touched.name) {
                      setErrors({ ...errors, name: validateName(newName) })
                    }
                  }}
                  onBlur={() => {
                    setTouched({ ...touched, name: true })
                    setErrors({ ...errors, name: validateName(formData.name) })
                  }}
                  placeholder="My Awesome Project"
                  className={`w-full px-4 py-2 bg-slate-700 border rounded-lg focus:outline-none focus:ring-2 ${
                    touched.name && errors.name
                      ? 'border-red-500 focus:ring-red-500'
                      : 'border-slate-600 focus:ring-accent'
                  }`}
                />

                <input
                  id="project-name"
                  type="text"
                  value={formData.name}
                  onChange={(e) => {
                    const newName = e.target.value
                    setFormData({ ...formData, name: newName })
                    if (touched.name) {
                      setErrors({ ...errors, name: validateName(newName) })
                    }
                  }}
                  onBlur={() => {
                    setTouched({ ...touched, name: true })
                    setErrors({ ...errors, name: validateName(formData.name) })
                  }}
                  placeholder="My Awesome Project"
                  className={`w-full px-4 py-2 bg-secondary border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 ${
                    touched.name && errors.name
                      ? 'border-red-500 focus:ring-red-500'
                      : 'border-border focus:ring-accent'
                  }`}
                />

-                  className={`w-full px-4 py-2 bg-slate-700 border rounded-lg focus:outline-none focus:ring-2 ${

+                  className={`w-full px-4 py-2 bg-secondary border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 ${

-                      : 'border-slate-600 focus:ring-accent'

+                      : 'border-border focus:ring-accent'


                  Description

                <textarea
                  id="project-description"
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  placeholder="A brief description of your project..."
                  rows={3}
                  className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent"
                />

                  Description

                <textarea
                  id="project-description"
                  value={formData.description}
                  onChange={(e) =>
                    setFormData({ ...formData, description: e.target.value })
                  }
                  placeholder="A brief description of your project..."
                  rows={3}
                  className="w-full px-4 py-2 bg-secondary border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                />