Add SystemInfoModal component and integrate system info fetching in App

ui/src/App.tsx

@@ -1,48 +1,61 @@
-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'
-import { useInstances } from '@/contexts/InstancesContext'
+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";
+import { useInstances } from "@/contexts/InstancesContext";
+import SystemInfoModal from "./components/SystemInfoModal";
 
 function App() {
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [editingInstance, setEditingInstance] = useState<Instance | undefined>(undefined)
-  const { createInstance, updateInstance } = useInstances()
+  const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
+  const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
+  const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
+    undefined
+  );
+  const { createInstance, updateInstance } = useInstances();
 
   const handleCreateInstance = () => {
-    setEditingInstance(undefined)
-    setIsModalOpen(true)
-  }
+    setEditingInstance(undefined);
+    setIsInstanceModalOpen(true);
+  };
 
   const handleEditInstance = (instance: Instance) => {
-    setEditingInstance(instance)
-    setIsModalOpen(true)
-  }
+    setEditingInstance(instance);
+    setIsInstanceModalOpen(true);
+  };
 
   const handleSaveInstance = (name: string, options: CreateInstanceOptions) => {
     if (editingInstance) {
-      updateInstance(editingInstance.name, options)
+      updateInstance(editingInstance.name, options);
     } else {
-      createInstance(name, options)
+      createInstance(name, options);
     }
-  }
+  };
+
+  const handleShowSystemInfo = () => {
+    setIsSystemInfoModalOpen(true);
+  };
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <Header onCreateInstance={handleCreateInstance} />
+      <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
       <main className="container mx-auto max-w-4xl px-4 py-8">
         <InstanceList editInstance={handleEditInstance} />
       </main>
-      
+
       <InstanceModal
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
+        open={isInstanceModalOpen}
+        onOpenChange={setIsInstanceModalOpen}
         onSave={handleSaveInstance}
         instance={editingInstance}
       />
+
+      <SystemInfoModal
+        open={isSystemInfoModalOpen}
+        onOpenChange={setIsSystemInfoModalOpen}
+      />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;