local-operator-ui 0.1.3 → 0.1.5

package/out/renderer/assets/{index-BOYHDbPZ.js → index-B6gIjA2B.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 faUser, aF as faFile, aG as faEllipsisVertical, aH as faComment, aI as faChevronLeft, aJ as faChevronRight, aK as faPlus, aL as faSearch, aM as faCommentSlash, aN as faArrowRight, aO as faComments, aP as faTag, aQ as faIdCard, aR as faCalendarAlt, aS as faCodeBranch, aT as faShieldAlt, aU as faArrowLeft, aV as requireReact, aW as LinearProgress, aX as keyframes, aY as faShield, aZ as faSignOut, a_ as faLightbulb, a$ as faMagicWandSparkles, b0 as faBrain, b1 as faWandMagicSparkles, b2 as faExternalLinkAlt, b3 as faKey, b4 as faGlobe, b5 as faLock, b6 as faEdit, b7 as faSave, b8 as faEnvelope, b9 as faCloudUploadAlt, ba as faHistory, bb as faListAlt, bc as library$1, bd as icons$1, be as CssBaseline, bf as ReactDOM$1, bg as ThemeProvider, bh as theme, bi as ErrorBoundary } from "./theme-D7qnOAQJ.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 faChevronLeft, aO as faPlus, aP as faSearch, aQ as faCommentSlash, aR as faArrowRight, aS as faComments, aT as faTag, aU as faIdCard, aV as faCalendarAlt, aW as faCodeBranch, aX as faShieldAlt, aY as faArrowLeft, aZ as requireReact, a_ as LinearProgress, a$ as faShield, b0 as faSignOut, b1 as faMagicWandSparkles, b2 as faBrain, b3 as faWandMagicSparkles, b4 as faExternalLinkAlt, b5 as faKey, b6 as faGlobe, b7 as faLock, b8 as faEdit, b9 as faSave, ba as faEnvelope, bb as faCloudUploadAlt, bc as faHistory, bd as faListAlt, be as library$1, bf as icons$1, bg as CssBaseline, bh as ReactDOM$1, bi as ThemeProvider, bj as theme, bk as ErrorBoundary } from "./theme-CHCNkogj.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -25356,34 +25356,6 @@ const AgentsApi = {
     }
     return response.json();
   },
-  /**
-   * Get agent conversation history
-   * Retrieve the conversation history for a specific agent.
-   *
-   * @param baseUrl - The base URL of the Local Operator API
-   * @param agentId - ID of the agent to get conversation for
-   * @param page - Page number (default: 1)
-   * @param perPage - Number of messages per page (default: 10)
-   * @returns Promise resolving to the agent conversation history
-   * @throws Error if the request fails
-   */
-  async getAgentConversation(baseUrl, agentId, page = 1, perPage = 20) {
-    const url = new URL(`${baseUrl}/v1/agents/${agentId}/conversation`);
-    url.searchParams.append("page", page.toString());
-    url.searchParams.append("per_page", perPage.toString());
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: {
-        Accept: "application/json"
-      }
-    });
-    if (!response.ok) {
-      throw new Error(
-        `Get agent conversation request failed: ${response.status} ${response.statusText}`
-      );
-    }
-    return response.json();
-  },
   /**
    * Get agent execution history
    * Retrieve the execution history for a specific agent.
@@ -25872,8 +25844,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;
@@ -30557,7 +30539,10 @@ const convertToMessage = (record) => {
     stderr: record.stderr,
     logging: record.logging,
     timestamp: record.timestamp ? new Date(record.timestamp) : /* @__PURE__ */ new Date(),
-    files: record.files
+    files: record.files,
+    action: record.action,
+    execution_type: record.execution_type,
+    task_classification: record.task_classification
   };
 };
 const useConversationMessages = (conversationId, pageSize2 = 20) => {
@@ -30763,8 +30748,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);
@@ -30811,7 +30803,13 @@ const useJobPolling = ({
         return false;
       }
     },
