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

package/components/training/InferenceEndpointPanel.d.ts

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

package/components/training/InferenceEndpointPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InferenceEndpointPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/InferenceEndpointPanel.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,sBAAsB,4CAyLrC"}

package/components/training/InferenceEndpointPanel.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from "@elizaos/ui";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useCreateInferenceEndpoint, useDeleteInferenceEndpoint, useInferenceEndpoints, useInferenceStats, } from "./hooks/useTrainingApi.js";
+function StatsCard({ label, value, unit, }) {
+    return (_jsxs("div", { className: "border border-border rounded p-2 text-center bg-card/50", children: [_jsx("div", { className: "text-xs text-muted mb-1", children: label }), _jsx("div", { className: "text-sm font-semibold text-txt-strong", children: value !== null ? `${value.toFixed(2)} ${unit}` : "—" })] }));
+}
+function EndpointStats({ label }) {
+    const { data: stats, loading, error } = useInferenceStats(label);
+    if (error) {
+        return _jsx("div", { className: "text-xs text-red-500", children: error });
+    }
+    if (loading || !stats) {
+        return _jsx("div", { className: "text-xs text-muted", children: "Loading stats..." });
+    }
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(StatsCard, { label: "p50 TPS", value: stats.p50_tps, unit: "tok/s" }), _jsx(StatsCard, { label: "p95 TPS", value: stats.p95_tps, unit: "tok/s" }), _jsx(StatsCard, { label: "p50 TPOT", value: stats.p50_tpot_ms, unit: "ms" }), _jsx(StatsCard, { label: "p95 TPOT", value: stats.p95_tpot_ms, unit: "ms" }), _jsx(StatsCard, { label: "KV Cache", value: stats.kv_usage_pct, unit: "%" }), _jsx(StatsCard, { label: "Peak VRAM", value: stats.peak_vram_mb, unit: "MB" }), _jsx(StatsCard, { label: "Spec Decode", value: stats.spec_decode_accept_rate, unit: "%" }), _jsx(StatsCard, { label: "APC Hit", value: stats.apc_hit_rate, unit: "%" })] }));
+}
+export function InferenceEndpointPanel() {
+    const { data: endpoints, loading, error, refetch } = useInferenceEndpoints();
+    const { create, loading: createLoading } = useCreateInferenceEndpoint();
+    const { delete: deleteEndpoint, loading: deleteLoading } = useDeleteInferenceEndpoint();
+    const [showCreate, setShowCreate] = useState(false);
+    const [label, setLabel] = useState("");
+    const [baseUrl, setBaseUrl] = useState("");
+    const [model, setModel] = useState("");
+    const [createErrorMsg, setCreateErrorMsg] = useState(null);
+    const [expandedId, setExpandedId] = useState(null);
+    const handleCreate = useCallback(async () => {
+        setCreateErrorMsg(null);
+        if (!label || !baseUrl || !model) {
+            setCreateErrorMsg("All fields required");
+            return;
+        }
+        try {
+            await create({ label, base_url: baseUrl, model });
+            setLabel("");
+            setBaseUrl("");
+            setModel("");
+            setShowCreate(false);
+            await refetch();
+        }
+        catch (err) {
+            setCreateErrorMsg(err instanceof Error ? err.message : "Failed to create endpoint");
+        }
+    }, [label, baseUrl, model, create, refetch]);
+    const handleDelete = useCallback(async (endpointId) => {
+        try {
+            await deleteEndpoint(endpointId);
+            await refetch();
+        }
+        catch (err) {
+            console.error("Failed to delete endpoint:", err);
+        }
+    }, [deleteEndpoint, refetch]);
+    if (error) {
+        return (_jsx("div", { className: "p-4 border border-border rounded bg-red-500/10", children: _jsx("div", { className: "text-sm text-red-500", children: error }) }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading endpoints..." })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [showCreate ? (_jsxs("div", { className: "border border-border rounded p-4 bg-card space-y-3", children: [_jsx("div", { className: "text-sm font-semibold", children: "Add Inference Endpoint" }), createErrorMsg && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded", children: createErrorMsg })), _jsx(Input, { type: "text", placeholder: "Label", value: label, onChange: (e) => setLabel(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: "Base URL", value: baseUrl, onChange: (e) => setBaseUrl(e.target.value), className: "text-sm" }), _jsx(Input, { type: "text", placeholder: "Model ID", value: model, onChange: (e) => setModel(e.target.value), className: "text-sm" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: handleCreate, disabled: createLoading, className: "flex-1", children: [createLoading && (_jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" })), "Create"] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(false), className: "flex-1", children: "Cancel" })] })] })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(true), className: "w-full", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Endpoint"] })), _jsx("div", { className: "space-y-3", children: endpoints && endpoints.length > 0 ? (endpoints.map((endpoint) => (_jsxs("div", { className: "border border-border rounded p-3 bg-card space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-txt-strong", children: endpoint.label }), _jsx("div", { className: "text-xs text-muted font-mono", children: endpoint.base_url }), _jsxs("div", { className: "text-xs text-muted", children: ["Model: ", endpoint.model] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDelete(endpoint.id), disabled: deleteLoading, className: "text-red-500 hover:text-red-600", children: deleteLoading ? (_jsx(Loader2, { className: "w-4 h-4 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] }), _jsx("button", { type: "button", onClick: () => setExpandedId(expandedId === endpoint.id ? null : endpoint.id), className: "text-xs text-accent hover:underline", children: expandedId === endpoint.id ? "Hide stats" : "Show stats" }), expandedId === endpoint.id && (_jsx(EndpointStats, { label: endpoint.label }))] }, endpoint.id)))) : (_jsx("div", { className: "text-xs text-muted p-4 text-center border border-border rounded", children: "No inference endpoints configured" })) })] }));
+}

package/components/training/JobDetailPanel.d.ts

@@ -0,0 +1,7 @@
+interface JobDetailPanelProps {
+    jobId: string;
+    onClose: () => void;
+}
+export declare function JobDetailPanel({ jobId, onClose }: JobDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JobDetailPanel.d.ts.map

package/components/training/JobDetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobDetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/JobDetailPanel.tsx"],"names":[],"mappings":"AAUA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoJD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA2JrE"}

package/components/training/JobDetailPanel.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { ChevronDown, ChevronUp, Loader2 } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useCancelTrainingJob, useEvalTrainingJob, useJobLogs, useTrainingJobDetail, } from "./hooks/useTrainingApi.js";
+function ProgressChart({ data, }) {
+    if (!data || data.length === 0) {
+        return _jsx("div", { className: "text-xs text-muted", children: "No progress data" });
+    }
+    const width = 400;
+    const height = 120;
+    const padding = 40;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding;
+    const points = data.map((d, i) => ({
+        step: d.step,
+        x: padding + (i / Math.max(data.length - 1, 1)) * chartWidth,
+        y: padding + chartHeight / 2,
+        formatOk: d.format_ok,
+        contentOk: d.content_ok,
+    }));
+    return (_jsxs("svg", { width: width, height: height, role: "img", "aria-labelledby": "training-progress-title", className: "border border-border rounded bg-card", children: [_jsx("title", { id: "training-progress-title", children: "Training progress" }), _jsx("text", { x: 10, y: 20, fontSize: "12", fill: "currentColor", children: "Training Progress" }), _jsx("line", { x1: padding, y1: padding + chartHeight / 2, x2: width - padding, y2: padding + chartHeight / 2, stroke: "currentColor", strokeWidth: "1", opacity: "0.2" }), points.map((point) => (_jsxs("g", { children: [_jsx("circle", { cx: point.x, cy: point.y - 15, r: point.formatOk ? 4 : 2, fill: point.formatOk ? "#10b981" : "#6b7280" }), _jsx("circle", { cx: point.x, cy: point.y + 15, r: point.contentOk ? 4 : 2, fill: point.contentOk ? "#3b82f6" : "#6b7280" })] }, `${point.step}-${point.formatOk}-${point.contentOk}`))), _jsx("text", { x: width - 35, y: padding - 5, fontSize: "10", fill: "currentColor", children: "Format OK" }), _jsx("text", { x: width - 35, y: padding + chartHeight + 15, fontSize: "10", fill: "currentColor", children: "Content OK" })] }));
+}
+function CheckpointsList({ checkpoints, }) {
+    if (!checkpoints || checkpoints.length === 0) {
+        return _jsx("div", { className: "text-xs text-muted", children: "No checkpoints" });
+    }
+    return (_jsx("div", { className: "space-y-2", children: checkpoints.map((cp) => (_jsxs("div", { className: "text-xs border border-border rounded p-2", children: [_jsxs("div", { className: "font-mono text-txt-strong", children: ["Step ", cp.step] }), _jsxs("div", { className: "text-muted", children: [cp.size_mb.toFixed(1), " MB \u00B7", " ", new Date(cp.pulled_at).toLocaleString()] })] }, cp.step))) }));
+}
+function JobLogs({ jobId }) {
+    const { data: logs, loading, error } = useJobLogs(jobId);
+    const [showLogs, setShowLogs] = useState(false);
+    if (!showLogs) {
+        return (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowLogs(true), className: "w-full", children: [_jsx(ChevronDown, { className: "w-4 h-4" }), "Show Logs"] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowLogs(false), className: "w-full", children: [_jsx(ChevronUp, { className: "w-4 h-4" }), "Hide Logs"] }), error && _jsx("div", { className: "text-xs text-red-500", children: error }), loading && _jsx("div", { className: "text-xs text-muted", children: "Loading logs..." }), logs && (_jsx("div", { className: "text-xs bg-card border border-border rounded p-2 font-mono max-h-48 overflow-auto", children: logs.map((line) => (_jsx("div", { className: "text-muted", children: line }, line))) }))] }));
+}
+export function JobDetailPanel({ jobId, onClose }) {
+    const { data: job, loading, error } = useTrainingJobDetail(jobId);
+    const { cancel, loading: cancelLoading } = useCancelTrainingJob();
+    const { eval: evalJob, loading: evalLoading } = useEvalTrainingJob();
+    const [actionError, setActionError] = useState(null);
+    const handleCancel = useCallback(async () => {
+        setActionError(null);
+        try {
+            await cancel(jobId);
+            onClose();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : "Failed to cancel job");
+        }
+    }, [jobId, cancel, onClose]);
+    const handleEval = useCallback(async () => {
+        setActionError(null);
+        try {
+            await evalJob(jobId);
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : "Failed to trigger eval");
+        }
+    }, [jobId, evalJob]);
+    const progressData = useMemo(() => {
+        if (!job?.progress)
+            return [];
+        return job.progress.slice(0, 200);
+    }, [job?.progress]);
+    if (loading) {
+        return (_jsx("div", { className: "p-4 space-y-4 border border-border rounded", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading job details..." })] }) }));
+    }
+    if (error || !job) {
+        return (_jsxs("div", { className: "p-4 border border-border rounded bg-red-500/10", children: [_jsx("div", { className: "text-sm text-red-500", children: error || "Failed to load job details" }), _jsx(Button, { variant: "outline", size: "sm", onClick: onClose, className: "mt-2", children: "Close" })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4 border border-border rounded p-4 bg-card", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted uppercase tracking-wide", children: "Status" }), _jsx("div", { className: "text-sm font-semibold text-txt-strong", children: job.status })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "text-muted", children: "\u00D7" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted", children: "Registry Key" }), _jsx("div", { className: "font-mono text-txt break-all", children: job.registry_key })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: "Started" }), _jsx("div", { className: "text-txt", children: new Date(job.started_at).toLocaleString() })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: "Step" }), _jsx("div", { className: "text-txt font-semibold", children: job.last_step })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: "Format OK" }), _jsx("div", { className: job.last_format_ok ? "text-green-500" : "text-red-500", children: job.last_format_ok ? "Yes" : "No" })] })] })] }), actionError && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded", children: actionError })), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleEval, disabled: evalLoading, className: "flex-1", children: [evalLoading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), "Trigger Eval"] }), _jsxs(Button, { variant: "destructive", size: "sm", onClick: handleCancel, disabled: cancelLoading, className: "flex-1", children: [cancelLoading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), "Cancel"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: "Progress Chart" }), _jsx(ProgressChart, { data: progressData })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: "Checkpoints" }), _jsx(CheckpointsList, { checkpoints: job.checkpoints })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: "Logs" }), _jsx(JobLogs, { jobId: jobId })] })] }));
+}

