Implement model management for llama.cpp instances

webui/src/components/InstanceCard.tsx

@@ -2,13 +2,14 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { Instance } from "@/types/instance";
-import { Edit, FileText, Play, Square, Trash2, MoreHorizontal, Download } from "lucide-react";
+import { Edit, FileText, Play, Square, Trash2, MoreHorizontal, Download, Boxes } from "lucide-react";
 import LogsDialog from "@/components/LogDialog";
+import ModelsDialog from "@/components/ModelsDialog";
 import HealthBadge from "@/components/HealthBadge";
 import BackendBadge from "@/components/BackendBadge";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useInstanceHealth } from "@/hooks/useInstanceHealth";
-import { instancesApi } from "@/lib/api";
+import { instancesApi, llamaCppApi } from "@/lib/api";
 
 interface InstanceCardProps {
   instance: Instance;
@@ -26,9 +27,31 @@ function InstanceCard({
   editInstance,
 }: InstanceCardProps) {
   const [isLogsOpen, setIsLogsOpen] = useState(false);
+  const [isModelsOpen, setIsModelsOpen] = useState(false);
   const [showAllActions, setShowAllActions] = useState(false);
+  const [modelCount, setModelCount] = useState(0);
   const health = useInstanceHealth(instance.name, instance.status);
 
+  const running = instance.status === "running";
+  const isLlamaCpp = instance.options?.backend_type === "llama_cpp";
+
+  // Fetch model count for llama.cpp instances
+  useEffect(() => {
+    if (!isLlamaCpp || !running) {
+      setModelCount(0);
+      return;
+    }
+
+    void (async () => {
+      try {
+        const models = await llamaCppApi.getModels(instance.name);
+        setModelCount(models.length);
+      } catch {
+        setModelCount(0);
+      }
+    })();
+  }, [instance.name, isLlamaCpp, running]);
+
   const handleStart = () => {
     startInstance(instance.name);
   };
@@ -53,6 +76,10 @@ function InstanceCard({
     setIsLogsOpen(true);
   };
 
+  const handleModels = () => {
+    setIsModelsOpen(true);
+  };
+
   const handleExport = () => {
     void (async () => {
       try {
@@ -83,8 +110,6 @@ function InstanceCard({
     })();
   };
 
-  const running = instance.status === "running";
-
   return (
     <>
       <Card className="hover:shadow-md transition-shadow">
@@ -162,6 +187,20 @@ function InstanceCard({
                 Logs
               </Button>
 
+              {isLlamaCpp && modelCount > 1 && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={handleModels}
+                  title="Manage models"
+                  data-testid="manage-models-button"
+                  className="flex-1"
+                >
+                  <Boxes className="h-4 w-4 mr-1" />
+                  Models ({modelCount})
+                </Button>
+              )}
+
               <Button
                 size="sm"
                 variant="outline"
@@ -195,6 +234,13 @@ function InstanceCard({
         instanceName={instance.name}
         isRunning={running}
       />
+
+      <ModelsDialog
+        open={isModelsOpen}
+        onOpenChange={setIsModelsOpen}
+        instanceName={instance.name}
+        isRunning={running}
+      />
     </>
   );
 }

webui/src/components/ModelsDialog.tsx

@@ -0,0 +1,287 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { llamaCppApi } from '@/lib/api'
+import { RefreshCw, Loader2, AlertCircle } from 'lucide-react'
+
+interface ModelsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  instanceName: string
+  isRunning: boolean
+}
+
+interface Model {
+  id: string
+  object: string
+  owned_by: string
+  created: number
+  in_cache: boolean
+  path: string
+  status: {
+    value: string // "loaded" | "loading" | "unloaded"
+    args: string[]
+  }
+}
+
+const StatusIcon: React.FC<{ status: string }> = ({ status }) => {
+  switch (status) {
+    case 'loaded':
+      return (
+        <div className="h-2 w-2 rounded-full bg-green-500" />
+      )
+    case 'loading':
+      return (
+        <Loader2
+          className="h-3 w-3 animate-spin text-yellow-500"
+        />
+      )
+    case 'unloaded':
+      return (
+        <div className="h-2 w-2 rounded-full bg-gray-400" />
+      )
+    default:
+      return null
+  }
+}
+
+const ModelsDialog: React.FC<ModelsDialogProps> = ({
+  open,
+  onOpenChange,
+  instanceName,
+  isRunning,
+}) => {
+  const [models, setModels] = useState<Model[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [loadingModels, setLoadingModels] = useState<Set<string>>(new Set())
+
+  // Fetch models function
+  const fetchModels = React.useCallback(async () => {
+    if (!instanceName || !isRunning) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await llamaCppApi.getModels(instanceName)
+      setModels(response)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch models')
+    } finally {
+      setLoading(false)
+    }
+  }, [instanceName, isRunning])
+
+  // Poll for models while dialog is open
+  useEffect(() => {
+    if (!open || !isRunning) return
+
+    // Initial fetch
+    void fetchModels()
+
+    // Poll every 2 seconds
+    const interval = setInterval(() => {
+      void fetchModels()
+    }, 2000)
+
+    return () => clearInterval(interval)
+  }, [open, isRunning, fetchModels])
+
+  // Load model
+  const loadModel = async (modelName: string) => {
+    setLoadingModels((prev) => new Set(prev).add(modelName))
+    setError(null)
+
+    try {
+      await llamaCppApi.loadModel(instanceName, modelName)
+      // Polling will pick up the change
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load model')
+    } finally {
+      setLoadingModels((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(modelName)
+        return newSet
+      })
+    }
+  }
+
+  // Unload model
+  const unloadModel = async (modelName: string) => {
+    setLoadingModels((prev) => new Set(prev).add(modelName))
+    setError(null)
+
+    try {
+      await llamaCppApi.unloadModel(instanceName, modelName)
+      // Polling will pick up the change
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to unload model')
+    } finally {
+      setLoadingModels((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(modelName)
+        return newSet
+      })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-4xl max-w-[calc(100%-2rem)] max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <DialogTitle className="flex items-center gap-2">
+                Models: {instanceName}
+                <Badge variant={isRunning ? 'default' : 'secondary'}>
+                  {isRunning ? 'Running' : 'Stopped'}
+                </Badge>
+              </DialogTitle>
+              <DialogDescription>
+                Manage models in this llama.cpp instance
+              </DialogDescription>
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void fetchModels()}
+              disabled={loading || !isRunning}
+            >
+              {loading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCw className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </DialogHeader>
+
+        {/* Error Display */}
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <AlertCircle className="h-4 w-4 text-destructive" />
+            <span className="text-sm text-destructive">{error}</span>
+          </div>
+        )}
+
+        {/* Models Table */}
+        <div className="flex-1 flex flex-col min-h-0 overflow-auto">
+          {!isRunning ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              Instance is not running
+            </div>
+          ) : loading && models.length === 0 ? (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-muted-foreground">
+                Loading models...
+              </span>
+            </div>
+          ) : models.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground">
+              No models found
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Model</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {models.map((model) => {
+                  const isLoading = loadingModels.has(model.id)
+                  const isModelLoading = model.status.value === 'loading'
+
+                  return (
+                    <TableRow key={model.id}>
+                      <TableCell className="font-mono text-sm">
+                        {model.id}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <StatusIcon status={model.status.value} />
+                          <span className="text-sm capitalize">
+                            {model.status.value}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {model.status.value === 'loaded' ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => unloadModel(model.id)}
+                            disabled={!isRunning || isLoading || isModelLoading}
+                          >
+                            {isLoading ? (
+                              <>
+                                <Loader2 className="h-3 w-3 animate-spin mr-1" />
+                                Unloading...
+                              </>
+                            ) : (
+                              'Unload'
+                            )}
+                          </Button>
+                        ) : model.status.value === 'unloaded' ? (
+                          <Button
+                            size="sm"
+                            variant="default"
+                            onClick={() => loadModel(model.id)}
+                            disabled={!isRunning || isLoading || isModelLoading}
+                          >
+                            {isLoading ? (
+                              <>
+                                <Loader2 className="h-3 w-3 animate-spin mr-1" />
+                                Loading...
+                              </>
+                            ) : (
+                              'Load'
+                            )}
+                          </Button>
+                        ) : (
+                          <Button size="sm" variant="ghost" disabled>
+                            Loading...
+                          </Button>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        {/* Auto-refresh indicator */}
+        {isRunning && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+            Auto-refreshing every 2 seconds
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ModelsDialog

webui/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

webui/src/lib/api.ts

@@ -205,3 +205,51 @@ export const apiKeysApi = {
   getPermissions: (id: number) =>
     apiCall<KeyPermissionResponse[]>(`/auth/keys/${id}/permissions`),
 };
+
+// Llama.cpp model management types
+export interface Model {
+  id: string;
+  object: string;
+  owned_by: string;
+  created: number;
+  in_cache: boolean;
+  path: string;
+  status: {
+    value: string; // "loaded" | "loading" | "unloaded"
+    args: string[];
+  };
+}
+
+export interface ModelsListResponse {
+  object: string;
+  data: Model[];
+}
+
+// Llama.cpp model management API functions
+export const llamaCppApi = {
+  // GET /llama-cpp/{name}/models
+  getModels: async (instanceName: string): Promise<Model[]> => {
+    const response = await apiCall<ModelsListResponse>(
+      `/llama-cpp/${encodeURIComponent(instanceName)}/models`
+    );
+    return response.data;
+  },
+
+  // POST /llama-cpp/{name}/models/{model}/load
+  loadModel: (instanceName: string, modelName: string) =>
+    apiCall<{ status: string; message: string }>(
+      `/llama-cpp/${encodeURIComponent(instanceName)}/models/${encodeURIComponent(modelName)}/load`,
+      {
+        method: "POST",
+      }
+    ),
+
+  // POST /llama-cpp/{name}/models/{model}/unload
+  unloadModel: (instanceName: string, modelName: string) =>
+    apiCall<{ status: string; message: string }>(
+      `/llama-cpp/${encodeURIComponent(instanceName)}/models/${encodeURIComponent(modelName)}/unload`,
+      {
+        method: "POST",
+      }
+    ),
+};