-    [client.jobs, currentJobId, shouldEnableQuery, getConnectivityError]
+    [
+      client.jobs,
+      currentJobId,
+      shouldEnableQuery,
+      getConnectivityError,
+      setCurrentJobId
+    ]
   );
   reactExports.useEffect(() => {
     if (conversationId !== previousConversationIdRef.current) {
@@ -30858,7 +30856,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;
@@ -30947,7 +30951,7 @@ const useJobPolling = ({
       setCurrentJobId(null);
       setIsLoading(false);
     },
-    [conversationId, addMessage, updateConversationMessages]
+    [conversationId, addMessage, updateConversationMessages, setCurrentJobId]
   );
   const {
     data: jobData,
@@ -30981,6 +30985,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);
@@ -30989,6 +30996,7 @@ const useJobPolling = ({
       }
       if (jobData.status === "completed" || jobData.status === "failed") {
         handleJobCompletion(jobData);
+        setCurrentExecution(null);
       }
     }
     return void 0;
@@ -30997,7 +31005,9 @@ const useJobPolling = ({
     dataUpdatedAt,
     handleJobCompletion,
     conversationId,
-    updateConversationMessages
+    updateConversationMessages,
+    setCurrentExecution,
+    setCurrentJobId
   ]);
   reactExports.useEffect(() => {
     if (error) {
@@ -31013,7 +31023,8 @@ const useJobPolling = ({
     jobStatus: jobData?.status || null,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   };
 };
 const useScrollToBottom = (dependencies = [], threshold = 300, buttonThreshold = 50) => {
@@ -31115,7 +31126,7 @@ const SidebarContainer$6 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$2 = styled$1(Box)({
+const ContentContainer$4 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -31126,7 +31137,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$2, { children: content2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$4, { children: content2 })
   ] });
 };
 const useAgentRouteParam = () => {
@@ -31553,6 +31564,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");
@@ -43000,12 +43014,19 @@ const ModelSelect = ({
   }, [hostingId]);
   const { refreshModels } = useModels();
   const previousHostingIdRef = reactExports.useRef(null);
+  const refreshTimeRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (hostingId && previousHostingIdRef.current !== hostingId) {
       previousHostingIdRef.current = hostingId;
       const timeoutId = setTimeout(() => {
-        refreshModels();
-      }, 0);
+        const now = Date.now();
+        const lastRefreshTime = refreshTimeRef.current;
+        const THROTTLE_DURATION = 2e3;
+        if (!lastRefreshTime || now - lastRefreshTime > THROTTLE_DURATION) {
+          refreshModels();
+          refreshTimeRef.current = now;
+        }
+      }, 100);
       return () => clearTimeout(timeoutId);
     }
     return void 0;
@@ -44525,64 +44546,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";
-  }
-};
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -81904,94 +81867,434 @@ function ft(n2) {
   }
   return React.memo(l2);
 }
-const MarkdownContent = styled$1(Box)({
+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",
-  overflowWrap: "break-word",
-  lineHeight: 1.6,
-  fontSize: "1.05rem",
-  "& code": {
-    fontFamily: '"Roboto Mono", monospace',
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    padding: "3px 6px",
-    borderRadius: "4px",
-    fontSize: "0.85em",
-    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: "0.85em",
-    margin: "12px 0",
-    maxWidth: "100%",
-    border: "1px solid rgba(255, 255, 255, 0.1)"
-  },
-  "& pre code": {
-    whiteSpace: "pre-wrap",
-    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",
-    padding: 0,
-    borderRadius: 0
-  },
-  "& h1": {
-    fontSize: "1.5rem",
-    fontWeight: 600,
-    margin: "20px 0 12px 0",
-    borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-    paddingBottom: "8px"
-  },
-  "& h2": {
-    fontSize: "1.3rem",
-    fontWeight: 600,
-    margin: "18px 0 10px 0"
-  },
-  "& h3": {
-    fontSize: "1.1rem",
-    fontWeight: 600,
-    margin: "16px 0 8px 0"
-  },
-  "& ul": {
-    paddingLeft: "24px",
-    margin: "10px 0"
-  },
-  "& li": {
-    margin: "4px 0"
+    opacity: 1,
+    color: theme2.palette.primary.light
   },
-  "& 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"
+  "& .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
+          }
+        )
+      ]
     }
