Replace instances hook with context

ui/src/App.tsx

@@ -3,7 +3,7 @@ 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'
+import { useInstances } from '@/contexts/InstancesContext'
 
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false)

ui/src/components/InstanceList.tsx

@@ -1,4 +1,4 @@
-import { useInstances } from '@/hooks/useInstances'
+import { useInstances } from '@/contexts/InstancesContext'
 import InstanceCard from '@/components/InstanceCard'
 import { Instance } from '@/types/instance'
 

ui/src/contexts/InstancesContext.tsx

@@ -1,14 +1,14 @@
-import { useState, useEffect, useCallback } from 'react'
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react'
 import { CreateInstanceOptions, Instance } from '@/types/instance'
 import { instancesApi } from '@/lib/api'
 
-interface UseInstancesState {
+interface InstancesContextState {
   instances: Instance[]
   loading: boolean
   error: string | null
 }
 
-interface UseInstancesActions {
+interface InstancesContextActions {
   fetchInstances: () => Promise<void>
   createInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
   updateInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
@@ -19,7 +19,15 @@ interface UseInstancesActions {
   clearError: () => void
 }
 
-export const useInstances = (): UseInstancesState & UseInstancesActions => {
+type InstancesContextType = InstancesContextState & InstancesContextActions
+
+const InstancesContext = createContext<InstancesContextType | undefined>(undefined)
+
+interface InstancesProviderProps {
+  children: ReactNode
+}
+
+export const InstancesProvider = ({ children }: InstancesProviderProps) => {
   const [instances, setInstances] = useState<Instance[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -44,7 +52,7 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
   const createInstance = useCallback(async (name: string, options: CreateInstanceOptions) => {
     try {
       setError(null)
-      await instancesApi.create( name, options )
+      await instancesApi.create(name, options)
       // Refresh the list to include the new instance
       await fetchInstances()
     } catch (err) {
@@ -112,7 +120,7 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     fetchInstances()
   }, [fetchInstances])
 
-  return {
+  const value: InstancesContextType = {
     // State
     instances,
     loading,
@@ -127,4 +135,18 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     deleteInstance,
     clearError,
   }
-}
+
+  return (
+    <InstancesContext.Provider value={value}>
+      {children}
+    </InstancesContext.Provider>
+  )
+}
+
+export const useInstances = (): InstancesContextType => {
+  const context = useContext(InstancesContext)
+  if (context === undefined) {
+    throw new Error('useInstances must be used within an InstancesProvider')
+  }
+  return context
+}

ui/src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { InstancesProvider } from './contexts/InstancesContext'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <InstancesProvider>
+      <App />
+    </InstancesProvider>
   </React.StrictMode>,
 )