@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/local-inference/LocalInferencePanel.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { CheckCircle2, Play } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { resolveApiUrl } from "../../utils/asset-url.js";
+import { getElizaApiToken } from "../../utils/eliza-globals.js";
+import { AdvancedSettingsDisclosure } from "../settings/settings-control-primitives.js";
+import { ActiveModelBar } from "./ActiveModelBar.js";
+import { DeviceBridgeStatusBar } from "./DeviceBridgeStatus.js";
+import { DevicesPanel } from "./DevicesPanel.js";
+import { DownloadQueue } from "./DownloadQueue.js";
+import { FirstRunOffer } from "./FirstRunOffer.js";
+import { HardwareBadge } from "./HardwareBadge.js";
+import { HuggingFaceSearch } from "./HuggingFaceSearch.js";
+import { ModelHubView } from "./ModelHubView.js";
+import { SlotAssignments } from "./SlotAssignments.js";
+export function LocalInferencePanel() {
+    const { setActionNotice } = useApp();
+    const [hub, setHub] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [tab, setTab] = useState("curated");
+    const eventSourceRef = useRef(null);
+    const refresh = useCallback(async () => {
+        try {
+            const snapshot = await client.getLocalInferenceHub();
+            setHub(snapshot);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load models");
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    useEffect(() => {
+        // Subscribe to server-side progress updates. EventSource doesn't allow
+        // custom headers, so we pass the auth token as a query param — the
+        // route's `isStreamAuthorized` accepts either source.
+        const url = resolveApiUrl("/api/local-inference/downloads/stream");
+        const withToken = appendTokenParam(url);
+        const es = new EventSource(withToken, { withCredentials: false });
+        eventSourceRef.current = es;
+        es.onmessage = (event) => {
+            try {
+                const payload = JSON.parse(event.data);
+                if (payload.type === "snapshot") {
+                    setHub((prev) => prev
+                        ? {
+                            ...prev,
+                            downloads: payload.downloads,
+                            active: payload.active,
+                        }
+                        : prev);
+                }
+                else if (payload.type === "active") {
+                    setHub((prev) => (prev ? { ...prev, active: payload.active } : prev));
+                }
+                else {
+                    // Single-job event: merge into the downloads list.
+                    setHub((prev) => {
+                        if (!prev)
+                            return prev;
+                        const others = prev.downloads.filter((d) => d.modelId !== payload.job.modelId);
+                        const downloads = payload.type === "completed" || payload.type === "cancelled"
+                            ? others
+                            : [...others, payload.job];
+                        return { ...prev, downloads };
+                    });
+                    if (payload.type === "completed") {
+                        // A completed download adds to `installed`; refetch to pick it up.
+                        void refresh();
+                    }
+                }
+            }
+            catch {
+                // Ignore malformed events rather than blow away the panel.
+            }
+        };
+        es.onerror = () => {
+            // EventSource auto-reconnects; we only surface the error if it
+            // outright closes.
+            if (es.readyState === EventSource.CLOSED) {
+                setError("Live updates disconnected");
+            }
+        };
+        return () => {
+            es.close();
+            eventSourceRef.current = null;
+        };
+    }, [refresh]);
+    const withBusy = useCallback(async (fn) => {
+        setBusy(true);
+        try {
+            return await fn();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setActionNotice(message, "error", 4000);
+            return undefined;
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [setActionNotice]);
+    const handleDownload = useCallback((modelId) => {
+        void withBusy(async () => {
+            await client.startLocalInferenceDownload(modelId);
+            setActionNotice("Download started", "success", 2000);
+        });
+    }, [setActionNotice, withBusy]);
+    const handleDownloadSpec = useCallback((spec) => {
+        void withBusy(async () => {
+            await client.startLocalInferenceDownload(spec);
+            setActionNotice(`Downloading ${spec.displayName}`, "success", 2000);
+        });
+    }, [setActionNotice, withBusy]);
+    const handleCancel = useCallback((modelId) => {
+        void withBusy(async () => {
+            await client.cancelLocalInferenceDownload(modelId);
+        });
+    }, [withBusy]);
+    const handleActivate = useCallback((modelId) => {
+        void withBusy(async () => {
+            const active = await client.setLocalInferenceActive(modelId);
+            setHub((prev) => (prev ? { ...prev, active } : prev));
+            if (active.status === "error") {
+                setActionNotice(active.error ?? "Failed to activate", "error", 4000);
+            }
+            else if (active.status === "ready") {
+                setActionNotice("Model activated", "success", 2000);
+            }
+        });
+    }, [setActionNotice, withBusy]);
+    const handleUnload = useCallback(() => {
+        void withBusy(async () => {
+            const active = await client.clearLocalInferenceActive();
+            setHub((prev) => (prev ? { ...prev, active } : prev));
+        });
+    }, [withBusy]);
+    const handleUninstall = useCallback((modelId) => {
+        void withBusy(async () => {
+            await client.uninstallLocalInferenceModel(modelId);
+            setActionNotice("Model uninstalled", "success", 2000);
+            await refresh();
+        });
+    }, [refresh, setActionNotice, withBusy]);
+    const handleVerify = useCallback((modelId) => {
+        void withBusy(async () => {
+            const result = await client.verifyLocalInferenceModel(modelId);
+            const tone = result.state === "ok"
+                ? "success"
+                : result.state === "unknown"
+                    ? "success"
+                    : "error";
+            const message = result.state === "ok"
+                ? "Model verified"
+                : result.state === "unknown"
+                    ? "Baseline hash recorded — future verifies will compare against it"
+                    : result.state === "missing"
+                        ? "Model file is missing from disk"
+                        : result.state === "truncated"
+                            ? "Model file is corrupt (not a valid GGUF)"
+                            : "Model hash doesn't match the installed copy — re-download recommended";
+            setActionNotice(message, tone, 4000);
+            await refresh();
+        });
+    }, [refresh, setActionNotice, withBusy]);
+    const handleRedownload = useCallback((modelId) => {
+        void withBusy(async () => {
+            // Uninstall + re-queue a fresh download. Safe for curated catalog
+            // ids only; HF-search ad-hoc entries keep their install.
+            await client.uninstallLocalInferenceModel(modelId);
+            await client.startLocalInferenceDownload(modelId);
+            setActionNotice("Redownload started", "success", 2000);
+            await refresh();
+        });
+    }, [refresh, setActionNotice, withBusy]);
+    const handleAssignmentsChange = useCallback((next) => {
+        setHub((prev) => prev ? { ...prev, assignments: next } : prev);
+    }, []);
+    if (error && !hub) {
+        return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: [_jsx("span", { children: error }), _jsx(Button, { size: "sm", variant: "outline", className: "h-8 rounded-lg", onClick: refresh, children: "Retry" })] }));
+    }
+    if (!hub) {
+        return _jsx("p", { className: "text-sm text-muted", children: "Loading local models\u2026" });
+    }
+    const catalog = hub.catalog;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(HardwareBadge, { hardware: hub.hardware }), _jsx(DeviceBridgeStatusBar, {}), _jsx(FirstRunOffer, { catalog: catalog, installed: hub.installed, hardware: hub.hardware, onDownload: handleDownload, busy: busy }), _jsx(ActiveModelBar, { active: hub.active, installed: hub.installed, onUnload: handleUnload, busy: busy }), _jsx("nav", { className: "inline-flex h-8 w-fit items-center rounded-lg border border-border/60 bg-bg/40 p-0.5", children: [
+                    ["curated", "Curated"],
+                    ["search", "Search"],
+                    ["downloads", "Downloads"],
+                ].map(([id, label]) => {
+                    const active = tab === id;
+                    return (_jsx("button", { type: "button", onClick: () => setTab(id), className: `h-7 rounded-md px-2.5 text-xs font-medium transition-colors ${active
+                            ? "bg-card text-txt shadow-sm"
+                            : "text-muted hover:text-txt"}`, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [label, id === "downloads" && hub.downloads.length > 0 ? (_jsx("span", { className: "rounded-full border border-border/50 bg-card px-1.5 py-0.5 text-[10px] leading-none text-muted", children: hub.downloads.length })) : null] }) }, id));
+                }) }), tab === "curated" && (_jsx(ModelHubView, { catalog: catalog, installed: hub.installed, downloads: hub.downloads, active: hub.active, hardware: hub.hardware, onDownload: handleDownload, onCancel: handleCancel, onActivate: handleActivate, onUninstall: handleUninstall, onVerify: handleVerify, onRedownload: handleRedownload, busy: busy })), tab === "search" && (_jsx(HuggingFaceSearch, { installed: hub.installed, downloads: hub.downloads, active: hub.active, hardware: hub.hardware, onDownload: handleDownloadSpec, onCancel: handleCancel, onActivate: handleActivate, onUninstall: handleUninstall, busy: busy })), tab === "downloads" && (_jsx(DownloadQueue, { downloads: hub.downloads, catalog: hub.catalog, onCancel: handleCancel })), _jsx(AdvancedSettingsDisclosure, { title: "Local model assignments", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(SlotAssignments, { installed: hub.installed, assignments: hub.assignments, onChange: handleAssignmentsChange }), _jsx(DevicesPanel, {}), _jsx(ExternalInstalledSummary, { installed: hub.installed, onActivate: handleActivate, active: hub.active, busy: busy })] }) })] }));
+}
+function ExternalInstalledSummary({ installed, onActivate, active, busy, }) {
+    const external = installed.filter((m) => m.source === "external-scan");
+    if (external.length === 0)
+        return null;
+    return (_jsxs("section", { className: "space-y-2 border-t border-border/40 pt-3", children: [_jsx("header", { children: _jsx("h3", { className: "text-[10px] font-medium uppercase tracking-wider text-muted", title: "Eliza can load these models without re-downloading.", children: "Discovered from other tools" }) }), _jsx("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: external.map((m) => {
+                    const isActive = active.modelId === m.id && active.status !== "error";
+                    return (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-lg border border-border/50 bg-card/60 px-2 py-1.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-txt", children: m.displayName }), _jsxs("div", { className: "truncate text-xs-tight text-muted", children: [m.externalOrigin, " \u00B7 ", formatSize(m.sizeBytes)] })] }), isActive ? (_jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-ok/35 bg-ok/10 text-ok", title: "Active", role: "img", "aria-label": "Active", children: _jsx(CheckCircle2, { className: "h-4 w-4", "aria-hidden": true }) })) : (_jsxs(Button, { size: "sm", className: "h-7 rounded-md px-2 text-xs", onClick: () => onActivate(m.id), disabled: busy, children: [_jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Activate"] }))] }, m.id));
+                }) })] }));
+}
+function formatSize(bytes) {
+    const gb = bytes / 1024 ** 3;
+    return gb >= 1
+        ? `${gb.toFixed(1)} GB`
+        : `${Math.round(bytes / 1024 ** 2)} MB`;
+}
+function appendTokenParam(url) {
+    const token = getElizaApiToken()?.trim();
+    if (!token)
+        return url;
+    const hasQuery = url.includes("?");
+    return `${url}${hasQuery ? "&" : "?"}token=${encodeURIComponent(token)}`;
+}
+export default LocalInferencePanel;

