local-operator-ui 0.3.6 → 0.3.8

package/out/renderer/assets/{index-BZlgXU2r.js → index-mDCtISs5.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 getDefaultExportFromCjs, k as requireReactDom, R as React, l as generateUtilityClasses, m as useDefaultProps, s as styled$1, n as memoTheme, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, p as React$1, T as TransitionGroupContext, q as duration, t as useTheme$1, v as useTimeout, w as useId, B as ButtonBase, x as alpha, y as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, z as darken, A as lighten, D as useEventCallback, E as setRef, F as useEnhancedEffect, G as useRtl, H as globalCss, I as formatMuiErrorMessage, J as rootShouldForwardProp, K as Typography, L as deepmerge, M as extendSxProp, N as resolveBreakpointValues, O as handleBreakpoints, Q as getPath, S as isFocusVisible, U as typographyClasses, V as slotShouldForwardProp, W as clamp, X as emphasize, Y as Timeout, Z as requireReact, $ as LinearProgress, a0 as Button, a1 as Box, a2 as FontAwesomeIcon, a3 as faRobot, a4 as faSliders, a5 as faExclamationTriangle, a6 as faCheck, a7 as faTimes, a8 as faEraser, a9 as faPen, aa as faInfoCircle, ab as faGear, ac as faServer, ad as faStar, ae as faTrash, af as faCommentDots, ag as faCode, ah as faHome, ai as faDownload, aj as faFileAlt, ak as faDesktop, al as faImage, am as faMusic, an as faVideo, ao as faLaptop, ap as faUsers, aq as faDatabase, ar as faBoxOpen, as as faBook, at as faHdd, au as faBox, av as faArchive, aw as faNetworkWired, ax as faFolder, ay as faFolderOpen, az as faClock, aA as faChevronDown, aB as faTools, aC as faArrowDown, aD as faPaperclip, aE as faStop, aF as faPaperPlane, aG as keyframes, aH as faChevronUp, aI as faQuestion, aJ as faLightbulb, aK as faChevronRight, aL as faFile, aM as faUser, aN as faEllipsisVertical, aO as faComment, aP as faFileExport, aQ as faChevronLeft, aR as faFileImport, aS as faUpload, aT as faPlus, aU as faSearch, aV as faCommentSlash, aW as faArrowRight, aX as faComments, aY as faTag, aZ as faIdCard, a_ as faCalendarAlt, a$ as faCodeBranch, b0 as faShieldAlt, b1 as faArrowLeft, b2 as faShield, b3 as faSignOut, b4 as darkTheme, b5 as lightTheme, b6 as draculaTheme, b7 as sageTheme, b8 as monokaiTheme, b9 as tokyoNightTheme, ba as duneTheme, bb as icebergTheme, bc as faMagicWandSparkles, bd as faBrain, be as faWandMagicSparkles, bf as faExternalLinkAlt, bg as faKey, bh as faGlobe, bi as faLock, bj as faEdit, bk as faAdjust, bl as faSave, bm as faMoon, bn as faSun, bo as faSkull, bp as faLeaf, bq as faMountain, br as faFire, bs as faIcicles, bt as faEnvelope, bu as faCloudUploadAlt, bv as faHistory, bw as faListAlt, bx as library$1, by as icons$1, bz as CssBaseline, bA as ThemeProvider$1, bB as ReactDOM$1, bC as ErrorBoundary } from "./error-boundary-GcWSKAk-.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 getDefaultExportFromCjs, k as requireReactDom, R as React, l as generateUtilityClasses, m as useDefaultProps, s as styled$1, n as memoTheme, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, p as React$1, T as TransitionGroupContext, q as duration, t as useTheme$1, v as useTimeout, w as useId, B as ButtonBase, x as alpha, y as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, z as darken, A as lighten, D as useEventCallback, E as setRef, F as useEnhancedEffect, G as useRtl, H as globalCss, I as formatMuiErrorMessage, J as rootShouldForwardProp, K as Typography, L as deepmerge, M as extendSxProp, N as resolveBreakpointValues, O as handleBreakpoints, Q as getPath, S as isFocusVisible, U as typographyClasses, V as slotShouldForwardProp, W as clamp, X as emphasize, Y as Timeout, Z as requireReact, $ as LinearProgress, a0 as Button, a1 as Box, a2 as FontAwesomeIcon, a3 as faRobot, a4 as faSliders, a5 as faExclamationTriangle, a6 as faCheck, a7 as faTimes, a8 as faEraser, a9 as faPen, aa as faInfoCircle, ab as faGear, ac as faServer, ad as faStar, ae as faTrash, 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 faFile, aI as faLightbulb, aJ as faCode, aK as faCommentDots, aL as faEdit, aM as faPencilAlt, aN as faChevronRight, aO as faUser, aP as faCopy, aQ as isDevelopmentMode, aR as faEllipsisVertical, aS as faComment, aT as faFileExport, aU as faChevronLeft, aV as faFileImport, aW as faUpload, aX as faPlus, aY as faSearch, aZ as faCommentSlash, a_ as faArrowRight, a$ as faComments, b0 as faTag, b1 as faIdCard, b2 as faCalendarAlt, b3 as faCodeBranch, b4 as faShieldAlt, b5 as faArrowLeft, b6 as faShield, b7 as faSignOut, b8 as darkTheme, b9 as lightTheme, ba as draculaTheme, bb as sageTheme, bc as monokaiTheme, bd as tokyoNightTheme, be as duneTheme, bf as icebergTheme, bg as faMagicWandSparkles, bh as faBrain, bi as faWandMagicSparkles, bj as faExternalLinkAlt, bk as faKey, bl as faGlobe, bm as faLock, bn as faAdjust, bo as faSave, bp as faMoon, bq as faSun, br as faSkull, bs as faLeaf, bt as faMountain, bu as faFire, bv as faIcicles, bw as faEnvelope, bx as faCloudUploadAlt, by as faHistory, bz as faListAlt, bA as library$1, bB as icons$1, bC as CssBaseline, bD as ThemeProvider$1, bE as ReactDOM$1, bF as ErrorBoundary } from "./error-boundary-HK_94N6W.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -46600,7 +46600,7 @@ const ChatOptionsSidebar = ({
     }
   );
 };
