@solidxai/core-ui 0.1.19 → 0.1.20-beta.1

package/dist/routes/pages/admin/core/AgentRegistryEditorPage.js

@@ -56,8 +56,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { createPortal } from "react-dom";
-import { ArrowLeft, ChevronDown, ExternalLink, FlaskConical, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { ArrowLeft, Ellipsis, ExternalLink, Eye, FlaskConical, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { createSolidEntityApi } from "../../../../redux/api/solidEntityApi";
@@ -65,13 +64,16 @@ import { useGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi
 import { getSettingsMap } from "../../../../helpers/settingsPayload";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { AgentRegistryAuditPanel } from "./AgentRegistryAuditPanel";
+import { AgentPersonaHistory } from "./AgentPersonaHistory";
+import { AgentHubTagsField, agentHubTagsFrom, agentHubTagsPayload } from "./AgentHubTagsField";
 import { AgentResourceCardWidget } from "../../../../components/core/extension/solid-core/agentRegistry/card/AgentResourceCardWidget";
 import { AgentSessionsPanel } from "../../../../components/core/extension/solid-core/agentToolRegistry/AgentToolSessionsPanel";
 import { AgentProcessesPanel } from "../../../../components/core/extension/solid-core/agentToolRegistry/AgentProcessesPanel";
 import { SolidWorkflowStatusPill } from "../../../../components/core/form/SolidDraftPublishWorkflow";
-import { ALLOWED_MODELS_BY_PROVIDER } from "../../../../constants/allowed-ai-models";
-import { SolidButton, SolidCodeEditor, SolidDialog, SolidDialogBody, SolidIconPicker, SolidInput, SolidTabGroup } from "../../../../components/shad-cn-ui";
+import { getModelsDevModels, useModelsDevCatalog } from "../../../../hooks/useModelsDevModels";
+import { SolidAutocomplete, SolidButton, SolidCodeEditor, SolidDialog, SolidDialogBody, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuTrigger, SolidIconPicker, SolidInput, SolidTabGroup } from "../../../../components/shad-cn-ui";
 import { SolidAgentEmbedded } from "../../../../components/core/solid-agent/SolidAgentEmbedded";
+import { SolidAgentMarkdown } from "../../../../components/core/solid-agent/SolidAgentMarkdown";
 import { AgentEmbeddingPanel } from "../../../../components/core/solid-agent/embed/AgentEmbeddingPanel";
 import "./AgentRegistryEditorPage.css";
 var PROVIDER_LABELS = {
@@ -79,85 +81,76 @@ var PROVIDER_LABELS = {
     openai: "OpenAI",
     openrouter: "OpenRouter",
 };
-function ModelPicker(_a) {
-    var value = _a.value, options = _a.options, placeholder = _a.placeholder, onChange = _a.onChange;
-    var rootRef = React.useRef(null);
-    var menuRef = React.useRef(null);
-    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    var _c = React.useState(""), query = _c[0], setQuery = _c[1];
-    var _d = React.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
-    var _e = React.useState({}), menuStyle = _e[0], setMenuStyle = _e[1];
-    var selected = options.find(function (option) { return option.value === value; });
-    var filtered = options.filter(function (option) {
-        return "".concat(PROVIDER_LABELS[option.provider], " ").concat(option.model).toLowerCase().includes(query.trim().toLowerCase());
+var BUILT_IN_PROVIDER_TYPES = ["openai", "anthropic"];
+/**
+ * Build picker options from the AI settings: every provider with an API key, its models from
+ * models.dev, plus the models chosen in settings and any already-saved values for this agent.
+ */
+function buildModelOptions(providers, settingsModels, catalog, savedValues) {
+    var enabled = Object.entries(providers)
+        .filter(function (_a) {
+        var entry = _a[1];
+        return typeof (entry === null || entry === void 0 ? void 0 : entry.apiKey) === "string" && entry.apiKey.trim().length > 0;
     });
-    var groups = Object.keys(ALLOWED_MODELS_BY_PROVIDER)
-        .map(function (provider) { return ({ provider: provider, options: filtered.filter(function (option) { return option.provider === provider; }) }); })
-        .filter(function (group) { return group.options.length > 0; });
-    React.useEffect(function () {
-        if (!open)
+    var options = [];
+    var seen = new Set();
+    var add = function (provider, model, note) {
+        var _a;
+        var value = "".concat(provider, ":").concat(model);
+        if (!model || seen.has(value))
             return;
-        var positionMenu = function () {
-            var _a;
-            var bounds = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!bounds)
-                return;
-            var gap = 6;
-            var maxMenuHeight = Math.min(288, window.innerHeight - 24);
-            var spaceBelow = window.innerHeight - bounds.bottom - gap - 12;
-            var spaceAbove = bounds.top - gap - 12;
-            var openAbove = spaceBelow < Math.min(220, maxMenuHeight) && spaceAbove > spaceBelow;
-            var availableHeight = Math.max(120, Math.min(maxMenuHeight, openAbove ? spaceAbove : spaceBelow));
-            setMenuStyle(__assign({ position: "fixed", left: bounds.left, width: bounds.width, maxHeight: availableHeight }, (openAbove
-                ? { bottom: window.innerHeight - bounds.top + gap }
-                : { top: bounds.bottom + gap })));
-        };
-        positionMenu();
-        window.addEventListener("resize", positionMenu);
-        window.addEventListener("scroll", positionMenu, true);
-        var handleOutsideClick = function (event) {
-            var _a, _b;
-            var target = event.target;
-            if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)))
-                setOpen(false);
-        };
-        document.addEventListener("mousedown", handleOutsideClick);
-        return function () {
-            window.removeEventListener("resize", positionMenu);
-            window.removeEventListener("scroll", positionMenu, true);
-            document.removeEventListener("mousedown", handleOutsideClick);
-        };
-    }, [open]);
-    var choose = function (option) {
-        onChange(option.value);
-        setQuery("");
-        setOpen(false);
+        seen.add(value);
+        options.push({ provider: provider, providerLabel: (_a = PROVIDER_LABELS[provider]) !== null && _a !== void 0 ? _a : provider, model: model, value: value, note: note });
     };
-    var flatIndex = -1;
-    return _jsxs("div", { className: "agent-editor__model-picker", ref: rootRef, children: [_jsxs("div", { className: "agent-editor__model-control", children: [_jsx("input", { role: "combobox", "aria-expanded": open, "aria-autocomplete": "list", "aria-label": placeholder, placeholder: selected ? "".concat(PROVIDER_LABELS[selected.provider], " / ").concat(selected.model) : value || placeholder, value: open ? query : "", onFocus: function () { setQuery(""); setActiveIndex(0); setOpen(true); }, onChange: function (event) { setQuery(event.target.value); setActiveIndex(0); setOpen(true); }, onKeyDown: function (event) {
-                            if (event.key === "Escape") {
-                                setOpen(false);
-                                setQuery("");
-                            }
-                            if (event.key === "ArrowDown") {
-                                event.preventDefault();
-                                setOpen(true);
-                                setActiveIndex(function (index) { return Math.min(index + 1, filtered.length - 1); });
-                            }
-                            if (event.key === "ArrowUp") {
-                                event.preventDefault();
-                                setActiveIndex(function (index) { return Math.max(index - 1, 0); });
-                            }
-                            if (event.key === "Enter" && open && filtered[activeIndex]) {
-                                event.preventDefault();
-                                choose(filtered[activeIndex]);
-                            }
-                        } }), _jsx("button", { type: "button", "aria-label": open ? "Close model options" : "Show model options", onMouseDown: function (event) { return event.preventDefault(); }, onClick: function () { setOpen(function (current) { return !current; }); setQuery(""); }, children: _jsx(ChevronDown, { size: 16 }) })] }), open && createPortal(_jsx("div", { ref: menuRef, className: "agent-editor__model-menu", style: menuStyle, role: "listbox", children: !groups.length ? _jsx("div", { className: "agent-editor__model-empty", children: options.length ? "No matching models." : "No enabled providers. Add an API key in AI Settings." })
-                    : groups.map(function (group) { return _jsxs("section", { className: "agent-editor__model-group", children: [_jsx("h3", { children: PROVIDER_LABELS[group.provider] }), group.options.map(function (option) {
-                                flatIndex += 1;
-                                var index = flatIndex;
-                                return _jsxs("button", { type: "button", role: "option", "aria-selected": option.value === value, className: "agent-editor__model-option".concat(index === activeIndex ? " is-active" : ""), onMouseDown: function (event) { return event.preventDefault(); }, onMouseEnter: function () { return setActiveIndex(index); }, onClick: function () { return choose(option); }, children: [_jsx("span", { children: option.model }), _jsxs("small", { children: [option.provider, ":", option.model] })] }, option.value);
-                            })] }, group.provider); }) }), document.body)] });
+    for (var _i = 0, enabled_1 = enabled; _i < enabled_1.length; _i++) {
+        var _a = enabled_1[_i], provider = _a[0], entry = _a[1];
+        for (var _b = 0, _c = Object.entries(settingsModels); _b < _c.length; _b++) {
+            var _d = _c[_b], role = _d[0], config = _d[1];
+            if ((config === null || config === void 0 ? void 0 : config.providerId) === provider && config.model)
+                add(provider, config.model, "".concat(role, " model in AI settings"));
+        }
+        for (var _e = 0, savedValues_1 = savedValues; _e < savedValues_1.length; _e++) {
+            var value = savedValues_1[_e];
+            if (value.startsWith("".concat(provider, ":")))
+                add(provider, value.slice(provider.length + 1), "currently saved");
+        }
+        var type = entry.type && BUILT_IN_PROVIDER_TYPES.includes(entry.type) ? entry.type : undefined;
+        for (var _f = 0, _g = getModelsDevModels(catalog, [provider, type]); _f < _g.length; _f++) {
+            var model = _g[_f];
+            add(provider, model.id);
+        }
+    }
+    return options;
+}
+var OTHER_MODEL = "__other_model__";
+function SearchableSelect(_a) {
+    var _b;
+    var value = _a.value, options = _a.options, placeholder = _a.placeholder, disabled = _a.disabled, onChange = _a.onChange;
+    var _c = React.useState(""), query = _c[0], setQuery = _c[1];
+    var selectedLabel = (_b = options.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label;
+    var selected = React.useMemo(function () { return selectedLabel ? { label: selectedLabel, value: value } : null; }, [selectedLabel, value]);
+    var suggestions = options.filter(function (option) {
+        return "".concat(option.label, " ").concat(option.value).toLowerCase().includes(query.trim().toLowerCase());
+    });
+    return _jsx(SolidAutocomplete, { className: "solid-standard-autocomplete w-full", value: selected, suggestions: suggestions, completeMethod: function (_a) {
+            var next = _a.query;
+            return setQuery(next);
+        }, onChange: function (event) { var _a, _b; return onChange((_b = (_a = event.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""); }, field: "label", placeholder: placeholder, disabled: disabled, dropdown: true, forceSelection: true, portal: true });
+}
+function ModelPicker(_a) {
+    var _b, _c;
+    var value = _a.value, options = _a.options, providers = _a.providers, providerConfig = _a.providerConfig, onChange = _a.onChange;
+    var separator = value.indexOf(":");
+    var provider = separator < 0 ? "" : value.slice(0, separator);
+    var model = separator < 0 ? "" : value.slice(separator + 1);
+    var availableModels = options.filter(function (option) { return option.provider === provider; });
+    var _d = React.useState(false), otherSelected = _d[0], setOtherSelected = _d[1];
+    var showOther = !!provider && (otherSelected || (!!model && !availableModels.some(function (option) { return option.model === model; })));
+    return _jsxs("div", { className: "agent-editor__stack", children: [_jsxs("div", { className: "agent-editor__field", children: [_jsx("span", { children: "Provider *" }), _jsx(SearchableSelect, { value: provider, options: providers, placeholder: "Select provider", onChange: function (next) { setOtherSelected(false); onChange("".concat(next, ":")); } }), ((_b = providerConfig[provider]) === null || _b === void 0 ? void 0 : _b.type) === "bedrock" && ((_c = providerConfig[provider]) === null || _c === void 0 ? void 0 : _c.region) &&
+                        _jsx("small", { children: _jsxs("em", { children: ["Region: ", providerConfig[provider].region] }) })] }), _jsxs("div", { className: "agent-editor__field", children: [_jsx("span", { children: "Model *" }), _jsx(SearchableSelect, { value: showOther ? OTHER_MODEL : model, options: __spreadArray(__spreadArray([], availableModels.map(function (option) { return ({ label: option.model, value: option.model }); }), true), [{ label: "Other", value: OTHER_MODEL }], false), placeholder: "Select model", disabled: !provider, onChange: function (next) {
+                            setOtherSelected(next === OTHER_MODEL);
+                            onChange("".concat(provider, ":").concat(next === OTHER_MODEL ? "" : next));
+                        } }), showOther && _jsx(SolidInput, { className: "w-full", "aria-label": "Custom model ID", placeholder: "Enter model ID", value: model, onChange: function (event) { return onChange("".concat(provider, ":").concat(event.target.value)); } })] })] });
 }
 var entityApi = createSolidEntityApi("agentRegistry");
 var skillApi = createSolidEntityApi("agentSkillRegistry");
@@ -169,7 +162,7 @@ var agentToolApi = createSolidEntityApi("agentTool");
 var agentRoleApi = createSolidEntityApi("agentRole");
 var agentSecretApi = createSolidEntityApi("agentSecret");
 var jobApi = createSolidEntityApi("agentJob");
-var skillFields = ["id", "name", "iconName", "description", "tags"];
+var skillFields = ["id", "name", "iconName", "description"];
 var toolFields = __spreadArray(__spreadArray([], skillFields, true), ["type", "status", "lastLoadError"], false);
 function fieldsQuery(fields) {
     return fields.map(function (name) { return "fields=".concat(encodeURIComponent(name)); }).join("&");
@@ -179,7 +172,7 @@ var detailFields = [
     "reasoningModelKey", "fastModelKey", "status", "stepLimit", "turnStepLimit", "costLimit", "configVersion",
 ];
 var detailQuery = [
-    "agentRoles", "agentRoles.roleMetadata", "agentSecrets", "agentSecrets.secret",
+    "agentRoles", "agentRoles.roleMetadata", "agentSecrets", "agentSecrets.secret", "tags",
 ].map(function (name, index) { return "populate[".concat(index, "]=").concat(name); }).join("&") + "&" + fieldsQuery(detailFields);
 // Group by link ID to project summary columns without populating full registry records.
 function resourceLinksQuery(id, relation, registry, setting, fields) {
@@ -219,7 +212,7 @@ function agentFormFromRecord(record) {
         name: (_a = record.name) !== null && _a !== void 0 ? _a : "", title: (_b = record.title) !== null && _b !== void 0 ? _b : "", description: (_c = record.description) !== null && _c !== void 0 ? _c : "", iconName: (_d = record.iconName) !== null && _d !== void 0 ? _d : "",
         inputs: parseInputs(record.requiredInputs), reasoningModelKey: (_e = record.reasoningModelKey) !== null && _e !== void 0 ? _e : "", fastModelKey: (_f = record.fastModelKey) !== null && _f !== void 0 ? _f : "",
         systemPrompt: (_g = record.systemPrompt) !== null && _g !== void 0 ? _g : "", stepLimit: (_h = record.stepLimit) !== null && _h !== void 0 ? _h : 100, turnStepLimit: (_j = record.turnStepLimit) !== null && _j !== void 0 ? _j : 20,
-        costLimit: Number((_k = record.costLimit) !== null && _k !== void 0 ? _k : 3), skillIds: skills.map(function (link) { var _a; return (_a = link.agentSkillRegistry) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean),
+        costLimit: Number((_k = record.costLimit) !== null && _k !== void 0 ? _k : 3), tags: agentHubTagsFrom(record.tags), skillIds: skills.map(function (link) { var _a; return (_a = link.agentSkillRegistry) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean),
         toolIds: tools.map(function (link) { var _a; return (_a = link.agentToolRegistry) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean),
         roleIds: items(record.agentRoles).map(function (link) { var _a; return (_a = link.roleMetadata) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean),
         secretIds: secrets.map(function (link) { var _a; return (_a = link.secret) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean),
@@ -242,27 +235,55 @@ function parseInputs(value) {
         var parsed = typeof value === "string" ? JSON.parse(value) : value;
         if (Array.isArray(parsed))
             return parsed.map(function (input) {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f;
                 return ({
                     name: String((_b = (_a = input.name) !== null && _a !== void 0 ? _a : input.variableName) !== null && _b !== void 0 ? _b : ""), description: String((_c = input.description) !== null && _c !== void 0 ? _c : ""),
-                    dataType: String((_e = (_d = input.dataType) !== null && _d !== void 0 ? _d : input.type) !== null && _e !== void 0 ? _e : "string"),
+                    dataType: String((_e = (_d = input.dataType) !== null && _d !== void 0 ? _d : input.type) !== null && _e !== void 0 ? _e : "string"), defaultValue: (_f = input.defaultValue) !== null && _f !== void 0 ? _f : null,
+                    optional: input.optional === true,
                 });
             });
         // Existing agent definitions may use a name-keyed object.
         if (parsed && typeof parsed === "object")
             return Object.entries(parsed).map(function (_a) {
-                var _b, _c, _d;
+                var _b, _c, _d, _e;
                 var name = _a[0], definition = _a[1];
                 return ({
                     name: name,
                     description: String((_b = definition === null || definition === void 0 ? void 0 : definition.description) !== null && _b !== void 0 ? _b : ""),
-                    dataType: String((_d = (_c = definition === null || definition === void 0 ? void 0 : definition.dataType) !== null && _c !== void 0 ? _c : definition === null || definition === void 0 ? void 0 : definition.type) !== null && _d !== void 0 ? _d : "string"),
+                    dataType: String((_d = (_c = definition === null || definition === void 0 ? void 0 : definition.dataType) !== null && _c !== void 0 ? _c : definition === null || definition === void 0 ? void 0 : definition.type) !== null && _d !== void 0 ? _d : "string"), defaultValue: (_e = definition === null || definition === void 0 ? void 0 : definition.defaultValue) !== null && _e !== void 0 ? _e : null,
+                    optional: (definition === null || definition === void 0 ? void 0 : definition.optional) === true,
                 });
             });
     }
     catch ( /* Keep malformed historical values from crashing the editor. */_a) { /* Keep malformed historical values from crashing the editor. */ }
     return [];
 }
+function parseDefaultValue(raw, dataType) {
+    if (dataType === "string" || dataType === "date" || dataType === "datetime")
+        return raw;
+    if (dataType === "boolean") {
+        if (raw !== "true" && raw !== "false")
+            throw new Error("Default value must be true or false for ".concat(dataType, "."));
+        return raw === "true";
+    }
+    if (dataType === "number" || dataType === "integer") {
+        var value_1 = Number(raw);
+        if (!Number.isFinite(value_1) || (dataType === "integer" && !Number.isSafeInteger(value_1)))
+            throw new Error("Default value must be a valid ".concat(dataType, "."));
+        return value_1;
+    }
+    var value = JSON.parse(raw);
+    if (dataType === "array" && !Array.isArray(value))
+        throw new Error("Default value must be a JSON array.");
+    if (dataType === "object" && (!value || typeof value !== "object" || Array.isArray(value)))
+        throw new Error("Default value must be a JSON object.");
+    return value;
+}
+function formatDefaultValue(value) {
+    if (value == null)
+        return "";
+    return typeof value === "string" ? value : JSON.stringify(value);
+}
 function apiError(error) {
     var _a, _b, _c, _d, _e;
     var value = (_e = (_c = (_b = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : (_d = error === null || error === void 0 ? void 0 : error.data) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : error === null || error === void 0 ? void 0 : error.message;
@@ -273,27 +294,43 @@ function useCatalog(api, query) {
     var _a = api.useGetSolidEntitiesQuery(query), data = _a.data, isLoading = _a.isLoading, refetch = _a.refetch;
     return { records: items(data === null || data === void 0 ? void 0 : data.records), isLoading: isLoading, refetch: refetch };
 }
+function ResourcePreviewDialog(_a) {
+    var _b, _c;
+    var item = _a.item, kind = _a.kind, onClose = _a.onClose;
+    var api = kind === "skill" ? skillApi : toolApi;
+    var field = kind === "skill" ? "body" : "sourceCode";
+    var _d = api.useGetSolidEntityByIdQuery({ id: item.id, qs: fieldsQuery(["id", field]) }, { refetchOnMountOrArgChange: true }), currentData = _d.currentData, isFetching = _d.isFetching, isError = _d.isError, refetch = _d.refetch;
+    var record = recordFrom(currentData);
+    var content = (_b = record === null || record === void 0 ? void 0 : record[field]) !== null && _b !== void 0 ? _b : "";
+    return _jsx(SolidDialog, { open: true, onOpenChange: function (open) { if (!open)
+            onClose(); }, header: (_c = item.name) !== null && _c !== void 0 ? _c : "View ".concat(kind), style: { width: "min(64rem, 94vw)", maxWidth: "94vw" }, children: _jsx(SolidDialogBody, { className: "agent-editor__resource-preview-body", children: isFetching ? _jsxs("div", { className: "agent-editor__empty", role: "status", children: ["Loading ", kind, "\u2026"] })
+                : isError || !record ? _jsxs("div", { className: "agent-editor__empty", children: [_jsxs("p", { role: "alert", children: ["This ", kind, " could not be loaded."] }), _jsx(SolidButton, { variant: "secondary", onClick: function () { return void refetch(); }, children: "Retry" })] })
+                    : !content ? _jsxs("div", { className: "agent-editor__empty", children: ["No ", kind === "skill" ? "skill body" : "source code", " available."] })
+                        : kind === "skill" ? _jsx(SolidAgentMarkdown, { text: content })
+                            : _jsx(SolidCodeEditor, { value: content, language: "python", readOnly: true, fontSize: 12, height: "min(65vh, 42rem)" }) }) });
+}
 function LinkPicker(_a) {
-    var label = _a.label, description = _a.description, options = _a.options, selected = _a.selected, onAdd = _a.onAdd, onRemove = _a.onRemove, createUrl = _a.createUrl, render = _a.render, renderSettings = _a.renderSettings, linkFor = _a.linkFor;
+    var label = _a.label, description = _a.description, options = _a.options, selected = _a.selected, onAdd = _a.onAdd, onRemove = _a.onRemove, createUrl = _a.createUrl, render = _a.render, renderSettings = _a.renderSettings, linkFor = _a.linkFor, onView = _a.onView, editUrlFor = _a.editUrlFor;
     var _b = React.useState(""), search = _b[0], setSearch = _b[1];
     var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var showAssociatedCount = label === "Skills" || label === "Tools";
     var available = options.filter(function (item) {
         var _a, _b, _c, _d;
         return !selected.some(function (selectedItem) { return selectedItem.id === item.id; })
             && "".concat((_c = (_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.displayName) !== null && _b !== void 0 ? _b : item.key) !== null && _c !== void 0 ? _c : "", " ").concat((_d = item.description) !== null && _d !== void 0 ? _d : "").toLowerCase().includes(search.toLowerCase());
     }).slice(0, 20);
-    return _jsxs("section", { className: "agent-editor__section", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { children: label }), _jsx("p", { children: description })] }), createUrl && _jsxs("a", { href: createUrl, target: "_blank", rel: "noopener noreferrer", className: "agent-editor__new-link", children: ["Create ", label === "Skills" ? "skill" : "tool", " ", _jsx(ExternalLink, { size: 14 })] })] }), _jsxs("div", { className: "agent-editor__picker", children: [_jsx(SolidInput, { value: search, placeholder: "Search and add ".concat(label.toLowerCase(), "\u2026"), "aria-label": "Search ".concat(label.toLowerCase()), onFocus: function () { return setOpen(true); }, onChange: function (event) { setSearch(event.target.value); setOpen(true); } }), open && _jsx("div", { className: "agent-editor__picker-results", children: available.length ? available.map(function (item) {
+    return _jsxs("section", { className: "agent-editor__section", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { children: label }), _jsx("p", { children: description })] }), createUrl && _jsxs("a", { href: createUrl, target: "_blank", rel: "noopener noreferrer", className: "agent-editor__new-link", children: ["Create ", label === "Skills" ? "skill" : "tool", " ", _jsx(ExternalLink, { size: 14 })] })] }), showAssociatedCount && _jsxs("div", { className: "agent-editor__linked-count", role: "status", children: [selected.length, " ", label.toLowerCase(), " associated"] }), _jsxs("div", { className: "agent-editor__picker", children: [_jsx(SolidInput, { value: search, placeholder: "Search and add ".concat(label.toLowerCase(), "\u2026"), "aria-label": "Search ".concat(label.toLowerCase()), onFocus: function () { return setOpen(true); }, onChange: function (event) { setSearch(event.target.value); setOpen(true); } }), open && _jsx("div", { className: "agent-editor__picker-results", children: available.length ? available.map(function (item) {
                             var _a, _b;
                             return _jsxs("button", { type: "button", onClick: function () { onAdd(item.id); setSearch(""); setOpen(false); }, children: [_jsx("strong", { children: (_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.displayName) !== null && _b !== void 0 ? _b : item.key }), _jsx("span", { children: item.description })] }, item.id);
                         }) : _jsxs("p", { children: ["No available ", label.toLowerCase(), " found."] }) })] }), selected.length ? _jsx("div", { className: "agent-editor__cards", children: selected.map(function (item) {
-                    var _a, _b;
-                    return _jsxs("div", { className: "agent-editor__linked-card", children: [_jsx("div", { className: "agent-editor__card-content", children: render(item, linkFor === null || linkFor === void 0 ? void 0 : linkFor(item.id)) }), renderSettings === null || renderSettings === void 0 ? void 0 : renderSettings(item, linkFor === null || linkFor === void 0 ? void 0 : linkFor(item.id)), _jsx("button", { type: "button", "aria-label": "Remove ".concat((_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.displayName) !== null && _b !== void 0 ? _b : item.key), onClick: function () { return onRemove(item.id); }, children: _jsx(Trash2, { size: 16 }) })] }, item.id);
+                    var _a, _b, _c, _d;
+                    return _jsxs("div", { className: "agent-editor__linked-card", children: [_jsx("div", { className: "agent-editor__card-content", children: render(item, linkFor === null || linkFor === void 0 ? void 0 : linkFor(item.id)) }), renderSettings === null || renderSettings === void 0 ? void 0 : renderSettings(item, linkFor === null || linkFor === void 0 ? void 0 : linkFor(item.id)), onView && editUrlFor ? _jsxs(SolidDropdownMenu, { children: [_jsx(SolidDropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "agent-editor__resource-menu-trigger", "aria-label": "Actions for ".concat((_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.displayName) !== null && _b !== void 0 ? _b : item.key), children: _jsx(Ellipsis, { size: 18 }) }) }), _jsxs(SolidDropdownMenuContent, { className: "agent-editor__resource-menu", children: [_jsxs(SolidDropdownMenuItem, { onSelect: function () { return onView(item); }, children: [_jsx(Eye, { size: 16 }), " View"] }), _jsx(SolidDropdownMenuItem, { asChild: true, children: _jsxs("a", { href: editUrlFor(item), target: "_blank", rel: "noopener noreferrer", children: [_jsx(Pencil, { size: 16 }), " Edit"] }) }), _jsxs(SolidDropdownMenuItem, { className: "agent-editor__resource-delete", onSelect: function () { return onRemove(item.id); }, children: [_jsx(Trash2, { size: 16 }), " Delete"] })] })] }) : _jsx("button", { type: "button", "aria-label": "Remove ".concat((_d = (_c = item.name) !== null && _c !== void 0 ? _c : item.displayName) !== null && _d !== void 0 ? _d : item.key), onClick: function () { return onRemove(item.id); }, children: _jsx(Trash2, { size: 16 }) })] }, item.id);
                 }) }) : _jsxs("div", { className: "agent-editor__empty", children: ["No ", label.toLowerCase(), " linked yet."] })] });
 }
 export function AgentRegistryEditorPage() {
     var _this = this;
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var _l = useParams().id, id = _l === void 0 ? "new" : _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _t = useParams().id, id = _t === void 0 ? "new" : _t;
     var navigate = useNavigate();
     var dispatch = useDispatch();
     var agentResult = entityApi.useGetSolidEntityByIdQuery({ id: id, qs: detailQuery }, { skip: id === "new" });
@@ -308,13 +345,13 @@ export function AgentRegistryEditorPage() {
             return undefined;
         return __assign(__assign({}, agent), { agentSkills: resourceLinksFrom(skillLinks.currentData, "agentSkills", "agentSkillRegistry", "alwaysInclude", skillFields), agentTools: resourceLinksFrom(toolLinks.currentData, "agentTools", "agentToolRegistry", "requiresApproval", toolFields) });
     }, [agentResult.currentData, skillLinks.currentData, toolLinks.currentData]);
-    var _m = useGetSolidSettingsQuery(undefined), settings = _m.data, settingsError = _m.isError;
-    var skills = useCatalog(skillApi, "offset=0&limit=1000&".concat(fieldsQuery(skillFields)));
-    var tools = useCatalog(toolApi, "offset=0&limit=1000&".concat(fieldsQuery(toolFields)));
+    var _u = useGetSolidSettingsQuery(undefined), settings = _u.data, settingsError = _u.isError;
+    var skills = useCatalog(skillApi, "offset=0&limit=1000&populate[0]=tags&".concat(fieldsQuery(skillFields)));
+    var tools = useCatalog(toolApi, "offset=0&limit=1000&populate[0]=tags&".concat(fieldsQuery(toolFields)));
     var roles = useCatalog(roleApi, "offset=0&limit=1000&populate[0]=module");
     var secrets = useCatalog(secretApi, "offset=0&limit=1000&fields[0]=id&fields[1]=key&fields[2]=displayName&fields[3]=description");
-    var _o = entityApi.useCreateSolidEntityMutation(), createAgent = _o[0], creating = _o[1].isLoading;
-    var _p = entityApi.useUpdateSolidEntityMutation(), updateAgent = _p[0], updating = _p[1].isLoading;
+    var _v = entityApi.useCreateSolidEntityMutation(), createAgent = _v[0], creating = _v[1].isLoading;
+    var _w = entityApi.useUpdateSolidEntityMutation(), updateAgent = _w[0], updating = _w[1].isLoading;
     var createSkillLink = agentSkillApi.useCreateSolidEntityMutation()[0];
     var deleteSkillLink = agentSkillApi.useDeleteSolidEntityMutation()[0];
     var updateSkillLink = agentSkillApi.useUpdateSolidEntityMutation()[0];
@@ -327,7 +364,7 @@ export function AgentRegistryEditorPage() {
     var deleteSecretLink = agentSecretApi.useDeleteSolidEntityMutation()[0];
     var updateSecretLink = agentSecretApi.useUpdateSolidEntityMutation()[0];
     var record = recordFrom(response);
-    var _q = React.useState("basics"), tab = _q[0], setTab = _q[1];
+    var _x = React.useState("basics"), tab = _x[0], setTab = _x[1];
     var jobs = jobApi.useGetSolidEntitiesQuery("offset=0&limit=1000&filters[agent][id][$eq]=".concat(encodeURIComponent(id), "&").concat(fieldsQuery(["id", "status"])), { skip: id === "new" || tab !== "jobs" });
     var refetch = function () {
         void agentResult.refetch();
@@ -336,34 +373,37 @@ export function AgentRegistryEditorPage() {
         if (tab === "jobs")
             void jobs.refetch();
     };
-    var _r = React.useState(false), testAgentOpen = _r[0], setTestAgentOpen = _r[1];
-    var _s = React.useState("maximized"), testAgentWindowMode = _s[0], setTestAgentWindowMode = _s[1];
-    var _t = React.useState(""), name = _t[0], setName = _t[1];
-    var _u = React.useState(""), title = _u[0], setTitle = _u[1];
-    var _v = React.useState(""), description = _v[0], setDescription = _v[1];
-    var _w = React.useState(""), iconName = _w[0], setIconName = _w[1];
-    var _x = React.useState([]), inputs = _x[0], setInputs = _x[1];
-    var _y = React.useState(""), reasoningModelKey = _y[0], setReasoningModelKey = _y[1];
-    var _z = React.useState(""), fastModelKey = _z[0], setFastModelKey = _z[1];
-    var _0 = React.useState(""), systemPrompt = _0[0], setSystemPrompt = _0[1];
-    var _1 = React.useState(100), stepLimit = _1[0], setStepLimit = _1[1];
-    var _2 = React.useState(20), turnStepLimit = _2[0], setTurnStepLimit = _2[1];
-    var _3 = React.useState(3), costLimit = _3[0], setCostLimit = _3[1];
-    var _4 = React.useState([]), skillIds = _4[0], setSkillIds = _4[1];
-    var _5 = React.useState([]), toolIds = _5[0], setToolIds = _5[1];
-    var _6 = React.useState([]), roleIds = _6[0], setRoleIds = _6[1];
-    var _7 = React.useState([]), secretIds = _7[0], setSecretIds = _7[1];
-    var _8 = React.useState({}), alwaysIncludeValues = _8[0], setAlwaysIncludeValues = _8[1];
-    var _9 = React.useState({}), requiresApprovalValues = _9[0], setRequiresApprovalValues = _9[1];
-    var _10 = React.useState({}), secretEnvVarNames = _10[0], setSecretEnvVarNames = _10[1];
-    var _11 = React.useState(null), pendingSecret = _11[0], setPendingSecret = _11[1];
-    var _12 = React.useState(""), secretEnvVarDraft = _12[0], setSecretEnvVarDraft = _12[1];
-    var _13 = React.useState(""), secretEnvVarError = _13[0], setSecretEnvVarError = _13[1];
-    var _14 = React.useState({}), errors = _14[0], setErrors = _14[1];
-    var _15 = React.useState(0), auditVersion = _15[0], setAuditVersion = _15[1];
-    var _16 = React.useState(false), confirmRefresh = _16[0], setConfirmRefresh = _16[1];
+    var _y = React.useState(false), testAgentOpen = _y[0], setTestAgentOpen = _y[1];
+    var _z = React.useState(null), preview = _z[0], setPreview = _z[1];
+    var _0 = React.useState("maximized"), testAgentWindowMode = _0[0], setTestAgentWindowMode = _0[1];
+    var _1 = React.useState(""), name = _1[0], setName = _1[1];
+    var _2 = React.useState(""), title = _2[0], setTitle = _2[1];
+    var _3 = React.useState(""), description = _3[0], setDescription = _3[1];
+    var _4 = React.useState(""), iconName = _4[0], setIconName = _4[1];
+    var _5 = React.useState([]), inputs = _5[0], setInputs = _5[1];
+    var _6 = React.useState(""), reasoningModelKey = _6[0], setReasoningModelKey = _6[1];
+    var _7 = React.useState(""), fastModelKey = _7[0], setFastModelKey = _7[1];
+    var _8 = React.useState(""), systemPrompt = _8[0], setSystemPrompt = _8[1];
+    var _9 = React.useState(100), stepLimit = _9[0], setStepLimit = _9[1];
+    var _10 = React.useState(20), turnStepLimit = _10[0], setTurnStepLimit = _10[1];
+    var _11 = React.useState(3), costLimit = _11[0], setCostLimit = _11[1];
+    var _12 = React.useState([]), tags = _12[0], setTags = _12[1];
+    var _13 = React.useState(false), creatingTag = _13[0], setCreatingTag = _13[1];
+    var _14 = React.useState([]), skillIds = _14[0], setSkillIds = _14[1];
+    var _15 = React.useState([]), toolIds = _15[0], setToolIds = _15[1];
+    var _16 = React.useState([]), roleIds = _16[0], setRoleIds = _16[1];
+    var _17 = React.useState([]), secretIds = _17[0], setSecretIds = _17[1];
+    var _18 = React.useState({}), alwaysIncludeValues = _18[0], setAlwaysIncludeValues = _18[1];
+    var _19 = React.useState({}), requiresApprovalValues = _19[0], setRequiresApprovalValues = _19[1];
+    var _20 = React.useState({}), secretEnvVarNames = _20[0], setSecretEnvVarNames = _20[1];
+    var _21 = React.useState(null), pendingSecret = _21[0], setPendingSecret = _21[1];
+    var _22 = React.useState(""), secretEnvVarDraft = _22[0], setSecretEnvVarDraft = _22[1];
+    var _23 = React.useState(""), secretEnvVarError = _23[0], setSecretEnvVarError = _23[1];
+    var _24 = React.useState({}), errors = _24[0], setErrors = _24[1];
+    var _25 = React.useState(0), auditVersion = _25[0], setAuditVersion = _25[1];
+    var _26 = React.useState(false), confirmRefresh = _26[0], setConfirmRefresh = _26[1];
     var baseline = React.useRef("");
-    var currentForm = function () { return JSON.stringify({ name: name, title: title, description: description, iconName: iconName, inputs: inputs, reasoningModelKey: reasoningModelKey, fastModelKey: fastModelKey, systemPrompt: systemPrompt, stepLimit: Number(stepLimit), turnStepLimit: Number(turnStepLimit), costLimit: Number(costLimit), skillIds: skillIds, toolIds: toolIds, roleIds: roleIds, secretIds: secretIds, alwaysIncludeValues: alwaysIncludeValues, requiresApprovalValues: requiresApprovalValues, secretEnvVarNames: secretEnvVarNames }); };
+    var currentForm = function () { return JSON.stringify({ name: name, title: title, description: description, iconName: iconName, inputs: inputs, reasoningModelKey: reasoningModelKey, fastModelKey: fastModelKey, systemPrompt: systemPrompt, stepLimit: Number(stepLimit), turnStepLimit: Number(turnStepLimit), costLimit: Number(costLimit), tags: tags, skillIds: skillIds, toolIds: toolIds, roleIds: roleIds, secretIds: secretIds, alwaysIncludeValues: alwaysIncludeValues, requiresApprovalValues: requiresApprovalValues, secretEnvVarNames: secretEnvVarNames }); };
     React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (!record)
@@ -380,6 +420,7 @@ export function AgentRegistryEditorPage() {
         setStepLimit((_h = record.stepLimit) !== null && _h !== void 0 ? _h : 100);
         setTurnStepLimit((_j = record.turnStepLimit) !== null && _j !== void 0 ? _j : 20);
         setCostLimit(Number((_k = record.costLimit) !== null && _k !== void 0 ? _k : 3));
+        setTags(agentHubTagsFrom(record.tags));
         setSkillIds(items(record.agentSkills).map(function (link) { var _a; return (_a = link.agentSkillRegistry) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean));
         setToolIds(items(record.agentTools).map(function (link) { var _a; return (_a = link.agentToolRegistry) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean));
         setRoleIds(items(record.agentRoles).map(function (link) { var _a; return (_a = link.roleMetadata) === null || _a === void 0 ? void 0 : _a.id; }).filter(Boolean));
@@ -409,19 +450,29 @@ export function AgentRegistryEditorPage() {
         return function () { return window.removeEventListener("focus", refresh); };
     }, [skills.refetch, tools.refetch]);
     var configValue = getSettingsMap(settings).solidXGenAiCodeBuilderConfig;
-    var enabledProviders = {};
+    var aiConfig = {};
     try {
-        var config = typeof configValue === "string" ? JSON.parse(configValue) : configValue;
-        enabledProviders = (_a = config === null || config === void 0 ? void 0 : config.providers) !== null && _a !== void 0 ? _a : {};
+        aiConfig = (_a = (typeof configValue === "string" ? JSON.parse(configValue) : configValue)) !== null && _a !== void 0 ? _a : {};
     }
-    catch ( /* Invalid configuration has no enabled providers. */_17) { /* Invalid configuration has no enabled providers. */ }
-    var modelOptions = Object.keys(ALLOWED_MODELS_BY_PROVIDER)
-        .filter(function (provider) { var _a; return typeof ((_a = enabledProviders[provider]) === null || _a === void 0 ? void 0 : _a.apiKey) === "string" && enabledProviders[provider].apiKey.trim().length > 0; })
-        .flatMap(function (provider) { return ALLOWED_MODELS_BY_PROVIDER[provider].map(function (model) { return ({
-        provider: provider,
-        model: model,
-        value: "".concat(provider, ":").concat(model),
-    }); }); });
+    catch ( /* Invalid configuration has no enabled providers. */_27) { /* Invalid configuration has no enabled providers. */ }
+    var modelsCatalog = useModelsDevCatalog().catalog;
+    var savedModelKeys = [record === null || record === void 0 ? void 0 : record.reasoningModelKey, record === null || record === void 0 ? void 0 : record.fastModelKey].filter(function (key) { return !!key; });
+    var modelOptions = buildModelOptions((_b = aiConfig.providers) !== null && _b !== void 0 ? _b : {}, { Reasoning: (_d = (_c = aiConfig.models) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : (_e = aiConfig.models) === null || _e === void 0 ? void 0 : _e.main, Fast: (_f = aiConfig.models) === null || _f === void 0 ? void 0 : _f.fast }, modelsCatalog, savedModelKeys);
+    var providerOptions = Object.entries((_g = aiConfig.providers) !== null && _g !== void 0 ? _g : {})
+        .filter(function (_a) {
+        var entry = _a[1];
+        return typeof (entry === null || entry === void 0 ? void 0 : entry.apiKey) === "string" && entry.apiKey.trim().length > 0;
+    })
+        .map(function (_a) {
+        var _b, _c, _d;
+        var provider = _a[0];
+        return ({ label: (_d = (_c = (_b = modelsCatalog === null || modelsCatalog === void 0 ? void 0 : modelsCatalog[provider]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : PROVIDER_LABELS[provider]) !== null && _d !== void 0 ? _d : provider, value: provider });
+    });
+    var isValidModelKey = function (value) {
+        var separator = value.indexOf(":");
+        return separator > 0 && providerOptions.some(function (provider) { return provider.value === value.slice(0, separator); }) &&
+            !!value.slice(separator + 1).trim();
+    };
     var toggle = function (setter, value) {
         return setter(function (current) { return current.includes(value) ? current.filter(function (id) { return id !== value; }) : __spreadArray(__spreadArray([], current, true), [value], false); });
     };
@@ -493,11 +544,13 @@ export function AgentRegistryEditorPage() {
         });
     };
     var save = function (nextStatus) { return __awaiter(_this, void 0, void 0, function () {
-        var next, payload, newlyCreatedId, scalarSaved, result, _a, savedId, error_1;
+        var next, normalizedInputs, payload, newlyCreatedId, scalarSaved, result, _a, savedId, error_1;
         var _b, _c, _d;
         return __generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
+                    if (creatingTag)
+                        return [2 /*return*/];
                     next = {};
                     if (!name.trim())
                         next.name = "Name is required.";
@@ -505,9 +558,9 @@ export function AgentRegistryEditorPage() {
                         next.title = "Title is required.";
                     if (!systemPrompt.trim())
                         next.systemPrompt = "Persona instructions are required.";
-                    if (!modelOptions.some(function (option) { return option.value === reasoningModelKey; }))
+                    if (!isValidModelKey(reasoningModelKey))
                         next.reasoningModelKey = "Choose an enabled reasoning provider and model.";
-                    if (!modelOptions.some(function (option) { return option.value === fastModelKey; }))
+                    if (!isValidModelKey(fastModelKey))
                         next.fastModelKey = "Choose an enabled fast provider and model.";
                     if (inputs.some(function (input) { return !input.name.trim() || !input.dataType; }))
                         next.inputs = "Each input needs a name and data type.";
@@ -521,17 +574,16 @@ export function AgentRegistryEditorPage() {
                         dispatch(showToast({ severity: "error", summary: "Missing information", detail: Object.values(next).join(" ") }));
                         return [2 /*return*/];
                     }
-                    payload = {
-                        name: name.trim(), title: title.trim(), description: description.trim(),
-                        iconName: iconName,
-                        requiredInputs: JSON.stringify(inputs.map(function (input) { return (__assign(__assign({}, input), { name: input.name.trim(), description: input.description.trim() })); })),
-                        reasoningModelKey: reasoningModelKey,
-                        fastModelKey: fastModelKey,
-                        systemPrompt: systemPrompt,
-                        stepLimit: Number(stepLimit),
-                        turnStepLimit: Number(turnStepLimit), costLimit: Number(costLimit),
-                        status: (_b = nextStatus !== null && nextStatus !== void 0 ? nextStatus : record === null || record === void 0 ? void 0 : record.status) !== null && _b !== void 0 ? _b : "draft",
-                    };
+                    try {
+                        normalizedInputs = inputs.map(function (input) { return (__assign(__assign({}, input), { name: input.name.trim(), description: input.description.trim(), defaultValue: input.defaultValue === "" || input.defaultValue == null ? null : parseDefaultValue(String(input.defaultValue), input.dataType) })); });
+                    }
+                    catch (error) {
+                        next.inputs = error instanceof Error ? error.message : "Check the default input values.";
+                        setErrors(next);
+                        setTab("basics");
+                        return [2 /*return*/];
+                    }
+                    payload = __assign(__assign({ name: name.trim(), title: title.trim(), description: description.trim(), iconName: iconName, requiredInputs: JSON.stringify(normalizedInputs), reasoningModelKey: reasoningModelKey, fastModelKey: fastModelKey, systemPrompt: systemPrompt, stepLimit: Number(stepLimit), turnStepLimit: Number(turnStepLimit), costLimit: Number(costLimit) }, agentHubTagsPayload(tags)), { status: (_b = nextStatus !== null && nextStatus !== void 0 ? nextStatus : record === null || record === void 0 ? void 0 : record.status) !== null && _b !== void 0 ? _b : "draft" });
                     scalarSaved = false;
                     _e.label = 1;
                 case 1:
@@ -637,14 +689,15 @@ export function AgentRegistryEditorPage() {
     var linkSetting = function (label, checked, onChange, hint) {
         return _jsxs("label", { className: "agent-editor__link-setting", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: function (event) { return onChange(event.target.checked); } }), _jsxs("span", { children: [_jsx("strong", { children: label }), _jsx("small", { children: hint })] })] });
     };
-    var agentStatus = (_b = record === null || record === void 0 ? void 0 : record.status) !== null && _b !== void 0 ? _b : "draft";
+    var agentStatus = (_h = record === null || record === void 0 ? void 0 : record.status) !== null && _h !== void 0 ? _h : "draft";
     var tabs = __spreadArray(__spreadArray(__spreadArray(__spreadArray([
-        { value: "basics", label: "Basics", content: _jsxs("div", { className: "agent-editor__stack", children: [_jsxs("div", { className: "agent-editor__grid", children: [field("Name", name, setName, "name", true), field("Title", title, setTitle, "title", true), field("Description", description, setDescription, "description"), _jsxs("div", { className: "agent-editor__field", children: [_jsx("span", { children: "Icon" }), _jsx(SolidIconPicker, { value: iconName, onChange: setIconName })] })] }), _jsxs("section", { className: "agent-editor__section", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Required inputs" }), _jsx("p", { children: "Define the variables people must provide when starting this agent." })] }), inputs.length > 0 && _jsxs(SolidButton, { type: "button", variant: "secondary", size: "small", onClick: function () { return setInputs(function (current) { return __spreadArray(__spreadArray([], current, true), [{ name: "", description: "", dataType: "string" }], false); }); }, children: [_jsx(Plus, { size: 15 }), " Add input"] })] }), !inputs.length ? _jsxs("div", { className: "agent-editor__empty", children: ["This agent has no required inputs. ", _jsxs("button", { type: "button", onClick: function () { return setInputs([{ name: "", description: "", dataType: "string" }]); }, children: [_jsx(Plus, { size: 15 }), " Add an input variable"] })] })
-                                : _jsx("div", { className: "agent-editor__inputs", children: inputs.map(function (input, index) { return _jsxs("div", { className: "agent-editor__input-row", children: [_jsx(SolidInput, { "aria-label": "Input ".concat(index + 1, " name"), placeholder: "Variable name", value: input.name, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { name: event.target.value }) : item; }); }); } }), _jsx(SolidInput, { "aria-label": "Input ".concat(index + 1, " description"), placeholder: "Description", value: input.description, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { description: event.target.value }) : item; }); }); } }), _jsx("select", { "aria-label": "Input ".concat(index + 1, " data type"), value: input.dataType, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { dataType: event.target.value }) : item; }); }); }, children: ["string", "number", "integer", "boolean", "date", "datetime", "object", "array"].map(function (type) { return _jsx("option", { value: type, children: type }, type); }) }), _jsx("button", { type: "button", "aria-label": "Remove input ".concat(index + 1), onClick: function () { return setInputs(function (current) { return current.filter(function (_, i) { return i !== index; }); }); }, children: _jsx(Trash2, { size: 17 }) })] }, index); }) }), errors.inputs && _jsx("small", { className: "agent-editor__error", children: errors.inputs })] }), _jsxs("section", { className: "agent-editor__section", children: [_jsx("h2", { children: "Models" }), _jsx("p", { children: "Choose any configured provider and model pair for each role. Both lists use the models enabled in AI settings." }), _jsx("div", { className: "agent-editor__grid", children: [["Reasoning model", reasoningModelKey, setReasoningModelKey, "reasoningModelKey"], ["Fast model", fastModelKey, setFastModelKey, "fastModelKey"]].map(function (_a) {
+        { value: "basics", label: "Basics", content: _jsxs("div", { className: "agent-editor__stack", children: [_jsxs("div", { className: "agent-editor__grid", children: [field("Name", name, setName, "name", true), field("Title", title, setTitle, "title", true), field("Description", description, setDescription, "description"), _jsxs("div", { className: "agent-editor__field", children: [_jsx("span", { children: "Icon" }), _jsx(SolidIconPicker, { value: iconName, onChange: setIconName })] })] }), _jsx(AgentHubTagsField, { value: tags, onChange: setTags, disabled: creating || updating || isLoading || isFetching || isError, onBusyChange: setCreatingTag }), _jsxs("section", { className: "agent-editor__section", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "Inputs" }), _jsx("p", { children: "Define the variables this agent can use. Mark inputs optional or provide a default value when people do not need to enter them." })] }), inputs.length > 0 && _jsxs(SolidButton, { type: "button", variant: "secondary", size: "small", onClick: function () { return setInputs(function (current) { return __spreadArray(__spreadArray([], current, true), [{ name: "", description: "", dataType: "string", defaultValue: null, optional: false }], false); }); }, children: [_jsx(Plus, { size: 15 }), " Add input"] })] }), !inputs.length ? _jsxs("div", { className: "agent-editor__empty", children: ["This agent has no inputs. ", _jsxs("button", { type: "button", onClick: function () { return setInputs([{ name: "", description: "", dataType: "string", defaultValue: null, optional: false }]); }, children: [_jsx(Plus, { size: 15 }), " Add an input variable"] })] })
+                                : _jsx("div", { className: "agent-editor__inputs", children: inputs.map(function (input, index) { return _jsxs("div", { className: "agent-editor__input-row", children: [_jsx(SolidInput, { "aria-label": "Input ".concat(index + 1, " name"), placeholder: "Variable name", value: input.name, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { name: event.target.value }) : item; }); }); } }), _jsx(SolidInput, { "aria-label": "Input ".concat(index + 1, " description"), placeholder: "Description", value: input.description, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { description: event.target.value }) : item; }); }); } }), _jsx(SolidInput, { "aria-label": "Input ".concat(index + 1, " default value"), placeholder: "Default value", value: formatDefaultValue(input.defaultValue), onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { defaultValue: event.target.value }) : item; }); }); } }), _jsx("select", { "aria-label": "Input ".concat(index + 1, " data type"), value: input.dataType, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { dataType: event.target.value }) : item; }); }); }, children: ["string", "number", "integer", "boolean", "date", "datetime", "object", "array"].map(function (type) { return _jsx("option", { value: type, children: type }, type); }) }), _jsxs("label", { className: "agent-editor__input-optional", children: [_jsx("input", { type: "checkbox", checked: input.optional, onChange: function (event) { return setInputs(function (current) { return current.map(function (item, i) { return i === index ? __assign(__assign({}, item), { optional: event.target.checked }) : item; }); }); } }), " Optional"] }), _jsx("button", { type: "button", "aria-label": "Remove input ".concat(index + 1), onClick: function () { return setInputs(function (current) { return current.filter(function (_, i) { return i !== index; }); }); }, children: _jsx(Trash2, { size: 17 }) })] }, index); }) }), errors.inputs && _jsx("small", { className: "agent-editor__error", children: errors.inputs })] }), _jsxs("section", { className: "agent-editor__section agent-editor__models", children: [_jsx("h2", { children: "Models" }), _jsx("p", { children: "Choose a configured provider and model for each role. Select Other to enter a model ID manually." }), _jsx("div", { className: "agent-editor__grid", children: [["Reasoning model", reasoningModelKey, setReasoningModelKey, "reasoningModelKey"], ["Fast model", fastModelKey, setFastModelKey, "fastModelKey"]].map(function (_a) {
+                                    var _b;
                                     var label = _a[0], value = _a[1], setter = _a[2], key = _a[3];
-                                    return _jsxs("label", { className: "agent-editor__field", children: [_jsxs("span", { children: [label, " *"] }), _jsx(ModelPicker, { value: value, options: modelOptions, placeholder: "Search providers and models\u2026", onChange: function (next) { return setter(next); } }), errors[key] && _jsx("small", { className: "agent-editor__error", children: errors[key] })] }, key);
+                                    return _jsxs("div", { className: "agent-editor__field", children: [_jsx("span", { children: label }), _jsx(ModelPicker, { value: value, options: modelOptions, providers: providerOptions, providerConfig: (_b = aiConfig.providers) !== null && _b !== void 0 ? _b : {}, onChange: setter }), errors[key] && _jsx("small", { className: "agent-editor__error", children: errors[key] })] }, key);
                                 }) }), settingsError ? _jsx("p", { className: "agent-editor__hint", children: "Settings could not be loaded. Try refreshing this page." })
-                                : !modelOptions.length && _jsx("p", { className: "agent-editor__hint", children: "No configured models are available. Check the AI settings and your permission to view encrypted settings." })] }), _jsxs("section", { className: "agent-editor__section agent-editor__workflow", "aria-labelledby": "agent-lifecycle-title", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { id: "agent-lifecycle-title", children: "Agent lifecycle" }), _jsx("p", { children: "Track this agent through its available stages. Select a stage to update its status." })] }), _jsxs("div", { className: "agent-editor__workflow-meta", children: [(record === null || record === void 0 ? void 0 : record.configVersion) != null && _jsxs("span", { className: "agent-editor__config-version", "aria-label": "Configuration version ".concat(record.configVersion), children: ["Config v", record.configVersion] }), _jsx(SolidWorkflowStatusPill, { label: agentStatus })] })] }), _jsx("div", { className: "agent-editor__workflow-stages", "aria-label": "Current agent stage: ".concat(agentStatus), children: [[
+                                : !providerOptions.length && _jsx("p", { className: "agent-editor__hint", children: "No enabled providers are available. Check the AI settings and your permission to view encrypted settings." })] }), _jsxs("section", { className: "agent-editor__section agent-editor__workflow", "aria-labelledby": "agent-lifecycle-title", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { id: "agent-lifecycle-title", children: "Agent lifecycle" }), _jsx("p", { children: "Track this agent through its available stages. Select a stage to update its status." })] }), _jsxs("div", { className: "agent-editor__workflow-meta", children: [(record === null || record === void 0 ? void 0 : record.configVersion) != null && _jsxs("span", { className: "agent-editor__config-version", "aria-label": "Configuration version ".concat(record.configVersion), children: ["Config v", record.configVersion] }), _jsx(SolidWorkflowStatusPill, { label: agentStatus })] })] }), _jsx("div", { className: "agent-editor__workflow-stages", "aria-label": "Current agent stage: ".concat(agentStatus), children: [[
                                         "draft", "Draft", "Editable configuration; not available to users."
                                     ],
                                     ["active", "Active", "Available to authorized users and the AgentHub runtime."],
@@ -653,15 +706,15 @@ export function AgentRegistryEditorPage() {
                                     var value = _a[0], label = _a[1], description = _a[2];
                                     return _jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "agent-editor__workflow-connector", "aria-hidden": "true" }), _jsxs("button", { type: "button", className: "agent-editor__workflow-stage".concat(agentStatus === value ? " is-current" : ""), "aria-current": agentStatus === value ? "step" : undefined, "aria-pressed": agentStatus === value, disabled: creating || updating || agentStatus === value, onClick: function () { return void save(value); }, children: [_jsx("span", { className: "agent-editor__workflow-stage-mark", children: index + 1 }), _jsxs("div", { className: "agent-editor__workflow-stage-copy", children: [_jsx("strong", { children: label }), _jsx("small", { children: description }), _jsx("small", { className: "agent-editor__workflow-stage-cta", children: agentStatus === value ? "Current stage" : "Click to move to this stage" })] }), agentStatus === value && _jsx("span", { className: "agent-editor__workflow-current", children: "Current" })] })] }, value);
                                 }) }), _jsx("small", { className: "agent-editor__workflow-save-hint", children: "Changing stage saves the current form and its linked skills, tools, roles, and secrets." })] })] }) },
