local-operator-ui 0.1.3 → 0.1.4

package/out/renderer/assets/{index-BOYHDbPZ.js → index-C6aXGuuj.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 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";
 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.
@@ -30557,7 +30529,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) => {
@@ -31115,7 +31090,7 @@ const SidebarContainer$6 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$2 = styled$1(Box)({
+const ContentContainer$3 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -31126,7 +31101,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$3, { children: content2 })
   ] });
 };
 const useAgentRouteParam = () => {
@@ -44583,6 +44558,308 @@ const getStatusText = (status) => {
       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 = {};
@@ -81904,179 +82181,135 @@ function ft(n2) {
   }
   return React.memo(l2);
 }
-const MarkdownContent = styled$1(Box)({
-  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",
-    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"
-  },
-  "& 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: "8px 0"
-  }
+const CodeContainer$3 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
 });
-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 }) => {
-    const processedContent = reactExports.useMemo(() => {
-      return convertUrlsToMarkdownLinks(content2.trim());
-    }, [content2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Markdown,
+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,
       {
-        components: {
-          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children })
+        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'
+          }
         },
-        children: processedContent
+        className: "react-syntax-highlighter-code-block",
+        wrapLines: true,
+        wrapLongLines: true,
+        children: code2
       }
-    ) });
-  }
-);
-const MessageContainer = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser }) => ({
+    )
+  ] });
+};
+const SectionHeader = styled$1(Box)(({ theme: theme2 }) => ({
   display: "flex",
-  flexDirection: isUser ? "row-reverse" : "row",
-  alignItems: "flex-start",
-  gap: 16,
-  marginBottom: 16
+  alignItems: "center",
+  marginBottom: 8,
+  cursor: "pointer",
+  userSelect: "none",
+  "&:hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  borderRadius: 4,
+  padding: "4px 8px",
+  color: theme2.palette.primary.main,
+  transition: "all 0.2s ease"
 }));
-const UserAvatar$1 = styled$1(Avatar, {
+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 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 }) => ({
-  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 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%"
+  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"
   },
-  width: "auto",
-  padding: 16,
-  borderRadius: 8,
-  wordBreak: "break-word",
-  overflowWrap: "break-word",
-  position: "relative"
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: "3px"
+  }
 }));
-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 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 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 FileAttachment = styled$1(Box)(() => ({
+const FileAttachmentContainer = styled$1(Box)(() => ({
   display: "flex",
   alignItems: "center",
   padding: "8px 12px",
@@ -82115,88 +82348,82 @@ const FileName = styled$1(Typography)({
     textDecoration: "underline"
   }
 });
-const isWebUrl = (path) => {
-  return path.startsWith("http://") || path.startsWith("https://");
+const getFileName$1 = (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$1(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) })
+      ]
+    }
+  );
 };
+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 = (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(file),
+      onClick: handleClick,
+      title: `Click to open ${getFileName(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 +82434,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 +82623,59 @@ 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 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 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 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 +82692,112 @@ 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,
-          {
-            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 })
-            ]
+        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)).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.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)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FileAttachment,
+              {
+                file,
+                onClick: handleFileClick
+              },
+              `${message2.id}-${file}`
+            )) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MessageTimestamp, { timestamp: message2.timestamp, isUser })
+          ] })
+        }
+      )
     ] });
   },
   (prevProps, nextProps) => {