Replace SystemInfoDialog with BackendInfoDialog and update related references

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 SystemInfoDialog from "./components/SystemInfoDialog";
+import BackendInfoDialog from "./components/BackendInfoDialog";
 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 [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
+  const [isBackendInfoModalOpen, setIsBackendInfoModalOpen] = useState(false);
   const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
     undefined
   );
@@ -37,8 +37,8 @@ function App() {
     }
   };
 
-  const handleShowSystemInfo = () => {
-    setIsSystemInfoModalOpen(true);
+  const handleShowBackendInfo = () => {
+    setIsBackendInfoModalOpen(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={handleShowSystemInfo} />
+        <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowBackendInfo} />
         <main className="container mx-auto max-w-4xl px-4 py-8">
           <InstanceList editInstance={handleEditInstance} />
         </main>
@@ -82,9 +82,9 @@ function App() {
           instance={editingInstance}
         />
 
-        <SystemInfoDialog
-          open={isSystemInfoModalOpen}
-          onOpenChange={setIsSystemInfoModalOpen}
+        <BackendInfoDialog
+          open={isBackendInfoModalOpen}
+          onOpenChange={setIsBackendInfoModalOpen}
         />
         
         <Toaster />

webui/src/components/BackendInfoDialog.tsx

@@ -0,0 +1,274 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import SelectInput from '@/components/form/SelectInput'
+import {
+  RefreshCw,
+  AlertCircle,
+  Loader2,
+  ChevronDown,
+  ChevronRight,
+  Monitor,
+  HelpCircle,
+  Info
+} from 'lucide-react'
+import { serverApi } from '@/lib/api'
+
+// Helper to get version from environment
+const getAppVersion = (): string => {
+  try {
+    return (import.meta.env as Record<string, string>).VITE_APP_VERSION || 'unknown'
+  } catch {
+    return 'unknown'
+  }
+}
+
+interface BackendInfoDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+interface BackendInfo {
+  version: string
+  devices: string
+  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
+
+const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
+  open,
+  onOpenChange
+}) => {
+  const [selectedBackend, setSelectedBackend] = useState<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') {
+      setBackendInfo(null)
+      setError(null)
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const [version, devices, help] = await Promise.all([
+        serverApi.getVersion(),
+        serverApi.getDevices(),
+        serverApi.getHelp()
+      ])
+
+      setBackendInfo({ version, devices, help })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch backend info')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Load data when dialog opens or backend changes
+  useEffect(() => {
+    if (open) {
+      fetchBackendInfo(selectedBackend)
+    }
+  }, [open, selectedBackend])
+
+  const handleBackendChange = (value: string) => {
+    setSelectedBackend(value as BackendType)
+    setShowHelp(false) // Reset help section when switching backends
+  }
+
+  const renderBackendContent = () => {
+    if (selectedBackend !== 'llama-cpp') {
+      return (
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center space-y-3">
+            <Info className="h-12 w-12 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">
+                Information for {BACKEND_OPTIONS.find(b => b.value === selectedBackend)?.label} backend is not yet implemented.
+              </p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    if (loading && !backendInfo) {
+      return (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+          <span className="ml-2 text-gray-400">Loading backend information...</span>
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="flex items-center gap-2 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
+          <AlertCircle className="h-4 w-4 text-destructive" />
+          <span className="text-sm text-destructive">{error}</span>
+        </div>
+      )
+    }
+
+    if (!backendInfo) {
+      return null
+    }
+
+    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">
+            {BACKEND_OPTIONS.find(b => b.value === selectedBackend)?.label} Version
+          </h3>
+
+          <div className="bg-gray-900 rounded-lg p-4">
+            <div className="mb-2">
+              <span className="text-sm text-gray-400">$ llama-server --version</span>
+            </div>
+            <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+              {backendInfo.version}
+            </pre>
+          </div>
+        </div>
+
+        {/* Devices Section */}
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold">Available Devices</h3>
+          </div>
+
+          <div className="bg-gray-900 rounded-lg p-4">
+            <div className="mb-2">
+              <span className="text-sm text-gray-400">$ llama-server --list-devices</span>
+            </div>
+            <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+              {backendInfo.devices}
+            </pre>
+          </div>
+        </div>
+
+        {/* Help Section */}
+        <div className="space-y-3">
+          <Button
+            variant="ghost"
+            onClick={() => setShowHelp(!showHelp)}
+            className="flex items-center gap-2 p-0 h-auto font-semibold"
+          >
+            {showHelp ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+            <HelpCircle className="h-4 w-4" />
+            Command Line Options
+          </Button>
+
+          {showHelp && (
+            <div className="bg-gray-900 rounded-lg p-4">
+              <div className="mb-2">
+                <span className="text-sm text-gray-400">$ llama-server --help</span>
+              </div>
+              <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono max-h-64 overflow-y-auto">
+                {backendInfo.help}
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <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>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          {renderBackendContent()}
+        </div>
+
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default BackendInfoDialog

webui/src/components/SystemInfoDialog.tsx

@@ -1,203 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { 
-  RefreshCw, 
-  AlertCircle,
-  Loader2,
-  ChevronDown,
-  ChevronRight,
-  Monitor,
-  HelpCircle
-} from 'lucide-react'
-import { serverApi } from '@/lib/api'
-
-// Helper to get version from environment
-const getAppVersion = (): string => {
-  try {
-    return (import.meta.env as Record<string, string>).VITE_APP_VERSION || 'unknown'
-  } catch {
-    return 'unknown'
-  }
-}
-
-interface SystemInfoModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-interface SystemInfo {
-  version: string
-  devices: string
-  help: string
-}
-
-const SystemInfoDialog: React.FC<SystemInfoModalProps> = ({
-  open,
-  onOpenChange
-}) => {
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showHelp, setShowHelp] = useState(false)
-
-  // Fetch system info
-  const fetchSystemInfo = async () => {
-    setLoading(true)
-    setError(null)
-    
-    try {
-      const [version, devices, help] = await Promise.all([
-        serverApi.getVersion(),
-        serverApi.getDevices(),
-        serverApi.getHelp()
-      ])
-      
-      setSystemInfo({ version, devices, help })
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch system info')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  // Load data when dialog opens
-  useEffect(() => {
-    if (open) {
-      fetchSystemInfo()
-    }
-  }, [open])
-
-  return (
-    <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" />
-                System Information
-              </DialogTitle>
-              <DialogDescription>
-                Llama.cpp server environment and capabilities
-              </DialogDescription>
-            </div>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={fetchSystemInfo}
-              disabled={loading}
-            >
-              {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <RefreshCw className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto">
-          {loading && !systemInfo ? (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
-              <span className="ml-2 text-gray-400">Loading system information...</span>
-            </div>
-          ) : error ? (
-            <div className="flex items-center gap-2 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
-              <AlertCircle className="h-4 w-4 text-destructive" />
-              <span className="text-sm text-destructive">{error}</span>
-            </div>
-          ) : systemInfo ? (
-            <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>
-
-              {/* Llama Server Version Section */}
-              <div className="space-y-3">
-                <h3 className="font-semibold">Llama Server Version</h3>
-                
-                <div className="bg-gray-900 rounded-lg p-4">
-                  <div className="mb-2">
-                    <span className="text-sm text-gray-400">$ llama-server --version</span>
-                  </div>
-                  <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
-                    {systemInfo.version}
-                  </pre>
-                </div>
-              </div>
-
-              {/* Devices Section */}
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-semibold">Available Devices</h3>
-                </div>
-                
-                <div className="bg-gray-900 rounded-lg p-4">
-                  <div className="mb-2">
-                    <span className="text-sm text-gray-400">$ llama-server --list-devices</span>
-                  </div>
-                  <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
-                    {systemInfo.devices}
-                  </pre>
-                </div>
-              </div>
-
-              {/* Help Section */}
-              <div className="space-y-3">
-                <Button
-                  variant="ghost"
-                  onClick={() => setShowHelp(!showHelp)}
-                  className="flex items-center gap-2 p-0 h-auto font-semibold"
-                >
-                  {showHelp ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
-                  <HelpCircle className="h-4 w-4" />
-                  Command Line Options
-                </Button>
-                
-                {showHelp && (
-                  <div className="bg-gray-900 rounded-lg p-4">
-                    <div className="mb-2">
-                      <span className="text-sm text-gray-400">$ llama-server --help</span>
-                    </div>
-                    <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono max-h-64 overflow-y-auto">
-                      {systemInfo.help}
-                    </pre>
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : null}
-        </div>
-
-        <DialogFooter>
-          <Button onClick={() => onOpenChange(false)}>
-            Close
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default SystemInfoDialog

webui/src/lib/api.ts

@@ -156,5 +156,5 @@ export const instancesApi = {
   },
 
   // GET /instances/{name}/proxy/health
-  getHealth: (name: string) => apiCall<any>(`/instances/${name}/proxy/health`),
+  getHealth: (name: string) => apiCall<Record<string, unknown>>(`/instances/${name}/proxy/health`),
 };