The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\Dashboard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   150→      setIsSaving(false)
   151→    }
   152→  }
   153→
   154→  if (!currentProject) {
   155→    return (
   156→

   157→        <FolderOpen size={64} className="text-muted-foreground mb-4" />
   158→

   159→          No Project Selected
   160→

   161→

   162→          Select a project from the sidebar or create a new one to get started.
   163→

   164→

   165→    )
   166→  }
   167→
   168→  const stats = [
   169→    {
   170→      label: 'Tasks Completed',

if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-muted-foreground mb-4" />

          No Project Selected

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

    )
  }

import { useEffect, useState } from 'react'
import { useProjectStore } from '../stores/projectStore'
import { useAgentStore } from '../stores/agentStore'
import { useToastStore } from '../components/Toast'
import {
  FolderOpen,
  CheckCircle,
  Clock,
  AlertTriangle,
  Activity,
  Trash2,
  Pencil,
  Check,
  Palette,
  X,
} from 'lucide-react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import * as Dialog from '@radix-ui/react-dialog'

interface TaskStats {
  completed: number
  inProgress: number
  blocked: number
  backlog: number
  qa: number
}

export default function Dashboard() {
  const { currentProject, fetchProjects, deleteProject, updateProject } = useProjectStore()
  const { activeSessions, fetchActiveSessions } = useAgentStore()
  const { addToast } = useToastStore()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editDesignMode, setEditDesignMode] = useState<'mvp' | 'finished'>('mvp')
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [taskStats, setTaskStats] = useState<TaskStats>({
    completed: 0,
    inProgress: 0,
    blocked: 0,
    backlog: 0,
    qa: 0,
  })

  useEffect(() => {
    fetchProjects()
    fetchActiveSessions()
  }, [fetchProjects, fetchActiveSessions])

  // Fetch task statistics when current project changes
  useEffect(() => {
    const fetchTaskStats = async () => {
      if (!currentProject) return

      try {
        const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}/tasks`)
        if (!response.ok) return

        const tasks = await response.json()
        const stats: TaskStats = {
          completed: 0,
          inProgress: 0,
          blocked: 0,
          backlog: 0,
          qa: 0,
        }

        tasks.forEach((task: { status: string }) => {
          switch (task.status) {
            case 'done':
              stats.completed++
              break
            case 'in_progress':
              stats.inProgress++
              break
            case 'blocked':
              stats.blocked++
              break
            case 'backlog':
              stats.backlog++
              break
            case 'qa':
              stats.qa++
              break
          }
        })

        setTaskStats(stats)
      } catch (error) {
        console.error('Failed to fetch task stats:', error)
      }
    }

    fetchTaskStats()
  }, [currentProject])

  const handleDeleteProject = async () => {
    if (!currentProject) return
    setIsDeleting(true)
    try {
      await deleteProject(currentProject.id)
      setShowDeleteDialog(false)
    } catch (error) {
      console.error('Failed to delete project:', error)
      addToast('error', 'Delete Failed', `Failed to delete project "${currentProject.name}". Please try again.`)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleOpenEditDialog = () => {
    if (currentProject) {
      setEditName(currentProject.name)
      setEditDescription(currentProject.description || '')
      setEditDesignMode((currentProject.design_mode as 'mvp' | 'finished') || 'mvp')
      setSaveSuccess(false)
      setShowEditDialog(true)
    }
  }

  const handleSaveProject = async () => {
    if (!currentProject) return
    setIsSaving(true)
    setSaveSuccess(false)
    try {
      const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editName, description: editDescription, design_mode: editDesignMode }),
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || 'Failed to update project')
      }
      const updated = await response.json()
      updateProject(currentProject.id, updated)
      setSaveSuccess(true)
      setTimeout(() => {
        setShowEditDialog(false)
        setSaveSuccess(false)
      }, 1000)
    } catch (error) {
      console.error('Failed to save project:', error)
      const message = error instanceof Error ? error.message : 'Failed to save project'
      addToast('error', 'Save Failed', message)
    } finally {
      setIsSaving(false)
    }
  }

  if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-slate-600 mb-4" />

          No Project Selected

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

    )
  }

  const stats = [
    {
      label: 'Tasks Completed',
      value: taskStats.completed,
      icon: CheckCircle,
      color: 'text-green-400',
    },
    {
      label: 'Tasks In Progress',
      value: taskStats.inProgress,
      icon: Clock,
      color: 'text-accent',
    },
    {
      label: 'Blocked Tasks',
      value: taskStats.blocked,
      icon: AlertTriangle,
      color: 'text-warning',
    },
    {
      label: 'Active Agents',
      value: activeSessions.filter((s) => s.status === 'running').length,
      icon: Activity,
      color: 'text-primary-400',
    },
  ]

  return (

      {/* Project Header */}

{currentProject.name}

            {/* Design Mode Badge */}

              <Palette size={12} />
              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}

          {currentProject.description && (

{currentProject.description}

          )}

          {/* Edit Button and Dialog */}
          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
            <Dialog.Trigger asChild>
              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >
                <Pencil size={16} />
                Edit
              </button>
            </Dialog.Trigger>
            <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-slate-800 border border-slate-700 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-white">
                    Edit Project Settings
                  </Dialog.Title>
                  <Dialog.Close asChild>
                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">
                      <X size={20} />
                    </button>
                  </Dialog.Close>

                <Dialog.Description className="mt-2 text-slate-400">
                  Update your project name, description, and design mode.
                </Dialog.Description>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <Dialog.Close asChild>
                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                      Cancel
                    </button>
                  </Dialog.Close>
                  <button
                    onClick={handleSaveProject}
                    disabled={isSaving || !editName.trim()}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    {saveSuccess ? (
                      <>
                        <Check size={16} />
                        Saved!
                      </>
                    ) : isSaving ? (
                      'Saving...'
                    ) : (
                      'Save Changes'
                    )}
                  </button>

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

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >
              <Trash2 size={16} />
              Delete
            </button>
          </AlertDialog.Trigger>
          <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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>
                <AlertDialog.Action asChild>
                  <button
                    onClick={handleDeleteProject}
                    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 Project'}
                  </button>
                </AlertDialog.Action>

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

      {/* Stats Grid */}

        {stats.map((stat) => {
          const Icon = stat.icon
          return (

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

{stat.label}

{stat.value}

          )
        })}

      {/* Phase Progress */}

Phase Progress

              Phase {currentProject.current_phase}
              {currentProject.total_phases} total

              <div
                className="h-full bg-accent transition-all duration-500"
                style={{
                  width: `${(currentProject.current_phase / currentProject.total_phases) * 100}%`,
                }}
              />

            {Math.round((currentProject.current_phase / currentProject.total_phases) * 100)}%

      {/* Recent Activity */}

Recent Activity

          {activeSessions.length === 0 ? (

No recent activity

          ) : (
            activeSessions.slice(0, 5).map((session) => (

                  {session.agent_type.replace('_', ' ')} Agent

                {session.status}

            ))
          )}

  )
}

<div className="flex flex-col items-center justify-center h-full text-center">

-        <FolderOpen size={64} className="text-slate-600 mb-4" />

-        <h2 className="text-2xl font-semibold text-slate-400">

+        <FolderOpen size={64} className="text-muted-foreground mb-4" />

+        <h2 className="text-2xl font-semibold text-muted-foreground">

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

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


Edit

{currentProject.description && (

{currentProject.description}

          )}

{currentProject.description && (

{currentProject.description}

          )}


              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >

              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >


              <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-800 border border-slate-700 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">
                <div className="flex items-center justify-between">
                  <Dialog.Title className="text-xl font-semibold text-white">
                    Edit Project Settings
                  </Dialog.Title>
                  <Dialog.Close asChild>
                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">
                      <X size={20} />
                    </button>
                  </Dialog.Close>
                </div>
                <Dialog.Description className="mt-2 text-slate-400">
                  Update your project name, description, and design mode.
                </Dialog.Description>

              <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">
                <div className="flex items-center justify-between">
                  <Dialog.Title className="text-xl font-semibold text-foreground">
                    Edit Project Settings
                  </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>
                </div>
                <Dialog.Description className="mt-2 text-muted-foreground">
                  Update your project name, description, and design mode.
                </Dialog.Description>


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\Dashboard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   210→              <Palette size={12} />
   211→              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}
   212→
   213→

   214→          {currentProject.description && (
   215→
{currentProject.description}

   216→          )}
   217→

   218→

   219→          {/* Edit Button and Dialog */}
   220→          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>

import { useEffect, useState } from 'react'
import { useProjectStore } from '../stores/projectStore'
import { useAgentStore } from '../stores/agentStore'
import { useToastStore } from '../components/Toast'
import {
  FolderOpen,
  CheckCircle,
  Clock,
  AlertTriangle,
  Activity,
  Trash2,
  Pencil,
  Check,
  Palette,
  X,
} from 'lucide-react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import * as Dialog from '@radix-ui/react-dialog'

interface TaskStats {
  completed: number
  inProgress: number
  blocked: number
  backlog: number
  qa: number
}

export default function Dashboard() {
  const { currentProject, fetchProjects, deleteProject, updateProject } = useProjectStore()
  const { activeSessions, fetchActiveSessions } = useAgentStore()
  const { addToast } = useToastStore()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editDesignMode, setEditDesignMode] = useState<'mvp' | 'finished'>('mvp')
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [taskStats, setTaskStats] = useState<TaskStats>({
    completed: 0,
    inProgress: 0,
    blocked: 0,
    backlog: 0,
    qa: 0,
  })

  useEffect(() => {
    fetchProjects()
    fetchActiveSessions()
  }, [fetchProjects, fetchActiveSessions])

  // Fetch task statistics when current project changes
  useEffect(() => {
    const fetchTaskStats = async () => {
      if (!currentProject) return

      try {
        const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}/tasks`)
        if (!response.ok) return

        const tasks = await response.json()
        const stats: TaskStats = {
          completed: 0,
          inProgress: 0,
          blocked: 0,
          backlog: 0,
          qa: 0,
        }

        tasks.forEach((task: { status: string }) => {
          switch (task.status) {
            case 'done':
              stats.completed++
              break
            case 'in_progress':
              stats.inProgress++
              break
            case 'blocked':
              stats.blocked++
              break
            case 'backlog':
              stats.backlog++
              break
            case 'qa':
              stats.qa++
              break
          }
        })

        setTaskStats(stats)
      } catch (error) {
        console.error('Failed to fetch task stats:', error)
      }
    }

    fetchTaskStats()
  }, [currentProject])

  const handleDeleteProject = async () => {
    if (!currentProject) return
    setIsDeleting(true)
    try {
      await deleteProject(currentProject.id)
      setShowDeleteDialog(false)
    } catch (error) {
      console.error('Failed to delete project:', error)
      addToast('error', 'Delete Failed', `Failed to delete project "${currentProject.name}". Please try again.`)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleOpenEditDialog = () => {
    if (currentProject) {
      setEditName(currentProject.name)
      setEditDescription(currentProject.description || '')
      setEditDesignMode((currentProject.design_mode as 'mvp' | 'finished') || 'mvp')
      setSaveSuccess(false)
      setShowEditDialog(true)
    }
  }

  const handleSaveProject = async () => {
    if (!currentProject) return
    setIsSaving(true)
    setSaveSuccess(false)
    try {
      const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editName, description: editDescription, design_mode: editDesignMode }),
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || 'Failed to update project')
      }
      const updated = await response.json()
      updateProject(currentProject.id, updated)
      setSaveSuccess(true)
      setTimeout(() => {
        setShowEditDialog(false)
        setSaveSuccess(false)
      }, 1000)
    } catch (error) {
      console.error('Failed to save project:', error)
      const message = error instanceof Error ? error.message : 'Failed to save project'
      addToast('error', 'Save Failed', message)
    } finally {
      setIsSaving(false)
    }
  }

  if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-muted-foreground mb-4" />

          No Project Selected

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

    )
  }

  const stats = [
    {
      label: 'Tasks Completed',
      value: taskStats.completed,
      icon: CheckCircle,
      color: 'text-green-400',
    },
    {
      label: 'Tasks In Progress',
      value: taskStats.inProgress,
      icon: Clock,
      color: 'text-accent',
    },
    {
      label: 'Blocked Tasks',
      value: taskStats.blocked,
      icon: AlertTriangle,
      color: 'text-warning',
    },
    {
      label: 'Active Agents',
      value: activeSessions.filter((s) => s.status === 'running').length,
      icon: Activity,
      color: 'text-primary-400',
    },
  ]

  return (

      {/* Project Header */}

{currentProject.name}

            {/* Design Mode Badge */}

              <Palette size={12} />
              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}

          {currentProject.description && (

{currentProject.description}

          )}

          {/* Edit Button and Dialog */}
          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
            <Dialog.Trigger asChild>
              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >
                <Pencil size={16} />
                Edit
              </button>
            </Dialog.Trigger>
            <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-slate-800 border border-slate-700 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-white">
                    Edit Project Settings
                  </Dialog.Title>
                  <Dialog.Close asChild>
                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">
                      <X size={20} />
                    </button>
                  </Dialog.Close>

                <Dialog.Description className="mt-2 text-slate-400">
                  Update your project name, description, and design mode.
                </Dialog.Description>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <Dialog.Close asChild>
                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                      Cancel
                    </button>
                  </Dialog.Close>
                  <button
                    onClick={handleSaveProject}
                    disabled={isSaving || !editName.trim()}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    {saveSuccess ? (
                      <>
                        <Check size={16} />
                        Saved!
                      </>
                    ) : isSaving ? (
                      'Saving...'
                    ) : (
                      'Save Changes'
                    )}
                  </button>

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

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >
              <Trash2 size={16} />
              Delete
            </button>
          </AlertDialog.Trigger>
          <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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>
                <AlertDialog.Action asChild>
                  <button
                    onClick={handleDeleteProject}
                    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 Project'}
                  </button>
                </AlertDialog.Action>

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

      {/* Stats Grid */}

        {stats.map((stat) => {
          const Icon = stat.icon
          return (

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

{stat.label}

{stat.value}

          )
        })}

      {/* Phase Progress */}

