From e3bf8ac05adea22bcee1385b384a02f956aff8e0 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Tue, 23 Sep 2025 22:05:31 +0200
Subject: [PATCH] Update SystemInfo dialog

---
 webui/src/App.tsx                             |  16 +-
 webui/src/components/ParseCommandDialog.tsx   |   6 +-
 ...endInfoDialog.tsx => SystemInfoDialog.tsx} | 140 +++++++++---------
 .../instance/BackendConfigurationCard.tsx     |   6 +-
 4 files changed, 84 insertions(+), 84 deletions(-)
 rename webui/src/components/{BackendInfoDialog.tsx => SystemInfoDialog.tsx} (66%)

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index b58e54f..04c8c01 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -3,7 +3,7 @@ import Header from "@/components/Header";
 import InstanceList from "@/components/InstanceList";
 import InstanceDialog from "@/components/InstanceDialog";
 import LoginDialog from "@/components/LoginDialog";
-import BackendInfoDialog from "./components/BackendInfoDialog";
+import SystemInfoDialog from "./components/SystemInfoDialog";
 import { type CreateInstanceOptions, type Instance } from "@/types/instance";
 import { useInstances } from "@/contexts/InstancesContext";
 import { useAuth } from "@/contexts/AuthContext";
@@ -13,7 +13,7 @@ import { Toaster } from "sonner";
 function App() {
   const { isAuthenticated, isLoading: authLoading } = useAuth();
   const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
-  const [isBackendInfoModalOpen, setIsBackendInfoModalOpen] = useState(false);
+  const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
   const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
     undefined
   );
@@ -37,8 +37,8 @@ function App() {
     }
   };
 
