@getcatalystiq/agent-plane-ui 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import React3__default, { createContext, useRef, useMemo, useContext, useState, useCallback, useEffect } from 'react';
+import React3__default, { createContext, lazy, useRef, useMemo, useContext, useState, useCallback, useEffect, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import useSWR, { useSWRConfig } from 'swr';
 import { clsx } from 'clsx';
@@ -3073,129 +3073,389 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
     )
   ] });
 }
-function AgentSkillManager({ agentId, initialSkills, onSaved }) {
-  const client = useAgentPlaneClient();
-  const initialFiles = useMemo(
-    () => initialSkills.flatMap(
-      (s) => s.files.map((f) => ({
-        path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
-        content: f.content
-      }))
-    ),
-    [initialSkills]
-  );
+var CodeEditor = lazy(() => import('./code-editor-E7L6Y3LM.js'));
+function buildTree(files) {
+  const rootFiles = [];
+  const dirMap = /* @__PURE__ */ new Map();
+  function ensureDir(dirPath) {
+    const existing = dirMap.get(dirPath);
+    if (existing) return existing;
+    const parts = dirPath.split("/");
+    const node = {
+      name: parts[parts.length - 1],
+      fullPath: dirPath,
+      children: [],
+      files: []
+    };
+    dirMap.set(dirPath, node);
+    if (parts.length > 1) {
+      const parentPath = parts.slice(0, -1).join("/");
+      const parent = ensureDir(parentPath);
+      if (!parent.children.some((c) => c.fullPath === dirPath)) {
+        parent.children.push(node);
+      }
+    }
+    return node;
+  }
+  for (const file of files) {
+    const slashIdx = file.path.lastIndexOf("/");
+    if (slashIdx === -1) {
+      rootFiles.push(file);
+    } else {
+      const dirPath = file.path.slice(0, slashIdx);
+      const dir = ensureDir(dirPath);
+      dir.files.push(file);
+    }
+  }
+  const topLevel = [];
+  for (const node of dirMap.values()) {
+    if (!node.fullPath.includes("/")) {
+      topLevel.push(node);
+    }
+  }
+  function sortNode(node) {
+    node.children.sort((a, b) => a.name.localeCompare(b.name));
+    node.files.sort((a, b) => a.path.localeCompare(b.path));
+    node.children.forEach(sortNode);
+  }
+  topLevel.forEach(sortNode);
+  topLevel.sort((a, b) => a.name.localeCompare(b.name));
+  rootFiles.sort((a, b) => a.path.localeCompare(b.path));
+  return { rootFiles, rootDirs: topLevel };
+}
+function collectAllDirPaths(nodes) {
+  const paths = /* @__PURE__ */ new Set();
+  function walk(node) {
+    paths.add(node.fullPath);
+    node.children.forEach(walk);
+  }
+  nodes.forEach(walk);
+  return paths;
+}
+function FileTreeEditor({
+  initialFiles,
+  onSave,
+  onChange,
+  readOnly = false,
+  hideSave = false,
+  title = "Files",
+  saveLabel = "Save",
+  addFolderLabel = "Folder",
+  newFileTemplate = { filename: "SKILL.md", content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" },
+  savedVersion
+}) {
   const [files, setFiles] = useState(initialFiles);
-  const [selectedPath, setSelectedPath] = useState(files[0]?.path ?? null);
+  const [selectedPath, setSelectedPath] = useState(
+    initialFiles.length > 0 ? initialFiles[0].path : null
+  );
   const [saving, setSaving] = useState(false);
-  const [addingFile, setAddingFile] = useState(false);
+  const [expanded, setExpanded] = useState(() => {
+    const { rootDirs } = buildTree(initialFiles);
+    return collectAllDirPaths(rootDirs);
+  });
+  const [showAddFolder, setShowAddFolder] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [addingFileInDir, setAddingFileInDir] = useState(null);
   const [newFileName, setNewFileName] = useState("");
+  const [savedSnapshot, setSavedSnapshot] = useState(() => JSON.stringify(initialFiles));
+  useEffect(() => {
+    const snap = JSON.stringify(initialFiles);
+    setSavedSnapshot(snap);
+    setFiles(initialFiles);
+    const { rootDirs } = buildTree(initialFiles);
+    setExpanded(collectAllDirPaths(rootDirs));
+  }, [initialFiles]);
+  useEffect(() => {
+    if (savedVersion !== void 0 && savedVersion > 0) {
+      setSavedSnapshot(JSON.stringify(files));
+    }
+  }, [savedVersion]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (onChangeRef.current && JSON.stringify(files) !== savedSnapshot) {
+      onChangeRef.current(files);
+    }
+  }, [files, savedSnapshot]);
   const isDirty = useMemo(
-    () => JSON.stringify(files) !== JSON.stringify(initialFiles),
-    [files, initialFiles]
+    () => JSON.stringify(files) !== savedSnapshot,
+    [files, savedSnapshot]
+  );
+  const tree = useMemo(() => buildTree(files), [files]);
+  const activeFile = useMemo(
+    () => selectedPath ? files.find((f) => f.path === selectedPath) ?? null : null,
+    [files, selectedPath]
   );
-  const selectedFile = files.find((f) => f.path === selectedPath);
-  function updateFileContent(path, content) {
-    setFiles((prev) => prev.map((f) => f.path === path ? { ...f, content } : f));
+  const handleEditorChange = useCallback((value) => {
+    if (readOnly || !selectedPath) return;
+    setFiles((prev) => prev.map((f) => f.path === selectedPath ? { ...f, content: value } : f));
+  }, [readOnly, selectedPath]);
+  function toggleExpand(dirPath) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(dirPath)) next.delete(dirPath);
+      else next.add(dirPath);
+      return next;
+    });
+  }
+  function addFolder() {
+    const name = newFolderName.trim();
+    if (!name) return;
+    const filePath = `${name}/${newFileTemplate.filename}`;
+    if (files.some((f) => f.path === filePath)) return;
+    const content = newFileTemplate.content.replace("# New", `# ${name}`);
+    setFiles((prev) => [...prev, { path: filePath, content }]);
+    setSelectedPath(filePath);
+    setExpanded((prev) => /* @__PURE__ */ new Set([...prev, name]));
+    setNewFolderName("");
+    setShowAddFolder(false);
+  }
+  function removeDir(dirPath) {
+    const prefix = dirPath + "/";
+    const affectedFiles = files.filter((f) => f.path.startsWith(prefix));
+    if (affectedFiles.length === 0) return;
+    if (!confirm(`Remove "${dirPath}" and all ${affectedFiles.length} file(s)?`)) return;
+    setFiles((prev) => prev.filter((f) => !f.path.startsWith(prefix)));
+    if (selectedPath && selectedPath.startsWith(prefix)) setSelectedPath(null);
+  }
+  function removeFile(filePath) {
+    const fileName = filePath.split("/").pop() ?? filePath;
+    if (!confirm(`Remove file "${fileName}"?`)) return;
+    setFiles((prev) => prev.filter((f) => f.path !== filePath));
+    if (selectedPath === filePath) setSelectedPath(null);
   }
