@appkit/llamacpp-cli 1.12.0 → 1.13.0

package/web/src/pages/Models.tsx

@@ -1,258 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useModels, useDeleteModel, useDownloadJobs } from '../hooks/useApi';
-import { HardDrive, Server, Trash2, Clock, Loader2, Download } from 'lucide-react';
-import { SearchModal } from '../components/SearchModal';
-import { DownloadProgress } from '../components/DownloadProgress';
-import { useQueryClient } from '@tanstack/react-query';
-
-interface ModelsProps {
-  searchQuery?: string;
-}
-
-type ModelFilter = 'all' | 'active' | 'inactive';
-
-export function Models({ searchQuery = '' }: ModelsProps) {
-  const queryClient = useQueryClient();
-  const { data: modelsData, isLoading } = useModels();
-  const deleteModel = useDeleteModel();
-  const { data: jobsData } = useDownloadJobs(true);
-
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const [showSearchModal, setShowSearchModal] = useState(false);
-  const [filter, setFilter] = useState<ModelFilter>('all');
-
-  const hasActiveDownloads = (jobsData?.jobs || []).some(
-    job => job.status === 'pending' || job.status === 'downloading'
-  );
-
-  const handleDownloadComplete = () => {
-    queryClient.invalidateQueries({ queryKey: ['models'] });
-  };
-
-  const models = modelsData?.models || [];
-
-  const filteredModels = useMemo(() => {
-    let filtered = models;
-
-    // Apply search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(model =>
-        model.filename.toLowerCase().includes(query)
-      );
-    }
-
-    // Apply status filter
-    if (filter === 'active') {
-      filtered = filtered.filter(model => model.serversUsing > 0);
-    } else if (filter === 'inactive') {
-      filtered = filtered.filter(model => model.serversUsing === 0);
-    }
-
-    return filtered;
-  }, [models, searchQuery, filter]);
-
-  const handleDelete = async (name: string, serversUsing: number) => {
-    if (serversUsing > 0) {
-      if (!confirm(`Model "${name}" is used by ${serversUsing} server(s). Delete the model AND all associated servers?`)) {
-        return;
-      }
-    } else {
-      if (!confirm(`Delete model "${name}"? This cannot be undone.`)) return;
-    }
-
-    setActionLoading(name);
-    try {
-      await deleteModel.mutateAsync({ name, cascade: serversUsing > 0 });
-    } finally {
-      setActionLoading(null);
-    }
-  };
-
-  const formatSize = (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 formatDate = (dateStr: string | Date) => {
-    const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-    if (diffDays === 0) return 'Today';
-    if (diffDays === 1) return 'Yesterday';
-    if (diffDays < 7) return `${diffDays}d ago`;
-    if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="max-w-7xl mx-auto px-6 py-12">
-        <p className="text-neutral-500 text-center">Loading...</p>
-      </div>
-    );
-  }
-
-  const activeModels = models.filter(m => m.serversUsing > 0);
-
-  return (
-    <div className="max-w-7xl mx-auto px-6 py-8">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h1 className="text-2xl font-semibold text-neutral-900 tracking-tight">Models</h1>
-          <p className="text-sm text-neutral-600 mt-1">
-            {models.length} model{models.length !== 1 ? 's' : ''} available
-            {activeModels.length > 0 && ` • ${activeModels.length} active`}
-          </p>
-        </div>
-        <button
-          onClick={() => setShowSearchModal(true)}
-          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 rounded-md transition-colors cursor-pointer"
-        >
-          <Download className="w-4 h-4" />
-          Pull Model
-        </button>
-      </div>
-
-      {/* Filter Buttons */}
-      <div className="flex items-center gap-2 mb-6">
-        <button
-          onClick={() => setFilter('all')}
-          className={`px-3 py-1.5 text-sm font-medium rounded-full border transition-all cursor-pointer ${
-            filter === 'all'
-              ? 'bg-neutral-900 text-white border-neutral-900'
-              : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300'
-          }`}
-        >
-          All
-        </button>
-        <button
-          onClick={() => setFilter('active')}
-          className={`px-3 py-1.5 text-sm font-medium rounded-full border transition-all cursor-pointer ${
-            filter === 'active'
-              ? 'bg-neutral-900 text-white border-neutral-900'
-              : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300'
-          }`}
-        >
-          Active
-        </button>
-        <button
-          onClick={() => setFilter('inactive')}
-          className={`px-3 py-1.5 text-sm font-medium rounded-full border transition-all cursor-pointer ${
-            filter === 'inactive'
-              ? 'bg-neutral-900 text-white border-neutral-900'
-              : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300'
-          }`}
-        >
-          Inactive
-        </button>
-      </div>
-
-      {filteredModels.length === 0 ? (
-        <div className="text-center py-16 bg-white border border-neutral-200 rounded-lg">
-          {searchQuery ? (
-            <>
-              <p className="text-neutral-600 text-base mb-2">No models matching "{searchQuery}"</p>
-              <p className="text-sm text-neutral-500">Try a different search term</p>
-            </>
-          ) : filter !== 'all' && models.length > 0 ? (
-            <>
-              <p className="text-neutral-600 text-base mb-2">No {filter} models</p>
-              <p className="text-sm text-neutral-500">Try a different filter</p>
-            </>
-          ) : (
-            <>
-              <p className="text-neutral-600 text-base mb-2">No models found</p>
-              <p className="text-sm text-neutral-500 mb-6">
-                Download models from Hugging Face to get started
-              </p>
-              <button
-                onClick={() => setShowSearchModal(true)}
-                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 rounded-md transition-colors cursor-pointer"
-              >
-                <Download className="w-4 h-4" />
-                Pull Model
-              </button>
-            </>
-          )}
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredModels.map((model) => (
-            <div
-              key={model.filename}
-              className="group bg-white border border-neutral-200 rounded-lg p-5 hover:border-neutral-300 hover:shadow-sm transition-all"
-            >
-              <div className="flex items-start justify-between mb-4">
-                <div className="flex-1 min-w-0">
-                  <h3 className="text-base font-semibold text-neutral-900 truncate mb-2">
-                    {model.filename.replace('.gguf', '')}
-                  </h3>
-                  <div className="flex flex-wrap gap-1.5">
-                    {model.serversUsing > 0 && (
-                      <span className="inline-flex items-center px-2 py-0.5 rounded-md border border-green-200/50 bg-green-50 text-xs font-medium text-green-700">
-                        active
-                      </span>
-                    )}
-                    <span className="inline-flex items-center px-2 py-0.5 rounded-md border border-neutral-200 bg-neutral-50 text-xs font-medium text-neutral-600">
-                      gguf
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Stats */}
-              <div className="space-y-2 mb-4">
-                <div className="flex items-center gap-2 text-xs text-neutral-600">
-                  <HardDrive className="w-3.5 h-3.5 text-neutral-400" />
-                  <span>{formatSize(model.size)}</span>
-                </div>
-                <div className="flex items-center gap-2 text-xs text-neutral-600">
-                  <Server className="w-3.5 h-3.5 text-neutral-400" />
-                  <span>{model.serversUsing} server{model.serversUsing !== 1 ? 's' : ''}</span>
-                </div>
-                <div className="flex items-center gap-2 text-xs text-neutral-600">
-                  <Clock className="w-3.5 h-3.5 text-neutral-400" />
-                  <span>{formatDate(model.modified)}</span>
-                </div>
-              </div>
-
-              {/* Delete Action */}
-              <button
-                onClick={() => handleDelete(model.filename, model.serversUsing)}
-                disabled={actionLoading === model.filename}
-                className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors opacity-0 group-hover:opacity-100 disabled:opacity-100 cursor-pointer disabled:cursor-wait"
-              >
-                {actionLoading === model.filename ? (
-                  <>
-                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                    Deleting
-                  </>
-                ) : (
-                  <>
-                    <Trash2 className="w-3.5 h-3.5" />
-                    Delete
-                  </>
-                )}
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Search Modal */}
-      <SearchModal
-        isOpen={showSearchModal}
-        onClose={() => setShowSearchModal(false)}
-        onDownloadComplete={handleDownloadComplete}
-      />
-
-      {/* Download Progress Indicator */}
-      {hasActiveDownloads && <DownloadProgress />}
-    </div>
-  );
-}

package/web/src/pages/Router.tsx

@@ -1,270 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
-import {
-  useRouter,
-  useStartRouter,
-  useStopRouter,
-  useRestartRouter,
-} from '../hooks/useApi';
-import {
-  Play,
-  Square,
-  RotateCw,
-  Loader2,
-  Activity,
-  Shuffle,
-  FileText,
-  Settings,
-} from 'lucide-react';
-import { RouterConfigModal } from '../components/RouterConfigModal';
-
-export function Router() {
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const { data: routerData, isLoading } = useRouter();
-  const startRouter = useStartRouter();
-  const stopRouter = useStopRouter();
-  const restartRouter = useRestartRouter();
-
-  const [actionLoading, setActionLoading] = useState<'start' | 'stop' | 'restart' | null>(null);
-  const [showConfigModal, setShowConfigModal] = useState(false);
-
-  const handleStart = async () => {
-    setActionLoading('start');
-    try {
-      await startRouter.mutateAsync();
-      await queryClient.refetchQueries({ queryKey: ['router'] });
-    } finally {
-      setActionLoading(null);
-    }
-  };
-
-  const handleStop = async () => {
-    setActionLoading('stop');
-    try {
-      await stopRouter.mutateAsync();
-      await queryClient.refetchQueries({ queryKey: ['router'] });
-    } finally {
-      setActionLoading(null);
-    }
-  };
-
-  const handleRestart = async () => {
-    setActionLoading('restart');
-    try {
-      await restartRouter.mutateAsync();
-      await queryClient.refetchQueries({ queryKey: ['router'] });
-    } finally {
-      setActionLoading(null);
-    }
-  };
-
-  // Only show loading on initial load, not on refetches
-  if (isLoading && !routerData) {
-    return (
-      <div className="max-w-7xl mx-auto px-6 py-12">
-        <p className="text-neutral-500 text-center">Loading...</p>
-      </div>
-    );
-  }
-
-  const router = routerData;
-  const isRunning = router?.isRunning || false;
-  const isNotConfigured = router?.status === 'not_configured';
-
-  const renderStatusBadge = () => {
-    if (actionLoading) {
-      return (
-        <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-neutral-100 text-neutral-700">
-          <Loader2 className="w-3 h-3 animate-spin" />
-          {actionLoading === 'start' && 'Starting'}
-          {actionLoading === 'stop' && 'Stopping'}
-          {actionLoading === 'restart' && 'Restarting'}
-        </span>
-      );
-    }
-
-    if (isNotConfigured) {
-      return (
-        <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-neutral-100 text-neutral-600">
-          <span className="w-1.5 h-1.5 rounded-full bg-neutral-400"></span>
-          Not Configured
-        </span>
-      );
-    }
-
-    if (isRunning) {
-      return (
-        <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-green-50 text-green-700 border border-green-200/50">
-          <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
-          Running
-        </span>
-      );
-    }
-
-    return (
-      <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-neutral-100 text-neutral-600">
-        <span className="w-1.5 h-1.5 rounded-full bg-neutral-400"></span>
-        Stopped
-      </span>
-    );
-  };
-
-  return (
-    <div className="max-w-7xl mx-auto px-6 py-8">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-2xl font-semibold text-neutral-900 tracking-tight">Router</h1>
-          <p className="text-sm text-neutral-600 mt-1">
-            Unified API endpoint for model routing
-          </p>
-        </div>
-      </div>
-
-      {/* Router Card */}
-      <div className="bg-white border border-neutral-200 rounded-lg p-5 hover:border-neutral-300 hover:shadow-sm transition-all">
-        <div className="flex items-start justify-between mb-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
-              <Shuffle className="w-5 h-5 text-blue-600" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <h3 className="text-base font-semibold text-neutral-900 mb-1">Router Service</h3>
-              <p className="text-sm text-neutral-500">
-                {isNotConfigured
-                  ? 'Not yet configured'
-                  : `localhost:${router?.config?.port || 'N/A'}`}
-              </p>
-            </div>
-          </div>
-          {renderStatusBadge()}
-        </div>
-
-        {/* Configuration Details */}
-        {!isNotConfigured && router?.config && (
-          <div className="space-y-2 mb-4">
-            <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="text-neutral-400">Host:</span>
-              <span>{router.config.host}</span>
-            </div>
-            <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="text-neutral-400">Request Timeout:</span>
-              <span>{(router.config.requestTimeout / 1000).toFixed(0)}s</span>
-            </div>
-            <div className="flex items-center gap-2 text-xs text-neutral-600">
-              <span className="text-neutral-400">Verbose Logs:</span>
-              <span>{router.config.verbose ? 'Enabled' : 'Disabled'}</span>
-            </div>
-          </div>
-        )}
-
-        {/* Available Models */}
-        {!isNotConfigured && router && (
-          <div className="mb-4 pt-4 border-t border-neutral-200">
-            <div className="flex items-center gap-2 mb-3">
-              <Activity className="w-3.5 h-3.5 text-neutral-400" />
-              <h4 className="text-xs font-semibold text-neutral-900">Available Models</h4>
-            </div>
-            {router.availableModels.length > 0 ? (
-              <div className="flex flex-wrap gap-2">
-                {router.availableModels.map((model) => (
-                  <span
-                    key={model}
-                    className="inline-flex items-center px-2 py-1 text-xs font-medium text-neutral-700 bg-neutral-100 rounded-md"
-                  >
-                    {model.replace('.gguf', '')}
-                  </span>
-                ))}
-              </div>
-            ) : (
-              <p className="text-xs text-neutral-500">
-                No models available. Start some servers to enable routing.
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Not Configured Message */}
-        {isNotConfigured && (
-          <div className="mb-4 pt-4 border-t border-neutral-200">
-            <p className="text-sm text-neutral-600 mb-3">
-              Click "Start" to configure and launch the router service. The router will
-              automatically discover and route requests to running servers.
-            </p>
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="flex items-center gap-1 opacity-100 transition-opacity pt-4 border-t border-neutral-200">
-          {!isNotConfigured && isRunning && (
-            <button
-              onClick={() => navigate('/router/logs')}
-              disabled={actionLoading !== null}
-              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-wait"
-              title="View Logs"
-            >
-              <FileText className="w-3.5 h-3.5" />
-              Logs
-            </button>
-          )}
-
-          {!isNotConfigured && (
-            <button
-              onClick={() => setShowConfigModal(true)}
-              disabled={actionLoading !== null}
-              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-wait"
-              title="Config"
-            >
-              <Settings className="w-3.5 h-3.5" />
-              Config
-            </button>
-          )}
-
-          {!isNotConfigured && isRunning && (
-            <>
-              <button
-                onClick={handleRestart}
-                disabled={actionLoading !== null}
-                className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 hover:bg-neutral-50 rounded-md transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-wait"
-                title="Restart"
-              >
-                <RotateCw className="w-3.5 h-3.5" />
-                Restart
-              </button>
-              <button
-                onClick={handleStop}
-                disabled={actionLoading !== null}
-                className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-wait"
-                title="Stop"
-              >
-                <Square className="w-3.5 h-3.5" />
-                Stop
-              </button>
-            </>
-          )}
-
-          {(isNotConfigured || !isRunning) && (
-            <button
-              onClick={handleStart}
-              disabled={actionLoading !== null}
-              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-wait"
-              title="Start"
-            >
-              <Play className="w-3.5 h-3.5" />
-              Start
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Config Modal */}
-      <RouterConfigModal
-        router={router || null}
-        isOpen={showConfigModal}
-        onClose={() => setShowConfigModal(false)}
-      />
-    </div>
-  );
-}