feat: Implement a comprehensive workflow node editor with diverse node types, history management, and supporting API routes.

app/api/businesses/categories/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { businesses } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { SessionUser } from "@/types";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const userId = (session.user as SessionUser).id;
+
+    // Fetch distinct categories
+    const results = await db
+      .selectDistinct({ category: businesses.category })
+      .from(businesses)
+      .where(eq(businesses.userId, userId))
+      .orderBy(businesses.category);
+
+    // Map to simple array of strings, filtering out nulls if any
+    const categories = results
+      .map((r) => r.category)
+      .filter((c): c is string => !!c);
+
+    return NextResponse.json({ categories });
+  } catch (error) {
+    console.error("Error fetching categories:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch categories" },
+      { status: 500 }
+    );
+  }
+}

app/api/businesses/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { db } from "@/db";
 import { businesses } from "@/db/schema";
-import { eq, and, sql } from "drizzle-orm";
+import { eq, and, sql, or, isNull } from "drizzle-orm";
 import { rateLimit } from "@/lib/rate-limit";
 
 interface SessionUser {
@@ -34,20 +34,19 @@ export async function GET(request: Request) {
     }
 
     if (status) {
-      conditions.push(eq(businesses.emailStatus, status));
+      if (status === "pending") {
+        conditions.push(or(eq(businesses.emailStatus, "pending"), isNull(businesses.emailStatus))!);
+      } else {
+        conditions.push(eq(businesses.emailStatus, status));
+      }
     }
 
-    console.log(`🔍 Fetching businesses for UserID: ${userId}`);
-    console.log(`   Filters - Category: ${category}, Status: ${status}, Page: ${page}, Limit: ${limit}`);
-
     // Get total count
     const [{ count }] = await db
       .select({ count: sql<number>`count(*)` })
       .from(businesses)
       .where(and(...conditions));
 
-    console.log(`   Found ${count} total businesses matching criteria`);
-
     const totalPages = Math.ceil(count / limit);
 
     const results = await db

app/api/email/send/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { db } from "@/db";
-import { businesses, emailTemplates, emailLogs } from "@/db/schema";
+import { businesses, emailTemplates, emailLogs, users } from "@/db/schema";
 import { eq, and } from "drizzle-orm";
 import { sendColdEmail, interpolateTemplate } from "@/lib/email";
 import { SessionUser } from "@/types";
@@ -59,8 +59,13 @@ export async function POST(request: Request) {
             );
         }
 
+        // Fetch user details for variable interpolation
+        const dbUser = await db.query.users.findFirst({
+            where: eq(users.id, user.id),
+        });
+
         // Send email
-        const success = await sendColdEmail(business, template, user.accessToken);
+        const { success, error } = await sendColdEmail(business, template, user.accessToken, dbUser);
 
         // Update business status
         await db
@@ -78,15 +83,17 @@ export async function POST(request: Request) {
             userId: user.id,
             businessId: business.id,
             templateId: template.id,
-            subject: interpolateTemplate(template.subject, business),
-            body: interpolateTemplate(template.body, business),
+            subject: interpolateTemplate(template.subject, business, dbUser),
+            body: interpolateTemplate(template.body, business, dbUser),
             status: success ? "sent" : "failed",
+            errorMessage: error, // Log the error message
             sentAt: success ? new Date() : null,
         });
 
         if (!success) {
+            console.error("Email send failed:", error);
             return NextResponse.json(
-                { error: "Failed to send email via Gmail API" },
+                { error: error || "Failed to send email via Gmail API" },
                 { status: 500 }
             );
         }

app/api/notifications/route.ts

