@appkit/llamacpp-cli 1.12.0 → 1.13.0

package/web/src/components/DownloadProgress.tsx

@@ -1,123 +0,0 @@
-import { X, Download, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
-import { useDownloadJobs, useCancelDownload } from '../hooks/useApi';
-import type { DownloadJob } from '../types/api';
-
-export function DownloadProgress() {
-  const { data: jobsData } = useDownloadJobs(true);
-  const cancelMutation = useCancelDownload();
-
-  const jobs = jobsData?.jobs || [];
-
-  // Filter to active jobs only (pending, downloading)
-  const activeJobs = jobs.filter(
-    job => job.status === 'pending' || job.status === 'downloading'
-  );
-
-  // Nothing to show if no active downloads
-  if (activeJobs.length === 0) return null;
-
-  const handleCancel = (jobId: string) => {
-    cancelMutation.mutate(jobId);
-  };
-
-  return (
-    <div className="fixed bottom-4 right-4 z-40 w-80">
-      <div className="bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
-        {/* Header */}
-        <div className="px-4 py-2.5 bg-gray-50 border-b border-gray-200 flex items-center gap-2">
-          <Download className="w-4 h-4 text-gray-600" />
-          <span className="text-sm font-medium text-gray-700">
-            {activeJobs.length} download{activeJobs.length !== 1 ? 's' : ''} in progress
-          </span>
-        </div>
-
-        {/* Jobs */}
-        <div className="max-h-60 overflow-y-auto divide-y divide-gray-100">
-          {activeJobs.map((job) => (
-            <JobItem
-              key={job.id}
-              job={job}
-              onCancel={() => handleCancel(job.id)}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface JobItemProps {
-  job: DownloadJob;
-  onCancel: () => void;
-}
-
-function JobItem({ job, onCancel }: JobItemProps) {
-  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`;
-  };
-
-  const getStatusIcon = () => {
-    switch (job.status) {
-      case 'completed':
-        return <CheckCircle className="w-4 h-4 text-green-500" />;
-      case 'failed':
-      case 'cancelled':
-        return <AlertCircle className="w-4 h-4 text-red-500" />;
-      default:
-        return <Loader2 className="w-4 h-4 text-gray-400 animate-spin" />;
-    }
-  };
-
-  return (
-    <div className="px-4 py-3">
-      <div className="flex items-center justify-between mb-1">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          {getStatusIcon()}
-          <span className="text-sm font-medium text-gray-900 truncate">
-            {job.filename}
-          </span>
-        </div>
-        {(job.status === 'pending' || job.status === 'downloading') && (
-          <button
-            onClick={onCancel}
-            className="p-1 hover:bg-gray-100 rounded transition-colors cursor-pointer"
-            title="Cancel download"
-          >
-            <X className="w-4 h-4 text-gray-400" />
-          </button>
-        )}
-      </div>
-
-      {job.progress && (
-        <>
-          <div className="w-full bg-gray-200 rounded-full h-1.5 mb-1">
-            <div
-              className="bg-gray-700 h-1.5 rounded-full transition-all duration-300"
-              style={{ width: `${job.progress.percentage}%` }}
-            />
-          </div>
-          <div className="flex items-center justify-between text-xs text-gray-500">
-            <span>
-              {formatBytes(job.progress.downloaded)} / {formatBytes(job.progress.total)}
-            </span>
-            <span>{job.progress.speed}</span>
-          </div>
-        </>
-      )}
-
-      {job.status === 'pending' && !job.progress && (
-        <p className="text-xs text-gray-500">Starting...</p>
-      )}
-
-      {job.status === 'failed' && job.error && (
-        <p className="text-xs text-red-500 truncate">{job.error}</p>
-      )}
-
-      {job.status === 'cancelled' && (
-        <p className="text-xs text-gray-500">Cancelled</p>
-      )}
-    </div>
-  );
-}

package/web/src/components/Nav.tsx

@@ -1,89 +0,0 @@
-import { Link, useLocation } from 'react-router-dom';
-import { Search, LogOut } from 'lucide-react';
-import { api } from '../lib/api';
-
-interface NavProps {
-  onLogout?: () => void;
-  searchQuery?: string;
-  onSearchChange?: (query: string) => void;
-}
-
-export function Nav({ onLogout, searchQuery = '', onSearchChange }: NavProps) {
-  const location = useLocation();
-
-  const handleLogout = () => {
-    api.clearApiKey();
-    onLogout?.();
-  };
-
-  return (
-    <nav className="border-b border-neutral-200 bg-white">
-      <div className="max-w-7xl mx-auto px-6">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo and Nav Links */}
-          <div className="flex items-center space-x-10">
-            <Link to="/" className="flex items-center">
-              <span className="text-xl font-bold text-neutral-900 tracking-tight">LLAMA CPP</span>
-            </Link>
-
-            <div className="flex items-center space-x-1">
-              <Link
-                to="/servers"
-                className={`px-3 py-2 text-sm font-medium transition-colors rounded-md ${
-                  location.pathname === '/servers' || location.pathname === '/'
-                    ? 'text-neutral-900 bg-neutral-100'
-                    : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50'
-                }`}
-              >
-                Servers
-              </Link>
-              <Link
-                to="/models"
-                className={`px-3 py-2 text-sm font-medium transition-colors rounded-md ${
-                  location.pathname === '/models'
-                    ? 'text-neutral-900 bg-neutral-100'
-                    : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50'
-                }`}
-              >
-                Models
-              </Link>
-              <Link
-                to="/router"
-                className={`px-3 py-2 text-sm font-medium transition-colors rounded-md ${
-                  location.pathname === '/router'
-                    ? 'text-neutral-900 bg-neutral-100'
-                    : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50'
-                }`}
-              >
-                Router
-              </Link>
-            </div>
-          </div>
-
-          {/* Search + Logout */}
-          <div className="flex items-center space-x-3">
-            {onSearchChange && (
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
-                <input
-                  type="search"
-                  placeholder="Search models..."
-                  value={searchQuery}
-                  onChange={(e) => onSearchChange(e.target.value)}
-                  className="w-72 pl-9 pr-4 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 border border-neutral-200 rounded-md bg-white hover:border-neutral-300 focus:outline-none focus:border-neutral-400 transition-colors"
-                />
-              </div>
-            )}
-            <button
-              onClick={handleLogout}
-              className="p-2 text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 rounded-md transition-colors cursor-pointer"
-              title="Logout"
-            >
-              <LogOut className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

package/web/src/components/RouterConfigModal.tsx

@@ -1,240 +0,0 @@
-import { useState, useEffect } from 'react';
-import { X, Loader2, Save } from 'lucide-react';
-import { useUpdateRouter } from '../hooks/useApi';
-import type { RouterInfo } from '../types/api';
-
-interface RouterConfigModalProps {
-  router: RouterInfo | null;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-interface FormData {
-  port: number;
-  host: string;
-  verbose: boolean;
-  requestTimeout: number;
-  healthCheckInterval: number;
-}
-
-export function RouterConfigModal({ router, isOpen, onClose }: RouterConfigModalProps) {
-  const updateRouter = useUpdateRouter();
-
-  const [formData, setFormData] = useState<FormData>({
-    port: 9100,
-    host: '127.0.0.1',
-    verbose: false,
-    requestTimeout: 120000,
-    healthCheckInterval: 5000,
-  });
-
-  const [restartAfterSave, setRestartAfterSave] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Initialize form when router changes
-  useEffect(() => {
-    if (router?.config) {
-      setFormData({
-        port: router.config.port,
-        host: router.config.host,
-        verbose: router.config.verbose,
-        requestTimeout: router.config.requestTimeout,
-        healthCheckInterval: router.config.healthCheckInterval,
-      });
-      setError(null);
-    }
-  }, [router]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!router) return;
-
-    setError(null);
-
-    try {
-      const result = await updateRouter.mutateAsync({
-        port: formData.port,
-        host: formData.host,
-        verbose: formData.verbose,
-        requestTimeout: formData.requestTimeout,
-        healthCheckInterval: formData.healthCheckInterval,
-      });
-
-      // If router is running and needs restart, prompt user
-      if (result.needsRestart && router.isRunning && !restartAfterSave) {
-        setError('Changes saved. Restart the router to apply them.');
-        return;
-      }
-
-      onClose();
-    } catch (err) {
-      setError((err as Error).message);
-    }
-  };
-
-  if (!isOpen || !router) 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 Router</h2>
-            <p className="text-sm text-gray-500">Unified model routing service</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) || 9100 })}
-              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"
-            />
-            <p className="text-xs text-gray-500 mt-1">Router service port (requires restart)</p>
-          </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>
-            <p className="text-xs text-gray-500 mt-1">Network interface (requires restart)</p>
-          </div>
-
-          {/* Request Timeout */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Request Timeout
-            </label>
-            <input
-              type="number"
-              value={formData.requestTimeout / 1000}
-              onChange={(e) => setFormData({ ...formData, requestTimeout: (parseInt(e.target.value) || 120) * 1000 })}
-              min={10}
-              max={600}
-              step={10}
-              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">
-              {formData.requestTimeout / 1000}s - Maximum time to wait for backend responses
-            </p>
-          </div>
-
-          {/* Health Check Interval */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Health Check Interval
-            </label>
-            <input
-              type="number"
-              value={formData.healthCheckInterval / 1000}
-              onChange={(e) => setFormData({ ...formData, healthCheckInterval: (parseInt(e.target.value) || 5) * 1000 })}
-              min={1}
-              max={60}
-              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">
-              {formData.healthCheckInterval / 1000}s - How often to check backend server health
-            </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 detailed request information</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>
-
-          {/* Restart option (only show if router is running) */}
-          {router.isRunning && (
-            <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 router 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">
-          <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={updateRouter.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 disabled:cursor-wait cursor-pointer"
-          >
-            {updateRouter.isPending ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                Saving...
-              </>
-            ) : (
-              <>
-                <Save className="w-4 h-4" />
-                Save Changes
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}