local-operator-ui 0.1.4 → 0.1.5

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

@@ -1,4 +1,4 @@
-import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as faQuestion, aF as faLightbulb, aG as faChevronRight, aH as faFile, aI as faUser, aJ as faEllipsisVertical, aK as faComment, aL as faChevronLeft, aM as faPlus, aN as faSearch, aO as faCommentSlash, aP as faArrowRight, aQ as faComments, aR as faTag, aS as faIdCard, aT as faCalendarAlt, aU as faCodeBranch, aV as faShieldAlt, aW as faArrowLeft, aX as requireReact, aY as LinearProgress, aZ as keyframes, a_ as faShield, a$ as faSignOut, b0 as faMagicWandSparkles, b1 as faBrain, b2 as faWandMagicSparkles, b3 as faExternalLinkAlt, b4 as faKey, b5 as faGlobe, b6 as faLock, b7 as faEdit, b8 as faSave, b9 as faEnvelope, ba as faCloudUploadAlt, bb as faHistory, bc as faListAlt, bd as library$1, be as icons$1, bf as CssBaseline, bg as ReactDOM$1, bh as ThemeProvider, bi as theme, bj as ErrorBoundary } from "./theme-DWJi6s4t.js";
+import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as keyframes, aF as faChevronUp, aG as faQuestion, aH as faLightbulb, aI as faChevronRight, aJ as faFile, aK as faUser, aL as faEllipsisVertical, aM as faComment, aN as faChevronLeft, aO as faPlus, aP as faSearch, aQ as faCommentSlash, aR as faArrowRight, aS as faComments, aT as faTag, aU as faIdCard, aV as faCalendarAlt, aW as faCodeBranch, aX as faShieldAlt, aY as faArrowLeft, aZ as requireReact, a_ as LinearProgress, a$ as faShield, b0 as faSignOut, b1 as faMagicWandSparkles, b2 as faBrain, b3 as faWandMagicSparkles, b4 as faExternalLinkAlt, b5 as faKey, b6 as faGlobe, b7 as faLock, b8 as faEdit, b9 as faSave, ba as faEnvelope, bb as faCloudUploadAlt, bc as faHistory, bd as faListAlt, be as library$1, bf as icons$1, bg as CssBaseline, bh as ReactDOM$1, bi as ThemeProvider, bj as theme, bk as ErrorBoundary } from "./theme-CHCNkogj.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -25844,8 +25844,18 @@ const getImageUrl = (baseUrl, imagePath) => {
   const encodedPath = encodeURIComponent(normalizedPath);
   return `${normalizedBaseUrl}/v1/static/images?path=${encodedPath}`;
 };