@@ -0,0 +1,77 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { notifications, users } from "@/db/schema";
+import { eq, desc } from "drizzle-orm";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    // Get user ID from DB
+    const user = await db.query.users.findFirst({
+        where: eq(users.email, session.user.email)
+    });
+
+    if (!user) {
+        return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    const userNotifications = await db
+      .select()
+      .from(notifications)
+      .where(eq(notifications.userId, user.id))
+      .orderBy(desc(notifications.createdAt))
+      .limit(50);
+
+    return NextResponse.json({ notifications: userNotifications });
+  } catch (error) {
+    console.error("Error fetching notifications:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch notifications" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+     // Get user ID from DB
+     const user = await db.query.users.findFirst({
+        where: eq(users.email, session.user.email)
+    });
+
+    if (!user) {
+        return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    const { title, message, type } = await request.json();
+
+    const [newNotification] = await db
+      .insert(notifications)
+      .values({
+        userId: user.id,
+        title,
+        message,
+        type: type || "info",
+        read: false,
+      })
+      .returning();
+
+    return NextResponse.json({ notification: newNotification });
+  } catch (error) {
+    console.error("Error creating notification:", error);
+    return NextResponse.json(
+      { error: "Failed to create notification" },
+      { status: 500 }
+    );
+  }
+}

app/api/settings/delete-data/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { businesses, scrapingJobs, users } from "@/db/schema";
+import { eq } from "drizzle-orm";
+
+export async function DELETE() {
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const currentUser = await db.query.users.findFirst({
+        where: eq(users.email, session.user.email)
+    });
+
+    if (!currentUser) {
+        return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    // Delete all businesses for the user
+    await db.delete(businesses).where(eq(businesses.userId, currentUser.id));
+    
+    // Delete all scraping jobs for the user
+    await db.delete(scrapingJobs).where(eq(scrapingJobs.userId, currentUser.id));
+
+    return NextResponse.json({ success: true, message: "All scraped data deleted successfully" });
+  } catch (error) {
+    console.error("Error deleting data:", error);
+    return NextResponse.json(
+      { error: "Failed to delete data" },
+      { status: 500 }
+    );
+  }
+}

app/api/settings/route.ts

@@ -33,6 +33,7 @@ export async function GET() {
         email: users.email,
         image: users.image,
         geminiApiKey: users.geminiApiKey,
+        accessToken: users.accessToken,
         phone: users.phone,
         jobTitle: users.jobTitle,
         company: users.company,
@@ -59,6 +60,7 @@ export async function GET() {
         image: user.image,
         geminiApiKey: maskedGeminiKey,
         isGeminiKeySet: !!user.geminiApiKey,
+        isGmailConnected: !!user.accessToken,
         phone: user.phone,
         jobTitle: user.jobTitle,
         company: user.company,

app/api/workflows/test-node/route.ts

@@ -12,7 +12,7 @@ export async function POST(req: Request) {
 
         // Simulate execution logic
         let outputContext = { ...inputContext };
-        let logs: string[] = [];
+        const logs: string[] = [];
         let status = "success";
 
         try {
@@ -34,8 +34,9 @@ export async function POST(req: Request) {
                            const result = check(...values);
                            logs.push(`Condition '${condition}' evaluated to: ${result}`);
                            outputContext._conditionResult = !!result;
-                        } catch (e: any) {
-                             logs.push(`Error evaluating condition: ${e.message}`);
+                        } catch (e) {
+                            const errorMessage = e instanceof Error ? e.message : String(e);
+                             logs.push(`Error evaluating condition: ${errorMessage}`);
                              status = "error";
                         }
                     }
@@ -57,8 +58,9 @@ export async function POST(req: Request) {
                             } else {
                                 logs.push("Filter passed (true).");
                             }
-                        } catch (e: any) {
-                             logs.push(`Error evaluating filter: ${e.message}`);
+                        } catch (e) {
+                            const errorMessage = e instanceof Error ? e.message : String(e);
+                             logs.push(`Error evaluating filter: ${errorMessage}`);
                              status = "error";
                         }
                      }
@@ -97,6 +99,54 @@ export async function POST(req: Request) {
                     logs.push("Merge node passed.");
                     break;
 
+                case "scraper":
+                    const action = config?.scraperAction || "extract-emails";
+                    const inputVar = config?.scraperInputField || "";
+
+                    // Simple variable resolution for test: check if inputVar is a key in inputContext, else use raw string
+                    // This matches the simplified eval logic of this test endpoint
+                    const cleanVar = inputVar.replace(/^\{|\}$/g, "");
+                    let content = inputContext[cleanVar] !== undefined ? inputContext[cleanVar] : inputVar;
+                    // handle nested like business.website
+                    if (cleanVar.includes(".")) {
+                        const parts = cleanVar.split(".");
+                        if (parts[0] === "business" && inputContext.business) {
+                            content = inputContext.business[parts[1]];
+                        } else if (parts[0] === "variables") {
+                            content = inputContext[parts[1]];
+                        }
+                    }
+
+                    const textContent = typeof content === "string" ? content : JSON.stringify(content || "");
+                    logs.push(`Running Scraper Action: ${action}`);
+
+                    if (action === "fetch-url") {
+                        let url = textContent.trim();
+                        if (!url.startsWith("http")) url = "https://" + url;
+                        logs.push(`Fetching URL: ${url}`);
+                        try {
+                            const response = await fetch(url);
+                            if (!response.ok) throw new Error(`Status ${response.status}`);
+                            const html = await response.text();
+                            outputContext.scrapedData = html;
+                            logs.push(`Success: Fetched ${html.length} chars.`);
+                        } catch (e) {
+                            const errorMessage = e instanceof Error ? e.message : String(e);
+                            logs.push(`Error fetching URL: ${errorMessage}`);
+                            status = "error";
+                        }
+                    } else if (action === "extract-emails") {
+                        const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
+                        const matches = textContent.match(emailRegex);
+                        const emails = matches ? [...new Set(matches)] : [];
+                        outputContext.scrapedData = emails;
+                        logs.push(`Extracted ${emails.length} emails: ${emails.slice(0, 3).join(", ")}...`);
+                    } else {
+                        logs.push(`Action ${action} simulated.`);
+                        outputContext.scrapedData = "Simulated Result";
+                    }
+                    break;
+
                  case "splitInBatches":
                      logs.push("Loop node passed (mock).");
                      break;
@@ -106,9 +156,10 @@ export async function POST(req: Request) {
                     break;
             }
 
-        } catch (error: any) {
+        } catch (error: unknown) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
             status = "error";
-            logs.push(`Runtime Error: ${error.message}`);
+            logs.push(`Runtime Error: ${errorMessage}`);
         }
 
         return NextResponse.json({

app/dashboard/businesses/page.tsx

@@ -20,6 +20,13 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 
 export default function BusinessesPage() {
     const [businesses, setBusinesses] = useState<Business[]>([]);
@@ -33,13 +40,34 @@ export default function BusinessesPage() {
     const [totalPages, setTotalPages] = useState(1);
     const [limit] = useState(10); // Or make this adjustable
 
+    const [filterCategory, setFilterCategory] = useState("all");
+    const [filterStatus, setFilterStatus] = useState("all");
+    const [categories, setCategories] = useState<string[]>([]);
+
     const { get: getBusinessesApi } = useApi<{ businesses: Business[], totalPages: number, page: number }>();
+    const { get: getCategoriesApi } = useApi<{ categories: string[] }>();
+
+    // Fetch categories on mount
+    useEffect(() => {
+        const fetchCategories = async () => {
+            const data = await getCategoriesApi("/api/businesses/categories");
+            if (data?.categories) {
+                setCategories(data.categories);
+            }
+        };
+        fetchCategories();
+    }, [getCategoriesApi]);
 
     useEffect(() => {
         let mounted = true;
         const load = async () => {
-            // Append query params manually or via options if useApi supported it, but template literal is fine here
-            const data = await getBusinessesApi(`/api/businesses?page=${currentPage}&limit=${limit}`);
+            const params = new URLSearchParams();
+            params.append("page", currentPage.toString());
+            params.append("limit", limit.toString());
+            if (filterCategory !== "all") params.append("category", filterCategory);
+            if (filterStatus !== "all") params.append("status", filterStatus);
+
+            const data = await getBusinessesApi(`/api/businesses?${params.toString()}`);
             if (mounted && data) {
                 setBusinesses(data.businesses);
                 setTotalPages(data.totalPages || 1);
@@ -47,7 +75,7 @@ export default function BusinessesPage() {
         };
         load();
         return () => { mounted = false; };
-    }, [getBusinessesApi, currentPage, limit]);
+    }, [getBusinessesApi, currentPage, limit, filterCategory, filterStatus]);
 
     const handleConfirmDelete = async () => {
         try {
@@ -71,11 +99,7 @@ export default function BusinessesPage() {
     const handleSendEmail = async (business: Business) => {
         const toastId = toast.loading(`Sending email to ${business.name}...`);
         try {
-            const result = await sendEmailApi("/api/email/send", { businessId: business.id });
-
-            if (!result) {
-                throw new Error("Failed to send email");
-            }
+            await sendEmailApi("/api/email/send", { businessId: business.id }, { throwOnError: true });
 
             toast.success(`Email sent to ${business.email}`, { id: toastId });
 
@@ -85,25 +109,20 @@ export default function BusinessesPage() {
                     ? { ...b, emailStatus: "sent", emailSent: true }
                     : b
             ));
-        } catch (error) {
-            toast.error("Failed to send email", { id: toastId });
-            console.error(error);
+        } catch (error: unknown) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to send email";
+            toast.error(errorMessage, { id: toastId });
         }
     };
 
     return (
         <div className="space-y-6 pt-6">
-            <div className="flex justify-between items-center">
+            <div className="flex justify-start items-center">
                 <div>
                     <h2 className="text-3xl font-bold tracking-tight">Your Businesses</h2>
                     <p className="text-muted-foreground">Manage all your collected leads</p>
                 </div>
-                {selectedIds.length > 0 && (
-                    <Button variant="destructive" onClick={() => setDeleteDialogOpen(true)}>
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        Delete ({selectedIds.length})
-                    </Button>
-                )}
+                
             </div>
 
             <Card>
@@ -111,6 +130,48 @@ export default function BusinessesPage() {
                     <CardTitle>All Leads ({businesses.length})</CardTitle>
                 </CardHeader>
                 <CardContent>
+                    <div className="flex justify-between items-center mb-4">
+                       <div className="flex gap-4">
+
+                        <Select
+                            value={filterStatus}
+                            onValueChange={setFilterStatus}
+                        >
+                            <SelectTrigger className="w-[180px]">
+                                <SelectValue placeholder="All Status" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All Status</SelectItem>
+                                <SelectItem value="pending">Pending</SelectItem>
+                                <SelectItem value="sent">Sent</SelectItem>
+                                <SelectItem value="failed">Failed</SelectItem>
+                            </SelectContent>
+                        </Select>
+
+                        <Select
+                            value={filterCategory}
+                            onValueChange={setFilterCategory}
+                        >
+                            <SelectTrigger className="w-[200px]">
+                                <SelectValue placeholder="All Categories" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All Categories</SelectItem>
+                                {categories.map((category) => (
+                                    <SelectItem key={category} value={category}>
+                                        {category}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        </div>
+                        {selectedIds.length > 0 && (
+                            <Button variant="destructive" onClick={() => setDeleteDialogOpen(true)}>
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Delete ({selectedIds.length})
+                            </Button>
+                        )}
+                    </div>
                     <BusinessTable
                         businesses={businesses}
                         onViewDetails={handleViewDetails}

app/dashboard/page.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Business } from "@/types";
 import {
   Users,
@@ -313,62 +314,52 @@ export default function DashboardPage() {
             <Label>Scraping Sources</Label>
             <div className="flex flex-wrap gap-3">
               <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={scrapingSources.includes("google-maps")}
-                  onChange={(e) => {
-                    if (e.target.checked) setScrapingSources([...scrapingSources, "google-maps"]);
+                  onCheckedChange={(checked) => {
+                    if (checked) setScrapingSources([...scrapingSources, "google-maps"]);
                     else setScrapingSources(scrapingSources.filter(s => s !== "google-maps"));
                   }}
-                  className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">📍 Google Maps</span>
               </label>
               <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={scrapingSources.includes("google-search")}
-                  onChange={(e) => {
-                    if (e.target.checked) setScrapingSources([...scrapingSources, "google-search"]);
+                  onCheckedChange={(checked) => {
+                    if (checked) setScrapingSources([...scrapingSources, "google-search"]);
                     else setScrapingSources(scrapingSources.filter(s => s !== "google-search"));
                   }}
-                  className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">🔍 Google Search</span>
               </label>
               <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={scrapingSources.includes("linkedin")}
-                  onChange={(e) => {
-                    if (e.target.checked) setScrapingSources([...scrapingSources, "linkedin"]);
+                  onCheckedChange={(checked) => {
+                    if (checked) setScrapingSources([...scrapingSources, "linkedin"]);
                     else setScrapingSources(scrapingSources.filter(s => s !== "linkedin"));
                   }}
-                  className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">💼 LinkedIn</span>
               </label>
               <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={scrapingSources.includes("facebook")}
-                  onChange={(e) => {
-                    if (e.target.checked) setScrapingSources([...scrapingSources, "facebook"]);
+                  onCheckedChange={(checked) => {
+                    if (checked) setScrapingSources([...scrapingSources, "facebook"]);
                     else setScrapingSources(scrapingSources.filter(s => s !== "facebook"));
                   }}
-                  className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">👥 Facebook</span>
               </label>
               <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={scrapingSources.includes("instagram")}
-                  onChange={(e) => {
-                    if (e.target.checked) setScrapingSources([...scrapingSources, "instagram"]);
+                  onCheckedChange={(checked) => {
+                    if (checked) setScrapingSources([...scrapingSources, "instagram"]);
                     else setScrapingSources(scrapingSources.filter(s => s !== "instagram"));
                   }}
-                  className="w-4 h-4 rounded border-gray-300"
                 />
                 <span className="text-sm">📸 Instagram</span>
               </label>

app/dashboard/settings/page.tsx

@@ -27,6 +27,7 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Moon, Sun, LogOut, Trash2, AlertTriangle, Palette } from "lucide-react";
+import { MailSettings } from "@/components/mail/mail-settings";
 
 interface StatusResponse {
   database: boolean;
@@ -42,13 +43,17 @@ export default function SettingsPage() {
   const [isSavingNotifications, setIsSavingNotifications] = useState(false);
 
   // API Hooks
-  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{ user: UserProfile & { isGeminiKeySet: boolean } }>();
+  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{ user: UserProfile & { isGeminiKeySet: boolean, isGmailConnected: boolean } }>();
   const { get: getStatus, loading: statusLoading } = useApi<StatusResponse>();
   const { del: deleteUserFn, loading: deletingUser } = useApi<void>();
+  const { del: deleteDataFn, loading: deletingData } = useApi<void>();
+
+  const [isDeleteDataModalOpen, setIsDeleteDataModalOpen] = useState(false);
 
   // API Key State
   const [geminiApiKey, setGeminiApiKey] = useState("");
   const [isGeminiKeySet, setIsGeminiKeySet] = useState(false);
+  const [isGmailConnected, setIsGmailConnected] = useState(false);
 
   // Connection Status State
   const [connectionStatus, setConnectionStatus] = useState({ database: false, redis: false });
@@ -88,6 +93,7 @@ export default function SettingsPage() {
           setCustomVariables(vars);
         }
         setIsGeminiKeySet(settingsData.user.isGeminiKeySet);
+        setIsGmailConnected(settingsData.user.isGmailConnected);
         }
 
         // Fetch Connection Status
@@ -189,6 +195,25 @@ export default function SettingsPage() {
     }
   };
 
+  const handleDeleteData = async () => {
+    const result = await deleteDataFn("/api/settings/delete-data");
+
+    if (result !== null) {
+      toast({
+        title: "Data Deleted",
+        description: "All scraped businesses and jobs have been permanently deleted.",
+      });
+      setIsDeleteDataModalOpen(false);
+    } else {
+      toast({
+        title: "Error",
+        description: "Failed to delete data. Please try again.",
+        variant: "destructive",
+      });
+      setIsDeleteDataModalOpen(false);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -443,6 +468,23 @@ export default function SettingsPage() {
                 </Button>
               </div>
 
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-4 border border-destructive/20 rounded-lg bg-destructive/5">
+                <div className="space-y-1">
+                  <div className="font-medium text-destructive">Delete Scraped Data</div>
+                  <div className="text-sm text-muted-foreground">
+                    Permanently delete all scraped businesses and jobs
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  onClick={() => setIsDeleteDataModalOpen(true)}
+                  className="cursor-pointer border-destructive/50 text-destructive hover:bg-destructive/10"
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete Data
+                </Button>
+              </div>
+
               <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-4 border border-destructive/20 rounded-lg bg-destructive/5">
                 <div className="space-y-1">
                   <div className="font-medium text-destructive">Delete Account</div>
@@ -467,23 +509,15 @@ export default function SettingsPage() {
         <TabsContent value="api" className="space-y-4">
           <Card>
             <CardHeader>
-              <CardTitle>API Keys</CardTitle>
+              <CardTitle>API Keys & Integrations</CardTitle>
               <CardDescription>
-                Manage your API keys for integrations
+                Manage your connections and API keys.
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
-              {/* Google OAuth */}
+              {/* Mail Settings (Gmail) */}
               <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <Label>Google OAuth</Label>
-                    <p className="text-sm text-muted-foreground">
-                      Connected via OAuth 2.0
-                    </p>
-                  </div>
-                  <Badge variant="default">Active</Badge>
-                </div>
+                <MailSettings isConnected={isGmailConnected} email={session?.user?.email} />
               </div>
 
               {/* Database URL */}
@@ -499,7 +533,7 @@ export default function SettingsPage() {
                   )}
                 </div>
                 <p className="text-sm text-muted-foreground">
-                  Neon PostgreSQL database
+                  Database
                 </p>
               </div>
 
@@ -730,6 +764,41 @@ export default function SettingsPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={isDeleteDataModalOpen} onOpenChange={setIsDeleteDataModalOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete All Scraped Data</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete all scraped businesses and jobs? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteDataModalOpen(false)}
+              className="cursor-pointer"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteData}
+              disabled={deletingData}
+              className="cursor-pointer"
+            >
+              {deletingData ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete Data"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

app/dashboard/templates/page.tsx

@@ -6,7 +6,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { EmailTemplate, UserProfile } from "@/types";
-import { Plus, Trash2, Star, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Plus, Trash2, Star, Loader2, MoreVertical, Edit, Check, ArrowLeft } from "lucide-react";
 
 import { useTemplates } from "@/hooks/use-templates";
 import { useToast } from "@/hooks/use-toast";
@@ -23,8 +31,9 @@ export default function TemplatesPage() {
   const { get: getUser } = useApi<{ user: UserProfile }>();
   const { post: generateAiTemplate } = useApi<{ subject: string; body: string }>();
 
+  // ... (existing useEffect) ...
+
   useEffect(() => {
-    // Fetch user profile for variables
     const fetchProfile = async () => {
       const data = await getUser("/api/settings");
       if (data?.user) {
@@ -71,10 +80,28 @@ export default function TemplatesPage() {
     }
   };
 
+  const handleSetDefault = async (template: EmailTemplate, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const success = await saveTemplate({ id: template.id, isDefault: true });
+    if (success) {
+      toast({
+        title: "Success",
+        description: "Default template updated",
+      });
+    } else {
+      toast({
+        title: "Error",
+        description: "Failed to set default template",
+        variant: "destructive",
+      });
+    }
+  };
+
   const handleGenerateWithAI = async (prompt: string) => {
+    // ... (existing logic) ...
     setIsGenerating(true);
     const generated = await generateAiTemplate("/api/templates/generate", {
-      businessType: "businesses", // Generic fallback
+      businessType: "businesses",
       purpose: prompt
     });
 
@@ -101,7 +128,6 @@ export default function TemplatesPage() {
 
   return (
     <div className="space-y-6">
-      {/* Header */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold">Email Templates</h1>
@@ -117,6 +143,12 @@ export default function TemplatesPage() {
 
       {isCreating ? (
         <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setIsCreating(false)}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
+          </div>
           <EmailEditor
             template={selectedTemplate}
             onChange={setSelectedTemplate}
@@ -149,45 +181,55 @@ export default function TemplatesPage() {
       ) : (
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {templates.map((template) => (
-            <Card key={template.id} className="group cursor-pointer hover:shadow-lg transition-all">
+            <Card key={template.id} className="group hover:shadow-lg transition-all relative">
               <CardHeader>
                 <div className="flex items-start justify-between">
-                  <CardTitle className="line-clamp-1">{template.name}</CardTitle>
-                  {template.isDefault && (
-                    <Badge variant="default">
-                      <Star className="mr-1 h-3 w-3 fill-current" />
-                      Default
-                    </Badge>
-                  )}
+                  <div className="flex-1 mr-2">
+                    <CardTitle className="line-clamp-1">{template.name}</CardTitle>
+                    {template.isDefault && (
+                      <div className="mt-2">
+                        <Badge variant="default" className="bg-yellow-500/15 text-yellow-700 hover:bg-yellow-500/25 border-yellow-500/50 dark:text-yellow-400">
+                          <Star className="mr-1 h-3 w-3 fill-current" />
+                          Default
+                        </Badge>
+                      </div>
+                    )}
+                  </div>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={() => {
+                        setSelectedTemplate(template);
+                        setIsCreating(true);
+                      }}>
+                        <Edit className="mr-2 h-4 w-4" /> Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={(e) => handleSetDefault(template, e)} disabled={template.isDefault}>
+                        <Check className="mr-2 h-4 w-4" /> Set as Default
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={(e) => handleDelete(template.id, e)}
+                        className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/50"
+                      >
+                        <Trash2 className="mr-2 h-4 w-4" /> Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               </CardHeader>
               <CardContent>
                 <div
-                  className="text-sm text-muted-foreground line-clamp-3 mb-4 prose prose-sm dark:prose-invert max-h-18 overflow-hidden"
+                  className="text-sm text-muted-foreground line-clamp-3 mb-2 prose prose-sm dark:prose-invert max-h-18 overflow-hidden"
                   dangerouslySetInnerHTML={{ __html: template.body || template.subject || "No content" }}
                 />
-                <div className="flex gap-2 transition-all">
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => {
-                      setSelectedTemplate(template);
-                      setIsCreating(true);
-                    }}
-                    className="hover:scale-105 transition-transform"
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={(e) => handleDelete(template.id, e)}
-                    disabled={template.isDefault}
-                    className="hover:scale-105 transition-transform"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
               </CardContent>
             </Card>
           ))}

components/dashboard/business-table.tsx

@@ -12,6 +12,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Mail, ExternalLink, MoreHorizontal } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+
 
 interface BusinessTableProps {
   businesses: Business[];
@@ -66,11 +68,10 @@ export function BusinessTable({
         <TableRow>
           {onSelectionChange && (
             <TableHead className="w-[50px]">
-              <input
-                type="checkbox"
-                className="w-4 h-4 rounded border-gray-300"
+              <Checkbox
                 checked={businesses.length > 0 && selectedIds.length === businesses.length}
-                onChange={(e) => handleSelectAll(e.target.checked)}
+                onCheckedChange={(checked) => handleSelectAll(checked as boolean)}
+                aria-label="Select all"
               />
             </TableHead>
           )}
@@ -88,12 +89,12 @@ export function BusinessTable({
           <TableRow key={business.id}>
             {onSelectionChange && (
               <TableCell>
-                <input
-                  type="checkbox"
-                  className="w-4 h-4 rounded border-gray-300"
+                
+                <Checkbox
                   checked={selectedIds.includes(business.id)}
-                  onChange={(e) => handleSelectOne(business.id, e.target.checked)}
-                />
+                  onCheckedChange={(checked) => handleSelectOne(business.id, checked as boolean)}
+                  />
+                
               </TableCell>
             )}
             <TableCell className="font-medium">{business.name}</TableCell>

components/email/email-editor.tsx

@@ -1,7 +1,11 @@
+
 import { useMemo, useRef, useState } from "react";
 import { EmailTemplate, Business, UserProfile } from "@/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Sparkles, Loader2 } from "lucide-react";
@@ -204,6 +208,16 @@ export function EmailEditor({
                 onChange({ ...template, name: e.target.value })
               }
             />
+            <div className="flex items-center space-x-2 pt-2">
+              <div className="flex items-center space-x-2 pt-2">
+                <Checkbox
+                  id="isDefault"
+                  checked={template.isDefault || false}
+                  onCheckedChange={(checked) => onChange({ ...template, isDefault: checked as boolean })}
+                />
+                <Label htmlFor="isDefault">Set as Default Template</Label>
+              </div>
+            </div>
           </div>
 
           {/* Subject */}

components/mail/mail-settings.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Mail, CheckCircle2, AlertTriangle, RefreshCw } from "lucide-react";
+import { signIn } from "next-auth/react";
+
+interface MailSettingsProps {
+    isConnected: boolean;
+    email?: string | null;
+}
+
+export function MailSettings({ isConnected, email }: MailSettingsProps) {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleConnect = async () => {
+        setIsLoading(true);
+        try {
+            // Force re-authorization to get new tokens
+            await signIn("google", {
+                callbackUrl: "/dashboard/settings",
+                prompt: "consent"
+            });
+        } catch (error) {
+            console.error(error);
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Mail className="h-5 w-5" />
+                    Email Automation Settings
+                </CardTitle>
+                <CardDescription>
+                    Connect your Gmail account to enable automated email sending.
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="flex items-center justify-between p-4 border rounded-lg bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800">
+                    <div className="flex items-center gap-3">
+                        <div className={`p-2 rounded-full ${isConnected ? "bg-green-100 text-green-600" : "bg-amber-100 text-amber-600"}`}>
+                            {isConnected ? <CheckCircle2 className="h-5 w-5" /> : <AlertTriangle className="h-5 w-5" />}
+                        </div>
+                        <div>
+                            <h4 className="font-medium text-sm">
+                                {isConnected ? "Gmail Connected" : "Gmail Not Connected"}
+                            </h4>
+                            <p className="text-xs text-muted-foreground">
+                                {isConnected
+                                    ? `Sending emails as ${email || "your account"}`
+                                    : "Connect to allow the app to send emails on your behalf"}
+                            </p>
+                        </div>
+                    </div>
+                    <Button
+                        variant={isConnected ? "outline" : "default"}
+                        size="sm"
+                        onClick={handleConnect}
+                        disabled={isLoading}
+                    >
+                        {isLoading ? (
+                            <RefreshCw className="h-4 w-4 animate-spin mr-2" />
+                        ) : (
+                            <Mail className="h-4 w-4 mr-2" />
+                        )}
+                        {isConnected ? "Reconnect / Refresh" : "Connect Gmail"}
+                    </Button>
+                </div>
+
+                <div className="text-xs bg-blue-50 dark:bg-blue-900/20 p-3 rounded text-blue-800 dark:text-blue-300">
+                    <strong>Note:</strong> Loggin in with GitHub will keep these permissions active. You only need to reconnect if you see &quot;Invalid Credentials&quot; errors.
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

components/node-editor/node-config-dialog.tsx

@@ -1,8 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Play, Loader2 } from "lucide-react";
+import { Play, Loader2, Info, Plus, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -17,6 +23,7 @@ interface NodeConfigDialogProps {
     onOpenChange: (open: boolean) => void;
     node: Node<NodeData>;
     onSave: (config: NodeData["config"], label?: string) => void;
+    onDelete?: () => void;
 }
 
 interface EmailTemplate {
@@ -24,7 +31,84 @@ interface EmailTemplate {
     name: string;
 }
 
-export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfigDialogProps) {
+const ALL_VARIABLES = [
+    "business.name",
+    "business.email",
+    "business.website",
+    "business.phone",
+    "business.address",
+    "business.rating",
+    "business.reviewCount",
+    "variables.aiResult",
+    "variables.apiResponse",
+    "variables.scrapedData",
+    "variables.customVar"
+];
+
+const NODE_HELPERS = {
+    start: {
+        description: "The starting point of your workflow.",
+        variables: []
+    },
+    condition: {
+        description: "Checks a condition to decide which path to take (True/False).",
+        variables: ALL_VARIABLES
+    },
+    template: {
+        description: "Sends an automated email using a selected template.",
+        variables: ALL_VARIABLES
+    },
+    delay: {
+        description: "Pauses the workflow for a specified duration.",
+        variables: []
+    },
+    custom: {
+        description: "Executes custom JavaScript code for advanced logic.",
+        variables: ["business", "variables", "context"]
+    },
+    gemini: {
+        description: "Uses AI to generate text. Result saved to {variables.aiResult}.",
+        variables: ALL_VARIABLES
+    },
+    apiRequest: {
+        description: "Makes an HTTP request. Response saved to {variables.apiResponse}.",
+        variables: ALL_VARIABLES
+    },
+    webhook: {
+        description: "Triggers the workflow via an external HTTP call.",
+        variables: ["query", "body"]
+    },
+    schedule: {
+        description: "Runs the workflow repeatedly on a cron schedule.",
+        variables: []
+    },
+    scraper: {
+        description: "Processes scraped data. Result saved to {variables.scrapedData}.",
+        variables: ALL_VARIABLES
+    },
+    filter: {
+        description: "Filters items based on a condition; stops execution if false.",
+        variables: ["item", ...ALL_VARIABLES]
+    },
+    set: {
+        description: "Defines or updates variables in the workflow context.",
+        variables: []
+    },
+    merge: {
+        description: "Merges multiple execution branches back into one.",
+        variables: []
+    },
+    splitInBatches: {
+        description: "Iterates over a list of items (Loop).",
+        variables: ["items"]
+    },
+    agent: {
+        description: "AI Agent that processes Excel/CSV data. Result saved to {variables.aiResult}.",
+        variables: ["row", "context", ...ALL_VARIABLES]
+    }
+};
+
+export function NodeConfigDialog({ open, onOpenChange, node, onSave, onDelete }: NodeConfigDialogProps) {
     const [config, setConfig] = useState<NodeData["config"]>(node.data.config || {});
     const [label, setLabel] = useState(node.data.label);
     const [templates, setTemplates] = useState<EmailTemplate[]>([]);
@@ -35,6 +119,16 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
 
     const { get, loading: loadingTemplates } = useApi<{ templates: EmailTemplate[] }>();
 
+    // Reset state when node changes or dialog opens
+    useEffect(() => {
+        if (open) {
+            setConfig(node.data.config || {});
+            setLabel(node.data.label);
+            setTestInput(JSON.stringify(node.data.config || {}, null, 2));
+            setTestOutput("");
+        }
+    }, [open, node.id, node.data.config, node.data.label]);
+
     // Fetch templates when dialog opens and node is template type
     useEffect(() => {
         if (open && node.data.type === "template") {
@@ -59,7 +153,30 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
         onSave(config, label);
     };
 
+    const VariableInsert = ({ onInsert, variables }: { onInsert: (v: string) => void, variables: string[] }) => {
+        if (!variables || variables.length === 0) return null;
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-6 gap-1 text-xs ml-auto">
+                        <Plus className="h-3 w-3" /> Insert Variable
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    {variables.map((v) => (
+                        <DropdownMenuItem key={v} onClick={() => onInsert(`{${v}}`)}>
+                            {`{${v}}`}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    };
+
     const renderConfigForm = () => {
+        const nodeHelpers = NODE_HELPERS[node.data.type as keyof typeof NODE_HELPERS];
+        const variables = nodeHelpers?.variables || [];
+
         switch (node.data.type) {
             case "start":
                 return (
@@ -74,7 +191,13 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                 return (
                     <div className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="condition">Condition Expression</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="condition">Condition Expression</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, condition: (config?.condition || "") + v })}
+                                />
+                            </div>
                             <Input
                                 id="condition"
                                 placeholder="!website"
@@ -83,7 +206,6 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             />
                             <div className="text-xs text-muted-foreground">
                                 <p>Examples: !website (no website), email (has email), category == &quot;restaurant&quot;</p>
-                                <p className="mt-1 font-medium">Available variables: website, email, phone, rating, reviewCount</p>
                             </div>
                         </div>
                     </div>
@@ -146,7 +268,13 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                 return (
                     <div className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="customCode">Custom Function Code</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="customCode">Custom Function Code</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, customCode: (config?.customCode || "") + v })}
+                                />
+                            </div>
                             <Textarea
                                 id="customCode"
                                 placeholder="// JavaScript code here&#10;return true;"
@@ -157,7 +285,6 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             />
                             <div className="text-xs text-muted-foreground">
                                 <p>Write custom JavaScript code. Return true to continue, false to stop.</p>
-                                <p className="mt-1">Variables available: <code className="bg-muted px-1 rounded">company</code></p>
                             </div>
                         </div>
                     </div>
@@ -167,7 +294,13 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                 return (
                     <div className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="aiPrompt">AI Prompt</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="aiPrompt">AI Prompt</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, aiPrompt: (config?.aiPrompt || "") + v })}
+                                />
+                            </div>
                             <Textarea
                                 id="aiPrompt"
                                 placeholder="Generate a personalized email subject line for {name}"
@@ -177,7 +310,6 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             />
                             <div className="text-xs text-muted-foreground">
                                 <p>Enter a prompt for Gemini AI.</p>
-                                <p className="mt-1">Use variables: {"{name}, {category}, {notes}, {website}, {address}"}</p>
                             </div>
                         </div>
                     </div>
@@ -206,12 +338,18 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             </div>
                             <div className="col-span-3 space-y-2">
                                 <Label htmlFor="url">URL</Label>
-                                <Input
-                                    id="url"
-                                    placeholder="https://api.example.com/v1/resource"
-                                    value={config?.url || ""}
-                                    onChange={(e) => setConfig({ ...config, url: e.target.value })}
-                                />
+                                <div className="flex gap-2">
+                                    <Input
+                                        id="url"
+                                        placeholder="https://api.example.com/v1/resource"
+                                        value={config?.url || ""}
+                                        onChange={(e) => setConfig({ ...config, url: e.target.value })}
+                                    />
+                                    <VariableInsert
+                                        variables={variables}
+                                        onInsert={(v) => setConfig({ ...config, url: (config?.url || "") + v })}
+                                    />
+                                </div>
                             </div>
                         </div>
                         <div className="space-y-2">
@@ -227,7 +365,13 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                         </div>
                         {(config?.method === "POST" || config?.method === "PUT") && (
                             <div className="space-y-2">
-                                <Label htmlFor="body">Body (JSON)</Label>
+                                <div className="flex justify-between items-center">
+                                    <Label htmlFor="body">Body (JSON)</Label>
+                                    <VariableInsert
+                                        variables={variables}
+                                        onInsert={(v) => setConfig({ ...config, body: (config?.body || "") + v })}
+                                    />
+                                </div>
                                 <Textarea
                                     id="body"
                                     placeholder='{ "key": "value" }'
@@ -269,10 +413,18 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                         </div>
                     </div>
                 );
+
+            case "agent": // Fixed duplicated case structure
                 return (
                     <div className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="agentPrompt">Agent Instructions</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="agentPrompt">Agent Instructions</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, agentPrompt: (config?.agentPrompt || "") + v })}
+                                />
+                            </div>
                             <Textarea
                                 id="agentPrompt"
                                 placeholder="Analyze the rows in the excel sheet and extract..."
@@ -337,28 +489,18 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                         </div>
                     </div>
                 );
-            case "merge":
-                return (
-                    <div className="space-y-4">
-                        <p className="text-sm text-muted-foreground">
-                            Merges multiple input branches into a single output. No configuration needed usually.
-                        </p>
-                    </div>
-                );
-            case "splitInBatches":
-                return (
-                    <div className="space-y-4">
-                        <p className="text-sm text-muted-foreground">
-                            loops through an array of items from the previous node. The &apos;Done&apos; output triggers when finished.
-                        </p>
-                        {/* Could add batch size config here later */}
-                    </div>
-                );
+
             case "filter":
                 return (
                     <div className="space-y-4">
                         <div className="space-y-2">
-                            <Label htmlFor="filterCondition">Filter Condition</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="filterCondition">Filter Condition</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, filterCondition: (config?.filterCondition || "") + v })}
+                                />
+                            </div>
                             <Input
                                 id="filterCondition"
                                 placeholder="item.price > 100"
@@ -405,12 +547,13 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             <Label htmlFor="scraperAction">Scraper Action</Label>
                             <Select
                                 value={config?.scraperAction || "extract-emails"}
-                                onValueChange={(value) => setConfig({ ...config, scraperAction: value as "summarize" | "extract-emails" | "clean-html" | "markdown" })}
+                                onValueChange={(value) => setConfig({ ...config, scraperAction: value as "fetch-url" | "summarize" | "extract-emails" | "clean-html" | "markdown" })}
                             >
                                 <SelectTrigger>
                                     <SelectValue placeholder="Select Action" />
                                 </SelectTrigger>
                                 <SelectContent>
+                                    <SelectItem value="fetch-url">Fetch URL Content</SelectItem>
                                     <SelectItem value="extract-emails">Extract Emails</SelectItem>
                                     <SelectItem value="summarize">Summarize Content</SelectItem>
                                     <SelectItem value="clean-html">Clean HTML / Remove Tags</SelectItem>
@@ -419,15 +562,21 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                             </Select>
                         </div>
                         <div className="space-y-2">
-                            <Label htmlFor="scraperInputField">Input Variable</Label>
+                            <div className="flex justify-between items-center">
+                                <Label htmlFor="scraperInputField">Input Variable (or URL)</Label>
+                                <VariableInsert
+                                    variables={variables}
+                                    onInsert={(v) => setConfig({ ...config, scraperInputField: (config?.scraperInputField || "") + v })}
+                                />
+                            </div>
                             <Input
                                 id="scraperInputField"
-                                placeholder="{scrapedContent}"
+                                placeholder="{scrapedContent} or {business.website}"
                                 value={config?.scraperInputField || ""}
                                 onChange={(e) => setConfig({ ...config, scraperInputField: e.target.value })}
                             />
                             <p className="text-xs text-muted-foreground">
-                                The variable containing the raw text or HTML to process.
+                                The variable or URL to process. Use <code>{`{business.website}`}</code> for fetching.
                             </p>
                         </div>
                     </div>
@@ -467,20 +616,52 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                                 />
                             </div>
 
+                            {/* Helper Section */}
+                            <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-100 dark:border-blue-800">
+                                <h4 className="text-sm font-semibold flex items-center gap-2 mb-1">
+                                    <Info className="h-4 w-4 text-blue-500" />
+                                    How to use this node
+                                </h4>
+                                <p className="text-sm text-muted-foreground mb-2">
+                                    {NODE_HELPERS[node.data.type as keyof typeof NODE_HELPERS]?.description || "Configure this node's settings below."}
+                                </p>
+                                {NODE_HELPERS[node.data.type as keyof typeof NODE_HELPERS]?.variables?.length > 0 && (
+                                    <div className="text-xs">
+                                        <span className="font-medium text-blue-600 dark:text-blue-400">Available Variables:</span>
+                                        <div className="flex flex-wrap gap-1 mt-1">
+                                            {NODE_HELPERS[node.data.type as keyof typeof NODE_HELPERS]?.variables.map((v) => (
+                                                <code key={v} className="bg-background px-1.5 py-0.5 rounded border text-muted-foreground">
+                                                    {`{${v}}`}
+                                                </code>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+
                             {renderConfigForm()}
                         </TabsContent>
 
                         <TabsContent value="test" className="mt-0 space-y-4">
                             <div className="space-y-2">
-                                <Label>Test Input (JSON Context)</Label>
+                                <div className="flex justify-between items-center">
+                                    <Label>Test Input (JSON Context)</Label>
+                                    <VariableInsert
+                                        variables={NODE_HELPERS[node.data.type as keyof typeof NODE_HELPERS]?.variables || []}
+                                        onInsert={(v) => setTestInput((prev) => {
+                                            // Try to insert cleanly if possible, otherwise append
+                                            return prev + ` "${v}"`;
+                                        })}
+                                    />
+                                </div>
                                 <Textarea
                                     className="font-mono text-xs"
-                                    rows={5}
-                                    placeholder='{ "email": "test@example.com", "price": 150 }'
+                                    rows={8}
+                                    placeholder={'{\n  "business": {\n    "name": "Test Business",\n    "website": "example.com",\n    "email": "test@example.com"\n  },\n  "variables": {\n    "scrapedData": "<html>...</html>"\n  }\n}'}
                                     value={testInput}
                                     onChange={(e) => setTestInput(e.target.value)}
                                 />
-                                <p className="text-xs text-muted-foreground">Mock the variables available to this node.</p>
+                                <p className="text-xs text-muted-foreground">Mock the variables available to this node. Defines <code>business</code>, <code>variables</code> etc.</p>
                             </div>
 
                             <Button size="sm" onClick={async () => {
@@ -518,13 +699,21 @@ export function NodeConfigDialog({ open, onOpenChange, node, onSave }: NodeConfi
                     </ScrollArea>
                 </Tabs>
 
-                <DialogFooter className="mr-6 mb-4">
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSave}>
-                        Save Configuration
-                    </Button>
+                <DialogFooter className="mr-6 mb-4 flex justify-between sm:justify-between">
+                    {onDelete && (
+                        <Button variant="destructive" onClick={onDelete} className="mr-auto">
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete Node
+                        </Button>
+                    )}
+                    <div className="flex gap-2">
+                        <Button variant="outline" onClick={() => onOpenChange(false)}>
+                            Cancel
+                        </Button>
+                        <Button onClick={handleSave}>
+                            Save Configuration
+                        </Button>
+                    </div>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

components/node-editor/node-editor.tsx

@@ -14,11 +14,12 @@ import ReactFlow, {
   BackgroundVariant,
   NodeMouseHandler,
   SelectionMode,
+  ReactFlowInstance,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Plus, Save, Play, Copy, Trash2, Undo, Redo, FileText, Loader2, Download, Upload, HelpCircle, BookOpen, Hand, MousePointer2, Sparkles } from "lucide-react";
+import { Plus, Save, Play, Copy, Trash2, Undo, Redo, FileText, Loader2, Download, Upload, HelpCircle, BookOpen, Hand, MousePointer2, Sparkles, TerminalIcon, X } from "lucide-react";
 import { AiWorkflowDialog } from "./ai-workflow-dialog";
 import { ImportWorkflowDialog } from "./import-workflow-dialog";
 import { NodeConfigDialog } from "./node-config-dialog";
@@ -56,7 +57,7 @@ export interface NodeData {
     filterCondition?: string;
     setVariables?: Record<string, string>;
     // Scraper config
-    scraperAction?: "summarize" | "extract-emails" | "clean-html" | "markdown";
+    scraperAction?: "summarize" | "extract-emails" | "clean-html" | "markdown" | "fetch-url";
     scraperInputField?: string;
   };
   isConnected?: boolean;
@@ -114,10 +115,13 @@ export function NodeEditor({
   const [contextMenu, setContextMenu] = useState<{
     x: number;
     y: number;
-    nodeId: string;
+    nodeId?: string;
+    edgeId?: string;
   } | null>(null);
   const [isExecuting, setIsExecuting] = useState(false);
   const [copiedNodes, setCopiedNodes] = useState<Node<NodeData>[]>([]);
+  const [executionLogs, setExecutionLogs] = useState<string[]>([]);
+  const [showTerminal, setShowTerminal] = useState(false);
   const [canvasMode, setCanvasMode] = useState<'drag' | 'select'>('drag');
   const { toast } = useToast();
 
@@ -258,12 +262,14 @@ export function NodeEditor({
     [setEdges, saveToHistory]
   );
 
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+
   const addNode = useCallback(
     (type: NodeData["type"]) => {
       const nodeLabels = {
         start: "Start",
         condition: "Condition",
-        template: "Email Template",
+        template: "Send Email",
         delay: "Delay",
         custom: "Custom Function",
         gemini: "AI Task",
@@ -278,6 +284,21 @@ export function NodeEditor({
         scraper: "Scraper Action",
       };
 
+      // Calculate center position
+      let position = { x: 250, y: 250 };
+      if (rfInstance) {
+        const { x, y, zoom } = rfInstance.getViewport();
+        // Assuming a container width/height or using window as approximation if unknown, 
+        // but reactflow usually fills parent. 
+        // A safer bet is just center of the viewport - translation
+        // Viewport x/y is the transformation. 
+        // Center X in flow = (-viewportX + containerHalfWidth) / zoom
+        // We'll approximate container as 1000x800 if not easily accessible, or use window/2
+        const centerX = (-x + (window.innerWidth / 2)) / zoom;
+        const centerY = (-y + (window.innerHeight / 2)) / zoom;
+        position = { x: centerX - 100 + (Math.random() * 50), y: centerY - 50 + (Math.random() * 50) };
+      }
+
       const newNode: Node<NodeData> = {
         id: `${type}-${Date.now()}`,
         type: "workflowNode",
@@ -286,16 +307,13 @@ export function NodeEditor({
           type,
           config: {},
         },
-        position: {
-          x: Math.random() * 400 + 100,
-          y: Math.random() * 400 + 100,
-        },
+        position,
       };
 
       setNodes((nds) => [...nds, newNode]);
       saveToHistory();
     },
-    [setNodes, saveToHistory]
+    [setNodes, saveToHistory, rfInstance]
   );
 
   const onNodeClick = useCallback((event: React.MouseEvent, node: Node<NodeData>) => {
@@ -313,6 +331,18 @@ export function NodeEditor({
     });
   }, []);
 
+  const onEdgeContextMenu = useCallback(
+    (event: React.MouseEvent, edge: Edge) => {
+      event.preventDefault();
+      setContextMenu({
+        x: event.clientX,
+        y: event.clientY,
+        edgeId: edge.id,
+      });
+    },
+    []
+  );
+
   const onPaneContextMenu = useCallback((event: React.MouseEvent) => {
     event.preventDefault();
     setContextMenu({
@@ -322,12 +352,18 @@ export function NodeEditor({
     });
   }, []);
 
-  const handleDeleteNode = useCallback(() => {
+  const handleDeleteItem = useCallback(() => {
     if (!contextMenu) return;
-    setNodes((nds) => nds.filter((n) => n.id !== contextMenu.nodeId));
-    setEdges((eds) =>
-      eds.filter((e) => e.source !== contextMenu.nodeId && e.target !== contextMenu.nodeId)
-    );
+
+    if (contextMenu.nodeId) {
+      setNodes((nds) => nds.filter((n) => n.id !== contextMenu.nodeId));
+      setEdges((eds) =>
+        eds.filter((e) => e.source !== contextMenu.nodeId && e.target !== contextMenu.nodeId)
+      );
+    } else if (contextMenu.edgeId) {
+      setEdges((eds) => eds.filter((e) => e.id !== contextMenu.edgeId));
+    }
+
     setContextMenu(null);
     saveToHistory();
   }, [contextMenu, setNodes, setEdges, saveToHistory]);
@@ -411,19 +447,20 @@ export function NodeEditor({
 
       const data = await response.json();
 
+      setExecutionLogs(data.logs || []);
+      setShowTerminal(true);
+
       if (data.success) {
         toast({
           title: "Execution Completed",
-          description: `Processed ${data.totalProcessed} businesses.`,
+          description: `Processed ${data.totalProcessed} businesses. Check terminal for details.`,
         });
-        console.log("Execution Logs:", data.logs);
       } else {
         toast({
           title: "Execution Failed",
-          description: "Check console for logs.",
+          description: "Check terminal for logs.",
           variant: "destructive",
         });
-        console.error("Execution Logs:", data.logs);
       }
     } catch (error) {
       toast({
@@ -485,7 +522,19 @@ export function NodeEditor({
                   </TooltipTrigger>
                   <TooltipContent>Generate workflow with AI</TooltipContent>
                 </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      onClick={() => setShowTerminal(true)}
+                      size="icon"
+                      variant="ghost"
 
+                    >
+                      <TerminalIcon className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Terminal</TooltipContent>
+                </Tooltip>
                 <div className="w-px h-6 bg-border mx-1 self-center" />
 
                 <Tooltip>
@@ -698,11 +747,13 @@ export function NodeEditor({
           nodes={nodes}
           edges={edges}
 
+            onInit={setRfInstance}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           onNodeClick={onNodeClick}
           onNodeContextMenu={onNodeContextMenu}
+            onEdgeContextMenu={onEdgeContextMenu}
             onPaneContextMenu={onPaneContextMenu}
           nodeTypes={nodeTypes}
           fitView
@@ -751,13 +802,21 @@ export function NodeEditor({
                     Duplicate Node
                   </button>
                   <button
-                    onClick={handleDeleteNode}
+                    onClick={handleDeleteItem}
                     className="w-full px-4 py-2 text-left hover:bg-destructive/10 text-destructive flex items-center gap-2 text-sm"
                   >
                     <Trash2 className="h-4 w-4" />
                     Delete Node
                   </button>
                 </>
+              ) : contextMenu.edgeId ? (
+                <button
+                  onClick={handleDeleteItem}
+                  className="w-full px-4 py-2 text-left hover:bg-destructive/10 text-destructive flex items-center gap-2 text-sm"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  Delete Connection
+                </button>
               ) : (
                 <>
                   <button
@@ -787,6 +846,13 @@ export function NodeEditor({
               updateNodeConfig(selectedNode.id, config, label);
             setIsConfigOpen(false);
           }}
+            onDelete={() => {
+              setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id));
+              setEdges((eds) => eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id));
+              setSelectedNode(null);
+              setIsConfigOpen(false);
+              saveToHistory();
+            }}
         />
       )}
 
@@ -812,6 +878,64 @@ export function NodeEditor({
           onOpenChange={setIsAiDialogOpen}
           onGenerate={handleAiGenerate}
         />
+        {/* Terminal Panel */}
+        {showTerminal && (
+          <div className="fixed bottom-0 left-0 right-0 h-72 bg-slate-950 border-t border-slate-800 shadow-2xl flex flex-col z-200 animate-in slide-in-from-bottom duration-300">
+            <div className="flex items-center justify-between px-4 py-3 bg-slate-900 border-b border-slate-800">
+              <div className="flex items-center gap-3 text-slate-200">
+                <TerminalIcon className="h-5 w-5 text-indigo-400" />
+                <span className="text-sm font-mono font-bold tracking-tight">SYSTEM TERMINAL</span>
+                <span className="text-xs px-2 py-0.5 rounded-full bg-slate-800 text-slate-400 border border-slate-700">
+                  {executionLogs.length} Lines
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors"
+                  onClick={() => setExecutionLogs([])}
+                  title="Clear Logs"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 text-slate-400 hover:text-white hover:bg-slate-800 rounded-md transition-colors"
+                  onClick={() => setShowTerminal(false)}
+                  title="Close Terminal"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-auto p-4 font-mono text-xs md:text-sm text-slate-300 space-y-1.5 scrollbar-thin scrollbar-thumb-slate-700 scrollbar-track-transparent">
+              {executionLogs.length === 0 ? (
+                <div className="h-full flex flex-col items-center justify-center text-slate-600 gap-2">
+                  <TerminalIcon className="h-8 w-8 opacity-20" />
+                  <p>Waiting for execution...</p>
+                </div>
+              ) : (
+                executionLogs.map((log, i) => (
+                  <div key={i} className="flex gap-3 border-b border-slate-900/50 pb-1 last:border-0 font-medium">
+                    <span className="text-slate-600 select-none min-w-[24px] text-right">{(i + 1).toString().padStart(2, '0')}</span>
+                    <span className={
+                      log.toLowerCase().includes("error") ? "text-red-400 bg-red-950/20 px-1 rounded" :
+                        log.toLowerCase().includes("warning") ? "text-amber-400 bg-amber-950/20 px-1 rounded" :
+                          log.toLowerCase().includes("success") || log.toLowerCase().includes("completed") ? "text-emerald-400" :
+                            log.toLowerCase().includes("sending") || log.toLowerCase().includes("running") ? "text-blue-400" :
+                              log.toLowerCase().includes("response") ? "text-cyan-400" :
+                                "text-slate-300"
+                    }>
+                      {log}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
     </div>
     </TooltipProvider>
   );

components/node-editor/workflow-node.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { Handle, Position, NodeProps } from "reactflow";
 import { Settings } from "lucide-react";
 import { NodeData } from "./node-editor";
@@ -79,7 +79,30 @@ export const WorkflowNode = memo(({ data, selected }: NodeProps<NodeData>) => {
         </div>
       </div>
 
-      {true && (
+      {data.type === "condition" ? (
+        <div className="flex justify-between w-full mt-2 relative">
+          <div className="relative">
+            <Handle
+              type="source"
+              id="true"
+              position={Position.Bottom}
+              className="w-3 h-3 left-2"
+              style={{ background: "#22c55e" }}
+            />
+            <span className="text-[10px] text-green-600 absolute top-3 left-0 font-bold">True</span>
+          </div>
+          <div className="relative">
+            <Handle
+              type="source"
+              id="false"
+              position={Position.Bottom}
+              className="w-3 h-3 left-auto right-2"
+              style={{ background: "#ef4444" }}
+            />
+            <span className="text-[10px] text-red-600 absolute top-3 right-0 font-bold">False</span>
+          </div>
+        </div>
+      ) : (
         <Handle
           type="source"
           position={Position.Bottom}

components/node-editor/workflow-templates-dialog.tsx

@@ -14,6 +14,30 @@ interface WorkflowTemplate {
 }
 
 const WORKFLOW_TEMPLATES: WorkflowTemplate[] = [
+  {
+    id: "scraped-email-automation",
+    name: "Auto Email from Scraper",
+    description: "Process scraped data, cleaner info, check for website, and send specific email.",
+    nodes: [
+      { id: "1", type: "workflowNode", data: { label: "Start", type: "start", config: {} }, position: { x: 300, y: 50 }, },
+      { id: "cond", type: "workflowNode", data: { label: "Has Website?", type: "condition", config: { condition: "business.website" } }, position: { x: 300, y: 150 }, },
+      // Yes Path: Fetch -> Extract -> Send
+      { id: "fetch", type: "workflowNode", data: { label: "Fetch Website", type: "scraper", config: { scraperAction: "fetch-url", scraperInputField: "{business.website}" } }, position: { x: 100, y: 300 }, },
+      { id: "extract", type: "workflowNode", data: { label: "Extract Info", type: "scraper", config: { scraperAction: "extract-emails", scraperInputField: "{variables.scrapedData}" } }, position: { x: 100, y: 450 }, },
+      { id: "send-custom", type: "workflowNode", data: { label: "Send Personalized", type: "template", config: { templateId: "template-1" } }, position: { x: 100, y: 600 }, },
+      // No Path: Generic Send
+      { id: "send-generic", type: "workflowNode", data: { label: "Send Generic", type: "template", config: { templateId: "template-2" } }, position: { x: 500, y: 300 }, },
+    ],
+    edges: [
+      { id: "e1-cond", source: "1", target: "cond" },
+      // Yes branch
+      { id: "e-yes-1", source: "cond", target: "fetch", sourceHandle: "true", label: "Yes" },
+      { id: "e-yes-2", source: "fetch", target: "extract" },
+      { id: "e-yes-3", source: "extract", target: "send-custom" },
+      // No branch
+      { id: "e-no-1", source: "cond", target: "send-generic", sourceHandle: "false", label: "No" },
+    ],
+  },
   {
     id: "simple-follow-up",
     name: "Simple Follow-up",

components/notification-bell.tsx

@@ -1,15 +1,22 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { Bell } from "lucide-react";
+import { Bell, X, AlertCircle, CheckCircle2, AlertTriangle, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
-import { useNotificationStore } from "@/store/notifications";
+import { useNotificationStore, type Notification } from "@/store/notifications";
 
 
 
@@ -19,10 +26,12 @@ export function NotificationBell() {
     unreadCount,
     markAsRead,
     markAllAsRead,
-    clearAll
+    clearAll,
+    removeNotification
   } = useNotificationStore();
 
   const [animate, setAnimate] = useState(false);
+  const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null);
   const prevCount = useRef(unreadCount);
 
   useEffect(() => {
@@ -39,94 +48,154 @@ export function NotificationBell() {
   }, [unreadCount]);
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="relative hover:scale-110"
-        >
-          <Bell className={cn(
-            "h-5 w-5",
-            animate && "animate-bounce"
-          )} />
-          {unreadCount > 0 && (
-            <span className={cn(
-              "absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center text-xs font-bold text-white bg-red-500 rounded-full",
-              animate && "animate-ping"
-            )}>
-              {unreadCount > 9 ? "9+" : unreadCount}
-            </span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-80 p-0" align="end">
-        <div className="flex items-center justify-between p-4 border-b">
-          <h3 className="font-semibold">Notifications</h3>
-          {notifications.length > 0 && (
-            <div className="flex gap-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={markAllAsRead}
-                className="text-xs"
-              >
-                Mark all read
+    <>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="relative hover:scale-110"
+          >
+            <Bell className={cn(
+              "h-5 w-5",
+              animate && "animate-bounce"
+            )} />
+            {unreadCount > 0 && (
+              <span className={cn(
+                "absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center text-xs font-bold text-white bg-red-500 rounded-full",
+                animate && "animate-ping"
+              )}>
+                {unreadCount > 9 ? "9+" : unreadCount}
+              </span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 p-0" align="end">
+          <div className="flex items-center justify-between p-4 border-b">
+            <h3 className="font-semibold">Notifications</h3>
+            {notifications.length > 0 && (
+              <div className="flex gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={markAllAsRead}
+                  className="text-xs"
+                >
+                  Mark all read
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearAll}
+                  className="text-xs text-destructive"
+                >
+                  Clear all
+                </Button>
+              </div>
+            )}
+          </div>
+          <div className="max-h-[400px] overflow-y-auto">
+            {notifications.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                <Bell className="h-12 w-12 mx-auto mb-2 opacity-20" />
+                <p className="text-sm">No notifications yet</p>
+              </div>
+            ) : (
+              <div className="divide-y relative">
+                  {notifications.map((notification) => (
+                    <div
+                      key={notification.id}
+                      className={cn(
+                        "p-4 hover:bg-accent cursor-pointer transition-colors relative group",
+                        !notification.read && "bg-blue-50 dark:bg-blue-950/20"
+                      )}
+                      onClick={() => {
+                        markAsRead(notification.id);
+                        setSelectedNotification(notification);
+                      }}
+                    >
+                      <div className="flex items-start gap-3">
+                        <div className={cn(
+                          "h-2 w-2 rounded-full mt-2 shrink-0",
+                          notification.type === "success" && "bg-green-500",
+                          notification.type === "error" && "bg-red-500",
+                          notification.type === "warning" && "bg-yellow-500",
+                          notification.type === "info" && "bg-blue-500"
+                        )} />
+                        <div className="flex-1 space-y-1">
+                          <p className="text-sm font-medium line-clamp-1">{notification.title}</p>
+                          <p className="text-xs text-muted-foreground line-clamp-2">{notification.message}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatTimestamp(notification.timestamp)}
+                          </p>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity absolute top-2 right-2"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            removeNotification(notification.id);
+                          }}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Dialog open={!!selectedNotification} onOpenChange={(open) => !open && setSelectedNotification(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {selectedNotification?.type === 'error' && <AlertCircle className="text-red-500 h-5 w-5" />}
+              {selectedNotification?.type === 'success' && <CheckCircle2 className="text-green-500 h-5 w-5" />}
+              {selectedNotification?.type === 'warning' && <AlertTriangle className="text-yellow-500 h-5 w-5" />}
+              {selectedNotification?.type === 'info' && <Info className="text-blue-500 h-5 w-5" />}
+              {selectedNotification?.title}
+            </DialogTitle>
+            <DialogDescription>
+              {formatTimestamp(selectedNotification?.timestamp || new Date())}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="text-sm text-foreground whitespace-pre-wrap">
+              {selectedNotification?.message}
+            </div>
+
+            {selectedNotification?.link && (
+              <Button asChild className="w-full">
+                <a href={selectedNotification.link}>
+                  {selectedNotification.actionLabel || "View Details"}
+                </a>
+              </Button>
+            )}
+
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setSelectedNotification(null)}>
+                Close
               </Button>
               <Button
-                variant="ghost"
-                size="sm"
-                onClick={clearAll}
-                className="text-xs text-destructive"
+                variant="destructive"
+                onClick={() => {
+                  if (selectedNotification) {
+                    removeNotification(selectedNotification.id);
+                    setSelectedNotification(null);
+                  }
+                }}
               >
-                Clear all
+                Delete Notification
               </Button>
             </div>
-          )}
-        </div>
-        <div className="max-h-[400px] overflow-y-auto">
-          {notifications.length === 0 ? (
-            <div className="p-8 text-center text-muted-foreground">
-              <Bell className="h-12 w-12 mx-auto mb-2 opacity-20" />
-              <p className="text-sm">No notifications yet</p>
-            </div>
-          ) : (
-              <div className="divide-y relative">
-              {notifications.map((notification) => (
-                <div
-                  key={notification.id}
-                  className={cn(
-                    "p-4 hover:bg-accent cursor-pointer transition-colors relative",
-                    !notification.read && "bg-blue-50 dark:bg-blue-950/20"
-                  )}
-                  onClick={() => {
-                    markAsRead(notification.id);
-                    if (notification.link) window.location.href = notification.link;
-                  }}
-                >
-                  <div className="flex items-start gap-3">
-                    <div className={cn(
-                      "h-2 w-2 rounded-full mt-2 shrink-0",
-                      notification.type === "success" && "bg-green-500",
-                      notification.type === "error" && "bg-red-500",
-                      notification.type === "warning" && "bg-yellow-500",
-                      notification.type === "info" && "bg-blue-500"
-                    )} />
-                    <div className="flex-1 space-y-1">
-                      <p className="text-sm font-medium">{notification.title}</p>
-                      <p className="text-xs text-muted-foreground">{notification.message}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {formatTimestamp(notification.timestamp)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
 

components/ui/alert-dialog.tsx

@@ -13,7 +13,7 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 const AlertDialogPortal = AlertDialogPrimitive.Portal
 
 const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
@@ -28,7 +28,7 @@ const AlertDialogOverlay = React.forwardRef<
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
 const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+    React.ComponentRef<typeof CheckboxPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+            "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            className
+        )}
+        {...props}
+    >
+        <CheckboxPrimitive.Indicator
+            className={cn("flex items-center justify-center text-current")}
+        >
+            <Check className="h-4 w-4" />
+        </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

components/ui/select.tsx

@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
@@ -116,7 +116,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

hooks/use-api.ts

@@ -1,8 +1,12 @@
 'use client'
 import { useState, useCallback } from "react";
+import { useNotification } from "@/hooks/use-notification";
 
 interface ApiOptions extends RequestInit {
   headers?: Record<string, string>;
+  throwOnError?: boolean;
+  skipNotification?: boolean;
+  successMessage?: string;
 }
 
 interface ApiResponse<T> {
@@ -26,6 +30,7 @@ export function useApi<T = unknown>(): ApiResponse<T> {
   const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
+  const { notify } = useNotification();
 
   const request = useCallback(
     async <R = T>(
@@ -75,11 +80,45 @@ export function useApi<T = unknown>(): ApiResponse<T> {
           // For now, let's keep setData best-effort if R extends T, usually users rely on return value for one-offs
           // safely ignore setData type mismatch or cast to any
           setData(result as unknown as T);
+
+          // Success Notification for mutations
+          if (!options?.skipNotification && (method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE")) {
+            const title = "Success";
+            let message = "Operation completed successfully";
+
+            if (options?.successMessage) {
+              message = options.successMessage;
+            } else {
+              if (method === "POST") message = "Created successfully";
+              if (method === "PUT" || method === "PATCH") message = "Updated successfully";
+              if (method === "DELETE") message = "Deleted successfully";
+            }
+
+            notify(title, message, "success");
+          }
+
           return result as R;
         } catch {
             // If strictly typed as T, this might be an issue if T isn't void/null compliant
             // but for generic generic use usage, returning null on empty body is often handled
             setData(null);
+
+          // Success Notification for empty body mutations (like 204 No Content)
+          if (!options?.skipNotification && (method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE")) {
+            const title = "Success";
+            let message = "Operation completed successfully";
+
+            if (options?.successMessage) {
+              message = options.successMessage;
+            } else {
+              if (method === "POST") message = "Created successfully";
+              if (method === "PUT" || method === "PATCH") message = "Updated successfully";
+              if (method === "DELETE") message = "Deleted successfully";
+            }
+
+            notify(title, message, "success");
+          }
+
             return null;
         }
 
@@ -89,12 +128,16 @@ export function useApi<T = unknown>(): ApiResponse<T> {
           message = err.message;
         }
         setError(message);
+        notify("Error", message, "error");
+        if (options?.throwOnError) {
+          throw err;
+        }
         return null;
       } finally {
         setLoading(false);
       }
     },
-    []
+    [notify]
   );
 
   const get = useCallback(<R = T>(url: string, options?: ApiOptions) => request<R>(url, "GET", undefined, options), [request]);

hooks/use-notification.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import { useCallback } from "react";
+import { sendNotification } from "@/components/notification-bell";
+
+export function useNotification() {
+    const notify = useCallback(async (
+        title: string,
+        message: string = "",
+        type: "info" | "success" | "warning" | "error" = "info",
+        options?: {
+            autoClose?: boolean;
+            duration?: number;
+            link?: string;
+            actionLabel?: string;
+            persist?: boolean; // If true (default), save to DB
+        }
+    ) => {
+        // 1. Show immediately in UI using the helper
+        sendNotification({
+            title,
+            message,
+            type,
+            ...options
+        });
+
+        // 2. Persist to DB (default to true unless explicitly false)
+        if (options?.persist !== false) {
+            try {
+                await fetch("/api/notifications", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        title,
+                        message,
+                        type,
+                    }),
+                });
+            } catch (error) {
+                console.error("Failed to persist notification:", error);
+            }
+        }
+    }, []);
+
+    return { notify };
+}

lib/auth.ts

@@ -88,16 +88,22 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
         });
 
         if (existingUser) {
-          // Update tokens
-          await db
-            .update(users)
-            .set({
-              accessToken: account?.access_token,
-              refreshToken: account?.refresh_token,
+          // Update user details
+          const updateData: Record<string, unknown> = {
               name: user.name,
               image: user.image,
               updatedAt: new Date(),
-            })
+          };
+
+          // Only update tokens if logging in with Google (to preserve Gmail permissions)
+          if (account?.provider === "google") {
+            updateData.accessToken = account.access_token;
+            updateData.refreshToken = account.refresh_token;
+          }
+
+          await db
+            .update(users)
+            .set(updateData)
             .where(eq(users.id, existingUser.id));
         } else {
           // Create new user
@@ -105,8 +111,9 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
             email: user.email,
             name: user.name,
             image: user.image,
-            accessToken: account?.access_token,
-            refreshToken: account?.refresh_token,
+            // If first login is GitHub, these will be null/undefined, which is correct
+            accessToken: account?.provider === "google" ? account?.access_token : null,
+            refreshToken: account?.provider === "google" ? account?.refresh_token : null,
           });
         }
 
@@ -126,8 +133,6 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
             where: eq(users.email, session.user.email),
           });
 
-            console.log("👤 DB User found:", dbUser ? dbUser.id : "null");
-
             if (dbUser) {
               // Use Database Truth (which is synced from Google on login)
               session.user.id = dbUser.id;

lib/email.ts

@@ -6,13 +6,24 @@ interface SendEmailOptions {
   subject: string;
   body: string;
   accessToken: string;
+  refreshToken?: string;
 }
 
-export async function sendEmail(options: SendEmailOptions): Promise<boolean> {
-  const { to, subject, body, accessToken } = options;
+export async function sendEmail(options: SendEmailOptions): Promise<{ success: boolean; error?: string }> {
+  const { to, subject, body, accessToken, refreshToken } = options;
 
   try {
-    const gmail = google.gmail({ version: "v1" });
+    const oauth2Client = new google.auth.OAuth2(
+      process.env.GOOGLE_CLIENT_ID,
+      process.env.GOOGLE_CLIENT_SECRET
+    );
+
+    oauth2Client.setCredentials({
+      access_token: accessToken,
+      refresh_token: refreshToken,
+    });
+
+    const gmail = google.gmail({ version: "v1", auth: oauth2Client });
 
     // Create email message
     const message = [
@@ -36,51 +47,87 @@ export async function sendEmail(options: SendEmailOptions): Promise<boolean> {
       requestBody: {
         raw: encodedMessage,
       },
-      auth: new google.auth.OAuth2({
-        credentials: {
-          access_token: accessToken,
-        },
-      }),
     });
 
-    return true;
+    return { success: true };
   } catch (error) {
     console.error("Error sending email:", error);
-    return false;
+    const errorMessage = error instanceof Error ? error.message : "Unknown error";
+    return { success: false, error: errorMessage };
   }
 }
 
 export function interpolateTemplate(
   template: string,
-  business: Business
+  business: Business,
+  sender?: {
+    name?: string | null;
+    email?: string | null;
+    phone?: string | null;
+    company?: string | null;
+    website?: string | null;
+    jobTitle?: string | null;
+    customVariables?: Record<string, string | number | boolean | null> | null;
+  }
 ): string {
-  return template
+  let result = template
     .replace(/\{brand_name\}/g, business.name)
     .replace(/\{email\}/g, business.email || "")
     .replace(/\{phone\}/g, business.phone || "")
     .replace(/\{website\}/g, business.website || "")
     .replace(/\{address\}/g, business.address || "")
     .replace(/\{category\}/g, business.category);
+
+  if (sender) {
+    result = result
+      .replace(/\{sender_name\}/g, sender.name || "")
+      .replace(/\{sender_email\}/g, sender.email || "")
+      .replace(/\{sender_phone\}/g, sender.phone || "")
+      .replace(/\{sender_company\}/g, sender.company || "")
+      .replace(/\{sender_website\}/g, sender.website || "")
+      .replace(/\{sender_job_title\}/g, sender.jobTitle || "");
+
+    // Custom Sender Variables
+    if (sender.customVariables) {
+      Object.entries(sender.customVariables).forEach(([key, value]) => {
+        const regex = new RegExp(`\\{${key}\\}`, "g");
+        result = result.replace(regex, typeof value === 'string' ? value : String(value));
+      });
+    }
+  }
+
+  return result;
 }
 
 export async function sendColdEmail(
   business: Business,
   template: EmailTemplate,
-  accessToken: string
-): Promise<boolean> {
+  accessToken: string,
+  sender?: {
+    name?: string | null;
+    email?: string | null;
+    phone?: string | null;
+    company?: string | null;
+    website?: string | null;
+    jobTitle?: string | null;
+    customVariables?: Record<string, string | number | boolean | null> | null;
+    refreshToken?: string | null;
+  }
+): Promise<{ success: boolean; error?: string }> {
   if (!business.email) {
     console.log(`No email for business ${business.name}`);
-    return false;
+    return { success: false, error: "No email address" };
   }
 
-  const subject = interpolateTemplate(template.subject, business);
-  const body = interpolateTemplate(template.body, business);
+  const subject = interpolateTemplate(template.subject, business, sender);
+  const body = interpolateTemplate(template.body, business, sender);
 
   return await sendEmail({
     to: business.email,
     subject,
     body,
     accessToken,
+    refreshToken: sender?.refreshToken || undefined,
   });
 }
 
@@ -132,7 +179,6 @@ export class EmailService {
       });
 
       if (pendingBusinesses.length === 0) {
-        console.log("No pending emails");
         return;
       }
 
@@ -151,7 +197,7 @@ export class EmailService {
 
       // Send emails
       for (const business of pendingBusinesses) {
-        const success = await sendColdEmail(
+        const { success, error } = await sendColdEmail(
           business,
           defaultTemplate,
           accessToken
@@ -177,6 +223,7 @@ export class EmailService {
           subject: interpolateTemplate(defaultTemplate.subject, business),
           body: interpolateTemplate(defaultTemplate.body, business),
           status: success ? "sent" : "failed",
+          errorMessage: error,
           sentAt: success ? new Date() : null,
         });
 

lib/queue.ts

@@ -3,9 +3,9 @@
 import { Queue, Worker, Job } from "bullmq";
 import Redis from "ioredis";
 import { db } from "@/db";
-import { emailLogs, businesses, emailTemplates } from "@/db/schema";
-import { eq } from "drizzle-orm";
-import { sendColdEmail } from "./email";
+import { emailLogs, businesses, emailTemplates, users } from "@/db/schema";
+import { eq, sql, and, gte, lt } from "drizzle-orm";
+import { interpolateTemplate, sendColdEmail } from "./email";
 import type { ScraperSourceName } from "./scrapers/types";
 
 // Redis connection
@@ -94,25 +94,81 @@ export const emailWorker = new Worker(
       if (!template) {
         throw new Error("Template not found");
       }
+      // Check daily limit (50 emails/day)
+      const startOfDay = new Date();
+      startOfDay.setHours(0, 0, 0, 0);
+
+      const endOfDay = new Date();
+      endOfDay.setHours(23, 59, 59, 999);
+
+      const [usage] = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(emailLogs)
+        .where(
+          and(
+            eq(emailLogs.userId, userId),
+            eq(emailLogs.status, "sent"),
+            gte(emailLogs.sentAt, startOfDay),
+            lt(emailLogs.sentAt, endOfDay)
+          )
+        );
+
+      if (usage && usage.count >= 50) {
+        // Calculate time until next day
+        const now = new Date();
+        const tomorrow = new Date(now);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        tomorrow.setHours(0, 0, 0, 0);
+        const delay = tomorrow.getTime() - now.getTime() + 60000; // 1 min buffer
+
+        console.log(`⚠️ Daily email limit reached (${usage.count}/50). Delaying job ${job.id} by ${Math.round(delay / 1000 / 60)} minutes.`);
+
+        await job.moveToDelayed(Date.now() + delay, job.token);
+        return { delayed: true, reason: "Daily limit reached" };
+      }
 
+      const sender = await db.query.users.findFirst({
+        where: eq(users.id, userId),
+      });
+
+      if (!sender) throw new Error("Sender not found");
+
+      // Send emails
       // Send email
-      await sendColdEmail(
+      const { success, error } = await sendColdEmail(
         business,
         template,
-        accessToken
+        accessToken,
+        sender
       );
 
-      // Log success
+      // Update business
+      await db
+        .update(businesses)
+        .set({
+          emailSent: true,
+          emailSentAt: new Date(),
+          emailStatus: success ? "sent" : "failed",
+          updatedAt: new Date(),
+        })
+        .where(eq(businesses.id, business.id));
+
+      // Log email
       await db.insert(emailLogs).values({
         userId,
-        businessId,
-        templateId,
-        subject: "Cold Outreach",
-        body: "Email sent via workflow",
-        status: "sent",
-        sentAt: new Date(),
+        businessId: business.id,
+        templateId: template.id,
+        subject: interpolateTemplate(template.subject, business, sender),
+        body: interpolateTemplate(template.body, business, sender),
+        status: success ? "sent" : "failed",
+        errorMessage: error,
+        sentAt: success ? new Date() : null,
       });
 
+      if (!success) {
+        throw new Error(error || "Failed to send email");
+      }
+
       return { success: true, businessId };
     } catch (error: any) {
       // Log failure

lib/workflow-executor.ts

@@ -55,11 +55,22 @@ export class WorkflowExecutor {
       case "condition":
         const conditionResult = this.evaluateCondition(node.data.config?.condition || "");
         logs.push(`Condition "${node.data.config?.condition}" evaluated to: ${conditionResult}`);
-        if (!conditionResult) {
-          logs.push("Condition failed, stopping branch");
+
+        const handleToFollow = conditionResult ? "true" : "false";
+        const relevantEdges = this.edges.filter(e => e.source === node.id && e.sourceHandle === handleToFollow);
+
+        if (relevantEdges.length === 0) {
+          logs.push(`No path found for result ${conditionResult} (handle: ${handleToFollow})`);
           return;
         }
-        break;
+
+        for (const edge of relevantEdges) {
+          const nextNode = this.nodes.find(n => n.id === edge.target);
+          if (nextNode) {
+            await this.executeNode(nextNode, logs);
+          }
+        }
+        return; // Stop default flow, we handled it explicitly
 
       case "template":
         const templateId = node.data.config?.templateId;
@@ -101,6 +112,10 @@ export class WorkflowExecutor {
       case "apiRequest":
         await this.executeApiRequest(node.data.config, logs);
         break;
+
+      case "scraper":
+        await this.executeScraperTask(node.data.config, logs);
+        break;
     }
 
     // Find and execute next nodes
@@ -110,19 +125,72 @@ export class WorkflowExecutor {
     }
   }
 
+  private resolveValue(path: string): unknown {
+    // Strip curly braces if present
+    const cleanPath = path.replace(/^\{|\}$/g, "");
+
+    // Check for explicit "business." prefix
+    if (cleanPath.startsWith("business.")) {
+      const field = cleanPath.split(".")[1];
+      return this.context.businessData[field];
+    }
+
+    // Check for "variables." prefix (custom workflow variables)
+    if (cleanPath.startsWith("variables.") || cleanPath.startsWith("variable.")) {
+      const field = cleanPath.split(".")[1];
+      return this.context.variables[field];
+    }
+
+    // Fallback: Check business data first, then variables
+    if (cleanPath in this.context.businessData) {
+      return this.context.businessData[cleanPath];
+    }
+
+    return this.context.variables[cleanPath];
+  }
+
+  // Helper to replace all {variables} in a string
+  private interpolateString(text: string): string {
+    if (!text) return "";
+    return text.replace(/\{([^}]+)\}/g, (match, path) => {
+      const value = this.resolveValue(path);
+      return value !== undefined && value !== null ? String(value) : "";
+    });
+  }
+
   private evaluateCondition(condition: string): boolean {
+    if (!condition) return false;
+
     try {
+      // 1. Handle Negation "!"
       if (condition.startsWith("!")) {
-        const field = condition.slice(1);
-        const value = this.context.businessData[field];
+        const path = condition.slice(1).trim();
+        const value = this.resolveValue(path);
         return !value || value === "";
       }
+
+      // 2. Handle Equality "=="
       if (condition.includes("==")) {
-        const [field, expectedValue] = condition.split("==").map(s => s.trim().replace(/"/g, ""));
-        return String(this.context.businessData[field]) === expectedValue;
+        const [left, right] = condition.split("==").map(s => s.trim());
+        const leftValue = String(this.resolveValue(left));
+        // Handle quoted string on the right side
+        const rightValue = right.replace(/^["']|["']$/g, "");
+        return leftValue === rightValue;
+      }
+
+      // 3. Handle Inequality "!="
+      if (condition.includes("!=")) {
+        const [left, right] = condition.split("!=").map(s => s.trim());
+        const leftValue = String(this.resolveValue(left));
+        const rightValue = right.replace(/^["']|["']$/g, "");
+        return leftValue !== rightValue;
       }
-      const value = this.context.businessData[condition];
+
+      // 4. Handle truthiness (just the variable name)
+      const value = this.resolveValue(condition);
+      console.log(`[Condition Debug] checking truthiness of "${condition}", resolved value:`, value);
       return !!value && value !== "";
+
     } catch (error) {
       console.error("Condition evaluation error:", error);
       return false;
@@ -207,13 +275,12 @@ export class WorkflowExecutor {
   }
 
   private async executeAITask(prompt: string, contextData: string | undefined, logs: string[]): Promise<void> {
-    let processedPrompt = prompt;
-    for (const [key, value] of Object.entries(this.context.businessData)) {
-      processedPrompt = processedPrompt.replace(`{${key}}`, String(value || ""));
-    }
+    // Interpolate the prompt with all available variables
+    let processedPrompt = this.interpolateString(prompt);
 
     if (contextData) {
-      processedPrompt += `\n\nContext Data:\n${contextData}`;
+      // Also interpolate context data if needed, or just append
+      processedPrompt += `\n\nContext Data:\n${this.interpolateString(contextData)}`;
     }
 
     // Try to get API key from user in DB (assuming stored in env or user record)
@@ -241,18 +308,42 @@ export class WorkflowExecutor {
   private async executeApiRequest(config: NodeData["config"], logs: string[]): Promise<void> {
     if (!config?.url) return;
 
-    logs.push(`Making ${config.method} request to ${config.url}`);
+    // Interpolate URL, Headers, and Body
+    const url = this.interpolateString(config.url);
+    const method = config.method || "GET";
+
+    logs.push(`Making ${method} request to ${url}`);
+
     try {
-      const headers = config.headers ? JSON.parse(config.headers) : {};
-      const body = config.body ? config.body : undefined;
+      let headers = {};
+      if (config.headers) {
+        const interpolatedHeaders = this.interpolateString(config.headers);
+        try {
+          headers = JSON.parse(interpolatedHeaders);
+        } catch {
+          logs.push("Warning: Failed to parse headers JSON");
+        }
+      }
+
+      let body = undefined;
+      if (config.body && method !== "GET") {
+        const interpolatedBody = this.interpolateString(config.body);
+        // Try to parse if proper JSON, otherwise send as string possibly? 
+        // Usually API expects JSON object for body if content-type is json
+        try {
+          body = JSON.parse(interpolatedBody);
+        } catch {
+          body = interpolatedBody;
+        }
+      }
 
-      const response = await fetch(config.url, {
-        method: config.method || "GET",
+      const response = await fetch(url, {
+        method,
         headers: {
           ...headers,
           "Content-Type": "application/json"
         },
-        body: config.method !== "GET" ? body : undefined
+        body: body ? JSON.stringify(body) : undefined
       });
 
       const text = await response.text();
@@ -263,6 +354,61 @@ export class WorkflowExecutor {
     }
   }
 
+  private async executeScraperTask(config: NodeData["config"], logs: string[]): Promise<void> {
+    const action = config?.scraperAction || "extract-emails";
+    const inputVar = config?.scraperInputField || "";
+
+    // Resolve input content
+    const content = this.resolveValue(inputVar); // Can be a string or object
+    const textContent = content === undefined || content === null ? "" : (typeof content === "string" ? content : JSON.stringify(content));
+
+    logs.push(`Running Scraper Action: ${action}`);
+    logs.push(`> Input Content Length: ${textContent.length} chars (Source: ${inputVar || "Direct Input"})`);
+
+    if (!textContent) {
+      logs.push("> Warning: Input content is empty. Skipping extraction.");
+      this.context.variables.scrapedData = null;
+      return;
+    }
+
+    let result: unknown = null;
+
+    if (action === "fetch-url") {
+      let url = textContent.trim();
+      if (!url.startsWith("http")) url = "https://" + url;
+
+      try {
+        logs.push(`> Fetching URL: ${url}`);
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`Status ${response.status}`);
+        const html = await response.text();
+        result = html;
+        logs.push(`> Success: Fetched ${html.length} chars from URL`);
+      } catch (e) {
+        logs.push(`> Error: Failed to fetch URL: ${e}`);
+        result = null;
+      }
+    } else if (action === "extract-emails") {
+      const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
+      const matches = textContent.match(emailRegex);
+      const emails = matches ? [...new Set(matches)] : [];
+      result = emails;
+      logs.push(`> Success: Extracted ${emails.length} unique emails: ${emails.slice(0, 3).join(", ")}${emails.length > 3 ? "..." : ""}`);
+    } else if (action === "clean-html") {
+      result = textContent.replace(/<[^>]*>/g, "");
+      logs.push(`> Success: Cleaned HTML tags. New length: ${String(result).length}`);
+    } else if (action === "markdown") {
+      // Simple mock markdown conversion
+      result = textContent.replace(/<[^>]*>/g, "").replace(/\n\s*\n/g, "\n\n");
+      logs.push(`> Success: Converted to Markdown. New length: ${String(result).length}`);
+    } else if (action === "summarize") {
+      result = textContent.substring(0, 200) + "...";
+      logs.push(`> Success: Summarized content (Truncated to 200 chars)`);
+    }
+
+    this.context.variables.scrapedData = result;
+  }
+
   private getNextNodes(nodeId: string): Node<NodeData>[] {
     const outgoingEdges = this.edges.filter(e => e.source === nodeId);
     return outgoingEdges

package.json

@@ -29,6 +29,7 @@
     "@paralleldrive/cuid2": "^3.0.6",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.11
         version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -1168,6 +1171,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -5118,6 +5134,22 @@ snapshots:
       '@types/react': 19.2.8
       '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)

store/notifications.ts

@@ -66,9 +66,15 @@ export const useNotificationStore = create<NotificationStore>((set) => ({
   },
 
   removeNotification: (id) =>
-    set((state) => ({
-      notifications: state.notifications.filter((n) => n.id !== id),
-    })),
+    set((state) => {
+      const notification = state.notifications.find((n) => n.id === id);
+      if (!notification) return state; // No change if not found
+
+      return {
+        notifications: state.notifications.filter((n) => n.id !== id),
+        unreadCount: notification.read ? state.unreadCount : Math.max(0, state.unreadCount - 1),
+      };
+    }),
 
   markAsRead: (id) =>
     set((state) => ({