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

package/dist/routes/pages/admin/core/AgentHubTagsField.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Plus, Search, X } from "lucide-react";
+import { createSolidEntityApi } from "../../../../redux/api/solidEntityApi";
+import { SolidButton } from "../../../../components/shad-cn-ui/SolidButton";
+import "./AgentHubTagsField.css";
+
+export type AgentHubTag = { id: number; name: string };
+
+export function agentHubTagsFrom(value: unknown): AgentHubTag[] {
+  if (!Array.isArray(value)) return [];
+  const seen = new Set<number>();
+  return value.flatMap((tag) => {
+    const id = Number(tag?.id);
+    if (!Number.isInteger(id) || id <= 0 || typeof tag?.name !== "string" || seen.has(id)) return [];
+    seen.add(id);
+    return [{ id, name: tag.name }];
+  });
+}
+
+export function agentHubTagsPayload(tags: AgentHubTag[]) {
+  return { tagsIds: tags.map((tag) => tag.id), tagsCommand: tags.length ? "set" : "clear" };
+}
+
+const tagApi = createSolidEntityApi("agentHubTag");
+
+export function AgentHubTagsField({ value, onChange, disabled = false, onBusyChange }: {
+  value: AgentHubTag[];
+  onChange: (tags: AgentHubTag[]) => void;
+  disabled?: boolean;
+  onBusyChange?: (busy: boolean) => void;
+}) {
+  const { data, isFetching, isError, refetch } = tagApi.useGetSolidEntitiesQuery(
+    "offset=0&limit=1000&fields[0]=id&fields[1]=name", { skip: disabled });
+  const [createTag, { isLoading: isCreating }] = tagApi.useCreateSolidEntityMutation();
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const [error, setError] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const fieldId = React.useId();
+  const name = query.trim();
+  const catalog = agentHubTagsFrom(data?.records);
+  const exact = [...catalog, ...value].find((tag) => tag.name.toLowerCase() === name.toLowerCase());
+  const options = catalog.filter((tag) => !value.some((selected) => selected.id === tag.id)
+    && tag.name.toLowerCase().includes(name.toLowerCase())).sort((a, b) => a.name.localeCompare(b.name));
+  const canCreate = Boolean(name && !exact && !isFetching && !isError);
+
+  const select = (tag: AgentHubTag) => {
+    if (!value.some((selected) => selected.id === tag.id)) onChange([...value, tag]);
+    setQuery("");
+    setActiveIndex(-1);
+    setError("");
+    inputRef.current?.focus();
+  };
+
+  const add = async () => {
+    if (disabled || isCreating || !name) return;
+    if (exact) { select(exact); return; }
+    if (!canCreate) return;
+    setError("");
+    onBusyChange?.(true);
+    try {
+      let result = await createTag({ name }).unwrap();
+      for (let depth = 0; depth < 3 && result && !result.id; depth += 1) result = result.data;
+      const created = agentHubTagsFrom([result])[0];
+      if (!created) throw new Error("The tag could not be loaded. Search for it again.");
+      select(created);
+    } catch (failure: any) {
+      const refreshed = await refetch();
+      const existing = agentHubTagsFrom(refreshed.data?.records).find((tag) => tag.name.toLowerCase() === name.toLowerCase());
+      if (existing) select(existing);
+      else {
+        const message = failure?.data?.data?.message ?? failure?.data?.message ?? failure?.message;
+        setError(typeof message === "string" ? message : "Could not create this tag. Try again.");
+      }
+    } finally {
+      onBusyChange?.(false);
+    }
+  };
+
+  return <div className="agent-hub-tags" onBlur={(event) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false);
+  }}>
+    <label htmlFor={fieldId}>Tags <span className="agent-hub-tags__count">{value.length}</span></label>
+    <div className="agent-hub-tags__selection">
+      {value.map((tag) => <span className="agent-hub-tags__chip" key={tag.id}>{tag.name}
+        {!disabled && <button type="button" disabled={isCreating} aria-label={`Remove ${tag.name}`}
+          onClick={() => onChange(value.filter((selected) => selected.id !== tag.id))}><X size={13} /></button>}
+      </span>)}
+      {!value.length && <span className="agent-hub-tags__empty">No tags selected</span>}
+    </div>
+    {!disabled && <>
+      <div className="agent-hub-tags__search">
+        <Search size={16} aria-hidden="true" />
+        <input ref={inputRef} id={fieldId} role="combobox" autoComplete="off" aria-expanded={open}
+          aria-controls={`${fieldId}-options`} aria-autocomplete="list"
+          aria-activedescendant={open && options[activeIndex] ? `${fieldId}-option-${activeIndex}` : undefined}
+          disabled={isCreating} value={query} placeholder="Search or create tags…"
+          onFocus={() => setOpen(true)}
+          onChange={(event) => { setQuery(event.target.value); setActiveIndex(-1); setOpen(true); setError(""); }}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") { event.preventDefault(); setOpen(false); }
+            if (event.key === "ArrowDown") { event.preventDefault(); setOpen(true); setActiveIndex((index) => Math.min(index + 1, options.length - 1)); }
+            if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((index) => Math.max(index - 1, 0)); }
+            if (event.key === "Enter") { event.preventDefault(); if (open && options[activeIndex]) select(options[activeIndex]); else void add(); }
+          }} />
+        {name && <SolidButton variant="secondary" size="small" loading={isCreating}
+          disabled={!exact && !canCreate} onClick={() => void add()} leftIcon={<Plus size={14} />}>
+          {exact ? "Select" : "Create tag"}
+        </SolidButton>}
+      </div>
+      {isError && <div className="agent-hub-tags__error" role="alert">Tags could not be loaded. <button type="button" onClick={() => void refetch()}>Retry</button></div>}
+      {open && <div className="agent-hub-tags__options" id={`${fieldId}-options`} role="listbox" aria-label="Available tags">
+        {isFetching ? <div className="agent-hub-tags__empty" role="status">Loading tags…</div>
+          : options.length ? options.map((tag, index) => <button key={tag.id} id={`${fieldId}-option-${index}`}
+            type="button" role="option" aria-selected={false} disabled={isCreating}
+            className={activeIndex === index ? "is-active" : undefined}
+            onMouseDown={(event) => event.preventDefault()} onClick={() => select(tag)}>{tag.name}<Plus size={14} /></button>)
+            : !isError && <div className="agent-hub-tags__empty">{exact ? "Tag already selected." : canCreate ? `Create “${name}” to add it.` : "No tags available. Type a name to create one."}</div>}
+      </div>}
+      {error && <small className="agent-hub-tags__error" role="alert">{error}</small>}
+      <small className="agent-hub-tags__hint">Tags are shared across agents, skills, and tools.</small>
+    </>}
+  </div>;
+}

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

