@appkit/llamacpp-cli 1.11.0 → 1.12.0

package/web/src/pages/Servers.tsx

@@ -0,0 +1,358 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import { useServers, useStartServer, useStopServer } from '../hooks/useApi';
+import { Play, Square, Cpu, Database, Loader2, Settings, Plus, FileText } from 'lucide-react';
+import { ServerConfigModal } from '../components/ServerConfigModal';
+import { CreateServerModal } from '../components/CreateServerModal';
+import type { Server } from '../types/api';
+
+type ServerFilter = 'all' | 'running' | 'stopped';
+
+export function Servers() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data: serversData, isLoading } = useServers();
+  const startServer = useStartServer();
+  const stopServer = useStopServer();
+
+  const [actionLoading, setActionLoading] = useState<{ id: string; action: 'start' | 'stop' } | null>(null);
+  const [configServer, setConfigServer] = useState<Server | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [filter, setFilter] = useState<ServerFilter>('all');
+
+  const pendingAction = useRef<{ id: string; expectedStatus: 'running' | 'stopped' } | null>(null);
+
+  const servers = serversData?.servers || [];
+
+  useEffect(() => {
+    if (pendingAction.current && actionLoading) {
+      const { id, expectedStatus } = pendingAction.current;
+      const server = servers.find(s => s.id === id);
+      if (server && server.status === expectedStatus) {
+        pendingAction.current = null;
+        setActionLoading(null);
+      }
+    }
+  }, [servers, actionLoading]);
+
+  const handleStart = async (id: string) => {
+    setActionLoading({ id, action: 'start' });
+    pendingAction.current = { id, expectedStatus: 'running' };
+    try {
+      await startServer.mutateAsync(id);
+      await queryClient.refetchQueries({ queryKey: ['servers'] });
+    } catch {
+      pendingAction.current = null;
+      setActionLoading(null);
+    }
+  };
+
+  const handleStop = async (id: string) => {
+    setActionLoading({ id, action: 'stop' });
+    pendingAction.current = { id, expectedStatus: 'stopped' };
+    try {
+      await stopServer.mutateAsync(id);
+      await queryClient.refetchQueries({ queryKey: ['servers'] });
+    } catch {
+      pendingAction.current = null;
+      setActionLoading(null);
+    }
+  };
+
+  const renderStatusBadge = (server: Server) => {
+    const serverId = server.id;
+
+    if (actionLoading?.id === serverId) {
+      if (actionLoading.action === 'stop') {
+        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" />
+            Stopping
+          </span>
+        );
+      }
+      if (actionLoading.action === 'start') {
+        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" />
+            Starting
+          </span>
+        );
+      }
+    }
+
+    if (server.status === 'running') {
+      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>
+      );
+    }
+
+    if (server.status === 'crashed') {
+      return (
+        <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-red-50 text-red-700 border border-red-200/50">
+          <span className="w-1.5 h-1.5 rounded-full bg-red-500"></span>
+          Crashed
+        </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>
+    );
+  };
+
+  const formatContextSize = (size: number) => {
+    if (size >= 1024) return `${(size / 1024).toFixed(0)}K`;
+    return size.toString();
+  };
+
+  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 runningServers = servers.filter(s => s.status === 'running');
+
+  // Apply filter
+  const filteredServers = servers.filter(server => {
+    if (filter === 'all') return true;
+    if (filter === 'running') return server.status === 'running';
+    if (filter === 'stopped') return server.status !== 'running';
+    return true;
+  });
+
+  const displayRunning = filteredServers.filter(s => s.status === 'running');
+  const displayStopped = filteredServers.filter(s => s.status !== 'running');
+
+  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">Servers</h1>
+          <p className="text-sm text-neutral-600 mt-1">
+            {servers.length} server{servers.length !== 1 ? 's' : ''}
+            {runningServers.length > 0 && ` • ${runningServers.length} running`}
+          </p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(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"
+        >
+          <Plus className="w-4 h-4" />
+          Create Server
+        </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('running')}
+          className={`px-3 py-1.5 text-sm font-medium rounded-full border transition-all cursor-pointer ${
+            filter === 'running'
+              ? 'bg-neutral-900 text-white border-neutral-900'
+              : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300'
+          }`}
+        >
+          Running
+        </button>
+        <button
+          onClick={() => setFilter('stopped')}
+          className={`px-3 py-1.5 text-sm font-medium rounded-full border transition-all cursor-pointer ${
+            filter === 'stopped'
+              ? 'bg-neutral-900 text-white border-neutral-900'
+              : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300'
+          }`}
+        >
+          Stopped
+        </button>
+      </div>
+
+      {/* Grid Layout */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Running Servers */}
+        {displayRunning.map((server) => (
+          <div
+            key={server.id}
+            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-1">
+                  {server.modelName.replace('.gguf', '')}
+                </h3>
+                <p className="text-sm text-neutral-500">
+                  localhost:{server.port}
+                </p>
+              </div>
+              {renderStatusBadge(server)}
+            </div>
+
+            <div className="space-y-2 mb-4">
+              <div className="flex items-center gap-2 text-xs text-neutral-600">
+                <Cpu className="w-3.5 h-3.5 text-neutral-400" />
+                <span>{server.threads} threads</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs text-neutral-600">
+                <Database className="w-3.5 h-3.5 text-neutral-400" />
+                <span>{formatContextSize(server.ctxSize)} context • {server.gpuLayers} GPU layers</span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => navigate(`/servers/${server.id}/logs`)}
+                disabled={actionLoading?.id === server.id}
+                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="Logs"
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Logs
+              </button>
+              <button
+                onClick={() => setConfigServer(server)}
+                disabled={actionLoading?.id === server.id}
+                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>
+              <button
+                onClick={() => handleStop(server.id)}
+                disabled={actionLoading?.id === server.id}
+                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>
+            </div>
+          </div>
+        ))}
+
+        {/* Stopped Servers */}
+        {displayStopped.map((server) => (
+          <div
+            key={server.id}
+            className="group bg-white border border-neutral-200 rounded-lg p-5 hover:border-neutral-300 hover:shadow-sm transition-all opacity-60 hover:opacity-100"
+          >
+            <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-1">
+                  {server.modelName.replace('.gguf', '')}
+                </h3>
+                <p className="text-sm text-neutral-500">
+                  localhost:{server.port}
+                </p>
+              </div>
+              {renderStatusBadge(server)}
+            </div>
+
+            <div className="space-y-2 mb-4">
+              <div className="flex items-center gap-2 text-xs text-neutral-600">
+                <Cpu className="w-3.5 h-3.5 text-neutral-400" />
+                <span>{server.threads} threads</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs text-neutral-600">
+                <Database className="w-3.5 h-3.5 text-neutral-400" />
+                <span>{formatContextSize(server.ctxSize)} context</span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => navigate(`/servers/${server.id}/logs`)}
+                disabled={actionLoading?.id === server.id}
+                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="Logs"
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Logs
+              </button>
+              <button
+                onClick={() => setConfigServer(server)}
+                disabled={actionLoading?.id === server.id}
+                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>
+              <button
+                onClick={() => handleStart(server.id)}
+                disabled={actionLoading?.id === server.id}
+                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>
+        ))}
+      </div>
+
+      {/* Empty State */}
+      {filteredServers.length === 0 && servers.length > 0 && (
+        <div className="text-center py-16 bg-white border border-neutral-200 rounded-lg">
+          <p className="text-neutral-600 text-base mb-2">No {filter} servers</p>
+          <p className="text-sm text-neutral-500">
+            Try a different filter or create a new server
+          </p>
+        </div>
+      )}
+
+      {servers.length === 0 && (
+        <div className="text-center py-16 bg-white border border-neutral-200 rounded-lg">
+          <p className="text-neutral-600 text-base mb-2">No servers configured</p>
+          <p className="text-sm text-neutral-500 mb-6">
+            Create your first server to get started
+          </p>
+          <button
+            onClick={() => setShowCreateModal(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"
+          >
+            <Plus className="w-4 h-4" />
+            Create Server
+          </button>
+        </div>
+      )}
+
+      {/* Config Modal */}
+      <ServerConfigModal
+        server={configServer}
+        isOpen={configServer !== null}
+        onClose={() => setConfigServer(null)}
+      />
+
+      {/* Create Modal */}
+      <CreateServerModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
+    </div>
+  );
+}