-const StyledTabs = styled$1(Tabs)(({ theme }) => ({
+styled$1(Tabs)(({ theme }) => ({
   borderBottom: `1px solid ${alpha(theme.palette.divider, 0.05)}`,
   minHeight: "42px",
   "& .MuiTabs-indicator": {
@@ -46608,7 +46608,7 @@ const StyledTabs = styled$1(Tabs)(({ theme }) => ({
     borderRadius: "2px 2px 0 0"
   }
 }));
-const StyledTab = styled$1(Tab, {
+styled$1(Tab, {
   shouldForwardProp: (prop) => prop !== "isActive"
 })(({ theme, isActive }) => ({
   minHeight: "42px",
@@ -46630,43 +46630,6 @@ const StyledTab = styled$1(Tab, {
     fontSize: "0.9rem"
   }
 }));
-const ChatTabs = ({ activeTab, onChange }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    StyledTabs,
-    {
-      value: activeTab,
-      onChange: (_2, newValue) => onChange(newValue),
-      variant: "fullWidth",
-      TabIndicatorProps: {
-        style: {
-          transition: "all 0.3s ease"
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          StyledTab,
-          {
-            icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCommentDots }),
-            iconPosition: "start",
-            label: "Chat",
-            value: "chat",
-            isActive: activeTab === "chat"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          StyledTab,
-          {
-            icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCode }),
-            iconPosition: "start",
-            label: "Raw",
-            value: "raw",
-            isActive: activeTab === "raw"
-          }
-        )
-      ]
-    }
-  );
-};
 const MAX_RECENT_DIRECTORIES = 5;
 const useRecentDirectoriesStore = create$1()(
   persist(
@@ -85377,26 +85340,12 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
 };
 const HighlightContainer$1 = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "action" && prop !== "isUser"
-})(({ theme, action }) => ({
-  position: "relative",
-  padding: "16px",
-  borderRadius: "8px",
-  marginBottom: "16px",
-  boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.15 : 0.1)}`,
-  width: "100%",
-  border: `1px solid ${action === "DONE" ? theme.palette.actionHighlight.done.border : theme.palette.actionHighlight.ask.border}`,
-  backgroundColor: action === "DONE" ? theme.palette.actionHighlight.done.background : theme.palette.actionHighlight.ask.background,
-  transition: "all 0.2s ease",
-  "&:hover": {
-    boxShadow: `0 6px 16px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.2 : 0.15)}`
-  }
+})(() => ({
+  marginBottom: "16px"
 }));
-const ActionBadge = styled$1(Box, {
+const ActionBadge$1 = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "action"
 })(({ theme, action }) => ({
-  position: "absolute",
-  top: "-10px",
-  right: "16px",
   padding: "4px 8px",
   borderRadius: "12px",
   fontSize: "0.7rem",
@@ -85405,8 +85354,15 @@ const ActionBadge = styled$1(Box, {
   color: "#fff",
   display: "flex",
   alignItems: "center",
+  justifyContent: "flex-end",
   gap: "4px",
-  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+  marginBottom: "8px",
+  // Add space between badge and content
+  alignSelf: "flex-end",
+  // Align to the right
+  width: "fit-content"
+  // Only take up as much width as needed
 }));
 const ActionHighlight = ({
   children,
@@ -85420,7 +85376,7 @@ const ActionHighlight = ({
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer$1, { action, isUser, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { action, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge$1, { action, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         FontAwesomeIcon,
         {
@@ -104358,127 +104314,6 @@ const MarkdownRenderer = reactExports.memo(
     ) });
   }
 );
-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 }) => ({
-  display: "flex",
-  alignItems: "center",
-  padding: "8px 12px",
-  backgroundColor: alpha(
-    theme.palette.common.black,
-    theme.palette.mode === "dark" ? 0.2 : 0.05
-  ),
-  borderLeft: `3px solid ${theme.palette.grey[theme.palette.mode === "dark" ? 600 : 400]}`
-}));
-const BlockIcon = styled$1(Box)(({ theme }) => ({
-  marginRight: 8,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  color: theme.palette.icon.text
-}));
-const BlockTitle = styled$1(Typography)(({ theme }) => ({
-  fontWeight: 500,
-  fontSize: "0.85rem",
-  color: theme.palette.text.secondary
-}));
-const BlockContent = styled$1(Box)(({ theme }) => ({
-  fontSize: "0.85rem",
-  color: theme.palette.text.secondary,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  marginTop: 2
-}));
-const ExpandedContent = styled$1(Box)(({ theme }) => ({
-  padding: "12px 16px",
-  backgroundColor: alpha(
-    theme.palette.common.black,
-    theme.palette.mode === "dark" ? 0.2 : 0.05
-  ),
-  borderBottomLeftRadius: 4,
-  borderBottomRightRadius: 4,
-  fontSize: "0.85rem",
-  color: theme.palette.text.primary,
-  borderLeft: `3px solid ${theme.palette.grey[theme.palette.mode === "dark" ? 600 : 400]}`,
-  marginLeft: 0
-}));
-const BackgroundBlock = ({
-  content: content2,
-  action,
-  executionType,
-  isUser
-}) => {
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-  const getTitle = () => {
-    switch (action) {
-      case "DONE":
-        return "Task Complete";
-      case "ASK":
-        return "Asking a Question";
-      default:
-        return executionType === "plan" ? "Planning" : "Reflection";
-    }
-  };
-  const getIcon = () => {
-    switch (action) {
-      case "DONE":
-        return faCheck;
-      case "ASK":
-        return faQuestion;
-      default:
-        return executionType === "plan" ? faLightbulb : faCommentDots;
-    }
-  };
-  const getTruncatedContent = (content22, maxLength = 140) => {
-    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { onClick: toggleExpand, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockHeader, { executionType, isUser, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", children: getTitle() }),
-        !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MarkdownRenderer,
-          {
-            content: getTruncatedContent(content2),
-            styleProps: {
-              fontSize: "0.85rem",
-              lineHeight: 1.5,
-              paragraphSpacing: "4px",
-              headingScale: 0.9,
-              codeSize: "0.85em"
-            }
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: isExpanded, timeout: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MarkdownRenderer,
-      {
-        content: content2,
-        styleProps: {
-          fontSize: "0.85rem",
-          lineHeight: 1.5,
-          paragraphSpacing: "4px",
-          headingScale: 0.9,
-          codeSize: "0.85em"
-        }
-      }
-    ) }) })
-  ] });
-};
 const CodeContainer$3 = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
@@ -104523,60 +104358,11 @@ const CodeBlock = ({ code: code2 }) => {
     )
   ] });
 };
-const SectionHeader = styled$1(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  marginBottom: 8,
-  cursor: "pointer",
-  userSelect: "none",
-  "&:hover": {
-    backgroundColor: alpha(
-      theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.primary.main,
-      theme.palette.mode === "dark" ? 0.05 : 0.05
-    )
-  },
-  borderRadius: 4,
-  padding: "4px 8px",
-  color: theme.palette.primary.main,
-  transition: "all 0.2s ease"
-}));
-const SectionLabel$3 = styled$1(Typography)(({ theme }) => ({
-  display: "block",
-  color: theme.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 }) => ({
+const SectionLabel$3 = styled$1(Typography)(({ theme }) => ({
   display: "block",
   marginBottom: 4,
   color: theme.palette.error.light
@@ -104612,7 +104398,7 @@ const ErrorContainer$2 = styled$1(Box, {
 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(SectionLabel$3, { variant: "caption", children: "Error" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorContainer$2, { isUser, children: error })
   ] });
 };
@@ -104720,7 +104506,7 @@ const CodeContainer$1 = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
 });
-const SectionLabel$1 = styled$1(Typography)(({ theme }) => ({
+const SectionLabel$2 = styled$1(Typography)(({ theme }) => ({
   display: "block",
   marginBottom: 4,
   color: theme.palette.text.secondary
@@ -104756,109 +104542,15 @@ 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(SectionLabel$2, { variant: "caption", children: "Logs" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: log })
   ] });
 };
-const StyledAvatar = styled$1(Avatar, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme }) => ({
-  backgroundColor: isUser ? theme.palette.userMessage.background : theme.palette.icon.background,
-  color: isUser ? "white" : theme.palette.icon.text,
-  boxShadow: isUser ? theme.palette.userMessage.shadow : "none",
-  border: isUser ? `1px solid ${theme.palette.userMessage.border}` : "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 }) => ({
-  [theme.breakpoints.down("sm")]: {
-    maxWidth: "85%"
-  },
-  [theme.breakpoints.between("sm", "md")]: {
-    maxWidth: "75%"
-  },
-  [theme.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
-}) => {
-  const theme = useTheme$1();
-  const isDarkMode = theme.palette.mode === "dark";
-  const assistantBorderColor = isDarkMode ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
-  const assistantShadow = isDarkMode ? "0 2px 8px rgba(0, 0, 0, 0.15)" : "0 2px 8px rgba(0, 0, 0, 0.05)";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    StyledPaper$1,
-    {
-      elevation,
-      sx: {
-        backgroundColor: isUser ? theme.palette.userMessage.background : theme.palette.background.paper,
-        // Theme-appropriate background for assistant
-        border: isUser ? `1px solid ${theme.palette.userMessage.border}` : `1px solid ${assistantBorderColor}`,
-        boxShadow: isUser ? theme.palette.userMessage.shadow : assistantShadow,
-        color: theme.palette.text.primary
-        // Use theme text color
-      },
-      children
-    }
-  );
-};
-const StyledTimestamp = styled$1(Typography, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme }) => ({
-  display: "block",
-  marginTop: 8,
-  textAlign: isUser ? "left" : "right",
-  color: theme.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 }) => ({
+const SectionLabel$1 = styled$1(Typography)(({ theme }) => ({
   display: "block",
   marginBottom: 4,
   color: theme.palette.text.secondary
@@ -104900,10 +104592,710 @@ const OutputContainer = styled$1(Box)(({ theme }) => ({
 const OutputBlock = ({ output }) => {
   if (!output) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel, { variant: "caption", children: "Output" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$1, { variant: "caption", children: "Output" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(OutputContainer, { children: output })
   ] });
 };
+const AttachmentVideo = styled$1("video")(({ theme }) => ({
+  maxWidth: "100%",
+  maxHeight: 300,
+  borderRadius: 8,
+  marginBottom: 8,
+  boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.15 : 0.1)}`,
+  cursor: "pointer",
+  transition: "transform 0.2s ease, box-shadow 0.2s ease",
+  "&:hover": {
+    transform: "scale(1.02)",
+    boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.25 : 0.15)}`
+  }
+}));
+const getFileName = (path2) => {
+  const parts = path2.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 BlockContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "mounted"
+})(({ theme, mounted }) => ({
+  width: "calc(100% - 2*56px)",
+  marginLeft: 56,
+  opacity: mounted ? 1 : 0,
+  // Start invisible before animation
+  transform: mounted ? "translateY(0)" : "translateY(20px)",
+  transition: `opacity 0.4s ${theme.transitions.easing.easeOut}, transform 0.4s ${theme.transitions.easing.easeOut}`
+}));
+const BlockHeader = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "executionType" && prop !== "isUser" && prop !== "isExpanded"
+})(
+  ({ theme, isExpanded }) => ({
+    cursor: "pointer",
+    "&:hover": {
+      opacity: 0.9
+    },
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    backgroundColor: alpha(
+      theme.palette.common.black,
+      theme.palette.mode === "dark" ? 0.2 : 0.05
+    ),
+    borderRadius: isExpanded ? "8px 8px 0 0" : "8px",
+    transition: `background-color 0.3s ${theme.transitions.easing.easeInOut}, 
+                   border-radius 0.3s ${theme.transitions.easing.easeInOut}`
+  })
+);
+const BlockIcon = styled$1(Box)(({ theme }) => ({
+  marginRight: 8,
+  width: 40,
+  height: 40,
+  flexShrink: 0,
+  borderRadius: "100%",
+  backgroundColor: alpha(
+    theme.palette.common.black,
+    theme.palette.mode === "dark" ? 0.2 : 0.05
+  ),
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.icon.text,
+  transform: "scale(1) rotate(0deg)",
+  transition: `transform 0.4s ${theme.transitions.easing.easeOut}`,
+  "&.animate": {
+    animation: "iconAppear 0.4s forwards"
+  },
+  "@keyframes iconAppear": {
+    "0%": {
+      transform: "scale(0.8) rotate(-10deg)"
+    },
+    "100%": {
+      transform: "scale(1) rotate(0deg)"
+    }
+  }
+}));
+const BlockTitle = styled$1(Typography)(({ theme }) => ({
+  fontWeight: 500,
+  fontSize: "0.85rem",
+  color: theme.palette.text.secondary,
+  transform: "translateX(0)",
+  transition: `transform 0.4s ${theme.transitions.easing.easeOut}`,
+  "&.animate": {
+    animation: "titleFadeIn 0.4s forwards"
+  },
+  "@keyframes titleFadeIn": {
+    "0%": {
+      transform: "translateX(-5px)"
+    },
+    "100%": {
+      transform: "translateX(0)"
+    }
+  }
+}));
+const BlockContent = styled$1(Box)(({ theme }) => ({
+  fontSize: "0.85rem",
+  color: theme.palette.text.secondary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginTop: 2,
+  transform: "translateY(0)",
+  transition: `transform 0.4s ${theme.transitions.easing.easeOut}`,
+  "&.animate": {
+    animation: "contentFadeIn 0.4s forwards"
+  },
+  "@keyframes contentFadeIn": {
+    "0%": {
+      transform: "translateY(5px)"
+    },
+    "100%": {
+      transform: "translateY(0)"
+    }
+  }
+}));
+const ExpandedContent = styled$1(Box)(({ theme }) => ({
+  padding: "12px 16px",
+  backgroundColor: alpha(
+    theme.palette.common.black,
+    theme.palette.mode === "dark" ? 0.2 : 0.05
+  ),
+  borderBottomLeftRadius: 4,
+  borderBottomRightRadius: 4,
+  fontSize: "0.85rem",
+  color: theme.palette.text.primary,
+  borderLeft: `3px solid ${theme.palette.grey[theme.palette.mode === "dark" ? 600 : 400]}`,
+  marginLeft: 0,
+  transition: `border-left-width 0.3s ${theme.transitions.easing.easeInOut}`,
+  "&.animate": {
+    animation: "expandedContentAppear 0.3s forwards"
+  },
+  "@keyframes expandedContentAppear": {
+    "0%": {
+      borderLeftWidth: "0px"
+    },
+    "100%": {
+      borderLeftWidth: "3px"
+    }
+  }
+}));
+const ActionBadge = styled$1(Box)(({ theme }) => ({
+  position: "absolute",
+  top: "-10px",
+  right: "16px",
+  padding: "4px 8px",
+  borderRadius: "12px",
+  fontSize: "0.7rem",
+  fontWeight: "bold",
+  backgroundColor: alpha(theme.palette.primary.main, 0.9),
+  color: "#fff",
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+  zIndex: 1,
+  // Ensure badge is above other content
+  transform: "scale(1)",
+  transition: `transform 0.5s ${theme.transitions.easing.easeOut}`,
+  "&.animate": {
+    animation: "badgeBounceIn 0.5s forwards"
+  },
+  "@keyframes badgeBounceIn": {
+    "0%": {
+      transform: "scale(0)"
+    },
+    "60%": {
+      transform: "scale(1.2)"
+    },
+    "100%": {
+      transform: "scale(1)"
+    }
+  }
+}));
+const CollapseButton = styled$1(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px",
+  marginTop: "8px",
+  cursor: "pointer",
+  borderRadius: "4px",
+  backgroundColor: alpha(
+    theme.palette.common.black,
+    theme.palette.mode === "dark" ? 0.1 : 0.03
+  ),
+  transition: `all 0.2s ${theme.transitions.easing.easeInOut}`,
+  "&:hover": {
+    backgroundColor: alpha(
+      theme.palette.common.black,
+      theme.palette.mode === "dark" ? 0.15 : 0.05
+    ),
+    transform: "translateY(-1px)",
+    boxShadow: `0 2px 4px ${alpha(theme.palette.common.black, 0.1)}`
+  },
+  "&:active": {
+    transform: "translateY(0px)",
+    boxShadow: "none"
+  }
+}));
+const isWebUrl$1 = (path2) => {
+  return path2.startsWith("http://") || path2.startsWith("https://");
+};
+const isImage$1 = (path2) => {
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".webp",
+    ".bmp",
+    ".svg",
+    ".tiff",
+    ".tif",
+    ".ico",
+    ".heic",
+    ".heif",
+    ".avif",
+    ".jfif",
+    ".pjpeg",
+    ".pjp"
+  ];
+  const lowerPath = path2.toLowerCase();
+  return imageExtensions.some((ext) => lowerPath.endsWith(ext));
+};
+const isVideo$1 = (path2) => {
+  const videoExtensions = [
+    ".mp4",
+    ".webm",
+    ".ogg",
+    ".mov",
+    ".avi",
+    ".wmv",
+    ".flv",
+    ".mkv",
+    ".m4v",
+    ".3gp",
+    ".3g2"
+  ];
+  const lowerPath = path2.toLowerCase();
+  return videoExtensions.some((ext) => lowerPath.endsWith(ext));
+};
+const getAttachmentUrl$1 = (client, path2) => {
+  if (path2.startsWith("http")) {
+    return path2;
+  }
+  const normalizedPath = path2.startsWith("file://") ? path2 : `file://${path2}`;
+  if (isImage$1(path2)) {
+    return client.static.getImageUrl(normalizedPath);
+  }
+  if (isVideo$1(path2)) {
+    return client.static.getVideoUrl(normalizedPath);
+  }
+  return path2;
+};
+const BackgroundBlock = ({
+  content: content2,
+  action,
+  executionType,
+  isUser,
+  code: code2,
+  stdout,
+  stderr,
+  logging,
+  files
+}) => {
+  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const [mounted, setMounted] = reactExports.useState(false);
+  const mountedRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      const timer = setTimeout(() => {
+        setMounted(true);
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, []);
+  const handleExpand = () => {
+    setIsExpanded(true);
+  };
+  const handleCollapse = (e) => {
+    e.stopPropagation();
+    setIsExpanded(false);
+  };
+  const getTitle = () => {
+    switch (action) {
+      case "DONE":
+        return "Task Complete";
+      case "ASK":
+        return "Asking a Question";
+      case "CODE":
+        return "Executing Code";
+      case "WRITE":
+        return "Writing Content";
+      case "EDIT":
+        return "Editing Content";
+      case "READ":
+        return "Reading Content";
+      default:
+        return executionType === "plan" ? "Planning" : executionType === "action" ? "Action" : "Reflection";
+    }
+  };
+  const getIcon = () => {
+    switch (action) {
+      case "DONE":
+        return faCheck;
+      case "ASK":
+        return faQuestion;
+      case "CODE":
+        return faCode;
+      case "WRITE":
+        return faPencilAlt;
+      case "EDIT":
+        return faEdit;
+      case "READ":
+        return faBook;
+      default:
+        return executionType === "plan" ? faLightbulb : executionType === "action" ? faCode : faCommentDots;
+    }
+  };
+  const getTruncatedContent = (content22, maxLength = 140) => {
+    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
+  };
+  const client = reactExports.useMemo(() => {
+    return createLocalOperatorClient(apiConfig.baseUrl);
+  }, []);
+  const getUrl = reactExports.useCallback(
+    (path2) => getAttachmentUrl$1(client, path2),
+    [client]
+  );
+  const handleFileClick = reactExports.useCallback((filePath) => {
+    try {
+      if (isWebUrl$1(filePath)) {
+        window.api.openExternal(filePath);
+      } else {
+        const normalizedPath = filePath.startsWith("file://") ? filePath.substring(7) : filePath;
+        window.api.openFile(normalizedPath);
+      }
+    } catch (error) {
+      console.error("Error opening file:", error);
+    }
+  }, []);
+  const hasCollapsibleContent = executionType === "action" && (code2 || stdout || stderr || logging);
+  reactExports.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { sx: { position: "relative" }, mounted, children: [
+    executionType === "action" && !isUser && /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { className: mounted ? "animate" : "", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "xs" }),
+      "ACTION"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      BlockHeader,
+      {
+        executionType,
+        isUser,
+        isExpanded,
+        onClick: isExpanded ? handleCollapse : handleExpand,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { className: mounted ? "animate" : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1, position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", className: mounted ? "animate" : "", children: getTitle() }),
+            !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { className: mounted ? "animate" : "", 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.jsxs(ExpandedContent, { className: isExpanded ? "animate" : "", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MarkdownRenderer,
+        {
+          content: content2,
+          styleProps: {
+            fontSize: "0.85rem",
+            lineHeight: 1.5,
+            paragraphSpacing: "4px",
+            headingScale: 0.9,
+            codeSize: "0.85em"
+          }
+        }
+      ),
+      hasCollapsibleContent && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        code2 && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: code2, isUser }),
+        stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: stdout, isUser }),
+        stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: stderr, isUser }),
+        logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: logging, isUser })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapseButton, { onClick: handleCollapse, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faChevronUp, size: "sm" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: "Collapse" })
+      ] })
+    ] }) }),
+    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2, mt: 2 }, children: files.filter((file) => isImage$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ImageAttachment,
+      {
+        file,
+        src: getUrl(file),
+        onClick: handleFileClick
+      },
+      `${file}`
+    )) }),
+    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: files.filter((file) => isVideo$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      VideoAttachment,
+      {
+        file,
+        src: getUrl(file),
+        onClick: handleFileClick
+      },
+      `${file}`
+    )) }),
+    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: files.filter((file) => !isImage$1(file) && !isVideo$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FileAttachment,
+      {
+        file,
+        onClick: handleFileClick
+      },
+      `${file}`
+    )) })
+  ] });
+};
+const SectionHeader = styled$1(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: 8,
+  cursor: "pointer",
+  userSelect: "none",
+  "&:hover": {
+    backgroundColor: alpha(
+      theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.primary.main,
+      theme.palette.mode === "dark" ? 0.05 : 0.05
+    )
+  },
+  borderRadius: 4,
+  padding: "4px 8px",
+  color: theme.palette.primary.main,
+  transition: "all 0.2s ease"
+}));
+const SectionLabel = styled$1(Typography)(({ theme }) => ({
+  display: "block",
+  color: theme.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, { variant: "caption", children: isCollapsed ? "Show technical details" : "Hide technical details" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: !isCollapsed, timeout: "auto", children })
+  ] });
+};
+const StyledAvatar = styled$1(Avatar, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme }) => ({
+  backgroundColor: isUser ? theme.palette.userMessage.background : theme.palette.icon.background,
+  color: isUser ? "white" : theme.palette.icon.text,
+  boxShadow: isUser ? theme.palette.userMessage.shadow : "none",
+  border: isUser ? `1px solid ${theme.palette.userMessage.border}` : "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: 24,
+  marginTop: 8
+}));
+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 ControlsContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser }) => ({
+  position: "absolute",
+  bottom: isUser ? 12 : -12,
+  // Position below the message
+  display: "flex",
+  alignItems: "center",
+  justifyContent: isUser ? "flex-end" : "flex-start",
+  width: "100%",
+  opacity: 0,
+  transition: "opacity 0.2s ease-in-out",
+  zIndex: 1
+}));
+const ControlsWrapper = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "flex-start"
+}));
+const MessageControls = ({
+  isUser,
+  content: content2
+}) => {
+  const theme = useTheme$1();
+  const [copied, setCopied] = reactExports.useState(false);
+  const showCopyButton = content2;
+  const handleCopy = async () => {
+    try {
+      if (content2) {
+        await navigator.clipboard.writeText(content2);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      }
+    } catch (error) {
+      console.error("Failed to copy text:", error);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ControlsContainer, { isUser, className: "message-controls", children: showCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx(ControlsWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Tooltip,
+    {
+      title: copied ? "Copied!" : "Copy message",
+      placement: "top",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: handleCopy,
+          sx: {
+            color: theme.palette.text.secondary,
+            width: "34px",
+            height: "34px",
+            "&:hover": {
+              color: theme.palette.primary.main,
+              backgroundColor: "rgba(56, 201, 106, 0.1)"
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCopy, size: "sm" })
+        }
+      )
+    }
+  ) }) });
+};
+const StyledPaper$1 = styled$1(Paper)(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "85%"
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "80%"
+  },
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "80%"
+  },
+  width: "auto",
+  padding: 16,
+  borderRadius: 8,
+  wordBreak: "break-word",
+  overflowWrap: "break-word",
+  position: "relative"
+}));
+const MessagePaper = ({
+  isUser,
+  elevation = isUser ? 2 : 0,
+  children,
+  content: content2
+}) => {
+  const theme = useTheme$1();
+  if (isUser) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Box,
+      {
+        sx: {
+          position: "relative",
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-end",
+          "&:hover .message-controls": {
+            opacity: 1
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledPaper$1,
+            {
+              elevation,
+              sx: {
+                backgroundColor: theme.palette.userMessage.background,
+                border: `1px solid ${theme.palette.userMessage.border}`,
+                boxShadow: theme.palette.userMessage.shadow,
+                color: theme.palette.text.primary
+              },
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(MessageControls, { isUser, content: content2 })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        "&:hover .message-controls": {
+          opacity: 1
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Box,
+          {
+            sx: {
+              borderRadius: 2,
+              color: theme.palette.text.primary,
+              width: "calc(100% - 52px)",
+              // Take full width minus padding
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              position: "relative"
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MessageControls, { isUser, content: content2 })
+      ]
+    }
+  );
+};
+const StyledTimestamp = styled$1(Typography, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme }) => ({
+  display: "block",
+  marginTop: 8,
+  textAlign: isUser ? "left" : "right",
+  color: theme.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 HighlightContainer = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "isUser"
 })(({ theme }) => ({
@@ -104969,42 +105361,6 @@ const StatusIndicator = ({ status }) => {
   if (!status) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledStatusIndicator, { status, children: status });
 };
-const AttachmentVideo = styled$1("video")(({ theme }) => ({
-  maxWidth: "100%",
-  maxHeight: 300,
-  borderRadius: 8,
-  marginBottom: 8,
-  boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.15 : 0.1)}`,
-  cursor: "pointer",
-  transition: "transform 0.2s ease, box-shadow 0.2s ease",
-  "&:hover": {
-    transform: "scale(1.02)",
-    boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.25 : 0.15)}`
-  }
-}));
-const getFileName = (path2) => {
-  const parts = path2.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 = (path2) => {
   return path2.startsWith("http://") || path2.startsWith("https://");
 };
@@ -105062,14 +105418,14 @@ const getAttachmentUrl = (client, path2) => {
 };
 const MessageItem = reactExports.memo(
   ({ message: message2 }) => {
-    const shouldHide = (message2.action === "DONE" || message2.action === "ASK") && message2.execution_type === "action" && message2.task_classification === "conversation";
+    const shouldHide = (message2.action === "DONE" || message2.action === "ASK") && message2.execution_type === "action" && message2.task_classification === "conversation" || !message2.message && (!message2.files || message2.files.length === 0) && !message2.code && !message2.stdout && !message2.stderr && !message2.logging;
     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 shouldUseBackgroundBlock = message2.execution_type === "reflection" || message2.execution_type === "action";
     const client = reactExports.useMemo(() => {
       return createLocalOperatorClient(apiConfig.baseUrl);
     }, []);
@@ -105089,21 +105445,25 @@ const MessageItem = reactExports.memo(
         console.error("Error opening file:", error);
       }
     }, []);
-    if (isPlanOrReflection && message2.message) {
-      const executionType = isAction && message2.action === "DONE" ? "action" : message2.execution_type || "action";
+    if (shouldUseBackgroundBlock && message2.message) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         BackgroundBlock,
         {
           content: message2.message,
           action: message2.action,
-          executionType,
-          isUser
+          executionType: message2.execution_type || "action",
+          isUser,
+          code: message2.code,
+          stdout: message2.stdout,
+          stderr: message2.stderr,
+          logging: message2.logging,
+          files: message2.files
         }
       );
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageContainer, { isUser, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAvatar, { isUser }),
-      isSecurityCheck ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecurityCheckHighlight, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, children: [
+      isSecurityCheck ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecurityCheckHighlight, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, content: message2.message, 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,
           {
@@ -105160,7 +105520,7 @@ const MessageItem = reactExports.memo(
           taskClassification: message2.task_classification || "",
           isUser,
           executionType: message2.execution_type,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, children: [
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { isUser, content: message2.message, 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,
               {
@@ -105240,6 +105600,23 @@ const MessagesContainer = styled$1(Box)(({ theme }) => ({
   transform: "translateZ(0)",
   willChange: "scroll-position"
 }));
+const CenteredMessagesContainer = styled$1(Box)(({ theme }) => ({
+  width: "100%",
+  maxWidth: "900px",
+  margin: "0 auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: 16,
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100%"
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    maxWidth: "90%"
+  },
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "900px"
+  }
+}));
 const LoadingMoreIndicator = styled$1(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -105288,25 +105665,38 @@ const MessagesView = ({
     isLoadingMessages && !messages.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       messages.length > 0 ? (
         // Only render visible messages plus a buffer
-        messages.map((message2) => /* @__PURE__ */ jsxRuntimeExports.jsx(MessageItem, { message: message2 }, message2.id))
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(EmptyMessagesBox, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyMessagesIcon, { icon: faCommentDots }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "No messages yet. Start a conversation!" })
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredMessagesContainer, { children: [
+          messages.map((message2) => /* @__PURE__ */ jsxRuntimeExports.jsx(MessageItem, { message: message2 }, message2.id)),
+          isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LoadingIndicator,
+            {
+              status: jobStatus,
+              agentName,
+              currentExecution,
+              scrollToBottom
+            }
+          )
+        ] })
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(EmptyMessagesBox, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyMessagesIcon, { icon: faCommentDots }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "No messages yet. Start a conversation!" })
+        ] }),
+        isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(CenteredMessagesContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LoadingIndicator,
+          {
+            status: jobStatus,
+            agentName,
+            currentExecution,
+            scrollToBottom
+          }
+        ) })
       ] }),
