@appkit/llamacpp-cli 1.12.0 → 1.13.0

package/web/src/hooks/useApi.ts

@@ -1,259 +0,0 @@
-import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
-import { api } from '../lib/api';
-import type { CreateServerRequest, UpdateServerRequest, UpdateRouterRequest } from '../types/api';
-
-// System
-export function useSystemStatus() {
-  return useQuery({
-    queryKey: ['system', 'status'],
-    queryFn: () => api.getSystemStatus(),
-    refetchInterval: 5000, // Auto-refresh every 5s
-  });
-}
-
-// Servers
-export function useServers() {
-  return useQuery({
-    queryKey: ['servers'],
-    queryFn: () => api.listServers(),
-    refetchInterval: 5000, // Auto-refresh every 5s
-  });
-}
-
-export function useServer(id: string) {
-  return useQuery({
-    queryKey: ['servers', id],
-    queryFn: () => api.getServer(id),
-    enabled: !!id,
-  });
-}
-
-export function useCreateServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data: CreateServerRequest) => api.createServer(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['system'] });
-    },
-  });
-}
-
-export function useUpdateServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ id, data }: { id: string; data: UpdateServerRequest }) =>
-      api.updateServer(id, data),
-    onSuccess: (_, variables) => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['servers', variables.id] });
-    },
-  });
-}
-
-export function useDeleteServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id: string) => api.deleteServer(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['system'] });
-    },
-  });
-}
-
-export function useStartServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id: string) => api.startServer(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['servers', id] });
-    },
-  });
-}
-
-export function useStopServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id: string) => api.stopServer(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['servers', id] });
-    },
-  });
-}
-
-export function useRestartServer() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id: string) => api.restartServer(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['servers', id] });
-    },
-  });
-}
-
-export function useServerLogs(serverId: string | null, lines = 500) {
-  return useQuery({
-    queryKey: ['serverLogs', serverId, lines],
-    queryFn: () => api.getServerLogs(serverId!, 'both', lines),
-    enabled: !!serverId,
-    refetchInterval: 2000, // Auto-refresh every 2s
-  });
-}
-
-// Models
-export function useModels() {
-  return useQuery({
-    queryKey: ['models'],
-    queryFn: () => api.listModels(),
-    refetchInterval: 10000, // Auto-refresh every 10s
-  });
-}
-
-export function useModel(name: string) {
-  return useQuery({
-    queryKey: ['models', name],
-    queryFn: () => api.getModel(name),
-    enabled: !!name,
-  });
-}
-
-export function useDeleteModel() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ name, cascade }: { name: string; cascade: boolean }) =>
-      api.deleteModel(name, cascade),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['models'] });
-      queryClient.invalidateQueries({ queryKey: ['servers'] });
-      queryClient.invalidateQueries({ queryKey: ['system'] });
-    },
-  });
-}
-
-export function useDownloadModel() {
-  return useMutation({
-    mutationFn: ({ repo, filename }: { repo: string; filename: string }) =>
-      api.downloadModel(repo, filename),
-    // Don't invalidate immediately - download is background job
-  });
-}
-
-// Search
-export function useSearchModels() {
-  return useMutation({
-    mutationFn: ({ query, limit = 20 }: { query: string; limit?: number }) =>
-      api.searchModels(query, limit),
-  });
-}
-
-export function useModelFiles(repoId: string | null) {
-  return useQuery({
-    queryKey: ['modelFiles', repoId],
-    queryFn: () => api.getModelFiles(repoId!),
-    enabled: !!repoId,
-  });
-}
-
-// Download Jobs
-export function useDownloadJobs(enabled = true) {
-  return useQuery({
-    queryKey: ['downloadJobs'],
-    queryFn: () => api.listDownloadJobs(),
-    refetchInterval: enabled ? 1000 : false, // Poll every 1s when enabled
-    enabled,
-  });
-}
-
-export function useDownloadJob(jobId: string | null) {
-  return useQuery({
-    queryKey: ['downloadJobs', jobId],
-    queryFn: () => api.getDownloadJob(jobId!),
-    enabled: !!jobId,
-    refetchInterval: 500, // Fast polling for active job
-  });
-}
-
-export function useCancelDownload() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (jobId: string) => api.cancelDownloadJob(jobId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['downloadJobs'] });
-    },
-  });
-}
-
-// Router
-export function useRouter() {
-  return useQuery({
-    queryKey: ['router'],
-    queryFn: () => api.getRouter(),
-    refetchInterval: 5000, // Auto-refresh every 5s
-    placeholderData: keepPreviousData, // Keep previous data during refetch to prevent flash
-  });
-}
-
-export function useStartRouter() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: () => api.startRouter(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['router'] });
-    },
-  });
-}
-
-export function useStopRouter() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: () => api.stopRouter(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['router'] });
-    },
-  });
-}
-
-export function useRestartRouter() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: () => api.restartRouter(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['router'] });
-    },
-  });
-}
-
-export function useRouterLogs(lines = 500) {
-  return useQuery({
-    queryKey: ['routerLogs', lines],
-    queryFn: () => api.getRouterLogs('both', lines),
-    refetchInterval: 2000, // Auto-refresh every 2s
-    placeholderData: keepPreviousData, // Keep previous data during refetch to prevent flash
-  });
-}
-
-export function useUpdateRouter() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data: UpdateRouterRequest) => api.updateRouter(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['router'] });
-    },
-  });
-}

