Reuse modal for instance editing

ui/src/App.tsx

@@ -1,13 +1,47 @@
+import { useState } from 'react'
 import Header from '@/components/Header'
 import InstanceList from '@/components/InstanceList'
+import InstanceModal from '@/components/InstanceModal'
+import { CreateInstanceOptions, Instance } from '@/types/instance'
 
 function App() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingInstance, setEditingInstance] = useState<Instance | undefined>(undefined)
+
+  const handleCreateInstance = () => {
+    setEditingInstance(undefined)
+    setIsModalOpen(true)
+  }
+
+  const handleEditInstance = (instance: Instance) => {
+    setEditingInstance(instance)
+    setIsModalOpen(true)
+  }
+
+  const handleSaveInstance = (name: string, options: CreateInstanceOptions) => {
+    if (editingInstance) {
+      // TODO: Implement API call to update instance
+      console.log('Updating instance:', { name, options })
+    } else {
+      // TODO: Implement API call to create instance
+      console.log('Creating instance:', { name, options })
+    }
+    // For now, just log the data - you'll implement the API call later
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
-      <Header />
+      <Header onCreateInstance={handleCreateInstance} />
       <main className="container mx-auto max-w-4xl px-4 py-8">
-        <InstanceList />
+        <InstanceList editInstance={handleEditInstance} />
       </main>
+      
+      <InstanceModal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        onSave={handleSaveInstance}
+        instance={editingInstance}
+      />
     </div>
   )
 }

ui/src/components/Header.tsx

@@ -1,43 +1,24 @@
-import { useState } from 'react'
 import { Button } from '@/components/ui/button'
-import InstanceModal from '@/components/InstanceModal'
-import { CreateInstanceOptions } from '@/types/instance'
 
-function Header() {
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const handleCreateInstance = () => {
-    setIsModalOpen(true)
-  }
-
-  const handleSaveInstance = (name: string, options: CreateInstanceOptions) => {
-    // TODO: Implement API call to create instance
-    console.log('Creating instance:', { name, options })
-    // For now, just log the data - you'll implement the API call later
-  }
+interface HeaderProps {
+  onCreateInstance: () => void
+}
 
+function Header({ onCreateInstance }: HeaderProps) {
   return (
-    <>
-      <header className="bg-white border-b border-gray-200">
-        <div className="container mx-auto max-w-4xl px-4 py-4">
-          <div className="flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-gray-900">
-              LlamaCtl Dashboard
-            </h1>
-            
-            <Button onClick={handleCreateInstance}>
-              Create Instance
-            </Button>
-          </div>
+    <header className="bg-white border-b border-gray-200">
+      <div className="container mx-auto max-w-4xl px-4 py-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-gray-900">
+            LlamaCtl Dashboard
+          </h1>
+          
+          <Button onClick={onCreateInstance}>
+            Create Instance
+          </Button>
         </div>
-      </header>
-
-      <InstanceModal
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        onSave={handleSaveInstance}
-      />
-    </>
+      </div>
+    </header>
   )
 }
 

ui/src/components/InstanceCard.tsx

@@ -9,9 +9,10 @@ interface InstanceCardProps {
   startInstance: (name: string) => void
   stopInstance: (name: string) => void
   deleteInstance: (name: string) => void
+  editInstance: (instance: Instance) => void
 }
 
-function InstanceCard({ instance, startInstance, stopInstance, deleteInstance }: InstanceCardProps) {
+function InstanceCard({ instance, startInstance, stopInstance, deleteInstance, editInstance }: InstanceCardProps) {
 
   const handleStart = () => {
     startInstance(instance.name)
@@ -28,8 +29,7 @@ function InstanceCard({ instance, startInstance, stopInstance, deleteInstance }:
   }
 
   const handleEdit = () => {
-    // Logic for editing the instance (e.g., open a modal)
-    console.log(`Edit instance: ${instance.name}`)
+    editInstance(instance)
   }
 
   const handleLogs = () => {

ui/src/components/InstanceList.tsx

@@ -1,7 +1,12 @@
 import { useInstances } from '@/hooks/useInstances'
 import InstanceCard from '@/components/InstanceCard'
+import { Instance } from '@/types/instance'
 
-function InstanceList() {
+interface InstanceListProps {
+  editInstance: (instance: Instance) => void
+}
+
+function InstanceList({ editInstance }: InstanceListProps) {
   const { instances, loading, error, startInstance, stopInstance, deleteInstance } = useInstances()
 
   if (loading) {
@@ -49,6 +54,7 @@ function InstanceList() {
             startInstance={startInstance}
             stopInstance={stopInstance}
             deleteInstance={deleteInstance}
+            editInstance={editInstance}
           />
         ))}
       </div>