package/components/local-inference/ModelCard.d.ts

@@ -0,0 +1,20 @@
+import type { ActiveModelState, CatalogModel, DownloadJob, HardwareProbe, InstalledModel } from "../../api/client-local-inference";
+interface ModelCardProps {
+    model: CatalogModel;
+    hardware: HardwareProbe;
+    installed: InstalledModel[];
+    downloads: DownloadJob[];
+    active: ActiveModelState;
+    onDownload: (modelId: string) => void;
+    onCancel: (modelId: string) => void;
+    onActivate: (modelId: string) => void;
+    onUninstall: (modelId: string) => void;
+    /** When present, a "Verify" button appears on installed models. */
+    onVerify?: (modelId: string) => void;
+    /** When present, a "Redownload" button appears on installed models. */
+    onRedownload?: (modelId: string) => void;
+    busy: boolean;
+}
+export declare function ModelCard({ model, hardware, installed, downloads, active, onDownload, onCancel, onActivate, onUninstall, onVerify, onRedownload, busy, }: ModelCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModelCard.d.ts.map

package/components/local-inference/ModelCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/ModelCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACf,MAAM,kCAAkC,CAAC;AAW1C,UAAU,cAAc;IACtB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,OAAO,CAAC;CACf;AAQD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,IAAI,GACL,EAAE,cAAc,2CAiHhB"}

package/components/local-inference/ModelCard.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { DownloadProgress } from "./DownloadProgress.js";
+import { computeFit, findDownload, findInstalled, fitLabel, formatBytes, } from "./hub-utils.js";
+const FIT_STYLES = {
+    fits: "text-emerald-500 border-emerald-500/40 bg-emerald-500/10",
+    tight: "text-amber-500 border-amber-500/40 bg-amber-500/10",
+    wontfit: "text-rose-500 border-rose-500/40 bg-rose-500/10",
+};
+export function ModelCard({ model, hardware, installed, downloads, active, onDownload, onCancel, onActivate, onUninstall, onVerify, onRedownload, busy, }) {
+    const fit = computeFit(model, hardware);
+    const installedEntry = findInstalled(model, installed);
+    const download = findDownload(model.id, downloads);
+    const downloading = download?.state === "downloading" || download?.state === "queued";
+    const failed = download?.state === "failed";
+    const isActive = active.modelId === model.id && active.status !== "error";
+    const activating = active.modelId === model.id && active.status === "loading";
+    return (_jsxs("div", { className: "rounded-xl border border-border bg-card p-4 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-semibold truncate", children: model.displayName }), _jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [model.params, " \u00B7 ", model.quant, " \u00B7 ", model.sizeGb.toFixed(1), " GB"] })] }), _jsx("span", { className: `shrink-0 rounded-full border px-2 py-0.5 text-xs ${FIT_STYLES[fit]}`, children: fitLabel(fit) })] }), _jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: model.blurb }), installedEntry && (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Installed \u00B7 ", formatBytes(installedEntry.sizeBytes), installedEntry.source === "external-scan" &&
+                        installedEntry.externalOrigin &&
+                        ` · via ${installedEntry.externalOrigin}`] })), download && downloading && _jsx(DownloadProgress, { job: download }), failed && download?.error && (_jsxs("div", { className: "text-xs text-rose-500", children: ["Download failed: ", download.error] })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [!installedEntry && !downloading && (_jsx(Button, { size: "sm", onClick: () => onDownload(model.id), disabled: busy || fit === "wontfit", children: "Download" })), downloading && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => onCancel(model.id), disabled: busy, children: "Cancel" })), installedEntry && !isActive && (_jsx(Button, { size: "sm", onClick: () => onActivate(model.id), disabled: busy || activating, children: activating ? "Activating…" : "Make active" })), isActive && (_jsx(Button, { size: "sm", variant: "outline", disabled: true, children: "Active" })), installedEntry && onVerify && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onVerify(installedEntry.id), disabled: busy, children: "Verify" })), installedEntry?.source === "eliza-download" && onRedownload && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onRedownload(model.id), disabled: busy, children: "Redownload" })), installedEntry?.source === "eliza-download" && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onUninstall(model.id), disabled: busy, children: "Uninstall" }))] })] }));
+}

