working sandpack

package-lock.json

@@ -13,6 +13,7 @@
         "@ai-sdk/google": "^1.2.10",
         "@ai-sdk/openai": "^1.3.7",
         "@biomejs/biome": "^1.9.4",
+        "@codesandbox/sandpack-client": "^2.19.8",
         "@monaco-editor/react": "^4.7.0-rc.0",
         "@openrouter/ai-sdk-provider": "^0.4.5",
         "@radix-ui/react-accordion": "^1.2.4",
@@ -834,6 +835,54 @@
         "node": ">=14.21.3"
       }
     },
+    "node_modules/@codesandbox/nodebox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz",
+      "integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==",
+      "license": "SEE LICENSE IN ./LICENSE",
+      "dependencies": {
+        "outvariant": "^1.4.0",
+        "strict-event-emitter": "^0.4.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client": {
+      "version": "2.19.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz",
+      "integrity": "sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@codesandbox/nodebox": "0.1.8",
+        "buffer": "^6.0.3",
+        "dequal": "^2.0.2",
+        "mime-db": "^1.52.0",
+        "outvariant": "1.4.0",
+        "static-browser-server": "1.0.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/@drizzle-team/brocli": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz",
@@ -3581,6 +3630,12 @@
         "@octokit/openapi-types": "^12.11.0"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "license": "MIT"
+    },
     "node_modules/@openrouter/ai-sdk-provider": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/@openrouter/ai-sdk-provider/-/ai-sdk-provider-0.4.5.tgz",
@@ -16186,6 +16241,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
+      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+      "license": "MIT"
+    },
     "node_modules/own-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
@@ -18425,6 +18486,18 @@
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
       "license": "MIT"
     },
+    "node_modules/static-browser-server": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
+      "integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.1.0",
+        "dotenv": "^16.0.3",
+        "mime-db": "^1.52.0",
+        "outvariant": "^1.3.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -18451,6 +18524,12 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
+      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "start": "electron-forge start",
-    "package": "electron-forge package",
+    "package": "rm -rf out && rm -rf scaffold/node_modules && electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
     "ts": "yarn tsc -p tsconfig.app.json --noEmit",
@@ -62,6 +62,7 @@
     "@ai-sdk/google": "^1.2.10",
     "@ai-sdk/openai": "^1.3.7",
     "@biomejs/biome": "^1.9.4",
+    "@codesandbox/sandpack-client": "^2.19.8",
     "@monaco-editor/react": "^4.7.0-rc.0",
     "@openrouter/ai-sdk-provider": "^0.4.5",
     "@radix-ui/react-accordion": "^1.2.4",

scaffold/src/main.tsx

@@ -1,5 +1,5 @@
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import App from './App.tsx'
+import App from "./App.tsx";
-import './index.css'
+import "./globals.css";
 
 createRoot(document.getElementById("root")!).render(<App />);

scaffold/tailwind.config.ts