+const getVideoUrl = (baseUrl, videoPath) => {
+  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+  let normalizedPath = videoPath;
+  if (normalizedPath.startsWith("file://")) {
+    normalizedPath = normalizedPath.substring(7);
+  }
+  const encodedPath = encodeURIComponent(normalizedPath);
+  return `${normalizedBaseUrl}/v1/static/videos?path=${encodedPath}`;
+};
 const StaticApi = {
-  getImageUrl
+  getImageUrl,
+  getVideoUrl
 };
 class LocalOperatorClient {
   baseUrl;
@@ -30738,8 +30748,15 @@ const useJobPolling = ({
   conversationId,
   addMessage
 }) => {
-  const [currentJobId, setCurrentJobId] = reactExports.useState(null);
+  const [currentJobId, setCurrentJobIdInternal] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
+  const [currentExecution, setCurrentExecution] = reactExports.useState(null);
+  const setCurrentJobId = reactExports.useCallback((jobId) => {
+    setCurrentJobIdInternal(jobId);
+    if (jobId === null) {
+      setCurrentExecution(null);
+    }
+  }, []);
   const queryClient2 = useQueryClient();
   const { getMessages, setMessages } = useChatStore();
   const lastProcessedJobDataRef = reactExports.useRef(null);
@@ -30786,7 +30803,13 @@ const useJobPolling = ({
         return false;
       }
     },
-    [client.jobs, currentJobId, shouldEnableQuery, getConnectivityError]
+    [
+      client.jobs,
+      currentJobId,
+      shouldEnableQuery,
+      getConnectivityError,
+      setCurrentJobId
+    ]
   );
   reactExports.useEffect(() => {
     if (conversationId !== previousConversationIdRef.current) {
@@ -30833,7 +30856,13 @@ const useJobPolling = ({
       }
     }
     previousConversationIdRef.current = conversationId;
-  }, [conversationId, client.jobs, shouldEnableQuery, getConnectivityError]);
+  }, [
+    conversationId,
+    client.jobs,
+    shouldEnableQuery,
+    getConnectivityError,
+    setCurrentJobId
+  ]);
   const updateConversationMessages = reactExports.useCallback(
     async (agentId) => {
       if (!agentId) return;
@@ -30922,7 +30951,7 @@ const useJobPolling = ({
       setCurrentJobId(null);
       setIsLoading(false);
     },
-    [conversationId, addMessage, updateConversationMessages]
+    [conversationId, addMessage, updateConversationMessages, setCurrentJobId]
   );
   const {
     data: jobData,
@@ -30956,6 +30985,9 @@ const useJobPolling = ({
     const jobDataSignature = `${jobData.id}-${jobData.status}-${dataUpdatedAt}`;
     if (jobDataSignature !== lastProcessedJobDataRef.current) {
       lastProcessedJobDataRef.current = jobDataSignature;
+      if (jobData.current_execution) {
+        setCurrentExecution(jobData.current_execution);
+      }
       if (jobData.status === "processing") {
         const debounceTimeout = setTimeout(() => {
           updateConversationMessages(conversationId);
@@ -30964,6 +30996,7 @@ const useJobPolling = ({
       }
       if (jobData.status === "completed" || jobData.status === "failed") {
         handleJobCompletion(jobData);
+        setCurrentExecution(null);
       }
     }
     return void 0;
@@ -30972,7 +31005,9 @@ const useJobPolling = ({
     dataUpdatedAt,
     handleJobCompletion,
     conversationId,
-    updateConversationMessages
+    updateConversationMessages,
+    setCurrentExecution,
+    setCurrentJobId
   ]);
   reactExports.useEffect(() => {
     if (error) {
@@ -30988,7 +31023,8 @@ const useJobPolling = ({
     jobStatus: jobData?.status || null,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   };
 };
 const useScrollToBottom = (dependencies = [], threshold = 300, buttonThreshold = 50) => {
@@ -31090,7 +31126,7 @@ const SidebarContainer$6 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$3 = styled$1(Box)({
+const ContentContainer$4 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -31101,7 +31137,7 @@ const StyledDivider = styled$1(Divider)({
 const ChatLayout = ({ sidebar, content: content2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarContainer$6, { children: sidebar }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$3, { children: content2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$4, { children: content2 })
   ] });
 };
 const useAgentRouteParam = () => {
@@ -31528,6 +31564,9 @@ const useClearAgentConversation = () => {
       queryClient2.invalidateQueries({
         queryKey: ["agent", variables.agentId, "conversation"]
       });
+      queryClient2.invalidateQueries({
+        queryKey: ["conversation-messages", variables.agentId]
+      });
       clearChatMessages(variables.agentId);
       clearMessageHistory(variables.agentId);
       y$1.success("Conversation cleared successfully");
@@ -42975,12 +43014,19 @@ const ModelSelect = ({
   }, [hostingId]);
   const { refreshModels } = useModels();
   const previousHostingIdRef = reactExports.useRef(null);
+  const refreshTimeRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (hostingId && previousHostingIdRef.current !== hostingId) {
       previousHostingIdRef.current = hostingId;
       const timeoutId = setTimeout(() => {
-        refreshModels();
-      }, 0);
+        const now = Date.now();
+        const lastRefreshTime = refreshTimeRef.current;
+        const THROTTLE_DURATION = 2e3;
+        if (!lastRefreshTime || now - lastRefreshTime > THROTTLE_DURATION) {
+          refreshModels();
+          refreshTimeRef.current = now;
+        }
+      }, 100);
       return () => clearTimeout(timeoutId);
     }
     return void 0;
@@ -44500,366 +44546,6 @@ const MessageInput = ({
     )
   ] });
 };
-const LoadingIndicator = ({ status, agentName = "Agent" }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 2
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Avatar,
-          {
-            sx: {
-              bgcolor: "rgba(56, 201, 106, 0.2)",
-              color: "primary.main"
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot, size: "sm" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Box,
-          {
-            sx: {
-              bgcolor: "background.paper",
-              p: 2,
-              borderRadius: 2,
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16, color: "primary" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: status ? `${agentName} is ${getStatusText(status)}...` : `${agentName} is thinking...` })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const getStatusText = (status) => {
-  switch (status) {
-    case "pending":
-      return "waiting to start";
-    case "processing":
-      return "thinking";
-    case "completed":
-      return "finishing up";
-    case "failed":
-      return "having trouble";
-    case "cancelled":
-      return "was cancelled";
-    default:
-      return "thinking";
-  }
-};
-const HighlightContainer$1 = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "action" && prop !== "isUser"
-})(({ action }) => ({
-  position: "relative",
-  padding: "16px",
-  borderRadius: "8px",
-  marginBottom: "16px",
-  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-  width: "100%",
-  border: `1px solid ${action === "DONE" ? "rgba(76, 175, 80, 0.5)" : "rgba(33, 150, 243, 0.5)"}`,
-  backgroundColor: action === "DONE" ? "rgba(76, 175, 80, 0.1)" : "rgba(33, 150, 243, 0.1)",
-  transition: "all 0.2s ease",
-  "&:hover": {
-    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)"
-  }
-}));
-const ActionBadge = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "action"
-})(({ theme: theme2, action }) => ({
-  position: "absolute",
-  top: "-10px",
-  right: "16px",
-  padding: "4px 8px",
-  borderRadius: "12px",
-  fontSize: "0.7rem",
-  fontWeight: "bold",
-  backgroundColor: action === "DONE" ? theme2.palette.success.main : theme2.palette.info.main,
-  color: "#fff",
-  display: "flex",
-  alignItems: "center",
-  gap: "4px",
-  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
-}));
-const ActionHighlight = ({
-  children,
-  action,
-  isUser,
-  taskClassification,
-  executionType
-}) => {
-  const shouldHighlight = (action === "DONE" || action === "ASK") && taskClassification !== "conversation" || executionType === "response" && taskClassification !== "conversation";
-  if (!shouldHighlight) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer$1, { action, isUser, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { action, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        FontAwesomeIcon,
-        {
-          icon: action === "DONE" ? faCheck : faQuestion,
-          size: "xs"
-        }
-      ),
-      action === "DONE" ? "COMPLETE" : "QUESTION"
-    ] }),
-    children
-  ] });
-};
-const MarkdownContent = styled$1(Box, {
-  shouldForwardProp: (prop) => ![
-    "fontSize",
-    "lineHeight",
-    "paragraphSpacing",
-    "headingScale",
-    "codeSize"
-  ].includes(prop)
-})(
-  ({
-    fontSize = "1.05rem",
-    lineHeight = 1.6,
-    paragraphSpacing = "8px",
-    headingScale = 1,
-    codeSize = "0.85em"
-  }) => ({
-    wordBreak: "break-word",
-    overflowWrap: "break-word",
-    lineHeight,
-    fontSize,
-    "& code": {
-      fontFamily: '"Roboto Mono", monospace',
-      backgroundColor: "rgba(0, 0, 0, 0.3)",
-      padding: "3px 6px",
-      borderRadius: "4px",
-      fontSize: codeSize,
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      color: "#e6e6e6"
-    },
-    "& pre": {
-      backgroundColor: "rgba(0, 0, 0, 0.3)",
-      padding: "16px",
-      borderRadius: "8px",
-      overflowX: "auto",
-      fontFamily: '"Roboto Mono", monospace',
-      fontSize: codeSize,
-      margin: "12px 0",
-      maxWidth: "100%",
-      border: "1px solid rgba(255, 255, 255, 0.1)"
-    },
-    "& pre code": {
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      backgroundColor: "transparent",
-      padding: 0,
-      borderRadius: 0
-    },
-    "& h1": {
-      fontSize: `calc(1.5rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "20px 0 12px 0",
-      borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-      paddingBottom: "8px"
-    },
-    "& h2": {
-      fontSize: `calc(1.3rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "18px 0 10px 0"
-    },
-    "& h3": {
-      fontSize: `calc(1.1rem * ${headingScale})`,
-      fontWeight: 600,
-      margin: "16px 0 8px 0"
-    },
-    "& ul": {
-      paddingLeft: "24px",
-      margin: "10px 0"
-    },
-    "& li": {
-      margin: "4px 0"
-    },
-    "& a": {
-      color: "#90caf9",
-      textDecoration: "none",
-      borderBottom: "1px dotted rgba(144, 202, 249, 0.5)",
-      transition: "all 0.2s ease",
-      "&:hover": {
-        textDecoration: "none",
-        borderBottom: "1px solid #90caf9",
-        color: "#bbdefb"
-      }
-    },
-    "& strong": {
-      fontWeight: 600,
-      color: "#e6e6e6"
-    },
-    "& em": {
-      fontStyle: "italic",
-      color: "#e0e0e0"
-    },
-    "& br": {
-      display: "block",
-      content: '""',
-      marginTop: "8px"
-    },
-    "& p:first-of-type": {
-      marginTop: "2px"
-    },
-    "& p": {
-      margin: `${paragraphSpacing} 0`
-    }
-  })
-);
-const convertUrlsToMarkdownLinks = (text2) => {
-  const urlRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
-  return text2.replace(
-    urlRegex,
-    (_match, url, punctuation) => `[${url}](${url})${punctuation || ""}`
-  );
-};
-const MarkdownRenderer = reactExports.memo(
-  ({ content: content2, styleProps }) => {
-    const processedContent = reactExports.useMemo(() => {
-      return convertUrlsToMarkdownLinks(content2.trim());
-    }, [content2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { ...styleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Markdown,
-      {
-        components: {
-          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children })
-        },
-        children: processedContent
-      }
-    ) });
-  }
-);
-const BlockContainer = styled$1(Box)(() => ({
-  width: "95%",
-  cursor: "pointer",
-  transition: "all 0.2s ease",
-  marginLeft: 56,
-  "&:hover": {
-    opacity: 0.9
-  }
-}));
-const BlockHeader = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "executionType" && prop !== "isUser"
-})(
-  ({ theme: theme2, executionType }) => ({
-    display: "flex",
-    alignItems: "center",
-    padding: "8px 12px",
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderLeft: `3px solid ${executionType === "plan" ? theme2.palette.grey[600] : theme2.palette.grey[600]}`
-  })
-);
-const BlockIcon = styled$1(Box)(({ theme: theme2 }) => ({
-  marginRight: 8,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  color: theme2.palette.grey[500]
-}));
-const BlockTitle = styled$1(Typography)(({ theme: theme2 }) => ({
-  fontWeight: 500,
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[500]
-}));
-const BlockContent = styled$1(Typography)(({ theme: theme2 }) => ({
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[400],
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  marginTop: 2
-}));
-const ExpandedContent = styled$1(Box)(({ theme: theme2 }) => ({
-  padding: "12px 16px",
-  backgroundColor: "rgba(0, 0, 0, 0.2)",
-  borderBottomLeftRadius: 4,
-  borderBottomRightRadius: 4,
-  fontSize: "0.85rem",
-  color: theme2.palette.grey[300],
-  borderLeft: `3px solid ${theme2.palette.grey[600]}`,
-  marginLeft: 0
-}));
-const BackgroundBlock = ({
-  content: content2,
-  action,
-  executionType,
-  isUser
-}) => {
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-  const getTitle = () => {
-    switch (action) {
-      case "DONE":
-        return "Task Complete";
-      case "ASK":
-        return "Asking a Question";
-      default:
-        return executionType === "plan" ? "Planning" : "Reflection";
-    }
-  };
-  const getIcon = () => {
-    switch (action) {
-      case "DONE":
-        return faCheck;
-      case "ASK":
-        return faQuestion;
-      default:
-        return executionType === "plan" ? faLightbulb : faCommentDots;
-    }
-  };
-  const getTruncatedContent = (content22, maxLength = 140) => {
-    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { onClick: toggleExpand, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockHeader, { executionType, isUser, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", children: getTitle() }),
-        !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MarkdownRenderer,
-          {
-            content: getTruncatedContent(content2),
-            styleProps: {
-              fontSize: "0.85rem",
-              lineHeight: 1.5,
-              paragraphSpacing: "4px",
-              headingScale: 0.9,
-              codeSize: "0.85em"
-            }
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: isExpanded, timeout: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MarkdownRenderer,
-      {
-        content: content2,
-        styleProps: {
-          fontSize: "0.85rem",
-          lineHeight: 1.5,
-          paragraphSpacing: "4px",
-          headingScale: 0.9,
-          codeSize: "0.85em"
-        }
-      }
-    ) }) })
-  ] });
-};
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -82181,6 +81867,574 @@ function ft(n2) {
   }
   return React.memo(l2);
 }