package/components/local-inference/ModelHubView.d.ts

@@ -0,0 +1,18 @@
+import type { ActiveModelState, CatalogModel, DownloadJob, HardwareProbe, InstalledModel } from "../../api/client-local-inference";
+interface ModelHubViewProps {
+    catalog: CatalogModel[];
+    installed: InstalledModel[];
+    downloads: DownloadJob[];
+    active: ActiveModelState;
+    hardware: HardwareProbe;
+    onDownload: (modelId: string) => void;
+    onCancel: (modelId: string) => void;
+    onActivate: (modelId: string) => void;
+    onUninstall: (modelId: string) => void;
+    onVerify?: (modelId: string) => void;
+    onRedownload?: (modelId: string) => void;
+    busy: boolean;
+}
+export declare function ModelHubView({ catalog, installed, downloads, active, hardware, onDownload, onCancel, onActivate, onUninstall, onVerify, onRedownload, busy, }: ModelHubViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModelHubView.d.ts.map

package/components/local-inference/ModelHubView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelHubView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/ModelHubView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EAEf,MAAM,kCAAkC,CAAC;AAa1C,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,OAAO,CAAC;CACf;AAUD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,IAAI,GACL,EAAE,iBAAiB,2CA6CnB"}

package/components/local-inference/ModelHubView.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { CheckCircle2 } from "lucide-react";
+import { useMemo } from "react";
+import { DownloadProgress } from "./DownloadProgress.js";
+import { bucketLabel, computeFit, findDownload, findInstalled, fitLabel, formatBytes, groupByBucket, } from "./hub-utils.js";
+const BUCKET_ORDER = ["small", "mid", "large", "xl"];
+const FIT_STYLES = {
+    fits: "text-ok",
+    tight: "text-warn",
+    wontfit: "text-danger",
+};
+export function ModelHubView({ catalog, installed, downloads, active, hardware, onDownload, onCancel, onActivate, onUninstall, onVerify, onRedownload, busy, }) {
+    const grouped = useMemo(() => groupByBucket(catalog), [catalog]);
+    return (_jsx("div", { className: "flex flex-col gap-4", children: BUCKET_ORDER.map((bucket) => {
+            const models = grouped.get(bucket) ?? [];
+            if (models.length === 0)
+                return null;
+            const isRecommended = hardware.recommendedBucket === bucket;
+            return (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsxs("header", { className: "flex h-6 items-center gap-2", children: [_jsx("h3", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted", children: bucketLabel(bucket) }), isRecommended && (_jsx("span", { className: "rounded-full border border-primary/45 bg-primary/10 px-1.5 py-0.5 text-[10px] leading-none text-primary", children: "Recommended" }))] }), _jsx("div", { className: "overflow-hidden rounded-lg border border-border/50 bg-card/35", children: models.map((model) => (_jsx(ModelListRow, { model: model, hardware: hardware, installed: installed, downloads: downloads, active: active, onDownload: onDownload, onCancel: onCancel, onActivate: onActivate, onUninstall: onUninstall, onVerify: onVerify, onRedownload: onRedownload, busy: busy }, model.id))) })] }, bucket));
+        }) }));
+}
+function ModelListRow({ model, hardware, installed, downloads, active, onDownload, onCancel, onActivate, onUninstall, onVerify, onRedownload, busy, }) {
+    const fit = computeFit(model, hardware);
+    const installedEntry = findInstalled(model, installed);
+    const download = findDownload(model.id, downloads);
+    const downloading = download?.state === "downloading" || download?.state === "queued";
+    const failed = download?.state === "failed";
+    const isActive = active.modelId === model.id && active.status !== "error";
+    const activating = active.modelId === model.id && active.status === "loading";
+    const modelMeta = [
+        model.params,
+        model.quant,
+        `${model.sizeGb.toFixed(1)} GB`,
+    ];
+    return (_jsx("div", { className: "border-border/40 border-b px-2.5 py-2 last:border-b-0", title: model.blurb, children: _jsxs("div", { className: "grid gap-2 md:grid-cols-[minmax(0,1fr)_auto] md:items-center", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [isActive ? (_jsx("span", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center text-accent", title: "Active", role: "img", "aria-label": "Active model", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, _jsx("div", { className: "min-w-0 flex-1 truncate font-semibold text-sm text-txt", children: model.displayName }), _jsx("span", { className: `inline-flex h-5 w-5 shrink-0 items-center justify-center ${FIT_STYLES[fit]}`, title: fitLabel(fit), role: "img", "aria-label": `Fit: ${fitLabel(fit)}`, children: _jsx("span", { className: "h-2 w-2 rounded-full bg-current" }) })] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap gap-x-2 gap-y-0.5 text-muted text-xs", children: [_jsx("span", { children: modelMeta.join(" · ") }), installedEntry ? (_jsxs("span", { children: ["Installed \u00B7 ", formatBytes(installedEntry.sizeBytes), installedEntry.source === "external-scan" &&
+                                            installedEntry.externalOrigin
+                                            ? ` · via ${installedEntry.externalOrigin}`
+                                            : ""] })) : null] }), download && downloading ? (_jsx("div", { className: "mt-1.5", children: _jsx(DownloadProgress, { job: download }) })) : null, failed && download?.error ? (_jsxs("div", { className: "mt-1 text-danger text-xs", children: ["Download failed: ", download.error] })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 md:justify-end", children: [!installedEntry && !downloading ? (_jsx(Button, { size: "sm", className: "h-7 rounded-md px-2 text-xs", onClick: () => onDownload(model.id), disabled: busy || fit === "wontfit", children: "Download" })) : null, downloading ? (_jsx(Button, { size: "sm", variant: "outline", className: "h-7 rounded-md px-2 text-xs", onClick: () => onCancel(model.id), disabled: busy, children: "Cancel" })) : null, installedEntry && !isActive ? (_jsx(Button, { size: "sm", className: "h-7 rounded-md px-2 text-xs", onClick: () => onActivate(model.id), disabled: busy || activating, children: activating ? "Activating..." : "Make active" })) : null, installedEntry && onVerify ? (_jsx(Button, { size: "sm", variant: "ghost", className: "h-7 rounded-md px-2 text-xs", onClick: () => onVerify(installedEntry.id), disabled: busy, children: "Verify" })) : null, installedEntry?.source === "eliza-download" && onRedownload ? (_jsx(Button, { size: "sm", variant: "ghost", className: "h-7 rounded-md px-2 text-xs", onClick: () => onRedownload(model.id), disabled: busy, children: "Redownload" })) : null, installedEntry?.source === "eliza-download" ? (_jsx(Button, { size: "sm", variant: "ghost", className: "h-7 rounded-md px-2 text-xs", onClick: () => onUninstall(model.id), disabled: busy, children: "Uninstall" })) : null] })] }) }));
+}

package/components/local-inference/ProvidersList.d.ts

@@ -0,0 +1,2 @@
+export declare function ProvidersList(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProvidersList.d.ts.map

package/components/local-inference/ProvidersList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidersList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/ProvidersList.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,aAAa,4CA4G5B"}

package/components/local-inference/ProvidersList.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cloud, Cpu, KeyRound, Settings, Smartphone } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { client } from "../../api/index.js";
+const KIND_ICON = {
+    "cloud-api": { Icon: KeyRound, label: "Cloud API" },
+    "cloud-subscription": { Icon: Cloud, label: "Subscription" },
+    local: { Icon: Cpu, label: "Local" },
+    "device-bridge": { Icon: Smartphone, label: "Device bridge" },
+};
+export function ProvidersList() {
+    const [providers, setProviders] = useState(null);
+    const [error, setError] = useState(null);
+    const refresh = useCallback(async () => {
+        try {
+            const { providers: nextProviders } = await client.getLocalInferenceProviders();
+            setProviders(nextProviders);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load providers");
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+        // Re-poll every 10s so provider state follows env-var / config-file
+        // changes without the user having to reload.
+        const interval = setInterval(() => void refresh(), 10_000);
+        return () => clearInterval(interval);
+    }, [refresh]);
+    if (error && !providers) {
+        return (_jsx("div", { className: "rounded-xl border border-rose-500/40 bg-rose-500/10 p-4 text-sm", children: error }));
+    }
+    if (!providers) {
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Loading providers\u2026" });
+    }
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("header", { children: _jsx("h3", { className: "text-[10px] font-medium uppercase tracking-wider text-muted", children: "Providers" }) }), _jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: providers.map((p) => {
+                    const dot = p.enableState.enabled
+                        ? "bg-emerald-500"
+                        : "bg-muted-foreground/40";
+                    const { Icon, label } = KIND_ICON[p.kind];
+                    return (_jsxs("div", { className: "rounded-xl border border-border bg-card p-3 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `inline-flex h-2 w-2 rounded-full ${dot}`, "aria-hidden": true }), _jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _jsx("span", { className: "font-medium truncate", children: p.label }), _jsx("span", { className: "sr-only", children: label })] }), _jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: p.description }), _jsx("div", { className: "flex flex-wrap gap-1", children: p.supportedSlots.map((slot) => {
+                                    const active = p.registeredSlots.includes(slot);
+                                    return (_jsx("span", { className: `rounded-full border px-1.5 py-0.5 text-[10px] ${active
+                                            ? "border-primary/50 bg-primary/10 text-primary"
+                                            : "border-border text-muted-foreground"}`, title: active
+                                            ? "Handler currently registered"
+                                            : "Supported but not currently registered", children: slot }, slot));
+                                }) }), _jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground truncate", children: p.enableState.reason }), p.configureHref && (_jsx("a", { href: p.configureHref, className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border/60 text-muted transition-colors hover:bg-bg hover:text-txt", title: "Configure", "aria-label": `Configure ${p.label}`, children: _jsx(Settings, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] })] }, p.id));
+                }) })] }));
+}

package/components/local-inference/RoutingMatrix.d.ts

@@ -0,0 +1,2 @@
+export declare function RoutingMatrix(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RoutingMatrix.d.ts.map

package/components/local-inference/RoutingMatrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutingMatrix.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/RoutingMatrix.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,aAAa,4CAkK5B"}

package/components/local-inference/RoutingMatrix.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { client } from "../../api/index.js";
+const DEFAULT_POLICY = "prefer-local";
+const SLOTS = ["TEXT_SMALL", "TEXT_LARGE", "TEXT_EMBEDDING"];
+const POLICIES = [
+    {
+        value: "manual",
+        label: "Manual",
+        hint: "Use the preferred provider below.",
+    },
+    {
+        value: "cheapest",
+        label: "Cheapest",
+        hint: "Lowest $/token. Local is free.",
+    },
+    { value: "fastest", label: "Fastest", hint: "Lowest measured p50 latency." },
+    {
+        value: "prefer-local",
+        label: "Prefer local",
+        hint: "Try on-device first, fall through to cloud.",
+    },
+    {
+        value: "round-robin",
+        label: "Round robin",
+        hint: "Distribute load across all eligible providers.",
+    },
+];
+// Runtime model type strings for each agent slot. Keep in sync with the
+// server-side ModelType enum via router-handler.ts#slotToModelType.
+const SLOT_MODEL_TYPE = {
+    TEXT_SMALL: "TEXT_SMALL",
+    TEXT_LARGE: "TEXT_LARGE",
+    TEXT_EMBEDDING: "TEXT_EMBEDDING",
+};
+const SLOT_LABEL = {
+    TEXT_SMALL: "Small text",
+    TEXT_LARGE: "Large text",
+    TEXT_EMBEDDING: "Embeddings",
+};
+export function RoutingMatrix() {
+    const [registrations, setRegistrations] = useState([]);
+    const [preferences, setPreferences] = useState({
+        preferredProvider: {},
+        policy: {},
+    });
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(null);
+    const refresh = useCallback(async () => {
+        try {
+            const data = await client.getLocalInferenceRouting();
+            setRegistrations(data.registrations);
+            setPreferences(data.preferences);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load routing");
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+        const interval = setInterval(() => void refresh(), 15_000);
+        return () => clearInterval(interval);
+    }, [refresh]);
+    const handlePolicy = useCallback(async (slot, policy) => {
+        setBusy(slot);
+        try {
+            const res = await client.setLocalInferencePolicy(slot, policy);
+            setPreferences(res.preferences);
+        }
+        finally {
+            setBusy(null);
+        }
+    }, []);
+    const handlePreferred = useCallback(async (slot, provider) => {
+        setBusy(slot);
+        try {
+            const res = await client.setLocalInferencePreferredProvider(slot, provider);
+            setPreferences(res.preferences);
+        }
+        finally {
+            setBusy(null);
+        }
+    }, []);
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("header", { children: _jsx("h3", { className: "text-[10px] font-medium uppercase tracking-wider text-muted", children: "Model routing" }) }), error ? (_jsx("div", { className: "rounded-xl border border-rose-500/40 bg-rose-500/10 p-3 text-xs text-rose-200", children: error })) : null, _jsx("div", { className: "flex flex-col gap-2", children: SLOTS.map((slot) => {
+                    const modelType = SLOT_MODEL_TYPE[slot];
+                    const candidates = registrations
+                        .filter((r) => r.modelType === modelType)
+                        .filter((r) => r.provider !== "eliza-router")
+                        .sort((a, b) => b.priority - a.priority);
+                    const policy = preferences.policy[slot] ?? DEFAULT_POLICY;
+                    const preferred = preferences.preferredProvider[slot] ?? "";
+                    const disabled = busy === slot;
+                    return (_jsxs("div", { className: "rounded-xl border border-border bg-card p-3 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium text-sm", title: slot, children: SLOT_LABEL[slot] }), _jsx("span", { className: `h-2 w-2 rounded-full ${candidates.length > 0 ? "bg-ok" : "bg-muted"}`, title: `${candidates.length} available provider${candidates.length === 1 ? "" : "s"}`, "aria-hidden": true })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: "Policy" }), _jsx("select", { value: policy, disabled: disabled, onChange: (e) => void handlePolicy(slot, e.target.value), className: "rounded-md border border-border bg-bg/50 px-2 py-1.5 text-sm", children: POLICIES.map((p) => (_jsx("option", { value: p.value, title: p.hint, children: p.label }, p.value))) })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Preferred provider", policy !== "manual" && " (manual only)"] }), _jsxs("select", { value: preferred, disabled: disabled, onChange: (e) => void handlePreferred(slot, e.target.value || null), className: "rounded-md border border-border bg-bg/50 px-2 py-1.5 text-sm disabled:opacity-60", children: [_jsx("option", { value: "", children: "Auto" }), candidates.map((c) => (_jsxs("option", { value: c.provider, children: [c.provider, typeof c.priority === "number"
+                                                                ? ` (priority ${c.priority})`
+                                                                : ""] }, c.provider)))] })] })] }), candidates.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground italic", children: "No provider has registered a handler for this slot yet." })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: candidates.map((c) => (_jsx("span", { className: "rounded-full border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: c.provider }, c.provider))) }))] }, slot));
+                }) })] }));
+}

