Implement backend configuration options and refactor related components

webui/src/components/BackendFormField.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import type { BackendOptions } from '@/schemas/instanceOptions'
+import { getBackendFieldType, basicBackendFieldsConfig } from '@/lib/zodFormUtils'
+
+interface BackendFormFieldProps {
+  fieldKey: keyof BackendOptions
+  value: string | number | boolean | string[] | undefined
+  onChange: (key: string, value: string | number | boolean | string[] | undefined) => void
+}
+
+const BackendFormField: React.FC<BackendFormFieldProps> = ({ fieldKey, value, onChange }) => {
+  // Get configuration for basic fields, or use field name for advanced fields
+  const config = basicBackendFieldsConfig[fieldKey as string] || { label: fieldKey }
+  
+  // Get type from Zod schema
+  const fieldType = getBackendFieldType(fieldKey)
+
+  const handleChange = (newValue: string | number | boolean | string[] | undefined) => {
+    onChange(fieldKey as string, newValue)
+  }
+
+  const renderField = () => {
+    switch (fieldType) {
+      case 'boolean':
+        return (
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id={fieldKey}
+              checked={typeof value === 'boolean' ? value : false}
+              onCheckedChange={(checked) => handleChange(checked)}
+            />
+            <Label htmlFor={fieldKey} className="text-sm font-normal">
+              {config.label}
+              {config.description && (
+                <span className="text-muted-foreground ml-1">- {config.description}</span>
+              )}
+            </Label>
+          </div>
+        )
+
+      case 'number':
+        return (
+          <div className="grid gap-2">
+            <Label htmlFor={fieldKey}>
+              {config.label}
+              {config.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldKey}
+              type="number"
+              step="any" // This allows decimal numbers
+              value={typeof value === 'string' || typeof value === 'number' ? value : ''}
+              onChange={(e) => {
+                const numValue = e.target.value ? parseFloat(e.target.value) : undefined
+                // Only update if the parsed value is valid or the input is empty
+                if (e.target.value === '' || (numValue !== undefined && !isNaN(numValue))) {
+                  handleChange(numValue)
+                }
+              }}
+              placeholder={config.placeholder}
+            />
+            {config.description && (
+              <p className="text-sm text-muted-foreground">{config.description}</p>
+            )}
+          </div>
+        )
+
+      case 'array':
+        return (
+          <div className="grid gap-2">
+            <Label htmlFor={fieldKey}>
+              {config.label}
+              {config.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldKey}
+              type="text"
+              value={Array.isArray(value) ? value.join(', ') : ''}
+              onChange={(e) => {
+                const arrayValue = e.target.value 
+                  ? e.target.value.split(',').map(s => s.trim()).filter(Boolean)
+                  : undefined
+                handleChange(arrayValue)
+              }}
+              placeholder="item1, item2, item3"
+            />
+            {config.description && (
+              <p className="text-sm text-muted-foreground">{config.description}</p>
+            )}
+            <p className="text-xs text-muted-foreground">Separate multiple values with commas</p>
+          </div>
+        )
+
+      case 'text':
+      default:
+        return (
+          <div className="grid gap-2">
+            <Label htmlFor={fieldKey}>
+              {config.label}
+              {config.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <Input
+              id={fieldKey}
+              type="text"
+              value={typeof value === 'string' || typeof value === 'number' ? value : ''}
+              onChange={(e) => handleChange(e.target.value || undefined)}
+              placeholder={config.placeholder}
+            />
+            {config.description && (
+              <p className="text-sm text-muted-foreground">{config.description}</p>
+            )}
+          </div>
+        )
+    }
+  }
+
+  return <div className="space-y-2">{renderField()}</div>
+}
+
+export default BackendFormField

webui/src/components/InstanceDialog.tsx

@@ -11,9 +11,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import type { CreateInstanceOptions, Instance } from "@/types/instance";
-import { getBasicFields, getAdvancedFields } from "@/lib/zodFormUtils";
+import { BackendType } from "@/types/instance";
+import { getBasicFields, getAdvancedFields, getBasicBackendFields, getAdvancedBackendFields } from "@/lib/zodFormUtils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import ZodFormField from "@/components/ZodFormField";
+import BackendFormField from "@/components/BackendFormField";
 
 interface InstanceDialogProps {
   open: boolean;
@@ -38,6 +40,8 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
   // Get field lists dynamically from the type
   const basicFields = getBasicFields();
   const advancedFields = getAdvancedFields();
+  const basicBackendFields = getBasicBackendFields();
+  const advancedBackendFields = getAdvancedBackendFields();
 
   // Reset form when dialog opens/closes or when instance changes
   useEffect(() => {
@@ -51,6 +55,8 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
         setInstanceName("");
         setFormData({
           auto_restart: true, // Default value
+          backend_type: BackendType.LLAMA_SERVER, // Default backend type
+          backend_options: {},
         });
       }
       setShowAdvanced(false); // Always start with basic view
@@ -65,6 +71,16 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
     }));
   };
 
