feat: add backend framework assets and backend chat components

Author: SFARPak

src/components/backend-chat/BackendChatInput.tsx

@@ -20,7 +20,6 @@ import {
 } from "lucide-react";
 import type React from "react";
 import { useState, useEffect, useCallback } from "react";
-import log from "electron-log";
 
 import { useSettings } from "@/hooks/useSettings";
 import { IpcClient } from "@/ipc/ipc_client";
@@ -67,7 +66,6 @@ import { selectedComponentPreviewAtom } from "@/atoms/previewAtoms";
 import { SelectedComponentDisplay } from "../chat/SelectedComponentDisplay";
 
 const showTokenBarAtom = atom(false);
-const logger = log.scope("BackendChatInput");
 
 export function BackendChatInput({ chatId }: { chatId?: number }) {
   const posthog = usePostHog();
@@ -100,25 +98,6 @@ export function BackendChatInput({ chatId }: { chatId?: number }) {
     handlePaste,
   } = useAttachments();
 
-  // Auto-start backend server when entering backend mode
-  useEffect(() => {
-    const startBackendServer = async () => {
-      if (!appId) return;
-
-      try {
-        logger.info(`Auto-starting backend server for app: ${appId}`);
-        await IpcClient.getInstance().startBackendServer(appId);
-        logger.info("Backend server started successfully");
-      } catch (error) {
-        logger.error("Failed to auto-start backend server:", error);
-      }
-    };
-
-    // Small delay to ensure component is fully mounted
-    const timeoutId = setTimeout(startBackendServer, 1000);
-    return () => clearTimeout(timeoutId);
-  }, [appId]);
-
   // Use the hook to fetch the proposal
   const {
     proposalResult,
@@ -349,7 +328,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 ?? undefined} />
+              <ChatInputControls showContextFilesPicker={true} appId={appId} />
               {/* 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);
+  const messagesEndRef = useRef<HTMLDivElement | null>(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 | null>;
+  messagesEndRef: React.RefObject<HTMLDivElement>;
 }
 
 export const BackendMessagesList = forwardRef<

src/components/backend-chat/BackendVersionPane.tsx

@@ -58,12 +58,17 @@ export function BackendVersionPane({ isVisible, onClose }: BackendVersionPanePro
                     <p className="text-sm text-gray-900 dark:text-gray-100 mb-2">
                       {version.message || "Backend changes"}
                     </p>
-                    <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>
+                    {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>
                 </div>
               </div>