Create Publish panel to easy GitHub and Vercel push (#655)

2025-07-17 15:54:08 -07:00
parent cb60a0562b
commit 444397ea86
26 changed files with 2113 additions and 28 deletions
--- a/src/app/TitleBar.tsx
+++ b/src/app/TitleBar.tsx
@@ -131,7 +131,7 @@ function WindowsControls() {
  return (
    <div className="ml-auto flex no-app-region-drag">
      <button
-        className="w-12 h-11 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+        className="w-10 h-10 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
        onClick={minimizeWindow}
        aria-label="Minimize"
      >
@@ -150,7 +150,7 @@ function WindowsControls() {
        </svg>
      </button>
      <button
-        className="w-12 h-11 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+        className="w-10 h-10 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
        onClick={maximizeWindow}
        aria-label="Maximize"
      >
@@ -171,7 +171,7 @@ function WindowsControls() {
        </svg>
      </button>
      <button
-        className="w-12 h-11 flex items-center justify-center hover:bg-red-500 transition-colors"
+        className="w-10 h-10 flex items-center justify-center hover:bg-red-500 transition-colors"
        onClick={closeWindow}
        aria-label="Close"
      >
--- a/src/atoms/appAtoms.ts
+++ b/src/atoms/appAtoms.ts
@@ -8,7 +8,7 @@ export const appsListAtom = atom<App[]>([]);
 export const appBasePathAtom = atom<string>("");
 export const versionsListAtom = atom<Version[]>([]);
 export const previewModeAtom = atom<
-  "preview" | "code" | "problems" | "configure"
+  "preview" | "code" | "problems" | "configure" | "publish"
 >("preview");
 export const selectedVersionIdAtom = atom<string | null>(null);
 export const appOutputAtom = atom<AppOutput[]>([]);
--- a/src/components/GitHubConnector.tsx
+++ b/src/components/GitHubConnector.tsx
@@ -5,7 +5,6 @@ import {
  Clipboard,
  Check,
  AlertTriangle,
-  ChevronDown,
  ChevronRight,
 } from "lucide-react";
 import { IpcClient } from "@/ipc/ipc_client";
@@ -32,6 +31,7 @@ import { Label } from "@/components/ui/label";
 interface GitHubConnectorProps {
  appId: number | null;
  folderName: string;
+  expanded?: boolean;
 }

 interface GitHubRepo {
@@ -57,6 +57,7 @@ interface UnconnectedGitHubConnectorProps {
  settings: any;
  refreshSettings: () => void;
  refreshApp: () => void;
+  expanded?: boolean;
 }

 function ConnectedGitHubConnector({
@@ -112,10 +113,7 @@ function ConnectedGitHubConnector({
  };

  return (
-    <div
-      className="mt-4 w-full border border-gray-200 rounded-md p-4"
-      data-testid="github-connected-repo"
-    >
+    <div className="w-full" data-testid="github-connected-repo">
      <p>Connected to GitHub Repo:</p>
      <a
        onClick={(e) => {
@@ -271,9 +269,10 @@ function UnconnectedGitHubConnector({
  settings,
  refreshSettings,
  refreshApp,
+  expanded,
 }: UnconnectedGitHubConnectorProps) {
  // --- Collapsible State ---
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(expanded || false);

  // --- GitHub Device Flow State ---
  const [githubUserCode, setGithubUserCode] = useState<string | null>(null);
@@ -636,22 +635,19 @@ function UnconnectedGitHubConnector({
  }

  return (
-    <div
-      className="mt-4 w-full border border-gray-200 rounded-md"
-      data-testid="github-setup-repo"
-    >
+    <div className="w-full" data-testid="github-setup-repo">
      {/* Collapsible Header */}
      <button
        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className={`cursor-pointer w-full p-4 text-left transition-colors rounded-md flex items-center justify-between ${
-          !isExpanded ? "hover:bg-gray-50 dark:hover:bg-gray-800/50" : ""
+        onClick={!isExpanded ? () => setIsExpanded(true) : undefined}
+        className={`w-full p-4 text-left transition-colors rounded-md flex items-center justify-between ${
+          !isExpanded
+            ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+            : ""
        }`}
      >
        <span className="font-medium">Set up your GitHub repo</span>
-        {isExpanded ? (
-          <ChevronDown className="h-4 w-4 text-gray-500" />
-        ) : (
+        {isExpanded ? undefined : (
          <ChevronRight className="h-4 w-4 text-gray-500" />
        )}
      </button>
@@ -879,7 +875,11 @@ function UnconnectedGitHubConnector({
  );
 }

-export function GitHubConnector({ appId, folderName }: GitHubConnectorProps) {
+export function GitHubConnector({
+  appId,
+  folderName,
+  expanded,
+}: GitHubConnectorProps) {
  const { app, refreshApp } = useLoadApp(appId);
  const { settings, refreshSettings } = useSettings();

@@ -899,6 +899,7 @@ export function GitHubConnector({ appId, folderName }: GitHubConnectorProps) {
        settings={settings}
        refreshSettings={refreshSettings}
        refreshApp={refreshApp}
+        expanded={expanded}
      />
    );
  }
--- a/src/components/VercelConnector.tsx
+++ b/src/components/VercelConnector.tsx
@@ -0,0 +1,680 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Globe } from "lucide-react";
+import { IpcClient } from "@/ipc/ipc_client";
+import { useSettings } from "@/hooks/useSettings";
+import { useLoadApp } from "@/hooks/useLoadApp";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { App, VercelDeployment } from "@/ipc/ipc_types";
+
+interface VercelConnectorProps {
+  appId: number | null;
+  folderName: string;
+}
+
+interface VercelProject {
+  id: string;
+  name: string;
+  framework: string | null;
+}
+
+interface ConnectedVercelConnectorProps {
+  appId: number;
+  app: App;
+  refreshApp: () => void;
+}
+
+interface UnconnectedVercelConnectorProps {
+  appId: number | null;
+  folderName: string;
+  settings: any;
+  refreshSettings: () => void;
+  refreshApp: () => void;
+}
+
+function ConnectedVercelConnector({
+  appId,
+  app,
+  refreshApp,
+}: ConnectedVercelConnectorProps) {
+  const [isLoadingDeployments, setIsLoadingDeployments] = useState(false);
+  const [deploymentsError, setDeploymentsError] = useState<string | null>(null);
+  const [deployments, setDeployments] = useState<VercelDeployment[]>([]);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const [disconnectError, setDisconnectError] = useState<string | null>(null);
+
+  const handleDisconnectProject = async () => {
+    setIsDisconnecting(true);
+    setDisconnectError(null);
+    try {
+      await IpcClient.getInstance().disconnectVercelProject({ appId });
+      refreshApp();
+    } catch (err: any) {
+      setDisconnectError(err.message || "Failed to disconnect project.");
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  const handleGetDeployments = async () => {
+    setIsLoadingDeployments(true);
+    setDeploymentsError(null);
+
+    try {
+      const result = await IpcClient.getInstance().getVercelDeployments({
+        appId,
+      });
+      setDeployments(result);
+    } catch (err: any) {
+      setDeploymentsError(
+        err.message || "Failed to get deployments from Vercel.",
+      );
+    } finally {
+      setIsLoadingDeployments(false);
+    }
+  };
+
+  return (
+    <div
+      className="mt-4 w-full rounded-md"
+      data-testid="vercel-connected-project"
+    >
+      <p className="text-sm text-gray-600 dark:text-gray-300">
+        Connected to Vercel Project:
+      </p>
+      <a
+        onClick={(e) => {
+          e.preventDefault();
+          IpcClient.getInstance().openExternalUrl(
+            `https://vercel.com/${app.vercelTeamSlug}/${app.vercelProjectName}`,
+          );
+        }}
+        className="cursor-pointer text-blue-600 hover:underline dark:text-blue-400"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {app.vercelProjectName}
+      </a>
+      {app.vercelDeploymentUrl && (
+        <div className="mt-2">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Live URL:{" "}
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                if (app.vercelDeploymentUrl) {
+                  IpcClient.getInstance().openExternalUrl(
+                    app.vercelDeploymentUrl,
+                  );
+                }
+              }}
+              className="cursor-pointer text-blue-600 hover:underline dark:text-blue-400 font-mono"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {app.vercelDeploymentUrl}
+            </a>
+          </p>
+        </div>
+      )}
+      <div className="mt-2 flex gap-2">
+        <Button onClick={handleGetDeployments} disabled={isLoadingDeployments}>
+          {isLoadingDeployments ? (
+            <>
+              <svg
+                className="animate-spin h-5 w-5 mr-2 inline"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                style={{ display: "inline" }}
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              Getting Deployments...
+            </>
+          ) : (
+            "Get Deployments"
+          )}
+        </Button>
+        <Button
+          onClick={handleDisconnectProject}
+          disabled={isDisconnecting}
+          variant="outline"
+        >
+          {isDisconnecting ? "Disconnecting..." : "Disconnect from project"}
+        </Button>
+      </div>
+      {deploymentsError && (
+        <div className="mt-2">
+          <p className="text-red-600">{deploymentsError}</p>
+        </div>
+      )}
+      {deployments.length > 0 && (
+        <div className="mt-4">
+          <h4 className="font-medium mb-2">Recent Deployments:</h4>
+          <div className="space-y-2">
+            {deployments.map((deployment) => (
+              <div
+                key={deployment.uid}
+                className="bg-gray-50 dark:bg-gray-800 rounded-md p-3"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                        deployment.readyState === "READY"
+                          ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300"
+                          : deployment.readyState === "BUILDING"
+                            ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300"
+                            : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+                      }`}
+                    >
+                      {deployment.readyState}
+                    </span>
+                    <span className="text-sm text-gray-600 dark:text-gray-300">
+                      {new Date(deployment.createdAt * 1000).toLocaleString()}
+                    </span>
+                  </div>
+                  <a
+                    onClick={(e) => {
+                      e.preventDefault();
+                      IpcClient.getInstance().openExternalUrl(
+                        `https://${deployment.url}`,
+                      );
+                    }}
+                    className="cursor-pointer text-blue-600 hover:underline dark:text-blue-400 text-sm"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Globe className="h-4 w-4 inline mr-1" />
+                    View
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {disconnectError && (
+        <p className="text-red-600 mt-2">{disconnectError}</p>
+      )}
+    </div>
+  );
+}
+
+function UnconnectedVercelConnector({
+  appId,
+  folderName,
+  settings,
+  refreshSettings,
+  refreshApp,
+}: UnconnectedVercelConnectorProps) {
+  // --- Manual Token Entry State ---
+  const [accessToken, setAccessToken] = useState("");
+  const [isSavingToken, setIsSavingToken] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+  const [tokenSuccess, setTokenSuccess] = useState(false);
+
+  // --- Project Setup State ---
+  const [projectSetupMode, setProjectSetupMode] = useState<
+    "create" | "existing"
+  >("create");
+  const [availableProjects, setAvailableProjects] = useState<VercelProject[]>(
+    [],
+  );
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<string>("");
+
+  // Create new project state
+  const [projectName, setProjectName] = useState(folderName);
+  const [projectAvailable, setProjectAvailable] = useState<boolean | null>(
+    null,
+  );
+  const [projectCheckError, setProjectCheckError] = useState<string | null>(
+    null,
+  );
+  const [isCheckingProject, setIsCheckingProject] = useState(false);
+  const [isCreatingProject, setIsCreatingProject] = useState(false);
+  const [createProjectError, setCreateProjectError] = useState<string | null>(
+    null,
+  );
+  const [createProjectSuccess, setCreateProjectSuccess] =
+    useState<boolean>(false);
+
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Load available projects when Vercel is connected
+  useEffect(() => {
+    if (settings?.vercelAccessToken && projectSetupMode === "existing") {
+      loadAvailableProjects();
+    }
+  }, [settings?.vercelAccessToken, projectSetupMode]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const loadAvailableProjects = async () => {
+    setIsLoadingProjects(true);
+    try {
+      const projects = await IpcClient.getInstance().listVercelProjects();
+      setAvailableProjects(projects);
+    } catch (error) {
+      console.error("Failed to load Vercel projects:", error);
+    } finally {
+      setIsLoadingProjects(false);
+    }
+  };
+
+  const handleSaveAccessToken = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!accessToken.trim()) return;
+
+    setIsSavingToken(true);
+    setTokenError(null);
+    setTokenSuccess(false);
+
+    try {
+      await IpcClient.getInstance().saveVercelAccessToken({
+        token: accessToken.trim(),
+      });
+      setTokenSuccess(true);
+      setAccessToken("");
+      refreshSettings();
+    } catch (err: any) {
+      setTokenError(err.message || "Failed to save access token.");
+    } finally {
+      setIsSavingToken(false);
+    }
+  };
+
+  const checkProjectAvailability = useCallback(async (name: string) => {
+    setProjectCheckError(null);
+    setProjectAvailable(null);
+    if (!name) return;
+    setIsCheckingProject(true);
+    try {
+      const result = await IpcClient.getInstance().isVercelProjectAvailable({
+        name,
+      });
+      setProjectAvailable(result.available);
+      if (!result.available) {
+        setProjectCheckError(result.error || "Project name is not available.");
+      }
+    } catch (err: any) {
+      setProjectCheckError(
+        err.message || "Failed to check project availability.",
+      );
+    } finally {
+      setIsCheckingProject(false);
+    }
+  }, []);
+
+  const debouncedCheckProjectAvailability = useCallback(
+    (name: string) => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = setTimeout(() => {
+        checkProjectAvailability(name);
+      }, 500);
+    },
+    [checkProjectAvailability],
+  );
+
+  const handleSetupProject = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!appId) return;
+
+    setCreateProjectError(null);
+    setIsCreatingProject(true);
+    setCreateProjectSuccess(false);
+
+    try {
+      if (projectSetupMode === "create") {
+        await IpcClient.getInstance().createVercelProject({
+          name: projectName,
+          appId,
+        });
+      } else {
+        await IpcClient.getInstance().connectToExistingVercelProject({
+          projectId: selectedProject,
+          appId,
+        });
+      }
+      setCreateProjectSuccess(true);
+      setProjectCheckError(null);
+      refreshApp();
+    } catch (err: any) {
+      setCreateProjectError(
+        err.message ||
+          `Failed to ${projectSetupMode === "create" ? "create" : "connect to"} project.`,
+      );
+    } finally {
+      setIsCreatingProject(false);
+    }
+  };
+
+  if (!settings?.vercelAccessToken) {
+    return (
+      <div className="mt-1 w-full" data-testid="vercel-unconnected-project">
+        <div className="w-ful">
+          <div className="flex items-center gap-2 mb-4">
+            <h3 className="font-medium">Connect to Vercel</h3>
+          </div>
+
+          <div className="space-y-4">
+            <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-3">
+              <p className="text-sm text-blue-800 dark:text-blue-200 mb-2">
+                To connect your app to Vercel, you'll need to create an access
+                token:
+              </p>
+              <ol className="list-decimal list-inside text-sm text-blue-700 dark:text-blue-300 space-y-1">
+                <li>If you don't have a Vercel account, sign up first</li>
+                <li>Go to Vercel settings to create a token</li>
+                <li>Copy the token and paste it below</li>
+              </ol>
+
+              <div className="flex gap-2 mt-3">
+                <Button
+                  onClick={() => {
+                    IpcClient.getInstance().openExternalUrl(
+                      "https://vercel.com/signup",
+                    );
+                  }}
+                  variant="outline"
+                  className="flex-1"
+                >
+                  Sign Up for Vercel
+                </Button>
+                <Button
+                  onClick={() => {
+                    IpcClient.getInstance().openExternalUrl(
+                      "https://vercel.com/account/settings/tokens",
+                    );
+                  }}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  Open Vercel Settings
+                </Button>
+              </div>
+            </div>
+
+            <form onSubmit={handleSaveAccessToken} className="space-y-3">
+              <div>
+                <Label className="block text-sm font-medium mb-1">
+                  Vercel Access Token
+                </Label>
+                <Input
+                  type="password"
+                  placeholder="Enter your Vercel access token"
+                  value={accessToken}
+                  onChange={(e) => setAccessToken(e.target.value)}
+                  disabled={isSavingToken}
+                  className="w-full"
+                />
+              </div>
+
+              <Button
+                type="submit"
+                disabled={!accessToken.trim() || isSavingToken}
+                className="w-full"
+              >
+                {isSavingToken ? (
+                  <>
+                    <svg
+                      className="animate-spin h-4 w-4 mr-2"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    Saving Token...
+                  </>
+                ) : (
+                  "Save Access Token"
+                )}
+              </Button>
+            </form>
+
+            {tokenError && (
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-3">
+                <p className="text-sm text-red-800 dark:text-red-200">
+                  {tokenError}
+                </p>
+              </div>
+            )}
+
+            {tokenSuccess && (
+              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md p-3">
+                <p className="text-sm text-green-800 dark:text-green-200">
+                  Successfully connected to Vercel! You can now set up your
+                  project below.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-4 w-full rounded-md" data-testid="vercel-setup-project">
+      {/* Collapsible Header */}
+      <div className="font-medium mb-2">Set up your Vercel project</div>
+
+      {/* Collapsible Content */}
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out`}
+      >
+        <div className="pt-0 space-y-4">
+          {/* Mode Selection */}
+          <div>
+            <div className="flex rounded-md border border-gray-200 dark:border-gray-700">
+              <Button
+                type="button"
+                variant={projectSetupMode === "create" ? "default" : "ghost"}
+                className={`flex-1 rounded-none rounded-l-md border-0 ${
+                  projectSetupMode === "create"
+                    ? "bg-primary text-primary-foreground"
+                    : "hover:bg-gray-50 dark:hover:bg-gray-800"
+                }`}
+                onClick={() => {
+                  setProjectSetupMode("create");
+                  setCreateProjectError(null);
+                  setCreateProjectSuccess(false);
+                }}
+              >
+                Create new project
+              </Button>
+              <Button
+                type="button"
+                variant={projectSetupMode === "existing" ? "default" : "ghost"}
+                className={`flex-1 rounded-none rounded-r-md border-0 border-l border-gray-200 dark:border-gray-700 ${
+                  projectSetupMode === "existing"
+                    ? "bg-primary text-primary-foreground"
+                    : "hover:bg-gray-50 dark:hover:bg-gray-800"
+                }`}
+                onClick={() => {
+                  setProjectSetupMode("existing");
+                  setCreateProjectError(null);
+                  setCreateProjectSuccess(false);
+                }}
+              >
+                Connect to existing project
+              </Button>
+            </div>
+          </div>
+
+          <form className="space-y-4" onSubmit={handleSetupProject}>
+            {projectSetupMode === "create" ? (
+              <>
+                <div>
+                  <Label className="block text-sm font-medium">
+                    Project Name
+                  </Label>
+                  <Input
+                    data-testid="vercel-create-project-name-input"
+                    className="w-full mt-1"
+                    value={projectName}
+                    onChange={(e) => {
+                      const newValue = e.target.value;
+                      setProjectName(newValue);
+                      setProjectAvailable(null);
+                      setProjectCheckError(null);
+                      debouncedCheckProjectAvailability(newValue);
+                    }}
+                    disabled={isCreatingProject}
+                  />
+                  {isCheckingProject && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      Checking availability...
+                    </p>
+                  )}
+                  {projectAvailable === true && (
+                    <p className="text-xs text-green-600 mt-1">
+                      Project name is available!
+                    </p>
+                  )}
+                  {projectAvailable === false && (
+                    <p className="text-xs text-red-600 mt-1">
+                      {projectCheckError}
+                    </p>
+                  )}
+                </div>
+              </>
+            ) : (
+              <>
+                <div>
+                  <Label className="block text-sm font-medium">
+                    Select Project
+                  </Label>
+                  <Select
+                    value={selectedProject}
+                    onValueChange={setSelectedProject}
+                    disabled={isLoadingProjects}
+                  >
+                    <SelectTrigger
+                      className="w-full mt-1"
+                      data-testid="vercel-project-select"
+                    >
+                      <SelectValue
+                        placeholder={
+                          isLoadingProjects
+                            ? "Loading projects..."
+                            : "Select a project"
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableProjects.map((project) => (
+                        <SelectItem key={project.id} value={project.id}>
+                          {project.name}{" "}
+                          {project.framework && `(${project.framework})`}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </>
+            )}
+
+            <Button
+              type="submit"
+              disabled={
+                isCreatingProject ||
+                (projectSetupMode === "create" &&
+                  (projectAvailable === false || !projectName)) ||
+                (projectSetupMode === "existing" && !selectedProject)
+              }
+            >
+              {isCreatingProject
+                ? projectSetupMode === "create"
+                  ? "Creating..."
+                  : "Connecting..."
+                : projectSetupMode === "create"
+                  ? "Create Project"
+                  : "Connect to Project"}
+            </Button>
+          </form>
+
+          {createProjectError && (
+            <p className="text-red-600 mt-2">{createProjectError}</p>
+          )}
+          {createProjectSuccess && (
+            <p className="text-green-600 mt-2">
+              {projectSetupMode === "create"
+                ? "Project created and linked!"
+                : "Connected to project!"}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function VercelConnector({ appId, folderName }: VercelConnectorProps) {
+  const { app, refreshApp } = useLoadApp(appId);
+  const { settings, refreshSettings } = useSettings();
+
+  if (app?.vercelProjectId && appId) {
+    return (
+      <ConnectedVercelConnector
+        appId={appId}
+        app={app}
+        refreshApp={refreshApp}
+      />
+    );
+  } else {
+    return (
+      <UnconnectedVercelConnector
+        appId={appId}
+        folderName={folderName}
+        settings={settings}
+        refreshSettings={refreshSettings}
+        refreshApp={refreshApp}
+      />
+    );
+  }
+}
--- a/src/components/VercelIntegration.tsx
+++ b/src/components/VercelIntegration.tsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useSettings } from "@/hooks/useSettings";
+import { showSuccess, showError } from "@/lib/toast";
+
+export function VercelIntegration() {
+  const { settings, updateSettings } = useSettings();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const handleDisconnectFromVercel = async () => {
+    setIsDisconnecting(true);
+    try {
+      const result = await updateSettings({
+        vercelAccessToken: undefined,
+      });
+      if (result) {
+        showSuccess("Successfully disconnected from Vercel");
+      } else {
+        showError("Failed to disconnect from Vercel");
+      }
+    } catch (err: any) {
+      showError(
+        err.message || "An error occurred while disconnecting from Vercel",
+      );
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  const isConnected = !!settings?.vercelAccessToken;
+
+  if (!isConnected) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Vercel Integration
+        </h3>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          Your account is connected to Vercel.
+        </p>
+      </div>
+
+      <Button
+        onClick={handleDisconnectFromVercel}
+        variant="destructive"
+        size="sm"
+        disabled={isDisconnecting}
+        className="flex items-center gap-2"
+      >
+        {isDisconnecting ? "Disconnecting..." : "Disconnect from Vercel"}
+        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M24 22.525H0l12-21.05 12 21.05z" />
+        </svg>
+      </Button>
+    </div>
+  );
+}
--- a/src/components/preview_panel/PreviewHeader.tsx
+++ b/src/components/preview_panel/PreviewHeader.tsx
@@ -10,6 +10,7 @@ import {
  Trash2,
  AlertTriangle,
  Wrench,
+  Globe,
 } from "lucide-react";
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -32,7 +33,12 @@ import { useMutation } from "@tanstack/react-query";
 import { useCheckProblems } from "@/hooks/useCheckProblems";
 import { isPreviewOpenAtom } from "@/atoms/viewAtoms";

-export type PreviewMode = "preview" | "code" | "problems" | "configure";
+export type PreviewMode =
+  | "preview"
+  | "code"
+  | "problems"
+  | "configure"
+  | "publish";

 const BUTTON_CLASS_NAME =
  "no-app-region-drag cursor-pointer relative flex items-center gap-1 px-2 py-1 rounded-md text-[13px] font-medium z-10 hover:bg-[var(--background)]";
@@ -46,12 +52,13 @@ export const PreviewHeader = () => {
  const codeRef = useRef<HTMLButtonElement>(null);
  const problemsRef = useRef<HTMLButtonElement>(null);
  const configureRef = useRef<HTMLButtonElement>(null);
+  const publishRef = useRef<HTMLButtonElement>(null);
  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const { problemReport } = useCheckProblems(selectedAppId);
  const { restartApp, refreshAppIframe } = useRunApp();

-  const isCompact = windowWidth < 840;
+  const isCompact = windowWidth < 860;

  // Track window width
  useEffect(() => {
@@ -128,6 +135,9 @@ export const PreviewHeader = () => {
        case "configure":
          targetRef = configureRef;
          break;
+        case "publish":
+          targetRef = publishRef;
+          break;
        default:
          return;
      }
@@ -239,6 +249,13 @@ export const PreviewHeader = () => {
            "Configure",
            "configure-mode-button",
          )}
+          {renderButton(
+            "publish",
+            publishRef,
+            <Globe size={14} />,
+            "Publish",
+            "publish-mode-button",
+          )}
        </div>
        <div className="flex items-center">
          <DropdownMenu>
--- a/src/components/preview_panel/PreviewPanel.tsx
+++ b/src/components/preview_panel/PreviewPanel.tsx
@@ -15,6 +15,7 @@ import { useEffect, useRef, useState } from "react";
 import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
 import { Console } from "./Console";
 import { useRunApp } from "@/hooks/useRunApp";
+import { PublishPanel } from "./PublishPanel";

 interface ConsoleHeaderProps {
  isOpen: boolean;
@@ -116,6 +117,8 @@ export function PreviewPanel() {
                <CodeView loading={loading} app={app} />
              ) : previewMode === "configure" ? (
                <ConfigurePanel />
+              ) : previewMode === "publish" ? (
+                <PublishPanel />
              ) : (
                <Problems />
              )}
--- a/src/components/preview_panel/PublishPanel.tsx
+++ b/src/components/preview_panel/PublishPanel.tsx
@@ -0,0 +1,169 @@
+import { useAtomValue } from "jotai";
+import { selectedAppIdAtom } from "@/atoms/appAtoms";
+import { useLoadApp } from "@/hooks/useLoadApp";
+import { GitHubConnector } from "@/components/GitHubConnector";
+import { VercelConnector } from "@/components/VercelConnector";
+import { IpcClient } from "@/ipc/ipc_client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const PublishPanel = () => {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const { app, loading } = useLoadApp(selectedAppId);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+        <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+          <svg
+            className="w-6 h-6 text-blue-600 dark:text-blue-400 animate-spin"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Loading...
+        </h2>
+      </div>
+    );
+  }
+
+  if (!selectedAppId || !app) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+        <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-900/30 flex items-center justify-center">
+          <svg
+            className="w-6 h-6 text-gray-600 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+            />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          No App Selected
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 max-w-md">
+          Select an app to view publishing options.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-y-auto">
+      <div className="p-4 space-y-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+            Publish App
+          </h1>
+        </div>
+
+        {/* GitHub Section */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              GitHub
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Sync your code to GitHub for collaboration.
+            </p>
+            <GitHubConnector
+              appId={selectedAppId}
+              folderName={app.name}
+              expanded={true}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Vercel Section */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2">
+              <button
+                onClick={() => {
+                  const ipcClient = IpcClient.getInstance();
+                  ipcClient.openExternalUrl("https://vercel.com/dashboard");
+                }}
+                className="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer bg-transparent border-none p-0"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M24 22.525H0l12-21.05 12 21.05z" />
+                </svg>
+                Vercel
+              </button>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Publish your app by deploying it to Vercel.
+            </p>
+
+            {!app?.githubOrg || !app?.githubRepo ? (
+              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <svg
+                    className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                    />
+                  </svg>
+                  <div>
+                    <h3 className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                      GitHub Required for Vercel Deployment
+                    </h3>
+                    <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
+                      Deploying to Vercel requires connecting to GitHub first.
+                      Please set up your GitHub repository above.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <VercelConnector appId={selectedAppId} folderName={app.name} />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -16,6 +16,10 @@ export const apps = sqliteTable("apps", {
  githubRepo: text("github_repo"),
  githubBranch: text("github_branch"),
  supabaseProjectId: text("supabase_project_id"),
+  vercelProjectId: text("vercel_project_id"),
+  vercelProjectName: text("vercel_project_name"),
+  vercelTeamId: text("vercel_team_id"),
+  vercelDeploymentUrl: text("vercel_deployment_url"),
  chatContext: text("chat_context", { mode: "json" }),
 });

--- a/src/ipc/handlers/app_handlers.ts
+++ b/src/ipc/handlers/app_handlers.ts
@@ -46,6 +46,7 @@ import { gitCommit } from "../utils/git_utils";
 import { safeSend } from "../utils/safe_sender";
 import { normalizePath } from "../../../shared/normalizePath";
 import { isServerFunction } from "@/supabase_admin/supabase_utils";
+import { getVercelTeamSlug } from "../utils/vercel_utils";

 async function copyDir(
  source: string,
@@ -370,10 +371,16 @@ export function registerAppHandlers() {
      supabaseProjectName = await getSupabaseProjectName(app.supabaseProjectId);
    }

+    let vercelTeamSlug: string | null = null;
+    if (app.vercelTeamId) {
+      vercelTeamSlug = await getVercelTeamSlug(app.vercelTeamId);
+    }
+
    return {
      ...app,
      files,
      supabaseProjectName,
+      vercelTeamSlug,
    };
  });

--- a/src/ipc/handlers/vercel_handlers.ts
+++ b/src/ipc/handlers/vercel_handlers.ts
@@ -0,0 +1,524 @@
+import { ipcMain, IpcMainInvokeEvent } from "electron";
+import { Vercel } from "@vercel/sdk";
+import { writeSettings, readSettings } from "../../main/settings";
+import * as schema from "../../db/schema";
+import { db } from "../../db";
+import { apps } from "../../db/schema";
+import { eq } from "drizzle-orm";
+import log from "electron-log";
+import { IS_TEST_BUILD } from "../utils/test_utils";
+import * as fs from "fs";
+import * as path from "path";
+import { CreateProjectFramework } from "@vercel/sdk/models/createprojectop.js";
+import { getDyadAppPath } from "@/paths/paths";
+import {
+  CreateVercelProjectParams,
+  IsVercelProjectAvailableParams,
+  SaveVercelAccessTokenParams,
+  VercelProject,
+} from "../ipc_types";
+import { ConnectToExistingVercelProjectParams } from "../ipc_types";
+import { GetVercelDeploymentsParams } from "../ipc_types";
+import { DisconnectVercelProjectParams } from "../ipc_types";
+import { createLoggedHandler } from "./safe_handle";
+
+const logger = log.scope("vercel_handlers");
+const handle = createLoggedHandler(logger);
+
+// Use test server URLs when in test mode
+const TEST_SERVER_BASE = "http://localhost:3500";
+
+const VERCEL_API_BASE = IS_TEST_BUILD
+  ? `${TEST_SERVER_BASE}/vercel/api`
+  : "https://api.vercel.com";
+
+// --- Helper Functions ---
+
+function createVercelClient(token: string): Vercel {
+  return new Vercel({
+    bearerToken: token,
+    ...(IS_TEST_BUILD && { serverURL: VERCEL_API_BASE }),
+  });
+}
+
+async function validateVercelToken(token: string): Promise<boolean> {
+  try {
+    const vercel = createVercelClient(token);
+    await vercel.user.getAuthUser();
+    return true;
+  } catch (error) {
+    logger.error("Error validating Vercel token:", error);
+    return false;
+  }
+}
+
+async function getDefaultTeamId(token: string): Promise<string> {
+  try {
+    const response = await fetch(`${VERCEL_API_BASE}/v2/teams?limit=1`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch teams: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+
+    // Use the first team (typically the personal account or default team)
+    if (data.teams && data.teams.length > 0) {
+      return data.teams[0].id;
+    }
+
+    throw new Error("No teams found for this user");
+  } catch (error) {
+    logger.error("Error getting default team ID:", error);
+    throw new Error("Failed to get team information");
+  }
+}
+
+async function detectFramework(
+  appPath: string,
+): Promise<CreateProjectFramework | undefined> {
+  try {
+    // Check for specific config files first
+    const configFiles: Array<{
+      file: string;
+      framework: CreateProjectFramework;
+    }> = [
+      { file: "next.config.js", framework: "nextjs" },
+      { file: "next.config.mjs", framework: "nextjs" },
+      { file: "next.config.ts", framework: "nextjs" },
+      { file: "vite.config.js", framework: "vite" },
+      { file: "vite.config.ts", framework: "vite" },
+      { file: "vite.config.mjs", framework: "vite" },
+      { file: "nuxt.config.js", framework: "nuxtjs" },
+      { file: "nuxt.config.ts", framework: "nuxtjs" },
+      { file: "astro.config.js", framework: "astro" },
+      { file: "astro.config.mjs", framework: "astro" },
+      { file: "astro.config.ts", framework: "astro" },
+      { file: "svelte.config.js", framework: "svelte" },
+    ];
+
+    for (const { file, framework } of configFiles) {
+      if (fs.existsSync(path.join(appPath, file))) {
+        return framework;
+      }
+    }
+
+    // Check package.json for dependencies
+    const packageJsonPath = path.join(appPath, "package.json");
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+      const dependencies = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies,
+      };
+
+      // Check for framework dependencies in order of preference
+      if (dependencies.next) return "nextjs";
+      if (dependencies.vite) return "vite";
+      if (dependencies.nuxt) return "nuxtjs";
+      if (dependencies.astro) return "astro";
+      if (dependencies.svelte) return "svelte";
+      if (dependencies["@angular/core"]) return "angular";
+      if (dependencies.vue) return "vue";
+      if (dependencies["react-scripts"]) return "create-react-app";
+      if (dependencies.gatsby) return "gatsby";
+      if (dependencies.remix) return "remix";
+    }
+
+    // Default fallback
+    return undefined;
+  } catch (error) {
+    logger.error("Error detecting framework:", error);
+    return undefined;
+  }
+}
+
+// --- IPC Handlers ---
+
+async function handleSaveVercelToken(
+  event: IpcMainInvokeEvent,
+  { token }: SaveVercelAccessTokenParams,
+): Promise<void> {
+  logger.debug("Saving Vercel access token");
+
+  if (!token || token.trim() === "") {
+    throw new Error("Access token is required.");
+  }
+
+  try {
+    // Validate the token by making a test API call
+    const isValid = await validateVercelToken(token.trim());
+    if (!isValid) {
+      throw new Error(
+        "Invalid access token. Please check your token and try again.",
+      );
+    }
+
+    writeSettings({
+      vercelAccessToken: {
+        value: token.trim(),
+      },
+    });
+
+    logger.log("Successfully saved Vercel access token.");
+  } catch (error: any) {
+    logger.error("Error saving Vercel token:", error);
+    throw new Error(`Failed to save access token: ${error.message}`);
+  }
+}
+
+// --- Vercel List Projects Handler ---
+async function handleListVercelProjects(): Promise<VercelProject[]> {
+  try {
+    const settings = readSettings();
+    const accessToken = settings.vercelAccessToken?.value;
+    if (!accessToken) {
+      throw new Error("Not authenticated with Vercel.");
+    }
+
+    const vercel = createVercelClient(accessToken);
+    const response = await vercel.projects.getProjects({});
+
+    if (!response.projects) {
+      throw new Error("Failed to retrieve projects from Vercel.");
+    }
+
+    return response.projects.map((project) => ({
+      id: project.id,
+      name: project.name,
+      framework: project.framework || null,
+    }));
+  } catch (err: any) {
+    logger.error("[Vercel Handler] Failed to list projects:", err);
+    throw new Error(err.message || "Failed to list Vercel projects.");
+  }
+}
+
+// --- Vercel Project Availability Handler ---
+async function handleIsProjectAvailable(
+  event: IpcMainInvokeEvent,
+  { name }: IsVercelProjectAvailableParams,
+): Promise<{ available: boolean; error?: string }> {
+  try {
+    const settings = readSettings();
+    const accessToken = settings.vercelAccessToken?.value;
+    if (!accessToken) {
+      return { available: false, error: "Not authenticated with Vercel." };
+    }
+
+    const vercel = createVercelClient(accessToken);
+
+    // Check if project name is available by searching for projects with that name
+    const response = await vercel.projects.getProjects({
+      search: name,
+    });
+
+    if (!response.projects) {
+      return {
+        available: false,
+        error: "Failed to check project availability.",
+      };
+    }
+
+    const projectExists = response.projects.some(
+      (project) => project.name === name,
+    );
+
+    return {
+      available: !projectExists,
+      error: projectExists ? "Project name is not available." : undefined,
+    };
+  } catch (err: any) {
+    return { available: false, error: err.message || "Unknown error" };
+  }
+}
+
+// --- Vercel Create Project Handler ---
+async function handleCreateProject(
+  event: IpcMainInvokeEvent,
+  { name, appId }: CreateVercelProjectParams,
+): Promise<void> {
+  const settings = readSettings();
+  const accessToken = settings.vercelAccessToken?.value;
+  if (!accessToken) {
+    throw new Error("Not authenticated with Vercel.");
+  }
+
+  try {
+    logger.info(`Creating Vercel project: ${name} for app ${appId}`);
+
+    // Get app details to determine the framework
+    const app = await db.query.apps.findFirst({ where: eq(apps.id, appId) });
+    if (!app) {
+      throw new Error("App not found.");
+    }
+
+    // Check if app has GitHub repository configured
+    if (!app.githubOrg || !app.githubRepo) {
+      throw new Error(
+        "App must be connected to a GitHub repository before creating a Vercel project.",
+      );
+    }
+
+    // Detect the framework from the app's directory
+    const detectedFramework = await detectFramework(getDyadAppPath(app.path));
+
+    logger.info(
+      `Detected framework: ${detectedFramework || "none detected"} for app at ${app.path}`,
+    );
+
+    const vercel = createVercelClient(accessToken);
+
+    const projectData = await vercel.projects.createProject({
+      requestBody: {
+        name: name,
+        gitRepository: {
+          type: "github",
+          repo: `${app.githubOrg}/${app.githubRepo}`,
+        },
+        framework: detectedFramework,
+      },
+    });
+
+    if (!projectData.id) {
+      throw new Error("Failed to create project: No project ID returned.");
+    }
+
+    // Get the default team ID
+    const teamId = await getDefaultTeamId(accessToken);
+
+    // Store project info in the app's DB row
+    await updateAppVercelProject({
+      appId,
+      projectId: projectData.id,
+      projectName: projectData.name,
+      teamId: teamId,
+      deploymentUrl: null, // Will be set after first deployment
+    });
+
+    logger.info(
+      `Successfully created Vercel project: ${projectData.id} with GitHub repo: ${app.githubOrg}/${app.githubRepo}`,
+    );
+
+    // Trigger the first deployment
+    logger.info(`Triggering first deployment for project: ${projectData.id}`);
+    try {
+      // Create deployment via Vercel SDK using the project settings we just created
+      const deploymentData = await vercel.deployments.createDeployment({
+        requestBody: {
+          name: projectData.name,
+          project: projectData.id,
+          target: "production",
+          gitSource: {
+            type: "github",
+            org: app.githubOrg,
+            repo: app.githubRepo,
+            ref: app.githubBranch || "main",
+          },
+          // projectSettings: {
+          //   framework: "vite",
+          // },
+        },
+      });
+
+      if (deploymentData.url) {
+        // Update deployment URL in the database
+        const deploymentUrl = `https://${deploymentData.url}`;
+        await db
+          .update(apps)
+          .set({ vercelDeploymentUrl: deploymentUrl })
+          .where(eq(apps.id, appId));
+
+        logger.info(`First deployment successful: ${deploymentUrl}`);
+      } else {
+        logger.warn("First deployment failed: No deployment URL returned");
+      }
+    } catch (deployError: any) {
+      logger.warn(`First deployment failed with error: ${deployError.message}`);
+      // Don't throw here - project creation was successful, deployment failure is non-critical
+    }
+  } catch (err: any) {
+    logger.error("[Vercel Handler] Failed to create project:", err);
+    throw new Error(err.message || "Failed to create Vercel project.");
+  }
+}
+
+// --- Vercel Connect to Existing Project Handler ---
+async function handleConnectToExistingProject(
+  event: IpcMainInvokeEvent,
+  { projectId, appId }: ConnectToExistingVercelProjectParams,
+): Promise<void> {
+  try {
+    const settings = readSettings();
+    const accessToken = settings.vercelAccessToken?.value;
+    if (!accessToken) {
+      throw new Error("Not authenticated with Vercel.");
+    }
+
+    logger.info(
+      `Connecting to existing Vercel project: ${projectId} for app ${appId}`,
+    );
+
+    const vercel = createVercelClient(accessToken);
+
+    // Verify the project exists and get its details
+    const response = await vercel.projects.getProjects({});
+    const projectData = response.projects?.find(
+      (p) => p.id === projectId || p.name === projectId,
+    );
+
+    if (!projectData) {
+      throw new Error("Project not found. Please check the project ID.");
+    }
+
+    // Get the default team ID
+    const teamId = await getDefaultTeamId(accessToken);
+
+    // Store project info in the app's DB row
+    await updateAppVercelProject({
+      appId,
+      projectId: projectData.id,
+      projectName: projectData.name,
+      teamId: teamId,
+      deploymentUrl: projectData.targets?.production?.url
+        ? `https://${projectData.targets.production.url}`
+        : null,
+    });
+
+    logger.info(`Successfully connected to Vercel project: ${projectData.id}`);
+  } catch (err: any) {
+    logger.error(
+      "[Vercel Handler] Failed to connect to existing project:",
+      err,
+    );
+    throw new Error(err.message || "Failed to connect to existing project.");
+  }
+}
+
+// --- Vercel Get Deployments Handler ---
+async function handleGetVercelDeployments(
+  event: IpcMainInvokeEvent,
+  { appId }: GetVercelDeploymentsParams,
+): Promise<
+  {
+    uid: string;
+    url: string;
+    state: string;
+    createdAt: number;
+    target: string;
+    readyState: string;
+  }[]
+> {
+  try {
+    const settings = readSettings();
+    const accessToken = settings.vercelAccessToken?.value;
+    if (!accessToken) {
+      throw new Error("Not authenticated with Vercel.");
+    }
+
+    const app = await db.query.apps.findFirst({ where: eq(apps.id, appId) });
+    if (!app || !app.vercelProjectId) {
+      throw new Error("App is not linked to a Vercel project.");
+    }
+
+    logger.info(
+      `Getting deployments for Vercel project: ${app.vercelProjectId} for app ${appId}`,
+    );
+
+    const vercel = createVercelClient(accessToken);
+
+    // Get deployments for the project
+    const deploymentsResponse = await vercel.deployments.getDeployments({
+      projectId: app.vercelProjectId,
+      limit: 3, // Get last 3 deployments
+    });
+
+    if (!deploymentsResponse.deployments) {
+      throw new Error("Failed to retrieve deployments from Vercel.");
+    }
+
+    // Map deployments to our interface format
+    return deploymentsResponse.deployments.map((deployment) => ({
+      uid: deployment.uid,
+      url: deployment.url,
+      state: deployment.state || "unknown",
+      createdAt: deployment.createdAt || 0,
+      target: deployment.target || "production",
+      readyState: deployment.readyState || "unknown",
+    }));
+  } catch (err: any) {
+    logger.error("[Vercel Handler] Failed to get deployments:", err);
+    throw new Error(err.message || "Failed to get Vercel deployments.");
+  }
+}
+
+async function handleDisconnectVercelProject(
+  event: IpcMainInvokeEvent,
+  { appId }: DisconnectVercelProjectParams,
+): Promise<void> {
+  logger.log(`Disconnecting Vercel project for appId: ${appId}`);
+
+  const app = await db.query.apps.findFirst({
+    where: eq(apps.id, appId),
+  });
+
+  if (!app) {
+    throw new Error("App not found");
+  }
+
+  // Update app in database to remove Vercel project info
+  await db
+    .update(apps)
+    .set({
+      vercelProjectId: null,
+      vercelProjectName: null,
+      vercelTeamId: null,
+      vercelDeploymentUrl: null,
+    })
+    .where(eq(apps.id, appId));
+}
+
+// --- Registration ---
+export function registerVercelHandlers() {
+  // DO NOT LOG this handler because tokens are sensitive
+  ipcMain.handle("vercel:save-token", handleSaveVercelToken);
+
+  // Logged handlers
+  handle("vercel:list-projects", handleListVercelProjects);
+  handle("vercel:is-project-available", handleIsProjectAvailable);
+  handle("vercel:create-project", handleCreateProject);
+  handle("vercel:connect-existing-project", handleConnectToExistingProject);
+  handle("vercel:get-deployments", handleGetVercelDeployments);
+  handle("vercel:disconnect", handleDisconnectVercelProject);
+}
+
+export async function updateAppVercelProject({
+  appId,
+  projectId,
+  projectName,
+  teamId,
+  deploymentUrl,
+}: {
+  appId: number;
+  projectId: string;
+  projectName: string;
+  teamId: string;
+  deploymentUrl?: string | null;
+}): Promise<void> {
+  await db
+    .update(schema.apps)
+    .set({
+      vercelProjectId: projectId,
+      vercelProjectName: projectName,
+      vercelTeamId: teamId,
+      vercelDeploymentUrl: deploymentUrl,
+    })
+    .where(eq(schema.apps.id, appId));
+}
--- a/src/ipc/ipc_client.ts
+++ b/src/ipc/ipc_client.ts
@@ -40,6 +40,15 @@ import type {
  EditAppFileReturnType,
  GetAppEnvVarsParams,
  SetAppEnvVarsParams,
+  ConnectToExistingVercelProjectParams,
+  IsVercelProjectAvailableResponse,
+  CreateVercelProjectParams,
+  VercelDeployment,
+  GetVercelDeploymentsParams,
+  DisconnectVercelProjectParams,
+  IsVercelProjectAvailableParams,
+  SaveVercelAccessTokenParams,
+  VercelProject,
 } from "./ipc_types";
 import type { AppChatContext, ProposalResult } from "@/lib/schemas";
 import { showError } from "@/lib/toast";
@@ -646,6 +655,51 @@ export class IpcClient {
  }
  // --- End GitHub Repo Management ---

+  // --- Vercel Token Management ---
+  public async saveVercelAccessToken(
+    params: SaveVercelAccessTokenParams,
+  ): Promise<void> {
+    await this.ipcRenderer.invoke("vercel:save-token", params);
+  }
+  // --- End Vercel Token Management ---
+
+  // --- Vercel Project Management ---
+  public async listVercelProjects(): Promise<VercelProject[]> {
+    return this.ipcRenderer.invoke("vercel:list-projects", undefined);
+  }
+
+  public async connectToExistingVercelProject(
+    params: ConnectToExistingVercelProjectParams,
+  ): Promise<void> {
+    await this.ipcRenderer.invoke("vercel:connect-existing-project", params);
+  }
+
+  public async isVercelProjectAvailable(
+    params: IsVercelProjectAvailableParams,
+  ): Promise<IsVercelProjectAvailableResponse> {
+    return this.ipcRenderer.invoke("vercel:is-project-available", params);
+  }
+
+  public async createVercelProject(
+    params: CreateVercelProjectParams,
+  ): Promise<void> {
+    await this.ipcRenderer.invoke("vercel:create-project", params);
+  }
+
+  // Get Vercel Deployments
+  public async getVercelDeployments(
+    params: GetVercelDeploymentsParams,
+  ): Promise<VercelDeployment[]> {
+    return this.ipcRenderer.invoke("vercel:get-deployments", params);
+  }
+
+  public async disconnectVercelProject(
+    params: DisconnectVercelProjectParams,
+  ): Promise<void> {
+    await this.ipcRenderer.invoke("vercel:disconnect", params);
+  }
+  // --- End Vercel Project Management ---
+
  // Get the main app version
  public async getAppVersion(): Promise<string> {
    const result = await this.ipcRenderer.invoke("get-app-version");
--- a/src/ipc/ipc_host.ts
+++ b/src/ipc/ipc_host.ts
@@ -5,6 +5,7 @@ import { registerSettingsHandlers } from "./handlers/settings_handlers";
 import { registerShellHandlers } from "./handlers/shell_handler";
 import { registerDependencyHandlers } from "./handlers/dependency_handlers";
 import { registerGithubHandlers } from "./handlers/github_handlers";
+import { registerVercelHandlers } from "./handlers/vercel_handlers";
 import { registerNodeHandlers } from "./handlers/node_handlers";
 import { registerProposalHandlers } from "./handlers/proposal_handlers";
 import { registerDebugHandlers } from "./handlers/debug_handlers";
@@ -34,6 +35,7 @@ export function registerIpcHandlers() {
  registerShellHandlers();
  registerDependencyHandlers();
  registerGithubHandlers();
+  registerVercelHandlers();
  registerNodeHandlers();
  registerProblemsHandlers();
  registerProposalHandlers();
--- a/src/ipc/ipc_types.ts
+++ b/src/ipc/ipc_types.ts
@@ -81,6 +81,10 @@ export interface App {
  githubBranch: string | null;
  supabaseProjectId: string | null;
  supabaseProjectName: string | null;
+  vercelProjectId: string | null;
+  vercelProjectName: string | null;
+  vercelTeamSlug: string | null;
+  vercelDeploymentUrl: string | null;
 }

 export interface Version {
@@ -266,3 +270,49 @@ export interface SetAppEnvVarsParams {
 export interface GetAppEnvVarsParams {
  appId: number;
 }
+
+export interface VercelDeployment {
+  uid: string;
+  url: string;
+  state: string;
+  createdAt: number;
+  target: string;
+  readyState: string;
+}
+
+export interface ConnectToExistingVercelProjectParams {
+  projectId: string;
+  appId: number;
+}
+
+export interface IsVercelProjectAvailableResponse {
+  available: boolean;
+  error?: string;
+}
+
+export interface CreateVercelProjectParams {
+  name: string;
+  appId: number;
+}
+
+export interface GetVercelDeploymentsParams {
+  appId: number;
+}
+
+export interface DisconnectVercelProjectParams {
+  appId: number;
+}
+
+export interface IsVercelProjectAvailableParams {
+  name: string;
+}
+
+export interface SaveVercelAccessTokenParams {
+  token: string;
+}
+
+export interface VercelProject {
+  id: string;
+  name: string;
+  framework: string | null;
+}
--- a/src/ipc/utils/vercel_utils.ts
+++ b/src/ipc/utils/vercel_utils.ts
@@ -0,0 +1,48 @@
+import { readSettings } from "../../main/settings";
+import log from "electron-log";
+import { IS_TEST_BUILD } from "./test_utils";
+
+const logger = log.scope("vercel_utils");
+
+// Use test server URLs when in test mode
+const TEST_SERVER_BASE = "http://localhost:3500";
+
+const VERCEL_API_BASE = IS_TEST_BUILD
+  ? `${TEST_SERVER_BASE}/vercel/api`
+  : "https://api.vercel.com";
+
+export async function getVercelTeamSlug(
+  teamId: string,
+): Promise<string | null> {
+  try {
+    const settings = readSettings();
+    const accessToken = settings.vercelAccessToken?.value;
+
+    if (!accessToken) {
+      logger.warn("No Vercel access token found when trying to get team slug");
+      return null;
+    }
+
+    const response = await fetch(`${VERCEL_API_BASE}/v2/teams/${teamId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      logger.error(
+        `Failed to fetch team details: ${response.status} ${response.statusText}`,
+      );
+      return null;
+    }
+
+    const data = await response.json();
+
+    // Return the team slug if available
+    return data.slug || null;
+  } catch (error) {
+    logger.error("Error getting Vercel team slug:", error);
+    return null;
+  }
+}
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -136,6 +136,7 @@ export const UserSettingsSchema = z.object({
  providerSettings: z.record(z.string(), ProviderSettingSchema),
  githubUser: GithubUserSchema.optional(),
  githubAccessToken: SecretSchema.optional(),
+  vercelAccessToken: SecretSchema.optional(),
  supabase: SupabaseSchema.optional(),
  autoApproveChanges: z.boolean().optional(),
  telemetryConsent: z.enum(["opted_in", "opted_out", "unset"]).optional(),
--- a/src/main/settings.ts
+++ b/src/main/settings.ts
@@ -74,6 +74,13 @@ export function readSettings(): UserSettings {
        encryptionType,
      };
    }
+    if (combinedSettings.vercelAccessToken) {
+      const encryptionType = combinedSettings.vercelAccessToken.encryptionType;
+      combinedSettings.vercelAccessToken = {
+        value: decrypt(combinedSettings.vercelAccessToken),
+        encryptionType,
+      };
+    }
    for (const provider in combinedSettings.providerSettings) {
      if (combinedSettings.providerSettings[provider].apiKey) {
        const encryptionType =
@@ -105,6 +112,11 @@ export function writeSettings(settings: Partial<UserSettings>): void {
        newSettings.githubAccessToken.value,
      );
    }
+    if (newSettings.vercelAccessToken) {
+      newSettings.vercelAccessToken = encrypt(
+        newSettings.vercelAccessToken.value,
+      );
+    }
    if (newSettings.supabase) {
      if (newSettings.supabase.accessToken) {
        newSettings.supabase.accessToken = encrypt(
--- a/src/pages/app-details.tsx
+++ b/src/pages/app-details.tsx
@@ -342,7 +342,9 @@ export default function AppDetailsPage() {
            Open in Chat
            <MessageCircle className="h-4 w-4" />
          </Button>
-          <GitHubConnector appId={appId} folderName={selectedApp.path} />
+          <div className="border border-gray-200 rounded-md p-4">
+            <GitHubConnector appId={appId} folderName={selectedApp.path} />
+          </div>
          {appId && <SupabaseConnector appId={appId} />}
          {appId && <CapacitorControls appId={appId} />}
          <AppUpgrades appId={appId} />
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { useRouter } from "@tanstack/react-router";
 import { GitHubIntegration } from "@/components/GitHubIntegration";
+import { VercelIntegration } from "@/components/VercelIntegration";
 import { SupabaseIntegration } from "@/components/SupabaseIntegration";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
@@ -109,6 +110,7 @@ export default function SettingsPage() {
            </h2>
            <div className="space-y-4">
              <GitHubIntegration />
+              <VercelIntegration />
              <SupabaseIntegration />
            </div>
          </div>
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -55,6 +55,13 @@ const validInvokeChannels = [
  "github:connect-existing-repo",
  "github:push",
  "github:disconnect",
+  "vercel:save-token",
+  "vercel:list-projects",
+  "vercel:is-project-available",
+  "vercel:create-project",
+  "vercel:connect-existing-project",
+  "vercel:get-deployments",
+  "vercel:disconnect",
  "get-app-version",
  "reload-env-path",
  "get-proposal",