-  function addFile() {
+  function addFileInDir(dirPath) {
     const name = newFileName.trim();
-    if (!name || files.some((f) => f.path === name)) return;
-    const content = name.endsWith(".md") ? "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" : "";
-    setFiles((prev) => [...prev, { path: name, content }]);
-    setSelectedPath(name);
-    setAddingFile(false);
+    if (!name) return;
+    const filePath = dirPath ? `${dirPath}/${name}` : name;
+    if (files.some((f) => f.path === filePath)) return;
+    setFiles((prev) => [...prev, { path: filePath, content: "" }]);
+    setSelectedPath(filePath);
     setNewFileName("");
+    setAddingFileInDir(null);
   }
-  function removeFile(path) {
-    setFiles((prev) => prev.filter((f) => f.path !== path));
-    if (selectedPath === path) {
-      setSelectedPath(files.find((f) => f.path !== path)?.path ?? null);
-    }
-  }
-  const handleSave = useCallback(async () => {
+  async function handleSave() {
     setSaving(true);
     try {
-      const folderMap = /* @__PURE__ */ new Map();
-      for (const file of files) {
-        const slashIdx = file.path.lastIndexOf("/");
-        if (slashIdx === -1) {
-          const existing = folderMap.get("(root)") ?? [];
-          existing.push({ path: file.path, content: file.content });
-          folderMap.set("(root)", existing);
-        } else {
-          const folder = file.path.slice(0, slashIdx);
-          const fileName = file.path.slice(slashIdx + 1);
-          const existing = folderMap.get(folder) ?? [];
-          existing.push({ path: fileName, content: file.content });
-          folderMap.set(folder, existing);
-        }
-      }
-      const skills = Array.from(folderMap.entries()).map(([folder, files2]) => ({ folder, files: files2 }));
-      await client.agents.update(agentId, { skills });
-      onSaved?.();
+      await onSave(files);
     } finally {
       setSaving(false);
     }
-  }, [files, agentId, client, onSaved]);
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
-    /* @__PURE__ */ jsx(SectionHeader, { title: "Skills", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      isDirty && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setAddingFile(true), children: "Add File" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || !isDirty, children: saving ? "Saving..." : "Save Skills" })
-    ] }) }),
-    addingFile && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: newFileName,
-          onChange: (e) => setNewFileName(e.target.value),
-          placeholder: "folder/SKILL.md",
-          className: "max-w-xs text-sm",
-          onKeyDown: (e) => e.key === "Enter" && addFile()
-        }
-      ),
-      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: addFile, children: "Add" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
-        setAddingFile(false);
-        setNewFileName("");
-      }, children: "Cancel" })
-    ] }),
-    files.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: 'No skills defined. Click "Add File" to create a skill.' }) : /* @__PURE__ */ jsxs("div", { className: "flex gap-4 min-h-[300px]", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0 border-r border-border pr-3 space-y-1", children: files.map((f) => /* @__PURE__ */ jsxs(
+  }
+  function renderTreeNode(node, depth) {
+    const isExpanded = expanded.has(node.fullPath);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `flex items-center justify-between group rounded px-2 py-1 text-xs cursor-pointer ${selectedPath === f.path ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"}`,
-          onClick: () => setSelectedPath(f.path),
+          className: "flex items-center justify-between cursor-pointer hover:bg-muted/50 py-1 pr-2",
+          style: { paddingLeft: `${depth * 16 + 8}px` },
+          onClick: () => toggleExpand(node.fullPath),
           children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: f.path }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("span", { className: "font-medium text-xs truncate flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: isExpanded ? "\u25BE" : "\u25B8" }),
+              node.name,
+              "/"
+            ] }),
+            !readOnly && /* @__PURE__ */ jsx(
               "button",
               {
-                type: "button",
                 onClick: (e) => {
                   e.stopPropagation();
-                  removeFile(f.path);
+                  removeDir(node.fullPath);
                 },
-                className: "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive ml-1",
+                className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
                 children: "\xD7"
               }
             )
           ]