Phase Progress

              Phase {currentProject.current_phase}
              {currentProject.total_phases} total

              <div
                className="h-full bg-accent transition-all duration-500"
                style={{
                  width: `${(currentProject.current_phase / currentProject.total_phases) * 100}%`,
                }}
              />

            {Math.round((currentProject.current_phase / currentProject.total_phases) * 100)}%

      {/* Recent Activity */}

Recent Activity

          {activeSessions.length === 0 ? (

No recent activity

          ) : (
            activeSessions.slice(0, 5).map((session) => (

                  {session.agent_type.replace('_', ' ')} Agent

                {session.status}

            ))
          )}

  )
}

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


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

   219→          {/* Edit Button and Dialog */}
   220→          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
   221→            <Dialog.Trigger asChild>
   222→              <button
   223→                onClick={handleOpenEditDialog}
   224→                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
   225→                title="Edit Project Settings"
   226→              >
   227→                <Pencil size={16} />
   228→                Edit
   229→              </button>
   230→            </Dialog.Trigger>

              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >

              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >

-                className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"

+                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\Dashboard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   229→              </button>
   230→            </Dialog.Trigger>
   231→            <Dialog.Portal>
   232→              <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
   233→              <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">
   234→

   235→                  <Dialog.Title className="text-xl font-semibold text-foreground">
   236→                    Edit Project Settings
   237→                  </Dialog.Title>
   238→                  <Dialog.Close asChild>
   239→                    <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">
   240→                      <X size={20} />
   241→                    </button>
   242→                  </Dialog.Close>
   243→

   244→                <Dialog.Description className="mt-2 text-muted-foreground">
   245→                  Update your project name, description, and design mode.
   246→                </Dialog.Description>
   247→

   248→

   249→                    Project Name
   250→                    <input

              <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-800 border border-slate-700 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">
                <div className="flex items-center justify-between">
                  <Dialog.Title className="text-xl font-semibold text-white">
                    Edit Project Settings
                  </Dialog.Title>
                  <Dialog.Close asChild>
                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">
                      <X size={20} />
                    </button>
                  </Dialog.Close>
                </div>
                <Dialog.Description className="mt-2 text-slate-400">
                  Update your project name, description, and design mode.
                </Dialog.Description>

              <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">
                <div className="flex items-center justify-between">
                  <Dialog.Title className="text-xl font-semibold text-foreground">
                    Edit Project Settings
                  </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>
                </div>
                <Dialog.Description className="mt-2 text-muted-foreground">
                  Update your project name, description, and design mode.
                </Dialog.Description>

