From f2b157b8bc84bfc3ee09d96b5d488c0a0b344f8c Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Thu, 17 Apr 2025 23:05:44 -0700
Subject: [PATCH] Simplified setup flow: user installs node.js; pnpm is
 configured

---
 src/components/SetupBanner.tsx    | 301 +++++++++++++++---------------
 src/ipc/handlers/node_handlers.ts | 137 +++-----------
 src/ipc/ipc_client.ts             |  21 +--
 src/ipc/ipc_types.ts              |  15 +-
 src/pages/home.tsx                |   4 -
 src/preload.ts                    |   1 +
 6 files changed, 190 insertions(+), 289 deletions(-)

diff --git a/src/components/SetupBanner.tsx b/src/components/SetupBanner.tsx
index 2d994cd..7185891 100644
--- a/src/components/SetupBanner.tsx
+++ b/src/components/SetupBanner.tsx
@@ -20,29 +20,26 @@ import {
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { showError } from "@/lib/toast";
-
+import { NodeSystemInfo } from "@/ipc/ipc_types";
 export function SetupBanner() {
   const navigate = useNavigate();
-  const { isAnyProviderSetup } = useSettings();
-  const [nodeVersion, setNodeVersion] = useState<string | null>(null);
-  const [pnpmVersion, setPnpmVersion] = useState<string | null>(null);
+  const { isAnyProviderSetup, loading } = useSettings();
+  const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>(
+    null
+  );
   const [nodeCheckError, setNodeCheckError] = useState<boolean>(false);
-  const [nodeInstallError, setNodeInstallError] = useState<string | null>(null);
   const [nodeInstallLoading, setNodeInstallLoading] = useState<boolean>(false);
   const checkNode = useCallback(async () => {
     try {
       setNodeCheckError(false);
       const status = await IpcClient.getInstance().getNodejsStatus();
-      setNodeVersion(status.nodeVersion);
-      setPnpmVersion(status.pnpmVersion);
+      setNodeSystemInfo(status);
     } catch (error) {
       console.error("Failed to check Node.js status:", error);
-      setNodeVersion(null);
-      setPnpmVersion(null);
+      setNodeSystemInfo(null);
       setNodeCheckError(true);
     }
-  }, [setNodeVersion, setNodeCheckError]);
+  }, [setNodeSystemInfo, setNodeCheckError]);
 
   useEffect(() => {
     checkNode();
@@ -57,39 +54,35 @@ export function SetupBanner() {
 
   const handleNodeInstallClick = async () => {
     setNodeInstallLoading(true);
-    try {
-      const result = await IpcClient.getInstance().installNode();
-      if (!result.success) {
-        showError(result.errorMessage);
-        setNodeInstallError(result.errorMessage || "Unknown error");
-      } else {
-        setNodeVersion(result.nodeVersion);
-        setPnpmVersion(result.pnpmVersion);
-      }
-    } catch (error) {
-      showError("Failed to install Node.js. " + (error as Error).message);
-      setNodeInstallError(
-        "Failed to install Node.js. " + (error as Error).message
-      );
-    } finally {
-      setNodeInstallLoading(false);
-    }
+    IpcClient.getInstance().openExternalUrl(nodeSystemInfo!.nodeDownloadUrl);
   };
 
-  const isNodeSetupComplete = !!nodeVersion && !!pnpmVersion;
-  const isAiProviderSetup = isAnyProviderSetup();
+  const finishNodeInstallAndRestart = () => {
+    IpcClient.getInstance().reloadDyad();
+  };
+
+  const isNodeSetupComplete = Boolean(
+    nodeSystemInfo?.nodeVersion && nodeSystemInfo?.pnpmVersion
+  );
 
   const itemsNeedAction: string[] = [];
-  if (!isNodeSetupComplete) itemsNeedAction.push("node-setup");
-  if (isNodeSetupComplete && !isAiProviderSetup)
+  if (!isNodeSetupComplete && nodeSystemInfo) {
+    itemsNeedAction.push("node-setup");
+  }
+  if (!isAnyProviderSetup() && !loading) {
     itemsNeedAction.push("ai-setup");
+  }
 
   if (itemsNeedAction.length === 0) {
-    return null;
+    return (
+      <h1 className="text-6xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
+        Build your dream app
+      </h1>
+    );
   }
 
   const bannerClasses = cn(
-    "w-full mb-8 border rounded-xl shadow-sm overflow-hidden",
+    "w-full mb-6 border rounded-xl shadow-sm overflow-hidden",
     "border-zinc-200 dark:border-zinc-700"
   );
 
@@ -105,131 +98,131 @@ export function SetupBanner() {
   };
 
   return (
-    <div className={bannerClasses}>
-      <Accordion
-        type="multiple"
-        className="w-full"
-        defaultValue={itemsNeedAction}
-      >
-        <AccordionItem
-          value="node-setup"
-          className={cn(
-            nodeCheckError
-              ? "bg-red-50 dark:bg-red-900/30"
-              : isNodeSetupComplete
-              ? "bg-green-50 dark:bg-green-900/30"
-              : "bg-yellow-50 dark:bg-yellow-900/30"
-          )}
+    <>
+      <p className="text-xl text-zinc-700 dark:text-zinc-300 p-4">
+        Follow these steps and you'll be ready to start building with Dyad...
+      </p>
+      <div className={bannerClasses}>
+        <Accordion
+          type="multiple"
+          className="w-full"
+          defaultValue={itemsNeedAction}
         >
-          <AccordionTrigger className="px-4 py-3 transition-colors w-full hover:no-underline">
-            <div className="flex items-center justify-between w-full">
-              <div className="flex items-center gap-3">
-                {getStatusIcon(isNodeSetupComplete, nodeCheckError)}
-                <span className="font-medium text-sm">
-                  1. Check Node.js Runtime
-                </span>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
-            {nodeInstallError && (
-              <p className="text-sm text-red-600 dark:text-red-400">
-                {nodeInstallError}
-              </p>
-            )}
-            {nodeCheckError ? (
-              <p className="text-sm text-red-600 dark:text-red-400">
-                Error checking Node.js status. Please ensure node.js are
-                installed correctly and accessible in your system's PATH.
-              </p>
-            ) : isNodeSetupComplete ? (
-              <p className="text-sm">Node.js ({nodeVersion}) installed.</p>
-            ) : (
-              <div>
-                <p className="text-sm mb-3">
-                  Node.js is required to run apps locally. We also use pnpm as
-                  our package manager as it's faster and more efficient than
-                  npm.
-                </p>
-                <Button
-                  size="sm"
-                  onClick={handleNodeInstallClick}
-                  disabled={nodeInstallLoading}
-                >
-                  {nodeInstallLoading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Installing...
-                    </>
-                  ) : (
-                    "Install Node.js Runtime"
-                  )}
-                </Button>
-              </div>
-            )}
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem
-          value="ai-setup"
-          disabled={!isNodeSetupComplete}
-          className={cn(
-            isAiProviderSetup
-              ? "bg-green-50 dark:bg-green-900/30"
-              : "bg-yellow-50 dark:bg-yellow-900/30",
-            !isNodeSetupComplete ? "opacity-60" : ""
-          )}
-        >
-          <AccordionTrigger
+          <AccordionItem
+            value="node-setup"
             className={cn(
-              "px-4 py-3 transition-colors w-full hover:no-underline",
-              !isNodeSetupComplete ? "cursor-not-allowed" : ""
+              nodeCheckError
+                ? "bg-red-50 dark:bg-red-900/30"
+                : isNodeSetupComplete
+                ? "bg-green-50 dark:bg-green-900/30"
+                : "bg-yellow-50 dark:bg-yellow-900/30"
             )}
-            onClick={(e) => !isNodeSetupComplete && e.preventDefault()}
           >
-            <div className="flex items-center justify-between w-full">
-              <div className="flex items-center gap-3">
-                {getStatusIcon(isAiProviderSetup)}
-                <span className="font-medium text-sm">
-                  2. Setup AI Model Access
-                </span>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
-            <p className="text-sm mb-3">
-              Connect your preferred AI provider to start generating code.
-            </p>
-            <div
-              className="p-3 bg-blue-50 dark:bg-blue-900/50 border border-blue-200 dark:border-blue-700 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/70 transition-colors"
-              onClick={handleAiSetupClick}
-              role="button"
-              tabIndex={isNodeSetupComplete ? 0 : -1}
-              onKeyDown={(e) =>
-                isNodeSetupComplete && e.key === "Enter" && handleAiSetupClick()
-              }
-            >
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex items-center gap-2">
-                  <div className="bg-blue-100 dark:bg-blue-800 p-1.5 rounded-full">
-                    <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                  </div>
-                  <div>
-                    <h4 className="font-medium text-sm text-blue-800 dark:text-blue-300">
-                      Setup Google Gemini API Key
-                    </h4>
-                    <p className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1">
-                      <GiftIcon className="w-3 h-3" />
-                      Use Google Gemini for free
-                    </p>
-                  </div>
+            <AccordionTrigger className="px-4 py-3 transition-colors w-full hover:no-underline">
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-3">
+                  {getStatusIcon(isNodeSetupComplete, nodeCheckError)}
+                  <span className="font-medium text-sm">
+                    1. Install Node.js
+                  </span>
                 </div>
-                <ChevronRight className="w-4 h-4 text-blue-600 dark:text-blue-400" />
               </div>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
+              {nodeCheckError && (
+                <p className="text-sm text-red-600 dark:text-red-400">
+                  Error checking Node.js status. Try installing Node.js.
+                </p>
+              )}
+              {isNodeSetupComplete ? (
+                <p className="text-sm">
+                  Node.js ({nodeSystemInfo!.nodeVersion}) installed.{" "}
+                  {nodeSystemInfo!.pnpmVersion && (
+                    <span className="text-xs text-gray-500">
+                      pnpm ({nodeSystemInfo!.pnpmVersion}) installed.
+                    </span>
+                  )}
+                </p>
+              ) : (
+                <div className="text-sm">
+                  <p>Node.js is required to run apps locally.</p>
+                  <p className="mb-3">
+                    After you have installed node.js, click "Finish setup" to
+                    restart Dyad.
+                  </p>
+                  {nodeInstallLoading ? (
+                    <Button onClick={finishNodeInstallAndRestart}>
+                      Finish setup and restart Dyad
+                    </Button>
+                  ) : (
+                    <Button onClick={handleNodeInstallClick}>
+                      Install Node.js Runtime
+                    </Button>
+                  )}
+                </div>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem
+            value="ai-setup"
+            className={cn(
+              isAnyProviderSetup()
+                ? "bg-green-50 dark:bg-green-900/30"
+                : "bg-yellow-50 dark:bg-yellow-900/30"
+            )}
+          >
+            <AccordionTrigger
+              className={cn(
+                "px-4 py-3 transition-colors w-full hover:no-underline"
+              )}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-3">
+                  {getStatusIcon(isAnyProviderSetup())}
+                  <span className="font-medium text-sm">
+                    2. Setup AI Model Access
+                  </span>
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
+              <p className="text-sm mb-3">
+                Connect your preferred AI provider to start generating code.
+              </p>
+              <div
+                className="p-3 bg-blue-50 dark:bg-blue-900/50 border border-blue-200 dark:border-blue-700 rounded-lg cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/70 transition-colors"
+                onClick={handleAiSetupClick}
+                role="button"
+                tabIndex={isNodeSetupComplete ? 0 : -1}
+                onKeyDown={(e) =>
+                  isNodeSetupComplete &&
+                  e.key === "Enter" &&
+                  handleAiSetupClick()
+                }
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2">
+                    <div className="bg-blue-100 dark:bg-blue-800 p-1.5 rounded-full">
+                      <Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    </div>
+                    <div>
+                      <h4 className="font-medium text-sm text-blue-800 dark:text-blue-300">
+                        Setup Google Gemini API Key
+                      </h4>
+                      <p className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1">
+                        <GiftIcon className="w-3 h-3" />
+                        Use Google Gemini for free
+                      </p>
+                    </div>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </>
   );
 }
diff --git a/src/ipc/handlers/node_handlers.ts b/src/ipc/handlers/node_handlers.ts
index 6131ac9..0732e00 100644
--- a/src/ipc/handlers/node_handlers.ts
+++ b/src/ipc/handlers/node_handlers.ts
@@ -1,58 +1,12 @@
-import { ipcMain } from "electron";
+import { ipcMain, app } from "electron";
 import { spawn } from "child_process";
-import { platform } from "os";
-import { InstallNodeResult } from "../ipc_types";
-type ShellResult =
-  | {
-      success: true;
-      output: string;
-    }
-  | {
-      success: false;
-      errorMessage: string;
-    };
-
-function runShell(command: string): Promise<ShellResult> {
-  return new Promise((resolve) => {
-    let stdout = "";
-    let stderr = "";
-    const process = spawn(command, {
-      shell: true,
-      stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
-    });
-
-    process.stdout?.on("data", (data) => {
-      stdout += data.toString();
-    });
-
-    process.stderr?.on("data", (data) => {
-      stderr += data.toString();
-    });
-
-    process.on("error", (error) => {
-      console.error(`Error executing command "${command}":`, error.message);
-      resolve({ success: false, errorMessage: error.message });
-    });
-
-    process.on("close", (code) => {
-      if (code === 0) {
-        resolve({ success: true, output: stdout.trim() });
-      } else {
-        const errorMessage =
-          stderr.trim() || `Command failed with code ${code}`;
-        console.error(
-          `Command "${command}" failed with code ${code}: ${stderr.trim()}`
-        );
-        resolve({ success: false, errorMessage });
-      }
-    });
-  });
-}
+import { platform, arch } from "os";
+import { NodeSystemInfo } from "../ipc_types";
 
 function checkCommandExists(command: string): Promise<string | null> {
   return new Promise((resolve) => {
     let output = "";
-    const process = spawn(command, ["--version"], {
+    const process = spawn(command, {
       shell: true,
       stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
     });
@@ -87,64 +41,35 @@ function checkCommandExists(command: string): Promise<string | null> {
 }
 
 export function registerNodeHandlers() {
-  ipcMain.handle(
-    "nodejs-status",
-    async (): Promise<{
-      nodeVersion: string | null;
-      pnpmVersion: string | null;
-    }> => {
-      // Run checks in parallel
-      const [nodeVersion, pnpmVersion] = await Promise.all([
-        checkCommandExists("node"),
-        checkCommandExists("pnpm"),
-      ]);
-      return { nodeVersion, pnpmVersion };
-    }
-  );
-
-  ipcMain.handle("install-node", async (): Promise<InstallNodeResult> => {
-    console.log("Installing Node.js...");
-    if (platform() === "win32") {
-      let result = await runShell("winget install Volta.Volta");
-      if (!result.success) {
-        return { success: false, errorMessage: result.errorMessage };
-      }
-    } else {
-      let result = await runShell("curl https://get.volta.sh | bash");
-      if (!result.success) {
-        return { success: false, errorMessage: result.errorMessage };
+  ipcMain.handle("nodejs-status", async (): Promise<NodeSystemInfo> => {
+    // Run checks in parallel
+    const [nodeVersion, pnpmVersion] = await Promise.all([
+      checkCommandExists("node --version"),
+      // First, check if pnpm is installed.
+      // If not, try to install it using corepack.
+      // If both fail, then pnpm is not available.
+      checkCommandExists(
+        "pnpm --version || corepack enable pnpm && pnpm --version"
+      ),
+    ]);
+    // Default to mac download url.
+    let nodeDownloadUrl = "https://nodejs.org/dist/v22.14.0/node-v22.14.0.pkg";
+    if (platform() == "win32") {
+      if (arch() === "arm64" || arch() === "arm") {
+        nodeDownloadUrl =
+          "https://nodejs.org/dist/v22.14.0/node-v22.14.0-arm64.msi";
+      } else {
+        // x64 is the most common architecture for Windows so it's the
+        // default download url.
+        nodeDownloadUrl =
+          "https://nodejs.org/dist/v22.14.0/node-v22.14.0-x64.msi";
       }
     }
-    console.log("Installed Volta");
+    return { nodeVersion, pnpmVersion, nodeDownloadUrl };
+  });
 
-    process.env.PATH = ["~/.volta/bin", process.env.PATH].join(":");
-    console.log("Updated PATH");
-    let result = await runShell("volta install node");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    console.log("Installed Node.js (via Volta)");
-
-    result = await runShell("node --version");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    const nodeVersion = result.output.trim();
-    console.log("Node.js is setup with version", nodeVersion);
-
-    result = await runShell("corepack enable pnpm");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    console.log("Enabled pnpm");
-
-    result = await runShell("pnpm --version");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    const pnpmVersion = result.output.trim();
-    console.log("pnpm is setup with version", pnpmVersion);
-
-    return { success: true, nodeVersion, pnpmVersion };
+  ipcMain.handle("reload-dyad", async (): Promise<void> => {
+    app.relaunch();
+    app.exit(0);
   });
 }
diff --git a/src/ipc/ipc_client.ts b/src/ipc/ipc_client.ts
index ca795d3..0ccb543 100644
--- a/src/ipc/ipc_client.ts
+++ b/src/ipc/ipc_client.ts
@@ -15,6 +15,7 @@ import type {
   CreateAppResult,
   InstallNodeResult,
   ListAppsResponse,
+  NodeSystemInfo,
   SandboxConfig,
   Version,
 } from "./ipc_types";
@@ -132,6 +133,10 @@ export class IpcClient {
     return IpcClient.instance;
   }
 
+  public async reloadDyad(): Promise<void> {
+    await this.ipcRenderer.invoke("reload-dyad");
+  }
+
   // Create a new app with an initial chat
   public async createApp(params: CreateAppParams): Promise<CreateAppResult> {
     try {
@@ -493,10 +498,7 @@ export class IpcClient {
   }
 
   // Check Node.js and npm status
-  public async getNodejsStatus(): Promise<{
-    nodeVersion: string | null;
-    pnpmVersion: string | null;
-  }> {
+  public async getNodejsStatus(): Promise<NodeSystemInfo> {
     try {
       const result = await this.ipcRenderer.invoke("nodejs-status");
       return result;
@@ -506,17 +508,6 @@ export class IpcClient {
     }
   }
 
-  // Install Node.js and npm
-  public async installNode(): Promise<InstallNodeResult> {
-    try {
-      const result = await this.ipcRenderer.invoke("install-node");
-      return result;
-    } catch (error) {
-      showError(error);
-      throw error;
-    }
-  }
-
   // --- GitHub Device Flow ---
   public startGithubDeviceFlow(appId: number | null): void {
     this.ipcRenderer.invoke("github:start-flow", { appId });
diff --git a/src/ipc/ipc_types.ts b/src/ipc/ipc_types.ts
index 4e85d50..f8670c9 100644
--- a/src/ipc/ipc_types.ts
+++ b/src/ipc/ipc_types.ts
@@ -66,13 +66,8 @@ export interface SandboxConfig {
   entry: string;
 }
 
-export type InstallNodeResult =
-  | {
-      success: true;
-      nodeVersion: string;
-      pnpmVersion: string;
-    }
-  | {
-      success: false;
-      errorMessage: string;
-    };
+export interface NodeSystemInfo {
+  nodeVersion: string | null;
+  pnpmVersion: string | null;
+  nodeDownloadUrl: string;
+}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 0e8a6fc..ad7f4cc 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -84,10 +84,6 @@ export default function HomePage() {
   // Main Home Page Content
   return (
     <div className="flex flex-col items-center justify-center max-w-3xl m-auto p-8">
-      <h1 className="text-6xl font-bold mb-12 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
-        Build your dream app
-      </h1>
-
       <SetupBanner />
 
       <div className="w-full">
diff --git a/src/preload.ts b/src/preload.ts
index 692c6e5..249a37c 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -37,6 +37,7 @@ const validInvokeChannels = [
   "github:create-repo",
   "github:push",
   "get-app-version",
+  "reload-dyad",
 ] as const;
 
 // Add valid receive channels