+  const handleBackendFieldChange = (key: string, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      backend_options: {
+        ...prev.backend_options,
+        [key]: value,
+      },
+    }));
+  };
+
   const handleNameChange = (name: string) => {
     setInstanceName(name);
     // Validate instance name
@@ -89,7 +105,24 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
     // Clean up undefined values to avoid sending empty fields
     const cleanOptions: CreateInstanceOptions = {};
     Object.entries(formData).forEach(([key, value]) => {
-      if (value !== undefined && value !== "" && value !== null) {
+      if (key === 'backend_options' && value && typeof value === 'object') {
+        // Handle backend_options specially - clean nested object
+        const cleanBackendOptions: any = {};
+        Object.entries(value).forEach(([backendKey, backendValue]) => {
+          if (backendValue !== undefined && backendValue !== null && (typeof backendValue !== 'string' || backendValue.trim() !== "")) {
+            // Handle arrays - don't include empty arrays
+            if (Array.isArray(backendValue) && backendValue.length === 0) {
+              return;
+            }
+            cleanBackendOptions[backendKey] = backendValue;
+          }
+        });
+        
+        // Only include backend_options if it has content
+        if (Object.keys(cleanBackendOptions).length > 0) {
+          (cleanOptions as any)[key] = cleanBackendOptions;
+        }
+      } else if (value !== undefined && value !== null && (typeof value !== 'string' || value.trim() !== "")) {
         // Handle arrays - don't include empty arrays
         if (Array.isArray(value) && value.length === 0) {
           return;
@@ -196,8 +229,9 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
                   (fieldKey) =>
                     fieldKey !== "auto_restart" &&
                     fieldKey !== "max_restarts" &&
-                    fieldKey !== "restart_delay"
-                ) // Exclude auto_restart, max_restarts, and restart_delay as they're handled above
+                    fieldKey !== "restart_delay" &&
+                    fieldKey !== "backend_options" // backend_options is handled separately
+                ) 
                 .map((fieldKey) => (
                   <ZodFormField
                     key={fieldKey}
@@ -208,6 +242,21 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
                 ))}
             </div>
 
+            {/* Backend Configuration Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium">Backend Configuration</h3>
+              
+              {/* Basic backend fields */}
+              {basicBackendFields.map((fieldKey) => (
+                <BackendFormField
+                  key={fieldKey}
+                  fieldKey={fieldKey}
+                  value={formData.backend_options?.[fieldKey]}
+                  onChange={handleBackendFieldChange}
+                />
+              ))}
+            </div>
+
             {/* Advanced Fields Toggle */}
             <div className="border-t pt-4">
               <Button
@@ -226,8 +275,8 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
                   {
                     advancedFields.filter(
                       (f) =>
-                        !["max_restarts", "restart_delay"].includes(f as string)
-                    ).length
+                        !["max_restarts", "restart_delay", "backend_options"].includes(f as string)
+                    ).length + advancedBackendFields.length
                   }{" "}
                   options)
                 </span>
@@ -237,24 +286,51 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
             {/* Advanced Fields - Automatically generated from type (excluding restart options) */}
             {showAdvanced && (
               <div className="space-y-4 pl-6 border-l-2 border-muted">
-                <div className="space-y-4">
-                  {advancedFields
-                    .filter(
-                      (fieldKey) =>
-                        !["max_restarts", "restart_delay"].includes(
-                          fieldKey as string
-                        )
-                    ) // Exclude restart options as they're handled above
-                    .sort()
-                    .map((fieldKey) => (
-                      <ZodFormField
-                        key={fieldKey}
-                        fieldKey={fieldKey}
-                        value={formData[fieldKey]}
-                        onChange={handleFieldChange}
-                      />
-                    ))}
-                </div>
+                {/* Advanced instance fields */}
+                {advancedFields
+                  .filter(
+                    (fieldKey) =>
+                      !["max_restarts", "restart_delay", "backend_options"].includes(
+                        fieldKey as string
+                      )
+                  ).length > 0 && (
+                  <div className="space-y-4">
+                    <h4 className="text-md font-medium">Advanced Instance Configuration</h4>
+                    {advancedFields
+                      .filter(
+                        (fieldKey) =>
+                          !["max_restarts", "restart_delay", "backend_options"].includes(
+                            fieldKey as string
+                          )
+                      )
+                      .sort()
+                      .map((fieldKey) => (
+                        <ZodFormField
+                          key={fieldKey}
+                          fieldKey={fieldKey}
+                          value={fieldKey === 'backend_options' ? undefined : formData[fieldKey]}
+                          onChange={handleFieldChange}
+                        />
+                      ))}
+                  </div>
+                )}
+
+                {/* Advanced backend fields */}
+                {advancedBackendFields.length > 0 && (
+                  <div className="space-y-4">
+                    <h4 className="text-md font-medium">Advanced Backend Configuration</h4>
+                    {advancedBackendFields
+                      .sort()
+                      .map((fieldKey) => (
+                        <BackendFormField
+                          key={fieldKey}
+                          fieldKey={fieldKey}
+                          value={formData.backend_options?.[fieldKey]}
+                          onChange={handleBackendFieldChange}
+                        />
+                      ))}
+                  </div>
+                )}
               </div>
             )}
           </div>

webui/src/components/ZodFormField.tsx

@@ -3,6 +3,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 import type { CreateInstanceOptions } from '@/types/instance'
+import { BackendType } from '@/types/instance'
 import { getFieldType, basicFieldsConfig } from '@/lib/zodFormUtils'
 
 interface ZodFormFieldProps {
@@ -23,6 +24,30 @@ const ZodFormField: React.FC<ZodFormFieldProps> = ({ fieldKey, value, onChange }
   }
 
   const renderField = () => {
+    // Special handling for backend_type field - render as dropdown
+    if (fieldKey === 'backend_type') {
+      return (
+        <div className="grid gap-2">
+          <Label htmlFor={fieldKey}>
+            {config.label}
+            {config.required && <span className="text-red-500 ml-1">*</span>}
+          </Label>
+          <select
+            id={fieldKey}
+            value={typeof value === 'string' ? value : BackendType.LLAMA_SERVER}
+            onChange={(e) => handleChange(e.target.value || undefined)}
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <option value={BackendType.LLAMA_SERVER}>Llama Server</option>
+            {/* Add more backend types here as they become available */}
+          </select>
+          {config.description && (
+            <p className="text-sm text-muted-foreground">{config.description}</p>
+          )}
+        </div>
+      )
+    }
+
     switch (fieldType) {
       case 'boolean':
         return (

webui/src/components/__tests__/InstanceCard.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InstanceCard from '@/components/InstanceCard'
 import type { Instance } from '@/types/instance'
+import { BackendType } from '@/types/instance'
 
 // Mock the health hook since we're not testing health logic here
 vi.mock('@/hooks/useInstanceHealth', () => ({
@@ -18,13 +19,13 @@ describe('InstanceCard - Instance Actions and State', () => {
   const stoppedInstance: Instance = {
     name: 'test-instance',
     status: 'stopped',
-    options: { model: 'test-model.gguf' }
+    options: { backend_type: BackendType.LLAMA_SERVER, backend_options: { model: 'test-model.gguf' } }
   }
 
   const runningInstance: Instance = {
     name: 'running-instance',
     status: 'running',
-    options: { model: 'running-model.gguf' }
+    options: { backend_type: BackendType.LLAMA_SERVER, backend_options: { model: 'running-model.gguf' } }
   }
 
 beforeEach(() => {

webui/src/components/__tests__/InstanceList.test.tsx

@@ -5,6 +5,7 @@ import InstanceList from '@/components/InstanceList'
 import { InstancesProvider } from '@/contexts/InstancesContext'
 import { instancesApi } from '@/lib/api'
 import type { Instance } from '@/types/instance'
+import { BackendType } from '@/types/instance'
 import { AuthProvider } from '@/contexts/AuthContext'
 
 // Mock the API
@@ -44,9 +45,9 @@ describe('InstanceList - State Management and UI Logic', () => {
   const mockEditInstance = vi.fn()
 
   const mockInstances: Instance[] = [
-    { name: 'instance-1', status: 'stopped', options: { model: 'model1.gguf' } },
-    { name: 'instance-2', status: 'running', options: { model: 'model2.gguf' } },
-    { name: 'instance-3', status: 'stopped', options: { model: 'model3.gguf' } }
+    { name: 'instance-1', status: 'stopped', options: { backend_type: BackendType.LLAMA_SERVER, backend_options: { model: 'model1.gguf' } } },
+    { name: 'instance-2', status: 'running', options: { backend_type: BackendType.LLAMA_SERVER, backend_options: { model: 'model2.gguf' } } },
+    { name: 'instance-3', status: 'stopped', options: { backend_type: BackendType.LLAMA_SERVER, backend_options: { model: 'model3.gguf' } } }
   ]
 
   const DUMMY_API_KEY = 'test-api-key-123'

webui/src/components/__tests__/InstanceModal.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InstanceDialog from '@/components/InstanceDialog'
 import type { Instance } from '@/types/instance'
+import { BackendType } from '@/types/instance'
 
 describe('InstanceModal - Form Logic and Validation', () => {
   const mockOnSave = vi.fn()
@@ -91,6 +92,7 @@ afterEach(() => {
 
       expect(mockOnSave).toHaveBeenCalledWith('my-instance', {
         auto_restart: true, // Default value
+        backend_type: BackendType.LLAMA_SERVER
       })
     })
 
@@ -136,8 +138,8 @@ afterEach(() => {
       name: 'existing-instance',
       status: 'stopped',
       options: {
-        model: 'test-model.gguf',
-        gpu_layers: 10,
+        backend_type: BackendType.LLAMA_SERVER,
+        backend_options: { model: 'test-model.gguf', gpu_layers: 10 },
         auto_restart: false
       }
     }
@@ -177,8 +179,8 @@ afterEach(() => {
       await user.click(screen.getByTestId('dialog-save-button'))
 
       expect(mockOnSave).toHaveBeenCalledWith('existing-instance', {
-        model: 'test-model.gguf',
-        gpu_layers: 10,
+        backend_type: BackendType.LLAMA_SERVER,
+        backend_options: { model: 'test-model.gguf', gpu_layers: 10 },
         auto_restart: false
       })
     })
@@ -271,6 +273,7 @@ afterEach(() => {
 
       expect(mockOnSave).toHaveBeenCalledWith('test-instance', {
         auto_restart: true,
+        backend_type: BackendType.LLAMA_SERVER,
         max_restarts: 5,
         restart_delay: 10
       })
@@ -321,6 +324,7 @@ afterEach(() => {
       // Should only include non-empty values
       expect(mockOnSave).toHaveBeenCalledWith('clean-instance', {
         auto_restart: true, // Only this default value should be included
+        backend_type: BackendType.LLAMA_SERVER
       })
     })
 
@@ -345,7 +349,8 @@ afterEach(() => {
 
       expect(mockOnSave).toHaveBeenCalledWith('numeric-test', {
         auto_restart: true,
-        gpu_layers: 15, // Should be number, not string
+        backend_type: BackendType.LLAMA_SERVER,
+        backend_options: { gpu_layers: 15 }, // Should be number, not string
       })
     })
   })