-        },
-        f.path
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          value: selectedFile.content,
-          onChange: (e) => updateFileContent(selectedFile.path, e.target.value),
-          className: "h-full min-h-[300px] font-mono text-xs resize-y",
-          placeholder: "Enter skill content..."
         }
-      ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
+      ),
+      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+        node.children.map((child) => renderTreeNode(child, depth + 1)),
+        node.files.map((file) => {
+          const fileName = file.path.split("/").pop() ?? file.path;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between cursor-pointer hover:bg-muted/30 py-1 pr-2 ${selectedPath === file.path ? "bg-primary/10 text-primary" : ""}`,
+              style: { paddingLeft: `${(depth + 1) * 16 + 8}px` },
+              onClick: () => setSelectedPath(file.path),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: fileName }),
+                !readOnly && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFile(file.path);
+                    },
+                    className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            file.path
+          );
+        }),
+        !readOnly && /* @__PURE__ */ jsx("div", { style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }, className: "py-1 pr-2", children: addingFileInDir === node.fullPath ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: newFileName,
+              onChange: (e) => setNewFileName(e.target.value),
+              placeholder: "file.md",
+              className: "h-6 text-xs",
+              onKeyDown: (e) => e.key === "Enter" && addFileInDir(node.fullPath),
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: () => addFileInDir(node.fullPath), size: "sm", className: "h-6 text-xs px-2", children: "+" })
+        ] }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setAddingFileInDir(node.fullPath);
+              setNewFileName("");
+            },
+            className: "text-xs text-primary hover:underline",
+            children: "+ File"
+          }
+        ) })
+      ] })
+    ] }, node.fullPath);
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
+        isDirty && !readOnly && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
+        readOnly && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
+      ] }),
+      !readOnly && !hideSave && /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted/50 border-b border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }),
+          !readOnly && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowAddFolder(!showAddFolder),
+              className: "text-xs text-primary hover:underline",
+              children: [
+                "+ ",
+                addFolderLabel
+              ]
+            }
+          )
+        ] }),
+        showAddFolder && !readOnly && /* @__PURE__ */ jsxs("div", { className: "p-2 border-b border-border flex gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: newFolderName,
+              onChange: (e) => setNewFolderName(e.target.value),
+              placeholder: "folder-name",
+              className: "h-7 text-xs",
+              onKeyDown: (e) => e.key === "Enter" && addFolder(),
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: addFolder, size: "sm", className: "h-7 text-xs px-2", children: "Add" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm overflow-y-auto", children: [
+          tree.rootFiles.map((file) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex items-center justify-between cursor-pointer hover:bg-muted/30 py-1 pr-2 ${selectedPath === file.path ? "bg-primary/10 text-primary" : ""}`,
+              style: { paddingLeft: "8px" },
+              onClick: () => setSelectedPath(file.path),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: file.path }),
+                !readOnly && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFile(file.path);
+                    },
+                    className: "text-muted-foreground hover:text-destructive text-xs ml-1 shrink-0",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            file.path
+          )),
+          tree.rootDirs.map((node) => renderTreeNode(node, 0)),
+          files.length === 0 && /* @__PURE__ */ jsx("p", { className: "p-3 text-xs text-muted-foreground", children: readOnly ? "No files." : `No ${title.toLowerCase()} yet. Add a ${addFolderLabel.toLowerCase()} to get started.` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 border border-border rounded-md overflow-hidden", children: activeFile ? /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 bg-muted/50 border-b border-border text-xs text-muted-foreground", children: activeFile.path }),
+        /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex-1 animate-pulse bg-muted/50" }), children: /* @__PURE__ */ jsx(
+          CodeEditor,
+          {
+            value: activeFile.content,
+            onChange: handleEditorChange,
+            filename: activeFile.path
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm", children: [
+        "Select a file to ",
+        readOnly ? "view" : "edit"
+      ] }) })
     ] })
   ] });
 }
