local-operator-ui 0.1.5 → 0.2.0

package/out/renderer/assets/{index-B6gIjA2B.js → index-DXdSH3wR.js}

@@ -1,4 +1,4 @@
-import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as keyframes, aF as faChevronUp, aG as faQuestion, aH as faLightbulb, aI as faChevronRight, aJ as faFile, aK as faUser, aL as faEllipsisVertical, aM as faComment, aN as faChevronLeft, aO as faPlus, aP as faSearch, aQ as faCommentSlash, aR as faArrowRight, aS as faComments, aT as faTag, aU as faIdCard, aV as faCalendarAlt, aW as faCodeBranch, aX as faShieldAlt, aY as faArrowLeft, aZ as requireReact, a_ as LinearProgress, a$ as faShield, b0 as faSignOut, b1 as faMagicWandSparkles, b2 as faBrain, b3 as faWandMagicSparkles, b4 as faExternalLinkAlt, b5 as faKey, b6 as faGlobe, b7 as faLock, b8 as faEdit, b9 as faSave, ba as faEnvelope, bb as faCloudUploadAlt, bc as faHistory, bd as faListAlt, be as library$1, bf as icons$1, bg as CssBaseline, bh as ReactDOM$1, bi as ThemeProvider, bj as theme, bk as ErrorBoundary } from "./theme-CHCNkogj.js";
+import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as keyframes, aF as faChevronUp, aG as faQuestion, aH as faLightbulb, aI as faChevronRight, aJ as faFile, aK as faUser, aL as faEllipsisVertical, aM as faComment, aN as faFileExport, aO as faChevronLeft, aP as faFileImport, aQ as faUpload, aR as faPlus, aS as faSearch, aT as faCommentSlash, aU as faArrowRight, aV as faComments, aW as faTag, aX as faIdCard, aY as faCalendarAlt, aZ as faCodeBranch, a_ as faShieldAlt, a$ as faArrowLeft, b0 as requireReact, b1 as LinearProgress, b2 as faShield, b3 as faSignOut, b4 as faMagicWandSparkles, b5 as faBrain, b6 as faWandMagicSparkles, b7 as faExternalLinkAlt, b8 as faKey, b9 as faGlobe, ba as faLock, bb as faEdit, bc as faSave, bd as faEnvelope, be as faCloudUploadAlt, bf as faHistory, bg as faListAlt, bh as library$1, bi as icons$1, bj as CssBaseline, bk as ReactDOM$1, bl as ThemeProvider, bm as theme, bn as ErrorBoundary } from "./theme-CuzpzMRz.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -25409,6 +25409,104 @@ const AgentsApi = {
       );
     }
     return response.json();
+  },
+  /**
+   * Get agent system prompt
+   * Retrieve the system prompt for a specific agent.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent to get system prompt for
+   * @returns Promise resolving to the agent system prompt response
+   * @throws Error if the request fails
+   */
+  async getAgentSystemPrompt(baseUrl, agentId) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/system-prompt`,
+      {
+        method: "GET",
+        headers: {
+          Accept: "application/json"
+        }
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Get agent system prompt request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Update agent system prompt
+   * Update the system prompt for a specific agent.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent to update system prompt for
+   * @param systemPrompt - The new system prompt text
+   * @returns Promise resolving to the update response
+   * @throws Error if the request fails
+   */
+  async updateAgentSystemPrompt(baseUrl, agentId, systemPrompt) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/system-prompt`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({ system_prompt: systemPrompt })
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Update agent system prompt request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Import an agent from a ZIP file
+   * Import an agent from a ZIP file containing agent state files with an agent.yml file.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param file - The ZIP file containing agent state files
+   * @returns Promise resolving to the imported agent response
+   * @throws Error if the request fails
+   */
+  async importAgent(baseUrl, file) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const response = await fetch(`${baseUrl}/v1/agents/import`, {
+      method: "POST",
+      body: formData
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Import agent request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Export an agent as a ZIP file
+   * Export an agent's state files as a ZIP file.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent to export
+   * @returns Promise resolving to a Blob containing the ZIP file
+   * @throws Error if the request fails
+   */
+  async exportAgent(baseUrl, agentId) {
+    const response = await fetch(`${baseUrl}/v1/agents/${agentId}/export`, {
+      method: "GET"
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Export agent request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.blob();
   }
 };
 const ChatApi = {
@@ -30126,8 +30224,7 @@ const useServerHealth = (refetchInterval = 5e3) => {
     },
     // Refetch at specified interval
     refetchInterval,
-    // Enable background refetching
-    refetchIntervalInBackground: true,
+    refetchIntervalInBackground: false,
     // Don't retry on failure as this is expected when server is down
     retry: false,
     // Always refetch on window focus to get latest status
@@ -30159,8 +30256,7 @@ const useInternetConnectivity = (refetchInterval = 5e3) => {
     },
     // Refetch at specified interval
     refetchInterval,
-    // Enable background refetching
-    refetchIntervalInBackground: true,
+    refetchIntervalInBackground: false,
     // Don't retry on failure as this is expected when internet is down
     retry: false,
     // Always refetch on window focus to get latest status
@@ -30321,11 +30417,9 @@ const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
       }
     },
     // Prevent automatic refetches on window focus
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: true,
     // Set refetch interval if provided
     refetchInterval,
-    // Enable background refetching if interval is set
-    refetchIntervalInBackground: refetchInterval > 0,
     // Prevent stale time to avoid unnecessary refetches
     staleTime: 5e3
   });
