@getcatalystiq/agent-plane-ui 0.1.3 → 0.1.5

package/dist/code-editor-E7L6Y3LM.js

@@ -0,0 +1,35 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { jsx } from 'react/jsx-runtime';
+
+function getLanguage(filename) {
+  if (filename.endsWith(".md")) return markdown();
+  if (filename.endsWith(".json")) return json();
+  if (filename.endsWith(".js") || filename.endsWith(".ts") || filename.endsWith(".tsx")) return javascript({ typescript: filename.endsWith(".ts") || filename.endsWith(".tsx") });
+  return markdown();
+}
+function CodeEditor({ value, onChange, filename }) {
+  return /* @__PURE__ */ jsx(
+    CodeMirror,
+    {
+      value,
+      onChange,
+      extensions: [getLanguage(filename)],
+      theme: oneDark,
+      height: "100%",
+      minHeight: "300px",
+      basicSetup: {
+        lineNumbers: true,
+        foldGutter: true,
+        highlightActiveLine: true,
+        autocompletion: false
+      },
+      className: "text-sm rounded overflow-hidden border border-border"
+    }
+  );
+}
+
+export { CodeEditor as default };

package/dist/code-editor-ZD5ZILTM.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var CodeMirror = require('@uiw/react-codemirror');
+var langMarkdown = require('@codemirror/lang-markdown');
+var langJavascript = require('@codemirror/lang-javascript');
+var langJson = require('@codemirror/lang-json');
+var themeOneDark = require('@codemirror/theme-one-dark');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
+
+function getLanguage(filename) {
+  if (filename.endsWith(".md")) return langMarkdown.markdown();
+  if (filename.endsWith(".json")) return langJson.json();
+  if (filename.endsWith(".js") || filename.endsWith(".ts") || filename.endsWith(".tsx")) return langJavascript.javascript({ typescript: filename.endsWith(".ts") || filename.endsWith(".tsx") });
+  return langMarkdown.markdown();
+}
+function CodeEditor({ value, onChange, filename }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CodeMirror__default.default,
+    {
+      value,
+      onChange,
+      extensions: [getLanguage(filename)],
+      theme: themeOneDark.oneDark,
+      height: "100%",
+      minHeight: "300px",
+      basicSetup: {
+        lineNumbers: true,
+        foldGutter: true,
+        highlightActiveLine: true,
+        autocompletion: false
+      },
+      className: "text-sm rounded overflow-hidden border border-border"
+    }
+  );
+}
+
+module.exports = CodeEditor;

package/dist/index.cjs

@@ -964,7 +964,7 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
   );
   const { data: transcript } = useApi(
     run?.transcript_blob_url ? `transcript-${runId}` : null,
-    (client) => client.runs.transcript(runId),
+    (client) => client.runs.transcriptArray(runId),
     initialTranscript ? { fallbackData: initialTranscript } : void 0
   );
   if (error) {
@@ -3099,6 +3099,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
     )
   ] });
 }
+var CodeEditor = React3.lazy(() => import('./code-editor-ZD5ZILTM.cjs'));
 function AgentSkillManager({ agentId, initialSkills, onSaved }) {
   const client = useAgentPlaneClient();
   const initialFiles = React3.useMemo(
@@ -3210,15 +3211,14 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
         },
         f.path
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsxRuntime.jsx(
-        Textarea,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsxRuntime.jsx(React3.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[300px] animate-pulse bg-muted/50 rounded" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+        CodeEditor,
         {
           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..."
+          onChange: (val) => updateFileContent(selectedFile.path, val),
+          filename: selectedFile.path
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
+      ) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
     ] })
   ] });
 }
