Implement instance creation and update functionality in useInstances hook

ui/src/App.tsx

@@ -3,10 +3,12 @@ import Header from '@/components/Header'
 import InstanceList from '@/components/InstanceList'
 import InstanceModal from '@/components/InstanceModal'
 import { CreateInstanceOptions, Instance } from '@/types/instance'
+import { useInstances } from '@/hooks/useInstances'
 
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [editingInstance, setEditingInstance] = useState<Instance | undefined>(undefined)
+  const { createInstance, updateInstance } = useInstances()
 
   const handleCreateInstance = () => {
     setEditingInstance(undefined)
@@ -20,13 +22,10 @@ function App() {
 
   const handleSaveInstance = (name: string, options: CreateInstanceOptions) => {
     if (editingInstance) {
-      // TODO: Implement API call to update instance
-      console.log('Updating instance:', { name, options })
+      updateInstance(editingInstance.name, options)
     } else {
-      // TODO: Implement API call to create instance
-      console.log('Creating instance:', { name, options })
+      createInstance(name, options)
     }
-    // For now, just log the data - you'll implement the API call later
   }
 
   return (

ui/src/hooks/useInstances.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Instance } from '@/types/instance'
+import { CreateInstanceOptions, Instance } from '@/types/instance'
 import { instancesApi } from '@/lib/api'
 
 interface UseInstancesState {
@@ -10,6 +10,8 @@ interface UseInstancesState {
 
 interface UseInstancesActions {
   fetchInstances: () => Promise<void>
+  createInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
+  updateInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
   startInstance: (name: string) => Promise<void>
   stopInstance: (name: string) => Promise<void>
   restartInstance: (name: string) => Promise<void>
@@ -39,6 +41,28 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     }
   }, [])
 
+  const createInstance = useCallback(async (name: string, options: CreateInstanceOptions) => {
+    try {
+      setError(null)
+      await instancesApi.create( name, options )
+      // Refresh the list to include the new instance
+      await fetchInstances()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create instance')
+    }
+  }, [fetchInstances])
+
+  const updateInstance = useCallback(async (name: string, options: CreateInstanceOptions) => {
+    try {
+      setError(null)
+      await instancesApi.update(name, options)
+      // Refresh the list to get updated instance
+      await fetchInstances()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update instance')
+    }
+  }, [fetchInstances])
+
   const startInstance = useCallback(async (name: string) => {
     try {
       setError(null)
@@ -95,6 +119,8 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     error,
     // Actions
     fetchInstances,
+    createInstance,
+    updateInstance,
     startInstance,
     stopInstance,
     restartInstance,