+const SyntaxHighlighterStyles$1 = ft`
+  .loading-syntax-highlighter * {
+    font-family: 'Roboto Mono', monospace !important;
+  }
+`;
+const dotAnimation = keyframes`
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+`;
+const textStrobeAnimation = keyframes`
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+`;
+const LoadingContainer$5 = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 0
+}));
+const AgentAvatar$2 = styled$1(Avatar)(({ theme: theme2 }) => ({
+  backgroundColor: "rgba(56, 201, 106, 0.2)",
+  color: theme2.palette.primary.main
+}));
+const ContentContainer$3 = styled$1(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  maxWidth: "calc(100% - 60px)"
+}));
+const StatusContainer = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+}));
+const StatusText = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  display: "flex",
+  marginLeft: 16,
+  position: "relative",
+  animation: `${textStrobeAnimation} 3s ease-in-out infinite`
+}));
+const StatusTextContent = styled$1("span")(() => ({
+  wordBreak: "break-word",
+  display: "inline"
+}));
+const StatusControls = styled$1("span")(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  marginLeft: 4,
+  whiteSpace: "nowrap"
+}));
+const DotContainer = styled$1("span")(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative",
+  zIndex: 2,
+  marginLeft: 4
+}));
+const Dot = styled$1("span")(({ theme: theme2, delay }) => ({
+  width: 4,
+  height: 4,
+  borderRadius: "50%",
+  backgroundColor: theme2.palette.text.secondary,
+  margin: "0 1px",
+  animation: `${dotAnimation} 1.4s infinite ease-in-out`,
+  animationDelay: `${delay}s`
+}));
+const CodeToggleButton = styled$1(Button)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  padding: "0 4px",
+  minWidth: "auto",
+  textTransform: "none",
+  marginLeft: 8,
+  height: "auto",
+  fontSize: "0.75rem",
+  lineHeight: 1,
+  opacity: 0.7,
+  borderRadius: "12px",
+  transition: "all 0.2s ease",
+  position: "relative",
+  zIndex: 2,
+  "&:hover": {
+    backgroundColor: "transparent",
+    opacity: 1,
+    color: theme2.palette.primary.light
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: 2,
+    marginLeft: 0
+  }
+}));
+const CodeContainer$4 = styled$1(Box)(() => ({
+  maxWidth: "100%",
+  marginLeft: 16,
+  marginTop: 8
+}));
+const LoadingCodeBlock = ({ code: code2 }) => {
+  if (!code2) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        maxHeight: "300px",
+        overflow: "auto",
+        "&::-webkit-scrollbar": {
+          width: "6px",
+          height: "6px"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "3px"
+        },
+        "&::-webkit-scrollbar-corner": {
+          backgroundColor: "rgba(0, 0, 0, 0.3)"
+        },
+        borderRadius: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles$1, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          highlighter,
+          {
+            language: "python",
+            style: atomOneDark,
+            customStyle: {
+              fontSize: "0.85rem",
+              width: "100%",
+              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
+              padding: "0.75rem",
+              margin: 0
+              // Remove margin to make it more compact
+            },
+            codeTagProps: {
+              style: {
+                fontFamily: '"Roboto Mono", monospace !important'
+              }
+            },
+            className: "loading-syntax-highlighter",
+            wrapLines: true,
+            wrapLongLines: true,
+            children: code2
+          }
+        )
+      ]
+    }
+  );
+};
+const getStatusText = (status) => {
+  switch (status) {
+    case "pending":
+      return "Waiting to start";
+    case "processing":
+      return "Thinking";
+    case "completed":
+      return "Finishing up";
+    case "failed":
+      return "Had trouble";
+    case "cancelled":
+      return "Had to stop";
+    default:
+      return "Thinking";
+  }
+};
+const getDetailedStatusText = (status, execution) => {
+  if (execution.action) {
+    switch (execution.action) {
+      case "CODE":
+        return "Executing code";
+      case "WRITE":
+        return "Writing content";
+      case "EDIT":
+        return "Editing content";
+      case "READ":
+        return "Reading content";
+      case "ASK":
+        return "Formulating a question";
+      case "DONE":
+        return "Completing the task";
+      case "BYE":
+        return "Ending the conversation";
+    }
+  }
+  if (execution.execution_type) {
+    switch (execution.execution_type) {
+      case "plan":
+        return "Planning my approach";
+      case "action":
+        return "Thinking";
+      case "reflection":
+        return "Reflecting on next steps";
+      case "response":
+        return "Writing a response";
+      case "security_check":
+        return "Performing security checks";
+      case "classification":
+        return "Thinking about my response";
+      case "system":
+        return "Processing system tasks";
+      case "user_input":
+        return "Processing your input";
+    }
+  }
+  return status ? getStatusText(status) : "thinking";
+};
+const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
+  const statusText = currentExecution ? getDetailedStatusText(status, currentExecution) : status ? getStatusText(status) : "Thinking";
+  const codeSnippet = currentExecution?.code || null;
+  const message2 = currentExecution?.message || null;
+  const [isCodeExpanded, setIsCodeExpanded] = reactExports.useState(false);
+  const { ref, scrollToBottom: scrollToBottomHook } = useScrollToBottom(
+    [status, currentExecution, message2],
+    300,
+    // Default threshold
+    50
+    // Default button threshold
+  );
+  reactExports.useEffect(() => {
+    if (codeSnippet && isCodeExpanded) {
+      requestAnimationFrame(() => {
+        if (scrollToBottomHook) {
+          scrollToBottomHook();
+        } else if (scrollToBottom) {
+          scrollToBottom();
+        }
+      });
+    }
+  }, [codeSnippet, isCodeExpanded, scrollToBottom, scrollToBottomHook]);
+  const toggleCodeExpansion = () => {
+    setIsCodeExpanded((prev2) => !prev2);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingContainer$5, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, style: { height: 0, width: 0 } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot, size: "sm" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentContainer$3, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusText, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StatusTextContent, { children: message2 ? message2 : `${statusText}` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusControls, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(DotContainer, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0.2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Dot, { delay: 0.4 })
+          ] }),
+          codeSnippet && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CodeToggleButton,
+            {
+              onClick: toggleCodeExpansion,
+              size: "small",
+              variant: "text",
+              startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: isCodeExpanded ? faChevronUp : faChevronDown,
+                  size: "xs",
+                  style: { fontSize: "0.75rem" }
+                }
+              ),
+              children: isCodeExpanded ? "(Hide code)" : "(Show code)"
+            }
+          )
+        ] })
+      ] }) }),
+      codeSnippet && isCodeExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeContainer$4, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingCodeBlock, { code: codeSnippet }) })
+    ] })
+  ] });
+};
+const HighlightContainer$1 = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "action" && prop !== "isUser"
+})(({ action }) => ({
+  position: "relative",
+  padding: "16px",
+  borderRadius: "8px",
+  marginBottom: "16px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+  width: "100%",
+  border: `1px solid ${action === "DONE" ? "rgba(76, 175, 80, 0.5)" : "rgba(33, 150, 243, 0.5)"}`,
+  backgroundColor: action === "DONE" ? "rgba(76, 175, 80, 0.1)" : "rgba(33, 150, 243, 0.1)",
+  transition: "all 0.2s ease",
+  "&:hover": {
+    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)"
+  }
+}));
+const ActionBadge = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "action"
+})(({ theme: theme2, action }) => ({
+  position: "absolute",
+  top: "-10px",
+  right: "16px",
+  padding: "4px 8px",
+  borderRadius: "12px",
+  fontSize: "0.7rem",
+  fontWeight: "bold",
+  backgroundColor: action === "DONE" ? theme2.palette.success.main : theme2.palette.info.main,
+  color: "#fff",
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+}));
+const ActionHighlight = ({
+  children,
+  action,
+  isUser,
+  taskClassification,
+  executionType
+}) => {
+  const shouldHighlight = (action === "DONE" || action === "ASK") && taskClassification !== "conversation" || executionType === "response" && taskClassification !== "conversation";
+  if (!shouldHighlight) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HighlightContainer$1, { action, isUser, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionBadge, { action, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FontAwesomeIcon,
+        {
+          icon: action === "DONE" ? faCheck : faQuestion,
+          size: "xs"
+        }
+      ),
+      action === "DONE" ? "COMPLETE" : "QUESTION"
+    ] }),
+    children
+  ] });
+};
+const MarkdownContent = styled$1(Box, {
+  shouldForwardProp: (prop) => ![
+    "fontSize",
+    "lineHeight",
+    "paragraphSpacing",
+    "headingScale",
+    "codeSize"
+  ].includes(prop)
+})(
+  ({
+    fontSize = "1.05rem",
+    lineHeight = 1.6,
+    paragraphSpacing = "8px",
+    headingScale = 1,
+    codeSize = "0.85em"
+  }) => ({
+    wordBreak: "break-word",
+    overflowWrap: "break-word",
+    lineHeight,
+    fontSize,
+    "& code": {
+      fontFamily: '"Roboto Mono", monospace',
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      padding: "3px 6px",
+      borderRadius: "4px",
+      fontSize: codeSize,
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      color: "#e6e6e6"
+    },
+    "& pre": {
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      padding: "16px",
+      borderRadius: "8px",
+      overflowX: "auto",
+      fontFamily: '"Roboto Mono", monospace',
+      fontSize: codeSize,
+      margin: "12px 0",
+      maxWidth: "100%",
+      border: "1px solid rgba(255, 255, 255, 0.1)"
+    },
+    "& pre code": {
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      backgroundColor: "transparent",
+      padding: 0,
+      borderRadius: 0
+    },
+    "& h1": {
+      fontSize: `calc(1.5rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "20px 0 12px 0",
+      borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+      paddingBottom: "8px"
+    },
+    "& h2": {
+      fontSize: `calc(1.3rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "18px 0 10px 0"
+    },
+    "& h3": {
+      fontSize: `calc(1.1rem * ${headingScale})`,
+      fontWeight: 600,
+      margin: "16px 0 8px 0"
+    },
+    "& ul": {
+      paddingLeft: "24px",
+      margin: "10px 0"
+    },
+    "& li": {
+      margin: "4px 0"
+    },
+    "& a": {
+      color: "#90caf9",
+      textDecoration: "none",
+      borderBottom: "1px dotted rgba(144, 202, 249, 0.5)",
+      transition: "all 0.2s ease",
+      "&:hover": {
+        textDecoration: "none",
+        borderBottom: "1px solid #90caf9",
+        color: "#bbdefb"
+      }
+    },
+    "& strong": {
+      fontWeight: 600,
+      color: "#e6e6e6"
+    },
+    "& em": {
+      fontStyle: "italic",
+      color: "#e0e0e0"
+    },
+    "& br": {
+      display: "block",
+      content: '""',
+      marginTop: "8px"
+    },
+    "& p:first-of-type": {
+      marginTop: "2px"
+    },
+    "& p": {
+      margin: `${paragraphSpacing} 0`
+    }
+  })
+);
+const convertUrlsToMarkdownLinks = (text2) => {
+  const urlRegex = /(?<!\]\()(https?:\/\/\S+?)([,.;:!?"'\)\]]+)?(?=\s|$)/g;
+  return text2.replace(
+    urlRegex,
+    (_match, url, punctuation) => `[${url}](${url})${punctuation || ""}`
+  );
+};
+const MarkdownRenderer = reactExports.memo(
+  ({ content: content2, styleProps }) => {
+    const processedContent = reactExports.useMemo(() => {
+      return convertUrlsToMarkdownLinks(content2.trim());
+    }, [content2]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { ...styleProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Markdown,
+      {
+        components: {
+          a: ({ href, children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children })
+        },
+        children: processedContent
+      }
+    ) });
+  }
+);
+const BlockContainer = styled$1(Box)(() => ({
+  width: "95%",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  marginLeft: 56,
+  "&:hover": {
+    opacity: 0.9
+  }
+}));
+const BlockHeader = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "executionType" && prop !== "isUser"
+})(
+  ({ theme: theme2, executionType }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderLeft: `3px solid ${executionType === "plan" ? theme2.palette.grey[600] : theme2.palette.grey[600]}`
+  })
+);
+const BlockIcon = styled$1(Box)(({ theme: theme2 }) => ({
+  marginRight: 8,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  color: theme2.palette.grey[500]
+}));
+const BlockTitle = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontWeight: 500,
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[500]
+}));
+const BlockContent = styled$1(Typography)(({ theme: theme2 }) => ({
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[400],
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginTop: 2
+}));
+const ExpandedContent = styled$1(Box)(({ theme: theme2 }) => ({
+  padding: "12px 16px",
+  backgroundColor: "rgba(0, 0, 0, 0.2)",
+  borderBottomLeftRadius: 4,
+  borderBottomRightRadius: 4,
+  fontSize: "0.85rem",
+  color: theme2.palette.grey[300],
+  borderLeft: `3px solid ${theme2.palette.grey[600]}`,
+  marginLeft: 0
+}));
+const BackgroundBlock = ({
+  content: content2,
+  action,
+  executionType,
+  isUser
+}) => {
+  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const getTitle = () => {
+    switch (action) {
+      case "DONE":
+        return "Task Complete";
+      case "ASK":
+        return "Asking a Question";
+      default:
+        return executionType === "plan" ? "Planning" : "Reflection";
+    }
+  };
+  const getIcon = () => {
+    switch (action) {
+      case "DONE":
+        return faCheck;
+      case "ASK":
+        return faQuestion;
+      default:
+        return executionType === "plan" ? faLightbulb : faCommentDots;
+    }
+  };
+  const getTruncatedContent = (content22, maxLength = 140) => {
+    return content22.length > maxLength ? `${content22.slice(0, maxLength)}...` : content22;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockContainer, { onClick: toggleExpand, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockHeader, { executionType, isUser, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: getIcon(), size: "sm" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockTitle, { variant: "subtitle2", children: getTitle() }),
+        !isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MarkdownRenderer,
+          {
+            content: getTruncatedContent(content2),
+            styleProps: {
+              fontSize: "0.85rem",
+              lineHeight: 1.5,
+              paragraphSpacing: "4px",
+              headingScale: 0.9,
+              codeSize: "0.85em"
+            }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: isExpanded, timeout: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MarkdownRenderer,
+      {
+        content: content2,
+        styleProps: {
+          fontSize: "0.85rem",
+          lineHeight: 1.5,
+          paragraphSpacing: "4px",
+          headingScale: 0.9,
+          codeSize: "0.85em"
+        }
+      }
+    ) }) })
+  ] });
+};
 const CodeContainer$3 = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