package/components/local-inference/SlotAssignments.d.ts

@@ -0,0 +1,15 @@
+import type { InstalledModel, ModelAssignments } from "../../api/client-local-inference";
+interface SlotAssignmentsProps {
+    installed: InstalledModel[];
+    assignments: ModelAssignments;
+    onChange: (assignments: ModelAssignments) => void;
+}
+/**
+ * Per-ModelType slot assignment UI. Renders one dropdown per agent model
+ * slot; selecting a model writes the assignment to disk immediately.
+ * Slots with no assignment fall through to the legacy "active model"
+ * behaviour (use whatever is currently loaded).
+ */
+export declare function SlotAssignments({ installed, assignments, onChange, }: SlotAssignmentsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SlotAssignments.d.ts.map

package/components/local-inference/SlotAssignments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotAssignments.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/SlotAssignments.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,cAAc,EACd,gBAAgB,EACjB,MAAM,kCAAkC,CAAC;AAE1C,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD;AAyBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,QAAQ,GACT,EAAE,oBAAoB,2CAyEtB"}

package/components/local-inference/SlotAssignments.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { client } from "../../api/index.js";
+const SLOTS = [
+    {
+        slot: "TEXT_SMALL",
+        label: "Small text",
+        description: "Short completions, classifications, and background requests.",
+    },
+    {
+        slot: "TEXT_LARGE",
+        label: "Large text",
+        description: "Main chat responses, planning, and reasoning.",
+    },
+    {
+        slot: "TEXT_EMBEDDING",
+        label: "Embeddings",
+        description: "Vector search and memory when a local embedding handler exists.",
+    },
+];
+/**
+ * Per-ModelType slot assignment UI. Renders one dropdown per agent model
+ * slot; selecting a model writes the assignment to disk immediately.
+ * Slots with no assignment fall through to the legacy "active model"
+ * behaviour (use whatever is currently loaded).
+ */
+export function SlotAssignments({ installed, assignments, onChange, }) {
+    const [busySlot, setBusySlot] = useState(null);
+    const handleChange = useCallback(async (slot, modelId) => {
+        setBusySlot(slot);
+        try {
+            const response = await client.setLocalInferenceAssignment(slot, modelId);
+            onChange(response.assignments);
+        }
+        finally {
+            setBusySlot(null);
+        }
+    }, [onChange]);
+    if (installed.length === 0) {
+        return (_jsx("div", { className: "rounded-xl border border-dashed border-border p-4 text-sm text-muted-foreground", children: "Download or scan at least one model to use local inference." }));
+    }
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Local model assignments" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Eliza defaults both text routes to the largest installed local model so only one model has to stay in memory. Override a slot only when you explicitly want a different local model." }), _jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: SLOTS.map(({ slot, label, description }) => {
+                    const currentId = assignments[slot] ?? "";
+                    return (_jsxs("label", { className: "rounded-xl border border-border bg-card p-3 flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: label }), _jsx("span", { className: "text-xs text-muted-foreground", children: description }), _jsxs("select", { value: currentId, disabled: busySlot === slot, onChange: (e) => void handleChange(slot, e.target.value || null), className: "mt-1 rounded-md border border-border bg-bg/50 px-2 py-1.5 text-sm", children: [_jsx("option", { value: "", children: "Auto" }), installed.map((m) => (_jsxs("option", { value: m.id, children: [m.displayName, m.source === "external-scan"
+                                                ? ` · via ${m.externalOrigin}`
+                                                : ""] }, m.id)))] })] }, slot));
+                }) })] }));
+}