import { useEffect, useState } from 'react'
import { useProjectStore } from '../stores/projectStore'
import { useAgentStore } from '../stores/agentStore'
import { useToastStore } from '../components/Toast'
import {
  FolderOpen,
  CheckCircle,
  Clock,
  AlertTriangle,
  Activity,
  Trash2,
  Pencil,
  Check,
  Palette,
  X,
} from 'lucide-react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import * as Dialog from '@radix-ui/react-dialog'

interface TaskStats {
  completed: number
  inProgress: number
  blocked: number
  backlog: number
  qa: number
}

export default function Dashboard() {
  const { currentProject, fetchProjects, deleteProject, updateProject } = useProjectStore()
  const { activeSessions, fetchActiveSessions } = useAgentStore()
  const { addToast } = useToastStore()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editDesignMode, setEditDesignMode] = useState<'mvp' | 'finished'>('mvp')
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [taskStats, setTaskStats] = useState<TaskStats>({
    completed: 0,
    inProgress: 0,
    blocked: 0,
    backlog: 0,
    qa: 0,
  })

  useEffect(() => {
    fetchProjects()
    fetchActiveSessions()
  }, [fetchProjects, fetchActiveSessions])

  // Fetch task statistics when current project changes
  useEffect(() => {
    const fetchTaskStats = async () => {
      if (!currentProject) return

      try {
        const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}/tasks`)
        if (!response.ok) return

        const tasks = await response.json()
        const stats: TaskStats = {
          completed: 0,
          inProgress: 0,
          blocked: 0,
          backlog: 0,
          qa: 0,
        }

        tasks.forEach((task: { status: string }) => {
          switch (task.status) {
            case 'done':
              stats.completed++
              break
            case 'in_progress':
              stats.inProgress++
              break
            case 'blocked':
              stats.blocked++
              break
            case 'backlog':
              stats.backlog++
              break
            case 'qa':
              stats.qa++
              break
          }
        })

        setTaskStats(stats)
      } catch (error) {
        console.error('Failed to fetch task stats:', error)
      }
    }

    fetchTaskStats()
  }, [currentProject])

  const handleDeleteProject = async () => {
    if (!currentProject) return
    setIsDeleting(true)
    try {
      await deleteProject(currentProject.id)
      setShowDeleteDialog(false)
    } catch (error) {
      console.error('Failed to delete project:', error)
      addToast('error', 'Delete Failed', `Failed to delete project "${currentProject.name}". Please try again.`)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleOpenEditDialog = () => {
    if (currentProject) {
      setEditName(currentProject.name)
      setEditDescription(currentProject.description || '')
      setEditDesignMode((currentProject.design_mode as 'mvp' | 'finished') || 'mvp')
      setSaveSuccess(false)
      setShowEditDialog(true)
    }
  }

  const handleSaveProject = async () => {
    if (!currentProject) return
    setIsSaving(true)
    setSaveSuccess(false)
    try {
      const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editName, description: editDescription, design_mode: editDesignMode }),
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || 'Failed to update project')
      }
      const updated = await response.json()
      updateProject(currentProject.id, updated)
      setSaveSuccess(true)
      setTimeout(() => {
        setShowEditDialog(false)
        setSaveSuccess(false)
      }, 1000)
    } catch (error) {
      console.error('Failed to save project:', error)
      const message = error instanceof Error ? error.message : 'Failed to save project'
      addToast('error', 'Save Failed', message)
    } finally {
      setIsSaving(false)
    }
  }

  if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-muted-foreground mb-4" />

          No Project Selected

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

    )
  }

  const stats = [
    {
      label: 'Tasks Completed',
      value: taskStats.completed,
      icon: CheckCircle,
      color: 'text-green-400',
    },
    {
      label: 'Tasks In Progress',
      value: taskStats.inProgress,
      icon: Clock,
      color: 'text-accent',
    },
    {
      label: 'Blocked Tasks',
      value: taskStats.blocked,
      icon: AlertTriangle,
      color: 'text-warning',
    },
    {
      label: 'Active Agents',
      value: activeSessions.filter((s) => s.status === 'running').length,
      icon: Activity,
      color: 'text-primary-400',
    },
  ]

  return (

      {/* Project Header */}

{currentProject.name}

            {/* Design Mode Badge */}

              <Palette size={12} />
              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}

          {currentProject.description && (

{currentProject.description}

          )}

          {/* Edit Button and Dialog */}
          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
            <Dialog.Trigger asChild>
              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >
                <Pencil size={16} />
                Edit
              </button>
            </Dialog.Trigger>
            <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-slate-800 border border-slate-700 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-white">
                    Edit Project Settings
                  </Dialog.Title>
                  <Dialog.Close asChild>
                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">
                      <X size={20} />
                    </button>
                  </Dialog.Close>

                <Dialog.Description className="mt-2 text-slate-400">
                  Update your project name, description, and design mode.
                </Dialog.Description>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <Dialog.Close asChild>
                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                      Cancel
                    </button>
                  </Dialog.Close>
                  <button
                    onClick={handleSaveProject}
                    disabled={isSaving || !editName.trim()}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    {saveSuccess ? (
                      <>
                        <Check size={16} />
                        Saved!
                      </>
                    ) : isSaving ? (
                      'Saving...'
                    ) : (
                      'Save Changes'
                    )}
                  </button>

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

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >
              <Trash2 size={16} />
              Delete
            </button>
          </AlertDialog.Trigger>
          <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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>
                <AlertDialog.Action asChild>
                  <button
                    onClick={handleDeleteProject}
                    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 Project'}
                  </button>
                </AlertDialog.Action>

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

      {/* Stats Grid */}

        {stats.map((stat) => {
          const Icon = stat.icon
          return (

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

{stat.label}

{stat.value}

          )
        })}

      {/* Phase Progress */}

Phase Progress

              Phase {currentProject.current_phase}
              {currentProject.total_phases} total

              <div
                className="h-full bg-accent transition-all duration-500"
                style={{
                  width: `${(currentProject.current_phase / currentProject.total_phases) * 100}%`,
                }}
              />

            {Math.round((currentProject.current_phase / currentProject.total_phases) * 100)}%

      {/* Recent Activity */}

Recent Activity

          {activeSessions.length === 0 ? (

No recent activity

          ) : (
            activeSessions.slice(0, 5).map((session) => (

                  {session.agent_type.replace('_', ' ')} Agent

                {session.status}

            ))
          )}

  )
}

-              <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-800 border border-slate-700 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.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-white">

+                  <Dialog.Title className="text-xl font-semibold text-foreground">

-                    <button className="p-1 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors" aria-label="Close">

+                    <button className="p-1 text-muted-foreground hover:text-foreground hover:bg-secondary rounded transition-colors" aria-label="Close">

-                <Dialog.Description className="mt-2 text-slate-400">

+                <Dialog.Description className="mt-2 text-muted-foreground">


                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <Dialog.Close asChild>
                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                      Cancel
                    </button>
                  </Dialog.Close>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(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 focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      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 focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

Finished

Polished required

                      </button>

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


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

   244→                <Dialog.Description className="mt-2 text-muted-foreground">
   245→                  Update your project name, description, and design mode.
   246→                </Dialog.Description>
   247→

   248→

   249→                    Project Name
   250→                    <input
   251→                      type="text"
   252→                      value={editName}
   253→                      onChange={(e) => setEditName(e.target.value)}
   254→                      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 focus:border-transparent"
   255→                      placeholder="Enter project name"
   256→                    />
   257→

   258→

   259→                    Description
   260→                    <textarea
   261→                      value={editDescription}
   262→                      onChange={(e) => setEditDescription(e.target.value)}
   263→                      rows={3}
   264→                      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 focus:border-transparent resize-none"
   265→                      placeholder="Enter project description"
   266→                    />
   267→

   268→

   269→                    Design Mode
   270→

   271→                      <button
   272→                        type="button"
   273→                        onClick={() => setEditDesignMode('mvp')}
   274→                        className={`p-3 rounded-lg border text-left transition-colors ${
   275→                          editDesignMode === 'mvp'
   276→                            ? 'border-amber-500 bg-amber-500/10'
   277→                            : 'border-border hover:border-muted-foreground'
   278→                        }`}
   279→                      >
   280→
MVP

   281→
Functional drafts OK

   282→                      </button>
   283→                      <button
   284→                        type="button"
   285→                        onClick={() => setEditDesignMode('finished')}
   286→                        className={`p-3 rounded-lg border text-left transition-colors ${
   287→                          editDesignMode === 'finished'
   288→                            ? 'border-accent bg-accent/10'
   289→                            : 'border-border hover:border-muted-foreground'
   290→                        }`}
   291→                      >
   292→
Finished

   293→
Polished required

   294→                      </button>
   295→

   296→

   297→

   298→

   299→                  <Dialog.Close asChild>
   300→                    <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">
   301→                      Cancel
   302→                    </button>
   303→                  </Dialog.Close>
   304→                  <button
   305→                    onClick={handleSaveProject}
   306→                    disabled={isSaving || !editName.trim()}
   307→                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(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 focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      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 focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

Finished

Polished required

                      </button>

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

import { useEffect, useState } from 'react'
import { useProjectStore } from '../stores/projectStore'
import { useAgentStore } from '../stores/agentStore'
import { useToastStore } from '../components/Toast'
import {
  FolderOpen,
  CheckCircle,
  Clock,
  AlertTriangle,
  Activity,
  Trash2,
  Pencil,
  Check,
  Palette,
  X,
} from 'lucide-react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import * as Dialog from '@radix-ui/react-dialog'

interface TaskStats {
  completed: number
  inProgress: number
  blocked: number
  backlog: number
  qa: number
}

export default function Dashboard() {
  const { currentProject, fetchProjects, deleteProject, updateProject } = useProjectStore()
  const { activeSessions, fetchActiveSessions } = useAgentStore()
  const { addToast } = useToastStore()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editDesignMode, setEditDesignMode] = useState<'mvp' | 'finished'>('mvp')
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [taskStats, setTaskStats] = useState<TaskStats>({
    completed: 0,
    inProgress: 0,
    blocked: 0,
    backlog: 0,
    qa: 0,
  })

  useEffect(() => {
    fetchProjects()
    fetchActiveSessions()
  }, [fetchProjects, fetchActiveSessions])

  // Fetch task statistics when current project changes
  useEffect(() => {
    const fetchTaskStats = async () => {
      if (!currentProject) return

      try {
        const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}/tasks`)
        if (!response.ok) return

        const tasks = await response.json()
        const stats: TaskStats = {
          completed: 0,
          inProgress: 0,
          blocked: 0,
          backlog: 0,
          qa: 0,
        }

        tasks.forEach((task: { status: string }) => {
          switch (task.status) {
            case 'done':
              stats.completed++
              break
            case 'in_progress':
              stats.inProgress++
              break
            case 'blocked':
              stats.blocked++
              break
            case 'backlog':
              stats.backlog++
              break
            case 'qa':
              stats.qa++
              break
          }
        })

        setTaskStats(stats)
      } catch (error) {
        console.error('Failed to fetch task stats:', error)
      }
    }

    fetchTaskStats()
  }, [currentProject])

  const handleDeleteProject = async () => {
    if (!currentProject) return
    setIsDeleting(true)
    try {
      await deleteProject(currentProject.id)
      setShowDeleteDialog(false)
    } catch (error) {
      console.error('Failed to delete project:', error)
      addToast('error', 'Delete Failed', `Failed to delete project "${currentProject.name}". Please try again.`)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleOpenEditDialog = () => {
    if (currentProject) {
      setEditName(currentProject.name)
      setEditDescription(currentProject.description || '')
      setEditDesignMode((currentProject.design_mode as 'mvp' | 'finished') || 'mvp')
      setSaveSuccess(false)
      setShowEditDialog(true)
    }
  }

  const handleSaveProject = async () => {
    if (!currentProject) return
    setIsSaving(true)
    setSaveSuccess(false)
    try {
      const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editName, description: editDescription, design_mode: editDesignMode }),
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || 'Failed to update project')
      }
      const updated = await response.json()
      updateProject(currentProject.id, updated)
      setSaveSuccess(true)
      setTimeout(() => {
        setShowEditDialog(false)
        setSaveSuccess(false)
      }, 1000)
    } catch (error) {
      console.error('Failed to save project:', error)
      const message = error instanceof Error ? error.message : 'Failed to save project'
      addToast('error', 'Save Failed', message)
    } finally {
      setIsSaving(false)
    }
  }

  if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-muted-foreground mb-4" />

          No Project Selected

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

    )
  }

  const stats = [
    {
      label: 'Tasks Completed',
      value: taskStats.completed,
      icon: CheckCircle,
      color: 'text-green-400',
    },
    {
      label: 'Tasks In Progress',
      value: taskStats.inProgress,
      icon: Clock,
      color: 'text-accent',
    },
    {
      label: 'Blocked Tasks',
      value: taskStats.blocked,
      icon: AlertTriangle,
      color: 'text-warning',
    },
    {
      label: 'Active Agents',
      value: activeSessions.filter((s) => s.status === 'running').length,
      icon: Activity,
      color: 'text-primary-400',
    },
  ]

  return (

      {/* Project Header */}

{currentProject.name}

            {/* Design Mode Badge */}

              <Palette size={12} />
              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}

          {currentProject.description && (

{currentProject.description}

          )}

          {/* Edit Button and Dialog */}
          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
            <Dialog.Trigger asChild>
              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >
                <Pencil size={16} />
                Edit
              </button>
            </Dialog.Trigger>
            <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 Project Settings
                  </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>

                <Dialog.Description className="mt-2 text-muted-foreground">
                  Update your project name, description, and design mode.
                </Dialog.Description>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-slate-700 hover:border-slate-600'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <Dialog.Close asChild>
                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                      Cancel
                    </button>
                  </Dialog.Close>
                  <button
                    onClick={handleSaveProject}
                    disabled={isSaving || !editName.trim()}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    {saveSuccess ? (
                      <>
                        <Check size={16} />
                        Saved!
                      </>
                    ) : isSaving ? (
                      'Saving...'
                    ) : (
                      'Save Changes'
                    )}
                  </button>

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

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >
              <Trash2 size={16} />
              Delete
            </button>
          </AlertDialog.Trigger>
          <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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>
                <AlertDialog.Action asChild>
                  <button
                    onClick={handleDeleteProject}
                    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 Project'}
                  </button>
                </AlertDialog.Action>

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

      {/* Stats Grid */}

        {stats.map((stat) => {
          const Icon = stat.icon
          return (

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

{stat.label}

{stat.value}

          )
        })}

      {/* Phase Progress */}

