Merge pull request #40 from lordmathis/feat/system-info

feat: rework system info dialog

apidocs/docs.go

@@ -19,6 +19,62 @@ const docTemplate = `{
     "host": "{{.Host}}",
     "basePath": "{{.BasePath}}",
     "paths": {
+        "/backends/llama-cpp/devices": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns a list of available devices for the llama server",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "List available devices for llama server",
+                "responses": {
+                    "200": {
+                        "description": "List of devices",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
+        "/backends/llama-cpp/help": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns the help text for the llama server command",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "Get help for llama server",
+                "responses": {
+                    "200": {
+                        "description": "Help text",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/backends/llama-cpp/parse-command": {
             "post": {
                 "security": [
@@ -76,6 +132,34 @@ const docTemplate = `{
                 }
             }
         },
+        "/backends/llama-cpp/version": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns the version of the llama server command",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "Get version of llama server",
+                "responses": {
+                    "200": {
+                        "description": "Version information",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/backends/mlx/parse-command": {
             "post": {
                 "security": [
@@ -658,90 +742,6 @@ const docTemplate = `{
                 }
             }
         },
-        "/server/devices": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns a list of available devices for the llama server",
-                "tags": [
-                    "server"
-                ],
-                "summary": "List available devices for llama server",
-                "responses": {
-                    "200": {
-                        "description": "List of devices",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
-        "/server/help": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns the help text for the llama server command",
-                "tags": [
-                    "server"
-                ],
-                "summary": "Get help for llama server",
-                "responses": {
-                    "200": {
-                        "description": "Help text",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
-        "/server/version": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns the version of the llama server command",
-                "tags": [
-                    "server"
-                ],
-                "summary": "Get version of llama server",
-                "responses": {
-                    "200": {
-                        "description": "Version information",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
         "/v1/": {
             "post": {
                 "security": [

apidocs/swagger.json

@@ -12,6 +12,62 @@
     },
     "basePath": "/api/v1",
     "paths": {
+        "/backends/llama-cpp/devices": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns a list of available devices for the llama server",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "List available devices for llama server",
+                "responses": {
+                    "200": {
+                        "description": "List of devices",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
+        "/backends/llama-cpp/help": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns the help text for the llama server command",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "Get help for llama server",
+                "responses": {
+                    "200": {
+                        "description": "Help text",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/backends/llama-cpp/parse-command": {
             "post": {
                 "security": [
@@ -69,6 +125,34 @@
                 }
             }
         },
+        "/backends/llama-cpp/version": {
+            "get": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "Returns the version of the llama server command",
+                "tags": [
+                    "backends"
+                ],
+                "summary": "Get version of llama server",
+                "responses": {
+                    "200": {
+                        "description": "Version information",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    "500": {
+                        "description": "Internal Server Error",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/backends/mlx/parse-command": {
             "post": {
                 "security": [
@@ -651,90 +735,6 @@
                 }
             }
         },
-        "/server/devices": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns a list of available devices for the llama server",
-                "tags": [
-                    "server"
-                ],
-                "summary": "List available devices for llama server",
-                "responses": {
-                    "200": {
-                        "description": "List of devices",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
-        "/server/help": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns the help text for the llama server command",
-                "tags": [
-                    "server"
-                ],
-                "summary": "Get help for llama server",
-                "responses": {
-                    "200": {
-                        "description": "Help text",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
-        "/server/version": {
-            "get": {
-                "security": [
-                    {
-                        "ApiKeyAuth": []
-                    }
-                ],
-                "description": "Returns the version of the llama server command",
-                "tags": [
-                    "server"
-                ],
-                "summary": "Get version of llama server",
-                "responses": {
-                    "200": {
-                        "description": "Version information",
-                        "schema": {
-                            "type": "string"
-                        }
-                    },
-                    "500": {
-                        "description": "Internal Server Error",
-                        "schema": {
-                            "type": "string"
-                        }
-                    }
-                }
-            }
-        },
         "/v1/": {
             "post": {
                 "security": [

apidocs/swagger.yaml

@@ -88,6 +88,40 @@ info:
   title: llamactl API
   version: "1.0"
 paths:
+  /backends/llama-cpp/devices:
+    get:
+      description: Returns a list of available devices for the llama server
+      responses:
+        "200":
+          description: List of devices
+          schema:
+            type: string
+        "500":
+          description: Internal Server Error
+          schema:
+            type: string
+      security:
+      - ApiKeyAuth: []
+      summary: List available devices for llama server
+      tags:
+      - backends
+  /backends/llama-cpp/help:
+    get:
+      description: Returns the help text for the llama server command
+      responses:
+        "200":
+          description: Help text
+          schema:
+            type: string
+        "500":
+          description: Internal Server Error
+          schema:
+            type: string
+      security:
+      - ApiKeyAuth: []
+      summary: Get help for llama server
+      tags:
+      - backends
   /backends/llama-cpp/parse-command:
     post:
       consumes:
@@ -124,6 +158,23 @@ paths:
       summary: Parse llama-server command
       tags:
       - backends
+  /backends/llama-cpp/version:
+    get:
+      description: Returns the version of the llama server command
+      responses:
+        "200":
+          description: Version information
+          schema:
+            type: string
+        "500":
+          description: Internal Server Error
+          schema:
+            type: string
+      security:
+      - ApiKeyAuth: []
+      summary: Get version of llama server
+      tags:
+      - backends
   /backends/mlx/parse-command:
     post:
       consumes:
@@ -494,57 +545,6 @@ paths:
       summary: Stop a running instance
       tags:
       - instances
-  /server/devices:
-    get:
-      description: Returns a list of available devices for the llama server
-      responses:
-        "200":
-          description: List of devices
-          schema:
-            type: string
-        "500":
-          description: Internal Server Error
-          schema:
-            type: string
-      security:
-      - ApiKeyAuth: []
-      summary: List available devices for llama server
-      tags:
-      - server
-  /server/help:
-    get:
-      description: Returns the help text for the llama server command
-      responses:
-        "200":
-          description: Help text
-          schema:
-            type: string
-        "500":
-          description: Internal Server Error
-          schema:
-            type: string
-      security:
-      - ApiKeyAuth: []
-      summary: Get help for llama server
-      tags:
-      - server
-  /server/version:
-    get:
-      description: Returns the version of the llama server command
-      responses:
-        "200":
-          description: Version information
-          schema:
-            type: string
-        "500":
-          description: Internal Server Error
-          schema:
-            type: string
-      security:
-      - ApiKeyAuth: []
-      summary: Get version of llama server
-      tags:
-      - server
   /v1/:
     post:
       consumes:

pkg/server/handlers.go

@@ -51,12 +51,12 @@ func (h *Handler) VersionHandler() http.HandlerFunc {
 // LlamaServerHelpHandler godoc
 // @Summary Get help for llama server
 // @Description Returns the help text for the llama server command
-// @Tags server
+// @Tags backends
 // @Security ApiKeyAuth
 // @Produces text/plain
 // @Success 200 {string} string "Help text"
 // @Failure 500 {string} string "Internal Server Error"
-// @Router /server/help [get]
+// @Router /backends/llama-cpp/help [get]
 func (h *Handler) LlamaServerHelpHandler() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		helpCmd := exec.Command("llama-server", "--help")
@@ -73,12 +73,12 @@ func (h *Handler) LlamaServerHelpHandler() http.HandlerFunc {
 // LlamaServerVersionHandler godoc
 // @Summary Get version of llama server
 // @Description Returns the version of the llama server command
-// @Tags server
+// @Tags backends
 // @Security ApiKeyAuth
 // @Produces text/plain
 // @Success 200 {string} string "Version information"
 // @Failure 500 {string} string "Internal Server Error"
-// @Router /server/version [get]
+// @Router /backends/llama-cpp/version [get]
 func (h *Handler) LlamaServerVersionHandler() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		versionCmd := exec.Command("llama-server", "--version")
@@ -95,12 +95,12 @@ func (h *Handler) LlamaServerVersionHandler() http.HandlerFunc {
 // LlamaServerListDevicesHandler godoc
 // @Summary List available devices for llama server
 // @Description Returns a list of available devices for the llama server
-// @Tags server
+// @Tags backends
 // @Security ApiKeyAuth
 // @Produces text/plain
 // @Success 200 {string} string "List of devices"
 // @Failure 500 {string} string "Internal Server Error"
-// @Router /server/devices [get]
+// @Router /backends/llama-cpp/devices [get]
 func (h *Handler) LlamaServerListDevicesHandler() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		listCmd := exec.Command("llama-server", "--list-devices")

pkg/server/routes.go

@@ -44,15 +44,12 @@ func SetupRouter(handler *Handler) *chi.Mux {
 
 		r.Get("/version", handler.VersionHandler()) // Get server version
 
-		r.Route("/server", func(r chi.Router) {
-			r.Get("/help", handler.LlamaServerHelpHandler())
-			r.Get("/version", handler.LlamaServerVersionHandler())
-			r.Get("/devices", handler.LlamaServerListDevicesHandler())
-		})
-
 		// Backend-specific endpoints
 		r.Route("/backends", func(r chi.Router) {
 			r.Route("/llama-cpp", func(r chi.Router) {
+				r.Get("/help", handler.LlamaServerHelpHandler())
+				r.Get("/version", handler.LlamaServerVersionHandler())
+				r.Get("/devices", handler.LlamaServerListDevicesHandler())
 				r.Post("/parse-command", handler.ParseLlamaCommand())
 			})
 			r.Route("/mlx", func(r chi.Router) {

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.LLAMA_CPP && 'Llama Server'}
-                {backendType === BackendType.MLX_LM && 'MLX LM (mlx_lm)'}
+                {backendType === BackendType.MLX_LM && 'MLX LM'}
-                {backendType === BackendType.VLLM && 'vLLM (vllm)'}
+                {backendType === BackendType.VLLM && 'vLLM'}
               </span>
             </Label>
           </div>

webui/src/components/SystemInfoDialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import SelectInput from '@/components/form/SelectInput'
 import {
   RefreshCw,
   AlertCircle,
@@ -15,9 +16,11 @@ import {
   ChevronDown,
   ChevronRight,
   Monitor,
-  HelpCircle
+  HelpCircle,
+  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 => {
@@ -28,28 +31,41 @@ const getAppVersion = (): string => {
   }
 }
 
-interface SystemInfoModalProps {
+interface SystemInfoDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-interface SystemInfo {
+interface BackendInfo {
   version: string
   devices: string
   help: string
 }
 
-const SystemInfoDialog: React.FC<SystemInfoModalProps> = ({
+const BACKEND_OPTIONS = [
+  { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
+  { value: BackendType.MLX_LM, label: 'MLX LM' },
+  { value: BackendType.VLLM, label: 'vLLM' },
+]
+
+const SystemInfoDialog: React.FC<SystemInfoDialogProps> = ({
   open,
   onOpenChange
 }) => {
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
+  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 system info
+  // Fetch backend info
-  const fetchSystemInfo = async () => {
+  const fetchBackendInfo = async (backend: BackendTypeValue) => {
+    if (backend !== BackendType.LLAMA_CPP) {
+      setBackendInfo(null)
+      setError(null)
+      return
+    }
+
     setLoading(true)
     setError(null)
 
@@ -60,134 +76,189 @@ const SystemInfoDialog: React.FC<SystemInfoModalProps> = ({
         serverApi.getHelp()
       ])
 
-      setSystemInfo({ version, devices, help })
+      setBackendInfo({ version, devices, help })
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch system info')
+      setError(err instanceof Error ? err.message : 'Failed to fetch backend info')
     } finally {
       setLoading(false)
     }
   }
 
-  // Load data when dialog opens
+  // Load data when dialog opens or backend changes
   useEffect(() => {
     if (open) {
-      fetchSystemInfo()
+      void fetchBackendInfo(selectedBackend)
     }
-  }, [open])
+  }, [open, selectedBackend])
+
+  const handleBackendChange = (value: string) => {
+    setSelectedBackend(value as BackendTypeValue)
+    setShowHelp(false) // Reset help section when switching backends
+  }
+
+  const renderBackendSpecificContent = () => {
+    if (selectedBackend !== BackendType.LLAMA_CPP) {
+      return (
+        <div className="flex items-center justify-center py-8">
+          <div className="text-center space-y-3">
+            <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">
+                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-8">
+          <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">
+        {/* 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} >
+    <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">
+          <DialogTitle className="flex items-center gap-2">
-            <div>
+            <Monitor className="h-5 w-5" />
-              <DialogTitle className="flex items-center gap-2">
+            System Information
-                <Monitor className="h-5 w-5" />
+          </DialogTitle>
-                System Information
+          <DialogDescription>
-              </DialogTitle>
+            View system and backend-specific environment and capabilities
-              <DialogDescription>
+          </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="space-y-6">
-            <div className="flex items-center justify-center py-12">
+            {/* Llamactl Version Section - Always shown */}
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+            <div className="space-y-3">
-              <span className="ml-2 text-gray-400">Loading system information...</span>
+              <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>
-          ) : 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">
+            {/* Backend Selection Section */}
-                  <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+            <div className="space-y-3">
-                    {getAppVersion()}
+              <h3 className="font-semibold">Backend Information</h3>
-                  </pre>
+              <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>
-              </div>
+                {selectedBackend === BackendType.LLAMA_CPP && (
-
+                  <Button
-              {/* Llama Server Version Section */}
+                    variant="outline"
-              <div className="space-y-3">
+                    size="sm"
-                <h3 className="font-semibold">Llama Server Version</h3>
+                    onClick={() => void fetchBackendInfo(selectedBackend)}
-                
+                    disabled={loading}
-                <div className="bg-gray-900 rounded-lg p-4">
+                  >
-                  <div className="mb-2">
+                    {loading ? (
-                    <span className="text-sm text-gray-400">$ llama-server --version</span>
+                      <Loader2 className="h-4 w-4 animate-spin" />
-                  </div>
+                    ) : (
-                  <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+                      <RefreshCw className="h-4 w-4" />
-                    {systemInfo.version}
+                    )}
-                  </pre>
+                  </Button>
-                </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}
+
+            {/* Backend-specific content */}
+            {renderBackendSpecificContent()}
+          </div>
         </div>
 
         <DialogFooter>

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.LLAMA_CPP, label: 'Llama Server' },
-            { value: BackendType.MLX_LM, label: 'MLX LM (mlx_lm)' },
+            { value: BackendType.MLX_LM, label: 'MLX LM' },
-            { value: BackendType.VLLM, label: 'vLLM (vllm)' }
+            { value: BackendType.VLLM, label: 'vLLM' }
           ]}
           description="Select the backend server type"
         />

webui/src/lib/api.ts

@@ -63,16 +63,16 @@ async function apiCall<T>(
   }
 }
 
-// Server API functions
+// Server API functions (moved to llama-cpp backend)
 export const serverApi = {
-  // GET /server/help
+  // GET /backends/llama-cpp/help
-  getHelp: () => apiCall<string>("/server/help", {}, "text"),
+  getHelp: () => apiCall<string>("/backends/llama-cpp/help", {}, "text"),
 
-  // GET /server/version
+  // GET /backends/llama-cpp/version
-  getVersion: () => apiCall<string>("/server/version", {}, "text"),
+  getVersion: () => apiCall<string>("/backends/llama-cpp/version", {}, "text"),
 
-  // GET /server/devices
+  // GET /backends/llama-cpp/devices
-  getDevices: () => apiCall<string>("/server/devices", {}, "text"),
+  getDevices: () => apiCall<string>("/backends/llama-cpp/devices", {}, "text"),
 };
 
 // Backend API functions
@@ -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`),
 };