From 9f8302a0b88155a5f70e112b4146d05a5f075593 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Sat, 12 Apr 2025 22:34:11 -0700
Subject: [PATCH] very simple nav setup to support sandbox mode

---
 .../preview_panel/PreviewIframe.tsx           | 44 +++++++++++++++----
 worker/static_file_server.js                  | 10 +++--
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx
index 87f3afb..f56def7 100644
--- a/src/components/preview_panel/PreviewIframe.tsx
+++ b/src/components/preview_panel/PreviewIframe.tsx
@@ -1,5 +1,5 @@
 import { selectedAppIdAtom, appUrlAtom, appOutputAtom } from "@/atoms/appAtoms";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useRunApp } from "@/hooks/useRunApp";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -287,6 +287,8 @@ export const PreviewIframe = ({
       // Navigate to the URL
       iframeRef.current.contentWindow.location.href = newUrl;
 
+      // iframeRef.current.src = newUrl;
+
       // Update navigation history
       const newHistory = [
         ...navigationHistory.slice(0, currentHistoryPosition + 1),
@@ -321,14 +323,24 @@ export const PreviewIframe = ({
         <div className="flex space-x-1">
           <button
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
-            disabled={!canGoBack || loading || !selectedAppId}
+            disabled={
+              !canGoBack ||
+              loading ||
+              !selectedAppId ||
+              settings?.runtimeMode === "web-sandbox"
+            }
             onClick={handleNavigateBack}
           >
             <ArrowLeft size={16} />
           </button>
           <button
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
-            disabled={!canGoForward || loading || !selectedAppId}
+            disabled={
+              !canGoForward ||
+              loading ||
+              !selectedAppId ||
+              settings?.runtimeMode === "web-sandbox"
+            }
             onClick={handleNavigateForward}
           >
             <ArrowRight size={16} />
@@ -380,6 +392,12 @@ export const PreviewIframe = ({
         {/* Action Buttons */}
         <div className="flex space-x-1">
           <button
+            title={
+              settings?.runtimeMode === "web-sandbox"
+                ? "Open in browser (disabled in sandbox mode)"
+                : undefined
+            }
+            disabled={settings?.runtimeMode === "web-sandbox"}
             onClick={() => {
               if (appUrl) {
                 IpcClient.getInstance().openExternalUrl(appUrl);
@@ -402,7 +420,7 @@ export const PreviewIframe = ({
         />
 
         {settings?.runtimeMode === "web-sandbox" ? (
-          <SandpackIframe reloadKey={reloadKey} />
+          <SandpackIframe reloadKey={reloadKey} iframeRef={iframeRef} />
         ) : !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" />
@@ -431,7 +449,14 @@ const parseTailwindConfig = (config: string) => {
   return `{theme: ${match[1]}};`;
 };
 
-const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
+const SandpackIframe = ({
+  reloadKey,
+  iframeRef,
+}: {
+  reloadKey: number;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}) => {
+  const [appUrlObj, setAppUrlObj] = useAtom(appUrlAtom);
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const { app } = useLoadApp(selectedAppId);
   const keyRef = useRef<number | null>(null);
@@ -453,9 +478,9 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
     if (!iframeRef.current || !app) return;
 
     const sandpackConfig: SandboxSetup = mapSandpackConfig(sandboxConfig);
-
+    const url = "http://localhost:31111";
     const options: ClientOptions = {
-      bundlerURL: "http://localhost:31111",
+      bundlerURL: url,
       showOpenInCodeSandbox: false,
       showLoadingScreen: true,
       showErrorScreen: true,
@@ -469,6 +494,10 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
         sandpackConfig,
         options
       );
+      setAppUrlObj({
+        appUrl: url,
+        appId: selectedAppId,
+      });
       sandpackClientRef.current = client;
       return client;
     } catch (error) {
@@ -494,7 +523,6 @@ const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
     if (!iframeRef.current || !app || !selectedAppId) return;
     loadSandpack();
   }, [reloadKey]);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   return (
     <iframe
diff --git a/worker/static_file_server.js b/worker/static_file_server.js
index d38559d..03aeb02 100644
--- a/worker/static_file_server.js
+++ b/worker/static_file_server.js
@@ -115,9 +115,13 @@ const handleRequest = (config) => async (req, res) => {
       path.join(config.rootDir, parsedUrl.pathname)
     );
 
-    // Handle root path or directory paths, serve index.html
-    if (filePath === path.normalize(config.rootDir) || filePath.endsWith("/")) {
-      filePath = path.join(filePath, "index.html");
+    // Handle root path, directory paths, or paths without file extensions by serving index.html
+    if (
+      filePath === path.normalize(config.rootDir) ||
+      filePath.endsWith("/") ||
+      !path.extname(filePath)
+    ) {
+      filePath = path.join(config.rootDir, "index.html");
     }
 
     // Check if file exists and get its stats