@@ -12,85 +12,85 @@ export default {
   theme: {
     container: {
       center: true,
-			padding: '2rem',
+      padding: "2rem",
       screens: {
-				'2xl': '1400px'
+        "2xl": "1400px",
-			}
+      },
     },
     extend: {
       colors: {
-				border: 'hsl(var(--border))',
+        border: "hsl(var(--border))",
-				input: 'hsl(var(--input))',
+        input: "hsl(var(--input))",
-				ring: 'hsl(var(--ring))',
+        ring: "hsl(var(--ring))",
-				background: 'hsl(var(--background))',
+        background: "hsl(var(--background))",
-				foreground: 'hsl(var(--foreground))',
+        foreground: "hsl(var(--foreground))",
         primary: {
-					DEFAULT: 'hsl(var(--primary))',
+          DEFAULT: "hsl(var(--primary))",
-					foreground: 'hsl(var(--primary-foreground))'
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
+          DEFAULT: "hsl(var(--secondary))",
-					foreground: 'hsl(var(--secondary-foreground))'
+          foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: "hsl(var(--destructive))",
-					foreground: 'hsl(var(--destructive-foreground))'
+          foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
-					DEFAULT: 'hsl(var(--muted))',
+          DEFAULT: "hsl(var(--muted))",
-					foreground: 'hsl(var(--muted-foreground))'
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-					DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: "hsl(var(--accent))",
-					foreground: 'hsl(var(--accent-foreground))'
+          foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
-					DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: "hsl(var(--popover))",
-					foreground: 'hsl(var(--popover-foreground))'
+          foreground: "hsl(var(--popover-foreground))",
         },
         card: {
-					DEFAULT: 'hsl(var(--card))',
+          DEFAULT: "hsl(var(--card))",
-					foreground: 'hsl(var(--card-foreground))'
+          foreground: "hsl(var(--card-foreground))",
         },
         sidebar: {
-					DEFAULT: 'hsl(var(--sidebar-background))',
+          DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: 'hsl(var(--sidebar-foreground))',
+          foreground: "hsl(var(--sidebar-foreground))",
-					primary: 'hsl(var(--sidebar-primary))',
+          primary: "hsl(var(--sidebar-primary))",
-					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: 'hsl(var(--sidebar-accent))',
+          accent: "hsl(var(--sidebar-accent))",
-					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: 'hsl(var(--sidebar-border))',
+          border: "hsl(var(--sidebar-border))",
-					ring: 'hsl(var(--sidebar-ring))'
+          ring: "hsl(var(--sidebar-ring))",
-				}
+        },
       },
       borderRadius: {
-				lg: 'var(--radius)',
+        lg: "var(--radius)",
-				md: 'calc(var(--radius) - 2px)',
+        md: "calc(var(--radius) - 2px)",
-				sm: 'calc(var(--radius) - 4px)'
+        sm: "calc(var(--radius) - 4px)",
       },
       keyframes: {
-				'accordion-down': {
+        "accordion-down": {
           from: {
-						height: '0'
+            height: "0",
           },
           to: {
-						height: 'var(--radix-accordion-content-height)'
+            height: "var(--radix-accordion-content-height)",
-					}
           },
-				'accordion-up': {
+        },
+        "accordion-up": {
           from: {
-						height: 'var(--radix-accordion-content-height)'
+            height: "var(--radix-accordion-content-height)",
           },
           to: {
-						height: '0'
+            height: "0",
-					}
+          },
-				}
+        },
       },
       animation: {
-				'accordion-down': 'accordion-down 0.2s ease-out',
+        "accordion-down": "accordion-down 0.2s ease-out",
-				'accordion-up': 'accordion-up 0.2s ease-out'
+        "accordion-up": "accordion-up 0.2s ease-out",
-			}
+      },
-		}
+    },
   },
   plugins: [require("tailwindcss-animate")],
 } satisfies Config;

src/components/chat/ChatInput.tsx

@@ -30,7 +30,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
     if (textarea) {
       textarea.style.height = "0px";
       const scrollHeight = textarea.scrollHeight;
-      console.log("scrollHeight", scrollHeight);
       textarea.style.height = `${scrollHeight + 4}px`;
     }
   };

src/components/chat/ChatMessage.tsx

@@ -8,8 +8,8 @@ interface ChatMessageProps {
   message: Message;
 }
 
