feat: drag-and-drop model import and context size configuration

tauri-app/src/components/ServerPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { ProcessStatus, ServerConfig } from "../hooks/useServerProcess";
 import "./ServerPanel.css";
@@ -37,8 +37,8 @@ const STATUS_COLOR: Record<ProcessStatus, string> = {
   error: "#ef4444",
 };
 
-// Default models directory relative to the repo root
 const DEFAULT_MODELS_DIR = "models";
+const DEFAULT_CTX = 4096;
 
 export default function ServerPanel({ status, message, onStart, onStop }: Props) {
   const [modelsDir, setModelsDir] = useState(
@@ -54,11 +54,18 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
   const [gpuLayers, setGpuLayers] = useState(
     () => parseInt(localStorage.getItem("forgelm_gpu_layers") || "0", 10)
   );
+  const [ctxSize, setCtxSize] = useState(
+    () => parseInt(localStorage.getItem("forgelm_ctx_size") || String(DEFAULT_CTX), 10)
+  );
   const [gpuInfo, setGpuInfo] = useState<GpuInfo | null>(null);
   const [gpuError, setGpuError] = useState<string>("");
   const [expanded, setExpanded] = useState(true);
   const [scanning, setScanning] = useState(false);
   const [scanError, setScanError] = useState("");
+  const [importing, setImporting] = useState(false);
+  const [importError, setImportError] = useState("");
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dropRef = useRef<HTMLDivElement>(null);
 
   const scanModels = useCallback(async (dir: string) => {
     if (!dir.trim()) return;
@@ -67,7 +74,6 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     try {
       const models = await invoke<ModelFile[]>("scan_models", { dir: dir.trim() });
       setScannedModels(models);
-      // Auto-select first model if none selected or current not in list
       if (models.length > 0) {
         const current = localStorage.getItem("forgelm_model_path") || "";
         const stillValid = models.some((m) => m.path === current);
@@ -83,6 +89,24 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     }
   }, []);
 
+  const importModel = useCallback(async (srcPath: string) => {
+    setImporting(true);
+    setImportError("");
+    try {
+      const model = await invoke<ModelFile>("import_model", {
+        srcPath,
+        destDir: modelsDir.trim() || DEFAULT_MODELS_DIR,
+      });
+      // Refresh model list and select the imported model
+      await scanModels(modelsDir.trim() || DEFAULT_MODELS_DIR);
+      setSelectedModel(model.path);
+    } catch (e) {
+      setImportError(String(e));
+    } finally {
+      setImporting(false);
+    }
+  }, [modelsDir, scanModels]);
+
   // Detect GPU and scan models on mount
   useEffect(() => {
     invoke<GpuInfo>("query_gpu")
@@ -102,6 +126,54 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     scanModels(modelsDir);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Drag-and-drop handlers
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) {
+      setIsDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only clear if leaving the drop zone itself (not a child)
+    if (dropRef.current && !dropRef.current.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    const gguf = files.find((f) => f.name.toLowerCase().endsWith(".gguf"));
+    if (!gguf) {
+      setImportError("Only .gguf files are supported");
+      return;
+    }
+
+    // Tauri exposes the real path via the file object's path property
+    // In Tauri v2, we can read it from the dataTransfer items
+    const item = e.dataTransfer.items[files.indexOf(gguf)];
+    const entry = item?.webkitGetAsEntry?.();
+    // The actual file path is available as a non-standard property in Tauri's webview
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const filePath = (gguf as any).path as string | undefined;
+
+    if (filePath) {
+      await importModel(filePath);
+    } else if (entry) {
+      // Fallback: use the file name to construct path (best effort)
+      setImportError("Could not read file path. Try using the scan button after copying the file manually.");
+    } else {
+      setImportError("Could not read file path from drop event.");
+    }
+  }, [importModel]);
+
   const isActive = status === "running" || status === "starting" || status === "stopping";
   const maxLayers = gpuInfo ? gpuInfo.recommended_layers : 999;
   const canStart = !!selectedModel.trim() && !isActive;
@@ -111,7 +183,8 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     localStorage.setItem("forgelm_server_addr", addr);
     localStorage.setItem("forgelm_gpu_layers", String(gpuLayers));
     localStorage.setItem("forgelm_models_dir", modelsDir);
-    onStart({ modelPath: selectedModel, addr, gpuLayers });
+    localStorage.setItem("forgelm_ctx_size", String(ctxSize));
+    onStart({ modelPath: selectedModel, addr, gpuLayers, ctxSize });
   };
 
   const handleLayersChange = (val: number) => {
@@ -119,6 +192,11 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     setGpuLayers(clamped);
   };
 
+  const handleCtxChange = (val: number) => {
+    const clamped = Math.max(512, Math.min(131072, val));
+    setCtxSize(clamped);
+  };
+
   const handleScanDir = () => {
     localStorage.setItem("forgelm_models_dir", modelsDir);
     scanModels(modelsDir);
@@ -128,6 +206,8 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
     ? Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)
     : 0;
 
+  const CTX_PRESETS = [512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072];
+
   return (
     <div className="server-panel">
       {/* Header */}
@@ -187,37 +267,93 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
             </button>
           </div>
 
-          {/* Model selector */}
+          {/* Model selector + drag-and-drop zone */}
           <label className="sp-label">
             Model
             {scannedModels.length > 0 && (
               <span className="sp-label-hint"> ({scannedModels.length} found)</span>
             )}
           </label>
-          {scannedModels.length > 0 ? (
-            <select
-              className="sp-model-select"
-              value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
-              disabled={isActive}
-            >
-              {scannedModels.map((m) => (
-                <option key={m.path} value={m.path} title={m.path}>
-                  {m.name}
-                </option>
-              ))}
-            </select>
-          ) : (
+
+          {/* Drop zone wrapper */}
+          <div
+            ref={dropRef}
+            className={`sp-drop-zone${isDragOver ? " sp-drop-zone--active" : ""}${isActive ? " sp-drop-zone--disabled" : ""}`}
+            onDragOver={!isActive ? handleDragOver : undefined}
+            onDragLeave={!isActive ? handleDragLeave : undefined}
+            onDrop={!isActive ? handleDrop : undefined}
+          >
+            {isDragOver && (
+              <div className="sp-drop-overlay">
+                <span className="sp-drop-icon">📦</span>
+                <span>Drop .gguf to import</span>
+              </div>
+            )}
+
+            {scannedModels.length > 0 ? (
+              <select
+                className="sp-model-select"
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                disabled={isActive}
+              >
+                {scannedModels.map((m) => (
+                  <option key={m.path} value={m.path} title={m.path}>
+                    {m.name}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                className="sp-input"
+                type="text"
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                placeholder="path/to/model.gguf"
+                disabled={isActive}
+              />
+            )}
+
+            {!isActive && (
+              <div className="sp-drop-hint">
+                {importing ? "Importing…" : "Drop a .gguf file here to add it"}
+              </div>
+            )}
+          </div>
+
+          {scanError && <div className="sp-scan-error">{scanError}</div>}
+          {importError && <div className="sp-scan-error">{importError}</div>}
+
+          {/* Context size */}
+          <label className="sp-label">
+            Context size
+            <span className="sp-label-hint"> (tokens)</span>
+          </label>
+          <div className="sp-ctx-row">
             <input
-              className="sp-input"
-              type="text"
-              value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
-              placeholder="path/to/model.gguf"
+              className="sp-input sp-input-num"
+              type="number"
+              min={512}
+              max={131072}
+              step={512}
+              value={ctxSize}
+              onChange={(e) => handleCtxChange(parseInt(e.target.value, 10) || DEFAULT_CTX)}
               disabled={isActive}
             />
-          )}
-          {scanError && <div className="sp-scan-error">{scanError}</div>}
+            <div className="sp-ctx-presets">
+              {CTX_PRESETS.map((p) => (
+                <button
+                  key={p}
+                  className={`sp-ctx-preset${ctxSize === p ? " sp-ctx-preset--active" : ""}`}
+                  onClick={() => setCtxSize(p)}
+                  disabled={isActive}
+                  title={`Set context to ${p.toLocaleString()} tokens`}
+                >
+                  {p >= 1024 ? `${p / 1024}k` : p}
+                </button>
+              ))}
+            </div>
+          </div>
 
           {/* Address */}
           <label className="sp-label">Listen address</label>