@@ -75,6 +75,13 @@
 .agent-editor__card-content { min-width:0; }
 .agent-editor__card-content>article { min-height:17rem; height:auto; }
 .agent-editor__linked-card>button { position:absolute; top:.3rem; right:.3rem; background:var(--surface-card,var(--card)); }
+.agent-editor__linked-card>.agent-editor__resource-menu-trigger { width:2rem; min-height:2rem; }
+.agent-editor__linked-card>.agent-editor__resource-menu-trigger:hover { color:var(--text-color,var(--foreground)); background:var(--surface-hover,#f2f3f4); }
+.agent-editor__resource-menu-trigger:focus-visible { outline:2px solid var(--primary-color,var(--primary)); outline-offset:1px; }
+.agent-editor__resource-menu .solid-dropdown-menu-item { gap:.5rem; }
+.agent-editor__resource-menu .agent-editor__resource-delete { color:#dc2626; }
+.agent-editor__resource-preview-body { min-height:0; max-height:72vh; overflow:auto; }
+.agent-editor__resource-preview-body img { max-width:100%; height:auto; }
 .agent-editor__secret { padding:1rem; }
 .agent-editor__secret span { display:block; color:var(--text-color-secondary,var(--muted-foreground)); font-size:.8rem; }
 .agent-editor__link-settings { padding:.55rem .75rem .7rem; border-top:1px solid var(--surface-border,var(--border)); background:var(--surface-ground,var(--background)); }

package/dist/routes/pages/admin/core/AgentRegistryEditorPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentRegistryEditorPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/AgentRegistryEditorPage.tsx"],"names":[],"mappings":"AAmBA,OAAO,+BAA+B,CAAC;AA0PvC,wBAAgB,uBAAuB,4CAwWtC"}
+{"version":3,"file":"AgentRegistryEditorPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/AgentRegistryEditorPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,+BAA+B,CAAC;AAwRvC,wBAAgB,uBAAuB,4CAkXtC"}

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

@@ -57,7 +57,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, ChevronDown, 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 +65,15 @@ import { useGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi
 import { getSettingsMap } from "../../../../helpers/settingsPayload";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { AgentRegistryAuditPanel } from "./AgentRegistryAuditPanel";
+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 { 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 = {
@@ -169,7 +171,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 +181,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 +221,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),
@@ -273,8 +275,23 @@ 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 available = options.filter(function (item) {
@@ -286,8 +303,8 @@ function LinkPicker(_a) {
                             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() {
@@ -309,8 +326,8 @@ export function AgentRegistryEditorPage() {
         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 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;
@@ -337,33 +354,36 @@ export function AgentRegistryEditorPage() {
             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 _s = React.useState(null), preview = _s[0], setPreview = _s[1];
+    var _t = React.useState("maximized"), testAgentWindowMode = _t[0], setTestAgentWindowMode = _t[1];
+    var _u = React.useState(""), name = _u[0], setName = _u[1];
+    var _v = React.useState(""), title = _v[0], setTitle = _v[1];
+    var _w = React.useState(""), description = _w[0], setDescription = _w[1];
+    var _x = React.useState(""), iconName = _x[0], setIconName = _x[1];
+    var _y = React.useState([]), inputs = _y[0], setInputs = _y[1];
+    var _z = React.useState(""), reasoningModelKey = _z[0], setReasoningModelKey = _z[1];
+    var _0 = React.useState(""), fastModelKey = _0[0], setFastModelKey = _0[1];
+    var _1 = React.useState(""), systemPrompt = _1[0], setSystemPrompt = _1[1];
+    var _2 = React.useState(100), stepLimit = _2[0], setStepLimit = _2[1];
+    var _3 = React.useState(20), turnStepLimit = _3[0], setTurnStepLimit = _3[1];
+    var _4 = React.useState(3), costLimit = _4[0], setCostLimit = _4[1];
+    var _5 = React.useState([]), tags = _5[0], setTags = _5[1];
+    var _6 = React.useState(false), creatingTag = _6[0], setCreatingTag = _6[1];
+    var _7 = React.useState([]), skillIds = _7[0], setSkillIds = _7[1];
+    var _8 = React.useState([]), toolIds = _8[0], setToolIds = _8[1];
+    var _9 = React.useState([]), roleIds = _9[0], setRoleIds = _9[1];
+    var _10 = React.useState([]), secretIds = _10[0], setSecretIds = _10[1];
+    var _11 = React.useState({}), alwaysIncludeValues = _11[0], setAlwaysIncludeValues = _11[1];
+    var _12 = React.useState({}), requiresApprovalValues = _12[0], setRequiresApprovalValues = _12[1];
+    var _13 = React.useState({}), secretEnvVarNames = _13[0], setSecretEnvVarNames = _13[1];
+    var _14 = React.useState(null), pendingSecret = _14[0], setPendingSecret = _14[1];
+    var _15 = React.useState(""), secretEnvVarDraft = _15[0], setSecretEnvVarDraft = _15[1];
+    var _16 = React.useState(""), secretEnvVarError = _16[0], setSecretEnvVarError = _16[1];
+    var _17 = React.useState({}), errors = _17[0], setErrors = _17[1];
+    var _18 = React.useState(0), auditVersion = _18[0], setAuditVersion = _18[1];
+    var _19 = React.useState(false), confirmRefresh = _19[0], setConfirmRefresh = _19[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 +400,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));
@@ -414,7 +435,7 @@ export function AgentRegistryEditorPage() {
         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 : {};
     }
-    catch ( /* Invalid configuration has no enabled providers. */_17) { /* Invalid configuration has no enabled providers. */ }
+    catch ( /* Invalid configuration has no enabled providers. */_20) { /* 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 ({
@@ -498,6 +519,8 @@ export function AgentRegistryEditorPage() {
         return __generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
+                    if (creatingTag)
+                        return [2 /*return*/];
                     next = {};
                     if (!name.trim())
                         next.name = "Name is required.";
@@ -521,17 +544,7 @@ 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",
-                    };
+                    payload = __assign(__assign({ 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) }, 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:
@@ -639,7 +652,7 @@ export function AgentRegistryEditorPage() {
     };
     var agentStatus = (_b = record === null || record === void 0 ? void 0 : record.status) !== null && _b !== void 0 ? _b : "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"] })] })
+        { 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: "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) {
                                     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);
@@ -654,14 +667,14 @@ export function AgentRegistryEditorPage() {
                                     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: "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;
@@ -690,7 +703,7 @@ export function AgentRegistryEditorPage() {
                                 : _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);
     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);