@appkit/llamacpp-cli 1.12.0 → 1.12.1

package/web/src/components/SearchModal.tsx

@@ -1,306 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { X, Search, Download, ArrowLeft, Loader2, HardDrive, Heart, ChevronRight } from 'lucide-react';
-import { useSearchModels, useModelFiles, useDownloadModel, useDownloadJob } from '../hooks/useApi';
-import type { HFModelResult } from '../types/api';
-
-interface SearchModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onDownloadComplete: () => void;
-}
-
-type ModalState = 'search' | 'files' | 'downloading';
-
-export function SearchModal({ isOpen, onClose, onDownloadComplete }: SearchModalProps) {
-  const [state, setState] = useState<ModalState>('search');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedModel, setSelectedModel] = useState<HFModelResult | null>(null);
-  const [activeJobId, setActiveJobId] = useState<string | null>(null);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const searchMutation = useSearchModels();
-  const downloadMutation = useDownloadModel();
-
-  const { data: filesData, isLoading: filesLoading } = useModelFiles(
-    state === 'files' && selectedModel ? selectedModel.modelId : null
-  );
-
-  const { data: jobData } = useDownloadJob(activeJobId);
-
-  // Focus input when modal opens
-  useEffect(() => {
-    if (isOpen && state === 'search') {
-      setTimeout(() => inputRef.current?.focus(), 100);
-    }
-  }, [isOpen, state]);
-
-  // Reset state when modal closes
-  useEffect(() => {
-    if (!isOpen) {
-      setState('search');
-      setSearchQuery('');
-      setSelectedModel(null);
-      setActiveJobId(null);
-      searchMutation.reset();
-    }
-  }, [isOpen]);
-
-  // Handle download completion
-  useEffect(() => {
-    if (jobData?.job?.status === 'completed') {
-      onDownloadComplete();
-      onClose();
-    } else if (jobData?.job?.status === 'failed') {
-      // Stay in downloading state to show error
-    }
-  }, [jobData?.job?.status, onDownloadComplete, onClose]);
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      searchMutation.mutate({ query: searchQuery.trim() });
-    }
-  };
-
-  const handleSelectModel = (model: HFModelResult) => {
-    setSelectedModel(model);
-    setState('files');
-  };
-
-  const handleDownload = async (filename: string) => {
-    if (!selectedModel) return;
-
-    try {
-      const result = await downloadMutation.mutateAsync({
-        repo: selectedModel.modelId,
-        filename,
-      });
-      setActiveJobId(result.jobId);
-      setState('downloading');
-    } catch (error) {
-      // Error handled by mutation
-    }
-  };
-
-  const handleBack = () => {
-    if (state === 'files') {
-      setState('search');
-      setSelectedModel(null);
-    }
-  };
-
-  const formatNumber = (num: number) => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toString();
-  };
-
-  const formatBytes = (bytes: number) => {
-    if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(1)} GB`;
-    if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(1)} MB`;
-    return `${(bytes / 1e3).toFixed(1)} KB`;
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
-          <div className="flex items-center gap-2">
-            {state === 'files' && (
-              <button
-                onClick={handleBack}
-                className="p-1 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
-              >
-                <ArrowLeft className="w-5 h-5" />
-              </button>
-            )}
-            <h2 className="text-lg font-semibold text-gray-900">
-              {state === 'search' && 'Pull Model'}
-              {state === 'files' && selectedModel?.modelName}
-              {state === 'downloading' && 'Downloading'}
-            </h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto">
-          {state === 'search' && (
-            <div className="p-4">
-              {/* Search Input */}
-              <form onSubmit={handleSearch}>
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-                  <input
-                    ref={inputRef}
-                    type="text"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search Hugging Face models..."
-                    className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-                  />
-                </div>
-              </form>
-
-              {/* Results */}
-              <div className="mt-4">
-                {searchMutation.isPending && (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                  </div>
-                )}
-
-                {searchMutation.isError && (
-                  <p className="text-center py-8 text-red-600 text-sm">
-                    Search failed. Please try again.
-                  </p>
-                )}
-
-                {searchMutation.isSuccess && searchMutation.data.results.length === 0 && (
-                  <p className="text-center py-8 text-gray-500 text-sm">
-                    No GGUF models found for "{searchQuery}"
-                  </p>
-                )}
-
-                {searchMutation.isSuccess && searchMutation.data.results.length > 0 && (
-                  <div className="space-y-1">
-                    {searchMutation.data.results.map((model) => (
-                      <button
-                        key={model.modelId}
-                        onClick={() => handleSelectModel(model)}
-                        className="w-full text-left px-3 py-3 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer"
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex-1 min-w-0">
-                            <div className="font-medium text-gray-900 truncate">
-                              {model.modelName}
-                            </div>
-                            <div className="text-sm text-gray-500 truncate">
-                              {model.author}
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-3 ml-4">
-                            <span className="flex items-center gap-1 text-xs text-gray-500">
-                              <Download className="w-3.5 h-3.5" />
-                              {formatNumber(model.downloads)}
-                            </span>
-                            <span className="flex items-center gap-1 text-xs text-gray-500">
-                              <Heart className="w-3.5 h-3.5" />
-                              {formatNumber(model.likes)}
-                            </span>
-                            <ChevronRight className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
-
-                {!searchMutation.isPending && !searchMutation.isSuccess && (
-                  <p className="text-center py-8 text-gray-500 text-sm">
-                    Search for GGUF models on Hugging Face
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-
-          {state === 'files' && (
-            <div className="p-4">
-              {filesLoading && (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                </div>
-              )}
-
-              {filesData && filesData.files.length === 0 && (
-                <p className="text-center py-8 text-gray-500 text-sm">
-                  No GGUF files found in this repository
-                </p>
-              )}
-
-              {filesData && filesData.files.length > 0 && (
-                <div className="space-y-1">
-                  {filesData.files.map((filename) => (
-                    <button
-                      key={filename}
-                      onClick={() => handleDownload(filename)}
-                      disabled={downloadMutation.isPending}
-                      className="w-full text-left px-3 py-3 hover:bg-gray-50 rounded-lg transition-colors group disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2 flex-1 min-w-0">
-                          <HardDrive className="w-4 h-4 text-gray-400 flex-shrink-0" />
-                          <span className="text-sm text-gray-900 truncate">
-                            {filename}
-                          </span>
-                        </div>
-                        <Download className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 ml-2" />
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {state === 'downloading' && (
-            <div className="p-6">
-              <div className="text-center">
-                {jobData?.job?.status === 'failed' ? (
-                  <>
-                    <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center">
-                      <X className="w-6 h-6 text-red-600" />
-                    </div>
-                    <h3 className="font-medium text-gray-900 mb-2">Download Failed</h3>
-                    <p className="text-sm text-gray-500 mb-4">{jobData.job.error}</p>
-                    <button
-                      onClick={handleBack}
-                      className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
-                    >
-                      Try Again
-                    </button>
-                  </>
-                ) : (
-                  <>
-                    <Loader2 className="w-12 h-12 mx-auto mb-4 animate-spin text-gray-400" />
-                    <h3 className="font-medium text-gray-900 mb-1">
-                      {jobData?.job?.filename || 'Starting download...'}
-                    </h3>
-                    {jobData?.job?.progress && (
-                      <>
-                        <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
-                          <div
-                            className="bg-gray-900 h-2 rounded-full transition-all duration-300"
-                            style={{ width: `${jobData.job.progress.percentage}%` }}
-                          />
-                        </div>
-                        <p className="text-sm text-gray-500">
-                          {formatBytes(jobData.job.progress.downloaded)} / {formatBytes(jobData.job.progress.total)}
-                          {' · '}
-                          {jobData.job.progress.speed}
-                        </p>
-                      </>
-                    )}
-                    {!jobData?.job?.progress && (
-                      <p className="text-sm text-gray-500">Connecting...</p>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/web/src/components/ServerConfigModal.tsx

@@ -1,291 +0,0 @@
-import { useState, useEffect } from 'react';
-import { X, Loader2, Save, RotateCcw } from 'lucide-react';
-import { useUpdateServer } from '../hooks/useApi';
-import type { Server } from '../types/api';
-
-interface ServerConfigModalProps {
-  server: Server | null;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-interface FormData {
-  port: number;
-  host: string;
-  threads: number;
-  ctxSize: number;
-  gpuLayers: number;
-  verbose: boolean;
-  customFlags: string;
-}
-
-export function ServerConfigModal({ server, isOpen, onClose }: ServerConfigModalProps) {
-  const updateServer = useUpdateServer();
-
-  const [formData, setFormData] = useState<FormData>({
-    port: 9000,
-    host: '127.0.0.1',
-    threads: 4,
-    ctxSize: 4096,
-    gpuLayers: 60,
-    verbose: false,
-    customFlags: '',
-  });
-
-  const [restartAfterSave, setRestartAfterSave] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Initialize form when server changes
-  useEffect(() => {
-    if (server) {
-      setFormData({
-        port: server.port,
-        host: server.host,
-        threads: server.threads,
-        ctxSize: server.ctxSize,
-        gpuLayers: server.gpuLayers,
-        verbose: server.verbose,
-        customFlags: server.customFlags?.join(', ') || '',
-      });
-      setError(null);
-    }
-  }, [server]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!server) return;
-
-    setError(null);
-
-    try {
-      const customFlags = formData.customFlags
-        .split(',')
-        .map(f => f.trim())
-        .filter(f => f.length > 0);
-
-      await updateServer.mutateAsync({
-        id: server.id,
-        data: {
-          port: formData.port,
-          host: formData.host,
-          threads: formData.threads,
-          ctxSize: formData.ctxSize,
-          gpuLayers: formData.gpuLayers,
-          verbose: formData.verbose,
-          customFlags: customFlags.length > 0 ? customFlags : undefined,
-          restart: server.status === 'running' && restartAfterSave,
-        },
-      });
-
-      onClose();
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  };
-
-  const formatContextSize = (size: number) => {
-    if (size >= 1048576) return `${(size / 1048576).toFixed(1)}M tokens`;
-    if (size >= 1024) return `${(size / 1024).toFixed(0)}K tokens`;
-    return `${size} tokens`;
-  };
-
-  if (!isOpen || !server) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 max-h-[90vh] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
-          <div>
-            <h2 className="text-lg font-semibold text-gray-900">Configure Server</h2>
-            <p className="text-sm text-gray-500">{server.modelName.replace('.gguf', '')}</p>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-4">
-          {/* Port */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Port
-            </label>
-            <input
-              type="number"
-              value={formData.port}
-              onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) || 9000 })}
-              min={1024}
-              max={65535}
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-            />
-          </div>
-
-          {/* Host */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Host
-            </label>
-            <select
-              value={formData.host}
-              onChange={(e) => setFormData({ ...formData, host: e.target.value })}
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent bg-white"
-            >
-              <option value="127.0.0.1">127.0.0.1 (localhost only)</option>
-              <option value="0.0.0.0">0.0.0.0 (all interfaces)</option>
-            </select>
-          </div>
-
-          {/* Threads */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Threads
-            </label>
-            <input
-              type="number"
-              value={formData.threads}
-              onChange={(e) => setFormData({ ...formData, threads: parseInt(e.target.value) || 1 })}
-              min={1}
-              max={256}
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-            />
-            <p className="text-xs text-gray-500 mt-1">Number of CPU threads for inference</p>
-          </div>
-
-          {/* Context Size */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Context Size
-            </label>
-            <input
-              type="number"
-              value={formData.ctxSize}
-              onChange={(e) => setFormData({ ...formData, ctxSize: parseInt(e.target.value) || 2048 })}
-              min={512}
-              max={2097152}
-              step={512}
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-            />
-            <p className="text-xs text-gray-500 mt-1">{formatContextSize(formData.ctxSize)}</p>
-          </div>
-
-          {/* GPU Layers */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              GPU Layers
-            </label>
-            <input
-              type="number"
-              value={formData.gpuLayers}
-              onChange={(e) => setFormData({ ...formData, gpuLayers: parseInt(e.target.value) || 0 })}
-              min={0}
-              max={999}
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-            />
-            <p className="text-xs text-gray-500 mt-1">Layers to offload to GPU (0 = CPU only)</p>
-          </div>
-
-          {/* Verbose */}
-          <div className="flex items-center justify-between">
-            <div>
-              <label className="text-sm font-medium text-gray-700">Verbose Logging</label>
-              <p className="text-xs text-gray-500">Log HTTP requests and responses</p>
-            </div>
-            <button
-              type="button"
-              onClick={() => setFormData({ ...formData, verbose: !formData.verbose })}
-              className={`relative w-11 h-6 rounded-full transition-colors cursor-pointer ${
-                formData.verbose ? 'bg-gray-900' : 'bg-gray-200'
-              }`}
-            >
-              <span
-                className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
-                  formData.verbose ? 'translate-x-5' : ''
-                }`}
-              />
-            </button>
-          </div>
-
-          {/* Custom Flags */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Custom Flags
-            </label>
-            <input
-              type="text"
-              value={formData.customFlags}
-              onChange={(e) => setFormData({ ...formData, customFlags: e.target.value })}
-              placeholder="--flash-attn, --cont-batching"
-              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
-            />
-            <p className="text-xs text-gray-500 mt-1">Comma-separated additional flags</p>
-          </div>
-
-          {/* Restart option (only show if server is running) */}
-          {server.status === 'running' && (
-            <div className="flex items-center gap-2 pt-2 border-t border-gray-100">
-              <input
-                type="checkbox"
-                id="restartAfterSave"
-                checked={restartAfterSave}
-                onChange={(e) => setRestartAfterSave(e.target.checked)}
-                className="w-4 h-4 text-gray-900 border-gray-300 rounded focus:ring-gray-200"
-              />
-              <label htmlFor="restartAfterSave" className="text-sm text-gray-700">
-                Restart server to apply changes
-              </label>
-            </div>
-          )}
-
-          {/* Error */}
-          {error && (
-            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-              <p className="text-sm text-red-700">{error}</p>
-            </div>
-          )}
-        </form>
-
-        {/* Footer */}
-        <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-200 bg-gray-50 rounded-b-xl">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={updateServer.isPending}
-            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 rounded-lg transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-wait"
-          >
-            {updateServer.isPending ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                Saving...
-              </>
-            ) : (
-              <>
-                {server.status === 'running' && restartAfterSave ? (
-                  <>
-                    <RotateCcw className="w-4 h-4" />
-                    Save & Restart
-                  </>
-                ) : (
-                  <>
-                    <Save className="w-4 h-4" />
-                    Save
-                  </>
-                )}
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}