@agentforge-ai/cli 0.4.3 → 0.5.0

package/templates/default/dashboard/app/routes/index.tsx

@@ -1,137 +1,104 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, Link } from '@tanstack/react-router';
 import { DashboardLayout } from '../components/DashboardLayout';
-import { useState } from 'react';
-// import { useQuery } from 'convex/react';
-// import { api } from '~/../convex/_generated/api';
-import { Bot, Activity, MessageSquare, FileText, Plus, Heart, Zap, ArrowRight, AlertTriangle, CheckCircle } from 'lucide-react';
+import { useQuery } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { Bot, MessageSquare, FileText, Activity, Zap, Plus, CheckCircle, AlertTriangle } from 'lucide-react';
 
 export const Route = createFileRoute('/')({ component: OverviewPage });
 
-function StatCard({ icon: Icon, title, value, change }) {
+function StatCard({ icon: Icon, title, value, subtitle }: { icon: any; title: string; value: string | number; subtitle?: string }) {
   return (
-    <div className="bg-card p-6 rounded-lg shadow-md flex items-center justify-between">
-      <div>
-        <p className="text-sm text-muted-foreground">{title}</p>
-        <p className="text-3xl font-bold text-foreground">{value}</p>
-        <p className={`text-xs ${change.startsWith('+') ? 'text-green-500' : 'text-red-500'}`}>{change}</p>
+    <div className="bg-card border border-border rounded-lg p-6 shadow-sm">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-muted-foreground">{title}</span>
+        <Icon className="w-5 h-5 text-primary" />
       </div>
-      <Icon className="w-10 h-10 text-primary" />
+      <p className="text-3xl font-bold text-foreground">{value}</p>
+      {subtitle && <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>}
     </div>
   );
 }
 
-function QuickActionButton({ icon: Icon, label, to }) {
-  return (
-    <a href={to} className="bg-card hover:bg-primary/10 border border-border p-4 rounded-lg flex flex-col items-center justify-center text-center transition-colors">
-      <Icon className="w-8 h-8 text-primary mb-2" />
-      <span className="text-sm font-medium text-foreground">{label}</span>
-    </a>
-  );
-}
-
-function ActivityItem({ icon: Icon, text, time }) {
+function QuickActionButton({ icon: Icon, label, to }: { icon: any; label: string; to: string }) {
   return (
-    <li className="flex items-center space-x-4 py-3 border-b border-border last:border-b-0">
-      <div className="bg-primary/10 p-2 rounded-full">
-        <Icon className="w-5 h-5 text-primary" />
-      </div>
-      <div className="flex-grow">
-        <p className="text-sm text-foreground">{text}</p>
-      </div>
-      <p className="text-xs text-muted-foreground whitespace-nowrap">{time}</p>
-      <ArrowRight className="w-4 h-4 text-muted-foreground" />
-    </li>
+    <Link to={to} className="flex flex-col items-center justify-center p-4 rounded-lg border border-border hover:bg-muted transition-colors gap-2">
+      <Icon className="w-6 h-6 text-primary" />
+      <span className="text-xs font-medium text-muted-foreground">{label}</span>
+    </Link>
   );
 }
 
-function SystemHealthIndicator({ isHealthy }) {
-    const Icon = isHealthy ? CheckCircle : AlertTriangle;
-    const text = isHealthy ? 'All systems operational' : 'Service degradation';
-    const color = isHealthy ? 'text-green-500' : 'text-yellow-500';
-
-    return (
-        <div className="flex items-center space-x-2">
-            <Icon className={`w-5 h-5 ${color}`} />
-            <span className={`text-sm font-medium ${color}`}>{text}</span>
-        </div>
-    );
-}
-
 function OverviewPage() {
-  // Local state with realistic initial values, simulating data from Convex
-  const [stats, setStats] = useState({
-    totalAgents: 12,
-    activeSessions: 3,
-    messagesToday: 1402,
-    totalFiles: 256,
-  });
-
-  const [activity, setActivity] = useState([
-    { id: 1, icon: Bot, text: 'New agent "SupportBot" created.', time: '5m ago' },
-    { id: 2, icon: MessageSquare, text: 'Session #1245 ended with 52 messages.', time: '1h ago' },
-    { id: 3, icon: FileText, text: 'Uploaded "project_spec.pdf".', time: '3h ago' },
-    { id: 4, icon: Zap, text: 'Agent "DataAnalyzer" completed a task.', time: '5h ago' },
-    { id: 5, icon: Bot, text: 'Agent "CodeGenerator" was updated.', time: '1d ago' },
-  ]);
-
-  const [systemHealth, setSystemHealth] = useState({ isHealthy: true });
-
-  // Commented-out Convex hooks for future integration
-  /*
-  const overviewStats = useQuery(api.overview.getStats);
-  const recentActivity = useQuery(api.overview.getRecentActivity, { count: 5 });
-  const systemStatus = useQuery(api.heartbeat.getStatus);
+  const agents = useQuery(api.agents.list, {});
+  const sessions = useQuery(api.sessions.list, {});
+  const files = useQuery(api.files.list, {});
+  const usage = useQuery(api.usage.list, {});
+  const logs = useQuery(api.logs.list, { limit: 5 });
 
-  // In a real implementation, you would use the data from hooks:
-  // const stats = overviewStats || { totalAgents: 0, activeSessions: 0, messagesToday: 0, totalFiles: 0 };
-  // const activity = recentActivity || [];
-  // const systemHealth = { isHealthy: systemStatus === 'operational' };
-  */
+  const totalAgents = agents?.length ?? 0;
+  const activeSessions = sessions?.filter((s: any) => s.status === 'active').length ?? 0;
+  const totalFiles = files?.length ?? 0;
+  const totalTokens = usage?.reduce((sum: number, u: any) => sum + (u.totalTokens || 0), 0) ?? 0;
+  const isLoading = agents === undefined;
 
   return (
     <DashboardLayout>
-      <div className="p-6 md:p-8 space-y-8 bg-background text-foreground">
+      <div className="space-y-8">
         <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
-            <div>
-                <h1 className="text-3xl font-bold">Overview</h1>
-                <p className="text-muted-foreground">Welcome back, here's a snapshot of your workspace.</p>
-            </div>
-            <SystemHealthIndicator isHealthy={systemHealth.isHealthy} />
+          <div>
+            <h1 className="text-3xl font-bold">Overview</h1>
+            <p className="text-muted-foreground">Welcome back. Here is a snapshot of your workspace.</p>
+          </div>
+          <div className="flex items-center space-x-2">
+            {isLoading ? (
+              <span className="text-sm text-muted-foreground animate-pulse">Connecting to Convex...</span>
+            ) : (
+              <><CheckCircle className="w-5 h-5 text-green-500" /><span className="text-sm font-medium text-green-500">All systems operational</span></>
+            )}
+          </div>
         </div>
 
-        {/* Stat Cards */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-          <StatCard icon={Bot} title="Total Agents" value={stats.totalAgents} change="+2 this week" />
-          <StatCard icon={Activity} title="Active Sessions" value={stats.activeSessions} change="-1 since yesterday" />
-          <StatCard icon={MessageSquare} title="Messages Today" value={stats.messagesToday.toLocaleString()} change="+15%" />
-          <StatCard icon={FileText} title="Total Files" value={stats.totalFiles} change="+12 files" />
+          <StatCard icon={Bot} title="Total Agents" value={totalAgents} subtitle={`${agents?.filter((a: any) => a.isActive).length ?? 0} active`} />
+          <StatCard icon={Activity} title="Active Sessions" value={activeSessions} />
+          <StatCard icon={MessageSquare} title="Total Tokens Used" value={totalTokens.toLocaleString()} />
+          <StatCard icon={FileText} title="Total Files" value={totalFiles} />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Recent Activity */}
-          <div className="lg:col-span-2 bg-card p-6 rounded-lg shadow-md">
-            <h2 className="text-xl font-semibold mb-4 flex items-center"><Activity className="w-6 h-6 mr-2 text-primary"/>Recent Activity</h2>
-            {activity.length > 0 ? (
+          <div className="lg:col-span-2 bg-card p-6 rounded-lg shadow-sm border border-border">
+            <h2 className="text-xl font-semibold mb-4 flex items-center"><Activity className="w-6 h-6 mr-2 text-primary" />Recent Activity</h2>
+            {logs && logs.length > 0 ? (
               <ul>
-                {activity.map(item => (
-                  <ActivityItem key={item.id} icon={item.icon} text={item.text} time={item.time} />
+                {logs.map((log: any) => (
+                  <li key={log._id} className="flex items-center space-x-4 py-3 border-b border-border last:border-b-0">
+                    <div className="bg-primary/10 p-2 rounded-full">
+                      {log.level === 'error' ? <AlertTriangle className="w-5 h-5 text-destructive" /> : <Activity className="w-5 h-5 text-primary" />}
+                    </div>
+                    <div className="flex-grow min-w-0">
+                      <p className="text-sm text-foreground truncate">{log.message}</p>
+                      <p className="text-xs text-muted-foreground">{log.source}</p>
+                    </div>
+                    <p className="text-xs text-muted-foreground whitespace-nowrap">{new Date(log.timestamp).toLocaleString()}</p>
+                  </li>
                 ))}
               </ul>
             ) : (
               <div className="text-center py-10">
-                <p className="text-muted-foreground">No recent activity to display.</p>
+                <Activity className="w-12 h-12 text-muted-foreground/30 mx-auto mb-3" />
+                <p className="text-muted-foreground">No recent activity yet.</p>
+                <p className="text-sm text-muted-foreground mt-1">Activity will appear here as you use your agents.</p>
               </div>
             )}
           </div>
 
-          {/* Quick Actions */}
-          <div className="bg-card p-6 rounded-lg shadow-md">
-            <h2 className="text-xl font-semibold mb-4 flex items-center"><Zap className="w-6 h-6 mr-2 text-primary"/>Quick Actions</h2>
+          <div className="bg-card p-6 rounded-lg shadow-sm border border-border">
+            <h2 className="text-xl font-semibold mb-4 flex items-center"><Zap className="w-6 h-6 mr-2 text-primary" />Quick Actions</h2>
             <div className="grid grid-cols-2 gap-4">
-              <QuickActionButton icon={Bot} label="Create Agent" to="/agents/new" />
+              <QuickActionButton icon={Bot} label="Create Agent" to="/agents" />
               <QuickActionButton icon={MessageSquare} label="Start Chat" to="/chat" />
               <QuickActionButton icon={FileText} label="Upload File" to="/files" />
-              <QuickActionButton icon={Plus} label="New Project" to="/projects/new" />
+              <QuickActionButton icon={Plus} label="New Project" to="/projects" />
             </div>
           </div>
         </div>

package/templates/default/dashboard/app/routes/projects.tsx

@@ -1,254 +1,135 @@
-import { createFileRoute, Link } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
 import { DashboardLayout } from '../components/DashboardLayout';
-import React, { useState, useMemo } from 'react';
-// import { useQuery, useMutation } from 'convex/react';
-// import { api } from '../../convex/_generated/api';
-import { FolderKanban, Plus, Settings, Users, FileText, Trash2, Edit, X, Search, MoreVertical } from 'lucide-react';
-import * as Dialog from '@radix-ui/react-dialog';
-import * as Tabs from '@radix-ui/react-tabs';
-
-// --- MOCK DATA & TYPES ---
-type Project = {
-  id: string;
-  name: string;
-  description: string;
-  agentCount: number;
-  fileCount: number;
-  createdAt: string;
-};
-
-const initialProjects: Project[] = [
-  { id: 'proj_1', name: 'AgentForge UI Revamp', description: 'Complete overhaul of the dashboard UI using TanStack and Tailwind.', agentCount: 5, fileCount: 42, createdAt: '2024-07-21' },
-  { id: 'proj_2', name: 'Customer Support Bot', description: 'An AI-powered chatbot to handle customer queries in real-time.', agentCount: 2, fileCount: 15, createdAt: '2024-07-20' },
-  { id: 'proj_3', name: 'Data Analysis Pipeline', description: 'Automated workflow for processing and analyzing sales data.', agentCount: 8, fileCount: 128, createdAt: '2024-06-15' },
-  { id: 'proj_4', name: 'Internal Documentation Hub', description: 'A centralized place for all internal project documentation.', agentCount: 1, fileCount: 256, createdAt: '2024-05-01' },
-];
-
-// --- HELPER COMPONENTS ---
-
-const ProjectCard = ({ project, onEdit, onDelete, onSelect }: { project: Project, onEdit: (project: Project) => void, onDelete: (id: string) => void, onSelect: (project: Project) => void }) => (
-  <div className="bg-card border border-border rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col">
-    <div className="p-4 flex-grow cursor-pointer" onClick={() => onSelect(project)}>
-      <div className="flex items-start justify-between">
-        <h3 className="font-bold text-lg text-foreground mb-2">{project.name}</h3>
-        <FolderKanban className="w-6 h-6 text-muted-foreground" />
-      </div>
-      <p className="text-sm text-muted-foreground mb-4 h-10 overflow-hidden">{project.description}</p>
-    </div>
-    <div className="border-t border-border p-4 flex justify-between items-center text-xs text-muted-foreground">
-      <div className="flex items-center gap-4">
-        <span className="flex items-center gap-1"><Users className="w-4 h-4" /> {project.agentCount}</span>
-        <span className="flex items-center gap-1"><FileText className="w-4 h-4" /> {project.fileCount}</span>
-      </div>
-      <div className="flex items-center gap-2">
-        <button onClick={() => onEdit(project)} className="hover:text-foreground"><Edit className="w-4 h-4" /></button>
-        <button onClick={() => onDelete(project.id)} className="hover:text-destructive"><Trash2 className="w-4 h-4" /></button>
-      </div>
-    </div>
-  </div>
-);
-
-const ProjectForm = ({ project, onSave, onCancel }: { project?: Project | null, onSave: (p: Omit<Project, 'id' | 'agentCount' | 'fileCount' | 'createdAt'>) => void, onCancel: () => void }) => {
-  const [name, setName] = useState(project?.name || '');
-  const [description, setDescription] = useState(project?.description || '');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!name) return;
-    onSave({ name, description });
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <div>
-        <label htmlFor="name" className="block text-sm font-medium text-muted-foreground mb-1">Project Name</label>
-        <input id="name" value={name} onChange={e => setName(e.target.value)} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:ring-2 focus:ring-primary" required />
-      </div>
-      <div>
-        <label htmlFor="description" className="block text-sm font-medium text-muted-foreground mb-1">Description</label>
-        <textarea id="description" value={description} onChange={e => setDescription(e.target.value)} rows={4} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:ring-2 focus:ring-primary" />
-      </div>
-      <div className="flex justify-end gap-2 mt-4">
-        <button type="button" onClick={onCancel} className="px-4 py-2 rounded-md border border-border text-foreground hover:bg-card">Cancel</button>
-        <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90">Save Project</button>
-      </div>
-    </form>
-  );
-};
-
-const ProjectDetailView = ({ project, onBack }: { project: Project, onBack: () => void }) => (
-  <div className="bg-background p-6 rounded-lg">
-    <div className="flex justify-between items-start mb-6">
-      <div>
-        <button onClick={onBack} className="text-sm text-primary hover:underline mb-2">&larr; Back to Projects</button>
-        <h2 className="text-2xl font-bold text-foreground">{project.name}</h2>
-        <p className="text-muted-foreground">{project.description}</p>
-      </div>
-      <div className="text-sm text-muted-foreground">Created: {new Date(project.createdAt).toLocaleDateString()}</div>
-    </div>
-
-    <Tabs.Root defaultValue="overview" className="w-full">
-      <Tabs.List className="flex border-b border-border mb-4">
-        <Tabs.Trigger value="overview" className="px-4 py-2 text-sm font-medium text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary">Overview</Tabs.Trigger>
-        <Tabs.Trigger value="agents" className="px-4 py-2 text-sm font-medium text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary">Agents</Tabs.Trigger>
-        <Tabs.Trigger value="files" className="px-4 py-2 text-sm font-medium text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary">Files</Tabs.Trigger>
-        <Tabs.Trigger value="settings" className="px-4 py-2 text-sm font-medium text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary">Settings</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="overview" className="p-4 bg-card rounded-b-lg border border-t-0 border-border">
-        <h4 className="font-bold text-lg mb-2">Project Overview</h4>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
-            <div className="bg-background p-4 rounded-lg border border-border"><p className="text-2xl font-bold">{project.agentCount}</p><p className="text-sm text-muted-foreground">Agents</p></div>
-            <div className="bg-background p-4 rounded-lg border border-border"><p className="text-2xl font-bold">{project.fileCount}</p><p className="text-sm text-muted-foreground">Files</p></div>
-        </div>
-      </Tabs.Content>
-      <Tabs.Content value="agents" className="p-4 bg-card rounded-b-lg border border-t-0 border-border"><p className="text-muted-foreground">Agent management UI will be here.</p></Tabs.Content>
-      <Tabs.Content value="files" className="p-4 bg-card rounded-b-lg border border-t-0 border-border"><p className="text-muted-foreground">File management UI will be here.</p></Tabs.Content>
-      <Tabs.Content value="settings" className="p-4 bg-card rounded-b-lg border border-t-0 border-border"><p className="text-muted-foreground">Project settings UI will be here.</p></Tabs.Content>
-    </Tabs.Root>
-  </div>
-);
-
-// --- MAIN PAGE COMPONENT ---
+import { useState, useMemo } from 'react';
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { FolderKanban, Plus, Trash2, Edit, Search, X } from 'lucide-react';
 
 export const Route = createFileRoute('/projects')({ component: ProjectsPage });
 
 function ProjectsPage() {
-  const [projects, setProjects] = useState<Project[]>(initialProjects);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [editingProject, setEditingProject] = useState<Project | null>(null);
-  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
-
-  // --- Commented-out Convex Hooks ---
-  /*
-  const projectsData = useQuery(api.projects.list, { search: searchQuery });
+  const projects = useQuery(api.projects.list, {}) ?? [];
   const createProject = useMutation(api.projects.create);
   const updateProject = useMutation(api.projects.update);
-  const deleteProject = useMutation(api.projects.delete);
+  const removeProject = useMutation(api.projects.remove);
 
-  React.useEffect(() => {
-    if (projectsData) {
-      setProjects(projectsData);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<any>(null);
+
+  const filtered = useMemo(() => {
+    if (!searchQuery) return projects;
+    const q = searchQuery.toLowerCase();
+    return projects.filter((p: any) => p.name.toLowerCase().includes(q) || (p.description || '').toLowerCase().includes(q));
+  }, [projects, searchQuery]);
+
+  const handleSave = async (data: { name: string; description: string }) => {
+    if (editingProject) {
+      await updateProject({ id: editingProject._id, ...data });
+    } else {
+      await createProject(data);
     }
-  }, [projectsData]);
-  */
-
-  const handleCreate = () => {
+    setIsModalOpen(false);
     setEditingProject(null);
-    setIsModalOpen(true);
-  };
-
-  const handleEdit = (project: Project) => {
-    setEditingProject(project);
-    setIsModalOpen(true);
   };
 
-  const handleDelete = (id: string) => {
-    if (window.confirm('Are you sure you want to delete this project?')) {
-      // await deleteProject({ id });
-      setProjects(projects.filter(p => p.id !== id));
+  const handleDelete = async (id: any) => {
+    if (confirm('Delete this project?')) {
+      await removeProject({ id });
     }
   };
 
-  const handleSave = (data: Omit<Project, 'id' | 'agentCount' | 'fileCount' | 'createdAt'>) => {
-    setIsLoading(true);
-    setTimeout(() => { // Simulate async operation
-      if (editingProject) {
-        // await updateProject({ id: editingProject.id, ...data });
-        setProjects(projects.map(p => p.id === editingProject.id ? { ...p, ...data } : p));
-      } else {
-        const newProject: Project = {
-          id: `proj_${Date.now()}`,
-          ...data,
-          agentCount: 0,
-          fileCount: 0,
-          createdAt: new Date().toISOString().split('T')[0],
-        };
-        // await createProject(newProject);
-        setProjects([newProject, ...projects]);
-      }
-      setIsLoading(false);
-      setIsModalOpen(false);
-      setEditingProject(null);
-    }, 500);
-  };
-
-  const filteredProjects = useMemo(() =>
-    projects.filter(p =>
-      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      p.description.toLowerCase().includes(searchQuery.toLowerCase())
-    ), [projects, searchQuery]);
-
-  if (selectedProject) {
-    return (
-      <DashboardLayout>
-        <ProjectDetailView project={selectedProject} onBack={() => setSelectedProject(null)} />
-      </DashboardLayout>
-    );
-  }
-
   return (
     <DashboardLayout>
-      <div className="p-6 bg-background min-h-full">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-2xl font-bold text-foreground">Projects</h1>
-          <button onClick={handleCreate} className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
-            <Plus className="w-5 h-5" />
-            New Project
+      <div className="space-y-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          <div>
+            <h1 className="text-3xl font-bold">Projects</h1>
+            <p className="text-muted-foreground">Organize your agents, files, and threads into workspaces.</p>
+          </div>
+          <button onClick={() => { setEditingProject(null); setIsModalOpen(true); }} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 flex items-center gap-2">
+            <Plus className="w-4 h-4" /> New Project
           </button>
         </div>
 
-        <div className="mb-6 relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-          <input
-            type="text"
-            placeholder="Search projects..."
-            value={searchQuery}
-            onChange={e => setSearchQuery(e.target.value)}
-            className="w-full bg-card border border-border rounded-md pl-10 pr-4 py-2 text-foreground"
-          />
+        <div className="relative max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input type="text" placeholder="Search projects..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 pr-3 py-2 bg-card border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary w-full" />
         </div>
 
-        {isLoading && <p className="text-muted-foreground">Loading projects...</p>}
-        {error && <p className="text-destructive">{error}</p>}
-
-        {!isLoading && !error && (
-          filteredProjects.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              {filteredProjects.map(project => (
-                <ProjectCard key={project.id} project={project} onEdit={handleEdit} onDelete={handleDelete} onSelect={setSelectedProject} />
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-16 border-2 border-dashed border-border rounded-lg">
-              <FolderKanban className="mx-auto w-12 h-12 text-muted-foreground" />
-              <h3 className="mt-4 text-lg font-medium text-foreground">No projects found</h3>
-              <p className="mt-1 text-sm text-muted-foreground">Get started by creating a new project.</p>
-              <button onClick={handleCreate} className="mt-6 flex mx-auto items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
-                <Plus className="w-5 h-5" />
-                New Project
+        {filtered.length === 0 ? (
+          <div className="text-center py-16 bg-card border border-border rounded-lg">
+            <FolderKanban className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">{projects.length === 0 ? 'No projects yet' : 'No matching projects'}</h3>
+            <p className="text-muted-foreground mb-4">Create a project to organize your work.</p>
+            {projects.length === 0 && (
+              <button onClick={() => setIsModalOpen(true)} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90">
+                <Plus className="w-4 h-4 inline mr-2" />Create Project
               </button>
-            </div>
-          )
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filtered.map((project: any) => (
+              <div key={project._id} className="bg-card border border-border rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow">
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <FolderKanban className="w-5 h-5 text-primary" />
+                    <h3 className="font-semibold text-foreground">{project.name}</h3>
+                  </div>
+                </div>
+                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{project.description || 'No description'}</p>
+                <div className="text-xs text-muted-foreground mb-4">Created {new Date(project.createdAt).toLocaleDateString()}</div>
+                <div className="flex items-center justify-between pt-3 border-t border-border">
+                  <button onClick={() => { setEditingProject(project); setIsModalOpen(true); }} className="p-1.5 rounded hover:bg-muted flex items-center gap-1 text-xs text-muted-foreground"><Edit className="w-4 h-4" /> Edit</button>
+                  <button onClick={() => handleDelete(project._id)} className="p-1.5 rounded hover:bg-destructive/10"><Trash2 className="w-4 h-4 text-destructive" /></button>
+                </div>
+              </div>
+            ))}
+          </div>
         )}
 
-        <Dialog.Root open={isModalOpen} onOpenChange={setIsModalOpen}>
-          <Dialog.Portal>
-            <Dialog.Overlay className="fixed inset-0 bg-black/50" />
-            <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-md bg-card p-6 rounded-lg shadow-lg border border-border">
-              <Dialog.Title className="text-lg font-bold text-foreground mb-4">{editingProject ? 'Edit Project' : 'Create New Project'}</Dialog.Title>
-              <ProjectForm project={editingProject} onSave={handleSave} onCancel={() => setIsModalOpen(false)} />
-              <Dialog.Close asChild>
-                <button className="absolute top-4 right-4 text-muted-foreground hover:text-foreground">
-                  <X className="w-5 h-5" />
-                </button>
-              </Dialog.Close>
-            </Dialog.Content>
-          </Dialog.Portal>
-        </Dialog.Root>
+        {isModalOpen && (
+          <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
+            <div className="bg-card border border-border rounded-lg shadow-xl w-full max-w-md">
+              <div className="flex justify-between items-center p-4 border-b border-border">
+                <h2 className="text-lg font-bold">{editingProject ? 'Edit Project' : 'New Project'}</h2>
+                <button onClick={() => { setIsModalOpen(false); setEditingProject(null); }} className="text-muted-foreground hover:text-foreground"><X className="h-5 w-5" /></button>
+              </div>
+              <ProjectForm initial={editingProject} onSave={handleSave} onClose={() => { setIsModalOpen(false); setEditingProject(null); }} />
+            </div>
+          </div>
+        )}
       </div>
     </DashboardLayout>
   );
 }
+
+function ProjectForm({ initial, onSave, onClose }: { initial: any; onSave: (data: any) => void; onClose: () => void }) {
+  const [name, setName] = useState(initial?.name || '');
+  const [description, setDescription] = useState(initial?.description || '');
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    onSave({ name, description });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="p-6 space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Name</label>
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" placeholder="Project name" required />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1">Description</label>
+          <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" placeholder="What is this project about?" />
+        </div>
+      </div>
+      <div className="p-4 border-t border-border flex justify-end gap-2">
+        <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg bg-muted text-muted-foreground text-sm">Cancel</button>
+        <button type="submit" disabled={!name.trim()} className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm hover:bg-primary/90 disabled:opacity-50">Save</button>
+      </div>
+    </form>
+  );
+}