@agentforge-ai/cli 0.4.0 → 0.4.1

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

@@ -0,0 +1,141 @@
+import { createFileRoute } 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';
+
+export const Route = createFileRoute('/')({ component: OverviewPage });
+
+function StatCard({ icon: Icon, title, value, change }) {
+  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>
+      <Icon className="w-10 h-10 text-primary" />
+    </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 }) {
+  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>
+  );
+}
+
+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);
+
+  // 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' };
+  */
+
+  return (
+    <DashboardLayout>
+      <div className="p-6 md:p-8 space-y-8 bg-background text-foreground">
+        <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>
+
+        {/* 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" />
+        </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 ? (
+              <ul>
+                {activity.map(item => (
+                  <ActivityItem key={item.id} icon={item.icon} text={item.text} time={item.time} />
+                ))}
+              </ul>
+            ) : (
+              <div className="text-center py-10">
+                <p className="text-muted-foreground">No recent activity to display.</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="grid grid-cols-2 gap-4">
+              <QuickActionButton icon={Bot} label="Create Agent" to="/agents/new" />
+              <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" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

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

@@ -0,0 +1,254 @@
+import { createFileRoute, Link } 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 ---
+
+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 createProject = useMutation(api.projects.create);
+  const updateProject = useMutation(api.projects.update);
+  const deleteProject = useMutation(api.projects.delete);
+
+  React.useEffect(() => {
+    if (projectsData) {
+      setProjects(projectsData);
+    }
+  }, [projectsData]);
+  */
+
+  const handleCreate = () => {
+    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 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
+          </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>
+
+        {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
+              </button>
+            </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>
+      </div>
+    </DashboardLayout>
+  );
+}

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

@@ -0,0 +1,272 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { DashboardLayout } from '../components/DashboardLayout';
+import { useState, useMemo, useEffect } from 'react';
+// import { useQuery, useMutation } from 'convex/react';
+// import { api } from '../../convex/_generated/api';
+import { Button } from '../components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '../components/ui/sheet';
+import { Badge } from '../components/ui/badge';
+import { Activity, Clock, MessageSquare, XCircle, Loader2 } from 'lucide-react';
+
+// Mock data structure, aligned with the requirements
+const mockSessions = [
+  {
+    _id: 's1',
+    agentId: 'agent-001',
+    status: 'active',
+    _creationTime: new Date().getTime() - 1000 * 60 * 5,
+    messageCount: 42,
+  },
+  {
+    _id: 's2',
+    agentId: 'agent-007',
+    status: 'idle',
+    _creationTime: new Date().getTime() - 1000 * 60 * 30,
+    messageCount: 12,
+  },
+  {
+    _id: 's3',
+    agentId: 'agent-002',
+    status: 'ended',
+    _creationTime: new Date().getTime() - 1000 * 60 * 120,
+    endTime: new Date().getTime() - 1000 * 60 * 60,
+    messageCount: 150,
+  },
+  {
+    _id: 's4',
+    agentId: 'agent-001',
+    status: 'active',
+    _creationTime: new Date().getTime() - 1000 * 60 * 2,
+    messageCount: 5,
+  },
+];
+
+type Session = typeof mockSessions[0] & { endTime?: number };
+
+export const Route = createFileRoute('/sessions')({
+  component: SessionsPage,
+});
+
+function formatDuration(startTime: number, endTime?: number) {
+  const end = endTime ? endTime : new Date().getTime();
+  const seconds = Math.floor((end - startTime) / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+
+function SessionsPage() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [selectedSession, setSelectedSession] = useState<Session | null>(null);
+
+  // --- Commented-out Convex Hooks ---
+  /*
+  const sessionsData = useQuery(
+    api.sessions.listByStatus,
+    statusFilter === 'all' ? {} : { status: statusFilter }
+  );
+  const endSessionMutation = useMutation(api.sessions.endSession);
+
+  useEffect(() => {
+    if (sessionsData === undefined) {
+      setIsLoading(true);
+      setError(null);
+    } else if (sessionsData) {
+      setSessions(sessionsData);
+      setIsLoading(false);
+    } else {
+      // Handle potential query error from Convex
+      setIsLoading(false);
+      setError("Failed to fetch sessions.");
+    }
+  }, [sessionsData]);
+  */
+
+  // Local state simulation of fetching data
+  useEffect(() => {
+    setIsLoading(true);
+    setError(null);
+    const timer = setTimeout(() => {
+      try {
+        // Simulate API call
+        setSessions(mockSessions.map(s => ({...s, endTime: s.status === 'ended' ? (s as any).endTime : undefined })));
+        setIsLoading(false);
+      } catch (e) {
+        setError("Failed to load sessions.");
+        setIsLoading(false);
+      }
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleEndSession = async (sessionId: string) => {
+    // Optimistic update for local state
+    setSessions(prev =>
+      prev.map(s =>
+        s._id === sessionId ? { ...s, status: 'ended', endTime: new Date().getTime() } : s
+      )
+    );
+
+    // --- Commented-out Convex Mutation Call ---
+    /*
+    try {
+      await endSessionMutation({ sessionId });
+      // Optionally, you can show a toast notification for success
+    } catch (err) {
+      console.error("Failed to end session:", err);
+      // Revert optimistic update on failure
+      setSessions(sessionsData || []); // Revert to original data from query
+      // Optionally, show an error toast
+    }
+    */
+  };
+
+  const filteredSessions = useMemo(() => {
+    if (statusFilter === 'all') {
+      return sessions;
+    }
+    return sessions.filter(s => s.status === statusFilter);
+  }, [sessions, statusFilter]);
+
+  const statusBadge = (status: string) => {
+    switch (status) {
+      case 'active':
+        return <Badge variant="default" className="bg-green-500 text-white">Active</Badge>;
+      case 'idle':
+        return <Badge variant="secondary" className="bg-yellow-500 text-white">Idle</Badge>;
+      case 'ended':
+        return <Badge variant="destructive" className="bg-gray-500 text-white">Ended</Badge>;
+      default:
+        return <Badge>{status}</Badge>;
+    }
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="p-4 md:p-6 lg:p-8">
+        <h1 className="text-2xl font-bold mb-4">Sessions</h1>
+        <Card>
+          <CardHeader>
+            <CardTitle>Manage and monitor all user sessions.</CardTitle>
+            <Tabs value={statusFilter} onValueChange={setStatusFilter} className="w-full pt-4">
+              <TabsList>
+                <TabsTrigger value="all">All</TabsTrigger>
+                <TabsTrigger value="active">Active</TabsTrigger>
+                <TabsTrigger value="idle">Idle</TabsTrigger>
+                <TabsTrigger value="ended">Ended</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="flex justify-center items-center h-64">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              </div>
+            ) : error ? (
+              <div className="text-center text-destructive py-10">{error}</div>
+            ) : filteredSessions.length === 0 ? (
+              <div className="text-center text-muted-foreground py-10">
+                <p className="text-lg">No sessions found.</p>
+                <p>Start a new chat to create a session.</p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Session ID</TableHead>
+                      <TableHead>Agent</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Started</TableHead>
+                      <TableHead>Duration</TableHead>
+                      <TableHead className="text-right">Messages</TableHead>
+                      <TableHead className="text-right">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredSessions.map(session => (
+                      <TableRow key={session._id} onClick={() => setSelectedSession(session)} className="cursor-pointer hover:bg-muted/50">
+                        <TableCell className="font-mono text-xs">{session._id}</TableCell>
+                        <TableCell>{session.agentId}</TableCell>
+                        <TableCell>{statusBadge(session.status)}</TableCell>
+                        <TableCell>{new Date(session._creationTime).toLocaleString()}</TableCell>
+                        <TableCell>{formatDuration(session._creationTime, session.endTime)}</TableCell>
+                        <TableCell className="text-right">{session.messageCount}</TableCell>
+                        <TableCell className="text-right">
+                          {session.status !== 'ended' && (
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              onClick={(e) => { e.stopPropagation(); handleEndSession(session._id); }}
+                            >
+                              <XCircle className="h-4 w-4 mr-2" />
+                              End Session
+                            </Button>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Sheet open={!!selectedSession} onOpenChange={(open) => !open && setSelectedSession(null)}>
+        <SheetContent className="w-full sm:max-w-lg bg-background border-l">
+          {selectedSession && (
+            <>
+              <SheetHeader>
+                <SheetTitle>Session Details</SheetTitle>
+                <SheetDescription className="font-mono text-xs pt-2">{selectedSession._id}</SheetDescription>
+              </SheetHeader>
+              <div className="py-6 space-y-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Status</span>
+                  {statusBadge(selectedSession.status)}
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground flex items-center"><Activity className="h-4 w-4 mr-2" />Agent</span>
+                  <span>{selectedSession.agentId}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground flex items-center"><Clock className="h-4 w-4 mr-2" />Started</span>
+                  <span>{new Date(selectedSession._creationTime).toLocaleString()}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground flex items-center"><Clock className="h-4 w-4 mr-2" />Duration</span>
+                  <span>{formatDuration(selectedSession._creationTime, selectedSession.endTime)}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground flex items-center"><MessageSquare className="h-4 w-4 mr-2" />Messages</span>
+                  <span>{selectedSession.messageCount}</span>
+                </div>
+                {selectedSession.status === 'ended' && selectedSession.endTime && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground flex items-center"><XCircle className="h-4 w-4 mr-2" />Ended</span>
+                    <span>{new Date(selectedSession.endTime).toLocaleString()}</span>
+                  </div>
+                )}
+              </div>
+              <SheetFooter>
+                <SheetClose asChild>
+                  <Button variant="outline">Close</Button>
+                </SheetClose>
+              </SheetFooter>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+    </DashboardLayout>
+  );
+}