Preview not working

Author: SFARPak

package-lock.json

@@ -4,6 +4,7 @@ import { chatMessagesAtom, chatStreamCountAtom } from "../atoms/chatAtoms";
 import { isTodoPanelOpenAtom } from "../atoms/todoAtoms";
 import { IpcClient } from "@/ipc/ipc_client";
 import { useSettings } from "@/hooks/useSettings";
+import { AppOutput } from "@/ipc/ipc_types";
 
 import { ChatHeader } from "./chat/ChatHeader";
 import { MessagesList } from "./chat/MessagesList";
@@ -37,6 +38,9 @@ export function ChatPanel({
   const [error, setError] = useState<string | null>(null);
   const streamCount = useAtomValue(chatStreamCountAtom);
 
+  // State to track system messages for auto-scrolling
+  const [systemMessageCount, setSystemMessageCount] = useState(0);
+
   // Debug logging
   console.log("ChatPanel render:", { isBackendMode, isFullstackMode, isFrontendMode, isTodoPanelOpen, showTodoToggle: isFullstackMode || isFrontendMode });
   // Reference to store the processed prompt so we don't submit it twice
@@ -79,6 +83,43 @@ export function ChatPanel({
     scrollToBottom();
   }, [streamCount]);
 
+  // Set up system message handler for auto-scrolling
+  useEffect(() => {
+    const handleAppOutput = (output: AppOutput) => {
+      // Increment counter to trigger auto-scroll for system messages
+      setSystemMessageCount(prev => prev + 1);
+    };
+
+    // Register the callback with IpcClient
+    if (chatId) {
+      IpcClient.getInstance().runApp(chatId, handleAppOutput);
+    }
+
+    // Cleanup function
+    return () => {
+      if (chatId) {
+        IpcClient.getInstance().stopApp(chatId);
+      }
+    };
+  }, [chatId]);
+
+  // Auto-scroll when system messages arrive
+  useEffect(() => {
+    if (!isUserScrolling && systemMessageCount > 0) {
+      const { scrollTop, clientHeight, scrollHeight } =
+        messagesContainerRef.current || { scrollTop: 0, clientHeight: 0, scrollHeight: 0 };
+      const threshold = 280;
+      const isNearBottom =
+        scrollHeight - (scrollTop + clientHeight) <= threshold;
+
+      if (isNearBottom) {
+        requestAnimationFrame(() => {
+          scrollToBottom("instant");
+        });
+      }
+    }
+  }, [systemMessageCount, isUserScrolling]);
+
   useEffect(() => {
     const container = messagesContainerRef.current;
     if (container) {

src/components/ChatPanel.tsx

@@ -557,19 +557,27 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
             </p>
           </div>
         ) : (
-          <iframe
-            sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-downloads"
-            data-testid="preview-iframe-element"
-            onLoad={() => {
-              setErrorMessage(undefined);
-            }}
-            ref={iframeRef}
-            key={reloadKey}
-            title={`Preview for App ${selectedAppId}`}
-            className="w-full h-full border-none bg-white dark:bg-gray-950"
-            src={appUrl}
-            allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture"
-          />
+          <>
+            {console.log(`[IFRAME] Rendering with URL: ${appUrl}`)}
+            <iframe
+              sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-downloads"
+              data-testid="preview-iframe-element"
+              onLoad={() => {
+                console.log(`[IFRAME] Successfully loaded URL: ${appUrl}`);
+                setErrorMessage(undefined);
+              }}
+              onError={(e) => {
+                console.error(`[IFRAME] Error loading: ${appUrl}`, e);
+                setErrorMessage(`Failed to load app preview: ${e}`);
+              }}
+              ref={iframeRef}
+              key={reloadKey}
+              title={`Preview for App ${selectedAppId}`}
+              className="w-full h-full border-none bg-white dark:bg-gray-950"
+              src={appUrl}
+              allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture"
+            />
+          </>
         )}
       </div>
     </div>

src/components/preview_panel/PreviewIframe.tsx

@@ -73,16 +73,14 @@ export function PreviewPanel() {
   useEffect(() => {
     if (
       settings?.selectedChatMode === "backend" &&
-      previewMode === "preview" &&
-      settings?.fullstackDevelopmentMode !== true
+      previewMode === "preview"
     ) {
       setPreviewMode("code");
     }
   }, [
     settings?.selectedChatMode,
     previewMode,
     setPreviewMode,
-    settings?.fullstackDevelopmentMode,
   ]);
 
 

src/components/preview_panel/PreviewPanel.tsx

@@ -33,6 +33,7 @@ export function useRunApp() {
       const proxyUrl = newFormatMatch[1];
       const localPort = newFormatMatch[2];
       const originalUrl = `http://localhost:${localPort}`;
+      console.log(`[PROXY] Setting app URL to proxy: ${proxyUrl} (original: ${originalUrl})`);
       setAppUrlObj({
         appUrl: proxyUrl,
         appId: output.appId,