update

frontend/src/components/AdminPanel.tsx

@@ -1,10 +1,184 @@
-import { useEffect, useState } from "react";
-import { KeyRound, Pencil, RefreshCw, Trash2, UserPlus, Users } from "lucide-react";
+import { useEffect, useState, type FC, type ReactNode } from "react";
+import { Bot, Download, HardDrive, KeyRound, Pencil, RefreshCw, Trash2, UserPlus, Users } from "lucide-react";
 import { api } from "../lib/api.ts";
-import type { User } from "../lib/types.ts";
+import type { DriverModel, User } from "../lib/types.ts";
 import { Avatar, Button, ConfirmDialog, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
 
-export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => void }) {
+/** Curated Ollama library catalog (admin downloads only). */
+const OLLAMA_CATALOG: { name: string; desc: string; sizes: string[] }[] = [
+  { name: "llama3.2", desc: "Meta's compact everyday model", sizes: ["1b", "3b"] },
+  { name: "llama3.1", desc: "Meta's general-purpose workhorse", sizes: ["8b", "70b"] },
+  { name: "qwen2.5", desc: "Alibaba's multilingual all-rounder", sizes: ["0.5b", "1.5b", "7b", "14b", "32b"] },
+  { name: "gemma2", desc: "Google's efficient open model", sizes: ["2b", "9b", "27b"] },
+  { name: "mistral", desc: "Mistral 7B — fast and capable", sizes: ["7b"] },
+  { name: "phi3", desc: "Microsoft's small research model", sizes: ["3.8b", "14b"] },
+  { name: "deepseek-r1", desc: "Reasoning model (chain-of-thought)", sizes: ["1.5b", "7b", "8b", "14b", "32b"] },
+  { name: "codellama", desc: "Code completion and chat", sizes: ["7b", "13b", "34b"] },
+  { name: "llava", desc: "Vision model (image understanding)", sizes: ["7b", "13b", "34b"] },
+  { name: "nomic-embed-text", desc: "Text embeddings", sizes: [] },
+];
+
+/* ---------- Ollama model catalog (admin) ---------- */
+
+export function OllamaModelsModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [installed, setInstalled] = useState<DriverModel[]>([]);
+  const [pullName, setPullName] = useState("");
+  const [pullStatus, setPullStatus] = useState("");
+  const [pullPct, setPullPct] = useState<number | null>(null);
+  const [pulling, setPulling] = useState(false);
+  const [error, setError] = useState("");
+  const [deleteModel, setDeleteModel] = useState<string | null>(null);
+  const [sizeOverrides, setSizeOverrides] = useState<Record<string, string>>({});
+
+  async function refreshInstalled() {
+    try {
+      const res = await api.models();
+      setInstalled(res.models.filter((m) => m.driver === "ollama"));
+    } catch { /* ignore */ }
+  }
+
+  useEffect(() => {
+    if (open) {
+      setError("");
+      setPullStatus("");
+      setPullPct(null);
+      setPulling(false);
+      refreshInstalled();
+    }
+  }, [open]);
+
+  async function pull(fullName: string) {
+    if (pulling || !fullName.trim()) return;
+    setPulling(true);
+    setError("");
+    setPullStatus("Contacting Ollama…");
+    setPullPct(null);
+    try {
+      await api.ollamaPull(fullName.trim(), (p) => {
+        if (p.error) { setError(p.error); return; }
+        setPullStatus(p.status || "Pulling…");
+        if (p.total && p.completed) setPullPct(Math.min(100, Math.round((p.completed / p.total) * 100)));
+        else setPullPct(null);
+      });
+      setPullStatus("Done");
+      setPullPct(100);
+      await refreshInstalled();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Pull failed");
+    } finally {
+      setPulling(false);
+    }
+  }
+
+  async function removeModel(name: string) {
+    try {
+      await api.ollamaDelete(name);
+      await refreshInstalled();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Delete failed");
+    }
+  }
+
+  return (
+    <>
+      <Modal open={open} onClose={pulling ? () => {} : onClose} title="Ollama models" icon={Bot}>
+        <p className="mb-4 text-sm opacity-70">
+          Download models from the Ollama library to your Ollama host, or remove local ones. Admin only.
+        </p>
+        {error && <p className="mb-3 rounded-2xl bg-red-50 px-4 py-2.5 text-sm text-red-600 dark:bg-red-950/40 dark:text-red-400" role="alert">{error}</p>}
+
+        {pulling && (
+          <div className="mb-4 rounded-2xl border border-accent-500/40 bg-accent-50 p-4 dark:bg-accent-950/30">
+            <p className="mb-2 flex items-center gap-2 text-sm font-medium">
+              <Download size={15} className="animate-bounce" />
+              Pulling {pullName}
+            </p>
+            <p className="mb-2 truncate text-xs opacity-70">{pullStatus}</p>
+            {pullPct !== null && (
+              <div className="h-2 overflow-hidden rounded-full bg-stone-200 dark:bg-zinc-800">
+                <div className="h-full rounded-full bg-accent-600 transition-all dark:bg-accent-500" style={{ width: `${pullPct}%` }} />
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="mb-4 flex flex-wrap items-end gap-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700">
+          <div className="min-w-52 flex-1">
+            <Field label="Custom model tag" hint="e.g. llama3.2:3b, or a full library name">
+              <Input
+                value={pullName}
+                onChange={(e) => setPullName(e.target.value)}
+                placeholder="llama3.2:3b"
+                disabled={pulling}
+                onKeyDown={(e) => e.key === "Enter" && pull(pullName)}
+              />
+            </Field>
+          </div>
+          <Button size="sm" onClick={() => pull(pullName)} disabled={pulling || !pullName.trim()}>
+            {pulling ? <Spinner size={15} /> : <Download size={15} />} Pull
+          </Button>
+        </div>
+
+        <p className="mb-2 flex items-center gap-1.5 text-sm font-medium"><HardDrive size={14} /> Installed ({installed.length})</p>
+        <ul className="mb-5 space-y-1.5">
+          {installed.length === 0 && <li className="text-sm opacity-50">No local Ollama models yet.</li>}
+          {installed.map((m) => (
+            <li key={m.id} className="flex items-center gap-3 rounded-2xl border border-stone-200/70 px-3.5 py-2 dark:border-zinc-800">
+              <span className="min-w-0 flex-1 truncate text-sm font-medium">{m.label || m.id}</span>
+              <button
+                title={`Delete ${m.label || m.id}`}
+                onClick={() => setDeleteModel(m.label || m.id)}
+                className="rounded-full p-2 text-red-600 transition hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40"
+              >
+                <Trash2 size={15} />
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <p className="mb-2 flex items-center gap-1.5 text-sm font-medium"><Download size={14} /> Catalog</p>
+        <ul className="space-y-1.5">
+          {OLLAMA_CATALOG.map((m) => {
+            const size = sizeOverrides[m.name] ?? (m.sizes.length > 0 ? m.sizes[0]! : "");
+            const tag = size ? `${m.name}:${size}` : m.name;
+            return (
+              <li key={m.name} className="flex flex-wrap items-center gap-2 rounded-2xl border border-stone-200/70 px-3.5 py-2 dark:border-zinc-800">
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">{m.name}</span>
+                  <span className="block text-xs opacity-50">{m.desc}</span>
+                </span>
+                {m.sizes.length > 0 && (
+                  <span className="w-24 shrink-0">
+                    <Picker
+                      ariaLabel={`${m.name} size`}
+                      value={size}
+                      onChange={(v) => setSizeOverrides((prev) => ({ ...prev, [m.name]: v }))}
+                      align="right"
+                      options={m.sizes.map((s) => ({ value: s, label: s }))}
+                    />
+                  </span>
+                )}
+                <Button size="sm" variant="secondary" onClick={() => { setPullName(tag); pull(tag); }} disabled={pulling}>
+                  <Download size={14} /> Pull
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </Modal>
+
+      <ConfirmDialog
+        open={deleteModel !== null}
+        onClose={() => setDeleteModel(null)}
+        title={`Delete ${deleteModel}?`}
+        message="The model is removed from the Ollama host. Pull it again anytime."
+        onConfirm={() => deleteModel && removeModel(deleteModel)}
+      />
+    </>
+  );
+}
+
+export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: () => void; bare?: boolean }) {
   const [users, setUsers] = useState<User[]>([]);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -12,6 +186,7 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
   const [freshKey, setFreshKey] = useState<{ username: string; key: string } | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<User | null>(null);
   const [editTarget, setEditTarget] = useState<User | null>(null);
+  const [modelsOpen, setModelsOpen] = useState(false);
 
   // create form
   const [username, setUsername] = useState("");
@@ -32,13 +207,13 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
   }
 
   useEffect(() => {
-    if (open) {
+    if (open || bare) {
       refresh();
       setShowCreate(false);
       setFreshKey(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open ]);
+  }, [open, bare ]);
 
   async function create(e: React.FormEvent) {
     e.preventDefault();
@@ -75,9 +250,15 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
     }
   }
 
+  // Bare mode embeds the same manager in the /admin Center page instead
+  // of a modal — no logic duplicated.
+  const Shell: FC<{ children: ReactNode }> = bare
+    ? ({ children }) => <div className="min-w-0 flex-1 space-y-1">{children}</div>
+    : ({ children }) => <Modal open={open} onClose={onClose} title="Accounts" icon={Users} wide>{children}</Modal>;
+
   return (
     <>
-      <Modal open={open} onClose={onClose} title="Accounts" icon={Users} wide>
+      <Shell>
         <p className="mb-4 text-sm opacity-70">
           No-KYC accounts: you create a username, hand the access key to its owner once. Keys are stored hashed — regenerate to rotate.
         </p>
@@ -94,9 +275,14 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
         )}
 
         {!showCreate ? (
-          <Button variant="secondary" size="sm" onClick={() => setShowCreate(true)} className="mb-3">
-            <UserPlus size={15} /> New account
-          </Button>
+          <div className="mb-3 flex flex-wrap gap-2">
+            <Button variant="secondary" size="sm" onClick={() => setShowCreate(true)}>
+              <UserPlus size={15} /> New account
+            </Button>
+            <Button variant="secondary" size="sm" onClick={() => setModelsOpen(true)}>
+              <Bot size={15} /> Ollama models
+            </Button>
+          </div>
         ) : (
           <form onSubmit={create} className="mb-4 flex flex-wrap items-end gap-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700">
             <div className="min-w-40 flex-1">
@@ -135,7 +321,7 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
             ))}
           </ul>
         )}
-      </Modal>
+      </Shell>
 
       <ConfirmDialog
         open={deleteTarget !== null}
@@ -146,6 +332,7 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
       />
 
       <EditUserDialog user={editTarget} onClose={() => setEditTarget(null)} onSaved={refresh} />
+      <OllamaModelsModal open={modelsOpen} onClose={() => setModelsOpen(false)} />
     </>
   );
 }