-  },
-  "& strong": {
-    fontWeight: 600,
-    color: "#e6e6e6"
-  },
-  "& em": {
-    fontStyle: "italic",
-    color: "#e0e0e0"
-  },
-  "& br": {
-    display: "block",
-    content: '""',
-    marginTop: "8px"
-  },
-  "& p:first-of-type": {
-    marginTop: "2px"
-  },
-  "& p": {
-    margin: "8px 0"
+  );
+};
+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 urlRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
   return text2.replace(
@@ -82000,11 +82303,11 @@ const convertUrlsToMarkdownLinks = (text2) => {
   );
 };
 const MarkdownRenderer = reactExports.memo(
-  ({ content: content2 }) => {
+  ({ content: content2, styleProps }) => {
     const processedContent = reactExports.useMemo(() => {
       return convertUrlsToMarkdownLinks(content2.trim());
     }, [content2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { ...styleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Markdown,
       {
         components: {
@@ -82015,68 +82318,252 @@ const MarkdownRenderer = reactExports.memo(
     ) });
   }
 );
-const MessageContainer = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser }) => ({
+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",
-  flexDirection: isUser ? "row-reverse" : "row",
-  alignItems: "flex-start",
-  gap: 16,
-  marginBottom: 16
+  alignItems: "center",
+  justifyContent: "flex-start",
+  color: theme2.palette.grey[500]
 }));
-const UserAvatar$1 = styled$1(Avatar, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme: theme2 }) => ({
-  backgroundColor: isUser ? "rgba(66, 133, 244, 0.9)" : "rgba(56, 201, 106, 0.2)",
-  color: isUser ? "white" : theme2.palette.primary.main,
-  boxShadow: isUser ? "0 2px 8px rgba(66, 133, 244, 0.25)" : "none"
+const BlockTitle = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontWeight: 500,
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[500]
 }));
-const StyledPaper$1 = styled$1(Paper)(({ theme: theme2 }) => ({
-  [theme2.breakpoints.down("sm")]: {
-    maxWidth: "85%"
-  },
-  [theme2.breakpoints.between("sm", "md")]: {
-    maxWidth: "75%"
-  },
-  [theme2.breakpoints.up("md")]: {
-    maxWidth: "65%"
-  },
-  width: "auto",
-  padding: 16,
-  borderRadius: 8,
-  wordBreak: "break-word",
-  overflowWrap: "break-word",
-  position: "relative"
+const BlockContent = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[400],
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginTop: 2
 }));
