fix: ChatModeSelector.tsx 47 Error creating backend folder: TypeError

Author: SFARPak

src/components/ChatModeSelector.tsx

@@ -37,7 +37,7 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
 
         // If no backend files exist, create the backend folder
         if (backendFiles.length === 0) {
-          await IpcClient.getInstance().invoke("create-missing-folder", {
+          await IpcClient.getInstance().createMissingFolder({
             appId,
             folderType: "backend",
             backendFramework: settings?.selectedBackendFramework,

src/components/backend-chat/BackendChatInput.tsx

@@ -349,7 +349,7 @@ export function BackendChatInput({ chatId }: { chatId?: number }) {
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between pb-2">
             <div className="flex items-center">
-              <ChatInputControls showContextFilesPicker={true} appId={appId} />
+              <ChatInputControls showContextFilesPicker={true} appId={appId ?? undefined} />
               {/* File attachment dropdown */}
               <FileAttachmentDropdown
                 onFileSelect={handleFileSelect}

src/components/backend-chat/BackendChatPanel.tsx

@@ -25,7 +25,7 @@ export function BackendChatPanel({
   const [error, setError] = useState<string | null>(null);
   const streamCount = useAtomValue(chatStreamCountAtom);
 
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement | null>(null);
 
   // Scroll-related properties

src/components/backend-chat/BackendMessagesList.tsx

@@ -4,7 +4,7 @@ import { BackendChatMessage } from "./BackendChatMessage";
 
 interface BackendMessagesListProps {
   messages: Message[];
-  messagesEndRef: React.RefObject<HTMLDivElement>;
+  messagesEndRef: React.RefObject<HTMLDivElement | null>;
 }
 
 export const BackendMessagesList = forwardRef<

src/components/backend-chat/BackendVersionPane.tsx

@@ -58,17 +58,12 @@ export function BackendVersionPane({ isVisible, onClose }: BackendVersionPanePro
                     <p className="text-sm text-gray-900 dark:text-gray-100 mb-2">
                       {version.message || "Backend changes"}
                     </p>
-                    {version.author && (
-                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                        <GitBranch size={12} />
-                        <span>{version.author.name}</span>
-                        <span>•</span>
-                        <Clock size={12} />
-                        <span>
-                          {formatDistanceToNow(new Date(version.date), { addSuffix: true })}
-                        </span>
-                      </div>
-                    )}
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Clock size={12} />
+                      <span>
+                        {formatDistanceToNow(new Date(version.timestamp * 1000), { addSuffix: true })}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>

src/components/chat/ChatInput.tsx

@@ -317,7 +317,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between pb-2">
             <div className="flex items-center">
-              <ChatInputControls showContextFilesPicker={true} appId={appId} />
+              <ChatInputControls showContextFilesPicker={true} appId={appId ?? undefined} />
               {/* File attachment dropdown */}
               <FileAttachmentDropdown
                 onFileSelect={handleFileSelect}

src/hooks/useStreamChat.ts

@@ -62,12 +62,14 @@ export function useStreamChat({
     async ({
       prompt,
       chatId,
+      chatMode,
       redo,
       attachments,
       selectedComponent,
     }: {
       prompt: string;
       chatId: number;
+      chatMode?: "build" | "ask" | "backend";
       redo?: boolean;
       attachments?: FileAttachment[];
       selectedComponent?: ComponentSelection | null;
@@ -87,6 +89,7 @@ export function useStreamChat({
         IpcClient.getInstance().streamMessage(prompt, {
           selectedComponent: selectedComponent ?? null,
           chatId,
+          chatMode,
           redo,
           attachments,
           onUpdate: (updatedMessages: Message[]) => {

src/ipc/handlers/app_handlers.ts

@@ -612,7 +612,6 @@ export function registerAppHandlers() {
                 dir: fullAppPath,
                 ref: 'main',
                 force: true,
-                create: true,
               });
             } catch (createError) {
               logger.warn(`Failed to create main branch:`, createError);
@@ -769,7 +768,7 @@ export function registerAppHandlers() {
         // Only create backend folder
         const backendPath = path.join(fullAppPath, "backend");
         if (!fs.existsSync(backendPath)) {
-          await fs.ensureDir(backendPath);
+          await fsPromises.mkdir(backendPath, { recursive: true });
           await setupBackendFramework(backendPath, backendFramework);
 
           // Install dependencies for the backend framework

src/ipc/ipc_client.ts

@@ -1213,4 +1213,9 @@ export class IpcClient {
   public async startBackendServer(appId: number): Promise<void> {
     return this.ipcRenderer.invoke("start-backend-server", appId);
   }
+
+  // Create missing folder (frontend or backend)
+  public async createMissingFolder(params: { appId: number; folderType: "frontend" | "backend"; templateId?: string; backendFramework?: string }): Promise<void> {
+    return this.ipcRenderer.invoke("create-missing-folder", params);
+  }
 }