Phase Progress

              Phase {currentProject.current_phase}
              {currentProject.total_phases} total

              <div
                className="h-full bg-accent transition-all duration-500"
                style={{
                  width: `${(currentProject.current_phase / currentProject.total_phases) * 100}%`,
                }}
              />

            {Math.round((currentProject.current_phase / currentProject.total_phases) * 100)}%

      {/* Recent Activity */}

Recent Activity

          {activeSessions.length === 0 ? (

No recent activity

          ) : (
            activeSessions.slice(0, 5).map((session) => (

                  {session.agent_type.replace('_', ' ')} Agent

                {session.status}

            ))
          )}

  )
}

-                    <label className="block text-sm font-medium text-slate-300 mb-1">Project Name</label>

+                    <label className="block text-sm font-medium text-secondary-foreground mb-1">Project Name</label>

-                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"

+                      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 focus:border-transparent"

-                    <label className="block text-sm font-medium text-slate-300 mb-1">Description</label>

+                    <label className="block text-sm font-medium text-secondary-foreground mb-1">Description</label>

-                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent resize-none"

+                      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 focus:border-transparent resize-none"

-                    <label className="block text-sm font-medium text-slate-300 mb-2">Design Mode</label>

+                    <label className="block text-sm font-medium text-secondary-foreground mb-2">Design Mode</label>

