@appkit/llamacpp-cli 1.10.1 → 1.12.0

package/web/src/hooks/useApi.ts

@@ -0,0 +1,259 @@
+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

@@ -0,0 +1,42 @@
+@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

@@ -0,0 +1,226 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,103 @@
+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>
+  );
+}