package/components/training/TrainingDashboard.d.ts

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

package/components/training/TrainingDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingDashboard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/TrainingDashboard.tsx"],"names":[],"mappings":"AAqOA,wBAAgB,iBAAiB,4CAsMhC"}

package/components/training/TrainingDashboard.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from "@elizaos/ui";
+import { Loader2, Plus } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useCreateTrainingJob, useTrainingJobs, useTrainingModels, } from "./hooks/useTrainingApi.js";
+import { InferenceEndpointPanel } from "./InferenceEndpointPanel.js";
+import { JobDetailPanel } from "./JobDetailPanel.js";
+function JobsTable({ jobs, loading, error, onRowClick, }) {
+    if (error) {
+        return (_jsx("div", { className: "border border-border rounded p-4 bg-red-500/10", children: _jsx("div", { className: "text-sm text-red-500", children: error }) }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "border border-border rounded p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading jobs..." })] }));
+    }
+    if (!jobs || jobs.length === 0) {
+        return (_jsx("div", { className: "border border-border rounded p-4 text-center", children: _jsx("div", { className: "text-sm text-muted", children: "No training jobs" }) }));
+    }
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Job" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Status" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Step" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Format" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Content" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Started" })] }) }), _jsx("tbody", { children: jobs.map((job) => (_jsxs("tr", { onClick: () => onRowClick(job.id), className: "border-b border-border hover:bg-card/50 cursor-pointer transition-colors", children: [_jsxs("td", { className: "px-3 py-2", children: [_jsx("div", { className: "font-mono text-xs text-accent", children: job.id }), _jsx("div", { className: "text-xs text-muted", children: job.run_name })] }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs font-semibold", children: job.status }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-txt", children: job.last_step }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: `text-xs font-semibold ${job.last_format_ok ? "text-green-500" : "text-red-500"}`, children: job.last_format_ok ? "Yes" : "No" }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: `text-xs font-semibold ${job.last_content_ok ? "text-green-500" : "text-red-500"}`, children: job.last_content_ok ? "Yes" : "No" }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-muted", children: new Date(job.started_at).toLocaleString() }) })] }, job.id))) })] }) }));
+}
+function ModelsTable({ models, loading, error, onTrainClick, }) {
+    if (error) {
+        return (_jsx("div", { className: "border border-border rounded p-4 bg-red-500/10", children: _jsx("div", { className: "text-sm text-red-500", children: error }) }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "border border-border rounded p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Loading models..." })] }));
+    }
+    if (!models || models.length === 0) {
+        return (_jsx("div", { className: "border border-border rounded p-4 text-center", children: _jsx("div", { className: "text-sm text-muted", children: "No models available" }) }));
+    }
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Model" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Tier" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Context" }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "GPU" }), _jsx("th", { className: "px-3 py-2 text-center text-xs font-semibold text-muted-strong uppercase tracking-wide", children: "Action" })] }) }), _jsx("tbody", { children: models.map((model) => (_jsxs("tr", { className: "border-b border-border hover:bg-card/50", children: [_jsxs("td", { className: "px-3 py-2", children: [_jsx("div", { className: "font-semibold text-txt-strong", children: model.short_name }), _jsx("div", { className: "text-xs text-muted font-mono", children: model.base_repo_id })] }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-txt", children: model.tier }) }), _jsx("td", { className: "px-3 py-2", children: _jsxs("div", { className: "text-xs text-txt", children: [model.max_context, "k"] }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("div", { className: "text-xs text-muted", children: model.recommended_gpu }) }), _jsx("td", { className: "px-3 py-2 text-center", children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => onTrainClick(model), children: [_jsx(Plus, { className: "w-4 h-4" }), "Train"] }) })] }, model.short_name))) })] }) }));
+}
+export function TrainingDashboard() {
+    const { data: jobs, loading: jobsLoading, error: jobsError, } = useTrainingJobs();
+    const { data: models, loading: modelsLoading, error: modelsError, } = useTrainingModels();
+    const { create, loading: createLoading } = useCreateTrainingJob();
+    const [selectedJobId, setSelectedJobId] = useState(null);
+    const [createModal, setCreateModal] = useState({
+        open: false,
+        model: null,
+        epochs: "3",
+        runName: "",
+    });
+    const [createError, setCreateError] = useState(null);
+    const handleTrainClick = useCallback((model) => {
+        setCreateModal({
+            open: true,
+            model,
+            epochs: "3",
+            runName: "",
+        });
+        setCreateError(null);
+    }, []);
+    const handleCreateJob = useCallback(async () => {
+        if (!createModal.model)
+            return;
+        setCreateError(null);
+        const epochs = parseInt(createModal.epochs, 10);
+        if (Number.isNaN(epochs) || epochs < 1) {
+            setCreateError("Epochs must be a positive number");
+            return;
+        }
+        try {
+            await create({
+                registry_key: createModal.model.short_name,
+                epochs,
+                run_name: createModal.runName || undefined,
+            });
+            setCreateModal({ open: false, model: null, epochs: "3", runName: "" });
+        }
+        catch (err) {
+            setCreateError(err instanceof Error ? err.message : "Failed to create job");
+        }
+    }, [createModal, create]);
+    return (_jsxs("div", { className: "space-y-6 p-4", children: [_jsxs("section", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-txt-strong", children: "Active Training Jobs" }), _jsx("p", { className: "text-xs text-muted", children: "Updates every 10 seconds" })] }) }), _jsx(JobsTable, { jobs: jobs, loading: jobsLoading, error: jobsError, onRowClick: setSelectedJobId }), selectedJobId && (_jsx(JobDetailPanel, { jobId: selectedJobId, onClose: () => setSelectedJobId(null) }))] }), _jsxs("section", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-txt-strong", children: "Available Models" }), _jsx("p", { className: "text-xs text-muted", children: "Click Train to create a job" })] }) }), _jsx(ModelsTable, { models: models, loading: modelsLoading, error: modelsError, onTrainClick: handleTrainClick }), createModal.open && createModal.model && (_jsxs("div", { className: "border border-border rounded p-4 bg-card space-y-3", children: [_jsxs("div", { className: "text-sm font-semibold", children: ["Train ", createModal.model.short_name] }), createError && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded", children: createError })), _jsxs("div", { children: [_jsx("label", { className: "text-xs text-muted block mb-1", htmlFor: "training-epochs", children: "Epochs" }), _jsx(Input, { id: "training-epochs", type: "number", min: "1", value: createModal.epochs, onChange: (e) => setCreateModal({
+                                            ...createModal,
+                                            epochs: e.target.value,
+                                        }), className: "text-sm" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs text-muted block mb-1", htmlFor: "training-run-name", children: "Run Name (optional)" }), _jsx(Input, { id: "training-run-name", type: "text", value: createModal.runName, onChange: (e) => setCreateModal({
+                                            ...createModal,
+                                            runName: e.target.value,
+                                        }), placeholder: "e.g., experiment-v2", className: "text-sm" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: handleCreateJob, disabled: createLoading, className: "flex-1", children: [createLoading && (_jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" })), "Start Training"] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setCreateModal({
+                                            open: false,
+                                            model: null,
+                                            epochs: "3",
+                                            runName: "",
+                                        }), className: "flex-1", children: "Cancel" })] })] }))] }), _jsxs("section", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-txt-strong", children: "Inference Endpoints" }), _jsx("p", { className: "text-xs text-muted", children: "Manage and monitor endpoints" })] }) }), _jsx(InferenceEndpointPanel, {})] })] }));
+}