package/web/src/index.css

@@ -1,42 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: #fafafa;
-  color: #171717;
-}
-
-#root {
-  min-height: 100vh;
-}
-
-/* Custom scrollbar for Ollama aesthetic */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #d4d4d4;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #a3a3a3;
-}

package/web/src/lib/api.ts

@@ -1,226 +0,0 @@
-import type {
-  Server,
-  Model,
-  SystemStatus,
-  CreateServerRequest,
-  UpdateServerRequest,
-  ApiError,
-  HFModelResult,
-  DownloadJob,
-  RouterInfo,
-  UpdateRouterRequest,
-} from '../types/api';
-
-const API_BASE = '';  // Proxy handles routing
-
-class ApiClient {
-  private apiKey: string | null = null;
-
-  setApiKey(key: string) {
-    this.apiKey = key;
-    localStorage.setItem('llamacpp_api_key', key);
-  }
-
-  getApiKey(): string | null {
-    if (!this.apiKey) {
-      this.apiKey = localStorage.getItem('llamacpp_api_key');
-    }
-    return this.apiKey;
-  }
-
-  clearApiKey() {
-    this.apiKey = null;
-    localStorage.removeItem('llamacpp_api_key');
-  }
-
-  private async request<T>(
-    endpoint: string,
-    options: RequestInit = {}
-  ): Promise<T> {
-    const apiKey = this.getApiKey();
-
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-      ...(options.headers as Record<string, string>),
-    };
-
-    if (apiKey && endpoint !== '/health') {
-      headers['Authorization'] = `Bearer ${apiKey}`;
-    }
-
-    const response = await fetch(`${API_BASE}${endpoint}`, {
-      ...options,
-      headers,
-    });
-
-    if (!response.ok) {
-      const error: ApiError = await response.json();
-      throw new Error(error.details || error.error);
-    }
-
-    return response.json();
-  }
-
-  // Health
-  async getHealth() {
-    return this.request<{ status: string; uptime: number; timestamp: string }>('/health');
-  }
-
-  // System
-  async getSystemStatus() {
-    return this.request<SystemStatus>('/api/status');
-  }
-
-  // Servers
-  async listServers() {
-    return this.request<{ servers: Server[] }>('/api/servers');
-  }
-
-  async getServer(id: string) {
-    return this.request<{ server: Server }>(`/api/servers/${id}`);
-  }
-
-  async createServer(data: CreateServerRequest) {
-    return this.request<{ server: Server }>('/api/servers', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async updateServer(id: string, data: UpdateServerRequest) {
-    return this.request<{ server: Server }>(`/api/servers/${id}`, {
-      method: 'PATCH',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async deleteServer(id: string) {
-    return this.request<{ success: boolean }>(`/api/servers/${id}`, {
-      method: 'DELETE',
-    });
-  }
-
-  async startServer(id: string) {
-    return this.request<{ server: Server }>(`/api/servers/${id}/start`, {
-      method: 'POST',
-    });
-  }
-
-  async stopServer(id: string) {
-    return this.request<{ server: Server }>(`/api/servers/${id}/stop`, {
-      method: 'POST',
-    });
-  }
-
-  async restartServer(id: string) {
-    return this.request<{ server: Server }>(`/api/servers/${id}/restart`, {
-      method: 'POST',
-    });
-  }
-
-  async getServerLogs(id: string, type: 'stdout' | 'stderr' | 'both' = 'both', lines = 100) {
-    return this.request<{ stdout: string; stderr: string }>(
-      `/api/servers/${id}/logs?type=${type}&lines=${lines}`
-    );
-  }
-
-  // Models
-  async listModels() {
-    return this.request<{ models: Model[] }>('/api/models');
-  }
-
-  async getModel(name: string) {
-    return this.request<{ model: Model }>(`/api/models/${encodeURIComponent(name)}`);
-  }
-
-  async searchModels(query: string, limit = 20) {
-    return this.request<{ results: HFModelResult[] }>(
-      `/api/models/search?q=${encodeURIComponent(query)}&limit=${limit}`
-    );
-  }
-
-  async getModelFiles(repoId: string) {
-    return this.request<{ repoId: string; files: string[] }>(
-      `/api/models/${encodeURIComponent(repoId)}/files`
-    );
-  }
-
-  async downloadModel(repo: string, filename: string) {
-    return this.request<{ jobId: string; status: string }>(
-      '/api/models/download',
-      {
-        method: 'POST',
-        body: JSON.stringify({ repo, filename }),
-      }
-    );
-  }
-
-  async deleteModel(name: string, cascade = false) {
-    return this.request<{ success: boolean; deletedServers?: string[] }>(
-      `/api/models/${encodeURIComponent(name)}?cascade=${cascade}`,
-      {
-        method: 'DELETE',
-      }
-    );
-  }
-
-  // Download Jobs
-  async listDownloadJobs() {
-    return this.request<{ jobs: DownloadJob[] }>('/api/jobs');
-  }
-
-  async getDownloadJob(jobId: string) {
-    return this.request<{ job: DownloadJob }>(`/api/jobs/${jobId}`);
-  }
-
-  async cancelDownloadJob(jobId: string) {
-    return this.request<{ success: boolean; message: string }>(
-      `/api/jobs/${jobId}`,
-      { method: 'DELETE' }
-    );
-  }
-
-  // Router
-  async getRouter() {
-    return this.request<RouterInfo>('/api/router');
-  }
-
-  async startRouter() {
-    return this.request<{ success: boolean; status: string; pid: number | null }>(
-      '/api/router/start',
-      { method: 'POST' }
-    );
-  }
-
-  async stopRouter() {
-    return this.request<{ success: boolean; status: string }>(
-      '/api/router/stop',
-      { method: 'POST' }
-    );
-  }
-
-  async restartRouter() {
-    return this.request<{ success: boolean; status: string; pid: number | null }>(
-      '/api/router/restart',
-      { method: 'POST' }
-    );
-  }
-
-  async getRouterLogs(type: 'stdout' | 'stderr' | 'both' = 'both', lines = 100) {
-    return this.request<{ stdout: string; stderr: string }>(
-      `/api/router/logs?type=${type}&lines=${lines}`
-    );
-  }
-
-  async updateRouter(data: UpdateRouterRequest) {
-    return this.request<{ success: boolean; needsRestart: boolean; config: any }>(
-      '/api/router',
-      {
-        method: 'PATCH',
-        body: JSON.stringify(data),
-      }
-    );
-  }
-}
-
-export const api = new ApiClient();

package/web/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/web/src/pages/Dashboard.tsx

@@ -1,103 +0,0 @@
-import { useSystemStatus, useServers } from '../hooks/useApi';
-import { Server, Box, Activity, Clock } from 'lucide-react';
-
-export function Dashboard() {
-  const { data: status } = useSystemStatus();
-  const { data: serversData } = useServers();
-
-  const runningServers = serversData?.servers.filter(s => s.status === 'running') || [];
-
-  return (
-    <div className="max-w-7xl mx-auto px-6 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-semibold text-gray-900 dark:text-white mb-2">
-          Dashboard
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          Manage your local llama.cpp servers
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Total Servers</span>
-            <Server className="w-4 h-4 text-gray-400" />
-          </div>
-          <div className="text-3xl font-semibold text-gray-900 dark:text-white">
-            {status?.servers.total || 0}
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Running</span>
-            <Activity className="w-4 h-4 text-green-500" />
-          </div>
-          <div className="text-3xl font-semibold text-green-600 dark:text-green-500">
-            {status?.servers.running || 0}
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Stopped</span>
-            <Clock className="w-4 h-4 text-gray-400" />
-          </div>
-          <div className="text-3xl font-semibold text-gray-900 dark:text-white">
-            {status?.servers.stopped || 0}
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Models</span>
-            <Box className="w-4 h-4 text-gray-400" />
-          </div>
-          <div className="text-3xl font-semibold text-gray-900 dark:text-white">
-            {status?.models.total || 0}
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg">
-        <div className="p-6 border-b border-gray-200 dark:border-gray-800">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Running Servers
-          </h2>
-        </div>
-        <div className="divide-y divide-gray-200 dark:divide-gray-800">
-          {runningServers.length === 0 ? (
-            <div className="p-8 text-center">
-              <p className="text-gray-500 dark:text-gray-400">No servers running</p>
-            </div>
-          ) : (
-            runningServers.map((server) => (
-              <div key={server.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-1">
-                      {server.modelName}
-                    </h3>
-                    <div className="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
-                      <span>Port {server.port}</span>
-                      <span>•</span>
-                      <span>{server.threads} threads</span>
-                      <span>•</span>
-                      <span>Context {server.ctxSize}</span>
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
-                      Running
-                    </span>
-                  </div>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}