local-operator-ui 0.1.4 → 0.2.0

package/out/renderer/assets/{index-C6aXGuuj.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 faQuestion, aF as faLightbulb, aG as faChevronRight, aH as faFile, aI as faUser, aJ as faEllipsisVertical, aK as faComment, aL as faChevronLeft, aM as faPlus, aN as faSearch, aO as faCommentSlash, aP as faArrowRight, aQ as faComments, aR as faTag, aS as faIdCard, aT as faCalendarAlt, aU as faCodeBranch, aV as faShieldAlt, aW as faArrowLeft, aX as requireReact, aY as LinearProgress, aZ as keyframes, a_ as faShield, a$ as faSignOut, b0 as faMagicWandSparkles, b1 as faBrain, b2 as faWandMagicSparkles, b3 as faExternalLinkAlt, b4 as faKey, b5 as faGlobe, b6 as faLock, b7 as faEdit, b8 as faSave, b9 as faEnvelope, ba as faCloudUploadAlt, bb as faHistory, bc as faListAlt, bd as library$1, be as icons$1, bf as CssBaseline, bg as ReactDOM$1, bh as ThemeProvider, bi as theme, bj as ErrorBoundary } from "./theme-DWJi6s4t.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 = {
@@ -25844,8 +25942,18 @@ const getImageUrl = (baseUrl, imagePath) => {
   const encodedPath = encodeURIComponent(normalizedPath);
   return `${normalizedBaseUrl}/v1/static/images?path=${encodedPath}`;
 };
+const getVideoUrl = (baseUrl, videoPath) => {
+  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+  let normalizedPath = videoPath;
+  if (normalizedPath.startsWith("file://")) {
+    normalizedPath = normalizedPath.substring(7);
+  }
+  const encodedPath = encodeURIComponent(normalizedPath);
+  return `${normalizedBaseUrl}/v1/static/videos?path=${encodedPath}`;
+};
 const StaticApi = {
-  getImageUrl
+  getImageUrl,
+  getVideoUrl
 };
 class LocalOperatorClient {
   baseUrl;
@@ -30116,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
@@ -30149,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
@@ -30311,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
   });