@@ -3377,141 +3377,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__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title: "Schedules", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-      "Timezone: ",
-      timezone
-    ] }) }),
-    initialSchedules.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No schedules configured." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: initialSchedules.map((schedule) => /* @__PURE__ */ jsxRuntime.jsx(
-      ScheduleCard,
-      {
-        schedule,
-        timezone
-      },
-      schedule.id
-    )) })
-  ] });
-}
-function ScheduleCard({
-  schedule,
-  timezone
-}) {
-  const [frequency, setFrequency] = React3.useState(schedule.frequency);
-  const [time, setTime] = React3.useState(formatTimeForInput(schedule.time));
-  const [dayOfWeek, setDayOfWeek] = React3.useState(schedule.day_of_week ?? 1);
-  const [prompt, setPrompt] = React3.useState(schedule.prompt ?? "");
-  const [enabled, setEnabled] = React3.useState(schedule.enabled);
-  const [name, setName] = React3.useState(schedule.name ?? "");
-  const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
-  const showDayPicker = frequency === "weekly";
-  const canEnable = frequency !== "manual";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded border border-muted-foreground/15 p-4 space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          value: name,
-          onChange: (e) => setName(e.target.value),
-          placeholder: "Schedule name (optional)",
-          className: "max-w-xs text-sm"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: canEnable && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: enabled ? "Enabled" : "Disabled" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Frequency", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: f.value, children: f.label }, f.value))
-        }
-      ) }),
-      showTimePicker && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: `Time (${timezone})`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "time",
-          value: time,
-          onChange: (e) => setTime(e.target.value)
-        }
-      ) }),
-      showDayPicker && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Day of Week", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Select,
-        {
-          value: dayOfWeek.toString(),
-          onChange: (e) => setDayOfWeek(parseInt(e.target.value)),
-          children: DAYS_OF_WEEK.map((d) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: d.value, children: d.label }, d.value))
-        }
-      ) })
-    ] }),
-    frequency !== "manual" && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Prompt", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-sm text-muted-foreground pt-1", children: [
-      schedule.last_run_at && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Last run:" }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: schedule.last_run_at })
-      ] }),
-      schedule.next_run_at && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Next run:" }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: schedule.next_run_at })
-      ] })
-    ] })
-  ] });
-}
 function AgentRuns({ agentId }) {
   const { LinkComponent, basePath } = useNavigation();
   const { data, error, isLoading } = useApi(
@@ -3751,7 +3616,7 @@ function AgentA2aInfo({
     ] })
   ] });
 }
-function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" }) {
+function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug }) {
   const { LinkComponent, basePath } = useNavigation();
   const { mutate } = useSWR.useSWRConfig();
   const cacheKey = `agent-${agentId}`;
@@ -3854,16 +3719,6 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" })
               }
             )
           },