-const MessagePaper = ({ isUser, elevation, children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    StyledPaper$1,
-    {
-      elevation,
-      sx: {
-        backgroundColor: isUser ? "rgba(66, 133, 244, 0.15)" : (theme2) => theme2.palette.background.paper,
-        border: isUser ? "1px solid rgba(66, 133, 244, 0.3)" : "1px solid rgba(255, 255, 255, 0.1)",
-        boxShadow: isUser ? "0 4px 12px rgba(0, 0, 0, 0.15)" : "0 2px 8px rgba(0, 0, 0, 0.1)",
-        color: isUser ? (theme2) => theme2.palette.text.primary : "inherit"
-      },
-      children
+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 AttachmentImage = styled$1("img")({
-  maxWidth: "100%",
-  maxHeight: 200,
-  borderRadius: 8,
+const CodeContainer$3 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel$4 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.text.secondary
+}));
+const SyntaxHighlighterStyles = ft`
+  .react-syntax-highlighter-code-block * {
+    font-family: 'Roboto Mono', monospace !important;
+  }
+`;
+const CodeBlock = ({ code: code2 }) => {
+  if (!code2) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$3, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$4, { variant: "caption", children: "Code" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      highlighter,
+      {
+        language: "python",
+        style: atomOneDark,
+        customStyle: {
+          borderRadius: "8px",
+          fontSize: "0.85rem",
+          width: "100%",
+          boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
+          padding: "0.75rem"
+        },
+        codeTagProps: {
+          style: {
+            fontFamily: '"Roboto Mono", monospace !important'
+          }
+        },
+        className: "react-syntax-highlighter-code-block",
+        wrapLines: true,
+        wrapLongLines: true,
+        children: code2
+      }
+    )
+  ] });
+};
+const SectionHeader = styled$1(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  alignItems: "center",
   marginBottom: 8,
-  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
   cursor: "pointer",
-  transition: "transform 0.2s ease, box-shadow 0.2s ease",
+  userSelect: "none",
   "&:hover": {
-    transform: "scale(1.02)",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  borderRadius: 4,
+  padding: "4px 8px",
+  color: theme2.palette.primary.main,
+  transition: "all 0.2s ease"
+}));
+const SectionLabel$3 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  color: theme2.palette.primary.main,
+  fontWeight: 500,
+  fontSize: "0.85rem"
+}));
+const ToggleButton$1 = styled$1(IconButton)({
+  padding: 2,
+  marginRight: 4
+});
+const CollapsibleMessage = ({ children, defaultCollapsed = true, hasContent }) => {
+  const [isCollapsed, setIsCollapsed] = reactExports.useState(defaultCollapsed);
+  if (!hasContent) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
   }
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionHeader, { onClick: toggleCollapse, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleButton$1, { size: "small", disableRipple: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FontAwesomeIcon,
+        {
+          icon: isCollapsed ? faChevronRight : faChevronDown,
+          size: "sm"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$3, { variant: "caption", children: isCollapsed ? "Show technical details" : "Hide technical details" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: !isCollapsed, timeout: "auto", children })
+  ] });
+};
+const CodeContainer$2 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
 });
