@getcatalystiq/agent-plane-ui 0.1.18 → 0.1.19

package/dist/editor.d.ts

@@ -28,4 +28,53 @@ interface PluginEditorPageProps {
 }
 declare function PluginEditorPage({ marketplaceId, pluginName }: PluginEditorPageProps): react_jsx_runtime.JSX.Element;
 
-export { FileTreeEditor, type FileTreeEditorProps, type FlatFile, PluginEditorPage, type PluginEditorPageProps };
+interface Agent {
+    id: string;
+    soul_md: string | null;
+    identity_md: string | null;
+    style_md: string | null;
+    agents_md: string | null;
+    heartbeat_md: string | null;
+    user_template_md: string | null;
+    examples_good_md: string | null;
+    examples_bad_md: string | null;
+}
+interface AgentIdentityTabProps {
+    agent: Agent;
+    /**
+     * The FileTreeEditor component from the /editor entry point.
+     * Pass it as a prop to keep CodeMirror out of the core bundle.
+     */
+    FileTreeEditor: React.ComponentType<{
+        initialFiles: FlatFile[];
+        onSave: (files: FlatFile[]) => Promise<void>;
+        title?: string;
+        saveLabel?: string;
+        addFolderLabel?: string;
+        newFileTemplate?: {
+            filename: string;
+            content: string;
+        };
+        savedVersion?: number;
+    }>;
+    /** Called after a successful save so the host can refresh data. */
+    onSaved?: () => void;
+    /** Generate a SoulSpec for this agent. Returns a map of field-name/path to content. */
+    onGenerateSoul?: () => Promise<{
+        files: Record<string, string>;
+    }>;
+    /** Import a SoulSpec from the ClawSouls registry. */
+    onImportSoul?: (ref: string) => Promise<{
+        files: Record<string, string>;
+    }>;
+    /** Export the current SoulSpec as JSON. Returns file map + agent name. */
+    onExportSoul?: () => Promise<{
+        files: Record<string, string>;
+        name: string;
+    }>;
+    /** Publish the SoulSpec to the ClawSouls registry. */
+    onPublishSoul?: (owner: string) => Promise<void>;
+}
+declare function AgentIdentityTab({ agent, FileTreeEditor, onSaved, onGenerateSoul, onImportSoul, onExportSoul, onPublishSoul, }: AgentIdentityTabProps): react_jsx_runtime.JSX.Element;
+
+export { AgentIdentityTab, type AgentIdentityTabProps, FileTreeEditor, type FileTreeEditorProps, type FlatFile, PluginEditorPage, type PluginEditorPageProps };

package/dist/editor.js

@@ -1,4 +1,4 @@
-import { Badge, Button, Input, useNavigation, useAgentPlaneClient, useApi, Skeleton, Card, CardHeader, CardTitle, CardContent } from './chunk-P4N2P42X.js';
+import { Badge, Button, Input, useNavigation, useAgentPlaneClient, useApi, Skeleton, Card, CardHeader, CardTitle, CardContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, FormField, DialogFooter } from './chunk-OOBDCC6Q.js';
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
@@ -542,5 +542,274 @@ function PluginEditorPage({ marketplaceId, pluginName }) {
     ] })
   ] });
 }
+var FILE_MAP = [
+  { path: "SOUL.md", field: "soul_md" },
+  { path: "IDENTITY.md", field: "identity_md" },
+  { path: "STYLE.md", field: "style_md" },
+  { path: "AGENTS.md", field: "agents_md" },
+  { path: "HEARTBEAT.md", field: "heartbeat_md" },
+  { path: "USER_TEMPLATE.md", field: "user_template_md" },
+  { path: "examples/good-outputs.md", field: "examples_good_md" },
+  { path: "examples/bad-outputs.md", field: "examples_bad_md" }
+];
+function agentToFiles(agent) {
+  const files = [];
+  for (const { path, field } of FILE_MAP) {
+    const value = agent[field];
+    if (typeof value === "string" && value.length > 0) {
+      files.push({ path, content: value });
+    }
+  }
+  return files;
+}
+function filesToPayload(files) {
+  const payload = {};
+  for (const { path, field } of FILE_MAP) {
+    const file = files.find((f) => f.path === path);
+    payload[field] = file ? file.content : null;
+  }
+  return payload;
+}
+function AgentIdentityTab({
+  agent,
+  FileTreeEditor: FileTreeEditor2,
+  onSaved,
+  onGenerateSoul,
+  onImportSoul,
+  onExportSoul,
+  onPublishSoul
+}) {
+  const client = useAgentPlaneClient();
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [publishing, setPublishing] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
+  const [savedVersion, setSavedVersion] = useState(0);
+  const [overrideFiles, setOverrideFiles] = useState(null);
+  const initialFiles = useMemo(() => agentToFiles(agent), [agent]);
+  const editorFiles = overrideFiles ?? initialFiles;
+  const handleSave = useCallback(
+    async (files) => {
+      setSaving(true);
+      setError("");
+      try {
+        const payload = filesToPayload(files);
+        await client.agents.update(agent.id, payload);
+        setOverrideFiles(null);
+        setSavedVersion((v) => v + 1);
+        onSaved?.();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to save");
+        throw err;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [agent.id, client, onSaved]
+  );
+  function applyFilesFromResponse(responseFiles) {
+    const newFiles = [];
+    for (const { path, field } of FILE_MAP) {
+      const content = responseFiles[field] ?? responseFiles[path];
+      if (content) {
+        newFiles.push({ path, content });
+      }
+    }
+    if (newFiles.length > 0) {
+      setOverrideFiles(newFiles);
+    }
+  }
+  async function handleGenerate() {
+    if (!onGenerateSoul) return;
+    setGenerating(true);
+    setError("");
+    try {
+      const data = await onGenerateSoul();
+      applyFilesFromResponse(data.files);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to generate");
+    } finally {
+      setGenerating(false);
+    }
+  }
+  function handleImported(responseFiles) {
+    applyFilesFromResponse(responseFiles);
+  }
+  async function handleExport() {
+    if (!onExportSoul) return;
+    setError("");
+    try {
+      const data = await onExportSoul();
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: "application/json"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${data.name || "soulspec"}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to export");
+    }
+  }
+  async function handlePublish() {
+    if (!onPublishSoul) return;
+    const owner = prompt("Enter owner name for publishing:");
+    if (!owner?.trim()) return;
+    setPublishing(true);
+    setError("");
+    try {
+      await onPublishSoul(owner.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to publish");
+    } finally {
+      setPublishing(false);
+    }
+  }
+  const warnings = [];
+  const hasSoul = editorFiles.some(
+    (f) => f.path === "SOUL.md" && f.content.trim().length > 0
+  );
+  const hasIdentity = editorFiles.some(
+    (f) => f.path === "IDENTITY.md" && f.content.trim().length > 0
+  );
+  if (!hasSoul) warnings.push("SOUL.md is empty -- this is the core identity file");
+  if (!hasIdentity)
+    warnings.push("IDENTITY.md is empty -- consider adding behavioral traits");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      onGenerateSoul && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: handleGenerate,
+          disabled: generating,
+          children: generating ? "Generating..." : "Generate Soul"
+        }
+      ),
+      onImportSoul && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setImportOpen(true),
+          children: "Import"
+        }
+      ),
+      onExportSoul && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleExport, children: "Export" }),
+      onPublishSoul && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: handlePublish,
+          disabled: publishing,
+          children: publishing ? "Publishing..." : "Publish"
+        }
+      ),
+      overrideFiles && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved generated content" })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: /* @__PURE__ */ jsx(
+      FileTreeEditor2,
+      {
+        initialFiles: editorFiles,
+        onSave: handleSave,
+        title: "SoulSpec",
+        saveLabel: saving ? "Saving..." : "Save Identity",
+        addFolderLabel: "Folder",
+        newFileTemplate: {
+          filename: "CUSTOM.md",
+          content: "# Custom\n\nAdd custom identity content...\n"
+        },
+        savedVersion
+      }
+    ) }),
+    warnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-amber-600/30 bg-amber-950/20 p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-amber-500 mb-1", children: "Validation Warnings" }),
+      /* @__PURE__ */ jsx("ul", { className: "text-xs text-amber-400/80 space-y-0.5", children: warnings.map((w) => /* @__PURE__ */ jsxs("li", { children: [
+        "- ",
+        w
+      ] }, w)) })
+    ] }),
+    onImportSoul && /* @__PURE__ */ jsx(
+      ImportSoulDialog,
+      {
+        open: importOpen,
+        onOpenChange: setImportOpen,
+        onImport: onImportSoul,
+        onImported: handleImported
+      }
+    )
+  ] });
+}
+function ImportSoulDialog({
+  open,
+  onOpenChange,
+  onImport,
+  onImported
+}) {
+  const [ref, setRef] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  async function handleImport() {
+    if (!ref.trim()) return;
+    setLoading(true);
+    setError("");
+    try {
+      const data = await onImport(ref.trim());
+      onImported(data.files);
+      onOpenChange(false);
+      setRef("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to import");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Import SoulSpec" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Import a SoulSpec from the ClawSouls registry." })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogBody, { children: [
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive mb-3", children: error }),
+      /* @__PURE__ */ jsx(FormField, { label: "Registry Reference", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: ref,
+          onChange: (e) => setRef(e.target.value),
+          placeholder: "owner/name (e.g. clawsouls/surgical-coder)",
+          onKeyDown: (e) => e.key === "Enter" && handleImport(),
+          autoFocus: true
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => onOpenChange(false),
+          disabled: loading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: handleImport,
+          disabled: loading || !ref.trim(),
+          children: loading ? "Importing..." : "Import"
+        }
+      )
+    ] })
+  ] }) });
+}
 
-export { FileTreeEditor, PluginEditorPage };
+export { AgentIdentityTab, FileTreeEditor, PluginEditorPage };