package/components/training/hooks/useTrainingApi.d.ts

@@ -0,0 +1,59 @@
+import type { CreateJobRequest, InferenceEndpoint, InferenceStats, TrainingJob, TrainingJobDetail, TrainingModel } from "../types";
+interface ApiState<T> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare function useTrainingJobs(pollIntervalMs?: number): {
+    refetch: () => Promise<void>;
+    data: TrainingJob[] | null;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useTrainingJobDetail(jobId: string, pollIntervalMs?: number): {
+    refetch: () => Promise<void>;
+    data: TrainingJobDetail | null;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useTrainingModels(): ApiState<TrainingModel[]>;
+export declare function useInferenceEndpoints(pollIntervalMs?: number): {
+    refetch: () => Promise<void>;
+    data: InferenceEndpoint[] | null;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useInferenceStats(label: string, lastMinutes?: number, pollIntervalMs?: number): ApiState<InferenceStats>;
+export declare function useCreateTrainingJob(): {
+    create: (request: CreateJobRequest) => Promise<string>;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useCancelTrainingJob(): {
+    cancel: (jobId: string) => Promise<void>;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useEvalTrainingJob(): {
+    eval: (jobId: string) => Promise<void>;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useJobLogs(jobId: string, tail?: number): {
+    refetch: () => Promise<void>;
+    data: string[] | null;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useDeleteInferenceEndpoint(): {
+    delete: (endpointId: string) => Promise<void>;
+    loading: boolean;
+    error: string | null;
+};
+export declare function useCreateInferenceEndpoint(): {
+    create: (endpoint: Omit<InferenceEndpoint, "id">) => Promise<string>;
+    loading: boolean;
+    error: string | null;
+};
+export {};
+//# sourceMappingURL=useTrainingApi.d.ts.map

package/components/training/hooks/useTrainingApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTrainingApi.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/training/hooks/useTrainingApi.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,aAAa,EACd,MAAM,UAAU,CAAC;AAElB,UAAU,QAAQ,CAAC,CAAC;IAClB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAkBD,wBAAgB,eAAe,CAAC,cAAc,GAAE,MAAc;;;aApBnD,OAAO;WACT,MAAM,GAAG,IAAI;EAwDrB;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,MAAa;;;aA7DpB,OAAO;WACT,MAAM,GAAG,IAAI;EAqGrB;AAED,wBAAgB,iBAAiB,8BAiChC;AAED,wBAAgB,qBAAqB,CAAC,cAAc,GAAE,MAAc;;;aA3IzD,OAAO;WACT,MAAM,GAAG,IAAI;EAiLrB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,WAAW,GAAE,MAAW,EACxB,cAAc,GAAE,MAAc,4BA4C/B;AAED,wBAAgB,oBAAoB;sBAIS,gBAAgB;;;EAoB5D;AAED,wBAAgB,oBAAoB;oBAIO,MAAM;;;EAqBhD;AAED,wBAAgB,kBAAkB;kBAIQ,MAAM;;;EAqB/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,MAAY;;;aArTjD,OAAO;WACT,MAAM,GAAG,IAAI;EAuVrB;AAED,wBAAgB,0BAA0B;yBAIO,MAAM;;;EAmBtD;AAED,wBAAgB,0BAA0B;uBAKrB,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC;;;EAyBjD"}