@@ -82348,7 +82602,7 @@ const FileName = styled$1(Typography)({
     textDecoration: "underline"
   }
 });
-const getFileName$1 = (path) => {
+const getFileName$2 = (path) => {
   const parts = path.split(/[/\\]/);
   return parts[parts.length - 1];
 };
@@ -82360,10 +82614,10 @@ const FileAttachment = ({ file, onClick }) => {
     FileAttachmentContainer,
     {
       onClick: handleClick,
-      title: `Click to open ${getFileName$1(file)}`,
+      title: `Click to open ${getFileName$2(file)}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFile, size: "sm" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$1(file) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$2(file) })
       ]
     }
   );
@@ -82381,7 +82635,7 @@ const AttachmentImage = styled$1("img")({
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
   }
 });
-const getFileName = (path) => {
+const getFileName$1 = (path) => {
   const parts = path.split(/[/\\]/);
   return parts[parts.length - 1];
 };
@@ -82397,9 +82651,9 @@ const ImageAttachment = ({
     AttachmentImage,
     {
       src,
-      alt: getFileName(file),
+      alt: getFileName$1(file),
       onClick: handleClick,
-      title: `Click to open ${getFileName(file)}`
+      title: `Click to open ${getFileName$1(file)}`
     }
   );
 };
@@ -82631,6 +82885,42 @@ const StatusIndicator = ({ status }) => {
   if (!status) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledStatusIndicator, { status, children: status });
 };
+const AttachmentVideo = styled$1("video")({
+  maxWidth: "100%",
+  maxHeight: 300,
+  borderRadius: 8,
+  marginBottom: 8,
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  cursor: "pointer",
+  transition: "transform 0.2s ease, box-shadow 0.2s ease",
+  "&:hover": {
+    transform: "scale(1.02)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+  }
+});
+const getFileName = (path) => {
+  const parts = path.split(/[/\\]/);
+  return parts[parts.length - 1];
+};
+const VideoAttachment = ({
+  file,
+  src,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick(file);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    AttachmentVideo,
+    {
+      src,
+      controls: true,
+      preload: "metadata",
+      onClick: handleClick,
+      title: `Click to open ${getFileName(file)}`
+    }
+  );
+};
 const isWebUrl = (path) => {
   return path.startsWith("http://") || path.startsWith("https://");
 };
@@ -82656,11 +82946,34 @@ const isImage = (path) => {
   const lowerPath = path.toLowerCase();
   return imageExtensions.some((ext) => lowerPath.endsWith(ext));
 };
+const isVideo = (path) => {
+  const videoExtensions = [
+    ".mp4",
+    ".webm",
+    ".ogg",
+    ".mov",
+    ".avi",
+    ".wmv",
+    ".flv",
+    ".mkv",
+    ".m4v",
+    ".3gp",
+    ".3g2"
+  ];
+  const lowerPath = path.toLowerCase();
+  return videoExtensions.some((ext) => lowerPath.endsWith(ext));
+};
 const getAttachmentUrl = (client, path) => {
-  if (isImage(path) && !path.startsWith("http")) {
-    const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+  if (path.startsWith("http")) {
+    return path;
+  }
+  const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+  if (isImage(path)) {
     return client.static.getImageUrl(normalizedPath);
   }
+  if (isVideo(path)) {
+    return client.static.getVideoUrl(normalizedPath);
+  }
   return path;
 };
 const MessageItem = reactExports.memo(
@@ -82716,6 +83029,15 @@ const MessageItem = reactExports.memo(
           },
           `${message2.id}-${file}`
         )) }),
+        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          VideoAttachment,
+          {
+            file,
+            src: getUrl(file),
+            onClick: handleFileClick
+          },
+          `${message2.id}-${file}`
+        )) }),
         message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
         (() => {
           const hasCollapsibleContent = isSecurityCheck && (message2.code || message2.stdout || message2.stderr || message2.logging);
@@ -82738,7 +83060,7 @@ const MessageItem = reactExports.memo(
           return contentBlocks;
         })(),
         message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status }),
-        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           FileAttachment,
           {
             file,
@@ -82764,6 +83086,15 @@ const MessageItem = reactExports.memo(
               },
               `${message2.id}-${file}`
             )) }),
+            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              VideoAttachment,
+              {
+                file,
+                src: getUrl(file),
+                onClick: handleFileClick
+              },
+              `${message2.id}-${file}`
+            )) }),
             message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
             (() => {
               const hasCollapsibleContent = isAction && (message2.code || message2.stdout || message2.stderr || message2.logging);
@@ -82786,7 +83117,7 @@ const MessageItem = reactExports.memo(
               return contentBlocks;
             })(),
             message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status }),
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               FileAttachment,
               {
                 file,
@@ -82850,8 +83181,10 @@ const MessagesView = ({
   isFetchingMore,
   jobStatus,
   agentName,
+  currentExecution,
   messagesContainerRef,
-  messagesEndRef
+  messagesEndRef,
+  scrollToBottom
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
     isFetchingMore && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingMoreIndicator, { children: [
@@ -82876,7 +83209,15 @@ const MessagesView = ({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "No messages yet. Start a conversation!" })
       ] }),
-      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIndicator, { status: jobStatus, agentName }),
+      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        LoadingIndicator,
+        {
+          status: jobStatus,
+          agentName,
+          currentExecution,
+          scrollToBottom
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: messagesEndRef })
     ] })
   ] });
@@ -82930,6 +83271,7 @@ const ChatContent = ({
   isFetchingMore,
   isFarFromBottom,
   jobStatus,
+  currentExecution,
   messagesContainerRef,
   messagesEndRef,
   scrollToBottom,
@@ -82968,8 +83310,10 @@ const ChatContent = ({
           isFetchingMore,
           jobStatus,
           agentName,
+          currentExecution,
           messagesContainerRef,
-          messagesEndRef
+          messagesEndRef,
+          scrollToBottom
         }
       )
     ) : (
@@ -85420,7 +85764,8 @@ const ChatPage = () => {
     jobStatus,
     isLoading,
     setIsLoading,
-    checkForActiveJobs
+    checkForActiveJobs,
+    currentExecution
   } = useJobPolling({
     conversationId,
     addMessage
@@ -85656,6 +86001,7 @@ Store messages: ${JSON.stringify(getMessages(conversationId || ""), null, 2)}`;
         isFetchingMore,
         isFarFromBottom,
         jobStatus,
+        currentExecution,
         messagesContainerRef,
         messagesEndRef,
         scrollToBottom,
@@ -90231,6 +90577,26 @@ const UserProfileSidebar = ({
     ) : null
   ] });
 };