-        { value: "persona", label: "Persona", content: _jsxs("section", { className: "agent-editor__section agent-editor__persona", children: [_jsx("div", { className: "agent-editor__section-head", children: _jsxs("div", { children: [_jsx("h2", { children: "System prompt *" }), _jsx("p", { children: "Describe the agent's role, behavior, and instructions in Markdown." })] }) }), _jsx(SolidCodeEditor, { value: systemPrompt, onChange: function (value) { setSystemPrompt(value !== null && value !== void 0 ? value : ""); setErrors(function (current) { return (__assign(__assign({}, current), { systemPrompt: "" })); }); }, language: "markdown", fontSize: 11, height: "max(34rem, calc(100dvh - 18rem))" }), errors.systemPrompt && _jsx("small", { className: "agent-editor__error", children: errors.systemPrompt })] }) },
-        { value: "skills", label: "Skills", content: _jsx(LinkPicker, { label: "Skills", description: "Skills available to this agent.", options: skills.records, selected: linked(skillIds, skills.records, items(record === null || record === void 0 ? void 0 : record.agentSkills).map(function (link) { return link.agentSkillRegistry; }).filter(Boolean)), onAdd: function (id) { return toggle(setSkillIds, id); }, onRemove: function (id) { return toggle(setSkillIds, id); }, createUrl: "/admin/core/solid-core/agent-skill-registry/editor/new", linkFor: function (id) { return linkForTarget(record === null || record === void 0 ? void 0 : record.agentSkills, "agentSkillRegistry", id); }, render: function (item) { return _jsx(AgentResourceCardWidget, __assign({}, { rowData: item })); }, renderSettings: function (item) {
+        { value: "persona", label: "Persona", content: _jsxs("section", { className: "agent-editor__section agent-editor__persona", children: [_jsxs("div", { className: "agent-editor__section-head", children: [_jsxs("div", { children: [_jsx("h2", { children: "System prompt *" }), _jsx("p", { children: "Describe the agent's role, behavior, and instructions in Markdown." })] }), (record === null || record === void 0 ? void 0 : record.id) && _jsx(AgentPersonaHistory, { agentId: record.id, savedPrompt: (_j = record.systemPrompt) !== null && _j !== void 0 ? _j : "", refreshVersion: auditVersion })] }), _jsx(SolidCodeEditor, { value: systemPrompt, onChange: function (value) { setSystemPrompt(value !== null && value !== void 0 ? value : ""); setErrors(function (current) { return (__assign(__assign({}, current), { systemPrompt: "" })); }); }, language: "markdown", fontSize: 11, height: "max(34rem, calc(100dvh - 18rem))" }), errors.systemPrompt && _jsx("small", { className: "agent-editor__error", children: errors.systemPrompt })] }) },
+        { value: "skills", label: "Skills", content: _jsx(LinkPicker, { label: "Skills", description: "Skills available to this agent.", options: skills.records, selected: linked(skillIds, skills.records, items(record === null || record === void 0 ? void 0 : record.agentSkills).map(function (link) { return link.agentSkillRegistry; }).filter(Boolean)), onAdd: function (id) { return toggle(setSkillIds, id); }, onRemove: function (id) { return toggle(setSkillIds, id); }, createUrl: "/admin/core/solid-core/agent-skill-registry/editor/new", onView: function (item) { return setPreview({ item: item, kind: "skill" }); }, editUrlFor: function (item) { return "/admin/core/solid-core/agent-skill-registry/editor/".concat(item.id); }, linkFor: function (id) { return linkForTarget(record === null || record === void 0 ? void 0 : record.agentSkills, "agentSkillRegistry", id); }, render: function (item) { return _jsx(AgentResourceCardWidget, __assign({}, { rowData: item })); }, renderSettings: function (item) {
                     var _a;
                     return _jsx("div", { className: "agent-editor__link-settings", children: linkSetting("Always include", (_a = alwaysIncludeValues[item.id]) !== null && _a !== void 0 ? _a : true, function (checked) { return setAlwaysIncludeValues(function (current) {
                             var _a;
                             return (__assign(__assign({}, current), (_a = {}, _a[item.id] = checked, _a)));
                         }); }, "Add the full skill to the agent prompt. Turn off to load it on demand.") });
                 } }) },
-        { value: "tools", label: "Tools", content: _jsx(LinkPicker, { label: "Tools", description: "Tools available to this agent.", options: tools.records, selected: linked(toolIds, tools.records, items(record === null || record === void 0 ? void 0 : record.agentTools).map(function (link) { return link.agentToolRegistry; }).filter(Boolean)), onAdd: function (id) { return toggle(setToolIds, id); }, onRemove: function (id) { return toggle(setToolIds, id); }, createUrl: "/admin/core/solid-core/agent-tool-registry/editor/new", linkFor: function (id) { return linkForTarget(record === null || record === void 0 ? void 0 : record.agentTools, "agentToolRegistry", id); }, render: function (item) { return _jsx(AgentResourceCardWidget, __assign({}, { rowData: item })); }, renderSettings: function (item) {
+        { value: "tools", label: "Tools", content: _jsx(LinkPicker, { label: "Tools", description: "Tools available to this agent.", options: tools.records, selected: linked(toolIds, tools.records, items(record === null || record === void 0 ? void 0 : record.agentTools).map(function (link) { return link.agentToolRegistry; }).filter(Boolean)), onAdd: function (id) { return toggle(setToolIds, id); }, onRemove: function (id) { return toggle(setToolIds, id); }, createUrl: "/admin/core/solid-core/agent-tool-registry/editor/new", onView: function (item) { return setPreview({ item: item, kind: "tool" }); }, editUrlFor: function (item) { return "/admin/core/solid-core/agent-tool-registry/editor/".concat(item.id); }, linkFor: function (id) { return linkForTarget(record === null || record === void 0 ? void 0 : record.agentTools, "agentToolRegistry", id); }, render: function (item) { return _jsx(AgentResourceCardWidget, __assign({}, { rowData: item })); }, renderSettings: function (item) {
                     var _a;
                     return _jsx("div", { className: "agent-editor__link-settings", children: linkSetting("Require approval", (_a = requiresApprovalValues[item.id]) !== null && _a !== void 0 ? _a : false, function (checked) { return setRequiresApprovalValues(function (current) {
                             var _a;
@@ -680,23 +733,23 @@ export function AgentRegistryEditorPage() {
                     var _a, _b, _c, _d, _e, _f;
                     return _jsxs("div", { className: "agent-editor__secret", children: [_jsx("strong", { children: (_b = (_a = item.displayName) !== null && _a !== void 0 ? _a : item.name) !== null && _b !== void 0 ? _b : item.key }), _jsx("span", { children: item.key }), _jsx("p", { children: item.description }), _jsxs("div", { className: "agent-editor__secret-env", children: [_jsx("span", { children: "Process environment" }), _jsx("code", { children: (_e = (_d = (_c = secretEnvVarNames[item.id]) !== null && _c !== void 0 ? _c : link === null || link === void 0 ? void 0 : link.envVarName) !== null && _d !== void 0 ? _d : item.key) !== null && _e !== void 0 ? _e : item.name }), _jsx("button", { type: "button", "aria-label": "Edit environment variable name for ".concat((_f = item.displayName) !== null && _f !== void 0 ? _f : item.key), onClick: function () { return beginSecretEnvVarEdit(item); }, children: _jsx(Pencil, { size: 14 }) })] })] });
                 } }) }
-    ], ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "processes", label: "Processes", content: _jsx(AgentProcessesPanel, { agentId: record.id, agentLabel: (_c = record.name) !== null && _c !== void 0 ? _c : record.title }) }] : []), true), ((record === null || record === void 0 ? void 0 : record.id) ? [
-        ["jobs", "Jobs", (_d = jobs.currentData) === null || _d === void 0 ? void 0 : _d.records],
+    ], ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "processes", label: "Processes", content: _jsx(AgentProcessesPanel, { agentId: record.id, agentLabel: (_k = record.name) !== null && _k !== void 0 ? _k : record.title }) }] : []), true), ((record === null || record === void 0 ? void 0 : record.id) ? [
+        ["jobs", "Jobs", (_l = jobs.currentData) === null || _l === void 0 ? void 0 : _l.records],
     ] : []).map(function (_a) {
         var value = _a[0], label = _a[1], related = _a[2];
         return ({ value: value, label: label, content: _jsxs("section", { className: "agent-editor__section", children: [_jsx("h2", { children: label }), jobs.isLoading || jobs.isFetching ? _jsx("div", { className: "agent-editor__empty", children: "Loading jobs\u2026" })
                         : jobs.isError ? _jsx("div", { className: "agent-editor__empty", children: "Jobs could not be loaded." })
                             : items(related).length ? _jsx("div", { className: "agent-editor__related", children: items(related).map(function (item) { var _a, _b, _c; return _jsxs("article", { children: [_jsx("strong", { children: (_b = (_a = item.name) !== null && _a !== void 0 ? _a : item.title) !== null && _b !== void 0 ? _b : "#".concat(item.id) }), _jsx("span", { children: (_c = item.status) !== null && _c !== void 0 ? _c : "" })] }, item.id); }) })
                                 : _jsxs("div", { className: "agent-editor__empty", children: ["No ", label.toLowerCase(), " for this agent yet."] })] }) });
-    }), true), ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "sessions", label: "Sessions", content: _jsx(AgentSessionsPanel, { agentId: record.id, agentLabel: (_e = record.name) !== null && _e !== void 0 ? _e : record.title }) }] : []), true), ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "embedding", label: "Embedding", content: _jsx(AgentEmbeddingPanel, { agentId: record.id, fields: parseInputs(record.requiredInputs), active: record.status === "active", hubUrl: String((_f = getSettingsMap(settings).solidxAgentHubBackendUrl) !== null && _f !== void 0 ? _f : "") }) }] : []), true);
+    }), true), ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "sessions", label: "Sessions", content: _jsx(AgentSessionsPanel, { agentId: record.id, agentLabel: (_m = record.name) !== null && _m !== void 0 ? _m : record.title }) }] : []), true), ((record === null || record === void 0 ? void 0 : record.id) ? [{ value: "embedding", label: "Embedding", content: _jsx(AgentEmbeddingPanel, { agentId: record.id, fields: parseInputs(record.requiredInputs), active: record.status === "active", hubUrl: String((_o = getSettingsMap(settings).solidxAgentHubBackendUrl) !== null && _o !== void 0 ? _o : "") }) }] : []), true);
     var content = _jsx(SolidTabGroup, { tabs: tabs, value: tab, onValueChange: setTab, className: "agent-editor__tabs", listClassName: "agent-editor__tab-list", panelClassName: "agent-editor__tab-panel" });
