feat: correctly show whether a project has been deployed

### Summary
- Added a new "Apply" button to code snippets provided by the AI assistant.
- The button is designed to seamlessly merge the AI-generated snippet into the relevant file in the editor.

### Current Issues
1. **Sticky Accept/Decline Buttons:** These activate for every snippet instead of being limited to the relevant snippet.
2. **Discard Button:** Currently non-functional.
3. **Highlight Inconsistencies:** The green-red code highlights for old and new code are inconsistent.

### To Do
- Implement a toast notification when the "Apply" button is pressed on an irrelevant tab to prevent code application errors.

### Workflow Implemented
1. The "Apply" button is added alongside "Copy" and "Reply" for AI-generated code snippets.
2. Upon clicking "Apply," the code snippet and relevant file content (active file) are sent to a secondary model (GPT-4O).
3. The system prompt for GPT-4O instructs it to merge the snippet with the file content:
   - Ensure the original file functionality remains intact.
   - Integrate the code snippet seamlessly.
4. The output from GPT-4O is injected directly into the code editor.
5. Changes are visually highlighted:
   - Green for new code.
   - Red for removed code.
6. Highlights remain until the user explicitly accepts or discards the changes.

README.md

@@ -22,6 +22,7 @@ Needed accounts to set up:
 - [Liveblocks](https://liveblocks.io/): Used for collaborative editing.
 - [E2B](https://e2b.dev/): Used for the terminals and live preview.
 - [Cloudflare](https://www.cloudflare.com/): Used for relational data storage (D2) and file storage (R2).
+- [Anthropic](https://anthropic.com/) and [OpenAI](https://openai.com/): API keys for code generation.
 
 A quick overview of the tech before we start: The deployment uses a **NextJS** app for the frontend and an **ExpressJS** server on the backend. Presumably that's because NextJS integrates well with Clerk middleware but not with Socket.io.
 
@@ -152,6 +153,7 @@ NEXT_PUBLIC_DATABASE_WORKER_URL='https://database.🍎.workers.dev'
 NEXT_PUBLIC_STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
 NEXT_PUBLIC_WORKERS_KEY='SUPERDUPERSECRET'
 ANTHROPIC_API_KEY='🔑'
+OPENAI_API_KEY='🔑'
 ```
 
 ### 10. Running the IDE
@@ -256,7 +258,6 @@ backend/
 | `backend/server`   | The Express websocket server.                                              |
 | `backend/database` | API for interfacing with the D1 database (SQLite).                         |
 | `backend/storage`  | API for interfacing with R2 storage. Service-bound to `/backend/database`. |
-| `backend/ai`       | API for making requests to Workers AI .                                    |
 
 ### Development
 

backend/server/.env.example

@@ -7,6 +7,7 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
+AI_WORKER_URL=
 E2B_API_KEY=
 DOKKU_HOST=
 DOKKU_USERNAME=

backend/server/src/DokkuClient.ts

@@ -31,9 +31,30 @@ export class DokkuClient extends SSHSocketClient {
 
   // List all deployed Dokku apps
   async listApps(): Promise<string[]> {
-    const response = await this.sendCommand("apps:list")
-    // Split the output by newline and remove the header
-    return response.output.split("\n").slice(1)
+    const response = await this.sendCommand("--quiet apps:list")
+    return response.output.split("\n")
+  }
+
+  // Get the creation timestamp of an app
+  async getAppCreatedAt(appName: string): Promise<number> {
+    const response = await this.sendCommand(
+      `apps:report --app-created-at ${appName}`
+    )
+    const createdAt = parseInt(response.output.trim(), 10)
+
+    if (isNaN(createdAt)) {
+      throw new Error(
+        `Failed to retrieve creation timestamp for app ${appName}`
+      )
+    }
+
+    return createdAt
+  }
+
+  // Check if an app exists
+  async appExists(appName: string): Promise<boolean> {
+    const response = await this.sendCommand(`apps:exists ${appName}`)
+    return response.output.includes("App") === false
   }
 }
 

backend/server/src/Sandbox.ts

@@ -156,6 +156,28 @@ export class Sandbox {
       return { success: true, apps: await this.dokkuClient.listApps() }
     }
 
+    // Handle getting app creation timestamp
+    const handleGetAppCreatedAt: SocketHandler = async ({ appName }) => {
+      if (!this.dokkuClient)
+        throw new Error(
+          "Failed to retrieve app creation timestamp: No Dokku client"
+        )
+      return {
+        success: true,
+        createdAt: await this.dokkuClient.getAppCreatedAt(appName),
+      }
+    }
+
+    // Handle checking if an app exists
+    const handleAppExists: SocketHandler = async ({ appName }) => {
+      if (!this.dokkuClient)
+        throw new Error("Failed to check app existence: No Dokku client")
+      return {
+        success: true,
+        exists: await this.dokkuClient.appExists(appName),
+      }
+    }
+
     // Handle deploying code
     const handleDeploy: SocketHandler = async (_: any) => {
       if (!this.gitClient) throw Error("No git client")
@@ -253,7 +275,9 @@ export class Sandbox {
       getFolder: handleGetFolder,
       saveFile: handleSaveFile,
       moveFile: handleMoveFile,
-      list: handleListApps,
+      listApps: handleListApps,
+      getAppCreatedAt: handleGetAppCreatedAt,
+      getAppExists: handleAppExists,
       deploy: handleDeploy,
       createFile: handleCreateFile,
       createFolder: handleCreateFolder,

backend/server/src/index.ts

@@ -146,6 +146,8 @@ io.on("connection", async (socket) => {
         )
       })
 
+      socket.emit("ready")
+
       // Handle disconnection event
       socket.on("disconnect", async () => {
         try {

frontend/.env.example

@@ -3,21 +3,18 @@ CLERK_SECRET_KEY=
 NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
 LIVEBLOCKS_SECRET_KEY=
 
-NEXT_PUBLIC_SERVER_PORT=4000
-NEXT_PUBLIC_APP_URL=http://localhost:3000
-NEXT_PUBLIC_API_URL=http://localhost:4000
 NEXT_PUBLIC_SERVER_URL=http://localhost:4000
+NEXT_PUBLIC_APP_URL=http://localhost:3000
 
 # Set WORKER_URLs after deploying the workers.
 # Set NEXT_PUBLIC_WORKERS_KEY to be the same as KEY in /backend/storage/wrangler.toml.
-NEXT_PUBLIC_DATABASE_WORKER_URL=https://database.your-worker.workers.dev
-NEXT_PUBLIC_STORAGE_WORKER_URL=https://storage.your-worker.workers.dev
-NEXT_PUBLIC_WORKERS_KEY=SUPERDUPERSECRET
+# These URLs should begin with https:// in production
+NEXT_PUBLIC_DATABASE_WORKER_URL=
+NEXT_PUBLIC_STORAGE_WORKER_URL=
+NEXT_PUBLIC_AI_WORKER_URL=
+NEXT_PUBLIC_WORKERS_KEY=
 
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
-
-ANTHROPIC_API_KEY=
-OPENAI_API_KEY=

frontend/app/api/ai/route.ts

@@ -1,22 +1,16 @@
-import {
-  ignoredFiles,
-  ignoredFolders,
-} from "@/components/editor/AIChat/lib/ignored-paths"
-import { templateConfigs } from "@/lib/templates"
-import { TIERS } from "@/lib/tiers"
-import { TFile, TFolder } from "@/lib/types"
-import { Anthropic } from "@anthropic-ai/sdk"
 import { currentUser } from "@clerk/nextjs"
+import { Anthropic } from "@anthropic-ai/sdk"
+import { TIERS } from "@/lib/tiers"
+import { templateConfigs } from "@/lib/templates"
+import { TFile, TFolder } from "@/lib/types"
+import { ignoredFiles, ignoredFolders } from "@/components/editor/AIChat/lib/ignored-paths"
 
 const anthropic = new Anthropic({
   apiKey: process.env.ANTHROPIC_API_KEY!,
 })
 
 // Format file structure for context 
-function formatFileStructure(
-  items: (TFile | TFolder)[] | undefined,
-  prefix = ""
-): string {
+function formatFileStructure(items: (TFile | TFolder)[] | undefined, prefix = ""): string {
   if (!items || !Array.isArray(items)) {
     return "No files available"
   }
@@ -29,23 +23,15 @@ function formatFileStructure(
 
   return sortedItems
     .map((item) => {
-      if (
-        item.type === "file" &&
-        !ignoredFiles.some(
-          (pattern) =>
-            item.name.endsWith(pattern.replace("*", "")) ||
-            item.name === pattern
-        )
-      ) {
+      if (item.type === "file" && !ignoredFiles.some(
+        (pattern) => item.name.endsWith(pattern.replace("*", "")) || item.name === pattern
+      )) {
         return `${prefix}├── ${item.name}`
       } else if (
         item.type === "folder" && 
         !ignoredFolders.some((folder) => folder === item.name)
       ) {
-        const folderContent = formatFileStructure(
-          item.children,
-          `${prefix}│   `
-        )
+        const folderContent = formatFileStructure(item.children, `${prefix}│   `)
         return `${prefix}├── ${item.name}/\n${folderContent}`
       }
       return null
@@ -108,7 +94,6 @@ export async function POST(request: Request) {
       line,
       templateType,
       files,
-      projectName,
     } = await request.json()
 
     // Get template configuration
@@ -153,23 +138,13 @@ Instructions: ${messages[0].content}
 
 Respond only with the modified code that can directly replace the existing code.`
     } else {
-      systemMessage = `You are an intelligent programming assistant for a ${templateType} project. Please respond to the following request concisely. When providing code:
+      systemMessage = `You are an intelligent programming assistant for a ${templateType} project. Please respond to the following request concisely. If your response includes code, please format it using triple backticks (\`\`\`) with the appropriate language identifier. For example:
 
-1. Format it using triple backticks (\`\`\`) with the appropriate language identifier.
-2. Always specify the complete file path in the format:
-   ${projectName}/filepath/to/file.ext
+      \`\`\`python
+      print("Hello, World!")
+      \`\`\`
       
-3. If creating a new file, specify the path as:
-   ${projectName}/filepath/to/file.ext (new file)
-
-4. Format your code blocks as:
-
-${projectName}/filepath/to/file.ext
-\`\`\`language
-code here
-\`\`\`
-
-If multiple files are involved, repeat the format for each file. Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
+      Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
 
 This is the project template:
 ${templateContext}

frontend/app/api/merge/route.ts

@@ -19,9 +19,7 @@ export async function POST(request: Request) {
    - Explanations or comments
    - Markdown formatting
 
-The output should be the exact code that will replace the existing code, nothing more and nothing less.
-
-Important: When merging, preserve the original code structure as much as possible. Only make necessary changes to integrate the new code while maintaining the original code's organization and style.`
+The output should be the exact code that will replace the existing code, nothing more and nothing less.`
 
     const mergedCode = `Original file (${fileName}):\n${originalCode}\n\nNew code to merge:\n${newCode}`
 

frontend/components/editor/AIChat/ApplyButton.tsx

@@ -8,7 +8,7 @@ interface ApplyButtonProps {
   activeFileName: string
   activeFileContent: string
   editorRef: { current: any }
-  onApply: (mergedCode: string, originalCode: string) => void
+  onApply: (mergedCode: string) => void
 }
 
 export default function ApplyButton({
@@ -48,7 +48,7 @@ export default function ApplyButton({
           mergedCode += decoder.decode(value, { stream: true })
         }
       }
-      onApply(mergedCode.trim(), activeFileContent)
+      onApply(mergedCode.trim())
     } catch (error) {
       console.error("Error applying code:", error)
       toast.error(

frontend/components/editor/AIChat/ChatMessage.tsx

@@ -19,7 +19,6 @@ export default function ChatMessage({
   editorRef,
   mergeDecorationsCollection,
   setMergeDecorationsCollection,
-  selectFile,
 }: MessageProps) {
   // State for expanded message index
   const [expandedMessageIndex, setExpandedMessageIndex] = useState<
@@ -116,9 +115,8 @@ export default function ChatMessage({
     activeFileContent,
     editorRef,
     handleApplyCode,
-    selectFile,
     mergeDecorationsCollection,
-    setMergeDecorationsCollection,
+    setMergeDecorationsCollection
   )
 
   return (

frontend/components/editor/AIChat/index.tsx

@@ -19,10 +19,8 @@ export default function AIChat({
   files,
   templateType,
   handleApplyCode,
-  selectFile,
   mergeDecorationsCollection,
   setMergeDecorationsCollection,
-  projectName,
 }: AIChatProps) {
   // Initialize socket and messages
   const { socket } = useSocket()
@@ -154,8 +152,7 @@ export default function AIChat({
       activeFileContent,
       false,
       templateType,
-      files,
-      projectName
+      files
     )
   }
 
@@ -226,7 +223,6 @@ export default function AIChat({
             editorRef={editorRef}
             mergeDecorationsCollection={mergeDecorationsCollection}
             setMergeDecorationsCollection={setMergeDecorationsCollection}
-            selectFile={selectFile}
           />
         ))}
         {isLoading && <LoadingDots />}

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -1,4 +1,4 @@
-import { TFile, TFolder } from "@/lib/types"
+import { TFolder, TFile } from "@/lib/types"
 import React from "react"
 
 // Stringify content for chat message component
@@ -93,8 +93,7 @@ export const handleSend = async (
   activeFileContent: string,
   isEditMode: boolean = false,
   templateType: string,
-  files: (TFile | TFolder)[],
-  projectName: string
+  files: (TFile | TFolder)[]
 ) => {
   // Return if input is empty and context is null
   if (input.trim() === "" && !context) return
@@ -146,7 +145,6 @@ export const handleSend = async (
         isEditMode: isEditMode,
         templateType: templateType,
         files: files, 
-        projectName: projectName,
       }),
       signal: abortControllerRef.current.signal,
     })
@@ -243,11 +241,3 @@ export const looksLikeCode = (text: string): boolean => {
 
   return codeIndicators.some((pattern) => pattern.test(text))
 }
-
-// Add this new function after looksLikeCode function
-export const isFilePath = (text: string): boolean => {
-  // Match patterns like next/styles/SignIn.module.css or path/to/file.ext (new file)
-  const pattern =
-    /^(?:[a-zA-Z0-9_.-]+\/)*[a-zA-Z0-9_.-]+\.[a-zA-Z0-9]+(\s+\(new file\))?$/
-  return pattern.test(text)
-}

frontend/components/editor/AIChat/lib/markdownComponents.tsx

@@ -1,13 +1,11 @@
-import { useSocket } from "@/context/SocketContext"
-import { TTab } from "@/lib/types"
-import { Check, CornerUpLeft, FileText, X } from "lucide-react"
+import { Check, CornerUpLeft, X } from "lucide-react"
 import monaco from "monaco-editor"
 import { Components } from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
 import { Button } from "../../../ui/button"
 import ApplyButton from "../ApplyButton"
-import { isFilePath, stringifyContent } from "./chatUtils"
+import { stringifyContent } from "./chatUtils"
 
 // Create markdown components for chat message component
 export const createMarkdownComponents = (
@@ -17,8 +15,7 @@ export const createMarkdownComponents = (
   activeFileName: string,
   activeFileContent: string,
   editorRef: any,
-  handleApplyCode: (mergedCode: string, originalCode: string) => void,
-  selectFile: (tab: TTab) => void,
+  handleApplyCode: (mergedCode: string) => void,
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection,
   setMergeDecorationsCollection?: (collection: undefined) => void
 ): Components => ({
@@ -61,7 +58,7 @@ export const createMarkdownComponents = (
                       mergeDecorationsCollection &&
                       editorRef?.current
                     ) {
-                      mergeDecorationsCollection?.clear()
+                      mergeDecorationsCollection.clear()
                       setMergeDecorationsCollection(undefined)
                     }
                   }}
@@ -75,15 +72,14 @@ export const createMarkdownComponents = (
                 <div className="w-px bg-input"></div>
                 <Button
                   onClick={() => {
-                    if (editorRef?.current && mergeDecorationsCollection) {
-                      const model = editorRef.current.getModel()
-                      if (model && (model as any).originalContent) {
-                        editorRef.current?.setValue(
-                          (model as any).originalContent
-                        )
+                    if (
+                      setMergeDecorationsCollection &&
+                      mergeDecorationsCollection &&
+                      editorRef?.current
+                    ) {
+                      editorRef.current.getModel()?.setValue(activeFileContent)
                       mergeDecorationsCollection.clear()
-                        setMergeDecorationsCollection?.(undefined)
-                      }
+                      setMergeDecorationsCollection(undefined)
                     }
                   }}
                   size="sm"
@@ -130,62 +126,8 @@ export const createMarkdownComponents = (
     )
   },
   // Render markdown elements
-  p: ({ node, children, ...props }) => {
-    const content = stringifyContent(children)
-    const { socket } = useSocket()
-
-    if (isFilePath(content)) {
-      const isNewFile = content.endsWith("(new file)")
-      const filePath = (
-        isNewFile ? content.replace(" (new file)", "") : content
-      )
-        .split("/")
-        .filter((part, index) => index !== 0)
-        .join("/")
-
-      const handleFileClick = () => {
-        if (isNewFile) {
-          socket?.emit(
-            "createFile",
-            {
-              name: filePath,
-            },
-            (response: any) => {
-              if (response.success) {
-                const tab: TTab = {
-                  id: filePath,
-                  name: filePath.split("/").pop() || "",
-                  saved: true,
-                  type: "file",
-                }
-                selectFile(tab)
-              }
-            }
-          )
-        } else {
-          const tab: TTab = {
-            id: filePath,
-            name: filePath.split("/").pop() || "",
-            saved: true,
-            type: "file",
-          }
-          selectFile(tab)
-        }
-      }
-
-      return (
-        <div
-          onClick={handleFileClick}
-          className="group flex items-center gap-2 px-2 py-1 bg-secondary/50 rounded-md my-2 text-xs hover:bg-secondary cursor-pointer w-fit"
-        >
-          <FileText className="h-4 w-4" />
-          <span className="font-mono group-hover:underline">{content}</span>
-        </div>
-      )
-    }
-
-    return renderMarkdownElement({ node, children, ...props })
-  },
+  p: ({ node, children, ...props }) =>
+    renderMarkdownElement({ node, children, ...props }),
   h1: ({ node, children, ...props }) =>
     renderMarkdownElement({ node, children, ...props }),
   h2: ({ node, children, ...props }) =>

frontend/components/editor/AIChat/types/index.ts

@@ -1,5 +1,5 @@
 import { TemplateConfig } from "@/lib/templates"
-import { TFile, TFolder, TTab } from "@/lib/types"
+import { TFile, TFolder } from "@/lib/types"
 import * as monaco from "monaco-editor"
 import { Socket } from "socket.io-client"
 
@@ -56,11 +56,9 @@ export interface AIChatProps {
   files: (TFile | TFolder)[]
   templateType: string
   templateConfig?: TemplateConfig
-  projectName: string
-  handleApplyCode: (mergedCode: string, originalCode: string) => void
+  handleApplyCode: (mergedCode: string) => void
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
   setMergeDecorationsCollection?: (collection: undefined) => void
-  selectFile: (tab: TTab) => void
 }
 
 // Chat input props interface
@@ -110,13 +108,12 @@ export interface MessageProps {
   ) => void
   setIsContextExpanded: (isExpanded: boolean) => void
   socket: Socket | null
-  handleApplyCode: (mergedCode: string, originalCode: string) => void
+  handleApplyCode: (mergedCode: string) => void
   activeFileName: string
   activeFileContent: string
   editorRef: any
   mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
   setMergeDecorationsCollection?: (collection: undefined) => void
-  selectFile: (tab: TTab) => void
 }
 
 // Context tabs props interface

frontend/components/editor/index.tsx

@@ -384,10 +384,10 @@ export default function CodeEditor({
 
   // handle apply code
   const handleApplyCode = useCallback(
-    (mergedCode: string, originalCode: string) => {
+    (mergedCode: string) => {
       if (!editorRef) return
 
-      const originalLines = originalCode.split("\n")
+      const originalLines = activeFileContent.split("\n")
       const mergedLines = mergedCode.split("\n")
 
       const decorations: monaco.editor.IModelDeltaDecoration[] = []
@@ -397,31 +397,32 @@ export default function CodeEditor({
         i < Math.max(originalLines.length, mergedLines.length);
         i++
       ) {
-        // Only highlight new lines (green highlights)
-        if (i >= originalLines.length || originalLines[i] !== mergedLines[i]) {
+        if (originalLines[i] !== mergedLines[i]) {
           decorations.push({
             range: new monaco.Range(i + 1, 1, i + 1, 1),
             options: {
               isWholeLine: true,
-              className: "added-line-decoration",
-              glyphMarginClassName: "added-line-glyph",
+              className:
+                i < originalLines.length
+                  ? "removed-line-decoration"
+                  : "added-line-decoration",
+              glyphMarginClassName:
+                i < originalLines.length
+                  ? "removed-line-glyph"
+                  : "added-line-glyph",
             },
           })
         }
       }
 
-      // Store original content in the model
-      const model = editorRef.getModel()
-      if (model) {
-        ;(model as any).originalContent = originalCode
-      }
+      // Update editor content
       editorRef.setValue(mergedCode)
 
       // Apply decorations
       const newDecorations = editorRef.createDecorationsCollection(decorations)
       setMergeDecorationsCollection(newDecorations)
     },
-    [editorRef]
+    [editorRef, activeFileContent]
   )
 
   // Generate widget effect
@@ -1283,11 +1284,9 @@ export default function CodeEditor({
                   lastCopiedRangeRef={lastCopiedRangeRef}
                   files={files}
                   templateType={sandboxData.type}
-                  projectName={sandboxData.name}
                   handleApplyCode={handleApplyCode}
                   mergeDecorationsCollection={mergeDecorationsCollection}
                   setMergeDecorationsCollection={setMergeDecorationsCollection}
-                  selectFile={selectFile}
                 />
               </ResizablePanel>
             </>

frontend/components/editor/navbar/deploy.tsx

@@ -9,7 +9,7 @@ import {
 import { useTerminal } from "@/context/TerminalContext"
 import { Sandbox, User } from "@/lib/types"
 import { Globe } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function DeployButtonModal({
   userData,
@@ -18,8 +18,19 @@ export default function DeployButtonModal({
   userData: User
   data: Sandbox
 }) {
-  const { deploy } = useTerminal()
+  const { deploy, getAppExists } = useTerminal()
   const [isDeploying, setIsDeploying] = useState(false)
+  const [isDeployed, setIsDeployed] = useState(false)
+
+  useEffect(() => {
+    const checkDeployment = async () => {
+      if (getAppExists) {
+        const exists = await getAppExists(data.id)
+        setIsDeployed(exists)
+      }
+    }
+    checkDeployment()
+  }, [data.id, getAppExists])
 
   const handleDeploy = () => {
     if (isDeploying) {
@@ -30,6 +41,7 @@ export default function DeployButtonModal({
       setIsDeploying(true)
       deploy(() => {
         setIsDeploying(false)
+        setIsDeployed(true)
       })
     }
   }
@@ -52,8 +64,9 @@ export default function DeployButtonModal({
             <DeploymentOption
               icon={<Globe className="text-gray-500 w-5 h-5" />}
               domain={`${data.id}.gitwit.app`}
-              timestamp="Deployed 1h ago"
+              timestamp="Deployed 1m ago"
               user={userData.name}
+              isDeployed={isDeployed}
             />
           </div>
           <Button
@@ -61,7 +74,7 @@ export default function DeployButtonModal({
             className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]"
             onClick={handleDeploy}
           >
-            {isDeploying ? "Deploying..." : "Update"}
+            {isDeploying ? "Deploying..." : isDeployed ? "Update" : "Deploy"}
           </Button>
         </PopoverContent>
       </Popover>
@@ -74,16 +87,19 @@ function DeploymentOption({
   domain,
   timestamp,
   user,
+  isDeployed,
 }: {
   icon: React.ReactNode
   domain: string
   timestamp: string
   user: string
+  isDeployed: boolean
 }) {
   return (
     <div className="flex flex-col gap-2 w-full text-left p-2 rounded-md border border-gray-700 bg-gray-900">
       <div className="flex items-start gap-2 relative">
         <div className="flex-shrink-0">{icon}</div>
+        {isDeployed ? (
           <a
             href={`https://${domain}`}
             target="_blank"
@@ -92,9 +108,12 @@ function DeploymentOption({
           >
             {domain}
           </a>
+        ) : (
+          <span className="font-semibold text-gray-300">{domain}</span>
+        )}
       </div>
       <p className="text-sm text-gray-400 mt-0 ml-7">
-        {timestamp} • {user}
+        {isDeployed ? `${timestamp} • ${user}` : "Never deployed"}
       </p>
     </div>
   )

frontend/context/TerminalContext.tsx

@@ -20,6 +20,7 @@ interface TerminalContextType {
   createNewTerminal: (command?: string) => Promise<void>
   closeTerminal: (id: string) => void
   deploy: (callback: () => void) => void
+  getAppExists: ((appName: string) => Promise<boolean>) | null
 }
 
 const TerminalContext = createContext<TerminalContextType | undefined>(
@@ -35,6 +36,19 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
   >([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
+  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
+
+  // Listen for the "ready" signal from the socket
+  React.useEffect(() => {
+    if (socket) {
+      socket.on("ready", () => {
+        setIsSocketReady(true)
+      })
+    }
+    return () => {
+      if (socket) socket.off("ready")
+    }
+  }, [socket])
 
   const createNewTerminal = async (command?: string): Promise<void> => {
     if (!socket) return
@@ -78,6 +92,18 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
     })
   }
 
+  const getAppExists = async (appName: string): Promise<boolean> => {
+    console.log("Is there a socket: " + !!socket)
+    if (!socket) {
+      console.error("Couldn't check if app exists: No socket")
+      return false
+    }
+    const response: { exists: boolean } = await new Promise((resolve) =>
+      socket.emit("getAppExists", { appName }, resolve)
+    )
+    return response.exists
+  }
+
   const value = {
     terminals,
     setTerminals,
@@ -88,6 +114,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
     createNewTerminal,
     closeTerminal,
     deploy,
+    getAppExists: isSocketReady ? getAppExists : null,
   }
 
   return (