+function AgentSkillManager({ agentId, initialSkills, onSaved }) {
+  const client = useAgentPlaneClient();
+  const initialFiles = useMemo(
+    () => initialSkills.flatMap(
+      (s) => s.files.map((f) => ({
+        path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
+        content: f.content
+      }))
+    ),
+    [initialSkills]
+  );
+  const handleSave = useCallback(async (files) => {
+    const folderMap = /* @__PURE__ */ new Map();
+    for (const file of files) {
+      const slashIdx = file.path.lastIndexOf("/");
+      if (slashIdx === -1) {
+        const existing = folderMap.get("(root)") ?? [];
+        existing.push({ path: file.path, content: file.content });
+        folderMap.set("(root)", existing);
+      } else {
+        const folder = file.path.slice(0, slashIdx);
+        const fileName = file.path.slice(slashIdx + 1);
+        const existing = folderMap.get(folder) ?? [];
+        existing.push({ path: fileName, content: file.content });
+        folderMap.set(folder, existing);
+      }
+    }
+    const skills = Array.from(folderMap.entries()).map(([folder, files2]) => ({ folder, files: files2 }));
+    await client.agents.update(agentId, { skills });
+    onSaved?.();
+  }, [agentId, client, onSaved]);
+  return /* @__PURE__ */ jsx(
+    FileTreeEditor,
+    {
+      initialFiles,
+      onSave: handleSave,
+      title: "Skills",
+      saveLabel: "Save Skills",
+      addFolderLabel: "Skill",
+      newFileTemplate: {
+        filename: "SKILL.md",
+        content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
+      }
+    }
+  );
+}
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = useAgentPlaneClient();
   const [plugins, setPlugins] = useState(initialPlugins);
@@ -3351,141 +3611,6 @@ function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
     ] })
   ] });
 }
