feat ability to redeploy

web/app/api/redeploy/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from "next/server";
+import { db, vercelTokens } from "@/drizzle/schema";
+import { Vercel } from "@vercel/sdk";
+import { auth } from "@clerk/nextjs/server";
+import { eq } from "drizzle-orm";
+
+export async function POST() {
+  try {
+    const { userId } = auth();
+    if (!userId) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const tokenRecord = await db
+      .select()
+      .from(vercelTokens)
+      .where(eq(vercelTokens.userId, userId))
+      .limit(1);
+
+    if (!tokenRecord[0] || !tokenRecord[0].projectId) {
+      return new NextResponse("No deployment found", { status: 404 });
+    }
+
+    const vercel = new Vercel({
+      bearerToken: tokenRecord[0].token,
+    });
+    const repo = "file-organizer-2000";
+    const org = "different-ai";
+    const ref = "master";
+
+    const deployment = await vercel.deployments.createDeployment({
+      requestBody: {
+        name: `file-organizer-redeploy-${Date.now()}`,
+        target: "production",
+        project: tokenRecord[0].projectId,
+        gitSource: {
+          type: "github",
+          repo: repo,
+          ref: ref,
+          org: org,
+        },
+        projectSettings: {
+          framework: "nextjs",
+          buildCommand: "pnpm build:self-host",
+          installCommand: "pnpm install",
+          outputDirectory: ".next",
+          rootDirectory: "web",
+        },
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      deploymentUrl: deployment.url,
+    });
+  } catch (error) {
+    console.error("Error in redeploy:", error);
+    return NextResponse.json(
+      { error: "Failed to redeploy" },
+      { status: 500 }
+    );
+  }
+} 

web/app/dashboard/lifetime/automated-setup.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useState } from "react";
-import { setupProject } from "./action";
+import { useState, useEffect } from "react";
+import { setupProject, getVercelDeployment } from "./action";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -15,7 +15,8 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { CheckCircle2, ChevronRight, ExternalLink, Clock } from "lucide-react";
+import { CheckCircle2, ChevronRight, ExternalLink, Clock, Loader2, RefreshCw, AlertCircle } from "lucide-react";
+import { toast, Toaster } from "react-hot-toast";
 
 const formSchema = z.object({
   vercelToken: z.string().min(1, "Vercel token is required").trim(),
@@ -38,6 +39,13 @@ export function AutomatedSetup() {
     projectUrl: null,
     licenseKey: null as string | null,
   });
+  const [existingDeployment, setExistingDeployment] = useState<{
+    deploymentUrl: string;
+    projectId: string;
+    projectUrl: string;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRedeploying, setIsRedeploying] = useState(false);
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
@@ -47,6 +55,172 @@ export function AutomatedSetup() {
     },
   });
 