-const FileAttachment = styled$1(Box)(() => ({
+const SectionLabel$2 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.error.light
+}));
+const ErrorContainer$2 = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme: theme2 }) => ({
+  fontFamily: '"Roboto Mono", monospace',
+  fontSize: "0.85rem",
+  backgroundColor: "rgba(255, 0, 0, 0.1)",
+  borderRadius: "8px",
+  padding: 12,
+  maxHeight: "200px",
+  overflow: "auto",
+  whiteSpace: "pre-wrap",
+  color: isUser ? theme2.palette.error.main : theme2.palette.error.light,
+  width: "100%",
+  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
+  "&::-webkit-scrollbar": {
+    width: "6px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: "3px"
+  }
+}));
+const ErrorBlock = ({ error, isUser }) => {
+  if (!error || error === "[No error output]") return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$2, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$2, { variant: "caption", children: "Error" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorContainer$2, { isUser, children: error })
+  ] });
+};
+const FileAttachmentContainer = styled$1(Box)(() => ({
   display: "flex",
   alignItems: "center",
   padding: "8px 12px",
@@ -82115,88 +82602,82 @@ const FileName = styled$1(Typography)({
     textDecoration: "underline"
   }
 });
-const isWebUrl = (path) => {
-  return path.startsWith("http://") || path.startsWith("https://");
+const getFileName$2 = (path) => {
+  const parts = path.split(/[/\\]/);
+  return parts[parts.length - 1];
 };
-const isImage = (path) => {
-  const imageExtensions = [
-    ".jpg",
-    ".jpeg",
-    ".png",
-    ".gif",
-    ".webp",
-    ".bmp",
-    ".svg",
-    ".tiff",
-    ".tif",
-    ".ico",
-    ".heic",
-    ".heif",
-    ".avif",
-    ".jfif",
-    ".pjpeg",
-    ".pjp"
-  ];
-  const lowerPath = path.toLowerCase();
-  return imageExtensions.some((ext) => lowerPath.endsWith(ext));
+const FileAttachment = ({ file, onClick }) => {
+  const handleClick = () => {
+    onClick(file);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    FileAttachmentContainer,
+    {
+      onClick: handleClick,
+      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$2(file) })
+      ]
+    }
+  );
 };
-const getFileName = (path) => {
+const AttachmentImage = styled$1("img")({
+  maxWidth: "100%",
+  maxHeight: 200,
+  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$1 = (path) => {
   const parts = path.split(/[/\\]/);
   return parts[parts.length - 1];
 };
-const getAttachmentUrl = (client, path) => {
-  if (isImage(path) && !path.startsWith("http")) {
-    const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
-    return client.static.getImageUrl(normalizedPath);
-  }
-  return path;
+const ImageAttachment = ({
+  file,
+  src,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick(file);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    AttachmentImage,
+    {
+      src,
+      alt: getFileName$1(file),
+      onClick: handleClick,
+      title: `Click to open ${getFileName$1(file)}`
+    }
+  );
 };
-const SectionLabel = styled$1(Typography)(({ theme: theme2 }) => ({
+const CodeContainer$1 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel$1 = styled$1(Typography)(({ theme: theme2 }) => ({
   display: "block",
   marginBottom: 4,
   color: theme2.palette.text.secondary
 }));
-const CodeContainer = styled$1(Box)({
-  marginBottom: 16,
-  width: "100%"
-});
-const OutputContainer = styled$1(Box)({
-  fontFamily: '"Roboto Mono", monospace',
-  fontSize: "0.85rem",
-  backgroundColor: "rgba(0, 0, 0, 0.3)",
-  borderRadius: "8px",
-  padding: 12,
-  maxHeight: "300px",
-  overflow: "auto",
-  whiteSpace: "pre",
-  width: "100%",
-  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
-  color: "inherit",
-  overflowX: "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)"
-  }
-});
-const ErrorContainer$2 = styled$1(Box, {
+const LogContainer = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser }) => ({
+})(({ isUser, theme: theme2 }) => ({
   fontFamily: '"Roboto Mono", monospace',
   fontSize: "0.85rem",
-  backgroundColor: "rgba(255, 0, 0, 0.1)",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
   borderRadius: "8px",
   padding: 12,
   maxHeight: "200px",
   overflow: "auto",
   whiteSpace: "pre-wrap",
-  color: isUser ? "error.main" : "error.light",
+  color: isUser ? theme2.palette.info.main : theme2.palette.info.light,
   width: "100%",
   boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
   "&::-webkit-scrollbar": {
@@ -82207,36 +82688,187 @@ const ErrorContainer$2 = styled$1(Box, {
     borderRadius: "3px"
   }
 }));
-const LogContainer = styled$1(Box, {
+const LogBlock = ({ log, isUser }) => {
+  if (!log || log === "[No logger output]") return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$1, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$1, { variant: "caption", children: "Logs" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: log })
+  ] });
+};
+const StyledAvatar = styled$1(Avatar, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme: theme2 }) => ({
+  backgroundColor: isUser ? "rgba(66, 133, 244, 0.9)" : "rgba(56, 201, 106, 0.2)",
+  color: isUser ? "white" : theme2.palette.primary.main,
+  boxShadow: isUser ? "0 2px 8px rgba(66, 133, 244, 0.25)" : "none"
+}));
+const MessageAvatar = ({ isUser }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledAvatar, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: isUser ? faUser : faRobot, size: "sm" }) });
+};
+const StyledContainer$1 = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "isUser"
 })(({ isUser }) => ({
+  display: "flex",
+  flexDirection: isUser ? "row-reverse" : "row",
+  alignItems: "flex-start",
+  gap: 16,
+  marginBottom: 16
+}));
+const MessageContainer = ({
+  isUser,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledContainer$1, { isUser, children });
+};
+const ContentContainer$2 = styled$1(Box)(() => ({
+  marginBottom: 16
+}));
+const MessageContent = ({ content: content2 }) => {
+  if (!content2) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownRenderer, { content: content2 }) });
+};
+const StyledPaper$1 = styled$1(Paper)(({ theme: theme2 }) => ({
+  [theme2.breakpoints.down("sm")]: {
+    maxWidth: "85%"
+  },
+  [theme2.breakpoints.between("sm", "md")]: {
+    maxWidth: "75%"
+  },
+  [theme2.breakpoints.up("md")]: {
+    maxWidth: "65%"
+  },
+  width: "auto",
+  padding: 16,
+  borderRadius: 8,
+  wordBreak: "break-word",
+  overflowWrap: "break-word",
+  position: "relative"
+}));
+const MessagePaper = ({
+  isUser,
+  elevation = isUser ? 2 : 1,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledPaper$1,
+    {
+      elevation,
+      sx: {
+        backgroundColor: isUser ? "rgba(66, 133, 244, 0.15)" : (theme2) => theme2.palette.background.paper,
+        border: isUser ? "1px solid rgba(66, 133, 244, 0.3)" : "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: isUser ? "0 4px 12px rgba(0, 0, 0, 0.15)" : "0 2px 8px rgba(0, 0, 0, 0.1)",
+        color: isUser ? (theme2) => theme2.palette.text.primary : "inherit"
+      },
+      children
+    }
+  );
+};
+const StyledTimestamp = styled$1(Typography, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme: theme2 }) => ({
+  display: "block",
+  marginTop: 8,
+  textAlign: isUser ? "left" : "right",
+  color: theme2.palette.text.secondary,
+  fontSize: "0.7rem"
+}));
+const MessageTimestamp = ({
+  timestamp,
+  isUser
+}) => {
+  const formattedTime = timestamp.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTimestamp, { variant: "caption", isUser, children: formattedTime });
+};
+const CodeContainer = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.text.secondary
+}));
+const OutputContainer = styled$1(Box)({
   fontFamily: '"Roboto Mono", monospace',
   fontSize: "0.85rem",
   backgroundColor: "rgba(0, 0, 0, 0.3)",
   borderRadius: "8px",
   padding: 12,
-  maxHeight: "200px",
+  maxHeight: "300px",
   overflow: "auto",
-  whiteSpace: "pre-wrap",
-  color: isUser ? "info.main" : "info.light",
+  whiteSpace: "pre",
   width: "100%",
   boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
+  color: "inherit",
+  overflowX: "auto",
   "&::-webkit-scrollbar": {
-    width: "6px"
+    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)"
   }
-}));
-const SyntaxHighlighterStyles = ft`
-  .react-syntax-highlighter-code-block * {
-    font-family: 'Roboto Mono', monospace !important;
+});
+const OutputBlock = ({ output }) => {
+  if (!output) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel, { variant: "caption", children: "Output" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(OutputContainer, { children: output })
+  ] });
+};
+const HighlightContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(() => ({
+  position: "relative",
+  padding: "16px",
+  borderRadius: "8px",
+  marginBottom: "16px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+  width: "100%",
+  border: "1px solid rgba(255, 193, 7, 0.5)",
+  backgroundColor: "rgba(255, 193, 7, 0.1)",
+  transition: "all 0.2s ease",
+  "&:hover": {
+    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)"
   }
-`;
-const StatusIndicator = styled$1(Box, {
+}));
+const SecurityBadge = styled$1(Box)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: "-10px",
+  right: "16px",
+  padding: "4px 8px",
+  borderRadius: "12px",
+  fontSize: "0.7rem",
+  fontWeight: "bold",
+  backgroundColor: theme2.palette.warning.main,
+  color: "#fff",
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+}));
+const SecurityCheckHighlight = ({
+  children,
+  isUser
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer, { isUser, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SecurityBadge, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faExclamationTriangle, size: "xs" }),
+      "AI SECURITY BLOCK"
+    ] }),
+    children
+  ] });
+};
+const StyledStatusIndicator = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "status"
-})(({ status }) => ({
+})(({ status, theme: theme2 }) => ({
   marginTop: 8,
   display: "inline-block",
   paddingLeft: 8,
@@ -82245,31 +82877,118 @@ const StatusIndicator = styled$1(Box, {
   paddingBottom: 4,
   borderRadius: "4px",
   fontSize: "0.75rem",
-  backgroundColor: status === "error" ? "error.dark" : status === "success" ? "success.dark" : "info.dark",
+  backgroundColor: status === "error" ? theme2.palette.error.dark : status === "success" ? theme2.palette.success.dark : theme2.palette.info.dark,
   color: "white",
   boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
 }));
-const Timestamp = styled$1(Typography, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme: theme2 }) => ({
-  display: "block",
-  marginTop: 8,
-  textAlign: isUser ? "left" : "right",
-  color: theme2.palette.text.secondary,
-  fontSize: "0.7rem"
-}));
+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://");
+};
+const isImage = (path) => {
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".webp",
+    ".bmp",
+    ".svg",
+    ".tiff",
+    ".tif",
+    ".ico",
+    ".heic",
+    ".heif",
+    ".avif",
+    ".jfif",
+    ".pjpeg",
+    ".pjp"
+  ];
+  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 (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(
   ({ message: message2 }) => {
+    const shouldHide = (message2.action === "DONE" || message2.action === "ASK") && message2.execution_type === "action" && message2.task_classification === "conversation";
+    if (shouldHide) {
+      return null;
+    }
     const isUser = message2.role === "user";
+    const isAction = message2.execution_type === "action";
+    const isSecurityCheck = message2.execution_type === "security_check";
+    const isPlanOrReflection = message2.execution_type === "plan" || message2.execution_type === "reflection" || isAction && (message2.action === "DONE" || message2.action === "ASK") && message2.task_classification !== "conversation";
     const client = reactExports.useMemo(() => {
       return createLocalOperatorClient(apiConfig.baseUrl);
     }, []);
-    const formattedTimestamp = reactExports.useMemo(() => {
-      return message2.timestamp.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit"
-      });
-    }, [message2.timestamp]);
     const getUrl = reactExports.useCallback(
       (path) => getAttachmentUrl(client, path),
       [client]
@@ -82286,109 +83005,130 @@ const MessageItem = reactExports.memo(
         console.error("Error opening file:", error);
       }
     }, []);