@@ -30738,8 +30842,15 @@ const useJobPolling = ({
   conversationId,
   addMessage
 }) => {
-  const [currentJobId, setCurrentJobId] = reactExports.useState(null);
+  const [currentJobId, setCurrentJobIdInternal] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
+  const [currentExecution, setCurrentExecution] = reactExports.useState(null);
+  const setCurrentJobId = reactExports.useCallback((jobId) => {
+    setCurrentJobIdInternal(jobId);
+    if (jobId === null) {
+      setCurrentExecution(null);
+    }
+  }, []);
   const queryClient2 = useQueryClient();
   const { getMessages, setMessages } = useChatStore();
   const lastProcessedJobDataRef = reactExports.useRef(null);
@@ -30786,7 +30897,13 @@ const useJobPolling = ({
         return false;
       }
     },
-    [client.jobs, currentJobId, shouldEnableQuery, getConnectivityError]
+    [
+      client.jobs,
+      currentJobId,
+      shouldEnableQuery,
+      getConnectivityError,
+      setCurrentJobId
+    ]
   );
   reactExports.useEffect(() => {
     if (conversationId !== previousConversationIdRef.current) {
@@ -30833,7 +30950,13 @@ const useJobPolling = ({
       }
     }
     previousConversationIdRef.current = conversationId;
-  }, [conversationId, client.jobs, shouldEnableQuery, getConnectivityError]);
+  }, [
+    conversationId,
+    client.jobs,
+    shouldEnableQuery,
+    getConnectivityError,
+    setCurrentJobId
+  ]);
   const updateConversationMessages = reactExports.useCallback(
     async (agentId) => {
       if (!agentId) return;
@@ -30922,7 +31045,7 @@ const useJobPolling = ({
       setCurrentJobId(null);
       setIsLoading(false);
     },
-    [conversationId, addMessage, updateConversationMessages]
+    [conversationId, addMessage, updateConversationMessages, setCurrentJobId]
   );
   const {
     data: jobData,
@@ -30940,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,
@@ -30956,6 +31077,9 @@ const useJobPolling = ({
     const jobDataSignature = `${jobData.id}-${jobData.status}-${dataUpdatedAt}`;
     if (jobDataSignature !== lastProcessedJobDataRef.current) {
       lastProcessedJobDataRef.current = jobDataSignature;
+      if (jobData.current_execution) {
+        setCurrentExecution(jobData.current_execution);
+      }
       if (jobData.status === "processing") {
         const debounceTimeout = setTimeout(() => {
           updateConversationMessages(conversationId);
@@ -30964,6 +31088,7 @@ const useJobPolling = ({
       }
       if (jobData.status === "completed" || jobData.status === "failed") {
         handleJobCompletion(jobData);
+        setCurrentExecution(null);
       }
     }
     return void 0;
@@ -30972,7 +31097,9 @@ const useJobPolling = ({
     dataUpdatedAt,
     handleJobCompletion,
     conversationId,
-    updateConversationMessages
+    updateConversationMessages,
+    setCurrentExecution,
+    setCurrentJobId
   ]);
   reactExports.useEffect(() => {
     if (error) {
@@ -30988,7 +31115,8 @@ const useJobPolling = ({
     jobStatus: jobData?.status || null,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   };
 };
 const useScrollToBottom = (dependencies = [], threshold = 300, buttonThreshold = 50) => {
@@ -31090,7 +31218,7 @@ const SidebarContainer$6 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$3 = styled$1(Box)({
+const ContentContainer$4 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -31101,7 +31229,7 @@ const StyledDivider = styled$1(Divider)({
 const ChatLayout = ({ sidebar, content: content2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarContainer$6, { children: sidebar }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$3, { children: content2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$4, { children: content2 })
   ] });
 };
 const useAgentRouteParam = () => {
@@ -31528,6 +31656,9 @@ const useClearAgentConversation = () => {
       queryClient2.invalidateQueries({
         queryKey: ["agent", variables.agentId, "conversation"]
       });
+      queryClient2.invalidateQueries({
+        queryKey: ["conversation-messages", variables.agentId]
+      });
       clearChatMessages(variables.agentId);
       clearMessageHistory(variables.agentId);
       y$1.success("Conversation cleared successfully");
@@ -31786,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),
@@ -31794,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": {
@@ -32430,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,
@@ -32439,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" }) })
         }
       )
     ] }),
@@ -33009,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(() => {
@@ -33074,6 +33214,9 @@ const HostingSelect = ({
       provider: void 0
     };
   }, [value, hostingOptions]);
+  reactExports.useEffect(() => {
+    credentialFetchAttemptsRef.current = 0;
+  }, []);
   reactExports.useEffect(() => {
     if (selectedOption) {
       setInputValue(selectedOption.name);
@@ -33086,6 +33229,7 @@ const HostingSelect = ({
     try {
       setIsSubmitting(true);
       const option = newValue;
+      credentialFetchAttemptsRef.current = 0;
       await onSave(option.id);
       setIsUserTyping(false);
       setInputValue(option.name);
@@ -42973,18 +43117,35 @@ 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(() => {
-        refreshModels();
-      }, 0);
+        const now = Date.now();
+        const lastRefreshTime = refreshTimeRef.current;
+        const THROTTLE_DURATION = 2e3;
+        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;
+        }
+      }, 100);
       return () => clearTimeout(timeoutId);
     }
     return void 0;
-  }, [hostingId, refreshModels]);
+  }, [hostingId, refreshModels, isModelsLoading]);
   const modelOptions = reactExports.useMemo(() => {
     const options = [
       {
@@ -43223,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,
@@ -43232,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" }) })
         }
       )
     ] }),
@@ -44500,366 +44661,6 @@ const MessageInput = ({
     )
   ] });
 };
-const LoadingIndicator = ({ status, agentName = "Agent" }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 2
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Avatar,
-          {
-            sx: {
-              bgcolor: "rgba(56, 201, 106, 0.2)",
-              color: "primary.main"
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot, size: "sm" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Box,
-          {
-            sx: {
-              bgcolor: "background.paper",
-              p: 2,
-              borderRadius: 2,
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16, color: "primary" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: status ? `${agentName} is ${getStatusText(status)}...` : `${agentName} is thinking...` })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const getStatusText = (status) => {
-  switch (status) {
-    case "pending":
-      return "waiting to start";
-    case "processing":
-      return "thinking";
-    case "completed":
-      return "finishing up";
-    case "failed":
-      return "having trouble";
-    case "cancelled":
-      return "was cancelled";
-    default:
-      return "thinking";
-  }
-};
-const HighlightContainer$1 = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "action" && prop !== "isUser"
-})(({ action }) => ({
-  position: "relative",
-  padding: "16px",
-  borderRadius: "8px",
-  marginBottom: "16px",
-  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-  width: "100%",
-  border: `1px solid ${action === "DONE" ? "rgba(76, 175, 80, 0.5)" : "rgba(33, 150, 243, 0.5)"}`,
-  backgroundColor: action === "DONE" ? "rgba(76, 175, 80, 0.1)" : "rgba(33, 150, 243, 0.1)",
-  transition: "all 0.2s ease",
-  "&:hover": {
-    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)"
-  }
-}));
-const ActionBadge = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "action"
-})(({ theme: theme2, action }) => ({
-  position: "absolute",
-  top: "-10px",
-  right: "16px",
-  padding: "4px 8px",
-  borderRadius: "12px",
-  fontSize: "0.7rem",
-  fontWeight: "bold",
-  backgroundColor: action === "DONE" ? theme2.palette.success.main : theme2.palette.info.main,
-  color: "#fff",
-  display: "flex",
-  alignItems: "center",
-  gap: "4px",
-  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
-}));
-const ActionHighlight = ({
-  children,
-  action,
-  isUser,
-  taskClassification,
-  executionType
-}) => {
-  const shouldHighlight = (action === "DONE" || action === "ASK") && taskClassification !== "conversation" || executionType === "response" && taskClassification !== "conversation";
-  if (!shouldHighlight) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer$1, { action, isUser, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { action, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        FontAwesomeIcon,
-        {
-          icon: action === "DONE" ? faCheck : faQuestion,
-          size: "xs"
-        }
-      ),
-      action === "DONE" ? "COMPLETE" : "QUESTION"
-    ] }),
-    children
-  ] });
-};
-const MarkdownContent = styled$1(Box, {
-  shouldForwardProp: (prop) => ![
-    "fontSize",
-    "lineHeight",
-    "paragraphSpacing",
-    "headingScale",
-    "codeSize"
-  ].includes(prop)
-})(
-  ({
-    fontSize = "1.05rem",
-    lineHeight = 1.6,
-    paragraphSpacing = "8px",
-    headingScale = 1,
-    codeSize = "0.85em"
-  }) => ({
-    wordBreak: "break-word",
-    overflowWrap: "break-word",
-    lineHeight,
-    fontSize,
-    "& code": {
-      fontFamily: '"Roboto Mono", monospace',
-      backgroundColor: "rgba(0, 0, 0, 0.3)",
-      padding: "3px 6px",
-      borderRadius: "4px",
-      fontSize: codeSize,
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      color: "#e6e6e6"
-    },
-    "& pre": {
-      backgroundColor: "rgba(0, 0, 0, 0.3)",
-      padding: "16px",
-      borderRadius: "8px",
-      overflowX: "auto",
-      fontFamily: '"Roboto Mono", monospace',
-      fontSize: codeSize,
-      margin: "12px 0",
-      maxWidth: "100%",
-      border: "1px solid rgba(255, 255, 255, 0.1)"
-    },
-    "& pre code": {
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      backgroundColor: "transparent",
-      padding: 0,
-      borderRadius: 0
-    },
-    "& h1": {
-      fontSize: `calc(1.5rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "20px 0 12px 0",
-      borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-      paddingBottom: "8px"
-    },
-    "& h2": {
-      fontSize: `calc(1.3rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "18px 0 10px 0"
-    },
-    "& h3": {
-      fontSize: `calc(1.1rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "16px 0 8px 0"
-    },
-    "& ul": {
-      paddingLeft: "24px",
-      margin: "10px 0"
-    },
-    "& li": {
-      margin: "4px 0"
-    },
-    "& a": {
-      color: "#90caf9",
-      textDecoration: "none",
-      borderBottom: "1px dotted rgba(144, 202, 249, 0.5)",
-      transition: "all 0.2s ease",
-      "&:hover": {
-        textDecoration: "none",
-        borderBottom: "1px solid #90caf9",
-        color: "#bbdefb"
-      }
-    },
-    "& strong": {
-      fontWeight: 600,
-      color: "#e6e6e6"
-    },
-    "& em": {
-      fontStyle: "italic",
-      color: "#e0e0e0"
-    },
-    "& br": {
-      display: "block",
-      content: '""',
-      marginTop: "8px"
-    },
-    "& p:first-of-type": {
-      marginTop: "2px"
-    },
-    "& p": {
-      margin: `${paragraphSpacing} 0`
-    }
-  })
-);
-const convertUrlsToMarkdownLinks = (text2) => {
-  const urlRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
-  return text2.replace(
-    urlRegex,
-    (_match, url, punctuation) => `[${url}](${url})${punctuation || ""}`
-  );
-};
-const MarkdownRenderer = reactExports.memo(
-  ({ content: content2, styleProps }) => {
-    const processedContent = reactExports.useMemo(() => {
-      return convertUrlsToMarkdownLinks(content2.trim());
-    }, [content2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { ...styleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Markdown,
-      {
-        components: {
-          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children })
-        },
-        children: processedContent
-      }
-    ) });
-  }
-);
-const BlockContainer = styled$1(Box)(() => ({
-  width: "95%",
-  cursor: "pointer",
-  transition: "all 0.2s ease",
-  marginLeft: 56,
-  "&:hover": {
-    opacity: 0.9
-  }
-}));
-const BlockHeader = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "executionType" && prop !== "isUser"
-})(
-  ({ theme: theme2, executionType }) => ({
-    display: "flex",
-    alignItems: "center",
-    padding: "8px 12px",
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderLeft: `3px solid ${executionType === "plan" ? theme2.palette.grey[600] : theme2.palette.grey[600]}`
-  })
-);
-const BlockIcon = styled$1(Box)(({ theme: theme2 }) => ({
-  marginRight: 8,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  color: theme2.palette.grey[500]
-}));
-const BlockTitle = styled$1(Typography)(({ theme: theme2 }) => ({
-  fontWeight: 500,
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[500]
-}));
-const BlockContent = styled$1(Typography)(({ theme: theme2 }) => ({
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[400],
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  marginTop: 2
-}));
-const ExpandedContent = styled$1(Box)(({ theme: theme2 }) => ({
-  padding: "12px 16px",
-  backgroundColor: "rgba(0, 0, 0, 0.2)",
-  borderBottomLeftRadius: 4,
-  borderBottomRightRadius: 4,
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[300],
-  borderLeft: `3px solid ${theme2.palette.grey[600]}`,
-  marginLeft: 0
-}));
-const BackgroundBlock = ({
-  content: content2,
-  action,
-  executionType,
-  isUser
-}) => {
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-  const getTitle = () => {
-    switch (action) {
-      case "DONE":
-        return "Task Complete";
-      case "ASK":
-        return "Asking a Question";
-      default:
-        return executionType === "plan" ? "Planning" : "Reflection";
-    }
-  };
-  const getIcon = () => {
-    switch (action) {
-      case "DONE":
-        return faCheck;
-      case "ASK":
-        return faQuestion;
-      default:
-        return executionType === "plan" ? faLightbulb : faCommentDots;
-    }
-  };
-  const getTruncatedContent = (content22, maxLength = 140) => {
-    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { onClick: toggleExpand, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockHeader, { executionType, isUser, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", children: getTitle() }),
-        !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MarkdownRenderer,
-          {
-            content: getTruncatedContent(content2),
-            styleProps: {
-              fontSize: "0.85rem",
-              lineHeight: 1.5,
-              paragraphSpacing: "4px",
-              headingScale: 0.9,
-              codeSize: "0.85em"
-            }
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: isExpanded, timeout: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MarkdownRenderer,
-      {
-        content: content2,
-        styleProps: {
-          fontSize: "0.85rem",
-          lineHeight: 1.5,
-          paragraphSpacing: "4px",
-          headingScale: 0.9,
-          codeSize: "0.85em"
-        }
-      }
-    ) }) })
-  ] });
-};
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -82181,6 +81982,578 @@ function ft(n2) {
   }
   return React.memo(l2);
 }
+const SyntaxHighlighterStyles$1 = ft`
+  .loading-syntax-highlighter * {
+    font-family: 'Roboto Mono', monospace !important;
+  }
+`;
+const dotAnimation = keyframes`
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+`;
+const textStrobeAnimation = keyframes`
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+`;
+const LoadingContainer$5 = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 0
+}));
+const AgentAvatar$2 = styled$1(Avatar)(({ theme: theme2 }) => ({
+  backgroundColor: "rgba(56, 201, 106, 0.2)",
+  color: theme2.palette.primary.main
+}));
+const ContentContainer$3 = styled$1(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  maxWidth: "calc(100% - 60px)"
+}));
+const StatusContainer = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+}));
+const StatusText = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  display: "flex",
+  marginLeft: 16,
+  position: "relative",
+  animation: `${textStrobeAnimation} 3s ease-in-out infinite`
+}));
+const StatusTextContent = styled$1("span")(() => ({
+  wordBreak: "break-word",
+  display: "inline"
+}));
+const StatusControls = styled$1("span")(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  marginLeft: 4,
+  whiteSpace: "nowrap"
+}));
+const DotContainer = styled$1("span")(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative",
+  zIndex: 2,
+  marginLeft: 4
+}));
+const Dot = styled$1("span")(({ theme: theme2, delay }) => ({
+  width: 4,
+  height: 4,
+  borderRadius: "50%",
+  backgroundColor: theme2.palette.text.secondary,
+  margin: "0 1px",
+  animation: `${dotAnimation} 1.4s infinite ease-in-out`,
+  animationDelay: `${delay}s`
+}));
+const CodeToggleButton = styled$1(Button)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  padding: "0 4px",
+  minWidth: "auto",
+  textTransform: "none",
+  marginLeft: 8,
+  height: "auto",
+  fontSize: "0.75rem",
+  lineHeight: 1,
+  opacity: 0.7,
+  borderRadius: "12px",
+  transition: "all 0.2s ease",
+  position: "relative",
+  zIndex: 2,
+  "&:hover": {
+    backgroundColor: "transparent",
+    opacity: 1,
+    color: theme2.palette.primary.light
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: 2,
+    marginLeft: 0
+  }
+}));
+const CodeContainer$4 = styled$1(Box)(() => ({
+  maxWidth: "100%",
+  marginLeft: 16,
+  marginTop: 8
+}));
+const LoadingCodeBlock = ({ code: code2 }) => {
+  if (!code2) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        maxHeight: "300px",
+        overflow: "auto",
+        "&::-webkit-scrollbar": {
+          width: "6px",
+          height: "6px"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "3px"
+        },
+        "&::-webkit-scrollbar-corner": {
+          backgroundColor: "rgba(0, 0, 0, 0.3)"
+        },
+        borderRadius: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles$1, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          highlighter,
+          {
+            language: "python",
+            style: atomOneDark,
+            customStyle: {
+              fontSize: "0.85rem",
+              width: "100%",
+              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
+              padding: "0.75rem",
+              margin: 0
+              // Remove margin to make it more compact
+            },
+            codeTagProps: {
+              style: {
+                fontFamily: '"Roboto Mono", monospace !important'
+              }
+            },
+            className: "loading-syntax-highlighter",
+            wrapLines: true,
+            wrapLongLines: true,
+            children: code2
+          }
+        )
+      ]
+    }
+  );
+};
+const getStatusText = (status) => {
+  switch (status) {
+    case "pending":
+      return "Waiting to start";
+    case "processing":
+      return "Thinking";
+    case "completed":
+      return "Finishing up";
+    case "failed":
+      return "Had trouble";
+    case "cancelled":
+      return "Had to stop";
+    default:
+      return "Thinking";
+  }
+};
+const getDetailedStatusText = (status, execution) => {
+  if (execution.action) {
+    switch (execution.action) {
+      case "CODE":
+        return "Executing code";
+      case "WRITE":
+        return "Writing content";
+      case "EDIT":
+        return "Editing content";
+      case "READ":
+        return "Reading content";
+      case "ASK":
+        return "Formulating a question";
+      case "DONE":
+        return "Completing the task";
+      case "BYE":
+        return "Ending the conversation";
+    }
+  }
+  if (execution.execution_type) {
+    switch (execution.execution_type) {
+      case "plan":
+        return "Planning my approach";
+      case "action":
+        return "Thinking";
+      case "reflection":
+        return "Reflecting on next steps";
+      case "response":
+        return "Writing a response";
+      case "security_check":
+        return "Performing security checks";
+      case "classification":
+        return "Thinking about my response";
+      case "system":
+        return "Processing system tasks";
+      case "user_input":
+        return "Processing your input";
+    }
+  }
+  return status ? getStatusText(status) : "thinking";
+};
+const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
+  const statusText = currentExecution ? getDetailedStatusText(status, currentExecution) : status ? getStatusText(status) : "Thinking";
+  const codeSnippet = currentExecution?.code || null;
+  const message2 = currentExecution?.message || null;
+  const [isCodeExpanded, setIsCodeExpanded] = reactExports.useState(false);
+  const { ref, scrollToBottom: scrollToBottomHook } = useScrollToBottom(
+    [status, currentExecution, message2],
+    300,
+    // Default threshold
+    50
+    // Default button threshold
+  );
+  reactExports.useEffect(() => {
+    if (codeSnippet && isCodeExpanded) {
+      requestAnimationFrame(() => {
+        if (scrollToBottomHook) {
+          scrollToBottomHook();
+        } else if (scrollToBottom) {
+          scrollToBottom();
+        }
+      });
+    }
+  }, [codeSnippet, isCodeExpanded, scrollToBottom, scrollToBottomHook]);
+  const toggleCodeExpansion = () => {
+    setIsCodeExpanded((prev2) => !prev2);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingContainer$5, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, style: { height: 0, width: 0 } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot, size: "sm" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentContainer$3, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusText, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StatusTextContent, { children: message2 ? message2 : `${statusText}` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusControls, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(DotContainer, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0.2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0.4 })
+          ] }),
+          codeSnippet && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CodeToggleButton,
+            {
+              onClick: toggleCodeExpansion,
+              size: "small",
+              variant: "text",
+              startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: isCodeExpanded ? faChevronUp : faChevronDown,
+                  size: "xs",
+                  style: { fontSize: "0.75rem" }
+                }
+              ),
+              children: isCodeExpanded ? "(Hide code)" : "(Show code)"
+            }
+          )
+        ] })
+      ] }) }),
+      codeSnippet && isCodeExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeContainer$4, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingCodeBlock, { code: codeSnippet }) })
+    ] })
+  ] });
+};
+const HighlightContainer$1 = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "action" && prop !== "isUser"
+})(({ action }) => ({
+  position: "relative",
+  padding: "16px",
+  borderRadius: "8px",
+  marginBottom: "16px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+  width: "100%",
+  border: `1px solid ${action === "DONE" ? "rgba(76, 175, 80, 0.5)" : "rgba(33, 150, 243, 0.5)"}`,
+  backgroundColor: action === "DONE" ? "rgba(76, 175, 80, 0.1)" : "rgba(33, 150, 243, 0.1)",
+  transition: "all 0.2s ease",
+  "&:hover": {
+    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)"
+  }
+}));
+const ActionBadge = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "action"
+})(({ theme: theme2, action }) => ({
+  position: "absolute",
+  top: "-10px",
+  right: "16px",
+  padding: "4px 8px",
+  borderRadius: "12px",
+  fontSize: "0.7rem",
+  fontWeight: "bold",
+  backgroundColor: action === "DONE" ? theme2.palette.success.main : theme2.palette.info.main,
+  color: "#fff",
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+}));
+const ActionHighlight = ({
+  children,
+  action,
+  isUser,
+  taskClassification,
+  executionType
+}) => {
+  const shouldHighlight = (action === "DONE" || action === "ASK") && taskClassification !== "conversation" || executionType === "response" && taskClassification !== "conversation";
+  if (!shouldHighlight) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer$1, { action, isUser, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { action, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FontAwesomeIcon,
+        {
+          icon: action === "DONE" ? faCheck : faQuestion,
+          size: "xs"
+        }
+      ),
+      action === "DONE" ? "COMPLETE" : "QUESTION"
+    ] }),
+    children
+  ] });
+};
+const MarkdownContent = styled$1(Box, {
+  shouldForwardProp: (prop) => ![
+    "fontSize",
+    "lineHeight",
+    "paragraphSpacing",
+    "headingScale",
+    "codeSize"
+  ].includes(prop)
+})(
+  ({
+    fontSize = "1.05rem",
+    lineHeight = 1.6,
+    paragraphSpacing = "8px",
+    headingScale = 1,
+    codeSize = "0.85em"
+  }) => ({
+    wordBreak: "break-word",
+    overflowWrap: "break-word",
+    lineHeight,
+    fontSize,
+    "& code": {
+      fontFamily: '"Roboto Mono", monospace',
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      padding: "3px 6px",
+      borderRadius: "4px",
+      fontSize: codeSize,
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      color: "#e6e6e6"
+    },
+    "& pre": {
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      padding: "16px",
+      borderRadius: "8px",
+      overflowX: "auto",
+      fontFamily: '"Roboto Mono", monospace',
+      fontSize: codeSize,
+      margin: "12px 0",
+      maxWidth: "100%",
+      border: "1px solid rgba(255, 255, 255, 0.1)"
+    },
+    "& pre code": {
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      backgroundColor: "transparent",
+      padding: 0,
+      borderRadius: 0
+    },
+    "& h1": {
+      fontSize: `calc(1.5rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "20px 0 12px 0",
+      borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+      paddingBottom: "8px"
+    },
+    "& h2": {
+      fontSize: `calc(1.3rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "18px 0 10px 0"
+    },
+    "& h3": {
+      fontSize: `calc(1.1rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "16px 0 8px 0"
+    },
+    "& ul": {
+      paddingLeft: "24px",
+      margin: "10px 0"
+    },
+    "& li": {
+      margin: "4px 0"
+    },
+    "& a": {
+      color: "#90caf9",
+      textDecoration: "none",
+      borderBottom: "1px dotted rgba(144, 202, 249, 0.5)",
+      transition: "all 0.2s ease",
+      "&:hover": {
+        textDecoration: "none",
+        borderBottom: "1px solid #90caf9",
+        color: "#bbdefb"
+      }
+    },
+    "& strong": {
+      fontWeight: 600,
+      color: "#e6e6e6"
+    },
+    "& em": {
+      fontStyle: "italic",
+      color: "#e0e0e0"
+    },
+    "& br": {
+      display: "block",
+      content: '""',
+      marginTop: "8px"
+    },
+    "& p:first-of-type": {
+      marginTop: "2px"
+    },
+    "& p": {
+      margin: `${paragraphSpacing} 0`
+    }
+  })
+);
+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,
+    (_match, url, punctuation) => `[${url}](${url})${punctuation || ""}`
+  );
+};
+const MarkdownRenderer = reactExports.memo(
+  ({ content: content2, styleProps }) => {
+    const processedContent = reactExports.useMemo(() => {
+      return convertUrlsToMarkdownLinks(content2.trim());
+    }, [content2]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { ...styleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Markdown,
+      {
+        components: {
+          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children })
+        },
+        children: processedContent
+      }
+    ) });
+  }
+);
+const BlockContainer = styled$1(Box)(() => ({
+  width: "95%",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  marginLeft: 56,
+  "&:hover": {
+    opacity: 0.9
+  }
+}));
+const BlockHeader = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "executionType" && prop !== "isUser"
+})(
+  ({ theme: theme2, executionType }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderLeft: `3px solid ${executionType === "plan" ? theme2.palette.grey[600] : theme2.palette.grey[600]}`
+  })
+);
+const BlockIcon = styled$1(Box)(({ theme: theme2 }) => ({
+  marginRight: 8,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  color: theme2.palette.grey[500]
+}));
+const BlockTitle = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontWeight: 500,
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[500]
+}));
+const BlockContent = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[400],
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginTop: 2
+}));
+const ExpandedContent = styled$1(Box)(({ theme: theme2 }) => ({
+  padding: "12px 16px",
+  backgroundColor: "rgba(0, 0, 0, 0.2)",
+  borderBottomLeftRadius: 4,
+  borderBottomRightRadius: 4,
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[300],
+  borderLeft: `3px solid ${theme2.palette.grey[600]}`,
+  marginLeft: 0
+}));
+const BackgroundBlock = ({
+  content: content2,
+  action,
+  executionType,
+  isUser
+}) => {
+  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const getTitle = () => {
+    switch (action) {
+      case "DONE":
+        return "Task Complete";
+      case "ASK":
+        return "Asking a Question";
+      default:
+        return executionType === "plan" ? "Planning" : "Reflection";
+    }
+  };
+  const getIcon = () => {
+    switch (action) {
+      case "DONE":
+        return faCheck;
+      case "ASK":
+        return faQuestion;
+      default:
+        return executionType === "plan" ? faLightbulb : faCommentDots;
+    }
+  };
+  const getTruncatedContent = (content22, maxLength = 140) => {
+    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { onClick: toggleExpand, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockHeader, { executionType, isUser, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", children: getTitle() }),
+        !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MarkdownRenderer,
+          {
+            content: getTruncatedContent(content2),
+            styleProps: {
+              fontSize: "0.85rem",
+              lineHeight: 1.5,
+              paragraphSpacing: "4px",
+              headingScale: 0.9,
+              codeSize: "0.85em"
+            }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: isExpanded, timeout: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MarkdownRenderer,
+      {
+        content: content2,
+        styleProps: {
+          fontSize: "0.85rem",
+          lineHeight: 1.5,
+          paragraphSpacing: "4px",
+          headingScale: 0.9,
+          codeSize: "0.85em"
+        }
+      }
+    ) }) })
+  ] });
+};
 const CodeContainer$3 = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