<div className="grid grid-cols-2 gap-2">

-                            : 'border-slate-700 hover:border-slate-600'

+                            : 'border-border hover:border-muted-foreground'

<div className="mt-6 flex justify-end gap-3">

-                    <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">

+                    <button className="px-4 py-2 text-sm text-secondary-foreground hover:bg-secondary rounded-lg transition-colors">


          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >


The file C:\Users\MikeSwanson\AutoBuilder\My-Auto-Builder\frontend\src\pages\Dashboard.tsx has been updated. Here's the result of running `cat -n` on a snippet of the edited file:
   321→              </Dialog.Content>
   322→            </Dialog.Portal>
   323→          </Dialog.Root>
   324→
   325→          {/* Delete Button and Dialog */}
   326→          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
   327→          <AlertDialog.Trigger asChild>
   328→            <button
   329→              className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
   330→              title="Delete Project"
   331→            >
   332→              <Trash2 size={16} />
   333→              Delete
   334→            </button>
   335→          </AlertDialog.Trigger>

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >

import { useEffect, useState } from 'react'
import { useProjectStore } from '../stores/projectStore'
import { useAgentStore } from '../stores/agentStore'
import { useToastStore } from '../components/Toast'
import {
  FolderOpen,
  CheckCircle,
  Clock,
  AlertTriangle,
  Activity,
  Trash2,
  Pencil,
  Check,
  Palette,
  X,
} from 'lucide-react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import * as Dialog from '@radix-ui/react-dialog'

