Implement llama-server command parsing and add UI components for command input

webui/src/components/InstanceDialog.tsx

@@ -12,9 +12,10 @@ import {
 } from "@/components/ui/dialog";
 import { BackendType, type CreateInstanceOptions, type Instance } from "@/types/instance";
 import { getBasicFields, getAdvancedFields, getBasicBackendFields, getAdvancedBackendFields } from "@/lib/zodFormUtils";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, Terminal } from "lucide-react";
 import ZodFormField from "@/components/ZodFormField";
 import BackendFormField from "@/components/BackendFormField";
+import ParseCommandDialog from "@/components/ParseCommandDialog";
 
 interface InstanceDialogProps {
   open: boolean;
@@ -35,6 +36,7 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
   const [formData, setFormData] = useState<CreateInstanceOptions>({});
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [nameError, setNameError] = useState("");
+  const [showParseDialog, setShowParseDialog] = useState(false);
 
   // Get field lists dynamically from the type
   const basicFields = getBasicFields();
@@ -142,6 +144,14 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
     setShowAdvanced(!showAdvanced);
   };
 
+  const handleCommandParsed = (parsedOptions: CreateInstanceOptions) => {
+    setFormData(prev => ({
+      ...prev,
+      ...parsedOptions,
+    }));
+    setShowParseDialog(false);
+  };
+
   // Check if auto_restart is enabled
   const isAutoRestartEnabled = formData.auto_restart === true;
 
@@ -258,28 +268,39 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
 
             {/* Advanced Fields Toggle */}
             <div className="border-t pt-4">
-              <Button
-                variant="ghost"
-                onClick={toggleAdvanced}
-                className="flex items-center gap-2 p-0 h-auto font-medium"
-              >
-                {showAdvanced ? (
-                  <ChevronDown className="h-4 w-4" />
-                ) : (
-                  <ChevronRight className="h-4 w-4" />
-                )}
-                Advanced Configuration
-                <span className="text-muted-foreground text-sm font-normal">
-                  (
-                  {
-                    advancedFields.filter(
-                      (f) =>
-                        !["max_restarts", "restart_delay", "backend_options"].includes(f as string)
-                    ).length + advancedBackendFields.length
-                  }{" "}
-                  options)
-                </span>
-              </Button>
+              <div className="flex items-center justify-between">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowParseDialog(true)}
+                  className="flex items-center gap-2"
+                >
+                  <Terminal className="h-4 w-4" />
+                  Parse Command
+                </Button>
+                
+                <Button
+                  variant="ghost"
+                  onClick={toggleAdvanced}
+                  className="flex items-center gap-2 p-0 h-auto font-medium"
+                >
+                  {showAdvanced ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                  Advanced Configuration
+                  <span className="text-muted-foreground text-sm font-normal">
+                    (
+                    {
+                      advancedFields.filter(
+                        (f) =>
+                          !["max_restarts", "restart_delay", "backend_options"].includes(f as string)
+                      ).length + advancedBackendFields.length
+                    }{" "}
+                    options)
+                  </span>
+                </Button>
+              </div>
             </div>
 
             {/* Advanced Fields - Automatically generated from type (excluding restart options) */}
@@ -352,6 +373,12 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
           </Button>
         </DialogFooter>
       </DialogContent>
+      
+      <ParseCommandDialog
+        open={showParseDialog}
+        onOpenChange={setShowParseDialog}
+        onParsed={handleCommandParsed}
+      />
     </Dialog>
   );
 };

webui/src/components/ParseCommandDialog.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { type CreateInstanceOptions } from "@/types/instance";
+import { backendsApi } from "@/lib/api";
+import { toast } from "sonner";
+
+interface ParseCommandDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onParsed: (options: CreateInstanceOptions) => void;
+}
+
+const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
+  open,
+  onOpenChange,
+  onParsed,
+}) => {
+  const [command, setCommand] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleParse = async () => {
+    if (!command.trim()) {
+      setError("Command cannot be empty");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const options = await backendsApi.llamaCpp.parseCommand(command);
+      onParsed(options);
+      onOpenChange(false);
+      // Reset form
+      setCommand('');
+      setError(null);
+      // Show success toast
+      toast.success('Command parsed successfully');
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to parse command';
+      setError(errorMessage);
+      // Show error toast
+      toast.error('Failed to parse command', {
+        description: errorMessage
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      // Reset form when closing
+      setCommand('');
+      setError(null);
+    }
+    onOpenChange(open);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Parse Llama Server Command</DialogTitle>
+          <DialogDescription>
+            Paste your llama-server command to automatically populate the form fields
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="command">Command</Label>
+            <textarea
+              id="command"
+              value={command}
+              onChange={(e) => setCommand(e.target.value)}
+              placeholder="llama-server --model /path/to/model.gguf --gpu-layers 32 --ctx-size 4096"
+              className="w-full h-32 p-3 border border-input rounded-md font-mono text-sm resize-vertical focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            />
+          </div>
+          
+          {error && (
+            <div className="text-destructive text-sm bg-destructive/10 p-3 rounded-md">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button 
+            onClick={() => {
+              handleParse().catch(console.error);
+            }}
+            disabled={!command.trim() || loading}
+          >
+            {loading ? 'Parsing...' : 'Parse Command'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ParseCommandDialog;