@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

package/components/training/JobDetailPanel.js

@@ -1,11 +1,14 @@
 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 { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { BudgetPanel } from "./BudgetPanel.js";
 import { useCancelTrainingJob, useEvalTrainingJob, useJobLogs, useTrainingJobDetail, } from "./hooks/useTrainingApi.js";
 function ProgressChart({ data, }) {
+    const { t } = useTranslation();
     if (!data || data.length === 0) {
-        return _jsx("div", { className: "text-xs text-muted", children: "No progress data" });
+        return (_jsx("div", { className: "text-xs text-muted", children: t("jobdetail.noProgressData", { defaultValue: "No progress data" }) }));
     }
     const width = 400;
     const height = 120;
@@ -19,23 +22,29 @@ function ProgressChart({ data, }) {
         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" })] }));
+    return (_jsxs("svg", { width: width, height: height, role: "img", "aria-labelledby": "training-progress-title", className: "border border-border rounded-sm bg-card", children: [_jsx("title", { id: "training-progress-title", children: t("jobdetail.chart.title", { defaultValue: "Training progress" }) }), _jsx("text", { x: 10, y: 20, fontSize: "12", fill: "currentColor", children: t("jobdetail.chart.heading", { defaultValue: "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: t("jobdetail.chart.formatOk", { defaultValue: "Format OK" }) }), _jsx("text", { x: width - 35, y: padding + chartHeight + 15, fontSize: "10", fill: "currentColor", children: t("jobdetail.chart.contentOk", { defaultValue: "Content OK" }) })] }));
 }
 function CheckpointsList({ checkpoints, }) {
+    const { t } = useTranslation();
     if (!checkpoints || checkpoints.length === 0) {
-        return _jsx("div", { className: "text-xs text-muted", children: "No checkpoints" });
+        return (_jsx("div", { className: "text-xs text-muted", children: t("jobdetail.noCheckpoints", { defaultValue: "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))) }));
+    return (_jsx("div", { className: "space-y-2", children: checkpoints.map((cp) => (_jsxs("div", { className: "text-xs border border-border rounded-sm p-2", children: [_jsx("div", { className: "font-mono text-txt-strong", children: t("jobdetail.step", {
+                        step: cp.step,
+                        defaultValue: "Step {{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 { t } = useTranslation();
     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(Button, { variant: "outline", size: "sm", onClick: () => setShowLogs(true), className: "w-full", children: [_jsx(ChevronDown, { className: "w-4 h-4" }), t("jobdetail.showLogs", { defaultValue: "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))) }))] }));
+    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" }), t("jobdetail.hideLogs", { defaultValue: "Hide Logs" })] }), error && _jsx("div", { className: "text-xs text-red-500", children: error }), loading && (_jsx("div", { className: "text-xs text-muted", children: t("jobdetail.loadingLogs", { defaultValue: "Loading logs..." }) })), logs && (_jsx("div", { className: "text-xs bg-card border border-border rounded-sm 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 { t } = useTranslation();
     const { data: job, loading, error } = useTrainingJobDetail(jobId);
     const { cancel, loading: cancelLoading } = useCancelTrainingJob();
     const { eval: evalJob, loading: evalLoading } = useEvalTrainingJob();
@@ -47,28 +56,43 @@ export function JobDetailPanel({ jobId, onClose }) {
             onClose();
         }
         catch (err) {
-            setActionError(err instanceof Error ? err.message : "Failed to cancel job");
+            setActionError(err instanceof Error
+                ? err.message
+                : t("jobdetail.error.cancelFailed", {
+                    defaultValue: "Failed to cancel job",
+                }));
         }
-    }, [jobId, cancel, onClose]);
+    }, [jobId, cancel, onClose, t]);
     const handleEval = useCallback(async () => {
         setActionError(null);
         try {
             await evalJob(jobId);
         }
         catch (err) {
-            setActionError(err instanceof Error ? err.message : "Failed to trigger eval");
+            setActionError(err instanceof Error
+                ? err.message
+                : t("jobdetail.error.evalFailed", {
+                    defaultValue: "Failed to trigger eval",
+                }));
         }
-    }, [jobId, evalJob]);
+    }, [jobId, evalJob, t]);
     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..." })] }) }));
+        return (_jsx("div", { className: "p-4 space-y-4 border border-border rounded-sm", 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: t("jobdetail.loading", { defaultValue: "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: "p-4 border border-border rounded-sm bg-red-500/10", children: [_jsx("div", { className: "text-sm text-red-500", children: error ||
+                        t("jobdetail.error.loadFailed", {
+                            defaultValue: "Failed to load job details",
+                        }) }), _jsx(Button, { variant: "outline", size: "sm", onClick: onClose, className: "mt-2", children: t("jobdetail.close", { defaultValue: "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 })] })] }));
+    return (_jsxs("div", { className: "space-y-4 border border-border rounded-sm 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: t("jobdetail.field.status", { defaultValue: "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: t("jobdetail.field.registryKey", {
+                                            defaultValue: "Registry Key",
+                                        }) }), _jsx("div", { className: "font-mono text-txt break-all", children: job.registry_key })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.started", { defaultValue: "Started" }) }), _jsx("div", { className: "text-txt", children: new Date(job.started_at).toLocaleString() })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.step", { defaultValue: "Step" }) }), _jsx("div", { className: "text-txt font-semibold", children: job.last_step })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted", children: t("jobdetail.field.formatOk", { defaultValue: "Format OK" }) }), _jsx("div", { className: job.last_format_ok ? "text-green-500" : "text-red-500", children: job.last_format_ok
+                                            ? t("jobdetail.yes", { defaultValue: "Yes" })
+                                            : t("jobdetail.no", { defaultValue: "No" }) })] })] })] }), actionError && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded-sm", 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" }), t("jobdetail.triggerEval", { defaultValue: "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" }), t("jobdetail.cancel", { defaultValue: "Cancel" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.runningCost", { defaultValue: "Running Cost" }) }), _jsx(BudgetPanel, { jobId: jobId })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.progressChart", { defaultValue: "Progress Chart" }) }), _jsx(ProgressChart, { data: progressData })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.checkpoints", { defaultValue: "Checkpoints" }) }), _jsx(CheckpointsList, { checkpoints: job.checkpoints })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold text-txt-strong", children: t("jobdetail.logs", { defaultValue: "Logs" }) }), _jsx(JobLogs, { jobId: jobId })] })] }));
 }

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

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

package/components/training/TrainingDashboard.js

@@ -1,35 +1,66 @@
 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 { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
 import { useCreateTrainingJob, useTrainingJobs, useTrainingModels, } from "./hooks/useTrainingApi.js";
 import { InferenceEndpointPanel } from "./InferenceEndpointPanel.js";
 import { JobDetailPanel } from "./JobDetailPanel.js";
 function JobsTable({ jobs, loading, error, onRowClick, }) {
+    const { t } = useTranslation();
     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 }) }));
+        return (_jsx("div", { className: "border border-border rounded-sm 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..." })] }));
+        return (_jsxs("div", { className: "border border-border rounded-sm p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: t("trainingdashboard.jobs.loading", {
+                        defaultValue: "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: "border border-border rounded-sm p-4 text-center", children: _jsx("div", { className: "text-sm text-muted", children: t("trainingdashboard.jobs.empty", {
+                    defaultValue: "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))) })] }) }));
+    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: t("trainingdashboard.jobs.col.job", { defaultValue: "Job" }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.jobs.col.status", {
+                                    defaultValue: "Status",
+                                }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.jobs.col.step", { defaultValue: "Step" }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.jobs.col.format", {
+                                    defaultValue: "Format",
+                                }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.jobs.col.content", {
+                                    defaultValue: "Content",
+                                }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.jobs.col.started", {
+                                    defaultValue: "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
+                                        ? t("trainingdashboard.yes", { defaultValue: "Yes" })
+                                        : t("trainingdashboard.no", { defaultValue: "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
+                                        ? t("trainingdashboard.yes", { defaultValue: "Yes" })
+                                        : t("trainingdashboard.no", { defaultValue: "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, }) {
+    const { t } = useTranslation();
     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 }) }));
+        return (_jsx("div", { className: "border border-border rounded-sm 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..." })] }));
+        return (_jsxs("div", { className: "border border-border rounded-sm p-4 flex items-center gap-2", children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { className: "text-sm", children: t("trainingdashboard.models.loading", {
+                        defaultValue: "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: "border border-border rounded-sm p-4 text-center", children: _jsx("div", { className: "text-sm text-muted", children: t("trainingdashboard.models.empty", {
+                    defaultValue: "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))) })] }) }));
+    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: t("trainingdashboard.models.col.model", {
+                                    defaultValue: "Model",
+                                }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.models.col.tier", { defaultValue: "Tier" }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.models.col.context", {
+                                    defaultValue: "Context",
+                                }) }), _jsx("th", { className: "px-3 py-2 text-left text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.models.col.gpu", { defaultValue: "GPU" }) }), _jsx("th", { className: "px-3 py-2 text-center text-xs font-semibold text-muted-strong uppercase tracking-wide", children: t("trainingdashboard.models.col.action", {
+                                    defaultValue: "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" }), t("trainingdashboard.train", { defaultValue: "Train" })] }) })] }, model.short_name))) })] }) }));
 }
 export function TrainingDashboard() {
+    const { t } = useTranslation();
     const { data: jobs, loading: jobsLoading, error: jobsError, } = useTrainingJobs();
     const { data: models, loading: modelsLoading, error: modelsError, } = useTrainingModels();
     const { create, loading: createLoading } = useCreateTrainingJob();
@@ -56,7 +87,9 @@ export function TrainingDashboard() {
         setCreateError(null);
         const epochs = parseInt(createModal.epochs, 10);
         if (Number.isNaN(epochs) || epochs < 1) {
-            setCreateError("Epochs must be a positive number");
+            setCreateError(t("trainingdashboard.error.epochsPositive", {
+                defaultValue: "Epochs must be a positive number",
+            }));
             return;
         }
         try {
@@ -68,19 +101,48 @@ export function TrainingDashboard() {
             setCreateModal({ open: false, model: null, epochs: "3", runName: "" });
         }
         catch (err) {
-            setCreateError(err instanceof Error ? err.message : "Failed to create job");
+            setCreateError(err instanceof Error
+                ? err.message
+                : t("trainingdashboard.error.createFailed", {
+                    defaultValue: "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, create, t]);
+    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: t("trainingdashboard.activeJobs.title", {
+                                        defaultValue: "Active Training Jobs",
+                                    }) }), _jsx("p", { className: "text-xs text-muted", children: t("trainingdashboard.activeJobs.subtitle", {
+                                        defaultValue: "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: t("trainingdashboard.availableModels.title", {
+                                        defaultValue: "Available Models",
+                                    }) }), _jsx("p", { className: "text-xs text-muted", children: t("trainingdashboard.availableModels.subtitle", {
+                                        defaultValue: "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-sm p-4 bg-card space-y-3", children: [_jsx("div", { className: "text-sm font-semibold", children: t("trainingdashboard.modal.trainModel", {
+                                    model: createModal.model.short_name,
+                                    defaultValue: "Train {{model}}",
+                                }) }), createError && (_jsx("div", { className: "text-xs text-red-500 bg-red-500/10 p-2 rounded-sm", children: createError })), _jsxs("div", { children: [_jsx("label", { className: "text-xs text-muted block mb-1", htmlFor: "training-epochs", children: t("trainingdashboard.modal.epochs", {
+                                            defaultValue: "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({
+                                        }), className: "text-sm" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs text-muted block mb-1", htmlFor: "training-run-name", children: t("trainingdashboard.modal.runName", {
+                                            defaultValue: "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({
+                                        }), placeholder: t("trainingdashboard.modal.runNamePlaceholder", {
+                                            defaultValue: "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" })), t("trainingdashboard.modal.start", {
+                                                defaultValue: "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, {})] })] }));
+                                        }), className: "flex-1", children: t("trainingdashboard.modal.cancel", {
+                                            defaultValue: "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: t("trainingdashboard.endpoints.title", {
+                                        defaultValue: "Inference Endpoints",
+                                    }) }), _jsx("p", { className: "text-xs text-muted", children: t("trainingdashboard.endpoints.subtitle", {
+                                        defaultValue: "Manage and monitor endpoints",
+                                    }) })] }) }), _jsx(InferenceEndpointPanel, {})] })] }));
 }

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