interface TaskStats {
  completed: number
  inProgress: number
  blocked: number
  backlog: number
  qa: number
}

export default function Dashboard() {
  const { currentProject, fetchProjects, deleteProject, updateProject } = useProjectStore()
  const { activeSessions, fetchActiveSessions } = useAgentStore()
  const { addToast } = useToastStore()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editDesignMode, setEditDesignMode] = useState<'mvp' | 'finished'>('mvp')
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [taskStats, setTaskStats] = useState<TaskStats>({
    completed: 0,
    inProgress: 0,
    blocked: 0,
    backlog: 0,
    qa: 0,
  })

  useEffect(() => {
    fetchProjects()
    fetchActiveSessions()
  }, [fetchProjects, fetchActiveSessions])

  // Fetch task statistics when current project changes
  useEffect(() => {
    const fetchTaskStats = async () => {
      if (!currentProject) return

      try {
        const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}/tasks`)
        if (!response.ok) return

        const tasks = await response.json()
        const stats: TaskStats = {
          completed: 0,
          inProgress: 0,
          blocked: 0,
          backlog: 0,
          qa: 0,
        }

        tasks.forEach((task: { status: string }) => {
          switch (task.status) {
            case 'done':
              stats.completed++
              break
            case 'in_progress':
              stats.inProgress++
              break
            case 'blocked':
              stats.blocked++
              break
            case 'backlog':
              stats.backlog++
              break
            case 'qa':
              stats.qa++
              break
          }
        })

        setTaskStats(stats)
      } catch (error) {
        console.error('Failed to fetch task stats:', error)
      }
    }

    fetchTaskStats()
  }, [currentProject])

  const handleDeleteProject = async () => {
    if (!currentProject) return
    setIsDeleting(true)
    try {
      await deleteProject(currentProject.id)
      setShowDeleteDialog(false)
    } catch (error) {
      console.error('Failed to delete project:', error)
      addToast('error', 'Delete Failed', `Failed to delete project "${currentProject.name}". Please try again.`)
    } finally {
      setIsDeleting(false)
    }
  }

  const handleOpenEditDialog = () => {
    if (currentProject) {
      setEditName(currentProject.name)
      setEditDescription(currentProject.description || '')
      setEditDesignMode((currentProject.design_mode as 'mvp' | 'finished') || 'mvp')
      setSaveSuccess(false)
      setShowEditDialog(true)
    }
  }

  const handleSaveProject = async () => {
    if (!currentProject) return
    setIsSaving(true)
    setSaveSuccess(false)
    try {
      const response = await fetch(`http://localhost:8000/api/projects/${currentProject.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: editName, description: editDescription, design_mode: editDesignMode }),
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || 'Failed to update project')
      }
      const updated = await response.json()
      updateProject(currentProject.id, updated)
      setSaveSuccess(true)
      setTimeout(() => {
        setShowEditDialog(false)
        setSaveSuccess(false)
      }, 1000)
    } catch (error) {
      console.error('Failed to save project:', error)
      const message = error instanceof Error ? error.message : 'Failed to save project'
      addToast('error', 'Save Failed', message)
    } finally {
      setIsSaving(false)
    }
  }

  if (!currentProject) {
    return (

        <FolderOpen size={64} className="text-muted-foreground mb-4" />

          No Project Selected

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

    )
  }

  const stats = [
    {
      label: 'Tasks Completed',
      value: taskStats.completed,
      icon: CheckCircle,
      color: 'text-green-400',
    },
    {
      label: 'Tasks In Progress',
      value: taskStats.inProgress,
      icon: Clock,
      color: 'text-accent',
    },
    {
      label: 'Blocked Tasks',
      value: taskStats.blocked,
      icon: AlertTriangle,
      color: 'text-warning',
    },
    {
      label: 'Active Agents',
      value: activeSessions.filter((s) => s.status === 'running').length,
      icon: Activity,
      color: 'text-primary-400',
    },
  ]

  return (

      {/* Project Header */}

{currentProject.name}

            {/* Design Mode Badge */}

              <Palette size={12} />
              {currentProject.design_mode === 'finished' ? 'Finished Mode' : 'MVP Mode'}

          {currentProject.description && (

{currentProject.description}

          )}

          {/* Edit Button and Dialog */}
          <Dialog.Root open={showEditDialog} onOpenChange={setShowEditDialog}>
            <Dialog.Trigger asChild>
              <button
                onClick={handleOpenEditDialog}
                className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                title="Edit Project Settings"
              >
                <Pencil size={16} />
                Edit
              </button>
            </Dialog.Trigger>
            <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 Project Settings
                  </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>

                <Dialog.Description className="mt-2 text-muted-foreground">
                  Update your project name, description, and design mode.
                </Dialog.Description>

                    Project Name
                    <input
                      type="text"
                      value={editName}
                      onChange={(e) => setEditName(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 focus:border-transparent"
                      placeholder="Enter project name"
                    />

                    Description
                    <textarea
                      value={editDescription}
                      onChange={(e) => setEditDescription(e.target.value)}
                      rows={3}
                      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 focus:border-transparent resize-none"
                      placeholder="Enter project description"
                    />

                    Design Mode

                      <button
                        type="button"
                        onClick={() => setEditDesignMode('mvp')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'mvp'
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

MVP

Functional drafts OK

                      </button>
                      <button
                        type="button"
                        onClick={() => setEditDesignMode('finished')}
                        className={`p-3 rounded-lg border text-left transition-colors ${
                          editDesignMode === 'finished'
                            ? 'border-accent bg-accent/10'
                            : 'border-border hover:border-muted-foreground'
                        }`}
                      >

Finished

Polished required

                      </button>

                  <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={handleSaveProject}
                    disabled={isSaving || !editName.trim()}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-accent hover:bg-accent/80 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    {saveSuccess ? (
                      <>
                        <Check size={16} />
                        Saved!
                      </>
                    ) : isSaving ? (
                      'Saving...'
                    ) : (
                      'Save Changes'
                    )}
                  </button>

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

          {/* Delete Button and Dialog */}
          <AlertDialog.Root open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialog.Trigger asChild>
            <button
              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
              title="Delete Project"
            >
              <Trash2 size={16} />
              Delete
            </button>
          </AlertDialog.Trigger>
          <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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>
                <AlertDialog.Action asChild>
                  <button
                    onClick={handleDeleteProject}
                    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 Project'}
                  </button>
                </AlertDialog.Action>

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

      {/* Stats Grid */}

        {stats.map((stat) => {
          const Icon = stat.icon
          return (

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

{stat.label}

{stat.value}

          )
        })}

      {/* Phase Progress */}

Phase Progress

              Phase {currentProject.current_phase}
              {currentProject.total_phases} total

              <div
                className="h-full bg-accent transition-all duration-500"
                style={{
                  width: `${(currentProject.current_phase / currentProject.total_phases) * 100}%`,
                }}
              />

            {Math.round((currentProject.current_phase / currentProject.total_phases) * 100)}%

      {/* Recent Activity */}

Recent Activity

          {activeSessions.length === 0 ? (

No recent activity

          ) : (
            activeSessions.slice(0, 5).map((session) => (

                  {session.agent_type.replace('_', ' ')} Agent

                {session.status}

            ))
          )}

  )
}

-              className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400 hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"

+              className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg transition-colors"


<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-slate-800 border border-slate-700 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-white">
                Delete Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-slate-400">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </AlertDialog.Description>

                <AlertDialog.Cancel asChild>
                  <button className="px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-lg transition-colors">
                    Cancel
                  </button>
                </AlertDialog.Cancel>

<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 Project
              </AlertDialog.Title>
              <AlertDialog.Description className="mt-3 text-muted-foreground">
                Are you sure you want to delete {currentProject.name}?
                This action cannot be undone. All project data, tasks, and history will be permanently deleted.
              </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>