@@ -30969,10 +31063,8 @@ const useJobPolling = ({
     enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!currentJobId,
     // Poll every 1 second while job is active
     refetchInterval: currentJobId ? 1e3 : false,
-    // Force refetch on interval regardless of window focus
-    refetchIntervalInBackground: true,
-    // Don't refetch on window focus while polling
-    refetchOnWindowFocus: false,
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: true,
     // Don't cache the result
     gcTime: 0,
     staleTime: 0,
@@ -31825,7 +31917,7 @@ const SidebarContent = styled$1(Box)({
     borderRadius: "4px"
   }
 });
-const SectionTitle$6 = styled$1(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$7 = styled$1(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   marginTop: theme2.spacing(3),
@@ -31833,11 +31925,11 @@ const SectionTitle$6 = styled$1(Typography)(({ theme: theme2 }) => ({
   alignItems: "center",
   color: theme2.palette.text.primary
 }));
-const TitleIcon$3 = styled$1(FontAwesomeIcon)({
+const TitleIcon$4 = styled$1(FontAwesomeIcon)({
   marginRight: 10,
   color: "#f2f2f3"
 });
-const InfoButton$2 = styled$1(IconButton)(({ theme: theme2 }) => ({
+const InfoButton$3 = styled$1(IconButton)(({ theme: theme2 }) => ({
   marginLeft: theme2.spacing(1),
   color: theme2.palette.primary.main,
   "&:hover": {
@@ -32469,8 +32561,8 @@ const GenerationSettingsSection = ({
   updateAgentMutation
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$6, { variant: "subtitle1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$3, { icon: faSliders }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$7, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$4, { icon: faSliders }),
       "Generation Settings",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tooltip,
@@ -32478,7 +32570,7 @@ const GenerationSettingsSection = ({
           title: "Settings that control how the agent generates responses",
           arrow: true,
           placement: "top",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$2, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$3, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
         }
       )
     ] }),
@@ -33048,10 +33140,19 @@ const HostingSelect = ({
   const [inputValue, setInputValue] = reactExports.useState("");
   const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
   const showAllOptions = reactExports.useRef(false);
+  const credentialFetchAttemptsRef = reactExports.useRef(0);
+  const MAX_CREDENTIAL_FETCH_ATTEMPTS = 3;
   const availableHostingProviders = reactExports.useMemo(() => {
     if (!filterByCredentials) {
       return getHostingProviders();
     }
+    if (credentialFetchAttemptsRef.current >= MAX_CREDENTIAL_FETCH_ATTEMPTS) {
+      console.warn(
+        `Exceeded maximum credential fetch attempts (${MAX_CREDENTIAL_FETCH_ATTEMPTS})`
+      );
+      return getHostingProviders();
+    }
+    credentialFetchAttemptsRef.current += 1;
     return getAvailableHostingProviders(userCredentials);
   }, [userCredentials, filterByCredentials]);
   const hostingOptions = reactExports.useMemo(() => {
@@ -33113,6 +33214,9 @@ const HostingSelect = ({
       provider: void 0
     };
   }, [value, hostingOptions]);
+  reactExports.useEffect(() => {
+    credentialFetchAttemptsRef.current = 0;
+  }, []);
   reactExports.useEffect(() => {
     if (selectedOption) {
       setInputValue(selectedOption.name);
@@ -33125,6 +33229,7 @@ const HostingSelect = ({
     try {
       setIsSubmitting(true);
       const option = newValue;
+      credentialFetchAttemptsRef.current = 0;
       await onSave(option.id);
       setIsUserTyping(false);
       setInputValue(option.name);
@@ -43012,17 +43117,27 @@ const ModelSelect = ({
     const models = getModelsForHostingProvider(hostingId);
     return models;
   }, [hostingId]);
-  const { refreshModels } = useModels();
+  const { refreshModels, isLoading: isModelsLoading } = useModels();
   const previousHostingIdRef = reactExports.useRef(null);
   const refreshTimeRef = reactExports.useRef(null);
+  const refreshAttemptCountRef = reactExports.useRef(0);
+  const MAX_REFRESH_ATTEMPTS = 3;
   reactExports.useEffect(() => {
     if (hostingId && previousHostingIdRef.current !== hostingId) {
       previousHostingIdRef.current = hostingId;
+      refreshAttemptCountRef.current = 0;
       const timeoutId = setTimeout(() => {
         const now = Date.now();
         const lastRefreshTime = refreshTimeRef.current;
         const THROTTLE_DURATION = 2e3;
-        if (!lastRefreshTime || now - lastRefreshTime > THROTTLE_DURATION) {
+        if (refreshAttemptCountRef.current >= MAX_REFRESH_ATTEMPTS) {
+          console.warn(
+            `Exceeded maximum model refresh attempts (${MAX_REFRESH_ATTEMPTS}) for hosting provider ${hostingId}`
+          );
+          return;
+        }
+        if ((!lastRefreshTime || now - lastRefreshTime > THROTTLE_DURATION) && !isModelsLoading) {
+          refreshAttemptCountRef.current += 1;
           refreshModels();
           refreshTimeRef.current = now;
         }
@@ -43030,7 +43145,7 @@ const ModelSelect = ({
       return () => clearTimeout(timeoutId);
     }
     return void 0;
-  }, [hostingId, refreshModels]);
+  }, [hostingId, refreshModels, isModelsLoading]);
   const modelOptions = reactExports.useMemo(() => {
     const options = [
       {
@@ -43269,8 +43384,8 @@ const ModelHostingSection = ({
   updateAgentMutation
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$6, { variant: "subtitle1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$3, { icon: faServer }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$7, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$4, { icon: faServer }),
       "Model & Hosting",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tooltip,
@@ -43278,7 +43393,7 @@ const ModelHostingSection = ({
           title: "Configure which model and hosting provider to use",
           arrow: true,
           placement: "top",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$2, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$3, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
         }
       )
     ] }),
@@ -82296,6 +82411,10 @@ const MarkdownContent = styled$1(Box, {
   })
 );
 const convertUrlsToMarkdownLinks = (text2) => {
+  const markdownLinkRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
+  if (markdownLinkRegex.test(text2)) {
+    return text2;
+  }
   const urlRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
   return text2.replace(
     urlRegex,
@@ -83395,6 +83514,53 @@ const useDeleteAgent = () => {
     }
   });
 };
+const useImportAgent = () => {
+  const queryClient2 = useQueryClient();
+  const client = createLocalOperatorClient(apiConfig.baseUrl);
+  return useMutation({
+    mutationFn: async (file) => {
+      try {
+        const response = await client.agents.importAgent(file);
+        if (response.status >= 400) {
+          throw new Error(response.message || "Failed to import agent");
+        }
+        return response.result;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while importing the agent";
+        y$1.error(errorMessage);
+        throw error;
+      }
+    },
+    onSuccess: (data) => {
+      queryClient2.invalidateQueries({ queryKey: agentsQueryKey });
+      y$1.success("Agent imported successfully");
+      return data;
+    },
+    onError: (error) => {
+      console.error("Error importing agent:", error);
+    }
+  });
+};
+const useExportAgent = () => {
+  const client = createLocalOperatorClient(apiConfig.baseUrl);
+  return useMutation({
+    mutationFn: async (agentId) => {
+      try {
+        return await client.agents.exportAgent(agentId);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : `An unknown error occurred while exporting agent ${agentId}`;
+        y$1.error(errorMessage);
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      y$1.success("Agent exported successfully");
+    },
+    onError: (error) => {
+      console.error("Error exporting agent:", error);
+    }
+  });
+};
 const OptionsIconButton = styled$1(IconButton)({
   opacity: 0,
   transition: "opacity 0.2s",
@@ -83434,7 +83600,8 @@ const AgentOptionsMenu = ({
   buttonSx = {},
   isAgentsPage = false,
   onViewAgentSettings,
-  onChatWithAgent
+  onChatWithAgent,
+  onExportAgent
 }) => {
   const [menuAnchorEl, setMenuAnchorEl] = reactExports.useState(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = reactExports.useState(false);
@@ -83521,6 +83688,19 @@ const AgentOptionsMenu = ({
               ]
             }
           ),
+          onExportAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            StyledMenuItem,
+            {
+              onClick: () => {
+                onExportAgent();
+                handleCloseMenu();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFileExport, size: "sm" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: "Export Agent" })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(DeleteMenuItem, { onClick: handleOpenDeleteConfirmation, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon, { color: "error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTrash, size: "sm" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: "Delete Agent" })
@@ -83631,7 +83811,7 @@ const CompactPagination = ({
     )
   ] });
 };
-const StyledIcon = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
+const StyledIcon$1 = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
   color: theme2.palette.primary.main,
   fontSize: "1.2rem"
 }));
@@ -83665,7 +83845,7 @@ const NameField = styled$1(StyledTextField$1)({
     transform: "translate(14px, -9px) scale(0.75)"
   }
 });
-const Subtitle = styled$1(Typography)(({ theme: theme2 }) => ({
+const Subtitle$1 = styled$1(Typography)(({ theme: theme2 }) => ({
   color: theme2.palette.text.secondary,
   fontSize: "0.875rem",
   marginTop: 4,
@@ -83703,7 +83883,7 @@ const CreateAgentDialog = ({
   const isLoading = createAgentMutation.isPending;
   const isSubmitDisabled = isLoading || !name2.trim();
   const dialogTitle = /* @__PURE__ */ jsxRuntimeExports.jsxs(TitleContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIcon, { icon: faRobot }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIcon$1, { icon: faRobot }),
     "Create New Agent"
   ] });
   const dialogActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -83736,7 +83916,7 @@ const CreateAgentDialog = ({
       actions: dialogActions,
       maxWidth: "sm",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle, { children: "Configure your new AI assistant with a name and optional description" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle$1, { children: "Configure your new AI assistant with a name and optional description" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("form", { id: "create-agent-form", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             NameField,
@@ -83777,6 +83957,199 @@ const CreateAgentDialog = ({
     }
   );
 };
+const StyledIcon = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
+  color: theme2.palette.primary.main,
+  fontSize: "1.2rem"
+}));
+const UploadArea = styled$1(Box)(({ theme: theme2 }) => ({
+  border: `2px dashed ${theme2.palette.divider}`,
+  borderRadius: theme2.shape.borderRadius * 2,
+  padding: theme2.spacing(4),
+  textAlign: "center",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out",
+  backgroundColor: alpha(theme2.palette.background.paper, 0.6),
+  "&:hover": {
+    borderColor: theme2.palette.primary.main,
+    backgroundColor: alpha(theme2.palette.action.hover, 0.1)
+  },
+  "&.drag-active": {
+    borderColor: theme2.palette.primary.main,
+    backgroundColor: alpha(theme2.palette.primary.main, 0.05),
+    boxShadow: `0 0 0 3px ${alpha(theme2.palette.primary.main, 0.15)}`
+  }
+}));
+const UploadIcon = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
+  fontSize: "2rem",
+  color: theme2.palette.text.secondary,
+  marginBottom: theme2.spacing(2)
+}));
+const FileInput = styled$1("input")({
+  display: "none"
+});
+const Subtitle = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  fontSize: "0.875rem",
+  marginTop: 4,
+  marginBottom: 16
+}));
+const ErrorMessage = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.error.main,
+  fontSize: "0.875rem",
+  marginTop: theme2.spacing(2)
+}));
+const ImportAgentDialog = ({
+  open,
+  onClose,
+  onAgentImported
+}) => {
+  const [file, setFile] = reactExports.useState(null);
+  const [isDragActive, setIsDragActive] = reactExports.useState(false);
+  const [error, setError] = reactExports.useState(null);
+  const fileInputRef = reactExports.useRef(null);
+  const importAgentMutation = useImportAgent();
+  const handleDragEnter = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+  const handleDragOver = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const validateFile = reactExports.useCallback((file2) => {
+    if (!file2.name.toLowerCase().endsWith(".zip")) {
+      setError("Only ZIP files are supported");
+      return false;
+    }
+    setError(null);
+    return true;
+  }, []);
+  const handleDrop = reactExports.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const droppedFile = e.dataTransfer.files[0];
+        if (validateFile(droppedFile)) {
+          setFile(droppedFile);
+        }
+      }
+    },
+    [validateFile]
+  );
+  const handleFileSelect = reactExports.useCallback(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const selectedFile = e.target.files[0];
+        if (validateFile(selectedFile)) {
+          setFile(selectedFile);
+        }
+      }
+    },
+    [validateFile]
+  );
+  const handleClickUpload = reactExports.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleSubmit = async () => {
+    if (!file) return;
+    try {
+      const result = await importAgentMutation.mutateAsync(file);
+      setFile(null);
+      setError(null);
+      if (onAgentImported && result) {
+        onAgentImported(result.id);
+      }
+      onClose();
+    } catch (error2) {
+      console.error("Failed to import agent:", error2);
+    }
+  };
+  const handleClose = () => {
+    setFile(null);
+    setError(null);
+    onClose();
+  };
+  const isLoading = importAgentMutation.isPending;
+  const isSubmitDisabled = isLoading || !file;
+  const dialogTitle = /* @__PURE__ */ jsxRuntimeExports.jsxs(TitleContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIcon, { icon: faFileImport }),
+    "Import Agent"
+  ] });
+  const dialogActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SecondaryButton,
+      {
+        onClick: handleClose,
+        variant: "outlined",
+        disabled: isLoading,
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PrimaryButton,
+      {
+        onClick: handleSubmit,
+        disabled: isSubmitDisabled,
+        startIcon: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
+        children: "Import Agent"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    BaseDialog,
+    {
+      open,
+      onClose: handleClose,
+      title: dialogTitle,
+      actions: dialogActions,
+      maxWidth: "sm",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle, { children: "Import an agent from a ZIP file exported from Local Operator. The file should contain an agent.yml file." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileInput,
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: ".zip",
+              onChange: handleFileSelect,
+              disabled: isLoading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            UploadArea,
+            {
+              onClick: handleClickUpload,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              className: isDragActive ? "drag-active" : "",
+              children: file ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { icon: faFileImport }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", gutterBottom: true, children: file.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "Click or drag to replace" })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { icon: faUpload }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", gutterBottom: true, children: "Drag and drop a ZIP file here" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "or click to select a file" })
+              ] })
+            }
+          ),
+          error && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { children: error })
+        ] })
+      ]
+    }
+  );
+};
 const SidebarHeaderContainer = styled$1(Box)(({ theme: theme2 }) => ({
   padding: theme2.spacing(3),
   borderBottom: "1px solid rgba(255,255,255,0.08)"
@@ -83787,25 +84160,28 @@ const HeaderRow = styled$1(Box)({
   alignItems: "center",
   marginBottom: 16
 });
+const ActionsContainer = styled$1(Box)({
+  display: "flex",
+  gap: 8
+});
 const SidebarTitle$1 = styled$1(Typography)({
   fontWeight: 600,
   fontSize: "1rem"
 });
-const NewAgentButton = styled$1(Button)(({ theme: theme2 }) => ({
-  borderRadius: 8,
-  textTransform: "none",
-  fontWeight: 600,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingTop: 6.4,
-  paddingBottom: 6.4,
+const ActionButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+  borderRadius: 10,
+  padding: 8,
+  backgroundColor: alpha(theme2.palette.primary.main, 0.1),
+  color: theme2.palette.primary.main,
   transition: "all 0.2s ease-in-out",
   "&:hover": {
-    boxShadow: `0 2px 8px ${theme2.palette.primary.main}33`,
-    transform: "translateY(-1px)"
+    backgroundColor: alpha(theme2.palette.primary.main, 0.2),
+    transform: "translateY(-2px)",
+    boxShadow: `0 4px 8px ${alpha(theme2.palette.primary.main, 0.25)}`
   },
   "&:active": {
-    transform: "translateY(0)"
+    transform: "translateY(0)",
+    boxShadow: `0 2px 4px ${alpha(theme2.palette.primary.main, 0.2)}`
   }
 }));
 const SearchField = styled$1(TextField)(({ theme: theme2 }) => ({
@@ -83837,22 +84213,33 @@ const SidebarHeader$1 = ({
   onSearchChange,
   onNewAgentClick,
   searchPlaceholder = "Search agents",
-  newAgentTooltip = "Create a new agent"
+  newAgentTooltip = "Create a new agent",
+  onImportAgentClick,
+  importAgentTooltip = "Import an agent from a ZIP file"
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarHeaderContainer, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderRow, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarTitle$1, { variant: "subtitle1", children: title }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: newAgentTooltip, arrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        NewAgentButton,
-        {
-          variant: "outlined",
-          color: "primary",
-          size: "small",
-          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPlus }),
-          onClick: onNewAgentClick,
-          children: "New Agent"
-        }
-      ) })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionsContainer, { children: [
+        onImportAgentClick && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: importAgentTooltip, arrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ActionButton,
+          {
+            onClick: onImportAgentClick,
+            size: "small",
+            "aria-label": "Import agent",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFileImport })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: newAgentTooltip, arrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ActionButton,
+          {
+            onClick: onNewAgentClick,
+            size: "small",
+            "aria-label": "New agent",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPlus })
+          }
+        ) })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       SearchField,
@@ -85460,7 +85847,9 @@ const ChatSidebar = ({
 }) => {
   const [searchQuery, setSearchQuery] = reactExports.useState("");
   const [isCreateDialogOpen, setIsCreateDialogOpen] = reactExports.useState(false);
+  const [isImportDialogOpen, setIsImportDialogOpen] = reactExports.useState(false);
   const perPage = 50;
+  const exportAgentMutation = useExportAgent();
   const { page, setPage } = usePaginationParams();
   const {
     data: agents = [],
@@ -85486,6 +85875,32 @@ const ChatSidebar = ({
   const handleCloseCreateDialog = reactExports.useCallback(() => {
     setIsCreateDialogOpen(false);
   }, []);
+  const handleOpenImportDialog = reactExports.useCallback(() => {
+    setIsImportDialogOpen(true);
+  }, []);
+  const handleCloseImportDialog = reactExports.useCallback(() => {
+    setIsImportDialogOpen(false);
+  }, []);
+  const handleExportAgent = reactExports.useCallback(
+    async (agentId) => {
+      try {
+        const blob = await exportAgentMutation.mutateAsync(agentId);
+        const agent = agents.find((a2) => a2.id === agentId);
+        const agentName = agent ? agent.name.replace(/\s+/g, "-").toLowerCase() : agentId;
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `${agentName}-export.zip`;
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      } catch (error) {
+        console.error("Failed to export agent:", error);
+      }
+    },
+    [agents, exportAgentMutation]
+  );
   const handleAgentCreated = reactExports.useCallback(
     (agentId) => {
       const fetchAndSelectAgent = async () => {
@@ -85529,7 +85944,9 @@ const ChatSidebar = ({
         title: "Agents",
         searchQuery,
         onSearchChange: (query) => setSearchQuery(query),
-        onNewAgentClick: handleOpenCreateDialog
+        onNewAgentClick: handleOpenCreateDialog,
+        onImportAgentClick: handleOpenImportDialog,
+        importAgentTooltip: "Import an agent from a ZIP file"
       }
     ),
     isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingContainer$4, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 40, thickness: 4 }) }) : isError ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -85559,6 +85976,7 @@ const ChatSidebar = ({
             agentName: agent.name,
             isAgentsPage: false,
             onViewAgentSettings: onNavigateToAgentSettings ? () => onNavigateToAgentSettings(agent.id) : void 0,
+            onExportAgent: () => handleExportAgent(agent.id),
             onAgentDeleted: (deletedAgentId) => {
               if (selectedConversation === deletedAgentId) {
                 onSelectConversation("");
@@ -85655,6 +86073,14 @@ const ChatSidebar = ({
         onAgentCreated: handleAgentCreated
       }
     ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ImportAgentDialog,
+      {
+        open: isImportDialogOpen,
+        onClose: handleCloseImportDialog,
+        onAgentImported: handleAgentCreated
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
@@ -86089,18 +86515,18 @@ const PageHeader = ({
     children
   ] });
 };
-const SectionTitle$5 = styled$1(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$6 = styled$1(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
   alignItems: "center",
   color: theme2.palette.text.primary
 }));
-const TitleIcon$2 = styled$1(FontAwesomeIcon)({
+const TitleIcon$3 = styled$1(FontAwesomeIcon)({
   marginRight: 10,
   color: "#f2f2f3"
 });
-const InfoButton$1 = styled$1(IconButton)(({ theme: theme2 }) => ({
+const InfoButton$2 = styled$1(IconButton)(({ theme: theme2 }) => ({
   marginLeft: theme2.spacing(1),
   color: theme2.palette.primary.main,
   "&:hover": {
@@ -86193,8 +86619,8 @@ const ChatSettings = ({
     setLocalAgent(selectedAgent);
   }, [selectedAgent]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 4, mb: 3 }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$5, { variant: "subtitle1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$2, { icon: faComments }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$6, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$3, { icon: faComments }),
       "Chat Settings",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tooltip,
@@ -86202,7 +86628,7 @@ const ChatSettings = ({
           title: "Settings that control how the agent generates responses",
           arrow: true,
           placement: "top",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$1, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$2, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
         }
       )
     ] }),
@@ -86722,14 +87148,14 @@ const HeaderContainer = styled$1(Box)(({ theme: theme2 }) => ({
   marginBottom: theme2.spacing(2),
   gap: theme2.spacing(2)
 }));
-const SectionTitle$4 = styled$1(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$5 = styled$1(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
   alignItems: "center",
   color: theme2.palette.text.primary
 }));
-const TitleIcon$1 = styled$1(FontAwesomeIcon)({
+const TitleIcon$2 = styled$1(FontAwesomeIcon)({
   marginRight: 10,
   color: "#f2f2f3"
 });
@@ -86862,8 +87288,8 @@ const GeneralSettings = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { mb: 3 } }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 3 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$4, { variant: "subtitle1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$1, { icon: faInfoCircle }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$5, { variant: "subtitle1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$2, { icon: faInfoCircle }),
         "Agent Information"
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -86927,18 +87353,18 @@ const GeneralSettings = ({
     ] })
   ] });
 };
-const SectionTitle$3 = styled$1(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$4 = styled$1(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
   alignItems: "center",
   color: theme2.palette.text.primary
 }));
-const TitleIcon = styled$1(FontAwesomeIcon)({
+const TitleIcon$1 = styled$1(FontAwesomeIcon)({
   marginRight: 10,
   color: "#f2f2f3"
 });
-const InfoButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+const InfoButton$1 = styled$1(IconButton)(({ theme: theme2 }) => ({
   marginLeft: theme2.spacing(1),
   color: theme2.palette.primary.main,
   "&:hover": {
@@ -86954,8 +87380,8 @@ const SecuritySettings = ({
   initialSelectedAgentId
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 1 }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$3, { variant: "subtitle1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon, { icon: faShieldAlt }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$4, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$1, { icon: faShieldAlt }),
       "Security Prompt",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tooltip,
@@ -86963,7 +87389,7 @@ const SecuritySettings = ({
           title: "Security instructions that guide the agent's behavior and limitations",
           arrow: true,
           placement: "top",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton$1, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
         }
       )
     ] }),
@@ -86996,6 +87422,147 @@ const SecuritySettings = ({
     )
   ] });
 };
+const agentSystemPromptQueryKey = (agentId) => [
+  "agent-system-prompt",
+  agentId
+];
+const useAgentSystemPrompt = (agentId) => {
+  const { shouldEnableQuery } = useConnectivityGate();
+  return useQuery({
+    // Only enable the query if server is online and agent ID is provided
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!agentId,
+    queryKey: agentSystemPromptQueryKey(agentId),
+    queryFn: async () => {
+      try {
+        const client = createLocalOperatorClient(apiConfig.baseUrl);
+        const response = await client.agents.getAgentSystemPrompt(agentId);
+        if (response.status >= 400) {
+          throw new Error(
+            response.message || "Failed to fetch agent system prompt"
+          );
+        }
+        return response.result?.system_prompt || "";
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching agent system prompt";
+        showErrorToast(errorMessage);
+        throw error;
+      }
+    },
+    // Prevent automatic refetches on window focus
+    refetchOnWindowFocus: false,
+    // Prevent stale time to avoid unnecessary refetches
+    staleTime: 5e3
+  });
+};
+const useUpdateAgentSystemPrompt = (agentId) => {
+  const queryClient2 = useQueryClient();
+  const client = createLocalOperatorClient(apiConfig.baseUrl);
+  return useMutation({
+    mutationFn: async (systemPrompt) => {
+      try {
+        const response = await client.agents.updateAgentSystemPrompt(
+          agentId,
+          systemPrompt
+        );
+        if (response.status >= 400) {
+          throw new Error(
+            response.message || "Failed to update agent system prompt"
+          );
+        }
+        return response;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while updating agent system prompt";
+        y$1.error(errorMessage);
+        throw error;
+      }
+    },
+    onSuccess: async () => {
+      await queryClient2.invalidateQueries({
+        queryKey: agentSystemPromptQueryKey(agentId)
+      });
+      y$1.success("Agent system prompt updated successfully");
+    },
+    onError: (error) => {
+      console.error("Error updating agent system prompt:", error);
+    }
+  });
+};
+const SectionTitle$3 = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontWeight: 600,
+  marginBottom: theme2.spacing(2),
+  display: "flex",
+  alignItems: "center",
+  color: theme2.palette.text.primary
+}));
+const TitleIcon = styled$1(FontAwesomeIcon)({
+  marginRight: 10,
+  color: "#f2f2f3"
+});
+const InfoButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+  marginLeft: theme2.spacing(1),
+  color: theme2.palette.primary.main,
+  "&:hover": {
+    backgroundColor: alpha(theme2.palette.primary.main, 0.08)
+  }
+}));
+const SystemPromptSettings = ({
+  selectedAgent,
+  savingField,
+  setSavingField,
+  refetchAgent,
+  initialSelectedAgentId
+}) => {
+  const { data: systemPrompt, isLoading } = useAgentSystemPrompt(
+    selectedAgent.id
+  );
+  const updateSystemPromptMutation = useUpdateAgentSystemPrompt(
+    selectedAgent.id
+  );
+  const [localSystemPrompt, setLocalSystemPrompt] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (systemPrompt !== void 0) {
+      setLocalSystemPrompt(systemPrompt);
+    }
+  }, [systemPrompt]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$3, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon, { icon: faRobot }),
+      "System Prompt",
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Tooltip,
+        {
+          title: "System instructions that define the agent's behavior and capabilities",
+          arrow: true,
+          placement: "top",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoButton, { size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faInfoCircle, size: "xs" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EditableField,
+      {
+        value: localSystemPrompt,
+        label: "",
+        placeholder: isLoading ? "Loading system prompt..." : "Enter system prompt...",
+        multiline: true,
+        rows: 6,
+        isSaving: savingField === "system_prompt",
+        onSave: async (value) => {
+          setSavingField("system_prompt");
+          try {
+            await updateSystemPromptMutation.mutateAsync(value);
+            if (selectedAgent.id === initialSelectedAgentId && refetchAgent) {
+              await refetchAgent();
+            }
+          } catch (error) {
+          } finally {
+            setSavingField(null);
+          }
+        }
+      }
+    )
+  ] });
+};
 const DetailsPaper = styled$1(Paper)(({ theme: theme2 }) => ({
   padding: theme2.spacing(4),
   height: "100%",
@@ -87090,6 +87657,16 @@ const AgentSettings = ({
         refetchAgent,
         initialSelectedAgentId
       }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SystemPromptSettings,
+      {
+        selectedAgent,
+        savingField,
+        setSavingField,
+        refetchAgent,
+        initialSelectedAgentId
+      }
     )
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(EmptyStateContainer$2, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderIcon, { icon: faRobot }),
@@ -87198,7 +87775,9 @@ const AgentsSidebar = ({
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
   const [isCreateDialogOpen, setIsCreateDialogOpen] = reactExports.useState(false);
+  const [isImportDialogOpen, setIsImportDialogOpen] = reactExports.useState(false);
   const perPage = 50;
+  const exportAgentMutation = useExportAgent();
   const { page, setPage } = usePaginationParams();
   const [stableAgents, setStableAgents] = reactExports.useState([]);
   const prevFetchingRef = reactExports.useRef(false);
@@ -87234,6 +87813,32 @@ const AgentsSidebar = ({
   const handleCloseCreateDialog = reactExports.useCallback(() => {
     setIsCreateDialogOpen(false);
   }, []);
+  const handleOpenImportDialog = reactExports.useCallback(() => {
+    setIsImportDialogOpen(true);
+  }, []);
+  const handleCloseImportDialog = reactExports.useCallback(() => {
+    setIsImportDialogOpen(false);
+  }, []);
+  const handleExportAgent = reactExports.useCallback(
+    async (agentId) => {
+      try {
+        const blob = await exportAgentMutation.mutateAsync(agentId);
+        const agent = agents.find((a2) => a2.id === agentId);
+        const agentName = agent ? agent.name.replace(/\s+/g, "-").toLowerCase() : agentId;
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `${agentName}-export.zip`;
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      } catch (error) {
+        console.error("Failed to export agent:", error);
+      }
+    },
+    [agents, exportAgentMutation]
+  );
   const handleAgentCreated = reactExports.useCallback(
     (agentId) => {
       const fetchAndSelectAgent = async () => {
@@ -87275,7 +87880,9 @@ const AgentsSidebar = ({
         title: "Agents",
         searchQuery,
         onSearchChange: (query) => setSearchQuery(query),
-        onNewAgentClick: handleOpenCreateDialog
+        onNewAgentClick: handleOpenCreateDialog,
+        onImportAgentClick: handleOpenImportDialog,
+        importAgentTooltip: "Import an agent from a ZIP file"
       }
     ),
     isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 40, thickness: 4 }) }) : isError ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -87308,6 +87915,7 @@ const AgentsSidebar = ({
               refetch();
             },
             onChatWithAgent: () => navigate(`/chat/${agent.id}`),
+            onExportAgent: () => handleExportAgent(agent.id),
             buttonSx: {
               mr: 0.5,
               width: 32,
@@ -87371,6 +87979,14 @@ const AgentsSidebar = ({
         onAgentCreated: handleAgentCreated
       }
     ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ImportAgentDialog,
+      {
+        open: isImportDialogOpen,
+        onClose: handleCloseImportDialog,
+        onAgentImported: handleAgentCreated
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
@@ -87419,6 +88035,7 @@ const AgentsPage = () => {
   const { agentId, navigateToAgent, clearAgentId } = useAgentRouteParam();
   const navigate = useNavigate();
   const prevAgentIdRef = reactExports.useRef(agentId);
+  const exportAgentMutation = useExportAgent();
   const { setLastAgentsPageAgentId, getLastAgentId, clearLastAgentId } = useAgentSelectionStore();
   const { data: agents = [] } = useAgents();
   const effectiveAgentId = agentId || getLastAgentId("agents");
@@ -87443,6 +88060,22 @@ const AgentsPage = () => {
       setLastAgentsPageAgentId(agentId);
     }
   }, [agentId, setLastAgentsPageAgentId]);
+  const handleExportAgent = async () => {
+    if (!selectedAgent) return;
+    try {
+      const blob = await exportAgentMutation.mutateAsync(selectedAgent.id);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${selectedAgent.name.replace(/\s+/g, "-").toLowerCase()}-lo-agent.zip`;
+      document.body.appendChild(a);
+      a.click();
+      URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error("Failed to export agent:", error);
+    }
+  };
   reactExports.useEffect(() => {
     if (initialAgent) {
       if (agentId !== prevAgentIdRef.current) {
@@ -87479,33 +88112,69 @@ const AgentsPage = () => {
             subtitle: "View, configure and manage your AI agents from a central dashboard"
           }
         ),
-        selectedAgent && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { position: "absolute", top: 0, right: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Tooltip,
+        selectedAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Box,
           {
-            title: `Chat with ${selectedAgent?.name || "this Agent"}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                variant: "outlined",
-                color: "primary",
-                size: "small",
-                startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faComment }),
-                onClick: () => navigate(`/chat/${selectedAgent.id}`),
-                sx: {
-                  borderRadius: 2,
-                  textTransform: "none",
-                  fontWeight: 500,
-                  transition: "all 0.2s ease-in-out",
-                  "&:hover": {
-                    backgroundColor: alpha("#38C96A", 0.08),
-                    transform: "translateY(-1px)"
-                  }
-                },
-                children: "Chat"
-              }
-            )
+            sx: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              display: "flex",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Export Agent", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "primary",
+                  size: "small",
+                  startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFileExport }),
+                  onClick: handleExportAgent,
+                  disabled: exportAgentMutation.isPending,
+                  sx: {
+                    borderRadius: 2,
+                    textTransform: "none",
+                    fontWeight: 500,
+                    transition: "all 0.2s ease-in-out",
+                    "&:hover": {
+                      backgroundColor: alpha("#38C96A", 0.08),
+                      transform: "translateY(-1px)"
+                    }
+                  },
+                  children: "Export"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Tooltip,
+                {
+                  title: `Chat with ${selectedAgent?.name || "this Agent"}`,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      color: "primary",
+                      size: "small",
+                      startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faComment }),
+                      onClick: () => navigate(`/chat/${selectedAgent.id}`),
+                      sx: {
+                        borderRadius: 2,
+                        textTransform: "none",
+                        fontWeight: 500,
+                        transition: "all 0.2s ease-in-out",
+                        "&:hover": {
+                          backgroundColor: alpha("#38C96A", 0.08),
+                          transform: "translateY(-1px)"
+                        }
+                      },
+                      children: "Chat"
+                    }
+                  )
+                }
+              )
+            ]
           }
-        ) })
+        )
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(AgentDetailsContainer, { sx: { opacity: selectedAgent ? 1 : 0.7 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         AgentSettings,