package/web/src/types/api.ts

@@ -0,0 +1,140 @@
+export type ServerStatus = 'running' | 'stopped' | 'crashed';
+
+export interface Server {
+  id: string;
+  modelPath: string;
+  modelName: string;
+  port: number;
+  host: string;
+  threads: number;
+  ctxSize: number;
+  gpuLayers: number;
+  embeddings: boolean;
+  jinja: boolean;
+  verbose: boolean;
+  customFlags?: string[];
+  status: ServerStatus;
+  pid?: number;
+  createdAt: string;
+  lastStarted?: string;
+  lastStopped?: string;
+  plistPath: string;
+  label: string;
+  stdoutPath: string;
+  stderrPath: string;
+}
+
+export interface Model {
+  filename: string;
+  path: string;
+  size: number;
+  sizeFormatted: string;
+  modified: Date;
+  exists: boolean;
+  serversUsing: number;
+  serverIds: string[];
+}
+
+export interface SystemStatus {
+  servers: {
+    total: number;
+    running: number;
+    stopped: number;
+    crashed: number;
+  };
+  models: {
+    total: number;
+    totalSize: number;
+  };
+  system: {
+    uptime: number;
+    timestamp: string;
+  };
+}
+
+export interface CreateServerRequest {
+  model: string;
+  port?: number;
+  host?: string;
+  threads?: number;
+  ctxSize?: number;
+  gpuLayers?: number;
+  verbose?: boolean;
+  customFlags?: string[];
+}
+
+export interface UpdateServerRequest {
+  model?: string;
+  port?: number;
+  host?: string;
+  threads?: number;
+  ctxSize?: number;
+  gpuLayers?: number;
+  verbose?: boolean;
+  customFlags?: string[];
+  restart?: boolean;
+}
+
+export interface ApiError {
+  error: string;
+  details?: string;
+  code?: string;
+}
+
+// HuggingFace model search types
+export interface HFModelResult {
+  modelId: string;
+  author: string;
+  modelName: string;
+  downloads: number;
+  likes: number;
+  tags: string[];
+  lastModified: string;
+}
+
+// Download job types
+export type DownloadJobStatus = 'pending' | 'downloading' | 'completed' | 'failed' | 'cancelled';
+
+export interface DownloadJob {
+  id: string;
+  repo: string;
+  filename: string;
+  status: DownloadJobStatus;
+  progress: {
+    downloaded: number;
+    total: number;
+    percentage: number;
+    speed: string;
+  } | null;
+  error?: string;
+  createdAt: string;
+  completedAt?: string;
+}
+
+// Router types
+export type RouterStatus = 'not_configured' | 'running' | 'stopped';
+
+export interface RouterInfo {
+  status: RouterStatus;
+  config: {
+    port: number;
+    host: string;
+    verbose: boolean;
+    requestTimeout: number;
+    healthCheckInterval: number;
+  } | null;
+  pid: number | null;
+  isRunning: boolean;
+  availableModels: string[];
+  createdAt?: string;
+  lastStarted?: string;
+  lastStopped?: string;
+}
+
+export interface UpdateRouterRequest {
+  port?: number;
+  host?: string;
+  verbose?: boolean;
+  requestTimeout?: number;
+  healthCheckInterval?: number;
+}

package/web/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        neutral: {
+          50: '#fafafa',
+          100: '#f5f5f5',
+          150: '#ededed',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+          950: '#0a0a0a',
+        }
+      },
+      fontFamily: {
+        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}

package/web/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/web/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/web/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:9200',
+        changeOrigin: true,
+      },
+      '/health': {
+        target: 'http://localhost:9200',
+        changeOrigin: true,
+      },
+    },
+  },
+})