-    const handleImageClick = reactExports.useCallback(
-      (filePath) => {
-        handleFileClick(filePath);
-      },
-      [handleFileClick]
-    );
+    if (isPlanOrReflection && message2.message) {
+      const executionType = isAction && message2.action === "DONE" ? "action" : message2.execution_type || "action";
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        BackgroundBlock,
+        {
+          content: message2.message,
+          action: message2.action,
+          executionType,
+          isUser
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageContainer, { isUser, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(UserAvatar$1, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: isUser ? faUser : faRobot, size: "sm" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { elevation: isUser ? 2 : 1, isUser, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAvatar, { isUser }),
+      isSecurityCheck ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecurityCheckHighlight, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, children: [
         message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          AttachmentImage,
+          ImageAttachment,
           {
+            file,
             src: getUrl(file),
-            alt: getFileName(file),
-            onClick: () => handleImageClick(file),
-            title: `Click to open ${getFileName(file)}`
+            onClick: handleFileClick
           },
           `${message2.id}-${file}`
         )) }),
-        message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Box,
-          {
-            sx: {
-              mb: message2.code || message2.stdout || message2.stderr || message2.logging ? 2 : 0
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownRenderer, { content: message2.message })
-          }
-        ),
-        message2.code && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          CodeContainer,
+        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,
           {
-            sx: {
-              mb: message2.stdout || message2.stderr || message2.logging ? 2 : 0
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel, { variant: "caption", children: "Code" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                highlighter,
-                {
-                  language: "python",
-                  style: atomOneDark,
-                  customStyle: {
-                    borderRadius: "8px",
-                    fontSize: "0.85rem",
-                    width: "100%",
-                    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
-                    padding: "0.75rem"
-                  },
-                  codeTagProps: {
-                    style: {
-                      fontFamily: '"Roboto Mono", monospace !important'
-                    }
-                  },
-                  className: "react-syntax-highlighter-code-block",
-                  wrapLines: true,
-                  wrapLongLines: true,
-                  children: message2.code
-                }
-              )
-            ]
-          }
-        ),
-        message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          CodeContainer,
-          {
-            sx: { mb: message2.stderr || message2.logging ? 2 : 0 },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel, { variant: "caption", children: "Output" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(OutputContainer, { children: message2.stdout })
-            ]
+            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);
+          const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
+            message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
+            message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
+            message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
+          ] });
+          if (hasCollapsibleContent) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CollapsibleMessage,
+              {
+                defaultCollapsed: true,
+                hasContent: hasCollapsibleContent,
+                children: contentBlocks
+              }
+            );
           }