package/components/local-inference/hub-utils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Pure helpers used by the Model Hub UI. Kept separate from components so
+ * they can be covered by unit tests without a DOM.
+ */
+import type { CatalogModel, DownloadJob, HardwareProbe, InstalledModel, ModelBucket } from "../../api/client-local-inference";
+export type FitLevel = "fits" | "tight" | "wontfit";
+export declare function formatBytes(bytes: number): string;
+export declare function formatEta(ms: number | null): string;
+export declare function progressPercent(job: DownloadJob | undefined): number;
+export declare function bucketLabel(bucket: ModelBucket): string;
+export declare function fitLabel(fit: FitLevel): string;
+export declare function computeFit(model: CatalogModel, hardware: HardwareProbe): FitLevel;
+/**
+ * Decide whether a catalog model is already installed.
+ * External models show up with ids like `external-<origin>-<hash>` so we
+ * also tolerate matches by filename basename.
+ */
+export declare function findInstalled(model: CatalogModel, installed: InstalledModel[]): InstalledModel | undefined;
+export declare function findDownload(modelId: string, downloads: DownloadJob[]): DownloadJob | undefined;
+/**
+ * Client-side lookup of a catalog entry by id. Accepts the catalog as an
+ * argument so the hub UI can mix curated + HF-search results without
+ * importing the server-side singleton.
+ */
+export declare function findCatalogModel(id: string, catalog: CatalogModel[]): CatalogModel | undefined;
+export declare function groupByBucket(models: CatalogModel[]): Map<ModelBucket, CatalogModel[]>;
+//# sourceMappingURL=hub-utils.d.ts.map

package/components/local-inference/hub-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hub-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/hub-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,kCAAkC,CAAC;AAI1C,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CASnD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,CAGpE;AASD,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAEvD;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,CAI9C;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,aAAa,GACtB,QAAQ,CAEV;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,cAAc,EAAE,GAC1B,cAAc,GAAG,SAAS,CAU5B;AAED,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,WAAW,EAAE,GACvB,WAAW,GAAG,SAAS,CAEzB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,YAAY,EAAE,GACtB,YAAY,GAAG,SAAS,CAE1B;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,YAAY,EAAE,GACrB,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,CAAC,CASlC"}