@@ -82348,7 +82721,7 @@ const FileName = styled$1(Typography)({
     textDecoration: "underline"
   }
 });
-const getFileName$1 = (path) => {
+const getFileName$2 = (path) => {
   const parts = path.split(/[/\\]/);
   return parts[parts.length - 1];
 };
@@ -82360,10 +82733,10 @@ const FileAttachment = ({ file, onClick }) => {
     FileAttachmentContainer,
     {
       onClick: handleClick,
-      title: `Click to open ${getFileName$1(file)}`,
+      title: `Click to open ${getFileName$2(file)}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFile, size: "sm" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$1(file) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$2(file) })
       ]
     }
   );
@@ -82381,7 +82754,7 @@ const AttachmentImage = styled$1("img")({
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
   }
 });
-const getFileName = (path) => {
+const getFileName$1 = (path) => {
   const parts = path.split(/[/\\]/);
   return parts[parts.length - 1];
 };
@@ -82397,9 +82770,9 @@ const ImageAttachment = ({
     AttachmentImage,
     {
       src,
-      alt: getFileName(file),
+      alt: getFileName$1(file),
       onClick: handleClick,
-      title: `Click to open ${getFileName(file)}`
+      title: `Click to open ${getFileName$1(file)}`
     }
   );
 };
@@ -82631,6 +83004,42 @@ const StatusIndicator = ({ status }) => {
   if (!status) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledStatusIndicator, { status, children: status });
 };
+const AttachmentVideo = styled$1("video")({
+  maxWidth: "100%",
+  maxHeight: 300,
+  borderRadius: 8,
+  marginBottom: 8,
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  cursor: "pointer",
+  transition: "transform 0.2s ease, box-shadow 0.2s ease",
+  "&:hover": {
+    transform: "scale(1.02)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+  }
+});
+const getFileName = (path) => {
+  const parts = path.split(/[/\\]/);
+  return parts[parts.length - 1];
+};
+const VideoAttachment = ({
+  file,
+  src,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick(file);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    AttachmentVideo,
+    {
+      src,
+      controls: true,
+      preload: "metadata",
+      onClick: handleClick,
+      title: `Click to open ${getFileName(file)}`
+    }
+  );
+};
 const isWebUrl = (path) => {
   return path.startsWith("http://") || path.startsWith("https://");
 };
@@ -82656,11 +83065,34 @@ const isImage = (path) => {
   const lowerPath = path.toLowerCase();
   return imageExtensions.some((ext) => lowerPath.endsWith(ext));
 };
+const isVideo = (path) => {
+  const videoExtensions = [
+    ".mp4",
+    ".webm",
+    ".ogg",
+    ".mov",
+    ".avi",
+    ".wmv",
+    ".flv",
+    ".mkv",
+    ".m4v",
+    ".3gp",
+    ".3g2"
+  ];
+  const lowerPath = path.toLowerCase();
+  return videoExtensions.some((ext) => lowerPath.endsWith(ext));
+};
 const getAttachmentUrl = (client, path) => {
-  if (isImage(path) && !path.startsWith("http")) {
-    const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+  if (path.startsWith("http")) {
+    return path;
+  }
+  const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+  if (isImage(path)) {
     return client.static.getImageUrl(normalizedPath);
   }
+  if (isVideo(path)) {
+    return client.static.getVideoUrl(normalizedPath);
+  }
   return path;
 };
 const MessageItem = reactExports.memo(
@@ -82716,6 +83148,15 @@ const MessageItem = reactExports.memo(
           },
           `${message2.id}-${file}`
         )) }),
+        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          VideoAttachment,
+          {
+            file,
+            src: getUrl(file),
+            onClick: handleFileClick
+          },
+          `${message2.id}-${file}`
+        )) }),
         message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
         (() => {
           const hasCollapsibleContent = isSecurityCheck && (message2.code || message2.stdout || message2.stderr || message2.logging);
@@ -82738,7 +83179,7 @@ const MessageItem = reactExports.memo(
           return contentBlocks;
         })(),
         message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status }),
-        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           FileAttachment,
           {
             file,
@@ -82764,6 +83205,15 @@ const MessageItem = reactExports.memo(
               },
               `${message2.id}-${file}`
             )) }),
+            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              VideoAttachment,
+              {
+                file,
+                src: getUrl(file),
+                onClick: handleFileClick
+              },
+              `${message2.id}-${file}`
+            )) }),
             message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
             (() => {
               const hasCollapsibleContent = isAction && (message2.code || message2.stdout || message2.stderr || message2.logging);
@@ -82786,7 +83236,7 @@ const MessageItem = reactExports.memo(
               return contentBlocks;
             })(),
             message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status }),
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               FileAttachment,
               {
                 file,
@@ -82850,8 +83300,10 @@ const MessagesView = ({
   isFetchingMore,
   jobStatus,
   agentName,
+  currentExecution,
   messagesContainerRef,
-  messagesEndRef
+  messagesEndRef,
+  scrollToBottom
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
     isFetchingMore && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingMoreIndicator, { children: [
@@ -82876,7 +83328,15 @@ const MessagesView = ({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "No messages yet. Start a conversation!" })
       ] }),
-      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIndicator, { status: jobStatus, agentName }),
+      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        LoadingIndicator,
+        {
+          status: jobStatus,
+          agentName,
+          currentExecution,
+          scrollToBottom
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
     ] })
   ] });
@@ -82930,6 +83390,7 @@ const ChatContent = ({
   isFetchingMore,
   isFarFromBottom,
   jobStatus,
+  currentExecution,
   messagesContainerRef,
   messagesEndRef,
   scrollToBottom,
@@ -82968,8 +83429,10 @@ const ChatContent = ({
           isFetchingMore,
           jobStatus,
           agentName,
+          currentExecution,
           messagesContainerRef,
-          messagesEndRef
+          messagesEndRef,
+          scrollToBottom
         }
       )
     ) : (
@@ -83051,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",
@@ -83090,7 +83600,8 @@ const AgentOptionsMenu = ({
   buttonSx = {},
   isAgentsPage = false,
   onViewAgentSettings,
-  onChatWithAgent
+  onChatWithAgent,
+  onExportAgent
 }) => {
   const [menuAnchorEl, setMenuAnchorEl] = reactExports.useState(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = reactExports.useState(false);
@@ -83177,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" })
@@ -83287,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"
 }));
@@ -83321,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,
@@ -83359,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: [
@@ -83392,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,
@@ -83433,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)"
@@ -83443,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 }) => ({
@@ -83493,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,
@@ -85116,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 = [],
@@ -85142,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 () => {
@@ -85185,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(
@@ -85215,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("");
@@ -85311,6 +86073,14 @@ const ChatSidebar = ({
         onAgentCreated: handleAgentCreated
       }
     ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ImportAgentDialog,
+      {
+        open: isImportDialogOpen,
+        onClose: handleCloseImportDialog,
+        onAgentImported: handleAgentCreated
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
@@ -85420,7 +86190,8 @@ const ChatPage = () => {
     jobStatus,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   } = useJobPolling({
     conversationId,
     addMessage
@@ -85656,6 +86427,7 @@ Store messages: ${JSON.stringify(getMessages(conversationId || ""), null, 2)}`;
         isFetchingMore,
         isFarFromBottom,
         jobStatus,
+        currentExecution,
         messagesContainerRef,
         messagesEndRef,
         scrollToBottom,
@@ -85743,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": {
@@ -85847,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,
@@ -85856,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" }) })
         }
       )
     ] }),
