feat: native folder/file picker, persistent config, and model management
This commit is contained in:
1 parent
d1d77b83ef
commit
2cac674cba
5 files changed
+506
-195
No files matched your search
@@ -21,6 +21,22 @@ interface ModelFile {
|
||||
path: string;
|
||||
}
|
||||
|
||||
interface PickDirResult {
|
||||
dir: string;
|
||||
models: ModelFile[];
|
||||
}
|
||||
|
||||
interface AppConfig {
|
||||
models_dir?: string;
|
||||
model_path?: string;
|
||||
addr?: string;
|
||||
gpu_layers?: number;
|
||||
ctx_size?: number;
|
||||
api_key?: string;
|
||||
server_url?: string;
|
||||
extra_model_paths?: string[];
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<ProcessStatus, string> = {
|
||||
stopped: "Stopped",
|
||||
starting: "Starting…",
|
||||
@@ -37,108 +53,190 @@ const STATUS_COLOR: Record<ProcessStatus, string> = {
|
||||
error: "#ef4444",
|
||||
};
|
||||
|
||||
const DEFAULT_MODELS_DIR = "models";
|
||||
const DEFAULT_CTX = 4096;
|
||||
const CTX_PRESETS = [512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072];
|
||||
|
||||
export default function ServerPanel({ status, message, onStart, onStop }: Props) {
|
||||
const [modelsDir, setModelsDir] = useState(
|
||||
() => localStorage.getItem("forgelm_models_dir") || DEFAULT_MODELS_DIR
|
||||
);
|
||||
const [modelsDir, setModelsDir] = useState<string>("");
|
||||
const [scannedModels, setScannedModels] = useState<ModelFile[]>([]);
|
||||
const [selectedModel, setSelectedModel] = useState(
|
||||
() => localStorage.getItem("forgelm_model_path") || ""
|
||||
);
|
||||
const [addr, setAddr] = useState(
|
||||
() => localStorage.getItem("forgelm_server_addr") || "127.0.0.1:8080"
|
||||
);
|
||||
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 [extraModels, setExtraModels] = useState<ModelFile[]>([]);
|
||||
const [selectedModel, setSelectedModel] = useState<string>("");
|
||||
const [addr, setAddr] = useState("127.0.0.1:8080");
|
||||
const [gpuLayers, setGpuLayers] = useState(0);
|
||||
const [ctxSize, setCtxSize] = useState(DEFAULT_CTX);
|
||||
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 [configLoaded, setConfigLoaded] = useState(false);
|
||||
const dropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scanModels = useCallback(async (dir: string) => {
|
||||
// All models = scanned from dir + extra picked files (deduplicated by path)
|
||||
const allModels: ModelFile[] = [
|
||||
...scannedModels,
|
||||
...extraModels.filter((e) => !scannedModels.some((s) => s.path === e.path)),
|
||||
];
|
||||
|
||||
// ── Persist config to app data dir ──────────────────────────────────────────
|
||||
const persistConfig = useCallback(
|
||||
async (overrides: Partial<AppConfig> = {}) => {
|
||||
const cfg: AppConfig = {
|
||||
models_dir: modelsDir || undefined,
|
||||
model_path: selectedModel || undefined,
|
||||
addr,
|
||||
gpu_layers: gpuLayers,
|
||||
ctx_size: ctxSize,
|
||||
extra_model_paths: extraModels.map((m) => m.path),
|
||||
...overrides,
|
||||
};
|
||||
try {
|
||||
await invoke("save_config", { config: cfg });
|
||||
} catch {
|
||||
// Fallback to localStorage if not in Tauri context
|
||||
localStorage.setItem("forgelm_config", JSON.stringify(cfg));
|
||||
}
|
||||
},
|
||||
[modelsDir, selectedModel, addr, gpuLayers, ctxSize, extraModels]
|
||||
);
|
||||
|
||||
// ── Load config on mount ─────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
const loadConfig = async () => {
|
||||
let cfg: AppConfig = {};
|
||||
try {
|
||||
cfg = await invoke<AppConfig>("load_config");
|
||||
} catch {
|
||||
// Fallback: try localStorage
|
||||
const raw = localStorage.getItem("forgelm_config");
|
||||
if (raw) {
|
||||
try { cfg = JSON.parse(raw); } catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
if (cfg.addr) setAddr(cfg.addr);
|
||||
if (cfg.gpu_layers !== undefined) setGpuLayers(cfg.gpu_layers);
|
||||
if (cfg.ctx_size !== undefined) setCtxSize(cfg.ctx_size);
|
||||
if (cfg.model_path) setSelectedModel(cfg.model_path);
|
||||
|
||||
// Restore extra model paths
|
||||
if (cfg.extra_model_paths?.length) {
|
||||
const extras: ModelFile[] = cfg.extra_model_paths.map((p) => ({
|
||||
name: p.split(/[\\/]/).pop() ?? p,
|
||||
path: p,
|
||||
}));
|
||||
setExtraModels(extras);
|
||||
}
|
||||
|
||||
// Restore models dir and scan it
|
||||
if (cfg.models_dir) {
|
||||
setModelsDir(cfg.models_dir);
|
||||
setConfigLoaded(true); // trigger scan in next effect
|
||||
} else {
|
||||
setConfigLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
loadConfig();
|
||||
// Detect GPU
|
||||
invoke<GpuInfo>("query_gpu")
|
||||
.then((info) => {
|
||||
setGpuInfo(info);
|
||||
setGpuLayers((prev) => prev || info.recommended_layers);
|
||||
})
|
||||
.catch((e) => setGpuError(String(e)));
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Scan models dir once config is loaded
|
||||
useEffect(() => {
|
||||
if (configLoaded && modelsDir) {
|
||||
scanDir(modelsDir);
|
||||
}
|
||||
}, [configLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// ── Scan directory ───────────────────────────────────────────────────────────
|
||||
const scanDir = useCallback(async (dir: string) => {
|
||||
if (!dir.trim()) return;
|
||||
setScanning(true);
|
||||
setScanError("");
|
||||
try {
|
||||
const models = await invoke<ModelFile[]>("scan_models", { dir: dir.trim() });
|
||||
setScannedModels(models);
|
||||
if (models.length > 0) {
|
||||
const current = localStorage.getItem("forgelm_model_path") || "";
|
||||
const stillValid = models.some((m) => m.path === current);
|
||||
if (!stillValid) {
|
||||
setSelectedModel(models[0].path);
|
||||
}
|
||||
}
|
||||
// Auto-select first if current selection is gone
|
||||
setSelectedModel((prev) => {
|
||||
const allPaths = [
|
||||
...models.map((m) => m.path),
|
||||
...extraModels.map((m) => m.path),
|
||||
];
|
||||
if (prev && allPaths.includes(prev)) return prev;
|
||||
return models[0]?.path ?? extraModels[0]?.path ?? "";
|
||||
});
|
||||
} catch (e) {
|
||||
setScanError(String(e));
|
||||
setScannedModels([]);
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
}, []);
|
||||
}, [extraModels]);
|
||||
|
||||
const importModel = useCallback(async (srcPath: string) => {
|
||||
setImporting(true);
|
||||
setImportError("");
|
||||
// ── Native folder picker ─────────────────────────────────────────────────────
|
||||
const handlePickDir = useCallback(async () => {
|
||||
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);
|
||||
const result = await invoke<PickDirResult>("pick_models_dir");
|
||||
setModelsDir(result.dir);
|
||||
setScannedModels(result.models);
|
||||
if (result.models.length > 0) {
|
||||
setSelectedModel((prev) => {
|
||||
const allPaths = [
|
||||
...result.models.map((m) => m.path),
|
||||
...extraModels.map((m) => m.path),
|
||||
];
|
||||
if (prev && allPaths.includes(prev)) return prev;
|
||||
return result.models[0].path;
|
||||
});
|
||||
}
|
||||
await persistConfig({ models_dir: result.dir });
|
||||
} catch (e) {
|
||||
setImportError(String(e));
|
||||
} finally {
|
||||
setImporting(false);
|
||||
if (String(e) !== "cancelled") setScanError(String(e));
|
||||
}
|
||||
}, [modelsDir, scanModels]);
|
||||
}, [extraModels, persistConfig]);
|
||||
|
||||
// Detect GPU and scan models on mount
|
||||
useEffect(() => {
|
||||
invoke<GpuInfo>("query_gpu")
|
||||
.then((info) => {
|
||||
setGpuInfo(info);
|
||||
if (!localStorage.getItem("forgelm_gpu_layers")) {
|
||||
setGpuLayers(info.recommended_layers);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
setGpuError(String(e));
|
||||
if (!localStorage.getItem("forgelm_gpu_layers")) {
|
||||
setGpuLayers(0);
|
||||
// ── Native file picker (multi-select) ────────────────────────────────────────
|
||||
const handlePickFiles = useCallback(async () => {
|
||||
try {
|
||||
const picked = await invoke<ModelFile[]>("pick_model_files");
|
||||
if (!picked.length) return;
|
||||
setExtraModels((prev) => {
|
||||
const merged = [...prev];
|
||||
for (const m of picked) {
|
||||
if (!merged.some((x) => x.path === m.path)) merged.push(m);
|
||||
}
|
||||
return merged;
|
||||
});
|
||||
// Select the first newly picked model
|
||||
setSelectedModel((prev) => prev || picked[0].path);
|
||||
await persistConfig({
|
||||
extra_model_paths: [
|
||||
...extraModels.map((m) => m.path),
|
||||
...picked.map((m) => m.path),
|
||||
],
|
||||
});
|
||||
} catch (e) {
|
||||
if (String(e) !== "cancelled") setScanError(String(e));
|
||||
}
|
||||
}, [extraModels, persistConfig]);
|
||||
|
||||
scanModels(modelsDir);
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Drag-and-drop handlers
|
||||
// ── Drag-and-drop ────────────────────────────────────────────────────────────
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer.types.includes("Files")) {
|
||||
setIsDragOver(true);
|
||||
}
|
||||
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);
|
||||
}
|
||||
@@ -150,64 +248,69 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
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");
|
||||
const ggufFiles = files.filter((f) => f.name.toLowerCase().endsWith(".gguf"));
|
||||
if (!ggufFiles.length) {
|
||||
setScanError("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.");
|
||||
const newModels: ModelFile[] = [];
|
||||
for (const f of ggufFiles) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const filePath = (f as any).path as string | undefined;
|
||||
if (filePath) {
|
||||
newModels.push({ name: f.name, path: filePath });
|
||||
}
|
||||
}
|
||||
}, [importModel]);
|
||||
|
||||
if (newModels.length) {
|
||||
setExtraModels((prev) => {
|
||||
const merged = [...prev];
|
||||
for (const m of newModels) {
|
||||
if (!merged.some((x) => x.path === m.path)) merged.push(m);
|
||||
}
|
||||
return merged;
|
||||
});
|
||||
setSelectedModel((prev) => prev || newModels[0].path);
|
||||
await persistConfig({
|
||||
extra_model_paths: [
|
||||
...extraModels.map((m) => m.path),
|
||||
...newModels.map((m) => m.path),
|
||||
],
|
||||
});
|
||||
} else {
|
||||
setScanError("Could not read file path. Use 'Add Models…' button instead.");
|
||||
}
|
||||
}, [extraModels, persistConfig]);
|
||||
|
||||
// ── Remove a model from the extra list ───────────────────────────────────────
|
||||
const removeModel = useCallback(async (path: string) => {
|
||||
setExtraModels((prev) => {
|
||||
const next = prev.filter((m) => m.path !== path);
|
||||
persistConfig({ extra_model_paths: next.map((m) => m.path) });
|
||||
return next;
|
||||
});
|
||||
setSelectedModel((prev) => (prev === path ? allModels.find((m) => m.path !== path)?.path ?? "" : prev));
|
||||
}, [allModels, persistConfig]);
|
||||
|
||||
// ── Start / Stop ─────────────────────────────────────────────────────────────
|
||||
const isActive = status === "running" || status === "starting" || status === "stopping";
|
||||
const maxLayers = gpuInfo ? gpuInfo.recommended_layers : 999;
|
||||
const canStart = !!selectedModel.trim() && !isActive;
|
||||
|
||||
const handleStart = () => {
|
||||
localStorage.setItem("forgelm_model_path", selectedModel);
|
||||
localStorage.setItem("forgelm_server_addr", addr);
|
||||
localStorage.setItem("forgelm_gpu_layers", String(gpuLayers));
|
||||
localStorage.setItem("forgelm_models_dir", modelsDir);
|
||||
localStorage.setItem("forgelm_ctx_size", String(ctxSize));
|
||||
const handleStart = async () => {
|
||||
await persistConfig();
|
||||
onStart({ modelPath: selectedModel, addr, gpuLayers, ctxSize });
|
||||
};
|
||||
|
||||
const handleLayersChange = (val: number) => {
|
||||
const clamped = Math.max(0, Math.min(val, maxLayers));
|
||||
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);
|
||||
setGpuLayers(Math.max(0, Math.min(val, maxLayers)));
|
||||
};
|
||||
|
||||
const vramPct = gpuInfo && gpuLayers > 0
|
||||
? 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 */}
|
||||
@@ -246,36 +349,37 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
)}
|
||||
|
||||
{/* Models directory */}
|
||||
<label className="sp-label">Models directory</label>
|
||||
<label className="sp-label">Models folder</label>
|
||||
<div className="sp-dir-row">
|
||||
<input
|
||||
className="sp-input"
|
||||
type="text"
|
||||
value={modelsDir}
|
||||
onChange={(e) => setModelsDir(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleScanDir()}
|
||||
placeholder="models/"
|
||||
disabled={isActive}
|
||||
/>
|
||||
<div className="sp-dir-path" title={modelsDir || "No folder selected"}>
|
||||
{modelsDir ? modelsDir.split(/[\\/]/).pop() : "No folder selected"}
|
||||
</div>
|
||||
<button
|
||||
className="sp-scan-btn"
|
||||
onClick={handleScanDir}
|
||||
disabled={isActive || scanning}
|
||||
title="Scan for .gguf files"
|
||||
onClick={handlePickDir}
|
||||
disabled={isActive}
|
||||
title="Browse for models folder"
|
||||
>
|
||||
📁
|
||||
</button>
|
||||
<button
|
||||
className="sp-scan-btn"
|
||||
onClick={() => modelsDir && scanDir(modelsDir)}
|
||||
disabled={isActive || scanning || !modelsDir}
|
||||
title="Rescan folder"
|
||||
>
|
||||
{scanning ? "…" : "⟳"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Model selector + drag-and-drop zone */}
|
||||
{/* Model list + drop zone */}
|
||||
<label className="sp-label">
|
||||
Model
|
||||
{scannedModels.length > 0 && (
|
||||
<span className="sp-label-hint"> ({scannedModels.length} found)</span>
|
||||
Models
|
||||
{allModels.length > 0 && (
|
||||
<span className="sp-label-hint"> ({allModels.length} available)</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
{/* Drop zone wrapper */}
|
||||
<div
|
||||
ref={dropRef}
|
||||
className={`sp-drop-zone${isDragOver ? " sp-drop-zone--active" : ""}${isActive ? " sp-drop-zone--disabled" : ""}`}
|
||||
@@ -286,43 +390,62 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
{isDragOver && (
|
||||
<div className="sp-drop-overlay">
|
||||
<span className="sp-drop-icon">📦</span>
|
||||
<span>Drop .gguf to import</span>
|
||||
<span>Drop .gguf to add</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{scannedModels.length > 0 ? (
|
||||
{allModels.length > 0 ? (
|
||||
<select
|
||||
className="sp-model-select"
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(e.target.value)}
|
||||
disabled={isActive}
|
||||
>
|
||||
{scannedModels.map((m) => (
|
||||
{allModels.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}
|
||||
/>
|
||||
<div className="sp-no-models">
|
||||
No models found — browse a folder or add files below
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isActive && (
|
||||
<div className="sp-drop-hint">
|
||||
{importing ? "Importing…" : "Drop a .gguf file here to add it"}
|
||||
</div>
|
||||
<div className="sp-drop-hint">Drop .gguf here or use the button below</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Extra models list (removable) */}
|
||||
{extraModels.length > 0 && (
|
||||
<div className="sp-extra-models">
|
||||
{extraModels.map((m) => (
|
||||
<div key={m.path} className="sp-extra-model-item">
|
||||
<span className="sp-extra-model-name" title={m.path}>{m.name}</span>
|
||||
{!isActive && (
|
||||
<button
|
||||
className="sp-extra-model-remove"
|
||||
onClick={() => removeModel(m.path)}
|
||||
title="Remove from list"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add models button */}
|
||||
{!isActive && (
|
||||
<button className="sp-add-models-btn" onClick={handlePickFiles}>
|
||||
<span>+</span> Add Models…
|
||||
</button>
|
||||
)}
|
||||
|
||||
{scanError && <div className="sp-scan-error">{scanError}</div>}
|
||||
{importError && <div className="sp-scan-error">{importError}</div>}
|
||||
|
||||
{/* Context size */}
|
||||
<label className="sp-label">
|
||||
@@ -337,7 +460,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
max={131072}
|
||||
step={512}
|
||||
value={ctxSize}
|
||||
onChange={(e) => handleCtxChange(parseInt(e.target.value, 10) || DEFAULT_CTX)}
|
||||
onChange={(e) => setCtxSize(Math.max(512, Math.min(131072, parseInt(e.target.value, 10) || DEFAULT_CTX)))}
|
||||
disabled={isActive}
|
||||
/>
|
||||
<div className="sp-ctx-presets">
|
||||
@@ -347,7 +470,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
className={`sp-ctx-preset${ctxSize === p ? " sp-ctx-preset--active" : ""}`}
|
||||
onClick={() => setCtxSize(p)}
|
||||
disabled={isActive}
|
||||
title={`Set context to ${p.toLocaleString()} tokens`}
|
||||
title={`${p.toLocaleString()} tokens`}
|
||||
>
|
||||
{p >= 1024 ? `${p / 1024}k` : p}
|
||||
</button>
|
||||
@@ -369,9 +492,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
{/* GPU Layers */}
|
||||
<label className="sp-label">
|
||||
GPU layers
|
||||
{gpuInfo && (
|
||||
<span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>
|
||||
)}
|
||||
{gpuInfo && <span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>}
|
||||
</label>
|
||||
<div className="sp-layers-row">
|
||||
<input
|
||||
@@ -406,7 +527,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action button */}
|
||||
{/* Action buttons */}
|
||||
<div className="sp-actions">
|
||||
{status === "stopped" || status === "error" ? (
|
||||
<button
|
||||
|
||||
Reference in new issue
Block a user