-    return _jsxs("main", { className: "agent-editor", children: [_jsxs("header", { className: "agent-editor__header", children: [_jsxs("div", { className: "agent-editor__heading-with-refresh", children: [_jsx("h1", { children: (record === null || record === void 0 ? void 0 : record.id) ? "Edit Agent" : "Create Agent" }), (record === null || record === void 0 ? void 0 : record.id) && _jsx("button", { type: "button", className: "agent-editor__refresh".concat(isFetching ? " is-loading" : ""), "aria-label": "Refresh agent", title: "Refresh agent", disabled: isFetching || updating, onClick: requestRefresh, children: _jsx(RefreshCw, { size: 14 }) })] }), _jsxs("div", { className: "agent-editor__actions", children: [_jsx(SolidButton, { variant: "secondary", leftIcon: _jsx(ArrowLeft, { size: 16 }), onClick: function () { return navigate(-1); }, children: "Back" }), (record === null || record === void 0 ? void 0 : record.id) && _jsx(SolidButton, { variant: "secondary", leftIcon: _jsx(FlaskConical, { size: 16 }), onClick: openAgentTest, children: "Test Agent" }), _jsx(SolidButton, { loading: creating || updating, disabled: isLoading || isFetching || isError || (id !== "new" && !(record === null || record === void 0 ? void 0 : record.id)), onClick: function () { return void save(); }, children: "Save Agent" })] })] }), _jsx(SolidDialog, { open: confirmRefresh, onOpenChange: setConfirmRefresh, header: "Discard unsaved changes?", style: { width: "min(28rem, 94vw)" }, footer: _jsxs(_Fragment, { children: [_jsx(SolidButton, { type: "button", variant: "secondary", onClick: function () { return setConfirmRefresh(false); }, children: "Cancel" }), _jsx(SolidButton, { type: "button", disabled: isFetching, onClick: function () { setConfirmRefresh(false); void refetch(); }, children: "Refresh and discard" })] }), children: _jsx(SolidDialogBody, { children: _jsx("p", { children: "You have unsaved changes. Refreshing will discard them and load the latest agent content." }) }) }), isLoading ? _jsx("div", { className: "agent-editor__empty", children: "Loading agent\u2026" }) : isError || (id !== "new" && !(record === null || record === void 0 ? void 0 : record.id)) ?
+    return _jsxs("main", { className: "agent-editor", children: [_jsxs("header", { className: "agent-editor__header", children: [_jsxs("div", { className: "agent-editor__heading-with-refresh", children: [_jsx("h1", { children: (record === null || record === void 0 ? void 0 : record.id) ? "Edit Agent" : "Create Agent" }), (record === null || record === void 0 ? void 0 : record.id) && _jsx("button", { type: "button", className: "agent-editor__refresh".concat(isFetching ? " is-loading" : ""), "aria-label": "Refresh agent", title: "Refresh agent", disabled: isFetching || updating, onClick: requestRefresh, children: _jsx(RefreshCw, { size: 14 }) })] }), _jsxs("div", { className: "agent-editor__actions", children: [_jsx(SolidButton, { variant: "secondary", leftIcon: _jsx(ArrowLeft, { size: 16 }), onClick: function () { return navigate(-1); }, children: "Back" }), (record === null || record === void 0 ? void 0 : record.id) && _jsx(SolidButton, { variant: "secondary", leftIcon: _jsx(FlaskConical, { size: 16 }), onClick: openAgentTest, children: "Test Agent" }), _jsx(SolidButton, { loading: creating || updating, disabled: creatingTag || isLoading || isFetching || isError || (id !== "new" && !(record === null || record === void 0 ? void 0 : record.id)), onClick: function () { return void save(); }, children: "Save Agent" })] })] }), preview && _jsx(ResourcePreviewDialog, { item: preview.item, kind: preview.kind, onClose: function () { return setPreview(null); } }), _jsx(SolidDialog, { open: confirmRefresh, onOpenChange: setConfirmRefresh, header: "Discard unsaved changes?", style: { width: "min(28rem, 94vw)" }, footer: _jsxs(_Fragment, { children: [_jsx(SolidButton, { type: "button", variant: "secondary", onClick: function () { return setConfirmRefresh(false); }, children: "Cancel" }), _jsx(SolidButton, { type: "button", disabled: isFetching, onClick: function () { setConfirmRefresh(false); void refetch(); }, children: "Refresh and discard" })] }), children: _jsx(SolidDialogBody, { children: _jsx("p", { children: "You have unsaved changes. Refreshing will discard them and load the latest agent content." }) }) }), isLoading ? _jsx("div", { className: "agent-editor__empty", children: "Loading agent\u2026" }) : isError || (id !== "new" && !(record === null || record === void 0 ? void 0 : record.id)) ?
                 _jsx("div", { className: "agent-editor__empty", children: "This agent could not be loaded." }) : (record === null || record === void 0 ? void 0 : record.id) ?
                 _jsx(AgentRegistryAuditPanel, { modelSingularName: "agentRegistry", recordId: record.id, refreshVersion: auditVersion, modelUserKey: record.name, children: content }) : content, _jsx(SolidDialog, { open: Boolean(pendingSecret), onOpenChange: function (open) { if (!open) {
                     setPendingSecret(null);
                     setSecretEnvVarError("");
-                } }, header: "Set secret environment variable", style: { width: "min(34rem, 94vw)" }, footer: _jsxs("div", { className: "agent-editor__secret-dialog-actions", children: [_jsx(SolidButton, { type: "button", variant: "secondary", onClick: function () { setPendingSecret(null); setSecretEnvVarError(""); }, children: "Cancel" }), _jsx(SolidButton, { type: "button", onClick: commitSecretEnvVar, children: "Use secret" })] }), children: _jsx(SolidDialogBody, { className: "agent-editor__secret-dialog-body", children: _jsxs("div", { className: "agent-editor__secret-dialog", children: [_jsxs("p", { children: ["Choose the environment variable name AgentHub will set for ", _jsx("strong", { children: (_h = (_g = pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.displayName) !== null && _g !== void 0 ? _g : pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.name) !== null && _h !== void 0 ? _h : pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.key }), ". The default is the secret name."] }), _jsxs("label", { className: "agent-editor__field", children: [_jsx("span", { children: "Environment variable name" }), _jsx(SolidInput, { autoFocus: true, value: secretEnvVarDraft, "aria-invalid": Boolean(secretEnvVarError), onChange: function (event) { setSecretEnvVarDraft(event.target.value); setSecretEnvVarError(""); } }), secretEnvVarError && _jsx("small", { className: "agent-editor__error", children: secretEnvVarError })] })] }) }) }), (record === null || record === void 0 ? void 0 : record.id) && _jsx(SolidDialog, { open: testAgentOpen, onOpenChange: setTestAgentOpen, onHide: function () { return setTestAgentOpen(false); }, showHeader: false, overlayClassName: "agent-editor__test-dialog-overlay", ariaLabel: "Test ".concat((_j = record.name) !== null && _j !== void 0 ? _j : "SolidX Agent"), className: "agent-editor__test-dialog", style: testAgentWindowMode === "maximized"
+                } }, header: "Set secret environment variable", style: { width: "min(34rem, 94vw)" }, footer: _jsxs("div", { className: "agent-editor__secret-dialog-actions", children: [_jsx(SolidButton, { type: "button", variant: "secondary", onClick: function () { setPendingSecret(null); setSecretEnvVarError(""); }, children: "Cancel" }), _jsx(SolidButton, { type: "button", onClick: commitSecretEnvVar, children: "Use secret" })] }), children: _jsx(SolidDialogBody, { className: "agent-editor__secret-dialog-body", children: _jsxs("div", { className: "agent-editor__secret-dialog", children: [_jsxs("p", { children: ["Choose the environment variable name AgentHub will set for ", _jsx("strong", { children: (_q = (_p = pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.displayName) !== null && _p !== void 0 ? _p : pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.name) !== null && _q !== void 0 ? _q : pendingSecret === null || pendingSecret === void 0 ? void 0 : pendingSecret.key }), ". The default is the secret name."] }), _jsxs("label", { className: "agent-editor__field", children: [_jsx("span", { children: "Environment variable name" }), _jsx(SolidInput, { autoFocus: true, value: secretEnvVarDraft, "aria-invalid": Boolean(secretEnvVarError), onChange: function (event) { setSecretEnvVarDraft(event.target.value); setSecretEnvVarError(""); } }), secretEnvVarError && _jsx("small", { className: "agent-editor__error", children: secretEnvVarError })] })] }) }) }), (record === null || record === void 0 ? void 0 : record.id) && _jsx(SolidDialog, { open: testAgentOpen, onOpenChange: setTestAgentOpen, onHide: function () { return setTestAgentOpen(false); }, showHeader: false, overlayClassName: "agent-editor__test-dialog-overlay", ariaLabel: "Test ".concat((_r = record.name) !== null && _r !== void 0 ? _r : "SolidX Agent"), className: "agent-editor__test-dialog", style: testAgentWindowMode === "maximized"
                     ? { position: "fixed", inset: 16, width: "auto", maxWidth: "none", height: "auto", maxHeight: "none", transform: "none", borderRadius: 14, padding: 0, display: "flex", flexDirection: "column", overflow: "hidden" }
-                    : { position: "fixed", top: 16, right: 16, bottom: 16, left: "auto", width: "min(28rem, calc(100vw - 32px))", maxWidth: "none", height: "auto", maxHeight: "none", transform: "none", borderRadius: 14, padding: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: _jsx("div", { className: "agent-editor__test-dialog-body", children: _jsx(SolidAgentEmbedded, { agentRuntime: "agentHub", agentId: record.id, title: (_k = record.name) !== null && _k !== void 0 ? _k : "SolidX Agent", requiredInputs: parseInputs(record.requiredInputs), height: "100%", className: "agent-editor__test-chat", windowControls: { mode: testAgentWindowMode, onDock: function () { return setTestAgentWindowMode("docked"); }, onMaximize: function () { return setTestAgentWindowMode("maximized"); }, onRestore: function () { return setTestAgentWindowMode("docked"); }, onClose: function () { return setTestAgentOpen(false); } } }) }) })] });
+                    : { position: "fixed", top: 16, right: 16, bottom: 16, left: "auto", width: "min(28rem, calc(100vw - 32px))", maxWidth: "none", height: "auto", maxHeight: "none", transform: "none", borderRadius: 14, padding: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: _jsx("div", { className: "agent-editor__test-dialog-body", children: _jsx(SolidAgentEmbedded, { agentRuntime: "agentHub", agentId: record.id, title: (_s = record.name) !== null && _s !== void 0 ? _s : "SolidX Agent", requiredInputs: parseInputs(record.requiredInputs), height: "100%", className: "agent-editor__test-chat", windowControls: { mode: testAgentWindowMode, onDock: function () { return setTestAgentWindowMode("docked"); }, onMaximize: function () { return setTestAgentWindowMode("maximized"); }, onRestore: function () { return setTestAgentWindowMode("docked"); }, onClose: function () { return setTestAgentOpen(false); } } }) }) })] });
 }
 //# sourceMappingURL=AgentRegistryEditorPage.js.map