@@ -86376,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"
 });
@@ -86516,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(
@@ -86581,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": {
@@ -86608,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,
@@ -86617,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" }) })
         }
       )
     ] }),
@@ -86650,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%",
@@ -86744,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 }),
@@ -86852,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);
@@ -86888,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 () => {
@@ -86929,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(
@@ -86962,6 +87915,7 @@ const AgentsSidebar = ({
               refetch();
             },
             onChatWithAgent: () => navigate(`/chat/${agent.id}`),
+            onExportAgent: () => handleExportAgent(agent.id),
             buttonSx: {
               mr: 0.5,
               width: 32,
@@ -87025,6 +87979,14 @@ const AgentsSidebar = ({
         onAgentCreated: handleAgentCreated
       }
     ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ImportAgentDialog,
+      {
+        open: isImportDialogOpen,
+        onClose: handleCloseImportDialog,
+        onAgentImported: handleAgentCreated
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
@@ -87073,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");
@@ -87097,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) {
@@ -87133,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,
@@ -90231,6 +91246,26 @@ const UserProfileSidebar = ({
     ) : null
   ] });
 };
+const useUiPreferencesStore = create$1()(
+  persist(
+    (set) => ({
+      isSidebarCollapsed: false,
+      toggleSidebar: () => {
+        set((state) => ({
+          isSidebarCollapsed: !state.isSidebarCollapsed
+        }));
+      },
+      setSidebarCollapsed: (collapsed) => {
+        set({
+          isSidebarCollapsed: collapsed
+        });
+      }
+    }),
+    {
+      name: "ui-preferences-storage"
+    }
+  )
+);
 const StyledDrawer = styled$1(Drawer, {
   shouldForwardProp: (prop) => prop !== "width"
 })(({ theme: theme2, width }) => ({
@@ -90346,12 +91381,10 @@ const ToggleButton = styled$1(IconButton)(() => ({
   }
 }));
 const SidebarNavigation = () => {
-  const [expanded, setExpanded] = reactExports.useState(true);
   const navigate = useNavigate();
   const currentView = useCurrentView();
-  const toggleSidebar = () => {
-    setExpanded(!expanded);
-  };
+  const { isSidebarCollapsed, toggleSidebar } = useUiPreferencesStore();
+  const expanded = !isSidebarCollapsed;
   const navItems = [
     {
       icon: faCode,
@@ -90426,6 +91459,7 @@ const SidebarNavigation = () => {
           onClick: toggleSidebar,
           size: "small",
           title: expanded ? "Collapse sidebar" : "Expand sidebar",
+          "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             FontAwesomeIcon,
             {