-      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LoadingIndicator,
-        {
-          status: jobStatus,
-          agentName,
-          currentExecution,
-          scrollToBottom
-        }
-      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
     ] })
   ] });
 };
-const RawInfoContainer = styled$1(Box)({
+styled$1(Box)({
   flexGrow: 1,
   overflow: "auto",
   padding: 24,
@@ -105319,7 +105709,7 @@ const RawInfoContainer = styled$1(Box)({
     borderRadius: "4px"
   }
 });
-const RawInfoContent = styled$1(Box)({
+styled$1(Box)({
   padding: 16,
   backgroundColor: "rgba(0, 0, 0, 0.3)",
   borderRadius: 4,
@@ -105327,12 +105717,6 @@ const RawInfoContent = styled$1(Box)({
   whiteSpace: "pre-wrap",
   overflow: "auto"
 });
-const RawInfoView = ({ content: content2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RawInfoContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", gutterBottom: true, sx: { color: "primary.main" }, children: "Raw Information" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(RawInfoContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", component: "pre", sx: { fontSize: "0.8rem" }, children: content2 }) })
-  ] });
-};
 const ChatContainer = styled$1(Paper)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -105383,27 +105767,22 @@ const ChatContent = ({
         agentId
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ChatTabs, { activeTab, onChange: onTabChange }),
-    activeTab === "chat" ? (
-      /* Messages container */
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        MessagesView,
-        {
-          messages,
-          isLoading,
-          isLoadingMessages,
-          isFetchingMore,
-          jobStatus,
-          agentName,
-          currentExecution,
-          messagesContainerRef,
-          messagesEndRef,
-          scrollToBottom
-        }
-      )
-    ) : (
-      /* Raw information tab */
-      /* @__PURE__ */ jsxRuntimeExports.jsx(RawInfoView, { content: rawInfoContent })
+    isDevelopmentMode(),
+    /* Messages container */
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MessagesView,
+      {
+        messages,
+        isLoading,
+        isLoadingMessages,
+        isFetchingMore,
+        jobStatus,
+        agentName,
+        currentExecution,
+        messagesContainerRef,
+        messagesEndRef,
+        scrollToBottom
+      }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDivider, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107762,7 +108141,7 @@ const EmptyStateContainer$3 = styled$1(Box)({
 const AgentsList$1 = styled$1(List$1)(({ theme }) => ({
   overflow: "auto",
   flexGrow: 1,
-  padding: "8px",
+  padding: "8px 0px",
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -107772,19 +108151,23 @@ const AgentsList$1 = styled$1(List$1)(({ theme }) => ({
   }
 }));
 const AgentListItemButton$1 = styled$1(ListItemButton)(({ theme }) => ({
-  margin: "0 8px",
+  margin: "0 8px 8px",
   borderRadius: 8,
-  marginBottom: 4,
-  paddingRight: 40,
+  paddingRight: 12,
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 12,
+  position: "relative",
+  // Ensure proper positioning context
   "&.Mui-selected": {
-    backgroundColor: theme.palette.sidebar.itemActive,
+    backgroundColor: alpha(theme.palette.sidebar.itemActive, 0.1),
     color: theme.palette.sidebar.itemActiveText,
     "&:hover": {
-      backgroundColor: theme.palette.sidebar.itemActiveHover
+      backgroundColor: alpha(theme.palette.sidebar.itemActiveHover, 0.15)
     }
   },
   "&:hover": {
-    backgroundColor: theme.palette.sidebar.itemHover
+    backgroundColor: alpha(theme.palette.sidebar.itemHover, 0.1)
   }
 }));
 const AgentAvatar$1 = styled$1(Avatar, {
@@ -107792,30 +108175,93 @@ const AgentAvatar$1 = styled$1(Avatar, {
 })(({ theme, selected }) => ({
   backgroundColor: selected ? theme.palette.sidebar.itemActive : theme.palette.icon.background,
   color: selected ? theme.palette.sidebar.itemActiveText : theme.palette.icon.text,
-  boxShadow: `0 2px 4px ${alpha(theme.palette.common.black, 0.15)}`
+  boxShadow: `0 2px 4px ${alpha(theme.palette.common.black, 0.15)}`,
+  width: 42,
+  height: 42
 }));
-const MessagePreview = styled$1("span")({
-  display: "block",
-  color: "text.secondary",
-  maxWidth: "100%",
-  marginBottom: 4,
-  fontSize: "0.75rem"
+const MessageBubble = styled$1("div")({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  overflow: "hidden",
+  position: "relative",
+  // Ensure the message bubble maintains its layout
+  isolation: "isolate"
+  // Create a new stacking context
 });
-const TimeStampContainer = styled$1("span")(({ theme }) => ({
+const AgentNameContainer = styled$1(Box)({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+  position: "relative",
+  // Ensure the container maintains its position
+  overflow: "hidden"
+});
+const AgentName = styled$1(Typography)(() => ({
+  fontWeight: 600,
+  fontSize: "0.9rem",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginBottom: 2,
+  flex: 1
+}));
+const MessagePreview = styled$1("div")(({ theme }) => ({
+  fontSize: "0.8rem",
+  color: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.6)",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  width: "100%",
+  minHeight: "18px"
+}));
+const TimeStampContainer = styled$1("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   color: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)",
-  fontSize: "0.75rem"
+  fontSize: "0.7rem",
+  marginLeft: 8,
+  flexShrink: 0,
+  transition: "transform 0.2s ease",
+  ".MuiListItemButton-root:hover &": {
+    transform: "translateX(-24px)"
+  },
+  // Ensure the timestamp doesn't get affected by menu clicks
+  pointerEvents: "none"
 }));
 const TimeStampText = styled$1("span")({
   cursor: "help"
 });
-const NoMessagesContainer = styled$1("span")(({ theme }) => ({
+const OptionsButtonContainer = styled$1(Box)({
+  position: "absolute",
+  right: -8,
+  top: 0,
+  opacity: 0,
+  transform: "translateX(100%)",
+  transition: "opacity 0.2s ease, transform 0.2s ease",
+  ".MuiListItemButton-root:hover &": {
+    opacity: 1,
+    transform: "translateX(0)",
+    visibility: "visible"
+  },
+  zIndex: 2,
+  // Ensure the container doesn't affect layout when clicked
+  pointerEvents: "none",
+  "& > *": {
+    pointerEvents: "auto"
+    // Allow clicks on children (the button itself)
+  }
+});
+const NoMessagesContainer = styled$1("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   color: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)",
-  fontSize: "0.75rem",
-  fontStyle: "italic"
+  fontSize: "0.8rem",
+  fontStyle: "italic",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
 }));
 const ChatSidebar = ({
   selectedConversation,
@@ -107904,8 +108350,22 @@ const ChatSidebar = ({
   const formatDateTime = (dateTimeString) => {
     if (!dateTimeString) return "";
     try {
-      const date = new Date(dateTimeString);
-      return format(date, "MMM d, h:mm a");
+      const messageDate = new Date(dateTimeString);
+      const now = /* @__PURE__ */ new Date();
+      const yesterday = new Date(now);
+      yesterday.setDate(now.getDate() - 1);
+      if (messageDate.toDateString() === now.toDateString()) {
+        return format(messageDate, "h:mm a");
+      }
+      if (messageDate.toDateString() === yesterday.toDateString()) {
+        return "Yesterday";
+      }
+      const oneWeekAgo = new Date(now);
+      oneWeekAgo.setDate(now.getDate() - 7);
+      if (messageDate > oneWeekAgo) {
+        return format(messageDate, "EEEE");
+      }
+      return format(messageDate, "yyyy-MM-dd");
     } catch (error) {
       return "";
     }
@@ -107950,106 +108410,96 @@ const ChatSidebar = ({
         ),
         children: "Failed to load agents. Please try again."
       }
-    ) : sortedAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "No agents found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList$1, { children: sortedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ListItem,
+    ) : sortedAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "No agents found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList$1, { children: sortedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      AgentListItemButton$1,
       {
-        disablePadding: true,
-        secondaryAction: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          AgentOptionsMenu,
-          {
-            agentId: agent.id,
-            agentName: agent.name,
-            isAgentsPage: false,
-            onViewAgentSettings: onNavigateToAgentSettings ? () => onNavigateToAgentSettings(agent.id) : void 0,
-            onExportAgent: () => handleExportAgent(agent.id),
-            onAgentDeleted: (deletedAgentId) => {
-              if (selectedConversation === deletedAgentId) {
-                onSelectConversation("");
-              }
-              refetch();
-            },
-            buttonSx: {
-              mr: 0.5,
-              width: 32,
-              height: 32,
-              borderRadius: "8px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              ".MuiListItem-root:hover &": {
-                opacity: 0.6
-              },
-              ".MuiListItemButton-root.Mui-selected + .MuiListItemSecondaryAction-root &": {
-                opacity: 0.6
-              }
-            }
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          AgentListItemButton$1,
-          {
-            selected: selectedConversation === agent.id,
-            onClick: () => handleSelectConversation(agent.id),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$1, { selected: selectedConversation === agent.id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }) }),
+        selected: selectedConversation === agent.id,
+        onClick: () => handleSelectConversation(agent.id),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$1, { selected: selectedConversation === agent.id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageBubble, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(AgentNameContainer, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                ListItemText,
+                Tooltip,
                 {
-                  primary: agent.name,
-                  secondary: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { display: "block", marginTop: "4px" }, children: agent.last_message ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Tooltip,
-                      {
-                        title: truncateMessage(agent.last_message, 500),
-                        arrow: true,
-                        placement: "bottom-start",
-                        enterDelay: 1500,
-                        leaveDelay: 200,
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessagePreview, { children: truncateMessage(agent.last_message, 60) })
-                      }
-                    ),
-                    agent.last_message_datetime && /* @__PURE__ */ jsxRuntimeExports.jsxs(TimeStampContainer, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        FontAwesomeIcon,
-                        {
-                          icon: faClock,
-                          size: "xs",
-                          style: { marginRight: "4px" }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        TimeStampText,
-                        {
-                          title: new Date(
-                            agent.last_message_datetime
-                          ).toLocaleString(),
-                          children: formatDateTime(agent.last_message_datetime)
+                  enterDelay: 1200,
+                  enterNextDelay: 1200,
+                  title: agent.name,
+                  arrow: true,
+                  placement: "top-start",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentName, { children: agent.name })
+                }
+              ),
+              agent.last_message_datetime && /* @__PURE__ */ jsxRuntimeExports.jsx(TimeStampContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                TimeStampText,
+                {
+                  title: new Date(
+                    agent.last_message_datetime
+                  ).toLocaleString(),
+                  children: formatDateTime(agent.last_message_datetime)
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsButtonContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Tooltip,
+                {
+                  enterDelay: 1200,
+                  enterNextDelay: 1200,
+                  title: "Agent Options",
+                  arrow: true,
+                  placement: "top",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    AgentOptionsMenu,
+                    {
+                      agentId: agent.id,
+                      agentName: agent.name,
+                      isAgentsPage: false,
+                      onViewAgentSettings: onNavigateToAgentSettings ? () => onNavigateToAgentSettings(agent.id) : void 0,
+                      onExportAgent: () => handleExportAgent(agent.id),
+                      onAgentDeleted: (deletedAgentId) => {
+                        if (selectedConversation === deletedAgentId) {
+                          onSelectConversation("");
                         }
-                      )
-                    ] })
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(NoMessagesContainer, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      FontAwesomeIcon,
-                      {
-                        icon: faCommentSlash,
-                        size: "xs",
-                        style: { marginRight: "4px" }
+                        refetch();
+                      },
+                      buttonSx: {
+                        width: 24,
+                        height: 24,
+                        borderRadius: "4px",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        opacity: 1
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "No messages yet" })
-                  ] }) }),
-                  primaryTypographyProps: {
-                    fontWeight: 500,
-                    variant: "body1"
-                  }
+                    }
+                  ) })
                 }
-              )
-            ]
-          }
-        )
-      },
-      agent.id
-    )) }),
+              ) })
+            ] }),
+            agent.last_message ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Tooltip,
+              {
+                title: truncateMessage(agent.last_message, 500),
+                arrow: true,
+                placement: "bottom-start",
+                enterDelay: 1200,
+                enterNextDelay: 1200,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessagePreview, { children: truncateMessage(agent.last_message, 40) })
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(NoMessagesContainer, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: faCommentSlash,
+                  size: "xs",
+                  style: { marginRight: "4px" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "No messages yet" })
+            ] })
+          ] })
+        ]
+      }
+    ) }, agent.id)) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       CreateAgentDialog,
       {
@@ -108152,6 +108602,11 @@ const ChatPage = () => {
   const conversationId = effectiveAgentId || void 0;
   const selectedConversation = effectiveAgentId || void 0;
   const [activeTab, setActiveTab] = reactExports.useState("chat");
+  reactExports.useEffect(() => {
+    if (activeTab !== "chat") {
+      setActiveTab("chat");
+    }
+  }, [activeTab]);
   const [isOptionsSidebarOpen, setIsOptionsSidebarOpen] = reactExports.useState(false);
   const apiClient = reactExports.useMemo(
     () => createLocalOperatorClient(apiConfig.baseUrl),
@@ -108379,7 +108834,6 @@ Store messages: ${JSON.stringify(getMessages(conversationId || ""), null, 2)}`;
     getMessages
   ]);
   const handleTabChange = reactExports.useCallback((newTab) => {
-    setActiveTab(newTab);
   }, []);
   const renderContent = () => {
     if (!conversationId) {
@@ -114904,7 +115358,7 @@ document.addEventListener("DOMContentLoaded", () => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(HashRouter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ThemedToastContainer, {}),
-      false
+      isDevelopmentMode()
     ] }) }) })
   );
 });