-  const handleShowBackendInfo = () => {
-    setIsBackendInfoModalOpen(true);
+  const handleShowSystemInfo = () => {
+    setIsSystemInfoModalOpen(true);
   };
 
   // Show loading spinner while checking auth
@@ -70,7 +70,7 @@ function App() {
   return (
     <ThemeProvider>
       <div className="min-h-screen bg-background">
-        <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowBackendInfo} />
+        <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
         <main className="container mx-auto max-w-4xl px-4 py-8">
           <InstanceList editInstance={handleEditInstance} />
         </main>
@@ -82,9 +82,9 @@ function App() {
           instance={editingInstance}
         />
 
-        <BackendInfoDialog
-          open={isBackendInfoModalOpen}
-          onOpenChange={setIsBackendInfoModalOpen}
+        <SystemInfoDialog
+          open={isSystemInfoModalOpen}
+          onOpenChange={setIsSystemInfoModalOpen}
         />
         
         <Toaster />
diff --git a/webui/src/components/ParseCommandDialog.tsx b/webui/src/components/ParseCommandDialog.tsx
index 5043a57..ba5075d 100644
--- a/webui/src/components/ParseCommandDialog.tsx
+++ b/webui/src/components/ParseCommandDialog.tsx
@@ -105,9 +105,9 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
           <div>
             <Label className="text-sm font-medium">Backend Type:
               <span className="font-normal text-muted-foreground">
-                {backendType === BackendType.LLAMA_CPP && 'Llama Server (llama_cpp)'}
-                {backendType === BackendType.MLX_LM && 'MLX LM (mlx_lm)'}
-                {backendType === BackendType.VLLM && 'vLLM (vllm)'}
+                {backendType === BackendType.LLAMA_CPP && 'Llama Server'}
+                {backendType === BackendType.MLX_LM && 'MLX LM'}
+                {backendType === BackendType.VLLM && 'vLLM'}
               </span>
             </Label>
           </div>
diff --git a/webui/src/components/BackendInfoDialog.tsx b/webui/src/components/SystemInfoDialog.tsx
similarity index 66%
rename from webui/src/components/BackendInfoDialog.tsx
rename to webui/src/components/SystemInfoDialog.tsx
index 9ce0881..f39d874 100644
--- a/webui/src/components/BackendInfoDialog.tsx
+++ b/webui/src/components/SystemInfoDialog.tsx
@@ -20,6 +20,7 @@ import {
   Info
 } from 'lucide-react'
 import { serverApi } from '@/lib/api'
+import { BackendType, type BackendTypeValue } from '@/types/instance'
 
 // Helper to get version from environment
 const getAppVersion = (): string => {
@@ -30,7 +31,7 @@ const getAppVersion = (): string => {
   }
 }
 
-interface BackendInfoDialogProps {
+interface SystemInfoDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
@@ -41,27 +42,25 @@ interface BackendInfo {
   help: string
 }
 
-type BackendType = 'llama-cpp' | 'mlx' | 'vllm'
-
 const BACKEND_OPTIONS = [
-  { value: 'llama-cpp', label: 'Llama.cpp' },
-  { value: 'mlx', label: 'MLX' },
-  { value: 'vllm', label: 'vLLM' },
-] as const
+  { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
+  { value: BackendType.MLX_LM, label: 'MLX LM' },
+  { value: BackendType.VLLM, label: 'vLLM' },
+]
 
-const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
+const SystemInfoDialog: React.FC<SystemInfoDialogProps> = ({
   open,
   onOpenChange
 }) => {
-  const [selectedBackend, setSelectedBackend] = useState<BackendType>('llama-cpp')
+  const [selectedBackend, setSelectedBackend] = useState<BackendTypeValue>(BackendType.LLAMA_CPP)
   const [backendInfo, setBackendInfo] = useState<BackendInfo | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [showHelp, setShowHelp] = useState(false)
 
   // Fetch backend info
-  const fetchBackendInfo = async (backend: BackendType) => {
-    if (backend !== 'llama-cpp') {
+  const fetchBackendInfo = async (backend: BackendTypeValue) => {
+    if (backend !== BackendType.LLAMA_CPP) {
       setBackendInfo(null)
       setError(null)
       return
@@ -88,21 +87,21 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
   // Load data when dialog opens or backend changes
   useEffect(() => {
     if (open) {
-      fetchBackendInfo(selectedBackend)
+      void fetchBackendInfo(selectedBackend)
     }
   }, [open, selectedBackend])
 
   const handleBackendChange = (value: string) => {
-    setSelectedBackend(value as BackendType)
+    setSelectedBackend(value as BackendTypeValue)
     setShowHelp(false) // Reset help section when switching backends
   }
 
-  const renderBackendContent = () => {
-    if (selectedBackend !== 'llama-cpp') {
+  const renderBackendSpecificContent = () => {
+    if (selectedBackend !== BackendType.LLAMA_CPP) {
       return (
-        <div className="flex items-center justify-center py-12">
+        <div className="flex items-center justify-center py-8">
           <div className="text-center space-y-3">
-            <Info className="h-12 w-12 text-gray-400 mx-auto" />
+            <Info className="h-8 w-8 text-gray-400 mx-auto" />
             <div>
               <h3 className="font-semibold text-gray-700">Backend Info Not Available</h3>
               <p className="text-sm text-gray-500 mt-1">
@@ -116,7 +115,7 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
 
     if (loading && !backendInfo) {
       return (
-        <div className="flex items-center justify-center py-12">
+        <div className="flex items-center justify-center py-8">
           <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
           <span className="ml-2 text-gray-400">Loading backend information...</span>
         </div>
@@ -138,17 +137,6 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
 
     return (
       <div className="space-y-6">
-        {/* Llamactl Version Section */}
-        <div className="space-y-3">
-          <h3 className="font-semibold">Llamactl Version</h3>
-
-          <div className="bg-gray-900 rounded-lg p-4">
-            <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
-              {getAppVersion()}
-            </pre>
-          </div>
-        </div>
-
         {/* Backend Version Section */}
         <div className="space-y-3">
           <h3 className="font-semibold">
@@ -216,49 +204,61 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-4xl max-w-[calc(100%-2rem)] max-h-[80vh] flex flex-col">
         <DialogHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <DialogTitle className="flex items-center gap-2">
-                <Monitor className="h-5 w-5" />
-                Backend Information
-              </DialogTitle>
-              <DialogDescription>
-                View backend-specific environment and capabilities
-              </DialogDescription>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <div className="w-32">
-                <SelectInput
-                  id="backend-select"
-                  label=""
-                  value={selectedBackend}
-                  onChange={(value) => handleBackendChange(value || 'llama-cpp')}
-                  options={BACKEND_OPTIONS}
-                  className="text-sm"
-                />
-              </div>
-
-              {selectedBackend === 'llama-cpp' && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => fetchBackendInfo(selectedBackend)}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    <RefreshCw className="h-4 w-4" />
-                  )}
-                </Button>
-              )}
-            </div>
-          </div>
+          <DialogTitle className="flex items-center gap-2">
+            <Monitor className="h-5 w-5" />
+            System Information
+          </DialogTitle>
+          <DialogDescription>
+            View system and backend-specific environment and capabilities
+          </DialogDescription>
         </DialogHeader>
 
         <div className="flex-1 overflow-y-auto">
-          {renderBackendContent()}
+          <div className="space-y-6">
+            {/* Llamactl Version Section - Always shown */}
+            <div className="space-y-3">
+              <h3 className="font-semibold">Llamactl Version</h3>
+              <div className="bg-gray-900 rounded-lg p-4">
+                <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+                  {getAppVersion()}
+                </pre>
+              </div>
+            </div>
+
+            {/* Backend Selection Section */}
+            <div className="space-y-3">
+              <h3 className="font-semibold">Backend Information</h3>
+              <div className="flex items-center gap-3">
+                <div className="flex-1">
+                  <SelectInput
+                    id="backend-select"
+                    label=""
+                    value={selectedBackend}
+                    onChange={(value) => handleBackendChange(value || BackendType.LLAMA_CPP)}
+                    options={BACKEND_OPTIONS}
+                    className="text-sm"
+                  />
+                </div>
+                {selectedBackend === BackendType.LLAMA_CPP && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void fetchBackendInfo(selectedBackend)}
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <RefreshCw className="h-4 w-4" />
+                    )}
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Backend-specific content */}
+            {renderBackendSpecificContent()}
+          </div>
         </div>
 
         <DialogFooter>
@@ -271,4 +271,4 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
   )
 }
 
-export default BackendInfoDialog
\ No newline at end of file
+export default SystemInfoDialog
\ No newline at end of file
diff --git a/webui/src/components/instance/BackendConfigurationCard.tsx b/webui/src/components/instance/BackendConfigurationCard.tsx
index 3e5e43f..5bf7c36 100644
--- a/webui/src/components/instance/BackendConfigurationCard.tsx
+++ b/webui/src/components/instance/BackendConfigurationCard.tsx
@@ -37,9 +37,9 @@ const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
           value={formData.backend_type || BackendType.LLAMA_CPP}
           onChange={(value) => onChange('backend_type', value)}
           options={[
-            { value: BackendType.LLAMA_CPP, label: 'Llama Server (llama_cpp)' },
-            { value: BackendType.MLX_LM, label: 'MLX LM (mlx_lm)' },
-            { value: BackendType.VLLM, label: 'vLLM (vllm)' }
+            { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
+            { value: BackendType.MLX_LM, label: 'MLX LM' },
+            { value: BackendType.VLLM, label: 'vLLM' }
           ]}
           description="Select the backend server type"
         />