+const useUiPreferencesStore = create$1()(
+  persist(
+    (set) => ({
+      isSidebarCollapsed: false,
+      toggleSidebar: () => {
+        set((state) => ({
+          isSidebarCollapsed: !state.isSidebarCollapsed
+        }));
+      },
+      setSidebarCollapsed: (collapsed) => {
+        set({
+          isSidebarCollapsed: collapsed
+        });
+      }
+    }),
+    {
+      name: "ui-preferences-storage"
+    }
+  )
+);
 const StyledDrawer = styled$1(Drawer, {
   shouldForwardProp: (prop) => prop !== "width"
 })(({ theme: theme2, width }) => ({
@@ -90346,12 +90712,10 @@ const ToggleButton = styled$1(IconButton)(() => ({
   }
 }));
 const SidebarNavigation = () => {
-  const [expanded, setExpanded] = reactExports.useState(true);
   const navigate = useNavigate();
   const currentView = useCurrentView();
-  const toggleSidebar = () => {
-    setExpanded(!expanded);
-  };
+  const { isSidebarCollapsed, toggleSidebar } = useUiPreferencesStore();
+  const expanded = !isSidebarCollapsed;
   const navItems = [
     {
       icon: faCode,
@@ -90426,6 +90790,7 @@ const SidebarNavigation = () => {
           onClick: toggleSidebar,
           size: "small",
           title: expanded ? "Collapse sidebar" : "Expand sidebar",
+          "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             FontAwesomeIcon,
             {