Update setup/settings flow for runtime

src/app/TitleBar.tsx

@@ -8,9 +8,9 @@ import { RuntimeMode } from "@/lib/schemas";
 function formatRuntimeMode(runtimeMode: RuntimeMode | undefined) {
   switch (runtimeMode) {
     case "web-sandbox":
-      return "Sandbox";
+      return "Sandboxed";
     case "local-node":
-      return "Local";
+      return "Full Access";
     default:
       return runtimeMode;
   }
@@ -33,7 +33,7 @@ export const TitleBar = () => {
       <div className="pl-24"></div>
       <div className="hidden @md:block text-sm font-medium">{displayText}</div>
       <div className="text-sm font-medium pl-4">
-        {formatRuntimeMode(settings?.runtimeMode)} runtime
+        {formatRuntimeMode(settings?.runtimeMode)} mode
       </div>
       <div className="flex-1 text-center text-sm font-medium">Dyad</div>
     </div>

src/ipc/handlers/app_handlers.ts

@@ -209,7 +209,59 @@ async function executeAppLocalNode({
   });
 }
 
+function checkCommandExists(command: string): Promise<string | null> {
+  return new Promise((resolve) => {
+    let output = "";
+    const process = spawn(command, ["--version"], {
+      shell: true,
+      stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
+    });
+
+    process.stdout?.on("data", (data) => {
+      output += data.toString();
+    });
+
+    process.stderr?.on("data", (data) => {
+      // Log stderr but don't treat it as a failure unless the exit code is non-zero
+      console.warn(
+        `Stderr from "${command} --version": ${data.toString().trim()}`
+      );
+    });
+
+    process.on("error", (error) => {
+      console.error(`Error executing command "${command}":`, error.message);
+      resolve(null); // Command execution failed
+    });
+
+    process.on("close", (code) => {
+      if (code === 0) {
+        resolve(output.trim()); // Command succeeded, return trimmed output
+      } else {
+        console.error(
+          `Command "${command} --version" failed with code ${code}`
+        );
+        resolve(null); // Command failed
+      }
+    });
+  });
+}
+
 export function registerAppHandlers() {
+  ipcMain.handle(
+    "nodejs-status",
+    async (): Promise<{
+      nodeVersion: string | null;
+      npmVersion: string | null;
+    }> => {
+      // Run checks in parallel
+      const [nodeVersion, npmVersion] = await Promise.all([
+        checkCommandExists("node"),
+        checkCommandExists("npm"),
+      ]);
+      return { nodeVersion, npmVersion };
+    }
+  );
+
   ipcMain.handle(
     "get-app-sandbox-config",
     async (_, { appId }: { appId: number }): Promise<SandboxConfig> => {

src/ipc/ipc_client.ts

@@ -488,4 +488,21 @@ export class IpcClient {
       throw error;
     }
   }
+
+  // Check Node.js and npm status
+  public async getNodejsStatus(): Promise<{
+    nodeVersion: string | null;
+    npmVersion: string | null;
+  }> {
+    try {
+      const result = await this.ipcRenderer.invoke("nodejs-status");
+      return result as {
+        nodeVersion: string | null;
+        npmVersion: string | null;
+      };
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
 }

src/pages/home.tsx

@@ -20,7 +20,7 @@ export default function HomePage() {
   const search = useSearch({ from: "/" });
   const setSelectedAppId = useSetAtom(selectedAppIdAtom);
   const { refreshApps } = useLoadApps();
-  const { settings, isAnyProviderSetup, updateSettings } = useSettings();
+  const { settings, isAnyProviderSetup } = useSettings();
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
   const [isLoading, setIsLoading] = useState(false);
   const { streamMessage } = useStreamChat();
@@ -35,10 +35,6 @@ export default function HomePage() {
     }
   }, [appId, navigate]);
 
-  const handleSetRuntimeMode = async (mode: RuntimeMode) => {
-    await updateSettings({ runtimeMode: mode });
-  };
-
   const handleSubmit = async () => {
     if (!inputValue.trim()) return;
 
@@ -90,7 +86,7 @@ export default function HomePage() {
   // Runtime Setup Flow
   // Render this only if runtimeMode is not set in settings
   if (settings?.runtimeMode === "unset") {
-    return <SetupRuntimeFlow onRuntimeSelected={handleSetRuntimeMode} />;
+    return <SetupRuntimeFlow />;
   }
 
   // Main Home Page Content (Rendered only if runtimeMode is set)

src/preload.ts

@@ -31,6 +31,7 @@ const validInvokeChannels = [
   "get-env-vars",
   "open-external-url",
   "reset-all",
+  "nodejs-status",
 ] as const;
 
 // Add valid receive channels