-          {
-            label: "Schedules",
-            content: /* @__PURE__ */ jsxRuntime.jsx(
-              AgentScheduleForm,
-              {
-                initialSchedules: [],
-                timezone
-              }
-            )
-          },
           {
             label: "Runs",
             content: /* @__PURE__ */ jsxRuntime.jsx(AgentRuns, { agentId: agent.id })
@@ -3873,6 +3728,141 @@ 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__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title: "Schedules", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      "Timezone: ",
+      timezone
+    ] }) }),
+    initialSchedules.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No schedules configured." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: initialSchedules.map((schedule) => /* @__PURE__ */ jsxRuntime.jsx(
+      ScheduleCard,
+      {
+        schedule,
+        timezone
+      },
+      schedule.id
+    )) })
+  ] });
+}
+function ScheduleCard({
+  schedule,
+  timezone
+}) {
+  const [frequency, setFrequency] = React3.useState(schedule.frequency);
+  const [time, setTime] = React3.useState(formatTimeForInput(schedule.time));
+  const [dayOfWeek, setDayOfWeek] = React3.useState(schedule.day_of_week ?? 1);
+  const [prompt, setPrompt] = React3.useState(schedule.prompt ?? "");
+  const [enabled, setEnabled] = React3.useState(schedule.enabled);
+  const [name, setName] = React3.useState(schedule.name ?? "");
+  const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
+  const showDayPicker = frequency === "weekly";
+  const canEnable = frequency !== "manual";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded border border-muted-foreground/15 p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "Schedule name (optional)",
+          className: "max-w-xs text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: canEnable && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: enabled ? "Enabled" : "Disabled" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Frequency", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: f.value, children: f.label }, f.value))
+        }
+      ) }),
+      showTimePicker && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: `Time (${timezone})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "time",
+          value: time,
+          onChange: (e) => setTime(e.target.value)
+        }
+      ) }),
+      showDayPicker && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Day of Week", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          value: dayOfWeek.toString(),
+          onChange: (e) => setDayOfWeek(parseInt(e.target.value)),
+          children: DAYS_OF_WEEK.map((d) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: d.value, children: d.label }, d.value))
+        }
+      ) })
+    ] }),
+    frequency !== "manual" && /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Prompt", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-sm text-muted-foreground pt-1", children: [
+      schedule.last_run_at && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Last run:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: schedule.last_run_at })
+      ] }),
+      schedule.next_run_at && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Next run:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: schedule.next_run_at })
+      ] })
+    ] })
+  ] });
+}
 
 exports.AdminTable = AdminTable;
 exports.AdminTableHead = AdminTableHead;

package/dist/index.d.cts

@@ -41,6 +41,7 @@ interface AgentPlaneClient {
         get(runId: string): Promise<unknown>;
         cancel(runId: string): Promise<unknown>;
         transcript(runId: string): Promise<unknown>;
+        transcriptArray(runId: string): Promise<unknown[]>;
     };
     sessions: {
         list(params?: Record<string, unknown>): Promise<unknown>;
@@ -525,10 +526,8 @@ interface AgentDetailPageProps {
     a2aBaseUrl?: string;
     /** Tenant slug (needed for A2A URLs) */
     tenantSlug?: string;
-    /** Tenant timezone (for schedule display) */
-    timezone?: string;
 }
-declare function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone }: AgentDetailPageProps): react_jsx_runtime.JSX.Element;
+declare function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug }: AgentDetailPageProps): react_jsx_runtime.JSX.Element;
 
 interface Agent {
     id: string;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ interface AgentPlaneClient {
         get(runId: string): Promise<unknown>;
         cancel(runId: string): Promise<unknown>;
         transcript(runId: string): Promise<unknown>;
+        transcriptArray(runId: string): Promise<unknown[]>;
     };
     sessions: {
         list(params?: Record<string, unknown>): Promise<unknown>;
@@ -525,10 +526,8 @@ interface AgentDetailPageProps {
     a2aBaseUrl?: string;
     /** Tenant slug (needed for A2A URLs) */
     tenantSlug?: string;
-    /** Tenant timezone (for schedule display) */
-    timezone?: string;
 }
-declare function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone }: AgentDetailPageProps): react_jsx_runtime.JSX.Element;
+declare function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug }: AgentDetailPageProps): react_jsx_runtime.JSX.Element;
 
 interface Agent {
     id: string;

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';
@@ -938,7 +938,7 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
   );
   const { data: transcript } = useApi(
     run?.transcript_blob_url ? `transcript-${runId}` : null,
-    (client) => client.runs.transcript(runId),
+    (client) => client.runs.transcriptArray(runId),
     initialTranscript ? { fallbackData: initialTranscript } : void 0
   );
   if (error) {
@@ -3073,6 +3073,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
     )
   ] });
 }
+var CodeEditor = lazy(() => import('./code-editor-E7L6Y3LM.js'));
 function AgentSkillManager({ agentId, initialSkills, onSaved }) {
   const client = useAgentPlaneClient();
   const initialFiles = useMemo(
@@ -3184,15 +3185,14 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
         },
         f.path
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsx(
-        Textarea,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "h-[300px] animate-pulse bg-muted/50 rounded" }), children: /* @__PURE__ */ jsx(
+        CodeEditor,
         {
           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..."
+          onChange: (val) => updateFileContent(selectedFile.path, val),
+          filename: selectedFile.path
         }
-      ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
+      ) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
     ] })
   ] });
 }
@@ -3351,141 +3351,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 +3590,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 +3693,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 +3702,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcatalystiq/agent-plane-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Embeddable React component library for AgentPlane",
   "type": "module",
   "exports": {
@@ -56,7 +56,12 @@
     "@getcatalystiq/agent-plane": "*",
     "swr": "^2.0.0",
     "react-markdown": "^9.0.0",
-    "recharts": "^2.0.0"
+    "recharts": "^2.0.0",
+    "@uiw/react-codemirror": "^4.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/lang-javascript": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/theme-one-dark": "^6.0.0"
   },
   "peerDependenciesMeta": {
     "react-markdown": {
@@ -64,6 +69,21 @@
     },
     "recharts": {
       "optional": true
+    },
+    "@uiw/react-codemirror": {
+      "optional": true
+    },
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
     }
   },
   "dependencies": {