-var FREQUENCIES = [
-  { value: "manual", label: "Manual (no schedule)" },
-  { value: "hourly", label: "Hourly" },
-  { value: "daily", label: "Daily" },
-  { value: "weekdays", label: "Weekdays (Mon-Fri)" },
-  { value: "weekly", label: "Weekly" }
-];
-var DAYS_OF_WEEK = [
-  { value: 0, label: "Sunday" },
-  { value: 1, label: "Monday" },
-  { value: 2, label: "Tuesday" },
-  { value: 3, label: "Wednesday" },
-  { value: 4, label: "Thursday" },
-  { value: 5, label: "Friday" },
-  { value: 6, label: "Saturday" }
-];
-function formatTimeForInput(time) {
-  if (!time) return "09:00";
-  return time.slice(0, 5);
-}
-function AgentScheduleForm({ initialSchedules, timezone }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
-    /* @__PURE__ */ jsx(SectionHeader, { title: "Schedules", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-      "Timezone: ",
-      timezone
-    ] }) }),
-    initialSchedules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No schedules configured." }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: initialSchedules.map((schedule) => /* @__PURE__ */ jsx(
-      ScheduleCard,
-      {
-        schedule,
-        timezone
-      },
-      schedule.id
-    )) })
-  ] });
-}
-function ScheduleCard({
-  schedule,
-  timezone
-}) {
-  const [frequency, setFrequency] = useState(schedule.frequency);
-  const [time, setTime] = useState(formatTimeForInput(schedule.time));
-  const [dayOfWeek, setDayOfWeek] = useState(schedule.day_of_week ?? 1);
-  const [prompt, setPrompt] = useState(schedule.prompt ?? "");
-  const [enabled, setEnabled] = useState(schedule.enabled);
-  const [name, setName] = useState(schedule.name ?? "");
-  const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
-  const showDayPicker = frequency === "weekly";
-  const canEnable = frequency !== "manual";
-  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-muted-foreground/15 p-4 space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: name,
-          onChange: (e) => setName(e.target.value),
-          placeholder: "Schedule name (optional)",
-          className: "max-w-xs text-sm"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: canEnable && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: enabled ? "Enabled" : "Disabled" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "switch",
-            "aria-checked": enabled,
-            onClick: () => setEnabled(!enabled),
-            className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${enabled ? "bg-primary" : "bg-muted"}`,
-            children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `pointer-events-none inline-block h-4 w-4 transform rounded-full bg-background shadow-lg ring-0 transition-transform ${enabled ? "translate-x-4" : "translate-x-0"}`
-              }
-            )
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsx(FormField, { label: "Frequency", children: /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: frequency,
-          onChange: (e) => {
-            const newFreq = e.target.value;
-            setFrequency(newFreq);
-            if (newFreq === "manual") setEnabled(false);
-            else setEnabled(true);
-          },
-          children: FREQUENCIES.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.value))
-        }
-      ) }),
-      showTimePicker && /* @__PURE__ */ jsx(FormField, { label: `Time (${timezone})`, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "time",
-          value: time,
-          onChange: (e) => setTime(e.target.value)
-        }
-      ) }),
-      showDayPicker && /* @__PURE__ */ jsx(FormField, { label: "Day of Week", children: /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: dayOfWeek.toString(),
-          onChange: (e) => setDayOfWeek(parseInt(e.target.value)),
-          children: DAYS_OF_WEEK.map((d) => /* @__PURE__ */ jsx("option", { value: d.value, children: d.label }, d.value))
-        }
-      ) })
-    ] }),
-    frequency !== "manual" && /* @__PURE__ */ jsx(FormField, { label: "Prompt", children: /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value: prompt,
-        onChange: (e) => setPrompt(e.target.value),
-        rows: 3,
-        placeholder: "Enter the prompt to send on each scheduled run...",
-        className: "resize-y min-h-[60px]"
-      }
-    ) }),
-    (schedule.last_run_at || schedule.next_run_at) && /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-sm text-muted-foreground pt-1", children: [
-      schedule.last_run_at && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Last run:" }),
-        " ",
-        /* @__PURE__ */ jsx(LocalDate, { value: schedule.last_run_at })
-      ] }),
-      schedule.next_run_at && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Next run:" }),
-        " ",
-        /* @__PURE__ */ jsx(LocalDate, { value: schedule.next_run_at })
-      ] })
-    ] })
-  ] });
-}
 function AgentRuns({ agentId }) {
   const { LinkComponent, basePath } = useNavigation();
   const { data, error, isLoading } = useApi(
@@ -3725,7 +3850,7 @@ function AgentA2aInfo({
     ] })
   ] });
 }
-function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" }) {
+function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug }) {
   const { LinkComponent, basePath } = useNavigation();
   const { mutate } = useSWRConfig();
   const cacheKey = `agent-${agentId}`;
@@ -3828,16 +3953,6 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" })
               }
             )
           },
-          {
-            label: "Schedules",
-            content: /* @__PURE__ */ jsx(
-              AgentScheduleForm,
-              {
-                initialSchedules: [],
-                timezone
-              }
-            )
-          },
           {
             label: "Runs",
             content: /* @__PURE__ */ jsx(AgentRuns, { agentId: agent.id })
@@ -3847,5 +3962,140 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" })
     )
   ] });
 }
+var FREQUENCIES = [
+  { value: "manual", label: "Manual (no schedule)" },
+  { value: "hourly", label: "Hourly" },
+  { value: "daily", label: "Daily" },
+  { value: "weekdays", label: "Weekdays (Mon-Fri)" },
+  { value: "weekly", label: "Weekly" }
+];
+var DAYS_OF_WEEK = [
+  { value: 0, label: "Sunday" },
+  { value: 1, label: "Monday" },
+  { value: 2, label: "Tuesday" },
+  { value: 3, label: "Wednesday" },
+  { value: 4, label: "Thursday" },
+  { value: 5, label: "Friday" },
+  { value: 6, label: "Saturday" }
+];
+function formatTimeForInput(time) {
+  if (!time) return "09:00";
+  return time.slice(0, 5);
+}
+function AgentScheduleForm({ initialSchedules, timezone }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Schedules", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      "Timezone: ",
+      timezone
+    ] }) }),
+    initialSchedules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No schedules configured." }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: initialSchedules.map((schedule) => /* @__PURE__ */ jsx(
+      ScheduleCard,
+      {
+        schedule,
+        timezone
+      },
+      schedule.id
+    )) })
+  ] });
+}
+function ScheduleCard({
+  schedule,
+  timezone
+}) {
+  const [frequency, setFrequency] = useState(schedule.frequency);
+  const [time, setTime] = useState(formatTimeForInput(schedule.time));
+  const [dayOfWeek, setDayOfWeek] = useState(schedule.day_of_week ?? 1);
+  const [prompt, setPrompt] = useState(schedule.prompt ?? "");
+  const [enabled, setEnabled] = useState(schedule.enabled);
+  const [name, setName] = useState(schedule.name ?? "");
+  const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
+  const showDayPicker = frequency === "weekly";
+  const canEnable = frequency !== "manual";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-muted-foreground/15 p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "Schedule name (optional)",
+          className: "max-w-xs text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: canEnable && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: enabled ? "Enabled" : "Disabled" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": enabled,
+            onClick: () => setEnabled(!enabled),
+            className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${enabled ? "bg-primary" : "bg-muted"}`,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `pointer-events-none inline-block h-4 w-4 transform rounded-full bg-background shadow-lg ring-0 transition-transform ${enabled ? "translate-x-4" : "translate-x-0"}`
+              }
+            )
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(FormField, { label: "Frequency", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: frequency,
+          onChange: (e) => {
+            const newFreq = e.target.value;
+            setFrequency(newFreq);
+            if (newFreq === "manual") setEnabled(false);
+            else setEnabled(true);
+          },
+          children: FREQUENCIES.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.value))
+        }
+      ) }),
+      showTimePicker && /* @__PURE__ */ jsx(FormField, { label: `Time (${timezone})`, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "time",
+          value: time,
+          onChange: (e) => setTime(e.target.value)
+        }
+      ) }),
+      showDayPicker && /* @__PURE__ */ jsx(FormField, { label: "Day of Week", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: dayOfWeek.toString(),
+          onChange: (e) => setDayOfWeek(parseInt(e.target.value)),
+          children: DAYS_OF_WEEK.map((d) => /* @__PURE__ */ jsx("option", { value: d.value, children: d.label }, d.value))
+        }
+      ) })
+    ] }),
+    frequency !== "manual" && /* @__PURE__ */ jsx(FormField, { label: "Prompt", children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: prompt,
+        onChange: (e) => setPrompt(e.target.value),
+        rows: 3,
+        placeholder: "Enter the prompt to send on each scheduled run...",
+        className: "resize-y min-h-[60px]"
+      }
+    ) }),
+    (schedule.last_run_at || schedule.next_run_at) && /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-sm text-muted-foreground pt-1", children: [
+      schedule.last_run_at && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Last run:" }),
+        " ",
+        /* @__PURE__ */ jsx(LocalDate, { value: schedule.last_run_at })
+      ] }),
+      schedule.next_run_at && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Next run:" }),
+        " ",
+        /* @__PURE__ */ jsx(LocalDate, { value: schedule.next_run_at })
+      ] })
+    ] })
+  ] });
+}
 
 export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPlaneProvider, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Skeleton, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };