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

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

@@ -1,10 +1,13 @@
 import React from "react";
-import { ArrowLeft, Plus, RefreshCw, X } from "lucide-react";
+import { ArrowLeft, RefreshCw } from "lucide-react";
 import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { createSolidEntityApi } from "../../../../redux/api/solidEntityApi";
 import { showToast } from "../../../../redux/features/toastSlice";
+import { solidPatch } from "../../../../http/solidHttp";
 import { AgentRegistryAuditPanel } from "./AgentRegistryAuditPanel";
+import { AgentHubTagsField, agentHubTagsFrom, agentHubTagsPayload, type AgentHubTag } from "./AgentHubTagsField";
+import { AgentToolActivationDialog } from "./AgentToolActivationDialog";
 import { AgentToolSessionsPanel } from "../../../../components/core/extension/solid-core/agentToolRegistry/AgentToolSessionsPanel";
 import { AgentRegistryCardWidget } from "../../../../components/core/extension/solid-core/agentRegistry/card/AgentRegistryCardWidget";
 import { SolidButton, SolidCodeEditor, SolidDialog, SolidDialogBody, SolidIconPicker, SolidInput, SolidTabGroup } from "../../../../components/shad-cn-ui";
@@ -19,11 +22,12 @@ type ToolRecord = {
   name?: string;
   iconName?: string | null;
   description?: string;
-  tags?: unknown;
+  tags?: AgentHubTag[];
   type?: string;
   status?: string | null;
   lastLoadError?: string | null;
   sourceCode?: string;
+  checksum?: string;
   agentTools?: AgentToolLink[] | AgentToolLink | null;
 };
 
@@ -38,17 +42,6 @@ function extractEntityRecord(response: unknown): Record<string, any> | undefined
   return candidate && typeof candidate === "object" ? candidate as Record<string, any> : undefined;
 }
 