+  useEffect(() => {
+    checkExistingDeployment();
+  }, []);
+
+  const checkExistingDeployment = async () => {
+    try {
+      const deployment = await getVercelDeployment();
+      setExistingDeployment(deployment);
+    } catch (error) {
+      console.error("Failed to fetch deployment:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRedeploy = async () => {
+    if (!existingDeployment?.projectId) return;
+
+    setIsRedeploying(true);
+    try {
+      const response = await fetch("/api/redeploy", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to trigger redeployment");
+      }
+
+      toast.custom((t) => (
+        <div className="bg-background border border-border rounded-lg p-4 shadow-lg">
+          <h3 className="font-medium mb-1">Redeployment triggered</h3>
+          <p className="text-sm text-muted-foreground">
+            Your instance is being updated. This may take a few minutes.
+          </p>
+        </div>
+      ), { duration: 5000 });
+    } catch (error) {
+      console.error("Redeployment failed:", error);
+      toast.custom((t) => (
+        <div className="bg-destructive/5 border-destructive/20 border rounded-lg p-4 shadow-lg">
+          <h3 className="font-medium text-destructive mb-1">Redeployment failed</h3>
+          <p className="text-sm text-destructive/80">
+            Please try again later or contact support.
+          </p>
+        </div>
+      ), { duration: 5000 });
+    } finally {
+      setIsRedeploying(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (existingDeployment) {
+    return (
+      <div className="space-y-6">
+        <Card className="border-none bg-gradient-to-b from-background to-muted/50 rounded-md p-4">
+          <CardHeader className="p-4">
+            <CardTitle className="flex items-center gap-2">
+              Deployment Status
+              <div className="flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+              </div>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6 p-4">
+            {/* Project URL */}
+            <div className="space-y-2">
+              <h3 className="text-sm font-medium text-muted-foreground">Project URL</h3>
+              <div className="flex items-center gap-2">
+                <code className="px-2 py-1 bg-muted rounded text-sm break-all">
+                  {existingDeployment.projectUrl}
+                </code>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    window.open(existingDeployment.projectUrl, '_blank');
+                  }}
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="space-y-2">
+              <h3 className="text-sm font-medium text-muted-foreground">Actions</h3>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={handleRedeploy}
+                  disabled={isRedeploying}
+                  className="gap-2"
+                >
+                  {isRedeploying ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCw className="h-4 w-4" />
+                  )}
+                  {isRedeploying ? "Redeploying..." : "Redeploy Instance"}
+                </Button>
+              </div>
+            </div>
+
+            {/* Status Information */}
+            <div className="rounded-lg bg-muted/50 p-4 space-y-4">
+              <div className="flex items-start gap-3 text-muted-foreground">
+                <AlertCircle className="h-5 w-5 flex-shrink-0 mt-0.5" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">Automatic Updates</p>
+                  <p className="text-sm">
+                    Your instance is automatically updated daily at midnight UTC. You can also
+                    manually trigger an update using the redeploy button above.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Plugin Setup Reminder */}
+        <Card className="rounded-md p-4">
+          <CardHeader className="p-4">
+            <CardTitle>Plugin Setup</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4">
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                Make sure your Obsidian plugin is configured with these settings:
+              </p>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Self-Hosting URL</span>
+                  <code className="px-2 py-1 bg-muted rounded text-xs">
+                    {existingDeployment.projectUrl}
+                  </code>
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                asChild
+                className="w-full"
+              >
+                <a href="obsidian://show-plugin?id=fileorganizer2000">
+                  Open Plugin Settings
+                </a>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   const handleDeploy = async (values: FormValues) => {
     setDeploymentStatus({
       isDeploying: true,
@@ -238,11 +412,11 @@ export function AutomatedSetup() {
       content: (
         <div className="space-y-6">
           {deploymentStatus.deploymentUrl && (
-            <Card className="border bg-muted/50 p-4">
-              <CardHeader>
+            <Card className="border bg-muted/50 p-4 rounded-md">
+              <CardHeader className="p-4">
                 <CardTitle className="text-lg">Deployment Status</CardTitle>
               </CardHeader>
-              <CardContent className="space-y-4">
+              <CardContent className="space-y-4 p-4">
                 <div className="flex flex-col gap-2">
                   <p className="text-sm text-muted-foreground">
                     1. Click the link below to check your deployment status:
@@ -268,11 +442,11 @@ export function AutomatedSetup() {
           )}
 
           {deploymentStatus.licenseKey && (
-            <Card className="border bg-muted/50 p-4">
-              <CardHeader>
+            <Card className="border bg-muted/50 p-4 rounded-md">
+              <CardHeader className="p-4">
                 <CardTitle className="text-lg">Your License Key</CardTitle>
               </CardHeader>
-              <CardContent>
+              <CardContent className="p-4">
                 <div className="flex items-center gap-2">
                   <code className="px-2 py-1 bg-muted rounded text-sm break-all">
                     {deploymentStatus.licenseKey}
@@ -339,16 +513,17 @@ export function AutomatedSetup() {
 
   return (
     <div className="mx-auto">
-      <Card className="border-none bg-gradient-to-b from-background to-muted/50 shadow-md p-8 rounded-md">
-        <CardHeader className="pb-8 text-center">
+      <Toaster position="top-right" />
+      <Card className="border-none bg-gradient-to-b from-background to-muted/50 shadow-md p-4 rounded-md">
+        <CardHeader className="pb-8 text-center p-4">
           <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary/90 to-primary bg-clip-text text-transparent">
             Self-Hosting Setup
           </CardTitle>
           <p className="text-muted-foreground mt-2">
             Follow these steps to set up your own instance
           </p>
         </CardHeader>
-        <CardContent>
+        <CardContent className="p-4">
           <div className="space-y-12">
             {steps.map((step, index) => (
               <div key={step.number} className="relative">

web/app/dashboard/lifetime/components/plugin-setup.tsx

@@ -0,0 +1,34 @@
+export function PluginSetup({ projectUrl }) {
+  return (
+    <Card className="rounded-md p-4">
+      <CardHeader className="p-4">
+        <CardTitle>Plugin Setup</CardTitle>
+      </CardHeader>
+      <CardContent className="p-4">
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Make sure your Obsidian plugin is configured with these settings:
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Self-Hosting URL</span>
+              <code className="px-2 py-1 bg-muted rounded text-xs">
+                {projectUrl}
+              </code>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="w-full"
+          >
+            <a href="obsidian://show-plugin?id=fileorganizer2000">
+              Open Plugin Settings
+            </a>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 

web/package.json

@@ -61,6 +61,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.54.0",
+    "react-hot-toast": "^2.4.1",
     "stripe": "^16.12.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",