@@ -1,4 +1,4 @@
-import type { CreateJobRequest, InferenceEndpoint, InferenceStats, TrainingJob, TrainingJobDetail, TrainingModel } from "../types";
+import type { CreateJobRequest, InferenceEndpoint, InferenceStats, TrainingBudget, TrainingJob, TrainingJobDetail, TrainingModel } from "../types";
 interface ApiState<T> {
     data: T | null;
     loading: boolean;
@@ -45,6 +45,18 @@ export declare function useJobLogs(jobId: string, tail?: number): {
     loading: boolean;
     error: string | null;
 };
+/**
+ * Polls `/api/training/vast/jobs/:id/budget` for the running cost
+ * snapshot of one job. Returns `data: null` when the job has no
+ * provisioned instance yet (the panel shows a placeholder) and an
+ * `error` message when the request itself fails.
+ */
+export declare function useTrainingBudget(jobId: string, pollIntervalMs?: number): {
+    refetch: () => Promise<void>;
+    data: TrainingBudget | null;
+    loading: boolean;
+    error: string | null;
+};
 export declare function useDeleteInferenceEndpoint(): {
     delete: (endpointId: string) => Promise<void>;
     loading: boolean;

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

@@ -1 +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"}
+{"version":3,"file":"useTrainingApi.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/training/hooks/useTrainingApi.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,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;EAoDrB;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,MAAa;;;aAzDpB,OAAO;WACT,MAAM,GAAG,IAAI;EAiGrB;AAED,wBAAgB,iBAAiB,8BAiChC;AAED,wBAAgB,qBAAqB,CAAC,cAAc,GAAE,MAAc;;;aAvIzD,OAAO;WACT,MAAM,GAAG,IAAI;EA6KrB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,WAAW,GAAE,MAAW,EACxB,cAAc,GAAE,MAAc,4BAwC/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;;;aA7SjD,OAAO;WACT,MAAM,GAAG,IAAI;EA+UrB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,MAAc;;;aA1VrB,OAAO;WACT,MAAM,GAAG,IAAI;EAiYrB;AAED,wBAAgB,0BAA0B;yBAIO,MAAM;;;EAmBtD;AAED,wBAAgB,0BAA0B;uBAKrB,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC;;;EAyBjD"}

package/components/training/hooks/useTrainingApi.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useIntervalWhenDocumentVisible } from "../../../hooks/useDocumentVisibility.js";
 async function apiCall(url, options) {
     const response = await fetch(url, {
         ...options,
@@ -19,7 +20,6 @@ export function useTrainingJobs(pollIntervalMs = 10000) {
         error: null,
     });
     const mountedRef = useRef(true);
-    const pollTimerRef = useRef(undefined);
     const fetchJobs = useCallback(async () => {
         try {
             const data = await apiCall("/api/training/jobs");
@@ -40,14 +40,11 @@ export function useTrainingJobs(pollIntervalMs = 10000) {
     useEffect(() => {
         mountedRef.current = true;
         fetchJobs();
-        pollTimerRef.current = setInterval(fetchJobs, pollIntervalMs);
         return () => {
             mountedRef.current = false;
-            if (pollTimerRef.current !== undefined) {
-                clearInterval(pollTimerRef.current);
-            }
         };
-    }, [fetchJobs, pollIntervalMs]);
+    }, [fetchJobs]);
+    useIntervalWhenDocumentVisible(fetchJobs, pollIntervalMs, pollIntervalMs > 0);
     return { ...state, refetch: fetchJobs };
 }
 export function useTrainingJobDetail(jobId, pollIntervalMs = 5000) {
@@ -57,7 +54,6 @@ export function useTrainingJobDetail(jobId, pollIntervalMs = 5000) {
         error: null,
     });
     const mountedRef = useRef(true);
-    const pollTimerRef = useRef(undefined);
     const fetchDetail = useCallback(async () => {
         try {
             const data = await apiCall(`/api/training/jobs/${encodeURIComponent(jobId)}`);
@@ -78,14 +74,11 @@ export function useTrainingJobDetail(jobId, pollIntervalMs = 5000) {
     useEffect(() => {
         mountedRef.current = true;
         fetchDetail();
-        pollTimerRef.current = setInterval(fetchDetail, pollIntervalMs);
         return () => {
             mountedRef.current = false;
-            if (pollTimerRef.current !== undefined) {
-                clearInterval(pollTimerRef.current);
-            }
         };
-    }, [fetchDetail, pollIntervalMs]);
+    }, [fetchDetail]);
+    useIntervalWhenDocumentVisible(fetchDetail, pollIntervalMs, pollIntervalMs > 0);
     return { ...state, refetch: fetchDetail };
 }
 export function useTrainingModels() {
@@ -127,7 +120,6 @@ export function useInferenceEndpoints(pollIntervalMs = 30000) {
         error: null,
     });
     const mountedRef = useRef(true);
-    const pollTimerRef = useRef(undefined);
     const fetchEndpoints = useCallback(async () => {
         try {
             const data = await apiCall("/api/training/inference/endpoints");
@@ -148,14 +140,11 @@ export function useInferenceEndpoints(pollIntervalMs = 30000) {
     useEffect(() => {
         mountedRef.current = true;
         fetchEndpoints();
-        pollTimerRef.current = setInterval(fetchEndpoints, pollIntervalMs);
         return () => {
             mountedRef.current = false;
-            if (pollTimerRef.current !== undefined) {
-                clearInterval(pollTimerRef.current);
-            }
         };
-    }, [fetchEndpoints, pollIntervalMs]);
+    }, [fetchEndpoints]);
+    useIntervalWhenDocumentVisible(fetchEndpoints, pollIntervalMs, pollIntervalMs > 0);
     return { ...state, refetch: fetchEndpoints };
 }
 export function useInferenceStats(label, lastMinutes = 30, pollIntervalMs = 30000) {
@@ -165,7 +154,6 @@ export function useInferenceStats(label, lastMinutes = 30, pollIntervalMs = 3000
         error: null,
     });
     const mountedRef = useRef(true);
-    const pollTimerRef = useRef(undefined);
     const fetchStats = useCallback(async () => {
         try {
             const params = new URLSearchParams({
@@ -190,14 +178,11 @@ export function useInferenceStats(label, lastMinutes = 30, pollIntervalMs = 3000
     useEffect(() => {
         mountedRef.current = true;
         fetchStats();
-        pollTimerRef.current = setInterval(fetchStats, pollIntervalMs);
         return () => {
             mountedRef.current = false;
-            if (pollTimerRef.current !== undefined) {
-                clearInterval(pollTimerRef.current);
-            }
         };
-    }, [fetchStats, pollIntervalMs]);
+    }, [fetchStats]);
+    useIntervalWhenDocumentVisible(fetchStats, pollIntervalMs, pollIntervalMs > 0);
     return state;
 }
 export function useCreateTrainingJob() {
@@ -299,6 +284,46 @@ export function useJobLogs(jobId, tail = 200) {
     }, [fetchLogs]);
     return { ...state, refetch: fetchLogs };
 }
+/**
+ * Polls `/api/training/vast/jobs/:id/budget` for the running cost
+ * snapshot of one job. Returns `data: null` when the job has no
+ * provisioned instance yet (the panel shows a placeholder) and an
+ * `error` message when the request itself fails.
+ */
+export function useTrainingBudget(jobId, pollIntervalMs = 15000) {
+    const [state, setState] = useState({
+        data: null,
+        loading: true,
+        error: null,
+    });
+    const mountedRef = useRef(true);
+    const fetchBudget = useCallback(async () => {
+        try {
+            const data = await apiCall(`/api/training/vast/jobs/${encodeURIComponent(jobId)}/budget`);
+            if (!mountedRef.current)
+                return;
+            setState({ data: data.budget, loading: false, error: null });
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setState({
+                data: null,
+                loading: false,
+                error: err instanceof Error ? err.message : "Failed to fetch budget",
+            });
+        }
+    }, [jobId]);
+    useEffect(() => {
+        mountedRef.current = true;
+        fetchBudget();
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [fetchBudget]);
+    useIntervalWhenDocumentVisible(fetchBudget, pollIntervalMs, pollIntervalMs > 0);
+    return { ...state, refetch: fetchBudget };
+}
 export function useDeleteInferenceEndpoint() {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);

package/components/training/injected.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useBootConfig } from "../../config/boot-config-react.js";
+import { useBootConfig } from "../../config/boot-config-react.hooks.js";
 import { TrainingDashboard } from "./TrainingDashboard.js";
 export function FineTuningView(props) {
     const { fineTuningView: FineTuningViewComponent } = useBootConfig();

package/components/training/types.d.ts

@@ -53,4 +53,30 @@ export interface CreateJobRequest {
     epochs: number;
     run_name?: string;
 }
+/**
+ * Running cost snapshot for a Vast.ai training job (M9 budget surface).
+ *
+ * Mirrors `VastJobBudget` in the server. Field names are lowercase_snake
+ * to match the wire format directly — the python module is the source of
+ * truth so we never reshape on the boundary.
+ */
+export interface TrainingBudget {
+    job_id: string;
+    instance_id: number | null;
+    pipeline: string;
+    run_name: string;
+    gpu_name: string;
+    num_gpus: number;
+    gpu_sku: string;
+    state: string;
+    uptime_seconds: number;
+    uptime_pretty: string;
+    dph_total: number;
+    total_so_far_usd: number;
+    soft_cap_usd: number | null;
+    hard_cap_usd: number | null;
+    over_soft: boolean;
+    over_hard: boolean;
+    fetched_at: number;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/training/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB"}

package/components/ui/accordion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Accordion component system for collapsible content sections.
+ * Built on Radix UI primitives with expand/collapse animations.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=accordion.d.ts.map

package/components/ui/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,SAAS,8JAA0B,CAAC;AAE1C,QAAA,MAAM,aAAa,iKASjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,0KAiBpB,CAAC;AAGH,QAAA,MAAM,gBAAgB,oKAWpB,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/components/ui/accordion.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Accordion component system for collapsible content sections.
+ * Built on Radix UI primitives with expand/collapse animations.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b", className), ...props })));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/components/ui/admin-dialog.d.ts

@@ -24,7 +24,7 @@ export interface AdminMonoMetaProps extends React.HTMLAttributes<HTMLSpanElement
 export declare function AdminMonoMeta({ className, ...props }: AdminMonoMetaProps): import("react/jsx-runtime").JSX.Element;
 export interface AdminInputProps extends InputProps {
 }
-export declare function AdminInput({ className, ...props }: AdminInputProps): import("react/jsx-runtime").JSX.Element;
+export declare const AdminInput: React.ForwardRefExoticComponent<AdminInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface AdminCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
 }
 export declare function AdminCodeEditor({ className, ...props }: AdminCodeEditorProps): import("react/jsx-runtime").JSX.Element;
@@ -42,7 +42,7 @@ export declare const AdminDialog: {
     BodyScroll: typeof AdminDialogBodyScroll;
     MetaBadge: typeof AdminMetaBadge;
     MonoMeta: typeof AdminMonoMeta;
-    Input: typeof AdminInput;
+    Input: React.ForwardRefExoticComponent<AdminInputProps & React.RefAttributes<HTMLInputElement>>;
     CodeEditor: typeof AdminCodeEditor;
     SegmentedTabList: typeof AdminSegmentedTabList;
     SegmentedTab: typeof AdminSegmentedTab;

package/components/ui/admin-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admin-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/admin-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAA8B,MAAM,UAAU,CAAC;AACrE,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAUzB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAO5B;AAED,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElD,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAOxE;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;CAAG;AAEtD,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAUlE;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;CAAG;AAE9D,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAU5E;AAED,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAE5B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAcxB;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;CAWvB,CAAC"}
+{"version":3,"file":"admin-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/admin-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAE,aAAa,EAA8B,MAAM,UAAU,CAAC;AACrE,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAUzB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAO5B;AAED,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElD,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAOxE;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;CAAG;AAEtD,eAAO,MAAM,UAAU,0FAatB,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;CAAG;AAE9D,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAU5E;AAED,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAE5B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAcxB;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;CAWvB,CAAC"}