Simplified setup flow: user installs node.js; pnpm is configured

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,6 +98,10 @@ export function SetupBanner() {
   };
 
   return (
+    <>
+      <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"
@@ -126,45 +123,42 @@ export function SetupBanner() {
                 <div className="flex items-center gap-3">
                   {getStatusIcon(isNodeSetupComplete, nodeCheckError)}
                   <span className="font-medium text-sm">
-                  1. Check Node.js Runtime
+                    1. Install Node.js
                   </span>
                 </div>
               </div>
             </AccordionTrigger>
             <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
-            {nodeInstallError && (
+              {nodeCheckError && (
                 <p className="text-sm text-red-600 dark:text-red-400">
-                {nodeInstallError}
+                  Error checking Node.js status. Try installing Node.js.
                 </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.
+              {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>
-            ) : 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.
+                <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>
-                <Button
-                  size="sm"
-                  onClick={handleNodeInstallClick}
-                  disabled={nodeInstallLoading}
-                >
                   {nodeInstallLoading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Installing...
-                    </>
+                    <Button onClick={finishNodeInstallAndRestart}>
+                      Finish setup and restart Dyad
+                    </Button>
                   ) : (
-                    "Install Node.js Runtime"
-                  )}
+                    <Button onClick={handleNodeInstallClick}>
+                      Install Node.js Runtime
                     </Button>
+                  )}
                 </div>
               )}
             </AccordionContent>
@@ -172,24 +166,20 @@ export function SetupBanner() {
 
           <AccordionItem
             value="ai-setup"
-          disabled={!isNodeSetupComplete}
             className={cn(
-            isAiProviderSetup
+              isAnyProviderSetup()
                 ? "bg-green-50 dark:bg-green-900/30"
-              : "bg-yellow-50 dark:bg-yellow-900/30",
-            !isNodeSetupComplete ? "opacity-60" : ""
+                : "bg-yellow-50 dark:bg-yellow-900/30"
             )}
           >
             <AccordionTrigger
               className={cn(
-              "px-4 py-3 transition-colors w-full hover:no-underline",
-              !isNodeSetupComplete ? "cursor-not-allowed" : ""
+                "px-4 py-3 transition-colors w-full hover:no-underline"
               )}
-            onClick={(e) => !isNodeSetupComplete && e.preventDefault()}
             >
               <div className="flex items-center justify-between w-full">
                 <div className="flex items-center gap-3">
-                {getStatusIcon(isAiProviderSetup)}
+                  {getStatusIcon(isAnyProviderSetup())}
                   <span className="font-medium text-sm">
                     2. Setup AI Model Access
                   </span>
@@ -206,7 +196,9 @@ export function SetupBanner() {
                 role="button"
                 tabIndex={isNodeSetupComplete ? 0 : -1}
                 onKeyDown={(e) =>
-                isNodeSetupComplete && e.key === "Enter" && handleAiSetupClick()
+                  isNodeSetupComplete &&
+                  e.key === "Enter" &&
+                  handleAiSetupClick()
                 }
               >
                 <div className="flex items-center justify-between gap-3">
@@ -231,5 +223,6 @@ export function SetupBanner() {
           </AccordionItem>
         </Accordion>
       </div>
+    </>
   );
 }

src/ipc/handlers/node_handlers.ts

-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;
-    }> => {
+  ipcMain.handle("nodejs-status", async (): Promise<NodeSystemInfo> => {
     // Run checks in parallel
     const [nodeVersion, pnpmVersion] = await Promise.all([
-        checkCommandExists("node"),
-        checkCommandExists("pnpm"),
+      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"
+      ),
     ]);
-      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 };
-      }
+    // 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 {
-      let result = await runShell("curl https://get.volta.sh | bash");
-      if (!result.success) {
-        return { success: false, errorMessage: result.errorMessage };
-      }
-    }
-    console.log("Installed Volta");
-
-    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 };
+        // 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";
       }
-    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 { nodeVersion, pnpmVersion, nodeDownloadUrl };
+  });
 
-    return { success: true, nodeVersion, pnpmVersion };
+  ipcMain.handle("reload-dyad", async (): Promise<void> => {
+    app.relaunch();
+    app.exit(0);
   });
 }

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 });

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;
+}

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">

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