-        ),
-        message2.stderr && message2.stderr !== "[No error output]" && /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { sx: { mb: message2.logging ? 2 : 0 }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SectionLabel,
-            {
-              variant: "caption",
-              sx: { color: isUser ? "error.main" : "error.light" },
-              children: "Error"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorContainer$2, { isUser, children: message2.stderr })
-        ] }),
-        message2.logging && message2.logging !== "[No logger output]" && /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { sx: { mb: message2.formatted_print ? 2 : 0 }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel, { variant: "caption", children: "Logs" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: message2.logging })
-        ] }),
-        message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status, children: 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.jsxs(
+          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) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           FileAttachment,
           {
-            onClick: () => handleFileClick(file),
-            title: `Click to open ${getFileName(file)}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFile, size: "sm" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName(file) })
-            ]
+            file,
+            onClick: handleFileClick
           },
           `${message2.id}-${file}`
         )) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Timestamp, { variant: "caption", isUser, children: formattedTimestamp })
-      ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MessageTimestamp, { timestamp: message2.timestamp, isUser })
+      ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionHighlight,
+        {
+          action: message2.action || "CODE",
+          taskClassification: message2.task_classification || "",
+          isUser,
+          executionType: message2.execution_type,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, children: [
+            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ImageAttachment,
+              {
+                file,
+                src: getUrl(file),
+                onClick: handleFileClick
+              },
+              `${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);
+              const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
+                message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
+                message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
+                message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
+              ] });
+              if (hasCollapsibleContent) {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  CollapsibleMessage,
+                  {
+                    defaultCollapsed: true,
+                    hasContent: hasCollapsibleContent,
+                    children: contentBlocks
+                  }
+                );
+              }
+              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) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FileAttachment,
+              {
+                file,
+                onClick: handleFileClick
+              },
+              `${message2.id}-${file}`
+            )) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MessageTimestamp, { timestamp: message2.timestamp, isUser })
+          ] })
+        }
+      )
     ] });
   },
   (prevProps, nextProps) => {
@@ -82441,8 +83181,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: [
@@ -82467,7 +83209,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 })
     ] })
   ] });
@@ -82521,6 +83271,7 @@ const ChatContent = ({
   isFetchingMore,
   isFarFromBottom,
   jobStatus,
+  currentExecution,
   messagesContainerRef,
   messagesEndRef,
   scrollToBottom,
@@ -82559,8 +83310,10 @@ const ChatContent = ({
           isFetchingMore,
           jobStatus,
           agentName,
+          currentExecution,
           messagesContainerRef,
-          messagesEndRef
+          messagesEndRef,
+          scrollToBottom
         }
       )
     ) : (
@@ -85011,7 +85764,8 @@ const ChatPage = () => {
     jobStatus,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   } = useJobPolling({
     conversationId,
     addMessage
@@ -85247,6 +86001,7 @@ Store messages: ${JSON.stringify(getMessages(conversationId || ""), null, 2)}`;
         isFetchingMore,
         isFarFromBottom,
         jobStatus,
+        currentExecution,
         messagesContainerRef,
         messagesEndRef,
         scrollToBottom,
@@ -89822,6 +90577,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 }) => ({
@@ -89937,12 +90712,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,
@@ -90017,6 +90790,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,
             {