-function parseTags(value: unknown): string[] {
-  if (Array.isArray(value)) return value.map(String).map((tag) => tag.trim()).filter(Boolean);
-  if (typeof value !== "string" || !value.trim()) return [];
-  try {
-    const parsed = JSON.parse(value);
-    return Array.isArray(parsed) ? parsed.map(String).map((tag) => tag.trim()).filter(Boolean) : [];
-  } catch {
-    return value === "{}" ? [] : value.split(",").map((tag) => tag.trim()).filter(Boolean);
-  }
-}
-
 async function sha256Hex(value: string): Promise<string> {
   const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(value));
   return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -86,7 +79,7 @@ export function AgentToolRegistryEditorPage() {
   const entityApi = React.useMemo(() => createSolidEntityApi("agentToolRegistry"), []);
   const { useCreateSolidEntityMutation, useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation } = entityApi;
   const { data: response, isLoading, isFetching, refetch } = useGetSolidEntityByIdQuery(
-    { id, qs: "populate[0]=agentTools&populate[1]=agentTools.agentRegistry" },
+    { id, qs: "populate[0]=agentTools&populate[1]=agentTools.agentRegistry&populate[2]=tags" },
     { skip: !id || id === "new" },
   );
   const [createTool, { isLoading: isCreating }] = useCreateSolidEntityMutation();
@@ -98,44 +91,38 @@ export function AgentToolRegistryEditorPage() {
   const [description, setDescription] = React.useState("");
   const [type, setType] = React.useState("custom");
   const [sourceCode, setSourceCode] = React.useState("");
-  const [tags, setTags] = React.useState<string[]>([]);
-  const [tagDraft, setTagDraft] = React.useState("");
+  const [tags, setTags] = React.useState<AgentHubTag[]>([]);
+  const [creatingTag, setCreatingTag] = React.useState(false);
   const [fieldErrors, setFieldErrors] = React.useState<Record<string, string>>({});
   const [auditRefreshVersion, setAuditRefreshVersion] = React.useState(0);
   const [confirmRefresh, setConfirmRefresh] = React.useState(false);
+  const [activationOpen, setActivationOpen] = React.useState(false);
+  const [activationTool, setActivationTool] = React.useState<{ id: number; checksum: string; name: string } | null>(null);
+  const preparingActivation = React.useRef(false);
   const baseline = React.useRef("");
 
-  const currentForm = () => JSON.stringify({ name, iconName, description, type, sourceCode, tags, tagDraft });
+  const currentForm = () => JSON.stringify({ name, iconName, description, type, sourceCode, tags });
 
   React.useEffect(() => {
-    const nextTags = parseTags(record?.tags);
+    const nextTags = agentHubTagsFrom(record?.tags);
     setName(record?.name ?? "");
     setIconName(record?.iconName ?? "");
     setDescription(record?.description ?? "");
     setType(record?.type ?? "custom");
     setSourceCode(record?.sourceCode ?? "");
     setTags(nextTags);
-    setTagDraft("");
-    baseline.current = JSON.stringify({ name: record?.name ?? "", iconName: record?.iconName ?? "", description: record?.description ?? "", type: record?.type ?? "custom", sourceCode: record?.sourceCode ?? "", tags: nextTags, tagDraft: "" });
+    baseline.current = JSON.stringify({ name: record?.name ?? "", iconName: record?.iconName ?? "", description: record?.description ?? "", type: record?.type ?? "custom", sourceCode: record?.sourceCode ?? "", tags: nextTags });
   }, [record]);
 
   const isReadOnly = record?.type === "solidx";
   const isDirty = Boolean(record?.id) && currentForm() !== baseline.current;
   const requestRefresh = () => isDirty ? setConfirmRefresh(true) : void refetch();
 
-  const addTag = () => {
-    const next = tagDraft.trim();
-    if (!next) return;
-    if (!tags.some((tag) => tag.toLowerCase() === next.toLowerCase())) setTags((current) => [...current, next]);
-    setTagDraft("");
-    setFieldErrors((current) => ({ ...current, tags: "" }));
-  };
-
-  const save = async (nextStatus?: "active" | "inactive") => {
+  const save = async (nextStatus?: "inactive") => {
+    if (creatingTag) return;
     const nextErrors: Record<string, string> = {};
     if (!name.trim()) nextErrors.name = "Name is required.";
     if (!description.trim()) nextErrors.description = "Description is required.";
-    if (tags.length === 0) nextErrors.tags = "At least one tag is required.";
     if (!type.trim()) nextErrors.type = "Tool type is required.";
     if (!sourceCode.trim()) nextErrors.sourceCode = "Tool source code is required.";
 
@@ -147,19 +134,18 @@ export function AgentToolRegistryEditorPage() {
     }
     const payload = {
       name: name.trim(), iconName: iconName || null, description: description.trim(), type,
-      sourceCode, tags: JSON.stringify(tags),
-      ...(type === "custom" ? { checksum: await sha256Hex(sourceCode) } : {}),
-      // Status is required by the agentToolRegistry metadata, including partial
-      // updates. Preserve the current lifecycle state for ordinary saves.
-      status: nextStatus ?? (record?.status === "load_failed" ? "active" : record?.status ?? "active"),
-      ...((nextStatus === "active" || (!nextStatus && record?.status === "load_failed")) ? { lastLoadError: null } : {}),
+      sourceCode, ...agentHubTagsPayload(tags),
+      ...(["custom", "thirdparty"].includes(type) ? { checksum: await sha256Hex(sourceCode) } : {}),
+      status: nextStatus ?? (record && (sourceCode !== record.sourceCode || name.trim() !== record.name || type !== record.type)
+        ? "inactive" : record?.status ?? "inactive"),
     };
     try {
       if (record?.id) {
-        await updateTool({ id: record.id, data: payload }).unwrap();
+        const result = await updateTool({ id: record.id, data: payload }).unwrap();
         dispatch(showToast({ severity: "success", summary: nextStatus ? "Tool status updated" : "Saved", detail: nextStatus ? `Tool moved to ${nextStatus}. Restart linked agent processes to apply the change.` : "Tool updated successfully." }));
         setAuditRefreshVersion((version) => version + 1);
         refetch();
+        return (extractEntityRecord(result) ?? { ...record, ...payload }) as ToolRecord;
       } else {
         const result: any = await createTool(payload).unwrap();
         const createdId = result?.data?.id ?? result?.id;
@@ -170,7 +156,7 @@ export function AgentToolRegistryEditorPage() {
       const errorDetail = getSaveErrorMessage(error);
       const serverFieldErrors: Record<string, string> = {};
       if (/required|not be empty|cannot be empty|should not be empty/i.test(errorDetail)) {
-        for (const field of ["name", "description", "tags", "type", "sourceCode"]) {
+        for (const field of ["name", "description", "type", "sourceCode"]) {
           if (!new RegExp(`\\b${field}\\b`, "i").test(errorDetail)) continue;
           const label = field === "sourceCode" ? "Tool source code" : field[0].toUpperCase() + field.slice(1);
           serverFieldErrors[field] = `${label} is required.`;
@@ -184,6 +170,23 @@ export function AgentToolRegistryEditorPage() {
     }
   };
 
+  const beginActivation = async () => {
+    if (isReadOnly) return;
+    if (!record || activationOpen || isSaving || preparingActivation.current) return;
+    preparingActivation.current = true;
+    try {
+      const saved = isDirty || record.status === "load_failed" ? await save("inactive") : record;
+      if (!saved?.id) return;
+      const checksum = await sha256Hex(saved.sourceCode ?? sourceCode);
+      setActivationTool({ id: saved.id, checksum, name: saved.name ?? name });
+      setActivationOpen(true);
+    } catch {
+      dispatch(showToast({ severity: "error", summary: "Activation failed", detail: "Could not prepare the saved tool source for checks." }));
+    } finally {
+      preparingActivation.current = false;
+    }
+  };
+
   const agents = React.useMemo(() => {
     const relatedTools = record?.agentTools;
     const links = Array.isArray(relatedTools) ? relatedTools : relatedTools ? [relatedTools] : [];
@@ -212,36 +215,33 @@ export function AgentToolRegistryEditorPage() {
         <div className="agent-tool-editor__field"><span>Icon</span><SolidIconPicker value={iconName} onChange={setIconName} /></div>
         <label className="agent-tool-editor__field"><span>Description <b>*</b></span><SolidInput value={description} aria-invalid={Boolean(fieldErrors.description)} aria-describedby={fieldErrors.description ? "agent-tool-description-error" : undefined} className={fieldErrors.description ? "agent-tool-editor__input--invalid" : undefined} onChange={(e) => { setDescription(e.target.value); setFieldErrors((current) => ({ ...current, description: "" })); }} />{fieldErrors.description && <small id="agent-tool-description-error" className="agent-tool-editor__field-error">{fieldErrors.description}</small>}</label>
       </div>
+      {!record?.id && <label className="agent-tool-editor__field"><span>Tool status</span><select value="inactive" disabled aria-label="Tool status"><option value="inactive">Inactive</option></select><small>New tools start inactive. Run configuration and initialization checks to activate.</small></label>}
       <label className="agent-tool-editor__field"><span>Tool type <b>*</b></span><select value={type} aria-invalid={Boolean(fieldErrors.type)} aria-describedby={fieldErrors.type ? "agent-tool-type-error" : undefined} className={fieldErrors.type ? "agent-tool-editor__input--invalid" : undefined} onChange={(e) => { setType(e.target.value); setFieldErrors((current) => ({ ...current, type: "" })); }}>
         {isReadOnly && <option value="solidx">SolidX</option>}<option value="thirdparty">Third Party</option><option value="custom">Custom</option>
       </select>{fieldErrors.type && <small id="agent-tool-type-error" className="agent-tool-editor__field-error">{fieldErrors.type}</small>}</label>
-      <div className="agent-tool-editor__field"><span>Tags <b>*</b></span><div className={`agent-tool-editor__tag-input${fieldErrors.tags ? " agent-tool-editor__tag-input--invalid" : ""}`}>
-        {tags.map((tag, index) => <span className="agent-tool-editor__tag" key={`${tag}-${index}`}>{tag}<button type="button" aria-label={`Remove ${tag}`} onClick={() => setTags((current) => { const next = current.filter((_, i) => i !== index); if (next.length) setFieldErrors((errors) => ({ ...errors, tags: "" })); return next; })}><X size={13} /></button></span>)}
-        <input value={tagDraft} aria-label="Add a tag" placeholder="Type a tag and press Enter" onChange={(e) => setTagDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addTag(); } }} />
-        <SolidButton type="button" variant="secondary" size="small" onClick={addTag}><Plus size={14} /> Add</SolidButton>
-      </div>{fieldErrors.tags && <small className="agent-tool-editor__field-error">{fieldErrors.tags}</small>}<small>Tags are saved as a JSON array.</small></div>
+      <AgentHubTagsField value={tags} onChange={setTags} disabled={isReadOnly || isCreating || isSaving} onBusyChange={setCreatingTag} />
       {record?.id && <section className="agent-tool-editor__workflow" aria-labelledby="agent-tool-lifecycle-title">
-        <div className="agent-tool-editor__workflow-head"><div><h2 id="agent-tool-lifecycle-title">Tool lifecycle</h2><p>Activate or deactivate this tool for linked agents. Load failures are reported by AgentHub.</p></div></div>
-        <div className="agent-tool-editor__workflow-stages" aria-label={`Current tool stage: ${(record.status ?? "active").replace(/[_-]+/g, " ")}`}>
+        <div className="agent-tool-editor__workflow-head"><div><h2 id="agent-tool-lifecycle-title">Tool lifecycle</h2><p>Configuration and initialization must pass before this tool can be activated.</p></div></div>
+        <div className="agent-tool-editor__workflow-stages" aria-label={`Current tool stage: ${(record.status ?? "inactive").replace(/[_-]+/g, " ")}`}>
           {([ ["active", "Active", "Enabled for loading into linked agents."], ["inactive", "Inactive", "Not loaded for linked agents."], ["load_failed", "Load failed", "AgentHub could not load this tool."] ] as const).map(([value, label, description], index) => {
-            const currentStatus = record.status ?? "active";
+            const currentStatus = record.status ?? "inactive";
             const isCurrent = currentStatus === value;
             const canRetry = value === "load_failed" && isCurrent;
-            const disabled = isCreating || isSaving || (!canRetry && (value === "load_failed" || isCurrent));
+            const disabled = isReadOnly || activationOpen || isCreating || isSaving || (!canRetry && (value === "load_failed" || isCurrent));
             return <React.Fragment key={value}>
               {index > 0 && <div className="agent-tool-editor__workflow-connector" aria-hidden="true" />}
               <button type="button" className={`agent-tool-editor__workflow-stage agent-tool-editor__workflow-stage--${value}${isCurrent ? " is-current" : ""}`}
                 aria-current={isCurrent ? "step" : undefined} aria-pressed={isCurrent} disabled={disabled}
-                onClick={() => void save(value === "load_failed" ? "active" : value)}>
+                onClick={() => value === "inactive" ? void save("inactive") : void beginActivation()}>
                 <span className="agent-tool-editor__workflow-mark">{index + 1}</span>
-                <span className="agent-tool-editor__workflow-copy"><strong>{label}</strong><small>{description}</small><small className="agent-tool-editor__workflow-cta">{canRetry ? "Click to retry loading" : isCurrent ? "Current stage" : value === "load_failed" ? "Set automatically by AgentHub" : "Click to move to this stage"}</small></span>
+                <span className="agent-tool-editor__workflow-copy"><strong>{label}</strong><small>{description}</small><small className="agent-tool-editor__workflow-cta">{canRetry ? "Run checks and retry activation" : isCurrent ? "Current stage" : value === "load_failed" ? "Set automatically by AgentHub" : value === "active" ? "Run checks to activate" : "Click to deactivate"}</small></span>
                 {isCurrent && <span className="agent-tool-editor__workflow-current">Current</span>}
               </button>
             </React.Fragment>;
           })}
         </div>
-        {record.status === "load_failed" && <small className="agent-tool-editor__workflow-hint">Fix the source or checksum first. Retrying saves the current tool configuration and clears the reported error; restart linked agent processes to load the updated tool.</small>}
-        <small className="agent-tool-editor__workflow-hint">Changing stage saves the current tool configuration. Restart linked agent processes to apply the change.</small>
+        {record.status === "load_failed" && <small className="agent-tool-editor__workflow-hint">Fix the source or checksum, then run configuration and initialization checks before retrying activation.</small>}
+        <small className="agent-tool-editor__workflow-hint">Activation checks use the saved tool configuration. Restart linked agent processes to apply status changes.</small>
       </section>}
     </fieldset> },
     { value: "tool", label: "Tool", content: <div className="agent-tool-editor__tool">
@@ -260,12 +260,20 @@ export function AgentToolRegistryEditorPage() {
   return <main className="agent-tool-editor">
     <header className="agent-tool-editor__header"><div><div className="agent-tool-editor__heading-with-refresh"><h1>{record ? "Edit Tool" : "Create Tool"}</h1>{record?.id && <button type="button" className={`agent-tool-editor__refresh${isFetching ? " is-loading" : ""}`} aria-label="Refresh tool" title="Refresh tool" disabled={isFetching || isSaving} onClick={requestRefresh}><RefreshCw size={14} /></button>}</div></div><div className="agent-tool-editor__actions">
       <SolidButton variant="secondary" leftIcon={<ArrowLeft size={16} />} onClick={() => navigate(-1)}>Back</SolidButton>
-      {!isReadOnly && <SolidButton loading={isCreating || isSaving} onClick={() => void save()}>Save Tool</SolidButton>}
+      {!isReadOnly && <SolidButton disabled={activationOpen || creatingTag} loading={isCreating || isSaving} onClick={() => void save()}>Save Tool</SolidButton>}
     </div></header>
     <SolidDialog open={confirmRefresh} onOpenChange={setConfirmRefresh} header="Discard unsaved changes?" style={{ width: "min(28rem, 94vw)" }}
       footer={<><SolidButton type="button" variant="secondary" onClick={() => setConfirmRefresh(false)}>Cancel</SolidButton><SolidButton type="button" disabled={isFetching} onClick={() => { setConfirmRefresh(false); void refetch(); }}>Refresh and discard</SolidButton></>}>
       <SolidDialogBody><p>You have unsaved changes. Refreshing will discard them and load the latest tool content.</p></SolidDialogBody>
     </SolidDialog>
+    {activationOpen && activationTool && <AgentToolActivationDialog open={activationOpen} onOpenChange={setActivationOpen}
+      toolId={activationTool.id} checksum={activationTool.checksum} toolName={activationTool.name}
+      onActivated={async () => {
+        await solidPatch(`/agent-tool-registry/${activationTool.id}`, { status: "active", checksum: activationTool.checksum });
+        setAuditRefreshVersion((version) => version + 1);
+        void refetch();
+        dispatch(showToast({ severity: "success", summary: "Tool activated", detail: "Configuration and initialization checks passed." }));
+      }} />}
     {isLoading ? <div className="agent-tool-editor__loading">Loading tool…</div> : record?.id ? (
       <AgentRegistryAuditPanel modelSingularName="agentToolRegistry" recordId={record.id} refreshVersion={auditRefreshVersion} modelUserKey={record.name}>
         <SolidTabGroup tabs={tabs} value={activeTab} onValueChange={setActiveTab} className="agent-tool-editor__tabs" listClassName="agent-tool-editor__tab-list" panelClassName="agent-tool-editor__tab-panel" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidxai/core-ui",
-  "version": "0.1.19",
+  "version": "0.1.20-beta.0",
   "scripts": {
     "build:tailwind": "tailwindcss -i ./src/resources/solid-tailwind.css -o ./src/resources/solid-tailwind-generated.css -c ./tailwind.config.js --minify",
     "prebuild": "npm run build:tailwind && npm run copy-resources && npm run copy-styles",