-const ChatMessage = memo(
+const ChatMessage = ({ message }: ChatMessageProps) => {
-  ({ message }: ChatMessageProps) => {
+  const { isStreaming } = useStreamChat();
   return (
     <div
       className={`flex ${
@@ -23,7 +23,7 @@ const ChatMessage = memo(
             : "bg-(--sidebar-accent)"
         }`}
       >
-          {message.role === "assistant" && !message.content ? (
+        {message.role === "assistant" && !message.content && isStreaming ? (
           <div className="flex h-6 items-center space-x-2 p-2">
             <motion.div
               className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
@@ -69,12 +69,6 @@ const ChatMessage = memo(
       </div>
     </div>
   );
-  },
+};
-  (prevProps, nextProps) => {
-    return prevProps.message.content === nextProps.message.content;
-  }
-);
-
-ChatMessage.displayName = "ChatMessage";
 
 export default ChatMessage;

src/components/chat/DyadAddDependency.tsx

@@ -28,7 +28,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
 }) => {
   // Extract package attribute from the node if available
   const packages = node?.properties?.packages?.split(" ") || "";
-  console.log("packages", packages);
   const [isInstalling, setIsInstalling] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const selectedChatId = useAtomValue(selectedChatIdAtom);

src/components/preview_panel/PreviewIframe.tsx

@@ -24,6 +24,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useSettings } from "@/hooks/useSettings";
+import {
+  loadSandpackClient,
+  type SandboxSetup,
+  type ClientOptions,
+  SandpackClient,
+} from "@codesandbox/sandpack-client";
+import { showError } from "@/lib/toast";
+import { SandboxConfig } from "@/ipc/ipc_types";
 
 interface ErrorBannerProps {
   error: string | null;
@@ -107,7 +116,6 @@ export const PreviewIframe = ({
   // Effect to parse routes from the router file
   useEffect(() => {
     if (routerContent) {
-      console.log("routerContent", routerContent);
       try {
         const routes: Array<{ path: string; label: string }> = [];
 
@@ -148,6 +156,7 @@ export const PreviewIframe = ({
   const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
   const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { settings } = useSettings();
 
   // Add message listener for iframe errors and navigation events
   useEffect(() => {
@@ -392,7 +401,9 @@ export const PreviewIframe = ({
           }}
         />
 
-        {!appUrl ? (
+        {settings?.runtimeMode === "web-sandbox" ? (
+          <SandpackIframe reloadKey={reloadKey} />
+        ) : !appUrl ? (
           <div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 bg-gray-50 dark:bg-gray-950">
             <Loader2 className="w-8 h-8 animate-spin text-gray-400 dark:text-gray-500" />
             <p className="text-gray-600 dark:text-gray-300">
@@ -412,3 +423,120 @@ export const PreviewIframe = ({
     </div>
   );
 };
+
+const parseTailwindConfig = (config: string) => {
+  const themeRegex = /theme\s*:\s*(\{[\s\S]*?\})(?=\s*,\s*plugins)/;
+  const match = config.match(themeRegex);
+  if (!match) return "{};";
+  return `{theme: ${match[1]}};`;
+};
+
+const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const { app } = useLoadApp(selectedAppId);
+  const keyRef = useRef<number | null>(null);
+  const isFirstRender = useRef(true);
+  const sandpackClientRef = useRef<SandpackClient | null>(null);
+
+  async function loadSandpack() {
+    if (keyRef.current === reloadKey) return;
+    keyRef.current = reloadKey;
+
+    if (!iframeRef.current || !app || !selectedAppId) return;
+    const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
+      selectedAppId
+    );
+
+    const sandpackConfig: SandboxSetup = mapSandpackConfig(sandboxConfig);
+
+    const options: ClientOptions = {
+      // bundlerURL: "https://sandpack.dyad.sh/",
+      showOpenInCodeSandbox: false,
+      showLoadingScreen: true,
+      showErrorScreen: true,
+      externalResources: [
+        // "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+        "https://cdn.tailwindcss.com",
+      ],
+    };
+
+    let client: SandpackClient | undefined;
+    try {
+      client = await loadSandpackClient(
+        iframeRef.current,
+        sandpackConfig,
+        options
+      );
+      sandpackClientRef.current = client;
+      return client;
+    } catch (error) {
+      showError(error);
+    }
+  }
+
+  useEffect(() => {
+    async function updateSandpack() {
+      if (sandpackClientRef.current && selectedAppId) {
+        const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
+          selectedAppId
+        );
+        sandpackClientRef.current.updateSandbox(
+          mapSandpackConfig(sandboxConfig)
+        );
+      }
+    }
+    updateSandpack();
+  }, [app]);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!iframeRef.current || !app || !selectedAppId) return () => {};
+
+    const clientPromise = loadSandpack();
+    return () => {
+      clientPromise.then((client) => {
+        client?.destroy();
+        sandpackClientRef.current = null;
+      });
+    };
+  }, [reloadKey]);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className="w-full h-full border-none bg-gray-50"
+    ></iframe>
+  );
+};
+
+const mapSandpackConfig = (sandboxConfig: SandboxConfig): SandboxSetup => {
+  return {
+    files: Object.fromEntries(
+      Object.entries(sandboxConfig.files).map(([key, value]) => [
+        key,
+        {
+          code: value.replace(
+            "import './globals.css'",
+            `
+const injectedStyle = document.createElement("style");
+injectedStyle.textContent = \`${sandboxConfig.files["src/globals.css"]}\`;
+injectedStyle.type = "text/tailwindcss";
+document.head.appendChild(injectedStyle);
+
+window.tailwind.config = ${parseTailwindConfig(
+              sandboxConfig.files["tailwind.config.ts"]
+            )}
+`
+          ),
+        },
+      ])
+    ),
+    dependencies: sandboxConfig.dependencies,
+    entry: sandboxConfig.entry,
+  };
+};

src/hooks/useLoadVersions.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useAtom } from "jotai";
 import { versionsListAtom } from "@/atoms/appAtoms";
 import { IpcClient } from "@/ipc/ipc_client";
@@ -34,7 +34,7 @@ export function useLoadVersions(appId: number | null) {
     loadVersions();
   }, [appId, setVersions]);
 
-  const refreshVersions = async () => {
+  const refreshVersions = useCallback(async () => {
     if (appId === null) {
       return;
     }
@@ -48,7 +48,7 @@ export function useLoadVersions(appId: number | null) {
       console.error("Error refreshing versions:", error);
       setError(error instanceof Error ? error : new Error(String(error)));
     }
-  };
+  }, [appId, setVersions, setError]);
 
   return { versions, loading, error, refreshVersions };
 }

src/ipc/handlers/app_handlers.ts

@@ -2,7 +2,12 @@ import { ipcMain } from "electron";
 import { db, getDatabasePath } from "../../db";
 import { apps, chats } from "../../db/schema";
 import { desc, eq } from "drizzle-orm";
-import type { App, CreateAppParams, Version } from "../ipc_types";
+import type {
+  App,
+  CreateAppParams,
+  SandboxConfig,
+  Version,
+} from "../ipc_types";
 import fs from "node:fs";
 import path from "node:path";
 import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
@@ -25,6 +30,7 @@ import {
 } from "../utils/process_manager";
 import { ALLOWED_ENV_VARS } from "../../constants/models";
 import { getEnvVar } from "../utils/read_env";
+import { readSettings } from "../../main/settings";
 
 async function executeApp({
   appPath,
@@ -34,7 +40,26 @@ async function executeApp({
   appPath: string;
   appId: number;
   event: Electron.IpcMainInvokeEvent;
-}): Promise<{ processId: number }> {
+}): Promise<void> {
+  const settings = readSettings();
+  if (settings.runtimeMode === "web-sandbox") {
+    return;
+  }
+  if (settings.runtimeMode === "local-node") {
+    await executeAppLocalNode({ appPath, appId, event });
+    return;
+  }
+  throw new Error("Invalid runtime mode");
+}
+async function executeAppLocalNode({
+  appPath,
+  appId,
+  event,
+}: {
+  appPath: string;
+  appId: number;
+  event: Electron.IpcMainInvokeEvent;
+}): Promise<void> {
   const process = spawn("npm install && npm run dev", [], {
     cwd: appPath,
     shell: true,
@@ -99,11 +124,43 @@ async function executeApp({
     // Note: We don't throw here as the error is asynchronous. The caller got a success response already.
     // Consider adding ipcRenderer event emission to notify UI of the error.
   });
-
-  return { processId: currentProcessId };
 }
 
 export function registerAppHandlers() {
+  ipcMain.handle(
+    "get-app-sandbox-config",
+    async (_, { appId }: { appId: number }): Promise<SandboxConfig> => {
+      const app = await db.query.apps.findFirst({
+        where: eq(apps.id, appId),
+      });
+      if (!app) {
+        throw new Error("App not found");
+      }
+      const appPath = getDyadAppPath(app.path);
+      const files = getFilesRecursively(appPath, appPath);
+
+      const filesMap = await Promise.all(
+        files.map(async (file) => {
+          const content = await fs.promises.readFile(
+            path.join(appPath, file),
+            "utf-8"
+          );
+          return { [file]: content };
+        })
+      );
+
+      // Get dependencies from package.json
+      const packageJsonPath = path.join(appPath, "package.json");
+      const packageJson = await fs.promises.readFile(packageJsonPath, "utf-8");
+      const dependencies = JSON.parse(packageJson).dependencies;
+
+      return {
+        files: filesMap.reduce((acc, file) => ({ ...acc, ...file }), {}),
+        dependencies,
+        entry: "src/main.tsx",
+      };
+    }
+  );
   ipcMain.handle("create-app", async (_, params: CreateAppParams) => {
     const appPath = params.name;
     const fullAppPath = getDyadAppPath(appPath);
@@ -272,7 +329,6 @@ export function registerAppHandlers() {
         console.debug(`Starting app ${appId} in path ${app.path}`);
 
         const appPath = getDyadAppPath(app.path);
-        console.log("appPath-CWD", appPath);
         try {
           const currentProcessId = await executeApp({ appPath, appId, event });
 
@@ -379,9 +435,9 @@ export function registerAppHandlers() {
           const appPath = getDyadAppPath(app.path);
           console.debug(`Starting app ${appId} in path ${app.path}`);
 
-          const currentProcessId = await executeApp({ appPath, appId, event });
+          await executeApp({ appPath, appId, event });
 
-          return { success: true, processId: currentProcessId };
+          return { success: true };
         } catch (error) {
           console.error(`Error restarting app ${appId}:`, error);
           throw error;

src/ipc/ipc_client.ts

@@ -14,6 +14,7 @@ import type {
   CreateAppParams,
   CreateAppResult,
   ListAppsResponse,
+  SandboxConfig,
   Version,
 } from "./ipc_types";
 import { showError } from "@/lib/toast";
@@ -127,6 +128,18 @@ export class IpcClient {
     }
   }
 
+  public async getAppSandboxConfig(appId: number): Promise<SandboxConfig> {
+    try {
+      const data = await this.ipcRenderer.invoke("get-app-sandbox-config", {
+        appId,
+      });
+      return data;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+
   public async getApp(appId: number): Promise<App> {
     try {
       const data = await this.ipcRenderer.invoke("get-app", appId);

src/ipc/ipc_types.ts

@@ -57,3 +57,9 @@ export interface Version {
   message: string;
   timestamp: number;
 }
+
+export interface SandboxConfig {
+  files: Record<string, string>;
+  dependencies: Record<string, string>;
+  entry: string;
+}

src/preload.ts

@@ -15,6 +15,7 @@ const validInvokeChannels = [
   "get-chats",
   "list-apps",
   "get-app",
+  "get-app-sandbox-config",
   "edit-app-file",
   "read-app-file",
   "run-app",